@brickclay-org/ui 0.1.68 → 0.1.69
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.
|
@@ -8821,11 +8821,11 @@ class BkDropdown {
|
|
|
8821
8821
|
}
|
|
8822
8822
|
}
|
|
8823
8823
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDropdown, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8824
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkDropdown, isStandalone: true, selector: "bk-dropdown", inputs: { label: "label", items: "items", variant: "variant", size: "size", trigger: "trigger", placement: "placement", arrow: "arrow", splitButton: "splitButton", selectedId: "selectedId", disabled: "disabled", iconSrc: "iconSrc", customClass: "customClass" }, outputs: { select: "select", openChange: "openChange", buttonClick: "buttonClick" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<div class=\"bk-dd\" [class.bk-dd--open]=\"open\" (mouseenter)=\"onHoverEnter()\" (mouseleave)=\"onHoverLeave()\">\r\n\r\n <!-- ============ Trigger ============ -->\r\n @if (splitButton) {\r\n <!-- Button with dropdown menu (split button) -->\r\n <div class=\"bk-dd-split\" [class.bk-dd-split--disabled]=\"disabled\">\r\n <button type=\"button\" [class]=\"triggerClasses\" class=\"bk-dd-split-main\" [disabled]=\"disabled\"\r\n (click)=\"onPrimaryClick($event)\">\r\n @if (iconSrc) { <img [src]=\"iconSrc\" alt=\"\" class=\"shrink-0 size-4\" /> }\r\n <span class=\"bk-dd-label\">{{ label }}</span>\r\n </button>\r\n <button type=\"button\" [class]=\"triggerClasses\" class=\"bk-dd-split-caret\" [disabled]=\"disabled\"\r\n [attr.aria-haspopup]=\"'menu'\" [attr.aria-expanded]=\"open\" (click)=\"toggle()\">\r\n <svg class=\"bk-dd-caret shrink-0\" [ngClass]=\"caretSizeClass\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\r\n <path d=\"M4 6l4 4 4-4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n </div>\r\n } @else {\r\n <button type=\"button\" [class]=\"triggerClasses\" [class.bk-dd-trigger--disabled]=\"disabled\" [disabled]=\"disabled\"\r\n [attr.aria-haspopup]=\"'menu'\" [attr.aria-expanded]=\"open\" (click)=\"toggle()\">\r\n @if (iconSrc) { <img [src]=\"iconSrc\" alt=\"\" class=\"shrink-0 size-4\" /> }\r\n <span class=\"bk-dd-label\">{{ label }}</span>\r\n @if (arrow) {\r\n <svg class=\"bk-dd-caret shrink-0\" [ngClass]=\"caretSizeClass\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\r\n <path d=\"M4 6l4 4 4-4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n }\r\n </button>\r\n }\r\n\r\n <!-- ============ Menu ============ -->\r\n @if (open) {\r\n <div class=\"bk-dd-menu\" [ngClass]=\"menuPositionClass\" role=\"menu\">\r\n <ul class=\"bk-dd-list\" [class.bk-dd-list--scroll]=\"!hasSubmenus\">\r\n <ng-container *ngTemplateOutlet=\"menuList; context: { $implicit: items }\"></ng-container>\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n\r\n<!-- Recursive menu template (used for the root list and every submenu) -->\r\n<ng-template #menuList let-list>\r\n @for (item of list; track $index) {\r\n @if (item.divider) {\r\n <li class=\"bk-dd-divider\" role=\"separator\"></li>\r\n } @else {\r\n <li class=\"bk-dd-li\" [class.bk-dd-li--parent]=\"item.children?.length\" (mouseenter)=\"onSubmenuEnter($event)\"\r\n role=\"none\">\r\n <button type=\"button\" role=\"menuitem\" class=\"bk-dd-item\" [class.bk-dd-item--disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\" (click)=\"selectItem(item, $event)\">\r\n @if (item.icon) { <img [src]=\"item.icon\" alt=\"\" class=\"shrink-0 size-4\" /> }\r\n <span class=\"bk-dd-item-label\">{{ item.label }}</span>\r\n @if (item.children?.length) {\r\n <svg class=\"bk-dd-item-caret shrink-0 size-3.5\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\r\n <path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n } @else if (isSelected(item)) {\r\n <svg class=\"bk-dd-check shrink-0 size-4\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-hidden=\"true\">\r\n <path d=\"M3.5 8.5l3 3 6-6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n }\r\n </button>\r\n\r\n @if (item.children?.length) {\r\n <ul class=\"bk-dd-submenu\">\r\n <ng-container *ngTemplateOutlet=\"menuList; context: { $implicit: item.children }\"></ng-container>\r\n </ul>\r\n }\r\n </li>\r\n }\r\n }\r\n</ng-template>", styles: [".bk-dd{@apply relative inline-block;}.bk-dd-trigger{@apply inline-flex items-center justify-center gap-1.5 border rounded-md font-medium cursor-pointer transition-colors duration-100 outline-none whitespace-nowrap tracking-[-.28];}.bk-dd-trigger--sm{@apply text-xs px-2.5 py-1.5 leading-3;}.bk-dd-trigger--md{@apply text-sm px-3 py-2 leading-[14px];}.bk-dd-trigger--lg{@apply text-base px-4 py-2.5 leading-4;}.bk-dd-trigger--black{@apply bg-[#141414] text-white border-transparent;}.bk-dd-trigger--black:hover:not(:disabled){@apply bg-[#2A2A2A];}.bk-dd-trigger--white{@apply bg-white text-[#141414] border-[#E3E3E7];}.bk-dd-trigger--white:hover:not(:disabled){@apply bg-[#F9FAFA];}.bk-dd-trigger--disabled{@apply opacity-50 cursor-not-allowed;}.bk-dd-label{@apply whitespace-nowrap;}.bk-dd-caret{@apply transition-transform duration-200;}.bk-dd--open .bk-dd-caret{@apply rotate-180;}.bk-dd-split{@apply inline-flex items-stretch;}.bk-dd-split-main{@apply rounded-r-none;}.bk-dd-split-caret{@apply rounded-l-none border-l-0 px-2;}.bk-dd-split-caret.bk-dd-trigger--black{@apply border-l border-l-[#2A2A2A];}.bk-dd-split-caret.bk-dd-trigger--white{@apply border-l border-l-[#E3E3E7];}.bk-dd-split--disabled{@apply opacity-50 pointer-events-none;}.bk-dd-menu{@apply absolute z-[100] min-w-[10rem] max-w-[16rem] bg-white border border-[#E3E3E7] rounded-xl shadow-lg p-2.5;}.bk-dd-list{@apply relative z-10 list-none m-0 p-0 flex flex-col gap-0.5;}.bk-dd-list--scroll{@apply max-h-[16rem] overflow-y-auto;}.bk-dd-li{@apply relative;}.bk-dd-item{@apply flex items-center gap-2 w-full text-left p-2.5 rounded-md text-sm font-normal text-[#141414] bg-transparent cursor-pointer transition-colors;}.bk-dd-item:hover:not(:disabled){@apply bg-[#F8F8F8];}.bk-dd-item--disabled{@apply opacity-50 cursor-not-allowed;}.bk-dd-item-label{@apply flex-1 min-w-0 truncate;}.bk-dd-item-caret{@apply text-[#6B7080];}.bk-dd-check{@apply text-[#141414];}.bk-dd-divider{@apply -mx-2.5 h-px bg-[#E3E3E7];}.bk-dd-submenu{@apply absolute top-0 left-full ml-1 hidden min-w-[10rem] max-w-[16rem] list-none m-0 p-2.5 flex-col gap-0.5 bg-white border border-[#E3E3E7] rounded-xl shadow-lg;}.bk-dd-li--parent:hover>.bk-dd-submenu{@apply flex;}.bk-dd-submenu--flip>.bk-dd-submenu{@apply left-auto right-full ml-0 mr-1;}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
8824
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkDropdown, isStandalone: true, selector: "bk-dropdown", inputs: { label: "label", items: "items", variant: "variant", size: "size", trigger: "trigger", placement: "placement", arrow: "arrow", splitButton: "splitButton", selectedId: "selectedId", disabled: "disabled", iconSrc: "iconSrc", customClass: "customClass" }, outputs: { select: "select", openChange: "openChange", buttonClick: "buttonClick" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<div class=\"bk-dd\" [class.bk-dd--open]=\"open\" (mouseenter)=\"onHoverEnter()\" (mouseleave)=\"onHoverLeave()\">\r\n\r\n <!-- ============ Trigger ============ -->\r\n @if (splitButton) {\r\n <!-- Button with dropdown menu (split button) -->\r\n <div class=\"bk-dd-split\" [class.bk-dd-split--disabled]=\"disabled\">\r\n <button type=\"button\" [class]=\"triggerClasses\" class=\"bk-dd-split-main\" [disabled]=\"disabled\"\r\n (click)=\"onPrimaryClick($event)\">\r\n @if (iconSrc) { <img [src]=\"iconSrc\" alt=\"\" class=\"shrink-0 size-4\" /> }\r\n <span class=\"bk-dd-label\">{{ label }}</span>\r\n </button>\r\n <button type=\"button\" [class]=\"triggerClasses\" class=\"bk-dd-split-caret\" [disabled]=\"disabled\"\r\n [attr.aria-haspopup]=\"'menu'\" [attr.aria-expanded]=\"open\" (click)=\"toggle()\">\r\n <svg class=\"bk-dd-caret shrink-0\" [ngClass]=\"caretSizeClass\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\r\n <path d=\"M4 6l4 4 4-4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n </div>\r\n } @else {\r\n <button type=\"button\" [class]=\"triggerClasses\" [class.bk-dd-trigger--disabled]=\"disabled\" [disabled]=\"disabled\"\r\n [attr.aria-haspopup]=\"'menu'\" [attr.aria-expanded]=\"open\" (click)=\"toggle()\">\r\n @if (iconSrc) { <img [src]=\"iconSrc\" alt=\"\" class=\"shrink-0 size-4\" /> }\r\n <span class=\"bk-dd-label\">{{ label }}</span>\r\n @if (arrow) {\r\n <svg class=\"bk-dd-caret shrink-0\" [ngClass]=\"caretSizeClass\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\r\n <path d=\"M4 6l4 4 4-4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n }\r\n </button>\r\n }\r\n\r\n <!-- ============ Menu ============ -->\r\n @if (open) {\r\n <div class=\"bk-dd-menu\" [ngClass]=\"menuPositionClass\" role=\"menu\">\r\n <ul class=\"bk-dd-list\" [class.bk-dd-list--scroll]=\"!hasSubmenus\">\r\n <ng-container *ngTemplateOutlet=\"menuList; context: { $implicit: items }\"></ng-container>\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n\r\n<!-- Recursive menu template (used for the root list and every submenu) -->\r\n<ng-template #menuList let-list>\r\n @for (item of list; track $index) {\r\n @if (item.divider) {\r\n <li class=\"bk-dd-divider\" role=\"separator\"></li>\r\n } @else {\r\n <li class=\"bk-dd-li\" [class.bk-dd-li--parent]=\"item.children?.length\" (mouseenter)=\"onSubmenuEnter($event)\"\r\n role=\"none\">\r\n <button type=\"button\" role=\"menuitem\" class=\"bk-dd-item\" [class.bk-dd-item--disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\" (click)=\"selectItem(item, $event)\">\r\n @if (item.icon) { <img [src]=\"item.icon\" alt=\"\" class=\"shrink-0 size-4\" /> }\r\n <span class=\"bk-dd-item-label\">{{ item.label }}</span>\r\n @if (item.children?.length) {\r\n <svg class=\"bk-dd-item-caret shrink-0 size-3.5\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\r\n <path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n } @else if (isSelected(item)) {\r\n <svg class=\"bk-dd-check shrink-0 size-4\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-hidden=\"true\">\r\n <path d=\"M3.5 8.5l3 3 6-6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n }\r\n </button>\r\n\r\n @if (item.children?.length) {\r\n <ul class=\"bk-dd-submenu\">\r\n <ng-container *ngTemplateOutlet=\"menuList; context: { $implicit: item.children }\"></ng-container>\r\n </ul>\r\n }\r\n </li>\r\n }\r\n }\r\n</ng-template>", styles: [".bk-dd{@apply relative inline-block;}.bk-dd-trigger{@apply inline-flex items-center justify-center gap-1.5 border rounded-md font-medium cursor-pointer transition-colors duration-100 outline-none whitespace-nowrap tracking-[-.28];}.bk-dd-trigger--sm{@apply text-xs px-2.5 py-1.5 leading-3;}.bk-dd-trigger--md{@apply text-sm px-3 py-2 leading-[14px];}.bk-dd-trigger--lg{@apply text-base px-4 py-2.5 leading-4;}.bk-dd-trigger--black{@apply bg-[#141414] text-white border-transparent;}.bk-dd-trigger--black:hover:not(:disabled){@apply bg-[#2A2A2A];}.bk-dd-trigger--white{@apply bg-white text-[#141414] border-[#E3E3E7];}.bk-dd-trigger--white:hover:not(:disabled){@apply bg-[#F9FAFA];}.bk-dd-trigger--disabled{@apply opacity-50 cursor-not-allowed;}.bk-dd-label{@apply whitespace-nowrap;}.bk-dd-caret{@apply transition-transform duration-200;}.bk-dd--open .bk-dd-caret{@apply rotate-180;}.bk-dd-split{@apply inline-flex items-stretch;}.bk-dd-split-main{@apply rounded-r-none;}.bk-dd-split-caret{@apply rounded-l-none border-l-0 px-2;}.bk-dd-split-caret.bk-dd-trigger--black{@apply border-l border-l-[#2A2A2A];}.bk-dd-split-caret.bk-dd-trigger--white{@apply border-l border-l-[#E3E3E7];}.bk-dd-split--disabled{@apply opacity-50 pointer-events-none;}.bk-dd-menu{@apply absolute z-[100] min-w-[10rem] max-w-[16rem] bg-white border border-[#E3E3E7] rounded-xl shadow-lg p-2.5;}.bk-dd-list{@apply relative z-10 list-none m-0 p-0 flex flex-col gap-0.5;}.bk-dd-list--scroll{@apply max-h-[16rem] overflow-y-auto;}.bk-dd-li{@apply relative;}.bk-dd-item{@apply flex items-center gap-2 w-full text-left p-2.5 rounded-md text-sm font-normal text-[#141414] bg-transparent cursor-pointer transition-colors;}.bk-dd-item:hover:not(:disabled){@apply bg-[#F8F8F8];}.bk-dd-item--disabled{@apply opacity-50 cursor-not-allowed;}.bk-dd-item-label{@apply flex-1 min-w-0 truncate;}.bk-dd-item-caret{@apply text-[#6B7080];}.bk-dd-check{@apply text-[#141414];}.bk-dd-divider{@apply -mx-2.5 h-px bg-[#E3E3E7];}.bk-dd-submenu{@apply absolute top-0 left-full ml-1 hidden min-w-[10rem] max-w-[16rem] list-none m-0 p-2.5 flex-col gap-0.5 bg-white border border-[#E3E3E7] rounded-xl shadow-lg;}.bk-dd-li--parent:hover>.bk-dd-submenu{@apply flex;}.bk-dd-submenu--flip>.bk-dd-submenu{@apply left-auto right-full ml-0 mr-1;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
8825
8825
|
}
|
|
8826
8826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDropdown, decorators: [{
|
|
8827
8827
|
type: Component,
|
|
8828
|
-
args: [{ selector: 'bk-dropdown', imports: [
|
|
8828
|
+
args: [{ selector: 'bk-dropdown', imports: [CommonModule], standalone: true, template: "<div class=\"bk-dd\" [class.bk-dd--open]=\"open\" (mouseenter)=\"onHoverEnter()\" (mouseleave)=\"onHoverLeave()\">\r\n\r\n <!-- ============ Trigger ============ -->\r\n @if (splitButton) {\r\n <!-- Button with dropdown menu (split button) -->\r\n <div class=\"bk-dd-split\" [class.bk-dd-split--disabled]=\"disabled\">\r\n <button type=\"button\" [class]=\"triggerClasses\" class=\"bk-dd-split-main\" [disabled]=\"disabled\"\r\n (click)=\"onPrimaryClick($event)\">\r\n @if (iconSrc) { <img [src]=\"iconSrc\" alt=\"\" class=\"shrink-0 size-4\" /> }\r\n <span class=\"bk-dd-label\">{{ label }}</span>\r\n </button>\r\n <button type=\"button\" [class]=\"triggerClasses\" class=\"bk-dd-split-caret\" [disabled]=\"disabled\"\r\n [attr.aria-haspopup]=\"'menu'\" [attr.aria-expanded]=\"open\" (click)=\"toggle()\">\r\n <svg class=\"bk-dd-caret shrink-0\" [ngClass]=\"caretSizeClass\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\r\n <path d=\"M4 6l4 4 4-4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n </div>\r\n } @else {\r\n <button type=\"button\" [class]=\"triggerClasses\" [class.bk-dd-trigger--disabled]=\"disabled\" [disabled]=\"disabled\"\r\n [attr.aria-haspopup]=\"'menu'\" [attr.aria-expanded]=\"open\" (click)=\"toggle()\">\r\n @if (iconSrc) { <img [src]=\"iconSrc\" alt=\"\" class=\"shrink-0 size-4\" /> }\r\n <span class=\"bk-dd-label\">{{ label }}</span>\r\n @if (arrow) {\r\n <svg class=\"bk-dd-caret shrink-0\" [ngClass]=\"caretSizeClass\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\r\n <path d=\"M4 6l4 4 4-4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n }\r\n </button>\r\n }\r\n\r\n <!-- ============ Menu ============ -->\r\n @if (open) {\r\n <div class=\"bk-dd-menu\" [ngClass]=\"menuPositionClass\" role=\"menu\">\r\n <ul class=\"bk-dd-list\" [class.bk-dd-list--scroll]=\"!hasSubmenus\">\r\n <ng-container *ngTemplateOutlet=\"menuList; context: { $implicit: items }\"></ng-container>\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n\r\n<!-- Recursive menu template (used for the root list and every submenu) -->\r\n<ng-template #menuList let-list>\r\n @for (item of list; track $index) {\r\n @if (item.divider) {\r\n <li class=\"bk-dd-divider\" role=\"separator\"></li>\r\n } @else {\r\n <li class=\"bk-dd-li\" [class.bk-dd-li--parent]=\"item.children?.length\" (mouseenter)=\"onSubmenuEnter($event)\"\r\n role=\"none\">\r\n <button type=\"button\" role=\"menuitem\" class=\"bk-dd-item\" [class.bk-dd-item--disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\" (click)=\"selectItem(item, $event)\">\r\n @if (item.icon) { <img [src]=\"item.icon\" alt=\"\" class=\"shrink-0 size-4\" /> }\r\n <span class=\"bk-dd-item-label\">{{ item.label }}</span>\r\n @if (item.children?.length) {\r\n <svg class=\"bk-dd-item-caret shrink-0 size-3.5\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\r\n <path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n } @else if (isSelected(item)) {\r\n <svg class=\"bk-dd-check shrink-0 size-4\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-hidden=\"true\">\r\n <path d=\"M3.5 8.5l3 3 6-6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n }\r\n </button>\r\n\r\n @if (item.children?.length) {\r\n <ul class=\"bk-dd-submenu\">\r\n <ng-container *ngTemplateOutlet=\"menuList; context: { $implicit: item.children }\"></ng-container>\r\n </ul>\r\n }\r\n </li>\r\n }\r\n }\r\n</ng-template>", styles: [".bk-dd{@apply relative inline-block;}.bk-dd-trigger{@apply inline-flex items-center justify-center gap-1.5 border rounded-md font-medium cursor-pointer transition-colors duration-100 outline-none whitespace-nowrap tracking-[-.28];}.bk-dd-trigger--sm{@apply text-xs px-2.5 py-1.5 leading-3;}.bk-dd-trigger--md{@apply text-sm px-3 py-2 leading-[14px];}.bk-dd-trigger--lg{@apply text-base px-4 py-2.5 leading-4;}.bk-dd-trigger--black{@apply bg-[#141414] text-white border-transparent;}.bk-dd-trigger--black:hover:not(:disabled){@apply bg-[#2A2A2A];}.bk-dd-trigger--white{@apply bg-white text-[#141414] border-[#E3E3E7];}.bk-dd-trigger--white:hover:not(:disabled){@apply bg-[#F9FAFA];}.bk-dd-trigger--disabled{@apply opacity-50 cursor-not-allowed;}.bk-dd-label{@apply whitespace-nowrap;}.bk-dd-caret{@apply transition-transform duration-200;}.bk-dd--open .bk-dd-caret{@apply rotate-180;}.bk-dd-split{@apply inline-flex items-stretch;}.bk-dd-split-main{@apply rounded-r-none;}.bk-dd-split-caret{@apply rounded-l-none border-l-0 px-2;}.bk-dd-split-caret.bk-dd-trigger--black{@apply border-l border-l-[#2A2A2A];}.bk-dd-split-caret.bk-dd-trigger--white{@apply border-l border-l-[#E3E3E7];}.bk-dd-split--disabled{@apply opacity-50 pointer-events-none;}.bk-dd-menu{@apply absolute z-[100] min-w-[10rem] max-w-[16rem] bg-white border border-[#E3E3E7] rounded-xl shadow-lg p-2.5;}.bk-dd-list{@apply relative z-10 list-none m-0 p-0 flex flex-col gap-0.5;}.bk-dd-list--scroll{@apply max-h-[16rem] overflow-y-auto;}.bk-dd-li{@apply relative;}.bk-dd-item{@apply flex items-center gap-2 w-full text-left p-2.5 rounded-md text-sm font-normal text-[#141414] bg-transparent cursor-pointer transition-colors;}.bk-dd-item:hover:not(:disabled){@apply bg-[#F8F8F8];}.bk-dd-item--disabled{@apply opacity-50 cursor-not-allowed;}.bk-dd-item-label{@apply flex-1 min-w-0 truncate;}.bk-dd-item-caret{@apply text-[#6B7080];}.bk-dd-check{@apply text-[#141414];}.bk-dd-divider{@apply -mx-2.5 h-px bg-[#E3E3E7];}.bk-dd-submenu{@apply absolute top-0 left-full ml-1 hidden min-w-[10rem] max-w-[16rem] list-none m-0 p-2.5 flex-col gap-0.5 bg-white border border-[#E3E3E7] rounded-xl shadow-lg;}.bk-dd-li--parent:hover>.bk-dd-submenu{@apply flex;}.bk-dd-submenu--flip>.bk-dd-submenu{@apply left-auto right-full ml-0 mr-1;}\n"] }]
|
|
8829
8829
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
|
|
8830
8830
|
type: Input
|
|
8831
8831
|
}], items: [{
|