@sula-tech/webcomponents 0.23.1 → 0.24.0

package/dist/collection/components/sula-workbench-menu/sula-workbench-menu.js

@@ -0,0 +1,996 @@
+import { Host, h } from "@stencil/core";
+import { SulaMenuDensity, SulaMenuLabelOverflow } from "../sula-menu/model/sula-menu.model";
+/**
+ * Navigation menu that combines an inline expandable tree with a drill-down panel.
+ * Levels above `drilldownLevel` expand in place, as in `sula-menu`. Items at or below
+ * that level with children open a single-level panel with a breadcrumb trail.
+ *
+ * @part shell - Main visual container of the menu.
+ * @part title - Menu title, or the current level title while drilled in.
+ * @part main-item-label - Label of each top-level item.
+ * @part item-label - Label of each item inside the drill-down panel.
+ * @part toggle-label - Label of the collapse/expand control.
+ * @slot profile-content - Extra content rendered inside the profile popover.
+ * @part profile-popover - Popover opened from the user area.
+ * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 256px.
+ * @cssprop --sula-menu-collapsed-width - Width of the collapsed menu. Defaults to 88px.
+ */
+export class SulaWorkbenchMenu {
+    constructor() {
+        /**
+         * Menu title
+         */
+        this.menuTitle = '';
+        /**
+         * Menu image
+         */
+        this.image = '';
+        /**
+         * Menu width in expanded state. Use a CSS length that does not depend on the
+         * host width, for example: 256px, 20rem or clamp(16rem, 25vw, 24rem).
+         */
+        this.width = '';
+        /**
+         * Density applied to menu items.
+         */
+        this.density = SulaMenuDensity.Default;
+        /**
+         * Overflow behavior for item labels.
+         */
+        this.labelOverflow = SulaMenuLabelOverflow.Wrap;
+        /**
+         * Depth (1-based) from which items with children open a drill-down panel instead of expanding in place.
+         * With the default of 3, the first two levels expand inline and deeper branches drill down.
+         */
+        this.drilldownLevel = 3;
+        /**
+         * Menu items. Each item may use `icon` (icon font class) or `image` (URL or data URI of an image or SVG).
+         */
+        this.items = [];
+        /**
+         * Icon used for items without `icon` or `image`. Use an empty string to show no icon.
+         */
+        this.defaultIcon = 'ph ph-dot-outline';
+        /**
+         * Options of the profile popover. Use `divider` for a separator and `hasSwitch` + `active` for a toggle row.
+         */
+        this.profileItems = [];
+        this.collapsed = false;
+        this.previewExpanded = false;
+        this.stack = [];
+        this.direction = 'forward';
+        this.selectedPath = [];
+        this.crumbMenu = { open: false, left: 0, top: 0 };
+        this.profileOpen = false;
+        this.hovering = false;
+    }
+    get normalizedWidth() {
+        var _a;
+        const value = (_a = this.width) === null || _a === void 0 ? void 0 : _a.trim();
+        return value ? value : undefined;
+    }
+    get hostStyleVariables() {
+        return Object.assign({}, (this.normalizedWidth ? { '--sula-menu-width': this.normalizedWidth } : {}));
+    }
+    componentWillLoad() {
+        this.syncWithItems(this.items);
+    }
+    syncWithItems(items) {
+        const nextSelected = this.findSelectedIds(items);
+        if (nextSelected) {
+            this.selectedPath = nextSelected;
+        }
+        else if (!this.selectedPath.length || !this.isStillSelectable(items, this.selectedPath)) {
+            this.selectedPath = [];
+        }
+        this.stack = this.rebuildStack(items, this.stack);
+    }
+    componentDidRender() {
+        this.positionProfile();
+    }
+    onDocumentClick(event) {
+        const path = event.composedPath();
+        if (this.profileOpen && !path.includes(this.profileEl) && !path.includes(this.userInfoEl))
+            this.closeProfile();
+        if (!this.crumbMenu.open)
+            return;
+        if (path.includes(this.crumbEllipsisEl) || path.includes(this.crumbDropdownEl))
+            return;
+        this.closeCrumbMenu();
+    }
+    onDocumentKeydown(event) {
+        var _a;
+        if (event.key !== 'Escape')
+            return;
+        this.closeCrumbMenu();
+        if (this.profileOpen) {
+            this.closeProfile();
+            (_a = this.userInfoEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    onWindowResize() {
+        this.positionProfile();
+    }
+    getVisibleItems(items) {
+        var _a;
+        return (_a = items === null || items === void 0 ? void 0 : items.filter(item => !item.hidden)) !== null && _a !== void 0 ? _a : [];
+    }
+    hasVisibleChildren(item) {
+        return this.getVisibleItems(item.children).length > 0;
+    }
+    isDrilled() {
+        return this.stack.length >= this.drilldownLevel;
+    }
+    findSelectedIds(items, trail = []) {
+        for (const item of this.getVisibleItems(items)) {
+            if (!this.hasVisibleChildren(item)) {
+                if (item.selected)
+                    return [...trail, item.id];
+                continue;
+            }
+            const nested = this.findSelectedIds(item.children, [...trail, item.id]);
+            if (nested)
+                return nested;
+        }
+        return undefined;
+    }
+    isStillSelectable(items, path) {
+        const found = this.findPath(items, path[path.length - 1]);
+        return !!found && !this.hasVisibleChildren(found[found.length - 1]);
+    }
+    toggleExpanded(items, id) {
+        return items.map(item => {
+            if (item.id === id)
+                return Object.assign(Object.assign({}, item), { expanded: !item.expanded });
+            if (!item.children)
+                return item;
+            return Object.assign(Object.assign({}, item), { children: this.toggleExpanded(item.children, id) });
+        });
+    }
+    findPath(items, id, trail = []) {
+        var _a;
+        for (const item of this.getVisibleItems(items)) {
+            const next = [...trail, item];
+            if (item.id === id)
+                return next;
+            const nested = this.findPath((_a = item.children) !== null && _a !== void 0 ? _a : [], id, next);
+            if (nested)
+                return nested;
+        }
+        return undefined;
+    }
+    rebuildStack(items, previous) {
+        var _a;
+        const next = [];
+        let level = items;
+        for (const ancestor of previous) {
+            const match = this.getVisibleItems(level).find(item => item.id === ancestor.id);
+            if (!match)
+                break;
+            next.push(match);
+            level = (_a = match.children) !== null && _a !== void 0 ? _a : [];
+        }
+        return next;
+    }
+    isActive(item, branch) {
+        if (branch)
+            return this.selectedPath.includes(item.id);
+        return this.selectedPath.length > 0 && this.selectedPath[this.selectedPath.length - 1] === item.id;
+    }
+    isFaded(item, active) {
+        return !!item.disabled && !active;
+    }
+    emitLevel() {
+        this.levelChanged.emit(this.stack.map(item => item.id));
+    }
+    toggleInline(id) {
+        this.items = this.toggleExpanded(this.items, id);
+    }
+    enterDrill(item) {
+        var _a;
+        const path = (_a = this.findPath(this.items, item.id)) !== null && _a !== void 0 ? _a : [item];
+        this.direction = 'forward';
+        this.stack = path;
+        this.closeCrumbMenu();
+        this.emitLevel();
+    }
+    markSelected(items, id) {
+        return items.map(item => (Object.assign(Object.assign(Object.assign({}, item), { selected: item.id === id }), (item.children ? { children: this.markSelected(item.children, id) } : {}))));
+    }
+    // Selection lives on the items (like `expanded`), so re-assigning items when a branch is
+    // toggled keeps the user's choice instead of falling back to the initially selected item.
+    selectItem(item) {
+        var _a;
+        const path = (_a = this.findPath(this.items, item.id)) !== null && _a !== void 0 ? _a : [item];
+        this.items = this.markSelected(this.items, item.id);
+        this.selectedPath = path.map(p => p.id);
+        this.itemSelected.emit(item);
+    }
+    handleRowClick(item, depth) {
+        if (item.disabled)
+            return;
+        this.itemClicked.emit(item);
+        if (this.hasVisibleChildren(item)) {
+            if (depth < this.drilldownLevel) {
+                this.toggleInline(item.id);
+            }
+            else {
+                this.enterDrill(item);
+            }
+            return;
+        }
+        this.selectItem(item);
+    }
+    goToDepth(index) {
+        this.direction = 'back';
+        this.stack = index < 0 ? [] : this.stack.slice(0, index + 1);
+        this.closeCrumbMenu();
+        this.emitLevel();
+    }
+    toggleCrumbMenu(event) {
+        if (this.crumbMenu.open) {
+            this.closeCrumbMenu();
+            return;
+        }
+        const button = event.currentTarget;
+        this.crumbMenu = {
+            open: true,
+            left: button.offsetLeft,
+            top: button.offsetTop + button.offsetHeight + 6,
+        };
+    }
+    closeCrumbMenu() {
+        if (this.crumbMenu.open)
+            this.crumbMenu = Object.assign(Object.assign({}, this.crumbMenu), { open: false });
+    }
+    toggleMenu() {
+        this.closeProfile();
+        if (this.collapsed) {
+            this.collapsed = false;
+            this.previewExpanded = false;
+            this.menuToggled.emit(true);
+            return;
+        }
+        this.collapsed = true;
+        this.menuToggled.emit(false);
+        this.previewExpanded = false;
+    }
+    handleMenuMouseEnter() {
+        this.hovering = true;
+        if (this.collapsed)
+            this.previewExpanded = true;
+    }
+    // While the popover is open the preview stays expanded, so the popover keeps its anchor.
+    handleMenuMouseLeave() {
+        this.hovering = false;
+        if (this.collapsed && !this.profileOpen)
+            this.previewExpanded = false;
+    }
+    toggleProfile() {
+        if (this.profileOpen) {
+            this.closeProfile();
+            return;
+        }
+        if (this.profileClicked.emit(this.user).defaultPrevented)
+            return;
+        this.profileOpen = true;
+        requestAnimationFrame(() => { var _a; return (_a = this.profileEl) === null || _a === void 0 ? void 0 : _a.focus(); });
+    }
+    closeProfile() {
+        if (!this.profileOpen)
+            return;
+        this.profileOpen = false;
+        if (this.collapsed && !this.hovering)
+            this.previewExpanded = false;
+    }
+    // Fixed position, so ancestors with overflow hidden do not clip the popover.
+    positionProfile() {
+        if (!this.profileOpen || !this.profileEl || !this.userInfoEl || !this.shellEl)
+            return;
+        const gap = 8;
+        const inset = 12;
+        const anchor = this.userInfoEl.getBoundingClientRect();
+        const shell = this.shellEl.getBoundingClientRect();
+        const style = this.profileEl.style;
+        if (!this.collapsed || this.previewExpanded) {
+            style.left = `${shell.left + inset}px`;
+            style.width = `${shell.width - inset * 2}px`;
+            style.bottom = `${window.innerHeight - anchor.top + gap}px`;
+            return;
+        }
+        style.left = `${shell.right + gap}px`;
+        style.width = '';
+        style.bottom = `${window.innerHeight - anchor.bottom}px`;
+    }
+    // Inner events are composed; stopping them avoids clashing with this menu's own itemClicked.
+    handleProfileItemClicked(event) {
+        event.stopPropagation();
+        this.closeProfile();
+        this.profileItemClicked.emit(event.detail);
+    }
+    handleProfileSwitchChanged(event) {
+        event.stopPropagation();
+        const { item } = event.detail;
+        this.profileItems = this.profileItems.map(current => (current.id === item.id ? item : current));
+        this.profileSwitchChanged.emit(event.detail);
+    }
+    renderProfilePopover(expandedView) {
+        return (h("div", { part: "profile-popover", role: "dialog", "aria-label": `Perfil de ${this.user.name}`, "aria-hidden": String(!this.profileOpen), tabIndex: -1, ref: el => (this.profileEl = el), class: {
+                'profile-popover': true,
+                'profile-popover--open': this.profileOpen,
+                'profile-popover--side': !expandedView,
+            } }, h("sula-profile-menu", { user: this.user, items: this.profileItems, onItemClicked: event => this.handleProfileItemClicked(event), onSwitchChanged: event => this.handleProfileSwitchChanged(event) }, h("slot", { name: "profile-content" }))));
+    }
+    isValidIcon(icon) {
+        return !!icon && /ph-[a-z]/.test(icon);
+    }
+    isSvg(image) {
+        return /^data:image\/svg\+xml/i.test(image) || /\.svg(\?|#|$)/i.test(image);
+    }
+    iconOf(item) {
+        return this.isValidIcon(item.icon) ? item.icon : this.defaultIcon;
+    }
+    hasIcon(item) {
+        return !!item.image || this.isValidIcon(this.iconOf(item));
+    }
+    renderItemIcon(item, customClass, size, faded = false) {
+        if (!this.hasIcon(item))
+            return null;
+        if (item.image && this.isSvg(item.image)) {
+            // SVGs are painted with currentColor through a mask, so they follow the same state colors as the icon font.
+            return (h("span", { class: `menu-item-image menu-item-image--mask menu-item-image--${size} ${customClass}`, style: { '--menu-item-image': `url("${item.image.replace(/"/g, '%22')}")` }, "aria-hidden": "true" }));
+        }
+        if (item.image) {
+            return (h("img", { class: { 'menu-item-image': true, [`menu-item-image--${size}`]: true, 'is-faded': faded }, src: item.image, alt: "" }));
+        }
+        return h("sula-icon", { icon: this.iconOf(item), customClass: customClass });
+    }
+    getInitials(name) {
+        return name
+            .split(' ')
+            .filter(Boolean)
+            .slice(0, 2)
+            .map(part => part[0].toUpperCase())
+            .join('');
+    }
+    renderUserInfo(expandedView) {
+        const user = this.user;
+        return (h("button", { type: "button", class: {
+                'user-info flex min-w-0 cursor-pointer items-center rounded-xs p-8 text-left hover:bg-states-empty-bg-hover': true,
+                'user-info--active bg-states-empty-bg-hover': this.profileOpen,
+                'w-full': expandedView,
+            }, title: `Ver perfil de ${user.name}`, "aria-label": `Ver perfil de ${user.name}`, "aria-haspopup": "dialog", "aria-expanded": String(this.profileOpen), ref: el => (this.userInfoEl = el), onClick: () => this.toggleProfile() }, h("span", { class: "user-avatar flex h-9 w-9 flex-none items-center justify-center overflow-hidden rounded-full bg-brand-primary text-sm font-semibold text-negative-negative-1" }, user.photo ? h("img", { src: user.photo, alt: user.name }) : this.getInitials(user.name)), h("span", { "aria-hidden": !expandedView, class: {
+                'user-copy': true,
+                'ml-8': true,
+                'user-copy--visible': expandedView,
+                'user-copy--hidden': !expandedView,
+            } }, h("span", { part: "user-name", class: "user-name truncate text-sm font-semibold text-text-primary" }, user.name), user.email && h("span", { part: "user-email", class: "user-email truncate text-xs text-text-secondary" }, user.email))));
+    }
+    getIconClass(active, faded, size) {
+        if (faded)
+            return `text-icon-disabled ${size}`;
+        if (active)
+            return `text-brand-primary ${size}`;
+        return `text-icon-primary ${size}`;
+    }
+    renderCollapseButton() {
+        const label = this.collapsed ? 'Expandir menu' : 'Recolher menu';
+        return (h("button", { type: "button", class: "menu-toggle flex flex-none items-center justify-center", title: label, "aria-label": label, "aria-expanded": String(!this.collapsed), onClick: () => this.toggleMenu() }, h("sula-icon", { icon: `ph-bold ph-caret-${this.collapsed ? 'right' : 'left'}`, customClass: "text-lg" })));
+    }
+    renderRootHeader(expandedView) {
+        return (h("div", { class: {
+                'menu-header flex items-center': true,
+                'mb-40': expandedView,
+                'mb-24 flex-col justify-center px-0': !expandedView,
+            } }, this.image && (h("div", { class: { 'menu-brand-image max-h-10 max-w-10 overflow-hidden': true, 'mr-6': expandedView } }, h("img", { src: this.image, alt: this.menuTitle }))), h("div", { "aria-hidden": !expandedView, title: expandedView ? this.menuTitle : undefined, class: {
+                'menu-title menu-copy': true,
+                'menu-copy--visible': expandedView,
+                'menu-copy--hidden': !expandedView,
+            } }, h("h1", { part: "title", class: "truncate text-2xl font-bold leading-7 text-text-secondary" }, this.menuTitle)), this.renderCollapseButton()));
+    }
+    renderTrail(ancestors) {
+        const hasHidden = ancestors.length > 2;
+        const visible = hasHidden ? ancestors.slice(-2) : ancestors;
+        const crumbs = [];
+        if (hasHidden) {
+            crumbs.push(h("button", { key: "ellipsis", type: "button", class: "crumb-btn crumb-btn--ellipsis", "aria-haspopup": "true", "aria-expanded": String(this.crumbMenu.open), title: `${ancestors.length - 2} nível(is) anterior(es)`, ref: el => (this.crumbEllipsisEl = el), onClick: event => this.toggleCrumbMenu(event) }, h("sula-icon", { icon: "ph-bold ph-dots-three", customClass: "text-base text-text-secondary" })));
+        }
+        visible.forEach(ancestor => {
+            crumbs.push(h("button", { key: ancestor.id, type: "button", class: "crumb-btn", title: ancestor.label, onClick: () => this.goToDepth(this.stack.indexOf(ancestor)) }, ancestor.label));
+        });
+        const nodes = [];
+        crumbs.forEach((crumb, index) => {
+            if (index > 0)
+                nodes.push(h("sula-icon", { key: `sep-${index}`, icon: "ph ph-caret-right", customClass: "crumb-sep text-xs" }));
+            nodes.push(crumb);
+        });
+        return (h("nav", { class: "crumb-trail flex min-w-0 items-center", "aria-label": "Caminho de navega\u00E7\u00E3o" }, nodes));
+    }
+    renderCrumbDropdown(ancestors) {
+        if (!this.crumbMenu.open || ancestors.length <= 2)
+            return null;
+        const hidden = ancestors.slice(0, -2);
+        return (h("div", { class: "crumb-dropdown", role: "menu", ref: el => (this.crumbDropdownEl = el), style: { left: `${this.crumbMenu.left}px`, top: `${this.crumbMenu.top}px` } }, hidden.map(ancestor => (h("button", { key: ancestor.id, type: "button", role: "menuitem", class: "crumb-dropdown-item", onClick: () => this.goToDepth(this.stack.indexOf(ancestor)) }, h("span", { class: "item-icon flex flex-none items-center justify-center" }, this.renderItemIcon(ancestor, 'text-sm text-icon-primary', 'sm')), h("span", { class: "truncate" }, ancestor.label))))));
+    }
+    renderDrillHeader(activeParent) {
+        const ancestors = this.stack.slice(0, -1);
+        const backLabel = ancestors.length ? ancestors[ancestors.length - 1].label : this.menuTitle || 'Início';
+        const backButton = (h("button", { type: "button", class: "back-btn", title: `Voltar para ${backLabel}`, "aria-label": `Voltar para ${backLabel}`, onClick: () => this.goToDepth(this.stack.length - 2) }, h("sula-icon", { icon: "ph ph-arrow-left", customClass: "text-lg text-icon-primary" })));
+        return (h("div", { class: "menu-header menu-header--drilldown mb-16 flex flex-col border-b border-line-general pb-24" }, h("div", { class: "identity-row flex items-center" }, h("button", { type: "button", class: "identity-strip", title: `Ir para o início de ${this.menuTitle}`, onClick: () => this.goToDepth(-1) }, this.image && (h("span", { class: "identity-image" }, h("img", { src: this.image, alt: "" }))), h("span", { class: "identity-label truncate" }, this.menuTitle)), this.renderCollapseButton()), ancestors.length > 0 && (h("div", { class: "breadcrumb-row" }, backButton, this.renderTrail(ancestors), this.renderCrumbDropdown(ancestors))), h("div", { class: { 'context-row flex items-center min-w-0': true, 'mt-8': ancestors.length > 0 } }, ancestors.length === 0 && backButton, this.hasIcon(activeParent) && (h("span", { class: "context-icon flex flex-none items-center justify-center" }, this.renderItemIcon(activeParent, 'text-xl text-brand-primary', 'md'))), h("h1", { part: "title", class: "context-title truncate text-xl font-semibold leading-tight text-text-primary" }, activeParent.label))));
+    }
+    renderDrillRow(item, reserve) {
+        const branch = this.hasVisibleChildren(item);
+        const active = this.isActive(item, branch);
+        const faded = this.isFaded(item, active);
+        return (h("li", { class: "list-none", key: item.id }, h("div", { class: {
+                'menu-item flex items-center justify-between rounded-xs px-8': true,
+                'cursor-pointer hover:bg-states-empty-bg-hover': !item.disabled && !active,
+                'cursor-pointer': !item.disabled && active,
+                'cursor-not-allowed': !!item.disabled,
+            }, "aria-disabled": !!item.disabled, onClick: () => this.handleRowClick(item, this.stack.length + 1) }, h("span", { class: "flex min-w-0 flex-1 items-center gap-8" }, this.renderIconSlot(item, this.getIconClass(active, faded, 'text-base'), faded, reserve), h("span", { part: "item-label", class: {
+                'menu-item-label truncate': this.labelOverflow !== SulaMenuLabelOverflow.Wrap,
+                'menu-item-label menu-item-label--wrap': this.labelOverflow === SulaMenuLabelOverflow.Wrap,
+                'font-bold text-text-primary': active,
+                'text-text-disabled': faded,
+                'text-text-secondary': !active && !faded,
+            } }, item.label)), branch && h("sula-icon", { icon: "ph ph-caret-right", customClass: faded ? 'text-text-disabled text-xs' : 'text-text-secondary text-xs' }))));
+    }
+    renderDrillPanel() {
+        const activeParent = this.stack[this.stack.length - 1];
+        const panelKey = this.stack.map(item => item.id).join('/');
+        return (h("ul", { key: panelKey, class: {
+                'menu-panel flex flex-col': true,
+                'menu-panel--forward': this.direction === 'forward',
+                'menu-panel--back': this.direction === 'back',
+            } }, this.getVisibleItems(activeParent.children).map(item => this.renderDrillRow(item, this.siblingsHaveIcon(activeParent.children)))));
+    }
+    getMainIconClass(active, faded) {
+        if (faded)
+            return 'text-icon-disabled text-base';
+        if (active)
+            return 'text-brand-primary text-base';
+        return 'text-icon-primary text-base';
+    }
+    getMainCaretClass(active, faded) {
+        if (faded)
+            return 'text-text-disabled text-xs';
+        if (active)
+            return 'text-text-primary text-xs';
+        return 'text-text-secondary text-xs';
+    }
+    getSubIconClass(faded, selected = false) {
+        if (faded)
+            return 'text-icon-disabled text-base';
+        if (selected)
+            return 'text-brand-primary text-base';
+        return 'text-icon-primary text-base';
+    }
+    getSubCaretClass(faded) {
+        return faded ? 'text-icon-disabled text-xs' : 'text-icon-primary text-xs';
+    }
+    siblingsHaveIcon(items) {
+        return this.getVisibleItems(items).some(sibling => this.hasIcon(sibling));
+    }
+    renderIconSlot(item, customClass, faded, reserve = true) {
+        if (!reserve && !this.hasIcon(item))
+            return null;
+        return h("span", { class: "item-icon flex flex-none items-center justify-center" }, this.renderItemIcon(item, customClass, 'lg', faded));
+    }
+    renderMainRow(item, expandedView, branch, expanded, active, faded, reserve) {
+        const labelOverflowTruncate = this.labelOverflow === SulaMenuLabelOverflow.Truncate;
+        return (h("div", { class: {
+                'menu-item flex items-center rounded-xs px-8': true,
+                'cursor-pointer hover:bg-states-empty-bg-hover': !item.disabled,
+                'cursor-not-allowed': !!item.disabled,
+                'justify-between': expandedView,
+                'justify-center': !expandedView,
+            }, title: !expandedView ? item.label : undefined, "aria-disabled": !!item.disabled, onClick: () => this.handleRowClick(item, 1) }, h("div", { class: { 'flex items-center': true, 'flex-1 min-w-0 gap-8': expandedView, 'justify-center': !expandedView } }, this.renderIconSlot(item, this.getMainIconClass(active, faded), faded, reserve), h("span", { part: "main-item-label", title: expandedView ? item.label : undefined, "aria-hidden": !expandedView, class: {
+                'menu-item-label menu-copy': true,
+                'menu-item-label--truncate': labelOverflowTruncate,
+                'menu-item-label--wrap': !labelOverflowTruncate,
+                'menu-copy--visible': expandedView,
+                'menu-copy--hidden': !expandedView,
+                'font-bold text-text-primary': active,
+                'text-text-disabled': faded,
+                'text-text-secondary': !active && !faded,
+            } }, item.label)), branch && (h("sula-icon", { "aria-hidden": !expandedView, class: {
+                'menu-item-caret flex items-center justify-center': true,
+                'menu-item-caret--expanded': expanded,
+                'menu-item-caret--visible': expandedView,
+                'menu-item-caret--hidden': !expandedView,
+            }, icon: "ph ph-caret-down", customClass: this.getMainCaretClass(active, faded) }))));
+    }
+    renderSubRow(item, expandedView, branch, expanded, active, faded, drill, reserve) {
+        const caretIcon = drill ? 'ph-bold ph-caret-right' : `ph-bold ph-caret-${expanded && expandedView ? 'up' : 'down'}`;
+        const onClick = () => this.handleRowClick(item, this.depthOf(item));
+        const rowClass = {
+            'submenu-item flex min-w-0 items-center rounded-xs py-8 pr-8 select-none': true,
+            'submenu-item--branch w-full': branch,
+            'cursor-pointer hover:bg-states-empty-bg-hover': !item.disabled,
+            'cursor-not-allowed': !!item.disabled,
+            'font-bold': active && branch,
+        };
+        const label = (h("span", { class: {
+                'submenu-item-label min-w-0 flex-1': true,
+                'ml-8': reserve || this.hasIcon(item),
+                'menu-item-label--truncate': this.labelOverflow === SulaMenuLabelOverflow.Truncate,
+                'menu-item-label--wrap': this.labelOverflow !== SulaMenuLabelOverflow.Truncate,
+                'text-text-primary': !faded,
+                'text-text-disabled': faded,
+                'font-bold': active,
+            } }, item.label));
+        if (!branch) {
+            return (h("a", { class: rowClass, style: { paddingLeft: '8px' }, title: item.label, "aria-disabled": !!item.disabled, onClick: onClick }, this.renderIconSlot(item, this.getSubIconClass(faded, active && !branch), faded, reserve), label));
+        }
+        return (h("a", { class: rowClass, style: { paddingLeft: '8px' }, title: item.label, "aria-disabled": !!item.disabled, onClick: onClick }, h("div", { class: "submenu-item-branch-content flex min-w-0 flex-1 items-center" }, this.renderIconSlot(item, this.getSubIconClass(faded, active && !branch), faded, reserve), label), h("div", { class: "submenu-item-branch-caret flex flex-none items-center justify-end pl-8" }, h("sula-icon", { icon: caretIcon, customClass: this.getSubCaretClass(faded) }))));
+    }
+    depthOf(item) {
+        const path = this.findPath(this.items, item.id);
+        return path ? path.length : 1;
+    }
+    renderInlineList(items, depth, expandedView) {
+        const reserve = this.siblingsHaveIcon(items);
+        return this.getVisibleItems(items).map(item => {
+            const branch = this.hasVisibleChildren(item);
+            const drill = branch && depth >= this.drilldownLevel;
+            const inline = branch && !drill;
+            const expanded = inline && !!item.expanded;
+            const active = this.isActive(item, branch) || expanded;
+            const faded = this.isFaded(item, active);
+            const row = depth === 1
+                ? this.renderMainRow(item, expandedView, branch, expanded, active, faded, reserve)
+                : this.renderSubRow(item, expandedView, branch, expanded, active, faded, drill, reserve);
+            return (h("li", { class: { 'decoration-none list-none': true, 'menu-group': depth === 1, 'is-selected': depth > 1 && active && !branch }, key: item.id }, row, inline && (h("ul", { "aria-hidden": !expandedView || !expanded, class: {
+                    submenu: true,
+                    'submenu--expanded': expandedView && expanded,
+                    'ml-[8px] border-l border-line-general pl-8': depth === 1,
+                    'submenu-branch ml-[24px] border-l border-line-general pl-8': depth > 1,
+                } }, this.renderInlineList(item.children, depth + 1, expandedView)))));
+        });
+    }
+    render() {
+        const expandedView = !this.collapsed || this.previewExpanded;
+        const drilled = expandedView && this.isDrilled();
+        const activeParent = this.stack[this.stack.length - 1];
+        return (h(Host, { key: 'a5cb552fa5c922b9683e610ac82ffb831ccb5176', class: {
+                'menu-host--collapsed': this.collapsed,
+                'menu-host--preview': this.collapsed && this.previewExpanded,
+                'menu-host--density-compact': this.density === SulaMenuDensity.Compact,
+                'menu-host--density-comfortable': this.density === SulaMenuDensity.Comfortable,
+            }, style: this.hostStyleVariables, onMouseEnter: () => this.handleMenuMouseEnter(), onMouseLeave: () => this.handleMenuMouseLeave() }, h("aside", { key: '8c016acb4548d7a0f1b5d406499a070c921579e6', part: "shell", ref: el => (this.shellEl = el), class: {
+                'menu-shell flex h-full flex-col bg-surface-body shadow-md z-50': true,
+                'menu-shell--collapsed': this.collapsed && !this.previewExpanded,
+                'menu-shell--expanded': expandedView,
+                'menu-shell--preview': this.collapsed && this.previewExpanded,
+            } }, drilled ? this.renderDrillHeader(activeParent) : this.renderRootHeader(expandedView), h("nav", { key: 'ff2dca54adc4803f67fc3a3f16ff7e884d42e1f6', class: {
+                'menu-nav flex h-full flex-col overflow-y-auto overflow-x-hidden': true,
+                'px-12': !expandedView,
+            } }, drilled ? (this.renderDrillPanel()) : (h("ul", { class: "flex flex-col" }, this.renderInlineList(this.items, 1, expandedView)))), this.user && (h("div", { key: '26ef3d34d5a747a3f84b8fcf63d09feba2ff5668', class: "menu-footer border-t border-line-general pt-12" }, this.renderUserInfo(expandedView)))), this.user && this.renderProfilePopover(expandedView)));
+    }
+    static get is() { return "sula-workbench-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-workbench-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-workbench-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "menuTitle": {
+                "type": "string",
+                "attribute": "menu-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "image": {
+                "type": "string",
+                "attribute": "image",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "string",
+                "attribute": "width",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu width in expanded state. Use a CSS length that does not depend on the\nhost width, for example: 256px, 20rem or clamp(16rem, 25vw, 24rem)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "density": {
+                "type": "string",
+                "attribute": "density",
+                "mutable": false,
+                "complexType": {
+                    "original": "SulaMenuDensity",
+                    "resolved": "SulaMenuDensity.Comfortable | SulaMenuDensity.Compact | SulaMenuDensity.Default",
+                    "references": {
+                        "SulaMenuDensity": {
+                            "location": "import",
+                            "path": "../sula-menu/model/sula-menu.model",
+                            "id": "src/components/sula-menu/model/sula-menu.model.ts::SulaMenuDensity"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Density applied to menu items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SulaMenuDensity.Default"
+            },
+            "labelOverflow": {
+                "type": "string",
+                "attribute": "label-overflow",
+                "mutable": false,
+                "complexType": {
+                    "original": "SulaMenuLabelOverflow",
+                    "resolved": "SulaMenuLabelOverflow.Truncate | SulaMenuLabelOverflow.Wrap",
+                    "references": {
+                        "SulaMenuLabelOverflow": {
+                            "location": "import",
+                            "path": "../sula-menu/model/sula-menu.model",
+                            "id": "src/components/sula-menu/model/sula-menu.model.ts::SulaMenuLabelOverflow"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overflow behavior for item labels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SulaMenuLabelOverflow.Wrap"
+            },
+            "drilldownLevel": {
+                "type": "number",
+                "attribute": "drilldown-level",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Depth (1-based) from which items with children open a drill-down panel instead of expanding in place.\nWith the default of 3, the first two levels expand inline and deeper branches drill down."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "3"
+            },
+            "items": {
+                "type": "unknown",
+                "attribute": "items",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaWorkbenchMenuItem[]",
+                    "resolved": "SulaWorkbenchMenuItem[]",
+                    "references": {
+                        "SulaWorkbenchMenuItem": {
+                            "location": "import",
+                            "path": "./model/sula-workbench-menu.model",
+                            "id": "src/components/sula-workbench-menu/model/sula-workbench-menu.model.ts::SulaWorkbenchMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu items. Each item may use `icon` (icon font class) or `image` (URL or data URI of an image or SVG)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "user": {
+                "type": "unknown",
+                "attribute": "user",
+                "mutable": false,
+                "complexType": {
+                    "original": "SulaWorkbenchMenuUser",
+                    "resolved": "SulaWorkbenchMenuUser",
+                    "references": {
+                        "SulaWorkbenchMenuUser": {
+                            "location": "import",
+                            "path": "./model/sula-workbench-menu.model",
+                            "id": "src/components/sula-workbench-menu/model/sula-workbench-menu.model.ts::SulaWorkbenchMenuUser"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Logged user shown at the bottom of the menu. Without a photo, the initials are shown."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "defaultIcon": {
+                "type": "string",
+                "attribute": "default-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon used for items without `icon` or `image`. Use an empty string to show no icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'ph ph-dot-outline'"
+            },
+            "profileItems": {
+                "type": "unknown",
+                "attribute": "profile-items",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaProfileMenuItem[]",
+                    "resolved": "SulaProfileMenuItem[]",
+                    "references": {
+                        "SulaProfileMenuItem": {
+                            "location": "import",
+                            "path": "../sula-profile-menu/model/sula-profile-menu.model",
+                            "id": "src/components/sula-profile-menu/model/sula-profile-menu.model.ts::SulaProfileMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Options of the profile popover. Use `divider` for a separator and `hasSwitch` + `active` for a toggle row."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "collapsed": {},
+            "previewExpanded": {},
+            "stack": {},
+            "direction": {},
+            "selectedPath": {},
+            "crumbMenu": {},
+            "profileOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemSelected",
+                "name": "itemSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a leaf item is selected"
+                },
+                "complexType": {
+                    "original": "SulaWorkbenchMenuItem",
+                    "resolved": "SulaWorkbenchMenuItem",
+                    "references": {
+                        "SulaWorkbenchMenuItem": {
+                            "location": "import",
+                            "path": "./model/sula-workbench-menu.model",
+                            "id": "src/components/sula-workbench-menu/model/sula-workbench-menu.model.ts::SulaWorkbenchMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemClicked",
+                "name": "itemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when any item is clicked"
+                },
+                "complexType": {
+                    "original": "SulaWorkbenchMenuItem",
+                    "resolved": "SulaWorkbenchMenuItem",
+                    "references": {
+                        "SulaWorkbenchMenuItem": {
+                            "location": "import",
+                            "path": "./model/sula-workbench-menu.model",
+                            "id": "src/components/sula-workbench-menu/model/sula-workbench-menu.model.ts::SulaWorkbenchMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "levelChanged",
+                "name": "levelChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the drill-down level changes, with the ids from the root to the level shown (empty at the root)"
+                },
+                "complexType": {
+                    "original": "SulaWorkbenchMenuPath",
+                    "resolved": "string[]",
+                    "references": {
+                        "SulaWorkbenchMenuPath": {
+                            "location": "import",
+                            "path": "./model/sula-workbench-menu.model",
+                            "id": "src/components/sula-workbench-menu/model/sula-workbench-menu.model.ts::SulaWorkbenchMenuPath"
+                        }
+                    }
+                }
+            }, {
+                "method": "profileClicked",
+                "name": "profileClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user area is clicked. Call `preventDefault()` to keep the profile popover closed."
+                },
+                "complexType": {
+                    "original": "SulaWorkbenchMenuUser",
+                    "resolved": "SulaWorkbenchMenuUser",
+                    "references": {
+                        "SulaWorkbenchMenuUser": {
+                            "location": "import",
+                            "path": "./model/sula-workbench-menu.model",
+                            "id": "src/components/sula-workbench-menu/model/sula-workbench-menu.model.ts::SulaWorkbenchMenuUser"
+                        }
+                    }
+                }
+            }, {
+                "method": "profileItemClicked",
+                "name": "profileItemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a profile popover option without switch is clicked. The popover closes."
+                },
+                "complexType": {
+                    "original": "SulaProfileMenuItem",
+                    "resolved": "SulaProfileMenuItem",
+                    "references": {
+                        "SulaProfileMenuItem": {
+                            "location": "import",
+                            "path": "../sula-profile-menu/model/sula-profile-menu.model",
+                            "id": "src/components/sula-profile-menu/model/sula-profile-menu.model.ts::SulaProfileMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "profileSwitchChanged",
+                "name": "profileSwitchChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the switch of a profile popover option changes. The popover stays open."
+                },
+                "complexType": {
+                    "original": "SulaProfileMenuSwitchChange",
+                    "resolved": "SulaProfileMenuSwitchChange",
+                    "references": {
+                        "SulaProfileMenuSwitchChange": {
+                            "location": "import",
+                            "path": "../sula-profile-menu/model/sula-profile-menu.model",
+                            "id": "src/components/sula-profile-menu/model/sula-profile-menu.model.ts::SulaProfileMenuSwitchChange"
+                        }
+                    }
+                }
+            }, {
+                "method": "menuToggled",
+                "name": "menuToggled",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the menu is toggled between collapsed and expanded states\nTrue: Menu is expanded\nFalse: Menu is collapsed"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "syncWithItems"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onDocumentKeydown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "resize",
+                "method": "onWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=sula-workbench-menu.js.map