@nordhealth/components 5.0.0-alpha.0 → 5.0.1

package/lib/DropdownSubmenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownSubmenu.js","sources":["../src/dropdown-submenu/DropdownSubmenu.ts"],"sourcesContent":["import type Dropdown from '../dropdown/Dropdown.js'\nimport type Popout from '../popout/Popout.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './DropdownSubmenu.css'\nimport '../popout/Popout.js'\n\nlet popoutCounter = 0\n\n/**\n * Dropdown submenu nests a secondary menu within a parent dropdown.\n *\n * @status ready\n * @category action\n *\n * @slot trigger - The element that opens the submenu (typically nord-dropdown-item).\n * @slot - The submenu content items.\n *\n * @fires {NordEvent} open - Forwarded from the internal nord-popout.\n * @fires {NordEvent} close - Forwarded from the internal nord-popout.\n * @fires {CustomEvent} nord-submenu-navigate - Fired when mobile stack navigation activates this submenu.\n *\n * @parent Dropdown\n */\n@customElement('nord-dropdown-submenu')\nexport default class DropdownSubmenu extends LitElement {\n  static styles = [componentStyle, style]\n\n  @query('nord-popout')\n  private popout?: Popout\n\n  /** @internal */\n  @state() private mobileActive = false\n\n  private readonly popoutId = `nord-dropdown-submenu-popout-${++popoutCounter}`\n  private events = new EventController(this)\n  private currentTriggerElement: HTMLElement | null = null\n  private popoutOpen = false\n  private readonly mobileMediaQuery = window.matchMedia('(max-width: 35.9375em)')\n  @state() private isSmallScreen = this.mobileMediaQuery.matches\n  @state() private parentDropdownAlwaysFloating = false\n  private parentObserver?: MutationObserver\n\n  private get shouldUseMobileStack(): boolean {\n    return this.isSmallScreen && !this.parentDropdownAlwaysFloating\n  }\n\n  private get parentDropdown(): Dropdown | null {\n    return this.closest<Dropdown>('nord-dropdown')\n  }\n\n  private get isInSubmenuStack(): boolean {\n    const parent = this.parentDropdown\n    if (!parent)\n      return false\n    return parent.submenuStackRef.includes(this)\n  }\n\n  private get isDeepestInStack(): boolean {\n    const parent = this.parentDropdown\n    if (!parent)\n      return false\n    return parent.deepestSubmenu === this\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // Set aria-haspopup on trigger before first render\n    const triggerElement = this.querySelector<HTMLElement>('[slot=\"trigger\"]')\n    triggerElement?.setAttribute('aria-haspopup', 'menu')\n\n    // Read alwaysFloating from parent dropdown\n    const parentDropdown = this.closest<Dropdown>('nord-dropdown')\n    if (parentDropdown) {\n      this.parentDropdownAlwaysFloating = parentDropdown.alwaysFloating\n      // Close this submenu when a sibling regular item is hovered\n      this.events.listen(parentDropdown, 'mouseover', this.handleParentDropdownMouseOver)\n\n      // Observe always-floating attribute on parent dropdown for reactivity\n      this.parentObserver = new MutationObserver((mutations) => {\n        for (const mutation of mutations) {\n          if (mutation.attributeName === 'always-floating') {\n            this.parentDropdownAlwaysFloating = parentDropdown.alwaysFloating\n          }\n        }\n      })\n      this.parentObserver.observe(parentDropdown, {\n        attributes: true,\n        attributeFilter: ['always-floating'],\n      })\n    }\n\n    // Listen for screen size changes (use correct breakpoint)\n    this.events.listen(this.mobileMediaQuery, 'change', (event: MediaQueryListEvent) => {\n      this.isSmallScreen = event.matches\n      this.requestUpdate()\n    })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.parentObserver?.disconnect()\n  }\n\n  render() {\n    // Mobile stack navigation: show content inline when active\n    if (this.shouldUseMobileStack && this.mobileActive) {\n      // Add active class for any submenu in the stack, and is-deepest-active for the deepest one\n      return html`\n        <slot name=\"trigger\"></slot>\n        <div class=${classMap({\n          'n-dropdown-submenu-content': true,\n          'active': this.isInSubmenuStack,\n          'is-deepest-active': this.isDeepestInStack,\n        })} @keydown=${this.handleContentKeydown}>\n          <slot></slot>\n        </div>\n      `\n    }\n\n    // Desktop/always-floating mode: show popout\n    return html`\n      <slot\n        name=\"trigger\"\n        aria-controls=${this.popoutId}\n        @slotchange=${this.handleTriggerSlotChange}\n      ></slot>\n      <nord-popout\n        id=${this.popoutId}\n        position=\"inline-end\"\n        always-floating\n        @open=${this.handlePopoutOpen}\n        @close=${this.handlePopoutClose}\n      >\n        <div\n          class=\"n-dropdown-submenu-content\"\n          @keydown=${this.handleContentKeydown}\n        >\n          <slot></slot>\n        </div>\n      </nord-popout>\n    `\n  }\n\n  private handleTriggerSlotChange() {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n    const triggerElement = slot?.assignedElements()[0] as HTMLElement | undefined\n\n    // Remove listeners from previous trigger element\n    if (this.currentTriggerElement && this.currentTriggerElement !== triggerElement) {\n      this.currentTriggerElement.removeEventListener('mouseenter', this.handleTriggerMouseEnter)\n      this.currentTriggerElement.removeEventListener('click', this.handleTriggerClick)\n      this.currentTriggerElement.removeEventListener('keydown', this.handleTriggerKeydown)\n    }\n\n    this.currentTriggerElement = triggerElement ?? null\n\n    if (!triggerElement)\n      return\n\n    triggerElement.setAttribute('aria-haspopup', 'menu')\n\n    const isTouchDevice = !window.matchMedia('(hover: hover)').matches\n\n    // Non-touch devices: hover to open\n    this.events.listen(triggerElement, 'mouseenter', this.handleTriggerMouseEnter)\n    // Non-touch devices or small screens: click to navigate/open\n    if (!isTouchDevice || this.isSmallScreen) {\n      this.events.listen(triggerElement, 'click', this.handleTriggerClick)\n    }\n    // Keyboard: arrow keys for navigation\n    this.events.listen(triggerElement, 'keydown', this.handleTriggerKeydown)\n  }\n\n  private handleTriggerMouseEnter = () => {\n    // On mobile, don't open popout on hover — only on click\n    if (this.shouldUseMobileStack)\n      return\n\n    this.closeOtherSubmenus()\n    this.popout?.show()\n  }\n\n  private handleTriggerClick = (event: MouseEvent) => {\n    event.preventDefault()\n    event.stopImmediatePropagation()\n\n    if (this.shouldUseMobileStack) {\n      this.navigateIntoSubmenu()\n      return\n    }\n\n    this.closeOtherSubmenus()\n    this.popout?.show()\n  }\n\n  private handleTriggerKeydown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowRight' || event.key === 'Enter') {\n      event.preventDefault()\n\n      if (this.shouldUseMobileStack) {\n        this.navigateIntoSubmenu()\n        return\n      }\n\n      this.closeOtherSubmenus()\n      this.popout?.show()\n      this.updateComplete.then(() => {\n        this.querySelector<HTMLElement>('nord-dropdown-item')?.focus()\n      })\n    }\n  }\n\n  private handleContentKeydown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault()\n      event.stopPropagation()\n\n      if (this.shouldUseMobileStack && this.mobileActive) {\n        this.closest<Dropdown>('nord-dropdown')?.navigateBack()\n        return\n      }\n\n      this.popout?.hide(true)\n    }\n  }\n\n  private handlePopoutOpen = () => {\n    this.popoutOpen = true\n    this.closeOtherSubmenus()\n  }\n\n  private handlePopoutClose = (event: Event) => {\n    event.stopPropagation()\n    this.popoutOpen = false\n  }\n\n  private handleParentDropdownMouseOver = (event: MouseEvent) => {\n    // Don't close on mouseover during mobile stack navigation\n    if (this.shouldUseMobileStack)\n      return\n\n    const target = event.target as HTMLElement\n    const isRegularDropdownItem = target.tagName === 'NORD-DROPDOWN-ITEM' && !this.contains(target)\n    if (isRegularDropdownItem && this.popoutOpen) {\n      event.stopImmediatePropagation()\n      this.popout?.hide()\n    }\n  }\n\n  private closeOtherSubmenus() {\n    // Don't close siblings during mobile stack navigation\n    if (this.shouldUseMobileStack)\n      return\n\n    // Find the immediate parent container (dropdown or submenu)\n    const immediateParent = this.parentElement?.closest('nord-dropdown, nord-dropdown-submenu')\n    if (!immediateParent)\n      return\n\n    // Close only siblings at the same level\n    Array.from(\n      immediateParent.querySelectorAll<DropdownSubmenu>(':scope > nord-dropdown-submenu'),\n    ).forEach((sibling) => {\n      if (sibling !== this)\n        sibling.close()\n    })\n  }\n\n  /**\n   * Deactivate mobile stack navigation (remove from stack).\n   * @internal\n   */\n  deactivateMobile() {\n    this.mobileActive = false\n\n    // NATIVELY REMOVE THE ATTRIBUTE FROM THE HOST\n    this.removeAttribute('mobile-active')\n\n    // Clear aria-expanded that may have been set by Popout during hover\n    const triggerSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n    const triggerElement = triggerSlot?.assignedElements()[0] as HTMLElement | undefined\n    triggerElement?.removeAttribute('aria-expanded')\n  }\n\n  /**\n   * Read trigger text for back button title in Dropdown.\n   * @internal\n   */\n  get label(): string {\n    const triggerSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n    return triggerSlot?.assignedElements()[0]?.textContent?.trim() ?? ''\n  }\n\n  /**\n   * Close the submenu programmatically.\n   * Returns a promise that resolves when the close animation completes.\n   */\n  close(): Promise<TransitionEvent | void> {\n    if (this.mobileActive) {\n      this.deactivateMobile()\n      return Promise.resolve()\n    }\n\n    if (!this.popout) {\n      return Promise.reject(new Error('DropdownSubmenu: popout component not found or not ready'))\n    }\n    return this.popout.hide()\n  }\n\n  /**\n   * Navigate into this submenu using mobile stack navigation.\n   * @internal\n   */\n  private navigateIntoSubmenu() {\n    this.mobileActive = true\n    this.setAttribute('mobile-active', '')\n    this.dispatchEvent(\n      new CustomEvent('nord-submenu-navigate', { bubbles: true, detail: { submenu: this } }),\n    )\n    this.updateComplete.then(() => {\n      // Focus on first submenu item (not back button in header)\n      const contentDiv = this.querySelector('.n-dropdown-submenu-content')\n      const firstItem = contentDiv?.querySelector<HTMLElement>('nord-dropdown-item')\n      firstItem?.focus()\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-dropdown-submenu': DropdownSubmenu\n  }\n}\n"],"names":["popoutCounter","DropdownSubmenu","LitElement","constructor","this","mobileActive","popoutId","events","EventController","currentTriggerElement","popoutOpen","mobileMediaQuery","window","matchMedia","isSmallScreen","matches","parentDropdownAlwaysFloating","handleTriggerMouseEnter","shouldUseMobileStack","closeOtherSubmenus","_a","popout","show","handleTriggerClick","event","preventDefault","stopImmediatePropagation","navigateIntoSubmenu","handleTriggerKeydown","key","updateComplete","then","querySelector","focus","handleContentKeydown","stopPropagation","closest","navigateBack","_b","hide","handlePopoutOpen","handlePopoutClose","handleParentDropdownMouseOver","target","tagName","contains","parentDropdown","isInSubmenuStack","parent","submenuStackRef","includes","isDeepestInStack","deepestSubmenu","connectedCallback","super","triggerElement","setAttribute","alwaysFloating","listen","parentObserver","MutationObserver","mutations","mutation","attributeName","observe","attributes","attributeFilter","requestUpdate","disconnectedCallback","disconnect","render","html","classMap","active","handleTriggerSlotChange","slot","shadowRoot","assignedElements","removeEventListener","isTouchDevice","immediateParent","parentElement","Array","from","querySelectorAll","forEach","sibling","close","deactivateMobile","removeAttribute","triggerSlot","label","_d","textContent","_c","trim","Promise","resolve","reject","Error","dispatchEvent","CustomEvent","bubbles","detail","submenu","contentDiv","firstItem","styles","componentStyle","style","__decorate","query","prototype","state","customElement"],"mappings":"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"}
+{"version":3,"file":"DropdownSubmenu.js","sources":["../src/dropdown-submenu/DropdownSubmenu.ts"],"sourcesContent":["import type Dropdown from '../dropdown/Dropdown.js'\nimport type Popout from '../popout/Popout.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './DropdownSubmenu.css'\nimport '../popout/Popout.js'\n\nlet popoutCounter = 0\n\n/**\n * Dropdown submenu nests a secondary menu within a parent dropdown.\n *\n * @status ready\n * @category action\n *\n * @slot trigger - The element that opens the submenu (typically nord-dropdown-item).\n * @slot - The submenu content items.\n *\n * @fires {NordEvent} open - Forwarded from the internal nord-popout.\n * @fires {NordEvent} close - Forwarded from the internal nord-popout.\n * @fires {CustomEvent} nord-submenu-navigate - Fired when mobile stack navigation activates this submenu.\n *\n * @parent Dropdown\n */\n@customElement('nord-dropdown-submenu')\nexport default class DropdownSubmenu extends LitElement {\n  static styles = [componentStyle, style]\n\n  @query('nord-popout')\n  private popout?: Popout\n\n  /** @internal */\n  @state() private mobileActive = false\n\n  private readonly popoutId = `nord-dropdown-submenu-popout-${++popoutCounter}`\n  private events = new EventController(this)\n  private currentTriggerElement: HTMLElement | null = null\n  private popoutOpen = false\n  private readonly mobileMediaQuery = window.matchMedia('(max-width: 35.9375em)')\n  @state() private isSmallScreen = this.mobileMediaQuery.matches\n  @state() private parentDropdownAlwaysFloating = false\n  private parentObserver?: MutationObserver\n\n  private get shouldUseMobileStack(): boolean {\n    return this.isSmallScreen && !this.parentDropdownAlwaysFloating\n  }\n\n  private get parentDropdown(): Dropdown | null {\n    return this.closest<Dropdown>('nord-dropdown')\n  }\n\n  private get isInSubmenuStack(): boolean {\n    const parent = this.parentDropdown\n    if (!parent)\n      return false\n    return parent.submenuStackRef.includes(this)\n  }\n\n  private get isDeepestInStack(): boolean {\n    const parent = this.parentDropdown\n    if (!parent)\n      return false\n    return parent.deepestSubmenu === this\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // Set aria-haspopup on trigger before first render\n    const triggerElement = this.querySelector<HTMLElement>('[slot=\"trigger\"]')\n    triggerElement?.setAttribute('aria-haspopup', 'menu')\n\n    // Read alwaysFloating from parent dropdown\n    const parentDropdown = this.closest<Dropdown>('nord-dropdown')\n    if (parentDropdown) {\n      this.parentDropdownAlwaysFloating = parentDropdown.alwaysFloating\n      // Close this submenu when a sibling regular item is hovered\n      this.events.listen(parentDropdown, 'mouseover', this.handleParentDropdownMouseOver)\n\n      // Observe always-floating attribute on parent dropdown for reactivity\n      this.parentObserver = new MutationObserver((mutations) => {\n        for (const mutation of mutations) {\n          if (mutation.attributeName === 'always-floating') {\n            this.parentDropdownAlwaysFloating = parentDropdown.alwaysFloating\n          }\n        }\n      })\n      this.parentObserver.observe(parentDropdown, {\n        attributes: true,\n        attributeFilter: ['always-floating'],\n      })\n    }\n\n    // Listen for screen size changes (use correct breakpoint)\n    this.events.listen(this.mobileMediaQuery, 'change', (event: MediaQueryListEvent) => {\n      this.isSmallScreen = event.matches\n      this.requestUpdate()\n    })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.parentObserver?.disconnect()\n  }\n\n  render() {\n    // Mobile stack navigation: show content inline when active\n    if (this.shouldUseMobileStack && this.mobileActive) {\n      // Add active class for any submenu in the stack, and is-deepest-active for the deepest one\n      return html`\n        <slot name=\"trigger\"></slot>\n        <div class=${classMap({\n          'n-dropdown-submenu-content': true,\n          'active': this.isInSubmenuStack,\n          'is-deepest-active': this.isDeepestInStack,\n        })} @keydown=${this.handleContentKeydown}>\n          <slot></slot>\n        </div>\n      `\n    }\n\n    // Desktop/always-floating mode: show popout\n    return html`\n      <slot\n        name=\"trigger\"\n        aria-controls=${this.popoutId}\n        @slotchange=${this.handleTriggerSlotChange}\n      ></slot>\n      <nord-popout\n        id=${this.popoutId}\n        position=\"inline-end\"\n        always-floating\n        @open=${this.handlePopoutOpen}\n        @close=${this.handlePopoutClose}\n      >\n        <div\n          class=\"n-dropdown-submenu-content\"\n          @keydown=${this.handleContentKeydown}\n        >\n          <slot></slot>\n        </div>\n      </nord-popout>\n    `\n  }\n\n  private handleTriggerSlotChange() {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n    const triggerElement = slot?.assignedElements()[0] as HTMLElement | undefined\n\n    // Remove listeners from previous trigger element\n    if (this.currentTriggerElement && this.currentTriggerElement !== triggerElement) {\n      this.currentTriggerElement.removeEventListener('mouseenter', this.handleTriggerMouseEnter)\n      this.currentTriggerElement.removeEventListener('click', this.handleTriggerClick)\n      this.currentTriggerElement.removeEventListener('keydown', this.handleTriggerKeydown)\n    }\n\n    this.currentTriggerElement = triggerElement ?? null\n\n    if (!triggerElement)\n      return\n\n    triggerElement.setAttribute('aria-haspopup', 'menu')\n\n    const isTouchDevice = !window.matchMedia('(hover: hover)').matches\n\n    // Non-touch devices: hover to open\n    this.events.listen(triggerElement, 'mouseenter', this.handleTriggerMouseEnter)\n    // Non-touch devices or small screens: click to navigate/open\n    if (!isTouchDevice || this.isSmallScreen) {\n      this.events.listen(triggerElement, 'click', this.handleTriggerClick)\n    }\n    // Keyboard: arrow keys for navigation\n    this.events.listen(triggerElement, 'keydown', this.handleTriggerKeydown)\n  }\n\n  private handleTriggerMouseEnter = () => {\n    // On mobile, don't open popout on hover — only on click\n    if (this.shouldUseMobileStack)\n      return\n\n    this.closeOtherSubmenus()\n    this.popout?.show()\n  }\n\n  private handleTriggerClick = (event: MouseEvent) => {\n    event.preventDefault()\n    event.stopImmediatePropagation()\n\n    if (this.shouldUseMobileStack) {\n      this.navigateIntoSubmenu()\n      return\n    }\n\n    this.closeOtherSubmenus()\n    this.popout?.show()\n  }\n\n  private handleTriggerKeydown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowRight' || event.key === 'Enter') {\n      event.preventDefault()\n\n      if (this.shouldUseMobileStack) {\n        this.navigateIntoSubmenu()\n        return\n      }\n\n      this.closeOtherSubmenus()\n      this.popout?.show()\n      this.updateComplete.then(() => {\n        this.querySelector<HTMLElement>('nord-dropdown-item')?.focus()\n      })\n    }\n  }\n\n  private handleContentKeydown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault()\n      event.stopPropagation()\n\n      if (this.shouldUseMobileStack && this.mobileActive) {\n        this.closest<Dropdown>('nord-dropdown')?.navigateBack()\n        return\n      }\n\n      this.popout?.hide(true)\n    }\n  }\n\n  private handlePopoutOpen = () => {\n    this.popoutOpen = true\n    this.closeOtherSubmenus()\n  }\n\n  private handlePopoutClose = (event: Event) => {\n    event.stopPropagation()\n    this.popoutOpen = false\n  }\n\n  private handleParentDropdownMouseOver = (event: MouseEvent) => {\n    // Don't close on mouseover during mobile stack navigation\n    if (this.shouldUseMobileStack)\n      return\n\n    const target = event.target as HTMLElement\n    const isRegularDropdownItem = target.tagName === 'NORD-DROPDOWN-ITEM' && !this.contains(target)\n    if (isRegularDropdownItem && this.popoutOpen) {\n      event.stopImmediatePropagation()\n      this.popout?.hide()\n    }\n  }\n\n  private closeOtherSubmenus() {\n    // Don't close siblings during mobile stack navigation\n    if (this.shouldUseMobileStack)\n      return\n\n    // Find the immediate parent container (dropdown or submenu)\n    const immediateParent = this.parentElement?.closest('nord-dropdown, nord-dropdown-submenu')\n    if (!immediateParent)\n      return\n\n    // Close only siblings at the same level\n    Array.from(\n      immediateParent.querySelectorAll<DropdownSubmenu>(':scope > nord-dropdown-submenu'),\n    ).forEach((sibling) => {\n      if (sibling !== this)\n        sibling.close()\n    })\n  }\n\n  /**\n   * Deactivate mobile stack navigation (remove from stack).\n   * @internal\n   */\n  deactivateMobile() {\n    this.mobileActive = false\n\n    // NATIVELY REMOVE THE ATTRIBUTE FROM THE HOST\n    this.removeAttribute('mobile-active')\n\n    // Clear aria-expanded that may have been set by Popout during hover\n    const triggerSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n    const triggerElement = triggerSlot?.assignedElements()[0] as HTMLElement | undefined\n    triggerElement?.removeAttribute('aria-expanded')\n  }\n\n  /**\n   * Read trigger text for back button title in Dropdown.\n   * @internal\n   */\n  get label(): string {\n    const triggerSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n    return triggerSlot?.assignedElements()[0]?.textContent?.trim() ?? ''\n  }\n\n  /**\n   * Close the submenu programmatically.\n   * Returns a promise that resolves when the close animation completes.\n   */\n  close(): Promise<TransitionEvent | void> {\n    if (this.mobileActive) {\n      this.deactivateMobile()\n      return Promise.resolve()\n    }\n\n    if (!this.popout) {\n      return Promise.reject(new Error('DropdownSubmenu: popout component not found or not ready'))\n    }\n    return this.popout.hide()\n  }\n\n  /**\n   * Navigate into this submenu using mobile stack navigation.\n   * @internal\n   */\n  private navigateIntoSubmenu() {\n    this.mobileActive = true\n    this.setAttribute('mobile-active', '')\n    this.dispatchEvent(\n      new CustomEvent('nord-submenu-navigate', { bubbles: true, detail: { submenu: this } }),\n    )\n    this.updateComplete.then(() => {\n      // Focus on first submenu item (not back button in header)\n      const contentDiv = this.querySelector('.n-dropdown-submenu-content')\n      const firstItem = contentDiv?.querySelector<HTMLElement>('nord-dropdown-item')\n      firstItem?.focus()\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-dropdown-submenu': DropdownSubmenu\n  }\n}\n"],"names":["popoutCounter","DropdownSubmenu","LitElement","constructor","this","mobileActive","popoutId","events","EventController","currentTriggerElement","popoutOpen","mobileMediaQuery","window","matchMedia","isSmallScreen","matches","parentDropdownAlwaysFloating","handleTriggerMouseEnter","shouldUseMobileStack","closeOtherSubmenus","_a","popout","show","handleTriggerClick","event","preventDefault","stopImmediatePropagation","navigateIntoSubmenu","handleTriggerKeydown","key","updateComplete","then","querySelector","focus","handleContentKeydown","stopPropagation","closest","navigateBack","_b","hide","handlePopoutOpen","handlePopoutClose","handleParentDropdownMouseOver","target","tagName","contains","parentDropdown","isInSubmenuStack","parent","submenuStackRef","includes","isDeepestInStack","deepestSubmenu","connectedCallback","super","triggerElement","setAttribute","alwaysFloating","listen","parentObserver","MutationObserver","mutations","mutation","attributeName","observe","attributes","attributeFilter","requestUpdate","disconnectedCallback","disconnect","render","html","classMap","active","handleTriggerSlotChange","slot","shadowRoot","assignedElements","removeEventListener","isTouchDevice","immediateParent","parentElement","Array","from","querySelectorAll","forEach","sibling","close","deactivateMobile","removeAttribute","triggerSlot","label","_d","textContent","_c","trim","Promise","resolve","reject","Error","dispatchEvent","CustomEvent","bubbles","detail","submenu","contentDiv","firstItem","styles","componentStyle","style","__decorate","query","prototype","state","customElement"],"mappings":"qiEAUA,IAAIA,EAAgB,EAkBCC,EAAN,cAA8BC,EAA9B,WAAAC,uBAOIC,KAAYC,cAAG,EAEfD,KAAAE,SAAW,mCAAkCN,EACtDI,KAAAG,OAAS,IAAIC,EAAgBJ,MAC7BA,KAAqBK,sBAAuB,KAC5CL,KAAUM,YAAG,EACJN,KAAAO,iBAAmBC,OAAOC,WAAW,0BACrCT,KAAAU,cAAgBV,KAAKO,iBAAiBI,QACtCX,KAA4BY,8BAAG,EAuIxCZ,KAAuBa,wBAAG,WAE5Bb,KAAKc,uBAGTd,KAAKe,qBACQ,QAAbC,EAAAhB,KAAKiB,cAAQ,IAAAD,GAAAA,EAAAE,OAAM,EAGblB,KAAAmB,mBAAsBC,UAC5BA,EAAMC,iBACND,EAAME,2BAEFtB,KAAKc,qBACPd,KAAKuB,uBAIPvB,KAAKe,qBACQ,QAAbC,EAAAhB,KAAKiB,cAAQ,IAAAD,GAAAA,EAAAE,OAAM,EAGblB,KAAAwB,qBAAwBJ,UAC9B,GAAkB,eAAdA,EAAMK,KAAsC,UAAdL,EAAMK,IAAiB,CAGvD,GAFAL,EAAMC,iBAEFrB,KAAKc,qBAEP,YADAd,KAAKuB,sBAIPvB,KAAKe,qBACQ,QAAbC,EAAAhB,KAAKiB,cAAQ,IAAAD,GAAAA,EAAAE,OACblB,KAAK0B,eAAeC,MAAK,WAC8B,QAArDX,EAAAhB,KAAK4B,cAA2B,6BAAqB,IAAAZ,GAAAA,EAAEa,OAAO,GAEjE,GAGK7B,KAAA8B,qBAAwBV,YAC9B,GAAkB,cAAdA,EAAMK,IAAqB,CAI7B,GAHAL,EAAMC,iBACND,EAAMW,kBAEF/B,KAAKc,sBAAwBd,KAAKC,aAEpC,YADuC,QAAvCe,EAAAhB,KAAKgC,QAAkB,wBAAgB,IAAAhB,GAAAA,EAAEiB,gBAIhC,QAAXC,EAAAlC,KAAKiB,cAAM,IAAAiB,GAAAA,EAAEC,MAAK,EACnB,GAGKnC,KAAgBoC,iBAAG,KACzBpC,KAAKM,YAAa,EAClBN,KAAKe,oBAAoB,EAGnBf,KAAAqC,kBAAqBjB,IAC3BA,EAAMW,kBACN/B,KAAKM,YAAa,CAAK,EAGjBN,KAAAsC,8BAAiClB,UAEvC,GAAIpB,KAAKc,qBACP,OAEF,MAAMyB,EAASnB,EAAMmB,OAC4B,uBAAnBA,EAAOC,UAAqCxC,KAAKyC,SAASF,IAC3DvC,KAAKM,aAChCc,EAAME,2BACO,QAAbN,EAAAhB,KAAKiB,cAAQ,IAAAD,GAAAA,EAAAmB,OACd,CAgFJ,CA7RC,wBAAYrB,GACV,OAAOd,KAAKU,gBAAkBV,KAAKY,4BACpC,CAED,kBAAY8B,GACV,OAAO1C,KAAKgC,QAAkB,gBAC/B,CAED,oBAAYW,GACV,MAAMC,EAAS5C,KAAK0C,eACpB,QAAKE,GAEEA,EAAOC,gBAAgBC,SAAS9C,KACxC,CAED,oBAAY+C,GACV,MAAMH,EAAS5C,KAAK0C,eACpB,QAAKE,GAEEA,EAAOI,iBAAmBhD,IAClC,CAED,iBAAAiD,GACEC,MAAMD,oBAGN,MAAME,EAAiBnD,KAAK4B,cAA2B,oBACvDuB,SAAAA,EAAgBC,aAAa,gBAAiB,QAG9C,MAAMV,EAAiB1C,KAAKgC,QAAkB,iBAC1CU,IACF1C,KAAKY,6BAA+B8B,EAAeW,eAEnDrD,KAAKG,OAAOmD,OAAOZ,EAAgB,YAAa1C,KAAKsC,+BAGrDtC,KAAKuD,eAAiB,IAAIC,kBAAkBC,IAC1C,IAAK,MAAMC,KAAYD,EACU,oBAA3BC,EAASC,gBACX3D,KAAKY,6BAA+B8B,EAAeW,eAEtD,IAEHrD,KAAKuD,eAAeK,QAAQlB,EAAgB,CAC1CmB,YAAY,EACZC,gBAAiB,CAAC,sBAKtB9D,KAAKG,OAAOmD,OAAOtD,KAAKO,iBAAkB,UAAWa,IACnDpB,KAAKU,cAAgBU,EAAMT,QAC3BX,KAAK+D,eAAe,GAEvB,CAED,oBAAAC,SACEd,MAAMc,uBACe,QAArBhD,EAAAhB,KAAKuD,sBAAgB,IAAAvC,GAAAA,EAAAiD,YACtB,CAED,MAAAC,GAEE,OAAIlE,KAAKc,sBAAwBd,KAAKC,aAE7BkE,CAAI,2CAEIC,EAAS,CACpB,8BAA8B,EAC9BC,OAAUrE,KAAK2C,iBACf,oBAAqB3C,KAAK+C,iCACb/C,KAAK8B,4CAOjBqC,CAAI,uCAGSnE,KAAKE,0BACPF,KAAKsE,oDAGdtE,KAAKE,0DAGFF,KAAKoC,6BACJpC,KAAKqC,wEAIDrC,KAAK8B,yDAMvB,CAEO,uBAAAwC,SACN,MAAMC,EAAsB,QAAfvD,EAAAhB,KAAKwE,kBAAU,IAAAxD,OAAA,EAAAA,EAAEY,cAA+B,wBACvDuB,EAAiBoB,aAAI,EAAJA,EAAME,mBAAmB,GAWhD,GARIzE,KAAKK,uBAAyBL,KAAKK,wBAA0B8C,IAC/DnD,KAAKK,sBAAsBqE,oBAAoB,aAAc1E,KAAKa,yBAClEb,KAAKK,sBAAsBqE,oBAAoB,QAAS1E,KAAKmB,oBAC7DnB,KAAKK,sBAAsBqE,oBAAoB,UAAW1E,KAAKwB,uBAGjExB,KAAKK,sBAAwB8C,QAAAA,EAAkB,MAE1CA,EACH,OAEFA,EAAeC,aAAa,gBAAiB,QAE7C,MAAMuB,GAAiBnE,OAAOC,WAAW,kBAAkBE,QAG3DX,KAAKG,OAAOmD,OAAOH,EAAgB,aAAcnD,KAAKa,yBAEjD8D,IAAiB3E,KAAKU,eACzBV,KAAKG,OAAOmD,OAAOH,EAAgB,QAASnD,KAAKmB,oBAGnDnB,KAAKG,OAAOmD,OAAOH,EAAgB,UAAWnD,KAAKwB,qBACpD,CA8EO,kBAAAT,SAEN,GAAIf,KAAKc,qBACP,OAGF,MAAM8D,EAAoC,QAAlB5D,EAAAhB,KAAK6E,qBAAa,IAAA7D,OAAA,EAAAA,EAAEgB,QAAQ,wCAC/C4C,GAILE,MAAMC,KACJH,EAAgBI,iBAAkC,mCAClDC,SAASC,IACLA,IAAYlF,MACdkF,EAAQC,OAAO,GAEpB,CAMD,gBAAAC,SACEpF,KAAKC,cAAe,EAGpBD,KAAKqF,gBAAgB,iBAGrB,MAAMC,EAA6B,QAAftE,EAAAhB,KAAKwE,kBAAU,IAAAxD,OAAA,EAAAA,EAAEY,cAA+B,wBAC9DuB,EAAiBmC,aAAW,EAAXA,EAAab,mBAAmB,GACvDtB,SAAAA,EAAgBkC,gBAAgB,gBACjC,CAMD,SAAIE,eACF,MAAMD,EAA6B,QAAftE,EAAAhB,KAAKwE,kBAAU,IAAAxD,OAAA,EAAAA,EAAEY,cAA+B,wBACpE,OAA8D,QAAvD4D,EAA+C,kBAA/CtD,EAAAoD,aAAW,EAAXA,EAAab,mBAAmB,yBAAIgB,mBAAW,IAAAC,OAAA,EAAAA,EAAEC,cAAM,IAAAH,EAAAA,EAAI,EACnE,CAMD,KAAAL,GACE,OAAInF,KAAKC,cACPD,KAAKoF,mBACEQ,QAAQC,WAGZ7F,KAAKiB,OAGHjB,KAAKiB,OAAOkB,OAFVyD,QAAQE,OAAO,IAAIC,MAAM,4DAGnC,CAMO,mBAAAxE,GACNvB,KAAKC,cAAe,EACpBD,KAAKoD,aAAa,gBAAiB,IACnCpD,KAAKgG,cACH,IAAIC,YAAY,wBAAyB,CAAEC,SAAS,EAAMC,OAAQ,CAAEC,QAASpG,SAE/EA,KAAK0B,eAAeC,MAAK,KAEvB,MAAM0E,EAAarG,KAAK4B,cAAc,+BAChC0E,EAAYD,aAAU,EAAVA,EAAYzE,cAA2B,sBACzD0E,SAAAA,EAAWzE,OAAO,GAErB,GA7SMhC,EAAA0G,OAAS,CAACC,EAAgBC,GAGzBC,EAAA,CADPC,EAAM,gBACgB9G,EAAA+G,UAAA,cAAA,GAGNF,EAAA,CAAhBG,KAAoChH,EAAA+G,UAAA,oBAAA,GAOpBF,EAAA,CAAhBG,KAA6DhH,EAAA+G,UAAA,qBAAA,GAC7CF,EAAA,CAAhBG,KAAoDhH,EAAA+G,UAAA,oCAAA,GAflC/G,EAAe6G,EAAA,CADnCI,EAAc,0BACMjH,SAAAA"}

package/lib/FilterAddButton.js

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as t,html as i,nothing as r,LitElement as e}from"lit";import{query as n,property as s,customElement as l}from"lit/decorators.js";import{repeat as d}from"lit/directives/repeat.js";import{L as a}from"./LightDismissController-4pH8cdko.js";import{O as p}from"./OpenStateController-CCnZ7up6.js";import{i as c}from"./light-dom-styles-DXsbiKU9.js";import{D as m}from"./DraftComponentMixin-4qug5Rky.js";import h from"./Icon.js";import{LocalizeController as u}from"./LocalizeController.js";import{FilterAddButtonSelectEvent as j}from"./FilterAddButtonEvents.js";import"./Button.js";import"./DropdownGroup.js";import"./DropdownItem.js";import"./Popout-DpN7PP9h.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./events-Bv6wNHwJ.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"lit/directives/ref.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";import"./DropdownItem-BYbOLth6.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./ScrollbarController-BFC67Y2x.js";var f=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m20 11h-9v9h-2v-9h-9v-2h9v-9h2v9h9z" fill="currentColor"/></svg>',tags:"nordicon interface add plus adding more",title:"interface-add"});const b=t`nord-filter-add-button{--_n-filter-add-button-list-inline-size:var(--n-filter-add-button-list-inline-size,250px);display:inline-flex}nord-filter-add-button .n-filter-add-list{max-block-size:330px;max-inline-size:calc(var(--_n-filter-add-button-list-inline-size)*1.5);min-inline-size:var(--_n-filter-add-button-list-inline-size);overflow-y:auto;padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-add-button .n-filter-add-list nord-dropdown-group{border-block-end:1px solid var(--n-color-border);display:block;margin-block-end:var(--n-space-s);padding-block-end:var(--n-space-s)}nord-filter-add-button .n-filter-add-list nord-dropdown-group:last-child{border-block-end:0;margin-block-end:0;padding-block-end:0}nord-filter-add-button .n-filter-add-list nord-dropdown-item:hover{--n-dropdown-item-background-color:var(--n-color-active);--n-dropdown-item-color:var(--n-color-text)}@media (width <= 35.9375em){nord-filter-add-button .n-filter-add-list{max-block-size:70vh;max-inline-size:none}}`;h.registerIcon(f);let v=1,z=class extends(m(e)){constructor(){super(...arguments),this.filterAddButtonId="nord-filter-add-button-"+v++,this.localize=new u(this),this.dismiss=new a(this,{isOpen:()=>this.open,onDismiss:()=>this.hide(),isDismissible:o=>o!==this}),this.openState=new p(this,{isOpen:()=>this.open,setOpen:o=>{this.open=o},popout:()=>this.popout,isInert:()=>this.disabled}),this.options=[],this.disabled=!1,this.open=!1,this.size="s",this.handleTriggerClick=()=>{this.openState.toggle()}}connectedCallback(){super.connectedCallback(),c(this,b)}createRenderRoot(){return this}get groups(){const o=this.options;if(0===o.length)return[];return o.some((o=>!("id"in o)))?o:[{options:o}]}show(){this.openState.show()}hide(){this.openState.hide()}handleSelect(o){this.disabled||o.disabled||(this.dispatchEvent(new j(o.id)),this.hide())}render(){const o=`${this.filterAddButtonId}-popout`;return i`<nord-button class="n-filter-add-button" type="button" variant="dashed" size="${this.size}" aria-controls="${o}" aria-haspopup="menu" aria-expanded="${this.open?"true":"false"}" ?disabled="${this.disabled}" @click="${this.handleTriggerClick}"><nord-icon slot="start" name="interface-add" size="xs"></nord-icon>${this.localize.term("label")}</nord-button><nord-popout id="${o}" controlled always-floating @open="${this.openState.onPopoutOpen}" @close="${this.openState.onPopoutClose}"><div class="n-filter-add-list">${0===this.groups.length?r:d(this.groups,((o,t)=>t),(o=>{var t;return i`<nord-dropdown-group heading="${null!==(t=o.heading)&&void 0!==t?t:r}">${d(o.options,(o=>o.id),(o=>i`<nord-dropdown-item ?disabled="${o.disabled}" @click="${()=>this.handleSelect(o)}">${o.label}</nord-dropdown-item>`))}</nord-dropdown-group>`}))}</div></nord-popout>`}};o([n("nord-popout",!0)],z.prototype,"popout",void 0),o([s({attribute:!1})],z.prototype,"options",void 0),o([s({reflect:!0,type:Boolean})],z.prototype,"disabled",void 0),o([s({reflect:!0,type:Boolean})],z.prototype,"open",void 0),o([s({reflect:!0})],z.prototype,"size",void 0),z=o([l("nord-filter-add-button")],z);var g=z;export{j as FilterAddButtonSelectEvent,g as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as t,html as i,nothing as r,LitElement as n}from"lit";import{query as e,property as s,customElement as l}from"lit/decorators.js";import{repeat as a}from"lit/directives/repeat.js";import{L as d}from"./LightDismissController-wcL1ziJa.js";import{O as p}from"./OpenStateController-CCnZ7up6.js";import{i as c}from"./light-dom-styles-DXsbiKU9.js";import{D as m}from"./DraftComponentMixin-4qug5Rky.js";import h from"./Icon.js";import{LocalizeController as u}from"./LocalizeController.js";import{FilterAddButtonSelectEvent as j}from"./FilterAddButtonEvents.js";import"./Button.js";import"./DropdownGroup.js";import"./DropdownItem.js";import"./Popout-B6Hirj3y.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.js";import"./events-Bv6wNHwJ.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";import"lit/directives/ref.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";import"./DropdownItem-BYbOLth6.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./ScrollbarController-BFC67Y2x.js";var f=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m20 11h-9v9h-2v-9h-9v-2h9v-9h2v9h9z" fill="currentColor"/></svg>',tags:"nordicon interface add plus adding more",title:"interface-add"});const b=t`nord-filter-add-button{--_n-filter-add-button-list-inline-size:var(--n-filter-add-button-list-inline-size,250px);display:inline-flex}nord-filter-add-button .n-filter-add-list{max-block-size:330px;max-inline-size:calc(var(--_n-filter-add-button-list-inline-size)*1.5);min-inline-size:var(--_n-filter-add-button-list-inline-size);overflow-y:auto;padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-add-button .n-filter-add-list nord-dropdown-group{border-block-end:1px solid var(--n-color-border);display:block;margin-block-end:var(--n-space-s);padding-block-end:var(--n-space-s)}nord-filter-add-button .n-filter-add-list nord-dropdown-group:last-child{border-block-end:0;margin-block-end:0;padding-block-end:0}nord-filter-add-button .n-filter-add-list nord-dropdown-item:hover{--n-dropdown-item-background-color:var(--n-color-active);--n-dropdown-item-color:var(--n-color-text)}@media (width <= 35.9375em){nord-filter-add-button .n-filter-add-list{max-block-size:70vh;max-inline-size:none}}`;h.registerIcon(f);let v=1,z=class extends(m(n)){constructor(){super(...arguments),this.filterAddButtonId="nord-filter-add-button-"+v++,this.localize=new u(this),this.dismiss=new d(this,{isOpen:()=>this.open,onDismiss:()=>this.hide(),isDismissible:o=>o!==this}),this.openState=new p(this,{isOpen:()=>this.open,setOpen:o=>{this.open=o},popout:()=>this.popout,isInert:()=>this.disabled}),this.options=[],this.disabled=!1,this.open=!1,this.size="s",this.handleTriggerClick=()=>{this.openState.toggle()}}connectedCallback(){super.connectedCallback(),c(this,b)}createRenderRoot(){return this}get groups(){const o=this.options;if(0===o.length)return[];return o.some((o=>!("id"in o)))?o:[{options:o}]}show(){this.openState.show()}hide(){this.openState.hide()}handleSelect(o){this.disabled||o.disabled||(this.dispatchEvent(new j(o.id)),this.hide())}render(){const o=`${this.filterAddButtonId}-popout`;return i`<nord-button class="n-filter-add-button" type="button" variant="dashed" size="${this.size}" aria-controls="${o}" aria-haspopup="menu" aria-expanded="${this.open?"true":"false"}" ?disabled="${this.disabled}" @click="${this.handleTriggerClick}"><nord-icon slot="start" name="interface-add" size="xs"></nord-icon>${this.localize.term("label")}</nord-button><nord-popout id="${o}" controlled always-floating @open="${this.openState.onPopoutOpen}" @close="${this.openState.onPopoutClose}"><div class="n-filter-add-list">${0===this.groups.length?r:a(this.groups,((o,t)=>t),(o=>{var t;return i`<nord-dropdown-group heading="${null!==(t=o.heading)&&void 0!==t?t:r}">${a(o.options,(o=>o.id),(o=>i`<nord-dropdown-item ?disabled="${o.disabled}" @click="${()=>this.handleSelect(o)}">${o.label}</nord-dropdown-item>`))}</nord-dropdown-group>`}))}</div></nord-popout>`}};o([e("nord-popout",!0)],z.prototype,"popout",void 0),o([s({attribute:!1})],z.prototype,"options",void 0),o([s({reflect:!0,type:Boolean})],z.prototype,"disabled",void 0),o([s({reflect:!0,type:Boolean})],z.prototype,"open",void 0),o([s({reflect:!0})],z.prototype,"size",void 0),z=o([l("nord-filter-add-button")],z);var g=z;export{j as FilterAddButtonSelectEvent,g as default};
 //# sourceMappingURL=FilterAddButton.js.map

package/lib/FilterAddButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterAddButton.js","sources":["../../icons/lib/assets/interface-add.js","../src/filter-add-button/FilterAddButton.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m20 11h-9v9h-2v-9h-9v-2h9v-9h2v9h9z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-add\";\nexport const tags = \"nordicon interface add plus adding more\";\n","import * as addIcon from '@nordhealth/icons/lib/assets/interface-add.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\n\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { OpenStateController } from '../common/controllers/OpenStateController.js'\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './FilterAddButton.css'\nimport { FilterAddButtonSelectEvent } from './FilterAddButtonEvents.js'\nimport '../button/Button.js'\nimport '../dropdown-group/DropdownGroup.js'\nimport '../dropdown-item/DropdownItem.js'\nimport '../popout/Popout.js'\n\nIcon.registerIcon(addIcon)\n\nexport { FilterAddButtonSelectEvent } from './FilterAddButtonEvents.js'\n\n/** Per-instance counter so the popout/trigger ids stay unique in the light DOM. */\nlet filterAddButtonCount = 1\n\n/** A single, selectable option offered by the add-filter popout. */\nexport interface FilterAddOption {\n  /** Identifies the option; sent in the `select` event when chosen. */\n  id: string\n  /** The human-readable label shown in the list. */\n  label: string\n  /** When `true`, the option cannot be selected. */\n  disabled?: boolean\n}\n\n/** A heading-labelled cluster of options. */\nexport interface FilterAddGroup {\n  /** Optional heading shown above the group's options. */\n  heading?: string\n  /** The options within the group. */\n  options: FilterAddOption[]\n}\n\n/**\n * Filter Add Button opens a popout of available filters and emits the chosen one\n * so your app can add it to the bar. Pass a flat list of options, or group them\n * under headings; selecting one fires a `select` event with the option's `id`\n * and closes the popout.\n *\n * Like the other filter primitives it is intent-only: it does not track which\n * filters are active. Your app owns the active filters and decides what to do on\n * `select` (typically render a new [Filter Field](/components/filter-field/)).\n * Mirrors the Provet Cloud filter add button.\n *\n * @status draft\n * @category form\n * @lightDom true\n *\n * @fires {FilterAddButtonSelectEvent} select - Dispatched with the chosen option's `id` when an option is selected.\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n *\n * @localization label - The text label for the add-filter button.\n *\n * @cssprop [--n-filter-add-button-list-inline-size=250px] - Controls the inline size, or width, of the popout list.\n *\n * @parent FilterBar\n */\n@customElement('nord-filter-add-button')\nexport default class FilterAddButton extends DraftComponentMixin(LitElement) {\n  private filterAddButtonId = `nord-filter-add-button-${filterAddButtonCount++}`\n\n  private localize = new LocalizeController<'nord-filter-add-button'>(this)\n\n  @query('nord-popout', true) private popout?: HTMLElement & {\n    show: () => Promise<unknown>\n    hide: (moveFocusToButton?: boolean) => Promise<unknown>\n  }\n\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.hide(),\n    isDismissible: node => node !== this,\n  })\n\n  // Coordinates `open` with the popout (drive show/hide, sync from its events,\n  // emit one canonical open/close, reject opening while disabled).\n  private openState = new OpenStateController(this, {\n    isOpen: () => this.open,\n    setOpen: (open) => { this.open = open },\n    popout: () => this.popout,\n    isInert: () => this.disabled,\n  })\n\n  /**\n   * The options to offer in the popout. Either a flat list of options, or an\n   * array of groups (each with an optional `heading` and its own `options`),\n   * which renders dividers between the groups.\n   */\n  @property({ attribute: false }) options: FilterAddOption[] | FilterAddGroup[] = []\n\n  /**\n   * Makes the component disabled. This prevents users from being able to\n   * interact with it and conveys its inactive state to assistive technologies.\n   */\n  @property({ reflect: true, type: Boolean }) disabled = false\n\n  /**\n   * Whether the popout is open. Set it to open or close the popout\n   * programmatically.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * The size of the button.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 's'\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n\n  /** Normalises the options into groups, wrapping a flat list in a single group. */\n  private get groups(): FilterAddGroup[] {\n    const options = this.options\n    if (options.length === 0) {\n      return []\n    }\n\n    const isGrouped = options.some(option => !('id' in option))\n    if (isGrouped) {\n      return options as FilterAddGroup[]\n    }\n\n    return [{ options: options as FilterAddOption[] }]\n  }\n\n  /** Open the popout. */\n  show() {\n    this.openState.show()\n  }\n\n  /** Close the popout. */\n  hide() {\n    this.openState.hide()\n  }\n\n  private handleTriggerClick = () => {\n    this.openState.toggle()\n  }\n\n  private handleSelect(option: FilterAddOption) {\n    if (this.disabled || option.disabled) {\n      return\n    }\n\n    /**\n     * Dispatched with the chosen option's `id`. The consumer adds the\n     * corresponding filter; the button does not mutate `options`.\n     */\n    this.dispatchEvent(new FilterAddButtonSelectEvent(option.id))\n    this.hide()\n  }\n\n  render() {\n    const popoutId = `${this.filterAddButtonId}-popout`\n\n    return html`\n      <nord-button\n        class=\"n-filter-add-button\"\n        type=\"button\"\n        variant=\"dashed\"\n        size=${this.size}\n        aria-controls=${popoutId}\n        aria-haspopup=\"menu\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        ?disabled=${this.disabled}\n        @click=${this.handleTriggerClick}\n      >\n        <nord-icon slot=\"start\" name=\"interface-add\" size=\"xs\"></nord-icon>\n        ${this.localize.term('label')}\n      </nord-button>\n\n      <nord-popout\n        id=${popoutId}\n        controlled\n        always-floating\n        @open=${this.openState.onPopoutOpen}\n        @close=${this.openState.onPopoutClose}\n      >\n        <div class=\"n-filter-add-list\">\n          ${this.groups.length === 0\n            ? nothing\n            : repeat(\n                this.groups,\n                (_group, index) => index,\n                group => html`\n                  <nord-dropdown-group heading=${group.heading ?? nothing}>\n                    ${repeat(\n                      group.options,\n                      option => option.id,\n                      option => html`\n                        <nord-dropdown-item\n                          ?disabled=${option.disabled}\n                          @click=${() => this.handleSelect(option)}\n                        >\n                          ${option.label}\n                        </nord-dropdown-item>\n                      `,\n                    )}\n                  </nord-dropdown-group>\n                `,\n              )}\n        </div>\n      </nord-popout>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-filter-add-button': FilterAddButton\n  }\n}\n"],"names":["Icon","registerIcon","addIcon","filterAddButtonCount","FilterAddButton","DraftComponentMixin","LitElement","constructor","this","filterAddButtonId","localize","LocalizeController","dismiss","LightDismissController","isOpen","open","onDismiss","hide","isDismissible","node","openState","OpenStateController","setOpen","popout","isInert","disabled","options","size","handleTriggerClick","toggle","connectedCallback","super","injectLightDomStyles","style","createRenderRoot","groups","length","some","option","show","handleSelect","dispatchEvent","FilterAddButtonSelectEvent","id","render","popoutId","html","term","onPopoutOpen","onPopoutClose","nothing","repeat","_group","index","group","_a","heading","label","__decorate","query","prototype","property","attribute","reflect","type","Boolean","customElement"],"mappings":"2iEAAe,6IAEK,gDADC,qmCCiBrBA,EAAKC,aAAaC,GAKlB,IAAIC,EAAuB,EA8CNC,EAAN,cAA8BC,EAAoBC,IAAlD,WAAAC,uBACLC,KAAAC,kBAAoB,0BAA0BN,IAE9CK,KAAAE,SAAW,IAAIC,EAA6CH,MAO5DA,KAAAI,QAAU,IAAIC,EAAuBL,KAAM,CACjDM,OAAQ,IAAMN,KAAKO,KACnBC,UAAW,IAAMR,KAAKS,OACtBC,cAAeC,GAAQA,IAASX,OAK1BA,KAAAY,UAAY,IAAIC,EAAoBb,KAAM,CAChDM,OAAQ,IAAMN,KAAKO,KACnBO,QAAUP,IAAWP,KAAKO,KAAOA,CAAI,EACrCQ,OAAQ,IAAMf,KAAKe,OACnBC,QAAS,IAAMhB,KAAKiB,WAQUjB,KAAOkB,QAAyC,GAMpClB,KAAQiB,UAAG,EAMXjB,KAAIO,MAAG,EAKtBP,KAAImB,KAAoB,IAoC7CnB,KAAkBoB,mBAAG,KAC3BpB,KAAKY,UAAUS,QAAQ,CAqE1B,CAxGC,iBAAAC,GACEC,MAAMD,oBACNE,EAAqBxB,KAAMyB,EAC5B,CAES,gBAAAC,GACR,OAAO1B,IACR,CAGD,UAAY2B,GACV,MAAMT,EAAUlB,KAAKkB,QACrB,GAAuB,IAAnBA,EAAQU,OACV,MAAO,GAIT,OADkBV,EAAQW,MAAKC,KAAY,OAAQA,KAE1CZ,EAGF,CAAC,CAAEA,QAASA,GACpB,CAGD,IAAAa,GACE/B,KAAKY,UAAUmB,MAChB,CAGD,IAAAtB,GACET,KAAKY,UAAUH,MAChB,CAMO,YAAAuB,CAAaF,GACf9B,KAAKiB,UAAYa,EAAOb,WAQ5BjB,KAAKiC,cAAc,IAAIC,EAA2BJ,EAAOK,KACzDnC,KAAKS,OACN,CAED,MAAA2B,GACE,MAAMC,EAAW,GAAGrC,KAAKC,2BAEzB,OAAOqC,CAAI,iFAKAtC,KAAKmB,wBACIkB,0CAEArC,KAAKO,KAAO,OAAS,uBACzBP,KAAKiB,qBACRjB,KAAKoB,0FAGZpB,KAAKE,SAASqC,KAAK,0CAIhBF,wCAGGrC,KAAKY,UAAU4B,yBACdxC,KAAKY,UAAU6B,iDAGG,IAAvBzC,KAAK2B,OAAOC,OACVc,EACAC,EACE3C,KAAK2B,QACL,CAACiB,EAAQC,IAAUA,IACnBC,UAAS,OAAAR,CAAI,iCACiC,QAAbS,EAAAD,EAAME,eAAO,IAAAD,EAAAA,EAAIL,MAC5CC,EACAG,EAAM5B,SACNY,GAAUA,EAAOK,KACjBL,GAAUQ,CAAI,kCAEER,EAAOb,qBACV,IAAMjB,KAAKgC,aAAaF,OAE/BA,EAAOmB,sDAKlB,yBAKd,GAnJmCC,EAAA,CAAnCC,EAAM,eAAe,IAGrBvD,EAAAwD,UAAA,cAAA,GAsB+BF,EAAA,CAA/BG,EAAS,CAAEC,WAAW,KAA2D1D,EAAAwD,UAAA,eAAA,GAMtCF,EAAA,CAA3CG,EAAS,CAAEE,SAAS,EAAMC,KAAMC,WAA2B7D,EAAAwD,UAAA,gBAAA,GAMhBF,EAAA,CAA3CG,EAAS,CAAEE,SAAS,EAAMC,KAAMC,WAAuB7D,EAAAwD,UAAA,YAAA,GAK3BF,EAAA,CAA5BG,EAAS,CAAEE,SAAS,KAAmC3D,EAAAwD,UAAA,YAAA,GA/CrCxD,EAAesD,EAAA,CADnCQ,EAAc,2BACM9D,SAAAA"}
+{"version":3,"file":"FilterAddButton.js","sources":["../../icons/lib/assets/interface-add.js","../src/filter-add-button/FilterAddButton.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m20 11h-9v9h-2v-9h-9v-2h9v-9h2v9h9z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-add\";\nexport const tags = \"nordicon interface add plus adding more\";\n","import * as addIcon from '@nordhealth/icons/lib/assets/interface-add.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\n\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { OpenStateController } from '../common/controllers/OpenStateController.js'\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './FilterAddButton.css'\nimport { FilterAddButtonSelectEvent } from './FilterAddButtonEvents.js'\nimport '../button/Button.js'\nimport '../dropdown-group/DropdownGroup.js'\nimport '../dropdown-item/DropdownItem.js'\nimport '../popout/Popout.js'\n\nIcon.registerIcon(addIcon)\n\nexport { FilterAddButtonSelectEvent } from './FilterAddButtonEvents.js'\n\n/** Per-instance counter so the popout/trigger ids stay unique in the light DOM. */\nlet filterAddButtonCount = 1\n\n/** A single, selectable option offered by the add-filter popout. */\nexport interface FilterAddOption {\n  /** Identifies the option; sent in the `select` event when chosen. */\n  id: string\n  /** The human-readable label shown in the list. */\n  label: string\n  /** When `true`, the option cannot be selected. */\n  disabled?: boolean\n}\n\n/** A heading-labelled cluster of options. */\nexport interface FilterAddGroup {\n  /** Optional heading shown above the group's options. */\n  heading?: string\n  /** The options within the group. */\n  options: FilterAddOption[]\n}\n\n/**\n * Filter Add Button opens a popout of available filters and emits the chosen one\n * so your app can add it to the bar. Pass a flat list of options, or group them\n * under headings; selecting one fires a `select` event with the option's `id`\n * and closes the popout.\n *\n * Like the other filter primitives it is intent-only: it does not track which\n * filters are active. Your app owns the active filters and decides what to do on\n * `select` (typically render a new [Filter Field](/components/filter-field/)).\n * Mirrors the Provet Cloud filter add button.\n *\n * @status draft\n * @category form\n * @lightDom true\n *\n * @fires {FilterAddButtonSelectEvent} select - Dispatched with the chosen option's `id` when an option is selected.\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n *\n * @localization label - The text label for the add-filter button.\n *\n * @cssprop [--n-filter-add-button-list-inline-size=250px] - Controls the inline size, or width, of the popout list.\n *\n * @parent FilterBar\n */\n@customElement('nord-filter-add-button')\nexport default class FilterAddButton extends DraftComponentMixin(LitElement) {\n  private filterAddButtonId = `nord-filter-add-button-${filterAddButtonCount++}`\n\n  private localize = new LocalizeController<'nord-filter-add-button'>(this)\n\n  @query('nord-popout', true) private popout?: HTMLElement & {\n    show: () => Promise<unknown>\n    hide: (moveFocusToButton?: boolean) => Promise<unknown>\n  }\n\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.hide(),\n    isDismissible: node => node !== this,\n  })\n\n  // Coordinates `open` with the popout (drive show/hide, sync from its events,\n  // emit one canonical open/close, reject opening while disabled).\n  private openState = new OpenStateController(this, {\n    isOpen: () => this.open,\n    setOpen: (open) => { this.open = open },\n    popout: () => this.popout,\n    isInert: () => this.disabled,\n  })\n\n  /**\n   * The options to offer in the popout. Either a flat list of options, or an\n   * array of groups (each with an optional `heading` and its own `options`),\n   * which renders dividers between the groups.\n   */\n  @property({ attribute: false }) options: FilterAddOption[] | FilterAddGroup[] = []\n\n  /**\n   * Makes the component disabled. This prevents users from being able to\n   * interact with it and conveys its inactive state to assistive technologies.\n   */\n  @property({ reflect: true, type: Boolean }) disabled = false\n\n  /**\n   * Whether the popout is open. Set it to open or close the popout\n   * programmatically.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * The size of the button.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 's'\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n\n  /** Normalises the options into groups, wrapping a flat list in a single group. */\n  private get groups(): FilterAddGroup[] {\n    const options = this.options\n    if (options.length === 0) {\n      return []\n    }\n\n    const isGrouped = options.some(option => !('id' in option))\n    if (isGrouped) {\n      return options as FilterAddGroup[]\n    }\n\n    return [{ options: options as FilterAddOption[] }]\n  }\n\n  /** Open the popout. */\n  show() {\n    this.openState.show()\n  }\n\n  /** Close the popout. */\n  hide() {\n    this.openState.hide()\n  }\n\n  private handleTriggerClick = () => {\n    this.openState.toggle()\n  }\n\n  private handleSelect(option: FilterAddOption) {\n    if (this.disabled || option.disabled) {\n      return\n    }\n\n    /**\n     * Dispatched with the chosen option's `id`. The consumer adds the\n     * corresponding filter; the button does not mutate `options`.\n     */\n    this.dispatchEvent(new FilterAddButtonSelectEvent(option.id))\n    this.hide()\n  }\n\n  render() {\n    const popoutId = `${this.filterAddButtonId}-popout`\n\n    return html`\n      <nord-button\n        class=\"n-filter-add-button\"\n        type=\"button\"\n        variant=\"dashed\"\n        size=${this.size}\n        aria-controls=${popoutId}\n        aria-haspopup=\"menu\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        ?disabled=${this.disabled}\n        @click=${this.handleTriggerClick}\n      >\n        <nord-icon slot=\"start\" name=\"interface-add\" size=\"xs\"></nord-icon>\n        ${this.localize.term('label')}\n      </nord-button>\n\n      <nord-popout\n        id=${popoutId}\n        controlled\n        always-floating\n        @open=${this.openState.onPopoutOpen}\n        @close=${this.openState.onPopoutClose}\n      >\n        <div class=\"n-filter-add-list\">\n          ${this.groups.length === 0\n            ? nothing\n            : repeat(\n                this.groups,\n                (_group, index) => index,\n                group => html`\n                  <nord-dropdown-group heading=${group.heading ?? nothing}>\n                    ${repeat(\n                      group.options,\n                      option => option.id,\n                      option => html`\n                        <nord-dropdown-item\n                          ?disabled=${option.disabled}\n                          @click=${() => this.handleSelect(option)}\n                        >\n                          ${option.label}\n                        </nord-dropdown-item>\n                      `,\n                    )}\n                  </nord-dropdown-group>\n                `,\n              )}\n        </div>\n      </nord-popout>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-filter-add-button': FilterAddButton\n  }\n}\n"],"names":["Icon","registerIcon","addIcon","filterAddButtonCount","FilterAddButton","DraftComponentMixin","LitElement","constructor","this","filterAddButtonId","localize","LocalizeController","dismiss","LightDismissController","isOpen","open","onDismiss","hide","isDismissible","node","openState","OpenStateController","setOpen","popout","isInert","disabled","options","size","handleTriggerClick","toggle","connectedCallback","super","injectLightDomStyles","style","createRenderRoot","groups","length","some","option","show","handleSelect","dispatchEvent","FilterAddButtonSelectEvent","id","render","popoutId","html","term","onPopoutOpen","onPopoutClose","nothing","repeat","_group","index","group","_a","heading","label","__decorate","query","prototype","property","attribute","reflect","type","Boolean","customElement"],"mappings":"4lEAAe,6IAEK,gDADC,qmCCiBrBA,EAAKC,aAAaC,GAKlB,IAAIC,EAAuB,EA8CNC,EAAN,cAA8BC,EAAoBC,IAAlD,WAAAC,uBACLC,KAAAC,kBAAoB,0BAA0BN,IAE9CK,KAAAE,SAAW,IAAIC,EAA6CH,MAO5DA,KAAAI,QAAU,IAAIC,EAAuBL,KAAM,CACjDM,OAAQ,IAAMN,KAAKO,KACnBC,UAAW,IAAMR,KAAKS,OACtBC,cAAeC,GAAQA,IAASX,OAK1BA,KAAAY,UAAY,IAAIC,EAAoBb,KAAM,CAChDM,OAAQ,IAAMN,KAAKO,KACnBO,QAAUP,IAAWP,KAAKO,KAAOA,CAAI,EACrCQ,OAAQ,IAAMf,KAAKe,OACnBC,QAAS,IAAMhB,KAAKiB,WAQUjB,KAAOkB,QAAyC,GAMpClB,KAAQiB,UAAG,EAMXjB,KAAIO,MAAG,EAKtBP,KAAImB,KAAoB,IAoC7CnB,KAAkBoB,mBAAG,KAC3BpB,KAAKY,UAAUS,QAAQ,CAqE1B,CAxGC,iBAAAC,GACEC,MAAMD,oBACNE,EAAqBxB,KAAMyB,EAC5B,CAES,gBAAAC,GACR,OAAO1B,IACR,CAGD,UAAY2B,GACV,MAAMT,EAAUlB,KAAKkB,QACrB,GAAuB,IAAnBA,EAAQU,OACV,MAAO,GAIT,OADkBV,EAAQW,MAAKC,KAAY,OAAQA,KAE1CZ,EAGF,CAAC,CAAEA,QAASA,GACpB,CAGD,IAAAa,GACE/B,KAAKY,UAAUmB,MAChB,CAGD,IAAAtB,GACET,KAAKY,UAAUH,MAChB,CAMO,YAAAuB,CAAaF,GACf9B,KAAKiB,UAAYa,EAAOb,WAQ5BjB,KAAKiC,cAAc,IAAIC,EAA2BJ,EAAOK,KACzDnC,KAAKS,OACN,CAED,MAAA2B,GACE,MAAMC,EAAW,GAAGrC,KAAKC,2BAEzB,OAAOqC,CAAI,iFAKAtC,KAAKmB,wBACIkB,0CAEArC,KAAKO,KAAO,OAAS,uBACzBP,KAAKiB,qBACRjB,KAAKoB,0FAGZpB,KAAKE,SAASqC,KAAK,0CAIhBF,wCAGGrC,KAAKY,UAAU4B,yBACdxC,KAAKY,UAAU6B,iDAGG,IAAvBzC,KAAK2B,OAAOC,OACVc,EACAC,EACE3C,KAAK2B,QACL,CAACiB,EAAQC,IAAUA,IACnBC,UAAS,OAAAR,CAAI,iCACiC,QAAbS,EAAAD,EAAME,eAAO,IAAAD,EAAAA,EAAIL,MAC5CC,EACAG,EAAM5B,SACNY,GAAUA,EAAOK,KACjBL,GAAUQ,CAAI,kCAEER,EAAOb,qBACV,IAAMjB,KAAKgC,aAAaF,OAE/BA,EAAOmB,sDAKlB,yBAKd,GAnJmCC,EAAA,CAAnCC,EAAM,eAAe,IAGrBvD,EAAAwD,UAAA,cAAA,GAsB+BF,EAAA,CAA/BG,EAAS,CAAEC,WAAW,KAA2D1D,EAAAwD,UAAA,eAAA,GAMtCF,EAAA,CAA3CG,EAAS,CAAEE,SAAS,EAAMC,KAAMC,WAA2B7D,EAAAwD,UAAA,gBAAA,GAMhBF,EAAA,CAA3CG,EAAS,CAAEE,SAAS,EAAMC,KAAMC,WAAuB7D,EAAAwD,UAAA,YAAA,GAK3BF,EAAA,CAA5BG,EAAS,CAAEE,SAAS,KAAmC3D,EAAAwD,UAAA,YAAA,GA/CrCxD,EAAesD,EAAA,CADnCQ,EAAc,2BACM9D,SAAAA"}

package/lib/FilterDateRange.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-calendar-Cw2bJfbS.js";import{css as i,html as o,LitElement as r}from"lit";import{query as a,property as s,customElement as l}from"lit/decorators.js";import{ifDefined as n}from"lit/directives/if-defined.js";import{O as p}from"./OpenStateController-CCnZ7up6.js";import{p as d}from"./dates-C-ZvzXaC.js";import{i as m}from"./light-dom-styles-DXsbiKU9.js";import{D as c}from"./DraftComponentMixin-4qug5Rky.js";import h from"./Icon.js";import{LocalizeController as j}from"./LocalizeController.js";import{FilterDateRangeChangeEvent as u,FilterDateRangeClearEvent as f,FilterDateRangeRemoveEvent as v}from"./FilterDateRangeEvents.js";import"./FilterField.js";import"./Popout-DpN7PP9h.js";import"./DateRangePicker.js";import"./events-Bv6wNHwJ.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./interface-close-small-CnpAFMO3.js";import"./interface-filter-CCsx9-u6.js";import"./filter-chip-C97zd4PT.js";import"./FilterFieldEvents.js";import"./Button.js";import"lit/directives/ref.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";import"./ButtonGroup.js";import"lit/directives/class-map.js";import"./DirectionController-ChvNGESZ.js";import"./VisuallyHidden.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./interface-dropdown-small-CYvgxudU.js";import"./FormAssociatedMixin-D9aPREgv.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./ReadonlyMixin-BdJPGtQ3.js";import"./SizeMixin-CU9cLbLC.js";import"./DateRangeChangeEvent.js";import"./Input.js";import"./navigation-search-CBbIGzo2.js";import"lit/directives/style-map.js";import"./ResizeController-14PUwRQy.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./FormField-CMgEFZCK.js";import"./TextField-CSKvieoG.js";import"./Calendar-C1SxrlzN.js";import"lit/directives/repeat.js";import"./collection-Dvg2XbxV.js";import"./number-Dg2vCfGd.js";import"./DateRangeSelectEvent.js";import"./DateSelectEvent.js";import"./Stack.js";const g=i`nord-filter-date-range{display:inline-flex;max-inline-size:100%}nord-filter-date-range .n-filter-date-range-popout{inline-size:var(--n-filter-date-range-popout-inline-size,max-content);max-inline-size:100%;padding:0}nord-filter-date-range nord-date-range-picker[inline] .n-drp{background:none;border:none;padding:0}`;h.registerIcon(e);let y=1,b=class extends(c(r)){constructor(){super(...arguments),this.filterDateRangeId="nord-filter-date-range-"+y++,this.localize=new j(this),this.openState=new p(this,{isOpen:()=>this.open,setOpen:t=>{this.open=t},popout:()=>this.popout,isInert:()=>this.disabled}),this.label="",this.value="",this.hidePresets=!1,this.removable=!1,this.clearable=!0,this.disabled=!1,this.size="s",this.name="",this.open=!1,this.handleTriggerClick=()=>{this.openState.toggle()},this.handleInnerChange=t=>{t.stopPropagation(),this.disabled||(this.value=t.value,this.dispatchEvent(new u({value:t.value,startDate:t.startDate,endDate:t.endDate})),this.hide())},this.handleInnerInput=t=>{t.stopPropagation()},this.handleClear=t=>{t.stopPropagation(),this.disabled||(this.value="",this.dispatchEvent(new u({value:"",startDate:"",endDate:""})),this.dispatchEvent(new f))},this.handleRemove=t=>{t.stopPropagation(),this.disabled||this.dispatchEvent(new v)}}get startDate(){var t;return null!==(t=this.value.split("/")[0])&&void 0!==t?t:""}get endDate(){var t;return null!==(t=this.value.split("/")[1])&&void 0!==t?t:""}connectedCallback(){super.connectedCallback(),m(this,g)}createRenderRoot(){return this}get displayValue(){if(!this.value)return"";const t=d(this.startDate),e=d(this.endDate);if(!t||!e)return this.value;const i=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"short",year:"numeric"});return`${i.format(t)} ${this.localize.term("rangeSeparator")} ${i.format(e)}`}show(){this.openState.show()}hide(){this.openState.hide()}render(){const t=`${this.filterDateRangeId}-popout`;return o`<nord-filter-field aria-controls="${t}" aria-haspopup="dialog" aria-expanded="${this.open?"true":"false"}" label="${this.label}" value="${this.displayValue}" icon="interface-calendar" size="${this.size}" name="${n(this.name||void 0)}" ?removable="${this.removable}" ?clearable="${this.clearable}" ?disabled="${this.disabled}" @click="${this.handleTriggerClick}" @clear="${this.handleClear}" @remove="${this.handleRemove}"></nord-filter-field><nord-popout id="${t}" controlled always-floating @open="${this.openState.onPopoutOpen}" @close="${this.openState.onPopoutClose}"><div class="n-filter-date-range-popout"><nord-date-range-picker inline label="${this.label}" hide-label value="${this.value}" min="${n(this.min)}" max="${n(this.max)}" today="${n(this.today)}" first-day-of-week="${n(this.firstDayOfWeek)}" ?hide-presets="${this.hidePresets}" ?disabled="${this.disabled}" @change="${this.handleInnerChange}" @input="${this.handleInnerInput}"></nord-date-range-picker></div></nord-popout>`}};t([a("nord-popout",!0)],b.prototype,"popout",void 0),t([s({reflect:!0})],b.prototype,"label",void 0),t([s({reflect:!0})],b.prototype,"value",void 0),t([s({reflect:!0})],b.prototype,"min",void 0),t([s({reflect:!0})],b.prototype,"max",void 0),t([s({reflect:!0,type:Boolean,attribute:"hide-presets"})],b.prototype,"hidePresets",void 0),t([s({reflect:!0,type:Number,attribute:"first-day-of-week"})],b.prototype,"firstDayOfWeek",void 0),t([s({reflect:!0})],b.prototype,"today",void 0),t([s({reflect:!0,type:Boolean})],b.prototype,"removable",void 0),t([s({reflect:!0,type:Boolean})],b.prototype,"clearable",void 0),t([s({reflect:!0,type:Boolean})],b.prototype,"disabled",void 0),t([s({reflect:!0})],b.prototype,"size",void 0),t([s({reflect:!0})],b.prototype,"name",void 0),t([s({reflect:!0,type:Boolean})],b.prototype,"open",void 0),b=t([l("nord-filter-date-range")],b);var z=b;export{u as FilterDateRangeChangeEvent,f as FilterDateRangeClearEvent,v as FilterDateRangeRemoveEvent,z as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-calendar-Cw2bJfbS.js";import{css as i,html as o,LitElement as r}from"lit";import{query as a,property as s,customElement as l}from"lit/decorators.js";import{ifDefined as n}from"lit/directives/if-defined.js";import{O as p}from"./OpenStateController-CCnZ7up6.js";import{p as m}from"./dates-C-ZvzXaC.js";import{i as d}from"./light-dom-styles-DXsbiKU9.js";import{D as c}from"./DraftComponentMixin-4qug5Rky.js";import h from"./Icon.js";import{LocalizeController as j}from"./LocalizeController.js";import{FilterDateRangeChangeEvent as f,FilterDateRangeClearEvent as u,FilterDateRangeRemoveEvent as v}from"./FilterDateRangeEvents.js";import"./FilterField.js";import"./Popout-B6Hirj3y.js";import"./DateRangePicker.js";import"./events-Bv6wNHwJ.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";import"./interface-close-small-CnpAFMO3.js";import"./interface-filter-CCsx9-u6.js";import"./filter-chip-C97zd4PT.js";import"./FilterFieldEvents.js";import"./Button.js";import"lit/directives/ref.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";import"./ButtonGroup.js";import"lit/directives/class-map.js";import"./DirectionController-ChvNGESZ.js";import"./VisuallyHidden.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-wcL1ziJa.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.js";import"./ScrollbarController-BFC67Y2x.js";import"./interface-dropdown-small-CYvgxudU.js";import"./FormAssociatedMixin-D9aPREgv.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./ReadonlyMixin-BdJPGtQ3.js";import"./SizeMixin-CU9cLbLC.js";import"./DateRangeChangeEvent.js";import"./Input.js";import"./navigation-search-CBbIGzo2.js";import"lit/directives/style-map.js";import"./ResizeController-14PUwRQy.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./FormField-CMgEFZCK.js";import"./TextField-CSKvieoG.js";import"./Calendar-D47b20IT.js";import"lit/directives/repeat.js";import"./collection-Dvg2XbxV.js";import"./number-Dg2vCfGd.js";import"./DateRangeSelectEvent.js";import"./DateSelectEvent.js";import"./Stack.js";const g=i`nord-filter-date-range{display:inline-flex;max-inline-size:100%}nord-filter-date-range .n-filter-date-range-popout{inline-size:var(--n-filter-date-range-popout-inline-size,max-content);max-inline-size:100%;padding:0}nord-filter-date-range nord-date-range-picker[inline] .n-drp{background:none;border:none;padding:0}`;h.registerIcon(e);let y=1,z=class extends(c(r)){constructor(){super(...arguments),this.filterDateRangeId="nord-filter-date-range-"+y++,this.localize=new j(this),this.openState=new p(this,{isOpen:()=>this.open,setOpen:t=>{this.open=t},popout:()=>this.popout,isInert:()=>this.disabled}),this.label="",this.value="",this.hidePresets=!1,this.removable=!1,this.clearable=!0,this.disabled=!1,this.size="s",this.name="",this.open=!1,this.handleTriggerClick=()=>{this.openState.toggle()},this.handleInnerChange=t=>{t.stopPropagation(),this.disabled||(this.value=t.value,this.dispatchEvent(new f({value:t.value,startDate:t.startDate,endDate:t.endDate})),this.hide())},this.handleInnerInput=t=>{t.stopPropagation()},this.handleClear=t=>{t.stopPropagation(),this.disabled||(this.value="",this.dispatchEvent(new f({value:"",startDate:"",endDate:""})),this.dispatchEvent(new u))},this.handleRemove=t=>{t.stopPropagation(),this.disabled||this.dispatchEvent(new v)}}get startDate(){var t;return null!==(t=this.value.split("/")[0])&&void 0!==t?t:""}get endDate(){var t;return null!==(t=this.value.split("/")[1])&&void 0!==t?t:""}connectedCallback(){super.connectedCallback(),d(this,g)}createRenderRoot(){return this}get displayValue(){if(!this.value)return"";const t=m(this.startDate),e=m(this.endDate);if(!t||!e)return this.value;const i=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"short",year:"numeric"});return`${i.format(t)} ${this.localize.term("rangeSeparator")} ${i.format(e)}`}show(){this.openState.show()}hide(){this.openState.hide()}render(){const t=`${this.filterDateRangeId}-popout`;return o`<nord-filter-field aria-controls="${t}" aria-haspopup="dialog" aria-expanded="${this.open?"true":"false"}" label="${this.label}" value="${this.displayValue}" icon="interface-calendar" size="${this.size}" name="${n(this.name||void 0)}" ?removable="${this.removable}" ?clearable="${this.clearable}" ?disabled="${this.disabled}" @click="${this.handleTriggerClick}" @clear="${this.handleClear}" @remove="${this.handleRemove}"></nord-filter-field><nord-popout id="${t}" controlled always-floating @open="${this.openState.onPopoutOpen}" @close="${this.openState.onPopoutClose}"><div class="n-filter-date-range-popout"><nord-date-range-picker inline label="${this.label}" hide-label value="${this.value}" min="${n(this.min)}" max="${n(this.max)}" today="${n(this.today)}" first-day-of-week="${n(this.firstDayOfWeek)}" ?hide-presets="${this.hidePresets}" ?disabled="${this.disabled}" @change="${this.handleInnerChange}" @input="${this.handleInnerInput}"></nord-date-range-picker></div></nord-popout>`}};t([a("nord-popout",!0)],z.prototype,"popout",void 0),t([s({reflect:!0})],z.prototype,"label",void 0),t([s({reflect:!0})],z.prototype,"value",void 0),t([s({reflect:!0})],z.prototype,"min",void 0),t([s({reflect:!0})],z.prototype,"max",void 0),t([s({reflect:!0,type:Boolean,attribute:"hide-presets"})],z.prototype,"hidePresets",void 0),t([s({reflect:!0,type:Number,attribute:"first-day-of-week"})],z.prototype,"firstDayOfWeek",void 0),t([s({reflect:!0})],z.prototype,"today",void 0),t([s({reflect:!0,type:Boolean})],z.prototype,"removable",void 0),t([s({reflect:!0,type:Boolean})],z.prototype,"clearable",void 0),t([s({reflect:!0,type:Boolean})],z.prototype,"disabled",void 0),t([s({reflect:!0})],z.prototype,"size",void 0),t([s({reflect:!0})],z.prototype,"name",void 0),t([s({reflect:!0,type:Boolean})],z.prototype,"open",void 0),z=t([l("nord-filter-date-range")],z);var b=z;export{f as FilterDateRangeChangeEvent,u as FilterDateRangeClearEvent,v as FilterDateRangeRemoveEvent,b as default};
 //# sourceMappingURL=FilterDateRange.js.map

package/lib/FilterDateRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterDateRange.js","sources":["../src/filter-date-range/FilterDateRange.ts"],"sourcesContent":["import type { DateRangeChangeEvent } from '../date-range-picker/DateRangeChangeEvent.js'\nimport * as calendarIcon from '@nordhealth/icons/lib/assets/interface-calendar.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OpenStateController } from '../common/controllers/OpenStateController.js'\nimport { parseISODate } from '../common/dates.js'\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './FilterDateRange.css'\nimport { FilterDateRangeChangeEvent, FilterDateRangeClearEvent, FilterDateRangeRemoveEvent } from './FilterDateRangeEvents.js'\nimport '../filter-field/FilterField.js'\nimport '../popout/Popout.js'\nimport '../date-range-picker/DateRangePicker.js'\n\nIcon.registerIcon(calendarIcon)\n\nexport {\n  FilterDateRangeChangeEvent,\n  FilterDateRangeClearEvent,\n  FilterDateRangeRemoveEvent,\n} from './FilterDateRangeEvents.js'\n\n/** Per-instance counter so the popout id stays unique in the light DOM. */\nlet filterDateRangeCount = 1\n\n/**\n * Filter Date Range is a self-contained date-range **filter**: a chip that opens\n * a popout containing an inline [Date Range Picker](/components/date-range-picker/)\n * (presets + two-month calendar + Apply). It is the date-range counterpart to\n * [Filter Dropdown](/components/filter-dropdown/) and renders the shared filter\n * chip via [Filter Field](/components/filter-field/).\n *\n * Composition-first: it emits `change`/`clear`/`remove` and leaves the active\n * filters and any URL/query state to your app.\n *\n * @status draft\n * @category form\n * @lightDom true\n *\n * @fires {FilterDateRangeChangeEvent} change - Dispatched when the committed range changes (Apply or clear).\n * @fires {FilterDateRangeClearEvent} clear - Dispatched when the chip's clear affordance is pressed.\n * @fires {FilterDateRangeRemoveEvent} remove - Dispatched when the chip's remove affordance is pressed.\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n *\n * @localization filterIconLabel - Accessible label for the leading calendar icon.\n * @localization clearLabel - Accessible label for the clear button.\n * @localization removeLabel - Accessible label for the remove button.\n * @localization rangeSeparator - Character shown between the start and end dates on the chip.\n *\n * @cssprop [--n-filter-date-range-popout-inline-size] - Controls the inline size of the popout content.\n *\n * @parent FilterBar\n */\n@customElement('nord-filter-date-range')\nexport default class FilterDateRange extends DraftComponentMixin(LitElement) {\n  private filterDateRangeId = `nord-filter-date-range-${filterDateRangeCount++}`\n\n  private localize = new LocalizeController<'nord-filter-date-range'>(this)\n\n  @query('nord-popout', true) private popout?: HTMLElement & {\n    show: () => Promise<unknown>\n    hide: (moveFocusToButton?: boolean) => Promise<unknown>\n  }\n\n  // Coordinates `open` with the popout (drive show/hide, sync from its events,\n  // emit one canonical open/close, reject opening while disabled).\n  private openState = new OpenStateController(this, {\n    isOpen: () => this.open,\n    setOpen: (open) => { this.open = open },\n    popout: () => this.popout,\n    isInert: () => this.disabled,\n  })\n\n  /** The label naming what this filter targets, shown on the chip. */\n  @property({ reflect: true }) label = ''\n\n  /**\n   * The committed range as an ISO-8601 interval string `YYYY-MM-DD/YYYY-MM-DD`,\n   * or `\"\"` for no selection.\n   */\n  @property({ reflect: true }) value = ''\n\n  /** Earliest selectable date (ISO-8601). */\n  @property({ reflect: true }) min?: string\n\n  /** Latest selectable date (ISO-8601). */\n  @property({ reflect: true }) max?: string\n\n  /** Hides the built-in preset list, leaving only the calendar. */\n  @property({ reflect: true, type: Boolean, attribute: 'hide-presets' }) hidePresets = false\n\n  /** First day of the week (0 = Sunday … 6 = Saturday). */\n  @property({ reflect: true, type: Number, attribute: 'first-day-of-week' }) firstDayOfWeek?: number\n\n  /** Overrides \"today\" (ISO-8601), mainly for deterministic tests/demos. */\n  @property({ reflect: true }) today?: string\n\n  /**\n   * Whether the whole filter can be removed. When `true` the trailing affordance\n   * is a remove button that fires `remove`; otherwise it is a clear button.\n   */\n  @property({ reflect: true, type: Boolean }) removable = false\n\n  /** Shows a clear (✕) button while there is a selection. Defaults to `true`. */\n  @property({ reflect: true, type: Boolean }) clearable = true\n\n  /** Makes the component disabled. */\n  @property({ reflect: true, type: Boolean }) disabled = false\n\n  /** The size of the chip controls. */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 's'\n\n  /** Identifies the filter (e.g. for your app's active-filter state). */\n  @property({ reflect: true }) name = ''\n\n  /** Whether the popout is open. */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /** The committed start date (ISO-8601), derived from `value`. */\n  get startDate(): string {\n    return this.value.split('/')[0] ?? ''\n  }\n\n  /** The committed end date (ISO-8601), derived from `value`. */\n  get endDate(): string {\n    return this.value.split('/')[1] ?? ''\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n\n  /** The chip text: the formatted range, or `\"\"` while inactive. */\n  private get displayValue(): string {\n    // Genuinely empty → inactive chip.\n    if (!this.value) {\n      return ''\n    }\n    const start = parseISODate(this.startDate)\n    const end = parseISODate(this.endDate)\n    // A non-empty but unparseable/partial `value` still represents an active\n    // filter — show it raw rather than silently rendering the chip as inactive.\n    if (!start || !end) {\n      return this.value\n    }\n    const fmt = new Intl.DateTimeFormat(this.localize.resolvedLang, { day: 'numeric', month: 'short', year: 'numeric' })\n    return `${fmt.format(start)} ${this.localize.term('rangeSeparator')} ${fmt.format(end)}`\n  }\n\n  /** Open the popout. */\n  show() {\n    this.openState.show()\n  }\n\n  /** Close the popout. */\n  hide() {\n    this.openState.hide()\n  }\n\n  // The popout is `controlled`, so the chip click is the only thing that opens\n  // it — mirror the date-range-picker's trigger. (FilterField stops propagation\n  // on its clear/remove buttons, so those don't reach this handler.)\n  private handleTriggerClick = () => {\n    this.openState.toggle()\n  }\n\n  // The inline picker commits on Apply (and clears on its Clear); mirror its\n  // committed value, re-emit a single canonical `change`, and close.\n  private handleInnerChange = (e: DateRangeChangeEvent) => {\n    e.stopPropagation()\n    if (this.disabled) {\n      return\n    }\n\n    this.value = e.value\n    this.dispatchEvent(new FilterDateRangeChangeEvent({ value: e.value, startDate: e.startDate, endDate: e.endDate }))\n    this.hide()\n  }\n\n  // Swallow the inline picker's live `input` so consumers only see our `change`.\n  private handleInnerInput = (e: Event) => {\n    e.stopPropagation()\n  }\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation()\n    if (this.disabled) {\n      return\n    }\n\n    this.value = ''\n    this.dispatchEvent(new FilterDateRangeChangeEvent({ value: '', startDate: '', endDate: '' }))\n    this.dispatchEvent(new FilterDateRangeClearEvent())\n  }\n\n  private handleRemove = (e: Event) => {\n    e.stopPropagation()\n    if (this.disabled) {\n      return\n    }\n\n    this.dispatchEvent(new FilterDateRangeRemoveEvent())\n  }\n\n  render() {\n    const popoutId = `${this.filterDateRangeId}-popout`\n\n    return html`\n      <nord-filter-field\n        aria-controls=${popoutId}\n        aria-haspopup=\"dialog\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        label=${this.label}\n        value=${this.displayValue}\n        icon=\"interface-calendar\"\n        size=${this.size}\n        name=${ifDefined(this.name || undefined)}\n        ?removable=${this.removable}\n        ?clearable=${this.clearable}\n        ?disabled=${this.disabled}\n        @click=${this.handleTriggerClick}\n        @clear=${this.handleClear}\n        @remove=${this.handleRemove}\n      ></nord-filter-field>\n\n      <nord-popout\n        id=${popoutId}\n        controlled\n        always-floating\n        @open=${this.openState.onPopoutOpen}\n        @close=${this.openState.onPopoutClose}\n      >\n        <div class=\"n-filter-date-range-popout\">\n          <nord-date-range-picker\n            inline\n            label=${this.label}\n            hide-label\n            value=${this.value}\n            min=${ifDefined(this.min)}\n            max=${ifDefined(this.max)}\n            today=${ifDefined(this.today)}\n            first-day-of-week=${ifDefined(this.firstDayOfWeek)}\n            ?hide-presets=${this.hidePresets}\n            ?disabled=${this.disabled}\n            @change=${this.handleInnerChange}\n            @input=${this.handleInnerInput}\n          ></nord-date-range-picker>\n        </div>\n      </nord-popout>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-filter-date-range': FilterDateRange\n  }\n}\n"],"names":["Icon","registerIcon","calendarIcon","filterDateRangeCount","FilterDateRange","DraftComponentMixin","LitElement","constructor","this","filterDateRangeId","localize","LocalizeController","openState","OpenStateController","isOpen","open","setOpen","popout","isInert","disabled","label","value","hidePresets","removable","clearable","size","name","handleTriggerClick","toggle","handleInnerChange","e","stopPropagation","dispatchEvent","FilterDateRangeChangeEvent","startDate","endDate","hide","handleInnerInput","handleClear","FilterDateRangeClearEvent","handleRemove","FilterDateRangeRemoveEvent","_a","split","connectedCallback","super","injectLightDomStyles","style","createRenderRoot","displayValue","start","parseISODate","end","fmt","Intl","DateTimeFormat","resolvedLang","day","month","year","format","term","show","render","popoutId","html","ifDefined","undefined","onPopoutOpen","onPopoutClose","min","max","today","firstDayOfWeek","__decorate","query","prototype","property","reflect","type","Boolean","attribute","Number","customElement"],"mappings":"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"}
+{"version":3,"file":"FilterDateRange.js","sources":["../src/filter-date-range/FilterDateRange.ts"],"sourcesContent":["import type { DateRangeChangeEvent } from '../date-range-picker/DateRangeChangeEvent.js'\nimport * as calendarIcon from '@nordhealth/icons/lib/assets/interface-calendar.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OpenStateController } from '../common/controllers/OpenStateController.js'\nimport { parseISODate } from '../common/dates.js'\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './FilterDateRange.css'\nimport { FilterDateRangeChangeEvent, FilterDateRangeClearEvent, FilterDateRangeRemoveEvent } from './FilterDateRangeEvents.js'\nimport '../filter-field/FilterField.js'\nimport '../popout/Popout.js'\nimport '../date-range-picker/DateRangePicker.js'\n\nIcon.registerIcon(calendarIcon)\n\nexport {\n  FilterDateRangeChangeEvent,\n  FilterDateRangeClearEvent,\n  FilterDateRangeRemoveEvent,\n} from './FilterDateRangeEvents.js'\n\n/** Per-instance counter so the popout id stays unique in the light DOM. */\nlet filterDateRangeCount = 1\n\n/**\n * Filter Date Range is a self-contained date-range **filter**: a chip that opens\n * a popout containing an inline [Date Range Picker](/components/date-range-picker/)\n * (presets + two-month calendar + Apply). It is the date-range counterpart to\n * [Filter Dropdown](/components/filter-dropdown/) and renders the shared filter\n * chip via [Filter Field](/components/filter-field/).\n *\n * Composition-first: it emits `change`/`clear`/`remove` and leaves the active\n * filters and any URL/query state to your app.\n *\n * @status draft\n * @category form\n * @lightDom true\n *\n * @fires {FilterDateRangeChangeEvent} change - Dispatched when the committed range changes (Apply or clear).\n * @fires {FilterDateRangeClearEvent} clear - Dispatched when the chip's clear affordance is pressed.\n * @fires {FilterDateRangeRemoveEvent} remove - Dispatched when the chip's remove affordance is pressed.\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n *\n * @localization filterIconLabel - Accessible label for the leading calendar icon.\n * @localization clearLabel - Accessible label for the clear button.\n * @localization removeLabel - Accessible label for the remove button.\n * @localization rangeSeparator - Character shown between the start and end dates on the chip.\n *\n * @cssprop [--n-filter-date-range-popout-inline-size] - Controls the inline size of the popout content.\n *\n * @parent FilterBar\n */\n@customElement('nord-filter-date-range')\nexport default class FilterDateRange extends DraftComponentMixin(LitElement) {\n  private filterDateRangeId = `nord-filter-date-range-${filterDateRangeCount++}`\n\n  private localize = new LocalizeController<'nord-filter-date-range'>(this)\n\n  @query('nord-popout', true) private popout?: HTMLElement & {\n    show: () => Promise<unknown>\n    hide: (moveFocusToButton?: boolean) => Promise<unknown>\n  }\n\n  // Coordinates `open` with the popout (drive show/hide, sync from its events,\n  // emit one canonical open/close, reject opening while disabled).\n  private openState = new OpenStateController(this, {\n    isOpen: () => this.open,\n    setOpen: (open) => { this.open = open },\n    popout: () => this.popout,\n    isInert: () => this.disabled,\n  })\n\n  /** The label naming what this filter targets, shown on the chip. */\n  @property({ reflect: true }) label = ''\n\n  /**\n   * The committed range as an ISO-8601 interval string `YYYY-MM-DD/YYYY-MM-DD`,\n   * or `\"\"` for no selection.\n   */\n  @property({ reflect: true }) value = ''\n\n  /** Earliest selectable date (ISO-8601). */\n  @property({ reflect: true }) min?: string\n\n  /** Latest selectable date (ISO-8601). */\n  @property({ reflect: true }) max?: string\n\n  /** Hides the built-in preset list, leaving only the calendar. */\n  @property({ reflect: true, type: Boolean, attribute: 'hide-presets' }) hidePresets = false\n\n  /** First day of the week (0 = Sunday … 6 = Saturday). */\n  @property({ reflect: true, type: Number, attribute: 'first-day-of-week' }) firstDayOfWeek?: number\n\n  /** Overrides \"today\" (ISO-8601), mainly for deterministic tests/demos. */\n  @property({ reflect: true }) today?: string\n\n  /**\n   * Whether the whole filter can be removed. When `true` the trailing affordance\n   * is a remove button that fires `remove`; otherwise it is a clear button.\n   */\n  @property({ reflect: true, type: Boolean }) removable = false\n\n  /** Shows a clear (✕) button while there is a selection. Defaults to `true`. */\n  @property({ reflect: true, type: Boolean }) clearable = true\n\n  /** Makes the component disabled. */\n  @property({ reflect: true, type: Boolean }) disabled = false\n\n  /** The size of the chip controls. */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 's'\n\n  /** Identifies the filter (e.g. for your app's active-filter state). */\n  @property({ reflect: true }) name = ''\n\n  /** Whether the popout is open. */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /** The committed start date (ISO-8601), derived from `value`. */\n  get startDate(): string {\n    return this.value.split('/')[0] ?? ''\n  }\n\n  /** The committed end date (ISO-8601), derived from `value`. */\n  get endDate(): string {\n    return this.value.split('/')[1] ?? ''\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n\n  /** The chip text: the formatted range, or `\"\"` while inactive. */\n  private get displayValue(): string {\n    // Genuinely empty → inactive chip.\n    if (!this.value) {\n      return ''\n    }\n    const start = parseISODate(this.startDate)\n    const end = parseISODate(this.endDate)\n    // A non-empty but unparseable/partial `value` still represents an active\n    // filter — show it raw rather than silently rendering the chip as inactive.\n    if (!start || !end) {\n      return this.value\n    }\n    const fmt = new Intl.DateTimeFormat(this.localize.resolvedLang, { day: 'numeric', month: 'short', year: 'numeric' })\n    return `${fmt.format(start)} ${this.localize.term('rangeSeparator')} ${fmt.format(end)}`\n  }\n\n  /** Open the popout. */\n  show() {\n    this.openState.show()\n  }\n\n  /** Close the popout. */\n  hide() {\n    this.openState.hide()\n  }\n\n  // The popout is `controlled`, so the chip click is the only thing that opens\n  // it — mirror the date-range-picker's trigger. (FilterField stops propagation\n  // on its clear/remove buttons, so those don't reach this handler.)\n  private handleTriggerClick = () => {\n    this.openState.toggle()\n  }\n\n  // The inline picker commits on Apply (and clears on its Clear); mirror its\n  // committed value, re-emit a single canonical `change`, and close.\n  private handleInnerChange = (e: DateRangeChangeEvent) => {\n    e.stopPropagation()\n    if (this.disabled) {\n      return\n    }\n\n    this.value = e.value\n    this.dispatchEvent(new FilterDateRangeChangeEvent({ value: e.value, startDate: e.startDate, endDate: e.endDate }))\n    this.hide()\n  }\n\n  // Swallow the inline picker's live `input` so consumers only see our `change`.\n  private handleInnerInput = (e: Event) => {\n    e.stopPropagation()\n  }\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation()\n    if (this.disabled) {\n      return\n    }\n\n    this.value = ''\n    this.dispatchEvent(new FilterDateRangeChangeEvent({ value: '', startDate: '', endDate: '' }))\n    this.dispatchEvent(new FilterDateRangeClearEvent())\n  }\n\n  private handleRemove = (e: Event) => {\n    e.stopPropagation()\n    if (this.disabled) {\n      return\n    }\n\n    this.dispatchEvent(new FilterDateRangeRemoveEvent())\n  }\n\n  render() {\n    const popoutId = `${this.filterDateRangeId}-popout`\n\n    return html`\n      <nord-filter-field\n        aria-controls=${popoutId}\n        aria-haspopup=\"dialog\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        label=${this.label}\n        value=${this.displayValue}\n        icon=\"interface-calendar\"\n        size=${this.size}\n        name=${ifDefined(this.name || undefined)}\n        ?removable=${this.removable}\n        ?clearable=${this.clearable}\n        ?disabled=${this.disabled}\n        @click=${this.handleTriggerClick}\n        @clear=${this.handleClear}\n        @remove=${this.handleRemove}\n      ></nord-filter-field>\n\n      <nord-popout\n        id=${popoutId}\n        controlled\n        always-floating\n        @open=${this.openState.onPopoutOpen}\n        @close=${this.openState.onPopoutClose}\n      >\n        <div class=\"n-filter-date-range-popout\">\n          <nord-date-range-picker\n            inline\n            label=${this.label}\n            hide-label\n            value=${this.value}\n            min=${ifDefined(this.min)}\n            max=${ifDefined(this.max)}\n            today=${ifDefined(this.today)}\n            first-day-of-week=${ifDefined(this.firstDayOfWeek)}\n            ?hide-presets=${this.hidePresets}\n            ?disabled=${this.disabled}\n            @change=${this.handleInnerChange}\n            @input=${this.handleInnerInput}\n          ></nord-date-range-picker>\n        </div>\n      </nord-popout>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-filter-date-range': FilterDateRange\n  }\n}\n"],"names":["Icon","registerIcon","calendarIcon","filterDateRangeCount","FilterDateRange","DraftComponentMixin","LitElement","constructor","this","filterDateRangeId","localize","LocalizeController","openState","OpenStateController","isOpen","open","setOpen","popout","isInert","disabled","label","value","hidePresets","removable","clearable","size","name","handleTriggerClick","toggle","handleInnerChange","e","stopPropagation","dispatchEvent","FilterDateRangeChangeEvent","startDate","endDate","hide","handleInnerInput","handleClear","FilterDateRangeClearEvent","handleRemove","FilterDateRangeRemoveEvent","_a","split","connectedCallback","super","injectLightDomStyles","style","createRenderRoot","displayValue","start","parseISODate","end","fmt","Intl","DateTimeFormat","resolvedLang","day","month","year","format","term","show","render","popoutId","html","ifDefined","undefined","onPopoutOpen","onPopoutClose","min","max","today","firstDayOfWeek","__decorate","query","prototype","property","reflect","type","Boolean","attribute","Number","customElement"],"mappings":"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"}

package/lib/FilterDropdown.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{c as t}from"./interface-checked-small-BQmkNgCI.js";import{c as i,A as o}from"./ActiveDescendantController-BnMqM79O.js";import{c as n}from"./interface-close-small-CnpAFMO3.js";import{f as s}from"./interface-filter-CCsx9-u6.js";import{s as r}from"./navigation-search-CBbIGzo2.js";import{css as l,html as a,nothing as d,LitElement as p}from"lit";import{query as c,property as h,state as u,customElement as v}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{createRef as m,ref as b}from"lit/directives/ref.js";import{repeat as g}from"lit/directives/repeat.js";import{L as w}from"./LightDismissController-4pH8cdko.js";import{O as y}from"./OpenStateController-CCnZ7up6.js";import{i as j}from"./light-dom-styles-DXsbiKU9.js";import{D as z}from"./DraftComponentMixin-4qug5Rky.js";import{s as $}from"./filter-chip-C97zd4PT.js";import k from"./Icon.js";import{LocalizeController as x}from"./LocalizeController.js";import{FilterDropdownRemoveEvent as S,FilterDropdownSearchChangeEvent as A,FilterDropdownLoadMoreEvent as D,FilterDropdownChangeEvent as I,FilterDropdownClearEvent as O}from"./FilterDropdownEvents.js";import"./Button.js";import"./ButtonGroup.js";import"./Input.js";import"./Popout-DpN7PP9h.js";import"./Spinner.js";import"./VisuallyHidden.js";import"./number-Dg2vCfGd.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./events-Bv6wNHwJ.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./DirectionController-ChvNGESZ.js";import"lit/directives/style-map.js";import"./ResizeController-14PUwRQy.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./FormAssociatedMixin-D9aPREgv.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./ReadonlyMixin-BdJPGtQ3.js";import"./SizeMixin-CU9cLbLC.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./FormField-CMgEFZCK.js";import"./TextField-CSKvieoG.js";import"./positioning-D-K8Mueq.js";import"./ScrollbarController-BFC67Y2x.js";const C=l`nord-filter-dropdown{--_n-filter-dropdown-list-inline-size:var(--n-filter-dropdown-list-inline-size,250px)}nord-filter-dropdown .n-filter-dropdown-panel{display:flex;flex-direction:column;max-inline-size:calc(var(--_n-filter-dropdown-list-inline-size)*1.5);min-inline-size:var(--_n-filter-dropdown-list-inline-size)}nord-filter-dropdown .n-filter-dropdown-size-s{--_n-filter-dropdown-list-inline-size:var(--n-filter-dropdown-list-inline-size,250px)}nord-filter-dropdown .n-filter-dropdown-size-l{--_n-filter-dropdown-list-inline-size:var(--n-filter-dropdown-list-inline-size,300px)}nord-filter-dropdown .n-filter-dropdown-search{padding-block-end:var(--n-space-xs);padding-block-start:var(--n-space-m);padding-inline-end:var(--n-space-m);padding-inline-start:var(--n-space-m)}nord-filter-dropdown .n-filter-dropdown-select-all{border-block-end:1px solid var(--n-color-border);padding-block-start:0}nord-filter-dropdown .n-filter-dropdown-list,nord-filter-dropdown .n-filter-dropdown-select-all{padding-block-end:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-list{max-block-size:330px;overflow-y:auto;padding-block-start:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-list.is-loading-more{opacity:.3;pointer-events:none}@media (width <= 35.9375em){nord-filter-dropdown .n-filter-dropdown-panel{max-inline-size:none}nord-filter-dropdown .n-filter-dropdown-list{max-block-size:70vh}}nord-filter-dropdown .n-filter-dropdown-group{border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s);padding-block-end:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-group:last-child{border-block-end:0;margin-block-end:0;padding-block-end:0}nord-filter-dropdown .n-filter-dropdown-heading{color:var(--n-color-text-weaker);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);padding-block-end:var(--n-space-xs);padding-block-start:var(--n-space-xs);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-option{align-items:center;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:flex;gap:var(--n-space-s);padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s);user-select:none}nord-filter-dropdown .n-filter-dropdown-option.is-indented{padding-inline-start:var(--n-space-l)}nord-filter-dropdown .n-filter-dropdown-option.is-active,nord-filter-dropdown .n-filter-dropdown-option:hover{background-color:var(--n-color-active)}nord-filter-dropdown .n-filter-dropdown-option.is-disabled{color:var(--n-color-text-weakest);cursor:not-allowed;pointer-events:none}nord-filter-dropdown .n-filter-dropdown-option-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nord-filter-dropdown .n-filter-dropdown-checkbox{background-color:var(--n-color-surface);block-size:var(--n-space-m);border:1px solid var(--n-color-border-hover);border-radius:var(--n-border-radius-s);color:var(--n-color-text-on-accent);display:grid;flex:0 0 var(--n-space-m);inline-size:var(--n-space-m);place-items:center}nord-filter-dropdown .n-filter-dropdown-checkbox:has(nord-icon){background-color:var(--n-color-accent);border-color:var(--n-color-accent)}nord-filter-dropdown .n-filter-dropdown-check{block-size:var(--n-space-m);color:var(--n-color-text-highlight);display:grid;flex:0 0 var(--n-space-m);inline-size:var(--n-space-m);place-items:center}nord-filter-dropdown .n-filter-dropdown-empty{color:var(--n-color-text-weaker);display:flex;justify-content:center;padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}`;k.registerIcon(t),k.registerIcon(i),k.registerIcon(n),k.registerIcon(s),k.registerIcon(r);let L=1;function M(e){return"heading"in e}let R=class extends(z(p)){constructor(){super(...arguments),this.filterDropdownId="nord-filter-dropdown-"+L++,this.localize=new x(this),this.listRef=m(),this.dismiss=new w(this,{isOpen:()=>this.open,onDismiss:()=>this.hide(),isDismissible:e=>e!==this}),this.activeDescendant=new o(this,{count:()=>this.flatOptions.length,isEnabled:e=>{var t;return!(null===(t=this.flatOptions[e])||void 0===t?void 0:t.disabled)},optionId:e=>this.optionId(e)}),this.openState=new y(this,{isOpen:()=>this.open,setOpen:e=>{this.open=e},popout:()=>this.popout,isInert:()=>this.disabled,onOpen:()=>{var e;this.loadMoreRequested=!1,null===(e=this.listRef.value)||void 0===e||e.scrollTo(0,0),this.activeDescendant.reset()},onClose:()=>{this.search&&(this.search=""),this.removable&&this.isInactive&&this.dispatchEvent(new S)}}),this.label="",this.name="",this.icon="interface-filter",this.size="s",this.options=[],this.optionsValueKey="value",this.optionsLabelKey="label",this.value="",this.multiple=!1,this.searchable=!1,this.internalSearch=!0,this.selectAll=!1,this.clearable=!0,this.removable=!1,this.disabled=!1,this.loading=!1,this.open=!1,this.noResultsMessage="",this.labelForUnknown="",this.search="",this.scrollActivePending=!1,this.loadMoreRequested=!1,this.handleTriggerClick=()=>{this.openState.toggle()},this.toggleSelectAll=()=>{!this.disabled&&this.multiple&&this.commit(this.isAllSelected?[]:[...this.allSelectableValues])},this.handleClear=e=>{e.stopPropagation(),this.disabled||(this.clear(),this.focus())},this.handleRemove=e=>{e.stopPropagation(),this.disabled||(this.clear(),this.dispatchEvent(new S))},this.handleSearchInput=e=>{if(e.stopPropagation(),this.disabled)return;const t=e.target;this.search=t.value,this.activeDescendant.reset(),this.scrollActivePending=!0,this.dispatchEvent(new A(this.search))},this.handleListScroll=e=>{if(this.disabled)return;const t=e.target,{scrollTop:i,scrollHeight:o,clientHeight:n}=t;if(o<=n)return;(i+n)/o>.8?this.loading||this.loadMoreRequested||(this.loadMoreRequested=!0,this.dispatchEvent(new D)):this.loadMoreRequested=!1},this.handleKeydown=e=>{if(!this.disabled)switch(e.key){case"ArrowDown":if(e.preventDefault(),!this.open)return void this.show();this.activeDescendant.move(1),this.scrollActivePending=!0;break;case"ArrowUp":if(e.preventDefault(),!this.open)return void this.show();this.activeDescendant.move(-1),this.scrollActivePending=!0;break;case"Home":this.open&&(e.preventDefault(),this.activeDescendant.first(),this.scrollActivePending=!0);break;case"End":this.open&&(e.preventDefault(),this.activeDescendant.last(),this.scrollActivePending=!0);break;case"Enter":{if(!this.open)return e.preventDefault(),void this.show();e.preventDefault();const t=this.flatOptions[this.activeDescendant.activeIndex];t&&this.toggle(t);break}case"Escape":this.open&&(e.preventDefault(),this.hide(),this.focus())}}}connectedCallback(){super.connectedCallback(),j(this,C),j(this,$,"nord-filter-chip")}createRenderRoot(){return this}get valueAsArray(){const{value:e}=this;return Array.isArray(e)?e:e?[e]:[]}get isInactive(){return 0===this.valueAsArray.length}getOptionValue(e){var t;return String(null!==(t=e[this.optionsValueKey])&&void 0!==t?t:"")}getOptionLabel(e){var t;return String(null!==(t=e[this.optionsLabelKey])&&void 0!==t?t:"")}get hasGroupedOptions(){return this.options.some((e=>{var t;return M(e)||Boolean(null===(t=e.children)||void 0===t?void 0:t.length)}))}get needle(){return this.searchable&&this.internalSearch?this.search.trim().toLocaleLowerCase():""}matchesSearch(e){const t=this.needle;return!t||this.getOptionLabel(e).toLocaleLowerCase().includes(t)}get sections(){var e,t;const i=(e,t)=>({value:this.getOptionValue(e),label:this.getOptionLabel(e),disabled:Boolean(e.disabled),indent:t,source:e});if(!this.hasGroupedOptions){const e=this.options.filter((e=>this.matchesSearch(e))).map((e=>i(e,!1)));return e.length?[{options:e}]:[]}const o=[];let n=[];const s=()=>{n.length&&(o.push({options:n}),n=[])};for(const r of this.options)if(M(r)){s();const t=(null!==(e=r.children)&&void 0!==e?e:[]).filter((e=>this.matchesSearch(e))).map((e=>i({...e,disabled:e.disabled||r.disabled},!1)));t.length&&o.push({heading:r.heading,options:t})}else if(null===(t=r.children)||void 0===t?void 0:t.length){const e=this.matchesSearch(r),t=r.children.filter((e=>this.matchesSearch(e)));if(e||t.length){e&&n.push(i(r,!1));for(const e of t)n.push(i(e,!0))}}else this.matchesSearch(r)&&n.push(i(r,!1));return s(),o}get flatOptions(){return this.sections.flatMap((e=>e.options))}get allSelectableValues(){var e,t;const i=[];for(const o of this.options)if(M(o)){if(o.disabled)continue;for(const t of null!==(e=o.children)&&void 0!==e?e:[])t.disabled||i.push(this.getOptionValue(t))}else{o.disabled||i.push(this.getOptionValue(o));for(const e of null!==(t=o.children)&&void 0!==t?t:[])o.disabled||e.disabled||i.push(this.getOptionValue(e))}return i}get isAllSelected(){if(!this.selectAll||!this.multiple)return!1;const e=this.allSelectableValues,t=new Set(this.valueAsArray);return e.length>0&&e.every((e=>t.has(e)))}labelForValue(e){var t,i;for(const o of this.options)if(M(o)){for(const i of null!==(t=o.children)&&void 0!==t?t:[])if(this.getOptionValue(i)===e)return this.getOptionLabel(i)}else{if(this.getOptionValue(o)===e)return this.getOptionLabel(o);for(const t of null!==(i=o.children)&&void 0!==i?i:[])if(this.getOptionValue(t)===e)return this.getOptionLabel(t)}return this.labelForUnknown||this.localize.term("unknown")}get selectionLabel(){const e=this.valueAsArray;if(0===e.length)return"";const t=this.labelForValue(e[0]);return e.length>1?t+this.localize.term("countSuffix",e.length-1):t}isSelected(e){return this.valueAsArray.includes(e)}show(){this.openState.show()}hide(){this.openState.hide()}focus(e){var t;null===(t=this.triggerButton)||void 0===t||t.focus(e)}updated(e){var t,i;super.updated(e),this.scrollActivePending&&(this.scrollActivePending=!1,null===(i=null===(t=this.listRef.value)||void 0===t?void 0:t.querySelector(".n-filter-dropdown-option.is-active"))||void 0===i||i.scrollIntoView({block:"nearest"})),this.loadMoreRequested&&(e.has("loading")||e.has("options"))&&(this.loadMoreRequested=!1),e.has("disabled")&&this.disabled&&(this.activeDescendant.reset(),this.scrollActivePending=!0)}commit(e){this.value=e,this.dispatchEvent(new I(e))}toggle(e){if(this.disabled||e.disabled)return;if(!this.multiple)return this.commit(e.value),void this.hide();const t=this.valueAsArray,i=t.includes(e.value)?t.filter((t=>t!==e.value)):[...t,e.value];this.commit(i)}clear(){this.disabled||(this.search="",this.dispatchEvent(new O),this.commit(this.multiple?[]:""))}get listInlineSizeClass(){return`n-filter-dropdown-size-${this.size}`}renderIndicator(e){const t=this.isSelected(e);return this.multiple?a`<span class="n-filter-dropdown-checkbox">${t?a`<nord-icon name="interface-checked-small" size="xs"></nord-icon>`:d}</span>`:a`<span class="n-filter-dropdown-check">${t?a`<nord-icon name="interface-checked" size="s"></nord-icon>`:d}</span>`}renderOption(e,t){const i=this.isSelected(e.value);return a`<div id="${this.optionId(t)}" class="${f({"n-filter-dropdown-option":!0,"is-active":t===this.activeDescendant.activeIndex,"is-disabled":e.disabled,"is-indented":e.indent})}" role="option" aria-selected="${i?"true":"false"}" aria-disabled="${e.disabled?"true":d}" @click="${()=>this.toggle(e)}" @mousemove="${()=>this.activeDescendant.setActiveIndex(t)}">${this.renderIndicator(e.value)} <span class="n-filter-dropdown-option-label">${e.label}</span></div>`}optionId(e){return`${this.filterDropdownId}-option-${e}`}renderList(){const e=this.sections,t=e.flatMap((e=>e.options));if(this.loading&&0===t.length)return a`<div class="n-filter-dropdown-empty" role="status"><nord-spinner size="s"></nord-spinner></div>`;if(0===t.length)return a`<div class="n-filter-dropdown-empty" role="status">${this.noResultsMessage||this.localize.term("noResults")}</div>`;let i=0;return g(e,((e,t)=>t),((e,t)=>{const o=e.heading?`${this.filterDropdownId}-group-${t}`:void 0;return a`<div class="n-filter-dropdown-group" role="group" aria-labelledby="${null!=o?o:d}">${e.heading?a`<div class="n-filter-dropdown-heading" id="${o}" role="presentation">${e.heading}</div>`:d} ${g(e.options,((e,i)=>`${t}-${i}`),(e=>this.renderOption(e,i++)))}</div>`}))}render(){var e;const t=`${this.filterDropdownId}-popout`,i=`${this.filterDropdownId}-list`,o=!this.isInactive,n=this.removable,s=!n&&this.clearable&&o,r=this.open&&null!==(e=this.activeDescendant.activeDescendant)&&void 0!==e?e:d;return a`<nord-button-group><nord-button class="n-filter-dropdown-trigger" type="button" size="${this.size}" variant="${o?d:"dashed"}" aria-controls="${t}" aria-haspopup="dialog" aria-expanded="${this.open?"true":"false"}" aria-activedescendant="${r}" ?disabled="${this.disabled}" @click="${this.handleTriggerClick}" @keydown="${this.handleKeydown}"><nord-icon slot="start" name="${this.icon}" label="${this.localize.term("filterIconLabel")}"></nord-icon><span class="n-filter-dropdown-label">${o?this.localize.term("selectionLabel",this.label):this.label}</span> ${o?a`<span class="n-filter-dropdown-value">${this.selectionLabel}</span>`:d}</nord-button>${s?a`<nord-button class="n-filter-dropdown-clear" type="button" size="${this.size}" square ?disabled="${this.disabled}" @click="${this.handleClear}"><nord-icon name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("clearLabel")}</nord-visually-hidden></nord-button>`:d} ${n?a`<nord-button class="n-filter-dropdown-remove" type="button" size="${this.size}" square variant="${o?d:"dashed"}" ?disabled="${this.disabled}" @click="${this.handleRemove}"><nord-icon name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("removeLabel")}</nord-visually-hidden></nord-button>`:d}</nord-button-group><nord-popout id="${t}" controlled always-floating @open="${this.openState.onPopoutOpen}" @close="${this.openState.onPopoutClose}"><div class="${f({"n-filter-dropdown-panel":!0,[this.listInlineSizeClass]:!0})}">${this.searchable?a`<div class="n-filter-dropdown-search"><nord-input type="search" label="${this.localize.term("searchLabel")}" hide-label expand size="s" .value="${this.search}" ?disabled="${this.disabled}" @input="${this.handleSearchInput}" @keydown="${this.handleKeydown}"><nord-icon slot="start" name="navigation-search"></nord-icon>${this.loading?a`<nord-spinner slot="end" size="s"></nord-spinner>`:d}</nord-input></div>`:d} ${this.selectAll&&this.multiple?a`<div class="n-filter-dropdown-select-all"><div class="${f({"n-filter-dropdown-option":!0,"is-active":!1})}" role="button" tabindex="0" aria-pressed="${this.isAllSelected?"true":"false"}" aria-disabled="${this.disabled?"true":d}" @click="${this.toggleSelectAll}" @keydown="${e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.toggleSelectAll())}}"><span class="n-filter-dropdown-checkbox">${this.isAllSelected?a`<nord-icon name="interface-checked-small" size="xs"></nord-icon>`:d} </span><span class="n-filter-dropdown-option-label">${this.isAllSelected?this.localize.term("deselectAll"):this.localize.term("selectAll")}</span></div></div>`:d}<div ${b(this.listRef)} id="${i}" class="${f({"n-filter-dropdown-list":!0,"is-loading-more":this.loading&&this.flatOptions.length>0})}" role="listbox" aria-label="${this.label||d}" aria-multiselectable="${this.multiple?"true":"false"}" @scroll="${this.handleListScroll}" @keydown="${this.handleKeydown}">${this.renderList()}</div></div></nord-popout>`}};e([c("nord-popout",!0)],R.prototype,"popout",void 0),e([c(".n-filter-dropdown-trigger")],R.prototype,"triggerButton",void 0),e([h({reflect:!0})],R.prototype,"label",void 0),e([h({reflect:!0})],R.prototype,"name",void 0),e([h({reflect:!0})],R.prototype,"icon",void 0),e([h({reflect:!0})],R.prototype,"size",void 0),e([h({attribute:!1})],R.prototype,"options",void 0),e([h({reflect:!0,attribute:"options-value-key"})],R.prototype,"optionsValueKey",void 0),e([h({reflect:!0,attribute:"options-label-key"})],R.prototype,"optionsLabelKey",void 0),e([h({attribute:!1})],R.prototype,"value",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"multiple",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"searchable",void 0),e([h({reflect:!0,type:Boolean,attribute:"internal-search"})],R.prototype,"internalSearch",void 0),e([h({reflect:!0,type:Boolean,attribute:"select-all"})],R.prototype,"selectAll",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"clearable",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"removable",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"disabled",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"loading",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"open",void 0),e([h({reflect:!0,attribute:"no-results-message"})],R.prototype,"noResultsMessage",void 0),e([h({reflect:!0,attribute:"label-for-unknown"})],R.prototype,"labelForUnknown",void 0),e([u()],R.prototype,"search",void 0),R=e([v("nord-filter-dropdown")],R);var V=R;export{I as FilterDropdownChangeEvent,O as FilterDropdownClearEvent,D as FilterDropdownLoadMoreEvent,S as FilterDropdownRemoveEvent,A as FilterDropdownSearchChangeEvent,V as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{c as t}from"./interface-checked-small-BQmkNgCI.js";import{c as i,A as o}from"./ActiveDescendantController-BnMqM79O.js";import{c as n}from"./interface-close-small-CnpAFMO3.js";import{f as s}from"./interface-filter-CCsx9-u6.js";import{s as r}from"./navigation-search-CBbIGzo2.js";import{css as l,html as a,nothing as d,LitElement as p}from"lit";import{query as c,property as h,state as u,customElement as v}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{createRef as m,ref as b}from"lit/directives/ref.js";import{repeat as g}from"lit/directives/repeat.js";import{L as w}from"./LightDismissController-wcL1ziJa.js";import{O as y}from"./OpenStateController-CCnZ7up6.js";import{i as j}from"./light-dom-styles-DXsbiKU9.js";import{D as z}from"./DraftComponentMixin-4qug5Rky.js";import{s as $}from"./filter-chip-C97zd4PT.js";import k from"./Icon.js";import{LocalizeController as x}from"./LocalizeController.js";import{FilterDropdownRemoveEvent as S,FilterDropdownSearchChangeEvent as A,FilterDropdownLoadMoreEvent as D,FilterDropdownChangeEvent as I,FilterDropdownClearEvent as O}from"./FilterDropdownEvents.js";import"./Button.js";import"./ButtonGroup.js";import"./Input.js";import"./Popout-B6Hirj3y.js";import"./Spinner.js";import"./VisuallyHidden.js";import"./number-Dg2vCfGd.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.js";import"./events-Bv6wNHwJ.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./DirectionController-ChvNGESZ.js";import"lit/directives/style-map.js";import"./ResizeController-14PUwRQy.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./FormAssociatedMixin-D9aPREgv.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./ReadonlyMixin-BdJPGtQ3.js";import"./SizeMixin-CU9cLbLC.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./FormField-CMgEFZCK.js";import"./TextField-CSKvieoG.js";import"./positioning-D-K8Mueq.js";import"./ScrollbarController-BFC67Y2x.js";const C=l`nord-filter-dropdown{--_n-filter-dropdown-list-inline-size:var(--n-filter-dropdown-list-inline-size,250px)}nord-filter-dropdown .n-filter-dropdown-panel{display:flex;flex-direction:column;max-inline-size:calc(var(--_n-filter-dropdown-list-inline-size)*1.5);min-inline-size:var(--_n-filter-dropdown-list-inline-size)}nord-filter-dropdown .n-filter-dropdown-size-s{--_n-filter-dropdown-list-inline-size:var(--n-filter-dropdown-list-inline-size,250px)}nord-filter-dropdown .n-filter-dropdown-size-l{--_n-filter-dropdown-list-inline-size:var(--n-filter-dropdown-list-inline-size,300px)}nord-filter-dropdown .n-filter-dropdown-search{padding-block-end:var(--n-space-xs);padding-block-start:var(--n-space-m);padding-inline-end:var(--n-space-m);padding-inline-start:var(--n-space-m)}nord-filter-dropdown .n-filter-dropdown-select-all{border-block-end:1px solid var(--n-color-border);padding-block-start:0}nord-filter-dropdown .n-filter-dropdown-list,nord-filter-dropdown .n-filter-dropdown-select-all{padding-block-end:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-list{max-block-size:330px;overflow-y:auto;padding-block-start:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-list.is-loading-more{opacity:.3;pointer-events:none}@media (width <= 35.9375em){nord-filter-dropdown .n-filter-dropdown-panel{max-inline-size:none}nord-filter-dropdown .n-filter-dropdown-list{max-block-size:70vh}}nord-filter-dropdown .n-filter-dropdown-group{border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s);padding-block-end:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-group:last-child{border-block-end:0;margin-block-end:0;padding-block-end:0}nord-filter-dropdown .n-filter-dropdown-heading{color:var(--n-color-text-weaker);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);padding-block-end:var(--n-space-xs);padding-block-start:var(--n-space-xs);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-option{align-items:center;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:flex;gap:var(--n-space-s);padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s);user-select:none}nord-filter-dropdown .n-filter-dropdown-option.is-indented{padding-inline-start:var(--n-space-l)}nord-filter-dropdown .n-filter-dropdown-option.is-active,nord-filter-dropdown .n-filter-dropdown-option:hover{background-color:var(--n-color-active)}nord-filter-dropdown .n-filter-dropdown-option.is-disabled{color:var(--n-color-text-weakest);cursor:not-allowed;pointer-events:none}nord-filter-dropdown .n-filter-dropdown-option-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nord-filter-dropdown .n-filter-dropdown-checkbox{background-color:var(--n-color-surface);block-size:var(--n-space-m);border:1px solid var(--n-color-border-hover);border-radius:var(--n-border-radius-s);color:var(--n-color-text-on-accent);display:grid;flex:0 0 var(--n-space-m);inline-size:var(--n-space-m);place-items:center}nord-filter-dropdown .n-filter-dropdown-checkbox:has(nord-icon){background-color:var(--n-color-accent);border-color:var(--n-color-accent)}nord-filter-dropdown .n-filter-dropdown-check{block-size:var(--n-space-m);color:var(--n-color-text-highlight);display:grid;flex:0 0 var(--n-space-m);inline-size:var(--n-space-m);place-items:center}nord-filter-dropdown .n-filter-dropdown-empty{color:var(--n-color-text-weaker);display:flex;justify-content:center;padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}`;k.registerIcon(t),k.registerIcon(i),k.registerIcon(n),k.registerIcon(s),k.registerIcon(r);let L=1;function M(e){return"heading"in e}let R=class extends(z(p)){constructor(){super(...arguments),this.filterDropdownId="nord-filter-dropdown-"+L++,this.localize=new x(this),this.listRef=m(),this.dismiss=new w(this,{isOpen:()=>this.open,onDismiss:()=>this.hide(),isDismissible:e=>e!==this}),this.activeDescendant=new o(this,{count:()=>this.flatOptions.length,isEnabled:e=>{var t;return!(null===(t=this.flatOptions[e])||void 0===t?void 0:t.disabled)},optionId:e=>this.optionId(e)}),this.openState=new y(this,{isOpen:()=>this.open,setOpen:e=>{this.open=e},popout:()=>this.popout,isInert:()=>this.disabled,onOpen:()=>{var e;this.loadMoreRequested=!1,null===(e=this.listRef.value)||void 0===e||e.scrollTo(0,0),this.activeDescendant.reset()},onClose:()=>{this.search&&(this.search=""),this.removable&&this.isInactive&&this.dispatchEvent(new S)}}),this.label="",this.name="",this.icon="interface-filter",this.size="s",this.options=[],this.optionsValueKey="value",this.optionsLabelKey="label",this.value="",this.multiple=!1,this.searchable=!1,this.internalSearch=!0,this.selectAll=!1,this.clearable=!0,this.removable=!1,this.disabled=!1,this.loading=!1,this.open=!1,this.noResultsMessage="",this.labelForUnknown="",this.search="",this.scrollActivePending=!1,this.loadMoreRequested=!1,this.handleTriggerClick=()=>{this.openState.toggle()},this.toggleSelectAll=()=>{!this.disabled&&this.multiple&&this.commit(this.isAllSelected?[]:[...this.allSelectableValues])},this.handleClear=e=>{e.stopPropagation(),this.disabled||(this.clear(),this.focus())},this.handleRemove=e=>{e.stopPropagation(),this.disabled||(this.clear(),this.dispatchEvent(new S))},this.handleSearchInput=e=>{if(e.stopPropagation(),this.disabled)return;const t=e.target;this.search=t.value,this.activeDescendant.reset(),this.scrollActivePending=!0,this.dispatchEvent(new A(this.search))},this.handleListScroll=e=>{if(this.disabled)return;const t=e.target,{scrollTop:i,scrollHeight:o,clientHeight:n}=t;if(o<=n)return;(i+n)/o>.8?this.loading||this.loadMoreRequested||(this.loadMoreRequested=!0,this.dispatchEvent(new D)):this.loadMoreRequested=!1},this.handleKeydown=e=>{if(!this.disabled)switch(e.key){case"ArrowDown":if(e.preventDefault(),!this.open)return void this.show();this.activeDescendant.move(1),this.scrollActivePending=!0;break;case"ArrowUp":if(e.preventDefault(),!this.open)return void this.show();this.activeDescendant.move(-1),this.scrollActivePending=!0;break;case"Home":this.open&&(e.preventDefault(),this.activeDescendant.first(),this.scrollActivePending=!0);break;case"End":this.open&&(e.preventDefault(),this.activeDescendant.last(),this.scrollActivePending=!0);break;case"Enter":{if(!this.open)return e.preventDefault(),void this.show();e.preventDefault();const t=this.flatOptions[this.activeDescendant.activeIndex];t&&this.toggle(t);break}case"Escape":this.open&&(e.preventDefault(),this.hide(),this.focus())}}}connectedCallback(){super.connectedCallback(),j(this,C),j(this,$,"nord-filter-chip")}createRenderRoot(){return this}get valueAsArray(){const{value:e}=this;return Array.isArray(e)?e:e?[e]:[]}get isInactive(){return 0===this.valueAsArray.length}getOptionValue(e){var t;return String(null!==(t=e[this.optionsValueKey])&&void 0!==t?t:"")}getOptionLabel(e){var t;return String(null!==(t=e[this.optionsLabelKey])&&void 0!==t?t:"")}get hasGroupedOptions(){return this.options.some((e=>{var t;return M(e)||Boolean(null===(t=e.children)||void 0===t?void 0:t.length)}))}get needle(){return this.searchable&&this.internalSearch?this.search.trim().toLocaleLowerCase():""}matchesSearch(e){const t=this.needle;return!t||this.getOptionLabel(e).toLocaleLowerCase().includes(t)}get sections(){var e,t;const i=(e,t)=>({value:this.getOptionValue(e),label:this.getOptionLabel(e),disabled:Boolean(e.disabled),indent:t,source:e});if(!this.hasGroupedOptions){const e=this.options.filter((e=>this.matchesSearch(e))).map((e=>i(e,!1)));return e.length?[{options:e}]:[]}const o=[];let n=[];const s=()=>{n.length&&(o.push({options:n}),n=[])};for(const r of this.options)if(M(r)){s();const t=(null!==(e=r.children)&&void 0!==e?e:[]).filter((e=>this.matchesSearch(e))).map((e=>i({...e,disabled:e.disabled||r.disabled},!1)));t.length&&o.push({heading:r.heading,options:t})}else if(null===(t=r.children)||void 0===t?void 0:t.length){const e=this.matchesSearch(r),t=r.children.filter((e=>this.matchesSearch(e)));if(e||t.length){e&&n.push(i(r,!1));for(const e of t)n.push(i(e,!0))}}else this.matchesSearch(r)&&n.push(i(r,!1));return s(),o}get flatOptions(){return this.sections.flatMap((e=>e.options))}get allSelectableValues(){var e,t;const i=[];for(const o of this.options)if(M(o)){if(o.disabled)continue;for(const t of null!==(e=o.children)&&void 0!==e?e:[])t.disabled||i.push(this.getOptionValue(t))}else{o.disabled||i.push(this.getOptionValue(o));for(const e of null!==(t=o.children)&&void 0!==t?t:[])o.disabled||e.disabled||i.push(this.getOptionValue(e))}return i}get isAllSelected(){if(!this.selectAll||!this.multiple)return!1;const e=this.allSelectableValues,t=new Set(this.valueAsArray);return e.length>0&&e.every((e=>t.has(e)))}labelForValue(e){var t,i;for(const o of this.options)if(M(o)){for(const i of null!==(t=o.children)&&void 0!==t?t:[])if(this.getOptionValue(i)===e)return this.getOptionLabel(i)}else{if(this.getOptionValue(o)===e)return this.getOptionLabel(o);for(const t of null!==(i=o.children)&&void 0!==i?i:[])if(this.getOptionValue(t)===e)return this.getOptionLabel(t)}return this.labelForUnknown||this.localize.term("unknown")}get selectionLabel(){const e=this.valueAsArray;if(0===e.length)return"";const t=this.labelForValue(e[0]);return e.length>1?t+this.localize.term("countSuffix",e.length-1):t}isSelected(e){return this.valueAsArray.includes(e)}show(){this.openState.show()}hide(){this.openState.hide()}focus(e){var t;null===(t=this.triggerButton)||void 0===t||t.focus(e)}updated(e){var t,i;super.updated(e),this.scrollActivePending&&(this.scrollActivePending=!1,null===(i=null===(t=this.listRef.value)||void 0===t?void 0:t.querySelector(".n-filter-dropdown-option.is-active"))||void 0===i||i.scrollIntoView({block:"nearest"})),this.loadMoreRequested&&(e.has("loading")||e.has("options"))&&(this.loadMoreRequested=!1),e.has("disabled")&&this.disabled&&(this.activeDescendant.reset(),this.scrollActivePending=!0)}commit(e){this.value=e,this.dispatchEvent(new I(e))}toggle(e){if(this.disabled||e.disabled)return;if(!this.multiple)return this.commit(e.value),void this.hide();const t=this.valueAsArray,i=t.includes(e.value)?t.filter((t=>t!==e.value)):[...t,e.value];this.commit(i)}clear(){this.disabled||(this.search="",this.dispatchEvent(new O),this.commit(this.multiple?[]:""))}get listInlineSizeClass(){return`n-filter-dropdown-size-${this.size}`}renderIndicator(e){const t=this.isSelected(e);return this.multiple?a`<span class="n-filter-dropdown-checkbox">${t?a`<nord-icon name="interface-checked-small" size="xs"></nord-icon>`:d}</span>`:a`<span class="n-filter-dropdown-check">${t?a`<nord-icon name="interface-checked" size="s"></nord-icon>`:d}</span>`}renderOption(e,t){const i=this.isSelected(e.value);return a`<div id="${this.optionId(t)}" class="${f({"n-filter-dropdown-option":!0,"is-active":t===this.activeDescendant.activeIndex,"is-disabled":e.disabled,"is-indented":e.indent})}" role="option" aria-selected="${i?"true":"false"}" aria-disabled="${e.disabled?"true":d}" @click="${()=>this.toggle(e)}" @mousemove="${()=>this.activeDescendant.setActiveIndex(t)}">${this.renderIndicator(e.value)} <span class="n-filter-dropdown-option-label">${e.label}</span></div>`}optionId(e){return`${this.filterDropdownId}-option-${e}`}renderList(){const e=this.sections,t=e.flatMap((e=>e.options));if(this.loading&&0===t.length)return a`<div class="n-filter-dropdown-empty" role="status"><nord-spinner size="s"></nord-spinner></div>`;if(0===t.length)return a`<div class="n-filter-dropdown-empty" role="status">${this.noResultsMessage||this.localize.term("noResults")}</div>`;let i=0;return g(e,((e,t)=>t),((e,t)=>{const o=e.heading?`${this.filterDropdownId}-group-${t}`:void 0;return a`<div class="n-filter-dropdown-group" role="group" aria-labelledby="${null!=o?o:d}">${e.heading?a`<div class="n-filter-dropdown-heading" id="${o}" role="presentation">${e.heading}</div>`:d} ${g(e.options,((e,i)=>`${t}-${i}`),(e=>this.renderOption(e,i++)))}</div>`}))}render(){var e;const t=`${this.filterDropdownId}-popout`,i=`${this.filterDropdownId}-list`,o=!this.isInactive,n=this.removable,s=!n&&this.clearable&&o,r=this.open&&null!==(e=this.activeDescendant.activeDescendant)&&void 0!==e?e:d;return a`<nord-button-group><nord-button class="n-filter-dropdown-trigger" type="button" size="${this.size}" variant="${o?d:"dashed"}" aria-controls="${t}" aria-haspopup="dialog" aria-expanded="${this.open?"true":"false"}" aria-activedescendant="${r}" ?disabled="${this.disabled}" @click="${this.handleTriggerClick}" @keydown="${this.handleKeydown}"><nord-icon slot="start" name="${this.icon}" label="${this.localize.term("filterIconLabel")}"></nord-icon><span class="n-filter-dropdown-label">${o?this.localize.term("selectionLabel",this.label):this.label}</span> ${o?a`<span class="n-filter-dropdown-value">${this.selectionLabel}</span>`:d}</nord-button>${s?a`<nord-button class="n-filter-dropdown-clear" type="button" size="${this.size}" square ?disabled="${this.disabled}" @click="${this.handleClear}"><nord-icon name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("clearLabel")}</nord-visually-hidden></nord-button>`:d} ${n?a`<nord-button class="n-filter-dropdown-remove" type="button" size="${this.size}" square variant="${o?d:"dashed"}" ?disabled="${this.disabled}" @click="${this.handleRemove}"><nord-icon name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("removeLabel")}</nord-visually-hidden></nord-button>`:d}</nord-button-group><nord-popout id="${t}" controlled always-floating @open="${this.openState.onPopoutOpen}" @close="${this.openState.onPopoutClose}"><div class="${f({"n-filter-dropdown-panel":!0,[this.listInlineSizeClass]:!0})}">${this.searchable?a`<div class="n-filter-dropdown-search"><nord-input type="search" label="${this.localize.term("searchLabel")}" hide-label expand size="s" .value="${this.search}" ?disabled="${this.disabled}" @input="${this.handleSearchInput}" @keydown="${this.handleKeydown}"><nord-icon slot="start" name="navigation-search"></nord-icon>${this.loading?a`<nord-spinner slot="end" size="s"></nord-spinner>`:d}</nord-input></div>`:d} ${this.selectAll&&this.multiple?a`<div class="n-filter-dropdown-select-all"><div class="${f({"n-filter-dropdown-option":!0,"is-active":!1})}" role="button" tabindex="0" aria-pressed="${this.isAllSelected?"true":"false"}" aria-disabled="${this.disabled?"true":d}" @click="${this.toggleSelectAll}" @keydown="${e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.toggleSelectAll())}}"><span class="n-filter-dropdown-checkbox">${this.isAllSelected?a`<nord-icon name="interface-checked-small" size="xs"></nord-icon>`:d} </span><span class="n-filter-dropdown-option-label">${this.isAllSelected?this.localize.term("deselectAll"):this.localize.term("selectAll")}</span></div></div>`:d}<div ${b(this.listRef)} id="${i}" class="${f({"n-filter-dropdown-list":!0,"is-loading-more":this.loading&&this.flatOptions.length>0})}" role="listbox" aria-label="${this.label||d}" aria-multiselectable="${this.multiple?"true":"false"}" @scroll="${this.handleListScroll}" @keydown="${this.handleKeydown}">${this.renderList()}</div></div></nord-popout>`}};e([c("nord-popout",!0)],R.prototype,"popout",void 0),e([c(".n-filter-dropdown-trigger")],R.prototype,"triggerButton",void 0),e([h({reflect:!0})],R.prototype,"label",void 0),e([h({reflect:!0})],R.prototype,"name",void 0),e([h({reflect:!0})],R.prototype,"icon",void 0),e([h({reflect:!0})],R.prototype,"size",void 0),e([h({attribute:!1})],R.prototype,"options",void 0),e([h({reflect:!0,attribute:"options-value-key"})],R.prototype,"optionsValueKey",void 0),e([h({reflect:!0,attribute:"options-label-key"})],R.prototype,"optionsLabelKey",void 0),e([h({attribute:!1})],R.prototype,"value",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"multiple",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"searchable",void 0),e([h({reflect:!0,type:Boolean,attribute:"internal-search"})],R.prototype,"internalSearch",void 0),e([h({reflect:!0,type:Boolean,attribute:"select-all"})],R.prototype,"selectAll",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"clearable",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"removable",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"disabled",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"loading",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"open",void 0),e([h({reflect:!0,attribute:"no-results-message"})],R.prototype,"noResultsMessage",void 0),e([h({reflect:!0,attribute:"label-for-unknown"})],R.prototype,"labelForUnknown",void 0),e([u()],R.prototype,"search",void 0),R=e([v("nord-filter-dropdown")],R);var V=R;export{I as FilterDropdownChangeEvent,O as FilterDropdownClearEvent,D as FilterDropdownLoadMoreEvent,S as FilterDropdownRemoveEvent,A as FilterDropdownSearchChangeEvent,V as default};
 //# sourceMappingURL=FilterDropdown.js.map