@atmgrupomaggioli/iris-button 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/LICENSE +21 -0
  2. package/dist/cjs/app-globals-3a1e7e63.js +7 -0
  3. package/dist/cjs/app-globals-3a1e7e63.js.map +1 -0
  4. package/dist/cjs/index-15a93aad.js +1346 -0
  5. package/dist/cjs/index-15a93aad.js.map +1 -0
  6. package/dist/cjs/index.cjs.js +11 -0
  7. package/dist/cjs/index.cjs.js.map +1 -0
  8. package/dist/cjs/iris-button.cjs.entry.js +28 -0
  9. package/dist/cjs/iris-button.cjs.entry.js.map +1 -0
  10. package/dist/cjs/iris-button.cjs.js +27 -0
  11. package/dist/cjs/iris-button.cjs.js.map +1 -0
  12. package/dist/cjs/loader.cjs.js +17 -0
  13. package/dist/cjs/loader.cjs.js.map +1 -0
  14. package/dist/collection/collection-manifest.json +12 -0
  15. package/dist/collection/components/iris-button/iris-button.css +86 -0
  16. package/dist/collection/components/iris-button/iris-button.js +101 -0
  17. package/dist/collection/components/iris-button/iris-button.js.map +1 -0
  18. package/dist/collection/index.js +11 -0
  19. package/dist/collection/index.js.map +1 -0
  20. package/dist/collection/utils/utils.js +4 -0
  21. package/dist/collection/utils/utils.js.map +1 -0
  22. package/dist/components/index.d.ts +33 -0
  23. package/dist/components/index.js +9 -0
  24. package/dist/components/index.js.map +1 -0
  25. package/dist/components/iris-button.d.ts +11 -0
  26. package/dist/components/iris-button.js +47 -0
  27. package/dist/components/iris-button.js.map +1 -0
  28. package/dist/components/p-9678c037.js +1190 -0
  29. package/dist/components/p-9678c037.js.map +1 -0
  30. package/dist/esm/app-globals-0f993ce5.js +5 -0
  31. package/dist/esm/app-globals-0f993ce5.js.map +1 -0
  32. package/dist/esm/index-73dab88a.js +1320 -0
  33. package/dist/esm/index-73dab88a.js.map +1 -0
  34. package/dist/esm/index.js +7 -0
  35. package/dist/esm/index.js.map +1 -0
  36. package/dist/esm/iris-button.entry.js +24 -0
  37. package/dist/esm/iris-button.entry.js.map +1 -0
  38. package/dist/esm/iris-button.js +22 -0
  39. package/dist/esm/iris-button.js.map +1 -0
  40. package/dist/esm/loader.js +13 -0
  41. package/dist/esm/loader.js.map +1 -0
  42. package/dist/index.cjs.js +1 -0
  43. package/dist/index.js +1 -0
  44. package/dist/iris-button/index.esm.js +2 -0
  45. package/dist/iris-button/index.esm.js.map +1 -0
  46. package/dist/iris-button/iris-button.css +1 -0
  47. package/dist/iris-button/iris-button.esm.js +2 -0
  48. package/dist/iris-button/iris-button.esm.js.map +1 -0
  49. package/dist/iris-button/p-cc8752cf.entry.js +2 -0
  50. package/dist/iris-button/p-cc8752cf.entry.js.map +1 -0
  51. package/dist/iris-button/p-e1255160.js +2 -0
  52. package/dist/iris-button/p-e1255160.js.map +1 -0
  53. package/dist/iris-button/p-f582cc7a.js +3 -0
  54. package/dist/iris-button/p-f582cc7a.js.map +1 -0
  55. package/dist/types/components/iris-button/iris-button.d.ts +21 -0
  56. package/dist/types/components.d.ts +69 -0
  57. package/dist/types/index.d.ts +11 -0
  58. package/dist/types/stencil-public-runtime.d.ts +1680 -0
  59. package/dist/types/utils/utils.d.ts +1 -0
  60. package/loader/cdn.js +1 -0
  61. package/loader/index.cjs.js +1 -0
  62. package/loader/index.d.ts +24 -0
  63. package/loader/index.es2017.js +1 -0
  64. package/loader/index.js +2 -0
  65. package/loader/package.json +11 -0
  66. package/package.json +54 -0
  67. package/readme.md +0 -0
@@ -0,0 +1,86 @@
1
+ @charset "UTF-8";
2
+ :host {
3
+ display: inline-block;
4
+ }
5
+
6
+ button {
7
+ padding: 10px 12px;
8
+ color: var(--white);
9
+ background-color: var(--company-primary-dark);
10
+ -webkit-transition: background-color 0.5s ease;
11
+ -ms-transition: background-color 0.5s ease;
12
+ transition: background-color 0.5s ease;
13
+ border: none;
14
+ -webkit-border-radius: 5px;
15
+ -moz-border-radius: 5px;
16
+ border-radius: 5px;
17
+ display: -ms-flexbox;
18
+ display: -webkit-box;
19
+ display: flex;
20
+ align-items: center;
21
+ cursor: pointer;
22
+ gap: 0.1rem;
23
+ /*#region Colores de los botones.*/
24
+ /*Este mixin recibe el tipo
25
+ y se utiliza para concatenar strings, de tal modo que se pasa por parámetro parte de las clases y propiedades.*/
26
+ /*#endregion*/
27
+ }
28
+ button:hover {
29
+ background-color: var(--company-primary-focus);
30
+ }
31
+ button:focus {
32
+ outline: 2px solid var(--blue_light);
33
+ outline-offset: 1px;
34
+ }
35
+ button .material-symbols-outlined,
36
+ button i {
37
+ font-size: var(--font-size-icon);
38
+ }
39
+ button:not(.icon) .material-symbols-outlined {
40
+ margin-right: 5px;
41
+ }
42
+ button.icon {
43
+ -webkit-border-radius: 50%;
44
+ -moz-border-radius: 50%;
45
+ border-radius: 50%;
46
+ height: 36px;
47
+ width: 36px;
48
+ padding: 0;
49
+ display: -ms-flexbox;
50
+ display: -webkit-box;
51
+ display: flex;
52
+ justify-content: center;
53
+ }
54
+ button.success {
55
+ background-color: var(--company-success-dark);
56
+ }
57
+ button.success:hover {
58
+ background-color: var(--company-success-focus);
59
+ }
60
+ button.warning {
61
+ background-color: var(--company-warning-dark);
62
+ }
63
+ button.warning:hover {
64
+ background-color: var(--company-warning-focus);
65
+ }
66
+ button.error {
67
+ background-color: var(--company-error-dark);
68
+ }
69
+ button.error:hover {
70
+ background-color: var(--company-error-focus);
71
+ }
72
+ button.basic {
73
+ background-color: var(--company-basic-light);
74
+ color: var(--company-basic-dark);
75
+ }
76
+ button.basic:hover {
77
+ background-color: var(--company-basic-focus);
78
+ }
79
+ button:disabled {
80
+ background-color: var(--company-basic-focus);
81
+ color: var(--company-basic-light);
82
+ cursor: not-allowed;
83
+ }
84
+ button:disabled:hover {
85
+ background-color: var(--company-basic-focus);
86
+ }
@@ -0,0 +1,101 @@
1
+ import { h } from "@stencil/core";
2
+ export class AtmButton {
3
+ constructor() {
4
+ this.color = '';
5
+ this.icon = undefined;
6
+ this.disabled = false;
7
+ this.isIcon = false;
8
+ }
9
+ render() {
10
+ return (h("button", { key: '7570a5749b80d8f3b46ed979a8b4dac5d7ac210d', class: this.color }, this.icon != null
11
+ ? h("span", { class: "material-symbols-rounded" }, this.icon)
12
+ : "", h("slot", { key: 'ab234a494a6cf24f2d6c453af4db0e362fa67643' })));
13
+ }
14
+ static get is() { return "iris-button"; }
15
+ static get originalStyleUrls() {
16
+ return {
17
+ "$": ["iris-button.scss"]
18
+ };
19
+ }
20
+ static get styleUrls() {
21
+ return {
22
+ "$": ["iris-button.css"]
23
+ };
24
+ }
25
+ static get properties() {
26
+ return {
27
+ "color": {
28
+ "type": "string",
29
+ "mutable": false,
30
+ "complexType": {
31
+ "original": "'' | 'primary' | 'success' | 'warning' | 'error' | 'basic'",
32
+ "resolved": "\"\" | \"basic\" | \"error\" | \"primary\" | \"success\" | \"warning\"",
33
+ "references": {}
34
+ },
35
+ "required": false,
36
+ "optional": false,
37
+ "docs": {
38
+ "tags": [],
39
+ "text": "Indica el tipo de bot\u00F3n ayudando al usuario a explicar su funcionalidad.\nPara ver m\u00E1s informaci\u00F3n al respecto, lea la documentaci\u00F3n del componente."
40
+ },
41
+ "attribute": "color",
42
+ "reflect": false,
43
+ "defaultValue": "''"
44
+ },
45
+ "icon": {
46
+ "type": "string",
47
+ "mutable": false,
48
+ "complexType": {
49
+ "original": "string",
50
+ "resolved": "string",
51
+ "references": {}
52
+ },
53
+ "required": false,
54
+ "optional": false,
55
+ "docs": {
56
+ "tags": [],
57
+ "text": "Icono del bot\u00F3n.\nConsulta todos los iconos disponibles en: https://fonts.google.com/icons"
58
+ },
59
+ "attribute": "icon",
60
+ "reflect": false
61
+ },
62
+ "disabled": {
63
+ "type": "boolean",
64
+ "mutable": false,
65
+ "complexType": {
66
+ "original": "boolean",
67
+ "resolved": "boolean",
68
+ "references": {}
69
+ },
70
+ "required": false,
71
+ "optional": false,
72
+ "docs": {
73
+ "tags": [],
74
+ "text": "Deshabilita el bot\u00F3n para que no pueda ser pulsado."
75
+ },
76
+ "attribute": "disabled",
77
+ "reflect": false,
78
+ "defaultValue": "false"
79
+ },
80
+ "isIcon": {
81
+ "type": "boolean",
82
+ "mutable": false,
83
+ "complexType": {
84
+ "original": "boolean",
85
+ "resolved": "boolean",
86
+ "references": {}
87
+ },
88
+ "required": false,
89
+ "optional": false,
90
+ "docs": {
91
+ "tags": [],
92
+ "text": "Indica el tipo de bot\u00F3n."
93
+ },
94
+ "attribute": "is-icon",
95
+ "reflect": false,
96
+ "defaultValue": "false"
97
+ }
98
+ };
99
+ }
100
+ }
101
+ //# sourceMappingURL=iris-button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"iris-button.js","sourceRoot":"","sources":["../../../src/components/iris-button/iris-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,SAAS;;qBAMgD,EAAE;;wBAa3D,KAAK;sBAMP,KAAK;;IAEd,MAAM;QACJ,OAAO,CACL,+DAAQ,KAAK,EAAE,IAAI,CAAC,KAAK;YAErB,IAAI,CAAC,IAAI,IAAI,IAAI;gBACjB,CAAC,CAAC,YAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,IAAI,CAAQ;gBAC3D,CAAC,CAAC,EAAE;YAEN,8DAAa,CACN,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'iris-button', // Nombre del componente.\n styleUrl: 'iris-button.scss', // [default=null] Ruta de la hoja de estilos del componente.\n shadow: false, // [default=false] Indica si el componente Irá alojado en el DOM o en el ShadowDom.\n})\nexport class AtmButton {\n /**\n * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.\n * Para ver más información al respecto, lea la documentación del componente.\n */\n @Prop()\n color: '' | 'primary' | 'success' | 'warning' | 'error' | 'basic' = '';\n\n /**\n * Icono del botón.\n * Consulta todos los iconos disponibles en: https://fonts.google.com/icons\n */\n @Prop()\n icon: string;\n\n /**\n * Deshabilita el botón para que no pueda ser pulsado.\n */\n @Prop()\n disabled = false;\n\n /**\n * Indica el tipo de botón.\n */\n @Prop()\n isIcon = false;\n\n render() {\n return (\n <button class={this.color}>\n {\n this.icon != null\n ? <span class=\"material-symbols-rounded\">{this.icon}</span>\n : \"\"\n }\n <slot></slot>\n </button>\n );\n }\n}\n"]}
@@ -0,0 +1,11 @@
1
+ /**
2
+ * @fileoverview entry point for your component library
3
+ *
4
+ * This is the entry point for your component library. Use this file to export utilities,
5
+ * constants or data structure that accompany your components.
6
+ *
7
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
8
+ * to consume components of this package as outlined in the `README.md`.
9
+ */
10
+ export { format } from './utils/utils';
11
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC","sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport { format } from './utils/utils';\nexport type * from './components';\n"]}
@@ -0,0 +1,4 @@
1
+ export function format(first, middle, last) {
2
+ return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
3
+ }
4
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa;IACnE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC","sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\n return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n"]}
@@ -0,0 +1,33 @@
1
+ /**
2
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
3
+ * if the path needs to be customized.
4
+ */
5
+ export declare const getAssetPath: (path: string) => string;
6
+
7
+ /**
8
+ * Used to manually set the base path where assets can be found.
9
+ * If the script is used as "module", it's recommended to use "import.meta.url",
10
+ * such as "setAssetPath(import.meta.url)". Other options include
11
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
12
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
13
+ * But do note that this configuration depends on how your script is bundled, or lack of
14
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
15
+ * will have to ensure the static assets are copied to its build directory.
16
+ */
17
+ export declare const setAssetPath: (path: string) => void;
18
+
19
+ /**
20
+ * Used to specify a nonce value that corresponds with an application's CSP.
21
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
22
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
23
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
24
+ * will result in the same behavior.
25
+ */
26
+ export declare const setNonce: (nonce: string) => void
27
+
28
+ export interface SetPlatformOptions {
29
+ raf?: (c: FrameRequestCallback) => number;
30
+ ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
31
+ rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
32
+ }
33
+ export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
@@ -0,0 +1,9 @@
1
+ export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-9678c037.js';
2
+
3
+ function format(first, middle, last) {
4
+ return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
5
+ }
6
+
7
+ export { format };
8
+
9
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"file":"index.js","mappings":";;SAAgB,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa;IACnE,OAAO,CAAC,KAAK,IAAI,EAAE,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,IAAI,GAAG,IAAI,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;AACjF;;;;","names":[],"sources":["src/utils/utils.ts"],"sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\n return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n"],"version":3}
@@ -0,0 +1,11 @@
1
+ import type { Components, JSX } from "../types/components";
2
+
3
+ interface IrisButton extends Components.IrisButton, HTMLElement {}
4
+ export const IrisButton: {
5
+ prototype: IrisButton;
6
+ new (): IrisButton;
7
+ };
8
+ /**
9
+ * Used to define this component and all nested components recursively.
10
+ */
11
+ export const defineCustomElement: () => void;
@@ -0,0 +1,47 @@
1
+ import { p as proxyCustomElement, H, h } from './p-9678c037.js';
2
+
3
+ const irisButtonCss = "@charset \"UTF-8\";:host{display:inline-block}button{padding:10px 12px;color:var(--white);background-color:var(--company-primary-dark);-webkit-transition:background-color 0.5s ease;-ms-transition:background-color 0.5s ease;transition:background-color 0.5s ease;border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:-ms-flexbox;display:-webkit-box;display:flex;align-items:center;cursor:pointer;gap:0.1rem;}button:hover{background-color:var(--company-primary-focus)}button:focus{outline:2px solid var(--blue_light);outline-offset:1px}button .material-symbols-outlined,button i{font-size:var(--font-size-icon)}button:not(.icon) .material-symbols-outlined{margin-right:5px}button.icon{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;height:36px;width:36px;padding:0;display:-ms-flexbox;display:-webkit-box;display:flex;justify-content:center}button.success{background-color:var(--company-success-dark)}button.success:hover{background-color:var(--company-success-focus)}button.warning{background-color:var(--company-warning-dark)}button.warning:hover{background-color:var(--company-warning-focus)}button.error{background-color:var(--company-error-dark)}button.error:hover{background-color:var(--company-error-focus)}button.basic{background-color:var(--company-basic-light);color:var(--company-basic-dark)}button.basic:hover{background-color:var(--company-basic-focus)}button:disabled{background-color:var(--company-basic-focus);color:var(--company-basic-light);cursor:not-allowed}button:disabled:hover{background-color:var(--company-basic-focus)}";
4
+ const IrisButtonStyle0 = irisButtonCss;
5
+
6
+ const AtmButton = /*@__PURE__*/ proxyCustomElement(class AtmButton extends H {
7
+ constructor() {
8
+ super();
9
+ this.__registerHost();
10
+ this.color = '';
11
+ this.icon = undefined;
12
+ this.disabled = false;
13
+ this.isIcon = false;
14
+ }
15
+ render() {
16
+ return (h("button", { key: '7570a5749b80d8f3b46ed979a8b4dac5d7ac210d', class: this.color }, this.icon != null
17
+ ? h("span", { class: "material-symbols-rounded" }, this.icon)
18
+ : "", h("slot", { key: 'ab234a494a6cf24f2d6c453af4db0e362fa67643' })));
19
+ }
20
+ static get style() { return IrisButtonStyle0; }
21
+ }, [4, "iris-button", {
22
+ "color": [1],
23
+ "icon": [1],
24
+ "disabled": [4],
25
+ "isIcon": [4, "is-icon"]
26
+ }]);
27
+ function defineCustomElement$1() {
28
+ if (typeof customElements === "undefined") {
29
+ return;
30
+ }
31
+ const components = ["iris-button"];
32
+ components.forEach(tagName => { switch (tagName) {
33
+ case "iris-button":
34
+ if (!customElements.get(tagName)) {
35
+ customElements.define(tagName, AtmButton);
36
+ }
37
+ break;
38
+ } });
39
+ }
40
+ defineCustomElement$1();
41
+
42
+ const IrisButton = AtmButton;
43
+ const defineCustomElement = defineCustomElement$1;
44
+
45
+ export { IrisButton, defineCustomElement };
46
+
47
+ //# sourceMappingURL=iris-button.js.map
@@ -0,0 +1 @@
1
+ {"file":"iris-button.js","mappings":";;AAAA,MAAM,aAAa,GAAG,4jDAA4jD,CAAC;AACnlD,yBAAe,aAAa;;MCMf,SAAS;;;;qBAMgD,EAAE;;wBAa3D,KAAK;sBAMP,KAAK;;IAEd,MAAM;QACJ,QACE,+DAAQ,KAAK,EAAE,IAAI,CAAC,KAAK,IAErB,IAAI,CAAC,IAAI,IAAI,IAAI;cACf,YAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,IAAI,CAAQ;cACzD,EAAE,EAEN,8DAAa,CACN,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/iris-button/iris-button.scss?tag=iris-button","src/components/iris-button/iris-button.tsx"],"sourcesContent":["@use \"_mixins.scss\" as m;\n\n:host {\n display: inline-block;\n}\n\n// Estilos genéricos para los botones.\nbutton {\n padding: 10px 12px;\n color: var(--white);\n background-color: var(--company-primary-dark);\n @include m.animation(background-color);\n border: none;\n @include m.border-radius(5px);\n @include m.flex;\n align-items: center;\n cursor: pointer;\n gap: .1rem;\n\n &:hover {\n background-color: var(--company-primary-focus);\n }\n\n //Incluye un borde al hacer click y al usar tabs.\n @include m.focus-border;\n\n .material-symbols-outlined,\n i {\n font-size: var(--font-size-icon);\n }\n //Aplica un margen al icono en los botones por defecto para separarlo del texto.\n &:not(.icon) .material-symbols-outlined {\n margin-right: 5px;\n }\n\n //Estilos por defecto de los iconos\n &.icon {\n @include m.border-radius(50%);\n height: 36px;\n width: 36px;\n padding: 0;\n @include m.flex;\n justify-content: center;\n }\n\n /*#region Colores de los botones.*/\n\n /*Este mixin recibe el tipo\n y se utiliza para concatenar strings, de tal modo que se pasa por parámetro parte de las clases y propiedades.*/\n @mixin deco($type) {\n &.#{$type} {\n background-color: var(--company-#{$type}-dark);\n\n &:hover {\n background-color: var(--company-#{$type}-focus);\n }\n }\n }\n\n @include deco(success);\n @include deco(warning);\n @include deco(error);\n\n &.basic {\n background-color: var(--company-basic-light);\n color: var(--company-basic-dark);\n\n &:hover {\n background-color: var(--company-basic-focus);\n }\n }\n // Botón desabilitado + controles de accesibilidad.\n &:disabled {\n background-color: var(--company-basic-focus);\n color: var(--company-basic-light);\n cursor: not-allowed;\n\n &:hover {\n background-color: var(--company-basic-focus);\n }\n }\n /*#endregion*/\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'iris-button', // Nombre del componente.\n styleUrl: 'iris-button.scss', // [default=null] Ruta de la hoja de estilos del componente.\n shadow: false, // [default=false] Indica si el componente Irá alojado en el DOM o en el ShadowDom.\n})\nexport class AtmButton {\n /**\n * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.\n * Para ver más información al respecto, lea la documentación del componente.\n */\n @Prop()\n color: '' | 'primary' | 'success' | 'warning' | 'error' | 'basic' = '';\n\n /**\n * Icono del botón.\n * Consulta todos los iconos disponibles en: https://fonts.google.com/icons\n */\n @Prop()\n icon: string;\n\n /**\n * Deshabilita el botón para que no pueda ser pulsado.\n */\n @Prop()\n disabled = false;\n\n /**\n * Indica el tipo de botón.\n */\n @Prop()\n isIcon = false;\n\n render() {\n return (\n <button class={this.color}>\n {\n this.icon != null\n ? <span class=\"material-symbols-rounded\">{this.icon}</span>\n : \"\"\n }\n <slot></slot>\n </button>\n );\n }\n}\n"],"version":3}