@kdcloudjs/shoelace 1.0.23 → 1.0.24

package/dist/chunks/chunk.6KQZFKY5.js

@@ -0,0 +1,550 @@
+import {
+  SlNavItem
+} from "./chunk.GORAV5BS.js";
+import {
+  SlNavSubmenu
+} from "./chunk.KB6R5TGX.js";
+import {
+  nav_styles_default
+} from "./chunk.MJUGRPNY.js";
+import {
+  SlNavGroup
+} from "./chunk.TLH4QPPN.js";
+import {
+  SlDivider
+} from "./chunk.VOWXQDEH.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.MANCSJE7.js";
+import {
+  __decorateClass,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/nav/nav.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+function isDividerItemType(item) {
+  return item.type === "divider";
+}
+function isGroupItemType(item) {
+  return item.type === "group";
+}
+function isSubmenuItemType(item) {
+  return !isDividerItemType(item) && !isGroupItemType(item) && Array.isArray(item.children);
+}
+var SlNav = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasInitializedState = false;
+    this.hasControlledOpenKeys = false;
+    this.hasControlledSelectedKeys = false;
+    this.isSyncingOpenState = false;
+    this.items = [];
+    this.defaultSelectedKeys = [];
+    this.defaultOpenKeys = [];
+    this.mode = "inline";
+    this.multiple = false;
+    this.selectable = true;
+    this.inlineCollapsed = false;
+    this.inlineIndent = 16;
+    this.subMenuOpenDelay = 0;
+    this.subMenuCloseDelay = 0.1;
+    this.triggerSubMenuAction = "hover";
+    this.theme = "light";
+    this.forceSubMenuRender = false;
+    this.disabledOverflow = false;
+    this.localOpenKeys = [];
+    this.localSelectedKeys = [];
+    this.handleNavSelect = (event) => {
+      var _a;
+      const { item, domEvent } = event.detail;
+      const key = this.getItemKey(item);
+      if (!key) {
+        return;
+      }
+      const clickInfo = this.createClickInfo(item, domEvent);
+      (_a = this.onClick) == null ? void 0 : _a.call(this, clickInfo);
+      if (!this.selectable) {
+        return;
+      }
+      const currentSelectedKeys = this.getNormalizedSelectedKeys(this.selectedKeys);
+      const isSelected = currentSelectedKeys.includes(key);
+      let nextSelectedKeys = currentSelectedKeys;
+      if (this.multiple) {
+        nextSelectedKeys = isSelected ? currentSelectedKeys.filter((selectedKey) => selectedKey !== key) : [...currentSelectedKeys, key];
+      } else if (!isSelected || currentSelectedKeys.length !== 1) {
+        nextSelectedKeys = [key];
+      }
+      nextSelectedKeys = this.getNormalizedSelectedKeys(nextSelectedKeys);
+      const keysChanged = !this.areKeysEqual(currentSelectedKeys, nextSelectedKeys);
+      if (!keysChanged && !this.multiple) {
+        return;
+      }
+      if (!this.hasControlledSelectedKeys) {
+        this.localSelectedKeys = nextSelectedKeys;
+      }
+      if (this.getInternalMode() === "inline") {
+        const ancestorOpenKeys = this.getAncestorSubmenuKeys(item);
+        if (ancestorOpenKeys.length > 0) {
+          this.applyOpenKeysFromInteraction(this.mergeKeys(this.openKeys, ancestorOpenKeys));
+        }
+      }
+      const selectionInfo = __spreadProps(__spreadValues({}, clickInfo), {
+        selectedKeys: nextSelectedKeys
+      });
+      this.dispatchSelectionCallbacks(
+        isSelected && this.multiple ? "deselect" : "select",
+        selectionInfo,
+        nextSelectedKeys
+      );
+    };
+    this.handleSubmenuShow = (event) => {
+      this.handleSubmenuOpenChange(event, true);
+    };
+    this.handleSubmenuHide = (event) => {
+      this.handleSubmenuOpenChange(event, false);
+    };
+    this.handleSlotChange = () => {
+      this.updateMode();
+      this.syncStateToDescendants();
+    };
+  }
+  set selectedKeys(value) {
+    const oldValue = this._selectedKeys;
+    this.hasControlledSelectedKeys = value !== void 0;
+    this._selectedKeys = Array.isArray(value) ? [...value] : void 0;
+    this.requestUpdate("selectedKeys", oldValue);
+  }
+  get selectedKeys() {
+    var _a;
+    return this.hasControlledSelectedKeys ? (_a = this._selectedKeys) != null ? _a : [] : this.localSelectedKeys;
+  }
+  set openKeys(value) {
+    const oldValue = this._openKeys;
+    this.hasControlledOpenKeys = value !== void 0;
+    this._openKeys = Array.isArray(value) ? [...value] : void 0;
+    this.requestUpdate("openKeys", oldValue);
+  }
+  get openKeys() {
+    var _a;
+    return this.hasControlledOpenKeys ? (_a = this._openKeys) != null ? _a : [] : this.localOpenKeys;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("sl-nav-select", this.handleNavSelect);
+    this.addEventListener("sl-show", this.handleSubmenuShow);
+    this.addEventListener("sl-hide", this.handleSubmenuHide);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("sl-nav-select", this.handleNavSelect);
+    this.removeEventListener("sl-show", this.handleSubmenuShow);
+    this.removeEventListener("sl-hide", this.handleSubmenuHide);
+  }
+  willUpdate(changedProperties) {
+    var _a, _b;
+    super.willUpdate(changedProperties);
+    if (!this.hasInitializedState) {
+      this.localSelectedKeys = [...this.defaultSelectedKeys];
+      this.localOpenKeys = [...this.defaultOpenKeys];
+      this.hasInitializedState = true;
+    }
+    if (changedProperties.has("selectedKeys") && this.hasControlledSelectedKeys) {
+      this.localSelectedKeys = [...(_a = this._selectedKeys) != null ? _a : []];
+    }
+    if (changedProperties.has("openKeys") && this.hasControlledOpenKeys) {
+      this.localOpenKeys = [...(_b = this._openKeys) != null ? _b : []];
+    }
+    if (changedProperties.has("multiple") && !this.hasControlledSelectedKeys) {
+      this.localSelectedKeys = this.getNormalizedSelectedKeys(this.localSelectedKeys);
+    }
+    if (changedProperties.has("selectable") && !this.selectable && !this.hasControlledSelectedKeys) {
+      this.localSelectedKeys = [];
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("inlineIndent")) {
+      this.style.setProperty("--sl-nav-item-indent-step", `${this.inlineIndent}px`);
+    }
+    if (changedProperties.has("mode") || changedProperties.has("inlineCollapsed") || changedProperties.has("items")) {
+      this.updateMode();
+    }
+    if (changedProperties.has("mode") || changedProperties.has("inlineCollapsed") || changedProperties.has("selectedKeys") || changedProperties.has("localSelectedKeys") || changedProperties.has("openKeys") || changedProperties.has("localOpenKeys") || changedProperties.has("items") || changedProperties.has("multiple") || changedProperties.has("selectable")) {
+      this.syncStateToDescendants();
+    }
+  }
+  firstUpdated() {
+    this.style.setProperty("--sl-nav-item-indent-step", `${this.inlineIndent}px`);
+    if (!this.hasControlledOpenKeys && this.localOpenKeys.length === 0 && this.defaultOpenKeys.length === 0 && this.getInternalMode() === "inline") {
+      const ancestorOpenKeys = this.normalizeKeys(
+        this.getSelectedItems().flatMap((item) => this.getAncestorSubmenuKeys(item))
+      );
+      if (ancestorOpenKeys.length > 0) {
+        this.localOpenKeys = ancestorOpenKeys;
+        this.syncStateToDescendants();
+      }
+    }
+  }
+  getInternalMode() {
+    if (this.mode === "horizontal") {
+      return "horizontal";
+    }
+    if (this.mode === "inline") {
+      return this.inlineCollapsed ? "vertical" : "inline";
+    }
+    return "vertical";
+  }
+  getManagedElements(selector) {
+    return [
+      .../* @__PURE__ */ new Set([
+        ...Array.from(this.querySelectorAll(selector)),
+        ...Array.from(this.renderRoot.querySelectorAll(selector))
+      ])
+    ];
+  }
+  getParentElement(element) {
+    if (element.parentElement) {
+      return element.parentElement;
+    }
+    const root = element.getRootNode();
+    return root instanceof ShadowRoot ? root.host : null;
+  }
+  belongsToThisNav(element) {
+    let current = element;
+    while (current) {
+      if (current === this) {
+        return true;
+      }
+      current = this.getParentElement(current);
+    }
+    return false;
+  }
+  findClosestAncestorTag(element, tagName) {
+    let current = this.getParentElement(element);
+    while (current && current !== this) {
+      if (current.tagName.toLowerCase() === tagName) {
+        return current;
+      }
+      current = this.getParentElement(current);
+    }
+    return void 0;
+  }
+  getItems() {
+    return this.getManagedElements("sl-nav-item");
+  }
+  getGroups() {
+    return this.getManagedElements("sl-nav-group");
+  }
+  getSubmenus() {
+    return this.getManagedElements("sl-nav-submenu");
+  }
+  getItemKey(item) {
+    return item.key || item.itemKey;
+  }
+  getSubmenuKey(submenu) {
+    return submenu.key || submenu.itemKey;
+  }
+  normalizeKeys(keys) {
+    return [...new Set(keys.filter((key) => typeof key === "string" && key !== ""))];
+  }
+  getNormalizedSelectedKeys(keys) {
+    if (!this.selectable) {
+      return [];
+    }
+    const normalized = this.normalizeKeys(keys);
+    return this.multiple ? normalized : normalized.slice(0, 1);
+  }
+  mergeKeys(...collections) {
+    return this.normalizeKeys(collections.flat());
+  }
+  areKeysEqual(current, next) {
+    if (current.length !== next.length) {
+      return false;
+    }
+    return current.every((key, index) => key === next[index]);
+  }
+  getAncestorSubmenus(item) {
+    const submenus = [];
+    let current = this.getParentElement(item);
+    while (current && current !== this) {
+      if (current.tagName.toLowerCase() === "sl-nav-submenu") {
+        submenus.push(current);
+      }
+      current = this.getParentElement(current);
+    }
+    return submenus;
+  }
+  getAncestorSubmenuKeys(item) {
+    return this.normalizeKeys(this.getAncestorSubmenus(item).map((submenu) => this.getSubmenuKey(submenu)));
+  }
+  getSelectedItems() {
+    const items = this.getItems();
+    const selectedKeySet = new Set(this.getNormalizedSelectedKeys(this.selectedKeys));
+    return items.filter((item) => selectedKeySet.has(this.getItemKey(item)));
+  }
+  createClickInfo(item, domEvent) {
+    const key = this.getItemKey(item);
+    return {
+      domEvent,
+      item,
+      key,
+      keyPath: [key, ...this.getAncestorSubmenuKeys(item)]
+    };
+  }
+  dispatchSelectionCallbacks(type, info, nextSelectedKeys) {
+    var _a, _b;
+    if (type === "select") {
+      (_a = this.onSelect) == null ? void 0 : _a.call(this, info);
+    } else {
+      (_b = this.onDeselect) == null ? void 0 : _b.call(this, info);
+    }
+    this.emit("sl-change", {
+      detail: {
+        item: info.item,
+        selectedKeys: nextSelectedKeys
+      }
+    });
+  }
+  updateMode() {
+    const internalMode = this.getInternalMode();
+    const elements = [...this.getItems(), ...this.getGroups(), ...this.getSubmenus()];
+    elements.forEach((element) => {
+      const closestSubmenu = this.findClosestAncestorTag(element, "sl-nav-submenu");
+      if (closestSubmenu && closestSubmenu !== element) {
+        element.mode = internalMode === "inline" ? "inline" : "vertical";
+      } else {
+        element.mode = internalMode;
+      }
+    });
+  }
+  syncStateToDescendants() {
+    const items = this.getItems();
+    const groups = this.getGroups();
+    const submenus = this.getSubmenus();
+    const selectedKeySet = new Set(this.getNormalizedSelectedKeys(this.selectedKeys));
+    const openKeySet = new Set(this.normalizeKeys(this.openKeys));
+    const selectedItems = items.filter((item) => selectedKeySet.has(this.getItemKey(item)));
+    items.forEach((item) => {
+      item.active = selectedKeySet.has(this.getItemKey(item));
+    });
+    [...groups, ...submenus].forEach((element) => {
+      element.active = false;
+    });
+    selectedItems.forEach((item) => {
+      let current = this.getParentElement(item);
+      while (current && current !== this) {
+        const tagName = current.tagName.toLowerCase();
+        if (tagName === "sl-nav-group" || tagName === "sl-nav-submenu") {
+          current.active = true;
+        }
+        current = this.getParentElement(current);
+      }
+    });
+    this.isSyncingOpenState = true;
+    submenus.forEach((submenu) => {
+      submenu.setOpenFromNav(openKeySet.has(this.getSubmenuKey(submenu)));
+    });
+    this.isSyncingOpenState = false;
+  }
+  applyOpenKeysFromInteraction(nextOpenKeys) {
+    var _a, _b;
+    const normalizedOpenKeys = this.normalizeKeys(nextOpenKeys);
+    if (this.hasControlledOpenKeys) {
+      (_a = this.onOpenChange) == null ? void 0 : _a.call(this, normalizedOpenKeys);
+      this.emit("sl-nav-open-change", {
+        detail: {
+          openKeys: normalizedOpenKeys
+        }
+      });
+      return;
+    }
+    if (!this.areKeysEqual(this.localOpenKeys, normalizedOpenKeys)) {
+      this.localOpenKeys = normalizedOpenKeys;
+      (_b = this.onOpenChange) == null ? void 0 : _b.call(this, normalizedOpenKeys);
+      this.emit("sl-nav-open-change", {
+        detail: {
+          openKeys: normalizedOpenKeys
+        }
+      });
+    }
+  }
+  handleSubmenuOpenChange(event, open) {
+    var _a;
+    if (this.isSyncingOpenState) {
+      return;
+    }
+    const submenu = event.target;
+    if (!(submenu instanceof HTMLElement) || submenu.tagName.toLowerCase() !== "sl-nav-submenu" || !this.belongsToThisNav(submenu)) {
+      return;
+    }
+    if (((_a = submenu.getOpenChangeSource) == null ? void 0 : _a.call(submenu)) === "nav") {
+      return;
+    }
+    const submenuKey = this.getSubmenuKey(submenu);
+    if (!submenuKey) {
+      return;
+    }
+    const nextOpenKeys = open ? this.mergeKeys(this.openKeys, [submenuKey]) : this.openKeys.filter((key) => key !== submenuKey);
+    if (this.hasControlledOpenKeys) {
+      event.preventDefault();
+    }
+    this.applyOpenKeysFromInteraction(nextOpenKeys);
+  }
+  renderItemType(item, index) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (isDividerItemType(item)) {
+      return html`<sl-divider data-menu-index=${index}></sl-divider>`;
+    }
+    if (isGroupItemType(item)) {
+      return html`
+        <sl-nav-group .label=${item.label}>
+          ${item.children.map((child, childIndex) => this.renderItemType(child, childIndex))}
+        </sl-nav-group>
+      `;
+    }
+    if (isSubmenuItemType(item)) {
+      return html`
+        <sl-nav-submenu
+          .key=${item.key}
+          .label=${item.label}
+          .icon=${item.icon}
+          .onTitleClick=${item.onTitleClick}
+          .popupClassName=${(_a = item.popupClassName) != null ? _a : ""}
+          .popupOffset=${item.popupOffset}
+          .theme=${(_b = item.theme) != null ? _b : this.theme}
+          ?disabled=${(_c = item.disabled) != null ? _c : false}
+        >
+          ${item.children.map((child, childIndex) => this.renderItemType(child, childIndex))}
+        </sl-nav-submenu>
+      `;
+    }
+    return html`
+      <sl-nav-item
+        .key=${item.key}
+        .label=${item.label}
+        .icon=${item.icon}
+        .extra=${item.extra}
+        .title=${(_d = item.title) != null ? _d : ""}
+        .href=${(_e = item.href) != null ? _e : ""}
+        .target=${item.target}
+        .download=${item.download}
+        .rel=${(_f = item.rel) != null ? _f : "noreferrer noopener"}
+        ?disabled=${(_g = item.disabled) != null ? _g : false}
+        ?danger=${(_h = item.danger) != null ? _h : false}
+      ></sl-nav-item>
+    `;
+  }
+  renderItems() {
+    if (this.items.length === 0) {
+      return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
+    }
+    return html`${this.items.map((item, index) => this.renderItemType(item, index))}`;
+  }
+  render() {
+    const internalMode = this.getInternalMode();
+    return html`
+      <nav
+        part="base"
+        class=${classMap({
+      nav: true,
+      "nav--horizontal": internalMode === "horizontal",
+      "nav--vertical": internalMode === "inline" || internalMode === "vertical"
+    })}
+      >
+        ${this.renderItems() || nothing}
+      </nav>
+    `;
+  }
+};
+SlNav.styles = [component_styles_default, nav_styles_default];
+SlNav.dependencies = {
+  "sl-divider": SlDivider,
+  "sl-nav-group": SlNavGroup,
+  "sl-nav-item": SlNavItem,
+  "sl-nav-submenu": SlNavSubmenu
+};
+__decorateClass([
+  query("slot")
+], SlNav.prototype, "defaultSlot", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlNav.prototype, "items", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlNav.prototype, "selectedKeys", 1);
+__decorateClass([
+  property({ attribute: false })
+], SlNav.prototype, "defaultSelectedKeys", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlNav.prototype, "openKeys", 1);
+__decorateClass([
+  property({ attribute: false })
+], SlNav.prototype, "defaultOpenKeys", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlNav.prototype, "mode", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlNav.prototype, "multiple", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlNav.prototype, "selectable", 2);
+__decorateClass([
+  property({ attribute: "inline-collapsed", type: Boolean, reflect: true })
+], SlNav.prototype, "inlineCollapsed", 2);
+__decorateClass([
+  property({ attribute: "inline-indent", type: Number })
+], SlNav.prototype, "inlineIndent", 2);
+__decorateClass([
+  property({ attribute: "sub-menu-open-delay", type: Number })
+], SlNav.prototype, "subMenuOpenDelay", 2);
+__decorateClass([
+  property({ attribute: "sub-menu-close-delay", type: Number })
+], SlNav.prototype, "subMenuCloseDelay", 2);
+__decorateClass([
+  property({ attribute: "trigger-sub-menu-action" })
+], SlNav.prototype, "triggerSubMenuAction", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlNav.prototype, "theme", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlNav.prototype, "expandIcon", 2);
+__decorateClass([
+  property({ attribute: "force-sub-menu-render", type: Boolean, reflect: true })
+], SlNav.prototype, "forceSubMenuRender", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlNav.prototype, "overflowedIndicator", 2);
+__decorateClass([
+  property({ attribute: "disabled-overflow", type: Boolean, reflect: true })
+], SlNav.prototype, "disabledOverflow", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlNav.prototype, "onClick", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlNav.prototype, "onSelect", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlNav.prototype, "onDeselect", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlNav.prototype, "onOpenChange", 2);
+__decorateClass([
+  state()
+], SlNav.prototype, "localOpenKeys", 2);
+__decorateClass([
+  state()
+], SlNav.prototype, "localSelectedKeys", 2);
+
+export {
+  SlNav
+};