@atmgrupomaggioli/iris-button 0.2.0-dev.8 → 0.2.1

package/dist/components/iris-button.js

@@ -1,14 +1,13 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 
-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)}";
-const IrisButtonStyle0 = irisButtonCss;
+const irisButtonCss = "@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes show-loading{0%{opacity:0}100%{opacity:1}}:host{display:inline-block}button{font-size:var(--font-size);padding:8px 12px;color:var(--white);background-color:var(--company-primary-dark);-webkit-transition:background-color 0.5s ease;-ms-transition:background-color 0.5s ease;transition:background-color 0.5s ease;border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:-ms-flexbox;display:-webkit-box;display:flex;align-items:center;cursor:pointer;gap:0.1rem;font-family:var(--font-primary)}button:hover{background-color:var(--company-primary-focus)}button:focus{outline:2px solid var(--blue_light);outline-offset:1px}button:not([type=icon],[type=fab]) .material-symbols-rounded,button:not([type=icon],[type=fab]) .loading{margin-right:5px}button[type=fab],button[type=icon]{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;height:36px;width:36px;padding:0;display:-ms-flexbox;display:-webkit-box;display:flex;justify-content:center}button .loading{animation:show-loading 1s 1;display:-ms-flexbox;display:-webkit-box;display:flex;align-items:center;height:calc(var(--font-size-icon) * 1.19)}button .loading svg{animation:spin 1s infinite;color:var(--primary);height:var(--font-size-icon)}button iris-icon{display:-ms-flexbox;display:-webkit-box;display:flex}button[color=primary]{background-color:var(--company-primary-dark)}button[color=primary]:hover{background-color:var(--company-primary-focus)}button[color=primary][type=icon]{background-color:unset;color:var(--company-primary-dark)}button[color=primary][type=icon]:hover{background-color:var(--company-primary-light)}button[color=primary] .loading svg{color:var(--company-primary-dark)}button[color=success]{background-color:var(--company-success-dark)}button[color=success]:hover{background-color:var(--company-success-focus)}button[color=success][type=icon]{background-color:unset;color:var(--company-success-dark)}button[color=success][type=icon]:hover{background-color:var(--company-success-light)}button[color=success] .loading svg{color:var(--company-success-dark)}button[color=warning]{background-color:var(--company-warning-dark)}button[color=warning]:hover{background-color:var(--company-warning-focus)}button[color=warning][type=icon]{background-color:unset;color:var(--company-warning-dark)}button[color=warning][type=icon]:hover{background-color:var(--company-warning-light)}button[color=warning] .loading svg{color:var(--company-warning-dark)}button[color=error]{background-color:var(--company-error-dark)}button[color=error]:hover{background-color:var(--company-error-focus)}button[color=error][type=icon]{background-color:unset;color:var(--company-error-dark)}button[color=error][type=icon]:hover{background-color:var(--company-error-light)}button[color=error] .loading svg{color:var(--company-error-dark)}button[color=basic]{background-color:var(--company-basic-dark);color:var(--black);background-color:var(--company-basic-light)}button[color=basic]:hover{background-color:var(--company-basic-focus)}button[color=basic][type=icon]{background-color:unset;color:var(--company-basic-dark)}button[color=basic][type=icon]:hover{background-color:var(--company-basic-light)}button[color=basic] .loading svg{color:var(--company-basic-dark)}button:disabled{background-color:var(--company-basic-focus);color:var(--company-basic-light);cursor:not-allowed}button:disabled:hover{background-color:var(--company-basic-focus)}button.small{font-size:calc(var(--font-size) * 0.8)}button.small[type=fab],button.small[type=icon]{height:calc(36px * 0.8);width:calc(36px * 0.8)}button.large{font-size:calc(var(--font-size) * 1.2)}button.large[type=fab],button.large[type=icon]{height:calc(36px * 1.2);width:calc(36px * 1.2)}";
 
-const IrisButton$1 = /*@__PURE__*/ proxyCustomElement(class IrisButton extends HTMLElement {
+const IrisButton$1 = /*@__PURE__*/ proxyCustomElement(class IrisButton extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.buttonClicked = createEvent(this, "buttonClicked", 7);
+        this.buttonClicked = createEvent(this, "buttonClicked", 1);
         this.buttonFocused = createEvent(this, "buttonFocused", 7);
         /**
          * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.
@@ -28,8 +27,10 @@ const IrisButton$1 = /*@__PURE__*/ proxyCustomElement(class IrisButton extends H
          * Al activarse esta opción, el botón se deshabilita.
          */
         this.loading = false;
-        //#endregion
-        //#region Methods
+        /**
+         * Tamaño del botón.
+         */
+        this.size = 'medium';
         //#endregion
         //#region Handlers
         /**
@@ -38,9 +39,9 @@ const IrisButton$1 = /*@__PURE__*/ proxyCustomElement(class IrisButton extends H
          */
         this.handleClick = (ev) => {
             // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.
-            this.disabled = true;
+            this.button.disabled = true;
             setTimeout(() => {
-                this.disabled = false;
+                this.button.disabled = false;
             }, 1000);
             // Lanzamos el evento.
             this.buttonClicked.emit(ev);
@@ -58,30 +59,29 @@ const IrisButton$1 = /*@__PURE__*/ proxyCustomElement(class IrisButton extends H
         // Validamos que todos los campos están rellenos.
         try {
             if (!this.label)
-                throw ("No se ha definido la propiedad 'label'.");
+                throw "No se ha definido la propiedad 'label'.";
             if (!this.icon)
-                throw ("No se ha definido la propiedad 'icon'.");
+                throw "No se ha definido la propiedad 'icon'.";
         }
         catch (e) {
             console.error(e);
             return;
         }
-        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
-        !this.loading
-            ? h("span", { class: "material-symbols-rounded" }, this.icon)
-            : 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.
-        this.type == ""
-            ? this.label
-            : ""));
+        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" })))), 
+        // Solo añadimos el label para los botones normales.
+        this.type == 'icon' || this.type == 'fab' ? '' : this.label));
     }
-    static get style() { return IrisButtonStyle0; }
+    static get style() { return irisButtonCss; }
 }, [1, "iris-button", {
         "label": [1],
         "color": [1],
         "icon": [1],
-        "disabled": [1028],
+        "disabled": [4],
         "type": [1],
-        "loading": [4]
+        "loading": [4],
+        "size": [1]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -96,10 +96,12 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 
 const IrisButton = IrisButton$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { IrisButton, defineCustomElement };
+//# sourceMappingURL=iris-button.js.map
 
 //# sourceMappingURL=iris-button.js.map

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

@@ -1 +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}
+{"file":"iris-button.js","mappings":";;AAAA,MAAM,aAAa,GAAG,guHAAguH;;MCOzuHA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;;;AAaE;;;AAGG;AAEH,QAAA,IAAK,CAAA,KAAA,GAA0D,SAAS;AASxE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEhB;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAwB,EAAE;AAE9B;;;AAGG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEf;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;;;AA2B7C;;;AAGG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,EAAS,KAAI;;AAE1B,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,IAAI;YAC3B,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,KAAK;aAC7B,EAAE,IAAI,CAAC;;AAGR,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC;AAC7B,SAAC;AAED;;;AAGG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,EAAS,KAAI;AAC1B,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC;AAC7B,SAAC;AAwDF;;IApDC,MAAM,GAAA;;AAEJ,QAAA,IAAI;YACF,IAAI,CAAC,IAAI,CAAC,KAAK;AAAE,gBAAA,MAAM,yCAAyC;YAChE,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,gBAAA,MAAM,wCAAwC;;QAC9D,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;YAChB;;AAGF,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAA,CAAE,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EACvC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EACpD,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA;;QAIf,CAAC,IAAI,CAAC,OAAO,IACX,CAAA,CAAA,WAAA,EAAA,EAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAc,KAEzD,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,SAAS,EAAA,EAChB,CAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrE,CAAA,CAAA,MAAA,EAAA,EACE,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,mHAAmH,EACrH,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,GAAG,EACV,CAAA,EACR,CAAA,CAAA,MAAA,EAAA,EACE,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,yFAAyF,EAC3F,MAAM,EAAC,cAAc,kBACR,GAAG,EAAA,gBAAA,EACD,OAAO,EAChB,CAAA,CACJ,CACJ,CACL;;QAID,IAAI,CAAC,IAAI,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["IrisButton","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/iris-button/iris-button.scss?tag=iris-button&encapsulation=shadow","src/components/iris-button/iris-button.tsx"],"sourcesContent":["@use '_mixins.scss' as m;\n\n//#region Keyframes\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes show-loading {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n//#endregion\n\n//#region Mixins\n\n// Mixin para los colores.\n@mixin deco($type) {\n  &[color='#{$type}'] {\n    background-color: var(--company-#{$type}-dark);\n\n    @if $type == 'basic' {\n      color: var(--black);\n      background-color: var(--company-#{$type}-light);\n    }\n\n    &:hover {\n      background-color: var(--company-#{$type}-focus);\n    }\n\n    // Botones tipo icon.\n    &[type='icon'] {\n      background-color: unset;\n      color: var(--company-#{$type}-dark);\n\n      &:hover {\n        background-color: var(--company-#{$type}-light);\n      }\n    }\n\n    // Cambio color animación loading.\n    .loading svg {\n      color: var(--company-#{$type}-dark);\n    }\n  }\n}\n\n// Mixin para los tamaños.\n@mixin size-variant($size, $scale) {\n  &.#{$size} {\n    font-size: calc(var(--font-size) * #{$scale});\n\n    // Botones tipo fab e icono.\n    &[type='fab'],\n    &[type='icon'] {\n      height: calc(36px * #{$scale});\n      width: calc(36px * #{$scale});\n    }\n  }\n}\n\n//#endregion\n\n:host {\n  display: inline-block;\n}\n\n// Estilos genéricos para los botones.\nbutton {\n  font-size: var(--font-size);\n  padding: 8px 12px;\n  color: var(--white);\n  background-color: var(--company-primary-dark);\n  @include m.animation(background-color);\n  border: none;\n  @include m.border-radius(5px);\n  @include m.flex;\n  align-items: center;\n  cursor: pointer;\n  gap: 0.1rem;\n  font-family: var(--font-primary);\n\n  &:hover {\n    background-color: var(--company-primary-focus);\n  }\n\n  // Incluye un borde al hacer click y al usar tabs.\n  @include m.focus-border;\n\n  // Aplica un margen al icono en los botones por defecto para separarlo del texto.\n  &:not([type='icon'], [type='fab']) {\n    .material-symbols-rounded,\n    .loading {\n      margin-right: 5px;\n    }\n  }\n\n  // Botones tipo fab e icono.\n  &[type='fab'],\n  &[type='icon'] {\n    @include m.border-radius(50%);\n    height: 36px;\n    width: 36px;\n    padding: 0;\n    // Centramos el icono.\n    @include m.flex;\n    justify-content: center;\n  }\n\n  // Animación de carga.\n  .loading {\n    animation: show-loading 1s 1;\n    @include m.flex;\n    align-items: center;\n    // Los iconos de Material tienen 21px aprox de alto cuando el font-size es de 18.\n    height: calc(var(--font-size-icon) * 1.19);\n\n    svg {\n      animation: spin 1s infinite;\n      color: var(--primary);\n      height: var(--font-size-icon);\n    }\n  }\n\n  iris-icon {\n    @include m.flex;\n  }\n\n  //#region Colores de los botones\n\n  @include deco(primary);\n  @include deco(success);\n  @include deco(warning);\n  @include deco(error);\n  @include deco(basic);\n\n  // Botón deshabilitado + controles de accesibilidad.\n  &:disabled {\n    background-color: var(--company-basic-focus);\n    color: var(--company-basic-light);\n    cursor: not-allowed;\n\n    &:hover {\n      background-color: var(--company-basic-focus);\n    }\n  }\n  //#endregion\n\n  //#region Tamaño\n\n  @include size-variant(small, 0.8);\n  @include size-variant(large, 1.2);\n\n  //#endregion\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n@Component({\n  tag: 'iris-button',\n  styleUrl: 'iris-button.scss',\n  shadow: true,\n})\nexport class IrisButton {\n  //#region Props\n\n  /**\n   * Texto del botón.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.\n   * Para ver más información al respecto, lea la documentación del componente.\n   */\n  @Prop()\n  color: 'primary' | 'success' | 'warning' | 'error' | 'basic' = 'primary';\n\n  /**\n   * Icono del botón.\n   * Consulta todos los iconos disponibles en: https://fonts.google.com/icons\n   */\n  @Prop()\n  icon!: string;\n\n  /**\n   * Deshabilita el botón para que no pueda ser pulsado.\n   */\n  @Prop()\n  disabled = false;\n\n  /**\n   * Tipo de botón.\n   */\n  @Prop()\n  type: '' | 'icon' | 'fab' = '';\n\n  /**\n   * Permite mostrar una animación de carga mientras se realiza alguna acción.\n   * Al activarse esta opción, el botón se deshabilita.\n   */\n  @Prop()\n  loading = false;\n\n  /**\n   * Tamaño del botón.\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  //#endregion\n\n  //#region Variables privadas\n\n  // Tag <button> del DOM.\n  button!: HTMLButtonElement;\n\n  //#endregion\n\n  //#region Events\n\n  /**\n   * Evento del botón al ser pulsado.\n   */\n  @Event({ bubbles: false, composed: false }) buttonClicked: EventEmitter<Event>;\n\n  /**\n   * Evento del botón al ser enfocado.\n   */\n  @Event() buttonFocused: EventEmitter<Event>;\n\n  //#endregion\n\n  //#region Handlers\n\n  /**\n   * Método que se ejecuta al hacer clic y emite el evento.\n   * @param ev\n   */\n  handleClick = (ev: Event) => {\n    // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.\n    this.button.disabled = true;\n    setTimeout(() => {\n      this.button.disabled = false;\n    }, 1000);\n\n    // Lanzamos el evento.\n    this.buttonClicked.emit(ev);\n  };\n\n  /**\n   * Método que se ejecuta cuando se ha hecho focus en el botón.\n   * @param ev\n   */\n  handleFocus = (ev: Event) => {\n    this.buttonFocused.emit(ev);\n  };\n\n  //#endregion\n\n  render() {\n    // Validamos que todos los campos están rellenos.\n    try {\n      if (!this.label) throw \"No se ha definido la propiedad 'label'.\";\n      if (!this.icon) throw \"No se ha definido la propiedad 'icon'.\";\n    } catch (e) {\n      console.error(e);\n      return;\n    }\n\n    return (\n      <button\n        class={`${this.size}`}\n        color={this.color}\n        type={this.type}\n        onClick={this.handleClick}\n        disabled={this.disabled || this.loading}\n        onFocus={this.handleFocus}\n        ref={(el) => (this.button = el as HTMLButtonElement)}\n        title={this.label}\n      >\n        {\n          // Comprobamos si se muestra cargando\n          !this.loading ? (\n            <iris-icon icon={this.icon} size={this.size}></iris-icon>\n          ) : (\n            <i class=\"loading\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  opacity=\"0.25\"\n                  d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"4\"\n                ></path>\n                <path\n                  opacity=\"0.75\"\n                  d=\"M10 2.2002C5.43552 3.12674 2 7.16224 2 12.0002C2 13.5118 2.3354 14.9451 2.93585 16.2297\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"4\"\n                  stroke-linecap=\"round\"\n                ></path>\n              </svg>\n            </i>\n          )\n        }\n        {\n          // Solo añadimos el label para los botones normales.\n          this.type == 'icon' || this.type == 'fab' ? '' : this.label\n        }\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/app-globals-DQuL1Twl.js

@@ -0,0 +1,6 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };
+//# sourceMappingURL=app-globals-DQuL1Twl.js.map
+
+//# sourceMappingURL=app-globals-DQuL1Twl.js.map

package/dist/esm/app-globals-DQuL1Twl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-globals-DQuL1Twl.js","sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"names":[],"mappings":"AAAY,MAAC,aAAa,GAAG,MAAM;;;;"}