@solcre-org/core-ui 2.11.20 → 2.11.22

package/fesm2022/solcre-org-core-ui.mjs

@@ -285,8 +285,7 @@ class CheckboxFieldComponent extends BaseFieldComponent {
     });
     options = computed(() => {
         const checkboxField = this.field();
-        const opts = checkboxField.checkboxConfig?.options || [];
-        return opts;
+        return checkboxField.checkboxConfig?.options || [];
     });
     allowMultiple = computed(() => {
         const checkboxField = this.field();
@@ -1442,11 +1441,11 @@ class SelectFieldComponent extends BaseFieldComponent {
         this.hasValue.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SelectFieldComponent, isStandalone: true, selector: "core-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- Todo: Ng select + c-entry-select -->\n  \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n \n  <div class=\"c-entry-input c-entry-input--ng-select c-entry-input--ng-select-alt\"\n      [class.is-placeholder]=\"isPlaceholderVisible()\"\n      [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"field().options ?? []\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [multiple]=\"field().multiple\"\n        [formControl]=\"formControl()\"\n        [compareWith]=\"compareWith\"\n        [class.has-error]=\"hasError()\"\n        [readonly]=\"field().readonly\"\n        [clearable]=\"true\"\n        [searchable]=\"isSearchable()\"\n        (blur)=\"onBlurInput()\"\n        (change)=\"onSelectChange($event)\"\n        (clear)=\"onSelectClear()\"\n        [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? '') | translate) : ''\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n          {{ item.label | translate }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n            <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n            {{ item.label | translate }}\n        </ng-template>\n        <ng-template ng-notfound-tmp>\n          <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n        </ng-template>\n      </ng-select>\n    <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n</div>", styles: [".c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i5.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SelectFieldComponent, isStandalone: true, selector: "core-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- Todo: Ng select + c-entry-select -->\n  \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n \n  <div class=\"c-entry-input c-entry-input--ng-select c-entry-input--ng-select-alt\"\n      [class.is-placeholder]=\"isPlaceholderVisible()\"\n      [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"field().options ?? []\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [multiple]=\"field().multiple\"\n        [formControl]=\"formControl()\"\n        [compareWith]=\"compareWith\"\n        [class.has-error]=\"hasError()\"\n        [readonly]=\"field().readonly\"\n        [clearable]=\"true\"\n        [searchable]=\"isSearchable()\"\n        (blur)=\"onBlurInput()\"\n        (change)=\"onSelectChange($event)\"\n        (clear)=\"onSelectClear()\"\n        [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? '') | translate) : ''\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n          {{ item.label | translate }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n            <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n            {{ item.label | translate }}\n        </ng-template>\n        <ng-template ng-notfound-tmp>\n          <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n        </ng-template>\n      </ng-select>\n    <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n</div>", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative;overflow:auto}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i5.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-select-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- Todo: Ng select + c-entry-select -->\n  \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n \n  <div class=\"c-entry-input c-entry-input--ng-select c-entry-input--ng-select-alt\"\n      [class.is-placeholder]=\"isPlaceholderVisible()\"\n      [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"field().options ?? []\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [multiple]=\"field().multiple\"\n        [formControl]=\"formControl()\"\n        [compareWith]=\"compareWith\"\n        [class.has-error]=\"hasError()\"\n        [readonly]=\"field().readonly\"\n        [clearable]=\"true\"\n        [searchable]=\"isSearchable()\"\n        (blur)=\"onBlurInput()\"\n        (change)=\"onSelectChange($event)\"\n        (clear)=\"onSelectClear()\"\n        [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? '') | translate) : ''\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n          {{ item.label | translate }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n            <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n            {{ item.label | translate }}\n        </ng-template>\n        <ng-template ng-notfound-tmp>\n          <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n        </ng-template>\n      </ng-select>\n    <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n</div>", styles: [".c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"] }]
+            args: [{ selector: 'core-select-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- Todo: Ng select + c-entry-select -->\n  \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n \n  <div class=\"c-entry-input c-entry-input--ng-select c-entry-input--ng-select-alt\"\n      [class.is-placeholder]=\"isPlaceholderVisible()\"\n      [class.is-invalid]=\"hasError()\">\n      <ng-select\n        [items]=\"field().options ?? []\"\n        bindValue=\"value\"\n        bindLabel=\"label\"\n        [multiple]=\"field().multiple\"\n        [formControl]=\"formControl()\"\n        [compareWith]=\"compareWith\"\n        [class.has-error]=\"hasError()\"\n        [readonly]=\"field().readonly\"\n        [clearable]=\"true\"\n        [searchable]=\"isSearchable()\"\n        (blur)=\"onBlurInput()\"\n        (change)=\"onSelectChange($event)\"\n        (clear)=\"onSelectClear()\"\n        [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? '') | translate) : ''\"\n      >\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n          {{ item.label | translate }}\n        </ng-template>\n        <ng-template ng-label-tmp let-item=\"item\">\n            <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n            {{ item.label | translate }}\n        </ng-template>\n        <ng-template ng-notfound-tmp>\n          <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n        </ng-template>\n      </ng-select>\n    <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n  </div>\n  <core-field-errors [errors]=\"errors()\" />\n</div>", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative;overflow:auto}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ngSelect: [{
                 type: ViewChild,
                 args: [NgSelectComponent]
@@ -2118,11 +2117,11 @@ class ServerSelectFieldComponent extends BaseFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ServerSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: ServerSelectFieldComponent, isStandalone: true, selector: "core-server-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- ! Solcre: Deberia ser el mismo componente que el select-field.component -->\n<!-- Todo: Ng select + c-entry-select -->\n  \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n    <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n \n    <!-- ! Solcre: El .c-entry-select deberia ser un componente en s\u00ED mismo -->\n    <!-- ! Solcre: Sacar el .is-placeholder en el onChange -->\n \n    <span class=\"c-entry-input c-entry-input--ng-select\"\n          [class.is-placeholder]=\"isPlaceholderVisible()\">\n    <!-- <div class=\"c-entry-select\"> -->\n \n        <ng-select #ngSelect\n            [items]=\"items()\"\n            [bindValue]=\"field().bindValue ?? 'id'\"\n            [multiple]=\"field().multiple\"\n            [formControl]=\"formControl()\"\n            [compareWith]=\"compareWith\"\n            [class.has-error]=\"hasError()\"\n            [readonly]=\"field().readonly\"\n            [clearable]=\"!!value()\"\n            [searchable]=\"isSearchable()\"\n            [loading]=\"isLoading()\"\n            [typeahead]=\"searchInput$\"\n            (blur)=\"onBlurInput()\"\n            (click)=\"onFieldClick()\"\n            (beforeOpen)=\"onBeforeOpen()\"\n            (open)=\"onOpen()\"\n            (close)=\"onClose()\"\n            (change)=\"onSelectChange($event)\"\n            (clear)=\"onSelectClear()\"\n            [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? 'commons.select.placeholder') | translate) : ''\"\n            [virtualScroll]=\"true\"\n            [clearable]=\"true\"\n        >\n            <!-- Estilos para cuando se clickea el select para buscar (si es conveniente dejarlo vac\u00EDo) -->\n            <ng-template ng-typetosearch-tmp></ng-template>\n            <ng-template ng-option-tmp let-item=\"item\">\n                <!-- Estilos de opciones del select-->\n                {{ getDisplayLabel(item) }}\n            </ng-template>\n            <ng-template ng-label-tmp let-item=\"item\">\n                <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n                {{ getDisplayLabel(item) }}\n            </ng-template>\n            <ng-template ng-loadingtext-tmp>\n                <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n            </ng-template>\n            <ng-template ng-notfound-tmp>\n                <ng-container *ngIf=\"isLoading(); else noData\">\n                    <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n                </ng-container>\n                <ng-template #noData>\n                    <ng-container *ngIf=\"hasSearched(); else startTyping\">\n                        <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n                    </ng-container>\n                    <ng-template #startTyping>\n                        <span class=\"ng-select-start-typing\">{{ 'modal.field.serverSelect.typeToSearch' | translate }}</span>\n                    </ng-template>\n                </ng-template>\n            </ng-template>\n        </ng-select>\n \n        <!-- <span class=\"c-entry-select__arrow icon-arrow-down\"></span> -->\n        <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span> <!-- .c-entry-select || .c-entry-input -->\n    <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->", styles: [".c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i5.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i5.NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: i5.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: ServerSelectFieldComponent, isStandalone: true, selector: "core-server-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- ! Solcre: Deberia ser el mismo componente que el select-field.component -->\n<!-- Todo: Ng select + c-entry-select -->\n  \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n    <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n \n    <!-- ! Solcre: El .c-entry-select deberia ser un componente en s\u00ED mismo -->\n    <!-- ! Solcre: Sacar el .is-placeholder en el onChange -->\n \n    <span class=\"c-entry-input c-entry-input--ng-select\"\n          [class.is-placeholder]=\"isPlaceholderVisible()\">\n    <!-- <div class=\"c-entry-select\"> -->\n \n        <ng-select #ngSelect\n            [items]=\"items()\"\n            [bindValue]=\"field().bindValue ?? 'id'\"\n            [multiple]=\"field().multiple\"\n            [formControl]=\"formControl()\"\n            [compareWith]=\"compareWith\"\n            [class.has-error]=\"hasError()\"\n            [readonly]=\"field().readonly\"\n            [clearable]=\"!!value()\"\n            [searchable]=\"isSearchable()\"\n            [loading]=\"isLoading()\"\n            [typeahead]=\"searchInput$\"\n            (blur)=\"onBlurInput()\"\n            (click)=\"onFieldClick()\"\n            (beforeOpen)=\"onBeforeOpen()\"\n            (open)=\"onOpen()\"\n            (close)=\"onClose()\"\n            (change)=\"onSelectChange($event)\"\n            (clear)=\"onSelectClear()\"\n            [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? 'commons.select.placeholder') | translate) : ''\"\n            [virtualScroll]=\"true\"\n            [clearable]=\"true\"\n        >\n            <!-- Estilos para cuando se clickea el select para buscar (si es conveniente dejarlo vac\u00EDo) -->\n            <ng-template ng-typetosearch-tmp></ng-template>\n            <ng-template ng-option-tmp let-item=\"item\">\n                <!-- Estilos de opciones del select-->\n                {{ getDisplayLabel(item) }}\n            </ng-template>\n            <ng-template ng-label-tmp let-item=\"item\">\n                <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n                {{ getDisplayLabel(item) }}\n            </ng-template>\n            <ng-template ng-loadingtext-tmp>\n                <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n            </ng-template>\n            <ng-template ng-notfound-tmp>\n                <ng-container *ngIf=\"isLoading(); else noData\">\n                    <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n                </ng-container>\n                <ng-template #noData>\n                    <ng-container *ngIf=\"hasSearched(); else startTyping\">\n                        <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n                    </ng-container>\n                    <ng-template #startTyping>\n                        <span class=\"ng-select-start-typing\">{{ 'modal.field.serverSelect.typeToSearch' | translate }}</span>\n                    </ng-template>\n                </ng-template>\n            </ng-template>\n        </ng-select>\n \n        <!-- <span class=\"c-entry-select__arrow icon-arrow-down\"></span> -->\n        <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span> <!-- .c-entry-select || .c-entry-input -->\n    <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative;overflow:auto}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i5.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i5.NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: i5.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ServerSelectFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-server-select-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- ! Solcre: Deberia ser el mismo componente que el select-field.component -->\n<!-- Todo: Ng select + c-entry-select -->\n  \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n    <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n \n    <!-- ! Solcre: El .c-entry-select deberia ser un componente en s\u00ED mismo -->\n    <!-- ! Solcre: Sacar el .is-placeholder en el onChange -->\n \n    <span class=\"c-entry-input c-entry-input--ng-select\"\n          [class.is-placeholder]=\"isPlaceholderVisible()\">\n    <!-- <div class=\"c-entry-select\"> -->\n \n        <ng-select #ngSelect\n            [items]=\"items()\"\n            [bindValue]=\"field().bindValue ?? 'id'\"\n            [multiple]=\"field().multiple\"\n            [formControl]=\"formControl()\"\n            [compareWith]=\"compareWith\"\n            [class.has-error]=\"hasError()\"\n            [readonly]=\"field().readonly\"\n            [clearable]=\"!!value()\"\n            [searchable]=\"isSearchable()\"\n            [loading]=\"isLoading()\"\n            [typeahead]=\"searchInput$\"\n            (blur)=\"onBlurInput()\"\n            (click)=\"onFieldClick()\"\n            (beforeOpen)=\"onBeforeOpen()\"\n            (open)=\"onOpen()\"\n            (close)=\"onClose()\"\n            (change)=\"onSelectChange($event)\"\n            (clear)=\"onSelectClear()\"\n            [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? 'commons.select.placeholder') | translate) : ''\"\n            [virtualScroll]=\"true\"\n            [clearable]=\"true\"\n        >\n            <!-- Estilos para cuando se clickea el select para buscar (si es conveniente dejarlo vac\u00EDo) -->\n            <ng-template ng-typetosearch-tmp></ng-template>\n            <ng-template ng-option-tmp let-item=\"item\">\n                <!-- Estilos de opciones del select-->\n                {{ getDisplayLabel(item) }}\n            </ng-template>\n            <ng-template ng-label-tmp let-item=\"item\">\n                <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n                {{ getDisplayLabel(item) }}\n            </ng-template>\n            <ng-template ng-loadingtext-tmp>\n                <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n            </ng-template>\n            <ng-template ng-notfound-tmp>\n                <ng-container *ngIf=\"isLoading(); else noData\">\n                    <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n                </ng-container>\n                <ng-template #noData>\n                    <ng-container *ngIf=\"hasSearched(); else startTyping\">\n                        <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n                    </ng-container>\n                    <ng-template #startTyping>\n                        <span class=\"ng-select-start-typing\">{{ 'modal.field.serverSelect.typeToSearch' | translate }}</span>\n                    </ng-template>\n                </ng-template>\n            </ng-template>\n        </ng-select>\n \n        <!-- <span class=\"c-entry-select__arrow icon-arrow-down\"></span> -->\n        <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span> <!-- .c-entry-select || .c-entry-input -->\n    <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->", styles: [".c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"] }]
+            args: [{ selector: 'core-server-select-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, NgSelectModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- ! Solcre: Deberia ser el mismo componente que el select-field.component -->\n<!-- Todo: Ng select + c-entry-select -->\n  \n<div class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n    <span class=\"c-entry-text\" *ngIf=\"field().label\">{{ field().label | translate }}</span>\n \n    <!-- ! Solcre: El .c-entry-select deberia ser un componente en s\u00ED mismo -->\n    <!-- ! Solcre: Sacar el .is-placeholder en el onChange -->\n \n    <span class=\"c-entry-input c-entry-input--ng-select\"\n          [class.is-placeholder]=\"isPlaceholderVisible()\">\n    <!-- <div class=\"c-entry-select\"> -->\n \n        <ng-select #ngSelect\n            [items]=\"items()\"\n            [bindValue]=\"field().bindValue ?? 'id'\"\n            [multiple]=\"field().multiple\"\n            [formControl]=\"formControl()\"\n            [compareWith]=\"compareWith\"\n            [class.has-error]=\"hasError()\"\n            [readonly]=\"field().readonly\"\n            [clearable]=\"!!value()\"\n            [searchable]=\"isSearchable()\"\n            [loading]=\"isLoading()\"\n            [typeahead]=\"searchInput$\"\n            (blur)=\"onBlurInput()\"\n            (click)=\"onFieldClick()\"\n            (beforeOpen)=\"onBeforeOpen()\"\n            (open)=\"onOpen()\"\n            (close)=\"onClose()\"\n            (change)=\"onSelectChange($event)\"\n            (clear)=\"onSelectClear()\"\n            [placeholder]=\"isPlaceholderVisible() ? ((field().placeholder ?? 'commons.select.placeholder') | translate) : ''\"\n            [virtualScroll]=\"true\"\n            [clearable]=\"true\"\n        >\n            <!-- Estilos para cuando se clickea el select para buscar (si es conveniente dejarlo vac\u00EDo) -->\n            <ng-template ng-typetosearch-tmp></ng-template>\n            <ng-template ng-option-tmp let-item=\"item\">\n                <!-- Estilos de opciones del select-->\n                {{ getDisplayLabel(item) }}\n            </ng-template>\n            <ng-template ng-label-tmp let-item=\"item\">\n                <!-- Estilos que aparecen en la etiqueta del item seleccionado -->\n                {{ getDisplayLabel(item) }}\n            </ng-template>\n            <ng-template ng-loadingtext-tmp>\n                <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n            </ng-template>\n            <ng-template ng-notfound-tmp>\n                <ng-container *ngIf=\"isLoading(); else noData\">\n                    <span class=\"ng-select-loading\">{{ 'commons.loading' | translate }}</span>\n                </ng-container>\n                <ng-template #noData>\n                    <ng-container *ngIf=\"hasSearched(); else startTyping\">\n                        <span class=\"ng-select-notfound\">{{ 'modal.field.serverSelect.noResults' | translate }}</span>\n                    </ng-container>\n                    <ng-template #startTyping>\n                        <span class=\"ng-select-start-typing\">{{ 'modal.field.serverSelect.typeToSearch' | translate }}</span>\n                    </ng-template>\n                </ng-template>\n            </ng-template>\n        </ng-select>\n \n        <!-- <span class=\"c-entry-select__arrow icon-arrow-down\"></span> -->\n        <span class=\"c-entry-input__addon icon-select-arrow\"></span>\n    </span> <!-- .c-entry-select || .c-entry-input -->\n    <core-field-errors [errors]=\"errors()\" />\n</div> <!-- .c-entry-item -->", styles: [".ng-select .ng-select-container .ng-value-container{flex-wrap:wrap}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{color:var(--_entry-input-placeholder-color);opacity:1}.c-entry-input--ng-select.is-placeholder ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input{color:var(--_entry-input-placeholder-color)}.c-entry-input--ng-select:not(.is-placeholder) ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input input::placeholder{opacity:0}::ng-deep .ng-select{width:100%!important;display:contents}.c-entry-input--ng-select{position:relative;overflow:auto}::ng-deep .ng-dropdown-panel{top:0;right:0}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{background-color:var(--form-highlighted-color, var(--color-neutral-300));color:#3f4e6a;border-radius:var(--_entry-input-br);padding:.2em .8em;margin:.2em;border:none;border-radius:4px}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{border:none;padding-right:.4em;color:#3f4e6a}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{border:none;min-height:auto;padding:0;position:relative;right:0;margin-top:3em;box-shadow:1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);background-color:var(--color-neutral-100)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:.6em .8em;color:#6a788c;cursor:pointer;transition:background-color .1s ease-out}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{color:var(--color-primary-400)}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:var(--color-primary-400);font-weight:500}::ng-deep .ng-dropdown-panel .scrollable-content{background:#f2f5fa}::ng-deep .ng-dropdown-panel-items.scroll-host{background:#f2f5fa;padding:1em;border-radius:var(--_entry-input-br)}::ng-deep app-server-select-field .ng-select:not(.ng-select-filtered):not(.ng-select-opened) .ng-dropdown-panel{opacity:0!important}::ng-deep .c-entry-input--ng-select{--_entry-input-padd-y: .76em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value){--_entry-input-padd-y: .35em}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input{margin-left:8px}::ng-deep .c-entry-input--ng-select:has(.ng-value-container .ng-value) .ng-select .ng-select-container .ng-value-container .ng-input>input{height:100%}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-notfound){background-color:hsl(from hsl(var(--color-context-error-hsl)) h s 94%);color:hsl(from hsl(var(--color-context-error-hsl)) h s 60%)}::ng-deep .ng-dropdown-panel-items.scroll-host:has(.ng-select-loading){background-color:hsl(from hsl(var(--color-alternative-800-hsl)) h s 96%);color:hsl(from hsl(var(--color-alternative-800-hsl)) h 90% 70%)}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container{display:grid}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{height:-webkit-fill-available}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{height:98%}::ng-deep .ng-select.ng-select-single .ng-select-container{overflow:visible;position:relative;cursor:pointer}::ng-deep .ng-select.ng-select-single .ng-select-container:before{content:\"\";position:absolute;left:calc(var(--_entry-input-padd-x) * -1);right:calc(var(--_entry-input-padd-x) * -1 - var(--_entry-input-addon-gap) - var(--_entry-input-addon-icon-fz));top:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1);bottom:calc(max(var(--_entry-input-padd-y) * var(--_size-factor, 1),2px)*-1)}::ng-deep .ng-select .ng-clear-wrapper .ng-clear{position:absolute;top:50%;transform:translateY(-50%)}@media (hover: hover){::ng-deep .ng-select .ng-clear-wrapper:is(:hover,:focus-visible){color:var(--color-hover)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ngSelect: [{
                 type: ViewChild,
                 args: ['ngSelect']
@@ -6222,11 +6221,29 @@ class FilterModalComponent {
             }
         }
         if (changes['currentFilterValues']) {
-            const hasLocalChanges = this.filterValues().size > 0;
-            if (!hasLocalChanges) {
-                this.filterValues.set(new Map(changes['currentFilterValues'].currentValue || new Map()));
+            const newParentValues = new Map(changes['currentFilterValues'].currentValue || new Map());
+            const currentLocalValues = this.filterValues();
+            const removedFilters = Array.from(currentLocalValues.keys()).filter(key => !newParentValues.has(key) && currentLocalValues.get(key) !== undefined);
+            if (removedFilters.length > 0) {
+                const updatedValues = new Map(currentLocalValues);
+                removedFilters.forEach(key => {
+                    updatedValues.delete(key);
+                });
+                newParentValues.forEach((value, key) => {
+                    if (!currentLocalValues.has(key)) {
+                        updatedValues.set(key, value);
+                    }
+                });
+                this.filterValues.set(updatedValues);
                 this.updateFormWithFilterValues();
             }
+            else {
+                const hasLocalChanges = currentLocalValues.size > 0;
+                if (!hasLocalChanges) {
+                    this.filterValues.set(newParentValues);
+                    this.updateFormWithFilterValues();
+                }
+            }
         }
         if (changes['isOpen'] && changes['isOpen'].currentValue === true) {
             if (this.filterValues().size === 0) {
@@ -8308,6 +8325,7 @@ class GenericTableComponent {
     handleFilterRemoved(filter) {
         const currentFilters = new Map(this.filterService.getCustomFilters());
         currentFilters.delete(filter.key);
+        this.handleFilterDependencies(filter.key, currentFilters);
         this.currentFilterValues.set(currentFilters);
         if (this.endpoint()) {
             const transformedFilters = this.transformFiltersForPayload(currentFilters);
@@ -8324,6 +8342,15 @@ class GenericTableComponent {
         }
         this.activeFilterRemoved.emit(filter);
     }
+    handleFilterDependencies(removedFilterKey, currentFilters) {
+        const dependentFilters = this.customFilters().filter(filter => filter.conditionalVisibility?.dependsOn === removedFilterKey);
+        dependentFilters.forEach(dependentFilter => {
+            const dependentKey = dependentFilter.key.toString();
+            if (currentFilters.has(dependentKey)) {
+                currentFilters.delete(dependentKey);
+            }
+        });
+    }
     handleFiltersCleared() {
         this.currentFilterValues.set(new Map());
         if (this.endpoint()) {
@@ -10197,12 +10224,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 // Este archivo es generado automáticamente por scripts/update-version.js
 // No edites manualmente este archivo
 const VERSION = {
-    full: '2.11.20',
+    full: '2.11.22',
     major: 2,
     minor: 11,
-    patch: 20,
-    timestamp: '2025-08-27T16:52:12.959Z',
-    buildDate: '27/8/2025'
+    patch: 22,
+    timestamp: '2025-08-28T12:11:20.525Z',
+    buildDate: '28/8/2025'
 };
 
 class MainNavComponent {
@@ -10767,32 +10794,184 @@ var StepSize;
     StepSize["LARGE"] = "large";
 })(StepSize || (StepSize = {}));
 
+class StepsService {
+    _steps = signal([]);
+    _activeStepId = signal('');
+    _stepsInstanceId = signal('');
+    steps = computed(() => this._steps());
+    activeStepId = computed(() => this._activeStepId());
+    activeStep = computed(() => {
+        const activeId = this._activeStepId();
+        return this._steps().find(step => step.id === activeId);
+    });
+    activeStepIndex = computed(() => {
+        const activeId = this._activeStepId();
+        return this._steps().findIndex(step => step.id === activeId);
+    });
+    initializeSteps(steps, activeStepId, instanceId) {
+        this._steps.set([...steps]);
+        this._stepsInstanceId.set(instanceId || 'default');
+        if (activeStepId) {
+            this._activeStepId.set(activeStepId);
+        }
+        else if (steps.length > 0) {
+            const activeStep = steps.find(step => step.status === StepStatus.ACTIVE) || steps[0];
+            this._activeStepId.set(activeStep.id);
+        }
+    }
+    setActiveStep(stepId) {
+        const step = this._steps().find(s => s.id === stepId);
+        if (!step) {
+            return null;
+        }
+        if (step.disabled) {
+            return null;
+        }
+        const previousStepId = this._activeStepId();
+        this._activeStepId.set(stepId);
+        return {
+            step,
+            index: this._steps().findIndex(s => s.id === stepId),
+            previousStepId
+        };
+    }
+    nextStep() {
+        const currentIndex = this.activeStepIndex();
+        if (currentIndex < this._steps().length - 1) {
+            this.completeStep(this._activeStepId());
+            const nextStep = this._steps()[currentIndex + 1];
+            this.updateStepStatus(nextStep.id, StepStatus.ACTIVE);
+            return this.setActiveStep(nextStep.id);
+        }
+        return null;
+    }
+    previousStep() {
+        const currentIndex = this.activeStepIndex();
+        if (currentIndex > 0) {
+            const prevStep = this._steps()[currentIndex - 1];
+            return this.setActiveStep(prevStep.id);
+        }
+        return null;
+    }
+    completeStep(stepId) {
+        this.updateStepStatus(stepId, StepStatus.COMPLETE);
+    }
+    setPendingStep(stepId) {
+        this.updateStepStatus(stepId, StepStatus.PENDING);
+    }
+    setActiveStepStatus(stepId) {
+        this.updateStepStatus(stepId, StepStatus.ACTIVE);
+    }
+    updateStepStatus(stepId, status) {
+        const stepIndex = this._steps().findIndex(s => s.id === stepId);
+        if (stepIndex !== -1) {
+            const updatedSteps = [...this._steps()];
+            updatedSteps[stepIndex] = { ...updatedSteps[stepIndex], status };
+            this._steps.set(updatedSteps);
+        }
+    }
+    setStepDisabled(stepId, disabled) {
+        const stepIndex = this._steps().findIndex(s => s.id === stepId);
+        if (stepIndex !== -1) {
+            const updatedSteps = [...this._steps()];
+            updatedSteps[stepIndex] = { ...updatedSteps[stepIndex], disabled };
+            this._steps.set(updatedSteps);
+        }
+    }
+    getProgress() {
+        const completedSteps = this._steps().filter(step => step.status === StepStatus.COMPLETE).length;
+        return this._steps().length > 0 ? (completedSteps / this._steps().length) * 100 : 0;
+    }
+    canGoNext() {
+        const currentIndex = this.activeStepIndex();
+        return currentIndex < this._steps().length - 1;
+    }
+    canGoPrevious() {
+        const currentIndex = this.activeStepIndex();
+        return currentIndex > 0;
+    }
+    getCompletedSteps() {
+        return this._steps().filter(step => step.status === StepStatus.COMPLETE);
+    }
+    getPendingSteps() {
+        return this._steps().filter(step => step.status === StepStatus.PENDING);
+    }
+    resetSteps() {
+        const updatedSteps = this._steps().map((step, index) => ({
+            ...step,
+            status: index === 0 ? StepStatus.ACTIVE : StepStatus.PENDING,
+            disabled: index === 0 ? false : step.disabled
+        }));
+        this._steps.set(updatedSteps);
+        if (updatedSteps.length > 0) {
+            this._activeStepId.set(updatedSteps[0].id);
+        }
+    }
+    completeStepsUpTo(stepId) {
+        const targetIndex = this._steps().findIndex(s => s.id === stepId);
+        if (targetIndex !== -1) {
+            const updatedSteps = [...this._steps()];
+            for (let i = 0; i <= targetIndex; i++) {
+                updatedSteps[i] = { ...updatedSteps[i], status: StepStatus.COMPLETE };
+            }
+            this._steps.set(updatedSteps);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class GenericStepsComponent {
-    // Inputs
+    stepsService = inject(StepsService);
     config = input.required();
-    // Outputs
+    useService = input(false);
+    instanceId = input('default');
     stepClick = output();
     stepChange = output();
-    // Signals
+    serviceStepChange = output();
     activeStepId = signal('');
     steps = signal([]);
     customColors = signal({});
-    // Computed
     activeStep = computed(() => {
+        if (this.useService()) {
+            return this.stepsService.activeStep();
+        }
         const activeId = this.activeStepId();
         return this.steps().find(step => step.id === activeId);
     });
     activeStepIndex = computed(() => {
+        if (this.useService()) {
+            return this.stepsService.activeStepIndex();
+        }
         const activeId = this.activeStepId();
         return this.steps().findIndex(step => step.id === activeId);
     });
-    // Enums for template
+    currentSteps = computed(() => {
+        return this.useService() ? this.stepsService.steps() : this.steps();
+    });
+    currentActiveStepId = computed(() => {
+        return this.useService() ? this.stepsService.activeStepId() : this.activeStepId();
+    });
     StepStatus = StepStatus;
     StepType = StepType;
     StepSize = StepSize;
     ngOnInit() {
         this.initializeSteps();
         this.setupCustomColors();
+        if (this.useService()) {
+            effect(() => {
+                const serviceStepChange = this.stepsService.activeStepId();
+                if (serviceStepChange) {
+                    this.handleServiceStepChange();
+                }
+            });
+        }
     }
     ngOnChanges(changes) {
         if (changes['config']) {
@@ -10802,13 +10981,30 @@ class GenericStepsComponent {
     }
     initializeSteps() {
         const config = this.config();
-        this.steps.set(config.steps || []);
-        if (config.activeStepId) {
-            this.activeStepId.set(config.activeStepId);
+        if (this.useService()) {
+            this.stepsService.initializeSteps(config.steps || [], config.activeStepId, this.instanceId());
         }
-        else if (this.steps().length > 0) {
-            const activeStep = this.steps().find(step => step.status === StepStatus.ACTIVE) || this.steps()[0];
-            this.activeStepId.set(activeStep.id);
+        else {
+            this.steps.set(config.steps || []);
+            if (config.activeStepId) {
+                this.activeStepId.set(config.activeStepId);
+            }
+            else if (this.steps().length > 0) {
+                const activeStep = this.steps().find(step => step.status === StepStatus.ACTIVE) || this.steps()[0];
+                this.activeStepId.set(activeStep.id);
+            }
+        }
+    }
+    handleServiceStepChange() {
+        const activeStep = this.stepsService.activeStep();
+        const activeIndex = this.stepsService.activeStepIndex();
+        if (activeStep) {
+            const changeEvent = {
+                step: activeStep,
+                index: activeIndex
+            };
+            this.serviceStepChange.emit(changeEvent);
+            this.stepChange.emit({ step: activeStep, index: activeIndex });
         }
     }
     setupCustomColors() {
@@ -10848,8 +11044,16 @@ class GenericStepsComponent {
         };
         this.stepClick.emit(clickEvent);
         if (this.config().clickable) {
-            this.activeStepId.set(step.id);
-            this.stepChange.emit({ step, index });
+            if (this.useService()) {
+                const changeEvent = this.stepsService.setActiveStep(step.id);
+                if (changeEvent) {
+                    this.serviceStepChange.emit(changeEvent);
+                }
+            }
+            else {
+                this.activeStepId.set(step.id);
+                this.stepChange.emit({ step, index });
+            }
         }
     }
     getStepClasses(step) {
@@ -10860,7 +11064,8 @@ class GenericStepsComponent {
         if (step.status === StepStatus.COMPLETE) {
             classes.push('is-complete');
         }
-        if (step.id === this.activeStepId()) {
+        const currentActiveId = this.currentActiveStepId();
+        if (step.id === currentActiveId) {
             classes.push('is-active-step');
         }
         if (step.status === StepStatus.PENDING) {
@@ -10871,7 +11076,6 @@ class GenericStepsComponent {
         }
         const size = this.config().size || StepSize.MEDIUM;
         classes.push(`c-steps__item--${size}`);
-        console.log(`Step ${step.id} size class: c-steps__item--${size}`);
         if (step.customClass) {
             classes.push(step.customClass);
         }
@@ -10897,52 +11101,87 @@ class GenericStepsComponent {
     }
     getConnectorClasses(index) {
         const classes = ['c-steps__connector'];
-        const currentStep = this.steps()[index];
-        const nextStep = this.steps()[index + 1];
+        const currentSteps = this.currentSteps();
+        const currentStep = currentSteps[index];
+        const nextStep = currentSteps[index + 1];
         if (currentStep?.status === StepStatus.COMPLETE) {
             classes.push('is-complete');
         }
-        else if (currentStep?.status === StepStatus.ACTIVE || currentStep?.id === this.activeStepId()) {
+        else if (currentStep?.status === StepStatus.ACTIVE || currentStep?.id === this.currentActiveStepId()) {
             classes.push('is-active');
         }
         return classes.join(' ');
     }
     setActiveStep(stepId) {
-        const step = this.steps().find(s => s.id === stepId);
-        if (step) {
-            this.activeStepId.set(stepId);
-            this.stepChange.emit({ step, index: this.steps().findIndex(s => s.id === stepId) });
+        if (this.useService()) {
+            const changeEvent = this.stepsService.setActiveStep(stepId);
+            if (changeEvent) {
+                this.serviceStepChange.emit(changeEvent);
+            }
+        }
+        else {
+            const step = this.steps().find(s => s.id === stepId);
+            if (step) {
+                this.activeStepId.set(stepId);
+                this.stepChange.emit({ step, index: this.steps().findIndex(s => s.id === stepId) });
+            }
         }
     }
     nextStep() {
-        const currentIndex = this.activeStepIndex();
-        if (currentIndex < this.steps().length - 1) {
-            const updatedSteps = [...this.steps()];
-            updatedSteps[currentIndex] = { ...updatedSteps[currentIndex], status: StepStatus.COMPLETE };
-            const nextStep = updatedSteps[currentIndex + 1];
-            updatedSteps[currentIndex + 1] = { ...nextStep, status: StepStatus.ACTIVE };
-            this.steps.set(updatedSteps);
-            this.setActiveStep(nextStep.id);
+        if (this.useService()) {
+            const changeEvent = this.stepsService.nextStep();
+            if (changeEvent) {
+                this.serviceStepChange.emit(changeEvent);
+            }
+        }
+        else {
+            const currentIndex = this.activeStepIndex();
+            if (currentIndex < this.steps().length - 1) {
+                const updatedSteps = [...this.steps()];
+                updatedSteps[currentIndex] = { ...updatedSteps[currentIndex], status: StepStatus.COMPLETE };
+                const nextStep = updatedSteps[currentIndex + 1];
+                updatedSteps[currentIndex + 1] = { ...nextStep, status: StepStatus.ACTIVE };
+                this.steps.set(updatedSteps);
+                this.setActiveStep(nextStep.id);
+            }
         }
     }
     previousStep() {
-        const currentIndex = this.activeStepIndex();
-        if (currentIndex > 0) {
-            const prevStep = this.steps()[currentIndex - 1];
-            this.setActiveStep(prevStep.id);
+        if (this.useService()) {
+            const changeEvent = this.stepsService.previousStep();
+            if (changeEvent) {
+                this.serviceStepChange.emit(changeEvent);
+            }
+        }
+        else {
+            const currentIndex = this.activeStepIndex();
+            if (currentIndex > 0) {
+                const prevStep = this.steps()[currentIndex - 1];
+                this.setActiveStep(prevStep.id);
+            }
         }
     }
     completeStep(stepId) {
-        const stepIndex = this.steps().findIndex(s => s.id === stepId);
-        if (stepIndex !== -1) {
-            const updatedSteps = [...this.steps()];
-            updatedSteps[stepIndex] = { ...updatedSteps[stepIndex], status: StepStatus.COMPLETE };
-            this.steps.set(updatedSteps);
+        if (this.useService()) {
+            this.stepsService.completeStep(stepId);
+        }
+        else {
+            const stepIndex = this.steps().findIndex(s => s.id === stepId);
+            if (stepIndex !== -1) {
+                const updatedSteps = [...this.steps()];
+                updatedSteps[stepIndex] = { ...updatedSteps[stepIndex], status: StepStatus.COMPLETE };
+                this.steps.set(updatedSteps);
+            }
         }
     }
     getStepProgress() {
-        const completedSteps = this.steps().filter(step => step.status === StepStatus.COMPLETE).length;
-        return (completedSteps / this.steps().length) * 100;
+        if (this.useService()) {
+            return this.stepsService.getProgress();
+        }
+        else {
+            const completedSteps = this.steps().filter(step => step.status === StepStatus.COMPLETE).length;
+            return (completedSteps / this.steps().length) * 100;
+        }
     }
     getCustomStyles() {
         const colors = this.customColors();
@@ -10951,11 +11190,11 @@ class GenericStepsComponent {
             .join('; ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericStepsComponent, isStandalone: true, selector: "core-generic-steps", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { stepClick: "stepClick", stepChange: "stepChange" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<nav class=\"c-steps-container\" [class]=\"config().customClass\" [style]=\"getCustomStyles()\">\n  <ol class=\"c-steps\" [class]=\"'c-steps--' + (config().layout || 'horizontal') + ' c-steps--' + (config().size || StepSize.MEDIUM)\">\n    @for (step of steps(); track step.id; let i = $index) {\n      <li class=\"c-steps__step\">\n        <button \n          type=\"button\"\n          class=\"c-steps__item\"\n          [class]=\"getStepClasses(step)\"\n          [disabled]=\"step.disabled\"\n          [title]=\"step.tooltip || step.title\"\n          (click)=\"onStepClick(step, i, $event)\"\n          [attr.data-step-id]=\"step.id\">\n          \n          <span class=\"c-steps__num\" [class]=\"'c-steps__num--' + step.type\" [style]=\"step.id === activeStepId() ? '--step-border: var(--step-active-border); font-weight: 800' : ''\">\n            @if (step.type === StepType.ICON || step.status === StepStatus.COMPLETE) {\n              <i [ngClass]=\"getStepContent(step) | coreIconCompat\"></i>\n            } @else {\n              <strong *ngIf=\"step.id === activeStepId()\">{{ getStepContent(step) }}</strong>\n              <span *ngIf=\"step.id !== activeStepId()\">{{ getStepContent(step) }}</span>\n            }\n          </span>\n          \n          @if (config().showLabels !== false) {\n            <span class=\"c-steps__text\">{{ step.title }}</span>\n          }\n        </button>\n        \n        @if (config().showConnectors !== false && i < steps().length - 1) {\n          <div class=\"c-steps__connector\" [class]=\"getConnectorClasses(i)\"></div>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n\n@if (activeStep()) {\n  <div class=\"c-steps__content\" [attr.data-active-step]=\"activeStepId()\">\n    <ng-content></ng-content>\n  </div>\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericStepsComponent, isStandalone: true, selector: "core-generic-steps", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, useService: { classPropertyName: "useService", publicName: "useService", isSignal: true, isRequired: false, transformFunction: null }, instanceId: { classPropertyName: "instanceId", publicName: "instanceId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepClick: "stepClick", stepChange: "stepChange", serviceStepChange: "serviceStepChange" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<nav class=\"c-steps-container\" [class]=\"config().customClass\" [style]=\"getCustomStyles()\">\n  <ol class=\"c-steps\" [class]=\"'c-steps--' + (config().layout || 'horizontal') + ' c-steps--' + (config().size || StepSize.MEDIUM)\">\n    @for (step of currentSteps(); track step.id; let i = $index) {\n      <li class=\"c-steps__step\">\n        <button \n          type=\"button\"\n          class=\"c-steps__item\"\n          [class]=\"getStepClasses(step)\"\n          [disabled]=\"step.disabled\"\n          [title]=\"step.tooltip || step.title\"\n          (click)=\"onStepClick(step, i, $event)\"\n          [attr.data-step-id]=\"step.id\">\n          \n          <span class=\"c-steps__num\" [class]=\"'c-steps__num--' + step.type\" [style]=\"step.id === currentActiveStepId() ? '--step-border: var(--step-active-border); font-weight: 800' : ''\">\n            @if (step.type === StepType.ICON || step.status === StepStatus.COMPLETE) {\n              <i [ngClass]=\"getStepContent(step) | coreIconCompat\"></i>\n            } @else {\n              <strong *ngIf=\"step.id === currentActiveStepId()\">{{ getStepContent(step) }}</strong>\n              <span *ngIf=\"step.id !== currentActiveStepId()\">{{ getStepContent(step) }}</span>\n            }\n          </span>\n          \n          @if (config().showLabels !== false) {\n            <span class=\"c-steps__text\">{{ step.title }}</span>\n          }\n        </button>\n        \n        @if (config().showConnectors !== false && i < currentSteps().length - 1) {\n          <div class=\"c-steps__connector\" [class]=\"getConnectorClasses(i)\"></div>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n\n@if (activeStep()) {\n  <div class=\"c-steps__content\" [attr.data-active-step]=\"currentActiveStepId()\">\n    <ng-content></ng-content>\n  </div>\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericStepsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-generic-steps', standalone: true, imports: [CommonModule, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "<nav class=\"c-steps-container\" [class]=\"config().customClass\" [style]=\"getCustomStyles()\">\n  <ol class=\"c-steps\" [class]=\"'c-steps--' + (config().layout || 'horizontal') + ' c-steps--' + (config().size || StepSize.MEDIUM)\">\n    @for (step of steps(); track step.id; let i = $index) {\n      <li class=\"c-steps__step\">\n        <button \n          type=\"button\"\n          class=\"c-steps__item\"\n          [class]=\"getStepClasses(step)\"\n          [disabled]=\"step.disabled\"\n          [title]=\"step.tooltip || step.title\"\n          (click)=\"onStepClick(step, i, $event)\"\n          [attr.data-step-id]=\"step.id\">\n          \n          <span class=\"c-steps__num\" [class]=\"'c-steps__num--' + step.type\" [style]=\"step.id === activeStepId() ? '--step-border: var(--step-active-border); font-weight: 800' : ''\">\n            @if (step.type === StepType.ICON || step.status === StepStatus.COMPLETE) {\n              <i [ngClass]=\"getStepContent(step) | coreIconCompat\"></i>\n            } @else {\n              <strong *ngIf=\"step.id === activeStepId()\">{{ getStepContent(step) }}</strong>\n              <span *ngIf=\"step.id !== activeStepId()\">{{ getStepContent(step) }}</span>\n            }\n          </span>\n          \n          @if (config().showLabels !== false) {\n            <span class=\"c-steps__text\">{{ step.title }}</span>\n          }\n        </button>\n        \n        @if (config().showConnectors !== false && i < steps().length - 1) {\n          <div class=\"c-steps__connector\" [class]=\"getConnectorClasses(i)\"></div>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n\n@if (activeStep()) {\n  <div class=\"c-steps__content\" [attr.data-active-step]=\"activeStepId()\">\n    <ng-content></ng-content>\n  </div>\n}" }]
+            args: [{ selector: 'core-generic-steps', standalone: true, imports: [CommonModule, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "<nav class=\"c-steps-container\" [class]=\"config().customClass\" [style]=\"getCustomStyles()\">\n  <ol class=\"c-steps\" [class]=\"'c-steps--' + (config().layout || 'horizontal') + ' c-steps--' + (config().size || StepSize.MEDIUM)\">\n    @for (step of currentSteps(); track step.id; let i = $index) {\n      <li class=\"c-steps__step\">\n        <button \n          type=\"button\"\n          class=\"c-steps__item\"\n          [class]=\"getStepClasses(step)\"\n          [disabled]=\"step.disabled\"\n          [title]=\"step.tooltip || step.title\"\n          (click)=\"onStepClick(step, i, $event)\"\n          [attr.data-step-id]=\"step.id\">\n          \n          <span class=\"c-steps__num\" [class]=\"'c-steps__num--' + step.type\" [style]=\"step.id === currentActiveStepId() ? '--step-border: var(--step-active-border); font-weight: 800' : ''\">\n            @if (step.type === StepType.ICON || step.status === StepStatus.COMPLETE) {\n              <i [ngClass]=\"getStepContent(step) | coreIconCompat\"></i>\n            } @else {\n              <strong *ngIf=\"step.id === currentActiveStepId()\">{{ getStepContent(step) }}</strong>\n              <span *ngIf=\"step.id !== currentActiveStepId()\">{{ getStepContent(step) }}</span>\n            }\n          </span>\n          \n          @if (config().showLabels !== false) {\n            <span class=\"c-steps__text\">{{ step.title }}</span>\n          }\n        </button>\n        \n        @if (config().showConnectors !== false && i < currentSteps().length - 1) {\n          <div class=\"c-steps__connector\" [class]=\"getConnectorClasses(i)\"></div>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n\n@if (activeStep()) {\n  <div class=\"c-steps__content\" [attr.data-active-step]=\"currentActiveStepId()\">\n    <ng-content></ng-content>\n  </div>\n}" }]
         }] });
 
 var RatingSize;
@@ -11726,5 +11965,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActiveFiltersComponent, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, CacheBustingInterceptor, CardComponent, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, DataListComponent, DataListItemComponent, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, GenericButtonComponent, GenericDocumentationComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericStepsComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MainNavComponent, MainNavService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsInterceptor, PermissionsResources, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, ResetPasswordModel, RoleModel, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SmartFieldComponent, StepSize, StepStatus, StepType, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UsersModel, VERSION, equalToValidator, isSameDate, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader };
+export { ActiveFiltersComponent, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, CacheBustingInterceptor, CardComponent, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, DataListComponent, DataListItemComponent, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, GenericButtonComponent, GenericDocumentationComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericStepsComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MainNavComponent, MainNavService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsInterceptor, PermissionsResources, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, ResetPasswordModel, RoleModel, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SmartFieldComponent, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UsersModel, VERSION, equalToValidator, isSameDate, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader };
 //# sourceMappingURL=solcre-org-core-ui.mjs.map