s4y-ui 2.0.1 → 2.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/fesm2022/s4y-ui.mjs
CHANGED
|
@@ -346,17 +346,17 @@ class ButtonComponent {
|
|
|
346
346
|
}
|
|
347
347
|
});
|
|
348
348
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
349
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ButtonComponent, isStandalone: true, selector: "button[
|
|
349
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ButtonComponent, isStandalone: true, selector: "button[s4yButton], a[s4yButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.btn-default": "true", "class.loading": "loading()", "attr.size": "size()", "attr.variant": "variant()", "style.width": "fullWidth() ? \"100%\" : null", "class.outlined": "outlined()", "class.disabled": "disabled()", "class": "variantClass()", "disabled": "this.isDisabled" } }, ngImport: i0, template: `
|
|
350
350
|
@if (loading()) {
|
|
351
351
|
<div class="loader"></div>
|
|
352
352
|
} @else {
|
|
353
353
|
<ng-content></ng-content>
|
|
354
354
|
}
|
|
355
|
-
`, isInline: true, styles: [":host.btn-default{display:flex;align-items:center;justify-content:center;gap:.8rem;color:#fff;height:
|
|
355
|
+
`, isInline: true, styles: [":host.btn-default{display:flex;align-items:center;justify-content:center;gap:.8rem;color:#fff;min-height:4.6rem;min-width:9.2rem;font-size:1.4rem;font-weight:500;border-radius:var(--radius);padding:.8rem 1.6rem;transition:.5s ease}:host([size=extra-small]){height:2.4rem;min-width:6.4rem;font-size:1.2rem;padding:.4rem .8rem}:host([size=small]){height:3.2rem;min-width:8rem;font-size:1.3rem;padding:.6rem 1.2rem}:host([size=medium]){height:4rem;min-width:9.2rem;font-size:1.4rem;padding:.8rem 1.6rem}:host([size=large]){height:4.8rem;min-width:10.4rem;font-size:1.5rem;padding:1rem 2rem}:host([size=extra-large]){height:5.6rem;min-width:11.6rem;font-size:1.6rem;padding:1.2rem 2.4rem}:host.btn-primary{background-color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary:hover{background-color:transparent;color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary:hover .loader{border:3px solid var(--primary-color)}:host.btn-primary.outlined{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color)}:host.btn-primary.outlined .loader{border:3px solid var(--primary-color)}:host.btn-primary.outlined:hover{color:#fff;background-color:var(--primary-color)}:host.btn-primary.outlined:hover .loader{border:3px solid #fff}:host.btn-secondary{background-color:var(--secondary-color);border:1px solid var(--secondary-color)}:host.btn-secondary:hover{border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host.btn-secondary:hover .loader{border:3px solid var(--secondary-color)}:host.btn-secondary.outlined{border:1px solid var(--secondary-color);background-color:transparent;color:var(--secondary-color)}:host.btn-secondary.outlined .loader{border:3px solid var(--secondary-color)}:host.btn-secondary.outlined:hover{background-color:var(--secondary-color);color:#fff;border:1px solid var(--secondary-color)}:host.btn-secondary.outlined:hover .loader{border:3px solid #fff}:host.btn-danger{background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-danger:hover{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger:hover .loader{border:3px solid var(--danger-color)}:host.btn-danger.outlined{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined .loader{border:3px solid var(--danger-color)}:host.btn-danger.outlined:hover{color:#fff;background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-danger.outlined:hover .loader{border:3px solid #fff}:host.btn-success{background-color:var(--success-color);border:1px solid var(--success-color)}:host.btn-success:hover{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success:hover .loader{border:3px solid var(--success-color)}:host.btn-success.outlined{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined .loader{border:3px solid var(--success-color)}:host.btn-success.outlined:hover{background-color:var(--success-color);border:1px solid var(--success-color);color:#fff}:host.btn-success.outlined:hover .loader{border:3px solid #fff}:host.btn-info{background-color:var(--infor-color);border:1px solid var(--infor-color)}:host.btn-info:hover{border:1px solid var(--infor-color);color:var(--infor-color);background-color:transparent}:host.btn-info:hover .loader{border:3px solid var(--infor-color)}:host.btn-info.outlined{border:1px solid var(--infor-color);color:var(--infor-color);background-color:transparent}:host.btn-info.outlined .loader{border:3px solid var(--infor-color)}:host.btn-info.outlined:hover{background-color:var(--infor-color);border:1px solid var(--infor-color);color:#fff}:host.btn-info.outlined:hover .loader{border:3px solid #fff}:host.disabled{background-color:#979797;color:#fff;cursor:default;border:1px solid #979797;padding:.8rem 1.6rem}:host.disabled:hover{background-color:#979797;color:#fff;border:1px solid #979797}:host.disabled.outlined{background-color:transparent;color:#979797;border:1px solid #979797;pointer-events:none}.loader{width:16px;aspect-ratio:1;border-radius:50%;border:3px solid #fff;animation:l20-1 .8s infinite linear alternate,l20-2 1.6s infinite linear}@keyframes l20-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes l20-2{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}\n"] });
|
|
356
356
|
}
|
|
357
357
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
358
358
|
type: Component,
|
|
359
|
-
args: [{ selector: 'button[
|
|
359
|
+
args: [{ selector: 'button[s4yButton], a[s4yButton]', imports: [], template: `
|
|
360
360
|
@if (loading()) {
|
|
361
361
|
<div class="loader"></div>
|
|
362
362
|
} @else {
|
|
@@ -371,7 +371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
371
371
|
'[class.outlined]': 'outlined()',
|
|
372
372
|
'[class.disabled]': 'disabled()',
|
|
373
373
|
'[class]': 'variantClass()',
|
|
374
|
-
}, styles: [":host.btn-default{display:flex;align-items:center;justify-content:center;gap:.8rem;color:#fff;height:
|
|
374
|
+
}, styles: [":host.btn-default{display:flex;align-items:center;justify-content:center;gap:.8rem;color:#fff;min-height:4.6rem;min-width:9.2rem;font-size:1.4rem;font-weight:500;border-radius:var(--radius);padding:.8rem 1.6rem;transition:.5s ease}:host([size=extra-small]){height:2.4rem;min-width:6.4rem;font-size:1.2rem;padding:.4rem .8rem}:host([size=small]){height:3.2rem;min-width:8rem;font-size:1.3rem;padding:.6rem 1.2rem}:host([size=medium]){height:4rem;min-width:9.2rem;font-size:1.4rem;padding:.8rem 1.6rem}:host([size=large]){height:4.8rem;min-width:10.4rem;font-size:1.5rem;padding:1rem 2rem}:host([size=extra-large]){height:5.6rem;min-width:11.6rem;font-size:1.6rem;padding:1.2rem 2.4rem}:host.btn-primary{background-color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary:hover{background-color:transparent;color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary:hover .loader{border:3px solid var(--primary-color)}:host.btn-primary.outlined{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color)}:host.btn-primary.outlined .loader{border:3px solid var(--primary-color)}:host.btn-primary.outlined:hover{color:#fff;background-color:var(--primary-color)}:host.btn-primary.outlined:hover .loader{border:3px solid #fff}:host.btn-secondary{background-color:var(--secondary-color);border:1px solid var(--secondary-color)}:host.btn-secondary:hover{border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host.btn-secondary:hover .loader{border:3px solid var(--secondary-color)}:host.btn-secondary.outlined{border:1px solid var(--secondary-color);background-color:transparent;color:var(--secondary-color)}:host.btn-secondary.outlined .loader{border:3px solid var(--secondary-color)}:host.btn-secondary.outlined:hover{background-color:var(--secondary-color);color:#fff;border:1px solid var(--secondary-color)}:host.btn-secondary.outlined:hover .loader{border:3px solid #fff}:host.btn-danger{background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-danger:hover{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger:hover .loader{border:3px solid var(--danger-color)}:host.btn-danger.outlined{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined .loader{border:3px solid var(--danger-color)}:host.btn-danger.outlined:hover{color:#fff;background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-danger.outlined:hover .loader{border:3px solid #fff}:host.btn-success{background-color:var(--success-color);border:1px solid var(--success-color)}:host.btn-success:hover{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success:hover .loader{border:3px solid var(--success-color)}:host.btn-success.outlined{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined .loader{border:3px solid var(--success-color)}:host.btn-success.outlined:hover{background-color:var(--success-color);border:1px solid var(--success-color);color:#fff}:host.btn-success.outlined:hover .loader{border:3px solid #fff}:host.btn-info{background-color:var(--infor-color);border:1px solid var(--infor-color)}:host.btn-info:hover{border:1px solid var(--infor-color);color:var(--infor-color);background-color:transparent}:host.btn-info:hover .loader{border:3px solid var(--infor-color)}:host.btn-info.outlined{border:1px solid var(--infor-color);color:var(--infor-color);background-color:transparent}:host.btn-info.outlined .loader{border:3px solid var(--infor-color)}:host.btn-info.outlined:hover{background-color:var(--infor-color);border:1px solid var(--infor-color);color:#fff}:host.btn-info.outlined:hover .loader{border:3px solid #fff}:host.disabled{background-color:#979797;color:#fff;cursor:default;border:1px solid #979797;padding:.8rem 1.6rem}:host.disabled:hover{background-color:#979797;color:#fff;border:1px solid #979797}:host.disabled.outlined{background-color:transparent;color:#979797;border:1px solid #979797;pointer-events:none}.loader{width:16px;aspect-ratio:1;border-radius:50%;border:3px solid #fff;animation:l20-1 .8s infinite linear alternate,l20-2 1.6s infinite linear}@keyframes l20-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes l20-2{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}\n"] }]
|
|
375
375
|
}], propDecorators: { isDisabled: [{
|
|
376
376
|
type: HostBinding,
|
|
377
377
|
args: ['disabled']
|
|
@@ -379,11 +379,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
379
379
|
|
|
380
380
|
class FormFieldComponent {
|
|
381
381
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
382
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: FormFieldComponent, isStandalone: false, selector: "s4y-form-field", ngImport: i0, template: "<label class=\"s4y-form-field\">\r\n <ng-content select=\"s4y-label\"></ng-content>\r\n <div class=\"s4y-input-wrapper\">\r\n <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n <ng-content select=\"input, textarea\"></ng-content>\r\n <ng-content select=\"s4y-input-sufix\"></ng-content>\r\n </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n", styles: [".s4y-
|
|
382
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: FormFieldComponent, isStandalone: false, selector: "s4y-form-field", ngImport: i0, template: "<label class=\"s4y-form-field\">\r\n <ng-content select=\"s4y-label\"></ng-content>\r\n <div class=\"s4y-input-wrapper\">\r\n <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n <ng-content select=\"input, textarea\"></ng-content>\r\n <ng-content select=\"s4y-input-sufix\"></ng-content>\r\n </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n", styles: [".s4y-form-field{display:flex;flex-direction:column;gap:.8rem}.s4y-form-field .s4y-input-wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-form-field:has(input:disabled) .s4y-input-wrapper,.s4y-form-field:has(textarea:disabled) .s4y-input-wrapper{background-color:var(--gray-200)}.s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) .s4y-input-wrapper,.s4y-form-field:has(textarea.ng-invalid.ng-touched.ng-dirty) .s4y-input-wrapper{border:1px solid var(--danger-color);transition:.5s ease;background-color:#fff6f5}::ng-deep .s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) s4y-label,::ng-deep .s4y-form-field:has(textarea.ng-invalid.ng-touched.ng-dirty) s4y-label{color:var(--danger-color);transition:.5s ease}.s4y-form-field:has(input:focus) .s4y-input-wrapper,.s4y-form-field:has(textarea:focus) .s4y-input-wrapper{border:1px solid var(--primary-color)}\n"] });
|
|
383
383
|
}
|
|
384
384
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
385
385
|
type: Component,
|
|
386
|
-
args: [{ selector: 's4y-form-field', standalone: false, template: "<label class=\"s4y-form-field\">\r\n <ng-content select=\"s4y-label\"></ng-content>\r\n <div class=\"s4y-input-wrapper\">\r\n <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n <ng-content select=\"input, textarea\"></ng-content>\r\n <ng-content select=\"s4y-input-sufix\"></ng-content>\r\n </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n", styles: [".s4y-
|
|
386
|
+
args: [{ selector: 's4y-form-field', standalone: false, template: "<label class=\"s4y-form-field\">\r\n <ng-content select=\"s4y-label\"></ng-content>\r\n <div class=\"s4y-input-wrapper\">\r\n <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n <ng-content select=\"input, textarea\"></ng-content>\r\n <ng-content select=\"s4y-input-sufix\"></ng-content>\r\n </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n", styles: [".s4y-form-field{display:flex;flex-direction:column;gap:.8rem}.s4y-form-field .s4y-input-wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-form-field:has(input:disabled) .s4y-input-wrapper,.s4y-form-field:has(textarea:disabled) .s4y-input-wrapper{background-color:var(--gray-200)}.s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) .s4y-input-wrapper,.s4y-form-field:has(textarea.ng-invalid.ng-touched.ng-dirty) .s4y-input-wrapper{border:1px solid var(--danger-color);transition:.5s ease;background-color:#fff6f5}::ng-deep .s4y-form-field:has(input.ng-invalid.ng-touched.ng-dirty) s4y-label,::ng-deep .s4y-form-field:has(textarea.ng-invalid.ng-touched.ng-dirty) s4y-label{color:var(--danger-color);transition:.5s ease}.s4y-form-field:has(input:focus) .s4y-input-wrapper,.s4y-form-field:has(textarea:focus) .s4y-input-wrapper{border:1px solid var(--primary-color)}\n"] }]
|
|
387
387
|
}] });
|
|
388
388
|
|
|
389
389
|
class InputComponent {
|
|
@@ -443,8 +443,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
443
443
|
class FormFieldPasswordComponent {
|
|
444
444
|
type = 'password';
|
|
445
445
|
label = input('Senha');
|
|
446
|
-
name = input();
|
|
447
|
-
id = input();
|
|
446
|
+
name = input.required();
|
|
447
|
+
id = input.required();
|
|
448
448
|
value = '';
|
|
449
449
|
disabled = false;
|
|
450
450
|
togglePasswordVisibility() {
|
|
@@ -471,13 +471,13 @@ class FormFieldPasswordComponent {
|
|
|
471
471
|
this.disabled = isDisabled;
|
|
472
472
|
}
|
|
473
473
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FormFieldPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
474
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: FormFieldPasswordComponent, isStandalone: false, selector: "s4y-form-field-password", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired:
|
|
474
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: FormFieldPasswordComponent, isStandalone: false, selector: "s4y-form-field-password", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
|
|
475
475
|
{
|
|
476
476
|
multi: true,
|
|
477
477
|
provide: NG_VALUE_ACCESSOR,
|
|
478
478
|
useExisting: forwardRef(() => FormFieldPasswordComponent),
|
|
479
479
|
},
|
|
480
|
-
], ngImport: i0, template: "<label class=\"form-field\">\r\n <s4y-label>\r\n {{ label() }}\r\n </s4y-label>\r\n <div class=\"input-wrapper\">\r\n <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n <input\r\n s4y-input\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onTouched()\"\r\n [disabled]=\"disabled\"\r\n [type]=\"type\"\r\n [name]=\"name()\"\r\n [id]=\"id()\"\r\n />\r\n <s4y-input-sufix>\r\n <button\r\n type=\"button\"\r\n class=\"shown-password\"\r\n (click)=\"togglePasswordVisibility()\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"eye\"></ng-container>\r\n </button>\r\n </s4y-input-sufix>\r\n </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n\r\n<!-- Icone cadeado -->\r\n<ng-template #eye>\r\n <!-- Olho fechado -->\r\n @if (type == \"password\") {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"\r\n ></path>\r\n </svg>\r\n }\r\n\r\n <!-- Olho aberto -->\r\n @if (type == \"text\") {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968ZM5.9356 7.3497C4.60673 8.56015 3.6378 10.1672 3.22278 12.0002C4.14022 16.0521 7.7646 19.0002 12.0003 19.0002C13.5997 19.0002 15.112 18.5798 16.4243 17.8384L14.396 15.8101C13.7023 16.2472 12.8808 16.5002 12.0003 16.5002C9.51498 16.5002 7.50026 14.4854 7.50026 12.0002C7.50026 11.1196 7.75317 10.2981 8.19031 9.60442L5.9356 7.3497ZM12.9139 14.328L9.67246 11.0866C9.5613 11.3696 9.50026 11.6777 9.50026 12.0002C9.50026 13.3809 10.6196 14.5002 12.0003 14.5002C12.3227 14.5002 12.6309 14.4391 12.9139 14.328ZM20.8068 16.5925L19.376 15.1617C20.0319 14.2268 20.5154 13.1586 20.7777 12.0002C19.8603 7.94818 16.2359 5.00016 12.0003 5.00016C11.1544 5.00016 10.3329 5.11773 9.55249 5.33818L7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925ZM11.7229 7.50857C11.8146 7.50299 11.9071 7.50016 12.0003 7.50016C14.4855 7.50016 16.5003 9.51488 16.5003 12.0002C16.5003 12.0933 16.4974 12.1858 16.4919 12.2775L11.7229 7.50857Z\"\r\n ></path>\r\n </svg>\r\n }\r\n</ng-template>\r\n", styles: [".form-field{display:flex;flex-direction:column;gap:.8rem}.form-field .input-wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500)}.form-field:has(input:disabled) .input-wrapper{background-color:var(--gray-200)}
|
|
480
|
+
], ngImport: i0, template: "<label class=\"s4y-form-field\">\r\n <s4y-label>\r\n {{ label() }}\r\n </s4y-label>\r\n <div class=\"s4y-input-wrapper\">\r\n <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n <input\r\n s4y-input\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onTouched()\"\r\n [disabled]=\"disabled\"\r\n [type]=\"type\"\r\n [name]=\"name()\"\r\n [id]=\"id()\"\r\n />\r\n <s4y-input-sufix>\r\n <button\r\n type=\"button\"\r\n class=\"shown-password\"\r\n (click)=\"togglePasswordVisibility()\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"eye\"></ng-container>\r\n </button>\r\n </s4y-input-sufix>\r\n </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n\r\n<!-- Icone cadeado -->\r\n<ng-template #eye>\r\n <!-- Olho fechado -->\r\n @if (type == \"password\") {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"\r\n ></path>\r\n </svg>\r\n }\r\n\r\n <!-- Olho aberto -->\r\n @if (type == \"text\") {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968ZM5.9356 7.3497C4.60673 8.56015 3.6378 10.1672 3.22278 12.0002C4.14022 16.0521 7.7646 19.0002 12.0003 19.0002C13.5997 19.0002 15.112 18.5798 16.4243 17.8384L14.396 15.8101C13.7023 16.2472 12.8808 16.5002 12.0003 16.5002C9.51498 16.5002 7.50026 14.4854 7.50026 12.0002C7.50026 11.1196 7.75317 10.2981 8.19031 9.60442L5.9356 7.3497ZM12.9139 14.328L9.67246 11.0866C9.5613 11.3696 9.50026 11.6777 9.50026 12.0002C9.50026 13.3809 10.6196 14.5002 12.0003 14.5002C12.3227 14.5002 12.6309 14.4391 12.9139 14.328ZM20.8068 16.5925L19.376 15.1617C20.0319 14.2268 20.5154 13.1586 20.7777 12.0002C19.8603 7.94818 16.2359 5.00016 12.0003 5.00016C11.1544 5.00016 10.3329 5.11773 9.55249 5.33818L7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925ZM11.7229 7.50857C11.8146 7.50299 11.9071 7.50016 12.0003 7.50016C14.4855 7.50016 16.5003 9.51488 16.5003 12.0002C16.5003 12.0933 16.4974 12.1858 16.4919 12.2775L11.7229 7.50857Z\"\r\n ></path>\r\n </svg>\r\n }\r\n</ng-template>\r\n", styles: [".s4y-form-field{display:flex;flex-direction:column;gap:.8rem}.s4y-form-field .s4y-input-wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-form-field:has(input:disabled) .s4y-input-wrapper{background-color:var(--gray-200)}.s4y-form-field:has(input:focus) .s4y-input-wrapper{border:1px solid var(--primary-color)}.shown-password{min-width:2rem;display:flex;align-items:center;justify-content:center}:host.ng-invalid.ng-dirty.ng-touched .s4y-input-wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}:host.ng-invalid.ng-dirty.ng-touched s4y-label{color:var(--danger-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "input[s4y-input], textarea[s4y-input]" }, { kind: "component", type: LabelComponent, selector: "s4y-label" }, { kind: "component", type: InputSufixComponent, selector: "s4y-input-sufix" }] });
|
|
481
481
|
}
|
|
482
482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FormFieldPasswordComponent, decorators: [{
|
|
483
483
|
type: Component,
|
|
@@ -487,7 +487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
487
487
|
provide: NG_VALUE_ACCESSOR,
|
|
488
488
|
useExisting: forwardRef(() => FormFieldPasswordComponent),
|
|
489
489
|
},
|
|
490
|
-
], template: "<label class=\"form-field\">\r\n <s4y-label>\r\n {{ label() }}\r\n </s4y-label>\r\n <div class=\"input-wrapper\">\r\n <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n <input\r\n s4y-input\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onTouched()\"\r\n [disabled]=\"disabled\"\r\n [type]=\"type\"\r\n [name]=\"name()\"\r\n [id]=\"id()\"\r\n />\r\n <s4y-input-sufix>\r\n <button\r\n type=\"button\"\r\n class=\"shown-password\"\r\n (click)=\"togglePasswordVisibility()\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"eye\"></ng-container>\r\n </button>\r\n </s4y-input-sufix>\r\n </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n\r\n<!-- Icone cadeado -->\r\n<ng-template #eye>\r\n <!-- Olho fechado -->\r\n @if (type == \"password\") {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"\r\n ></path>\r\n </svg>\r\n }\r\n\r\n <!-- Olho aberto -->\r\n @if (type == \"text\") {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968ZM5.9356 7.3497C4.60673 8.56015 3.6378 10.1672 3.22278 12.0002C4.14022 16.0521 7.7646 19.0002 12.0003 19.0002C13.5997 19.0002 15.112 18.5798 16.4243 17.8384L14.396 15.8101C13.7023 16.2472 12.8808 16.5002 12.0003 16.5002C9.51498 16.5002 7.50026 14.4854 7.50026 12.0002C7.50026 11.1196 7.75317 10.2981 8.19031 9.60442L5.9356 7.3497ZM12.9139 14.328L9.67246 11.0866C9.5613 11.3696 9.50026 11.6777 9.50026 12.0002C9.50026 13.3809 10.6196 14.5002 12.0003 14.5002C12.3227 14.5002 12.6309 14.4391 12.9139 14.328ZM20.8068 16.5925L19.376 15.1617C20.0319 14.2268 20.5154 13.1586 20.7777 12.0002C19.8603 7.94818 16.2359 5.00016 12.0003 5.00016C11.1544 5.00016 10.3329 5.11773 9.55249 5.33818L7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925ZM11.7229 7.50857C11.8146 7.50299 11.9071 7.50016 12.0003 7.50016C14.4855 7.50016 16.5003 9.51488 16.5003 12.0002C16.5003 12.0933 16.4974 12.1858 16.4919 12.2775L11.7229 7.50857Z\"\r\n ></path>\r\n </svg>\r\n }\r\n</ng-template>\r\n", styles: [".form-field{display:flex;flex-direction:column;gap:.8rem}.form-field .input-wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500)}.form-field:has(input:disabled) .input-wrapper{background-color:var(--gray-200)}
|
|
490
|
+
], template: "<label class=\"s4y-form-field\">\r\n <s4y-label>\r\n {{ label() }}\r\n </s4y-label>\r\n <div class=\"s4y-input-wrapper\">\r\n <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n <input\r\n s4y-input\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onTouched()\"\r\n [disabled]=\"disabled\"\r\n [type]=\"type\"\r\n [name]=\"name()\"\r\n [id]=\"id()\"\r\n />\r\n <s4y-input-sufix>\r\n <button\r\n type=\"button\"\r\n class=\"shown-password\"\r\n (click)=\"togglePasswordVisibility()\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"eye\"></ng-container>\r\n </button>\r\n </s4y-input-sufix>\r\n </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n\r\n<!-- Icone cadeado -->\r\n<ng-template #eye>\r\n <!-- Olho fechado -->\r\n @if (type == \"password\") {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"\r\n ></path>\r\n </svg>\r\n }\r\n\r\n <!-- Olho aberto -->\r\n @if (type == \"text\") {\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968ZM5.9356 7.3497C4.60673 8.56015 3.6378 10.1672 3.22278 12.0002C4.14022 16.0521 7.7646 19.0002 12.0003 19.0002C13.5997 19.0002 15.112 18.5798 16.4243 17.8384L14.396 15.8101C13.7023 16.2472 12.8808 16.5002 12.0003 16.5002C9.51498 16.5002 7.50026 14.4854 7.50026 12.0002C7.50026 11.1196 7.75317 10.2981 8.19031 9.60442L5.9356 7.3497ZM12.9139 14.328L9.67246 11.0866C9.5613 11.3696 9.50026 11.6777 9.50026 12.0002C9.50026 13.3809 10.6196 14.5002 12.0003 14.5002C12.3227 14.5002 12.6309 14.4391 12.9139 14.328ZM20.8068 16.5925L19.376 15.1617C20.0319 14.2268 20.5154 13.1586 20.7777 12.0002C19.8603 7.94818 16.2359 5.00016 12.0003 5.00016C11.1544 5.00016 10.3329 5.11773 9.55249 5.33818L7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925ZM11.7229 7.50857C11.8146 7.50299 11.9071 7.50016 12.0003 7.50016C14.4855 7.50016 16.5003 9.51488 16.5003 12.0002C16.5003 12.0933 16.4974 12.1858 16.4919 12.2775L11.7229 7.50857Z\"\r\n ></path>\r\n </svg>\r\n }\r\n</ng-template>\r\n", styles: [".s4y-form-field{display:flex;flex-direction:column;gap:.8rem}.s4y-form-field .s4y-input-wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-form-field:has(input:disabled) .s4y-input-wrapper{background-color:var(--gray-200)}.s4y-form-field:has(input:focus) .s4y-input-wrapper{border:1px solid var(--primary-color)}.shown-password{min-width:2rem;display:flex;align-items:center;justify-content:center}:host.ng-invalid.ng-dirty.ng-touched .s4y-input-wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}:host.ng-invalid.ng-dirty.ng-touched s4y-label{color:var(--danger-color)}\n"] }]
|
|
491
491
|
}] });
|
|
492
492
|
|
|
493
493
|
const COMPONENTS = [
|
|
@@ -1275,11 +1275,11 @@ class ModalConfirmationComponent {
|
|
|
1275
1275
|
this.modalConfirmationService.close();
|
|
1276
1276
|
}
|
|
1277
1277
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1278
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalConfirmationComponent, isStandalone: true, selector: "s4y-modal-confirmation", inputs: { modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n <div class=\"s4y-modal-wrapper\" @modalFadeCombined>\r\n <div class=\"s4y-backdrop\" (click)=\"onClose()\"></div>\r\n <div class=\"s4y-modal-container\" [ngStyle]=\"modalStyle()\">\r\n @if (iconTemplate) {\r\n <div class=\"s4y-modal-icon\">\r\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\r\n </div>\r\n }\r\n <div class=\"s4y-modal-header\">\r\n <h3>{{ modalConfigs().title }}</h3>\r\n <p>\r\n {{ modalConfigs().message }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"s4y-modal-body\">\r\n <button\r\n (click)=\"onCancel()\"\r\n
|
|
1278
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalConfirmationComponent, isStandalone: true, selector: "s4y-modal-confirmation", inputs: { modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n <div class=\"s4y-modal-wrapper\" @modalFadeCombined>\r\n <div class=\"s4y-backdrop\" (click)=\"onClose()\"></div>\r\n <div class=\"s4y-modal-container\" [ngStyle]=\"modalStyle()\">\r\n @if (iconTemplate) {\r\n <div class=\"s4y-modal-icon\">\r\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\r\n </div>\r\n }\r\n <div class=\"s4y-modal-header\">\r\n <h3>{{ modalConfigs().title }}</h3>\r\n <p>\r\n {{ modalConfigs().message }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"s4y-modal-body\">\r\n <button\r\n (click)=\"onCancel()\"\r\n s4yButton\r\n [variant]=\"buttonCancelProps().variant ?? 'danger'\"\r\n [outlined]=\"buttonCancelProps().outlined ?? true\"\r\n [fullWidth]=\"true\"\r\n >\r\n {{ buttonCancelProps().text }}\r\n </button>\r\n <button\r\n (click)=\"onConfirm()\"\r\n s4yButton\r\n [variant]=\"buttonConfirmProps().variant ?? 'danger'\"\r\n [outlined]=\"buttonConfirmProps().outlined ?? false\"\r\n [fullWidth]=\"true\"\r\n >\r\n {{ buttonConfirmProps().text }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--z-index-modal-backdrop)}.s4y-backdrop{position:fixed;inset:0;background-color:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:350px;max-height:90dvh;min-height:14rem;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 1.8rem 3rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-icon{text-align:center;display:grid;place-items:center}.s4y-modal-header{padding:1rem 0;flex-shrink:0;align-items:center;justify-content:space-between;display:flex;flex-direction:column;gap:.4rem;margin-bottom:2.8rem}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header h3{color:var(--primary-color);font-size:1.8rem;text-align:center}.s4y-modal-header p{font-size:1.4rem;text-align:center}.s4y-modal-body{flex-grow:1;overflow-y:auto;display:flex;align-items:center;gap:1.4rem}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "variant", "fullWidth"] }], animations: [modalFadeCombined] });
|
|
1279
1279
|
}
|
|
1280
1280
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalConfirmationComponent, decorators: [{
|
|
1281
1281
|
type: Component,
|
|
1282
|
-
args: [{ selector: 's4y-modal-confirmation', imports: [CommonModule, ButtonComponent], animations: [modalFadeCombined], template: "@if (visible()) {\r\n <div class=\"s4y-modal-wrapper\" @modalFadeCombined>\r\n <div class=\"s4y-backdrop\" (click)=\"onClose()\"></div>\r\n <div class=\"s4y-modal-container\" [ngStyle]=\"modalStyle()\">\r\n @if (iconTemplate) {\r\n <div class=\"s4y-modal-icon\">\r\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\r\n </div>\r\n }\r\n <div class=\"s4y-modal-header\">\r\n <h3>{{ modalConfigs().title }}</h3>\r\n <p>\r\n {{ modalConfigs().message }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"s4y-modal-body\">\r\n <button\r\n (click)=\"onCancel()\"\r\n
|
|
1282
|
+
args: [{ selector: 's4y-modal-confirmation', imports: [CommonModule, ButtonComponent], animations: [modalFadeCombined], template: "@if (visible()) {\r\n <div class=\"s4y-modal-wrapper\" @modalFadeCombined>\r\n <div class=\"s4y-backdrop\" (click)=\"onClose()\"></div>\r\n <div class=\"s4y-modal-container\" [ngStyle]=\"modalStyle()\">\r\n @if (iconTemplate) {\r\n <div class=\"s4y-modal-icon\">\r\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\r\n </div>\r\n }\r\n <div class=\"s4y-modal-header\">\r\n <h3>{{ modalConfigs().title }}</h3>\r\n <p>\r\n {{ modalConfigs().message }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"s4y-modal-body\">\r\n <button\r\n (click)=\"onCancel()\"\r\n s4yButton\r\n [variant]=\"buttonCancelProps().variant ?? 'danger'\"\r\n [outlined]=\"buttonCancelProps().outlined ?? true\"\r\n [fullWidth]=\"true\"\r\n >\r\n {{ buttonCancelProps().text }}\r\n </button>\r\n <button\r\n (click)=\"onConfirm()\"\r\n s4yButton\r\n [variant]=\"buttonConfirmProps().variant ?? 'danger'\"\r\n [outlined]=\"buttonConfirmProps().outlined ?? false\"\r\n [fullWidth]=\"true\"\r\n >\r\n {{ buttonConfirmProps().text }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--z-index-modal-backdrop)}.s4y-backdrop{position:fixed;inset:0;background-color:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:350px;max-height:90dvh;min-height:14rem;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 1.8rem 3rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-icon{text-align:center;display:grid;place-items:center}.s4y-modal-header{padding:1rem 0;flex-shrink:0;align-items:center;justify-content:space-between;display:flex;flex-direction:column;gap:.4rem;margin-bottom:2.8rem}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header h3{color:var(--primary-color);font-size:1.8rem;text-align:center}.s4y-modal-header p{font-size:1.4rem;text-align:center}.s4y-modal-body{flex-grow:1;overflow-y:auto;display:flex;align-items:center;gap:1.4rem}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}\n"] }]
|
|
1283
1283
|
}], propDecorators: { iconTemplate: [{
|
|
1284
1284
|
type: ContentChild,
|
|
1285
1285
|
args: ['iconTemplate']
|