@atmgrupomaggioli/iris-button 0.3.0 → 0.3.1
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.
- package/changelog.md +32 -0
- package/dist/cjs/iris-button.cjs.entry.js +54 -48
- package/dist/cjs/iris-button.cjs.entry.js.map +1 -1
- package/dist/cjs/iris-button.entry.cjs.js.map +1 -1
- package/dist/collection/components/iris-button/iris-button.js.map +1 -1
- package/dist/components/iris-button.js +54 -48
- package/dist/components/iris-button.js.map +1 -1
- package/dist/esm/iris-button.entry.js +54 -48
- package/dist/esm/iris-button.entry.js.map +1 -1
- package/dist/iris-button/iris-button.entry.esm.js.map +1 -1
- package/dist/iris-button/iris-button.esm.js +1 -1
- package/dist/iris-button/{p-54a170a0.entry.js → p-55d7ced4.entry.js} +2 -2
- package/dist/iris-button/p-55d7ced4.entry.js.map +1 -0
- package/dist/types/components/iris-button/iris-button.d.ts +7 -7
- package/package.json +6 -3
- package/dist/iris-button/p-54a170a0.entry.js.map +0 -1
|
@@ -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,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAE1E;;;;;;;GAOG;AAMH,MAAM,OAAO,UAAU;IACrB,eAAe;IAEf;;OAEG;
|
|
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;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAE1E;;;;;;;GAOG;AAMH,MAAM,OAAO,UAAU;IACrB,eAAe;IAEf;;OAEG;IAEM,KAAK,CAAU;IAExB;;;OAGG;IAEM,KAAK,GACZ,wBAAwB,CAAC,YAAY,CAAC,EAAE,KAAK,IAAI,SAAS,CAAC;IAE7D;;;OAGG;IAEM,IAAI,CAAU;IAEvB;;OAEG;IAEM,QAAQ,GAAY,wBAAwB,CAAC,YAAY,CAAC,EAAE,QAAQ,IAAI,KAAK,CAAC;IAEvF;;OAEG;IAEM,IAAI,GAAwB,wBAAwB,CAAC,YAAY,CAAC,EAAE,IAAI,IAAI,EAAE,CAAC;IAExF;;;OAGG;IAEM,OAAO,GAAY,wBAAwB,CAAC,YAAY,CAAC,EAAE,OAAO,IAAI,KAAK,CAAC;IAErF;;OAEG;IAEM,IAAI,GACX,wBAAwB,CAAC,YAAY,CAAC,EAAE,IAAI,IAAI,QAAQ,CAAC;IAE3D,YAAY;IAEZ,4BAA4B;IAE5B,wBAAwB;IACxB,MAAM,CAAqB;IAE3B,YAAY;IAEZ,gBAAgB;IAEhB;;OAEG;IACyC,aAAa,CAAsB;IAE/E;;OAEG;IACM,aAAa,CAAsB;IAE5C;;OAEG;IACM,KAAK,CAAqB;IAEnC,YAAY;IAEZ,kBAAkB;IAElB,iLAAiL;IAEjL;;;OAGG;IACH,WAAW,GAAG,CAAC,EAAS,EAAE,EAAE;QAC1B,mCAAmC;QACnC,EAAE,CAAC,eAAe,EAAE,CAAC;QAErB,uFAAuF;QACvF,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;QAC5B,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBAClB,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC;YAC/B,CAAC;QACH,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,sBAAsB;QACtB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF;;;OAGG;IACH,WAAW,GAAG,CAAC,EAAS,EAAE,EAAE;QAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,YAAY;IAEZ,wBAAwB;IAExB,gBAAgB;QACd,sDAAsD;QACtD,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC;IAED,YAAY;IAEZ,MAAM;QACJ,iDAAiD;QACjD,MAAM,aAAa,GAAwB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;QAClF,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,aAAa,CAAC;YAAE,OAAO;QAEtD,OAAO,CACL,cACE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,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,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EACpD,KAAK,EAAE,IAAI,CAAC,KAAK;YAGf,qCAAqC;YACrC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,iBAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc,CAC1D,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,SAAS;gBAClB,oBAAc,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAiB,CACzD,CACP;YAGD,oDAAoD;YACpD,IAAI,CAAC,IAAI,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAEtD,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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()\n readonly 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 readonly 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 readonly icon!: string;\n\n /**\n * Deshabilita el botón para que no pueda ser pulsado.\n */\n @Prop()\n readonly disabled: boolean = getGlobalComponentConfig('IrisButton')?.disabled || false;\n\n /**\n * Tipo de botón.\n */\n @Prop()\n readonly 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 readonly loading: boolean = getGlobalComponentConfig('IrisButton')?.loading || false;\n\n /**\n * Tamaño del botón.\n */\n @Prop()\n readonly size: 'small' | 'medium' | 'large' =\n 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"]}
|
|
@@ -2160,6 +2160,7 @@ const Maximizar$5 = "Maximizar";
|
|
|
2160
2160
|
const No$5 = "No";
|
|
2161
2161
|
const Cancelar$5 = "Cancelar";
|
|
2162
2162
|
const Aceptar$5 = "Aceptar";
|
|
2163
|
+
const Eliminar$5 = "Eliminar";
|
|
2163
2164
|
var es = {
|
|
2164
2165
|
"Seleccione un valor de la lista": "Seleccione un valor de la lista",
|
|
2165
2166
|
"Buscando resultados...": "Buscando resultados...",
|
|
@@ -2172,7 +2173,8 @@ var es = {
|
|
|
2172
2173
|
"Sí": "Sí",
|
|
2173
2174
|
No: No$5,
|
|
2174
2175
|
Cancelar: Cancelar$5,
|
|
2175
|
-
Aceptar: Aceptar$5
|
|
2176
|
+
Aceptar: Aceptar$5,
|
|
2177
|
+
Eliminar: Eliminar$5
|
|
2176
2178
|
};
|
|
2177
2179
|
|
|
2178
2180
|
const Cerrar$4 = "Close";
|
|
@@ -2181,6 +2183,7 @@ const Maximizar$4 = "Maximize";
|
|
|
2181
2183
|
const No$4 = "No";
|
|
2182
2184
|
const Cancelar$4 = "Cancel";
|
|
2183
2185
|
const Aceptar$4 = "Accept";
|
|
2186
|
+
const Eliminar$4 = "Delete";
|
|
2184
2187
|
var en = {
|
|
2185
2188
|
"Seleccione un valor de la lista": "Select a value from the list",
|
|
2186
2189
|
"Buscando resultados...": "Searching results...",
|
|
@@ -2193,7 +2196,8 @@ var en = {
|
|
|
2193
2196
|
"Sí": "Yes",
|
|
2194
2197
|
No: No$4,
|
|
2195
2198
|
Cancelar: Cancelar$4,
|
|
2196
|
-
Aceptar: Aceptar$4
|
|
2199
|
+
Aceptar: Aceptar$4,
|
|
2200
|
+
Eliminar: Eliminar$4
|
|
2197
2201
|
};
|
|
2198
2202
|
|
|
2199
2203
|
const Cerrar$3 = "Pechar";
|
|
@@ -2202,6 +2206,7 @@ const Maximizar$3 = "Maximizar";
|
|
|
2202
2206
|
const No$3 = "Non";
|
|
2203
2207
|
const Cancelar$3 = "Cancelar";
|
|
2204
2208
|
const Aceptar$3 = "Aceptar";
|
|
2209
|
+
const Eliminar$3 = "Eliminar";
|
|
2205
2210
|
var gl = {
|
|
2206
2211
|
"Seleccione un valor de la lista": "Seleccione un valor da lista",
|
|
2207
2212
|
"Buscando resultados...": "Buscando resultados...",
|
|
@@ -2214,7 +2219,8 @@ var gl = {
|
|
|
2214
2219
|
"Sí": "Si",
|
|
2215
2220
|
No: No$3,
|
|
2216
2221
|
Cancelar: Cancelar$3,
|
|
2217
|
-
Aceptar: Aceptar$3
|
|
2222
|
+
Aceptar: Aceptar$3,
|
|
2223
|
+
Eliminar: Eliminar$3
|
|
2218
2224
|
};
|
|
2219
2225
|
|
|
2220
2226
|
const Cerrar$2 = "Tancar";
|
|
@@ -2223,6 +2229,7 @@ const Maximizar$2 = "Maximitzar";
|
|
|
2223
2229
|
const No$2 = "No";
|
|
2224
2230
|
const Cancelar$2 = "cancel·lar";
|
|
2225
2231
|
const Aceptar$2 = "Acceptar";
|
|
2232
|
+
const Eliminar$2 = "Eliminar";
|
|
2226
2233
|
var ca = {
|
|
2227
2234
|
"Seleccione un valor de la lista": "Seleccioneu un valor de la llista",
|
|
2228
2235
|
"Buscando resultados...": "Cercant resultats...",
|
|
@@ -2235,7 +2242,8 @@ var ca = {
|
|
|
2235
2242
|
"Sí": "Sí",
|
|
2236
2243
|
No: No$2,
|
|
2237
2244
|
Cancelar: Cancelar$2,
|
|
2238
|
-
Aceptar: Aceptar$2
|
|
2245
|
+
Aceptar: Aceptar$2,
|
|
2246
|
+
Eliminar: Eliminar$2
|
|
2239
2247
|
};
|
|
2240
2248
|
|
|
2241
2249
|
const Cerrar$1 = "Itxi";
|
|
@@ -2244,6 +2252,7 @@ const Maximizar$1 = "Handitu";
|
|
|
2244
2252
|
const No$1 = "Ez";
|
|
2245
2253
|
const Cancelar$1 = "Utzi";
|
|
2246
2254
|
const Aceptar$1 = "Onartu";
|
|
2255
|
+
const Eliminar$1 = "Ezabatu";
|
|
2247
2256
|
var eu = {
|
|
2248
2257
|
"Seleccione un valor de la lista": "Aukeratu zerrendako balio bat",
|
|
2249
2258
|
"Buscando resultados...": "Emaitzak bilatzen...",
|
|
@@ -2256,7 +2265,8 @@ var eu = {
|
|
|
2256
2265
|
"Sí": "Bai",
|
|
2257
2266
|
No: No$1,
|
|
2258
2267
|
Cancelar: Cancelar$1,
|
|
2259
|
-
Aceptar: Aceptar$1
|
|
2268
|
+
Aceptar: Aceptar$1,
|
|
2269
|
+
Eliminar: Eliminar$1
|
|
2260
2270
|
};
|
|
2261
2271
|
|
|
2262
2272
|
const Cerrar = "Chiudi";
|
|
@@ -2265,6 +2275,7 @@ const Maximizar = "Ingrandisci";
|
|
|
2265
2275
|
const No = "No";
|
|
2266
2276
|
const Cancelar = "Annulla";
|
|
2267
2277
|
const Aceptar = "Accetta";
|
|
2278
|
+
const Eliminar = "Elimina";
|
|
2268
2279
|
var it = {
|
|
2269
2280
|
"Seleccione un valor de la lista": "Seleziona un valore dalla lista",
|
|
2270
2281
|
"Buscando resultados...": "Ricerca risultati...",
|
|
@@ -2277,55 +2288,50 @@ var it = {
|
|
|
2277
2288
|
"Sí": "Sì",
|
|
2278
2289
|
No: No,
|
|
2279
2290
|
Cancelar: Cancelar,
|
|
2280
|
-
Aceptar: Aceptar
|
|
2291
|
+
Aceptar: Aceptar,
|
|
2292
|
+
Eliminar: Eliminar
|
|
2281
2293
|
};
|
|
2282
2294
|
|
|
2283
2295
|
const LANGUAGE_STORAGE_KEY = 'iris-language';
|
|
2284
|
-
// Función para obtener el idioma inicial y comprobar si existe en el localStorage
|
|
2296
|
+
// Función para obtener el idioma inicial y comprobar si existe en el localStorage.
|
|
2285
2297
|
const getInitialLanguage = () => {
|
|
2286
|
-
|
|
2287
|
-
return storedLanguage || 'es';
|
|
2298
|
+
return localStorage.getItem(LANGUAGE_STORAGE_KEY);
|
|
2288
2299
|
};
|
|
2289
|
-
// Configuración inicial de i18next
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
});
|
|
2302
|
-
//
|
|
2303
|
-
|
|
2304
|
-
static instance;
|
|
2305
|
-
components = new Set();
|
|
2306
|
-
constructor() {
|
|
2307
|
-
instance.on('languageChanged', () => {
|
|
2308
|
-
this.components.forEach((component) => {
|
|
2309
|
-
if (component.forceUpdate) {
|
|
2310
|
-
component.forceUpdate();
|
|
2311
|
-
}
|
|
2312
|
-
});
|
|
2313
|
-
});
|
|
2314
|
-
}
|
|
2315
|
-
static getInstance() {
|
|
2316
|
-
if (!I18nManager.instance) {
|
|
2317
|
-
I18nManager.instance = new I18nManager();
|
|
2318
|
-
}
|
|
2319
|
-
return I18nManager.instance;
|
|
2320
|
-
}
|
|
2321
|
-
registerComponent(component) {
|
|
2322
|
-
this.components.add(component);
|
|
2323
|
-
}
|
|
2324
|
-
unregisterComponent(component) {
|
|
2325
|
-
this.components.delete(component);
|
|
2326
|
-
}
|
|
2300
|
+
// Configuración inicial de i18next.
|
|
2301
|
+
if (!window.i18next) {
|
|
2302
|
+
instance.init({
|
|
2303
|
+
lng: getInitialLanguage() ?? undefined, // Si hay un localStarage guardado o sino será el definido en el componente iris-selector-idioma.
|
|
2304
|
+
resources: {
|
|
2305
|
+
es: { translation: es },
|
|
2306
|
+
en: { translation: en },
|
|
2307
|
+
gl: { translation: gl },
|
|
2308
|
+
ca: { translation: ca },
|
|
2309
|
+
eu: { translation: eu },
|
|
2310
|
+
it: { translation: it },
|
|
2311
|
+
},
|
|
2312
|
+
});
|
|
2313
|
+
// Exponemos i18next globalmente para Angular y Stencil.
|
|
2314
|
+
window.i18next = instance;
|
|
2327
2315
|
}
|
|
2328
|
-
|
|
2316
|
+
const globalI18next = window.i18next;
|
|
2317
|
+
(() => {
|
|
2318
|
+
const components = new Set();
|
|
2319
|
+
globalI18next.on('languageChanged', () => {
|
|
2320
|
+
components.forEach((component) => {
|
|
2321
|
+
if (typeof component.forceUpdate === 'function') {
|
|
2322
|
+
component.forceUpdate();
|
|
2323
|
+
}
|
|
2324
|
+
});
|
|
2325
|
+
});
|
|
2326
|
+
return {
|
|
2327
|
+
registerComponent(component) {
|
|
2328
|
+
components.add(component);
|
|
2329
|
+
},
|
|
2330
|
+
unregisterComponent(component) {
|
|
2331
|
+
components.delete(component);
|
|
2332
|
+
},
|
|
2333
|
+
};
|
|
2334
|
+
})();
|
|
2329
2335
|
|
|
2330
2336
|
/**
|
|
2331
2337
|
* Función para establecer la configuración global de los componentes.
|