@nordhealth/components 1.0.0 → 1.1.2

package/lib/CommandMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandMenu.js","sources":["../../icons/lib/assets/keyboard-arrow-up-down.js","../../icons/lib/assets/keyboard-return.js","../../icons/lib/assets/keyboard-backspace.js","../src/common/focus.ts","../src/command-menu/CommandMenu.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M105.833 24v93m0-93L80 49.833M105.833 24l25.834 25.833M34.167 117V24m0 93L60 91.167M34.167 117 8.333 91.167\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"14\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"keyboard-arrow-up-down\"\nexport const tags = \"nordicon keyboard keys arrow up down shortcut\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"14\"><path d=\"M35 133 7 105l28-28\"/><path d=\"M7 105h112a14 14 0 0 0 14-14V21a14 14 0 0 0-14-14H77\"/></g></svg>'\nexport const title = \"keyboard-return\"\nexport const tags = \"nordicon keyboard return key shortcut\"\n","export default '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M6.707 4.879A3 3 0 0 1 8.828 4H15a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H8.828a3 3 0 0 1-2.12-.879l-4.415-4.414a1 1 0 0 1 0-1.414l4.414-4.414zm4 2.414a1 1 0 0 0-1.414 1.414L10.586 10l-1.293 1.293a1 1 0 1 0 1.414 1.414L12 11.414l1.293 1.293a1 1 0 0 0 1.414-1.414L13.414 10l1.293-1.293a1 1 0 0 0-1.414-1.414L12 8.586l-1.293-1.293z\" clip-rule=\"evenodd\"/></svg>'\nexport const title = \"keyboard-backspace\"\nexport const tags = \"nordicon keyboard backspace back delete key shortcut\"\n","/**\n * Gets the currently focused element, taking shadow roots into account.\n */\nexport function getFocusedElement(root: Document | ShadowRoot): Element | undefined {\n  if (root.activeElement?.shadowRoot) {\n    return getFocusedElement(root.activeElement.shadowRoot)\n  }\n\n  return root.activeElement || undefined\n}\n","import { LitElement, html, PropertyValues, nothing } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { repeat } from \"lit/directives/repeat.js\"\nimport { createRef, ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\n\nimport * as navigateIcon from \"@nordhealth/icons/lib/assets/keyboard-arrow-up-down.js\"\nimport * as enterIcon from \"@nordhealth/icons/lib/assets/keyboard-return.js\"\nimport * as backspaceIcon from \"@nordhealth/icons/lib/assets/keyboard-backspace.js\"\n\nimport { groupBy } from \"../common/collection.js\"\nimport { wrap } from \"../common/number.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { getFocusedElement } from \"../common/focus.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { KeyboardController } from \"./KeyboardController.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"./CommandMenuAction.js\"\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\nimport { SelectEvent } from \"./SelectEvent.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./CommandMenu.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nIcon.registerIcon(navigateIcon)\nIcon.registerIcon(enterIcon)\nIcon.registerIcon(backspaceIcon)\n\n/**\n * Command Menu allows users to navigate and use an app without\n * touching the mouse and helps them transform into “power users”\n * who can harness more advanced features far faster.\n *\n * @status ready\n * @category action\n * @slot footer - Used to replace the default footer contents.\n * @fires open - The command menu was opened.\n * @fires close - The command menu was closed.\n * @fires {SelectEvent} nord-select - User selected a command from the menu.\n */\n@customElement(\"nord-command-menu\")\nexport default class CommandMenu extends LitElement {\n  static styles = [componentStyle, style]\n\n  private inputRef = createRef<HTMLInputElement>()\n  private listRef = createRef<HTMLElement>()\n  private previousFocus?: HTMLElement\n\n  private localize = new LocalizeController<\"nord-command-menu\">(this)\n  private dismissController = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.close(),\n  })\n\n  private keyboardController = new KeyboardController(this, {\n    trigger: () => this.select(),\n    goBack: () => this.goBack(),\n    end: () => this.end(),\n    start: () => this.start(),\n    next: () => this.next(),\n    previous: () => this.previous(),\n    toggleOpen: () => this.toggleOpen(),\n  })\n\n  /**\n   * Show or hide the command menu.\n   */\n  @property({ type: Boolean }) open = false\n\n  /**\n   * Hint text to display in the Command Menu search field.\n   */\n  @property({ type: String }) placeholder = \"Type a command or search...\"\n\n  /**\n   * Array of commands to be included in the menu.\n   * Please see “Commands data” section for more documentation.\n   */\n  @property({ type: Array, attribute: false }) commands: Array<ICommandMenuAction> = []\n\n  @state() private parent?: string\n  @state() private search: string = \"\"\n  @state() private bump = true\n  @state() private selectedIndex = 0\n  @state() private filteredCommands: Array<ICommandMenuAction> = []\n\n  private get selected(): ICommandMenuAction {\n    return this.filteredCommands[this.selectedIndex]\n  }\n\n  /**\n   * Show the command menu programmatically.\n   * @param options allows you to open the menu filtered to a specific parent command.\n   */\n  show(options: { parent?: string } = {}) {\n    const notCancelled = this.dispatchEvent(new NordEvent(\"open\", { cancelable: true }))\n\n    if (notCancelled) {\n      this.open = true\n      this.setParent(options.parent)\n    }\n  }\n\n  /**\n   * Close the command menu programmatically.\n   */\n  close() {\n    this.open = false\n    this.previousFocus?.focus()\n    this.previousFocus = undefined\n\n    this.dispatchEvent(new NordEvent(\"close\"))\n  }\n\n  /**\n   * Toggle the open state programmatically.\n   */\n  toggleOpen() {\n    if (this.open) {\n      this.close()\n    } else {\n      this.show()\n    }\n  }\n\n  /**\n   * Focus the command menu's input.\n   */\n  focus() {\n    this.inputRef.value?.focus()\n  }\n\n  override willUpdate(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has(\"commands\")) {\n      this.keyboardController.registerCommandShortcuts()\n    }\n\n    if (changedProperties.has(\"open\") && this.open) {\n      this.bump = true\n    }\n\n    if (\n      // @ts-expect-error this is a private property so it errors, but it's fine here\n      changedProperties.has(\"search\") ||\n      // @ts-expect-error this is a private property so it errors, but it's fine here\n      changedProperties.has(\"parent\") ||\n      changedProperties.has(\"commands\")\n    ) {\n      this.filterCommands()\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has(\"open\") && this.open) {\n      this.previousFocus = getFocusedElement(document) as HTMLElement\n      this.focus()\n\n      if (this.listRef.value) {\n        this.listRef.value.scrollTop = 0\n      }\n    }\n  }\n\n  override render() {\n    const sections = groupBy(this.filteredCommands, \"section\")\n    const activeDescendant = this.filteredCommands.length === 0 ? \"no-results\" : this.selected?.id\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-visible\": this.open,\n          \"n-modal\": true,\n        })}\n      >\n        <div\n          @animationend=${this.handleAnimationEnd}\n          class=${classMap({\n            \"n-bump\": this.bump,\n            \"n-modal-content\": true,\n          })}\n        >\n          <div class=\"n-search-wrapper\">\n            <nord-visually-hidden id=\"instructions\"> ${this.localize.term(\"instructions\")} </nord-visually-hidden>\n            <input\n              type=\"text\"\n              id=\"search\"\n              @input=${this.handleInput}\n              @blur=${this.handleBlur}\n              ${ref(this.inputRef)}\n              placeholder=${this.placeholder}\n              .value=${this.search}\n              spellcheck=\"false\"\n              autocomplete=\"off\"\n              autocapitalize=\"off\"\n              aria-label=${this.localize.term(\"inputLabel\")}\n              aria-autocomplete=\"list\"\n              aria-haspopup=\"listbox\"\n              role=\"combobox\"\n              aria-controls=\"list\"\n              aria-expanded=\"true\"\n              aria-activedescendant=${ifDefined(activeDescendant)}\n              aria-describedby=\"instructions\"\n            />\n          </div>\n\n          <div class=\"n-modal-body\">\n            <div id=\"list\" ${ref(this.listRef)} role=\"listbox\">\n              ${this.filteredCommands.length === 0\n                ? this.renderNoResults()\n                : Array.from(sections, ([section, commands]) => this.renderSection(section, commands))}\n            </div>\n          </div>\n          <slot name=\"footer\">\n            <div class=\"n-modal-footer\">\n              <span class=\"n-help\">\n                <nord-icon label=\"Arrow keys\" name=${navigateIcon.title}></nord-icon>\n                ${this.localize.term(\"footerArrowKeys\")}\n              </span>\n              <span class=\"n-help\">\n                <nord-icon label=\"Enter key\" name=${enterIcon.title}></nord-icon>\n                ${this.localize.term(\"footerEnterKey\")}\n              </span>\n              <span class=\"n-help\">${this.localize.term(\"footerEscapeKey\")}</span>\n              <span class=\"n-help n-backspace\">\n                <nord-icon label=\"Backspace key\" name=${backspaceIcon.title}></nord-icon>\n                ${this.localize.term(\"footerBackspaceKey\")}\n              </span>\n            </div>\n          </slot>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNoResults() {\n    return html`\n      <div id=\"no-results\" class=\"n-command-empty\" role=\"option\" aria-selected=\"true\">\n        <div class=\"n-title\">${this.localize.term(\"noResults\", this.search)}</div>\n        <div class=\"n-tip\">${this.localize.term(\"tip\")}</div>\n      </div>\n    `\n  }\n\n  private renderSection(section: string | undefined, commands: ICommandMenuAction[]) {\n    const sectionId = `section-${section}`\n\n    // TODO: test on latest safari, since it seems to have issues with grouped options\n    return html`\n      <div role=\"group\" aria-labelledby=${ifDefined(section ? sectionId : undefined)}>\n        ${section\n          ? html`<div class=\"n-group-header\" role=\"presentation\" id=${ifDefined(sectionId)}>${section}</div>`\n          : nothing}\n        ${repeat(\n          commands,\n          command => command.id,\n          command => html`\n            <nord-command-menu-action\n              id=${command.id}\n              .command=${command}\n              ?selected=${command.id === this.selected?.id}\n              @click=${() => this.select(command)}\n              role=\"option\"\n              aria-selected=${ifDefined(command.id === this.selected?.id || undefined)}\n            ></nord-command-menu-action>\n          `\n        )}\n      </div>\n    `\n  }\n\n  private handleAnimationEnd() {\n    this.bump = false\n  }\n\n  private handleBlur() {\n    if (this.open) {\n      this.focus()\n    }\n  }\n\n  private handleInput(event: KeyboardEvent) {\n    const input = event.target as HTMLInputElement\n    this.setSearch(input.value)\n  }\n\n  private select(command: ICommandMenuAction = this.selected) {\n    const isParent = this.commands.some(item => item.parent === command.id)\n\n    if (isParent) {\n      this.setParent(command.id)\n      this.bump = true\n      this.focus()\n    } else {\n      this.close()\n    }\n\n    this.setSearch(\"\")\n    command.handler?.(this)\n\n    // this is separated into two parts because of a bug in Custom Elements Analyzer, where it gets the event name wrong.\n    // TODO: cleanup when bug is fixed.\n    const event = new SelectEvent(command)\n    this.dispatchEvent(event)\n  }\n\n  private start() {\n    this.selectedIndex = 0\n  }\n\n  private end() {\n    this.selectedIndex = this.filteredCommands.length - 1\n  }\n\n  private next() {\n    this.selectedIndex = wrap(this.selectedIndex + 1, 0, this.filteredCommands.length - 1)\n  }\n\n  private previous() {\n    this.selectedIndex = wrap(this.selectedIndex - 1, 0, this.filteredCommands.length - 1)\n  }\n\n  private goBack() {\n    if (this.search) {\n      return\n    }\n\n    if (this.parent) {\n      const parentCommand = this.commands.find(command => command.id === this.parent)\n      this.setParent(parentCommand?.parent)\n    }\n  }\n\n  private setParent(parent?: string) {\n    this.parent = parent\n    this.setSearch(\"\")\n  }\n\n  private setSearch(str: string) {\n    this.search = str\n    this.selectedIndex = 0\n  }\n\n  private filterCommands() {\n    const searchTerms = this.search.toLocaleLowerCase().split(/\\s+/)\n\n    this.filteredCommands = this.commands.filter(({ title, keywords = \"\", parent }) => {\n      const searchSpace = `${title} ${keywords}`.toLocaleLowerCase()\n      const matcher = searchTerms.every(term => searchSpace.includes(term))\n\n      if (!this.parent && this.search) {\n        // global search for items on root\n        return matcher\n      }\n\n      return parent === this.parent && matcher\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-command-menu\": CommandMenu\n  }\n}\n"],"names":["title","getFocusedElement","root","activeElement","shadowRoot","undefined","Icon","registerIcon","navigateIcon","enterIcon","backspaceIcon","CommandMenu","LitElement","constructor","this","createRef","LocalizeController","LightDismissController","isOpen","open","onDismiss","close","KeyboardController","trigger","select","goBack","end","start","next","previous","toggleOpen","selected","filteredCommands","selectedIndex","show","options","dispatchEvent","NordEvent","cancelable","setParent","parent","previousFocus","focus","inputRef","value","willUpdate","changedProperties","has","keyboardController","registerCommandShortcuts","bump","filterCommands","updated","document","listRef","scrollTop","render","sections","groupBy","activeDescendant","length","id","html","classMap","handleAnimationEnd","localize","term","handleInput","handleBlur","ref","placeholder","search","ifDefined","renderNoResults","Array","from","section","commands","renderSection","navigateIcon.title","backspaceIcon.title","sectionId","nothing","repeat","command","event","input","target","setSearch","some","item","handler","SelectEvent","wrap","parentCommand","find","str","searchTerms","toLocaleLowerCase","split","filter","keywords","searchSpace","matcher","every","includes","componentStyle","style","__decorate","property","type","Boolean","String","attribute","state","customElement"],"mappings":"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"}
+{"version":3,"file":"CommandMenu.js","sources":["../../icons/lib/assets/keyboard-arrow-up-down.js","../../icons/lib/assets/keyboard-return.js","../../icons/lib/assets/keyboard-backspace.js","../src/common/focus.ts","../src/command-menu/CommandMenu.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M105.833 24v93m0-93L80 49.833M105.833 24l25.834 25.833M34.167 117V24m0 93L60 91.167M34.167 117 8.333 91.167\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"14\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"keyboard-arrow-up-down\"\nexport const tags = \"nordicon keyboard keys arrow up down shortcut\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"14\"><path d=\"M35 133 7 105l28-28\"/><path d=\"M7 105h112a14 14 0 0 0 14-14V21a14 14 0 0 0-14-14H77\"/></g></svg>'\nexport const title = \"keyboard-return\"\nexport const tags = \"nordicon keyboard return key shortcut\"\n","export default '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M6.707 4.879A3 3 0 0 1 8.828 4H15a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H8.828a3 3 0 0 1-2.12-.879l-4.415-4.414a1 1 0 0 1 0-1.414l4.414-4.414zm4 2.414a1 1 0 0 0-1.414 1.414L10.586 10l-1.293 1.293a1 1 0 1 0 1.414 1.414L12 11.414l1.293 1.293a1 1 0 0 0 1.414-1.414L13.414 10l1.293-1.293a1 1 0 0 0-1.414-1.414L12 8.586l-1.293-1.293z\" clip-rule=\"evenodd\"/></svg>'\nexport const title = \"keyboard-backspace\"\nexport const tags = \"nordicon keyboard backspace back delete key shortcut\"\n","/**\n * Gets the currently focused element, taking shadow roots into account.\n */\nexport function getFocusedElement(root: Document | ShadowRoot): Element | undefined {\n  if (root.activeElement?.shadowRoot) {\n    return getFocusedElement(root.activeElement.shadowRoot)\n  }\n\n  return root.activeElement || undefined\n}\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { repeat } from \"lit/directives/repeat.js\"\nimport { createRef, ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\n\nimport * as navigateIcon from \"@nordhealth/icons/lib/assets/keyboard-arrow-up-down.js\"\nimport * as enterIcon from \"@nordhealth/icons/lib/assets/keyboard-return.js\"\nimport * as backspaceIcon from \"@nordhealth/icons/lib/assets/keyboard-backspace.js\"\n\nimport { groupBy } from \"../common/collection.js\"\nimport { wrap } from \"../common/number.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { getFocusedElement } from \"../common/focus.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { KeyboardController } from \"./KeyboardController.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"./CommandMenuAction.js\"\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\nimport { SelectEvent } from \"./SelectEvent.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./CommandMenu.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nIcon.registerIcon(navigateIcon)\nIcon.registerIcon(enterIcon)\nIcon.registerIcon(backspaceIcon)\n\n/**\n * Command Menu allows users to navigate and use an app without\n * touching the mouse and helps them transform into “power users”\n * who can harness more advanced features far faster.\n *\n * @status ready\n * @category action\n * @slot footer - Used to replace the default footer contents.\n * @fires open - The command menu was opened.\n * @fires close - The command menu was closed.\n * @fires {SelectEvent} nord-select - User selected a command from the menu.\n */\n@customElement(\"nord-command-menu\")\nexport default class CommandMenu extends LitElement {\n  static styles = [componentStyle, style]\n\n  private inputRef = createRef<HTMLInputElement>()\n  private listRef = createRef<HTMLElement>()\n  private previousFocus?: HTMLElement\n\n  private localize = new LocalizeController<\"nord-command-menu\">(this)\n  private dismissController = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.close(),\n  })\n\n  private keyboardController = new KeyboardController(this, {\n    trigger: () => this.select(),\n    goBack: () => this.goBack(),\n    end: () => this.end(),\n    start: () => this.start(),\n    next: () => this.next(),\n    previous: () => this.previous(),\n    toggleOpen: () => this.toggleOpen(),\n  })\n\n  /**\n   * Show or hide the command menu.\n   */\n  @property({ type: Boolean }) open = false\n\n  /**\n   * Hint text to display in the Command Menu search field.\n   */\n  @property({ type: String }) placeholder = \"Type a command or search...\"\n\n  /**\n   * Array of commands to be included in the menu.\n   * Please see “Commands data” section for more documentation.\n   */\n  @property({ type: Array, attribute: false }) commands: Array<ICommandMenuAction> = []\n\n  @state() private parent?: string\n  @state() private search: string = \"\"\n  @state() private bump = true\n  @state() private selectedIndex = 0\n  @state() private filteredCommands: Array<ICommandMenuAction> = []\n\n  private get selected(): ICommandMenuAction {\n    return this.filteredCommands[this.selectedIndex]\n  }\n\n  /**\n   * Show the command menu programmatically.\n   * @param options allows you to open the menu filtered to a specific parent command.\n   */\n  show(options: { parent?: string } = {}) {\n    const notCancelled = this.dispatchEvent(new NordEvent(\"open\", { cancelable: true }))\n\n    if (notCancelled) {\n      this.open = true\n      this.setParent(options.parent)\n    }\n  }\n\n  /**\n   * Close the command menu programmatically.\n   */\n  close() {\n    this.open = false\n    this.previousFocus?.focus()\n    this.previousFocus = undefined\n\n    this.dispatchEvent(new NordEvent(\"close\"))\n  }\n\n  /**\n   * Toggle the open state programmatically.\n   */\n  toggleOpen() {\n    if (this.open) {\n      this.close()\n    } else {\n      this.show()\n    }\n  }\n\n  /**\n   * Focus the command menu's input.\n   */\n  focus() {\n    this.inputRef.value?.focus()\n  }\n\n  override render() {\n    const sections = groupBy(this.filteredCommands, \"section\")\n    const activeDescendant = this.filteredCommands.length === 0 ? \"no-results\" : this.selected?.id\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-visible\": this.open,\n          \"n-modal\": true,\n        })}\n      >\n        <div\n          @animationend=${this.handleAnimationEnd}\n          class=${classMap({\n            \"n-bump\": this.bump,\n            \"n-modal-content\": true,\n          })}\n        >\n          <div class=\"n-search-wrapper\">\n            <nord-visually-hidden id=\"instructions\"> ${this.localize.term(\"instructions\")} </nord-visually-hidden>\n            <input\n              type=\"text\"\n              id=\"search\"\n              @input=${this.handleInput}\n              @blur=${this.handleBlur}\n              ${ref(this.inputRef)}\n              placeholder=${this.placeholder}\n              .value=${this.search}\n              spellcheck=\"false\"\n              autocomplete=\"off\"\n              autocapitalize=\"off\"\n              aria-label=${this.localize.term(\"inputLabel\")}\n              aria-autocomplete=\"list\"\n              aria-haspopup=\"listbox\"\n              role=\"combobox\"\n              aria-controls=\"list\"\n              aria-expanded=\"true\"\n              aria-activedescendant=${ifDefined(activeDescendant)}\n              aria-describedby=\"instructions\"\n            />\n          </div>\n\n          <div class=\"n-modal-body\">\n            <div id=\"list\" ${ref(this.listRef)} role=\"listbox\">\n              ${this.filteredCommands.length === 0\n                ? this.renderNoResults()\n                : Array.from(sections, ([section, commands]) => this.renderSection(section, commands))}\n            </div>\n          </div>\n          <slot name=\"footer\">\n            <div class=\"n-modal-footer\">\n              <span class=\"n-help\">\n                <nord-icon label=\"Arrow keys\" name=${navigateIcon.title}></nord-icon>\n                ${this.localize.term(\"footerArrowKeys\")}\n              </span>\n              <span class=\"n-help\">\n                <nord-icon label=\"Enter key\" name=${enterIcon.title}></nord-icon>\n                ${this.localize.term(\"footerEnterKey\")}\n              </span>\n              <span class=\"n-help\">${this.localize.term(\"footerEscapeKey\")}</span>\n              <span class=\"n-help n-backspace\">\n                <nord-icon label=\"Backspace key\" name=${backspaceIcon.title}></nord-icon>\n                ${this.localize.term(\"footerBackspaceKey\")}\n              </span>\n            </div>\n          </slot>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNoResults() {\n    return html`\n      <div id=\"no-results\" class=\"n-command-empty\" role=\"option\" aria-selected=\"true\">\n        <div class=\"n-title\">${this.localize.term(\"noResults\", this.search)}</div>\n        <div class=\"n-tip\">${this.localize.term(\"tip\")}</div>\n      </div>\n    `\n  }\n\n  private renderSection(section: string | undefined, commands: ICommandMenuAction[]) {\n    const sectionId = `section-${section}`\n\n    // TODO: test on latest safari, since it seems to have issues with grouped options\n    return html`\n      <div role=\"group\" aria-labelledby=${cond(section, sectionId)}>\n        ${section ? html`<div class=\"n-group-header\" role=\"presentation\" id=${sectionId}>${section}</div>` : nothing}\n        ${repeat(\n          commands,\n          command => command.id,\n          command => html`\n            <nord-command-menu-action\n              id=${command.id}\n              .command=${command}\n              ?selected=${command.id === this.selected?.id}\n              @click=${() => this.select(command)}\n              role=\"option\"\n              aria-selected=${ifDefined(command.id === this.selected?.id || undefined)}\n            ></nord-command-menu-action>\n          `\n        )}\n      </div>\n    `\n  }\n\n  @observe(\"commands\")\n  protected handleCommandsChange() {\n    this.keyboardController.registerCommandShortcuts()\n  }\n\n  @observe(\"open\")\n  protected handleBump() {\n    if (this.open) {\n      this.bump = true\n    }\n  }\n\n  @observe(\"open\", \"updated\")\n  protected focusOnOpen() {\n    if (this.open) {\n      this.previousFocus = getFocusedElement(document) as HTMLElement\n      this.focus()\n\n      if (this.listRef.value) {\n        this.listRef.value.scrollTop = 0\n      }\n    }\n  }\n\n  private handleAnimationEnd() {\n    this.bump = false\n  }\n\n  private handleBlur() {\n    if (this.open) {\n      this.focus()\n    }\n  }\n\n  private handleInput(event: KeyboardEvent) {\n    const input = event.target as HTMLInputElement\n    this.setSearch(input.value)\n  }\n\n  private select(command: ICommandMenuAction = this.selected) {\n    const isParent = this.commands.some(item => item.parent === command.id)\n\n    if (isParent) {\n      this.setParent(command.id)\n      this.bump = true\n      this.focus()\n    } else {\n      this.close()\n    }\n\n    this.setSearch(\"\")\n    command.handler?.(this)\n\n    // this is separated into two parts because of a bug in Custom Elements Analyzer, where it gets the event name wrong.\n    // TODO: cleanup when bug is fixed.\n    const event = new SelectEvent(command)\n    this.dispatchEvent(event)\n  }\n\n  private start() {\n    this.selectedIndex = 0\n  }\n\n  private end() {\n    this.selectedIndex = this.filteredCommands.length - 1\n  }\n\n  private next() {\n    this.selectedIndex = wrap(this.selectedIndex + 1, 0, this.filteredCommands.length - 1)\n  }\n\n  private previous() {\n    this.selectedIndex = wrap(this.selectedIndex - 1, 0, this.filteredCommands.length - 1)\n  }\n\n  private goBack() {\n    if (this.search) {\n      return\n    }\n\n    if (this.parent) {\n      const parentCommand = this.commands.find(command => command.id === this.parent)\n      this.setParent(parentCommand?.parent)\n    }\n  }\n\n  private setParent(parent?: string) {\n    this.parent = parent\n    this.setSearch(\"\")\n  }\n\n  private setSearch(str: string) {\n    this.search = str\n    this.selectedIndex = 0\n  }\n\n  @observe(\"search\")\n  @observe(\"parent\")\n  @observe(\"commands\")\n  private filterCommands() {\n    const searchTerms = this.search.toLocaleLowerCase().split(/\\s+/)\n\n    this.filteredCommands = this.commands.filter(({ title, keywords = \"\", parent }) => {\n      const searchSpace = `${title} ${keywords}`.toLocaleLowerCase()\n      const matcher = searchTerms.every(term => searchSpace.includes(term))\n\n      if (!this.parent && this.search) {\n        // global search for items on root\n        return matcher\n      }\n\n      return parent === this.parent && matcher\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-command-menu\": CommandMenu\n  }\n}\n"],"names":["title","getFocusedElement","root","activeElement","_a","shadowRoot","undefined","Icon","registerIcon","navigateIcon","enterIcon","backspaceIcon","CommandMenu","LitElement","constructor","this","inputRef","createRef","listRef","localize","LocalizeController","dismissController","LightDismissController","isOpen","open","onDismiss","close","keyboardController","KeyboardController","trigger","select","goBack","end","start","next","previous","toggleOpen","placeholder","commands","search","bump","selectedIndex","filteredCommands","selected","show","options","dispatchEvent","NordEvent","cancelable","setParent","parent","previousFocus","focus","value","render","sections","groupBy","activeDescendant","length","id","html","classMap","handleAnimationEnd","term","handleInput","handleBlur","ref","ifDefined","renderNoResults","Array","from","section","renderSection","navigateIcon.title","backspaceIcon.title","sectionId","cond","nothing","repeat","command","_b","handleCommandsChange","registerCommandShortcuts","handleBump","focusOnOpen","document","scrollTop","event","input","target","setSearch","some","item","handler","call","SelectEvent","wrap","parentCommand","find","str","filterCommands","searchTerms","toLocaleLowerCase","split","filter","keywords","searchSpace","matcher","every","includes","styles","componentStyle","style","__decorate","property","type","Boolean","prototype","String","attribute","state","observe","customElement"],"mappings":"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"}

package/lib/CommandMenuAction.js

@@ -1,2 +1,2 @@
-import{_ as e,n as o}from"./query-assigned-elements-37b095c4.js";import{r,s as n,$ as t,w as i}from"./lit-element-74b6bb4b.js";import{e as s}from"./property-03f59dce.js";import{o as a}from"./class-map-87423405.js";import{D as c}from"./DirectionController-b267af23.js";import l from"./Icon.js";import"./VisuallyHidden.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./if-defined-fe657a02.js";import"./unsafe-html-989a642b.js";import"./Component-9d373ef3.js";var d=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="m38.5 7 60.9 58.044a7 7 0 0 1 0 9.912L38.5 133" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"/></svg>',title:"arrow-right",tags:"nordicon arrow right caret pointing triangle chevron"});var m=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M101.5 133 40.6 74.956a7 7 0 0 1 0-9.912L101.5 7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"/></svg>',title:"arrow-left",tags:"nordicon arrow left caret pointing triangle chevron"});var p=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(14,0,0,14,0,0)"><path d="M0.5 3L3 3 6.5 7 9.5 7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.5 3L9.5 3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>',title:"keyboard-option",tags:"nordicon keyboard option key shortcut"});const h=r`:host{display:flex}.n-command{display:flex;flex:1;border-inline-start:2px solid transparent;align-items:center;color:var(--n-color-text);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-command.n-selected,.n-command:hover{cursor:pointer;background-color:var(--n-color-active)}.n-command.n-selected{border-inline-start-color:var(--n-color-accent)}nord-icon{color:var(--n-color-icon)}.n-command-icon{margin-inline-start:2px;margin-inline-end:calc(var(--n-space-s) * 1.4);line-height:var(--n-line-height-tight)}.n-selected .n-command-icon nord-icon{color:var(--n-color-icon-hover)}.n-title{flex:1;margin-inline-end:calc(var(--n-space-s)/ 2);font-size:var(--n-font-size-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-shortcuts{display:flex;gap:calc(var(--n-space-s)/ 2)}.n-shortcut{padding:calc(var(--n-space-s)/ 4) calc(var(--n-space-s)/ 3);text-transform:capitalize;font-size:var(--n-font-size-xs);border:1px solid var(--n-color-border-strong);font-weight:var(--n-font-weight);box-shadow:var(--n-box-shadow);border-radius:var(--n-border-radius-s);color:var(--n-color-icon);background:var(--n-color-button);line-height:var(--n-line-height-tight);min-inline-size:var(--n-space-s);display:inline-flex;align-items:center;justify-content:center;user-select:none}`,v=/(?:Key|Digit)([A-Z0-9])/g;l.registerIcon(m),l.registerIcon(d),l.registerIcon(p);let u=class extends n{constructor(){super(...arguments),this.direction=new c(this),this.selected=!1}ensureInView(){requestAnimationFrame((()=>this.scrollIntoView({block:"nearest"})))}updated(e){e.has("selected")&&this.selected&&this.ensureInView()}render(){return t`<div class="${a({"n-selected":this.selected,"n-command":!0})}"><div aria-hidden="true" class="n-command-icon"><nord-icon size="s" name="${this.getIconName()}"></nord-icon></div><div class="n-title">${this.command.title}</div>${this.renderShortcut()}</div>`}getIconName(){return this.command.icon?this.command.icon:this.direction.isLTR?"arrow-right":"arrow-left"}renderShortcut(){if(!this.command.shortcut)return i;const e=this.command.shortcut.replace(v,"$1");return t`<nord-visually-hidden>, ${e}</nord-visually-hidden><div aria-hidden="true" class="n-shortcuts">${e.split("+").map((e=>t`<div class="n-shortcut">${"alt"===e.toLowerCase()&&navigator.platform.indexOf("Mac")>-1?t`<nord-icon name="${"keyboard-option"}" size="s"></nord-icon>`:e}</div>`))}</div>`}};u.styles=h,e([s({type:Object})],u.prototype,"command",void 0),e([s({type:Boolean})],u.prototype,"selected",void 0),u=e([o("nord-command-menu-action")],u);var g=u;export{g as default};
+import{_ as e,n as o}from"./query-assigned-elements-ef860822.js";import{r,s as n,$ as t,w as i}from"./lit-element-e382250e.js";import{e as s}from"./property-03f59dce.js";import{o as a}from"./class-map-9e39244c.js";import{D as c}from"./DirectionController-8b298382.js";import{o as l}from"./observe-a9c6dfb6.js";import d from"./Icon.js";import"./VisuallyHidden.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./if-defined-4d1db15c.js";import"./unsafe-html-76575c49.js";import"./cond-ed8742b5.js";import"./Component-fa316972.js";var m=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="m38.5 7 60.9 58.044a7 7 0 0 1 0 9.912L38.5 133" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"/></svg>',title:"arrow-right",tags:"nordicon arrow right caret pointing triangle chevron"});var p=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M101.5 133 40.6 74.956a7 7 0 0 1 0-9.912L101.5 7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"/></svg>',title:"arrow-left",tags:"nordicon arrow left caret pointing triangle chevron"});var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(14,0,0,14,0,0)"><path d="M0.5 3L3 3 6.5 7 9.5 7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.5 3L9.5 3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>',title:"keyboard-option",tags:"nordicon keyboard option key shortcut"});const h=r`:host{display:flex}.n-command{display:flex;flex:1;border-inline-start:2px solid transparent;align-items:center;color:var(--n-color-text);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-command.n-selected,.n-command:hover{cursor:pointer;background-color:var(--n-color-active)}.n-command.n-selected{border-inline-start-color:var(--n-color-accent)}nord-icon{color:var(--n-color-icon)}.n-command-icon{margin-inline-start:2px;margin-inline-end:calc(var(--n-space-s) * 1.4);line-height:var(--n-line-height-tight)}.n-selected .n-command-icon nord-icon{color:var(--n-color-icon-hover)}.n-title{flex:1;margin-inline-end:calc(var(--n-space-s)/ 2);font-size:var(--n-font-size-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-shortcuts{display:flex;gap:calc(var(--n-space-s)/ 2)}.n-shortcut{padding:calc(var(--n-space-s)/ 4) calc(var(--n-space-s)/ 3);text-transform:capitalize;font-size:var(--n-font-size-xs);border:1px solid var(--n-color-border-strong);font-weight:var(--n-font-weight);box-shadow:var(--n-box-shadow);border-radius:var(--n-border-radius-s);color:var(--n-color-icon);background:var(--n-color-button);line-height:var(--n-line-height-tight);min-inline-size:var(--n-space-s);display:inline-flex;align-items:center;justify-content:center;user-select:none}`,u=/(?:Key|Digit)([A-Z0-9])/g;d.registerIcon(p),d.registerIcon(m),d.registerIcon(v);let g=class extends n{constructor(){super(...arguments),this.direction=new c(this),this.selected=!1}render(){return t`<div class="${a({"n-selected":this.selected,"n-command":!0})}"><div aria-hidden="true" class="n-command-icon"><nord-icon size="s" name="${this.getIconName()}"></nord-icon></div><div class="n-title">${this.command.title}</div>${this.renderShortcut()}</div>`}ensureInView(){this.selected&&requestAnimationFrame((()=>this.scrollIntoView({block:"nearest"})))}getIconName(){return this.command.icon?this.command.icon:this.direction.isLTR?"arrow-right":"arrow-left"}renderShortcut(){if(!this.command.shortcut)return i;const e=this.command.shortcut.replace(u,"$1");return t`<nord-visually-hidden>, ${e}</nord-visually-hidden><div aria-hidden="true" class="n-shortcuts">${e.split("+").map((e=>t`<div class="n-shortcut">${"alt"===e.toLowerCase()&&navigator.platform.indexOf("Mac")>-1?t`<nord-icon name="${"keyboard-option"}" size="s"></nord-icon>`:e}</div>`))}</div>`}};g.styles=h,e([s({type:Object})],g.prototype,"command",void 0),e([s({type:Boolean})],g.prototype,"selected",void 0),e([l("selected")],g.prototype,"ensureInView",null),g=e([o("nord-command-menu-action")],g);var f=g;export{f as default};
 //# sourceMappingURL=CommandMenuAction.js.map

package/lib/CommandMenuAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandMenuAction.js","sources":["../../icons/lib/assets/arrow-right.js","../../icons/lib/assets/arrow-left.js","../../icons/lib/assets/keyboard-option.js","../src/command-menu/CommandMenuAction.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m38.5 7 60.9 58.044a7 7 0 0 1 0 9.912L38.5 133\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"14\"/></svg>'\nexport const title = \"arrow-right\"\nexport const tags = \"nordicon arrow right caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M101.5 133 40.6 74.956a7 7 0 0 1 0-9.912L101.5 7\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"14\"/></svg>'\nexport const title = \"arrow-left\"\nexport const tags = \"nordicon arrow left caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><g transform=\"matrix(14,0,0,14,0,0)\"><path d=\"M0.5 3L3 3 6.5 7 9.5 7\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M6.5 3L9.5 3\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></g></svg>'\nexport const title = \"keyboard-option\"\nexport const tags = \"nordicon keyboard option key shortcut\"\n","import { LitElement, html, nothing, PropertyValues } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as chevronIconRight from \"@nordhealth/icons/lib/assets/arrow-right.js\"\nimport * as chevronIconLeft from \"@nordhealth/icons/lib/assets/arrow-left.js\"\nimport * as altKeyIcon from \"@nordhealth/icons/lib/assets/keyboard-option.js\"\n\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport style from \"./CommandMenuAction.css\"\n\nconst KEY_REGEX = /(?:Key|Digit)([A-Z0-9])/g\nconst isMacintosh = () => navigator.platform.indexOf(\"Mac\") > -1\n\nIcon.registerIcon(chevronIconLeft)\nIcon.registerIcon(chevronIconRight)\nIcon.registerIcon(altKeyIcon)\n\n/**\n * Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.\n *\n * @status internal\n */\n@customElement(\"nord-command-menu-action\")\nexport default class CommandMenuAction extends LitElement {\n  static styles = style\n\n  private direction = new DirectionController(this)\n\n  @property({ type: Object }) command!: ICommandMenuAction\n\n  @property({ type: Boolean }) selected = false\n\n  /**\n   * Scroll to show element\n   */\n  private ensureInView() {\n    requestAnimationFrame(() => this.scrollIntoView({ block: \"nearest\" }))\n  }\n\n  override updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has(\"selected\") && this.selected) {\n      this.ensureInView()\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          \"n-selected\": this.selected,\n          \"n-command\": true,\n        })}\n      >\n        <div aria-hidden=\"true\" class=\"n-command-icon\">\n          <nord-icon size=\"s\" name=${this.getIconName()}></nord-icon>\n        </div>\n        <div class=\"n-title\">${this.command.title}</div>\n        ${this.renderShortcut()}\n      </div>\n    `\n  }\n\n  private getIconName() {\n    if (this.command.icon) {\n      return this.command.icon\n    }\n\n    return this.direction.isLTR ? chevronIconRight.title : chevronIconLeft.title\n  }\n\n  private renderShortcut() {\n    if (!this.command.shortcut) {\n      return nothing\n    }\n\n    const keys = this.command.shortcut.replace(KEY_REGEX, \"$1\")\n\n    return html`\n      <nord-visually-hidden>, ${keys}</nord-visually-hidden>\n\n      <div aria-hidden=\"true\" class=\"n-shortcuts\">\n        ${keys\n          .split(\"+\")\n          .map(\n            key =>\n              html`<div class=\"n-shortcut\">\n                ${key.toLowerCase() === \"alt\" && isMacintosh()\n                  ? html`<nord-icon name=${altKeyIcon.title} size=\"s\"></nord-icon>`\n                  : key}\n              </div>`\n          )}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-command-menu-action\": CommandMenuAction\n  }\n}\n"],"names":["KEY_REGEX","Icon","registerIcon","chevronIconLeft","chevronIconRight","altKeyIcon","CommandMenuAction","LitElement","constructor","this","DirectionController","ensureInView","requestAnimationFrame","scrollIntoView","block","updated","changedProperties","has","selected","render","html","classMap","getIconName","command","title","renderShortcut","icon","direction","isLTR","shortcut","nothing","keys","replace","split","map","key","toLowerCase","navigator","platform","indexOf","style","__decorate","property","type","Object","Boolean","customElement"],"mappings":"4gBAAe,0OACM,mBACD,qGCFL,4OACM,kBACD,oGCFL,8VACM,uBACD,s2CCYdA,EAAY,2BAGlBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAQlB,IAAqBC,EAArB,cAA+CC,EAA/CC,kCAGUC,eAAY,IAAIC,EAAoBD,MAIfA,eAAW,EAKhCE,eACNC,uBAAsB,IAAMH,KAAKI,eAAe,CAAEC,MAAO,cAGlDC,QAAQC,GACXA,EAAkBC,IAAI,aAAeR,KAAKS,UAC5CT,KAAKE,eAIAQ,SACP,OAAOC,CAAI,eAECC,EAAS,CACf,aAAcZ,KAAKS,SACnB,aAAa,iFAIcT,KAAKa,yDAEXb,KAAKc,QAAQC,cAClCf,KAAKgB,yBAKLH,cACN,OAAIb,KAAKc,QAAQG,KACRjB,KAAKc,QAAQG,KAGfjB,KAAKkB,UAAUC,MHtEL,cCAA,aEyEXH,iBACN,IAAKhB,KAAKc,QAAQM,SAChB,OAAOC,EAGT,MAAMC,EAAOtB,KAAKc,QAAQM,SAASG,QAAQhC,EAAW,MAEtD,OAAOoB,CAAI,2BACiBW,uEAGtBA,EACCE,MAAM,KACNC,KACCC,GACEf,CAAI,2BACsB,QAAtBe,EAAIC,eA3EIC,UAAUC,SAASC,QAAQ,QAAU,EA4E3CnB,CAAI,oBD1FH,2CC2FDe,sBAhEX7B,SAASkC,EAIYC,GAA3BC,EAAS,CAAEC,KAAMC,wCAEWH,GAA5BC,EAAS,CAAEC,KAAME,0CAPCvC,KADpBwC,EAAc,6BACMxC,SAAAA"}
+{"version":3,"file":"CommandMenuAction.js","sources":["../../icons/lib/assets/arrow-right.js","../../icons/lib/assets/arrow-left.js","../../icons/lib/assets/keyboard-option.js","../src/command-menu/CommandMenuAction.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m38.5 7 60.9 58.044a7 7 0 0 1 0 9.912L38.5 133\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"14\"/></svg>'\nexport const title = \"arrow-right\"\nexport const tags = \"nordicon arrow right caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M101.5 133 40.6 74.956a7 7 0 0 1 0-9.912L101.5 7\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"14\"/></svg>'\nexport const title = \"arrow-left\"\nexport const tags = \"nordicon arrow left caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><g transform=\"matrix(14,0,0,14,0,0)\"><path d=\"M0.5 3L3 3 6.5 7 9.5 7\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M6.5 3L9.5 3\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></g></svg>'\nexport const title = \"keyboard-option\"\nexport const tags = \"nordicon keyboard option key shortcut\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as chevronIconRight from \"@nordhealth/icons/lib/assets/arrow-right.js\"\nimport * as chevronIconLeft from \"@nordhealth/icons/lib/assets/arrow-left.js\"\nimport * as altKeyIcon from \"@nordhealth/icons/lib/assets/keyboard-option.js\"\n\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport style from \"./CommandMenuAction.css\"\n\nconst KEY_REGEX = /(?:Key|Digit)([A-Z0-9])/g\nconst isMacintosh = () => navigator.platform.indexOf(\"Mac\") > -1\n\nIcon.registerIcon(chevronIconLeft)\nIcon.registerIcon(chevronIconRight)\nIcon.registerIcon(altKeyIcon)\n\n/**\n * Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.\n *\n * @status internal\n */\n@customElement(\"nord-command-menu-action\")\nexport default class CommandMenuAction extends LitElement {\n  static styles = style\n\n  private direction = new DirectionController(this)\n\n  @property({ type: Object }) command!: ICommandMenuAction\n\n  @property({ type: Boolean }) selected = false\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          \"n-selected\": this.selected,\n          \"n-command\": true,\n        })}\n      >\n        <div aria-hidden=\"true\" class=\"n-command-icon\">\n          <nord-icon size=\"s\" name=${this.getIconName()}></nord-icon>\n        </div>\n        <div class=\"n-title\">${this.command.title}</div>\n        ${this.renderShortcut()}\n      </div>\n    `\n  }\n\n  /**\n   * Scroll to show element\n   */\n  @observe(\"selected\")\n  protected ensureInView() {\n    if (this.selected) {\n      requestAnimationFrame(() => this.scrollIntoView({ block: \"nearest\" }))\n    }\n  }\n\n  private getIconName() {\n    if (this.command.icon) {\n      return this.command.icon\n    }\n\n    return this.direction.isLTR ? chevronIconRight.title : chevronIconLeft.title\n  }\n\n  private renderShortcut() {\n    if (!this.command.shortcut) {\n      return nothing\n    }\n\n    const keys = this.command.shortcut.replace(KEY_REGEX, \"$1\")\n\n    return html`\n      <nord-visually-hidden>, ${keys}</nord-visually-hidden>\n\n      <div aria-hidden=\"true\" class=\"n-shortcuts\">\n        ${keys\n          .split(\"+\")\n          .map(\n            key =>\n              html`<div class=\"n-shortcut\">\n                ${key.toLowerCase() === \"alt\" && isMacintosh()\n                  ? html`<nord-icon name=${altKeyIcon.title} size=\"s\"></nord-icon>`\n                  : key}\n              </div>`\n          )}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-command-menu-action\": CommandMenuAction\n  }\n}\n"],"names":["KEY_REGEX","Icon","registerIcon","chevronIconLeft","chevronIconRight","altKeyIcon","CommandMenuAction","LitElement","constructor","this","direction","DirectionController","selected","render","html","classMap","getIconName","command","title","renderShortcut","ensureInView","requestAnimationFrame","scrollIntoView","block","icon","isLTR","shortcut","nothing","keys","replace","split","map","key","toLowerCase","navigator","platform","indexOf","styles","style","__decorate","property","type","Object","prototype","Boolean","observe","customElement"],"mappings":"ilBAAe,0OACM,mBACD,qGCFL,4OACM,kBACD,oGCFL,8VACM,uBACD,s2CCadA,EAAY,2BAGlBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAQlB,IAAqBC,EAArB,cAA+CC,EAA/CC,kCAGUC,KAAAC,UAAY,IAAIC,EAAoBF,MAIfA,KAAQG,UAAG,EAE/BC,SACP,OAAOC,CAAI,eAECC,EAAS,CACf,aAAcN,KAAKG,SACnB,aAAa,iFAIcH,KAAKO,yDAEXP,KAAKQ,QAAQC,cAClCT,KAAKU,yBASHC,eACJX,KAAKG,UACPS,uBAAsB,IAAMZ,KAAKa,eAAe,CAAEC,MAAO,cAIrDP,cACN,OAAIP,KAAKQ,QAAQO,KACRf,KAAKQ,QAAQO,KAGff,KAAKC,UAAUe,MHpEL,cCAA,aEuEXN,iBACN,IAAKV,KAAKQ,QAAQS,SAChB,OAAOC,EAGT,MAAMC,EAAOnB,KAAKQ,QAAQS,SAASG,QAAQ7B,EAAW,MAEtD,OAAOc,CAAI,2BACiBc,uEAGtBA,EACCE,MAAM,KACNC,KACCC,GACElB,CAAI,2BACsB,QAAtBkB,EAAIC,eAxEIC,UAAUC,SAASC,QAAQ,QAAU,EAyE3CtB,CAAI,oBDxFH,2CCyFDkB,sBA7DX1B,EAAM+B,OAAGC,EAIYC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAAsCpC,EAAAqC,UAAA,eAAA,GAE3BJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,WAA2BtC,EAAAqC,UAAA,gBAAA,GAuB7CJ,EAAA,CADCM,EAAQ,aAKRvC,EAAAqC,UAAA,eAAA,MAlCkBrC,EAAiBiC,EAAA,CADrCO,EAAc,6BACMxC,SAAAA"}

package/lib/{Component-9d373ef3.js → Component-fa316972.js}

@@ -1,2 +1,2 @@
-import{r as t}from"./lit-element-74b6bb4b.js";const e=t`:host{all:unset;display:block;font-family:var(--n-font-family);line-height:var(--n-line-height);font-feature-settings:var(--n-font-features);text-align:start}*,::after,::before{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}`;export{e as s};
-//# sourceMappingURL=Component-9d373ef3.js.map
+import{r as t}from"./lit-element-e382250e.js";const e=t`:host{all:unset;display:block;font-family:var(--n-font-family);line-height:var(--n-line-height);font-feature-settings:var(--n-font-features);text-align:start}*,::after,::before{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}`;export{e as s};
+//# sourceMappingURL=Component-fa316972.js.map

package/lib/Component-fa316972.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component-fa316972.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/DatePicker.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,$ as o,w as a,s as n}from"./lit-element-74b6bb4b.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as l}from"./query-2d22378e.js";import{o as d}from"./class-map-87423405.js";import{n as c}from"./ref-7d028e3a.js";import{l as p}from"./if-defined-fe657a02.js";import{F as h}from"./FocusableMixin-ebb67709.js";import{F as m}from"./FormAssociatedMixin-1f97ed66.js";import{I as u}from"./InputMixin-94d15730.js";import{m as b,p as v,a as g}from"./dates-9272b910.js";import{N as f}from"./events-731d0007.js";import{S as y,i as w}from"./Calendar-d1632bb6.js";import{L as x}from"./LightDismissController-a35d0f66.js";import{LocalizeController as k}from"./LocalizeController.js";import"./Button.js";import j from"./Icon.js";import"./VisuallyHidden.js";import{s as z}from"./Component-9d373ef3.js";import{s as $}from"./FormField-50bd73d5.js";import{s as D}from"./TextField-9bee8388.js";import{isoAdapter as L}from"./date-adapter.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-683d0e7c.js";import"./number-3a8ef88a.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-b267af23.js";import"./month-view.js";import"./collection-800f5002.js";import"./DateSelectEvent.js";import"./ShortcutController-93173ff4.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./LightDomController-011334da.js";import"./unsafe-html-989a642b.js";var F=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126v112H7zM35 7v28m70-28v28M7 63h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});var C=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z"/></svg>',title:"interface-close-small",tags:"nordicon interface close remove small cross delete erase symbol"});const A=i`:host{--n-date-picker-color-overlay:rgba(0, 0, 0, 0.8);--n-date-picker-line-height:1.25;--n-date-picker-toggle-height:34px;color:var(--n-color-text);font-size:var(--n-font-size-m);position:relative}.n-input-container{inline-size:fit-content}:host([expand]) .n-input-container{inline-size:100%}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--n-date-picker-toggle-height);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-accent);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input{padding-inline-end:calc(var(--n-space-s) * 1.6 + var(--n-date-picker-toggle-height))}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-dropdown)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-dropdown)}nord-calendar{box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform .4s ease,opacity .4s ease,visibility .4s ease;visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--n-calendar-padding:0}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0;z-index:10}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}`;j.registerIcon(F),j.registerIcon(C);const B=/[^0-9./-]+/g,E=()=>!1;let I=class extends(m(u(h(n)))){constructor(){super(...arguments),this.dismiss=new x(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new y(this,{target:()=>this.dialog,matchesGesture:w,onSwipeEnd:()=>this.hide(!1)}),this.localize=new k(this,{onLangChange:()=>this.createDateFormatters()}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.dateAdapter=L,this.isDateDisabled=E,this.handleDaySelect=e=>{e.stopPropagation(),this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new f("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new f("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,o=e.selectionStart,a=i.slice(0,o),n=i.slice(o,i.length),r=a.replace(t,""),s=r+n.replace(t,""),l=r.length;e.value=s,e.selectionStart=l,e.selectionEnd=l}(t,B),this.dispatchEvent(new f("input"));const i=this.dateAdapter.parse(t.value,b);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return v(this.value)}set valueAsDate(e){this.value=e?g(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?g(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new f("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new f("close")),e&&this.toggleButton.focus()}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"";return o`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${this.name}" .value="${t}" placeholder="${p(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${c(this.focusableRef)} aria-invalid="${p(this.error?"true":void 0)}" aria-describedby="${p(this.getDescribedBy())}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled}" type="button"><nord-icon name="interface-calendar" size="s"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${e?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(e)}</span>`:a}</nord-visually-hidden></button></div>${this.renderError()}<div class="${d({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localize.term("modalHeading")}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?g(e):"",this.dispatchEvent(new f("change"))}};I.styles=[z,$,D,A],e([l(".n-date-toggle",!0)],I.prototype,"toggleButton",void 0),e([l(".n-date-close",!0)],I.prototype,"closeButton",void 0),e([l("nord-calendar",!0)],I.prototype,"calendar",void 0),e([l('[role="dialog"]',!0)],I.prototype,"dialog",void 0),e([s()],I.prototype,"open",void 0),e([r()],I.prototype,"value",void 0),e([r()],I.prototype,"min",void 0),e([r()],I.prototype,"max",void 0),e([r()],I.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],I.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],I.prototype,"dateAdapter",void 0),e([r({attribute:!1})],I.prototype,"isDateDisabled",void 0),I=e([t("nord-date-picker")],I);var O=I;export{O as default};
+import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as i,$ as o,w as a,s as n}from"./lit-element-e382250e.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as l}from"./query-2d22378e.js";import{o as d}from"./class-map-9e39244c.js";import{n as c}from"./ref-adf41565.js";import{l as p}from"./if-defined-4d1db15c.js";import{F as m}from"./FocusableMixin-4c85ced9.js";import{F as h}from"./FormAssociatedMixin-9d38814c.js";import{I as u}from"./InputMixin-84ca72ae.js";import{m as v,p as g,a as b}from"./dates-56f73760.js";import{N as f}from"./events-731d0007.js";import{S as y,i as w}from"./Calendar-73a2fcfd.js";import{L as x}from"./LightDismissController-a2645ae6.js";import{LocalizeController as k}from"./LocalizeController.js";import"./Button.js";import j from"./Icon.js";import"./VisuallyHidden.js";import{s as z}from"./Component-fa316972.js";import{s as $}from"./FormField-44e865a4.js";import{s as D}from"./TextField-f8848f28.js";import{isoAdapter as L}from"./date-adapter.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./number-1c122a1e.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-8b298382.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./collection-800f5002.js";import"./cond-ed8742b5.js";import"./DateSelectEvent.js";import"./ShortcutController-87615e31.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./LightDomController-e0762f0d.js";import"./unsafe-html-76575c49.js";var F=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126v112H7zM35 7v28m70-28v28M7 63h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});var C=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z"/></svg>',title:"interface-close-small",tags:"nordicon interface close remove small cross delete erase symbol"});const A=i`:host{--n-date-picker-color-overlay:rgba(0, 0, 0, 0.8);--n-date-picker-line-height:1.25;--n-date-picker-toggle-height:34px;color:var(--n-color-text);font-size:var(--n-font-size-m);position:relative}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--n-date-picker-toggle-height);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-accent);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input{padding-inline-end:calc(var(--n-space-s) * 1.6 + var(--n-date-picker-toggle-height))}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-dropdown)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-dropdown)}nord-calendar{box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--n-calendar-padding:0}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0;z-index:10}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}`;j.registerIcon(F),j.registerIcon(C);const B=/[^0-9./-]+/g,E=()=>!1;let I=class extends(h(u(m(n)))){constructor(){super(...arguments),this.dismiss=new x(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new y(this,{target:()=>this.dialog,matchesGesture:w,onSwipeEnd:()=>this.hide(!1)}),this.localize=new k(this,{onLangChange:()=>this.createDateFormatters()}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.dateAdapter=L,this.isDateDisabled=E,this.handleDaySelect=e=>{e.stopPropagation(),this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new f("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new f("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,o=e.selectionStart,a=i.slice(0,o),n=i.slice(o,i.length),r=a.replace(t,""),s=r+n.replace(t,""),l=r.length;e.value=s,e.selectionStart=l,e.selectionEnd=l}(t,B),this.dispatchEvent(new f("input"));const i=this.dateAdapter.parse(t.value,v);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return g(this.value)}set valueAsDate(e){this.value=e?b(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?b(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new f("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new f("close")),e&&this.toggleButton.focus()}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"";return o`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${this.name}" .value="${t}" placeholder="${p(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${c(this.focusableRef)} aria-invalid="${p(this.error?"true":void 0)}" aria-describedby="${p(this.getDescribedBy())}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled}" type="button"><nord-icon name="interface-calendar" size="s"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${e?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(e)}</span>`:a}</nord-visually-hidden></button></div>${this.renderError()}<div class="${d({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localize.term("modalHeading")}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?b(e):"",this.dispatchEvent(new f("change"))}};I.styles=[z,$,D,A],e([l(".n-date-toggle",!0)],I.prototype,"toggleButton",void 0),e([l(".n-date-close",!0)],I.prototype,"closeButton",void 0),e([l("nord-calendar",!0)],I.prototype,"calendar",void 0),e([l('[role="dialog"]',!0)],I.prototype,"dialog",void 0),e([s()],I.prototype,"open",void 0),e([r()],I.prototype,"value",void 0),e([r()],I.prototype,"min",void 0),e([r()],I.prototype,"max",void 0),e([r()],I.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],I.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],I.prototype,"dateAdapter",void 0),e([r({attribute:!1})],I.prototype,"isDateDisabled",void 0),I=e([t("nord-date-picker")],I);var O=I;export{O as default};
 //# sourceMappingURL=DatePicker.js.map

package/lib/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../../icons/lib/assets/interface-close-small.js","../src/date-picker/DatePicker.ts","../src/common/input.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 21h126v112H7zM35 7v28m70-28v28M7 63h126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z\"/></svg>'\nexport const title = \"interface-close-small\"\nexport const tags = \"nordicon interface close remove small cross delete erase symbol\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport \"../button/Button.js\"\nimport type Button from \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport \"../calendar/Calendar.js\"\nimport { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DateDisabledPredicate } from \"../calendar/Calendar.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst DISALLOWED_CHARACTERS = /[^0-9./-]+/g\nconst isDateDisabled = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status ready\n * @category form\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(`.n-date-toggle`, true) private toggleButton!: Button\n  @query(`.n-date-close`, true) private closeButton!: HTMLButtonElement\n  @query(`nord-calendar`, true) private calendar!: Calendar\n  @query(`[role=\"dialog\"]`, true) private dialog!: HTMLElement\n\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this.calendar && node !== this.toggleButton,\n  })\n\n  private swipe = new SwipeController(this, {\n    target: () => this.dialog,\n    matchesGesture: isDownwardsSwipe,\n    onSwipeEnd: () => this.hide(false),\n  })\n\n  private localize = new LocalizeController<\"nord-date-picker\">(this, {\n    onLangChange: () => this.createDateFormatters(),\n  })\n\n  /**\n   * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n   * these are used to format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong!: Intl.DateTimeFormat\n\n  @state() private open = false\n\n  /**\n   * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = \"\"\n\n  get valueAsDate(): Date | undefined {\n    return parseISODate(this.value)\n  }\n\n  /**\n   * Get/set the value of the picker as a Date object.\n   */\n  set valueAsDate(date: Date | undefined) {\n    this.value = date ? printISODate(date) : \"\"\n  }\n\n  get valueAsNumber(): number {\n    return this.valueAsDate?.getTime() ?? NaN\n  }\n\n  /**\n   * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n   */\n  set valueAsNumber(date: number) {\n    this.value = date ? printISODate(new Date(date)) : \"\"\n  }\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @property() min: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @property() max: string = \"\"\n\n  /**\n   * Forces the opening direction of the calendar modal to be always left or right.\n   * This setting can be useful when the input is smaller than the opening date picker\n   * would be as by default the picker always opens towards right.\n   */\n  @property() direction: \"left\" | \"right\" = \"right\"\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @property({ attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   * Default is IS0-8601 parsing and formatting.\n   */\n  @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @property({ attribute: false }) isDateDisabled: DateDisabledPredicate = isDateDisabled\n\n  /**\n   * Show the calendar modal, moving focus to the calendar inside.\n   */\n  show() {\n    this.open = true\n    /**\n     * Dispatched when the calendar is toggled open.\n     */\n    this.dispatchEvent(new NordEvent(\"open\"))\n\n    // we should only focus once the calendar is visible after render is complete\n    this.updateComplete.then(() => this.calendar.focus({ target: \"month\" }))\n  }\n\n  /**\n   * Hide the calendar modal.\n   * @param {boolean} moveFocusToButton controls whether focus should be returned to the date picker's button.\n   */\n  hide(moveFocusToButton = true) {\n    this.open = false\n    /**\n     * Dispatched when the calendar is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.toggleButton.focus()\n    }\n  }\n\n  render() {\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <input\n          class=\"n-input\"\n          name=${this.name}\n          .value=${formattedDate}\n          placeholder=${ifDefined(this.placeholder)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-autocomplete=\"none\"\n          @input=${this.handleInputChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          autocomplete=\"off\"\n          ${ref(this.focusableRef)}\n          aria-invalid=${ifDefined(this.error ? \"true\" : undefined)}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n        />\n        <button class=\"n-date-toggle\" @click=${this.toggleOpen} ?disabled=${this.disabled} type=\"button\">\n          <nord-icon name=\"interface-calendar\" size=\"s\"></nord-icon>\n          <nord-visually-hidden>\n            ${this.localize.term(\"buttonLabel\")}\n            ${valueAsDate\n              ? html`\n                  <span>\n                    , ${this.localize.term(\"selectedDateMessage\")} ${this.dateFormatLong.format(valueAsDate)}\n                  </span>\n                `\n              : nothing}\n          </nord-visually-hidden>\n        </button>\n      </div>\n\n      ${this.renderError()}\n\n      <div\n        class=${classMap({\n          \"is-left\": this.direction === \"left\",\n          \"is-active\": this.open,\n        })}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n        aria-labelledby=\"dialog-header\"\n      >\n        <div class=\"n-date-dialog-content\">\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n          <div class=\"n-date-mobile\">\n            <div class=\"n-date-mobile-heading\" id=\"dialog-header\">${this.localize.term(\"modalHeading\")}</div>\n            <button class=\"n-date-close\" @click=${this.hide} type=\"button\">\n              <nord-icon color=\"var(--n-color-icon)\" name=\"interface-close-small\" size=\"xs\"></nord-icon>\n              <nord-visually-hidden>${this.localize.term(\"closeLabel\")}</nord-visually-hidden>\n            </button>\n          </div>\n          <nord-calendar\n            value=${this.value}\n            min=${this.min}\n            max=${this.max}\n            .firstDayOfWeek=${this.firstDayOfWeek}\n            .isDateDisabled=${this.isDateDisabled}\n            @change=${this.handleDaySelect}\n          ></nord-calendar>\n\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n        </div>\n      </div>\n    `\n  }\n\n  private createDateFormatters() {\n    this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n      day: \"numeric\",\n      month: \"long\",\n      year: \"numeric\",\n    })\n  }\n\n  private focusFirst() {\n    this.closeButton.focus()\n  }\n\n  private focusLast() {\n    this.calendar.focus({ target: \"day\" })\n  }\n\n  private handleDaySelect = (e: DateSelectEvent) => {\n    e.stopPropagation()\n    this.setValue(e.date)\n    this.hide()\n  }\n\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n\n    if (this.open) {\n      this.hide(false)\n    } else {\n      this.show()\n    }\n  }\n\n  private handleBlur = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"blur\"))\n  }\n\n  private handleFocus = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"focus\"))\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    cleanValue(target, DISALLOWED_CHARACTERS)\n    this.dispatchEvent(new NordEvent(\"input\"))\n\n    const parsed = this.dateAdapter.parse(target.value, createDate)\n    if (parsed || target.value === \"\") {\n      this.setValue(parsed)\n    }\n  }\n\n  private setValue(date?: Date) {\n    this.value = date ? printISODate(date) : \"\"\n    this.dispatchEvent(new NordEvent(\"change\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-date-picker\": DatePicker\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n  const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","DISALLOWED_CHARACTERS","isDateDisabled","DatePicker","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","calendar","toggleButton","SwipeController","target","dialog","matchesGesture","isDownwardsSwipe","onSwipeEnd","LocalizeController","onLangChange","createDateFormatters","isoAdapter","stopPropagation","setValue","date","preventDefault","show","event","dispatchEvent","NordEvent","inputEl","regex","value","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","parsed","dateAdapter","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","getTime","NaN","Date","updateComplete","then","focus","moveFocusToButton","render","formattedDate","format","html","renderLabel","name","ifDefined","placeholder","inputId","disabled","required","handleInputChange","handleFocus","handleBlur","ref","focusableRef","error","undefined","getDescribedBy","toggleOpen","localize","term","dateFormatLong","nothing","renderError","classMap","direction","focusLast","min","max","firstDayOfWeek","handleDaySelect","focusFirst","Intl","DateTimeFormat","resolvedLang","day","month","year","closeButton","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","state","property","attribute","Number","customElement"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../../icons/lib/assets/interface-close-small.js","../src/date-picker/DatePicker.ts","../src/common/input.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 21h126v112H7zM35 7v28m70-28v28M7 63h126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z\"/></svg>'\nexport const title = \"interface-close-small\"\nexport const tags = \"nordicon interface close remove small cross delete erase symbol\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport \"../button/Button.js\"\nimport type Button from \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport \"../calendar/Calendar.js\"\nimport { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DateDisabledPredicate } from \"../calendar/Calendar.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst DISALLOWED_CHARACTERS = /[^0-9./-]+/g\nconst isDateDisabled = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status ready\n * @category form\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(`.n-date-toggle`, true) private toggleButton!: Button\n  @query(`.n-date-close`, true) private closeButton!: HTMLButtonElement\n  @query(`nord-calendar`, true) private calendar!: Calendar\n  @query(`[role=\"dialog\"]`, true) private dialog!: HTMLElement\n\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this.calendar && node !== this.toggleButton,\n  })\n\n  private swipe = new SwipeController(this, {\n    target: () => this.dialog,\n    matchesGesture: isDownwardsSwipe,\n    onSwipeEnd: () => this.hide(false),\n  })\n\n  private localize = new LocalizeController<\"nord-date-picker\">(this, {\n    onLangChange: () => this.createDateFormatters(),\n  })\n\n  /**\n   * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n   * these are used to format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong!: Intl.DateTimeFormat\n\n  @state() private open = false\n\n  /**\n   * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = \"\"\n\n  get valueAsDate(): Date | undefined {\n    return parseISODate(this.value)\n  }\n\n  /**\n   * Get/set the value of the picker as a Date object.\n   */\n  set valueAsDate(date: Date | undefined) {\n    this.value = date ? printISODate(date) : \"\"\n  }\n\n  get valueAsNumber(): number {\n    return this.valueAsDate?.getTime() ?? NaN\n  }\n\n  /**\n   * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n   */\n  set valueAsNumber(date: number) {\n    this.value = date ? printISODate(new Date(date)) : \"\"\n  }\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @property() min: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @property() max: string = \"\"\n\n  /**\n   * Forces the opening direction of the calendar modal to be always left or right.\n   * This setting can be useful when the input is smaller than the opening date picker\n   * would be as by default the picker always opens towards right.\n   */\n  @property() direction: \"left\" | \"right\" = \"right\"\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @property({ attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   * Default is IS0-8601 parsing and formatting.\n   */\n  @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @property({ attribute: false }) isDateDisabled: DateDisabledPredicate = isDateDisabled\n\n  /**\n   * Show the calendar modal, moving focus to the calendar inside.\n   */\n  show() {\n    this.open = true\n    /**\n     * Dispatched when the calendar is toggled open.\n     */\n    this.dispatchEvent(new NordEvent(\"open\"))\n\n    // we should only focus once the calendar is visible after render is complete\n    this.updateComplete.then(() => this.calendar.focus({ target: \"month\" }))\n  }\n\n  /**\n   * Hide the calendar modal.\n   * @param {boolean} moveFocusToButton controls whether focus should be returned to the date picker's button.\n   */\n  hide(moveFocusToButton = true) {\n    this.open = false\n    /**\n     * Dispatched when the calendar is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.toggleButton.focus()\n    }\n  }\n\n  render() {\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <input\n          class=\"n-input\"\n          name=${this.name}\n          .value=${formattedDate}\n          placeholder=${ifDefined(this.placeholder)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-autocomplete=\"none\"\n          @input=${this.handleInputChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          autocomplete=\"off\"\n          ${ref(this.focusableRef)}\n          aria-invalid=${ifDefined(this.error ? \"true\" : undefined)}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n        />\n        <button class=\"n-date-toggle\" @click=${this.toggleOpen} ?disabled=${this.disabled} type=\"button\">\n          <nord-icon name=\"interface-calendar\" size=\"s\"></nord-icon>\n          <nord-visually-hidden>\n            ${this.localize.term(\"buttonLabel\")}\n            ${valueAsDate\n              ? html`\n                  <span>\n                    , ${this.localize.term(\"selectedDateMessage\")} ${this.dateFormatLong.format(valueAsDate)}\n                  </span>\n                `\n              : nothing}\n          </nord-visually-hidden>\n        </button>\n      </div>\n\n      ${this.renderError()}\n\n      <div\n        class=${classMap({\n          \"is-left\": this.direction === \"left\",\n          \"is-active\": this.open,\n        })}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n        aria-labelledby=\"dialog-header\"\n      >\n        <div class=\"n-date-dialog-content\">\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n          <div class=\"n-date-mobile\">\n            <div class=\"n-date-mobile-heading\" id=\"dialog-header\">${this.localize.term(\"modalHeading\")}</div>\n            <button class=\"n-date-close\" @click=${this.hide} type=\"button\">\n              <nord-icon color=\"var(--n-color-icon)\" name=\"interface-close-small\" size=\"xs\"></nord-icon>\n              <nord-visually-hidden>${this.localize.term(\"closeLabel\")}</nord-visually-hidden>\n            </button>\n          </div>\n          <nord-calendar\n            value=${this.value}\n            min=${this.min}\n            max=${this.max}\n            .firstDayOfWeek=${this.firstDayOfWeek}\n            .isDateDisabled=${this.isDateDisabled}\n            @change=${this.handleDaySelect}\n          ></nord-calendar>\n\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n        </div>\n      </div>\n    `\n  }\n\n  private createDateFormatters() {\n    this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n      day: \"numeric\",\n      month: \"long\",\n      year: \"numeric\",\n    })\n  }\n\n  private focusFirst() {\n    this.closeButton.focus()\n  }\n\n  private focusLast() {\n    this.calendar.focus({ target: \"day\" })\n  }\n\n  private handleDaySelect = (e: DateSelectEvent) => {\n    e.stopPropagation()\n    this.setValue(e.date)\n    this.hide()\n  }\n\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n\n    if (this.open) {\n      this.hide(false)\n    } else {\n      this.show()\n    }\n  }\n\n  private handleBlur = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"blur\"))\n  }\n\n  private handleFocus = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"focus\"))\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    cleanValue(target, DISALLOWED_CHARACTERS)\n    this.dispatchEvent(new NordEvent(\"input\"))\n\n    const parsed = this.dateAdapter.parse(target.value, createDate)\n    if (parsed || target.value === \"\") {\n      this.setValue(parsed)\n    }\n  }\n\n  private setValue(date?: Date) {\n    this.value = date ? printISODate(date) : \"\"\n    this.dispatchEvent(new NordEvent(\"change\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-date-picker\": DatePicker\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n  const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","DISALLOWED_CHARACTERS","isDateDisabled","DatePicker","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","dismiss","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","calendar","toggleButton","swipe","SwipeController","target","dialog","matchesGesture","isDownwardsSwipe","onSwipeEnd","localize","LocalizeController","onLangChange","createDateFormatters","value","min","max","direction","firstDayOfWeek","dateAdapter","isoAdapter","handleDaySelect","stopPropagation","setValue","date","toggleOpen","preventDefault","show","handleBlur","event","dispatchEvent","NordEvent","handleFocus","handleInputChange","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","parsed","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","_b","_a","getTime","NaN","Date","updateComplete","then","focus","moveFocusToButton","render","formattedDate","format","html","renderLabel","name","ifDefined","placeholder","inputId","disabled","required","ref","focusableRef","error","undefined","getDescribedBy","term","dateFormatLong","nothing","renderError","classMap","focusLast","focusFirst","Intl","DateTimeFormat","resolvedLang","day","month","year","closeButton","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","state","property","attribute","Number","customElement"],"mappings":"wpDAAe,sOACM,0BACD,0GCFL,+YACM,6BACD,+oJCkCpBA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAElB,MAAMC,EAAwB,cACxBC,EAAiB,KAAM,EAY7B,IAAqBC,EAArB,cAAwCC,EAAoBC,EAAWC,EAAeC,MAAtFC,kCAQUC,KAAAC,QAAU,IAAIC,EAAuBF,KAAM,CACjDG,OAAQ,IAAMH,KAAKI,KACnBC,UAAWC,GAAKN,KAAKO,KAAgB,UAAXD,EAAEE,MAC5BC,cAAeC,GAAQA,IAASV,KAAKW,UAAYD,IAASV,KAAKY,eAGzDZ,KAAAa,MAAQ,IAAIC,EAAgBd,KAAM,CACxCe,OAAQ,IAAMf,KAAKgB,OACnBC,eAAgBC,EAChBC,WAAY,IAAMnB,KAAKO,MAAK,KAGtBP,KAAAoB,SAAW,IAAIC,EAAuCrB,KAAM,CAClEsB,aAAc,IAAMtB,KAAKuB,yBAaVvB,KAAII,MAAG,EAKZJ,KAAKwB,MAAW,GA4BhBxB,KAAGyB,IAAW,GAMdzB,KAAG0B,IAAW,GAOd1B,KAAS2B,UAAqB,QAMkB3B,KAAA4B,eAA8C,EAQ1E5B,KAAW6B,YAAgBC,EAM3B9B,KAAcP,eAA0BA,EA6HhEO,KAAA+B,gBAAmBzB,IACzBA,EAAE0B,kBACFhC,KAAKiC,SAAS3B,EAAE4B,MAChBlC,KAAKO,QAGCP,KAAAmC,WAAc7B,IACpBA,EAAE8B,iBAEEpC,KAAKI,KACPJ,KAAKO,MAAK,GAEVP,KAAKqC,QAIDrC,KAAAsC,WAAcC,IACpBA,EAAMP,kBACNhC,KAAKwC,cAAc,IAAIC,EAAU,UAG3BzC,KAAA0C,YAAeH,IACrBA,EAAMP,kBACNhC,KAAKwC,cAAc,IAAIC,EAAU,WAG3BzC,KAAA2C,kBAAqBrC,IAC3B,MAAMS,EAAST,EAAES,QChTL,SAAW6B,EAA2BC,GACpD,MAAMrB,MAAEA,GAAUoB,EACZE,EAASF,EAAQG,eAEjBC,EAAexB,EAAMyB,MAAM,EAAGH,GAC9BI,EAAc1B,EAAMyB,MAAMH,EAAQtB,EAAM2B,QAExCC,EAAuBJ,EAAaK,QAAQR,EAAO,IAGnDS,EAAWF,EAFSF,EAAYG,QAAQR,EAAO,IAG/CU,EAAYH,EAAqBD,OAEvCP,EAAQpB,MAAQ8B,EAChBV,EAAQG,eAAiBQ,EACzBX,EAAQY,aAAeD,EDoSrBE,CAAW1C,EAAQvB,GACnBQ,KAAKwC,cAAc,IAAIC,EAAU,UAEjC,MAAMiB,EAAS1D,KAAK6B,YAAY8B,MAAM5C,EAAOS,MAAOoC,IAChDF,GAA2B,KAAjB3C,EAAOS,QACnBxB,KAAKiC,SAASyB,IA3NdG,kBACF,OAAOC,EAAa9D,KAAKwB,OAMvBqC,gBAAY3B,GACdlC,KAAKwB,MAAQU,EAAO6B,EAAa7B,GAAQ,GAGvC8B,4BACF,OAAsC,QAA/BC,UAAAC,EAAAlE,KAAK6D,kCAAaM,iBAAa,IAAAF,EAAAA,EAAAG,IAMpCJ,kBAAc9B,GAChBlC,KAAKwB,MAAQU,EAAO6B,EAAa,IAAIM,KAAKnC,IAAS,GA6CrDG,OACErC,KAAKI,MAAO,EAIZJ,KAAKwC,cAAc,IAAIC,EAAU,SAGjCzC,KAAKsE,eAAeC,MAAK,IAAMvE,KAAKW,SAAS6D,MAAM,CAAEzD,OAAQ,YAO/DR,KAAKkE,GAAoB,GACvBzE,KAAKI,MAAO,EAIZJ,KAAKwC,cAAc,IAAIC,EAAU,UAE7BgC,GACFzE,KAAKY,aAAa4D,QAItBE,SACE,MAAMb,YAAEA,GAAgB7D,KAClB2E,EAAgBd,EAAc7D,KAAK6B,YAAY+C,OAAOf,GAAe,GAE3E,OAAOgB,CAAI,GACP7E,KAAK8E,4EAKI9E,KAAK+E,iBACHJ,mBACKK,EAAUhF,KAAKiF,qBACxBjF,KAAKkF,uBACElF,KAAKmF,wBACLnF,KAAKoF,8CAERpF,KAAK2C,8BACL3C,KAAK0C,uBACN1C,KAAKsC,kCAEX+C,EAAIrF,KAAKsF,+BACIN,EAAUhF,KAAKuF,MAAQ,YAASC,yBAC5BR,EAAUhF,KAAKyF,6DAEGzF,KAAKmC,0BAAwBnC,KAAKmF,2GAGnEnF,KAAKoB,SAASsE,KAAK,kBACnB7B,EACEgB,CAAI,WAEI7E,KAAKoB,SAASsE,KAAK,0BAA0B1F,KAAK2F,eAAef,OAAOf,YAGhF+B,0CAKR5F,KAAK6F,4BAGGC,EAAS,CACf,UAA8B,SAAnB9F,KAAK2B,UAChB,YAAa3B,KAAKI,wDAINJ,KAAKI,KAAO,QAAU,2HAIYJ,KAAK+F,qGAGO/F,KAAKoB,SAASsE,KAAK,6DACrC1F,KAAKO,uIAEjBP,KAAKoB,SAASsE,KAAK,4EAIrC1F,KAAKwB,eACPxB,KAAKyB,aACLzB,KAAK0B,yBACO1B,KAAK4B,oCACL5B,KAAKP,4BACbO,KAAK+B,iFAG6B/B,KAAKgG,iCAMnDzE,uBACNvB,KAAK2F,eAAiB,IAAIM,KAAKC,eAAelG,KAAKoB,SAAS+E,aAAc,CACxEC,IAAK,UACLC,MAAO,OACPC,KAAM,YAIFN,aACNhG,KAAKuG,YAAY/B,QAGXuB,YACN/F,KAAKW,SAAS6D,MAAM,CAAEzD,OAAQ,QA0CxBkB,SAASC,GACflC,KAAKwB,MAAQU,EAAO6B,EAAa7B,GAAQ,GACzClC,KAAKwC,cAAc,IAAIC,EAAU,aAzQ5B/C,EAAM8G,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAElCC,EAAA,CAA9BC,EAAM,kBAAkB,IAAmCpH,EAAAqH,UAAA,oBAAA,GAC9BF,EAAA,CAA7BC,EAAM,iBAAiB,IAA6CpH,EAAAqH,UAAA,mBAAA,GACvCF,EAAA,CAA7BC,EAAM,iBAAiB,IAAiCpH,EAAAqH,UAAA,gBAAA,GACzBF,EAAA,CAA/BC,EAAM,mBAAmB,IAAkCpH,EAAAqH,UAAA,cAAA,GA4BnDF,EAAA,CAARG,KAA4BtH,EAAAqH,UAAA,YAAA,GAKjBF,EAAA,CAAXI,KAA6BvH,EAAAqH,UAAA,aAAA,GA4BlBF,EAAA,CAAXI,KAA2BvH,EAAAqH,UAAA,WAAA,GAMhBF,EAAA,CAAXI,KAA2BvH,EAAAqH,UAAA,WAAA,GAOhBF,EAAA,CAAXI,KAAgDvH,EAAAqH,UAAA,iBAAA,GAMWF,EAAA,CAA3DI,EAAS,CAAEC,UAAW,oBAAqB1G,KAAM2G,UAAwDzH,EAAAqH,UAAA,sBAAA,GAQ1EF,EAAA,CAA/BI,EAAS,CAAEC,WAAW,KAA8CxH,EAAAqH,UAAA,mBAAA,GAMrCF,EAAA,CAA/BI,EAAS,CAAEC,WAAW,KAA+DxH,EAAAqH,UAAA,sBAAA,GApGnErH,EAAUmH,EAAA,CAD9BO,EAAc,qBACM1H,SAAAA"}

package/lib/DateSelectEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateSelectEvent.js","sources":["../src/calendar/DateSelectEvent.ts"],"sourcesContent":["import { NordEvent } from \"../common/events.js\"\n\nexport class DateSelectEvent extends NordEvent {\n  date: Date\n\n  constructor(name: string, date: Date) {\n    super(name)\n    this.date = date\n  }\n}\n"],"names":["DateSelectEvent","NordEvent","constructor","name","date","super","this"],"mappings":"+CAEaA,UAAwBC,EAGnCC,YAAYC,EAAcC,GACxBC,MAAMF,GACNG,KAAKF,KAAOA"}
+{"version":3,"file":"DateSelectEvent.js","sources":["../src/calendar/DateSelectEvent.ts"],"sourcesContent":["import { NordEvent } from \"../common/events.js\"\n\nexport class DateSelectEvent extends NordEvent {\n  constructor(name: string, public date: Date) {\n    super(name)\n  }\n}\n"],"names":["DateSelectEvent","NordEvent","constructor","name","date","super","this"],"mappings":"yCAEM,MAAOA,UAAwBC,EACnCC,YAAYC,EAAqBC,GAC/BC,MAAMF,GADyBG,KAAIF,KAAJA"}

package/lib/DirectionController-8b298382.js

@@ -0,0 +1,2 @@
+class t{constructor(t){this.host=t,this.host.addController(this)}get dir(){return document.documentElement.dir||"ltr"}get isLTR(){return"ltr"===this.dir}get isRTL(){return"rtl"===this.dir}hostConnected(){t.observer||(t.observer=new MutationObserver(t.observe),t.observer.observe(document.documentElement,{attributes:!0,attributeFilter:["dir"]})),t.hosts.has(this.host)||t.hosts.add(this.host)}hostDisconnected(){t.hosts.delete(this.host)}static observe(){t.hosts.forEach((t=>t.requestUpdate()))}}t.hosts=new Set;export{t as D};
+//# sourceMappingURL=DirectionController-8b298382.js.map

package/lib/DirectionController-8b298382.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirectionController-8b298382.js","sources":["../src/common/controllers/DirectionController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nexport type WritingDirection = \"ltr\" | \"rtl\"\n\nexport class DirectionController implements ReactiveController {\n  // these are all static as we only want a single observer on <html>\n  private static hosts = new Set<ReactiveControllerHost>()\n  private static observer?: MutationObserver\n\n  // eslint-disable-next-line class-methods-use-this\n  get dir(): WritingDirection {\n    return (document.documentElement.dir as WritingDirection) || \"ltr\"\n  }\n\n  get isLTR() {\n    return this.dir === \"ltr\"\n  }\n\n  get isRTL() {\n    return this.dir === \"rtl\"\n  }\n\n  constructor(private host: ReactiveControllerHost) {\n    this.host.addController(this)\n  }\n\n  hostConnected() {\n    if (!DirectionController.observer) {\n      DirectionController.observer = new MutationObserver(DirectionController.observe)\n      DirectionController.observer.observe(document.documentElement, { attributes: true, attributeFilter: [\"dir\"] })\n    }\n\n    if (!DirectionController.hosts.has(this.host)) {\n      DirectionController.hosts.add(this.host)\n    }\n  }\n\n  hostDisconnected() {\n    DirectionController.hosts.delete(this.host)\n  }\n\n  private static observe() {\n    DirectionController.hosts.forEach(host => host.requestUpdate())\n  }\n}\n"],"names":["DirectionController","constructor","host","this","addController","dir","document","documentElement","isLTR","isRTL","hostConnected","observer","MutationObserver","observe","attributes","attributeFilter","hosts","has","add","hostDisconnected","delete","static","forEach","requestUpdate","Set"],"mappings":"MAIaA,EAkBXC,YAAoBC,GAAAC,KAAID,KAAJA,EAClBC,KAAKD,KAAKE,cAAcD,MAbtBE,UACF,OAAQC,SAASC,gBAAgBF,KAA4B,MAG3DG,YACF,MAAoB,QAAbL,KAAKE,IAGVI,YACF,MAAoB,QAAbN,KAAKE,IAOdK,gBACOV,EAAoBW,WACvBX,EAAoBW,SAAW,IAAIC,iBAAiBZ,EAAoBa,SACxEb,EAAoBW,SAASE,QAAQP,SAASC,gBAAiB,CAAEO,YAAY,EAAMC,gBAAiB,CAAC,UAGlGf,EAAoBgB,MAAMC,IAAId,KAAKD,OACtCF,EAAoBgB,MAAME,IAAIf,KAAKD,MAIvCiB,mBACEnB,EAAoBgB,MAAMI,OAAOjB,KAAKD,MAGhCmB,iBACNrB,EAAoBgB,MAAMM,SAAQpB,GAAQA,EAAKqB,mBApClCvB,EAAAgB,MAAQ,IAAIQ"}

package/lib/DraftComponentMixin-9e4b7b34.js.map

@@ -1 +1 @@
-{"version":3,"file":"DraftComponentMixin-9e4b7b34.js","sources":["../src/common/mixins/DraftComponentMixin.ts"],"sourcesContent":["import { LitElement } from \"lit\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport function DraftComponentMixin<T extends Constructable<LitElement>>(superClass: T) {\n  class DraftComponent extends superClass {\n    private static _warningLogged = false\n\n    connectedCallback() {\n      super.connectedCallback()\n\n      if (process.env.NODE_ENV !== \"development\" && !DraftComponent._warningLogged) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,\n          \"font-weight:bold\",\n          \"font-weight:normal\"\n        )\n        DraftComponent._warningLogged = true\n      }\n    }\n  }\n\n  return DraftComponent as T\n}\n"],"names":["DraftComponentMixin","superClass","DraftComponent","connectedCallback","super","_warningLogged","console","warn","this","localName"],"mappings":"SAIgBA,EAAyDC,GACvE,MAAMC,UAAuBD,EAG3BE,oBACEC,MAAMD,oBAEyCD,EAAeG,iBAE5DC,QAAQC,KACN,WAAWC,KAAKC,0EAChB,mBACA,sBAEFP,EAAeG,gBAAiB,IAKtC,OAjBiBH,kBAAiB,EAiB3BA"}
+{"version":3,"file":"DraftComponentMixin-9e4b7b34.js","sources":["../src/common/mixins/DraftComponentMixin.ts"],"sourcesContent":["import { LitElement } from \"lit\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport function DraftComponentMixin<T extends Constructable<LitElement>>(superClass: T) {\n  class DraftComponent extends superClass {\n    private static _warningLogged = false\n\n    connectedCallback() {\n      super.connectedCallback()\n\n      if (process.env.NODE_ENV !== \"development\" && !DraftComponent._warningLogged) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,\n          \"font-weight:bold\",\n          \"font-weight:normal\"\n        )\n        DraftComponent._warningLogged = true\n      }\n    }\n  }\n\n  return DraftComponent as T\n}\n"],"names":["DraftComponentMixin","superClass","DraftComponent","connectedCallback","super","_warningLogged","console","warn","this","localName"],"mappings":"AAIM,SAAUA,EAAyDC,GACvE,MAAMC,UAAuBD,EAG3BE,oBACEC,MAAMD,oBAEyCD,EAAeG,iBAE5DC,QAAQC,KACN,WAAWC,KAAKC,0EAChB,mBACA,sBAEFP,EAAeG,gBAAiB,IAKtC,OAjBiBH,EAAcG,gBAAG,EAiB3BH"}

package/lib/Dropdown.js

@@ -1,2 +1,2 @@
-import{_ as o,n as e}from"./query-assigned-elements-37b095c4.js";import{r as t,s as n,$ as r}from"./lit-element-74b6bb4b.js";import{e as s}from"./property-03f59dce.js";import{i as d}from"./query-2d22378e.js";import{l as p}from"./if-defined-fe657a02.js";import{s as a}from"./Component-9d373ef3.js";const i=t`:host{--n-dropdown-item-margin:0 var(--n-space-s);--n-dropdown-group-margin:0 0 var(--n-space-s)}::slotted(nord-dropdown-group){border-block-end:1px solid var(--n-color-border);padding:0 var(--n-space-s) var(--n-space-s);margin:0 0 var(--n-space-s)}::slotted(nord-dropdown-group:last-child){border:0;padding:0 var(--n-space-s);margin:0}.n-dropdown-content{padding:var(--n-space-s) 0}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}`;let l=class extends n{constructor(){super(...arguments),this.expand=!1}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]')||void 0;null==o||o.setAttribute("aria-haspopup","true")}render(){return r`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${p(this.align)}" position="${p(this.position)}" @open="${this.handleOpen}"><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){var o;null===(o=this.querySelector("nord-dropdown-item"))||void 0===o||o.focus()}};l.styles=[a,i],l.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([d("nord-popout",!0)],l.prototype,"popout",void 0),o([s({reflect:!0})],l.prototype,"align",void 0),o([s({reflect:!0})],l.prototype,"position",void 0),o([s({reflect:!0,type:Boolean})],l.prototype,"expand",void 0),l=o([e("nord-dropdown")],l);var c=l;export{c as default};
+import{_ as o,n as e}from"./query-assigned-elements-ef860822.js";import{r as t,s as n,$ as r}from"./lit-element-e382250e.js";import{e as s}from"./property-03f59dce.js";import{i as d}from"./query-2d22378e.js";import{l as p}from"./if-defined-4d1db15c.js";import{s as a}from"./Component-fa316972.js";const i=t`:host{--n-dropdown-item-margin:0 var(--n-space-s);--n-dropdown-group-margin:0 0 var(--n-space-s)}::slotted(nord-dropdown-group){border-block-end:1px solid var(--n-color-border);padding:0 var(--n-space-s) var(--n-space-s);margin:0 0 var(--n-space-s)}::slotted(nord-dropdown-group:last-child){border:0;padding:0 var(--n-space-s);margin:0}.n-dropdown-content{padding:var(--n-space-s) 0}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:80vh;overflow:scroll}}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}`;let l=class extends n{constructor(){super(...arguments),this.expand=!1}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]')||void 0;null==o||o.setAttribute("aria-haspopup","true")}render(){return r`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${p(this.align)}" position="${p(this.position)}" @open="${this.handleOpen}"><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){var o;null===(o=this.querySelector("nord-dropdown-item"))||void 0===o||o.focus()}};l.styles=[a,i],l.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([d("nord-popout",!0)],l.prototype,"popout",void 0),o([s({reflect:!0})],l.prototype,"align",void 0),o([s({reflect:!0})],l.prototype,"position",void 0),o([s({reflect:!0,type:Boolean})],l.prototype,"expand",void 0),l=o([e("nord-dropdown")],l);var c=l;export{c as default};
 //# sourceMappingURL=Dropdown.js.map

package/lib/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\n\nimport Popout from \"../popout/Popout.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Dropdown.css\"\n\n/**\n * Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n *\n * @status new\n * @category action\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n */\n@customElement(\"nord-dropdown\")\nexport default class Dropdown extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * we delegate focus, to ensure focus does not move to body if you click\n   * some whitespace or a dropdown-group heading, as this would close the dropdown\n   * @internal\n   */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n  @query(\"nord-popout\", true) private popout!: Popout\n\n  /**\n   * Set the alignment of the dropdown in relation to the toggle depending on the position.\n   * `start` will align the left of the dropdown to the left of the toggle.\n   * `end` will align the right of the dropdown to the right of the toggle.\n   * A dropdown with a set position of `inline-start` or `inline-end` will switch\n   * `start` and `end` to the top and bottom of the dropdown respectively.\n   */\n  @property({ reflect: true }) align?: Popout[\"align\"]\n\n  /**\n   * Set the position of the dropdown in relation to the toggle.\n   * Options follow logical properties.\n   * `block-start` and `block-end` referring to top and bottom respectively,\n   * `inline-start` and `inline-end` referring to left and right respectively.\n   */\n  @property({ reflect: true }) position?: Popout[\"position\"]\n\n  /**\n   * Controls whether the toggle slot expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const toggle = this.querySelector(`[slot=\"toggle\"]`) || undefined\n    toggle?.setAttribute(\"aria-haspopup\", \"true\")\n  }\n\n  render() {\n    return html`\n      <div class=\"n-dropdown\" @focusout=${this.handleBlur}>\n        <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n        <nord-popout\n          id=\"popout\"\n          align=${ifDefined(this.align)}\n          position=${ifDefined(this.position)}\n          @open=${this.handleOpen}\n        >\n          <div class=\"n-dropdown-content\">\n            <slot></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private handleBlur(e: FocusEvent) {\n    const relatedTarget = e.relatedTarget as Node\n\n    // safari will set relatedTarget to null when clicking on the trigger button\n    // because it doesn't focus buttons on click.\n    // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n    // so we only run this logic if relatedTarget is set, which sidesteps this issue\n    if (relatedTarget && !this.contains(relatedTarget)) {\n      this.popout.hide(false)\n    }\n  }\n\n  private handleOpen() {\n    this.querySelector(\"nord-dropdown-item\")?.focus()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown\": Dropdown\n  }\n}\n"],"names":["Dropdown","LitElement","constructor","this","connectedCallback","super","toggle","querySelector","undefined","setAttribute","render","html","handleBlur","ifDefined","align","position","handleOpen","e","relatedTarget","contains","popout","hide","focus","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","property","reflect","type","Boolean","customElement"],"mappings":"8wBAmBA,IAAqBA,EAArB,cAAsCC,EAAtCC,kCAgC8CC,aAAS,EAErDC,oBACEC,MAAMD,oBAEN,MAAME,EAASH,KAAKI,cAAc,yBAAsBC,EACxDF,MAAAA,GAAAA,EAAQG,aAAa,gBAAiB,QAGxCC,SACE,OAAOC,CAAI,sCAC2BR,KAAKS,iGAI7BC,EAAUV,KAAKW,qBACZD,EAAUV,KAAKY,qBAClBZ,KAAKa,sFAUbJ,WAAWK,GACjB,MAAMC,EAAgBD,EAAEC,cAMpBA,IAAkBf,KAAKgB,SAASD,IAClCf,KAAKiB,OAAOC,MAAK,GAIbL,6BACNb,KAAKI,cAAc,sCAAuBe,UAvErCtB,SAAS,CAACuB,EAAgBC,GAO1BxB,oBAAoB,IAAKC,EAAWwB,kBAAmBC,gBAAgB,GAElDC,GAA3BC,EAAM,eAAe,iCASOD,GAA5BE,EAAS,CAAEC,SAAS,iCAQQH,GAA5BE,EAAS,CAAEC,SAAS,oCAKuBH,GAA3CE,EAAS,CAAEC,SAAS,EAAMC,KAAMC,wCAhCdhC,KADpBiC,EAAc,kBACMjC,SAAAA"}
+{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\n\nimport Popout from \"../popout/Popout.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Dropdown.css\"\n\n/**\n * Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n *\n * @status new\n * @category action\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n */\n@customElement(\"nord-dropdown\")\nexport default class Dropdown extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * we delegate focus, to ensure focus does not move to body if you click\n   * some whitespace or a dropdown-group heading, as this would close the dropdown\n   * @internal\n   */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n  @query(\"nord-popout\", true) private popout!: Popout\n\n  /**\n   * Set the alignment of the dropdown in relation to the toggle depending on the position.\n   * `start` will align the left of the dropdown to the left of the toggle.\n   * `end` will align the right of the dropdown to the right of the toggle.\n   * A dropdown with a set position of `inline-start` or `inline-end` will switch\n   * `start` and `end` to the top and bottom of the dropdown respectively.\n   */\n  @property({ reflect: true }) align?: Popout[\"align\"]\n\n  /**\n   * Set the position of the dropdown in relation to the toggle.\n   * Options follow logical properties.\n   * `block-start` and `block-end` referring to top and bottom respectively,\n   * `inline-start` and `inline-end` referring to left and right respectively.\n   */\n  @property({ reflect: true }) position?: Popout[\"position\"]\n\n  /**\n   * Controls whether the toggle slot expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const toggle = this.querySelector(`[slot=\"toggle\"]`) || undefined\n    toggle?.setAttribute(\"aria-haspopup\", \"true\")\n  }\n\n  render() {\n    return html`\n      <div class=\"n-dropdown\" @focusout=${this.handleBlur}>\n        <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n        <nord-popout\n          id=\"popout\"\n          align=${ifDefined(this.align)}\n          position=${ifDefined(this.position)}\n          @open=${this.handleOpen}\n        >\n          <div class=\"n-dropdown-content\">\n            <slot></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private handleBlur(e: FocusEvent) {\n    const relatedTarget = e.relatedTarget as Node\n\n    // safari will set relatedTarget to null when clicking on the trigger button\n    // because it doesn't focus buttons on click.\n    // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n    // so we only run this logic if relatedTarget is set, which sidesteps this issue\n    if (relatedTarget && !this.contains(relatedTarget)) {\n      this.popout.hide(false)\n    }\n  }\n\n  private handleOpen() {\n    this.querySelector(\"nord-dropdown-item\")?.focus()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown\": Dropdown\n  }\n}\n"],"names":["Dropdown","LitElement","constructor","this","expand","connectedCallback","super","toggle","querySelector","undefined","setAttribute","render","html","handleBlur","ifDefined","align","position","handleOpen","e","relatedTarget","contains","popout","hide","_a","focus","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","reflect","type","Boolean","customElement"],"mappings":"o2BAmBA,IAAqBA,EAArB,cAAsCC,EAAtCC,kCAgC8CC,KAAMC,QAAG,EAErDC,oBACEC,MAAMD,oBAEN,MAAME,EAASJ,KAAKK,cAAc,yBAAsBC,EACxDF,MAAAA,GAAAA,EAAQG,aAAa,gBAAiB,QAGxCC,SACE,OAAOC,CAAI,sCAC2BT,KAAKU,iGAI7BC,EAAUX,KAAKY,qBACZD,EAAUX,KAAKa,qBAClBb,KAAKc,sFAUbJ,WAAWK,GACjB,MAAMC,EAAgBD,EAAEC,cAMpBA,IAAkBhB,KAAKiB,SAASD,IAClChB,KAAKkB,OAAOC,MAAK,GAIbL,mBACkC,QAAxCM,EAAApB,KAAKK,cAAc,6BAAqB,IAAAe,GAAAA,EAAEC,UAvErCxB,EAAAyB,OAAS,CAACC,EAAgBC,GAO1B3B,EAAiB4B,kBAAG,IAAK3B,EAAW2B,kBAAmBC,gBAAgB,GAElDC,EAAA,CAA3BC,EAAM,eAAe,IAA6B/B,EAAAgC,UAAA,cAAA,GAStBF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAA+BlC,EAAAgC,UAAA,aAAA,GAQvBF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAqClC,EAAAgC,UAAA,gBAAA,GAKdF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBpC,EAAAgC,UAAA,cAAA,GAhCvChC,EAAQ8B,EAAA,CAD5BO,EAAc,kBACMrC,SAAAA"}

package/lib/DropdownGroup.js

@@ -1,2 +1,2 @@
-import{_ as o,n as e}from"./query-assigned-elements-37b095c4.js";import{r as n,s as r,$ as d,w as t}from"./lit-element-74b6bb4b.js";import{e as i}from"./property-03f59dce.js";import{s}from"./Component-9d373ef3.js";const a=n`:host{--n-dropdown-item-margin:0}.n-dropdown-group-heading{font-size:var(--n-font-size-xs);font-weight:var(--n-font-weight-heading);color:var(--n-color-text-weaker);padding:calc(var(--n-space-s)/ 2) var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-dropdown-group-content{display:flex;flex-direction:column}`;let p=class extends r{render(){return d`<div class="n-dropdown-group">${this.heading?d`<p id="heading" aria-hidden="true" class="n-dropdown-group-heading">${this.heading}</p>`:t}<div class="n-dropdown-group-content" role="group" aria-labelledby="${this.heading?"heading":t}"><slot></slot></div></div>`}};p.styles=[s,a],o([i()],p.prototype,"heading",void 0),p=o([e("nord-dropdown-group")],p);var l=p;export{l as default};
+import{_ as e,n as o}from"./query-assigned-elements-ef860822.js";import{r as n,s as r,$ as d,w as a}from"./lit-element-e382250e.js";import{e as i}from"./property-03f59dce.js";import{s}from"./Component-fa316972.js";const t=n`:host{--n-dropdown-item-margin:0}.n-dropdown-group-heading{font-size:var(--n-font-size-xs);font-weight:var(--n-font-weight-heading);color:var(--n-color-text-weaker);padding:calc(var(--n-space-s)/ 2) var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width:35.9375em){.n-dropdown-group-heading{padding:calc(var(--n-space-s)/ 1.5) var(--n-space-m)}}.n-dropdown-group-content{display:flex;flex-direction:column}`;let p=class extends r{render(){return d`<div class="n-dropdown-group">${this.heading?d`<p id="heading" aria-hidden="true" class="n-dropdown-group-heading">${this.heading}</p>`:a}<div class="n-dropdown-group-content" role="group" aria-labelledby="${this.heading?"heading":a}"><slot></slot></div></div>`}};p.styles=[s,t],e([i()],p.prototype,"heading",void 0),p=e([o("nord-dropdown-group")],p);var l=p;export{l as default};
 //# sourceMappingURL=DropdownGroup.js.map

package/lib/DropdownGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownGroup.js","sources":["../src/dropdown-group/DropdownGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./DropdownGroup.css\"\n\n/**\n * Dropdown group includes all the actions or items in a single dropdown\n * group and is used for grouping items into related categories.\n *\n * @status new\n * @category action\n * @slot - The dropdown group content.\n */\n@customElement(\"nord-dropdown-group\")\nexport default class DropdownGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * Heading and accessible label for the dropdown group.\n   */\n  @property() heading?: string\n\n  render() {\n    return html`\n      <div class=\"n-dropdown-group\">\n        ${this.heading\n          ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-dropdown-group-heading\">${this.heading}</p>`\n          : nothing}\n        <div class=\"n-dropdown-group-content\" role=\"group\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown-group\": DropdownGroup\n  }\n}\n"],"names":["DropdownGroup","LitElement","render","html","this","heading","nothing","componentStyle","style","__decorate","property","customElement"],"mappings":"ijBAeA,IAAqBA,EAArB,cAA2CC,EAQzCC,SACE,OAAOC,CAAI,iCAELC,KAAKC,QACHF,CAAI,uEAAuEC,KAAKC,cAChFC,wEACiEF,KAAKC,QAAU,UAAYC,iCAb/FN,SAAS,CAACO,EAAgBC,GAKrBC,GAAXC,mCANkBV,KADpBW,EAAc,wBACMX,SAAAA"}
+{"version":3,"file":"DropdownGroup.js","sources":["../src/dropdown-group/DropdownGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./DropdownGroup.css\"\n\n/**\n * Dropdown group includes all the actions or items in a single dropdown\n * group and is used for grouping items into related categories.\n *\n * @status new\n * @category action\n * @slot - The dropdown group content.\n */\n@customElement(\"nord-dropdown-group\")\nexport default class DropdownGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * Heading and accessible label for the dropdown group.\n   */\n  @property() heading?: string\n\n  render() {\n    return html`\n      <div class=\"n-dropdown-group\">\n        ${this.heading\n          ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-dropdown-group-heading\">${this.heading}</p>`\n          : nothing}\n        <div class=\"n-dropdown-group-content\" role=\"group\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown-group\": DropdownGroup\n  }\n}\n"],"names":["DropdownGroup","LitElement","render","html","this","heading","nothing","styles","componentStyle","style","__decorate","property","prototype","customElement"],"mappings":"8pBAeA,IAAqBA,EAArB,cAA2CC,EAQzCC,SACE,OAAOC,CAAI,iCAELC,KAAKC,QACHF,CAAI,uEAAuEC,KAAKC,cAChFC,wEACiEF,KAAKC,QAAU,UAAYC,iCAb/FN,EAAAO,OAAS,CAACC,EAAgBC,GAKrBC,EAAA,CAAXC,KAA2BX,EAAAY,UAAA,eAAA,GANTZ,EAAaU,EAAA,CADjCG,EAAc,wBACMb,SAAAA"}

package/lib/DropdownItem.js

@@ -1,2 +1,2 @@
-import{_ as o,n as e}from"./query-assigned-elements-37b095c4.js";import{r as n,s as t,$ as r}from"./lit-element-74b6bb4b.js";import{e as i}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe657a02.js";import{n as s}from"./ref-7d028e3a.js";import{F as d}from"./FocusableMixin-ebb67709.js";import{s as l}from"./Component-9d373ef3.js";import"./directive-de55b00a.js";const c=n`:host{display:flex;font-size:var(--n-font-size-m)}.n-dropdown-item{-webkit-appearance:none;appearance:none;cursor:pointer;display:flex;flex:1;gap:var(--n-space-s);align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);text-decoration:none;border:0;color:var(--n-color-text);padding:var(--n-space-s);margin:var(--n-dropdown-item-margin,0);border-radius:var(--n-border-radius-s);background:0 0;text-align:start;box-shadow:var(--n-dropdown-item-box-shadow,none);min-inline-size:0}.n-dropdown-item:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-dropdown-item:hover ::slotted(*){color:var(--n-color-text-on-accent)!important}.n-dropdown-item ::slotted(nord-icon){color:var(--n-color-icon)}.n-dropdown-item:hover ::slotted(nord-icon){color:currentColor}.n-dropdown-item:active{opacity:.7}.n-dropdown-item:focus-visible{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}slot[name=end],slot[name=start]{flex:0 0 auto}slot[name=end]{display:inline-block;margin-inline-start:auto}.n-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let p=class extends(d(t)){render(){return(this.href?o=>r`<a href="${a(this.href)}" ${s(this.focusableRef)} class="n-dropdown-item">${o}</a>`:o=>r`<button ${s(this.focusableRef)} class="n-dropdown-item">${o}</button>`)(r`<slot name="start"></slot><span class="n-truncate"><slot></slot></span><slot name="end"></slot>`)}};p.styles=[l,c],o([i({reflect:!0})],p.prototype,"href",void 0),p=o([e("nord-dropdown-item")],p);var m=p;export{m as default};
+import{_ as o,n as e}from"./query-assigned-elements-ef860822.js";import{r as n,$ as r,s as t}from"./lit-element-e382250e.js";import{e as a}from"./property-03f59dce.js";import{l as i}from"./if-defined-4d1db15c.js";import{n as s}from"./ref-adf41565.js";import{F as d}from"./FocusableMixin-4c85ced9.js";import{s as l}from"./Component-fa316972.js";import"./directive-de55b00a.js";const c=n`:host{display:flex;font-size:var(--n-font-size-m);line-height:var(--n-line-height-tight)}.n-dropdown-item{-webkit-appearance:none;appearance:none;cursor:pointer;display:flex;flex:1;gap:var(--n-space-s);align-items:center;font-family:inherit;font-size:inherit;text-decoration:none;border:0;color:var(--n-color-text);padding:var(--n-space-s);margin:var(--n-dropdown-item-margin,0);border-radius:var(--n-border-radius-s);background:0 0;text-align:start;box-shadow:var(--n-dropdown-item-box-shadow,none);min-inline-size:0}.n-dropdown-item:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-dropdown-item:hover ::slotted(*){color:var(--n-color-text-on-accent)!important}.n-dropdown-item ::slotted(nord-icon){color:var(--n-color-icon)}.n-dropdown-item:hover ::slotted(nord-icon){color:currentColor}.n-dropdown-item:active{opacity:.7}.n-dropdown-item:focus-visible{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@media (max-width:35.9375em){.n-dropdown-item{gap:var(--n-space-m);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-dropdown-item ::slotted(nord-icon){block-size:var(--n-size-icon-m);inline-size:var(--n-size-icon-m)}}slot[name=end],slot[name=start]{flex:0 0 auto}slot[name=end]{display:flex;margin-inline-start:auto}.n-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let m=class extends(d(t)){render(){return(this.href?o=>r`<a href="${i(this.href)}" ${s(this.focusableRef)} class="n-dropdown-item">${o}</a>`:o=>r`<button ${s(this.focusableRef)} class="n-dropdown-item">${o}</button>`)(r`<slot name="start"></slot><span class="n-truncate"><slot></slot></span><slot name="end"></slot>`)}};m.styles=[l,c],o([a({reflect:!0})],m.prototype,"href",void 0),m=o([e("nord-dropdown-item")],m);var p=m;export{p as default};
 //# sourceMappingURL=DropdownItem.js.map

package/lib/DropdownItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownItem.js","sources":["../src/dropdown-item/DropdownItem.ts"],"sourcesContent":["import { LitElement, html, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./DropdownItem.css\"\n\n/**\n * Dropdown item populates dropdown with actions. Items can be\n * placed either inside a dropdown group or directly inside a\n * dropdown component.\n *\n * @status new\n * @category action\n * @slot - The dropdown item content.\n * @slot start - Used to place content before dropdown item text. Typically used for icons.\n * @slot end - Used to place content after dropdown item text. Typically used for icons.\n */\n@customElement(\"nord-dropdown-item\")\nexport default class DropdownItem extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  /**\n   * The url the dropdown item should link to.\n   */\n  @property({ reflect: true }) href?: string\n\n  render() {\n    const link = (content: TemplateResult) =>\n      html`<a href=${ifDefined(this.href)} ${ref(this.focusableRef)} class=\"n-dropdown-item\">${content}</a>`\n    const button = (content: TemplateResult) =>\n      html`<button ${ref(this.focusableRef)} class=\"n-dropdown-item\">${content}</button>`\n\n    const container = this.href ? link : button\n\n    return container(html`\n      <slot name=\"start\"></slot>\n      <span class=\"n-truncate\"><slot></slot></span>\n      <slot name=\"end\"></slot>\n    `)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown-item\": DropdownItem\n  }\n}\n"],"names":["DropdownItem","FocusableMixin","LitElement","render","this","href","content","html","ifDefined","ref","focusableRef","componentStyle","style","__decorate","property","reflect","customElement"],"mappings":"iiDAqBA,IAAqBA,EAArB,cAA0CC,EAAeC,IAQvDC,SAQE,OAFkBC,KAAKC,KALTC,GACZC,CAAI,YAAWC,EAAUJ,KAAKC,UAASI,EAAIL,KAAKM,yCAAyCJ,QAC3EA,GACdC,CAAI,WAAWE,EAAIL,KAAKM,yCAAyCJ,cAIlDC,CAAI,qGAfhBP,SAAS,CAACW,EAAgBC,GAKJC,GAA5BC,EAAS,CAAEC,SAAS,gCANFf,KADpBgB,EAAc,uBACMhB,SAAAA"}
+{"version":3,"file":"DropdownItem.js","sources":["../src/dropdown-item/DropdownItem.ts"],"sourcesContent":["import { LitElement, html, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./DropdownItem.css\"\n\n/**\n * Dropdown item populates dropdown with actions. Items can be\n * placed either inside a dropdown group or directly inside a\n * dropdown component.\n *\n * @status new\n * @category action\n * @slot - The dropdown item content.\n * @slot start - Used to place content before dropdown item text. Typically used for icons.\n * @slot end - Used to place content after dropdown item text. Typically used for icons.\n */\n@customElement(\"nord-dropdown-item\")\nexport default class DropdownItem extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  /**\n   * The url the dropdown item should link to.\n   */\n  @property({ reflect: true }) href?: string\n\n  render() {\n    const link = (content: TemplateResult) =>\n      html`<a href=${ifDefined(this.href)} ${ref(this.focusableRef)} class=\"n-dropdown-item\">${content}</a>`\n    const button = (content: TemplateResult) =>\n      html`<button ${ref(this.focusableRef)} class=\"n-dropdown-item\">${content}</button>`\n\n    const container = this.href ? link : button\n\n    return container(html`\n      <slot name=\"start\"></slot>\n      <span class=\"n-truncate\"><slot></slot></span>\n      <slot name=\"end\"></slot>\n    `)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown-item\": DropdownItem\n  }\n}\n"],"names":["DropdownItem","FocusableMixin","LitElement","render","this","href","content","html","ifDefined","ref","focusableRef","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"yvDAqBA,IAAqBA,EAArB,cAA0CC,EAAeC,IAQvDC,SAQE,OAFkBC,KAAKC,KALTC,GACZC,CAAI,YAAWC,EAAUJ,KAAKC,UAASI,EAAIL,KAAKM,yCAAyCJ,QAC3EA,GACdC,CAAI,WAAWE,EAAIL,KAAKM,yCAAyCJ,cAIlDC,CAAI,qGAfhBP,EAAAW,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBhB,EAAAiB,UAAA,YAAA,GANvBjB,EAAYc,EAAA,CADhCI,EAAc,uBACMlB,SAAAA"}

package/lib/EmptyState.js

@@ -1,2 +1,2 @@
-import{_ as t,n as e}from"./query-assigned-elements-37b095c4.js";import{r as n,s as a,$ as o}from"./lit-element-74b6bb4b.js";import{s as r}from"./Component-9d373ef3.js";const i=n`:host{background:var(--n-color-surface);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-empty-state{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:var(--n-space-xl)}@media (max-width:500px){.n-empty-state{padding:var(--n-space-l) var(--n-space-m)}}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){color:var(--n-color-text)!important;margin:0 0 var(--n-space-m)!important;font-weight:var(--n-font-weight-heading)!important;font-size:var(--n-font-size-xl)!important;line-height:var(--n-line-height-heading)!important}::slotted(p){margin:0 0 var(--n-space-l)!important;font-size:var(--n-font-size-m)!important;color:var(--n-color-text-weaker)!important;line-height:var(--n-line-height)!important;max-inline-size:var(--n-empty-state-text-width,400px)}`;let s=class extends a{render(){return o`<div class="n-empty-state"><slot></slot></div>`}};s.styles=[r,i],s=t([e("nord-empty-state")],s);var l=s;export{l as default};
+import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as n,s as a,$ as o}from"./lit-element-e382250e.js";import{s as r}from"./Component-fa316972.js";const i=n`:host{background:var(--n-color-surface);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-empty-state{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:var(--n-space-xl)}@media (max-width:500px){.n-empty-state{padding:var(--n-space-l) var(--n-space-m)}}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){color:var(--n-color-text)!important;margin:0 0 var(--n-space-m)!important;font-weight:var(--n-font-weight-heading)!important;font-size:var(--n-font-size-xl)!important;line-height:var(--n-line-height-heading)!important}::slotted(p){margin:0 0 var(--n-space-l)!important;font-size:var(--n-font-size-m)!important;color:var(--n-color-text-weaker)!important;line-height:var(--n-line-height)!important;max-inline-size:var(--n-empty-state-text-width,400px)}`;let s=class extends a{render(){return o`<div class="n-empty-state"><slot></slot></div>`}};s.styles=[r,i],s=t([e("nord-empty-state")],s);var l=s;export{l as default};
 //# sourceMappingURL=EmptyState.js.map

package/lib/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../src/empty-state/EmptyState.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./EmptyState.css\"\n\n/**\n * Empty state can be used when there is no data to display to\n * describe what the user can do next. Empty state provides\n * explanation and guidance to help user progress.\n *\n * @status new\n * @category feedback\n * @slot - default slot\n */\n@customElement(\"nord-empty-state\")\nexport default class EmptyState extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`<div class=\"n-empty-state\">\n      <slot></slot>\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-empty-state\": EmptyState\n  }\n}\n"],"names":["EmptyState","LitElement","render","html","componentStyle","style","customElement"],"mappings":"ugCAgBA,IAAqBA,EAArB,cAAwCC,EAGtCC,SACE,OAAOC,CAAI,mDAHNH,SAAS,CAACI,EAAgBC,GADdL,KADpBM,EAAc,qBACMN,SAAAA"}
+{"version":3,"file":"EmptyState.js","sources":["../src/empty-state/EmptyState.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./EmptyState.css\"\n\n/**\n * Empty state can be used when there is no data to display to\n * describe what the user can do next. Empty state provides\n * explanation and guidance to help user progress.\n *\n * @status new\n * @category feedback\n * @slot - default slot\n */\n@customElement(\"nord-empty-state\")\nexport default class EmptyState extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`<div class=\"n-empty-state\">\n      <slot></slot>\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-empty-state\": EmptyState\n  }\n}\n"],"names":["EmptyState","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"ugCAgBA,IAAqBA,EAArB,cAAwCC,EAGtCC,SACE,OAAOC,CAAI,mDAHNH,EAAAI,OAAS,CAACC,EAAgBC,GADdN,EAAUO,EAAA,CAD9BC,EAAc,qBACMR,SAAAA"}

package/lib/EventController-d99ebeef.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventController-d99ebeef.js","sources":["../src/common/controllers/EventController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ninterface ShadowRootEventMap {\n  slotchange: Event\n}\n\nexport class EventController implements ReactiveController {\n  private listeners: Array<() => void> = []\n\n  constructor(host: ReactiveControllerHost) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.listeners.forEach(stop => stop())\n    this.listeners = []\n  }\n\n  listen<K extends keyof WindowEventMap>(\n    window: Window,\n    type: K,\n    listener: (this: Window, ev: WindowEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void\n\n  listen<K extends keyof DocumentEventMap>(\n    document: Document,\n    type: K,\n    listener: (this: Document, ev: DocumentEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void\n\n  listen<K extends keyof HTMLElementEventMap>(\n    element: HTMLElement,\n    type: K,\n    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void\n\n  listen<K extends keyof ShadowRootEventMap>(\n    element: ShadowRoot,\n    type: K,\n    listener: (this: ShadowRoot, ev: ShadowRootEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void\n\n  listen(\n    element: Window | Document | HTMLElement | ShadowRoot,\n    type: string,\n    listener: (ev: any) => any,\n    options?: boolean | AddEventListenerOptions\n  ) {\n    element.addEventListener(type, listener, options)\n\n    const stop = () => element.removeEventListener(type, listener, options)\n    this.listeners.push(stop)\n  }\n}\n"],"names":["EventController","constructor","host","this","addController","hostDisconnected","listeners","forEach","stop","listen","element","type","listener","options","addEventListener","push","removeEventListener"],"mappings":"MAMaA,EAGXC,YAAYC,GAFJC,eAA+B,GAGrCD,EAAKE,cAAcD,MAGrBE,mBACEF,KAAKG,UAAUC,SAAQC,GAAQA,MAC/BL,KAAKG,UAAY,GA+BnBG,OACEC,EACAC,EACAC,EACAC,GAEAH,EAAQI,iBAAiBH,EAAMC,EAAUC,GAGzCV,KAAKG,UAAUS,MADF,IAAML,EAAQM,oBAAoBL,EAAMC,EAAUC"}
+{"version":3,"file":"EventController-d99ebeef.js","sources":["../src/common/controllers/EventController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ninterface ShadowRootEventMap {\n  slotchange: Event\n}\n\nexport class EventController implements ReactiveController {\n  private listeners: Array<() => void> = []\n\n  constructor(host: ReactiveControllerHost) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.listeners.forEach(stop => stop())\n    this.listeners = []\n  }\n\n  listen<K extends keyof WindowEventMap>(\n    window: Window,\n    type: K,\n    listener: (this: Window, ev: WindowEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void\n\n  listen<K extends keyof DocumentEventMap>(\n    document: Document,\n    type: K,\n    listener: (this: Document, ev: DocumentEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void\n\n  listen<K extends keyof HTMLElementEventMap>(\n    element: HTMLElement,\n    type: K,\n    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void\n\n  listen<K extends keyof ShadowRootEventMap>(\n    element: ShadowRoot,\n    type: K,\n    listener: (this: ShadowRoot, ev: ShadowRootEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void\n\n  listen(\n    element: Window | Document | HTMLElement | ShadowRoot,\n    type: string,\n    listener: (ev: any) => any,\n    options?: boolean | AddEventListenerOptions\n  ) {\n    element.addEventListener(type, listener, options)\n\n    const stop = () => element.removeEventListener(type, listener, options)\n    this.listeners.push(stop)\n  }\n}\n"],"names":["EventController","constructor","host","this","listeners","addController","hostDisconnected","forEach","stop","listen","element","type","listener","options","addEventListener","push","removeEventListener"],"mappings":"MAMaA,EAGXC,YAAYC,GAFJC,KAASC,UAAsB,GAGrCF,EAAKG,cAAcF,MAGrBG,mBACEH,KAAKC,UAAUG,SAAQC,GAAQA,MAC/BL,KAAKC,UAAY,GA+BnBK,OACEC,EACAC,EACAC,EACAC,GAEAH,EAAQI,iBAAiBH,EAAMC,EAAUC,GAGzCV,KAAKC,UAAUW,MADF,IAAML,EAAQM,oBAAoBL,EAAMC,EAAUC"}

package/lib/Fieldset.js

@@ -1,2 +1,2 @@
-import{_ as e,n as r}from"./query-assigned-elements-37b095c4.js";import{r as t,s as o,$ as s}from"./lit-element-74b6bb4b.js";import{e as i}from"./property-03f59dce.js";import{l as n}from"./if-defined-fe657a02.js";import{S as l}from"./SlotController-683d0e7c.js";import{s as a}from"./Component-9d373ef3.js";import{s as d}from"./FormField-50bd73d5.js";import"./EventController-d99ebeef.js";const h=t`fieldset{border:none}.n-label-container{margin-block-end:var(--n-space-s)}`;let m=class extends o{constructor(){super(...arguments),this.errorSlot=new l(this,"error"),this.hintSlot=new l(this,"hint"),this.label=""}render(){const{hasError:e}=this;return s`<fieldset aria-invalid="${n(e?"true":void 0)}" aria-describedby="${n(e?"error":void 0)}"><legend class="n-label-container"><slot class="n-label" name="label">${this.label}</slot><div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div></legend><slot></slot><div class="n-caption n-error" id="error" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div></fieldset>`}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}};m.styles=[a,d,h],e([i()],m.prototype,"label",void 0),e([i()],m.prototype,"hint",void 0),e([i()],m.prototype,"error",void 0),m=e([r("nord-fieldset")],m);var p=m;export{p as default};
+import{_ as e,n as r}from"./query-assigned-elements-ef860822.js";import{r as t,s as o,$ as s}from"./lit-element-e382250e.js";import{e as n}from"./property-03f59dce.js";import{S as i}from"./SlotController-ea6eff46.js";import{c as l}from"./cond-ed8742b5.js";import{s as a}from"./Component-fa316972.js";import{s as d}from"./FormField-44e865a4.js";import"./EventController-d99ebeef.js";const h=t`fieldset{border:none}.n-label-container{margin-block-end:var(--n-space-s)}`;let m=class extends o{constructor(){super(...arguments),this.errorSlot=new i(this,"error"),this.hintSlot=new i(this,"hint"),this.label=""}render(){const{hasError:e}=this;return s`<fieldset aria-invalid="${l(e,"true")}" aria-describedby="${l(e,"error")}"><legend class="n-label-container"><slot class="n-label" name="label">${this.label}</slot><div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div></legend><slot></slot><div class="n-caption n-error" id="error" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div></fieldset>`}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}};m.styles=[a,d,h],e([n()],m.prototype,"label",void 0),e([n()],m.prototype,"hint",void 0),e([n()],m.prototype,"error",void 0),m=e([r("nord-fieldset")],m);var p=m;export{p as default};
 //# sourceMappingURL=Fieldset.js.map

package/lib/Fieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.js","sources":["../src/fieldset/Fieldset.ts"],"sourcesContent":["import { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Fieldset.css\"\n\n/**\n * Fieldset is used for grouping sets of input components.\n * It is necessary to use a fieldset with radio and checkbox components.\n * It can also be useful for logically grouping other types of inputs.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the fieldset.\n * @slot error - Optional slot that holds error text for the fieldset.\n */\n@customElement(\"nord-fieldset\")\nexport default class Fieldset extends LitElement {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  private errorSlot = new SlotController(this, \"error\")\n  private hintSlot = new SlotController(this, \"hint\")\n\n  /**\n   * Label for the fieldset.\n   */\n  @property() label: string = \"\"\n\n  /**\n   * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n   */\n  @property() hint?: string\n\n  /**\n   * Optional error to be shown with the fieldset. Alternatively use the error slot.\n   */\n  @property() error?: string\n\n  render() {\n    const { hasError } = this\n\n    return html`\n      <fieldset\n        aria-invalid=${ifDefined(hasError ? \"true\" : undefined)}\n        aria-describedby=${ifDefined(hasError ? \"error\" : undefined)}\n      >\n        <legend class=\"n-label-container\">\n          <slot class=\"n-label\" name=\"label\">${this.label}</slot>\n\n          <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n            <slot name=\"hint\">${this.hint}</slot>\n          </div>\n        </legend>\n\n        <slot></slot>\n\n        <div class=\"n-caption n-error\" id=\"error\" role=\"alert\" ?hidden=${!this.hasError}>\n          <slot name=\"error\">${this.error}</slot>\n        </div>\n      </fieldset>\n    `\n  }\n\n  protected get hasHint() {\n    return Boolean(this.hint) || this.hintSlot.hasContent\n  }\n\n  protected get hasError() {\n    return Boolean(this.error) || this.errorSlot.hasContent\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-fieldset\": Fieldset\n  }\n}\n"],"names":["Fieldset","LitElement","constructor","this","SlotController","render","hasError","html","ifDefined","undefined","label","hasHint","hint","error","Boolean","hintSlot","hasContent","errorSlot","componentStyle","formFieldStyle","style","__decorate","property","customElement"],"mappings":"0dAqBA,IAAqBA,EAArB,cAAsCC,EAAtCC,kCAGUC,eAAY,IAAIC,EAAeD,KAAM,SACrCA,cAAW,IAAIC,EAAeD,KAAM,QAKhCA,WAAgB,GAY5BE,SACE,MAAMC,SAAEA,GAAaH,KAErB,OAAOI,CAAI,2BAEQC,EAAUF,EAAW,YAASG,yBAC1BD,EAAUF,EAAW,aAAUG,4EAGXN,KAAKO,uDAEDP,KAAKQ,8BACxBR,KAAKS,2GAMqCT,KAAKG,gCAChDH,KAAKU,gCAMpBF,cACZ,OAAOG,QAAQX,KAAKS,OAAST,KAAKY,SAASC,WAG/BV,eACZ,OAAOQ,QAAQX,KAAKU,QAAUV,KAAKc,UAAUD,aAlDxChB,SAAS,CAACkB,EAAgBC,EAAgBC,GAQrCC,GAAXC,iCAKWD,GAAXC,gCAKWD,GAAXC,iCAnBkBtB,KADpBuB,EAAc,kBACMvB,SAAAA"}
+{"version":3,"file":"Fieldset.js","sources":["../src/fieldset/Fieldset.ts"],"sourcesContent":["import { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Fieldset.css\"\n\n/**\n * Fieldset is used for grouping sets of input components.\n * It is necessary to use a fieldset with radio and checkbox components.\n * It can also be useful for logically grouping other types of inputs.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the fieldset.\n * @slot error - Optional slot that holds error text for the fieldset.\n */\n@customElement(\"nord-fieldset\")\nexport default class Fieldset extends LitElement {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  private errorSlot = new SlotController(this, \"error\")\n  private hintSlot = new SlotController(this, \"hint\")\n\n  /**\n   * Label for the fieldset.\n   */\n  @property() label: string = \"\"\n\n  /**\n   * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n   */\n  @property() hint?: string\n\n  /**\n   * Optional error to be shown with the fieldset. Alternatively use the error slot.\n   */\n  @property() error?: string\n\n  render() {\n    const { hasError } = this\n\n    return html`\n      <fieldset aria-invalid=${cond(hasError, \"true\")} aria-describedby=${cond(hasError, \"error\")}>\n        <legend class=\"n-label-container\">\n          <slot class=\"n-label\" name=\"label\">${this.label}</slot>\n\n          <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n            <slot name=\"hint\">${this.hint}</slot>\n          </div>\n        </legend>\n\n        <slot></slot>\n\n        <div class=\"n-caption n-error\" id=\"error\" role=\"alert\" ?hidden=${!this.hasError}>\n          <slot name=\"error\">${this.error}</slot>\n        </div>\n      </fieldset>\n    `\n  }\n\n  protected get hasHint() {\n    return Boolean(this.hint) || this.hintSlot.hasContent\n  }\n\n  protected get hasError() {\n    return Boolean(this.error) || this.errorSlot.hasContent\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-fieldset\": Fieldset\n  }\n}\n"],"names":["Fieldset","LitElement","constructor","this","errorSlot","SlotController","hintSlot","label","render","hasError","html","cond","hasHint","hint","error","Boolean","hasContent","styles","componentStyle","formFieldStyle","style","__decorate","property","prototype","customElement"],"mappings":"odAqBA,IAAqBA,EAArB,cAAsCC,EAAtCC,kCAGUC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAQG,SAAG,IAAID,EAAeF,KAAM,QAKhCA,KAAKI,MAAW,GAY5BC,SACE,MAAMC,SAAEA,GAAaN,KAErB,OAAOO,CAAI,2BACgBC,EAAKF,EAAU,8BAA4BE,EAAKF,EAAU,kFAE1CN,KAAKI,uDAEDJ,KAAKS,8BACxBT,KAAKU,2GAMqCV,KAAKM,gCAChDN,KAAKW,gCAMpBF,cACZ,OAAOG,QAAQZ,KAAKU,OAASV,KAAKG,SAASU,WAG/BP,eACZ,OAAOM,QAAQZ,KAAKW,QAAUX,KAAKC,UAAUY,aA/CxChB,EAAMiB,OAAG,CAACC,EAAgBC,EAAgBC,GAQrCC,EAAA,CAAXC,KAA6BtB,EAAAuB,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBtB,EAAAuB,UAAA,YAAA,GAKbF,EAAA,CAAXC,KAAyBtB,EAAAuB,UAAA,aAAA,GAnBPvB,EAAQqB,EAAA,CAD5BG,EAAc,kBACMxB,SAAAA"}