@atmgrupomaggioli/iris-button 0.0.2 → 0.1.0-dev.0

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 (40) hide show
  1. package/dist/cjs/{index-f882627f.js → index-f786c569.js} +391 -539
  2. package/dist/cjs/index-f786c569.js.map +1 -0
  3. package/dist/cjs/iris-button.cjs.entry.js +66 -10
  4. package/dist/cjs/iris-button.cjs.entry.js.map +1 -1
  5. package/dist/cjs/iris-button.cjs.js +3 -3
  6. package/dist/cjs/iris-button.cjs.js.map +1 -1
  7. package/dist/cjs/loader.cjs.js +2 -2
  8. package/dist/collection/collection-manifest.json +1 -1
  9. package/dist/collection/components/iris-button/iris-button.css +40 -13
  10. package/dist/collection/components/iris-button/iris-button.js +153 -14
  11. package/dist/collection/components/iris-button/iris-button.js.map +1 -1
  12. package/dist/components/index.js +1 -1
  13. package/dist/components/iris-button.js +72 -14
  14. package/dist/components/iris-button.js.map +1 -1
  15. package/dist/components/{p-f7558cea.js → p-913b636c.js} +341 -509
  16. package/dist/components/p-913b636c.js.map +1 -0
  17. package/dist/esm/{index-000f519f.js → index-45a8db1c.js} +391 -540
  18. package/dist/esm/index-45a8db1c.js.map +1 -0
  19. package/dist/esm/iris-button.entry.js +66 -10
  20. package/dist/esm/iris-button.entry.js.map +1 -1
  21. package/dist/esm/iris-button.js +4 -4
  22. package/dist/esm/iris-button.js.map +1 -1
  23. package/dist/esm/loader.js +3 -3
  24. package/dist/iris-button/iris-button.css +1 -1
  25. package/dist/iris-button/iris-button.esm.js +1 -1
  26. package/dist/iris-button/iris-button.esm.js.map +1 -1
  27. package/dist/iris-button/p-705a656b.js +3 -0
  28. package/dist/iris-button/p-705a656b.js.map +1 -0
  29. package/dist/iris-button/p-cbf16ce7.entry.js +2 -0
  30. package/dist/iris-button/p-cbf16ce7.entry.js.map +1 -0
  31. package/dist/types/components/iris-button/iris-button.d.ts +32 -4
  32. package/dist/types/components.d.ts +49 -7
  33. package/package.json +5 -8
  34. package/dist/cjs/index-f882627f.js.map +0 -1
  35. package/dist/components/p-f7558cea.js.map +0 -1
  36. package/dist/esm/index-000f519f.js.map +0 -1
  37. package/dist/iris-button/p-a8ef57f6.entry.js +0 -2
  38. package/dist/iris-button/p-a8ef57f6.entry.js.map +0 -1
  39. package/dist/iris-button/p-c58bb129.js +0 -3
  40. package/dist/iris-button/p-c58bb129.js.map +0 -1
@@ -1 +1 @@
1
- {"file":"iris-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,4jDAA4jD,CAAC;AACnlD,yBAAe,aAAa;;MCMf,SAAS;;;qBAMgD,EAAE;;wBAa3D,KAAK;sBAMP,KAAK;;IAEd,MAAM;QACJ,QACEA,qEAAQ,KAAK,EAAE,IAAI,CAAC,KAAK,IAErB,IAAI,CAAC,IAAI,IAAI,IAAI;cACfA,kBAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,IAAI,CAAQ;cACzD,EAAE,EAENA,oEAAa,CACN,EACT;KACH;;;;;;","names":["h"],"sources":["src/components/iris-button/iris-button.scss?tag=iris-button","src/components/iris-button/iris-button.tsx"],"sourcesContent":["@use \"_mixins.scss\" as m;\n\n:host {\n display: inline-block;\n}\n\n// Estilos genéricos para los botones.\nbutton {\n padding: 10px 12px;\n color: var(--white);\n background-color: var(--company-primary-dark);\n @include m.animation(background-color);\n border: none;\n @include m.border-radius(5px);\n @include m.flex;\n align-items: center;\n cursor: pointer;\n gap: .1rem;\n\n &:hover {\n background-color: var(--company-primary-focus);\n }\n\n //Incluye un borde al hacer click y al usar tabs.\n @include m.focus-border;\n\n .material-symbols-outlined,\n i {\n font-size: var(--font-size-icon);\n }\n //Aplica un margen al icono en los botones por defecto para separarlo del texto.\n &:not(.icon) .material-symbols-outlined {\n margin-right: 5px;\n }\n\n //Estilos por defecto de los iconos\n &.icon {\n @include m.border-radius(50%);\n height: 36px;\n width: 36px;\n padding: 0;\n @include m.flex;\n justify-content: center;\n }\n\n /*#region Colores de los botones.*/\n\n /*Este mixin recibe el tipo\n y se utiliza para concatenar strings, de tal modo que se pasa por parámetro parte de las clases y propiedades.*/\n @mixin deco($type) {\n &.#{$type} {\n background-color: var(--company-#{$type}-dark);\n\n &:hover {\n background-color: var(--company-#{$type}-focus);\n }\n }\n }\n\n @include deco(success);\n @include deco(warning);\n @include deco(error);\n\n &.basic {\n background-color: var(--company-basic-light);\n color: var(--company-basic-dark);\n\n &:hover {\n background-color: var(--company-basic-focus);\n }\n }\n // Botón desabilitado + controles de accesibilidad.\n &:disabled {\n background-color: var(--company-basic-focus);\n color: var(--company-basic-light);\n cursor: not-allowed;\n\n &:hover {\n background-color: var(--company-basic-focus);\n }\n }\n /*#endregion*/\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'iris-button', // Nombre del componente.\n styleUrl: 'iris-button.scss', // [default=null] Ruta de la hoja de estilos del componente.\n shadow: false, // [default=false] Indica si el componente Irá alojado en el DOM o en el ShadowDom.\n})\nexport class AtmButton {\n /**\n * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.\n * Para ver más información al respecto, lea la documentación del componente.\n */\n @Prop()\n color: '' | 'primary' | 'success' | 'warning' | 'error' | 'basic' = '';\n\n /**\n * Icono del botón.\n * Consulta todos los iconos disponibles en: https://fonts.google.com/icons\n */\n @Prop()\n icon: string;\n\n /**\n * Deshabilita el botón para que no pueda ser pulsado.\n */\n @Prop()\n disabled = false;\n\n /**\n * Indica el tipo de botón.\n */\n @Prop()\n isIcon = false;\n\n render() {\n return (\n <button class={this.color}>\n {\n this.icon != null\n ? <span class=\"material-symbols-rounded\">{this.icon}</span>\n : \"\"\n }\n <slot></slot>\n </button>\n );\n }\n}\n"],"version":3}
1
+ {"file":"iris-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,ogEAAogE,CAAC;AAC3hE,yBAAe,aAAa;;MCMf,UAAU;IALvB;;;;;;;;QAoBE,UAAK,GAA0D,SAAS,CAAC;;;;QAazE,aAAQ,GAAG,KAAK,CAAC;;;;QAMjB,SAAI,GAAwB,EAAE,CAAC;;;;;QAO/B,YAAO,GAAG,KAAK,CAAC;;;;;;;;;QA4BR,gBAAW,GAAG,CAAC,EAAS;;YAE9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,UAAU,CAAC;gBACT,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;aACvB,EAAE,IAAI,CAAC,CAAC;;YAGT,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC7B,CAAC;;;;;QAMM,gBAAW,GAAG,CAAC,EAAS;YAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC7B,CAAA;KAsCF;;IAlCC,MAAM;;QAEJ,IAAI;YACF,IAAI,CAAC,IAAI,CAAC,KAAK;gBACb,OAAO,yCAAyC,EAAE;YACpD,IAAI,CAAC,IAAI,CAAC,IAAI;gBACZ,OAAO,wCAAwC,EAAE;SAEpD;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACjB,OAAO;SACR;QAED,QACEA,oBACE,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,KAAK,EAAE,IAAI,CAAC,KAAK;QAEf,CAAC,IAAI,CAAC,OAAO;cACTA,kBAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,IAAI,CAAQ;cACzDA,eAAG,KAAK,EAAC,SAAS,IAACA,iBAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAACA,kBAAM,OAAO,EAAC,MAAM,EAAC,CAAC,EAAC,mHAAmH,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,GAAQ,EAAAA,kBAAM,OAAO,EAAC,MAAM,EAAC,CAAC,EAAC,yFAAyF,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,GAAQ,CAAM,CAAI;QAGxd,IAAI,CAAC,IAAI,IAAI,EAAE;cACX,IAAI,CAAC,KAAK;cACV,EAAE,CAED,EACT;KACH;;;;;;","names":["h"],"sources":["src/components/iris-button/iris-button.scss?tag=iris-button&encapsulation=shadow","src/components/iris-button/iris-button.tsx"],"sourcesContent":["@use \"_mixins.scss\" as m;\n\n@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:host {\n display: inline-block;\n}\n\n// Estilos genéricos para los botones.\nbutton {\n padding: 8px 12px;\n color: #fff;\n background-color: var(--company-primary-dark);\n @include m.animation(background-color);\n border: none;\n @include m.border-radius(5px);\n @include m.flex;\n align-items: center;\n cursor: pointer;\n gap: 0.1rem;\n font-family: var(--font-primary);\n\n &:hover {\n background-color: var(--company-primary-focus);\n }\n\n //Incluye un borde al hacer click y al usar tabs.\n @include m.focus-border;\n\n .material-symbols-rounded,\n i {\n font-family: var(--font-family-material-icons);\n font-size: var(--font-size-icon);\n }\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 // Estilos por defecto de los iconos\n &[type=\"fab\"] {\n @include m.border-radius(50%);\n height: 36px;\n width: 36px;\n padding: 0;\n @include m.flex;\n justify-content: center;\n\n }\n\n // Animación de carga.\n .loading {\n animation: show-loading 1s 1;\n\n svg {\n animation: spin 1s infinite;\n color: var(--primary);\n height: var(--font-size-icon);\n }\n }\n\n /*#region Colores de los botones.*/\n\n /*Este mixin recibe el tipo\n y se utiliza para concatenar strings, de tal modo que se pasa por parámetro parte de las clases y propiedades.*/\n @mixin deco($type) {\n &[color=\"#{$type}\"] {\n background-color: var(--company-#{$type}-dark);\n\n &:hover {\n background-color: var(--company-#{$type}-focus);\n }\n }\n }\n\n @include deco(success);\n @include deco(warning);\n @include deco(error);\n\n &[color=\"basic\"] {\n background-color: var(--company-basic-light);\n color: var(--company-basic-dark);\n\n &:hover {\n background-color: var(--company-basic-focus);\n }\n }\n // Botón desabilitado + controles de accesibilidad.\n &:disabled {\n background-color: var(--company-basic-focus);\n color: var(--company-basic-light);\n cursor: not-allowed;\n\n &:hover {\n background-color: var(--company-basic-focus);\n }\n }\n /*#endregion*/\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n@Component({\n tag: 'iris-button',\n styleUrl: 'iris-button.scss',\n shadow: true,\n})\nexport class IrisButton {\n\n //#region Props\n\n /**\n * Texto del botón.\n */\n @Prop()\n 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({ mutable: true })\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 //#endregion\n\n //#region Events\n\n /**\n * Evento del botón al ser pulsado.\n */\n @Event() 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 Methods\n\n //#endregion\n\n //#region Handlers\n\n /**\n * Método que se ejecuta al hacer clic y emite el evento.\n * @param ev\n */\n private handleClick = (ev: Event) => {\n // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.\n this.disabled = true;\n setTimeout(() => {\n this.disabled = false;\n }, 1000);\n\n // Lanzamos el evento.\n this.buttonClicked.emit(ev);\n };\n\n /**\n * Método que se ejecuta cuando se ha hecho focus en el botón.\n * @param ev\n */\n private handleFocus = (ev: Event) => {\n this.buttonFocused.emit(ev);\n }\n\n //#endregion\n\n render() {\n // Validamos que todos los campos están rellenos.\n try {\n if (!this.label)\n throw (\"No se ha definido la propiedad 'label'.\");\n if (!this.icon)\n throw (\"No se ha definido la propiedad 'icon'.\");\n\n } catch (e) {\n console.error(e);\n return;\n }\n\n return (\n <button\n color={this.color}\n type={this.type}\n onClick={this.handleClick}\n disabled={this.disabled || this.loading}\n onFocus={this.handleFocus}\n title={this.label}>\n { // Comprobamos si se muestra cargando\n !this.loading\n ? <span class=\"material-symbols-rounded\">{this.icon}</span>\n : <i class='loading'><svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><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'></path><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'></path></svg></i>\n }\n { // Solo añadimos el label para los botones normales.\n this.type == \"\"\n ? this.label\n : \"\"\n }\n </button>\n );\n }\n}\n"],"version":3}
@@ -2,11 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-f882627f.js');
5
+ const index = require('./index-f786c569.js');
6
6
  const appGlobals = require('./app-globals-3a1e7e63.js');
7
7
 
8
8
  /*
9
- Stencil Client Patch Browser v4.23.0 | MIT Licensed | https://stenciljs.com
9
+ Stencil Client Patch Browser v4.25.1 | MIT Licensed | https://stenciljs.com
10
10
  */
11
11
  var patchBrowser = () => {
12
12
  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('iris-button.cjs.js', document.baseURI).href));
@@ -19,7 +19,7 @@ var patchBrowser = () => {
19
19
 
20
20
  patchBrowser().then(async (options) => {
21
21
  await appGlobals.globalScripts();
22
- return index.bootstrapLazy([["iris-button.cjs",[[4,"iris-button",{"color":[1],"icon":[1],"disabled":[4],"isIcon":[4,"is-icon"]}]]]], options);
22
+ return index.bootstrapLazy([["iris-button.cjs",[[1,"iris-button",{"label":[1],"color":[1],"icon":[1],"disabled":[1028],"type":[1],"loading":[4]}]]]], options);
23
23
  });
24
24
 
25
25
  exports.setNonce = index.setNonce;
@@ -1 +1 @@
1
- {"file":"iris-button.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,6MAAe,CAAC;AACrC,EAAE,MAAM,IAAI,GAAiE,EAAE,CAAC;AAChF,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AACtD,GAAG;AACH,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.23.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, doc, H, promiseResolve } 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 ? Array.from(doc.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"],"version":3}
1
+ {"file":"iris-button.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,6MAAe,CAAC;AACrC,EAAE,MAAM,IAAI,GAAiE,EAAE,CAAC;AAChF,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AACtD,GAAG;AACH,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.25.1 | 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, doc, H, promiseResolve } 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 ? Array.from(doc.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"],"version":3}
@@ -2,13 +2,13 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-f882627f.js');
5
+ const index = require('./index-f786c569.js');
6
6
  const appGlobals = require('./app-globals-3a1e7e63.js');
7
7
 
8
8
  const defineCustomElements = async (win, options) => {
9
9
  if (typeof window === 'undefined') return undefined;
10
10
  await appGlobals.globalScripts();
11
- return index.bootstrapLazy([["iris-button.cjs",[[4,"iris-button",{"color":[1],"icon":[1],"disabled":[4],"isIcon":[4,"is-icon"]}]]]], options);
11
+ return index.bootstrapLazy([["iris-button.cjs",[[1,"iris-button",{"label":[1],"color":[1],"icon":[1],"disabled":[1028],"type":[1],"loading":[4]}]]]], options);
12
12
  };
13
13
 
14
14
  exports.setNonce = index.setNonce;
@@ -4,7 +4,7 @@
4
4
  ],
5
5
  "compiler": {
6
6
  "name": "@stencil/core",
7
- "version": "4.23.0",
7
+ "version": "4.25.1",
8
8
  "typescriptVersion": "5.5.4"
9
9
  },
10
10
  "collections": [],
@@ -1,11 +1,27 @@
1
1
  @charset "UTF-8";
2
+ @keyframes spin {
3
+ 0% {
4
+ transform: rotate(0deg);
5
+ }
6
+ 100% {
7
+ transform: rotate(360deg);
8
+ }
9
+ }
10
+ @keyframes show-loading {
11
+ 0% {
12
+ opacity: 0;
13
+ }
14
+ 100% {
15
+ opacity: 1;
16
+ }
17
+ }
2
18
  :host {
3
19
  display: inline-block;
4
20
  }
5
21
 
6
22
  button {
7
- padding: 10px 12px;
8
- color: var(--white);
23
+ padding: 8px 12px;
24
+ color: #fff;
9
25
  background-color: var(--company-primary-dark);
10
26
  -webkit-transition: background-color 0.5s ease;
11
27
  -ms-transition: background-color 0.5s ease;
@@ -20,6 +36,7 @@ button {
20
36
  align-items: center;
21
37
  cursor: pointer;
22
38
  gap: 0.1rem;
39
+ font-family: var(--font-primary);
23
40
  /*#region Colores de los botones.*/
24
41
  /*Este mixin recibe el tipo
25
42
  y se utiliza para concatenar strings, de tal modo que se pasa por parámetro parte de las clases y propiedades.*/
@@ -32,14 +49,16 @@ button:focus {
32
49
  outline: 2px solid var(--blue_light);
33
50
  outline-offset: 1px;
34
51
  }
35
- button .material-symbols-outlined,
52
+ button .material-symbols-rounded,
36
53
  button i {
54
+ font-family: var(--font-family-material-icons);
37
55
  font-size: var(--font-size-icon);
38
56
  }
39
- button:not(.icon) .material-symbols-outlined {
57
+ button:not([type=icon], [type=fab]) .material-symbols-rounded,
58
+ button:not([type=icon], [type=fab]) .loading {
40
59
  margin-right: 5px;
41
60
  }
42
- button.icon {
61
+ button[type=fab] {
43
62
  -webkit-border-radius: 50%;
44
63
  -moz-border-radius: 50%;
45
64
  border-radius: 50%;
@@ -51,29 +70,37 @@ button.icon {
51
70
  display: flex;
52
71
  justify-content: center;
53
72
  }
54
- button.success {
73
+ button .loading {
74
+ animation: show-loading 1s 1;
75
+ }
76
+ button .loading svg {
77
+ animation: spin 1s infinite;
78
+ color: var(--primary);
79
+ height: var(--font-size-icon);
80
+ }
81
+ button[color=success] {
55
82
  background-color: var(--company-success-dark);
56
83
  }
57
- button.success:hover {
84
+ button[color=success]:hover {
58
85
  background-color: var(--company-success-focus);
59
86
  }
60
- button.warning {
87
+ button[color=warning] {
61
88
  background-color: var(--company-warning-dark);
62
89
  }
63
- button.warning:hover {
90
+ button[color=warning]:hover {
64
91
  background-color: var(--company-warning-focus);
65
92
  }
66
- button.error {
93
+ button[color=error] {
67
94
  background-color: var(--company-error-dark);
68
95
  }
69
- button.error:hover {
96
+ button[color=error]:hover {
70
97
  background-color: var(--company-error-focus);
71
98
  }
72
- button.basic {
99
+ button[color=basic] {
73
100
  background-color: var(--company-basic-light);
74
101
  color: var(--company-basic-dark);
75
102
  }
76
- button.basic:hover {
103
+ button[color=basic]:hover {
77
104
  background-color: var(--company-basic-focus);
78
105
  }
79
106
  button:disabled {
@@ -1,17 +1,72 @@
1
1
  import { h } from "@stencil/core";
2
- export class AtmButton {
2
+ export class IrisButton {
3
3
  constructor() {
4
- this.color = '';
5
- this.icon = undefined;
4
+ /**
5
+ * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.
6
+ * Para ver más información al respecto, lea la documentación del componente.
7
+ */
8
+ this.color = 'primary';
9
+ /**
10
+ * Deshabilita el botón para que no pueda ser pulsado.
11
+ */
6
12
  this.disabled = false;
7
- this.isIcon = false;
13
+ /**
14
+ * Tipo de botón.
15
+ */
16
+ this.type = '';
17
+ /**
18
+ * Permite mostrar una animación de carga mientras se realiza alguna acción.
19
+ * Al activarse esta opción, el botón se deshabilita.
20
+ */
21
+ this.loading = false;
22
+ //#endregion
23
+ //#region Methods
24
+ //#endregion
25
+ //#region Handlers
26
+ /**
27
+ * Método que se ejecuta al hacer clic y emite el evento.
28
+ * @param ev
29
+ */
30
+ this.handleClick = (ev) => {
31
+ // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.
32
+ this.disabled = true;
33
+ setTimeout(() => {
34
+ this.disabled = false;
35
+ }, 1000);
36
+ // Lanzamos el evento.
37
+ this.buttonClicked.emit(ev);
38
+ };
39
+ /**
40
+ * Método que se ejecuta cuando se ha hecho focus en el botón.
41
+ * @param ev
42
+ */
43
+ this.handleFocus = (ev) => {
44
+ this.buttonFocused.emit(ev);
45
+ };
8
46
  }
47
+ //#endregion
9
48
  render() {
10
- return (h("button", { key: '7570a5749b80d8f3b46ed979a8b4dac5d7ac210d', class: this.color }, this.icon != null
49
+ // Validamos que todos los campos están rellenos.
50
+ try {
51
+ if (!this.label)
52
+ throw ("No se ha definido la propiedad 'label'.");
53
+ if (!this.icon)
54
+ throw ("No se ha definido la propiedad 'icon'.");
55
+ }
56
+ catch (e) {
57
+ console.error(e);
58
+ return;
59
+ }
60
+ return (h("button", { color: this.color, type: this.type, onClick: this.handleClick, disabled: this.disabled || this.loading, onFocus: this.handleFocus, title: this.label }, // Comprobamos si se muestra cargando
61
+ !this.loading
11
62
  ? h("span", { class: "material-symbols-rounded" }, this.icon)
12
- : "", h("slot", { key: 'ab234a494a6cf24f2d6c453af4db0e362fa67643' })));
63
+ : 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' }))), // Solo añadimos el label para los botones normales.
64
+ this.type == ""
65
+ ? this.label
66
+ : ""));
13
67
  }
14
68
  static get is() { return "iris-button"; }
69
+ static get encapsulation() { return "shadow"; }
15
70
  static get originalStyleUrls() {
16
71
  return {
17
72
  "$": ["iris-button.scss"]
@@ -24,12 +79,31 @@ export class AtmButton {
24
79
  }
25
80
  static get properties() {
26
81
  return {
82
+ "label": {
83
+ "type": "string",
84
+ "mutable": false,
85
+ "complexType": {
86
+ "original": "string",
87
+ "resolved": "string",
88
+ "references": {}
89
+ },
90
+ "required": true,
91
+ "optional": false,
92
+ "docs": {
93
+ "tags": [],
94
+ "text": "Texto del bot\u00F3n."
95
+ },
96
+ "getter": false,
97
+ "setter": false,
98
+ "attribute": "label",
99
+ "reflect": false
100
+ },
27
101
  "color": {
28
102
  "type": "string",
29
103
  "mutable": false,
30
104
  "complexType": {
31
- "original": "'' | 'primary' | 'success' | 'warning' | 'error' | 'basic'",
32
- "resolved": "\"\" | \"basic\" | \"error\" | \"primary\" | \"success\" | \"warning\"",
105
+ "original": "'primary' | 'success' | 'warning' | 'error' | 'basic'",
106
+ "resolved": "\"basic\" | \"error\" | \"primary\" | \"success\" | \"warning\"",
33
107
  "references": {}
34
108
  },
35
109
  "required": false,
@@ -42,7 +116,7 @@ export class AtmButton {
42
116
  "setter": false,
43
117
  "attribute": "color",
44
118
  "reflect": false,
45
- "defaultValue": "''"
119
+ "defaultValue": "'primary'"
46
120
  },
47
121
  "icon": {
48
122
  "type": "string",
@@ -52,7 +126,7 @@ export class AtmButton {
52
126
  "resolved": "string",
53
127
  "references": {}
54
128
  },
55
- "required": false,
129
+ "required": true,
56
130
  "optional": false,
57
131
  "docs": {
58
132
  "tags": [],
@@ -65,7 +139,7 @@ export class AtmButton {
65
139
  },
66
140
  "disabled": {
67
141
  "type": "boolean",
68
- "mutable": false,
142
+ "mutable": true,
69
143
  "complexType": {
70
144
  "original": "boolean",
71
145
  "resolved": "boolean",
@@ -83,7 +157,27 @@ export class AtmButton {
83
157
  "reflect": false,
84
158
  "defaultValue": "false"
85
159
  },
86
- "isIcon": {
160
+ "type": {
161
+ "type": "string",
162
+ "mutable": false,
163
+ "complexType": {
164
+ "original": "'' | 'icon' | 'fab'",
165
+ "resolved": "\"\" | \"fab\" | \"icon\"",
166
+ "references": {}
167
+ },
168
+ "required": false,
169
+ "optional": false,
170
+ "docs": {
171
+ "tags": [],
172
+ "text": "Tipo de bot\u00F3n."
173
+ },
174
+ "getter": false,
175
+ "setter": false,
176
+ "attribute": "type",
177
+ "reflect": false,
178
+ "defaultValue": "''"
179
+ },
180
+ "loading": {
87
181
  "type": "boolean",
88
182
  "mutable": false,
89
183
  "complexType": {
@@ -95,15 +189,60 @@ export class AtmButton {
95
189
  "optional": false,
96
190
  "docs": {
97
191
  "tags": [],
98
- "text": "Indica el tipo de bot\u00F3n."
192
+ "text": "Permite mostrar una animaci\u00F3n de carga mientras se realiza alguna acci\u00F3n.\nAl activarse esta opci\u00F3n, el bot\u00F3n se deshabilita."
99
193
  },
100
194
  "getter": false,
101
195
  "setter": false,
102
- "attribute": "is-icon",
196
+ "attribute": "loading",
103
197
  "reflect": false,
104
198
  "defaultValue": "false"
105
199
  }
106
200
  };
107
201
  }
202
+ static get events() {
203
+ return [{
204
+ "method": "buttonClicked",
205
+ "name": "buttonClicked",
206
+ "bubbles": true,
207
+ "cancelable": true,
208
+ "composed": true,
209
+ "docs": {
210
+ "tags": [],
211
+ "text": "Evento del bot\u00F3n al ser pulsado."
212
+ },
213
+ "complexType": {
214
+ "original": "Event",
215
+ "resolved": "Event",
216
+ "references": {
217
+ "Event": {
218
+ "location": "import",
219
+ "path": "@stencil/core",
220
+ "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event"
221
+ }
222
+ }
223
+ }
224
+ }, {
225
+ "method": "buttonFocused",
226
+ "name": "buttonFocused",
227
+ "bubbles": true,
228
+ "cancelable": true,
229
+ "composed": true,
230
+ "docs": {
231
+ "tags": [],
232
+ "text": "Evento del bot\u00F3n al ser enfocado."
233
+ },
234
+ "complexType": {
235
+ "original": "Event",
236
+ "resolved": "Event",
237
+ "references": {
238
+ "Event": {
239
+ "location": "import",
240
+ "path": "@stencil/core",
241
+ "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event"
242
+ }
243
+ }
244
+ }
245
+ }];
246
+ }
108
247
  }
109
248
  //# sourceMappingURL=iris-button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"iris-button.js","sourceRoot":"","sources":["../../../src/components/iris-button/iris-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,SAAS;;qBAMgD,EAAE;;wBAa3D,KAAK;sBAMP,KAAK;;IAEd,MAAM;QACJ,OAAO,CACL,+DAAQ,KAAK,EAAE,IAAI,CAAC,KAAK;YAErB,IAAI,CAAC,IAAI,IAAI,IAAI;gBACjB,CAAC,CAAC,YAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,IAAI,CAAQ;gBAC3D,CAAC,CAAC,EAAE;YAEN,8DAAa,CACN,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'iris-button', // Nombre del componente.\n styleUrl: 'iris-button.scss', // [default=null] Ruta de la hoja de estilos del componente.\n shadow: false, // [default=false] Indica si el componente Irá alojado en el DOM o en el ShadowDom.\n})\nexport class AtmButton {\n /**\n * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.\n * Para ver más información al respecto, lea la documentación del componente.\n */\n @Prop()\n color: '' | 'primary' | 'success' | 'warning' | 'error' | 'basic' = '';\n\n /**\n * Icono del botón.\n * Consulta todos los iconos disponibles en: https://fonts.google.com/icons\n */\n @Prop()\n icon: string;\n\n /**\n * Deshabilita el botón para que no pueda ser pulsado.\n */\n @Prop()\n disabled = false;\n\n /**\n * Indica el tipo de botón.\n */\n @Prop()\n isIcon = false;\n\n render() {\n return (\n <button class={this.color}>\n {\n this.icon != null\n ? <span class=\"material-symbols-rounded\">{this.icon}</span>\n : \"\"\n }\n <slot></slot>\n </button>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"iris-button.js","sourceRoot":"","sources":["../../../src/components/iris-button/iris-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,UAAU;IALvB;QAeE;;;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;QAgBhB,YAAY;QAEZ,iBAAiB;QAEjB,YAAY;QAEZ,kBAAkB;QAElB;;;WAGG;QACK,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAClC,uFAAuF;YACvF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxB,CAAC,EAAE,IAAI,CAAC,CAAC;YAET,sBAAsB;YACtB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEF;;;WAGG;QACK,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAClC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC9B,CAAC,CAAA;KAsCF;IApCC,YAAY;IAEZ,MAAM;QACJ,iDAAiD;QACjD,IAAI,CAAC;YACH,IAAI,CAAC,IAAI,CAAC,KAAK;gBACb,MAAM,CAAC,yCAAyC,CAAC,CAAC;YACpD,IAAI,CAAC,IAAI,CAAC,IAAI;gBACZ,MAAM,CAAC,wCAAwC,CAAC,CAAC;QAErD,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACjB,OAAO;QACT,CAAC;QAED,OAAO,CACL,cACE,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,KAAK,EAAE,IAAI,CAAC,KAAK,IACf,qCAAqC;YACrC,CAAC,IAAI,CAAC,OAAO;gBACX,CAAC,CAAC,YAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,IAAI,CAAQ;gBAC3D,CAAC,CAAC,SAAG,KAAK,EAAC,SAAS;oBAAC,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;wBAAC,YAAM,OAAO,EAAC,MAAM,EAAC,CAAC,EAAC,mHAAmH,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,GAAQ;wBAAA,YAAM,OAAO,EAAC,MAAM,EAAC,CAAC,EAAC,yFAAyF,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,GAAQ,CAAM,CAAI,EAExd,oDAAoD;YACpD,IAAI,CAAC,IAAI,IAAI,EAAE;gBACb,CAAC,CAAC,IAAI,CAAC,KAAK;gBACZ,CAAC,CAAC,EAAE,CAED,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n@Component({\n tag: 'iris-button',\n styleUrl: 'iris-button.scss',\n shadow: true,\n})\nexport class IrisButton {\n\n //#region Props\n\n /**\n * Texto del botón.\n */\n @Prop()\n 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({ mutable: true })\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 //#endregion\n\n //#region Events\n\n /**\n * Evento del botón al ser pulsado.\n */\n @Event() 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 Methods\n\n //#endregion\n\n //#region Handlers\n\n /**\n * Método que se ejecuta al hacer clic y emite el evento.\n * @param ev\n */\n private handleClick = (ev: Event) => {\n // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.\n this.disabled = true;\n setTimeout(() => {\n this.disabled = false;\n }, 1000);\n\n // Lanzamos el evento.\n this.buttonClicked.emit(ev);\n };\n\n /**\n * Método que se ejecuta cuando se ha hecho focus en el botón.\n * @param ev\n */\n private handleFocus = (ev: Event) => {\n this.buttonFocused.emit(ev);\n }\n\n //#endregion\n\n render() {\n // Validamos que todos los campos están rellenos.\n try {\n if (!this.label)\n throw (\"No se ha definido la propiedad 'label'.\");\n if (!this.icon)\n throw (\"No se ha definido la propiedad 'icon'.\");\n\n } catch (e) {\n console.error(e);\n return;\n }\n\n return (\n <button\n color={this.color}\n type={this.type}\n onClick={this.handleClick}\n disabled={this.disabled || this.loading}\n onFocus={this.handleFocus}\n title={this.label}>\n { // Comprobamos si se muestra cargando\n !this.loading\n ? <span class=\"material-symbols-rounded\">{this.icon}</span>\n : <i class='loading'><svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><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'></path><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'></path></svg></i>\n }\n { // Solo añadimos el label para los botones normales.\n this.type == \"\"\n ? this.label\n : \"\"\n }\n </button>\n );\n }\n}\n"]}
@@ -1,4 +1,4 @@
1
- export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-f7558cea.js';
1
+ export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
2
2
 
3
3
  function format(first, middle, last) {
4
4
  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
@@ -1,28 +1,87 @@
1
- import { p as proxyCustomElement, H, h } from './p-f7558cea.js';
1
+ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
2
 
3
- const irisButtonCss = "@charset \"UTF-8\";:host{display:inline-block}button{padding:10px 12px;color:var(--white);background-color:var(--company-primary-dark);-webkit-transition:background-color 0.5s ease;-ms-transition:background-color 0.5s ease;transition:background-color 0.5s ease;border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:-ms-flexbox;display:-webkit-box;display:flex;align-items:center;cursor:pointer;gap:0.1rem;}button:hover{background-color:var(--company-primary-focus)}button:focus{outline:2px solid var(--blue_light);outline-offset:1px}button .material-symbols-outlined,button i{font-size:var(--font-size-icon)}button:not(.icon) .material-symbols-outlined{margin-right:5px}button.icon{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;height:36px;width:36px;padding:0;display:-ms-flexbox;display:-webkit-box;display:flex;justify-content:center}button.success{background-color:var(--company-success-dark)}button.success:hover{background-color:var(--company-success-focus)}button.warning{background-color:var(--company-warning-dark)}button.warning:hover{background-color:var(--company-warning-focus)}button.error{background-color:var(--company-error-dark)}button.error:hover{background-color:var(--company-error-focus)}button.basic{background-color:var(--company-basic-light);color:var(--company-basic-dark)}button.basic:hover{background-color:var(--company-basic-focus)}button:disabled{background-color:var(--company-basic-focus);color:var(--company-basic-light);cursor:not-allowed}button:disabled:hover{background-color:var(--company-basic-focus)}";
3
+ const irisButtonCss = "@charset \"UTF-8\";@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes show-loading{0%{opacity:0}100%{opacity:1}}:host{display:inline-block}button{padding:8px 12px;color:#fff;background-color:var(--company-primary-dark);-webkit-transition:background-color 0.5s ease;-ms-transition:background-color 0.5s ease;transition:background-color 0.5s ease;border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:-ms-flexbox;display:-webkit-box;display:flex;align-items:center;cursor:pointer;gap:0.1rem;font-family:var(--font-primary);}button:hover{background-color:var(--company-primary-focus)}button:focus{outline:2px solid var(--blue_light);outline-offset:1px}button .material-symbols-rounded,button i{font-family:var(--font-family-material-icons);font-size:var(--font-size-icon)}button:not([type=icon],[type=fab]) .material-symbols-rounded,button:not([type=icon],[type=fab]) .loading{margin-right:5px}button[type=fab]{-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}button .loading svg{animation:spin 1s infinite;color:var(--primary);height:var(--font-size-icon)}button[color=success]{background-color:var(--company-success-dark)}button[color=success]:hover{background-color:var(--company-success-focus)}button[color=warning]{background-color:var(--company-warning-dark)}button[color=warning]:hover{background-color:var(--company-warning-focus)}button[color=error]{background-color:var(--company-error-dark)}button[color=error]:hover{background-color:var(--company-error-focus)}button[color=basic]{background-color:var(--company-basic-light);color:var(--company-basic-dark)}button[color=basic]:hover{background-color:var(--company-basic-focus)}button:disabled{background-color:var(--company-basic-focus);color:var(--company-basic-light);cursor:not-allowed}button:disabled:hover{background-color:var(--company-basic-focus)}";
4
4
  const IrisButtonStyle0 = irisButtonCss;
5
5
 
6
- const AtmButton = /*@__PURE__*/ proxyCustomElement(class AtmButton extends H {
6
+ const IrisButton$1 = /*@__PURE__*/ proxyCustomElement(class IrisButton extends HTMLElement {
7
7
  constructor() {
8
8
  super();
9
9
  this.__registerHost();
10
- this.color = '';
11
- this.icon = undefined;
10
+ this.__attachShadow();
11
+ this.buttonClicked = createEvent(this, "buttonClicked", 7);
12
+ this.buttonFocused = createEvent(this, "buttonFocused", 7);
13
+ /**
14
+ * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.
15
+ * Para ver más información al respecto, lea la documentación del componente.
16
+ */
17
+ this.color = 'primary';
18
+ /**
19
+ * Deshabilita el botón para que no pueda ser pulsado.
20
+ */
12
21
  this.disabled = false;
13
- this.isIcon = false;
22
+ /**
23
+ * Tipo de botón.
24
+ */
25
+ this.type = '';
26
+ /**
27
+ * Permite mostrar una animación de carga mientras se realiza alguna acción.
28
+ * Al activarse esta opción, el botón se deshabilita.
29
+ */
30
+ this.loading = false;
31
+ //#endregion
32
+ //#region Methods
33
+ //#endregion
34
+ //#region Handlers
35
+ /**
36
+ * Método que se ejecuta al hacer clic y emite el evento.
37
+ * @param ev
38
+ */
39
+ this.handleClick = (ev) => {
40
+ // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.
41
+ this.disabled = true;
42
+ setTimeout(() => {
43
+ this.disabled = false;
44
+ }, 1000);
45
+ // Lanzamos el evento.
46
+ this.buttonClicked.emit(ev);
47
+ };
48
+ /**
49
+ * Método que se ejecuta cuando se ha hecho focus en el botón.
50
+ * @param ev
51
+ */
52
+ this.handleFocus = (ev) => {
53
+ this.buttonFocused.emit(ev);
54
+ };
14
55
  }
56
+ //#endregion
15
57
  render() {
16
- return (h("button", { key: '7570a5749b80d8f3b46ed979a8b4dac5d7ac210d', class: this.color }, this.icon != null
58
+ // Validamos que todos los campos están rellenos.
59
+ try {
60
+ if (!this.label)
61
+ throw ("No se ha definido la propiedad 'label'.");
62
+ if (!this.icon)
63
+ throw ("No se ha definido la propiedad 'icon'.");
64
+ }
65
+ catch (e) {
66
+ console.error(e);
67
+ return;
68
+ }
69
+ return (h("button", { color: this.color, type: this.type, onClick: this.handleClick, disabled: this.disabled || this.loading, onFocus: this.handleFocus, title: this.label }, // Comprobamos si se muestra cargando
70
+ !this.loading
17
71
  ? h("span", { class: "material-symbols-rounded" }, this.icon)
18
- : "", h("slot", { key: 'ab234a494a6cf24f2d6c453af4db0e362fa67643' })));
72
+ : 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' }))), // Solo añadimos el label para los botones normales.
73
+ this.type == ""
74
+ ? this.label
75
+ : ""));
19
76
  }
20
77
  static get style() { return IrisButtonStyle0; }
21
- }, [4, "iris-button", {
78
+ }, [1, "iris-button", {
79
+ "label": [1],
22
80
  "color": [1],
23
81
  "icon": [1],
24
- "disabled": [4],
25
- "isIcon": [4, "is-icon"]
82
+ "disabled": [1028],
83
+ "type": [1],
84
+ "loading": [4]
26
85
  }]);
27
86
  function defineCustomElement$1() {
28
87
  if (typeof customElements === "undefined") {
@@ -32,14 +91,13 @@ function defineCustomElement$1() {
32
91
  components.forEach(tagName => { switch (tagName) {
33
92
  case "iris-button":
34
93
  if (!customElements.get(tagName)) {
35
- customElements.define(tagName, AtmButton);
94
+ customElements.define(tagName, IrisButton$1);
36
95
  }
37
96
  break;
38
97
  } });
39
98
  }
40
- defineCustomElement$1();
41
99
 
42
- const IrisButton = AtmButton;
100
+ const IrisButton = IrisButton$1;
43
101
  const defineCustomElement = defineCustomElement$1;
44
102
 
45
103
  export { IrisButton, defineCustomElement };
@@ -1 +1 @@
1
- {"file":"iris-button.js","mappings":";;AAAA,MAAM,aAAa,GAAG,4jDAA4jD,CAAC;AACnlD,yBAAe,aAAa;;MCMf,SAAS;;;;qBAMgD,EAAE;;wBAa3D,KAAK;sBAMP,KAAK;;IAEd,MAAM;QACJ,QACE,+DAAQ,KAAK,EAAE,IAAI,CAAC,KAAK,IAErB,IAAI,CAAC,IAAI,IAAI,IAAI;cACf,YAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,IAAI,CAAQ;cACzD,EAAE,EAEN,8DAAa,CACN,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/iris-button/iris-button.scss?tag=iris-button","src/components/iris-button/iris-button.tsx"],"sourcesContent":["@use \"_mixins.scss\" as m;\n\n:host {\n display: inline-block;\n}\n\n// Estilos genéricos para los botones.\nbutton {\n padding: 10px 12px;\n color: var(--white);\n background-color: var(--company-primary-dark);\n @include m.animation(background-color);\n border: none;\n @include m.border-radius(5px);\n @include m.flex;\n align-items: center;\n cursor: pointer;\n gap: .1rem;\n\n &:hover {\n background-color: var(--company-primary-focus);\n }\n\n //Incluye un borde al hacer click y al usar tabs.\n @include m.focus-border;\n\n .material-symbols-outlined,\n i {\n font-size: var(--font-size-icon);\n }\n //Aplica un margen al icono en los botones por defecto para separarlo del texto.\n &:not(.icon) .material-symbols-outlined {\n margin-right: 5px;\n }\n\n //Estilos por defecto de los iconos\n &.icon {\n @include m.border-radius(50%);\n height: 36px;\n width: 36px;\n padding: 0;\n @include m.flex;\n justify-content: center;\n }\n\n /*#region Colores de los botones.*/\n\n /*Este mixin recibe el tipo\n y se utiliza para concatenar strings, de tal modo que se pasa por parámetro parte de las clases y propiedades.*/\n @mixin deco($type) {\n &.#{$type} {\n background-color: var(--company-#{$type}-dark);\n\n &:hover {\n background-color: var(--company-#{$type}-focus);\n }\n }\n }\n\n @include deco(success);\n @include deco(warning);\n @include deco(error);\n\n &.basic {\n background-color: var(--company-basic-light);\n color: var(--company-basic-dark);\n\n &:hover {\n background-color: var(--company-basic-focus);\n }\n }\n // Botón desabilitado + controles de accesibilidad.\n &:disabled {\n background-color: var(--company-basic-focus);\n color: var(--company-basic-light);\n cursor: not-allowed;\n\n &:hover {\n background-color: var(--company-basic-focus);\n }\n }\n /*#endregion*/\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'iris-button', // Nombre del componente.\n styleUrl: 'iris-button.scss', // [default=null] Ruta de la hoja de estilos del componente.\n shadow: false, // [default=false] Indica si el componente Irá alojado en el DOM o en el ShadowDom.\n})\nexport class AtmButton {\n /**\n * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.\n * Para ver más información al respecto, lea la documentación del componente.\n */\n @Prop()\n color: '' | 'primary' | 'success' | 'warning' | 'error' | 'basic' = '';\n\n /**\n * Icono del botón.\n * Consulta todos los iconos disponibles en: https://fonts.google.com/icons\n */\n @Prop()\n icon: string;\n\n /**\n * Deshabilita el botón para que no pueda ser pulsado.\n */\n @Prop()\n disabled = false;\n\n /**\n * Indica el tipo de botón.\n */\n @Prop()\n isIcon = false;\n\n render() {\n return (\n <button class={this.color}>\n {\n this.icon != null\n ? <span class=\"material-symbols-rounded\">{this.icon}</span>\n : \"\"\n }\n <slot></slot>\n </button>\n );\n }\n}\n"],"version":3}
1
+ {"file":"iris-button.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ogEAAogE,CAAC;AAC3hE,yBAAe,aAAa;;MCMfA,YAAU;IALvB;;;;;;;;;;QAoBE,UAAK,GAA0D,SAAS,CAAC;;;;QAazE,aAAQ,GAAG,KAAK,CAAC;;;;QAMjB,SAAI,GAAwB,EAAE,CAAC;;;;;QAO/B,YAAO,GAAG,KAAK,CAAC;;;;;;;;;QA4BR,gBAAW,GAAG,CAAC,EAAS;;YAE9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,UAAU,CAAC;gBACT,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;aACvB,EAAE,IAAI,CAAC,CAAC;;YAGT,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC7B,CAAC;;;;;QAMM,gBAAW,GAAG,CAAC,EAAS;YAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC7B,CAAA;KAsCF;;IAlCC,MAAM;;QAEJ,IAAI;YACF,IAAI,CAAC,IAAI,CAAC,KAAK;gBACb,OAAO,yCAAyC,EAAE;YACpD,IAAI,CAAC,IAAI,CAAC,IAAI;gBACZ,OAAO,wCAAwC,EAAE;SAEpD;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACjB,OAAO;SACR;QAED,QACE,cACE,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,KAAK,EAAE,IAAI,CAAC,KAAK;QAEf,CAAC,IAAI,CAAC,OAAO;cACT,YAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,IAAI,CAAQ;cACzD,SAAG,KAAK,EAAC,SAAS,IAAC,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAAC,YAAM,OAAO,EAAC,MAAM,EAAC,CAAC,EAAC,mHAAmH,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,GAAQ,EAAA,YAAM,OAAO,EAAC,MAAM,EAAC,CAAC,EAAC,yFAAyF,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,GAAQ,CAAM,CAAI;QAGxd,IAAI,CAAC,IAAI,IAAI,EAAE;cACX,IAAI,CAAC,KAAK;cACV,EAAE,CAED,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["IrisButton"],"sources":["src/components/iris-button/iris-button.scss?tag=iris-button&encapsulation=shadow","src/components/iris-button/iris-button.tsx"],"sourcesContent":["@use \"_mixins.scss\" as m;\n\n@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:host {\n display: inline-block;\n}\n\n// Estilos genéricos para los botones.\nbutton {\n padding: 8px 12px;\n color: #fff;\n background-color: var(--company-primary-dark);\n @include m.animation(background-color);\n border: none;\n @include m.border-radius(5px);\n @include m.flex;\n align-items: center;\n cursor: pointer;\n gap: 0.1rem;\n font-family: var(--font-primary);\n\n &:hover {\n background-color: var(--company-primary-focus);\n }\n\n //Incluye un borde al hacer click y al usar tabs.\n @include m.focus-border;\n\n .material-symbols-rounded,\n i {\n font-family: var(--font-family-material-icons);\n font-size: var(--font-size-icon);\n }\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 // Estilos por defecto de los iconos\n &[type=\"fab\"] {\n @include m.border-radius(50%);\n height: 36px;\n width: 36px;\n padding: 0;\n @include m.flex;\n justify-content: center;\n\n }\n\n // Animación de carga.\n .loading {\n animation: show-loading 1s 1;\n\n svg {\n animation: spin 1s infinite;\n color: var(--primary);\n height: var(--font-size-icon);\n }\n }\n\n /*#region Colores de los botones.*/\n\n /*Este mixin recibe el tipo\n y se utiliza para concatenar strings, de tal modo que se pasa por parámetro parte de las clases y propiedades.*/\n @mixin deco($type) {\n &[color=\"#{$type}\"] {\n background-color: var(--company-#{$type}-dark);\n\n &:hover {\n background-color: var(--company-#{$type}-focus);\n }\n }\n }\n\n @include deco(success);\n @include deco(warning);\n @include deco(error);\n\n &[color=\"basic\"] {\n background-color: var(--company-basic-light);\n color: var(--company-basic-dark);\n\n &:hover {\n background-color: var(--company-basic-focus);\n }\n }\n // Botón desabilitado + controles de accesibilidad.\n &:disabled {\n background-color: var(--company-basic-focus);\n color: var(--company-basic-light);\n cursor: not-allowed;\n\n &:hover {\n background-color: var(--company-basic-focus);\n }\n }\n /*#endregion*/\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n@Component({\n tag: 'iris-button',\n styleUrl: 'iris-button.scss',\n shadow: true,\n})\nexport class IrisButton {\n\n //#region Props\n\n /**\n * Texto del botón.\n */\n @Prop()\n 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({ mutable: true })\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 //#endregion\n\n //#region Events\n\n /**\n * Evento del botón al ser pulsado.\n */\n @Event() 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 Methods\n\n //#endregion\n\n //#region Handlers\n\n /**\n * Método que se ejecuta al hacer clic y emite el evento.\n * @param ev\n */\n private handleClick = (ev: Event) => {\n // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.\n this.disabled = true;\n setTimeout(() => {\n this.disabled = false;\n }, 1000);\n\n // Lanzamos el evento.\n this.buttonClicked.emit(ev);\n };\n\n /**\n * Método que se ejecuta cuando se ha hecho focus en el botón.\n * @param ev\n */\n private handleFocus = (ev: Event) => {\n this.buttonFocused.emit(ev);\n }\n\n //#endregion\n\n render() {\n // Validamos que todos los campos están rellenos.\n try {\n if (!this.label)\n throw (\"No se ha definido la propiedad 'label'.\");\n if (!this.icon)\n throw (\"No se ha definido la propiedad 'icon'.\");\n\n } catch (e) {\n console.error(e);\n return;\n }\n\n return (\n <button\n color={this.color}\n type={this.type}\n onClick={this.handleClick}\n disabled={this.disabled || this.loading}\n onFocus={this.handleFocus}\n title={this.label}>\n { // Comprobamos si se muestra cargando\n !this.loading\n ? <span class=\"material-symbols-rounded\">{this.icon}</span>\n : <i class='loading'><svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><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'></path><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'></path></svg></i>\n }\n { // Solo añadimos el label para los botones normales.\n this.type == \"\"\n ? this.label\n : \"\"\n }\n </button>\n );\n }\n}\n"],"version":3}