sidesys-generic-ui 2.2.2 → 2.3.0

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

@@ -9,11 +9,11 @@ export class SCollapseComponent {
         this.arrowClick = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SCollapseComponent, selector: "s-collapse", inputs: { title: "title", subtitle: "subtitle", expand: "expand" }, outputs: { arrowClick: "arrowClick" }, ngImport: i0, template: "<div class=\"s-collapse\">\n    <div class=\"s-collapse__header\" [ngClass]=\"expand ? 'open' : 'close'\">\n        <div class=\"s-collapse__header__title\">\n            <span class=\"s-collapse__header__title__text\">{{title}}</span>\n            <span class=\"s-collapse__header__title__subtext\" *ngIf=\"subtitle\">{{subtitle}}</span>\n        </div>\n        <div class=\"s-collapse__header__arrow\">\n            <div class=\"s-collapse__header__arrow__content no-select\" [ngClass]=\"expand ? 'open' : 'close'\" tabindex=\"0\" (keydown.enter)=\"arrowClick.emit(!expand)\" (click)=\"arrowClick.emit(!expand)\">\n                <s-icon-mat size=\"16\" class=\"s-collapse__header__arrow__content__icon\">chevron_right</s-icon-mat>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"s-collapse__body\" [ngClass]=\"expand ? 'open' : 'close'\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".s-collapse{border:1px solid var(--neutrals-900);border-radius:4px;margin:5px 0}.s-collapse__header{display:grid;grid-template-columns:90fr 5fr;gap:10px;padding:10px;border-top-left-radius:4px}.s-collapse__header.open{border-left:4px solid var(--primary-600)}.s-collapse__header.close{border-left:4px solid transparent}.s-collapse__header__title{display:flex;flex-direction:column}.s-collapse__header__title__text{color:var(--secondary-600);font-size:16px;font-weight:700}.s-collapse__header__title__subtext{color:var(--primary-600);font-size:12px}.s-collapse__header__arrow{display:flex;align-items:center;justify-content:center}.s-collapse__header__arrow__content{cursor:pointer;border-radius:4px;background-color:var(--primary-100);color:var(--primary-600);padding:5px}.s-collapse__header__arrow__content:hover{background-color:var(--primary-300)}.s-collapse__header__arrow__content.close{transform:rotate(90deg)}.s-collapse__header__arrow__content.open{transform:rotate(270deg)}.s-collapse__body{border-bottom-left-radius:4px}.s-collapse__body.open{display:block;border-left:4px solid var(--primary-600)}.s-collapse__body.close{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: SCollapseComponent, selector: "s-collapse", inputs: { title: "title", subtitle: "subtitle", expand: "expand" }, outputs: { arrowClick: "arrowClick" }, ngImport: i0, template: "<div class=\"s-collapse\">\n    <div class=\"s-collapse__header\" [ngClass]=\"expand ? 'open' : 'close'\">\n        <div class=\"s-collapse__header__title\">\n            <span class=\"s-collapse__header__title__text\">{{title}}</span>\n            <span class=\"s-collapse__header__title__subtext\" *ngIf=\"subtitle\">{{subtitle}}</span>\n        </div>\n        <div class=\"s-collapse__header__arrow\">\n            <div class=\"s-collapse__header__arrow__content no-select\" [ngClass]=\"expand ? 'open' : 'close'\" tabindex=\"0\" (keydown.enter)=\"arrowClick.emit(!expand)\" (click)=\"arrowClick.emit(!expand)\">\n                <s-icon-mat size=\"16\" class=\"s-collapse__header__arrow__content__icon\">chevron_right</s-icon-mat>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"s-collapse__body\" [ngClass]=\"expand ? 'open' : 'close'\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".s-collapse{border:.063rem solid var(--neutrals-900);border-radius:.25rem;margin:.313rem 0}.s-collapse__header{display:grid;grid-template-columns:90fr 5fr;gap:.625rem;padding:.625rem;border-top-left-radius:.25rem}.s-collapse__header.open{border-left:.25rem solid var(--primary-600)}.s-collapse__header.close{border-left:.25rem solid transparent}.s-collapse__header__title{display:flex;flex-direction:column}.s-collapse__header__title__text{color:var(--secondary-600);font-size:1rem;font-weight:700}.s-collapse__header__title__subtext{color:var(--primary-600);font-size:.75rem}.s-collapse__header__arrow{display:flex;align-items:center;justify-content:center}.s-collapse__header__arrow__content{cursor:pointer;border-radius:.25rem;background-color:var(--primary-100);color:var(--primary-600);padding:.313rem}.s-collapse__header__arrow__content:hover{background-color:var(--primary-300)}.s-collapse__header__arrow__content.close{transform:rotate(90deg)}.s-collapse__header__arrow__content.open{transform:rotate(270deg)}.s-collapse__body{border-bottom-left-radius:.25rem}.s-collapse__body.open{display:block;border-left:.25rem solid var(--primary-600)}.s-collapse__body.close{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SCollapseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-collapse', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-collapse\">\n    <div class=\"s-collapse__header\" [ngClass]=\"expand ? 'open' : 'close'\">\n        <div class=\"s-collapse__header__title\">\n            <span class=\"s-collapse__header__title__text\">{{title}}</span>\n            <span class=\"s-collapse__header__title__subtext\" *ngIf=\"subtitle\">{{subtitle}}</span>\n        </div>\n        <div class=\"s-collapse__header__arrow\">\n            <div class=\"s-collapse__header__arrow__content no-select\" [ngClass]=\"expand ? 'open' : 'close'\" tabindex=\"0\" (keydown.enter)=\"arrowClick.emit(!expand)\" (click)=\"arrowClick.emit(!expand)\">\n                <s-icon-mat size=\"16\" class=\"s-collapse__header__arrow__content__icon\">chevron_right</s-icon-mat>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"s-collapse__body\" [ngClass]=\"expand ? 'open' : 'close'\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".s-collapse{border:1px solid var(--neutrals-900);border-radius:4px;margin:5px 0}.s-collapse__header{display:grid;grid-template-columns:90fr 5fr;gap:10px;padding:10px;border-top-left-radius:4px}.s-collapse__header.open{border-left:4px solid var(--primary-600)}.s-collapse__header.close{border-left:4px solid transparent}.s-collapse__header__title{display:flex;flex-direction:column}.s-collapse__header__title__text{color:var(--secondary-600);font-size:16px;font-weight:700}.s-collapse__header__title__subtext{color:var(--primary-600);font-size:12px}.s-collapse__header__arrow{display:flex;align-items:center;justify-content:center}.s-collapse__header__arrow__content{cursor:pointer;border-radius:4px;background-color:var(--primary-100);color:var(--primary-600);padding:5px}.s-collapse__header__arrow__content:hover{background-color:var(--primary-300)}.s-collapse__header__arrow__content.close{transform:rotate(90deg)}.s-collapse__header__arrow__content.open{transform:rotate(270deg)}.s-collapse__body{border-bottom-left-radius:4px}.s-collapse__body.open{display:block;border-left:4px solid var(--primary-600)}.s-collapse__body.close{display:none}\n"] }]
+            args: [{ selector: 's-collapse', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-collapse\">\n    <div class=\"s-collapse__header\" [ngClass]=\"expand ? 'open' : 'close'\">\n        <div class=\"s-collapse__header__title\">\n            <span class=\"s-collapse__header__title__text\">{{title}}</span>\n            <span class=\"s-collapse__header__title__subtext\" *ngIf=\"subtitle\">{{subtitle}}</span>\n        </div>\n        <div class=\"s-collapse__header__arrow\">\n            <div class=\"s-collapse__header__arrow__content no-select\" [ngClass]=\"expand ? 'open' : 'close'\" tabindex=\"0\" (keydown.enter)=\"arrowClick.emit(!expand)\" (click)=\"arrowClick.emit(!expand)\">\n                <s-icon-mat size=\"16\" class=\"s-collapse__header__arrow__content__icon\">chevron_right</s-icon-mat>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"s-collapse__body\" [ngClass]=\"expand ? 'open' : 'close'\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".s-collapse{border:.063rem solid var(--neutrals-900);border-radius:.25rem;margin:.313rem 0}.s-collapse__header{display:grid;grid-template-columns:90fr 5fr;gap:.625rem;padding:.625rem;border-top-left-radius:.25rem}.s-collapse__header.open{border-left:.25rem solid var(--primary-600)}.s-collapse__header.close{border-left:.25rem solid transparent}.s-collapse__header__title{display:flex;flex-direction:column}.s-collapse__header__title__text{color:var(--secondary-600);font-size:1rem;font-weight:700}.s-collapse__header__title__subtext{color:var(--primary-600);font-size:.75rem}.s-collapse__header__arrow{display:flex;align-items:center;justify-content:center}.s-collapse__header__arrow__content{cursor:pointer;border-radius:.25rem;background-color:var(--primary-100);color:var(--primary-600);padding:.313rem}.s-collapse__header__arrow__content:hover{background-color:var(--primary-300)}.s-collapse__header__arrow__content.close{transform:rotate(90deg)}.s-collapse__header__arrow__content.open{transform:rotate(270deg)}.s-collapse__body{border-bottom-left-radius:.25rem}.s-collapse__body.open{display:block;border-left:.25rem solid var(--primary-600)}.s-collapse__body.close{display:none}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], subtitle: [{

package/esm2022/lib/dynamic-form/s-dynamic-form.component.mjs

@@ -353,7 +353,7 @@ export class SDynamicFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SDynamicFormComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SDynamicFormComponent, selector: "s-dynamic-form", inputs: { setFormData: "setFormData", layout: "layout", readOnly: "readOnly", formFilled: "formFilled" }, outputs: { getFormDataEvent: "getFormDataEvent", formCompletedEvent: "formCompletedEvent", blurEvent: "blurEvent", onchageStatusEvent: "onchageStatusEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class='s-dynamic-form'>\n    <div *ngIf=\"loading\">\n        <div *ngIf=\"groupTemplatesSelectItems.length > 0\">\n            <form [formGroup]=\"formGroup\" (blur)=\"onFormBlur()\">\n                <div *ngFor=\"let item of groupTemplatesSelectItems\">\n                    <h6>{{item.label}}</h6>\n                    <div class=\"s-dynamic-form__hr\"></div>\n                    <div *ngFor=\"let itemField of item.listGroupFields; let i = index;\">\n                        <div\n                            *ngIf=\"itemField.field.dataType.type == 'input' && itemField.field.defaultBehavior.name != behaviorTypes.Hide\">\n                            <div class=\"s-dynamic-form__container\">\n                                <s-input formControlName=\"{{itemField.field.code}}\" (blur)=\"onFormBlur()\"\n                                    [config]=\"getInputConfig(itemField)\">\n                                </s-input>\n                            </div>\n                        </div>\n                        <div\n                            *ngIf=\"itemField.field.dataType.type == 'select' && itemField.field.defaultBehavior.name != behaviorTypes.Hide\">\n                            <div class=\"s-dynamic-form__container\">\n                                <div>\n                                    <s-select-old formControlName=\"{{itemField.field.code}}\"\n                                        [label]=\"itemField.mandatory ? itemField.field.label + ' *' : itemField.field.label\"\n                                        [placeholder]=\"itemField.field.hintText\"\n                                        [options]=\"optionsMap[itemField.field.id]\"\n                                        [selectedValue]=\"itemField.field.defaultValue\"\n                                        (selectEvent)=\"selectedSelect($event, itemField.field.code)\"\n                                        [readOnly]=\"readOnly.valueOf()\"\n                                        (focus)=\"onSelectFocus(itemField.field.code)\"\n                                        (blur)=\"onSelectBlur(itemField); onFormBlur()\" tabindex=\"0\">\n                                        </s-select-old>\n                                      <!-- Muestra el mensaje de error si no se seleccion\u00F3 ninguna opci\u00F3n y es requerido -->\n                                    <div *ngIf=\"shouldShowError(itemField)\">\n                                        <s-error-control [theme]=\"'red'\">\n                                            {{ itemField.mandatory ? errorMessagesRequired : itemField.field.helpText }}\n                                        </s-error-control>\n                                    </div>\n\n                                    <!-- Muestra el helpText solo si no hay error -->\n                                    <div *ngIf=\"!shouldShowError(itemField)\">\n                                        <s-error-control>\n                                            {{ itemField.field.helpText }}\n                                        </s-error-control>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n    <div *ngIf=\"!loading\">\n        <h4>Cargando...</h4>\n        <s-spinner></s-spinner>\n    </div>\n</div>", styles: [".s-dynamic-form__hr{width:auto;height:.12rem;border-top:.12rem solid var(--primary-800);margin-bottom:1rem}.s-dynamic-form__container{margin-bottom:1rem}.s-dynamic-form__title-form{margin-bottom:1rem;color:var(--primary-600)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: i4.SInputComponent, selector: "s-input", inputs: ["config"], outputs: ["clickHelpIconEvent", "blur", "focus"] }, { kind: "component", type: i5.SSelectSimpleComponent, selector: "s-select-old", inputs: ["disabled", "placeholder", "options", "selectedValue", "label", "readOnly", "display", "size"], outputs: ["selectEvent", "blur", "focus"] }, { kind: "component", type: i6.SSpinnerComponent, selector: "s-spinner", inputs: ["type", "size", "invert", "expand"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SDynamicFormComponent, selector: "s-dynamic-form", inputs: { setFormData: "setFormData", layout: "layout", readOnly: "readOnly", formFilled: "formFilled" }, outputs: { getFormDataEvent: "getFormDataEvent", formCompletedEvent: "formCompletedEvent", blurEvent: "blurEvent", onchageStatusEvent: "onchageStatusEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class='s-dynamic-form'>\n    <div *ngIf=\"loading\">\n        <div *ngIf=\"groupTemplatesSelectItems.length > 0\">\n            <form [formGroup]=\"formGroup\" (blur)=\"onFormBlur()\">\n                <div *ngFor=\"let item of groupTemplatesSelectItems\">\n                    <h6>{{item.label}}</h6>\n                    <div class=\"s-dynamic-form__hr\"></div>\n                    <div *ngFor=\"let itemField of item.listGroupFields; let i = index;\">\n                        <div\n                            *ngIf=\"itemField.field.dataType.type == 'input' && itemField.field.defaultBehavior.name != behaviorTypes.Hide\">\n                            <div class=\"s-dynamic-form__container\">\n                                <s-input formControlName=\"{{itemField.field.code}}\" (blur)=\"onFormBlur()\"\n                                    [config]=\"getInputConfig(itemField)\">\n                                </s-input>\n                            </div>\n                        </div>\n                        <div\n                            *ngIf=\"itemField.field.dataType.type == 'select' && itemField.field.defaultBehavior.name != behaviorTypes.Hide\">\n                            <div class=\"s-dynamic-form__container\">\n                                <div>\n                                    <s-select-old formControlName=\"{{itemField.field.code}}\"\n                                        [label]=\"itemField.mandatory ? itemField.field.label + ' *' : itemField.field.label\"\n                                        [placeholder]=\"itemField.field.hintText\"\n                                        [options]=\"optionsMap[itemField.field.id]\"\n                                        [selectedValue]=\"itemField.field.defaultValue\"\n                                        (selectEvent)=\"selectedSelect($event, itemField.field.code)\"\n                                        [readOnly]=\"readOnly.valueOf()\"\n                                        (focus)=\"onSelectFocus(itemField.field.code)\"\n                                        (blur)=\"onSelectBlur(itemField); onFormBlur()\" tabindex=\"0\">\n                                        </s-select-old>\n                                      <!-- Muestra el mensaje de error si no se seleccion\u00F3 ninguna opci\u00F3n y es requerido -->\n                                    <div *ngIf=\"shouldShowError(itemField)\">\n                                        <s-error-control [theme]=\"'red'\">\n                                            {{ itemField.mandatory ? errorMessagesRequired : itemField.field.helpText }}\n                                        </s-error-control>\n                                    </div>\n\n                                    <!-- Muestra el helpText solo si no hay error -->\n                                    <div *ngIf=\"!shouldShowError(itemField)\">\n                                        <s-error-control>\n                                            {{ itemField.field.helpText }}\n                                        </s-error-control>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n    <div *ngIf=\"!loading\">\n        <h4>Cargando...</h4>\n        <s-spinner></s-spinner>\n    </div>\n</div>", styles: [".s-dynamic-form__hr{width:auto;height:.12rem;border-top:.12rem solid var(--primary-800);margin-bottom:1rem}.s-dynamic-form__container{margin-bottom:1rem}.s-dynamic-form__title-form{margin-bottom:1rem;color:var(--primary-600)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: i4.SInputComponent, selector: "s-input", inputs: ["config"], outputs: ["clickHelpIconEvent", "blur", "focus"] }, { kind: "component", type: i5.SSelectSimpleComponent, selector: "s-select-old", inputs: ["disabled", "placeholder", "options", "selectedValue", "label", "readOnly", "display", "size"], outputs: ["selectEvent", "blur", "focus"] }, { kind: "component", type: i6.SSpinnerComponent, selector: "s-spinner", inputs: ["size"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SDynamicFormComponent, decorators: [{
             type: Component,

package/esm2022/lib/dynamic-form/s-dynamic-form.module.mjs

@@ -2,11 +2,9 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SDynamicFormComponent } from './s-dynamic-form.component';
 import { SCompanyLogoModule } from '../company-logo/s-company-logo.module';
-import { HttpClientModule } from '@angular/common/http';
 import { SInputModule } from '../input';
 import { SSelectModule } from '../select';
 import { SSpinnerModule } from '../spinner';
-import { SFormModule } from '../form';
 import { ReactiveFormsModule } from '@angular/forms';
 import { SButtonModule } from '../button';
 import { SCardModule } from '../card';
@@ -15,23 +13,17 @@ export class SDynamicFormModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SDynamicFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SDynamicFormModule, declarations: [SDynamicFormComponent], imports: [CommonModule,
             SCompanyLogoModule,
-            HttpClientModule,
             SInputModule,
             SSelectModule,
             SSpinnerModule,
-            SFormModule,
-            SFormModule,
             SButtonModule,
             ReactiveFormsModule,
             SCardModule], exports: [SDynamicFormComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SDynamicFormModule, imports: [CommonModule,
             SCompanyLogoModule,
-            HttpClientModule,
             SInputModule,
             SSelectModule,
             SSpinnerModule,
-            SFormModule,
-            SFormModule,
             SButtonModule,
             ReactiveFormsModule,
             SCardModule] }); }
@@ -39,25 +31,18 @@ export class SDynamicFormModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SDynamicFormModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SDynamicFormComponent
-                    ],
+                    declarations: [SDynamicFormComponent],
                     imports: [
                         CommonModule,
                         SCompanyLogoModule,
-                        HttpClientModule,
                         SInputModule,
                         SSelectModule,
                         SSpinnerModule,
-                        SFormModule,
-                        SFormModule,
                         SButtonModule,
                         ReactiveFormsModule,
-                        SCardModule
+                        SCardModule,
                     ],
-                    exports: [
-                        SDynamicFormComponent
-                    ]
+                    exports: [SDynamicFormComponent],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy1keW5hbWljLWZvcm0ubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2lkZXN5cy1nZW5lcmljLXVpL3NyYy9saWIvZHluYW1pYy1mb3JtL3MtZHluYW1pYy1mb3JtLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNuRSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQztBQUMzRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN4RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQ3hDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDMUMsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLFlBQVksQ0FBQztBQUM1QyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sU0FBUyxDQUFDO0FBQ3RDLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3JELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDMUMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLFNBQVMsQ0FBQzs7QUF1QnRDLE1BQU0sT0FBTyxrQkFBa0I7K0dBQWxCLGtCQUFrQjtnSEFBbEIsa0JBQWtCLGlCQW5CM0IscUJBQXFCLGFBR3JCLFlBQVk7WUFDWixrQkFBa0I7WUFDbEIsZ0JBQWdCO1lBQ2hCLFlBQVk7WUFDWixhQUFhO1lBQ2IsY0FBYztZQUNkLFdBQVc7WUFDWCxXQUFXO1lBQ1gsYUFBYTtZQUNiLG1CQUFtQjtZQUNuQixXQUFXLGFBR1gscUJBQXFCO2dIQUdaLGtCQUFrQixZQWhCM0IsWUFBWTtZQUNaLGtCQUFrQjtZQUNsQixnQkFBZ0I7WUFDaEIsWUFBWTtZQUNaLGFBQWE7WUFDYixjQUFjO1lBQ2QsV0FBVztZQUNYLFdBQVc7WUFDWCxhQUFhO1lBQ2IsbUJBQW1CO1lBQ25CLFdBQVc7OzRGQU1GLGtCQUFrQjtrQkFyQjlCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFO3dCQUNaLHFCQUFxQjtxQkFDdEI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLFlBQVk7d0JBQ1osa0JBQWtCO3dCQUNsQixnQkFBZ0I7d0JBQ2hCLFlBQVk7d0JBQ1osYUFBYTt3QkFDYixjQUFjO3dCQUNkLFdBQVc7d0JBQ1gsV0FBVzt3QkFDWCxhQUFhO3dCQUNiLG1CQUFtQjt3QkFDbkIsV0FBVztxQkFDWjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AscUJBQXFCO3FCQUN0QjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgU0R5bmFtaWNGb3JtQ29tcG9uZW50IH0gZnJvbSAnLi9zLWR5bmFtaWMtZm9ybS5jb21wb25lbnQnO1xuaW1wb3J0IHsgU0NvbXBhbnlMb2dvTW9kdWxlIH0gZnJvbSAnLi4vY29tcGFueS1sb2dvL3MtY29tcGFueS1sb2dvLm1vZHVsZSc7XG5pbXBvcnQgeyBIdHRwQ2xpZW50TW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uL2h0dHAnO1xuaW1wb3J0IHsgU0lucHV0TW9kdWxlIH0gZnJvbSAnLi4vaW5wdXQnO1xuaW1wb3J0IHsgU1NlbGVjdE1vZHVsZSB9IGZyb20gJy4uL3NlbGVjdCc7XG5pbXBvcnQgeyBTU3Bpbm5lck1vZHVsZSB9IGZyb20gJy4uL3NwaW5uZXInO1xuaW1wb3J0IHsgU0Zvcm1Nb2R1bGUgfSBmcm9tICcuLi9mb3JtJztcbmltcG9ydCB7IFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBTQnV0dG9uTW9kdWxlIH0gZnJvbSAnLi4vYnV0dG9uJztcbmltcG9ydCB7IFNDYXJkTW9kdWxlIH0gZnJvbSAnLi4vY2FyZCc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1xuICAgIFNEeW5hbWljRm9ybUNvbXBvbmVudFxuICBdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIFNDb21wYW55TG9nb01vZHVsZSxcbiAgICBIdHRwQ2xpZW50TW9kdWxlLFxuICAgIFNJbnB1dE1vZHVsZSxcbiAgICBTU2VsZWN0TW9kdWxlLFxuICAgIFNTcGlubmVyTW9kdWxlLCBcbiAgICBTRm9ybU1vZHVsZSxcbiAgICBTRm9ybU1vZHVsZSxcbiAgICBTQnV0dG9uTW9kdWxlLFxuICAgIFJlYWN0aXZlRm9ybXNNb2R1bGUsXG4gICAgU0NhcmRNb2R1bGVcbiAgXSxcbiAgZXhwb3J0czogW1xuICAgIFNEeW5hbWljRm9ybUNvbXBvbmVudFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIFNEeW5hbWljRm9ybU1vZHVsZXsgfVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy1keW5hbWljLWZvcm0ubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2lkZXN5cy1nZW5lcmljLXVpL3NyYy9saWIvZHluYW1pYy1mb3JtL3MtZHluYW1pYy1mb3JtLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNuRSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQztBQUMzRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQ3hDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDMUMsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLFlBQVksQ0FBQztBQUM1QyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNyRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQzFDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxTQUFTLENBQUM7O0FBZ0J0QyxNQUFNLE9BQU8sa0JBQWtCOytHQUFsQixrQkFBa0I7Z0hBQWxCLGtCQUFrQixpQkFiZCxxQkFBcUIsYUFFbEMsWUFBWTtZQUNaLGtCQUFrQjtZQUNsQixZQUFZO1lBQ1osYUFBYTtZQUNiLGNBQWM7WUFDZCxhQUFhO1lBQ2IsbUJBQW1CO1lBQ25CLFdBQVcsYUFFSCxxQkFBcUI7Z0hBRXBCLGtCQUFrQixZQVgzQixZQUFZO1lBQ1osa0JBQWtCO1lBQ2xCLFlBQVk7WUFDWixhQUFhO1lBQ2IsY0FBYztZQUNkLGFBQWE7WUFDYixtQkFBbUI7WUFDbkIsV0FBVzs7NEZBSUYsa0JBQWtCO2tCQWQ5QixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRSxDQUFDLHFCQUFxQixDQUFDO29CQUNyQyxPQUFPLEVBQUU7d0JBQ1AsWUFBWTt3QkFDWixrQkFBa0I7d0JBQ2xCLFlBQVk7d0JBQ1osYUFBYTt3QkFDYixjQUFjO3dCQUNkLGFBQWE7d0JBQ2IsbUJBQW1CO3dCQUNuQixXQUFXO3FCQUNaO29CQUNELE9BQU8sRUFBRSxDQUFDLHFCQUFxQixDQUFDO2lCQUNqQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgU0R5bmFtaWNGb3JtQ29tcG9uZW50IH0gZnJvbSAnLi9zLWR5bmFtaWMtZm9ybS5jb21wb25lbnQnO1xuaW1wb3J0IHsgU0NvbXBhbnlMb2dvTW9kdWxlIH0gZnJvbSAnLi4vY29tcGFueS1sb2dvL3MtY29tcGFueS1sb2dvLm1vZHVsZSc7XG5pbXBvcnQgeyBTSW5wdXRNb2R1bGUgfSBmcm9tICcuLi9pbnB1dCc7XG5pbXBvcnQgeyBTU2VsZWN0TW9kdWxlIH0gZnJvbSAnLi4vc2VsZWN0JztcbmltcG9ydCB7IFNTcGlubmVyTW9kdWxlIH0gZnJvbSAnLi4vc3Bpbm5lcic7XG5pbXBvcnQgeyBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgU0J1dHRvbk1vZHVsZSB9IGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBTQ2FyZE1vZHVsZSB9IGZyb20gJy4uL2NhcmQnO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtTRHluYW1pY0Zvcm1Db21wb25lbnRdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIFNDb21wYW55TG9nb01vZHVsZSxcbiAgICBTSW5wdXRNb2R1bGUsXG4gICAgU1NlbGVjdE1vZHVsZSxcbiAgICBTU3Bpbm5lck1vZHVsZSxcbiAgICBTQnV0dG9uTW9kdWxlLFxuICAgIFJlYWN0aXZlRm9ybXNNb2R1bGUsXG4gICAgU0NhcmRNb2R1bGUsXG4gIF0sXG4gIGV4cG9ydHM6IFtTRHluYW1pY0Zvcm1Db21wb25lbnRdLFxufSlcbmV4cG9ydCBjbGFzcyBTRHluYW1pY0Zvcm1Nb2R1bGUge31cbiJdfQ==

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

@@ -7,11 +7,11 @@ export class SFooterComponent {
         this.developedBy = 'Desarrollado por';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SFooterComponent, selector: "s-footer", inputs: { theme: "theme", developedBy: "developedBy" }, ngImport: i0, template: "<footer class=\"s-footer\" [ngClass]=\"theme ? 'theme-'+theme : ''\">\n    <span class=\"s-footer__text\">{{developedBy}}</span>\n    <s-company-logo [height]=\"23\" [width]=\"70\"></s-company-logo>\n</footer>", styles: [".s-footer{z-index:2;display:flex;justify-content:center;align-items:center;padding:.2rem 0;text-align:center;background:var(--neutrals-1100);position:absolute;bottom:0;left:0;width:100%;color:var(--secondary-600)}.s-footer__text{padding-right:.5rem;font-family:Roboto,sans-serif;font-size:13px}.s-footer.theme-dark{background:var(--primary-900);color:var(--neutrals-1200)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.SCompanyLogoComponent, selector: "s-company-logo", inputs: ["width", "height", "customImage"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SFooterComponent, selector: "s-footer", inputs: { theme: "theme", developedBy: "developedBy" }, ngImport: i0, template: "<footer class=\"s-footer\" [ngClass]=\"theme ? 'theme-'+theme : ''\">\n    <span class=\"s-footer__text\">{{developedBy}}</span>\n    <s-company-logo [height]=\"23\" [width]=\"70\"></s-company-logo>\n</footer>", styles: [".s-footer{z-index:2;display:flex;justify-content:center;align-items:center;padding:.2rem 0;text-align:center;background:var(--neutrals-1100);position:absolute;bottom:0;left:0;width:100%;color:var(--secondary-600)}.s-footer__text{padding-right:.5rem;font-family:Roboto,sans-serif;font-size:.813rem}.s-footer.theme-dark{background:var(--primary-900);color:var(--neutrals-1200)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.SCompanyLogoComponent, selector: "s-company-logo", inputs: ["width", "height", "customImage"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-footer', template: "<footer class=\"s-footer\" [ngClass]=\"theme ? 'theme-'+theme : ''\">\n    <span class=\"s-footer__text\">{{developedBy}}</span>\n    <s-company-logo [height]=\"23\" [width]=\"70\"></s-company-logo>\n</footer>", styles: [".s-footer{z-index:2;display:flex;justify-content:center;align-items:center;padding:.2rem 0;text-align:center;background:var(--neutrals-1100);position:absolute;bottom:0;left:0;width:100%;color:var(--secondary-600)}.s-footer__text{padding-right:.5rem;font-family:Roboto,sans-serif;font-size:13px}.s-footer.theme-dark{background:var(--primary-900);color:var(--neutrals-1200)}\n"] }]
+            args: [{ selector: 's-footer', template: "<footer class=\"s-footer\" [ngClass]=\"theme ? 'theme-'+theme : ''\">\n    <span class=\"s-footer__text\">{{developedBy}}</span>\n    <s-company-logo [height]=\"23\" [width]=\"70\"></s-company-logo>\n</footer>", styles: [".s-footer{z-index:2;display:flex;justify-content:center;align-items:center;padding:.2rem 0;text-align:center;background:var(--neutrals-1100);position:absolute;bottom:0;left:0;width:100%;color:var(--secondary-600)}.s-footer__text{padding-right:.5rem;font-family:Roboto,sans-serif;font-size:.813rem}.s-footer.theme-dark{background:var(--primary-900);color:var(--neutrals-1200)}\n"] }]
         }], propDecorators: { theme: [{
                 type: Input
             }], developedBy: [{

package/esm2022/lib/grid-multi-inputs/components/grid-multi-inputs-toolbar-top/grid-multi-inputs-toolbar-top.component.mjs

@@ -3,11 +3,11 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 export class GridMultiInputsToolbarTopComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GridMultiInputsToolbarTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GridMultiInputsToolbarTopComponent, selector: "s-grid-multi-toolbar-top", inputs: { config: "config" }, ngImport: i0, template: "<section class=\"s-toolbar-top\">\n  <section class=\"s-toolbar-top__content\">\n    <div class=\"s-toolbar-top__section\">\n      <h3 *ngIf=\"config.title\" class=\"s-toolbar-top__title\">\n        {{ config.title }}\n      </h3>\n      <div class=\"s-toolbar-top__section--line\"></div>\n    </div>\n  </section>\n</section>\n", styles: [".s-toolbar-top{color:var(--secondary-700);min-width:0;word-wrap:break-word;background-color:var(--neutrals-1200);border-radius:.5rem .5rem 0 0;border-bottom:.5px solid var(--secondary-300)}.s-toolbar-top__content{background-clip:border-box;display:flex;justify-content:space-between;padding:1rem;position:relative;gap:1.25rem;flex-wrap:wrap}.s-toolbar-top__section{align-items:center;display:flex;gap:1rem;text-align:center;flex:1 1 100%;flex-wrap:wrap}.s-toolbar-top__section--line{width:1px;height:2rem;background-color:var(--neutrals-700)}.s-toolbar-top__title{background-color:var(--primary-100);border-radius:.25rem;font-size:.875rem;font-weight:700;padding:.1rem .75rem;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GridMultiInputsToolbarTopComponent, selector: "s-grid-multi-toolbar-top", inputs: { config: "config" }, ngImport: i0, template: "<section class=\"s-toolbar-top\">\n  <section class=\"s-toolbar-top__content\">\n    <div class=\"s-toolbar-top__section\">\n      <h3 *ngIf=\"config.title\" class=\"s-toolbar-top__title\">\n        {{ config.title }}\n      </h3>\n      <div class=\"s-toolbar-top__section--line\"></div>\n    </div>\n  </section>\n</section>\n", styles: [".s-toolbar-top{color:var(--secondary-700);min-width:0;word-wrap:break-word;background-color:var(--neutrals-1200);border-radius:.5rem .5rem 0 0;border-bottom:.031rem solid var(--secondary-300)}.s-toolbar-top__content{background-clip:border-box;display:flex;justify-content:space-between;padding:1rem;position:relative;gap:1.25rem;flex-wrap:wrap}.s-toolbar-top__section{align-items:center;display:flex;gap:1rem;text-align:center;flex:1 1 100%;flex-wrap:wrap}.s-toolbar-top__section--line{width:.063rem;height:2rem;background-color:var(--neutrals-700)}.s-toolbar-top__title{background-color:var(--primary-100);border-radius:.25rem;font-size:.875rem;font-weight:700;padding:.1rem .75rem;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GridMultiInputsToolbarTopComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-grid-multi-toolbar-top', template: "<section class=\"s-toolbar-top\">\n  <section class=\"s-toolbar-top__content\">\n    <div class=\"s-toolbar-top__section\">\n      <h3 *ngIf=\"config.title\" class=\"s-toolbar-top__title\">\n        {{ config.title }}\n      </h3>\n      <div class=\"s-toolbar-top__section--line\"></div>\n    </div>\n  </section>\n</section>\n", styles: [".s-toolbar-top{color:var(--secondary-700);min-width:0;word-wrap:break-word;background-color:var(--neutrals-1200);border-radius:.5rem .5rem 0 0;border-bottom:.5px solid var(--secondary-300)}.s-toolbar-top__content{background-clip:border-box;display:flex;justify-content:space-between;padding:1rem;position:relative;gap:1.25rem;flex-wrap:wrap}.s-toolbar-top__section{align-items:center;display:flex;gap:1rem;text-align:center;flex:1 1 100%;flex-wrap:wrap}.s-toolbar-top__section--line{width:1px;height:2rem;background-color:var(--neutrals-700)}.s-toolbar-top__title{background-color:var(--primary-100);border-radius:.25rem;font-size:.875rem;font-weight:700;padding:.1rem .75rem;white-space:nowrap}\n"] }]
+            args: [{ selector: 's-grid-multi-toolbar-top', template: "<section class=\"s-toolbar-top\">\n  <section class=\"s-toolbar-top__content\">\n    <div class=\"s-toolbar-top__section\">\n      <h3 *ngIf=\"config.title\" class=\"s-toolbar-top__title\">\n        {{ config.title }}\n      </h3>\n      <div class=\"s-toolbar-top__section--line\"></div>\n    </div>\n  </section>\n</section>\n", styles: [".s-toolbar-top{color:var(--secondary-700);min-width:0;word-wrap:break-word;background-color:var(--neutrals-1200);border-radius:.5rem .5rem 0 0;border-bottom:.031rem solid var(--secondary-300)}.s-toolbar-top__content{background-clip:border-box;display:flex;justify-content:space-between;padding:1rem;position:relative;gap:1.25rem;flex-wrap:wrap}.s-toolbar-top__section{align-items:center;display:flex;gap:1rem;text-align:center;flex:1 1 100%;flex-wrap:wrap}.s-toolbar-top__section--line{width:.063rem;height:2rem;background-color:var(--neutrals-700)}.s-toolbar-top__title{background-color:var(--primary-100);border-radius:.25rem;font-size:.875rem;font-weight:700;padding:.1rem .75rem;white-space:nowrap}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }] } });

package/esm2022/lib/grid-multi-inputs/grid-multi-inputs.component.mjs

@@ -229,11 +229,11 @@ export class GridMultiInputsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GridMultiInputsComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GridMultiInputsComponent, selector: "s-grid-multi", inputs: { config: "config" }, outputs: { dataChange: "dataChange", customClick: "customClick" }, ngImport: i0, template: "<div class=\"s-grid-multi\">\n  <div class=\"s-grid-multi__toolbar-top\">\n    <s-grid-multi-toolbar-top\n      [config]=\"config.configToolbarTop\"></s-grid-multi-toolbar-top>\n  </div>\n  <div class=\"s-grid-multi__table\">\n    <div class=\"pre-s-tablet s-scroll\">\n      <table class=\"s-tablet\">\n        <thead>\n          <tr>\n            <th\n              *ngFor=\"let column of config.columns; let colIndex = index\"\n              [ngClass]=\"{ 'resizable-th': colIndex === 0 }\">\n              <div\n                class=\"th-head no-select\"\n                [ngClass]=\"column.type === 'append' ? 'th-head--left' : ''\">\n                <!-- Excepci\u00F3n cuando es select all -->\n                <ng-container *ngIf=\"colIndex !== 0; else elseBlock\">\n                  <input\n                    type=\"checkbox\"\n                    [indeterminate]=\"getColumnState(column) === null\"\n                    [checked]=\"getColumnState(column) === true\"\n                    (change)=\"setColumnState(colIndex, $event)\"\n                    *ngIf=\"column.type !== 'append'\" />\n                </ng-container>\n                <ng-template #elseBlock>\n                  <input\n                    type=\"checkbox\"\n                    [indeterminate]=\"getStateAllGrid() === null\"\n                    [checked]=\"getStateAllGrid() === true\"\n                    (change)=\"setAllGridState($event)\" />\n                </ng-template>\n                {{ column.title }}\n                <div\n                  *ngIf=\"colIndex === 0\"\n                  class=\"resizer\"\n                  (mousedown)=\"startResize($event, colIndex)\"></div>\n              </div>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of config.rows; let rowIndex = index\">\n            <!-- Primera celda con t\u00EDtulo de fila -->\n            <td>\n              <div class=\"th-head th-head--left th-head--normal\">\n                <input\n                  type=\"checkbox\"\n                  [indeterminate]=\"getRowState(row) === null\"\n                  [checked]=\"getRowState(row) === true\"\n                  (change)=\"setRowState(rowIndex, $event)\"\n                  *ngIf=\"row.type !== 'append'\" />\n                {{ row.title }}\n              </div>\n            </td>\n            <!-- Celda para la columna custom  -->\n            <td *ngIf=\"config.customColumns\">\n              <div class=\"text-center\">\n                <s-button\n                  type=\"primary\"\n                  [theme]=\"\n                    getButtonTheme(\n                      row.customColumnStatus ? row.customColumnStatus : 1\n                    )\n                  \"\n                  position=\"normal\"\n                  [disabled]=\"row.customColumnStatus === 3 ? true : false\"\n                  (click)=\"onCustomClick(row)\"\n                  (onKeyDown)=\"onCustomClick(row)\">\n                  <s-icon-mat>{{\n                    row.customColumnStatus === 1 ? 'warning' : 'check_circle'\n                  }}</s-icon-mat>\n                  {{ row.customColumnTitle }}</s-button\n                >\n              </div>\n            </td>\n\n            <!-- Resto de las celdas -->\n            <td\n              *ngFor=\"let cell of config.data[rowIndex]; index as cellIndex\"\n              class=\"td-class\"\n              [ngClass]=\"cell.state === null ? 'cell-null' : ''\">\n              <ng-container *ngIf=\"cell.state === true || cell.state === false\">\n                <div class=\"text-center\">\n                  <input\n                    type=\"checkbox\"\n                    (change)=\"onCheckboxChange(rowIndex, cellIndex, cell.state)\"\n                    [(ngModel)]=\"cell.state\" />\n                </div>\n              </ng-container>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</div>\n", styles: [".pre-s-tablet{max-width:100%;overflow-x:auto}.pre-s-tablet .s-tablet{background-color:var(--primary-100);border-collapse:collapse;width:100%}.pre-s-tablet .s-tablet thead{background-color:var(--neutrals-1200);font-weight:700}.pre-s-tablet .s-tablet thead th{vertical-align:middle;color:var(--secondary-600);font-size:.875rem;line-height:1.375rem;letter-spacing:.25px;font-weight:700!important;text-align:left}.pre-s-tablet .s-tablet thead th:last-of-type{text-align:center}.pre-s-tablet .s-tablet__body{background-color:var(--neutrals-1200);color:var(--secondary-600)}.pre-s-tablet .s-tablet__disabled{color:var(--neutrals-700);pointer-events:none}.pre-s-tablet .s-tablet__empty{display:table-caption;caption-side:bottom;width:100%}.pre-s-tablet .s-tablet tbody tr td,.pre-s-tablet .s-tablet thead tr th{padding:.875rem;height:3.5rem;vertical-align:middle;font-size:.875rem}.pre-s-tablet .s-tablet th,.pre-s-tablet .s-tablet td{box-sizing:border-box;border:none;box-shadow:inset 0 -1px 0 var(--neutrals-900)}.pre-s-tablet .s-tablet td,.pre-s-tablet .s-tablet thead tr{height:3.5rem}.pre-s-tablet .s-tablet thead tr th{position:sticky;top:0;background-color:var(--neutrals-1200);z-index:1}.pre-s-tablet .s-tablet__header{display:flex;gap:.5rem;align-items:center}.pre-s-tablet .s-tablet__header__icon{color:var(--primary-600)}.pre-s-tablet .s-tablet__header__icon--standard .s-icon-mat span{color:var(--neutrals-800)}.pre-s-tablet .s-tablet__header--align-left{justify-content:flex-start}.pre-s-tablet .s-tablet__header--align-center{justify-content:center}.pre-s-tablet .s-tablet__header--align-right{justify-content:flex-end}.pre-s-tablet .s-tablet__header__label{color:var(--secondary-500);font-weight:600}.pre-s-tablet .s-tablet__header__select{color:var(--secondary-600);font-weight:700}.s-grid-multi__table .pre-s-tablet .s-tablet{background-color:inherit}.s-grid-multi__table .pre-s-tablet .s-tablet .resizable-th{position:relative}.s-grid-multi__table .pre-s-tablet .s-tablet .resizable-th .th-head{width:200px}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;overflow:hidden}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--left{justify-content:flex-start}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--center{justify-content:center}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--normal{font-weight:400}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head .resizer{position:absolute;right:0;top:10px;width:5px;height:70%;cursor:col-resize;background-color:var(--neutrals-1000);max-width:2px}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head .resizer:hover{background-color:var(--neutrals-300)}.s-grid-multi__table .pre-s-tablet .s-tablet th:first-of-type .th-head{justify-content:flex-start}.s-grid-multi__table .pre-s-tablet .s-tablet .cell-null{background-color:var(--neutrals-1000)!important}.s-grid-multi__table .pre-s-tablet .s-tablet .td-class .s-checkbox{justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "component", type: i4.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: i5.GridMultiInputsToolbarTopComponent, selector: "s-grid-multi-toolbar-top", inputs: ["config"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GridMultiInputsComponent, selector: "s-grid-multi", inputs: { config: "config" }, outputs: { dataChange: "dataChange", customClick: "customClick" }, ngImport: i0, template: "<div class=\"s-grid-multi\">\n  <div class=\"s-grid-multi__toolbar-top\">\n    <s-grid-multi-toolbar-top\n      [config]=\"config.configToolbarTop\"></s-grid-multi-toolbar-top>\n  </div>\n  <div class=\"s-grid-multi__table\">\n    <div class=\"pre-s-tablet s-scroll\">\n      <table class=\"s-tablet\">\n        <thead>\n          <tr>\n            <th\n              *ngFor=\"let column of config.columns; let colIndex = index\"\n              [ngClass]=\"{ 'resizable-th': colIndex === 0 }\">\n              <div\n                class=\"th-head no-select\"\n                [ngClass]=\"column.type === 'append' ? 'th-head--left' : ''\">\n                <!-- Excepci\u00F3n cuando es select all -->\n                <ng-container *ngIf=\"colIndex !== 0; else elseBlock\">\n                  <input\n                    type=\"checkbox\"\n                    [indeterminate]=\"getColumnState(column) === null\"\n                    [checked]=\"getColumnState(column) === true\"\n                    (change)=\"setColumnState(colIndex, $event)\"\n                    *ngIf=\"column.type !== 'append'\" />\n                </ng-container>\n                <ng-template #elseBlock>\n                  <input\n                    type=\"checkbox\"\n                    [indeterminate]=\"getStateAllGrid() === null\"\n                    [checked]=\"getStateAllGrid() === true\"\n                    (change)=\"setAllGridState($event)\" />\n                </ng-template>\n                {{ column.title }}\n                <div\n                  *ngIf=\"colIndex === 0\"\n                  class=\"resizer\"\n                  (mousedown)=\"startResize($event, colIndex)\"></div>\n              </div>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of config.rows; let rowIndex = index\">\n            <!-- Primera celda con t\u00EDtulo de fila -->\n            <td>\n              <div class=\"th-head th-head--left th-head--normal\">\n                <input\n                  type=\"checkbox\"\n                  [indeterminate]=\"getRowState(row) === null\"\n                  [checked]=\"getRowState(row) === true\"\n                  (change)=\"setRowState(rowIndex, $event)\"\n                  *ngIf=\"row.type !== 'append'\" />\n                {{ row.title }}\n              </div>\n            </td>\n            <!-- Celda para la columna custom  -->\n            <td *ngIf=\"config.customColumns\">\n              <div class=\"text-center\">\n                <s-button\n                  type=\"primary\"\n                  [theme]=\"\n                    getButtonTheme(\n                      row.customColumnStatus ? row.customColumnStatus : 1\n                    )\n                  \"\n                  position=\"normal\"\n                  [disabled]=\"row.customColumnStatus === 3 ? true : false\"\n                  (click)=\"onCustomClick(row)\"\n                  (onKeyDown)=\"onCustomClick(row)\">\n                  <s-icon-mat>{{\n                    row.customColumnStatus === 1 ? 'warning' : 'check_circle'\n                  }}</s-icon-mat>\n                  {{ row.customColumnTitle }}</s-button\n                >\n              </div>\n            </td>\n\n            <!-- Resto de las celdas -->\n            <td\n              *ngFor=\"let cell of config.data[rowIndex]; index as cellIndex\"\n              class=\"td-class\"\n              [ngClass]=\"cell.state === null ? 'cell-null' : ''\">\n              <ng-container *ngIf=\"cell.state === true || cell.state === false\">\n                <div class=\"text-center\">\n                  <input\n                    type=\"checkbox\"\n                    (change)=\"onCheckboxChange(rowIndex, cellIndex, cell.state)\"\n                    [(ngModel)]=\"cell.state\" />\n                </div>\n              </ng-container>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</div>\n", styles: [".pre-s-tablet{max-width:100%;overflow-x:auto}.pre-s-tablet .s-tablet{background-color:var(--primary-100);border-collapse:collapse;width:100%}.pre-s-tablet .s-tablet thead{background-color:var(--neutrals-1200);font-weight:700}.pre-s-tablet .s-tablet thead th{vertical-align:middle;color:var(--secondary-600);font-size:.875rem;line-height:1.375rem;letter-spacing:.016rem;font-weight:700!important;text-align:left}.pre-s-tablet .s-tablet thead th:last-of-type{text-align:center}.pre-s-tablet .s-tablet__body{background-color:var(--neutrals-1200);color:var(--secondary-600)}.pre-s-tablet .s-tablet__disabled{color:var(--neutrals-700);pointer-events:none}.pre-s-tablet .s-tablet__empty{display:table-caption;caption-side:bottom;width:100%}.pre-s-tablet .s-tablet tbody tr td,.pre-s-tablet .s-tablet thead tr th{padding:.875rem;height:3.5rem;vertical-align:middle;font-size:.875rem}.pre-s-tablet .s-tablet th,.pre-s-tablet .s-tablet td{box-sizing:border-box;border:none;box-shadow:inset 0 -.063rem 0 var(--neutrals-900)}.pre-s-tablet .s-tablet td,.pre-s-tablet .s-tablet thead tr{height:3.5rem}.pre-s-tablet .s-tablet thead tr th{position:sticky;top:0;background-color:var(--neutrals-1200)}.pre-s-tablet .s-tablet__header{display:flex;gap:.5rem;align-items:center}.pre-s-tablet .s-tablet__header__icon{color:var(--primary-600)}.pre-s-tablet .s-tablet__header__icon--standard .s-icon-mat span{color:var(--neutrals-800)}.pre-s-tablet .s-tablet__header--align-left{justify-content:flex-start}.pre-s-tablet .s-tablet__header--align-center{justify-content:center}.pre-s-tablet .s-tablet__header--align-right{justify-content:flex-end}.pre-s-tablet .s-tablet__header__label{color:var(--secondary-500);font-weight:600}.pre-s-tablet .s-tablet__header__select{color:var(--secondary-600);font-weight:700}.s-grid-multi__table .pre-s-tablet .s-tablet{background-color:inherit}.s-grid-multi__table .pre-s-tablet .s-tablet .resizable-th{position:relative}.s-grid-multi__table .pre-s-tablet .s-tablet .resizable-th .th-head{width:12.5rem}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head{display:flex;align-items:center;justify-content:center;gap:.625rem;font-weight:700;overflow:hidden}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--left{justify-content:flex-start}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--center{justify-content:center}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--normal{font-weight:400}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head .resizer{position:absolute;right:0;top:.625rem;width:.313rem;height:70%;cursor:col-resize;background-color:var(--neutrals-1000);max-width:.125rem}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head .resizer:hover{background-color:var(--neutrals-300)}.s-grid-multi__table .pre-s-tablet .s-tablet th:first-of-type .th-head{justify-content:flex-start}.s-grid-multi__table .pre-s-tablet .s-tablet .cell-null{background-color:var(--neutrals-1000)!important}.s-grid-multi__table .pre-s-tablet .s-tablet .td-class .s-checkbox{justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "component", type: i4.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: i5.GridMultiInputsToolbarTopComponent, selector: "s-grid-multi-toolbar-top", inputs: ["config"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GridMultiInputsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-grid-multi', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-grid-multi\">\n  <div class=\"s-grid-multi__toolbar-top\">\n    <s-grid-multi-toolbar-top\n      [config]=\"config.configToolbarTop\"></s-grid-multi-toolbar-top>\n  </div>\n  <div class=\"s-grid-multi__table\">\n    <div class=\"pre-s-tablet s-scroll\">\n      <table class=\"s-tablet\">\n        <thead>\n          <tr>\n            <th\n              *ngFor=\"let column of config.columns; let colIndex = index\"\n              [ngClass]=\"{ 'resizable-th': colIndex === 0 }\">\n              <div\n                class=\"th-head no-select\"\n                [ngClass]=\"column.type === 'append' ? 'th-head--left' : ''\">\n                <!-- Excepci\u00F3n cuando es select all -->\n                <ng-container *ngIf=\"colIndex !== 0; else elseBlock\">\n                  <input\n                    type=\"checkbox\"\n                    [indeterminate]=\"getColumnState(column) === null\"\n                    [checked]=\"getColumnState(column) === true\"\n                    (change)=\"setColumnState(colIndex, $event)\"\n                    *ngIf=\"column.type !== 'append'\" />\n                </ng-container>\n                <ng-template #elseBlock>\n                  <input\n                    type=\"checkbox\"\n                    [indeterminate]=\"getStateAllGrid() === null\"\n                    [checked]=\"getStateAllGrid() === true\"\n                    (change)=\"setAllGridState($event)\" />\n                </ng-template>\n                {{ column.title }}\n                <div\n                  *ngIf=\"colIndex === 0\"\n                  class=\"resizer\"\n                  (mousedown)=\"startResize($event, colIndex)\"></div>\n              </div>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of config.rows; let rowIndex = index\">\n            <!-- Primera celda con t\u00EDtulo de fila -->\n            <td>\n              <div class=\"th-head th-head--left th-head--normal\">\n                <input\n                  type=\"checkbox\"\n                  [indeterminate]=\"getRowState(row) === null\"\n                  [checked]=\"getRowState(row) === true\"\n                  (change)=\"setRowState(rowIndex, $event)\"\n                  *ngIf=\"row.type !== 'append'\" />\n                {{ row.title }}\n              </div>\n            </td>\n            <!-- Celda para la columna custom  -->\n            <td *ngIf=\"config.customColumns\">\n              <div class=\"text-center\">\n                <s-button\n                  type=\"primary\"\n                  [theme]=\"\n                    getButtonTheme(\n                      row.customColumnStatus ? row.customColumnStatus : 1\n                    )\n                  \"\n                  position=\"normal\"\n                  [disabled]=\"row.customColumnStatus === 3 ? true : false\"\n                  (click)=\"onCustomClick(row)\"\n                  (onKeyDown)=\"onCustomClick(row)\">\n                  <s-icon-mat>{{\n                    row.customColumnStatus === 1 ? 'warning' : 'check_circle'\n                  }}</s-icon-mat>\n                  {{ row.customColumnTitle }}</s-button\n                >\n              </div>\n            </td>\n\n            <!-- Resto de las celdas -->\n            <td\n              *ngFor=\"let cell of config.data[rowIndex]; index as cellIndex\"\n              class=\"td-class\"\n              [ngClass]=\"cell.state === null ? 'cell-null' : ''\">\n              <ng-container *ngIf=\"cell.state === true || cell.state === false\">\n                <div class=\"text-center\">\n                  <input\n                    type=\"checkbox\"\n                    (change)=\"onCheckboxChange(rowIndex, cellIndex, cell.state)\"\n                    [(ngModel)]=\"cell.state\" />\n                </div>\n              </ng-container>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</div>\n", styles: [".pre-s-tablet{max-width:100%;overflow-x:auto}.pre-s-tablet .s-tablet{background-color:var(--primary-100);border-collapse:collapse;width:100%}.pre-s-tablet .s-tablet thead{background-color:var(--neutrals-1200);font-weight:700}.pre-s-tablet .s-tablet thead th{vertical-align:middle;color:var(--secondary-600);font-size:.875rem;line-height:1.375rem;letter-spacing:.25px;font-weight:700!important;text-align:left}.pre-s-tablet .s-tablet thead th:last-of-type{text-align:center}.pre-s-tablet .s-tablet__body{background-color:var(--neutrals-1200);color:var(--secondary-600)}.pre-s-tablet .s-tablet__disabled{color:var(--neutrals-700);pointer-events:none}.pre-s-tablet .s-tablet__empty{display:table-caption;caption-side:bottom;width:100%}.pre-s-tablet .s-tablet tbody tr td,.pre-s-tablet .s-tablet thead tr th{padding:.875rem;height:3.5rem;vertical-align:middle;font-size:.875rem}.pre-s-tablet .s-tablet th,.pre-s-tablet .s-tablet td{box-sizing:border-box;border:none;box-shadow:inset 0 -1px 0 var(--neutrals-900)}.pre-s-tablet .s-tablet td,.pre-s-tablet .s-tablet thead tr{height:3.5rem}.pre-s-tablet .s-tablet thead tr th{position:sticky;top:0;background-color:var(--neutrals-1200);z-index:1}.pre-s-tablet .s-tablet__header{display:flex;gap:.5rem;align-items:center}.pre-s-tablet .s-tablet__header__icon{color:var(--primary-600)}.pre-s-tablet .s-tablet__header__icon--standard .s-icon-mat span{color:var(--neutrals-800)}.pre-s-tablet .s-tablet__header--align-left{justify-content:flex-start}.pre-s-tablet .s-tablet__header--align-center{justify-content:center}.pre-s-tablet .s-tablet__header--align-right{justify-content:flex-end}.pre-s-tablet .s-tablet__header__label{color:var(--secondary-500);font-weight:600}.pre-s-tablet .s-tablet__header__select{color:var(--secondary-600);font-weight:700}.s-grid-multi__table .pre-s-tablet .s-tablet{background-color:inherit}.s-grid-multi__table .pre-s-tablet .s-tablet .resizable-th{position:relative}.s-grid-multi__table .pre-s-tablet .s-tablet .resizable-th .th-head{width:200px}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;overflow:hidden}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--left{justify-content:flex-start}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--center{justify-content:center}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--normal{font-weight:400}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head .resizer{position:absolute;right:0;top:10px;width:5px;height:70%;cursor:col-resize;background-color:var(--neutrals-1000);max-width:2px}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head .resizer:hover{background-color:var(--neutrals-300)}.s-grid-multi__table .pre-s-tablet .s-tablet th:first-of-type .th-head{justify-content:flex-start}.s-grid-multi__table .pre-s-tablet .s-tablet .cell-null{background-color:var(--neutrals-1000)!important}.s-grid-multi__table .pre-s-tablet .s-tablet .td-class .s-checkbox{justify-content:center}\n"] }]
+            args: [{ selector: 's-grid-multi', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-grid-multi\">\n  <div class=\"s-grid-multi__toolbar-top\">\n    <s-grid-multi-toolbar-top\n      [config]=\"config.configToolbarTop\"></s-grid-multi-toolbar-top>\n  </div>\n  <div class=\"s-grid-multi__table\">\n    <div class=\"pre-s-tablet s-scroll\">\n      <table class=\"s-tablet\">\n        <thead>\n          <tr>\n            <th\n              *ngFor=\"let column of config.columns; let colIndex = index\"\n              [ngClass]=\"{ 'resizable-th': colIndex === 0 }\">\n              <div\n                class=\"th-head no-select\"\n                [ngClass]=\"column.type === 'append' ? 'th-head--left' : ''\">\n                <!-- Excepci\u00F3n cuando es select all -->\n                <ng-container *ngIf=\"colIndex !== 0; else elseBlock\">\n                  <input\n                    type=\"checkbox\"\n                    [indeterminate]=\"getColumnState(column) === null\"\n                    [checked]=\"getColumnState(column) === true\"\n                    (change)=\"setColumnState(colIndex, $event)\"\n                    *ngIf=\"column.type !== 'append'\" />\n                </ng-container>\n                <ng-template #elseBlock>\n                  <input\n                    type=\"checkbox\"\n                    [indeterminate]=\"getStateAllGrid() === null\"\n                    [checked]=\"getStateAllGrid() === true\"\n                    (change)=\"setAllGridState($event)\" />\n                </ng-template>\n                {{ column.title }}\n                <div\n                  *ngIf=\"colIndex === 0\"\n                  class=\"resizer\"\n                  (mousedown)=\"startResize($event, colIndex)\"></div>\n              </div>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of config.rows; let rowIndex = index\">\n            <!-- Primera celda con t\u00EDtulo de fila -->\n            <td>\n              <div class=\"th-head th-head--left th-head--normal\">\n                <input\n                  type=\"checkbox\"\n                  [indeterminate]=\"getRowState(row) === null\"\n                  [checked]=\"getRowState(row) === true\"\n                  (change)=\"setRowState(rowIndex, $event)\"\n                  *ngIf=\"row.type !== 'append'\" />\n                {{ row.title }}\n              </div>\n            </td>\n            <!-- Celda para la columna custom  -->\n            <td *ngIf=\"config.customColumns\">\n              <div class=\"text-center\">\n                <s-button\n                  type=\"primary\"\n                  [theme]=\"\n                    getButtonTheme(\n                      row.customColumnStatus ? row.customColumnStatus : 1\n                    )\n                  \"\n                  position=\"normal\"\n                  [disabled]=\"row.customColumnStatus === 3 ? true : false\"\n                  (click)=\"onCustomClick(row)\"\n                  (onKeyDown)=\"onCustomClick(row)\">\n                  <s-icon-mat>{{\n                    row.customColumnStatus === 1 ? 'warning' : 'check_circle'\n                  }}</s-icon-mat>\n                  {{ row.customColumnTitle }}</s-button\n                >\n              </div>\n            </td>\n\n            <!-- Resto de las celdas -->\n            <td\n              *ngFor=\"let cell of config.data[rowIndex]; index as cellIndex\"\n              class=\"td-class\"\n              [ngClass]=\"cell.state === null ? 'cell-null' : ''\">\n              <ng-container *ngIf=\"cell.state === true || cell.state === false\">\n                <div class=\"text-center\">\n                  <input\n                    type=\"checkbox\"\n                    (change)=\"onCheckboxChange(rowIndex, cellIndex, cell.state)\"\n                    [(ngModel)]=\"cell.state\" />\n                </div>\n              </ng-container>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</div>\n", styles: [".pre-s-tablet{max-width:100%;overflow-x:auto}.pre-s-tablet .s-tablet{background-color:var(--primary-100);border-collapse:collapse;width:100%}.pre-s-tablet .s-tablet thead{background-color:var(--neutrals-1200);font-weight:700}.pre-s-tablet .s-tablet thead th{vertical-align:middle;color:var(--secondary-600);font-size:.875rem;line-height:1.375rem;letter-spacing:.016rem;font-weight:700!important;text-align:left}.pre-s-tablet .s-tablet thead th:last-of-type{text-align:center}.pre-s-tablet .s-tablet__body{background-color:var(--neutrals-1200);color:var(--secondary-600)}.pre-s-tablet .s-tablet__disabled{color:var(--neutrals-700);pointer-events:none}.pre-s-tablet .s-tablet__empty{display:table-caption;caption-side:bottom;width:100%}.pre-s-tablet .s-tablet tbody tr td,.pre-s-tablet .s-tablet thead tr th{padding:.875rem;height:3.5rem;vertical-align:middle;font-size:.875rem}.pre-s-tablet .s-tablet th,.pre-s-tablet .s-tablet td{box-sizing:border-box;border:none;box-shadow:inset 0 -.063rem 0 var(--neutrals-900)}.pre-s-tablet .s-tablet td,.pre-s-tablet .s-tablet thead tr{height:3.5rem}.pre-s-tablet .s-tablet thead tr th{position:sticky;top:0;background-color:var(--neutrals-1200)}.pre-s-tablet .s-tablet__header{display:flex;gap:.5rem;align-items:center}.pre-s-tablet .s-tablet__header__icon{color:var(--primary-600)}.pre-s-tablet .s-tablet__header__icon--standard .s-icon-mat span{color:var(--neutrals-800)}.pre-s-tablet .s-tablet__header--align-left{justify-content:flex-start}.pre-s-tablet .s-tablet__header--align-center{justify-content:center}.pre-s-tablet .s-tablet__header--align-right{justify-content:flex-end}.pre-s-tablet .s-tablet__header__label{color:var(--secondary-500);font-weight:600}.pre-s-tablet .s-tablet__header__select{color:var(--secondary-600);font-weight:700}.s-grid-multi__table .pre-s-tablet .s-tablet{background-color:inherit}.s-grid-multi__table .pre-s-tablet .s-tablet .resizable-th{position:relative}.s-grid-multi__table .pre-s-tablet .s-tablet .resizable-th .th-head{width:12.5rem}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head{display:flex;align-items:center;justify-content:center;gap:.625rem;font-weight:700;overflow:hidden}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--left{justify-content:flex-start}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--center{justify-content:center}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head--normal{font-weight:400}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head .resizer{position:absolute;right:0;top:.625rem;width:.313rem;height:70%;cursor:col-resize;background-color:var(--neutrals-1000);max-width:.125rem}.s-grid-multi__table .pre-s-tablet .s-tablet .th-head .resizer:hover{background-color:var(--neutrals-300)}.s-grid-multi__table .pre-s-tablet .s-tablet th:first-of-type .th-head{justify-content:flex-start}.s-grid-multi__table .pre-s-tablet .s-tablet .cell-null{background-color:var(--neutrals-1000)!important}.s-grid-multi__table .pre-s-tablet .s-tablet .td-class .s-checkbox{justify-content:center}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { config: [{
                 type: Input
             }], dataChange: [{

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      '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:1px 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:0px;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:1px solid var(--red-500)}.s-calendar__content.theme-red .icon.report span{color:var(--red-600)}.s-calendar__content.theme-green{border:1px solid var(--green-500)}.s-calendar__content.theme-green .icon.report span{color:var(--green-600)}.s-calendar__content.theme-yellow{border:1px 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.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:1px solid var(--primary-600);box-shadow:0 0 0 4px #0091fe26,0 1px 2px #1018280d}.s-calendar__content.theme-green:has(input:focus){border:1px solid var(--green-500);box-shadow:0 0 0 4px #36b37e26,0 1px 2px #1018280d}.s-calendar__content.theme-yellow:has(input:focus){border:1px solid var(--yellow-500);box-shadow:0 0 0 4px #ffab0026,0 1px 2px #1018280d}.s-calendar__content.theme-red:has(input:focus){border:1px solid var(--red-500);box-shadow:0 0 0 4px #ff563026,0 1px 2px #1018280d}\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      '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.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SCalendarComponent, decorators: [{
             type: Component,
@@ -68,7 +68,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => SCalendarComponent),
                             multi: true
                         }
-                    ], 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      '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:1px 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:0px;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:1px solid var(--red-500)}.s-calendar__content.theme-red .icon.report span{color:var(--red-600)}.s-calendar__content.theme-green{border:1px solid var(--green-500)}.s-calendar__content.theme-green .icon.report span{color:var(--green-600)}.s-calendar__content.theme-yellow{border:1px 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.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:1px solid var(--primary-600);box-shadow:0 0 0 4px #0091fe26,0 1px 2px #1018280d}.s-calendar__content.theme-green:has(input:focus){border:1px solid var(--green-500);box-shadow:0 0 0 4px #36b37e26,0 1px 2px #1018280d}.s-calendar__content.theme-yellow:has(input:focus){border:1px solid var(--yellow-500);box-shadow:0 0 0 4px #ffab0026,0 1px 2px #1018280d}.s-calendar__content.theme-red:has(input:focus){border:1px solid var(--red-500);box-shadow:0 0 0 4px #ff563026,0 1px 2px #1018280d}\n"] }]
+                    ], 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      '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.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"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], clickHelpIconEvent: [{

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

@@ -70,7 +70,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': readOnly }\">\n    <div class=\"content-left\">\n      <input\n        [readOnly]=\"readOnly\"\n        #color\n        [id]=\"name\"\n        [name]=\"name\"\n        type=\"color\"\n        [disabled]=\"readOnly\"\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:1px 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:0px;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:1px 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:1px solid var(--green-500)}.s-color__content.theme-green .icon.report span{color:var(--green-600)}.s-color__content.theme-yellow{border:1px solid var(--yellow-500)}.s-color__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-color__content.theme-red{border:1px 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:1px solid var(--neutrals-900)}.s-color__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.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:1px solid var(--primary-600);box-shadow:0 0 0 4px #0091fe26,0 1px 2px #1018280d}.s-color__content:has(input:focus).theme-red:has(input:focus){border:1px solid var(--red-500);box-shadow:0 0 0 4px #ff563026,0 1px 2px #1018280d}.s-color__content:has(input:focus).theme-yellow:has(input:focus){border:1px solid var(--yellow-500);box-shadow:0 0 0 4px #ffab0026,0 1px 2px #1018280d}.s-color__content:has(input:focus).theme-green:has(input:focus){border:1px solid var(--green-500);box-shadow:0 0 0 4px #36b37e26,0 1px 2px #1018280d}\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': readOnly }\">\n    <div class=\"content-left\">\n      <input\n        [readOnly]=\"readOnly\"\n        #color\n        [id]=\"name\"\n        [name]=\"name\"\n        type=\"color\"\n        [disabled]=\"readOnly\"\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.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SColorComponent, decorators: [{
             type: Component,
@@ -80,7 +80,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => SColorComponent),
                             multi: true
                         }
-                    ], 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': readOnly }\">\n    <div class=\"content-left\">\n      <input\n        [readOnly]=\"readOnly\"\n        #color\n        [id]=\"name\"\n        [name]=\"name\"\n        type=\"color\"\n        [disabled]=\"readOnly\"\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:1px 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:0px;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:1px 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:1px solid var(--green-500)}.s-color__content.theme-green .icon.report span{color:var(--green-600)}.s-color__content.theme-yellow{border:1px solid var(--yellow-500)}.s-color__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-color__content.theme-red{border:1px 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:1px solid var(--neutrals-900)}.s-color__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.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:1px solid var(--primary-600);box-shadow:0 0 0 4px #0091fe26,0 1px 2px #1018280d}.s-color__content:has(input:focus).theme-red:has(input:focus){border:1px solid var(--red-500);box-shadow:0 0 0 4px #ff563026,0 1px 2px #1018280d}.s-color__content:has(input:focus).theme-yellow:has(input:focus){border:1px solid var(--yellow-500);box-shadow:0 0 0 4px #ffab0026,0 1px 2px #1018280d}.s-color__content:has(input:focus).theme-green:has(input:focus){border:1px solid var(--green-500);box-shadow:0 0 0 4px #36b37e26,0 1px 2px #1018280d}\n"] }]
+                    ], 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': readOnly }\">\n    <div class=\"content-left\">\n      <input\n        [readOnly]=\"readOnly\"\n        #color\n        [id]=\"name\"\n        [name]=\"name\"\n        type=\"color\"\n        [disabled]=\"readOnly\"\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.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"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], id: [{

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

@@ -35,11 +35,11 @@ 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:3px;font-weight:400;font-size:.875rem;line-height:0px}.label-content.sm{font-size:.625rem}.label-content s-icon-mat{display:flex;align-items:center;margin-right:3px}.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:5px}.form-group .label{font-weight:400;font-size:.875rem;color:var(--secondary-600)}.form-group .content-input-main-626.sm{margin:0}\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", "opticalSize", "style", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SErrorControl, decorators: [{
             type: Component,
-            args: [{ selector: 's-error-control', encapsulation: ViewEncapsulation.None, 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:3px;font-weight:400;font-size:.875rem;line-height:0px}.label-content.sm{font-size:.625rem}.label-content s-icon-mat{display:flex;align-items:center;margin-right:3px}.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:5px}.form-group .label{font-weight:400;font-size:.875rem;color:var(--secondary-600)}.form-group .content-input-main-626.sm{margin:0}\n"] }]
+            args: [{ selector: 's-error-control', encapsulation: ViewEncapsulation.None, 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"] }]
         }], ctorParameters: () => [], propDecorators: { theme: [{
                 type: Input
             }], icon: [{