@cupra/ui-kit 2.0.0-canary.16 → 2.0.0-canary.161

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

@@ -1,233 +1,293 @@
-import { UiKitElement as v } from "../base/UiKitElement.js";
-import { customUiKitElement as f } 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 m } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as p } 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 u } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { classMap as h } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as x } from "./styles/common.styles.js";
-var I = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (e, t, s, n) => {
-  for (var i = n > 1 ? void 0 : n ? C(t, s) : t, d = e.length - 1, c; d >= 0; d--)
-    (c = e[d]) && (i = (n ? c(t, s, i) : c(i)) || i);
-  return n && i && I(t, s, i), i;
-};
-let o = class extends w(v) {
-  constructor() {
-    super(...arguments), this.dropdownButtonText = "Menu", this.openItems = !1, this.openCtas = !1, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
-      this.handleScroll();
-    }), this.handleScroll = () => {
-      var t, s, n, i;
-      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 < ((i = this.itemsContainer) == null ? void 0 : i.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, this.openCtas = !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, i;
-    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 = ((i = t.textContent) == null ? void 0 : i.trim()) || t.getAttribute("data-label") || "";
-      this.dispatchEvent(
-        new CustomEvent("ds-secondary-navigation:select", {
-          detail: {
-            index: s,
-            label: d
-          },
-          bubbles: !0,
-          composed: !0
-        })
-      ), this.closeDropdowns();
-    }
-  }
-  render() {
-    return a`
+import { E as e, x as t } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { e as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import { o as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as o } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/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 { e as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
+import { ViewportMixin as d } from "../../mixins/ViewportMixin.js";
+import "../ds-button/ds-button.js";
+import "../ds-icon-button/ds-icon-button.js";
+import { commonStyles as f } from "./styles/common.styles.js";
+//#region src/components/ds-secondary-navigation/ds-secondary-navigation.ts
+var p, m = class extends d(s) {
+	static {
+		p = this;
+	}
+	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.resizeObserver = new ResizeObserver(() => {
+			this.handleScroll();
+		}), this.handleScroll = () => {
+			let e = this.itemsContainer?.scrollLeft + this.itemsContainer?.clientWidth;
+			this.hasScrollLeft = this.itemsContainer?.scrollLeft > 0, this.hasScrollRight = e < this.itemsContainer?.scrollWidth;
+		};
+	}
+	static {
+		this.styles = [f];
+	}
+	static {
+		this.RESPONSIVE_BUTTON_SIZE = JSON.stringify({
+			xs: "medium",
+			s: "medium",
+			m: "medium",
+			l: "medium",
+			xl: "large",
+			xxl: "large"
+		});
+	}
+	static {
+		this.VIEWPORT_ORDER = [
+			"xs",
+			"s",
+			"m",
+			"l",
+			"xl",
+			"xxl"
+		];
+	}
+	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 = p.VIEWPORT_ORDER.indexOf(t);
+		for (let e = a; e >= 0; e--) {
+			let t = p.VIEWPORT_ORDER[e];
+			if (t in i) return i[t];
+		}
+		return n;
+	}
+	get resolvedItemsMode() {
+		return p.resolveResponsive(this.itemsMode, this.viewport, "auto");
+	}
+	get resolvedActionsMode() {
+		return p.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) {
+		super.firstUpdated(e), this.handleScroll(), this.itemsContainer && this.resizeObserver.observe(this.itemsContainer), window.addEventListener("resize", this.handleScroll), this.itemsContainer?.addEventListener("scroll", this.handleScroll);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScroll);
+	}
+	get selectedItemText() {
+		return this.keepDropdownButtonText ? this.dropdownButtonText : this.items?.[this.selectedIndex]?.textContent?.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() {
+		this.items?.forEach((e, t) => {
+			t === this.selectedIndex ? e.classList.add("selected") : e.classList.remove("selected");
+		});
+	}
+	updateCtas() {
+		this.ctas?.forEach((e) => {
+			["xxl", "xl"].includes(this.viewport) ? e?.setAttribute("size", "large") : e?.setAttribute("size", "medium");
+		});
+	}
+	handleItemClick(e) {
+		let t = e.target, n = this.items?.indexOf(t) ?? -1;
+		if (n !== -1) {
+			this.selectedIndex = n, this.updateSelectedItem();
+			let e = t.textContent?.trim() || t.getAttribute("data-label") || "";
+			this.dispatchEvent(new CustomEvent("ds-secondary-navigation:select", {
+				detail: {
+					index: n,
+					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" ? !0 : [
+			"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" ? !0 : [
+			"xxs",
+			"xs",
+			"s"
+		].includes(this.viewport) && this.ctas.length > 1;
+	}
+	render() {
+		return t`
             ${this.backdropTemplate}
             <div class="container gutter">
-                <nav data-testid="ds-secondary-navigation-container" class=${h(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 ? t`
             <div class="items-container">
                 <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`
+        ` : e;
+	}
+	get actionsTemplate() {
+		return this.shouldShowActionsInline ? t`
             <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"
+        ` : e;
+	}
+	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=${p.RESPONSIVE_BUTTON_SIZE}
+                variant="secondary"
+                icon-name="list-line"
+            ></ds-icon-button>` : l`<ds-button
+            class="items-dropdown-button"
+            variant="secondary"
+            size=${p.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>` : e;
+	}
+	get itemsDropdownTemplate() {
+		return this.shouldShowItemsDropdownButton ? t`
             <div
-                class=${h({
-      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"
-                >
+                <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`
-            <div                     
-                class=${h({
-      gutter: !0,
-      "dropdown-container": !0,
-      "actions-dropdown": !0,
-      open: this.openCtas
-    })}                    
+        ` : e;
+	}
+	get actionsDropdownButtonTemplate() {
+		return this.shouldShowActionsDropdownButton ? l`<ds-icon-button
+            class="nav-arrow"
+            data-aria-label="open actions dropdown"
+            @click=${this.toggleActionsDropdown}
+            size=${p.RESPONSIVE_BUTTON_SIZE}
+            icon-name="triple-dot-v"
+        ></ds-icon-button>` : e;
+	}
+	get actionsDropdownTemplate() {
+		return this.shouldShowActionsDropdownButton ? t`
+            <div
+                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"
-
-                >
+                <div class="dropdown ds-blur">
                     <slot name="actions"></slot>
                 </div>
             </div>
-        ` : l;
-  }
-  get backdropTemplate() {
-    return !this.openItems && !this.openCtas ? l : a`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`;
-  }
-};
-o.styles = [x];
-r([
-  m({ type: String, attribute: "dropdown-button-text" })
-], o.prototype, "dropdownButtonText", 2);
-r([
-  m({ type: Number, attribute: "selected-index" })
-], o.prototype, "selectedIndex", 2);
-r([
-  p()
-], o.prototype, "openItems", 2);
-r([
-  p()
-], o.prototype, "openCtas", 2);
-r([
-  p()
-], o.prototype, "hasScrollLeft", 2);
-r([
-  p()
-], o.prototype, "hasScrollRight", 2);
-r([
-  u({ slot: "items" })
-], o.prototype, "items", 2);
-r([
-  u({ slot: "actions" })
-], o.prototype, "ctas", 2);
-r([
-  g(".items-container")
-], o.prototype, "itemsContainer", 2);
-o = r([
-  f("ds-secondary-navigation")
-], o);
-export {
-  o as DsSecondaryNavigation
+        ` : e;
+	}
+	get backdropTemplate() {
+		return !this.openItems && !this.openCtas ? e : t`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`;
+	}
 };
+o([n({
+	type: String,
+	attribute: "dropdown-button-text"
+})], m.prototype, "dropdownButtonText", void 0), o([n({
+	type: Number,
+	attribute: "selected-index"
+})], m.prototype, "selectedIndex", void 0), o([n({
+	type: Boolean,
+	attribute: "keep-dropdown-button-text"
+})], m.prototype, "keepDropdownButtonText", void 0), o([n({
+	type: String,
+	attribute: "items-mode"
+})], m.prototype, "itemsMode", void 0), o([n({
+	type: String,
+	attribute: "actions-mode"
+})], m.prototype, "actionsMode", void 0), o([r()], m.prototype, "openItems", void 0), o([r()], m.prototype, "openCtas", void 0), o([r()], m.prototype, "hasScrollLeft", void 0), o([r()], m.prototype, "hasScrollRight", void 0), o([a({ slot: "items" })], m.prototype, "items", void 0), o([a({ slot: "actions" })], m.prototype, "ctas", void 0), o([i(".items-container")], m.prototype, "itemsContainer", void 0), m = p = o([c("ds-secondary-navigation")], m);
+//#endregion

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

@@ -1,12 +1,10 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../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 { css as o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const p = o`
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-secondary-navigation/styles/common.styles.ts
+var t = e`
     :host {
         display: contents;
     }
 `;
-export {
-  p as commonStyles
-};
+//#endregion
+export { t as commonStyles };