sidesys-generic-ui 2.4.4 → 2.4.6

package/esm2022/lib/icon-material/s-icon-material.component.mjs

@@ -1,12 +1,12 @@
-import { Component, Input, ViewChild, ViewEncapsulation, } from '@angular/core';
+import { Component, Input, ViewChild, ViewEncapsulation } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 export class SIconMaterialComponent {
     constructor() {
+        this.size = 'md';
         this.fill = false;
         this.weight = 400;
         this.grade = 0;
-        this.opticalSize = 48;
         this.style = '';
         this.type = 'icon';
         this.computedStyles = {};
@@ -17,7 +17,7 @@ export class SIconMaterialComponent {
                 this.optionsType = 'material-symbols-outlined';
                 this.fillTemp = this.fill ? 1 : 0;
                 this.computedStyles['font-variation-settings'] =
-                    `"FILL" ${this.fillTemp}, "wght" ${this.weight}, "GRAD" ${this.grade}, "opsz" ${this.opticalSize}`;
+                    `"FILL" ${this.fillTemp}, "wght" ${this.weight}, "GRAD" ${this.grade}`;
                 break;
             case 'icon':
                 this.optionsType = 'material-icons';
@@ -25,11 +25,11 @@ export class SIconMaterialComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIconMaterialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: { name: "name", size: "size", fill: "fill", weight: "weight", grade: "grade", opticalSize: "opticalSize", style: "style", type: "type" }, viewQueries: [{ propertyName: "Icon", first: true, predicate: ["icon"], descendants: true, static: true }], ngImport: i0, template: "<div #icon class=\"s-icon-mat\">\n    <span [ngClass]=\"optionsType\" [ngStyle]=\"computedStyles\">\n        <ng-content *ngIf=\"!name\"></ng-content>\n        <ng-container *ngIf=\"name\">{{name}}</ng-container>\n    </span>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v316/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2) format(\"woff2\")}.s-icon-mat{display:flex}.s-icon-mat .material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.s-icon-mat .material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: { name: "name", size: "size", fill: "fill", weight: "weight", grade: "grade", style: "style", type: "type" }, viewQueries: [{ propertyName: "Icon", first: true, predicate: ["icon"], descendants: true, static: true }], ngImport: i0, template: "<div #icon class=\"s-icon-mat\">\n  <span class=\"{{ size }}\" [ngClass]=\"optionsType\" [ngStyle]=\"computedStyles\">\n    <ng-content *ngIf=\"!name\"></ng-content>\n    <ng-container *ngIf=\"name\">{{ name }}</ng-container>\n  </span>\n</div>\n", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v316/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2) format(\"woff2\")}.s-icon-mat{display:flex}.s-icon-mat .material-icons{font-family:Material Icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.s-icon-mat .material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.s-icon-mat .xs{font-size:1rem}.s-icon-mat .sm{font-size:1.25rem}.s-icon-mat .md{font-size:1.5rem}.s-icon-mat .lg{font-size:3rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIconMaterialComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-icon-mat', encapsulation: ViewEncapsulation.None, template: "<div #icon class=\"s-icon-mat\">\n    <span [ngClass]=\"optionsType\" [ngStyle]=\"computedStyles\">\n        <ng-content *ngIf=\"!name\"></ng-content>\n        <ng-container *ngIf=\"name\">{{name}}</ng-container>\n    </span>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v316/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2) format(\"woff2\")}.s-icon-mat{display:flex}.s-icon-mat .material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.s-icon-mat .material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"] }]
+            args: [{ selector: 's-icon-mat', encapsulation: ViewEncapsulation.None, template: "<div #icon class=\"s-icon-mat\">\n  <span class=\"{{ size }}\" [ngClass]=\"optionsType\" [ngStyle]=\"computedStyles\">\n    <ng-content *ngIf=\"!name\"></ng-content>\n    <ng-container *ngIf=\"name\">{{ name }}</ng-container>\n  </span>\n</div>\n", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v316/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2) format(\"woff2\")}.s-icon-mat{display:flex}.s-icon-mat .material-icons{font-family:Material Icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.s-icon-mat .material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.s-icon-mat .xs{font-size:1rem}.s-icon-mat .sm{font-size:1.25rem}.s-icon-mat .md{font-size:1.5rem}.s-icon-mat .lg{font-size:3rem}\n"] }]
         }], propDecorators: { Icon: [{
                 type: ViewChild,
                 args: ['icon', { static: true }]
@@ -43,11 +43,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], grade: [{
                 type: Input
-            }], opticalSize: [{
-                type: Input
             }], style: [{
                 type: Input
             }], type: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy1pY29uLW1hdGVyaWFsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL2ljb24tbWF0ZXJpYWwvcy1pY29uLW1hdGVyaWFsLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL2ljb24tbWF0ZXJpYWwvcy1pY29uLW1hdGVyaWFsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBRVQsS0FBSyxFQUVMLFNBQVMsRUFDVCxpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7OztBQVN2QixNQUFNLE9BQU8sc0JBQXNCO0lBTm5DO1FBV1csU0FBSSxHQUFrQixLQUFLLENBQUM7UUFDNUIsV0FBTSxHQUFvQixHQUFHLENBQUM7UUFDOUIsVUFBSyxHQUFtQixDQUFDLENBQUM7UUFDMUIsZ0JBQVcsR0FBeUIsRUFBRSxDQUFDO1FBQ3ZDLFVBQUssR0FBb0IsRUFBRSxDQUFDO1FBQzVCLFNBQUksR0FBa0IsTUFBTSxDQUFDO1FBS3RDLG1CQUFjLEdBQThCLEVBQUUsQ0FBQztLQWVoRDtJQWJDLFFBQVE7UUFDTixRQUFRLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztZQUNsQixLQUFLLFFBQVE7Z0JBQ1gsSUFBSSxDQUFDLFdBQVcsR0FBRywyQkFBMkIsQ0FBQztnQkFDL0MsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztnQkFDbEMsSUFBSSxDQUFDLGNBQWMsQ0FBQyx5QkFBeUIsQ0FBQztvQkFDNUMsVUFBVSxJQUFJLENBQUMsUUFBUSxZQUFZLElBQUksQ0FBQyxNQUFNLFlBQVksSUFBSSxDQUFDLEtBQUssWUFBWSxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7Z0JBQ3JHLE1BQU07WUFDUixLQUFLLE1BQU07Z0JBQ1QsSUFBSSxDQUFDLFdBQVcsR0FBRyxnQkFBZ0IsQ0FBQztnQkFDcEMsTUFBTTtRQUNWLENBQUM7SUFDSCxDQUFDOytHQTdCVSxzQkFBc0I7bUdBQXRCLHNCQUFzQixnVENoQm5DLDJPQUtNOzs0RkRXTyxzQkFBc0I7a0JBTmxDLFNBQVM7K0JBQ0UsWUFBWSxpQkFHUCxpQkFBaUIsQ0FBQyxJQUFJOzhCQUdBLElBQUk7c0JBQXhDLFNBQVM7dUJBQUMsTUFBTSxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRTtnQkFFMUIsSUFBSTtzQkFBWixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIElucHV0LFxuICBPbkluaXQsXG4gIFZpZXdDaGlsZCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU0ljb24gfSBmcm9tICcuL3MtaWNvbi1tYXRlcmlhbC5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3MtaWNvbi1tYXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vcy1pY29uLW1hdGVyaWFsLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcy1pY29uLW1hdGVyaWFsLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIFNJY29uTWF0ZXJpYWxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBAVmlld0NoaWxkKCdpY29uJywgeyBzdGF0aWM6IHRydWUgfSkgSWNvbiE6IEVsZW1lbnRSZWY7XG5cbiAgQElucHV0KCkgbmFtZT86IFNJY29uWyduYW1lJ107XG4gIEBJbnB1dCgpIHNpemU/OiBTSWNvblsnc2l6ZSddO1xuICBASW5wdXQoKSBmaWxsOiBTSWNvblsnZmlsbCddID0gZmFsc2U7XG4gIEBJbnB1dCgpIHdlaWdodDogU0ljb25bJ3dlaWdodCddID0gNDAwO1xuICBASW5wdXQoKSBncmFkZTogU0ljb25bJ2dyYWRlJ10gPSAwO1xuICBASW5wdXQoKSBvcHRpY2FsU2l6ZTogU0ljb25bJ29wdGljYWxTaXplJ10gPSA0ODtcbiAgQElucHV0KCkgc3R5bGU/OiBTSWNvblsnc3R5bGUnXSA9ICcnO1xuICBASW5wdXQoKSB0eXBlOiBTSWNvblsndHlwZSddID0gJ2ljb24nO1xuXG4gIG9wdGlvbnNUeXBlITogc3RyaW5nO1xuICBmaWxsVGVtcCE6IG51bWJlcjtcblxuICBjb21wdXRlZFN0eWxlczogeyBba2V5OiBzdHJpbmddOiBzdHJpbmcgfSA9IHt9O1xuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHN3aXRjaCAodGhpcy50eXBlKSB7XG4gICAgICBjYXNlICdzeW1ib2wnOlxuICAgICAgICB0aGlzLm9wdGlvbnNUeXBlID0gJ21hdGVyaWFsLXN5bWJvbHMtb3V0bGluZWQnO1xuICAgICAgICB0aGlzLmZpbGxUZW1wID0gdGhpcy5maWxsID8gMSA6IDA7XG4gICAgICAgIHRoaXMuY29tcHV0ZWRTdHlsZXNbJ2ZvbnQtdmFyaWF0aW9uLXNldHRpbmdzJ10gPVxuICAgICAgICAgIGBcIkZJTExcIiAke3RoaXMuZmlsbFRlbXB9LCBcIndnaHRcIiAke3RoaXMud2VpZ2h0fSwgXCJHUkFEXCIgJHt0aGlzLmdyYWRlfSwgXCJvcHN6XCIgJHt0aGlzLm9wdGljYWxTaXplfWA7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnaWNvbic6XG4gICAgICAgIHRoaXMub3B0aW9uc1R5cGUgPSAnbWF0ZXJpYWwtaWNvbnMnO1xuICAgICAgICBicmVhaztcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgI2ljb24gY2xhc3M9XCJzLWljb24tbWF0XCI+XG4gICAgPHNwYW4gW25nQ2xhc3NdPVwib3B0aW9uc1R5cGVcIiBbbmdTdHlsZV09XCJjb21wdXRlZFN0eWxlc1wiPlxuICAgICAgICA8bmctY29udGVudCAqbmdJZj1cIiFuYW1lXCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwibmFtZVwiPnt7bmFtZX19PC9uZy1jb250YWluZXI+XG4gICAgPC9zcGFuPlxuPC9kaXY+Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy1pY29uLW1hdGVyaWFsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL2ljb24tbWF0ZXJpYWwvcy1pY29uLW1hdGVyaWFsLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL2ljb24tbWF0ZXJpYWwvcy1pY29uLW1hdGVyaWFsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsS0FBSyxFQUFVLFNBQVMsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBU25HLE1BQU0sT0FBTyxzQkFBc0I7SUFObkM7UUFVVyxTQUFJLEdBQW1CLElBQUksQ0FBQztRQUM1QixTQUFJLEdBQWtCLEtBQUssQ0FBQztRQUM1QixXQUFNLEdBQW9CLEdBQUcsQ0FBQztRQUM5QixVQUFLLEdBQW1CLENBQUMsQ0FBQztRQUMxQixVQUFLLEdBQW9CLEVBQUUsQ0FBQztRQUM1QixTQUFJLEdBQWtCLE1BQU0sQ0FBQztRQUt0QyxtQkFBYyxHQUE4QixFQUFFLENBQUM7S0FlaEQ7SUFiQyxRQUFRO1FBQ04sUUFBUSxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7WUFDbEIsS0FBSyxRQUFRO2dCQUNYLElBQUksQ0FBQyxXQUFXLEdBQUcsMkJBQTJCLENBQUM7Z0JBQy9DLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7Z0JBQ2xDLElBQUksQ0FBQyxjQUFjLENBQUMseUJBQXlCLENBQUM7b0JBQzVDLFVBQVUsSUFBSSxDQUFDLFFBQVEsWUFBWSxJQUFJLENBQUMsTUFBTSxZQUFZLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztnQkFDekUsTUFBTTtZQUNSLEtBQUssTUFBTTtnQkFDVCxJQUFJLENBQUMsV0FBVyxHQUFHLGdCQUFnQixDQUFDO2dCQUNwQyxNQUFNO1FBQ1YsQ0FBQztJQUNILENBQUM7K0dBNUJVLHNCQUFzQjttR0FBdEIsc0JBQXNCLG9SQ1RuQyx3UEFNQTs7NEZER2Esc0JBQXNCO2tCQU5sQyxTQUFTOytCQUNFLFlBQVksaUJBR1AsaUJBQWlCLENBQUMsSUFBSTs4QkFHQSxJQUFJO3NCQUF4QyxTQUFTO3VCQUFDLE1BQU0sRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7Z0JBRTFCLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgSW5wdXQsIE9uSW5pdCwgVmlld0NoaWxkLCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU0ljb24gfSBmcm9tICcuL3MtaWNvbi1tYXRlcmlhbC5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3MtaWNvbi1tYXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vcy1pY29uLW1hdGVyaWFsLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcy1pY29uLW1hdGVyaWFsLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIFNJY29uTWF0ZXJpYWxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBAVmlld0NoaWxkKCdpY29uJywgeyBzdGF0aWM6IHRydWUgfSkgSWNvbiE6IEVsZW1lbnRSZWY7XG5cbiAgQElucHV0KCkgbmFtZT86IFNJY29uWyduYW1lJ107XG4gIEBJbnB1dCgpIHNpemU/OiBTSWNvblsnc2l6ZSddID0gJ21kJztcbiAgQElucHV0KCkgZmlsbDogU0ljb25bJ2ZpbGwnXSA9IGZhbHNlO1xuICBASW5wdXQoKSB3ZWlnaHQ6IFNJY29uWyd3ZWlnaHQnXSA9IDQwMDtcbiAgQElucHV0KCkgZ3JhZGU6IFNJY29uWydncmFkZSddID0gMDtcbiAgQElucHV0KCkgc3R5bGU/OiBTSWNvblsnc3R5bGUnXSA9ICcnO1xuICBASW5wdXQoKSB0eXBlOiBTSWNvblsndHlwZSddID0gJ2ljb24nO1xuXG4gIG9wdGlvbnNUeXBlITogc3RyaW5nO1xuICBmaWxsVGVtcCE6IG51bWJlcjtcblxuICBjb21wdXRlZFN0eWxlczogeyBba2V5OiBzdHJpbmddOiBzdHJpbmcgfSA9IHt9O1xuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHN3aXRjaCAodGhpcy50eXBlKSB7XG4gICAgICBjYXNlICdzeW1ib2wnOlxuICAgICAgICB0aGlzLm9wdGlvbnNUeXBlID0gJ21hdGVyaWFsLXN5bWJvbHMtb3V0bGluZWQnO1xuICAgICAgICB0aGlzLmZpbGxUZW1wID0gdGhpcy5maWxsID8gMSA6IDA7XG4gICAgICAgIHRoaXMuY29tcHV0ZWRTdHlsZXNbJ2ZvbnQtdmFyaWF0aW9uLXNldHRpbmdzJ10gPVxuICAgICAgICAgIGBcIkZJTExcIiAke3RoaXMuZmlsbFRlbXB9LCBcIndnaHRcIiAke3RoaXMud2VpZ2h0fSwgXCJHUkFEXCIgJHt0aGlzLmdyYWRlfWA7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnaWNvbic6XG4gICAgICAgIHRoaXMub3B0aW9uc1R5cGUgPSAnbWF0ZXJpYWwtaWNvbnMnO1xuICAgICAgICBicmVhaztcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgI2ljb24gY2xhc3M9XCJzLWljb24tbWF0XCI+XG4gIDxzcGFuIGNsYXNzPVwie3sgc2l6ZSB9fVwiIFtuZ0NsYXNzXT1cIm9wdGlvbnNUeXBlXCIgW25nU3R5bGVdPVwiY29tcHV0ZWRTdHlsZXNcIj5cbiAgICA8bmctY29udGVudCAqbmdJZj1cIiFuYW1lXCI+PC9uZy1jb250ZW50PlxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJuYW1lXCI+e3sgbmFtZSB9fTwvbmctY29udGFpbmVyPlxuICA8L3NwYW4+XG48L2Rpdj5cbiJdfQ==

package/esm2022/lib/icon-material/s-icon-material.model.mjs

@@ -1,3 +1,3 @@
 export class SIcon {
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy1pY29uLW1hdGVyaWFsLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2lkZXN5cy1nZW5lcmljLXVpL3NyYy9saWIvaWNvbi1tYXRlcmlhbC9zLWljb24tbWF0ZXJpYWwubW9kZWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxPQUFPLEtBQUs7Q0FTakIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY2xhc3MgU0ljb24ge1xuICB0eXBlPzogJ3N5bWJvbCcgfCAnaWNvbic7IC8vVGlwbyBkZSBpY29uby5cbiAgbmFtZT86IHN0cmluZzsgLy9Ob21icmUgZGVsIGljb25vLlxuICBzaXplPzogc3RyaW5nOyAvL1RhbWFuaW8gZGVsIGljb25vLlxuICBmaWxsPzogYm9vbGVhbjsgLy9TaSBlbCBpY29ubyBlcyBkZSByZWxsZW5vLlxuICB3ZWlnaHQ/OiBudW1iZXI7IC8vR3Jvc29yIGRlbCBpY29uby5cbiAgZ3JhZGU/OiBudW1iZXI7IC8vR3Jvc29yIGRlbCBpY29uby5cbiAgb3B0aWNhbFNpemU/OiBudW1iZXI7IC8vVGFtYW5pbyBkZWwgaWNvbm8uXG4gIHN0eWxlPzogc3RyaW5nOyAvL0VzdGlsbyBkZWwgaWNvbm8uXG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy1pY29uLW1hdGVyaWFsLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2lkZXN5cy1nZW5lcmljLXVpL3NyYy9saWIvaWNvbi1tYXRlcmlhbC9zLWljb24tbWF0ZXJpYWwubW9kZWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxPQUFPLEtBQUs7Q0FRakIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY2xhc3MgU0ljb24ge1xuICB0eXBlPzogJ3N5bWJvbCcgfCAnaWNvbic7IC8vVGlwbyBkZSBpY29uby5cbiAgbmFtZT86IHN0cmluZzsgLy9Ob21icmUgZGVsIGljb25vLlxuICBzaXplPzogJ3hzJyB8ICdzbScgfCAnbWQnIHwgJ2xnJzsgLy9UYW1hbmlvIGRlbCBpY29uby5cbiAgZmlsbD86IGJvb2xlYW47IC8vU2kgZWwgaWNvbm8gZXMgZGUgcmVsbGVuby5cbiAgd2VpZ2h0PzogbnVtYmVyOyAvL0dyb3NvciBkZWwgaWNvbm8uXG4gIGdyYWRlPzogbnVtYmVyOyAvL0dyb3NvciBkZWwgaWNvbm8uXG4gIHN0eWxlPzogc3RyaW5nOyAvL0VzdGlsbyBkZWwgaWNvbm8uXG59XG4iXX0=

package/esm2022/lib/input/components/calendar/s-calendar.component.mjs

@@ -58,7 +58,7 @@ export class SCalendarComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => SCalendarComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<section class=\"s-calendar\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-calendar__label\">\n    {{ config.label }}\n    <span class=\"s-calendar__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-calendar__content {{ config.size }} theme-{{ config.theme }} {{\n      config.classAdd\n    }}\"\n    [ngClass]=\"{\n      'disabled-active':\n        config.disabled || (control && control.status === 'DISABLED'),\n      'readonly':\n        config.readOnly,\n      'theme-red':\n        (control && control.invalid && (isFocused || control.touched)) ||\n        (control && control.errors && control.touched) ||\n        config.theme === 'red',\n    }\">\n    <div class=\"s-calendar__content--center\">\n      <ng-container *ngIf=\"control; else notUseFormControl\">\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'date'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [formControl]=\"control\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-container>\n      <ng-template #notUseFormControl>\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'date'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [value]=\"value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-template>\n    </div>\n    <div\n      *ngIf=\"config?.theme !== 'default' && config.theme !== undefined\"\n      class=\"s-calendar__content--right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n        ICON_THEME[config.theme]\n      }}</s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"\n        config?.theme === 'default' ||\n        (config?.theme === undefined && config.showHelp)\n      \"\n      class=\"s-calendar__content--right\">\n      <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n        >help_outline</s-icon-mat\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched)\n    \"\n    [customErrorMessages]=\"config.errorMessages\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\"\n    >{{ config.errorText }}</s-error-control\n  >\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}</s-error-control\n  >\n</section>\n", styles: [".s-calendar{margin-bottom:.5rem}.s-calendar__label{font-size:.875rem;color:var(--secondary-600)}.s-calendar__required{color:var(--primary-600)}.s-calendar__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-calendar__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-calendar__content input:focus,.s-calendar__content input:focus-visible{outline:none}.s-calendar__content .icon{width:1.25rem;cursor:default}.s-calendar__content .icon span{display:flex}.s-calendar__content--center{width:100%;background-color:var(--neutrals-1200)}.s-calendar__content--right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-calendar__content.theme-red{border:.063rem solid var(--red-500)}.s-calendar__content.theme-red .icon.report span{color:var(--red-600)}.s-calendar__content.theme-green{border:.063rem solid var(--green-500)}.s-calendar__content.theme-green .icon.report span{color:var(--green-600)}.s-calendar__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-calendar__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-calendar__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-calendar__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-calendar__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-calendar__content.readonly{background-color:var(--neutrals-1100)}.s-calendar__content.readonly input{background-color:var(--neutrals-1100);cursor:default}.s-calendar__content.sm input{height:1.3rem;font-size:.75rem}.s-calendar__content.sm .icon{width:1.25rem;cursor:default}.s-calendar__content.sm .icon span{font-size:1.2rem;display:flex}.s-calendar__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .25rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: i4.SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: i5.SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<section class=\"s-calendar\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-calendar__label\">\n    {{ config.label }}\n    <span class=\"s-calendar__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-calendar__content {{ config.size }} theme-{{ config.theme }} {{\n      config.classAdd\n    }}\"\n    [ngClass]=\"{\n      'disabled-active':\n        config.disabled || (control && control.status === 'DISABLED'),\n      'readonly':\n        config.readOnly,\n      'theme-red':\n        (control && control.invalid && (isFocused || control.touched)) ||\n        (control && control.errors && control.touched) ||\n        config.theme === 'red',\n    }\">\n    <div class=\"s-calendar__content--center\">\n      <ng-container *ngIf=\"control; else notUseFormControl\">\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'date'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [formControl]=\"control\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-container>\n      <ng-template #notUseFormControl>\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'date'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [value]=\"value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-template>\n    </div>\n    <div\n      *ngIf=\"config?.theme !== 'default' && config.theme !== undefined\"\n      class=\"s-calendar__content--right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n        ICON_THEME[config.theme]\n      }}</s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"\n        config?.theme === 'default' ||\n        (config?.theme === undefined && config.showHelp)\n      \"\n      class=\"s-calendar__content--right\">\n      <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n        >help_outline</s-icon-mat\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched)\n    \"\n    [customErrorMessages]=\"config.errorMessages\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\"\n    >{{ config.errorText }}</s-error-control\n  >\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}</s-error-control\n  >\n</section>\n", styles: [".s-calendar{margin-bottom:.5rem}.s-calendar__label{font-size:.875rem;color:var(--secondary-600)}.s-calendar__required{color:var(--primary-600)}.s-calendar__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-calendar__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-calendar__content input:focus,.s-calendar__content input:focus-visible{outline:none}.s-calendar__content .icon{width:1.25rem;cursor:default}.s-calendar__content .icon span{display:flex}.s-calendar__content--center{width:100%;background-color:var(--neutrals-1200)}.s-calendar__content--right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-calendar__content.theme-red{border:.063rem solid var(--red-500)}.s-calendar__content.theme-red .icon.report span{color:var(--red-600)}.s-calendar__content.theme-green{border:.063rem solid var(--green-500)}.s-calendar__content.theme-green .icon.report span{color:var(--green-600)}.s-calendar__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-calendar__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-calendar__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-calendar__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-calendar__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-calendar__content.readonly{background-color:var(--neutrals-1100)}.s-calendar__content.readonly input{background-color:var(--neutrals-1100);cursor:default}.s-calendar__content.sm input{height:1.3rem;font-size:.75rem}.s-calendar__content.sm .icon{width:1.25rem;cursor:default}.s-calendar__content.sm .icon span{font-size:1.2rem;display:flex}.s-calendar__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .25rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: i4.SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: i5.SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SCalendarComponent, decorators: [{
             type: Component,

package/esm2022/lib/input/components/color/s-color.component.mjs

@@ -71,7 +71,7 @@ export class SColorComponent {
                 useExisting: forwardRef(() => SColorComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<ng-container class=\"s-color\">\n  <label *ngIf=\"label\" class=\"s-color__label\" for=\"name\">\n    {{ label }}\n    <span class=\"s-color__required\" *ngIf=\"required\">*</span>\n  </label>\n  <div\n    class=\"s-color__content content-input-main-color {{ size }} theme-{{\n      theme\n    }} {{ classAdd }}\"\n    [ngClass]=\"{'disabled-active': disabled ,'readonly': readOnly}\">\n    <div class=\"content-left\">\n      <input\n        [readOnly]=\"readOnly\"\n        #color\n        [id]=\"name\"\n        [name]=\"name\"\n        type=\"color\"\n        [disabled]=\"disabled\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"onTextChange()\"\n        class=\"content-color\"/>\n    </div>\n    <div\n      role=\"button\"\n      tabindex=\"0\"\n      class=\"content-center\"\n      (click)=\"!this.readOnly ? this.color.click() : null\"\n      (keydown.enter)=\"!this.readOnly ? this.color.click() : null\">\n      <input\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        [readOnly]=\"readOnly\"\n        [id]=\"id ? id : ''\"\n        [type]=\"color\"\n        autocomplete=\"off\"\n        [placeholder]=\"placeHolder ? placeHolder : ''\"\n        [(ngModel)]=\"value\"\n        [disabled]=\"readOnly\" />\n    </div>\n    <div class=\"content-right\">\n      <s-icon-mat [type]=\"'icon'\" class=\"icon cursor\">colorize</s-icon-mat>\n    </div>\n    <div *ngIf=\"theme !== 'default'\" class=\"content-right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">\n        {{ ICON_THEME[this.theme] }}\n      </s-icon-mat>\n    </div>\n\n    <div *ngIf=\"theme === 'default' && help\" class=\"content-right\">\n      <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">\n        help_outline\n      </s-icon-mat>\n    </div>\n  </div>\n  <s-error-control *ngIf=\"!hideErrorText && errorText\" theme=\"red\">\n    {{ errorText }}\n  </s-error-control>\n  <s-error-control *ngIf=\"!hideErrorText && helpText && !errorText\">\n    {{ helpText }}\n  </s-error-control>\n</ng-container>\n", styles: [".s-color{margin-bottom:.5rem}.s-color__label{font-size:.875rem}.s-color__required{color:var(--primary-600)}.s-color__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem 0 0;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-color__content input:-webkit-autofill,.s-color__content input:-webkit-autofill:hover,.s-color__content input:-webkit-autofill:focus,.s-color__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-color__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-color__content input.content-color{width:2.5rem;padding:0}.s-color__content input:focus,.s-color__content input:focus-visible{outline:none}.s-color__content .icon{width:1.25rem;cursor:default}.s-color__content .icon span{display:flex}.s-color__content .content-center{align-items:center;display:flex;width:100%;background-color:var(--neutrals-1200)}.s-color__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;border-right:.063rem solid var(--secondary-500);padding-right:.5rem;color:var(--secondary-500);font-size:.9rem;padding-left:.5rem}.s-color__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin:.5rem;color:var(--secondary-600)}.s-color__content.theme-green{border:.063rem solid var(--green-500)}.s-color__content.theme-green .icon.report span{color:var(--green-600)}.s-color__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-color__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-color__content.theme-red{border:.063rem solid var(--red-500)}.s-color__content.theme-red .icon.report span{color:var(--red-600)}.s-color__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-color__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--secondary-600)}.s-color__content.disabled-active .content-left{color:var(--neutrals-800)!important;border-right:.063rem solid var(--neutrals-900)}.s-color__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-color__content.readonly{background-color:var(--neutrals-1100);border-color:var(--neutrals-900)}.s-color__content.readonly input{background-color:var(--neutrals-1100);color:var(--secondary-600);cursor:default}.s-color__content.readonly .content-left{color:var(--neutrals-800)}.s-color__content.readonly .content-right s-icon-mat span{color:var(--neutrals-800)}.s-color__content.sm input{height:1.3rem;font-size:.75rem}.s-color__content.sm .icon{width:1.25rem;cursor:default}.s-color__content.sm .icon span{font-size:1.2em;display:flex}.s-color__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: i4.SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], ngImport: i0, template: "<ng-container class=\"s-color\">\n  <label *ngIf=\"label\" class=\"s-color__label\" for=\"name\">\n    {{ label }}\n    <span class=\"s-color__required\" *ngIf=\"required\">*</span>\n  </label>\n  <div\n    class=\"s-color__content content-input-main-color {{ size }} theme-{{\n      theme\n    }} {{ classAdd }}\"\n    [ngClass]=\"{'disabled-active': disabled ,'readonly': readOnly}\">\n    <div class=\"content-left\">\n      <input\n        [readOnly]=\"readOnly\"\n        #color\n        [id]=\"name\"\n        [name]=\"name\"\n        type=\"color\"\n        [disabled]=\"disabled\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"onTextChange()\"\n        class=\"content-color\"/>\n    </div>\n    <div\n      role=\"button\"\n      tabindex=\"0\"\n      class=\"content-center\"\n      (click)=\"!this.readOnly ? this.color.click() : null\"\n      (keydown.enter)=\"!this.readOnly ? this.color.click() : null\">\n      <input\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        [readOnly]=\"readOnly\"\n        [id]=\"id ? id : ''\"\n        [type]=\"color\"\n        autocomplete=\"off\"\n        [placeholder]=\"placeHolder ? placeHolder : ''\"\n        [(ngModel)]=\"value\"\n        [disabled]=\"readOnly\" />\n    </div>\n    <div class=\"content-right\">\n      <s-icon-mat [type]=\"'icon'\" class=\"icon cursor\">colorize</s-icon-mat>\n    </div>\n    <div *ngIf=\"theme !== 'default'\" class=\"content-right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">\n        {{ ICON_THEME[this.theme] }}\n      </s-icon-mat>\n    </div>\n\n    <div *ngIf=\"theme === 'default' && help\" class=\"content-right\">\n      <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">\n        help_outline\n      </s-icon-mat>\n    </div>\n  </div>\n  <s-error-control *ngIf=\"!hideErrorText && errorText\" theme=\"red\">\n    {{ errorText }}\n  </s-error-control>\n  <s-error-control *ngIf=\"!hideErrorText && helpText && !errorText\">\n    {{ helpText }}\n  </s-error-control>\n</ng-container>\n", styles: [".s-color{margin-bottom:.5rem}.s-color__label{font-size:.875rem}.s-color__required{color:var(--primary-600)}.s-color__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem 0 0;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-color__content input:-webkit-autofill,.s-color__content input:-webkit-autofill:hover,.s-color__content input:-webkit-autofill:focus,.s-color__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-color__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-color__content input.content-color{width:2.5rem;padding:0}.s-color__content input:focus,.s-color__content input:focus-visible{outline:none}.s-color__content .icon{width:1.25rem;cursor:default}.s-color__content .icon span{display:flex}.s-color__content .content-center{align-items:center;display:flex;width:100%;background-color:var(--neutrals-1200)}.s-color__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;border-right:.063rem solid var(--secondary-500);padding-right:.5rem;color:var(--secondary-500);font-size:.9rem;padding-left:.5rem}.s-color__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin:.5rem;color:var(--secondary-600)}.s-color__content.theme-green{border:.063rem solid var(--green-500)}.s-color__content.theme-green .icon.report span{color:var(--green-600)}.s-color__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-color__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-color__content.theme-red{border:.063rem solid var(--red-500)}.s-color__content.theme-red .icon.report span{color:var(--red-600)}.s-color__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-color__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--secondary-600)}.s-color__content.disabled-active .content-left{color:var(--neutrals-800)!important;border-right:.063rem solid var(--neutrals-900)}.s-color__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-color__content.readonly{background-color:var(--neutrals-1100);border-color:var(--neutrals-900)}.s-color__content.readonly input{background-color:var(--neutrals-1100);color:var(--secondary-600);cursor:default}.s-color__content.readonly .content-left{color:var(--neutrals-800)}.s-color__content.readonly .content-right s-icon-mat span{color:var(--neutrals-800)}.s-color__content.sm input{height:1.3rem;font-size:.75rem}.s-color__content.sm .icon{width:1.25rem;cursor:default}.s-color__content.sm .icon span{font-size:1.2em;display:flex}.s-color__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: i4.SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SColorComponent, decorators: [{
             type: Component,

package/esm2022/lib/input/components/error-control/s-error-control.component.mjs

@@ -35,7 +35,7 @@ export class SErrorControl {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SErrorControl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SErrorControl, selector: "s-error-control", inputs: { theme: "theme", icon: "icon", iconCustom: "iconCustom", size: "size" }, ngImport: i0, template: "<label class=\"label-content label-content-{{theme}} {{size}}\">\n    <s-icon-mat *ngIf=\"icon\" class=\"icon-{{theme}}\">{{iconName}}</s-icon-mat>\n    <ng-content></ng-content>\n</label>", styles: [".label-content{display:inline-flex;align-items:center;margin-left:.188rem;font-weight:400;font-size:.875rem;line-height:0rem}.label-content.sm{font-size:.625rem}.label-content s-icon-mat{display:flex;align-items:center;margin-right:.188rem}.label-content s-icon-mat span{font-size:1.01rem}.icon-default,.label-content-default{color:var(--secondary-500)}.icon-yellow,.label-content-yellow{color:var(--yellow-600)}.icon-red,.label-content-red{color:var(--red-600)}.icon-green,.label-content-green{color:var(--green-600)}.form-group{margin:.313rem}.form-group .label{font-weight:400;font-size:.875rem;color:var(--secondary-600)}.form-group .content-input-main-626.sm{margin:0rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SErrorControl, selector: "s-error-control", inputs: { theme: "theme", icon: "icon", iconCustom: "iconCustom", size: "size" }, ngImport: i0, template: "<label class=\"label-content label-content-{{theme}} {{size}}\">\n    <s-icon-mat *ngIf=\"icon\" class=\"icon-{{theme}}\">{{iconName}}</s-icon-mat>\n    <ng-content></ng-content>\n</label>", styles: [".label-content{display:inline-flex;align-items:center;margin-left:.188rem;font-weight:400;font-size:.875rem;line-height:0rem}.label-content.sm{font-size:.625rem}.label-content s-icon-mat{display:flex;align-items:center;margin-right:.188rem}.label-content s-icon-mat span{font-size:1.01rem}.icon-default,.label-content-default{color:var(--secondary-500)}.icon-yellow,.label-content-yellow{color:var(--yellow-600)}.icon-red,.label-content-red{color:var(--red-600)}.icon-green,.label-content-green{color:var(--green-600)}.form-group{margin:.313rem}.form-group .label{font-weight:400;font-size:.875rem;color:var(--secondary-600)}.form-group .content-input-main-626.sm{margin:0rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SErrorControl, decorators: [{
             type: Component,

package/esm2022/lib/input/components/input/s-input.component.mjs

@@ -79,7 +79,7 @@ export class SInputComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => SInputComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"s-input\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-input__label\">\n    {{ config.label }}\n    <span class=\"s-input__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-input__content {{ config.size }} theme-{{ config.theme }} {{ config.classAdd }}\"\n    [ngClass]=\"{\n      'disabled-active': config.disabled || (control && control.status === 'DISABLED'),\n      readonly: config.readOnly,\n      'theme-red':\n        (control && control.invalid && (isFocused || control.touched)) ||\n        errorPattern ||\n        config.theme === THEME.RED ||\n        config.errorText,\n    }\">\n    <div *ngIf=\"showIconType()\" class=\"content-left\">\n      <s-icon-mat class=\"icon\">{{ iconType }}</s-icon-mat>\n    </div>\n    <div class=\"content-center\">\n      <ng-container *ngIf=\"control; else notUseFormControl\">\n        <input\n          autocomplete=\"off\"\n          [id]=\"config.id\"\n          [placeholder]=\"config.placeholder ?? ''\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          type=\"{{ type }}\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [maxlength]=\"config.maxlength ?? null\"\n          [formControl]=\"control\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-container>\n      <ng-template #notUseFormControl>\n        <input\n          autocomplete=\"off\"\n          [id]=\"config.id\"\n          [placeholder]=\"config.placeholder ?? ''\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          type=\"{{ type }}\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [value]=\"value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-template>\n    </div>\n    <div *ngIf=\"config?.type === 'password'\" class=\"content-right\">\n      <s-icon-mat [type]=\"iconSymbol ? 'symbol' : 'icon'\" class=\"icon cursor\" (click)=\"changeShowPassword()\"\n        >{{ showPassword ? 'visibility' : 'visibility_off' }}\n      </s-icon-mat>\n    </div>\n    <div *ngIf=\"config?.theme !== THEME.DEFAULT && config.theme !== undefined\" class=\"content-right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{ ICON_THEME[config.theme] }}</s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"config.showHelp && (config.theme === THEME.DEFAULT || config.theme !== undefined)\"\n      class=\"content-right\">\n      <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\">help_outline</s-icon-mat>\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched) &&\n      !((config.type === INPUT_TYPE.URL && config.errorText) || (config.type === INPUT_TYPE.EMAIL && config.errorText))\n    \"\n    [customErrorMessages]=\"config.errorMessages ?? undefined\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control *ngIf=\"!config.hideErrorText && config.errorText\" theme=\"red\">\n    {{ config.errorText }}\n  </s-error-control>\n  <s-error-control *ngIf=\"!config.hideErrorText && errorPattern && !config.errorText\" theme=\"red\">\n    {{ errorPattern }}\n  </s-error-control>\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !errorPattern &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) || (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</div>\n", styles: [":host{align-self:flex-start}.s-input s-error-control .label-content{line-height:normal}.s-input__label{font-size:.875rem;color:var(--secondary-600)}.s-input__required{color:var(--primary-600)}.s-input__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.188rem 0;background-color:var(--neutrals-1200)}.s-input__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input__content input:-webkit-autofill,.s-input__content input:-webkit-autofill:hover,.s-input__content input:-webkit-autofill:focus,.s-input__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-input__content input:focus,.s-input__content input:focus-visible{outline:none}.s-input__content .icon{width:1.25rem;cursor:default}.s-input__content .icon span{display:flex}.s-input__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input__content .content-left-url{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;border-right:.063rem solid var(--secondary-500);padding-right:.5rem;color:var(--secondary-500);font-size:.9rem}.s-input__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input__content.sm input{height:1.3rem;font-size:.75rem}.s-input__content.sm .icon{width:1.25rem;cursor:default}.s-input__content.sm .icon span{font-size:1.2em;display:flex}.s-input__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);pointer-events:none}.s-input__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-input__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input__content.readonly{background-color:var(--neutrals-1100)}.s-input__content.readonly input{background-color:var(--neutrals-1100);cursor:default;color:var(--secondary-600)}.s-input__content.theme-red{border:.063rem solid var(--red-500)}.s-input__content.theme-red .icon.report span{color:var(--red-600)}.s-input__content.theme-green{border:.063rem solid var(--green-500)}.s-input__content.theme-green .icon.report span{color:var(--green-600)}.s-input__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: i4.SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: i5.SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"s-input\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-input__label\">\n    {{ config.label }}\n    <span class=\"s-input__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-input__content {{ config.size }} theme-{{ config.theme }} {{ config.classAdd }}\"\n    [ngClass]=\"{\n      'disabled-active': config.disabled || (control && control.status === 'DISABLED'),\n      readonly: config.readOnly,\n      'theme-red':\n        (control && control.invalid && (isFocused || control.touched)) ||\n        errorPattern ||\n        config.theme === THEME.RED ||\n        config.errorText,\n    }\">\n    <div *ngIf=\"showIconType()\" class=\"content-left\">\n      <s-icon-mat class=\"icon\">{{ iconType }}</s-icon-mat>\n    </div>\n    <div class=\"content-center\">\n      <ng-container *ngIf=\"control; else notUseFormControl\">\n        <input\n          autocomplete=\"off\"\n          [id]=\"config.id\"\n          [placeholder]=\"config.placeholder ?? ''\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          type=\"{{ type }}\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [maxlength]=\"config.maxlength ?? null\"\n          [formControl]=\"control\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-container>\n      <ng-template #notUseFormControl>\n        <input\n          autocomplete=\"off\"\n          [id]=\"config.id\"\n          [placeholder]=\"config.placeholder ?? ''\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          type=\"{{ type }}\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [value]=\"value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-template>\n    </div>\n    <div *ngIf=\"config?.type === 'password'\" class=\"content-right\">\n      <s-icon-mat [type]=\"iconSymbol ? 'symbol' : 'icon'\" class=\"icon cursor\" (click)=\"changeShowPassword()\"\n        >{{ showPassword ? 'visibility' : 'visibility_off' }}\n      </s-icon-mat>\n    </div>\n    <div *ngIf=\"config?.theme !== THEME.DEFAULT && config.theme !== undefined\" class=\"content-right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{ ICON_THEME[config.theme] }}</s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"config.showHelp && (config.theme === THEME.DEFAULT || config.theme !== undefined)\"\n      class=\"content-right\">\n      <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\">help_outline</s-icon-mat>\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched) &&\n      !((config.type === INPUT_TYPE.URL && config.errorText) || (config.type === INPUT_TYPE.EMAIL && config.errorText))\n    \"\n    [customErrorMessages]=\"config.errorMessages ?? undefined\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control *ngIf=\"!config.hideErrorText && config.errorText\" theme=\"red\">\n    {{ config.errorText }}\n  </s-error-control>\n  <s-error-control *ngIf=\"!config.hideErrorText && errorPattern && !config.errorText\" theme=\"red\">\n    {{ errorPattern }}\n  </s-error-control>\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !errorPattern &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) || (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</div>\n", styles: [":host{align-self:flex-start}.s-input s-error-control .label-content{line-height:normal}.s-input__label{font-size:.875rem;color:var(--secondary-600)}.s-input__required{color:var(--primary-600)}.s-input__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.188rem 0;background-color:var(--neutrals-1200)}.s-input__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input__content input:-webkit-autofill,.s-input__content input:-webkit-autofill:hover,.s-input__content input:-webkit-autofill:focus,.s-input__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-input__content input:focus,.s-input__content input:focus-visible{outline:none}.s-input__content .icon{width:1.25rem;cursor:default}.s-input__content .icon span{display:flex}.s-input__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input__content .content-left-url{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;border-right:.063rem solid var(--secondary-500);padding-right:.5rem;color:var(--secondary-500);font-size:.9rem}.s-input__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input__content.sm input{height:1.3rem;font-size:.75rem}.s-input__content.sm .icon{width:1.25rem;cursor:default}.s-input__content.sm .icon span{font-size:1.2em;display:flex}.s-input__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);pointer-events:none}.s-input__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-input__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input__content.readonly{background-color:var(--neutrals-1100)}.s-input__content.readonly input{background-color:var(--neutrals-1100);cursor:default;color:var(--secondary-600)}.s-input__content.theme-red{border:.063rem solid var(--red-500)}.s-input__content.theme-red .icon.report span{color:var(--red-600)}.s-input__content.theme-green{border:.063rem solid var(--green-500)}.s-input__content.theme-green .icon.report span{color:var(--green-600)}.s-input__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: i4.SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: i5.SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SInputComponent, decorators: [{
             type: Component,

package/esm2022/lib/input/components/input-number/s-input-number.component.mjs

@@ -118,7 +118,7 @@ export class SInputNumberComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => SInputNumberComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<section class=\"s-input-number\">\n  <label *ngIf=\"config.label\" class=\"s-input-number__label\" for=\"config.id\">\n    {{ config.label }}\n    <span class=\"s-input-number__required\" *ngIf=\"config.required\">*</span>\n  </label>\n  <div class=\"d-flex align-center\">\n    <div class=\"content-left mr-1\">\n      <s-button\n        [disabled]=\"!canDecrease()\"\n        (click)=\"numberDecrease()\"\n        [size]=\"config.size ?? 'md'\"\n        [pill]=\"true\"\n        [invert]=\"true\"\n        class=\"s-input-number__button\">\n        <s-icon-mat>remove</s-icon-mat>\n      </s-button>\n    </div>\n    <div\n      class=\"s-input-number__content {{ config.size }}\n        theme-{{ config.theme }} {{ config.classAdd }} w-100\"\n      [ngClass]=\"{\n        'disabled-active': config.disabled,\n        'readonly': config.readOnly,\n        'theme-red':\n          (control && control.invalid && (isFocused || control.touched)) ||\n          (control && control.errors && control.touched) ||\n          config.theme === 'red',\n      }\">\n      <div class=\"content-center\">\n        <ng-container *ngIf=\"control; else notUseFormControl\">\n          <input\n            autocomplete=\"off\"\n            placeholder=\"{{ config.placeholder }}\"\n            [readOnly]=\"config.readOnly || config.disabled\"\n            [id]=\"config.id ? config.id : ''\"\n            [type]=\"'number'\"\n            max=\"{{ config.max }}\"\n            min=\"{{ config.min }}\"\n            [step]=\"config.step\"\n            [formControl]=\"getControl()\"\n            (focus)=\"onFocus($event)\"\n            (blur)=\"onBlur($event)\" />\n        </ng-container>\n        <ng-template #notUseFormControl>\n          <input\n            autocomplete=\"off\"\n            placeholder=\"{{ config.placeholder }}\"\n            [readOnly]=\"config.readOnly || config.disabled\"\n            [id]=\"config.id ? config.id : ''\"\n            [type]=\"'number'\"\n            max=\"{{ config.max }}\"\n            min=\"{{ config.min }}\"\n            [step]=\"config.step\"\n            [value]=\"value\"\n            (input)=\"onInput($event)\"\n            (focus)=\"onFocus($event)\"\n            (blur)=\"onBlur($event)\" />\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"config.theme !== 'default' && config.theme !== undefined\"\n        class=\"content-right\">\n        <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n          ICON_THEME[config.theme]\n        }}</s-icon-mat>\n      </div>\n      <div\n        *ngIf=\"\n          (config?.theme === 'default' && config.showHelp) ||\n          (config?.theme === undefined && config.showHelp)\n        \"\n        class=\"content-right\">\n        <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n          >help_outline</s-icon-mat\n        >\n      </div>\n    </div>\n    <div class=\"content-left ml-1\">\n      <s-button\n        [disabled]=\"!canIncrease()\"\n        (click)=\"numberIncrement()\"\n        [size]=\"config.size ?? 'md'\"\n        [pill]=\"true\"\n        [invert]=\"true\"\n        class=\"button-input-626\"\n        ><s-icon-mat>add</s-icon-mat></s-button\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched)\n    \"\n    [customErrorMessages]=\"config.errorMessages\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\"\n    >{{ config.errorText }}</s-error-control\n  >\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</section>\n", styles: [".s-input-number{margin-bottom:.5rem}.s-input-number__label{font-size:.875rem;color:var(--secondary-600)}.s-input-number__required{color:var(--primary-600)}.s-input-number__button{font-size:.93rem;font-weight:700}.s-input-number__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-input-number__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input-number__content input:focus,.s-input-number__content input:focus-visible{outline:none}.s-input-number__content input:-webkit-autofill,.s-input-number__content input:-webkit-autofill:hover,.s-input-number__content input:-webkit-autofill:focus,.s-input-number__content input:-webkit-autofill:active{-webkit-box-shadow:0rem 0rem 0rem 1.875rem var(--neutrals-1200) inset!important}.s-input-number__content input::-webkit-outer-spin-button,.s-input-number__content input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.s-input-number__content input[type=number]{-moz-appearance:textfield}.s-input-number__content .icon{width:1.25rem;cursor:default}.s-input-number__content .icon span{display:flex}.s-input-number__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input-number__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input-number__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input-number__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);outline:0}.s-input-number__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input-number__content.disabled-active.content-left{color:var(--neutrals-800)!important}.s-input-number__content.disabled-active.content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input-number__content.readonly{background-color:var(--neutrals-1100)}.s-input-number__content.readonly input{background-color:var(--neutrals-1100);cursor:default;color:var(--secondary-600)}.s-input-number__content.theme-red{border:.063rem solid var(--red-500)}.s-input-number__content.theme-red .icon.report span{color:var(--red-600)}.s-input-number__content.theme-green{border:.063rem solid var(--green-500)}.s-input-number__content.theme-green .icon.report span{color:var(--green-600)}.s-input-number__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input-number__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input-number__content .sm input{height:1.3rem;font-size:.75rem}.s-input-number__content .sm .icon{width:1.25rem;cursor:default}.s-input-number__content .sm .icon span{font-size:1.2em;display:flex}.s-input-number__content:not(.disabled-active):has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: i4.SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "component", type: i5.SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: i6.SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<section class=\"s-input-number\">\n  <label *ngIf=\"config.label\" class=\"s-input-number__label\" for=\"config.id\">\n    {{ config.label }}\n    <span class=\"s-input-number__required\" *ngIf=\"config.required\">*</span>\n  </label>\n  <div class=\"d-flex align-center\">\n    <div class=\"content-left mr-1\">\n      <s-button\n        [disabled]=\"!canDecrease()\"\n        (click)=\"numberDecrease()\"\n        [size]=\"config.size ?? 'md'\"\n        [pill]=\"true\"\n        [invert]=\"true\"\n        class=\"s-input-number__button\">\n        <s-icon-mat>remove</s-icon-mat>\n      </s-button>\n    </div>\n    <div\n      class=\"s-input-number__content {{ config.size }}\n        theme-{{ config.theme }} {{ config.classAdd }} w-100\"\n      [ngClass]=\"{\n        'disabled-active': config.disabled,\n        'readonly': config.readOnly,\n        'theme-red':\n          (control && control.invalid && (isFocused || control.touched)) ||\n          (control && control.errors && control.touched) ||\n          config.theme === 'red',\n      }\">\n      <div class=\"content-center\">\n        <ng-container *ngIf=\"control; else notUseFormControl\">\n          <input\n            autocomplete=\"off\"\n            placeholder=\"{{ config.placeholder }}\"\n            [readOnly]=\"config.readOnly || config.disabled\"\n            [id]=\"config.id ? config.id : ''\"\n            [type]=\"'number'\"\n            max=\"{{ config.max }}\"\n            min=\"{{ config.min }}\"\n            [step]=\"config.step\"\n            [formControl]=\"getControl()\"\n            (focus)=\"onFocus($event)\"\n            (blur)=\"onBlur($event)\" />\n        </ng-container>\n        <ng-template #notUseFormControl>\n          <input\n            autocomplete=\"off\"\n            placeholder=\"{{ config.placeholder }}\"\n            [readOnly]=\"config.readOnly || config.disabled\"\n            [id]=\"config.id ? config.id : ''\"\n            [type]=\"'number'\"\n            max=\"{{ config.max }}\"\n            min=\"{{ config.min }}\"\n            [step]=\"config.step\"\n            [value]=\"value\"\n            (input)=\"onInput($event)\"\n            (focus)=\"onFocus($event)\"\n            (blur)=\"onBlur($event)\" />\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"config.theme !== 'default' && config.theme !== undefined\"\n        class=\"content-right\">\n        <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n          ICON_THEME[config.theme]\n        }}</s-icon-mat>\n      </div>\n      <div\n        *ngIf=\"\n          (config?.theme === 'default' && config.showHelp) ||\n          (config?.theme === undefined && config.showHelp)\n        \"\n        class=\"content-right\">\n        <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n          >help_outline</s-icon-mat\n        >\n      </div>\n    </div>\n    <div class=\"content-left ml-1\">\n      <s-button\n        [disabled]=\"!canIncrease()\"\n        (click)=\"numberIncrement()\"\n        [size]=\"config.size ?? 'md'\"\n        [pill]=\"true\"\n        [invert]=\"true\"\n        class=\"button-input-626\"\n        ><s-icon-mat>add</s-icon-mat></s-button\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched)\n    \"\n    [customErrorMessages]=\"config.errorMessages\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\"\n    >{{ config.errorText }}</s-error-control\n  >\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</section>\n", styles: [".s-input-number{margin-bottom:.5rem}.s-input-number__label{font-size:.875rem;color:var(--secondary-600)}.s-input-number__required{color:var(--primary-600)}.s-input-number__button{font-size:.93rem;font-weight:700}.s-input-number__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-input-number__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input-number__content input:focus,.s-input-number__content input:focus-visible{outline:none}.s-input-number__content input:-webkit-autofill,.s-input-number__content input:-webkit-autofill:hover,.s-input-number__content input:-webkit-autofill:focus,.s-input-number__content input:-webkit-autofill:active{-webkit-box-shadow:0rem 0rem 0rem 1.875rem var(--neutrals-1200) inset!important}.s-input-number__content input::-webkit-outer-spin-button,.s-input-number__content input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.s-input-number__content input[type=number]{-moz-appearance:textfield}.s-input-number__content .icon{width:1.25rem;cursor:default}.s-input-number__content .icon span{display:flex}.s-input-number__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input-number__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input-number__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input-number__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);outline:0}.s-input-number__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input-number__content.disabled-active.content-left{color:var(--neutrals-800)!important}.s-input-number__content.disabled-active.content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input-number__content.readonly{background-color:var(--neutrals-1100)}.s-input-number__content.readonly input{background-color:var(--neutrals-1100);cursor:default;color:var(--secondary-600)}.s-input-number__content.theme-red{border:.063rem solid var(--red-500)}.s-input-number__content.theme-red .icon.report span{color:var(--red-600)}.s-input-number__content.theme-green{border:.063rem solid var(--green-500)}.s-input-number__content.theme-green .icon.report span{color:var(--green-600)}.s-input-number__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input-number__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input-number__content .sm input{height:1.3rem;font-size:.75rem}.s-input-number__content .sm .icon{width:1.25rem;cursor:default}.s-input-number__content .sm .icon span{font-size:1.2em;display:flex}.s-input-number__content:not(.disabled-active):has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: i4.SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "component", type: i5.SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: i6.SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SInputNumberComponent, decorators: [{
             type: Component,

package/esm2022/lib/input/components/time/s-time.component.mjs

@@ -58,7 +58,7 @@ export class STimeComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => STimeComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<section class=\"s-time\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-time__label\">\n    {{ config.label }}\n    <span class=\"s-time__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-time__content {{ config.size }} theme-{{ config.theme }} {{\n      config.classAdd\n    }}\"\n    [ngClass]=\"{\n      'disabled-active':\n        config.disabled || (control && control.status === 'DISABLED'),\n      'readonly':\n        config.readOnly,\n      'theme-red':\n        (control && control.invalid && (isFocused || control.touched)) ||\n        (control && control.errors && control.touched) ||\n        config.theme === 'red',\n    }\">\n    <div class=\"content-center\">\n      <ng-container *ngIf=\"control; else notUseFormControl\">\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'time'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [formControl]=\"control\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-container>\n      <ng-template #notUseFormControl>\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'time'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [value]=\"value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-template>\n    </div>\n    <div\n      *ngIf=\"config?.theme !== 'default' && config.theme !== undefined\"\n      class=\"content-right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n        ICON_THEME[config.theme]\n      }}</s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"\n        config?.theme === 'default' ||\n        (config?.theme === undefined && config.showHelp)\n      \"\n      class=\"content-right\">\n      <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n        >help_outline</s-icon-mat\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched)\n    \"\n    [customErrorMessages]=\"config.errorMessages\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\"\n    >{{ config.errorText }}</s-error-control\n  >\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</section>\n", styles: [".s-time{margin-bottom:.5rem}.s-time__label{font-size:.875rem;color:var(--secondary-600)}.s-time__required{color:var(--primary-600)}.s-time__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-time__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-time__content input:focus,.s-time__content input:focus-visible{outline:none}.s-time__content input:-webkit-autofill,.s-time__content input:-webkit-autofill:hover,.s-time__content input:-webkit-autofill:focus,.s-time__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-time__content .icon{width:1.25rem;cursor:default}.s-time__content .icon span{display:flex}.s-time__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-time__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-time__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-time__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-time__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-time__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-time__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-time__content.readonly{background-color:var(--neutrals-1100)}.s-time__content.readonly input{background-color:var(--neutrals-1100);cursor:default}.s-time__content.theme-red{border:.063rem solid var(--red-500)}.s-time__content.theme-red .icon.report span{color:var(--red-600)}.s-time__content.theme-green{border:.063rem solid var(--green-500)}.s-time__content.theme-green .icon.report span{color:var(--green-600)}.s-time__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-time__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-time__content.sm input{height:1.3rem;font-size:.75rem}.s-time__content.sm .icon{width:1.25rem;cursor:default}.s-time__content.sm .icon span{font-size:1.2em;display:flex}.s-time__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: i4.SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: i5.SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<section class=\"s-time\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-time__label\">\n    {{ config.label }}\n    <span class=\"s-time__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-time__content {{ config.size }} theme-{{ config.theme }} {{\n      config.classAdd\n    }}\"\n    [ngClass]=\"{\n      'disabled-active':\n        config.disabled || (control && control.status === 'DISABLED'),\n      'readonly':\n        config.readOnly,\n      'theme-red':\n        (control && control.invalid && (isFocused || control.touched)) ||\n        (control && control.errors && control.touched) ||\n        config.theme === 'red',\n    }\">\n    <div class=\"content-center\">\n      <ng-container *ngIf=\"control; else notUseFormControl\">\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'time'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [formControl]=\"control\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-container>\n      <ng-template #notUseFormControl>\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'time'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [value]=\"value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-template>\n    </div>\n    <div\n      *ngIf=\"config?.theme !== 'default' && config.theme !== undefined\"\n      class=\"content-right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n        ICON_THEME[config.theme]\n      }}</s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"\n        config?.theme === 'default' ||\n        (config?.theme === undefined && config.showHelp)\n      \"\n      class=\"content-right\">\n      <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n        >help_outline</s-icon-mat\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched)\n    \"\n    [customErrorMessages]=\"config.errorMessages\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\"\n    >{{ config.errorText }}</s-error-control\n  >\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</section>\n", styles: [".s-time{margin-bottom:.5rem}.s-time__label{font-size:.875rem;color:var(--secondary-600)}.s-time__required{color:var(--primary-600)}.s-time__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-time__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-time__content input:focus,.s-time__content input:focus-visible{outline:none}.s-time__content input:-webkit-autofill,.s-time__content input:-webkit-autofill:hover,.s-time__content input:-webkit-autofill:focus,.s-time__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-time__content .icon{width:1.25rem;cursor:default}.s-time__content .icon span{display:flex}.s-time__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-time__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-time__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-time__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-time__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-time__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-time__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-time__content.readonly{background-color:var(--neutrals-1100)}.s-time__content.readonly input{background-color:var(--neutrals-1100);cursor:default}.s-time__content.theme-red{border:.063rem solid var(--red-500)}.s-time__content.theme-red .icon.report span{color:var(--red-600)}.s-time__content.theme-green{border:.063rem solid var(--green-500)}.s-time__content.theme-green .icon.report span{color:var(--green-600)}.s-time__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-time__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-time__content.sm input{height:1.3rem;font-size:.75rem}.s-time__content.sm .icon{width:1.25rem;cursor:default}.s-time__content.sm .icon span{font-size:1.2em;display:flex}.s-time__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: i4.SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: i5.SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STimeComponent, decorators: [{
             type: Component,

package/esm2022/lib/list/s-list.component.mjs

@@ -8,7 +8,7 @@ export class SListComponent {
         this.size = 'md';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SListComponent, selector: "s-list", inputs: { disabled: "disabled", selected: "selected", size: "size" }, ngImport: i0, template: "    <div tabindex=\"0\" class=\"s-list s-scroll \n    {{disabled ? 's-list--disabled' : ''}} {{selected ? 's-list--selected' : ''}} \">\n        <div class=\"s-list__content\">\n            <div class=\"s-list__content__drag s-list__content__drag--no-select s-list__content__drag--cursor s-list__content__drag--{{size}}\" >\n                <s-icon-mat class=\"drag-indicator\">drag_indicator</s-icon-mat>\n            </div>\n            <div class=\"s-list__content__gral\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n    </div>\n", styles: [".s-list{width:100%;display:flex;align-items:center;border:.063rem solid var(--neutrals-800);border-radius:.25rem;margin-bottom:.125rem;background-color:var(--neutrals-1200);overflow-x:auto}.s-list__content{display:flex;align-items:center;width:100%;border-top-left-radius:.125rem;border-bottom-left-radius:.125rem;padding:.875rem;border-left:.25rem solid var(--neutrals-1200)}.s-list__content__drag{background-color:var(--primary-100);color:var(--primary-600);border:.063rem solid var(--primary-600);display:flex;align-items:center;border-radius:.25rem}.s-list__content__drag .drag-indicator span{font-size:1rem;padding:.188rem}.s-list__content__drag--md{height:3.75rem}.s-list__content__drag--sm{height:2.375rem}.s-list__content__drag--xs{height:2rem}.s-list__content__drag--cursor{cursor:grab}.s-list__content__gral{width:100%;margin-left:.625rem}.s-list:hover:not(.s-list--disabled){border:.063rem solid var(--primary-300);background-color:var(--primary-100)}.s-list:hover:not(.s-list--disabled) .s-list__content{border-top-left-radius:.125rem;border-bottom-left-radius:.125rem;border-left:.25rem solid var(--primary-600)}.s-list--selected{border:.063rem solid var(--primary-300);background-color:var(--primary-100);box-shadow:var(--focus-cyan--md)}.s-list--selected .s-list__content{border-top-left-radius:.125rem;border-bottom-left-radius:.125rem;border-left:.25rem solid var(--primary-600)}.s-list--disabled{opacity:50%;border:.063rem solid var(--neutrals-1000);background-color:var(--neutrals-1200)}.s-list--disabled .s-list__content{border-left:.25rem solid var(--neutrals-1200)}.s-list--disabled .s-list__content__drag{background-color:var(--neutrals-1100);color:var(--neutrals-800);border:.063rem solid var(--neutrals-800);cursor:no-drop}\n"], dependencies: [{ kind: "component", type: i1.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SListComponent, selector: "s-list", inputs: { disabled: "disabled", selected: "selected", size: "size" }, ngImport: i0, template: "    <div tabindex=\"0\" class=\"s-list s-scroll \n    {{disabled ? 's-list--disabled' : ''}} {{selected ? 's-list--selected' : ''}} \">\n        <div class=\"s-list__content\">\n            <div class=\"s-list__content__drag s-list__content__drag--no-select s-list__content__drag--cursor s-list__content__drag--{{size}}\" >\n                <s-icon-mat class=\"drag-indicator\">drag_indicator</s-icon-mat>\n            </div>\n            <div class=\"s-list__content__gral\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n    </div>\n", styles: [".s-list{width:100%;display:flex;align-items:center;border:.063rem solid var(--neutrals-800);border-radius:.25rem;margin-bottom:.125rem;background-color:var(--neutrals-1200);overflow-x:auto}.s-list__content{display:flex;align-items:center;width:100%;border-top-left-radius:.125rem;border-bottom-left-radius:.125rem;padding:.875rem;border-left:.25rem solid var(--neutrals-1200)}.s-list__content__drag{background-color:var(--primary-100);color:var(--primary-600);border:.063rem solid var(--primary-600);display:flex;align-items:center;border-radius:.25rem}.s-list__content__drag .drag-indicator span{font-size:1rem;padding:.188rem}.s-list__content__drag--md{height:3.75rem}.s-list__content__drag--sm{height:2.375rem}.s-list__content__drag--xs{height:2rem}.s-list__content__drag--cursor{cursor:grab}.s-list__content__gral{width:100%;margin-left:.625rem}.s-list:hover:not(.s-list--disabled){border:.063rem solid var(--primary-300);background-color:var(--primary-100)}.s-list:hover:not(.s-list--disabled) .s-list__content{border-top-left-radius:.125rem;border-bottom-left-radius:.125rem;border-left:.25rem solid var(--primary-600)}.s-list--selected{border:.063rem solid var(--primary-300);background-color:var(--primary-100);box-shadow:var(--focus-cyan--md)}.s-list--selected .s-list__content{border-top-left-radius:.125rem;border-bottom-left-radius:.125rem;border-left:.25rem solid var(--primary-600)}.s-list--disabled{opacity:50%;border:.063rem solid var(--neutrals-1000);background-color:var(--neutrals-1200)}.s-list--disabled .s-list__content{border-left:.25rem solid var(--neutrals-1200)}.s-list--disabled .s-list__content__drag{background-color:var(--neutrals-1100);color:var(--neutrals-800);border:.063rem solid var(--neutrals-800);cursor:no-drop}\n"], dependencies: [{ kind: "component", type: i1.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SListComponent, decorators: [{
             type: Component,

package/esm2022/lib/modal/modal-confirm/modal-confirm.component.mjs

@@ -52,7 +52,7 @@ export class SModalConfirmComponent {
         return 's-modal-confirm__message--' + (this.config?.textAlign ?? 'left');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SModalConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SModalConfirmComponent, isStandalone: true, selector: "s-modal-confirm.", host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, ngImport: i0, template: "@if (config.isVisible) {\n  <div class=\"overlay\">\n    <div class=\"overlay__grid-12\">\n      <div\n        class=\"s-modal-confirm\"\n        (click)=\"close(false)\"\n        (keydown.enter)=\"close(false)\"\n        tabindex=\"0\">\n        <div\n          class=\"s-modal-confirm__content\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          tabindex=\"0\">\n          <section\n            class=\"s-modal-confirm__header\"\n            [ngClass]=\"{\n              's-modal-confirm__header--secondary':\n                config.backgroundType === 'secondary',\n            }\">\n            <div class=\"s-modal-confirm__header-title\">\n              <s-icon-mat\n                size=\"20\"\n                [ngClass]=\"'s-modal-confirm__icon-' + config.type\">\n                {{ getIconType(config.type).icon }}\n              </s-icon-mat>\n              <h4 class=\"s-modal-confirm__title\">\n                {{ config.title }}\n              </h4>\n            </div>\n            @if (config.cancelText) {\n              <s-icon-mat\n                tabindex=\"0\"\n                class=\"s-modal-confirm__icon-close\"\n                size=\"20\"\n                (click)=\"close(false)\">\n                close\n              </s-icon-mat>\n            }\n          </section>\n          <div class=\"s-scroll s-modal-confirm__body\">\n            <p class=\"s-modal-confirm__message\" [ngClass]=\"getTextAlignClass()\">\n              {{ config.message }}\n            </p>\n          </div>\n          <section\n            class=\"s-modal-confirm__buttons\"\n            [ngClass]=\"{\n              's-modal-confirm__buttons--secondary':\n                config.backgroundType === 'secondary',\n            }\">\n            <div>\n              @if (config.checkbox) {\n                <s-checkbox\n                  [config]=\"configCheckbox\"\n                  [(ngModel)]=\"valueCheckbox\"\n                  (ngModelChange)=\"valueCheckbox = $event\"></s-checkbox>\n              }\n            </div>\n            <div>\n              @if (config.cancelText) {\n                <s-button\n                  type=\"tertiary\"\n                  [theme]=\"getIconType(config.type).color\"\n                  (click)=\"close(false, valueCheckbox)\"\n                  (keydown.enter)=\"close(false, valueCheckbox)\">\n                  {{ config.cancelText }}\n                </s-button>\n              }\n              <s-button\n                [theme]=\"getIconType(config.type).color\"\n                (click)=\"close(true, valueCheckbox)\"\n                (keydown.enter)=\"close(true, valueCheckbox)\">\n                {{ config.confirmText }}\n              </s-button>\n            </div>\n          </section>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.overlay__grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;width:100%;margin:0 2rem}.s-modal-confirm{grid-column:5/span 4;box-shadow:var(--E500)}.s-modal-confirm__content{background:var(--neutrals-1200);text-align:left;min-width:10rem;border-radius:.5rem}.s-modal-confirm__header{align-items:center;display:flex;justify-content:space-between;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding:.625rem 1rem}.s-modal-confirm__header-title{align-items:center;display:flex}.s-modal-confirm__header-title h4{font-size:1.25rem;margin-left:.4rem;color:var(--secondary-600)}.s-modal-confirm__icon-alert{color:var(--yellow-600)}.s-modal-confirm__icon-error{color:var(--red-600)}.s-modal-confirm__icon-info{color:var(--primary-600)}.s-modal-confirm__icon-close{color:var(--neutrals-600);cursor:pointer}.s-modal-confirm__message{font-size:.875rem;color:var(--secondary-600)}.s-modal-confirm__message--center{text-align:center}.s-modal-confirm__message--justify{text-align:justify}.s-modal-confirm__message--left{text-align:left}.s-modal-confirm__message--right{text-align:right}.s-modal-confirm__buttons{display:flex;padding:.625rem 1rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;justify-content:space-between;align-items:center}.s-modal-confirm__buttons--secondary{background:var(--neutrals-1100)}@media (max-width: 37.5rem){.s-modal-confirm__buttons{justify-content:end;flex-direction:column;align-items:center}}.s-modal-confirm__body{margin:.5rem .25rem .5rem .938rem;max-height:7rem;overflow-x:hidden;padding-right:.313rem;text-align:justify}@media (max-width: 31.25rem){.s-modal-confirm{grid-column:1/span 12}}@media (max-width: 55.625rem){.s-modal-confirm{grid-column:3/span 8}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SButtonModule }, { kind: "component", type: i2.SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "ngmodule", type: SIconMaterialModule }, { kind: "component", type: i3.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "ngmodule", type: SCheckboxModule }, { kind: "component", type: i4.SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SModalConfirmComponent, isStandalone: true, selector: "s-modal-confirm.", host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, ngImport: i0, template: "@if (config.isVisible) {\n  <div class=\"overlay\">\n    <div class=\"overlay__grid-12\">\n      <div class=\"s-modal-confirm\" (click)=\"close(false)\" (keydown.enter)=\"close(false)\" tabindex=\"0\">\n        <div\n          class=\"s-modal-confirm__content\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          tabindex=\"0\">\n          <section\n            class=\"s-modal-confirm__header\"\n            [ngClass]=\"{\n              's-modal-confirm__header--secondary': config.backgroundType === 'secondary',\n            }\">\n            <div class=\"s-modal-confirm__header-title\">\n              <s-icon-mat size=\"md\" [ngClass]=\"'s-modal-confirm__icon-' + config.type\">\n                {{ getIconType(config.type).icon }}\n              </s-icon-mat>\n              <h4 class=\"s-modal-confirm__title\">\n                {{ config.title }}\n              </h4>\n            </div>\n            @if (config.cancelText) {\n              <s-icon-mat tabindex=\"0\" class=\"s-modal-confirm__icon-close\" size=\"md\" (click)=\"close(false)\">\n                close\n              </s-icon-mat>\n            }\n          </section>\n          <div class=\"s-scroll s-modal-confirm__body\">\n            <p class=\"s-modal-confirm__message\" [ngClass]=\"getTextAlignClass()\">\n              {{ config.message }}\n            </p>\n          </div>\n          <section\n            class=\"s-modal-confirm__buttons\"\n            [ngClass]=\"{\n              's-modal-confirm__buttons--secondary': config.backgroundType === 'secondary',\n            }\">\n            <div>\n              @if (config.checkbox) {\n                <s-checkbox\n                  [config]=\"configCheckbox\"\n                  [(ngModel)]=\"valueCheckbox\"\n                  (ngModelChange)=\"valueCheckbox = $event\"></s-checkbox>\n              }\n            </div>\n            <div>\n              @if (config.cancelText) {\n                <s-button\n                  type=\"tertiary\"\n                  [theme]=\"getIconType(config.type).color\"\n                  (click)=\"close(false, valueCheckbox)\"\n                  (keydown.enter)=\"close(false, valueCheckbox)\">\n                  {{ config.cancelText }}\n                </s-button>\n              }\n              <s-button\n                [theme]=\"getIconType(config.type).color\"\n                (click)=\"close(true, valueCheckbox)\"\n                (keydown.enter)=\"close(true, valueCheckbox)\">\n                {{ config.confirmText }}\n              </s-button>\n            </div>\n          </section>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.overlay__grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;width:100%;margin:0 2rem}.s-modal-confirm{grid-column:5/span 4;box-shadow:var(--E500)}.s-modal-confirm__content{background:var(--neutrals-1200);text-align:left;min-width:10rem;border-radius:.5rem}.s-modal-confirm__header{align-items:center;display:flex;justify-content:space-between;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding:.625rem 1rem}.s-modal-confirm__header-title{align-items:center;display:flex}.s-modal-confirm__header-title h4{font-size:1.25rem;margin-left:.4rem;color:var(--secondary-600)}.s-modal-confirm__icon-alert{color:var(--yellow-600)}.s-modal-confirm__icon-error{color:var(--red-600)}.s-modal-confirm__icon-info{color:var(--primary-600)}.s-modal-confirm__icon-close{color:var(--neutrals-600);cursor:pointer}.s-modal-confirm__message{font-size:.875rem;color:var(--secondary-600)}.s-modal-confirm__message--center{text-align:center}.s-modal-confirm__message--justify{text-align:justify}.s-modal-confirm__message--left{text-align:left}.s-modal-confirm__message--right{text-align:right}.s-modal-confirm__buttons{display:flex;padding:.625rem 1rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;justify-content:space-between;align-items:center}.s-modal-confirm__buttons--secondary{background:var(--neutrals-1100)}@media (max-width: 37.5rem){.s-modal-confirm__buttons{justify-content:end;flex-direction:column;align-items:center}}.s-modal-confirm__body{margin:.5rem .25rem .5rem .938rem;max-height:7rem;overflow-x:hidden;padding-right:.313rem;text-align:justify}@media (max-width: 31.25rem){.s-modal-confirm{grid-column:1/span 12}}@media (max-width: 55.625rem){.s-modal-confirm{grid-column:3/span 8}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SButtonModule }, { kind: "component", type: i2.SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "ngmodule", type: SIconMaterialModule }, { kind: "component", type: i3.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "ngmodule", type: SCheckboxModule }, { kind: "component", type: i4.SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SModalConfirmComponent, decorators: [{
             type: Component,
@@ -62,9 +62,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SIconMaterialModule,
                         SCheckboxModule,
                         FormsModule,
-                    ], template: "@if (config.isVisible) {\n  <div class=\"overlay\">\n    <div class=\"overlay__grid-12\">\n      <div\n        class=\"s-modal-confirm\"\n        (click)=\"close(false)\"\n        (keydown.enter)=\"close(false)\"\n        tabindex=\"0\">\n        <div\n          class=\"s-modal-confirm__content\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          tabindex=\"0\">\n          <section\n            class=\"s-modal-confirm__header\"\n            [ngClass]=\"{\n              's-modal-confirm__header--secondary':\n                config.backgroundType === 'secondary',\n            }\">\n            <div class=\"s-modal-confirm__header-title\">\n              <s-icon-mat\n                size=\"20\"\n                [ngClass]=\"'s-modal-confirm__icon-' + config.type\">\n                {{ getIconType(config.type).icon }}\n              </s-icon-mat>\n              <h4 class=\"s-modal-confirm__title\">\n                {{ config.title }}\n              </h4>\n            </div>\n            @if (config.cancelText) {\n              <s-icon-mat\n                tabindex=\"0\"\n                class=\"s-modal-confirm__icon-close\"\n                size=\"20\"\n                (click)=\"close(false)\">\n                close\n              </s-icon-mat>\n            }\n          </section>\n          <div class=\"s-scroll s-modal-confirm__body\">\n            <p class=\"s-modal-confirm__message\" [ngClass]=\"getTextAlignClass()\">\n              {{ config.message }}\n            </p>\n          </div>\n          <section\n            class=\"s-modal-confirm__buttons\"\n            [ngClass]=\"{\n              's-modal-confirm__buttons--secondary':\n                config.backgroundType === 'secondary',\n            }\">\n            <div>\n              @if (config.checkbox) {\n                <s-checkbox\n                  [config]=\"configCheckbox\"\n                  [(ngModel)]=\"valueCheckbox\"\n                  (ngModelChange)=\"valueCheckbox = $event\"></s-checkbox>\n              }\n            </div>\n            <div>\n              @if (config.cancelText) {\n                <s-button\n                  type=\"tertiary\"\n                  [theme]=\"getIconType(config.type).color\"\n                  (click)=\"close(false, valueCheckbox)\"\n                  (keydown.enter)=\"close(false, valueCheckbox)\">\n                  {{ config.cancelText }}\n                </s-button>\n              }\n              <s-button\n                [theme]=\"getIconType(config.type).color\"\n                (click)=\"close(true, valueCheckbox)\"\n                (keydown.enter)=\"close(true, valueCheckbox)\">\n                {{ config.confirmText }}\n              </s-button>\n            </div>\n          </section>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.overlay__grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;width:100%;margin:0 2rem}.s-modal-confirm{grid-column:5/span 4;box-shadow:var(--E500)}.s-modal-confirm__content{background:var(--neutrals-1200);text-align:left;min-width:10rem;border-radius:.5rem}.s-modal-confirm__header{align-items:center;display:flex;justify-content:space-between;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding:.625rem 1rem}.s-modal-confirm__header-title{align-items:center;display:flex}.s-modal-confirm__header-title h4{font-size:1.25rem;margin-left:.4rem;color:var(--secondary-600)}.s-modal-confirm__icon-alert{color:var(--yellow-600)}.s-modal-confirm__icon-error{color:var(--red-600)}.s-modal-confirm__icon-info{color:var(--primary-600)}.s-modal-confirm__icon-close{color:var(--neutrals-600);cursor:pointer}.s-modal-confirm__message{font-size:.875rem;color:var(--secondary-600)}.s-modal-confirm__message--center{text-align:center}.s-modal-confirm__message--justify{text-align:justify}.s-modal-confirm__message--left{text-align:left}.s-modal-confirm__message--right{text-align:right}.s-modal-confirm__buttons{display:flex;padding:.625rem 1rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;justify-content:space-between;align-items:center}.s-modal-confirm__buttons--secondary{background:var(--neutrals-1100)}@media (max-width: 37.5rem){.s-modal-confirm__buttons{justify-content:end;flex-direction:column;align-items:center}}.s-modal-confirm__body{margin:.5rem .25rem .5rem .938rem;max-height:7rem;overflow-x:hidden;padding-right:.313rem;text-align:justify}@media (max-width: 31.25rem){.s-modal-confirm{grid-column:1/span 12}}@media (max-width: 55.625rem){.s-modal-confirm{grid-column:3/span 8}}\n"] }]
+                    ], template: "@if (config.isVisible) {\n  <div class=\"overlay\">\n    <div class=\"overlay__grid-12\">\n      <div class=\"s-modal-confirm\" (click)=\"close(false)\" (keydown.enter)=\"close(false)\" tabindex=\"0\">\n        <div\n          class=\"s-modal-confirm__content\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          tabindex=\"0\">\n          <section\n            class=\"s-modal-confirm__header\"\n            [ngClass]=\"{\n              's-modal-confirm__header--secondary': config.backgroundType === 'secondary',\n            }\">\n            <div class=\"s-modal-confirm__header-title\">\n              <s-icon-mat size=\"md\" [ngClass]=\"'s-modal-confirm__icon-' + config.type\">\n                {{ getIconType(config.type).icon }}\n              </s-icon-mat>\n              <h4 class=\"s-modal-confirm__title\">\n                {{ config.title }}\n              </h4>\n            </div>\n            @if (config.cancelText) {\n              <s-icon-mat tabindex=\"0\" class=\"s-modal-confirm__icon-close\" size=\"md\" (click)=\"close(false)\">\n                close\n              </s-icon-mat>\n            }\n          </section>\n          <div class=\"s-scroll s-modal-confirm__body\">\n            <p class=\"s-modal-confirm__message\" [ngClass]=\"getTextAlignClass()\">\n              {{ config.message }}\n            </p>\n          </div>\n          <section\n            class=\"s-modal-confirm__buttons\"\n            [ngClass]=\"{\n              's-modal-confirm__buttons--secondary': config.backgroundType === 'secondary',\n            }\">\n            <div>\n              @if (config.checkbox) {\n                <s-checkbox\n                  [config]=\"configCheckbox\"\n                  [(ngModel)]=\"valueCheckbox\"\n                  (ngModelChange)=\"valueCheckbox = $event\"></s-checkbox>\n              }\n            </div>\n            <div>\n              @if (config.cancelText) {\n                <s-button\n                  type=\"tertiary\"\n                  [theme]=\"getIconType(config.type).color\"\n                  (click)=\"close(false, valueCheckbox)\"\n                  (keydown.enter)=\"close(false, valueCheckbox)\">\n                  {{ config.cancelText }}\n                </s-button>\n              }\n              <s-button\n                [theme]=\"getIconType(config.type).color\"\n                (click)=\"close(true, valueCheckbox)\"\n                (keydown.enter)=\"close(true, valueCheckbox)\">\n                {{ config.confirmText }}\n              </s-button>\n            </div>\n          </section>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.overlay__grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;width:100%;margin:0 2rem}.s-modal-confirm{grid-column:5/span 4;box-shadow:var(--E500)}.s-modal-confirm__content{background:var(--neutrals-1200);text-align:left;min-width:10rem;border-radius:.5rem}.s-modal-confirm__header{align-items:center;display:flex;justify-content:space-between;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding:.625rem 1rem}.s-modal-confirm__header-title{align-items:center;display:flex}.s-modal-confirm__header-title h4{font-size:1.25rem;margin-left:.4rem;color:var(--secondary-600)}.s-modal-confirm__icon-alert{color:var(--yellow-600)}.s-modal-confirm__icon-error{color:var(--red-600)}.s-modal-confirm__icon-info{color:var(--primary-600)}.s-modal-confirm__icon-close{color:var(--neutrals-600);cursor:pointer}.s-modal-confirm__message{font-size:.875rem;color:var(--secondary-600)}.s-modal-confirm__message--center{text-align:center}.s-modal-confirm__message--justify{text-align:justify}.s-modal-confirm__message--left{text-align:left}.s-modal-confirm__message--right{text-align:right}.s-modal-confirm__buttons{display:flex;padding:.625rem 1rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;justify-content:space-between;align-items:center}.s-modal-confirm__buttons--secondary{background:var(--neutrals-1100)}@media (max-width: 37.5rem){.s-modal-confirm__buttons{justify-content:end;flex-direction:column;align-items:center}}.s-modal-confirm__body{margin:.5rem .25rem .5rem .938rem;max-height:7rem;overflow-x:hidden;padding-right:.313rem;text-align:justify}@media (max-width: 31.25rem){.s-modal-confirm{grid-column:1/span 12}}@media (max-width: 55.625rem){.s-modal-confirm{grid-column:3/span 8}}\n"] }]
         }], propDecorators: { onEscapeKey: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtY29uZmlybS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaWRlc3lzLWdlbmVyaWMtdWkvc3JjL2xpYi9tb2RhbC9tb2RhbC1jb25maXJtL21vZGFsLWNvbmZpcm0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2lkZXN5cy1nZW5lcmljLXVpL3NyYy9saWIvbW9kYWwvbW9kYWwtY29uZmlybS9tb2RhbC1jb25maXJtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLE1BQU0sR0FHUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUN4RSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFHbkQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDN0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDMUQsT0FBTyxFQUFhLGVBQWUsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzVELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7OztBQXNCN0MsTUFBTSxPQUFPLHNCQUFzQjtJQWJuQztRQWVFLGtCQUFhLEdBQUcsYUFBYSxDQUFDO1FBRTlCLG1CQUFjLEdBQWM7WUFDMUIsY0FBYyxFQUFFLEtBQUs7U0FDdEIsQ0FBQztRQUNGLGtCQUFhLEdBQVksS0FBSyxDQUFDO1FBRWQsd0JBQW1CLEdBQUcsTUFBTSxDQUFDLG9CQUFvQixDQUFDLENBQUM7S0F1Q3JFO0lBckNDLFFBQVE7UUFDTixJQUFJLENBQUMsa0JBQWtCLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDLFlBQVksQ0FBQyxTQUFTLENBQ3ZFLE1BQU0sQ0FBQyxFQUFFO1lBQ1AsSUFBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUM7WUFDckIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO1lBQ3hFLElBQUksQ0FBQyxhQUFhLEdBQUcsTUFBTSxDQUFDLGFBQWE7Z0JBQ3ZDLENBQUMsQ0FBQyxNQUFNLENBQUMsYUFBYTtnQkFDdEIsQ0FBQyxDQUFDLEtBQUssQ0FBQztRQUNaLENBQUMsQ0FDRixDQUFDO0lBQ0osQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsa0JBQWtCLEVBQUUsV0FBVyxFQUFFLENBQUM7SUFDekMsQ0FBQztJQUdELFdBQVc7UUFDVCxJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUUsUUFBUSxFQUFFLENBQUM7WUFDMUIsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQ3hDLENBQUM7YUFBTSxDQUFDO1lBQ04sSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNwQixDQUFDO0lBQ0gsQ0FBQztJQUVELFdBQVcsQ0FBQyxJQUFnQjtRQUMxQixNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxJQUFJLElBQUksSUFBSSxDQUFDLENBQUM7UUFDdEUsT0FBTyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDakIsQ0FBQztJQUVELEtBQUssQ0FBQyxRQUFpQixFQUFFLGtCQUEyQixLQUFLO1FBQ3ZELElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxLQUFLLENBQUMsUUFBUSxFQUFFLGVBQWUsQ0FBQyxDQUFDO0lBQzVELENBQUM7SUFFRCxpQkFBaUI7UUFDZixPQUFPLDRCQUE0QixHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxTQUFTLElBQUksTUFBTSxDQUFDLENBQUM7SUFDM0UsQ0FBQzsrR0EvQ1Usc0JBQXNCO21HQUF0QixzQkFBc0IsdUpDckNuQywwekZBaUZBLHMzRERyREksWUFBWSw0SEFDWixhQUFhLHdNQUNiLG1CQUFtQixtTUFDbkIsZUFBZSwwSkFDZixXQUFXOzs0RkFLRixzQkFBc0I7a0JBYmxDLFNBQVM7K0JBQ0Usa0JBQWtCLGNBQ2hCLElBQUksV0FDUDt3QkFDUCxZQUFZO3dCQUNaLGFBQWE7d0JBQ2IsbUJBQW1CO3dCQUNuQixlQUFlO3dCQUNmLFdBQVc7cUJBQ1o7OEJBZ0NELFdBQVc7c0JBRFYsWUFBWTt1QkFBQyx5QkFBeUIsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgSG9zdExpc3RlbmVyLFxuICBpbmplY3QsXG4gIE9uRGVzdHJveSxcbiAgT25Jbml0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFNNb2RhbENvbmZpcm1TZXJ2aWNlIH0gZnJvbSAnLi9zZXJ2aWNlcy9tb2RhbC1jb25maXJtLnNlcnZpY2UnO1xuaW1wb3J0IHsgTW9kYWxUeXBlSWNvbiB9IGZyb20gJy4vbW9kZWxzL21vZGFsVHlwZSc7XG5pbXBvcnQgeyBTTW9kYWxDb25maXJtQ29uZmlnIH0gZnJvbSAnLi9tb2RlbHMvbW9kYWwtY29uZmlybS5pbnRlcmZhY2UnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgU0J1dHRvbk1vZHVsZSB9IGZyb20gJy4uLy4uL2J1dHRvbic7XG5pbXBvcnQgeyBTSWNvbk1hdGVyaWFsTW9kdWxlIH0gZnJvbSAnLi4vLi4vaWNvbi1tYXRlcmlhbCc7XG5pbXBvcnQgeyBTQ2hlY2tib3gsIFNDaGVja2JveE1vZHVsZSB9IGZyb20gJy4uLy4uL2NoZWNrYm94JztcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5leHBvcnQgdHlwZSBNb2RhbFR5cGUgPSAnYWxlcnQnIHwgJ2Vycm9yJyB8ICdpbmZvJztcblxuZXhwb3J0IHR5cGUgU01vZGFsQ29uZmlybVJlc3BvbnNlID0ge1xuICBjb25maXJtZWQ6IGJvb2xlYW47XG4gIGNoZWNrYm94VmFsdWU/OiBib29sZWFuO1xufTtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncy1tb2RhbC1jb25maXJtLicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgU0J1dHRvbk1vZHVsZSxcbiAgICBTSWNvbk1hdGVyaWFsTW9kdWxlLFxuICAgIFNDaGVja2JveE1vZHVsZSxcbiAgICBGb3Jtc01vZHVsZSxcbiAgXSxcbiAgdGVtcGxhdGVVcmw6ICcuL21vZGFsLWNvbmZpcm0uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9tb2RhbC1jb25maXJtLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFNNb2RhbENvbmZpcm1Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIGNvbmZpZyE6IFNNb2RhbENvbmZpcm1Db25maWc7XG4gIG1vZGFsVHlwZUljb24gPSBNb2RhbFR5cGVJY29uO1xuICBwcml2YXRlIGNvbmZpZ1N1YnNjcmlwdGlvbiE6IFN1YnNjcmlwdGlvbjtcbiAgY29uZmlnQ2hlY2tib3g6IFNDaGVja2JveCA9IHtcbiAgICB1c2VGb3JtQ29udHJvbDogZmFsc2UsXG4gIH07XG4gIHZhbHVlQ2hlY2tib3g6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBwcml2YXRlIHJlYWRvbmx5IG1vZGFsQ29uZmlybVNlcnZpY2UgPSBpbmplY3QoU01vZGFsQ29uZmlybVNlcnZpY2UpO1xuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuY29uZmlnU3Vic2NyaXB0aW9uID0gdGhpcy5tb2RhbENvbmZpcm1TZXJ2aWNlLm1vZGFsQ29uZmlnJC5zdWJzY3JpYmUoXG4gICAgICBjb25maWcgPT4ge1xuICAgICAgICB0aGlzLmNvbmZpZyA9IGNvbmZpZztcbiAgICAgICAgdGhpcy5jb25maWdDaGVja2JveC5sYWJlbCA9IGNvbmZpZy5jaGVja2JveCA/IGNvbmZpZy5jaGVja2JveExhYmVsIDogJyc7XG4gICAgICAgIHRoaXMudmFsdWVDaGVja2JveCA9IGNvbmZpZy5jaGVja2JveFZhbHVlXG4gICAgICAgICAgPyBjb25maWcuY2hlY2tib3hWYWx1ZVxuICAgICAgICAgIDogZmFsc2U7XG4gICAgICB9XG4gICAgKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuY29uZmlnU3Vic2NyaXB0aW9uPy51bnN1YnNjcmliZSgpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6a2V5ZG93bi5lc2NhcGUnLCBbJyRldmVudCddKVxuICBvbkVzY2FwZUtleSgpIHtcbiAgICBpZiAodGhpcy5jb25maWc/LmNoZWNrYm94KSB7XG4gICAgICB0aGlzLmNsb3NlKGZhbHNlLCB0aGlzLnZhbHVlQ2hlY2tib3gpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmNsb3NlKGZhbHNlKTtcbiAgICB9XG4gIH1cblxuICBnZXRJY29uVHlwZSh0eXBlPzogTW9kYWxUeXBlKSB7XG4gICAgY29uc3QgaWNvbiA9IHRoaXMubW9kYWxUeXBlSWNvbi5maWx0ZXIoYWN0aW9uID0+IGFjdGlvbi50eXBlID09IHR5cGUpO1xuICAgIHJldHVybiBpY29uWzBdO1xuICB9XG5cbiAgY2xvc2UocmVzcG9uc2U6IGJvb2xlYW4sIGNoZWNrYm94Q2hlY2tlZDogYm9vbGVhbiA9IGZhbHNlKTogdm9pZCB7XG4gICAgdGhpcy5tb2RhbENvbmZpcm1TZXJ2aWNlLmNsb3NlKHJlc3BvbnNlLCBjaGVja2JveENoZWNrZWQpO1xuICB9XG5cbiAgZ2V0VGV4dEFsaWduQ2xhc3MoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gJ3MtbW9kYWwtY29uZmlybV9fbWVzc2FnZS0tJyArICh0aGlzLmNvbmZpZz8udGV4dEFsaWduID8/ICdsZWZ0Jyk7XG4gIH1cbn1cbiIsIkBpZiAoY29uZmlnLmlzVmlzaWJsZSkge1xuICA8ZGl2IGNsYXNzPVwib3ZlcmxheVwiPlxuICAgIDxkaXYgY2xhc3M9XCJvdmVybGF5X19ncmlkLTEyXCI+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzPVwicy1tb2RhbC1jb25maXJtXCJcbiAgICAgICAgKGNsaWNrKT1cImNsb3NlKGZhbHNlKVwiXG4gICAgICAgIChrZXlkb3duLmVudGVyKT1cImNsb3NlKGZhbHNlKVwiXG4gICAgICAgIHRhYmluZGV4PVwiMFwiPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3M9XCJzLW1vZGFsLWNvbmZpcm1fX2NvbnRlbnRcIlxuICAgICAgICAgIChjbGljayk9XCIkZXZlbnQuc3RvcFByb3BhZ2F0aW9uKClcIlxuICAgICAgICAgIChrZXlkb3duLmVudGVyKT1cIiRldmVudC5zdG9wUHJvcGFnYXRpb24oKVwiXG4gICAgICAgICAgdGFiaW5kZXg9XCIwXCI+XG4gICAgICAgICAgPHNlY3Rpb25cbiAgICAgICAgICAgIGNsYXNzPVwicy1tb2RhbC1jb25maXJtX19oZWFkZXJcIlxuICAgICAgICAgICAgW25nQ2xhc3NdPVwie1xuICAgICAgICAgICAgICAncy1tb2RhbC1jb25maXJtX19oZWFkZXItLXNlY29uZGFyeSc6XG4gICAgICAgICAgICAgICAgY29uZmlnLmJhY2tncm91bmRUeXBlID09PSAnc2Vjb25kYXJ5JyxcbiAgICAgICAgICAgIH1cIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzLW1vZGFsLWNvbmZpcm1fX2hlYWRlci10aXRsZVwiPlxuICAgICAgICAgICAgICA8cy1pY29uLW1hdFxuICAgICAgICAgICAgICAgIHNpemU9XCIyMFwiXG4gICAgICAgICAgICAgICAgW25nQ2xhc3NdPVwiJ3MtbW9kYWwtY29uZmlybV9faWNvbi0nICsgY29uZmlnLnR5cGVcIj5cbiAgICAgICAgICAgICAgICB7eyBnZXRJY29uVHlwZShjb25maWcudHlwZSkuaWNvbiB9fVxuICAgICAgICAgICAgICA8L3MtaWNvbi1tYXQ+XG4gICAgICAgICAgICAgIDxoNCBjbGFzcz1cInMtbW9kYWwtY29uZmlybV9fdGl0bGVcIj5cbiAgICAgICAgICAgICAgICB7eyBjb25maWcudGl0bGUgfX1cbiAgICAgICAgICAgICAgPC9oND5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgQGlmIChjb25maWcuY2FuY2VsVGV4dCkge1xuICAgICAgICAgICAgICA8cy1pY29uLW1hdFxuICAgICAgICAgICAgICAgIHRhYmluZGV4PVwiMFwiXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJzLW1vZGFsLWNvbmZpcm1fX2ljb24tY2xvc2VcIlxuICAgICAgICAgICAgICAgIHNpemU9XCIyMFwiXG4gICAgICAgICAgICAgICAgKGNsaWNrKT1cImNsb3NlKGZhbHNlKVwiPlxuICAgICAgICAgICAgICAgIGNsb3NlXG4gICAgICAgICAgICAgIDwvcy1pY29uLW1hdD5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICA8L3NlY3Rpb24+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cInMtc2Nyb2xsIHMtbW9kYWwtY29uZmlybV9fYm9keVwiPlxuICAgICAgICAgICAgPHAgY2xhc3M9XCJzLW1vZGFsLWNvbmZpcm1fX21lc3NhZ2VcIiBbbmdDbGFzc109XCJnZXRUZXh0QWxpZ25DbGFzcygpXCI+XG4gICAgICAgICAgICAgIHt7IGNvbmZpZy5tZXNzYWdlIH19XG4gICAgICAgICAgICA8L3A+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPHNlY3Rpb25cbiAgICAgICAgICAgIGNsYXNzPVwicy1tb2RhbC1jb25maXJtX19idXR0b25zXCJcbiAgICAgICAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgICAgICAgJ3MtbW9kYWwtY29uZmlybV9fYnV0dG9ucy0tc2Vjb25kYXJ5JzpcbiAgICAgICAgICAgICAgICBjb25maWcuYmFja2dyb3VuZFR5cGUgPT09ICdzZWNvbmRhcnknLFxuICAgICAgICAgICAgfVwiPlxuICAgICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgICAgQGlmIChjb25maWcuY2hlY2tib3gpIHtcbiAgICAgICAgICAgICAgICA8cy1jaGVja2JveFxuICAgICAgICAgICAgICAgICAgW2NvbmZpZ109XCJjb25maWdDaGVja2JveFwiXG4gICAgICAgICAgICAgICAgICBbKG5nTW9kZWwpXT1cInZhbHVlQ2hlY2tib3hcIlxuICAgICAgICAgICAgICAgICAgKG5nTW9kZWxDaGFuZ2UpPVwidmFsdWVDaGVja2JveCA9ICRldmVudFwiPjwvcy1jaGVja2JveD5cbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgICBAaWYgKGNvbmZpZy5jYW5jZWxUZXh0KSB7XG4gICAgICAgICAgICAgICAgPHMtYnV0dG9uXG4gICAgICAgICAgICAgICAgICB0eXBlPVwidGVydGlhcnlcIlxuICAgICAgICAgICAgICAgICAgW3RoZW1lXT1cImdldEljb25UeXBlKGNvbmZpZy50eXBlKS5jb2xvclwiXG4gICAgICAgICAgICAgICAgICAoY2xpY2spPVwiY2xvc2UoZmFsc2UsIHZhbHVlQ2hlY2tib3gpXCJcbiAgICAgICAgICAgICAgICAgIChrZXlkb3duLmVudGVyKT1cImNsb3NlKGZhbHNlLCB2YWx1ZUNoZWNrYm94KVwiPlxuICAgICAgICAgICAgICAgICAge3sgY29uZmlnLmNhbmNlbFRleHQgfX1cbiAgICAgICAgICAgICAgICA8L3MtYnV0dG9uPlxuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgIDxzLWJ1dHRvblxuICAgICAgICAgICAgICAgIFt0aGVtZV09XCJnZXRJY29uVHlwZShjb25maWcudHlwZSkuY29sb3JcIlxuICAgICAgICAgICAgICAgIChjbGljayk9XCJjbG9zZSh0cnVlLCB2YWx1ZUNoZWNrYm94KVwiXG4gICAgICAgICAgICAgICAgKGtleWRvd24uZW50ZXIpPVwiY2xvc2UodHJ1ZSwgdmFsdWVDaGVja2JveClcIj5cbiAgICAgICAgICAgICAgICB7eyBjb25maWcuY29uZmlybVRleHQgfX1cbiAgICAgICAgICAgICAgPC9zLWJ1dHRvbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDwvc2VjdGlvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtY29uZmlybS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaWRlc3lzLWdlbmVyaWMtdWkvc3JjL2xpYi9tb2RhbC9tb2RhbC1jb25maXJtL21vZGFsLWNvbmZpcm0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2lkZXN5cy1nZW5lcmljLXVpL3NyYy9saWIvbW9kYWwvbW9kYWwtY29uZmlybS9tb2RhbC1jb25maXJtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLE1BQU0sR0FHUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUN4RSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFHbkQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDN0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDMUQsT0FBTyxFQUFhLGVBQWUsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzVELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7OztBQXNCN0MsTUFBTSxPQUFPLHNCQUFzQjtJQWJuQztRQWVFLGtCQUFhLEdBQUcsYUFBYSxDQUFDO1FBRTlCLG1CQUFjLEdBQWM7WUFDMUIsY0FBYyxFQUFFLEtBQUs7U0FDdEIsQ0FBQztRQUNGLGtCQUFhLEdBQVksS0FBSyxDQUFDO1FBRWQsd0JBQW1CLEdBQUcsTUFBTSxDQUFDLG9CQUFvQixDQUFDLENBQUM7S0F1Q3JFO0lBckNDLFFBQVE7UUFDTixJQUFJLENBQUMsa0JBQWtCLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDLFlBQVksQ0FBQyxTQUFTLENBQ3ZFLE1BQU0sQ0FBQyxFQUFFO1lBQ1AsSUFBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUM7WUFDckIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO1lBQ3hFLElBQUksQ0FBQyxhQUFhLEdBQUcsTUFBTSxDQUFDLGFBQWE7Z0JBQ3ZDLENBQUMsQ0FBQyxNQUFNLENBQUMsYUFBYTtnQkFDdEIsQ0FBQyxDQUFDLEtBQUssQ0FBQztRQUNaLENBQUMsQ0FDRixDQUFDO0lBQ0osQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsa0JBQWtCLEVBQUUsV0FBVyxFQUFFLENBQUM7SUFDekMsQ0FBQztJQUdELFdBQVc7UUFDVCxJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUUsUUFBUSxFQUFFLENBQUM7WUFDMUIsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQ3hDLENBQUM7YUFBTSxDQUFDO1lBQ04sSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNwQixDQUFDO0lBQ0gsQ0FBQztJQUVELFdBQVcsQ0FBQyxJQUFnQjtRQUMxQixNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxJQUFJLElBQUksSUFBSSxDQUFDLENBQUM7UUFDdEUsT0FBTyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDakIsQ0FBQztJQUVELEtBQUssQ0FBQyxRQUFpQixFQUFFLGtCQUEyQixLQUFLO1FBQ3ZELElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxLQUFLLENBQUMsUUFBUSxFQUFFLGVBQWUsQ0FBQyxDQUFDO0lBQzVELENBQUM7SUFFRCxpQkFBaUI7UUFDZixPQUFPLDRCQUE0QixHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxTQUFTLElBQUksTUFBTSxDQUFDLENBQUM7SUFDM0UsQ0FBQzsrR0EvQ1Usc0JBQXNCO21HQUF0QixzQkFBc0IsdUpDckNuQyw4b0ZBcUVBLHMzRER6Q0ksWUFBWSw0SEFDWixhQUFhLHdNQUNiLG1CQUFtQixvTEFDbkIsZUFBZSwwSkFDZixXQUFXOzs0RkFLRixzQkFBc0I7a0JBYmxDLFNBQVM7K0JBQ0Usa0JBQWtCLGNBQ2hCLElBQUksV0FDUDt3QkFDUCxZQUFZO3dCQUNaLGFBQWE7d0JBQ2IsbUJBQW1CO3dCQUNuQixlQUFlO3dCQUNmLFdBQVc7cUJBQ1o7OEJBZ0NELFdBQVc7c0JBRFYsWUFBWTt1QkFBQyx5QkFBeUIsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgSG9zdExpc3RlbmVyLFxuICBpbmplY3QsXG4gIE9uRGVzdHJveSxcbiAgT25Jbml0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFNNb2RhbENvbmZpcm1TZXJ2aWNlIH0gZnJvbSAnLi9zZXJ2aWNlcy9tb2RhbC1jb25maXJtLnNlcnZpY2UnO1xuaW1wb3J0IHsgTW9kYWxUeXBlSWNvbiB9IGZyb20gJy4vbW9kZWxzL21vZGFsVHlwZSc7XG5pbXBvcnQgeyBTTW9kYWxDb25maXJtQ29uZmlnIH0gZnJvbSAnLi9tb2RlbHMvbW9kYWwtY29uZmlybS5pbnRlcmZhY2UnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgU0J1dHRvbk1vZHVsZSB9IGZyb20gJy4uLy4uL2J1dHRvbic7XG5pbXBvcnQgeyBTSWNvbk1hdGVyaWFsTW9kdWxlIH0gZnJvbSAnLi4vLi4vaWNvbi1tYXRlcmlhbCc7XG5pbXBvcnQgeyBTQ2hlY2tib3gsIFNDaGVja2JveE1vZHVsZSB9IGZyb20gJy4uLy4uL2NoZWNrYm94JztcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5leHBvcnQgdHlwZSBNb2RhbFR5cGUgPSAnYWxlcnQnIHwgJ2Vycm9yJyB8ICdpbmZvJztcblxuZXhwb3J0IHR5cGUgU01vZGFsQ29uZmlybVJlc3BvbnNlID0ge1xuICBjb25maXJtZWQ6IGJvb2xlYW47XG4gIGNoZWNrYm94VmFsdWU/OiBib29sZWFuO1xufTtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncy1tb2RhbC1jb25maXJtLicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgU0J1dHRvbk1vZHVsZSxcbiAgICBTSWNvbk1hdGVyaWFsTW9kdWxlLFxuICAgIFNDaGVja2JveE1vZHVsZSxcbiAgICBGb3Jtc01vZHVsZSxcbiAgXSxcbiAgdGVtcGxhdGVVcmw6ICcuL21vZGFsLWNvbmZpcm0uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9tb2RhbC1jb25maXJtLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFNNb2RhbENvbmZpcm1Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIGNvbmZpZyE6IFNNb2RhbENvbmZpcm1Db25maWc7XG4gIG1vZGFsVHlwZUljb24gPSBNb2RhbFR5cGVJY29uO1xuICBwcml2YXRlIGNvbmZpZ1N1YnNjcmlwdGlvbiE6IFN1YnNjcmlwdGlvbjtcbiAgY29uZmlnQ2hlY2tib3g6IFNDaGVja2JveCA9IHtcbiAgICB1c2VGb3JtQ29udHJvbDogZmFsc2UsXG4gIH07XG4gIHZhbHVlQ2hlY2tib3g6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBwcml2YXRlIHJlYWRvbmx5IG1vZGFsQ29uZmlybVNlcnZpY2UgPSBpbmplY3QoU01vZGFsQ29uZmlybVNlcnZpY2UpO1xuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuY29uZmlnU3Vic2NyaXB0aW9uID0gdGhpcy5tb2RhbENvbmZpcm1TZXJ2aWNlLm1vZGFsQ29uZmlnJC5zdWJzY3JpYmUoXG4gICAgICBjb25maWcgPT4ge1xuICAgICAgICB0aGlzLmNvbmZpZyA9IGNvbmZpZztcbiAgICAgICAgdGhpcy5jb25maWdDaGVja2JveC5sYWJlbCA9IGNvbmZpZy5jaGVja2JveCA/IGNvbmZpZy5jaGVja2JveExhYmVsIDogJyc7XG4gICAgICAgIHRoaXMudmFsdWVDaGVja2JveCA9IGNvbmZpZy5jaGVja2JveFZhbHVlXG4gICAgICAgICAgPyBjb25maWcuY2hlY2tib3hWYWx1ZVxuICAgICAgICAgIDogZmFsc2U7XG4gICAgICB9XG4gICAgKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuY29uZmlnU3Vic2NyaXB0aW9uPy51bnN1YnNjcmliZSgpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6a2V5ZG93bi5lc2NhcGUnLCBbJyRldmVudCddKVxuICBvbkVzY2FwZUtleSgpIHtcbiAgICBpZiAodGhpcy5jb25maWc/LmNoZWNrYm94KSB7XG4gICAgICB0aGlzLmNsb3NlKGZhbHNlLCB0aGlzLnZhbHVlQ2hlY2tib3gpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmNsb3NlKGZhbHNlKTtcbiAgICB9XG4gIH1cblxuICBnZXRJY29uVHlwZSh0eXBlPzogTW9kYWxUeXBlKSB7XG4gICAgY29uc3QgaWNvbiA9IHRoaXMubW9kYWxUeXBlSWNvbi5maWx0ZXIoYWN0aW9uID0+IGFjdGlvbi50eXBlID09IHR5cGUpO1xuICAgIHJldHVybiBpY29uWzBdO1xuICB9XG5cbiAgY2xvc2UocmVzcG9uc2U6IGJvb2xlYW4sIGNoZWNrYm94Q2hlY2tlZDogYm9vbGVhbiA9IGZhbHNlKTogdm9pZCB7XG4gICAgdGhpcy5tb2RhbENvbmZpcm1TZXJ2aWNlLmNsb3NlKHJlc3BvbnNlLCBjaGVja2JveENoZWNrZWQpO1xuICB9XG5cbiAgZ2V0VGV4dEFsaWduQ2xhc3MoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gJ3MtbW9kYWwtY29uZmlybV9fbWVzc2FnZS0tJyArICh0aGlzLmNvbmZpZz8udGV4dEFsaWduID8/ICdsZWZ0Jyk7XG4gIH1cbn1cbiIsIkBpZiAoY29uZmlnLmlzVmlzaWJsZSkge1xuICA8ZGl2IGNsYXNzPVwib3ZlcmxheVwiPlxuICAgIDxkaXYgY2xhc3M9XCJvdmVybGF5X19ncmlkLTEyXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwicy1tb2RhbC1jb25maXJtXCIgKGNsaWNrKT1cImNsb3NlKGZhbHNlKVwiIChrZXlkb3duLmVudGVyKT1cImNsb3NlKGZhbHNlKVwiIHRhYmluZGV4PVwiMFwiPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3M9XCJzLW1vZGFsLWNvbmZpcm1fX2NvbnRlbnRcIlxuICAgICAgICAgIChjbGljayk9XCIkZXZlbnQuc3RvcFByb3BhZ2F0aW9uKClcIlxuICAgICAgICAgIChrZXlkb3duLmVudGVyKT1cIiRldmVudC5zdG9wUHJvcGFnYXRpb24oKVwiXG4gICAgICAgICAgdGFiaW5kZXg9XCIwXCI+XG4gICAgICAgICAgPHNlY3Rpb25cbiAgICAgICAgICAgIGNsYXNzPVwicy1tb2RhbC1jb25maXJtX19oZWFkZXJcIlxuICAgICAgICAgICAgW25nQ2xhc3NdPVwie1xuICAgICAgICAgICAgICAncy1tb2RhbC1jb25maXJtX19oZWFkZXItLXNlY29uZGFyeSc6IGNvbmZpZy5iYWNrZ3JvdW5kVHlwZSA9PT0gJ3NlY29uZGFyeScsXG4gICAgICAgICAgICB9XCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwicy1tb2RhbC1jb25maXJtX19oZWFkZXItdGl0bGVcIj5cbiAgICAgICAgICAgICAgPHMtaWNvbi1tYXQgc2l6ZT1cIm1kXCIgW25nQ2xhc3NdPVwiJ3MtbW9kYWwtY29uZmlybV9faWNvbi0nICsgY29uZmlnLnR5cGVcIj5cbiAgICAgICAgICAgICAgICB7eyBnZXRJY29uVHlwZShjb25maWcudHlwZSkuaWNvbiB9fVxuICAgICAgICAgICAgICA8L3MtaWNvbi1tYXQ+XG4gICAgICAgICAgICAgIDxoNCBjbGFzcz1cInMtbW9kYWwtY29uZmlybV9fdGl0bGVcIj5cbiAgICAgICAgICAgICAgICB7eyBjb25maWcudGl0bGUgfX1cbiAgICAgICAgICAgICAgPC9oND5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgQGlmIChjb25maWcuY2FuY2VsVGV4dCkge1xuICAgICAgICAgICAgICA8cy1pY29uLW1hdCB0YWJpbmRleD1cIjBcIiBjbGFzcz1cInMtbW9kYWwtY29uZmlybV9faWNvbi1jbG9zZVwiIHNpemU9XCJtZFwiIChjbGljayk9XCJjbG9zZShmYWxzZSlcIj5cbiAgICAgICAgICAgICAgICBjbG9zZVxuICAgICAgICAgICAgICA8L3MtaWNvbi1tYXQ+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgPC9zZWN0aW9uPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJzLXNjcm9sbCBzLW1vZGFsLWNvbmZpcm1fX2JvZHlcIj5cbiAgICAgICAgICAgIDxwIGNsYXNzPVwicy1tb2RhbC1jb25maXJtX19tZXNzYWdlXCIgW25nQ2xhc3NdPVwiZ2V0VGV4dEFsaWduQ2xhc3MoKVwiPlxuICAgICAgICAgICAgICB7eyBjb25maWcubWVzc2FnZSB9fVxuICAgICAgICAgICAgPC9wPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxzZWN0aW9uXG4gICAgICAgICAgICBjbGFzcz1cInMtbW9kYWwtY29uZmlybV9fYnV0dG9uc1wiXG4gICAgICAgICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICAgICAgICdzLW1vZGFsLWNvbmZpcm1fX2J1dHRvbnMtLXNlY29uZGFyeSc6IGNvbmZpZy5iYWNrZ3JvdW5kVHlwZSA9PT0gJ3NlY29uZGFyeScsXG4gICAgICAgICAgICB9XCI+XG4gICAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgICBAaWYgKGNvbmZpZy5jaGVja2JveCkge1xuICAgICAgICAgICAgICAgIDxzLWNoZWNrYm94XG4gICAgICAgICAgICAgICAgICBbY29uZmlnXT1cImNvbmZpZ0NoZWNrYm94XCJcbiAgICAgICAgICAgICAgICAgIFsobmdNb2RlbCldPVwidmFsdWVDaGVja2JveFwiXG4gICAgICAgICAgICAgICAgICAobmdNb2RlbENoYW5nZSk9XCJ2YWx1ZUNoZWNrYm94ID0gJGV2ZW50XCI+PC9zLWNoZWNrYm94PlxuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICAgIEBpZiAoY29uZmlnLmNhbmNlbFRleHQpIHtcbiAgICAgICAgICAgICAgICA8cy1idXR0b25cbiAgICAgICAgICAgICAgICAgIHR5cGU9XCJ0ZXJ0aWFyeVwiXG4gICAgICAgICAgICAgICAgICBbdGhlbWVdPVwiZ2V0SWNvblR5cGUoY29uZmlnLnR5cGUpLmNvbG9yXCJcbiAgICAgICAgICAgICAgICAgIChjbGljayk9XCJjbG9zZShmYWxzZSwgdmFsdWVDaGVja2JveClcIlxuICAgICAgICAgICAgICAgICAgKGtleWRvd24uZW50ZXIpPVwiY2xvc2UoZmFsc2UsIHZhbHVlQ2hlY2tib3gpXCI+XG4gICAgICAgICAgICAgICAgICB7eyBjb25maWcuY2FuY2VsVGV4dCB9fVxuICAgICAgICAgICAgICAgIDwvcy1idXR0b24+XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgPHMtYnV0dG9uXG4gICAgICAgICAgICAgICAgW3RoZW1lXT1cImdldEljb25UeXBlKGNvbmZpZy50eXBlKS5jb2xvclwiXG4gICAgICAgICAgICAgICAgKGNsaWNrKT1cImNsb3NlKHRydWUsIHZhbHVlQ2hlY2tib3gpXCJcbiAgICAgICAgICAgICAgICAoa2V5ZG93bi5lbnRlcik9XCJjbG9zZSh0cnVlLCB2YWx1ZUNoZWNrYm94KVwiPlxuICAgICAgICAgICAgICAgIHt7IGNvbmZpZy5jb25maXJtVGV4dCB9fVxuICAgICAgICAgICAgICA8L3MtYnV0dG9uPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPC9zZWN0aW9uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbn1cbiJdfQ==

package/esm2022/lib/navbar/components/icon-menu/components/s-notificaction.component.mjs

@@ -22,7 +22,7 @@ export class SNotificationComponent {
         this.clickTitle.emit(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SNotificationComponent, selector: "s-notification", inputs: { item: "item" }, outputs: { clickUnread: "clickUnread", clickDelete: "clickDelete", clickTitle: "clickTitle" }, ngImport: i0, template: "<div class=\"s-notification\">\n    <div class=\"s-notification__item\">\n        <div class=\"s-notification__item--left\">\n            <div class=\"s-notification__item--left__content-icon\">\n                <s-icon-mat>{{item.icon}}</s-icon-mat>\n            </div>\n            <div class=\"s-notification__item--left__content-text\">\n                <div class=\"fix-align\">\n                    <p (click)=\"_clickTitle(item)\" class=\"title cursor\">{{item.title}}</p>\n                    <span *ngIf=\"item.description\" class=\"description\">{{item.description}}</span>\n                    <span *ngIf=\"!item.description\" class=\"description\"></span>\n                </div>\n                <div>\n                    <s-tag size=\"sm\">\n                        <s-icon-mat>{{item.icon}}</s-icon-mat>\n                        {{item.subtitle}}\n                    </s-tag>\n                </div>\n            </div>\n        </div>\n        <div class=\"s-notification__item--right\">\n            <div class=\"s-notification__ite--right__content-icon\">\n                <div *ngIf=\"item.seen\" class=\"icon-unread read\" [tooltip]=\"readNotification\">\n                    <s-icon-mat>mark_email_read</s-icon-mat>\n                </div>\n                <s-tooltip position=\"left\" #readNotification [title]=\"'Le\u00EDdo'\" ></s-tooltip>\n                <div *ngIf=\"!item.seen\" class=\"icon-unread cursor\" (click)=\"_clickUnread(item.id)\" [tooltip]=\"unreadNotification\">\n                    <s-icon-mat>mark_email_unread</s-icon-mat>\n                </div>\n                <s-tooltip position=\"left\" #unreadNotification [title]=\"'Marcar como le\u00EDdo'\" ></s-tooltip>\n                <div class=\"icon-close cursor\" (click)=\"_clickDelete(item.id)\" [tooltip]=\"deleteNotification\">\n                    <s-icon-mat>close</s-icon-mat>\n                </div>\n                <s-tooltip position=\"left\" #deleteNotification [title]=\"'Eliminar notificaci\u00F3n'\" ></s-tooltip>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".s-notification__item:hover{background-color:var(--neutrals-1100)}.s-notification__item{background-color:var(--neutrals-1200);height:4.063rem;padding:.813rem 1.25rem .813rem .75rem;display:flex;justify-content:space-between;border-top:.031rem solid var(--neutrals-700)}.s-notification__item--left{display:flex;align-items:flex-start}.s-notification__item--left__content-icon s-icon-mat span{color:var(--primary-600);font-size:2rem}.s-notification__item--left__content-text{margin-left:.375rem;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.s-notification__item--left__content-text .title{color:var(--secondary-600);font-size:.875rem;font-weight:700;margin-bottom:0rem;overflow:hidden;max-height:1.25rem}.s-notification__item--left__content-text .description{color:var(--secondary-500);font-size:.75rem;font-weight:400;max-height:1.25rem;overflow:hidden}.s-notification__item--left__content-text .fix-align{text-align:left;width:100%;display:grid}.s-notification__item--right{display:flex;flex-direction:column;justify-content:space-between}.s-notification__item--right__content-icon{display:flex;flex-direction:column}.s-notification__item--right__content-icon .icon-unread s-icon-mat span{font-size:1.063rem;color:var(--secondary-600)}.s-notification__item--right__content-icon .icon-unread.read{cursor:default}.s-notification__item--right__content-icon .icon-unread.read s-icon-mat span{color:var(--primary-600)}.s-notification__item--right__content-icon .icon-close{margin-top:.563rem}.s-notification__item--right__content-icon .icon-close s-icon-mat span{font-size:1rem;color:var(--red-600)}.s-notification__item--right__content-icon a{text-decoration:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: i3.STagComponent, selector: "s-tag", inputs: ["type", "size", "disabled"] }, { kind: "component", type: i4.STooltipComponent, selector: "s-tooltip", inputs: ["title", "description", "theme", "position"] }, { kind: "directive", type: i5.CustomTooltipDirective, selector: "[tooltip]", inputs: ["tooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SNotificationComponent, selector: "s-notification", inputs: { item: "item" }, outputs: { clickUnread: "clickUnread", clickDelete: "clickDelete", clickTitle: "clickTitle" }, ngImport: i0, template: "<div class=\"s-notification\">\n    <div class=\"s-notification__item\">\n        <div class=\"s-notification__item--left\">\n            <div class=\"s-notification__item--left__content-icon\">\n                <s-icon-mat>{{item.icon}}</s-icon-mat>\n            </div>\n            <div class=\"s-notification__item--left__content-text\">\n                <div class=\"fix-align\">\n                    <p (click)=\"_clickTitle(item)\" class=\"title cursor\">{{item.title}}</p>\n                    <span *ngIf=\"item.description\" class=\"description\">{{item.description}}</span>\n                    <span *ngIf=\"!item.description\" class=\"description\"></span>\n                </div>\n                <div>\n                    <s-tag size=\"sm\">\n                        <s-icon-mat>{{item.icon}}</s-icon-mat>\n                        {{item.subtitle}}\n                    </s-tag>\n                </div>\n            </div>\n        </div>\n        <div class=\"s-notification__item--right\">\n            <div class=\"s-notification__ite--right__content-icon\">\n                <div *ngIf=\"item.seen\" class=\"icon-unread read\" [tooltip]=\"readNotification\">\n                    <s-icon-mat>mark_email_read</s-icon-mat>\n                </div>\n                <s-tooltip position=\"left\" #readNotification [title]=\"'Le\u00EDdo'\" ></s-tooltip>\n                <div *ngIf=\"!item.seen\" class=\"icon-unread cursor\" (click)=\"_clickUnread(item.id)\" [tooltip]=\"unreadNotification\">\n                    <s-icon-mat>mark_email_unread</s-icon-mat>\n                </div>\n                <s-tooltip position=\"left\" #unreadNotification [title]=\"'Marcar como le\u00EDdo'\" ></s-tooltip>\n                <div class=\"icon-close cursor\" (click)=\"_clickDelete(item.id)\" [tooltip]=\"deleteNotification\">\n                    <s-icon-mat>close</s-icon-mat>\n                </div>\n                <s-tooltip position=\"left\" #deleteNotification [title]=\"'Eliminar notificaci\u00F3n'\" ></s-tooltip>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".s-notification__item:hover{background-color:var(--neutrals-1100)}.s-notification__item{background-color:var(--neutrals-1200);height:4.063rem;padding:.813rem 1.25rem .813rem .75rem;display:flex;justify-content:space-between;border-top:.031rem solid var(--neutrals-700)}.s-notification__item--left{display:flex;align-items:flex-start}.s-notification__item--left__content-icon s-icon-mat span{color:var(--primary-600);font-size:2rem}.s-notification__item--left__content-text{margin-left:.375rem;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.s-notification__item--left__content-text .title{color:var(--secondary-600);font-size:.875rem;font-weight:700;margin-bottom:0rem;overflow:hidden;max-height:1.25rem}.s-notification__item--left__content-text .description{color:var(--secondary-500);font-size:.75rem;font-weight:400;max-height:1.25rem;overflow:hidden}.s-notification__item--left__content-text .fix-align{text-align:left;width:100%;display:grid}.s-notification__item--right{display:flex;flex-direction:column;justify-content:space-between}.s-notification__item--right__content-icon{display:flex;flex-direction:column}.s-notification__item--right__content-icon .icon-unread s-icon-mat span{font-size:1.063rem;color:var(--secondary-600)}.s-notification__item--right__content-icon .icon-unread.read{cursor:default}.s-notification__item--right__content-icon .icon-unread.read s-icon-mat span{color:var(--primary-600)}.s-notification__item--right__content-icon .icon-close{margin-top:.563rem}.s-notification__item--right__content-icon .icon-close s-icon-mat span{font-size:1rem;color:var(--red-600)}.s-notification__item--right__content-icon a{text-decoration:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "style", "type"] }, { kind: "component", type: i3.STagComponent, selector: "s-tag", inputs: ["type", "size", "disabled"] }, { kind: "component", type: i4.STooltipComponent, selector: "s-tooltip", inputs: ["title", "description", "theme", "position"] }, { kind: "directive", type: i5.CustomTooltipDirective, selector: "[tooltip]", inputs: ["tooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SNotificationComponent, decorators: [{
             type: Component,