@koobiq/components 16.0.0-beta.1

package/navbar/navbar.component.d.ts

@@ -0,0 +1,58 @@
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, QueryList } from '@angular/core';
+import { FocusKeyManager } from '@koobiq/cdk/a11y';
+import { Observable, Subject } from 'rxjs';
+import { KbqNavbarFocusableItem, KbqNavbarFocusableItemEvent, KbqNavbarItem, KbqNavbarRectangleElement } from './navbar-item.component';
+import * as i0 from "@angular/core";
+export type KbqNavbarContainerPositionType = 'left' | 'right';
+export declare class KbqFocusableComponent implements AfterContentInit, OnDestroy {
+    protected changeDetectorRef: ChangeDetectorRef;
+    focusableItems: QueryList<KbqNavbarFocusableItem>;
+    keyManager: FocusKeyManager<KbqNavbarFocusableItem>;
+    get tabIndex(): any;
+    set tabIndex(value: any);
+    private _tabIndex;
+    get optionFocusChanges(): Observable<KbqNavbarFocusableItemEvent>;
+    get optionBlurChanges(): Observable<KbqNavbarFocusableItemEvent>;
+    protected readonly destroyed: Subject<void>;
+    private optionFocusSubscription;
+    private optionBlurSubscription;
+    constructor(changeDetectorRef: ChangeDetectorRef);
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    focus(): void;
+    blur(): void;
+    protected resetOptions(): void;
+    protected dropSubscriptions(): void;
+    private listenToOptionsFocus;
+    private updateTabIndex;
+    private isValidIndex;
+    private hasFocusedItem;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqFocusableComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFocusableComponent, never, never, { "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, ["focusableItems"], never, false, never>;
+}
+export declare class KbqNavbarContainer {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarContainer, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarContainer, "kbq-navbar-container", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqNavbar extends KbqFocusableComponent implements AfterViewInit, AfterContentInit, OnDestroy {
+    private elementRef;
+    rectangleElements: QueryList<KbqNavbarRectangleElement>;
+    navbarItems: QueryList<KbqNavbarItem>;
+    readonly resizeStream: Subject<Event>;
+    private readonly resizeDebounceInterval;
+    private get width();
+    private get totalItemsWidth();
+    private get collapsableItems();
+    private resizeSubscription;
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef);
+    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    onKeyDown(event: KeyboardEvent): void;
+    updateExpandedStateForItems: () => void;
+    private collapseItems;
+    private expandItems;
+    private setItemsState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbar, "kbq-navbar", never, {}, {}, ["rectangleElements", "navbarItems"], ["[kbq-navbar-container], kbq-navbar-container"], false, never>;
+}

package/navbar/navbar.module.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./navbar.component";
+import * as i2 from "./navbar-item.component";
+import * as i3 from "./vertical-navbar.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/cdk/a11y";
+import * as i6 from "@angular/cdk/platform";
+import * as i7 from "@koobiq/components/icon";
+import * as i8 from "@koobiq/components/tooltip";
+export declare class KbqNavbarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqNavbarModule, [typeof i1.KbqNavbar, typeof i1.KbqNavbarContainer, typeof i2.KbqNavbarTitle, typeof i2.KbqNavbarItem, typeof i2.KbqNavbarBrand, typeof i2.KbqNavbarLogo, typeof i2.KbqNavbarToggle, typeof i3.KbqVerticalNavbar, typeof i2.KbqNavbarDivider, typeof i2.KbqNavbarFocusableItem, typeof i2.KbqNavbarRectangleElement, typeof i2.KbqNavbarSubTitle, typeof i2.KbqNavbarBento], [typeof i4.CommonModule, typeof i5.A11yModule, typeof i6.PlatformModule, typeof i7.KbqIconModule, typeof i8.KbqToolTipModule], [typeof i1.KbqNavbar, typeof i1.KbqNavbarContainer, typeof i2.KbqNavbarTitle, typeof i2.KbqNavbarItem, typeof i2.KbqNavbarBrand, typeof i2.KbqNavbarLogo, typeof i2.KbqNavbarToggle, typeof i3.KbqVerticalNavbar, typeof i2.KbqNavbarDivider, typeof i2.KbqNavbarFocusableItem, typeof i2.KbqNavbarRectangleElement, typeof i2.KbqNavbarSubTitle, typeof i2.KbqNavbarBento]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqNavbarModule>;
+}

package/navbar/navbar.scss

@@ -0,0 +1,20 @@
+.kbq-navbar {
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    position: relative;
+}
+
+.kbq-navbar-container {
+    display: flex;
+
+    flex-shrink: 0;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    position: relative;
+}

package/navbar/public-api.d.ts

@@ -0,0 +1,4 @@
+export * from './navbar.module';
+export * from './navbar.component';
+export * from './navbar-item.component';
+export * from './vertical-navbar.component';

package/navbar/vertical-navbar.animation.d.ts

@@ -0,0 +1,2 @@
+import { AnimationTriggerMetadata } from '@angular/animations';
+export declare function toggleVerticalNavbarAnimation(): AnimationTriggerMetadata;

package/navbar/vertical-navbar.component.d.ts

@@ -0,0 +1,23 @@
+import { AfterContentInit, ChangeDetectorRef, QueryList } from '@angular/core';
+import { Subject } from 'rxjs';
+import { KbqNavbarBento, KbqNavbarItem, KbqNavbarRectangleElement } from './navbar-item.component';
+import { KbqFocusableComponent } from './navbar.component';
+import * as i0 from "@angular/core";
+export declare class KbqVerticalNavbar extends KbqFocusableComponent implements AfterContentInit {
+    rectangleElements: QueryList<KbqNavbarRectangleElement>;
+    items: QueryList<KbqNavbarItem>;
+    bento: KbqNavbarBento;
+    readonly animationDone: Subject<void>;
+    get expanded(): boolean;
+    set expanded(value: boolean);
+    private _expanded;
+    constructor(changeDetectorRef: ChangeDetectorRef);
+    ngAfterContentInit(): void;
+    toggle(): void;
+    onKeyDown(event: KeyboardEvent): void;
+    private updateExpandedStateForItems;
+    private updateTooltipForItems;
+    private setItemsState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqVerticalNavbar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqVerticalNavbar, "kbq-vertical-navbar", ["KbqVerticalNavbar"], { "expanded": { "alias": "expanded"; "required": false; }; }, {}, ["bento", "rectangleElements", "items"], ["[kbq-navbar-container], kbq-navbar-container", "[kbq-navbar-toggle], kbq-navbar-toggle"], false, never>;
+}

package/navbar/vertical-navbar.scss

@@ -0,0 +1,46 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-vertical-navbar {
+    position: relative;
+
+    min-width: var(
+        --kbq-vertical-navbar-size-states-collapsed-width,
+        map.get($tokens, vertical-navbar-size-states-collapsed-width)
+    );
+    height: 100%;
+
+    & .kbq-navbar-container {
+        flex-direction: column;
+        align-items: unset;
+    }
+
+    & .kbq-vertical-navbar__container {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        position: absolute;
+        z-index: 998;
+
+        height: 100%;
+
+        &.kbq-collapsed {
+            width: var(
+                --kbq-vertical-navbar-size-states-collapsed-width,
+                map.get($tokens, vertical-navbar-size-states-collapsed-width)
+            );
+        }
+
+        &.kbq-expanded {
+            width: var(
+                --kbq-vertical-navbar-size-states-expanded-width,
+                map.get($tokens, vertical-navbar-size-states-expanded-width)
+            );
+        }
+    }
+}

package/package.json

@@ -0,0 +1,323 @@
+{
+    "name": "@koobiq/components",
+    "version": "16.0.0-beta.1",
+    "description": "koobiq",
+    "repository": {
+        "type": "git",
+        "url": "https://gitlab.ptsecurity.com/frontend/design-system/mosaic.git"
+    },
+    "keywords": [
+        "angular",
+        "koobiq",
+        "components"
+    ],
+    "license": "MIT",
+    "bugs": {
+        "url": "https://gitlab.ptsecurity.com/frontend/design-system/mosaic/-/issues"
+    },
+    "homepage": "https://gitlab.ptsecurity.com/frontend/design-system/mosaic/-/blob/master/README.md",
+    "peerDependencies": {
+        "@angular/animations": "16.1.5",
+        "@angular/cdk": "16.1.5",
+        "@angular/core": "16.1.5",
+        "@angular/common": "16.1.5",
+        "@angular/forms": "16.1.5",
+        "@koobiq/cdk": "^16.0.0-beta.1",
+        "@koobiq/angular-moment-adapter": "^1.1.0",
+        "@koobiq/angular-luxon-adapter": "^1.1.0",
+        "@mosaic-design/date-formatter": "^1.1.0",
+        "@ptsecurity/mosaic-icons": "^6.6.2",
+        "@koobiq/tokens-builder": "3.0.0-beta.0",
+        "@koobiq/tokens-koobiq": "3.0.0-beta.0"
+    },
+    "dependencies": {
+        "tslib": "^2.4.0"
+    },
+    "ng-update": {
+        "packageGroup": [
+            "@koobiq/components"
+        ]
+    },
+    "exports": {
+        ".": {
+            "sass": "./_index.scss",
+            "types": "./index.d.ts",
+            "esm2022": "./esm2022/koobiq-components.mjs",
+            "esm": "./esm2022/koobiq-components.mjs",
+            "default": "./fesm2022/koobiq-components.mjs"
+        },
+        "./prebuilt-themes/default-theme.css": {
+            "style": "./prebuilt-themes/default-theme.css"
+        },
+        "./prebuilt-themes/dark-theme.css": {
+            "style": "./prebuilt-themes/dark-theme.css"
+        },
+        "./prebuilt-visual/default-visual.css": {
+            "style": "./prebuilt-visual/default-visual.css"
+        },
+        "./package.json": {
+            "default": "./package.json"
+        },
+        "./alert": {
+            "types": "./alert/index.d.ts",
+            "esm2022": "./esm2022/alert/koobiq-components-alert.mjs",
+            "esm": "./esm2022/alert/koobiq-components-alert.mjs",
+            "default": "./fesm2022/koobiq-components-alert.mjs"
+        },
+        "./autocomplete": {
+            "types": "./autocomplete/index.d.ts",
+            "esm2022": "./esm2022/autocomplete/koobiq-components-autocomplete.mjs",
+            "esm": "./esm2022/autocomplete/koobiq-components-autocomplete.mjs",
+            "default": "./fesm2022/koobiq-components-autocomplete.mjs"
+        },
+        "./button": {
+            "types": "./button/index.d.ts",
+            "esm2022": "./esm2022/button/koobiq-components-button.mjs",
+            "esm": "./esm2022/button/koobiq-components-button.mjs",
+            "default": "./fesm2022/koobiq-components-button.mjs"
+        },
+        "./button-toggle": {
+            "types": "./button-toggle/index.d.ts",
+            "esm2022": "./esm2022/button-toggle/koobiq-components-button-toggle.mjs",
+            "esm": "./esm2022/button-toggle/koobiq-components-button-toggle.mjs",
+            "default": "./fesm2022/koobiq-components-button-toggle.mjs"
+        },
+        "./card": {
+            "types": "./card/index.d.ts",
+            "esm2022": "./esm2022/card/koobiq-components-card.mjs",
+            "esm": "./esm2022/card/koobiq-components-card.mjs",
+            "default": "./fesm2022/koobiq-components-card.mjs"
+        },
+        "./checkbox": {
+            "types": "./checkbox/index.d.ts",
+            "esm2022": "./esm2022/checkbox/koobiq-components-checkbox.mjs",
+            "esm": "./esm2022/checkbox/koobiq-components-checkbox.mjs",
+            "default": "./fesm2022/koobiq-components-checkbox.mjs"
+        },
+        "./code-block": {
+            "types": "./code-block/index.d.ts",
+            "esm2022": "./esm2022/code-block/koobiq-components-code-block.mjs",
+            "esm": "./esm2022/code-block/koobiq-components-code-block.mjs",
+            "default": "./fesm2022/koobiq-components-code-block.mjs"
+        },
+        "./core": {
+            "types": "./core/index.d.ts",
+            "esm2022": "./esm2022/core/koobiq-components-core.mjs",
+            "esm": "./esm2022/core/koobiq-components-core.mjs",
+            "default": "./fesm2022/koobiq-components-core.mjs"
+        },
+        "./datepicker": {
+            "types": "./datepicker/index.d.ts",
+            "esm2022": "./esm2022/datepicker/koobiq-components-datepicker.mjs",
+            "esm": "./esm2022/datepicker/koobiq-components-datepicker.mjs",
+            "default": "./fesm2022/koobiq-components-datepicker.mjs"
+        },
+        "./divider": {
+            "types": "./divider/index.d.ts",
+            "esm2022": "./esm2022/divider/koobiq-components-divider.mjs",
+            "esm": "./esm2022/divider/koobiq-components-divider.mjs",
+            "default": "./fesm2022/koobiq-components-divider.mjs"
+        },
+        "./dl": {
+            "types": "./dl/index.d.ts",
+            "esm2022": "./esm2022/dl/koobiq-components-dl.mjs",
+            "esm": "./esm2022/dl/koobiq-components-dl.mjs",
+            "default": "./fesm2022/koobiq-components-dl.mjs"
+        },
+        "./ellipsis-center": {
+            "types": "./ellipsis-center/index.d.ts",
+            "esm2022": "./esm2022/ellipsis-center/koobiq-components-ellipsis-center.mjs",
+            "esm": "./esm2022/ellipsis-center/koobiq-components-ellipsis-center.mjs",
+            "default": "./fesm2022/koobiq-components-ellipsis-center.mjs"
+        },
+        "./dropdown": {
+            "types": "./dropdown/index.d.ts",
+            "esm2022": "./esm2022/dropdown/koobiq-components-dropdown.mjs",
+            "esm": "./esm2022/dropdown/koobiq-components-dropdown.mjs",
+            "default": "./fesm2022/koobiq-components-dropdown.mjs"
+        },
+        "./file-upload": {
+            "types": "./file-upload/index.d.ts",
+            "esm2022": "./esm2022/file-upload/koobiq-components-file-upload.mjs",
+            "esm": "./esm2022/file-upload/koobiq-components-file-upload.mjs",
+            "default": "./fesm2022/koobiq-components-file-upload.mjs"
+        },
+        "./form-field": {
+            "types": "./form-field/index.d.ts",
+            "esm2022": "./esm2022/form-field/koobiq-components-form-field.mjs",
+            "esm": "./esm2022/form-field/koobiq-components-form-field.mjs",
+            "default": "./fesm2022/koobiq-components-form-field.mjs"
+        },
+        "./icon": {
+            "types": "./icon/index.d.ts",
+            "esm2022": "./esm2022/icon/koobiq-components-icon.mjs",
+            "esm": "./esm2022/icon/koobiq-components-icon.mjs",
+            "default": "./fesm2022/koobiq-components-icon.mjs"
+        },
+        "./input": {
+            "types": "./input/index.d.ts",
+            "esm2022": "./esm2022/input/koobiq-components-input.mjs",
+            "esm": "./esm2022/input/koobiq-components-input.mjs",
+            "default": "./fesm2022/koobiq-components-input.mjs"
+        },
+        "./link": {
+            "types": "./link/index.d.ts",
+            "esm2022": "./esm2022/link/koobiq-components-link.mjs",
+            "esm": "./esm2022/link/koobiq-components-link.mjs",
+            "default": "./fesm2022/koobiq-components-link.mjs"
+        },
+        "./list": {
+            "types": "./list/index.d.ts",
+            "esm2022": "./esm2022/list/koobiq-components-list.mjs",
+            "esm": "./esm2022/list/koobiq-components-list.mjs",
+            "default": "./fesm2022/koobiq-components-list.mjs"
+        },
+        "./loader-overlay": {
+            "types": "./loader-overlay/index.d.ts",
+            "esm2022": "./esm2022/loader-overlay/koobiq-components-loader-overlay.mjs",
+            "esm": "./esm2022/loader-overlay/koobiq-components-loader-overlay.mjs",
+            "default": "./fesm2022/koobiq-components-loader-overlay.mjs"
+        },
+        "./markdown": {
+            "types": "./markdown/index.d.ts",
+            "esm2022": "./esm2022/markdown/koobiq-components-markdown.mjs",
+            "esm": "./esm2022/markdown/koobiq-components-markdown.mjs",
+            "default": "./fesm2022/koobiq-components-markdown.mjs"
+        },
+        "./modal": {
+            "types": "./modal/index.d.ts",
+            "esm2022": "./esm2022/modal/koobiq-components-modal.mjs",
+            "esm": "./esm2022/modal/koobiq-components-modal.mjs",
+            "default": "./fesm2022/koobiq-components-modal.mjs"
+        },
+        "./navbar": {
+            "types": "./navbar/index.d.ts",
+            "esm2022": "./esm2022/navbar/koobiq-components-navbar.mjs",
+            "esm": "./esm2022/navbar/koobiq-components-navbar.mjs",
+            "default": "./fesm2022/koobiq-components-navbar.mjs"
+        },
+        "./progress-bar": {
+            "types": "./progress-bar/index.d.ts",
+            "esm2022": "./esm2022/progress-bar/koobiq-components-progress-bar.mjs",
+            "esm": "./esm2022/progress-bar/koobiq-components-progress-bar.mjs",
+            "default": "./fesm2022/koobiq-components-progress-bar.mjs"
+        },
+        "./popover": {
+            "types": "./popover/index.d.ts",
+            "esm2022": "./esm2022/popover/koobiq-components-popover.mjs",
+            "esm": "./esm2022/popover/koobiq-components-popover.mjs",
+            "default": "./fesm2022/koobiq-components-popover.mjs"
+        },
+        "./progress-spinner": {
+            "types": "./progress-spinner/index.d.ts",
+            "esm2022": "./esm2022/progress-spinner/koobiq-components-progress-spinner.mjs",
+            "esm": "./esm2022/progress-spinner/koobiq-components-progress-spinner.mjs",
+            "default": "./fesm2022/koobiq-components-progress-spinner.mjs"
+        },
+        "./radio": {
+            "types": "./radio/index.d.ts",
+            "esm2022": "./esm2022/radio/koobiq-components-radio.mjs",
+            "esm": "./esm2022/radio/koobiq-components-radio.mjs",
+            "default": "./fesm2022/koobiq-components-radio.mjs"
+        },
+        "./sidepanel": {
+            "types": "./sidepanel/index.d.ts",
+            "esm2022": "./esm2022/sidepanel/koobiq-components-sidepanel.mjs",
+            "esm": "./esm2022/sidepanel/koobiq-components-sidepanel.mjs",
+            "default": "./fesm2022/koobiq-components-sidepanel.mjs"
+        },
+        "./splitter": {
+            "types": "./splitter/index.d.ts",
+            "esm2022": "./esm2022/splitter/koobiq-components-splitter.mjs",
+            "esm": "./esm2022/splitter/koobiq-components-splitter.mjs",
+            "default": "./fesm2022/koobiq-components-splitter.mjs"
+        },
+        "./select": {
+            "types": "./select/index.d.ts",
+            "esm2022": "./esm2022/select/koobiq-components-select.mjs",
+            "esm": "./esm2022/select/koobiq-components-select.mjs",
+            "default": "./fesm2022/koobiq-components-select.mjs"
+        },
+        "./sidebar": {
+            "types": "./sidebar/index.d.ts",
+            "esm2022": "./esm2022/sidebar/koobiq-components-sidebar.mjs",
+            "esm": "./esm2022/sidebar/koobiq-components-sidebar.mjs",
+            "default": "./fesm2022/koobiq-components-sidebar.mjs"
+        },
+        "./table": {
+            "types": "./table/index.d.ts",
+            "esm2022": "./esm2022/table/koobiq-components-table.mjs",
+            "esm": "./esm2022/table/koobiq-components-table.mjs",
+            "default": "./fesm2022/koobiq-components-table.mjs"
+        },
+        "./tabs": {
+            "types": "./tabs/index.d.ts",
+            "esm2022": "./esm2022/tabs/koobiq-components-tabs.mjs",
+            "esm": "./esm2022/tabs/koobiq-components-tabs.mjs",
+            "default": "./fesm2022/koobiq-components-tabs.mjs"
+        },
+        "./tags": {
+            "types": "./tags/index.d.ts",
+            "esm2022": "./esm2022/tags/koobiq-components-tags.mjs",
+            "esm": "./esm2022/tags/koobiq-components-tags.mjs",
+            "default": "./fesm2022/koobiq-components-tags.mjs"
+        },
+        "./textarea": {
+            "types": "./textarea/index.d.ts",
+            "esm2022": "./esm2022/textarea/koobiq-components-textarea.mjs",
+            "esm": "./esm2022/textarea/koobiq-components-textarea.mjs",
+            "default": "./fesm2022/koobiq-components-textarea.mjs"
+        },
+        "./timepicker": {
+            "types": "./timepicker/index.d.ts",
+            "esm2022": "./esm2022/timepicker/koobiq-components-timepicker.mjs",
+            "esm": "./esm2022/timepicker/koobiq-components-timepicker.mjs",
+            "default": "./fesm2022/koobiq-components-timepicker.mjs"
+        },
+        "./timezone": {
+            "types": "./timezone/index.d.ts",
+            "esm2022": "./esm2022/timezone/koobiq-components-timezone.mjs",
+            "esm": "./esm2022/timezone/koobiq-components-timezone.mjs",
+            "default": "./fesm2022/koobiq-components-timezone.mjs"
+        },
+        "./title": {
+            "types": "./title/index.d.ts",
+            "esm2022": "./esm2022/title/koobiq-components-title.mjs",
+            "esm": "./esm2022/title/koobiq-components-title.mjs",
+            "default": "./fesm2022/koobiq-components-title.mjs"
+        },
+        "./toast": {
+            "types": "./toast/index.d.ts",
+            "esm2022": "./esm2022/toast/koobiq-components-toast.mjs",
+            "esm": "./esm2022/toast/koobiq-components-toast.mjs",
+            "default": "./fesm2022/koobiq-components-toast.mjs"
+        },
+        "./toggle": {
+            "types": "./toggle/index.d.ts",
+            "esm2022": "./esm2022/toggle/koobiq-components-toggle.mjs",
+            "esm": "./esm2022/toggle/koobiq-components-toggle.mjs",
+            "default": "./fesm2022/koobiq-components-toggle.mjs"
+        },
+        "./tooltip": {
+            "types": "./tooltip/index.d.ts",
+            "esm2022": "./esm2022/tooltip/koobiq-components-tooltip.mjs",
+            "esm": "./esm2022/tooltip/koobiq-components-tooltip.mjs",
+            "default": "./fesm2022/koobiq-components-tooltip.mjs"
+        },
+        "./tree": {
+            "types": "./tree/index.d.ts",
+            "esm2022": "./esm2022/tree/koobiq-components-tree.mjs",
+            "esm": "./esm2022/tree/koobiq-components-tree.mjs",
+            "default": "./fesm2022/koobiq-components-tree.mjs"
+        },
+        "./tree-select": {
+            "types": "./tree-select/index.d.ts",
+            "esm2022": "./esm2022/tree-select/koobiq-components-tree-select.mjs",
+            "esm": "./esm2022/tree-select/koobiq-components-tree-select.mjs",
+            "default": "./fesm2022/koobiq-components-tree-select.mjs"
+        }
+    },
+    "module": "fesm2022/koobiq-components.mjs",
+    "typings": "index.d.ts",
+    "sideEffects": false
+}

package/popover/README.md

@@ -0,0 +1,32 @@
+# Popover component
+
+## API
+
+| Property               | Description                                                                                                                                                                              | Type                  | Default |
+|------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------|---------|
+| mcPlacement            | Место для показа относительно элемента, к которому он привязан. Возможные значения: top, bottom, left, right                                                                             | string                | bottom  |
+| mcTrigger              | Триггер для показа Возможные значения: hover, manual, click, focus                                                                                                                       | string                | hover   |
+| mcVisible              | Ручное управление показом, используется только при mcTrigger="manual"                                                                                                             | boolean               | false   |
+| mcPopoverHeader        | Содержимое шапки Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.      | string | ng-template  | –       |
+| mcPopoverContent       | Содержимое компонента Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости. | string | ng-template  | –       |
+| mcPopoverFooter        | Содержимое подвала Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.    | string | ng-template  | –       |
+| mcPopoverDisabled      | Флаг для запрета показа                                                                                                                                                                  | boolean               | false   |
+| mcPopoverClass         | Добавление своих классов                                                                                                                                                                 | string | string[]     | –       |
+| mcVisibleChange        | Callback на изменение видимости компонента                                                                                                                                               | EventEmitter<boolean> | –       |
+
+## Example
+
+```html
+<ng-template #customContent>
+    Э́йяфьядлайё̀кюдль — шестой по величине ледник Исландии. Расположен на юге Исландии в 125 км к востоку от Рейкьявика. Под этим ледником находится одноимённый вулкан конической формы.
+</ng-template>
+ 
+<button
+    mcPopover
+    [mcTrigger]="'hover'"
+    [mcPlacement]="'top'"
+    [mcPopoverHeader]="'Это header'"
+    [mcPopoverContent]="customContent">
+    Найти Эйяфьядлайёкюдль
+</button>
+```

package/popover/_popover-theme.scss

@@ -0,0 +1,111 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin kbq-popover-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    $popover: map.get(map.get($theme, components), popover);
+
+    $header: map.get($popover, header);
+    $footer: map.get($popover, footer);
+
+    .kbq-popover {
+        border-color: map.get($popover, border);
+        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    }
+
+    .kbq-popover__header {
+        color: map.get($header, text);
+        background: map.get($header, background);
+        border-bottom-color: map.get($header, border);
+    }
+
+    .kbq-popover__container,
+    .kbq-popover__content {
+        color: map.get($popover, text);
+        background-color: map.get($popover, background);
+    }
+
+    .kbq-popover__footer {
+        border-top-color: map.get($footer, border);
+        background-color: map.get($footer, background);
+    }
+
+    .kbq-popover .kbq-popover__arrow {
+        border-color: map.get($popover, border);
+    }
+
+    .kbq-popover_placement-top .kbq-popover__arrow,
+    .kbq-popover_placement-top-left .kbq-popover__arrow,
+    .kbq-popover_placement-top-right .kbq-popover__arrow {
+        background-color: map.get($popover, background);
+        border-top-color: map.get($popover, border);
+        border-left-color: map.get($popover, border);
+    }
+
+    .kbq-popover_placement-top .kbq-popover__arrow.kbq-popover__arrow_with-footer,
+    .kbq-popover_placement-top-left .kbq-popover__arrow.kbq-popover__arrow_with-footer,
+    .kbq-popover_placement-top-right .kbq-popover__arrow.kbq-popover__arrow_with-footer {
+        background-color: map.get($footer, background);
+        border-top-color: map.get($footer, border);
+        border-left-color: map.get($footer, border);
+    }
+
+    .kbq-popover_placement-right .kbq-popover__arrow,
+    .kbq-popover_placement-right-top .kbq-popover__arrow,
+    .kbq-popover_placement-right-bottom .kbq-popover__arrow {
+        background-color: map.get($popover, background);
+        border-top-color: map.get($popover, background);
+        border-right-color: map.get($popover, background);
+    }
+
+    .kbq-popover_placement-right-bottom .kbq-popover__arrow.kbq-popover__arrow_with-footer {
+        background-color: map.get($footer, background);
+        border-top-color: map.get($footer, border);
+        border-right-color: map.get($footer, border);
+    }
+
+    .kbq-popover_placement-left .kbq-popover__arrow,
+    .kbq-popover_placement-left-top .kbq-popover__arrow,
+    .kbq-popover_placement-left-bottom .kbq-popover__arrow {
+        background-color: map.get($popover, background);
+        border-bottom-color: map.get($popover, background);
+        border-left-color: map.get($popover, background);
+    }
+
+    .kbq-popover_placement-left-bottom .kbq-popover__arrow.kbq-popover__arrow_with-footer {
+        background-color: map.get($footer, background);
+        border-bottom-color: map.get($footer, border);
+        border-left-color: map.get($footer, border);
+    }
+
+    .kbq-popover_placement-bottom .kbq-popover__arrow,
+    .kbq-popover_placement-bottom-left .kbq-popover__arrow,
+    .kbq-popover_placement-bottom-right .kbq-popover__arrow,
+    .kbq-popover_placement-bottom .kbq-popover__arrow.kbq-popover__arrow_with-footer,
+    .kbq-popover_placement-bottom-left .kbq-popover__arrow.kbq-popover__arrow_with-footer,
+    .kbq-popover_placement-bottom-right .kbq-popover__arrow.kbq-popover__arrow_with-footer {
+        background-color: map.get($popover, background);
+        border-right-color: map.get($popover, background);
+        border-bottom-color: map.get($popover, background);
+    }
+}
+
+@mixin kbq-popover-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-popover__header {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, popover-header-font-default));
+    }
+
+    .kbq-popover__content {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, popover-font-default));
+    }
+
+    .kbq-popover__footer {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, popover-footer-font-default));
+    }
+}

package/popover/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/popover/popover-animations.d.ts

@@ -0,0 +1,4 @@
+import { AnimationTriggerMetadata } from '@angular/animations';
+export declare const mcPopoverAnimations: {
+    readonly popoverState: AnimationTriggerMetadata;
+};