dap-design-system 0.62.0 → 0.62.1

package/dist/components/command/command-item.scss.js

@@ -1,4 +1,4 @@
-const d = ":host{--dds-command-item-padding: var(--dds-spacing-100) var(--dds-spacing-200);--dds-command-item-background: none;--dds-command-item-color: var(--dds-text-primary-base);--dds-command-item-hover-background: var(--dds-transparent-black-subtle);--dds-command-item-selected-background: var(--dds-transparent-black-subtle);display:flex}.command-item{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:flex;align-items:center;width:100%;padding:var(--dds-command-item-padding);border:0;border-radius:var(--dds-radius-small);background:var(--dds-command-item-background);color:var(--dds-command-item-color);font-family:inherit;font-size:var(--dds-font-size-base);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-font-line-height-xlarge);text-align:left;text-decoration:none;cursor:pointer}.command-item:hover:not(.command-item--disabled){background-color:var(--dds-command-item-hover-background)}.command-item:focus:not(.command-item--disabled){outline-style:solid}.command-item.command-item--selected{background-color:var(--dds-command-item-selected-background);color:var(--dds-command-item-color)}.command-item.command-item-selectable--disabled,.command-item.command-item--disabled{opacity:.5;cursor:not-allowed}.command-item__content{display:flex;align-items:center;gap:var(--dds-spacing-100);width:100%}.command-item__content--selectable{display:grid;grid-template-columns:var(--dds-spacing-600) 1fr;align-items:center;justify-content:space-between;gap:var(--dds-spacing-100);width:100%;cursor:pointer}.command-item__label{display:flex;flex:1;align-items:center;gap:var(--dds-spacing-100)}.command-item-check{margin-left:var(--dds-spacing-200);color:var(--dds-text-primary-base)}";
+const d = ":host{--dds-command-item-padding: var(--dds-spacing-100) var(--dds-spacing-200);--dds-command-item-background: none;--dds-command-item-color: var(--dds-text-primary-base);--dds-command-item-hover-background: var(--dds-transparent-black-subtle);--dds-command-item-selected-background: var(--dds-transparent-black-subtle);display:flex}:host([hidden]){display:none}.command-item{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:flex;align-items:center;width:100%;padding:var(--dds-command-item-padding);border:0;border-radius:var(--dds-radius-small);background:var(--dds-command-item-background);color:var(--dds-command-item-color);font-family:inherit;font-size:var(--dds-font-size-base);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-font-line-height-xlarge);text-align:left;text-decoration:none;cursor:pointer}.command-item:hover:not(.command-item--disabled){background-color:var(--dds-command-item-hover-background)}.command-item:focus:not(.command-item--disabled){outline-style:solid}.command-item.command-item--selected{background-color:var(--dds-command-item-selected-background);color:var(--dds-command-item-color)}.command-item.command-item-selectable--disabled,.command-item.command-item--disabled{opacity:.5;cursor:not-allowed}.command-item__content{display:flex;align-items:center;gap:var(--dds-spacing-100);width:100%}.command-item__content--selectable{display:grid;grid-template-columns:var(--dds-spacing-600) 1fr;align-items:center;justify-content:space-between;gap:var(--dds-spacing-100);width:100%;cursor:pointer}.command-item__label{display:flex;flex:1;align-items:center;gap:var(--dds-spacing-100)}.command-item-check{margin-left:var(--dds-spacing-200);color:var(--dds-text-primary-base)}";
 export {
   d as default
 };

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 h = (n, e, t) => new Promise((s, i) => {
+var d = (n, e, t) => new Promise((s, i) => {
   var l = (o) => {
     try {
       u(t.next(o));
@@ -29,7 +29,7 @@ import { createKeyboardNavigationHandler as v } from "../../internal/keyboard-na
 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, d = (n, e, t, s) => {
+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);
   return i && E(e, t, i), i;
@@ -41,7 +41,7 @@ const a = class a extends f {
     }, this.placement = "bottom-start", this.overflow = !0;
   }
   connectedCallback() {
-    return h(this, null, function* () {
+    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);
     });
   }
@@ -57,13 +57,13 @@ const a = class a extends f {
     }
   }
   updated(e) {
-    return h(this, null, function* () {
+    return d(this, null, function* () {
       yield m(a.prototype, this, "updated").call(this, e), e.has("opened") && this.opened && (yield this.updateComplete, this._initializeKeyboardNavigation());
     });
   }
   _initializeKeyboardNavigation() {
     this._keyboardNavigation = v(this, {
-      enabledSelector: "dap-ds-command-item:not([disabled])",
+      enabledSelector: "dap-ds-command-item:not([disabled]):not([hidden]):not(dap-ds-command-group[hidden] *)",
       onItemClick: (e) => {
         this._lastClickedItem = e;
       }
@@ -106,13 +106,13 @@ const a = class a extends f {
     this && !t.includes(this) && this.hideDropDown();
   }
   showDropDown() {
-    return h(this, null, function* () {
+    return d(this, null, function* () {
       var e;
       this.opened || (this.opened = !0, (e = this._trigger[0]) == null || e.setAttribute("aria-expanded", "true"), document.addEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete);
     });
   }
   hideDropDown(e) {
-    return h(this, null, function* () {
+    return d(this, null, function* () {
       var t, s;
       this.opened && (this.opened = !1, (t = this._trigger[0]) == null || t.setAttribute("aria-expanded", "false"), document.removeEventListener("mousedown", this.handleDocumentMouseDown), (s = this._keyboardNavigation) == null || s.reset(), yield this.updateComplete, e != null && e.skipFocus || this.focus());
     });
@@ -174,19 +174,19 @@ a.tagName = "dap-ds-command", a.dependencies = {
   "dap-ds-popup": f
 }, a.styles = A($);
 let r = a;
-d([
+h([
   C({ slot: "trigger" })
 ], r.prototype, "_trigger");
-d([
+h([
   g({ type: String })
 ], r.prototype, "value");
-d([
+h([
   g({ type: Boolean })
 ], r.prototype, "fullWidth");
-d([
+h([
   g({ type: String, attribute: "aria-labelledby" })
 ], r.prototype, "ariaLabelledBy");
-d([
+h([
   _()
 ], r.prototype, "_lastClickedItem");
 export {

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: 'dap-ds-command-item:not([disabled])',\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 */\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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"}