@cupra/ui-kit 2.0.0-canary.22 → 2.0.0-canary.221

package/dist/esm/components/ds-secondary-navigation/ds-secondary-navigation.js

@@ -1,235 +1,289 @@
-import { UiKitElement as v } from "../base/UiKitElement.js";
-import { customUiKitElement as x } from "../../decorators/customUiKitElement.js";
-import { ViewportMixin as w } from "../../mixins/ViewportMixin.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as a, nothing as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as u } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as c } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { query as g } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
-import { queryAssignedElements as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { classMap as m } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { styleMap as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.js";
-import { commonStyles as I } from "./styles/common.styles.js";
-var y = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (e, t, s, n) => {
-  for (var o = n > 1 ? void 0 : n ? C(t, s) : t, d = e.length - 1, h; d >= 0; d--)
-    (h = e[d]) && (o = (n ? h(t, s, o) : h(o)) || o);
-  return n && o && y(t, s, o), o;
-};
-let i = class extends w(v) {
-  constructor() {
-    super(...arguments), this.dropdownButtonText = "Menu", this.textTransform = "none", this.openItems = !1, this.openCtas = !1, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
-      this.handleScroll();
-    }), this.handleScroll = () => {
-      var t, s, n, o;
-      const e = ((t = this.itemsContainer) == null ? void 0 : t.scrollLeft) + ((s = this.itemsContainer) == null ? void 0 : s.clientWidth);
-      this.hasScrollLeft = ((n = this.itemsContainer) == null ? void 0 : n.scrollLeft) > 0, this.hasScrollRight = e < ((o = this.itemsContainer) == null ? void 0 : o.scrollWidth);
-    };
-  }
-  updated(e) {
-    super.updated(e), e.has("viewport") && this.updateCtas(), e.has("selectedIndex") && this.updateSelectedItem();
-  }
-  firstUpdated(e) {
-    var t;
-    super.firstUpdated(e), this.handleScroll(), this.resizeObserver.observe(this.itemsContainer), window.addEventListener("resize", this.handleScroll), (t = this.itemsContainer) == null || t.addEventListener("scroll", this.handleScroll);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScroll);
-  }
-  get selectedItemText() {
-    var e, t, s;
-    return ((s = (t = (e = this.items) == null ? void 0 : e[this.selectedIndex]) == null ? void 0 : t.textContent) == null ? void 0 : s.trim()) || this.dropdownButtonText;
-  }
-  get classes() {
-    return {
-      nav: !0,
-      "ds-blur": !0,
-      "scroll-left": this.hasScrollLeft,
-      "scroll-right": this.hasScrollRight
-    };
-  }
-  toggleItemsDropdown() {
-    this.openItems = !this.openItems, this.openItems && (this.openCtas = !1);
-  }
-  toggleActionsDropdown() {
-    this.openCtas = !this.openCtas, this.openCtas && (this.openItems = !1);
-  }
-  closeDropdowns() {
-    this.openItems = !1;
-  }
-  handleItemsSlotChange() {
-    this.updateSelectedItem();
-  }
-  handleActionsSlotChange() {
-    this.updateCtas();
-  }
-  updateSelectedItem() {
-    var e;
-    (e = this.items) == null || e.forEach((t, s) => {
-      s === this.selectedIndex ? t.classList.add("selected") : t.classList.remove("selected");
-    });
-  }
-  updateCtas() {
-    var e;
-    (e = this.ctas) == null || e.forEach((t) => {
-      ["xxl", "xl"].includes(this.viewport) ? t == null || t.setAttribute("size", "large") : t == null || t.setAttribute("size", "medium");
-    });
-  }
-  handleItemClick(e) {
-    var n, o;
-    const t = e.target, s = ((n = this.items) == null ? void 0 : n.indexOf(t)) ?? -1;
-    if (s !== -1) {
-      this.selectedIndex = s, this.updateSelectedItem();
-      const d = ((o = t.textContent) == null ? void 0 : o.trim()) || t.getAttribute("data-label") || "";
-      this.dispatchEvent(
-        new CustomEvent("ds-secondary-navigation:select", {
-          detail: {
-            index: s,
-            label: d
-          },
-          bubbles: !0,
-          composed: !0
-        })
-      ), this.closeDropdowns();
-    }
-  }
-  get textTransformStyle() {
-    return { textTransform: this.textTransform };
-  }
-  render() {
-    return a`
+import { html as e, nothing as t } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query.js";
+import { queryAssignedElements as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
+import o from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import { UiKitElement as s } from "../base/UiKitElement.js";
+import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
+import { uiKitHtml as l } from "../../utils/uiKitHtml.js";
+import { classMap as u } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";
+import { ViewportMixin as d } from "../../mixins/ViewportMixin.js";
+import "../ds-icon-button/ds-icon-button.js";
+import "../ds-button/ds-button.js";
+import { commonStyles as f } from "./styles/common.styles.js";
+//#region src/components/ds-secondary-navigation/ds-secondary-navigation.ts
+var p = class extends d(s) {
+	constructor(...e) {
+		super(...e), this.dropdownButtonText = "Menu", this.keepDropdownButtonText = !1, this.itemsMode = "auto", this.actionsMode = "auto", this.openItems = !1, this.openCtas = !1, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.actionsCount = 0, this.resizeObserver = new ResizeObserver(() => {
+			this.handleScroll();
+		}), this.handleScroll = () => {
+			var e, t, n, r;
+			let i = ((e = this.itemsContainer) == null ? void 0 : e.scrollLeft) + ((t = this.itemsContainer) == null ? void 0 : t.clientWidth);
+			this.hasScrollLeft = ((n = this.itemsContainer) == null ? void 0 : n.scrollLeft) > 0, this.hasScrollRight = i < ((r = this.itemsContainer) == null ? void 0 : r.scrollWidth);
+		};
+	}
+	static resolveResponsive(e, t, n) {
+		let r;
+		try {
+			r = JSON.parse(e);
+		} catch {
+			return e;
+		}
+		if (typeof r != "object" || !r || Array.isArray(r)) return e;
+		let i = r, a = m.VIEWPORT_ORDER.indexOf(t);
+		for (let e = a; e >= 0; e--) {
+			let t = m.VIEWPORT_ORDER[e];
+			if (t in i) return i[t];
+		}
+		return n;
+	}
+	get resolvedItemsMode() {
+		return m.resolveResponsive(this.itemsMode, this.viewport, "auto");
+	}
+	get resolvedActionsMode() {
+		return m.resolveResponsive(this.actionsMode, this.viewport, "auto");
+	}
+	updated(e) {
+		super.updated(e), (e.has("viewport") || e.has("actionsMode")) && this.updateCtas(), e.has("selectedIndex") && this.updateSelectedItem();
+	}
+	firstUpdated(e) {
+		var t;
+		super.firstUpdated(e), this.handleScroll(), this.itemsContainer && this.resizeObserver.observe(this.itemsContainer), window.addEventListener("resize", this.handleScroll), (t = this.itemsContainer) == null || t.addEventListener("scroll", this.handleScroll);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScroll);
+	}
+	get selectedItemText() {
+		var e;
+		return this.keepDropdownButtonText ? this.dropdownButtonText : ((e = this.items) == null || (e = e[this.selectedIndex]) == null || (e = e.textContent) == null ? void 0 : e.trim()) || this.dropdownButtonText;
+	}
+	get classes() {
+		return {
+			nav: !0,
+			"ds-blur": !0,
+			"scroll-left": this.hasScrollLeft,
+			"scroll-right": this.hasScrollRight
+		};
+	}
+	toggleItemsDropdown() {
+		this.openItems = !this.openItems, this.openItems && (this.openCtas = !1);
+	}
+	toggleActionsDropdown() {
+		this.openCtas = !this.openCtas, this.openCtas && (this.openItems = !1);
+	}
+	closeDropdowns() {
+		this.openItems = !1;
+	}
+	handleItemsSlotChange() {
+		this.updateSelectedItem();
+	}
+	handleActionsSlotChange() {
+		this.updateCtas();
+	}
+	updateSelectedItem() {
+		var e;
+		(e = this.items) == null || e.forEach((e, t) => {
+			t === this.selectedIndex ? e.classList.add("selected") : e.classList.remove("selected");
+		});
+	}
+	updateCtas() {
+		var e, t;
+		this.actionsCount = ((e = this.ctas) == null ? void 0 : e.length) ?? 0, (t = this.ctas) == null || t.forEach((e) => {
+			["xxl", "xl"].includes(this.viewport) ? e == null || e.setAttribute("size", "large") : e == null || e.setAttribute("size", "medium");
+		});
+	}
+	handleItemClick(e) {
+		var t;
+		let n = e.target, r = ((t = this.items) == null ? void 0 : t.indexOf(n)) ?? -1;
+		if (r !== -1) {
+			var i;
+			this.selectedIndex = r, this.updateSelectedItem();
+			let e = ((i = n.textContent) == null ? void 0 : i.trim()) || n.getAttribute("data-label") || "";
+			this.dispatchEvent(new CustomEvent("ds-secondary-navigation:select", {
+				detail: {
+					index: r,
+					label: e
+				},
+				bubbles: !0,
+				composed: !0
+			})), this.closeDropdowns();
+		}
+	}
+	get shouldShowItemsInline() {
+		return this.resolvedItemsMode === "inline" ? !0 : this.resolvedItemsMode === "select" || this.resolvedItemsMode === "icon-button" ? !1 : [
+			"l",
+			"xl",
+			"xxl"
+		].includes(this.viewport);
+	}
+	get shouldShowItemsDropdownButton() {
+		return this.resolvedItemsMode === "inline" ? !1 : this.resolvedItemsMode === "select" || this.resolvedItemsMode === "icon-button" || [
+			"xxs",
+			"xs",
+			"s",
+			"m"
+		].includes(this.viewport);
+	}
+	get shouldShowActionsInline() {
+		if (this.resolvedActionsMode === "inline") return !0;
+		if (this.resolvedActionsMode === "dropdown") return !1;
+		let e = [
+			"xxs",
+			"xs",
+			"s"
+		].includes(this.viewport);
+		return [
+			"m",
+			"l",
+			"xl",
+			"xxl"
+		].includes(this.viewport) || e && !this.shouldShowActionsDropdownButton;
+	}
+	get shouldShowActionsDropdownButton() {
+		return this.resolvedActionsMode === "inline" ? !1 : this.resolvedActionsMode === "dropdown" || [
+			"xxs",
+			"xs",
+			"s"
+		].includes(this.viewport) && this.actionsCount > 1;
+	}
+	render() {
+		return e`
             ${this.backdropTemplate}
             <div class="container gutter">
-                <nav data-testid="ds-secondary-navigation-container" class=${m(this.classes)}>
+                <nav data-testid="ds-secondary-navigation-container" class=${u(this.classes)}>
                     ${this.itemsTemplate}
                     ${this.itemsDropdownButtonTemplate}
                     ${this.actionsTemplate}
                     ${this.actionsDropdownButtonTemplate}
+                    ${this.itemsDropdownTemplate}
+                    ${this.actionsDropdownTemplate}
                 </nav>
-                ${this.itemsDropdownTemplate}
-                ${this.actionsDropdownTemplate}
             </div>
         `;
-  }
-  get itemsTemplate() {
-    return ["l", "xl", "xxl"].includes(this.viewport) ? a`
+	}
+	get itemsTemplate() {
+		return this.shouldShowItemsInline ? e`
             <div class="items-container">
-                <div style=${p(this.textTransformStyle)}>
+                <div>
                     <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
                 </div>
             </div>
-        ` : l;
-  }
-  get actionsTemplate() {
-    return ["m", "l", "xl", "xxl"].includes(this.viewport) ? a`
-            <div class="actions-container" style=${p(this.textTransformStyle)}>
+        ` : t;
+	}
+	get actionsTemplate() {
+		return this.shouldShowActionsInline ? e`
+            <div class="actions-container">
                 <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
             </div>
-        ` : l;
-  }
-  get iconTemplate() {
-    return this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": this.openItems ? "arrow-up" : "arrow-down",
-      size: 20
-    });
-  }
-  get itemsDropdownButtonTemplate() {
-    return ["xxs", "xs", "s", "m"].includes(this.viewport) ? a`
-            <button
-                class="items-dropdown-button"
+        ` : t;
+	}
+	get iconTemplate() {
+		return l`<ds-icon class="icon" icon-name=${this.openItems ? "arrow-down" : "arrow-up"} size="20"></ds-icon>`;
+	}
+	get itemsDropdownButtonTemplate() {
+		return this.shouldShowItemsDropdownButton ? this.resolvedItemsMode === "icon-button" ? l`<ds-icon-button
+                class="items-list-button"
+                data-aria-label="open items dropdown"
                 @click=${this.toggleItemsDropdown}
-                aria-expanded=${this.openItems}
-                aria-haspopup="true"
-            >
-                <span>${this.selectedItemText}</span>
-                ${this.iconTemplate}
-            </button>
-        ` : l;
-  }
-  get itemsDropdownTemplate() {
-    return ["xxs", "xs", "s", "m"].includes(this.viewport) ? a`
+                size=${m.RESPONSIVE_BUTTON_SIZE}
+                variant="secondary"
+                icon-name="list-line"
+            ></ds-icon-button>` : l`<ds-button
+            class="items-dropdown-button"
+            variant="secondary"
+            size=${m.RESPONSIVE_BUTTON_SIZE}
+            icon-name=${this.openItems ? "arrow-down" : "arrow-up"}
+            icon-position="right"
+            @click=${this.toggleItemsDropdown}
+            aria-expanded=${this.openItems}
+            aria-haspopup="true"
+        ><span>${this.selectedItemText}</span></ds-button>` : t;
+	}
+	get itemsDropdownTemplate() {
+		return this.shouldShowItemsDropdownButton ? e`
             <div
-                class=${m({
-      gutter: !0,
-      "dropdown-container": !0,
-      "items-dropdown": !0,
-      open: this.openItems
-    })}
+                class=${u({
+			gutter: !0,
+			"dropdown-container": !0,
+			"items-dropdown": !0,
+			open: this.openItems
+		})}
                 role="menu"
                 aria-hidden=${!this.openItems}
+                ?inert=${!this.openItems}
             >
-                <div class="dropdown ds-blur" style=${p(this.textTransformStyle)}>
+                <div class="dropdown ds-blur">
                     <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
                 </div>
             </div>
-        ` : l;
-  }
-  get actionsDropdownButtonTemplate() {
-    return ["xxs", "xs", "s"].includes(this.viewport) ? this.componentFactory.createIconButton({
-      class: "nav-arrow",
-      "data-aria-label": "open actions dropdown",
-      "@click": this.toggleActionsDropdown,
-      size: "medium",
-      "icon-name": "triple-dot-v"
-    }) : l;
-  }
-  get actionsDropdownTemplate() {
-    return ["xxs", "xs", "s"].includes(this.viewport) ? a`
+        ` : t;
+	}
+	get actionsDropdownButtonTemplate() {
+		return this.shouldShowActionsDropdownButton ? l`<ds-icon-button
+            class="nav-arrow"
+            data-aria-label="open actions dropdown"
+            @click=${this.toggleActionsDropdown}
+            size=${m.RESPONSIVE_BUTTON_SIZE}
+            icon-name="triple-dot-v"
+        ></ds-icon-button>` : t;
+	}
+	get actionsDropdownTemplate() {
+		return this.shouldShowActionsDropdownButton ? e`
             <div
-                class=${m({
-      gutter: !0,
-      "dropdown-container": !0,
-      "actions-dropdown": !0,
-      open: this.openCtas
-    })}
+                class=${u({
+			gutter: !0,
+			"dropdown-container": !0,
+			"actions-dropdown": !0,
+			open: this.openCtas
+		})}
                 role="menu"
                 aria-hidden=${!this.openCtas}
+                ?inert=${!this.openCtas}
             >
-                <div class="dropdown ds-blur" style=${p(this.textTransformStyle)}>
-                    <slot name="actions"></slot>
+                <div class="dropdown ds-blur">
+                    <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
                 </div>
             </div>
-        ` : l;
-  }
-  get backdropTemplate() {
-    return !this.openItems && !this.openCtas ? l : a`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`;
-  }
-};
-i.styles = [I];
-r([
-  u({ type: String, attribute: "dropdown-button-text" })
-], i.prototype, "dropdownButtonText", 2);
-r([
-  u({ type: Number, attribute: "selected-index" })
-], i.prototype, "selectedIndex", 2);
-r([
-  u({ type: String, attribute: "text-transform" })
-], i.prototype, "textTransform", 2);
-r([
-  c()
-], i.prototype, "openItems", 2);
-r([
-  c()
-], i.prototype, "openCtas", 2);
-r([
-  c()
-], i.prototype, "hasScrollLeft", 2);
-r([
-  c()
-], i.prototype, "hasScrollRight", 2);
-r([
-  f({ slot: "items" })
-], i.prototype, "items", 2);
-r([
-  f({ slot: "actions" })
-], i.prototype, "ctas", 2);
-r([
-  g(".items-container")
-], i.prototype, "itemsContainer", 2);
-i = r([
-  x("ds-secondary-navigation")
-], i);
-export {
-  i as DsSecondaryNavigation
-};
+        ` : t;
+	}
+	get backdropTemplate() {
+		return !this.openItems && !this.openCtas ? t : e`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`;
+	}
+}, m = p, h = (p.styles = [f], p.RESPONSIVE_BUTTON_SIZE = JSON.stringify({
+	xs: "medium",
+	s: "medium",
+	m: "medium",
+	l: "medium",
+	xl: "large",
+	xxl: "large"
+}), p.VIEWPORT_ORDER = [
+	"xs",
+	"s",
+	"m",
+	"l",
+	"xl",
+	"xxl"
+], p);
+o([n({
+	type: String,
+	attribute: "dropdown-button-text"
+})], h.prototype, "dropdownButtonText", void 0), o([n({
+	type: Number,
+	attribute: "selected-index"
+})], h.prototype, "selectedIndex", void 0), o([n({
+	type: Boolean,
+	attribute: "keep-dropdown-button-text"
+})], h.prototype, "keepDropdownButtonText", void 0), o([n({
+	type: String,
+	attribute: "items-mode"
+})], h.prototype, "itemsMode", void 0), o([n({
+	type: String,
+	attribute: "actions-mode"
+})], h.prototype, "actionsMode", void 0), o([r()], h.prototype, "openItems", void 0), o([r()], h.prototype, "openCtas", void 0), o([r()], h.prototype, "hasScrollLeft", void 0), o([r()], h.prototype, "hasScrollRight", void 0), o([r()], h.prototype, "actionsCount", void 0), o([a({ slot: "items" })], h.prototype, "items", void 0), o([a({ slot: "actions" })], h.prototype, "ctas", void 0), o([i(".items-container")], h.prototype, "itemsContainer", void 0), h = m = o([c("ds-secondary-navigation")], h);
+//#endregion
+export { h as DsSecondaryNavigation };