@brickclay-org/ui 0.1.68 → 0.1.70
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.
|
@@ -5736,11 +5736,11 @@ class BkTabs {
|
|
|
5736
5736
|
return tab.icon;
|
|
5737
5737
|
}
|
|
5738
5738
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5739
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTabs, isStandalone: true, selector: "bk-tabs", inputs: { list: "list", activeTabId: "activeTabId", disabled: "disabled", orientation: "orientation", variant: "variant", colors: "colors" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"tabs-container\" [class.tabs-container--segmented]=\"isSegmented\"\r\n [ngClass]=\"isSegmented ? wrapperClass : (isVertical ? 'w-auto' : 'overflow-x-auto whitespace-nowrap')\">\r\n <ul class=\"tabs-list\" [class.tabs-list--segmented]=\"isSegmented\"\r\n [class.tabs-list--segmented-vertical]=\"isSegmented && isVertical\"\r\n [class.tabs-list--vertical]=\"isVertical && !isSegmented\" [attr.aria-orientation]=\"orientation\" role=\"tablist\">\r\n @for (tab of list; track tab.id; let i = $index) {\r\n <li class=\"tabs-item\" role=\"presentation\">\r\n <!--\r\n Tooltip logic:\r\n - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n - No icon + error state \u2192 tooltip on the button\r\n - No icon + no error \u2192 no tooltip\r\n -->\r\n <button type=\"button\" [id]=\"'tab-' + tab.id\" [attr.aria-selected]=\"isActive(tab.id)\"\r\n [attr.aria-controls]=\"'panel-' + tab.id\" [disabled]=\"tab.disabled\"\r\n [class.tabs-button--active]=\"isActive(tab.id)\" [class.tabs-button--error]=\"tab.error\"\r\n [class.tabs-button--disabled]=\"disabled || tab.disabled\"\r\n [class.tabs-button--icon-right]=\"tab.direction === 'right'\" [class.tabs-button--segmented]=\"isSegmented\"\r\n [ngClass]=\"[\r\n isSegmented ? segmentedTabClass(tab) : '',\r\n (isVertical && !isSegmented) ? 'w-full justify-start' : ''\r\n ]\" [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" class=\"tabs-button\" (click)=\"setActiveTab(tab)\"\r\n role=\"tab\">\r\n <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n class=\"tabs-icon\">\r\n <span class=\"tabs-label\">{{ tab.label }}</span>\r\n <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n class=\"tabs-icon\">\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n</div>", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply grid grid-flow-col auto-cols-max gap-
|
|
5739
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTabs, isStandalone: true, selector: "bk-tabs", inputs: { list: "list", activeTabId: "activeTabId", disabled: "disabled", orientation: "orientation", variant: "variant", colors: "colors" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"tabs-container\" [class.tabs-container--segmented]=\"isSegmented\"\r\n [ngClass]=\"isSegmented ? wrapperClass : (isVertical ? 'w-auto' : 'overflow-x-auto whitespace-nowrap')\">\r\n <ul class=\"tabs-list\" [class.tabs-list--segmented]=\"isSegmented\"\r\n [class.tabs-list--segmented-vertical]=\"isSegmented && isVertical\"\r\n [class.tabs-list--vertical]=\"isVertical && !isSegmented\" [attr.aria-orientation]=\"orientation\" role=\"tablist\">\r\n @for (tab of list; track tab.id; let i = $index) {\r\n <li class=\"tabs-item\" role=\"presentation\">\r\n <!--\r\n Tooltip logic:\r\n - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n - No icon + error state \u2192 tooltip on the button\r\n - No icon + no error \u2192 no tooltip\r\n -->\r\n <button type=\"button\" [id]=\"'tab-' + tab.id\" [attr.aria-selected]=\"isActive(tab.id)\"\r\n [attr.aria-controls]=\"'panel-' + tab.id\" [disabled]=\"tab.disabled\"\r\n [class.tabs-button--active]=\"isActive(tab.id)\" [class.tabs-button--error]=\"tab.error\"\r\n [class.tabs-button--disabled]=\"disabled || tab.disabled\"\r\n [class.tabs-button--icon-right]=\"tab.direction === 'right'\" [class.tabs-button--segmented]=\"isSegmented\"\r\n [ngClass]=\"[\r\n isSegmented ? segmentedTabClass(tab) : '',\r\n (isVertical && !isSegmented) ? 'w-full justify-start' : ''\r\n ]\" [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" class=\"tabs-button\" (click)=\"setActiveTab(tab)\"\r\n role=\"tab\">\r\n <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n class=\"tabs-icon\">\r\n <span class=\"tabs-label\">{{ tab.label }}</span>\r\n <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n class=\"tabs-icon\">\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n</div>", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply grid grid-flow-col auto-cols-max gap-[4px] list-none m-0 px-0 py-0.5;}.tabs-item{@apply min-w-0;}.tabs-list--vertical{@apply grid-cols-1 grid-flow-row auto-rows-max;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-100 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button:hover:not(:disabled):not(.tabs-button--active){@apply text-[#141414] bg-[#EDEEF0];}.tabs-list--vertical .tabs-button{@apply py-[9px];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--error{@apply bg-[#C10007] text-white border-0;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;max-width:1rem;opacity:1;overflow:hidden;transition:max-width .2s ease,opacity .2s ease}.tabs-icon--hidden{max-width:0;opacity:0}.tabs-label{@apply whitespace-nowrap;}.tabs-container--segmented{@apply p-[3px] rounded-md w-full md:w-auto overflow-x-auto;background:#54578e12}.tabs-list--segmented{@apply grid grid-flow-col items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;grid-auto-columns:minmax(max-content,1fr);color:#6b7080}.tabs-button--segmented{@apply border border-transparent px-3 sm:min-w-[5rem] py-1.5 w-full text-center justify-center rounded;color:#6b7080}.tabs-button--segmented:hover:not(:disabled):not(.tabs-button--active){border-color:#42578a26;background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--active{background:#fff;color:#15191e}.tabs-list--segmented-vertical{@apply grid-cols-1 grid-flow-row auto-rows-max gap-1;}.tabs-list--segmented-vertical .tabs-button--segmented{@apply justify-start text-left;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }] });
|
|
5740
5740
|
}
|
|
5741
5741
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, decorators: [{
|
|
5742
5742
|
type: Component,
|
|
5743
|
-
args: [{ selector: 'bk-tabs', standalone: true, imports: [CommonModule, BKTooltipDirective], template: "<div class=\"tabs-container\" [class.tabs-container--segmented]=\"isSegmented\"\r\n [ngClass]=\"isSegmented ? wrapperClass : (isVertical ? 'w-auto' : 'overflow-x-auto whitespace-nowrap')\">\r\n <ul class=\"tabs-list\" [class.tabs-list--segmented]=\"isSegmented\"\r\n [class.tabs-list--segmented-vertical]=\"isSegmented && isVertical\"\r\n [class.tabs-list--vertical]=\"isVertical && !isSegmented\" [attr.aria-orientation]=\"orientation\" role=\"tablist\">\r\n @for (tab of list; track tab.id; let i = $index) {\r\n <li class=\"tabs-item\" role=\"presentation\">\r\n <!--\r\n Tooltip logic:\r\n - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n - No icon + error state \u2192 tooltip on the button\r\n - No icon + no error \u2192 no tooltip\r\n -->\r\n <button type=\"button\" [id]=\"'tab-' + tab.id\" [attr.aria-selected]=\"isActive(tab.id)\"\r\n [attr.aria-controls]=\"'panel-' + tab.id\" [disabled]=\"tab.disabled\"\r\n [class.tabs-button--active]=\"isActive(tab.id)\" [class.tabs-button--error]=\"tab.error\"\r\n [class.tabs-button--disabled]=\"disabled || tab.disabled\"\r\n [class.tabs-button--icon-right]=\"tab.direction === 'right'\" [class.tabs-button--segmented]=\"isSegmented\"\r\n [ngClass]=\"[\r\n isSegmented ? segmentedTabClass(tab) : '',\r\n (isVertical && !isSegmented) ? 'w-full justify-start' : ''\r\n ]\" [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" class=\"tabs-button\" (click)=\"setActiveTab(tab)\"\r\n role=\"tab\">\r\n <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n class=\"tabs-icon\">\r\n <span class=\"tabs-label\">{{ tab.label }}</span>\r\n <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n class=\"tabs-icon\">\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n</div>", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply grid grid-flow-col auto-cols-max gap-
|
|
5743
|
+
args: [{ selector: 'bk-tabs', standalone: true, imports: [CommonModule, BKTooltipDirective], template: "<div class=\"tabs-container\" [class.tabs-container--segmented]=\"isSegmented\"\r\n [ngClass]=\"isSegmented ? wrapperClass : (isVertical ? 'w-auto' : 'overflow-x-auto whitespace-nowrap')\">\r\n <ul class=\"tabs-list\" [class.tabs-list--segmented]=\"isSegmented\"\r\n [class.tabs-list--segmented-vertical]=\"isSegmented && isVertical\"\r\n [class.tabs-list--vertical]=\"isVertical && !isSegmented\" [attr.aria-orientation]=\"orientation\" role=\"tablist\">\r\n @for (tab of list; track tab.id; let i = $index) {\r\n <li class=\"tabs-item\" role=\"presentation\">\r\n <!--\r\n Tooltip logic:\r\n - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n - No icon + error state \u2192 tooltip on the button\r\n - No icon + no error \u2192 no tooltip\r\n -->\r\n <button type=\"button\" [id]=\"'tab-' + tab.id\" [attr.aria-selected]=\"isActive(tab.id)\"\r\n [attr.aria-controls]=\"'panel-' + tab.id\" [disabled]=\"tab.disabled\"\r\n [class.tabs-button--active]=\"isActive(tab.id)\" [class.tabs-button--error]=\"tab.error\"\r\n [class.tabs-button--disabled]=\"disabled || tab.disabled\"\r\n [class.tabs-button--icon-right]=\"tab.direction === 'right'\" [class.tabs-button--segmented]=\"isSegmented\"\r\n [ngClass]=\"[\r\n isSegmented ? segmentedTabClass(tab) : '',\r\n (isVertical && !isSegmented) ? 'w-full justify-start' : ''\r\n ]\" [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" class=\"tabs-button\" (click)=\"setActiveTab(tab)\"\r\n role=\"tab\">\r\n <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n class=\"tabs-icon\">\r\n <span class=\"tabs-label\">{{ tab.label }}</span>\r\n <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n class=\"tabs-icon\">\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n</div>", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply grid grid-flow-col auto-cols-max gap-[4px] list-none m-0 px-0 py-0.5;}.tabs-item{@apply min-w-0;}.tabs-list--vertical{@apply grid-cols-1 grid-flow-row auto-rows-max;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-100 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button:hover:not(:disabled):not(.tabs-button--active){@apply text-[#141414] bg-[#EDEEF0];}.tabs-list--vertical .tabs-button{@apply py-[9px];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--error{@apply bg-[#C10007] text-white border-0;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;max-width:1rem;opacity:1;overflow:hidden;transition:max-width .2s ease,opacity .2s ease}.tabs-icon--hidden{max-width:0;opacity:0}.tabs-label{@apply whitespace-nowrap;}.tabs-container--segmented{@apply p-[3px] rounded-md w-full md:w-auto overflow-x-auto;background:#54578e12}.tabs-list--segmented{@apply grid grid-flow-col items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;grid-auto-columns:minmax(max-content,1fr);color:#6b7080}.tabs-button--segmented{@apply border border-transparent px-3 sm:min-w-[5rem] py-1.5 w-full text-center justify-center rounded;color:#6b7080}.tabs-button--segmented:hover:not(:disabled):not(.tabs-button--active){border-color:#42578a26;background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--active{background:#fff;color:#15191e}.tabs-list--segmented-vertical{@apply grid-cols-1 grid-flow-row auto-rows-max gap-1;}.tabs-list--segmented-vertical .tabs-button--segmented{@apply justify-start text-left;}\n"] }]
|
|
5744
5744
|
}], propDecorators: { list: [{
|
|
5745
5745
|
type: Input
|
|
5746
5746
|
}], activeTabId: [{
|
|
@@ -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: [{
|