@cuby-ui/core 0.0.16 → 0.0.17

package/fesm2020/cuby-ui-core.mjs

@@ -5,7 +5,7 @@ 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, CuiFilterPipe, CuiPopoverService, cuiProvide, CuiAutoResizingDirective } from '@cuby-ui/cdk';
+import { cuiCreateToken, cuiCreateTokenFromFactory, CuiDestroyService, CuiFilterPipe, CuiPopoverService, cuiProvide, CuiAutoResizingDirective, CUI_LOCAL_STORAGE } from '@cuby-ui/cdk';
 import { BehaviorSubject, takeUntil } from 'rxjs';
 import * as i2$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
@@ -311,10 +311,10 @@ class CuiNotificationComponent {
     }
 }
 CuiNotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiNotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiNotificationComponent, selector: "cui-notification", inputs: { status: "status", isCloseable: "isCloseable" }, outputs: { closed: "closed" }, host: { properties: { "attr.data-status": "this.status" } }, ngImport: i0, template: "<cui-svg\n  *ngIf=\"ICON_OPTIONS[status] as iconOption\"\n  [icon]=\"iconOption.icon\"\n  [color]=\"iconOption.color\"\n></cui-svg>\n<div class=\"c-content\">\n  <ng-content></ng-content>\n</div>\n<button\n  *ngIf=\"isCloseable\"\n  cuiButton\n  appearance=\"ghost\"\n  size=\"xxs\"\n  icon=\"cuiIconX\"\n  (click)=\"onClose()\"\n></button>\n", styles: [":host{padding:16px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:flex-start;border-radius:12px;background:var(--dark-gray-30);color:var(--cui-gray-0);font-family:var(--cui-main-font)}:host-context([cuiTheme=dark])[data-status=info]{background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}.c-content{flex:1;margin-left:12px;margin-right:16px}\n"], dependencies: [{ 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"] }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CuiNotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiNotificationComponent, selector: "cui-notification", inputs: { status: "status", isCloseable: "isCloseable" }, outputs: { closed: "closed" }, host: { properties: { "attr.data-status": "this.status" } }, ngImport: i0, template: "<cui-svg\n  *ngIf=\"ICON_OPTIONS[status] as iconOption\"\n  [icon]=\"iconOption.icon\"\n  [color]=\"iconOption.color\"\n></cui-svg>\n<div class=\"c-content\">\n  <ng-content></ng-content>\n</div>\n<button\n  *ngIf=\"isCloseable\"\n  cuiButton\n  appearance=\"ghost\"\n  size=\"xxs\"\n  icon=\"cuiIconX\"\n  (click)=\"onClose()\"\n></button>\n", styles: [":host{padding:16px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:flex-start;border-radius:12px;background:var(--cui-dark-gray-30);color:var(--cui-gray-0);font-family:var(--cui-main-font)}:host-context([cuiTheme=dark])[data-status=info]{background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}.c-content{flex:1;margin-left:12px;margin-right:16px;overflow-wrap:anywhere}\n"], dependencies: [{ 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"] }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\n  *ngIf=\"ICON_OPTIONS[status] as iconOption\"\n  [icon]=\"iconOption.icon\"\n  [color]=\"iconOption.color\"\n></cui-svg>\n<div class=\"c-content\">\n  <ng-content></ng-content>\n</div>\n<button\n  *ngIf=\"isCloseable\"\n  cuiButton\n  appearance=\"ghost\"\n  size=\"xxs\"\n  icon=\"cuiIconX\"\n  (click)=\"onClose()\"\n></button>\n", styles: [":host{padding:16px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:flex-start;border-radius:12px;background:var(--dark-gray-30);color:var(--cui-gray-0);font-family:var(--cui-main-font)}:host-context([cuiTheme=dark])[data-status=info]{background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}.c-content{flex:1;margin-left:12px;margin-right:16px}\n"] }]
+            args: [{ selector: 'cui-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\n  *ngIf=\"ICON_OPTIONS[status] as iconOption\"\n  [icon]=\"iconOption.icon\"\n  [color]=\"iconOption.color\"\n></cui-svg>\n<div class=\"c-content\">\n  <ng-content></ng-content>\n</div>\n<button\n  *ngIf=\"isCloseable\"\n  cuiButton\n  appearance=\"ghost\"\n  size=\"xxs\"\n  icon=\"cuiIconX\"\n  (click)=\"onClose()\"\n></button>\n", styles: [":host{padding:16px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:flex-start;border-radius:12px;background:var(--cui-dark-gray-30);color:var(--cui-gray-0);font-family:var(--cui-main-font)}:host-context([cuiTheme=dark])[data-status=info]{background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}.c-content{flex:1;margin-left:12px;margin-right:16px;overflow-wrap:anywhere}\n"] }]
         }], propDecorators: { status: [{
                 type: Input
             }, {
@@ -348,10 +348,10 @@ class CuiAlertComponent {
     }
 }
 CuiAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiAlertComponent, selector: "cui-alert", host: { properties: { "attr.data-resizing": "this.resizing" } }, ngImport: i0, template: "<cui-notification\n  [status]=\"context.status\"\n  [isCloseable]=\"context.isCloseable\"\n  (closed)=\"onClosed()\"\n>\n  <h2 class=\"c-heading\">Title</h2>\n  {{ this.context.content }}\n</cui-notification>\n", styles: [":host{max-width:470px}:host[data-resizing=hug]{width:-moz-fit-content;width:fit-content}:host[data-resizing=fixed]{width:470px}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0 0 8px}\n"], dependencies: [{ kind: "component", type: CuiNotificationComponent, selector: "cui-notification", inputs: ["status", "isCloseable"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CuiAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiAlertComponent, selector: "cui-alert", host: { properties: { "attr.data-resizing": "this.resizing" } }, ngImport: i0, template: "<cui-notification\n  [status]=\"context.status\"\n  [isCloseable]=\"context.isCloseable\"\n  (closed)=\"onClosed()\"\n>\n  <h2\n    *ngIf=\"context.label\"\n    class=\"c-heading\"\n  >\n    {{ context.label }}\n  </h2>\n  {{ context.content }}\n</cui-notification>\n", styles: [":host{max-width:470px}:host[data-resizing=hug]{width:-moz-fit-content;width:fit-content}:host[data-resizing=fixed]{width:470px}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0 0 8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CuiNotificationComponent, selector: "cui-notification", inputs: ["status", "isCloseable"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-notification\n  [status]=\"context.status\"\n  [isCloseable]=\"context.isCloseable\"\n  (closed)=\"onClosed()\"\n>\n  <h2 class=\"c-heading\">Title</h2>\n  {{ this.context.content }}\n</cui-notification>\n", styles: [":host{max-width:470px}:host[data-resizing=hug]{width:-moz-fit-content;width:fit-content}:host[data-resizing=fixed]{width:470px}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0 0 8px}\n"] }]
+            args: [{ selector: 'cui-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-notification\n  [status]=\"context.status\"\n  [isCloseable]=\"context.isCloseable\"\n  (closed)=\"onClosed()\"\n>\n  <h2\n    *ngIf=\"context.label\"\n    class=\"c-heading\"\n  >\n    {{ context.label }}\n  </h2>\n  {{ context.content }}\n</cui-notification>\n", styles: [":host{max-width:470px}:host[data-resizing=hug]{width:-moz-fit-content;width:fit-content}:host[data-resizing=fixed]{width:470px}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0 0 8px}\n"] }]
         }], propDecorators: { resizing: [{
                 type: HostBinding,
                 args: ['attr.data-resizing']
@@ -380,10 +380,10 @@ class CuiAlertsComponent {
     }
 }
 CuiAlertsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiAlertsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiAlertsComponent, selector: "cui-alerts", providers: [CuiDestroyService], ngImport: i0, template: "<ng-container *ngIf=\"alerts$ | async as alerts\">\n  <div class=\"c-wrapper c-wrapper_position_center\">\n    <ng-container *ngFor=\"let alert of alerts | cuiFilter: alertsMatcher: 'center'; let i = index; trackBy: trackByFn\">\n      <ng-container *ngComponentOutlet=\"alert.component; injector: alertInjectors[i]\"></ng-container>\n    </ng-container>\n  </div>\n  <div class=\"c-wrapper c-wrapper_position_right\">\n    <ng-container *ngFor=\"let alert of alerts | cuiFilter: alertsMatcher: 'right'; let i = index; trackBy: trackByFn\">\n      <ng-container *ngComponentOutlet=\"alert.component; injector: alertInjectors[i]\"></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;position:fixed;right:20px;bottom:20px}.c-wrapper{position:fixed;bottom:20px;display:flex;flex-direction:column;gap:16px}.c-wrapper_position_center{left:50%;transform:translate(-50%)}.c-wrapper_position_right{right:20px}\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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.CuiFilterPipe, name: "cuiFilter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CuiAlertsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiAlertsComponent, selector: "cui-alerts", providers: [CuiDestroyService], ngImport: i0, template: "<ng-container *ngIf=\"alerts$ | async as alerts\">\n  <div class=\"c-wrapper c-wrapper_position_center\">\n    <ng-container *ngFor=\"let alert of alerts | cuiFilter: alertsMatcher: 'center'; let i = index; trackBy: trackByFn\">\n      <ng-container *ngComponentOutlet=\"alert.component; injector: alertInjectors[i]\"></ng-container>\n    </ng-container>\n  </div>\n  <div class=\"c-wrapper c-wrapper_position_right\">\n    <ng-container *ngFor=\"let alert of alerts | cuiFilter: alertsMatcher: 'right'; let i = index; trackBy: trackByFn\">\n      <ng-container *ngComponentOutlet=\"alert.component; injector: alertInjectors[i]\"></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;position:fixed;right:20px;bottom:20px}.c-wrapper{position:fixed;bottom:20px;display:flex;flex-direction:column;gap:16px}.c-wrapper_position_center{align-items:center;left:50%;transform:translate(-50%)}.c-wrapper_position_right{align-items:flex-end;right:20px}\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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.CuiFilterPipe, name: "cuiFilter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-alerts', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiDestroyService], template: "<ng-container *ngIf=\"alerts$ | async as alerts\">\n  <div class=\"c-wrapper c-wrapper_position_center\">\n    <ng-container *ngFor=\"let alert of alerts | cuiFilter: alertsMatcher: 'center'; let i = index; trackBy: trackByFn\">\n      <ng-container *ngComponentOutlet=\"alert.component; injector: alertInjectors[i]\"></ng-container>\n    </ng-container>\n  </div>\n  <div class=\"c-wrapper c-wrapper_position_right\">\n    <ng-container *ngFor=\"let alert of alerts | cuiFilter: alertsMatcher: 'right'; let i = index; trackBy: trackByFn\">\n      <ng-container *ngComponentOutlet=\"alert.component; injector: alertInjectors[i]\"></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;position:fixed;right:20px;bottom:20px}.c-wrapper{position:fixed;bottom:20px;display:flex;flex-direction:column;gap:16px}.c-wrapper_position_center{left:50%;transform:translate(-50%)}.c-wrapper_position_right{right:20px}\n"] }]
+            args: [{ selector: 'cui-alerts', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiDestroyService], template: "<ng-container *ngIf=\"alerts$ | async as alerts\">\n  <div class=\"c-wrapper c-wrapper_position_center\">\n    <ng-container *ngFor=\"let alert of alerts | cuiFilter: alertsMatcher: 'center'; let i = index; trackBy: trackByFn\">\n      <ng-container *ngComponentOutlet=\"alert.component; injector: alertInjectors[i]\"></ng-container>\n    </ng-container>\n  </div>\n  <div class=\"c-wrapper c-wrapper_position_right\">\n    <ng-container *ngFor=\"let alert of alerts | cuiFilter: alertsMatcher: 'right'; let i = index; trackBy: trackByFn\">\n      <ng-container *ngComponentOutlet=\"alert.component; injector: alertInjectors[i]\"></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;position:fixed;right:20px;bottom:20px}.c-wrapper{position:fixed;bottom:20px;display:flex;flex-direction:column;gap:16px}.c-wrapper_position_center{align-items:center;left:50%;transform:translate(-50%)}.c-wrapper_position_right{align-items:flex-end;right:20px}\n"] }]
         }] });
 
 class CuiNotificationModule {
@@ -415,6 +415,7 @@ CuiAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         CuiAlertsComponent], imports: [CommonModule,
         CuiFilterPipe,
         CuiNotificationModule], exports: [CuiAlertComponent,
+        CuiAlertComponent,
         CuiAlertsComponent] });
 CuiAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertModule, imports: [CommonModule,
         CuiNotificationModule] });
@@ -431,6 +432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         CuiAlertsComponent
                     ],
                     exports: [
+                        CuiAlertComponent,
                         CuiAlertComponent,
                         CuiAlertsComponent
                     ]
@@ -449,6 +451,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
+const CUI_BANNER_DEFAULT_OPTIONS = {
+    status: 'info'
+};
+const CUI_BANNER_OPTIONS = cuiCreateToken(CUI_BANNER_DEFAULT_OPTIONS);
+
+class CuiBannerComponent {
+    constructor() {
+        this.cuiBannerOptions = inject(CUI_BANNER_OPTIONS);
+        this.ICON_OPTIONS = {
+            info: {
+                icon: 'cuiIconInfo',
+                color: 'var(--c-info-color)'
+            },
+            success: {
+                icon: 'cuiIconCheckCircle',
+                color: 'var(--cui-green-500)'
+            },
+            alert: {
+                icon: 'cuiIconAlertTriangle',
+                color: 'var(--c-alert-color)'
+            },
+            error: {
+                icon: 'cuiIconXCircle',
+                color: 'var(--cui-red-500)'
+            },
+        };
+        this.status = this.cuiBannerOptions.status;
+        this.isCloseable = true;
+        this.actionButtonClicked = new EventEmitter();
+        this.closed = new EventEmitter();
+    }
+    onAction() {
+        this.actionButtonClicked.emit();
+    }
+    onClose() {
+        this.closed.emit();
+    }
+}
+CuiBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiBannerComponent, selector: "cui-banner", inputs: { status: "status", isCloseable: "isCloseable", label: "label", actionButtonText: "actionButtonText" }, outputs: { actionButtonClicked: "actionButtonClicked", closed: "closed" }, host: { properties: { "attr.data-status": "this.status" } }, ngImport: i0, template: "<cui-svg\n  *ngIf=\"ICON_OPTIONS[status] as iconOption\"\n  [icon]=\"iconOption.icon\"\n  [color]=\"iconOption.color\"\n  class=\"c-icon\"\n></cui-svg>\n<div class=\"c-wrapper\">\n  <h2\n    *ngIf=\"label\"\n    class=\"c-heading\"\n  >\n    {{ label }}\n  </h2>\n  <ng-content></ng-content>\n  <!-- TODO: \u0416\u0434\u0443 \u0442\u0451\u043C\u043D\u0443\u044E \u0442\u0435\u043C\u0443 \u043A\u043D\u043E\u043F\u043E\u043A -->\n  <button\n    cuiButton\n    *ngIf=\"actionButtonText\"\n    appearance=\"link\"\n    (click)=\"onAction()\"\n  >\n    {{ actionButtonText }}\n  </button>\n</div>\n<button\n  *ngIf=\"isCloseable\"\n  cuiButton\n  appearance=\"ghost\"\n  size=\"xxs\"\n  icon=\"cuiIconX\"\n  (click)=\"onClose()\"\n></button>\n", styles: [":host{--c-info-color: var(--cui-blue-600);--c-success-color: var(--cui-green-700);--c-alert-color: var(--cui-orange-800);padding:12px 16px;font-weight:400;font-size:14px;line-height:20px;display:flex;color:var(--cui-base-900);font-family:var(--cui-main-font)}:host[data-status=info]{background:var(--cui-light-blue-50)}:host[data-status=success]{background:var(--cui-green-50)}:host[data-status=alert]{color:var(--cui-orange-800);background:var(--cui-yellow-100)}:host[data-status=error]{background:var(--cui-red-50)}:host-context([cuiTheme=dark]){--c-info-color: var(--cui-blue-500);--c-success-color: var(--cui-green-500);--c-alert-color: #F9C15A;color:var(--cui-gray-0)}:host-context([cuiTheme=dark])[data-status=info]{background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}.c-icon{height:28px}.c-wrapper{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:12px;margin-right:16px;overflow-wrap:anywhere}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0}\n"], dependencies: [{ 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"] }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\n  *ngIf=\"ICON_OPTIONS[status] as iconOption\"\n  [icon]=\"iconOption.icon\"\n  [color]=\"iconOption.color\"\n  class=\"c-icon\"\n></cui-svg>\n<div class=\"c-wrapper\">\n  <h2\n    *ngIf=\"label\"\n    class=\"c-heading\"\n  >\n    {{ label }}\n  </h2>\n  <ng-content></ng-content>\n  <!-- TODO: \u0416\u0434\u0443 \u0442\u0451\u043C\u043D\u0443\u044E \u0442\u0435\u043C\u0443 \u043A\u043D\u043E\u043F\u043E\u043A -->\n  <button\n    cuiButton\n    *ngIf=\"actionButtonText\"\n    appearance=\"link\"\n    (click)=\"onAction()\"\n  >\n    {{ actionButtonText }}\n  </button>\n</div>\n<button\n  *ngIf=\"isCloseable\"\n  cuiButton\n  appearance=\"ghost\"\n  size=\"xxs\"\n  icon=\"cuiIconX\"\n  (click)=\"onClose()\"\n></button>\n", styles: [":host{--c-info-color: var(--cui-blue-600);--c-success-color: var(--cui-green-700);--c-alert-color: var(--cui-orange-800);padding:12px 16px;font-weight:400;font-size:14px;line-height:20px;display:flex;color:var(--cui-base-900);font-family:var(--cui-main-font)}:host[data-status=info]{background:var(--cui-light-blue-50)}:host[data-status=success]{background:var(--cui-green-50)}:host[data-status=alert]{color:var(--cui-orange-800);background:var(--cui-yellow-100)}:host[data-status=error]{background:var(--cui-red-50)}:host-context([cuiTheme=dark]){--c-info-color: var(--cui-blue-500);--c-success-color: var(--cui-green-500);--c-alert-color: #F9C15A;color:var(--cui-gray-0)}:host-context([cuiTheme=dark])[data-status=info]{background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}.c-icon{height:28px}.c-wrapper{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:12px;margin-right:16px;overflow-wrap:anywhere}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0}\n"] }]
+        }], propDecorators: { status: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-status']
+            }], isCloseable: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], actionButtonText: [{
+                type: Input
+            }], actionButtonClicked: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }] } });
+
+class CuiBannerModule {
+}
+CuiBannerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiBannerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerModule, declarations: [CuiBannerComponent], imports: [CommonModule,
+        CuiSvgModule,
+        CuiButtonModule], exports: [CuiBannerComponent] });
+CuiBannerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerModule, imports: [CommonModule,
+        CuiSvgModule,
+        CuiButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBannerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        CuiSvgModule,
+                        CuiButtonModule
+                    ],
+                    declarations: [CuiBannerComponent],
+                    exports: [CuiBannerComponent]
+                }]
+        }] });
+
 class CuiButtonGroupComponent {
 }
 CuiButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -846,6 +930,7 @@ const CUI_TEXT_FILED_CONTROLLER_PROVIDER = [
     }
 ];
 
+// TODO: Будет переделан дизайн
 class CuiEditorComponent {
     constructor() {
         this.ICONS = {
@@ -1579,6 +1664,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
+class CuiRootComponent {
+}
+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", ngImport: i0, template: "<ng-content />\n<cui-dialogs />\n<cui-alerts />\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, template: "<ng-content />\n<cui-dialogs />\n<cui-alerts />\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 CuiTextareaComponent {
     constructor() {
         this.cuiTextFieldController = inject(CUI_TEXT_FIELD_CONTROLLER);
@@ -1616,9 +1732,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
+const CUI_THEME_STORAGE_DEFAULT_KEY = 'cuiTheme';
+const CUI_DEFAULT_THEME = 'light';
+const CUI_THEME_STORAGE_KEY = cuiCreateToken(CUI_THEME_STORAGE_DEFAULT_KEY);
+const CUI_THEME = cuiCreateToken(CUI_DEFAULT_THEME);
+
+class CuiThemeService extends BehaviorSubject {
+    constructor() {
+        super(inject(CUI_LOCAL_STORAGE).getItem(inject(CUI_THEME_STORAGE_KEY))
+            ?? inject(CUI_THEME));
+        this.localStorage = inject(CUI_LOCAL_STORAGE);
+        this.key = inject(CUI_THEME_STORAGE_KEY);
+    }
+    next(theme) {
+        this.localStorage.setItem(this.key, theme);
+        super.next(theme);
+    }
+    // При работе только двух тем
+    switch() {
+        this.next(this.value === 'light' ? 'dark' : 'light');
+    }
+}
+CuiThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CuiThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiThemeService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CUI_ALERTS, CUI_ALERT_CONTEXT, CUI_ALERT_DEFAULT_OPTIONS, CUI_ALERT_OPTIONS, CUI_BUTTON_DEFAULT_OPTIONS, CUI_BUTTON_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, CuiAccordionComponent, CuiAccordionItemComponent, CuiAccordionModule, CuiAlertComponent, CuiAlertModule, CuiAlertService, CuiAlertsComponent, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiContextMenuComponent, CuiContextMenuModule, CuiDialogComponent, CuiDialogModule, CuiDialogService, CuiDialogsComponent, CuiEditorComponent, CuiEditorModule, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiLabelComponent, CuiLabelModule, CuiNotificationComponent, CuiNotificationModule, CuiSvgComponent, CuiSvgModule, CuiTextFieldController, CuiTextFieldControllerModule, CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective, CuiTextareaComponent, CuiTextareaModule, 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_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, CuiAccordionComponent, CuiAccordionItemComponent, CuiAccordionModule, CuiAlertComponent, CuiAlertModule, CuiAlertService, CuiAlertsComponent, CuiBannerComponent, CuiBannerModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiContextMenuComponent, CuiContextMenuModule, CuiDialogComponent, CuiDialogModule, CuiDialogService, CuiDialogsComponent, CuiEditorComponent, CuiEditorModule, CuiHintComponent, CuiHintModule, CuiIconButtonComponent, CuiIconButtonModule, CuiInputModule, CuiInputNumberComponent, CuiInputNumberModule, CuiInputPasswordComponent, CuiInputPasswordModule, CuiInputTextComponent, CuiLabelComponent, CuiLabelModule, CuiNotificationComponent, CuiNotificationModule, CuiRootComponent, CuiRootModule, CuiSvgComponent, CuiSvgModule, CuiTextFieldController, CuiTextFieldControllerModule, CuiTextFieldIconLeftDirective, CuiTextFieldIdDirective, CuiTextFieldIsErrorDirective, CuiTextFieldPlaceholderDirective, CuiTextFieldSizeDirective, CuiTextareaComponent, CuiTextareaModule, CuiThemeService, cuiRemoveSpaces, cuiReplace };
 //# sourceMappingURL=cuby-ui-core.mjs.map