@atmgrupomaggioli/iris-button 0.2.4 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/cjs/index-vCW2wQf6.js +1299 -0
  2. package/dist/cjs/index-vCW2wQf6.js.map +1 -0
  3. package/dist/cjs/iris-button.cjs.entry.js +3 -3
  4. package/dist/cjs/iris-button.cjs.entry.js.map +1 -1
  5. package/dist/cjs/iris-button.cjs.js +3 -4
  6. package/dist/cjs/iris-button.cjs.js.map +1 -1
  7. package/dist/cjs/iris-button.entry.cjs.js.map +1 -1
  8. package/dist/cjs/loader.cjs.js +2 -3
  9. package/dist/cjs/loader.cjs.js.map +1 -1
  10. package/dist/collection/collection-manifest.json +1 -1
  11. package/dist/collection/components/iris-button/iris-button.css +4 -25
  12. package/dist/collection/components/iris-button/iris-button.js +1 -1
  13. package/dist/collection/components/iris-button/iris-button.js.map +1 -1
  14. package/dist/components/index.js +13 -32
  15. package/dist/components/index.js.map +1 -1
  16. package/dist/components/iris-button.js +2 -2
  17. package/dist/components/iris-button.js.map +1 -1
  18. package/dist/esm/index-DScl31jK.js +1291 -0
  19. package/dist/esm/index-DScl31jK.js.map +1 -0
  20. package/dist/esm/iris-button.entry.js +3 -3
  21. package/dist/esm/iris-button.entry.js.map +1 -1
  22. package/dist/esm/iris-button.js +3 -4
  23. package/dist/esm/iris-button.js.map +1 -1
  24. package/dist/esm/loader.js +2 -3
  25. package/dist/esm/loader.js.map +1 -1
  26. package/dist/iris-button/iris-button.css +7 -1
  27. package/dist/iris-button/iris-button.entry.esm.js.map +1 -1
  28. package/dist/iris-button/iris-button.esm.js +1 -1
  29. package/dist/iris-button/iris-button.esm.js.map +1 -1
  30. package/dist/iris-button/loader.esm.js.map +1 -1
  31. package/dist/iris-button/p-DScl31jK.js +3 -0
  32. package/dist/iris-button/p-DScl31jK.js.map +1 -0
  33. package/dist/iris-button/p-fe0bfee6.entry.js +2 -0
  34. package/dist/iris-button/p-fe0bfee6.entry.js.map +1 -0
  35. package/dist/types/components.d.ts +10 -0
  36. package/dist/types/stencil-public-runtime.d.ts +1 -1
  37. package/package.json +3 -2
  38. package/dist/cjs/app-globals-V2Kpy_OQ.js +0 -8
  39. package/dist/cjs/app-globals-V2Kpy_OQ.js.map +0 -1
  40. package/dist/cjs/index-Cej08wkk.js +0 -1316
  41. package/dist/cjs/index-Cej08wkk.js.map +0 -1
  42. package/dist/esm/app-globals-DQuL1Twl.js +0 -6
  43. package/dist/esm/app-globals-DQuL1Twl.js.map +0 -1
  44. package/dist/esm/index-BRSjmv8U.js +0 -1309
  45. package/dist/esm/index-BRSjmv8U.js.map +0 -1
  46. package/dist/iris-button/p-25d399b6.entry.js +0 -2
  47. package/dist/iris-button/p-25d399b6.entry.js.map +0 -1
  48. package/dist/iris-button/p-BRSjmv8U.js +0 -3
  49. package/dist/iris-button/p-BRSjmv8U.js.map +0 -1
  50. package/dist/iris-button/p-DQuL1Twl.js +0 -2
  51. package/dist/iris-button/p-DQuL1Twl.js.map +0 -1
package/dist/cjs/iris-button.cjs.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-Cej08wkk.js');
3
+ var index = require('./index-vCW2wQf6.js');
4
4
 
5
5
  const RequieredPropsUtils = {
6
6
  ERROR_REQUIRED_PROP: 'REQUIRED_PROP',
@@ -18,7 +18,7 @@ const RequieredPropsUtils = {
18
18
  },
19
19
  };
20
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}}";
21
+ const irisButtonCss = "@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes show-loading{0%{opacity:0}100%{opacity:1}}:host{display:inline-block}button{width:100%;font-size:var(--font-size);padding:8px 12px;color:var(--white);background-color:var(--company-primary-dark);-webkit-transition:background-color 0.2s ease;-ms-transition:background-color 0.2s ease;transition:background-color 0.2s ease;border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:-ms-flexbox;display:-webkit-box;display:flex;align-items:center;justify-content:center;cursor:pointer;gap:0.1rem;font-family:var(--font-primary)}button:hover{background-color:var(--company-primary-focus)}button:focus{outline:2px solid var(--blue_light);outline-offset:1px}button:not([type=icon],[type=fab]) .material-symbols-rounded,button:not([type=icon],[type=fab]) .loading{margin-right:5px}button[type=fab],button[type=icon]{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;height:36px;width:36px;padding:0;display:-ms-flexbox;display:-webkit-box;display:flex;justify-content:center}button iris-icon{display:-ms-flexbox;display:-webkit-box;display:flex}button iris-loading{display:-ms-flexbox;display:-webkit-box;display:flex;height:22px;align-items:center}button[color=primary]{background-color:var(--company-primary-dark)}button[color=primary]:hover{background-color:var(--company-primary-focus)}button[color=primary][type=icon]{background-color:unset;color:var(--company-primary-dark)}button[color=primary][type=icon]:hover{background-color:var(--company-primary-light)}button[color=success]{background-color:var(--company-success-dark)}button[color=success]:hover{background-color:var(--company-success-focus)}button[color=success][type=icon]{background-color:unset;color:var(--company-success-dark)}button[color=success][type=icon]:hover{background-color:var(--company-success-light)}button[color=warning]{background-color:var(--company-warning-dark)}button[color=warning]:hover{background-color:var(--company-warning-focus)}button[color=warning][type=icon]{background-color:unset;color:var(--company-warning-dark)}button[color=warning][type=icon]:hover{background-color:var(--company-warning-light)}button[color=error]{background-color:var(--company-error-dark)}button[color=error]:hover{background-color:var(--company-error-focus)}button[color=error][type=icon]{background-color:unset;color:var(--company-error-dark)}button[color=error][type=icon]:hover{background-color:var(--company-error-light)}button[color=basic]{background-color:var(--company-basic-dark);color:var(--black);background-color:var(--company-basic-light)}button[color=basic]:hover{background-color:var(--company-basic-focus)}button[color=basic][type=icon]{background-color:unset;color:var(--company-basic-dark)}button[color=basic][type=icon]:hover{background-color:var(--company-basic-light)}button:disabled{background-color:var(--company-basic-focus);color:var(--company-basic-light);cursor:not-allowed}button:disabled:hover{background-color:var(--company-basic-focus)}button.small{font-size:calc(var(--font-size) * 0.8)}button.small[type=fab],button.small[type=icon]{height:calc(36px * 0.8);width:calc(36px * 0.8)}button.large{font-size:calc(var(--font-size) * 1.2)}button.large[type=fab],button.large[type=icon]{height:calc(36px * 1.2);width:calc(36px * 1.2)}@media (min-width: 576px){button{width:auto}}";
22
22
 
23
23
  const IrisButton = class {
24
24
  constructor(hostRef) {
@@ -83,7 +83,7 @@ const IrisButton = class {
83
83
  return;
84
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 },
85
85
  // Comprobamos si se muestra cargando
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" })))),
86
+ !this.loading ? (index.h("iris-icon", { icon: this.icon, size: this.size })) : (index.h("div", { class: "loading" }, index.h("iris-loading", { size: "small", color: this.color }))),
87
87
  // Solo añadimos el label para los botones normales.
88
88
  this.type == 'icon' || this.type == 'fab' ? '' : this.label));
89
89
  }
package/dist/cjs/iris-button.cjs.entry.js.map CHANGED
@@ -1 +1 @@
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}
1
+ {"file":"iris-button.entry.cjs.js","mappings":"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","names":["h"],"sources":["../iris-utils/dist/esm/required_properties.js","src/components/iris-button/iris-button.scss?tag=iris-button&encapsulation=shadow","src/components/iris-button/iris-button.tsx"],"sourcesContent":["export const RequieredPropsUtils = {\n ERROR_REQUIRED_PROP: 'REQUIRED_PROP',\n check(props) {\n const missing = Object.entries(props)\n .filter(([_, value]) => value === undefined)\n .map(([key]) => key);\n if (missing.length > 0) {\n console.error(`${RequieredPropsUtils.ERROR_REQUIRED_PROP}: No se han definido las siguientes propiedades: ${missing.join(', ')}`);\n return false;\n }\n else {\n return true;\n }\n },\n};\n//# sourceMappingURL=required_properties.js.map","@use '_mixins.scss' as m;\n\n//#region Keyframes\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes show-loading {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n//#endregion\n\n//#region Mixins\n\n// Mixin para los colores.\n@mixin deco($type) {\n &[color='#{$type}'] {\n background-color: var(--company-#{$type}-dark);\n\n @if $type == 'basic' {\n color: var(--black);\n background-color: var(--company-#{$type}-light);\n }\n\n &:hover {\n background-color: var(--company-#{$type}-focus);\n }\n\n // Botones tipo icon.\n &[type='icon'] {\n background-color: unset;\n color: var(--company-#{$type}-dark);\n\n &:hover {\n background-color: var(--company-#{$type}-light);\n }\n }\n }\n}\n\n// Mixin para los tamaños.\n@mixin size-variant($size, $scale) {\n &.#{$size} {\n font-size: calc(var(--font-size) * #{$scale});\n\n // Botones tipo fab e icono.\n &[type='fab'],\n &[type='icon'] {\n height: calc(36px * #{$scale});\n width: calc(36px * #{$scale});\n }\n }\n}\n\n//#endregion\n\n:host {\n display: inline-block;\n}\n\n// Estilos genéricos para los botones.\nbutton {\n // Necesario para que el botón ocupe el 100% en pantallas pequeñas (iris-form).\n width: 100%;\n font-size: var(--font-size);\n padding: 8px 12px;\n color: var(--white);\n background-color: var(--company-primary-dark);\n @include m.animation(background-color);\n border: none;\n @include m.border-radius(5px);\n @include m.flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n gap: 0.1rem;\n font-family: var(--font-primary);\n\n &:hover {\n background-color: var(--company-primary-focus);\n }\n\n // Incluye un borde al hacer click y al usar tabs.\n @include m.focus-border;\n\n // Aplica un margen al icono en los botones por defecto para separarlo del texto.\n &:not([type='icon'], [type='fab']) {\n .material-symbols-rounded,\n .loading {\n margin-right: 5px;\n }\n }\n\n // Botones tipo fab e icono.\n &[type='fab'],\n &[type='icon'] {\n @include m.border-radius(50%);\n height: 36px;\n width: 36px;\n padding: 0;\n // Centramos el icono.\n @include m.flex;\n justify-content: center;\n }\n\n iris-icon {\n @include m.flex;\n }\n\n iris-loading {\n @include m.flex;\n height: 22px;\n align-items: center;\n }\n\n //#region Colores de los botones\n\n @include deco(primary);\n @include deco(success);\n @include deco(warning);\n @include deco(error);\n @include deco(basic);\n\n // Botón deshabilitado + controles de accesibilidad.\n &:disabled {\n background-color: var(--company-basic-focus);\n color: var(--company-basic-light);\n cursor: not-allowed;\n\n &:hover {\n background-color: var(--company-basic-focus);\n }\n }\n\n //#endregion\n\n //#region Tamaño\n\n @include size-variant(small, 0.8);\n @include size-variant(large, 1.2);\n\n //#endregion\n}\n\n@media (min-width: 576px) {\n button {\n width: auto;\n }\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\nimport { RequieredPropsUtils } from '@atmgrupomaggioli/iris-utils';\n\n@Component({\n tag: 'iris-button',\n styleUrl: 'iris-button.scss',\n shadow: true,\n})\nexport class IrisButton {\n //#region Props\n\n /**\n * Texto del botón.\n */\n @Prop() label!: string;\n\n /**\n * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.\n * Para ver más información al respecto, lea la documentación del componente.\n */\n @Prop()\n color: 'primary' | 'success' | 'warning' | 'error' | 'basic' = 'primary';\n\n /**\n * Icono del botón.\n * Consulta todos los iconos disponibles en: https://fonts.google.com/icons\n */\n @Prop()\n icon!: string;\n\n /**\n * Deshabilita el botón para que no pueda ser pulsado.\n */\n @Prop()\n disabled = false;\n\n /**\n * Tipo de botón.\n */\n @Prop()\n type: '' | 'icon' | 'fab' = '';\n\n /**\n * Permite mostrar una animación de carga mientras se realiza alguna acción.\n * Al activarse esta opción, el botón se deshabilita.\n */\n @Prop()\n loading = false;\n\n /**\n * Tamaño del botón.\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n //#endregion\n\n //#region Variables privadas\n\n // Tag <button> del DOM.\n button!: HTMLButtonElement;\n\n //#endregion\n\n //#region Events\n\n /**\n * Evento del botón al ser pulsado.\n */\n @Event({ bubbles: false, composed: false }) buttonClicked: EventEmitter<Event>;\n\n /**\n * Evento del botón al ser enfocado.\n */\n @Event() buttonFocused: EventEmitter<Event>;\n\n //#endregion\n\n //#region Handlers\n\n //FIXME: Cuando loading se pone en true, también debería mantenerse disabled en true hasta que termine. Ahora se pone disabled a false antes de tiempo y rompe el funcionamiento.\n\n /**\n * Método que se ejecuta al hacer clic y emite el evento.\n * @param ev\n */\n handleClick = (ev: Event) => {\n // Evitamos que el evento burbujee.\n ev.stopPropagation();\n\n // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.\n this.button.disabled = true;\n setTimeout(() => {\n if (!this.loading) {\n this.button.disabled = false;\n }\n }, 1000);\n\n // Lanzamos el evento.\n this.buttonClicked.emit(ev);\n };\n\n /**\n * Método que se ejecuta cuando se ha hecho focus en el botón.\n * @param ev\n */\n handleFocus = (ev: Event) => {\n this.buttonFocused.emit(ev);\n };\n\n //#endregion\n\n render() {\n // Validamos que todos los campos están rellenos.\n const requiredFiles: Record<string, any> = { label: this.label, icon: this.icon };\n if (!RequieredPropsUtils.check(requiredFiles)) return;\n\n return (\n <button\n class={`${this.size}`}\n color={this.color}\n type={this.type}\n onClick={this.handleClick}\n disabled={this.disabled || this.loading}\n onFocus={this.handleFocus}\n ref={(el) => (this.button = el as HTMLButtonElement)}\n title={this.label}\n >\n {\n // Comprobamos si se muestra cargando\n !this.loading ? (\n <iris-icon icon={this.icon} size={this.size}></iris-icon>\n ) : (\n <div class=\"loading\">\n <iris-loading size=\"small\" color={this.color}></iris-loading>\n </div>\n )\n }\n {\n // Solo añadimos el label para los botones normales.\n this.type == 'icon' || this.type == 'fab' ? '' : this.label\n }\n </button>\n );\n }\n}\n"],"version":3}
package/dist/cjs/iris-button.cjs.js CHANGED
@@ -1,11 +1,10 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-Cej08wkk.js');
4
- var appGlobals = require('./app-globals-V2Kpy_OQ.js');
3
+ var index = require('./index-vCW2wQf6.js');
5
4
 
6
5
  var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
7
6
  /*
8
- Stencil Client Patch Browser v4.31.0 | MIT Licensed | https://stenciljs.com
7
+ Stencil Client Patch Browser v4.33.0 | MIT Licensed | https://stenciljs.com
9
8
  */
10
9
 
11
10
  var patchBrowser = () => {
@@ -18,7 +17,7 @@ var patchBrowser = () => {
18
17
  };
19
18
 
20
19
  patchBrowser().then(async (options) => {
21
- await appGlobals.globalScripts();
20
+ await index.globalScripts();
22
21
  return index.bootstrapLazy([["iris-button.cjs",[[1,"iris-button",{"label":[1],"color":[1],"icon":[1],"disabled":[4],"type":[1],"loading":[4],"size":[1]}]]]], options);
23
22
  });
24
23
 
package/dist/cjs/iris-button.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"iris-button.cjs.js","sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.31.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":["promiseResolve","globalScripts","bootstrapLazy"],"mappings":";;;;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,oQAAe;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"iris-button.cjs.js","sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.33.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":["promiseResolve","globalScripts","bootstrapLazy"],"mappings":";;;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,oQAAe;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
package/dist/cjs/iris-button.entry.cjs.js.map CHANGED
@@ -1 +1 @@
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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"}
1
+ {"version":3,"file":"iris-button.entry.cjs.js","sources":["../iris-utils/dist/esm/required_properties.js","src/components/iris-button/iris-button.scss?tag=iris-button&encapsulation=shadow","src/components/iris-button/iris-button.tsx"],"sourcesContent":["export const RequieredPropsUtils = {\n ERROR_REQUIRED_PROP: 'REQUIRED_PROP',\n check(props) {\n const missing = Object.entries(props)\n .filter(([_, value]) => value === undefined)\n .map(([key]) => key);\n if (missing.length > 0) {\n console.error(`${RequieredPropsUtils.ERROR_REQUIRED_PROP}: No se han definido las siguientes propiedades: ${missing.join(', ')}`);\n return false;\n }\n else {\n return true;\n }\n },\n};\n//# sourceMappingURL=required_properties.js.map","@use '_mixins.scss' as m;\n\n//#region Keyframes\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes show-loading {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n//#endregion\n\n//#region Mixins\n\n// Mixin para los colores.\n@mixin deco($type) {\n &[color='#{$type}'] {\n background-color: var(--company-#{$type}-dark);\n\n @if $type == 'basic' {\n color: var(--black);\n background-color: var(--company-#{$type}-light);\n }\n\n &:hover {\n background-color: var(--company-#{$type}-focus);\n }\n\n // Botones tipo icon.\n &[type='icon'] {\n background-color: unset;\n color: var(--company-#{$type}-dark);\n\n &:hover {\n background-color: var(--company-#{$type}-light);\n }\n }\n }\n}\n\n// Mixin para los tamaños.\n@mixin size-variant($size, $scale) {\n &.#{$size} {\n font-size: calc(var(--font-size) * #{$scale});\n\n // Botones tipo fab e icono.\n &[type='fab'],\n &[type='icon'] {\n height: calc(36px * #{$scale});\n width: calc(36px * #{$scale});\n }\n }\n}\n\n//#endregion\n\n:host {\n display: inline-block;\n}\n\n// Estilos genéricos para los botones.\nbutton {\n // Necesario para que el botón ocupe el 100% en pantallas pequeñas (iris-form).\n width: 100%;\n font-size: var(--font-size);\n padding: 8px 12px;\n color: var(--white);\n background-color: var(--company-primary-dark);\n @include m.animation(background-color);\n border: none;\n @include m.border-radius(5px);\n @include m.flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n gap: 0.1rem;\n font-family: var(--font-primary);\n\n &:hover {\n background-color: var(--company-primary-focus);\n }\n\n // Incluye un borde al hacer click y al usar tabs.\n @include m.focus-border;\n\n // Aplica un margen al icono en los botones por defecto para separarlo del texto.\n &:not([type='icon'], [type='fab']) {\n .material-symbols-rounded,\n .loading {\n margin-right: 5px;\n }\n }\n\n // Botones tipo fab e icono.\n &[type='fab'],\n &[type='icon'] {\n @include m.border-radius(50%);\n height: 36px;\n width: 36px;\n padding: 0;\n // Centramos el icono.\n @include m.flex;\n justify-content: center;\n }\n\n iris-icon {\n @include m.flex;\n }\n\n iris-loading {\n @include m.flex;\n height: 22px;\n align-items: center;\n }\n\n //#region Colores de los botones\n\n @include deco(primary);\n @include deco(success);\n @include deco(warning);\n @include deco(error);\n @include deco(basic);\n\n // Botón deshabilitado + controles de accesibilidad.\n &:disabled {\n background-color: var(--company-basic-focus);\n color: var(--company-basic-light);\n cursor: not-allowed;\n\n &:hover {\n background-color: var(--company-basic-focus);\n }\n }\n\n //#endregion\n\n //#region Tamaño\n\n @include size-variant(small, 0.8);\n @include size-variant(large, 1.2);\n\n //#endregion\n}\n\n@media (min-width: 576px) {\n button {\n width: auto;\n }\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\nimport { RequieredPropsUtils } from '@atmgrupomaggioli/iris-utils';\n\n@Component({\n tag: 'iris-button',\n styleUrl: 'iris-button.scss',\n shadow: true,\n})\nexport class IrisButton {\n //#region Props\n\n /**\n * Texto del botón.\n */\n @Prop() label!: string;\n\n /**\n * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.\n * Para ver más información al respecto, lea la documentación del componente.\n */\n @Prop()\n color: 'primary' | 'success' | 'warning' | 'error' | 'basic' = 'primary';\n\n /**\n * Icono del botón.\n * Consulta todos los iconos disponibles en: https://fonts.google.com/icons\n */\n @Prop()\n icon!: string;\n\n /**\n * Deshabilita el botón para que no pueda ser pulsado.\n */\n @Prop()\n disabled = false;\n\n /**\n * Tipo de botón.\n */\n @Prop()\n type: '' | 'icon' | 'fab' = '';\n\n /**\n * Permite mostrar una animación de carga mientras se realiza alguna acción.\n * Al activarse esta opción, el botón se deshabilita.\n */\n @Prop()\n loading = false;\n\n /**\n * Tamaño del botón.\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n //#endregion\n\n //#region Variables privadas\n\n // Tag <button> del DOM.\n button!: HTMLButtonElement;\n\n //#endregion\n\n //#region Events\n\n /**\n * Evento del botón al ser pulsado.\n */\n @Event({ bubbles: false, composed: false }) buttonClicked: EventEmitter<Event>;\n\n /**\n * Evento del botón al ser enfocado.\n */\n @Event() buttonFocused: EventEmitter<Event>;\n\n //#endregion\n\n //#region Handlers\n\n //FIXME: Cuando loading se pone en true, también debería mantenerse disabled en true hasta que termine. Ahora se pone disabled a false antes de tiempo y rompe el funcionamiento.\n\n /**\n * Método que se ejecuta al hacer clic y emite el evento.\n * @param ev\n */\n handleClick = (ev: Event) => {\n // Evitamos que el evento burbujee.\n ev.stopPropagation();\n\n // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.\n this.button.disabled = true;\n setTimeout(() => {\n if (!this.loading) {\n this.button.disabled = false;\n }\n }, 1000);\n\n // Lanzamos el evento.\n this.buttonClicked.emit(ev);\n };\n\n /**\n * Método que se ejecuta cuando se ha hecho focus en el botón.\n * @param ev\n */\n handleFocus = (ev: Event) => {\n this.buttonFocused.emit(ev);\n };\n\n //#endregion\n\n render() {\n // Validamos que todos los campos están rellenos.\n const requiredFiles: Record<string, any> = { label: this.label, icon: this.icon };\n if (!RequieredPropsUtils.check(requiredFiles)) return;\n\n return (\n <button\n class={`${this.size}`}\n color={this.color}\n type={this.type}\n onClick={this.handleClick}\n disabled={this.disabled || this.loading}\n onFocus={this.handleFocus}\n ref={(el) => (this.button = el as HTMLButtonElement)}\n title={this.label}\n >\n {\n // Comprobamos si se muestra cargando\n !this.loading ? (\n <iris-icon icon={this.icon} size={this.size}></iris-icon>\n ) : (\n <div class=\"loading\">\n <iris-loading size=\"small\" color={this.color}></iris-loading>\n </div>\n )\n }\n {\n // Solo añadimos el label para los botones normales.\n this.type == 'icon' || this.type == 'fab' ? '' : this.label\n }\n </button>\n );\n }\n}\n"],"names":["h"],"mappings":"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"}
package/dist/cjs/loader.cjs.js CHANGED
@@ -1,11 +1,10 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-Cej08wkk.js');
4
- var appGlobals = require('./app-globals-V2Kpy_OQ.js');
3
+ var index = require('./index-vCW2wQf6.js');
5
4
 
6
5
  const defineCustomElements = async (win, options) => {
7
6
  if (typeof window === 'undefined') return undefined;
8
- await appGlobals.globalScripts();
7
+ await index.globalScripts();
9
8
  return index.bootstrapLazy([["iris-button.cjs",[[1,"iris-button",{"label":[1],"color":[1],"icon":[1],"disabled":[4],"type":[1],"loading":[4],"size":[1]}]]]], options);
10
9
  };
11
10
 
package/dist/cjs/loader.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"loader.cjs.js","sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n if (typeof window === 'undefined') return undefined;\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"names":["globalScripts","bootstrapLazy"],"mappings":";;;;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS;AACrD,EAAE,MAAMA,wBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D;;;;;"}
1
+ {"version":3,"file":"loader.cjs.js","sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n if (typeof window === 'undefined') return undefined;\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"names":["globalScripts","bootstrapLazy"],"mappings":";;;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS;AACrD,EAAE,MAAMA,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D;;;;;"}
package/dist/collection/collection-manifest.json CHANGED
@@ -4,7 +4,7 @@
4
4
  ],
5
5
  "compiler": {
6
6
  "name": "@stencil/core",
7
- "version": "4.31.0",
7
+ "version": "4.33.0",
8
8
  "typescriptVersion": "5.5.4"
9
9
  },
10
10
  "collections": [],
package/dist/collection/components/iris-button/iris-button.css CHANGED
@@ -63,23 +63,17 @@ button[type=fab], button[type=icon] {
63
63
  display: flex;
64
64
  justify-content: center;
65
65
  }
66
- button .loading {
67
- animation: show-loading 1s 1;
66
+ button iris-icon {
68
67
  display: -ms-flexbox;
69
68
  display: -webkit-box;
70
69
  display: flex;
71
- align-items: center;
72
- height: calc(var(--font-size-icon) * 1.19);
73
70
  }
74
- button .loading svg {
75
- animation: spin 1s infinite;
76
- color: var(--primary);
77
- height: var(--font-size-icon);
78
- }
79
- button iris-icon {
71
+ button iris-loading {
80
72
  display: -ms-flexbox;
81
73
  display: -webkit-box;
82
74
  display: flex;
75
+ height: 22px;
76
+ align-items: center;
83
77
  }
84
78
  button[color=primary] {
85
79
  background-color: var(--company-primary-dark);
@@ -94,9 +88,6 @@ button[color=primary][type=icon] {
94
88
  button[color=primary][type=icon]:hover {
95
89
  background-color: var(--company-primary-light);
96
90
  }
97
- button[color=primary] .loading svg {
98
- color: var(--company-primary-dark);
99
- }
100
91
  button[color=success] {
101
92
  background-color: var(--company-success-dark);
102
93
  }
@@ -110,9 +101,6 @@ button[color=success][type=icon] {
110
101
  button[color=success][type=icon]:hover {
111
102
  background-color: var(--company-success-light);
112
103
  }
113
- button[color=success] .loading svg {
114
- color: var(--company-success-dark);
115
- }
116
104
  button[color=warning] {
117
105
  background-color: var(--company-warning-dark);
118
106
  }
@@ -126,9 +114,6 @@ button[color=warning][type=icon] {
126
114
  button[color=warning][type=icon]:hover {
127
115
  background-color: var(--company-warning-light);
128
116
  }
129
- button[color=warning] .loading svg {
130
- color: var(--company-warning-dark);
131
- }
132
117
  button[color=error] {
133
118
  background-color: var(--company-error-dark);
134
119
  }
@@ -142,9 +127,6 @@ button[color=error][type=icon] {
142
127
  button[color=error][type=icon]:hover {
143
128
  background-color: var(--company-error-light);
144
129
  }
145
- button[color=error] .loading svg {
146
- color: var(--company-error-dark);
147
- }
148
130
  button[color=basic] {
149
131
  background-color: var(--company-basic-dark);
150
132
  color: var(--black);
@@ -160,9 +142,6 @@ button[color=basic][type=icon] {
160
142
  button[color=basic][type=icon]:hover {
161
143
  background-color: var(--company-basic-light);
162
144
  }
163
- button[color=basic] .loading svg {
164
- color: var(--company-basic-dark);
165
- }
166
145
  button:disabled {
167
146
  background-color: var(--company-basic-focus);
168
147
  color: var(--company-basic-light);
package/dist/collection/components/iris-button/iris-button.js CHANGED
@@ -60,7 +60,7 @@ export class IrisButton {
60
60
  return;
61
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 },
62
62
  // Comprobamos si se muestra cargando
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" })))),
63
+ !this.loading ? (h("iris-icon", { icon: this.icon, size: this.size })) : (h("div", { class: "loading" }, h("iris-loading", { size: "small", color: this.color }))),
64
64
  // Solo añadimos el label para los botones normales.
65
65
  this.type == 'icon' || this.type == 'fab' ? '' : this.label));
66
66
  }
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';\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"]}
1
+ {"version":3,"file":"iris-button.js","sourceRoot":"","sources":["../../../src/components/iris-button/iris-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAOnE,MAAM,OAAO,UAAU;IALvB;QAaE;;;WAGG;QAEH,UAAK,GAA0D,SAAS,CAAC;QASzE;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;WAEG;QAEH,SAAI,GAAwB,EAAE,CAAC;QAE/B;;;WAGG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;WAEG;QAEH,SAAI,GAAiC,QAAQ,CAAC;QAuB9C,YAAY;QAEZ,kBAAkB;QAElB,iLAAiL;QAEjL;;;WAGG;QACH,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAC1B,mCAAmC;YACnC,EAAE,CAAC,eAAe,EAAE,CAAC;YAErB,uFAAuF;YACvF,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;YAC5B,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;oBAClB,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC;gBAC/B,CAAC;YACH,CAAC,EAAE,IAAI,CAAC,CAAC;YAET,sBAAsB;YACtB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEF;;;WAGG;QACH,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC9B,CAAC,CAAC;KAqCH;IAnCC,YAAY;IAEZ,MAAM;QACJ,iDAAiD;QACjD,MAAM,aAAa,GAAwB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;QAClF,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,aAAa,CAAC;YAAE,OAAO;QAEtD,OAAO,CACL,cACE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EACvC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EACpD,KAAK,EAAE,IAAI,CAAC,KAAK;YAGf,qCAAqC;YACrC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,iBAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc,CAC1D,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,SAAS;gBAClB,oBAAc,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAiB,CACzD,CACP;YAGD,oDAAoD;YACpD,IAAI,CAAC,IAAI,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAEtD,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\nimport { RequieredPropsUtils } from '@atmgrupomaggioli/iris-utils';\n\n@Component({\n tag: 'iris-button',\n styleUrl: 'iris-button.scss',\n shadow: true,\n})\nexport class IrisButton {\n //#region Props\n\n /**\n * Texto del botón.\n */\n @Prop() label!: string;\n\n /**\n * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.\n * Para ver más información al respecto, lea la documentación del componente.\n */\n @Prop()\n color: 'primary' | 'success' | 'warning' | 'error' | 'basic' = 'primary';\n\n /**\n * Icono del botón.\n * Consulta todos los iconos disponibles en: https://fonts.google.com/icons\n */\n @Prop()\n icon!: string;\n\n /**\n * Deshabilita el botón para que no pueda ser pulsado.\n */\n @Prop()\n disabled = false;\n\n /**\n * Tipo de botón.\n */\n @Prop()\n type: '' | 'icon' | 'fab' = '';\n\n /**\n * Permite mostrar una animación de carga mientras se realiza alguna acción.\n * Al activarse esta opción, el botón se deshabilita.\n */\n @Prop()\n loading = false;\n\n /**\n * Tamaño del botón.\n */\n @Prop()\n size: 'small' | 'medium' | 'large' = 'medium';\n\n //#endregion\n\n //#region Variables privadas\n\n // Tag <button> del DOM.\n button!: HTMLButtonElement;\n\n //#endregion\n\n //#region Events\n\n /**\n * Evento del botón al ser pulsado.\n */\n @Event({ bubbles: false, composed: false }) buttonClicked: EventEmitter<Event>;\n\n /**\n * Evento del botón al ser enfocado.\n */\n @Event() buttonFocused: EventEmitter<Event>;\n\n //#endregion\n\n //#region Handlers\n\n //FIXME: Cuando loading se pone en true, también debería mantenerse disabled en true hasta que termine. Ahora se pone disabled a false antes de tiempo y rompe el funcionamiento.\n\n /**\n * Método que se ejecuta al hacer clic y emite el evento.\n * @param ev\n */\n handleClick = (ev: Event) => {\n // Evitamos que el evento burbujee.\n ev.stopPropagation();\n\n // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.\n this.button.disabled = true;\n setTimeout(() => {\n if (!this.loading) {\n this.button.disabled = false;\n }\n }, 1000);\n\n // Lanzamos el evento.\n this.buttonClicked.emit(ev);\n };\n\n /**\n * Método que se ejecuta cuando se ha hecho focus en el botón.\n * @param ev\n */\n handleFocus = (ev: Event) => {\n this.buttonFocused.emit(ev);\n };\n\n //#endregion\n\n render() {\n // Validamos que todos los campos están rellenos.\n const requiredFiles: Record<string, any> = { label: this.label, icon: this.icon };\n if (!RequieredPropsUtils.check(requiredFiles)) return;\n\n return (\n <button\n class={`${this.size}`}\n color={this.color}\n type={this.type}\n onClick={this.handleClick}\n disabled={this.disabled || this.loading}\n onFocus={this.handleFocus}\n ref={(el) => (this.button = el as HTMLButtonElement)}\n title={this.label}\n >\n {\n // Comprobamos si se muestra cargando\n !this.loading ? (\n <iris-icon icon={this.icon} size={this.size}></iris-icon>\n ) : (\n <div class=\"loading\">\n <iris-loading size=\"small\" color={this.color}></iris-loading>\n </div>\n )\n }\n {\n // Solo añadimos el label para los botones normales.\n this.type == 'icon' || this.type == 'fab' ? '' : this.label\n }\n </button>\n );\n }\n}\n"]}
package/dist/components/index.js CHANGED
@@ -1,8 +1,10 @@
1
+ const globalStyles = "@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)}}/*!\n * Toastify js 1.12.0\n * https://github.com/apvarun/toastify-js\n * @license MIT licensed\n *\n * Copyright (C) 2018 Varun A P\n */.toastify{padding:12px 20px;color:#ffffff;display:inline-block;box-shadow:0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);background:-webkit-linear-gradient(315deg, #73a5ff, #5477f5);background:linear-gradient(135deg, #73a5ff, #5477f5);position:fixed;opacity:0;transition:all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);border-radius:2px;cursor:pointer;text-decoration:none;max-width:calc(50% - 20px);z-index:2147483647}.toastify.on{opacity:1}.toast-close{background:transparent;border:0;color:white;cursor:pointer;font-family:inherit;font-size:1em;opacity:0.4;padding:0 5px}.toastify-right{right:15px}.toastify-left{left:15px}.toastify-top{top:-150px}.toastify-bottom{bottom:-150px}.toastify-rounded{border-radius:25px}.toastify-avatar{width:1.5em;height:1.5em;margin:-7px 5px;border-radius:2px}.toastify-center{margin-left:auto;margin-right:auto;left:0;right:0;max-width:fit-content;max-width:-moz-fit-content}@media only screen and (max-width: 360px){.toastify-right,.toastify-left{margin-left:auto;margin-right:auto;left:0;right:0;max-width:fit-content}}.toastify{background:none;background-image:none;box-shadow:0px 2px 4px rgba(0, 0, 0, 0.15);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:16px;background-color:var(--company-primary-light);color:var(--company-primary-dark);display:-ms-flexbox;display:-webkit-box;display:flex;flex-direction:column;gap:8px;min-width:400px;overflow-wrap:break-word;height:auto}.toastify .button-group{display:-ms-flexbox;display:-webkit-box;display:flex;justify-content:flex-end;gap:8px}.toastify .title{margin:0;margin-bottom:10px;font-size:1.2em;font-weight:bold}.toastify>iris-button{position:absolute;top:4px;right:8px;z-index:2}.toastify:not(:has(>.title)){font-weight:bold}.toastify.success{background-color:var(--green-50);color:var(--company-success-dark)}.toastify.error{background-color:var(--red-50);color:var(--company-error-dark)}.toastify.warning{background-color:var(--orange-50);color:var(--company-warning-dark)}.toastify.note{background-color:var(--company-note-light);color:var(--company-note-dark)}.toastify.question{background-color:var(--cyan-50);color:var(--company-question-dark)}@keyframes toastifyProgressBar{from{width:100%}to{width:0}}.toastify>.progressbar{background-color:inherit;mix-blend-mode:multiply;width:100%;height:2px;position:absolute;bottom:0px;left:0;border-radius:5px;animation:toastifyProgressBar}.toastify.stop-on-focus:hover .progressbar,.toastify.stop-on-focus:focus .progressbar{animation:none}@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\");}";
2
+
1
3
  const NAMESPACE = 'iris-button';
2
4
  const BUILD = /* iris-button */ { hydratedSelectorName: "hydrated", lazyLoad: false, updatable: true, watchCallback: false };
3
5
 
4
6
  /*
5
- Stencil Client Platform v4.31.0 | MIT Licensed | https://stenciljs.com
7
+ Stencil Client Platform v4.33.0 | MIT Licensed | https://stenciljs.com
6
8
  */
7
9
  var __defProp = Object.defineProperty;
8
10
  var __export = (target, all) => {
@@ -10,10 +12,6 @@ var __export = (target, all) => {
10
12
  __defProp(target, name, { get: all[name], enumerable: true });
11
13
  };
12
14
 
13
- // src/utils/constants.ts
14
- var SVG_NS = "http://www.w3.org/2000/svg";
15
- var HTML_NS = "http://www.w3.org/1999/xhtml";
16
-
17
15
  // src/client/client-host-ref.ts
18
16
  var getHostRef = (ref) => {
19
17
  if (ref.__stencil__getHostRef) {
@@ -171,6 +169,12 @@ var unwrapErr = (result) => {
171
169
  throw result.value;
172
170
  }
173
171
  };
172
+ function createShadowRoot(cmpMeta) {
173
+ const shadowRoot = this.attachShadow({ mode: "open" });
174
+ const sheet = new CSSStyleSheet();
175
+ sheet.replaceSync(globalStyles);
176
+ shadowRoot.adoptedStyleSheets.push(sheet);
177
+ }
174
178
  var createTime = (fnName, tagName = "") => {
175
179
  {
176
180
  return () => {
@@ -411,7 +415,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
411
415
  }
412
416
  } else {
413
417
  const isComplex = isComplexType(newValue);
414
- if ((isProp || isComplex && newValue !== null) && !isSvg) {
418
+ if ((isProp || isComplex && newValue !== null) && true) {
415
419
  try {
416
420
  if (!elm.tagName.includes("-")) {
417
421
  const n = newValue == null ? "" : newValue;
@@ -504,21 +508,14 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
504
508
  if (newVNode2.$text$ !== null) {
505
509
  elm = newVNode2.$elm$ = win.document.createTextNode(newVNode2.$text$);
506
510
  } else {
507
- if (!isSvgMode) {
508
- isSvgMode = newVNode2.$tag$ === "svg";
509
- }
510
511
  if (!win.document) {
511
512
  throw new Error(
512
513
  "You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component."
513
514
  );
514
515
  }
515
- elm = newVNode2.$elm$ = win.document.createElementNS(
516
- isSvgMode ? SVG_NS : HTML_NS,
516
+ elm = newVNode2.$elm$ = win.document.createElement(
517
517
  newVNode2.$tag$
518
- ) ;
519
- if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
520
- isSvgMode = false;
521
- }
518
+ );
522
519
  {
523
520
  updateElement(null, newVNode2, isSvgMode);
524
521
  }
@@ -530,13 +527,6 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
530
527
  }
531
528
  }
532
529
  }
533
- {
534
- if (newVNode2.$tag$ === "svg") {
535
- isSvgMode = false;
536
- } else if (elm.tagName === "foreignObject") {
537
- isSvgMode = true;
538
- }
539
- }
540
530
  }
541
531
  elm["s-hn"] = hostTagName;
542
532
  return elm;
@@ -644,12 +634,8 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
644
634
  const elm = newVNode2.$elm$ = oldVNode.$elm$;
645
635
  const oldChildren = oldVNode.$children$;
646
636
  const newChildren = newVNode2.$children$;
647
- const tag = newVNode2.$tag$;
648
637
  const text = newVNode2.$text$;
649
638
  if (text === null) {
650
- {
651
- isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
652
- }
653
639
  {
654
640
  updateElement(oldVNode, newVNode2, isSvgMode);
655
641
  }
@@ -666,9 +652,6 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
666
652
  ) {
667
653
  removeVnodes(oldChildren, 0, oldChildren.length - 1);
668
654
  }
669
- if (isSvgMode && tag === "svg") {
670
- isSvgMode = false;
671
- }
672
655
  } else if (oldVNode.$text$ !== text) {
673
656
  elm.data = text;
674
657
  }
@@ -1092,9 +1075,7 @@ var proxyCustomElement = (Cstr, compactMeta) => {
1092
1075
  __attachShadow() {
1093
1076
  {
1094
1077
  if (!this.shadowRoot) {
1095
- {
1096
- this.attachShadow({ mode: "open" });
1097
- }
1078
+ createShadowRoot.call(this, cmpMeta);
1098
1079
  } else {
1099
1080
  if (this.shadowRoot.mode !== "open") {
1100
1081
  throw new Error(