@nordhealth/components 3.9.0 → 3.11.0

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 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m8.29008 12.3413 1.41 1.42-3.96 3.95c-.2.19-.45.29-.71.29s-.51-.1-.71-.29l-3.990002-4 1.410002-1.42 2.26 2.25v-12.54002h2v12.63002zm11.38002-6.05002-4.01-4c-.39-.39-1.02-.39-1.41 0l-3.96 3.95 1.41 1.42 2.29-2.29v12.63002h2v-12.54002l2.26 2.25 1.41-1.42z\" fill=\"currentColor\"/></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 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18.0025 4v8c0 1.1-.9 2-2 2h-12.59l3 3-1.41 1.41-4.71-4.7c-.39-.39-.39-1.02 0-1.41l4.71-4.71 1.41 1.41-3 3h12.59v-8h-4v-2h4c1.1 0 2 .9 2 2z\" fill=\"currentColor\"/></svg>'\nexport const title = \"keyboard-return\"\nexport const tags = \"nordicon keyboard return key shortcut\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18 2h-10.54c-.58 0-1.14.25-1.52.7l-5.14 6c-.65.75-.65 1.85 0 2.6l5.14 6c.38.44.93.7 1.52.7h10.54c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm0 14h-10.54l-5.14-6 5.14-6h10.54zm-9.54-3.88 2.12-2.12-2.12-2.12 1.41-1.41 2.12 2.12 2.12-2.12 1.41 1.41-2.12 2.12 2.12 2.12-1.41 1.41-2.12-2.12-2.12 2.12z\" fill=\"currentColor\"/></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 * @cssprop [--n-command-menu-inline-size=640px] - Controls the max inline size, or width, of the command menu.\n * @cssprop [--n-command-menu-block-size=290px] - Controls the max block size, or height, of the command menu.\n * @cssprop [--n-command-menu-block-start=16%] - Controls the command menu offset from the block start, or top, of the screen.\n *\n * @localization instructions - Instructions that offer guidance on how to use the command menu.\n * @localization inputLabel - Accessible label given to the command menu's input.\n * @localization footerArrowKeys - Describes what the arrow keys do.\n * @localization footerEnterKey - Describes what the enter key does.\n * @localization footerEscapeKey - Describes what the escape key does.\n * @localization footerBackspaceKey - Describes what the backspace key does.\n * @localization noResults - A message shown when there are no matching results.\n * @localization tip - A hint tip that describes some approaches to find a command when there are no matching results.\n * @localization placeholder - Hint text to display in the Command Menu search field.\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   * 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: ICommandMenuAction[\"parent\"]\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.localize.term(\"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=${this.open && command.id === this.selected?.id}\n              @click=${() => this.select(command)}\n              role=\"option\"\n              aria-selected=${cond(command.id === this.selected?.id, \"true\")}\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?: ICommandMenuAction[\"parent\"]) {\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    // sort commands in the same way as they are visually displayed\n    // this is a quick fix for cases where the visual order of commands is different from order in the commands array\n    // without ordering, the up/down arrow keys can end up navigating out of visual order.\n    // but it feels wasteful to groupBy here, then discard the result, only to re-calculate in render.\n    // TODO: is there a way to do this without grouping twice?\n    const groupedBySection = groupBy(this.commands, \"section\")\n    const ordered = [...groupedBySection.values()].flat()\n\n    this.filteredCommands = ordered.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      // use looser equality check so that it handles `null` as command's `parent` value\n      // eslint-disable-next-line eqeqeq\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","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","enterIcon.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","ordered","values","flat","filter","keywords","searchSpace","matcher","every","includes","styles","componentStyle","style","__decorate","property","type","Boolean","prototype","attribute","state","observe","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 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m8.29008 12.3413 1.41 1.42-3.96 3.95c-.2.19-.45.29-.71.29s-.51-.1-.71-.29l-3.990002-4 1.410002-1.42 2.26 2.25v-12.54002h2v12.63002zm11.38002-6.05002-4.01-4c-.39-.39-1.02-.39-1.41 0l-3.96 3.95 1.41 1.42 2.29-2.29v12.63002h2v-12.54002l2.26 2.25 1.41-1.42z\" fill=\"currentColor\"/></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 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18.0025 4v8c0 1.1-.9 2-2 2h-12.59l3 3-1.41 1.41-4.71-4.7c-.39-.39-.39-1.02 0-1.41l4.71-4.71 1.41 1.41-3 3h12.59v-8h-4v-2h4c1.1 0 2 .9 2 2z\" fill=\"currentColor\"/></svg>'\nexport const title = \"keyboard-return\"\nexport const tags = \"nordicon keyboard return key shortcut\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18 2h-10.54c-.58 0-1.14.25-1.52.7l-5.14 6c-.65.75-.65 1.85 0 2.6l5.14 6c.38.44.93.7 1.52.7h10.54c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm0 14h-10.54l-5.14-6 5.14-6h10.54zm-9.54-3.88 2.12-2.12-2.12-2.12 1.41-1.41 2.12 2.12 2.12-2.12 1.41 1.41-2.12 2.12 2.12 2.12-1.41 1.41-2.12-2.12-2.12 2.12z\" fill=\"currentColor\"/></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 * @cssprop [--n-command-menu-inline-size=640px] - Controls the max inline size, or width, of the command menu.\n * @cssprop [--n-command-menu-block-size=290px] - Controls the max block size, or height, of the command menu.\n * @cssprop [--n-command-menu-block-start=16%] - Controls the command menu offset from the block start, or top, of the screen.\n *\n * @localization instructions - Instructions that offer guidance on how to use the command menu.\n * @localization inputLabel - Accessible label given to the command menu's input.\n * @localization footerArrowKeys - Describes what the arrow keys do.\n * @localization footerEnterKey - Describes what the enter key does.\n * @localization footerEscapeKey - Describes what the escape key does.\n * @localization footerBackspaceKey - Describes what the backspace key does.\n * @localization noResults - A message shown when there are no matching results.\n * @localization tip - A hint tip that describes some approaches to find a command when there are no matching results.\n * @localization placeholder - Hint text to display in the Command Menu search field.\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({ reflect: true, type: Boolean }) open = false\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: ICommandMenuAction[\"parent\"]\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.localize.term(\"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=${this.open && command.id === this.selected?.id}\n              @click=${() => this.select(command)}\n              role=\"option\"\n              aria-selected=${cond(command.id === this.selected?.id, \"true\")}\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?: ICommandMenuAction[\"parent\"]) {\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    // sort commands in the same way as they are visually displayed\n    // this is a quick fix for cases where the visual order of commands is different from order in the commands array\n    // without ordering, the up/down arrow keys can end up navigating out of visual order.\n    // but it feels wasteful to groupBy here, then discard the result, only to re-calculate in render.\n    // TODO: is there a way to do this without grouping twice?\n    const groupedBySection = groupBy(this.commands, \"section\")\n    const ordered = [...groupedBySection.values()].flat()\n\n    this.filteredCommands = ordered.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      // use looser equality check so that it handles `null` as command's `parent` value\n      // eslint-disable-next-line eqeqeq\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","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","enterIcon.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","ordered","values","flat","filter","keywords","searchSpace","matcher","every","includes","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","attribute","state","observe","customElement"],"mappings":"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"}

package/lib/DatePicker.js

@@ -1,2 +1,2 @@
-import{i as t,x as e,A as i,_ as o,e as a,s}from"./query-assigned-elements-92ce7494.js";import{n as r}from"./property-c78323b1.js";import{i as n}from"./query-36bfe0e4.js";import{n as l}from"./ref-99418ab4.js";import{l as d}from"./if-defined-cccde88f.js";import{c as p}from"./interface-close-small-f26b0299.js";import{F as c}from"./FocusableMixin-d30213b4.js";import{F as h}from"./FormAssociatedMixin-a278fda4.js";import{I as m}from"./InputMixin-83b5bd46.js";import{o as u,p as v,a as b}from"./dates-5b651fbe.js";import{N as f}from"./events-d9666e88.js";import{S as g,i as j}from"./Calendar-3170b9d4.js";import{LocalizeController as y}from"./LocalizeController.js";import $ from"./Icon.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-2220e77b.js";import"./Stack.js";import{s as k}from"./Component-2253424f.js";import{s as D}from"./FormField-87551be2.js";import{R as x,s as z}from"./TextField-2d778949.js";import{isoAdapter as w}from"./date-adapter.js";import{c as C}from"./cond-bb9ee891.js";import{S as F}from"./SizeMixin-ab074eff.js";import"./directive-e9ce14b4.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./state-d31c6912.js";import"./class-map-512f0bc1.js";import"./collection-511dcfac.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-f35f5476.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./DateSelectEvent.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./IconManager.js";import"./style-map-f8a1c8d5.js";import"./AutocompleteMixin-5a7e10b2.js";import"./LightDomController-5388d84c.js";import"./Spinner.js";import"./positioning-2346bdd6.js";import"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./ScrollbarController-773c79f4.js";var S=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});const A=t`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;$.registerIcon(S),$.registerIcon(p);const I=()=>!1,L=()=>!1;let B=class extends(F(h(x(m(c(s)))))){constructor(){super(...arguments),this.swipe=new g(this,{target:()=>this.popout,matchesGesture:j,onSwipeEnd:()=>this.hide()}),this.localize=new y(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.min="",this.max="",this.firstDayOfWeek=1,this.dateAdapter=w,this.isDateDisabled=I,this.isDateHighlighted=L,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.dispatchEvent(new f("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new f("focus"))},this.handleInputChange=t=>{const e=t.target,i=this.dateAdapter.parse(e.value,u);(i||""===e.value)&&this.setValue(i)}}get valueAsDate(){return v(this.value)}set valueAsDate(t){this.value=t?b(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:NaN}set valueAsNumber(t){this.value=t?b(new Date(t)):""}render(){const{valueAsDate:t}=this,o=t?this.dateAdapter.format(t):"";return e`<nord-input class="n-date-picker-input" value="${o}" label="${d(this.label)}" hint="${d(this.hint)}" error="${C(this.error,this.error)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hide-label="${this.hideLabel}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${l(this.focusableRef)} aria-invalid="${C(this.error,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?i:e`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?i:e`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?e`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:i}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{timeZone:"UTC",day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?b(t):"",this.dispatchEvent(new f("change"))}hide(t){this.popout.hide(t)}show(){this.popout.show()}};B.styles=[k,D,z,A],o([n(".n-date-picker-toggle",!0)],B.prototype,"toggleButton",void 0),o([n(".n-date-picker-close-button",!0)],B.prototype,"closeButton",void 0),o([n("nord-calendar",!0)],B.prototype,"calendar",void 0),o([n('[role="dialog"]',!0)],B.prototype,"popout",void 0),o([r()],B.prototype,"value",void 0),o([r({type:Boolean,reflect:!0})],B.prototype,"open",void 0),o([r()],B.prototype,"min",void 0),o([r()],B.prototype,"max",void 0),o([r({attribute:"first-day-of-week",type:Number})],B.prototype,"firstDayOfWeek",void 0),o([r({attribute:!1})],B.prototype,"dateAdapter",void 0),o([r({attribute:!1})],B.prototype,"isDateDisabled",void 0),o([r({attribute:!1})],B.prototype,"isDateHighlighted",void 0),o([r({reflect:!0,type:Boolean})],B.prototype,"expand",void 0),B=o([a("nord-date-picker")],B);var E=B;export{E as default};
+import{i as t,x as e,A as i,_ as o,e as a,s}from"./query-assigned-elements-92ce7494.js";import{n as r}from"./property-c78323b1.js";import{i as n}from"./query-36bfe0e4.js";import{n as l}from"./ref-99418ab4.js";import{l as d}from"./if-defined-cccde88f.js";import{c as p}from"./interface-close-small-f26b0299.js";import{F as c}from"./FocusableMixin-d30213b4.js";import{F as h}from"./FormAssociatedMixin-3fa55d53.js";import{I as m}from"./InputMixin-83b5bd46.js";import{o as u,p as v,a as b}from"./dates-5b651fbe.js";import{N as f}from"./events-d9666e88.js";import{S as g,i as j}from"./Calendar-1517347e.js";import{LocalizeController as y}from"./LocalizeController.js";import $ from"./Icon.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-2f9d860d.js";import"./Stack.js";import{s as k}from"./Component-2253424f.js";import{s as D}from"./FormField-87551be2.js";import{R as x,s as z}from"./TextField-2d778949.js";import{isoAdapter as w}from"./date-adapter.js";import{c as C}from"./cond-bb9ee891.js";import{S as F}from"./SizeMixin-ab074eff.js";import"./directive-e9ce14b4.js";import"./FormDataController-592ff3dd.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./state-d31c6912.js";import"./class-map-512f0bc1.js";import"./collection-511dcfac.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-f35f5476.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./DateSelectEvent.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./IconManager.js";import"./style-map-f8a1c8d5.js";import"./AutocompleteMixin-5a7e10b2.js";import"./LightDomController-5388d84c.js";import"./Spinner.js";import"./positioning-2346bdd6.js";import"./LightDismissController-11ae4745.js";import"./ShortcutController-87615e31.js";import"./ScrollbarController-773c79f4.js";var S=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});const A=t`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;$.registerIcon(S),$.registerIcon(p);const I=()=>!1,L=()=>!1;let B=class extends(F(h(x(m(c(s)))))){constructor(){super(...arguments),this.swipe=new g(this,{target:()=>this.popout,matchesGesture:j,onSwipeEnd:()=>this.hide()}),this.localize=new y(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=1,this.dateAdapter=w,this.isDateDisabled=I,this.isDateHighlighted=L,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.dispatchEvent(new f("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new f("focus"))},this.handleInputChange=t=>{const e=t.target,i=this.dateAdapter.parse(e.value,u);(i||""===e.value)&&this.setValue(i)}}get valueAsDate(){return v(this.value)}set valueAsDate(t){this.value=t?b(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:NaN}set valueAsNumber(t){this.value=t?b(new Date(t)):""}render(){const{valueAsDate:t}=this,o=t?this.dateAdapter.format(t):"";return e`<nord-input class="n-date-picker-input" value="${o}" label="${d(this.label)}" hint="${d(this.hint)}" error="${C(this.error,this.error)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hide-label="${this.hideLabel}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${l(this.focusableRef)} aria-invalid="${C(this.error,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?i:e`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?i:e`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?e`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:i}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${d(this.min)}" max="${d(this.max)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{timeZone:"UTC",day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?b(t):"",this.dispatchEvent(new f("change"))}hide(t){this.popout.hide(t)}show(){this.popout.show()}};B.styles=[k,D,z,A],o([n(".n-date-picker-toggle",!0)],B.prototype,"toggleButton",void 0),o([n(".n-date-picker-close-button",!0)],B.prototype,"closeButton",void 0),o([n("nord-calendar",!0)],B.prototype,"calendar",void 0),o([n('[role="dialog"]',!0)],B.prototype,"popout",void 0),o([r()],B.prototype,"value",void 0),o([r({type:Boolean,reflect:!0})],B.prototype,"open",void 0),o([r({reflect:!0})],B.prototype,"min",void 0),o([r({reflect:!0})],B.prototype,"max",void 0),o([r({reflect:!0,attribute:"first-day-of-week",type:Number})],B.prototype,"firstDayOfWeek",void 0),o([r({attribute:!1})],B.prototype,"dateAdapter",void 0),o([r({attribute:!1})],B.prototype,"isDateDisabled",void 0),o([r({attribute:!1})],B.prototype,"isDateHighlighted",void 0),o([r({reflect:!0,type:Boolean})],B.prototype,"expand",void 0),B=o([a("nord-date-picker")],B);var E=B;export{E 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","../src/date-picker/DatePicker.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.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 { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport type Button from \"../button/Button.js\"\nimport type Popout from \"../popout/Popout.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../input/Input.js\"\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"../popout/Popout.js\"\nimport \"../stack/Stack.js\"\nimport \"../calendar/Calendar.js\"\n\nimport type { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DatePredicate } 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\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst isDateDisabled = () => false\nconst isDateHighlighted = () => 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 * @localization modalHeading - Heading for the date picker's modal.\n * @localization closeLabel - Accessible label for the close button.\n * @localization buttonLabel - Accessible label for the toggle button that opens the date picker modal.\n * @localization selectedDateMessage - Describes the selected date. This message is appended to the toggle button label when a date is selected.\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends SizeMixin(\n  FormAssociatedMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(`.n-date-picker-toggle`, true) private toggleButton!: Button\n  @query(`.n-date-picker-close-button`, true) private closeButton!: HTMLButtonElement\n  @query(`nord-calendar`, true) private calendar!: Calendar\n  @query(`[role=\"dialog\"]`, true) private popout!: Popout\n\n  private swipe = new SwipeController(this, {\n    target: () => this.popout,\n    matchesGesture: isDownwardsSwipe,\n    onSwipeEnd: () => this.hide(),\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  /**\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   * Controls whether date picker dialog is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\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   * 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: DatePredicate = isDateDisabled\n\n  /**\n   * Controls which days are highlighted with a small indicator.\n   * Returning `false` will not show an indicator.\n   * Returning `true` will show the indicator, but without an accessible label. Therefore\n   * Returning a string will show the indicator, and use the string as accessible label.\n   * It is recommended to return a string rather than `true` whenever possible.\n   */\n  @property({ attribute: false }) isDateHighlighted: (date: Date) => string | boolean = isDateHighlighted\n\n  /**\n   * Controls whether the date picker expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n    return html`\n      <nord-input\n        class=\"n-date-picker-input\"\n        value=${formattedDate}\n        label=${ifDefined(this.label)}\n        hint=${ifDefined(this.hint)}\n        error=${cond(this.error, this.error)}\n        placeholder=${ifDefined(this.placeholder)}\n        id=${this.inputId}\n        size=${this.size}\n        ?expand=${this.expand}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        ?readonly=${this.readonly}\n        ?hide-label=${this.hideLabel}\n        disallow-pattern=\"[^0-9./-]\"\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @input=${this.handleInputChange}\n        ${ref(this.focusableRef)}\n        aria-invalid=${cond(this.error, \"true\")}\n        aria-describedby=${ifDefined(this.getDescribedBy())}\n      >\n        ${!this.hintSlot.isEmpty ? html`<slot name=\"hint\" slot=\"hint\"></slot>` : nothing}\n        ${!this.labelSlot.isEmpty ? html`<slot name=\"label\" slot=\"label\"></slot>` : nothing}\n        <nord-button\n          size=${this.size}\n          ?disabled=${this.disabled || this.readonly}\n          slot=\"end\"\n          class=\"n-date-picker-toggle\"\n          aria-controls=\"popout\"\n          type=\"button\"\n        >\n          <nord-icon name=\"interface-calendar\"></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        </nord-button>\n      </nord-input>\n      <nord-popout\n        id=\"popout\"\n        anchor=${this.inputId}\n        align=\"end\"\n        position=\"block-end\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        ?open=${this.open}\n        @open=${this.handleOpen}\n        @close=${this.handleClose}\n        aria-labelledby=\"header\"\n      >\n        <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n        <nord-stack class=\"n-date-picker-header\" direction=\"horizontal\" justify-content=\"space-between\">\n          <div class=\"n-date-picker-heading\" id=\"header\">${this.localize.term(\"modalHeading\")}</div>\n          <nord-button\n            class=\"n-date-picker-close-button\"\n            type=\"button\"\n            size=\"s\"\n            variant=\"plain\"\n            @click=${this.handleClose}\n          >\n            <nord-visually-hidden>${this.localize.term(\"closeLabel\")}</nord-visually-hidden>\n            <nord-icon name=\"interface-close-small\"></nord-icon>\n          </nord-button>\n        </nord-stack>\n\n        <nord-calendar\n          class=\"n-date-picker-calendar\"\n          expand\n          value=${this.value}\n          min=${this.min}\n          max=${this.max}\n          .firstDayOfWeek=${this.firstDayOfWeek}\n          .isDateDisabled=${this.isDateDisabled}\n          .isDateHighlighted=${this.isDateHighlighted}\n          @change=${this.handleDaySelect}\n        ></nord-calendar>\n\n        <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n      </nord-popout>\n    `\n  }\n\n  private createDateFormatters() {\n    this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n      timeZone: \"UTC\",\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 handleOpen() {\n    this.open = true\n    this.calendar.focus({ target: \"month\" })\n  }\n\n  private handleClose() {\n    this.open = false\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    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  /**\n   * Hide the date picker programmatically.\n   * @param moveFocusToButton A boolean option to move the focus to the original button that opens the popout.\n   */\n  hide(moveFocusToButton?: boolean) {\n    this.popout.hide(moveFocusToButton)\n  }\n\n  /**\n   * Show the date picker programmatically.\n   */\n  show() {\n    this.popout.show()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-date-picker\": DatePicker\n  }\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","isDateDisabled","isDateHighlighted","DatePicker","SizeMixin","FormAssociatedMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","swipe","SwipeController","target","popout","matchesGesture","isDownwardsSwipe","onSwipeEnd","hide","localize","LocalizeController","onLangChange","createDateFormatters","value","open","min","max","firstDayOfWeek","dateAdapter","isoAdapter","expand","handleDaySelect","e","stopPropagation","setValue","date","handleBlur","event","dispatchEvent","NordEvent","handleFocus","handleInputChange","parsed","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","_b","_a","getTime","NaN","Date","render","formattedDate","format","html","ifDefined","label","hint","cond","error","placeholder","inputId","size","disabled","required","readonly","hideLabel","ref","focusableRef","getDescribedBy","hintSlot","isEmpty","nothing","labelSlot","term","dateFormatLong","handleOpen","handleClose","focusLast","focusFirst","Intl","DateTimeFormat","resolvedLang","timeZone","day","month","year","closeButton","focus","calendar","moveFocusToButton","show","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","Number","customElement"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../src/date-picker/DatePicker.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.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 { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport type Button from \"../button/Button.js\"\nimport type Popout from \"../popout/Popout.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../input/Input.js\"\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"../popout/Popout.js\"\nimport \"../stack/Stack.js\"\nimport \"../calendar/Calendar.js\"\n\nimport type { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DatePredicate } 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\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst isDateDisabled = () => false\nconst isDateHighlighted = () => 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 * @localization modalHeading - Heading for the date picker's modal.\n * @localization closeLabel - Accessible label for the close button.\n * @localization buttonLabel - Accessible label for the toggle button that opens the date picker modal.\n * @localization selectedDateMessage - Describes the selected date. This message is appended to the toggle button label when a date is selected.\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends SizeMixin(\n  FormAssociatedMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(`.n-date-picker-toggle`, true) private toggleButton!: Button\n  @query(`.n-date-picker-close-button`, true) private closeButton!: HTMLButtonElement\n  @query(`nord-calendar`, true) private calendar!: Calendar\n  @query(`[role=\"dialog\"]`, true) private popout!: Popout\n\n  private swipe = new SwipeController(this, {\n    target: () => this.popout,\n    matchesGesture: isDownwardsSwipe,\n    onSwipeEnd: () => this.hide(),\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  /**\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   * Controls whether date picker dialog is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\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({ reflect: true }) 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({ reflect: true }) max?: string\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({ reflect: true, attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek =\n    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: DatePredicate = isDateDisabled\n\n  /**\n   * Controls which days are highlighted with a small indicator.\n   * Returning `false` will not show an indicator.\n   * Returning `true` will show the indicator, but without an accessible label. Therefore\n   * Returning a string will show the indicator, and use the string as accessible label.\n   * It is recommended to return a string rather than `true` whenever possible.\n   */\n  @property({ attribute: false }) isDateHighlighted: (date: Date) => string | boolean = isDateHighlighted\n\n  /**\n   * Controls whether the date picker expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n    return html`\n      <nord-input\n        class=\"n-date-picker-input\"\n        value=${formattedDate}\n        label=${ifDefined(this.label)}\n        hint=${ifDefined(this.hint)}\n        error=${cond(this.error, this.error)}\n        placeholder=${ifDefined(this.placeholder)}\n        id=${this.inputId}\n        size=${this.size}\n        ?expand=${this.expand}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        ?readonly=${this.readonly}\n        ?hide-label=${this.hideLabel}\n        disallow-pattern=\"[^0-9./-]\"\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @input=${this.handleInputChange}\n        ${ref(this.focusableRef)}\n        aria-invalid=${cond(this.error, \"true\")}\n        aria-describedby=${ifDefined(this.getDescribedBy())}\n      >\n        ${!this.hintSlot.isEmpty ? html`<slot name=\"hint\" slot=\"hint\"></slot>` : nothing}\n        ${!this.labelSlot.isEmpty ? html`<slot name=\"label\" slot=\"label\"></slot>` : nothing}\n        <nord-button\n          size=${this.size}\n          ?disabled=${this.disabled || this.readonly}\n          slot=\"end\"\n          class=\"n-date-picker-toggle\"\n          aria-controls=\"popout\"\n          type=\"button\"\n        >\n          <nord-icon name=\"interface-calendar\"></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        </nord-button>\n      </nord-input>\n      <nord-popout\n        id=\"popout\"\n        anchor=${this.inputId}\n        align=\"end\"\n        position=\"block-end\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        ?open=${this.open}\n        @open=${this.handleOpen}\n        @close=${this.handleClose}\n        aria-labelledby=\"header\"\n      >\n        <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n        <nord-stack class=\"n-date-picker-header\" direction=\"horizontal\" justify-content=\"space-between\">\n          <div class=\"n-date-picker-heading\" id=\"header\">${this.localize.term(\"modalHeading\")}</div>\n          <nord-button\n            class=\"n-date-picker-close-button\"\n            type=\"button\"\n            size=\"s\"\n            variant=\"plain\"\n            @click=${this.handleClose}\n          >\n            <nord-visually-hidden>${this.localize.term(\"closeLabel\")}</nord-visually-hidden>\n            <nord-icon name=\"interface-close-small\"></nord-icon>\n          </nord-button>\n        </nord-stack>\n\n        <nord-calendar\n          class=\"n-date-picker-calendar\"\n          expand\n          value=${this.value}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          .firstDayOfWeek=${this.firstDayOfWeek}\n          .isDateDisabled=${this.isDateDisabled}\n          .isDateHighlighted=${this.isDateHighlighted}\n          @change=${this.handleDaySelect}\n        ></nord-calendar>\n\n        <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n      </nord-popout>\n    `\n  }\n\n  private createDateFormatters() {\n    this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n      timeZone: \"UTC\",\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 handleOpen() {\n    this.open = true\n    this.calendar.focus({ target: \"month\" })\n  }\n\n  private handleClose() {\n    this.open = false\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    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  /**\n   * Hide the date picker programmatically.\n   * @param moveFocusToButton A boolean option to move the focus to the original button that opens the popout.\n   */\n  hide(moveFocusToButton?: boolean) {\n    this.popout.hide(moveFocusToButton)\n  }\n\n  /**\n   * Show the date picker programmatically.\n   */\n  show() {\n    this.popout.show()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-date-picker\": DatePicker\n  }\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","isDateDisabled","isDateHighlighted","DatePicker","SizeMixin","FormAssociatedMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","swipe","SwipeController","target","popout","matchesGesture","isDownwardsSwipe","onSwipeEnd","hide","localize","LocalizeController","onLangChange","createDateFormatters","value","open","firstDayOfWeek","dateAdapter","isoAdapter","expand","handleDaySelect","e","stopPropagation","setValue","date","handleBlur","event","dispatchEvent","NordEvent","handleFocus","handleInputChange","parsed","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","_b","_a","getTime","NaN","Date","render","formattedDate","format","html","ifDefined","label","hint","cond","error","placeholder","inputId","size","disabled","required","readonly","hideLabel","ref","focusableRef","getDescribedBy","hintSlot","isEmpty","nothing","labelSlot","term","dateFormatLong","handleOpen","handleClose","focusLast","min","max","focusFirst","Intl","DateTimeFormat","resolvedLang","timeZone","day","month","year","closeButton","focus","calendar","moveFocusToButton","show","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","Number","customElement"],"mappings":"qlEAAe,iQACM,0BACD,g/BCsCpBA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAElB,MAAMC,EAAiB,KAAM,EACvBC,EAAoB,KAAM,EAiBjB,IAAMC,EAAN,cAAyBC,EACtCC,EAAoBC,EAAcC,EAAWC,EAAeC,QAD/C,WAAAC,uBAULC,KAAAC,MAAQ,IAAIC,EAAgBF,KAAM,CACxCG,OAAQ,IAAMH,KAAKI,OACnBC,eAAgBC,EAChBC,WAAY,IAAMP,KAAKQ,SAGjBR,KAAAS,SAAW,IAAIC,EAAuCV,KAAM,CAClEW,aAAc,IAAMX,KAAKY,yBAgBfZ,KAAKa,MAAW,GA2BgBb,KAAIc,MAAG,EAkBwBd,KAAAe,eACxD,EAQaf,KAAWgB,YAAgBC,EAM3BjB,KAAcV,eAAkBA,EAShCU,KAAiBT,kBAAqCA,EAK1CS,KAAMkB,QAAG,EAkH7ClB,KAAAmB,gBAAmBC,IACzBA,EAAEC,kBACFrB,KAAKsB,SAASF,EAAEG,MAChBvB,KAAKQ,MAAM,EAYLR,KAAAwB,WAAcC,IACpBA,EAAMJ,kBACNrB,KAAK0B,cAAc,IAAIC,EAAU,QAAQ,EAGnC3B,KAAA4B,YAAeH,IACrBA,EAAMJ,kBACNrB,KAAK0B,cAAc,IAAIC,EAAU,SAAS,EAGpC3B,KAAA6B,kBAAqBT,IAC3B,MAAMjB,EAASiB,EAAEjB,OAEX2B,EAAS9B,KAAKgB,YAAYe,MAAM5B,EAAOU,MAAOmB,IAChDF,GAA2B,KAAjB3B,EAAOU,QACnBb,KAAKsB,SAASQ,EACf,CAsBJ,CA/OC,eAAIG,GACF,OAAOC,EAAalC,KAAKa,MAC1B,CAKD,eAAIoB,CAAYV,GACdvB,KAAKa,MAAQU,EAAOY,EAAaZ,GAAQ,EAC1C,CAED,iBAAIa,WACF,OAAsC,QAA/BC,UAAAC,EAAAtC,KAAKiC,kCAAaM,iBAAa,IAAAF,EAAAA,EAAAG,GACvC,CAKD,iBAAIJ,CAAcb,GAChBvB,KAAKa,MAAQU,EAAOY,EAAa,IAAIM,KAAKlB,IAAS,EACpD,CAsDD,MAAAmB,GACE,MAAMT,YAAEA,GAAgBjC,KAClB2C,EAAgBV,EAAcjC,KAAKgB,YAAY4B,OAAOX,GAAe,GAE3E,OAAOY,CAAI,kDAGCF,aACAG,EAAU9C,KAAK+C,iBAChBD,EAAU9C,KAAKgD,iBACdC,EAAKjD,KAAKkD,MAAOlD,KAAKkD,wBAChBJ,EAAU9C,KAAKmD,qBACxBnD,KAAKoD,kBACHpD,KAAKqD,kBACFrD,KAAKkB,sBACHlB,KAAKsD,wBACLtD,KAAKuD,wBACLvD,KAAKwD,0BACHxD,KAAKyD,mDAEVzD,KAAK4B,uBACN5B,KAAKwB,uBACJxB,KAAK6B,sBACZ6B,EAAI1D,KAAK2D,+BACIV,EAAKjD,KAAKkD,MAAO,8BACbJ,EAAU9C,KAAK4D,sBAE/B5D,KAAK6D,SAASC,QAAwDC,EAA9ClB,CAAI,2CAC5B7C,KAAKgE,UAAUF,QAA0DC,EAAhDlB,CAAI,+DAEvB7C,KAAKqD,oBACArD,KAAKsD,UAAYtD,KAAKwD,iKAQ9BxD,KAAKS,SAASwD,KAAK,kBACnBhC,EACEY,CAAI,WAEI7C,KAAKS,SAASwD,KAAK,0BAA0BjE,KAAKkE,eAAetB,OAAOX,YAGhF8B,uFAMC/D,KAAKoD,oFAKNpD,KAAKc,gBACLd,KAAKmE,uBACJnE,KAAKoE,sFAGgCpE,KAAKqE,mKAGArE,KAAKS,SAASwD,KAAK,uHAMzDjE,KAAKoE,sCAEUpE,KAAKS,SAASwD,KAAK,kLAQrCjE,KAAKa,eACPiC,EAAU9C,KAAKsE,cACfxB,EAAU9C,KAAKuE,0BACHvE,KAAKe,oCACLf,KAAKV,uCACFU,KAAKT,+BAChBS,KAAKmB,iFAG6BnB,KAAKwE,kCAGxD,CAEO,oBAAA5D,GACNZ,KAAKkE,eAAiB,IAAIO,KAAKC,eAAe1E,KAAKS,SAASkE,aAAc,CACxEC,SAAU,MACVC,IAAK,UACLC,MAAO,OACPC,KAAM,WAET,CAEO,UAAAP,GACNxE,KAAKgF,YAAYC,OAClB,CAEO,SAAAZ,GACNrE,KAAKkF,SAASD,MAAM,CAAE9E,OAAQ,OAC/B,CAQO,UAAAgE,GACNnE,KAAKc,MAAO,EACZd,KAAKkF,SAASD,MAAM,CAAE9E,OAAQ,SAC/B,CAEO,WAAAiE,GACNpE,KAAKc,MAAO,CACb,CAqBO,QAAAQ,CAASC,GACfvB,KAAKa,MAAQU,EAAOY,EAAaZ,GAAQ,GACzCvB,KAAK0B,cAAc,IAAIC,EAAU,UAClC,CAMD,IAAAnB,CAAK2E,GACHnF,KAAKI,OAAOI,KAAK2E,EAClB,CAKD,IAAAC,GACEpF,KAAKI,OAAOgF,MACb,GA9QM5F,EAAM6F,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAEnBC,EAAA,CAA7CC,EAAM,yBAAyB,IAAmCnG,EAAAoG,UAAA,oBAAA,GACfF,EAAA,CAAnDC,EAAM,+BAA+B,IAA6CnG,EAAAoG,UAAA,mBAAA,GAC7CF,EAAA,CAArCC,EAAM,iBAAiB,IAAiCnG,EAAAoG,UAAA,gBAAA,GACjBF,EAAA,CAAvCC,EAAM,mBAAmB,IAA6BnG,EAAAoG,UAAA,cAAA,GAyB3CF,EAAA,CAAXG,KAA6BrG,EAAAoG,UAAA,aAAA,GA2BcF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAoBxG,EAAAoG,UAAA,YAAA,GAM3BF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAAoBxG,EAAAoG,UAAA,WAAA,GAMZF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAAoBxG,EAAAoG,UAAA,WAAA,GAMkCF,EAAA,CAA1EG,EAAS,CAAEG,SAAS,EAAMC,UAAW,oBAAqBH,KAAMI,UAC9C1G,EAAAoG,UAAA,sBAAA,GAQaF,EAAA,CAA/BG,EAAS,CAAEI,WAAW,KAA8CzG,EAAAoG,UAAA,mBAAA,GAMrCF,EAAA,CAA/BG,EAAS,CAAEI,WAAW,KAAuDzG,EAAAoG,UAAA,sBAAA,GAS9CF,EAAA,CAA/BG,EAAS,CAAEI,WAAW,KAAgFzG,EAAAoG,UAAA,yBAAA,GAK3DF,EAAA,CAA3CG,EAAS,CAAEG,SAAS,EAAMF,KAAMC,WAAyBvG,EAAAoG,UAAA,cAAA,GA3GvCpG,EAAUkG,EAAA,CAD9BS,EAAc,qBACM3G,SAAAA"}

package/lib/Dropdown.js

@@ -1,2 +1,2 @@
-import{i as o,x as e,s as t,_ as n,e as r}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{i as d}from"./query-36bfe0e4.js";import{l as a}from"./if-defined-cccde88f.js";import{S as i}from"./SlotController-d733c575.js";import{F as l}from"./Popout-2220e77b.js";import{o as p}from"./observe-a9c6dfb6.js";import{s as c}from"./Component-2253424f.js";import"./EventController-d99ebeef.js";import"./state-d31c6912.js";import"./positioning-2346bdd6.js";import"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-773c79f4.js";import"./events-d9666e88.js";import"./DirectionController-f35f5476.js";const h=o`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:460px;overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size="s"]){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size="l"]){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(l(t)){constructor(){super(...arguments),this.headerSlot=new i(this,"header"),this.headerEndSlot=new i(this,"header-end"),this.expand=!1,this.size="m"}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]');null==o||o.setAttribute("aria-haspopup","true")}render(){return e`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${a(this.align)}" position="${a(this.position)}" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}"><div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><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(){this.open=!0}handleClose(){this.open=!1}handleOpenChange(){var o;if(this.open){const e=null!==(o=this.querySelector("[autofocus]"))&&void 0!==o?o:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}}hide(o){return this.popout.hide(o)}show(){return this.popout.show()}};m.styles=[c,h],m.shadowRootOptions={...t.shadowRootOptions,delegatesFocus:!0},n([d(".n-dropdown-content")],m.prototype,"list",void 0),n([d("nord-popout",!0)],m.prototype,"popout",void 0),n([s({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),n([s({reflect:!0})],m.prototype,"size",void 0),n([p("open","updated")],m.prototype,"handleOpenChange",null),m=n([r("nord-dropdown")],m);var u=m;export{u as default};
+import{i as o,x as e,s as t,_ as n,e as r}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{i as d}from"./query-36bfe0e4.js";import{l as a}from"./if-defined-cccde88f.js";import{S as i}from"./SlotController-d733c575.js";import{F as l}from"./Popout-2f9d860d.js";import{o as p}from"./observe-a9c6dfb6.js";import{s as c}from"./Component-2253424f.js";import"./EventController-d99ebeef.js";import"./state-d31c6912.js";import"./positioning-2346bdd6.js";import"./LightDismissController-11ae4745.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-773c79f4.js";import"./events-d9666e88.js";import"./DirectionController-f35f5476.js";const h=o`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:460px;overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size="s"]){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size="l"]){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(l(t)){constructor(){super(...arguments),this.headerSlot=new i(this,"header"),this.headerEndSlot=new i(this,"header-end"),this.expand=!1,this.size="m"}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]');null==o||o.setAttribute("aria-haspopup","true")}render(){return e`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${a(this.align)}" position="${a(this.position)}" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}"><div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><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(){this.open=!0}handleClose(){this.open=!1}handleOpenChange(){var o;if(this.open){const e=null!==(o=this.querySelector("[autofocus]"))&&void 0!==o?o:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}}hide(o){return this.popout.hide(o)}show(){return this.popout.show()}};m.styles=[c,h],m.shadowRootOptions={...t.shadowRootOptions,delegatesFocus:!0},n([d(".n-dropdown-content")],m.prototype,"list",void 0),n([d("nord-popout",!0)],m.prototype,"popout",void 0),n([s({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),n([s({reflect:!0})],m.prototype,"size",void 0),n([p("open","updated")],m.prototype,"handleOpenChange",null),m=n([r("nord-dropdown")],m);var u=m;export{u as default};
 //# sourceMappingURL=Dropdown.js.map

package/lib/DropdownGroup.js

@@ -1,2 +1,2 @@
-import{i as e,_ as n,s as o,x as a,A as r,e as d}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{s as i}from"./Component-2253424f.js";const t=e`.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:var(--n-space-xs) 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}::slotted(nord-message){inline-size:calc(100% + calc(var(--n-space-s) * 2));margin-inline-start:calc(var(--n-space-s) * -1)}::slotted(nord-message:last-of-type){padding-block-end:0;border-block-end:0}`;let p=class extends o{render(){return a`<div class="n-dropdown-group">${this.heading?a`<p id="heading" aria-hidden="true" class="n-dropdown-group-heading">${this.heading}</p>`:r}<div class="n-dropdown-group-content" role="group" aria-labelledby="${this.heading?"heading":r}"><slot></slot></div></div>`}};p.styles=[i,t],n([s()],p.prototype,"heading",void 0),p=n([d("nord-dropdown-group")],p);var l=p;export{l as default};
+import{i as e,_ as n,s as o,x as r,A as a,e as d}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{s as i}from"./Component-2253424f.js";const t=e`.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:var(--n-space-xs) 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}::slotted(nord-message){inline-size:calc(100% + calc(var(--n-space-s) * 2));margin-inline-start:calc(var(--n-space-s) * -1)}::slotted(nord-message:last-of-type){padding-block-end:0;border-block-end:0}`;let p=class extends o{render(){return r`<div class="n-dropdown-group">${this.heading?r`<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=[i,t],n([s({reflect:!0})],p.prototype,"heading",void 0),p=n([d("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 ready\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":"2xBAee,IAAMA,EAAN,cAA4BC,EAQzC,MAAAC,GACE,OAAOC,CAAI,iCAELC,KAAKC,QACHF,CAAI,uEAAuEC,KAAKC,cAChFC,wEACiEF,KAAKC,QAAU,UAAYC,8BAKrG,GAlBMN,EAAAO,OAAS,CAACC,EAAgBC,GAKrBC,EAAA,CAAXC,KAA2BX,EAAAY,UAAA,eAAA,GANTZ,EAAaU,EAAA,CADjCG,EAAc,wBACMb,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 ready\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({ reflect: true }) 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","reflect","prototype","customElement"],"mappings":"2xBAee,IAAMA,EAAN,cAA4BC,EAQzC,MAAAC,GACE,OAAOC,CAAI,iCAELC,KAAKC,QACHF,CAAI,uEAAuEC,KAAKC,cAChFC,wEACiEF,KAAKC,QAAU,UAAYC,8BAKrG,GAlBMN,EAAAO,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAwBZ,EAAAa,UAAA,eAAA,GAN1Bb,EAAaU,EAAA,CADjCI,EAAc,wBACMd,SAAAA"}

package/lib/Fieldset.js

@@ -1,2 +1,2 @@
-import{i as e,_ as r,s as t,x as i,e as o}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{S as n}from"./SlotController-d733c575.js";import{c as l}from"./cond-bb9ee891.js";import{s as a}from"./Component-2253424f.js";import{s as d}from"./FormField-87551be2.js";import"./EventController-d99ebeef.js";const h=e`fieldset{border:none}.n-label-container{margin-block-end:calc(var(--n-space-s) * 2)}.n-hidden{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);block-size:1px;inline-size:1px;white-space:nowrap}`;let p=class extends t{constructor(){super(...arguments),this.errorSlot=new n(this,"error"),this.hintSlot=new n(this,"hint"),this.label="",this.required=!1,this.hideRequired=!1,this.hideLabel=!1}render(){const{hasError:e}=this;return i`<fieldset aria-invalid="${l(e,"true")}" aria-describedby="${l(e,"error")}" aria-required="${l(this.required,"true")}"><legend class="n-label-container ${this.hideLabel?"n-hidden":""}"><div class="n-label"><slot name="label">${this.label}</slot><span aria-hidden="true" class="n-required" ?hidden="${!this.required||this.hideRequired}">*</span></div><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}};p.styles=[a,d,h],r([s()],p.prototype,"label",void 0),r([s()],p.prototype,"hint",void 0),r([s()],p.prototype,"error",void 0),r([s({type:Boolean})],p.prototype,"required",void 0),r([s({type:Boolean,attribute:"hide-required"})],p.prototype,"hideRequired",void 0),r([s({type:Boolean,attribute:"hide-label"})],p.prototype,"hideLabel",void 0),p=r([o("nord-fieldset")],p);var c=p;export{c as default};
+import{i as e,_ as r,s as t,x as i,e as o}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{S as n}from"./SlotController-d733c575.js";import{c as l}from"./cond-bb9ee891.js";import{s as a}from"./Component-2253424f.js";import{s as d}from"./FormField-87551be2.js";import"./EventController-d99ebeef.js";const h=e`fieldset{border:none}.n-label-container{margin-block-end:calc(var(--n-space-s) * 2)}.n-hidden{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);block-size:1px;inline-size:1px;white-space:nowrap}`;let p=class extends t{constructor(){super(...arguments),this.errorSlot=new n(this,"error"),this.hintSlot=new n(this,"hint"),this.label="",this.required=!1,this.hideRequired=!1,this.hideLabel=!1}render(){const{hasError:e}=this;return i`<fieldset aria-invalid="${l(e,"true")}" aria-describedby="${l(e,"error")}" aria-required="${l(this.required,"true")}"><legend class="n-label-container ${this.hideLabel?"n-hidden":""}"><div class="n-label"><slot name="label">${this.label}</slot><span aria-hidden="true" class="n-required" ?hidden="${!this.required||this.hideRequired}">*</span></div><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}};p.styles=[a,d,h],r([s({reflect:!0})],p.prototype,"label",void 0),r([s({reflect:!0})],p.prototype,"hint",void 0),r([s({reflect:!0})],p.prototype,"error",void 0),r([s({reflect:!0,type:Boolean})],p.prototype,"required",void 0),r([s({reflect:!0,type:Boolean,attribute:"hide-required"})],p.prototype,"hideRequired",void 0),r([s({reflect:!0,type:Boolean,attribute:"hide-label"})],p.prototype,"hideLabel",void 0),p=r([o("nord-fieldset")],p);var c=p;export{c 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 { 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. Rendered as a `<legend>` element.\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  /**\n   * Determines whether the fieldset is required or not.\n   * A fieldset marked as required will be announced as such to users of assistive technology.\n   * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n   */\n  @property({ type: Boolean }) required = false\n\n  /**\n   * Visually hide the required indicator, but still show\n   * required attribute to assistive technologies like screen readers.\n   */\n  @property({ type: Boolean, attribute: \"hide-required\" }) hideRequired = false\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n  render() {\n    const { hasError } = this\n\n    return html`\n      <fieldset\n        aria-invalid=${cond(hasError, \"true\")}\n        aria-describedby=${cond(hasError, \"error\")}\n        aria-required=${cond(this.required, \"true\")}\n      >\n        <legend class=\"n-label-container ${this.hideLabel ? \"n-hidden\" : \"\"}\">\n          <div class=\"n-label\">\n            <slot name=\"label\">${this.label}</slot\n            ><span aria-hidden=\"true\" class=\"n-required\" ?hidden=${!this.required || this.hideRequired}>*</span>\n          </div>\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","required","hideRequired","hideLabel","render","hasError","html","cond","hasHint","hint","error","Boolean","hasContent","styles","componentStyle","formFieldStyle","style","__decorate","property","prototype","type","attribute","customElement"],"mappings":"6jBAqBe,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAGLC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAQG,SAAG,IAAID,EAAeF,KAAM,QAKhCA,KAAKI,MAAW,GAiBCJ,KAAQK,UAAG,EAMiBL,KAAYM,cAAG,EAKlBN,KAASO,WAAG,CAsCnE,CApCC,MAAAC,GACE,MAAMC,SAAEA,GAAaT,KAErB,OAAOU,CAAI,2BAEQC,EAAKF,EAAU,8BACXE,EAAKF,EAAU,4BAClBE,EAAKX,KAAKK,SAAU,6CAEDL,KAAKO,UAAY,WAAa,+CAExCP,KAAKI,qEAC8BJ,KAAKK,UAAYL,KAAKM,uEAGvCN,KAAKY,8BACxBZ,KAAKa,2GAMqCb,KAAKS,gCAChDT,KAAKc,+BAIjC,CAED,WAAcF,GACZ,OAAOG,QAAQf,KAAKa,OAASb,KAAKG,SAASa,UAC5C,CAED,YAAcP,GACZ,OAAOM,QAAQf,KAAKc,QAAUd,KAAKC,UAAUe,UAC9C,GAzEMnB,EAAMoB,OAAG,CAACC,EAAgBC,EAAgBC,GAQrCC,EAAA,CAAXC,KAA6BzB,EAAA0B,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBzB,EAAA0B,UAAA,YAAA,GAKbF,EAAA,CAAXC,KAAyBzB,EAAA0B,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAMT,WAA2BlB,EAAA0B,UAAA,gBAAA,GAMYF,EAAA,CAAxDC,EAAS,CAAEE,KAAMT,QAASU,UAAW,mBAAuC5B,EAAA0B,UAAA,oBAAA,GAKvBF,EAAA,CAArDC,EAAS,CAAEE,KAAMT,QAASU,UAAW,gBAAiC5B,EAAA0B,UAAA,iBAAA,GArCpD1B,EAAQwB,EAAA,CAD5BK,EAAc,kBACM7B,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. Rendered as a `<legend>` element.\n   */\n  @property({ reflect: true }) label: string = \"\"\n\n  /**\n   * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n   */\n  @property({ reflect: true }) hint?: string\n\n  /**\n   * Optional error to be shown with the fieldset. Alternatively use the error slot.\n   */\n  @property({ reflect: true }) error?: string\n\n  /**\n   * Determines whether the fieldset is required or not.\n   * A fieldset marked as required will be announced as such to users of assistive technology.\n   * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n   */\n  @property({ reflect: true, type: Boolean }) required = false\n\n  /**\n   * Visually hide the required indicator, but still show\n   * required attribute to assistive technologies like screen readers.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"hide-required\" }) hideRequired = false\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n  render() {\n    const { hasError } = this\n\n    return html`\n      <fieldset\n        aria-invalid=${cond(hasError, \"true\")}\n        aria-describedby=${cond(hasError, \"error\")}\n        aria-required=${cond(this.required, \"true\")}\n      >\n        <legend class=\"n-label-container ${this.hideLabel ? \"n-hidden\" : \"\"}\">\n          <div class=\"n-label\">\n            <slot name=\"label\">${this.label}</slot\n            ><span aria-hidden=\"true\" class=\"n-required\" ?hidden=${!this.required || this.hideRequired}>*</span>\n          </div>\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","required","hideRequired","hideLabel","render","hasError","html","cond","hasHint","hint","error","Boolean","hasContent","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","prototype","type","attribute","customElement"],"mappings":"6jBAqBe,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAGLC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAQG,SAAG,IAAID,EAAeF,KAAM,QAKfA,KAAKI,MAAW,GAiBDJ,KAAQK,UAAG,EAMiBL,KAAYM,cAAG,EAKlBN,KAASO,WAAG,CAsClF,CApCC,MAAAC,GACE,MAAMC,SAAEA,GAAaT,KAErB,OAAOU,CAAI,2BAEQC,EAAKF,EAAU,8BACXE,EAAKF,EAAU,4BAClBE,EAAKX,KAAKK,SAAU,6CAEDL,KAAKO,UAAY,WAAa,+CAExCP,KAAKI,qEAC8BJ,KAAKK,UAAYL,KAAKM,uEAGvCN,KAAKY,8BACxBZ,KAAKa,2GAMqCb,KAAKS,gCAChDT,KAAKc,+BAIjC,CAED,WAAcF,GACZ,OAAOG,QAAQf,KAAKa,OAASb,KAAKG,SAASa,UAC5C,CAED,YAAcP,GACZ,OAAOM,QAAQf,KAAKc,QAAUd,KAAKC,UAAUe,UAC9C,GAzEMnB,EAAMoB,OAAG,CAACC,EAAgBC,EAAgBC,GAQpBC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0B1B,EAAA2B,UAAA,aAAA,GAKlBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqB1B,EAAA2B,UAAA,YAAA,GAKbH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsB1B,EAAA2B,UAAA,aAAA,GAOCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMV,WAA2BlB,EAAA2B,UAAA,gBAAA,GAMYH,EAAA,CAAvEC,EAAS,CAAEC,SAAS,EAAME,KAAMV,QAASW,UAAW,mBAAuC7B,EAAA2B,UAAA,oBAAA,GAKvBH,EAAA,CAApEC,EAAS,CAAEC,SAAS,EAAME,KAAMV,QAASW,UAAW,gBAAiC7B,EAAA2B,UAAA,iBAAA,GArCnE3B,EAAQwB,EAAA,CAD5BM,EAAc,kBACM9B,SAAAA"}

package/lib/FormAssociatedMixin-3fa55d53.js

@@ -0,0 +1,2 @@
+import{_ as t,x as e}from"./query-assigned-elements-92ce7494.js";import{n as r}from"./property-c78323b1.js";import{F as i}from"./FormDataController-592ff3dd.js";import{S as o}from"./SlotController-d733c575.js";import{N as s}from"./events-d9666e88.js";import"./VisuallyHidden.js";function n(n){class h extends n{constructor(){super(...arguments),this.labelSlot=new o(this,"label"),this.errorSlot=new o(this,"error"),this.hintSlot=new o(this,"hint"),this.formData=new i(this,{value:()=>this.formValue}),this.inputId="input",this.errorId="error",this.hintId="hint",this.label="",this.hideLabel=!1,this.required=!1,this.hideRequired=!1}get formValue(){return this.value}handleInput(t){t.stopPropagation();const e=t.target;this.value=e.value,this.dispatchEvent(new s("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new s("change"))}renderLabel(t){const r=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot><span ?hidden="${!this.required||this.hideRequired}" aria-hidden="true" class="n-required">*</span> ${t}</label><div class="n-caption n-hint" id="${this.hintId}" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div>`;return this.hideLabel?e`<nord-visually-hidden>${r}</nord-visually-hidden>`:e`<div class="n-label-container">${r}</div>`}renderError(){return e`<div class="n-caption n-error" id="${this.errorId}" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div>`}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?`${this.hintId} ${this.errorId}`:t?this.hintId:e?this.errorId:void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}}return t([r({reflect:!0})],h.prototype,"label",void 0),t([r({reflect:!0})],h.prototype,"hint",void 0),t([r({reflect:!0,type:Boolean,attribute:"hide-label"})],h.prototype,"hideLabel",void 0),t([r({reflect:!0})],h.prototype,"placeholder",void 0),t([r({reflect:!0})],h.prototype,"error",void 0),t([r({reflect:!0,type:Boolean})],h.prototype,"required",void 0),t([r({reflect:!0,type:Boolean,attribute:"hide-required"})],h.prototype,"hideRequired",void 0),h}export{n as F};
+//# sourceMappingURL=FormAssociatedMixin-3fa55d53.js.map

package/lib/FormAssociatedMixin-3fa55d53.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormAssociatedMixin-3fa55d53.js","sources":["../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { html, LitElement, TemplateResult } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { FormDataController } from \"../controllers/FormDataController.js\"\nimport { SlotController } from \"../controllers/SlotController.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\nimport \"../../visually-hidden/VisuallyHidden.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n  label: string\n  required: boolean\n  hideRequired: boolean\n  hint?: string\n  hideLabel: boolean\n  placeholder?: string\n  error?: string\n\n  protected inputId: string\n  protected errorId: string\n  protected hintId: string\n  protected labelSlot: SlotController\n  protected hintSlot: SlotController\n  protected errorSlot: SlotController\n  protected formData: FormDataController\n\n  protected get formValue(): string | undefined\n  protected get hasError(): boolean\n  protected get hasHint(): boolean\n\n  protected handleChange(e: Event): void\n  protected handleInput(e: Event): void\n  protected renderLabel(additionalContent?: TemplateResult): TemplateResult\n  protected renderError(): TemplateResult\n  protected getDescribedBy(): string | undefined\n  protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n  // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n  /**\n   * @slot label - Use when a label requires more than plain text.\n   * @slot hint - Use when a hint requires more than plain text.\n   * @slot error - Optional slot that holds error text for the input.\n   */\n  class FormAssociatedElement extends superClass {\n    protected labelSlot = new SlotController(this, \"label\")\n    protected errorSlot = new SlotController(this, \"error\")\n    protected hintSlot = new SlotController(this, \"hint\")\n    protected formData = new FormDataController(this, { value: () => this.formValue })\n\n    protected get formValue() {\n      return this.value\n    }\n\n    protected inputId = \"input\"\n    protected errorId = \"error\"\n    protected hintId = \"hint\"\n\n    /**\n     * Label for the input.\n     */\n    @property({ reflect: true }) label: string = \"\"\n\n    /**\n     * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n     */\n    @property({ reflect: true }) hint?: string\n\n    /**\n     * Visually hide the label, but still show it to assistive technologies like screen readers.\n     */\n    @property({ reflect: true, type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n    /**\n     * Placeholder text to display within the input.\n     */\n    @property({ reflect: true }) placeholder?: string\n\n    /**\n     * Optional error to be shown with the input. Alternatively use the error slot.\n     */\n    @property({ reflect: true }) error?: string\n\n    /**\n     * Determines whether the input is required or not.\n     * An input marked as required will be announced as such to users of assistive technology.\n     * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n     */\n    @property({ reflect: true, type: Boolean }) required = false\n\n    /**\n     * Visually hide the required indicator, but still show\n     * required attribute to assistive technologies like screen readers.\n     */\n    @property({ reflect: true, type: Boolean, attribute: \"hide-required\" }) hideRequired = false\n\n    protected handleInput(e: Event) {\n      e.stopPropagation()\n      const target = e.target as NativeInputElement\n      this.value = target.value\n\n      /**\n       * Fired as the user types into the input.\n       */\n      this.dispatchEvent(new NordEvent(\"input\"))\n    }\n\n    protected handleChange(e: Event) {\n      e.stopPropagation()\n\n      /**\n       * Fired whenever the input's value is changed via user interaction.\n       */\n      this.dispatchEvent(new NordEvent(\"change\"))\n    }\n\n    protected renderLabel(additionalContent?: TemplateResult) {\n      const label = html`\n        <label for=${this.inputId}>\n          <slot name=\"label\">${this.label}</slot\n          ><span ?hidden=${!this.required || this.hideRequired} aria-hidden=\"true\" class=\"n-required\">*</span>\n          ${additionalContent}\n        </label>\n\n        <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n          <slot name=\"hint\">${this.hint}</slot>\n        </div>\n      `\n\n      return this.hideLabel\n        ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n        : html`<div class=\"n-label-container\">${label}</div>`\n    }\n\n    protected renderError() {\n      return html`\n        <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n          <slot name=\"error\">${this.error}</slot>\n        </div>\n      `\n    }\n\n    protected getDescribedBy() {\n      const { hasHint, hasError } = this\n\n      if (hasHint && hasError) {\n        return `${this.hintId} ${this.errorId}`\n      }\n      if (hasHint) {\n        return this.hintId\n      }\n      if (hasError) {\n        return this.errorId\n      }\n\n      return undefined\n    }\n\n    protected getInvalid() {\n      return this.hasError ? \"true\" : undefined\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\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormAssociatedMixin","superClass","FormAssociatedElement","constructor","this","labelSlot","SlotController","errorSlot","hintSlot","formData","FormDataController","value","formValue","inputId","errorId","hintId","label","hideLabel","required","hideRequired","handleInput","e","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","additionalContent","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","reflect","prototype","type","attribute"],"mappings":"uRAyCM,SAAUA,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApC,WAAAE,uBACYC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAASG,UAAG,IAAID,EAAeF,KAAM,SACrCA,KAAQI,SAAG,IAAIF,EAAeF,KAAM,QACpCA,KAAAK,SAAW,IAAIC,EAAmBN,KAAM,CAAEO,MAAO,IAAMP,KAAKQ,YAM5DR,KAAOS,QAAG,QACVT,KAAOU,QAAG,QACVV,KAAMW,OAAG,OAKUX,KAAKY,MAAW,GAUwBZ,KAASa,WAAG,EAiBrCb,KAAQc,UAAG,EAMiBd,KAAYe,cAAG,CA2ExF,CAvHC,aAAcP,GACZ,OAAOR,KAAKO,KACb,CA4CS,WAAAS,CAAYC,GACpBA,EAAEC,kBACF,MAAMC,EAASF,EAAEE,OACjBnB,KAAKO,MAAQY,EAAOZ,MAKpBP,KAAKoB,cAAc,IAAIC,EAAU,SAClC,CAES,YAAAC,CAAaL,GACrBA,EAAEC,kBAKFlB,KAAKoB,cAAc,IAAIC,EAAU,UAClC,CAES,WAAAE,CAAYC,GACpB,MAAMZ,EAAQa,CAAI,eACHzB,KAAKS,+BACKT,KAAKY,+BACRZ,KAAKc,UAAYd,KAAKe,gEACtCS,8CAG+BxB,KAAKW,qBAAmBX,KAAK0B,8BAC1C1B,KAAK2B,oBAI7B,OAAO3B,KAAKa,UACRY,CAAI,yBAAyBb,2BAC7Ba,CAAI,kCAAkCb,SAC3C,CAES,WAAAgB,GACR,OAAOH,CAAI,sCAC2BzB,KAAKU,mCAAiCV,KAAK6B,gCACxD7B,KAAK8B,oBAG/B,CAES,cAAAC,GACR,MAAML,QAAEA,EAAOG,SAAEA,GAAa7B,KAE9B,OAAI0B,GAAWG,EACN,GAAG7B,KAAKW,UAAUX,KAAKU,UAE5BgB,EACK1B,KAAKW,OAEVkB,EACK7B,KAAKU,aADd,CAKD,CAES,UAAAsB,GACR,OAAOhC,KAAK6B,SAAW,YAASI,CACjC,CAED,WAAcP,GACZ,OAAOQ,QAAQlC,KAAK2B,OAAS3B,KAAKI,SAAS+B,UAC5C,CAED,YAAcN,GACZ,OAAOK,QAAQlC,KAAK8B,QAAU9B,KAAKG,UAAUgC,UAC9C,EAGH,OA9G+BC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0BxC,EAAAyC,UAAA,aAAA,GAKlBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBxC,EAAAyC,UAAA,YAAA,GAK2BH,EAAA,CAApEC,EAAS,CAAEC,SAAS,EAAME,KAAMN,QAASO,UAAW,gBAAiC3C,EAAAyC,UAAA,iBAAA,GAKzDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA4BxC,EAAAyC,UAAA,mBAAA,GAKpBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBxC,EAAAyC,UAAA,aAAA,GAOCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMN,WAA2BpC,EAAAyC,UAAA,gBAAA,GAMYH,EAAA,CAAvEC,EAAS,CAAEC,SAAS,EAAME,KAAMN,QAASO,UAAW,mBAAuC3C,EAAAyC,UAAA,oBAAA,GA6EvFzC,CACT"}

package/lib/FormDataController-592ff3dd.js

@@ -0,0 +1,2 @@
+class t{constructor(t,s){this.host=t,this.options=s,this._form=null,this.handleFormData=t=>{const{disabled:s,name:o}=this.host;if(s)return;if(!o)return;const i=this.options.value();null!=i&&t.formData.append(o,i)},t.addController(this)}hostConnected(){this.listen(this.host.form)}hostUpdated(){this.listen(this.host.form)}hostDisconnected(){this.cleanup()}listen(t){var s;this._form!==t&&(this.cleanup(),this._form=t,null===(s=this._form)||void 0===s||s.addEventListener("formdata",this.handleFormData))}cleanup(){var t;null===(t=this._form)||void 0===t||t.removeEventListener("formdata",this.handleFormData),this._form=null}}export{t as F};
+//# sourceMappingURL=FormDataController-592ff3dd.js.map

package/lib/FormDataController-592ff3dd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormDataController-592ff3dd.js","sources":["../src/common/controllers/FormDataController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\n\ntype FormDataOptions = {\n  value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n  private _form: HTMLFormElement | null = null\n\n  constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n    host.addController(this)\n  }\n\n  hostConnected() {\n    this.listen(this.host.form)\n  }\n\n  hostUpdated() {\n    this.listen(this.host.form)\n  }\n\n  hostDisconnected() {\n    this.cleanup()\n  }\n\n  private listen(form: HTMLFormElement | null) {\n    if (this._form !== form) {\n      this.cleanup()\n      this._form = form\n      this._form?.addEventListener(\"formdata\", this.handleFormData)\n    }\n  }\n\n  private cleanup() {\n    this._form?.removeEventListener(\"formdata\", this.handleFormData)\n    this._form = null\n  }\n\n  private handleFormData = (e: FormDataEvent) => {\n    const { disabled, name } = this.host\n\n    if (disabled) {\n      return\n    }\n    if (!name) {\n      return\n    }\n\n    const value = this.options.value()\n    if (value != null) {\n      e.formData.append(name, value)\n    }\n  }\n}\n"],"names":["FormDataController","constructor","host","options","this","_form","handleFormData","e","disabled","name","value","formData","append","addController","hostConnected","listen","form","hostUpdated","hostDisconnected","cleanup","_a","addEventListener","removeEventListener"],"mappings":"MAOaA,EAGX,WAAAC,CAAoBC,EAA4DC,GAA5DC,KAAIF,KAAJA,EAA4DE,KAAOD,QAAPA,EAFxEC,KAAKC,MAA2B,KA+BhCD,KAAAE,eAAkBC,IACxB,MAAMC,SAAEA,EAAQC,KAAEA,GAASL,KAAKF,KAEhC,GAAIM,EACF,OAEF,IAAKC,EACH,OAGF,MAAMC,EAAQN,KAAKD,QAAQO,QACd,MAATA,GACFH,EAAEI,SAASC,OAAOH,EAAMC,EACzB,EAzCDR,EAAKW,cAAcT,KACpB,CAED,aAAAU,GACEV,KAAKW,OAAOX,KAAKF,KAAKc,KACvB,CAED,WAAAC,GACEb,KAAKW,OAAOX,KAAKF,KAAKc,KACvB,CAED,gBAAAE,GACEd,KAAKe,SACN,CAEO,MAAAJ,CAAOC,SACTZ,KAAKC,QAAUW,IACjBZ,KAAKe,UACLf,KAAKC,MAAQW,EACH,QAAVI,EAAAhB,KAAKC,aAAK,IAAAe,GAAAA,EAAEC,iBAAiB,WAAYjB,KAAKE,gBAEjD,CAEO,OAAAa,SACI,QAAVC,EAAAhB,KAAKC,aAAK,IAAAe,GAAAA,EAAEE,oBAAoB,WAAYlB,KAAKE,gBACjDF,KAAKC,MAAQ,IACd"}

package/lib/IconManager.js

@@ -1,2 +1,2 @@
-const e=e=>fetch(`https://nordcdn.net/ds/icons/3.3.0/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
+const e=e=>fetch(`https://nordcdn.net/ds/icons/3.4.0/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
 //# sourceMappingURL=IconManager.js.map

package/lib/Input.js

@@ -1,2 +1,2 @@
-import{i as t,x as n,A as e,_ as o,e as i,s as r}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{i as a}from"./query-36bfe0e4.js";import{l as d}from"./if-defined-cccde88f.js";import{o as l}from"./class-map-512f0bc1.js";import{n as c}from"./ref-99418ab4.js";import{o as p}from"./style-map-f8a1c8d5.js";import{F as u}from"./FocusableMixin-d30213b4.js";import{F as m}from"./FormAssociatedMixin-a278fda4.js";import{I as h}from"./InputMixin-83b5bd46.js";import{R as b,s as v}from"./TextField-2d778949.js";import{A as f}from"./AutocompleteMixin-5a7e10b2.js";import{S as g}from"./SizeMixin-ab074eff.js";import{s as w}from"./Component-2253424f.js";import{s as y}from"./FormField-87551be2.js";import{D as z}from"./DirectionController-f35f5476.js";import{c as x}from"./cond-bb9ee891.js";import j from"./Icon.js";import"./directive-e9ce14b4.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";var _=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z" fill="currentColor"/></svg>',title:"navigation-search",tags:"nordicon navigation menu find search magnifying glass"});const $=t`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.n-input-container{font-size:var(--n-font-size-m);display:grid;grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4;padding-inline-start:var(--_n-input-start-inline-size,var(--_n-input-padding-inline));padding-inline-end:var(--_n-input-end-inline-size,var(--_n-input-padding-inline))}slot[name=end],slot[name=start]{pointer-events:none;display:flex;align-items:center;color:var(--n-color-icon)}:host([disabled]) slot:is([name=start],[name=end]){color:var(--n-color-text-weakest)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(*){font-size:var(--_n-input-font-size)}[name=start]::slotted(*),nord-icon{margin-inline-start:var(--_n-input-padding-inline)!important;margin-inline-end:calc(var(--_n-input-padding-inline)/ 2)!important}[name=end]::slotted(*){margin-inline-start:calc(var(--_n-input-padding-inline)/ 2)!important;margin-inline-end:var(--_n-input-padding-inline)!important}[name=start]::slotted(:is(nord-button, nord-dropdown)){margin-inline-start:0!important}[name=end]::slotted(:is(nord-button, nord-dropdown)){margin-inline-end:0!important}nord-icon{--_n-input-icon-color:var(--n-input-icon-color, var(--n-color-icon));color:var(--_n-input-icon-color)}::slotted(:is(nord-button:not([disabled]), nord-dropdown)){pointer-events:auto;position:relative}::slotted(nord-button:not([disabled],:focus)),::slotted(nord-dropdown:not(:focus-within)){--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-color:var(--n-color-text-weaker);-webkit-text-fill-color:var(--n-button-color);opacity:.8}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)){--n-button-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color, var(--n-color-status-danger))}:host([size="s"]) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s) * 1.4)}:host{--_n-input-icon-size:var(--n-size-icon-s)}:host([size="s"]){--_n-input-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-input-icon-size:var(--n-size-icon-m)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-input-icon-size)}:host([type=unit]) :is(.n-input-container,.n-input){--_n-input-text-align:var(--n-input-text-align, end);font-family:var(--n-font-family-code)!important}`;class S{constructor(t,n){this.target=n,this.hadFirstUpdate=!1,t.addController(this),this.observer=new ResizeObserver((([n])=>{const[e]=n.borderBoxSize;this.borderBoxSize=e,t.requestUpdate()}))}get inlineSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.inlineSize}get blockSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.blockSize}hostUpdated(){this.hadFirstUpdate||(this.observer.observe(this.target()),this.hadFirstUpdate=!0)}hostConnected(){this.hadFirstUpdate&&this.observer.observe(this.target())}hostDisconnected(){this.observer.disconnect()}}j.registerIcon(_);const k=t=>t?`${t}px`:void 0;let F=class extends(g(m(f(b(h(u(r))))))){constructor(){super(...arguments),this.startObserver=new S(this,(()=>this.startSlot)),this.endObserver=new S(this,(()=>this.endSlot)),this.direction=new z(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,o=t.selectionStart,i=e.slice(0,o),r=e.slice(o,e.length),s=i.replace(n,""),a=s+r.replace(n,""),d=s.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const o="number"===this.type;return n`${this.renderLabel()}<div class="${l({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${p({"--_n-input-start-inline-size":k(this.startObserver.inlineSize),"--_n-input-end-inline-size":k(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?n`<nord-icon name="navigation-search"></nord-icon>`:e}</slot><input ${c(this.focusableRef)} id="${this.inputId}" class="n-input" type="${o||"unit"===this.type?"text":this.type}" inputmode="${x(o,"numeric")}" pattern="${x(o,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${d(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${d(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${d(this.getDescribedBy())}" aria-invalid="${d(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()}`}handleKeydown(t){if("Enter"!==t.key)return;const{form:n}=this;if(n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}};F.styles=[w,y,v,$],o([a("slot[name='start']")],F.prototype,"startSlot",void 0),o([a("slot[name='end']")],F.prototype,"endSlot",void 0),o([s({reflect:!0})],F.prototype,"type",void 0),o([s({reflect:!0,type:Boolean})],F.prototype,"expand",void 0),o([s({reflect:!0,attribute:"disallow-pattern"})],F.prototype,"disallowPattern",void 0),F=o([i("nord-input")],F);var C=F;export{C as default};
+import{i as t,x as n,A as e,_ as o,e as i,s as r}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{i as a}from"./query-36bfe0e4.js";import{l as d}from"./if-defined-cccde88f.js";import{o as l}from"./class-map-512f0bc1.js";import{n as c}from"./ref-99418ab4.js";import{o as p}from"./style-map-f8a1c8d5.js";import{F as u}from"./FocusableMixin-d30213b4.js";import{F as m}from"./FormAssociatedMixin-3fa55d53.js";import{I as h}from"./InputMixin-83b5bd46.js";import{R as b,s as v}from"./TextField-2d778949.js";import{A as f}from"./AutocompleteMixin-5a7e10b2.js";import{S as g}from"./SizeMixin-ab074eff.js";import{s as w}from"./Component-2253424f.js";import{s as y}from"./FormField-87551be2.js";import{D as z}from"./DirectionController-f35f5476.js";import{c as x}from"./cond-bb9ee891.js";import j from"./Icon.js";import"./directive-e9ce14b4.js";import"./FormDataController-592ff3dd.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";var _=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z" fill="currentColor"/></svg>',title:"navigation-search",tags:"nordicon navigation menu find search magnifying glass"});const $=t`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.n-input-container{font-size:var(--n-font-size-m);display:grid;grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4;padding-inline-start:var(--_n-input-start-inline-size,var(--_n-input-padding-inline));padding-inline-end:var(--_n-input-end-inline-size,var(--_n-input-padding-inline))}slot[name=end],slot[name=start]{pointer-events:none;display:flex;align-items:center;color:var(--n-color-icon)}:host([disabled]) slot:is([name=start],[name=end]){color:var(--n-color-text-weakest)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(*){font-size:var(--_n-input-font-size)}[name=start]::slotted(*),nord-icon{margin-inline-start:var(--_n-input-padding-inline)!important;margin-inline-end:calc(var(--_n-input-padding-inline)/ 2)!important}[name=end]::slotted(*){margin-inline-start:calc(var(--_n-input-padding-inline)/ 2)!important;margin-inline-end:var(--_n-input-padding-inline)!important}[name=start]::slotted(:is(nord-button, nord-dropdown)){margin-inline-start:0!important}[name=end]::slotted(:is(nord-button, nord-dropdown)){margin-inline-end:0!important}nord-icon{--_n-input-icon-color:var(--n-input-icon-color, var(--n-color-icon));color:var(--_n-input-icon-color)}::slotted(:is(nord-button:not([disabled]), nord-dropdown)){pointer-events:auto;position:relative}::slotted(nord-button:not([disabled],:focus)),::slotted(nord-dropdown:not(:focus-within)){--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-color:var(--n-color-text-weaker);-webkit-text-fill-color:var(--n-button-color);opacity:.8}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)){--n-button-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color, var(--n-color-status-danger))}:host([size="s"]) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s) * 1.4)}:host{--_n-input-icon-size:var(--n-size-icon-s)}:host([size="s"]){--_n-input-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-input-icon-size:var(--n-size-icon-m)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-input-icon-size)}:host([type=unit]) :is(.n-input-container,.n-input){--_n-input-text-align:var(--n-input-text-align, end);font-family:var(--n-font-family-code)!important}`;class S{constructor(t,n){this.target=n,this.hadFirstUpdate=!1,t.addController(this),this.observer=new ResizeObserver((([n])=>{const[e]=n.borderBoxSize;this.borderBoxSize=e,t.requestUpdate()}))}get inlineSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.inlineSize}get blockSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.blockSize}hostUpdated(){this.hadFirstUpdate||(this.observer.observe(this.target()),this.hadFirstUpdate=!0)}hostConnected(){this.hadFirstUpdate&&this.observer.observe(this.target())}hostDisconnected(){this.observer.disconnect()}}j.registerIcon(_);const k=t=>t?`${t}px`:void 0;let F=class extends(g(m(f(b(h(u(r))))))){constructor(){super(...arguments),this.startObserver=new S(this,(()=>this.startSlot)),this.endObserver=new S(this,(()=>this.endSlot)),this.direction=new z(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,o=t.selectionStart,i=e.slice(0,o),r=e.slice(o,e.length),s=i.replace(n,""),a=s+r.replace(n,""),d=s.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const o="number"===this.type;return n`${this.renderLabel()}<div class="${l({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${p({"--_n-input-start-inline-size":k(this.startObserver.inlineSize),"--_n-input-end-inline-size":k(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?n`<nord-icon name="navigation-search"></nord-icon>`:e}</slot><input ${c(this.focusableRef)} id="${this.inputId}" class="n-input" type="${o||"unit"===this.type?"text":this.type}" inputmode="${x(o,"numeric")}" pattern="${x(o,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${d(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${d(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${d(this.getDescribedBy())}" aria-invalid="${d(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()}`}handleKeydown(t){if("Enter"!==t.key)return;const{form:n}=this;if(n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}};F.styles=[w,y,v,$],o([a("slot[name='start']")],F.prototype,"startSlot",void 0),o([a("slot[name='end']")],F.prototype,"endSlot",void 0),o([s({reflect:!0})],F.prototype,"type",void 0),o([s({reflect:!0,type:Boolean})],F.prototype,"expand",void 0),o([s({reflect:!0,attribute:"disallow-pattern"})],F.prototype,"disallowPattern",void 0),F=o([i("nord-input")],F);var C=F;export{C as default};
 //# sourceMappingURL=Input.js.map

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../icons/lib/assets/navigation-search.js","../src/common/controllers/ResizeController.ts","../src/input/Input.ts","../src/common/input.ts","../src/common/form.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n","import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nexport class ResizeController implements ReactiveController {\n  private observer: ResizeObserver\n  private hadFirstUpdate = false\n  private borderBoxSize?: ResizeObserverSize\n\n  constructor(host: ReactiveControllerHost, private target: () => HTMLElement) {\n    host.addController(this)\n\n    this.observer = new ResizeObserver(([entry]) => {\n      const [borderBoxSize] = entry.borderBoxSize\n      this.borderBoxSize = borderBoxSize\n      host.requestUpdate()\n    })\n  }\n\n  get inlineSize() {\n    return this.borderBoxSize?.inlineSize\n  }\n\n  get blockSize() {\n    return this.borderBoxSize?.blockSize\n  }\n\n  hostUpdated() {\n    if (!this.hadFirstUpdate) {\n      this.observer.observe(this.target())\n      this.hadFirstUpdate = true\n    }\n  }\n\n  hostConnected() {\n    // in case the host has rendered, disconnected, and is now reconnected\n    if (this.hadFirstUpdate) {\n      this.observer.observe(this.target())\n    }\n  }\n\n  hostDisconnected() {\n    this.observer.disconnect()\n  }\n}\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { styleMap } from \"lit/directives/style-map.js\"\n\nimport * as searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.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 \"./Input.css\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { ResizeController } from \"../common/controllers/ResizeController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { getSubmitButton } from \"../common/form.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport Icon from \"../icon/Icon.js\"\n\nIcon.registerIcon(searchIcon)\n\nconst px = (value?: number) => (value ? `${value}px` : undefined)\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\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 input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon or prefix at the start of the input.\n * @slot end - Optional slot used to place an icon or suffix at the end of the input.\n *\n * @cssprop [--n-input-inline-size=240px] - Controls the inline size, or width, of the input.\n * @cssprop [--n-input-background=var(--n-color-active)] - Controls the background of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-color=var(--n-color-text)] - Controls the text color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-color=var(--n-color-border-strong)] - Controls the border color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-input-text-align=start] - Controls the alignment of text within the input itself.\n */\n@customElement(\"nord-input\")\nexport default class Input extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement)))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(\"slot[name='start']\") private startSlot!: HTMLSlotElement\n  @query(\"slot[name='end']\") private endSlot!: HTMLSlotElement\n  private startObserver = new ResizeController(this, () => this.startSlot)\n  private endObserver = new ResizeController(this, () => this.endSlot)\n  private direction = new DirectionController(this)\n\n  /**\n   * The type of the input.\n   */\n  @property({ reflect: true }) type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" | \"unit\" =\n    \"text\"\n\n  /**\n   * Controls whether the input expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * Optionally disallow certain characters from being used inside the input, using a regex pattern.\n   */\n  @property({ reflect: true, attribute: \"disallow-pattern\" }) disallowPattern?: string = undefined\n\n  render() {\n    const isNumber = this.type === \"number\"\n\n    return html`\n      ${this.renderLabel()}\n\n      <div\n        class=${classMap({\n          \"n-input-container\": true,\n          \"is-rtl\": this.direction.dir === \"rtl\",\n        })}\n        style=${styleMap({\n          \"--_n-input-start-inline-size\": px(this.startObserver.inlineSize),\n          \"--_n-input-end-inline-size\": px(this.endObserver.inlineSize),\n        })}\n      >\n        <slot name=\"start\">\n          ${this.type === \"search\" ? html`<nord-icon name=\"navigation-search\"></nord-icon>` : nothing}\n        </slot>\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          type=${isNumber || this.type === \"unit\" ? \"text\" : this.type}\n          inputmode=${cond(isNumber, \"numeric\")}\n          pattern=${cond(isNumber, \"[0-9]*\")}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          ?readonly=${this.readonly}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @input=${this.handleInputChange}\n          @change=${this.handleChange}\n          @keydown=${this.handleKeydown}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          spellcheck=\"false\"\n          autocomplete=${this.autocomplete as any}\n        />\n        <slot name=\"end\"></slot>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key !== \"Enter\") {\n      return\n    }\n\n    const { form } = this\n\n    if (form) {\n      const button = getSubmitButton(form)\n      setTimeout(() => button?.click(), 0)\n    }\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    if (this.disallowPattern) {\n      cleanValue(target, new RegExp(this.disallowPattern, \"g\"))\n    }\n    this.handleInput(e)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-input\": Input\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","/**\n * Finds a form's submit button. First looking for a button inside form,\n * and then looking for a button whose form attribute is equal to the ID of the form.\n */\nexport function getSubmitButton(form: HTMLFormElement): HTMLButtonElement | null {\n  // we can get away with just looking for native <button> elements,\n  // rather than our component, since our button component renders one to light dom.\n  let button = form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)\n\n  if (!button && form.id) {\n    const root = form.getRootNode() as ShadowRoot | Document\n    button = root.querySelector<HTMLButtonElement>(`button[form=${form.id}]`)\n  }\n\n  return button\n}\n"],"names":["ResizeController","constructor","host","target","this","hadFirstUpdate","addController","observer","ResizeObserver","entry","borderBoxSize","requestUpdate","inlineSize","_a","blockSize","hostUpdated","observe","hostConnected","hostDisconnected","disconnect","Icon","registerIcon","searchIcon","px","value","undefined","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","startObserver","startSlot","endObserver","endSlot","direction","DirectionController","type","expand","disallowPattern","handleInputChange","e","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","isNumber","html","renderLabel","classMap","dir","styleMap","nothing","ref","focusableRef","inputId","cond","disabled","required","readonly","ifDefined","name","placeholder","handleChange","handleKeydown","getDescribedBy","getInvalid","autocomplete","renderError","key","form","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","reflect","Boolean","attribute","customElement"],"mappings":"mnCAAe,uTACM,yBACD,yuGCAPA,EAKX,WAAAC,CAAYC,EAAsCC,GAAAC,KAAMD,OAANA,EAH1CC,KAAcC,gBAAG,EAIvBH,EAAKI,cAAcF,MAEnBA,KAAKG,SAAW,IAAIC,gBAAe,EAAEC,MACnC,MAAOC,GAAiBD,EAAMC,cAC9BN,KAAKM,cAAgBA,EACrBR,EAAKS,eAAe,GAEvB,CAED,cAAIC,SACF,OAAyB,UAAlBR,KAAKM,qBAAa,IAAAG,OAAA,EAAAA,EAAED,UAC5B,CAED,aAAIE,SACF,OAAyB,UAAlBV,KAAKM,qBAAa,IAAAG,OAAA,EAAAA,EAAEC,SAC5B,CAED,WAAAC,GACOX,KAAKC,iBACRD,KAAKG,SAASS,QAAQZ,KAAKD,UAC3BC,KAAKC,gBAAiB,EAEzB,CAED,aAAAY,GAEMb,KAAKC,gBACPD,KAAKG,SAASS,QAAQZ,KAAKD,SAE9B,CAED,gBAAAe,GACEd,KAAKG,SAASY,YACf,ECfHC,EAAKC,aAAaC,GAElB,MAAMC,EAAMC,GAAoBA,EAAQ,GAAGA,WAAYC,EAsBxC,IAAMC,EAAN,cAAoBC,EACjCC,EAAoBC,EAAkBC,EAAcC,EAAWC,EAAeC,SADjE,WAAAhC,uBAOLG,KAAA8B,cAAgB,IAAIlC,EAAiBI,MAAM,IAAMA,KAAK+B,YACtD/B,KAAAgC,YAAc,IAAIpC,EAAiBI,MAAM,IAAMA,KAAKiC,UACpDjC,KAAAkC,UAAY,IAAIC,EAAoBnC,MAKfA,KAAIoC,KAC/B,OAK0CpC,KAAMqC,QAAG,EAKOrC,KAAesC,qBAAYjB,EA8D/ErB,KAAAuC,kBAAqBC,IAC3B,MAAMzC,EAASyC,EAAEzC,OAGbC,KAAKsC,iBC7IG,SAAWG,EAA2BC,GACpD,MAAMtB,MAAEA,GAAUqB,EACZE,EAASF,EAAQG,eAEjBC,EAAezB,EAAM0B,MAAM,EAAGH,GAC9BI,EAAc3B,EAAM0B,MAAMH,EAAQvB,EAAM4B,QAExCC,EAAuBJ,EAAaK,QAAQR,EAAO,IAGnDS,EAAWF,EAFSF,EAAYG,QAAQR,EAAO,IAG/CU,EAAYH,EAAqBD,OAEvCP,EAAQrB,MAAQ+B,EAChBV,EAAQG,eAAiBQ,EACzBX,EAAQY,aAAeD,CAGzB,CD4HME,CAAWvD,EAAQ,IAAIwD,OAAOvD,KAAKsC,gBAAiB,MAEtDtC,KAAKwD,YAAYhB,EAAE,CAEtB,CArEC,MAAAiB,SACE,MAAMC,EAAyB,WAAd1D,KAAKoC,KAEtB,OAAOuB,CAAI,GACP3D,KAAK4D,4BAGGC,EAAS,CACf,qBAAqB,EACrB,SAAiC,QAAvB7D,KAAKkC,UAAU4B,iBAEnBC,EAAS,CACf,+BAAgC5C,EAAGnB,KAAK8B,cAActB,YACtD,6BAA8BW,EAAGnB,KAAKgC,YAAYxB,qCAIlC,WAAdR,KAAKoC,KAAoBuB,CAAI,mDAAqDK,kBAGlFC,EAAIjE,KAAKkE,qBACNlE,KAAKmE,kCAEHT,GAA0B,SAAd1D,KAAKoC,KAAkB,OAASpC,KAAKoC,oBAC5CgC,EAAKV,EAAU,wBACjBU,EAAKV,EAAU,yBACb1D,KAAKqE,wBACLrE,KAAKsE,wBACLtE,KAAKuE,mBACVC,EAAUxE,KAAKyE,kBACH,QAAVhE,EAAAT,KAAKoB,aAAK,IAAAX,EAAAA,EAAI,oBACT+D,EAAUxE,KAAK0E,yBACpB1E,KAAKuC,+BACJvC,KAAK2E,2BACJ3E,KAAK4E,oCACGJ,EAAUxE,KAAK6E,oCACnBL,EAAUxE,KAAK8E,mDAEf9E,KAAK+E,+CAKtB/E,KAAKgF,eAEV,CAEO,aAAAJ,CAAcpC,GACpB,GAAc,UAAVA,EAAEyC,IACJ,OAGF,MAAMC,KAAEA,GAASlF,KAEjB,GAAIkF,EAAM,CACR,MAAMC,EEhIN,SAA0BD,GAG9B,IAAIC,EAASD,EAAKE,cAAiC,0BAE9CD,GAAUD,EAAKG,KAElBF,EADaD,EAAKI,cACJF,cAAiC,eAAeF,EAAKG,QAGrE,OAAOF,CACT,CFqHqBI,CAAgBL,GAC/BM,YAAW,IAAML,aAAA,EAAAA,EAAQM,SAAS,EACnC,CACF,GAlFMnE,EAAMoE,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAE5BC,EAAA,CAApCC,EAAM,uBAAyD1E,EAAA2E,UAAA,iBAAA,GAC7BF,EAAA,CAAlCC,EAAM,qBAAqD1E,EAAA2E,UAAA,eAAA,GAQ/BF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KACb7E,EAAA2E,UAAA,YAAA,GAKoCF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAM/D,KAAMgE,WAAyB9E,EAAA2E,UAAA,cAAA,GAKEF,EAAA,CAA3DG,EAAS,CAAEC,SAAS,EAAME,UAAW,sBAA0D/E,EAAA2E,UAAA,uBAAA,GAzB7E3E,EAAKyE,EAAA,CADzBO,EAAc,eACMhF,SAAAA"}
+{"version":3,"file":"Input.js","sources":["../../icons/lib/assets/navigation-search.js","../src/common/controllers/ResizeController.ts","../src/input/Input.ts","../src/common/input.ts","../src/common/form.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n","import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nexport class ResizeController implements ReactiveController {\n  private observer: ResizeObserver\n  private hadFirstUpdate = false\n  private borderBoxSize?: ResizeObserverSize\n\n  constructor(host: ReactiveControllerHost, private target: () => HTMLElement) {\n    host.addController(this)\n\n    this.observer = new ResizeObserver(([entry]) => {\n      const [borderBoxSize] = entry.borderBoxSize\n      this.borderBoxSize = borderBoxSize\n      host.requestUpdate()\n    })\n  }\n\n  get inlineSize() {\n    return this.borderBoxSize?.inlineSize\n  }\n\n  get blockSize() {\n    return this.borderBoxSize?.blockSize\n  }\n\n  hostUpdated() {\n    if (!this.hadFirstUpdate) {\n      this.observer.observe(this.target())\n      this.hadFirstUpdate = true\n    }\n  }\n\n  hostConnected() {\n    // in case the host has rendered, disconnected, and is now reconnected\n    if (this.hadFirstUpdate) {\n      this.observer.observe(this.target())\n    }\n  }\n\n  hostDisconnected() {\n    this.observer.disconnect()\n  }\n}\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { styleMap } from \"lit/directives/style-map.js\"\n\nimport * as searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.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 \"./Input.css\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { ResizeController } from \"../common/controllers/ResizeController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { getSubmitButton } from \"../common/form.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport Icon from \"../icon/Icon.js\"\n\nIcon.registerIcon(searchIcon)\n\nconst px = (value?: number) => (value ? `${value}px` : undefined)\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\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 input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon or prefix at the start of the input.\n * @slot end - Optional slot used to place an icon or suffix at the end of the input.\n *\n * @cssprop [--n-input-inline-size=240px] - Controls the inline size, or width, of the input.\n * @cssprop [--n-input-background=var(--n-color-active)] - Controls the background of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-color=var(--n-color-text)] - Controls the text color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-color=var(--n-color-border-strong)] - Controls the border color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-input-text-align=start] - Controls the alignment of text within the input itself.\n */\n@customElement(\"nord-input\")\nexport default class Input extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement)))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(\"slot[name='start']\") private startSlot!: HTMLSlotElement\n  @query(\"slot[name='end']\") private endSlot!: HTMLSlotElement\n  private startObserver = new ResizeController(this, () => this.startSlot)\n  private endObserver = new ResizeController(this, () => this.endSlot)\n  private direction = new DirectionController(this)\n\n  /**\n   * The type of the input.\n   */\n  @property({ reflect: true }) type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" | \"unit\" =\n    \"text\"\n\n  /**\n   * Controls whether the input expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * Optionally disallow certain characters from being used inside the input, using a regex pattern.\n   */\n  @property({ reflect: true, attribute: \"disallow-pattern\" }) disallowPattern?: string = undefined\n\n  render() {\n    const isNumber = this.type === \"number\"\n\n    return html`\n      ${this.renderLabel()}\n\n      <div\n        class=${classMap({\n          \"n-input-container\": true,\n          \"is-rtl\": this.direction.dir === \"rtl\",\n        })}\n        style=${styleMap({\n          \"--_n-input-start-inline-size\": px(this.startObserver.inlineSize),\n          \"--_n-input-end-inline-size\": px(this.endObserver.inlineSize),\n        })}\n      >\n        <slot name=\"start\">\n          ${this.type === \"search\" ? html`<nord-icon name=\"navigation-search\"></nord-icon>` : nothing}\n        </slot>\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          type=${isNumber || this.type === \"unit\" ? \"text\" : this.type}\n          inputmode=${cond(isNumber, \"numeric\")}\n          pattern=${cond(isNumber, \"[0-9]*\")}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          ?readonly=${this.readonly}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @input=${this.handleInputChange}\n          @change=${this.handleChange}\n          @keydown=${this.handleKeydown}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          spellcheck=\"false\"\n          autocomplete=${this.autocomplete as any}\n        />\n        <slot name=\"end\"></slot>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key !== \"Enter\") {\n      return\n    }\n\n    const { form } = this\n\n    if (form) {\n      const button = getSubmitButton(form)\n      setTimeout(() => button?.click(), 0)\n    }\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    if (this.disallowPattern) {\n      cleanValue(target, new RegExp(this.disallowPattern, \"g\"))\n    }\n    this.handleInput(e)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-input\": Input\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","/**\n * Finds a form's submit button. First looking for a button inside form,\n * and then looking for a button whose form attribute is equal to the ID of the form.\n */\nexport function getSubmitButton(form: HTMLFormElement): HTMLButtonElement | null {\n  // we can get away with just looking for native <button> elements,\n  // rather than our component, since our button component renders one to light dom.\n  let button = form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)\n\n  if (!button && form.id) {\n    const root = form.getRootNode() as ShadowRoot | Document\n    button = root.querySelector<HTMLButtonElement>(`button[form=${form.id}]`)\n  }\n\n  return button\n}\n"],"names":["ResizeController","constructor","host","target","this","hadFirstUpdate","addController","observer","ResizeObserver","entry","borderBoxSize","requestUpdate","inlineSize","_a","blockSize","hostUpdated","observe","hostConnected","hostDisconnected","disconnect","Icon","registerIcon","searchIcon","px","value","undefined","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","startObserver","startSlot","endObserver","endSlot","direction","DirectionController","type","expand","disallowPattern","handleInputChange","e","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","isNumber","html","renderLabel","classMap","dir","styleMap","nothing","ref","focusableRef","inputId","cond","disabled","required","readonly","ifDefined","name","placeholder","handleChange","handleKeydown","getDescribedBy","getInvalid","autocomplete","renderError","key","form","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","reflect","Boolean","attribute","customElement"],"mappings":"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"}