@cuby-ui/core 0.0.38 → 0.0.39

package/components/badge/badge.component.d.ts

@@ -0,0 +1,10 @@
+import type { CuiBadgeOptions } from './badge.options';
+import * as i0 from "@angular/core";
+export declare class CuiBadgeComponent implements CuiBadgeOptions {
+    private readonly options;
+    status: import("@cuby-ui/core").CuiStatus;
+    size: "sm" | "md";
+    isWithDot: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuiBadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CuiBadgeComponent, "cui-badge", never, { "status": "status"; "size": "size"; "isWithDot": "isWithDot"; }, {}, never, ["*"], false, never>;
+}

package/components/badge/badge.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./badge.component";
+import * as i2 from "@angular/common";
+export declare class CuiBadgeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuiBadgeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CuiBadgeModule, [typeof i1.CuiBadgeComponent], [typeof i2.CommonModule], [typeof i1.CuiBadgeComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CuiBadgeModule>;
+}

package/components/badge/badge.options.d.ts

@@ -0,0 +1,8 @@
+import type { CuiSizeMd, CuiSizeSm, CuiStatus } from '../../types';
+export interface CuiBadgeOptions {
+    readonly status: CuiStatus;
+    readonly size: CuiSizeSm | CuiSizeMd;
+    readonly isWithDot: boolean;
+}
+export declare const CUI_BADGE_DEFAULT_OPTIONS: CuiBadgeOptions;
+export declare const CUI_BADGE_OPTIONS: import("@angular/core").InjectionToken<CuiBadgeOptions>;

package/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './badge.component';
+export * from './badge.module';

package/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './accordion';
 export * from './alert';
+export * from './badge';
 export * from './banner';
 export * from './breadcrumbs';
 export * from './button';

package/esm2020/components/badge/badge.component.mjs

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, HostBinding, inject, Input } from '@angular/core';
+import { CUI_BADGE_OPTIONS } from './badge.options';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class CuiBadgeComponent {
+    constructor() {
+        this.options = inject(CUI_BADGE_OPTIONS);
+        this.status = this.options.status;
+        this.size = this.options.size;
+        this.isWithDot = this.options.isWithDot;
+    }
+}
+CuiBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiBadgeComponent, selector: "cui-badge", inputs: { status: "status", size: "size", isWithDot: "isWithDot" }, host: { properties: { "attr.data-status": "this.status", "attr.data-size": "this.size" } }, ngImport: i0, template: "<span\n  *ngIf=\"isWithDot\"\n  class=\"c-dots\"\n></span>\n<ng-content />", styles: [":host{padding-top:2px;padding-bottom:2px;display:inline-flex;align-items:center;gap:4px;border-radius:25px;color:var(--cui-gray-900);font-family:var(--cui-main-font)}:host[data-status=info]{background:var(--cui-light-blue-50)}:host[data-status=info] .c-dots{background:var(--cui-info)}:host[data-status=success]{background:var(--cui-green-50)}:host[data-status=success] .c-dots{background:var(--cui-success)}:host[data-status=alert]{background:var(--cui-yellow-50)}:host[data-status=alert] .c-dots{background:var(--cui-warning)}:host[data-status=error]{background:var(--cui-red-50)}:host[data-status=error] .c-dots{background:var(--cui-danger)}:host[data-size=sm]{font-size:12px;line-height:14px;padding-right:6px;padding-left:6px}:host[data-size=md]{font-size:14px;line-height:20px;padding-right:8px;padding-left:8px}:host-context([cuiTheme=dark])[data-status=info]{color:var(--cui-light-blue-600);background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{color:var(--cui-green-600);background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{color:var(--cui-yellow-400);background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{color:var(--cui-red-400);background:var(--cui-red-900)}.c-dots{width:6px;height:6px;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  *ngIf=\"isWithDot\"\n  class=\"c-dots\"\n></span>\n<ng-content />", styles: [":host{padding-top:2px;padding-bottom:2px;display:inline-flex;align-items:center;gap:4px;border-radius:25px;color:var(--cui-gray-900);font-family:var(--cui-main-font)}:host[data-status=info]{background:var(--cui-light-blue-50)}:host[data-status=info] .c-dots{background:var(--cui-info)}:host[data-status=success]{background:var(--cui-green-50)}:host[data-status=success] .c-dots{background:var(--cui-success)}:host[data-status=alert]{background:var(--cui-yellow-50)}:host[data-status=alert] .c-dots{background:var(--cui-warning)}:host[data-status=error]{background:var(--cui-red-50)}:host[data-status=error] .c-dots{background:var(--cui-danger)}:host[data-size=sm]{font-size:12px;line-height:14px;padding-right:6px;padding-left:6px}:host[data-size=md]{font-size:14px;line-height:20px;padding-right:8px;padding-left:8px}:host-context([cuiTheme=dark])[data-status=info]{color:var(--cui-light-blue-600);background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{color:var(--cui-green-600);background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{color:var(--cui-yellow-400);background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{color:var(--cui-red-400);background:var(--cui-red-900)}.c-dots{width:6px;height:6px;border-radius:50%}\n"] }]
+        }], propDecorators: { status: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-status']
+            }], size: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-size']
+            }], isWithDot: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZS9jb21wb25lbnRzL2JhZGdlL2JhZGdlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmUvY29tcG9uZW50cy9iYWRnZS9iYWRnZS50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHL0YsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUJBQWlCLENBQUM7OztBQVFwRCxNQUFNLE9BQU8saUJBQWlCO0lBTjlCO1FBT21CLFlBQU8sR0FBRyxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQztRQUk5QyxXQUFNLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUM7UUFJN0IsU0FBSSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDO1FBR3pCLGNBQVMsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQztLQUMzQzs7K0dBYlksaUJBQWlCO21HQUFqQixpQkFBaUIsaU5DWDlCLDRFQUljOzRGRE9ELGlCQUFpQjtrQkFON0IsU0FBUzsrQkFDRSxXQUFXLG1CQUdKLHVCQUF1QixDQUFDLE1BQU07OEJBT3hDLE1BQU07c0JBRlosS0FBSzs7c0JBQ0wsV0FBVzt1QkFBQyxrQkFBa0I7Z0JBS3hCLElBQUk7c0JBRlYsS0FBSzs7c0JBQ0wsV0FBVzt1QkFBQyxnQkFBZ0I7Z0JBSXRCLFNBQVM7c0JBRGYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBpbmplY3QsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB0eXBlIHsgQ3VpQmFkZ2VPcHRpb25zIH0gZnJvbSAnLi9iYWRnZS5vcHRpb25zJztcbmltcG9ydCB7IENVSV9CQURHRV9PUFRJT05TIH0gZnJvbSAnLi9iYWRnZS5vcHRpb25zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3VpLWJhZGdlJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2JhZGdlLnRlbXBsYXRlLmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9iYWRnZS5zdHlsZS5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIEN1aUJhZGdlQ29tcG9uZW50IGltcGxlbWVudHMgQ3VpQmFkZ2VPcHRpb25zIHtcbiAgcHJpdmF0ZSByZWFkb25seSBvcHRpb25zID0gaW5qZWN0KENVSV9CQURHRV9PUFRJT05TKTtcblxuICBASW5wdXQoKVxuICBASG9zdEJpbmRpbmcoJ2F0dHIuZGF0YS1zdGF0dXMnKVxuICBwdWJsaWMgc3RhdHVzID0gdGhpcy5vcHRpb25zLnN0YXR1cztcblxuICBASW5wdXQoKVxuICBASG9zdEJpbmRpbmcoJ2F0dHIuZGF0YS1zaXplJylcbiAgcHVibGljIHNpemUgPSB0aGlzLm9wdGlvbnMuc2l6ZTtcblxuICBASW5wdXQoKVxuICBwdWJsaWMgaXNXaXRoRG90ID0gdGhpcy5vcHRpb25zLmlzV2l0aERvdDtcbn1cbiIsIjxzcGFuXG4gICpuZ0lmPVwiaXNXaXRoRG90XCJcbiAgY2xhc3M9XCJjLWRvdHNcIlxuPjwvc3Bhbj5cbjxuZy1jb250ZW50IC8+Il19

package/esm2020/components/badge/badge.module.mjs

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CuiBadgeComponent } from './badge.component';
+import * as i0 from "@angular/core";
+export class CuiBadgeModule {
+}
+CuiBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeModule, declarations: [CuiBadgeComponent], imports: [CommonModule], exports: [CuiBadgeComponent] });
+CuiBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [CuiBadgeComponent],
+                    exports: [CuiBadgeComponent]
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZS9jb21wb25lbnRzL2JhZGdlL2JhZGdlLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUUvQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQzs7QUFPdEQsTUFBTSxPQUFPLGNBQWM7OzRHQUFkLGNBQWM7NkdBQWQsY0FBYyxpQkFIVixpQkFBaUIsYUFEdEIsWUFBWSxhQUVaLGlCQUFpQjs2R0FFaEIsY0FBYyxZQUpmLFlBQVk7NEZBSVgsY0FBYztrQkFMMUIsUUFBUTttQkFBQztvQkFDUixPQUFPLEVBQUUsQ0FBQyxZQUFZLENBQUM7b0JBQ3ZCLFlBQVksRUFBRSxDQUFDLGlCQUFpQixDQUFDO29CQUNqQyxPQUFPLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQztpQkFDN0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuaW1wb3J0IHsgQ3VpQmFkZ2VDb21wb25lbnQgfSBmcm9tICcuL2JhZGdlLmNvbXBvbmVudCc7XG5cbkBOZ01vZHVsZSh7XG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICBkZWNsYXJhdGlvbnM6IFtDdWlCYWRnZUNvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtDdWlCYWRnZUNvbXBvbmVudF1cbn0pXG5leHBvcnQgY2xhc3MgQ3VpQmFkZ2VNb2R1bGUge1xufVxuIl19

package/esm2020/components/badge/badge.options.mjs

@@ -0,0 +1,8 @@
+import { cuiCreateToken } from '@cuby-ui/cdk';
+export const CUI_BADGE_DEFAULT_OPTIONS = {
+    status: 'info',
+    size: 'sm',
+    isWithDot: false
+};
+export const CUI_BADGE_OPTIONS = cuiCreateToken(CUI_BADGE_DEFAULT_OPTIONS);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2Uub3B0aW9ucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmUvY29tcG9uZW50cy9iYWRnZS9iYWRnZS5vcHRpb25zLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFVOUMsTUFBTSxDQUFDLE1BQU0seUJBQXlCLEdBQW9CO0lBQ3hELE1BQU0sRUFBRSxNQUFNO0lBQ2QsSUFBSSxFQUFFLElBQUk7SUFDVixTQUFTLEVBQUUsS0FBSztDQUNqQixDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0saUJBQWlCLEdBQUcsY0FBYyxDQUFDLHlCQUF5QixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjdWlDcmVhdGVUb2tlbiB9IGZyb20gJ0BjdWJ5LXVpL2Nkayc7XG5cbmltcG9ydCB0eXBlIHsgQ3VpU2l6ZU1kLCBDdWlTaXplU20sIEN1aVN0YXR1cyB9IGZyb20gJy4uLy4uL3R5cGVzJztcblxuZXhwb3J0IGludGVyZmFjZSBDdWlCYWRnZU9wdGlvbnMge1xuICByZWFkb25seSBzdGF0dXM6IEN1aVN0YXR1cztcbiAgcmVhZG9ubHkgc2l6ZTogQ3VpU2l6ZVNtIHwgQ3VpU2l6ZU1kO1xuICByZWFkb25seSBpc1dpdGhEb3Q6IGJvb2xlYW47XG59XG5cbmV4cG9ydCBjb25zdCBDVUlfQkFER0VfREVGQVVMVF9PUFRJT05TOiBDdWlCYWRnZU9wdGlvbnMgPSB7XG4gIHN0YXR1czogJ2luZm8nLFxuICBzaXplOiAnc20nLFxuICBpc1dpdGhEb3Q6IGZhbHNlXG59O1xuXG5leHBvcnQgY29uc3QgQ1VJX0JBREdFX09QVElPTlMgPSBjdWlDcmVhdGVUb2tlbihDVUlfQkFER0VfREVGQVVMVF9PUFRJT05TKTsiXX0=

package/esm2020/components/badge/index.mjs

@@ -0,0 +1,3 @@
+export * from './badge.component';
+export * from './badge.module';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JlL2NvbXBvbmVudHMvYmFkZ2UvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLGdCQUFnQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9iYWRnZS5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9iYWRnZS5tb2R1bGUnO1xuIl19

package/esm2020/components/button/button.component.mjs

@@ -68,10 +68,10 @@ export class CuiButtonComponent {
     }
 }
 CuiButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: { shape: "shape", disabled: "disabled", isLoaderShown: "isLoaderShown", icon: "icon", iconRight: "iconRight", appearance: "appearance", size: "size" }, host: { properties: { "attr.data-shape": "this.shape", "class._disabled": "this.disabled", "class._loading": "this.isLoaderShown", "attr.data-appearance": "this.appearance", "attr.data-size": "this.size", "class._only-icon": "this.containsOnlyIcon", "disabled": "this.isDisabled" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span\n  class=\"c-wrapper\"\n  [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n  <cui-svg\n    *ngIf=\"icon\"\n    [icon]=\"icon\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n  <span\n    #content\n    *ngIf=\"!containsOnlyIcon\"\n  >\n    <ng-content></ng-content>\n  </span>\n  <cui-svg\n    *ngIf=\"iconRight\"\n    [icon]=\"iconRight\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n</span>\n<cui-svg\n  *ngIf=\"isLoaderShown\"\n  icon=\"cuiIconLoading\"\n  class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=accent]{background:var(--cui-accent-800);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=accent]:hover{background:var(--cui-accent-900)}}:host[data-appearance=accent]:active{background:var(--cui-accent-900)}:host[data-appearance=accent]:disabled{background:var(--cui-accent-800)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-error-600)}}:host[data-appearance=destructive]:active{background:var(--cui-error-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-info-900)}}:host[data-appearance=link]:active{color:var(--cui-info-900)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 8px}:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 7px}:host[data-size=xxs]._only-icon{width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]._only-icon{width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]._only-icon{width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]._only-icon{width:40px}:host._disabled{opacity:.5}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CuiButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: { shape: "shape", disabled: "disabled", isLoaderShown: "isLoaderShown", icon: "icon", iconRight: "iconRight", appearance: "appearance", size: "size" }, host: { properties: { "attr.data-shape": "this.shape", "class._disabled": "this.disabled", "class._loading": "this.isLoaderShown", "attr.data-appearance": "this.appearance", "attr.data-size": "this.size", "class._only-icon": "this.containsOnlyIcon", "disabled": "this.isDisabled" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span\n  class=\"c-wrapper\"\n  [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n  <cui-svg\n    *ngIf=\"icon\"\n    [icon]=\"icon\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n  <span\n    #content\n    *ngIf=\"!containsOnlyIcon\"\n  >\n    <ng-content></ng-content>\n  </span>\n  <cui-svg\n    *ngIf=\"iconRight\"\n    [icon]=\"iconRight\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n</span>\n<cui-svg\n  *ngIf=\"isLoaderShown\"\n  icon=\"cuiIconLoading\"\n  class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=accent]{background:var(--cui-accent-800);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=accent]:hover{background:var(--cui-accent-900)}}:host[data-appearance=accent]:active{background:var(--cui-accent-900)}:host[data-appearance=accent]:disabled{background:var(--cui-accent-800)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-red-600)}}:host[data-appearance=destructive]:active{background:var(--cui-red-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-blue-800)}}:host[data-appearance=link]:active{color:var(--cui-blue-800)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 8px}:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 7px}:host[data-size=xxs]._only-icon{width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]._only-icon{width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]._only-icon{width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]._only-icon{width:40px}:host._disabled{opacity:.5}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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: CuiButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[cuiButton], a[cuiButton]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"c-wrapper\"\n  [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n  <cui-svg\n    *ngIf=\"icon\"\n    [icon]=\"icon\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n  <span\n    #content\n    *ngIf=\"!containsOnlyIcon\"\n  >\n    <ng-content></ng-content>\n  </span>\n  <cui-svg\n    *ngIf=\"iconRight\"\n    [icon]=\"iconRight\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n</span>\n<cui-svg\n  *ngIf=\"isLoaderShown\"\n  icon=\"cuiIconLoading\"\n  class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=accent]{background:var(--cui-accent-800);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=accent]:hover{background:var(--cui-accent-900)}}:host[data-appearance=accent]:active{background:var(--cui-accent-900)}:host[data-appearance=accent]:disabled{background:var(--cui-accent-800)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-error-600)}}:host[data-appearance=destructive]:active{background:var(--cui-error-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-info-900)}}:host[data-appearance=link]:active{color:var(--cui-info-900)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 8px}:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 7px}:host[data-size=xxs]._only-icon{width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]._only-icon{width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]._only-icon{width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]._only-icon{width:40px}:host._disabled{opacity:.5}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
+            args: [{ selector: 'button[cuiButton], a[cuiButton]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"c-wrapper\"\n  [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n  <cui-svg\n    *ngIf=\"icon\"\n    [icon]=\"icon\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n  <span\n    #content\n    *ngIf=\"!containsOnlyIcon\"\n  >\n    <ng-content></ng-content>\n  </span>\n  <cui-svg\n    *ngIf=\"iconRight\"\n    [icon]=\"iconRight\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n</span>\n<cui-svg\n  *ngIf=\"isLoaderShown\"\n  icon=\"cuiIconLoading\"\n  class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=accent]{background:var(--cui-accent-800);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=accent]:hover{background:var(--cui-accent-900)}}:host[data-appearance=accent]:active{background:var(--cui-accent-900)}:host[data-appearance=accent]:disabled{background:var(--cui-accent-800)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-red-600)}}:host[data-appearance=destructive]:active{background:var(--cui-red-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-blue-800)}}:host[data-appearance=link]:active{color:var(--cui-blue-800)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 8px}:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 7px}:host[data-size=xxs]._only-icon{width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]._only-icon{width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]._only-icon{width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]._only-icon{width:40px}:host._disabled{opacity:.5}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
         }], propDecorators: { shape: [{
                 type: Input
             }, {

package/esm2020/components/editor/editor.component.mjs

@@ -154,13 +154,13 @@ CuiEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 CuiEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiEditorComponent, selector: "cui-editor", inputs: { readonly: "readonly" }, providers: [
         CUI_TEXT_FILED_CONTROLLER_PROVIDER,
         cuiProvide(NG_VALUE_ACCESSOR, CuiEditorComponent, true),
-    ], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, static: true }], ngImport: i0, template: "<div #editor></div>\n", styles: [":host ::ng-deep .ql-editor{padding:12px 11px}:host ::ng-deep .ql-editor.ql-blank:before{left:11px;color:var(--cui-base-400);font-style:normal}:host ::ng-deep .ql-toolbar{border-top-right-radius:8px;border-top-left-radius:8px;background:var(--cui-gray-50)}:host ::ng-deep .ql-toolbar.ql-snow{padding:7px 7px 8px;display:flex;flex-wrap:wrap;gap:8px;border-color:var(--cui-base-200);border-bottom:none;font-family:var(--cui-main-font)}:host ::ng-deep .ql-toolbar.ql-snow button{height:28px;padding:4px;color:var(--cui-base-900)}:host ::ng-deep .ql-toolbar.ql-snow button:active{color:var(--cui-info)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow button:hover{color:var(--cui-info)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:inline-flex;flex-wrap:wrap;gap:2px;margin:0}:host ::ng-deep .ql-toolbar.ql-snow .ql-header{width:80px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label{padding-left:8px;padding-right:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label svg{display:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker{height:28px;color:var(--cui-base-900);font-weight:400}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{display:flex;align-items:center;gap:2px;border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:active{color:var(--cui-info)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--cui-info)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options{padding-right:0;padding-left:0;box-shadow:0 4px 8px #0000001f}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item{padding-right:8px;padding-left:8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:active{background:var(--cui-info-50)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{background:var(--cui-info-50)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item.ql-selected{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-item{width:28px;height:28px;padding:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-label{padding:4px}:host ::ng-deep .ql-container{min-height:110px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;cursor:text;font-family:var(--cui-main-font)}:host ::ng-deep .ql-container.ql-snow{border-color:var(--cui-base-200)}:host ::ng-deep .ql-picker-options{border-radius:4px}:host ::ng-deep .ql-active{color:var(--cui-info)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, static: true }], ngImport: i0, template: "<div #editor></div>\n", styles: [":host ::ng-deep .ql-editor{padding:12px 11px}:host ::ng-deep .ql-editor.ql-blank:before{left:11px;color:var(--cui-base-400);font-style:normal}:host ::ng-deep .ql-toolbar{border-top-right-radius:8px;border-top-left-radius:8px;background:var(--cui-gray-50)}:host ::ng-deep .ql-toolbar.ql-snow{padding:7px 7px 8px;display:flex;flex-wrap:wrap;gap:8px;border-color:var(--cui-base-200);border-bottom:none;font-family:var(--cui-main-font)}:host ::ng-deep .ql-toolbar.ql-snow button{height:28px;padding:4px;color:var(--cui-base-900)}:host ::ng-deep .ql-toolbar.ql-snow button:active{color:var(--cui-info)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow button:hover{color:var(--cui-info)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:inline-flex;flex-wrap:wrap;gap:2px;margin:0}:host ::ng-deep .ql-toolbar.ql-snow .ql-header{width:80px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label{padding-left:8px;padding-right:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label svg{display:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker{height:28px;color:var(--cui-base-900);font-weight:400}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{display:flex;align-items:center;gap:2px;border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:active{color:var(--cui-info)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--cui-info)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options{padding-right:0;padding-left:0;box-shadow:0 4px 8px #0000001f}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item{padding-right:8px;padding-left:8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:active{background:var(--cui-light-blue-50)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{background:var(--cui-light-blue-50)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item.ql-selected{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-item{width:28px;height:28px;padding:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-label{padding:4px}:host ::ng-deep .ql-container{min-height:110px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;cursor:text;font-family:var(--cui-main-font)}:host ::ng-deep .ql-container.ql-snow{border-color:var(--cui-base-200)}:host ::ng-deep .ql-picker-options{border-radius:4px}:host ::ng-deep .ql-active{color:var(--cui-info)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cui-editor', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         CUI_TEXT_FILED_CONTROLLER_PROVIDER,
                         cuiProvide(NG_VALUE_ACCESSOR, CuiEditorComponent, true),
-                    ], template: "<div #editor></div>\n", styles: [":host ::ng-deep .ql-editor{padding:12px 11px}:host ::ng-deep .ql-editor.ql-blank:before{left:11px;color:var(--cui-base-400);font-style:normal}:host ::ng-deep .ql-toolbar{border-top-right-radius:8px;border-top-left-radius:8px;background:var(--cui-gray-50)}:host ::ng-deep .ql-toolbar.ql-snow{padding:7px 7px 8px;display:flex;flex-wrap:wrap;gap:8px;border-color:var(--cui-base-200);border-bottom:none;font-family:var(--cui-main-font)}:host ::ng-deep .ql-toolbar.ql-snow button{height:28px;padding:4px;color:var(--cui-base-900)}:host ::ng-deep .ql-toolbar.ql-snow button:active{color:var(--cui-info)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow button:hover{color:var(--cui-info)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:inline-flex;flex-wrap:wrap;gap:2px;margin:0}:host ::ng-deep .ql-toolbar.ql-snow .ql-header{width:80px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label{padding-left:8px;padding-right:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label svg{display:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker{height:28px;color:var(--cui-base-900);font-weight:400}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{display:flex;align-items:center;gap:2px;border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:active{color:var(--cui-info)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--cui-info)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options{padding-right:0;padding-left:0;box-shadow:0 4px 8px #0000001f}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item{padding-right:8px;padding-left:8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:active{background:var(--cui-info-50)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{background:var(--cui-info-50)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item.ql-selected{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-item{width:28px;height:28px;padding:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-label{padding:4px}:host ::ng-deep .ql-container{min-height:110px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;cursor:text;font-family:var(--cui-main-font)}:host ::ng-deep .ql-container.ql-snow{border-color:var(--cui-base-200)}:host ::ng-deep .ql-picker-options{border-radius:4px}:host ::ng-deep .ql-active{color:var(--cui-info)}\n"] }]
+                    ], template: "<div #editor></div>\n", styles: [":host ::ng-deep .ql-editor{padding:12px 11px}:host ::ng-deep .ql-editor.ql-blank:before{left:11px;color:var(--cui-base-400);font-style:normal}:host ::ng-deep .ql-toolbar{border-top-right-radius:8px;border-top-left-radius:8px;background:var(--cui-gray-50)}:host ::ng-deep .ql-toolbar.ql-snow{padding:7px 7px 8px;display:flex;flex-wrap:wrap;gap:8px;border-color:var(--cui-base-200);border-bottom:none;font-family:var(--cui-main-font)}:host ::ng-deep .ql-toolbar.ql-snow button{height:28px;padding:4px;color:var(--cui-base-900)}:host ::ng-deep .ql-toolbar.ql-snow button:active{color:var(--cui-info)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow button:hover{color:var(--cui-info)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:inline-flex;flex-wrap:wrap;gap:2px;margin:0}:host ::ng-deep .ql-toolbar.ql-snow .ql-header{width:80px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label{padding-left:8px;padding-right:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label svg{display:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker{height:28px;color:var(--cui-base-900);font-weight:400}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{display:flex;align-items:center;gap:2px;border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:active{color:var(--cui-info)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--cui-info)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options{padding-right:0;padding-left:0;box-shadow:0 4px 8px #0000001f}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item{padding-right:8px;padding-left:8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:active{background:var(--cui-light-blue-50)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{background:var(--cui-light-blue-50)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item.ql-selected{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-item{width:28px;height:28px;padding:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-label{padding:4px}:host ::ng-deep .ql-container{min-height:110px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;cursor:text;font-family:var(--cui-main-font)}:host ::ng-deep .ql-container.ql-snow{border-color:var(--cui-base-200)}:host ::ng-deep .ql-picker-options{border-radius:4px}:host ::ng-deep .ql-active{color:var(--cui-info)}\n"] }]
         }], propDecorators: { readonly: [{
                 type: Input
             }], editor: [{

package/esm2020/components/index.mjs

@@ -1,5 +1,6 @@
 export * from './accordion';
 export * from './alert';
+export * from './badge';
 export * from './banner';
 export * from './breadcrumbs';
 export * from './button';
@@ -22,4 +23,4 @@ export * from './select';
 export * from './svg';
 export * from './textarea';
 export * from './toggle';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JlL2NvbXBvbmVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxnQkFBZ0IsQ0FBQztBQUMvQixjQUFjLFlBQVksQ0FBQztBQUMzQixjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsVUFBVSxDQUFDO0FBQ3pCLGNBQWMsVUFBVSxDQUFDO0FBQ3pCLGNBQWMsY0FBYyxDQUFDO0FBQzdCLGNBQWMsUUFBUSxDQUFDO0FBQ3ZCLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsZ0JBQWdCLENBQUM7QUFDL0IsY0FBYyxrQkFBa0IsQ0FBQztBQUNqQyxjQUFjLGNBQWMsQ0FBQztBQUM3QixjQUFjLFNBQVMsQ0FBQztBQUN4QixjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsU0FBUyxDQUFDO0FBQ3hCLGNBQWMsUUFBUSxDQUFDO0FBQ3ZCLGNBQWMsVUFBVSxDQUFDO0FBQ3pCLGNBQWMsT0FBTyxDQUFDO0FBQ3RCLGNBQWMsWUFBWSxDQUFDO0FBQzNCLGNBQWMsVUFBVSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9hY2NvcmRpb24nO1xuZXhwb3J0ICogZnJvbSAnLi9hbGVydCc7XG5leHBvcnQgKiBmcm9tICcuL2Jhbm5lcic7XG5leHBvcnQgKiBmcm9tICcuL2JyZWFkY3J1bWJzJztcbmV4cG9ydCAqIGZyb20gJy4vYnV0dG9uJztcbmV4cG9ydCAqIGZyb20gJy4vYnV0dG9uLWdyb3VwJztcbmV4cG9ydCAqIGZyb20gJy4vY2hlY2tib3gnO1xuZXhwb3J0ICogZnJvbSAnLi9jb250ZXh0LW1lbnUnO1xuZXhwb3J0ICogZnJvbSAnLi9kaWFsb2cnO1xuZXhwb3J0ICogZnJvbSAnLi9lZGl0b3InO1xuZXhwb3J0ICogZnJvbSAnLi9mb3JtLWZpZWxkJztcbmV4cG9ydCAqIGZyb20gJy4vaGludCc7XG5leHBvcnQgKiBmcm9tICcuL2ljb24tYnV0dG9uJztcbmV4cG9ydCAqIGZyb20gJy4vaW5wdXQtbnVtYmVyJztcbmV4cG9ydCAqIGZyb20gJy4vaW5wdXQtcGFzc3dvcmQnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnB1dC10ZXh0JztcbmV4cG9ydCAqIGZyb20gJy4vbGFiZWwnO1xuZXhwb3J0ICogZnJvbSAnLi9ub3RpZmljYXRpb24nO1xuZXhwb3J0ICogZnJvbSAnLi9yYWRpbyc7XG5leHBvcnQgKiBmcm9tICcuL3Jvb3QnO1xuZXhwb3J0ICogZnJvbSAnLi9zZWxlY3QnO1xuZXhwb3J0ICogZnJvbSAnLi9zdmcnO1xuZXhwb3J0ICogZnJvbSAnLi90ZXh0YXJlYSc7XG5leHBvcnQgKiBmcm9tICcuL3RvZ2dsZSc7XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JlL2NvbXBvbmVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxnQkFBZ0IsQ0FBQztBQUMvQixjQUFjLFlBQVksQ0FBQztBQUMzQixjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsVUFBVSxDQUFDO0FBQ3pCLGNBQWMsVUFBVSxDQUFDO0FBQ3pCLGNBQWMsY0FBYyxDQUFDO0FBQzdCLGNBQWMsUUFBUSxDQUFDO0FBQ3ZCLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsZ0JBQWdCLENBQUM7QUFDL0IsY0FBYyxrQkFBa0IsQ0FBQztBQUNqQyxjQUFjLGNBQWMsQ0FBQztBQUM3QixjQUFjLFNBQVMsQ0FBQztBQUN4QixjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsU0FBUyxDQUFDO0FBQ3hCLGNBQWMsUUFBUSxDQUFDO0FBQ3ZCLGNBQWMsVUFBVSxDQUFDO0FBQ3pCLGNBQWMsT0FBTyxDQUFDO0FBQ3RCLGNBQWMsWUFBWSxDQUFDO0FBQzNCLGNBQWMsVUFBVSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9hY2NvcmRpb24nO1xuZXhwb3J0ICogZnJvbSAnLi9hbGVydCc7XG5leHBvcnQgKiBmcm9tICcuL2JhZGdlJztcbmV4cG9ydCAqIGZyb20gJy4vYmFubmVyJztcbmV4cG9ydCAqIGZyb20gJy4vYnJlYWRjcnVtYnMnO1xuZXhwb3J0ICogZnJvbSAnLi9idXR0b24nO1xuZXhwb3J0ICogZnJvbSAnLi9idXR0b24tZ3JvdXAnO1xuZXhwb3J0ICogZnJvbSAnLi9jaGVja2JveCc7XG5leHBvcnQgKiBmcm9tICcuL2NvbnRleHQtbWVudSc7XG5leHBvcnQgKiBmcm9tICcuL2RpYWxvZyc7XG5leHBvcnQgKiBmcm9tICcuL2VkaXRvcic7XG5leHBvcnQgKiBmcm9tICcuL2Zvcm0tZmllbGQnO1xuZXhwb3J0ICogZnJvbSAnLi9oaW50JztcbmV4cG9ydCAqIGZyb20gJy4vaWNvbi1idXR0b24nO1xuZXhwb3J0ICogZnJvbSAnLi9pbnB1dC1udW1iZXInO1xuZXhwb3J0ICogZnJvbSAnLi9pbnB1dC1wYXNzd29yZCc7XG5leHBvcnQgKiBmcm9tICcuL2lucHV0LXRleHQnO1xuZXhwb3J0ICogZnJvbSAnLi9sYWJlbCc7XG5leHBvcnQgKiBmcm9tICcuL25vdGlmaWNhdGlvbic7XG5leHBvcnQgKiBmcm9tICcuL3JhZGlvJztcbmV4cG9ydCAqIGZyb20gJy4vcm9vdCc7XG5leHBvcnQgKiBmcm9tICcuL3NlbGVjdCc7XG5leHBvcnQgKiBmcm9tICcuL3N2Zyc7XG5leHBvcnQgKiBmcm9tICcuL3RleHRhcmVhJztcbmV4cG9ydCAqIGZyb20gJy4vdG9nZ2xlJztcbiJdfQ==

package/fesm2015/cuby-ui-core.mjs

@@ -140,10 +140,10 @@ class CuiButtonComponent {
     }
 }
 CuiButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: { shape: "shape", disabled: "disabled", isLoaderShown: "isLoaderShown", icon: "icon", iconRight: "iconRight", appearance: "appearance", size: "size" }, host: { properties: { "attr.data-shape": "this.shape", "class._disabled": "this.disabled", "class._loading": "this.isLoaderShown", "attr.data-appearance": "this.appearance", "attr.data-size": "this.size", "class._only-icon": "this.containsOnlyIcon", "disabled": "this.isDisabled" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span\n  class=\"c-wrapper\"\n  [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n  <cui-svg\n    *ngIf=\"icon\"\n    [icon]=\"icon\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n  <span\n    #content\n    *ngIf=\"!containsOnlyIcon\"\n  >\n    <ng-content></ng-content>\n  </span>\n  <cui-svg\n    *ngIf=\"iconRight\"\n    [icon]=\"iconRight\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n</span>\n<cui-svg\n  *ngIf=\"isLoaderShown\"\n  icon=\"cuiIconLoading\"\n  class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=accent]{background:var(--cui-accent-800);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=accent]:hover{background:var(--cui-accent-900)}}:host[data-appearance=accent]:active{background:var(--cui-accent-900)}:host[data-appearance=accent]:disabled{background:var(--cui-accent-800)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-error-600)}}:host[data-appearance=destructive]:active{background:var(--cui-error-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-info-900)}}:host[data-appearance=link]:active{color:var(--cui-info-900)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 8px}:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 7px}:host[data-size=xxs]._only-icon{width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]._only-icon{width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]._only-icon{width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]._only-icon{width:40px}:host._disabled{opacity:.5}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CuiButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: { shape: "shape", disabled: "disabled", isLoaderShown: "isLoaderShown", icon: "icon", iconRight: "iconRight", appearance: "appearance", size: "size" }, host: { properties: { "attr.data-shape": "this.shape", "class._disabled": "this.disabled", "class._loading": "this.isLoaderShown", "attr.data-appearance": "this.appearance", "attr.data-size": "this.size", "class._only-icon": "this.containsOnlyIcon", "disabled": "this.isDisabled" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span\n  class=\"c-wrapper\"\n  [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n  <cui-svg\n    *ngIf=\"icon\"\n    [icon]=\"icon\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n  <span\n    #content\n    *ngIf=\"!containsOnlyIcon\"\n  >\n    <ng-content></ng-content>\n  </span>\n  <cui-svg\n    *ngIf=\"iconRight\"\n    [icon]=\"iconRight\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n</span>\n<cui-svg\n  *ngIf=\"isLoaderShown\"\n  icon=\"cuiIconLoading\"\n  class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=accent]{background:var(--cui-accent-800);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=accent]:hover{background:var(--cui-accent-900)}}:host[data-appearance=accent]:active{background:var(--cui-accent-900)}:host[data-appearance=accent]:disabled{background:var(--cui-accent-800)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-red-600)}}:host[data-appearance=destructive]:active{background:var(--cui-red-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-blue-800)}}:host[data-appearance=link]:active{color:var(--cui-blue-800)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 8px}:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 7px}:host[data-size=xxs]._only-icon{width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]._only-icon{width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]._only-icon{width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]._only-icon{width:40px}:host._disabled{opacity:.5}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[cuiButton], a[cuiButton]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"c-wrapper\"\n  [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n  <cui-svg\n    *ngIf=\"icon\"\n    [icon]=\"icon\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n  <span\n    #content\n    *ngIf=\"!containsOnlyIcon\"\n  >\n    <ng-content></ng-content>\n  </span>\n  <cui-svg\n    *ngIf=\"iconRight\"\n    [icon]=\"iconRight\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n</span>\n<cui-svg\n  *ngIf=\"isLoaderShown\"\n  icon=\"cuiIconLoading\"\n  class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=accent]{background:var(--cui-accent-800);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=accent]:hover{background:var(--cui-accent-900)}}:host[data-appearance=accent]:active{background:var(--cui-accent-900)}:host[data-appearance=accent]:disabled{background:var(--cui-accent-800)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-error-600)}}:host[data-appearance=destructive]:active{background:var(--cui-error-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-info-900)}}:host[data-appearance=link]:active{color:var(--cui-info-900)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 8px}:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 7px}:host[data-size=xxs]._only-icon{width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]._only-icon{width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]._only-icon{width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]._only-icon{width:40px}:host._disabled{opacity:.5}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
+            args: [{ selector: 'button[cuiButton], a[cuiButton]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"c-wrapper\"\n  [class.c-wrapper_invisible]=\"isLoaderShown\"\n>\n  <cui-svg\n    *ngIf=\"icon\"\n    [icon]=\"icon\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n  <span\n    #content\n    *ngIf=\"!containsOnlyIcon\"\n  >\n    <ng-content></ng-content>\n  </span>\n  <cui-svg\n    *ngIf=\"iconRight\"\n    [icon]=\"iconRight\"\n    [width]=\"iconDimensions.width\"\n    [height]=\"iconDimensions.height\"\n    [color]=\"iconColor\"\n  ></cui-svg>\n</span>\n<cui-svg\n  *ngIf=\"isLoaderShown\"\n  icon=\"cuiIconLoading\"\n  class=\"c-loader\"\n></cui-svg>\n", styles: [":host{padding:0;border:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=accent]{background:var(--cui-accent-800);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=accent]:hover{background:var(--cui-accent-900)}}:host[data-appearance=accent]:active{background:var(--cui-accent-900)}:host[data-appearance=accent]:disabled{background:var(--cui-accent-800)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-base-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-red-600)}}:host[data-appearance=destructive]:active{background:var(--cui-red-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-blue-800)}}:host[data-appearance=link]:active{color:var(--cui-blue-800)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 8px}:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 7px}:host[data-size=xxs]._only-icon{width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]._only-icon{width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]._only-icon{width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]._only-icon{width:40px}:host._disabled{opacity:.5}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
         }], propDecorators: { shape: [{
                 type: Input
             }, {
@@ -451,6 +451,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
+const CUI_BADGE_DEFAULT_OPTIONS = {
+    status: 'info',
+    size: 'sm',
+    isWithDot: false
+};
+const CUI_BADGE_OPTIONS = cuiCreateToken(CUI_BADGE_DEFAULT_OPTIONS);
+
+class CuiBadgeComponent {
+    constructor() {
+        this.options = inject(CUI_BADGE_OPTIONS);
+        this.status = this.options.status;
+        this.size = this.options.size;
+        this.isWithDot = this.options.isWithDot;
+    }
+}
+CuiBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CuiBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiBadgeComponent, selector: "cui-badge", inputs: { status: "status", size: "size", isWithDot: "isWithDot" }, host: { properties: { "attr.data-status": "this.status", "attr.data-size": "this.size" } }, ngImport: i0, template: "<span\n  *ngIf=\"isWithDot\"\n  class=\"c-dots\"\n></span>\n<ng-content />", styles: [":host{padding-top:2px;padding-bottom:2px;display:inline-flex;align-items:center;gap:4px;border-radius:25px;color:var(--cui-gray-900);font-family:var(--cui-main-font)}:host[data-status=info]{background:var(--cui-light-blue-50)}:host[data-status=info] .c-dots{background:var(--cui-info)}:host[data-status=success]{background:var(--cui-green-50)}:host[data-status=success] .c-dots{background:var(--cui-success)}:host[data-status=alert]{background:var(--cui-yellow-50)}:host[data-status=alert] .c-dots{background:var(--cui-warning)}:host[data-status=error]{background:var(--cui-red-50)}:host[data-status=error] .c-dots{background:var(--cui-danger)}:host[data-size=sm]{font-size:12px;line-height:14px;padding-right:6px;padding-left:6px}:host[data-size=md]{font-size:14px;line-height:20px;padding-right:8px;padding-left:8px}:host-context([cuiTheme=dark])[data-status=info]{color:var(--cui-light-blue-600);background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{color:var(--cui-green-600);background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{color:var(--cui-yellow-400);background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{color:var(--cui-red-400);background:var(--cui-red-900)}.c-dots{width:6px;height:6px;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cui-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  *ngIf=\"isWithDot\"\n  class=\"c-dots\"\n></span>\n<ng-content />", styles: [":host{padding-top:2px;padding-bottom:2px;display:inline-flex;align-items:center;gap:4px;border-radius:25px;color:var(--cui-gray-900);font-family:var(--cui-main-font)}:host[data-status=info]{background:var(--cui-light-blue-50)}:host[data-status=info] .c-dots{background:var(--cui-info)}:host[data-status=success]{background:var(--cui-green-50)}:host[data-status=success] .c-dots{background:var(--cui-success)}:host[data-status=alert]{background:var(--cui-yellow-50)}:host[data-status=alert] .c-dots{background:var(--cui-warning)}:host[data-status=error]{background:var(--cui-red-50)}:host[data-status=error] .c-dots{background:var(--cui-danger)}:host[data-size=sm]{font-size:12px;line-height:14px;padding-right:6px;padding-left:6px}:host[data-size=md]{font-size:14px;line-height:20px;padding-right:8px;padding-left:8px}:host-context([cuiTheme=dark])[data-status=info]{color:var(--cui-light-blue-600);background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{color:var(--cui-green-600);background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{color:var(--cui-yellow-400);background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{color:var(--cui-red-400);background:var(--cui-red-900)}.c-dots{width:6px;height:6px;border-radius:50%}\n"] }]
+        }], propDecorators: { status: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-status']
+            }], size: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-size']
+            }], isWithDot: [{
+                type: Input
+            }] } });
+
+class CuiBadgeModule {
+}
+CuiBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CuiBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeModule, declarations: [CuiBadgeComponent], imports: [CommonModule], exports: [CuiBadgeComponent] });
+CuiBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiBadgeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [CuiBadgeComponent],
+                    exports: [CuiBadgeComponent]
+                }]
+        }] });
+
 const CUI_BANNER_DEFAULT_OPTIONS = {
     status: 'info'
 };
@@ -1178,13 +1226,13 @@ CuiEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 CuiEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiEditorComponent, selector: "cui-editor", inputs: { readonly: "readonly" }, providers: [
         CUI_TEXT_FILED_CONTROLLER_PROVIDER,
         cuiProvide(NG_VALUE_ACCESSOR, CuiEditorComponent, true),
-    ], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, static: true }], ngImport: i0, template: "<div #editor></div>\n", styles: [":host ::ng-deep .ql-editor{padding:12px 11px}:host ::ng-deep .ql-editor.ql-blank:before{left:11px;color:var(--cui-base-400);font-style:normal}:host ::ng-deep .ql-toolbar{border-top-right-radius:8px;border-top-left-radius:8px;background:var(--cui-gray-50)}:host ::ng-deep .ql-toolbar.ql-snow{padding:7px 7px 8px;display:flex;flex-wrap:wrap;gap:8px;border-color:var(--cui-base-200);border-bottom:none;font-family:var(--cui-main-font)}:host ::ng-deep .ql-toolbar.ql-snow button{height:28px;padding:4px;color:var(--cui-base-900)}:host ::ng-deep .ql-toolbar.ql-snow button:active{color:var(--cui-info)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow button:hover{color:var(--cui-info)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:inline-flex;flex-wrap:wrap;gap:2px;margin:0}:host ::ng-deep .ql-toolbar.ql-snow .ql-header{width:80px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label{padding-left:8px;padding-right:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label svg{display:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker{height:28px;color:var(--cui-base-900);font-weight:400}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{display:flex;align-items:center;gap:2px;border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:active{color:var(--cui-info)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--cui-info)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options{padding-right:0;padding-left:0;box-shadow:0 4px 8px #0000001f}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item{padding-right:8px;padding-left:8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:active{background:var(--cui-info-50)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{background:var(--cui-info-50)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item.ql-selected{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-item{width:28px;height:28px;padding:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-label{padding:4px}:host ::ng-deep .ql-container{min-height:110px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;cursor:text;font-family:var(--cui-main-font)}:host ::ng-deep .ql-container.ql-snow{border-color:var(--cui-base-200)}:host ::ng-deep .ql-picker-options{border-radius:4px}:host ::ng-deep .ql-active{color:var(--cui-info)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, static: true }], ngImport: i0, template: "<div #editor></div>\n", styles: [":host ::ng-deep .ql-editor{padding:12px 11px}:host ::ng-deep .ql-editor.ql-blank:before{left:11px;color:var(--cui-base-400);font-style:normal}:host ::ng-deep .ql-toolbar{border-top-right-radius:8px;border-top-left-radius:8px;background:var(--cui-gray-50)}:host ::ng-deep .ql-toolbar.ql-snow{padding:7px 7px 8px;display:flex;flex-wrap:wrap;gap:8px;border-color:var(--cui-base-200);border-bottom:none;font-family:var(--cui-main-font)}:host ::ng-deep .ql-toolbar.ql-snow button{height:28px;padding:4px;color:var(--cui-base-900)}:host ::ng-deep .ql-toolbar.ql-snow button:active{color:var(--cui-info)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow button:hover{color:var(--cui-info)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:inline-flex;flex-wrap:wrap;gap:2px;margin:0}:host ::ng-deep .ql-toolbar.ql-snow .ql-header{width:80px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label{padding-left:8px;padding-right:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label svg{display:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker{height:28px;color:var(--cui-base-900);font-weight:400}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{display:flex;align-items:center;gap:2px;border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:active{color:var(--cui-info)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--cui-info)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options{padding-right:0;padding-left:0;box-shadow:0 4px 8px #0000001f}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item{padding-right:8px;padding-left:8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:active{background:var(--cui-light-blue-50)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{background:var(--cui-light-blue-50)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item.ql-selected{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-item{width:28px;height:28px;padding:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-label{padding:4px}:host ::ng-deep .ql-container{min-height:110px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;cursor:text;font-family:var(--cui-main-font)}:host ::ng-deep .ql-container.ql-snow{border-color:var(--cui-base-200)}:host ::ng-deep .ql-picker-options{border-radius:4px}:host ::ng-deep .ql-active{color:var(--cui-info)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cui-editor', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         CUI_TEXT_FILED_CONTROLLER_PROVIDER,
                         cuiProvide(NG_VALUE_ACCESSOR, CuiEditorComponent, true),
-                    ], template: "<div #editor></div>\n", styles: [":host ::ng-deep .ql-editor{padding:12px 11px}:host ::ng-deep .ql-editor.ql-blank:before{left:11px;color:var(--cui-base-400);font-style:normal}:host ::ng-deep .ql-toolbar{border-top-right-radius:8px;border-top-left-radius:8px;background:var(--cui-gray-50)}:host ::ng-deep .ql-toolbar.ql-snow{padding:7px 7px 8px;display:flex;flex-wrap:wrap;gap:8px;border-color:var(--cui-base-200);border-bottom:none;font-family:var(--cui-main-font)}:host ::ng-deep .ql-toolbar.ql-snow button{height:28px;padding:4px;color:var(--cui-base-900)}:host ::ng-deep .ql-toolbar.ql-snow button:active{color:var(--cui-info)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow button:hover{color:var(--cui-info)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:inline-flex;flex-wrap:wrap;gap:2px;margin:0}:host ::ng-deep .ql-toolbar.ql-snow .ql-header{width:80px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label{padding-left:8px;padding-right:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label svg{display:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker{height:28px;color:var(--cui-base-900);font-weight:400}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{display:flex;align-items:center;gap:2px;border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:active{color:var(--cui-info)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--cui-info)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options{padding-right:0;padding-left:0;box-shadow:0 4px 8px #0000001f}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item{padding-right:8px;padding-left:8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:active{background:var(--cui-info-50)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{background:var(--cui-info-50)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item.ql-selected{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-item{width:28px;height:28px;padding:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-label{padding:4px}:host ::ng-deep .ql-container{min-height:110px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;cursor:text;font-family:var(--cui-main-font)}:host ::ng-deep .ql-container.ql-snow{border-color:var(--cui-base-200)}:host ::ng-deep .ql-picker-options{border-radius:4px}:host ::ng-deep .ql-active{color:var(--cui-info)}\n"] }]
+                    ], template: "<div #editor></div>\n", styles: [":host ::ng-deep .ql-editor{padding:12px 11px}:host ::ng-deep .ql-editor.ql-blank:before{left:11px;color:var(--cui-base-400);font-style:normal}:host ::ng-deep .ql-toolbar{border-top-right-radius:8px;border-top-left-radius:8px;background:var(--cui-gray-50)}:host ::ng-deep .ql-toolbar.ql-snow{padding:7px 7px 8px;display:flex;flex-wrap:wrap;gap:8px;border-color:var(--cui-base-200);border-bottom:none;font-family:var(--cui-main-font)}:host ::ng-deep .ql-toolbar.ql-snow button{height:28px;padding:4px;color:var(--cui-base-900)}:host ::ng-deep .ql-toolbar.ql-snow button:active{color:var(--cui-info)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow button:hover{color:var(--cui-info)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:inline-flex;flex-wrap:wrap;gap:2px;margin:0}:host ::ng-deep .ql-toolbar.ql-snow .ql-header{width:80px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label{padding-left:8px;padding-right:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-header .ql-picker-label svg{display:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker{height:28px;color:var(--cui-base-900);font-weight:400}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{display:flex;align-items:center;gap:2px;border:none}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:active{color:var(--cui-info)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--cui-info)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options{padding-right:0;padding-left:0;box-shadow:0 4px 8px #0000001f}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item{padding-right:8px;padding-left:8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:active{background:var(--cui-light-blue-50)}@media (hover: hover){:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover{background:var(--cui-light-blue-50)}}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options .ql-picker-item.ql-selected{color:unset}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-item{width:28px;height:28px;padding:4px}:host ::ng-deep .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-label{padding:4px}:host ::ng-deep .ql-container{min-height:110px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;cursor:text;font-family:var(--cui-main-font)}:host ::ng-deep .ql-container.ql-snow{border-color:var(--cui-base-200)}:host ::ng-deep .ql-picker-options{border-radius:4px}:host ::ng-deep .ql-active{color:var(--cui-info)}\n"] }]
         }], propDecorators: { readonly: [{
                 type: Input
             }], editor: [{
@@ -2077,5 +2125,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_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, CuiBreadcrumbComponent, CuiBreadcrumbsComponent, CuiBreadcrumbsModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiCheckboxComponent, CuiCheckboxModule, CuiContextMenuComponent, CuiContextMenuModule, CuiDialogComponent, CuiDialogModule, CuiDialogService, CuiDialogsComponent, CuiEditorComponent, CuiEditorModule, 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_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, CuiBadgeComponent, CuiBadgeModule, CuiBannerComponent, CuiBannerModule, CuiBreadcrumbComponent, CuiBreadcrumbsComponent, CuiBreadcrumbsModule, CuiButtonComponent, CuiButtonGroupComponent, CuiButtonGroupModule, CuiButtonModule, CuiCheckboxComponent, CuiCheckboxModule, CuiContextMenuComponent, CuiContextMenuModule, CuiDialogComponent, CuiDialogModule, CuiDialogService, CuiDialogsComponent, CuiEditorComponent, CuiEditorModule, 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