@cuby-ui/core 0.0.105 → 0.0.107

package/fesm2020/cuby-ui-core.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, InjectionToken, inject, Input, HostBinding, ViewChild, EventEmitter, Output, NgModule, Injector, Injectable, TemplateRef, ContentChildren, ChangeDetectorRef, ElementRef, HostListener, Directive } from '@angular/core';
+import { Component, ChangeDetectionStrategy, InjectionToken, inject, Input, HostBinding, ViewChild, EventEmitter, Output, NgModule, Injector, Injectable, TemplateRef, ContentChildren, ElementRef, HostListener, ChangeDetectorRef, ViewContainerRef, Directive } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 import { cuiIsIcon, CUI_ICONS } from '@cuby-ui/icons';
 import * as i2 from '@cuby-ui/cdk';
-import { cuiCreateToken, cuiCreateTokenFromFactory, CuiDestroyService, CuiLetDirective, CuiFilterPipe, CuiPopoverService, CUI_LOCAL_STORAGE, CuiItemDirective, CUI_WINDOW, CuiClickOutsideDirective, CuiTargetDirective, CuiFocusTrapDirective, cuiProvide, CuiAutoResizingDirective } from '@cuby-ui/cdk';
+import { cuiCreateToken, cuiCreateTokenFromFactory, CuiDestroyService, CuiLetDirective, CuiFilterPipe, CuiPopoverService, CUI_LOCAL_STORAGE, CuiItemDirective, CuiFocusTrapDirective, CUI_WINDOW, CuiClickOutsideDirective, CuiTargetDirective, cuiProvide, CuiAutoResizingDirective } from '@cuby-ui/cdk';
 import { BehaviorSubject, takeUntil, fromEvent, take } from 'rxjs';
 import * as i2$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
@@ -714,162 +714,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
-class CuiContextMenuComponent {
+const CUI_ROOT_SELECTOR = 'cui-root';
+
+const CUI_DIALOGS = cuiCreateToken(new BehaviorSubject([]));
+const CUI_DIALOG_DEFAULT_OPTIONS = {
+    size: 'auto',
+    data: undefined
+};
+const CUI_DIALOG_OPTIONS = cuiCreateToken(CUI_DIALOG_DEFAULT_OPTIONS);
+const CUI_DIALOG_CONTEXT = new InjectionToken('');
+
+class CuiDialogsComponent {
     constructor() {
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.element = inject(ElementRef).nativeElement;
-        this.document = inject(DOCUMENT);
-        this.documentElement = this.document.documentElement;
-        this.window = inject(CUI_WINDOW);
         this.destroy$ = inject(CuiDestroyService, { self: true });
-        this.cuiClickOutsideDirective = inject(CuiClickOutsideDirective, { self: true });
-        this.cuiTargetDirective = inject(CuiTargetDirective, { self: true });
-        this.EXTRA_OFFSET_LEFT = 0;
-        this.EXTRA_OFFSET_TOP = 0;
-        this.isVisible = false;
-        this.isHidden = false;
+        this.dialogs$ = inject(CUI_DIALOGS);
     }
     ngOnInit() {
-        this.initClickOutsideSubscription();
-    }
-    ngAfterViewInit() {
-        this.initTargetElementListener();
-    }
-    onSelect(item) {
-        this.isVisible = false;
-        item.command?.();
-    }
-    onClose() {
-        this.close();
-    }
-    onStopClickPropagation(event) {
-        event.stopPropagation();
-    }
-    trackByFn(_, item) {
-        return item.label;
+        this.initDialogInjectorsSubscription();
     }
-    initClickOutsideSubscription() {
-        this.cuiClickOutsideDirective.cuiClickOutside
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((target) => {
-            if (this.target.contains(target)) {
-                return;
-            }
-            this.isVisible = false;
-        });
+    trackByFn(_, dialog) {
+        return dialog.id;
     }
-    initTargetElementListener() {
-        this.targetEventListener = (event) => {
-            event.stopPropagation();
-            this.document.body.click();
-            this.isVisible = !this.isVisible;
-            if (this.isVisible) {
-                this.changePosition(event.clientX, event.clientY);
-                this.initHidingSubscription();
-            }
-            this.changeDetectorRef.markForCheck();
-        };
-        this.cuiTargetDirective.clicked
+    initDialogInjectorsSubscription() {
+        this.dialogs$
             .pipe(takeUntil(this.destroy$))
-            .subscribe(this.targetEventListener);
-    }
-    initHidingSubscription() {
-        this.initHidingFromWindowEvent('scroll');
-        this.initHidingFromWindowEvent('resize');
+            .subscribe(dialogs => this.dialogInjectors = dialogs.map(useValue => Injector.create({
+            providers: [{ provide: CUI_DIALOG_CONTEXT, useValue }]
+        })));
     }
-    initHidingFromWindowEvent(eventName) {
-        fromEvent(this.window, eventName)
-            .pipe(take(1))
-            .subscribe(() => {
-            this.close();
-            this.changeDetectorRef.markForCheck();
-        });
+}
+CuiDialogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiDialogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiDialogsComponent, selector: "cui-dialogs", providers: [CuiDestroyService], ngImport: i0, template: "<ng-container *cuiLet=\"dialogs$ | async as dialogs\">\n  <ng-container *ngFor=\"let dialog of dialogs; let i = index; trackBy: trackByFn\">\n    <ng-container *ngComponentOutlet=\"dialog.component; injector: dialogInjectors[i]\"></ng-container>\n  </ng-container>\n  <div\n    *ngIf=\"dialogs!.length\"\n    class=\"c-overlay\"\n  ></div>\n</ng-container>\n", styles: [".c-overlay{position:fixed;inset:0;background:var(--cui-base-900);opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-dialogs', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiDestroyService], template: "<ng-container *cuiLet=\"dialogs$ | async as dialogs\">\n  <ng-container *ngFor=\"let dialog of dialogs; let i = index; trackBy: trackByFn\">\n    <ng-container *ngComponentOutlet=\"dialog.component; injector: dialogInjectors[i]\"></ng-container>\n  </ng-container>\n  <div\n    *ngIf=\"dialogs!.length\"\n    class=\"c-overlay\"\n  ></div>\n</ng-container>\n", styles: [".c-overlay{position:fixed;inset:0;background:var(--cui-base-900);opacity:.3}\n"] }]
+        }] });
+
+class CuiRootComponent {
+    constructor() {
+        this.document = inject(DOCUMENT);
+        this.theme$ = inject(CuiThemeService);
+        this.destroy$ = inject(CuiDestroyService);
     }
-    close() {
-        this.isVisible = false;
+    ngOnInit() {
+        this.initThemeSubscription();
     }
-    changePosition(x, y) {
-        this.isHidden = true;
-        setTimeout(() => {
-            const { clientWidth, clientHeight } = this.documentElement;
-            const width = this.element.offsetWidth;
-            const height = this.element.offsetHeight;
-            let left = x;
-            let top = y;
-            if (left + width > clientWidth) {
-                left -= width;
-            }
-            if (top + height > clientHeight) {
-                top -= height;
-            }
-            left = Math.max(left, this.EXTRA_OFFSET_LEFT);
-            top = Math.max(top, this.EXTRA_OFFSET_TOP);
-            this.isHidden = false;
-            this.clientX = left;
-            this.clientY = top;
-            this.changeDetectorRef.markForCheck();
-        });
+    initThemeSubscription() {
+        this.theme$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(theme => this.document.documentElement.setAttribute('cuiTheme', theme));
     }
 }
-CuiContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiContextMenuComponent, selector: "cui-context-menu[items][target]", inputs: { items: "items", target: "target" }, host: { listeners: { "window:resize": "onClose()", "click": "onStopClickPropagation($event)" }, properties: { "class._hidden": "this.isHidden", "style.left.px": "this.clientX", "style.top.px": "this.clientY" } }, providers: [CuiDestroyService], hostDirectives: [{ directive: i2.CuiClickOutsideDirective }, { directive: i2.CuiTargetDirective, inputs: ["ccTarget", "target"] }], ngImport: i0, template: "<ul\n  *ngIf=\"isVisible\"\n  class=\"c-ul\"\n>\n  <li\n    *ngFor=\"let item of items; trackBy: trackByFn\"\n    [style.color]=\"item.color\"\n  >\n    <button\n      class=\"c-button\"\n      (click)=\"onSelect(item)\"\n    >\n      <cui-svg\n        *ngIf=\"item.icon\"\n        [icon]=\"item.icon\"\n        [color]=\"item.color\"\n      ></cui-svg>\n      <span>{{ item.label }}</span>\n    </button>\n  </li>\n</ul>\n", styles: [":host{position:fixed;z-index:2;display:block;width:268px;border-radius:8px}:host._hidden{visibility:hidden}.c-ul{padding:7px 0;margin:0;list-style:none;font-weight:400;font-size:14px;line-height:20px;box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;border:1px solid var(--cui-base-200);border-radius:inherit;background:var(--cui-base-0);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button{padding:8px 11px 8px 0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:8px 11px;width:100%;display:flex;align-items:center;gap:12px}.c-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-button:hover{background:var(--cui-base-50)}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuComponent, decorators: [{
+CuiRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiRootComponent, selector: "cui-root", providers: [CuiDestroyService], ngImport: i0, template: "<div class=\"c-content\">\n  <ng-content />\n</div>\n<cui-dialogs />\n<cui-alerts />\n", styles: [".c-content{isolation:isolate}\n"], dependencies: [{ kind: "component", type: CuiDialogsComponent, selector: "cui-dialogs" }, { kind: "component", type: CuiAlertsComponent, selector: "cui-alerts" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-context-menu[items][target]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiDestroyService], hostDirectives: [
-                        CuiClickOutsideDirective,
-                        {
-                            directive: CuiTargetDirective,
-                            inputs: ['ccTarget: target']
-                        }
-                    ], template: "<ul\n  *ngIf=\"isVisible\"\n  class=\"c-ul\"\n>\n  <li\n    *ngFor=\"let item of items; trackBy: trackByFn\"\n    [style.color]=\"item.color\"\n  >\n    <button\n      class=\"c-button\"\n      (click)=\"onSelect(item)\"\n    >\n      <cui-svg\n        *ngIf=\"item.icon\"\n        [icon]=\"item.icon\"\n        [color]=\"item.color\"\n      ></cui-svg>\n      <span>{{ item.label }}</span>\n    </button>\n  </li>\n</ul>\n", styles: [":host{position:fixed;z-index:2;display:block;width:268px;border-radius:8px}:host._hidden{visibility:hidden}.c-ul{padding:7px 0;margin:0;list-style:none;font-weight:400;font-size:14px;line-height:20px;box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;border:1px solid var(--cui-base-200);border-radius:inherit;background:var(--cui-base-0);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button{padding:8px 11px 8px 0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:8px 11px;width:100%;display:flex;align-items:center;gap:12px}.c-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-button:hover{background:var(--cui-base-50)}}\n"] }]
-        }], propDecorators: { items: [{
-                type: Input
-            }], target: [{
-                type: Input
-            }], isHidden: [{
-                type: HostBinding,
-                args: ['class._hidden']
-            }], clientX: [{
-                type: HostBinding,
-                args: ['style.left.px']
-            }], clientY: [{
-                type: HostBinding,
-                args: ['style.top.px']
-            }], onClose: [{
-                type: HostListener,
-                args: ['window:resize']
-            }], onStopClickPropagation: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-class CuiContextMenuModule {
-}
-CuiContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuModule, declarations: [CuiContextMenuComponent], imports: [CommonModule,
-        CuiSvgModule], exports: [CuiContextMenuComponent] });
-CuiContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuModule, imports: [CommonModule,
-        CuiSvgModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        CuiSvgModule
-                    ],
-                    declarations: [CuiContextMenuComponent],
-                    exports: [CuiContextMenuComponent]
-                }]
+            args: [{ selector: CUI_ROOT_SELECTOR, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiDestroyService], template: "<div class=\"c-content\">\n  <ng-content />\n</div>\n<cui-dialogs />\n<cui-alerts />\n", styles: [".c-content{isolation:isolate}\n"] }]
         }] });
 
-const CUI_DIALOGS = cuiCreateToken(new BehaviorSubject([]));
-const CUI_DIALOG_DEFAULT_OPTIONS = {
-    size: 'auto',
-    data: undefined
-};
-const CUI_DIALOG_OPTIONS = cuiCreateToken(CUI_DIALOG_DEFAULT_OPTIONS);
-const CUI_DIALOG_CONTEXT = new InjectionToken('');
-
 const ContentType = {
     String: 'string',
     Template: 'template',
@@ -937,32 +839,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['document:keydown.escape', ['$event']]
             }] } });
 
-class CuiDialogsComponent {
-    constructor() {
-        this.destroy$ = inject(CuiDestroyService, { self: true });
-        this.dialogs$ = inject(CUI_DIALOGS);
-    }
-    ngOnInit() {
-        this.initDialogInjectorsSubscription();
-    }
-    trackByFn(_, dialog) {
-        return dialog.id;
-    }
-    initDialogInjectorsSubscription() {
-        this.dialogs$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(dialogs => this.dialogInjectors = dialogs.map(useValue => Injector.create({
-            providers: [{ provide: CUI_DIALOG_CONTEXT, useValue }]
-        })));
-    }
-}
-CuiDialogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiDialogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiDialogsComponent, selector: "cui-dialogs", providers: [CuiDestroyService], ngImport: i0, template: "<ng-container *cuiLet=\"dialogs$ | async as dialogs\">\n  <ng-container *ngFor=\"let dialog of dialogs; let i = index; trackBy: trackByFn\">\n    <ng-container *ngComponentOutlet=\"dialog.component; injector: dialogInjectors[i]\"></ng-container>\n  </ng-container>\n  <div\n    *ngIf=\"dialogs!.length\"\n    class=\"c-overlay\"\n  ></div>\n</ng-container>\n", styles: [".c-overlay{position:fixed;inset:0;background:var(--cui-base-900);opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-dialogs', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiDestroyService], template: "<ng-container *cuiLet=\"dialogs$ | async as dialogs\">\n  <ng-container *ngFor=\"let dialog of dialogs; let i = index; trackBy: trackByFn\">\n    <ng-container *ngComponentOutlet=\"dialog.component; injector: dialogInjectors[i]\"></ng-container>\n  </ng-container>\n  <div\n    *ngIf=\"dialogs!.length\"\n    class=\"c-overlay\"\n  ></div>\n</ng-container>\n", styles: [".c-overlay{position:fixed;inset:0;background:var(--cui-base-900);opacity:.3}\n"] }]
-        }] });
-
 class CuiDialogActionsComponent {
 }
 CuiDialogActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -1042,6 +918,182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
+class CuiRootModule {
+}
+CuiRootModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiRootModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiRootModule, declarations: [CuiRootComponent], imports: [CommonModule,
+        CuiDialogModule,
+        CuiAlertModule], exports: [CuiRootComponent] });
+CuiRootModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootModule, imports: [CommonModule,
+        CuiDialogModule,
+        CuiAlertModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        CuiDialogModule,
+                        CuiAlertModule
+                    ],
+                    declarations: [CuiRootComponent],
+                    exports: [CuiRootComponent]
+                }]
+        }] });
+
+class CuiContextMenuComponent {
+    constructor() {
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.document = inject(DOCUMENT);
+        this.documentElement = this.document.documentElement;
+        this.window = inject(CUI_WINDOW);
+        this.destroy$ = inject(CuiDestroyService, { self: true });
+        this.cuiClickOutsideDirective = inject(CuiClickOutsideDirective, { self: true });
+        this.cuiTargetDirective = inject(CuiTargetDirective, { self: true });
+        this.EXTRA_OFFSET_LEFT = 0;
+        this.EXTRA_OFFSET_TOP = 0;
+        this.isVisible = false;
+    }
+    ngOnInit() {
+        this.initClickOutsideSubscription();
+    }
+    ngOnDestroy() {
+        this.clearViewContainerRef();
+    }
+    ngAfterViewInit() {
+        this.initTargetElementListener();
+    }
+    onSelect(item) {
+        this.close();
+        item.command?.();
+    }
+    onClose() {
+        this.close();
+    }
+    onStopClickPropagation(event) {
+        event.stopPropagation();
+    }
+    trackByFn(_, item) {
+        return item.label;
+    }
+    initClickOutsideSubscription() {
+        this.cuiClickOutsideDirective.cuiClickOutside
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((target) => {
+            if (this.target.contains(target)) {
+                return;
+            }
+            this.close();
+        });
+    }
+    initTargetElementListener() {
+        this.targetEventListener = (event) => {
+            event.stopPropagation();
+            this.document.body.click();
+            this.isVisible = !this.isVisible;
+            this.clearViewContainerRef();
+            if (this.isVisible) {
+                this.renderList();
+                this.changePosition(event.clientX, event.clientY);
+                this.initHidingSubscription();
+            }
+            this.changeDetectorRef.markForCheck();
+        };
+        this.cuiTargetDirective.clicked
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(this.targetEventListener);
+    }
+    initHidingSubscription() {
+        this.initHidingFromWindowEvent('scroll');
+        this.initHidingFromWindowEvent('resize');
+    }
+    initHidingFromWindowEvent(eventName) {
+        fromEvent(this.window, eventName)
+            .pipe(take(1))
+            .subscribe(() => {
+            this.close();
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    close() {
+        this.isVisible = false;
+        this.clearViewContainerRef();
+    }
+    renderList() {
+        const embeddedViewRef = this.viewContainerRef.createEmbeddedView(this.list);
+        this.node = embeddedViewRef.rootNodes[0];
+        embeddedViewRef.detectChanges();
+        this.document.querySelector(CUI_ROOT_SELECTOR).appendChild(this.node);
+    }
+    changePosition(x, y) {
+        setTimeout(() => {
+            const { clientWidth, clientHeight } = this.documentElement;
+            const width = this.node.offsetWidth;
+            const height = this.node.offsetHeight;
+            let left = x;
+            let top = y;
+            if (left + width > clientWidth) {
+                left -= width;
+            }
+            if (top + height > clientHeight) {
+                top -= height;
+            }
+            left = Math.max(left, this.EXTRA_OFFSET_LEFT);
+            top = Math.max(top, this.EXTRA_OFFSET_TOP);
+            this.node.style.left = left + 'px';
+            this.node.style.top = top + 'px';
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    clearViewContainerRef() {
+        this.viewContainerRef.clear();
+    }
+}
+CuiContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiContextMenuComponent, selector: "cui-context-menu[items][target]", inputs: { items: "items", target: "target" }, host: { listeners: { "window:resize": "onClose()", "click": "onStopClickPropagation($event)" } }, providers: [CuiDestroyService], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true }], hostDirectives: [{ directive: i2.CuiClickOutsideDirective }, { directive: i2.CuiTargetDirective, inputs: ["ccTarget", "target"] }], ngImport: i0, template: "<ng-template #list>\n  <div class=\"c-container\">\n    <ul\n      *ngIf=\"isVisible\"\n      class=\"c-ul\"\n    >\n      <li\n        *ngFor=\"let item of items; trackBy: trackByFn\"\n        [style.color]=\"item.color\"\n      >\n        <button\n          type=\"button\"\n          class=\"c-button\"\n          (click)=\"onSelect(item)\"\n        >\n          <cui-svg\n            *ngIf=\"item.icon\"\n            [icon]=\"item.icon\"\n            [color]=\"item.color\"\n          ></cui-svg>\n          <span>{{ item.label }}</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:none}.c-container{position:fixed;width:268px;border-radius:8px}.c-ul{padding:7px 0;margin:0;list-style:none;font-weight:400;font-size:14px;line-height:20px;box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;border:1px solid var(--cui-base-200);border-radius:inherit;background:var(--cui-base-0);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button{padding:8px 11px 8px 0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:8px 11px;width:100%;display:flex;align-items:center;gap:12px}.c-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-button:hover{background:var(--cui-base-50)}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-context-menu[items][target]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiDestroyService], hostDirectives: [
+                        CuiClickOutsideDirective,
+                        {
+                            directive: CuiTargetDirective,
+                            inputs: ['ccTarget: target']
+                        }
+                    ], template: "<ng-template #list>\n  <div class=\"c-container\">\n    <ul\n      *ngIf=\"isVisible\"\n      class=\"c-ul\"\n    >\n      <li\n        *ngFor=\"let item of items; trackBy: trackByFn\"\n        [style.color]=\"item.color\"\n      >\n        <button\n          type=\"button\"\n          class=\"c-button\"\n          (click)=\"onSelect(item)\"\n        >\n          <cui-svg\n            *ngIf=\"item.icon\"\n            [icon]=\"item.icon\"\n            [color]=\"item.color\"\n          ></cui-svg>\n          <span>{{ item.label }}</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:none}.c-container{position:fixed;width:268px;border-radius:8px}.c-ul{padding:7px 0;margin:0;list-style:none;font-weight:400;font-size:14px;line-height:20px;box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;border:1px solid var(--cui-base-200);border-radius:inherit;background:var(--cui-base-0);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button{padding:8px 11px 8px 0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:8px 11px;width:100%;display:flex;align-items:center;gap:12px}.c-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-button:hover{background:var(--cui-base-50)}}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], list: [{
+                type: ViewChild,
+                args: ['list']
+            }], onClose: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onStopClickPropagation: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class CuiContextMenuModule {
+}
+CuiContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuModule, declarations: [CuiContextMenuComponent], imports: [CommonModule,
+        CuiSvgModule], exports: [CuiContextMenuComponent] });
+CuiContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuModule, imports: [CommonModule,
+        CuiSvgModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiContextMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        CuiSvgModule
+                    ],
+                    declarations: [CuiContextMenuComponent],
+                    exports: [CuiContextMenuComponent]
+                }]
+        }] });
+
 class CuiFormFieldComponent {
 }
 CuiFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -1814,55 +1866,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
-class CuiRootComponent {
-    constructor() {
-        this.document = inject(DOCUMENT);
-        this.theme$ = inject(CuiThemeService);
-        this.destroy$ = inject(CuiDestroyService);
-    }
-    ngOnInit() {
-        this.initThemeSubscription();
-    }
-    initThemeSubscription() {
-        this.theme$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(theme => this.document.documentElement.setAttribute('cuiTheme', theme));
-    }
-}
-CuiRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiRootComponent, selector: "cui-root", providers: [CuiDestroyService], ngImport: i0, template: "<div class=\"c-content\">\n  <ng-content />\n</div>\n<cui-dialogs />\n<cui-alerts />\n", styles: [".c-content{isolation:isolate}\n"], dependencies: [{ kind: "component", type: CuiDialogsComponent, selector: "cui-dialogs" }, { kind: "component", type: CuiAlertsComponent, selector: "cui-alerts" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cui-root', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiDestroyService], template: "<div class=\"c-content\">\n  <ng-content />\n</div>\n<cui-dialogs />\n<cui-alerts />\n", styles: [".c-content{isolation:isolate}\n"] }]
-        }] });
-
-class CuiRootModule {
-}
-CuiRootModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CuiRootModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiRootModule, declarations: [CuiRootComponent], imports: [CommonModule,
-        CuiDialogModule,
-        CuiAlertModule], exports: [CuiRootComponent] });
-CuiRootModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootModule, imports: [CommonModule,
-        CuiDialogModule,
-        CuiAlertModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiRootModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        CuiDialogModule,
-                        CuiAlertModule
-                    ],
-                    declarations: [CuiRootComponent],
-                    exports: [CuiRootComponent]
-                }]
-        }] });
-
 class CuiSelectComponent {
     constructor() {
         this.element = inject(ElementRef).nativeElement;
         this.document = inject(DOCUMENT);
         this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.viewContainerRef = inject(ViewContainerRef);
         this.destroy$ = inject(CuiDestroyService, { self: true });
         this.cuiTextFieldController = inject(CUI_TEXT_FIELD_CONTROLLER);
         this.cuiClickOutsideDirective = inject(CuiClickOutsideDirective, { self: true });
@@ -1900,6 +1909,9 @@ class CuiSelectComponent {
     ngOnInit() {
         this.initClickOutsideSubscription();
     }
+    ngOnDestroy() {
+        this.clearViewContainerRef();
+    }
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
         this.changeDetectorRef.markForCheck();
@@ -1924,6 +1936,10 @@ class CuiSelectComponent {
     onClose() {
         this.close();
     }
+    onWindowResize() {
+        this.button.nativeElement.blur();
+        this.close();
+    }
     initClickOutsideSubscription() {
         this.cuiClickOutsideDirective.cuiClickOutside
             .pipe(takeUntil(this.destroy$))
@@ -1936,38 +1952,67 @@ class CuiSelectComponent {
     }
     open() {
         this.isOpened = true;
-        const { bottom: elementRectBottom } = this.element.getBoundingClientRect();
+        const { top: elementRectTop, left: elementRectLeft, bottom: elementRectBottom } = this.element.getBoundingClientRect();
         const distanceToBottom = this.document.documentElement.clientHeight
             - (elementRectBottom + this.SPACE_BETWEEN_BUTTON_AND_OPTIONS);
+        const embeddedViewRef = this.viewContainerRef.createEmbeddedView(this.optionsWrapper);
+        const node = embeddedViewRef.rootNodes[0];
+        const nodeStyles = node.style;
         this.isOptionsListAbove = distanceToBottom < this.getOptionsListHeightContainer.nativeElement.offsetHeight;
+        embeddedViewRef.detectChanges();
+        nodeStyles.width = this.element.offsetWidth + 'px';
+        nodeStyles.left = window.scrollX + elementRectLeft + 'px';
+        if (this.isOptionsListAbove) {
+            nodeStyles.top = window.scrollY + elementRectTop
+                - this.getOptionsListHeightContainer.nativeElement.offsetHeight
+                - this.SPACE_BETWEEN_BUTTON_AND_OPTIONS
+                + 'px';
+        }
+        else {
+            nodeStyles.top = window.scrollY + elementRectBottom + this.SPACE_BETWEEN_BUTTON_AND_OPTIONS + 'px';
+        }
+        this.document.querySelector(CUI_ROOT_SELECTOR).appendChild(embeddedViewRef.rootNodes[0]);
     }
     close() {
         this.isOpened = false;
+        this.clearViewContainerRef();
+    }
+    clearViewContainerRef() {
+        this.viewContainerRef.clear();
     }
 }
 CuiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiSelectComponent, selector: "cui-select[options]", inputs: { options: "options", defaultOptionText: "defaultOptionText" }, host: { properties: { "style.--c-gap": "this.gap" } }, providers: [
+CuiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiSelectComponent, selector: "cui-select[options]", inputs: { options: "options", defaultOptionText: "defaultOptionText" }, host: { listeners: { "window:resize": "onWindowResize()" }, properties: { "style.--c-gap": "this.gap" } }, providers: [
         CUI_TEXT_FILED_CONTROLLER_PROVIDER,
         cuiProvide(NG_VALUE_ACCESSOR, CuiSelectComponent, true),
         CuiDestroyService
-    ], viewQueries: [{ propertyName: "getOptionsListHeightContainer", first: true, predicate: ["getOptionsListHeightContainer"], descendants: true }], hostDirectives: [{ directive: i2.CuiClickOutsideDirective }], ngImport: i0, template: "<button\n  type=\"button\"\n  [attr.id]=\"id\"\n  [attr.data-size]=\"size\"\n  [disabled]=\"isDisabled\"\n  class=\"c-button\"\n  [class.c-button_with-error]=\"isError\"\n  (click)=\"onSwitch()\"\n>\n  <ng-container *ngIf=\"selectedOption; else placeholderTemplate\">\n    {{ selectedOption.label }}\n  </ng-container>\n  <ng-template #placeholderTemplate>\n    <span class=\"c-placeholder\">{{ placeholder }}</span>\n  </ng-template>\n  <cui-svg\n    icon=\"cuiIconChevronDown\"\n    color=\"var(--cui-base-500)\"\n  />\n</button>\n<div\n  *ngIf=\"isOpened\"\n  class=\"c-options__wrapper\"\n  [class.c-options__wrapper_top]=\"isOptionsListAbove\"\n>\n  <ng-container *ngTemplateOutlet=\"optionsList\"/>\n</div>\n<div\n  #getOptionsListHeightContainer\n  class=\"c-get-options-list-height-container\"\n>\n  <ng-container *ngTemplateOutlet=\"optionsList\"/>\n</div>\n<ng-template #optionsList>\n  <ul\n    class=\"c-options\"\n    [class.c-options_top]=\"isOptionsListAbove\"\n  >\n    <ng-container *ngIf=\"options.length; else empty\">\n      <li *ngFor=\"let option of options; trackBy: trackByFn\">\n        <button\n          class=\"c-option-button\"\n          [class.c-option-button_selected]=\"selectedOption === option\"\n          (click)=\"onSelect(option)\"\n        >\n          <span>{{ option.label }}</span>\n          <cui-svg\n            *ngIf=\"selectedOption === option\"\n            icon=\"cuiIconCheckSm\"\n            color=\"var(--cui-info)\"\n            class=\"c-option-button__icon\"\n          />\n        </button>\n      </li>\n    </ng-container>\n    <ng-template #empty>\n      <li *ngIf=\"defaultOptionText\">\n        <button\n          class=\"c-option-button\"\n          (click)=\"onClose()\"\n        >\n          {{ defaultOptionText }}\n        </button>\n      </li>\n    </ng-template>\n  </ul>\n</ng-template>\n", styles: [":host{position:relative;display:block;font-family:var(--cui-main-font)}.c-button{border:0;flex-shrink:0;outline:none;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:0 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid var(--cui-base-200);border-radius:8px;cursor:pointer;background:var(--cui-input);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button:hover{border-color:var(--cui-base-300)}.c-button:focus{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.c-button:disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}.c-button[data-size=sm]{padding-top:7px;padding-bottom:7px}.c-button[data-size=md]{padding-top:8px;padding-bottom:8px}.c-button_with-error{border-color:var(--cui-danger)}.c-button_with-error:focus{box-shadow:0 0 0 2px #d92d2040;border-color:var(--cui-danger)}.c-placeholder{color:var(--cui-base-400)}.c-options__wrapper{position:absolute;z-index:1;top:calc(100% + var(--c-gap));width:100%}.c-options__wrapper_top{top:unset;bottom:calc(100% + var(--c-gap))}.c-get-options-list-height-container{position:fixed;visibility:hidden}.c-options{padding:7px 0;margin:0;list-style:none;font-weight:400;font-size:14px;line-height:20px;box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;overflow:auto;max-height:180px;border:1px solid var(--cui-base-200);border-radius:8px;background:var(--cui-base-0);color:var(--cui-base-900)}.c-option-button{padding:8px 11px 8px 0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:8px 11px;width:100%;display:flex;align-items:center;gap:12px}.c-option-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-option-button:hover{background:var(--cui-base-50)}}.c-option-button_selected{background:var(--cui-base-50)}.c-option-button__icon{margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { propertyName: "getOptionsListHeightContainer", first: true, predicate: ["getOptionsListHeightContainer"], descendants: true }, { propertyName: "optionsWrapper", first: true, predicate: ["optionsWrapper"], descendants: true }], hostDirectives: [{ directive: i2.CuiClickOutsideDirective }], ngImport: i0, template: "<button\n  #button\n  type=\"button\"\n  [attr.id]=\"id\"\n  [attr.data-size]=\"size\"\n  [disabled]=\"isDisabled\"\n  class=\"c-button\"\n  [class.c-button_active]=\"isOpened\"\n  [class.c-button_with-error]=\"isError\"\n  (click)=\"onSwitch()\"\n>\n  <ng-container *ngIf=\"selectedOption; else placeholderTemplate\">\n    {{ selectedOption.label }}\n  </ng-container>\n  <ng-template #placeholderTemplate>\n    <span class=\"c-placeholder\">{{ placeholder }}</span>\n  </ng-template>\n  <cui-svg\n    icon=\"cuiIconChevronDown\"\n    color=\"var(--cui-base-500)\"\n  />\n</button>\n<ng-template #optionsWrapper>\n  <div\n      class=\"c-options__wrapper\"\n      [class.c-options__wrapper_top]=\"isOptionsListAbove\"\n  >\n    <ng-container *ngTemplateOutlet=\"optionsList\"/>\n  </div>\n</ng-template>\n<div\n  #getOptionsListHeightContainer\n  class=\"c-get-options-list-height-container\"\n>\n  <ng-container *ngTemplateOutlet=\"optionsList\"/>\n</div>\n<ng-template #optionsList>\n  <ul\n    class=\"c-options\"\n    [class.c-options_top]=\"isOptionsListAbove\"\n  >\n    <ng-container *ngIf=\"options.length; else empty\">\n      <li *ngFor=\"let option of options; trackBy: trackByFn\">\n        <button\n          type=\"button\"\n          class=\"c-option-button\"\n          [class.c-option-button_selected]=\"selectedOption === option\"\n          (click)=\"onSelect(option)\"\n        >\n          <span>{{ option.label }}</span>\n          <cui-svg\n            *ngIf=\"selectedOption === option\"\n            icon=\"cuiIconCheckSm\"\n            color=\"var(--cui-info)\"\n            class=\"c-option-button__icon\"\n          />\n        </button>\n      </li>\n    </ng-container>\n    <ng-template #empty>\n      <li *ngIf=\"defaultOptionText\">\n        <button\n          type=\"button\"\n          class=\"c-option-button\"\n          (click)=\"onClose()\"\n        >\n          {{ defaultOptionText }}\n        </button>\n      </li>\n    </ng-template>\n  </ul>\n</ng-template>\n", styles: [":host{display:block;font-family:var(--cui-main-font);position:relative}.c-button{border:0;flex-shrink:0;outline:none;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:0 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid var(--cui-base-200);border-radius:8px;cursor:pointer;background:var(--cui-input);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button:hover{border-color:var(--cui-base-300)}.c-button_active.c-button_active,.c-button:focus{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.c-button:disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}.c-button[data-size=sm]{padding-top:7px;padding-bottom:7px}.c-button[data-size=md]{padding-top:8px;padding-bottom:8px}.c-button_with-error{border-color:var(--cui-danger)}.c-button_with-error:focus{box-shadow:0 0 0 2px #d92d2040;border-color:var(--cui-danger)}.c-placeholder{color:var(--cui-base-400)}.c-options__wrapper{position:absolute;font-family:var(--cui-main-font)}.c-get-options-list-height-container{position:fixed;visibility:hidden}.c-options{padding:7px 0;margin:0;list-style:none;font-weight:400;font-size:14px;line-height:20px;box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;overflow:auto;max-height:180px;border:1px solid var(--cui-base-200);border-radius:8px;background:var(--cui-base-0);color:var(--cui-base-900)}.c-option-button{padding:8px 11px 8px 0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:8px 11px;width:100%;display:flex;align-items:center;gap:12px}.c-option-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-option-button:hover{background:var(--cui-base-50)}}.c-option-button_selected{background:var(--cui-base-50)}.c-option-button__icon{margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cui-select[options]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         CUI_TEXT_FILED_CONTROLLER_PROVIDER,
                         cuiProvide(NG_VALUE_ACCESSOR, CuiSelectComponent, true),
                         CuiDestroyService
-                    ], hostDirectives: [CuiClickOutsideDirective], template: "<button\n  type=\"button\"\n  [attr.id]=\"id\"\n  [attr.data-size]=\"size\"\n  [disabled]=\"isDisabled\"\n  class=\"c-button\"\n  [class.c-button_with-error]=\"isError\"\n  (click)=\"onSwitch()\"\n>\n  <ng-container *ngIf=\"selectedOption; else placeholderTemplate\">\n    {{ selectedOption.label }}\n  </ng-container>\n  <ng-template #placeholderTemplate>\n    <span class=\"c-placeholder\">{{ placeholder }}</span>\n  </ng-template>\n  <cui-svg\n    icon=\"cuiIconChevronDown\"\n    color=\"var(--cui-base-500)\"\n  />\n</button>\n<div\n  *ngIf=\"isOpened\"\n  class=\"c-options__wrapper\"\n  [class.c-options__wrapper_top]=\"isOptionsListAbove\"\n>\n  <ng-container *ngTemplateOutlet=\"optionsList\"/>\n</div>\n<div\n  #getOptionsListHeightContainer\n  class=\"c-get-options-list-height-container\"\n>\n  <ng-container *ngTemplateOutlet=\"optionsList\"/>\n</div>\n<ng-template #optionsList>\n  <ul\n    class=\"c-options\"\n    [class.c-options_top]=\"isOptionsListAbove\"\n  >\n    <ng-container *ngIf=\"options.length; else empty\">\n      <li *ngFor=\"let option of options; trackBy: trackByFn\">\n        <button\n          class=\"c-option-button\"\n          [class.c-option-button_selected]=\"selectedOption === option\"\n          (click)=\"onSelect(option)\"\n        >\n          <span>{{ option.label }}</span>\n          <cui-svg\n            *ngIf=\"selectedOption === option\"\n            icon=\"cuiIconCheckSm\"\n            color=\"var(--cui-info)\"\n            class=\"c-option-button__icon\"\n          />\n        </button>\n      </li>\n    </ng-container>\n    <ng-template #empty>\n      <li *ngIf=\"defaultOptionText\">\n        <button\n          class=\"c-option-button\"\n          (click)=\"onClose()\"\n        >\n          {{ defaultOptionText }}\n        </button>\n      </li>\n    </ng-template>\n  </ul>\n</ng-template>\n", styles: [":host{position:relative;display:block;font-family:var(--cui-main-font)}.c-button{border:0;flex-shrink:0;outline:none;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:0 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid var(--cui-base-200);border-radius:8px;cursor:pointer;background:var(--cui-input);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button:hover{border-color:var(--cui-base-300)}.c-button:focus{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.c-button:disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}.c-button[data-size=sm]{padding-top:7px;padding-bottom:7px}.c-button[data-size=md]{padding-top:8px;padding-bottom:8px}.c-button_with-error{border-color:var(--cui-danger)}.c-button_with-error:focus{box-shadow:0 0 0 2px #d92d2040;border-color:var(--cui-danger)}.c-placeholder{color:var(--cui-base-400)}.c-options__wrapper{position:absolute;z-index:1;top:calc(100% + var(--c-gap));width:100%}.c-options__wrapper_top{top:unset;bottom:calc(100% + var(--c-gap))}.c-get-options-list-height-container{position:fixed;visibility:hidden}.c-options{padding:7px 0;margin:0;list-style:none;font-weight:400;font-size:14px;line-height:20px;box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;overflow:auto;max-height:180px;border:1px solid var(--cui-base-200);border-radius:8px;background:var(--cui-base-0);color:var(--cui-base-900)}.c-option-button{padding:8px 11px 8px 0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:8px 11px;width:100%;display:flex;align-items:center;gap:12px}.c-option-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-option-button:hover{background:var(--cui-base-50)}}.c-option-button_selected{background:var(--cui-base-50)}.c-option-button__icon{margin-left:auto}\n"] }]
+                    ], hostDirectives: [CuiClickOutsideDirective], template: "<button\n  #button\n  type=\"button\"\n  [attr.id]=\"id\"\n  [attr.data-size]=\"size\"\n  [disabled]=\"isDisabled\"\n  class=\"c-button\"\n  [class.c-button_active]=\"isOpened\"\n  [class.c-button_with-error]=\"isError\"\n  (click)=\"onSwitch()\"\n>\n  <ng-container *ngIf=\"selectedOption; else placeholderTemplate\">\n    {{ selectedOption.label }}\n  </ng-container>\n  <ng-template #placeholderTemplate>\n    <span class=\"c-placeholder\">{{ placeholder }}</span>\n  </ng-template>\n  <cui-svg\n    icon=\"cuiIconChevronDown\"\n    color=\"var(--cui-base-500)\"\n  />\n</button>\n<ng-template #optionsWrapper>\n  <div\n      class=\"c-options__wrapper\"\n      [class.c-options__wrapper_top]=\"isOptionsListAbove\"\n  >\n    <ng-container *ngTemplateOutlet=\"optionsList\"/>\n  </div>\n</ng-template>\n<div\n  #getOptionsListHeightContainer\n  class=\"c-get-options-list-height-container\"\n>\n  <ng-container *ngTemplateOutlet=\"optionsList\"/>\n</div>\n<ng-template #optionsList>\n  <ul\n    class=\"c-options\"\n    [class.c-options_top]=\"isOptionsListAbove\"\n  >\n    <ng-container *ngIf=\"options.length; else empty\">\n      <li *ngFor=\"let option of options; trackBy: trackByFn\">\n        <button\n          type=\"button\"\n          class=\"c-option-button\"\n          [class.c-option-button_selected]=\"selectedOption === option\"\n          (click)=\"onSelect(option)\"\n        >\n          <span>{{ option.label }}</span>\n          <cui-svg\n            *ngIf=\"selectedOption === option\"\n            icon=\"cuiIconCheckSm\"\n            color=\"var(--cui-info)\"\n            class=\"c-option-button__icon\"\n          />\n        </button>\n      </li>\n    </ng-container>\n    <ng-template #empty>\n      <li *ngIf=\"defaultOptionText\">\n        <button\n          type=\"button\"\n          class=\"c-option-button\"\n          (click)=\"onClose()\"\n        >\n          {{ defaultOptionText }}\n        </button>\n      </li>\n    </ng-template>\n  </ul>\n</ng-template>\n", styles: [":host{display:block;font-family:var(--cui-main-font);position:relative}.c-button{border:0;flex-shrink:0;outline:none;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:0 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid var(--cui-base-200);border-radius:8px;cursor:pointer;background:var(--cui-input);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button:hover{border-color:var(--cui-base-300)}.c-button_active.c-button_active,.c-button:focus{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.c-button:disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}.c-button[data-size=sm]{padding-top:7px;padding-bottom:7px}.c-button[data-size=md]{padding-top:8px;padding-bottom:8px}.c-button_with-error{border-color:var(--cui-danger)}.c-button_with-error:focus{box-shadow:0 0 0 2px #d92d2040;border-color:var(--cui-danger)}.c-placeholder{color:var(--cui-base-400)}.c-options__wrapper{position:absolute;font-family:var(--cui-main-font)}.c-get-options-list-height-container{position:fixed;visibility:hidden}.c-options{padding:7px 0;margin:0;list-style:none;font-weight:400;font-size:14px;line-height:20px;box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;overflow:auto;max-height:180px;border:1px solid var(--cui-base-200);border-radius:8px;background:var(--cui-base-0);color:var(--cui-base-900)}.c-option-button{padding:8px 11px 8px 0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:8px 11px;width:100%;display:flex;align-items:center;gap:12px}.c-option-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-option-button:hover{background:var(--cui-base-50)}}.c-option-button_selected{background:var(--cui-base-50)}.c-option-button__icon{margin-left:auto}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], defaultOptionText: [{
                 type: Input
+            }], button: [{
+                type: ViewChild,
+                args: ['button']
             }], getOptionsListHeightContainer: [{
                 type: ViewChild,
                 args: ['getOptionsListHeightContainer']
+            }], optionsWrapper: [{
+                type: ViewChild,
+                args: ['optionsWrapper']
             }], gap: [{
                 type: HostBinding,
                 args: ['style.--c-gap']
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 class CuiSelectModule {
@@ -2062,5 +2107,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CUI_ALERTS, CUI_ALERT_CONTEXT, CUI_ALERT_DEFAULT_OPTIONS, CUI_ALERT_OPTIONS, 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_NOTIFICATION_DEFAULT_OPTIONS, CUI_NOTIFICATION_OPTIONS, 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, ContentType, CuiAccordionComponent, 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, CuiFormFieldComponent, CuiFormFieldModule, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiLabelComponent, CuiLabelModule, CuiNotificationComponent, CuiNotificationModule, CuiRadioComponent, CuiRadioModule, CuiRootComponent, CuiRootModule, CuiSelectComponent, CuiSelectModule, CuiSvgComponent, CuiSvgModule, CuiTextFieldController, CuiTextFieldControllerModule, CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective, CuiTextareaComponent, CuiTextareaModule, CuiThemeService, CuiToggleComponent, CuiToggleModule, cuiRemoveSpaces, cuiReplace };
+export { CUI_ALERTS, CUI_ALERT_CONTEXT, CUI_ALERT_DEFAULT_OPTIONS, CUI_ALERT_OPTIONS, 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_NOTIFICATION_DEFAULT_OPTIONS, CUI_NOTIFICATION_OPTIONS, CUI_ROOT_SELECTOR, 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, ContentType, CuiAccordionComponent, 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, CuiFormFieldComponent, CuiFormFieldModule, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiLabelComponent, CuiLabelModule, CuiNotificationComponent, CuiNotificationModule, CuiRadioComponent, CuiRadioModule, CuiRootComponent, CuiRootModule, CuiSelectComponent, CuiSelectModule, CuiSvgComponent, CuiSvgModule, CuiTextFieldController, CuiTextFieldControllerModule, CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective, CuiTextareaComponent, CuiTextareaModule, CuiThemeService, CuiToggleComponent, CuiToggleModule, cuiRemoveSpaces, cuiReplace };
 //# sourceMappingURL=cuby-ui-core.mjs.map