@atmgrupomaggioli/iris-button 0.2.0-dev.8 → 0.2.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/dist/cjs/app-globals-V2Kpy_OQ.js +8 -0
- package/dist/cjs/app-globals-V2Kpy_OQ.js.map +1 -0
- package/dist/cjs/{index-f786c569.js → index-CHCvKTZA.js} +163 -116
- package/dist/cjs/index-CHCvKTZA.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -7
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/iris-button.cjs.entry.js +18 -20
- package/dist/cjs/iris-button.cjs.entry.js.map +1 -1
- package/dist/cjs/iris-button.cjs.js +8 -7
- package/dist/cjs/iris-button.cjs.js.map +1 -1
- package/dist/cjs/iris-button.entry.cjs.js.map +1 -0
- package/dist/cjs/loader.cjs.js +4 -5
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/iris-button/iris-button.css +85 -13
- package/dist/collection/components/iris-button/iris-button.js +36 -16
- package/dist/collection/components/iris-button/iris-button.js.map +1 -1
- package/dist/collection/index.js +1 -10
- package/dist/collection/index.js.map +1 -1
- package/dist/components/index.js +1098 -4
- package/dist/components/index.js.map +1 -1
- package/dist/components/iris-button.js +23 -21
- package/dist/components/iris-button.js.map +1 -1
- package/dist/esm/app-globals-DQuL1Twl.js +6 -0
- package/dist/esm/app-globals-DQuL1Twl.js.map +1 -0
- package/dist/esm/{index-45a8db1c.js → index-CqbIY27k.js} +161 -94
- package/dist/esm/index-CqbIY27k.js.map +1 -0
- package/dist/esm/index.js +1 -4
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/iris-button.entry.js +18 -18
- package/dist/esm/iris-button.entry.js.map +1 -1
- package/dist/esm/iris-button.js +7 -5
- package/dist/esm/iris-button.js.map +1 -1
- package/dist/esm/loader.js +5 -4
- package/dist/esm/loader.js.map +1 -1
- package/dist/iris-button/index.esm.js +1 -1
- package/dist/iris-button/index.esm.js.map +1 -1
- package/dist/iris-button/iris-button.css +1 -1
- package/dist/iris-button/iris-button.entry.esm.js.map +1 -0
- package/dist/iris-button/iris-button.esm.js +1 -1
- package/dist/iris-button/iris-button.esm.js.map +1 -1
- package/dist/iris-button/loader.esm.js.map +1 -0
- package/dist/iris-button/p-6aaee13d.entry.js +2 -0
- package/dist/iris-button/p-6aaee13d.entry.js.map +1 -0
- package/dist/iris-button/p-CqbIY27k.js +3 -0
- package/dist/iris-button/p-CqbIY27k.js.map +1 -0
- package/dist/iris-button/p-DQuL1Twl.js +2 -0
- package/dist/iris-button/p-DQuL1Twl.js.map +1 -0
- package/dist/types/components/iris-button/iris-button.d.ts +8 -2
- package/dist/types/components.d.ts +8 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/stencil-public-runtime.d.ts +1 -0
- package/package.json +12 -11
- package/readme.md +0 -1
- package/LICENSE +0 -21
- package/dist/cjs/app-globals-3a1e7e63.js +0 -7
- package/dist/cjs/app-globals-3a1e7e63.js.map +0 -1
- package/dist/cjs/index-f786c569.js.map +0 -1
- package/dist/collection/utils/utils.js +0 -4
- package/dist/collection/utils/utils.js.map +0 -1
- package/dist/components/p-913b636c.js +0 -1063
- package/dist/components/p-913b636c.js.map +0 -1
- package/dist/esm/app-globals-0f993ce5.js +0 -5
- package/dist/esm/app-globals-0f993ce5.js.map +0 -1
- package/dist/esm/index-45a8db1c.js.map +0 -1
- package/dist/iris-button/p-705a656b.js +0 -3
- package/dist/iris-button/p-705a656b.js.map +0 -1
- package/dist/iris-button/p-cbf16ce7.entry.js +0 -2
- package/dist/iris-button/p-cbf16ce7.entry.js.map +0 -1
- package/dist/iris-button/p-e1255160.js +0 -2
- package/dist/iris-button/p-e1255160.js.map +0 -1
- package/dist/types/utils/utils.d.ts +0 -1
- package/loader/package.json +0 -11
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
var index = require('./index-CHCvKTZA.js');
|
|
4
4
|
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
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)}";
|
|
8
|
-
const IrisButtonStyle0 = irisButtonCss;
|
|
5
|
+
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)}";
|
|
9
6
|
|
|
10
7
|
const IrisButton = class {
|
|
11
8
|
constructor(hostRef) {
|
|
12
9
|
index.registerInstance(this, hostRef);
|
|
13
|
-
this.buttonClicked = index.createEvent(this, "buttonClicked",
|
|
10
|
+
this.buttonClicked = index.createEvent(this, "buttonClicked", 1);
|
|
14
11
|
this.buttonFocused = index.createEvent(this, "buttonFocused", 7);
|
|
15
12
|
/**
|
|
16
13
|
* Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.
|
|
@@ -30,8 +27,10 @@ const IrisButton = class {
|
|
|
30
27
|
* Al activarse esta opción, el botón se deshabilita.
|
|
31
28
|
*/
|
|
32
29
|
this.loading = false;
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
/**
|
|
31
|
+
* Tamaño del botón.
|
|
32
|
+
*/
|
|
33
|
+
this.size = 'medium';
|
|
35
34
|
//#endregion
|
|
36
35
|
//#region Handlers
|
|
37
36
|
/**
|
|
@@ -40,9 +39,9 @@ const IrisButton = class {
|
|
|
40
39
|
*/
|
|
41
40
|
this.handleClick = (ev) => {
|
|
42
41
|
// Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.
|
|
43
|
-
this.disabled = true;
|
|
42
|
+
this.button.disabled = true;
|
|
44
43
|
setTimeout(() => {
|
|
45
|
-
this.disabled = false;
|
|
44
|
+
this.button.disabled = false;
|
|
46
45
|
}, 1000);
|
|
47
46
|
// Lanzamos el evento.
|
|
48
47
|
this.buttonClicked.emit(ev);
|
|
@@ -60,25 +59,24 @@ const IrisButton = class {
|
|
|
60
59
|
// Validamos que todos los campos están rellenos.
|
|
61
60
|
try {
|
|
62
61
|
if (!this.label)
|
|
63
|
-
throw
|
|
62
|
+
throw "No se ha definido la propiedad 'label'.";
|
|
64
63
|
if (!this.icon)
|
|
65
|
-
throw
|
|
64
|
+
throw "No se ha definido la propiedad 'icon'.";
|
|
66
65
|
}
|
|
67
66
|
catch (e) {
|
|
68
67
|
console.error(e);
|
|
69
68
|
return;
|
|
70
69
|
}
|
|
71
|
-
return (index.h("button", { color: this.color, type: this.type, onClick: this.handleClick, disabled: this.disabled || this.loading, onFocus: this.handleFocus, title: this.label },
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
this.type ==
|
|
76
|
-
? this.label
|
|
77
|
-
: ""));
|
|
70
|
+
return (index.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 },
|
|
71
|
+
// Comprobamos si se muestra cargando
|
|
72
|
+
!this.loading ? (index.h("iris-icon", { icon: this.icon, size: this.size })) : (index.h("i", { class: "loading" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }), index.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" })))),
|
|
73
|
+
// Solo añadimos el label para los botones normales.
|
|
74
|
+
this.type == 'icon' || this.type == 'fab' ? '' : this.label));
|
|
78
75
|
}
|
|
79
76
|
};
|
|
80
|
-
IrisButton.style =
|
|
77
|
+
IrisButton.style = irisButtonCss;
|
|
81
78
|
|
|
82
79
|
exports.iris_button = IrisButton;
|
|
80
|
+
//# sourceMappingURL=iris-button.entry.cjs.js.map
|
|
83
81
|
|
|
84
82
|
//# sourceMappingURL=iris-button.cjs.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"iris-button.entry.cjs.js","mappings":"
|
|
1
|
+
{"file":"iris-button.entry.cjs.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,guHAAguH;;MCOzuH,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;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,QACEA,OAAA,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,IACXA,OAAA,CAAA,WAAA,EAAA,EAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAc,KAEzDA,OAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,SAAS,EAAA,EAChBA,OAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrEA,OAAA,CAAA,MAAA,EAAA,EACE,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,mHAAmH,EACrH,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,GAAG,EACV,CAAA,EACRA,OAAA,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":["h"],"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}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const index = require('./index-f786c569.js');
|
|
6
|
-
const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
3
|
+
var index = require('./index-CHCvKTZA.js');
|
|
4
|
+
var appGlobals = require('./app-globals-V2Kpy_OQ.js');
|
|
7
5
|
|
|
6
|
+
var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
|
|
8
7
|
/*
|
|
9
|
-
Stencil Client Patch Browser v4.
|
|
8
|
+
Stencil Client Patch Browser v4.28.2 | MIT Licensed | https://stenciljs.com
|
|
10
9
|
*/
|
|
10
|
+
|
|
11
11
|
var patchBrowser = () => {
|
|
12
|
-
const importMeta = (typeof document === 'undefined' ?
|
|
12
|
+
const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('iris-button.cjs.js', document.baseURI).href));
|
|
13
13
|
const opts = {};
|
|
14
14
|
if (importMeta !== "") {
|
|
15
15
|
opts.resourcesUrl = new URL(".", importMeta).href;
|
|
@@ -19,9 +19,10 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["iris-button.cjs",[[1,"iris-button",{"label":[1],"color":[1],"icon":[1],"disabled":[
|
|
22
|
+
return index.bootstrapLazy([["iris-button.cjs",[[1,"iris-button",{"label":[1],"color":[1],"icon":[1],"disabled":[4],"type":[1],"loading":[4],"size":[1]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
26
|
+
//# sourceMappingURL=iris-button.cjs.js.map
|
|
26
27
|
|
|
27
28
|
//# sourceMappingURL=iris-button.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"iris-button.cjs.js","
|
|
1
|
+
{"version":3,"file":"iris-button.cjs.js","sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.28.2 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":["promiseResolve","globalScripts","bootstrapLazy"],"mappings":";;;;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,oQAAe;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"iris-button.entry.cjs.js","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"],"names":["h"],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,guHAAguH;;MCOzuH,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;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,QACEA,OAAA,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,IACXA,OAAA,CAAA,WAAA,EAAA,EAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAc,KAEzDA,OAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,SAAS,EAAA,EAChBA,OAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrEA,OAAA,CAAA,MAAA,EAAA,EACE,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,mHAAmH,EACrH,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,GAAG,EACV,CAAA,EACRA,OAAA,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;;;;;;;"}
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const index = require('./index-f786c569.js');
|
|
6
|
-
const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
3
|
+
var index = require('./index-CHCvKTZA.js');
|
|
4
|
+
var appGlobals = require('./app-globals-V2Kpy_OQ.js');
|
|
7
5
|
|
|
8
6
|
const defineCustomElements = async (win, options) => {
|
|
9
7
|
if (typeof window === 'undefined') return undefined;
|
|
10
8
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["iris-button.cjs",[[1,"iris-button",{"label":[1],"color":[1],"icon":[1],"disabled":[
|
|
9
|
+
return index.bootstrapLazy([["iris-button.cjs",[[1,"iris-button",{"label":[1],"color":[1],"icon":[1],"disabled":[4],"type":[1],"loading":[4],"size":[1]}]]]], options);
|
|
12
10
|
};
|
|
13
11
|
|
|
14
12
|
exports.setNonce = index.setNonce;
|
|
15
13
|
exports.defineCustomElements = defineCustomElements;
|
|
14
|
+
//# sourceMappingURL=loader.cjs.js.map
|
|
16
15
|
|
|
17
16
|
//# sourceMappingURL=loader.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"loader.cjs.js","
|
|
1
|
+
{"version":3,"file":"loader.cjs.js","sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n if (typeof window === 'undefined') return undefined;\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"names":["globalScripts","bootstrapLazy"],"mappings":";;;;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS;AACrD,EAAE,MAAMA,wBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D;;;;;"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
@charset "UTF-8";
|
|
2
1
|
@keyframes spin {
|
|
3
2
|
0% {
|
|
4
3
|
transform: rotate(0deg);
|
|
@@ -20,8 +19,9 @@
|
|
|
20
19
|
}
|
|
21
20
|
|
|
22
21
|
button {
|
|
22
|
+
font-size: var(--font-size);
|
|
23
23
|
padding: 8px 12px;
|
|
24
|
-
color:
|
|
24
|
+
color: var(--white);
|
|
25
25
|
background-color: var(--company-primary-dark);
|
|
26
26
|
-webkit-transition: background-color 0.5s ease;
|
|
27
27
|
-ms-transition: background-color 0.5s ease;
|
|
@@ -37,10 +37,6 @@ button {
|
|
|
37
37
|
cursor: pointer;
|
|
38
38
|
gap: 0.1rem;
|
|
39
39
|
font-family: var(--font-primary);
|
|
40
|
-
/*#region Colores de los botones.*/
|
|
41
|
-
/*Este mixin recibe el tipo
|
|
42
|
-
y se utiliza para concatenar strings, de tal modo que se pasa por parámetro parte de las clases y propiedades.*/
|
|
43
|
-
/*#endregion*/
|
|
44
40
|
}
|
|
45
41
|
button:hover {
|
|
46
42
|
background-color: var(--company-primary-focus);
|
|
@@ -49,16 +45,11 @@ button:focus {
|
|
|
49
45
|
outline: 2px solid var(--blue_light);
|
|
50
46
|
outline-offset: 1px;
|
|
51
47
|
}
|
|
52
|
-
button .material-symbols-rounded,
|
|
53
|
-
button i {
|
|
54
|
-
font-family: var(--font-family-material-icons);
|
|
55
|
-
font-size: var(--font-size-icon);
|
|
56
|
-
}
|
|
57
48
|
button:not([type=icon], [type=fab]) .material-symbols-rounded,
|
|
58
49
|
button:not([type=icon], [type=fab]) .loading {
|
|
59
50
|
margin-right: 5px;
|
|
60
51
|
}
|
|
61
|
-
button[type=fab] {
|
|
52
|
+
button[type=fab], button[type=icon] {
|
|
62
53
|
-webkit-border-radius: 50%;
|
|
63
54
|
-moz-border-radius: 50%;
|
|
64
55
|
border-radius: 50%;
|
|
@@ -72,37 +63,104 @@ button[type=fab] {
|
|
|
72
63
|
}
|
|
73
64
|
button .loading {
|
|
74
65
|
animation: show-loading 1s 1;
|
|
66
|
+
display: -ms-flexbox;
|
|
67
|
+
display: -webkit-box;
|
|
68
|
+
display: flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
height: calc(var(--font-size-icon) * 1.19);
|
|
75
71
|
}
|
|
76
72
|
button .loading svg {
|
|
77
73
|
animation: spin 1s infinite;
|
|
78
74
|
color: var(--primary);
|
|
79
75
|
height: var(--font-size-icon);
|
|
80
76
|
}
|
|
77
|
+
button iris-icon {
|
|
78
|
+
display: -ms-flexbox;
|
|
79
|
+
display: -webkit-box;
|
|
80
|
+
display: flex;
|
|
81
|
+
}
|
|
82
|
+
button[color=primary] {
|
|
83
|
+
background-color: var(--company-primary-dark);
|
|
84
|
+
}
|
|
85
|
+
button[color=primary]:hover {
|
|
86
|
+
background-color: var(--company-primary-focus);
|
|
87
|
+
}
|
|
88
|
+
button[color=primary][type=icon] {
|
|
89
|
+
background-color: unset;
|
|
90
|
+
color: var(--company-primary-dark);
|
|
91
|
+
}
|
|
92
|
+
button[color=primary][type=icon]:hover {
|
|
93
|
+
background-color: var(--company-primary-light);
|
|
94
|
+
}
|
|
95
|
+
button[color=primary] .loading svg {
|
|
96
|
+
color: var(--company-primary-dark);
|
|
97
|
+
}
|
|
81
98
|
button[color=success] {
|
|
82
99
|
background-color: var(--company-success-dark);
|
|
83
100
|
}
|
|
84
101
|
button[color=success]:hover {
|
|
85
102
|
background-color: var(--company-success-focus);
|
|
86
103
|
}
|
|
104
|
+
button[color=success][type=icon] {
|
|
105
|
+
background-color: unset;
|
|
106
|
+
color: var(--company-success-dark);
|
|
107
|
+
}
|
|
108
|
+
button[color=success][type=icon]:hover {
|
|
109
|
+
background-color: var(--company-success-light);
|
|
110
|
+
}
|
|
111
|
+
button[color=success] .loading svg {
|
|
112
|
+
color: var(--company-success-dark);
|
|
113
|
+
}
|
|
87
114
|
button[color=warning] {
|
|
88
115
|
background-color: var(--company-warning-dark);
|
|
89
116
|
}
|
|
90
117
|
button[color=warning]:hover {
|
|
91
118
|
background-color: var(--company-warning-focus);
|
|
92
119
|
}
|
|
120
|
+
button[color=warning][type=icon] {
|
|
121
|
+
background-color: unset;
|
|
122
|
+
color: var(--company-warning-dark);
|
|
123
|
+
}
|
|
124
|
+
button[color=warning][type=icon]:hover {
|
|
125
|
+
background-color: var(--company-warning-light);
|
|
126
|
+
}
|
|
127
|
+
button[color=warning] .loading svg {
|
|
128
|
+
color: var(--company-warning-dark);
|
|
129
|
+
}
|
|
93
130
|
button[color=error] {
|
|
94
131
|
background-color: var(--company-error-dark);
|
|
95
132
|
}
|
|
96
133
|
button[color=error]:hover {
|
|
97
134
|
background-color: var(--company-error-focus);
|
|
98
135
|
}
|
|
136
|
+
button[color=error][type=icon] {
|
|
137
|
+
background-color: unset;
|
|
138
|
+
color: var(--company-error-dark);
|
|
139
|
+
}
|
|
140
|
+
button[color=error][type=icon]:hover {
|
|
141
|
+
background-color: var(--company-error-light);
|
|
142
|
+
}
|
|
143
|
+
button[color=error] .loading svg {
|
|
144
|
+
color: var(--company-error-dark);
|
|
145
|
+
}
|
|
99
146
|
button[color=basic] {
|
|
147
|
+
background-color: var(--company-basic-dark);
|
|
148
|
+
color: var(--black);
|
|
100
149
|
background-color: var(--company-basic-light);
|
|
101
|
-
color: var(--company-basic-dark);
|
|
102
150
|
}
|
|
103
151
|
button[color=basic]:hover {
|
|
104
152
|
background-color: var(--company-basic-focus);
|
|
105
153
|
}
|
|
154
|
+
button[color=basic][type=icon] {
|
|
155
|
+
background-color: unset;
|
|
156
|
+
color: var(--company-basic-dark);
|
|
157
|
+
}
|
|
158
|
+
button[color=basic][type=icon]:hover {
|
|
159
|
+
background-color: var(--company-basic-light);
|
|
160
|
+
}
|
|
161
|
+
button[color=basic] .loading svg {
|
|
162
|
+
color: var(--company-basic-dark);
|
|
163
|
+
}
|
|
106
164
|
button:disabled {
|
|
107
165
|
background-color: var(--company-basic-focus);
|
|
108
166
|
color: var(--company-basic-light);
|
|
@@ -110,4 +168,18 @@ button:disabled {
|
|
|
110
168
|
}
|
|
111
169
|
button:disabled:hover {
|
|
112
170
|
background-color: var(--company-basic-focus);
|
|
171
|
+
}
|
|
172
|
+
button.small {
|
|
173
|
+
font-size: calc(var(--font-size) * 0.8);
|
|
174
|
+
}
|
|
175
|
+
button.small[type=fab], button.small[type=icon] {
|
|
176
|
+
height: calc(36px * 0.8);
|
|
177
|
+
width: calc(36px * 0.8);
|
|
178
|
+
}
|
|
179
|
+
button.large {
|
|
180
|
+
font-size: calc(var(--font-size) * 1.2);
|
|
181
|
+
}
|
|
182
|
+
button.large[type=fab], button.large[type=icon] {
|
|
183
|
+
height: calc(36px * 1.2);
|
|
184
|
+
width: calc(36px * 1.2);
|
|
113
185
|
}
|
|
@@ -19,8 +19,10 @@ export class IrisButton {
|
|
|
19
19
|
* Al activarse esta opción, el botón se deshabilita.
|
|
20
20
|
*/
|
|
21
21
|
this.loading = false;
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
/**
|
|
23
|
+
* Tamaño del botón.
|
|
24
|
+
*/
|
|
25
|
+
this.size = 'medium';
|
|
24
26
|
//#endregion
|
|
25
27
|
//#region Handlers
|
|
26
28
|
/**
|
|
@@ -29,9 +31,9 @@ export class IrisButton {
|
|
|
29
31
|
*/
|
|
30
32
|
this.handleClick = (ev) => {
|
|
31
33
|
// Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.
|
|
32
|
-
this.disabled = true;
|
|
34
|
+
this.button.disabled = true;
|
|
33
35
|
setTimeout(() => {
|
|
34
|
-
this.disabled = false;
|
|
36
|
+
this.button.disabled = false;
|
|
35
37
|
}, 1000);
|
|
36
38
|
// Lanzamos el evento.
|
|
37
39
|
this.buttonClicked.emit(ev);
|
|
@@ -49,21 +51,19 @@ export class IrisButton {
|
|
|
49
51
|
// Validamos que todos los campos están rellenos.
|
|
50
52
|
try {
|
|
51
53
|
if (!this.label)
|
|
52
|
-
throw
|
|
54
|
+
throw "No se ha definido la propiedad 'label'.";
|
|
53
55
|
if (!this.icon)
|
|
54
|
-
throw
|
|
56
|
+
throw "No se ha definido la propiedad 'icon'.";
|
|
55
57
|
}
|
|
56
58
|
catch (e) {
|
|
57
59
|
console.error(e);
|
|
58
60
|
return;
|
|
59
61
|
}
|
|
60
|
-
return (h("button", { color: this.color, type: this.type, onClick: this.handleClick, disabled: this.disabled || this.loading, onFocus: this.handleFocus, title: this.label },
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
this.type ==
|
|
65
|
-
? this.label
|
|
66
|
-
: ""));
|
|
62
|
+
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 },
|
|
63
|
+
// Comprobamos si se muestra cargando
|
|
64
|
+
!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" })))),
|
|
65
|
+
// Solo añadimos el label para los botones normales.
|
|
66
|
+
this.type == 'icon' || this.type == 'fab' ? '' : this.label));
|
|
67
67
|
}
|
|
68
68
|
static get is() { return "iris-button"; }
|
|
69
69
|
static get encapsulation() { return "shadow"; }
|
|
@@ -139,7 +139,7 @@ export class IrisButton {
|
|
|
139
139
|
},
|
|
140
140
|
"disabled": {
|
|
141
141
|
"type": "boolean",
|
|
142
|
-
"mutable":
|
|
142
|
+
"mutable": false,
|
|
143
143
|
"complexType": {
|
|
144
144
|
"original": "boolean",
|
|
145
145
|
"resolved": "boolean",
|
|
@@ -196,6 +196,26 @@ export class IrisButton {
|
|
|
196
196
|
"attribute": "loading",
|
|
197
197
|
"reflect": false,
|
|
198
198
|
"defaultValue": "false"
|
|
199
|
+
},
|
|
200
|
+
"size": {
|
|
201
|
+
"type": "string",
|
|
202
|
+
"mutable": false,
|
|
203
|
+
"complexType": {
|
|
204
|
+
"original": "'small' | 'medium' | 'large'",
|
|
205
|
+
"resolved": "\"large\" | \"medium\" | \"small\"",
|
|
206
|
+
"references": {}
|
|
207
|
+
},
|
|
208
|
+
"required": false,
|
|
209
|
+
"optional": false,
|
|
210
|
+
"docs": {
|
|
211
|
+
"tags": [],
|
|
212
|
+
"text": "Tama\u00F1o del bot\u00F3n."
|
|
213
|
+
},
|
|
214
|
+
"getter": false,
|
|
215
|
+
"setter": false,
|
|
216
|
+
"attribute": "size",
|
|
217
|
+
"reflect": false,
|
|
218
|
+
"defaultValue": "'medium'"
|
|
199
219
|
}
|
|
200
220
|
};
|
|
201
221
|
}
|
|
@@ -203,9 +223,9 @@ export class IrisButton {
|
|
|
203
223
|
return [{
|
|
204
224
|
"method": "buttonClicked",
|
|
205
225
|
"name": "buttonClicked",
|
|
206
|
-
"bubbles":
|
|
226
|
+
"bubbles": false,
|
|
207
227
|
"cancelable": true,
|
|
208
|
-
"composed":
|
|
228
|
+
"composed": false,
|
|
209
229
|
"docs": {
|
|
210
230
|
"tags": [],
|
|
211
231
|
"text": "Evento del bot\u00F3n al ser pulsado."
|
|
@@ -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;AAOxE,MAAM,OAAO,UAAU;IALvB;
|
|
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;AAOxE,MAAM,OAAO,UAAU;IALvB;QAaE;;;WAGG;QAEH,UAAK,GAA0D,SAAS,CAAC;QASzE;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;WAEG;QAEH,SAAI,GAAwB,EAAE,CAAC;QAE/B;;;WAGG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;WAEG;QAEH,SAAI,GAAiC,QAAQ,CAAC;QAuB9C,YAAY;QAEZ,kBAAkB;QAElB;;;WAGG;QACH,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAC1B,uFAAuF;YACvF,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;YAC5B,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC;YAC/B,CAAC,EAAE,IAAI,CAAC,CAAC;YAET,sBAAsB;YACtB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEF;;;WAGG;QACH,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC9B,CAAC,CAAC;KAwDH;IAtDC,YAAY;IAEZ,MAAM;QACJ,iDAAiD;QACjD,IAAI,CAAC;YACH,IAAI,CAAC,IAAI,CAAC,KAAK;gBAAE,MAAM,yCAAyC,CAAC;YACjE,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE,MAAM,wCAAwC,CAAC;QACjE,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACjB,OAAO;QACT,CAAC;QAED,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,SAAG,KAAK,EAAC,SAAS;gBAChB,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;oBACrE,YACE,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,mHAAmH,EACrH,MAAM,EAAC,cAAc,kBACR,GAAG,GACV;oBACR,YACE,OAAO,EAAC,MAAM,EACd,CAAC,EAAC,yFAAyF,EAC3F,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,GAChB,CACJ,CACJ,CACL;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';\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"]}
|
package/dist/collection/index.js
CHANGED
|
@@ -1,11 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
* @fileoverview entry point for your component library
|
|
3
|
-
*
|
|
4
|
-
* This is the entry point for your component library. Use this file to export utilities,
|
|
5
|
-
* constants or data structure that accompany your components.
|
|
6
|
-
*
|
|
7
|
-
* DO NOT use this file to export your components. Instead, use the recommended approaches
|
|
8
|
-
* to consume components of this package as outlined in the `README.md`.
|
|
9
|
-
*/
|
|
10
|
-
export { format } from './utils/utils';
|
|
1
|
+
export {};
|
|
11
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\nexport type * from './components';\n"]}
|