@litigiovirtual/ius-design-components 1.0.70 → 1.0.71
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/esm2022/lib/button-dynamic/button-dynamic.component.mjs +80 -19
- package/esm2022/lib/icons/icons-map.mjs +6 -1
- package/esm2022/lib/loading-circle/loading-circle.component.mjs +2 -2
- package/fesm2022/litigiovirtual-ius-design-components.mjs +84 -18
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/lib/button-dynamic/button-dynamic.component.d.ts +19 -8
- package/package.json +1 -1
|
@@ -6,11 +6,11 @@ export class LoadingCircleComponent {
|
|
|
6
6
|
this.show = true;
|
|
7
7
|
}
|
|
8
8
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoadingCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LoadingCircleComponent, isStandalone: true, selector: "ius-loading-circle", inputs: { show: "show" }, ngImport: i0, template: "@if (show) {\r\n <div class=\"loader-circle\"></div>\r\n}\r\n", styles: [".loader-circle{width:
|
|
9
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LoadingCircleComponent, isStandalone: true, selector: "ius-loading-circle", inputs: { show: "show" }, ngImport: i0, template: "@if (show) {\r\n <div class=\"loader-circle\"></div>\r\n}\r\n", styles: [".loader-circle{width:12px;height:12px;flex-shrink:0;aspect-ratio:1/1;border:4px solid #fff;border-top-color:#013169;border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
10
10
|
}
|
|
11
11
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoadingCircleComponent, decorators: [{
|
|
12
12
|
type: Component,
|
|
13
|
-
args: [{ selector: 'ius-loading-circle', standalone: true, imports: [CommonModule], template: "@if (show) {\r\n <div class=\"loader-circle\"></div>\r\n}\r\n", styles: [".loader-circle{width:
|
|
13
|
+
args: [{ selector: 'ius-loading-circle', standalone: true, imports: [CommonModule], template: "@if (show) {\r\n <div class=\"loader-circle\"></div>\r\n}\r\n", styles: [".loader-circle{width:12px;height:12px;flex-shrink:0;aspect-ratio:1/1;border:4px solid #fff;border-top-color:#013169;border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
14
14
|
}], propDecorators: { show: [{
|
|
15
15
|
type: Input
|
|
16
16
|
}] } });
|
|
@@ -877,6 +877,11 @@ const ICONS = {
|
|
|
877
877
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
878
878
|
<path d="M10 11.8982C8.84017 11.8982 7.84967 11.4877 7.0285 10.6665C6.20734 9.84533 5.79675 8.85483 5.79675 7.69499C5.79675 6.53533 6.20734 5.54583 7.0285 4.72649C7.84967 3.90733 8.84017 3.49774 10 3.49774C11.1598 3.49774 12.1503 3.90733 12.9715 4.72649C13.7927 5.54583 14.2033 6.53533 14.2033 7.69499C14.2033 8.85483 13.7927 9.84533 12.9715 10.6665C12.1503 11.4877 11.1598 11.8982 10 11.8982ZM1.79675 20.305V17.2897C1.79675 16.6799 1.95734 16.1194 2.2785 15.6082C2.59967 15.0969 3.01025 14.7162 3.51025 14.4662C4.36025 14.0329 5.33359 13.6632 6.43025 13.3572C7.52675 13.0512 8.71667 12.8982 10 12.8982H10.4008C10.5348 12.8982 10.6597 12.9149 10.7755 12.9482C10.6342 13.2482 10.5028 13.6007 10.3813 14.0055C10.2598 14.4102 10.17 14.7994 10.112 15.1732H10.0145C8.86134 15.1732 7.81592 15.3183 6.87825 15.6085C5.94059 15.8985 5.17175 16.1919 4.57175 16.4887C4.42175 16.5712 4.30092 16.6845 4.20925 16.8285C4.11759 16.9725 4.07175 17.1362 4.07175 17.3195V18.03H10.288C10.396 18.4238 10.5523 18.8214 10.7568 19.2227C10.9613 19.6242 11.1775 19.985 11.4055 20.305H1.79675ZM16.0898 21.2032L15.7838 19.6732C15.5996 19.5979 15.424 19.5154 15.257 19.4257C15.09 19.3361 14.9208 19.2306 14.7495 19.1092L13.2695 19.5712L12.1978 17.7397L13.3718 16.7217C13.3344 16.5084 13.3168 16.3047 13.3188 16.1105C13.3208 15.9165 13.3384 15.7128 13.3718 15.4995L12.1978 14.4755L13.2695 12.65L14.7495 13.112C14.9208 12.9907 15.09 12.8852 15.257 12.7955C15.424 12.7057 15.5996 12.6231 15.7838 12.5477L16.0898 11.018H18.2393L18.545 12.5477C18.7292 12.6231 18.9058 12.7088 19.0748 12.805C19.2438 12.901 19.4139 13.02 19.5853 13.162L21.0593 12.65L22.137 14.5255L20.957 15.5495C20.9943 15.7335 21.012 15.9288 21.01 16.1355C21.008 16.3423 20.9903 16.5377 20.957 16.7217L22.137 17.7397L21.0593 19.5712L19.5853 19.1092C19.4139 19.2306 19.2438 19.3361 19.0748 19.4257C18.9058 19.5154 18.7292 19.5979 18.545 19.6732L18.2393 21.2032H16.0898ZM17.1675 18.0657C17.7015 18.0657 18.1603 17.8729 18.544 17.4872C18.9277 17.1016 19.1195 16.6417 19.1195 16.1075C19.1195 15.5735 18.9277 15.1147 18.544 14.731C18.1603 14.3473 17.7015 14.1555 17.1675 14.1555C16.6333 14.1555 16.1734 14.3473 15.7878 14.731C15.4021 15.1147 15.2093 15.5735 15.2093 16.1075C15.2093 16.6417 15.4021 17.1016 15.7878 17.4872C16.1734 17.8729 16.6333 18.0657 17.1675 18.0657ZM9.99975 9.62324C10.5299 9.62324 10.9839 9.43449 11.3618 9.05699C11.7394 8.67949 11.9283 8.22558 11.9283 7.69524C11.9283 7.16508 11.7395 6.71216 11.362 6.33649C10.9843 5.96066 10.5304 5.77274 10.0003 5.77274C9.47009 5.77274 9.01609 5.96099 8.63825 6.33749C8.26059 6.71399 8.07175 7.16649 8.07175 7.69499C8.07175 8.22533 8.2605 8.67933 8.638 9.05699C9.01567 9.43449 9.46959 9.62324 9.99975 9.62324Z" fill="currentColor"/>
|
|
879
879
|
</svg>
|
|
880
|
+
`,
|
|
881
|
+
'icon-arrows-output': `
|
|
882
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
|
|
883
|
+
<path d="M10 12.475C9.31669 12.475 8.73336 12.2333 8.25002 11.75C7.76669 11.2667 7.52502 10.6833 7.52502 10C7.52502 9.31667 7.76669 8.73333 8.25002 8.25C8.73336 7.76667 9.31669 7.525 10 7.525C10.6834 7.525 11.2667 7.76667 11.75 8.25C12.2334 8.73333 12.475 9.31667 12.475 10C12.475 10.6833 12.2334 11.2667 11.75 11.75C11.2667 12.2333 10.6834 12.475 10 12.475ZM4.92127 17.0542H5.66477C6.05927 17.0542 6.39369 17.1924 6.66802 17.4688C6.94219 17.7451 7.07927 18.0785 7.07927 18.469C7.07927 18.8635 6.94219 19.1979 6.66802 19.4722C6.39369 19.7466 6.05927 19.8837 5.66477 19.8837H1.53102C1.13652 19.8837 0.802105 19.7466 0.527772 19.4722C0.253439 19.1979 0.116272 18.8635 0.116272 18.469V14.3353C0.116272 13.9408 0.253439 13.6063 0.527772 13.332C0.802105 13.0578 1.13652 12.9207 1.53102 12.9207C1.92152 12.9207 2.25494 13.0578 2.53127 13.332C2.80761 13.6063 2.94577 13.9408 2.94577 14.3353V15.0788L4.70327 13.3212C4.97327 13.0512 5.30352 12.9162 5.69402 12.9162C6.08469 12.9162 6.41294 13.0512 6.67877 13.3212C6.94877 13.5871 7.08377 13.9153 7.08377 14.306C7.08377 14.6965 6.94877 15.0267 6.67877 15.2968L4.92127 17.0542ZM15.0788 17.0542L13.3213 15.2968C13.0513 15.0267 12.9163 14.6965 12.9163 14.306C12.9163 13.9153 13.0513 13.5871 13.3213 13.3212C13.5871 13.0512 13.9154 12.9162 14.306 12.9162C14.6965 12.9162 15.0268 13.0512 15.2968 13.3212L17.0543 15.0788V14.3353C17.0543 13.9408 17.1924 13.6063 17.4688 13.332C17.7451 13.0578 18.0785 12.9207 18.469 12.9207C18.8635 12.9207 19.1979 13.0578 19.4723 13.332C19.7466 13.6063 19.8838 13.9408 19.8838 14.3353V18.469C19.8838 18.8635 19.7466 19.1979 19.4723 19.4722C19.1979 19.7466 18.8635 19.8837 18.469 19.8837H14.3353C13.9408 19.8837 13.6064 19.7466 13.332 19.4722C13.0579 19.1979 12.9208 18.8635 12.9208 18.469C12.9208 18.0785 13.0579 17.7451 13.332 17.4688C13.6064 17.1924 13.9408 17.0542 14.3353 17.0542H15.0788ZM2.94577 4.92125V5.66475C2.94577 6.05925 2.80761 6.39366 2.53127 6.668C2.25494 6.94216 1.92152 7.07925 1.53102 7.07925C1.13652 7.07925 0.802105 6.94216 0.527772 6.668C0.253439 6.39366 0.116272 6.05925 0.116272 5.66475V1.531C0.116272 1.1365 0.253439 0.802081 0.527772 0.527748C0.802105 0.253415 1.13652 0.116249 1.53102 0.116249H5.66477C6.05927 0.116249 6.39369 0.253415 6.66802 0.527748C6.94219 0.802081 7.07927 1.1365 7.07927 1.531C7.07927 1.9215 6.94219 2.25492 6.66802 2.53125C6.39369 2.80758 6.05927 2.94575 5.66477 2.94575H4.92127L6.67877 4.70325C6.94877 4.97325 7.08377 5.3035 7.08377 5.694C7.08377 6.08467 6.94877 6.41292 6.67877 6.67875C6.41294 6.94875 6.08469 7.08375 5.69402 7.08375C5.30352 7.08375 4.97327 6.94875 4.70327 6.67875L2.94577 4.92125ZM17.0543 4.92125L15.2968 6.67875C15.0268 6.94875 14.6965 7.08375 14.306 7.08375C13.9154 7.08375 13.5871 6.94875 13.3213 6.67875C13.0513 6.41292 12.9163 6.08467 12.9163 5.694C12.9163 5.3035 13.0513 4.97325 13.3213 4.70325L15.0788 2.94575H14.3353C13.9408 2.94575 13.6064 2.80758 13.332 2.53125C13.0579 2.25492 12.9208 1.9215 12.9208 1.531C12.9208 1.1365 13.0579 0.802081 13.332 0.527748C13.6064 0.253415 13.9408 0.116249 14.3353 0.116249H18.469C18.8635 0.116249 19.1979 0.253415 19.4723 0.527748C19.7466 0.802081 19.8838 1.1365 19.8838 1.531V5.66475C19.8838 6.05925 19.7466 6.39366 19.4723 6.668C19.1979 6.94216 18.8635 7.07925 18.469 7.07925C18.0785 7.07925 17.7451 6.94216 17.4688 6.668C17.1924 6.39366 17.0543 6.05925 17.0543 5.66475V4.92125Z" fill="currentColor"/>
|
|
884
|
+
</svg>
|
|
880
885
|
`,
|
|
881
886
|
'icon-account-circle-2': `
|
|
882
887
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
@@ -1218,51 +1223,112 @@ class LoadingCircleComponent {
|
|
|
1218
1223
|
this.show = true;
|
|
1219
1224
|
}
|
|
1220
1225
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoadingCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1221
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LoadingCircleComponent, isStandalone: true, selector: "ius-loading-circle", inputs: { show: "show" }, ngImport: i0, template: "@if (show) {\r\n <div class=\"loader-circle\"></div>\r\n}\r\n", styles: [".loader-circle{width:
|
|
1226
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LoadingCircleComponent, isStandalone: true, selector: "ius-loading-circle", inputs: { show: "show" }, ngImport: i0, template: "@if (show) {\r\n <div class=\"loader-circle\"></div>\r\n}\r\n", styles: [".loader-circle{width:12px;height:12px;flex-shrink:0;aspect-ratio:1/1;border:4px solid #fff;border-top-color:#013169;border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
1222
1227
|
}
|
|
1223
1228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoadingCircleComponent, decorators: [{
|
|
1224
1229
|
type: Component,
|
|
1225
|
-
args: [{ selector: 'ius-loading-circle', standalone: true, imports: [CommonModule], template: "@if (show) {\r\n <div class=\"loader-circle\"></div>\r\n}\r\n", styles: [".loader-circle{width:
|
|
1230
|
+
args: [{ selector: 'ius-loading-circle', standalone: true, imports: [CommonModule], template: "@if (show) {\r\n <div class=\"loader-circle\"></div>\r\n}\r\n", styles: [".loader-circle{width:12px;height:12px;flex-shrink:0;aspect-ratio:1/1;border:4px solid #fff;border-top-color:#013169;border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
1226
1231
|
}], propDecorators: { show: [{
|
|
1227
1232
|
type: Input
|
|
1228
1233
|
}] } });
|
|
1229
1234
|
|
|
1230
1235
|
class ButtonDynamicComponent {
|
|
1231
1236
|
constructor() {
|
|
1232
|
-
this.
|
|
1237
|
+
this.labelDefault = 'Guardar';
|
|
1238
|
+
this.labelSuccess = 'Guardado';
|
|
1239
|
+
this.labelError = 'Error';
|
|
1233
1240
|
this.disabled = false;
|
|
1234
1241
|
this.loading = false;
|
|
1235
|
-
this.
|
|
1236
|
-
this.
|
|
1237
|
-
this.autoResetDelay = 3000;
|
|
1242
|
+
this.autoReset = true;
|
|
1243
|
+
this.autoResetDelay = 1500;
|
|
1238
1244
|
this.buttonClicked = new EventEmitter();
|
|
1245
|
+
this.state = 'default';
|
|
1239
1246
|
}
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1247
|
+
ngOnChanges(changes) {
|
|
1248
|
+
// 1) disabled manda todo a 'disabled'
|
|
1249
|
+
if (this.disabled) {
|
|
1250
|
+
this.setState('disabled');
|
|
1251
|
+
return;
|
|
1252
|
+
}
|
|
1253
|
+
// 2) loading gobierna mientras es true
|
|
1254
|
+
if (changes['loading']) {
|
|
1255
|
+
if (this.loading) {
|
|
1256
|
+
this.clearTimer();
|
|
1257
|
+
this.setState('loading');
|
|
1258
|
+
return;
|
|
1259
|
+
}
|
|
1260
|
+
else {
|
|
1261
|
+
// loading → false: mirar result
|
|
1262
|
+
this.applyResultState();
|
|
1263
|
+
return;
|
|
1264
|
+
}
|
|
1265
|
+
}
|
|
1266
|
+
// 3) Si cambió 'result' y no estamos cargando, aplicar
|
|
1267
|
+
if (changes['result'] && !this.loading) {
|
|
1268
|
+
this.applyResultState();
|
|
1269
|
+
}
|
|
1270
|
+
// 4) fallback
|
|
1271
|
+
if (!this.loading && !this.result) {
|
|
1272
|
+
this.setState('default');
|
|
1243
1273
|
}
|
|
1244
1274
|
}
|
|
1245
|
-
|
|
1246
|
-
|
|
1275
|
+
applyResultState() {
|
|
1276
|
+
if (this.result === 'success') {
|
|
1277
|
+
this.setState('success');
|
|
1278
|
+
this.armAutoReset();
|
|
1279
|
+
}
|
|
1280
|
+
else if (this.result === 'error') {
|
|
1281
|
+
this.setState('error');
|
|
1282
|
+
this.armAutoReset();
|
|
1283
|
+
}
|
|
1284
|
+
else {
|
|
1285
|
+
this.setState('default');
|
|
1286
|
+
}
|
|
1287
|
+
}
|
|
1288
|
+
armAutoReset() {
|
|
1289
|
+
this.clearTimer();
|
|
1290
|
+
if (!this.autoReset)
|
|
1291
|
+
return;
|
|
1292
|
+
this.resetTimer = setTimeout(() => {
|
|
1293
|
+
this.setState('default');
|
|
1294
|
+
}, this.autoResetDelay);
|
|
1295
|
+
}
|
|
1296
|
+
clearTimer() {
|
|
1297
|
+
if (this.resetTimer) {
|
|
1298
|
+
clearTimeout(this.resetTimer);
|
|
1299
|
+
this.resetTimer = null;
|
|
1300
|
+
}
|
|
1247
1301
|
}
|
|
1248
|
-
|
|
1249
|
-
|
|
1302
|
+
setState(s) {
|
|
1303
|
+
this.state = s;
|
|
1304
|
+
}
|
|
1305
|
+
onClick() {
|
|
1306
|
+
if (this.state === 'loading' || this.state === 'disabled')
|
|
1307
|
+
return;
|
|
1308
|
+
this.buttonClicked.emit();
|
|
1309
|
+
}
|
|
1310
|
+
ngOnDestroy() {
|
|
1311
|
+
this.clearTimer();
|
|
1250
1312
|
}
|
|
1251
1313
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonDynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1252
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ButtonDynamicComponent, isStandalone: true, selector: "ius-button-dynamic", inputs: {
|
|
1314
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ButtonDynamicComponent, isStandalone: true, selector: "ius-button-dynamic", inputs: { labelDefault: "labelDefault", labelSuccess: "labelSuccess", labelError: "labelError", disabled: "disabled", loading: "loading", result: "result", autoReset: "autoReset", autoResetDelay: "autoResetDelay" }, outputs: { buttonClicked: "buttonClicked" }, usesOnChanges: true, ngImport: i0, template: "<button class=\"ius-btn\" [attr.data-state]=\"state\" [disabled]=\"state === 'disabled' || state === 'loading'\"\r\n (click)=\"onClick()\" aria-live=\"polite\">\r\n @switch (state) {\r\n @case ('loading') {\r\n <ius-loading-circle></ius-loading-circle>\r\n }\r\n @case ('success') {\r\n <ius-icon-md iconName=\"icon-check-circle\"></ius-icon-md>\r\n <span>{{ labelSuccess }}</span>\r\n }\r\n @case ('error') {\r\n <ius-icon-md iconName=\"icon-error\"></ius-icon-md>\r\n <span>{{ labelError }}</span>\r\n }\r\n @default {\r\n <span>{{ labelDefault }}</span>\r\n }\r\n }\r\n</button>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.ius-btn{display:flex;position:relative;align-items:center;justify-content:center;gap:8px;width:100%;height:40px;padding:12px 24px;border:none;border-radius:14px;background-color:#013169;color:#fff;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;cursor:pointer;transition:background-color .15s ease,box-shadow .15s ease,transform .02s ease}.ius-btn:hover:not(:disabled):not([data-state=loading]):not([data-state=success]):not([data-state=error]){background-color:#08a6db;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ius-btn:active:not(:disabled){background-color:#0581bc}.ius-btn:disabled{background-color:#f5f5f5;color:#bfbfbf;cursor:not-allowed}.ius-btn[data-state=loading]{background-color:#0581bc}.ius-btn[data-state=success]{background-color:#7caf25}.ius-btn[data-state=error]{background-color:#db2e2a}.ius-btn[data-state=disabled]{background-color:#f5f5f5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LoadingCircleComponent, selector: "ius-loading-circle", inputs: ["show"] }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }] }); }
|
|
1253
1315
|
}
|
|
1254
1316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonDynamicComponent, decorators: [{
|
|
1255
1317
|
type: Component,
|
|
1256
|
-
args: [{ selector: 'ius-button-dynamic', standalone: true, imports: [CommonModule, LoadingCircleComponent, IconMdComponent], template: "<button \
|
|
1257
|
-
}], propDecorators: {
|
|
1318
|
+
args: [{ selector: 'ius-button-dynamic', standalone: true, imports: [CommonModule, LoadingCircleComponent, IconMdComponent], template: "<button class=\"ius-btn\" [attr.data-state]=\"state\" [disabled]=\"state === 'disabled' || state === 'loading'\"\r\n (click)=\"onClick()\" aria-live=\"polite\">\r\n @switch (state) {\r\n @case ('loading') {\r\n <ius-loading-circle></ius-loading-circle>\r\n }\r\n @case ('success') {\r\n <ius-icon-md iconName=\"icon-check-circle\"></ius-icon-md>\r\n <span>{{ labelSuccess }}</span>\r\n }\r\n @case ('error') {\r\n <ius-icon-md iconName=\"icon-error\"></ius-icon-md>\r\n <span>{{ labelError }}</span>\r\n }\r\n @default {\r\n <span>{{ labelDefault }}</span>\r\n }\r\n }\r\n</button>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.ius-btn{display:flex;position:relative;align-items:center;justify-content:center;gap:8px;width:100%;height:40px;padding:12px 24px;border:none;border-radius:14px;background-color:#013169;color:#fff;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;cursor:pointer;transition:background-color .15s ease,box-shadow .15s ease,transform .02s ease}.ius-btn:hover:not(:disabled):not([data-state=loading]):not([data-state=success]):not([data-state=error]){background-color:#08a6db;box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.ius-btn:active:not(:disabled){background-color:#0581bc}.ius-btn:disabled{background-color:#f5f5f5;color:#bfbfbf;cursor:not-allowed}.ius-btn[data-state=loading]{background-color:#0581bc}.ius-btn[data-state=success]{background-color:#7caf25}.ius-btn[data-state=error]{background-color:#db2e2a}.ius-btn[data-state=disabled]{background-color:#f5f5f5}\n"] }]
|
|
1319
|
+
}], propDecorators: { labelDefault: [{
|
|
1320
|
+
type: Input
|
|
1321
|
+
}], labelSuccess: [{
|
|
1322
|
+
type: Input
|
|
1323
|
+
}], labelError: [{
|
|
1258
1324
|
type: Input
|
|
1259
1325
|
}], disabled: [{
|
|
1260
1326
|
type: Input
|
|
1261
1327
|
}], loading: [{
|
|
1262
1328
|
type: Input
|
|
1263
|
-
}],
|
|
1329
|
+
}], result: [{
|
|
1264
1330
|
type: Input
|
|
1265
|
-
}],
|
|
1331
|
+
}], autoReset: [{
|
|
1266
1332
|
type: Input
|
|
1267
1333
|
}], autoResetDelay: [{
|
|
1268
1334
|
type: Input
|