@nordhealth/components 3.0.0 → 3.1.1

package/lib/CommandMenuAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandMenuAction.js","sources":["../../icons/lib/assets/arrow-right.js","../../icons/lib/assets/arrow-left.js","../../icons/lib/assets/keyboard-option.js","../src/command-menu/CommandMenuAction.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m14.7098 10.7401-8.63996 8.67-1.42-1.41 7.93996-7.97-7.99996-8.03001 1.42-1.410002 8.69996 8.740002c.39.39.39 1.02001 0 1.41001z\" fill=\"currentColor\"/></svg>'\nexport const title = \"arrow-right\"\nexport const tags = \"nordicon arrow right caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"currentColor\"><path d=\"m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z\"/><path d=\"m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z\"/></g></svg>'\nexport const title = \"arrow-left\"\nexport const tags = \"nordicon arrow left caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.5 14h6.5v2h-6.5c-.63 0-1.22-.3-1.6-.8l-5.4-7.2h-6.5v-2h6.5c.63 0 1.22.3 1.6.8zm-1.5-8v2h8v-2z\" fill=\"currentColor\"/></svg>'\nexport const title = \"keyboard-option\"\nexport const tags = \"nordicon keyboard option key shortcut\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as chevronIconRight from \"@nordhealth/icons/lib/assets/arrow-right.js\"\nimport * as chevronIconLeft from \"@nordhealth/icons/lib/assets/arrow-left.js\"\nimport * as altKeyIcon from \"@nordhealth/icons/lib/assets/keyboard-option.js\"\n\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport style from \"./CommandMenuAction.css\"\n\nconst KEY_REGEX = /(?:Key|Digit)([A-Z0-9])/g\nconst isMacintosh = () => navigator.platform.indexOf(\"Mac\") > -1\n\nIcon.registerIcon(chevronIconLeft)\nIcon.registerIcon(chevronIconRight)\nIcon.registerIcon(altKeyIcon)\n\n/**\n * Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.\n *\n * @status internal\n */\n@customElement(\"nord-command-menu-action\")\nexport default class CommandMenuAction extends LitElement {\n  static styles = style\n\n  private direction = new DirectionController(this)\n\n  @property({ type: Object }) command!: ICommandMenuAction\n\n  @property({ type: Boolean }) selected = false\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          \"n-selected\": this.selected,\n          \"n-command\": true,\n        })}\n      >\n        <div aria-hidden=\"true\" class=\"n-command-icon\">\n          <nord-icon size=\"s\" name=${this.getIconName()}></nord-icon>\n        </div>\n        <div class=\"n-title\">${this.command.title}</div>\n        ${this.renderShortcut()}\n      </div>\n    `\n  }\n\n  /**\n   * Scroll to show element\n   */\n  @observe(\"selected\")\n  protected ensureInView() {\n    if (this.selected) {\n      requestAnimationFrame(() => this.scrollIntoView({ block: \"nearest\" }))\n    }\n  }\n\n  private getIconName() {\n    if (this.command.icon) {\n      return this.command.icon\n    }\n\n    return this.direction.isLTR ? chevronIconRight.title : chevronIconLeft.title\n  }\n\n  private renderShortcut() {\n    if (!this.command.shortcut) {\n      return nothing\n    }\n\n    const keys = this.command.shortcut.replace(KEY_REGEX, \"$1\")\n\n    return html`\n      <nord-visually-hidden>, ${keys}</nord-visually-hidden>\n\n      <div aria-hidden=\"true\" class=\"n-shortcuts\">\n        ${keys\n          .split(\"+\")\n          .map(\n            key =>\n              html`<div class=\"n-shortcut\">\n                ${key.toLowerCase() === \"alt\" && isMacintosh()\n                  ? html`<nord-icon name=${altKeyIcon.title} size=\"s\"></nord-icon>`\n                  : key}\n              </div>`\n          )}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-command-menu-action\": CommandMenuAction\n  }\n}\n"],"names":["title","KEY_REGEX","Icon","registerIcon","chevronIconLeft","chevronIconRight","altKeyIcon","CommandMenuAction","LitElement","constructor","this","direction","DirectionController","selected","render","html","classMap","getIconName","command","renderShortcut","ensureInView","requestAnimationFrame","scrollIntoView","block","icon","isLTR","chevronIconRight.title","chevronIconLeft.title","shortcut","nothing","keys","replace","split","map","key","toLowerCase","navigator","platform","indexOf","altKeyIcon.title","styles","style","__decorate","property","type","Object","prototype","Boolean","observe","customElement"],"mappings":"0fACO,MAAMA,EAAQ,0DADN,kPAEK,yDCDb,MAAMA,EAAQ,yDADN,2YAEK,wDCDb,MAAMA,EAAQ,8DADN,mNAEK,wzCCadC,EAAY,2BAGlBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAQlB,IAAqBC,EAArB,cAA+CC,EAA/CC,kCAGUC,KAAAC,UAAY,IAAIC,EAAoBF,MAIfA,KAAQG,UAAG,CA6DzC,CA3DUC,SACP,OAAOC,CAAI,eAECC,EAAS,CACf,aAAcN,KAAKG,SACnB,aAAa,iFAIcH,KAAKO,yDAEXP,KAAKQ,QAAQlB,cAClCU,KAAKS,wBAGZ,CAMSC,eACJV,KAAKG,UACPQ,uBAAsB,IAAMX,KAAKY,eAAe,CAAEC,MAAO,aAE5D,CAEON,cACN,OAAIP,KAAKQ,QAAQM,KACRd,KAAKQ,QAAQM,KAGfd,KAAKC,UAAUc,MAAQC,EAAyBC,CACxD,CAEOR,iBACN,IAAKT,KAAKQ,QAAQU,SAChB,OAAOC,EAGT,MAAMC,EAAOpB,KAAKQ,QAAQU,SAASG,QAAQ9B,EAAW,MAEtD,OAAOc,CAAI,2BACiBe,uEAGtBA,EACCE,MAAM,KACNC,KACCC,GACEnB,CAAI,2BACsB,QAAtBmB,EAAIC,eAxEIC,UAAUC,SAASC,QAAQ,QAAU,EAyE3CvB,CAAI,oBAAmBwB,2BACvBL,mBAKjB,GAlEM3B,EAAMiC,OAAGC,EAIYC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAAsCtC,EAAAuC,UAAA,eAAA,GAE3BJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,WAA2BxC,EAAAuC,UAAA,gBAAA,GAuBnCJ,EAAA,CADTM,EAAQ,aAKRzC,EAAAuC,UAAA,eAAA,MAlCkBvC,EAAiBmC,EAAA,CADrCO,EAAc,6BACM1C,SAAAA"}
+{"version":3,"file":"CommandMenuAction.js","sources":["../../icons/lib/assets/arrow-right.js","../../icons/lib/assets/arrow-left.js","../../icons/lib/assets/keyboard-option.js","../src/command-menu/CommandMenuAction.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m14.7098 10.7401-8.63996 8.67-1.42-1.41 7.93996-7.97-7.99996-8.03001 1.42-1.410002 8.69996 8.740002c.39.39.39 1.02001 0 1.41001z\" fill=\"currentColor\"/></svg>'\nexport const title = \"arrow-right\"\nexport const tags = \"nordicon arrow right caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"currentColor\"><path d=\"m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z\"/><path d=\"m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z\"/></g></svg>'\nexport const title = \"arrow-left\"\nexport const tags = \"nordicon arrow left caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.5 14h6.5v2h-6.5c-.63 0-1.22-.3-1.6-.8l-5.4-7.2h-6.5v-2h6.5c.63 0 1.22.3 1.6.8zm-1.5-8v2h8v-2z\" fill=\"currentColor\"/></svg>'\nexport const title = \"keyboard-option\"\nexport const tags = \"nordicon keyboard option key shortcut\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as chevronIconRight from \"@nordhealth/icons/lib/assets/arrow-right.js\"\nimport * as chevronIconLeft from \"@nordhealth/icons/lib/assets/arrow-left.js\"\nimport * as altKeyIcon from \"@nordhealth/icons/lib/assets/keyboard-option.js\"\n\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport style from \"./CommandMenuAction.css\"\n\nconst KEY_REGEX = /(?:Key|Digit)([A-Z0-9])/g\nconst isMacintosh = () => navigator.platform.indexOf(\"Mac\") > -1\n\nIcon.registerIcon(chevronIconLeft)\nIcon.registerIcon(chevronIconRight)\nIcon.registerIcon(altKeyIcon)\n\n/**\n * Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.\n *\n * @status internal\n */\n@customElement(\"nord-command-menu-action\")\nexport default class CommandMenuAction extends LitElement {\n  static styles = style\n\n  private direction = new DirectionController(this)\n\n  @property({ type: Object }) command!: ICommandMenuAction\n\n  @property({ type: Boolean }) selected = false\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          \"n-selected\": this.selected,\n          \"n-command\": true,\n        })}\n      >\n        <div aria-hidden=\"true\" class=\"n-command-icon\">\n          <nord-icon size=\"s\" name=${this.getIconName()}></nord-icon>\n        </div>\n        <div class=\"n-title\">${this.command.title}</div>\n        ${this.renderShortcut()}\n      </div>\n    `\n  }\n\n  /**\n   * Scroll to show element\n   */\n  @observe(\"selected\")\n  protected ensureInView() {\n    if (this.selected) {\n      requestAnimationFrame(() => this.scrollIntoView({ block: \"nearest\" }))\n    }\n  }\n\n  private getIconName() {\n    if (this.command.icon) {\n      return this.command.icon\n    }\n\n    return this.direction.isLTR ? chevronIconRight.title : chevronIconLeft.title\n  }\n\n  private renderShortcut() {\n    if (!this.command.shortcut) {\n      return nothing\n    }\n\n    const keys = this.command.shortcut.replace(KEY_REGEX, \"$1\")\n\n    return html`\n      <nord-visually-hidden>, ${keys}</nord-visually-hidden>\n\n      <div aria-hidden=\"true\" class=\"n-shortcuts\">\n        ${keys\n          .split(\"+\")\n          .map(\n            key =>\n              html`<div class=\"n-shortcut\">\n                ${key.toLowerCase() === \"alt\" && isMacintosh()\n                  ? html`<nord-icon name=${altKeyIcon.title} size=\"s\"></nord-icon>`\n                  : key}\n              </div>`\n          )}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-command-menu-action\": CommandMenuAction\n  }\n}\n"],"names":["KEY_REGEX","Icon","registerIcon","chevronIconLeft","chevronIconRight","altKeyIcon","CommandMenuAction","LitElement","constructor","this","direction","DirectionController","selected","render","html","classMap","getIconName","command","title","renderShortcut","ensureInView","requestAnimationFrame","scrollIntoView","block","icon","isLTR","shortcut","nothing","keys","replace","split","map","key","toLowerCase","navigator","platform","indexOf","styles","style","__decorate","property","type","Object","prototype","Boolean","observe","customElement"],"mappings":"siBAAe,2OACM,mBACD,qGCFL,oYACM,kBACD,oGCFL,4MACM,uBACD,wzCCadA,EAAY,2BAGlBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAQlB,IAAqBC,EAArB,cAA+CC,EAA/CC,kCAGUC,KAAAC,UAAY,IAAIC,EAAoBF,MAIfA,KAAQG,UAAG,CA6DzC,CA3DUC,SACP,OAAOC,CAAI,eAECC,EAAS,CACf,aAAcN,KAAKG,SACnB,aAAa,iFAIcH,KAAKO,yDAEXP,KAAKQ,QAAQC,cAClCT,KAAKU,wBAGZ,CAMSC,eACJX,KAAKG,UACPS,uBAAsB,IAAMZ,KAAKa,eAAe,CAAEC,MAAO,aAE5D,CAEOP,cACN,OAAIP,KAAKQ,QAAQO,KACRf,KAAKQ,QAAQO,KAGff,KAAKC,UAAUe,MHpEL,cCAA,YEqElB,CAEON,iBACN,IAAKV,KAAKQ,QAAQS,SAChB,OAAOC,EAGT,MAAMC,EAAOnB,KAAKQ,QAAQS,SAASG,QAAQ7B,EAAW,MAEtD,OAAOc,CAAI,2BACiBc,uEAGtBA,EACCE,MAAM,KACNC,KACCC,GACElB,CAAI,2BACsB,QAAtBkB,EAAIC,eAxEIC,UAAUC,SAASC,QAAQ,QAAU,EAyE3CtB,CAAI,oBDxFH,2CCyFDkB,mBAKjB,GAlEM1B,EAAM+B,OAAGC,EAIYC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAAsCpC,EAAAqC,UAAA,eAAA,GAE3BJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,WAA2BtC,EAAAqC,UAAA,gBAAA,GAuBnCJ,EAAA,CADTM,EAAQ,aAKRvC,EAAAqC,UAAA,eAAA,MAlCkBrC,EAAiBiC,EAAA,CADrCO,EAAc,6BACMxC,SAAAA"}

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-2f8275b7.js";import{e as r}from"./property-03f59dce.js";import{i as n}from"./query-2d22378e.js";import{n as l}from"./ref-f75a30b7.js";import{l as d}from"./if-defined-10508457.js";import{c as p}from"./interface-close-small-f26b0299.js";import{F as c}from"./FocusableMixin-003e1094.js";import{F as h}from"./FormAssociatedMixin-895cf600.js";import{I as m}from"./InputMixin-e15dd8f7.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-af3b4ea6.js";import{LocalizeController as y}from"./LocalizeController.js";import $ from"./Icon.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-9f8752b0.js";import"./Stack.js";import{s as k}from"./Component-253ecb24.js";import{s as D}from"./FormField-0783cb5a.js";import{R as x,s as w}from"./TextField-c2e49b85.js";import{isoAdapter as z}from"./date-adapter.js";import{c as C}from"./cond-77258def.js";import{S as F}from"./SizeMixin-bc2098f4.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./state-70f38ceb.js";import"./class-map-4a0dec4a.js";import"./collection-bba319d3.js";import"./tinykeys.module-84e6cc41.js";import"./arrow-left-small-dd181059.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"./IconManager.js";import"./AutocompleteMixin-60503685.js";import"./LightDomController-5c53b3f4.js";import"./Spinner.js";import"./positioning-a572d126.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=z,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,{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,w,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-2f8275b7.js";import{e as r}from"./property-03f59dce.js";import{i as n}from"./query-2d22378e.js";import{n as l}from"./ref-f75a30b7.js";import{l as d}from"./if-defined-10508457.js";import{c as p}from"./interface-close-small-f26b0299.js";import{F as c}from"./FocusableMixin-003e1094.js";import{F as h}from"./FormAssociatedMixin-895cf600.js";import{I as m}from"./InputMixin-e15dd8f7.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-3cb36c5e.js";import{LocalizeController as y}from"./LocalizeController.js";import $ from"./Icon.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-16e2ca1f.js";import"./Stack.js";import{s as k}from"./Component-253ecb24.js";import{s as D}from"./FormField-0783cb5a.js";import{R as x,s as z}from"./TextField-b455a6dd.js";import{isoAdapter as w}from"./date-adapter.js";import{c as C}from"./cond-77258def.js";import{S as F}from"./SizeMixin-bc2098f4.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./state-70f38ceb.js";import"./class-map-4a0dec4a.js";import"./collection-bba319d3.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-75ce20b3.js";import"./AutocompleteMixin-60503685.js";import"./LightDomController-5c53b3f4.js";import"./Spinner.js";import"./positioning-a572d126.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,{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};
 //# 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      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","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() 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      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","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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"}

package/lib/Dropdown.js

@@ -1,2 +1,2 @@
-import{i as o,x as e,s as n,_ as t,e as s}from"./query-assigned-elements-2f8275b7.js";import{e as r}from"./property-03f59dce.js";import{i}from"./query-2d22378e.js";import{l as d}from"./if-defined-10508457.js";import{F as p}from"./Popout-9f8752b0.js";import{s as l}from"./Component-253ecb24.js";import"./state-70f38ceb.js";import"./positioning-a572d126.js";import"./LightDismissController-a2645ae6.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-773c79f4.js";import"./events-d9666e88.js";import"./DirectionController-f35f5476.js";import"./observe-a9c6dfb6.js";const a=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)}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:80vh;max-inline-size:none;overflow-y:auto}}::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}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)}`;let c=class extends(p(n)){constructor(){super(...arguments),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="${d(this.align)}" position="${d(this.position)}" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}"><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){var o;this.open=!0,null===(o=this.querySelector("nord-dropdown-item"))||void 0===o||o.focus()}handleClose(){this.open=!1}hide(o){return this.popout.hide(o)}show(){return this.popout.show()}};c.styles=[l,a],c.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},t([i("nord-popout",!0)],c.prototype,"popout",void 0),t([r({reflect:!0,type:Boolean})],c.prototype,"expand",void 0),t([r({reflect:!0})],c.prototype,"size",void 0),c=t([s("nord-dropdown")],c);var m=c;export{m as default};
+import{i as o,x as e,s as t,_ as n,e as r}from"./query-assigned-elements-2f8275b7.js";import{e as s}from"./property-03f59dce.js";import{i as d}from"./query-2d22378e.js";import{l as a}from"./if-defined-10508457.js";import{S as i}from"./SlotController-d733c575.js";import{F as l}from"./Popout-16e2ca1f.js";import{o as p}from"./observe-a9c6dfb6.js";import{s as c}from"./Component-253ecb24.js";import"./EventController-d99ebeef.js";import"./state-70f38ceb.js";import"./positioning-a572d126.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};
 //# sourceMappingURL=Dropdown.js.map

package/lib/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { FloatingMixin } from \"../common/mixins/FloatingComponentMixin.js\"\n\nimport type Popout from \"../popout/Popout.js\"\nimport \"../popout/Popout.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Dropdown.css\"\n\n/**\n * Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n *\n * @status ready\n * @category action\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n *\n * @cssprop [--n-dropdown-size=250px] - Controls the inline size, or width, of the dropdown. Will resize up to 1.5 times to account for larger content.\n */\n@customElement(\"nord-dropdown\")\nexport default class Dropdown extends FloatingMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  /**\n   * we delegate focus, to ensure focus does not move to body if you click\n   * some whitespace or a dropdown-group heading, as this would close the dropdown\n   * @internal\n   */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n  @query(\"nord-popout\", true) private popout!: Popout\n\n  /**\n   * Controls whether the toggle slot expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * The size of the dropdown. This affects the minimum and maximum inline-size\n   * of the dropdown.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const toggle = this.querySelector(`[slot=\"toggle\"]`)\n    toggle?.setAttribute(\"aria-haspopup\", \"true\")\n  }\n\n  render() {\n    return html`\n      <div class=\"n-dropdown\" @focusout=${this.handleBlur}>\n        <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n        <nord-popout\n          id=\"popout\"\n          align=${ifDefined(this.align)}\n          position=${ifDefined(this.position)}\n          ?open=${this.open}\n          @open=${this.handleOpen}\n          @close=${this.handleClose}\n        >\n          <div class=\"n-dropdown-content\">\n            <slot></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private handleBlur(e: FocusEvent) {\n    const relatedTarget = e.relatedTarget as Node\n\n    // Safari will set relatedTarget to null when clicking on the trigger button\n    // because it doesn't focus buttons on click.\n    // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n    // so we only run this logic if relatedTarget is set, which sidesteps this issue\n    if (relatedTarget && !this.contains(relatedTarget)) {\n      this.popout.hide(false)\n    }\n  }\n\n  private handleOpen() {\n    this.open = true\n    this.querySelector(\"nord-dropdown-item\")?.focus()\n  }\n\n  private handleClose() {\n    this.open = false\n  }\n\n  /**\n   * Hide the dropdown programmatically.\n   * This method delegates to the Dropdown's internal Popout component.\n   * See [Popout's hide() method](/components/popout#methods-hide) for more details.\n   * @param moveFocusToButton A boolean option to move the focus to the original button that opens the dropdown.\n   */\n  hide(moveFocusToButton?: boolean): Promise<TransitionEvent | void> {\n    return this.popout.hide(moveFocusToButton)\n  }\n\n  /**\n   * Show the dropdown programmatically.\n   * This method delegates to the Dropdown's internal Popout component.\n   * See [Popout's show() method](/components/popout#methods-hide) for more details.\n   */\n  show(): Promise<TransitionEvent | void> {\n    return this.popout.show()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown\": Dropdown\n  }\n}\n"],"names":["Dropdown","FloatingMixin","LitElement","constructor","this","expand","size","connectedCallback","super","toggle","querySelector","setAttribute","render","html","handleBlur","ifDefined","align","position","open","handleOpen","handleClose","e","relatedTarget","contains","popout","hide","_a","focus","moveFocusToButton","show","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","reflect","type","Boolean","customElement"],"mappings":"8iDAwBA,IAAqBA,EAArB,cAAsCC,EAAcC,IAApDC,kCAe8CC,KAAMC,QAAG,EAMxBD,KAAIE,KAAoB,GAoEtD,CAlECC,oBACEC,MAAMD,oBAEN,MAAME,EAASL,KAAKM,cAAc,mBAClCD,SAAAA,EAAQE,aAAa,gBAAiB,OACvC,CAEDC,SACE,OAAOC,CAAI,sCAC2BT,KAAKU,iGAI7BC,EAAUX,KAAKY,qBACZD,EAAUX,KAAKa,qBAClBb,KAAKc,gBACLd,KAAKe,uBACJf,KAAKgB,sFAQrB,CAEON,WAAWO,GACjB,MAAMC,EAAgBD,EAAEC,cAMpBA,IAAkBlB,KAAKmB,SAASD,IAClClB,KAAKoB,OAAOC,MAAK,EAEpB,CAEON,mBACNf,KAAKc,MAAO,EAC4B,QAAxCQ,EAAAtB,KAAKM,cAAc,6BAAqB,IAAAgB,GAAAA,EAAEC,OAC3C,CAEOP,cACNhB,KAAKc,MAAO,CACb,CAQDO,KAAKG,GACH,OAAOxB,KAAKoB,OAAOC,KAAKG,EACzB,CAODC,OACE,OAAOzB,KAAKoB,OAAOK,MACpB,GAvFM7B,EAAA8B,OAAS,CAACC,EAAgBC,GAO1BhC,EAAAiC,kBAAoB,IAAK/B,EAAW+B,kBAAmBC,gBAAgB,GAE1CC,EAAA,CAAnCC,EAAM,eAAe,IAA6BpC,EAAAqC,UAAA,cAAA,GAKPF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBzC,EAAAqC,UAAA,cAAA,GAM7BF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAmCvC,EAAAqC,UAAA,YAAA,GArBrCrC,EAAQmC,EAAA,CAD5BO,EAAc,kBACM1C,SAAAA"}
+{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { FloatingMixin } from \"../common/mixins/FloatingComponentMixin.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport type Popout from \"../popout/Popout.js\"\nimport \"../popout/Popout.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Dropdown.css\"\n\n/**\n * Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n *\n * @status ready\n * @category action\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n * @slot header - Optional slot that holds a header for the dropdown.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n *\n * @cssprop [--n-dropdown-size=250px] - Controls the inline size, or width, of the dropdown. Will resize up to 1.5 times to account for larger content.\n */\n@customElement(\"nord-dropdown\")\nexport default class Dropdown extends FloatingMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  /**\n   * we delegate focus, to ensure focus does not move to body if you click\n   * some whitespace or a dropdown-group heading, as this would close the dropdown\n   * @internal\n   */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n  private headerSlot = new SlotController(this, \"header\")\n  private headerEndSlot = new SlotController(this, \"header-end\")\n\n  @query(\".n-dropdown-content\") private list!: HTMLElement\n  @query(\"nord-popout\", true) private popout!: Popout\n\n  /**\n   * Controls whether the toggle slot expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * The size of the dropdown. This affects the minimum and maximum inline-size\n   * of the dropdown.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const toggle = this.querySelector(`[slot=\"toggle\"]`)\n    toggle?.setAttribute(\"aria-haspopup\", \"true\")\n  }\n\n  render() {\n    return html`\n      <div class=\"n-dropdown\" @focusout=${this.handleBlur}>\n        <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n        <nord-popout\n          id=\"popout\"\n          align=${ifDefined(this.align)}\n          position=${ifDefined(this.position)}\n          ?open=${this.open}\n          @open=${this.handleOpen}\n          @close=${this.handleClose}\n        >\n          <div class=\"n-dropdown-header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n            <slot name=${this.headerSlot.slotName}></slot>\n            <slot name=${this.headerEndSlot.slotName}></slot>\n          </div>\n          <div class=\"n-dropdown-content\">\n            <slot></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private handleBlur(e: FocusEvent) {\n    const relatedTarget = e.relatedTarget as Node\n\n    // Safari will set relatedTarget to null when clicking on the trigger button\n    // because it doesn't focus buttons on click.\n    // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n    // so we only run this logic if relatedTarget is set, which sidesteps this issue\n    if (relatedTarget && !this.contains(relatedTarget)) {\n      this.popout.hide(false)\n    }\n  }\n\n  private handleOpen() {\n    this.open = true\n  }\n\n  private handleClose() {\n    this.open = false\n  }\n\n  @observe(\"open\", \"updated\")\n  protected handleOpenChange() {\n    if (this.open) {\n      const focusTarget =\n        this.querySelector<HTMLElement>(\"[autofocus]\") ??\n        this.querySelector<HTMLElement>(\"nord-dropdown-item, nord-message\")\n\n      focusTarget?.focus()\n      this.list.scrollTop = 0\n    }\n  }\n\n  /**\n   * Hide the dropdown programmatically.\n   * This method delegates to the Dropdown's internal Popout component.\n   * See [Popout's hide() method](/components/popout#methods-hide) for more details.\n   * @param moveFocusToButton A boolean option to move the focus to the original button that opens the dropdown.\n   */\n  hide(moveFocusToButton?: boolean): Promise<TransitionEvent | void> {\n    return this.popout.hide(moveFocusToButton)\n  }\n\n  /**\n   * Show the dropdown programmatically.\n   * This method delegates to the Dropdown's internal Popout component.\n   * See [Popout's show() method](/components/popout#methods-hide) for more details.\n   */\n  show(): Promise<TransitionEvent | void> {\n    return this.popout.show()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown\": Dropdown\n  }\n}\n"],"names":["Dropdown","FloatingMixin","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","expand","size","connectedCallback","super","toggle","querySelector","setAttribute","render","html","handleBlur","ifDefined","align","position","open","handleOpen","handleClose","isEmpty","slotName","e","relatedTarget","contains","popout","hide","handleOpenChange","focusTarget","_a","focus","list","scrollTop","moveFocusToButton","show","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","reflect","type","Boolean","observe","customElement"],"mappings":"mhFA4BA,IAAqBA,EAArB,cAAsCC,EAAcC,IAApDC,kCAUUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAaG,cAAG,IAAID,EAAeF,KAAM,cAQLA,KAAMI,QAAG,EAMxBJ,KAAIK,KAAoB,GAmFtD,CAjFCC,oBACEC,MAAMD,oBAEN,MAAME,EAASR,KAAKS,cAAc,mBAClCD,SAAAA,EAAQE,aAAa,gBAAiB,OACvC,CAEDC,SACE,OAAOC,CAAI,sCAC2BZ,KAAKa,iGAI7BC,EAAUd,KAAKe,qBACZD,EAAUd,KAAKgB,qBAClBhB,KAAKiB,gBACLjB,KAAKkB,uBACJlB,KAAKmB,wDAE2BnB,KAAKC,WAAWmB,SAAWpB,KAAKG,cAAciB,wBACxEpB,KAAKC,WAAWoB,gCAChBrB,KAAKG,cAAckB,gGAQzC,CAEOR,WAAWS,GACjB,MAAMC,EAAgBD,EAAEC,cAMpBA,IAAkBvB,KAAKwB,SAASD,IAClCvB,KAAKyB,OAAOC,MAAK,EAEpB,CAEOR,aACNlB,KAAKiB,MAAO,CACb,CAEOE,cACNnB,KAAKiB,MAAO,CACb,CAGSU,yBACR,GAAI3B,KAAKiB,KAAM,CACb,MAAMW,EAC0C,QAA9CC,EAAA7B,KAAKS,cAA2B,sBAAc,IAAAoB,EAAAA,EAC9C7B,KAAKS,cAA2B,oCAElCmB,SAAAA,EAAaE,QACb9B,KAAK+B,KAAKC,UAAY,CACvB,CACF,CAQDN,KAAKO,GACH,OAAOjC,KAAKyB,OAAOC,KAAKO,EACzB,CAODC,OACE,OAAOlC,KAAKyB,OAAOS,MACpB,GA1GMtC,EAAAuC,OAAS,CAACC,EAAgBC,GAO1BzC,EAAA0C,kBAAoB,IAAKxC,EAAWwC,kBAAmBC,gBAAgB,GAKxCC,EAAA,CAArCC,EAAM,wBAAiD7C,EAAA8C,UAAA,YAAA,GACpBF,EAAA,CAAnCC,EAAM,eAAe,IAA6B7C,EAAA8C,UAAA,cAAA,GAKPF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBlD,EAAA8C,UAAA,cAAA,GAM7BF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAmChD,EAAA8C,UAAA,YAAA,GAsD9CF,EAAA,CADTO,EAAQ,OAAQ,YAUhBnD,EAAA8C,UAAA,mBAAA,MAxFkB9C,EAAQ4C,EAAA,CAD5BQ,EAAc,kBACMpD,SAAAA"}

package/lib/DropdownGroup.js

@@ -1,2 +1,2 @@
-import{i as e,_ as o,s as n,x as r,A as d,e as a}from"./query-assigned-elements-2f8275b7.js";import{e as s}from"./property-03f59dce.js";import{s as i}from"./Component-253ecb24.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}`;let p=class extends n{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>`:d}<div class="n-dropdown-group-content" role="group" aria-labelledby="${this.heading?"heading":d}"><slot></slot></div></div>`}};p.styles=[i,t],o([s()],p.prototype,"heading",void 0),p=o([a("nord-dropdown-group")],p);var l=p;export{l as default};
+import{i as e,_ as n,s as o,x as a,A as d,e as r}from"./query-assigned-elements-2f8275b7.js";import{e as s}from"./property-03f59dce.js";import{s as i}from"./Component-253ecb24.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>`:d}<div class="n-dropdown-group-content" role="group" aria-labelledby="${this.heading?"heading":d}"><slot></slot></div></div>`}};p.styles=[i,t],n([s()],p.prototype,"heading",void 0),p=n([r("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":"mlBAeA,IAAqBA,EAArB,cAA2CC,EAQzCC,SACE,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() 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":"2xBAeA,IAAqBA,EAArB,cAA2CC,EAQzCC,SACE,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"}

package/lib/DropdownItem-75a2468a.js

@@ -0,0 +1,2 @@
+import{i as o}from"./query-assigned-elements-2f8275b7.js";const n=o`:host{display:flex;line-height:var(--n-line-height-tight)}.n-dropdown-item{-webkit-appearance:none;appearance:none;cursor:pointer;display:flex;flex:1;gap:var(--n-space-s);align-items:center;font-family:inherit;font-size:inherit;text-decoration:none;border:0;color:var(--n-color-text);padding:var(--n-space-s);border-radius:var(--n-border-radius-s);background:0 0;text-align:start;box-shadow:var(--n-dropdown-item-box-shadow,none);min-inline-size:0}.n-dropdown-item:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-dropdown-item:hover ::slotted(*){color:var(--n-color-text-on-accent)!important}.n-dropdown-item ::slotted(nord-icon){color:var(--n-color-icon)}.n-dropdown-item:hover ::slotted(nord-icon){color:currentColor}.n-dropdown-item:active{opacity:.7}.n-dropdown-item:focus{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-dropdown-item:focus{--n-dropdown-item-box-shadow:none}.n-dropdown-item:focus-visible{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent)}}@media (max-width:35.9375em){.n-dropdown-item{gap:var(--n-space-m);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-dropdown-item ::slotted(nord-icon){block-size:var(--n-size-icon-m);inline-size:var(--n-size-icon-m)}}slot[name=end],slot[name=start]{flex:0 0 auto}slot[name=end]{display:flex;margin-inline-start:auto}.n-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;export{n as s};
+//# sourceMappingURL=DropdownItem-75a2468a.js.map

package/lib/DropdownItem-75a2468a.js.map

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

package/lib/DropdownItem.js

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

package/lib/DropdownItem.js.map

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

package/lib/IconManager.js

@@ -1,2 +1,2 @@
-const e=e=>fetch(`https://nordcdn.net/ds/icons/2.0.1/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.0.1/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}from"./query-assigned-elements-2f8275b7.js";import{e as r}from"./property-03f59dce.js";import{l as a}from"./if-defined-10508457.js";import{o as d}from"./class-map-4a0dec4a.js";import{n as l}from"./ref-f75a30b7.js";import{F as c}from"./FocusableMixin-003e1094.js";import{F as p}from"./FormAssociatedMixin-895cf600.js";import{I as u}from"./InputMixin-e15dd8f7.js";import{R as h,s as m}from"./TextField-c2e49b85.js";import{A as b}from"./AutocompleteMixin-60503685.js";import{S as v}from"./SizeMixin-bc2098f4.js";import{s as f}from"./Component-253ecb24.js";import{s as g}from"./FormField-0783cb5a.js";import{S as w}from"./SlotController-d733c575.js";import{D as y}from"./DirectionController-f35f5476.js";import{c as z}from"./cond-77258def.js";import x from"./Icon.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";import"./state-70f38ceb.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 j=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}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(:not(nord-button,nord-dropdown)),nord-icon{--_n-input-slot-margin-inline:var(--n-space-m);margin-inline-start:var(--_n-input-slot-margin-inline)!important;margin-inline-end:var(--_n-input-slot-margin-inline)!important}:host([size="s"]) :is([name=start],[name=end])::slotted(:not(nord-button,nord-dropdown)),:host([size="s"]) nord-icon{--_n-input-slot-margin-inline:var(--n-space-s)}.has-start .n-input{padding-inline-start:var(--n-space-xl)}.has-end .n-input{padding-inline-end:var(--n-space-xl)}:host([size="s"]) .has-start .n-input,:host([size="s"][type=search]) .n-input{padding-inline-start:var(--n-space-l)}:host([size="s"]) .has-end .n-input{padding-inline-end:var(--n-space-l)}:host([size="l"]) .has-start .n-input,:host([size="l"][type=search]) .n-input{padding-inline-start:calc(var(--n-space-xl) * 1.1)}:host([size="l"]) .has-end .n-input{padding-inline-end:calc(var(--n-space-xl) * 1.1)}::slotted(nord-button:not([disabled])),::slotted(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-background-color:transparent}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button,nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button,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))}.has-start-button .n-input{padding-inline-start:calc(var(--n-space-l) * 2)}.has-end-button .n-input{padding-inline-end:calc(var(--n-space-l) * 2)}:host([size="s"]) .has-start-button .n-input{padding-inline-start:calc(var(--n-space-m) * 2.5)}:host([size="s"]) .has-end-button .n-input{padding-inline-end:calc(var(--n-space-m) * 2.5)}:host([size="l"]) .has-start-button .n-input{padding-inline-start:calc(var(--n-space-l) * 2.5)}:host([size="l"]) .has-end-button .n-input{padding-inline-end:calc(var(--n-space-l) * 2.5)}: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}`;x.registerIcon($);const S=t=>null!==t&&("nord-button"===t.localName||"nord-dropdown"===t.localName);let _=class extends(v(p(b(h(u(c(s))))))){constructor(){super(...arguments),this.startSlot=new w(this,"start"),this.endSlot=new w(this,"end"),this.direction=new y(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),s=e.slice(o,e.length),r=i.replace(n,""),a=r+s.replace(n,""),d=r.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const o="search"===this.type||this.startSlot.hasContent,i="number"===this.type;return n`${this.renderLabel()}<div class="${d({"n-input-container":!0,"has-start":o,"has-end":this.endSlot.hasContent,"has-start-button":S(this.startSlot.content),"has-end-button":S(this.endSlot.content),"is-rtl":"rtl"===this.direction.dir})}"><slot name="${this.startSlot.slotName}" ?hidden="${!o}">${"search"===this.type?n`<nord-icon name="navigation-search"></nord-icon>`:e}</slot><input ${l(this.focusableRef)} id="${this.inputId}" class="n-input" type="${i?"text":this.type}" inputmode="${z(i,"numeric")}" pattern="${z(i,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${a(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="${this.endSlot.slotName}" ?hidden="${this.endSlot.isEmpty}"></slot></div>${this.renderError()}`}handleKeydown(t){const{form:n}=this;if("Enter"===t.key&&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)}}};_.styles=[f,g,m,j],o([r({reflect:!0})],_.prototype,"type",void 0),o([r({reflect:!0,type:Boolean})],_.prototype,"expand",void 0),o([r({reflect:!0,attribute:"disallow-pattern"})],_.prototype,"disallowPattern",void 0),_=o([i("nord-input")],_);var k=_;export{k as default};
+import{i as t,x as n,A as e,_ as o,e as i,s as r}from"./query-assigned-elements-2f8275b7.js";import{e as s}from"./property-03f59dce.js";import{i as a}from"./query-2d22378e.js";import{l as d}from"./if-defined-10508457.js";import{o as l}from"./class-map-4a0dec4a.js";import{n as c}from"./ref-f75a30b7.js";import{o as p}from"./style-map-75ce20b3.js";import{F as u}from"./FocusableMixin-003e1094.js";import{F as m}from"./FormAssociatedMixin-895cf600.js";import{I as h}from"./InputMixin-e15dd8f7.js";import{R as b,s as v}from"./TextField-b455a6dd.js";import{A as f}from"./AutocompleteMixin-60503685.js";import{S as g}from"./SizeMixin-bc2098f4.js";import{s as w}from"./Component-253ecb24.js";import{s as y}from"./FormField-0783cb5a.js";import{D as z}from"./DirectionController-f35f5476.js";import{c as x}from"./cond-77258def.js";import j from"./Icon.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";import"./state-70f38ceb.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?"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){const{form:n}=this;if("Enter"===t.key&&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/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 { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } 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\"\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 { SlotController } from \"../common/controllers/SlotController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.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\nimport type Dropdown from \"../dropdown/Dropdown.js\"\nimport type Button from \"../button/Button.js\"\n\nIcon.registerIcon(searchIcon)\n\nconst isButtonOrDropdown = (el: Element | null): el is Button | Dropdown => {\n  if (el === null) return false\n  return el.localName === \"nord-button\" || el.localName === \"nord-dropdown\"\n}\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  private startSlot = new SlotController(this, \"start\")\n  private endSlot = new SlotController(this, \"end\")\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 startSlotHasContent = this.type === \"search\" || this.startSlot.hasContent\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          \"has-start\": startSlotHasContent,\n          \"has-end\": this.endSlot.hasContent,\n          \"has-start-button\": isButtonOrDropdown(this.startSlot.content),\n          \"has-end-button\": isButtonOrDropdown(this.endSlot.content),\n          \"is-rtl\": this.direction.dir === \"rtl\",\n        })}\n      >\n        <slot name=${this.startSlot.slotName} ?hidden=${!startSlotHasContent}>\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 ? \"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=${this.endSlot.slotName} ?hidden=${this.endSlot.isEmpty}></slot>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    const { form } = this\n\n    if (e.key === \"Enter\" && 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":["Icon","registerIcon","searchIcon","isButtonOrDropdown","el","localName","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","startSlot","SlotController","endSlot","direction","DirectionController","type","expand","disallowPattern","undefined","handleInputChange","e","target","inputEl","regex","value","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","startSlotHasContent","hasContent","isNumber","html","renderLabel","classMap","content","dir","slotName","nothing","ref","focusableRef","inputId","cond","disabled","required","readonly","ifDefined","name","_a","placeholder","handleChange","handleKeydown","getDescribedBy","getInvalid","autocomplete","isEmpty","renderError","form","key","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","reflect","prototype","Boolean","attribute","customElement"],"mappings":"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"}
+{"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 ? \"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    const { form } = this\n\n    if (e.key === \"Enter\" && 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","form","key","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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"}

package/lib/Layout.js

@@ -1,2 +1,2 @@
-import{i as n,_ as e,s as a,x as t,A as o,e as i}from"./query-assigned-elements-2f8275b7.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{o as l}from"./class-map-4a0dec4a.js";import{o as c}from"./style-map-75ce20b3.js";import{a as v}from"./arrow-left-small-dd181059.js";import{D as p}from"./DirectionController-f35f5476.js";import{E as h}from"./EventController-d99ebeef.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{S as g}from"./SlotController-d733c575.js";import{o as b}from"./observe-a9c6dfb6.js";import{c as m}from"./cond-77258def.js";import{f as y}from"./fsm-50373df9.js";import{c as k}from"./number-c3ab3e95.js";import f from"./Icon.js";import"./NavToggle.js";import{s as w}from"./Component-253ecb24.js";import{s as z}from"./Sticky-220280e0.js";import"./directive-de55b00a.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./if-defined-10508457.js";import"./IconManager.js";import"./ref-f75a30b7.js";import"./LocalizeController.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"./FocusableMixin-003e1094.js";import"./Button.js";import"./LightDomController-5c53b3f4.js";import"./Spinner.js";import"./InputMixin-e15dd8f7.js";import"./VisuallyHidden.js";const x=n`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgba(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgba(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--n-color-border) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:"";position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:sticky;inset-block-start:0;z-index:var(--n-index-top-bar)}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-m);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav:is([data-screen=wide]:not([data-nav=opened]),[data-screen=narrow]) ::slotted(nord-top-bar),.n-has-nav:is([data-screen=wide]:not([data-nav=opened]),[data-screen=narrow]):not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 2.1)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgba(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgba(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);opacity:0;visibility:hidden;cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}.n-rtl .n-collapse-btn nord-icon{transform:rotate(180deg)}`;f.registerIcon(v);const j=matchMedia("(min-width: 768px)"),_=function(n,e,a=JSON.stringify,t=JSON.parse){return{get value(){try{const a=localStorage.getItem(n);return a?t(a):e}catch(n){return e}},set value(e){try{localStorage.setItem(n,a(e))}catch(n){}}}}("nord-layout.navWidth",250),S=y({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let C=class extends a{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.direction=new p(this),this.events=new h(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:n=>n!==this.navEl}),this.navWidth=_.value,this.isDragging=!1,this.navState=j.matches?"opened":"closed",this.wideScreen=j.matches,this.navOpen="opened"===this.navState,this.padding="m",this.sticky=!1,this.handleMediaQueryChange=()=>{this.wideScreen=j.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(j,"change",this.handleMediaQueryChange)}render(){const{navWidth:n,navState:e,navSlot:a,headerSlot:i,topBarSlot:r,drawerSlot:s,isDragging:d,direction:v}=this,p="opened"===e&&this.wideScreen?n:250;return t`<div class="${l({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":d,"n-has-header":i.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":s.hasContent,"n-has-nav":a.hasContent})}" style="${c({"--_n-layout-nav-width":`${p}px`})}" data-nav="${a.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${a.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${m("opened"===e,this.startDragging)}" @pointermove="${m(d,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${a.hasContent?this.renderNavToggle():o}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return t`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return t`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="arrow-left-small" size="s"></nord-icon></button>`}handleNavWidthChange(){_.value=this.navWidth}handleNavStateChange(n){switch("wait"===n&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===n&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(n){this.navState=S.transition(this.navState,n)}handleNavClick(n){if(!n.defaultPrevented&&!this.wideScreen){const a=n.target;(n=>"nord-nav-item"===n.localName)(e=a)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(n){const{navWidth:e,direction:{isLTR:a}}=this;switch(n.key){case"ArrowLeft":this.setNavWidth(e+(a?-30:30));break;case"ArrowRight":this.setNavWidth(e+(a?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}n.preventDefault()}setNavWidth(n){this.navWidth=k(Math.round(n),220,400)}startDragging(n){if(0===n.button){n.target.setPointerCapture(n.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(n){const e=this.direction.isRTL?this.clientWidth-n.clientX:n.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};C.styles=[w,z,x],e([d(".n-layout-nav",!0)],C.prototype,"navEl",void 0),e([s()],C.prototype,"navWidth",void 0),e([s()],C.prototype,"isDragging",void 0),e([s()],C.prototype,"navState",void 0),e([s()],C.prototype,"wideScreen",void 0),e([r({reflect:!0,type:Boolean,attribute:"nav-open"})],C.prototype,"navOpen",void 0),e([r({reflect:!0})],C.prototype,"padding",void 0),e([r({type:Boolean,reflect:!0})],C.prototype,"sticky",void 0),e([b("navWidth","updated")],C.prototype,"handleNavWidthChange",null),e([b("navState")],C.prototype,"handleNavStateChange",null),e([b("navOpen","updated")],C.prototype,"handleOpenChange",null),C=e([i("nord-layout")],C);var T=C;export{T as default};
+import{i as n,_ as e,s as a,x as t,A as o,e as i}from"./query-assigned-elements-2f8275b7.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{o as l}from"./class-map-4a0dec4a.js";import{o as c}from"./style-map-75ce20b3.js";import{l as v}from"./NavToggle-188fb220.js";import{D as p}from"./DirectionController-f35f5476.js";import{E as h}from"./EventController-d99ebeef.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{S as g}from"./SlotController-d733c575.js";import{o as b}from"./observe-a9c6dfb6.js";import{c as m}from"./cond-77258def.js";import{f as y}from"./fsm-50373df9.js";import{c as k}from"./number-c3ab3e95.js";import f from"./Icon.js";import{s as w}from"./Component-253ecb24.js";import{s as z}from"./Sticky-220280e0.js";import"./directive-de55b00a.js";import"./ref-f75a30b7.js";import"./LocalizeController.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"./FocusableMixin-003e1094.js";import"./Button.js";import"./LightDomController-5c53b3f4.js";import"./Spinner.js";import"./if-defined-10508457.js";import"./InputMixin-e15dd8f7.js";import"./VisuallyHidden.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./IconManager.js";const x=n`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgba(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgba(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--n-color-border) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:"";position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:sticky;inset-block-start:0;z-index:var(--n-index-top-bar)}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),.n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}.n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),.n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgba(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgba(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);opacity:0;visibility:hidden;cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}`;f.registerIcon(v);const j=matchMedia("(min-width: 768px)"),_=function(n,e,a=JSON.stringify,t=JSON.parse){return{get value(){try{const a=localStorage.getItem(n);return a?t(a):e}catch(n){return e}},set value(e){try{localStorage.setItem(n,a(e))}catch(n){}}}}("nord-layout.navWidth",250),S=y({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let C=class extends a{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.direction=new p(this),this.events=new h(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:n=>n!==this.navEl}),this.navWidth=_.value,this.isDragging=!1,this.navState=j.matches?"opened":"closed",this.wideScreen=j.matches,this.navOpen="opened"===this.navState,this.padding="m",this.sticky=!1,this.handleMediaQueryChange=()=>{this.wideScreen=j.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(j,"change",this.handleMediaQueryChange)}render(){const{navWidth:n,navState:e,navSlot:a,headerSlot:i,topBarSlot:r,drawerSlot:s,isDragging:d,direction:v}=this,p="opened"===e&&this.wideScreen?n:250;return t`<div class="${l({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":d,"n-has-header":i.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":s.hasContent,"n-has-nav":a.hasContent})}" style="${c({"--_n-layout-nav-width":`${p}px`})}" data-nav="${a.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${a.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${m("opened"===e,this.startDragging)}" @pointermove="${m(d,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${a.hasContent?this.renderNavToggle():o}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return t`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return t`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){_.value=this.navWidth}handleNavStateChange(n){switch("wait"===n&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===n&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(n){this.navState=S.transition(this.navState,n)}handleNavClick(n){if(!n.defaultPrevented&&!this.wideScreen){const a=n.target;(n=>"nord-nav-item"===n.localName)(e=a)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(n){const{navWidth:e,direction:{isLTR:a}}=this;switch(n.key){case"ArrowLeft":this.setNavWidth(e+(a?-30:30));break;case"ArrowRight":this.setNavWidth(e+(a?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}n.preventDefault()}setNavWidth(n){this.navWidth=k(Math.round(n),220,400)}startDragging(n){if(0===n.button){n.target.setPointerCapture(n.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(n){const e=this.direction.isRTL?this.clientWidth-n.clientX:n.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};C.styles=[w,z,x],e([d(".n-layout-nav",!0)],C.prototype,"navEl",void 0),e([s()],C.prototype,"navWidth",void 0),e([s()],C.prototype,"isDragging",void 0),e([s()],C.prototype,"navState",void 0),e([s()],C.prototype,"wideScreen",void 0),e([r({reflect:!0,type:Boolean,attribute:"nav-open"})],C.prototype,"navOpen",void 0),e([r({reflect:!0})],C.prototype,"padding",void 0),e([r({type:Boolean,reflect:!0})],C.prototype,"sticky",void 0),e([b("navWidth","updated")],C.prototype,"handleNavWidthChange",null),e([b("navState")],C.prototype,"handleNavStateChange",null),e([b("navOpen","updated")],C.prototype,"handleOpenChange",null),C=e([i("nord-layout")],C);var T=C;export{T as default};
 //# sourceMappingURL=Layout.js.map