@atmgrupomaggioli/iris-button 0.2.5 → 0.3.0

package/dist/types/components/iris-button/iris-button.d.ts

@@ -1,4 +1,12 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * 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 declare class IrisButton {
     /**
      * Texto del botón.
@@ -40,6 +48,10 @@ export declare class IrisButton {
      * Evento del botón al ser enfocado.
      */
     buttonFocused: EventEmitter<Event>;
+    /**
+     * Evento lanzado cuando el componente está complementamente listo.
+     */
+    ready: EventEmitter<void>;
     /**
      * Método que se ejecuta al hacer clic y emite el evento.
      * @param ev
@@ -50,6 +62,7 @@ export declare class IrisButton {
      * @param ev
      */
     handleFocus: (ev: Event) => void;
+    componentDidLoad(): void;
     render(): any;
 }
 //# sourceMappingURL=iris-button.d.ts.map

package/dist/types/components.d.ts

@@ -8,15 +8,22 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Event } from "./stencil-public-runtime";
 export { Event } from "./stencil-public-runtime";
 export namespace Components {
+    /**
+     * 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.
+     */
     interface IrisButton {
         /**
           * 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.
-          * @default 'primary'
+          * @default getGlobalComponentConfig('IrisButton')?.color || 'primary'
          */
         "color": 'primary' | 'success' | 'warning' | 'error' | 'basic';
         /**
           * Deshabilita el botón para que no pueda ser pulsado.
-          * @default false
+          * @default getGlobalComponentConfig('IrisButton')?.disabled || false
          */
         "disabled": boolean;
         /**
@@ -29,17 +36,17 @@ export namespace Components {
         "label": string;
         /**
           * Permite mostrar una animación de carga mientras se realiza alguna acción. Al activarse esta opción, el botón se deshabilita.
-          * @default false
+          * @default getGlobalComponentConfig('IrisButton')?.loading || false
          */
         "loading": boolean;
         /**
           * Tamaño del botón.
-          * @default 'medium'
+          * @default getGlobalComponentConfig('IrisButton')?.size || 'medium'
          */
         "size": 'small' | 'medium' | 'large';
         /**
           * Tipo de botón.
-          * @default ''
+          * @default getGlobalComponentConfig('IrisButton')?.type || ''
          */
         "type": '' | 'icon' | 'fab';
     }
@@ -52,7 +59,15 @@ declare global {
     interface HTMLIrisButtonElementEventMap {
         "buttonClicked": Event;
         "buttonFocused": Event;
+        "ready": void;
     }
+    /**
+     * 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.
+     */
     interface HTMLIrisButtonElement extends Components.IrisButton, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIrisButtonElementEventMap>(type: K, listener: (this: HTMLIrisButtonElement, ev: IrisButtonCustomEvent<HTMLIrisButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -72,15 +87,22 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    /**
+     * 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.
+     */
     interface IrisButton {
         /**
           * 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.
-          * @default 'primary'
+          * @default getGlobalComponentConfig('IrisButton')?.color || 'primary'
          */
         "color"?: 'primary' | 'success' | 'warning' | 'error' | 'basic';
         /**
           * Deshabilita el botón para que no pueda ser pulsado.
-          * @default false
+          * @default getGlobalComponentConfig('IrisButton')?.disabled || false
          */
         "disabled"?: boolean;
         /**
@@ -93,7 +115,7 @@ declare namespace LocalJSX {
         "label": string;
         /**
           * Permite mostrar una animación de carga mientras se realiza alguna acción. Al activarse esta opción, el botón se deshabilita.
-          * @default false
+          * @default getGlobalComponentConfig('IrisButton')?.loading || false
          */
         "loading"?: boolean;
         /**
@@ -104,14 +126,18 @@ declare namespace LocalJSX {
           * Evento del botón al ser enfocado.
          */
         "onButtonFocused"?: (event: IrisButtonCustomEvent<Event>) => void;
+        /**
+          * Evento lanzado cuando el componente está complementamente listo.
+         */
+        "onReady"?: (event: IrisButtonCustomEvent<void>) => void;
         /**
           * Tamaño del botón.
-          * @default 'medium'
+          * @default getGlobalComponentConfig('IrisButton')?.size || 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
         /**
           * Tipo de botón.
-          * @default ''
+          * @default getGlobalComponentConfig('IrisButton')?.type || ''
          */
         "type"?: '' | 'icon' | 'fab';
     }
@@ -123,6 +149,13 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            /**
+             * 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.
+             */
             "iris-button": LocalJSX.IrisButton & JSXBase.HTMLAttributes<HTMLIrisButtonElement>;
         }
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atmgrupomaggioli/iris-button",
   "prettier": "../../common/.prettierrc.js",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "ATM Iris Button component",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -38,18 +38,19 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@stencil/core": "latest",
+    "@stencil/core": "4.35.1",
     "@types/node": "ts5.5",
-    "@stencil/sass": "latest",
-    "@types/jest": "latest",
-    "jest": "latest",
-    "ts-jest": "latest"
+    "@stencil/sass": "3.2.1",
+    "@types/jest": "29.5.14",
+    "jest": "29.7.0",
+    "ts-jest": "29.3.4"
   },
   "dependencies": {
     "@atmgrupomaggioli/iris-styles": "*",
     "@atmgrupomaggioli/iris-utils": "*",
     "@atmgrupomaggioli/iris-icon": "*",
-    "@atmgrupomaggioli/iris-loading": "*"
+    "@atmgrupomaggioli/iris-loading": "*",
+    "@atmgrupomaggioli/iris-globals": "*"
   },
   "license": "MIT"
 }

package/readme.md

@@ -1,29 +1,32 @@
-# iris-button
+# Iris Button
 
-<!-- Auto Generated Below -->
+## Overview
 
+Su función principal es comunicar información de manera rápida y visualmente efectiva.
 
-## Properties
+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.
 
-| Property             | Attribute  | Description                                                                                                                                         | Type                                                        | Default     |
-| -------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------- |
-| `color`              | `color`    | 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. | `"basic" \| "error" \| "primary" \| "success" \| "warning"` | `'primary'` |
-| `disabled`           | `disabled` | Deshabilita el botón para que no pueda ser pulsado.                                                                                                 | `boolean`                                                   | `false`     |
-| `icon` _(required)_  | `icon`     | Icono del botón. Consulta todos los iconos disponibles en: https://fonts.google.com/icons                                                           | `string`                                                    | `undefined` |
-| `label` _(required)_ | `label`    | Texto del botón.                                                                                                                                    | `string`                                                    | `undefined` |
-| `loading`            | `loading`  | Permite mostrar una animación de carga mientras se realiza alguna acción. Al activarse esta opción, el botón se deshabilita.                        | `boolean`                                                   | `false`     |
-| `size`               | `size`     | Tamaño del botón.                                                                                                                                   | `"large" \| "medium" \| "small"`                            | `'medium'`  |
-| `type`               | `type`     | Tipo de botón.                                                                                                                                      | `"" \| "fab" \| "icon"`                                     | `''`        |
+## Properties
 
+| Property             | Attribute  | Description                                                                                                                                         | Type                                                        | Default                                                        |
+| -------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | -------------------------------------------------------------- |
+| `color`              | `color`    | 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. | `"basic" \| "error" \| "primary" \| "success" \| "warning"` | `getGlobalComponentConfig('IrisButton')?.color \|\| 'primary'` |
+| `disabled`           | `disabled` | Deshabilita el botón para que no pueda ser pulsado.                                                                                                 | `boolean`                                                   | `getGlobalComponentConfig('IrisButton')?.disabled \|\| false`  |
+| `icon` _(required)_  | `icon`     | Icono del botón. Consulta todos los iconos disponibles en: https://fonts.google.com/icons                                                           | `string`                                                    | `undefined`                                                    |
+| `label` _(required)_ | `label`    | Texto del botón.                                                                                                                                    | `string`                                                    | `undefined`                                                    |
+| `loading`            | `loading`  | Permite mostrar una animación de carga mientras se realiza alguna acción. Al activarse esta opción, el botón se deshabilita.                        | `boolean`                                                   | `getGlobalComponentConfig('IrisButton')?.loading \|\| false`   |
+| `size`               | `size`     | Tamaño del botón.                                                                                                                                   | `"large" \| "medium" \| "small"`                            | `getGlobalComponentConfig('IrisButton')?.size \|\| 'medium'`   |
+| `type`               | `type`     | Tipo de botón.                                                                                                                                      | `"" \| "fab" \| "icon"`                                     | `getGlobalComponentConfig('IrisButton')?.type \|\| ''`         |
 
 ## Events
 
-| Event           | Description                       | Type                 |
-| --------------- | --------------------------------- | -------------------- |
-| `buttonClicked` | Evento del botón al ser pulsado.  | `CustomEvent<Event>` |
-| `buttonFocused` | Evento del botón al ser enfocado. | `CustomEvent<Event>` |
-
+| Event           | Description                                                      | Type                 |
+| --------------- | ---------------------------------------------------------------- | -------------------- |
+| `buttonClicked` | Evento del botón al ser pulsado.                                 | `CustomEvent<Event>` |
+| `buttonFocused` | Evento del botón al ser enfocado.                                | `CustomEvent<Event>` |
+| `ready`         | Evento lanzado cuando el componente está complementamente listo. | `CustomEvent<void>`  |
 
 ----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*