sidesys-generic-ui 2.4.2 → 2.4.4

package/fesm2022/sidesys-generic-ui.mjs

@@ -66,11 +66,11 @@ class SIconMaterialComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIconMaterialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: { name: "name", size: "size", fill: "fill", weight: "weight", grade: "grade", opticalSize: "opticalSize", style: "style", type: "type" }, viewQueries: [{ propertyName: "Icon", first: true, predicate: ["icon"], descendants: true, static: true }], ngImport: i0, template: "<div #icon class=\"s-icon-mat\">\n    <span [ngClass]=\"optionsType\" [ngStyle]=\"computedStyles\">\n        <ng-content *ngIf=\"!name\"></ng-content>\n        <ng-container *ngIf=\"name\">{{name}}</ng-container>\n    </span>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v292/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format(\"woff2\")}.s-icon-mat{display:flex}.s-icon-mat .material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.s-icon-mat .material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: { name: "name", size: "size", fill: "fill", weight: "weight", grade: "grade", opticalSize: "opticalSize", style: "style", type: "type" }, viewQueries: [{ propertyName: "Icon", first: true, predicate: ["icon"], descendants: true, static: true }], ngImport: i0, template: "<div #icon class=\"s-icon-mat\">\n    <span [ngClass]=\"optionsType\" [ngStyle]=\"computedStyles\">\n        <ng-content *ngIf=\"!name\"></ng-content>\n        <ng-container *ngIf=\"name\">{{name}}</ng-container>\n    </span>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v316/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2) format(\"woff2\")}.s-icon-mat{display:flex}.s-icon-mat .material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.s-icon-mat .material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIconMaterialComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-icon-mat', encapsulation: ViewEncapsulation.None, template: "<div #icon class=\"s-icon-mat\">\n    <span [ngClass]=\"optionsType\" [ngStyle]=\"computedStyles\">\n        <ng-content *ngIf=\"!name\"></ng-content>\n        <ng-container *ngIf=\"name\">{{name}}</ng-container>\n    </span>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v292/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format(\"woff2\")}.s-icon-mat{display:flex}.s-icon-mat .material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.s-icon-mat .material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"] }]
+            args: [{ selector: 's-icon-mat', encapsulation: ViewEncapsulation.None, template: "<div #icon class=\"s-icon-mat\">\n    <span [ngClass]=\"optionsType\" [ngStyle]=\"computedStyles\">\n        <ng-content *ngIf=\"!name\"></ng-content>\n        <ng-container *ngIf=\"name\">{{name}}</ng-container>\n    </span>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v316/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2) format(\"woff2\")}.s-icon-mat{display:flex}.s-icon-mat .material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.s-icon-mat .material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"] }]
         }], propDecorators: { Icon: [{
                 type: ViewChild,
                 args: ['icon', { static: true }]
@@ -1474,6 +1474,8 @@ class SInput {
 const INPUTS_REGEX = {
     URL: /^(https?:\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6}(\/[a-zA-Z0-9#]+\/?)*$/,
     EMAIL: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+    ALPHANUMERIC: /[a-zA-ZáéíóúÁÉÍÓÚñÑ0-9._\- ]/g,
+    SEARCH: /^[a-zA-ZáéíóúÁÉÍÓÚñÑ0-9._\- ]*$/,
 };
 var INPUT_TYPE;
 (function (INPUT_TYPE) {
@@ -1685,18 +1687,18 @@ class SInputComponent extends ControlValueAccessorDirective {
         this.blur = new EventEmitter();
         this.focus = new EventEmitter();
         this.iconSymbol = false;
-        this.ICON_THEME = ICON_THEME;
         this.showPassword = false;
         this.INPUT_TYPE = INPUT_TYPE;
         this.THEME = THEME;
+        this.ICON_THEME = ICON_THEME;
         this.isFocused = false;
     }
     onInput(event) {
-        this.patternError();
         const input = event.target;
         this.value = input.value;
         this.onChange(this.value);
         this.onTouched();
+        this.patternError();
     }
     registerOnChange(fn) {
         if (!this.config.useFormControl) {
@@ -1707,25 +1709,18 @@ class SInputComponent extends ControlValueAccessorDirective {
         return this.config.theme === 'yellow' ? 'symbol' : 'icon';
     }
     showIconType() {
-        this.iconType = this.config.type
-            ? this.getIconByType(this.config.type)
-            : undefined;
+        this.iconType = this.config.type ? this.getIconByType(this.config.type) : undefined;
         return !!this.iconType;
     }
     getIconByType(type) {
-        return type in ICON_INPUT
-            ? ICON_INPUT[type]
-            : undefined;
+        return type in ICON_INPUT ? ICON_INPUT[type] : undefined;
     }
     patternError() {
-        if (this.config.type === INPUT_TYPE.URL &&
-            !INPUTS_REGEX.URL.test(this.control?.value || this.value)) {
-            this.errorPattern = 'Formato de url invalido.';
-            return;
-        }
-        if (this.config.type === INPUT_TYPE.EMAIL &&
-            !INPUTS_REGEX.EMAIL.test(this.control?.value || this.value)) {
-            this.errorPattern = 'Formato de email invalido.';
+        const value = this.control?.value || this.value;
+        if ((this.config.type === INPUT_TYPE.SEARCH && !INPUTS_REGEX.SEARCH.test(value)) ||
+            (this.config.type === INPUT_TYPE.URL && !INPUTS_REGEX.URL.test(value)) ||
+            (this.config.type === INPUT_TYPE.EMAIL && !INPUTS_REGEX.EMAIL.test(value))) {
+            this.errorPattern = 'validation.invalidData';
             return;
         }
         this.errorPattern = undefined;
@@ -1735,16 +1730,16 @@ class SInputComponent extends ControlValueAccessorDirective {
         this.showPassword = !this.showPassword;
     }
     clickHelp() {
-        this.clickHelpIconEvent.next();
+        this.clickHelpIconEvent.emit();
     }
     onBlur(event) {
         this.patternError();
         this.isFocused = false;
-        this.blur.next(event);
+        this.blur.emit(event);
     }
     onFocus(event) {
         this.isFocused = true;
-        this.focus.next(event);
+        this.focus.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SInputComponent, selector: "s-input", inputs: { config: "config" }, outputs: { clickHelpIconEvent: "clickHelpIconEvent", blur: "blur", focus: "focus" }, providers: [
@@ -1753,7 +1748,7 @@ class SInputComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => SInputComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"s-input\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-input__label\">\n    {{ config.label }}\n    <span class=\"s-input__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-input__content {{ config.size }} theme-{{ config.theme }} {{\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 && errorPattern && control.touched) ||\n        config.theme === THEME.RED ||\n        config.errorText,\n    }\">\n    <div *ngIf=\"showIconType()\" class=\"content-left\">\n      <s-icon-mat class=\"icon\">{{ iconType }}</s-icon-mat>\n    </div>\n    <div class=\"content-center\">\n      <ng-container *ngIf=\"control; else notUseFormControl\">\n        <input\n          autocomplete=\"off\"\n          [id]=\"config.id\"\n          placeholder=\"{{ config.placeholder }}\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          type=\"{{ type }}\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          maxlength=\"{{ config.maxlength }}\"\n          [type]=\"config.type\"\n          [formControl]=\"control\"\n          (input)=\"patternError()\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-container>\n      <ng-template #notUseFormControl>\n        <input\n          autocomplete=\"off\"\n          [id]=\"config.id\"\n          placeholder=\"{{ config.placeholder }}\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          type=\"{{ type }}\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [type]=\"config.type\"\n          [value]=\"value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-template>\n    </div>\n    <div *ngIf=\"config?.type === 'password'\" class=\"content-right\">\n      <s-icon-mat\n        [type]=\"iconSymbol ? 'symbol' : 'icon'\"\n        class=\"icon cursor\"\n        (click)=\"changeShowPassword()\"\n        >{{ showPassword ? 'visibility' : 'visibility_off' }}\n      </s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"config?.theme !== THEME.DEFAULT && config.theme !== undefined\"\n      class=\"content-right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n        ICON_THEME[config.theme]\n      }}</s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"\n        config.showHelp &&\n        (config.theme === THEME.DEFAULT || config.theme !== undefined)\n      \"\n      class=\"content-right\">\n      <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n        >help_outline</s-icon-mat\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched) &&\n      !(\n        (config.type === INPUT_TYPE.URL && config.errorText) ||\n        (config.type === INPUT_TYPE.EMAIL && config.errorText)\n      )\n    \"\n    [customErrorMessages]=\"config.errorMessages ?? undefined\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\">\n    {{ config.errorText }}\n  </s-error-control>\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      config.type !== INPUT_TYPE.SEARCH &&\n      !errorPattern &&\n      !config.errorText\n    \"\n    theme=\"red\">\n    {{ errorPattern }}\n  </s-error-control>\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !errorPattern &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</div>\n", styles: [".s-input__label{font-size:.875rem;color:var(--secondary-600)}.s-input__required{color:var(--primary-600)}.s-input__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.188rem 0;background-color:var(--neutrals-1200)}.s-input__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input__content input:-webkit-autofill,.s-input__content input:-webkit-autofill:hover,.s-input__content input:-webkit-autofill:focus,.s-input__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-input__content input:focus,.s-input__content input:focus-visible{outline:none}.s-input__content .icon{width:1.25rem;cursor:default}.s-input__content .icon span{display:flex}.s-input__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input__content .content-left-url{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;border-right:.063rem solid var(--secondary-500);padding-right:.5rem;color:var(--secondary-500);font-size:.9rem}.s-input__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input__content.sm input{height:1.3rem;font-size:.75rem}.s-input__content.sm .icon{width:1.25rem;cursor:default}.s-input__content.sm .icon span{font-size:1.2em;display:flex}.s-input__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);pointer-events:none}.s-input__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-input__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input__content.theme-red{border:.063rem solid var(--red-500)}.s-input__content.theme-red .icon.report span{color:var(--red-600)}.s-input__content.theme-green{border:.063rem solid var(--green-500)}.s-input__content.theme-green .icon.report span{color:var(--green-600)}.s-input__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"s-input\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-input__label\">\n    {{ config.label }}\n    <span class=\"s-input__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-input__content {{ config.size }} theme-{{ config.theme }} {{ config.classAdd }}\"\n    [ngClass]=\"{\n      'disabled-active': config.disabled || (control && control.status === 'DISABLED'),\n      readonly: config.readOnly,\n      'theme-red':\n        (control && control.invalid && (isFocused || control.touched)) ||\n        errorPattern ||\n        config.theme === THEME.RED ||\n        config.errorText,\n    }\">\n    <div *ngIf=\"showIconType()\" class=\"content-left\">\n      <s-icon-mat class=\"icon\">{{ iconType }}</s-icon-mat>\n    </div>\n    <div class=\"content-center\">\n      <ng-container *ngIf=\"control; else notUseFormControl\">\n        <input\n          autocomplete=\"off\"\n          [id]=\"config.id\"\n          [placeholder]=\"config.placeholder ?? ''\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          type=\"{{ type }}\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [maxlength]=\"config.maxlength ?? null\"\n          [formControl]=\"control\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-container>\n      <ng-template #notUseFormControl>\n        <input\n          autocomplete=\"off\"\n          [id]=\"config.id\"\n          [placeholder]=\"config.placeholder ?? ''\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          type=\"{{ type }}\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [value]=\"value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-template>\n    </div>\n    <div *ngIf=\"config?.type === 'password'\" class=\"content-right\">\n      <s-icon-mat [type]=\"iconSymbol ? 'symbol' : 'icon'\" class=\"icon cursor\" (click)=\"changeShowPassword()\"\n        >{{ showPassword ? 'visibility' : 'visibility_off' }}\n      </s-icon-mat>\n    </div>\n    <div *ngIf=\"config?.theme !== THEME.DEFAULT && config.theme !== undefined\" class=\"content-right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{ ICON_THEME[config.theme] }}</s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"config.showHelp && (config.theme === THEME.DEFAULT || config.theme !== undefined)\"\n      class=\"content-right\">\n      <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\">help_outline</s-icon-mat>\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched) &&\n      !((config.type === INPUT_TYPE.URL && config.errorText) || (config.type === INPUT_TYPE.EMAIL && config.errorText))\n    \"\n    [customErrorMessages]=\"config.errorMessages ?? undefined\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control *ngIf=\"!config.hideErrorText && config.errorText\" theme=\"red\">\n    {{ config.errorText }}\n  </s-error-control>\n  <s-error-control *ngIf=\"!config.hideErrorText && errorPattern && !config.errorText\" theme=\"red\">\n    {{ errorPattern }}\n  </s-error-control>\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !errorPattern &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) || (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</div>\n", styles: [":host{align-self:flex-start}.s-input s-error-control .label-content{line-height:normal}.s-input__label{font-size:.875rem;color:var(--secondary-600)}.s-input__required{color:var(--primary-600)}.s-input__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.188rem 0;background-color:var(--neutrals-1200)}.s-input__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input__content input:-webkit-autofill,.s-input__content input:-webkit-autofill:hover,.s-input__content input:-webkit-autofill:focus,.s-input__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-input__content input:focus,.s-input__content input:focus-visible{outline:none}.s-input__content .icon{width:1.25rem;cursor:default}.s-input__content .icon span{display:flex}.s-input__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input__content .content-left-url{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;border-right:.063rem solid var(--secondary-500);padding-right:.5rem;color:var(--secondary-500);font-size:.9rem}.s-input__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input__content.sm input{height:1.3rem;font-size:.75rem}.s-input__content.sm .icon{width:1.25rem;cursor:default}.s-input__content.sm .icon span{font-size:1.2em;display:flex}.s-input__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);pointer-events:none}.s-input__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-input__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input__content.readonly{background-color:var(--neutrals-1100)}.s-input__content.readonly input{background-color:var(--neutrals-1100);cursor:default;color:var(--secondary-600)}.s-input__content.theme-red{border:.063rem solid var(--red-500)}.s-input__content.theme-red .icon.report span{color:var(--red-600)}.s-input__content.theme-green{border:.063rem solid var(--green-500)}.s-input__content.theme-green .icon.report span{color:var(--green-600)}.s-input__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SInputComponent, decorators: [{
             type: Component,
@@ -1763,7 +1758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => SInputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"s-input\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-input__label\">\n    {{ config.label }}\n    <span class=\"s-input__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-input__content {{ config.size }} theme-{{ config.theme }} {{\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 && errorPattern && control.touched) ||\n        config.theme === THEME.RED ||\n        config.errorText,\n    }\">\n    <div *ngIf=\"showIconType()\" class=\"content-left\">\n      <s-icon-mat class=\"icon\">{{ iconType }}</s-icon-mat>\n    </div>\n    <div class=\"content-center\">\n      <ng-container *ngIf=\"control; else notUseFormControl\">\n        <input\n          autocomplete=\"off\"\n          [id]=\"config.id\"\n          placeholder=\"{{ config.placeholder }}\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          type=\"{{ type }}\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          maxlength=\"{{ config.maxlength }}\"\n          [type]=\"config.type\"\n          [formControl]=\"control\"\n          (input)=\"patternError()\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-container>\n      <ng-template #notUseFormControl>\n        <input\n          autocomplete=\"off\"\n          [id]=\"config.id\"\n          placeholder=\"{{ config.placeholder }}\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          type=\"{{ type }}\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [type]=\"config.type\"\n          [value]=\"value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-template>\n    </div>\n    <div *ngIf=\"config?.type === 'password'\" class=\"content-right\">\n      <s-icon-mat\n        [type]=\"iconSymbol ? 'symbol' : 'icon'\"\n        class=\"icon cursor\"\n        (click)=\"changeShowPassword()\"\n        >{{ showPassword ? 'visibility' : 'visibility_off' }}\n      </s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"config?.theme !== THEME.DEFAULT && config.theme !== undefined\"\n      class=\"content-right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n        ICON_THEME[config.theme]\n      }}</s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"\n        config.showHelp &&\n        (config.theme === THEME.DEFAULT || config.theme !== undefined)\n      \"\n      class=\"content-right\">\n      <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n        >help_outline</s-icon-mat\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched) &&\n      !(\n        (config.type === INPUT_TYPE.URL && config.errorText) ||\n        (config.type === INPUT_TYPE.EMAIL && config.errorText)\n      )\n    \"\n    [customErrorMessages]=\"config.errorMessages ?? undefined\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\">\n    {{ config.errorText }}\n  </s-error-control>\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      config.type !== INPUT_TYPE.SEARCH &&\n      !errorPattern &&\n      !config.errorText\n    \"\n    theme=\"red\">\n    {{ errorPattern }}\n  </s-error-control>\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !errorPattern &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</div>\n", styles: [".s-input__label{font-size:.875rem;color:var(--secondary-600)}.s-input__required{color:var(--primary-600)}.s-input__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.188rem 0;background-color:var(--neutrals-1200)}.s-input__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input__content input:-webkit-autofill,.s-input__content input:-webkit-autofill:hover,.s-input__content input:-webkit-autofill:focus,.s-input__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-input__content input:focus,.s-input__content input:focus-visible{outline:none}.s-input__content .icon{width:1.25rem;cursor:default}.s-input__content .icon span{display:flex}.s-input__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input__content .content-left-url{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;border-right:.063rem solid var(--secondary-500);padding-right:.5rem;color:var(--secondary-500);font-size:.9rem}.s-input__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input__content.sm input{height:1.3rem;font-size:.75rem}.s-input__content.sm .icon{width:1.25rem;cursor:default}.s-input__content.sm .icon span{font-size:1.2em;display:flex}.s-input__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);pointer-events:none}.s-input__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-input__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input__content.theme-red{border:.063rem solid var(--red-500)}.s-input__content.theme-red .icon.report span{color:var(--red-600)}.s-input__content.theme-green{border:.063rem solid var(--green-500)}.s-input__content.theme-green .icon.report span{color:var(--green-600)}.s-input__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"] }]
+                    ], template: "<div class=\"s-input\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-input__label\">\n    {{ config.label }}\n    <span class=\"s-input__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-input__content {{ config.size }} theme-{{ config.theme }} {{ config.classAdd }}\"\n    [ngClass]=\"{\n      'disabled-active': config.disabled || (control && control.status === 'DISABLED'),\n      readonly: config.readOnly,\n      'theme-red':\n        (control && control.invalid && (isFocused || control.touched)) ||\n        errorPattern ||\n        config.theme === THEME.RED ||\n        config.errorText,\n    }\">\n    <div *ngIf=\"showIconType()\" class=\"content-left\">\n      <s-icon-mat class=\"icon\">{{ iconType }}</s-icon-mat>\n    </div>\n    <div class=\"content-center\">\n      <ng-container *ngIf=\"control; else notUseFormControl\">\n        <input\n          autocomplete=\"off\"\n          [id]=\"config.id\"\n          [placeholder]=\"config.placeholder ?? ''\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          type=\"{{ type }}\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [maxlength]=\"config.maxlength ?? null\"\n          [formControl]=\"control\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-container>\n      <ng-template #notUseFormControl>\n        <input\n          autocomplete=\"off\"\n          [id]=\"config.id\"\n          [placeholder]=\"config.placeholder ?? ''\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          type=\"{{ type }}\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [value]=\"value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-template>\n    </div>\n    <div *ngIf=\"config?.type === 'password'\" class=\"content-right\">\n      <s-icon-mat [type]=\"iconSymbol ? 'symbol' : 'icon'\" class=\"icon cursor\" (click)=\"changeShowPassword()\"\n        >{{ showPassword ? 'visibility' : 'visibility_off' }}\n      </s-icon-mat>\n    </div>\n    <div *ngIf=\"config?.theme !== THEME.DEFAULT && config.theme !== undefined\" class=\"content-right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{ ICON_THEME[config.theme] }}</s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"config.showHelp && (config.theme === THEME.DEFAULT || config.theme !== undefined)\"\n      class=\"content-right\">\n      <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\">help_outline</s-icon-mat>\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched) &&\n      !((config.type === INPUT_TYPE.URL && config.errorText) || (config.type === INPUT_TYPE.EMAIL && config.errorText))\n    \"\n    [customErrorMessages]=\"config.errorMessages ?? undefined\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control *ngIf=\"!config.hideErrorText && config.errorText\" theme=\"red\">\n    {{ config.errorText }}\n  </s-error-control>\n  <s-error-control *ngIf=\"!config.hideErrorText && errorPattern && !config.errorText\" theme=\"red\">\n    {{ errorPattern }}\n  </s-error-control>\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !errorPattern &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) || (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</div>\n", styles: [":host{align-self:flex-start}.s-input s-error-control .label-content{line-height:normal}.s-input__label{font-size:.875rem;color:var(--secondary-600)}.s-input__required{color:var(--primary-600)}.s-input__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.188rem 0;background-color:var(--neutrals-1200)}.s-input__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input__content input:-webkit-autofill,.s-input__content input:-webkit-autofill:hover,.s-input__content input:-webkit-autofill:focus,.s-input__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-input__content input:focus,.s-input__content input:focus-visible{outline:none}.s-input__content .icon{width:1.25rem;cursor:default}.s-input__content .icon span{display:flex}.s-input__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input__content .content-left-url{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;border-right:.063rem solid var(--secondary-500);padding-right:.5rem;color:var(--secondary-500);font-size:.9rem}.s-input__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input__content.sm input{height:1.3rem;font-size:.75rem}.s-input__content.sm .icon{width:1.25rem;cursor:default}.s-input__content.sm .icon span{font-size:1.2em;display:flex}.s-input__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);pointer-events:none}.s-input__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-input__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input__content.readonly{background-color:var(--neutrals-1100)}.s-input__content.readonly input{background-color:var(--neutrals-1100);cursor:default;color:var(--secondary-600)}.s-input__content.theme-red{border:.063rem solid var(--red-500)}.s-input__content.theme-red .icon.report span{color:var(--red-600)}.s-input__content.theme-green{border:.063rem solid var(--green-500)}.s-input__content.theme-green .icon.report span{color:var(--green-600)}.s-input__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input__content:has(input:focus).theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], clickHelpIconEvent: [{
@@ -1964,7 +1959,7 @@ class SSelectSimpleComponent {
                 useExisting: forwardRef(() => SSelectSimpleComponent),
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"s-select\" [ngClass]=\"disabled ? 's-select--disabled':''\">\n    <span *ngIf=\"label\" class=\"s-select--select-label\">{{label}}</span>\n    <div class=\"s-select__main cursor {{ isOpen ? 'is-open' : '' }} {{size ? size : ''}}\" (click)=\"openDropDown()\" tabindex=\"0\" (keydown)=\"onKeyDownMain($event)\">\n        <div class=\"s-select__main__selected-option select-simple\">\n            <div class=\"s-select__main__selected-option__left\" *ngIf=\"activeIndex >= 0\">\n                <div *ngIf=\"display == 'dot'\" class=\"dot\"></div>\n                <s-icon-mat size=\"{{size === 'md' ? '22' : '17'}}\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n                <div *ngIf=\"display === 'profile' && options[activeIndex]?.user\" class=\"content-avatar\">\n                    <s-avatar size=\"24\" [status]=\"options[activeIndex].user?.status\" [display]=\"options[activeIndex].user?.display\" [urlProfileImage]=\"options[activeIndex].user?.url\"></s-avatar>\n                </div>\n                <span>{{ options[activeIndex].title }}</span>\n            </div>\n            <div class=\"s-select__main__selected-option__left\" *ngIf=\"activeIndex < 0\">\n                <div class=\"s-select__main__selected-option__left__content-option\" *ngIf=\"!selectedValue\">\n                    <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n                    <s-icon-mat class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n                    <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\n                        <s-avatar size=\"24\"></s-avatar>\n                    </div>\n                    <span class=\"placeholder\">{{placeholder}}</span>\n                </div>\n            </div>\n            <div class=\"s-select__main__selected-option__right\">\n                <s-icon-mat *ngIf=\"!readOnly\" class=\"{{isOpen ? 'is-open-arrow' : ''}}\">{{isOpen ? 'expand_less' : 'expand_more'}}</s-icon-mat>\n            </div>\n        </div>\n    </div>\n    <div class=\"s-select__options {{size ? size : ''}}\" *ngIf=\"isOpen\">\n        <div class=\"s-select__item {{size ? size : ''}}\"\n            *ngFor=\"let item of options; index as i\"\n            [class.active]=\"i === activeIndex\"\n            (click)=\"getSelectedValue(item)\"\n            (keydown)=\"onKeyDownItems($event , item)\"\n            tabindex=\"0\"\n            >\n            <div class=\"content-left select-simple\">\n                <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n                <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\n                    <s-avatar size=\"24\" [display]=\"item.user?.display\" [status]=\"item.user?.status\" [urlProfileImage]=\"item.user?.url\" ></s-avatar>\n                </div>\n                <s-icon-mat  size=\"{{size === 'md' ? '22' : '17'}}\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n                <span class=\"option-value\">\n                    {{item.title}}\n                </span>\n            </div>\n            <div class=\"content-right\" *ngIf=\"i === activeIndex\">\n                <s-icon-mat class=\"icon-check\">check</s-icon-mat>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".s-select{width:100%;position:relative}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:3fr 4fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:4fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"s-select\" [ngClass]=\"disabled ? 's-select--disabled':''\">\n    <span *ngIf=\"label\" class=\"s-select--select-label\">{{label}}</span>\n    <div class=\"s-select__main cursor {{ isOpen ? 'is-open' : '' }} {{size ? size : ''}}\" (click)=\"openDropDown()\" tabindex=\"0\" (keydown)=\"onKeyDownMain($event)\">\n        <div class=\"s-select__main__selected-option select-simple\">\n            <div class=\"s-select__main__selected-option__left\" *ngIf=\"activeIndex >= 0\">\n                <div *ngIf=\"display == 'dot'\" class=\"dot\"></div>\n                <s-icon-mat size=\"{{size === 'md' ? '22' : '17'}}\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n                <div *ngIf=\"display === 'profile' && options[activeIndex]?.user\" class=\"content-avatar\">\n                    <s-avatar size=\"24\" [status]=\"options[activeIndex].user?.status\" [display]=\"options[activeIndex].user?.display\" [urlProfileImage]=\"options[activeIndex].user?.url\"></s-avatar>\n                </div>\n                <span>{{ options[activeIndex].title }}</span>\n            </div>\n            <div class=\"s-select__main__selected-option__left\" *ngIf=\"activeIndex < 0\">\n                <div class=\"s-select__main__selected-option__left__content-option\" *ngIf=\"!selectedValue\">\n                    <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n                    <s-icon-mat class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n                    <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\n                        <s-avatar size=\"24\"></s-avatar>\n                    </div>\n                    <span class=\"placeholder\">{{placeholder}}</span>\n                </div>\n            </div>\n            <div class=\"s-select__main__selected-option__right\">\n                <s-icon-mat *ngIf=\"!readOnly\" class=\"{{isOpen ? 'is-open-arrow' : ''}}\">{{isOpen ? 'expand_less' : 'expand_more'}}</s-icon-mat>\n            </div>\n        </div>\n    </div>\n    <div class=\"s-select__options {{size ? size : ''}}\" *ngIf=\"isOpen\">\n        <div class=\"s-select__item {{size ? size : ''}}\"\n            *ngFor=\"let item of options; index as i\"\n            [class.active]=\"i === activeIndex\"\n            (click)=\"getSelectedValue(item)\"\n            (keydown)=\"onKeyDownItems($event , item)\"\n            tabindex=\"0\"\n            >\n            <div class=\"content-left select-simple\">\n                <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n                <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\n                    <s-avatar size=\"24\" [display]=\"item.user?.display\" [status]=\"item.user?.status\" [urlProfileImage]=\"item.user?.url\" ></s-avatar>\n                </div>\n                <s-icon-mat  size=\"{{size === 'md' ? '22' : '17'}}\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n                <span class=\"option-value\">\n                    {{item.title}}\n                </span>\n            </div>\n            <div class=\"content-right\" *ngIf=\"i === activeIndex\">\n                <s-icon-mat class=\"icon-check\">check</s-icon-mat>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSelectSimpleComponent, decorators: [{
             type: Component,
@@ -1974,7 +1969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => SSelectSimpleComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"s-select\" [ngClass]=\"disabled ? 's-select--disabled':''\">\n    <span *ngIf=\"label\" class=\"s-select--select-label\">{{label}}</span>\n    <div class=\"s-select__main cursor {{ isOpen ? 'is-open' : '' }} {{size ? size : ''}}\" (click)=\"openDropDown()\" tabindex=\"0\" (keydown)=\"onKeyDownMain($event)\">\n        <div class=\"s-select__main__selected-option select-simple\">\n            <div class=\"s-select__main__selected-option__left\" *ngIf=\"activeIndex >= 0\">\n                <div *ngIf=\"display == 'dot'\" class=\"dot\"></div>\n                <s-icon-mat size=\"{{size === 'md' ? '22' : '17'}}\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n                <div *ngIf=\"display === 'profile' && options[activeIndex]?.user\" class=\"content-avatar\">\n                    <s-avatar size=\"24\" [status]=\"options[activeIndex].user?.status\" [display]=\"options[activeIndex].user?.display\" [urlProfileImage]=\"options[activeIndex].user?.url\"></s-avatar>\n                </div>\n                <span>{{ options[activeIndex].title }}</span>\n            </div>\n            <div class=\"s-select__main__selected-option__left\" *ngIf=\"activeIndex < 0\">\n                <div class=\"s-select__main__selected-option__left__content-option\" *ngIf=\"!selectedValue\">\n                    <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n                    <s-icon-mat class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n                    <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\n                        <s-avatar size=\"24\"></s-avatar>\n                    </div>\n                    <span class=\"placeholder\">{{placeholder}}</span>\n                </div>\n            </div>\n            <div class=\"s-select__main__selected-option__right\">\n                <s-icon-mat *ngIf=\"!readOnly\" class=\"{{isOpen ? 'is-open-arrow' : ''}}\">{{isOpen ? 'expand_less' : 'expand_more'}}</s-icon-mat>\n            </div>\n        </div>\n    </div>\n    <div class=\"s-select__options {{size ? size : ''}}\" *ngIf=\"isOpen\">\n        <div class=\"s-select__item {{size ? size : ''}}\"\n            *ngFor=\"let item of options; index as i\"\n            [class.active]=\"i === activeIndex\"\n            (click)=\"getSelectedValue(item)\"\n            (keydown)=\"onKeyDownItems($event , item)\"\n            tabindex=\"0\"\n            >\n            <div class=\"content-left select-simple\">\n                <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n                <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\n                    <s-avatar size=\"24\" [display]=\"item.user?.display\" [status]=\"item.user?.status\" [urlProfileImage]=\"item.user?.url\" ></s-avatar>\n                </div>\n                <s-icon-mat  size=\"{{size === 'md' ? '22' : '17'}}\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n                <span class=\"option-value\">\n                    {{item.title}}\n                </span>\n            </div>\n            <div class=\"content-right\" *ngIf=\"i === activeIndex\">\n                <s-icon-mat class=\"icon-check\">check</s-icon-mat>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".s-select{width:100%;position:relative}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:3fr 4fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:4fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"] }]
+                    ], template: "<div class=\"s-select\" [ngClass]=\"disabled ? 's-select--disabled':''\">\n    <span *ngIf=\"label\" class=\"s-select--select-label\">{{label}}</span>\n    <div class=\"s-select__main cursor {{ isOpen ? 'is-open' : '' }} {{size ? size : ''}}\" (click)=\"openDropDown()\" tabindex=\"0\" (keydown)=\"onKeyDownMain($event)\">\n        <div class=\"s-select__main__selected-option select-simple\">\n            <div class=\"s-select__main__selected-option__left\" *ngIf=\"activeIndex >= 0\">\n                <div *ngIf=\"display == 'dot'\" class=\"dot\"></div>\n                <s-icon-mat size=\"{{size === 'md' ? '22' : '17'}}\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n                <div *ngIf=\"display === 'profile' && options[activeIndex]?.user\" class=\"content-avatar\">\n                    <s-avatar size=\"24\" [status]=\"options[activeIndex].user?.status\" [display]=\"options[activeIndex].user?.display\" [urlProfileImage]=\"options[activeIndex].user?.url\"></s-avatar>\n                </div>\n                <span>{{ options[activeIndex].title }}</span>\n            </div>\n            <div class=\"s-select__main__selected-option__left\" *ngIf=\"activeIndex < 0\">\n                <div class=\"s-select__main__selected-option__left__content-option\" *ngIf=\"!selectedValue\">\n                    <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n                    <s-icon-mat class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n                    <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\n                        <s-avatar size=\"24\"></s-avatar>\n                    </div>\n                    <span class=\"placeholder\">{{placeholder}}</span>\n                </div>\n            </div>\n            <div class=\"s-select__main__selected-option__right\">\n                <s-icon-mat *ngIf=\"!readOnly\" class=\"{{isOpen ? 'is-open-arrow' : ''}}\">{{isOpen ? 'expand_less' : 'expand_more'}}</s-icon-mat>\n            </div>\n        </div>\n    </div>\n    <div class=\"s-select__options {{size ? size : ''}}\" *ngIf=\"isOpen\">\n        <div class=\"s-select__item {{size ? size : ''}}\"\n            *ngFor=\"let item of options; index as i\"\n            [class.active]=\"i === activeIndex\"\n            (click)=\"getSelectedValue(item)\"\n            (keydown)=\"onKeyDownItems($event , item)\"\n            tabindex=\"0\"\n            >\n            <div class=\"content-left select-simple\">\n                <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\n                <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\n                    <s-avatar size=\"24\" [display]=\"item.user?.display\" [status]=\"item.user?.status\" [urlProfileImage]=\"item.user?.url\" ></s-avatar>\n                </div>\n                <s-icon-mat  size=\"{{size === 'md' ? '22' : '17'}}\" class=\"iconPerson\" *ngIf=\"display === 'iconperson'\">person_outline</s-icon-mat>\n                <span class=\"option-value\">\n                    {{item.title}}\n                </span>\n            </div>\n            <div class=\"content-right\" *ngIf=\"i === activeIndex\">\n                <s-icon-mat class=\"icon-check\">check</s-icon-mat>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"] }]
         }], ctorParameters: () => [{ type: SelectNavigationService }], propDecorators: { disabled: [{
                 type: Input
             }], placeholder: [{
@@ -2546,7 +2541,7 @@ class SInputTextAreaComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => SInputTextAreaComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<section class=\"s-textarea\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-textarea__label\">\n    {{ config.label }}\n    <span class=\"s-textarea__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-textarea__content {{ config.classAdd }}\"\n    [ngClass]=\"{\n      'disabled-active': config.disabled || control?.status === 'DISABLED',\n    }\">\n    <ng-container *ngIf=\"control; else notUseFormControl\">\n      <textarea\n        [readOnly]=\"config.readOnly || config.disabled\"\n        class=\"theme-{{ config.theme }} {{ config.classAdd }}\"\n        [ngClass]=\"{\n          resize: !config.resize,\n          'theme-red':\n            (control && control.invalid && (isFocused || control.touched)) ||\n            (control && control.errors && control.touched) ||\n            config.theme === 'red',\n        }\"\n        [ngStyle]=\"{ height: config.height, width: config.width }\"\n        [id]=\"config.id\"\n        autocomplete=\"off\"\n        [placeholder]=\"config.placeholder ?? ''\"\n        [formControl]=\"control\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\">\n      </textarea>\n    </ng-container>\n    <ng-template #notUseFormControl>\n      <textarea\n        [readOnly]=\"config.readOnly || config.disabled\"\n        [ngClass]=\"[\n          config.resize ? '' : 'resize',\n          config.theme ? 'theme-' + config.theme : '',\n        ]\"\n        [ngStyle]=\"{ height: config.height, width: config.width }\"\n        [disabled]=\"config.disabled ?? false\"\n        [id]=\"config.id\"\n        autocomplete=\"off\"\n        [placeholder]=\"config.placeholder ?? ''\"\n        [value]=\"value\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\">\n      </textarea>\n    </ng-template>\n    <s-validation-error\n      *ngIf=\"\n        !config.hideErrorText &&\n        control &&\n        control.invalid &&\n        (isFocused || control.touched)\n      \"\n      [customErrorMessages]=\"config.errorMessages ?? undefined\"\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  </div>\n</section>\n", styles: [".s-textarea{margin-bottom:.5rem}.s-textarea__label{font-size:.875rem;color:var(--secondary-600)}.s-textarea__required{color:var(--primary-600)}.s-textarea__content textarea{width:calc(100% - 1.875rem);padding:.625rem .875rem;border:.063rem solid var(--primary-500);border-radius:.25rem;color:var(--secondary-600);writing-mode:unset;height:2.125rem;font-size:1rem;max-width:100%}.s-textarea__content:not(.disabled-active) textarea:focus-visible{outline:none;border:none;border:1px solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-textarea__content.disabled-active textarea{border-color:var(--neutrals-900);background-color:var(--neutrals-1100);color:var(--neutrals-800);resize:none}.s-textarea__content.disabled-active textarea:focus-visible{outline:none}.s-textarea__content textarea.theme-red{border:.063rem solid var(--red-600)}.s-textarea__content textarea.theme-red:focus-visible{border:1px solid var(--red-600);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-textarea__content textarea.theme-green{border:.063rem solid var(--green-600)}.s-textarea__content textarea.theme-green:focus-visible{border:1px solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-textarea__content textarea.theme-yellow{border:.063rem solid var(--yellow-500)}.s-textarea__content textarea.theme-yellow:focus-visible{border:1px solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-textarea__content .resize{resize: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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<section class=\"s-textarea\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-textarea__label\">\n    {{ config.label }}\n    <span class=\"s-textarea__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-textarea__content {{ config.classAdd }}\"\n    [ngClass]=\"{\n      'disabled-active': config.disabled || control?.status === 'DISABLED',\n    }\">\n    <ng-container *ngIf=\"control; else notUseFormControl\">\n      <textarea\n        [readOnly]=\"config.readOnly || config.disabled\"\n        class=\"theme-{{ config.theme }} {{ config.classAdd }}\"\n        [ngClass]=\"{\n          resize: !config.resize,\n          'readonly':\n            config.readOnly,\n          'theme-red':\n            (control && control.invalid && (isFocused || control.touched)) ||\n            (control && control.errors && control.touched) ||\n            config.theme === 'red',\n        }\"\n        [ngStyle]=\"{ height: config.height, width: config.width }\"\n        [id]=\"config.id\"\n        autocomplete=\"off\"\n        [placeholder]=\"config.placeholder ?? ''\"\n        [formControl]=\"control\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\">\n      </textarea>\n    </ng-container>\n    <ng-template #notUseFormControl>\n      <textarea\n        [readOnly]=\"config.readOnly || config.disabled\"\n        [ngClass]=\"[\n          config.resize ? '' : 'resize',\n          config.theme ? 'theme-' + config.theme : '',\n        ]\"\n        [ngStyle]=\"{ height: config.height, width: config.width }\"\n        [disabled]=\"config.disabled ?? false\"\n        [id]=\"config.id\"\n        autocomplete=\"off\"\n        [placeholder]=\"config.placeholder ?? ''\"\n        [value]=\"value\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\">\n      </textarea>\n    </ng-template>\n    <s-validation-error\n      *ngIf=\"\n        !config.hideErrorText &&\n        control &&\n        control.invalid &&\n        (isFocused || control.touched)\n      \"\n      [customErrorMessages]=\"config.errorMessages ?? undefined\"\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  </div>\n</section>\n", styles: [".s-textarea{margin-bottom:.5rem}.s-textarea__label{font-size:.875rem;color:var(--secondary-600)}.s-textarea__required{color:var(--primary-600)}.s-textarea__content textarea{width:calc(100% - 1.875rem);padding:.625rem .875rem;border:.063rem solid var(--primary-500);border-radius:.25rem;color:var(--secondary-600);writing-mode:unset;height:2.125rem;font-size:1rem;max-width:100%}.s-textarea__content:not(.disabled-active) textarea:focus-visible{outline:none;border:none;border:1px solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-textarea__content.disabled-active textarea{border-color:var(--neutrals-900);background-color:var(--neutrals-1100);color:var(--neutrals-800);resize:none}.s-textarea__content.disabled-active textarea:focus-visible{outline:none}.s-textarea__content textarea.readonly{background-color:var(--neutrals-1100)!important}.s-textarea__content textarea.readonly input{background-color:var(--neutrals-1100)!important;cursor:default}.s-textarea__content textarea.theme-red{border:.063rem solid var(--red-600)}.s-textarea__content textarea.theme-red:focus-visible{border:1px solid var(--red-600);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-textarea__content textarea.theme-green{border:.063rem solid var(--green-600)}.s-textarea__content textarea.theme-green:focus-visible{border:1px solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-textarea__content textarea.theme-yellow{border:.063rem solid var(--yellow-500)}.s-textarea__content textarea.theme-yellow:focus-visible{border:1px solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-textarea__content .resize{resize: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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SInputTextAreaComponent, decorators: [{
             type: Component,
@@ -2556,7 +2551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => SInputTextAreaComponent),
                             multi: true
                         }
-                    ], template: "<section class=\"s-textarea\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-textarea__label\">\n    {{ config.label }}\n    <span class=\"s-textarea__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-textarea__content {{ config.classAdd }}\"\n    [ngClass]=\"{\n      'disabled-active': config.disabled || control?.status === 'DISABLED',\n    }\">\n    <ng-container *ngIf=\"control; else notUseFormControl\">\n      <textarea\n        [readOnly]=\"config.readOnly || config.disabled\"\n        class=\"theme-{{ config.theme }} {{ config.classAdd }}\"\n        [ngClass]=\"{\n          resize: !config.resize,\n          'theme-red':\n            (control && control.invalid && (isFocused || control.touched)) ||\n            (control && control.errors && control.touched) ||\n            config.theme === 'red',\n        }\"\n        [ngStyle]=\"{ height: config.height, width: config.width }\"\n        [id]=\"config.id\"\n        autocomplete=\"off\"\n        [placeholder]=\"config.placeholder ?? ''\"\n        [formControl]=\"control\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\">\n      </textarea>\n    </ng-container>\n    <ng-template #notUseFormControl>\n      <textarea\n        [readOnly]=\"config.readOnly || config.disabled\"\n        [ngClass]=\"[\n          config.resize ? '' : 'resize',\n          config.theme ? 'theme-' + config.theme : '',\n        ]\"\n        [ngStyle]=\"{ height: config.height, width: config.width }\"\n        [disabled]=\"config.disabled ?? false\"\n        [id]=\"config.id\"\n        autocomplete=\"off\"\n        [placeholder]=\"config.placeholder ?? ''\"\n        [value]=\"value\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\">\n      </textarea>\n    </ng-template>\n    <s-validation-error\n      *ngIf=\"\n        !config.hideErrorText &&\n        control &&\n        control.invalid &&\n        (isFocused || control.touched)\n      \"\n      [customErrorMessages]=\"config.errorMessages ?? undefined\"\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  </div>\n</section>\n", styles: [".s-textarea{margin-bottom:.5rem}.s-textarea__label{font-size:.875rem;color:var(--secondary-600)}.s-textarea__required{color:var(--primary-600)}.s-textarea__content textarea{width:calc(100% - 1.875rem);padding:.625rem .875rem;border:.063rem solid var(--primary-500);border-radius:.25rem;color:var(--secondary-600);writing-mode:unset;height:2.125rem;font-size:1rem;max-width:100%}.s-textarea__content:not(.disabled-active) textarea:focus-visible{outline:none;border:none;border:1px solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-textarea__content.disabled-active textarea{border-color:var(--neutrals-900);background-color:var(--neutrals-1100);color:var(--neutrals-800);resize:none}.s-textarea__content.disabled-active textarea:focus-visible{outline:none}.s-textarea__content textarea.theme-red{border:.063rem solid var(--red-600)}.s-textarea__content textarea.theme-red:focus-visible{border:1px solid var(--red-600);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-textarea__content textarea.theme-green{border:.063rem solid var(--green-600)}.s-textarea__content textarea.theme-green:focus-visible{border:1px solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-textarea__content textarea.theme-yellow{border:.063rem solid var(--yellow-500)}.s-textarea__content textarea.theme-yellow:focus-visible{border:1px solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-textarea__content .resize{resize:none}\n"] }]
+                    ], template: "<section class=\"s-textarea\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-textarea__label\">\n    {{ config.label }}\n    <span class=\"s-textarea__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-textarea__content {{ config.classAdd }}\"\n    [ngClass]=\"{\n      'disabled-active': config.disabled || control?.status === 'DISABLED',\n    }\">\n    <ng-container *ngIf=\"control; else notUseFormControl\">\n      <textarea\n        [readOnly]=\"config.readOnly || config.disabled\"\n        class=\"theme-{{ config.theme }} {{ config.classAdd }}\"\n        [ngClass]=\"{\n          resize: !config.resize,\n          'readonly':\n            config.readOnly,\n          'theme-red':\n            (control && control.invalid && (isFocused || control.touched)) ||\n            (control && control.errors && control.touched) ||\n            config.theme === 'red',\n        }\"\n        [ngStyle]=\"{ height: config.height, width: config.width }\"\n        [id]=\"config.id\"\n        autocomplete=\"off\"\n        [placeholder]=\"config.placeholder ?? ''\"\n        [formControl]=\"control\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\">\n      </textarea>\n    </ng-container>\n    <ng-template #notUseFormControl>\n      <textarea\n        [readOnly]=\"config.readOnly || config.disabled\"\n        [ngClass]=\"[\n          config.resize ? '' : 'resize',\n          config.theme ? 'theme-' + config.theme : '',\n        ]\"\n        [ngStyle]=\"{ height: config.height, width: config.width }\"\n        [disabled]=\"config.disabled ?? false\"\n        [id]=\"config.id\"\n        autocomplete=\"off\"\n        [placeholder]=\"config.placeholder ?? ''\"\n        [value]=\"value\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\">\n      </textarea>\n    </ng-template>\n    <s-validation-error\n      *ngIf=\"\n        !config.hideErrorText &&\n        control &&\n        control.invalid &&\n        (isFocused || control.touched)\n      \"\n      [customErrorMessages]=\"config.errorMessages ?? undefined\"\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  </div>\n</section>\n", styles: [".s-textarea{margin-bottom:.5rem}.s-textarea__label{font-size:.875rem;color:var(--secondary-600)}.s-textarea__required{color:var(--primary-600)}.s-textarea__content textarea{width:calc(100% - 1.875rem);padding:.625rem .875rem;border:.063rem solid var(--primary-500);border-radius:.25rem;color:var(--secondary-600);writing-mode:unset;height:2.125rem;font-size:1rem;max-width:100%}.s-textarea__content:not(.disabled-active) textarea:focus-visible{outline:none;border:none;border:1px solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-textarea__content.disabled-active textarea{border-color:var(--neutrals-900);background-color:var(--neutrals-1100);color:var(--neutrals-800);resize:none}.s-textarea__content.disabled-active textarea:focus-visible{outline:none}.s-textarea__content textarea.readonly{background-color:var(--neutrals-1100)!important}.s-textarea__content textarea.readonly input{background-color:var(--neutrals-1100)!important;cursor:default}.s-textarea__content textarea.theme-red{border:.063rem solid var(--red-600)}.s-textarea__content textarea.theme-red:focus-visible{border:1px solid var(--red-600);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-textarea__content textarea.theme-green{border:.063rem solid var(--green-600)}.s-textarea__content textarea.theme-green:focus-visible{border:1px solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-textarea__content textarea.theme-yellow{border:.063rem solid var(--yellow-500)}.s-textarea__content textarea.theme-yellow:focus-visible{border:1px solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-textarea__content .resize{resize:none}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], blur: [{
@@ -2565,7 +2560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }] } });
 
-class SRangeComponent {
+class SSliderComponent {
     constructor() {
         this.onChange = (_) => { };
         this.onTouch = () => { };
@@ -2578,6 +2573,7 @@ class SRangeComponent {
         this.classAdd = '';
         this.size = 'md';
         this.rangeUnity = '';
+        this.showInput = false;
         this.inconSymbol = false;
         this.tooltipValue = '';
         this.valueChangeEvent = new EventEmitter();
@@ -2598,53 +2594,36 @@ class SRangeComponent {
             this.valueChangeEvent.next(this.value);
         }, 500, null);
     }
-    onTextChangeVal(val) {
-        if (this.inputTimeout) {
-            clearTimeout(this.inputTimeout);
-        }
-        this.inputTimeout = setTimeout(() => {
-            if (val) {
-                this.onTouch();
-                this.onChange(val);
-                this.valueChangeEvent.next(val);
-                this.value = val;
-            }
-            else {
-                this.onTouch();
-                this.onChange(val);
-                this.valueChangeEvent.next(this.value);
-            }
-        }, 500, null);
-    }
     clickIcon() {
         this.clickHelpIconEvent.next();
     }
     //FUNCIONES PARA TYPE RANGE 
     rangeOnLoad() {
         setTimeout(() => {
-            //RANGO TOTAL
             const rangeMax = this.max ? this.max : 100;
-            //CALCULO LA AMPLITUD PARA PODER POSICIONAR AL 50% POR DEFECTO
             let amplitudTotal = rangeMax - this.min;
             let porcion = (amplitudTotal * 50) / 100;
-            // INICIALIZA AL 50% CUANDO NO HAY VALOR PREDEFINIDO
             let value = this.value == '' ? this.min + porcion : this.value;
-            value = this.value == '' ? this.min + porcion : this.value;
-            //DEFINO EL TOOTLTIP
+            const clampedValue = this.clampValue(value);
+            if (this.value == '' || this.value === null || this.value === undefined) {
+                this.value = clampedValue.toString();
+                this.onChange(this.value);
+            }
             this.tooltipValue = this.value + this.rangeUnity;
-            this.updateTooltip(value.toString());
-            //SI ES CHROME APLICO EL FIX
+            this.updateTooltip(this.value);
             const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
             if (isChrome) {
-                //CALCCULO EL % A ASIGNAR
-                let porcentaje = ((Number(value) - this.min) / (rangeMax - this.min)) * 100;
-                document.getElementById(this.id)?.style.setProperty('margin-top', ' 0.875rem');
-                document.getElementById(this.id)?.style.setProperty('margin-bottom', ' 0.875rem');
+                let porcentaje = ((clampedValue - this.min) / (rangeMax - this.min)) * 100;
+                document.getElementById(this.id)?.style.setProperty('margin-top', '0.875rem');
+                document.getElementById(this.id)?.style.setProperty('margin-bottom', '0.875rem');
                 document.getElementById(this.id)?.style.setProperty('border-radius', '0.25rem');
-                document.getElementById(this.id)?.style.setProperty('height', ' 0.5rem');
-                document.getElementById(this.id)?.style.setProperty('background', 'linear-gradient(to right, var(--primary-600) 0%, var(--primary-600) ' + porcentaje + '%, var(--neutrals-1000) ' + porcentaje + '%, var(--neutrals-1000) 100%)');
+                document.getElementById(this.id)?.style.setProperty('height', '0.5rem');
+                document.getElementById(this.id)?.style.setProperty('background', 'linear-gradient(to right, var(--primary-600) 0%, var(--primary-600) ' +
+                    porcentaje +
+                    '%, var(--neutrals-1000) ' +
+                    porcentaje +
+                    '%, var(--neutrals-1000) 100%)');
             }
-            ;
         }, 0);
     }
     //FUNCION PARA CHROME CUANDO SE DESLIZA EL SLIDE FUNCIONE CORRECTAMENTE
@@ -2655,7 +2634,6 @@ class SRangeComponent {
             let porcentaje = ((value - this.min) / (rangeMax - this.min)) * 100;
             document.getElementById(this.id)?.style.setProperty('background', 'linear-gradient(to right, var(--primary-600) 0%, var(--primary-600) ' + porcentaje + '%, var(--neutrals-1000) ' + porcentaje + '%, var(--neutrals-1000) 100%)');
         }
-        ;
     }
     //FUNCION QUE ACTUALIZA EL TOOLTIP CUANDO SE DESLIZA EL SLIDE
     updateTooltip(value) {
@@ -2676,8 +2654,9 @@ class SRangeComponent {
     //FIN FUNCIONES PARA TYPE RANGE
     //FUNCIONES PARA QUE FUNCIONE FORM BUILDER
     writeValue(value) {
-        if (value) {
-            this.value = value;
+        if (value !== null && value !== undefined) {
+            const clampedValue = this.clampValue(value);
+            this.value = clampedValue.toString();
             this.rangeOnLoad();
         }
     }
@@ -2693,30 +2672,55 @@ class SRangeComponent {
     onFocus(event) {
         this.focus.next(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SRangeComponent, selector: "s-range", inputs: { value: "value", id: "id", label: "label", required: "required", helpText: "helpText", errorText: "errorText", disabled: "disabled", max: "max", min: "min", step: "step", readOnly: "readOnly", classAdd: "classAdd", size: "size", rangeUnity: "rangeUnity" }, outputs: { valueChangeEvent: "valueChangeEvent", clickHelpIconEvent: "clickHelpIconEvent", blur: "blur", focus: "focus" }, providers: [
+    onNumberInput(event) {
+        const input = event.target;
+        const clampedValue = this.clampValue(input.value);
+        input.value = clampedValue.toString();
+        this.value = input.value;
+        this.updateTooltip(this.value);
+        this.changeRange(this.value);
+        this.onTextChange();
+    }
+    clampValue(value) {
+        let num = Number(value);
+        if (isNaN(num)) {
+            return this.min;
+        }
+        if (this.max !== undefined && num > this.max) {
+            return this.max;
+        }
+        if (num < this.min) {
+            return this.min;
+        }
+        return num;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SSliderComponent, selector: "s-slider", inputs: { value: "value", id: "id", label: "label", required: "required", helpText: "helpText", errorText: "errorText", disabled: "disabled", max: "max", min: "min", step: "step", readOnly: "readOnly", classAdd: "classAdd", size: "size", rangeUnity: "rangeUnity", showInput: "showInput" }, outputs: { valueChangeEvent: "valueChangeEvent", clickHelpIconEvent: "clickHelpIconEvent", blur: "blur", focus: "focus" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => SRangeComponent),
+                useExisting: forwardRef(() => SSliderComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "tooltipContainer", first: true, predicate: ["tooltipContainer"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<ng-container>\n  <label *ngIf=\"label\" class=\"s-range__label\">\n\t\t{{label}}\n\t\t<span class=\"s-range__required\" *ngIf=\"required\">*</span>\n\t</label>\n  <div class=\"s-range__content {{classAdd}}\" [ngClass]=\"{'disabled-active': disabled}\">\n      <div class=\"tooltip tooltip-{{disabled}}\" #tooltipContainer>\n          <input\n              #rangeField \n              [id]=\"id\"\n              [step]=\"step\"\n              autocomplete=\"off\"\n              [disabled]=\"disabled\"\n              [readOnly]=\"readOnly\"\n              [type]=\"'range'\"\n              max={{max}}\n              min={{min}}\n              [(ngModel)]=\"value\"\n              (blur)=\"onBlur($event)\"\n              (focus)=\"onFocus($event)\"\n              (ngModelChange)=\"onTextChange()\"\n              (mousemove)=\"!readOnly && changeRange(rangeField.value)\"\n              (input)=\"!readOnly && updateTooltip(rangeField.value)\"\n              (mousedown)=\"preventInteraction($event)\"\n              >\n              <span class=\"tooltiptext\" #tooltip>{{ tooltipValue }}</span>\n      </div>\n  </div>\n  <s-error-control *ngIf=\"errorText\" theme =\"red\">{{errorText}}</s-error-control>\n\t<s-error-control *ngIf=\"helpText && !errorText\">{{helpText}}</s-error-control>\n</ng-container>", styles: [".s-range__label{font-size:.875rem;color:var(--secondary-600)}.s-range__required{color:var(--primary-600)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-range__content input{width:100%;height:2.25rem;margin:0;-webkit-appearance:none}.s-range__content input[type=range]::-webkit-slider-runnable-track{border-radius:.25rem;height:.5rem}.s-range__content input[type=range]::-moz-range-track{appearance:none;background-color:var(--neutrals-1000)!important;height:.5rem;border-radius:.25rem}.s-range__content input[type=range]::-ms-track{appearance:none;background-color:var(--neutrals-1000)!important;height:.5rem;border-radius:.25rem}.s-range__content input[type=range]::-moz-range-progress{appearance:none;background-color:var(--primary-600)!important;height:.5rem;border-radius:.25rem}.s-range__content input[type=range]::-ms-fill-upper{appearance:none;background-color:var(--primary-600)!important;height:.5rem;border-radius:.25rem}.s-range__content input[type=range]::-webkit-slider-thumb{box-sizing:border-box;-webkit-appearance:none;border:unset;outline:unset;box-shadow:unset;width:1.5rem;height:1.5rem;border-radius:50%;border:.18rem solid var(--primary-600);background:var(--neutrals-1200);margin-top:-.5rem}.s-range__content input[type=range]::-moz-range-thumb{box-sizing:border-box;-webkit-appearance:none;border:unset;outline:unset;box-shadow:unset;width:1.5rem;height:1.5rem;border-radius:50%;border:.18rem solid var(--primary-600);background:var(--neutrals-1200)}.s-range__content input[type=range]::-ms-thumb{box-sizing:border-box;-webkit-appearance:none;border:unset;outline:unset;box-shadow:unset;width:1.5rem;height:1.5rem;border-radius:50%;border:.18rem solid var(--primary-600);background:var(--neutrals-1200)}.s-range__content input[type=range]::-webkit-slider-thumb:hover{border:.18rem solid var(--primary-600);background:var(--primary-200)}.s-range__content input[type=range]::-moz-range-thumb:hover{border:.18rem solid var(--primary-600);background:var(--primary-200)}.s-range__content input[type=range]::-ms-thumb:hover{border:.18rem solid var(--primary-600);background:var(--primary-200)}.s-range__content input[type=range]::-webkit-slider-thumb:active{border:.18rem solid var(--primary-600);background:var(--primary-600);box-shadow:0 .0625rem .125rem 0 var(--blue-alpha-100),0 0 0 .25rem var(--cyan-alpha-200)}.s-range__content input[type=range]::-moz-range-thumb:active{border:.18rem solid var(--primary-600);background:var(--primary-600);box-shadow:0 .0625rem .125rem 0 var(--blue-alpha-100),0 0 0 .25rem var(--cyan-alpha-200)}.s-range__content input[type=range]::-ms-thumb:active{border:.18rem solid var(--primary-600);background:var(--primary-600);box-shadow:0 .0625rem .125rem 0 var(--blue-alpha-100),0 0 0 .25rem var(--cyan-alpha-200)}.s-range__content input[type=range]:disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}.tooltip{position:relative;display:inline-block;cursor:pointer;width:100%}.tooltip .tooltiptext{visibility:hidden;width:2.5rem;background-color:var(--neutrals-1200);color:var(--secondary-600);font-weight:700;font-size:.75rem;text-align:center;border-radius:.25rem;padding:.31rem;position:absolute;z-index:1;bottom:100%;left:550%;transform:translate(-50%);box-shadow:var(--E200)}.tooltip-false:hover .tooltiptext{visibility:visible}.tooltip .tooltiptext:before{content:\"\";position:absolute!important;transform:rotate(45deg);height:.625rem;width:.625rem;bottom:-.31rem;background-color:var(--neutrals-1200);box-shadow:var(--E200);left:40%}\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: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "tooltipContainer", first: true, predicate: ["tooltipContainer"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }, { propertyName: "numberInput", first: true, predicate: ["numberInput"], descendants: true }], ngImport: i0, template: "<ng-container>\n  <label *ngIf=\"label\" class=\"s-slider__label\">\n    {{ label }}\n    <span class=\"s-slider__required\" *ngIf=\"required\">*</span>\n  </label>\n  <div class=\"s-slider__row\" [ngClass]=\"{ 'with-input': showInput }\">\n    <div class=\"s-slider__content {{ classAdd }}\" [ngClass]=\"{ 'disabled-active': disabled }\">\n      <div class=\"tooltip tooltip-{{ disabled }}\" #tooltipContainer>\n        <input #rangeField [id]=\"id\" type=\"range\" [min]=\"min\" [max]=\"max ?? null\" [step]=\"step\" autocomplete=\"off\"\n          [disabled]=\"disabled\" [readOnly]=\"readOnly\" [(ngModel)]=\"value\" (blur)=\"onBlur($event)\"\n          (focus)=\"onFocus($event)\" (ngModelChange)=\"onTextChange()\"\n          (mousemove)=\"!readOnly && changeRange(rangeField.value)\"\n          (input)=\"!readOnly && updateTooltip(rangeField.value)\" (mousedown)=\"preventInteraction($event)\" />\n        <span class=\"tooltiptext\" #tooltip>{{ tooltipValue }}</span>\n      </div>\n    </div>\n      <s-input *ngIf=\"showInput\" #numberInput type=\"number\" class=\"s-slider__number\" [disabled]=\"disabled\" [(ngModel)]=\"value\" (input)=\"onNumberInput($event)\"> </s-input>\n  </div>\n  <s-error-control *ngIf=\"errorText\" theme=\"red\">{{ errorText }}</s-error-control>\n  <s-error-control *ngIf=\"helpText && !errorText\">\n    <i class=\"s-slider__help-icon\">i</i>\n    {{ helpText }}\n  </s-error-control>\n</ng-container>", styles: [".s-slider__label{font-size:.875rem;color:var(--secondary-600)}.s-slider__required{color:var(--primary-600)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-slider__content input{width:100%;height:2.25rem;margin:0;-webkit-appearance:none}.s-slider__help{display:flex;align-items:center;gap:.375rem;margin-top:.25rem;font-size:.75rem;color:var(--secondary-600)}.s-slider__help-icon{width:1rem;height:1rem;border-radius:50%;background:var(--secondary-600);color:var(--neutrals-1200);font-size:.625rem;display:flex;align-items:center;justify-content:center;font-weight:700}.s-slider__wrapper{display:flex;align-items:center;gap:.75rem}.s-slider__wrapper.with-input .s-slider__content{flex:1}.s-slider__number{width:3.5rem;height:2.25rem;text-align:center;border-radius:.25rem}.s-slider__help-icon{margin-right:.5rem}.s-slider__row.with-input{display:flex;align-items:center;gap:2rem}.s-slider__content{width:-webkit-fill-available}.s-slider__content input[type=range]::-webkit-slider-runnable-track{border-radius:.25rem;height:.5rem}.s-slider__content input[type=range]::-moz-slider-track{appearance:none;background-color:var(--neutrals-1000)!important;height:.5rem;border-radius:.25rem}.s-slider__content input[type=range]::-ms-track{appearance:none;background-color:var(--neutrals-1000)!important;height:.5rem;border-radius:.25rem}.s-slider__content input[type=range]::-moz-slider-progress{appearance:none;background-color:var(--primary-600)!important;height:.5rem;border-radius:.25rem}.s-slider__content input[type=range]::-ms-fill-upper{appearance:none;background-color:var(--primary-600)!important;height:.5rem;border-radius:.25rem}.s-slider__content input[type=range]::-webkit-slider-thumb{box-sizing:border-box;-webkit-appearance:none;border:unset;outline:unset;box-shadow:unset;width:1.5rem;height:1.5rem;border-radius:50%;border:.18rem solid var(--primary-600);background:var(--neutrals-1200);margin-top:-.5rem}.s-slider__content input[type=range]::-moz-slider-thumb{box-sizing:border-box;-webkit-appearance:none;border:unset;outline:unset;box-shadow:unset;width:1.5rem;height:1.5rem;border-radius:50%;border:.18rem solid var(--primary-600);background:var(--neutrals-1200)}.s-slider__content input[type=range]::-ms-thumb{box-sizing:border-box;-webkit-appearance:none;border:unset;outline:unset;box-shadow:unset;width:1.5rem;height:1.5rem;border-radius:50%;border:.18rem solid var(--primary-600);background:var(--neutrals-1200)}.s-slider__content input[type=range]::-webkit-slider-thumb:hover{border:.18rem solid var(--primary-600);background:var(--primary-200)}.s-slider__content input[type=range]::-moz-slider-thumb:hover{border:.18rem solid var(--primary-600);background:var(--primary-200)}.s-slider__content input[type=range]::-ms-thumb:hover{border:.18rem solid var(--primary-600);background:var(--primary-200)}.s-slider__content input[type=range]::-webkit-slider-thumb:active{border:.18rem solid var(--primary-600);background:var(--primary-600);box-shadow:0 .0625rem .125rem 0 var(--blue-alpha-100),0 0 0 .25rem var(--cyan-alpha-200)}.s-slider__content input[type=range]::-moz-slider-thumb:active{border:.18rem solid var(--primary-600);background:var(--primary-600);box-shadow:0 .0625rem .125rem 0 var(--blue-alpha-100),0 0 0 .25rem var(--cyan-alpha-200)}.s-slider__content input[type=range]::-ms-thumb:active{border:.18rem solid var(--primary-600);background:var(--primary-600);box-shadow:0 .0625rem .125rem 0 var(--blue-alpha-100),0 0 0 .25rem var(--cyan-alpha-200)}.s-slider__content input[type=range]:disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}.tooltip{position:relative;display:inline-block;cursor:pointer;width:100%}.tooltip .tooltiptext{visibility:hidden;width:2.5rem;background-color:var(--neutrals-1200);color:var(--secondary-600);font-weight:700;font-size:.75rem;text-align:center;border-radius:.25rem;padding:.31rem;position:absolute;z-index:1;bottom:100%;left:550%;transform:translate(-50%);box-shadow:var(--E200)}.tooltip-false:hover .tooltiptext{visibility:visible}.tooltip .tooltiptext:before{content:\"\";position:absolute!important;transform:rotate(45deg);height:.625rem;width:.625rem;bottom:-.31rem;background-color:var(--neutrals-1200);box-shadow:var(--E200);left:40%}\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.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { 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: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SInputComponent, selector: "s-input", inputs: ["config"], outputs: ["clickHelpIconEvent", "blur", "focus"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-range', encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 's-slider', encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => SRangeComponent),
+                            useExisting: forwardRef(() => SSliderComponent),
                             multi: true
                         }
-                    ], template: "<ng-container>\n  <label *ngIf=\"label\" class=\"s-range__label\">\n\t\t{{label}}\n\t\t<span class=\"s-range__required\" *ngIf=\"required\">*</span>\n\t</label>\n  <div class=\"s-range__content {{classAdd}}\" [ngClass]=\"{'disabled-active': disabled}\">\n      <div class=\"tooltip tooltip-{{disabled}}\" #tooltipContainer>\n          <input\n              #rangeField \n              [id]=\"id\"\n              [step]=\"step\"\n              autocomplete=\"off\"\n              [disabled]=\"disabled\"\n              [readOnly]=\"readOnly\"\n              [type]=\"'range'\"\n              max={{max}}\n              min={{min}}\n              [(ngModel)]=\"value\"\n              (blur)=\"onBlur($event)\"\n              (focus)=\"onFocus($event)\"\n              (ngModelChange)=\"onTextChange()\"\n              (mousemove)=\"!readOnly && changeRange(rangeField.value)\"\n              (input)=\"!readOnly && updateTooltip(rangeField.value)\"\n              (mousedown)=\"preventInteraction($event)\"\n              >\n              <span class=\"tooltiptext\" #tooltip>{{ tooltipValue }}</span>\n      </div>\n  </div>\n  <s-error-control *ngIf=\"errorText\" theme =\"red\">{{errorText}}</s-error-control>\n\t<s-error-control *ngIf=\"helpText && !errorText\">{{helpText}}</s-error-control>\n</ng-container>", styles: [".s-range__label{font-size:.875rem;color:var(--secondary-600)}.s-range__required{color:var(--primary-600)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-range__content input{width:100%;height:2.25rem;margin:0;-webkit-appearance:none}.s-range__content input[type=range]::-webkit-slider-runnable-track{border-radius:.25rem;height:.5rem}.s-range__content input[type=range]::-moz-range-track{appearance:none;background-color:var(--neutrals-1000)!important;height:.5rem;border-radius:.25rem}.s-range__content input[type=range]::-ms-track{appearance:none;background-color:var(--neutrals-1000)!important;height:.5rem;border-radius:.25rem}.s-range__content input[type=range]::-moz-range-progress{appearance:none;background-color:var(--primary-600)!important;height:.5rem;border-radius:.25rem}.s-range__content input[type=range]::-ms-fill-upper{appearance:none;background-color:var(--primary-600)!important;height:.5rem;border-radius:.25rem}.s-range__content input[type=range]::-webkit-slider-thumb{box-sizing:border-box;-webkit-appearance:none;border:unset;outline:unset;box-shadow:unset;width:1.5rem;height:1.5rem;border-radius:50%;border:.18rem solid var(--primary-600);background:var(--neutrals-1200);margin-top:-.5rem}.s-range__content input[type=range]::-moz-range-thumb{box-sizing:border-box;-webkit-appearance:none;border:unset;outline:unset;box-shadow:unset;width:1.5rem;height:1.5rem;border-radius:50%;border:.18rem solid var(--primary-600);background:var(--neutrals-1200)}.s-range__content input[type=range]::-ms-thumb{box-sizing:border-box;-webkit-appearance:none;border:unset;outline:unset;box-shadow:unset;width:1.5rem;height:1.5rem;border-radius:50%;border:.18rem solid var(--primary-600);background:var(--neutrals-1200)}.s-range__content input[type=range]::-webkit-slider-thumb:hover{border:.18rem solid var(--primary-600);background:var(--primary-200)}.s-range__content input[type=range]::-moz-range-thumb:hover{border:.18rem solid var(--primary-600);background:var(--primary-200)}.s-range__content input[type=range]::-ms-thumb:hover{border:.18rem solid var(--primary-600);background:var(--primary-200)}.s-range__content input[type=range]::-webkit-slider-thumb:active{border:.18rem solid var(--primary-600);background:var(--primary-600);box-shadow:0 .0625rem .125rem 0 var(--blue-alpha-100),0 0 0 .25rem var(--cyan-alpha-200)}.s-range__content input[type=range]::-moz-range-thumb:active{border:.18rem solid var(--primary-600);background:var(--primary-600);box-shadow:0 .0625rem .125rem 0 var(--blue-alpha-100),0 0 0 .25rem var(--cyan-alpha-200)}.s-range__content input[type=range]::-ms-thumb:active{border:.18rem solid var(--primary-600);background:var(--primary-600);box-shadow:0 .0625rem .125rem 0 var(--blue-alpha-100),0 0 0 .25rem var(--cyan-alpha-200)}.s-range__content input[type=range]:disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}.tooltip{position:relative;display:inline-block;cursor:pointer;width:100%}.tooltip .tooltiptext{visibility:hidden;width:2.5rem;background-color:var(--neutrals-1200);color:var(--secondary-600);font-weight:700;font-size:.75rem;text-align:center;border-radius:.25rem;padding:.31rem;position:absolute;z-index:1;bottom:100%;left:550%;transform:translate(-50%);box-shadow:var(--E200)}.tooltip-false:hover .tooltiptext{visibility:visible}.tooltip .tooltiptext:before{content:\"\";position:absolute!important;transform:rotate(45deg);height:.625rem;width:.625rem;bottom:-.31rem;background-color:var(--neutrals-1200);box-shadow:var(--E200);left:40%}\n"] }]
+                    ], template: "<ng-container>\n  <label *ngIf=\"label\" class=\"s-slider__label\">\n    {{ label }}\n    <span class=\"s-slider__required\" *ngIf=\"required\">*</span>\n  </label>\n  <div class=\"s-slider__row\" [ngClass]=\"{ 'with-input': showInput }\">\n    <div class=\"s-slider__content {{ classAdd }}\" [ngClass]=\"{ 'disabled-active': disabled }\">\n      <div class=\"tooltip tooltip-{{ disabled }}\" #tooltipContainer>\n        <input #rangeField [id]=\"id\" type=\"range\" [min]=\"min\" [max]=\"max ?? null\" [step]=\"step\" autocomplete=\"off\"\n          [disabled]=\"disabled\" [readOnly]=\"readOnly\" [(ngModel)]=\"value\" (blur)=\"onBlur($event)\"\n          (focus)=\"onFocus($event)\" (ngModelChange)=\"onTextChange()\"\n          (mousemove)=\"!readOnly && changeRange(rangeField.value)\"\n          (input)=\"!readOnly && updateTooltip(rangeField.value)\" (mousedown)=\"preventInteraction($event)\" />\n        <span class=\"tooltiptext\" #tooltip>{{ tooltipValue }}</span>\n      </div>\n    </div>\n      <s-input *ngIf=\"showInput\" #numberInput type=\"number\" class=\"s-slider__number\" [disabled]=\"disabled\" [(ngModel)]=\"value\" (input)=\"onNumberInput($event)\"> </s-input>\n  </div>\n  <s-error-control *ngIf=\"errorText\" theme=\"red\">{{ errorText }}</s-error-control>\n  <s-error-control *ngIf=\"helpText && !errorText\">\n    <i class=\"s-slider__help-icon\">i</i>\n    {{ helpText }}\n  </s-error-control>\n</ng-container>", styles: [".s-slider__label{font-size:.875rem;color:var(--secondary-600)}.s-slider__required{color:var(--primary-600)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-slider__content input{width:100%;height:2.25rem;margin:0;-webkit-appearance:none}.s-slider__help{display:flex;align-items:center;gap:.375rem;margin-top:.25rem;font-size:.75rem;color:var(--secondary-600)}.s-slider__help-icon{width:1rem;height:1rem;border-radius:50%;background:var(--secondary-600);color:var(--neutrals-1200);font-size:.625rem;display:flex;align-items:center;justify-content:center;font-weight:700}.s-slider__wrapper{display:flex;align-items:center;gap:.75rem}.s-slider__wrapper.with-input .s-slider__content{flex:1}.s-slider__number{width:3.5rem;height:2.25rem;text-align:center;border-radius:.25rem}.s-slider__help-icon{margin-right:.5rem}.s-slider__row.with-input{display:flex;align-items:center;gap:2rem}.s-slider__content{width:-webkit-fill-available}.s-slider__content input[type=range]::-webkit-slider-runnable-track{border-radius:.25rem;height:.5rem}.s-slider__content input[type=range]::-moz-slider-track{appearance:none;background-color:var(--neutrals-1000)!important;height:.5rem;border-radius:.25rem}.s-slider__content input[type=range]::-ms-track{appearance:none;background-color:var(--neutrals-1000)!important;height:.5rem;border-radius:.25rem}.s-slider__content input[type=range]::-moz-slider-progress{appearance:none;background-color:var(--primary-600)!important;height:.5rem;border-radius:.25rem}.s-slider__content input[type=range]::-ms-fill-upper{appearance:none;background-color:var(--primary-600)!important;height:.5rem;border-radius:.25rem}.s-slider__content input[type=range]::-webkit-slider-thumb{box-sizing:border-box;-webkit-appearance:none;border:unset;outline:unset;box-shadow:unset;width:1.5rem;height:1.5rem;border-radius:50%;border:.18rem solid var(--primary-600);background:var(--neutrals-1200);margin-top:-.5rem}.s-slider__content input[type=range]::-moz-slider-thumb{box-sizing:border-box;-webkit-appearance:none;border:unset;outline:unset;box-shadow:unset;width:1.5rem;height:1.5rem;border-radius:50%;border:.18rem solid var(--primary-600);background:var(--neutrals-1200)}.s-slider__content input[type=range]::-ms-thumb{box-sizing:border-box;-webkit-appearance:none;border:unset;outline:unset;box-shadow:unset;width:1.5rem;height:1.5rem;border-radius:50%;border:.18rem solid var(--primary-600);background:var(--neutrals-1200)}.s-slider__content input[type=range]::-webkit-slider-thumb:hover{border:.18rem solid var(--primary-600);background:var(--primary-200)}.s-slider__content input[type=range]::-moz-slider-thumb:hover{border:.18rem solid var(--primary-600);background:var(--primary-200)}.s-slider__content input[type=range]::-ms-thumb:hover{border:.18rem solid var(--primary-600);background:var(--primary-200)}.s-slider__content input[type=range]::-webkit-slider-thumb:active{border:.18rem solid var(--primary-600);background:var(--primary-600);box-shadow:0 .0625rem .125rem 0 var(--blue-alpha-100),0 0 0 .25rem var(--cyan-alpha-200)}.s-slider__content input[type=range]::-moz-slider-thumb:active{border:.18rem solid var(--primary-600);background:var(--primary-600);box-shadow:0 .0625rem .125rem 0 var(--blue-alpha-100),0 0 0 .25rem var(--cyan-alpha-200)}.s-slider__content input[type=range]::-ms-thumb:active{border:.18rem solid var(--primary-600);background:var(--primary-600);box-shadow:0 .0625rem .125rem 0 var(--blue-alpha-100),0 0 0 .25rem var(--cyan-alpha-200)}.s-slider__content input[type=range]:disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}.tooltip{position:relative;display:inline-block;cursor:pointer;width:100%}.tooltip .tooltiptext{visibility:hidden;width:2.5rem;background-color:var(--neutrals-1200);color:var(--secondary-600);font-weight:700;font-size:.75rem;text-align:center;border-radius:.25rem;padding:.31rem;position:absolute;z-index:1;bottom:100%;left:550%;transform:translate(-50%);box-shadow:var(--E200)}.tooltip-false:hover .tooltiptext{visibility:visible}.tooltip .tooltiptext:before{content:\"\";position:absolute!important;transform:rotate(45deg);height:.625rem;width:.625rem;bottom:-.31rem;background-color:var(--neutrals-1200);box-shadow:var(--E200);left:40%}\n"] }]
         }], propDecorators: { tooltipContainer: [{
                 type: ViewChild,
                 args: ['tooltipContainer', { static: false }]
             }], tooltip: [{
                 type: ViewChild,
                 args: ['tooltip', { static: false }]
+            }], numberInput: [{
+                type: ViewChild,
+                args: ['numberInput', { static: false }]
             }], value: [{
                 type: Input
             }], id: [{
@@ -2745,6 +2749,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], rangeUnity: [{
                 type: Input
+            }], showInput: [{
+                type: Input
             }], valueChangeEvent: [{
                 type: Output
             }], clickHelpIconEvent: [{
@@ -2805,7 +2811,7 @@ 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:.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: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<section class=\"s-calendar\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-calendar__label\">\n    {{ config.label }}\n    <span class=\"s-calendar__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-calendar__content {{ config.size }} theme-{{ config.theme }} {{\n      config.classAdd\n    }}\"\n    [ngClass]=\"{\n      'disabled-active':\n        config.disabled || (control && control.status === 'DISABLED'),\n      'readonly':\n        config.readOnly,\n      'theme-red':\n        (control && control.invalid && (isFocused || control.touched)) ||\n        (control && control.errors && control.touched) ||\n        config.theme === 'red',\n    }\">\n    <div class=\"s-calendar__content--center\">\n      <ng-container *ngIf=\"control; else notUseFormControl\">\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'date'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [formControl]=\"control\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-container>\n      <ng-template #notUseFormControl>\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'date'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [value]=\"value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-template>\n    </div>\n    <div\n      *ngIf=\"config?.theme !== 'default' && config.theme !== undefined\"\n      class=\"s-calendar__content--right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n        ICON_THEME[config.theme]\n      }}</s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"\n        config?.theme === 'default' ||\n        (config?.theme === undefined && config.showHelp)\n      \"\n      class=\"s-calendar__content--right\">\n      <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n        >help_outline</s-icon-mat\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched)\n    \"\n    [customErrorMessages]=\"config.errorMessages\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\"\n    >{{ config.errorText }}</s-error-control\n  >\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}</s-error-control\n  >\n</section>\n", styles: [".s-calendar{margin-bottom:.5rem}.s-calendar__label{font-size:.875rem;color:var(--secondary-600)}.s-calendar__required{color:var(--primary-600)}.s-calendar__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-calendar__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-calendar__content input:focus,.s-calendar__content input:focus-visible{outline:none}.s-calendar__content .icon{width:1.25rem;cursor:default}.s-calendar__content .icon span{display:flex}.s-calendar__content--center{width:100%;background-color:var(--neutrals-1200)}.s-calendar__content--right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-calendar__content.theme-red{border:.063rem solid var(--red-500)}.s-calendar__content.theme-red .icon.report span{color:var(--red-600)}.s-calendar__content.theme-green{border:.063rem solid var(--green-500)}.s-calendar__content.theme-green .icon.report span{color:var(--green-600)}.s-calendar__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-calendar__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-calendar__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-calendar__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-calendar__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-calendar__content.readonly{background-color:var(--neutrals-1100)}.s-calendar__content.readonly input{background-color:var(--neutrals-1100);cursor:default}.s-calendar__content.sm input{height:1.3rem;font-size:.75rem}.s-calendar__content.sm .icon{width:1.25rem;cursor:default}.s-calendar__content.sm .icon span{font-size:1.2rem;display:flex}.s-calendar__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .25rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: 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,
@@ -2815,7 +2821,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:.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"] }]
+                    ], template: "<section class=\"s-calendar\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-calendar__label\">\n    {{ config.label }}\n    <span class=\"s-calendar__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-calendar__content {{ config.size }} theme-{{ config.theme }} {{\n      config.classAdd\n    }}\"\n    [ngClass]=\"{\n      'disabled-active':\n        config.disabled || (control && control.status === 'DISABLED'),\n      'readonly':\n        config.readOnly,\n      'theme-red':\n        (control && control.invalid && (isFocused || control.touched)) ||\n        (control && control.errors && control.touched) ||\n        config.theme === 'red',\n    }\">\n    <div class=\"s-calendar__content--center\">\n      <ng-container *ngIf=\"control; else notUseFormControl\">\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'date'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [formControl]=\"control\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-container>\n      <ng-template #notUseFormControl>\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'date'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [value]=\"value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-template>\n    </div>\n    <div\n      *ngIf=\"config?.theme !== 'default' && config.theme !== undefined\"\n      class=\"s-calendar__content--right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n        ICON_THEME[config.theme]\n      }}</s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"\n        config?.theme === 'default' ||\n        (config?.theme === undefined && config.showHelp)\n      \"\n      class=\"s-calendar__content--right\">\n      <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n        >help_outline</s-icon-mat\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched)\n    \"\n    [customErrorMessages]=\"config.errorMessages\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\"\n    >{{ config.errorText }}</s-error-control\n  >\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}</s-error-control\n  >\n</section>\n", styles: [".s-calendar{margin-bottom:.5rem}.s-calendar__label{font-size:.875rem;color:var(--secondary-600)}.s-calendar__required{color:var(--primary-600)}.s-calendar__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-calendar__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-calendar__content input:focus,.s-calendar__content input:focus-visible{outline:none}.s-calendar__content .icon{width:1.25rem;cursor:default}.s-calendar__content .icon span{display:flex}.s-calendar__content--center{width:100%;background-color:var(--neutrals-1200)}.s-calendar__content--right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-calendar__content.theme-red{border:.063rem solid var(--red-500)}.s-calendar__content.theme-red .icon.report span{color:var(--red-600)}.s-calendar__content.theme-green{border:.063rem solid var(--green-500)}.s-calendar__content.theme-green .icon.report span{color:var(--green-600)}.s-calendar__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-calendar__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-calendar__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-calendar__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-calendar__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-calendar__content.readonly{background-color:var(--neutrals-1100)}.s-calendar__content.readonly input{background-color:var(--neutrals-1100);cursor:default}.s-calendar__content.sm input{height:1.3rem;font-size:.75rem}.s-calendar__content.sm .icon{width:1.25rem;cursor:default}.s-calendar__content.sm .icon span{font-size:1.2rem;display:flex}.s-calendar__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .25rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-calendar__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], clickHelpIconEvent: [{
@@ -2876,7 +2882,7 @@ class STimeComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => STimeComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<section class=\"s-time\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-time__label\">\n    {{ config.label }}\n    <span class=\"s-time__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-time__content {{ config.size }} theme-{{ config.theme }} {{\n      config.classAdd\n    }}\"\n    [ngClass]=\"{\n      'disabled-active':\n        config.disabled || (control && control.status === 'DISABLED'),\n      'theme-red':\n        (control && control.invalid && (isFocused || control.touched)) ||\n        (control && control.errors && control.touched) ||\n        config.theme === 'red',\n    }\">\n    <div class=\"content-center\">\n      <ng-container *ngIf=\"control; else notUseFormControl\">\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'time'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [formControl]=\"control\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-container>\n      <ng-template #notUseFormControl>\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'time'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [value]=\"value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-template>\n    </div>\n    <div\n      *ngIf=\"config?.theme !== 'default' && config.theme !== undefined\"\n      class=\"content-right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n        ICON_THEME[config.theme]\n      }}</s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"\n        config?.theme === 'default' ||\n        (config?.theme === undefined && config.showHelp)\n      \"\n      class=\"content-right\">\n      <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n        >help_outline</s-icon-mat\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched)\n    \"\n    [customErrorMessages]=\"config.errorMessages\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\"\n    >{{ config.errorText }}</s-error-control\n  >\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</section>\n", styles: [".s-time{margin-bottom:.5rem}.s-time__label{font-size:.875rem;color:var(--secondary-600)}.s-time__required{color:var(--primary-600)}.s-time__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-time__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-time__content input:focus,.s-time__content input:focus-visible{outline:none}.s-time__content input:-webkit-autofill,.s-time__content input:-webkit-autofill:hover,.s-time__content input:-webkit-autofill:focus,.s-time__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-time__content .icon{width:1.25rem;cursor:default}.s-time__content .icon span{display:flex}.s-time__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-time__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-time__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-time__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-time__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-time__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-time__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-time__content.theme-red{border:.063rem solid var(--red-500)}.s-time__content.theme-red .icon.report span{color:var(--red-600)}.s-time__content.theme-green{border:.063rem solid var(--green-500)}.s-time__content.theme-green .icon.report span{color:var(--green-600)}.s-time__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-time__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-time__content.sm input{height:1.3rem;font-size:.75rem}.s-time__content.sm .icon{width:1.25rem;cursor:default}.s-time__content.sm .icon span{font-size:1.2em;display:flex}.s-time__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<section class=\"s-time\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-time__label\">\n    {{ config.label }}\n    <span class=\"s-time__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-time__content {{ config.size }} theme-{{ config.theme }} {{\n      config.classAdd\n    }}\"\n    [ngClass]=\"{\n      'disabled-active':\n        config.disabled || (control && control.status === 'DISABLED'),\n      'readonly':\n        config.readOnly,\n      'theme-red':\n        (control && control.invalid && (isFocused || control.touched)) ||\n        (control && control.errors && control.touched) ||\n        config.theme === 'red',\n    }\">\n    <div class=\"content-center\">\n      <ng-container *ngIf=\"control; else notUseFormControl\">\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'time'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [formControl]=\"control\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-container>\n      <ng-template #notUseFormControl>\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'time'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [value]=\"value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-template>\n    </div>\n    <div\n      *ngIf=\"config?.theme !== 'default' && config.theme !== undefined\"\n      class=\"content-right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n        ICON_THEME[config.theme]\n      }}</s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"\n        config?.theme === 'default' ||\n        (config?.theme === undefined && config.showHelp)\n      \"\n      class=\"content-right\">\n      <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n        >help_outline</s-icon-mat\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched)\n    \"\n    [customErrorMessages]=\"config.errorMessages\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\"\n    >{{ config.errorText }}</s-error-control\n  >\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</section>\n", styles: [".s-time{margin-bottom:.5rem}.s-time__label{font-size:.875rem;color:var(--secondary-600)}.s-time__required{color:var(--primary-600)}.s-time__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-time__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-time__content input:focus,.s-time__content input:focus-visible{outline:none}.s-time__content input:-webkit-autofill,.s-time__content input:-webkit-autofill:hover,.s-time__content input:-webkit-autofill:focus,.s-time__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-time__content .icon{width:1.25rem;cursor:default}.s-time__content .icon span{display:flex}.s-time__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-time__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-time__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-time__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-time__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-time__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-time__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-time__content.readonly{background-color:var(--neutrals-1100)}.s-time__content.readonly input{background-color:var(--neutrals-1100);cursor:default}.s-time__content.theme-red{border:.063rem solid var(--red-500)}.s-time__content.theme-red .icon.report span{color:var(--red-600)}.s-time__content.theme-green{border:.063rem solid var(--green-500)}.s-time__content.theme-green .icon.report span{color:var(--green-600)}.s-time__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-time__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-time__content.sm input{height:1.3rem;font-size:.75rem}.s-time__content.sm .icon{width:1.25rem;cursor:default}.s-time__content.sm .icon span{font-size:1.2em;display:flex}.s-time__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STimeComponent, decorators: [{
             type: Component,
@@ -2886,7 +2892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => STimeComponent),
                             multi: true
                         }
-                    ], template: "<section class=\"s-time\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-time__label\">\n    {{ config.label }}\n    <span class=\"s-time__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-time__content {{ config.size }} theme-{{ config.theme }} {{\n      config.classAdd\n    }}\"\n    [ngClass]=\"{\n      'disabled-active':\n        config.disabled || (control && control.status === 'DISABLED'),\n      'theme-red':\n        (control && control.invalid && (isFocused || control.touched)) ||\n        (control && control.errors && control.touched) ||\n        config.theme === 'red',\n    }\">\n    <div class=\"content-center\">\n      <ng-container *ngIf=\"control; else notUseFormControl\">\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'time'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [formControl]=\"control\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-container>\n      <ng-template #notUseFormControl>\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'time'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [value]=\"value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-template>\n    </div>\n    <div\n      *ngIf=\"config?.theme !== 'default' && config.theme !== undefined\"\n      class=\"content-right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n        ICON_THEME[config.theme]\n      }}</s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"\n        config?.theme === 'default' ||\n        (config?.theme === undefined && config.showHelp)\n      \"\n      class=\"content-right\">\n      <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n        >help_outline</s-icon-mat\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched)\n    \"\n    [customErrorMessages]=\"config.errorMessages\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\"\n    >{{ config.errorText }}</s-error-control\n  >\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</section>\n", styles: [".s-time{margin-bottom:.5rem}.s-time__label{font-size:.875rem;color:var(--secondary-600)}.s-time__required{color:var(--primary-600)}.s-time__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-time__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-time__content input:focus,.s-time__content input:focus-visible{outline:none}.s-time__content input:-webkit-autofill,.s-time__content input:-webkit-autofill:hover,.s-time__content input:-webkit-autofill:focus,.s-time__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-time__content .icon{width:1.25rem;cursor:default}.s-time__content .icon span{display:flex}.s-time__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-time__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-time__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-time__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-time__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-time__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-time__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-time__content.theme-red{border:.063rem solid var(--red-500)}.s-time__content.theme-red .icon.report span{color:var(--red-600)}.s-time__content.theme-green{border:.063rem solid var(--green-500)}.s-time__content.theme-green .icon.report span{color:var(--green-600)}.s-time__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-time__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-time__content.sm input{height:1.3rem;font-size:.75rem}.s-time__content.sm .icon{width:1.25rem;cursor:default}.s-time__content.sm .icon span{font-size:1.2em;display:flex}.s-time__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}\n"] }]
+                    ], template: "<section class=\"s-time\">\n  <label [for]=\"config.id\" *ngIf=\"config?.label\" class=\"s-time__label\">\n    {{ config.label }}\n    <span class=\"s-time__required\" *ngIf=\"config?.required\">*</span>\n  </label>\n  <div\n    class=\"s-time__content {{ config.size }} theme-{{ config.theme }} {{\n      config.classAdd\n    }}\"\n    [ngClass]=\"{\n      'disabled-active':\n        config.disabled || (control && control.status === 'DISABLED'),\n      'readonly':\n        config.readOnly,\n      'theme-red':\n        (control && control.invalid && (isFocused || control.touched)) ||\n        (control && control.errors && control.touched) ||\n        config.theme === 'red',\n    }\">\n    <div class=\"content-center\">\n      <ng-container *ngIf=\"control; else notUseFormControl\">\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'time'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [formControl]=\"control\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-container>\n      <ng-template #notUseFormControl>\n        <input\n          autocomplete=\"off\"\n          [readOnly]=\"config.readOnly || config.disabled\"\n          [id]=\"config.id\"\n          [type]=\"'time'\"\n          max=\"{{ config.max }}\"\n          min=\"{{ config.min }}\"\n          [value]=\"value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\" />\n      </ng-template>\n    </div>\n    <div\n      *ngIf=\"config?.theme !== 'default' && config.theme !== undefined\"\n      class=\"content-right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n        ICON_THEME[config.theme]\n      }}</s-icon-mat>\n    </div>\n    <div\n      *ngIf=\"\n        config?.theme === 'default' ||\n        (config?.theme === undefined && config.showHelp)\n      \"\n      class=\"content-right\">\n      <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n        >help_outline</s-icon-mat\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched)\n    \"\n    [customErrorMessages]=\"config.errorMessages\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\"\n    >{{ config.errorText }}</s-error-control\n  >\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</section>\n", styles: [".s-time{margin-bottom:.5rem}.s-time__label{font-size:.875rem;color:var(--secondary-600)}.s-time__required{color:var(--primary-600)}.s-time__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-time__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-time__content input:focus,.s-time__content input:focus-visible{outline:none}.s-time__content input:-webkit-autofill,.s-time__content input:-webkit-autofill:hover,.s-time__content input:-webkit-autofill:focus,.s-time__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-time__content .icon{width:1.25rem;cursor:default}.s-time__content .icon span{display:flex}.s-time__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-time__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-time__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-time__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-time__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-time__content.disabled-active .content-left{color:var(--neutrals-800)!important}.s-time__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-time__content.readonly{background-color:var(--neutrals-1100)}.s-time__content.readonly input{background-color:var(--neutrals-1100);cursor:default}.s-time__content.theme-red{border:.063rem solid var(--red-500)}.s-time__content.theme-red .icon.report span{color:var(--red-600)}.s-time__content.theme-green{border:.063rem solid var(--green-500)}.s-time__content.theme-green .icon.report span{color:var(--green-600)}.s-time__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-time__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-time__content.sm input{height:1.3rem;font-size:.75rem}.s-time__content.sm .icon{width:1.25rem;cursor:default}.s-time__content.sm .icon span{font-size:1.2em;display:flex}.s-time__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}.s-time__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], clickHelpIconEvent: [{
@@ -2909,6 +2915,7 @@ class SColorComponent {
         this.classAdd = '';
         this.help = false;
         this.size = 'md';
+        this.disabled = false;
         this.visibility = false;
         this.inconSymbol = false;
         this.ICON_THEME = ICON_THEME;
@@ -2955,13 +2962,13 @@ class SColorComponent {
         this.focus.next(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SColorComponent, selector: "s-color", inputs: { value: "value", id: "id", name: "name", label: "label", placeHolder: "placeHolder", required: "required", helpText: "helpText", errorText: "errorText", hideErrorText: "hideErrorText", readOnly: "readOnly", theme: "theme", classAdd: "classAdd", help: "help", size: "size" }, outputs: { valueChangeEvent: "valueChangeEvent", clickHelpIconEvent: "clickHelpIconEvent", blur: "blur", focus: "focus" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SColorComponent, selector: "s-color", inputs: { value: "value", id: "id", name: "name", label: "label", placeHolder: "placeHolder", required: "required", helpText: "helpText", errorText: "errorText", hideErrorText: "hideErrorText", readOnly: "readOnly", theme: "theme", classAdd: "classAdd", help: "help", size: "size", disabled: "disabled" }, outputs: { valueChangeEvent: "valueChangeEvent", clickHelpIconEvent: "clickHelpIconEvent", blur: "blur", focus: "focus" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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:.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: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], ngImport: i0, template: "<ng-container class=\"s-color\">\n  <label *ngIf=\"label\" class=\"s-color__label\" for=\"name\">\n    {{ label }}\n    <span class=\"s-color__required\" *ngIf=\"required\">*</span>\n  </label>\n  <div\n    class=\"s-color__content content-input-main-color {{ size }} theme-{{\n      theme\n    }} {{ classAdd }}\"\n    [ngClass]=\"{'disabled-active': disabled ,'readonly': readOnly}\">\n    <div class=\"content-left\">\n      <input\n        [readOnly]=\"readOnly\"\n        #color\n        [id]=\"name\"\n        [name]=\"name\"\n        type=\"color\"\n        [disabled]=\"disabled\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"onTextChange()\"\n        class=\"content-color\"/>\n    </div>\n    <div\n      role=\"button\"\n      tabindex=\"0\"\n      class=\"content-center\"\n      (click)=\"!this.readOnly ? this.color.click() : null\"\n      (keydown.enter)=\"!this.readOnly ? this.color.click() : null\">\n      <input\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        [readOnly]=\"readOnly\"\n        [id]=\"id ? id : ''\"\n        [type]=\"color\"\n        autocomplete=\"off\"\n        [placeholder]=\"placeHolder ? placeHolder : ''\"\n        [(ngModel)]=\"value\"\n        [disabled]=\"readOnly\" />\n    </div>\n    <div class=\"content-right\">\n      <s-icon-mat [type]=\"'icon'\" class=\"icon cursor\">colorize</s-icon-mat>\n    </div>\n    <div *ngIf=\"theme !== 'default'\" class=\"content-right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">\n        {{ ICON_THEME[this.theme] }}\n      </s-icon-mat>\n    </div>\n\n    <div *ngIf=\"theme === 'default' && help\" class=\"content-right\">\n      <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">\n        help_outline\n      </s-icon-mat>\n    </div>\n  </div>\n  <s-error-control *ngIf=\"!hideErrorText && errorText\" theme=\"red\">\n    {{ errorText }}\n  </s-error-control>\n  <s-error-control *ngIf=\"!hideErrorText && helpText && !errorText\">\n    {{ helpText }}\n  </s-error-control>\n</ng-container>\n", styles: [".s-color{margin-bottom:.5rem}.s-color__label{font-size:.875rem}.s-color__required{color:var(--primary-600)}.s-color__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem 0 0;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-color__content input:-webkit-autofill,.s-color__content input:-webkit-autofill:hover,.s-color__content input:-webkit-autofill:focus,.s-color__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-color__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-color__content input.content-color{width:2.5rem;padding:0}.s-color__content input:focus,.s-color__content input:focus-visible{outline:none}.s-color__content .icon{width:1.25rem;cursor:default}.s-color__content .icon span{display:flex}.s-color__content .content-center{align-items:center;display:flex;width:100%;background-color:var(--neutrals-1200)}.s-color__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;border-right:.063rem solid var(--secondary-500);padding-right:.5rem;color:var(--secondary-500);font-size:.9rem;padding-left:.5rem}.s-color__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin:.5rem;color:var(--secondary-600)}.s-color__content.theme-green{border:.063rem solid var(--green-500)}.s-color__content.theme-green .icon.report span{color:var(--green-600)}.s-color__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-color__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-color__content.theme-red{border:.063rem solid var(--red-500)}.s-color__content.theme-red .icon.report span{color:var(--red-600)}.s-color__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-color__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--secondary-600)}.s-color__content.disabled-active .content-left{color:var(--neutrals-800)!important;border-right:.063rem solid var(--neutrals-900)}.s-color__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-color__content.readonly{background-color:var(--neutrals-1100);border-color:var(--neutrals-900)}.s-color__content.readonly input{background-color:var(--neutrals-1100);color:var(--secondary-600);cursor:default}.s-color__content.readonly .content-left{color:var(--neutrals-800)}.s-color__content.readonly .content-right s-icon-mat span{color:var(--neutrals-800)}.s-color__content.sm input{height:1.3rem;font-size:.75rem}.s-color__content.sm .icon{width:1.25rem;cursor:default}.s-color__content.sm .icon span{font-size:1.2em;display:flex}.s-color__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: 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,
@@ -2971,7 +2978,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:.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"] }]
+                    ], template: "<ng-container class=\"s-color\">\n  <label *ngIf=\"label\" class=\"s-color__label\" for=\"name\">\n    {{ label }}\n    <span class=\"s-color__required\" *ngIf=\"required\">*</span>\n  </label>\n  <div\n    class=\"s-color__content content-input-main-color {{ size }} theme-{{\n      theme\n    }} {{ classAdd }}\"\n    [ngClass]=\"{'disabled-active': disabled ,'readonly': readOnly}\">\n    <div class=\"content-left\">\n      <input\n        [readOnly]=\"readOnly\"\n        #color\n        [id]=\"name\"\n        [name]=\"name\"\n        type=\"color\"\n        [disabled]=\"disabled\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"onTextChange()\"\n        class=\"content-color\"/>\n    </div>\n    <div\n      role=\"button\"\n      tabindex=\"0\"\n      class=\"content-center\"\n      (click)=\"!this.readOnly ? this.color.click() : null\"\n      (keydown.enter)=\"!this.readOnly ? this.color.click() : null\">\n      <input\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        [readOnly]=\"readOnly\"\n        [id]=\"id ? id : ''\"\n        [type]=\"color\"\n        autocomplete=\"off\"\n        [placeholder]=\"placeHolder ? placeHolder : ''\"\n        [(ngModel)]=\"value\"\n        [disabled]=\"readOnly\" />\n    </div>\n    <div class=\"content-right\">\n      <s-icon-mat [type]=\"'icon'\" class=\"icon cursor\">colorize</s-icon-mat>\n    </div>\n    <div *ngIf=\"theme !== 'default'\" class=\"content-right\">\n      <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">\n        {{ ICON_THEME[this.theme] }}\n      </s-icon-mat>\n    </div>\n\n    <div *ngIf=\"theme === 'default' && help\" class=\"content-right\">\n      <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">\n        help_outline\n      </s-icon-mat>\n    </div>\n  </div>\n  <s-error-control *ngIf=\"!hideErrorText && errorText\" theme=\"red\">\n    {{ errorText }}\n  </s-error-control>\n  <s-error-control *ngIf=\"!hideErrorText && helpText && !errorText\">\n    {{ helpText }}\n  </s-error-control>\n</ng-container>\n", styles: [".s-color{margin-bottom:.5rem}.s-color__label{font-size:.875rem}.s-color__required{color:var(--primary-600)}.s-color__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem 0 0;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-color__content input:-webkit-autofill,.s-color__content input:-webkit-autofill:hover,.s-color__content input:-webkit-autofill:focus,.s-color__content input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.875rem var(--neutrals-1200) inset!important}.s-color__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-color__content input.content-color{width:2.5rem;padding:0}.s-color__content input:focus,.s-color__content input:focus-visible{outline:none}.s-color__content .icon{width:1.25rem;cursor:default}.s-color__content .icon span{display:flex}.s-color__content .content-center{align-items:center;display:flex;width:100%;background-color:var(--neutrals-1200)}.s-color__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;border-right:.063rem solid var(--secondary-500);padding-right:.5rem;color:var(--secondary-500);font-size:.9rem;padding-left:.5rem}.s-color__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin:.5rem;color:var(--secondary-600)}.s-color__content.theme-green{border:.063rem solid var(--green-500)}.s-color__content.theme-green .icon.report span{color:var(--green-600)}.s-color__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-color__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-color__content.theme-red{border:.063rem solid var(--red-500)}.s-color__content.theme-red .icon.report span{color:var(--red-600)}.s-color__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800)}.s-color__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--secondary-600)}.s-color__content.disabled-active .content-left{color:var(--neutrals-800)!important;border-right:.063rem solid var(--neutrals-900)}.s-color__content.disabled-active .content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-color__content.readonly{background-color:var(--neutrals-1100);border-color:var(--neutrals-900)}.s-color__content.readonly input{background-color:var(--neutrals-1100);color:var(--secondary-600);cursor:default}.s-color__content.readonly .content-left{color:var(--neutrals-800)}.s-color__content.readonly .content-right s-icon-mat span{color:var(--neutrals-800)}.s-color__content.sm input{height:1.3rem;font-size:.75rem}.s-color__content.sm .icon{width:1.25rem;cursor:default}.s-color__content.sm .icon span{font-size:1.2em;display:flex}.s-color__content:has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-color__content:has(input:focus).theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], id: [{
@@ -3000,6 +3007,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], valueChangeEvent: [{
                 type: Output
             }], clickHelpIconEvent: [{
@@ -3095,6 +3104,22 @@ class SInputNumberComponent extends ControlValueAccessorDirective {
         this.isFocused = true;
         this.focus.next(event);
     }
+    canDecrease() {
+        if (this.config.disabled || this.config.readOnly)
+            return false;
+        if (this.config.min === undefined)
+            return true;
+        const currentValue = this.getValue();
+        return currentValue > this.config.min;
+    }
+    canIncrease() {
+        if (this.config.disabled || this.config.readOnly)
+            return false;
+        if (this.config.max === undefined)
+            return true;
+        const currentValue = this.getValue();
+        return currentValue < this.config.max;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SInputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SInputNumberComponent, selector: "s-input-number", inputs: { config: "config" }, outputs: { clickHelpIconEvent: "clickHelpIconEvent", blur: "blur", focus: "focus" }, providers: [
             {
@@ -3102,7 +3127,7 @@ class SInputNumberComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => SInputNumberComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<section class=\"s-input-number\">\n  <label *ngIf=\"config.label\" class=\"s-input-number__label\" for=\"config.id\">\n    {{ config.label }}\n    <span class=\"s-input-number__required\" *ngIf=\"config.required\">*</span>\n  </label>\n  <div class=\"d-flex align-center\">\n    <div class=\"content-left mr-1\">\n      <s-button\n        [disabled]=\"config.disabled ?? false\"\n        (click)=\"numberDecrease()\"\n        [size]=\"config.size ?? 'md'\"\n        [pill]=\"true\"\n        [invert]=\"true\"\n        class=\"s-input-number__button\">\n        <s-icon-mat>remove</s-icon-mat>\n      </s-button>\n    </div>\n    <div\n      class=\"s-input-number__content {{ config.size }}\n        theme-{{ config.theme }} {{ config.classAdd }} w-100\"\n      [ngClass]=\"{\n        'disabled-active': config.disabled,\n        'theme-red':\n          (control && control.invalid && (isFocused || control.touched)) ||\n          (control && control.errors && control.touched) ||\n          config.theme === 'red',\n      }\">\n      <div class=\"content-center\">\n        <ng-container *ngIf=\"control; else notUseFormControl\">\n          <input\n            autocomplete=\"off\"\n            placeholder=\"{{ config.placeholder }}\"\n            [readOnly]=\"config.readOnly || config.disabled\"\n            [id]=\"config.id ? config.id : ''\"\n            [type]=\"'number'\"\n            max=\"{{ config.max }}\"\n            min=\"{{ config.min }}\"\n            [step]=\"config.step\"\n            [formControl]=\"getControl()\"\n            (focus)=\"onFocus($event)\"\n            (blur)=\"onBlur($event)\" />\n        </ng-container>\n        <ng-template #notUseFormControl>\n          <input\n            autocomplete=\"off\"\n            placeholder=\"{{ config.placeholder }}\"\n            [readOnly]=\"config.readOnly || config.disabled\"\n            [id]=\"config.id ? config.id : ''\"\n            [type]=\"'number'\"\n            max=\"{{ config.max }}\"\n            min=\"{{ config.min }}\"\n            [step]=\"config.step\"\n            [value]=\"value\"\n            (input)=\"onInput($event)\"\n            (focus)=\"onFocus($event)\"\n            (blur)=\"onBlur($event)\" />\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"config.theme !== 'default' && config.theme !== undefined\"\n        class=\"content-right\">\n        <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n          ICON_THEME[config.theme]\n        }}</s-icon-mat>\n      </div>\n      <div\n        *ngIf=\"\n          (config?.theme === 'default' && config.showHelp) ||\n          (config?.theme === undefined && config.showHelp)\n        \"\n        class=\"content-right\">\n        <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n          >help_outline</s-icon-mat\n        >\n      </div>\n    </div>\n    <div class=\"content-left ml-1\">\n      <s-button\n        [disabled]=\"config.disabled ?? false\"\n        (click)=\"numberIncrement()\"\n        [size]=\"config.size ?? 'md'\"\n        [pill]=\"true\"\n        [invert]=\"true\"\n        class=\"button-input-626\"\n        ><s-icon-mat>add</s-icon-mat></s-button\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched)\n    \"\n    [customErrorMessages]=\"config.errorMessages\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\"\n    >{{ config.errorText }}</s-error-control\n  >\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</section>\n", styles: [".s-input-number{margin-bottom:.5rem}.s-input-number__label{font-size:.875rem;color:var(--secondary-600)}.s-input-number__required{color:var(--primary-600)}.s-input-number__button{font-size:.93rem;font-weight:700}.s-input-number__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-input-number__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input-number__content input:focus,.s-input-number__content input:focus-visible{outline:none}.s-input-number__content input:-webkit-autofill,.s-input-number__content input:-webkit-autofill:hover,.s-input-number__content input:-webkit-autofill:focus,.s-input-number__content input:-webkit-autofill:active{-webkit-box-shadow:0rem 0rem 0rem 1.875rem var(--neutrals-1200) inset!important}.s-input-number__content input::-webkit-outer-spin-button,.s-input-number__content input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.s-input-number__content input[type=number]{-moz-appearance:textfield}.s-input-number__content .icon{width:1.25rem;cursor:default}.s-input-number__content .icon span{display:flex}.s-input-number__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input-number__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input-number__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input-number__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);outline:0}.s-input-number__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input-number__content.disabled-active.content-left{color:var(--neutrals-800)!important}.s-input-number__content.disabled-active.content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input-number__content.theme-red{border:.063rem solid var(--red-500)}.s-input-number__content.theme-red .icon.report span{color:var(--red-600)}.s-input-number__content.theme-green{border:.063rem solid var(--green-500)}.s-input-number__content.theme-green .icon.report span{color:var(--green-600)}.s-input-number__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input-number__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input-number__content .sm input{height:1.3rem;font-size:.75rem}.s-input-number__content .sm .icon{width:1.25rem;cursor:default}.s-input-number__content .sm .icon span{font-size:1.2em;display:flex}.s-input-number__content:not(.disabled-active):has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<section class=\"s-input-number\">\n  <label *ngIf=\"config.label\" class=\"s-input-number__label\" for=\"config.id\">\n    {{ config.label }}\n    <span class=\"s-input-number__required\" *ngIf=\"config.required\">*</span>\n  </label>\n  <div class=\"d-flex align-center\">\n    <div class=\"content-left mr-1\">\n      <s-button\n        [disabled]=\"!canDecrease()\"\n        (click)=\"numberDecrease()\"\n        [size]=\"config.size ?? 'md'\"\n        [pill]=\"true\"\n        [invert]=\"true\"\n        class=\"s-input-number__button\">\n        <s-icon-mat>remove</s-icon-mat>\n      </s-button>\n    </div>\n    <div\n      class=\"s-input-number__content {{ config.size }}\n        theme-{{ config.theme }} {{ config.classAdd }} w-100\"\n      [ngClass]=\"{\n        'disabled-active': config.disabled,\n        'readonly': config.readOnly,\n        'theme-red':\n          (control && control.invalid && (isFocused || control.touched)) ||\n          (control && control.errors && control.touched) ||\n          config.theme === 'red',\n      }\">\n      <div class=\"content-center\">\n        <ng-container *ngIf=\"control; else notUseFormControl\">\n          <input\n            autocomplete=\"off\"\n            placeholder=\"{{ config.placeholder }}\"\n            [readOnly]=\"config.readOnly || config.disabled\"\n            [id]=\"config.id ? config.id : ''\"\n            [type]=\"'number'\"\n            max=\"{{ config.max }}\"\n            min=\"{{ config.min }}\"\n            [step]=\"config.step\"\n            [formControl]=\"getControl()\"\n            (focus)=\"onFocus($event)\"\n            (blur)=\"onBlur($event)\" />\n        </ng-container>\n        <ng-template #notUseFormControl>\n          <input\n            autocomplete=\"off\"\n            placeholder=\"{{ config.placeholder }}\"\n            [readOnly]=\"config.readOnly || config.disabled\"\n            [id]=\"config.id ? config.id : ''\"\n            [type]=\"'number'\"\n            max=\"{{ config.max }}\"\n            min=\"{{ config.min }}\"\n            [step]=\"config.step\"\n            [value]=\"value\"\n            (input)=\"onInput($event)\"\n            (focus)=\"onFocus($event)\"\n            (blur)=\"onBlur($event)\" />\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"config.theme !== 'default' && config.theme !== undefined\"\n        class=\"content-right\">\n        <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n          ICON_THEME[config.theme]\n        }}</s-icon-mat>\n      </div>\n      <div\n        *ngIf=\"\n          (config?.theme === 'default' && config.showHelp) ||\n          (config?.theme === undefined && config.showHelp)\n        \"\n        class=\"content-right\">\n        <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n          >help_outline</s-icon-mat\n        >\n      </div>\n    </div>\n    <div class=\"content-left ml-1\">\n      <s-button\n        [disabled]=\"!canIncrease()\"\n        (click)=\"numberIncrement()\"\n        [size]=\"config.size ?? 'md'\"\n        [pill]=\"true\"\n        [invert]=\"true\"\n        class=\"button-input-626\"\n        ><s-icon-mat>add</s-icon-mat></s-button\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched)\n    \"\n    [customErrorMessages]=\"config.errorMessages\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\"\n    >{{ config.errorText }}</s-error-control\n  >\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</section>\n", styles: [".s-input-number{margin-bottom:.5rem}.s-input-number__label{font-size:.875rem;color:var(--secondary-600)}.s-input-number__required{color:var(--primary-600)}.s-input-number__button{font-size:.93rem;font-weight:700}.s-input-number__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-input-number__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input-number__content input:focus,.s-input-number__content input:focus-visible{outline:none}.s-input-number__content input:-webkit-autofill,.s-input-number__content input:-webkit-autofill:hover,.s-input-number__content input:-webkit-autofill:focus,.s-input-number__content input:-webkit-autofill:active{-webkit-box-shadow:0rem 0rem 0rem 1.875rem var(--neutrals-1200) inset!important}.s-input-number__content input::-webkit-outer-spin-button,.s-input-number__content input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.s-input-number__content input[type=number]{-moz-appearance:textfield}.s-input-number__content .icon{width:1.25rem;cursor:default}.s-input-number__content .icon span{display:flex}.s-input-number__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input-number__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input-number__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input-number__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);outline:0}.s-input-number__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input-number__content.disabled-active.content-left{color:var(--neutrals-800)!important}.s-input-number__content.disabled-active.content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input-number__content.readonly{background-color:var(--neutrals-1100)}.s-input-number__content.readonly input{background-color:var(--neutrals-1100);cursor:default;color:var(--secondary-600)}.s-input-number__content.theme-red{border:.063rem solid var(--red-500)}.s-input-number__content.theme-red .icon.report span{color:var(--red-600)}.s-input-number__content.theme-green{border:.063rem solid var(--green-500)}.s-input-number__content.theme-green .icon.report span{color:var(--green-600)}.s-input-number__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input-number__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input-number__content .sm input{height:1.3rem;font-size:.75rem}.s-input-number__content .sm .icon{width:1.25rem;cursor:default}.s-input-number__content .sm .icon span{font-size:1.2em;display:flex}.s-input-number__content:not(.disabled-active):has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SInputNumberComponent, decorators: [{
             type: Component,
@@ -3112,7 +3137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => SInputNumberComponent),
                             multi: true
                         }
-                    ], template: "<section class=\"s-input-number\">\n  <label *ngIf=\"config.label\" class=\"s-input-number__label\" for=\"config.id\">\n    {{ config.label }}\n    <span class=\"s-input-number__required\" *ngIf=\"config.required\">*</span>\n  </label>\n  <div class=\"d-flex align-center\">\n    <div class=\"content-left mr-1\">\n      <s-button\n        [disabled]=\"config.disabled ?? false\"\n        (click)=\"numberDecrease()\"\n        [size]=\"config.size ?? 'md'\"\n        [pill]=\"true\"\n        [invert]=\"true\"\n        class=\"s-input-number__button\">\n        <s-icon-mat>remove</s-icon-mat>\n      </s-button>\n    </div>\n    <div\n      class=\"s-input-number__content {{ config.size }}\n        theme-{{ config.theme }} {{ config.classAdd }} w-100\"\n      [ngClass]=\"{\n        'disabled-active': config.disabled,\n        'theme-red':\n          (control && control.invalid && (isFocused || control.touched)) ||\n          (control && control.errors && control.touched) ||\n          config.theme === 'red',\n      }\">\n      <div class=\"content-center\">\n        <ng-container *ngIf=\"control; else notUseFormControl\">\n          <input\n            autocomplete=\"off\"\n            placeholder=\"{{ config.placeholder }}\"\n            [readOnly]=\"config.readOnly || config.disabled\"\n            [id]=\"config.id ? config.id : ''\"\n            [type]=\"'number'\"\n            max=\"{{ config.max }}\"\n            min=\"{{ config.min }}\"\n            [step]=\"config.step\"\n            [formControl]=\"getControl()\"\n            (focus)=\"onFocus($event)\"\n            (blur)=\"onBlur($event)\" />\n        </ng-container>\n        <ng-template #notUseFormControl>\n          <input\n            autocomplete=\"off\"\n            placeholder=\"{{ config.placeholder }}\"\n            [readOnly]=\"config.readOnly || config.disabled\"\n            [id]=\"config.id ? config.id : ''\"\n            [type]=\"'number'\"\n            max=\"{{ config.max }}\"\n            min=\"{{ config.min }}\"\n            [step]=\"config.step\"\n            [value]=\"value\"\n            (input)=\"onInput($event)\"\n            (focus)=\"onFocus($event)\"\n            (blur)=\"onBlur($event)\" />\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"config.theme !== 'default' && config.theme !== undefined\"\n        class=\"content-right\">\n        <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n          ICON_THEME[config.theme]\n        }}</s-icon-mat>\n      </div>\n      <div\n        *ngIf=\"\n          (config?.theme === 'default' && config.showHelp) ||\n          (config?.theme === undefined && config.showHelp)\n        \"\n        class=\"content-right\">\n        <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n          >help_outline</s-icon-mat\n        >\n      </div>\n    </div>\n    <div class=\"content-left ml-1\">\n      <s-button\n        [disabled]=\"config.disabled ?? false\"\n        (click)=\"numberIncrement()\"\n        [size]=\"config.size ?? 'md'\"\n        [pill]=\"true\"\n        [invert]=\"true\"\n        class=\"button-input-626\"\n        ><s-icon-mat>add</s-icon-mat></s-button\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched)\n    \"\n    [customErrorMessages]=\"config.errorMessages\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\"\n    >{{ config.errorText }}</s-error-control\n  >\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</section>\n", styles: [".s-input-number{margin-bottom:.5rem}.s-input-number__label{font-size:.875rem;color:var(--secondary-600)}.s-input-number__required{color:var(--primary-600)}.s-input-number__button{font-size:.93rem;font-weight:700}.s-input-number__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-input-number__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input-number__content input:focus,.s-input-number__content input:focus-visible{outline:none}.s-input-number__content input:-webkit-autofill,.s-input-number__content input:-webkit-autofill:hover,.s-input-number__content input:-webkit-autofill:focus,.s-input-number__content input:-webkit-autofill:active{-webkit-box-shadow:0rem 0rem 0rem 1.875rem var(--neutrals-1200) inset!important}.s-input-number__content input::-webkit-outer-spin-button,.s-input-number__content input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.s-input-number__content input[type=number]{-moz-appearance:textfield}.s-input-number__content .icon{width:1.25rem;cursor:default}.s-input-number__content .icon span{display:flex}.s-input-number__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input-number__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input-number__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input-number__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);outline:0}.s-input-number__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input-number__content.disabled-active.content-left{color:var(--neutrals-800)!important}.s-input-number__content.disabled-active.content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input-number__content.theme-red{border:.063rem solid var(--red-500)}.s-input-number__content.theme-red .icon.report span{color:var(--red-600)}.s-input-number__content.theme-green{border:.063rem solid var(--green-500)}.s-input-number__content.theme-green .icon.report span{color:var(--green-600)}.s-input-number__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input-number__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input-number__content .sm input{height:1.3rem;font-size:.75rem}.s-input-number__content .sm .icon{width:1.25rem;cursor:default}.s-input-number__content .sm .icon span{font-size:1.2em;display:flex}.s-input-number__content:not(.disabled-active):has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"] }]
+                    ], template: "<section class=\"s-input-number\">\n  <label *ngIf=\"config.label\" class=\"s-input-number__label\" for=\"config.id\">\n    {{ config.label }}\n    <span class=\"s-input-number__required\" *ngIf=\"config.required\">*</span>\n  </label>\n  <div class=\"d-flex align-center\">\n    <div class=\"content-left mr-1\">\n      <s-button\n        [disabled]=\"!canDecrease()\"\n        (click)=\"numberDecrease()\"\n        [size]=\"config.size ?? 'md'\"\n        [pill]=\"true\"\n        [invert]=\"true\"\n        class=\"s-input-number__button\">\n        <s-icon-mat>remove</s-icon-mat>\n      </s-button>\n    </div>\n    <div\n      class=\"s-input-number__content {{ config.size }}\n        theme-{{ config.theme }} {{ config.classAdd }} w-100\"\n      [ngClass]=\"{\n        'disabled-active': config.disabled,\n        'readonly': config.readOnly,\n        'theme-red':\n          (control && control.invalid && (isFocused || control.touched)) ||\n          (control && control.errors && control.touched) ||\n          config.theme === 'red',\n      }\">\n      <div class=\"content-center\">\n        <ng-container *ngIf=\"control; else notUseFormControl\">\n          <input\n            autocomplete=\"off\"\n            placeholder=\"{{ config.placeholder }}\"\n            [readOnly]=\"config.readOnly || config.disabled\"\n            [id]=\"config.id ? config.id : ''\"\n            [type]=\"'number'\"\n            max=\"{{ config.max }}\"\n            min=\"{{ config.min }}\"\n            [step]=\"config.step\"\n            [formControl]=\"getControl()\"\n            (focus)=\"onFocus($event)\"\n            (blur)=\"onBlur($event)\" />\n        </ng-container>\n        <ng-template #notUseFormControl>\n          <input\n            autocomplete=\"off\"\n            placeholder=\"{{ config.placeholder }}\"\n            [readOnly]=\"config.readOnly || config.disabled\"\n            [id]=\"config.id ? config.id : ''\"\n            [type]=\"'number'\"\n            max=\"{{ config.max }}\"\n            min=\"{{ config.min }}\"\n            [step]=\"config.step\"\n            [value]=\"value\"\n            (input)=\"onInput($event)\"\n            (focus)=\"onFocus($event)\"\n            (blur)=\"onBlur($event)\" />\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"config.theme !== 'default' && config.theme !== undefined\"\n        class=\"content-right\">\n        <s-icon-mat [type]=\"getIconType()\" class=\"icon report\">{{\n          ICON_THEME[config.theme]\n        }}</s-icon-mat>\n      </div>\n      <div\n        *ngIf=\"\n          (config?.theme === 'default' && config.showHelp) ||\n          (config?.theme === undefined && config.showHelp)\n        \"\n        class=\"content-right\">\n        <s-icon-mat (click)=\"clickHelp()\" class=\"icon cursor\"\n          >help_outline</s-icon-mat\n        >\n      </div>\n    </div>\n    <div class=\"content-left ml-1\">\n      <s-button\n        [disabled]=\"!canIncrease()\"\n        (click)=\"numberIncrement()\"\n        [size]=\"config.size ?? 'md'\"\n        [pill]=\"true\"\n        [invert]=\"true\"\n        class=\"button-input-626\"\n        ><s-icon-mat>add</s-icon-mat></s-button\n      >\n    </div>\n  </div>\n  <s-validation-error\n    *ngIf=\"\n      !config.hideErrorText &&\n      control &&\n      control.invalid &&\n      (isFocused || control.touched)\n    \"\n    [customErrorMessages]=\"config.errorMessages\"\n    [errors]=\"control.errors\">\n  </s-validation-error>\n  <s-error-control\n    *ngIf=\"!config.hideErrorText && config.errorText\"\n    theme=\"red\"\n    >{{ config.errorText }}</s-error-control\n  >\n  <s-error-control\n    *ngIf=\"\n      !config.hideErrorText &&\n      !config.errorText &&\n      ((control && control.errors?.['required'] && !control.touched) ||\n        (control && !control.errors)) &&\n      !(isFocused && control.invalid)\n    \">\n    {{ config.helpText || '' }}\n  </s-error-control>\n</section>\n", styles: [".s-input-number{margin-bottom:.5rem}.s-input-number__label{font-size:.875rem;color:var(--secondary-600)}.s-input-number__required{color:var(--primary-600)}.s-input-number__button{font-size:.93rem;font-weight:700}.s-input-number__content{display:flex;border:.063rem solid var(--primary-500);border-radius:.25rem;padding:0 .5rem;margin:.18rem 0;background-color:var(--neutrals-1200)}.s-input-number__content input{width:100%;border:0rem;color:var(--secondary-600);writing-mode:unset;height:2.25rem;font-size:inherit;background-color:var(--neutrals-1200)}.s-input-number__content input:focus,.s-input-number__content input:focus-visible{outline:none}.s-input-number__content input:-webkit-autofill,.s-input-number__content input:-webkit-autofill:hover,.s-input-number__content input:-webkit-autofill:focus,.s-input-number__content input:-webkit-autofill:active{-webkit-box-shadow:0rem 0rem 0rem 1.875rem var(--neutrals-1200) inset!important}.s-input-number__content input::-webkit-outer-spin-button,.s-input-number__content input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.s-input-number__content input[type=number]{-moz-appearance:textfield}.s-input-number__content .icon{width:1.25rem;cursor:default}.s-input-number__content .icon span{display:flex}.s-input-number__content .content-center{width:100%;background-color:var(--neutrals-1200)}.s-input-number__content .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:.5rem;color:var(--primary-600)}.s-input-number__content .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--secondary-600)}.s-input-number__content.theme-green:has(input:focus){border:.063rem solid var(--green-500);box-shadow:0 0 0 .25rem var(--green-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.theme-yellow:has(input:focus){border:.063rem solid var(--yellow-500);box-shadow:0 0 0 .25rem var(--yellow-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.theme-red:has(input:focus){border:.063rem solid var(--red-500);box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}.s-input-number__content.disabled-active{background-color:var(--neutrals-1100);border-color:var(--neutrals-900);color:var(--neutrals-800);outline:0}.s-input-number__content.disabled-active input{background-color:var(--neutrals-1100);color:var(--neutrals-800)}.s-input-number__content.disabled-active.content-left{color:var(--neutrals-800)!important}.s-input-number__content.disabled-active.content-right s-icon-mat span{color:var(--neutrals-800)!important}.s-input-number__content.readonly{background-color:var(--neutrals-1100)}.s-input-number__content.readonly input{background-color:var(--neutrals-1100);cursor:default;color:var(--secondary-600)}.s-input-number__content.theme-red{border:.063rem solid var(--red-500)}.s-input-number__content.theme-red .icon.report span{color:var(--red-600)}.s-input-number__content.theme-green{border:.063rem solid var(--green-500)}.s-input-number__content.theme-green .icon.report span{color:var(--green-600)}.s-input-number__content.theme-yellow{border:.063rem solid var(--yellow-500)}.s-input-number__content.theme-yellow .icon.report span{color:var(--yellow-600)}.s-input-number__content .sm input{height:1.3rem;font-size:.75rem}.s-input-number__content .sm .icon{width:1.25rem;cursor:default}.s-input-number__content .sm .icon span{font-size:1.2em;display:flex}.s-input-number__content:not(.disabled-active):has(input:focus){border:.063rem solid var(--primary-600);box-shadow:0 0 0 .25rem var(--cyan-alpha-200),0 .063rem .125rem 0 var(--blue-alpha-100)}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], clickHelpIconEvent: [{
@@ -3129,7 +3154,7 @@ class SInputModule {
             SErrorControl,
             SInputComponent,
             SInputNumberComponent,
-            SRangeComponent,
+            SSliderComponent,
             SCalendarComponent,
             STimeComponent,
             SColorComponent,
@@ -3141,7 +3166,7 @@ class SInputModule {
             SErrorControl,
             SInputComponent,
             SInputNumberComponent,
-            SRangeComponent,
+            SSliderComponent,
             SCalendarComponent,
             STimeComponent,
             SColorComponent,
@@ -3161,7 +3186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SErrorControl,
                         SInputComponent,
                         SInputNumberComponent,
-                        SRangeComponent,
+                        SSliderComponent,
                         SCalendarComponent,
                         STimeComponent,
                         SColorComponent,
@@ -3179,7 +3204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SErrorControl,
                         SInputComponent,
                         SInputNumberComponent,
-                        SRangeComponent,
+                        SSliderComponent,
                         SCalendarComponent,
                         STimeComponent,
                         SColorComponent,
@@ -3346,7 +3371,7 @@ class SSelectMultipleComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => SSelectMultipleComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<article\r\n  *ngIf=\"config\"\r\n  class=\"s-select\"\r\n  [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n  <span *ngIf=\"config.label\" class=\"s-select--select-label\">\r\n    {{ config.label }}\r\n    <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n  </span>\r\n  <section\r\n    [ngClass]=\"{\r\n      'theme-red': control && control.invalid && isFocused,\r\n      'is-open': isOpen,\r\n      sm: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n      md: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD,\r\n    }\"\r\n    role=\"button\"\r\n    tabindex=\"0\"\r\n    aria-expanded=\"false\"\r\n    aria-controls=\"dropdown\"\r\n    aria-haspopup=\"true\"\r\n    class=\"s-select__main cursor\"\r\n    [ngClass]=\"config.size === 'sm' ? 'sm' : 'md'\"\r\n    (click)=\"openDropDown()\"\r\n    (keydown)=\"onKeyDownMain($event)\">\r\n    <div class=\"s-select__main__selected-option select-multiple\">\r\n      <div class=\"s-select__main__selected-option__left\">\r\n        <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n        <s-icon-mat\r\n          size=\"{{ config.size === 'md' ? '22' : '17' }}\"\r\n          class=\"iconPerson\"\r\n          *ngIf=\"config.display === 'iconperson'\">\r\n          person_outline\r\n        </s-icon-mat>\r\n        <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n          <s-avatar size=\"{{ config.size === 'sm' ? '16' : '24' }}\"></s-avatar>\r\n        </div>\r\n        <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">\r\n          {{ selectionText }}\r\n        </span>\r\n        <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">\r\n          {{ config.placeholder }}\r\n        </span>\r\n        <div class=\"s-select__main__selected-option__right\">\r\n          <s-icon-mat\r\n            *ngIf=\"!config.readOnly || !config.disabled\"\r\n            class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n            >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n  <s-validation-error\r\n    *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n    [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n    [errors]=\"control.errors\">\r\n  </s-validation-error>\r\n  <s-error-control\r\n    *ngIf=\"\r\n      !config.hideErrorText && control && control.invalid && config.errorText\r\n    \"\r\n    theme=\"red\">\r\n    {{ config.errorText }}\r\n  </s-error-control>\r\n  <s-error-control\r\n    *ngIf=\"\r\n      !config.hideErrorText &&\r\n      !config.errorText &&\r\n      control &&\r\n      !control.errors &&\r\n      config.helpText\r\n    \">\r\n    {{ config.helpText }}\r\n  </s-error-control>\r\n  <section class=\"s-select__dropdown\" *ngIf=\"isOpen\">\r\n    <div class=\"s-select__options-multiple--search\">\r\n      <!-- //TODO flag opcional, por defecto true -->\r\n      <s-input\r\n        [config]=\"configSearch\"\r\n        [(ngModel)]=\"searchText\"\r\n        (ngModelChange)=\"filter()\"></s-input>\r\n    </div>\r\n    <div\r\n      class=\"s-select__options-multiple\"\r\n      [ngClass]=\"config.size === 'sm' ? 'sm' : 'md'\">\r\n      <div\r\n        role=\"option\"\r\n        tabindex=\"0\"\r\n        class=\"s-select__item\"\r\n        [ngClass]=\"config.size === 'sm' ? 'sm' : 'md'\"\r\n        *ngFor=\"let item of options; index as i\"\r\n        (click)=\"changeItem(item)\"\r\n        [attr.aria-selected]=\"item.value\"\r\n        (keydown)=\"onKeyDownItems($event, item)\"\r\n        [class.active]=\"item.value === true\">\r\n        <div class=\"content-left select-multiple\">\r\n          <s-checkbox\r\n            [config]=\"checkItem\"\r\n            [(ngModel)]=\"item.value\"></s-checkbox>\r\n          <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n          <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n            <s-avatar\r\n              [size]=\"config.size === 'sm' ? '16' : '24'\"\r\n              [display]=\"item.user?.display\"\r\n              [letters]=\"item.user?.letters\"\r\n              [status]=\"item.user?.status\"\r\n              [urlProfileImage]=\"item.user?.url\">\r\n            </s-avatar>\r\n          </div>\r\n          <s-icon-mat\r\n            size=\"{{ config.size === 'sm' ? '17' : '22' }}\"\r\n            class=\"iconPerson\"\r\n            *ngIf=\"config.display === 'iconperson'\">\r\n            person_outline\r\n          </s-icon-mat>\r\n          <span class=\"option-value\">\r\n            {{ item.title }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"s-select__options-multiple--selected\"\r\n      [ngClass]=\"{ sm: config.size === 'sm' }\">\r\n      <div class=\"s-select__options-multiple--selected-content\">\r\n        <p class=\"s-select__options-multiple--selected-text\">\r\n          {{ this.config.selected }}: {{ this.countSelected }}\r\n        </p>\r\n        <a\r\n          tabindex=\"0\"\r\n          class=\"s-select__options-multiple--selectAllOption\"\r\n          (click)=\"selectAllEvent()\"\r\n          (keydown.enter)=\"selectAllEvent()\"\r\n          >{{\r\n            options.length === countSelected\r\n              ? config.deselectAllOptions\r\n              : config.selectAllOption\r\n          }}</a\r\n        >\r\n      </div>\r\n    </div>\r\n  </section>\r\n</article>\r\n", styles: [".s-select{width:100%;position:relative}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:3fr 4fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:4fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SInputComponent, selector: "s-input", inputs: ["config"], outputs: ["clickHelpIconEvent", "blur", "focus"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<article\r\n  *ngIf=\"config\"\r\n  class=\"s-select\"\r\n  [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n  <span *ngIf=\"config.label\" class=\"s-select--select-label\">\r\n    {{ config.label }}\r\n    <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n  </span>\r\n  <section\r\n    class=\"s-select__main cursor\"\r\n    [ngClass]=\"{\r\n      readonly: config.readOnly,\r\n      'theme-red': control && control.invalid && isFocused,\r\n      'is-open': isOpen,\r\n      sm: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n      md: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n    }\"\r\n    role=\"button\"\r\n    tabindex=\"0\"\r\n    aria-expanded=\"false\"\r\n    aria-controls=\"dropdown\"\r\n    aria-haspopup=\"true\"\r\n    (click)=\"openDropDown()\"\r\n    (keydown)=\"onKeyDownMain($event)\"\r\n    >\r\n    <div class=\"s-select__main__selected-option select-multiple\">\r\n      <div class=\"s-select__main__selected-option__left\">\r\n        <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n        <s-icon-mat\r\n          size=\"{{ config.size === 'md' ? '22' : '17' }}\"\r\n          class=\"iconPerson\"\r\n          *ngIf=\"config.display === 'iconperson'\">\r\n          person_outline\r\n        </s-icon-mat>\r\n        <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n          <s-avatar size=\"{{ config.size === 'sm' ? '16' : '24' }}\"></s-avatar>\r\n        </div>\r\n        <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">\r\n          {{ selectionText }}\r\n        </span>\r\n        <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">\r\n          {{ config.placeholder }}\r\n        </span>\r\n        <div class=\"s-select__main__selected-option__right\">\r\n          <s-icon-mat\r\n            *ngIf=\"!config.readOnly || !config.disabled\"\r\n            class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n            >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n  <s-validation-error\r\n    *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n    [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n    [errors]=\"control.errors\">\r\n  </s-validation-error>\r\n  <s-error-control\r\n    *ngIf=\"\r\n      !config.hideErrorText && control && control.invalid && config.errorText\r\n    \"\r\n    theme=\"red\">\r\n    {{ config.errorText }}\r\n  </s-error-control>\r\n  <s-error-control\r\n    *ngIf=\"\r\n      !config.hideErrorText &&\r\n      !config.errorText &&\r\n      control &&\r\n      !control.errors &&\r\n      config.helpText\r\n    \">\r\n    {{ config.helpText }}\r\n  </s-error-control>\r\n  <section class=\"s-select__dropdown\" *ngIf=\"isOpen\">\r\n    <div class=\"s-select__options-multiple--search\">\r\n      <!-- //TODO flag opcional, por defecto true -->\r\n      <s-input\r\n        [config]=\"configSearch\"\r\n        [(ngModel)]=\"searchText\"\r\n        (ngModelChange)=\"filter()\"></s-input>\r\n    </div>\r\n    <div\r\n      class=\"s-select__options-multiple\"\r\n      [ngClass]=\"config.size === 'sm' ? 'sm' : 'md'\">\r\n      <div\r\n        role=\"option\"\r\n        tabindex=\"0\"\r\n        class=\"s-select__item\"\r\n        [ngClass]=\"{sm: config.size === 'sm',md: config.size !== 'sm','no-display': !config.display}\"\r\n        *ngFor=\"let item of options; index as i\"\r\n        (click)=\"changeItem(item)\"\r\n        [attr.aria-selected]=\"item.value\"\r\n        (keydown)=\"onKeyDownItems($event, item)\"\r\n        [class.active]=\"item.value === true\">\r\n        <div class=\"content-left select-multiple\">\r\n          <s-checkbox\r\n            [config]=\"checkItem\"\r\n            [(ngModel)]=\"item.value\"></s-checkbox>\r\n          <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n          <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n            <s-avatar\r\n              [size]=\"config.size === 'sm' ? '16' : '24'\"\r\n              [display]=\"item.user?.display\"\r\n              [letters]=\"item.user?.letters\"\r\n              [status]=\"item.user?.status\"\r\n              [urlProfileImage]=\"item.user?.url\">\r\n            </s-avatar>\r\n          </div>\r\n          <s-icon-mat\r\n            size=\"{{ config.size === 'sm' ? '17' : '22' }}\"\r\n            class=\"iconPerson\"\r\n            *ngIf=\"config.display === 'iconperson'\">\r\n            person_outline\r\n          </s-icon-mat>\r\n          <span class=\"option-value\">\r\n            {{ item.title }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"s-select__options-multiple--selected\"\r\n      [ngClass]=\"{ sm: config.size === 'sm' }\">\r\n      <div class=\"s-select__options-multiple--selected-content\">\r\n        <p class=\"s-select__options-multiple--selected-text\">\r\n          {{ this.config.selected }}: {{ this.countSelected }}\r\n        </p>\r\n        <a\r\n          tabindex=\"0\"\r\n          class=\"s-select__options-multiple--selectAllOption\"\r\n          (click)=\"selectAllEvent()\"\r\n          (keydown.enter)=\"selectAllEvent()\"\r\n          >{{\r\n            options.length === countSelected\r\n              ? config.deselectAllOptions\r\n              : config.selectAllOption\r\n          }}</a\r\n        >\r\n      </div>\r\n    </div>\r\n  </section>\r\n</article>\r\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SInputComponent, selector: "s-input", inputs: ["config"], outputs: ["clickHelpIconEvent", "blur", "focus"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSelectMultipleComponent, decorators: [{
             type: Component,
@@ -3356,7 +3381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => SSelectMultipleComponent),
                             multi: true,
                         },
-                    ], template: "<article\r\n  *ngIf=\"config\"\r\n  class=\"s-select\"\r\n  [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n  <span *ngIf=\"config.label\" class=\"s-select--select-label\">\r\n    {{ config.label }}\r\n    <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n  </span>\r\n  <section\r\n    [ngClass]=\"{\r\n      'theme-red': control && control.invalid && isFocused,\r\n      'is-open': isOpen,\r\n      sm: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n      md: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD,\r\n    }\"\r\n    role=\"button\"\r\n    tabindex=\"0\"\r\n    aria-expanded=\"false\"\r\n    aria-controls=\"dropdown\"\r\n    aria-haspopup=\"true\"\r\n    class=\"s-select__main cursor\"\r\n    [ngClass]=\"config.size === 'sm' ? 'sm' : 'md'\"\r\n    (click)=\"openDropDown()\"\r\n    (keydown)=\"onKeyDownMain($event)\">\r\n    <div class=\"s-select__main__selected-option select-multiple\">\r\n      <div class=\"s-select__main__selected-option__left\">\r\n        <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n        <s-icon-mat\r\n          size=\"{{ config.size === 'md' ? '22' : '17' }}\"\r\n          class=\"iconPerson\"\r\n          *ngIf=\"config.display === 'iconperson'\">\r\n          person_outline\r\n        </s-icon-mat>\r\n        <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n          <s-avatar size=\"{{ config.size === 'sm' ? '16' : '24' }}\"></s-avatar>\r\n        </div>\r\n        <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">\r\n          {{ selectionText }}\r\n        </span>\r\n        <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">\r\n          {{ config.placeholder }}\r\n        </span>\r\n        <div class=\"s-select__main__selected-option__right\">\r\n          <s-icon-mat\r\n            *ngIf=\"!config.readOnly || !config.disabled\"\r\n            class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n            >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n  <s-validation-error\r\n    *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n    [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n    [errors]=\"control.errors\">\r\n  </s-validation-error>\r\n  <s-error-control\r\n    *ngIf=\"\r\n      !config.hideErrorText && control && control.invalid && config.errorText\r\n    \"\r\n    theme=\"red\">\r\n    {{ config.errorText }}\r\n  </s-error-control>\r\n  <s-error-control\r\n    *ngIf=\"\r\n      !config.hideErrorText &&\r\n      !config.errorText &&\r\n      control &&\r\n      !control.errors &&\r\n      config.helpText\r\n    \">\r\n    {{ config.helpText }}\r\n  </s-error-control>\r\n  <section class=\"s-select__dropdown\" *ngIf=\"isOpen\">\r\n    <div class=\"s-select__options-multiple--search\">\r\n      <!-- //TODO flag opcional, por defecto true -->\r\n      <s-input\r\n        [config]=\"configSearch\"\r\n        [(ngModel)]=\"searchText\"\r\n        (ngModelChange)=\"filter()\"></s-input>\r\n    </div>\r\n    <div\r\n      class=\"s-select__options-multiple\"\r\n      [ngClass]=\"config.size === 'sm' ? 'sm' : 'md'\">\r\n      <div\r\n        role=\"option\"\r\n        tabindex=\"0\"\r\n        class=\"s-select__item\"\r\n        [ngClass]=\"config.size === 'sm' ? 'sm' : 'md'\"\r\n        *ngFor=\"let item of options; index as i\"\r\n        (click)=\"changeItem(item)\"\r\n        [attr.aria-selected]=\"item.value\"\r\n        (keydown)=\"onKeyDownItems($event, item)\"\r\n        [class.active]=\"item.value === true\">\r\n        <div class=\"content-left select-multiple\">\r\n          <s-checkbox\r\n            [config]=\"checkItem\"\r\n            [(ngModel)]=\"item.value\"></s-checkbox>\r\n          <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n          <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n            <s-avatar\r\n              [size]=\"config.size === 'sm' ? '16' : '24'\"\r\n              [display]=\"item.user?.display\"\r\n              [letters]=\"item.user?.letters\"\r\n              [status]=\"item.user?.status\"\r\n              [urlProfileImage]=\"item.user?.url\">\r\n            </s-avatar>\r\n          </div>\r\n          <s-icon-mat\r\n            size=\"{{ config.size === 'sm' ? '17' : '22' }}\"\r\n            class=\"iconPerson\"\r\n            *ngIf=\"config.display === 'iconperson'\">\r\n            person_outline\r\n          </s-icon-mat>\r\n          <span class=\"option-value\">\r\n            {{ item.title }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"s-select__options-multiple--selected\"\r\n      [ngClass]=\"{ sm: config.size === 'sm' }\">\r\n      <div class=\"s-select__options-multiple--selected-content\">\r\n        <p class=\"s-select__options-multiple--selected-text\">\r\n          {{ this.config.selected }}: {{ this.countSelected }}\r\n        </p>\r\n        <a\r\n          tabindex=\"0\"\r\n          class=\"s-select__options-multiple--selectAllOption\"\r\n          (click)=\"selectAllEvent()\"\r\n          (keydown.enter)=\"selectAllEvent()\"\r\n          >{{\r\n            options.length === countSelected\r\n              ? config.deselectAllOptions\r\n              : config.selectAllOption\r\n          }}</a\r\n        >\r\n      </div>\r\n    </div>\r\n  </section>\r\n</article>\r\n", styles: [".s-select{width:100%;position:relative}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:3fr 4fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:4fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"] }]
+                    ], template: "<article\r\n  *ngIf=\"config\"\r\n  class=\"s-select\"\r\n  [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n  <span *ngIf=\"config.label\" class=\"s-select--select-label\">\r\n    {{ config.label }}\r\n    <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n  </span>\r\n  <section\r\n    class=\"s-select__main cursor\"\r\n    [ngClass]=\"{\r\n      readonly: config.readOnly,\r\n      'theme-red': control && control.invalid && isFocused,\r\n      'is-open': isOpen,\r\n      sm: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n      md: (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n    }\"\r\n    role=\"button\"\r\n    tabindex=\"0\"\r\n    aria-expanded=\"false\"\r\n    aria-controls=\"dropdown\"\r\n    aria-haspopup=\"true\"\r\n    (click)=\"openDropDown()\"\r\n    (keydown)=\"onKeyDownMain($event)\"\r\n    >\r\n    <div class=\"s-select__main__selected-option select-multiple\">\r\n      <div class=\"s-select__main__selected-option__left\">\r\n        <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n        <s-icon-mat\r\n          size=\"{{ config.size === 'md' ? '22' : '17' }}\"\r\n          class=\"iconPerson\"\r\n          *ngIf=\"config.display === 'iconperson'\">\r\n          person_outline\r\n        </s-icon-mat>\r\n        <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n          <s-avatar size=\"{{ config.size === 'sm' ? '16' : '24' }}\"></s-avatar>\r\n        </div>\r\n        <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">\r\n          {{ selectionText }}\r\n        </span>\r\n        <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">\r\n          {{ config.placeholder }}\r\n        </span>\r\n        <div class=\"s-select__main__selected-option__right\">\r\n          <s-icon-mat\r\n            *ngIf=\"!config.readOnly || !config.disabled\"\r\n            class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n            >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n          >\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n  <s-validation-error\r\n    *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n    [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n    [errors]=\"control.errors\">\r\n  </s-validation-error>\r\n  <s-error-control\r\n    *ngIf=\"\r\n      !config.hideErrorText && control && control.invalid && config.errorText\r\n    \"\r\n    theme=\"red\">\r\n    {{ config.errorText }}\r\n  </s-error-control>\r\n  <s-error-control\r\n    *ngIf=\"\r\n      !config.hideErrorText &&\r\n      !config.errorText &&\r\n      control &&\r\n      !control.errors &&\r\n      config.helpText\r\n    \">\r\n    {{ config.helpText }}\r\n  </s-error-control>\r\n  <section class=\"s-select__dropdown\" *ngIf=\"isOpen\">\r\n    <div class=\"s-select__options-multiple--search\">\r\n      <!-- //TODO flag opcional, por defecto true -->\r\n      <s-input\r\n        [config]=\"configSearch\"\r\n        [(ngModel)]=\"searchText\"\r\n        (ngModelChange)=\"filter()\"></s-input>\r\n    </div>\r\n    <div\r\n      class=\"s-select__options-multiple\"\r\n      [ngClass]=\"config.size === 'sm' ? 'sm' : 'md'\">\r\n      <div\r\n        role=\"option\"\r\n        tabindex=\"0\"\r\n        class=\"s-select__item\"\r\n        [ngClass]=\"{sm: config.size === 'sm',md: config.size !== 'sm','no-display': !config.display}\"\r\n        *ngFor=\"let item of options; index as i\"\r\n        (click)=\"changeItem(item)\"\r\n        [attr.aria-selected]=\"item.value\"\r\n        (keydown)=\"onKeyDownItems($event, item)\"\r\n        [class.active]=\"item.value === true\">\r\n        <div class=\"content-left select-multiple\">\r\n          <s-checkbox\r\n            [config]=\"checkItem\"\r\n            [(ngModel)]=\"item.value\"></s-checkbox>\r\n          <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n          <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n            <s-avatar\r\n              [size]=\"config.size === 'sm' ? '16' : '24'\"\r\n              [display]=\"item.user?.display\"\r\n              [letters]=\"item.user?.letters\"\r\n              [status]=\"item.user?.status\"\r\n              [urlProfileImage]=\"item.user?.url\">\r\n            </s-avatar>\r\n          </div>\r\n          <s-icon-mat\r\n            size=\"{{ config.size === 'sm' ? '17' : '22' }}\"\r\n            class=\"iconPerson\"\r\n            *ngIf=\"config.display === 'iconperson'\">\r\n            person_outline\r\n          </s-icon-mat>\r\n          <span class=\"option-value\">\r\n            {{ item.title }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"s-select__options-multiple--selected\"\r\n      [ngClass]=\"{ sm: config.size === 'sm' }\">\r\n      <div class=\"s-select__options-multiple--selected-content\">\r\n        <p class=\"s-select__options-multiple--selected-text\">\r\n          {{ this.config.selected }}: {{ this.countSelected }}\r\n        </p>\r\n        <a\r\n          tabindex=\"0\"\r\n          class=\"s-select__options-multiple--selectAllOption\"\r\n          (click)=\"selectAllEvent()\"\r\n          (keydown.enter)=\"selectAllEvent()\"\r\n          >{{\r\n            options.length === countSelected\r\n              ? config.deselectAllOptions\r\n              : config.selectAllOption\r\n          }}</a\r\n        >\r\n      </div>\r\n    </div>\r\n  </section>\r\n</article>\r\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"] }]
         }], ctorParameters: () => [{ type: SelectNavigationService }, { type: i0.Injector }], propDecorators: { config: [{
                 type: Input
             }], selectEvent: [{
@@ -3394,13 +3419,14 @@ class SSelectComponent extends ControlValueAccessorDirective {
         return this.control;
     }
     getTitle() {
-        if (this.value) {
-            const index = this.config.options.findIndex(item => item.value === this.value.toString());
-            this.activeIndex = index;
+        if (!this.config?.options?.length) {
+            return '';
+        }
+        if (this.value === null || this.value === undefined) {
+            return '';
         }
-        return this.activeIndex || this.activeIndex === 0
-            ? this.config.options[this.activeIndex].title
-            : '';
+        const option = this.config.options.find(item => item.value === this.value.toString());
+        return option?.title ?? '';
     }
     onInput(event) {
         const input = event.target;
@@ -3458,7 +3484,7 @@ class SSelectComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => SSelectComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\r\n  *ngIf=\"config\"\r\n  class=\"s-select\"\r\n  [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n  <span *ngIf=\"config.label\" class=\"s-select--select-label\"\r\n    >{{ config.label }}\r\n    <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n  </span>\r\n  <div\r\n    class=\"s-select__main cursor\"\r\n    [ngClass]=\"{\r\n      'theme-red': (control && control.invalid && isFocused ),\r\n      'is-open': isOpen,\r\n      'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n      'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n    }\"\r\n    tabIndex=\"0\"\r\n    (keydown)=\"onKeyDownMain($event)\">\r\n    <div class=\"s-select__main__selected-option select-simple\">\r\n      <div class=\"s-select__main__selected-option__left\" *ngIf=\"value\">\r\n        <ng-container *ngIf=\"control; else notUseFormControl\">\r\n          <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n          <input\r\n            [readOnly]=\"config.readOnly || config.disabled\"\r\n            [id]=\"config.id ? config.id : ''\"\r\n            [formControl]=\"getControl()\"\r\n            (focus)=\"onFocus()\"\r\n            (blur)=\"onBlur()\" />\r\n        </ng-container>\r\n        <ng-template #notUseFormControl>\r\n          <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n          <input\r\n            [readOnly]=\"config.readOnly || config.disabled\"\r\n            [id]=\"config.id ? config.id : ''\"\r\n            [value]=\"value\"\r\n            (input)=\"onInput($event)\"\r\n            (focus)=\"onFocus()\"\r\n            (blur)=\"onBlur()\" />\r\n        </ng-template>\r\n        <span>{{ getTitle() }}</span>\r\n      </div>\r\n      <div class=\"s-select__main__selected-option__left\" *ngIf=\"!value\">\r\n        <div\r\n          class=\"s-select__main__selected-option__left__content-option\"\r\n          *ngIf=\"!value\">\r\n          <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n          <span class=\"placeholder\">{{ config.placeholder }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"s-select__main__selected-option__right\">\r\n        <s-icon-mat\r\n          *ngIf=\"!config.readOnly\"\r\n          class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n          >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n        >\r\n      </div>\r\n    </div>\r\n  </div>\r\n    <s-validation-error\r\n    *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n    [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n    [errors]=\"control.errors\">\r\n  </s-validation-error>\r\n  <s-error-control\r\n    *ngIf=\"!config.hideErrorText && control && control.invalid && config.errorText\"\r\n    theme=\"red\">\r\n    {{ config.errorText }}\r\n  </s-error-control>\r\n  <s-error-control\r\n    *ngIf=\"!config.hideErrorText && !config.errorText && control && !control.errors && config.helpText\">\r\n    {{ config.helpText }}\r\n  </s-error-control>\r\n\r\n\r\n  <div class=\"s-select__options\" [ngClass]=\"{\r\n      'label-off': !config.label,\r\n      'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n      'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n      }\" *ngIf=\"isOpen\">\r\n    <section class=\"s-select__options-simple\">\r\n      <div\r\n        class=\"s-select__item\"\r\n        [ngClass]=\"{\r\n          'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n          'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n          }\"\r\n        *ngFor=\"let item of config.options; index as i\"\r\n        [class.active]=\"i === activeIndex\"\r\n        (click)=\"getSelectedValue(item)\"\r\n        (keydown)=\"onKeyDownItems($event, item)\"\r\n        tabindex=\"0\">\r\n        <div class=\"content-left select-simple\">\r\n          <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n          <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n            <s-avatar\r\n              size=\"24\"\r\n              [display]=\"item.user?.display\"\r\n              [status]=\"item.user?.status\"\r\n              [urlProfileImage]=\"item.user?.url\"></s-avatar>\r\n          </div>\r\n          <s-icon-mat\r\n            [size]=\"(config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM ? '17' : '22'\"\r\n            class=\"iconPerson\"\r\n            *ngIf=\"config.display === 'iconperson'\"\r\n            >person_outline</s-icon-mat\r\n          >\r\n          <span class=\"option-value\">\r\n            {{ item.title }}\r\n          </span>\r\n        </div>\r\n        <div class=\"content-right\" *ngIf=\"i === activeIndex\">\r\n          <s-icon-mat class=\"icon-check\">check</s-icon-mat>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #display>\r\n  <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n  <s-icon-mat\r\n    [size]=\"(config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM ? '17' : '22'\"\r\n    class=\"iconPerson\"\r\n    *ngIf=\"config.display === 'iconperson'\"\r\n    >person_outline</s-icon-mat\r\n  >\r\n  <div\r\n    *ngIf=\"\r\n      config?.display === 'profile' &&\r\n      (activeIndex || this.activeIndex === 0) &&\r\n      config.options[activeIndex]?.user\r\n    \"\r\n    class=\"content-avatar\">\r\n    <s-avatar\r\n      size=\"24\"\r\n      [status]=\"config.options[activeIndex].user?.status ?? null\"\r\n      [display]=\"config.options[activeIndex].user?.display ?? undefined\"\r\n      [urlProfileImage]=\"\r\n        config.options[activeIndex].user?.url ?? undefined\r\n      \"></s-avatar>\r\n  </div>\r\n</ng-template>", styles: [".s-select{width:100%;position:relative}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:3fr 4fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:4fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }, { 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: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: SValidationError, selector: "s-validation-error", inputs: ["errors", "customErrorMessages"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\r\n  *ngIf=\"config\"\r\n  class=\"s-select\"\r\n  [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n  <span *ngIf=\"config.label\" class=\"s-select--select-label\"\r\n    >{{ config.label }}\r\n    <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n  </span>\r\n  <div\r\n    class=\"s-select__main cursor\"\r\n    [ngClass]=\"{\r\n      'theme-red': (control && control.invalid && isFocused ),\r\n      'is-open': isOpen,\r\n      'readonly': config.readOnly,\r\n      'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n      'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n    }\"\r\n    tabIndex=\"0\"\r\n    (keydown)=\"onKeyDownMain($event)\">\r\n    <div class=\"s-select__main__selected-option select-simple\">\r\n      <div class=\"s-select__main__selected-option__left\" *ngIf=\"value\">\r\n        <ng-container *ngIf=\"control; else notUseFormControl\">\r\n          <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n          <input\r\n            [readOnly]=\"config.readOnly || config.disabled\"\r\n            [id]=\"config.id ? config.id : ''\"\r\n            [formControl]=\"getControl()\"\r\n            (focus)=\"onFocus()\"\r\n            (blur)=\"onBlur()\" />\r\n        </ng-container>\r\n        <ng-template #notUseFormControl>\r\n          <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n          <input\r\n            [readOnly]=\"config.readOnly || config.disabled\"\r\n            [id]=\"config.id ? config.id : ''\"\r\n            [value]=\"value\"\r\n            (input)=\"onInput($event)\"\r\n            (focus)=\"onFocus()\"\r\n            (blur)=\"onBlur()\" />\r\n        </ng-template>\r\n        <span>{{ getTitle() }}</span>\r\n      </div>\r\n      <div class=\"s-select__main__selected-option__left\" *ngIf=\"!value\">\r\n        <div\r\n          class=\"s-select__main__selected-option__left__content-option\"\r\n          *ngIf=\"!value\">\r\n          <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n          <span class=\"placeholder\">{{ config.placeholder }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"s-select__main__selected-option__right\">\r\n        <s-icon-mat\r\n          *ngIf=\"!config.readOnly\"\r\n          class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n          >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n        >\r\n      </div>\r\n    </div>\r\n  </div>\r\n    <s-validation-error\r\n    *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n    [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n    [errors]=\"control.errors\">\r\n  </s-validation-error>\r\n  <s-error-control\r\n    *ngIf=\"!config.hideErrorText && control && control.invalid && config.errorText\"\r\n    theme=\"red\">\r\n    {{ config.errorText }}\r\n  </s-error-control>\r\n  <s-error-control\r\n    *ngIf=\"!config.hideErrorText && !config.errorText && control && !control.errors && config.helpText\">\r\n    {{ config.helpText }}\r\n  </s-error-control>\r\n\r\n\r\n  <div class=\"s-select__options\" [ngClass]=\"{\r\n      'label-off': !config.label,\r\n      'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n      'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n      }\" *ngIf=\"isOpen\">\r\n    <section class=\"s-select__options-simple\">\r\n      <div\r\n        class=\"s-select__item\"\r\n        [ngClass]=\"{\r\n          'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n          'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD,\r\n          'no-display': !config.display\r\n          }\"\r\n        *ngFor=\"let item of config.options; index as i\"\r\n        [class.active]=\"i === activeIndex\"\r\n        (click)=\"getSelectedValue(item)\"\r\n        (keydown)=\"onKeyDownItems($event, item)\"\r\n        tabindex=\"0\">\r\n        <div class=\"content-left select-simple\">\r\n          <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n          <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n            <s-avatar\r\n              size=\"24\"\r\n              [display]=\"item.user?.display\"\r\n              [status]=\"item.user?.status\"\r\n              [urlProfileImage]=\"item.user?.url\"></s-avatar>\r\n          </div>\r\n          <s-icon-mat\r\n            [size]=\"(config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM ? '17' : '22'\"\r\n            class=\"iconPerson\"\r\n            *ngIf=\"config.display === 'iconperson'\"\r\n            >person_outline</s-icon-mat\r\n          >\r\n          <span class=\"option-value\">\r\n            {{ item.title }}\r\n          </span>\r\n        </div>\r\n        <div class=\"content-right\" *ngIf=\"i === activeIndex\">\r\n          <s-icon-mat class=\"icon-check\">check</s-icon-mat>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #display>\r\n  <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n  <s-icon-mat\r\n    [size]=\"(config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM ? '17' : '22'\"\r\n    class=\"iconPerson\"\r\n    *ngIf=\"config.display === 'iconperson'\"\r\n    >person_outline</s-icon-mat\r\n  >\r\n  <div\r\n    *ngIf=\"\r\n      config?.display === 'profile' &&\r\n      (activeIndex || this.activeIndex === 0) &&\r\n      config.options[activeIndex]?.user\r\n    \"\r\n    class=\"content-avatar\">\r\n    <s-avatar\r\n      size=\"24\"\r\n      [status]=\"config.options[activeIndex].user?.status ?? null\"\r\n      [display]=\"config.options[activeIndex].user?.display ?? undefined\"\r\n      [urlProfileImage]=\"\r\n        config.options[activeIndex].user?.url ?? undefined\r\n      \"></s-avatar>\r\n  </div>\r\n</ng-template>", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }, { 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: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { kind: "component", type: 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: SSelectComponent, decorators: [{
             type: Component,
@@ -3468,7 +3494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => SSelectComponent),
                             multi: true,
                         },
-                    ], template: "<div\r\n  *ngIf=\"config\"\r\n  class=\"s-select\"\r\n  [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n  <span *ngIf=\"config.label\" class=\"s-select--select-label\"\r\n    >{{ config.label }}\r\n    <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n  </span>\r\n  <div\r\n    class=\"s-select__main cursor\"\r\n    [ngClass]=\"{\r\n      'theme-red': (control && control.invalid && isFocused ),\r\n      'is-open': isOpen,\r\n      'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n      'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n    }\"\r\n    tabIndex=\"0\"\r\n    (keydown)=\"onKeyDownMain($event)\">\r\n    <div class=\"s-select__main__selected-option select-simple\">\r\n      <div class=\"s-select__main__selected-option__left\" *ngIf=\"value\">\r\n        <ng-container *ngIf=\"control; else notUseFormControl\">\r\n          <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n          <input\r\n            [readOnly]=\"config.readOnly || config.disabled\"\r\n            [id]=\"config.id ? config.id : ''\"\r\n            [formControl]=\"getControl()\"\r\n            (focus)=\"onFocus()\"\r\n            (blur)=\"onBlur()\" />\r\n        </ng-container>\r\n        <ng-template #notUseFormControl>\r\n          <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n          <input\r\n            [readOnly]=\"config.readOnly || config.disabled\"\r\n            [id]=\"config.id ? config.id : ''\"\r\n            [value]=\"value\"\r\n            (input)=\"onInput($event)\"\r\n            (focus)=\"onFocus()\"\r\n            (blur)=\"onBlur()\" />\r\n        </ng-template>\r\n        <span>{{ getTitle() }}</span>\r\n      </div>\r\n      <div class=\"s-select__main__selected-option__left\" *ngIf=\"!value\">\r\n        <div\r\n          class=\"s-select__main__selected-option__left__content-option\"\r\n          *ngIf=\"!value\">\r\n          <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n          <span class=\"placeholder\">{{ config.placeholder }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"s-select__main__selected-option__right\">\r\n        <s-icon-mat\r\n          *ngIf=\"!config.readOnly\"\r\n          class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n          >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n        >\r\n      </div>\r\n    </div>\r\n  </div>\r\n    <s-validation-error\r\n    *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n    [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n    [errors]=\"control.errors\">\r\n  </s-validation-error>\r\n  <s-error-control\r\n    *ngIf=\"!config.hideErrorText && control && control.invalid && config.errorText\"\r\n    theme=\"red\">\r\n    {{ config.errorText }}\r\n  </s-error-control>\r\n  <s-error-control\r\n    *ngIf=\"!config.hideErrorText && !config.errorText && control && !control.errors && config.helpText\">\r\n    {{ config.helpText }}\r\n  </s-error-control>\r\n\r\n\r\n  <div class=\"s-select__options\" [ngClass]=\"{\r\n      'label-off': !config.label,\r\n      'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n      'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n      }\" *ngIf=\"isOpen\">\r\n    <section class=\"s-select__options-simple\">\r\n      <div\r\n        class=\"s-select__item\"\r\n        [ngClass]=\"{\r\n          'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n          'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n          }\"\r\n        *ngFor=\"let item of config.options; index as i\"\r\n        [class.active]=\"i === activeIndex\"\r\n        (click)=\"getSelectedValue(item)\"\r\n        (keydown)=\"onKeyDownItems($event, item)\"\r\n        tabindex=\"0\">\r\n        <div class=\"content-left select-simple\">\r\n          <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n          <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n            <s-avatar\r\n              size=\"24\"\r\n              [display]=\"item.user?.display\"\r\n              [status]=\"item.user?.status\"\r\n              [urlProfileImage]=\"item.user?.url\"></s-avatar>\r\n          </div>\r\n          <s-icon-mat\r\n            [size]=\"(config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM ? '17' : '22'\"\r\n            class=\"iconPerson\"\r\n            *ngIf=\"config.display === 'iconperson'\"\r\n            >person_outline</s-icon-mat\r\n          >\r\n          <span class=\"option-value\">\r\n            {{ item.title }}\r\n          </span>\r\n        </div>\r\n        <div class=\"content-right\" *ngIf=\"i === activeIndex\">\r\n          <s-icon-mat class=\"icon-check\">check</s-icon-mat>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #display>\r\n  <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n  <s-icon-mat\r\n    [size]=\"(config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM ? '17' : '22'\"\r\n    class=\"iconPerson\"\r\n    *ngIf=\"config.display === 'iconperson'\"\r\n    >person_outline</s-icon-mat\r\n  >\r\n  <div\r\n    *ngIf=\"\r\n      config?.display === 'profile' &&\r\n      (activeIndex || this.activeIndex === 0) &&\r\n      config.options[activeIndex]?.user\r\n    \"\r\n    class=\"content-avatar\">\r\n    <s-avatar\r\n      size=\"24\"\r\n      [status]=\"config.options[activeIndex].user?.status ?? null\"\r\n      [display]=\"config.options[activeIndex].user?.display ?? undefined\"\r\n      [urlProfileImage]=\"\r\n        config.options[activeIndex].user?.url ?? undefined\r\n      \"></s-avatar>\r\n  </div>\r\n</ng-template>", styles: [".s-select{width:100%;position:relative}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:3fr 4fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:4fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"] }]
+                    ], template: "<div\r\n  *ngIf=\"config\"\r\n  class=\"s-select\"\r\n  [ngClass]=\"config.disabled || control?.disabled ? 's-select--disabled' : ''\">\r\n  <span *ngIf=\"config.label\" class=\"s-select--select-label\"\r\n    >{{ config.label }}\r\n    <span class=\"s-select--required\" *ngIf=\"config?.required\">*</span>\r\n  </span>\r\n  <div\r\n    class=\"s-select__main cursor\"\r\n    [ngClass]=\"{\r\n      'theme-red': (control && control.invalid && isFocused ),\r\n      'is-open': isOpen,\r\n      'readonly': config.readOnly,\r\n      'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n      'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n    }\"\r\n    tabIndex=\"0\"\r\n    (keydown)=\"onKeyDownMain($event)\">\r\n    <div class=\"s-select__main__selected-option select-simple\">\r\n      <div class=\"s-select__main__selected-option__left\" *ngIf=\"value\">\r\n        <ng-container *ngIf=\"control; else notUseFormControl\">\r\n          <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n          <input\r\n            [readOnly]=\"config.readOnly || config.disabled\"\r\n            [id]=\"config.id ? config.id : ''\"\r\n            [formControl]=\"getControl()\"\r\n            (focus)=\"onFocus()\"\r\n            (blur)=\"onBlur()\" />\r\n        </ng-container>\r\n        <ng-template #notUseFormControl>\r\n          <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n          <input\r\n            [readOnly]=\"config.readOnly || config.disabled\"\r\n            [id]=\"config.id ? config.id : ''\"\r\n            [value]=\"value\"\r\n            (input)=\"onInput($event)\"\r\n            (focus)=\"onFocus()\"\r\n            (blur)=\"onBlur()\" />\r\n        </ng-template>\r\n        <span>{{ getTitle() }}</span>\r\n      </div>\r\n      <div class=\"s-select__main__selected-option__left\" *ngIf=\"!value\">\r\n        <div\r\n          class=\"s-select__main__selected-option__left__content-option\"\r\n          *ngIf=\"!value\">\r\n          <ng-container *ngTemplateOutlet=\"display\"></ng-container>\r\n          <span class=\"placeholder\">{{ config.placeholder }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"s-select__main__selected-option__right\">\r\n        <s-icon-mat\r\n          *ngIf=\"!config.readOnly\"\r\n          class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n          >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n        >\r\n      </div>\r\n    </div>\r\n  </div>\r\n    <s-validation-error\r\n    *ngIf=\"!config.hideErrorText && control && control.invalid && isFocused\"\r\n    [customErrorMessages]=\"config.errorMessages ?? undefined\"\r\n    [errors]=\"control.errors\">\r\n  </s-validation-error>\r\n  <s-error-control\r\n    *ngIf=\"!config.hideErrorText && control && control.invalid && config.errorText\"\r\n    theme=\"red\">\r\n    {{ config.errorText }}\r\n  </s-error-control>\r\n  <s-error-control\r\n    *ngIf=\"!config.hideErrorText && !config.errorText && control && !control.errors && config.helpText\">\r\n    {{ config.helpText }}\r\n  </s-error-control>\r\n\r\n\r\n  <div class=\"s-select__options\" [ngClass]=\"{\r\n      'label-off': !config.label,\r\n      'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n      'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD\r\n      }\" *ngIf=\"isOpen\">\r\n    <section class=\"s-select__options-simple\">\r\n      <div\r\n        class=\"s-select__item\"\r\n        [ngClass]=\"{\r\n          'sm': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM,\r\n          'md': (config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.MD,\r\n          'no-display': !config.display\r\n          }\"\r\n        *ngFor=\"let item of config.options; index as i\"\r\n        [class.active]=\"i === activeIndex\"\r\n        (click)=\"getSelectedValue(item)\"\r\n        (keydown)=\"onKeyDownItems($event, item)\"\r\n        tabindex=\"0\">\r\n        <div class=\"content-left select-simple\">\r\n          <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n          <div *ngIf=\"config.display === 'profile'\" class=\"content-avatar\">\r\n            <s-avatar\r\n              size=\"24\"\r\n              [display]=\"item.user?.display\"\r\n              [status]=\"item.user?.status\"\r\n              [urlProfileImage]=\"item.user?.url\"></s-avatar>\r\n          </div>\r\n          <s-icon-mat\r\n            [size]=\"(config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM ? '17' : '22'\"\r\n            class=\"iconPerson\"\r\n            *ngIf=\"config.display === 'iconperson'\"\r\n            >person_outline</s-icon-mat\r\n          >\r\n          <span class=\"option-value\">\r\n            {{ item.title }}\r\n          </span>\r\n        </div>\r\n        <div class=\"content-right\" *ngIf=\"i === activeIndex\">\r\n          <s-icon-mat class=\"icon-check\">check</s-icon-mat>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #display>\r\n  <div *ngIf=\"config.display === 'dot'\" class=\"dot\"></div>\r\n  <s-icon-mat\r\n    [size]=\"(config.size ?? INPUT_SIZE.MD) === INPUT_SIZE.SM ? '17' : '22'\"\r\n    class=\"iconPerson\"\r\n    *ngIf=\"config.display === 'iconperson'\"\r\n    >person_outline</s-icon-mat\r\n  >\r\n  <div\r\n    *ngIf=\"\r\n      config?.display === 'profile' &&\r\n      (activeIndex || this.activeIndex === 0) &&\r\n      config.options[activeIndex]?.user\r\n    \"\r\n    class=\"content-avatar\">\r\n    <s-avatar\r\n      size=\"24\"\r\n      [status]=\"config.options[activeIndex].user?.status ?? null\"\r\n      [display]=\"config.options[activeIndex].user?.display ?? undefined\"\r\n      [urlProfileImage]=\"\r\n        config.options[activeIndex].user?.url ?? undefined\r\n      \"></s-avatar>\r\n  </div>\r\n</ng-template>", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: SelectNavigationService }], propDecorators: { config: [{
                 type: Input
             }], blur: [{
@@ -3608,7 +3634,7 @@ class SSelectMultipleOldComponent {
                 useExisting: forwardRef(() => SSelectMultipleOldComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\r\n<div\r\n  class=\"s-select\"\r\n  [ngClass]=\"disabled ? 's-select--disabled' : ''\">\r\n  <span *ngIf=\"label\" class=\"s-select--select-label\">{{ label }}</span>\r\n  <div\r\n    class=\"s-select__main cursor {{ isOpen ? 'is-open' : '' }} {{\r\n      size ? size : ''\r\n    }}\"\r\n    (click)=\"openDropDown()\"\r\n    tabindex=\"0\" (keydown)=\"onKeyDownMain($event)\">\r\n    <div class=\"s-select__main__selected-option\">\r\n      <div class=\"s-select__main__selected-option__left\">\r\n        <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\r\n        <s-icon-mat\r\n          size=\"{{ size === 'md' ? '22' : '17' }}\"\r\n          class=\"iconPerson\"\r\n          *ngIf=\"display === 'iconperson'\"\r\n          >person_outline</s-icon-mat\r\n        >\r\n        <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\r\n          <s-avatar *ngIf=\"size === 'sm'\" size=\"16\"></s-avatar>\r\n          <s-avatar *ngIf=\"size === 'md'\" size=\"24\"></s-avatar>\r\n        </div>\r\n        <!-- +{{ countSelected }} Selecciones  -->\r\n        <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">{{\r\n          selectionText\r\n        }}</span>\r\n        <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">{{\r\n          placeholder\r\n        }}</span>\r\n      </div>\r\n      <div class=\"s-select__main__selected-option__right\">\r\n        <s-icon-mat\r\n          *ngIf=\"!readOnly\"\r\n          class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n          >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n        >\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"s-select__options {{ size ? size : '' }}\" *ngIf=\"isOpen\">\r\n    <div\r\n      tabindex=\"0\"\r\n      (keydown.enter)=\"selectAllEvent()\"\r\n      (click)=\"selectAllEvent()\"\r\n      class=\"s-select__item {{ size ? size : '' }}\"\r\n      *ngIf=\"options.length >= 2\">\r\n        <div class=\"content-left\">\r\n          <s-checkbox\r\n          [config]=\"checkAll\"\r\n          [(ngModel)]=\"selectAll\"\r\n          \r\n          (keydown.enter)=\"selectAllEvent()\"\r\n          ></s-checkbox>\r\n          <span class=\"option-value\">{{ selectAllOption }}</span>\r\n        </div>\r\n    </div>\r\n    <div\r\n      class=\"s-select__item {{ size ? size : '' }}\"\r\n      *ngFor=\"let item of options; index as i\"\r\n      (click)=\"changeItem(item)\"\r\n      (keydown)=\"onKeyDownItems($event , item)\"\r\n      tabindex=\"0\"\r\n      [class.active]=\"item.value === true\">\r\n      <div class=\"content-left\">\r\n        <s-checkbox-old [tabIndex]=\"-1\" [model]=\"item.value\"> </s-checkbox-old>\r\n        <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\r\n        <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\r\n          <s-avatar\r\n            *ngIf=\"size === 'sm'\"\r\n            size=\"16\"\r\n            [display]=\"item.user.display\"\r\n            [status]=\"item.user.status\"\r\n            [urlProfileImage]=\"item.user.url\"></s-avatar>\r\n          <s-avatar\r\n            *ngIf=\"size === 'md'\"\r\n            size=\"24\"\r\n            [display]=\"item.user.display\"\r\n            [status]=\"item.user.status\"\r\n            [urlProfileImage]=\"item.user.url\"></s-avatar>\r\n        </div>\r\n        <s-icon-mat\r\n          size=\"{{ size === 'md' ? '22' : '17' }}\"\r\n          class=\"iconPerson\"\r\n          *ngIf=\"display === 'iconperson'\"\r\n          >person_outline</s-icon-mat\r\n        >\r\n        <span class=\"option-value\">\r\n          {{ item.title }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".s-select{width:100%;position:relative}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:3fr 4fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:4fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }, { kind: "component", type: SCheckboxOldComponent, selector: "s-checkbox-old", inputs: ["value", "model", "disabled", "isUndefined", "label", "boldSelectActive", "tabIndex"], outputs: ["emitSelection"] }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\r\n<div\r\n  class=\"s-select\"\r\n  [ngClass]=\"disabled ? 's-select--disabled' : ''\">\r\n  <span *ngIf=\"label\" class=\"s-select--select-label\">{{ label }}</span>\r\n  <div\r\n    class=\"s-select__main cursor {{ isOpen ? 'is-open' : '' }} {{\r\n      size ? size : ''\r\n    }}\"\r\n    (click)=\"openDropDown()\"\r\n    tabindex=\"0\" (keydown)=\"onKeyDownMain($event)\">\r\n    <div class=\"s-select__main__selected-option\">\r\n      <div class=\"s-select__main__selected-option__left\">\r\n        <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\r\n        <s-icon-mat\r\n          size=\"{{ size === 'md' ? '22' : '17' }}\"\r\n          class=\"iconPerson\"\r\n          *ngIf=\"display === 'iconperson'\"\r\n          >person_outline</s-icon-mat\r\n        >\r\n        <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\r\n          <s-avatar *ngIf=\"size === 'sm'\" size=\"16\"></s-avatar>\r\n          <s-avatar *ngIf=\"size === 'md'\" size=\"24\"></s-avatar>\r\n        </div>\r\n        <!-- +{{ countSelected }} Selecciones  -->\r\n        <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">{{\r\n          selectionText\r\n        }}</span>\r\n        <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">{{\r\n          placeholder\r\n        }}</span>\r\n      </div>\r\n      <div class=\"s-select__main__selected-option__right\">\r\n        <s-icon-mat\r\n          *ngIf=\"!readOnly\"\r\n          class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n          >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n        >\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"s-select__options {{ size ? size : '' }}\" *ngIf=\"isOpen\">\r\n    <div\r\n      tabindex=\"0\"\r\n      (keydown.enter)=\"selectAllEvent()\"\r\n      (click)=\"selectAllEvent()\"\r\n      class=\"s-select__item {{ size ? size : '' }}\"\r\n      *ngIf=\"options.length >= 2\">\r\n        <div class=\"content-left\">\r\n          <s-checkbox\r\n          [config]=\"checkAll\"\r\n          [(ngModel)]=\"selectAll\"\r\n          \r\n          (keydown.enter)=\"selectAllEvent()\"\r\n          ></s-checkbox>\r\n          <span class=\"option-value\">{{ selectAllOption }}</span>\r\n        </div>\r\n    </div>\r\n    <div\r\n      class=\"s-select__item {{ size ? size : '' }}\"\r\n      *ngFor=\"let item of options; index as i\"\r\n      (click)=\"changeItem(item)\"\r\n      (keydown)=\"onKeyDownItems($event , item)\"\r\n      tabindex=\"0\"\r\n      [class.active]=\"item.value === true\">\r\n      <div class=\"content-left\">\r\n        <s-checkbox-old [tabIndex]=\"-1\" [model]=\"item.value\"> </s-checkbox-old>\r\n        <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\r\n        <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\r\n          <s-avatar\r\n            *ngIf=\"size === 'sm'\"\r\n            size=\"16\"\r\n            [display]=\"item.user.display\"\r\n            [status]=\"item.user.status\"\r\n            [urlProfileImage]=\"item.user.url\"></s-avatar>\r\n          <s-avatar\r\n            *ngIf=\"size === 'md'\"\r\n            size=\"24\"\r\n            [display]=\"item.user.display\"\r\n            [status]=\"item.user.status\"\r\n            [urlProfileImage]=\"item.user.url\"></s-avatar>\r\n        </div>\r\n        <s-icon-mat\r\n          size=\"{{ size === 'md' ? '22' : '17' }}\"\r\n          class=\"iconPerson\"\r\n          *ngIf=\"display === 'iconperson'\"\r\n          >person_outline</s-icon-mat\r\n        >\r\n        <span class=\"option-value\">\r\n          {{ item.title }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SAvatarComponent, selector: "s-avatar", inputs: ["urlProfileImage", "letters", "status", "display", "size"] }, { kind: "component", type: SCheckboxOldComponent, selector: "s-checkbox-old", inputs: ["value", "model", "disabled", "isUndefined", "label", "boldSelectActive", "tabIndex"], outputs: ["emitSelection"] }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSelectMultipleOldComponent, decorators: [{
             type: Component,
@@ -3618,7 +3644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => SSelectMultipleOldComponent),
                             multi: true,
                         },
-                    ], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\r\n<div\r\n  class=\"s-select\"\r\n  [ngClass]=\"disabled ? 's-select--disabled' : ''\">\r\n  <span *ngIf=\"label\" class=\"s-select--select-label\">{{ label }}</span>\r\n  <div\r\n    class=\"s-select__main cursor {{ isOpen ? 'is-open' : '' }} {{\r\n      size ? size : ''\r\n    }}\"\r\n    (click)=\"openDropDown()\"\r\n    tabindex=\"0\" (keydown)=\"onKeyDownMain($event)\">\r\n    <div class=\"s-select__main__selected-option\">\r\n      <div class=\"s-select__main__selected-option__left\">\r\n        <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\r\n        <s-icon-mat\r\n          size=\"{{ size === 'md' ? '22' : '17' }}\"\r\n          class=\"iconPerson\"\r\n          *ngIf=\"display === 'iconperson'\"\r\n          >person_outline</s-icon-mat\r\n        >\r\n        <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\r\n          <s-avatar *ngIf=\"size === 'sm'\" size=\"16\"></s-avatar>\r\n          <s-avatar *ngIf=\"size === 'md'\" size=\"24\"></s-avatar>\r\n        </div>\r\n        <!-- +{{ countSelected }} Selecciones  -->\r\n        <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">{{\r\n          selectionText\r\n        }}</span>\r\n        <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">{{\r\n          placeholder\r\n        }}</span>\r\n      </div>\r\n      <div class=\"s-select__main__selected-option__right\">\r\n        <s-icon-mat\r\n          *ngIf=\"!readOnly\"\r\n          class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n          >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n        >\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"s-select__options {{ size ? size : '' }}\" *ngIf=\"isOpen\">\r\n    <div\r\n      tabindex=\"0\"\r\n      (keydown.enter)=\"selectAllEvent()\"\r\n      (click)=\"selectAllEvent()\"\r\n      class=\"s-select__item {{ size ? size : '' }}\"\r\n      *ngIf=\"options.length >= 2\">\r\n        <div class=\"content-left\">\r\n          <s-checkbox\r\n          [config]=\"checkAll\"\r\n          [(ngModel)]=\"selectAll\"\r\n          \r\n          (keydown.enter)=\"selectAllEvent()\"\r\n          ></s-checkbox>\r\n          <span class=\"option-value\">{{ selectAllOption }}</span>\r\n        </div>\r\n    </div>\r\n    <div\r\n      class=\"s-select__item {{ size ? size : '' }}\"\r\n      *ngFor=\"let item of options; index as i\"\r\n      (click)=\"changeItem(item)\"\r\n      (keydown)=\"onKeyDownItems($event , item)\"\r\n      tabindex=\"0\"\r\n      [class.active]=\"item.value === true\">\r\n      <div class=\"content-left\">\r\n        <s-checkbox-old [tabIndex]=\"-1\" [model]=\"item.value\"> </s-checkbox-old>\r\n        <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\r\n        <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\r\n          <s-avatar\r\n            *ngIf=\"size === 'sm'\"\r\n            size=\"16\"\r\n            [display]=\"item.user.display\"\r\n            [status]=\"item.user.status\"\r\n            [urlProfileImage]=\"item.user.url\"></s-avatar>\r\n          <s-avatar\r\n            *ngIf=\"size === 'md'\"\r\n            size=\"24\"\r\n            [display]=\"item.user.display\"\r\n            [status]=\"item.user.status\"\r\n            [urlProfileImage]=\"item.user.url\"></s-avatar>\r\n        </div>\r\n        <s-icon-mat\r\n          size=\"{{ size === 'md' ? '22' : '17' }}\"\r\n          class=\"iconPerson\"\r\n          *ngIf=\"display === 'iconperson'\"\r\n          >person_outline</s-icon-mat\r\n        >\r\n        <span class=\"option-value\">\r\n          {{ item.title }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".s-select{width:100%;position:relative}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:3fr 4fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:4fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"] }]
+                    ], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\r\n<div\r\n  class=\"s-select\"\r\n  [ngClass]=\"disabled ? 's-select--disabled' : ''\">\r\n  <span *ngIf=\"label\" class=\"s-select--select-label\">{{ label }}</span>\r\n  <div\r\n    class=\"s-select__main cursor {{ isOpen ? 'is-open' : '' }} {{\r\n      size ? size : ''\r\n    }}\"\r\n    (click)=\"openDropDown()\"\r\n    tabindex=\"0\" (keydown)=\"onKeyDownMain($event)\">\r\n    <div class=\"s-select__main__selected-option\">\r\n      <div class=\"s-select__main__selected-option__left\">\r\n        <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\r\n        <s-icon-mat\r\n          size=\"{{ size === 'md' ? '22' : '17' }}\"\r\n          class=\"iconPerson\"\r\n          *ngIf=\"display === 'iconperson'\"\r\n          >person_outline</s-icon-mat\r\n        >\r\n        <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\r\n          <s-avatar *ngIf=\"size === 'sm'\" size=\"16\"></s-avatar>\r\n          <s-avatar *ngIf=\"size === 'md'\" size=\"24\"></s-avatar>\r\n        </div>\r\n        <!-- +{{ countSelected }} Selecciones  -->\r\n        <span *ngIf=\"countSelected >= 1\" class=\"s-select__value\">{{\r\n          selectionText\r\n        }}</span>\r\n        <span *ngIf=\"countSelected === 0\" class=\"s-select__value\">{{\r\n          placeholder\r\n        }}</span>\r\n      </div>\r\n      <div class=\"s-select__main__selected-option__right\">\r\n        <s-icon-mat\r\n          *ngIf=\"!readOnly\"\r\n          class=\"{{ isOpen ? 'is-open-arrow' : '' }}\"\r\n          >{{ isOpen ? 'expand_less' : 'expand_more' }}</s-icon-mat\r\n        >\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"s-select__options {{ size ? size : '' }}\" *ngIf=\"isOpen\">\r\n    <div\r\n      tabindex=\"0\"\r\n      (keydown.enter)=\"selectAllEvent()\"\r\n      (click)=\"selectAllEvent()\"\r\n      class=\"s-select__item {{ size ? size : '' }}\"\r\n      *ngIf=\"options.length >= 2\">\r\n        <div class=\"content-left\">\r\n          <s-checkbox\r\n          [config]=\"checkAll\"\r\n          [(ngModel)]=\"selectAll\"\r\n          \r\n          (keydown.enter)=\"selectAllEvent()\"\r\n          ></s-checkbox>\r\n          <span class=\"option-value\">{{ selectAllOption }}</span>\r\n        </div>\r\n    </div>\r\n    <div\r\n      class=\"s-select__item {{ size ? size : '' }}\"\r\n      *ngFor=\"let item of options; index as i\"\r\n      (click)=\"changeItem(item)\"\r\n      (keydown)=\"onKeyDownItems($event , item)\"\r\n      tabindex=\"0\"\r\n      [class.active]=\"item.value === true\">\r\n      <div class=\"content-left\">\r\n        <s-checkbox-old [tabIndex]=\"-1\" [model]=\"item.value\"> </s-checkbox-old>\r\n        <div *ngIf=\"display === 'dot'\" class=\"dot\"></div>\r\n        <div *ngIf=\"display === 'profile'\" class=\"content-avatar\">\r\n          <s-avatar\r\n            *ngIf=\"size === 'sm'\"\r\n            size=\"16\"\r\n            [display]=\"item.user.display\"\r\n            [status]=\"item.user.status\"\r\n            [urlProfileImage]=\"item.user.url\"></s-avatar>\r\n          <s-avatar\r\n            *ngIf=\"size === 'md'\"\r\n            size=\"24\"\r\n            [display]=\"item.user.display\"\r\n            [status]=\"item.user.status\"\r\n            [urlProfileImage]=\"item.user.url\"></s-avatar>\r\n        </div>\r\n        <s-icon-mat\r\n          size=\"{{ size === 'md' ? '22' : '17' }}\"\r\n          class=\"iconPerson\"\r\n          *ngIf=\"display === 'iconperson'\"\r\n          >person_outline</s-icon-mat\r\n        >\r\n        <span class=\"option-value\">\r\n          {{ item.title }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".s-select{width:100%;position:relative}.s-select__main.readonly{background-color:var(--neutrals-1100);cursor:default}.s-select--required{display:contents;color:var(--primary-600)}.s-select--select-label{color:var(--secondary-600);display:flex;font-size:.875rem;font-weight:400;line-height:1.375rem;letter-spacing:.01rem;margin-bottom:.125rem}.s-select__main{background-color:var(--neutrals-1200);color:var(--secondary-600);border:.063rem solid var(--primary-500);border-radius:.25rem;display:flex;padding:0 .625rem}.s-select__main.theme-red{border-color:var(--red-600)!important;box-shadow:0 0 0 .25rem var(--red-alpha-200),0 .0625rem .125rem 0 var(--blue-alpha-100)!important}.s-select__main.md{height:2.4rem;font-size:1rem}.s-select__main.sm{height:1.5rem;font-size:.9rem}.s-select__main.is-open{border:.06rem solid var(--primary-600);box-shadow:var(--focus-cyan--md)}.s-select__main__selected-option{width:100%;display:flex;align-items:center;justify-content:space-between}.s-select__main__selected-option input{display:none}.s-select__main__selected-option input:-webkit-autofill,.s-select__main__selected-option input:-webkit-autofill:hover,.s-select__main__selected-option input:-webkit-autofill:focus,.s-select__main__selected-option input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1.9rem var(--neutrals-1200) inset!important}.s-select__main__selected-option span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-select__main__selected-option__left{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.s-select__main__selected-option__left__content-option{display:flex;align-items:center;gap:.5rem}.s-select__main__selected-option__left__content-option .placeholder{color:var(--neutrals-700);opacity:.6}.s-select__main__selected-option__left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.3rem}.s-select__main__selected-option__left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600)}.s-select__main__selected-option__left .content-avatar{margin-left:.375rem}.s-select__main__selected-option__right{display:flex;align-items:center;justify-content:space-evenly;color:var(--primary-600)}.s-select__main__selected-option__right .is-open-arrow{color:var(--primary-600)}.s-select__main__selected-option.select-simple .s-select__main__selected-option__left{width:93%}.s-select__main__selected-option.select-multiple .s-select__main__selected-option__left{width:100%}.s-select__options{max-height:12.5rem;overflow-y:auto;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0}.s-select__options.sm{top:3.5rem}.s-select__options.md{top:4.5rem}.s-select__options.label-off.md{top:3.1rem}.s-select__options.label-off.sm{top:2.1rem}.s-select__dropdown{max-height:30rem;position:absolute;width:100%;z-index:2;box-shadow:var(--E300);background-color:var(--neutrals-1200);border-radius:.25rem;left:0;margin-top:.5rem}.s-select__options-multiple{border-bottom:.063rem solid var(--neutrals-900);border-top:.063rem solid var(--neutrals-900);max-height:13.5rem;overflow-y:auto}.s-select__options-multiple--search{padding:.3rem .5rem;height:100%}.s-select__options-multiple--selected{padding:.3rem .5rem;height:100%;margin-top:.3rem}.s-select__options-multiple--selected .s-button{width:100%}.s-select__options-multiple--selected .sm{font-size:.75rem}.s-select__options-multiple--selected-content{display:flex;justify-content:space-between;margin-top:.5rem}.s-select__options-multiple--selected-text:first-letter{text-transform:uppercase}.s-select__options-multiple--selectAllOption{color:var(--primary-600);cursor:pointer;text-decoration:underline}.s-select__options-multiple-all{align-items:center;display:flex}.s-select__options-multiple-all.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__options-multiple-all.md{font-size:1rem;padding:.625rem .875rem}.s-select__options-multiple-text{padding-left:.625rem}.s-select__item{display:flex;justify-content:space-between;padding:0 .875rem;color:var(--secondary-600)}.s-select__item:hover{background-color:var(--neutrals-1000);cursor:pointer}.s-select__item.sm{font-size:.75rem;padding:.25rem .5rem}.s-select__item.md{font-size:1rem;padding:.625rem .875rem}.s-select__item.no-display .content-left.select-simple{grid-template-columns:auto}.s-select__item.no-display .content-left.select-multiple{grid-template-columns:auto 1fr}.s-select__item.no-display .option-value{margin-left:0;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.s-select__item .option-value{margin-left:.375rem}.s-select__item.active .option-value{font-weight:500;color:var(--primary-600)}.s-select__item .content-left.select-multiple{grid-template-columns:2fr 2fr 96fr}.s-select__item .content-left.select-simple{grid-template-columns:2fr 96fr}.s-select__item .content-left{display:grid;align-items:center;justify-content:space-evenly;margin-right:.5rem;grid-template-columns:3fr 4fr 96fr;gap:.25rem;justify-items:start}.s-select__item .content-left s-icon-mat span{font-size:1.3rem}.s-select__item .content-left s-icon-mat.iconPerson{margin-left:.3rem;color:var(--primary-600);height:1.25rem}.s-select__item .content-left s-radio input,.s-select__item .content-left s-checkbox input{cursor:pointer}.s-select__item .content-left .content-avatar{margin-left:.375rem}.s-select__item .content-left .dot{border-radius:100%;width:.3rem;height:.3rem;border:.06rem solid var(--green-600);background-color:var(--green-600);margin-left:.625rem;margin-right:.563rem}.s-select__item .content-center{width:100%}.s-select__item .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:.5rem;color:var(--primary-600)}.s-select__item .content-right s-icon-mat span{font-size:1.2rem}.s-select--disabled .s-select-multiple__main,.s-select--disabled .s-select__main{background-color:var(--neutrals-1100);border:.063rem solid var(--neutrals-900);color:var(--neutrals-700);cursor:not-allowed}.s-select--disabled .s-select-multiple__main s-icon-mat.iconPerson,.s-select--disabled .s-select__main s-icon-mat.iconPerson{color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content{background-color:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .content-avatar .s-avatar__dot-content s-icon-mat span,.s-select--disabled .s-select__main .content-avatar .s-avatar__dot-content s-icon-mat span{color:var(--neutrals-1100)}.s-select--disabled .s-select-multiple__main .dot,.s-select--disabled .s-select__main .dot{background-color:var(--neutrals-700);border:.06rem solid var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot s-icon-mat span,.s-select--disabled .s-select__main .dot s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main .dot-content,.s-select--disabled .s-select__main .dot-content{background-color:var(--neutrals-700);border:var(--neutrals-700)}.s-select--disabled .s-select-multiple__main .dot-content s-icon-mat span,.s-select--disabled .s-select__main .dot-content s-icon-mat span{color:var(--neutrals-1200)}.s-select--disabled .s-select-multiple__main s-icon-mat span,.s-select--disabled .s-select__main s-icon-mat span{color:var(--neutrals-700)}\n"] }]
         }], ctorParameters: () => [{ type: SelectNavigationService }], propDecorators: { disabled: [{
                 type: Input
             }], placeholder: [{
@@ -4062,6 +4088,7 @@ class FormFilledMetadataDto {
 class STabletComponent {
     constructor() {
         this.loading = false;
+        this.isTreeMode = false;
         this.loadingScroll = input(false);
         this.updateDataEvent = new EventEmitter();
         this.ordenByEvent = new EventEmitter();
@@ -4075,7 +4102,7 @@ class STabletComponent {
         this.initData = this.data;
     }
     orderBy(column) {
-        if (column.sortable !== false && !column.disabled) {
+        if (column.sortable !== false && !column.disabled && !column.checkbox) {
             if (column.id) {
                 //column.id es el campo a ordenar.
                 const sortAsc = this.fieldSelect && this.fieldSelect.SortField === column.id && this.fieldSelect.SortAsc === true
@@ -4106,11 +4133,11 @@ class STabletComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STabletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: STabletComponent, selector: "s-tablet", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, bodyloading: { classPropertyName: "bodyloading", publicName: "bodyloading", isSignal: false, isRequired: false, transformFunction: null }, body: { classPropertyName: "body", publicName: "body", isSignal: false, isRequired: false, transformFunction: null }, configColumn: { classPropertyName: "configColumn", publicName: "configColumn", isSignal: false, isRequired: false, transformFunction: null }, loadingScroll: { classPropertyName: "loadingScroll", publicName: "loadingScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateDataEvent: "updateDataEvent", ordenByEvent: "ordenByEvent", checkAllEvent: "checkAllEvent", scrollEvent: "scrollEvent" }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"caption\"></ng-container>\n<div class=\"pre-s-tablet s-scroll\" (scroll)=\"onScroll($event)\">\n  <table class=\"s-tablet\">\n    <thead>\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n      <tr *ngIf=\"configColumn && !loading\">\n        <th\n          *ngFor=\"let column of configColumn\"\n          [width]=\"column.width\"\n          tabindex=\"0\"\n          (keydown.enter)=\"orderBy(column)\"\n          (click)=\"orderBy(column)\">\n          <div\n            class=\"s-tablet__header\"\n            [ngClass]=\"{\n              's-tablet__header--align-center': column.align === 'center',\n              's-tablet__header--align-right': column.align === 'right',\n              's-tablet__header--align-left': column.align === 'left' || !column.align,\n              cursor: column.sortable !== false,\n              's-tablet__disabled': loading,\n            }\">\n            <s-checkbox\n              *ngIf=\"column.checkbox\"\n              [ngClass]=\"{ 'mr-2': column.title }\"\n              [config]=\"checkboxConfig\"\n              [(ngModel)]=\"column.checkboxValue\"\n              (ngModelChange)=\"checkAll($event)\">\n            </s-checkbox>\n            <div\n              class=\"s-tablet__header__label\"\n              [ngClass]=\"{\n                's-tablet__header__select': fieldSelect && fieldSelect.SortField === column.id,\n              }\">\n              {{ column.title }}\n            </div>\n            <span *ngIf=\"fieldSelect && fieldSelect.SortField === column.id\" class=\"s-tablet__header__icon\">\n              <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\">{{\n                fieldSelect.SortAsc ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n              }}</s-icon-mat>\n            </span>\n            <span\n              *ngIf=\"column.sortable !== false && column.title && fieldSelect && fieldSelect.SortField !== column.id\">\n              <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\" class=\"s-tablet__header__icon--standard\"\n                >keyboard_arrow_down</s-icon-mat\n              >\n            </span>\n            <span\n              *ngIf=\"!fieldSelect && column.sortable !== false && column.title\"\n              class=\"s-tablet__header__icon--standard\">\n              <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\" class=\"s-tablet__header__icon--standard\"\n                >keyboard_arrow_down</s-icon-mat\n              >\n            </span>\n          </div>\n        </th>\n      </tr>\n    </thead>\n    <tbody [ngClass]=\"loading ? 's-tablet__empty' : 's-tablet__body'\">\n      <ng-container *ngIf=\"loading; else body\">\n        <ng-template #body>\n          <ng-content></ng-content>\n        </ng-template>\n        <ng-template #loading *ngTemplateOutlet=\"bodyloading\"></ng-template>\n      </ng-container>\n    </tbody>\n    @if (loadingScroll()) {\n      <tbody class=\"s-tablet__body\">\n        <tr>\n          <td [attr.colspan]=\"configColumn.length || 1\" class=\"s-table-complete__loading\">\n            <s-spinner size=\"sm\"></s-spinner>\n          </td>\n        </tr>\n      </tbody>\n    }\n  </table>\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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { 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: SSpinnerComponent, selector: "s-spinner", inputs: ["size", "animation"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: STabletComponent, selector: "s-tablet", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, bodyloading: { classPropertyName: "bodyloading", publicName: "bodyloading", isSignal: false, isRequired: false, transformFunction: null }, body: { classPropertyName: "body", publicName: "body", isSignal: false, isRequired: false, transformFunction: null }, configColumn: { classPropertyName: "configColumn", publicName: "configColumn", isSignal: false, isRequired: false, transformFunction: null }, isTreeMode: { classPropertyName: "isTreeMode", publicName: "isTreeMode", isSignal: false, isRequired: false, transformFunction: null }, loadingScroll: { classPropertyName: "loadingScroll", publicName: "loadingScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateDataEvent: "updateDataEvent", ordenByEvent: "ordenByEvent", checkAllEvent: "checkAllEvent", scrollEvent: "scrollEvent" }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"caption\"></ng-container>\n<div class=\"pre-s-tablet s-scroll\" (scroll)=\"onScroll($event)\">\n  <table class=\"s-tablet\">\n    <thead>\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n      <tr *ngIf=\"configColumn && configColumn.length > 0 && !loading\">\n        <th\n          *ngFor=\"let column of configColumn\"\n          [width]=\"column.width\"\n          tabindex=\"0\"\n          (keydown.enter)=\"orderBy(column)\"\n          (click)=\"orderBy(column)\">\n          <div\n            class=\"s-tablet__header\"\n            [ngClass]=\"{\n              's-tablet__header--align-center': column.align === 'center',\n              's-tablet__header--align-right': column.align === 'right',\n              's-tablet__header--align-left': column.align === 'left' || !column.align,\n              cursor: column.sortable !== false,\n              's-tablet__disabled': loading,\n            }\">\n            <ng-container *ngIf=\"column.checkbox\">\n              <span *ngIf=\"isTreeMode\" class=\"s-table-double__tree-spacer\"></span>\n              <s-checkbox\n                [ngClass]=\"{ 'mr-2': column.title }\"\n                [config]=\"checkboxConfig\"\n                [(ngModel)]=\"column.checkboxValue\"\n                (ngModelChange)=\"checkAll($event)\">\n              </s-checkbox>\n            </ng-container>\n            <div\n              class=\"s-tablet__header__label\"\n              [ngClass]=\"{\n                's-tablet__header__select': fieldSelect && fieldSelect.SortField === column.id,\n              }\">\n              {{ column.title }}\n            </div>\n            <span *ngIf=\"fieldSelect && fieldSelect.SortField === column.id\" class=\"s-tablet__header__icon\">\n              <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\">{{\n                fieldSelect.SortAsc ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n              }}</s-icon-mat>\n            </span>\n            <span\n              *ngIf=\"column.sortable !== false && column.title && fieldSelect && fieldSelect.SortField !== column.id\">\n              <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\" class=\"s-tablet__header__icon--standard\"\n                >keyboard_arrow_down</s-icon-mat\n              >\n            </span>\n            <span\n              *ngIf=\"!fieldSelect && column.sortable !== false && column.title\"\n              class=\"s-tablet__header__icon--standard\">\n              <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\" class=\"s-tablet__header__icon--standard\"\n                >keyboard_arrow_down</s-icon-mat\n              >\n            </span>\n          </div>\n        </th>\n      </tr>\n    </thead>\n    <tbody [ngClass]=\"loading ? 's-tablet__empty' : 's-tablet__body'\">\n      <ng-container *ngIf=\"loading; else body\">\n        <ng-template #body>\n          <ng-content></ng-content>\n        </ng-template>\n        <ng-template #loading *ngTemplateOutlet=\"bodyloading\"></ng-template>\n      </ng-container>\n    </tbody>\n    @if (loadingScroll()) {\n      <tbody class=\"s-tablet__body\">\n        <tr>\n          <td [attr.colspan]=\"configColumn.length || 1\" class=\"s-table-complete__loading\">\n            <s-spinner size=\"sm\"></s-spinner>\n          </td>\n        </tr>\n      </tbody>\n    }\n  </table>\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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { 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: SSpinnerComponent, selector: "s-spinner", inputs: ["size", "animation"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STabletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-tablet', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngTemplateOutlet=\"caption\"></ng-container>\n<div class=\"pre-s-tablet s-scroll\" (scroll)=\"onScroll($event)\">\n  <table class=\"s-tablet\">\n    <thead>\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n      <tr *ngIf=\"configColumn && !loading\">\n        <th\n          *ngFor=\"let column of configColumn\"\n          [width]=\"column.width\"\n          tabindex=\"0\"\n          (keydown.enter)=\"orderBy(column)\"\n          (click)=\"orderBy(column)\">\n          <div\n            class=\"s-tablet__header\"\n            [ngClass]=\"{\n              's-tablet__header--align-center': column.align === 'center',\n              's-tablet__header--align-right': column.align === 'right',\n              's-tablet__header--align-left': column.align === 'left' || !column.align,\n              cursor: column.sortable !== false,\n              's-tablet__disabled': loading,\n            }\">\n            <s-checkbox\n              *ngIf=\"column.checkbox\"\n              [ngClass]=\"{ 'mr-2': column.title }\"\n              [config]=\"checkboxConfig\"\n              [(ngModel)]=\"column.checkboxValue\"\n              (ngModelChange)=\"checkAll($event)\">\n            </s-checkbox>\n            <div\n              class=\"s-tablet__header__label\"\n              [ngClass]=\"{\n                's-tablet__header__select': fieldSelect && fieldSelect.SortField === column.id,\n              }\">\n              {{ column.title }}\n            </div>\n            <span *ngIf=\"fieldSelect && fieldSelect.SortField === column.id\" class=\"s-tablet__header__icon\">\n              <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\">{{\n                fieldSelect.SortAsc ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n              }}</s-icon-mat>\n            </span>\n            <span\n              *ngIf=\"column.sortable !== false && column.title && fieldSelect && fieldSelect.SortField !== column.id\">\n              <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\" class=\"s-tablet__header__icon--standard\"\n                >keyboard_arrow_down</s-icon-mat\n              >\n            </span>\n            <span\n              *ngIf=\"!fieldSelect && column.sortable !== false && column.title\"\n              class=\"s-tablet__header__icon--standard\">\n              <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\" class=\"s-tablet__header__icon--standard\"\n                >keyboard_arrow_down</s-icon-mat\n              >\n            </span>\n          </div>\n        </th>\n      </tr>\n    </thead>\n    <tbody [ngClass]=\"loading ? 's-tablet__empty' : 's-tablet__body'\">\n      <ng-container *ngIf=\"loading; else body\">\n        <ng-template #body>\n          <ng-content></ng-content>\n        </ng-template>\n        <ng-template #loading *ngTemplateOutlet=\"bodyloading\"></ng-template>\n      </ng-container>\n    </tbody>\n    @if (loadingScroll()) {\n      <tbody class=\"s-tablet__body\">\n        <tr>\n          <td [attr.colspan]=\"configColumn.length || 1\" class=\"s-table-complete__loading\">\n            <s-spinner size=\"sm\"></s-spinner>\n          </td>\n        </tr>\n      </tbody>\n    }\n  </table>\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}\n"] }]
+            args: [{ selector: 's-tablet', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngTemplateOutlet=\"caption\"></ng-container>\n<div class=\"pre-s-tablet s-scroll\" (scroll)=\"onScroll($event)\">\n  <table class=\"s-tablet\">\n    <thead>\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n      <tr *ngIf=\"configColumn && configColumn.length > 0 && !loading\">\n        <th\n          *ngFor=\"let column of configColumn\"\n          [width]=\"column.width\"\n          tabindex=\"0\"\n          (keydown.enter)=\"orderBy(column)\"\n          (click)=\"orderBy(column)\">\n          <div\n            class=\"s-tablet__header\"\n            [ngClass]=\"{\n              's-tablet__header--align-center': column.align === 'center',\n              's-tablet__header--align-right': column.align === 'right',\n              's-tablet__header--align-left': column.align === 'left' || !column.align,\n              cursor: column.sortable !== false,\n              's-tablet__disabled': loading,\n            }\">\n            <ng-container *ngIf=\"column.checkbox\">\n              <span *ngIf=\"isTreeMode\" class=\"s-table-double__tree-spacer\"></span>\n              <s-checkbox\n                [ngClass]=\"{ 'mr-2': column.title }\"\n                [config]=\"checkboxConfig\"\n                [(ngModel)]=\"column.checkboxValue\"\n                (ngModelChange)=\"checkAll($event)\">\n              </s-checkbox>\n            </ng-container>\n            <div\n              class=\"s-tablet__header__label\"\n              [ngClass]=\"{\n                's-tablet__header__select': fieldSelect && fieldSelect.SortField === column.id,\n              }\">\n              {{ column.title }}\n            </div>\n            <span *ngIf=\"fieldSelect && fieldSelect.SortField === column.id\" class=\"s-tablet__header__icon\">\n              <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\">{{\n                fieldSelect.SortAsc ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n              }}</s-icon-mat>\n            </span>\n            <span\n              *ngIf=\"column.sortable !== false && column.title && fieldSelect && fieldSelect.SortField !== column.id\">\n              <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\" class=\"s-tablet__header__icon--standard\"\n                >keyboard_arrow_down</s-icon-mat\n              >\n            </span>\n            <span\n              *ngIf=\"!fieldSelect && column.sortable !== false && column.title\"\n              class=\"s-tablet__header__icon--standard\">\n              <s-icon-mat [type]=\"'symbol'\" size=\"18\" class=\"icon cursor\" class=\"s-tablet__header__icon--standard\"\n                >keyboard_arrow_down</s-icon-mat\n              >\n            </span>\n          </div>\n        </th>\n      </tr>\n    </thead>\n    <tbody [ngClass]=\"loading ? 's-tablet__empty' : 's-tablet__body'\">\n      <ng-container *ngIf=\"loading; else body\">\n        <ng-template #body>\n          <ng-content></ng-content>\n        </ng-template>\n        <ng-template #loading *ngTemplateOutlet=\"bodyloading\"></ng-template>\n      </ng-container>\n    </tbody>\n    @if (loadingScroll()) {\n      <tbody class=\"s-tablet__body\">\n        <tr>\n          <td [attr.colspan]=\"configColumn.length || 1\" class=\"s-table-complete__loading\">\n            <s-spinner size=\"sm\"></s-spinner>\n          </td>\n        </tr>\n      </tbody>\n    }\n  </table>\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}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], loading: [{
@@ -4125,6 +4152,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], configColumn: [{
                 type: Input
+            }], isTreeMode: [{
+                type: Input
             }], updateDataEvent: [{
                 type: Output
             }], ordenByEvent: [{
@@ -4408,11 +4437,11 @@ class TableActionsButtonsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableActionsButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableActionsButtonsComponent, selector: "s-table-actions-buttons", inputs: { tableActionsButtons: "tableActionsButtons" }, outputs: { clickButtonEvent: "clickButtonEvent" }, ngImport: i0, template: "<div class=\"d-flex justify-content-center table-actions-buttons\">\n  <ng-container *ngFor=\"let button of tableActionsButtons\">\n    <s-icon-mat\n      tabindex=\"0\"\n      class=\"table-actions-buttons__icon p-1 no-select\"\n      size=\"20\"\n      [ngClass]=\"getButtonsClass(button)\"\n      [tooltip]=\"tooltip\"\n      (keyup.enter)=\"handleButtonClick(button)\"\n      (click)=\"handleButtonClick(button)\">\n      {{ button.icon ?? getButtonsType(button.type).icon }}\n    </s-icon-mat>\n    <s-tooltip\n      #tooltip\n      [title]=\"button.tooltip\"\n      [position]=\"button.tooltipPosition ?? 'top'\"\n      theme=\"dark\"></s-tooltip>\n  </ng-container>\n</div>\n", styles: [".table-actions-buttons__icon{color:var(--primary-600);cursor:pointer}.table-actions-buttons__icon__primary{color:var(--primary-600)}.table-actions-buttons__icon__primary--disabled{color:var(--primary-300)}.table-actions-buttons__icon__primary:not(.table-actions-buttons__icon__primary--disabled):hover{color:var(--primary-900)}.table-actions-buttons__icon__secondary{color:var(--secondary-600)}.table-actions-buttons__icon__secondary--disabled{color:var(--secondary-300)}.table-actions-buttons__icon__secondary:not(.table-actions-buttons__icon__secondary--disabled):hover{color:var(--secondary-900)}.table-actions-buttons__icon__green{color:var(--green-600)}.table-actions-buttons__icon__green--disabled{color:var(--green-300)}.table-actions-buttons__icon__green:not(.table-actions-buttons__icon__green--disabled):hover{color:var(--green-900)}.table-actions-buttons__icon__red{color:var(--red-600)}.table-actions-buttons__icon__red--disabled{color:var(--red-300)}.table-actions-buttons__icon__red:not(.table-actions-buttons__icon__red--disabled):hover{color:var(--red-900)}.table-actions-buttons__icon__yellow{color:var(--yellow-600)}.table-actions-buttons__icon__yellow--disabled{color:var(--yellow-300)}.table-actions-buttons__icon__yellow:not(.table-actions-buttons__icon__yellow--disabled):hover{color:var(--yellow-900)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: STooltipComponent, selector: "s-tooltip", inputs: ["title", "description", "theme", "position"] }, { kind: "directive", type: CustomTooltipDirective, selector: "[tooltip]", inputs: ["tooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableActionsButtonsComponent, selector: "s-table-actions-buttons", inputs: { tableActionsButtons: "tableActionsButtons" }, outputs: { clickButtonEvent: "clickButtonEvent" }, ngImport: i0, template: "<div class=\"d-flex justify-content-center table-actions-buttons\">\n  <ng-container *ngFor=\"let button of tableActionsButtons\">\n    <s-icon-mat\n      tabindex=\"0\"\n      class=\"table-actions-buttons__icon p-1 no-select\"\n      size=\"20\"\n      [ngClass]=\"getButtonsClass(button)\"\n      [tooltip]=\"tooltip\"\n      (keyup.enter)=\"handleButtonClick(button)\"\n      (click)=\"handleButtonClick(button)\">\n      {{ button.icon ?? getButtonsType(button.type).icon }}\n    </s-icon-mat>\n    <s-tooltip\n      #tooltip\n      [title]=\"button.tooltip\"\n      [position]=\"button.tooltipPosition ?? 'top'\"\n      theme=\"dark\"></s-tooltip>\n  </ng-container>\n</div>\n", styles: [".table-actions-buttons__icon{color:var(--primary-600);cursor:pointer}.table-actions-buttons__icon__primary{color:var(--primary-600)}.table-actions-buttons__icon__primary--disabled{color:var(--primary-300)}.table-actions-buttons__icon__primary:not(.table-actions-buttons__icon__primary--disabled):hover{color:var(--primary-900)}.table-actions-buttons__icon__secondary{color:var(--primary-600)}.table-actions-buttons__icon__secondary--disabled{color:var(--primary-300)}.table-actions-buttons__icon__secondary:not(.table-actions-buttons__icon__secondary--disabled):hover{color:var(--secondary-900)}.table-actions-buttons__icon__green{color:var(--green-600)}.table-actions-buttons__icon__green--disabled{color:var(--green-300)}.table-actions-buttons__icon__green:not(.table-actions-buttons__icon__green--disabled):hover{color:var(--green-900)}.table-actions-buttons__icon__red{color:var(--red-600)}.table-actions-buttons__icon__red--disabled{color:var(--red-300)}.table-actions-buttons__icon__red:not(.table-actions-buttons__icon__red--disabled):hover{color:var(--red-900)}.table-actions-buttons__icon__yellow{color:var(--yellow-600)}.table-actions-buttons__icon__yellow--disabled{color:var(--yellow-300)}.table-actions-buttons__icon__yellow:not(.table-actions-buttons__icon__yellow--disabled):hover{color:var(--yellow-900)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: STooltipComponent, selector: "s-tooltip", inputs: ["title", "description", "theme", "position"] }, { kind: "directive", type: CustomTooltipDirective, selector: "[tooltip]", inputs: ["tooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableActionsButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-table-actions-buttons', template: "<div class=\"d-flex justify-content-center table-actions-buttons\">\n  <ng-container *ngFor=\"let button of tableActionsButtons\">\n    <s-icon-mat\n      tabindex=\"0\"\n      class=\"table-actions-buttons__icon p-1 no-select\"\n      size=\"20\"\n      [ngClass]=\"getButtonsClass(button)\"\n      [tooltip]=\"tooltip\"\n      (keyup.enter)=\"handleButtonClick(button)\"\n      (click)=\"handleButtonClick(button)\">\n      {{ button.icon ?? getButtonsType(button.type).icon }}\n    </s-icon-mat>\n    <s-tooltip\n      #tooltip\n      [title]=\"button.tooltip\"\n      [position]=\"button.tooltipPosition ?? 'top'\"\n      theme=\"dark\"></s-tooltip>\n  </ng-container>\n</div>\n", styles: [".table-actions-buttons__icon{color:var(--primary-600);cursor:pointer}.table-actions-buttons__icon__primary{color:var(--primary-600)}.table-actions-buttons__icon__primary--disabled{color:var(--primary-300)}.table-actions-buttons__icon__primary:not(.table-actions-buttons__icon__primary--disabled):hover{color:var(--primary-900)}.table-actions-buttons__icon__secondary{color:var(--secondary-600)}.table-actions-buttons__icon__secondary--disabled{color:var(--secondary-300)}.table-actions-buttons__icon__secondary:not(.table-actions-buttons__icon__secondary--disabled):hover{color:var(--secondary-900)}.table-actions-buttons__icon__green{color:var(--green-600)}.table-actions-buttons__icon__green--disabled{color:var(--green-300)}.table-actions-buttons__icon__green:not(.table-actions-buttons__icon__green--disabled):hover{color:var(--green-900)}.table-actions-buttons__icon__red{color:var(--red-600)}.table-actions-buttons__icon__red--disabled{color:var(--red-300)}.table-actions-buttons__icon__red:not(.table-actions-buttons__icon__red--disabled):hover{color:var(--red-900)}.table-actions-buttons__icon__yellow{color:var(--yellow-600)}.table-actions-buttons__icon__yellow--disabled{color:var(--yellow-300)}.table-actions-buttons__icon__yellow:not(.table-actions-buttons__icon__yellow--disabled):hover{color:var(--yellow-900)}\n"] }]
+            args: [{ selector: 's-table-actions-buttons', template: "<div class=\"d-flex justify-content-center table-actions-buttons\">\n  <ng-container *ngFor=\"let button of tableActionsButtons\">\n    <s-icon-mat\n      tabindex=\"0\"\n      class=\"table-actions-buttons__icon p-1 no-select\"\n      size=\"20\"\n      [ngClass]=\"getButtonsClass(button)\"\n      [tooltip]=\"tooltip\"\n      (keyup.enter)=\"handleButtonClick(button)\"\n      (click)=\"handleButtonClick(button)\">\n      {{ button.icon ?? getButtonsType(button.type).icon }}\n    </s-icon-mat>\n    <s-tooltip\n      #tooltip\n      [title]=\"button.tooltip\"\n      [position]=\"button.tooltipPosition ?? 'top'\"\n      theme=\"dark\"></s-tooltip>\n  </ng-container>\n</div>\n", styles: [".table-actions-buttons__icon{color:var(--primary-600);cursor:pointer}.table-actions-buttons__icon__primary{color:var(--primary-600)}.table-actions-buttons__icon__primary--disabled{color:var(--primary-300)}.table-actions-buttons__icon__primary:not(.table-actions-buttons__icon__primary--disabled):hover{color:var(--primary-900)}.table-actions-buttons__icon__secondary{color:var(--primary-600)}.table-actions-buttons__icon__secondary--disabled{color:var(--primary-300)}.table-actions-buttons__icon__secondary:not(.table-actions-buttons__icon__secondary--disabled):hover{color:var(--secondary-900)}.table-actions-buttons__icon__green{color:var(--green-600)}.table-actions-buttons__icon__green--disabled{color:var(--green-300)}.table-actions-buttons__icon__green:not(.table-actions-buttons__icon__green--disabled):hover{color:var(--green-900)}.table-actions-buttons__icon__red{color:var(--red-600)}.table-actions-buttons__icon__red--disabled{color:var(--red-300)}.table-actions-buttons__icon__red:not(.table-actions-buttons__icon__red--disabled):hover{color:var(--red-900)}.table-actions-buttons__icon__yellow{color:var(--yellow-600)}.table-actions-buttons__icon__yellow--disabled{color:var(--yellow-300)}.table-actions-buttons__icon__yellow:not(.table-actions-buttons__icon__yellow--disabled):hover{color:var(--yellow-900)}\n"] }]
         }], propDecorators: { tableActionsButtons: [{
                 type: Input
             }], clickButtonEvent: [{
@@ -5440,11 +5469,11 @@ class SListSimpleComponent {
         this.listStyle = 'default';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SListSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SListSimpleComponent, selector: "s-list-simple", inputs: { listStyle: "listStyle" }, ngImport: i0, template: "<div class=\"s-list-simple s-list-simple--{{listStyle}}\">\n    <ng-content></ng-content>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v292/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format(\"woff2\")}.s-list-simple ul{font-size:.875rem;font-weight:400;line-height:1.25rem;letter-spacing:.01563rem;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}.s-list-simple ul,.s-list-simple ol{margin-left:.625rem}.s-list-simple ul ul,.s-list-simple ul ol,.s-list-simple ol ul,.s-list-simple ol ol{margin-left:1.063rem}.s-list-simple ul ul ul,.s-list-simple ul ul ol,.s-list-simple ul ol ul,.s-list-simple ul ol ol,.s-list-simple ol ul ul,.s-list-simple ol ul ol,.s-list-simple ol ol ul,.s-list-simple ol ol ol{margin-left:1.5rem}.s-list-simple ul ul ul ul,.s-list-simple ul ul ul ol,.s-list-simple ul ul ol ul,.s-list-simple ul ul ol ol,.s-list-simple ul ol ul ul,.s-list-simple ul ol ul ol,.s-list-simple ul ol ol ul,.s-list-simple ul ol ol ol,.s-list-simple ol ul ul ul,.s-list-simple ol ul ul ol,.s-list-simple ol ul ol ul,.s-list-simple ol ul ol ol,.s-list-simple ol ol ul ul,.s-list-simple ol ol ul ol,.s-list-simple ol ol ol ul,.s-list-simple ol ol ol ol{margin-left:30.063rem}.s-list-simple--default ul{list-style:disc}.s-list-simple--check li,.s-list-simple--chevron li,.s-list-simple--folder li{list-style-type:none}.s-list-simple--check li:before,.s-list-simple--chevron li:before,.s-list-simple--folder li:before{font-family:Material Icons;display:inline-block;margin-right:.5em}.s-list-simple--check ul ul ul li:before{color:var(--green-700)}.s-list-simple--check ul ul ul .mark-invert:before,.s-list-simple--check ul ul ul .mark-invert::marker{color:var(--green-600)!important}.s-list-simple--check li:before{content:\"\\e5ca\";color:var(--green-600)}.s-list-simple--check .mark-invert:before,.s-list-simple--check .mark-invert::marker{color:var(--green-700)}.s-list-simple--chevron li:before{content:\"\\e5cc\";color:var(--secondary-600)}.s-list-simple--dot ul,.s-list-simple--dot ul ul{list-style:disc}.s-list-simple--dot ul ul ul{list-style:circle}.s-list-simple--dot li::marker{font-size:1.063rem;color:var(--secondary-600)}.s-list-simple--folder ul ul ul li:before{font-family:Material Symbols Outlined}.s-list-simple--folder ul ul ul .mark-invert:before,.s-list-simple--folder ul ul ul .mark-invert::marker{font-family:Material Icons!important}.s-list-simple--folder li:before{content:\"\\e2c7\";color:var(--secondary-600)}.s-list-simple--folder .mark-invert:before,.s-list-simple--folder .mark-invert::marker{font-family:Material Symbols Outlined}.s-list-simple--a1 ul>li:before{color:var(--primary-600);font-weight:700;content:counter(level1) \". \";counter-increment:level1}.s-list-simple--a1 ul ul>li:before{color:var(--secondary-600);font-weight:700;content:counter(level2,lower-alpha) \". \";counter-increment:level2}.s-list-simple--a1 ul ul ul>li:before{font-weight:400;content:counter(level2,lower-alpha) \".\" counter(level3) \" \";counter-increment:level3}.s-list-simple--a1 ul{counter-reset:level1}.s-list-simple--a1 ul ul{counter-reset:level2}.s-list-simple--a1 ul ul ul{counter-reset:level3}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SListSimpleComponent, selector: "s-list-simple", inputs: { listStyle: "listStyle" }, ngImport: i0, template: "<div class=\"s-list-simple s-list-simple--{{listStyle}}\">\n    <ng-content></ng-content>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v316/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2) format(\"woff2\")}.s-list-simple ul{font-size:.875rem;font-weight:400;line-height:1.25rem;letter-spacing:.01563rem;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}.s-list-simple ul,.s-list-simple ol{margin-left:.625rem}.s-list-simple ul ul,.s-list-simple ul ol,.s-list-simple ol ul,.s-list-simple ol ol{margin-left:1.063rem}.s-list-simple ul ul ul,.s-list-simple ul ul ol,.s-list-simple ul ol ul,.s-list-simple ul ol ol,.s-list-simple ol ul ul,.s-list-simple ol ul ol,.s-list-simple ol ol ul,.s-list-simple ol ol ol{margin-left:1.5rem}.s-list-simple ul ul ul ul,.s-list-simple ul ul ul ol,.s-list-simple ul ul ol ul,.s-list-simple ul ul ol ol,.s-list-simple ul ol ul ul,.s-list-simple ul ol ul ol,.s-list-simple ul ol ol ul,.s-list-simple ul ol ol ol,.s-list-simple ol ul ul ul,.s-list-simple ol ul ul ol,.s-list-simple ol ul ol ul,.s-list-simple ol ul ol ol,.s-list-simple ol ol ul ul,.s-list-simple ol ol ul ol,.s-list-simple ol ol ol ul,.s-list-simple ol ol ol ol{margin-left:30.063rem}.s-list-simple--default ul{list-style:disc}.s-list-simple--check li,.s-list-simple--chevron li,.s-list-simple--folder li{list-style-type:none}.s-list-simple--check li:before,.s-list-simple--chevron li:before,.s-list-simple--folder li:before{font-family:Material Icons;display:inline-block;margin-right:.5em}.s-list-simple--check ul ul ul li:before{color:var(--green-700)}.s-list-simple--check ul ul ul .mark-invert:before,.s-list-simple--check ul ul ul .mark-invert::marker{color:var(--green-600)!important}.s-list-simple--check li:before{content:\"\\e5ca\";color:var(--green-600)}.s-list-simple--check .mark-invert:before,.s-list-simple--check .mark-invert::marker{color:var(--green-700)}.s-list-simple--chevron li:before{content:\"\\e5cc\";color:var(--secondary-600)}.s-list-simple--dot ul,.s-list-simple--dot ul ul{list-style:disc}.s-list-simple--dot ul ul ul{list-style:circle}.s-list-simple--dot li::marker{font-size:1.063rem;color:var(--secondary-600)}.s-list-simple--folder ul ul ul li:before{font-family:Material Symbols Outlined}.s-list-simple--folder ul ul ul .mark-invert:before,.s-list-simple--folder ul ul ul .mark-invert::marker{font-family:Material Icons!important}.s-list-simple--folder li:before{content:\"\\e2c7\";color:var(--secondary-600)}.s-list-simple--folder .mark-invert:before,.s-list-simple--folder .mark-invert::marker{font-family:Material Symbols Outlined}.s-list-simple--a1 ul>li:before{color:var(--primary-600);font-weight:700;content:counter(level1) \". \";counter-increment:level1}.s-list-simple--a1 ul ul>li:before{color:var(--secondary-600);font-weight:700;content:counter(level2,lower-alpha) \". \";counter-increment:level2}.s-list-simple--a1 ul ul ul>li:before{font-weight:400;content:counter(level2,lower-alpha) \".\" counter(level3) \" \";counter-increment:level3}.s-list-simple--a1 ul{counter-reset:level1}.s-list-simple--a1 ul ul{counter-reset:level2}.s-list-simple--a1 ul ul ul{counter-reset:level3}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SListSimpleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-list-simple', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-list-simple s-list-simple--{{listStyle}}\">\n    <ng-content></ng-content>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v292/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format(\"woff2\")}.s-list-simple ul{font-size:.875rem;font-weight:400;line-height:1.25rem;letter-spacing:.01563rem;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}.s-list-simple ul,.s-list-simple ol{margin-left:.625rem}.s-list-simple ul ul,.s-list-simple ul ol,.s-list-simple ol ul,.s-list-simple ol ol{margin-left:1.063rem}.s-list-simple ul ul ul,.s-list-simple ul ul ol,.s-list-simple ul ol ul,.s-list-simple ul ol ol,.s-list-simple ol ul ul,.s-list-simple ol ul ol,.s-list-simple ol ol ul,.s-list-simple ol ol ol{margin-left:1.5rem}.s-list-simple ul ul ul ul,.s-list-simple ul ul ul ol,.s-list-simple ul ul ol ul,.s-list-simple ul ul ol ol,.s-list-simple ul ol ul ul,.s-list-simple ul ol ul ol,.s-list-simple ul ol ol ul,.s-list-simple ul ol ol ol,.s-list-simple ol ul ul ul,.s-list-simple ol ul ul ol,.s-list-simple ol ul ol ul,.s-list-simple ol ul ol ol,.s-list-simple ol ol ul ul,.s-list-simple ol ol ul ol,.s-list-simple ol ol ol ul,.s-list-simple ol ol ol ol{margin-left:30.063rem}.s-list-simple--default ul{list-style:disc}.s-list-simple--check li,.s-list-simple--chevron li,.s-list-simple--folder li{list-style-type:none}.s-list-simple--check li:before,.s-list-simple--chevron li:before,.s-list-simple--folder li:before{font-family:Material Icons;display:inline-block;margin-right:.5em}.s-list-simple--check ul ul ul li:before{color:var(--green-700)}.s-list-simple--check ul ul ul .mark-invert:before,.s-list-simple--check ul ul ul .mark-invert::marker{color:var(--green-600)!important}.s-list-simple--check li:before{content:\"\\e5ca\";color:var(--green-600)}.s-list-simple--check .mark-invert:before,.s-list-simple--check .mark-invert::marker{color:var(--green-700)}.s-list-simple--chevron li:before{content:\"\\e5cc\";color:var(--secondary-600)}.s-list-simple--dot ul,.s-list-simple--dot ul ul{list-style:disc}.s-list-simple--dot ul ul ul{list-style:circle}.s-list-simple--dot li::marker{font-size:1.063rem;color:var(--secondary-600)}.s-list-simple--folder ul ul ul li:before{font-family:Material Symbols Outlined}.s-list-simple--folder ul ul ul .mark-invert:before,.s-list-simple--folder ul ul ul .mark-invert::marker{font-family:Material Icons!important}.s-list-simple--folder li:before{content:\"\\e2c7\";color:var(--secondary-600)}.s-list-simple--folder .mark-invert:before,.s-list-simple--folder .mark-invert::marker{font-family:Material Symbols Outlined}.s-list-simple--a1 ul>li:before{color:var(--primary-600);font-weight:700;content:counter(level1) \". \";counter-increment:level1}.s-list-simple--a1 ul ul>li:before{color:var(--secondary-600);font-weight:700;content:counter(level2,lower-alpha) \". \";counter-increment:level2}.s-list-simple--a1 ul ul ul>li:before{font-weight:400;content:counter(level2,lower-alpha) \".\" counter(level3) \" \";counter-increment:level3}.s-list-simple--a1 ul{counter-reset:level1}.s-list-simple--a1 ul ul{counter-reset:level2}.s-list-simple--a1 ul ul ul{counter-reset:level3}\n"] }]
+            args: [{ selector: 's-list-simple', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-list-simple s-list-simple--{{listStyle}}\">\n    <ng-content></ng-content>\n</div>", styles: ["@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v316/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2) format(\"woff2\")}.s-list-simple ul{font-size:.875rem;font-weight:400;line-height:1.25rem;letter-spacing:.01563rem;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}.s-list-simple ul,.s-list-simple ol{margin-left:.625rem}.s-list-simple ul ul,.s-list-simple ul ol,.s-list-simple ol ul,.s-list-simple ol ol{margin-left:1.063rem}.s-list-simple ul ul ul,.s-list-simple ul ul ol,.s-list-simple ul ol ul,.s-list-simple ul ol ol,.s-list-simple ol ul ul,.s-list-simple ol ul ol,.s-list-simple ol ol ul,.s-list-simple ol ol ol{margin-left:1.5rem}.s-list-simple ul ul ul ul,.s-list-simple ul ul ul ol,.s-list-simple ul ul ol ul,.s-list-simple ul ul ol ol,.s-list-simple ul ol ul ul,.s-list-simple ul ol ul ol,.s-list-simple ul ol ol ul,.s-list-simple ul ol ol ol,.s-list-simple ol ul ul ul,.s-list-simple ol ul ul ol,.s-list-simple ol ul ol ul,.s-list-simple ol ul ol ol,.s-list-simple ol ol ul ul,.s-list-simple ol ol ul ol,.s-list-simple ol ol ol ul,.s-list-simple ol ol ol ol{margin-left:30.063rem}.s-list-simple--default ul{list-style:disc}.s-list-simple--check li,.s-list-simple--chevron li,.s-list-simple--folder li{list-style-type:none}.s-list-simple--check li:before,.s-list-simple--chevron li:before,.s-list-simple--folder li:before{font-family:Material Icons;display:inline-block;margin-right:.5em}.s-list-simple--check ul ul ul li:before{color:var(--green-700)}.s-list-simple--check ul ul ul .mark-invert:before,.s-list-simple--check ul ul ul .mark-invert::marker{color:var(--green-600)!important}.s-list-simple--check li:before{content:\"\\e5ca\";color:var(--green-600)}.s-list-simple--check .mark-invert:before,.s-list-simple--check .mark-invert::marker{color:var(--green-700)}.s-list-simple--chevron li:before{content:\"\\e5cc\";color:var(--secondary-600)}.s-list-simple--dot ul,.s-list-simple--dot ul ul{list-style:disc}.s-list-simple--dot ul ul ul{list-style:circle}.s-list-simple--dot li::marker{font-size:1.063rem;color:var(--secondary-600)}.s-list-simple--folder ul ul ul li:before{font-family:Material Symbols Outlined}.s-list-simple--folder ul ul ul .mark-invert:before,.s-list-simple--folder ul ul ul .mark-invert::marker{font-family:Material Icons!important}.s-list-simple--folder li:before{content:\"\\e2c7\";color:var(--secondary-600)}.s-list-simple--folder .mark-invert:before,.s-list-simple--folder .mark-invert::marker{font-family:Material Symbols Outlined}.s-list-simple--a1 ul>li:before{color:var(--primary-600);font-weight:700;content:counter(level1) \". \";counter-increment:level1}.s-list-simple--a1 ul ul>li:before{color:var(--secondary-600);font-weight:700;content:counter(level2,lower-alpha) \". \";counter-increment:level2}.s-list-simple--a1 ul ul ul>li:before{font-weight:400;content:counter(level2,lower-alpha) \".\" counter(level3) \" \";counter-increment:level3}.s-list-simple--a1 ul{counter-reset:level1}.s-list-simple--a1 ul ul{counter-reset:level2}.s-list-simple--a1 ul ul ul{counter-reset:level3}\n"] }]
         }], propDecorators: { listStyle: [{
                 type: Input
             }] } });
@@ -6063,11 +6092,11 @@ class STabsComponent {
         this.eventSelect.emit(tab);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: STabsComponent, selector: "s-tabs", inputs: { tabs: "tabs", configTabs: "configTabs" }, outputs: { eventSelect: "eventSelect" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"s-tabs s-scroll no-select\"\n  *ngIf=\"tabsConfig\"\n  [ngClass]=\"{\n    's-tabs__background': configTabs?.background,\n    's-tabs__pill': configTabs?.pill,\n    's-tabs__sm': configTabs?.size === 'sm',\n  }\">\n  <div class=\"s-tabs__container\" [ngStyle]=\"{ width: configTabs?.width + '%' }\">\n    <div\n      class=\"s-tabs__content\"\n      *ngFor=\"let tab of tabsConfig\"\n      [ngClass]=\"{\n        selected: tab.selected,\n        highlight: tab.highlight,\n        disabled: tab.disabled,\n      }\"\n      tabindex=\"0\"\n      (keydown.enter)=\"selectTab(tab)\"\n      (click)=\"selectTab(tab)\">\n      <s-icon-mat\n        class=\"s-tabs__icon\"\n        *ngIf=\"tab.icon\"\n        [ngClass]=\"[tab.iconType ? tab.iconType : '']\"\n        [type]=\"tab.iconSymbol ? 'symbol' : 'icon'\"\n        >{{ tab.icon }}</s-icon-mat\n      >\n      <span *ngIf=\"tab.text\" class=\"s-tabs__text\">{{ tab.text }}</span>\n      <s-badge\n        *ngIf=\"tab.badge\"\n        [type]=\"tab.badgeType ? tab.badgeType : 'primary'\"\n        >{{ tab.badge }}</s-badge\n      >\n    </div>\n  </div>\n</div>\n", styles: [".s-tabs{border-top-right-radius:.5rem;border-top-left-radius:.5rem;display:block;overflow:auto}.s-tabs__icon .s-icon-mat span{font-size:1.25rem}.s-tabs .material-icons{font-size:1.5rem}.s-tabs__container{display:flex;justify-content:center}.s-tabs__content{align-items:center;color:var(--secondary-600);cursor:pointer;display:flex;flex-basis:50%;flex-grow:1;font-size:1rem;justify-content:center;line-height:2rem;padding:.896rem .5rem;text-align:center;gap:.4rem}.s-tabs__content.selected{border-bottom:.063rem solid var(--primary-600);color:var(--primary-600);background-color:var(--primary-200);border-top-right-radius:.5rem;border-top-left-radius:.5rem}.s-tabs__content.highlight{background-color:var(--primary-200)}.s-tabs__content.disabled{color:var(--secondary-300);cursor:not-allowed}.s-tabs .primary{color:var(--primary-600)}.s-tabs .secondary{color:var(--secondary-600)}.s-tabs .green{color:var(--green-600)}.s-tabs .yellow{color:var(--yellow-600)}.s-tabs .red{color:var(--red-600)}.s-tabs__text{font-weight:700}.s-tabs__background{background-color:var(--primary-100)}.s-tabs__pill{padding:.5rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.s-tabs__pill .s-tabs{background-color:var(--primary-100)}.s-tabs__pill .s-tabs__container{gap:.5rem}.s-tabs__pill .s-tabs__content{padding:.43rem .187rem;border-bottom:0;border-radius:.25rem}.s-tabs__pill .s-tabs__content.selected{color:var(--primary-600);background-color:var(--primary-200)}.s-tabs__sm .s-tabs__text{font-size:.75rem}.s-tabs__sm .s-tabs__icon span{font-size:1.3rem}.s-tabs__sm.s-tabs__pill{padding:.25rem}.s-tabs__sm.s-tabs__pill .s-tabs__content{padding:.299rem .187rem}.s-tabs__sm .s-tabs__content{padding:.24rem .187rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SBadgeComponent, selector: "s-badge", inputs: ["type", "size", "new"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: STabsComponent, selector: "s-tabs", inputs: { tabs: "tabs", configTabs: "configTabs" }, outputs: { eventSelect: "eventSelect" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"s-tabs s-scroll no-select\"\n  *ngIf=\"tabsConfig\"\n  [ngClass]=\"{\n    's-tabs__background': configTabs?.background,\n    's-tabs__pill': configTabs?.pill,\n    's-tabs__sm': configTabs?.size === 'sm',\n    's-tabs__vertical': configTabs?.orientation === 'vertical',\n    's-tabs__underline': configTabs?.underline,\n    's-tabs__backgroundSelected': configTabs?.backgroundSelected\n  }\"\n  [ngStyle]=\"{\n    '--tabs-width': configTabs?.width + '%',\n    '--tabs-height': configTabs?.height + '%'\n  }\"\n  >\n  <div class=\"s-tabs__container\" [ngStyle]=\"{ width: configTabs?.width + '%' }\">\n    <div\n      class=\"s-tabs__content\"\n      *ngFor=\"let tab of tabsConfig\"\n      [ngClass]=\"{\n        selected: tab.selected,\n        highlight: tab.highlight,\n        disabled: tab.disabled,\n      }\"\n      tabindex=\"0\"\n      (keydown.enter)=\"selectTab(tab)\"\n      (click)=\"selectTab(tab)\">\n      <s-icon-mat\n        class=\"s-tabs__icon\"\n        *ngIf=\"tab.icon\"\n        [ngClass]=\"[tab.iconType ? tab.iconType : '']\"\n        [type]=\"tab.iconSymbol ? 'symbol' : 'icon'\"\n        >{{ tab.icon }}</s-icon-mat\n      >\n      <span *ngIf=\"tab.text\" class=\"s-tabs__text\">{{ tab.text }}</span>\n      <s-badge\n        *ngIf=\"tab.badge\"\n        [type]=\"tab.badgeType ? tab.badgeType : 'primary'\"\n        >{{ tab.badge }}</s-badge\n      >\n    </div>\n  </div>\n</div>\n", styles: [".s-tabs{border-top-right-radius:.5rem;border-top-left-radius:.5rem;display:block;overflow:auto;height:var(--tabs-height, auto)}.s-tabs__icon .s-icon-mat span{font-size:1.25rem}.s-tabs .material-icons{font-size:1.5rem}.s-tabs__container{display:flex;justify-content:center;height:13%}.s-tabs__content{align-items:center;color:var(--secondary-600);cursor:pointer;display:flex;flex-basis:50%;flex-grow:1;font-size:1rem;justify-content:center;line-height:2rem;padding:.896rem .5rem;text-align:center;gap:.4rem}.s-tabs__content.selected{color:var(--primary-600);background-color:var(--primary-200);border-top-right-radius:.5rem;border-top-left-radius:.5rem}.s-tabs__content.highlight{background-color:var(--primary-200)}.s-tabs__content.disabled{color:var(--secondary-300);cursor:not-allowed}.s-tabs .primary{color:var(--primary-600)}.s-tabs .secondary{color:var(--secondary-600)}.s-tabs .green{color:var(--green-600)}.s-tabs .yellow{color:var(--yellow-600)}.s-tabs .red{color:var(--red-600)}.s-tabs__text{font-weight:700}.s-tabs__background{background-color:var(--primary-100)}.s-tabs__pill{padding:.5rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.s-tabs__pill .s-tabs{background-color:var(--primary-100)}.s-tabs__pill .s-tabs__container{gap:.5rem}.s-tabs__pill .s-tabs__content{padding:.43rem .187rem;border-bottom:0;border-radius:.25rem}.s-tabs__pill .s-tabs__content.selected{color:var(--primary-600);background-color:var(--primary-200)}.s-tabs__sm .s-tabs__text{font-size:.75rem}.s-tabs__sm .s-tabs__icon span{font-size:1.3rem}.s-tabs__sm.s-tabs__pill{padding:.25rem}.s-tabs__sm.s-tabs__pill .s-tabs__content{padding:.299rem .187rem}.s-tabs__sm .s-tabs__content{padding:.24rem .187rem}.s-tabs__vertical{display:flex;width:var(--tabs-width, max-content);height:var(--tabs-height, 100%)}.s-tabs__vertical s-icon-mat.s-tabs__icon{padding-left:.6rem;padding-right:.2rem}.s-tabs__vertical .s-tabs__container{flex-direction:column;width:100%!important;justify-content:flex-start;align-items:stretch}.s-tabs__vertical.s-tabs__pill{padding-left:.7rem;padding-right:.7rem;padding-bottom:var(--_pill-padding-bottom, .5rem)}.s-tabs__vertical.s-tabs__pill .s-tabs__container{display:flex;flex-direction:column;width:100%!important;justify-content:flex-start;align-items:center!important}.s-tabs__vertical .s-tabs__content{justify-content:flex-start;text-align:left;flex-basis:auto;border-bottom:none;border-left:.063rem solid transparent;border-radius:0}.s-tabs__vertical .s-tabs__content.selected{border-left:.188rem solid var(--primary-600);border-bottom:none;border-top-right-radius:0;border-top-left-radius:0;background-color:var(--primary-200)}.s-tabs__vertical .s-tabs__content:not(:has(.s-tabs__icon)) .s-tabs__text{padding-left:.5rem}.s-tabs__vertical.s-tabs__pill .s-tabs__container{gap:.5rem}.s-tabs__vertical.s-tabs__pill .s-tabs__content{border-left:0;border-radius:.25rem;width:100%}.s-tabs__vertical.s-tabs__pill .s-tabs__content.selected{border-left:0}.s-tabs__vertical.s-tabs__underline.s-tabs__pill .s-tabs__content.selected{border-bottom:.15rem solid var(--primary-600);border-bottom-left-radius:0;border-bottom-right-radius:0}.s-tabs__vertical.s-tabs__backgroundSelected.s-tabs__pill .s-tabs__content.selected{background:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SBadgeComponent, selector: "s-badge", inputs: ["type", "size", "new"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-tabs', encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"s-tabs s-scroll no-select\"\n  *ngIf=\"tabsConfig\"\n  [ngClass]=\"{\n    's-tabs__background': configTabs?.background,\n    's-tabs__pill': configTabs?.pill,\n    's-tabs__sm': configTabs?.size === 'sm',\n  }\">\n  <div class=\"s-tabs__container\" [ngStyle]=\"{ width: configTabs?.width + '%' }\">\n    <div\n      class=\"s-tabs__content\"\n      *ngFor=\"let tab of tabsConfig\"\n      [ngClass]=\"{\n        selected: tab.selected,\n        highlight: tab.highlight,\n        disabled: tab.disabled,\n      }\"\n      tabindex=\"0\"\n      (keydown.enter)=\"selectTab(tab)\"\n      (click)=\"selectTab(tab)\">\n      <s-icon-mat\n        class=\"s-tabs__icon\"\n        *ngIf=\"tab.icon\"\n        [ngClass]=\"[tab.iconType ? tab.iconType : '']\"\n        [type]=\"tab.iconSymbol ? 'symbol' : 'icon'\"\n        >{{ tab.icon }}</s-icon-mat\n      >\n      <span *ngIf=\"tab.text\" class=\"s-tabs__text\">{{ tab.text }}</span>\n      <s-badge\n        *ngIf=\"tab.badge\"\n        [type]=\"tab.badgeType ? tab.badgeType : 'primary'\"\n        >{{ tab.badge }}</s-badge\n      >\n    </div>\n  </div>\n</div>\n", styles: [".s-tabs{border-top-right-radius:.5rem;border-top-left-radius:.5rem;display:block;overflow:auto}.s-tabs__icon .s-icon-mat span{font-size:1.25rem}.s-tabs .material-icons{font-size:1.5rem}.s-tabs__container{display:flex;justify-content:center}.s-tabs__content{align-items:center;color:var(--secondary-600);cursor:pointer;display:flex;flex-basis:50%;flex-grow:1;font-size:1rem;justify-content:center;line-height:2rem;padding:.896rem .5rem;text-align:center;gap:.4rem}.s-tabs__content.selected{border-bottom:.063rem solid var(--primary-600);color:var(--primary-600);background-color:var(--primary-200);border-top-right-radius:.5rem;border-top-left-radius:.5rem}.s-tabs__content.highlight{background-color:var(--primary-200)}.s-tabs__content.disabled{color:var(--secondary-300);cursor:not-allowed}.s-tabs .primary{color:var(--primary-600)}.s-tabs .secondary{color:var(--secondary-600)}.s-tabs .green{color:var(--green-600)}.s-tabs .yellow{color:var(--yellow-600)}.s-tabs .red{color:var(--red-600)}.s-tabs__text{font-weight:700}.s-tabs__background{background-color:var(--primary-100)}.s-tabs__pill{padding:.5rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.s-tabs__pill .s-tabs{background-color:var(--primary-100)}.s-tabs__pill .s-tabs__container{gap:.5rem}.s-tabs__pill .s-tabs__content{padding:.43rem .187rem;border-bottom:0;border-radius:.25rem}.s-tabs__pill .s-tabs__content.selected{color:var(--primary-600);background-color:var(--primary-200)}.s-tabs__sm .s-tabs__text{font-size:.75rem}.s-tabs__sm .s-tabs__icon span{font-size:1.3rem}.s-tabs__sm.s-tabs__pill{padding:.25rem}.s-tabs__sm.s-tabs__pill .s-tabs__content{padding:.299rem .187rem}.s-tabs__sm .s-tabs__content{padding:.24rem .187rem}\n"] }]
+            args: [{ selector: 's-tabs', encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"s-tabs s-scroll no-select\"\n  *ngIf=\"tabsConfig\"\n  [ngClass]=\"{\n    's-tabs__background': configTabs?.background,\n    's-tabs__pill': configTabs?.pill,\n    's-tabs__sm': configTabs?.size === 'sm',\n    's-tabs__vertical': configTabs?.orientation === 'vertical',\n    's-tabs__underline': configTabs?.underline,\n    's-tabs__backgroundSelected': configTabs?.backgroundSelected\n  }\"\n  [ngStyle]=\"{\n    '--tabs-width': configTabs?.width + '%',\n    '--tabs-height': configTabs?.height + '%'\n  }\"\n  >\n  <div class=\"s-tabs__container\" [ngStyle]=\"{ width: configTabs?.width + '%' }\">\n    <div\n      class=\"s-tabs__content\"\n      *ngFor=\"let tab of tabsConfig\"\n      [ngClass]=\"{\n        selected: tab.selected,\n        highlight: tab.highlight,\n        disabled: tab.disabled,\n      }\"\n      tabindex=\"0\"\n      (keydown.enter)=\"selectTab(tab)\"\n      (click)=\"selectTab(tab)\">\n      <s-icon-mat\n        class=\"s-tabs__icon\"\n        *ngIf=\"tab.icon\"\n        [ngClass]=\"[tab.iconType ? tab.iconType : '']\"\n        [type]=\"tab.iconSymbol ? 'symbol' : 'icon'\"\n        >{{ tab.icon }}</s-icon-mat\n      >\n      <span *ngIf=\"tab.text\" class=\"s-tabs__text\">{{ tab.text }}</span>\n      <s-badge\n        *ngIf=\"tab.badge\"\n        [type]=\"tab.badgeType ? tab.badgeType : 'primary'\"\n        >{{ tab.badge }}</s-badge\n      >\n    </div>\n  </div>\n</div>\n", styles: [".s-tabs{border-top-right-radius:.5rem;border-top-left-radius:.5rem;display:block;overflow:auto;height:var(--tabs-height, auto)}.s-tabs__icon .s-icon-mat span{font-size:1.25rem}.s-tabs .material-icons{font-size:1.5rem}.s-tabs__container{display:flex;justify-content:center;height:13%}.s-tabs__content{align-items:center;color:var(--secondary-600);cursor:pointer;display:flex;flex-basis:50%;flex-grow:1;font-size:1rem;justify-content:center;line-height:2rem;padding:.896rem .5rem;text-align:center;gap:.4rem}.s-tabs__content.selected{color:var(--primary-600);background-color:var(--primary-200);border-top-right-radius:.5rem;border-top-left-radius:.5rem}.s-tabs__content.highlight{background-color:var(--primary-200)}.s-tabs__content.disabled{color:var(--secondary-300);cursor:not-allowed}.s-tabs .primary{color:var(--primary-600)}.s-tabs .secondary{color:var(--secondary-600)}.s-tabs .green{color:var(--green-600)}.s-tabs .yellow{color:var(--yellow-600)}.s-tabs .red{color:var(--red-600)}.s-tabs__text{font-weight:700}.s-tabs__background{background-color:var(--primary-100)}.s-tabs__pill{padding:.5rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.s-tabs__pill .s-tabs{background-color:var(--primary-100)}.s-tabs__pill .s-tabs__container{gap:.5rem}.s-tabs__pill .s-tabs__content{padding:.43rem .187rem;border-bottom:0;border-radius:.25rem}.s-tabs__pill .s-tabs__content.selected{color:var(--primary-600);background-color:var(--primary-200)}.s-tabs__sm .s-tabs__text{font-size:.75rem}.s-tabs__sm .s-tabs__icon span{font-size:1.3rem}.s-tabs__sm.s-tabs__pill{padding:.25rem}.s-tabs__sm.s-tabs__pill .s-tabs__content{padding:.299rem .187rem}.s-tabs__sm .s-tabs__content{padding:.24rem .187rem}.s-tabs__vertical{display:flex;width:var(--tabs-width, max-content);height:var(--tabs-height, 100%)}.s-tabs__vertical s-icon-mat.s-tabs__icon{padding-left:.6rem;padding-right:.2rem}.s-tabs__vertical .s-tabs__container{flex-direction:column;width:100%!important;justify-content:flex-start;align-items:stretch}.s-tabs__vertical.s-tabs__pill{padding-left:.7rem;padding-right:.7rem;padding-bottom:var(--_pill-padding-bottom, .5rem)}.s-tabs__vertical.s-tabs__pill .s-tabs__container{display:flex;flex-direction:column;width:100%!important;justify-content:flex-start;align-items:center!important}.s-tabs__vertical .s-tabs__content{justify-content:flex-start;text-align:left;flex-basis:auto;border-bottom:none;border-left:.063rem solid transparent;border-radius:0}.s-tabs__vertical .s-tabs__content.selected{border-left:.188rem solid var(--primary-600);border-bottom:none;border-top-right-radius:0;border-top-left-radius:0;background-color:var(--primary-200)}.s-tabs__vertical .s-tabs__content:not(:has(.s-tabs__icon)) .s-tabs__text{padding-left:.5rem}.s-tabs__vertical.s-tabs__pill .s-tabs__container{gap:.5rem}.s-tabs__vertical.s-tabs__pill .s-tabs__content{border-left:0;border-radius:.25rem;width:100%}.s-tabs__vertical.s-tabs__pill .s-tabs__content.selected{border-left:0}.s-tabs__vertical.s-tabs__underline.s-tabs__pill .s-tabs__content.selected{border-bottom:.15rem solid var(--primary-600);border-bottom-left-radius:0;border-bottom-right-radius:0}.s-tabs__vertical.s-tabs__backgroundSelected.s-tabs__pill .s-tabs__content.selected{background:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{
                 type: Input
             }], configTabs: [{
@@ -6466,6 +6495,8 @@ class TableCompleteComponent {
         this.searchEvent = new EventEmitter();
         this.bottomStatusBarEvent = new EventEmitter();
         this.scrollEvent = new EventEmitter();
+        this._sTranslateService = inject(STranslateService);
+        this.searchText = '';
     }
     ngOnChanges(changes) {
         if (changes['config']) {
@@ -6474,12 +6505,17 @@ class TableCompleteComponent {
     }
     ngOnInit() {
         this.filtersDisabled();
+        this.emptyConfigSearch = {
+            image: 'assets/empty/empty-search.png',
+            title: this._sTranslateService.instant('ui.generic.emptySearch.title'),
+            detail: this._sTranslateService.instant('ui.generic.emptySearch.detail'),
+        };
     }
     filtersDisabled() {
         if (this.config.configToolbarTop) {
             this.config.configToolbarTop = {
                 ...this.config.configToolbarTop,
-                filtersDisabled: this.config.totalItems === 0,
+                filtersDisabled: this.config.totalItems === 0 && this.searchText === '',
             };
         }
     }
@@ -6496,6 +6532,7 @@ class TableCompleteComponent {
         this.deleteEvent.emit();
     }
     search(text) {
+        this.searchText = text;
         this.searchEvent.emit(text);
     }
     select(value) {
@@ -6531,11 +6568,11 @@ class TableCompleteComponent {
         this.scrollEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TableCompleteComponent, selector: "s-table-complete", inputs: { config: "config" }, outputs: { actionEvent: "actionEvent", checkAllEvent: "checkAllEvent", deleteEvent: "deleteEvent", emptyEvent: "emptyEvent", filterEvent: "filterEvent", orderByEvent: "orderByEvent", pageEvent: "pageEvent", paginationEvent: "paginationEvent", multiSelectEvent: "multiSelectEvent", pillButtonEvent: "pillButtonEvent", selectEvent: "selectEvent", searchEvent: "searchEvent", bottomStatusBarEvent: "bottomStatusBarEvent", scrollEvent: "scrollEvent" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"s-table-complete\">\n  <s-toolbar-top\n    *ngIf=\"config.configToolbarTop\"\n    [config]=\"config.configToolbarTop\"\n    (searchEvent)=\"search($event)\"\n    (actionEvent)=\"action()\"\n    (deleteEvent)=\"delete()\"\n    (filterEvent)=\"filter($event)\"\n    (multiSelectEvent)=\"multiSelect($event)\"\n    (pillButtonEvent)=\"pillButton()\"\n    (selectEvent)=\"select($event)\">\n  </s-toolbar-top>\n  <div class=\"s-table-complete__table\" *ngIf=\"config.columns\">\n    <s-tablet\n      [configColumn]=\"config.columns\"\n      [loading]=\"config.totalItems === 0\"\n      [loadingScroll]=\"config.loadingScroll ?? false\"\n      (ordenByEvent)=\"ordenEvent($event)\"\n      (checkAllEvent)=\"checkAll($event)\"\n      (scrollEvent)=\"onScroll()\">\n      <ng-template STemplate=\"body\">\n        <ng-content></ng-content>\n      </ng-template>\n      <ng-template STemplate=\"bodyloading\" #notItems>\n        <s-empty *ngIf=\"config.emptyConfig\" [config]=\"config.emptyConfig\" (buttonEvent)=\"buttonEmpty()\"></s-empty>\n      </ng-template>\n    </s-tablet>\n  </div>\n  @if (config.configBottomStatusBar) {\n    <s-bottom-status-bar\n      [config]=\"config.configBottomStatusBar()\"\n      (stateChangeEvent)=\"selectionControlChange($event)\" />\n  }\n  @if (!config.scroll) {\n    @if (!config.hidePagination) {\n      <div class=\"s-table-complete__pagination\">\n        <section>\n          <s-pagination\n            *ngIf=\"config.paginationText\"\n            [disabled]=\"config.totalItems === 0\"\n            [showing]=\"config.paginationText.showing\"\n            [of]=\"config.paginationText.of\"\n            [items]=\"config.paginationText.items\"\n            [empty]=\"config.paginationText.empty\"\n            [pageNumber]=\"config.pageNumber ?? 0\"\n            [pageSize]=\"config.pageSize ?? 0\"\n            [pageSizes]=\"config.pageSizes ? config.pageSizes : undefined\"\n            [totalItems]=\"config.totalItems ?? 0\"\n            (pageEmitter)=\"goToPage($event)\"\n            (paginationEmitter)=\"pagination($event)\">\n          </s-pagination>\n          <s-pagination\n            *ngIf=\"!config.paginationText\"\n            [disabled]=\"config.totalItems === 0\"\n            [pageNumber]=\"config.pageNumber ?? 0\"\n            [totalItems]=\"config.totalItems ?? 0\"\n            [pageSize]=\"config.pageSize ?? 0\"\n            [pageSizes]=\"config.pageSizes ? config.pageSizes : undefined\"\n            (pageEmitter)=\"goToPage($event)\"\n            (paginationEmitter)=\"pagination($event)\">\n          </s-pagination>\n        </section>\n      </div>\n    }\n  }\n</section>\n", styles: [".s-table-complete{width:100%;box-shadow:var(--E000);border-radius:.5rem}.s-table-complete__table{background:var(--neutrals-1200)!important}.s-table-complete__pagination{background-color:var(--neutrals-1200);border-top:.031rem solid var(--secondary-300);border-radius:0 0 .5rem .5rem;padding:1rem}.s-table-complete .border-bottom{border-bottom:.031rem solid var(--secondary-300)}.s-table-complete s-tablet .pre-s-tablet{height:37rem;background-color:var(--primary-100)}.s-table-complete .s-scroll::-webkit-scrollbar-track{background-color:var(--neutrals-1200)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SToolbarTopComponent, selector: "s-toolbar-top", inputs: ["config"], outputs: ["actionEvent", "deleteEvent", "filterEvent", "multiSelectEvent", "pillButtonEvent", "selectEvent", "searchEvent"] }, { kind: "component", type: EmptyComponent, selector: "s-empty", inputs: ["config"], outputs: ["buttonEvent"] }, { kind: "component", type: STabletComponent, selector: "s-tablet", inputs: ["data", "loading", "caption", "header", "bodyloading", "body", "configColumn", "loadingScroll"], outputs: ["updateDataEvent", "ordenByEvent", "checkAllEvent", "scrollEvent"] }, { kind: "directive", type: STemplate, selector: "[STemplate]", inputs: ["STemplate"] }, { kind: "component", type: SPaginationComponent, selector: "s-pagination", inputs: ["showing", "to", "of", "items", "empty", "disabled", "pageNumber", "totalItems", "pageSize", "pageSizes"], outputs: ["pageEmitter", "paginationEmitter"] }, { kind: "component", type: SBottomStatusBarComponent, selector: "s-bottom-status-bar", inputs: ["config"], outputs: ["stateChange", "stateChangeEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TableCompleteComponent, selector: "s-table-complete", inputs: { config: "config" }, outputs: { actionEvent: "actionEvent", checkAllEvent: "checkAllEvent", deleteEvent: "deleteEvent", emptyEvent: "emptyEvent", filterEvent: "filterEvent", orderByEvent: "orderByEvent", pageEvent: "pageEvent", paginationEvent: "paginationEvent", multiSelectEvent: "multiSelectEvent", pillButtonEvent: "pillButtonEvent", selectEvent: "selectEvent", searchEvent: "searchEvent", bottomStatusBarEvent: "bottomStatusBarEvent", scrollEvent: "scrollEvent" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"s-table-complete\">\n  <s-toolbar-top\n    *ngIf=\"config.configToolbarTop\"\n    [config]=\"config.configToolbarTop\"\n    (searchEvent)=\"search($event)\"\n    (actionEvent)=\"action()\"\n    (deleteEvent)=\"delete()\"\n    (filterEvent)=\"filter($event)\"\n    (multiSelectEvent)=\"multiSelect($event)\"\n    (pillButtonEvent)=\"pillButton()\"\n    (selectEvent)=\"select($event)\">\n  </s-toolbar-top>\n  <div class=\"s-table-complete__table\" *ngIf=\"config.columns\">\n    <s-tablet\n      [configColumn]=\"config.columns\"\n      [loading]=\"config.totalItems === 0\"\n      [loadingScroll]=\"config.loadingScroll ?? false\"\n      [isTreeMode]=\"config.isTreeMode ?? false\"\n      (ordenByEvent)=\"ordenEvent($event)\"\n      (checkAllEvent)=\"checkAll($event)\"\n      (scrollEvent)=\"onScroll()\">\n      <ng-template STemplate=\"body\">\n        <ng-content></ng-content>\n      </ng-template>\n      <ng-template STemplate=\"bodyloading\" #notItems>\n        @if (searchText) {\n          <s-empty [config]=\"emptyConfigSearch\" (buttonEvent)=\"buttonEmpty()\"></s-empty>\n        } @else {\n          <s-empty *ngIf=\"config.emptyConfig\" [config]=\"config.emptyConfig\" (buttonEvent)=\"buttonEmpty()\"></s-empty>\n        }\n      </ng-template>\n    </s-tablet>\n  </div>\n  @if (config.configBottomStatusBar) {\n    <s-bottom-status-bar\n      [config]=\"config.configBottomStatusBar()\"\n      (stateChangeEvent)=\"selectionControlChange($event)\" />\n  }\n  @if (!config.scroll) {\n    @if (!config.hidePagination) {\n      <div class=\"s-table-complete__pagination\">\n        <section>\n          <s-pagination\n            *ngIf=\"config.paginationText\"\n            [disabled]=\"config.totalItems === 0\"\n            [showing]=\"config.paginationText.showing\"\n            [of]=\"config.paginationText.of\"\n            [items]=\"config.paginationText.items\"\n            [empty]=\"config.paginationText.empty\"\n            [pageNumber]=\"config.pageNumber ?? 0\"\n            [pageSize]=\"config.pageSize ?? 0\"\n            [pageSizes]=\"config.pageSizes ? config.pageSizes : undefined\"\n            [totalItems]=\"config.totalItems ?? 0\"\n            (pageEmitter)=\"goToPage($event)\"\n            (paginationEmitter)=\"pagination($event)\">\n          </s-pagination>\n          <s-pagination\n            *ngIf=\"!config.paginationText\"\n            [disabled]=\"config.totalItems === 0\"\n            [pageNumber]=\"config.pageNumber ?? 0\"\n            [totalItems]=\"config.totalItems ?? 0\"\n            [pageSize]=\"config.pageSize ?? 0\"\n            [pageSizes]=\"config.pageSizes ? config.pageSizes : undefined\"\n            (pageEmitter)=\"goToPage($event)\"\n            (paginationEmitter)=\"pagination($event)\">\n          </s-pagination>\n        </section>\n      </div>\n    }\n  }\n</section>\n", styles: [".s-table-complete{width:100%;box-shadow:var(--E000);border-radius:.5rem}.s-table-complete__table{background:var(--neutrals-1200)!important}.s-table-complete__pagination{background-color:var(--neutrals-1200);border-top:.031rem solid var(--secondary-300);border-radius:0 0 .5rem .5rem;padding:1rem}.s-table-complete .border-bottom{border-bottom:.031rem solid var(--secondary-300)}.s-table-complete s-tablet .pre-s-tablet{height:37rem;background-color:var(--primary-100)}.s-table-complete .s-scroll::-webkit-scrollbar-track{background-color:var(--neutrals-1200)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SToolbarTopComponent, selector: "s-toolbar-top", inputs: ["config"], outputs: ["actionEvent", "deleteEvent", "filterEvent", "multiSelectEvent", "pillButtonEvent", "selectEvent", "searchEvent"] }, { kind: "component", type: EmptyComponent, selector: "s-empty", inputs: ["config"], outputs: ["buttonEvent"] }, { kind: "component", type: STabletComponent, selector: "s-tablet", inputs: ["data", "loading", "caption", "header", "bodyloading", "body", "configColumn", "isTreeMode", "loadingScroll"], outputs: ["updateDataEvent", "ordenByEvent", "checkAllEvent", "scrollEvent"] }, { kind: "directive", type: STemplate, selector: "[STemplate]", inputs: ["STemplate"] }, { kind: "component", type: SPaginationComponent, selector: "s-pagination", inputs: ["showing", "to", "of", "items", "empty", "disabled", "pageNumber", "totalItems", "pageSize", "pageSizes"], outputs: ["pageEmitter", "paginationEmitter"] }, { kind: "component", type: SBottomStatusBarComponent, selector: "s-bottom-status-bar", inputs: ["config"], outputs: ["stateChange", "stateChangeEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableCompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-table-complete', encapsulation: ViewEncapsulation.None, template: "<section class=\"s-table-complete\">\n  <s-toolbar-top\n    *ngIf=\"config.configToolbarTop\"\n    [config]=\"config.configToolbarTop\"\n    (searchEvent)=\"search($event)\"\n    (actionEvent)=\"action()\"\n    (deleteEvent)=\"delete()\"\n    (filterEvent)=\"filter($event)\"\n    (multiSelectEvent)=\"multiSelect($event)\"\n    (pillButtonEvent)=\"pillButton()\"\n    (selectEvent)=\"select($event)\">\n  </s-toolbar-top>\n  <div class=\"s-table-complete__table\" *ngIf=\"config.columns\">\n    <s-tablet\n      [configColumn]=\"config.columns\"\n      [loading]=\"config.totalItems === 0\"\n      [loadingScroll]=\"config.loadingScroll ?? false\"\n      (ordenByEvent)=\"ordenEvent($event)\"\n      (checkAllEvent)=\"checkAll($event)\"\n      (scrollEvent)=\"onScroll()\">\n      <ng-template STemplate=\"body\">\n        <ng-content></ng-content>\n      </ng-template>\n      <ng-template STemplate=\"bodyloading\" #notItems>\n        <s-empty *ngIf=\"config.emptyConfig\" [config]=\"config.emptyConfig\" (buttonEvent)=\"buttonEmpty()\"></s-empty>\n      </ng-template>\n    </s-tablet>\n  </div>\n  @if (config.configBottomStatusBar) {\n    <s-bottom-status-bar\n      [config]=\"config.configBottomStatusBar()\"\n      (stateChangeEvent)=\"selectionControlChange($event)\" />\n  }\n  @if (!config.scroll) {\n    @if (!config.hidePagination) {\n      <div class=\"s-table-complete__pagination\">\n        <section>\n          <s-pagination\n            *ngIf=\"config.paginationText\"\n            [disabled]=\"config.totalItems === 0\"\n            [showing]=\"config.paginationText.showing\"\n            [of]=\"config.paginationText.of\"\n            [items]=\"config.paginationText.items\"\n            [empty]=\"config.paginationText.empty\"\n            [pageNumber]=\"config.pageNumber ?? 0\"\n            [pageSize]=\"config.pageSize ?? 0\"\n            [pageSizes]=\"config.pageSizes ? config.pageSizes : undefined\"\n            [totalItems]=\"config.totalItems ?? 0\"\n            (pageEmitter)=\"goToPage($event)\"\n            (paginationEmitter)=\"pagination($event)\">\n          </s-pagination>\n          <s-pagination\n            *ngIf=\"!config.paginationText\"\n            [disabled]=\"config.totalItems === 0\"\n            [pageNumber]=\"config.pageNumber ?? 0\"\n            [totalItems]=\"config.totalItems ?? 0\"\n            [pageSize]=\"config.pageSize ?? 0\"\n            [pageSizes]=\"config.pageSizes ? config.pageSizes : undefined\"\n            (pageEmitter)=\"goToPage($event)\"\n            (paginationEmitter)=\"pagination($event)\">\n          </s-pagination>\n        </section>\n      </div>\n    }\n  }\n</section>\n", styles: [".s-table-complete{width:100%;box-shadow:var(--E000);border-radius:.5rem}.s-table-complete__table{background:var(--neutrals-1200)!important}.s-table-complete__pagination{background-color:var(--neutrals-1200);border-top:.031rem solid var(--secondary-300);border-radius:0 0 .5rem .5rem;padding:1rem}.s-table-complete .border-bottom{border-bottom:.031rem solid var(--secondary-300)}.s-table-complete s-tablet .pre-s-tablet{height:37rem;background-color:var(--primary-100)}.s-table-complete .s-scroll::-webkit-scrollbar-track{background-color:var(--neutrals-1200)}\n"] }]
+            args: [{ selector: 's-table-complete', encapsulation: ViewEncapsulation.None, template: "<section class=\"s-table-complete\">\n  <s-toolbar-top\n    *ngIf=\"config.configToolbarTop\"\n    [config]=\"config.configToolbarTop\"\n    (searchEvent)=\"search($event)\"\n    (actionEvent)=\"action()\"\n    (deleteEvent)=\"delete()\"\n    (filterEvent)=\"filter($event)\"\n    (multiSelectEvent)=\"multiSelect($event)\"\n    (pillButtonEvent)=\"pillButton()\"\n    (selectEvent)=\"select($event)\">\n  </s-toolbar-top>\n  <div class=\"s-table-complete__table\" *ngIf=\"config.columns\">\n    <s-tablet\n      [configColumn]=\"config.columns\"\n      [loading]=\"config.totalItems === 0\"\n      [loadingScroll]=\"config.loadingScroll ?? false\"\n      [isTreeMode]=\"config.isTreeMode ?? false\"\n      (ordenByEvent)=\"ordenEvent($event)\"\n      (checkAllEvent)=\"checkAll($event)\"\n      (scrollEvent)=\"onScroll()\">\n      <ng-template STemplate=\"body\">\n        <ng-content></ng-content>\n      </ng-template>\n      <ng-template STemplate=\"bodyloading\" #notItems>\n        @if (searchText) {\n          <s-empty [config]=\"emptyConfigSearch\" (buttonEvent)=\"buttonEmpty()\"></s-empty>\n        } @else {\n          <s-empty *ngIf=\"config.emptyConfig\" [config]=\"config.emptyConfig\" (buttonEvent)=\"buttonEmpty()\"></s-empty>\n        }\n      </ng-template>\n    </s-tablet>\n  </div>\n  @if (config.configBottomStatusBar) {\n    <s-bottom-status-bar\n      [config]=\"config.configBottomStatusBar()\"\n      (stateChangeEvent)=\"selectionControlChange($event)\" />\n  }\n  @if (!config.scroll) {\n    @if (!config.hidePagination) {\n      <div class=\"s-table-complete__pagination\">\n        <section>\n          <s-pagination\n            *ngIf=\"config.paginationText\"\n            [disabled]=\"config.totalItems === 0\"\n            [showing]=\"config.paginationText.showing\"\n            [of]=\"config.paginationText.of\"\n            [items]=\"config.paginationText.items\"\n            [empty]=\"config.paginationText.empty\"\n            [pageNumber]=\"config.pageNumber ?? 0\"\n            [pageSize]=\"config.pageSize ?? 0\"\n            [pageSizes]=\"config.pageSizes ? config.pageSizes : undefined\"\n            [totalItems]=\"config.totalItems ?? 0\"\n            (pageEmitter)=\"goToPage($event)\"\n            (paginationEmitter)=\"pagination($event)\">\n          </s-pagination>\n          <s-pagination\n            *ngIf=\"!config.paginationText\"\n            [disabled]=\"config.totalItems === 0\"\n            [pageNumber]=\"config.pageNumber ?? 0\"\n            [totalItems]=\"config.totalItems ?? 0\"\n            [pageSize]=\"config.pageSize ?? 0\"\n            [pageSizes]=\"config.pageSizes ? config.pageSizes : undefined\"\n            (pageEmitter)=\"goToPage($event)\"\n            (paginationEmitter)=\"pagination($event)\">\n          </s-pagination>\n        </section>\n      </div>\n    }\n  }\n</section>\n", styles: [".s-table-complete{width:100%;box-shadow:var(--E000);border-radius:.5rem}.s-table-complete__table{background:var(--neutrals-1200)!important}.s-table-complete__pagination{background-color:var(--neutrals-1200);border-top:.031rem solid var(--secondary-300);border-radius:0 0 .5rem .5rem;padding:1rem}.s-table-complete .border-bottom{border-bottom:.031rem solid var(--secondary-300)}.s-table-complete s-tablet .pre-s-tablet{height:37rem;background-color:var(--primary-100)}.s-table-complete .s-scroll::-webkit-scrollbar-track{background-color:var(--neutrals-1200)}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], actionEvent: [{
@@ -6697,10 +6734,10 @@ class SModalConfirmComponent {
         this.modalConfirmService.close(response, checkboxChecked);
     }
     getTextAlignClass() {
-        return 's-modal-confirm__message--' + (this.config?.textAlign ?? 'center');
+        return 's-modal-confirm__message--' + (this.config?.textAlign ?? 'left');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SModalConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SModalConfirmComponent, isStandalone: true, selector: "s-modal-confirm.", host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, ngImport: i0, template: "@if (config.isVisible) {\n  <div class=\"overlay\">\n    <div class=\"overlay__grid-12\">\n      <div\n        class=\"s-modal-confirm\"\n        (click)=\"close(false)\"\n        (keydown.enter)=\"close(false)\"\n        tabindex=\"0\">\n        <div\n          class=\"s-modal-confirm__content\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          tabindex=\"0\">\n          <section\n            class=\"s-modal-confirm__header\"\n            [ngClass]=\"{\n              's-modal-confirm__header--secondary':\n                config.backgroundType === 'secondary',\n            }\">\n            <div class=\"s-modal-confirm__header-title\">\n              <s-icon-mat\n                size=\"20\"\n                [ngClass]=\"'s-modal-confirm__icon-' + config.type\">\n                {{ getIconType(config.type).icon }}\n              </s-icon-mat>\n              <h4 class=\"s-modal-confirm__title\">\n                {{ config.title }}\n              </h4>\n            </div>\n            <s-icon-mat\n              tabindex=\"0\"\n              class=\"s-modal-confirm__icon-close\"\n              size=\"20\"\n              (click)=\"close(false)\">\n              close\n            </s-icon-mat>\n          </section>\n          <div class=\"s-scroll s-modal-confirm__body\">\n            <p class=\"s-modal-confirm__message\" [ngClass]=\"getTextAlignClass()\">\n              {{ config.message }}\n            </p>\n          </div>\n          <section\n            class=\"s-modal-confirm__buttons\"\n            [ngClass]=\"{\n              's-modal-confirm__buttons--secondary':\n                config.backgroundType === 'secondary',\n            }\">\n            <div>\n              @if (config.checkbox) {\n                <s-checkbox\n                  [config]=\"configCheckbox\"\n                  [(ngModel)]=\"valueCheckbox\"\n                  (ngModelChange)=\"valueCheckbox = $event\"></s-checkbox>\n              }\n            </div>\n            <div>\n              <s-button\n                type=\"tertiary\"\n                [theme]=\"getIconType(config.type).color\"\n                (click)=\"close(false, valueCheckbox)\"\n                (keydown.enter)=\"close(false, valueCheckbox)\">\n                {{ config.cancelText }}\n              </s-button>\n              <s-button\n                [theme]=\"getIconType(config.type).color\"\n                (click)=\"close(true, valueCheckbox)\"\n                (keydown.enter)=\"close(true, valueCheckbox)\">\n                {{ config.confirmText }}\n              </s-button>\n            </div>\n          </section>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.overlay__grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;width:100%;margin:0 2rem}.s-modal-confirm{grid-column:5/span 4;box-shadow:var(--E500)}.s-modal-confirm__content{background:var(--neutrals-1200);text-align:center;min-width:10rem;border-radius:.5rem}.s-modal-confirm__header{align-items:center;display:flex;justify-content:space-between;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding:.625rem 1rem}.s-modal-confirm__header-title{align-items:center;display:flex}.s-modal-confirm__header-title h4{font-size:1.25rem;margin-left:.4rem}.s-modal-confirm__header--secondary{background:var(--neutrals-1100)}.s-modal-confirm__icon-alert{color:var(--yellow-600)}.s-modal-confirm__icon-error{color:var(--red-600)}.s-modal-confirm__icon-info{color:var(--primary-600)}.s-modal-confirm__icon-close{color:var(--neutrals-600);cursor:pointer}.s-modal-confirm__message{font-size:.875rem}.s-modal-confirm__message--center{text-align:center}.s-modal-confirm__message--justify{text-align:justify}.s-modal-confirm__message--left{text-align:left}.s-modal-confirm__message--right{text-align:right}.s-modal-confirm__buttons{display:flex;padding:.625rem 1rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;justify-content:space-between;align-items:center}.s-modal-confirm__buttons--secondary{background:var(--neutrals-1100)}@media (max-width: 37.5rem){.s-modal-confirm__buttons{justify-content:end;flex-direction:column;align-items:center}}.s-modal-confirm__body{margin:.5rem .25rem .5rem .938rem;max-height:7rem;overflow-x:hidden;padding-right:.313rem;text-align:justify}@media (max-width: 31.25rem){.s-modal-confirm{grid-column:1/span 12}}@media (max-width: 55.625rem){.s-modal-confirm{grid-column:3/span 8}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SButtonModule }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "ngmodule", type: SIconMaterialModule }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "ngmodule", type: SCheckboxModule }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SModalConfirmComponent, isStandalone: true, selector: "s-modal-confirm.", host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, ngImport: i0, template: "@if (config.isVisible) {\n  <div class=\"overlay\">\n    <div class=\"overlay__grid-12\">\n      <div\n        class=\"s-modal-confirm\"\n        (click)=\"close(false)\"\n        (keydown.enter)=\"close(false)\"\n        tabindex=\"0\">\n        <div\n          class=\"s-modal-confirm__content\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          tabindex=\"0\">\n          <section\n            class=\"s-modal-confirm__header\"\n            [ngClass]=\"{\n              's-modal-confirm__header--secondary':\n                config.backgroundType === 'secondary',\n            }\">\n            <div class=\"s-modal-confirm__header-title\">\n              <s-icon-mat\n                size=\"20\"\n                [ngClass]=\"'s-modal-confirm__icon-' + config.type\">\n                {{ getIconType(config.type).icon }}\n              </s-icon-mat>\n              <h4 class=\"s-modal-confirm__title\">\n                {{ config.title }}\n              </h4>\n            </div>\n            @if (config.cancelText) {\n              <s-icon-mat\n                tabindex=\"0\"\n                class=\"s-modal-confirm__icon-close\"\n                size=\"20\"\n                (click)=\"close(false)\">\n                close\n              </s-icon-mat>\n            }\n          </section>\n          <div class=\"s-scroll s-modal-confirm__body\">\n            <p class=\"s-modal-confirm__message\" [ngClass]=\"getTextAlignClass()\">\n              {{ config.message }}\n            </p>\n          </div>\n          <section\n            class=\"s-modal-confirm__buttons\"\n            [ngClass]=\"{\n              's-modal-confirm__buttons--secondary':\n                config.backgroundType === 'secondary',\n            }\">\n            <div>\n              @if (config.checkbox) {\n                <s-checkbox\n                  [config]=\"configCheckbox\"\n                  [(ngModel)]=\"valueCheckbox\"\n                  (ngModelChange)=\"valueCheckbox = $event\"></s-checkbox>\n              }\n            </div>\n            <div>\n              @if (config.cancelText) {\n                <s-button\n                  type=\"tertiary\"\n                  [theme]=\"getIconType(config.type).color\"\n                  (click)=\"close(false, valueCheckbox)\"\n                  (keydown.enter)=\"close(false, valueCheckbox)\">\n                  {{ config.cancelText }}\n                </s-button>\n              }\n              <s-button\n                [theme]=\"getIconType(config.type).color\"\n                (click)=\"close(true, valueCheckbox)\"\n                (keydown.enter)=\"close(true, valueCheckbox)\">\n                {{ config.confirmText }}\n              </s-button>\n            </div>\n          </section>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.overlay__grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;width:100%;margin:0 2rem}.s-modal-confirm{grid-column:5/span 4;box-shadow:var(--E500)}.s-modal-confirm__content{background:var(--neutrals-1200);text-align:left;min-width:10rem;border-radius:.5rem}.s-modal-confirm__header{align-items:center;display:flex;justify-content:space-between;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding:.625rem 1rem}.s-modal-confirm__header-title{align-items:center;display:flex}.s-modal-confirm__header-title h4{font-size:1.25rem;margin-left:.4rem;color:var(--secondary-600)}.s-modal-confirm__icon-alert{color:var(--yellow-600)}.s-modal-confirm__icon-error{color:var(--red-600)}.s-modal-confirm__icon-info{color:var(--primary-600)}.s-modal-confirm__icon-close{color:var(--neutrals-600);cursor:pointer}.s-modal-confirm__message{font-size:.875rem;color:var(--secondary-600)}.s-modal-confirm__message--center{text-align:center}.s-modal-confirm__message--justify{text-align:justify}.s-modal-confirm__message--left{text-align:left}.s-modal-confirm__message--right{text-align:right}.s-modal-confirm__buttons{display:flex;padding:.625rem 1rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;justify-content:space-between;align-items:center}.s-modal-confirm__buttons--secondary{background:var(--neutrals-1100)}@media (max-width: 37.5rem){.s-modal-confirm__buttons{justify-content:end;flex-direction:column;align-items:center}}.s-modal-confirm__body{margin:.5rem .25rem .5rem .938rem;max-height:7rem;overflow-x:hidden;padding-right:.313rem;text-align:justify}@media (max-width: 31.25rem){.s-modal-confirm{grid-column:1/span 12}}@media (max-width: 55.625rem){.s-modal-confirm{grid-column:3/span 8}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SButtonModule }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "ngmodule", type: SIconMaterialModule }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "ngmodule", type: SCheckboxModule }, { kind: "component", type: SCheckboxComponent, selector: "s-checkbox", inputs: ["config"], outputs: ["blur", "focus"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SModalConfirmComponent, decorators: [{
             type: Component,
@@ -6710,7 +6747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SIconMaterialModule,
                         SCheckboxModule,
                         FormsModule,
-                    ], template: "@if (config.isVisible) {\n  <div class=\"overlay\">\n    <div class=\"overlay__grid-12\">\n      <div\n        class=\"s-modal-confirm\"\n        (click)=\"close(false)\"\n        (keydown.enter)=\"close(false)\"\n        tabindex=\"0\">\n        <div\n          class=\"s-modal-confirm__content\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          tabindex=\"0\">\n          <section\n            class=\"s-modal-confirm__header\"\n            [ngClass]=\"{\n              's-modal-confirm__header--secondary':\n                config.backgroundType === 'secondary',\n            }\">\n            <div class=\"s-modal-confirm__header-title\">\n              <s-icon-mat\n                size=\"20\"\n                [ngClass]=\"'s-modal-confirm__icon-' + config.type\">\n                {{ getIconType(config.type).icon }}\n              </s-icon-mat>\n              <h4 class=\"s-modal-confirm__title\">\n                {{ config.title }}\n              </h4>\n            </div>\n            <s-icon-mat\n              tabindex=\"0\"\n              class=\"s-modal-confirm__icon-close\"\n              size=\"20\"\n              (click)=\"close(false)\">\n              close\n            </s-icon-mat>\n          </section>\n          <div class=\"s-scroll s-modal-confirm__body\">\n            <p class=\"s-modal-confirm__message\" [ngClass]=\"getTextAlignClass()\">\n              {{ config.message }}\n            </p>\n          </div>\n          <section\n            class=\"s-modal-confirm__buttons\"\n            [ngClass]=\"{\n              's-modal-confirm__buttons--secondary':\n                config.backgroundType === 'secondary',\n            }\">\n            <div>\n              @if (config.checkbox) {\n                <s-checkbox\n                  [config]=\"configCheckbox\"\n                  [(ngModel)]=\"valueCheckbox\"\n                  (ngModelChange)=\"valueCheckbox = $event\"></s-checkbox>\n              }\n            </div>\n            <div>\n              <s-button\n                type=\"tertiary\"\n                [theme]=\"getIconType(config.type).color\"\n                (click)=\"close(false, valueCheckbox)\"\n                (keydown.enter)=\"close(false, valueCheckbox)\">\n                {{ config.cancelText }}\n              </s-button>\n              <s-button\n                [theme]=\"getIconType(config.type).color\"\n                (click)=\"close(true, valueCheckbox)\"\n                (keydown.enter)=\"close(true, valueCheckbox)\">\n                {{ config.confirmText }}\n              </s-button>\n            </div>\n          </section>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.overlay__grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;width:100%;margin:0 2rem}.s-modal-confirm{grid-column:5/span 4;box-shadow:var(--E500)}.s-modal-confirm__content{background:var(--neutrals-1200);text-align:center;min-width:10rem;border-radius:.5rem}.s-modal-confirm__header{align-items:center;display:flex;justify-content:space-between;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding:.625rem 1rem}.s-modal-confirm__header-title{align-items:center;display:flex}.s-modal-confirm__header-title h4{font-size:1.25rem;margin-left:.4rem}.s-modal-confirm__header--secondary{background:var(--neutrals-1100)}.s-modal-confirm__icon-alert{color:var(--yellow-600)}.s-modal-confirm__icon-error{color:var(--red-600)}.s-modal-confirm__icon-info{color:var(--primary-600)}.s-modal-confirm__icon-close{color:var(--neutrals-600);cursor:pointer}.s-modal-confirm__message{font-size:.875rem}.s-modal-confirm__message--center{text-align:center}.s-modal-confirm__message--justify{text-align:justify}.s-modal-confirm__message--left{text-align:left}.s-modal-confirm__message--right{text-align:right}.s-modal-confirm__buttons{display:flex;padding:.625rem 1rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;justify-content:space-between;align-items:center}.s-modal-confirm__buttons--secondary{background:var(--neutrals-1100)}@media (max-width: 37.5rem){.s-modal-confirm__buttons{justify-content:end;flex-direction:column;align-items:center}}.s-modal-confirm__body{margin:.5rem .25rem .5rem .938rem;max-height:7rem;overflow-x:hidden;padding-right:.313rem;text-align:justify}@media (max-width: 31.25rem){.s-modal-confirm{grid-column:1/span 12}}@media (max-width: 55.625rem){.s-modal-confirm{grid-column:3/span 8}}\n"] }]
+                    ], template: "@if (config.isVisible) {\n  <div class=\"overlay\">\n    <div class=\"overlay__grid-12\">\n      <div\n        class=\"s-modal-confirm\"\n        (click)=\"close(false)\"\n        (keydown.enter)=\"close(false)\"\n        tabindex=\"0\">\n        <div\n          class=\"s-modal-confirm__content\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          tabindex=\"0\">\n          <section\n            class=\"s-modal-confirm__header\"\n            [ngClass]=\"{\n              's-modal-confirm__header--secondary':\n                config.backgroundType === 'secondary',\n            }\">\n            <div class=\"s-modal-confirm__header-title\">\n              <s-icon-mat\n                size=\"20\"\n                [ngClass]=\"'s-modal-confirm__icon-' + config.type\">\n                {{ getIconType(config.type).icon }}\n              </s-icon-mat>\n              <h4 class=\"s-modal-confirm__title\">\n                {{ config.title }}\n              </h4>\n            </div>\n            @if (config.cancelText) {\n              <s-icon-mat\n                tabindex=\"0\"\n                class=\"s-modal-confirm__icon-close\"\n                size=\"20\"\n                (click)=\"close(false)\">\n                close\n              </s-icon-mat>\n            }\n          </section>\n          <div class=\"s-scroll s-modal-confirm__body\">\n            <p class=\"s-modal-confirm__message\" [ngClass]=\"getTextAlignClass()\">\n              {{ config.message }}\n            </p>\n          </div>\n          <section\n            class=\"s-modal-confirm__buttons\"\n            [ngClass]=\"{\n              's-modal-confirm__buttons--secondary':\n                config.backgroundType === 'secondary',\n            }\">\n            <div>\n              @if (config.checkbox) {\n                <s-checkbox\n                  [config]=\"configCheckbox\"\n                  [(ngModel)]=\"valueCheckbox\"\n                  (ngModelChange)=\"valueCheckbox = $event\"></s-checkbox>\n              }\n            </div>\n            <div>\n              @if (config.cancelText) {\n                <s-button\n                  type=\"tertiary\"\n                  [theme]=\"getIconType(config.type).color\"\n                  (click)=\"close(false, valueCheckbox)\"\n                  (keydown.enter)=\"close(false, valueCheckbox)\">\n                  {{ config.cancelText }}\n                </s-button>\n              }\n              <s-button\n                [theme]=\"getIconType(config.type).color\"\n                (click)=\"close(true, valueCheckbox)\"\n                (keydown.enter)=\"close(true, valueCheckbox)\">\n                {{ config.confirmText }}\n              </s-button>\n            </div>\n          </section>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.overlay__grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;width:100%;margin:0 2rem}.s-modal-confirm{grid-column:5/span 4;box-shadow:var(--E500)}.s-modal-confirm__content{background:var(--neutrals-1200);text-align:left;min-width:10rem;border-radius:.5rem}.s-modal-confirm__header{align-items:center;display:flex;justify-content:space-between;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding:.625rem 1rem}.s-modal-confirm__header-title{align-items:center;display:flex}.s-modal-confirm__header-title h4{font-size:1.25rem;margin-left:.4rem;color:var(--secondary-600)}.s-modal-confirm__icon-alert{color:var(--yellow-600)}.s-modal-confirm__icon-error{color:var(--red-600)}.s-modal-confirm__icon-info{color:var(--primary-600)}.s-modal-confirm__icon-close{color:var(--neutrals-600);cursor:pointer}.s-modal-confirm__message{font-size:.875rem;color:var(--secondary-600)}.s-modal-confirm__message--center{text-align:center}.s-modal-confirm__message--justify{text-align:justify}.s-modal-confirm__message--left{text-align:left}.s-modal-confirm__message--right{text-align:right}.s-modal-confirm__buttons{display:flex;padding:.625rem 1rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;justify-content:space-between;align-items:center}.s-modal-confirm__buttons--secondary{background:var(--neutrals-1100)}@media (max-width: 37.5rem){.s-modal-confirm__buttons{justify-content:end;flex-direction:column;align-items:center}}.s-modal-confirm__body{margin:.5rem .25rem .5rem .938rem;max-height:7rem;overflow-x:hidden;padding-right:.313rem;text-align:justify}@media (max-width: 31.25rem){.s-modal-confirm{grid-column:1/span 12}}@media (max-width: 55.625rem){.s-modal-confirm{grid-column:3/span 8}}\n"] }]
         }], propDecorators: { onEscapeKey: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
@@ -7050,6 +7087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+const MAX_TREE_LEVEL = 20;
 class STableDoubleComponent {
     constructor() {
         this.actionPositionEvent = new EventEmitter();
@@ -7066,6 +7104,10 @@ class STableDoubleComponent {
         this.pillButtonPositionEvent = new EventEmitter();
         this.scrollPositionEvent = new EventEmitter();
         this.selectPositionEvent = new EventEmitter();
+        this.rowSelectPositionEvent = new EventEmitter();
+        this.actionEvent = new EventEmitter();
+        this.toggleExpandEvent = new EventEmitter();
+        this.reorderItemEvent = new EventEmitter();
         this.disabledButtonLeft = signal(true);
         this.disabledButtonRight = signal(true);
         this.itemsTableLeft = [];
@@ -7088,24 +7130,85 @@ class STableDoubleComponent {
             };
         }
     }
+    onDragStart(event, itemId) {
+        this.dragItemId = itemId;
+        event.dataTransfer?.setData('text/plain', ''); // Necesario para habilitar el arrastre en algunos navegadores
+    }
+    onDragOver(event, itemId) {
+        if (this.dragItemId === null || this.dragItemId === itemId) {
+            return;
+        }
+        this.dragOverItemId = itemId;
+        event.preventDefault();
+    }
+    onDragLeave(event) {
+        this.dragOverItemId = null;
+    }
+    onDrop(event, itemId, isLeftTable) {
+        if (this.dragItemId === null || this.dragItemId === itemId) {
+            return;
+        }
+        // Reordenar los elementos
+        const items = this.getItems(isLeftTable);
+        const dragIndex = items.findIndex((item) => item.id === this.dragItemId);
+        const dropIndex = items.findIndex((item) => item.id === itemId);
+        if (dragIndex !== -1 && dropIndex !== -1) {
+            const draggedItem = items[dragIndex];
+            items.splice(dragIndex, 1);
+            items.splice(dropIndex, 0, draggedItem);
+        }
+        this.dragItemId = null;
+        this.dragOverItemId = null;
+        event.preventDefault();
+        this.eventUpdateTablesEmit();
+    }
+    iconAction(itemId, isLeftTable) {
+        const items = this.getItems(isLeftTable);
+        const item = items.find((item) => item.id === itemId);
+        if (item)
+            this.actionEvent.emit({ isLeftTable, id: itemId });
+    }
+    selectItem(itemId, isLeftTable) {
+        const items = this.getItems(isLeftTable);
+        const itemIndex = items.findIndex((item) => item.id === itemId);
+        if (itemIndex !== -1) {
+            items[itemIndex].selectedCheckbox = !items[itemIndex].selectedCheckbox;
+            this.updateCounter();
+        }
+    }
     cloneItemsTables() {
         this.itemsTableLeft = [...this.config.tableLeftItems];
         this.itemsTableRightData = [...this.config.tableRightItems];
     }
-    moveItems(sourcePosition, targetPosition) {
-        const sourceData = this.config[`table${sourcePosition}Items`];
-        const targetData = this.config[`table${targetPosition}Items`];
-        const originalSourceKey = `original${`table${sourcePosition}`.charAt(0).toUpperCase() + `table${sourcePosition}`.slice(1)}Items`;
-        const originalTargetKey = `original${`table${targetPosition}`.charAt(0).toUpperCase() + `table${targetPosition}`.slice(1)}Items`;
-        const originalSourceData = this[originalSourceKey] || [];
-        const originalTargetData = this[originalTargetKey] || [];
-        const selectedItems = sourceData.filter(item => item.selected).map(item => ({ ...item, selected: false }));
+    moveItems(isLeftTableSource) {
+        const sourceData = this.getItems(isLeftTableSource);
+        const targetData = this.getItems(!isLeftTableSource);
+        const originalSourceData = isLeftTableSource ? this.itemsTableLeft : this.itemsTableRightData;
+        const originalTargetData = isLeftTableSource ? this.itemsTableRightData : this.itemsTableLeft;
+        const hasItemSelection = sourceData.some(item => item.itemSelected);
+        const selectedItems = sourceData
+            .filter(item => hasItemSelection ? item.itemSelected : item.selectedCheckbox)
+            .map(item => ({
+            ...item,
+            selectedCheckbox: false,
+            itemSelected: false
+        }));
         targetData.push(...selectedItems);
-        this.config[`table${sourcePosition}Items`] = sourceData.filter(item => !item.selected);
+        this.setItems(isLeftTableSource, sourceData.filter(item => hasItemSelection ? !item.itemSelected : !item.selectedCheckbox));
         originalTargetData.push(...selectedItems);
-        this[originalSourceKey] = originalSourceData.filter(item => !selectedItems.some(sel => sel.name === item.name));
-        this.config.tableRightConfig.columns[0].checkboxValue = false;
-        this.config.tableLeftConfig.columns[0].checkboxValue = false;
+        const filteredOriginalSource = originalSourceData.filter(item => !selectedItems.some(sel => sel.name === item.name));
+        if (isLeftTableSource) {
+            this.itemsTableLeft = filteredOriginalSource;
+        }
+        else {
+            this.itemsTableRightData = filteredOriginalSource;
+        }
+        const checkColumnRight = this.config.tableRightConfig.columns[0]?.checkboxValue;
+        const checkColumnLeft = this.config.tableLeftConfig.columns[0]?.checkboxValue;
+        if (checkColumnRight)
+            this.config.tableRightConfig.columns[0].checkboxValue = false;
+        if (checkColumnLeft)
+            this.config.tableLeftConfig.columns[0].checkboxValue = false;
         this.config.tableLeftConfig.totalItems = this.config.tableLeftItems.length;
         this.config.tableRightConfig.totalItems = this.config.tableRightItems.length;
         this.eventUpdateTablesEmit();
@@ -7118,69 +7221,69 @@ class STableDoubleComponent {
         });
     }
     addItem() {
-        this.moveItems('Left', 'Right');
+        this.moveItems(true);
         this.cloneItemsTables();
     }
     removeItem() {
-        this.moveItems('Right', 'Left');
+        this.moveItems(false);
         this.cloneItemsTables();
     }
-    action(position) {
-        this.actionPositionEvent.emit(position);
+    action(isLeftTable) {
+        this.actionPositionEvent.emit(isLeftTable);
     }
-    delete(position) {
-        this.deletePositionEvent.emit(position);
+    delete(isLeftTable) {
+        this.deletePositionEvent.emit(isLeftTable);
     }
-    empty(position) {
-        this.emptyPositionEvent.emit(position);
+    empty(isLeftTable) {
+        this.emptyPositionEvent.emit(isLeftTable);
     }
-    orderBy(event, position) {
-        this.orderByPositionEvent.emit({ position: position, value: event });
+    orderBy(event, isLeftTable) {
+        this.orderByPositionEvent.emit({ isLeftTable, value: event });
     }
-    page(event, position) {
-        this.pagePositionEvent.emit({ position: position, value: event });
+    page(event, isLeftTable) {
+        this.pagePositionEvent.emit({ isLeftTable, value: event });
     }
-    paginationEmitter(event, position) {
-        this.paginationPositionEvent.emit({ position: position, value: event });
+    paginationEmitter(event, isLeftTable) {
+        this.paginationPositionEvent.emit({ isLeftTable, value: event });
     }
-    select(event, position) {
-        this.selectPositionEvent.emit({ position: position, value: event });
+    select(event, isLeftTable) {
+        this.selectPositionEvent.emit({ isLeftTable, value: event });
     }
-    pillButton(position) {
-        this.pillButtonPositionEvent.emit(position);
+    pillButton(isLeftTable) {
+        this.pillButtonPositionEvent.emit(isLeftTable);
     }
-    filter(event, position) {
-        this.filterPositionEvent.emit({ position: position, value: event });
+    filter(event, isLeftTable) {
+        this.filterPositionEvent.emit({ isLeftTable, value: event });
     }
-    multiSelect(event, side) {
-        this.multiSelectPositionEvent.emit({ position: side, value: event });
+    multiSelect(event, isLeftTable) {
+        this.multiSelectPositionEvent.emit({ isLeftTable, value: event });
     }
-    checkAllEvent(event, side) {
-        this.config[`table${side}Items`] = this.config[`table${side}Items`].map(item => ({
+    checkAllEvent(event, isLeftTable) {
+        const items = this.getItems(isLeftTable);
+        this.setItems(isLeftTable, items.map(item => ({
             ...item,
-            selected: event,
-        }));
+            selectedCheckbox: event,
+        })));
         this.updateCounter();
     }
-    onScroll(side) {
-        this.scrollPositionEvent.emit(side);
+    onScroll(isLeftTable) {
+        this.scrollPositionEvent.emit(isLeftTable);
     }
     changeCheckbox() {
         this.config.tableRightConfig.columns[0].checkboxValue =
-            this.config.tableRightItems.length > 0 && this.config.tableRightItems.every(item => item.selected);
+            this.config.tableRightItems.length > 0 && this.config.tableRightItems.every(item => item.selectedCheckbox);
         this.config.tableLeftConfig.columns[0].checkboxValue =
-            this.config.tableLeftItems.length > 0 && this.config.tableLeftItems.every(item => item.selected);
+            this.config.tableLeftItems.length > 0 && this.config.tableLeftItems.every(item => item.selectedCheckbox);
         this.updateCounter();
     }
-    bottomStatusBarChange(state, position) {
-        this.bottomStatusBarPositionEvent.emit({ position, value: state });
+    bottomStatusBarChange(state, isLeftTable) {
+        this.bottomStatusBarPositionEvent.emit({ isLeftTable, value: state });
         this.updateCounter();
     }
-    search(event, position) {
-        const isLeft = position === 'Left';
-        const original = isLeft ? this.itemsTableLeft : this.itemsTableRightData;
+    search(event, isLeftTable) {
+        const original = isLeftTable ? this.itemsTableLeft : this.itemsTableRightData;
         const filtered = this.getFilteredItems(original, event);
-        if (isLeft) {
+        if (isLeftTable) {
             this.config.tableLeftItems = filtered;
         }
         else {
@@ -7195,24 +7298,99 @@ class STableDoubleComponent {
     }
     updateCounter() {
         const updateStatusBar = (items, config, setter) => {
-            const counter = items.filter(item => item.selected).length;
+            const counterCheckbox = items.filter(item => item.selectedCheckbox).length;
+            const counterItem = items.filter(item => item.itemSelected).length;
+            const counter = Math.max(counterCheckbox, counterItem);
             config.configBottomStatusBar = signal({
                 ...config.configBottomStatusBar?.(),
                 counter,
                 disabled: items.length === 0,
                 total: items.length,
             });
-            setter.set(counter === 0);
+            // Habilitar botón si hay items seleccionados (por checkbox O por item)
+            setter.set(counterCheckbox === 0 && counterItem === 0);
         };
         updateStatusBar(this.config.tableLeftItems, this.config.tableLeftConfig, this.disabledButtonLeft);
         updateStatusBar(this.config.tableRightItems, this.config.tableRightConfig, this.disabledButtonRight);
     }
+    getTreeLevelClass(item) {
+        if (!this.config.isTreeMode || !item.level) {
+            return 's-table-double__tree-level-0';
+        }
+        const level = Math.min(item.level, MAX_TREE_LEVEL);
+        return `s-table-double__tree-level-${level}`;
+    }
+    toggleExpand(event, itemId) {
+        event.stopPropagation();
+        this.toggleExpandEvent.emit(itemId);
+    }
+    rowClick(item, isLeftTable) {
+        if (isLeftTable && this.config.disableLeftRowSelection) {
+            return;
+        }
+        if (!isLeftTable) {
+            this.config.tableRightItems.forEach(i => {
+                i.itemSelected = i.id === item.id ? !i.itemSelected : false;
+            });
+        }
+        else {
+            item.itemSelected = !item.itemSelected;
+        }
+        this.updateCounter();
+        this.rowSelectPositionEvent.emit({ isLeftTable, value: item });
+    }
+    getItems(isLeftTable) {
+        return isLeftTable ? this.config.tableLeftItems : this.config.tableRightItems;
+    }
+    setItems(isLeftTable, items) {
+        if (isLeftTable) {
+            this.config.tableLeftItems = items;
+        }
+        else {
+            this.config.tableRightItems = items;
+        }
+    }
+    getOrderButtons(item) {
+        const isFirst = !!item.__isFirstSibling;
+        const isLast = !!item.__isLastSibling;
+        if (item.__orderButtons &&
+            item.__orderButtons[0].disabled === isFirst &&
+            item.__orderButtons[2].disabled === isLast) {
+            return item.__orderButtons;
+        }
+        item.__orderButtons = [
+            {
+                type: ActionsButtonsType.DOUBLE_ARROW_UP,
+                tooltip: this._sTranslateService.instant('ui.generic.first'),
+                disabled: isFirst,
+            },
+            {
+                type: ActionsButtonsType.ARROW_UP,
+                tooltip: this._sTranslateService.instant('ui.generic.up'),
+                disabled: isFirst,
+            },
+            {
+                type: ActionsButtonsType.ARROW_DOWN,
+                tooltip: this._sTranslateService.instant('ui.generic.down'),
+                disabled: isLast,
+            },
+            {
+                type: ActionsButtonsType.DOUBLE_ARROW_DOWN,
+                tooltip: this._sTranslateService.instant('ui.generic.last'),
+                disabled: isLast,
+            },
+        ];
+        return item.__orderButtons;
+    }
+    onOrderButtonClick(type, itemId) {
+        this.reorderItemEvent.emit({ itemId, direction: type });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STableDoubleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: STableDoubleComponent, isStandalone: true, selector: "s-table-double", inputs: { config: "config" }, outputs: { actionPositionEvent: "actionPositionEvent", bottomStatusBarPositionEvent: "bottomStatusBarPositionEvent", checkAllPositionEvent: "checkAllPositionEvent", deletePositionEvent: "deletePositionEvent", emptyPositionEvent: "emptyPositionEvent", eventUpdateTables: "eventUpdateTables", filterPositionEvent: "filterPositionEvent", multiSelectPositionEvent: "multiSelectPositionEvent", orderByPositionEvent: "orderByPositionEvent", pagePositionEvent: "pagePositionEvent", paginationPositionEvent: "paginationPositionEvent", pillButtonPositionEvent: "pillButtonPositionEvent", scrollPositionEvent: "scrollPositionEvent", selectPositionEvent: "selectPositionEvent" }, ngImport: i0, template: "<div class=\"s-table-double\">\n  <div class=\"s-table-double__header\"></div>\n  <div class=\"s-table-double__body\">\n    <div class=\"s-table-double__body__left\">\n      <s-table-complete\n        [config]=\"config.tableLeftConfig\"\n        (actionEvent)=\"action('Left')\"\n        (bottomStatusBarEvent)=\"bottomStatusBarChange($event, 'Left')\"\n        (checkAllEvent)=\"checkAllEvent($event, 'Left')\"\n        (deleteEvent)=\"delete('Left')\"\n        (emptyEvent)=\"empty('Left')\"\n        (filterEvent)=\"filter($event, 'Left')\"\n        (multiSelectEvent)=\"multiSelect($event, 'Left')\"\n        (orderByEvent)=\"orderBy($event, 'Left')\"\n        (pageEvent)=\"page($event, 'Left')\"\n        (paginationEvent)=\"paginationEmitter($event, 'Left')\"\n        (pillButtonEvent)=\"pillButton('Left')\"\n        (scrollEvent)=\"onScroll('Left')\"\n        (searchEvent)=\"search($event, 'Left')\">\n        @for (item of config.tableLeftItems; track item) {\n          <tr [ngClass]=\"{ active: item.selected }\">\n            <td>\n              <input type=\"checkbox\" (change)=\"changeCheckbox()\" [(ngModel)]=\"item.selected\" />\n            </td>\n            @for (column of config.tableLeftConfig.columns; track column) {\n              @if (column.id !== 'checkbox' && column.id !== undefined) {\n                <td>{{ item[column.id] }}</td>\n              }\n            }\n          </tr>\n        }\n      </s-table-complete>\n    </div>\n    <div class=\"s-table-double__body__middle\">\n      <div>\n        <s-button\n          (click)=\"addItem()\"\n          (keydown.enter)=\"addItem()\"\n          position=\"normal\"\n          [disabled]=\"disabledButtonLeft()\"\n          [pill]=\"true\"\n          ><s-icon-mat><span class=\"material-symbols-outlined\"> arrow_forward </span></s-icon-mat></s-button\n        >\n      </div>\n      <div>\n        <s-button\n          (click)=\"removeItem()\"\n          (keydown.enter)=\"removeItem()\"\n          position=\"normal\"\n          type=\"secondary\"\n          [disabled]=\"disabledButtonRight()\"\n          [pill]=\"true\"\n          ><s-icon-mat><span class=\"material-symbols-outlined\"> arrow_back </span></s-icon-mat></s-button\n        >\n      </div>\n    </div>\n    <div class=\"s-table-double__body__right\">\n      <s-table-complete\n        [config]=\"config.tableRightConfig\"\n        (actionEvent)=\"action('Right')\"\n        (bottomStatusBarEvent)=\"bottomStatusBarChange($event, 'Right')\"\n        (checkAllEvent)=\"checkAllEvent($event, 'Right')\"\n        (deleteEvent)=\"delete('Right')\"\n        (emptyEvent)=\"empty('Right')\"\n        (filterEvent)=\"filter($event, 'Right')\"\n        (multiSelectEvent)=\"multiSelect($event, 'Right')\"\n        (orderByEvent)=\"orderBy($event, 'Right')\"\n        (pageEvent)=\"page($event, 'Right')\"\n        (paginationEvent)=\"paginationEmitter($event, 'Right')\"\n        (pillButtonEvent)=\"pillButton('Right')\"\n        (scrollEvent)=\"onScroll('Right')\"\n        (searchEvent)=\"search($event, 'Right')\">\n        @for (item of config.tableRightItems; track item) {\n          <tr [ngClass]=\"{ active: item.selected }\">\n            <td>\n              <input type=\"checkbox\" (change)=\"changeCheckbox()\" [(ngModel)]=\"item.selected\" />\n            </td>\n            @for (column of config.tableRightConfig.columns; track column) {\n              @if (column.id !== 'checkbox' && column.id !== undefined) {\n                <td>{{ item[column.id] }}</td>\n              }\n            }\n          </tr>\n        }\n      </s-table-complete>\n    </div>\n  </div>\n</div>\n", styles: [".s-table-double{margin-bottom:1rem}.s-table-double__body{display:flex;gap:.625rem}.s-table-double__body .s-tablet tr{cursor:pointer}.s-table-double__body .s-tablet tr:hover{background-color:var(--primary-200)}.s-table-double__body .s-tablet tr.active{background-color:var(--neutrals-1100)}.s-table-double__body__left{flex:5}.s-table-double__body__middle{display:flex;flex-direction:column;gap:.625rem;justify-content:center;padding:1.25rem;background-color:var(--primary-100);border-radius:.5rem}.s-table-double__body__right{flex:5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: STableCompleteModule }, { kind: "component", type: TableCompleteComponent, selector: "s-table-complete", inputs: ["config"], outputs: ["actionEvent", "checkAllEvent", "deleteEvent", "emptyEvent", "filterEvent", "orderByEvent", "pageEvent", "paginationEvent", "multiSelectEvent", "pillButtonEvent", "selectEvent", "searchEvent", "bottomStatusBarEvent", "scrollEvent"] }, { kind: "ngmodule", type: SButtonModule }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "ngmodule", type: SIconMaterialModule }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: STableDoubleComponent, isStandalone: true, selector: "s-table-double", inputs: { config: "config" }, outputs: { actionPositionEvent: "actionPositionEvent", bottomStatusBarPositionEvent: "bottomStatusBarPositionEvent", checkAllPositionEvent: "checkAllPositionEvent", deletePositionEvent: "deletePositionEvent", emptyPositionEvent: "emptyPositionEvent", eventUpdateTables: "eventUpdateTables", filterPositionEvent: "filterPositionEvent", multiSelectPositionEvent: "multiSelectPositionEvent", orderByPositionEvent: "orderByPositionEvent", pagePositionEvent: "pagePositionEvent", paginationPositionEvent: "paginationPositionEvent", pillButtonPositionEvent: "pillButtonPositionEvent", scrollPositionEvent: "scrollPositionEvent", selectPositionEvent: "selectPositionEvent", rowSelectPositionEvent: "rowSelectPositionEvent", actionEvent: "actionEvent", toggleExpandEvent: "toggleExpandEvent", reorderItemEvent: "reorderItemEvent" }, ngImport: i0, template: "<div class=\"s-table-double\">\n  <div class=\"s-table-double__header\"></div>\n  <div class=\"s-table-double__body\">\n    <div class=\"s-table-double__body__left\">\n      <s-table-complete\n        [config]=\"config.tableLeftConfig\"\n        (actionEvent)=\"action(true)\"\n        (bottomStatusBarEvent)=\"bottomStatusBarChange($event, true)\"\n        (checkAllEvent)=\"checkAllEvent($event, true)\"\n        (deleteEvent)=\"delete(true)\"\n        (emptyEvent)=\"empty(true)\"\n        (filterEvent)=\"filter($event, true)\"\n        (multiSelectEvent)=\"multiSelect($event, true)\"\n        (orderByEvent)=\"orderBy($event, true)\"\n        (pageEvent)=\"page($event, true)\"\n        (paginationEvent)=\"paginationEmitter($event, true)\"\n        (pillButtonEvent)=\"pillButton(true)\"\n        (scrollEvent)=\"onScroll(true)\"\n        (searchEvent)=\"search($event, true)\">\n        @if (config.dragAndDrop) {\n          @for (item of config.tableLeftItems; track item) {\n            <div class=\"s-table-double__list\">\n              <s-list\n                [size]=\"'xs'\"\n                [attr.data-item-id]=\"item.id\"\n                [draggable]=\"true\"\n                [selected]=\"item.selectedCheckbox\"\n                (dragstart)=\"onDragStart($event, item.id)\"\n                (dragover)=\"onDragOver($event, item.id)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event, item.id, true)\"\n                (click)=\"selectItem(item.id, true)\">\n                <div class=\"s-table-double__drag\">\n                  <h5 class=\"ml-2\">{{ item.name }}</h5>\n                  @if (item.iconAction) {\n                    <div class=\"s-table-double__drag-icon\">\n                      <s-icon-mat (click)=\"iconAction(item.id, true)\">{{ item.iconAction }}</s-icon-mat>\n                    </div>\n                  }\n                </div>\n              </s-list>\n            </div>\n          }\n        } @else {\n          @for (item of config.tableLeftItems; track item) {\n            <tr [ngClass]=\"{ active: !config.disableLeftRowSelection && item.itemSelected }\" (click)=\"!config.disableLeftRowSelection && rowClick(item, true)\">\n              <td (click)=\"$event.stopPropagation()\">\n                <input type=\"checkbox\" [(ngModel)]=\"item.selectedCheckbox\" (change)=\"changeCheckbox()\" />\n              </td>\n              @for (column of config.tableLeftConfig.columns; track column) {\n                @if (column.id !== 'checkbox' && column.id !== undefined) {\n                  <td>{{ item[column.id] }}</td>\n                }\n              }\n            </tr>\n          }\n        }\n      </s-table-complete>\n    </div>\n    <div class=\"s-table-double__body__middle\">\n      <div>\n        <s-button\n          (click)=\"addItem()\"\n          (keydown.enter)=\"addItem()\"\n          position=\"normal\"\n          [disabled]=\"disabledButtonLeft()\"\n          [pill]=\"true\"\n          ><s-icon-mat><span class=\"material-symbols-outlined\"> {{ config.additionButton ? 'add' : 'arrow_forward' }} </span></s-icon-mat></s-button\n        >\n      </div>\n      <div>\n        <s-button\n          (click)=\"removeItem()\"\n          (keydown.enter)=\"removeItem()\"\n          position=\"normal\"\n          type=\"secondary\"\n          [disabled]=\"disabledButtonRight()\"\n          [pill]=\"true\"\n          ><s-icon-mat><span class=\"material-symbols-outlined\"> {{ config.additionButton ? 'remove' : 'arrow_back' }} </span></s-icon-mat></s-button\n        >\n      </div>\n    </div>\n    <div class=\"s-table-double__body__right\">\n      <s-table-complete\n        [config]=\"config.tableRightConfig\"\n        (actionEvent)=\"action(false)\"\n        (bottomStatusBarEvent)=\"bottomStatusBarChange($event, false)\"\n        (checkAllEvent)=\"checkAllEvent($event, false)\"\n        (deleteEvent)=\"delete(false)\"\n        (emptyEvent)=\"empty(false)\"\n        (filterEvent)=\"filter($event, false)\"\n        (multiSelectEvent)=\"multiSelect($event, false)\"\n        (orderByEvent)=\"orderBy($event, false)\"\n        (pageEvent)=\"page($event, false)\"\n        (paginationEvent)=\"paginationEmitter($event, false)\"\n        (pillButtonEvent)=\"pillButton(false)\"\n        (scrollEvent)=\"onScroll(false)\"\n        (searchEvent)=\"search($event, false)\">\n        @if (config.dragAndDrop) {\n          @for (item of config.tableRightItems; track item) {\n            <s-list\n              [size]=\"'xs'\"\n              [attr.data-item-id]=\"item.id\"\n              [draggable]=\"true\"\n              [selected]=\"item.selectedCheckbox\"\n              (dragstart)=\"onDragStart($event, item.id)\"\n              (dragover)=\"onDragOver($event, item.id)\"\n              (dragleave)=\"onDragLeave($event)\"\n              (drop)=\"onDrop($event, item.id, false)\"\n              (click)=\"selectItem(item.id, false)\">\n              <div class=\"s-table-double__drag\">\n                <h5 class=\"ml-2\">{{ item.name }}</h5>\n                @if (item.iconAction) {\n                  <div class=\"s-table-double__drag-icon\">\n                    <s-icon-mat (click)=\"iconAction(item.id, false)\">{{ item.iconAction }}</s-icon-mat>\n                  </div>\n                }\n              </div>\n            </s-list>\n          }\n        } @else {\n          @for (item of config.tableRightItems; track item) {\n            <tr [ngClass]=\"{ active: item.itemSelected }\" (click)=\"rowClick(item, false)\">\n              <td\n              class=\"s-table-double__tree-cell\"\n              [class.s-table-double__tree-cell--tree]=\"config.isTreeMode\"\n              [attr.colspan]=\"config.isTreeMode ? config.tableRightConfig.columns.length - (config.showOrderButtons ? 1 : 0) : null\">\n                <div class=\"s-table-double__tree-cell-content\" [ngClass]=\"getTreeLevelClass(item)\">\n                  @if (config.isTreeMode && item.hasChildren) {\n                    <s-icon-mat\n                      class=\"s-table-double__tree-toggle\"\n                      [class.s-table-double__tree-toggle--expanded]=\"item.expanded\"\n                      (click)=\"toggleExpand($event, item.id)\">\n                      <span class=\"material-symbols-outlined\">chevron_right</span>\n                    </s-icon-mat>\n                  } @else if (config.isTreeMode) {\n                    <span class=\"s-table-double__tree-spacer\"></span>\n                  }\n                  <input type=\"checkbox\" [(ngModel)]=\"item.selectedCheckbox\" (click)=\"$event.stopPropagation()\" (change)=\"changeCheckbox()\" />\n                  @if (config.isTreeMode) {\n                    <span class=\"s-table-double__tree-name\">{{ item.name }}</span>\n                  }\n                </div>\n              </td>\n              @for (column of config.tableRightConfig.columns; track column) {\n                @if (column.id !== 'checkbox' && column.id !== undefined && !(config.isTreeMode && column.id === 'name') && column.id !== 'actions') {\n                  <td>{{ item[column.id] }}</td>\n                }\n              }\n              @if (config.showOrderButtons) {\n                <td class=\"s-table-double__order-actions\" (click)=\"$event.stopPropagation()\">\n                  <s-table-actions-buttons\n                    [tableActionsButtons]=\"getOrderButtons(item)\"\n                    (clickButtonEvent)=\"onOrderButtonClick($event, item.id)\">\n                  </s-table-actions-buttons>\n                </td>\n              }\n            </tr>\n          }\n        }\n      </s-table-complete>\n    </div>\n  </div>\n</div>\n", styles: [".s-table-double__body{display:flex;gap:.625rem}.s-table-double__body .s-tablet tr{cursor:pointer;-webkit-user-select:none;user-select:none}.s-table-double__body .s-tablet tr:hover{background-color:var(--primary-200)}.s-table-double__body .s-tablet tr.active{background-color:var(--neutrals-1100)}.s-table-double__body__left{flex:5}.s-table-double__body__middle{display:flex;flex-direction:column;gap:.625rem;justify-content:center;padding:1.25rem;background-color:var(--primary-100);border-radius:.5rem}.s-table-double__body__right{flex:5}.s-table-double .s-table-double__tree-cell{padding-left:0!important}.s-table-double__tree-cell-content{display:flex;align-items:center;gap:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__list{margin:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag{display:flex;justify-content:space-between;width:100%}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon{color:var(--primary-600)}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon:hover{cursor:pointer;color:var(--secondary-600)}.s-table-double .s-table-double__tree-level-0{padding-left:11px!important}.s-table-double .s-table-double__tree-level-1{padding-left:35px!important}.s-table-double .s-table-double__tree-level-2{padding-left:59px!important}.s-table-double .s-table-double__tree-level-3{padding-left:83px!important}.s-table-double .s-table-double__tree-level-4{padding-left:107px!important}.s-table-double .s-table-double__tree-level-5{padding-left:131px!important}.s-table-double .s-table-double__tree-level-6{padding-left:155px!important}.s-table-double .s-table-double__tree-level-7{padding-left:179px!important}.s-table-double .s-table-double__tree-level-8{padding-left:203px!important}.s-table-double .s-table-double__tree-level-9{padding-left:227px!important}.s-table-double .s-table-double__tree-level-10{padding-left:251px!important}.s-table-double .s-table-double__tree-level-11{padding-left:275px!important}.s-table-double .s-table-double__tree-level-12{padding-left:299px!important}.s-table-double .s-table-double__tree-level-13{padding-left:323px!important}.s-table-double .s-table-double__tree-level-14{padding-left:347px!important}.s-table-double .s-table-double__tree-level-15{padding-left:371px!important}.s-table-double .s-table-double__tree-level-16{padding-left:395px!important}.s-table-double .s-table-double__tree-level-17{padding-left:419px!important}.s-table-double .s-table-double__tree-level-18{padding-left:443px!important}.s-table-double .s-table-double__tree-level-19{padding-left:467px!important}.s-table-double .s-table-double__tree-level-20{padding-left:491px!important}.s-table-double__tree-toggle{cursor:pointer;transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;color:var(--neutrals-600);font-size:1.25rem}.s-table-double__tree-toggle:hover{color:var(--primary-600)}.s-table-double__tree-toggle--expanded{transform:rotate(90deg)}.s-table-double__tree-spacer{display:inline-block;width:24px}.s-table-double__tree-name{margin-left:.25rem;white-space:nowrap;cursor:pointer;flex:1}.s-table-double .s-table-double__drag{display:flex;justify-content:space-between;color:var(--primary-600)}.s-table-double__order-actions{width:1px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: STableCompleteModule }, { kind: "component", type: TableCompleteComponent, selector: "s-table-complete", inputs: ["config"], outputs: ["actionEvent", "checkAllEvent", "deleteEvent", "emptyEvent", "filterEvent", "orderByEvent", "pageEvent", "paginationEvent", "multiSelectEvent", "pillButtonEvent", "selectEvent", "searchEvent", "bottomStatusBarEvent", "scrollEvent"] }, { kind: "ngmodule", type: SButtonModule }, { kind: "component", type: SButtonComponent, selector: "s-button", inputs: ["disabled", "pill", "size", "invert", "type", "loading", "position", "theme", "active"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "ngmodule", type: SIconMaterialModule }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "ngmodule", type: SListModule }, { kind: "component", type: SListComponent, selector: "s-list", inputs: ["disabled", "selected", "size"] }, { kind: "ngmodule", type: TableActionsButtonsModule }, { kind: "component", type: TableActionsButtonsComponent, selector: "s-table-actions-buttons", inputs: ["tableActionsButtons"], outputs: ["clickButtonEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STableDoubleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-table-double', standalone: true, imports: [CommonModule, STableCompleteModule, SButtonModule, FormsModule, SIconMaterialModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"s-table-double\">\n  <div class=\"s-table-double__header\"></div>\n  <div class=\"s-table-double__body\">\n    <div class=\"s-table-double__body__left\">\n      <s-table-complete\n        [config]=\"config.tableLeftConfig\"\n        (actionEvent)=\"action('Left')\"\n        (bottomStatusBarEvent)=\"bottomStatusBarChange($event, 'Left')\"\n        (checkAllEvent)=\"checkAllEvent($event, 'Left')\"\n        (deleteEvent)=\"delete('Left')\"\n        (emptyEvent)=\"empty('Left')\"\n        (filterEvent)=\"filter($event, 'Left')\"\n        (multiSelectEvent)=\"multiSelect($event, 'Left')\"\n        (orderByEvent)=\"orderBy($event, 'Left')\"\n        (pageEvent)=\"page($event, 'Left')\"\n        (paginationEvent)=\"paginationEmitter($event, 'Left')\"\n        (pillButtonEvent)=\"pillButton('Left')\"\n        (scrollEvent)=\"onScroll('Left')\"\n        (searchEvent)=\"search($event, 'Left')\">\n        @for (item of config.tableLeftItems; track item) {\n          <tr [ngClass]=\"{ active: item.selected }\">\n            <td>\n              <input type=\"checkbox\" (change)=\"changeCheckbox()\" [(ngModel)]=\"item.selected\" />\n            </td>\n            @for (column of config.tableLeftConfig.columns; track column) {\n              @if (column.id !== 'checkbox' && column.id !== undefined) {\n                <td>{{ item[column.id] }}</td>\n              }\n            }\n          </tr>\n        }\n      </s-table-complete>\n    </div>\n    <div class=\"s-table-double__body__middle\">\n      <div>\n        <s-button\n          (click)=\"addItem()\"\n          (keydown.enter)=\"addItem()\"\n          position=\"normal\"\n          [disabled]=\"disabledButtonLeft()\"\n          [pill]=\"true\"\n          ><s-icon-mat><span class=\"material-symbols-outlined\"> arrow_forward </span></s-icon-mat></s-button\n        >\n      </div>\n      <div>\n        <s-button\n          (click)=\"removeItem()\"\n          (keydown.enter)=\"removeItem()\"\n          position=\"normal\"\n          type=\"secondary\"\n          [disabled]=\"disabledButtonRight()\"\n          [pill]=\"true\"\n          ><s-icon-mat><span class=\"material-symbols-outlined\"> arrow_back </span></s-icon-mat></s-button\n        >\n      </div>\n    </div>\n    <div class=\"s-table-double__body__right\">\n      <s-table-complete\n        [config]=\"config.tableRightConfig\"\n        (actionEvent)=\"action('Right')\"\n        (bottomStatusBarEvent)=\"bottomStatusBarChange($event, 'Right')\"\n        (checkAllEvent)=\"checkAllEvent($event, 'Right')\"\n        (deleteEvent)=\"delete('Right')\"\n        (emptyEvent)=\"empty('Right')\"\n        (filterEvent)=\"filter($event, 'Right')\"\n        (multiSelectEvent)=\"multiSelect($event, 'Right')\"\n        (orderByEvent)=\"orderBy($event, 'Right')\"\n        (pageEvent)=\"page($event, 'Right')\"\n        (paginationEvent)=\"paginationEmitter($event, 'Right')\"\n        (pillButtonEvent)=\"pillButton('Right')\"\n        (scrollEvent)=\"onScroll('Right')\"\n        (searchEvent)=\"search($event, 'Right')\">\n        @for (item of config.tableRightItems; track item) {\n          <tr [ngClass]=\"{ active: item.selected }\">\n            <td>\n              <input type=\"checkbox\" (change)=\"changeCheckbox()\" [(ngModel)]=\"item.selected\" />\n            </td>\n            @for (column of config.tableRightConfig.columns; track column) {\n              @if (column.id !== 'checkbox' && column.id !== undefined) {\n                <td>{{ item[column.id] }}</td>\n              }\n            }\n          </tr>\n        }\n      </s-table-complete>\n    </div>\n  </div>\n</div>\n", styles: [".s-table-double{margin-bottom:1rem}.s-table-double__body{display:flex;gap:.625rem}.s-table-double__body .s-tablet tr{cursor:pointer}.s-table-double__body .s-tablet tr:hover{background-color:var(--primary-200)}.s-table-double__body .s-tablet tr.active{background-color:var(--neutrals-1100)}.s-table-double__body__left{flex:5}.s-table-double__body__middle{display:flex;flex-direction:column;gap:.625rem;justify-content:center;padding:1.25rem;background-color:var(--primary-100);border-radius:.5rem}.s-table-double__body__right{flex:5}\n"] }]
+            args: [{ selector: 's-table-double', standalone: true, imports: [CommonModule, STableCompleteModule, SButtonModule, FormsModule, SIconMaterialModule, SListModule, TableActionsButtonsModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"s-table-double\">\n  <div class=\"s-table-double__header\"></div>\n  <div class=\"s-table-double__body\">\n    <div class=\"s-table-double__body__left\">\n      <s-table-complete\n        [config]=\"config.tableLeftConfig\"\n        (actionEvent)=\"action(true)\"\n        (bottomStatusBarEvent)=\"bottomStatusBarChange($event, true)\"\n        (checkAllEvent)=\"checkAllEvent($event, true)\"\n        (deleteEvent)=\"delete(true)\"\n        (emptyEvent)=\"empty(true)\"\n        (filterEvent)=\"filter($event, true)\"\n        (multiSelectEvent)=\"multiSelect($event, true)\"\n        (orderByEvent)=\"orderBy($event, true)\"\n        (pageEvent)=\"page($event, true)\"\n        (paginationEvent)=\"paginationEmitter($event, true)\"\n        (pillButtonEvent)=\"pillButton(true)\"\n        (scrollEvent)=\"onScroll(true)\"\n        (searchEvent)=\"search($event, true)\">\n        @if (config.dragAndDrop) {\n          @for (item of config.tableLeftItems; track item) {\n            <div class=\"s-table-double__list\">\n              <s-list\n                [size]=\"'xs'\"\n                [attr.data-item-id]=\"item.id\"\n                [draggable]=\"true\"\n                [selected]=\"item.selectedCheckbox\"\n                (dragstart)=\"onDragStart($event, item.id)\"\n                (dragover)=\"onDragOver($event, item.id)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event, item.id, true)\"\n                (click)=\"selectItem(item.id, true)\">\n                <div class=\"s-table-double__drag\">\n                  <h5 class=\"ml-2\">{{ item.name }}</h5>\n                  @if (item.iconAction) {\n                    <div class=\"s-table-double__drag-icon\">\n                      <s-icon-mat (click)=\"iconAction(item.id, true)\">{{ item.iconAction }}</s-icon-mat>\n                    </div>\n                  }\n                </div>\n              </s-list>\n            </div>\n          }\n        } @else {\n          @for (item of config.tableLeftItems; track item) {\n            <tr [ngClass]=\"{ active: !config.disableLeftRowSelection && item.itemSelected }\" (click)=\"!config.disableLeftRowSelection && rowClick(item, true)\">\n              <td (click)=\"$event.stopPropagation()\">\n                <input type=\"checkbox\" [(ngModel)]=\"item.selectedCheckbox\" (change)=\"changeCheckbox()\" />\n              </td>\n              @for (column of config.tableLeftConfig.columns; track column) {\n                @if (column.id !== 'checkbox' && column.id !== undefined) {\n                  <td>{{ item[column.id] }}</td>\n                }\n              }\n            </tr>\n          }\n        }\n      </s-table-complete>\n    </div>\n    <div class=\"s-table-double__body__middle\">\n      <div>\n        <s-button\n          (click)=\"addItem()\"\n          (keydown.enter)=\"addItem()\"\n          position=\"normal\"\n          [disabled]=\"disabledButtonLeft()\"\n          [pill]=\"true\"\n          ><s-icon-mat><span class=\"material-symbols-outlined\"> {{ config.additionButton ? 'add' : 'arrow_forward' }} </span></s-icon-mat></s-button\n        >\n      </div>\n      <div>\n        <s-button\n          (click)=\"removeItem()\"\n          (keydown.enter)=\"removeItem()\"\n          position=\"normal\"\n          type=\"secondary\"\n          [disabled]=\"disabledButtonRight()\"\n          [pill]=\"true\"\n          ><s-icon-mat><span class=\"material-symbols-outlined\"> {{ config.additionButton ? 'remove' : 'arrow_back' }} </span></s-icon-mat></s-button\n        >\n      </div>\n    </div>\n    <div class=\"s-table-double__body__right\">\n      <s-table-complete\n        [config]=\"config.tableRightConfig\"\n        (actionEvent)=\"action(false)\"\n        (bottomStatusBarEvent)=\"bottomStatusBarChange($event, false)\"\n        (checkAllEvent)=\"checkAllEvent($event, false)\"\n        (deleteEvent)=\"delete(false)\"\n        (emptyEvent)=\"empty(false)\"\n        (filterEvent)=\"filter($event, false)\"\n        (multiSelectEvent)=\"multiSelect($event, false)\"\n        (orderByEvent)=\"orderBy($event, false)\"\n        (pageEvent)=\"page($event, false)\"\n        (paginationEvent)=\"paginationEmitter($event, false)\"\n        (pillButtonEvent)=\"pillButton(false)\"\n        (scrollEvent)=\"onScroll(false)\"\n        (searchEvent)=\"search($event, false)\">\n        @if (config.dragAndDrop) {\n          @for (item of config.tableRightItems; track item) {\n            <s-list\n              [size]=\"'xs'\"\n              [attr.data-item-id]=\"item.id\"\n              [draggable]=\"true\"\n              [selected]=\"item.selectedCheckbox\"\n              (dragstart)=\"onDragStart($event, item.id)\"\n              (dragover)=\"onDragOver($event, item.id)\"\n              (dragleave)=\"onDragLeave($event)\"\n              (drop)=\"onDrop($event, item.id, false)\"\n              (click)=\"selectItem(item.id, false)\">\n              <div class=\"s-table-double__drag\">\n                <h5 class=\"ml-2\">{{ item.name }}</h5>\n                @if (item.iconAction) {\n                  <div class=\"s-table-double__drag-icon\">\n                    <s-icon-mat (click)=\"iconAction(item.id, false)\">{{ item.iconAction }}</s-icon-mat>\n                  </div>\n                }\n              </div>\n            </s-list>\n          }\n        } @else {\n          @for (item of config.tableRightItems; track item) {\n            <tr [ngClass]=\"{ active: item.itemSelected }\" (click)=\"rowClick(item, false)\">\n              <td\n              class=\"s-table-double__tree-cell\"\n              [class.s-table-double__tree-cell--tree]=\"config.isTreeMode\"\n              [attr.colspan]=\"config.isTreeMode ? config.tableRightConfig.columns.length - (config.showOrderButtons ? 1 : 0) : null\">\n                <div class=\"s-table-double__tree-cell-content\" [ngClass]=\"getTreeLevelClass(item)\">\n                  @if (config.isTreeMode && item.hasChildren) {\n                    <s-icon-mat\n                      class=\"s-table-double__tree-toggle\"\n                      [class.s-table-double__tree-toggle--expanded]=\"item.expanded\"\n                      (click)=\"toggleExpand($event, item.id)\">\n                      <span class=\"material-symbols-outlined\">chevron_right</span>\n                    </s-icon-mat>\n                  } @else if (config.isTreeMode) {\n                    <span class=\"s-table-double__tree-spacer\"></span>\n                  }\n                  <input type=\"checkbox\" [(ngModel)]=\"item.selectedCheckbox\" (click)=\"$event.stopPropagation()\" (change)=\"changeCheckbox()\" />\n                  @if (config.isTreeMode) {\n                    <span class=\"s-table-double__tree-name\">{{ item.name }}</span>\n                  }\n                </div>\n              </td>\n              @for (column of config.tableRightConfig.columns; track column) {\n                @if (column.id !== 'checkbox' && column.id !== undefined && !(config.isTreeMode && column.id === 'name') && column.id !== 'actions') {\n                  <td>{{ item[column.id] }}</td>\n                }\n              }\n              @if (config.showOrderButtons) {\n                <td class=\"s-table-double__order-actions\" (click)=\"$event.stopPropagation()\">\n                  <s-table-actions-buttons\n                    [tableActionsButtons]=\"getOrderButtons(item)\"\n                    (clickButtonEvent)=\"onOrderButtonClick($event, item.id)\">\n                  </s-table-actions-buttons>\n                </td>\n              }\n            </tr>\n          }\n        }\n      </s-table-complete>\n    </div>\n  </div>\n</div>\n", styles: [".s-table-double__body{display:flex;gap:.625rem}.s-table-double__body .s-tablet tr{cursor:pointer;-webkit-user-select:none;user-select:none}.s-table-double__body .s-tablet tr:hover{background-color:var(--primary-200)}.s-table-double__body .s-tablet tr.active{background-color:var(--neutrals-1100)}.s-table-double__body__left{flex:5}.s-table-double__body__middle{display:flex;flex-direction:column;gap:.625rem;justify-content:center;padding:1.25rem;background-color:var(--primary-100);border-radius:.5rem}.s-table-double__body__right{flex:5}.s-table-double .s-table-double__tree-cell{padding-left:0!important}.s-table-double__tree-cell-content{display:flex;align-items:center;gap:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__list{margin:.5rem}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag{display:flex;justify-content:space-between;width:100%}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon{color:var(--primary-600)}.s-table-double .s-table-double__tree-cell.s-table-double__tree-cell--tree__drag-icon:hover{cursor:pointer;color:var(--secondary-600)}.s-table-double .s-table-double__tree-level-0{padding-left:11px!important}.s-table-double .s-table-double__tree-level-1{padding-left:35px!important}.s-table-double .s-table-double__tree-level-2{padding-left:59px!important}.s-table-double .s-table-double__tree-level-3{padding-left:83px!important}.s-table-double .s-table-double__tree-level-4{padding-left:107px!important}.s-table-double .s-table-double__tree-level-5{padding-left:131px!important}.s-table-double .s-table-double__tree-level-6{padding-left:155px!important}.s-table-double .s-table-double__tree-level-7{padding-left:179px!important}.s-table-double .s-table-double__tree-level-8{padding-left:203px!important}.s-table-double .s-table-double__tree-level-9{padding-left:227px!important}.s-table-double .s-table-double__tree-level-10{padding-left:251px!important}.s-table-double .s-table-double__tree-level-11{padding-left:275px!important}.s-table-double .s-table-double__tree-level-12{padding-left:299px!important}.s-table-double .s-table-double__tree-level-13{padding-left:323px!important}.s-table-double .s-table-double__tree-level-14{padding-left:347px!important}.s-table-double .s-table-double__tree-level-15{padding-left:371px!important}.s-table-double .s-table-double__tree-level-16{padding-left:395px!important}.s-table-double .s-table-double__tree-level-17{padding-left:419px!important}.s-table-double .s-table-double__tree-level-18{padding-left:443px!important}.s-table-double .s-table-double__tree-level-19{padding-left:467px!important}.s-table-double .s-table-double__tree-level-20{padding-left:491px!important}.s-table-double__tree-toggle{cursor:pointer;transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;color:var(--neutrals-600);font-size:1.25rem}.s-table-double__tree-toggle:hover{color:var(--primary-600)}.s-table-double__tree-toggle--expanded{transform:rotate(90deg)}.s-table-double__tree-spacer{display:inline-block;width:24px}.s-table-double__tree-name{margin-left:.25rem;white-space:nowrap;cursor:pointer;flex:1}.s-table-double .s-table-double__drag{display:flex;justify-content:space-between;color:var(--primary-600)}.s-table-double__order-actions{width:1px;white-space:nowrap}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], actionPositionEvent: [{
@@ -7243,11 +7421,269 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }], selectPositionEvent: [{
                 type: Output
+            }], rowSelectPositionEvent: [{
+                type: Output
+            }], actionEvent: [{
+                type: Output
+            }], toggleExpandEvent: [{
+                type: Output
+            }], reorderItemEvent: [{
+                type: Output
+            }] } });
+
+class STableDoubleCompleteComponent {
+    constructor() {
+        this.updateEvent = new EventEmitter();
+        this.actionPositionEvent = new EventEmitter();
+        this.bottomStatusBarPositionEvent = new EventEmitter();
+        this.checkAllPositionEvent = new EventEmitter();
+        this.deletePositionEvent = new EventEmitter();
+        this.emptyPositionEvent = new EventEmitter();
+        this.filterPositionEvent = new EventEmitter();
+        this.multiSelectPositionEvent = new EventEmitter();
+        this.orderByPositionEvent = new EventEmitter();
+        this.pillButtonPositionEvent = new EventEmitter();
+        this.scrollPositionEvent = new EventEmitter();
+        this.selectPositionEvent = new EventEmitter();
+        this.rightTableState = [];
+        this.expandedNodes = new Map();
+    }
+    ngOnInit() {
+        this.rightTableState = [
+            ...(this.config.tableConfig.tableRightItems ?? []),
+        ];
+        const selectedTab = this.config.tabs.find(t => t.selected);
+        if (selectedTab) {
+            this.setActiveTab(selectedTab);
+        }
+    }
+    onTabSelect(tab) {
+        this.setActiveTab(tab);
+    }
+    setActiveTab(tab) {
+        this.activeTabKey = String(tab.value ?? tab.text);
+        const leftItems = this.config.itemsByTab[this.activeTabKey] ?? [];
+        const tableLeftItems = this.mapToTableDoubleItems(leftItems);
+        let tableRightItems = this.mapToTableDoubleItems(this.rightTableState);
+        if (this.config.treeMode) {
+            tableRightItems = this.flattenTree(this.buildTree(this.rightTableState));
+        }
+        this.tableDoubleAdapter = this.buildTableDoubleAdapter(tableLeftItems, tableRightItems);
+    }
+    onUpdateTables(event) {
+        const prevRightIds = new Set(this.rightTableState.map(i => i.id));
+        const sourceLeft = this.config.itemsByTab[this.activeTabKey] ?? [];
+        const selectedRightItems = event.tableRightItems.filter(i => i.itemSelected);
+        const parentId = this.config.treeMode && selectedRightItems.length === 1
+            ? selectedRightItems[0].id
+            : null;
+        const nextRight = event.tableRightItems.map(item => {
+            const prev = this.rightTableState.find(r => r.id === item.id);
+            const fromLeft = sourceLeft.find(l => l.id === item.id);
+            return {
+                ...(prev ?? fromLeft ?? {}),
+                id: item.id,
+                name: item.name,
+                selectedCheckbox: !!item.selectedCheckbox,
+                parentId: prev?.parentId ?? null,
+            };
+        });
+        const addedItems = nextRight.filter(i => !prevRightIds.has(i.id));
+        if (this.config.treeMode && parentId) {
+            addedItems.forEach(item => {
+                item.parentId = parentId;
+            });
+        }
+        this.rightTableState = nextRight;
+        this.resetSelections();
+        this.refreshTables();
+    }
+    refreshTables() {
+        const leftItems = this.config.itemsByTab[this.activeTabKey] ?? [];
+        const tableLeftItems = this.mapToTableDoubleItems(leftItems);
+        let tableRightItems = this.mapToTableDoubleItems(this.rightTableState);
+        if (this.config.treeMode) {
+            tableRightItems = this.flattenTree(this.buildTree(this.rightTableState));
+        }
+        this.tableDoubleAdapter = this.buildTableDoubleAdapter(tableLeftItems, tableRightItems);
+        this.updateEvent.emit({
+            tabKey: this.activeTabKey,
+            tableLeftItems,
+            tableRightItems,
+        });
+    }
+    buildTableDoubleAdapter(leftItems, rightItems) {
+        const rightColumns = [...this.config.tableConfig.tableRightConfig.columns];
+        if (this.config.showOrderButtons && !rightColumns.some(c => c.id === 'actions')) {
+            rightColumns.push({ id: 'actions', title: '' });
+        }
+        return {
+            additionButton: true,
+            isTreeMode: !!this.config.treeMode,
+            showOrderButtons: !!this.config.showOrderButtons,
+            disableLeftRowSelection: true,
+            tableLeftConfig: {
+                ...this.config.tableConfig.tableLeftConfig,
+                totalItems: leftItems.length,
+                isTreeMode: false,
+                configBottomStatusBar: signal({
+                    counter: leftItems.filter(i => i.selectedCheckbox).length,
+                    total: leftItems.length,
+                    disabled: leftItems.length === 0,
+                }),
+            },
+            tableRightConfig: {
+                ...this.config.tableConfig.tableRightConfig,
+                columns: rightColumns,
+                totalItems: rightItems.length,
+                isTreeMode: !!this.config.treeMode,
+                configBottomStatusBar: signal({
+                    counter: rightItems.filter(i => i.selectedCheckbox).length,
+                    total: rightItems.length,
+                    disabled: rightItems.length === 0,
+                }),
+            },
+            tableLeftItems: leftItems,
+            tableRightItems: rightItems,
+        };
+    }
+    mapToTableDoubleItems(items) {
+        return items.map((item, index) => ({
+            ...item,
+            name: item.name ?? '',
+            selectedCheckbox: item.selectedCheckbox ?? false,
+        }));
+    }
+    buildTree(items) {
+        const map = new Map();
+        const roots = [];
+        items.forEach(item => {
+            map.set(item.id, { ...item, children: [] });
+        });
+        map.forEach(item => {
+            if (item.parentId) {
+                const parent = map.get(item.parentId);
+                if (parent)
+                    parent.children.push(item);
+            }
+            else {
+                roots.push(item);
+            }
+        });
+        return roots;
+    }
+    flattenTree(nodes, level = 0) {
+        let result = [];
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            const hasChildren = !!node.children?.length;
+            const isExpanded = this.expandedNodes.get(node.id) ?? true;
+            result.push({
+                id: node.id,
+                name: node.name ?? '',
+                selectedCheckbox: !!node.selectedCheckbox,
+                parentId: node.parentId ?? null,
+                level: level,
+                expanded: isExpanded,
+                hasChildren: hasChildren,
+            });
+            if (hasChildren && isExpanded && node.children) {
+                result = result.concat(this.flattenTree(node.children, level + 1));
+            }
+        }
+        return result;
+    }
+    resetSelections() {
+        const leftItems = this.config.itemsByTab[this.activeTabKey] ?? [];
+        leftItems.forEach(i => {
+            i.selectedCheckbox = false;
+            i.itemSelected = false;
+        });
+        this.rightTableState.forEach(i => {
+            i.selectedCheckbox = false;
+            i.itemSelected = false;
+        });
+    }
+    toggleNodeExpansion(nodeId) {
+        const currentState = this.expandedNodes.get(nodeId) ?? true;
+        this.expandedNodes.set(nodeId, !currentState);
+        this.refreshTables();
+    }
+    onReorderItem(event) {
+        const { itemId, direction } = event;
+        const item = this.rightTableState.find(i => i.id === itemId);
+        if (!item)
+            return;
+        const parentId = item.parentId ?? null;
+        const siblings = this.rightTableState.filter(i => (i.parentId ?? null) === parentId);
+        const siblingIndex = siblings.findIndex(i => i.id === itemId);
+        if (siblingIndex === -1)
+            return;
+        let targetIndex;
+        switch (direction) {
+            case 'top':
+                targetIndex = 0;
+                break;
+            case 'up':
+                targetIndex = siblingIndex - 1;
+                break;
+            case 'down':
+                targetIndex = siblingIndex + 1;
+                break;
+            case 'bottom':
+                targetIndex = siblings.length - 1;
+                break;
+            default:
+                return;
+        }
+        if (targetIndex < 0 || targetIndex >= siblings.length || targetIndex === siblingIndex)
+            return;
+        siblings.splice(siblingIndex, 1);
+        siblings.splice(targetIndex, 0, item);
+        this.rightTableState = this.rightTableState.filter(i => (i.parentId ?? null) !== parentId);
+        const insertRef = parentId
+            ? this.rightTableState.findIndex(i => i.id === parentId) + 1
+            : 0;
+        this.rightTableState.splice(insertRef, 0, ...siblings);
+        this.refreshTables();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STableDoubleCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: STableDoubleCompleteComponent, isStandalone: true, selector: "s-table-double-complete", inputs: { config: "config" }, outputs: { updateEvent: "updateEvent", actionPositionEvent: "actionPositionEvent", bottomStatusBarPositionEvent: "bottomStatusBarPositionEvent", checkAllPositionEvent: "checkAllPositionEvent", deletePositionEvent: "deletePositionEvent", emptyPositionEvent: "emptyPositionEvent", filterPositionEvent: "filterPositionEvent", multiSelectPositionEvent: "multiSelectPositionEvent", orderByPositionEvent: "orderByPositionEvent", pillButtonPositionEvent: "pillButtonPositionEvent", scrollPositionEvent: "scrollPositionEvent", selectPositionEvent: "selectPositionEvent" }, ngImport: i0, template: "<div class=\"s-table-double-complete\">\n  <s-tabs\n    [tabs]=\"config.tabs\"\n    [configTabs]=\"config.configTabs\"\n    (eventSelect)=\"onTabSelect($event)\">\n  </s-tabs>\n\n  <s-table-double\n  [config]=\"tableDoubleAdapter\"\n  (eventUpdateTables)=\"onUpdateTables($event)\"\n  (actionPositionEvent)=\"actionPositionEvent.emit($event)\"\n  (bottomStatusBarPositionEvent)=\"bottomStatusBarPositionEvent.emit($event)\"\n  (checkAllPositionEvent)=\"checkAllPositionEvent.emit($event)\"\n  (deletePositionEvent)=\"deletePositionEvent.emit($event)\"\n  (emptyPositionEvent)=\"emptyPositionEvent.emit($event)\"\n  (filterPositionEvent)=\"filterPositionEvent.emit($event)\"\n  (multiSelectPositionEvent)=\"multiSelectPositionEvent.emit($event)\"\n  (orderByPositionEvent)=\"orderByPositionEvent.emit($event)\"\n  (pillButtonPositionEvent)=\"pillButtonPositionEvent.emit($event)\"\n  (scrollPositionEvent)=\"scrollPositionEvent.emit($event)\"\n  (toggleExpandEvent)=\"toggleNodeExpansion($event)\"\n  (reorderItemEvent)=\"onReorderItem($event)\">\n</s-table-double>\n</div>\n", styles: [".s-table-double-complete{display:flex;flex-direction:row;gap:.5rem}s-table-double{width:100%}s-tabs{width:15%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: STabsModule }, { kind: "component", type: STabsComponent, selector: "s-tabs", inputs: ["tabs", "configTabs"], outputs: ["eventSelect"] }, { kind: "component", type: STableDoubleComponent, selector: "s-table-double", inputs: ["config"], outputs: ["actionPositionEvent", "bottomStatusBarPositionEvent", "checkAllPositionEvent", "deletePositionEvent", "emptyPositionEvent", "eventUpdateTables", "filterPositionEvent", "multiSelectPositionEvent", "orderByPositionEvent", "pagePositionEvent", "paginationPositionEvent", "pillButtonPositionEvent", "scrollPositionEvent", "selectPositionEvent", "rowSelectPositionEvent", "actionEvent", "toggleExpandEvent", "reorderItemEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: STableDoubleCompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's-table-double-complete', standalone: true, imports: [CommonModule, STabsModule, STableDoubleComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"s-table-double-complete\">\n  <s-tabs\n    [tabs]=\"config.tabs\"\n    [configTabs]=\"config.configTabs\"\n    (eventSelect)=\"onTabSelect($event)\">\n  </s-tabs>\n\n  <s-table-double\n  [config]=\"tableDoubleAdapter\"\n  (eventUpdateTables)=\"onUpdateTables($event)\"\n  (actionPositionEvent)=\"actionPositionEvent.emit($event)\"\n  (bottomStatusBarPositionEvent)=\"bottomStatusBarPositionEvent.emit($event)\"\n  (checkAllPositionEvent)=\"checkAllPositionEvent.emit($event)\"\n  (deletePositionEvent)=\"deletePositionEvent.emit($event)\"\n  (emptyPositionEvent)=\"emptyPositionEvent.emit($event)\"\n  (filterPositionEvent)=\"filterPositionEvent.emit($event)\"\n  (multiSelectPositionEvent)=\"multiSelectPositionEvent.emit($event)\"\n  (orderByPositionEvent)=\"orderByPositionEvent.emit($event)\"\n  (pillButtonPositionEvent)=\"pillButtonPositionEvent.emit($event)\"\n  (scrollPositionEvent)=\"scrollPositionEvent.emit($event)\"\n  (toggleExpandEvent)=\"toggleNodeExpansion($event)\"\n  (reorderItemEvent)=\"onReorderItem($event)\">\n</s-table-double>\n</div>\n", styles: [".s-table-double-complete{display:flex;flex-direction:row;gap:.5rem}s-table-double{width:100%}s-tabs{width:15%}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], updateEvent: [{
+                type: Output
+            }], actionPositionEvent: [{
+                type: Output
+            }], bottomStatusBarPositionEvent: [{
+                type: Output
+            }], checkAllPositionEvent: [{
+                type: Output
+            }], deletePositionEvent: [{
+                type: Output
+            }], emptyPositionEvent: [{
+                type: Output
+            }], filterPositionEvent: [{
+                type: Output
+            }], multiSelectPositionEvent: [{
+                type: Output
+            }], orderByPositionEvent: [{
+                type: Output
+            }], pillButtonPositionEvent: [{
+                type: Output
+            }], scrollPositionEvent: [{
+                type: Output
+            }], selectPositionEvent: [{
+                type: Output
             }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATION, ANIMATION_CONFIG, ActionsButtons, ActionsButtonsType, AnimationComponent, BehaviorDto, CustomTooltipDirective, DataTypeDto, EmptyComponent, FieldOptionDto, FieldTemplateDto, FormFilledDto, FormFilledMetadataDto, FormFilledValueDto, FormGroupDto, FormLayoutDto, FormTypeDto, GridMultiInputsComponent, GridMultiInputsToolbarTopComponent, GroupFieldDto, GroupTemplateDto, ICON_INPUT, ICON_THEME, INPUTS_REGEX, INPUT_SIZE, INPUT_TYPE, ImageLoaderDirective, InputSearch, LinkedFieldDto, LocalstorageService, ModalTypeIcon, SAnimationModule, SAvatarComponent, SAvatarModule, SBadgeComponent, SBadgeModule, SBottomStatusBarComponent, SBreadcrumComponent, SBreadcrumModule, SButtonComponent, SButtonModule, SCalendar, SCalendarComponent, SCardComponent, SCardModule, SCheckData, SCheckbox, SCheckboxComponent, SCheckboxModule, SCheckboxOldComponent, SCollapseComponent, SCollapseModule, SColorComponent, SCompanyLogoComponent, SCompanyLogoModule, SContainerComponent, SContainerModule, SContentComponent, SContentModule, SDynamicFormComponent, SDynamicFormModule, SEmptyModule, SErrorControl, SFooterComponent, SFooterModule, SGridMultiInputsModule, SIcon, SIconMaterialComponent, SIconMaterialModule, SIconMenuComponent, SIconMenuModel, SIconMenuModule, SInput, SInputComponent, SInputModule, SInputNumber, SInputNumberComponent, SInputTextAreaComponent, SLinkComponent, SLinkModule, SListComponent, SListModule, SListSimpleComponent, SListSimpleModule, SMenuItemTitleComponent, SMenuMain, SMenuMainComponent, SMenuMainModule, SModalConfirmComponent, SModalConfirmService, SNavbarComponent, SNavbarModule, SNotificationComponent, SPaginationComponent, SPaginationModule, SPopupComponent, SPopupModule, SPrecodeComponent, SPrecodeModule, SProfileGroupComponent, SProfileGroupModule, SProgressbarComponent, SProgressbarModule, SRadioComponent, SRadioModule, SRangeComponent, SRedirectComponent, SSelect, SSelectComponent, SSelectModule, SSelectMultipleComponent, SSelectMultipleModel, SSelectMultipleOldComponent, SSelectSimpleComponent, SSelectSimpleModel, SSelectUser, SSidebarComponent, SSidebarModule, SSpinnerComponent, SSpinnerModule, SSubMenu, SSubMenuComponent, SSubMenuHeader, SSubMenuItem, SSubMenuModule, SSwitch, STableCompleteModule, STableDoubleComponent, STabletComponent, STabletModule, STabsComponent, STabsModule, STagComponent, STagModule, STemplate, STemplatePopup, STextArea, SThemeComponent, SThemeModule, SThumbnailComponent, SThumbnailModule, STime, STimeComponent, STimelineComponent, STimelineModule, SToastComponent, SToastModule, SToastService, SToggleSwitchComponent, SToggleSwitchModule, SToolbarTopComponent, SToolbarTopModule, STooltipComponent, STooltipModule, STranslatePipe, STranslateService, STreeListComponent, STreeListModule, SUser, SValidationError, SharedModule, SidebarStateService, SortableColumn, THEME, TableActionsButtonsComponent, TableActionsButtonsModule, TableCompleteComponent, ToggleSwitchFormComponent };
+export { ANIMATION, ANIMATION_CONFIG, ActionsButtons, ActionsButtonsType, AnimationComponent, BehaviorDto, CustomTooltipDirective, DataTypeDto, EmptyComponent, FieldOptionDto, FieldTemplateDto, FormFilledDto, FormFilledMetadataDto, FormFilledValueDto, FormGroupDto, FormLayoutDto, FormTypeDto, GridMultiInputsComponent, GridMultiInputsToolbarTopComponent, GroupFieldDto, GroupTemplateDto, ICON_INPUT, ICON_THEME, INPUTS_REGEX, INPUT_SIZE, INPUT_TYPE, ImageLoaderDirective, InputSearch, LinkedFieldDto, LocalstorageService, ModalTypeIcon, SAnimationModule, SAvatarComponent, SAvatarModule, SBadgeComponent, SBadgeModule, SBottomStatusBarComponent, SBreadcrumComponent, SBreadcrumModule, SButtonComponent, SButtonModule, SCalendar, SCalendarComponent, SCardComponent, SCardModule, SCheckData, SCheckbox, SCheckboxComponent, SCheckboxModule, SCheckboxOldComponent, SCollapseComponent, SCollapseModule, SColorComponent, SCompanyLogoComponent, SCompanyLogoModule, SContainerComponent, SContainerModule, SContentComponent, SContentModule, SDynamicFormComponent, SDynamicFormModule, SEmptyModule, SErrorControl, SFooterComponent, SFooterModule, SGridMultiInputsModule, SIcon, SIconMaterialComponent, SIconMaterialModule, SIconMenuComponent, SIconMenuModel, SIconMenuModule, SInput, SInputComponent, SInputModule, SInputNumber, SInputNumberComponent, SInputTextAreaComponent, SLinkComponent, SLinkModule, SListComponent, SListModule, SListSimpleComponent, SListSimpleModule, SMenuItemTitleComponent, SMenuMain, SMenuMainComponent, SMenuMainModule, SModalConfirmComponent, SModalConfirmService, SNavbarComponent, SNavbarModule, SNotificationComponent, SPaginationComponent, SPaginationModule, SPopupComponent, SPopupModule, SPrecodeComponent, SPrecodeModule, SProfileGroupComponent, SProfileGroupModule, SProgressbarComponent, SProgressbarModule, SRadioComponent, SRadioModule, SRedirectComponent, SSelect, SSelectComponent, SSelectModule, SSelectMultipleComponent, SSelectMultipleModel, SSelectMultipleOldComponent, SSelectSimpleComponent, SSelectSimpleModel, SSelectUser, SSidebarComponent, SSidebarModule, SSliderComponent, SSpinnerComponent, SSpinnerModule, SSubMenu, SSubMenuComponent, SSubMenuHeader, SSubMenuItem, SSubMenuModule, SSwitch, STableCompleteModule, STableDoubleCompleteComponent, STableDoubleComponent, STabletComponent, STabletModule, STabsComponent, STabsModule, STagComponent, STagModule, STemplate, STemplatePopup, STextArea, SThemeComponent, SThemeModule, SThumbnailComponent, SThumbnailModule, STime, STimeComponent, STimelineComponent, STimelineModule, SToastComponent, SToastModule, SToastService, SToggleSwitchComponent, SToggleSwitchModule, SToolbarTopComponent, SToolbarTopModule, STooltipComponent, STooltipModule, STranslatePipe, STranslateService, STreeListComponent, STreeListModule, SUser, SValidationError, SharedModule, SidebarStateService, SortableColumn, THEME, TableActionsButtonsComponent, TableActionsButtonsModule, TableCompleteComponent, ToggleSwitchFormComponent };
 //# sourceMappingURL=sidesys-generic-ui.mjs.map