@cuby-ui/core 0.0.216 → 0.0.218

package/fesm2022/cuby-ui-core.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, inject, Renderer2, input, model, effect, Directive, InjectionToken, Input, HostBinding, ChangeDetectorRef, ElementRef, ViewChild, EventEmitter, Output, NgModule, Injector, Injectable, SkipSelf, Optional, DestroyRef, NgZone, signal, TemplateRef, ContentChildren, HostListener, Self, INJECTOR, forwardRef, ViewContainerRef } from '@angular/core';
+import { Component, ChangeDetectionStrategy, inject, Renderer2, input, model, effect, Directive, InjectionToken, Input, HostBinding, ChangeDetectorRef, ElementRef, ViewChild, EventEmitter, Output, NgModule, Injector, Injectable, SkipSelf, Optional, DestroyRef, NgZone, signal, TemplateRef, ContentChildren, HostListener, Self, INJECTOR, forwardRef, ViewContainerRef, computed } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, DOCUMENT, NgForOf, NgIf, NgComponentOutlet } from '@angular/common';
+import { CommonModule, DOCUMENT, NgForOf, NgIf, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 import * as i1$1 from '@cuby-ui/cdk';
-import { CUI_WINDOW, cuiCreateToken, cuiCreateTokenFromFactory, CuiDestroyService, CuiFilterPipe, CuiLetDirective, CuiPopoverService, cuiProvide, CUI_ANIMATION_FRAME, cuiZonefree, EMPTY_CLIENT_RECT, cuiInjectElement, CUI_LOCAL_STORAGE, CUI_IS_WEBKIT, CuiItemDirective, CuiActiveZone, CuiFocusTrapDirective, cuiGetElementObscures, CUI_IS_MOBILE, CuiHoveredService, cuiPure, cuiPointToClientRect, cuiClamp, cuiPx, cuiIfMap, cuiIsPresent, cuiTypedFromEvent, cuiZonefreeScheduler, cuiZoneOptimized, cuiIsNativeFocused, CuiClickOutsideDirective, CuiTargetDirective, cuiGetClosestFocusable, CuiTime, CuiAutoResizingDirective } from '@cuby-ui/cdk';
+import { CUI_WINDOW, cuiCreateToken, cuiCreateTokenFromFactory, CuiDestroyService, CuiFilterPipe, CuiLetDirective, CuiPopoverService, cuiProvide, CUI_ANIMATION_FRAME, cuiZonefree, EMPTY_CLIENT_RECT, cuiInjectElement, CUI_LOCAL_STORAGE, CUI_IS_WEBKIT, CuiItemDirective, CuiActiveZone, CuiFocusTrapDirective, cuiGetElementObscures, CUI_IS_MOBILE, CuiHoveredService, cuiPure, cuiPointToClientRect, cuiClamp, cuiPx, cuiIfMap, cuiIsPresent, cuiTypedFromEvent, cuiZonefreeScheduler, cuiZoneOptimized, cuiIsNativeFocused, CuiClickOutsideDirective, CuiTargetDirective, cuiGetClosestFocusable, CuiTime, CuiDimensionsObserverDirective, CuiAutoResizingDirective } from '@cuby-ui/cdk';
 import { DomSanitizer } from '@angular/platform-browser';
 import { cuiIsIcon, CUI_ICONS } from '@cuby-ui/icons';
 import { BehaviorSubject, takeUntil, Observable, merge, distinctUntilChanged, startWith, map, finalize, Subject, switchMap, of, delay, repeat, filter, tap, takeWhile, fromEvent, debounce, timer, skip, take, catchError, throwError } from 'rxjs';
@@ -3620,6 +3620,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+const IS_SIDEBAR_OPENED_STORAGE_KEY = 'is-sidebar-opened';
+
+class CuiRenderDynamicComponentsService {
+    constructor() {
+        this.dynamicComponentsSignal = signal([]);
+        this.dynamicComponents = this.dynamicComponentsSignal.asReadonly();
+    }
+    open(dynamicComponent) {
+        this.dynamicComponentsSignal.update((prevDynamicComponents) => [...prevDynamicComponents, dynamicComponent]);
+    }
+    closeLast() {
+        this.dynamicComponentsSignal.update((prevDynamicComponents) => prevDynamicComponents.slice(0, -1));
+    }
+    closeAllExceptFirst() {
+        this.dynamicComponentsSignal.update((prevDynamicComponents) => {
+            const firstDynamicComponent = prevDynamicComponents[0];
+            return firstDynamicComponent ? [firstDynamicComponent] : [];
+        });
+    }
+    closeAll() {
+        this.dynamicComponentsSignal.set([]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiRenderDynamicComponentsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiRenderDynamicComponentsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiRenderDynamicComponentsService, decorators: [{
+            type: Injectable
+        }] });
+
+class CuiRenderDynamicComponentsComponent {
+    constructor() {
+        this.renderDynamicComponentsService = inject(CuiRenderDynamicComponentsService);
+        this.dynamicComponents = this.renderDynamicComponentsService.dynamicComponents;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiRenderDynamicComponentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiRenderDynamicComponentsComponent, isStandalone: true, selector: "cui-render-dynamic-components", ngImport: i0, template: "@for (dynamicComponent of dynamicComponents(); let isLast = $last; track $index) {\r\n    <div\r\n        class=\"container\"\r\n        [class.container_hidden]=\"!isLast\"\r\n    >\r\n        <ng-container *ngComponentOutlet=\"dynamicComponent.component; inputs: dynamicComponent.inputs\" />\r\n    </div>\r\n}\r\n", styles: [":host{display:contents}.container{display:contents}.container_hidden{display:none}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiRenderDynamicComponentsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-render-dynamic-components', imports: [NgComponentOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (dynamicComponent of dynamicComponents(); let isLast = $last; track $index) {\r\n    <div\r\n        class=\"container\"\r\n        [class.container_hidden]=\"!isLast\"\r\n    >\r\n        <ng-container *ngComponentOutlet=\"dynamicComponent.component; inputs: dynamicComponent.inputs\" />\r\n    </div>\r\n}\r\n", styles: [":host{display:contents}.container{display:contents}.container_hidden{display:none}\n"] }]
+        }] });
+
+class CuiSidebarService extends CuiRenderDynamicComponentsService {
+    constructor() {
+        super(...arguments);
+        this.localStorage = inject(CUI_LOCAL_STORAGE);
+        this.isOpenedSignal = signal(this.localStorage.getItem(IS_SIDEBAR_OPENED_STORAGE_KEY) === 'true');
+        this.widthSignal = signal(0);
+        this.isOpened = this.isOpenedSignal.asReadonly();
+        this.width = this.widthSignal.asReadonly();
+    }
+    switch() {
+        this.isOpenedSignal.update((value) => !value);
+        this.localStorage.setItem(IS_SIDEBAR_OPENED_STORAGE_KEY, this.isOpenedSignal().toString());
+    }
+    setWidth(value) {
+        this.widthSignal.set(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class CuiSidebarHeaderComponent {
+    constructor() {
+        this.document = inject(DOCUMENT);
+        this.sidebarService = inject(CuiSidebarService);
+        this.isOpened = this.sidebarService.isOpened;
+        this.buttonIcon = computed(() => this.isOpened() ? 'cuiIconChevronsLeft' : 'cuiIconChevronsRight');
+        this.headerSlot = input.required();
+    }
+    onSwitch(event) {
+        event.stopPropagation();
+        this.document.body.click();
+        this.sidebarService.switch();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiSidebarHeaderComponent, isStandalone: true, selector: "header[cuiSidebarHeader]", inputs: { headerSlot: { classPropertyName: "headerSlot", publicName: "headerSlot", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"headerSlot()\" [ngTemplateOutletContext]=\"{ $implicit: isOpened() }\" />\r\n<button type=\"button\" class=\"button\" [class.button_opened]=\"isOpened()\" (click)=\"onSwitch($event)\">\r\n  <cui-svg [icon]=\"buttonIcon()\" color=\"var(--cui-base-500)\" />\r\n</button>", styles: [":host{display:flex;gap:8px;align-items:center;padding:8px 12px 22px;position:relative;border-bottom:1px solid var(--cui-base-200);margin-bottom:21px}.button{padding:6px;position:absolute;bottom:0;transform:translateY(calc(50% + .5px));display:flex;border-radius:50%;background:var(--cui-base-100)}.button_opened{right:0}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'header[cuiSidebarHeader]', imports: [CuiSvgModule, NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngTemplateOutlet]=\"headerSlot()\" [ngTemplateOutletContext]=\"{ $implicit: isOpened() }\" />\r\n<button type=\"button\" class=\"button\" [class.button_opened]=\"isOpened()\" (click)=\"onSwitch($event)\">\r\n  <cui-svg [icon]=\"buttonIcon()\" color=\"var(--cui-base-500)\" />\r\n</button>", styles: [":host{display:flex;gap:8px;align-items:center;padding:8px 12px 22px;position:relative;border-bottom:1px solid var(--cui-base-200);margin-bottom:21px}.button{padding:6px;position:absolute;bottom:0;transform:translateY(calc(50% + .5px));display:flex;border-radius:50%;background:var(--cui-base-100)}.button_opened{right:0}\n"] }]
+        }] });
+
+class CuiSidebarContainerComponent {
+    constructor() {
+        this.sidebarService = inject(CuiSidebarService);
+        this.isOpened = this.sidebarService.isOpened;
+    }
+    onResize(width) {
+        this.sidebarService.setWidth(width);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiSidebarContainerComponent, isStandalone: true, selector: "cui-sidebar-container", host: { listeners: { "cuiResizeObserver": "onResize($event.width)" }, properties: { "class._opened": "isOpened()" } }, hostDirectives: [{ directive: i1$1.CuiDimensionsObserverDirective, outputs: ["cuiResizeObserver", "cuiResizeObserver"] }], ngImport: i0, template: "<ng-content />\r\n", styles: [":host{padding:16px 7.5px 8px 8px;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;border-right:.5px solid var(--cui-base-200);background:var(--cui-base-50)}:host._opened{width:240px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-sidebar-container', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: CuiDimensionsObserverDirective,
+                            outputs: ['cuiResizeObserver']
+                        }
+                    ], host: {
+                        '(cuiResizeObserver)': 'onResize($event.width)',
+                        '[class._opened]': 'isOpened()'
+                    }, template: "<ng-content />\r\n", styles: [":host{padding:16px 7.5px 8px 8px;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;border-right:.5px solid var(--cui-base-200);background:var(--cui-base-50)}:host._opened{width:240px}\n"] }]
+        }] });
+
+class CuiSidebarNavigationComponent {
+    constructor() {
+        this.links = input.required();
+        this.slot = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiSidebarNavigationComponent, isStandalone: true, selector: "cui-sidebar-navigation", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: true, transformFunction: null }, slot: { classPropertyName: "slot", publicName: "slot", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<nav class=\"nav\">\r\n  <ul class=\"list\">\r\n    @for (link of links(); track link.text; let isLast = $last) {\r\n    <ng-container [ngTemplateOutlet]=\"slot()\" [ngTemplateOutletContext]=\"{ $implicit: link, isLast }\" />\r\n    }\r\n  </ul>\r\n</nav>", styles: [".nav{flex:1}.list{display:flex;flex-direction:column;gap:4px;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-sidebar-navigation', imports: [NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"nav\">\r\n  <ul class=\"list\">\r\n    @for (link of links(); track link.text; let isLast = $last) {\r\n    <ng-container [ngTemplateOutlet]=\"slot()\" [ngTemplateOutletContext]=\"{ $implicit: link, isLast }\" />\r\n    }\r\n  </ul>\r\n</nav>", styles: [".nav{flex:1}.list{display:flex;flex-direction:column;gap:4px;height:100%}\n"] }]
+        }] });
+
+class CuiSidebarNavigationItemComponent {
+    constructor() {
+        this.text = input.required();
+        this.icon = input();
+        this.active = input();
+        this.isOpen = input();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiSidebarNavigationItemComponent, isStandalone: true, selector: "[cuiSidebarNavigationItem]", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class._active": "active()" } }, ngImport: i0, template: "@if (icon(); as icon) {\r\n<cui-svg [icon]=\"icon\" color=\"var(--cui-base-500)\" />\r\n}\r\n@if (isOpen()) {\r\n{{ text() }}\r\n}", styles: [":host{padding:8px 12px;display:flex;gap:12px;width:100%;border-radius:8px}:host:active{background:var(--cui-base-100)}@media (hover: hover){:host:hover{background:var(--cui-base-100)}}:host._active{background:var(--cui-base-100)}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarNavigationItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[cuiSidebarNavigationItem]', imports: [CuiSvgModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class._active]': 'active()'
+                    }, template: "@if (icon(); as icon) {\r\n<cui-svg [icon]=\"icon\" color=\"var(--cui-base-500)\" />\r\n}\r\n@if (isOpen()) {\r\n{{ text() }}\r\n}", styles: [":host{padding:8px 12px;display:flex;gap:12px;width:100%;border-radius:8px}:host:active{background:var(--cui-base-100)}@media (hover: hover){:host:hover{background:var(--cui-base-100)}}:host._active{background:var(--cui-base-100)}\n"] }]
+        }] });
+
+class CuiSidebarNavigationContainerComponent {
+    constructor() {
+        this.slot = input.required();
+        this.title = input();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarNavigationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiSidebarNavigationContainerComponent, isStandalone: true, selector: "cui-sidebar-navigation-container", inputs: { slot: { classPropertyName: "slot", publicName: "slot", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (title(); as title) {\r\n    <h3 class=\"title\">{{ title }}</h3>\r\n}\r\n\r\n<ng-container [ngTemplateOutlet]=\"slot()\" />\r\n", styles: [":host{display:flex;flex-direction:column;gap:4px}.title{padding:8px 12px;font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500);text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiSidebarNavigationContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-sidebar-navigation-container', imports: [NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (title(); as title) {\r\n    <h3 class=\"title\">{{ title }}</h3>\r\n}\r\n\r\n<ng-container [ngTemplateOutlet]=\"slot()\" />\r\n", styles: [":host{display:flex;flex-direction:column;gap:4px}.title{padding:8px 12px;font-weight:400;font-size:14px;line-height:20px;color:var(--cui-base-500);text-transform:uppercase}\n"] }]
+        }] });
+
+class CuiLayoutComponent {
+    constructor() {
+        this.sidebarWidth = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CuiLayoutComponent, isStandalone: true, selector: "cui-layout", inputs: { sidebarWidth: { classPropertyName: "sidebarWidth", publicName: "sidebarWidth", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.marginLeft.px": "sidebarWidth()" } }, ngImport: i0, template: "<div class=\"content\">\r\n    <ng-content />\r\n</div>\r\n", styles: [":host{--maxWidth: 1320px;--horizontalPadding: 24px;--verticalPadding: 0;position:relative;display:block;min-height:100vh}:host .content{padding:var(--verticalPadding) var(--horizontalPadding);margin:0 auto;max-width:var(--maxWidth)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-layout', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[style.marginLeft.px]': 'sidebarWidth()'
+                    }, template: "<div class=\"content\">\r\n    <ng-content />\r\n</div>\r\n", styles: [":host{--maxWidth: 1320px;--horizontalPadding: 24px;--verticalPadding: 0;position:relative;display:block;min-height:100vh}:host .content{padding:var(--verticalPadding) var(--horizontalPadding);margin:0 auto;max-width:var(--maxWidth)}\n"] }]
+        }] });
+
 const CUI_TAB_ACTIVATE = 'cui-tab-activate';
 class CuiTabComponent {
     constructor() {
@@ -3764,46 +3934,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-class CuiRenderDynamicComponentsService {
-    constructor() {
-        this.dynamicComponentsSignal = signal([]);
-        this.dynamicComponents = this.dynamicComponentsSignal.asReadonly();
-    }
-    open(dynamicComponent) {
-        this.dynamicComponentsSignal.update((prevDynamicComponents) => [...prevDynamicComponents, dynamicComponent]);
-    }
-    closeLast() {
-        this.dynamicComponentsSignal.update((prevDynamicComponents) => prevDynamicComponents.slice(0, -1));
-    }
-    closeAllExceptFirst() {
-        this.dynamicComponentsSignal.update((prevDynamicComponents) => {
-            const firstDynamicComponent = prevDynamicComponents[0];
-            return firstDynamicComponent ? [firstDynamicComponent] : [];
-        });
-    }
-    closeAll() {
-        this.dynamicComponentsSignal.set([]);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiRenderDynamicComponentsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiRenderDynamicComponentsService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiRenderDynamicComponentsService, decorators: [{
-            type: Injectable
-        }] });
-
-class CuiRenderDynamicComponentsComponent {
-    constructor() {
-        this.renderDynamicComponentsService = inject(CuiRenderDynamicComponentsService);
-        this.dynamicComponents = this.renderDynamicComponentsService.dynamicComponents;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiRenderDynamicComponentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiRenderDynamicComponentsComponent, isStandalone: true, selector: "cui-render-dynamic-components", ngImport: i0, template: "@for (dynamicComponent of dynamicComponents(); let isLast = $last; track $index) {\r\n    <div\r\n        class=\"container\"\r\n        [class.container_hidden]=\"!isLast\"\r\n    >\r\n        <ng-container *ngComponentOutlet=\"dynamicComponent.component; inputs: dynamicComponent.inputs\" />\r\n    </div>\r\n}\r\n", styles: [":host{display:contents}.container{display:contents}.container_hidden{display:none}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiRenderDynamicComponentsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-render-dynamic-components', imports: [NgComponentOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (dynamicComponent of dynamicComponents(); let isLast = $last; track $index) {\r\n    <div\r\n        class=\"container\"\r\n        [class.container_hidden]=\"!isLast\"\r\n    >\r\n        <ng-container *ngComponentOutlet=\"dynamicComponent.component; inputs: dynamicComponent.inputs\" />\r\n    </div>\r\n}\r\n", styles: [":host{display:contents}.container{display:contents}.container_hidden{display:none}\n"] }]
-        }] });
-
 const cuiXNdjsonInterceptor = (request, next) => {
     if (request.headers.get('Content-Type') !== 'application/x-ndjson') {
         return next(request);
@@ -3863,5 +3993,5 @@ const cuiLoaderInterceptor = (request, next) => {
  * Generated bundle index. Do not edit.
  */
 
-export { AngularOutsideLoaderService, CUI_ALERTS, CUI_ALERT_CONTEXT, CUI_ALERT_DEFAULT_OPTIONS, CUI_ALERT_OPTIONS, CUI_ANIMATIONS_DEFAULT_DURATION, CUI_BANNER_DEFAULT_OPTIONS, CUI_BANNER_OPTIONS, CUI_BUTTON_DEFAULT_OPTIONS, CUI_BUTTON_OPTIONS, CUI_DEFAULT_THEME, CUI_DIALOGS, CUI_DIALOG_CONTEXT, CUI_DIALOG_DEFAULT_OPTIONS, CUI_DIALOG_OPTIONS, CUI_INPUT_TIME_DEFAULT_OPTIONS, CUI_INPUT_TIME_OPTIONS, CUI_NOTIFICATION_DEFAULT_OPTIONS, CUI_NOTIFICATION_ICONS, CUI_NOTIFICATION_ICON_OPTIONS, CUI_NOTIFICATION_ICON_OPTIONS_DEFAULT_MODE, CUI_NOTIFICATION_ICON_OPTIONS_LIGHT_MODE, CUI_NOTIFICATION_OPTIONS, CUI_ROOT_SELECTOR, CUI_TAB_ACTIVATE, CUI_TEXT_FIELD_CONTROLLER, CUI_TEXT_FIELD_ICON_LEFT, CUI_TEXT_FIELD_ID, CUI_TEXT_FIELD_IS_ERROR, CUI_TEXT_FIELD_PLACEHOLDER, CUI_TEXT_FIELD_SIZE, CUI_TEXT_FILED_CONTROLLER_PROVIDER, CUI_THEME, CUI_THEME_STORAGE_DEFAULT_KEY, CUI_THEME_STORAGE_KEY, CUI_TOOLTIP_COMPONENT, CUI_TOOLTIP_DEFAULT_OPTIONS, CUI_TOOLTIP_DIRECTIONS, CUI_TOOLTIP_OPTIONS, CUI_TOOLTIP_PROVIDERS, CuiAccordionComponent, CuiAccordionDirective, CuiAccordionItemComponent, CuiAccordionModule, CuiAlertComponent, CuiAlertModule, CuiAlertService, CuiAlertsComponent, CuiBadgeComponent, CuiBadgeModule, CuiBannerComponent, CuiBannerModule, CuiBreadcrumbComponent, CuiBreadcrumbsComponent, CuiBreadcrumbsModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiCheckboxComponent, CuiCheckboxModule, CuiContextMenuComponent, CuiContextMenuModule, CuiDialogActionsComponent, CuiDialogComponent, CuiDialogHeaderComponent, CuiDialogModule, CuiDialogService, CuiDialogsComponent, CuiDropdownDirective, CuiDropdownWrapperComponent, CuiFormFieldComponent, CuiFormFieldModule, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiInputTimeComponent, CuiInputTimeModule, CuiLabelComponent, CuiLabelModule, CuiLetterBoxComponent, CuiNotificationComponent, CuiNotificationModule, CuiPositionService, CuiRadioComponent, CuiRadioModule, CuiRenderDynamicComponentsComponent, CuiRenderDynamicComponentsService, CuiRootComponent, CuiRootModule, CuiSelectComponent, CuiSelectModule, CuiSvgComponent, CuiSvgModule, CuiTabComponent, CuiTabsComponent, CuiTabsModule, CuiTextFieldController, CuiTextFieldControllerModule, CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective, CuiTextareaComponent, CuiTextareaModule, CuiThemeService, CuiToggleComponent, CuiToggleModule, CuiTooltip, CuiTooltipComponent, CuiTooltipDescribe, CuiTooltipDirective, CuiTooltipDriver, CuiTooltipHost, CuiTooltipHover, CuiTooltipManual, CuiTooltipOptionsDirective, CuiTooltipOverflow, CuiTooltipPointer, CuiTooltipPosition, CuiTooltipService, CuiTooltipUnstyled, CuiTooltipUnstyledComponent, CuiTooltips, CuiVisualViewportService, LoaderService, LoadingState, cuiGetDuration, cuiIsObscured, cuiLoaderInterceptor, cuiOverrideOptions, cuiRemoveSpaces, cuiReplace, cuiToAnimationOptions, cuiTooltipOptionsProvider, cuiXNdjsonInterceptor };
+export { AngularOutsideLoaderService, CUI_ALERTS, CUI_ALERT_CONTEXT, CUI_ALERT_DEFAULT_OPTIONS, CUI_ALERT_OPTIONS, CUI_ANIMATIONS_DEFAULT_DURATION, CUI_BANNER_DEFAULT_OPTIONS, CUI_BANNER_OPTIONS, CUI_BUTTON_DEFAULT_OPTIONS, CUI_BUTTON_OPTIONS, CUI_DEFAULT_THEME, CUI_DIALOGS, CUI_DIALOG_CONTEXT, CUI_DIALOG_DEFAULT_OPTIONS, CUI_DIALOG_OPTIONS, CUI_INPUT_TIME_DEFAULT_OPTIONS, CUI_INPUT_TIME_OPTIONS, CUI_NOTIFICATION_DEFAULT_OPTIONS, CUI_NOTIFICATION_ICONS, CUI_NOTIFICATION_ICON_OPTIONS, CUI_NOTIFICATION_ICON_OPTIONS_DEFAULT_MODE, CUI_NOTIFICATION_ICON_OPTIONS_LIGHT_MODE, CUI_NOTIFICATION_OPTIONS, CUI_ROOT_SELECTOR, CUI_TAB_ACTIVATE, CUI_TEXT_FIELD_CONTROLLER, CUI_TEXT_FIELD_ICON_LEFT, CUI_TEXT_FIELD_ID, CUI_TEXT_FIELD_IS_ERROR, CUI_TEXT_FIELD_PLACEHOLDER, CUI_TEXT_FIELD_SIZE, CUI_TEXT_FILED_CONTROLLER_PROVIDER, CUI_THEME, CUI_THEME_STORAGE_DEFAULT_KEY, CUI_THEME_STORAGE_KEY, CUI_TOOLTIP_COMPONENT, CUI_TOOLTIP_DEFAULT_OPTIONS, CUI_TOOLTIP_DIRECTIONS, CUI_TOOLTIP_OPTIONS, CUI_TOOLTIP_PROVIDERS, CuiAccordionComponent, CuiAccordionDirective, CuiAccordionItemComponent, CuiAccordionModule, CuiAlertComponent, CuiAlertModule, CuiAlertService, CuiAlertsComponent, CuiBadgeComponent, CuiBadgeModule, CuiBannerComponent, CuiBannerModule, CuiBreadcrumbComponent, CuiBreadcrumbsComponent, CuiBreadcrumbsModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiCheckboxComponent, CuiCheckboxModule, CuiContextMenuComponent, CuiContextMenuModule, CuiDialogActionsComponent, CuiDialogComponent, CuiDialogHeaderComponent, CuiDialogModule, CuiDialogService, CuiDialogsComponent, CuiDropdownDirective, CuiDropdownWrapperComponent, CuiFormFieldComponent, CuiFormFieldModule, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiInputTimeComponent, CuiInputTimeModule, CuiLabelComponent, CuiLabelModule, CuiLayoutComponent, CuiLetterBoxComponent, CuiNotificationComponent, CuiNotificationModule, CuiPositionService, CuiRadioComponent, CuiRadioModule, CuiRenderDynamicComponentsComponent, CuiRenderDynamicComponentsService, CuiRootComponent, CuiRootModule, CuiSelectComponent, CuiSelectModule, CuiSidebarContainerComponent, CuiSidebarHeaderComponent, CuiSidebarNavigationComponent, CuiSidebarNavigationContainerComponent, CuiSidebarNavigationItemComponent, CuiSidebarService, CuiSvgComponent, CuiSvgModule, CuiTabComponent, CuiTabsComponent, CuiTabsModule, CuiTextFieldController, CuiTextFieldControllerModule, CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective, CuiTextareaComponent, CuiTextareaModule, CuiThemeService, CuiToggleComponent, CuiToggleModule, CuiTooltip, CuiTooltipComponent, CuiTooltipDescribe, CuiTooltipDirective, CuiTooltipDriver, CuiTooltipHost, CuiTooltipHover, CuiTooltipManual, CuiTooltipOptionsDirective, CuiTooltipOverflow, CuiTooltipPointer, CuiTooltipPosition, CuiTooltipService, CuiTooltipUnstyled, CuiTooltipUnstyledComponent, CuiTooltips, CuiVisualViewportService, LoaderService, LoadingState, cuiGetDuration, cuiIsObscured, cuiLoaderInterceptor, cuiOverrideOptions, cuiRemoveSpaces, cuiReplace, cuiToAnimationOptions, cuiTooltipOptionsProvider, cuiXNdjsonInterceptor };
 //# sourceMappingURL=cuby-ui-core.mjs.map