@atmgrupomaggioli/iris-button 0.2.2 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/cjs/iris-button.cjs.entry.js +21 -10
  2. package/dist/cjs/iris-button.cjs.entry.js.map +1 -1
  3. package/dist/cjs/iris-button.entry.cjs.js.map +1 -1
  4. package/dist/collection/components/iris-button/iris-button.css +3 -3
  5. package/dist/collection/components/iris-button/iris-button.js +5 -9
  6. package/dist/collection/components/iris-button/iris-button.js.map +1 -1
  7. package/dist/components/iris-button.js +21 -10
  8. package/dist/components/iris-button.js.map +1 -1
  9. package/dist/esm/iris-button.entry.js +21 -10
  10. package/dist/esm/iris-button.entry.js.map +1 -1
  11. package/dist/iris-button/iris-button.css +1 -1
  12. package/dist/iris-button/iris-button.entry.esm.js.map +1 -1
  13. package/dist/iris-button/iris-button.esm.js +1 -1
  14. package/dist/iris-button/p-25d399b6.entry.js +2 -0
  15. package/dist/iris-button/p-25d399b6.entry.js.map +1 -0
  16. package/package.json +6 -6
  17. package/dist/iris-button/p-7585a111.entry.js +0 -2
  18. package/dist/iris-button/p-7585a111.entry.js.map +0 -1
package/dist/cjs/iris-button.cjs.entry.js CHANGED
@@ -2,7 +2,23 @@
2
2
 
3
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{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}}";
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 .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
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,16 +78,9 @@ const IrisButton = class {
60
78
  //#endregion
61
79
  render() {
62
80
  // Validamos que todos los campos están rellenos.
63
- try {
64
- if (!this.label)
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
86
  !this.loading ? (index.h("iris-icon", { icon: this.icon, size: this.size })) : (index.h("i", { class: "loading" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { opacity: "0.25", 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", stroke: "currentColor", "stroke-width": "4" }), index.h("path", { opacity: "0.75", d: "M10 2.2002C5.43552 3.12674 2 7.16224 2 12.0002C2 13.5118 2.3354 14.9451 2.93585 16.2297", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" })))),
package/dist/cjs/iris-button.cjs.entry.js.map CHANGED
@@ -1 +1 @@
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
+ {"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 // 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';\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 <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}
package/dist/cjs/iris-button.entry.cjs.js.map CHANGED
@@ -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 // 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;;;;;;;"}
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 // 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';\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 <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":"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"}
package/dist/collection/components/iris-button/iris-button.css CHANGED
@@ -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.5s ease;
28
- -ms-transition: background-color 0.5s ease;
29
- transition: background-color 0.5s ease;
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;
package/dist/collection/components/iris-button/iris-button.js CHANGED
@@ -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,16 +55,9 @@ export class IrisButton {
52
55
  //#endregion
53
56
  render() {
54
57
  // Validamos que todos los campos están rellenos.
55
- try {
56
- if (!this.label)
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
63
  !this.loading ? (h("iris-icon", { icon: this.icon, size: this.size })) : (h("i", { class: "loading" }, h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { opacity: "0.25", 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", stroke: "currentColor", "stroke-width": "4" }), h("path", { opacity: "0.75", d: "M10 2.2002C5.43552 3.12674 2 7.16224 2 12.0002C2 13.5118 2.3354 14.9451 2.93585 16.2297", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" })))),
package/dist/collection/components/iris-button/iris-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"iris-button.js","sourceRoot":"","sources":["../../../src/components/iris-button/iris-button.tsx"],"names":[],"mappings":"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","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"]}
1
+ {"version":3,"file":"iris-button.js","sourceRoot":"","sources":["../../../src/components/iris-button/iris-button.tsx"],"names":[],"mappings":"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","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 <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/iris-button.js CHANGED
@@ -1,6 +1,22 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
2
2
 
3
- 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}}";
3
+ const RequieredPropsUtils = {
4
+ ERROR_REQUIRED_PROP: 'REQUIRED_PROP',
5
+ check(props) {
6
+ const missing = Object.entries(props)
7
+ .filter(([_, value]) => value === undefined)
8
+ .map(([key]) => key);
9
+ if (missing.length > 0) {
10
+ console.error(`${RequieredPropsUtils.ERROR_REQUIRED_PROP}: No se han definido las siguientes propiedades: ${missing.join(', ')}`);
11
+ return false;
12
+ }
13
+ else {
14
+ return true;
15
+ }
16
+ },
17
+ };
18
+
19
+ 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 .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}}";
4
20
 
5
21
  const IrisButton$1 = /*@__PURE__*/ proxyCustomElement(class IrisButton extends H {
6
22
  constructor() {
@@ -39,6 +55,8 @@ const IrisButton$1 = /*@__PURE__*/ proxyCustomElement(class IrisButton extends H
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,16 +78,9 @@ const IrisButton$1 = /*@__PURE__*/ proxyCustomElement(class IrisButton extends H
60
78
  //#endregion
61
79
  render() {
62
80
  // Validamos que todos los campos están rellenos.
63
- try {
64
- if (!this.label)
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 (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
86
  !this.loading ? (h("iris-icon", { icon: this.icon, size: this.size })) : (h("i", { class: "loading" }, h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { opacity: "0.25", 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", stroke: "currentColor", "stroke-width": "4" }), h("path", { opacity: "0.75", d: "M10 2.2002C5.43552 3.12674 2 7.16224 2 12.0002C2 13.5118 2.3354 14.9451 2.93585 16.2297", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" })))),
package/dist/components/iris-button.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"iris-button.js","mappings":"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","names":["IrisButton","__stencil_proxyCustomElement","HTMLElement"],"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
+ {"file":"iris-button.js","mappings":"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","names":["IrisButton","__stencil_proxyCustomElement","HTMLElement"],"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 // 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';\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 <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}
package/dist/esm/iris-button.entry.js CHANGED
@@ -1,6 +1,22 @@
1
1
  import { r as registerInstance, c as createEvent, h } from './index-BRSjmv8U.js';
2
2
 
3
- 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}}";
3
+ const RequieredPropsUtils = {
4
+ ERROR_REQUIRED_PROP: 'REQUIRED_PROP',
5
+ check(props) {
6
+ const missing = Object.entries(props)
7
+ .filter(([_, value]) => value === undefined)
8
+ .map(([key]) => key);
9
+ if (missing.length > 0) {
10
+ console.error(`${RequieredPropsUtils.ERROR_REQUIRED_PROP}: No se han definido las siguientes propiedades: ${missing.join(', ')}`);
11
+ return false;
12
+ }
13
+ else {
14
+ return true;
15
+ }
16
+ },
17
+ };
18
+
19
+ 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 .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}}";
4
20
 
5
21
  const IrisButton = class {
6
22
  constructor(hostRef) {
@@ -37,6 +53,8 @@ const IrisButton = class {
37
53
  * @param ev
38
54
  */
39
55
  this.handleClick = (ev) => {
56
+ // Evitamos que el evento burbujee.
57
+ ev.stopPropagation();
40
58
  // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.
41
59
  this.button.disabled = true;
42
60
  setTimeout(() => {
@@ -58,16 +76,9 @@ const IrisButton = class {
58
76
  //#endregion
59
77
  render() {
60
78
  // Validamos que todos los campos están rellenos.
61
- try {
62
- if (!this.label)
63
- throw "No se ha definido la propiedad 'label'.";
64
- if (!this.icon)
65
- throw "No se ha definido la propiedad 'icon'.";
66
- }
67
- catch (e) {
68
- console.error(e);
79
+ const requiredFiles = { label: this.label, icon: this.icon };
80
+ if (!RequieredPropsUtils.check(requiredFiles))
69
81
  return;
70
- }
71
82
  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 },
72
83
  // Comprobamos si se muestra cargando
73
84
  !this.loading ? (h("iris-icon", { icon: this.icon, size: this.size })) : (h("i", { class: "loading" }, h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { opacity: "0.25", 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", stroke: "currentColor", "stroke-width": "4" }), h("path", { opacity: "0.75", d: "M10 2.2002C5.43552 3.12674 2 7.16224 2 12.0002C2 13.5118 2.3354 14.9451 2.93585 16.2297", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" })))),
package/dist/esm/iris-button.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"iris-button.entry.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":[],"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,QACE,CAAA,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,IACX,CAAA,CAAA,WAAA,EAAA,EAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAc,KAEzD,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,SAAS,EAAA,EAChB,CAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrE,CAAA,CAAA,MAAA,EAAA,EACE,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,mHAAmH,EACrH,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,GAAG,EACV,CAAA,EACR,CAAA,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;;;;;;;"}
1
+ {"version":3,"file":"iris-button.entry.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 // 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';\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 <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":[],"mappings":"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"}
package/dist/iris-button/iris-button.css CHANGED
@@ -1 +1 @@
1
- @charset "UTF-8";:root{color-scheme:light;--primary:#004899;--secondary:#377dff;--aux:#d7612a;--aux2:#dae1e7;--white:#fff;--black:#000;--background:#fafafa;--suggested:#e8f0fe;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--gray-950:#030712;--red-50:#fef2f2;--red-100:#fee2e2;--red-200:#fecaca;--red-300:#fca5a5;--red-400:#f87171;--red-500:#ef4444;--red-600:#dc2626;--red-700:#b91c1c;--red-800:#991b1b;--red-900:#7f1d1d;--red-950:#450a0a;--orange-50:#fff7ed;--orange-100:#ffedd5;--orange-200:#fed7aa;--orange-300:#fdba74;--orange-400:#fb923c;--orange-500:#f97316;--orange-600:#ea580c;--orange-700:#c2410c;--orange-800:#9a3412;--orange-900:#7c2d12;--orange-950:#431407;--yellow-50:#fefce8;--yellow-100:#fef9c3;--yellow-200:#fef08a;--yellow-300:#fde047;--yellow-400:#facc15;--yellow-500:#eab308;--yellow-600:#ca8a04;--yellow-700:#a16207;--yellow-800:#854d0e;--yellow-900:#713f12;--yellow-950:#422006;--green-50:#f0fdf4;--green-100:#dcfce7;--green-200:#bbf7d0;--green-300:#86efac;--green-400:#4ade80;--green-500:#22c55e;--green-600:#16a34a;--green-700:#15803d;--green-800:#166534;--green-900:#14532d;--green-950:#052e16;--cyan-50:#ecfeff;--cyan-100:#cffafe;--cyan-200:#a5f3fc;--cyan-300:#67e8f9;--cyan-400:#22d3ee;--cyan-500:#06b6d4;--cyan-600:#0891b2;--cyan-700:#0e7490;--cyan-800:#155e75;--cyan-900:#164e63;--cyan-950:#083344;--blue-50:#eff6ff;--blue-100:#dbeafe;--blue-200:#bfdbfe;--blue-300:#93c5fd;--blue-400:#60a5fa;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-800:#1e40af;--blue-900:#1e3a8a;--blue-950:#172554;--purple-50:#faf5ff;--purple-100:#f3e8ff;--purple-200:#e9d5ff;--purple-300:#d8b4fe;--purple-400:#c084fc;--purple-500:#a855f7;--purple-600:#9333ea;--purple-700:#7e22ce;--purple-800:#6b21a8;--purple-900:#581c87;--purple-950:#3b0764;--pink-50:#fdf2f8;--pink-100:#fce7f3;--pink-200:#fbcfe8;--pink-300:#f9a8d4;--pink-400:#f472b6;--pink-500:#ec4899;--pink-600:#db2777;--pink-700:#be185d;--pink-800:#9d174d;--pink-900:#831843;--pink-950:#500724;--company-basic-light:#f3f4f6;--company-basic-dark:#1f2937;--company-basic-focus:#d1d5db;--company-primary-light:#eff6ff;--company-primary-dark:#1e40af;--company-primary-focus:#1e3a8a;--company-success-light:#dcfce7;--company-success-dark:#15803d;--company-success-focus:#14532d;--company-warning-light:#ffedd5;--company-warning-dark:#ea580c;--company-warning-focus:#c2410c;--company-error-light:#fee2e2;--company-error-dark:#dc2626;--company-error-focus:#991b1b;--company-question-light:#a5f3fc;--company-question-dark:#0891b2;--company-question-focus:#155e75;--company-note-light:#e5e7eb;--company-note-dark:#6b7280;--company-note-focus:#4b5563;--gray_lighter:var(--gray-100);--gray_lighter2:var(--gray-200);--gray_light:var(--gray-300);--gray_light_trans:var(--gray-400);--gray2:var(--gray-400);--gray:var(--gray-600);--gray_dark:var(--gray-700);--gray_darker:var(--gray-800);--red_light:var(--red-200);--red:var(--red-600);--red_dark:var(--red-700);--red_darker:var(--red-800);--green_light:var(--green-200);--green:var(--green-400);--green_dark:var(--green-600);--green_darker:var(--green-700);--orange_light:var(--orange-100);--orange:var(--orange-400);--orange_dark:var(--orange-500);--orange_darker:var(--orange-600);--blue_lighter:var(--blue-50);--blue_light:var(--blue-300);--blue:var(--blue-500);--blue_dark:var(--blue-600);--blue_darker:var(--blue-800);--purple_light:var(--purple-200);--purple:var(--purple-300);--purple_dark:var(--purple-400);--purple_darker:var(--purple-500);--noty_alert:var(--yellow-100);--noty_alert-border:var(--yellow-200);--noty_alert-color:var(--yellow-800);--noty_alert-link-color:var(--yellow-600);--noty_success:var(--green-500);--noty_warning:var(--yellow-300);--noty_error:var(--red-700);--noty_info:var(--blue-500)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--primary:#004899;--secondary:#377dff;--aux:#dd6b4d;--aux2:#dae1e7;--white:#121212;--black:#e2e2e2;--background:#1b1c1d;--suggested:#2c3543;--gray_lighter:#2c2c2c;--gray_lighter2:#3e3e3e;--gray_light:#4b4b4b;--gray_light_trans:#cc4b4b4b;--gray2:#a0a0a0;--gray:#bfbfbf;--gray_dark:#ececec;--gray_darker:#f3f3f3;--red_light:#8e0404;--red:#bd0808;--red_dark:#e00000;--red_darker:#ffcccc;--green_light:#528a1b;--green:#5fa519;--green_dark:#86e428;--green_darker:#e2ffc5;--orange_light:#bb8318;--orange:#ce9425;--orange_dark:#e4a428;--orange_darker:#fff6c5;--blue_lighter:#1c5594;--blue_light:#2470c3;--blue:#2882e4;--blue_dark:#a6c8f5;--blue_darker:#c5deff;--purple_light:#af7ac5;--purple:#c39bd3;--purple_dark:#d7bde2;--purple_darker:#ebdef0;--noty_alert:#f7dc6f;--noty_success:#2ecc71;--noty_warning:#f4d03f;--noty_error:#c0392b;--noty_info:#5dade2;--gray-50:#030712;--gray-100:#111827;--gray-200:#1f2937;--gray-300:#374151;--gray-400:#4b5563;--gray-500:#6b7280;--gray-600:#9ca3af;--gray-700:#d1d5db;--gray-800:#e5e7eb;--gray-900:#f3f4f6;--gray-950:#f9fafb;--red-50:#450a0a;--red-100:#7f1d1d;--red-200:#991b1b;--red-300:#b91c1c;--red-400:#dc2626;--red-500:#ef4444;--red-600:#f87171;--red-700:#fca5a5;--red-800:#fecaca;--red-900:#fee2e2;--red-950:#fef2f2;--orange-50:#431407;--orange-100:#7c2d12;--orange-200:#9a3412;--orange-300:#c2410c;--orange-400:#ea580c;--orange-500:#f97316;--orange-600:#fb923c;--orange-700:#fdba74;--orange-800:#fed7aa;--orange-900:#ffedd5;--orange-950:#fff7ed;--yellow-50:#422006;--yellow-100:#713f12;--yellow-200:#854d0e;--yellow-300:#a16207;--yellow-400:#ca8a04;--yellow-500:#eab308;--yellow-600:#facc15;--yellow-700:#fde047;--yellow-800:#fef08a;--yellow-900:#fef9c3;--yellow-950:#fefce8;--green-50:#052e16;--green-100:#14532d;--green-200:#166534;--green-300:#15803d;--green-400:#16a34a;--green-500:#22c55e;--green-600:#4ade80;--green-700:#86efac;--green-800:#bbf7d0;--green-900:#dcfce7;--green-950:#f0fdf4;--cyan-50:#083344;--cyan-100:#164e63;--cyan-200:#155e75;--cyan-300:#0e7490;--cyan-400:#0891b2;--cyan-500:#06b6d4;--cyan-600:#22d3ee;--cyan-700:#67e8f9;--cyan-800:#a5f3fc;--cyan-900:#cffafe;--cyan-950:#ecfeff;--blue-50:#172554;--blue-100:#1e3a8a;--blue-200:#1e40af;--blue-300:#1d4ed8;--blue-400:#2563eb;--blue-500:#3b82f6;--blue-600:#60a5fa;--blue-700:#93c5fd;--blue-800:#bfdbfe;--blue-900:#dbeafe;--blue-950:#eff6ff;--purple-50:#3b0764;--purple-100:#581c87;--purple-200:#6b21a8;--purple-300:#7e22ce;--purple-400:#9333ea;--purple-500:#a855f7;--purple-600:#c084fc;--purple-700:#d8b4fe;--purple-800:#e9d5ff;--purple-900:#f3e8ff;--purple-950:#faf5ff;--pink-50:#500724;--pink-100:#831843;--pink-200:#9d174d;--pink-300:#be185d;--pink-400:#db2777;--pink-500:#ec4899;--pink-600:#f472b6;--pink-700:#f9a8d4;--pink-800:#fbcfe8;--pink-900:#fce7f3;--pink-950:#fdf2f8;--company-basic-light:var(--gray-100);--company-basic-dark:var(--gray-800);--company-basic-focus:var(--gray-300);--company-primary-light:var(--blue-50);--company-primary-dark:var(--blue-700);--company-primary-focus:var(--blue-800);--company-success-light:var(--green-50);--company-success-dark:var(--green-700);--company-success-focus:var(--green-800);--company-warning-light:var(--orange-50);--company-warning-dark:var(--orange-700);--company-warning-focus:var(--orange-800);--company-error-light:var(--red-50);--company-error-dark:var(--red-600);--company-error-focus:var(--red-700);--company-question-light:var(--cyan-50);--company-question-dark:var(--cyan-700);--company-question-focus:var(--cyan-800);--company-note-light:var(--gray-200);--company-note-dark:var(--gray-700);--company-note-focus:var(--gray-600);--gray_lighter:var(--gray-100);--gray_lighter2:var(--gray-200);--gray_light:var(--gray-300);--gray_light_trans:var(--gray-400);--gray2:var(--gray-400);--gray:var(--gray-600);--gray_dark:var(--gray-700);--gray_darker:var(--gray-800);--red_light:var(--red-200);--red:var(--red-600);--red_dark:var(--red-700);--red_darker:var(--red-800);--green_light:var(--green-200);--green:var(--green-400);--green_dark:var(--green-600);--green_darker:var(--green-700);--orange_light:var(--orange-100);--orange:var(--orange-400);--orange_dark:var(--orange-500);--orange_darker:var(--orange-600);--blue_lighter:var(--blue-50);--blue_light:var(--blue-300);--blue:var(--blue-500);--blue_dark:var(--blue-600);--blue_darker:var(--blue-800);--purple_light:var(--purple-200);--purple:var(--purple-300);--purple_dark:var(--purple-400);--purple_darker:var(--purple-500);--noty_alert:var(--yellow-100);--noty_alert-border:var(--yellow-200);--noty_alert-color:var(--yellow-800);--noty_alert-link-color:var(--yellow-600);--noty_success:var(--green-500);--noty_warning:var(--yellow-300);--noty_error:var(--red-700);--noty_info:var(--blue-500)}}:root:has(body.dark){color-scheme:dark;--primary:#004899;--secondary:#377dff;--aux:#dd6b4d;--aux2:#dae1e7;--white:#121212;--black:#e2e2e2;--background:#1b1c1d;--suggested:#2c3543;--gray_lighter:#2c2c2c;--gray_lighter2:#3e3e3e;--gray_light:#4b4b4b;--gray_light_trans:#cc4b4b4b;--gray2:#a0a0a0;--gray:#bfbfbf;--gray_dark:#ececec;--gray_darker:#f3f3f3;--red_light:#8e0404;--red:#bd0808;--red_dark:#e00000;--red_darker:#ffcccc;--green_light:#528a1b;--green:#5fa519;--green_dark:#86e428;--green_darker:#e2ffc5;--orange_light:#bb8318;--orange:#ce9425;--orange_dark:#e4a428;--orange_darker:#fff6c5;--blue_lighter:#1c5594;--blue_light:#2470c3;--blue:#2882e4;--blue_dark:#a6c8f5;--blue_darker:#c5deff;--purple_light:#af7ac5;--purple:#c39bd3;--purple_dark:#d7bde2;--purple_darker:#ebdef0;--noty_alert:#f7dc6f;--noty_success:#2ecc71;--noty_warning:#f4d03f;--noty_error:#c0392b;--noty_info:#5dade2;--gray-50:#030712;--gray-100:#111827;--gray-200:#1f2937;--gray-300:#374151;--gray-400:#4b5563;--gray-500:#6b7280;--gray-600:#9ca3af;--gray-700:#d1d5db;--gray-800:#e5e7eb;--gray-900:#f3f4f6;--gray-950:#f9fafb;--red-50:#450a0a;--red-100:#7f1d1d;--red-200:#991b1b;--red-300:#b91c1c;--red-400:#dc2626;--red-500:#ef4444;--red-600:#f87171;--red-700:#fca5a5;--red-800:#fecaca;--red-900:#fee2e2;--red-950:#fef2f2;--orange-50:#431407;--orange-100:#7c2d12;--orange-200:#9a3412;--orange-300:#c2410c;--orange-400:#ea580c;--orange-500:#f97316;--orange-600:#fb923c;--orange-700:#fdba74;--orange-800:#fed7aa;--orange-900:#ffedd5;--orange-950:#fff7ed;--yellow-50:#422006;--yellow-100:#713f12;--yellow-200:#854d0e;--yellow-300:#a16207;--yellow-400:#ca8a04;--yellow-500:#eab308;--yellow-600:#facc15;--yellow-700:#fde047;--yellow-800:#fef08a;--yellow-900:#fef9c3;--yellow-950:#fefce8;--green-50:#052e16;--green-100:#14532d;--green-200:#166534;--green-300:#15803d;--green-400:#16a34a;--green-500:#22c55e;--green-600:#4ade80;--green-700:#86efac;--green-800:#bbf7d0;--green-900:#dcfce7;--green-950:#f0fdf4;--cyan-50:#083344;--cyan-100:#164e63;--cyan-200:#155e75;--cyan-300:#0e7490;--cyan-400:#0891b2;--cyan-500:#06b6d4;--cyan-600:#22d3ee;--cyan-700:#67e8f9;--cyan-800:#a5f3fc;--cyan-900:#cffafe;--cyan-950:#ecfeff;--blue-50:#172554;--blue-100:#1e3a8a;--blue-200:#1e40af;--blue-300:#1d4ed8;--blue-400:#2563eb;--blue-500:#3b82f6;--blue-600:#60a5fa;--blue-700:#93c5fd;--blue-800:#bfdbfe;--blue-900:#dbeafe;--blue-950:#eff6ff;--purple-50:#3b0764;--purple-100:#581c87;--purple-200:#6b21a8;--purple-300:#7e22ce;--purple-400:#9333ea;--purple-500:#a855f7;--purple-600:#c084fc;--purple-700:#d8b4fe;--purple-800:#e9d5ff;--purple-900:#f3e8ff;--purple-950:#faf5ff;--pink-50:#500724;--pink-100:#831843;--pink-200:#9d174d;--pink-300:#be185d;--pink-400:#db2777;--pink-500:#ec4899;--pink-600:#f472b6;--pink-700:#f9a8d4;--pink-800:#fbcfe8;--pink-900:#fce7f3;--pink-950:#fdf2f8;--company-basic-light:var(--gray-100);--company-basic-dark:var(--gray-800);--company-basic-focus:var(--gray-300);--company-primary-light:var(--blue-50);--company-primary-dark:var(--blue-700);--company-primary-focus:var(--blue-800);--company-success-light:var(--green-50);--company-success-dark:var(--green-700);--company-success-focus:var(--green-800);--company-warning-light:var(--orange-50);--company-warning-dark:var(--orange-700);--company-warning-focus:var(--orange-800);--company-error-light:var(--red-50);--company-error-dark:var(--red-600);--company-error-focus:var(--red-700);--company-question-light:var(--cyan-50);--company-question-dark:var(--cyan-700);--company-question-focus:var(--cyan-800);--company-note-light:var(--gray-200);--company-note-dark:var(--gray-700);--company-note-focus:var(--gray-600);--gray_lighter:var(--gray-100);--gray_lighter2:var(--gray-200);--gray_light:var(--gray-300);--gray_light_trans:var(--gray-400);--gray2:var(--gray-400);--gray:var(--gray-600);--gray_dark:var(--gray-700);--gray_darker:var(--gray-800);--red_light:var(--red-200);--red:var(--red-600);--red_dark:var(--red-700);--red_darker:var(--red-800);--green_light:var(--green-200);--green:var(--green-400);--green_dark:var(--green-600);--green_darker:var(--green-700);--orange_light:var(--orange-100);--orange:var(--orange-400);--orange_dark:var(--orange-500);--orange_darker:var(--orange-600);--blue_lighter:var(--blue-50);--blue_light:var(--blue-300);--blue:var(--blue-500);--blue_dark:var(--blue-600);--blue_darker:var(--blue-800);--purple_light:var(--purple-200);--purple:var(--purple-300);--purple_dark:var(--purple-400);--purple_darker:var(--purple-500);--noty_alert:var(--yellow-100);--noty_alert-border:var(--yellow-200);--noty_alert-color:var(--yellow-800);--noty_alert-link-color:var(--yellow-600);--noty_success:var(--green-500);--noty_warning:var(--yellow-300);--noty_error:var(--red-700);--noty_info:var(--blue-500)}:root:has(body.light){color-scheme:light;--primary:#004899;--secondary:#377dff;--aux:#d7612a;--aux2:#dae1e7;--white:#fff;--black:#000;--background:#fafafa;--suggested:#e8f0fe;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--gray-950:#030712;--red-50:#fef2f2;--red-100:#fee2e2;--red-200:#fecaca;--red-300:#fca5a5;--red-400:#f87171;--red-500:#ef4444;--red-600:#dc2626;--red-700:#b91c1c;--red-800:#991b1b;--red-900:#7f1d1d;--red-950:#450a0a;--orange-50:#fff7ed;--orange-100:#ffedd5;--orange-200:#fed7aa;--orange-300:#fdba74;--orange-400:#fb923c;--orange-500:#f97316;--orange-600:#ea580c;--orange-700:#c2410c;--orange-800:#9a3412;--orange-900:#7c2d12;--orange-950:#431407;--yellow-50:#fefce8;--yellow-100:#fef9c3;--yellow-200:#fef08a;--yellow-300:#fde047;--yellow-400:#facc15;--yellow-500:#eab308;--yellow-600:#ca8a04;--yellow-700:#a16207;--yellow-800:#854d0e;--yellow-900:#713f12;--yellow-950:#422006;--green-50:#f0fdf4;--green-100:#dcfce7;--green-200:#bbf7d0;--green-300:#86efac;--green-400:#4ade80;--green-500:#22c55e;--green-600:#16a34a;--green-700:#15803d;--green-800:#166534;--green-900:#14532d;--green-950:#052e16;--cyan-50:#ecfeff;--cyan-100:#cffafe;--cyan-200:#a5f3fc;--cyan-300:#67e8f9;--cyan-400:#22d3ee;--cyan-500:#06b6d4;--cyan-600:#0891b2;--cyan-700:#0e7490;--cyan-800:#155e75;--cyan-900:#164e63;--cyan-950:#083344;--blue-50:#eff6ff;--blue-100:#dbeafe;--blue-200:#bfdbfe;--blue-300:#93c5fd;--blue-400:#60a5fa;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-800:#1e40af;--blue-900:#1e3a8a;--blue-950:#172554;--purple-50:#faf5ff;--purple-100:#f3e8ff;--purple-200:#e9d5ff;--purple-300:#d8b4fe;--purple-400:#c084fc;--purple-500:#a855f7;--purple-600:#9333ea;--purple-700:#7e22ce;--purple-800:#6b21a8;--purple-900:#581c87;--purple-950:#3b0764;--pink-50:#fdf2f8;--pink-100:#fce7f3;--pink-200:#fbcfe8;--pink-300:#f9a8d4;--pink-400:#f472b6;--pink-500:#ec4899;--pink-600:#db2777;--pink-700:#be185d;--pink-800:#9d174d;--pink-900:#831843;--pink-950:#500724;--company-basic-light:#f3f4f6;--company-basic-dark:#1f2937;--company-basic-focus:#d1d5db;--company-primary-light:#eff6ff;--company-primary-dark:#1e40af;--company-primary-focus:#1e3a8a;--company-success-light:#dcfce7;--company-success-dark:#15803d;--company-success-focus:#14532d;--company-warning-light:#ffedd5;--company-warning-dark:#ea580c;--company-warning-focus:#c2410c;--company-error-light:#fee2e2;--company-error-dark:#dc2626;--company-error-focus:#991b1b;--company-question-light:#a5f3fc;--company-question-dark:#0891b2;--company-question-focus:#155e75;--company-note-light:#e5e7eb;--company-note-dark:#6b7280;--company-note-focus:#4b5563;--gray_lighter:var(--gray-100);--gray_lighter2:var(--gray-200);--gray_light:var(--gray-300);--gray_light_trans:var(--gray-400);--gray2:var(--gray-400);--gray:var(--gray-600);--gray_dark:var(--gray-700);--gray_darker:var(--gray-800);--red_light:var(--red-200);--red:var(--red-600);--red_dark:var(--red-700);--red_darker:var(--red-800);--green_light:var(--green-200);--green:var(--green-400);--green_dark:var(--green-600);--green_darker:var(--green-700);--orange_light:var(--orange-100);--orange:var(--orange-400);--orange_dark:var(--orange-500);--orange_darker:var(--orange-600);--blue_lighter:var(--blue-50);--blue_light:var(--blue-300);--blue:var(--blue-500);--blue_dark:var(--blue-600);--blue_darker:var(--blue-800);--purple_light:var(--purple-200);--purple:var(--purple-300);--purple_dark:var(--purple-400);--purple_darker:var(--purple-500);--noty_alert:var(--yellow-100);--noty_alert-border:var(--yellow-200);--noty_alert-color:var(--yellow-800);--noty_alert-link-color:var(--yellow-600);--noty_success:var(--green-500);--noty_warning:var(--yellow-300);--noty_error:var(--red-700);--noty_info:var(--blue-500)}:root{--font-size-mobile:16px;--font-size-desktop:12px;--font-size-small:11px;--font-size-icon:18px;--font-primary:"Roboto";--font-family-material-icons:"Material Symbols Rounded"}:root{--img-select:url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>")}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*{box-sizing:border-box}:root{--font-size:var(--font-size-mobile, 16px)}@media (min-width: 1025px){:root{--font-size:var(--font-size-desktop, 12px)}}body{font-family:var(--font-primary, "Roboto");font-size:var(--font-size, 16px);color:var(--black);background-color:var(--background);-webkit-transition:background-color 0.3s ease;-ms-transition:background-color 0.3s ease;transition:background-color 0.3s ease}@media (min-width: 1025px){body{font-size:var(--font-size, 12px)}}.flex{display:-ms-flexbox;display:-webkit-box;display:flex}h1,h2,h3,h4{color:var(--company-primary-dark)}@font-face{font-family:"Material Symbols Rounded";font-style:normal;font-weight:100 700;font-display:block;src:url("./fonts/symbols/material-symbols-rounded.woff2") format("woff2")}.material-symbols-rounded{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}.material-symbols-outlined,.material-symbols-rounded,.material-symbols-sharp{font-size:var(--font-size-icon)}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform, visibility, opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(0.54, 1.5, 0.38, 1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-animation=shift-away-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=top]{transform:translateY(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=bottom]{transform:translateY(-5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=left]{transform:translateX(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=right]{transform:translateX(-5px)}.tippy-box[data-theme^=iris-tooltip]{background-color:var(--gray-800);color:var(--white);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;width:max-content}.tippy-box[data-theme^=iris-tooltip] .tippy-content .tooltip-header{font-weight:bold;padding:4px 2px;margin-bottom:4px;text-align:center;color:var(--white);border-bottom:1px solid var(--white)}.tippy-box[data-theme^=iris-tooltip] .tippy-content a{color:var(--white)}.tippy-box[data-theme^=iris-tooltip] .tippy-content p{margin:0;padding:4px}.tippy-box[data-theme^=iris-tooltip] .tippy-content:not(:has(>ul)){padding:4px}.tippy-box[data-theme^=iris-tooltip] .tippy-content ul{display:-ms-flexbox;display:-webkit-box;display:flex;flex-direction:column;gap:8px;list-style:none;padding:2px;margin:0}.tippy-box[data-theme^=iris-tooltip] .tippy-arrow{color:var(--gray-800)}.tippy-box[data-theme^=iris-tooltip][data-theme$=contextmenu]{background-color:var(--gray-50);color:var(--gray-950);-webkit-box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.75);-moz-box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.75);box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.75)}.tippy-box[data-theme^=iris-tooltip][data-theme$=contextmenu] .tippy-content{padding:4px 0;margin:0}.tippy-box[data-theme^=iris-tooltip][data-theme$=contextmenu] ul{padding:0;margin:0}.tippy-box[data-theme^=iris-tooltip][data-theme$=contextmenu] li{padding:4px 8px;-webkit-transition:background-color 0.5s ease;-ms-transition:background-color 0.5s ease;transition:background-color 0.5s ease;cursor:pointer;display:-ms-flexbox;display:-webkit-box;display:flex;align-items:center}.tippy-box[data-theme^=iris-tooltip][data-theme$=contextmenu] li:hover,.tippy-box[data-theme^=iris-tooltip][data-theme$=contextmenu] li[aria-expanded=true]{background-color:var(--gray-100)}.tippy-box[data-theme^=iris-tooltip][data-theme$=contextmenu] li iris-icon{width:20px}.tippy-box[data-theme^=iris-tooltip][data-theme$=contextmenu] li>span{flex:1}.horizontal-layout{display:-ms-flexbox;display:-webkit-box;display:flex;flex-wrap:wrap;row-gap:20px;column-gap:10px;align-items:center}.horizontal-layout .clearfix,.horizontal-layout h1,.horizontal-layout h2,.horizontal-layout h3,.horizontal-layout h4{width:100%}.vertical-layout{display:-ms-flexbox;display:-webkit-box;display:flex;row-gap:20px;flex-direction:column}.styled-cols iris-col{align-items:normal}.styled-cols .iris-col-1,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-2,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-3,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-4,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-5,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-6,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-7,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-8,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-9,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-10,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-11,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-12,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-flex{padding:20px 0px;display:flex;flex-wrap:wrap}.styled-flex h2,.styled-flex h3,.styled-flex p{width:100%}.styled-flex iris-row{width:100%}.styled-flex.flex-layout{width:100%}.styled-flex .iris-row{gap:10px}.styled-flex .iris-align-center{width:100%;background:var(--blue-100);padding:20px 5px}.styled-flex .iris-align-top{width:100%;background:var(--blue-50);padding:20px 5px}.styled-flex .iris-align-bottom{width:100%;background:var(--blue-100);padding:20px 5px}.styled-flex .iris-space-between{width:100%;background:var(--blue-50);padding:20px 5px}.styled-flex .iris-space-around{width:100%;background:var(--blue-100);padding:20px 5px}.styled-flex .iris-space-evenly{width:100%;background:var(--blue-50);padding:20px 5px}.styled-flex .iris-justify-center{width:100%;background:var(--blue-100);padding:20px 5px}.styled-flex .iris-justify-start{width:100%;background:var(--blue-50);padding:20px 5px}.styled-flex .iris-justify-end{width:100%;background:var(--blue-100);padding:20px 5px}.styled-flex .iris-center-center{width:100%;background:var(--blue-50);padding:20px 5px;height:165px}.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:8px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:var(--white);-webkit-box-shadow:1px 0 0 var(--white), -1px 0 0 var(--white), 0 1px 0 var(--white), 0 -1px 0 var(--white), 0 3px 13px rgba(0, 0, 0, 0.08);box-shadow:1px 0 0 var(--white), -1px 0 0 var(--white), 0 1px 0 var(--white), 0 -1px 0 var(--white), 0 3px 13px rgba(0, 0, 0, 0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);animation:fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;content:"";height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:var(--black);fill:var(--black);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0, 0, 0, 0.9);fill:var(--gray-600)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{left:0;}.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{right:0;}.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:var(--company-primary-dark)}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px;padding:3px;border:1px solid var(--gray-400);border-radius:5px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill 0.1s;transition:fill 0.1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid transparent;-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0, 0, 0, 0.1)}.numInputWrapper span:active{background:rgba(0, 0, 0, 0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid var(--gray-200);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57, 57, 57, 0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0, 0, 0, 0.5)}.numInputWrapper:hover{background:rgba(0, 0, 0, 0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:0.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0, 0, 0, 0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:var(--black)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:var(--black)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 0.5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:var(--black);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 0.5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0, 0, 0, 0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:var(--white);outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:var(--gray-500);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px);opacity:1}.dayContainer+.dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--black);cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:var(--gray-200);border-color:var(--gray-200)}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:var(--company-primary-dark);-webkit-box-shadow:none;box-shadow:none;color:var(--white);border-color:var(--company-primary-dark)}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 var(--company-primary-dark);box-shadow:-10px 0 0 var(--company-primary-dark)}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 var(--gray-200), 5px 0 0 var(--gray-200);box-shadow:-5px 0 0 var(--gray-200), 5px 0 0 var(--gray-200)}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:var(--gray-500);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:var(--gray-400)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7, 5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7, 5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57, 57, 57, 0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@font-face{font-display:swap;font-family:"Roboto";font-style:normal;font-weight:400;src:url("./fonts/roboto/roboto-v30-latin-regular.woff2") format("woff2"), url("./fonts/roboto/roboto-v30-latin-regular.woff") format("woff");}@font-face{font-display:swap;font-family:"Roboto";font-style:italic;font-weight:400;src:url("./fonts/roboto/roboto-v30-latin-italic.woff2") format("woff2"), url("./fonts/roboto/roboto-v30-latin-italic.woff") format("woff");}@font-face{font-display:swap;font-family:"Roboto";font-style:normal;font-weight:700;src:url("./fonts/roboto/roboto-v30-latin-700.woff2") format("woff2"), url("./fonts/roboto/roboto-v30-latin-700.woff") format("woff");}
1
+ @charset "UTF-8";:root{color-scheme:light;--primary:#004899;--secondary:#377dff;--aux:#d7612a;--aux2:#dae1e7;--white:#fff;--black:#000;--background:#fafafa;--suggested:#e8f0fe;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--gray-950:#030712;--red-50:#fef2f2;--red-100:#fee2e2;--red-200:#fecaca;--red-300:#fca5a5;--red-400:#f87171;--red-500:#ef4444;--red-600:#dc2626;--red-700:#b91c1c;--red-800:#991b1b;--red-900:#7f1d1d;--red-950:#450a0a;--orange-50:#fff7ed;--orange-100:#ffedd5;--orange-200:#fed7aa;--orange-300:#fdba74;--orange-400:#fb923c;--orange-500:#f97316;--orange-600:#ea580c;--orange-700:#c2410c;--orange-800:#9a3412;--orange-900:#7c2d12;--orange-950:#431407;--yellow-50:#fefce8;--yellow-100:#fef9c3;--yellow-200:#fef08a;--yellow-300:#fde047;--yellow-400:#facc15;--yellow-500:#eab308;--yellow-600:#ca8a04;--yellow-700:#a16207;--yellow-800:#854d0e;--yellow-900:#713f12;--yellow-950:#422006;--green-50:#f0fdf4;--green-100:#dcfce7;--green-200:#bbf7d0;--green-300:#86efac;--green-400:#4ade80;--green-500:#22c55e;--green-600:#16a34a;--green-700:#15803d;--green-800:#166534;--green-900:#14532d;--green-950:#052e16;--cyan-50:#ecfeff;--cyan-100:#cffafe;--cyan-200:#a5f3fc;--cyan-300:#67e8f9;--cyan-400:#22d3ee;--cyan-500:#06b6d4;--cyan-600:#0891b2;--cyan-700:#0e7490;--cyan-800:#155e75;--cyan-900:#164e63;--cyan-950:#083344;--blue-50:#eff6ff;--blue-100:#dbeafe;--blue-200:#bfdbfe;--blue-300:#93c5fd;--blue-400:#60a5fa;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-800:#1e40af;--blue-900:#1e3a8a;--blue-950:#172554;--purple-50:#faf5ff;--purple-100:#f3e8ff;--purple-200:#e9d5ff;--purple-300:#d8b4fe;--purple-400:#c084fc;--purple-500:#a855f7;--purple-600:#9333ea;--purple-700:#7e22ce;--purple-800:#6b21a8;--purple-900:#581c87;--purple-950:#3b0764;--pink-50:#fdf2f8;--pink-100:#fce7f3;--pink-200:#fbcfe8;--pink-300:#f9a8d4;--pink-400:#f472b6;--pink-500:#ec4899;--pink-600:#db2777;--pink-700:#be185d;--pink-800:#9d174d;--pink-900:#831843;--pink-950:#500724;--company-basic-light:#f3f4f6;--company-basic-dark:#1f2937;--company-basic-focus:#d1d5db;--company-primary-light:#eff6ff;--company-primary-dark:#1e40af;--company-primary-focus:#1e3a8a;--company-success-light:#dcfce7;--company-success-dark:#15803d;--company-success-focus:#14532d;--company-warning-light:#ffedd5;--company-warning-dark:#ea580c;--company-warning-focus:#c2410c;--company-error-light:#fee2e2;--company-error-dark:#dc2626;--company-error-focus:#991b1b;--company-question-light:#a5f3fc;--company-question-dark:#0891b2;--company-question-focus:#155e75;--company-note-light:#e5e7eb;--company-note-dark:#6b7280;--company-note-focus:#4b5563;--gray_lighter:var(--gray-100);--gray_lighter2:var(--gray-200);--gray_light:var(--gray-300);--gray_light_trans:var(--gray-400);--gray2:var(--gray-400);--gray:var(--gray-600);--gray_dark:var(--gray-700);--gray_darker:var(--gray-800);--red_light:var(--red-200);--red:var(--red-600);--red_dark:var(--red-700);--red_darker:var(--red-800);--green_light:var(--green-200);--green:var(--green-400);--green_dark:var(--green-600);--green_darker:var(--green-700);--orange_light:var(--orange-100);--orange:var(--orange-400);--orange_dark:var(--orange-500);--orange_darker:var(--orange-600);--blue_lighter:var(--blue-50);--blue_light:var(--blue-300);--blue:var(--blue-500);--blue_dark:var(--blue-600);--blue_darker:var(--blue-800);--purple_light:var(--purple-200);--purple:var(--purple-300);--purple_dark:var(--purple-400);--purple_darker:var(--purple-500);--noty_alert:var(--yellow-100);--noty_alert-border:var(--yellow-200);--noty_alert-color:var(--yellow-800);--noty_alert-link-color:var(--yellow-600);--noty_success:var(--green-500);--noty_warning:var(--yellow-300);--noty_error:var(--red-700);--noty_info:var(--blue-500)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--primary:#004899;--secondary:#377dff;--aux:#dd6b4d;--aux2:#dae1e7;--white:#121212;--black:#e2e2e2;--background:#1b1c1d;--suggested:#2c3543;--gray_lighter:#2c2c2c;--gray_lighter2:#3e3e3e;--gray_light:#4b4b4b;--gray_light_trans:#cc4b4b4b;--gray2:#a0a0a0;--gray:#bfbfbf;--gray_dark:#ececec;--gray_darker:#f3f3f3;--red_light:#8e0404;--red:#bd0808;--red_dark:#e00000;--red_darker:#ffcccc;--green_light:#528a1b;--green:#5fa519;--green_dark:#86e428;--green_darker:#e2ffc5;--orange_light:#bb8318;--orange:#ce9425;--orange_dark:#e4a428;--orange_darker:#fff6c5;--blue_lighter:#1c5594;--blue_light:#2470c3;--blue:#2882e4;--blue_dark:#a6c8f5;--blue_darker:#c5deff;--purple_light:#af7ac5;--purple:#c39bd3;--purple_dark:#d7bde2;--purple_darker:#ebdef0;--noty_alert:#f7dc6f;--noty_success:#2ecc71;--noty_warning:#f4d03f;--noty_error:#c0392b;--noty_info:#5dade2;--gray-50:#030712;--gray-100:#111827;--gray-200:#1f2937;--gray-300:#374151;--gray-400:#4b5563;--gray-500:#6b7280;--gray-600:#9ca3af;--gray-700:#d1d5db;--gray-800:#e5e7eb;--gray-900:#f3f4f6;--gray-950:#f9fafb;--red-50:#450a0a;--red-100:#7f1d1d;--red-200:#991b1b;--red-300:#b91c1c;--red-400:#dc2626;--red-500:#ef4444;--red-600:#f87171;--red-700:#fca5a5;--red-800:#fecaca;--red-900:#fee2e2;--red-950:#fef2f2;--orange-50:#431407;--orange-100:#7c2d12;--orange-200:#9a3412;--orange-300:#c2410c;--orange-400:#ea580c;--orange-500:#f97316;--orange-600:#fb923c;--orange-700:#fdba74;--orange-800:#fed7aa;--orange-900:#ffedd5;--orange-950:#fff7ed;--yellow-50:#422006;--yellow-100:#713f12;--yellow-200:#854d0e;--yellow-300:#a16207;--yellow-400:#ca8a04;--yellow-500:#eab308;--yellow-600:#facc15;--yellow-700:#fde047;--yellow-800:#fef08a;--yellow-900:#fef9c3;--yellow-950:#fefce8;--green-50:#052e16;--green-100:#14532d;--green-200:#166534;--green-300:#15803d;--green-400:#16a34a;--green-500:#22c55e;--green-600:#4ade80;--green-700:#86efac;--green-800:#bbf7d0;--green-900:#dcfce7;--green-950:#f0fdf4;--cyan-50:#083344;--cyan-100:#164e63;--cyan-200:#155e75;--cyan-300:#0e7490;--cyan-400:#0891b2;--cyan-500:#06b6d4;--cyan-600:#22d3ee;--cyan-700:#67e8f9;--cyan-800:#a5f3fc;--cyan-900:#cffafe;--cyan-950:#ecfeff;--blue-50:#172554;--blue-100:#1e3a8a;--blue-200:#1e40af;--blue-300:#1d4ed8;--blue-400:#2563eb;--blue-500:#3b82f6;--blue-600:#60a5fa;--blue-700:#93c5fd;--blue-800:#bfdbfe;--blue-900:#dbeafe;--blue-950:#eff6ff;--purple-50:#3b0764;--purple-100:#581c87;--purple-200:#6b21a8;--purple-300:#7e22ce;--purple-400:#9333ea;--purple-500:#a855f7;--purple-600:#c084fc;--purple-700:#d8b4fe;--purple-800:#e9d5ff;--purple-900:#f3e8ff;--purple-950:#faf5ff;--pink-50:#500724;--pink-100:#831843;--pink-200:#9d174d;--pink-300:#be185d;--pink-400:#db2777;--pink-500:#ec4899;--pink-600:#f472b6;--pink-700:#f9a8d4;--pink-800:#fbcfe8;--pink-900:#fce7f3;--pink-950:#fdf2f8;--company-basic-light:var(--gray-100);--company-basic-dark:var(--gray-800);--company-basic-focus:var(--gray-300);--company-primary-light:var(--blue-50);--company-primary-dark:var(--blue-700);--company-primary-focus:var(--blue-800);--company-success-light:var(--green-50);--company-success-dark:var(--green-700);--company-success-focus:var(--green-800);--company-warning-light:var(--orange-50);--company-warning-dark:var(--orange-700);--company-warning-focus:var(--orange-800);--company-error-light:var(--red-50);--company-error-dark:var(--red-600);--company-error-focus:var(--red-700);--company-question-light:var(--cyan-50);--company-question-dark:var(--cyan-700);--company-question-focus:var(--cyan-800);--company-note-light:var(--gray-200);--company-note-dark:var(--gray-700);--company-note-focus:var(--gray-600);--gray_lighter:var(--gray-100);--gray_lighter2:var(--gray-200);--gray_light:var(--gray-300);--gray_light_trans:var(--gray-400);--gray2:var(--gray-400);--gray:var(--gray-600);--gray_dark:var(--gray-700);--gray_darker:var(--gray-800);--red_light:var(--red-200);--red:var(--red-600);--red_dark:var(--red-700);--red_darker:var(--red-800);--green_light:var(--green-200);--green:var(--green-400);--green_dark:var(--green-600);--green_darker:var(--green-700);--orange_light:var(--orange-100);--orange:var(--orange-400);--orange_dark:var(--orange-500);--orange_darker:var(--orange-600);--blue_lighter:var(--blue-50);--blue_light:var(--blue-300);--blue:var(--blue-500);--blue_dark:var(--blue-600);--blue_darker:var(--blue-800);--purple_light:var(--purple-200);--purple:var(--purple-300);--purple_dark:var(--purple-400);--purple_darker:var(--purple-500);--noty_alert:var(--yellow-100);--noty_alert-border:var(--yellow-200);--noty_alert-color:var(--yellow-800);--noty_alert-link-color:var(--yellow-600);--noty_success:var(--green-500);--noty_warning:var(--yellow-300);--noty_error:var(--red-700);--noty_info:var(--blue-500)}}:root:has(body.dark){color-scheme:dark;--primary:#004899;--secondary:#377dff;--aux:#dd6b4d;--aux2:#dae1e7;--white:#121212;--black:#e2e2e2;--background:#1b1c1d;--suggested:#2c3543;--gray_lighter:#2c2c2c;--gray_lighter2:#3e3e3e;--gray_light:#4b4b4b;--gray_light_trans:#cc4b4b4b;--gray2:#a0a0a0;--gray:#bfbfbf;--gray_dark:#ececec;--gray_darker:#f3f3f3;--red_light:#8e0404;--red:#bd0808;--red_dark:#e00000;--red_darker:#ffcccc;--green_light:#528a1b;--green:#5fa519;--green_dark:#86e428;--green_darker:#e2ffc5;--orange_light:#bb8318;--orange:#ce9425;--orange_dark:#e4a428;--orange_darker:#fff6c5;--blue_lighter:#1c5594;--blue_light:#2470c3;--blue:#2882e4;--blue_dark:#a6c8f5;--blue_darker:#c5deff;--purple_light:#af7ac5;--purple:#c39bd3;--purple_dark:#d7bde2;--purple_darker:#ebdef0;--noty_alert:#f7dc6f;--noty_success:#2ecc71;--noty_warning:#f4d03f;--noty_error:#c0392b;--noty_info:#5dade2;--gray-50:#030712;--gray-100:#111827;--gray-200:#1f2937;--gray-300:#374151;--gray-400:#4b5563;--gray-500:#6b7280;--gray-600:#9ca3af;--gray-700:#d1d5db;--gray-800:#e5e7eb;--gray-900:#f3f4f6;--gray-950:#f9fafb;--red-50:#450a0a;--red-100:#7f1d1d;--red-200:#991b1b;--red-300:#b91c1c;--red-400:#dc2626;--red-500:#ef4444;--red-600:#f87171;--red-700:#fca5a5;--red-800:#fecaca;--red-900:#fee2e2;--red-950:#fef2f2;--orange-50:#431407;--orange-100:#7c2d12;--orange-200:#9a3412;--orange-300:#c2410c;--orange-400:#ea580c;--orange-500:#f97316;--orange-600:#fb923c;--orange-700:#fdba74;--orange-800:#fed7aa;--orange-900:#ffedd5;--orange-950:#fff7ed;--yellow-50:#422006;--yellow-100:#713f12;--yellow-200:#854d0e;--yellow-300:#a16207;--yellow-400:#ca8a04;--yellow-500:#eab308;--yellow-600:#facc15;--yellow-700:#fde047;--yellow-800:#fef08a;--yellow-900:#fef9c3;--yellow-950:#fefce8;--green-50:#052e16;--green-100:#14532d;--green-200:#166534;--green-300:#15803d;--green-400:#16a34a;--green-500:#22c55e;--green-600:#4ade80;--green-700:#86efac;--green-800:#bbf7d0;--green-900:#dcfce7;--green-950:#f0fdf4;--cyan-50:#083344;--cyan-100:#164e63;--cyan-200:#155e75;--cyan-300:#0e7490;--cyan-400:#0891b2;--cyan-500:#06b6d4;--cyan-600:#22d3ee;--cyan-700:#67e8f9;--cyan-800:#a5f3fc;--cyan-900:#cffafe;--cyan-950:#ecfeff;--blue-50:#172554;--blue-100:#1e3a8a;--blue-200:#1e40af;--blue-300:#1d4ed8;--blue-400:#2563eb;--blue-500:#3b82f6;--blue-600:#60a5fa;--blue-700:#93c5fd;--blue-800:#bfdbfe;--blue-900:#dbeafe;--blue-950:#eff6ff;--purple-50:#3b0764;--purple-100:#581c87;--purple-200:#6b21a8;--purple-300:#7e22ce;--purple-400:#9333ea;--purple-500:#a855f7;--purple-600:#c084fc;--purple-700:#d8b4fe;--purple-800:#e9d5ff;--purple-900:#f3e8ff;--purple-950:#faf5ff;--pink-50:#500724;--pink-100:#831843;--pink-200:#9d174d;--pink-300:#be185d;--pink-400:#db2777;--pink-500:#ec4899;--pink-600:#f472b6;--pink-700:#f9a8d4;--pink-800:#fbcfe8;--pink-900:#fce7f3;--pink-950:#fdf2f8;--company-basic-light:var(--gray-100);--company-basic-dark:var(--gray-800);--company-basic-focus:var(--gray-300);--company-primary-light:var(--blue-50);--company-primary-dark:var(--blue-700);--company-primary-focus:var(--blue-800);--company-success-light:var(--green-50);--company-success-dark:var(--green-700);--company-success-focus:var(--green-800);--company-warning-light:var(--orange-50);--company-warning-dark:var(--orange-700);--company-warning-focus:var(--orange-800);--company-error-light:var(--red-50);--company-error-dark:var(--red-600);--company-error-focus:var(--red-700);--company-question-light:var(--cyan-50);--company-question-dark:var(--cyan-700);--company-question-focus:var(--cyan-800);--company-note-light:var(--gray-200);--company-note-dark:var(--gray-700);--company-note-focus:var(--gray-600);--gray_lighter:var(--gray-100);--gray_lighter2:var(--gray-200);--gray_light:var(--gray-300);--gray_light_trans:var(--gray-400);--gray2:var(--gray-400);--gray:var(--gray-600);--gray_dark:var(--gray-700);--gray_darker:var(--gray-800);--red_light:var(--red-200);--red:var(--red-600);--red_dark:var(--red-700);--red_darker:var(--red-800);--green_light:var(--green-200);--green:var(--green-400);--green_dark:var(--green-600);--green_darker:var(--green-700);--orange_light:var(--orange-100);--orange:var(--orange-400);--orange_dark:var(--orange-500);--orange_darker:var(--orange-600);--blue_lighter:var(--blue-50);--blue_light:var(--blue-300);--blue:var(--blue-500);--blue_dark:var(--blue-600);--blue_darker:var(--blue-800);--purple_light:var(--purple-200);--purple:var(--purple-300);--purple_dark:var(--purple-400);--purple_darker:var(--purple-500);--noty_alert:var(--yellow-100);--noty_alert-border:var(--yellow-200);--noty_alert-color:var(--yellow-800);--noty_alert-link-color:var(--yellow-600);--noty_success:var(--green-500);--noty_warning:var(--yellow-300);--noty_error:var(--red-700);--noty_info:var(--blue-500)}:root:has(body.light){color-scheme:light;--primary:#004899;--secondary:#377dff;--aux:#d7612a;--aux2:#dae1e7;--white:#fff;--black:#000;--background:#fafafa;--suggested:#e8f0fe;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--gray-950:#030712;--red-50:#fef2f2;--red-100:#fee2e2;--red-200:#fecaca;--red-300:#fca5a5;--red-400:#f87171;--red-500:#ef4444;--red-600:#dc2626;--red-700:#b91c1c;--red-800:#991b1b;--red-900:#7f1d1d;--red-950:#450a0a;--orange-50:#fff7ed;--orange-100:#ffedd5;--orange-200:#fed7aa;--orange-300:#fdba74;--orange-400:#fb923c;--orange-500:#f97316;--orange-600:#ea580c;--orange-700:#c2410c;--orange-800:#9a3412;--orange-900:#7c2d12;--orange-950:#431407;--yellow-50:#fefce8;--yellow-100:#fef9c3;--yellow-200:#fef08a;--yellow-300:#fde047;--yellow-400:#facc15;--yellow-500:#eab308;--yellow-600:#ca8a04;--yellow-700:#a16207;--yellow-800:#854d0e;--yellow-900:#713f12;--yellow-950:#422006;--green-50:#f0fdf4;--green-100:#dcfce7;--green-200:#bbf7d0;--green-300:#86efac;--green-400:#4ade80;--green-500:#22c55e;--green-600:#16a34a;--green-700:#15803d;--green-800:#166534;--green-900:#14532d;--green-950:#052e16;--cyan-50:#ecfeff;--cyan-100:#cffafe;--cyan-200:#a5f3fc;--cyan-300:#67e8f9;--cyan-400:#22d3ee;--cyan-500:#06b6d4;--cyan-600:#0891b2;--cyan-700:#0e7490;--cyan-800:#155e75;--cyan-900:#164e63;--cyan-950:#083344;--blue-50:#eff6ff;--blue-100:#dbeafe;--blue-200:#bfdbfe;--blue-300:#93c5fd;--blue-400:#60a5fa;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-800:#1e40af;--blue-900:#1e3a8a;--blue-950:#172554;--purple-50:#faf5ff;--purple-100:#f3e8ff;--purple-200:#e9d5ff;--purple-300:#d8b4fe;--purple-400:#c084fc;--purple-500:#a855f7;--purple-600:#9333ea;--purple-700:#7e22ce;--purple-800:#6b21a8;--purple-900:#581c87;--purple-950:#3b0764;--pink-50:#fdf2f8;--pink-100:#fce7f3;--pink-200:#fbcfe8;--pink-300:#f9a8d4;--pink-400:#f472b6;--pink-500:#ec4899;--pink-600:#db2777;--pink-700:#be185d;--pink-800:#9d174d;--pink-900:#831843;--pink-950:#500724;--company-basic-light:#f3f4f6;--company-basic-dark:#1f2937;--company-basic-focus:#d1d5db;--company-primary-light:#eff6ff;--company-primary-dark:#1e40af;--company-primary-focus:#1e3a8a;--company-success-light:#dcfce7;--company-success-dark:#15803d;--company-success-focus:#14532d;--company-warning-light:#ffedd5;--company-warning-dark:#ea580c;--company-warning-focus:#c2410c;--company-error-light:#fee2e2;--company-error-dark:#dc2626;--company-error-focus:#991b1b;--company-question-light:#a5f3fc;--company-question-dark:#0891b2;--company-question-focus:#155e75;--company-note-light:#e5e7eb;--company-note-dark:#6b7280;--company-note-focus:#4b5563;--gray_lighter:var(--gray-100);--gray_lighter2:var(--gray-200);--gray_light:var(--gray-300);--gray_light_trans:var(--gray-400);--gray2:var(--gray-400);--gray:var(--gray-600);--gray_dark:var(--gray-700);--gray_darker:var(--gray-800);--red_light:var(--red-200);--red:var(--red-600);--red_dark:var(--red-700);--red_darker:var(--red-800);--green_light:var(--green-200);--green:var(--green-400);--green_dark:var(--green-600);--green_darker:var(--green-700);--orange_light:var(--orange-100);--orange:var(--orange-400);--orange_dark:var(--orange-500);--orange_darker:var(--orange-600);--blue_lighter:var(--blue-50);--blue_light:var(--blue-300);--blue:var(--blue-500);--blue_dark:var(--blue-600);--blue_darker:var(--blue-800);--purple_light:var(--purple-200);--purple:var(--purple-300);--purple_dark:var(--purple-400);--purple_darker:var(--purple-500);--noty_alert:var(--yellow-100);--noty_alert-border:var(--yellow-200);--noty_alert-color:var(--yellow-800);--noty_alert-link-color:var(--yellow-600);--noty_success:var(--green-500);--noty_warning:var(--yellow-300);--noty_error:var(--red-700);--noty_info:var(--blue-500)}:root{--font-size-mobile:16px;--font-size-desktop:12px;--font-size-small:11px;--font-size-icon:18px;--font-primary:"Roboto";--font-family-material-icons:"Material Symbols Rounded"}:root{--img-select:url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>")}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*{box-sizing:border-box}:root{--font-size:var(--font-size-mobile, 16px)}@media (min-width: 1025px){:root{--font-size:var(--font-size-desktop, 12px)}}body{font-family:var(--font-primary, "Roboto");font-size:var(--font-size, 16px);color:var(--black);background-color:var(--background);-webkit-transition:background-color 0.3s ease;-ms-transition:background-color 0.3s ease;transition:background-color 0.3s ease}@media (min-width: 1025px){body{font-size:var(--font-size, 12px)}}.flex{display:-ms-flexbox;display:-webkit-box;display:flex}h1,h2,h3,h4{color:var(--company-primary-dark)}@font-face{font-family:"Material Symbols Rounded";font-style:normal;font-weight:100 700;font-display:block;src:url("./fonts/symbols/material-symbols-rounded.woff2") format("woff2")}.material-symbols-rounded{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}.material-symbols-outlined,.material-symbols-rounded,.material-symbols-sharp{font-size:var(--font-size-icon)}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform, visibility, opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(0.54, 1.5, 0.38, 1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-animation=shift-away-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=top]{transform:translateY(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=bottom]{transform:translateY(-5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=left]{transform:translateX(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=right]{transform:translateX(-5px)}.tippy-box[data-theme^=iris-tooltip]{background-color:var(--gray-800);color:var(--white);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;width:max-content}.tippy-box[data-theme^=iris-tooltip] .tippy-content .tooltip-header{font-weight:bold;padding:4px 2px;margin-bottom:4px;text-align:center;color:var(--white);border-bottom:1px solid var(--white)}.tippy-box[data-theme^=iris-tooltip] .tippy-content a{color:var(--white)}.tippy-box[data-theme^=iris-tooltip] .tippy-content p{margin:0;padding:4px}.tippy-box[data-theme^=iris-tooltip] .tippy-content:not(:has(>ul)){padding:4px}.tippy-box[data-theme^=iris-tooltip] .tippy-content ul{display:-ms-flexbox;display:-webkit-box;display:flex;flex-direction:column;gap:8px;list-style:none;padding:2px;margin:0}.tippy-box[data-theme^=iris-tooltip] .tippy-arrow{color:var(--gray-800)}.tippy-box[data-theme^=iris-tooltip][data-theme$=contextmenu]{background-color:var(--gray-50);color:var(--gray-950);-webkit-box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.75);-moz-box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.75);box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.75)}.tippy-box[data-theme^=iris-tooltip][data-theme$=contextmenu] .tippy-content{padding:4px 0;margin:0}.tippy-box[data-theme^=iris-tooltip][data-theme$=contextmenu] ul{padding:0;margin:0}.tippy-box[data-theme^=iris-tooltip][data-theme$=contextmenu] li{padding:4px 8px;-webkit-transition:background-color 0.2s ease;-ms-transition:background-color 0.2s ease;transition:background-color 0.2s ease;cursor:pointer;display:-ms-flexbox;display:-webkit-box;display:flex;align-items:center}.tippy-box[data-theme^=iris-tooltip][data-theme$=contextmenu] li:hover,.tippy-box[data-theme^=iris-tooltip][data-theme$=contextmenu] li[aria-expanded=true]{background-color:var(--gray-100)}.tippy-box[data-theme^=iris-tooltip][data-theme$=contextmenu] li iris-icon{width:20px}.tippy-box[data-theme^=iris-tooltip][data-theme$=contextmenu] li>span{flex:1}.horizontal-layout{display:-ms-flexbox;display:-webkit-box;display:flex;flex-wrap:wrap;row-gap:20px;column-gap:10px;align-items:center}.horizontal-layout .clearfix,.horizontal-layout h1,.horizontal-layout h2,.horizontal-layout h3,.horizontal-layout h4{width:100%}.vertical-layout{display:-ms-flexbox;display:-webkit-box;display:flex;row-gap:20px;flex-direction:column}.styled-cols iris-col{align-items:normal}.styled-cols .iris-col-1,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-2,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-3,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-4,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-5,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-6,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-7,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-8,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-9,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-10,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-11,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-cols .iris-col-12,.styled-cols .iris-col,.styled-cols .iris-col-auto{background-color:var(--gray-100);border:1px solid var(--gray-300);text-align:center}.styled-flex{padding:20px 0px;display:flex;flex-wrap:wrap}.styled-flex h2,.styled-flex h3,.styled-flex p{width:100%}.styled-flex iris-row{width:100%}.styled-flex.flex-layout{width:100%}.styled-flex .iris-row{gap:10px}.styled-flex .iris-align-center{width:100%;background:var(--blue-100);padding:20px 5px}.styled-flex .iris-align-top{width:100%;background:var(--blue-50);padding:20px 5px}.styled-flex .iris-align-bottom{width:100%;background:var(--blue-100);padding:20px 5px}.styled-flex .iris-space-between{width:100%;background:var(--blue-50);padding:20px 5px}.styled-flex .iris-space-around{width:100%;background:var(--blue-100);padding:20px 5px}.styled-flex .iris-space-evenly{width:100%;background:var(--blue-50);padding:20px 5px}.styled-flex .iris-justify-center{width:100%;background:var(--blue-100);padding:20px 5px}.styled-flex .iris-justify-start{width:100%;background:var(--blue-50);padding:20px 5px}.styled-flex .iris-justify-end{width:100%;background:var(--blue-100);padding:20px 5px}.styled-flex .iris-center-center{width:100%;background:var(--blue-50);padding:20px 5px;height:165px}.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:8px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:var(--white);-webkit-box-shadow:1px 0 0 var(--white), -1px 0 0 var(--white), 0 1px 0 var(--white), 0 -1px 0 var(--white), 0 3px 13px rgba(0, 0, 0, 0.08);box-shadow:1px 0 0 var(--white), -1px 0 0 var(--white), 0 1px 0 var(--white), 0 -1px 0 var(--white), 0 3px 13px rgba(0, 0, 0, 0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);animation:fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;content:"";height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:var(--black);fill:var(--black);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0, 0, 0, 0.9);fill:var(--gray-600)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{left:0;}.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{right:0;}.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:var(--company-primary-dark)}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px;padding:3px;border:1px solid var(--gray-400);border-radius:5px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill 0.1s;transition:fill 0.1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid transparent;-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0, 0, 0, 0.1)}.numInputWrapper span:active{background:rgba(0, 0, 0, 0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid var(--gray-200);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57, 57, 57, 0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0, 0, 0, 0.5)}.numInputWrapper:hover{background:rgba(0, 0, 0, 0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:0.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0, 0, 0, 0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:var(--black)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:var(--black)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 0.5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:var(--black);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 0.5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0, 0, 0, 0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:var(--white);outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:var(--gray-500);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px);opacity:1}.dayContainer+.dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--black);cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:var(--gray-200);border-color:var(--gray-200)}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:var(--company-primary-dark);-webkit-box-shadow:none;box-shadow:none;color:var(--white);border-color:var(--company-primary-dark)}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 var(--company-primary-dark);box-shadow:-10px 0 0 var(--company-primary-dark)}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 var(--gray-200), 5px 0 0 var(--gray-200);box-shadow:-5px 0 0 var(--gray-200), 5px 0 0 var(--gray-200)}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:var(--gray-500);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:var(--gray-400)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7, 5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7, 5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57, 57, 57, 0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@font-face{font-display:swap;font-family:"Roboto";font-style:normal;font-weight:400;src:url("./fonts/roboto/roboto-v30-latin-regular.woff2") format("woff2"), url("./fonts/roboto/roboto-v30-latin-regular.woff") format("woff");}@font-face{font-display:swap;font-family:"Roboto";font-style:italic;font-weight:400;src:url("./fonts/roboto/roboto-v30-latin-italic.woff2") format("woff2"), url("./fonts/roboto/roboto-v30-latin-italic.woff") format("woff");}@font-face{font-display:swap;font-family:"Roboto";font-style:normal;font-weight:700;src:url("./fonts/roboto/roboto-v30-latin-700.woff2") format("woff2"), url("./fonts/roboto/roboto-v30-latin-700.woff") format("woff");}
package/dist/iris-button/iris-button.entry.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"iris-button.entry.esm.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":[],"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,QACE,CAAA,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,IACX,CAAA,CAAA,WAAA,EAAA,EAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAc,KAEzD,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,SAAS,EAAA,EAChB,CAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrE,CAAA,CAAA,MAAA,EAAA,EACE,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,mHAAmH,EACrH,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,GAAG,EACV,CAAA,EACR,CAAA,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;;;;;;;"}
1
+ {"version":3,"file":"iris-button.entry.esm.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 // 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';\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 <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":[],"mappings":"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"}
package/dist/iris-button/iris-button.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as o,b as r}from"./p-BRSjmv8U.js";export{s as setNonce}from"./p-BRSjmv8U.js";import{g as t}from"./p-DQuL1Twl.js";var a=()=>{const s=import.meta.url;const r={};if(s!==""){r.resourcesUrl=new URL(".",s).href}return o(r)};a().then((async o=>{await t();return r([["p-7585a111",[[1,"iris-button",{label:[1],color:[1],icon:[1],disabled:[4],type:[1],loading:[4],size:[1]}]]]],o)}));
1
+ import{p as o,b as r}from"./p-BRSjmv8U.js";export{s as setNonce}from"./p-BRSjmv8U.js";import{g as t}from"./p-DQuL1Twl.js";var a=()=>{const s=import.meta.url;const r={};if(s!==""){r.resourcesUrl=new URL(".",s).href}return o(r)};a().then((async o=>{await t();return r([["p-25d399b6",[[1,"iris-button",{label:[1],color:[1],icon:[1],disabled:[4],type:[1],loading:[4],size:[1]}]]]],o)}));
2
2
  //# sourceMappingURL=iris-button.esm.js.map
package/dist/iris-button/p-25d399b6.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r as o,c as r,h as t}from"./p-BRSjmv8U.js";const a={ERROR_REQUIRED_PROP:"REQUIRED_PROP",check(o){const r=Object.entries(o).filter((([o,r])=>r===undefined)).map((([o])=>o));if(r.length>0){console.error(`${a.ERROR_REQUIRED_PROP}: No se han definido las siguientes propiedades: ${r.join(", ")}`);return false}else{return true}}};const c="@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 .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}}";const n=class{constructor(t){o(this,t);this.buttonClicked=r(this,"buttonClicked",1);this.buttonFocused=r(this,"buttonFocused",7);this.color="primary";this.disabled=false;this.type="";this.loading=false;this.size="medium";this.handleClick=o=>{o.stopPropagation();this.button.disabled=true;setTimeout((()=>{if(!this.loading){this.button.disabled=false}}),1e3);this.buttonClicked.emit(o)};this.handleFocus=o=>{this.buttonFocused.emit(o)}}render(){const o={label:this.label,icon:this.icon};if(!a.check(o))return;return t("button",{class:`${this.size}`,color:this.color,type:this.type,onClick:this.handleClick,disabled:this.disabled||this.loading,onFocus:this.handleFocus,ref:o=>this.button=o,title:this.label},!this.loading?t("iris-icon",{icon:this.icon,size:this.size}):t("i",{class:"loading"},t("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{opacity:"0.25",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",stroke:"currentColor","stroke-width":"4"}),t("path",{opacity:"0.75",d:"M10 2.2002C5.43552 3.12674 2 7.16224 2 12.0002C2 13.5118 2.3354 14.9451 2.93585 16.2297",stroke:"currentColor","stroke-width":"4","stroke-linecap":"round"}))),this.type=="icon"||this.type=="fab"?"":this.label)}};n.style=c;export{n as iris_button};
2
+ //# sourceMappingURL=p-25d399b6.entry.js.map
package/dist/iris-button/p-25d399b6.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["RequieredPropsUtils","ERROR_REQUIRED_PROP","check","props","missing","Object","entries","filter","_","value","undefined","map","key","length","console","error","join","irisButtonCss","IrisButton","constructor","hostRef","this","color","disabled","type","loading","size","handleClick","ev","stopPropagation","button","setTimeout","buttonClicked","emit","handleFocus","buttonFocused","render","requiredFiles","label","icon","h","class","onClick","onFocus","ref","el","title","viewBox","fill","xmlns","opacity","d","stroke"],"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 // 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';\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 <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"],"mappings":"kDAAO,MAAMA,EAAsB,CAC/BC,oBAAqB,gBACrB,KAAAC,CAAMC,GACF,MAAMC,EAAUC,OAAOC,QAAQH,GAC1BI,QAAO,EAAEC,EAAGC,KAAWA,IAAUC,YACjCC,KAAI,EAAEC,KAASA,IACpB,GAAIR,EAAQS,OAAS,EAAG,CACpBC,QAAQC,MAAM,GAAGf,EAAoBC,uEAAuEG,EAAQY,KAAK,SACzH,OAAO,KACnB,KACa,CACD,OAAO,IACnB,CACA,GCbA,MAAMC,EAAgB,gzH,MCQTC,EAAU,MALvB,WAAAC,CAAAC,G,oGAkBEC,KAAKC,MAA0D,UAa/DD,KAAQE,SAAG,MAMXF,KAAIG,KAAwB,GAO5BH,KAAOI,QAAG,MAMVJ,KAAIK,KAAiC,SAiCrCL,KAAAM,YAAeC,IAEbA,EAAGC,kBAGHR,KAAKS,OAAOP,SAAW,KACvBQ,YAAW,KACT,IAAKV,KAAKI,QAAS,CACjBJ,KAAKS,OAAOP,SAAW,K,IAExB,KAGHF,KAAKW,cAAcC,KAAKL,EAAG,EAO7BP,KAAAa,YAAeN,IACbP,KAAKc,cAAcF,KAAKL,EAAG,CAoD9B,CA/CC,MAAAQ,GAEE,MAAMC,EAAqC,CAAEC,MAAOjB,KAAKiB,MAAOC,KAAMlB,KAAKkB,MAC3E,IAAKvC,EAAoBE,MAAMmC,GAAgB,OAE/C,OACEG,EAAA,UACEC,MAAO,GAAGpB,KAAKK,OACfJ,MAAOD,KAAKC,MACZE,KAAMH,KAAKG,KACXkB,QAASrB,KAAKM,YACdJ,SAAUF,KAAKE,UAAYF,KAAKI,QAChCkB,QAAStB,KAAKa,YACdU,IAAMC,GAAQxB,KAAKS,OAASe,EAC5BC,MAAOzB,KAAKiB,QAITjB,KAAKI,QACJe,EAAA,aAAWD,KAAMlB,KAAKkB,KAAMb,KAAML,KAAKK,OAEvCc,EAAA,KAAGC,MAAM,WACPD,EAAK,OAAAO,QAAQ,YAAYC,KAAK,OAAOC,MAAM,8BACzCT,EAAA,QACEU,QAAQ,OACRC,EAAE,oHACFC,OAAO,eAAc,eACR,MAEfZ,EAAA,QACEU,QAAQ,OACRC,EAAE,0FACFC,OAAO,eAAc,eACR,IAAG,iBACD,YAQvB/B,KAAKG,MAAQ,QAAUH,KAAKG,MAAQ,MAAQ,GAAKH,KAAKiB,M","ignoreList":[]}
package/package.json CHANGED
@@ -1,16 +1,15 @@
1
1
  {
2
2
  "name": "@atmgrupomaggioli/iris-button",
3
3
  "prettier": "../../common/.prettierrc.js",
4
- "version": "0.2.2",
5
- "description": "ATM Button component",
4
+ "version": "0.2.4",
5
+ "description": "ATM Iris Button component",
6
6
  "main": "dist/index.cjs.js",
7
7
  "module": "dist/index.js",
8
8
  "types": "dist/types/index.d.ts",
9
9
  "collection": "dist/collection/collection-manifest.json",
10
10
  "collection:main": "dist/collection/index.js",
11
11
  "unpkg": "dist/iris-button/iris-button.esm.js",
12
- "homepage": "https://demos.atm-maggioli.es/iris/",
13
- "author": "ATM Designers",
12
+ "homepage": "https://iris.atm-maggioli.es",
14
13
  "exports": {
15
14
  ".": {
16
15
  "import": "./dist/index.esm.js",
@@ -47,8 +46,9 @@
47
46
  "ts-jest": "latest"
48
47
  },
49
48
  "dependencies": {
50
- "@atmgrupomaggioli/iris-icon": "*",
51
- "@atmgrupomaggioli/iris-styles": "*"
49
+ "@atmgrupomaggioli/iris-styles": "*",
50
+ "@atmgrupomaggioli/iris-utils": "*",
51
+ "@atmgrupomaggioli/iris-icon": "*"
52
52
  },
53
53
  "license": "MIT"
54
54
  }
package/dist/iris-button/p-7585a111.entry.js DELETED
@@ -1,2 +0,0 @@
1
- import{r as o,c as r,h as t}from"./p-BRSjmv8U.js";const a="@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}}";const c=class{constructor(t){o(this,t);this.buttonClicked=r(this,"buttonClicked",1);this.buttonFocused=r(this,"buttonFocused",7);this.color="primary";this.disabled=false;this.type="";this.loading=false;this.size="medium";this.handleClick=o=>{this.button.disabled=true;setTimeout((()=>{if(!this.loading){this.button.disabled=false}}),1e3);this.buttonClicked.emit(o)};this.handleFocus=o=>{this.buttonFocused.emit(o)}}render(){try{if(!this.label)throw"No se ha definido la propiedad 'label'.";if(!this.icon)throw"No se ha definido la propiedad 'icon'."}catch(o){console.error(o);return}return t("button",{class:`${this.size}`,color:this.color,type:this.type,onClick:this.handleClick,disabled:this.disabled||this.loading,onFocus:this.handleFocus,ref:o=>this.button=o,title:this.label},!this.loading?t("iris-icon",{icon:this.icon,size:this.size}):t("i",{class:"loading"},t("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{opacity:"0.25",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",stroke:"currentColor","stroke-width":"4"}),t("path",{opacity:"0.75",d:"M10 2.2002C5.43552 3.12674 2 7.16224 2 12.0002C2 13.5118 2.3354 14.9451 2.93585 16.2297",stroke:"currentColor","stroke-width":"4","stroke-linecap":"round"}))),this.type=="icon"||this.type=="fab"?"":this.label)}};c.style=a;export{c as iris_button};
2
- //# sourceMappingURL=p-7585a111.entry.js.map
package/dist/iris-button/p-7585a111.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["irisButtonCss","IrisButton","constructor","hostRef","this","color","disabled","type","loading","size","handleClick","ev","button","setTimeout","buttonClicked","emit","handleFocus","buttonFocused","render","label","icon","e","console","error","h","class","onClick","onFocus","ref","el","title","viewBox","fill","xmlns","opacity","d","stroke"],"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"],"mappings":"kDAAA,MAAMA,EAAgB,gzH,MCOTC,EAAU,MALvB,WAAAC,CAAAC,G,oGAkBEC,KAAKC,MAA0D,UAa/DD,KAAQE,SAAG,MAMXF,KAAIG,KAAwB,GAO5BH,KAAOI,QAAG,MAMVJ,KAAIK,KAAiC,SAiCrCL,KAAAM,YAAeC,IAEbP,KAAKQ,OAAON,SAAW,KACvBO,YAAW,KACT,IAAKT,KAAKI,QAAS,CACjBJ,KAAKQ,OAAON,SAAW,K,IAExB,KAGHF,KAAKU,cAAcC,KAAKJ,EAAG,EAO7BP,KAAAY,YAAeL,IACbP,KAAKa,cAAcF,KAAKJ,EAAG,CAyD9B,CApDC,MAAAO,GAEE,IACE,IAAKd,KAAKe,MAAO,KAAM,0CACvB,IAAKf,KAAKgB,KAAM,KAAM,wC,CACtB,MAAOC,GACPC,QAAQC,MAAMF,GACd,M,CAGF,OACEG,EAAA,UACEC,MAAO,GAAGrB,KAAKK,OACfJ,MAAOD,KAAKC,MACZE,KAAMH,KAAKG,KACXmB,QAAStB,KAAKM,YACdJ,SAAUF,KAAKE,UAAYF,KAAKI,QAChCmB,QAASvB,KAAKY,YACdY,IAAMC,GAAQzB,KAAKQ,OAASiB,EAC5BC,MAAO1B,KAAKe,QAITf,KAAKI,QACJgB,EAAA,aAAWJ,KAAMhB,KAAKgB,KAAMX,KAAML,KAAKK,OAEvCe,EAAA,KAAGC,MAAM,WACPD,EAAK,OAAAO,QAAQ,YAAYC,KAAK,OAAOC,MAAM,8BACzCT,EAAA,QACEU,QAAQ,OACRC,EAAE,oHACFC,OAAO,eAAc,eACR,MAEfZ,EAAA,QACEU,QAAQ,OACRC,EAAE,0FACFC,OAAO,eAAc,eACR,IAAG,iBACD,YAQvBhC,KAAKG,MAAQ,QAAUH,KAAKG,MAAQ,MAAQ,GAAKH,KAAKe,M","ignoreList":[]}