@indigina/ui-kit 1.1.42 → 1.1.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu.component.mjs +3 -3
- package/esm2022/lib/components/kit-profile-menu/kit-profile-menu.component.mjs +5 -4
- package/esm2022/lib/components/kit-profile-menu/kit-profile-menu.model.mjs +1 -1
- package/esm2022/lib/components/kit-tabs/kit-tab/kit-tab.component.mjs +2 -2
- package/fesm2022/indigina-ui-kit.mjs +7 -6
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/lib/components/kit-profile-menu/kit-profile-menu.component.d.ts +2 -1
- package/lib/components/kit-profile-menu/kit-profile-menu.model.d.ts +2 -1
- package/package.json +1 -1
|
@@ -61,7 +61,7 @@ export class KitNavigationMenuComponent extends KitNavigationMenuBaseComponent {
|
|
|
61
61
|
this.changeDetectorRef.markForCheck();
|
|
62
62
|
}
|
|
63
63
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuComponent, deps: [{ token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
64
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate", multiple: "multiple" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate
|
|
64
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate", multiple: "multiple" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate || collapsed\"\n [item]=\"item\"\n [collapsed]=\"collapsed\"\n ></kit-navigation-menu-submenu>\n }\n </div>\n } @else {\n <div class=\"nav-item\">\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"item?.link\"\n [title]=\"item.title\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n </a>\n </div>\n }\n }\n</div>\n", styles: [".kit-navigation-menu{display:flex;flex-direction:column;gap:20px;width:100%;box-sizing:border-box;transition:width .2s}.kit-navigation-menu.collapsed{width:84px}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-title{width:0;opacity:0}.kit-navigation-menu.collapsed .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu .nav-item{position:relative}.kit-navigation-menu .nav-item.expanded .nav-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu .nav-link{display:flex;align-items:center;padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);font-size:14px;font-weight:400;border-radius:8px;text-decoration:none;cursor:pointer;overflow:hidden;box-sizing:border-box}.kit-navigation-menu .nav-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.fill{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.stroke,.kit-navigation-menu .nav-link:hover .nav-link-toggle{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-navigation-menu .nav-link-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-title{transition:opacity .2s}.kit-navigation-menu .nav-link-toggle{width:16px;height:16px;stroke:var(--ui-kit-color-main);fill:none;flex-shrink:0}.kit-navigation-menu .nav-link.active{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link.active .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link.active .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: ["item"] }], animations: [
|
|
65
65
|
expandCollapseAnimation,
|
|
66
66
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
67
67
|
}
|
|
@@ -69,7 +69,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
69
69
|
type: Component,
|
|
70
70
|
args: [{ selector: 'kit-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
71
71
|
expandCollapseAnimation,
|
|
72
|
-
], template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate
|
|
72
|
+
], template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate || collapsed\"\n [item]=\"item\"\n [collapsed]=\"collapsed\"\n ></kit-navigation-menu-submenu>\n }\n </div>\n } @else {\n <div class=\"nav-item\">\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"item?.link\"\n [title]=\"item.title\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n </a>\n </div>\n }\n }\n</div>\n", styles: [".kit-navigation-menu{display:flex;flex-direction:column;gap:20px;width:100%;box-sizing:border-box;transition:width .2s}.kit-navigation-menu.collapsed{width:84px}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-title{width:0;opacity:0}.kit-navigation-menu.collapsed .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu .nav-item{position:relative}.kit-navigation-menu .nav-item.expanded .nav-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu .nav-link{display:flex;align-items:center;padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);font-size:14px;font-weight:400;border-radius:8px;text-decoration:none;cursor:pointer;overflow:hidden;box-sizing:border-box}.kit-navigation-menu .nav-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.fill{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.stroke,.kit-navigation-menu .nav-link:hover .nav-link-toggle{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-navigation-menu .nav-link-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-title{transition:opacity .2s}.kit-navigation-menu .nav-link-toggle{width:16px;height:16px;stroke:var(--ui-kit-color-main);fill:none;flex-shrink:0}.kit-navigation-menu .nav-link.active{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link.active .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link.active .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"] }]
|
|
73
73
|
}], ctorParameters: () => [{ type: i1.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { items: [{
|
|
74
74
|
type: Input
|
|
75
75
|
}], animate: [{
|
|
@@ -77,4 +77,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
77
77
|
}], multiple: [{
|
|
78
78
|
type: Input
|
|
79
79
|
}] } });
|
|
80
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
80
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LW5hdmlnYXRpb24tbWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1uYXZpZ2F0aW9uLW1lbnUva2l0LW5hdmlnYXRpb24tbWVudS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1uYXZpZ2F0aW9uLW1lbnUva2l0LW5hdmlnYXRpb24tbWVudS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQXFCLFNBQVMsRUFBRSxLQUFLLEVBQW9DLE1BQU0sZUFBZSxDQUFDO0FBRS9ILE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ3JFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUsYUFBYSxFQUFVLE1BQU0saUJBQWlCLENBQUM7QUFDeEQsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUM5QixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNoRSxPQUFPLEVBQUUsOEJBQThCLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQzs7Ozs7O0FBV3RGLE1BQU0sT0FBTywwQkFBMkIsU0FBUSw4QkFBOEI7SUFrQjVFLFlBQ1UsTUFBYyxFQUNkLGlCQUFvQztRQUU1QyxLQUFLLEVBQUUsQ0FBQztRQUhBLFdBQU0sR0FBTixNQUFNLENBQVE7UUFDZCxzQkFBaUIsR0FBakIsaUJBQWlCLENBQW1CO1FBbkI5Qzs7V0FFRztRQUNNLFVBQUssR0FBNEIsRUFBRSxDQUFDO1FBRTdDOztXQUVHO1FBQ00sWUFBTyxHQUFZLElBQUksQ0FBQztRQUVqQzs7V0FFRztRQUNNLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFFMUIsbUJBQWMsR0FBMEIsY0FBYyxDQUFDO1FBTzlELElBQUksQ0FBQyw4QkFBOEIsRUFBRSxDQUFDO0lBQ3hDLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUNyRCxDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUU7WUFDbkMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDOUI7SUFDSCxDQUFDO0lBRVEsV0FBVyxDQUFDLElBQTJCO1FBQzlDLElBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNuQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUM5QjtRQUVELEtBQUssQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDMUIsQ0FBQztJQUVPLDhCQUE4QjtRQUNwQyxJQUFJLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQ3JCLE1BQU0sQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLEtBQUssWUFBWSxhQUFhLENBQUMsRUFDL0Msa0JBQWtCLEVBQUUsQ0FDckIsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDO0lBQ3hFLENBQUM7SUFFTyxnQkFBZ0IsQ0FBQyxLQUE4QixFQUFFLEdBQVc7UUFDbEUsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2xCLE9BQU87U0FDUjtRQUVELEtBQUssQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUU7WUFDbkIsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxJQUFJLEdBQUcsQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7WUFDM0QsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFO2dCQUNkLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLEdBQUcsQ0FBQyxDQUFDO2dCQUN2QyxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDO2FBQzFEO1FBQ0gsQ0FBQyxDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsaUJBQWlCLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDeEMsQ0FBQzs4R0FoRVUsMEJBQTBCO2tHQUExQiwwQkFBMEIsNktDbEJ2QyxpNERBa0RBLHdrR0RwQ2M7WUFDVix1QkFBdUI7U0FDeEI7OzJGQUVVLDBCQUEwQjtrQkFUdEMsU0FBUzsrQkFDRSxxQkFBcUIsbUJBR2QsdUJBQXVCLENBQUMsTUFBTSxjQUNuQzt3QkFDVix1QkFBdUI7cUJBQ3hCOzJHQU1RLEtBQUs7c0JBQWIsS0FBSztnQkFLRyxPQUFPO3NCQUFmLEtBQUs7Z0JBS0csUUFBUTtzQkFBaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50LCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEtpdE5hdmlnYXRpb25NZW51SXRlbSB9IGZyb20gJy4va2l0LW5hdmlnYXRpb24tbWVudS5tb2RlbCc7XG5pbXBvcnQgeyBleHBhbmRDb2xsYXBzZUFuaW1hdGlvbiB9IGZyb20gJy4va2l0LW5hdmlnYXRpb24tbWVudS51dGlsJztcbmltcG9ydCB7IEtpdFN2Z0ljb25UeXBlIH0gZnJvbSAnLi4va2l0LXN2Zy1pY29uL2tpdC1zdmctaWNvbi5jb25zdCc7XG5pbXBvcnQgeyBOYXZpZ2F0aW9uRW5kLCBSb3V0ZXIgfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xuaW1wb3J0IHsgZmlsdGVyIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyB0YWtlVW50aWxEZXN0cm95ZWQgfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQgeyBLaXROYXZpZ2F0aW9uTWVudUJhc2VDb21wb25lbnQgfSBmcm9tICcuL2tpdC1uYXZpZ2F0aW9uLW1lbnUtYmFzZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdraXQtbmF2aWdhdGlvbi1tZW51JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2tpdC1uYXZpZ2F0aW9uLW1lbnUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4va2l0LW5hdmlnYXRpb24tbWVudS5jb21wb25lbnQuc2NzcycsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBhbmltYXRpb25zOiBbXG4gICAgZXhwYW5kQ29sbGFwc2VBbmltYXRpb24sXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIEtpdE5hdmlnYXRpb25NZW51Q29tcG9uZW50IGV4dGVuZHMgS2l0TmF2aWdhdGlvbk1lbnVCYXNlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xuICAvKipcbiAgICogQW4gaXRlbXMgbGlzdCB3aGljaCBpcyBnb2luZyB0byBiZSByZW5kZXJlZCBhcyBtZW51IGl0ZW1zXG4gICAqL1xuICBASW5wdXQoKSBpdGVtczogS2l0TmF2aWdhdGlvbk1lbnVJdGVtW10gPSBbXTtcblxuICAvKipcbiAgICogRGVmaW5lcyB3aGV0aGVyIHRoZSBjb21wb25lbnQgd2lsbCBoYXZlIGFuIGFuaW1hdGlvbiB3aGVuIGNvbGxhcHNpbmcvZXhwYW5kaW5nIHRoZSBtZW51XG4gICAqL1xuICBASW5wdXQoKSBhbmltYXRlOiBib29sZWFuID0gdHJ1ZTtcblxuICAvKipcbiAgICogRGVmaW5lcyB3aGV0aGVyIHRoZSBjb21wb25lbnQgY2FuIGhhdmUgbW9yZSB0aGFuIG9uZSBpdGVtIGV4cGFuZGVkIGF0IHRoZSBzYW1lIHRpbWVcbiAgICovXG4gIEBJbnB1dCgpIG11bHRpcGxlOiBib29sZWFuID0gZmFsc2U7XG5cbiAgcmVhZG9ubHkgS2l0U3ZnSWNvblR5cGU6IHR5cGVvZiBLaXRTdmdJY29uVHlwZSA9IEtpdFN2Z0ljb25UeXBlO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgcm91dGVyOiBSb3V0ZXIsXG4gICAgcHJpdmF0ZSBjaGFuZ2VEZXRlY3RvclJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy5zZXRFeHBhbmRlZFN0YXRlT25Sb3V0ZXJDaGFuZ2UoKTtcbiAgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuc2V0RXhwYW5kZWRTdGF0ZSh0aGlzLml0ZW1zLCB0aGlzLnJvdXRlci51cmwpO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzLmNvbGxhcHNlZD8uY3VycmVudFZhbHVlKSB7XG4gICAgICB0aGlzLmNvbGxhcHNlQWxsKHRoaXMuaXRlbXMpO1xuICAgIH1cbiAgfVxuXG4gIG92ZXJyaWRlIGhhbmRsZUNsaWNrKGl0ZW06IEtpdE5hdmlnYXRpb25NZW51SXRlbSk6IHZvaWQge1xuICAgIGlmKCF0aGlzLm11bHRpcGxlICYmICFpdGVtLmV4cGFuZGVkKSB7XG4gICAgICB0aGlzLmNvbGxhcHNlQWxsKHRoaXMuaXRlbXMpO1xuICAgIH1cblxuICAgIHN1cGVyLmhhbmRsZUNsaWNrKGl0ZW0pO1xuICB9XG5cbiAgcHJpdmF0ZSBzZXRFeHBhbmRlZFN0YXRlT25Sb3V0ZXJDaGFuZ2UoKTogdm9pZCB7XG4gICAgdGhpcy5yb3V0ZXIuZXZlbnRzLnBpcGUoXG4gICAgICBmaWx0ZXIoZXZlbnQgPT4gZXZlbnQgaW5zdGFuY2VvZiBOYXZpZ2F0aW9uRW5kKSxcbiAgICAgIHRha2VVbnRpbERlc3Ryb3llZCgpLFxuICAgICkuc3Vic2NyaWJlKCgpID0+IHRoaXMuc2V0RXhwYW5kZWRTdGF0ZSh0aGlzLml0ZW1zLCB0aGlzLnJvdXRlci51cmwpKTtcbiAgfVxuXG4gIHByaXZhdGUgc2V0RXhwYW5kZWRTdGF0ZShpdGVtczogS2l0TmF2aWdhdGlvbk1lbnVJdGVtW10sIHVybDogc3RyaW5nKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuY29sbGFwc2VkKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgaXRlbXMuZm9yRWFjaChpdGVtID0+IHtcbiAgICAgIGl0ZW0uZXhwYW5kZWQgPSAhIShpdGVtLmxpbmsgJiYgdXJsLnN0YXJ0c1dpdGgoaXRlbS5saW5rKSk7XG4gICAgICBpZiAoaXRlbS5pdGVtcykge1xuICAgICAgICB0aGlzLnNldEV4cGFuZGVkU3RhdGUoaXRlbS5pdGVtcywgdXJsKTtcbiAgICAgICAgaXRlbS5leHBhbmRlZCA9IGl0ZW0uaXRlbXMuc29tZShjaGlsZCA9PiBjaGlsZC5leHBhbmRlZCk7XG4gICAgICB9XG4gICAgfSk7XG4gICAgdGhpcy5jaGFuZ2VEZXRlY3RvclJlZi5tYXJrRm9yQ2hlY2soKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImtpdC1uYXZpZ2F0aW9uLW1lbnVcIlxuICAgICBbY2xhc3MuY29sbGFwc2VkXT1cImNvbGxhcHNlZFwiPlxuICBAZm9yIChpdGVtIG9mIGl0ZW1zOyB0cmFjayBpdGVtKSB7XG4gICAgQGlmIChpdGVtLml0ZW1zPy5sZW5ndGgpIHtcbiAgICAgIDxkaXYgY2xhc3M9XCJuYXYtaXRlbVwiXG4gICAgICAgICAgIFtjbGFzcy5leHBhbmRlZF09XCJpdGVtLmV4cGFuZGVkXCJcbiAgICAgICAgICAgKG1vdXNlZW50ZXIpPVwiaGFuZGxlSG92ZXIoaXRlbSwgdHJ1ZSlcIlxuICAgICAgICAgICAobW91c2VsZWF2ZSk9XCJoYW5kbGVIb3ZlcihpdGVtLCBmYWxzZSlcIj5cbiAgICAgICAgPGEgY2xhc3M9XCJuYXYtbGlua1wiXG4gICAgICAgICAgIChtb3VzZWxlYXZlKT1cIiRldmVudC5zdG9wUHJvcGFnYXRpb24oKVwiXG4gICAgICAgICAgIChjbGljayk9XCJoYW5kbGVDbGljayhpdGVtKVwiPlxuICAgICAgICAgIEBpZiAoaXRlbS5pY29uKSB7XG4gICAgICAgICAgICA8a2l0LXN2Zy1pY29uIGNsYXNzPVwibmF2LWxpbmstaWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uXT1cIml0ZW0uaWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgIFtuZ0NsYXNzXT1cIml0ZW0/Lmljb25UeXBlID8/IEtpdFN2Z0ljb25UeXBlLkZJTExcIlxuICAgICAgICAgICAgPjwva2l0LXN2Zy1pY29uPlxuICAgICAgICAgIH1cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cIm5hdi1saW5rLXRpdGxlXCI+e3sgaXRlbS50aXRsZSB9fTwvc3Bhbj5cbiAgICAgICAgICA8a2l0LXN2Zy1pY29uIGNsYXNzPVwibmF2LWxpbmstdG9nZ2xlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uXT1cIktpdFN2Z0ljb24uQ0hFVlJPTl9ET1dOXCJcbiAgICAgICAgICA+PC9raXQtc3ZnLWljb24+XG4gICAgICAgIDwvYT5cblxuICAgICAgICBAaWYgKGl0ZW0uZXhwYW5kZWQpIHtcbiAgICAgICAgICA8a2l0LW5hdmlnYXRpb24tbWVudS1zdWJtZW51IGNsYXNzPVwiZGlzcGxheS1ibG9ja1wiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbQGV4cGFuZENvbGxhcHNlQW5pbWF0aW9uXVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW0AuZGlzYWJsZWRdPVwiIWFuaW1hdGUgfHwgY29sbGFwc2VkXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtpdGVtXT1cIml0ZW1cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW2NvbGxhcHNlZF09XCJjb2xsYXBzZWRcIlxuICAgICAgICAgID48L2tpdC1uYXZpZ2F0aW9uLW1lbnUtc3VibWVudT5cbiAgICAgICAgfVxuICAgICAgPC9kaXY+XG4gICAgfSBAZWxzZSB7XG4gICAgICA8ZGl2IGNsYXNzPVwibmF2LWl0ZW1cIj5cbiAgICAgICAgPGEgY2xhc3M9XCJuYXYtbGlua1wiXG4gICAgICAgICAgIHJvdXRlckxpbmtBY3RpdmU9XCJhY3RpdmVcIlxuICAgICAgICAgICBbcm91dGVyTGlua109XCJpdGVtPy5saW5rXCJcbiAgICAgICAgICAgW3RpdGxlXT1cIml0ZW0udGl0bGVcIj5cbiAgICAgICAgICBAaWYgKGl0ZW0uaWNvbikge1xuICAgICAgICAgICAgPGtpdC1zdmctaWNvbiBjbGFzcz1cIm5hdi1saW5rLWljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICBbaWNvbl09XCJpdGVtLmljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICBbbmdDbGFzc109XCJpdGVtPy5pY29uVHlwZSA/PyBLaXRTdmdJY29uVHlwZS5GSUxMXCJcbiAgICAgICAgICAgID48L2tpdC1zdmctaWNvbj5cbiAgICAgICAgICB9XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJuYXYtbGluay10aXRsZVwiPnt7IGl0ZW0udGl0bGUgfX08L3NwYW4+XG4gICAgICAgIDwvYT5cbiAgICAgIDwvZGl2PlxuICAgIH1cbiAgfVxuPC9kaXY+XG4iXX0=
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component, Input, ViewChild } from '@angular/core';
|
|
2
2
|
import { KitAvatarSize } from '../kit-avatar/kit-avatar.const';
|
|
3
|
-
import { KitSvgIcon } from '../kit-svg-icon/kit-svg-icon.const';
|
|
3
|
+
import { KitSvgIcon, KitSvgIconType } from '../kit-svg-icon/kit-svg-icon.const';
|
|
4
4
|
import { KitPopupAlignHorizontal } from '../kit-popup/kit-popup.model';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
import * as i1 from "@angular/common";
|
|
@@ -18,17 +18,18 @@ export class KitProfileMenuComponent {
|
|
|
18
18
|
this.KitAvatarSize = KitAvatarSize;
|
|
19
19
|
this.KitSvgIcon = KitSvgIcon;
|
|
20
20
|
this.KitPopupAlignHorizontal = KitPopupAlignHorizontal;
|
|
21
|
+
this.KitSvgIconType = KitSvgIconType;
|
|
21
22
|
}
|
|
22
23
|
onClick(item) {
|
|
23
24
|
item?.action && item.action();
|
|
24
25
|
this.userMenu.closePopup();
|
|
25
26
|
}
|
|
26
27
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitProfileMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitProfileMenuComponent, selector: "kit-profile-menu", inputs: { menuItems: "menuItems", userName: "userName", companyName: "companyName", avatarImageSrc: "avatarImageSrc" }, viewQueries: [{ propertyName: "userMenu", first: true, predicate: ["userMenu"], descendants: true }], ngImport: i0, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n [kitPopupTrigger]=\"userMenu\">\n <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n [name]=\"userName\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <kit-svg-icon class=\"menu-button-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n </button>\n\n <kit-popup #userMenu\n class=\"menu-popup\"\n [anchor]=\"menuButton\"\n [anchorHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\"\n [popupHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\">\n <div class=\"popup-content\">\n <div class=\"popup-header\">\n <kit-avatar class=\"popup-header-avatar\"\n [name]=\"userName\"\n [size]=\"KitAvatarSize.LARGE\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <div class=\"popup-header-details\">\n @if (userName) {\n <div class=\"popup-header-name\">{{ userName }}</div>\n }\n @if (companyName) {\n <div class=\"popup-header-company\">{{ companyName }}</div>\n }\n </div>\n </div>\n <div class=\"popup-menu\">\n @for (item of menuItems; track item) {\n <a class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [routerLink]=\"item.link\"\n (click)=\"onClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"menu-item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n }\n <span class=\"menu-item-text\">{{ item.title }}</span>\n </a>\n }\n </div>\n </div>\n </kit-popup>\n</div>\n\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.popup-active .menu-button-icon{transform:rotate(180deg)}.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}.menu-popup .popup-header-details{min-width:0;font-size:14px}.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}.menu-popup .menu-item
|
|
28
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitProfileMenuComponent, selector: "kit-profile-menu", inputs: { menuItems: "menuItems", userName: "userName", companyName: "companyName", avatarImageSrc: "avatarImageSrc" }, viewQueries: [{ propertyName: "userMenu", first: true, predicate: ["userMenu"], descendants: true }], ngImport: i0, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n [kitPopupTrigger]=\"userMenu\">\n <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n [name]=\"userName\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <kit-svg-icon class=\"menu-button-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n </button>\n\n <kit-popup #userMenu\n class=\"menu-popup\"\n [anchor]=\"menuButton\"\n [anchorHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\"\n [popupHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\">\n <div class=\"popup-content\">\n <div class=\"popup-header\">\n <kit-avatar class=\"popup-header-avatar\"\n [name]=\"userName\"\n [size]=\"KitAvatarSize.LARGE\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <div class=\"popup-header-details\">\n @if (userName) {\n <div class=\"popup-header-name\">{{ userName }}</div>\n }\n @if (companyName) {\n <div class=\"popup-header-company\">{{ companyName }}</div>\n }\n </div>\n </div>\n <div class=\"popup-menu\">\n @for (item of menuItems; track item) {\n <a class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [routerLink]=\"item.link\"\n (click)=\"onClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"menu-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"menu-item-text\">{{ item.title }}</span>\n </a>\n }\n </div>\n </div>\n </kit-popup>\n</div>\n\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.popup-active .menu-button-icon{transform:rotate(180deg)}.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}.menu-popup .popup-header-details{min-width:0;font-size:14px}.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.menu-popup .menu-item-icon{display:block;width:18px;height:18px}.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}.menu-popup .menu-item-text{font-size:14px;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.KitAvatarComponent, selector: "kit-avatar", inputs: ["name", "imageSrc", "size"] }, { kind: "component", type: i3.KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "closeOnOutsideClick", "anchorHorizontalAlign", "popupHorizontalAlign"] }, { kind: "directive", type: i4.KitPopupDirective, selector: "[kitPopupTrigger]", inputs: ["kitPopupTrigger"] }, { kind: "component", type: i5.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
28
29
|
}
|
|
29
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitProfileMenuComponent, decorators: [{
|
|
30
31
|
type: Component,
|
|
31
|
-
args: [{ selector: 'kit-profile-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n [kitPopupTrigger]=\"userMenu\">\n <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n [name]=\"userName\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <kit-svg-icon class=\"menu-button-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n </button>\n\n <kit-popup #userMenu\n class=\"menu-popup\"\n [anchor]=\"menuButton\"\n [anchorHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\"\n [popupHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\">\n <div class=\"popup-content\">\n <div class=\"popup-header\">\n <kit-avatar class=\"popup-header-avatar\"\n [name]=\"userName\"\n [size]=\"KitAvatarSize.LARGE\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <div class=\"popup-header-details\">\n @if (userName) {\n <div class=\"popup-header-name\">{{ userName }}</div>\n }\n @if (companyName) {\n <div class=\"popup-header-company\">{{ companyName }}</div>\n }\n </div>\n </div>\n <div class=\"popup-menu\">\n @for (item of menuItems; track item) {\n <a class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [routerLink]=\"item.link\"\n (click)=\"onClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"menu-item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n }\n <span class=\"menu-item-text\">{{ item.title }}</span>\n </a>\n }\n </div>\n </div>\n </kit-popup>\n</div>\n\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.popup-active .menu-button-icon{transform:rotate(180deg)}.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}.menu-popup .popup-header-details{min-width:0;font-size:14px}.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}.menu-popup .menu-item
|
|
32
|
+
args: [{ selector: 'kit-profile-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n [kitPopupTrigger]=\"userMenu\">\n <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n [name]=\"userName\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <kit-svg-icon class=\"menu-button-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n </button>\n\n <kit-popup #userMenu\n class=\"menu-popup\"\n [anchor]=\"menuButton\"\n [anchorHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\"\n [popupHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\">\n <div class=\"popup-content\">\n <div class=\"popup-header\">\n <kit-avatar class=\"popup-header-avatar\"\n [name]=\"userName\"\n [size]=\"KitAvatarSize.LARGE\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <div class=\"popup-header-details\">\n @if (userName) {\n <div class=\"popup-header-name\">{{ userName }}</div>\n }\n @if (companyName) {\n <div class=\"popup-header-company\">{{ companyName }}</div>\n }\n </div>\n </div>\n <div class=\"popup-menu\">\n @for (item of menuItems; track item) {\n <a class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [routerLink]=\"item.link\"\n (click)=\"onClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"menu-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"menu-item-text\">{{ item.title }}</span>\n </a>\n }\n </div>\n </div>\n </kit-popup>\n</div>\n\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.popup-active .menu-button-icon{transform:rotate(180deg)}.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}.menu-popup .popup-header-details{min-width:0;font-size:14px}.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.menu-popup .menu-item-icon{display:block;width:18px;height:18px}.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}.menu-popup .menu-item-text{font-size:14px;font-weight:400}\n"] }]
|
|
32
33
|
}], propDecorators: { menuItems: [{
|
|
33
34
|
type: Input
|
|
34
35
|
}], userName: [{
|
|
@@ -41,4 +42,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
41
42
|
type: ViewChild,
|
|
42
43
|
args: ['userMenu']
|
|
43
44
|
}] } });
|
|
44
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
45
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LXByb2ZpbGUtbWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1wcm9maWxlLW1lbnUva2l0LXByb2ZpbGUtbWVudS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1wcm9maWxlLW1lbnUva2l0LXByb2ZpbGUtbWVudS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDckYsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQy9ELE9BQU8sRUFBRSxVQUFVLEVBQUUsY0FBYyxFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFHaEYsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sOEJBQThCLENBQUM7Ozs7Ozs7O0FBUXZFLE1BQU0sT0FBTyx1QkFBdUI7SUFOcEM7UUFPRTs7V0FFRztRQUNNLGNBQVMsR0FBeUIsRUFBRSxDQUFDO1FBbUJyQyxrQkFBYSxHQUF5QixhQUFhLENBQUM7UUFDcEQsZUFBVSxHQUFzQixVQUFVLENBQUM7UUFDM0MsNEJBQXVCLEdBQW1DLHVCQUF1QixDQUFDO1FBQ2xGLG1CQUFjLEdBQTBCLGNBQWMsQ0FBQztLQU1qRTtJQUpDLE9BQU8sQ0FBQyxJQUF3QjtRQUM5QixJQUFJLEVBQUUsTUFBTSxJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUM5QixJQUFJLENBQUMsUUFBUSxDQUFDLFVBQVUsRUFBRSxDQUFDO0lBQzdCLENBQUM7OEdBL0JVLHVCQUF1QjtrR0FBdkIsdUJBQXVCLHNSQ2JwQyw0MkRBc0RBOzsyRkR6Q2EsdUJBQXVCO2tCQU5uQyxTQUFTOytCQUNFLGtCQUFrQixtQkFHWCx1QkFBdUIsQ0FBQyxNQUFNOzhCQU10QyxTQUFTO3NCQUFqQixLQUFLO2dCQUtHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBS0csV0FBVztzQkFBbkIsS0FBSztnQkFLRyxjQUFjO3NCQUF0QixLQUFLO2dCQUVpQixRQUFRO3NCQUE5QixTQUFTO3VCQUFDLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCwgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBLaXRBdmF0YXJTaXplIH0gZnJvbSAnLi4va2l0LWF2YXRhci9raXQtYXZhdGFyLmNvbnN0JztcbmltcG9ydCB7IEtpdFN2Z0ljb24sIEtpdFN2Z0ljb25UeXBlIH0gZnJvbSAnLi4va2l0LXN2Zy1pY29uL2tpdC1zdmctaWNvbi5jb25zdCc7XG5pbXBvcnQgeyBLaXRQcm9maWxlTWVudUl0ZW0gfSBmcm9tICcuLi9raXQtcHJvZmlsZS1tZW51L2tpdC1wcm9maWxlLW1lbnUubW9kZWwnO1xuaW1wb3J0IHsgS2l0UG9wdXBDb21wb25lbnQgfSBmcm9tICcuLi9raXQtcG9wdXAva2l0LXBvcHVwLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBLaXRQb3B1cEFsaWduSG9yaXpvbnRhbCB9IGZyb20gJy4uL2tpdC1wb3B1cC9raXQtcG9wdXAubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdraXQtcHJvZmlsZS1tZW51JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2tpdC1wcm9maWxlLW1lbnUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4va2l0LXByb2ZpbGUtbWVudS5jb21wb25lbnQuc2NzcycsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBLaXRQcm9maWxlTWVudUNvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBEZWZpbmVzIGEgbGlzdCBvZiBtZW51IGl0ZW1zXG4gICAqL1xuICBASW5wdXQoKSBtZW51SXRlbXM6IEtpdFByb2ZpbGVNZW51SXRlbVtdID0gW107XG5cbiAgLyoqXG4gICAqIERlZmluZXMgdXNlcm5hbWUgdGhhdCBnb2luZyB0byBiZSBkaXNwbGF5ZWQgbmV4dCB0byBhdmF0YXIgYW5kIHVzZWQgaW4gYXZhdGFyIGFzIGluaXRpYWxzXG4gICAqL1xuICBASW5wdXQoKSB1c2VyTmFtZT86IHN0cmluZztcblxuICAvKipcbiAgICogRGVmaW5lcyBjb21wYW55IG5hbWUgdGhhdCBnb2luZyB0byBiZSBkaXNwbGF5ZWQgbmV4dCB0byBhdmF0YXJcbiAgICovXG4gIEBJbnB1dCgpIGNvbXBhbnlOYW1lPzogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBEZWZpbmVzIHRoZSBpbWFnZSBzb3VyY2Ugb2YgdGhlIGF2YXRhclxuICAgKi9cbiAgQElucHV0KCkgYXZhdGFySW1hZ2VTcmM/OiBzdHJpbmc7XG5cbiAgQFZpZXdDaGlsZCgndXNlck1lbnUnKSB1c2VyTWVudSE6IEtpdFBvcHVwQ29tcG9uZW50O1xuXG4gIHJlYWRvbmx5IEtpdEF2YXRhclNpemU6IHR5cGVvZiBLaXRBdmF0YXJTaXplID0gS2l0QXZhdGFyU2l6ZTtcbiAgcmVhZG9ubHkgS2l0U3ZnSWNvbjogdHlwZW9mIEtpdFN2Z0ljb24gPSBLaXRTdmdJY29uO1xuICByZWFkb25seSBLaXRQb3B1cEFsaWduSG9yaXpvbnRhbDogdHlwZW9mIEtpdFBvcHVwQWxpZ25Ib3Jpem9udGFsID0gS2l0UG9wdXBBbGlnbkhvcml6b250YWw7XG4gIHJlYWRvbmx5IEtpdFN2Z0ljb25UeXBlOiB0eXBlb2YgS2l0U3ZnSWNvblR5cGUgPSBLaXRTdmdJY29uVHlwZTtcblxuICBvbkNsaWNrKGl0ZW06IEtpdFByb2ZpbGVNZW51SXRlbSk6IHZvaWQge1xuICAgIGl0ZW0/LmFjdGlvbiAmJiBpdGVtLmFjdGlvbigpO1xuICAgIHRoaXMudXNlck1lbnUuY2xvc2VQb3B1cCgpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwicHJvZmlsZS1tZW51XCI+XG4gIDxidXR0b24gI21lbnVCdXR0b25cbiAgICAgICAgICBjbGFzcz1cIm1lbnUtYnV0dG9uXCJcbiAgICAgICAgICBba2l0UG9wdXBUcmlnZ2VyXT1cInVzZXJNZW51XCI+XG4gICAgPGtpdC1hdmF0YXIgW3NpemVdPVwiS2l0QXZhdGFyU2l6ZS5MQVJHRVwiXG4gICAgICAgICAgICAgICAgW25hbWVdPVwidXNlck5hbWVcIlxuICAgICAgICAgICAgICAgIFtpbWFnZVNyY109XCJhdmF0YXJJbWFnZVNyY1wiXG4gICAgPjwva2l0LWF2YXRhcj5cbiAgICA8a2l0LXN2Zy1pY29uIGNsYXNzPVwibWVudS1idXR0b24taWNvblwiXG4gICAgICAgICAgICAgICAgICBbaWNvbl09XCJLaXRTdmdJY29uLkNBUkVUX0RPV05cIlxuICAgID48L2tpdC1zdmctaWNvbj5cbiAgPC9idXR0b24+XG5cbiAgPGtpdC1wb3B1cCAjdXNlck1lbnVcbiAgICAgICAgICAgICBjbGFzcz1cIm1lbnUtcG9wdXBcIlxuICAgICAgICAgICAgIFthbmNob3JdPVwibWVudUJ1dHRvblwiXG4gICAgICAgICAgICAgW2FuY2hvckhvcml6b250YWxBbGlnbl09XCJLaXRQb3B1cEFsaWduSG9yaXpvbnRhbC5SSUdIVFwiXG4gICAgICAgICAgICAgW3BvcHVwSG9yaXpvbnRhbEFsaWduXT1cIktpdFBvcHVwQWxpZ25Ib3Jpem9udGFsLlJJR0hUXCI+XG4gICAgPGRpdiBjbGFzcz1cInBvcHVwLWNvbnRlbnRcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJwb3B1cC1oZWFkZXJcIj5cbiAgICAgICAgPGtpdC1hdmF0YXIgY2xhc3M9XCJwb3B1cC1oZWFkZXItYXZhdGFyXCJcbiAgICAgICAgICAgICAgICAgICAgW25hbWVdPVwidXNlck5hbWVcIlxuICAgICAgICAgICAgICAgICAgICBbc2l6ZV09XCJLaXRBdmF0YXJTaXplLkxBUkdFXCJcbiAgICAgICAgICAgICAgICAgICAgW2ltYWdlU3JjXT1cImF2YXRhckltYWdlU3JjXCJcbiAgICAgICAgPjwva2l0LWF2YXRhcj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInBvcHVwLWhlYWRlci1kZXRhaWxzXCI+XG4gICAgICAgICAgQGlmICh1c2VyTmFtZSkge1xuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInBvcHVwLWhlYWRlci1uYW1lXCI+e3sgdXNlck5hbWUgfX08L2Rpdj5cbiAgICAgICAgICB9XG4gICAgICAgICAgQGlmIChjb21wYW55TmFtZSkge1xuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInBvcHVwLWhlYWRlci1jb21wYW55XCI+e3sgY29tcGFueU5hbWUgfX08L2Rpdj5cbiAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwicG9wdXAtbWVudVwiPlxuICAgICAgICBAZm9yIChpdGVtIG9mIG1lbnVJdGVtczsgdHJhY2sgaXRlbSkge1xuICAgICAgICAgIDxhIGNsYXNzPVwibWVudS1pdGVtXCJcbiAgICAgICAgICAgICBbbmdDbGFzc109XCJpdGVtLmNzc0NsYXNzXCJcbiAgICAgICAgICAgICBbcm91dGVyTGlua109XCJpdGVtLmxpbmtcIlxuICAgICAgICAgICAgIChjbGljayk9XCJvbkNsaWNrKGl0ZW0pXCI+XG4gICAgICAgICAgICBAaWYgKGl0ZW0uaWNvbikge1xuICAgICAgICAgICAgICA8a2l0LXN2Zy1pY29uIGNsYXNzPVwibWVudS1pdGVtLWljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uXT1cIml0ZW0uaWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgW25nQ2xhc3NdPVwiaXRlbT8uaWNvblR5cGUgPz8gS2l0U3ZnSWNvblR5cGUuRklMTFwiXG4gICAgICAgICAgICAgID48L2tpdC1zdmctaWNvbj5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwibWVudS1pdGVtLXRleHRcIj57eyBpdGVtLnRpdGxlIH19PC9zcGFuPlxuICAgICAgICAgIDwvYT5cbiAgICAgICAgfVxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwva2l0LXBvcHVwPlxuPC9kaXY+XG5cbiJdfQ==
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LXByb2ZpbGUtbWVudS5tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWtpdC9zcmMvbGliL2NvbXBvbmVudHMva2l0LXByb2ZpbGUtbWVudS9raXQtcHJvZmlsZS1tZW51Lm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBLaXRTdmdJY29uLCBLaXRTdmdJY29uVHlwZSB9IGZyb20gJy4uL2tpdC1zdmctaWNvbi9raXQtc3ZnLWljb24uY29uc3QnO1xuXG5leHBvcnQgaW50ZXJmYWNlIEtpdFByb2ZpbGVNZW51SXRlbSB7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIGljb24/OiBLaXRTdmdJY29uO1xuICBpY29uVHlwZT86IEtpdFN2Z0ljb25UeXBlO1xuICBsaW5rPzogc3RyaW5nO1xuICBjc3NDbGFzcz86IHN0cmluZztcblxuICBhY3Rpb24/KCk6IHZvaWQ7XG59XG4iXX0=
|
|
@@ -25,11 +25,11 @@ export class KitTabComponent {
|
|
|
25
25
|
this.kitTabContent = null;
|
|
26
26
|
}
|
|
27
27
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitTabComponent, selector: "kit-tab", inputs: { title: "title", icon: "icon", iconType: "iconType", selected: "selected", disabled: "disabled" }, queries: [{ propertyName: "kitTabContent", first: true, predicate: ["kitTabContent"], descendants: true }], ngImport: i0, template: '', isInline: true, styles: ["::ng-deep .kit-tabs .k-tabstrip .k-item{display:flex;align-items:center;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;cursor:pointer}::ng-deep .kit-tabs .k-tabstrip .k-item.k-disabled{opacity:1;color:var(--ui-kit-color-grey-12)}::ng-deep .kit-tabs .text .k-tabstrip-items{gap:32px}::ng-deep .kit-tabs .text .k-item{height:46px;border-bottom:2px solid transparent}::ng-deep .kit-tabs .text .k-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item:hover .tab-title-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item:hover .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item.k-active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item.k-active .tab-title-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item.k-active .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item{padding:0 16px;height:32px;border:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-tabs .button .k-item:not(:last-child){border-right:none}::ng-deep .kit-tabs .button .k-item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}::ng-deep .kit-tabs .button .k-item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}::ng-deep .kit-tabs .button .k-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item:hover .tab-title-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item:hover .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item.k-active{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item.k-active .tab-title-icon{fill:var(--ui-kit-color-white)}::ng-deep .kit-tabs .button .k-item.k-active .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}::ng-deep .kit-tabs .k-tabstrip-items{display:flex;align-items:center}::ng-deep .kit-tabs .tab-title{display:flex;align-items:center;gap:6px}::ng-deep .kit-tabs .tab-title-icon{display:block;width:16px;height:16px
|
|
28
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitTabComponent, selector: "kit-tab", inputs: { title: "title", icon: "icon", iconType: "iconType", selected: "selected", disabled: "disabled" }, queries: [{ propertyName: "kitTabContent", first: true, predicate: ["kitTabContent"], descendants: true }], ngImport: i0, template: '', isInline: true, styles: ["::ng-deep .kit-tabs .k-tabstrip .k-item{display:flex;align-items:center;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border:none;background:none;cursor:pointer}::ng-deep .kit-tabs .k-tabstrip .k-item.k-disabled{opacity:1;color:var(--ui-kit-color-grey-12)}::ng-deep .kit-tabs .k-tabstrip .k-item:focus{box-shadow:none}::ng-deep .kit-tabs .k-tabstrip .k-item:active{margin:0}::ng-deep .kit-tabs .k-tabstrip .k-link{padding:0}::ng-deep .kit-tabs .k-tabstrip.text .k-tabstrip-items{gap:32px}::ng-deep .kit-tabs .k-tabstrip.text .k-item{height:46px;border-bottom:2px solid transparent}::ng-deep .kit-tabs .k-tabstrip.text .k-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .k-tabstrip.text .k-item:hover .tab-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-tabs .k-tabstrip.text .k-item:hover .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .k-tabstrip.text .k-item.k-active{margin:0;color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)!important}::ng-deep .kit-tabs .k-tabstrip.text .k-item.k-active .tab-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-tabs .k-tabstrip.text .k-item.k-active .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item{padding:0 16px;height:32px;border:1px solid var(--ui-kit-color-grey-11);border-radius:0}::ng-deep .kit-tabs .button .k-item:not(:last-child){border-right:none}::ng-deep .kit-tabs .button .k-item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}::ng-deep .kit-tabs .button .k-item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}::ng-deep .kit-tabs .button .k-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item:hover .tab-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-tabs .button .k-item:hover .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item.k-active{margin:0;color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item.k-active .tab-title-icon.fill{fill:var(--ui-kit-color-white);stroke:none}::ng-deep .kit-tabs .button .k-item.k-active .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}::ng-deep .kit-tabs .k-tabstrip-content{padding:0;border:none;background:none}::ng-deep .kit-tabs .k-tabstrip-content:focus{outline:none}::ng-deep .kit-tabs .k-tabstrip-items-wrapper{border:none}::ng-deep .kit-tabs .k-tabstrip-items{display:flex;align-items:center}::ng-deep .kit-tabs .tab-title{display:flex;align-items:center;gap:6px}::ng-deep .kit-tabs .tab-title-icon{display:block;width:16px;height:16px}::ng-deep .kit-tabs .tab-title-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-tabs .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-10)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
29
29
|
}
|
|
30
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTabComponent, decorators: [{
|
|
31
31
|
type: Component,
|
|
32
|
-
args: [{ selector: 'kit-tab', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: ["::ng-deep .kit-tabs .k-tabstrip .k-item{display:flex;align-items:center;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;cursor:pointer}::ng-deep .kit-tabs .k-tabstrip .k-item.k-disabled{opacity:1;color:var(--ui-kit-color-grey-12)}::ng-deep .kit-tabs .text .k-tabstrip-items{gap:32px}::ng-deep .kit-tabs .text .k-item{height:46px;border-bottom:2px solid transparent}::ng-deep .kit-tabs .text .k-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item:hover .tab-title-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item:hover .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item.k-active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item.k-active .tab-title-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item.k-active .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item{padding:0 16px;height:32px;border:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-tabs .button .k-item:not(:last-child){border-right:none}::ng-deep .kit-tabs .button .k-item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}::ng-deep .kit-tabs .button .k-item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}::ng-deep .kit-tabs .button .k-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item:hover .tab-title-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item:hover .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item.k-active{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item.k-active .tab-title-icon{fill:var(--ui-kit-color-white)}::ng-deep .kit-tabs .button .k-item.k-active .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}::ng-deep .kit-tabs .k-tabstrip-items{display:flex;align-items:center}::ng-deep .kit-tabs .tab-title{display:flex;align-items:center;gap:6px}::ng-deep .kit-tabs .tab-title-icon{display:block;width:16px;height:16px
|
|
32
|
+
args: [{ selector: 'kit-tab', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: ["::ng-deep .kit-tabs .k-tabstrip .k-item{display:flex;align-items:center;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border:none;background:none;cursor:pointer}::ng-deep .kit-tabs .k-tabstrip .k-item.k-disabled{opacity:1;color:var(--ui-kit-color-grey-12)}::ng-deep .kit-tabs .k-tabstrip .k-item:focus{box-shadow:none}::ng-deep .kit-tabs .k-tabstrip .k-item:active{margin:0}::ng-deep .kit-tabs .k-tabstrip .k-link{padding:0}::ng-deep .kit-tabs .k-tabstrip.text .k-tabstrip-items{gap:32px}::ng-deep .kit-tabs .k-tabstrip.text .k-item{height:46px;border-bottom:2px solid transparent}::ng-deep .kit-tabs .k-tabstrip.text .k-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .k-tabstrip.text .k-item:hover .tab-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-tabs .k-tabstrip.text .k-item:hover .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .k-tabstrip.text .k-item.k-active{margin:0;color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)!important}::ng-deep .kit-tabs .k-tabstrip.text .k-item.k-active .tab-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-tabs .k-tabstrip.text .k-item.k-active .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item{padding:0 16px;height:32px;border:1px solid var(--ui-kit-color-grey-11);border-radius:0}::ng-deep .kit-tabs .button .k-item:not(:last-child){border-right:none}::ng-deep .kit-tabs .button .k-item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}::ng-deep .kit-tabs .button .k-item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}::ng-deep .kit-tabs .button .k-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item:hover .tab-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-tabs .button .k-item:hover .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item.k-active{margin:0;color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item.k-active .tab-title-icon.fill{fill:var(--ui-kit-color-white);stroke:none}::ng-deep .kit-tabs .button .k-item.k-active .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}::ng-deep .kit-tabs .k-tabstrip-content{padding:0;border:none;background:none}::ng-deep .kit-tabs .k-tabstrip-content:focus{outline:none}::ng-deep .kit-tabs .k-tabstrip-items-wrapper{border:none}::ng-deep .kit-tabs .k-tabstrip-items{display:flex;align-items:center}::ng-deep .kit-tabs .tab-title{display:flex;align-items:center;gap:6px}::ng-deep .kit-tabs .tab-title-icon{display:block;width:16px;height:16px}::ng-deep .kit-tabs .tab-title-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-tabs .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-10)}\n"] }]
|
|
33
33
|
}], propDecorators: { title: [{
|
|
34
34
|
type: Input
|
|
35
35
|
}], icon: [{
|
|
@@ -3821,7 +3821,7 @@ class KitNavigationMenuComponent extends KitNavigationMenuBaseComponent {
|
|
|
3821
3821
|
this.changeDetectorRef.markForCheck();
|
|
3822
3822
|
}
|
|
3823
3823
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuComponent, deps: [{ token: i1$6.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3824
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate", multiple: "multiple" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate
|
|
3824
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate", multiple: "multiple" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate || collapsed\"\n [item]=\"item\"\n [collapsed]=\"collapsed\"\n ></kit-navigation-menu-submenu>\n }\n </div>\n } @else {\n <div class=\"nav-item\">\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"item?.link\"\n [title]=\"item.title\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n </a>\n </div>\n }\n }\n</div>\n", styles: [".kit-navigation-menu{display:flex;flex-direction:column;gap:20px;width:100%;box-sizing:border-box;transition:width .2s}.kit-navigation-menu.collapsed{width:84px}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-title{width:0;opacity:0}.kit-navigation-menu.collapsed .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu .nav-item{position:relative}.kit-navigation-menu .nav-item.expanded .nav-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu .nav-link{display:flex;align-items:center;padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);font-size:14px;font-weight:400;border-radius:8px;text-decoration:none;cursor:pointer;overflow:hidden;box-sizing:border-box}.kit-navigation-menu .nav-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.fill{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.stroke,.kit-navigation-menu .nav-link:hover .nav-link-toggle{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-navigation-menu .nav-link-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-title{transition:opacity .2s}.kit-navigation-menu .nav-link-toggle{width:16px;height:16px;stroke:var(--ui-kit-color-main);fill:none;flex-shrink:0}.kit-navigation-menu .nav-link.active{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link.active .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link.active .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: ["item"] }], animations: [
|
|
3825
3825
|
expandCollapseAnimation,
|
|
3826
3826
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3827
3827
|
}
|
|
@@ -3829,7 +3829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
3829
3829
|
type: Component,
|
|
3830
3830
|
args: [{ selector: 'kit-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
3831
3831
|
expandCollapseAnimation,
|
|
3832
|
-
], template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate
|
|
3832
|
+
], template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate || collapsed\"\n [item]=\"item\"\n [collapsed]=\"collapsed\"\n ></kit-navigation-menu-submenu>\n }\n </div>\n } @else {\n <div class=\"nav-item\">\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"item?.link\"\n [title]=\"item.title\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n </a>\n </div>\n }\n }\n</div>\n", styles: [".kit-navigation-menu{display:flex;flex-direction:column;gap:20px;width:100%;box-sizing:border-box;transition:width .2s}.kit-navigation-menu.collapsed{width:84px}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-title{width:0;opacity:0}.kit-navigation-menu.collapsed .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu .nav-item{position:relative}.kit-navigation-menu .nav-item.expanded .nav-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu .nav-link{display:flex;align-items:center;padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);font-size:14px;font-weight:400;border-radius:8px;text-decoration:none;cursor:pointer;overflow:hidden;box-sizing:border-box}.kit-navigation-menu .nav-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.fill{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.stroke,.kit-navigation-menu .nav-link:hover .nav-link-toggle{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-navigation-menu .nav-link-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-title{transition:opacity .2s}.kit-navigation-menu .nav-link-toggle{width:16px;height:16px;stroke:var(--ui-kit-color-main);fill:none;flex-shrink:0}.kit-navigation-menu .nav-link.active{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link.active .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link.active .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"] }]
|
|
3833
3833
|
}], ctorParameters: () => [{ type: i1$6.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { items: [{
|
|
3834
3834
|
type: Input
|
|
3835
3835
|
}], animate: [{
|
|
@@ -4438,17 +4438,18 @@ class KitProfileMenuComponent {
|
|
|
4438
4438
|
this.KitAvatarSize = KitAvatarSize;
|
|
4439
4439
|
this.KitSvgIcon = KitSvgIcon;
|
|
4440
4440
|
this.KitPopupAlignHorizontal = KitPopupAlignHorizontal;
|
|
4441
|
+
this.KitSvgIconType = KitSvgIconType;
|
|
4441
4442
|
}
|
|
4442
4443
|
onClick(item) {
|
|
4443
4444
|
item?.action && item.action();
|
|
4444
4445
|
this.userMenu.closePopup();
|
|
4445
4446
|
}
|
|
4446
4447
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitProfileMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4447
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitProfileMenuComponent, selector: "kit-profile-menu", inputs: { menuItems: "menuItems", userName: "userName", companyName: "companyName", avatarImageSrc: "avatarImageSrc" }, viewQueries: [{ propertyName: "userMenu", first: true, predicate: ["userMenu"], descendants: true }], ngImport: i0, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n [kitPopupTrigger]=\"userMenu\">\n <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n [name]=\"userName\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <kit-svg-icon class=\"menu-button-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n </button>\n\n <kit-popup #userMenu\n class=\"menu-popup\"\n [anchor]=\"menuButton\"\n [anchorHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\"\n [popupHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\">\n <div class=\"popup-content\">\n <div class=\"popup-header\">\n <kit-avatar class=\"popup-header-avatar\"\n [name]=\"userName\"\n [size]=\"KitAvatarSize.LARGE\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <div class=\"popup-header-details\">\n @if (userName) {\n <div class=\"popup-header-name\">{{ userName }}</div>\n }\n @if (companyName) {\n <div class=\"popup-header-company\">{{ companyName }}</div>\n }\n </div>\n </div>\n <div class=\"popup-menu\">\n @for (item of menuItems; track item) {\n <a class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [routerLink]=\"item.link\"\n (click)=\"onClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"menu-item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n }\n <span class=\"menu-item-text\">{{ item.title }}</span>\n </a>\n }\n </div>\n </div>\n </kit-popup>\n</div>\n\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.popup-active .menu-button-icon{transform:rotate(180deg)}.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}.menu-popup .popup-header-details{min-width:0;font-size:14px}.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}.menu-popup .menu-item
|
|
4448
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitProfileMenuComponent, selector: "kit-profile-menu", inputs: { menuItems: "menuItems", userName: "userName", companyName: "companyName", avatarImageSrc: "avatarImageSrc" }, viewQueries: [{ propertyName: "userMenu", first: true, predicate: ["userMenu"], descendants: true }], ngImport: i0, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n [kitPopupTrigger]=\"userMenu\">\n <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n [name]=\"userName\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <kit-svg-icon class=\"menu-button-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n </button>\n\n <kit-popup #userMenu\n class=\"menu-popup\"\n [anchor]=\"menuButton\"\n [anchorHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\"\n [popupHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\">\n <div class=\"popup-content\">\n <div class=\"popup-header\">\n <kit-avatar class=\"popup-header-avatar\"\n [name]=\"userName\"\n [size]=\"KitAvatarSize.LARGE\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <div class=\"popup-header-details\">\n @if (userName) {\n <div class=\"popup-header-name\">{{ userName }}</div>\n }\n @if (companyName) {\n <div class=\"popup-header-company\">{{ companyName }}</div>\n }\n </div>\n </div>\n <div class=\"popup-menu\">\n @for (item of menuItems; track item) {\n <a class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [routerLink]=\"item.link\"\n (click)=\"onClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"menu-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"menu-item-text\">{{ item.title }}</span>\n </a>\n }\n </div>\n </div>\n </kit-popup>\n</div>\n\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.popup-active .menu-button-icon{transform:rotate(180deg)}.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}.menu-popup .popup-header-details{min-width:0;font-size:14px}.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.menu-popup .menu-item-icon{display:block;width:18px;height:18px}.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}.menu-popup .menu-item-text{font-size:14px;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitAvatarComponent, selector: "kit-avatar", inputs: ["name", "imageSrc", "size"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "closeOnOutsideClick", "anchorHorizontalAlign", "popupHorizontalAlign"] }, { kind: "directive", type: KitPopupDirective, selector: "[kitPopupTrigger]", inputs: ["kitPopupTrigger"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4448
4449
|
}
|
|
4449
4450
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitProfileMenuComponent, decorators: [{
|
|
4450
4451
|
type: Component,
|
|
4451
|
-
args: [{ selector: 'kit-profile-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n [kitPopupTrigger]=\"userMenu\">\n <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n [name]=\"userName\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <kit-svg-icon class=\"menu-button-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n </button>\n\n <kit-popup #userMenu\n class=\"menu-popup\"\n [anchor]=\"menuButton\"\n [anchorHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\"\n [popupHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\">\n <div class=\"popup-content\">\n <div class=\"popup-header\">\n <kit-avatar class=\"popup-header-avatar\"\n [name]=\"userName\"\n [size]=\"KitAvatarSize.LARGE\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <div class=\"popup-header-details\">\n @if (userName) {\n <div class=\"popup-header-name\">{{ userName }}</div>\n }\n @if (companyName) {\n <div class=\"popup-header-company\">{{ companyName }}</div>\n }\n </div>\n </div>\n <div class=\"popup-menu\">\n @for (item of menuItems; track item) {\n <a class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [routerLink]=\"item.link\"\n (click)=\"onClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"menu-item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n }\n <span class=\"menu-item-text\">{{ item.title }}</span>\n </a>\n }\n </div>\n </div>\n </kit-popup>\n</div>\n\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.popup-active .menu-button-icon{transform:rotate(180deg)}.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}.menu-popup .popup-header-details{min-width:0;font-size:14px}.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}.menu-popup .menu-item
|
|
4452
|
+
args: [{ selector: 'kit-profile-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n [kitPopupTrigger]=\"userMenu\">\n <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n [name]=\"userName\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <kit-svg-icon class=\"menu-button-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n </button>\n\n <kit-popup #userMenu\n class=\"menu-popup\"\n [anchor]=\"menuButton\"\n [anchorHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\"\n [popupHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\">\n <div class=\"popup-content\">\n <div class=\"popup-header\">\n <kit-avatar class=\"popup-header-avatar\"\n [name]=\"userName\"\n [size]=\"KitAvatarSize.LARGE\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <div class=\"popup-header-details\">\n @if (userName) {\n <div class=\"popup-header-name\">{{ userName }}</div>\n }\n @if (companyName) {\n <div class=\"popup-header-company\">{{ companyName }}</div>\n }\n </div>\n </div>\n <div class=\"popup-menu\">\n @for (item of menuItems; track item) {\n <a class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [routerLink]=\"item.link\"\n (click)=\"onClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"menu-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"menu-item-text\">{{ item.title }}</span>\n </a>\n }\n </div>\n </div>\n </kit-popup>\n</div>\n\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.popup-active .menu-button-icon{transform:rotate(180deg)}.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}.menu-popup .popup-header-details{min-width:0;font-size:14px}.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.menu-popup .menu-item-icon{display:block;width:18px;height:18px}.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}.menu-popup .menu-item-text{font-size:14px;font-weight:400}\n"] }]
|
|
4452
4453
|
}], propDecorators: { menuItems: [{
|
|
4453
4454
|
type: Input
|
|
4454
4455
|
}], userName: [{
|
|
@@ -4517,11 +4518,11 @@ class KitTabComponent {
|
|
|
4517
4518
|
this.kitTabContent = null;
|
|
4518
4519
|
}
|
|
4519
4520
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4520
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitTabComponent, selector: "kit-tab", inputs: { title: "title", icon: "icon", iconType: "iconType", selected: "selected", disabled: "disabled" }, queries: [{ propertyName: "kitTabContent", first: true, predicate: ["kitTabContent"], descendants: true }], ngImport: i0, template: '', isInline: true, styles: ["::ng-deep .kit-tabs .k-tabstrip .k-item{display:flex;align-items:center;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;cursor:pointer}::ng-deep .kit-tabs .k-tabstrip .k-item.k-disabled{opacity:1;color:var(--ui-kit-color-grey-12)}::ng-deep .kit-tabs .text .k-tabstrip-items{gap:32px}::ng-deep .kit-tabs .text .k-item{height:46px;border-bottom:2px solid transparent}::ng-deep .kit-tabs .text .k-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item:hover .tab-title-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item:hover .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item.k-active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item.k-active .tab-title-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item.k-active .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item{padding:0 16px;height:32px;border:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-tabs .button .k-item:not(:last-child){border-right:none}::ng-deep .kit-tabs .button .k-item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}::ng-deep .kit-tabs .button .k-item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}::ng-deep .kit-tabs .button .k-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item:hover .tab-title-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item:hover .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item.k-active{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item.k-active .tab-title-icon{fill:var(--ui-kit-color-white)}::ng-deep .kit-tabs .button .k-item.k-active .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}::ng-deep .kit-tabs .k-tabstrip-items{display:flex;align-items:center}::ng-deep .kit-tabs .tab-title{display:flex;align-items:center;gap:6px}::ng-deep .kit-tabs .tab-title-icon{display:block;width:16px;height:16px
|
|
4521
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitTabComponent, selector: "kit-tab", inputs: { title: "title", icon: "icon", iconType: "iconType", selected: "selected", disabled: "disabled" }, queries: [{ propertyName: "kitTabContent", first: true, predicate: ["kitTabContent"], descendants: true }], ngImport: i0, template: '', isInline: true, styles: ["::ng-deep .kit-tabs .k-tabstrip .k-item{display:flex;align-items:center;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border:none;background:none;cursor:pointer}::ng-deep .kit-tabs .k-tabstrip .k-item.k-disabled{opacity:1;color:var(--ui-kit-color-grey-12)}::ng-deep .kit-tabs .k-tabstrip .k-item:focus{box-shadow:none}::ng-deep .kit-tabs .k-tabstrip .k-item:active{margin:0}::ng-deep .kit-tabs .k-tabstrip .k-link{padding:0}::ng-deep .kit-tabs .k-tabstrip.text .k-tabstrip-items{gap:32px}::ng-deep .kit-tabs .k-tabstrip.text .k-item{height:46px;border-bottom:2px solid transparent}::ng-deep .kit-tabs .k-tabstrip.text .k-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .k-tabstrip.text .k-item:hover .tab-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-tabs .k-tabstrip.text .k-item:hover .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .k-tabstrip.text .k-item.k-active{margin:0;color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)!important}::ng-deep .kit-tabs .k-tabstrip.text .k-item.k-active .tab-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-tabs .k-tabstrip.text .k-item.k-active .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item{padding:0 16px;height:32px;border:1px solid var(--ui-kit-color-grey-11);border-radius:0}::ng-deep .kit-tabs .button .k-item:not(:last-child){border-right:none}::ng-deep .kit-tabs .button .k-item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}::ng-deep .kit-tabs .button .k-item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}::ng-deep .kit-tabs .button .k-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item:hover .tab-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-tabs .button .k-item:hover .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item.k-active{margin:0;color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item.k-active .tab-title-icon.fill{fill:var(--ui-kit-color-white);stroke:none}::ng-deep .kit-tabs .button .k-item.k-active .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}::ng-deep .kit-tabs .k-tabstrip-content{padding:0;border:none;background:none}::ng-deep .kit-tabs .k-tabstrip-content:focus{outline:none}::ng-deep .kit-tabs .k-tabstrip-items-wrapper{border:none}::ng-deep .kit-tabs .k-tabstrip-items{display:flex;align-items:center}::ng-deep .kit-tabs .tab-title{display:flex;align-items:center;gap:6px}::ng-deep .kit-tabs .tab-title-icon{display:block;width:16px;height:16px}::ng-deep .kit-tabs .tab-title-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-tabs .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-10)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4521
4522
|
}
|
|
4522
4523
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitTabComponent, decorators: [{
|
|
4523
4524
|
type: Component,
|
|
4524
|
-
args: [{ selector: 'kit-tab', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: ["::ng-deep .kit-tabs .k-tabstrip .k-item{display:flex;align-items:center;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;cursor:pointer}::ng-deep .kit-tabs .k-tabstrip .k-item.k-disabled{opacity:1;color:var(--ui-kit-color-grey-12)}::ng-deep .kit-tabs .text .k-tabstrip-items{gap:32px}::ng-deep .kit-tabs .text .k-item{height:46px;border-bottom:2px solid transparent}::ng-deep .kit-tabs .text .k-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item:hover .tab-title-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item:hover .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item.k-active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item.k-active .tab-title-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-tabs .text .k-item.k-active .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item{padding:0 16px;height:32px;border:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-tabs .button .k-item:not(:last-child){border-right:none}::ng-deep .kit-tabs .button .k-item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}::ng-deep .kit-tabs .button .k-item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}::ng-deep .kit-tabs .button .k-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item:hover .tab-title-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item:hover .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item.k-active{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item.k-active .tab-title-icon{fill:var(--ui-kit-color-white)}::ng-deep .kit-tabs .button .k-item.k-active .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}::ng-deep .kit-tabs .k-tabstrip-items{display:flex;align-items:center}::ng-deep .kit-tabs .tab-title{display:flex;align-items:center;gap:6px}::ng-deep .kit-tabs .tab-title-icon{display:block;width:16px;height:16px
|
|
4525
|
+
args: [{ selector: 'kit-tab', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: ["::ng-deep .kit-tabs .k-tabstrip .k-item{display:flex;align-items:center;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border:none;background:none;cursor:pointer}::ng-deep .kit-tabs .k-tabstrip .k-item.k-disabled{opacity:1;color:var(--ui-kit-color-grey-12)}::ng-deep .kit-tabs .k-tabstrip .k-item:focus{box-shadow:none}::ng-deep .kit-tabs .k-tabstrip .k-item:active{margin:0}::ng-deep .kit-tabs .k-tabstrip .k-link{padding:0}::ng-deep .kit-tabs .k-tabstrip.text .k-tabstrip-items{gap:32px}::ng-deep .kit-tabs .k-tabstrip.text .k-item{height:46px;border-bottom:2px solid transparent}::ng-deep .kit-tabs .k-tabstrip.text .k-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .k-tabstrip.text .k-item:hover .tab-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-tabs .k-tabstrip.text .k-item:hover .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .k-tabstrip.text .k-item.k-active{margin:0;color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)!important}::ng-deep .kit-tabs .k-tabstrip.text .k-item.k-active .tab-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-tabs .k-tabstrip.text .k-item.k-active .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item{padding:0 16px;height:32px;border:1px solid var(--ui-kit-color-grey-11);border-radius:0}::ng-deep .kit-tabs .button .k-item:not(:last-child){border-right:none}::ng-deep .kit-tabs .button .k-item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}::ng-deep .kit-tabs .button .k-item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}::ng-deep .kit-tabs .button .k-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item:hover .tab-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-tabs .button .k-item:hover .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item.k-active{margin:0;color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}::ng-deep .kit-tabs .button .k-item.k-active .tab-title-icon.fill{fill:var(--ui-kit-color-white);stroke:none}::ng-deep .kit-tabs .button .k-item.k-active .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}::ng-deep .kit-tabs .k-tabstrip-content{padding:0;border:none;background:none}::ng-deep .kit-tabs .k-tabstrip-content:focus{outline:none}::ng-deep .kit-tabs .k-tabstrip-items-wrapper{border:none}::ng-deep .kit-tabs .k-tabstrip-items{display:flex;align-items:center}::ng-deep .kit-tabs .tab-title{display:flex;align-items:center;gap:6px}::ng-deep .kit-tabs .tab-title-icon{display:block;width:16px;height:16px}::ng-deep .kit-tabs .tab-title-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-tabs .tab-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-10)}\n"] }]
|
|
4525
4526
|
}], propDecorators: { title: [{
|
|
4526
4527
|
type: Input
|
|
4527
4528
|
}], icon: [{
|