@brickclay-org/ui 0.1.72 → 0.1.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/brickclay-org-ui.mjs +84 -3
- package/fesm2022/brickclay-org-ui.mjs.map +1 -1
- package/index.d.ts +18 -2
- package/package.json +1 -1
- package/src/lib/menu/menu.css +21 -50
|
@@ -9563,15 +9563,36 @@ class BkMenu {
|
|
|
9563
9563
|
activeItemId = '';
|
|
9564
9564
|
/** Tint item icons: dark by default, white on the active (dark) row. */
|
|
9565
9565
|
tintIcons = true;
|
|
9566
|
+
/**
|
|
9567
|
+
* Optional max height for the menu (e.g. '320px', '60vh', or a number of px).
|
|
9568
|
+
* When set, the item list scrolls vertically once it exceeds this height.
|
|
9569
|
+
* Pop-up fly-outs are positioned `fixed`, so they still escape the scroll box.
|
|
9570
|
+
*/
|
|
9571
|
+
maxHeight = null;
|
|
9566
9572
|
activeItemIdChange = new EventEmitter();
|
|
9567
9573
|
itemClick = new EventEmitter();
|
|
9568
9574
|
/** Ids of currently expanded/opened parent nodes. */
|
|
9569
9575
|
openIds = new Set();
|
|
9576
|
+
/** Viewport coordinates for each open fixed-position fly-out, keyed by id. */
|
|
9577
|
+
popupPos = new Map();
|
|
9570
9578
|
constructor(host) {
|
|
9571
9579
|
this.host = host;
|
|
9572
9580
|
}
|
|
9573
9581
|
get isVertical() { return this.orientation === 'vertical'; }
|
|
9574
9582
|
get isPopup() { return this.submenuMode === 'popup'; }
|
|
9583
|
+
// CSS max-height value for the scroll container (accepts px number or string).
|
|
9584
|
+
get maxHeightStyle() {
|
|
9585
|
+
if (this.maxHeight == null)
|
|
9586
|
+
return null;
|
|
9587
|
+
return typeof this.maxHeight === 'number' ? `${this.maxHeight}px` : this.maxHeight;
|
|
9588
|
+
}
|
|
9589
|
+
// Fixed-position coordinates for an open fly-out (or null when not open/popup).
|
|
9590
|
+
popupTop(item) {
|
|
9591
|
+
return this.isPopup ? (this.popupPos.get(item.id)?.top ?? null) : null;
|
|
9592
|
+
}
|
|
9593
|
+
popupLeft(item) {
|
|
9594
|
+
return this.isPopup ? (this.popupPos.get(item.id)?.left ?? null) : null;
|
|
9595
|
+
}
|
|
9575
9596
|
hasChildren(item) {
|
|
9576
9597
|
return !!item.children && item.children.length > 0;
|
|
9577
9598
|
}
|
|
@@ -9615,7 +9636,7 @@ class BkMenu {
|
|
|
9615
9636
|
this.openIds.clear(); // dismiss pop-ups after picking a leaf
|
|
9616
9637
|
}
|
|
9617
9638
|
// Pop-up mode: open a parent's fly-out on hover (and close its siblings).
|
|
9618
|
-
onItemEnter(item, siblings) {
|
|
9639
|
+
onItemEnter(item, siblings, event, level) {
|
|
9619
9640
|
if (!this.isPopup || item.disabled || !this.hasChildren(item))
|
|
9620
9641
|
return;
|
|
9621
9642
|
for (const sibling of siblings) {
|
|
@@ -9623,6 +9644,49 @@ class BkMenu {
|
|
|
9623
9644
|
this.closeBranch(sibling);
|
|
9624
9645
|
}
|
|
9625
9646
|
this.openIds.add(item.id);
|
|
9647
|
+
const li = event.currentTarget;
|
|
9648
|
+
const trigger = li.querySelector(':scope > .bk-menu__button') ?? li;
|
|
9649
|
+
const rect = trigger.getBoundingClientRect();
|
|
9650
|
+
const flyRight = this.isVertical || level > 0;
|
|
9651
|
+
// First pass with an estimated size, then refine once the panel has rendered
|
|
9652
|
+
// so we can flip/clamp against the real viewport edges.
|
|
9653
|
+
this.popupPos.set(item.id, this.computePopupPos(rect, flyRight, null));
|
|
9654
|
+
requestAnimationFrame(() => {
|
|
9655
|
+
if (!this.openIds.has(item.id))
|
|
9656
|
+
return;
|
|
9657
|
+
const panel = li.querySelector(':scope > .bk-menu__submenu');
|
|
9658
|
+
if (!panel)
|
|
9659
|
+
return;
|
|
9660
|
+
this.popupPos.set(item.id, this.computePopupPos(rect, flyRight, { w: panel.offsetWidth, h: panel.offsetHeight }));
|
|
9661
|
+
});
|
|
9662
|
+
}
|
|
9663
|
+
// Compute a fixed-position for a fly-out, flipping/clamping to stay on-screen.
|
|
9664
|
+
computePopupPos(rect, flyRight, size) {
|
|
9665
|
+
const gap = 4;
|
|
9666
|
+
const pad = 8;
|
|
9667
|
+
const vw = window.innerWidth;
|
|
9668
|
+
const vh = window.innerHeight;
|
|
9669
|
+
const w = size?.w ?? 220;
|
|
9670
|
+
const h = size?.h ?? 0;
|
|
9671
|
+
let left;
|
|
9672
|
+
let top;
|
|
9673
|
+
if (flyRight) {
|
|
9674
|
+
left = rect.right + gap;
|
|
9675
|
+
if (left + w > vw - pad)
|
|
9676
|
+
left = rect.left - w - gap; // flip to the left
|
|
9677
|
+
top = rect.top;
|
|
9678
|
+
}
|
|
9679
|
+
else {
|
|
9680
|
+
top = rect.bottom + gap;
|
|
9681
|
+
left = rect.left;
|
|
9682
|
+
if (left + w > vw - pad)
|
|
9683
|
+
left = Math.max(pad, vw - pad - w);
|
|
9684
|
+
}
|
|
9685
|
+
if (left < pad)
|
|
9686
|
+
left = pad;
|
|
9687
|
+
if (h && top + h > vh - pad)
|
|
9688
|
+
top = Math.max(pad, vh - pad - h);
|
|
9689
|
+
return { top, left };
|
|
9626
9690
|
}
|
|
9627
9691
|
// Pop-up mode: close the fly-out (and any nested ones) when the pointer leaves.
|
|
9628
9692
|
onItemLeave(item) {
|
|
@@ -9646,20 +9710,29 @@ class BkMenu {
|
|
|
9646
9710
|
// Remove an item and all of its descendants from the open set.
|
|
9647
9711
|
closeBranch(item) {
|
|
9648
9712
|
this.openIds.delete(item.id);
|
|
9713
|
+
this.popupPos.delete(item.id);
|
|
9649
9714
|
item.children?.forEach(child => this.closeBranch(child));
|
|
9650
9715
|
}
|
|
9651
9716
|
// Pop-up mode: click outside the menu closes any open fly-outs.
|
|
9652
9717
|
onDocumentClick(event) {
|
|
9653
9718
|
if (this.isPopup && !this.host.nativeElement.contains(event.target)) {
|
|
9654
9719
|
this.openIds.clear();
|
|
9720
|
+
this.popupPos.clear();
|
|
9721
|
+
}
|
|
9722
|
+
}
|
|
9723
|
+
// Positions become stale on scroll/resize — close fly-outs to avoid drift.
|
|
9724
|
+
onViewportChange() {
|
|
9725
|
+
if (this.isPopup && this.openIds.size) {
|
|
9726
|
+
this.openIds.clear();
|
|
9727
|
+
this.popupPos.clear();
|
|
9655
9728
|
}
|
|
9656
9729
|
}
|
|
9657
9730
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkMenu, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9658
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkMenu, isStandalone: true, selector: "bk-menu", inputs: { items: "items", orientation: "orientation", submenuMode: "submenuMode", singleOpen: "singleOpen", activeItemId: "activeItemId", tintIcons: "tintIcons" }, outputs: { activeItemIdChange: "activeItemIdChange", itemClick: "itemClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<nav\r\n class=\"bk-menu\"\r\n [class.bk-menu--vertical]=\"isVertical\"\r\n [class.bk-menu--horizontal]=\"!isVertical\"\r\n [class.bk-menu--popup]=\"isPopup\"\r\n [class.bk-menu--tint]=\"tintIcons\"\r\n role=\"menubar\"\r\n [attr.aria-orientation]=\"orientation\">\r\n <ul
|
|
9731
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkMenu, isStandalone: true, selector: "bk-menu", inputs: { items: "items", orientation: "orientation", submenuMode: "submenuMode", singleOpen: "singleOpen", activeItemId: "activeItemId", tintIcons: "tintIcons", maxHeight: "maxHeight" }, outputs: { activeItemIdChange: "activeItemIdChange", itemClick: "itemClick" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onViewportChange()", "window:resize": "onViewportChange()" } }, ngImport: i0, template: "<nav\r\n class=\"bk-menu\"\r\n [class.bk-menu--vertical]=\"isVertical\"\r\n [class.bk-menu--horizontal]=\"!isVertical\"\r\n [class.bk-menu--popup]=\"isPopup\"\r\n [class.bk-menu--tint]=\"tintIcons\"\r\n role=\"menubar\"\r\n [attr.aria-orientation]=\"orientation\">\r\n <ul\r\n class=\"bk-menu__list\"\r\n [class.bk-menu__list--scroll]=\"maxHeightStyle\"\r\n [style.maxHeight]=\"maxHeightStyle\">\r\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: items, level: 0 }\"></ng-container>\r\n </ul>\r\n</nav>\r\n\r\n<!-- Recursive item renderer. Context: $implicit = items at this level, level = depth. -->\r\n<ng-template #itemTpl let-items let-level=\"level\">\r\n @for (item of items; track item.id) {\r\n <li\r\n class=\"bk-menu__item\"\r\n [class.bk-menu__item--has-children]=\"hasChildren(item)\"\r\n [class.bk-menu__item--open]=\"isOpen(item)\"\r\n (mouseenter)=\"onItemEnter(item, items, $event, level)\"\r\n (mouseleave)=\"onItemLeave(item)\"\r\n role=\"none\">\r\n <button\r\n type=\"button\"\r\n class=\"bk-menu__button\"\r\n [class.bk-menu__button--active]=\"isHighlighted(item)\"\r\n [class.bk-menu__button--disabled]=\"item.disabled\"\r\n [class.bk-menu__button--parent]=\"hasChildren(item)\"\r\n [style.paddingLeft.px]=\"inlineIndent(level)\"\r\n [disabled]=\"item.disabled\"\r\n [attr.aria-haspopup]=\"hasChildren(item) ? 'true' : null\"\r\n [attr.aria-expanded]=\"hasChildren(item) ? isOpen(item) : null\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item, items, $event)\">\r\n @if (item.icon) {\r\n <img class=\"bk-menu__icon\" [attr.src]=\"item.icon\" [alt]=\"item.iconAlt || item.label\" />\r\n }\r\n <span class=\"bk-menu__label\">{{ item.label }}</span>\r\n @if (hasChildren(item)) {\r\n <svg\r\n class=\"bk-menu__chevron\"\r\n [class.bk-menu__chevron--open]=\"!isPopup && isOpen(item)\"\r\n [class.bk-menu__chevron--right]=\"isPopup && (isVertical || level > 0)\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"none\"\r\n aria-hidden=\"true\">\r\n <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n }\r\n </button>\r\n\r\n @if (hasChildren(item)) {\r\n <ul\r\n class=\"bk-menu__submenu\"\r\n [class.bk-menu__submenu--inline]=\"!isPopup\"\r\n [class.bk-menu__submenu--popup]=\"isPopup\"\r\n [class.bk-menu__submenu--open]=\"isOpen(item)\"\r\n [class.bk-menu__submenu--popup-right]=\"isPopup && (isVertical || level > 0)\"\r\n [class.bk-menu__submenu--popup-down]=\"isPopup && !isVertical && level === 0\"\r\n [style.top.px]=\"popupTop(item)\"\r\n [style.left.px]=\"popupLeft(item)\"\r\n role=\"menu\">\r\n <ng-container\r\n *ngTemplateOutlet=\"itemTpl; context: { $implicit: item.children, level: level + 1 }\">\r\n </ng-container>\r\n </ul>\r\n }\r\n </li>\r\n }\r\n</ng-template>\r\n", styles: [".bk-menu{--menu-bg: #ffffff;--menu-text: #141414;--menu-subtext: #6b7080;--menu-hover-bg: #edeef0;--menu-hover-text: #141414;--menu-active-bg: #141414;--menu-active-text: #ffffff;--menu-border: #efeff1;--menu-shadow: 0 7px 18px 0 rgba(0, 0, 0, .09);--menu-radius: 8px;--menu-disabled: .5;display:block;width:100%;max-width:100%;font-size:.875rem;line-height:1.25rem;font-weight:500;letter-spacing:-.28px;background:var(--menu-bg);color:var(--menu-text);border:1px solid var(--menu-border);border-radius:var(--menu-radius);overflow:hidden}.bk-menu__list,.bk-menu__submenu{list-style:none;margin:0;padding:0}.bk-menu__list--scroll{overflow:auto}.bk-menu--horizontal>.bk-menu__list{display:flex;flex-direction:row;align-items:stretch;overflow-x:auto}.bk-menu__item{position:relative}.bk-menu__button{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;margin:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;white-space:nowrap;border-radius:6px;transition:background .1s ease,color .1s ease}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{width:auto}.bk-menu__button:hover:not(:disabled):not(.bk-menu__button--active){background:var(--menu-hover-bg);color:var(--menu-hover-text)}.bk-menu__button--active{background:var(--menu-active-bg);color:var(--menu-active-text)}.bk-menu__button--disabled,.bk-menu__button:disabled{opacity:var(--menu-disabled);cursor:not-allowed}.bk-menu__submenu .bk-menu__button{color:var(--menu-subtext);font-weight:400}.bk-menu__submenu .bk-menu__button--active{color:var(--menu-active-text)}.bk-menu__icon{width:16px;height:16px;flex-shrink:0;object-fit:contain}.bk-menu--tint .bk-menu__icon{filter:brightness(0) saturate(0)}.bk-menu--tint .bk-menu__button--active .bk-menu__icon{filter:brightness(0) invert(1)}.bk-menu__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button>.bk-menu__label{flex:0 0 auto;overflow:visible}.bk-menu__chevron{flex-shrink:0;transition:transform .18s ease;opacity:.8}.bk-menu__chevron--open{transform:rotate(180deg)}.bk-menu__chevron--right{transform:rotate(-90deg)}.bk-menu__submenu--inline{overflow:hidden;max-height:0;transition:max-height .2s ease}.bk-menu__submenu--inline.bk-menu__submenu--open{max-height:1000px}.bk-menu__submenu--popup{position:fixed;z-index:1000;min-width:200px;max-width:280px;max-height:calc(100vh - 16px);overflow-y:auto;background:var(--menu-bg);border:1px solid var(--menu-border);border-radius:12px;box-shadow:var(--menu-shadow);padding:4px;display:none}.bk-menu__submenu--popup.bk-menu__submenu--open{display:block}.bk-menu__submenu--popup-right:before{content:\"\";position:absolute;top:0;left:-6px;width:6px;height:100%}.bk-menu__submenu--popup-down:before{content:\"\";position:absolute;top:-6px;left:0;width:100%;height:6px}@media (max-width: 640px){.bk-menu--horizontal>.bk-menu__list{flex-direction:column;overflow-x:visible}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
9659
9732
|
}
|
|
9660
9733
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkMenu, decorators: [{
|
|
9661
9734
|
type: Component,
|
|
9662
|
-
args: [{ selector: 'bk-menu', imports: [CommonModule], template: "<nav\r\n class=\"bk-menu\"\r\n [class.bk-menu--vertical]=\"isVertical\"\r\n [class.bk-menu--horizontal]=\"!isVertical\"\r\n [class.bk-menu--popup]=\"isPopup\"\r\n [class.bk-menu--tint]=\"tintIcons\"\r\n role=\"menubar\"\r\n [attr.aria-orientation]=\"orientation\">\r\n <ul
|
|
9735
|
+
args: [{ selector: 'bk-menu', imports: [CommonModule], template: "<nav\r\n class=\"bk-menu\"\r\n [class.bk-menu--vertical]=\"isVertical\"\r\n [class.bk-menu--horizontal]=\"!isVertical\"\r\n [class.bk-menu--popup]=\"isPopup\"\r\n [class.bk-menu--tint]=\"tintIcons\"\r\n role=\"menubar\"\r\n [attr.aria-orientation]=\"orientation\">\r\n <ul\r\n class=\"bk-menu__list\"\r\n [class.bk-menu__list--scroll]=\"maxHeightStyle\"\r\n [style.maxHeight]=\"maxHeightStyle\">\r\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: items, level: 0 }\"></ng-container>\r\n </ul>\r\n</nav>\r\n\r\n<!-- Recursive item renderer. Context: $implicit = items at this level, level = depth. -->\r\n<ng-template #itemTpl let-items let-level=\"level\">\r\n @for (item of items; track item.id) {\r\n <li\r\n class=\"bk-menu__item\"\r\n [class.bk-menu__item--has-children]=\"hasChildren(item)\"\r\n [class.bk-menu__item--open]=\"isOpen(item)\"\r\n (mouseenter)=\"onItemEnter(item, items, $event, level)\"\r\n (mouseleave)=\"onItemLeave(item)\"\r\n role=\"none\">\r\n <button\r\n type=\"button\"\r\n class=\"bk-menu__button\"\r\n [class.bk-menu__button--active]=\"isHighlighted(item)\"\r\n [class.bk-menu__button--disabled]=\"item.disabled\"\r\n [class.bk-menu__button--parent]=\"hasChildren(item)\"\r\n [style.paddingLeft.px]=\"inlineIndent(level)\"\r\n [disabled]=\"item.disabled\"\r\n [attr.aria-haspopup]=\"hasChildren(item) ? 'true' : null\"\r\n [attr.aria-expanded]=\"hasChildren(item) ? isOpen(item) : null\"\r\n role=\"menuitem\"\r\n (click)=\"onItemClick(item, items, $event)\">\r\n @if (item.icon) {\r\n <img class=\"bk-menu__icon\" [attr.src]=\"item.icon\" [alt]=\"item.iconAlt || item.label\" />\r\n }\r\n <span class=\"bk-menu__label\">{{ item.label }}</span>\r\n @if (hasChildren(item)) {\r\n <svg\r\n class=\"bk-menu__chevron\"\r\n [class.bk-menu__chevron--open]=\"!isPopup && isOpen(item)\"\r\n [class.bk-menu__chevron--right]=\"isPopup && (isVertical || level > 0)\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"none\"\r\n aria-hidden=\"true\">\r\n <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n }\r\n </button>\r\n\r\n @if (hasChildren(item)) {\r\n <ul\r\n class=\"bk-menu__submenu\"\r\n [class.bk-menu__submenu--inline]=\"!isPopup\"\r\n [class.bk-menu__submenu--popup]=\"isPopup\"\r\n [class.bk-menu__submenu--open]=\"isOpen(item)\"\r\n [class.bk-menu__submenu--popup-right]=\"isPopup && (isVertical || level > 0)\"\r\n [class.bk-menu__submenu--popup-down]=\"isPopup && !isVertical && level === 0\"\r\n [style.top.px]=\"popupTop(item)\"\r\n [style.left.px]=\"popupLeft(item)\"\r\n role=\"menu\">\r\n <ng-container\r\n *ngTemplateOutlet=\"itemTpl; context: { $implicit: item.children, level: level + 1 }\">\r\n </ng-container>\r\n </ul>\r\n }\r\n </li>\r\n }\r\n</ng-template>\r\n", styles: [".bk-menu{--menu-bg: #ffffff;--menu-text: #141414;--menu-subtext: #6b7080;--menu-hover-bg: #edeef0;--menu-hover-text: #141414;--menu-active-bg: #141414;--menu-active-text: #ffffff;--menu-border: #efeff1;--menu-shadow: 0 7px 18px 0 rgba(0, 0, 0, .09);--menu-radius: 8px;--menu-disabled: .5;display:block;width:100%;max-width:100%;font-size:.875rem;line-height:1.25rem;font-weight:500;letter-spacing:-.28px;background:var(--menu-bg);color:var(--menu-text);border:1px solid var(--menu-border);border-radius:var(--menu-radius);overflow:hidden}.bk-menu__list,.bk-menu__submenu{list-style:none;margin:0;padding:0}.bk-menu__list--scroll{overflow:auto}.bk-menu--horizontal>.bk-menu__list{display:flex;flex-direction:row;align-items:stretch;overflow-x:auto}.bk-menu__item{position:relative}.bk-menu__button{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;margin:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;white-space:nowrap;border-radius:6px;transition:background .1s ease,color .1s ease}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{width:auto}.bk-menu__button:hover:not(:disabled):not(.bk-menu__button--active){background:var(--menu-hover-bg);color:var(--menu-hover-text)}.bk-menu__button--active{background:var(--menu-active-bg);color:var(--menu-active-text)}.bk-menu__button--disabled,.bk-menu__button:disabled{opacity:var(--menu-disabled);cursor:not-allowed}.bk-menu__submenu .bk-menu__button{color:var(--menu-subtext);font-weight:400}.bk-menu__submenu .bk-menu__button--active{color:var(--menu-active-text)}.bk-menu__icon{width:16px;height:16px;flex-shrink:0;object-fit:contain}.bk-menu--tint .bk-menu__icon{filter:brightness(0) saturate(0)}.bk-menu--tint .bk-menu__button--active .bk-menu__icon{filter:brightness(0) invert(1)}.bk-menu__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button>.bk-menu__label{flex:0 0 auto;overflow:visible}.bk-menu__chevron{flex-shrink:0;transition:transform .18s ease;opacity:.8}.bk-menu__chevron--open{transform:rotate(180deg)}.bk-menu__chevron--right{transform:rotate(-90deg)}.bk-menu__submenu--inline{overflow:hidden;max-height:0;transition:max-height .2s ease}.bk-menu__submenu--inline.bk-menu__submenu--open{max-height:1000px}.bk-menu__submenu--popup{position:fixed;z-index:1000;min-width:200px;max-width:280px;max-height:calc(100vh - 16px);overflow-y:auto;background:var(--menu-bg);border:1px solid var(--menu-border);border-radius:12px;box-shadow:var(--menu-shadow);padding:4px;display:none}.bk-menu__submenu--popup.bk-menu__submenu--open{display:block}.bk-menu__submenu--popup-right:before{content:\"\";position:absolute;top:0;left:-6px;width:6px;height:100%}.bk-menu__submenu--popup-down:before{content:\"\";position:absolute;top:-6px;left:0;width:100%;height:6px}@media (max-width: 640px){.bk-menu--horizontal>.bk-menu__list{flex-direction:column;overflow-x:visible}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{width:100%}}\n"] }]
|
|
9663
9736
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{
|
|
9664
9737
|
type: Input
|
|
9665
9738
|
}], orientation: [{
|
|
@@ -9672,6 +9745,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
9672
9745
|
type: Input
|
|
9673
9746
|
}], tintIcons: [{
|
|
9674
9747
|
type: Input
|
|
9748
|
+
}], maxHeight: [{
|
|
9749
|
+
type: Input
|
|
9675
9750
|
}], activeItemIdChange: [{
|
|
9676
9751
|
type: Output
|
|
9677
9752
|
}], itemClick: [{
|
|
@@ -9679,6 +9754,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
9679
9754
|
}], onDocumentClick: [{
|
|
9680
9755
|
type: HostListener,
|
|
9681
9756
|
args: ['document:click', ['$event']]
|
|
9757
|
+
}], onViewportChange: [{
|
|
9758
|
+
type: HostListener,
|
|
9759
|
+
args: ['window:scroll']
|
|
9760
|
+
}, {
|
|
9761
|
+
type: HostListener,
|
|
9762
|
+
args: ['window:resize']
|
|
9682
9763
|
}] } });
|
|
9683
9764
|
|
|
9684
9765
|
/*
|