@brickclay-org/ui 0.1.67 → 0.1.68

package/fesm2022/brickclay-org-ui.mjs

@@ -5691,6 +5691,31 @@ class BkTabs {
     list = [];
     activeTabId = '';
     disabled = false;
+    orientation = 'horizontal';
+    variant = 'default';
+    colors = {};
+    // Convenience getters for template class bindings
+    get isVertical() {
+        return this.orientation === 'vertical';
+    }
+    get isSegmented() {
+        return this.variant === 'segmented';
+    }
+    // Wrapper (track) classes — only for segmented; empty keeps the CSS default.
+    get wrapperClass() {
+        return this.isSegmented ? (this.colors.wrapper ?? '') : '';
+    }
+    // Per-tab color classes for the segmented variant.
+    // Active tabs get background + text classes; inactive tabs get the text class.
+    // Empty strings simply fall through to the default colors in tabs.css.
+    segmentedTabClass(tab) {
+        if (!this.isSegmented)
+            return '';
+        if (this.isActive(tab.id)) {
+            return `${this.colors.active ?? ''} ${this.colors.activeText ?? ''}`.trim();
+        }
+        return this.colors.inactive ?? '';
+    }
     change = new EventEmitter();
     // Set active tab and emit change event
     setActiveTab(tab) {
@@ -5711,17 +5736,23 @@ class BkTabs {
         return tab.icon;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"tabs-container overflow-x-auto whitespace-nowrap\">\r\n  <ul class=\"tabs-list\" 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\r\n          type=\"button\"\r\n          [id]=\"'tab-' + tab.id\"\r\n          [attr.aria-selected]=\"isActive(tab.id)\"\r\n          [attr.aria-controls]=\"'panel-' + tab.id\"\r\n          [disabled]=\"tab.disabled\"\r\n          [class.tabs-button--active]=\"isActive(tab.id)\"\r\n          [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'\"\r\n          [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n          [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n          class=\"tabs-button\"\r\n          (click)=\"setActiveTab(tab)\"\r\n          role=\"tab\">\r\n          <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [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\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [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>\r\n", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply flex gap-0 list-none m-0 px-0 py-0.5;}.tabs-item{@apply flex-shrink-0;}.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--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;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }] });
+    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-0 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--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;background:#54578e12}.tabs-list--segmented{@apply grid grid-flow-col auto-cols-fr items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-tabs', standalone: true, imports: [CommonModule, BKTooltipDirective], template: "<div class=\"tabs-container overflow-x-auto whitespace-nowrap\">\r\n  <ul class=\"tabs-list\" 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\r\n          type=\"button\"\r\n          [id]=\"'tab-' + tab.id\"\r\n          [attr.aria-selected]=\"isActive(tab.id)\"\r\n          [attr.aria-controls]=\"'panel-' + tab.id\"\r\n          [disabled]=\"tab.disabled\"\r\n          [class.tabs-button--active]=\"isActive(tab.id)\"\r\n          [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'\"\r\n          [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n          [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n          class=\"tabs-button\"\r\n          (click)=\"setActiveTab(tab)\"\r\n          role=\"tab\">\r\n          <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [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\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [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>\r\n", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply flex gap-0 list-none m-0 px-0 py-0.5;}.tabs-item{@apply flex-shrink-0;}.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--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;}\n"] }]
+            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-0 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--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;background:#54578e12}.tabs-list--segmented{@apply grid grid-flow-col auto-cols-fr items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;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"] }]
         }], propDecorators: { list: [{
                 type: Input
             }], activeTabId: [{
                 type: Input
             }], disabled: [{
                 type: Input
+            }], orientation: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], colors: [{
+                type: Input
             }], change: [{
                 type: Output
             }] } });
@@ -8646,6 +8677,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
+class BkDropdown {
+    host;
+    /** Text shown on the trigger button. */
+    label = '';
+    /** Menu items (supports divider / disabled / children). */
+    items = [];
+    /** Black (dark) or white (light, bordered) — mirrors the segment-tab look. */
+    variant = 'black';
+    /** Trigger size. */
+    size = 'md';
+    /** Open on click or on hover. */
+    trigger = 'click';
+    /** One of 6 placements for the menu. */
+    placement = 'bottomLeft';
+    /** Show the caret (▾) on the trigger. Rotates when open. */
+    arrow = true;
+    /** Split button: a primary action + a separate caret that opens the menu. */
+    splitButton = false;
+    /** Currently selected item id — the matching item shows a tick. */
+    selectedId;
+    /** Disable the whole control. */
+    disabled = false;
+    /** Optional leading icon on the trigger. */
+    iconSrc;
+    /** Extra classes appended to the trigger button. */
+    customClass = '';
+    /** Emits when a (non-disabled) leaf item is chosen. */
+    select = new EventEmitter();
+    /** Emits the open/closed state whenever it changes. */
+    openChange = new EventEmitter();
+    /** Split button primary-action click. */
+    buttonClick = new EventEmitter();
+    open = false;
+    closeTimer = null;
+    constructor(host) {
+        this.host = host;
+    }
+    // ---- open/close ----------------------------------------------------------
+    toggle() {
+        if (this.disabled)
+            return;
+        this.setOpen(!this.open);
+    }
+    onPrimaryClick(event) {
+        if (this.disabled)
+            return;
+        this.buttonClick.emit(event);
+    }
+    selectItem(item, event) {
+        if (item.disabled)
+            return;
+        // Parents with children act as submenu toggles, not selections.
+        if (item.children?.length) {
+            event.stopPropagation();
+            return;
+        }
+        this.selectedId = item.id;
+        this.select.emit(item);
+        this.setOpen(false);
+    }
+    isSelected(item) {
+        return item.id != null && item.id === this.selectedId;
+    }
+    // Only scroll flat menus — a scroll container would clip cascading submenus
+    // (overflow-y:auto forces overflow-x to clip too).
+    get hasSubmenus() {
+        return this.items.some(i => !!i.children?.length);
+    }
+    setOpen(value) {
+        if (this.open === value)
+            return;
+        this.open = value;
+        this.openChange.emit(value);
+    }
+    // ---- hover trigger -------------------------------------------------------
+    onHoverEnter() {
+        if (this.trigger !== 'hover' || this.disabled)
+            return;
+        this.clearCloseTimer();
+        this.setOpen(true);
+    }
+    onHoverLeave() {
+        if (this.trigger !== 'hover')
+            return;
+        // small delay so moving across the gap to the menu doesn't close it
+        this.clearCloseTimer();
+        this.closeTimer = setTimeout(() => this.setOpen(false), 120);
+    }
+    // ---- cascading submenu flip ----------------------------------------------
+    /**
+     * When a parent item is hovered, decide whether its submenu should open to
+     * the right (default) or flip to the left if it would overflow the viewport.
+     */
+    onSubmenuEnter(event) {
+        const li = event.currentTarget;
+        const submenu = li.querySelector(':scope > .bk-dd-submenu');
+        if (!submenu)
+            return;
+        const parentRect = li.getBoundingClientRect();
+        const submenuWidth = submenu.offsetWidth || 160; // min-w-[10rem] fallback
+        const spaceOnRight = window.innerWidth - parentRect.right;
+        const flipLeft = spaceOnRight < submenuWidth + 8;
+        li.classList.toggle('bk-dd-submenu--flip', flipLeft);
+    }
+    clearCloseTimer() {
+        if (this.closeTimer) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
+    }
+    // ---- global listeners ----------------------------------------------------
+    onDocumentClick(event) {
+        if (this.open && !this.host.nativeElement.contains(event.target)) {
+            this.setOpen(false);
+        }
+    }
+    onEscape() {
+        if (this.open)
+            this.setOpen(false);
+    }
+    // ---- class helpers -------------------------------------------------------
+    get triggerClasses() {
+        return [
+            'bk-dd-trigger',
+            `bk-dd-trigger--${this.variant}`,
+            `bk-dd-trigger--${this.size}`,
+            this.customClass,
+        ].join(' ').trim();
+    }
+    get caretSizeClass() {
+        return this.size === 'sm' ? 'size-3' : this.size === 'lg' ? 'size-5' : 'size-4';
+    }
+    /** Position classes for the menu panel per placement. */
+    get menuPositionClass() {
+        switch (this.placement) {
+            case 'bottomLeft': return 'top-full left-0 mt-1';
+            case 'bottom': return 'top-full left-1/2 -translate-x-1/2 mt-1';
+            case 'bottomRight': return 'top-full right-0 mt-1';
+            case 'topLeft': return 'bottom-full left-0 mb-1';
+            case 'top': return 'bottom-full left-1/2 -translate-x-1/2 mb-1';
+            case 'topRight': return 'bottom-full right-0 mb-1';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDropdown, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    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: FormsModule }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDropdown, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-dropdown', imports: [FormsModule, 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"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], trigger: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }], arrow: [{
+                type: Input
+            }], splitButton: [{
+                type: Input
+            }], selectedId: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], iconSrc: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], select: [{
+                type: Output
+            }], openChange: [{
+                type: Output
+            }], buttonClick: [{
+                type: Output
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -8655,5 +8873,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkPagination, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
+export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkPagination, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
 //# sourceMappingURL=brickclay-org-ui.mjs.map