@atmgrupomaggioli/iris-button 0.2.4 → 0.2.5

package/dist/components/iris-button.js

@@ -16,7 +16,7 @@ const RequieredPropsUtils = {
     },
 };
 
-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}}";
+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}}";
 
 const IrisButton$1 = /*@__PURE__*/ proxyCustomElement(class IrisButton extends H {
     constructor() {
@@ -83,7 +83,7 @@ const IrisButton$1 = /*@__PURE__*/ proxyCustomElement(class IrisButton extends H
             return;
         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 }, 
         // Comprobamos si se muestra cargando
-        !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" })))), 
+        !this.loading ? (h("iris-icon", { icon: this.icon, size: this.size })) : (h("div", { class: "loading" }, h("iris-loading", { size: "small", color: this.color }))), 
         // Solo añadimos el label para los botones normales.
         this.type == 'icon' || this.type == 'fab' ? '' : this.label));
     }

package/dist/components/iris-button.js.map

@@ -1 +1 @@
-{"file":"iris-button.js","mappings":"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","names":["IrisButton","__stencil_proxyCustomElement","HTMLElement"],"sources":["../iris-utils/dist/esm/required_properties.js","src/components/iris-button/iris-button.scss?tag=iris-button&encapsulation=shadow","src/components/iris-button/iris-button.tsx"],"sourcesContent":["export const RequieredPropsUtils = {\n    ERROR_REQUIRED_PROP: 'REQUIRED_PROP',\n    check(props) {\n        const missing = Object.entries(props)\n            .filter(([_, value]) => value === undefined)\n            .map(([key]) => key);\n        if (missing.length > 0) {\n            console.error(`${RequieredPropsUtils.ERROR_REQUIRED_PROP}: No se han definido las siguientes propiedades: ${missing.join(', ')}`);\n            return false;\n        }\n        else {\n            return true;\n        }\n    },\n};\n//# sourceMappingURL=required_properties.js.map","@use '_mixins.scss' as m;\n\n//#region Keyframes\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes show-loading {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n//#endregion\n\n//#region Mixins\n\n// Mixin para los colores.\n@mixin deco($type) {\n  &[color='#{$type}'] {\n    background-color: var(--company-#{$type}-dark);\n\n    @if $type == 'basic' {\n      color: var(--black);\n      background-color: var(--company-#{$type}-light);\n    }\n\n    &:hover {\n      background-color: var(--company-#{$type}-focus);\n    }\n\n    // Botones tipo icon.\n    &[type='icon'] {\n      background-color: unset;\n      color: var(--company-#{$type}-dark);\n\n      &:hover {\n        background-color: var(--company-#{$type}-light);\n      }\n    }\n\n    // Cambio color animación loading.\n    .loading svg {\n      color: var(--company-#{$type}-dark);\n    }\n  }\n}\n\n// Mixin para los tamaños.\n@mixin size-variant($size, $scale) {\n  &.#{$size} {\n    font-size: calc(var(--font-size) * #{$scale});\n\n    // Botones tipo fab e icono.\n    &[type='fab'],\n    &[type='icon'] {\n      height: calc(36px * #{$scale});\n      width: calc(36px * #{$scale});\n    }\n  }\n}\n\n//#endregion\n\n:host {\n  display: inline-block;\n}\n\n// Estilos genéricos para los botones.\nbutton {\n  // Necesario para que el botón ocupe el 100% en pantallas pequeñas (iris-form).\n  width: 100%;\n  font-size: var(--font-size);\n  padding: 8px 12px;\n  color: var(--white);\n  background-color: var(--company-primary-dark);\n  @include m.animation(background-color);\n  border: none;\n  @include m.border-radius(5px);\n  @include m.flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  gap: 0.1rem;\n  font-family: var(--font-primary);\n\n  &:hover {\n    background-color: var(--company-primary-focus);\n  }\n\n  // Incluye un borde al hacer click y al usar tabs.\n  @include m.focus-border;\n\n  // Aplica un margen al icono en los botones por defecto para separarlo del texto.\n  &:not([type='icon'], [type='fab']) {\n    .material-symbols-rounded,\n    .loading {\n      margin-right: 5px;\n    }\n  }\n\n  // Botones tipo fab e icono.\n  &[type='fab'],\n  &[type='icon'] {\n    @include m.border-radius(50%);\n    height: 36px;\n    width: 36px;\n    padding: 0;\n    // Centramos el icono.\n    @include m.flex;\n    justify-content: center;\n  }\n\n  // Animación de carga.\n  .loading {\n    animation: show-loading 1s 1;\n    @include m.flex;\n    align-items: center;\n    // Los iconos de Material tienen 21px aprox de alto cuando el font-size es de 18.\n    height: calc(var(--font-size-icon) * 1.19);\n\n    svg {\n      animation: spin 1s infinite;\n      color: var(--primary);\n      height: var(--font-size-icon);\n    }\n  }\n\n  iris-icon {\n    @include m.flex;\n  }\n\n  //#region Colores de los botones\n\n  @include deco(primary);\n  @include deco(success);\n  @include deco(warning);\n  @include deco(error);\n  @include deco(basic);\n\n  // Botón deshabilitado + controles de accesibilidad.\n  &:disabled {\n    background-color: var(--company-basic-focus);\n    color: var(--company-basic-light);\n    cursor: not-allowed;\n\n    &:hover {\n      background-color: var(--company-basic-focus);\n    }\n  }\n  //#endregion\n\n  //#region Tamaño\n\n  @include size-variant(small, 0.8);\n  @include size-variant(large, 1.2);\n\n  //#endregion\n}\n\n@media (min-width: 576px) {\n  button {\n    width: auto;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\nimport { RequieredPropsUtils } from '@atmgrupomaggioli/iris-utils';\n\n@Component({\n  tag: 'iris-button',\n  styleUrl: 'iris-button.scss',\n  shadow: true,\n})\nexport class IrisButton {\n  //#region Props\n\n  /**\n   * Texto del botón.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.\n   * Para ver más información al respecto, lea la documentación del componente.\n   */\n  @Prop()\n  color: 'primary' | 'success' | 'warning' | 'error' | 'basic' = 'primary';\n\n  /**\n   * Icono del botón.\n   * Consulta todos los iconos disponibles en: https://fonts.google.com/icons\n   */\n  @Prop()\n  icon!: string;\n\n  /**\n   * Deshabilita el botón para que no pueda ser pulsado.\n   */\n  @Prop()\n  disabled = false;\n\n  /**\n   * Tipo de botón.\n   */\n  @Prop()\n  type: '' | 'icon' | 'fab' = '';\n\n  /**\n   * Permite mostrar una animación de carga mientras se realiza alguna acción.\n   * Al activarse esta opción, el botón se deshabilita.\n   */\n  @Prop()\n  loading = false;\n\n  /**\n   * Tamaño del botón.\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  //#endregion\n\n  //#region Variables privadas\n\n  // Tag <button> del DOM.\n  button!: HTMLButtonElement;\n\n  //#endregion\n\n  //#region Events\n\n  /**\n   * Evento del botón al ser pulsado.\n   */\n  @Event({ bubbles: false, composed: false }) buttonClicked: EventEmitter<Event>;\n\n  /**\n   * Evento del botón al ser enfocado.\n   */\n  @Event() buttonFocused: EventEmitter<Event>;\n\n  //#endregion\n\n  //#region Handlers\n\n  //FIXME: Cuando loading se pone en true, también debería mantenerse disabled en true hasta que termine. Ahora se pone disabled a false antes de tiempo y rompe el funcionamiento.\n\n  /**\n   * Método que se ejecuta al hacer clic y emite el evento.\n   * @param ev\n   */\n  handleClick = (ev: Event) => {\n    // Evitamos que el evento burbujee.\n    ev.stopPropagation();\n\n    // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.\n    this.button.disabled = true;\n    setTimeout(() => {\n      if (!this.loading) {\n        this.button.disabled = false;\n      }\n    }, 1000);\n\n    // Lanzamos el evento.\n    this.buttonClicked.emit(ev);\n  };\n\n  /**\n   * Método que se ejecuta cuando se ha hecho focus en el botón.\n   * @param ev\n   */\n  handleFocus = (ev: Event) => {\n    this.buttonFocused.emit(ev);\n  };\n\n  //#endregion\n\n  render() {\n    // Validamos que todos los campos están rellenos.\n    const requiredFiles: Record<string, any> = { label: this.label, icon: this.icon };\n    if (!RequieredPropsUtils.check(requiredFiles)) return;\n\n    return (\n      <button\n        class={`${this.size}`}\n        color={this.color}\n        type={this.type}\n        onClick={this.handleClick}\n        disabled={this.disabled || this.loading}\n        onFocus={this.handleFocus}\n        ref={(el) => (this.button = el as HTMLButtonElement)}\n        title={this.label}\n      >\n        {\n          // Comprobamos si se muestra cargando\n          !this.loading ? (\n            <iris-icon icon={this.icon} size={this.size}></iris-icon>\n          ) : (\n            <i class=\"loading\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  opacity=\"0.25\"\n                  d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"4\"\n                ></path>\n                <path\n                  opacity=\"0.75\"\n                  d=\"M10 2.2002C5.43552 3.12674 2 7.16224 2 12.0002C2 13.5118 2.3354 14.9451 2.93585 16.2297\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"4\"\n                  stroke-linecap=\"round\"\n                ></path>\n              </svg>\n            </i>\n          )\n        }\n        {\n          // Solo añadimos el label para los botones normales.\n          this.type == 'icon' || this.type == 'fab' ? '' : this.label\n        }\n      </button>\n    );\n  }\n}\n"],"version":3}
+{"file":"iris-button.js","mappings":"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","names":["IrisButton","__stencil_proxyCustomElement","HTMLElement"],"sources":["../iris-utils/dist/esm/required_properties.js","src/components/iris-button/iris-button.scss?tag=iris-button&encapsulation=shadow","src/components/iris-button/iris-button.tsx"],"sourcesContent":["export const RequieredPropsUtils = {\n    ERROR_REQUIRED_PROP: 'REQUIRED_PROP',\n    check(props) {\n        const missing = Object.entries(props)\n            .filter(([_, value]) => value === undefined)\n            .map(([key]) => key);\n        if (missing.length > 0) {\n            console.error(`${RequieredPropsUtils.ERROR_REQUIRED_PROP}: No se han definido las siguientes propiedades: ${missing.join(', ')}`);\n            return false;\n        }\n        else {\n            return true;\n        }\n    },\n};\n//# sourceMappingURL=required_properties.js.map","@use '_mixins.scss' as m;\n\n//#region Keyframes\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes show-loading {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n//#endregion\n\n//#region Mixins\n\n// Mixin para los colores.\n@mixin deco($type) {\n  &[color='#{$type}'] {\n    background-color: var(--company-#{$type}-dark);\n\n    @if $type == 'basic' {\n      color: var(--black);\n      background-color: var(--company-#{$type}-light);\n    }\n\n    &:hover {\n      background-color: var(--company-#{$type}-focus);\n    }\n\n    // Botones tipo icon.\n    &[type='icon'] {\n      background-color: unset;\n      color: var(--company-#{$type}-dark);\n\n      &:hover {\n        background-color: var(--company-#{$type}-light);\n      }\n    }\n  }\n}\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}