@atmgrupomaggioli/iris-button 0.2.0 → 0.2.2
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-CHCvKTZA.js → index-Cej08wkk.js} +23 -5
- package/dist/cjs/index-Cej08wkk.js.map +1 -0
- package/dist/cjs/iris-button.cjs.entry.js +6 -3
- package/dist/cjs/iris-button.cjs.entry.js.map +1 -1
- package/dist/cjs/iris-button.cjs.js +2 -2
- 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 +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/iris-button/iris-button.css +8 -0
- package/dist/collection/components/iris-button/iris-button.js +11 -8
- package/dist/collection/components/iris-button/iris-button.js.map +1 -1
- package/dist/components/index.js +30 -4
- package/dist/components/index.js.map +1 -1
- package/dist/components/iris-button.js +5 -2
- package/dist/components/iris-button.js.map +1 -1
- package/dist/esm/{index-CqbIY27k.js → index-BRSjmv8U.js} +23 -5
- package/dist/esm/index-BRSjmv8U.js.map +1 -0
- package/dist/esm/iris-button.entry.js +6 -3
- package/dist/esm/iris-button.entry.js.map +1 -1
- package/dist/esm/iris-button.js +3 -3
- package/dist/esm/iris-button.js.map +1 -1
- package/dist/esm/loader.js +2 -2
- package/dist/iris-button/iris-button.css +1 -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/p-7585a111.entry.js +2 -0
- package/dist/iris-button/p-7585a111.entry.js.map +1 -0
- package/dist/iris-button/p-BRSjmv8U.js +3 -0
- package/dist/iris-button/p-BRSjmv8U.js.map +1 -0
- package/dist/types/stencil-public-runtime.d.ts +21 -0
- package/package.json +4 -7
- package/readme.md +29 -0
- package/dist/cjs/index-CHCvKTZA.js.map +0 -1
- package/dist/esm/index-CqbIY27k.js.map +0 -1
- package/dist/iris-button/p-6aaee13d.entry.js +0 -2
- package/dist/iris-button/p-6aaee13d.entry.js.map +0 -1
- package/dist/iris-button/p-CqbIY27k.js +0 -3
- package/dist/iris-button/p-CqbIY27k.js.map +0 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cej08wkk.js');
|
|
4
4
|
|
|
5
|
-
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{font-size:var(--font-size);padding:8px 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;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 .loading{animation:show-loading 1s 1;display:-ms-flexbox;display:-webkit-box;display:flex;align-items:center;height:calc(var(--font-size-icon) * 1.19)}button .loading svg{animation:spin 1s infinite;color:var(--primary);height:var(--font-size-icon)}button iris-icon{display:-ms-flexbox;display:-webkit-box;display:flex}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=primary] .loading svg{color:var(--company-primary-dark)}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=success] .loading svg{color:var(--company-success-dark)}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=warning] .loading svg{color:var(--company-warning-dark)}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=error] .loading svg{color:var(--company-error-dark)}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[color=basic] .loading svg{color:var(--company-basic-dark)}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)}";
|
|
5
|
+
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.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;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 .loading{animation:show-loading 1s 1;display:-ms-flexbox;display:-webkit-box;display:flex;align-items:center;height:calc(var(--font-size-icon) * 1.19)}button .loading svg{animation:spin 1s infinite;color:var(--primary);height:var(--font-size-icon)}button iris-icon{display:-ms-flexbox;display:-webkit-box;display:flex}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=primary] .loading svg{color:var(--company-primary-dark)}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=success] .loading svg{color:var(--company-success-dark)}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=warning] .loading svg{color:var(--company-warning-dark)}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=error] .loading svg{color:var(--company-error-dark)}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[color=basic] .loading svg{color:var(--company-basic-dark)}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
6
|
|
|
7
7
|
const IrisButton = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -33,6 +33,7 @@ const IrisButton = class {
|
|
|
33
33
|
this.size = 'medium';
|
|
34
34
|
//#endregion
|
|
35
35
|
//#region Handlers
|
|
36
|
+
//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.
|
|
36
37
|
/**
|
|
37
38
|
* Método que se ejecuta al hacer clic y emite el evento.
|
|
38
39
|
* @param ev
|
|
@@ -41,7 +42,9 @@ const IrisButton = class {
|
|
|
41
42
|
// Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.
|
|
42
43
|
this.button.disabled = true;
|
|
43
44
|
setTimeout(() => {
|
|
44
|
-
this.
|
|
45
|
+
if (!this.loading) {
|
|
46
|
+
this.button.disabled = false;
|
|
47
|
+
}
|
|
45
48
|
}, 1000);
|
|
46
49
|
// Lanzamos el evento.
|
|
47
50
|
this.buttonClicked.emit(ev);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"iris-button.entry.cjs.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG
|
|
1
|
+
{"file":"iris-button.entry.cjs.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,+yHAA+yH;;MCOxzH,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAaE;;;AAGG;AAEH,QAAA,IAAK,CAAA,KAAA,GAA0D,SAAS;AASxE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEhB;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAwB,EAAE;AAE9B;;;AAGG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEf;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;;;;AA6B7C;;;AAGG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,EAAS,KAAI;;AAE1B,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,IAAI;YAC3B,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACjB,oBAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,KAAK;;aAE/B,EAAE,IAAI,CAAC;;AAGR,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC;AAC7B,SAAC;AAED;;;AAGG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,EAAS,KAAI;AAC1B,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC;AAC7B,SAAC;AAwDF;;IApDC,MAAM,GAAA;;AAEJ,QAAA,IAAI;YACF,IAAI,CAAC,IAAI,CAAC,KAAK;AAAE,gBAAA,MAAM,yCAAyC;YAChE,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,gBAAA,MAAM,wCAAwC;;QAC9D,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;YAChB;;AAGF,QAAA,QACEA,OAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAA,CAAE,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,MAAM,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EACpD,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA;;QAIf,CAAC,IAAI,CAAC,OAAO,IACXA,OAAA,CAAA,WAAA,EAAA,EAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAc,KAEzDA,OAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,SAAS,EAAA,EAChBA,OAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrEA,OAAA,CAAA,MAAA,EAAA,EACE,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,mHAAmH,EACrH,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,GAAG,EACV,CAAA,EACRA,OAAA,CAAA,MAAA,EAAA,EACE,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,yFAAyF,EAC3F,MAAM,EAAC,cAAc,kBACR,GAAG,EAAA,gBAAA,EACD,OAAO,EAChB,CAAA,CACJ,CACJ,CACL;;QAID,IAAI,CAAC,IAAI,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAEtD;;;;;;;","names":["h"],"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\n // Cambio color animación loading.\n .loading svg {\n color: var(--company-#{$type}-dark);\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 // Animación de carga.\n .loading {\n animation: show-loading 1s 1;\n @include m.flex;\n align-items: center;\n // Los iconos de Material tienen 21px aprox de alto cuando el font-size es de 18.\n height: calc(var(--font-size-icon) * 1.19);\n\n svg {\n animation: spin 1s infinite;\n color: var(--primary);\n height: var(--font-size-icon);\n }\n }\n\n iris-icon {\n @include m.flex;\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 //#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';\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 // 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 try {\n if (!this.label) throw \"No se ha definido la propiedad 'label'.\";\n if (!this.icon) throw \"No se ha definido la propiedad 'icon'.\";\n } catch (e) {\n console.error(e);\n return;\n }\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 <i class=\"loading\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n opacity=\"0.25\"\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n ></path>\n <path\n opacity=\"0.75\"\n d=\"M10 2.2002C5.43552 3.12674 2 7.16224 2 12.0002C2 13.5118 2.3354 14.9451 2.93585 16.2297\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n ></path>\n </svg>\n </i>\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,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cej08wkk.js');
|
|
4
4
|
var appGlobals = require('./app-globals-V2Kpy_OQ.js');
|
|
5
5
|
|
|
6
6
|
var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
|
|
7
7
|
/*
|
|
8
|
-
Stencil Client Patch Browser v4.
|
|
8
|
+
Stencil Client Patch Browser v4.31.0 | MIT Licensed | https://stenciljs.com
|
|
9
9
|
*/
|
|
10
10
|
|
|
11
11
|
var patchBrowser = () => {
|
|
@@ -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.31.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,wBAAa,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\n // Cambio color animación loading.\n .loading svg {\n color: var(--company-#{$type}-dark);\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 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 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 // Animación de carga.\n .loading {\n animation: show-loading 1s 1;\n @include m.flex;\n align-items: center;\n // Los iconos de Material tienen 21px aprox de alto cuando el font-size es de 18.\n height: calc(var(--font-size-icon) * 1.19);\n\n svg {\n animation: spin 1s infinite;\n color: var(--primary);\n height: var(--font-size-icon);\n }\n }\n\n iris-icon {\n @include m.flex;\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 //#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","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\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 /**\n * Método que se ejecuta al hacer clic y emite el evento.\n * @param ev\n */\n handleClick = (ev: Event) => {\n // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.\n this.button.disabled = true;\n setTimeout(() => {\n this.button.disabled = false;\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 try {\n if (!this.label) throw \"No se ha definido la propiedad 'label'.\";\n if (!this.icon) throw \"No se ha definido la propiedad 'icon'.\";\n } catch (e) {\n console.error(e);\n return;\n }\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 <i class=\"loading\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n opacity=\"0.25\"\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n ></path>\n <path\n opacity=\"0.75\"\n d=\"M10 2.2002C5.43552 3.12674 2 7.16224 2 12.0002C2 13.5118 2.3354 14.9451 2.93585 16.2297\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n ></path>\n </svg>\n </i>\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":";;;;AAAA,MAAM,aAAa,GAAG
|
|
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\n // Cambio color animación loading.\n .loading svg {\n color: var(--company-#{$type}-dark);\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 // Animación de carga.\n .loading {\n animation: show-loading 1s 1;\n @include m.flex;\n align-items: center;\n // Los iconos de Material tienen 21px aprox de alto cuando el font-size es de 18.\n height: calc(var(--font-size-icon) * 1.19);\n\n svg {\n animation: spin 1s infinite;\n color: var(--primary);\n height: var(--font-size-icon);\n }\n }\n\n iris-icon {\n @include m.flex;\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 //#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';\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 // 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 try {\n if (!this.label) throw \"No se ha definido la propiedad 'label'.\";\n if (!this.icon) throw \"No se ha definido la propiedad 'icon'.\";\n } catch (e) {\n console.error(e);\n return;\n }\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 <i class=\"loading\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n opacity=\"0.25\"\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n ></path>\n <path\n opacity=\"0.75\"\n d=\"M10 2.2002C5.43552 3.12674 2 7.16224 2 12.0002C2 13.5118 2.3354 14.9451 2.93585 16.2297\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n ></path>\n </svg>\n </i>\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":";;;;AAAA,MAAM,aAAa,GAAG,+yHAA+yH;;MCOxzH,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAaE;;;AAGG;AAEH,QAAA,IAAK,CAAA,KAAA,GAA0D,SAAS;AASxE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEhB;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAwB,EAAE;AAE9B;;;AAGG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEf;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;;;;AA6B7C;;;AAGG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,EAAS,KAAI;;AAE1B,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,IAAI;YAC3B,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACjB,oBAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,KAAK;;aAE/B,EAAE,IAAI,CAAC;;AAGR,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC;AAC7B,SAAC;AAED;;;AAGG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,EAAS,KAAI;AAC1B,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC;AAC7B,SAAC;AAwDF;;IApDC,MAAM,GAAA;;AAEJ,QAAA,IAAI;YACF,IAAI,CAAC,IAAI,CAAC,KAAK;AAAE,gBAAA,MAAM,yCAAyC;YAChE,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,gBAAA,MAAM,wCAAwC;;QAC9D,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;YAChB;;AAGF,QAAA,QACEA,OAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAA,CAAE,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,MAAM,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EACpD,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA;;QAIf,CAAC,IAAI,CAAC,OAAO,IACXA,OAAA,CAAA,WAAA,EAAA,EAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAc,KAEzDA,OAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,SAAS,EAAA,EAChBA,OAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrEA,OAAA,CAAA,MAAA,EAAA,EACE,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,mHAAmH,EACrH,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,GAAG,EACV,CAAA,EACRA,OAAA,CAAA,MAAA,EAAA,EACE,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,yFAAyF,EAC3F,MAAM,EAAC,cAAc,kBACR,GAAG,EAAA,gBAAA,EACD,OAAO,EAChB,CAAA,CACJ,CACJ,CACL;;QAID,IAAI,CAAC,IAAI,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAEtD;;;;;;;"}
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
button {
|
|
22
|
+
width: 100%;
|
|
22
23
|
font-size: var(--font-size);
|
|
23
24
|
padding: 8px 12px;
|
|
24
25
|
color: var(--white);
|
|
@@ -34,6 +35,7 @@ button {
|
|
|
34
35
|
display: -webkit-box;
|
|
35
36
|
display: flex;
|
|
36
37
|
align-items: center;
|
|
38
|
+
justify-content: center;
|
|
37
39
|
cursor: pointer;
|
|
38
40
|
gap: 0.1rem;
|
|
39
41
|
font-family: var(--font-primary);
|
|
@@ -182,4 +184,10 @@ button.large {
|
|
|
182
184
|
button.large[type=fab], button.large[type=icon] {
|
|
183
185
|
height: calc(36px * 1.2);
|
|
184
186
|
width: calc(36px * 1.2);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
@media (min-width: 576px) {
|
|
190
|
+
button {
|
|
191
|
+
width: auto;
|
|
192
|
+
}
|
|
185
193
|
}
|
|
@@ -25,6 +25,7 @@ export class IrisButton {
|
|
|
25
25
|
this.size = 'medium';
|
|
26
26
|
//#endregion
|
|
27
27
|
//#region Handlers
|
|
28
|
+
//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.
|
|
28
29
|
/**
|
|
29
30
|
* Método que se ejecuta al hacer clic y emite el evento.
|
|
30
31
|
* @param ev
|
|
@@ -33,7 +34,9 @@ export class IrisButton {
|
|
|
33
34
|
// Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.
|
|
34
35
|
this.button.disabled = true;
|
|
35
36
|
setTimeout(() => {
|
|
36
|
-
this.
|
|
37
|
+
if (!this.loading) {
|
|
38
|
+
this.button.disabled = false;
|
|
39
|
+
}
|
|
37
40
|
}, 1000);
|
|
38
41
|
// Lanzamos el evento.
|
|
39
42
|
this.buttonClicked.emit(ev);
|
|
@@ -81,6 +84,7 @@ export class IrisButton {
|
|
|
81
84
|
return {
|
|
82
85
|
"label": {
|
|
83
86
|
"type": "string",
|
|
87
|
+
"attribute": "label",
|
|
84
88
|
"mutable": false,
|
|
85
89
|
"complexType": {
|
|
86
90
|
"original": "string",
|
|
@@ -95,11 +99,11 @@ export class IrisButton {
|
|
|
95
99
|
},
|
|
96
100
|
"getter": false,
|
|
97
101
|
"setter": false,
|
|
98
|
-
"attribute": "label",
|
|
99
102
|
"reflect": false
|
|
100
103
|
},
|
|
101
104
|
"color": {
|
|
102
105
|
"type": "string",
|
|
106
|
+
"attribute": "color",
|
|
103
107
|
"mutable": false,
|
|
104
108
|
"complexType": {
|
|
105
109
|
"original": "'primary' | 'success' | 'warning' | 'error' | 'basic'",
|
|
@@ -114,12 +118,12 @@ export class IrisButton {
|
|
|
114
118
|
},
|
|
115
119
|
"getter": false,
|
|
116
120
|
"setter": false,
|
|
117
|
-
"attribute": "color",
|
|
118
121
|
"reflect": false,
|
|
119
122
|
"defaultValue": "'primary'"
|
|
120
123
|
},
|
|
121
124
|
"icon": {
|
|
122
125
|
"type": "string",
|
|
126
|
+
"attribute": "icon",
|
|
123
127
|
"mutable": false,
|
|
124
128
|
"complexType": {
|
|
125
129
|
"original": "string",
|
|
@@ -134,11 +138,11 @@ export class IrisButton {
|
|
|
134
138
|
},
|
|
135
139
|
"getter": false,
|
|
136
140
|
"setter": false,
|
|
137
|
-
"attribute": "icon",
|
|
138
141
|
"reflect": false
|
|
139
142
|
},
|
|
140
143
|
"disabled": {
|
|
141
144
|
"type": "boolean",
|
|
145
|
+
"attribute": "disabled",
|
|
142
146
|
"mutable": false,
|
|
143
147
|
"complexType": {
|
|
144
148
|
"original": "boolean",
|
|
@@ -153,12 +157,12 @@ export class IrisButton {
|
|
|
153
157
|
},
|
|
154
158
|
"getter": false,
|
|
155
159
|
"setter": false,
|
|
156
|
-
"attribute": "disabled",
|
|
157
160
|
"reflect": false,
|
|
158
161
|
"defaultValue": "false"
|
|
159
162
|
},
|
|
160
163
|
"type": {
|
|
161
164
|
"type": "string",
|
|
165
|
+
"attribute": "type",
|
|
162
166
|
"mutable": false,
|
|
163
167
|
"complexType": {
|
|
164
168
|
"original": "'' | 'icon' | 'fab'",
|
|
@@ -173,12 +177,12 @@ export class IrisButton {
|
|
|
173
177
|
},
|
|
174
178
|
"getter": false,
|
|
175
179
|
"setter": false,
|
|
176
|
-
"attribute": "type",
|
|
177
180
|
"reflect": false,
|
|
178
181
|
"defaultValue": "''"
|
|
179
182
|
},
|
|
180
183
|
"loading": {
|
|
181
184
|
"type": "boolean",
|
|
185
|
+
"attribute": "loading",
|
|
182
186
|
"mutable": false,
|
|
183
187
|
"complexType": {
|
|
184
188
|
"original": "boolean",
|
|
@@ -193,12 +197,12 @@ export class IrisButton {
|
|
|
193
197
|
},
|
|
194
198
|
"getter": false,
|
|
195
199
|
"setter": false,
|
|
196
|
-
"attribute": "loading",
|
|
197
200
|
"reflect": false,
|
|
198
201
|
"defaultValue": "false"
|
|
199
202
|
},
|
|
200
203
|
"size": {
|
|
201
204
|
"type": "string",
|
|
205
|
+
"attribute": "size",
|
|
202
206
|
"mutable": false,
|
|
203
207
|
"complexType": {
|
|
204
208
|
"original": "'small' | 'medium' | 'large'",
|
|
@@ -213,7 +217,6 @@ export class IrisButton {
|
|
|
213
217
|
},
|
|
214
218
|
"getter": false,
|
|
215
219
|
"setter": false,
|
|
216
|
-
"attribute": "size",
|
|
217
220
|
"reflect": false,
|
|
218
221
|
"defaultValue": "'medium'"
|
|
219
222
|
}
|
|
@@ -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;AAOxE,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;;;WAGG;QACH,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAC1B,uFAAuF;YACvF,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;YAC5B,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,KAAK,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;AAOxE,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,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;KAwDH;IAtDC,YAAY;IAEZ,MAAM;QACJ,iDAAiD;QACjD,IAAI,CAAC;YACH,IAAI,CAAC,IAAI,CAAC,KAAK;gBAAE,MAAM,yCAAyC,CAAC;YACjE,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE,MAAM,wCAAwC,CAAC;QACjE,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACjB,OAAO;QACT,CAAC;QAED,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,SAAG,KAAK,EAAC,SAAS;gBAChB,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;oBACrE,YACE,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,mHAAmH,EACrH,MAAM,EAAC,cAAc,kBACR,GAAG,GACV;oBACR,YACE,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,yFAAyF,EAC3F,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,GAChB,CACJ,CACJ,CACL;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';\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 // 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 try {\n if (!this.label) throw \"No se ha definido la propiedad 'label'.\";\n if (!this.icon) throw \"No se ha definido la propiedad 'icon'.\";\n } catch (e) {\n console.error(e);\n return;\n }\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 <i class=\"loading\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n opacity=\"0.25\"\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n ></path>\n <path\n opacity=\"0.75\"\n d=\"M10 2.2002C5.43552 3.12674 2 7.16224 2 12.0002C2 13.5118 2.3354 14.9451 2.93585 16.2297\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n ></path>\n </svg>\n </i>\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"]}
|
package/dist/components/index.js
CHANGED
|
@@ -2,7 +2,7 @@ const NAMESPACE = 'iris-button';
|
|
|
2
2
|
const BUILD = /* iris-button */ { hydratedSelectorName: "hydrated", lazyLoad: false, updatable: true, watchCallback: false };
|
|
3
3
|
|
|
4
4
|
/*
|
|
5
|
-
Stencil Client Platform v4.
|
|
5
|
+
Stencil Client Platform v4.31.0 | MIT Licensed | https://stenciljs.com
|
|
6
6
|
*/
|
|
7
7
|
var __defProp = Object.defineProperty;
|
|
8
8
|
var __export = (target, all) => {
|
|
@@ -118,6 +118,11 @@ function queryNonceMetaTagContent(doc) {
|
|
|
118
118
|
return (_c = (_b = (_a = doc.head) == null ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) == null ? void 0 : _b.getAttribute("content")) != null ? _c : void 0;
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
+
// src/utils/regular-expression.ts
|
|
122
|
+
var escapeRegExpSpecialCharacters = (text) => {
|
|
123
|
+
return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
|
124
|
+
};
|
|
125
|
+
|
|
121
126
|
// src/utils/result.ts
|
|
122
127
|
var result_exports = {};
|
|
123
128
|
__export(result_exports, {
|
|
@@ -227,6 +232,18 @@ var newVNode = (tag, text) => {
|
|
|
227
232
|
};
|
|
228
233
|
var Host = {};
|
|
229
234
|
var isHost = (node) => node && node.$tag$ === Host;
|
|
235
|
+
var createSupportsRuleRe = (selector) => {
|
|
236
|
+
const safeSelector2 = escapeRegExpSpecialCharacters(selector);
|
|
237
|
+
return new RegExp(
|
|
238
|
+
// First capture group: match any context before the selector that's not inside @supports selector()
|
|
239
|
+
// Using negative lookahead to avoid matching inside @supports selector(...) condition
|
|
240
|
+
`(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${safeSelector2}))(${safeSelector2}\\b)`,
|
|
241
|
+
"g"
|
|
242
|
+
);
|
|
243
|
+
};
|
|
244
|
+
createSupportsRuleRe("::slotted");
|
|
245
|
+
createSupportsRuleRe(":host");
|
|
246
|
+
createSupportsRuleRe(":host-context");
|
|
230
247
|
var parsePropertyValue = (propValue, propType) => {
|
|
231
248
|
if (propValue != null && !isComplexType(propValue)) {
|
|
232
249
|
if (propType & 4 /* Boolean */) {
|
|
@@ -349,7 +366,7 @@ var attachStyles = (hostRef) => {
|
|
|
349
366
|
const scopeId2 = addStyle(
|
|
350
367
|
elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
|
|
351
368
|
cmpMeta);
|
|
352
|
-
if (
|
|
369
|
+
if (flags & 10 /* needsScopedEncapsulation */) {
|
|
353
370
|
elm["s-sc"] = scopeId2;
|
|
354
371
|
elm.classList.add(scopeId2 + "-h");
|
|
355
372
|
}
|
|
@@ -670,7 +687,8 @@ var insertBefore = (parent, newNode, reference) => {
|
|
|
670
687
|
var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
|
|
671
688
|
const hostElm = hostRef.$hostElement$;
|
|
672
689
|
const oldVNode = hostRef.$vnode$ || newVNode(null, null);
|
|
673
|
-
const
|
|
690
|
+
const isHostElement = isHost(renderFnResults);
|
|
691
|
+
const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults);
|
|
674
692
|
hostTagName = hostElm.tagName;
|
|
675
693
|
if (isInitialLoad && rootVnode.$attrs$) {
|
|
676
694
|
for (const key of Object.keys(rootVnode.$attrs$)) {
|
|
@@ -1097,7 +1115,15 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
|
|
|
1097
1115
|
// src/runtime/platform-options.ts
|
|
1098
1116
|
var setPlatformOptions = (opts) => Object.assign(plt, opts);
|
|
1099
1117
|
|
|
1100
|
-
|
|
1118
|
+
// src/runtime/render.ts
|
|
1119
|
+
function render(vnode, container) {
|
|
1120
|
+
const ref = {
|
|
1121
|
+
$hostElement$: container
|
|
1122
|
+
};
|
|
1123
|
+
renderVdom(ref, vnode);
|
|
1124
|
+
}
|
|
1125
|
+
|
|
1126
|
+
export { H, createEvent as c, getAssetPath, h, proxyCustomElement as p, render, setAssetPath, setNonce, setPlatformOptions };
|
|
1101
1127
|
//# sourceMappingURL=index.js.map
|
|
1102
1128
|
|
|
1103
1129
|
//# sourceMappingURL=index.js.map
|