@solcre-org/core-ui 2.15.17 → 2.15.19

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

@@ -2425,6 +2425,7 @@ var HeaderElementType;
     HeaderElementType["FILTER"] = "filter";
     HeaderElementType["CREATE"] = "create";
     HeaderElementType["CUSTOM_TEMPLATE"] = "customTemplate";
+    HeaderElementType["INDIVIDUAL_ACTION"] = "individualAction";
 })(HeaderElementType || (HeaderElementType = {}));
 
 var CountryCode;
@@ -3060,6 +3061,13 @@ class PhoneFieldComponent extends BaseFieldComponent {
         this.phoneControl.valueChanges
             .pipe(takeUntilDestroyed(), debounceTime(300), distinctUntilChanged())
             .subscribe((phoneNumber) => {
+            if (phoneNumber) {
+                const sanitized = phoneNumber.replace(/[^\d\s\-\(\)]/g, '');
+                if (sanitized !== phoneNumber) {
+                    this.phoneControl.setValue(sanitized, { emitEvent: false });
+                    return;
+                }
+            }
             if (!this.isUpdatingValue) {
                 this.updatePhoneValue();
             }
@@ -3320,12 +3328,20 @@ class PhoneFieldComponent extends BaseFieldComponent {
             this.toggleDropdown();
         }
     }
+    onPhoneKeyPress(event) {
+        const charCode = event.which || event.keyCode;
+        const char = String.fromCharCode(charCode);
+        const allowedChars = /[\d\s\-\(\)]/;
+        if (!allowedChars.test(char)) {
+            event.preventDefault();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: PhoneFieldComponent, isStandalone: true, selector: "core-phone-field", host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <span class=\"c-entry-text\" *ngIf=\"field().label\">\n    {{ field().label | translate }}\n    @if (hasRequiredValidators()) {\n      <span class=\"c-required\">*</span>\n    }\n  </span>\n\n  <div class=\"c-entry-phone\" [class.is-disabled]=\"isDisabled()\">\n    <div\n      class=\"c-entry-input c-entry-input--phone c-area-code js-area-code c-phone-field__custom-select\"\n      [class.is-disabled]=\"isDisabled()\"\n      [class.is-readonly]=\"isReadonly()\"\n      (click)=\"onAreaCodeClick($event)\"\n      (keydown.enter)=\"onAreaCodeKeydown($any($event))\"\n      (keydown.space)=\"onAreaCodeKeydown($any($event))\"\n      role=\"button\"\n      [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n      [attr.aria-expanded]=\"isDropdownOpen()\"\n      [attr.aria-haspopup]=\"true\"\n    >\n      <input type=\"hidden\" class=\"js-area-value\" [value]=\"selectedCountry()?.phone || ''\" />\n      <div class=\"c-area-code__selected js-area-code-selected\">\n        @if (phoneConfig().showFlags && selectedCountry()?.flag) {\n          <img\n            class=\"c-area-code__flag\"\n            [src]=\"getFlagUrl(selectedCountry()!)\"\n            [alt]=\"selectedCountry()?.name || ''\"\n            (error)=\"onFlagError($event)\"\n          />\n        }\n        <span class=\"c-area-code__num\">{{ getSelectedCountryDisplay() }}</span>\n        <span class=\"c-area-code__arrow icon-arrow-down\"></span>\n      </div>\n      <div class=\"c-area-code__options js-area-code-options\" [class.show]=\"isDropdownOpen()\">\n        @for (country of availableCountries(); track country.code + '-' + country.name) {\n          <div class=\"c-area-code__option\" (click)=\"selectCountry(country, $event)\">\n            @if (phoneConfig().showFlags && country.flag) {\n              <img\n                class=\"c-area-code__flag\"\n                [src]=\"getFlagUrl(country)\"\n                [alt]=\"country.name\"\n                (error)=\"onFlagError($event)\"\n              />\n            }\n            <span>{{ getCountryLabel(country) }}</span>\n          </div>\n        }\n      </div>\n    </div>\n\n    <span\n      class=\"c-entry-input\"\n      [class.is-readonly]=\"isReadonly() || field().blocked\"\n      [class.is-disabled]=\"isDisabled()\"\n      [class.is-invalid]=\"hasError()\"\n    >\n      <input\n        type=\"tel\"\n        [id]=\"field().key.toString()\"\n        [name]=\"field().key.toString()\"\n        [formControl]=\"phoneControl\"\n        [placeholder]=\"getPhonePlaceholder() | translate\"\n        [readonly]=\"isReadonly() || field().blocked\"\n        [class.has-error]=\"hasError()\"\n        [class.is-invalid]=\"hasError()\"\n        inputmode=\"tel\"\n        autocomplete=\"tel\"\n        (blur)=\"onBlurInput()\"\n        (keydown.enter)=\"onEnterInput($any($event))\"\n      />\n    </span>\n  </div>\n\n  <core-field-errors [errors]=\"errors()\"></core-field-errors>\n</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: PhoneFieldComponent, isStandalone: true, selector: "core-phone-field", host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <span class=\"c-entry-text\" *ngIf=\"field().label\">\n    {{ field().label | translate }}\n    @if (hasRequiredValidators()) {\n      <span class=\"c-required\">*</span>\n    }\n  </span>\n\n  <div class=\"c-entry-phone\" [class.is-disabled]=\"isDisabled()\">\n    <div\n      class=\"c-entry-input c-entry-input--phone c-area-code js-area-code c-phone-field__custom-select\"\n      [class.is-disabled]=\"isDisabled()\"\n      [class.is-readonly]=\"isReadonly()\"\n      (click)=\"onAreaCodeClick($event)\"\n      (keydown.enter)=\"onAreaCodeKeydown($any($event))\"\n      (keydown.space)=\"onAreaCodeKeydown($any($event))\"\n      role=\"button\"\n      [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n      [attr.aria-expanded]=\"isDropdownOpen()\"\n      [attr.aria-haspopup]=\"true\"\n    >\n      <input type=\"hidden\" class=\"js-area-value\" [value]=\"selectedCountry()?.phone || ''\" />\n      <div class=\"c-area-code__selected js-area-code-selected\">\n        @if (phoneConfig().showFlags && selectedCountry()?.flag) {\n          <img\n            class=\"c-area-code__flag\"\n            [src]=\"getFlagUrl(selectedCountry()!)\"\n            [alt]=\"selectedCountry()?.name || ''\"\n            (error)=\"onFlagError($event)\"\n          />\n        }\n        <span class=\"c-area-code__num\">{{ getSelectedCountryDisplay() }}</span>\n        <span class=\"c-area-code__arrow icon-arrow-down\"></span>\n      </div>\n      <div class=\"c-area-code__options js-area-code-options\" [class.show]=\"isDropdownOpen()\">\n        @for (country of availableCountries(); track country.code + '-' + country.name) {\n          <div class=\"c-area-code__option\" (click)=\"selectCountry(country, $event)\">\n            @if (phoneConfig().showFlags && country.flag) {\n              <img\n                class=\"c-area-code__flag\"\n                [src]=\"getFlagUrl(country)\"\n                [alt]=\"country.name\"\n                (error)=\"onFlagError($event)\"\n              />\n            }\n            <span>{{ getCountryLabel(country) }}</span>\n          </div>\n        }\n      </div>\n    </div>\n\n    <span\n      class=\"c-entry-input\"\n      [class.is-readonly]=\"isReadonly() || field().blocked\"\n      [class.is-disabled]=\"isDisabled()\"\n      [class.is-invalid]=\"hasError()\"\n    >\n      <input\n        type=\"tel\"\n        [id]=\"field().key.toString()\"\n        [name]=\"field().key.toString()\"\n        [formControl]=\"phoneControl\"\n        [placeholder]=\"getPhonePlaceholder() | translate\"\n        [readonly]=\"isReadonly() || field().blocked\"\n        [class.has-error]=\"hasError()\"\n        [class.is-invalid]=\"hasError()\"\n        inputmode=\"numeric\"\n        autocomplete=\"tel\"\n        (blur)=\"onBlurInput()\"\n        (keydown.enter)=\"onEnterInput($any($event))\"\n        (keypress)=\"onPhoneKeyPress($event)\"\n      />\n    </span>\n  </div>\n\n  <core-field-errors [errors]=\"errors()\"></core-field-errors>\n</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PhoneFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-phone-field', standalone: true, imports: [CommonModule, ReactiveFormsModule, TranslateModule, FieldErrorsComponent], template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <span class=\"c-entry-text\" *ngIf=\"field().label\">\n    {{ field().label | translate }}\n    @if (hasRequiredValidators()) {\n      <span class=\"c-required\">*</span>\n    }\n  </span>\n\n  <div class=\"c-entry-phone\" [class.is-disabled]=\"isDisabled()\">\n    <div\n      class=\"c-entry-input c-entry-input--phone c-area-code js-area-code c-phone-field__custom-select\"\n      [class.is-disabled]=\"isDisabled()\"\n      [class.is-readonly]=\"isReadonly()\"\n      (click)=\"onAreaCodeClick($event)\"\n      (keydown.enter)=\"onAreaCodeKeydown($any($event))\"\n      (keydown.space)=\"onAreaCodeKeydown($any($event))\"\n      role=\"button\"\n      [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n      [attr.aria-expanded]=\"isDropdownOpen()\"\n      [attr.aria-haspopup]=\"true\"\n    >\n      <input type=\"hidden\" class=\"js-area-value\" [value]=\"selectedCountry()?.phone || ''\" />\n      <div class=\"c-area-code__selected js-area-code-selected\">\n        @if (phoneConfig().showFlags && selectedCountry()?.flag) {\n          <img\n            class=\"c-area-code__flag\"\n            [src]=\"getFlagUrl(selectedCountry()!)\"\n            [alt]=\"selectedCountry()?.name || ''\"\n            (error)=\"onFlagError($event)\"\n          />\n        }\n        <span class=\"c-area-code__num\">{{ getSelectedCountryDisplay() }}</span>\n        <span class=\"c-area-code__arrow icon-arrow-down\"></span>\n      </div>\n      <div class=\"c-area-code__options js-area-code-options\" [class.show]=\"isDropdownOpen()\">\n        @for (country of availableCountries(); track country.code + '-' + country.name) {\n          <div class=\"c-area-code__option\" (click)=\"selectCountry(country, $event)\">\n            @if (phoneConfig().showFlags && country.flag) {\n              <img\n                class=\"c-area-code__flag\"\n                [src]=\"getFlagUrl(country)\"\n                [alt]=\"country.name\"\n                (error)=\"onFlagError($event)\"\n              />\n            }\n            <span>{{ getCountryLabel(country) }}</span>\n          </div>\n        }\n      </div>\n    </div>\n\n    <span\n      class=\"c-entry-input\"\n      [class.is-readonly]=\"isReadonly() || field().blocked\"\n      [class.is-disabled]=\"isDisabled()\"\n      [class.is-invalid]=\"hasError()\"\n    >\n      <input\n        type=\"tel\"\n        [id]=\"field().key.toString()\"\n        [name]=\"field().key.toString()\"\n        [formControl]=\"phoneControl\"\n        [placeholder]=\"getPhonePlaceholder() | translate\"\n        [readonly]=\"isReadonly() || field().blocked\"\n        [class.has-error]=\"hasError()\"\n        [class.is-invalid]=\"hasError()\"\n        inputmode=\"tel\"\n        autocomplete=\"tel\"\n        (blur)=\"onBlurInput()\"\n        (keydown.enter)=\"onEnterInput($any($event))\"\n      />\n    </span>\n  </div>\n\n  <core-field-errors [errors]=\"errors()\"></core-field-errors>\n</label>\n" }]
+            args: [{ selector: 'core-phone-field', standalone: true, imports: [CommonModule, ReactiveFormsModule, TranslateModule, FieldErrorsComponent], template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <span class=\"c-entry-text\" *ngIf=\"field().label\">\n    {{ field().label | translate }}\n    @if (hasRequiredValidators()) {\n      <span class=\"c-required\">*</span>\n    }\n  </span>\n\n  <div class=\"c-entry-phone\" [class.is-disabled]=\"isDisabled()\">\n    <div\n      class=\"c-entry-input c-entry-input--phone c-area-code js-area-code c-phone-field__custom-select\"\n      [class.is-disabled]=\"isDisabled()\"\n      [class.is-readonly]=\"isReadonly()\"\n      (click)=\"onAreaCodeClick($event)\"\n      (keydown.enter)=\"onAreaCodeKeydown($any($event))\"\n      (keydown.space)=\"onAreaCodeKeydown($any($event))\"\n      role=\"button\"\n      [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n      [attr.aria-expanded]=\"isDropdownOpen()\"\n      [attr.aria-haspopup]=\"true\"\n    >\n      <input type=\"hidden\" class=\"js-area-value\" [value]=\"selectedCountry()?.phone || ''\" />\n      <div class=\"c-area-code__selected js-area-code-selected\">\n        @if (phoneConfig().showFlags && selectedCountry()?.flag) {\n          <img\n            class=\"c-area-code__flag\"\n            [src]=\"getFlagUrl(selectedCountry()!)\"\n            [alt]=\"selectedCountry()?.name || ''\"\n            (error)=\"onFlagError($event)\"\n          />\n        }\n        <span class=\"c-area-code__num\">{{ getSelectedCountryDisplay() }}</span>\n        <span class=\"c-area-code__arrow icon-arrow-down\"></span>\n      </div>\n      <div class=\"c-area-code__options js-area-code-options\" [class.show]=\"isDropdownOpen()\">\n        @for (country of availableCountries(); track country.code + '-' + country.name) {\n          <div class=\"c-area-code__option\" (click)=\"selectCountry(country, $event)\">\n            @if (phoneConfig().showFlags && country.flag) {\n              <img\n                class=\"c-area-code__flag\"\n                [src]=\"getFlagUrl(country)\"\n                [alt]=\"country.name\"\n                (error)=\"onFlagError($event)\"\n              />\n            }\n            <span>{{ getCountryLabel(country) }}</span>\n          </div>\n        }\n      </div>\n    </div>\n\n    <span\n      class=\"c-entry-input\"\n      [class.is-readonly]=\"isReadonly() || field().blocked\"\n      [class.is-disabled]=\"isDisabled()\"\n      [class.is-invalid]=\"hasError()\"\n    >\n      <input\n        type=\"tel\"\n        [id]=\"field().key.toString()\"\n        [name]=\"field().key.toString()\"\n        [formControl]=\"phoneControl\"\n        [placeholder]=\"getPhonePlaceholder() | translate\"\n        [readonly]=\"isReadonly() || field().blocked\"\n        [class.has-error]=\"hasError()\"\n        [class.is-invalid]=\"hasError()\"\n        inputmode=\"numeric\"\n        autocomplete=\"tel\"\n        (blur)=\"onBlurInput()\"\n        (keydown.enter)=\"onEnterInput($any($event))\"\n        (keypress)=\"onPhoneKeyPress($event)\"\n      />\n    </span>\n  </div>\n\n  <core-field-errors [errors]=\"errors()\"></core-field-errors>\n</label>\n" }]
         }], ctorParameters: () => [], propDecorators: { onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -10827,8 +10843,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 }]
         }] });
 
+class MobileResolutionService {
+    DEFAULT_MOBILE_BREAKPOINT = 768;
+    DEFAULT_CHECK_INTERVAL = 200;
+    _isMobile = signal(false);
+    _screenWidth = signal(0);
+    _breakpoint = signal(this.DEFAULT_MOBILE_BREAKPOINT);
+    _showHeaderBreakpoint = signal(null);
+    _isConfigured = signal(false);
+    resizeTimeout;
+    isMobile = this._isMobile.asReadonly();
+    screenWidth = this._screenWidth.asReadonly();
+    breakpoint = this._breakpoint.asReadonly();
+    showHeaderBreakpoint = this._showHeaderBreakpoint.asReadonly();
+    isConfigured = this._isConfigured.asReadonly();
+    isXSmall = computed(() => this._screenWidth() < 576);
+    isSmall = computed(() => this._screenWidth() >= 576 && this._screenWidth() < 768);
+    isMedium = computed(() => this._screenWidth() >= 768 && this._screenWidth() < 992);
+    isLarge = computed(() => this._screenWidth() >= 992 && this._screenWidth() < 1200);
+    isXLarge = computed(() => this._screenWidth() >= 1200);
+    shouldShowMobileHeader = computed(() => {
+        const headerBreakpoint = this._showHeaderBreakpoint();
+        const effectiveBreakpoint = headerBreakpoint !== null ? headerBreakpoint : this._breakpoint();
+        return this._screenWidth() <= effectiveBreakpoint;
+    });
+    isXs = this.isXSmall;
+    isSm = this.isSmall;
+    isMd = this.isMedium;
+    isLg = this.isLarge;
+    isXl = this.isXLarge;
+    isMobileDevice = computed(() => this.isXSmall() || this.isSmall());
+    isTablet = this.isMedium;
+    isDesktop = computed(() => this.isLarge() || this.isXLarge());
+    constructor() {
+        if (typeof window !== 'undefined') {
+            this.initializeWithDefaults();
+        }
+    }
+    configure(config) {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const breakpoint = config?.maxWidth || this.DEFAULT_MOBILE_BREAKPOINT;
+        const checkInterval = config?.checkInterval || this.DEFAULT_CHECK_INTERVAL;
+        this._breakpoint.set(breakpoint);
+        if (config?.showHeaderMaxWidth !== undefined) {
+            this._showHeaderBreakpoint.set(config.showHeaderMaxWidth);
+        }
+        this._isConfigured.set(true);
+        this.updateScreenSize();
+        this.setupResizeListener(checkInterval);
+    }
+    initializeWithDefaults() {
+        if (this._isConfigured()) {
+            return;
+        }
+        this.configure({
+            maxWidth: this.DEFAULT_MOBILE_BREAKPOINT,
+            checkInterval: this.DEFAULT_CHECK_INTERVAL
+        });
+    }
+    updateScreenSize() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const width = window.innerWidth;
+        this._screenWidth.set(width);
+        this._isMobile.set(width <= this._breakpoint());
+    }
+    setupResizeListener(interval) {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        window.removeEventListener('resize', this.handleResize);
+        window.addEventListener('resize', this.handleResize.bind(this));
+    }
+    handleResize() {
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+        }
+        this.resizeTimeout = setTimeout(() => {
+            this.updateScreenSize();
+        }, this.DEFAULT_CHECK_INTERVAL);
+    }
+    isWidthLessThan(width) {
+        return this._screenWidth() <= width;
+    }
+    isWidthGreaterThan(width) {
+        return this._screenWidth() > width;
+    }
+    isWidthBetween(min, max) {
+        const width = this._screenWidth();
+        return width >= min && width <= max;
+    }
+    getCurrentBreakpoint() {
+        if (this.isXSmall())
+            return 'xs';
+        if (this.isSmall())
+            return 'sm';
+        if (this.isMedium())
+            return 'md';
+        if (this.isLarge())
+            return 'lg';
+        return 'xl';
+    }
+    destroy() {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.handleResize);
+        }
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MobileResolutionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MobileResolutionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MobileResolutionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class HeaderService {
     translateService = inject(TranslateService);
+    mobileResolutionService = inject(MobileResolutionService);
     title = signal('');
     text = signal('');
     globalActions = signal([]);
@@ -10952,8 +11091,12 @@ class HeaderService {
             this.showDefaultCreate.set(config.showDefaultCreate);
         if (config.customActions !== undefined) {
             this.customActions.set(config.customActions);
+            const isMobile = this.mobileResolutionService.isMobile();
             const headerActions = config.customActions
                 .filter(action => {
+                if (!isMobile) {
+                    return true;
+                }
                 if (!action.mobileConfig)
                     return false;
                 return action.mobileConfig.showInHeader === true;
@@ -10973,8 +11116,9 @@ class HeaderService {
             }));
             this.headerActions.set(headerActions);
         }
-        if (config.globalActions !== undefined)
+        if (config.globalActions !== undefined) {
             this.globalActions.set(config.globalActions);
+        }
         if (config.customFilters !== undefined)
             this.customFilters.set(config.customFilters);
         if (config.hasCreatePermission !== undefined)
@@ -11116,13 +11260,25 @@ class HeaderService {
             ];
             return defaultElements;
         }
-        const customElements = order.elements
-            .filter(element => element.visible !== false)
-            .sort((a, b) => (a.position || 0) - (b.position || 0));
-        return customElements;
+        const expandedElements = [];
+        for (const element of order.elements) {
+            if (element.visible === false)
+                continue;
+            if (element.type !== HeaderElementType.INDIVIDUAL_ACTION) {
+                expandedElements.push(element);
+                continue;
+            }
+            if (element.actionId !== undefined && element.actionType) {
+                expandedElements.push(element);
+            }
+        }
+        return expandedElements.sort((a, b) => (a.position || 0) - (b.position || 0));
     }
-    isElementVisible(elementType) {
+    isElementVisible(elementType, element) {
         const order = this.headerOrder();
+        if (elementType === HeaderElementType.INDIVIDUAL_ACTION && element) {
+            return this.isIndividualActionVisible(element);
+        }
         if (!order || !order.useCustomOrder || !order.elements) {
             switch (elementType) {
                 case HeaderElementType.GLOBAL_ACTIONS:
@@ -11140,8 +11296,8 @@ class HeaderService {
                     return false;
             }
         }
-        const element = order.elements.find(el => el.type === elementType);
-        if (!element || element.visible === false) {
+        const configElement = order.elements.find(el => el.type === elementType);
+        if (!configElement || configElement.visible === false) {
             return false;
         }
         switch (elementType) {
@@ -11159,6 +11315,58 @@ class HeaderService {
                 return false;
         }
     }
+    isIndividualActionVisible(element) {
+        if (!element.actionType || element.actionId === undefined) {
+            return false;
+        }
+        const actionId = element.actionId;
+        switch (element.actionType) {
+            case 'global':
+                const globalAction = this.findGlobalAction(actionId);
+                return globalAction !== null;
+            case 'custom':
+                const customAction = this.customActions().find((action, index) => action.id === actionId || index === actionId);
+                return customAction !== undefined;
+            case 'switch':
+                const switchAction = this.findGlobalAction(actionId);
+                return switchAction !== null && switchAction.isSwitch === true;
+            default:
+                return false;
+        }
+    }
+    findGlobalAction(actionId) {
+        const actions = this.globalActions();
+        // Buscar por índice si es número
+        if (typeof actionId === 'number') {
+            return actions[actionId] || null;
+        }
+        // Buscar por label o propiedad
+        const found = actions.find(action => action.label === actionId ||
+            action.icon === actionId ||
+            action.id === actionId);
+        return found || null;
+    }
+    getIndividualAction(element) {
+        if (element.type !== HeaderElementType.INDIVIDUAL_ACTION) {
+            return null;
+        }
+        if (!element.actionType || element.actionId === undefined) {
+            return null;
+        }
+        switch (element.actionType) {
+            case 'global':
+            case 'switch':
+                return this.findGlobalAction(element.actionId);
+            case 'custom':
+                const customActions = this.customActions();
+                if (typeof element.actionId === 'number') {
+                    return customActions[element.actionId] || null;
+                }
+                return customActions.find(action => action.id === element.actionId) || null;
+            default:
+                return null;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HeaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HeaderService, providedIn: 'root' });
 }
@@ -11827,157 +12035,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             args: [{ selector: 'core-generic-switch', standalone: true, imports: [CommonModule, IconCompatPipe, TranslateModule], template: "<div class=\"c-switch\" [attr.aria-label]=\"ariaLabel()\" role=\"group\">\n  @for (option of options(); track option.value) {\n  <button\n    class=\"c-icon-btn\"\n    [class]=\"option.icon || '' | coreIconCompat\"\n    [class.is-active]=\"isSelected(option.value)\"\n    [class.is-disabled]=\"option.disabled\"\n    [attr.title]=\"option.tooltip || option.label || '' | translate\"\n    [attr.aria-pressed]=\"isSelected(option.value)\"\n    [attr.aria-disabled]=\"option.disabled\"\n    [attr.data-value]=\"option.value\"\n    (click)=\"onOptionClick(option)\"\n  >\n    @if (option.label && !option.icon) {\n    {{ option.label | translate }}\n    }\n  </button>\n  }\n</div>" }]
         }] });
 
-class MobileResolutionService {
-    DEFAULT_MOBILE_BREAKPOINT = 768;
-    DEFAULT_CHECK_INTERVAL = 200;
-    _isMobile = signal(false);
-    _screenWidth = signal(0);
-    _breakpoint = signal(this.DEFAULT_MOBILE_BREAKPOINT);
-    _showHeaderBreakpoint = signal(null);
-    _isConfigured = signal(false);
-    resizeTimeout;
-    isMobile = this._isMobile.asReadonly();
-    screenWidth = this._screenWidth.asReadonly();
-    breakpoint = this._breakpoint.asReadonly();
-    showHeaderBreakpoint = this._showHeaderBreakpoint.asReadonly();
-    isConfigured = this._isConfigured.asReadonly();
-    isXSmall = computed(() => this._screenWidth() < 576);
-    isSmall = computed(() => this._screenWidth() >= 576 && this._screenWidth() < 768);
-    isMedium = computed(() => this._screenWidth() >= 768 && this._screenWidth() < 992);
-    isLarge = computed(() => this._screenWidth() >= 992 && this._screenWidth() < 1200);
-    isXLarge = computed(() => this._screenWidth() >= 1200);
-    shouldShowMobileHeader = computed(() => {
-        const headerBreakpoint = this._showHeaderBreakpoint();
-        const effectiveBreakpoint = headerBreakpoint !== null ? headerBreakpoint : this._breakpoint();
-        return this._screenWidth() <= effectiveBreakpoint;
-    });
-    isXs = this.isXSmall;
-    isSm = this.isSmall;
-    isMd = this.isMedium;
-    isLg = this.isLarge;
-    isXl = this.isXLarge;
-    isMobileDevice = computed(() => this.isXSmall() || this.isSmall());
-    isTablet = this.isMedium;
-    isDesktop = computed(() => this.isLarge() || this.isXLarge());
-    constructor() {
-        if (typeof window !== 'undefined') {
-            this.initializeWithDefaults();
-        }
-    }
-    configure(config) {
-        if (typeof window === 'undefined') {
-            return;
-        }
-        const breakpoint = config?.maxWidth || this.DEFAULT_MOBILE_BREAKPOINT;
-        const checkInterval = config?.checkInterval || this.DEFAULT_CHECK_INTERVAL;
-        this._breakpoint.set(breakpoint);
-        if (config?.showHeaderMaxWidth !== undefined) {
-            this._showHeaderBreakpoint.set(config.showHeaderMaxWidth);
-        }
-        this._isConfigured.set(true);
-        this.updateScreenSize();
-        this.setupResizeListener(checkInterval);
+class FixedActionsMobileModalService {
+    _isVisible = signal(false);
+    _modalData = signal(null);
+    isVisible = this._isVisible.asReadonly();
+    modalData = this._modalData.asReadonly();
+    open(data) {
+        this._modalData.set(data);
+        this._isVisible.set(true);
     }
-    initializeWithDefaults() {
-        if (this._isConfigured()) {
-            return;
-        }
-        this.configure({
-            maxWidth: this.DEFAULT_MOBILE_BREAKPOINT,
-            checkInterval: this.DEFAULT_CHECK_INTERVAL
-        });
+    close() {
+        this._isVisible.set(false);
+        setTimeout(() => {
+            if (!this._isVisible()) {
+                this._modalData.set(null);
+            }
+        }, 300);
     }
-    updateScreenSize() {
-        if (typeof window === 'undefined') {
-            return;
+    executeAction(action, row) {
+        if (action.callback) {
+            action.callback(row);
         }
-        const width = window.innerWidth;
-        this._screenWidth.set(width);
-        this._isMobile.set(width <= this._breakpoint());
-    }
-    setupResizeListener(interval) {
-        if (typeof window === 'undefined') {
-            return;
+        else if (action.customAction?.callback) {
+            action.customAction.callback(row);
         }
-        window.removeEventListener('resize', this.handleResize);
-        window.addEventListener('resize', this.handleResize.bind(this));
-    }
-    handleResize() {
-        if (this.resizeTimeout) {
-            clearTimeout(this.resizeTimeout);
+        else if (action.globalAction?.callback) {
+            const selectedRows = this._modalData()?.selectedRows || [];
+            action.globalAction.callback(selectedRows);
         }
-        this.resizeTimeout = setTimeout(() => {
-            this.updateScreenSize();
-        }, this.DEFAULT_CHECK_INTERVAL);
-    }
-    isWidthLessThan(width) {
-        return this._screenWidth() <= width;
-    }
-    isWidthGreaterThan(width) {
-        return this._screenWidth() > width;
-    }
-    isWidthBetween(min, max) {
-        const width = this._screenWidth();
-        return width >= min && width <= max;
-    }
-    getCurrentBreakpoint() {
-        if (this.isXSmall())
-            return 'xs';
-        if (this.isSmall())
-            return 'sm';
-        if (this.isMedium())
-            return 'md';
-        if (this.isLarge())
-            return 'lg';
-        return 'xl';
-    }
-    destroy() {
-        if (typeof window !== 'undefined') {
-            window.removeEventListener('resize', this.handleResize);
-        }
-        if (this.resizeTimeout) {
-            clearTimeout(this.resizeTimeout);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MobileResolutionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MobileResolutionService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MobileResolutionService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class FixedActionsMobileModalService {
-    _isVisible = signal(false);
-    _modalData = signal(null);
-    isVisible = this._isVisible.asReadonly();
-    modalData = this._modalData.asReadonly();
-    open(data) {
-        this._modalData.set(data);
-        this._isVisible.set(true);
-    }
-    close() {
-        this._isVisible.set(false);
-        setTimeout(() => {
-            if (!this._isVisible()) {
-                this._modalData.set(null);
-            }
-        }, 300);
-    }
-    executeAction(action, row) {
-        if (action.callback) {
-            action.callback(row);
-        }
-        else if (action.customAction?.callback) {
-            action.customAction.callback(row);
-        }
-        else if (action.globalAction?.callback) {
-            const selectedRows = this._modalData()?.selectedRows || [];
-            action.globalAction.callback(selectedRows);
-        }
-        this.close();
+        this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FixedActionsMobileModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FixedActionsMobileModalService, providedIn: 'root' });
@@ -12041,6 +12127,12 @@ class FixedActionsMobileModalComponent {
         return false;
     }
     getActionLabel(action) {
+        if (action.customAction?.mobileConfig?.mobileLabel) {
+            return action.customAction.mobileConfig.mobileLabel;
+        }
+        if (action.globalAction?.mobileConfig?.mobileLabel) {
+            return action.globalAction.mobileConfig.mobileLabel;
+        }
         return action.label || action.customAction?.label || action.globalAction?.label || '';
     }
     getActionIcon(action) {
@@ -13540,12 +13632,14 @@ class GenericTableComponent {
             showCreateButton: this.showCreateButton(),
             hasCreatePermission: this.hasAction(TableAction.CREATE),
         });
+        const existingCustomActions = this.headerService.getCustomActions()();
         this.headerService.setHeaderConfig({
             title: this.listTitle(),
             globalActions: this.globalActions(),
             showDefaultFilter: this.showFilter(),
             showDefaultCreate: this.showCreateButton(),
             customFilters: this.customFilters(),
+            customActions: existingCustomActions,
             headerOrder: this.headerOrder(),
             filterButtonConfig: this.filterButtonConfig(),
             createButtonConfig: this.createButtonConfig(),
@@ -15564,8 +15658,21 @@ class HeaderComponent {
     getHeaderText() {
         return this.headerService.getText()();
     }
+    getIndividualAction(element) {
+        return this.headerService.getIndividualAction(element);
+    }
+    isIndividualActionSwitch(action) {
+        return action?.isSwitch === true && action?.switchOptions;
+    }
+    hasIndividualActionPermission(action) {
+        if (!action)
+            return false;
+        if (!action.requiredPermission)
+            return true;
+        return this.permissionService.hasPermission(action.requiredPermission.resource, action.requiredPermission.action);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: HeaderComponent, isStandalone: true, selector: "core-header", outputs: { filterRequested: "filterRequested", createRequested: "createRequested", globalActionTriggered: "globalActionTriggered" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (headerService.getIsVisible()()) {\n  @if(!headerService.getHeaderOutside()()) {\n  <div class=\"c-header\">\n    <div class=\"c-header__row\">\n\n      <div class=\"c-header__group\">\n\n        <h2 class=\"c-header__heading u-heading\">{{ getHeaderTitle() }}</h2>\n\n      </div>\n\n      <div class=\"c-header__group u-flex\">\n\n        @for (element of headerService.getOrderedElements(); track element.type) {\n          @if (headerService.isElementVisible(element.type)) {\n            \n            @switch (element.type) {\n              @case (HeaderElementType.GLOBAL_ACTIONS) {\n                @for (globalAction of headerService.getGlobalActions()(); track globalAction.label || $index) {\n                  @if (hasPermission(globalAction)) {\n                    @if (globalAction.isSwitch && globalAction.switchOptions) {\n                      <core-generic-switch\n                        [options]=\"globalAction.switchOptions\"\n                        [selectedValue]=\"globalAction.switchSelectedValue\"\n                        [ariaLabel]=\"globalAction.switchAriaLabel || globalAction.label || 'Switch options'\"\n                        (valueChange)=\"onGlobalSwitchChange($event, globalAction)\">\n                      </core-generic-switch>\n                    } @else {\n                      <core-generic-button \n                        [config]=\"getGlobalActionButtonConfig(globalAction)\"\n                        (buttonClick)=\"onGlobalButtonClick($event, globalAction)\">\n                      </core-generic-button>\n                    }\n                  }\n                }\n              }\n              \n              @case (HeaderElementType.CUSTOM_ACTIONS) {\n                @for (customAction of headerService.getCustomActions()(); track customAction.id) {\n                  @if (isCustomActionVisible(customAction)) {\n                    <core-generic-button \n                      [config]=\"getCustomActionButtonConfig(customAction)\"\n                      (buttonClick)=\"onCustomButtonClick($event, customAction)\">\n                    </core-generic-button>\n                  }\n                }\n              }\n              \n              @case (HeaderElementType.FILTER) {\n                <core-generic-button \n                  [config]=\"getFilterButtonConfig()\"\n                  (buttonClick)=\"onFilterButtonClick()\">\n                </core-generic-button>\n              }\n              \n              @case (HeaderElementType.CREATE) {\n                <core-generic-button \n                  [config]=\"getCreateButtonConfig()\"\n                  (buttonClick)=\"onCreateButtonClick()\">\n                </core-generic-button>\n              }\n            }\n            \n          }\n        }\n\n      </div>\n\n    </div>\n\n    <p class=\"c-header__text u-text\" *ngIf=\"getHeaderText()\">\n        {{ getHeaderText() }}\n    </p>\n\n    @if (\n      headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && \n      headerService.getCustomTemplate()()\n    ) {\n      <ng-container [ngTemplateOutlet]=\"headerService.getCustomTemplate()()\"></ng-container>\n    }\n  </div>\n  } @else {\n    @if(\n      headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && \n      headerService.getCustomTemplate()()\n    ) {\n      <ng-container [ngTemplateOutlet]=\"headerService.getCustomTemplate()()\"></ng-container>\n    }\n  }\n}", styles: [":root{--header-bg: #ffffff;--header-text: #333;--header-shadow: rgba(0, 0, 0, .1);--logout-btn-color: #e74c3c;--logout-btn-hover: #c0392b;--theme-btn-color: #666;--theme-btn-hover: #007bff}.dark-mode{--header-bg: #1a1a1a;--header-text: #e0e0e0;--header-shadow: rgba(255, 255, 255, .1);--logout-btn-color: #ff6b6b;--logout-btn-hover: #ff8787;--theme-btn-color: #bbb;--theme-btn-hover: #4da8ff}.header{background-color:var(--header-bg);box-shadow:0 2px 4px var(--header-shadow);padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.header .user-info{font-weight:500;color:var(--header-text)}.header .header-actions{display:flex;align-items:center;gap:15px}.header .theme-toggle-btn{background:none;border:none;color:var(--theme-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .theme-toggle-btn:hover{color:var(--theme-btn-hover)}.header .logout-btn{background:none;border:none;color:var(--logout-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .logout-btn i{margin-right:5px}.header .logout-btn:hover{color:var(--logout-btn-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "component", type: GenericSwitchComponent, selector: "core-generic-switch", inputs: ["options", "selectedValue", "ariaLabel"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: HeaderComponent, isStandalone: true, selector: "core-header", outputs: { filterRequested: "filterRequested", createRequested: "createRequested", globalActionTriggered: "globalActionTriggered" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (headerService.getIsVisible()()) {\n  @if(!headerService.getHeaderOutside()()) {\n  <div class=\"c-header\">\n    <div class=\"c-header__row\">\n\n      <div class=\"c-header__group\">\n\n        <h2 class=\"c-header__heading u-heading\">{{ getHeaderTitle() }}</h2>\n\n      </div>\n\n      <div class=\"c-header__group u-flex\">\n\n        @for (element of headerService.getOrderedElements(); track element.type + '-' + (element.actionId || $index)) {\n          @if (headerService.isElementVisible(element.type, element)) {\n            \n            @switch (element.type) {\n              @case (HeaderElementType.GLOBAL_ACTIONS) {\n                @for (globalAction of headerService.getGlobalActions()(); track globalAction.label || $index) {\n                  @if (hasPermission(globalAction)) {\n                    @if (globalAction.isSwitch && globalAction.switchOptions) {\n                      <core-generic-switch\n                        [options]=\"globalAction.switchOptions\"\n                        [selectedValue]=\"globalAction.switchSelectedValue\"\n                        [ariaLabel]=\"globalAction.switchAriaLabel || globalAction.label || 'Switch options'\"\n                        (valueChange)=\"onGlobalSwitchChange($event, globalAction)\">\n                      </core-generic-switch>\n                    } @else {\n                      <core-generic-button \n                        [config]=\"getGlobalActionButtonConfig(globalAction)\"\n                        (buttonClick)=\"onGlobalButtonClick($event, globalAction)\">\n                      </core-generic-button>\n                    }\n                  }\n                }\n              }\n              \n              @case (HeaderElementType.CUSTOM_ACTIONS) {\n                @for (customAction of headerService.getCustomActions()(); track customAction.id) {\n                  @if (isCustomActionVisible(customAction)) {\n                    <core-generic-button \n                      [config]=\"getCustomActionButtonConfig(customAction)\"\n                      (buttonClick)=\"onCustomButtonClick($event, customAction)\">\n                    </core-generic-button>\n                  }\n                }\n              }\n              \n              @case (HeaderElementType.FILTER) {\n                <core-generic-button \n                  [config]=\"getFilterButtonConfig()\"\n                  (buttonClick)=\"onFilterButtonClick()\">\n                </core-generic-button>\n              }\n              \n              @case (HeaderElementType.CREATE) {\n                <core-generic-button \n                  [config]=\"getCreateButtonConfig()\"\n                  (buttonClick)=\"onCreateButtonClick()\">\n                </core-generic-button>\n              }\n\n              @case (HeaderElementType.INDIVIDUAL_ACTION) {\n                @if (getIndividualAction(element); as action) {\n                  @if (hasIndividualActionPermission(action)) {\n                    @if (isIndividualActionSwitch(action)) {\n                      <core-generic-switch\n                        [options]=\"action.switchOptions\"\n                        [selectedValue]=\"action.switchSelectedValue\"\n                        [ariaLabel]=\"action.switchAriaLabel || action.label || 'Switch options'\"\n                        (valueChange)=\"onGlobalSwitchChange($event, action)\">\n                      </core-generic-switch>\n                    } @else if (element.actionType === 'global') {\n                      <core-generic-button \n                        [config]=\"getGlobalActionButtonConfig(action)\"\n                        (buttonClick)=\"onGlobalButtonClick($event, action)\">\n                      </core-generic-button>\n                    } @else if (element.actionType === 'custom') {\n                      <core-generic-button \n                        [config]=\"getCustomActionButtonConfig(action)\"\n                        (buttonClick)=\"onCustomButtonClick($event, action)\">\n                      </core-generic-button>\n                    }\n                  }\n                }\n              }\n            }\n            \n          }\n        }\n\n      </div>\n\n    </div>\n\n    <p class=\"c-header__text u-text\" *ngIf=\"getHeaderText()\">\n        {{ getHeaderText() }}\n    </p>\n\n    @if (\n      headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && \n      headerService.getCustomTemplate()()\n    ) {\n      <ng-container [ngTemplateOutlet]=\"headerService.getCustomTemplate()()\"></ng-container>\n    }\n  </div>\n  } @else {\n    @if(\n      headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && \n      headerService.getCustomTemplate()()\n    ) {\n      <ng-container [ngTemplateOutlet]=\"headerService.getCustomTemplate()()\"></ng-container>\n    }\n  }\n}", styles: [":root{--header-bg: #ffffff;--header-text: #333;--header-shadow: rgba(0, 0, 0, .1);--logout-btn-color: #e74c3c;--logout-btn-hover: #c0392b;--theme-btn-color: #666;--theme-btn-hover: #007bff}.dark-mode{--header-bg: #1a1a1a;--header-text: #e0e0e0;--header-shadow: rgba(255, 255, 255, .1);--logout-btn-color: #ff6b6b;--logout-btn-hover: #ff8787;--theme-btn-color: #bbb;--theme-btn-hover: #4da8ff}.header{background-color:var(--header-bg);box-shadow:0 2px 4px var(--header-shadow);padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.header .user-info{font-weight:500;color:var(--header-text)}.header .header-actions{display:flex;align-items:center;gap:15px}.header .theme-toggle-btn{background:none;border:none;color:var(--theme-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .theme-toggle-btn:hover{color:var(--theme-btn-hover)}.header .logout-btn{background:none;border:none;color:var(--logout-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .logout-btn i{margin-right:5px}.header .logout-btn:hover{color:var(--logout-btn-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "component", type: GenericSwitchComponent, selector: "core-generic-switch", inputs: ["options", "selectedValue", "ariaLabel"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -15574,7 +15681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         TranslateModule,
                         GenericButtonComponent,
                         GenericSwitchComponent
-                    ], hostDirectives: [CoreHostDirective], template: "@if (headerService.getIsVisible()()) {\n  @if(!headerService.getHeaderOutside()()) {\n  <div class=\"c-header\">\n    <div class=\"c-header__row\">\n\n      <div class=\"c-header__group\">\n\n        <h2 class=\"c-header__heading u-heading\">{{ getHeaderTitle() }}</h2>\n\n      </div>\n\n      <div class=\"c-header__group u-flex\">\n\n        @for (element of headerService.getOrderedElements(); track element.type) {\n          @if (headerService.isElementVisible(element.type)) {\n            \n            @switch (element.type) {\n              @case (HeaderElementType.GLOBAL_ACTIONS) {\n                @for (globalAction of headerService.getGlobalActions()(); track globalAction.label || $index) {\n                  @if (hasPermission(globalAction)) {\n                    @if (globalAction.isSwitch && globalAction.switchOptions) {\n                      <core-generic-switch\n                        [options]=\"globalAction.switchOptions\"\n                        [selectedValue]=\"globalAction.switchSelectedValue\"\n                        [ariaLabel]=\"globalAction.switchAriaLabel || globalAction.label || 'Switch options'\"\n                        (valueChange)=\"onGlobalSwitchChange($event, globalAction)\">\n                      </core-generic-switch>\n                    } @else {\n                      <core-generic-button \n                        [config]=\"getGlobalActionButtonConfig(globalAction)\"\n                        (buttonClick)=\"onGlobalButtonClick($event, globalAction)\">\n                      </core-generic-button>\n                    }\n                  }\n                }\n              }\n              \n              @case (HeaderElementType.CUSTOM_ACTIONS) {\n                @for (customAction of headerService.getCustomActions()(); track customAction.id) {\n                  @if (isCustomActionVisible(customAction)) {\n                    <core-generic-button \n                      [config]=\"getCustomActionButtonConfig(customAction)\"\n                      (buttonClick)=\"onCustomButtonClick($event, customAction)\">\n                    </core-generic-button>\n                  }\n                }\n              }\n              \n              @case (HeaderElementType.FILTER) {\n                <core-generic-button \n                  [config]=\"getFilterButtonConfig()\"\n                  (buttonClick)=\"onFilterButtonClick()\">\n                </core-generic-button>\n              }\n              \n              @case (HeaderElementType.CREATE) {\n                <core-generic-button \n                  [config]=\"getCreateButtonConfig()\"\n                  (buttonClick)=\"onCreateButtonClick()\">\n                </core-generic-button>\n              }\n            }\n            \n          }\n        }\n\n      </div>\n\n    </div>\n\n    <p class=\"c-header__text u-text\" *ngIf=\"getHeaderText()\">\n        {{ getHeaderText() }}\n    </p>\n\n    @if (\n      headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && \n      headerService.getCustomTemplate()()\n    ) {\n      <ng-container [ngTemplateOutlet]=\"headerService.getCustomTemplate()()\"></ng-container>\n    }\n  </div>\n  } @else {\n    @if(\n      headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && \n      headerService.getCustomTemplate()()\n    ) {\n      <ng-container [ngTemplateOutlet]=\"headerService.getCustomTemplate()()\"></ng-container>\n    }\n  }\n}", styles: [":root{--header-bg: #ffffff;--header-text: #333;--header-shadow: rgba(0, 0, 0, .1);--logout-btn-color: #e74c3c;--logout-btn-hover: #c0392b;--theme-btn-color: #666;--theme-btn-hover: #007bff}.dark-mode{--header-bg: #1a1a1a;--header-text: #e0e0e0;--header-shadow: rgba(255, 255, 255, .1);--logout-btn-color: #ff6b6b;--logout-btn-hover: #ff8787;--theme-btn-color: #bbb;--theme-btn-hover: #4da8ff}.header{background-color:var(--header-bg);box-shadow:0 2px 4px var(--header-shadow);padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.header .user-info{font-weight:500;color:var(--header-text)}.header .header-actions{display:flex;align-items:center;gap:15px}.header .theme-toggle-btn{background:none;border:none;color:var(--theme-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .theme-toggle-btn:hover{color:var(--theme-btn-hover)}.header .logout-btn{background:none;border:none;color:var(--logout-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .logout-btn i{margin-right:5px}.header .logout-btn:hover{color:var(--logout-btn-hover)}\n"] }]
+                    ], hostDirectives: [CoreHostDirective], template: "@if (headerService.getIsVisible()()) {\n  @if(!headerService.getHeaderOutside()()) {\n  <div class=\"c-header\">\n    <div class=\"c-header__row\">\n\n      <div class=\"c-header__group\">\n\n        <h2 class=\"c-header__heading u-heading\">{{ getHeaderTitle() }}</h2>\n\n      </div>\n\n      <div class=\"c-header__group u-flex\">\n\n        @for (element of headerService.getOrderedElements(); track element.type + '-' + (element.actionId || $index)) {\n          @if (headerService.isElementVisible(element.type, element)) {\n            \n            @switch (element.type) {\n              @case (HeaderElementType.GLOBAL_ACTIONS) {\n                @for (globalAction of headerService.getGlobalActions()(); track globalAction.label || $index) {\n                  @if (hasPermission(globalAction)) {\n                    @if (globalAction.isSwitch && globalAction.switchOptions) {\n                      <core-generic-switch\n                        [options]=\"globalAction.switchOptions\"\n                        [selectedValue]=\"globalAction.switchSelectedValue\"\n                        [ariaLabel]=\"globalAction.switchAriaLabel || globalAction.label || 'Switch options'\"\n                        (valueChange)=\"onGlobalSwitchChange($event, globalAction)\">\n                      </core-generic-switch>\n                    } @else {\n                      <core-generic-button \n                        [config]=\"getGlobalActionButtonConfig(globalAction)\"\n                        (buttonClick)=\"onGlobalButtonClick($event, globalAction)\">\n                      </core-generic-button>\n                    }\n                  }\n                }\n              }\n              \n              @case (HeaderElementType.CUSTOM_ACTIONS) {\n                @for (customAction of headerService.getCustomActions()(); track customAction.id) {\n                  @if (isCustomActionVisible(customAction)) {\n                    <core-generic-button \n                      [config]=\"getCustomActionButtonConfig(customAction)\"\n                      (buttonClick)=\"onCustomButtonClick($event, customAction)\">\n                    </core-generic-button>\n                  }\n                }\n              }\n              \n              @case (HeaderElementType.FILTER) {\n                <core-generic-button \n                  [config]=\"getFilterButtonConfig()\"\n                  (buttonClick)=\"onFilterButtonClick()\">\n                </core-generic-button>\n              }\n              \n              @case (HeaderElementType.CREATE) {\n                <core-generic-button \n                  [config]=\"getCreateButtonConfig()\"\n                  (buttonClick)=\"onCreateButtonClick()\">\n                </core-generic-button>\n              }\n\n              @case (HeaderElementType.INDIVIDUAL_ACTION) {\n                @if (getIndividualAction(element); as action) {\n                  @if (hasIndividualActionPermission(action)) {\n                    @if (isIndividualActionSwitch(action)) {\n                      <core-generic-switch\n                        [options]=\"action.switchOptions\"\n                        [selectedValue]=\"action.switchSelectedValue\"\n                        [ariaLabel]=\"action.switchAriaLabel || action.label || 'Switch options'\"\n                        (valueChange)=\"onGlobalSwitchChange($event, action)\">\n                      </core-generic-switch>\n                    } @else if (element.actionType === 'global') {\n                      <core-generic-button \n                        [config]=\"getGlobalActionButtonConfig(action)\"\n                        (buttonClick)=\"onGlobalButtonClick($event, action)\">\n                      </core-generic-button>\n                    } @else if (element.actionType === 'custom') {\n                      <core-generic-button \n                        [config]=\"getCustomActionButtonConfig(action)\"\n                        (buttonClick)=\"onCustomButtonClick($event, action)\">\n                      </core-generic-button>\n                    }\n                  }\n                }\n              }\n            }\n            \n          }\n        }\n\n      </div>\n\n    </div>\n\n    <p class=\"c-header__text u-text\" *ngIf=\"getHeaderText()\">\n        {{ getHeaderText() }}\n    </p>\n\n    @if (\n      headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && \n      headerService.getCustomTemplate()()\n    ) {\n      <ng-container [ngTemplateOutlet]=\"headerService.getCustomTemplate()()\"></ng-container>\n    }\n  </div>\n  } @else {\n    @if(\n      headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && \n      headerService.getCustomTemplate()()\n    ) {\n      <ng-container [ngTemplateOutlet]=\"headerService.getCustomTemplate()()\"></ng-container>\n    }\n  }\n}", styles: [":root{--header-bg: #ffffff;--header-text: #333;--header-shadow: rgba(0, 0, 0, .1);--logout-btn-color: #e74c3c;--logout-btn-hover: #c0392b;--theme-btn-color: #666;--theme-btn-hover: #007bff}.dark-mode{--header-bg: #1a1a1a;--header-text: #e0e0e0;--header-shadow: rgba(255, 255, 255, .1);--logout-btn-color: #ff6b6b;--logout-btn-hover: #ff8787;--theme-btn-color: #bbb;--theme-btn-hover: #4da8ff}.header{background-color:var(--header-bg);box-shadow:0 2px 4px var(--header-shadow);padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.header .user-info{font-weight:500;color:var(--header-text)}.header .header-actions{display:flex;align-items:center;gap:15px}.header .theme-toggle-btn{background:none;border:none;color:var(--theme-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .theme-toggle-btn:hover{color:var(--theme-btn-hover)}.header .logout-btn{background:none;border:none;color:var(--logout-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .logout-btn i{margin-right:5px}.header .logout-btn:hover{color:var(--logout-btn-hover)}\n"] }]
         }], ctorParameters: () => [] });
 
 class MobileHeaderComponent {
@@ -15717,12 +15824,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.15.17',
+    full: '2.15.19',
     major: 2,
     minor: 15,
-    patch: 17,
-    timestamp: '2025-10-15T13:49:10.034Z',
-    buildDate: '15/10/2025'
+    patch: 19,
+    timestamp: '2025-10-16T18:16:52.077Z',
+    buildDate: '16/10/2025'
 };
 
 class MainNavComponent {
@@ -16493,1334 +16600,1353 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 args: ['document:keydown', ['$event']]
             }] } });
 
-class GenericFixedActionsComponent {
-    headerService = inject(HeaderService);
-    fixedActionsMobileModalService = inject(FixedActionsMobileModalService);
-    permissionService = inject(PermissionWrapperService);
-    mobileResolutionService = inject(MobileResolutionService);
-    cdr = inject(ChangeDetectorRef);
-    constructor() {
-        effect(() => {
-            const actions = this.visibleActions();
-            this.cdr.markForCheck();
-        });
-    }
-    shouldShow = this.mobileResolutionService.shouldShowMobileHeader;
-    outsideActions = computed(() => {
-        const actions = this.headerService.getCustomActions()()
-            .filter(action => {
-            if (!action.mobileConfig)
-                return false;
-            return action.mobileConfig.showOutsideFixedActions === true;
-        })
-            .filter(action => {
-            if (action.requiredPermission) {
-                return this.permissionService.hasPermission(action.requiredPermission.resource, action.requiredPermission.action);
-            }
-            return true;
-        })
-            .filter(action => {
-            const visibleValue = action.visible;
-            if (typeof visibleValue === 'function') {
-                return visibleValue();
-            }
-            return visibleValue !== false;
-        });
-        return actions;
-    });
-    modalActions = computed(() => {
-        const actions = this.headerService.getCustomActions()()
-            .filter(action => {
-            if (!action.mobileConfig)
-                return false;
-            return action.mobileConfig.showInsideModal === true;
-        })
-            .filter(action => {
-            if (action.requiredPermission) {
-                return this.permissionService.hasPermission(action.requiredPermission.resource, action.requiredPermission.action);
-            }
-            return true;
-        })
-            .filter(action => {
-            const visibleValue = action.visible;
-            if (typeof visibleValue === 'function') {
-                return visibleValue();
+class DataStoreService {
+    stores = new Map();
+    defaultIdSelector(item) {
+        if (item && typeof item === 'object' && 'id' in item) {
+            const idVal = item.id;
+            if (typeof idVal === 'string' || typeof idVal === 'number') {
+                return idVal;
             }
-            return visibleValue !== false;
-        });
-        return actions;
-    });
-    hasModalActions = computed(() => {
-        const has = this.modalActions().length > 0;
-        return has;
-    });
-    visibleActions = computed(() => {
-        const actions = [];
-        this.outsideActions().forEach(action => {
-            actions.push({
-                id: action.id,
-                icon: action.icon,
-                label: action.label,
-                class: action.class,
-                tooltip: action.tooltip,
-                callback: action.callback,
-                requiredPermission: action.requiredPermission
-            });
-        });
-        const modalActionsArray = this.modalActions();
-        if (modalActionsArray.length > 0) {
-            const plusButtonAction = {
-                id: 'header-more-actions',
-                icon: 'icon-add-clean',
-                class: 'c-btn',
-                tooltip: 'Más acciones',
-                callback: () => this.openModalActions()
-            };
-            actions.push(plusButtonAction);
         }
-        return actions;
-    });
-    getActionClass(action) {
-        const baseClass = 'c-fixed-actions__btn';
-        const iconClass = action.icon || '';
-        const customClass = action.class || 'c-btn';
-        return `${baseClass} ${customClass} ${iconClass}`.trim();
-    }
-    isActionDisabled(action) {
-        return false;
+        throw new Error('No se encontró una propiedad id (string o number) y no se pasó idSelector.');
     }
-    onActionClick(action) {
-        if (action.callback) {
-            action.callback();
+    ensureStore(key, idSelector) {
+        if (!this.stores.has(key)) {
+            this.stores.set(key, {
+                items: signal([]),
+                index: new Map(),
+                idSelector: idSelector ?? this.defaultIdSelector,
+            });
+        }
+        else if (idSelector) {
+            this.stores.get(key).idSelector = idSelector;
         }
+        return this.stores.get(key);
     }
-    openModalActions() {
-        const actions = this.modalActions();
-        if (actions.length === 0)
-            return;
-        const fixedActions = actions.map(action => ({
-            id: action.id,
-            label: action.label,
-            icon: action.icon,
-            class: action.class,
-            callback: action.callback,
-            requiredPermission: action.requiredPermission,
-            customAction: {
-                label: action.label,
-                title: action.label,
-                icon: action.icon,
-                callback: () => {
-                    if (action.callback) {
-                        action.callback();
-                    }
-                },
-                requiredPermission: action.requiredPermission,
-                shouldShow: () => action.visible !== false,
-                shouldDisable: () => action.disabled === true
-            }
-        }));
-        this.fixedActionsMobileModalService.open({
-            title: 'Acciones',
-            actions: fixedActions
-        });
+    hydrate(key, items, idSelector) {
+        const store = this.ensureStore(key, idSelector);
+        const copy = [...items];
+        const idx = new Map();
+        for (const it of copy) {
+            idx.set(String(store.idSelector(it)), it);
+        }
+        store.items.set(copy);
+        store.index = idx;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericFixedActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericFixedActionsComponent, isStandalone: true, selector: "core-generic-fixed-actions", ngImport: i0, template: `
-    @if (shouldShow() && visibleActions().length > 0) {
-        @for (action of visibleActions(); track action.id) {
-          <button 
-            type="button"
-            [ngClass]="getActionClass(action)"
-            [disabled]="isActionDisabled(action)"
-            [title]="action.tooltip || action.label || ''"
-            [attr.aria-label]="action.tooltip || action.label || ''"
-            (click)="onActionClick(action)">
-          </button>
+    upsertOne(key, item, idSelector) {
+        const store = this.ensureStore(key, idSelector);
+        const id = String(store.idSelector(item));
+        const current = store.items();
+        const pos = current.findIndex((i) => String(store.idSelector(i)) === id);
+        if (pos >= 0) {
+            const next = [...current];
+            next[pos] = item;
+            store.items.set(next);
+        }
+        else {
+            store.items.set([...current, item]);
         }
+        store.index.set(id, item);
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericFixedActionsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'core-generic-fixed-actions',
-                    standalone: true,
-                    imports: [CommonModule],
-                    template: `
-    @if (shouldShow() && visibleActions().length > 0) {
-        @for (action of visibleActions(); track action.id) {
-          <button 
-            type="button"
-            [ngClass]="getActionClass(action)"
-            [disabled]="isActionDisabled(action)"
-            [title]="action.tooltip || action.label || ''"
-            [attr.aria-label]="action.tooltip || action.label || ''"
-            (click)="onActionClick(action)">
-          </button>
+    upsertMany(key, items, idSelector) {
+        for (const it of items) {
+            this.upsertOne(key, it, idSelector);
         }
     }
-  `,
-                }]
-        }], ctorParameters: () => [] });
-
-class LayoutComponent {
-    navItems = input([]);
-    bottomNavItems = input([]);
-    collapsedLogo = input('');
-    expandedLogo = input('');
-    logoImagesConfig = input(null);
-    navConfig = input({});
-    mobileHeaderConfig = input(null);
-    onLogout = output();
-    onMobileRefresh = output();
-    onMobileFilter = output();
-    dialogService = inject(ConfirmationDialogService);
-    mainNavService = inject(MainNavService);
-    layoutService = inject(LayoutService);
-    layoutStateService = inject(LayoutStateService);
-    sidebarMobileModalService = inject(SidebarMobileModalService);
-    templateRegistry = inject(SidebarTemplateRegistryService);
-    headerService = inject(HeaderService);
-    mobileResolutionService = inject(MobileResolutionService);
-    SidebarVisibility = SidebarVisibility;
-    ModalMode = ModalMode;
-    SidebarMobileType = SidebarMobileType;
-    screenWidth = signal(typeof window !== 'undefined' ? window.innerWidth : 1024);
-    isSidebarCollapsed = false;
-    isHeaderVisible = false;
-    isMobile = this.mobileResolutionService.isMobile;
-    shouldShowMobileHeader = this.mobileResolutionService.shouldShowMobileHeader;
-    mainNavComponent;
-    get leftSidebarConfig() {
-        return this.layoutStateService.getLeftSidebarConfig()();
+    removeOne(key, id, idSelector) {
+        const store = this.ensureStore(key, idSelector);
+        const idStr = String(id);
+        const next = store
+            .items()
+            .filter((i) => String(store.idSelector(i)) !== idStr);
+        store.items.set(next);
+        store.index.delete(idStr);
     }
-    get rightSidebarConfig() {
-        return this.layoutStateService.getRightSidebarConfig()();
+    removeMany(key, ids, idSelector) {
+        const store = this.ensureStore(key, idSelector);
+        const idsSet = new Set(ids.map(String));
+        const next = store
+            .items()
+            .filter((i) => !idsSet.has(String(store.idSelector(i))));
+        store.items.set(next);
+        for (const id of ids) {
+            store.index.delete(String(id));
+        }
     }
-    ngOnInit() {
-        this.mainNavService.isCollapsed$.subscribe(isCollapsed => {
-            this.isSidebarCollapsed = isCollapsed;
-        });
-        this.layoutStateService.isHeaderVisible$().subscribe(isVisible => {
-            this.isHeaderVisible = isVisible;
+    clear(key, idSelector) {
+        const store = this.ensureStore(key, idSelector);
+        store.items.set([]);
+        store.index.clear();
+    }
+    selectAll(key, idSelector) {
+        const store = this.ensureStore(key, idSelector);
+        return computed(() => store.items());
+    }
+    getById(key, id, idSelector) {
+        const store = this.ensureStore(key, idSelector);
+        return store.index.get(String(id));
+    }
+    selectById(key, id, idSelector) {
+        const store = this.ensureStore(key, idSelector);
+        const idStr = String(id);
+        return computed(() => {
+            store.items();
+            return store.index.get(idStr);
         });
-        this.updateScreenWidth();
     }
-    onResize(event) {
-        this.updateScreenWidth();
+    count(key, idSelector) {
+        const store = this.ensureStore(key, idSelector);
+        return store.items().length;
     }
-    updateScreenWidth() {
-        if (typeof window !== 'undefined') {
-            this.screenWidth.set(window.innerWidth);
+    hasData(key) {
+        return this.stores.has(key) && this.stores.get(key).items().length > 0;
+    }
+    getStoreKeys() {
+        return Array.from(this.stores.keys());
+    }
+    removeStore(key) {
+        this.stores.delete(key);
+    }
+    flush(key) {
+        if (key) {
+            if (this.stores.has(key)) {
+                const store = this.stores.get(key);
+                store.items.set([]);
+                store.index.clear();
+            }
+        }
+        else {
+            for (const [storeKey, store] of this.stores.entries()) {
+                store.items.set([]);
+                store.index.clear();
+            }
         }
     }
-    isMobileView(config) {
-        const responsiveConfig = config?.responsiveConfig;
-        const maxBreakpoint = responsiveConfig?.maxMobileBreakpoint ?? this.mobileResolutionService.breakpoint();
-        const minBreakpoint = responsiveConfig?.minMobileBreakpoint ?? 0;
-        return this.screenWidth() <= maxBreakpoint && this.screenWidth() >= minBreakpoint;
+    flushAll() {
+        this.stores.clear();
     }
-    shouldRenderLeftSidebar() {
-        const config = this.leftSidebarConfig;
-        const responsiveConfig = config?.responsiveConfig;
-        if (!responsiveConfig)
-            return true;
-        if (this.isMobileView(config) && responsiveConfig.mobileType === SidebarMobileType.MODAL) {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataStoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataStoreService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataStoreService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class CustomClassService {
+    rendererFactory;
+    dataStore;
+    renderer;
+    STORE_KEY = 'custom-class-operations';
+    operationCounter = 0;
+    constructor(rendererFactory, dataStore) {
+        this.rendererFactory = rendererFactory;
+        this.dataStore = dataStore;
+        this.renderer = this.rendererFactory.createRenderer(null, null);
+        // Initialize the store
+        this.dataStore.hydrate(this.STORE_KEY, []);
+    }
+    ngOnDestroy() {
+        this.clearHistory();
+        this.dataStore.removeStore(this.STORE_KEY);
+    }
+    addClass(target, classNames, parent) {
+        const elements = this.resolveElements(target, parent);
+        if (elements.length === 0) {
+            this.recordOperation('add', target, classNames, false);
             return false;
         }
+        const classes = Array.isArray(classNames) ? classNames : [classNames];
+        elements.forEach(element => {
+            classes.forEach(className => {
+                if (className && className.trim()) {
+                    this.renderer.addClass(element, className.trim());
+                }
+            });
+        });
+        this.recordOperation('add', target, classes, true);
         return true;
     }
-    shouldRenderRightSidebar() {
-        const config = this.rightSidebarConfig;
-        const responsiveConfig = config?.responsiveConfig;
-        if (!responsiveConfig)
-            return true;
-        if (this.isMobileView(config) && responsiveConfig.mobileType === SidebarMobileType.MODAL) {
+    removeClass(target, classNames, parent) {
+        const elements = this.resolveElements(target, parent);
+        if (elements.length === 0) {
+            this.recordOperation('remove', target, classNames, false);
             return false;
         }
+        const classes = Array.isArray(classNames) ? classNames : [classNames];
+        elements.forEach(element => {
+            classes.forEach(className => {
+                if (className && className.trim()) {
+                    this.renderer.removeClass(element, className.trim());
+                }
+            });
+        });
+        this.recordOperation('remove', target, classes, true);
         return true;
     }
-    getEffectiveLeftSidebarVisibility() {
-        if (!this.shouldRenderLeftSidebar()) {
-            return SidebarVisibility.HIDE;
+    toggleClass(target, classNames, parent) {
+        const elements = this.resolveElements(target, parent);
+        if (elements.length === 0) {
+            this.recordOperation('toggle', target, classNames, false);
+            return false;
         }
-        return this.layoutService.sidebarLeft().visibility;
+        const classes = Array.isArray(classNames) ? classNames : [classNames];
+        elements.forEach(element => {
+            classes.forEach(className => {
+                if (className && className.trim()) {
+                    const trimmedClass = className.trim();
+                    if (element.classList.contains(trimmedClass)) {
+                        this.renderer.removeClass(element, trimmedClass);
+                    }
+                    else {
+                        this.renderer.addClass(element, trimmedClass);
+                    }
+                }
+            });
+        });
+        this.recordOperation('toggle', target, classes, true);
+        return true;
     }
-    getEffectiveLeftSidebarWidth() {
-        if (!this.shouldRenderLeftSidebar()) {
-            return SidebarWidth.DEFAULT;
+    hasClass(target, className, parent) {
+        const elements = this.resolveElements(target, parent);
+        if (elements.length === 0) {
+            return false;
         }
-        return this.layoutService.sidebarLeft().width;
+        const element = elements[0];
+        return element.classList.contains(className.trim());
     }
-    getEffectiveLeftSidebarHeight() {
-        if (!this.shouldRenderLeftSidebar()) {
-            return SidebarHeight.DEFAULT;
+    replaceClass(target, oldClass, newClass, parent) {
+        const elements = this.resolveElements(target, parent);
+        if (elements.length === 0) {
+            this.recordOperation('replace', target, [newClass], false, oldClass);
+            return false;
         }
-        return this.layoutService.sidebarLeft().height;
+        elements.forEach(element => {
+            if (oldClass && oldClass.trim()) {
+                this.renderer.removeClass(element, oldClass.trim());
+            }
+            if (newClass && newClass.trim()) {
+                this.renderer.addClass(element, newClass.trim());
+            }
+        });
+        this.recordOperation('replace', target, [newClass], true, oldClass);
+        return true;
     }
-    getEffectiveRightSidebarVisibility() {
-        if (!this.shouldRenderRightSidebar()) {
-            return SidebarVisibility.HIDE;
+    setClass(target, classNames, parent) {
+        const elements = this.resolveElements(target, parent);
+        if (elements.length === 0) {
+            this.recordOperation('set', target, classNames, false);
+            return false;
         }
-        return this.layoutService.sidebarRight().visibility;
+        const classes = Array.isArray(classNames) ? classNames : [classNames];
+        elements.forEach(element => {
+            // Clear all existing classes
+            element.className = '';
+            // Add new classes
+            classes.forEach(className => {
+                if (className && className.trim()) {
+                    this.renderer.addClass(element, className.trim());
+                }
+            });
+        });
+        this.recordOperation('set', target, classes, true);
+        return true;
     }
-    getEffectiveRightSidebarWidth() {
-        if (!this.shouldRenderRightSidebar()) {
-            return SidebarWidth.DEFAULT;
+    resolveElements(target, parent) {
+        let searchContext = document;
+        // Resolve parent context if provided
+        if (parent) {
+            if (parent instanceof ElementRef) {
+                searchContext = parent.nativeElement;
+            }
+            else if (parent instanceof HTMLElement) {
+                searchContext = parent;
+            }
+            else if (parent && parent.nativeElement instanceof HTMLElement) {
+                searchContext = parent.nativeElement;
+            }
+            else if (typeof parent === 'string') {
+                const parentElement = document.querySelector(parent);
+                if (parentElement instanceof HTMLElement) {
+                    searchContext = parentElement;
+                }
+            }
         }
-        return this.layoutService.sidebarRight().width;
-    }
-    getEffectiveRightSidebarHeight() {
-        if (!this.shouldRenderRightSidebar()) {
-            return SidebarHeight.DEFAULT;
+        // ElementRef from ViewChild
+        if (target instanceof ElementRef) {
+            const element = target.nativeElement;
+            // If parent is specified, check if element is within parent
+            if (parent && searchContext !== document) {
+                return searchContext.contains(element) ? [element] : [];
+            }
+            return [element];
         }
-        return this.layoutService.sidebarRight().height;
-    }
-    toggleSidebar() {
-        this.mainNavService.toggleSidebarState();
-    }
-    getHeaderClasses() {
-        const baseClass = 'o-layout__header';
-        const customClass = this.headerService.getGlobalCustomClass()();
-        return customClass ? `${baseClass} ${customClass}` : baseClass;
-    }
-    onFilterRequested() {
-        const event = new CustomEvent('filterRequested');
-        window.dispatchEvent(event);
-    }
-    onCreateRequested() {
-        const event = new CustomEvent('createRequested');
-        window.dispatchEvent(event);
-    }
-    onGlobalActionTriggered(action) {
-        const event = new CustomEvent('globalActionTriggered', { detail: action });
-        window.dispatchEvent(event);
+        // Direct HTMLElement
+        if (target instanceof HTMLElement) {
+            // If parent is specified, check if element is within parent
+            if (parent && searchContext !== document) {
+                return searchContext.contains(target) ? [target] : [];
+            }
+            return [target];
+        }
+        // NodeList or HTMLCollection
+        if (target instanceof NodeList || target instanceof HTMLCollection) {
+            const elements = Array.from(target);
+            // Filter by parent if specified
+            if (parent && searchContext !== document) {
+                return elements.filter(el => searchContext.contains(el));
+            }
+            return elements;
+        }
+        // CSS Selector string
+        if (typeof target === 'string') {
+            const elements = searchContext.querySelectorAll(target);
+            return Array.from(elements);
+        }
+        // If it has a nativeElement property (custom wrapper)
+        if (target && target.nativeElement instanceof HTMLElement) {
+            const element = target.nativeElement;
+            // If parent is specified, check if element is within parent
+            if (parent && searchContext !== document) {
+                return searchContext.contains(element) ? [element] : [];
+            }
+            return [element];
+        }
+        return [];
     }
-    onMobileMenuClick() {
-        this.mainNavComponent?.toggleMobileNav();
+    recordOperation(operation, target, classNames, success, oldClass) {
+        const classes = Array.isArray(classNames) ? classNames : [classNames];
+        const targetId = this.getTargetIdentifier(target);
+        const record = {
+            id: `op-${++this.operationCounter}-${Date.now()}`,
+            timestamp: Date.now(),
+            operation,
+            target: targetId,
+            classNames: classes,
+            oldClass,
+            success
+        };
+        this.dataStore.upsertOne(this.STORE_KEY, record);
     }
-    onMobileRefreshClick() {
-        const refreshCallback = this.headerService.getRefreshCallback()();
-        if (refreshCallback) {
-            refreshCallback();
+    getTargetIdentifier(target) {
+        if (typeof target === 'string') {
+            return target;
         }
-        this.onMobileRefresh.emit();
+        if (target instanceof ElementRef) {
+            return this.getElementSelector(target.nativeElement);
+        }
+        if (target instanceof HTMLElement) {
+            return this.getElementSelector(target);
+        }
+        if (target && target.nativeElement instanceof HTMLElement) {
+            return this.getElementSelector(target.nativeElement);
+        }
+        return 'unknown-target';
     }
-    onMobileFilterClick() {
-        const event = new CustomEvent('filterRequested');
-        window.dispatchEvent(event);
-        this.onMobileFilter.emit();
+    getElementSelector(element) {
+        if (element.id) {
+            return `#${element.id}`;
+        }
+        const classes = Array.from(element.classList).join('.');
+        if (classes) {
+            return `.${classes}`;
+        }
+        return element.tagName.toLowerCase();
     }
-    setLeftSidebarConfig(config) {
-        this.layoutStateService.setLeftSidebarConfig(config);
+    getOperationHistory() {
+        return [...this.dataStore.selectAll(this.STORE_KEY)()];
     }
-    setRightSidebarConfig(config) {
-        this.layoutStateService.setRightSidebarConfig(config);
+    getOperationsByType(operation) {
+        return this.getOperationHistory().filter(op => op.operation === operation);
     }
-    hideLeftSidebar() {
-        this.layoutStateService.hideLeftSidebar();
+    getOperationsByTarget(target) {
+        return this.getOperationHistory().filter(op => op.target === target);
     }
-    hideRightSidebar() {
-        this.layoutStateService.hideRightSidebar();
+    getSuccessfulOperations() {
+        return this.getOperationHistory().filter(op => op.success);
     }
-    getSidebarModalTitle() {
-        const modalState = this.sidebarMobileModalService.getModalState();
-        const config = modalState.config();
-        if (!config)
-            return '';
-        if (config.title) {
-            return config.title;
-        }
-        if (config.templateKey) {
-            return config.title || 'Sidebar';
-        }
-        return 'Menu';
+    getFailedOperations() {
+        return this.getOperationHistory().filter(op => !op.success);
     }
-    getSidebarModalButtons() {
-        return [
-            {
-                text: 'modal.cancel',
-                action: () => this.sidebarMobileModalService.closeModal(),
-            },
-        ];
+    getOperationCount() {
+        return this.dataStore.count(this.STORE_KEY);
     }
-    get sidebarModalContentTemplate() {
-        const modalState = this.sidebarMobileModalService.getModalState();
-        const config = modalState.config();
-        if (!config)
-            return null;
-        if (config.customTemplate) {
-            return config.customTemplate;
-        }
-        if (config.templateKey) {
-            return this.templateRegistry.getTemplate(config.templateKey);
-        }
-        return null;
+    clearHistory() {
+        this.dataStore.clear(this.STORE_KEY);
+        this.operationCounter = 0;
     }
-    logout() {
-        this.onLogout.emit();
+    getRecentOperations(limit = 10) {
+        const all = this.getOperationHistory();
+        return all.slice(-limit).reverse();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LayoutComponent, isStandalone: true, selector: "core-layout", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, collapsedLogo: { classPropertyName: "collapsedLogo", publicName: "collapsedLogo", isSignal: true, isRequired: false, transformFunction: null }, expandedLogo: { classPropertyName: "expandedLogo", publicName: "expandedLogo", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null }, mobileHeaderConfig: { classPropertyName: "mobileHeaderConfig", publicName: "mobileHeaderConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout", onMobileRefresh: "onMobileRefresh", onMobileFilter: "onMobileFilter" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "mainNavComponent", first: true, predicate: MainNavComponent, descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"o-layout\" \n  [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n  [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n  [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n  [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n  [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n  [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n  [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n  >\n\n  <!-- Nav -->\n  <core-main-nav class=\"o-layout__nav\" \n    (toggleSidebar)=\"toggleSidebar()\"\n    [navItems]=\"navItems()\"\n    [navConfig]=\"navConfig()\"\n    [bottomNavItems]=\"bottomNavItems()\"\n    [logoImagesConfig]=\"logoImagesConfig()\"\n    [collapsedLogo]=\"collapsedLogo()\"\n    [expandedLogo]=\"expandedLogo()\"\n    (onLogout)=\"logout()\"\n    >\n  </core-main-nav>\n\n  <!-- Main -->\n  <div class=\"o-layout__body\">\n    \n    @if(shouldShowMobileHeader() && mobileHeaderConfig()) {\n      <core-mobile-header\n        class=\"o-layout__header c-header-mobile\"\n        [config]=\"mobileHeaderConfig()!\"\n        (menuClick)=\"onMobileMenuClick()\"\n        (refreshClick)=\"onMobileRefreshClick()\"\n        (filterClick)=\"onMobileFilterClick()\">\n      </core-mobile-header>\n    }\n\n    @if(layoutStateService.isHeaderVisible$() | async) {\n      @if(!shouldShowMobileHeader()) {\n        <core-header\n          [class]=\"getHeaderClasses()\"\n          (filterRequested)=\"onFilterRequested()\"\n          (createRequested)=\"onCreateRequested()\"\n          (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n        </core-header>\n      }\n    }\n\n    @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--left\"\n        [config]=\"leftSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n    <ng-content></ng-content>\n\n    @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--right\"\n        [config]=\"rightSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n\n    @if(dialogService.isOpen$()) {\n      <core-confirmation-dialog\n        [isOpen]=\"dialogService.isOpen$()\"\n        [config]=\"dialogService.config$()\"\n        (confirm)=\"dialogService.confirm($event)\"\n        (cancel)=\"dialogService.cancel()\"\n      ></core-confirmation-dialog>\n    }\n\n    @if(sidebarMobileModalService.isOpen()) {\n      <core-generic-modal\n        [isOpen]=\"sidebarMobileModalService.isOpen()\"\n        [mode]=\"ModalMode.CREATE\"\n        [title]=\"getSidebarModalTitle()\"\n        [customTemplate]=\"sidebarModalContentTemplate\"\n        (close)=\"sidebarMobileModalService.closeModal()\"\n        [buttonConfig]=\"getSidebarModalButtons()\">\n      </core-generic-modal>\n    }\n\n  </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Fixed Actions (Mobile) -->\n<core-generic-fixed-actions class=\"c-fixed-actions c-fixed-actions--right\"/>\n\n<!-- Fixed Actions Mobile Modal -->\n<core-fixed-actions-mobile-modal />\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- Gallery Modal Global -->\n<core-gallery-modal></core-gallery-modal>\n\n<!-- ! Refactor: End -->", dependencies: [{ kind: "component", type: MainNavComponent, selector: "core-main-nav", inputs: ["navConfig", "appVersion", "navItems", "bottomNavItems", "isProduction", "logoImagesConfig", "collapsedLogo", "expandedLogo"], outputs: ["onLogout"] }, { kind: "component", type: HeaderComponent, selector: "core-header", outputs: ["filterRequested", "createRequested", "globalActionTriggered"] }, { kind: "component", type: MobileHeaderComponent, selector: "core-mobile-header", inputs: ["config"], outputs: ["menuClick", "refreshClick", "filterClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: ConfirmationDialogComponent, selector: "core-confirmation-dialog", inputs: ["isOpen", "config"], outputs: ["confirm", "cancel"] }, { kind: "component", type: GenericSidebarComponent, selector: "core-generic-sidebar", inputs: ["config", "position", "customTemplate"], outputs: ["itemClicked", "subItemClicked"] }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "steps", "title", "isMultiple", "customTemplate", "customViewTemplate", "finalStepTemplate", "buttonConfig", "modelFactory", "errors", "validators", "customHasChanges", "stepValidationEnabled", "allowFreeNavigation", "autoMarkCompleted"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: ImageModalComponent, selector: "core-image-modal", outputs: ["modalClosed"] }, { kind: "component", type: GalleryModalComponent, selector: "core-gallery-modal" }, { kind: "component", type: SidebarCustomModalComponent, selector: "core-sidebar-custom-modal" }, { kind: "component", type: GenericFixedActionsComponent, selector: "core-generic-fixed-actions" }, { kind: "component", type: FixedActionsMobileModalComponent, selector: "core-fixed-actions-mobile-modal" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CustomClassService, deps: [{ token: i0.RendererFactory2 }, { token: DataStoreService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CustomClassService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-layout', imports: [
-                        MainNavComponent,
-                        HeaderComponent,
-                        MobileHeaderComponent,
-                        CommonModule,
-                        ConfirmationDialogComponent,
-                        GenericSidebarComponent,
-                        GenericModalComponent,
-                        ImageModalComponent,
-                        GalleryModalComponent,
-                        SidebarCustomModalComponent,
-                        GenericFixedActionsComponent,
-                        FixedActionsMobileModalComponent
-                    ], hostDirectives: [CoreHostDirective], template: "<div class=\"o-layout\" \n  [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n  [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n  [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n  [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n  [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n  [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n  [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n  >\n\n  <!-- Nav -->\n  <core-main-nav class=\"o-layout__nav\" \n    (toggleSidebar)=\"toggleSidebar()\"\n    [navItems]=\"navItems()\"\n    [navConfig]=\"navConfig()\"\n    [bottomNavItems]=\"bottomNavItems()\"\n    [logoImagesConfig]=\"logoImagesConfig()\"\n    [collapsedLogo]=\"collapsedLogo()\"\n    [expandedLogo]=\"expandedLogo()\"\n    (onLogout)=\"logout()\"\n    >\n  </core-main-nav>\n\n  <!-- Main -->\n  <div class=\"o-layout__body\">\n    \n    @if(shouldShowMobileHeader() && mobileHeaderConfig()) {\n      <core-mobile-header\n        class=\"o-layout__header c-header-mobile\"\n        [config]=\"mobileHeaderConfig()!\"\n        (menuClick)=\"onMobileMenuClick()\"\n        (refreshClick)=\"onMobileRefreshClick()\"\n        (filterClick)=\"onMobileFilterClick()\">\n      </core-mobile-header>\n    }\n\n    @if(layoutStateService.isHeaderVisible$() | async) {\n      @if(!shouldShowMobileHeader()) {\n        <core-header\n          [class]=\"getHeaderClasses()\"\n          (filterRequested)=\"onFilterRequested()\"\n          (createRequested)=\"onCreateRequested()\"\n          (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n        </core-header>\n      }\n    }\n\n    @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--left\"\n        [config]=\"leftSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n    <ng-content></ng-content>\n\n    @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--right\"\n        [config]=\"rightSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n\n    @if(dialogService.isOpen$()) {\n      <core-confirmation-dialog\n        [isOpen]=\"dialogService.isOpen$()\"\n        [config]=\"dialogService.config$()\"\n        (confirm)=\"dialogService.confirm($event)\"\n        (cancel)=\"dialogService.cancel()\"\n      ></core-confirmation-dialog>\n    }\n\n    @if(sidebarMobileModalService.isOpen()) {\n      <core-generic-modal\n        [isOpen]=\"sidebarMobileModalService.isOpen()\"\n        [mode]=\"ModalMode.CREATE\"\n        [title]=\"getSidebarModalTitle()\"\n        [customTemplate]=\"sidebarModalContentTemplate\"\n        (close)=\"sidebarMobileModalService.closeModal()\"\n        [buttonConfig]=\"getSidebarModalButtons()\">\n      </core-generic-modal>\n    }\n\n  </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Fixed Actions (Mobile) -->\n<core-generic-fixed-actions class=\"c-fixed-actions c-fixed-actions--right\"/>\n\n<!-- Fixed Actions Mobile Modal -->\n<core-fixed-actions-mobile-modal />\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- Gallery Modal Global -->\n<core-gallery-modal></core-gallery-modal>\n\n<!-- ! Refactor: End -->" }]
-        }], propDecorators: { mainNavComponent: [{
-                type: ViewChild,
-                args: [MainNavComponent]
-            }], onResize: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CustomClassService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i0.RendererFactory2 }, { type: DataStoreService }] });
 
-class LayoutAuth {
-    config = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutAuth, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LayoutAuth, isStandalone: true, selector: "core-layout-auth", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-login\">\n    @if (config().patternUrl) {\n        <picture class=\"c-login__bg\">\n            <img [src]=\"config().patternUrl!\" alt=\"Background pattern\" width=\"1044\" height=\"889\" />\n        </picture>\n    }\n\n    @if (config().mainLogoUrl) {\n        <picture class=\"c-login__logo\">\n            <img [src]=\"config().mainLogoUrl!\" alt=\"Main logo\">\n        </picture>\n    }\n    \n    <div class=\"c-login__main c-entry-group\">\n      <ng-content></ng-content>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutAuth, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-layout-auth', imports: [
-                        CommonModule
-                    ], hostDirectives: [CoreHostDirective], template: "<div class=\"c-login\">\n    @if (config().patternUrl) {\n        <picture class=\"c-login__bg\">\n            <img [src]=\"config().patternUrl!\" alt=\"Background pattern\" width=\"1044\" height=\"889\" />\n        </picture>\n    }\n\n    @if (config().mainLogoUrl) {\n        <picture class=\"c-login__logo\">\n            <img [src]=\"config().mainLogoUrl!\" alt=\"Main logo\">\n        </picture>\n    }\n    \n    <div class=\"c-login__main c-entry-group\">\n      <ng-content></ng-content>\n    </div>\n</div>" }]
-        }] });
-
-var RatingSize;
-(function (RatingSize) {
-    RatingSize["SMALL"] = "small";
-    RatingSize["MEDIUM"] = "medium";
-    RatingSize["LARGE"] = "large";
-})(RatingSize || (RatingSize = {}));
-
-var RatingType;
-(function (RatingType) {
-    RatingType["STARS"] = "stars";
-    RatingType["NUMBERS"] = "numbers";
-    RatingType["CUSTOM"] = "custom";
-})(RatingType || (RatingType = {}));
-
-class RatingService {
-    apiService = inject(ApiService);
-    /**
-     * Submit a rating to the specified endpoint
-     * @param endpoint - The API endpoint to submit the rating to
-     * @param ratingData - The rating data to submit
-     * @returns Observable with the API response
-     */
-    submitRating(endpoint, ratingData) {
-        return this.apiService.createObj(endpoint, ratingData, false);
+class GenericFixedActionsComponent {
+    headerService = inject(HeaderService);
+    fixedActionsMobileModalService = inject(FixedActionsMobileModalService);
+    permissionService = inject(PermissionWrapperService);
+    mobileResolutionService = inject(MobileResolutionService);
+    customClassService = inject(CustomClassService);
+    elementRef = inject(ElementRef);
+    cdr = inject(ChangeDetectorRef);
+    constructor() {
+        effect(() => {
+            const actions = this.visibleActions();
+            this.cdr.markForCheck();
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: RatingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: RatingService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: RatingService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class GenericRatingComponent {
-    ratingService = inject(RatingService);
-    config = input.required();
-    ratingChange = output();
-    selectedRating = signal(0);
-    hoveredRating = signal(0);
-    stars = signal([]);
-    loading = signal(false);
-    uniqueId = signal('');
-    RatingSize = RatingSize;
-    RatingType = RatingType;
-    ngOnInit() {
-        this.initializeStars();
-        this.generateUniqueId();
-        this.initializeDefaultRating();
+    ngAfterViewInit() {
+        // Asegurar que los botones tengan pointer-events: auto
+        // aunque el contenedor tenga pointer-events: none
         setTimeout(() => {
-            this.updateStarVisuals(this.selectedRating());
+            const buttons = this.elementRef.nativeElement.querySelectorAll('button');
+            buttons.forEach((button) => {
+                if (!button.style.pointerEvents) {
+                    button.style.pointerEvents = 'auto';
+                }
+            });
         }, 0);
     }
-    generateUniqueId() {
-        const timestamp = Date.now();
-        const random1 = Math.floor(Math.random() * 10000);
-        const random2 = Math.floor(Math.random() * 10000);
-        const performanceTime = performance.now();
-        const instanceId = Math.random().toString(36).substring(2, 15);
-        this.uniqueId.set(`rating-${timestamp}-${random1}-${random2}-${performanceTime.toString().replace('.', '')}-${instanceId}`);
-    }
-    initializeDefaultRating() {
-        const config = this.config();
-        if (config.defaultRating && config.defaultRating > 0 && config.defaultRating <= config.totalStars) {
-            this.selectedRating.set(config.defaultRating);
-        }
-    }
-    getUniqueName() {
-        return `star-${this.uniqueId()}`;
-    }
-    getUniqueStarId(starValue) {
-        return `star-${this.uniqueId()}-${starValue}`;
-    }
-    initializeStars() {
-        const config = this.config();
-        const totalStars = config.totalStars || 5;
-        const starsArray = [];
-        for (let i = totalStars; i >= 1; i--) {
-            starsArray.push({
-                value: i,
-                label: config.starLabels?.[i] || `${i}`,
-                id: `star-${i}`
+    shouldShow = this.mobileResolutionService.shouldShowMobileHeader;
+    outsideActions = computed(() => {
+        const actions = this.headerService.getCustomActions()()
+            .filter(action => {
+            if (!action.mobileConfig)
+                return false;
+            return action.mobileConfig.showOutsideFixedActions === true;
+        })
+            .filter(action => {
+            if (action.requiredPermission) {
+                return this.permissionService.hasPermission(action.requiredPermission.resource, action.requiredPermission.action);
+            }
+            return true;
+        })
+            .filter(action => {
+            const visibleValue = action.visible;
+            if (typeof visibleValue === 'function') {
+                return visibleValue();
+            }
+            return visibleValue !== false;
+        });
+        return actions;
+    });
+    modalActions = computed(() => {
+        const actions = this.headerService.getCustomActions()()
+            .filter(action => {
+            if (!action.mobileConfig)
+                return false;
+            return action.mobileConfig.showInsideModal === true;
+        })
+            .filter(action => {
+            if (action.requiredPermission) {
+                return this.permissionService.hasPermission(action.requiredPermission.resource, action.requiredPermission.action);
+            }
+            return true;
+        })
+            .filter(action => {
+            const visibleValue = action.visible;
+            if (typeof visibleValue === 'function') {
+                return visibleValue();
+            }
+            return visibleValue !== false;
+        });
+        return actions;
+    });
+    hasModalActions = computed(() => {
+        const has = this.modalActions().length > 0;
+        return has;
+    });
+    visibleActions = computed(() => {
+        const actions = [];
+        this.outsideActions().forEach(action => {
+            actions.push({
+                id: action.id,
+                icon: action.icon,
+                label: action.label,
+                class: action.class,
+                tooltip: action.tooltip,
+                callback: action.callback,
+                requiredPermission: action.requiredPermission
             });
+        });
+        const modalActionsArray = this.modalActions();
+        if (modalActionsArray.length > 0) {
+            const plusButtonAction = {
+                id: 'header-more-actions',
+                icon: 'icon-add-clean',
+                class: 'c-btn',
+                tooltip: 'Más acciones',
+                callback: () => this.openModalActions()
+            };
+            actions.push(plusButtonAction);
         }
-        this.stars.set(starsArray);
-    }
-    onStarClick(rating) {
-        const config = this.config();
-        if (config.readonly) {
-            return;
-        }
-        this.selectedRating.set(rating);
-        this.updateStarVisuals(rating);
-        const event = {
-            rating,
-            label: this.stars().find(star => star.value === rating)?.label || '',
-            endpoint: config.endpoint
-        };
-        this.ratingChange.emit(event);
-        if (config.endpoint && config.endpoint.trim() !== '') {
-            this.submitRating(event);
-        }
+        return actions;
+    });
+    getActionClass(action) {
+        const baseClass = 'c-fixed-actions__btn';
+        const iconClass = action.icon || '';
+        const customClass = action.class || 'c-btn';
+        return `${baseClass} ${customClass} ${iconClass}`.trim();
     }
-    onStarHover(rating) {
-        const config = this.config();
-        if (config.readonly) {
-            return;
-        }
-        this.hoveredRating.set(rating);
-        this.updateStarVisuals(rating);
+    isActionDisabled(action) {
+        return false;
     }
-    onStarLeave() {
-        const config = this.config();
-        if (config.readonly) {
-            return;
+    onActionClick(action) {
+        if (action.callback) {
+            action.callback();
         }
-        this.hoveredRating.set(0);
-        this.updateStarVisuals(this.selectedRating());
     }
-    updateStarVisuals(targetRating) {
-        const container = document.querySelector(`[data-rating-id="${this.uniqueId()}"]`);
-        if (!container)
+    openModalActions() {
+        const actions = this.modalActions();
+        if (actions.length === 0)
             return;
-        const stars = container.querySelectorAll('.c-rating__filled-star');
-        stars.forEach((star, index) => {
-            const starValue = this.stars().length - index;
-            const element = star;
-            if (starValue <= targetRating) {
-                element.style.opacity = '1';
-                element.style.display = 'block';
-            }
-            else {
-                element.style.opacity = '0';
-                element.style.display = 'none';
+        const fixedActions = actions.map(action => ({
+            id: action.id,
+            label: action.label,
+            icon: action.icon,
+            class: action.class,
+            callback: action.callback,
+            requiredPermission: action.requiredPermission,
+            customAction: {
+                label: action.label,
+                title: action.label,
+                icon: action.icon,
+                callback: () => {
+                    if (action.callback) {
+                        action.callback();
+                    }
+                },
+                requiredPermission: action.requiredPermission,
+                shouldShow: () => action.visible !== false,
+                shouldDisable: () => action.disabled === true
             }
+        }));
+        this.fixedActionsMobileModalService.open({
+            title: 'Acciones',
+            actions: fixedActions
         });
     }
-    submitRating(event) {
-        this.loading.set(true);
-        this.ratingService.submitRating(event.endpoint, {
-            rating: event.rating,
-            label: event.label
-        }).subscribe({
-            next: (response) => {
-                this.loading.set(false);
-            },
-            error: (error) => {
-                console.error('Error submitting rating:', error);
-                this.loading.set(false);
-            }
-        });
-    }
-    getCurrentLabel() {
-        const config = this.config();
-        const currentRating = config.readonly
-            ? this.selectedRating()
-            : (this.hoveredRating() || this.selectedRating());
-        if (currentRating === 0) {
-            return config.defaultLabel || '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericFixedActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericFixedActionsComponent, isStandalone: true, selector: "core-generic-fixed-actions", host: { classAttribute: "c-fixed-actions c-fixed-actions--right" }, ngImport: i0, template: `
+    @if (shouldShow() && visibleActions().length > 0) {
+        @for (action of visibleActions(); track action.id) {
+          <button 
+            type="button"
+            [ngClass]="getActionClass(action)"
+            [disabled]="isActionDisabled(action)"
+            [title]="action.tooltip || action.label || ''"
+            [attr.aria-label]="action.tooltip || action.label || ''"
+            (click)="onActionClick(action)"
+            style="pointer-events: auto;">
+          </button>
         }
-        const star = this.stars().find(s => s.value === currentRating);
-        return star?.label || '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericRatingComponent, isStandalone: true, selector: "core-generic-rating", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { ratingChange: "ratingChange" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (config().title) {\n  <p class=\"u-text\"><strong>{{ config().title }}</strong></p>\n}\n\n<div class=\"c-rating\" [attr.data-rating-id]=\"uniqueId()\">\n  \n  <div class=\"c-rating__stars\">\n    @for (star of stars(); track star.id) {\n      <input \n        type=\"radio\" \n        [name]=\"getUniqueName()\" \n        [id]=\"getUniqueStarId(star.value)\" \n        [value]=\"star.value\"\n        [disabled]=\"config().readonly || loading()\"\n        (click)=\"onStarClick(star.value)\" />\n      \n      <label \n        [for]=\"getUniqueStarId(star.value)\" \n        [title]=\"star.label + ' estrellas'\"\n        class=\"icon-star\"\n        [class.c-rating__readonly]=\"config().readonly\"\n        [style.cursor]=\"config().readonly ? 'default' : 'pointer'\"\n        (mouseenter)=\"!config().readonly && onStarHover(star.value)\"\n        (mouseleave)=\"!config().readonly && onStarLeave()\">\n        <span class=\"c-rating__filled-star icon-star-filled\"></span>\n      </label>\n    }\n  </div>\n  \n  @if (config().showLabels !== false) {\n    <span class=\"c-rating__text\">{{ getCurrentLabel() }}</span>\n  }\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericRatingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-generic-rating', standalone: true, imports: [CommonModule, TranslateModule], hostDirectives: [CoreHostDirective], template: "@if (config().title) {\n  <p class=\"u-text\"><strong>{{ config().title }}</strong></p>\n}\n\n<div class=\"c-rating\" [attr.data-rating-id]=\"uniqueId()\">\n  \n  <div class=\"c-rating__stars\">\n    @for (star of stars(); track star.id) {\n      <input \n        type=\"radio\" \n        [name]=\"getUniqueName()\" \n        [id]=\"getUniqueStarId(star.value)\" \n        [value]=\"star.value\"\n        [disabled]=\"config().readonly || loading()\"\n        (click)=\"onStarClick(star.value)\" />\n      \n      <label \n        [for]=\"getUniqueStarId(star.value)\" \n        [title]=\"star.label + ' estrellas'\"\n        class=\"icon-star\"\n        [class.c-rating__readonly]=\"config().readonly\"\n        [style.cursor]=\"config().readonly ? 'default' : 'pointer'\"\n        (mouseenter)=\"!config().readonly && onStarHover(star.value)\"\n        (mouseleave)=\"!config().readonly && onStarLeave()\">\n        <span class=\"c-rating__filled-star icon-star-filled\"></span>\n      </label>\n    }\n  </div>\n  \n  @if (config().showLabels !== false) {\n    <span class=\"c-rating__text\">{{ getCurrentLabel() }}</span>\n  }\n</div> " }]
-        }] });
-
-var ProgressBarSize;
-(function (ProgressBarSize) {
-    ProgressBarSize["NORMAL"] = "";
-    ProgressBarSize["SMALL"] = "xs";
-    ProgressBarSize["LARGE"] = "xl";
-})(ProgressBarSize || (ProgressBarSize = {}));
-
-class ProgressBarComponent {
-    progress = input(0);
-    size = input(ProgressBarSize.NORMAL);
-    percentage = computed(() => {
-        return this.progress() / 100;
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: ProgressBarComponent, isStandalone: true, selector: "core-progress-bar", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-progress-bar c-progress-bar--{{ size() }}\" style=\"--progress: {{ percentage() }}\">\n    <div class=\"c-progress-bar__bar\"></div>\n</div>" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ProgressBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-progress-bar', standalone: true, imports: [], hostDirectives: [CoreHostDirective], template: "<div class=\"c-progress-bar c-progress-bar--{{ size() }}\" style=\"--progress: {{ percentage() }}\">\n    <div class=\"c-progress-bar__bar\"></div>\n</div>" }]
-        }] });
-
-class CardComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: CardComponent, isStandalone: true, selector: "core-card", hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: `
-    <div  class="u-card">
-      <ng-content></ng-content>
-    </div>`, isInline: true });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericFixedActionsComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'core-card',
+                    selector: 'core-generic-fixed-actions',
                     standalone: true,
-                    imports: [],
-                    hostDirectives: [CoreHostDirective],
+                    imports: [CommonModule],
                     template: `
-    <div  class="u-card">
-      <ng-content></ng-content>
-    </div>`
-                }]
-        }] });
-
-class CarouselComponent {
-    images = input([]);
-    config = input({});
-    carouselHolder = viewChild('carouselHolder');
-    carouselViewport = viewChild('carouselViewport');
-    currentIndex = signal(0);
-    timer = signal(null);
-    autoplay = computed(() => this.config().autoplay ?? false);
-    interval = computed(() => this.config().interval ?? 3000);
-    perView = computed(() => Math.max(1, this.config().perView ?? 1));
-    step = computed(() => Math.max(1, this.config().step ?? this.perView()));
-    showDots = computed(() => this.config().showDots ?? true);
-    showArrows = computed(() => this.config().showArrows ?? true);
-    arrowsOutside = computed(() => this.config().arrowsOutside ?? false);
-    itemsGap = computed(() => this.config().itemsGap ?? '10px');
-    controlsOffset = computed(() => this.config().controlsOffset ?? '2rem');
-    controlsSize = computed(() => this.config().controlsSize ?? '2.5rem');
-    ariaLabel = computed(() => this.config().ariaLabel ?? 'Galería de imágenes');
-    maxIndex = computed(() => Math.max(0, this.images().length - this.perView()));
-    pagesLength = computed(() => Math.max(1, Math.ceil(this.images().length / this.perView())));
-    dots = computed(() => Array.from({ length: this.pagesLength() }, (_, i) => i));
-    currentPage = computed(() => Math.min(this.pagesLength() - 1, Math.floor(this.currentIndex() / this.perView())));
-    carouselClasses = computed(() => {
-        const classes = ['c-img-carousel', 'js-img-carousel'];
-        if (this.arrowsOutside()) {
-            classes.push('c-img-carousel--arrows-out');
-        }
-        return classes;
-    });
-    constructor() {
-        effect(() => {
-            const viewport = this.carouselViewport();
-            if (viewport) {
-                const element = viewport.nativeElement;
-                element.style.setProperty('--per-view', this.perView().toString());
-                element.style.setProperty('--items-gap', this.itemsGap());
-                element.style.setProperty('--controls-offset', this.controlsOffset());
-                element.style.setProperty('--controls-size', this.controlsSize());
-            }
-        });
-        effect(() => {
-            const shouldAutoplay = this.autoplay() && this.images().length > 1;
-            const currentTimer = this.timer();
-            if (shouldAutoplay && !currentTimer) {
-                this.startAutoplay();
-            }
-            else if (!shouldAutoplay && currentTimer) {
-                this.stopAutoplay();
-            }
-        });
-        effect(() => {
-            const holder = this.carouselHolder();
-            const index = this.currentIndex();
-            if (holder) {
-                const element = holder.nativeElement;
-                const percentage = -(index * (100 / this.perView()));
-                element.style.transform = `translateX(${percentage}%)`;
-            }
-        });
-    }
-    ngAfterViewInit() {
-        this.goToSlide(0, false);
-    }
-    ngOnDestroy() {
-        this.stopAutoplay();
-    }
-    goToSlide(index, animate = true, fromAutoplay = false) {
-        if (index < 0) {
-            index = this.maxIndex();
-        }
-        else if (index > this.maxIndex()) {
-            index = 0;
-        }
-        const holder = this.carouselHolder();
-        if (holder) {
-            holder.nativeElement.style.transition = animate ? 'transform 350ms ease' : 'none';
-        }
-        this.currentIndex.set(index);
-        if (!fromAutoplay && this.autoplay()) {
-            this.restartAutoplay();
-        }
-    }
-    goToPage(pageIndex) {
-        const targetSlide = Math.min(this.maxIndex(), Math.max(0, pageIndex * this.perView()));
-        this.goToSlide(targetSlide, true, false);
-    }
-    goToNextSlide(fromAutoplay = false) {
-        this.goToSlide(this.currentIndex() + this.step(), true, fromAutoplay);
-    }
-    goToPrevSlide() {
-        this.goToSlide(this.currentIndex() - this.step(), true, false);
-    }
-    isDotActive(dotIndex) {
-        return dotIndex === this.currentPage();
-    }
-    startAutoplay() {
-        const currentTimer = this.timer();
-        if (currentTimer) {
-            clearInterval(currentTimer);
-        }
-        const intervalId = setInterval(() => {
-            this.goToNextSlide(true);
-        }, this.interval());
-        this.timer.set(intervalId);
-    }
-    stopAutoplay() {
-        const timerId = this.timer();
-        if (timerId) {
-            clearInterval(timerId);
-            this.timer.set(null);
-        }
-    }
-    restartAutoplay() {
-        if (this.autoplay()) {
-            this.startAutoplay();
-        }
-    }
-    onResize() {
-        this.goToSlide(this.currentIndex(), false);
-    }
-    onKeyDown(event) {
-        if (event.key === 'ArrowLeft') {
-            this.goToPrevSlide();
-        }
-        else if (event.key === 'ArrowRight') {
-            this.goToNextSlide();
-        }
-    }
-    getSlideStyle(index) {
-        return {
-            'flex': `0 0 ${100 / this.perView()}%`
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CarouselComponent, isStandalone: true, selector: "core-carousel", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()", "keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "carouselHolder", first: true, predicate: ["carouselHolder"], descendants: true, isSignal: true }, { propertyName: "carouselViewport", first: true, predicate: ["carouselViewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<div \n  [ngClass]=\"carouselClasses()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  tabindex=\"0\"\n  #carouselViewport\n  [class.is-multiple]=\"perView() > 1\">\n  \n  <div class=\"c-img-carousel__viewport\">\n    <div class=\"c-img-carousel__holder js-img-carousel-holder\" #carouselHolder>\n      <div \n        *ngFor=\"let image of images(); let i = index\"\n        class=\"c-img-carousel__slide js-img-carousel-slide\">\n        <div class=\"c-img-carousel__slide-inner\">\n          <core-image-preview\n            [src]=\"image.url\"\n            [alt]=\"image.alt || 'Image ' + (i + 1)\"\n            [title]=\"image.title || image.alt || 'Image ' + (i + 1)\">\n          </core-image-preview>\n        </div>\n      </div>\n    </div>\n    \n    @if (!config().arrowsOutside) {\n      <button \n        *ngIf=\"showArrows()\"\n        class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n        type=\"button\"\n        (click)=\"goToPrevSlide()\"\n        [attr.aria-label]=\"'Anterior'\"\n        data-control=\"prevBtn\">\n      </button>\n      \n      <button \n        *ngIf=\"showArrows()\"\n        class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n        type=\"button\"\n        (click)=\"goToNextSlide()\"\n        [attr.aria-label]=\"'Siguiente'\"\n        data-control=\"nextBtn\">\n      </button>\n    }\n    \n    <div \n      *ngIf=\"showDots()\"\n      class=\"c-img-carousel__dots js-img-carousel-nav\"\n      aria-label=\"Navegaci\u00F3n\">\n      <button\n        *ngFor=\"let page of dots(); let i = index\"\n        class=\"c-img-carousel__dot js-img-carousel-dot\"\n        type=\"button\"\n        (click)=\"goToPage(i)\"\n        [class.c-img-carousel__dot--active]=\"currentPage() === i\"\n        [attr.aria-label]=\"'Ir a p\u00E1gina ' + (i + 1)\"\n        [attr.aria-current]=\"currentPage() === i ? 'true' : 'false'\">\n      </button>\n    </div>\n  </div>\n  @if(config().arrowsOutside) {\n    <button \n      *ngIf=\"showArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n      type=\"button\"\n      (click)=\"goToPrevSlide()\"\n      [attr.aria-label]=\"'Anterior'\"\n      data-control=\"prevBtn\">\n    </button>\n    \n    <button \n      *ngIf=\"showArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n      type=\"button\"\n      (click)=\"goToNextSlide()\"\n      [attr.aria-label]=\"'Siguiente'\"\n      data-control=\"nextBtn\">\n    </button>\n  }\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ImagePreviewComponent, selector: "core-image-preview", inputs: ["src", "alt", "title", "width", "height", "objectFit", "borderRadius", "cursor", "loading", "isRelative", "showSkeleton", "skeletonAnimation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CarouselComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-carousel', standalone: true, imports: [CommonModule, ImagePreviewComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n  [ngClass]=\"carouselClasses()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  tabindex=\"0\"\n  #carouselViewport\n  [class.is-multiple]=\"perView() > 1\">\n  \n  <div class=\"c-img-carousel__viewport\">\n    <div class=\"c-img-carousel__holder js-img-carousel-holder\" #carouselHolder>\n      <div \n        *ngFor=\"let image of images(); let i = index\"\n        class=\"c-img-carousel__slide js-img-carousel-slide\">\n        <div class=\"c-img-carousel__slide-inner\">\n          <core-image-preview\n            [src]=\"image.url\"\n            [alt]=\"image.alt || 'Image ' + (i + 1)\"\n            [title]=\"image.title || image.alt || 'Image ' + (i + 1)\">\n          </core-image-preview>\n        </div>\n      </div>\n    </div>\n    \n    @if (!config().arrowsOutside) {\n      <button \n        *ngIf=\"showArrows()\"\n        class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n        type=\"button\"\n        (click)=\"goToPrevSlide()\"\n        [attr.aria-label]=\"'Anterior'\"\n        data-control=\"prevBtn\">\n      </button>\n      \n      <button \n        *ngIf=\"showArrows()\"\n        class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n        type=\"button\"\n        (click)=\"goToNextSlide()\"\n        [attr.aria-label]=\"'Siguiente'\"\n        data-control=\"nextBtn\">\n      </button>\n    }\n    \n    <div \n      *ngIf=\"showDots()\"\n      class=\"c-img-carousel__dots js-img-carousel-nav\"\n      aria-label=\"Navegaci\u00F3n\">\n      <button\n        *ngFor=\"let page of dots(); let i = index\"\n        class=\"c-img-carousel__dot js-img-carousel-dot\"\n        type=\"button\"\n        (click)=\"goToPage(i)\"\n        [class.c-img-carousel__dot--active]=\"currentPage() === i\"\n        [attr.aria-label]=\"'Ir a p\u00E1gina ' + (i + 1)\"\n        [attr.aria-current]=\"currentPage() === i ? 'true' : 'false'\">\n      </button>\n    </div>\n  </div>\n  @if(config().arrowsOutside) {\n    <button \n      *ngIf=\"showArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n      type=\"button\"\n      (click)=\"goToPrevSlide()\"\n      [attr.aria-label]=\"'Anterior'\"\n      data-control=\"prevBtn\">\n    </button>\n    \n    <button \n      *ngIf=\"showArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n      type=\"button\"\n      (click)=\"goToNextSlide()\"\n      [attr.aria-label]=\"'Siguiente'\"\n      data-control=\"nextBtn\">\n    </button>\n  }\n</div>" }]
-        }], ctorParameters: () => [], propDecorators: { onResize: [{
-                type: HostListener,
-                args: ['window:resize']
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
-
-var ChatMessageType;
-(function (ChatMessageType) {
-    ChatMessageType["TEXT"] = "text";
-    ChatMessageType["IMAGE"] = "image";
-    ChatMessageType["FILE"] = "file";
-    ChatMessageType["SYSTEM"] = "system";
-    ChatMessageType["NOTIFICATION"] = "notification";
-    ChatMessageType["CUSTOM"] = "custom";
-})(ChatMessageType || (ChatMessageType = {}));
-
-var ChatMessagePosition;
-(function (ChatMessagePosition) {
-    ChatMessagePosition["LEFT"] = "left";
-    ChatMessagePosition["RIGHT"] = "right";
-})(ChatMessagePosition || (ChatMessagePosition = {}));
-
-var FilePreviewActionType;
-(function (FilePreviewActionType) {
-    FilePreviewActionType["DOWNLOAD"] = "download";
-    FilePreviewActionType["DELETE"] = "delete";
-    FilePreviewActionType["PREVIEW"] = "preview";
-})(FilePreviewActionType || (FilePreviewActionType = {}));
-
-class GenericChatService {
-    constructor() { }
-    formatTimestamp(timestamp, format) {
-        if (!timestamp)
-            return '';
-        const timeFormat = format || 'dd/MM/yyyy HH:mm';
-        if (timeFormat === 'dd/MM/yyyy HH:mm') {
-            const day = timestamp.getDate().toString().padStart(2, '0');
-            const month = (timestamp.getMonth() + 1).toString().padStart(2, '0');
-            const year = timestamp.getFullYear();
-            const hours = timestamp.getHours().toString().padStart(2, '0');
-            const minutes = timestamp.getMinutes().toString().padStart(2, '0');
-            return `${day}/${month}/${year} ${hours}:${minutes}`;
-        }
-        if (timeFormat === 'HH:mm') {
-            const hours = timestamp.getHours().toString().padStart(2, '0');
-            const minutes = timestamp.getMinutes().toString().padStart(2, '0');
-            return `${hours}:${minutes}`;
-        }
-        return timestamp.toLocaleTimeString();
-    }
-    formatDate(timestamp, format) {
-        if (!timestamp)
-            return '';
-        const dateFormat = format || 'dd/MM/yyyy';
-        if (dateFormat === 'dd/MM/yyyy') {
-            const day = timestamp.getDate().toString().padStart(2, '0');
-            const month = (timestamp.getMonth() + 1).toString().padStart(2, '0');
-            const year = timestamp.getFullYear();
-            return `${day}/${month}/${year}`;
+    @if (shouldShow() && visibleActions().length > 0) {
+        @for (action of visibleActions(); track action.id) {
+          <button 
+            type="button"
+            [ngClass]="getActionClass(action)"
+            [disabled]="isActionDisabled(action)"
+            [title]="action.tooltip || action.label || ''"
+            [attr.aria-label]="action.tooltip || action.label || ''"
+            (click)="onActionClick(action)"
+            style="pointer-events: auto;">
+          </button>
         }
-        return timestamp.toLocaleDateString();
-    }
-    shouldUseCustomTemplate(message, config) {
-        return message.type === ChatMessageType.CUSTOM &&
-            !!config.customMessageTemplates &&
-            !!message.customData?.templateKey &&
-            !!config.customMessageTemplates.has(message.customData.templateKey);
-    }
-    getMessageClasses(message, config) {
-        const baseClass = 'c-chat-bubble';
-        const positionClass = message.position === 'right' ? 'c-chat-bubble--right' : '';
-        const customClass = message.customClass || '';
-        const configClass = config.customCssClasses?.messageItem || '';
-        return [baseClass, positionClass, customClass, configClass]
-            .filter(cls => cls.length > 0)
-            .join(' ');
     }
-    getContentClasses(message, config) {
-        const baseClass = 'c-chat-bubble__content';
-        const typeClass = message.type ? `c-chat-bubble__content--${message.type}` : '';
-        const configClass = config.customCssClasses?.messageItem || '';
-        return [baseClass, typeClass, configClass]
-            .filter(cls => cls.length > 0)
-            .join(' ');
-    }
-    getTimestampClasses(config) {
-        const baseClass = 'c-chat-bubble__timestamp';
-        const configClass = config.customCssClasses?.messageItem || '';
-        return [baseClass, configClass]
-            .filter(cls => cls.length > 0)
-            .join(' ');
-    }
-    getImageClasses(config) {
-        const baseClass = 'c-chat-bubble__image';
-        const configClass = config.customCssClasses?.messageItem || '';
-        return [baseClass, configClass]
-            .filter(cls => cls.length > 0)
-            .join(' ');
-    }
-    validateMessage(message) {
-        if (!message)
-            return false;
-        if (!message.id || !message.content)
-            return false;
-        if (!message.timestamp)
-            return false;
-        if (!message.type)
-            return false;
-        return true;
-    }
-    getDefaultConfig() {
-        return {
-            maxHeight: '400px',
-            placeholder: 'Escribe tu mensaje...',
-            showTimestamps: true,
-            showAvatars: true,
-            showTypingIndicator: false,
-            allowFileAttachments: false,
-            allowEmojis: false,
-            maxMessages: 100,
-            readOnly: false,
-            autoScroll: true,
-            dateFormat: 'dd/MM/yyyy',
-            timeFormat: 'HH:mm',
-            groupByDate: false,
-            theme: 'light'
-        };
-    }
-    mergeConfig(userConfig) {
-        return { ...this.getDefaultConfig(), ...userConfig };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericChatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericChatService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericChatService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
+  `,
+                    host: {
+                        'class': 'c-fixed-actions c-fixed-actions--right'
+                    }
                 }]
         }], ctorParameters: () => [] });
 
-class CoreUiTranslateService {
-    translateService = inject(TranslateService);
-    initialize(defaultLang = 'es', currentLang) {
-        this.translateService.setDefaultLang(defaultLang);
-        this.translateService.use(currentLang || defaultLang);
-    }
-    changeLanguage(lang) {
-        return this.translateService.use(lang);
+class LayoutComponent {
+    navItems = input([]);
+    bottomNavItems = input([]);
+    collapsedLogo = input('');
+    expandedLogo = input('');
+    logoImagesConfig = input(null);
+    navConfig = input({});
+    mobileHeaderConfig = input(null);
+    onLogout = output();
+    onMobileRefresh = output();
+    onMobileFilter = output();
+    dialogService = inject(ConfirmationDialogService);
+    mainNavService = inject(MainNavService);
+    layoutService = inject(LayoutService);
+    layoutStateService = inject(LayoutStateService);
+    sidebarMobileModalService = inject(SidebarMobileModalService);
+    templateRegistry = inject(SidebarTemplateRegistryService);
+    headerService = inject(HeaderService);
+    mobileResolutionService = inject(MobileResolutionService);
+    SidebarVisibility = SidebarVisibility;
+    ModalMode = ModalMode;
+    SidebarMobileType = SidebarMobileType;
+    screenWidth = signal(typeof window !== 'undefined' ? window.innerWidth : 1024);
+    isSidebarCollapsed = false;
+    isHeaderVisible = false;
+    isMobile = this.mobileResolutionService.isMobile;
+    shouldShowMobileHeader = this.mobileResolutionService.shouldShowMobileHeader;
+    mainNavComponent;
+    get leftSidebarConfig() {
+        return this.layoutStateService.getLeftSidebarConfig()();
     }
-    instant(key, params) {
-        return this.translateService.instant(key, params);
+    get rightSidebarConfig() {
+        return this.layoutStateService.getRightSidebarConfig()();
     }
-    get(key, params) {
-        return this.translateService.get(key, params);
+    ngOnInit() {
+        this.mainNavService.isCollapsed$.subscribe(isCollapsed => {
+            this.isSidebarCollapsed = isCollapsed;
+        });
+        this.layoutStateService.isHeaderVisible$().subscribe(isVisible => {
+            this.isHeaderVisible = isVisible;
+        });
+        this.updateScreenWidth();
     }
-    getMany(keys, params) {
-        return this.translateService.get(keys, params);
+    onResize(event) {
+        this.updateScreenWidth();
     }
-    getCurrentLang() {
-        return this.translateService.currentLang;
+    updateScreenWidth() {
+        if (typeof window !== 'undefined') {
+            this.screenWidth.set(window.innerWidth);
+        }
     }
-    getDefaultLang() {
-        return this.translateService.getDefaultLang();
+    isMobileView(config) {
+        const responsiveConfig = config?.responsiveConfig;
+        const maxBreakpoint = responsiveConfig?.maxMobileBreakpoint ?? this.mobileResolutionService.breakpoint();
+        const minBreakpoint = responsiveConfig?.minMobileBreakpoint ?? 0;
+        return this.screenWidth() <= maxBreakpoint && this.screenWidth() >= minBreakpoint;
     }
-    getTranslateService() {
-        return this.translateService;
+    shouldRenderLeftSidebar() {
+        const config = this.leftSidebarConfig;
+        const responsiveConfig = config?.responsiveConfig;
+        if (!responsiveConfig)
+            return true;
+        if (this.isMobileView(config) && responsiveConfig.mobileType === SidebarMobileType.MODAL) {
+            return false;
+        }
+        return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CoreUiTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CoreUiTranslateService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CoreUiTranslateService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class DataStoreService {
-    stores = new Map();
-    defaultIdSelector(item) {
-        if (item && typeof item === 'object' && 'id' in item) {
-            const idVal = item.id;
-            if (typeof idVal === 'string' || typeof idVal === 'number') {
-                return idVal;
-            }
+    shouldRenderRightSidebar() {
+        const config = this.rightSidebarConfig;
+        const responsiveConfig = config?.responsiveConfig;
+        if (!responsiveConfig)
+            return true;
+        if (this.isMobileView(config) && responsiveConfig.mobileType === SidebarMobileType.MODAL) {
+            return false;
         }
-        throw new Error('No se encontró una propiedad id (string o number) y no se pasó idSelector.');
+        return true;
     }
-    ensureStore(key, idSelector) {
-        if (!this.stores.has(key)) {
-            this.stores.set(key, {
-                items: signal([]),
-                index: new Map(),
-                idSelector: idSelector ?? this.defaultIdSelector,
-            });
+    getEffectiveLeftSidebarVisibility() {
+        if (!this.shouldRenderLeftSidebar()) {
+            return SidebarVisibility.HIDE;
         }
-        else if (idSelector) {
-            this.stores.get(key).idSelector = idSelector;
+        return this.layoutService.sidebarLeft().visibility;
+    }
+    getEffectiveLeftSidebarWidth() {
+        if (!this.shouldRenderLeftSidebar()) {
+            return SidebarWidth.DEFAULT;
         }
-        return this.stores.get(key);
+        return this.layoutService.sidebarLeft().width;
     }
-    hydrate(key, items, idSelector) {
-        const store = this.ensureStore(key, idSelector);
-        const copy = [...items];
-        const idx = new Map();
-        for (const it of copy) {
-            idx.set(String(store.idSelector(it)), it);
+    getEffectiveLeftSidebarHeight() {
+        if (!this.shouldRenderLeftSidebar()) {
+            return SidebarHeight.DEFAULT;
         }
-        store.items.set(copy);
-        store.index = idx;
+        return this.layoutService.sidebarLeft().height;
     }
-    upsertOne(key, item, idSelector) {
-        const store = this.ensureStore(key, idSelector);
-        const id = String(store.idSelector(item));
-        const current = store.items();
-        const pos = current.findIndex((i) => String(store.idSelector(i)) === id);
-        if (pos >= 0) {
-            const next = [...current];
-            next[pos] = item;
-            store.items.set(next);
+    getEffectiveRightSidebarVisibility() {
+        if (!this.shouldRenderRightSidebar()) {
+            return SidebarVisibility.HIDE;
         }
-        else {
-            store.items.set([...current, item]);
+        return this.layoutService.sidebarRight().visibility;
+    }
+    getEffectiveRightSidebarWidth() {
+        if (!this.shouldRenderRightSidebar()) {
+            return SidebarWidth.DEFAULT;
         }
-        store.index.set(id, item);
+        return this.layoutService.sidebarRight().width;
     }
-    upsertMany(key, items, idSelector) {
-        for (const it of items) {
-            this.upsertOne(key, it, idSelector);
+    getEffectiveRightSidebarHeight() {
+        if (!this.shouldRenderRightSidebar()) {
+            return SidebarHeight.DEFAULT;
         }
+        return this.layoutService.sidebarRight().height;
     }
-    removeOne(key, id, idSelector) {
-        const store = this.ensureStore(key, idSelector);
-        const idStr = String(id);
-        const next = store
-            .items()
-            .filter((i) => String(store.idSelector(i)) !== idStr);
-        store.items.set(next);
-        store.index.delete(idStr);
+    toggleSidebar() {
+        this.mainNavService.toggleSidebarState();
     }
-    removeMany(key, ids, idSelector) {
-        const store = this.ensureStore(key, idSelector);
-        const idsSet = new Set(ids.map(String));
-        const next = store
-            .items()
-            .filter((i) => !idsSet.has(String(store.idSelector(i))));
-        store.items.set(next);
-        for (const id of ids) {
-            store.index.delete(String(id));
-        }
+    getHeaderClasses() {
+        const baseClass = 'o-layout__header';
+        const customClass = this.headerService.getGlobalCustomClass()();
+        return customClass ? `${baseClass} ${customClass}` : baseClass;
     }
-    clear(key, idSelector) {
-        const store = this.ensureStore(key, idSelector);
-        store.items.set([]);
-        store.index.clear();
+    onFilterRequested() {
+        const event = new CustomEvent('filterRequested');
+        window.dispatchEvent(event);
     }
-    selectAll(key, idSelector) {
-        const store = this.ensureStore(key, idSelector);
-        return computed(() => store.items());
+    onCreateRequested() {
+        const event = new CustomEvent('createRequested');
+        window.dispatchEvent(event);
     }
-    getById(key, id, idSelector) {
-        const store = this.ensureStore(key, idSelector);
-        return store.index.get(String(id));
+    onGlobalActionTriggered(action) {
+        const event = new CustomEvent('globalActionTriggered', { detail: action });
+        window.dispatchEvent(event);
     }
-    selectById(key, id, idSelector) {
-        const store = this.ensureStore(key, idSelector);
-        const idStr = String(id);
-        return computed(() => {
-            store.items();
-            return store.index.get(idStr);
-        });
+    onMobileMenuClick() {
+        this.mainNavComponent?.toggleMobileNav();
     }
-    count(key, idSelector) {
-        const store = this.ensureStore(key, idSelector);
-        return store.items().length;
+    onMobileRefreshClick() {
+        const refreshCallback = this.headerService.getRefreshCallback()();
+        if (refreshCallback) {
+            refreshCallback();
+        }
+        this.onMobileRefresh.emit();
     }
-    hasData(key) {
-        return this.stores.has(key) && this.stores.get(key).items().length > 0;
+    onMobileFilterClick() {
+        const event = new CustomEvent('filterRequested');
+        window.dispatchEvent(event);
+        this.onMobileFilter.emit();
     }
-    getStoreKeys() {
-        return Array.from(this.stores.keys());
+    setLeftSidebarConfig(config) {
+        this.layoutStateService.setLeftSidebarConfig(config);
+    }
+    setRightSidebarConfig(config) {
+        this.layoutStateService.setRightSidebarConfig(config);
+    }
+    hideLeftSidebar() {
+        this.layoutStateService.hideLeftSidebar();
+    }
+    hideRightSidebar() {
+        this.layoutStateService.hideRightSidebar();
+    }
+    getSidebarModalTitle() {
+        const modalState = this.sidebarMobileModalService.getModalState();
+        const config = modalState.config();
+        if (!config)
+            return '';
+        if (config.title) {
+            return config.title;
+        }
+        if (config.templateKey) {
+            return config.title || 'Sidebar';
+        }
+        return 'Menu';
     }
-    removeStore(key) {
-        this.stores.delete(key);
+    getSidebarModalButtons() {
+        return [
+            {
+                text: 'modal.cancel',
+                action: () => this.sidebarMobileModalService.closeModal(),
+            },
+        ];
     }
-    flush(key) {
-        if (key) {
-            if (this.stores.has(key)) {
-                const store = this.stores.get(key);
-                store.items.set([]);
-                store.index.clear();
-            }
+    get sidebarModalContentTemplate() {
+        const modalState = this.sidebarMobileModalService.getModalState();
+        const config = modalState.config();
+        if (!config)
+            return null;
+        if (config.customTemplate) {
+            return config.customTemplate;
         }
-        else {
-            for (const [storeKey, store] of this.stores.entries()) {
-                store.items.set([]);
-                store.index.clear();
-            }
+        if (config.templateKey) {
+            return this.templateRegistry.getTemplate(config.templateKey);
         }
+        return null;
     }
-    flushAll() {
-        this.stores.clear();
+    logout() {
+        this.onLogout.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataStoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataStoreService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LayoutComponent, isStandalone: true, selector: "core-layout", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, collapsedLogo: { classPropertyName: "collapsedLogo", publicName: "collapsedLogo", isSignal: true, isRequired: false, transformFunction: null }, expandedLogo: { classPropertyName: "expandedLogo", publicName: "expandedLogo", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null }, mobileHeaderConfig: { classPropertyName: "mobileHeaderConfig", publicName: "mobileHeaderConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout", onMobileRefresh: "onMobileRefresh", onMobileFilter: "onMobileFilter" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "mainNavComponent", first: true, predicate: MainNavComponent, descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"o-layout\" \n  [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n  [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n  [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n  [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n  [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n  [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n  [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n  >\n\n  <!-- Nav -->\n  <core-main-nav class=\"o-layout__nav\" \n    (toggleSidebar)=\"toggleSidebar()\"\n    [navItems]=\"navItems()\"\n    [navConfig]=\"navConfig()\"\n    [bottomNavItems]=\"bottomNavItems()\"\n    [logoImagesConfig]=\"logoImagesConfig()\"\n    [collapsedLogo]=\"collapsedLogo()\"\n    [expandedLogo]=\"expandedLogo()\"\n    (onLogout)=\"logout()\"\n    >\n  </core-main-nav>\n\n  <!-- Main -->\n  <div class=\"o-layout__body\">\n    \n    @if(shouldShowMobileHeader() && mobileHeaderConfig()) {\n      <core-mobile-header\n        class=\"o-layout__header c-header-mobile\"\n        [config]=\"mobileHeaderConfig()!\"\n        (menuClick)=\"onMobileMenuClick()\"\n        (refreshClick)=\"onMobileRefreshClick()\"\n        (filterClick)=\"onMobileFilterClick()\">\n      </core-mobile-header>\n    }\n\n    @if(layoutStateService.isHeaderVisible$() | async) {\n      @if(!shouldShowMobileHeader()) {\n        <core-header\n          [class]=\"getHeaderClasses()\"\n          (filterRequested)=\"onFilterRequested()\"\n          (createRequested)=\"onCreateRequested()\"\n          (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n        </core-header>\n      }\n    }\n\n    @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--left\"\n        [config]=\"leftSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n    <ng-content></ng-content>\n\n    @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--right\"\n        [config]=\"rightSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n\n    @if(dialogService.isOpen$()) {\n      <core-confirmation-dialog\n        [isOpen]=\"dialogService.isOpen$()\"\n        [config]=\"dialogService.config$()\"\n        (confirm)=\"dialogService.confirm($event)\"\n        (cancel)=\"dialogService.cancel()\"\n      ></core-confirmation-dialog>\n    }\n\n    @if(sidebarMobileModalService.isOpen()) {\n      <core-generic-modal\n        [isOpen]=\"sidebarMobileModalService.isOpen()\"\n        [mode]=\"ModalMode.CREATE\"\n        [title]=\"getSidebarModalTitle()\"\n        [customTemplate]=\"sidebarModalContentTemplate\"\n        (close)=\"sidebarMobileModalService.closeModal()\"\n        [buttonConfig]=\"getSidebarModalButtons()\">\n      </core-generic-modal>\n    }\n\n  </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Fixed Actions (Mobile) -->\n<core-generic-fixed-actions class=\"c-fixed-actions c-fixed-actions--right\"/>\n\n<!-- Fixed Actions Mobile Modal -->\n<core-fixed-actions-mobile-modal />\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- Gallery Modal Global -->\n<core-gallery-modal></core-gallery-modal>\n\n<!-- ! Refactor: End -->", dependencies: [{ kind: "component", type: MainNavComponent, selector: "core-main-nav", inputs: ["navConfig", "appVersion", "navItems", "bottomNavItems", "isProduction", "logoImagesConfig", "collapsedLogo", "expandedLogo"], outputs: ["onLogout"] }, { kind: "component", type: HeaderComponent, selector: "core-header", outputs: ["filterRequested", "createRequested", "globalActionTriggered"] }, { kind: "component", type: MobileHeaderComponent, selector: "core-mobile-header", inputs: ["config"], outputs: ["menuClick", "refreshClick", "filterClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: ConfirmationDialogComponent, selector: "core-confirmation-dialog", inputs: ["isOpen", "config"], outputs: ["confirm", "cancel"] }, { kind: "component", type: GenericSidebarComponent, selector: "core-generic-sidebar", inputs: ["config", "position", "customTemplate"], outputs: ["itemClicked", "subItemClicked"] }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "steps", "title", "isMultiple", "customTemplate", "customViewTemplate", "finalStepTemplate", "buttonConfig", "modelFactory", "errors", "validators", "customHasChanges", "stepValidationEnabled", "allowFreeNavigation", "autoMarkCompleted"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: ImageModalComponent, selector: "core-image-modal", outputs: ["modalClosed"] }, { kind: "component", type: GalleryModalComponent, selector: "core-gallery-modal" }, { kind: "component", type: SidebarCustomModalComponent, selector: "core-sidebar-custom-modal" }, { kind: "component", type: GenericFixedActionsComponent, selector: "core-generic-fixed-actions" }, { kind: "component", type: FixedActionsMobileModalComponent, selector: "core-fixed-actions-mobile-modal" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataStoreService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-layout', imports: [
+                        MainNavComponent,
+                        HeaderComponent,
+                        MobileHeaderComponent,
+                        CommonModule,
+                        ConfirmationDialogComponent,
+                        GenericSidebarComponent,
+                        GenericModalComponent,
+                        ImageModalComponent,
+                        GalleryModalComponent,
+                        SidebarCustomModalComponent,
+                        GenericFixedActionsComponent,
+                        FixedActionsMobileModalComponent
+                    ], hostDirectives: [CoreHostDirective], template: "<div class=\"o-layout\" \n  [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n  [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n  [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n  [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n  [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n  [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n  [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n  >\n\n  <!-- Nav -->\n  <core-main-nav class=\"o-layout__nav\" \n    (toggleSidebar)=\"toggleSidebar()\"\n    [navItems]=\"navItems()\"\n    [navConfig]=\"navConfig()\"\n    [bottomNavItems]=\"bottomNavItems()\"\n    [logoImagesConfig]=\"logoImagesConfig()\"\n    [collapsedLogo]=\"collapsedLogo()\"\n    [expandedLogo]=\"expandedLogo()\"\n    (onLogout)=\"logout()\"\n    >\n  </core-main-nav>\n\n  <!-- Main -->\n  <div class=\"o-layout__body\">\n    \n    @if(shouldShowMobileHeader() && mobileHeaderConfig()) {\n      <core-mobile-header\n        class=\"o-layout__header c-header-mobile\"\n        [config]=\"mobileHeaderConfig()!\"\n        (menuClick)=\"onMobileMenuClick()\"\n        (refreshClick)=\"onMobileRefreshClick()\"\n        (filterClick)=\"onMobileFilterClick()\">\n      </core-mobile-header>\n    }\n\n    @if(layoutStateService.isHeaderVisible$() | async) {\n      @if(!shouldShowMobileHeader()) {\n        <core-header\n          [class]=\"getHeaderClasses()\"\n          (filterRequested)=\"onFilterRequested()\"\n          (createRequested)=\"onCreateRequested()\"\n          (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n        </core-header>\n      }\n    }\n\n    @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--left\"\n        [config]=\"leftSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n    <ng-content></ng-content>\n\n    @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--right\"\n        [config]=\"rightSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n\n    @if(dialogService.isOpen$()) {\n      <core-confirmation-dialog\n        [isOpen]=\"dialogService.isOpen$()\"\n        [config]=\"dialogService.config$()\"\n        (confirm)=\"dialogService.confirm($event)\"\n        (cancel)=\"dialogService.cancel()\"\n      ></core-confirmation-dialog>\n    }\n\n    @if(sidebarMobileModalService.isOpen()) {\n      <core-generic-modal\n        [isOpen]=\"sidebarMobileModalService.isOpen()\"\n        [mode]=\"ModalMode.CREATE\"\n        [title]=\"getSidebarModalTitle()\"\n        [customTemplate]=\"sidebarModalContentTemplate\"\n        (close)=\"sidebarMobileModalService.closeModal()\"\n        [buttonConfig]=\"getSidebarModalButtons()\">\n      </core-generic-modal>\n    }\n\n  </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Fixed Actions (Mobile) -->\n<core-generic-fixed-actions class=\"c-fixed-actions c-fixed-actions--right\"/>\n\n<!-- Fixed Actions Mobile Modal -->\n<core-fixed-actions-mobile-modal />\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- Gallery Modal Global -->\n<core-gallery-modal></core-gallery-modal>\n\n<!-- ! Refactor: End -->" }]
+        }], propDecorators: { mainNavComponent: [{
+                type: ViewChild,
+                args: [MainNavComponent]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+class LayoutAuth {
+    config = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutAuth, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LayoutAuth, isStandalone: true, selector: "core-layout-auth", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-login\">\n    @if (config().patternUrl) {\n        <picture class=\"c-login__bg\">\n            <img [src]=\"config().patternUrl!\" alt=\"Background pattern\" width=\"1044\" height=\"889\" />\n        </picture>\n    }\n\n    @if (config().mainLogoUrl) {\n        <picture class=\"c-login__logo\">\n            <img [src]=\"config().mainLogoUrl!\" alt=\"Main logo\">\n        </picture>\n    }\n    \n    <div class=\"c-login__main c-entry-group\">\n      <ng-content></ng-content>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutAuth, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-layout-auth', imports: [
+                        CommonModule
+                    ], hostDirectives: [CoreHostDirective], template: "<div class=\"c-login\">\n    @if (config().patternUrl) {\n        <picture class=\"c-login__bg\">\n            <img [src]=\"config().patternUrl!\" alt=\"Background pattern\" width=\"1044\" height=\"889\" />\n        </picture>\n    }\n\n    @if (config().mainLogoUrl) {\n        <picture class=\"c-login__logo\">\n            <img [src]=\"config().mainLogoUrl!\" alt=\"Main logo\">\n        </picture>\n    }\n    \n    <div class=\"c-login__main c-entry-group\">\n      <ng-content></ng-content>\n    </div>\n</div>" }]
+        }] });
+
+var RatingSize;
+(function (RatingSize) {
+    RatingSize["SMALL"] = "small";
+    RatingSize["MEDIUM"] = "medium";
+    RatingSize["LARGE"] = "large";
+})(RatingSize || (RatingSize = {}));
+
+var RatingType;
+(function (RatingType) {
+    RatingType["STARS"] = "stars";
+    RatingType["NUMBERS"] = "numbers";
+    RatingType["CUSTOM"] = "custom";
+})(RatingType || (RatingType = {}));
+
+class RatingService {
+    apiService = inject(ApiService);
+    /**
+     * Submit a rating to the specified endpoint
+     * @param endpoint - The API endpoint to submit the rating to
+     * @param ratingData - The rating data to submit
+     * @returns Observable with the API response
+     */
+    submitRating(endpoint, ratingData) {
+        return this.apiService.createObj(endpoint, ratingData, false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: RatingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: RatingService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: RatingService, decorators: [{
             type: Injectable,
-            args: [{ providedIn: 'root' }]
+            args: [{
+                    providedIn: 'root'
+                }]
         }] });
 
-class CustomClassService {
-    rendererFactory;
-    dataStore;
-    renderer;
-    STORE_KEY = 'custom-class-operations';
-    operationCounter = 0;
-    constructor(rendererFactory, dataStore) {
-        this.rendererFactory = rendererFactory;
-        this.dataStore = dataStore;
-        this.renderer = this.rendererFactory.createRenderer(null, null);
-        // Initialize the store
-        this.dataStore.hydrate(this.STORE_KEY, []);
+class GenericRatingComponent {
+    ratingService = inject(RatingService);
+    config = input.required();
+    ratingChange = output();
+    selectedRating = signal(0);
+    hoveredRating = signal(0);
+    stars = signal([]);
+    loading = signal(false);
+    uniqueId = signal('');
+    RatingSize = RatingSize;
+    RatingType = RatingType;
+    ngOnInit() {
+        this.initializeStars();
+        this.generateUniqueId();
+        this.initializeDefaultRating();
+        setTimeout(() => {
+            this.updateStarVisuals(this.selectedRating());
+        }, 0);
     }
-    ngOnDestroy() {
-        this.clearHistory();
-        this.dataStore.removeStore(this.STORE_KEY);
+    generateUniqueId() {
+        const timestamp = Date.now();
+        const random1 = Math.floor(Math.random() * 10000);
+        const random2 = Math.floor(Math.random() * 10000);
+        const performanceTime = performance.now();
+        const instanceId = Math.random().toString(36).substring(2, 15);
+        this.uniqueId.set(`rating-${timestamp}-${random1}-${random2}-${performanceTime.toString().replace('.', '')}-${instanceId}`);
     }
-    addClass(target, classNames, parent) {
-        const elements = this.resolveElements(target, parent);
-        if (elements.length === 0) {
-            this.recordOperation('add', target, classNames, false);
-            return false;
+    initializeDefaultRating() {
+        const config = this.config();
+        if (config.defaultRating && config.defaultRating > 0 && config.defaultRating <= config.totalStars) {
+            this.selectedRating.set(config.defaultRating);
         }
-        const classes = Array.isArray(classNames) ? classNames : [classNames];
-        elements.forEach(element => {
-            classes.forEach(className => {
-                if (className && className.trim()) {
-                    this.renderer.addClass(element, className.trim());
-                }
-            });
-        });
-        this.recordOperation('add', target, classes, true);
-        return true;
     }
-    removeClass(target, classNames, parent) {
-        const elements = this.resolveElements(target, parent);
-        if (elements.length === 0) {
-            this.recordOperation('remove', target, classNames, false);
-            return false;
-        }
-        const classes = Array.isArray(classNames) ? classNames : [classNames];
-        elements.forEach(element => {
-            classes.forEach(className => {
-                if (className && className.trim()) {
-                    this.renderer.removeClass(element, className.trim());
-                }
-            });
-        });
-        this.recordOperation('remove', target, classes, true);
-        return true;
+    getUniqueName() {
+        return `star-${this.uniqueId()}`;
     }
-    toggleClass(target, classNames, parent) {
-        const elements = this.resolveElements(target, parent);
-        if (elements.length === 0) {
-            this.recordOperation('toggle', target, classNames, false);
-            return false;
-        }
-        const classes = Array.isArray(classNames) ? classNames : [classNames];
-        elements.forEach(element => {
-            classes.forEach(className => {
-                if (className && className.trim()) {
-                    const trimmedClass = className.trim();
-                    if (element.classList.contains(trimmedClass)) {
-                        this.renderer.removeClass(element, trimmedClass);
-                    }
-                    else {
-                        this.renderer.addClass(element, trimmedClass);
-                    }
-                }
+    getUniqueStarId(starValue) {
+        return `star-${this.uniqueId()}-${starValue}`;
+    }
+    initializeStars() {
+        const config = this.config();
+        const totalStars = config.totalStars || 5;
+        const starsArray = [];
+        for (let i = totalStars; i >= 1; i--) {
+            starsArray.push({
+                value: i,
+                label: config.starLabels?.[i] || `${i}`,
+                id: `star-${i}`
             });
-        });
-        this.recordOperation('toggle', target, classes, true);
-        return true;
+        }
+        this.stars.set(starsArray);
     }
-    hasClass(target, className, parent) {
-        const elements = this.resolveElements(target, parent);
-        if (elements.length === 0) {
-            return false;
+    onStarClick(rating) {
+        const config = this.config();
+        if (config.readonly) {
+            return;
+        }
+        this.selectedRating.set(rating);
+        this.updateStarVisuals(rating);
+        const event = {
+            rating,
+            label: this.stars().find(star => star.value === rating)?.label || '',
+            endpoint: config.endpoint
+        };
+        this.ratingChange.emit(event);
+        if (config.endpoint && config.endpoint.trim() !== '') {
+            this.submitRating(event);
         }
-        const element = elements[0];
-        return element.classList.contains(className.trim());
     }
-    replaceClass(target, oldClass, newClass, parent) {
-        const elements = this.resolveElements(target, parent);
-        if (elements.length === 0) {
-            this.recordOperation('replace', target, [newClass], false, oldClass);
-            return false;
+    onStarHover(rating) {
+        const config = this.config();
+        if (config.readonly) {
+            return;
+        }
+        this.hoveredRating.set(rating);
+        this.updateStarVisuals(rating);
+    }
+    onStarLeave() {
+        const config = this.config();
+        if (config.readonly) {
+            return;
         }
-        elements.forEach(element => {
-            if (oldClass && oldClass.trim()) {
-                this.renderer.removeClass(element, oldClass.trim());
+        this.hoveredRating.set(0);
+        this.updateStarVisuals(this.selectedRating());
+    }
+    updateStarVisuals(targetRating) {
+        const container = document.querySelector(`[data-rating-id="${this.uniqueId()}"]`);
+        if (!container)
+            return;
+        const stars = container.querySelectorAll('.c-rating__filled-star');
+        stars.forEach((star, index) => {
+            const starValue = this.stars().length - index;
+            const element = star;
+            if (starValue <= targetRating) {
+                element.style.opacity = '1';
+                element.style.display = 'block';
             }
-            if (newClass && newClass.trim()) {
-                this.renderer.addClass(element, newClass.trim());
+            else {
+                element.style.opacity = '0';
+                element.style.display = 'none';
             }
         });
-        this.recordOperation('replace', target, [newClass], true, oldClass);
-        return true;
     }
-    setClass(target, classNames, parent) {
-        const elements = this.resolveElements(target, parent);
-        if (elements.length === 0) {
-            this.recordOperation('set', target, classNames, false);
-            return false;
-        }
-        const classes = Array.isArray(classNames) ? classNames : [classNames];
-        elements.forEach(element => {
-            // Clear all existing classes
-            element.className = '';
-            // Add new classes
-            classes.forEach(className => {
-                if (className && className.trim()) {
-                    this.renderer.addClass(element, className.trim());
-                }
-            });
+    submitRating(event) {
+        this.loading.set(true);
+        this.ratingService.submitRating(event.endpoint, {
+            rating: event.rating,
+            label: event.label
+        }).subscribe({
+            next: (response) => {
+                this.loading.set(false);
+            },
+            error: (error) => {
+                console.error('Error submitting rating:', error);
+                this.loading.set(false);
+            }
         });
-        this.recordOperation('set', target, classes, true);
-        return true;
     }
-    resolveElements(target, parent) {
-        let searchContext = document;
-        // Resolve parent context if provided
-        if (parent) {
-            if (parent instanceof ElementRef) {
-                searchContext = parent.nativeElement;
+    getCurrentLabel() {
+        const config = this.config();
+        const currentRating = config.readonly
+            ? this.selectedRating()
+            : (this.hoveredRating() || this.selectedRating());
+        if (currentRating === 0) {
+            return config.defaultLabel || '';
+        }
+        const star = this.stars().find(s => s.value === currentRating);
+        return star?.label || '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericRatingComponent, isStandalone: true, selector: "core-generic-rating", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { ratingChange: "ratingChange" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (config().title) {\n  <p class=\"u-text\"><strong>{{ config().title }}</strong></p>\n}\n\n<div class=\"c-rating\" [attr.data-rating-id]=\"uniqueId()\">\n  \n  <div class=\"c-rating__stars\">\n    @for (star of stars(); track star.id) {\n      <input \n        type=\"radio\" \n        [name]=\"getUniqueName()\" \n        [id]=\"getUniqueStarId(star.value)\" \n        [value]=\"star.value\"\n        [disabled]=\"config().readonly || loading()\"\n        (click)=\"onStarClick(star.value)\" />\n      \n      <label \n        [for]=\"getUniqueStarId(star.value)\" \n        [title]=\"star.label + ' estrellas'\"\n        class=\"icon-star\"\n        [class.c-rating__readonly]=\"config().readonly\"\n        [style.cursor]=\"config().readonly ? 'default' : 'pointer'\"\n        (mouseenter)=\"!config().readonly && onStarHover(star.value)\"\n        (mouseleave)=\"!config().readonly && onStarLeave()\">\n        <span class=\"c-rating__filled-star icon-star-filled\"></span>\n      </label>\n    }\n  </div>\n  \n  @if (config().showLabels !== false) {\n    <span class=\"c-rating__text\">{{ getCurrentLabel() }}</span>\n  }\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericRatingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-generic-rating', standalone: true, imports: [CommonModule, TranslateModule], hostDirectives: [CoreHostDirective], template: "@if (config().title) {\n  <p class=\"u-text\"><strong>{{ config().title }}</strong></p>\n}\n\n<div class=\"c-rating\" [attr.data-rating-id]=\"uniqueId()\">\n  \n  <div class=\"c-rating__stars\">\n    @for (star of stars(); track star.id) {\n      <input \n        type=\"radio\" \n        [name]=\"getUniqueName()\" \n        [id]=\"getUniqueStarId(star.value)\" \n        [value]=\"star.value\"\n        [disabled]=\"config().readonly || loading()\"\n        (click)=\"onStarClick(star.value)\" />\n      \n      <label \n        [for]=\"getUniqueStarId(star.value)\" \n        [title]=\"star.label + ' estrellas'\"\n        class=\"icon-star\"\n        [class.c-rating__readonly]=\"config().readonly\"\n        [style.cursor]=\"config().readonly ? 'default' : 'pointer'\"\n        (mouseenter)=\"!config().readonly && onStarHover(star.value)\"\n        (mouseleave)=\"!config().readonly && onStarLeave()\">\n        <span class=\"c-rating__filled-star icon-star-filled\"></span>\n      </label>\n    }\n  </div>\n  \n  @if (config().showLabels !== false) {\n    <span class=\"c-rating__text\">{{ getCurrentLabel() }}</span>\n  }\n</div> " }]
+        }] });
+
+var ProgressBarSize;
+(function (ProgressBarSize) {
+    ProgressBarSize["NORMAL"] = "";
+    ProgressBarSize["SMALL"] = "xs";
+    ProgressBarSize["LARGE"] = "xl";
+})(ProgressBarSize || (ProgressBarSize = {}));
+
+class ProgressBarComponent {
+    progress = input(0);
+    size = input(ProgressBarSize.NORMAL);
+    percentage = computed(() => {
+        return this.progress() / 100;
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: ProgressBarComponent, isStandalone: true, selector: "core-progress-bar", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-progress-bar c-progress-bar--{{ size() }}\" style=\"--progress: {{ percentage() }}\">\n    <div class=\"c-progress-bar__bar\"></div>\n</div>" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-progress-bar', standalone: true, imports: [], hostDirectives: [CoreHostDirective], template: "<div class=\"c-progress-bar c-progress-bar--{{ size() }}\" style=\"--progress: {{ percentage() }}\">\n    <div class=\"c-progress-bar__bar\"></div>\n</div>" }]
+        }] });
+
+class CardComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: CardComponent, isStandalone: true, selector: "core-card", hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: `
+    <div  class="u-card">
+      <ng-content></ng-content>
+    </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'core-card',
+                    standalone: true,
+                    imports: [],
+                    hostDirectives: [CoreHostDirective],
+                    template: `
+    <div  class="u-card">
+      <ng-content></ng-content>
+    </div>`
+                }]
+        }] });
+
+class CarouselComponent {
+    images = input([]);
+    config = input({});
+    carouselHolder = viewChild('carouselHolder');
+    carouselViewport = viewChild('carouselViewport');
+    currentIndex = signal(0);
+    timer = signal(null);
+    autoplay = computed(() => this.config().autoplay ?? false);
+    interval = computed(() => this.config().interval ?? 3000);
+    perView = computed(() => Math.max(1, this.config().perView ?? 1));
+    step = computed(() => Math.max(1, this.config().step ?? this.perView()));
+    showDots = computed(() => this.config().showDots ?? true);
+    showArrows = computed(() => this.config().showArrows ?? true);
+    arrowsOutside = computed(() => this.config().arrowsOutside ?? false);
+    itemsGap = computed(() => this.config().itemsGap ?? '10px');
+    controlsOffset = computed(() => this.config().controlsOffset ?? '2rem');
+    controlsSize = computed(() => this.config().controlsSize ?? '2.5rem');
+    ariaLabel = computed(() => this.config().ariaLabel ?? 'Galería de imágenes');
+    maxIndex = computed(() => Math.max(0, this.images().length - this.perView()));
+    pagesLength = computed(() => Math.max(1, Math.ceil(this.images().length / this.perView())));
+    dots = computed(() => Array.from({ length: this.pagesLength() }, (_, i) => i));
+    currentPage = computed(() => Math.min(this.pagesLength() - 1, Math.floor(this.currentIndex() / this.perView())));
+    carouselClasses = computed(() => {
+        const classes = ['c-img-carousel', 'js-img-carousel'];
+        if (this.arrowsOutside()) {
+            classes.push('c-img-carousel--arrows-out');
+        }
+        return classes;
+    });
+    constructor() {
+        effect(() => {
+            const viewport = this.carouselViewport();
+            if (viewport) {
+                const element = viewport.nativeElement;
+                element.style.setProperty('--per-view', this.perView().toString());
+                element.style.setProperty('--items-gap', this.itemsGap());
+                element.style.setProperty('--controls-offset', this.controlsOffset());
+                element.style.setProperty('--controls-size', this.controlsSize());
             }
-            else if (parent instanceof HTMLElement) {
-                searchContext = parent;
+        });
+        effect(() => {
+            const shouldAutoplay = this.autoplay() && this.images().length > 1;
+            const currentTimer = this.timer();
+            if (shouldAutoplay && !currentTimer) {
+                this.startAutoplay();
             }
-            else if (parent && parent.nativeElement instanceof HTMLElement) {
-                searchContext = parent.nativeElement;
+            else if (!shouldAutoplay && currentTimer) {
+                this.stopAutoplay();
             }
-            else if (typeof parent === 'string') {
-                const parentElement = document.querySelector(parent);
-                if (parentElement instanceof HTMLElement) {
-                    searchContext = parentElement;
-                }
+        });
+        effect(() => {
+            const holder = this.carouselHolder();
+            const index = this.currentIndex();
+            if (holder) {
+                const element = holder.nativeElement;
+                const percentage = -(index * (100 / this.perView()));
+                element.style.transform = `translateX(${percentage}%)`;
             }
+        });
+    }
+    ngAfterViewInit() {
+        this.goToSlide(0, false);
+    }
+    ngOnDestroy() {
+        this.stopAutoplay();
+    }
+    goToSlide(index, animate = true, fromAutoplay = false) {
+        if (index < 0) {
+            index = this.maxIndex();
         }
-        // ElementRef from ViewChild
-        if (target instanceof ElementRef) {
-            const element = target.nativeElement;
-            // If parent is specified, check if element is within parent
-            if (parent && searchContext !== document) {
-                return searchContext.contains(element) ? [element] : [];
-            }
-            return [element];
+        else if (index > this.maxIndex()) {
+            index = 0;
         }
-        // Direct HTMLElement
-        if (target instanceof HTMLElement) {
-            // If parent is specified, check if element is within parent
-            if (parent && searchContext !== document) {
-                return searchContext.contains(target) ? [target] : [];
-            }
-            return [target];
+        const holder = this.carouselHolder();
+        if (holder) {
+            holder.nativeElement.style.transition = animate ? 'transform 350ms ease' : 'none';
         }
-        // NodeList or HTMLCollection
-        if (target instanceof NodeList || target instanceof HTMLCollection) {
-            const elements = Array.from(target);
-            // Filter by parent if specified
-            if (parent && searchContext !== document) {
-                return elements.filter(el => searchContext.contains(el));
-            }
-            return elements;
+        this.currentIndex.set(index);
+        if (!fromAutoplay && this.autoplay()) {
+            this.restartAutoplay();
         }
-        // CSS Selector string
-        if (typeof target === 'string') {
-            const elements = searchContext.querySelectorAll(target);
-            return Array.from(elements);
+    }
+    goToPage(pageIndex) {
+        const targetSlide = Math.min(this.maxIndex(), Math.max(0, pageIndex * this.perView()));
+        this.goToSlide(targetSlide, true, false);
+    }
+    goToNextSlide(fromAutoplay = false) {
+        this.goToSlide(this.currentIndex() + this.step(), true, fromAutoplay);
+    }
+    goToPrevSlide() {
+        this.goToSlide(this.currentIndex() - this.step(), true, false);
+    }
+    isDotActive(dotIndex) {
+        return dotIndex === this.currentPage();
+    }
+    startAutoplay() {
+        const currentTimer = this.timer();
+        if (currentTimer) {
+            clearInterval(currentTimer);
+        }
+        const intervalId = setInterval(() => {
+            this.goToNextSlide(true);
+        }, this.interval());
+        this.timer.set(intervalId);
+    }
+    stopAutoplay() {
+        const timerId = this.timer();
+        if (timerId) {
+            clearInterval(timerId);
+            this.timer.set(null);
         }
-        // If it has a nativeElement property (custom wrapper)
-        if (target && target.nativeElement instanceof HTMLElement) {
-            const element = target.nativeElement;
-            // If parent is specified, check if element is within parent
-            if (parent && searchContext !== document) {
-                return searchContext.contains(element) ? [element] : [];
-            }
-            return [element];
+    }
+    restartAutoplay() {
+        if (this.autoplay()) {
+            this.startAutoplay();
         }
-        return [];
     }
-    recordOperation(operation, target, classNames, success, oldClass) {
-        const classes = Array.isArray(classNames) ? classNames : [classNames];
-        const targetId = this.getTargetIdentifier(target);
-        const record = {
-            id: `op-${++this.operationCounter}-${Date.now()}`,
-            timestamp: Date.now(),
-            operation,
-            target: targetId,
-            classNames: classes,
-            oldClass,
-            success
-        };
-        this.dataStore.upsertOne(this.STORE_KEY, record);
+    onResize() {
+        this.goToSlide(this.currentIndex(), false);
     }
-    getTargetIdentifier(target) {
-        if (typeof target === 'string') {
-            return target;
+    onKeyDown(event) {
+        if (event.key === 'ArrowLeft') {
+            this.goToPrevSlide();
         }
-        if (target instanceof ElementRef) {
-            return this.getElementSelector(target.nativeElement);
+        else if (event.key === 'ArrowRight') {
+            this.goToNextSlide();
         }
-        if (target instanceof HTMLElement) {
-            return this.getElementSelector(target);
+    }
+    getSlideStyle(index) {
+        return {
+            'flex': `0 0 ${100 / this.perView()}%`
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CarouselComponent, isStandalone: true, selector: "core-carousel", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()", "keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "carouselHolder", first: true, predicate: ["carouselHolder"], descendants: true, isSignal: true }, { propertyName: "carouselViewport", first: true, predicate: ["carouselViewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<div \n  [ngClass]=\"carouselClasses()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  tabindex=\"0\"\n  #carouselViewport\n  [class.is-multiple]=\"perView() > 1\">\n  \n  <div class=\"c-img-carousel__viewport\">\n    <div class=\"c-img-carousel__holder js-img-carousel-holder\" #carouselHolder>\n      <div \n        *ngFor=\"let image of images(); let i = index\"\n        class=\"c-img-carousel__slide js-img-carousel-slide\">\n        <div class=\"c-img-carousel__slide-inner\">\n          <core-image-preview\n            [src]=\"image.url\"\n            [alt]=\"image.alt || 'Image ' + (i + 1)\"\n            [title]=\"image.title || image.alt || 'Image ' + (i + 1)\">\n          </core-image-preview>\n        </div>\n      </div>\n    </div>\n    \n    @if (!config().arrowsOutside) {\n      <button \n        *ngIf=\"showArrows()\"\n        class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n        type=\"button\"\n        (click)=\"goToPrevSlide()\"\n        [attr.aria-label]=\"'Anterior'\"\n        data-control=\"prevBtn\">\n      </button>\n      \n      <button \n        *ngIf=\"showArrows()\"\n        class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n        type=\"button\"\n        (click)=\"goToNextSlide()\"\n        [attr.aria-label]=\"'Siguiente'\"\n        data-control=\"nextBtn\">\n      </button>\n    }\n    \n    <div \n      *ngIf=\"showDots()\"\n      class=\"c-img-carousel__dots js-img-carousel-nav\"\n      aria-label=\"Navegaci\u00F3n\">\n      <button\n        *ngFor=\"let page of dots(); let i = index\"\n        class=\"c-img-carousel__dot js-img-carousel-dot\"\n        type=\"button\"\n        (click)=\"goToPage(i)\"\n        [class.c-img-carousel__dot--active]=\"currentPage() === i\"\n        [attr.aria-label]=\"'Ir a p\u00E1gina ' + (i + 1)\"\n        [attr.aria-current]=\"currentPage() === i ? 'true' : 'false'\">\n      </button>\n    </div>\n  </div>\n  @if(config().arrowsOutside) {\n    <button \n      *ngIf=\"showArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n      type=\"button\"\n      (click)=\"goToPrevSlide()\"\n      [attr.aria-label]=\"'Anterior'\"\n      data-control=\"prevBtn\">\n    </button>\n    \n    <button \n      *ngIf=\"showArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n      type=\"button\"\n      (click)=\"goToNextSlide()\"\n      [attr.aria-label]=\"'Siguiente'\"\n      data-control=\"nextBtn\">\n    </button>\n  }\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ImagePreviewComponent, selector: "core-image-preview", inputs: ["src", "alt", "title", "width", "height", "objectFit", "borderRadius", "cursor", "loading", "isRelative", "showSkeleton", "skeletonAnimation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-carousel', standalone: true, imports: [CommonModule, ImagePreviewComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n  [ngClass]=\"carouselClasses()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  tabindex=\"0\"\n  #carouselViewport\n  [class.is-multiple]=\"perView() > 1\">\n  \n  <div class=\"c-img-carousel__viewport\">\n    <div class=\"c-img-carousel__holder js-img-carousel-holder\" #carouselHolder>\n      <div \n        *ngFor=\"let image of images(); let i = index\"\n        class=\"c-img-carousel__slide js-img-carousel-slide\">\n        <div class=\"c-img-carousel__slide-inner\">\n          <core-image-preview\n            [src]=\"image.url\"\n            [alt]=\"image.alt || 'Image ' + (i + 1)\"\n            [title]=\"image.title || image.alt || 'Image ' + (i + 1)\">\n          </core-image-preview>\n        </div>\n      </div>\n    </div>\n    \n    @if (!config().arrowsOutside) {\n      <button \n        *ngIf=\"showArrows()\"\n        class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n        type=\"button\"\n        (click)=\"goToPrevSlide()\"\n        [attr.aria-label]=\"'Anterior'\"\n        data-control=\"prevBtn\">\n      </button>\n      \n      <button \n        *ngIf=\"showArrows()\"\n        class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n        type=\"button\"\n        (click)=\"goToNextSlide()\"\n        [attr.aria-label]=\"'Siguiente'\"\n        data-control=\"nextBtn\">\n      </button>\n    }\n    \n    <div \n      *ngIf=\"showDots()\"\n      class=\"c-img-carousel__dots js-img-carousel-nav\"\n      aria-label=\"Navegaci\u00F3n\">\n      <button\n        *ngFor=\"let page of dots(); let i = index\"\n        class=\"c-img-carousel__dot js-img-carousel-dot\"\n        type=\"button\"\n        (click)=\"goToPage(i)\"\n        [class.c-img-carousel__dot--active]=\"currentPage() === i\"\n        [attr.aria-label]=\"'Ir a p\u00E1gina ' + (i + 1)\"\n        [attr.aria-current]=\"currentPage() === i ? 'true' : 'false'\">\n      </button>\n    </div>\n  </div>\n  @if(config().arrowsOutside) {\n    <button \n      *ngIf=\"showArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n      type=\"button\"\n      (click)=\"goToPrevSlide()\"\n      [attr.aria-label]=\"'Anterior'\"\n      data-control=\"prevBtn\">\n    </button>\n    \n    <button \n      *ngIf=\"showArrows()\"\n      class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n      type=\"button\"\n      (click)=\"goToNextSlide()\"\n      [attr.aria-label]=\"'Siguiente'\"\n      data-control=\"nextBtn\">\n    </button>\n  }\n</div>" }]
+        }], ctorParameters: () => [], propDecorators: { onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+var ChatMessageType;
+(function (ChatMessageType) {
+    ChatMessageType["TEXT"] = "text";
+    ChatMessageType["IMAGE"] = "image";
+    ChatMessageType["FILE"] = "file";
+    ChatMessageType["SYSTEM"] = "system";
+    ChatMessageType["NOTIFICATION"] = "notification";
+    ChatMessageType["CUSTOM"] = "custom";
+})(ChatMessageType || (ChatMessageType = {}));
+
+var ChatMessagePosition;
+(function (ChatMessagePosition) {
+    ChatMessagePosition["LEFT"] = "left";
+    ChatMessagePosition["RIGHT"] = "right";
+})(ChatMessagePosition || (ChatMessagePosition = {}));
+
+var FilePreviewActionType;
+(function (FilePreviewActionType) {
+    FilePreviewActionType["DOWNLOAD"] = "download";
+    FilePreviewActionType["DELETE"] = "delete";
+    FilePreviewActionType["PREVIEW"] = "preview";
+})(FilePreviewActionType || (FilePreviewActionType = {}));
+
+class GenericChatService {
+    constructor() { }
+    formatTimestamp(timestamp, format) {
+        if (!timestamp)
+            return '';
+        const timeFormat = format || 'dd/MM/yyyy HH:mm';
+        if (timeFormat === 'dd/MM/yyyy HH:mm') {
+            const day = timestamp.getDate().toString().padStart(2, '0');
+            const month = (timestamp.getMonth() + 1).toString().padStart(2, '0');
+            const year = timestamp.getFullYear();
+            const hours = timestamp.getHours().toString().padStart(2, '0');
+            const minutes = timestamp.getMinutes().toString().padStart(2, '0');
+            return `${day}/${month}/${year} ${hours}:${minutes}`;
         }
-        if (target && target.nativeElement instanceof HTMLElement) {
-            return this.getElementSelector(target.nativeElement);
+        if (timeFormat === 'HH:mm') {
+            const hours = timestamp.getHours().toString().padStart(2, '0');
+            const minutes = timestamp.getMinutes().toString().padStart(2, '0');
+            return `${hours}:${minutes}`;
         }
-        return 'unknown-target';
+        return timestamp.toLocaleTimeString();
     }
-    getElementSelector(element) {
-        if (element.id) {
-            return `#${element.id}`;
-        }
-        const classes = Array.from(element.classList).join('.');
-        if (classes) {
-            return `.${classes}`;
+    formatDate(timestamp, format) {
+        if (!timestamp)
+            return '';
+        const dateFormat = format || 'dd/MM/yyyy';
+        if (dateFormat === 'dd/MM/yyyy') {
+            const day = timestamp.getDate().toString().padStart(2, '0');
+            const month = (timestamp.getMonth() + 1).toString().padStart(2, '0');
+            const year = timestamp.getFullYear();
+            return `${day}/${month}/${year}`;
         }
-        return element.tagName.toLowerCase();
+        return timestamp.toLocaleDateString();
     }
-    getOperationHistory() {
-        return [...this.dataStore.selectAll(this.STORE_KEY)()];
+    shouldUseCustomTemplate(message, config) {
+        return message.type === ChatMessageType.CUSTOM &&
+            !!config.customMessageTemplates &&
+            !!message.customData?.templateKey &&
+            !!config.customMessageTemplates.has(message.customData.templateKey);
     }
-    getOperationsByType(operation) {
-        return this.getOperationHistory().filter(op => op.operation === operation);
+    getMessageClasses(message, config) {
+        const baseClass = 'c-chat-bubble';
+        const positionClass = message.position === 'right' ? 'c-chat-bubble--right' : '';
+        const customClass = message.customClass || '';
+        const configClass = config.customCssClasses?.messageItem || '';
+        return [baseClass, positionClass, customClass, configClass]
+            .filter(cls => cls.length > 0)
+            .join(' ');
     }
-    getOperationsByTarget(target) {
-        return this.getOperationHistory().filter(op => op.target === target);
+    getContentClasses(message, config) {
+        const baseClass = 'c-chat-bubble__content';
+        const typeClass = message.type ? `c-chat-bubble__content--${message.type}` : '';
+        const configClass = config.customCssClasses?.messageItem || '';
+        return [baseClass, typeClass, configClass]
+            .filter(cls => cls.length > 0)
+            .join(' ');
     }
-    getSuccessfulOperations() {
-        return this.getOperationHistory().filter(op => op.success);
+    getTimestampClasses(config) {
+        const baseClass = 'c-chat-bubble__timestamp';
+        const configClass = config.customCssClasses?.messageItem || '';
+        return [baseClass, configClass]
+            .filter(cls => cls.length > 0)
+            .join(' ');
     }
-    getFailedOperations() {
-        return this.getOperationHistory().filter(op => !op.success);
+    getImageClasses(config) {
+        const baseClass = 'c-chat-bubble__image';
+        const configClass = config.customCssClasses?.messageItem || '';
+        return [baseClass, configClass]
+            .filter(cls => cls.length > 0)
+            .join(' ');
     }
-    getOperationCount() {
-        return this.dataStore.count(this.STORE_KEY);
+    validateMessage(message) {
+        if (!message)
+            return false;
+        if (!message.id || !message.content)
+            return false;
+        if (!message.timestamp)
+            return false;
+        if (!message.type)
+            return false;
+        return true;
     }
-    clearHistory() {
-        this.dataStore.clear(this.STORE_KEY);
-        this.operationCounter = 0;
+    getDefaultConfig() {
+        return {
+            maxHeight: '400px',
+            placeholder: 'Escribe tu mensaje...',
+            showTimestamps: true,
+            showAvatars: true,
+            showTypingIndicator: false,
+            allowFileAttachments: false,
+            allowEmojis: false,
+            maxMessages: 100,
+            readOnly: false,
+            autoScroll: true,
+            dateFormat: 'dd/MM/yyyy',
+            timeFormat: 'HH:mm',
+            groupByDate: false,
+            theme: 'light'
+        };
     }
-    getRecentOperations(limit = 10) {
-        const all = this.getOperationHistory();
-        return all.slice(-limit).reverse();
+    mergeConfig(userConfig) {
+        return { ...this.getDefaultConfig(), ...userConfig };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CustomClassService, deps: [{ token: i0.RendererFactory2 }, { token: DataStoreService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CustomClassService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericChatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericChatService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CustomClassService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericChatService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.RendererFactory2 }, { type: DataStoreService }] });
+        }], ctorParameters: () => [] });
+
+class CoreUiTranslateService {
+    translateService = inject(TranslateService);
+    initialize(defaultLang = 'es', currentLang) {
+        this.translateService.setDefaultLang(defaultLang);
+        this.translateService.use(currentLang || defaultLang);
+    }
+    changeLanguage(lang) {
+        return this.translateService.use(lang);
+    }
+    instant(key, params) {
+        return this.translateService.instant(key, params);
+    }
+    get(key, params) {
+        return this.translateService.get(key, params);
+    }
+    getMany(keys, params) {
+        return this.translateService.get(keys, params);
+    }
+    getCurrentLang() {
+        return this.translateService.currentLang;
+    }
+    getDefaultLang() {
+        return this.translateService.getDefaultLang();
+    }
+    getTranslateService() {
+        return this.translateService;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CoreUiTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CoreUiTranslateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CoreUiTranslateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 const PERMISSION_RESOURCES_PROVIDER = new InjectionToken('PERMISSION_RESOURCES_PROVIDER');
 const PERMISSION_ACTIONS_PROVIDER = new InjectionToken('PERMISSION_ACTIONS_PROVIDER');