@atmgrupomaggioli/iris-button 0.2.4 → 0.3.0

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

@@ -1,56 +1,97 @@
 import { h } from "@stencil/core";
 import { RequieredPropsUtils } from "@atmgrupomaggioli/iris-utils";
+import { getGlobalComponentConfig } from "@atmgrupomaggioli/iris-globals";
+/**
+ * Su función principal es comunicar información de manera rápida y visualmente efectiva.
+ *
+ * Algunos casos comunes de uso incluyen:
+ * - **Notificaciones interactivas**: Proporcionar una notificación visual, como el número de mensajes no leídos, junto con la capacidad de acceder rápidamente a esos mensajes al hacer click en el badge.
+ * - **Acciones rápidas**: Ofrecer accesos directos a acciones comunes o funciones importantes. Por ejemplo, un badge con botón podría representar el número de elementos en un carrito de compras, permitiendo al usuario abrir el carrito al hacer click en él.
+ * - **Estado y acciones combinadas**: Mostrar el estado actual de un elemento junto con opciones de acción relacionadas. Por ejemplo, un badge con botón podría indicar que hay una actualización disponible para descargar, y al hacer click en él, el usuario puede iniciar la descarga directamente.
+ */
 export class IrisButton {
-    constructor() {
-        /**
-         * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.
-         * Para ver más información al respecto, lea la documentación del componente.
-         */
-        this.color = 'primary';
-        /**
-         * Deshabilita el botón para que no pueda ser pulsado.
-         */
-        this.disabled = false;
-        /**
-         * Tipo de botón.
-         */
-        this.type = '';
-        /**
-         * Permite mostrar una animación de carga mientras se realiza alguna acción.
-         * Al activarse esta opción, el botón se deshabilita.
-         */
-        this.loading = false;
-        /**
-         * Tamaño del botón.
-         */
-        this.size = 'medium';
-        //#endregion
-        //#region Handlers
-        //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.
-        /**
-         * Método que se ejecuta al hacer clic y emite el evento.
-         * @param ev
-         */
-        this.handleClick = (ev) => {
-            // Evitamos que el evento burbujee.
-            ev.stopPropagation();
-            // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.
-            this.button.disabled = true;
-            setTimeout(() => {
-                if (!this.loading) {
-                    this.button.disabled = false;
-                }
-            }, 1000);
-            // Lanzamos el evento.
-            this.buttonClicked.emit(ev);
-        };
-        /**
-         * Método que se ejecuta cuando se ha hecho focus en el botón.
-         * @param ev
-         */
-        this.handleFocus = (ev) => {
-            this.buttonFocused.emit(ev);
-        };
+    //#region Props
+    /**
+     * Texto del botón.
+     */
+    label;
+    /**
+     * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.
+     * Para ver más información al respecto, lea la documentación del componente.
+     */
+    color = getGlobalComponentConfig('IrisButton')?.color || 'primary';
+    /**
+     * Icono del botón.
+     * Consulta todos los iconos disponibles en: https://fonts.google.com/icons
+     */
+    icon;
+    /**
+     * Deshabilita el botón para que no pueda ser pulsado.
+     */
+    disabled = getGlobalComponentConfig('IrisButton')?.disabled || false;
+    /**
+     * Tipo de botón.
+     */
+    type = getGlobalComponentConfig('IrisButton')?.type || '';
+    /**
+     * Permite mostrar una animación de carga mientras se realiza alguna acción.
+     * Al activarse esta opción, el botón se deshabilita.
+     */
+    loading = getGlobalComponentConfig('IrisButton')?.loading || false;
+    /**
+     * Tamaño del botón.
+     */
+    size = getGlobalComponentConfig('IrisButton')?.size || 'medium';
+    //#endregion
+    //#region Variables privadas
+    // Tag <button> del DOM.
+    button;
+    //#endregion
+    //#region Events
+    /**
+     * Evento del botón al ser pulsado.
+     */
+    buttonClicked;
+    /**
+     * Evento del botón al ser enfocado.
+     */
+    buttonFocused;
+    /**
+     * Evento lanzado cuando el componente está complementamente listo.
+     */
+    ready;
+    //#endregion
+    //#region Handlers
+    //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.
+    /**
+     * Método que se ejecuta al hacer clic y emite el evento.
+     * @param ev
+     */
+    handleClick = (ev) => {
+        // Evitamos que el evento burbujee.
+        ev.stopPropagation();
+        // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.
+        this.button.disabled = true;
+        setTimeout(() => {
+            if (!this.loading) {
+                this.button.disabled = false;
+            }
+        }, 1000);
+        // Lanzamos el evento.
+        this.buttonClicked.emit(ev);
+    };
+    /**
+     * Método que se ejecuta cuando se ha hecho focus en el botón.
+     * @param ev
+     */
+    handleFocus = (ev) => {
+        this.buttonFocused.emit(ev);
+    };
+    //#endregion
+    //#region Ciclos de vida
+    componentDidLoad() {
+        // Emitimos el evento de que el control se ha cargado.
+        this.ready.emit();
     }
     //#endregion
     render() {
@@ -60,7 +101,7 @@ export class IrisButton {
             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));
     }
@@ -115,7 +156,7 @@ export class IrisButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'primary'"
+                "defaultValue": "getGlobalComponentConfig('IrisButton')?.color || 'primary'"
             },
             "icon": {
                 "type": "string",
@@ -154,7 +195,7 @@ export class IrisButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "getGlobalComponentConfig('IrisButton')?.disabled || false"
             },
             "type": {
                 "type": "string",
@@ -174,7 +215,7 @@ export class IrisButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "''"
+                "defaultValue": "getGlobalComponentConfig('IrisButton')?.type || ''"
             },
             "loading": {
                 "type": "boolean",
@@ -194,7 +235,7 @@ export class IrisButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "getGlobalComponentConfig('IrisButton')?.loading || false"
             },
             "size": {
                 "type": "string",
@@ -214,7 +255,7 @@ export class IrisButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'medium'"
+                "defaultValue": "getGlobalComponentConfig('IrisButton')?.size || 'medium'"
             }
         };
     }
@@ -261,6 +302,21 @@ export class IrisButton {
                         }
                     }
                 }
+            }, {
+                "method": "ready",
+                "name": "ready",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento lanzado cuando el componente est\u00E1 complementamente listo."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"iris-button.js","sourceRoot":"","sources":["../../../src/components/iris-button/iris-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\nimport { RequieredPropsUtils } from '@atmgrupomaggioli/iris-utils';\n\n@Component({\n  tag: 'iris-button',\n  styleUrl: 'iris-button.scss',\n  shadow: true,\n})\nexport class IrisButton {\n  //#region Props\n\n  /**\n   * Texto del botón.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.\n   * Para ver más información al respecto, lea la documentación del componente.\n   */\n  @Prop()\n  color: 'primary' | 'success' | 'warning' | 'error' | 'basic' = 'primary';\n\n  /**\n   * Icono del botón.\n   * Consulta todos los iconos disponibles en: https://fonts.google.com/icons\n   */\n  @Prop()\n  icon!: string;\n\n  /**\n   * Deshabilita el botón para que no pueda ser pulsado.\n   */\n  @Prop()\n  disabled = false;\n\n  /**\n   * Tipo de botón.\n   */\n  @Prop()\n  type: '' | 'icon' | 'fab' = '';\n\n  /**\n   * Permite mostrar una animación de carga mientras se realiza alguna acción.\n   * Al activarse esta opción, el botón se deshabilita.\n   */\n  @Prop()\n  loading = false;\n\n  /**\n   * Tamaño del botón.\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  //#endregion\n\n  //#region Variables privadas\n\n  // Tag <button> del DOM.\n  button!: HTMLButtonElement;\n\n  //#endregion\n\n  //#region Events\n\n  /**\n   * Evento del botón al ser pulsado.\n   */\n  @Event({ bubbles: false, composed: false }) buttonClicked: EventEmitter<Event>;\n\n  /**\n   * Evento del botón al ser enfocado.\n   */\n  @Event() buttonFocused: EventEmitter<Event>;\n\n  //#endregion\n\n  //#region Handlers\n\n  //FIXME: Cuando loading se pone en true, también debería mantenerse disabled en true hasta que termine. Ahora se pone disabled a false antes de tiempo y rompe el funcionamiento.\n\n  /**\n   * Método que se ejecuta al hacer clic y emite el evento.\n   * @param ev\n   */\n  handleClick = (ev: Event) => {\n    // Evitamos que el evento burbujee.\n    ev.stopPropagation();\n\n    // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.\n    this.button.disabled = true;\n    setTimeout(() => {\n      if (!this.loading) {\n        this.button.disabled = false;\n      }\n    }, 1000);\n\n    // Lanzamos el evento.\n    this.buttonClicked.emit(ev);\n  };\n\n  /**\n   * Método que se ejecuta cuando se ha hecho focus en el botón.\n   * @param ev\n   */\n  handleFocus = (ev: Event) => {\n    this.buttonFocused.emit(ev);\n  };\n\n  //#endregion\n\n  render() {\n    // Validamos que todos los campos están rellenos.\n    const requiredFiles: Record<string, any> = { label: this.label, icon: this.icon };\n    if (!RequieredPropsUtils.check(requiredFiles)) return;\n\n    return (\n      <button\n        class={`${this.size}`}\n        color={this.color}\n        type={this.type}\n        onClick={this.handleClick}\n        disabled={this.disabled || this.loading}\n        onFocus={this.handleFocus}\n        ref={(el) => (this.button = el as HTMLButtonElement)}\n        title={this.label}\n      >\n        {\n          // Comprobamos si se muestra cargando\n          !this.loading ? (\n            <iris-icon icon={this.icon} size={this.size}></iris-icon>\n          ) : (\n            <i class=\"loading\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  opacity=\"0.25\"\n                  d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"4\"\n                ></path>\n                <path\n                  opacity=\"0.75\"\n                  d=\"M10 2.2002C5.43552 3.12674 2 7.16224 2 12.0002C2 13.5118 2.3354 14.9451 2.93585 16.2297\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"4\"\n                  stroke-linecap=\"round\"\n                ></path>\n              </svg>\n            </i>\n          )\n        }\n        {\n          // Solo añadimos el label para los botones normales.\n          this.type == 'icon' || this.type == 'fab' ? '' : this.label\n        }\n      </button>\n    );\n  }\n}\n"]}
+{"version":3,"file":"iris-button.js","sourceRoot":"","sources":["../../../src/components/iris-button/iris-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\nimport { RequieredPropsUtils } from '@atmgrupomaggioli/iris-utils';\nimport { getGlobalComponentConfig } from '@atmgrupomaggioli/iris-globals';\n\n/**\n * Su función principal es comunicar información de manera rápida y visualmente efectiva.\n *\n * Algunos casos comunes de uso incluyen:\n * - **Notificaciones interactivas**: Proporcionar una notificación visual, como el número de mensajes no leídos, junto con la capacidad de acceder rápidamente a esos mensajes al hacer click en el badge.\n * - **Acciones rápidas**: Ofrecer accesos directos a acciones comunes o funciones importantes. Por ejemplo, un badge con botón podría representar el número de elementos en un carrito de compras, permitiendo al usuario abrir el carrito al hacer click en él.\n * - **Estado y acciones combinadas**: Mostrar el estado actual de un elemento junto con opciones de acción relacionadas. Por ejemplo, un badge con botón podría indicar que hay una actualización disponible para descargar, y al hacer click en él, el usuario puede iniciar la descarga directamente.\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' =\n    getGlobalComponentConfig('IrisButton')?.color || '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 = getGlobalComponentConfig('IrisButton')?.disabled || false;\n\n  /**\n   * Tipo de botón.\n   */\n  @Prop()\n  type: '' | 'icon' | 'fab' = getGlobalComponentConfig('IrisButton')?.type || '';\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 = getGlobalComponentConfig('IrisButton')?.loading || false;\n\n  /**\n   * Tamaño del botón.\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = getGlobalComponentConfig('IrisButton')?.size || '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  /**\n   * Evento lanzado cuando el componente está complementamente listo.\n   */\n  @Event() ready: EventEmitter<void>;\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  //#region Ciclos de vida\n\n  componentDidLoad() {\n    // Emitimos el evento de que el control se ha cargado.\n    this.ready.emit();\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"]}