@atmgrupomaggioli/iris-button 0.2.3 → 0.2.5
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.
- package/dist/cjs/index-vCW2wQf6.js +1299 -0
- package/dist/cjs/index-vCW2wQf6.js.map +1 -0
- package/dist/cjs/iris-button.cjs.entry.js +23 -12
- package/dist/cjs/iris-button.cjs.entry.js.map +1 -1
- package/dist/cjs/iris-button.cjs.js +3 -4
- package/dist/cjs/iris-button.cjs.js.map +1 -1
- package/dist/cjs/iris-button.entry.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +2 -3
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/iris-button/iris-button.css +7 -28
- package/dist/collection/components/iris-button/iris-button.js +6 -10
- package/dist/collection/components/iris-button/iris-button.js.map +1 -1
- package/dist/components/index.js +13 -32
- package/dist/components/index.js.map +1 -1
- package/dist/components/iris-button.js +22 -11
- package/dist/components/iris-button.js.map +1 -1
- package/dist/esm/index-DScl31jK.js +1291 -0
- package/dist/esm/index-DScl31jK.js.map +1 -0
- package/dist/esm/iris-button.entry.js +23 -12
- package/dist/esm/iris-button.entry.js.map +1 -1
- package/dist/esm/iris-button.js +3 -4
- package/dist/esm/iris-button.js.map +1 -1
- package/dist/esm/loader.js +2 -3
- package/dist/esm/loader.js.map +1 -1
- package/dist/iris-button/iris-button.css +7 -1
- package/dist/iris-button/iris-button.entry.esm.js.map +1 -1
- package/dist/iris-button/iris-button.esm.js +1 -1
- package/dist/iris-button/iris-button.esm.js.map +1 -1
- package/dist/iris-button/loader.esm.js.map +1 -1
- package/dist/iris-button/p-DScl31jK.js +3 -0
- package/dist/iris-button/p-DScl31jK.js.map +1 -0
- package/dist/iris-button/p-fe0bfee6.entry.js +2 -0
- package/dist/iris-button/p-fe0bfee6.entry.js.map +1 -0
- package/dist/types/components.d.ts +10 -0
- package/dist/types/stencil-public-runtime.d.ts +1 -1
- package/package.json +5 -3
- package/dist/cjs/app-globals-V2Kpy_OQ.js +0 -8
- package/dist/cjs/app-globals-V2Kpy_OQ.js.map +0 -1
- package/dist/cjs/index-Cej08wkk.js +0 -1316
- package/dist/cjs/index-Cej08wkk.js.map +0 -1
- package/dist/esm/app-globals-DQuL1Twl.js +0 -6
- package/dist/esm/app-globals-DQuL1Twl.js.map +0 -1
- package/dist/esm/index-BRSjmv8U.js +0 -1309
- package/dist/esm/index-BRSjmv8U.js.map +0 -1
- package/dist/iris-button/p-7585a111.entry.js +0 -2
- package/dist/iris-button/p-7585a111.entry.js.map +0 -1
- package/dist/iris-button/p-BRSjmv8U.js +0 -3
- package/dist/iris-button/p-BRSjmv8U.js.map +0 -1
- package/dist/iris-button/p-DQuL1Twl.js +0 -2
- package/dist/iris-button/p-DQuL1Twl.js.map +0 -1
|
@@ -1,8 +1,24 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-vCW2wQf6.js');
|
|
4
4
|
|
|
5
|
-
const
|
|
5
|
+
const RequieredPropsUtils = {
|
|
6
|
+
ERROR_REQUIRED_PROP: 'REQUIRED_PROP',
|
|
7
|
+
check(props) {
|
|
8
|
+
const missing = Object.entries(props)
|
|
9
|
+
.filter(([_, value]) => value === undefined)
|
|
10
|
+
.map(([key]) => key);
|
|
11
|
+
if (missing.length > 0) {
|
|
12
|
+
console.error(`${RequieredPropsUtils.ERROR_REQUIRED_PROP}: No se han definido las siguientes propiedades: ${missing.join(', ')}`);
|
|
13
|
+
return false;
|
|
14
|
+
}
|
|
15
|
+
else {
|
|
16
|
+
return true;
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const irisButtonCss = "@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes show-loading{0%{opacity:0}100%{opacity:1}}:host{display:inline-block}button{width:100%;font-size:var(--font-size);padding:8px 12px;color:var(--white);background-color:var(--company-primary-dark);-webkit-transition:background-color 0.2s ease;-ms-transition:background-color 0.2s ease;transition:background-color 0.2s 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;justify-content:center;cursor:pointer;gap:0.1rem;font-family:var(--font-primary)}button:hover{background-color:var(--company-primary-focus)}button:focus{outline:2px solid var(--blue_light);outline-offset:1px}button:not([type=icon],[type=fab]) .material-symbols-rounded,button:not([type=icon],[type=fab]) .loading{margin-right:5px}button[type=fab],button[type=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 iris-icon{display:-ms-flexbox;display:-webkit-box;display:flex}button iris-loading{display:-ms-flexbox;display:-webkit-box;display:flex;height:22px;align-items:center}button[color=primary]{background-color:var(--company-primary-dark)}button[color=primary]:hover{background-color:var(--company-primary-focus)}button[color=primary][type=icon]{background-color:unset;color:var(--company-primary-dark)}button[color=primary][type=icon]:hover{background-color:var(--company-primary-light)}button[color=success]{background-color:var(--company-success-dark)}button[color=success]:hover{background-color:var(--company-success-focus)}button[color=success][type=icon]{background-color:unset;color:var(--company-success-dark)}button[color=success][type=icon]:hover{background-color:var(--company-success-light)}button[color=warning]{background-color:var(--company-warning-dark)}button[color=warning]:hover{background-color:var(--company-warning-focus)}button[color=warning][type=icon]{background-color:unset;color:var(--company-warning-dark)}button[color=warning][type=icon]:hover{background-color:var(--company-warning-light)}button[color=error]{background-color:var(--company-error-dark)}button[color=error]:hover{background-color:var(--company-error-focus)}button[color=error][type=icon]{background-color:unset;color:var(--company-error-dark)}button[color=error][type=icon]:hover{background-color:var(--company-error-light)}button[color=basic]{background-color:var(--company-basic-dark);color:var(--black);background-color:var(--company-basic-light)}button[color=basic]:hover{background-color:var(--company-basic-focus)}button[color=basic][type=icon]{background-color:unset;color:var(--company-basic-dark)}button[color=basic][type=icon]:hover{background-color:var(--company-basic-light)}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)}button.small{font-size:calc(var(--font-size) * 0.8)}button.small[type=fab],button.small[type=icon]{height:calc(36px * 0.8);width:calc(36px * 0.8)}button.large{font-size:calc(var(--font-size) * 1.2)}button.large[type=fab],button.large[type=icon]{height:calc(36px * 1.2);width:calc(36px * 1.2)}@media (min-width: 576px){button{width:auto}}";
|
|
6
22
|
|
|
7
23
|
const IrisButton = class {
|
|
8
24
|
constructor(hostRef) {
|
|
@@ -39,6 +55,8 @@ const IrisButton = class {
|
|
|
39
55
|
* @param ev
|
|
40
56
|
*/
|
|
41
57
|
this.handleClick = (ev) => {
|
|
58
|
+
// Evitamos que el evento burbujee.
|
|
59
|
+
ev.stopPropagation();
|
|
42
60
|
// Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.
|
|
43
61
|
this.button.disabled = true;
|
|
44
62
|
setTimeout(() => {
|
|
@@ -60,19 +78,12 @@ const IrisButton = class {
|
|
|
60
78
|
//#endregion
|
|
61
79
|
render() {
|
|
62
80
|
// Validamos que todos los campos están rellenos.
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
throw "No se ha definido la propiedad 'label'.";
|
|
66
|
-
if (!this.icon)
|
|
67
|
-
throw "No se ha definido la propiedad 'icon'.";
|
|
68
|
-
}
|
|
69
|
-
catch (e) {
|
|
70
|
-
console.error(e);
|
|
81
|
+
const requiredFiles = { label: this.label, icon: this.icon };
|
|
82
|
+
if (!RequieredPropsUtils.check(requiredFiles))
|
|
71
83
|
return;
|
|
72
|
-
}
|
|
73
84
|
return (index.h("button", { class: `${this.size}`, color: this.color, type: this.type, onClick: this.handleClick, disabled: this.disabled || this.loading, onFocus: this.handleFocus, ref: (el) => (this.button = el), title: this.label },
|
|
74
85
|
// Comprobamos si se muestra cargando
|
|
75
|
-
!this.loading ? (index.h("iris-icon", { icon: this.icon, size: this.size })) : (index.h("
|
|
86
|
+
!this.loading ? (index.h("iris-icon", { icon: this.icon, size: this.size })) : (index.h("div", { class: "loading" }, index.h("iris-loading", { size: "small", color: this.color }))),
|
|
76
87
|
// Solo añadimos el label para los botones normales.
|
|
77
88
|
this.type == 'icon' || this.type == 'fab' ? '' : this.label));
|
|
78
89
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"iris-button.entry.cjs.js","mappings":";;;;
|
|
1
|
+
{"file":"iris-button.entry.cjs.js","mappings":"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","names":["h"],"sources":["../iris-utils/dist/esm/required_properties.js","src/components/iris-button/iris-button.scss?tag=iris-button&encapsulation=shadow","src/components/iris-button/iris-button.tsx"],"sourcesContent":["export const RequieredPropsUtils = {\n ERROR_REQUIRED_PROP: 'REQUIRED_PROP',\n check(props) {\n const missing = Object.entries(props)\n .filter(([_, value]) => value === undefined)\n .map(([key]) => key);\n if (missing.length > 0) {\n console.error(`${RequieredPropsUtils.ERROR_REQUIRED_PROP}: No se han definido las siguientes propiedades: ${missing.join(', ')}`);\n return false;\n }\n else {\n return true;\n }\n },\n};\n//# sourceMappingURL=required_properties.js.map","@use '_mixins.scss' as m;\n\n//#region Keyframes\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes show-loading {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n//#endregion\n\n//#region Mixins\n\n// Mixin para los colores.\n@mixin deco($type) {\n &[color='#{$type}'] {\n background-color: var(--company-#{$type}-dark);\n\n @if $type == 'basic' {\n color: var(--black);\n background-color: var(--company-#{$type}-light);\n }\n\n &:hover {\n background-color: var(--company-#{$type}-focus);\n }\n\n // Botones tipo icon.\n &[type='icon'] {\n background-color: unset;\n color: var(--company-#{$type}-dark);\n\n &:hover {\n background-color: var(--company-#{$type}-light);\n }\n }\n }\n}\n\n// Mixin para los tamaños.\n@mixin size-variant($size, $scale) {\n &.#{$size} {\n font-size: calc(var(--font-size) * #{$scale});\n\n // Botones tipo fab e icono.\n &[type='fab'],\n &[type='icon'] {\n height: calc(36px * #{$scale});\n width: calc(36px * #{$scale});\n }\n }\n}\n\n//#endregion\n\n:host {\n display: inline-block;\n}\n\n// Estilos genéricos para los botones.\nbutton {\n // Necesario para que el botón ocupe el 100% en pantallas pequeñas (iris-form).\n width: 100%;\n font-size: var(--font-size);\n padding: 8px 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 justify-content: center;\n cursor: pointer;\n gap: 0.1rem;\n font-family: var(--font-primary);\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 // Aplica un margen al icono en los botones por defecto para separarlo del texto.\n &:not([type='icon'], [type='fab']) {\n .material-symbols-rounded,\n .loading {\n margin-right: 5px;\n }\n }\n\n // Botones tipo fab e icono.\n &[type='fab'],\n &[type='icon'] {\n @include m.border-radius(50%);\n height: 36px;\n width: 36px;\n padding: 0;\n // Centramos el icono.\n @include m.flex;\n justify-content: center;\n }\n\n iris-icon {\n @include m.flex;\n }\n\n iris-loading {\n @include m.flex;\n height: 22px;\n align-items: center;\n }\n\n //#region Colores de los botones\n\n @include deco(primary);\n @include deco(success);\n @include deco(warning);\n @include deco(error);\n @include deco(basic);\n\n // Botón deshabilitado + 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\n //#endregion\n\n //#region Tamaño\n\n @include size-variant(small, 0.8);\n @include size-variant(large, 1.2);\n\n //#endregion\n}\n\n@media (min-width: 576px) {\n button {\n width: auto;\n }\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\nimport { RequieredPropsUtils } from '@atmgrupomaggioli/iris-utils';\n\n@Component({\n tag: 'iris-button',\n styleUrl: 'iris-button.scss',\n shadow: true,\n})\nexport class IrisButton {\n //#region Props\n\n /**\n * Texto del botón.\n */\n @Prop() label!: string;\n\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' = 'primary';\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 * Tipo de botón.\n */\n @Prop()\n type: '' | 'icon' | 'fab' = '';\n\n /**\n * Permite mostrar una animación de carga mientras se realiza alguna acción.\n * Al activarse esta opción, el botón se deshabilita.\n */\n @Prop()\n loading = false;\n\n /**\n * Tamaño del botón.\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n //#endregion\n\n //#region Variables privadas\n\n // Tag <button> del DOM.\n button!: HTMLButtonElement;\n\n //#endregion\n\n //#region Events\n\n /**\n * Evento del botón al ser pulsado.\n */\n @Event({ bubbles: false, composed: false }) buttonClicked: EventEmitter<Event>;\n\n /**\n * Evento del botón al ser enfocado.\n */\n @Event() buttonFocused: EventEmitter<Event>;\n\n //#endregion\n\n //#region Handlers\n\n //FIXME: Cuando loading se pone en true, también debería mantenerse disabled en true hasta que termine. Ahora se pone disabled a false antes de tiempo y rompe el funcionamiento.\n\n /**\n * Método que se ejecuta al hacer clic y emite el evento.\n * @param ev\n */\n handleClick = (ev: Event) => {\n // Evitamos que el evento burbujee.\n ev.stopPropagation();\n\n // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.\n this.button.disabled = true;\n setTimeout(() => {\n if (!this.loading) {\n this.button.disabled = false;\n }\n }, 1000);\n\n // Lanzamos el evento.\n this.buttonClicked.emit(ev);\n };\n\n /**\n * Método que se ejecuta cuando se ha hecho focus en el botón.\n * @param ev\n */\n handleFocus = (ev: Event) => {\n this.buttonFocused.emit(ev);\n };\n\n //#endregion\n\n render() {\n // Validamos que todos los campos están rellenos.\n const requiredFiles: Record<string, any> = { label: this.label, icon: this.icon };\n if (!RequieredPropsUtils.check(requiredFiles)) return;\n\n return (\n <button\n class={`${this.size}`}\n color={this.color}\n type={this.type}\n onClick={this.handleClick}\n disabled={this.disabled || this.loading}\n onFocus={this.handleFocus}\n ref={(el) => (this.button = el as HTMLButtonElement)}\n title={this.label}\n >\n {\n // Comprobamos si se muestra cargando\n !this.loading ? (\n <iris-icon icon={this.icon} size={this.size}></iris-icon>\n ) : (\n <div class=\"loading\">\n <iris-loading size=\"small\" color={this.color}></iris-loading>\n </div>\n )\n }\n {\n // Solo añadimos el label para los botones normales.\n this.type == 'icon' || this.type == 'fab' ? '' : this.label\n }\n </button>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
4
|
-
var appGlobals = require('./app-globals-V2Kpy_OQ.js');
|
|
3
|
+
var index = require('./index-vCW2wQf6.js');
|
|
5
4
|
|
|
6
5
|
var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
|
|
7
6
|
/*
|
|
8
|
-
Stencil Client Patch Browser v4.
|
|
7
|
+
Stencil Client Patch Browser v4.33.0 | MIT Licensed | https://stenciljs.com
|
|
9
8
|
*/
|
|
10
9
|
|
|
11
10
|
var patchBrowser = () => {
|
|
@@ -18,7 +17,7 @@ var patchBrowser = () => {
|
|
|
18
17
|
};
|
|
19
18
|
|
|
20
19
|
patchBrowser().then(async (options) => {
|
|
21
|
-
await
|
|
20
|
+
await index.globalScripts();
|
|
22
21
|
return index.bootstrapLazy([["iris-button.cjs",[[1,"iris-button",{"label":[1],"color":[1],"icon":[1],"disabled":[4],"type":[1],"loading":[4],"size":[1]}]]]], options);
|
|
23
22
|
});
|
|
24
23
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iris-button.cjs.js","sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.
|
|
1
|
+
{"version":3,"file":"iris-button.cjs.js","sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.33.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":["promiseResolve","globalScripts","bootstrapLazy"],"mappings":";;;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,oQAAe;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iris-button.entry.cjs.js","sources":["src/components/iris-button/iris-button.scss?tag=iris-button&encapsulation=shadow","src/components/iris-button/iris-button.tsx"],"sourcesContent":["@use '_mixins.scss' as m;\n\n//#region Keyframes\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes show-loading {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n//#endregion\n\n//#region Mixins\n\n// Mixin para los colores.\n@mixin deco($type) {\n &[color='#{$type}'] {\n background-color: var(--company-#{$type}-dark);\n\n @if $type == 'basic' {\n color: var(--black);\n background-color: var(--company-#{$type}-light);\n }\n\n &:hover {\n background-color: var(--company-#{$type}-focus);\n }\n\n // Botones tipo icon.\n &[type='icon'] {\n background-color: unset;\n color: var(--company-#{$type}-dark);\n\n &:hover {\n background-color: var(--company-#{$type}-light);\n }\n }\n
|
|
1
|
+
{"version":3,"file":"iris-button.entry.cjs.js","sources":["../iris-utils/dist/esm/required_properties.js","src/components/iris-button/iris-button.scss?tag=iris-button&encapsulation=shadow","src/components/iris-button/iris-button.tsx"],"sourcesContent":["export const RequieredPropsUtils = {\n ERROR_REQUIRED_PROP: 'REQUIRED_PROP',\n check(props) {\n const missing = Object.entries(props)\n .filter(([_, value]) => value === undefined)\n .map(([key]) => key);\n if (missing.length > 0) {\n console.error(`${RequieredPropsUtils.ERROR_REQUIRED_PROP}: No se han definido las siguientes propiedades: ${missing.join(', ')}`);\n return false;\n }\n else {\n return true;\n }\n },\n};\n//# sourceMappingURL=required_properties.js.map","@use '_mixins.scss' as m;\n\n//#region Keyframes\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes show-loading {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n//#endregion\n\n//#region Mixins\n\n// Mixin para los colores.\n@mixin deco($type) {\n &[color='#{$type}'] {\n background-color: var(--company-#{$type}-dark);\n\n @if $type == 'basic' {\n color: var(--black);\n background-color: var(--company-#{$type}-light);\n }\n\n &:hover {\n background-color: var(--company-#{$type}-focus);\n }\n\n // Botones tipo icon.\n &[type='icon'] {\n background-color: unset;\n color: var(--company-#{$type}-dark);\n\n &:hover {\n background-color: var(--company-#{$type}-light);\n }\n }\n }\n}\n\n// Mixin para los tamaños.\n@mixin size-variant($size, $scale) {\n &.#{$size} {\n font-size: calc(var(--font-size) * #{$scale});\n\n // Botones tipo fab e icono.\n &[type='fab'],\n &[type='icon'] {\n height: calc(36px * #{$scale});\n width: calc(36px * #{$scale});\n }\n }\n}\n\n//#endregion\n\n:host {\n display: inline-block;\n}\n\n// Estilos genéricos para los botones.\nbutton {\n // Necesario para que el botón ocupe el 100% en pantallas pequeñas (iris-form).\n width: 100%;\n font-size: var(--font-size);\n padding: 8px 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 justify-content: center;\n cursor: pointer;\n gap: 0.1rem;\n font-family: var(--font-primary);\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 // Aplica un margen al icono en los botones por defecto para separarlo del texto.\n &:not([type='icon'], [type='fab']) {\n .material-symbols-rounded,\n .loading {\n margin-right: 5px;\n }\n }\n\n // Botones tipo fab e icono.\n &[type='fab'],\n &[type='icon'] {\n @include m.border-radius(50%);\n height: 36px;\n width: 36px;\n padding: 0;\n // Centramos el icono.\n @include m.flex;\n justify-content: center;\n }\n\n iris-icon {\n @include m.flex;\n }\n\n iris-loading {\n @include m.flex;\n height: 22px;\n align-items: center;\n }\n\n //#region Colores de los botones\n\n @include deco(primary);\n @include deco(success);\n @include deco(warning);\n @include deco(error);\n @include deco(basic);\n\n // Botón deshabilitado + 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\n //#endregion\n\n //#region Tamaño\n\n @include size-variant(small, 0.8);\n @include size-variant(large, 1.2);\n\n //#endregion\n}\n\n@media (min-width: 576px) {\n button {\n width: auto;\n }\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\nimport { RequieredPropsUtils } from '@atmgrupomaggioli/iris-utils';\n\n@Component({\n tag: 'iris-button',\n styleUrl: 'iris-button.scss',\n shadow: true,\n})\nexport class IrisButton {\n //#region Props\n\n /**\n * Texto del botón.\n */\n @Prop() label!: string;\n\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' = 'primary';\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 * Tipo de botón.\n */\n @Prop()\n type: '' | 'icon' | 'fab' = '';\n\n /**\n * Permite mostrar una animación de carga mientras se realiza alguna acción.\n * Al activarse esta opción, el botón se deshabilita.\n */\n @Prop()\n loading = false;\n\n /**\n * Tamaño del botón.\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n //#endregion\n\n //#region Variables privadas\n\n // Tag <button> del DOM.\n button!: HTMLButtonElement;\n\n //#endregion\n\n //#region Events\n\n /**\n * Evento del botón al ser pulsado.\n */\n @Event({ bubbles: false, composed: false }) buttonClicked: EventEmitter<Event>;\n\n /**\n * Evento del botón al ser enfocado.\n */\n @Event() buttonFocused: EventEmitter<Event>;\n\n //#endregion\n\n //#region Handlers\n\n //FIXME: Cuando loading se pone en true, también debería mantenerse disabled en true hasta que termine. Ahora se pone disabled a false antes de tiempo y rompe el funcionamiento.\n\n /**\n * Método que se ejecuta al hacer clic y emite el evento.\n * @param ev\n */\n handleClick = (ev: Event) => {\n // Evitamos que el evento burbujee.\n ev.stopPropagation();\n\n // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.\n this.button.disabled = true;\n setTimeout(() => {\n if (!this.loading) {\n this.button.disabled = false;\n }\n }, 1000);\n\n // Lanzamos el evento.\n this.buttonClicked.emit(ev);\n };\n\n /**\n * Método que se ejecuta cuando se ha hecho focus en el botón.\n * @param ev\n */\n handleFocus = (ev: Event) => {\n this.buttonFocused.emit(ev);\n };\n\n //#endregion\n\n render() {\n // Validamos que todos los campos están rellenos.\n const requiredFiles: Record<string, any> = { label: this.label, icon: this.icon };\n if (!RequieredPropsUtils.check(requiredFiles)) return;\n\n return (\n <button\n class={`${this.size}`}\n color={this.color}\n type={this.type}\n onClick={this.handleClick}\n disabled={this.disabled || this.loading}\n onFocus={this.handleFocus}\n ref={(el) => (this.button = el as HTMLButtonElement)}\n title={this.label}\n >\n {\n // Comprobamos si se muestra cargando\n !this.loading ? (\n <iris-icon icon={this.icon} size={this.size}></iris-icon>\n ) : (\n <div class=\"loading\">\n <iris-loading size=\"small\" color={this.color}></iris-loading>\n </div>\n )\n }\n {\n // Solo añadimos el label para los botones normales.\n this.type == 'icon' || this.type == 'fab' ? '' : this.label\n }\n </button>\n );\n }\n}\n"],"names":["h"],"mappings":"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"}
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
4
|
-
var appGlobals = require('./app-globals-V2Kpy_OQ.js');
|
|
3
|
+
var index = require('./index-vCW2wQf6.js');
|
|
5
4
|
|
|
6
5
|
const defineCustomElements = async (win, options) => {
|
|
7
6
|
if (typeof window === 'undefined') return undefined;
|
|
8
|
-
await
|
|
7
|
+
await index.globalScripts();
|
|
9
8
|
return index.bootstrapLazy([["iris-button.cjs",[[1,"iris-button",{"label":[1],"color":[1],"icon":[1],"disabled":[4],"type":[1],"loading":[4],"size":[1]}]]]], options);
|
|
10
9
|
};
|
|
11
10
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loader.cjs.js","sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n if (typeof window === 'undefined') return undefined;\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"names":["globalScripts","bootstrapLazy"],"mappings":"
|
|
1
|
+
{"version":3,"file":"loader.cjs.js","sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n if (typeof window === 'undefined') return undefined;\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"names":["globalScripts","bootstrapLazy"],"mappings":";;;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS;AACrD,EAAE,MAAMA,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D;;;;;"}
|
|
@@ -24,9 +24,9 @@ button {
|
|
|
24
24
|
padding: 8px 12px;
|
|
25
25
|
color: var(--white);
|
|
26
26
|
background-color: var(--company-primary-dark);
|
|
27
|
-
-webkit-transition: background-color 0.
|
|
28
|
-
-ms-transition: background-color 0.
|
|
29
|
-
transition: background-color 0.
|
|
27
|
+
-webkit-transition: background-color 0.2s ease;
|
|
28
|
+
-ms-transition: background-color 0.2s ease;
|
|
29
|
+
transition: background-color 0.2s ease;
|
|
30
30
|
border: none;
|
|
31
31
|
-webkit-border-radius: 5px;
|
|
32
32
|
-moz-border-radius: 5px;
|
|
@@ -63,23 +63,17 @@ button[type=fab], button[type=icon] {
|
|
|
63
63
|
display: flex;
|
|
64
64
|
justify-content: center;
|
|
65
65
|
}
|
|
66
|
-
button
|
|
67
|
-
animation: show-loading 1s 1;
|
|
66
|
+
button iris-icon {
|
|
68
67
|
display: -ms-flexbox;
|
|
69
68
|
display: -webkit-box;
|
|
70
69
|
display: flex;
|
|
71
|
-
align-items: center;
|
|
72
|
-
height: calc(var(--font-size-icon) * 1.19);
|
|
73
70
|
}
|
|
74
|
-
button
|
|
75
|
-
animation: spin 1s infinite;
|
|
76
|
-
color: var(--primary);
|
|
77
|
-
height: var(--font-size-icon);
|
|
78
|
-
}
|
|
79
|
-
button iris-icon {
|
|
71
|
+
button iris-loading {
|
|
80
72
|
display: -ms-flexbox;
|
|
81
73
|
display: -webkit-box;
|
|
82
74
|
display: flex;
|
|
75
|
+
height: 22px;
|
|
76
|
+
align-items: center;
|
|
83
77
|
}
|
|
84
78
|
button[color=primary] {
|
|
85
79
|
background-color: var(--company-primary-dark);
|
|
@@ -94,9 +88,6 @@ button[color=primary][type=icon] {
|
|
|
94
88
|
button[color=primary][type=icon]:hover {
|
|
95
89
|
background-color: var(--company-primary-light);
|
|
96
90
|
}
|
|
97
|
-
button[color=primary] .loading svg {
|
|
98
|
-
color: var(--company-primary-dark);
|
|
99
|
-
}
|
|
100
91
|
button[color=success] {
|
|
101
92
|
background-color: var(--company-success-dark);
|
|
102
93
|
}
|
|
@@ -110,9 +101,6 @@ button[color=success][type=icon] {
|
|
|
110
101
|
button[color=success][type=icon]:hover {
|
|
111
102
|
background-color: var(--company-success-light);
|
|
112
103
|
}
|
|
113
|
-
button[color=success] .loading svg {
|
|
114
|
-
color: var(--company-success-dark);
|
|
115
|
-
}
|
|
116
104
|
button[color=warning] {
|
|
117
105
|
background-color: var(--company-warning-dark);
|
|
118
106
|
}
|
|
@@ -126,9 +114,6 @@ button[color=warning][type=icon] {
|
|
|
126
114
|
button[color=warning][type=icon]:hover {
|
|
127
115
|
background-color: var(--company-warning-light);
|
|
128
116
|
}
|
|
129
|
-
button[color=warning] .loading svg {
|
|
130
|
-
color: var(--company-warning-dark);
|
|
131
|
-
}
|
|
132
117
|
button[color=error] {
|
|
133
118
|
background-color: var(--company-error-dark);
|
|
134
119
|
}
|
|
@@ -142,9 +127,6 @@ button[color=error][type=icon] {
|
|
|
142
127
|
button[color=error][type=icon]:hover {
|
|
143
128
|
background-color: var(--company-error-light);
|
|
144
129
|
}
|
|
145
|
-
button[color=error] .loading svg {
|
|
146
|
-
color: var(--company-error-dark);
|
|
147
|
-
}
|
|
148
130
|
button[color=basic] {
|
|
149
131
|
background-color: var(--company-basic-dark);
|
|
150
132
|
color: var(--black);
|
|
@@ -160,9 +142,6 @@ button[color=basic][type=icon] {
|
|
|
160
142
|
button[color=basic][type=icon]:hover {
|
|
161
143
|
background-color: var(--company-basic-light);
|
|
162
144
|
}
|
|
163
|
-
button[color=basic] .loading svg {
|
|
164
|
-
color: var(--company-basic-dark);
|
|
165
|
-
}
|
|
166
145
|
button:disabled {
|
|
167
146
|
background-color: var(--company-basic-focus);
|
|
168
147
|
color: var(--company-basic-light);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
|
+
import { RequieredPropsUtils } from "@atmgrupomaggioli/iris-utils";
|
|
2
3
|
export class IrisButton {
|
|
3
4
|
constructor() {
|
|
4
5
|
/**
|
|
@@ -31,6 +32,8 @@ export class IrisButton {
|
|
|
31
32
|
* @param ev
|
|
32
33
|
*/
|
|
33
34
|
this.handleClick = (ev) => {
|
|
35
|
+
// Evitamos que el evento burbujee.
|
|
36
|
+
ev.stopPropagation();
|
|
34
37
|
// Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.
|
|
35
38
|
this.button.disabled = true;
|
|
36
39
|
setTimeout(() => {
|
|
@@ -52,19 +55,12 @@ export class IrisButton {
|
|
|
52
55
|
//#endregion
|
|
53
56
|
render() {
|
|
54
57
|
// Validamos que todos los campos están rellenos.
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
throw "No se ha definido la propiedad 'label'.";
|
|
58
|
-
if (!this.icon)
|
|
59
|
-
throw "No se ha definido la propiedad 'icon'.";
|
|
60
|
-
}
|
|
61
|
-
catch (e) {
|
|
62
|
-
console.error(e);
|
|
58
|
+
const requiredFiles = { label: this.label, icon: this.icon };
|
|
59
|
+
if (!RequieredPropsUtils.check(requiredFiles))
|
|
63
60
|
return;
|
|
64
|
-
}
|
|
65
61
|
return (h("button", { class: `${this.size}`, color: this.color, type: this.type, onClick: this.handleClick, disabled: this.disabled || this.loading, onFocus: this.handleFocus, ref: (el) => (this.button = el), title: this.label },
|
|
66
62
|
// Comprobamos si se muestra cargando
|
|
67
|
-
!this.loading ? (h("iris-icon", { icon: this.icon, size: this.size })) : (h("
|
|
63
|
+
!this.loading ? (h("iris-icon", { icon: this.icon, size: this.size })) : (h("div", { class: "loading" }, h("iris-loading", { size: "small", color: this.color }))),
|
|
68
64
|
// Solo añadimos el label para los botones normales.
|
|
69
65
|
this.type == 'icon' || this.type == 'fab' ? '' : this.label));
|
|
70
66
|
}
|
|
@@ -1 +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,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;
|
|
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,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAOnE,MAAM,OAAO,UAAU;IALvB;QAaE;;;WAGG;QAEH,UAAK,GAA0D,SAAS,CAAC;QASzE;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;WAEG;QAEH,SAAI,GAAwB,EAAE,CAAC;QAE/B;;;WAGG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;WAEG;QAEH,SAAI,GAAiC,QAAQ,CAAC;QAuB9C,YAAY;QAEZ,kBAAkB;QAElB,iLAAiL;QAEjL;;;WAGG;QACH,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAC1B,mCAAmC;YACnC,EAAE,CAAC,eAAe,EAAE,CAAC;YAErB,uFAAuF;YACvF,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;YAC5B,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;oBAClB,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC;gBAC/B,CAAC;YACH,CAAC,EAAE,IAAI,CAAC,CAAC;YAET,sBAAsB;YACtB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEF;;;WAGG;QACH,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC9B,CAAC,CAAC;KAqCH;IAnCC,YAAY;IAEZ,MAAM;QACJ,iDAAiD;QACjD,MAAM,aAAa,GAAwB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;QAClF,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,aAAa,CAAC;YAAE,OAAO;QAEtD,OAAO,CACL,cACE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EACvC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EACpD,KAAK,EAAE,IAAI,CAAC,KAAK;YAGf,qCAAqC;YACrC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,iBAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc,CAC1D,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,SAAS;gBAClB,oBAAc,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAiB,CACzD,CACP;YAGD,oDAAoD;YACpD,IAAI,CAAC,IAAI,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAEtD,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\nimport { RequieredPropsUtils } from '@atmgrupomaggioli/iris-utils';\n\n@Component({\n tag: 'iris-button',\n styleUrl: 'iris-button.scss',\n shadow: true,\n})\nexport class IrisButton {\n //#region Props\n\n /**\n * Texto del botón.\n */\n @Prop() label!: string;\n\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' = 'primary';\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 * Tipo de botón.\n */\n @Prop()\n type: '' | 'icon' | 'fab' = '';\n\n /**\n * Permite mostrar una animación de carga mientras se realiza alguna acción.\n * Al activarse esta opción, el botón se deshabilita.\n */\n @Prop()\n loading = false;\n\n /**\n * Tamaño del botón.\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n //#endregion\n\n //#region Variables privadas\n\n // Tag <button> del DOM.\n button!: HTMLButtonElement;\n\n //#endregion\n\n //#region Events\n\n /**\n * Evento del botón al ser pulsado.\n */\n @Event({ bubbles: false, composed: false }) buttonClicked: EventEmitter<Event>;\n\n /**\n * Evento del botón al ser enfocado.\n */\n @Event() buttonFocused: EventEmitter<Event>;\n\n //#endregion\n\n //#region Handlers\n\n //FIXME: Cuando loading se pone en true, también debería mantenerse disabled en true hasta que termine. Ahora se pone disabled a false antes de tiempo y rompe el funcionamiento.\n\n /**\n * Método que se ejecuta al hacer clic y emite el evento.\n * @param ev\n */\n handleClick = (ev: Event) => {\n // Evitamos que el evento burbujee.\n ev.stopPropagation();\n\n // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.\n this.button.disabled = true;\n setTimeout(() => {\n if (!this.loading) {\n this.button.disabled = false;\n }\n }, 1000);\n\n // Lanzamos el evento.\n this.buttonClicked.emit(ev);\n };\n\n /**\n * Método que se ejecuta cuando se ha hecho focus en el botón.\n * @param ev\n */\n handleFocus = (ev: Event) => {\n this.buttonFocused.emit(ev);\n };\n\n //#endregion\n\n render() {\n // Validamos que todos los campos están rellenos.\n const requiredFiles: Record<string, any> = { label: this.label, icon: this.icon };\n if (!RequieredPropsUtils.check(requiredFiles)) return;\n\n return (\n <button\n class={`${this.size}`}\n color={this.color}\n type={this.type}\n onClick={this.handleClick}\n disabled={this.disabled || this.loading}\n onFocus={this.handleFocus}\n ref={(el) => (this.button = el as HTMLButtonElement)}\n title={this.label}\n >\n {\n // Comprobamos si se muestra cargando\n !this.loading ? (\n <iris-icon icon={this.icon} size={this.size}></iris-icon>\n ) : (\n <div class=\"loading\">\n <iris-loading size=\"small\" color={this.color}></iris-loading>\n </div>\n )\n }\n {\n // Solo añadimos el label para los botones normales.\n this.type == 'icon' || this.type == 'fab' ? '' : this.label\n }\n </button>\n );\n }\n}\n"]}
|