├── .eslintrc
├── .github
└── dependabot.yml
├── .gitignore
├── .npmignore
├── .prettierrc
├── .travis.yml
├── CHANGELOG.md
├── LICENSE
├── README.md
├── build
├── MaterialButton
│ ├── MaterialButton.d.ts
│ └── MaterialButtonProps.d.ts
├── index.d.ts
├── index.es.js
├── index.es.js.map
├── index.js
├── index.js.map
└── utils
│ └── MaterialButtonMakeStyles.d.ts
├── jest.config.js
├── package-lock.json
├── package.json
├── postinstallSSJ.js
├── rollup.config.js
├── src
├── MaterialButton
│ ├── MaterialButton.scss
│ ├── MaterialButton.tsx
│ └── MaterialButtonProps.ts
├── index.ts
└── utils
│ └── MaterialButtonMakeStyles.ts
├── tests
├── MaterialButton.spec.tsx
└── MaterialButtonMakeStyles.test.tsx
└── tsconfig.json
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "@typescript-eslint/parser",
3 | "parserOptions": {
4 | "ecmaVersion": 2020,
5 | "sourceType": "module",
6 | "ecmaFeatures": {
7 | "jsx": true,
8 | "tsx": true
9 | }
10 | },
11 | "settings": {
12 | "react": {
13 | "version": "detect"
14 | }
15 | },
16 | "plugins": ["jest"],
17 | "env": {
18 | "jest/globals": true
19 | },
20 | "extends": [
21 | "plugin:react/recommended",
22 | "plugin:@typescript-eslint/recommended",
23 | "prettier/@typescript-eslint",
24 | "plugin:prettier/recommended"
25 | ],
26 | "rules": {}
27 | }
28 |
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 | - package-ecosystem: npm
4 | directory: "/"
5 | schedule:
6 | interval: daily
7 | time: "10:00"
8 | open-pull-requests-limit: 10
9 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | storybook-static
3 | coverage
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | storybook-static
3 | src
4 | tsconfig.json
5 | jest.config.js
6 | .gitignore
7 | .eslint
8 | /tests
9 | coverage
10 | .prettierrc
11 | rollup.config.js
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "semi": true,
3 | "trailingComma": "all",
4 | "printWidth": 80
5 | }
6 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 | language: node_js
3 | node_js:
4 | - node
5 |
6 | script:
7 | - npm run test:coveralls
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4 |
5 |
6 | ## [2.0.0](https://github.com/JinSSJ3/dynamicss) (2021-09-08)
7 |
8 | ### Features
9 |
10 | * updated readme status badges
11 | * added function for checking whether a stylesheet exists or not in the DOM
12 | * added function for making a StyleSheet object
13 |
14 |
15 |
16 | ## [1.0.8](https://github.com/JinSSJ3/dynamicss) (2021-09-08)
17 |
18 | ### Features
19 |
20 | * added readme status badges
21 | * added function for inserting dynamically a stylesheet exists or not in the DOM
22 | * added function for editing a StyleSheet that exists on the DOM given an id
23 | * added function for removing a StyleSheet that exists on the DOM given an id
24 |
25 | # [1.0.0](https://github.com/JinSSJ3/dynamicss) (2021-09-08)
26 |
27 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Jin Jose Manuel Serrano Amaut
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 |
React Material Button
5 |
6 |
7 | [](https://github.com/JinSSJ3/react-drop-zone-responsive/blob/HEAD/LICENSE)
8 | [](https://www.npmjs.com/package/@unlimited-react-components/material-button)
9 | [](https://www.npmjs.com/package/@unlimited-react-components/material-button)
10 | [](https://david-dm.org/unlimited-react-components/material-button)
11 | [](https://www.travis-ci.com/unlimited-react-components/material-button)
12 | [](https://packagephobia.com/result?p=@unlimited-react-components/material-button)
13 | [](https://coveralls.io/github/unlimited-react-components/material-button?branch=master)
14 | [](https://lgtm.com/projects/g/unlimited-react-components/material-button/alerts/)
15 | [](https://lgtm.com/projects/g/unlimited-react-components/material-button/context:javascript)
16 | [](https://snyk.io/test/github/unlimited-react-components/material-button)
17 | [](http://makeapullrequest.com)
18 |
19 | ## Description
20 |
21 | Material design button implementation in react.js.
22 |
23 | ## Why reinvent the wheel and create another "material-button"?
24 |
25 | Well... I was bored and I needed something to do last sunday.
26 | What is more, it was a challenge for me to create a material button with very few dependencies.
27 |
28 | ## Installation
29 |
30 | Material Button is available as an [npm package](https://www.npmjs.com/package/@unlimited-react-components/material-button).
31 |
32 | ```sh
33 | // with npm
34 | npm i @unlimited-react-components/material-button
35 | ```
36 |
37 | # Material Button API
38 |
39 | Here is a quick example to get you started, **it's all you need**:
40 |
41 | Interactive and live demo:
42 |
43 | [](https://codesandbox.io/s/material-button-06eif)
44 |
45 | ## Props:
46 |
47 | | Name | Type | Default | Description |
48 | | -------- | ---------------------------------------------------- | ----------- | ----------------------------------------------------------------- |
49 | | children | node | "" | The content of the button. |
50 | | style | React.CSSProperties | {} | The inline style |
51 | | color | string | "#071e25" | The main color for the button. (e.g. "#FFFFFF", "rgb(255,12,45)") |
52 | | variant | "text" \| "outlined" \| "contained" | "contained" | The variant of the button |
53 | | disabled | boolean | false | If true, the button will be disabled. |
54 | | href | string | undefined | I present, the url to redirect |
55 | | text | "uppercase" \| "capitalize" \| "lowercase" \| "none" | "none" | The text decoration for the button text |
56 | | onClick | Function | () => {} | The action to perform on click event |
57 |
58 | ## License
59 |
60 | This project is licensed under the terms of the
61 | [MIT license](/LICENSE).
62 |
--------------------------------------------------------------------------------
/build/MaterialButton/MaterialButton.d.ts:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./MaterialButton.scss";
3 | import { MaterialButtonProps } from "./MaterialButtonProps";
4 | declare const MaterialButton: React.FC;
5 | export default MaterialButton;
6 |
--------------------------------------------------------------------------------
/build/MaterialButton/MaterialButtonProps.d.ts:
--------------------------------------------------------------------------------
1 | import { OverridableProps } from "@unlimited-react-components/kernel";
2 | export interface MaterialButtonProps extends OverridableProps {
3 | /**
4 | * Function that specifies
5 | * what to do on click
6 | */
7 | onClick?: Function;
8 | /**
9 | * variants of button:
10 | * contained: with background color
11 | * outlined: border and transparent backgorund, on hover background color takes the color
12 | * text: no borders and no background color, on hover
13 | */
14 | variant?: "text" | "outlined" | "contained";
15 | /**
16 | * whether the button will be disabled or not
17 | */
18 | disabled?: boolean;
19 | /**
20 | * whether this button redirect to somewhere
21 | */
22 | href?: string;
23 | /**
24 | * the text transfor for the button label
25 | */
26 | text?: "uppercase" | "capitalize" | "lowercase" | "none";
27 | /**
28 | * the main theme color
29 | */
30 | color?: string;
31 | }
32 | /**
33 | * default props for material button
34 | */
35 | export declare const MaterialButtonDefaultProps: MaterialButtonProps;
36 |
--------------------------------------------------------------------------------
/build/index.d.ts:
--------------------------------------------------------------------------------
1 | import MaterialButton from "./MaterialButton/MaterialButton";
2 | export { MaterialButton };
3 |
--------------------------------------------------------------------------------
/build/index.es.js:
--------------------------------------------------------------------------------
1 | function ___$insertStyle(css) {
2 | if (!css) {
3 | return;
4 | }
5 |
6 | if (typeof window === 'undefined') {
7 | return;
8 | }
9 |
10 | const style = document.createElement('style');
11 | style.setAttribute('type', 'text/css');
12 | style.innerHTML = css;
13 | document.head.appendChild(style);
14 | return css;
15 | }
16 |
17 | import React, { useState, useEffect, useRef } from 'react';
18 |
19 | /*! *****************************************************************************
20 | Copyright (c) Microsoft Corporation.
21 |
22 | Permission to use, copy, modify, and/or distribute this software for any
23 | purpose with or without fee is hereby granted.
24 |
25 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
26 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
27 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
28 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
29 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
30 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
31 | PERFORMANCE OF THIS SOFTWARE.
32 | ***************************************************************************** */
33 |
34 | function __awaiter(thisArg, _arguments, P, generator) {
35 | function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
36 | return new (P || (P = Promise))(function (resolve, reject) {
37 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
38 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
39 | function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
40 | step((generator = generator.apply(thisArg, _arguments || [])).next());
41 | });
42 | }
43 |
44 | function __generator(thisArg, body) {
45 | var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
46 | return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
47 | function verb(n) { return function (v) { return step([n, v]); }; }
48 | function step(op) {
49 | if (f) throw new TypeError("Generator is already executing.");
50 | while (_) try {
51 | if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
52 | if (y = 0, t) op = [op[0] & 2, t.value];
53 | switch (op[0]) {
54 | case 0: case 1: t = op; break;
55 | case 4: _.label++; return { value: op[1], done: false };
56 | case 5: _.label++; y = op[1]; op = [0]; continue;
57 | case 7: op = _.ops.pop(); _.trys.pop(); continue;
58 | default:
59 | if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
60 | if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
61 | if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
62 | if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
63 | if (t[2]) _.ops.pop();
64 | _.trys.pop(); continue;
65 | }
66 | op = body.call(thisArg, _);
67 | } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
68 | if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
69 | }
70 | }
71 |
72 | ___$insertStyle("@import url(\"https://fonts.googleapis.com/css2?family=Roboto&display=swap\");\n.material-button-root {\n border: 0;\n cursor: pointer;\n display: inline-flex;\n outline: 0;\n position: relative;\n align-items: center;\n vertical-align: middle;\n justify-content: center;\n text-decoration: none;\n text-transform: none;\n}\n\n.material-button {\n transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n overflow: hidden;\n min-width: 64px;\n box-sizing: border-box;\n border-radius: 4px;\n font-family: \"Roboto\", \"Helvetica\", \"Arial\", sans-serif;\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1.75;\n letter-spacing: 0.02857em;\n}\n\n.material-button.uppercase {\n text-transform: uppercase;\n}\n\n.material-button.lowercase {\n text-transform: lowercase;\n}\n\n.material-button.capitalize {\n text-transform: capitalize;\n}\n\n.material-button.contained {\n padding: 6px 16px;\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n\n.material-button.outlined {\n padding: 5px 15px;\n}\n\n.material-button.text {\n padding: 5px 15px;\n}\n\n.material-button-root.contained:hover {\n box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);\n}\n\n.material-button span.label {\n width: 100%;\n display: inherit;\n align-items: inherit;\n justify-content: inherit;\n}\n\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 500ms linear;\n background-color: rgba(255, 255, 255, 0.7);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 0;\n }\n}\n.material-button-root.disabled {\n box-shadow: none;\n cursor: default;\n pointer-events: none;\n background-color: rgba(0, 0, 0, 0.12);\n color: rgba(0, 0, 0, 0.26);\n padding: 6px 16px;\n}\n\n@media screen and (max-width: 600px) {\n .material-button {\n min-width: 30px;\n font-size: 0.78rem;\n line-height: 1.5;\n letter-spacing: 0.025em;\n }\n\n .material-button.contained {\n padding: 4px 13px;\n }\n\n .material-button.outlined {\n padding: 4px 12px;\n }\n}");
73 |
74 | /*! *****************************************************************************
75 | Copyright (c) Microsoft Corporation.
76 |
77 | Permission to use, copy, modify, and/or distribute this software for any
78 | purpose with or without fee is hereby granted.
79 |
80 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
81 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
82 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
83 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
84 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
85 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
86 | PERFORMANCE OF THIS SOFTWARE.
87 | ***************************************************************************** */
88 |
89 | var __assign = function() {
90 | __assign = Object.assign || function __assign(t) {
91 | for (var s, i = 1, n = arguments.length; i < n; i++) {
92 | s = arguments[i];
93 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
94 | }
95 | return t;
96 | };
97 | return __assign.apply(this, arguments);
98 | };
99 |
100 | /**
101 | * hexArray & decArray
102 | *
103 | * arrays of numbers used to convert hexadecimal numbers into decimal and viceversa
104 | */
105 | var hexArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
106 | var decArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
107 | /**
108 | * Converts hex number in string representation to decimal number
109 | *
110 | *
111 | * @param letter the string hex number
112 | * @returns a decimal number
113 | */
114 | var hexTodec = function (letter) {
115 | if (hexArray.includes(letter)) {
116 | return decArray[hexArray.indexOf(letter)];
117 | }
118 | else {
119 | return 0;
120 | }
121 | };
122 | /**
123 | * Validates wheteher the color is hexadecimal css color
124 | * Example: #FF56AC
125 | *
126 | *
127 | * @param colorInput the color inpt to test
128 | * @returns true if the inputColor is a hexadecimal css color
129 | */
130 | var isHexColor = function (colorInput) {
131 | // if first element is no '#' return default background color
132 | if (colorInput.charAt(0) !== '#') {
133 | return false;
134 | }
135 | // if color lenght is not exactly 7 return default
136 | if (colorInput.length !== 7) {
137 | return false;
138 | }
139 | // if one of the letters is not included in hex array return default
140 | for (var i = 1; i < colorInput.length; i++) {
141 | if (!hexArray.includes(colorInput.charAt(i))) {
142 | return false;
143 | }
144 | }
145 | return true;
146 | };
147 | /**
148 | * In order to managae rgba() we convert hex colors into rgba()
149 | * If the given color is already a rgb() color, it can add the percentage to convert it into rgba()
150 | *
151 | *
152 | * @param colorInput color in hex or in rgb
153 | * @param perc percentage for RGBA() color
154 | * @returns the rgba representation of a hex color
155 | */
156 | var hexColorToRGB = function (colorInput, perc, defaultColor) {
157 | if (perc === void 0) { perc = 0; }
158 | var resultDefault = defaultColor ? defaultColor : "rgba(255, 255, 255, 0.6)";
159 | if (!colorInput) {
160 | return resultDefault;
161 | }
162 | //work only in uppercase
163 | var color = colorInput.toUpperCase();
164 | // is already a rgba color
165 | if (color.includes("RGBA")) {
166 | return color;
167 | }
168 | //return rbg => rgba
169 | if (color.includes("RGB")) {
170 | return color.replace('RGB', "rgba").replace(')', ", " + perc + ")");
171 | }
172 | // if is a hex color or named color
173 | if (!isHexColor(colourNameToHex(color))) {
174 | return resultDefault;
175 | }
176 | var resultOk = "";
177 | //let strVar: string = "";
178 | var component1 = 0;
179 | var component2 = 0;
180 | var component3 = 0;
181 | //If passed all validations, proceed to transform
182 | component1 = hexTodec(color.charAt(1)) * 16 + hexTodec(color.charAt(2));
183 | component2 = hexTodec(color.charAt(3)) * 16 + hexTodec(color.charAt(4));
184 | component3 = hexTodec(color.charAt(5)) * 16 + hexTodec(color.charAt(6));
185 | resultOk = "rgba(" + component1 + ", " + component2 + "," + component3 + " , " + perc + ")";
186 | return resultOk;
187 | };
188 | /**
189 | * Make the color into a darker color
190 | * @param colorInput
191 | * @returns the darked color in
192 | */
193 | var darkerColor = function (colorInput, percentage) {
194 | if (percentage === void 0) { percentage = 25; }
195 | var darkedColor = "";
196 | var reduce = (100 - percentage) / 100;
197 | var component1 = 0;
198 | var component2 = 0;
199 | var component3 = 0;
200 | if (isHexColor(colourNameToHex(colorInput))) {
201 | component1 = hexTodec(colorInput.charAt(1)) * 16 + hexTodec(colorInput.charAt(2));
202 | component2 = hexTodec(colorInput.charAt(3)) * 16 + hexTodec(colorInput.charAt(4));
203 | component3 = hexTodec(colorInput.charAt(5)) * 16 + hexTodec(colorInput.charAt(6));
204 | darkedColor = "rgb(" + component1 * reduce + ", " + component2 * reduce + "," + component3 * reduce + ")";
205 | }
206 | else {
207 | if (colorInput.includes("rgba")) {
208 | var slicer = colorInput.replace("rgba(", "");
209 | var components = slicer.split(",");
210 | darkedColor = "rgb(" + parseInt(components[0], 10) * reduce + ", " + parseInt(components[1], 10) * reduce + "," + parseInt(components[2], 10) * reduce + ")";
211 | //return darkedColor;
212 | }
213 | else if (colorInput.includes("rgb")) {
214 | var slicer = colorInput.replace("rgb(", "");
215 | var components = slicer.split(",");
216 | darkedColor = "rgb(" + parseInt(components[0], 10) * reduce + ", " + parseInt(components[1], 10) * reduce + "," + parseInt(components[2], 10) * reduce + ")";
217 | // return darkedColor;
218 | }
219 | }
220 | return darkedColor;
221 | };
222 | /**
223 | * Merge props that com form user and those ones that are default
224 | * if incommingStyle is null this returns teh default value
225 | *
226 | * @param incommingProps prop that comes from props attributoo of a React Node
227 | * @param defaultProps default prop defined for that React Node
228 | * @returns merged props
229 | */
230 | function mergeProps(incommingProps, defaultProps) {
231 | if (!incommingProps) {
232 | return defaultProps;
233 | }
234 | else {
235 | return __assign(__assign({}, defaultProps), incommingProps);
236 | }
237 | }
238 | /**
239 | * Asure a base colour when not given or when given an incorrect color format
240 | * default color is this kind of grey #5d6475
241 | *
242 | * @param color param color given by user
243 | * @returns returns the same color
244 | */
245 | var asureColor = function (color) {
246 | if (color !== undefined && color !== "") {
247 | return color;
248 | }
249 | else {
250 | return "#5d6475";
251 | }
252 | };
253 | /**
254 | * Converts a named color into hexadecimal color
255 | * from a list of well known namd colors if found.
256 | * When not given returns a ""
257 | * When not found in the list, returns the same value given
258 | * @param colour the named color
259 | * @returns The hex representation of the color or "" or the same color
260 | */
261 | function colourNameToHex(colour) {
262 | /**
263 | * When not given
264 | */
265 | if (!colour) {
266 | return "";
267 | }
268 | /**
269 | * when named color is found
270 | */
271 | if (namedColours2[colour.toLocaleLowerCase()] !== undefined) {
272 | return namedColours2[colour.toLocaleLowerCase()];
273 | }
274 | /**
275 | * When the named color was not found
276 | */
277 | return colour;
278 | }
279 | /**
280 | * The full list of named Colors provided by
281 | * https://htmlcolorcodes.com/es/nombres-de-los-colores/
282 | */
283 | var namedColours2 = {
284 | //RED
285 | indianred: "#CD5C5C",
286 | lightcoral: "#F08080",
287 | salmon: "#FA8072",
288 | darksalmon: "#E9967A",
289 | lightsalmon: "#FFA07A",
290 | crimson: "#DC143C",
291 | red: "#FF0000",
292 | firebrick: "#B22222",
293 | darkred: "#8B0000",
294 | //PINK
295 | pink: "#FFC0CB",
296 | lightpink: "#FFB6C1",
297 | hotpink: "#FF69B4",
298 | deeppink: "#FF1493",
299 | mediumvioletred: "#C71585",
300 | palevioletred: "#DB7093",
301 | //ORANGE
302 | //"lightsalmon: "#FFA07A",
303 | coral: "#FF7F50",
304 | tomato: "#FF6347",
305 | orangered: "#FF4500",
306 | darkorange: "#FF8C00",
307 | orange: "#FFA500",
308 | //YELLOW
309 | gold: "#FFD700",
310 | yellow: "#FFFF00",
311 | lightyellow: "#FFFFE0",
312 | lemonchiffon: "#FFFACD",
313 | lightgoldenrodyellow: "#FAFAD2",
314 | papayawhip: "#FFEFD5",
315 | moccasin: "#FFE4B5",
316 | peachpuff: "#FFDAB9",
317 | palegoldenrod: "#EEE8AA",
318 | khaki: "#F0E68C",
319 | darkkhaki: "#BDB76B",
320 | //PURPLE
321 | lavender: "#E6E6FA",
322 | thistle: "#D8BFD8",
323 | plum: "#DDA0DD",
324 | violet: "#EE82EE",
325 | orchid: "#DA70D6",
326 | fuchsia: "#FF00FF",
327 | magenta: "#FF00FF",
328 | mediumorchid: "#BA55D3",
329 | mediumpurple: "#9370DB",
330 | rebeccapurple: "#663399",
331 | blueviolet: "#8A2BE2",
332 | darkviolet: "#9400D3",
333 | darkorchid: "#9932CC",
334 | darkmagenta: "#8B008B",
335 | purple: "#800080",
336 | indigo: "#4B0082",
337 | slateblue: "#6A5ACD",
338 | darkslateblue: "#483D8B",
339 | mediumslateblue: "#7B68EE",
340 | //GREEN
341 | greenyellow: "#ADFF2F",
342 | chartreuse: "#7FFF00",
343 | lawngreen: "#7CFC00",
344 | lime: "#00FF00",
345 | limegreen: "#32CD32",
346 | palegreen: "#98FB98",
347 | lightgreen: "#90EE90",
348 | mediumspringgreen: "#00FA9A",
349 | springgreen: "#00FF7F",
350 | mediumseagreen: "#3CB371",
351 | seagreen: "#2E8B57",
352 | forestgreen: "#228B22",
353 | green: "#008000",
354 | darkgreen: "#006400",
355 | yellowgreen: "#9ACD32",
356 | olivedrab: "#6B8E23",
357 | olive: "#808000",
358 | darkolivegreen: "#556B2F",
359 | mediumaquamarine: "#66CDAA",
360 | darkseagreen: "#8FBC8B",
361 | lightseagreen: "#20B2AA",
362 | darkcyan: "#008B8B",
363 | teal: "#008080",
364 | //BLUE
365 | aqua: "#00FFFF",
366 | cyan: "#00FFFF",
367 | lightcyan: "#E0FFFF",
368 | paleturquoise: "#AFEEEE",
369 | aquamarine: "#7FFFD4",
370 | turquoise: "#40E0D0",
371 | mediumturquoise: "#48D1CC",
372 | darkturquoise: "#00CED1",
373 | cadetblue: "#5F9EA0",
374 | steelblue: "#4682B4",
375 | lightsteelblue: "#B0C4DE",
376 | powderblue: "#B0E0E6",
377 | lightblue: "#ADD8E6",
378 | skyblue: "#87CEEB",
379 | lightskyblue: "#87CEFA",
380 | deepskyblue: "#00BFFF",
381 | dodgerblue: "#1E90FF",
382 | cornflowerblue: "#6495ED",
383 | //"mediumslateblue: "#7B68EE",
384 | royalblue: "#4169E1",
385 | blue: "#0000FF",
386 | mediumblue: "#0000CD",
387 | darkblue: "#00008B",
388 | navy: "#000080",
389 | midnightblue: "#191970",
390 | //BROWN
391 | cornsilk: "#FFF8DC",
392 | blanchedalmond: "#FFEBCD",
393 | bisque: "#FFE4C4",
394 | navajowhite: "#FFDEAD",
395 | wheat: "#F5DEB3",
396 | burlywood: "#DEB887",
397 | tan: "#D2B48C",
398 | rosybrown: "#BC8F8F",
399 | sandybrown: "#F4A460",
400 | goldenrod: "#DAA520",
401 | darkgoldenrod: "#B8860B",
402 | peru: "#CD853F",
403 | chocolate: "#D2691E",
404 | saddlebrown: "#8B4513",
405 | sienna: "#A0522D",
406 | brown: "#A52A2A",
407 | maroon: "#800000",
408 | //WHITE
409 | white: "#FFFFFF",
410 | snow: "#FFFAFA",
411 | honeydew: "#F0FFF0",
412 | mintcream: "#F5FFFA",
413 | azure: "#F0FFFF",
414 | aliceblue: "#F0F8FF",
415 | ghostwhite: "#F8F8FF",
416 | whitesmoke: "#F5F5F5",
417 | seashell: "#FFF5EE",
418 | beige: "#F5F5DC",
419 | oldlace: "#FDF5E6",
420 | floralwhite: "#FFFAF0",
421 | ivory: "#FFFFF0",
422 | antiquewhite: "#FAEBD7",
423 | linen: "#FAF0E6",
424 | lavenderblush: "#FFF0F5",
425 | mistyrose: "#FFE4E1",
426 | //GREY
427 | gainsboro: "#DCDCDC",
428 | lightgray: "#D3D3D3",
429 | silver: "#C0C0C0",
430 | darkgray: "#A9A9A9",
431 | gray: "#808080",
432 | dimgray: "#696969",
433 | lightslategray: "#778899",
434 | slategray: "#708090",
435 | darkslategray: "#2F4F4F",
436 | black: "#000000"
437 | };
438 |
439 | /**
440 | * In order to avoid overwriting the classnames
441 | * and to be able to have different styled buttons in the document
442 | * it is necesary to add a numeric identifier next to the className:
443 | * instead of: ".classname"
444 | * we get : ".classname-3", ".classname-4", ".classname-5" and so on
445 | * for this task a number is used as ID
446 | */
447 | var MaterialButtonStylizer = /** @class */ (function () {
448 | function MaterialButtonStylizer() {
449 | }
450 | /**
451 | * Increases the count and retrieves the next number
452 | * @returns the next static number in styles
453 | */
454 | MaterialButtonStylizer.getNext = function () {
455 | MaterialButtonStylizer.nextButtonClassNameNumber++;
456 | return MaterialButtonStylizer.nextButtonClassNameNumber;
457 | };
458 | MaterialButtonStylizer.nextButtonClassNameNumber = 0;
459 | return MaterialButtonStylizer;
460 | }());
461 | /**
462 | * Calls the getNext() method of MaterialButtonStylizer class
463 | * @returns the next static number in styles
464 | */
465 | var getNextClassName = function () {
466 | return MaterialButtonStylizer.getNext();
467 | };
468 | /**
469 | * Creates the ripple effect
470 | * @param event
471 | */
472 | function createRipple(event, variant, color) {
473 | var buttonAnchorDiv = event.currentTarget;
474 | var circle = document.createElement("span");
475 | var diameter = Math.max(buttonAnchorDiv.clientWidth, buttonAnchorDiv.clientHeight);
476 | var radius = diameter / 2;
477 | circle.style.width = circle.style.height = diameter + "px";
478 | circle.style.left = event.clientX - buttonAnchorDiv.offsetLeft - radius + "px";
479 | circle.style.top = event.clientY - buttonAnchorDiv.offsetTop - radius + "px";
480 | circle.classList.add("ripple");
481 | if (variant !== "contained") {
482 | circle.style.backgroundColor = hexColorToRGB(asureColor(colourNameToHex(color)), 0.4);
483 | }
484 | else {
485 | circle.style.backgroundColor = hexColorToRGB("#ffffff", 0.4);
486 | }
487 | var ripple = buttonAnchorDiv.getElementsByClassName("ripple")[0];
488 | if (ripple) {
489 | ripple.remove();
490 | }
491 | buttonAnchorDiv.appendChild(circle);
492 | }
493 | var makeDynamicStyle = function (variant, disabled, color, textColor, nextClassName) {
494 | var styleSheet = {
495 | id: "material-button-styles" + "-" + nextClassName,
496 | sheetRules: [{
497 | className: "material-button." + variant + "-" + nextClassName,
498 | rules: {},
499 | },
500 | {
501 | className: "material-button-root." + variant + "-" + nextClassName,
502 | rules: {},
503 | },],
504 | };
505 | var sheetRules = styleSheet.sheetRules;
506 | if (!disabled) {
507 | switch (variant) {
508 | case "contained":
509 | sheetRules[0].rules = {
510 | color: asureColor(colourNameToHex(textColor)),
511 | backgroundColor: asureColor(colourNameToHex(color)),
512 | };
513 | sheetRules[1].rules = {
514 | ":hover": {
515 | backgroundColor: darkerColor(hexColorToRGB(asureColor(colourNameToHex(color)), 1)),
516 | },
517 | };
518 | break;
519 | case "outlined":
520 | sheetRules[0].rules = {
521 | border: "1px solid " + hexColorToRGB(asureColor(colourNameToHex(color)), 0.5),
522 | color: asureColor(colourNameToHex(color)),
523 | backgroundColor: "transparent",
524 | };
525 | sheetRules[1].rules = {
526 | ":hover": {
527 | border: "1px solid " + hexColorToRGB(asureColor(colourNameToHex(color)), 1),
528 | backgroundColor: hexColorToRGB(asureColor(colourNameToHex(color)), 0.085),
529 | },
530 | };
531 | break;
532 | case "text":
533 | sheetRules[0].rules = {
534 | color: asureColor(colourNameToHex(color)),
535 | backgroundColor: "transparent",
536 | };
537 | sheetRules[1].rules = {
538 | ":hover": {
539 | backgroundColor: hexColorToRGB(asureColor(colourNameToHex(color)), 0.085),
540 | },
541 | };
542 | break;
543 | }
544 | }
545 | styleSheet.sheetRules = sheetRules;
546 | return styleSheet;
547 | };
548 |
549 | //export type ThemeColor = "primary" | "secondary";
550 | /**
551 | * default props for material button
552 | */
553 | var MaterialButtonDefaultProps = {
554 | children: undefined,
555 | style: {},
556 | onClick: function () { },
557 | variant: "contained",
558 | disabled: false,
559 | color: "#071e25",
560 | textColor: "#FFFFFF",
561 | text: "uppercase"
562 | };
563 |
564 | var DynamiCSS;
565 | (function (DynamiCSS) {
566 | function insertStyleSheet(dynamicSheet) {
567 | var result_id = "";
568 | if (typeof window === "undefined") {
569 | return "";
570 | }
571 | if (!dynamicSheet) {
572 | return "";
573 | }
574 | //if already exists
575 | if (document.getElementById(dynamicSheet.id)) {
576 | return dynamicSheet.id;
577 | }
578 | result_id = dynamicSheet.id;
579 | var styleSheet = document.createElement("style");
580 | styleSheet.id = result_id;
581 | styleSheet.setAttribute("type", "text/css");
582 | var contetRaw = toRawStyleSheet(dynamicSheet.sheetRules || []) + dynamicSheet.raw || "";
583 | styleSheet.textContent = contetRaw;
584 | var appendResult = document.head.appendChild(styleSheet);
585 | if (!appendResult) {
586 | return "";
587 | }
588 | return result_id;
589 | }
590 | DynamiCSS.insertStyleSheet = insertStyleSheet;
591 | function editStyleSheet(id, sheetRules) {
592 | var result_id = "";
593 | if (typeof window === "undefined") {
594 | return "";
595 | }
596 | if (!id || !sheetRules) {
597 | return "";
598 | }
599 | //if dont exists yet
600 | var styleSheet = document.getElementById(id);
601 | if (!styleSheet) {
602 | return "";
603 | }
604 | /* result_id = id;
605 | //var styleSheet: HTMLStyleElement = document.createElement("style");
606 | styleSheet.id = result_id;
607 | styleSheet.setAttribute("type", "text/css"); */
608 | styleSheet.textContent = toRawStyleSheet(sheetRules);
609 | return result_id;
610 | }
611 | DynamiCSS.editStyleSheet = editStyleSheet;
612 | function removeStyleSheet(id) {
613 | var result_id = "";
614 | if (!id) {
615 | return "";
616 | }
617 | var htmlObject = document.getElementById(id);
618 | if (htmlObject) {
619 | document.head.removeChild(htmlObject);
620 | result_id = id;
621 | }
622 | return result_id;
623 | }
624 | DynamiCSS.removeStyleSheet = removeStyleSheet;
625 | function existStyleSheet(id) {
626 | if (!id) {
627 | return false;
628 | }
629 | var htmlObject = document.getElementById(id);
630 | if (htmlObject) {
631 | return true;
632 | }
633 | return false;
634 | }
635 | DynamiCSS.existStyleSheet = existStyleSheet;
636 | function makeStyleSheet(styleSheet) {
637 | if (!styleSheet) {
638 | return null;
639 | }
640 | return styleSheet;
641 | }
642 | DynamiCSS.makeStyleSheet = makeStyleSheet;
643 | })(DynamiCSS || (DynamiCSS = {}));
644 | /**
645 | * Determines whether a character is upperCase or not
646 | * @param str a character
647 | * @returns true if str contains a string character
648 | */
649 | function isUpper(character) {
650 | if (!character)
651 | return false;
652 | return !/[a-z]/.test(character) && /[A-Z]/.test(character);
653 | }
654 | /**
655 | * Converts a rule with uppercase to a hyphen-lowercase version
656 | * @param rule the rule
657 | * @returns
658 | */
659 | function fromUpperCaseToHyphen(ruleLabel) {
660 | var result = "";
661 | var charUpper = ' ';
662 | var isupper = false;
663 | for (var i = 0; i < ruleLabel.length; i++) {
664 | var currentChar = ruleLabel[i];
665 | if (isUpper(currentChar)) {
666 | charUpper = currentChar;
667 | isupper = true;
668 | break;
669 | }
670 | }
671 | //add hyphen
672 | if (isupper) {
673 | var parts = ruleLabel.split(charUpper);
674 | result = parts[0] + "-" + charUpper.toLowerCase() + parts[1];
675 | }
676 | else {
677 | result = ruleLabel;
678 | }
679 | return result;
680 | }
681 | /**
682 | *
683 | * @param ruleLabel the rule
684 | * @returns true if the rule label corresponds to a pseudo class
685 | */
686 | function isPseudo(ruleLabel) {
687 | if (!ruleLabel)
688 | return false;
689 | return ruleLabel.includes(":");
690 | }
691 | function makeRawRuleLabel(className) {
692 | var result = "";
693 | var splitedClassName = className.trim().split(" ");
694 | //is composed classname?
695 | if (splitedClassName.length > 1) {
696 | for (var i = 0; i < splitedClassName.length; i++) {
697 | result += "." + splitedClassName[i];
698 | }
699 | result += "{\n";
700 | }
701 | else {
702 | result += "." + className + "{\n";
703 | }
704 | return result;
705 | }
706 | function toRawStyleSheet(sheetRules) {
707 | if (!sheetRules) {
708 | return "";
709 | }
710 | var rawStyleSheet = "";
711 | var nestedPseudos = [];
712 | for (var j = 0; j < sheetRules.length; j++) {
713 | var currentRule = sheetRules[j];
714 | var currnetRawRule = "";
715 | // currnetRawRule += `.${currentRule.className}{\n`;
716 | currnetRawRule += makeRawRuleLabel(currentRule.className);
717 | //list of labels for rules
718 | var ruleskeys = Object.keys(currentRule.rules);
719 | for (var i = 0; i < ruleskeys.length; i++) {
720 | var currentKey = ruleskeys[i];
721 | var styleLabel = fromUpperCaseToHyphen(currentKey);
722 | //if a pseudo class found, separate it
723 | if (isPseudo(styleLabel)) {
724 | var pseudoClassName = currentRule.className + styleLabel;
725 | nestedPseudos.push({ className: pseudoClassName, rules: currentRule.rules[styleLabel] });
726 | }
727 | else {
728 | var styleRule = currentRule.rules[currentKey];
729 | currnetRawRule += "\t" + styleLabel + " : " + styleRule + ";\n";
730 | }
731 | }
732 | currnetRawRule += "}\n";
733 | rawStyleSheet += currnetRawRule;
734 | }
735 | //nested pseudos
736 | for (var p = 0; p < nestedPseudos.length; p++) {
737 | var currnetRawRule = "";
738 | var currentRule = nestedPseudos[p];
739 | var ruleskeys = Object.keys(currentRule.rules);
740 | currnetRawRule += "." + currentRule.className + "{\n";
741 | for (var i = 0; i < ruleskeys.length; i++) {
742 | var currentKey = ruleskeys[i];
743 | var styleLabel = fromUpperCaseToHyphen(currentKey);
744 | var styleRule = currentRule.rules[currentKey];
745 | currnetRawRule += "\t" + styleLabel + " : " + styleRule + ";\n";
746 | }
747 | currnetRawRule += "}\n";
748 | rawStyleSheet += currnetRawRule;
749 | }
750 | return rawStyleSheet;
751 | }
752 |
753 | var MaterialButton = function (props) {
754 | var _a = mergeProps(props, MaterialButtonDefaultProps), children = _a.children, onClick = _a.onClick, disabled = _a.disabled, style = _a.style, href = _a.href, variant = _a.variant, color = _a.color, textColor = _a.textColor, className = _a.className, text = _a.text;
755 | //states
756 | var _b = useState(""), idStyles = _b[0], setIdStyles = _b[1];
757 | var _c = useState(false), styleInjected = _c[0], setStyleInjected = _c[1];
758 | var _d = useState(0), nextClassName = _d[0], setNextClassName = _d[1];
759 | var _e = useState(""), classNameCreated = _e[0], setClassNameCreated = _e[1];
760 | //effects
761 | useEffect(function () {
762 | return function () { return removeStyle(); };
763 | }, [idStyles]);
764 | /**
765 | * Inserts the style for material button specific style
766 | * @param variant
767 | * @param disabled
768 | * @param color
769 | * @param textColor
770 | * @param text
771 | */
772 | var handleInserStyle = function (variant, disabled, color, textColor, text) { return __awaiter(void 0, void 0, void 0, function () {
773 | var class_name, styleSheet, idStyle, nextClassNameVar;
774 | return __generator(this, function (_a) {
775 | class_name = className || "";
776 | idStyle = "";
777 | if (nextClassName == 0 && !styleInjected) {
778 | //new
779 | nextClassNameVar = getNextClassName();
780 | styleSheet = makeDynamicStyle(variant, disabled, color, textColor, nextClassNameVar);
781 | setNextClassName(nextClassNameVar);
782 | idStyle = DynamiCSS.insertStyleSheet(styleSheet);
783 | makeClassName(variant, class_name, nextClassNameVar);
784 | setIdStyles(idStyle);
785 | if (idStyle !== "") {
786 | setStyleInjected(true);
787 | }
788 | }
789 | else {
790 | //already a stylesheet associated
791 | styleSheet = makeDynamicStyle(variant, disabled, color, textColor, nextClassName);
792 | DynamiCSS.editStyleSheet(idStyles, styleSheet.sheetRules || []);
793 | makeClassName(variant, class_name, nextClassName);
794 | }
795 | return [2 /*return*/];
796 | });
797 | }); };
798 | /**
799 | *
800 | * @param variant
801 | * @param class_name
802 | */
803 | var makeClassName = function (variant, class_name, nextClassNameVar) {
804 | var classname = "material-button-root material-button ";
805 | if (!disabled) {
806 | classname += variant + " " + variant + "-" + nextClassNameVar;
807 | }
808 | else {
809 | classname += "disabled";
810 | }
811 | //classname to override styles in stylesheet
812 | if (class_name) {
813 | classname += " " + classname + " " + class_name;
814 | }
815 | //some text in className
816 | if (text) {
817 | classname += " " + text;
818 | }
819 | setClassNameCreated(classname);
820 | };
821 | var removeStyle = function () {
822 | if (styleInjected) {
823 | DynamiCSS.removeStyleSheet(idStyles);
824 | setStyleInjected(false);
825 | setIdStyles("");
826 | }
827 | };
828 | useEffect(function () {
829 | handleInserStyle(variant, disabled, color, textColor);
830 | }, [variant, disabled, color, textColor, text]);
831 | //references
832 | var btn_ref = useRef(null);
833 | var span_ref = useRef(null);
834 | /**
835 | *
836 | * @param e
837 | */
838 | function handleClick(e) {
839 | createRipple(e, variant, color);
840 | if (onClick)
841 | onClick();
842 | }
843 | return (React.createElement(React.Fragment, null, styleInjected &&
844 | React.createElement(href ? "a" : "button", {
845 | className: classNameCreated,
846 | "data-testid": href ? "material-anchor" : "material-button",
847 | onClick: handleClick,
848 | ref: btn_ref,
849 | href: href,
850 | style: style,
851 | children: href ? (React.createElement("span", { ref: span_ref, className: "label" }, children)) : (React.createElement("span", { className: "label" }, children)),
852 | disabled: disabled,
853 | })));
854 | };
855 |
856 | export { MaterialButton };
857 | //# sourceMappingURL=index.es.js.map
858 |
--------------------------------------------------------------------------------
/build/index.es.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"index.es.js","sources":["../node_modules/tslib/tslib.es6.js","../node_modules/@unlimited-react-components/kernel/build/index.es.js","../src/utils/MaterialButtonMakeStyles.ts","../src/MaterialButton/MaterialButtonProps.ts","../node_modules/@dynamicss/dynamicss/build/index.es.js","../src/MaterialButton/MaterialButton.tsx"],"sourcesContent":["/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n if (typeof b !== \"function\" && b !== null)\r\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });\r\n}) : (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n if (ar || !(i in from)) {\r\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n ar[i] = from[i];\r\n }\r\n }\r\n return to.concat(ar || from);\r\n}\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n o[\"default\"] = v;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\r\n __setModuleDefault(result, mod);\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n","function ___$insertStyle(css) {\n if (!css) {\n return;\n }\n\n if (typeof window === 'undefined') {\n return;\n }\n\n const style = document.createElement('style');\n style.setAttribute('type', 'text/css');\n style.innerHTML = css;\n document.head.appendChild(style);\n return css;\n}\n\n/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n\r\nvar __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n };\r\n return __assign.apply(this, arguments);\r\n};\n\n/**\r\n * hexArray & decArray\r\n *\r\n * arrays of numbers used to convert hexadecimal numbers into decimal and viceversa\r\n */\r\nvar hexArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];\r\nvar decArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];\r\n/**\r\n * Converts hex number in string representation to decimal number\r\n *\r\n *\r\n * @param letter the string hex number\r\n * @returns a decimal number\r\n */\r\nvar hexTodec = function (letter) {\r\n if (hexArray.includes(letter)) {\r\n return decArray[hexArray.indexOf(letter)];\r\n }\r\n else {\r\n return 0;\r\n }\r\n};\r\n/**\r\n * Validates wheteher the color is hexadecimal css color\r\n * Example: #FF56AC\r\n *\r\n *\r\n * @param colorInput the color inpt to test\r\n * @returns true if the inputColor is a hexadecimal css color\r\n */\r\nvar isHexColor = function (colorInput) {\r\n // if first element is no '#' return default background color\r\n if (colorInput.charAt(0) !== '#') {\r\n return false;\r\n }\r\n // if color lenght is not exactly 7 return default\r\n if (colorInput.length !== 7) {\r\n return false;\r\n }\r\n // if one of the letters is not included in hex array return default\r\n for (var i = 1; i < colorInput.length; i++) {\r\n if (!hexArray.includes(colorInput.charAt(i))) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n};\r\n/**\r\n * In order to managae rgba() we convert hex colors into rgba()\r\n * If the given color is already a rgb() color, it can add the percentage to convert it into rgba()\r\n *\r\n *\r\n * @param colorInput color in hex or in rgb\r\n * @param perc percentage for RGBA() color\r\n * @returns the rgba representation of a hex color\r\n */\r\nvar hexColorToRGB = function (colorInput, perc, defaultColor) {\r\n if (perc === void 0) { perc = 0; }\r\n var resultDefault = defaultColor ? defaultColor : \"rgba(255, 255, 255, 0.6)\";\r\n if (!colorInput) {\r\n return resultDefault;\r\n }\r\n //work only in uppercase\r\n var color = colorInput.toUpperCase();\r\n // is already a rgba color\r\n if (color.includes(\"RGBA\")) {\r\n return color;\r\n }\r\n //return rbg => rgba\r\n if (color.includes(\"RGB\")) {\r\n return color.replace('RGB', \"rgba\").replace(')', \", \" + perc + \")\");\r\n }\r\n // if is a hex color or named color\r\n if (!isHexColor(colourNameToHex(color))) {\r\n return resultDefault;\r\n }\r\n var resultOk = \"\";\r\n //let strVar: string = \"\";\r\n var component1 = 0;\r\n var component2 = 0;\r\n var component3 = 0;\r\n //If passed all validations, proceed to transform\r\n component1 = hexTodec(color.charAt(1)) * 16 + hexTodec(color.charAt(2));\r\n component2 = hexTodec(color.charAt(3)) * 16 + hexTodec(color.charAt(4));\r\n component3 = hexTodec(color.charAt(5)) * 16 + hexTodec(color.charAt(6));\r\n resultOk = \"rgba(\" + component1 + \", \" + component2 + \",\" + component3 + \" , \" + perc + \")\";\r\n return resultOk;\r\n};\r\n/**\r\n * Make the color into a darker color\r\n * @param colorInput\r\n * @returns the darked color in\r\n */\r\nvar darkerColor = function (colorInput, percentage) {\r\n if (percentage === void 0) { percentage = 25; }\r\n var darkedColor = \"\";\r\n var reduce = (100 - percentage) / 100;\r\n var component1 = 0;\r\n var component2 = 0;\r\n var component3 = 0;\r\n if (isHexColor(colourNameToHex(colorInput))) {\r\n component1 = hexTodec(colorInput.charAt(1)) * 16 + hexTodec(colorInput.charAt(2));\r\n component2 = hexTodec(colorInput.charAt(3)) * 16 + hexTodec(colorInput.charAt(4));\r\n component3 = hexTodec(colorInput.charAt(5)) * 16 + hexTodec(colorInput.charAt(6));\r\n darkedColor = \"rgb(\" + component1 * reduce + \", \" + component2 * reduce + \",\" + component3 * reduce + \")\";\r\n }\r\n else {\r\n if (colorInput.includes(\"rgba\")) {\r\n var slicer = colorInput.replace(\"rgba(\", \"\");\r\n var components = slicer.split(\",\");\r\n darkedColor = \"rgb(\" + parseInt(components[0], 10) * reduce + \", \" + parseInt(components[1], 10) * reduce + \",\" + parseInt(components[2], 10) * reduce + \")\";\r\n //return darkedColor;\r\n }\r\n else if (colorInput.includes(\"rgb\")) {\r\n var slicer = colorInput.replace(\"rgb(\", \"\");\r\n var components = slicer.split(\",\");\r\n darkedColor = \"rgb(\" + parseInt(components[0], 10) * reduce + \", \" + parseInt(components[1], 10) * reduce + \",\" + parseInt(components[2], 10) * reduce + \")\";\r\n // return darkedColor;\r\n }\r\n }\r\n return darkedColor;\r\n};\r\n/**\r\n * Merge props that com form user and those ones that are default\r\n * if incommingStyle is null this returns teh default value\r\n *\r\n * @param incommingProps prop that comes from props attributoo of a React Node\r\n * @param defaultProps default prop defined for that React Node\r\n * @returns merged props\r\n */\r\nfunction mergeProps(incommingProps, defaultProps) {\r\n if (!incommingProps) {\r\n return defaultProps;\r\n }\r\n else {\r\n return __assign(__assign({}, defaultProps), incommingProps);\r\n }\r\n}\r\n/**\r\n * Asure a base colour when not given or when given an incorrect color format\r\n * default color is this kind of grey #5d6475\r\n *\r\n * @param color param color given by user\r\n * @returns returns the same color\r\n */\r\nvar asureColor = function (color) {\r\n if (color !== undefined && color !== \"\") {\r\n return color;\r\n }\r\n else {\r\n return \"#5d6475\";\r\n }\r\n};\r\n/**\r\n * Converts a named color into hexadecimal color\r\n * from a list of well known namd colors if found.\r\n * When not given returns a \"\"\r\n * When not found in the list, returns the same value given\r\n * @param colour the named color\r\n * @returns The hex representation of the color or \"\" or the same color\r\n */\r\nfunction colourNameToHex(colour) {\r\n /**\r\n * When not given\r\n */\r\n if (!colour) {\r\n return \"\";\r\n }\r\n /**\r\n * when named color is found\r\n */\r\n if (namedColours2[colour.toLocaleLowerCase()] !== undefined) {\r\n return namedColours2[colour.toLocaleLowerCase()];\r\n }\r\n /**\r\n * When the named color was not found\r\n */\r\n return colour;\r\n}\r\n/**\r\n * The full list of named Colors provided by\r\n * https://htmlcolorcodes.com/es/nombres-de-los-colores/\r\n */\r\nvar namedColours2 = {\r\n //RED\r\n indianred: \"#CD5C5C\",\r\n lightcoral: \"#F08080\",\r\n salmon: \"#FA8072\",\r\n darksalmon: \"#E9967A\",\r\n lightsalmon: \"#FFA07A\",\r\n crimson: \"#DC143C\",\r\n red: \"#FF0000\",\r\n firebrick: \"#B22222\",\r\n darkred: \"#8B0000\",\r\n //PINK\r\n pink: \"#FFC0CB\",\r\n lightpink: \"#FFB6C1\",\r\n hotpink: \"#FF69B4\",\r\n deeppink: \"#FF1493\",\r\n mediumvioletred: \"#C71585\",\r\n palevioletred: \"#DB7093\",\r\n //ORANGE\r\n //\"lightsalmon: \"#FFA07A\",\r\n coral: \"#FF7F50\",\r\n tomato: \"#FF6347\",\r\n orangered: \"#FF4500\",\r\n darkorange: \"#FF8C00\",\r\n orange: \"#FFA500\",\r\n //YELLOW\r\n gold: \"#FFD700\",\r\n yellow: \"#FFFF00\",\r\n lightyellow: \"#FFFFE0\",\r\n lemonchiffon: \"#FFFACD\",\r\n lightgoldenrodyellow: \"#FAFAD2\",\r\n papayawhip: \"#FFEFD5\",\r\n moccasin: \"#FFE4B5\",\r\n peachpuff: \"#FFDAB9\",\r\n palegoldenrod: \"#EEE8AA\",\r\n khaki: \"#F0E68C\",\r\n darkkhaki: \"#BDB76B\",\r\n //PURPLE\r\n lavender: \"#E6E6FA\",\r\n thistle: \"#D8BFD8\",\r\n plum: \"#DDA0DD\",\r\n violet: \"#EE82EE\",\r\n orchid: \"#DA70D6\",\r\n fuchsia: \"#FF00FF\",\r\n magenta: \"#FF00FF\",\r\n mediumorchid: \"#BA55D3\",\r\n mediumpurple: \"#9370DB\",\r\n rebeccapurple: \"#663399\",\r\n blueviolet: \"#8A2BE2\",\r\n darkviolet: \"#9400D3\",\r\n darkorchid: \"#9932CC\",\r\n darkmagenta: \"#8B008B\",\r\n purple: \"#800080\",\r\n indigo: \"#4B0082\",\r\n slateblue: \"#6A5ACD\",\r\n darkslateblue: \"#483D8B\",\r\n mediumslateblue: \"#7B68EE\",\r\n //GREEN\r\n greenyellow: \"#ADFF2F\",\r\n chartreuse: \"#7FFF00\",\r\n lawngreen: \"#7CFC00\",\r\n lime: \"#00FF00\",\r\n limegreen: \"#32CD32\",\r\n palegreen: \"#98FB98\",\r\n lightgreen: \"#90EE90\",\r\n mediumspringgreen: \"#00FA9A\",\r\n springgreen: \"#00FF7F\",\r\n mediumseagreen: \"#3CB371\",\r\n seagreen: \"#2E8B57\",\r\n forestgreen: \"#228B22\",\r\n green: \"#008000\",\r\n darkgreen: \"#006400\",\r\n yellowgreen: \"#9ACD32\",\r\n olivedrab: \"#6B8E23\",\r\n olive: \"#808000\",\r\n darkolivegreen: \"#556B2F\",\r\n mediumaquamarine: \"#66CDAA\",\r\n darkseagreen: \"#8FBC8B\",\r\n lightseagreen: \"#20B2AA\",\r\n darkcyan: \"#008B8B\",\r\n teal: \"#008080\",\r\n //BLUE\r\n aqua: \"#00FFFF\",\r\n cyan: \"#00FFFF\",\r\n lightcyan: \"#E0FFFF\",\r\n paleturquoise: \"#AFEEEE\",\r\n aquamarine: \"#7FFFD4\",\r\n turquoise: \"#40E0D0\",\r\n mediumturquoise: \"#48D1CC\",\r\n darkturquoise: \"#00CED1\",\r\n cadetblue: \"#5F9EA0\",\r\n steelblue: \"#4682B4\",\r\n lightsteelblue: \"#B0C4DE\",\r\n powderblue: \"#B0E0E6\",\r\n lightblue: \"#ADD8E6\",\r\n skyblue: \"#87CEEB\",\r\n lightskyblue: \"#87CEFA\",\r\n deepskyblue: \"#00BFFF\",\r\n dodgerblue: \"#1E90FF\",\r\n cornflowerblue: \"#6495ED\",\r\n //\"mediumslateblue: \"#7B68EE\",\r\n royalblue: \"#4169E1\",\r\n blue: \"#0000FF\",\r\n mediumblue: \"#0000CD\",\r\n darkblue: \"#00008B\",\r\n navy: \"#000080\",\r\n midnightblue: \"#191970\",\r\n //BROWN\r\n cornsilk: \"#FFF8DC\",\r\n blanchedalmond: \"#FFEBCD\",\r\n bisque: \"#FFE4C4\",\r\n navajowhite: \"#FFDEAD\",\r\n wheat: \"#F5DEB3\",\r\n burlywood: \"#DEB887\",\r\n tan: \"#D2B48C\",\r\n rosybrown: \"#BC8F8F\",\r\n sandybrown: \"#F4A460\",\r\n goldenrod: \"#DAA520\",\r\n darkgoldenrod: \"#B8860B\",\r\n peru: \"#CD853F\",\r\n chocolate: \"#D2691E\",\r\n saddlebrown: \"#8B4513\",\r\n sienna: \"#A0522D\",\r\n brown: \"#A52A2A\",\r\n maroon: \"#800000\",\r\n //WHITE\r\n white: \"#FFFFFF\",\r\n snow: \"#FFFAFA\",\r\n honeydew: \"#F0FFF0\",\r\n mintcream: \"#F5FFFA\",\r\n azure: \"#F0FFFF\",\r\n aliceblue: \"#F0F8FF\",\r\n ghostwhite: \"#F8F8FF\",\r\n whitesmoke: \"#F5F5F5\",\r\n seashell: \"#FFF5EE\",\r\n beige: \"#F5F5DC\",\r\n oldlace: \"#FDF5E6\",\r\n floralwhite: \"#FFFAF0\",\r\n ivory: \"#FFFFF0\",\r\n antiquewhite: \"#FAEBD7\",\r\n linen: \"#FAF0E6\",\r\n lavenderblush: \"#FFF0F5\",\r\n mistyrose: \"#FFE4E1\",\r\n //GREY\r\n gainsboro: \"#DCDCDC\",\r\n lightgray: \"#D3D3D3\",\r\n silver: \"#C0C0C0\",\r\n darkgray: \"#A9A9A9\",\r\n gray: \"#808080\",\r\n dimgray: \"#696969\",\r\n lightslategray: \"#778899\",\r\n slategray: \"#708090\",\r\n darkslategray: \"#2F4F4F\",\r\n black: \"#000000\"\r\n};\n\nexport { asureColor, colourNameToHex, darkerColor, hexColorToRGB, mergeProps };\n//# sourceMappingURL=index.es.js.map\n","import { DynamicSheet, DynamicSheetRule } from \"@dynamicss/dynamicss\";\r\nimport { hexColorToRGB, asureColor, colourNameToHex, darkerColor } from \"@unlimited-react-components/kernel\";\r\nimport { MaterialButtonProps } from \"../MaterialButton/MaterialButtonProps\";\r\n/**\r\n * In order to avoid overwriting the classnames\r\n * and to be able to have different styled buttons in the document\r\n * it is necesary to add a numeric identifier next to the className: \r\n * instead of: \".classname\" \r\n * we get : \".classname-3\", \".classname-4\", \".classname-5\" and so on\r\n * for this task a number is used as ID\r\n */\r\nabstract class MaterialButtonStylizer {\r\n static nextButtonClassNameNumber = 0;\r\n /**\r\n * Increases the count and retrieves the next number\r\n * @returns the next static number in styles\r\n */\r\n static getNext(): number {\r\n MaterialButtonStylizer.nextButtonClassNameNumber++;\r\n return MaterialButtonStylizer.nextButtonClassNameNumber;\r\n }\r\n}\r\n/**\r\n * Calls the getNext() method of MaterialButtonStylizer class\r\n * @returns the next static number in styles\r\n */\r\nexport const getNextClassName = (): number => {\r\n return MaterialButtonStylizer.getNext();\r\n}\r\n\r\n/**\r\n * Creates the ripple effect\r\n * @param event\r\n */\r\nexport function createRipple<\r\n T extends HTMLButtonElement | HTMLAnchorElement | HTMLDivElement\r\n>(event: React.MouseEvent, variant: string, color: string) {\r\n const buttonAnchorDiv = event.currentTarget;\r\n\r\n const circle: HTMLSpanElement = document.createElement(\"span\");\r\n const diameter = Math.max(\r\n buttonAnchorDiv.clientWidth,\r\n buttonAnchorDiv.clientHeight\r\n );\r\n const radius = diameter / 2;\r\n\r\n circle.style.width = circle.style.height = `${diameter}px`;\r\n circle.style.left = `${event.clientX - buttonAnchorDiv.offsetLeft - radius\r\n }px`;\r\n circle.style.top = `${event.clientY - buttonAnchorDiv.offsetTop - radius\r\n }px`;\r\n circle.classList.add(\"ripple\");\r\n\r\n if (variant !== \"contained\") {\r\n\r\n circle.style.backgroundColor = hexColorToRGB(\r\n asureColor(colourNameToHex(color)),\r\n 0.4\r\n );\r\n\r\n } else {\r\n\r\n circle.style.backgroundColor = hexColorToRGB(\"#ffffff\", 0.4);\r\n }\r\n const ripple = buttonAnchorDiv.getElementsByClassName(\"ripple\")[0];\r\n if (ripple) {\r\n ripple.remove();\r\n }\r\n buttonAnchorDiv.appendChild(circle);\r\n}\r\n\r\nexport const makeDynamicStyle = (\r\n variant: MaterialButtonProps[\"variant\"],\r\n disabled: MaterialButtonProps[\"disabled\"],\r\n color: MaterialButtonProps[\"color\"],\r\n textColor: MaterialButtonProps[\"textColor\"],\r\n nextClassName: number\r\n): DynamicSheet => {\r\n let styleSheet: DynamicSheet = {\r\n id: \"material-button-styles\" + \"-\" + nextClassName,\r\n sheetRules: [{\r\n className: `material-button.${variant}-${nextClassName}`,\r\n rules: {},\r\n },\r\n {\r\n className: `material-button-root.${variant}-${nextClassName}`,\r\n rules: {},\r\n },],\r\n };\r\n let sheetRules: DynamicSheetRule[] = styleSheet.sheetRules as DynamicSheetRule[];\r\n\r\n if (!disabled) {\r\n\r\n switch (variant) {\r\n case \"contained\":\r\n sheetRules[0].rules = {\r\n color: asureColor(colourNameToHex(textColor)),\r\n backgroundColor: asureColor(colourNameToHex(color)),\r\n };\r\n sheetRules[1].rules = {\r\n \":hover\": {\r\n backgroundColor: darkerColor(\r\n hexColorToRGB(asureColor(colourNameToHex(color)), 1)\r\n ),\r\n },\r\n };\r\n break;\r\n case \"outlined\":\r\n sheetRules[0].rules = {\r\n border: `1px solid ${hexColorToRGB(\r\n asureColor(colourNameToHex(color)),\r\n 0.5\r\n )}`,\r\n color: asureColor(colourNameToHex(color)),\r\n backgroundColor: \"transparent\",\r\n };\r\n sheetRules[1].rules = {\r\n \":hover\": {\r\n border: `1px solid ${hexColorToRGB(\r\n asureColor(colourNameToHex(color)),\r\n 1\r\n )}`,\r\n backgroundColor: hexColorToRGB(\r\n asureColor(colourNameToHex(color)),\r\n 0.085\r\n ),\r\n },\r\n };\r\n break;\r\n case \"text\":\r\n sheetRules[0].rules = {\r\n color: asureColor(colourNameToHex(color)),\r\n backgroundColor: \"transparent\",\r\n };\r\n sheetRules[1].rules = {\r\n \":hover\": {\r\n backgroundColor: hexColorToRGB(\r\n asureColor(colourNameToHex(color)),\r\n 0.085\r\n ),\r\n },\r\n };\r\n break;\r\n }\r\n }\r\n styleSheet.sheetRules = sheetRules;\r\n return styleSheet;\r\n}","import { OverridableProps } from \"@unlimited-react-components/kernel\";\r\n\r\nexport interface MaterialButtonProps extends OverridableProps {\r\n /**\r\n * Function that specifies\r\n * what to do on click\r\n */\r\n onClick?: Function;\r\n /**\r\n * variants of button:\r\n * contained: with background color\r\n * outlined: border and transparent backgorund, on hover background color takes the color\r\n * text: no borders and no background color, on hover \r\n */\r\n variant?: \"text\" | \"outlined\" | \"contained\";\r\n /**\r\n * whether the button will be disabled or not\r\n */\r\n disabled?: boolean;\r\n /**\r\n * whether this button redirect to somewhere\r\n */\r\n href?: string;\r\n /**\r\n * the text transfor for the button label\r\n */\r\n text?: \"uppercase\" | \"capitalize\" | \"lowercase\" | \"none\";\r\n /**\r\n * the main theme color\r\n */\r\n color?: string;// | ThemeColor;\r\n}\r\n\r\n//export type ThemeColor = \"primary\" | \"secondary\";\r\n/**\r\n * default props for material button\r\n */\r\nexport const MaterialButtonDefaultProps: MaterialButtonProps = {\r\n children: undefined,\r\n style: {},\r\n onClick: () => { },\r\n variant: \"contained\",\r\n disabled: false,\r\n color: \"#071e25\",\r\n textColor: \"#FFFFFF\",\r\n text: \"uppercase\"\r\n}","function ___$insertStyle(css) {\n if (!css) {\n return;\n }\n\n if (typeof window === 'undefined') {\n return;\n }\n\n const style = document.createElement('style');\n style.setAttribute('type', 'text/css');\n style.innerHTML = css;\n document.head.appendChild(style);\n return css;\n}\n\nvar DynamiCSS;\r\n(function (DynamiCSS) {\r\n function insertStyleSheet(dynamicSheet) {\r\n var result_id = \"\";\r\n if (typeof window === \"undefined\") {\r\n return \"\";\r\n }\r\n if (!dynamicSheet) {\r\n return \"\";\r\n }\r\n //if already exists\r\n if (document.getElementById(dynamicSheet.id)) {\r\n return dynamicSheet.id;\r\n }\r\n result_id = dynamicSheet.id;\r\n var styleSheet = document.createElement(\"style\");\r\n styleSheet.id = result_id;\r\n styleSheet.setAttribute(\"type\", \"text/css\");\r\n var contetRaw = toRawStyleSheet(dynamicSheet.sheetRules || []) + dynamicSheet.raw || \"\";\r\n styleSheet.textContent = contetRaw;\r\n var appendResult = document.head.appendChild(styleSheet);\r\n if (!appendResult) {\r\n return \"\";\r\n }\r\n return result_id;\r\n }\r\n DynamiCSS.insertStyleSheet = insertStyleSheet;\r\n function editStyleSheet(id, sheetRules) {\r\n var result_id = \"\";\r\n if (typeof window === \"undefined\") {\r\n return \"\";\r\n }\r\n if (!id || !sheetRules) {\r\n return \"\";\r\n }\r\n //if dont exists yet\r\n var styleSheet = document.getElementById(id);\r\n if (!styleSheet) {\r\n return \"\";\r\n }\r\n /* result_id = id;\r\n //var styleSheet: HTMLStyleElement = document.createElement(\"style\");\r\n styleSheet.id = result_id;\r\n styleSheet.setAttribute(\"type\", \"text/css\"); */\r\n styleSheet.textContent = toRawStyleSheet(sheetRules);\r\n return result_id;\r\n }\r\n DynamiCSS.editStyleSheet = editStyleSheet;\r\n function removeStyleSheet(id) {\r\n var result_id = \"\";\r\n if (!id) {\r\n return \"\";\r\n }\r\n var htmlObject = document.getElementById(id);\r\n if (htmlObject) {\r\n document.head.removeChild(htmlObject);\r\n result_id = id;\r\n }\r\n return result_id;\r\n }\r\n DynamiCSS.removeStyleSheet = removeStyleSheet;\r\n function existStyleSheet(id) {\r\n if (!id) {\r\n return false;\r\n }\r\n var htmlObject = document.getElementById(id);\r\n if (htmlObject) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n DynamiCSS.existStyleSheet = existStyleSheet;\r\n function makeStyleSheet(styleSheet) {\r\n if (!styleSheet) {\r\n return null;\r\n }\r\n return styleSheet;\r\n }\r\n DynamiCSS.makeStyleSheet = makeStyleSheet;\r\n})(DynamiCSS || (DynamiCSS = {}));\r\n/**\r\n * Determines whether a character is upperCase or not\r\n * @param str a character\r\n * @returns true if str contains a string character\r\n */\r\nfunction isUpper(character) {\r\n if (!character)\r\n return false;\r\n return !/[a-z]/.test(character) && /[A-Z]/.test(character);\r\n}\r\n/**\r\n * Converts a rule with uppercase to a hyphen-lowercase version\r\n * @param rule the rule\r\n * @returns\r\n */\r\nfunction fromUpperCaseToHyphen(ruleLabel) {\r\n var result = \"\";\r\n var charUpper = ' ';\r\n var isupper = false;\r\n for (var i = 0; i < ruleLabel.length; i++) {\r\n var currentChar = ruleLabel[i];\r\n if (isUpper(currentChar)) {\r\n charUpper = currentChar;\r\n isupper = true;\r\n break;\r\n }\r\n }\r\n //add hyphen\r\n if (isupper) {\r\n var parts = ruleLabel.split(charUpper);\r\n result = parts[0] + \"-\" + charUpper.toLowerCase() + parts[1];\r\n }\r\n else {\r\n result = ruleLabel;\r\n }\r\n return result;\r\n}\r\n/**\r\n *\r\n * @param ruleLabel the rule\r\n * @returns true if the rule label corresponds to a pseudo class\r\n */\r\nfunction isPseudo(ruleLabel) {\r\n if (!ruleLabel)\r\n return false;\r\n return ruleLabel.includes(\":\");\r\n}\r\nfunction makeRawRuleLabel(className) {\r\n var result = \"\";\r\n var splitedClassName = className.trim().split(\" \");\r\n //is composed classname?\r\n if (splitedClassName.length > 1) {\r\n for (var i = 0; i < splitedClassName.length; i++) {\r\n result += \".\" + splitedClassName[i];\r\n }\r\n result += \"{\\n\";\r\n }\r\n else {\r\n result += \".\" + className + \"{\\n\";\r\n }\r\n return result;\r\n}\r\nfunction toRawStyleSheet(sheetRules) {\r\n if (!sheetRules) {\r\n return \"\";\r\n }\r\n var rawStyleSheet = \"\";\r\n var nestedPseudos = [];\r\n for (var j = 0; j < sheetRules.length; j++) {\r\n var currentRule = sheetRules[j];\r\n var currnetRawRule = \"\";\r\n // currnetRawRule += `.${currentRule.className}{\\n`;\r\n currnetRawRule += makeRawRuleLabel(currentRule.className);\r\n //list of labels for rules\r\n var ruleskeys = Object.keys(currentRule.rules);\r\n for (var i = 0; i < ruleskeys.length; i++) {\r\n var currentKey = ruleskeys[i];\r\n var styleLabel = fromUpperCaseToHyphen(currentKey);\r\n //if a pseudo class found, separate it\r\n if (isPseudo(styleLabel)) {\r\n var pseudoClassName = currentRule.className + styleLabel;\r\n nestedPseudos.push({ className: pseudoClassName, rules: currentRule.rules[styleLabel] });\r\n }\r\n else {\r\n var styleRule = currentRule.rules[currentKey];\r\n currnetRawRule += \"\\t\" + styleLabel + \" : \" + styleRule + \";\\n\";\r\n }\r\n }\r\n currnetRawRule += \"}\\n\";\r\n rawStyleSheet += currnetRawRule;\r\n }\r\n //nested pseudos\r\n for (var p = 0; p < nestedPseudos.length; p++) {\r\n var currnetRawRule = \"\";\r\n var currentRule = nestedPseudos[p];\r\n var ruleskeys = Object.keys(currentRule.rules);\r\n currnetRawRule += \".\" + currentRule.className + \"{\\n\";\r\n for (var i = 0; i < ruleskeys.length; i++) {\r\n var currentKey = ruleskeys[i];\r\n var styleLabel = fromUpperCaseToHyphen(currentKey);\r\n var styleRule = currentRule.rules[currentKey];\r\n currnetRawRule += \"\\t\" + styleLabel + \" : \" + styleRule + \";\\n\";\r\n }\r\n currnetRawRule += \"}\\n\";\r\n rawStyleSheet += currnetRawRule;\r\n }\r\n return rawStyleSheet;\r\n}\n\nexport { DynamiCSS };\n//# sourceMappingURL=index.es.js.map\n","import React, { useRef, useState, useEffect } from \"react\";\r\nimport \"./MaterialButton.scss\";\r\nimport {\r\n createRipple,\r\n getNextClassName,\r\n makeDynamicStyle,\r\n} from \"../utils/MaterialButtonMakeStyles\";\r\nimport {\r\n MaterialButtonDefaultProps,\r\n MaterialButtonProps,\r\n} from \"./MaterialButtonProps\";\r\nimport { mergeProps } from \"@unlimited-react-components/kernel\";\r\nimport {\r\n DynamiCSS,\r\n DynamicSheet,\r\n} from \"@dynamicss/dynamicss\";\r\n\r\nconst MaterialButton: React.FC = (\r\n props: MaterialButtonProps,\r\n) => {\r\n const {\r\n children,\r\n onClick,\r\n disabled,\r\n style,\r\n href,\r\n variant,\r\n color,\r\n textColor,\r\n className,\r\n text,\r\n } = mergeProps(props, MaterialButtonDefaultProps);\r\n //states\r\n const [idStyles, setIdStyles] = useState(\"\");\r\n const [styleInjected, setStyleInjected] = useState(false);\r\n const [nextClassName, setNextClassName] = useState(0);\r\n const [classNameCreated, setClassNameCreated] = useState(\"\");\r\n\r\n //effects\r\n useEffect(() => {\r\n return () => removeStyle();\r\n }, [idStyles]);\r\n\r\n /**\r\n * Inserts the style for material button specific style\r\n * @param variant\r\n * @param disabled\r\n * @param color\r\n * @param textColor\r\n * @param text\r\n */\r\n const handleInserStyle = async (\r\n variant: MaterialButtonProps[\"variant\"],\r\n disabled: MaterialButtonProps[\"disabled\"],\r\n color: MaterialButtonProps[\"color\"],\r\n textColor: MaterialButtonProps[\"textColor\"],\r\n\r\n text: MaterialButtonProps[\"text\"],\r\n ) => {\r\n let class_name: string = className || \"\";\r\n\r\n let styleSheet: DynamicSheet;\r\n let idStyle: string = \"\";\r\n let nextClassNameVar: number;\r\n if (nextClassName == 0 && !styleInjected) {\r\n //new\r\n nextClassNameVar = getNextClassName();\r\n styleSheet = makeDynamicStyle(\r\n variant,\r\n disabled,\r\n color,\r\n textColor,\r\n nextClassNameVar,\r\n );\r\n setNextClassName(nextClassNameVar);\r\n idStyle = DynamiCSS.insertStyleSheet(styleSheet);\r\n\r\n makeClassName(variant, class_name, nextClassNameVar);\r\n setIdStyles(idStyle);\r\n if (idStyle !== \"\") {\r\n setStyleInjected(true);\r\n }\r\n } else {\r\n //already a stylesheet associated\r\n styleSheet = makeDynamicStyle(\r\n variant,\r\n disabled,\r\n color,\r\n textColor,\r\n nextClassName,\r\n );\r\n DynamiCSS.editStyleSheet(idStyles, styleSheet.sheetRules || []);\r\n makeClassName(variant, class_name, nextClassName);\r\n }\r\n\r\n //className\r\n };\r\n /**\r\n *\r\n * @param variant\r\n * @param class_name\r\n */\r\n const makeClassName = (\r\n variant: MaterialButtonProps[\"variant\"],\r\n class_name: string,\r\n nextClassNameVar: number,\r\n ) => {\r\n let classname = `material-button-root material-button `;\r\n if (!disabled) {\r\n classname += `${variant} ${variant}-${nextClassNameVar}`;\r\n } else {\r\n classname += `disabled`;\r\n }\r\n //classname to override styles in stylesheet\r\n if (class_name) {\r\n classname += ` ${classname} ${class_name}`;\r\n }\r\n //some text in className\r\n if (text) {\r\n classname += ` ${text}`;\r\n }\r\n\r\n setClassNameCreated(classname);\r\n };\r\n const removeStyle = () => {\r\n if (styleInjected) {\r\n DynamiCSS.removeStyleSheet(idStyles);\r\n setStyleInjected(false);\r\n setIdStyles(\"\");\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n handleInserStyle(variant, disabled, color, textColor, text);\r\n }, [variant, disabled, color, textColor, text]);\r\n\r\n //references\r\n const btn_ref = useRef(null);\r\n const span_ref = useRef(null);\r\n /**\r\n *\r\n * @param e\r\n */\r\n function handleClick(\r\n e: React.MouseEvent,\r\n ): void {\r\n createRipple(e, variant as string, color as string);\r\n if (onClick) onClick();\r\n }\r\n return (\r\n <>\r\n {styleInjected &&\r\n React.createElement(href ? \"a\" : \"button\", {\r\n className: classNameCreated,\r\n \"data-testid\": href ? \"material-anchor\" : \"material-button\",\r\n onClick: handleClick,\r\n ref: btn_ref,\r\n href: href,\r\n style: style,\r\n children: href ? (\r\n \r\n {children}\r\n \r\n ) : (\r\n {children}\r\n ),\r\n\r\n disabled: disabled,\r\n })}\r\n \r\n );\r\n};\r\n\r\nexport default MaterialButton;\r\n"],"names":[],"mappings":"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"}
--------------------------------------------------------------------------------
/build/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 |
4 |
5 | function ___$insertStyle(css) {
6 | if (!css) {
7 | return;
8 | }
9 |
10 | if (typeof window === 'undefined') {
11 | return;
12 | }
13 |
14 | const style = document.createElement('style');
15 | style.setAttribute('type', 'text/css');
16 | style.innerHTML = css;
17 | document.head.appendChild(style);
18 | return css;
19 | }
20 |
21 | Object.defineProperty(exports, '__esModule', { value: true });
22 |
23 | var React = require('react');
24 |
25 | function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
26 |
27 | var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
28 |
29 | /*! *****************************************************************************
30 | Copyright (c) Microsoft Corporation.
31 |
32 | Permission to use, copy, modify, and/or distribute this software for any
33 | purpose with or without fee is hereby granted.
34 |
35 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
36 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
37 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
38 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
39 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
40 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
41 | PERFORMANCE OF THIS SOFTWARE.
42 | ***************************************************************************** */
43 |
44 | function __awaiter(thisArg, _arguments, P, generator) {
45 | function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
46 | return new (P || (P = Promise))(function (resolve, reject) {
47 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
48 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
49 | function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
50 | step((generator = generator.apply(thisArg, _arguments || [])).next());
51 | });
52 | }
53 |
54 | function __generator(thisArg, body) {
55 | var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
56 | return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
57 | function verb(n) { return function (v) { return step([n, v]); }; }
58 | function step(op) {
59 | if (f) throw new TypeError("Generator is already executing.");
60 | while (_) try {
61 | if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
62 | if (y = 0, t) op = [op[0] & 2, t.value];
63 | switch (op[0]) {
64 | case 0: case 1: t = op; break;
65 | case 4: _.label++; return { value: op[1], done: false };
66 | case 5: _.label++; y = op[1]; op = [0]; continue;
67 | case 7: op = _.ops.pop(); _.trys.pop(); continue;
68 | default:
69 | if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
70 | if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
71 | if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
72 | if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
73 | if (t[2]) _.ops.pop();
74 | _.trys.pop(); continue;
75 | }
76 | op = body.call(thisArg, _);
77 | } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
78 | if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
79 | }
80 | }
81 |
82 | ___$insertStyle("@import url(\"https://fonts.googleapis.com/css2?family=Roboto&display=swap\");\n.material-button-root {\n border: 0;\n cursor: pointer;\n display: inline-flex;\n outline: 0;\n position: relative;\n align-items: center;\n vertical-align: middle;\n justify-content: center;\n text-decoration: none;\n text-transform: none;\n}\n\n.material-button {\n transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n overflow: hidden;\n min-width: 64px;\n box-sizing: border-box;\n border-radius: 4px;\n font-family: \"Roboto\", \"Helvetica\", \"Arial\", sans-serif;\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1.75;\n letter-spacing: 0.02857em;\n}\n\n.material-button.uppercase {\n text-transform: uppercase;\n}\n\n.material-button.lowercase {\n text-transform: lowercase;\n}\n\n.material-button.capitalize {\n text-transform: capitalize;\n}\n\n.material-button.contained {\n padding: 6px 16px;\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n\n.material-button.outlined {\n padding: 5px 15px;\n}\n\n.material-button.text {\n padding: 5px 15px;\n}\n\n.material-button-root.contained:hover {\n box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);\n}\n\n.material-button span.label {\n width: 100%;\n display: inherit;\n align-items: inherit;\n justify-content: inherit;\n}\n\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 500ms linear;\n background-color: rgba(255, 255, 255, 0.7);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 0;\n }\n}\n.material-button-root.disabled {\n box-shadow: none;\n cursor: default;\n pointer-events: none;\n background-color: rgba(0, 0, 0, 0.12);\n color: rgba(0, 0, 0, 0.26);\n padding: 6px 16px;\n}\n\n@media screen and (max-width: 600px) {\n .material-button {\n min-width: 30px;\n font-size: 0.78rem;\n line-height: 1.5;\n letter-spacing: 0.025em;\n }\n\n .material-button.contained {\n padding: 4px 13px;\n }\n\n .material-button.outlined {\n padding: 4px 12px;\n }\n}");
83 |
84 | /*! *****************************************************************************
85 | Copyright (c) Microsoft Corporation.
86 |
87 | Permission to use, copy, modify, and/or distribute this software for any
88 | purpose with or without fee is hereby granted.
89 |
90 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
91 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
92 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
93 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
94 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
95 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
96 | PERFORMANCE OF THIS SOFTWARE.
97 | ***************************************************************************** */
98 |
99 | var __assign = function() {
100 | __assign = Object.assign || function __assign(t) {
101 | for (var s, i = 1, n = arguments.length; i < n; i++) {
102 | s = arguments[i];
103 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
104 | }
105 | return t;
106 | };
107 | return __assign.apply(this, arguments);
108 | };
109 |
110 | /**
111 | * hexArray & decArray
112 | *
113 | * arrays of numbers used to convert hexadecimal numbers into decimal and viceversa
114 | */
115 | var hexArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
116 | var decArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
117 | /**
118 | * Converts hex number in string representation to decimal number
119 | *
120 | *
121 | * @param letter the string hex number
122 | * @returns a decimal number
123 | */
124 | var hexTodec = function (letter) {
125 | if (hexArray.includes(letter)) {
126 | return decArray[hexArray.indexOf(letter)];
127 | }
128 | else {
129 | return 0;
130 | }
131 | };
132 | /**
133 | * Validates wheteher the color is hexadecimal css color
134 | * Example: #FF56AC
135 | *
136 | *
137 | * @param colorInput the color inpt to test
138 | * @returns true if the inputColor is a hexadecimal css color
139 | */
140 | var isHexColor = function (colorInput) {
141 | // if first element is no '#' return default background color
142 | if (colorInput.charAt(0) !== '#') {
143 | return false;
144 | }
145 | // if color lenght is not exactly 7 return default
146 | if (colorInput.length !== 7) {
147 | return false;
148 | }
149 | // if one of the letters is not included in hex array return default
150 | for (var i = 1; i < colorInput.length; i++) {
151 | if (!hexArray.includes(colorInput.charAt(i))) {
152 | return false;
153 | }
154 | }
155 | return true;
156 | };
157 | /**
158 | * In order to managae rgba() we convert hex colors into rgba()
159 | * If the given color is already a rgb() color, it can add the percentage to convert it into rgba()
160 | *
161 | *
162 | * @param colorInput color in hex or in rgb
163 | * @param perc percentage for RGBA() color
164 | * @returns the rgba representation of a hex color
165 | */
166 | var hexColorToRGB = function (colorInput, perc, defaultColor) {
167 | if (perc === void 0) { perc = 0; }
168 | var resultDefault = defaultColor ? defaultColor : "rgba(255, 255, 255, 0.6)";
169 | if (!colorInput) {
170 | return resultDefault;
171 | }
172 | //work only in uppercase
173 | var color = colorInput.toUpperCase();
174 | // is already a rgba color
175 | if (color.includes("RGBA")) {
176 | return color;
177 | }
178 | //return rbg => rgba
179 | if (color.includes("RGB")) {
180 | return color.replace('RGB', "rgba").replace(')', ", " + perc + ")");
181 | }
182 | // if is a hex color or named color
183 | if (!isHexColor(colourNameToHex(color))) {
184 | return resultDefault;
185 | }
186 | var resultOk = "";
187 | //let strVar: string = "";
188 | var component1 = 0;
189 | var component2 = 0;
190 | var component3 = 0;
191 | //If passed all validations, proceed to transform
192 | component1 = hexTodec(color.charAt(1)) * 16 + hexTodec(color.charAt(2));
193 | component2 = hexTodec(color.charAt(3)) * 16 + hexTodec(color.charAt(4));
194 | component3 = hexTodec(color.charAt(5)) * 16 + hexTodec(color.charAt(6));
195 | resultOk = "rgba(" + component1 + ", " + component2 + "," + component3 + " , " + perc + ")";
196 | return resultOk;
197 | };
198 | /**
199 | * Make the color into a darker color
200 | * @param colorInput
201 | * @returns the darked color in
202 | */
203 | var darkerColor = function (colorInput, percentage) {
204 | if (percentage === void 0) { percentage = 25; }
205 | var darkedColor = "";
206 | var reduce = (100 - percentage) / 100;
207 | var component1 = 0;
208 | var component2 = 0;
209 | var component3 = 0;
210 | if (isHexColor(colourNameToHex(colorInput))) {
211 | component1 = hexTodec(colorInput.charAt(1)) * 16 + hexTodec(colorInput.charAt(2));
212 | component2 = hexTodec(colorInput.charAt(3)) * 16 + hexTodec(colorInput.charAt(4));
213 | component3 = hexTodec(colorInput.charAt(5)) * 16 + hexTodec(colorInput.charAt(6));
214 | darkedColor = "rgb(" + component1 * reduce + ", " + component2 * reduce + "," + component3 * reduce + ")";
215 | }
216 | else {
217 | if (colorInput.includes("rgba")) {
218 | var slicer = colorInput.replace("rgba(", "");
219 | var components = slicer.split(",");
220 | darkedColor = "rgb(" + parseInt(components[0], 10) * reduce + ", " + parseInt(components[1], 10) * reduce + "," + parseInt(components[2], 10) * reduce + ")";
221 | //return darkedColor;
222 | }
223 | else if (colorInput.includes("rgb")) {
224 | var slicer = colorInput.replace("rgb(", "");
225 | var components = slicer.split(",");
226 | darkedColor = "rgb(" + parseInt(components[0], 10) * reduce + ", " + parseInt(components[1], 10) * reduce + "," + parseInt(components[2], 10) * reduce + ")";
227 | // return darkedColor;
228 | }
229 | }
230 | return darkedColor;
231 | };
232 | /**
233 | * Merge props that com form user and those ones that are default
234 | * if incommingStyle is null this returns teh default value
235 | *
236 | * @param incommingProps prop that comes from props attributoo of a React Node
237 | * @param defaultProps default prop defined for that React Node
238 | * @returns merged props
239 | */
240 | function mergeProps(incommingProps, defaultProps) {
241 | if (!incommingProps) {
242 | return defaultProps;
243 | }
244 | else {
245 | return __assign(__assign({}, defaultProps), incommingProps);
246 | }
247 | }
248 | /**
249 | * Asure a base colour when not given or when given an incorrect color format
250 | * default color is this kind of grey #5d6475
251 | *
252 | * @param color param color given by user
253 | * @returns returns the same color
254 | */
255 | var asureColor = function (color) {
256 | if (color !== undefined && color !== "") {
257 | return color;
258 | }
259 | else {
260 | return "#5d6475";
261 | }
262 | };
263 | /**
264 | * Converts a named color into hexadecimal color
265 | * from a list of well known namd colors if found.
266 | * When not given returns a ""
267 | * When not found in the list, returns the same value given
268 | * @param colour the named color
269 | * @returns The hex representation of the color or "" or the same color
270 | */
271 | function colourNameToHex(colour) {
272 | /**
273 | * When not given
274 | */
275 | if (!colour) {
276 | return "";
277 | }
278 | /**
279 | * when named color is found
280 | */
281 | if (namedColours2[colour.toLocaleLowerCase()] !== undefined) {
282 | return namedColours2[colour.toLocaleLowerCase()];
283 | }
284 | /**
285 | * When the named color was not found
286 | */
287 | return colour;
288 | }
289 | /**
290 | * The full list of named Colors provided by
291 | * https://htmlcolorcodes.com/es/nombres-de-los-colores/
292 | */
293 | var namedColours2 = {
294 | //RED
295 | indianred: "#CD5C5C",
296 | lightcoral: "#F08080",
297 | salmon: "#FA8072",
298 | darksalmon: "#E9967A",
299 | lightsalmon: "#FFA07A",
300 | crimson: "#DC143C",
301 | red: "#FF0000",
302 | firebrick: "#B22222",
303 | darkred: "#8B0000",
304 | //PINK
305 | pink: "#FFC0CB",
306 | lightpink: "#FFB6C1",
307 | hotpink: "#FF69B4",
308 | deeppink: "#FF1493",
309 | mediumvioletred: "#C71585",
310 | palevioletred: "#DB7093",
311 | //ORANGE
312 | //"lightsalmon: "#FFA07A",
313 | coral: "#FF7F50",
314 | tomato: "#FF6347",
315 | orangered: "#FF4500",
316 | darkorange: "#FF8C00",
317 | orange: "#FFA500",
318 | //YELLOW
319 | gold: "#FFD700",
320 | yellow: "#FFFF00",
321 | lightyellow: "#FFFFE0",
322 | lemonchiffon: "#FFFACD",
323 | lightgoldenrodyellow: "#FAFAD2",
324 | papayawhip: "#FFEFD5",
325 | moccasin: "#FFE4B5",
326 | peachpuff: "#FFDAB9",
327 | palegoldenrod: "#EEE8AA",
328 | khaki: "#F0E68C",
329 | darkkhaki: "#BDB76B",
330 | //PURPLE
331 | lavender: "#E6E6FA",
332 | thistle: "#D8BFD8",
333 | plum: "#DDA0DD",
334 | violet: "#EE82EE",
335 | orchid: "#DA70D6",
336 | fuchsia: "#FF00FF",
337 | magenta: "#FF00FF",
338 | mediumorchid: "#BA55D3",
339 | mediumpurple: "#9370DB",
340 | rebeccapurple: "#663399",
341 | blueviolet: "#8A2BE2",
342 | darkviolet: "#9400D3",
343 | darkorchid: "#9932CC",
344 | darkmagenta: "#8B008B",
345 | purple: "#800080",
346 | indigo: "#4B0082",
347 | slateblue: "#6A5ACD",
348 | darkslateblue: "#483D8B",
349 | mediumslateblue: "#7B68EE",
350 | //GREEN
351 | greenyellow: "#ADFF2F",
352 | chartreuse: "#7FFF00",
353 | lawngreen: "#7CFC00",
354 | lime: "#00FF00",
355 | limegreen: "#32CD32",
356 | palegreen: "#98FB98",
357 | lightgreen: "#90EE90",
358 | mediumspringgreen: "#00FA9A",
359 | springgreen: "#00FF7F",
360 | mediumseagreen: "#3CB371",
361 | seagreen: "#2E8B57",
362 | forestgreen: "#228B22",
363 | green: "#008000",
364 | darkgreen: "#006400",
365 | yellowgreen: "#9ACD32",
366 | olivedrab: "#6B8E23",
367 | olive: "#808000",
368 | darkolivegreen: "#556B2F",
369 | mediumaquamarine: "#66CDAA",
370 | darkseagreen: "#8FBC8B",
371 | lightseagreen: "#20B2AA",
372 | darkcyan: "#008B8B",
373 | teal: "#008080",
374 | //BLUE
375 | aqua: "#00FFFF",
376 | cyan: "#00FFFF",
377 | lightcyan: "#E0FFFF",
378 | paleturquoise: "#AFEEEE",
379 | aquamarine: "#7FFFD4",
380 | turquoise: "#40E0D0",
381 | mediumturquoise: "#48D1CC",
382 | darkturquoise: "#00CED1",
383 | cadetblue: "#5F9EA0",
384 | steelblue: "#4682B4",
385 | lightsteelblue: "#B0C4DE",
386 | powderblue: "#B0E0E6",
387 | lightblue: "#ADD8E6",
388 | skyblue: "#87CEEB",
389 | lightskyblue: "#87CEFA",
390 | deepskyblue: "#00BFFF",
391 | dodgerblue: "#1E90FF",
392 | cornflowerblue: "#6495ED",
393 | //"mediumslateblue: "#7B68EE",
394 | royalblue: "#4169E1",
395 | blue: "#0000FF",
396 | mediumblue: "#0000CD",
397 | darkblue: "#00008B",
398 | navy: "#000080",
399 | midnightblue: "#191970",
400 | //BROWN
401 | cornsilk: "#FFF8DC",
402 | blanchedalmond: "#FFEBCD",
403 | bisque: "#FFE4C4",
404 | navajowhite: "#FFDEAD",
405 | wheat: "#F5DEB3",
406 | burlywood: "#DEB887",
407 | tan: "#D2B48C",
408 | rosybrown: "#BC8F8F",
409 | sandybrown: "#F4A460",
410 | goldenrod: "#DAA520",
411 | darkgoldenrod: "#B8860B",
412 | peru: "#CD853F",
413 | chocolate: "#D2691E",
414 | saddlebrown: "#8B4513",
415 | sienna: "#A0522D",
416 | brown: "#A52A2A",
417 | maroon: "#800000",
418 | //WHITE
419 | white: "#FFFFFF",
420 | snow: "#FFFAFA",
421 | honeydew: "#F0FFF0",
422 | mintcream: "#F5FFFA",
423 | azure: "#F0FFFF",
424 | aliceblue: "#F0F8FF",
425 | ghostwhite: "#F8F8FF",
426 | whitesmoke: "#F5F5F5",
427 | seashell: "#FFF5EE",
428 | beige: "#F5F5DC",
429 | oldlace: "#FDF5E6",
430 | floralwhite: "#FFFAF0",
431 | ivory: "#FFFFF0",
432 | antiquewhite: "#FAEBD7",
433 | linen: "#FAF0E6",
434 | lavenderblush: "#FFF0F5",
435 | mistyrose: "#FFE4E1",
436 | //GREY
437 | gainsboro: "#DCDCDC",
438 | lightgray: "#D3D3D3",
439 | silver: "#C0C0C0",
440 | darkgray: "#A9A9A9",
441 | gray: "#808080",
442 | dimgray: "#696969",
443 | lightslategray: "#778899",
444 | slategray: "#708090",
445 | darkslategray: "#2F4F4F",
446 | black: "#000000"
447 | };
448 |
449 | /**
450 | * In order to avoid overwriting the classnames
451 | * and to be able to have different styled buttons in the document
452 | * it is necesary to add a numeric identifier next to the className:
453 | * instead of: ".classname"
454 | * we get : ".classname-3", ".classname-4", ".classname-5" and so on
455 | * for this task a number is used as ID
456 | */
457 | var MaterialButtonStylizer = /** @class */ (function () {
458 | function MaterialButtonStylizer() {
459 | }
460 | /**
461 | * Increases the count and retrieves the next number
462 | * @returns the next static number in styles
463 | */
464 | MaterialButtonStylizer.getNext = function () {
465 | MaterialButtonStylizer.nextButtonClassNameNumber++;
466 | return MaterialButtonStylizer.nextButtonClassNameNumber;
467 | };
468 | MaterialButtonStylizer.nextButtonClassNameNumber = 0;
469 | return MaterialButtonStylizer;
470 | }());
471 | /**
472 | * Calls the getNext() method of MaterialButtonStylizer class
473 | * @returns the next static number in styles
474 | */
475 | var getNextClassName = function () {
476 | return MaterialButtonStylizer.getNext();
477 | };
478 | /**
479 | * Creates the ripple effect
480 | * @param event
481 | */
482 | function createRipple(event, variant, color) {
483 | var buttonAnchorDiv = event.currentTarget;
484 | var circle = document.createElement("span");
485 | var diameter = Math.max(buttonAnchorDiv.clientWidth, buttonAnchorDiv.clientHeight);
486 | var radius = diameter / 2;
487 | circle.style.width = circle.style.height = diameter + "px";
488 | circle.style.left = event.clientX - buttonAnchorDiv.offsetLeft - radius + "px";
489 | circle.style.top = event.clientY - buttonAnchorDiv.offsetTop - radius + "px";
490 | circle.classList.add("ripple");
491 | if (variant !== "contained") {
492 | circle.style.backgroundColor = hexColorToRGB(asureColor(colourNameToHex(color)), 0.4);
493 | }
494 | else {
495 | circle.style.backgroundColor = hexColorToRGB("#ffffff", 0.4);
496 | }
497 | var ripple = buttonAnchorDiv.getElementsByClassName("ripple")[0];
498 | if (ripple) {
499 | ripple.remove();
500 | }
501 | buttonAnchorDiv.appendChild(circle);
502 | }
503 | var makeDynamicStyle = function (variant, disabled, color, textColor, nextClassName) {
504 | var styleSheet = {
505 | id: "material-button-styles" + "-" + nextClassName,
506 | sheetRules: [{
507 | className: "material-button." + variant + "-" + nextClassName,
508 | rules: {},
509 | },
510 | {
511 | className: "material-button-root." + variant + "-" + nextClassName,
512 | rules: {},
513 | },],
514 | };
515 | var sheetRules = styleSheet.sheetRules;
516 | if (!disabled) {
517 | switch (variant) {
518 | case "contained":
519 | sheetRules[0].rules = {
520 | color: asureColor(colourNameToHex(textColor)),
521 | backgroundColor: asureColor(colourNameToHex(color)),
522 | };
523 | sheetRules[1].rules = {
524 | ":hover": {
525 | backgroundColor: darkerColor(hexColorToRGB(asureColor(colourNameToHex(color)), 1)),
526 | },
527 | };
528 | break;
529 | case "outlined":
530 | sheetRules[0].rules = {
531 | border: "1px solid " + hexColorToRGB(asureColor(colourNameToHex(color)), 0.5),
532 | color: asureColor(colourNameToHex(color)),
533 | backgroundColor: "transparent",
534 | };
535 | sheetRules[1].rules = {
536 | ":hover": {
537 | border: "1px solid " + hexColorToRGB(asureColor(colourNameToHex(color)), 1),
538 | backgroundColor: hexColorToRGB(asureColor(colourNameToHex(color)), 0.085),
539 | },
540 | };
541 | break;
542 | case "text":
543 | sheetRules[0].rules = {
544 | color: asureColor(colourNameToHex(color)),
545 | backgroundColor: "transparent",
546 | };
547 | sheetRules[1].rules = {
548 | ":hover": {
549 | backgroundColor: hexColorToRGB(asureColor(colourNameToHex(color)), 0.085),
550 | },
551 | };
552 | break;
553 | }
554 | }
555 | styleSheet.sheetRules = sheetRules;
556 | return styleSheet;
557 | };
558 |
559 | //export type ThemeColor = "primary" | "secondary";
560 | /**
561 | * default props for material button
562 | */
563 | var MaterialButtonDefaultProps = {
564 | children: undefined,
565 | style: {},
566 | onClick: function () { },
567 | variant: "contained",
568 | disabled: false,
569 | color: "#071e25",
570 | textColor: "#FFFFFF",
571 | text: "uppercase"
572 | };
573 |
574 | var DynamiCSS;
575 | (function (DynamiCSS) {
576 | function insertStyleSheet(dynamicSheet) {
577 | var result_id = "";
578 | if (typeof window === "undefined") {
579 | return "";
580 | }
581 | if (!dynamicSheet) {
582 | return "";
583 | }
584 | //if already exists
585 | if (document.getElementById(dynamicSheet.id)) {
586 | return dynamicSheet.id;
587 | }
588 | result_id = dynamicSheet.id;
589 | var styleSheet = document.createElement("style");
590 | styleSheet.id = result_id;
591 | styleSheet.setAttribute("type", "text/css");
592 | var contetRaw = toRawStyleSheet(dynamicSheet.sheetRules || []) + dynamicSheet.raw || "";
593 | styleSheet.textContent = contetRaw;
594 | var appendResult = document.head.appendChild(styleSheet);
595 | if (!appendResult) {
596 | return "";
597 | }
598 | return result_id;
599 | }
600 | DynamiCSS.insertStyleSheet = insertStyleSheet;
601 | function editStyleSheet(id, sheetRules) {
602 | var result_id = "";
603 | if (typeof window === "undefined") {
604 | return "";
605 | }
606 | if (!id || !sheetRules) {
607 | return "";
608 | }
609 | //if dont exists yet
610 | var styleSheet = document.getElementById(id);
611 | if (!styleSheet) {
612 | return "";
613 | }
614 | /* result_id = id;
615 | //var styleSheet: HTMLStyleElement = document.createElement("style");
616 | styleSheet.id = result_id;
617 | styleSheet.setAttribute("type", "text/css"); */
618 | styleSheet.textContent = toRawStyleSheet(sheetRules);
619 | return result_id;
620 | }
621 | DynamiCSS.editStyleSheet = editStyleSheet;
622 | function removeStyleSheet(id) {
623 | var result_id = "";
624 | if (!id) {
625 | return "";
626 | }
627 | var htmlObject = document.getElementById(id);
628 | if (htmlObject) {
629 | document.head.removeChild(htmlObject);
630 | result_id = id;
631 | }
632 | return result_id;
633 | }
634 | DynamiCSS.removeStyleSheet = removeStyleSheet;
635 | function existStyleSheet(id) {
636 | if (!id) {
637 | return false;
638 | }
639 | var htmlObject = document.getElementById(id);
640 | if (htmlObject) {
641 | return true;
642 | }
643 | return false;
644 | }
645 | DynamiCSS.existStyleSheet = existStyleSheet;
646 | function makeStyleSheet(styleSheet) {
647 | if (!styleSheet) {
648 | return null;
649 | }
650 | return styleSheet;
651 | }
652 | DynamiCSS.makeStyleSheet = makeStyleSheet;
653 | })(DynamiCSS || (DynamiCSS = {}));
654 | /**
655 | * Determines whether a character is upperCase or not
656 | * @param str a character
657 | * @returns true if str contains a string character
658 | */
659 | function isUpper(character) {
660 | if (!character)
661 | return false;
662 | return !/[a-z]/.test(character) && /[A-Z]/.test(character);
663 | }
664 | /**
665 | * Converts a rule with uppercase to a hyphen-lowercase version
666 | * @param rule the rule
667 | * @returns
668 | */
669 | function fromUpperCaseToHyphen(ruleLabel) {
670 | var result = "";
671 | var charUpper = ' ';
672 | var isupper = false;
673 | for (var i = 0; i < ruleLabel.length; i++) {
674 | var currentChar = ruleLabel[i];
675 | if (isUpper(currentChar)) {
676 | charUpper = currentChar;
677 | isupper = true;
678 | break;
679 | }
680 | }
681 | //add hyphen
682 | if (isupper) {
683 | var parts = ruleLabel.split(charUpper);
684 | result = parts[0] + "-" + charUpper.toLowerCase() + parts[1];
685 | }
686 | else {
687 | result = ruleLabel;
688 | }
689 | return result;
690 | }
691 | /**
692 | *
693 | * @param ruleLabel the rule
694 | * @returns true if the rule label corresponds to a pseudo class
695 | */
696 | function isPseudo(ruleLabel) {
697 | if (!ruleLabel)
698 | return false;
699 | return ruleLabel.includes(":");
700 | }
701 | function makeRawRuleLabel(className) {
702 | var result = "";
703 | var splitedClassName = className.trim().split(" ");
704 | //is composed classname?
705 | if (splitedClassName.length > 1) {
706 | for (var i = 0; i < splitedClassName.length; i++) {
707 | result += "." + splitedClassName[i];
708 | }
709 | result += "{\n";
710 | }
711 | else {
712 | result += "." + className + "{\n";
713 | }
714 | return result;
715 | }
716 | function toRawStyleSheet(sheetRules) {
717 | if (!sheetRules) {
718 | return "";
719 | }
720 | var rawStyleSheet = "";
721 | var nestedPseudos = [];
722 | for (var j = 0; j < sheetRules.length; j++) {
723 | var currentRule = sheetRules[j];
724 | var currnetRawRule = "";
725 | // currnetRawRule += `.${currentRule.className}{\n`;
726 | currnetRawRule += makeRawRuleLabel(currentRule.className);
727 | //list of labels for rules
728 | var ruleskeys = Object.keys(currentRule.rules);
729 | for (var i = 0; i < ruleskeys.length; i++) {
730 | var currentKey = ruleskeys[i];
731 | var styleLabel = fromUpperCaseToHyphen(currentKey);
732 | //if a pseudo class found, separate it
733 | if (isPseudo(styleLabel)) {
734 | var pseudoClassName = currentRule.className + styleLabel;
735 | nestedPseudos.push({ className: pseudoClassName, rules: currentRule.rules[styleLabel] });
736 | }
737 | else {
738 | var styleRule = currentRule.rules[currentKey];
739 | currnetRawRule += "\t" + styleLabel + " : " + styleRule + ";\n";
740 | }
741 | }
742 | currnetRawRule += "}\n";
743 | rawStyleSheet += currnetRawRule;
744 | }
745 | //nested pseudos
746 | for (var p = 0; p < nestedPseudos.length; p++) {
747 | var currnetRawRule = "";
748 | var currentRule = nestedPseudos[p];
749 | var ruleskeys = Object.keys(currentRule.rules);
750 | currnetRawRule += "." + currentRule.className + "{\n";
751 | for (var i = 0; i < ruleskeys.length; i++) {
752 | var currentKey = ruleskeys[i];
753 | var styleLabel = fromUpperCaseToHyphen(currentKey);
754 | var styleRule = currentRule.rules[currentKey];
755 | currnetRawRule += "\t" + styleLabel + " : " + styleRule + ";\n";
756 | }
757 | currnetRawRule += "}\n";
758 | rawStyleSheet += currnetRawRule;
759 | }
760 | return rawStyleSheet;
761 | }
762 |
763 | var MaterialButton = function (props) {
764 | var _a = mergeProps(props, MaterialButtonDefaultProps), children = _a.children, onClick = _a.onClick, disabled = _a.disabled, style = _a.style, href = _a.href, variant = _a.variant, color = _a.color, textColor = _a.textColor, className = _a.className, text = _a.text;
765 | //states
766 | var _b = React.useState(""), idStyles = _b[0], setIdStyles = _b[1];
767 | var _c = React.useState(false), styleInjected = _c[0], setStyleInjected = _c[1];
768 | var _d = React.useState(0), nextClassName = _d[0], setNextClassName = _d[1];
769 | var _e = React.useState(""), classNameCreated = _e[0], setClassNameCreated = _e[1];
770 | //effects
771 | React.useEffect(function () {
772 | return function () { return removeStyle(); };
773 | }, [idStyles]);
774 | /**
775 | * Inserts the style for material button specific style
776 | * @param variant
777 | * @param disabled
778 | * @param color
779 | * @param textColor
780 | * @param text
781 | */
782 | var handleInserStyle = function (variant, disabled, color, textColor, text) { return __awaiter(void 0, void 0, void 0, function () {
783 | var class_name, styleSheet, idStyle, nextClassNameVar;
784 | return __generator(this, function (_a) {
785 | class_name = className || "";
786 | idStyle = "";
787 | if (nextClassName == 0 && !styleInjected) {
788 | //new
789 | nextClassNameVar = getNextClassName();
790 | styleSheet = makeDynamicStyle(variant, disabled, color, textColor, nextClassNameVar);
791 | setNextClassName(nextClassNameVar);
792 | idStyle = DynamiCSS.insertStyleSheet(styleSheet);
793 | makeClassName(variant, class_name, nextClassNameVar);
794 | setIdStyles(idStyle);
795 | if (idStyle !== "") {
796 | setStyleInjected(true);
797 | }
798 | }
799 | else {
800 | //already a stylesheet associated
801 | styleSheet = makeDynamicStyle(variant, disabled, color, textColor, nextClassName);
802 | DynamiCSS.editStyleSheet(idStyles, styleSheet.sheetRules || []);
803 | makeClassName(variant, class_name, nextClassName);
804 | }
805 | return [2 /*return*/];
806 | });
807 | }); };
808 | /**
809 | *
810 | * @param variant
811 | * @param class_name
812 | */
813 | var makeClassName = function (variant, class_name, nextClassNameVar) {
814 | var classname = "material-button-root material-button ";
815 | if (!disabled) {
816 | classname += variant + " " + variant + "-" + nextClassNameVar;
817 | }
818 | else {
819 | classname += "disabled";
820 | }
821 | //classname to override styles in stylesheet
822 | if (class_name) {
823 | classname += " " + classname + " " + class_name;
824 | }
825 | //some text in className
826 | if (text) {
827 | classname += " " + text;
828 | }
829 | setClassNameCreated(classname);
830 | };
831 | var removeStyle = function () {
832 | if (styleInjected) {
833 | DynamiCSS.removeStyleSheet(idStyles);
834 | setStyleInjected(false);
835 | setIdStyles("");
836 | }
837 | };
838 | React.useEffect(function () {
839 | handleInserStyle(variant, disabled, color, textColor);
840 | }, [variant, disabled, color, textColor, text]);
841 | //references
842 | var btn_ref = React.useRef(null);
843 | var span_ref = React.useRef(null);
844 | /**
845 | *
846 | * @param e
847 | */
848 | function handleClick(e) {
849 | createRipple(e, variant, color);
850 | if (onClick)
851 | onClick();
852 | }
853 | return (React__default['default'].createElement(React__default['default'].Fragment, null, styleInjected &&
854 | React__default['default'].createElement(href ? "a" : "button", {
855 | className: classNameCreated,
856 | "data-testid": href ? "material-anchor" : "material-button",
857 | onClick: handleClick,
858 | ref: btn_ref,
859 | href: href,
860 | style: style,
861 | children: href ? (React__default['default'].createElement("span", { ref: span_ref, className: "label" }, children)) : (React__default['default'].createElement("span", { className: "label" }, children)),
862 | disabled: disabled,
863 | })));
864 | };
865 |
866 | exports.MaterialButton = MaterialButton;
867 | //# sourceMappingURL=index.js.map
868 |
--------------------------------------------------------------------------------
/build/utils/MaterialButtonMakeStyles.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { DynamicSheet } from "@dynamicss/dynamicss";
3 | import { MaterialButtonProps } from "../MaterialButton/MaterialButtonProps";
4 | /**
5 | * Calls the getNext() method of MaterialButtonStylizer class
6 | * @returns the next static number in styles
7 | */
8 | export declare const getNextClassName: () => number;
9 | /**
10 | * Creates the ripple effect
11 | * @param event
12 | */
13 | export declare function createRipple(event: React.MouseEvent, variant: string, color: string): void;
14 | export declare const makeDynamicStyle: (variant: MaterialButtonProps["variant"], disabled: MaterialButtonProps["disabled"], color: MaterialButtonProps["color"], textColor: MaterialButtonProps["textColor"], nextClassName: number) => DynamicSheet;
15 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | roots: ["/tests"],
3 | transform: {
4 | "^.+\\.tsx?$": "ts-jest",
5 | },
6 | preset: "ts-jest",
7 | testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
8 | moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node", "d.ts"],
9 | "moduleNameMapper": {
10 | "^.+\\.(css|less|scss)$": "identity-obj-proxy"
11 | }
12 | };
13 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@unlimited-react-components/material-button",
3 | "version": "1.2.4",
4 | "description": "Independant Material Button from Material Design built from 0",
5 | "main": "./build/index.js",
6 | "module": "./build/index.es.js",
7 | "types": "./build/index.d.ts",
8 | "repository": {
9 | "type": "git",
10 | "url": "git+https://github.com/unlimited-react-components/material-button.git"
11 | },
12 | "keywords": [
13 | "material components",
14 | "material design",
15 | "button",
16 | "material button"
17 | ],
18 | "author": "JinSSJ3",
19 | "license": "MIT",
20 | "bugs": {
21 | "url": "https://github.com/unlimited-react-components/material-button/issues"
22 | },
23 | "homepage": "https://github.com/unlimited-react-components/material-button#readme",
24 | "dependencies": {
25 | "@dynamicss/dynamicss": "^2.0.3",
26 | "@unlimited-react-components/kernel": "^1.0.2"
27 | },
28 | "peerDependencies": {
29 | "react": "^17.0.2",
30 | "react-dom": "^17.0.2"
31 | },
32 | "devDependencies": {
33 | "@babel/core": "^7.11.6",
34 | "@rollup/plugin-commonjs": "^20.0.0",
35 | "@rollup/plugin-node-resolve": "^13.0.4",
36 | "@storybook/addon-actions": "^6.0.22",
37 | "@storybook/addon-links": "^6.0.22",
38 | "@storybook/addons": "^6.0.22",
39 | "@storybook/preset-scss": "^1.0.3",
40 | "@storybook/react": "^6.0.22",
41 | "@testing-library/jest-dom": "^5.11.4",
42 | "@testing-library/react": "^12.0.0",
43 | "@types/jest": "^27.0.0",
44 | "@types/node": "^16.4.12",
45 | "@types/testing-library__jest-dom": "^5.9.3",
46 | "@types/testing-library__react": "^10.2.0",
47 | "@typescript-eslint/eslint-plugin": "^4.3.0",
48 | "@typescript-eslint/parser": "^4.3.0",
49 | "babel-loader": "^8.1.0",
50 | "coveralls": "^3.1.0",
51 | "css-loader": "^6.2.0",
52 | "eslint": "^7.10.0",
53 | "eslint-config-prettier": "^8.1.0",
54 | "eslint-plugin-jest": "^24.0.2",
55 | "eslint-plugin-prettier": "^3.1.4",
56 | "eslint-plugin-react": "^7.21.2",
57 | "fork-ts-checker-webpack-plugin": "^6.2.0",
58 | "identity-obj-proxy": "^3.0.0",
59 | "jest": "^26.4.2",
60 | "prettier": "^2.3.0",
61 | "rollup": "^2.41.2",
62 | "rollup-plugin-peer-deps-external": "^2.2.3",
63 | "rollup-plugin-sass": "^1.2.2",
64 | "rollup-plugin-terser": "^7.0.2",
65 | "rollup-plugin-typescript2": "^0.30.0",
66 | "sass-loader": "^12.1.0",
67 | "style-loader": "^3.2.1",
68 | "ts-jest": "^26.4.0",
69 | "ts-loader": "^9.2.5",
70 | "tslib": "^2.1.0",
71 | "typescript": "^4.0.3"
72 | },
73 | "scripts": {
74 | "storybook": "start-storybook -p 6006",
75 | "build-storybook": "build-storybook",
76 | "build": "rollup -c",
77 | "lint": "eslint src/*.tsx --quiet --fix",
78 | "test": "jest",
79 | "test:coveralls": "jest --coverage && coveralls < coverage/lcov.info",
80 | "postinstall": "node postinstallSSJ.js"
81 | }
82 | }
--------------------------------------------------------------------------------
/postinstallSSJ.js:
--------------------------------------------------------------------------------
1 | console.log(
2 | '\x1b[36m%s\x1b[34m%s\x1b[0m',
3 | '**************************************************************************************\n'+
4 | '*** Material Button ***\n'+
5 | '*** Material design Button - unlimited implementation ***\n'+
6 | '*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*//*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*\n'
7 | );
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import commonjs from "@rollup/plugin-commonjs";
2 | import resolve from "@rollup/plugin-node-resolve";
3 | import peerDepsExternal from "rollup-plugin-peer-deps-external";
4 | import typescript from "rollup-plugin-typescript2";
5 | import sass from "rollup-plugin-sass";
6 | import packageJson from "./package.json";
7 | //import { terser } from "rollup-plugin-terser";
8 |
9 | export default {
10 | input: "./src/index.ts",
11 | output: [
12 | {
13 | file: packageJson.main,
14 | format: "cjs",
15 | sourcemap: true,
16 | },
17 | {
18 | file: packageJson.module,
19 | format: "esm",
20 | sourcemap: true,
21 | },
22 | ],
23 | plugins: [
24 | sass({ insert: true }),
25 | peerDepsExternal(),
26 | resolve(),
27 | commonjs(),
28 | typescript(),
29 | //terser(),
30 | ],
31 | //external: ["@dynamicss/dynamicss", "@unlimited-react-components/kernel"],
32 | };
33 |
--------------------------------------------------------------------------------
/src/MaterialButton/MaterialButton.scss:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
2 |
3 | .material-button-root {
4 | border: 0;
5 | cursor: pointer;
6 | display: inline-flex;
7 | outline: 0;
8 | position: relative;
9 | align-items: center;
10 | vertical-align: middle;
11 | justify-content: center;
12 | text-decoration: none;
13 | text-transform: none;
14 | }
15 |
16 | .material-button {
17 | //padding: 15rem 5rem;
18 | transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
19 | box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
20 | border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
21 |
22 | overflow: hidden;
23 | //transition: background 400ms;
24 | min-width: 64px;
25 | box-sizing: border-box;
26 | border-radius: 4px;
27 |
28 | font-family: "Roboto", "Helvetica", "Arial", sans-serif;
29 | font-size: 0.875rem;
30 | font-weight: 500;
31 | line-height: 1.75;
32 | letter-spacing: 0.02857em;
33 | }
34 | .material-button.uppercase {
35 | text-transform: uppercase;
36 | }
37 | .material-button.lowercase {
38 | text-transform: lowercase;
39 | }
40 | .material-button.capitalize {
41 | text-transform: capitalize;
42 | }
43 | .material-button.contained {
44 | padding: 6px 16px;
45 | box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
46 | 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
47 | }
48 | .material-button.outlined {
49 | padding: 5px 15px;
50 | }
51 | .material-button.text {
52 | padding: 5px 15px;
53 | }
54 | .material-button-root.contained:hover {
55 | box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
56 | 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
57 | }
58 |
59 | .material-button span.label {
60 | width: 100%;
61 | display: inherit;
62 | align-items: inherit;
63 | justify-content: inherit;
64 | }
65 | span.ripple {
66 | position: absolute;
67 | border-radius: 50%;
68 | transform: scale(0);
69 | animation: ripple 500ms linear;
70 | background-color: rgba(255, 255, 255, 0.7);
71 | }
72 |
73 | @keyframes ripple {
74 | to {
75 | transform: scale(4);
76 | opacity: 0;
77 | }
78 | }
79 |
80 | .material-button-root.disabled {
81 | box-shadow: none;
82 | cursor: default;
83 | pointer-events: none;
84 | background-color: rgba(0, 0, 0, 0.12);
85 | color: rgba(0, 0, 0, 0.26);
86 | padding: 6px 16px;
87 | }
88 | //mobile
89 | @media screen and (max-width: 600px) {
90 | .material-button {
91 | min-width: 30px;
92 | font-size: 0.78rem;
93 | line-height: 1.5;
94 | letter-spacing: 0.025em;
95 | }
96 | .material-button.contained {
97 | padding: 4px 13px;
98 | }
99 | .material-button.outlined {
100 | padding: 4px 12px;
101 | }
102 | }
103 |
--------------------------------------------------------------------------------
/src/MaterialButton/MaterialButton.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState, useEffect } from "react";
2 | import "./MaterialButton.scss";
3 | import {
4 | createRipple,
5 | getNextClassName,
6 | makeDynamicStyle,
7 | } from "../utils/MaterialButtonMakeStyles";
8 | import {
9 | MaterialButtonDefaultProps,
10 | MaterialButtonProps,
11 | } from "./MaterialButtonProps";
12 | import { mergeProps } from "@unlimited-react-components/kernel";
13 | import {
14 | DynamiCSS,
15 | DynamicSheet,
16 | } from "@dynamicss/dynamicss";
17 |
18 | const MaterialButton: React.FC = (
19 | props: MaterialButtonProps,
20 | ) => {
21 | const {
22 | children,
23 | onClick,
24 | disabled,
25 | style,
26 | href,
27 | variant,
28 | color,
29 | textColor,
30 | className,
31 | text,
32 | } = mergeProps(props, MaterialButtonDefaultProps);
33 | //states
34 | const [idStyles, setIdStyles] = useState("");
35 | const [styleInjected, setStyleInjected] = useState(false);
36 | const [nextClassName, setNextClassName] = useState(0);
37 | const [classNameCreated, setClassNameCreated] = useState("");
38 |
39 | //effects
40 | useEffect(() => {
41 | return () => removeStyle();
42 | }, [idStyles]);
43 |
44 | /**
45 | * Inserts the style for material button specific style
46 | * @param variant
47 | * @param disabled
48 | * @param color
49 | * @param textColor
50 | * @param text
51 | */
52 | const handleInserStyle = async (
53 | variant: MaterialButtonProps["variant"],
54 | disabled: MaterialButtonProps["disabled"],
55 | color: MaterialButtonProps["color"],
56 | textColor: MaterialButtonProps["textColor"],
57 |
58 | text: MaterialButtonProps["text"],
59 | ) => {
60 | let class_name: string = className || "";
61 |
62 | let styleSheet: DynamicSheet;
63 | let idStyle: string = "";
64 | let nextClassNameVar: number;
65 | if (nextClassName == 0 && !styleInjected) {
66 | //new
67 | nextClassNameVar = getNextClassName();
68 | styleSheet = makeDynamicStyle(
69 | variant,
70 | disabled,
71 | color,
72 | textColor,
73 | nextClassNameVar,
74 | );
75 | setNextClassName(nextClassNameVar);
76 | idStyle = DynamiCSS.insertStyleSheet(styleSheet);
77 |
78 | makeClassName(variant, class_name, nextClassNameVar);
79 | setIdStyles(idStyle);
80 | if (idStyle !== "") {
81 | setStyleInjected(true);
82 | }
83 | } else {
84 | //already a stylesheet associated
85 | styleSheet = makeDynamicStyle(
86 | variant,
87 | disabled,
88 | color,
89 | textColor,
90 | nextClassName,
91 | );
92 | DynamiCSS.editStyleSheet(idStyles, styleSheet.sheetRules || []);
93 | makeClassName(variant, class_name, nextClassName);
94 | }
95 |
96 | //className
97 | };
98 | /**
99 | *
100 | * @param variant
101 | * @param class_name
102 | */
103 | const makeClassName = (
104 | variant: MaterialButtonProps["variant"],
105 | class_name: string,
106 | nextClassNameVar: number,
107 | ) => {
108 | let classname = `material-button-root material-button `;
109 | if (!disabled) {
110 | classname += `${variant} ${variant}-${nextClassNameVar}`;
111 | } else {
112 | classname += `disabled`;
113 | }
114 | //classname to override styles in stylesheet
115 | if (class_name) {
116 | classname += ` ${classname} ${class_name}`;
117 | }
118 | //some text in className
119 | if (text) {
120 | classname += ` ${text}`;
121 | }
122 |
123 | setClassNameCreated(classname);
124 | };
125 | const removeStyle = () => {
126 | if (styleInjected) {
127 | DynamiCSS.removeStyleSheet(idStyles);
128 | setStyleInjected(false);
129 | setIdStyles("");
130 | }
131 | };
132 |
133 | useEffect(() => {
134 | handleInserStyle(variant, disabled, color, textColor, text);
135 | }, [variant, disabled, color, textColor, text]);
136 |
137 | //references
138 | const btn_ref = useRef(null);
139 | const span_ref = useRef(null);
140 | /**
141 | *
142 | * @param e
143 | */
144 | function handleClick(
145 | e: React.MouseEvent,
146 | ): void {
147 | createRipple(e, variant as string, color as string);
148 | if (onClick) onClick();
149 | }
150 | return (
151 | <>
152 | {styleInjected &&
153 | React.createElement(href ? "a" : "button", {
154 | className: classNameCreated,
155 | "data-testid": href ? "material-anchor" : "material-button",
156 | onClick: handleClick,
157 | ref: btn_ref,
158 | href: href,
159 | style: style,
160 | children: href ? (
161 |
162 | {children}
163 |
164 | ) : (
165 | {children}
166 | ),
167 |
168 | disabled: disabled,
169 | })}
170 |
171 | );
172 | };
173 |
174 | export default MaterialButton;
175 |
--------------------------------------------------------------------------------
/src/MaterialButton/MaterialButtonProps.ts:
--------------------------------------------------------------------------------
1 | import { OverridableProps } from "@unlimited-react-components/kernel";
2 |
3 | export interface MaterialButtonProps extends OverridableProps {
4 | /**
5 | * Function that specifies
6 | * what to do on click
7 | */
8 | onClick?: Function;
9 | /**
10 | * variants of button:
11 | * contained: with background color
12 | * outlined: border and transparent backgorund, on hover background color takes the color
13 | * text: no borders and no background color, on hover
14 | */
15 | variant?: "text" | "outlined" | "contained";
16 | /**
17 | * whether the button will be disabled or not
18 | */
19 | disabled?: boolean;
20 | /**
21 | * whether this button redirect to somewhere
22 | */
23 | href?: string;
24 | /**
25 | * the text transfor for the button label
26 | */
27 | text?: "uppercase" | "capitalize" | "lowercase" | "none";
28 | /**
29 | * the main theme color
30 | */
31 | color?: string;// | ThemeColor;
32 | }
33 |
34 | //export type ThemeColor = "primary" | "secondary";
35 | /**
36 | * default props for material button
37 | */
38 | export const MaterialButtonDefaultProps: MaterialButtonProps = {
39 | children: undefined,
40 | style: {},
41 | onClick: () => { },
42 | variant: "contained",
43 | disabled: false,
44 | color: "#071e25",
45 | textColor: "#FFFFFF",
46 | text: "uppercase"
47 | }
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import MaterialButton from "./MaterialButton/MaterialButton";
2 |
3 | export{MaterialButton};
--------------------------------------------------------------------------------
/src/utils/MaterialButtonMakeStyles.ts:
--------------------------------------------------------------------------------
1 | import { DynamicSheet, DynamicSheetRule } from "@dynamicss/dynamicss";
2 | import { hexColorToRGB, asureColor, colourNameToHex, darkerColor } from "@unlimited-react-components/kernel";
3 | import { MaterialButtonProps } from "../MaterialButton/MaterialButtonProps";
4 | /**
5 | * In order to avoid overwriting the classnames
6 | * and to be able to have different styled buttons in the document
7 | * it is necesary to add a numeric identifier next to the className:
8 | * instead of: ".classname"
9 | * we get : ".classname-3", ".classname-4", ".classname-5" and so on
10 | * for this task a number is used as ID
11 | */
12 | abstract class MaterialButtonStylizer {
13 | static nextButtonClassNameNumber = 0;
14 | /**
15 | * Increases the count and retrieves the next number
16 | * @returns the next static number in styles
17 | */
18 | static getNext(): number {
19 | MaterialButtonStylizer.nextButtonClassNameNumber++;
20 | return MaterialButtonStylizer.nextButtonClassNameNumber;
21 | }
22 | }
23 | /**
24 | * Calls the getNext() method of MaterialButtonStylizer class
25 | * @returns the next static number in styles
26 | */
27 | export const getNextClassName = (): number => {
28 | return MaterialButtonStylizer.getNext();
29 | }
30 |
31 | /**
32 | * Creates the ripple effect
33 | * @param event
34 | */
35 | export function createRipple<
36 | T extends HTMLButtonElement | HTMLAnchorElement | HTMLDivElement
37 | >(event: React.MouseEvent, variant: string, color: string) {
38 | const buttonAnchorDiv = event.currentTarget;
39 |
40 | const circle: HTMLSpanElement = document.createElement("span");
41 | const diameter = Math.max(
42 | buttonAnchorDiv.clientWidth,
43 | buttonAnchorDiv.clientHeight
44 | );
45 | const radius = diameter / 2;
46 |
47 | circle.style.width = circle.style.height = `${diameter}px`;
48 | circle.style.left = `${event.clientX - buttonAnchorDiv.offsetLeft - radius
49 | }px`;
50 | circle.style.top = `${event.clientY - buttonAnchorDiv.offsetTop - radius
51 | }px`;
52 | circle.classList.add("ripple");
53 |
54 | if (variant !== "contained") {
55 |
56 | circle.style.backgroundColor = hexColorToRGB(
57 | asureColor(colourNameToHex(color)),
58 | 0.4
59 | );
60 |
61 | } else {
62 |
63 | circle.style.backgroundColor = hexColorToRGB("#ffffff", 0.4);
64 | }
65 | const ripple = buttonAnchorDiv.getElementsByClassName("ripple")[0];
66 | if (ripple) {
67 | ripple.remove();
68 | }
69 | buttonAnchorDiv.appendChild(circle);
70 | }
71 |
72 | export const makeDynamicStyle = (
73 | variant: MaterialButtonProps["variant"],
74 | disabled: MaterialButtonProps["disabled"],
75 | color: MaterialButtonProps["color"],
76 | textColor: MaterialButtonProps["textColor"],
77 | nextClassName: number
78 | ): DynamicSheet => {
79 | let styleSheet: DynamicSheet = {
80 | id: "material-button-styles" + "-" + nextClassName,
81 | sheetRules: [{
82 | className: `material-button.${variant}-${nextClassName}`,
83 | rules: {},
84 | },
85 | {
86 | className: `material-button-root.${variant}-${nextClassName}`,
87 | rules: {},
88 | },],
89 | };
90 | let sheetRules: DynamicSheetRule[] = styleSheet.sheetRules as DynamicSheetRule[];
91 |
92 | if (!disabled) {
93 |
94 | switch (variant) {
95 | case "contained":
96 | sheetRules[0].rules = {
97 | color: asureColor(colourNameToHex(textColor)),
98 | backgroundColor: asureColor(colourNameToHex(color)),
99 | };
100 | sheetRules[1].rules = {
101 | ":hover": {
102 | backgroundColor: darkerColor(
103 | hexColorToRGB(asureColor(colourNameToHex(color)), 1)
104 | ),
105 | },
106 | };
107 | break;
108 | case "outlined":
109 | sheetRules[0].rules = {
110 | border: `1px solid ${hexColorToRGB(
111 | asureColor(colourNameToHex(color)),
112 | 0.5
113 | )}`,
114 | color: asureColor(colourNameToHex(color)),
115 | backgroundColor: "transparent",
116 | };
117 | sheetRules[1].rules = {
118 | ":hover": {
119 | border: `1px solid ${hexColorToRGB(
120 | asureColor(colourNameToHex(color)),
121 | 1
122 | )}`,
123 | backgroundColor: hexColorToRGB(
124 | asureColor(colourNameToHex(color)),
125 | 0.085
126 | ),
127 | },
128 | };
129 | break;
130 | case "text":
131 | sheetRules[0].rules = {
132 | color: asureColor(colourNameToHex(color)),
133 | backgroundColor: "transparent",
134 | };
135 | sheetRules[1].rules = {
136 | ":hover": {
137 | backgroundColor: hexColorToRGB(
138 | asureColor(colourNameToHex(color)),
139 | 0.085
140 | ),
141 | },
142 | };
143 | break;
144 | }
145 | }
146 | styleSheet.sheetRules = sheetRules;
147 | return styleSheet;
148 | }
--------------------------------------------------------------------------------
/tests/MaterialButton.spec.tsx:
--------------------------------------------------------------------------------
1 | import "@testing-library/jest-dom";
2 | import React from "react";
3 | import MaterialButton from "../src/MaterialButton/MaterialButton";
4 |
5 | import { cleanup, fireEvent, render, screen } from "@testing-library/react";
6 | test("Validate css styles from fixed stylesheet", () => {
7 | const { getByTestId } = render(
8 | style css test,
9 | );
10 | expect(screen.getByText("style css test")).toBeInTheDocument();
11 | });
12 |
13 | describe("Validate css styles from props", () => {
14 | it("check 'style props test' to be on the document", () => {
15 | const { getByTestId } = render(
16 | style props test,
17 | );
18 | expect(screen.getByText("style props test")).toBeInTheDocument();
19 | });
20 |
21 | it("check color prop on default variant='contained'", () => {
22 | const { getByTestId } = render(
23 | style props test,
24 | );
25 | const clickButton = getByTestId("material-button");
26 | expect(clickButton).toBeInTheDocument();
27 | expect(clickButton).toHaveStyle("background-color: rgb(220, 20, 60)");
28 | });
29 | it("check variant prop outlined", () => {
30 | const { getByTestId } = render(
31 | style props test,
32 | );
33 | const clickButton = getByTestId("material-button");
34 | expect(clickButton).toBeInTheDocument();
35 | expect(clickButton).toHaveStyle("background-color: transparent");
36 | expect(clickButton.className).toEqual("material-button-root material-button outlined outlined-4 uppercase");
37 | });
38 | it("check variant prop text", () => {
39 | const { getByTestId } = render(
40 | style props test,
41 | );
42 | const clickButton = getByTestId("material-button");
43 | expect(clickButton).toBeInTheDocument();
44 | expect(clickButton).toHaveStyle("background-color: transparent");
45 | });
46 | it("check variant prop that is not considered (default again)", () => {
47 | const { getByTestId } = render(
48 | style props test,
49 | );
50 | const clickButton = getByTestId("material-button");
51 | expect(clickButton).toBeInTheDocument();
52 | expect(clickButton).toHaveStyle("background-color: transparent");
53 | });
54 | });
55 | describe("validate click function,", () => {
56 | it("check onCLick function to be called", () => {
57 | const onClickButton = jest.fn();
58 | const { getByTestId } = render(
59 | style props test,
60 | );
61 |
62 | const clickButton = getByTestId("material-button");
63 | fireEvent.click(clickButton);
64 | expect(onClickButton).toBeCalled();
65 | expect(onClickButton).toBeCalledTimes(1);
66 | });
67 | it("check ripple to be called", () => {
68 | const onClickButton = jest.fn();
69 | const { getByTestId } = render(
70 | style props test,
71 | );
72 |
73 | const clickButton = getByTestId("material-button");
74 | fireEvent.click(clickButton);
75 | expect(onClickButton).toBeCalled();
76 | expect(onClickButton).toBeCalledTimes(1);
77 | });
78 | });
79 |
--------------------------------------------------------------------------------
/tests/MaterialButtonMakeStyles.test.tsx:
--------------------------------------------------------------------------------
1 | import "@testing-library/jest-dom";
2 |
3 | import { cleanup, fireEvent, render, screen } from "@testing-library/react";
4 | import { makeDynamicStyle } from "../src/utils/MaterialButtonMakeStyles";
5 | import { DynamicSheet, DynamicSheetRule } from "@dynamicss/dynamicss";
6 | import {
7 | asureColor,
8 | colourNameToHex,
9 | darkerColor,
10 | hexColorToRGB,
11 | } from "@unlimited-react-components/kernel";
12 | test("Validate makeDynamicStyle for Material Button", () => {
13 | const variant = "contained";
14 | const nextClassName: number = 1;
15 | const disabled: boolean = false;
16 | const color: string = "rgb(45,25,10)";
17 | const textColor: string = "white";
18 |
19 | const result = makeDynamicStyle(variant, disabled, color, textColor, 1);
20 | let expected: DynamicSheet = {
21 | id: "material-button-styles" + "-" + nextClassName,
22 | sheetRules: [
23 | {
24 | className: `material-button.${variant}-${nextClassName}`,
25 | rules: {
26 | color: asureColor(colourNameToHex(textColor)),
27 | backgroundColor: asureColor(colourNameToHex(color)),
28 | },
29 | },
30 | {
31 | className: `material-button-root.${variant}-${nextClassName}`,
32 | rules: {
33 | ":hover": {
34 | backgroundColor: darkerColor(
35 | hexColorToRGB(asureColor(colourNameToHex(color)), 1),
36 | ),
37 | },
38 | },
39 | },
40 | ],
41 | };
42 |
43 | expect(result).toEqual(expected);
44 | });
45 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "declaration": true,
4 | "declarationDir": "build",
5 | "module": "esnext",
6 | "target": "es5",
7 | "lib": ["es6", "dom", "es2016", "es2017"],
8 | "sourceMap": true,
9 | "jsx": "react",
10 | "moduleResolution": "node",
11 | "allowSyntheticDefaultImports": true,
12 | "esModuleInterop": true
13 | },
14 | "include": ["src/**/*"],
15 | "exclude": ["node_modules", "build"],
16 | "baseUrl": "./",
17 | }
18 |
19 |
--------------------------------------------------------------------------------