dap-design-system 0.62.3 → 0.63.0

package/dist/components/command/command.component.js

@@ -1,7 +1,7 @@
 var w = Object.getPrototypeOf;
 var y = Reflect.get;
-var m = (n, e, t) => y(w(n), t, e);
-var d = (n, e, t) => new Promise((s, i) => {
+var g = (r, e, t) => y(w(r), t, e);
+var d = (r, e, t) => new Promise((s, i) => {
   var l = (o) => {
     try {
       u(t.next(o));
@@ -15,23 +15,18 @@ var d = (n, e, t) => new Promise((s, i) => {
       i(c);
     }
   }, u = (o) => o.done ? s(o.value) : Promise.resolve(o.value).then(l, p);
-  u((t = t.apply(n, e)).next());
+  u((t = t.apply(r, e)).next());
 });
 import { clsx as b } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as k } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as g } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as _ } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { queryAssignedElements as C } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { html as D } from "../../node_modules/lit-html/static.js";
-import { createKeyboardNavigationHandler as v } from "../../internal/keyboard-navigation.js";
+import { unsafeCSS as k, nothing as _ } from "lit";
+import { queryAssignedElements as C, property as m, state as D } from "lit/decorators.js";
+import { html as v } from "lit/static-html.js";
+import { createKeyboardNavigationHandler as $ } from "../../internal/keyboard-navigation.js";
 import f from "../popup/popup.component.js";
-import $ from "./command.scss.js";
-import { unsafeCSS as A } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var E = Object.defineProperty, h = (n, e, t, s) => {
-  for (var i = void 0, l = n.length - 1, p; l >= 0; l--)
-    (p = n[l]) && (i = p(e, t, i) || i);
+import A from "./command.scss.js";
+var E = Object.defineProperty, h = (r, e, t, s) => {
+  for (var i = void 0, l = r.length - 1, p; l >= 0; l--)
+    (p = r[l]) && (i = p(e, t, i) || i);
   return i && E(e, t, i), i;
 };
 const a = class a extends f {
@@ -42,7 +37,7 @@ const a = class a extends f {
   }
   connectedCallback() {
     return d(this, null, function* () {
-      yield m(a.prototype, this, "connectedCallback").call(this), this.addEventListener("keydown", this._handleKeyDown), this.handleClick = this.handleClick.bind(this), this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+      yield g(a.prototype, this, "connectedCallback").call(this), this.addEventListener("keydown", this._handleKeyDown), this.handleClick = this.handleClick.bind(this), this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
     });
   }
   disconnectedCallback() {
@@ -58,11 +53,11 @@ const a = class a extends f {
   }
   updated(e) {
     return d(this, null, function* () {
-      yield m(a.prototype, this, "updated").call(this, e), e.has("opened") && this.opened && (yield this.updateComplete, this._initializeKeyboardNavigation());
+      yield g(a.prototype, this, "updated").call(this, e), e.has("opened") && this.opened && (yield this.updateComplete, this._initializeKeyboardNavigation());
     });
   }
   _initializeKeyboardNavigation() {
-    this._keyboardNavigation = v(this, {
+    this._keyboardNavigation = $(this, {
       enabledSelector: "dap-ds-command-item:not([disabled]):not([hidden]):not(dap-ds-command-group[hidden] *)",
       onItemClick: (e) => {
         this._lastClickedItem = e;
@@ -137,13 +132,13 @@ const a = class a extends f {
     (e = this._keyboardNavigation) == null || e.invalidateCache();
   }
   render() {
-    return D`
+    return v`
       <dap-ds-popup
         part="popup-base"
         id="popup"
         role="menu"
         aria-label=${this.ariaLabel || "Command menu"}
-        aria-labelledby=${this.ariaLabelledBy || k}
+        aria-labelledby=${this.ariaLabelledBy || _}
         aria-orientation="vertical"
         ?opened=${this.opened}
         exportparts="popup"
@@ -172,24 +167,24 @@ const a = class a extends f {
 };
 a.tagName = "dap-ds-command", a.dependencies = {
   "dap-ds-popup": f
-}, a.styles = A($);
-let r = a;
+}, a.styles = k(A);
+let n = a;
 h([
   C({ slot: "trigger" })
-], r.prototype, "_trigger");
+], n.prototype, "_trigger");
 h([
-  g({ type: String })
-], r.prototype, "value");
+  m({ type: String })
+], n.prototype, "value");
 h([
-  g({ type: Boolean })
-], r.prototype, "fullWidth");
+  m({ type: Boolean })
+], n.prototype, "fullWidth");
 h([
-  g({ type: String, attribute: "aria-labelledby" })
-], r.prototype, "ariaLabelledBy");
+  m({ type: String, attribute: "aria-labelledby" })
+], n.prototype, "ariaLabelledBy");
 h([
-  _()
-], r.prototype, "_lastClickedItem");
+  D()
+], n.prototype, "_lastClickedItem");
 export {
-  r as default
+  n as default
 };
 //# sourceMappingURL=command.component.js.map

package/dist/components/command/command.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"command.component.js","sources":["../../../src/components/command/command.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, queryAssignedElements, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { createKeyboardNavigationHandler } from '../../internal/keyboard-navigation.js'\nimport DapDSPopup from '../popup/popup.component.js'\nimport styles from './command.scss?inline'\n\n/**\n * `dap-ds-command`\n * @summary A command is a component that displays a list of commands.\n * @element dap-ds-command\n * @title - Command\n *\n * @event {{ value: string }} dds-change - Fired when the command value changes.\n *\n * @slot trigger - The trigger element for the command dropdown.\n * @slot - The command items.\n */\nexport default class DapDSCommand extends DapDSPopup {\n  static tagName = 'dap-ds-command'\n\n  static dependencies = {\n    'dap-ds-popup': DapDSPopup,\n  }\n\n  constructor() {\n    super()\n    this.placement = 'bottom-start'\n    this.overflow = true\n  }\n\n  @queryAssignedElements({ slot: 'trigger' })\n  private readonly _trigger!: HTMLElement[]\n\n  static readonly styles = unsafeCSS(styles)\n\n  /**\n   * The value of the command.\n   */\n  @property({ type: String })\n  value: string | null = null\n\n  /** Whether the command popup should take full width of the screen. */\n  @property({ type: Boolean }) fullWidth: boolean = false\n\n  /** ID of element that labels the command dropdown. */\n  @property({ type: String, attribute: 'aria-labelledby' })\n  ariaLabelledBy?: string\n\n  @state()\n  private _lastClickedItem: HTMLElement | null = null\n\n  private _keyboardNavigation: ReturnType<\n    typeof createKeyboardNavigationHandler\n  > | null = null\n\n  async connectedCallback() {\n    await super.connectedCallback()\n    this.addEventListener('keydown', this._handleKeyDown)\n    // Bind methods to maintain proper context\n    this.handleClick = this.handleClick.bind(this)\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.removeEventListener('keydown', this._handleKeyDown)\n    // Ensure document listener is cleaned up\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties as Map<string, unknown>)\n\n    if (this.value) {\n      const item = this.querySelector(\n        `dap-ds-command-item[value=\"${this.value}\"]`,\n      )\n      if (item) {\n        this._lastClickedItem = item as HTMLElement\n        this._lastClickedItem.focus()\n      }\n    }\n  }\n\n  async updated(changedProperties: Map<string, unknown>) {\n    await super.updated(changedProperties)\n\n    if (changedProperties.has('opened') && this.opened) {\n      // Initialize keyboard navigation when dropdown opens\n      await this.updateComplete\n      this._initializeKeyboardNavigation()\n    }\n  }\n\n  private _initializeKeyboardNavigation() {\n    this._keyboardNavigation = createKeyboardNavigationHandler(this, {\n      enabledSelector:\n        'dap-ds-command-item:not([disabled]):not([hidden]):not(dap-ds-command-group[hidden] *)',\n      onItemClick: (item: HTMLElement) => {\n        this._lastClickedItem = item\n      },\n    })\n\n    // Initialize focus after next update\n    this.updateComplete.then(() => {\n      this._keyboardNavigation?.initializeFocus(\n        this._lastClickedItem || undefined,\n      )\n    })\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Home':\n      case 'End':\n      case 'Enter':\n      case ' ':\n        if (!this.opened) {\n          if (\n            event.key === 'ArrowDown' ||\n            event.key === 'ArrowUp' ||\n            event.key === 'Enter' ||\n            event.key === ' '\n          ) {\n            event.preventDefault()\n            this.showDropDown()\n          }\n          return\n        }\n\n        if (this._keyboardNavigation?.handleKeyDown(event)) {\n          // Key was handled by navigation manager\n          if (event.key === 'Enter' || event.key === ' ') {\n            this._handleFocusOut()\n          }\n        }\n        break\n\n      case 'Escape':\n        event.preventDefault()\n        this._handleFocusOut()\n        break\n    }\n  }\n\n  private _handleMenuItemClick(event: CustomEvent) {\n    const { value, closeOnSelect } = event.detail\n    this.emit('dds-change', { value })\n    if (closeOnSelect === 'true') {\n      this._lastClickedItem = event.target as HTMLElement\n      this._handleFocusOut()\n    }\n  }\n\n  private handleClick(event: MouseEvent) {\n    // Prevent the default action so that when the command is nested inside an\n    // interactive ancestor (e.g. a card rendered as an `<a href>`), toggling\n    // the menu does not also activate that ancestor and navigate away.\n    // `stopPropagation` alone is not enough: native anchor activation is a\n    // default action, not listener propagation.\n    event.preventDefault()\n    event.stopPropagation()\n    this.opened ? this.hideDropDown() : this.showDropDown()\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    const path = event.composedPath()\n    if (this && !path.includes(this)) {\n      this.hideDropDown()\n    }\n  }\n\n  async showDropDown() {\n    if (this.opened) {\n      return\n    }\n\n    this.opened = true\n    this._trigger[0]?.setAttribute('aria-expanded', 'true')\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown)\n\n    await this.updateComplete\n  }\n\n  async hideDropDown(options?: { skipFocus?: boolean }) {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n    this._trigger[0]?.setAttribute('aria-expanded', 'false')\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n\n    // Reset keyboard navigation state\n    this._keyboardNavigation?.reset()\n\n    await this.updateComplete\n\n    if (!options?.skipFocus) {\n      this.focus()\n    }\n  }\n\n  private _handleFocusOut() {\n    this.hideDropDown()\n    this.focus()\n  }\n\n  private _handlePopupAutoClose = () => {\n    this.hideDropDown({ skipFocus: true })\n  }\n\n  public focus() {\n    if (this._trigger && this._trigger.length > 0) {\n      const triggerElement = this._trigger[0]\n      const rect = triggerElement.getBoundingClientRect()\n      const isFullyInViewport =\n        rect.top >= 0 &&\n        rect.left >= 0 &&\n        rect.bottom <= window.innerHeight &&\n        rect.right <= window.innerWidth\n\n      if (isFullyInViewport) {\n        triggerElement.focus({ preventScroll: true })\n      }\n    }\n  }\n\n  private _handleTriggerChange() {\n    if (this._trigger && this._trigger.length > 0) {\n      this._trigger[0].setAttribute('aria-controls', 'popup')\n      this._trigger[0].setAttribute(\n        'aria-expanded',\n        this.opened ? 'true' : 'false',\n      )\n    }\n  }\n\n  private _handleDefaultSlotChange() {\n    this._keyboardNavigation?.invalidateCache()\n  }\n\n  render() {\n    return html`\n      <dap-ds-popup\n        part=\"popup-base\"\n        id=\"popup\"\n        role=\"menu\"\n        aria-label=${this.ariaLabel || 'Command menu'}\n        aria-labelledby=${this.ariaLabelledBy || nothing}\n        aria-orientation=\"vertical\"\n        ?opened=${this.opened}\n        exportparts=\"popup\"\n        class=${clsx('command')}\n        placement=${this.placement}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n        maxHeight=${this.maxHeight}\n        ?overflow=${this.overflow}\n        offset=${this.offset}\n        ?sync=${this.sync}\n        ?hasArrow=${this.hasArrow}\n        ?fullWidth=${this.fullWidth}\n        ?disableViewportAutoClose=${this.disableViewportAutoClose}\n        floatingStrategy=${this.floatingStrategy}\n        @dds-close=${this._handlePopupAutoClose}\n        @dds-command-item-click=${this._handleMenuItemClick}>\n        <slot\n          name=\"trigger\"\n          slot=\"trigger\"\n          @slotchange=${this._handleTriggerChange}></slot>\n        <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n      </dap-ds-popup>\n    `\n  }\n}\n"],"names":["_DapDSCommand","DapDSPopup","__async","__superGet","_changedProperties","item","changedProperties","createKeyboardNavigationHandler","_a","event","value","closeOnSelect","path","options","_b","triggerElement","rect","html","nothing","clsx","unsafeCSS","styles","DapDSCommand","__decorateClass","queryAssignedElements","property","state"],"mappings":"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"}
+{"version":3,"file":"command.component.js","sources":["../../../src/components/command/command.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, queryAssignedElements, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { createKeyboardNavigationHandler } from '../../internal/keyboard-navigation.js'\nimport DapDSPopup from '../popup/popup.component.js'\nimport styles from './command.scss?inline'\n\n/**\n * `dap-ds-command`\n * @summary A command is a component that displays a list of commands.\n * @element dap-ds-command\n * @title - Command\n *\n * @event {{ value: string }} dds-change - Fired when the command value changes.\n *\n * @slot trigger - The trigger element for the command dropdown.\n * @slot - The command items.\n *\n * @csspart popup-base - The popup element of the command.\n * @csspart popup - The popup container of the command.\n */\nexport default class DapDSCommand extends DapDSPopup {\n  static tagName = 'dap-ds-command'\n\n  static dependencies = {\n    'dap-ds-popup': DapDSPopup,\n  }\n\n  constructor() {\n    super()\n    this.placement = 'bottom-start'\n    this.overflow = true\n  }\n\n  @queryAssignedElements({ slot: 'trigger' })\n  private readonly _trigger!: HTMLElement[]\n\n  static readonly styles = unsafeCSS(styles)\n\n  /**\n   * The value of the command.\n   */\n  @property({ type: String })\n  value: string | null = null\n\n  /** Whether the command popup should take full width of the screen. */\n  @property({ type: Boolean }) fullWidth: boolean = false\n\n  /** ID of element that labels the command dropdown. */\n  @property({ type: String, attribute: 'aria-labelledby' })\n  ariaLabelledBy?: string\n\n  @state()\n  private _lastClickedItem: HTMLElement | null = null\n\n  private _keyboardNavigation: ReturnType<\n    typeof createKeyboardNavigationHandler\n  > | null = null\n\n  async connectedCallback() {\n    await super.connectedCallback()\n    this.addEventListener('keydown', this._handleKeyDown)\n    // Bind methods to maintain proper context\n    this.handleClick = this.handleClick.bind(this)\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.removeEventListener('keydown', this._handleKeyDown)\n    // Ensure document listener is cleaned up\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties as Map<string, unknown>)\n\n    if (this.value) {\n      const item = this.querySelector(\n        `dap-ds-command-item[value=\"${this.value}\"]`,\n      )\n      if (item) {\n        this._lastClickedItem = item as HTMLElement\n        this._lastClickedItem.focus()\n      }\n    }\n  }\n\n  async updated(changedProperties: Map<string, unknown>) {\n    await super.updated(changedProperties)\n\n    if (changedProperties.has('opened') && this.opened) {\n      // Initialize keyboard navigation when dropdown opens\n      await this.updateComplete\n      this._initializeKeyboardNavigation()\n    }\n  }\n\n  private _initializeKeyboardNavigation() {\n    this._keyboardNavigation = createKeyboardNavigationHandler(this, {\n      enabledSelector:\n        'dap-ds-command-item:not([disabled]):not([hidden]):not(dap-ds-command-group[hidden] *)',\n      onItemClick: (item: HTMLElement) => {\n        this._lastClickedItem = item\n      },\n    })\n\n    // Initialize focus after next update\n    this.updateComplete.then(() => {\n      this._keyboardNavigation?.initializeFocus(\n        this._lastClickedItem || undefined,\n      )\n    })\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Home':\n      case 'End':\n      case 'Enter':\n      case ' ':\n        if (!this.opened) {\n          if (\n            event.key === 'ArrowDown' ||\n            event.key === 'ArrowUp' ||\n            event.key === 'Enter' ||\n            event.key === ' '\n          ) {\n            event.preventDefault()\n            this.showDropDown()\n          }\n          return\n        }\n\n        if (this._keyboardNavigation?.handleKeyDown(event)) {\n          // Key was handled by navigation manager\n          if (event.key === 'Enter' || event.key === ' ') {\n            this._handleFocusOut()\n          }\n        }\n        break\n\n      case 'Escape':\n        event.preventDefault()\n        this._handleFocusOut()\n        break\n    }\n  }\n\n  private _handleMenuItemClick(event: CustomEvent) {\n    const { value, closeOnSelect } = event.detail\n    this.emit('dds-change', { value })\n    if (closeOnSelect === 'true') {\n      this._lastClickedItem = event.target as HTMLElement\n      this._handleFocusOut()\n    }\n  }\n\n  private handleClick(event: MouseEvent) {\n    // Prevent the default action so that when the command is nested inside an\n    // interactive ancestor (e.g. a card rendered as an `<a href>`), toggling\n    // the menu does not also activate that ancestor and navigate away.\n    // `stopPropagation` alone is not enough: native anchor activation is a\n    // default action, not listener propagation.\n    event.preventDefault()\n    event.stopPropagation()\n    this.opened ? this.hideDropDown() : this.showDropDown()\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    const path = event.composedPath()\n    if (this && !path.includes(this)) {\n      this.hideDropDown()\n    }\n  }\n\n  async showDropDown() {\n    if (this.opened) {\n      return\n    }\n\n    this.opened = true\n    this._trigger[0]?.setAttribute('aria-expanded', 'true')\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown)\n\n    await this.updateComplete\n  }\n\n  async hideDropDown(options?: { skipFocus?: boolean }) {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n    this._trigger[0]?.setAttribute('aria-expanded', 'false')\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n\n    // Reset keyboard navigation state\n    this._keyboardNavigation?.reset()\n\n    await this.updateComplete\n\n    if (!options?.skipFocus) {\n      this.focus()\n    }\n  }\n\n  private _handleFocusOut() {\n    this.hideDropDown()\n    this.focus()\n  }\n\n  private _handlePopupAutoClose = () => {\n    this.hideDropDown({ skipFocus: true })\n  }\n\n  public focus() {\n    if (this._trigger && this._trigger.length > 0) {\n      const triggerElement = this._trigger[0]\n      const rect = triggerElement.getBoundingClientRect()\n      const isFullyInViewport =\n        rect.top >= 0 &&\n        rect.left >= 0 &&\n        rect.bottom <= window.innerHeight &&\n        rect.right <= window.innerWidth\n\n      if (isFullyInViewport) {\n        triggerElement.focus({ preventScroll: true })\n      }\n    }\n  }\n\n  private _handleTriggerChange() {\n    if (this._trigger && this._trigger.length > 0) {\n      this._trigger[0].setAttribute('aria-controls', 'popup')\n      this._trigger[0].setAttribute(\n        'aria-expanded',\n        this.opened ? 'true' : 'false',\n      )\n    }\n  }\n\n  private _handleDefaultSlotChange() {\n    this._keyboardNavigation?.invalidateCache()\n  }\n\n  render() {\n    return html`\n      <dap-ds-popup\n        part=\"popup-base\"\n        id=\"popup\"\n        role=\"menu\"\n        aria-label=${this.ariaLabel || 'Command menu'}\n        aria-labelledby=${this.ariaLabelledBy || nothing}\n        aria-orientation=\"vertical\"\n        ?opened=${this.opened}\n        exportparts=\"popup\"\n        class=${clsx('command')}\n        placement=${this.placement}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n        maxHeight=${this.maxHeight}\n        ?overflow=${this.overflow}\n        offset=${this.offset}\n        ?sync=${this.sync}\n        ?hasArrow=${this.hasArrow}\n        ?fullWidth=${this.fullWidth}\n        ?disableViewportAutoClose=${this.disableViewportAutoClose}\n        floatingStrategy=${this.floatingStrategy}\n        @dds-close=${this._handlePopupAutoClose}\n        @dds-command-item-click=${this._handleMenuItemClick}>\n        <slot\n          name=\"trigger\"\n          slot=\"trigger\"\n          @slotchange=${this._handleTriggerChange}></slot>\n        <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n      </dap-ds-popup>\n    `\n  }\n}\n"],"names":["_DapDSCommand","DapDSPopup","__async","__superGet","_changedProperties","item","changedProperties","createKeyboardNavigationHandler","_a","event","value","closeOnSelect","path","options","_b","triggerElement","rect","html","nothing","clsx","unsafeCSS","styles","DapDSCommand","__decorateClass","queryAssignedElements","property","state"],"mappings":"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"}

package/dist/components/content-switcher/content-switcher-item.component.js

@@ -1,19 +1,16 @@
 import { clsx as d } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as s } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { ifDefined as a } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as u } from "../../node_modules/lit-html/static.js";
-import { DdsElement as f } from "../../internal/dds-hu-element.js";
+import { unsafeCSS as f } from "lit";
+import { property as s } from "lit/decorators.js";
+import { ifDefined as a } from "lit/directives/if-defined.js";
+import { html as u } from "lit/static-html.js";
+import { DdsElement as h } from "../../internal/dds-hu-element.js";
 import m from "./content-switcher-item.scss.js";
-import { unsafeCSS as h } from "../../node_modules/@lit/reactive-element/css-tag.js";
 var y = Object.defineProperty, o = (c, l, p, b) => {
-  for (var t = void 0, i = c.length - 1, n; i >= 0; i--)
-    (n = c[i]) && (t = n(l, p, t) || t);
-  return t && y(l, p, t), t;
+  for (var e = void 0, i = c.length - 1, n; i >= 0; i--)
+    (n = c[i]) && (e = n(l, p, e) || e);
+  return e && y(l, p, e), e;
 };
-const r = class r extends f {
+const r = class r extends h {
   constructor() {
     super(...arguments), this.checked = !1, this.disabled = !1;
   }
@@ -36,21 +33,21 @@ const r = class r extends f {
     `;
   }
 };
-r.tagName = "dap-ds-content-switcher-item", r.styles = h(m);
-let e = r;
+r.tagName = "dap-ds-content-switcher-item", r.styles = f(m);
+let t = r;
 o([
   s({ type: String, reflect: !0 })
-], e.prototype, "value");
+], t.prototype, "value");
 o([
   s({ type: Boolean })
-], e.prototype, "checked");
+], t.prototype, "checked");
 o([
   s({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled");
+], t.prototype, "disabled");
 o([
   s({ type: String, reflect: !0 })
-], e.prototype, "name");
+], t.prototype, "name");
 export {
-  e as default
+  t as default
 };
 //# sourceMappingURL=content-switcher-item.component.js.map

package/dist/components/content-switcher/content-switcher-item.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-switcher-item.component.js","sources":["../../../src/components/content-switcher/content-switcher-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './content-switcher-item.scss?inline'\n\n/**\n * `dap-ds-content-switcher-item`\n * @summary Segmented control item component for the segmented control.\n * @element dap-ds-content-switcher-item\n * @title - Content switcher item\n * @group content-switcher\n *\n * @slot iconcontent - The icon content of the segmented control item.\n *\n * @csspart input - The input of the segmented control item.\n *\n * @cssproperty --dds-content-switcher-item-height - The height of the content switcher item (default: var(--dds-spacing-800, 32px))\n * @cssproperty --dds-content-switcher-item-padding - The padding of the content switcher item (default: var(--dds-spacing-200, 8px) var(--dds-spacing-400, 16px))\n * @cssproperty --dds-content-switcher-item-font-size - The font size of the content switcher item (default: var(--dds-size-sm, 14px))\n * @cssproperty --dds-content-switcher-item-font-weight - The font weight of the content switcher item (default: var(--dds-weight-bold, 700))\n * @cssproperty --dds-content-switcher-item-border-radius - The border radius of the content switcher item (default: var(--dds-radius-large, 16px))\n * @cssproperty --dds-content-switcher-item-background - The background color of the content switcher item (default: transparent)\n * @cssproperty --dds-content-switcher-item-color - The text color of the content switcher item (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-content-switcher-item-border-color - The border color of the content switcher item (default: transparent)\n * @cssproperty --dds-content-switcher-item-checked-background - The background color of the checked content switcher item (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-content-switcher-item-checked-color - The text color of the checked content switcher item (default: var(--dds-text-neutral-on-inverted))\n * @cssproperty --dds-content-switcher-item-checked-border-color - The border color of the checked content switcher item (default: var(--dds-border-neutral-transparent-interactive))\n */\nexport default class DapDSContentSwitcherItem extends DdsElement {\n  static tagName = 'dap-ds-content-switcher-item'\n\n  /** The value of the segmented control item. */\n  @property({ type: String, reflect: true }) value: string\n  /** The checked state of the segmented control item. */\n  @property({ type: Boolean }) checked: boolean = false\n  /** The disabled state of the segmented control item. */\n  @property({ type: Boolean, reflect: true }) disabled: boolean = false\n  /** The name of the segmented control item. */\n  @property({ type: String, reflect: true }) name: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <button\n        part=\"input\"\n        name=${ifDefined(this.name)}\n        value=${ifDefined(this.value)}\n        .checked=${this.checked}\n        .disabled=${this.disabled}\n        aria-label=${ifDefined(this.ariaLabel) || ''}\n        aria-pressed=${this.checked}\n        .autofocus=${this.autofocus}\n        class=${clsx('content-switcher__input', {\n          'content-switcher__input--checked': this.checked,\n        })}>\n        <slot slot=\"iconcontent\"></slot>\n      </button>\n    `\n  }\n}\n"],"names":["_DapDSContentSwitcherItem","DdsElement","html","ifDefined","clsx","unsafeCSS","styles","DapDSContentSwitcherItem","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;AAgCA,MAAqBA,IAArB,MAAqBA,UAAiCC,EAAW;AAAA,EAAjE,cAAA;AAAA,UAAA,GAAA,SAAA,GAMkD,KAAA,UAAA,IAEgB,KAAA,WAAA;AAAA,EAAA;AAAA,EAMhE,SAAS;AACA,WAAAC;AAAAA;AAAAA;AAAAA,eAGIC,EAAU,KAAK,IAAI,CAAC;AAAA,gBACnBA,EAAU,KAAK,KAAK,CAAC;AAAA,mBAClB,KAAK,OAAO;AAAA,oBACX,KAAK,QAAQ;AAAA,qBACZA,EAAU,KAAK,SAAS,KAAK,EAAE;AAAA,uBAC7B,KAAK,OAAO;AAAA,qBACd,KAAK,SAAS;AAAA,gBACnBC,EAAK,2BAA2B;AAAA,MACtC,oCAAoC,KAAK;AAAA,IAAA,CAC1C,CAAC;AAAA;AAAA;AAAA;AAAA,EAAA;AAKV;AA/BEJ,EAAO,UAAU,gCAWDA,EAAA,SAASK,EAAUC,CAAM;AAZ3C,IAAqBC,IAArBP;AAI6CQ,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAJtBF,EAIwB,WAAA,OAAA;AAEdC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GANRF,EAMU,WAAA,SAAA;AAEeC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GARvBF,EAQyB,WAAA,UAAA;AAEDC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAVtBF,EAUwB,WAAA,MAAA;"}
+{"version":3,"file":"content-switcher-item.component.js","sources":["../../../src/components/content-switcher/content-switcher-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './content-switcher-item.scss?inline'\n\n/**\n * `dap-ds-content-switcher-item`\n * @summary Segmented control item component for the segmented control.\n * @element dap-ds-content-switcher-item\n * @title - Content switcher item\n * @group content-switcher\n *\n * @slot iconcontent - The icon content of the segmented control item.\n *\n * @csspart input - The input of the segmented control item.\n *\n * @cssproperty --dds-content-switcher-item-height - The height of the content switcher item (default: var(--dds-spacing-800, 32px))\n * @cssproperty --dds-content-switcher-item-padding - The padding of the content switcher item (default: var(--dds-spacing-200, 8px) var(--dds-spacing-400, 16px))\n * @cssproperty --dds-content-switcher-item-font-size - The font size of the content switcher item (default: var(--dds-size-sm, 14px))\n * @cssproperty --dds-content-switcher-item-font-weight - The font weight of the content switcher item (default: var(--dds-weight-bold, 700))\n * @cssproperty --dds-content-switcher-item-border-radius - The border radius of the content switcher item (default: var(--dds-radius-large, 16px))\n * @cssproperty --dds-content-switcher-item-background - The background color of the content switcher item (default: transparent)\n * @cssproperty --dds-content-switcher-item-color - The text color of the content switcher item (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-content-switcher-item-border-color - The border color of the content switcher item (default: transparent)\n * @cssproperty --dds-content-switcher-item-checked-background - The background color of the checked content switcher item (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-content-switcher-item-checked-color - The text color of the checked content switcher item (default: var(--dds-text-neutral-on-inverted))\n * @cssproperty --dds-content-switcher-item-checked-border-color - The border color of the checked content switcher item (default: var(--dds-border-neutral-transparent-interactive))\n */\nexport default class DapDSContentSwitcherItem extends DdsElement {\n  static tagName = 'dap-ds-content-switcher-item'\n\n  /** The value of the segmented control item. */\n  @property({ type: String, reflect: true }) value: string\n  /** The checked state of the segmented control item. */\n  @property({ type: Boolean }) checked: boolean = false\n  /** The disabled state of the segmented control item. */\n  @property({ type: Boolean, reflect: true }) disabled: boolean = false\n  /** The name of the segmented control item. */\n  @property({ type: String, reflect: true }) name: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <button\n        part=\"input\"\n        name=${ifDefined(this.name)}\n        value=${ifDefined(this.value)}\n        .checked=${this.checked}\n        .disabled=${this.disabled}\n        aria-label=${ifDefined(this.ariaLabel) || ''}\n        aria-pressed=${this.checked}\n        .autofocus=${this.autofocus}\n        class=${clsx('content-switcher__input', {\n          'content-switcher__input--checked': this.checked,\n        })}>\n        <slot slot=\"iconcontent\"></slot>\n      </button>\n    `\n  }\n}\n"],"names":["_DapDSContentSwitcherItem","DdsElement","html","ifDefined","clsx","unsafeCSS","styles","DapDSContentSwitcherItem","__decorateClass","property"],"mappings":";;;;;;;;;;;;AAgCA,MAAqBA,IAArB,MAAqBA,UAAiCC,EAAW;AAAA,EAAjE,cAAA;AAAA,UAAA,GAAA,SAAA,GAMkD,KAAA,UAAA,IAEgB,KAAA,WAAA;AAAA,EAAA;AAAA,EAMhE,SAAS;AACA,WAAAC;AAAA;AAAA;AAAA,eAGIC,EAAU,KAAK,IAAI,CAAC;AAAA,gBACnBA,EAAU,KAAK,KAAK,CAAC;AAAA,mBAClB,KAAK,OAAO;AAAA,oBACX,KAAK,QAAQ;AAAA,qBACZA,EAAU,KAAK,SAAS,KAAK,EAAE;AAAA,uBAC7B,KAAK,OAAO;AAAA,qBACd,KAAK,SAAS;AAAA,gBACnBC,EAAK,2BAA2B;AAAA,MACtC,oCAAoC,KAAK;AAAA,IAAA,CAC1C,CAAC;AAAA;AAAA;AAAA;AAAA,EAAA;AAKV;AA/BEJ,EAAO,UAAU,gCAWDA,EAAA,SAASK,EAAUC,CAAM;AAZ3C,IAAqBC,IAArBP;AAI6CQ,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAJtBF,EAIwB,WAAA,OAAA;AAEdC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GANRF,EAMU,WAAA,SAAA;AAEeC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GARvBF,EAQyB,WAAA,UAAA;AAEDC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAVtBF,EAUwB,WAAA,MAAA;"}

package/dist/components/content-switcher/content-switcher.component.js

@@ -1,34 +1,31 @@
-var m = (r, l, e) => new Promise((i, s) => {
+var d = (c, l, e) => new Promise((i, s) => {
   var t = (a) => {
     try {
       o(e.next(a));
     } catch (h) {
       s(h);
     }
-  }, c = (a) => {
+  }, r = (a) => {
     try {
       o(e.throw(a));
     } catch (h) {
       s(h);
     }
-  }, o = (a) => a.done ? i(a.value) : Promise.resolve(a.value).then(t, c);
-  o((e = e.apply(r, l)).next());
+  }, o = (a) => a.done ? i(a.value) : Promise.resolve(a.value).then(t, r);
+  o((e = e.apply(c, l)).next());
 });
 import { clsx as v } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as d } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as f } from "../../node_modules/lit-html/static.js";
-import { DdsElement as y } from "../../internal/dds-hu-element.js";
-import g from "./content-switcher.scss.js";
-import { unsafeCSS as k } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var I = Object.defineProperty, p = (r, l, e, i) => {
-  for (var s = void 0, t = r.length - 1, c; t >= 0; t--)
-    (c = r[t]) && (s = c(l, e, s) || s);
+import { unsafeCSS as f } from "lit";
+import { property as m } from "lit/decorators.js";
+import { html as y } from "lit/static-html.js";
+import { DdsElement as g } from "../../internal/dds-hu-element.js";
+import k from "./content-switcher.scss.js";
+var I = Object.defineProperty, p = (c, l, e, i) => {
+  for (var s = void 0, t = c.length - 1, r; t >= 0; t--)
+    (r = c[t]) && (s = r(l, e, s) || s);
   return s && I(l, e, s), s;
 };
-const n = class n extends y {
+const n = class n extends g {
   constructor() {
     super(...arguments), this.multiSelect = !1;
   }
@@ -40,10 +37,10 @@ const n = class n extends y {
     ];
   }
   syncInputElements() {
-    return m(this, null, function* () {
+    return d(this, null, function* () {
       const l = this.getAllInputs();
       yield Promise.all(
-        l.map((e) => m(this, null, function* () {
+        l.map((e) => d(this, null, function* () {
           var i;
           if (this.multiSelect && this.value) {
             const s = (i = this.value) == null ? void 0 : i.split(",").map((t) => t.trim());
@@ -62,7 +59,7 @@ const n = class n extends y {
     l.has("value") && this.syncInputElements();
   }
   render() {
-    return f`
+    return y`
       <div part="base" class=${v("content-switcher")}>
         <slot
           @click=${this.handleInputClick}
@@ -71,13 +68,13 @@ const n = class n extends y {
     `;
   }
 };
-n.tagName = "dap-ds-content-switcher", n.styles = k(g);
+n.tagName = "dap-ds-content-switcher", n.styles = f(k);
 let u = n;
 p([
-  d({ type: Boolean, reflect: !0 })
+  m({ type: Boolean, reflect: !0 })
 ], u.prototype, "multiSelect");
 p([
-  d({ type: String, reflect: !0 })
+  m({ type: String, reflect: !0 })
 ], u.prototype, "value");
 export {
   u as default

package/dist/components/content-switcher/content-switcher.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-switcher.component.js","sources":["../../../src/components/content-switcher/content-switcher.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValues, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DapDSContentSwitcherItem } from '@/dap-design-system'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './content-switcher.scss?inline'\n\n/**\n * `dap-ds-content-switcher`\n * @summary A content switcher is a set of two or more segments, each of which functions as a mutually exclusive button.\n * @element dap-ds-content-switcher\n * @title - Content switcher\n *\n * @slot - The content switcher items.\n *\n * @event {{ value: string, selected: boolean }} dds-change - Fired when the content switcher is changed.\n *\n * @csspart base - The main content switcher container.\n *\n * @cssproperty --dds-content-switcher-min-width - The minimum width of the content switcher (default: var(--dds-spacing-4000, 160px))\n * @cssproperty --dds-content-switcher-padding - The padding of the content switcher (default: var(--dds-spacing-100, 4px))\n * @cssproperty --dds-content-switcher-border-width - The border width of the content switcher (default: var(--dds-border-width-base))\n * @cssproperty --dds-content-switcher-border-color - The border color of the content switcher (default: var(--dds-border-neutral-transparent))\n * @cssproperty --dds-content-switcher-border-radius - The border radius of the content switcher (default: var(--dds-radius-rounded, 1000px))\n * @cssproperty --dds-content-switcher-background - The background color of the content switcher (default: var(--dds-transparent-black-subtle, rgb(0 0 0 / 5%)))\n * @cssproperty --dds-content-switcher-gap - The gap between content switcher items (default: var(--dds-spacing-100, 4px))\n */\nexport default class DapDSContentSwitcher extends DdsElement {\n  static tagName = 'dap-ds-content-switcher'\n\n  /** Whether the content switcher allows multiple selections. */\n  @property({ type: Boolean, reflect: true }) multiSelect: boolean = false\n  /** The value of the content switcher. A comma-separated list if `multiSelect` is `true`. */\n  @property({ type: String, reflect: true }) value: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  private getAllInputs() {\n    return [\n      ...this.querySelectorAll<DapDSContentSwitcherItem>(\n        'dap-ds-content-switcher-item',\n      ),\n    ]\n  }\n\n  private async syncInputElements() {\n    const inputs = this.getAllInputs()\n\n    await Promise.all(\n      inputs.map(async input => {\n        if (this.multiSelect && this.value) {\n          const values = this.value?.split(',').map(item => item.trim())\n\n          input.checked = values.includes(input.value)\n        } else {\n          input.checked = input.value === this.value\n        }\n      }),\n    )\n  }\n\n  private handleInputClick(event: MouseEvent) {\n    const target = (\n      event.target as HTMLElement\n    ).closest<DapDSContentSwitcherItem>('dap-ds-content-switcher-item')\n    const inputs = this.getAllInputs()\n    const oldValue = this.value\n\n    if (target!.disabled) {\n      return\n    }\n\n    if (!this.multiSelect) {\n      this.value = target!.value\n      inputs.forEach(input => (input.checked = input === target))\n\n      if (this.value !== oldValue) {\n        this.emit('dds-change', { value: target!.value, selected: true })\n      }\n    } else {\n      target!.checked = !target!.checked\n      this.value = inputs\n        .filter(input => input.checked)\n        .map(input => input.value)\n        .join(',')\n\n      this.emit('dds-change', { value: this.value })\n    }\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('value')) {\n      this.syncInputElements()\n    }\n  }\n\n  render() {\n    return html`\n      <div part=\"base\" class=${clsx('content-switcher')}>\n        <slot\n          @click=${this.handleInputClick}\n          @slotchange=${this.syncInputElements}></slot>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSContentSwitcher","DdsElement","__async","inputs","input","values","_a","item","event","target","oldValue","_changedProperties","html","clsx","unsafeCSS","styles","DapDSContentSwitcher","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAqBA,IAArB,MAAqBA,UAA6BC,EAAW;AAAA,EAA7D,cAAA;AAAA,UAAA,GAAA,SAAA,GAIqE,KAAA,cAAA;AAAA,EAAA;AAAA,EAM3D,eAAe;AACd,WAAA;AAAA,MACL,GAAG,KAAK;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAAA,EAGY,oBAAoB;AAAA,WAAAC,EAAA;AAC1B,YAAAC,IAAS,KAAK,aAAa;AAEjC,YAAM,QAAQ;AAAA,QACZA,EAAO,IAAI,CAAMC,MAASF,EAAA;;AACpB,cAAA,KAAK,eAAe,KAAK,OAAO;AAC5B,kBAAAG,KAASC,IAAA,KAAK,UAAL,gBAAAA,EAAY,MAAM,KAAK,IAAI,CAAAC,MAAQA,EAAK,KAAA;AAEvD,YAAAH,EAAM,UAAUC,EAAO,SAASD,EAAM,KAAK;AAAA,UAAA;AAErC,YAAAA,EAAA,UAAUA,EAAM,UAAU,KAAK;AAAA,QAExC,EAAA;AAAA,MACH;AAAA,IAAA;AAAA;AAAA,EAGM,iBAAiBI,GAAmB;AAC1C,UAAMC,IACJD,EAAM,OACN,QAAkC,8BAA8B,GAC5DL,IAAS,KAAK,aAAa,GAC3BO,IAAW,KAAK;AAEtB,IAAID,EAAQ,aAIP,KAAK,eAQAA,EAAA,UAAU,CAACA,EAAQ,SAC3B,KAAK,QAAQN,EACV,OAAO,CAAAC,MAASA,EAAM,OAAO,EAC7B,IAAI,CAASA,MAAAA,EAAM,KAAK,EACxB,KAAK,GAAG,GAEX,KAAK,KAAK,cAAc,EAAE,OAAO,KAAK,OAAO,MAb7C,KAAK,QAAQK,EAAQ,OACrBN,EAAO,QAAQ,CAAAC,MAAUA,EAAM,UAAUA,MAAUK,CAAO,GAEtD,KAAK,UAAUC,KACZ,KAAA,KAAK,cAAc,EAAE,OAAOD,EAAQ,OAAO,UAAU,IAAM;AAAA,EAUpE;AAAA,EAGQ,QAAQE,GAA0C;AACtD,IAAAA,EAAmB,IAAI,OAAO,KAChC,KAAK,kBAAkB;AAAA,EACzB;AAAA,EAGF,SAAS;AACA,WAAAC;AAAAA,+BACoBC,EAAK,kBAAkB,CAAC;AAAA;AAAA,mBAEpC,KAAK,gBAAgB;AAAA,wBAChB,KAAK,iBAAiB;AAAA;AAAA;AAAA,EAAA;AAI9C;AA7EEb,EAAO,UAAU,2BAODA,EAAA,SAASc,EAAUC,CAAM;AAR3C,IAAqBC,IAArBhB;AAI8CiB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAJvBF,EAIyB,WAAA,aAAA;AAEDC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GANtBF,EAMwB,WAAA,OAAA;"}
+{"version":3,"file":"content-switcher.component.js","sources":["../../../src/components/content-switcher/content-switcher.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValues, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DapDSContentSwitcherItem } from '@/dap-design-system'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './content-switcher.scss?inline'\n\n/**\n * `dap-ds-content-switcher`\n * @summary A content switcher is a set of two or more segments, each of which functions as a mutually exclusive button.\n * @element dap-ds-content-switcher\n * @title - Content switcher\n *\n * @slot - The content switcher items.\n *\n * @event {{ value: string, selected: boolean }} dds-change - Fired when the content switcher is changed.\n *\n * @csspart base - The main content switcher container.\n *\n * @cssproperty --dds-content-switcher-min-width - The minimum width of the content switcher (default: var(--dds-spacing-4000, 160px))\n * @cssproperty --dds-content-switcher-padding - The padding of the content switcher (default: var(--dds-spacing-100, 4px))\n * @cssproperty --dds-content-switcher-border-width - The border width of the content switcher (default: var(--dds-border-width-base))\n * @cssproperty --dds-content-switcher-border-color - The border color of the content switcher (default: var(--dds-border-neutral-transparent))\n * @cssproperty --dds-content-switcher-border-radius - The border radius of the content switcher (default: var(--dds-radius-rounded, 1000px))\n * @cssproperty --dds-content-switcher-background - The background color of the content switcher (default: var(--dds-transparent-black-subtle, rgb(0 0 0 / 5%)))\n * @cssproperty --dds-content-switcher-gap - The gap between content switcher items (default: var(--dds-spacing-100, 4px))\n */\nexport default class DapDSContentSwitcher extends DdsElement {\n  static tagName = 'dap-ds-content-switcher'\n\n  /** Whether the content switcher allows multiple selections. */\n  @property({ type: Boolean, reflect: true }) multiSelect: boolean = false\n  /** The value of the content switcher. A comma-separated list if `multiSelect` is `true`. */\n  @property({ type: String, reflect: true }) value: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  private getAllInputs() {\n    return [\n      ...this.querySelectorAll<DapDSContentSwitcherItem>(\n        'dap-ds-content-switcher-item',\n      ),\n    ]\n  }\n\n  private async syncInputElements() {\n    const inputs = this.getAllInputs()\n\n    await Promise.all(\n      inputs.map(async input => {\n        if (this.multiSelect && this.value) {\n          const values = this.value?.split(',').map(item => item.trim())\n\n          input.checked = values.includes(input.value)\n        } else {\n          input.checked = input.value === this.value\n        }\n      }),\n    )\n  }\n\n  private handleInputClick(event: MouseEvent) {\n    const target = (\n      event.target as HTMLElement\n    ).closest<DapDSContentSwitcherItem>('dap-ds-content-switcher-item')\n    const inputs = this.getAllInputs()\n    const oldValue = this.value\n\n    if (target!.disabled) {\n      return\n    }\n\n    if (!this.multiSelect) {\n      this.value = target!.value\n      inputs.forEach(input => (input.checked = input === target))\n\n      if (this.value !== oldValue) {\n        this.emit('dds-change', { value: target!.value, selected: true })\n      }\n    } else {\n      target!.checked = !target!.checked\n      this.value = inputs\n        .filter(input => input.checked)\n        .map(input => input.value)\n        .join(',')\n\n      this.emit('dds-change', { value: this.value })\n    }\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('value')) {\n      this.syncInputElements()\n    }\n  }\n\n  render() {\n    return html`\n      <div part=\"base\" class=${clsx('content-switcher')}>\n        <slot\n          @click=${this.handleInputClick}\n          @slotchange=${this.syncInputElements}></slot>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSContentSwitcher","DdsElement","__async","inputs","input","values","_a","item","event","target","oldValue","_changedProperties","html","clsx","unsafeCSS","styles","DapDSContentSwitcher","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAqBA,IAArB,MAAqBA,UAA6BC,EAAW;AAAA,EAA7D,cAAA;AAAA,UAAA,GAAA,SAAA,GAIqE,KAAA,cAAA;AAAA,EAAA;AAAA,EAM3D,eAAe;AACd,WAAA;AAAA,MACL,GAAG,KAAK;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAAA,EAGY,oBAAoB;AAAA,WAAAC,EAAA;AAC1B,YAAAC,IAAS,KAAK,aAAa;AAEjC,YAAM,QAAQ;AAAA,QACZA,EAAO,IAAI,CAAMC,MAASF,EAAA;;AACpB,cAAA,KAAK,eAAe,KAAK,OAAO;AAC5B,kBAAAG,KAASC,IAAA,KAAK,UAAL,gBAAAA,EAAY,MAAM,KAAK,IAAI,CAAAC,MAAQA,EAAK,KAAA;AAEvD,YAAAH,EAAM,UAAUC,EAAO,SAASD,EAAM,KAAK;AAAA,UAAA;AAErC,YAAAA,EAAA,UAAUA,EAAM,UAAU,KAAK;AAAA,QAExC,EAAA;AAAA,MACH;AAAA,IAAA;AAAA;AAAA,EAGM,iBAAiBI,GAAmB;AAC1C,UAAMC,IACJD,EAAM,OACN,QAAkC,8BAA8B,GAC5DL,IAAS,KAAK,aAAa,GAC3BO,IAAW,KAAK;AAEtB,IAAID,EAAQ,aAIP,KAAK,eAQAA,EAAA,UAAU,CAACA,EAAQ,SAC3B,KAAK,QAAQN,EACV,OAAO,CAAAC,MAASA,EAAM,OAAO,EAC7B,IAAI,CAASA,MAAAA,EAAM,KAAK,EACxB,KAAK,GAAG,GAEX,KAAK,KAAK,cAAc,EAAE,OAAO,KAAK,OAAO,MAb7C,KAAK,QAAQK,EAAQ,OACrBN,EAAO,QAAQ,CAAAC,MAAUA,EAAM,UAAUA,MAAUK,CAAO,GAEtD,KAAK,UAAUC,KACZ,KAAA,KAAK,cAAc,EAAE,OAAOD,EAAQ,OAAO,UAAU,IAAM;AAAA,EAUpE;AAAA,EAGQ,QAAQE,GAA0C;AACtD,IAAAA,EAAmB,IAAI,OAAO,KAChC,KAAK,kBAAkB;AAAA,EACzB;AAAA,EAGF,SAAS;AACA,WAAAC;AAAA,+BACoBC,EAAK,kBAAkB,CAAC;AAAA;AAAA,mBAEpC,KAAK,gBAAgB;AAAA,wBAChB,KAAK,iBAAiB;AAAA;AAAA;AAAA,EAAA;AAI9C;AA7EEb,EAAO,UAAU,2BAODA,EAAA,SAASc,EAAUC,CAAM;AAR3C,IAAqBC,IAArBhB;AAI8CiB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAJvBF,EAIyB,WAAA,aAAA;AAEDC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GANtBF,EAMwB,WAAA,OAAA;"}

package/dist/components/copybox-input/copybox-input.component.d.ts

@@ -82,6 +82,17 @@ import { InputBaseElement } from '../input/input-base-element';
  * @csspart copy-button-content - The content of the copy button.
  * @csspart copy-icon - The copy icon of the component.
  * @csspart copy-icon-base - The base of the copy icon.
+ * @csspart input - The input element.
+ * @csspart label - The label of the input.
+ * @csspart description - The description of the input.
+ * @csspart feedback - The feedback of the input.
+ * @csspart tooltip - The tooltip of the input.
+ * @csspart addon-before - The addon before the input.
+ * @csspart addon-after - The addon after the input.
+ * @csspart prefix - The prefix of the input.
+ * @csspart label-base - The base of the label.
+ * @csspart label-required - The required indicator of the label.
+ * @csspart label-optional - The optional indicator of the label.
  */
 export default class DapDSCopyBoxInput extends InputBaseElement {
     static tagName: string;

package/dist/components/copybox-input/copybox-input.component.js

@@ -1,18 +1,14 @@
 import { clsx as d } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as l } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { ifDefined as u } from "../../node_modules/lit-html/directives/if-defined.js";
-import "../../localization/localization.js";
-import m from "../icon/icon.component.js";
-import b from "../icon-button/icon-button.component.js";
+import { html as l } from "lit";
+import { property as r } from "lit/decorators.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import b from "../icon/icon.component.js";
+import h from "../icon-button/icon-button.component.js";
 import { InputBaseElement as y } from "../input/input-base-element.js";
-import { translate as h } from "../../node_modules/lit-i18n/src/lit-i18n.js";
-var f = Object.defineProperty, c = (p, o, n, v) => {
-  for (var t = void 0, s = p.length - 1, a; s >= 0; s--)
-    (a = p[s]) && (t = a(o, n, t) || t);
-  return t && f(o, n, t), t;
+var m = Object.defineProperty, c = (n, o, p, f) => {
+  for (var t = void 0, s = n.length - 1, a; s >= 0; s--)
+    (a = n[s]) && (t = a(o, p, t) || t);
+  return t && m(o, p, t), t;
 };
 const e = class e extends y {
   constructor() {
@@ -30,7 +26,7 @@ const e = class e extends y {
           icon="clipboard-line"
           size=${u(this.size)}
           ?disabled=${this.disabled}
-          aria-label=${this.copyButtonAriaLabel ? this.copyButtonAriaLabel : h("copy")}
+          aria-label=${this.copyButtonAriaLabel ? this.copyButtonAriaLabel : this.localize.t("copy")}
           @click="${this.onCopy}">
           <slot name="copy-icon">
             <dap-ds-icon
@@ -55,8 +51,8 @@ const e = class e extends y {
   }
 };
 e.tagName = "dap-ds-copybox-input", e.dependencies = {
-  "dap-ds-icon-button": b,
-  "dap-ds-icon": m
+  "dap-ds-icon-button": h,
+  "dap-ds-icon": b
 };
 let i = e;
 c([

package/dist/components/copybox-input/copybox-input.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"copybox-input.component.js","sources":["../../../src/components/copybox-input/copybox-input.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { CommonFormElementSize } from '@/common/types'\nimport { translate } from '@/localization/localization'\n\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport { InputBaseElement } from '../input/input-base-element'\n\n/**\n * `dap-ds-copybox-input`\n * @summary A copybox input is a field for copying an input value.\n * @element dap-ds-copybox-input\n * @title - CopyBox input\n *\n * @property {string} label - The label of the input.\n * @property {string} placeholder - The placeholder of the input.\n * @property {string} description - The description of the input.\n * @property {string} tooltip - The tooltip of the input.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The position of the tooltip. Can be `top`, `right`, `bottom`, or `left`.\n * @property {'success' | 'error'} status - The status of the input. Can be `success` or `error`.\n * @property {'xs' | 'sm' | 'sm'} size - The size of the input. Default is `sm`.\n * @property {string} name - The name of the input.\n * @property {string} value - The value of the input.\n * @property {boolean} disabled - The disabled state of the input. Default is false.\n * @property {boolean} required - The required state of the input. Default is false.\n * @property {boolean} readonly - The readonly state of the input. Default is false.\n * @property {boolean} autofocus - The autofocus state of the input. Default is false.\n * @property {string} feedback - The feedback of the input.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} loading - The loading state of the input. Default is false.\n * @property {boolean} optional - The optional state of the input.\n * @property {string} optionalLabel - The optional label of the input.\n * @property {string} requiredLabel - The required indicator of the input. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {string} copyButtonAriaLabel - The aria label of the copy button.\n *\n * @event {{ value: string }} dds-copy - Fired when the user clicks on the copy button.\n * @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ value: string }} dds-input - Fired when the input value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n * @event {{ void }} dds-not-allowed - Emitted when the value cannot be copied.\n *\n * @cssproperty --dds-input-height-xs - The height of the extra small input. (default: var(--dds-spacing-800))\n * @cssproperty --dds-input-height-sm - The height of the small input. (default: var(--dds-spacing-1000))\n * @cssproperty --dds-input-height-lg - The height of the large input. (default: var(--dds-spacing-1200))\n * @cssproperty --dds-input-padding-xs - The padding of the extra small input. (default: 0 var(--dds-spacing-200))\n * @cssproperty --dds-input-padding-sm - The padding of the small input. (default: 0 var(--dds-spacing-300))\n * @cssproperty --dds-input-padding-lg - The padding of the large input. (default: 0 var(--dds-spacing-400))\n * @cssproperty --dds-input-font-size-xs - The font size of the extra small input. (default: var(--dds-font-sm))\n * @cssproperty --dds-input-font-size-sm - The font size of the small input. (default: var(--dds-font-base))\n * @cssproperty --dds-input-font-size-lg - The font size of the large input. (default: var(--dds-font-lg))\n * @cssproperty --dds-input-border - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base))\n * @cssproperty --dds-input-background - The background color of the input. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-input-text-color - The text color of the input. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-input-border-radius - The border radius of the input. (default: var(--dds-radius-base))\n * @cssproperty --dds-input-disabled-border - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled))\n * @cssproperty --dds-input-disabled-background - The background color of the disabled input. (default: var(--dds-fields-background-disabled))\n * @cssproperty --dds-input-disabled-text - The text color of the disabled input. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-input-readonly-border - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle))\n * @cssproperty --dds-input-readonly-background - The background color of the readonly input. (default: var(--dds-fields-background-read-only))\n * @cssproperty --dds-input-readonly-text - The text color of the readonly input. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-input-success-border - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))\n * @cssproperty --dds-input-error-border - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base))\n * @cssproperty --dds-input-addon-background - The background color of the input addon. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-input-addon-success-background - The background color of the success input addon. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-input-addon-error-background - The background color of the error input addon. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-input-addon-border-before - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base))\n * @cssproperty --dds-input-addon-border-after - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base))\n * @cssproperty --dds-input-addon-border-width-before - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base))\n * @cssproperty --dds-input-addon-border-width-after - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0)\n * @cssproperty --dds-input-addon-success-border - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))\n * @cssproperty --dds-input-addon-success-border-before - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))\n * @cssproperty --dds-input-addon-success-border-after - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))\n * @cssproperty --dds-input-addon-success-border-width-before - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base))\n * @cssproperty --dds-input-addon-success-border-width-after - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0)\n * @cssproperty --dds-input-addon-error-border-before - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base))\n * @cssproperty --dds-input-addon-error-border-after - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base))\n * @cssproperty --dds-input-addon-error-border-width-before - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base))\n * @cssproperty --dds-input-addon-error-border-width-after - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0)\n *\n * @csspart base - The base container of the component.\n * @csspart postfix - The inner postfix icon part of the component.\n * @csspart button - The button of the component.\n * @csspart copy-button-base - The base of the copy button.\n * @csspart copy-button-content - The content of the copy button.\n * @csspart copy-icon - The copy icon of the component.\n * @csspart copy-icon-base - The base of the copy icon.\n */\nexport default class DapDSCopyBoxInput extends InputBaseElement {\n  static tagName = 'dap-ds-copybox-input'\n\n  static dependencies = {\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  constructor() {\n    super()\n    this.type = 'text'\n  }\n\n  @property({ type: String }) copyButtonAriaLabel?: string\n\n  /** `data-testid` for the copy button. */\n  @property() copyButtonTestId = 'copybox-copy-button'\n\n  render() {\n    return this.renderInput(\n      html`<span\n        class=${clsx('input__addon-postfix copybox-input')}\n        part=\"base\">\n        <dap-ds-icon-button\n          part=\"button\"\n          exportparts=\"base: copy-button-base, content: copy-button-content\"\n          data-testid=${this.copyButtonTestId}\n          icon=\"clipboard-line\"\n          size=${ifDefined(this.size as CommonFormElementSize)}\n          ?disabled=${this.disabled}\n          aria-label=${this.copyButtonAriaLabel\n            ? this.copyButtonAriaLabel\n            : translate('copy')}\n          @click=\"${this.onCopy}\">\n          <slot name=\"copy-icon\">\n            <dap-ds-icon\n              name=\"clipboard-line\"\n              part=\"copy-icon\"\n              exportparts=\"icon: copy-icon, base: copy-icon-base\"></dap-ds-icon>\n          </slot>\n        </dap-ds-icon-button>\n      </span>`,\n    )\n  }\n\n  onCopy() {\n    const inputElement = this.innerInput as HTMLInputElement\n    this.value = inputElement.value\n    this.emit('dds-copy', { value: this.value })\n    this.copyToClipboard()\n  }\n\n  private copyToClipboard() {\n    navigator.clipboard\n      .writeText(this.value)\n      .then(() => {\n        this.emit('dds-copy', { value: this.value })\n      })\n      .catch(() => {\n        this.emit('dds-not-allowed')\n      })\n  }\n}\n"],"names":["_DapDSCopyBoxInput","InputBaseElement","html","clsx","ifDefined","translate","inputElement","DapDSIconButton","DapDSIcon","DapDSCopyBoxInput","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;AA8FA,MAAqBA,IAArB,MAAqBA,UAA0BC,EAAiB;AAAA,EAQ9D,cAAc;AACN,UAAA,GAOuB,KAAA,mBAAA,uBAN7B,KAAK,OAAO;AAAA,EAAA;AAAA,EAQd,SAAS;AACP,WAAO,KAAK;AAAA,MACVC;AAAAA,gBACUC,EAAK,oCAAoC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKlC,KAAK,gBAAgB;AAAA;AAAA,iBAE5BC,EAAU,KAAK,IAA6B,CAAC;AAAA,sBACxC,KAAK,QAAQ;AAAA,uBACZ,KAAK,sBACd,KAAK,sBACLC,EAAU,MAAM,CAAC;AAAA,oBACX,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAS3B;AAAA,EAAA;AAAA,EAGF,SAAS;AACP,UAAMC,IAAe,KAAK;AAC1B,SAAK,QAAQA,EAAa,OAC1B,KAAK,KAAK,YAAY,EAAE,OAAO,KAAK,OAAO,GAC3C,KAAK,gBAAgB;AAAA,EAAA;AAAA,EAGf,kBAAkB;AACxB,cAAU,UACP,UAAU,KAAK,KAAK,EACpB,KAAK,MAAM;AACV,WAAK,KAAK,YAAY,EAAE,OAAO,KAAK,OAAO;AAAA,IAAA,CAC5C,EACA,MAAM,MAAM;AACX,WAAK,KAAK,iBAAiB;AAAA,IAAA,CAC5B;AAAA,EAAA;AAEP;AA7DEN,EAAO,UAAU,wBAEjBA,EAAO,eAAe;AAAA,EACpB,sBAAsBO;AAAA,EACtB,eAAeC;AACjB;AANF,IAAqBC,IAArBT;AAa8BU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAbPF,EAaS,WAAA,qBAAA;AAGhBC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAhBSF,EAgBP,WAAA,kBAAA;"}
+{"version":3,"file":"copybox-input.component.js","sources":["../../../src/components/copybox-input/copybox-input.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { CommonFormElementSize } from '@/common/types'\n\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport { InputBaseElement } from '../input/input-base-element'\n\n/**\n * `dap-ds-copybox-input`\n * @summary A copybox input is a field for copying an input value.\n * @element dap-ds-copybox-input\n * @title - CopyBox input\n *\n * @property {string} label - The label of the input.\n * @property {string} placeholder - The placeholder of the input.\n * @property {string} description - The description of the input.\n * @property {string} tooltip - The tooltip of the input.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The position of the tooltip. Can be `top`, `right`, `bottom`, or `left`.\n * @property {'success' | 'error'} status - The status of the input. Can be `success` or `error`.\n * @property {'xs' | 'sm' | 'sm'} size - The size of the input. Default is `sm`.\n * @property {string} name - The name of the input.\n * @property {string} value - The value of the input.\n * @property {boolean} disabled - The disabled state of the input. Default is false.\n * @property {boolean} required - The required state of the input. Default is false.\n * @property {boolean} readonly - The readonly state of the input. Default is false.\n * @property {boolean} autofocus - The autofocus state of the input. Default is false.\n * @property {string} feedback - The feedback of the input.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} loading - The loading state of the input. Default is false.\n * @property {boolean} optional - The optional state of the input.\n * @property {string} optionalLabel - The optional label of the input.\n * @property {string} requiredLabel - The required indicator of the input. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {string} copyButtonAriaLabel - The aria label of the copy button.\n *\n * @event {{ value: string }} dds-copy - Fired when the user clicks on the copy button.\n * @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ value: string }} dds-input - Fired when the input value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n * @event {{ void }} dds-not-allowed - Emitted when the value cannot be copied.\n *\n * @cssproperty --dds-input-height-xs - The height of the extra small input. (default: var(--dds-spacing-800))\n * @cssproperty --dds-input-height-sm - The height of the small input. (default: var(--dds-spacing-1000))\n * @cssproperty --dds-input-height-lg - The height of the large input. (default: var(--dds-spacing-1200))\n * @cssproperty --dds-input-padding-xs - The padding of the extra small input. (default: 0 var(--dds-spacing-200))\n * @cssproperty --dds-input-padding-sm - The padding of the small input. (default: 0 var(--dds-spacing-300))\n * @cssproperty --dds-input-padding-lg - The padding of the large input. (default: 0 var(--dds-spacing-400))\n * @cssproperty --dds-input-font-size-xs - The font size of the extra small input. (default: var(--dds-font-sm))\n * @cssproperty --dds-input-font-size-sm - The font size of the small input. (default: var(--dds-font-base))\n * @cssproperty --dds-input-font-size-lg - The font size of the large input. (default: var(--dds-font-lg))\n * @cssproperty --dds-input-border - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base))\n * @cssproperty --dds-input-background - The background color of the input. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-input-text-color - The text color of the input. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-input-border-radius - The border radius of the input. (default: var(--dds-radius-base))\n * @cssproperty --dds-input-disabled-border - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled))\n * @cssproperty --dds-input-disabled-background - The background color of the disabled input. (default: var(--dds-fields-background-disabled))\n * @cssproperty --dds-input-disabled-text - The text color of the disabled input. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-input-readonly-border - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle))\n * @cssproperty --dds-input-readonly-background - The background color of the readonly input. (default: var(--dds-fields-background-read-only))\n * @cssproperty --dds-input-readonly-text - The text color of the readonly input. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-input-success-border - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))\n * @cssproperty --dds-input-error-border - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base))\n * @cssproperty --dds-input-addon-background - The background color of the input addon. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-input-addon-success-background - The background color of the success input addon. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-input-addon-error-background - The background color of the error input addon. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-input-addon-border-before - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base))\n * @cssproperty --dds-input-addon-border-after - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base))\n * @cssproperty --dds-input-addon-border-width-before - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base))\n * @cssproperty --dds-input-addon-border-width-after - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0)\n * @cssproperty --dds-input-addon-success-border - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))\n * @cssproperty --dds-input-addon-success-border-before - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))\n * @cssproperty --dds-input-addon-success-border-after - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base))\n * @cssproperty --dds-input-addon-success-border-width-before - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base))\n * @cssproperty --dds-input-addon-success-border-width-after - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0)\n * @cssproperty --dds-input-addon-error-border-before - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base))\n * @cssproperty --dds-input-addon-error-border-after - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base))\n * @cssproperty --dds-input-addon-error-border-width-before - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base))\n * @cssproperty --dds-input-addon-error-border-width-after - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0)\n *\n * @csspart base - The base container of the component.\n * @csspart postfix - The inner postfix icon part of the component.\n * @csspart button - The button of the component.\n * @csspart copy-button-base - The base of the copy button.\n * @csspart copy-button-content - The content of the copy button.\n * @csspart copy-icon - The copy icon of the component.\n * @csspart copy-icon-base - The base of the copy icon.\n * @csspart input - The input element.\n * @csspart label - The label of the input.\n * @csspart description - The description of the input.\n * @csspart feedback - The feedback of the input.\n * @csspart tooltip - The tooltip of the input.\n * @csspart addon-before - The addon before the input.\n * @csspart addon-after - The addon after the input.\n * @csspart prefix - The prefix of the input.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n */\nexport default class DapDSCopyBoxInput extends InputBaseElement {\n  static tagName = 'dap-ds-copybox-input'\n\n  static dependencies = {\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  constructor() {\n    super()\n    this.type = 'text'\n  }\n\n  @property({ type: String }) copyButtonAriaLabel?: string\n\n  /** `data-testid` for the copy button. */\n  @property() copyButtonTestId = 'copybox-copy-button'\n\n  render() {\n    return this.renderInput(\n      html`<span\n        class=${clsx('input__addon-postfix copybox-input')}\n        part=\"base\">\n        <dap-ds-icon-button\n          part=\"button\"\n          exportparts=\"base: copy-button-base, content: copy-button-content\"\n          data-testid=${this.copyButtonTestId}\n          icon=\"clipboard-line\"\n          size=${ifDefined(this.size as CommonFormElementSize)}\n          ?disabled=${this.disabled}\n          aria-label=${this.copyButtonAriaLabel\n            ? this.copyButtonAriaLabel\n            : this.localize.t('copy')}\n          @click=\"${this.onCopy}\">\n          <slot name=\"copy-icon\">\n            <dap-ds-icon\n              name=\"clipboard-line\"\n              part=\"copy-icon\"\n              exportparts=\"icon: copy-icon, base: copy-icon-base\"></dap-ds-icon>\n          </slot>\n        </dap-ds-icon-button>\n      </span>`,\n    )\n  }\n\n  onCopy() {\n    const inputElement = this.innerInput as HTMLInputElement\n    this.value = inputElement.value\n    this.emit('dds-copy', { value: this.value })\n    this.copyToClipboard()\n  }\n\n  private copyToClipboard() {\n    navigator.clipboard\n      .writeText(this.value)\n      .then(() => {\n        this.emit('dds-copy', { value: this.value })\n      })\n      .catch(() => {\n        this.emit('dds-not-allowed')\n      })\n  }\n}\n"],"names":["_DapDSCopyBoxInput","InputBaseElement","html","clsx","ifDefined","inputElement","DapDSIconButton","DapDSIcon","DapDSCopyBoxInput","__decorateClass","property"],"mappings":";;;;;;;;;;;;AAwGA,MAAqBA,IAArB,MAAqBA,UAA0BC,EAAiB;AAAA,EAQ9D,cAAc;AACN,UAAA,GAOuB,KAAA,mBAAA,uBAN7B,KAAK,OAAO;AAAA,EAAA;AAAA,EAQd,SAAS;AACP,WAAO,KAAK;AAAA,MACVC;AAAA,gBACUC,EAAK,oCAAoC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKlC,KAAK,gBAAgB;AAAA;AAAA,iBAE5BC,EAAU,KAAK,IAA6B,CAAC;AAAA,sBACxC,KAAK,QAAQ;AAAA,uBACZ,KAAK,sBACd,KAAK,sBACL,KAAK,SAAS,EAAE,MAAM,CAAC;AAAA,oBACjB,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAS3B;AAAA,EAAA;AAAA,EAGF,SAAS;AACP,UAAMC,IAAe,KAAK;AAC1B,SAAK,QAAQA,EAAa,OAC1B,KAAK,KAAK,YAAY,EAAE,OAAO,KAAK,OAAO,GAC3C,KAAK,gBAAgB;AAAA,EAAA;AAAA,EAGf,kBAAkB;AACxB,cAAU,UACP,UAAU,KAAK,KAAK,EACpB,KAAK,MAAM;AACV,WAAK,KAAK,YAAY,EAAE,OAAO,KAAK,OAAO;AAAA,IAAA,CAC5C,EACA,MAAM,MAAM;AACX,WAAK,KAAK,iBAAiB;AAAA,IAAA,CAC5B;AAAA,EAAA;AAEP;AA7DEL,EAAO,UAAU,wBAEjBA,EAAO,eAAe;AAAA,EACpB,sBAAsBM;AAAA,EACtB,eAAeC;AACjB;AANF,IAAqBC,IAArBR;AAa8BS,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAbPF,EAaS,WAAA,qBAAA;AAGhBC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAhBSF,EAgBP,WAAA,kBAAA;"}

package/dist/components/dap-badge/dap-badge.component.js

@@ -1,21 +1,16 @@
-import { clsx as p } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as o } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as t } from "../../node_modules/lit-html/static.js";
+import { clsx as r } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as H } from "lit";
+import { property as o } from "lit/decorators.js";
+import { html as t } from "lit/static-html.js";
 import { DdsElement as n } from "../../internal/dds-hu-element.js";
 import { SizedMixin as h } from "../../internal/mixin/sizedMixin.js";
-import "../../localization/localization.js";
 import M from "./dap-badge.scss.js";
-import { unsafeCSS as s } from "../../node_modules/@lit/reactive-element/css-tag.js";
-import { translate as H } from "../../node_modules/lit-i18n/src/lit-i18n.js";
-var Z = Object.defineProperty, v = (l, C, i, c) => {
-  for (var e = void 0, V = l.length - 1, r; V >= 0; V--)
-    (r = l[V]) && (e = r(C, i, e) || e);
+var Z = Object.defineProperty, s = (l, C, i, u) => {
+  for (var e = void 0, V = l.length - 1, p; V >= 0; V--)
+    (p = l[V]) && (e = p(C, i, e) || e);
   return e && Z(C, i, e), e;
 };
-const u = h(n), d = class d extends u {
+const v = h(n), d = class d extends v {
   constructor() {
     super(...arguments), this.variant = "normal";
   }
@@ -151,26 +146,26 @@ const u = h(n), d = class d extends u {
           </svg> `;
     return t`<div
       part="base"
-      class=${p("dap-badge", {
+      class=${r("dap-badge", {
       [`dap-badge--${this.variant}`]: this.variant,
       [`dap-badge--${this.dapBadgeSize}`]: this.dapBadgeSize
     })}>
       <div
-        class=${p("dap-badge__icon-container", {
+        class=${r("dap-badge__icon-container", {
       [`dap-badge__icon-container--${this.dapBadgeSize}`]: this.dapBadgeSize,
       [`dap-badge__icon-container--${this.variant}`]: this.variant
     })}>
         ${C}
       </div>
       <slot part="text">
-        ${this.dapBadgeSize === "sm" ? H("dap-badge") : H("dap-badge-large")}
+        ${this.dapBadgeSize === "sm" ? this.localize.t("dap-badge") : this.localize.t("dap-badge-large")}
       </slot>
     </div>`;
   }
 };
-d.tagName = "dap-ds-dap-badge", d.styles = s(M);
+d.tagName = "dap-ds-dap-badge", d.styles = H(M);
 let a = d;
-v([
+s([
   o({ type: String, reflect: !0 })
 ], a.prototype, "variant");
 export {