@nordhealth/components 1.13.0 → 1.14.1

package/lib/Checkbox.js

@@ -1,2 +1,2 @@
-import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r,$ as o,s as i}from"./lit-element-67e6cd99.js";import{e as t}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe1a64e3.js";import{n as c}from"./ref-57ff8ffc.js";import s from"./Icon.js";import{F as l}from"./FocusableMixin-175ea4d7.js";import{F as d}from"./FormAssociatedMixin-d0d98a92.js";import{I as p}from"./InputMixin-9334d385.js";import{s as h}from"./Component-5a0a26a0.js";import{s as m}from"./FormField-d3767c2e.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./unsafe-html-61a04601.js";import"./observe-a9c6dfb6.js";import"./cond-97c45476.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z"/></svg>',title:"interface-checked-small",tags:"nordicon interface checked small symbol checkmark done ready"});var b=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M129.5 80.5h-119a10.5 10.5 0 0 1 0-21h119a10.5 10.5 0 0 1 0 21z"/></svg>',title:"interface-remove-small",tags:"nordicon interface remove small delete erase minimize line"});const u=r`:host{display:inline-block}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}input{--n-checkbox-size:calc(var(--n-space-m) * 1.25);--n-checkbox-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;border:1px solid var(--n-checkbox-border-color,var(--n-color-border-hover));border-radius:var(--n-border-radius-s);display:block;inline-size:var(--n-checkbox-size);block-size:var(--n-checkbox-size);cursor:pointer}input:checked,input:indeterminate{--n-checkbox-border-color:var(--n-color-accent);background:var(--n-checkbox-accent-color)}input[aria-invalid]{--n-checkbox-accent-color:var(--n-color-status-danger);--n-checkbox-border-color:var(--n-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}input:active{opacity:.8}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{--n-checkbox-accent-color:var(--n-color-border-strong);--n-checkbox-border-color:var(--n-checkbox-accent-color);background:var(--n-checkbox-accent-color);cursor:default;opacity:1}nord-icon{display:none;position:absolute;color:var(--n-color-text-on-accent);inset:calc(var(--n-space-s)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked~.icon-checked,input:indeterminate~.icon-indeterminate{display:block}.n-label-container{padding-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}`;s.registerIcon(v),s.registerIcon(b);let f=class extends(d(p(l(i)))){constructor(){super(...arguments),this.indeterminate=!1,this.checked=!1}get formValue(){return this.checked?this.value||"on":void 0}render(){return o`<div class="n-flex"><div class="n-input-container"><input ${c(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" .indeterminate="${this.indeterminate}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small" size="s"></nord-icon><nord-icon class="icon-indeterminate" name="interface-remove-small" size="s"></nord-icon></div><div class="n-expand">${this.renderLabel()} ${this.renderError()}</div></div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};f.styles=[h,m,u],e([t({type:Boolean})],f.prototype,"indeterminate",void 0),e([t({type:Boolean})],f.prototype,"checked",void 0),f=e([n("nord-checkbox")],f);var k=f;export{k as default};
+import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as r,y as o,s as i}from"./lit-element-79bc2e0e.js";import{e as t}from"./property-03f59dce.js";import{l as a}from"./if-defined-f43b1487.js";import{n as c}from"./ref-697b28b5.js";import s from"./Icon.js";import{F as l}from"./FocusableMixin-99db12c1.js";import{F as d}from"./FormAssociatedMixin-f6e5b3cd.js";import{I as p}from"./InputMixin-158f63fb.js";import{s as h}from"./Component-49a41387.js";import{s as m}from"./FormField-72062bf1.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./unsafe-html-be8023cd.js";import"./observe-a9c6dfb6.js";import"./cond-0a8d4554.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var b=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z"/></svg>',title:"interface-checked-small",tags:"nordicon interface checked small symbol checkmark done ready"});var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M129.5 80.5h-119a10.5 10.5 0 0 1 0-21h119a10.5 10.5 0 0 1 0 21z"/></svg>',title:"interface-remove-small",tags:"nordicon interface remove small delete erase minimize line"});const u=r`:host{display:inline-block}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}input{--n-checkbox-size:calc(var(--n-space-m) * 1.25);--n-checkbox-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;border:1px solid var(--n-checkbox-border-color,var(--n-color-border-hover));border-radius:var(--n-border-radius-s);display:block;inline-size:var(--n-checkbox-size);block-size:var(--n-checkbox-size);cursor:pointer}input:checked,input:indeterminate{--n-checkbox-border-color:var(--n-color-accent);background:var(--n-checkbox-accent-color)}input[aria-invalid]{--n-checkbox-accent-color:var(--n-color-status-danger);--n-checkbox-border-color:var(--n-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}input:active{opacity:.8}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{--n-checkbox-accent-color:var(--n-color-border-strong);--n-checkbox-border-color:var(--n-checkbox-accent-color);background:var(--n-checkbox-accent-color);cursor:default;opacity:1}nord-icon{display:none;position:absolute;color:var(--n-color-text-on-accent);inset:calc(var(--n-space-s)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked~.icon-checked,input:indeterminate~.icon-indeterminate{display:block}.n-label-container{padding-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}`;s.registerIcon(b),s.registerIcon(v);let f=class extends(d(p(l(i)))){constructor(){super(...arguments),this.indeterminate=!1,this.checked=!1}get formValue(){return this.checked?this.value||"on":void 0}render(){return o`<div class="n-flex"><div class="n-input-container"><input ${c(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" .indeterminate="${this.indeterminate}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small" size="s"></nord-icon><nord-icon class="icon-indeterminate" name="interface-remove-small" size="s"></nord-icon></div><div class="n-expand">${this.renderLabel()} ${this.renderError()}</div></div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};f.styles=[h,m,u],e([t({type:Boolean})],f.prototype,"indeterminate",void 0),e([t({type:Boolean})],f.prototype,"checked",void 0),f=e([n("nord-checkbox")],f);var k=f;export{k as default};
 //# sourceMappingURL=Checkbox.js.map

package/lib/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../icons/lib/assets/interface-checked-small.js","../../icons/lib/assets/interface-remove-small.js","../src/checkbox/Checkbox.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z\"/></svg>'\nexport const title = \"interface-checked-small\"\nexport const tags = \"nordicon interface checked small symbol checkmark done ready\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M129.5 80.5h-119a10.5 10.5 0 0 1 0-21h119a10.5 10.5 0 0 1 0 21z\"/></svg>'\nexport const title = \"interface-remove-small\"\nexport const tags = \"nordicon interface remove small delete erase minimize line\"\n","import { html, LitElement } 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 * as checkedIcon from \"@nordhealth/icons/lib/assets/interface-checked-small.js\"\nimport * as indeterminateIcon from \"@nordhealth/icons/lib/assets/interface-remove-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Checkbox.css\"\n\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(indeterminateIcon)\n\n/**\n * Checkboxes allow user to choose one or more options from a limited set of options.\n * If you have more than 10 options, please use Select component instead.\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 */\n@customElement(\"nord-checkbox\")\nexport default class Checkbox extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.checked ? this.value || \"on\" : undefined\n  }\n\n  /**\n   * Controls whether the checkbox is in an indeterminate state.\n   */\n  @property({ type: Boolean }) indeterminate = false\n\n  /**\n   * Controls whether the checkbox is checked or not.\n   */\n  @property({ type: Boolean }) checked: boolean = false\n\n  render() {\n    return html`\n      <div class=\"n-flex\">\n        <div class=\"n-input-container\">\n          <input\n            ${ref(this.focusableRef)}\n            class=\"n-input\"\n            id=${this.inputId}\n            type=\"checkbox\"\n            name=${ifDefined(this.name)}\n            .value=${this.value}\n            .checked=${this.checked}\n            .indeterminate=${this.indeterminate}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            aria-describedby=${ifDefined(this.getDescribedBy())}\n            aria-invalid=${ifDefined(this.getInvalid())}\n            @change=${this.handleChange}\n          />\n          <nord-icon class=\"icon-checked\" name=\"interface-checked-small\" size=\"s\"></nord-icon>\n          <nord-icon class=\"icon-indeterminate\" name=\"interface-remove-small\" size=\"s\"></nord-icon>\n        </div>\n        <div class=\"n-expand\">${this.renderLabel()} ${this.renderError()}</div>\n      </div>\n    `\n  }\n\n  protected handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n    super.handleChange(e)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-checkbox\": Checkbox\n  }\n}\n"],"names":["Icon","registerIcon","checkedIcon","indeterminateIcon","Checkbox","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","indeterminate","checked","formValue","value","undefined","render","html","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","renderLabel","renderError","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","prototype","customElement"],"mappings":"6zBAAe,6VACM,+BACD,6GCFL,4KACM,8BACD,8zDCcpBA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAalB,IAAqBC,EAArB,cAAsCC,EAAoBC,EAAWC,EAAeC,MAApFC,kCAU+BC,KAAaC,eAAG,EAKhBD,KAAOE,SAAY,EAZzBC,gBACrB,OAAOH,KAAKE,QAAUF,KAAKI,OAAS,UAAOC,EAa7CC,SACE,OAAOC,CAAI,6DAIDC,EAAIR,KAAKS,qCAENT,KAAKU,kCAEHC,EAAUX,KAAKY,kBACbZ,KAAKI,oBACHJ,KAAKE,4BACCF,KAAKC,6BACVD,KAAKa,wBACLb,KAAKc,+BACEH,EAAUX,KAAKe,oCACnBJ,EAAUX,KAAKgB,2BACpBhB,KAAKiB,0NAKKjB,KAAKkB,iBAAiBlB,KAAKmB,4BAK/CF,aAAaG,GACrB,MAAMC,EAASD,EAAEC,OACjBrB,KAAKE,QAAUmB,EAAOnB,QACtBoB,MAAML,aAAaG,KA9Cd1B,EAAM6B,OAAG,CAACC,EAAgBC,EAAgBC,GASpBC,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAgCpC,EAAAqC,UAAA,qBAAA,GAKrBJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCpC,EAAAqC,UAAA,eAAA,GAflCrC,EAAQiC,EAAA,CAD5BK,EAAc,kBACMtC,SAAAA"}
+{"version":3,"file":"Checkbox.js","sources":["../../icons/lib/assets/interface-checked-small.js","../../icons/lib/assets/interface-remove-small.js","../src/checkbox/Checkbox.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z\"/></svg>'\nexport const title = \"interface-checked-small\"\nexport const tags = \"nordicon interface checked small symbol checkmark done ready\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M129.5 80.5h-119a10.5 10.5 0 0 1 0-21h119a10.5 10.5 0 0 1 0 21z\"/></svg>'\nexport const title = \"interface-remove-small\"\nexport const tags = \"nordicon interface remove small delete erase minimize line\"\n","import { html, LitElement } 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 * as checkedIcon from \"@nordhealth/icons/lib/assets/interface-checked-small.js\"\nimport * as indeterminateIcon from \"@nordhealth/icons/lib/assets/interface-remove-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Checkbox.css\"\n\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(indeterminateIcon)\n\n/**\n * Checkboxes allow user to choose one or more options from a limited set of options.\n * If you have more than 10 options, please use Select component instead.\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 */\n@customElement(\"nord-checkbox\")\nexport default class Checkbox extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.checked ? this.value || \"on\" : undefined\n  }\n\n  /**\n   * Controls whether the checkbox is in an indeterminate state.\n   */\n  @property({ type: Boolean }) indeterminate = false\n\n  /**\n   * Controls whether the checkbox is checked or not.\n   */\n  @property({ type: Boolean }) checked: boolean = false\n\n  render() {\n    return html`\n      <div class=\"n-flex\">\n        <div class=\"n-input-container\">\n          <input\n            ${ref(this.focusableRef)}\n            class=\"n-input\"\n            id=${this.inputId}\n            type=\"checkbox\"\n            name=${ifDefined(this.name)}\n            .value=${this.value}\n            .checked=${this.checked}\n            .indeterminate=${this.indeterminate}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            aria-describedby=${ifDefined(this.getDescribedBy())}\n            aria-invalid=${ifDefined(this.getInvalid())}\n            @change=${this.handleChange}\n          />\n          <nord-icon class=\"icon-checked\" name=\"interface-checked-small\" size=\"s\"></nord-icon>\n          <nord-icon class=\"icon-indeterminate\" name=\"interface-remove-small\" size=\"s\"></nord-icon>\n        </div>\n        <div class=\"n-expand\">${this.renderLabel()} ${this.renderError()}</div>\n      </div>\n    `\n  }\n\n  protected handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n    super.handleChange(e)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-checkbox\": Checkbox\n  }\n}\n"],"names":["Icon","registerIcon","checkedIcon","indeterminateIcon","Checkbox","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","indeterminate","checked","formValue","value","undefined","render","html","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","renderLabel","renderError","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","prototype","customElement"],"mappings":"u0BAAe,6VACM,+BACD,6GCFL,4KACM,8BACD,8zDCcpBA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAalB,IAAqBC,EAArB,cAAsCC,EAAoBC,EAAWC,EAAeC,MAApFC,kCAU+BC,KAAaC,eAAG,EAKhBD,KAAOE,SAAY,CAkCjD,CA9CwBC,gBACrB,OAAOH,KAAKE,QAAUF,KAAKI,OAAS,UAAOC,CAC5C,CAYDC,SACE,OAAOC,CAAI,6DAIDC,EAAIR,KAAKS,qCAENT,KAAKU,kCAEHC,EAAUX,KAAKY,kBACbZ,KAAKI,oBACHJ,KAAKE,4BACCF,KAAKC,6BACVD,KAAKa,wBACLb,KAAKc,+BACEH,EAAUX,KAAKe,oCACnBJ,EAAUX,KAAKgB,2BACpBhB,KAAKiB,0NAKKjB,KAAKkB,iBAAiBlB,KAAKmB,2BAGxD,CAESF,aAAaG,GACrB,MAAMC,EAASD,EAAEC,OACjBrB,KAAKE,QAAUmB,EAAOnB,QACtBoB,MAAML,aAAaG,EACpB,GA/CM1B,EAAM6B,OAAG,CAACC,EAAgBC,EAAgBC,GASpBC,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAgCpC,EAAAqC,UAAA,qBAAA,GAKrBJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCpC,EAAAqC,UAAA,eAAA,GAflCrC,EAAQiC,EAAA,CAD5BK,EAAc,kBACMtC,SAAAA"}

package/lib/CommandMenu.js

@@ -1,2 +1,2 @@
-import{_ as e,n as o}from"./query-assigned-elements-ef860822.js";import{r as t,s as n,$ as s,w as r}from"./lit-element-67e6cd99.js";import{e as i}from"./property-03f59dce.js";import{t as a}from"./state-70f38ceb.js";import{c as l}from"./repeat-084c4167.js";import{e as d,n as c}from"./ref-57ff8ffc.js";import{o as p}from"./class-map-f1b6f1fa.js";import{l as m}from"./if-defined-fe1a64e3.js";import{g as h}from"./collection-800f5002.js";import{w as v}from"./number-c3ab3e95.js";import{N as u}from"./events-731d0007.js";import{L as f}from"./LightDismissController-a2645ae6.js";import{KeyboardController as b}from"./KeyboardController.js";import g from"./Icon.js";import"./VisuallyHidden.js";import"./CommandMenuAction.js";import{SelectEvent as x}from"./SelectEvent.js";import{s as y}from"./Component-5a0a26a0.js";import{LocalizeController as w}from"./LocalizeController.js";import{c as k}from"./cond-97c45476.js";import{o as z}from"./observe-a9c6dfb6.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./unsafe-html-61a04601.js";import"./DirectionController-8b298382.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";const j="keyboard-arrow-up-down";var $=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M105.833 24v93m0-93L80 49.833M105.833 24l25.834 25.833M34.167 117V24m0 93L60 91.167M34.167 117 8.333 91.167" fill="none" stroke="currentColor" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:j,tags:"nordicon keyboard keys arrow up down shortcut"});var C=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"><path d="M35 133 7 105l28-28"/><path d="M7 105h112a14 14 0 0 0 14-14V21a14 14 0 0 0-14-14H77"/></g></svg>',title:"keyboard-return",tags:"nordicon keyboard return key shortcut"});const I="keyboard-backspace";var L=Object.freeze({__proto__:null,default:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M6.707 4.879A3 3 0 0 1 8.828 4H15a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H8.828a3 3 0 0 1-2.12-.879l-4.415-4.414a1 1 0 0 1 0-1.414l4.414-4.414zm4 2.414a1 1 0 0 0-1.414 1.414L10.586 10l-1.293 1.293a1 1 0 1 0 1.414 1.414L12 11.414l1.293 1.293a1 1 0 0 0 1.414-1.414L13.414 10l1.293-1.293a1 1 0 0 0-1.414-1.414L12 8.586l-1.293-1.293z" clip-rule="evenodd"/></svg>',title:I,tags:"nordicon keyboard backspace back delete key shortcut"});function B(e){var o;return(null===(o=e.activeElement)||void 0===o?void 0:o.shadowRoot)?B(e.activeElement.shadowRoot):e.activeElement||void 0}const E=t`:host{--n-command-menu-width:640px;--n-command-menu-top:16%;--n-command-menu-height:290px}.n-modal{display:none;position:fixed;pointer-events:none;z-index:var(--n-index-modal);inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;overflow:auto}.n-modal.n-visible{display:block}.n-modal-content{position:relative;pointer-events:all;inset-block-start:var(--n-command-menu-top);margin:auto;display:flex;flex-direction:column;min-inline-size:0;background:var(--n-color-surface);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-modal);max-inline-size:var(--n-command-menu-width);overflow:hidden}.n-bump{animation:zoom-in-zoom-out var(--n-transition-slowly)}@keyframes zoom-in-zoom-out{0%{transform:translateY(-10px) scale(.97);opacity:0}100%{transform:translateY(0) scale(1.0001);opacity:1}}.n-modal-footer{display:flex;gap:var(--n-space-s);padding:var(--n-space-s) var(--n-space-m);font-size:calc(var(--n-font-size-s) - 1px);color:var(--n-color-text-weaker)}.n-help{display:flex;align-items:center;gap:2px}.n-help+.n-help{padding-inline-start:var(--n-space-s);border-inline-start:1px solid var(--n-color-border-strong)}.n-help nord-icon{--n-icon-size:10px;color:currentColor;margin:3px 4px}.n-help.n-backspace nord-icon{--n-icon-size:12px}.n-search-wrapper{display:flex;border-block-end:1px solid var(--n-color-border)}[role=combobox]{flex:1;font-size:var(--n-font-size-l);font-weight:var(--n-font-weight);font-family:inherit;background:0 0;color:var(--n-color-text);border:none;border-radius:0;appearance:none;outline:0;margin:0;padding:var(--n-space-m)}[role=combobox]::-webkit-input-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=combobox]::-moz-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=combobox]::-ms-input-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=listbox]{max-block-size:var(--n-command-menu-height);overflow:auto;margin:0;padding:0}.n-group-header{line-height:var(--n-line-height);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-s)/ 1.4) var(--n-space-m);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:var(--n-font-size-s);background:var(--n-color-surface-raised);font-weight:var(--n-font-weight-active);color:var(--n-color-text-weaker)}.n-command-empty{display:flex;flex:1;flex-direction:column;border-inline-start:2px solid transparent;align-items:flex-start;color:var(--n-color-text);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-command-empty .n-title{flex:1;margin-block-start:var(--n-space-s);margin-inline-end:calc(var(--n-space-s)/ 2);max-inline-size:100%;font-size:var(--n-font-size-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-command-empty .n-tip{flex:1;margin-block-start:var(--n-space-s);margin-block-end:var(--n-space-m);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker)}`;g.registerIcon($),g.registerIcon(C),g.registerIcon(L);let _=class extends n{constructor(){super(...arguments),this.inputRef=d(),this.listRef=d(),this.localize=new w(this),this.dismissController=new f(this,{isOpen:()=>this.open,onDismiss:()=>this.close()}),this.keyboardController=new b(this,{trigger:()=>this.select(),goBack:()=>this.goBack(),end:()=>this.end(),start:()=>this.start(),next:()=>this.next(),previous:()=>this.previous(),toggleOpen:()=>this.toggleOpen()}),this.open=!1,this.placeholder="Type a command or search...",this.commands=[],this.search="",this.bump=!0,this.selectedIndex=0,this.filteredCommands=[]}get selected(){return this.filteredCommands[this.selectedIndex]}show(e={}){this.dispatchEvent(new u("open",{cancelable:!0}))&&(this.open=!0,this.setParent(e.parent))}close(){var e;this.open=!1,null===(e=this.previousFocus)||void 0===e||e.focus(),this.previousFocus=void 0,this.dispatchEvent(new u("close"))}toggleOpen(){this.open?this.close():this.show()}focus(){var e;null===(e=this.inputRef.value)||void 0===e||e.focus()}render(){var e;const o=h(this.filteredCommands,"section"),t=0===this.filteredCommands.length?"no-results":null===(e=this.selected)||void 0===e?void 0:e.id;return s`<div class="${p({"n-visible":this.open,"n-modal":!0})}"><div @animationend="${this.handleAnimationEnd}" class="${p({"n-bump":this.bump,"n-modal-content":!0})}"><div class="n-search-wrapper"><nord-visually-hidden id="instructions">${this.localize.term("instructions")}</nord-visually-hidden><input type="text" id="search" @input="${this.handleInput}" @blur="${this.handleBlur}" ${c(this.inputRef)} placeholder="${this.placeholder}" .value="${this.search}" spellcheck="false" autocomplete="off" autocapitalize="off" aria-label="${this.localize.term("inputLabel")}" aria-autocomplete="list" aria-haspopup="listbox" role="combobox" aria-controls="list" aria-expanded="true" aria-activedescendant="${m(t)}" aria-describedby="instructions"></div><div class="n-modal-body"><div id="list" ${c(this.listRef)} role="listbox">${0===this.filteredCommands.length?this.renderNoResults():Array.from(o,(([e,o])=>this.renderSection(e,o)))}</div></div><slot name="footer"><div class="n-modal-footer"><span class="n-help"><nord-icon label="Arrow keys" name="${j}"></nord-icon>${this.localize.term("footerArrowKeys")} </span><span class="n-help"><nord-icon label="Enter key" name="${"keyboard-return"}"></nord-icon>${this.localize.term("footerEnterKey")} </span><span class="n-help">${this.localize.term("footerEscapeKey")}</span> <span class="n-help n-backspace"><nord-icon label="Backspace key" name="${I}"></nord-icon>${this.localize.term("footerBackspaceKey")}</span></div></slot></div></div>`}renderNoResults(){return s`<div id="no-results" class="n-command-empty" role="option" aria-selected="true"><div class="n-title">${this.localize.term("noResults",this.search)}</div><div class="n-tip">${this.localize.term("tip")}</div></div>`}renderSection(e,o){const t=`section-${e}`;return s`<div role="group" aria-labelledby="${k(e,t)}">${e?s`<div class="n-group-header" role="presentation" id="${t}">${e}</div>`:r} ${l(o,(e=>e.id),(e=>{var o,t;return s`<nord-command-menu-action id="${e.id}" .command="${e}" ?selected="${this.open&&e.id===(null===(o=this.selected)||void 0===o?void 0:o.id)}" @click="${()=>this.select(e)}" role="option" aria-selected="${k(e.id===(null===(t=this.selected)||void 0===t?void 0:t.id),"true")}"></nord-command-menu-action>`}))}</div>`}handleCommandsChange(){this.keyboardController.registerCommandShortcuts()}handleBump(){this.open&&(this.bump=!0)}focusOnOpen(){this.open&&(this.previousFocus=B(document),this.focus(),this.listRef.value&&(this.listRef.value.scrollTop=0))}handleAnimationEnd(){this.bump=!1}handleBlur(){this.open&&this.focus()}handleInput(e){const o=e.target;this.setSearch(o.value)}select(e=this.selected){var o;this.commands.some((o=>o.parent===e.id))?(this.setParent(e.id),this.bump=!0,this.focus()):this.close(),this.setSearch(""),null===(o=e.handler)||void 0===o||o.call(e,this);const t=new x(e);this.dispatchEvent(t)}start(){this.selectedIndex=0}end(){this.selectedIndex=this.filteredCommands.length-1}next(){this.selectedIndex=v(this.selectedIndex+1,0,this.filteredCommands.length-1)}previous(){this.selectedIndex=v(this.selectedIndex-1,0,this.filteredCommands.length-1)}goBack(){if(!this.search&&this.parent){const e=this.commands.find((e=>e.id===this.parent));this.setParent(null==e?void 0:e.parent)}}setParent(e){this.parent=e,this.setSearch("")}setSearch(e){this.search=e,this.selectedIndex=0}filterCommands(){const e=this.search.toLocaleLowerCase().split(/\s+/);this.filteredCommands=this.commands.filter((({title:o,keywords:t="",parent:n})=>{const s=`${o} ${t}`.toLocaleLowerCase(),r=e.every((e=>s.includes(e)));return(!this.parent&&this.search||n===this.parent)&&r}))}};_.styles=[y,E],e([i({type:Boolean})],_.prototype,"open",void 0),e([i({type:String})],_.prototype,"placeholder",void 0),e([i({type:Array,attribute:!1})],_.prototype,"commands",void 0),e([a()],_.prototype,"parent",void 0),e([a()],_.prototype,"search",void 0),e([a()],_.prototype,"bump",void 0),e([a()],_.prototype,"selectedIndex",void 0),e([a()],_.prototype,"filteredCommands",void 0),e([z("commands")],_.prototype,"handleCommandsChange",null),e([z("open")],_.prototype,"handleBump",null),e([z("open","updated")],_.prototype,"focusOnOpen",null),e([z("search"),z("parent"),z("commands")],_.prototype,"filterCommands",null),_=e([o("nord-command-menu")],_);var R=_;export{R as default};
+import{_ as e,e as o}from"./query-assigned-elements-e6cbac30.js";import{i as t,s as n,y as s,b as r}from"./lit-element-79bc2e0e.js";import{e as i}from"./property-03f59dce.js";import{t as a}from"./state-70f38ceb.js";import{c as l}from"./repeat-e7acc0bd.js";import{e as d,n as c}from"./ref-697b28b5.js";import{o as p}from"./class-map-cd6c8cbd.js";import{l as m}from"./if-defined-f43b1487.js";import{g as h}from"./collection-800f5002.js";import{w as v}from"./number-c3ab3e95.js";import{N as u}from"./events-731d0007.js";import{L as f}from"./LightDismissController-a2645ae6.js";import{KeyboardController as b}from"./KeyboardController.js";import g from"./Icon.js";import"./VisuallyHidden.js";import"./CommandMenuAction.js";import{SelectEvent as x}from"./SelectEvent.js";import{s as y}from"./Component-49a41387.js";import{LocalizeController as w}from"./LocalizeController.js";import{c as k}from"./cond-0a8d4554.js";import{o as z}from"./observe-a9c6dfb6.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./unsafe-html-be8023cd.js";import"./DirectionController-8b298382.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";const j="keyboard-arrow-up-down";var $=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M105.833 24v93m0-93L80 49.833M105.833 24l25.834 25.833M34.167 117V24m0 93L60 91.167M34.167 117 8.333 91.167" fill="none" stroke="currentColor" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:j,tags:"nordicon keyboard keys arrow up down shortcut"});var C=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"><path d="M35 133 7 105l28-28"/><path d="M7 105h112a14 14 0 0 0 14-14V21a14 14 0 0 0-14-14H77"/></g></svg>',title:"keyboard-return",tags:"nordicon keyboard return key shortcut"});const I="keyboard-backspace";var L=Object.freeze({__proto__:null,default:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M6.707 4.879A3 3 0 0 1 8.828 4H15a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H8.828a3 3 0 0 1-2.12-.879l-4.415-4.414a1 1 0 0 1 0-1.414l4.414-4.414zm4 2.414a1 1 0 0 0-1.414 1.414L10.586 10l-1.293 1.293a1 1 0 1 0 1.414 1.414L12 11.414l1.293 1.293a1 1 0 0 0 1.414-1.414L13.414 10l1.293-1.293a1 1 0 0 0-1.414-1.414L12 8.586l-1.293-1.293z" clip-rule="evenodd"/></svg>',title:I,tags:"nordicon keyboard backspace back delete key shortcut"});function B(e){var o;return(null===(o=e.activeElement)||void 0===o?void 0:o.shadowRoot)?B(e.activeElement.shadowRoot):e.activeElement||void 0}const E=t`:host{--n-command-menu-width:640px;--n-command-menu-top:16%;--n-command-menu-height:290px}.n-modal{display:none;position:fixed;pointer-events:none;z-index:var(--n-index-modal);inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;overflow:auto}.n-modal.n-visible{display:block}.n-modal-content{position:relative;pointer-events:all;inset-block-start:var(--n-command-menu-top);margin:auto;display:flex;flex-direction:column;min-inline-size:0;background:var(--n-color-surface);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-modal);max-inline-size:var(--n-command-menu-width);overflow:hidden}.n-bump{animation:zoom-in-zoom-out var(--n-transition-slowly)}@keyframes zoom-in-zoom-out{0%{transform:translateY(-10px) scale(.97);opacity:0}100%{transform:translateY(0) scale(1.0001);opacity:1}}.n-modal-footer{display:flex;gap:var(--n-space-s);padding:var(--n-space-s) var(--n-space-m);font-size:calc(var(--n-font-size-s) - 1px);color:var(--n-color-text-weaker)}.n-help{display:flex;align-items:center;gap:2px}.n-help+.n-help{padding-inline-start:var(--n-space-s);border-inline-start:1px solid var(--n-color-border-strong)}.n-help nord-icon{--n-icon-size:10px;color:currentColor;margin:3px 4px}.n-help.n-backspace nord-icon{--n-icon-size:12px}.n-search-wrapper{display:flex;border-block-end:1px solid var(--n-color-border)}[role=combobox]{flex:1;font-size:var(--n-font-size-l);font-weight:var(--n-font-weight);font-family:inherit;background:0 0;color:var(--n-color-text);border:none;border-radius:0;appearance:none;outline:0;margin:0;padding:var(--n-space-m)}[role=combobox]::-webkit-input-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=combobox]::-moz-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=combobox]::-ms-input-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=listbox]{max-block-size:var(--n-command-menu-height);overflow:auto;margin:0;padding:0}.n-group-header{line-height:var(--n-line-height);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-s)/ 1.4) var(--n-space-m);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:var(--n-font-size-s);background:var(--n-color-surface-raised);font-weight:var(--n-font-weight-active);color:var(--n-color-text-weaker)}.n-command-empty{display:flex;flex:1;flex-direction:column;border-inline-start:2px solid transparent;align-items:flex-start;color:var(--n-color-text);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-command-empty .n-title{flex:1;margin-block-start:var(--n-space-s);margin-inline-end:calc(var(--n-space-s)/ 2);max-inline-size:100%;font-size:var(--n-font-size-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-command-empty .n-tip{flex:1;margin-block-start:var(--n-space-s);margin-block-end:var(--n-space-m);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker)}`;g.registerIcon($),g.registerIcon(C),g.registerIcon(L);let _=class extends n{constructor(){super(...arguments),this.inputRef=d(),this.listRef=d(),this.localize=new w(this),this.dismissController=new f(this,{isOpen:()=>this.open,onDismiss:()=>this.close()}),this.keyboardController=new b(this,{trigger:()=>this.select(),goBack:()=>this.goBack(),end:()=>this.end(),start:()=>this.start(),next:()=>this.next(),previous:()=>this.previous(),toggleOpen:()=>this.toggleOpen()}),this.open=!1,this.placeholder="Type a command or search...",this.commands=[],this.search="",this.bump=!0,this.selectedIndex=0,this.filteredCommands=[]}get selected(){return this.filteredCommands[this.selectedIndex]}show(e={}){this.dispatchEvent(new u("open",{cancelable:!0}))&&(this.open=!0,this.setParent(e.parent))}close(){var e;this.open=!1,null===(e=this.previousFocus)||void 0===e||e.focus(),this.previousFocus=void 0,this.dispatchEvent(new u("close"))}toggleOpen(){this.open?this.close():this.show()}focus(){var e;null===(e=this.inputRef.value)||void 0===e||e.focus()}render(){var e;const o=h(this.filteredCommands,"section"),t=0===this.filteredCommands.length?"no-results":null===(e=this.selected)||void 0===e?void 0:e.id;return s`<div class="${p({"n-visible":this.open,"n-modal":!0})}"><div @animationend="${this.handleAnimationEnd}" class="${p({"n-bump":this.bump,"n-modal-content":!0})}"><div class="n-search-wrapper"><nord-visually-hidden id="instructions">${this.localize.term("instructions")}</nord-visually-hidden><input type="text" id="search" @input="${this.handleInput}" @blur="${this.handleBlur}" ${c(this.inputRef)} placeholder="${this.placeholder}" .value="${this.search}" spellcheck="false" autocomplete="off" autocapitalize="off" aria-label="${this.localize.term("inputLabel")}" aria-autocomplete="list" aria-haspopup="listbox" role="combobox" aria-controls="list" aria-expanded="true" aria-activedescendant="${m(t)}" aria-describedby="instructions"></div><div class="n-modal-body"><div id="list" ${c(this.listRef)} role="listbox">${0===this.filteredCommands.length?this.renderNoResults():Array.from(o,(([e,o])=>this.renderSection(e,o)))}</div></div><slot name="footer"><div class="n-modal-footer"><span class="n-help"><nord-icon label="Arrow keys" name="${j}"></nord-icon>${this.localize.term("footerArrowKeys")} </span><span class="n-help"><nord-icon label="Enter key" name="${"keyboard-return"}"></nord-icon>${this.localize.term("footerEnterKey")} </span><span class="n-help">${this.localize.term("footerEscapeKey")}</span> <span class="n-help n-backspace"><nord-icon label="Backspace key" name="${I}"></nord-icon>${this.localize.term("footerBackspaceKey")}</span></div></slot></div></div>`}renderNoResults(){return s`<div id="no-results" class="n-command-empty" role="option" aria-selected="true"><div class="n-title">${this.localize.term("noResults",this.search)}</div><div class="n-tip">${this.localize.term("tip")}</div></div>`}renderSection(e,o){const t=`section-${e}`;return s`<div role="group" aria-labelledby="${k(e,t)}">${e?s`<div class="n-group-header" role="presentation" id="${t}">${e}</div>`:r} ${l(o,(e=>e.id),(e=>{var o,t;return s`<nord-command-menu-action id="${e.id}" .command="${e}" ?selected="${this.open&&e.id===(null===(o=this.selected)||void 0===o?void 0:o.id)}" @click="${()=>this.select(e)}" role="option" aria-selected="${k(e.id===(null===(t=this.selected)||void 0===t?void 0:t.id),"true")}"></nord-command-menu-action>`}))}</div>`}handleCommandsChange(){this.keyboardController.registerCommandShortcuts()}handleBump(){this.open&&(this.bump=!0)}focusOnOpen(){this.open&&(this.previousFocus=B(document),this.focus(),this.listRef.value&&(this.listRef.value.scrollTop=0))}handleAnimationEnd(){this.bump=!1}handleBlur(){this.open&&this.focus()}handleInput(e){const o=e.target;this.setSearch(o.value)}select(e=this.selected){var o;this.commands.some((o=>o.parent===e.id))?(this.setParent(e.id),this.bump=!0,this.focus()):this.close(),this.setSearch(""),null===(o=e.handler)||void 0===o||o.call(e,this);const t=new x(e);this.dispatchEvent(t)}start(){this.selectedIndex=0}end(){this.selectedIndex=this.filteredCommands.length-1}next(){this.selectedIndex=v(this.selectedIndex+1,0,this.filteredCommands.length-1)}previous(){this.selectedIndex=v(this.selectedIndex-1,0,this.filteredCommands.length-1)}goBack(){if(!this.search&&this.parent){const e=this.commands.find((e=>e.id===this.parent));this.setParent(null==e?void 0:e.parent)}}setParent(e){this.parent=e,this.setSearch("")}setSearch(e){this.search=e,this.selectedIndex=0}filterCommands(){const e=this.search.toLocaleLowerCase().split(/\s+/);this.filteredCommands=this.commands.filter((({title:o,keywords:t="",parent:n})=>{const s=`${o} ${t}`.toLocaleLowerCase(),r=e.every((e=>s.includes(e)));return(!this.parent&&this.search||n==this.parent)&&r}))}};_.styles=[y,E],e([i({type:Boolean})],_.prototype,"open",void 0),e([i({type:String})],_.prototype,"placeholder",void 0),e([i({type:Array,attribute:!1})],_.prototype,"commands",void 0),e([a()],_.prototype,"parent",void 0),e([a()],_.prototype,"search",void 0),e([a()],_.prototype,"bump",void 0),e([a()],_.prototype,"selectedIndex",void 0),e([a()],_.prototype,"filteredCommands",void 0),e([z("commands")],_.prototype,"handleCommandsChange",null),e([z("open")],_.prototype,"handleBump",null),e([z("open","updated")],_.prototype,"focusOnOpen",null),e([z("search"),z("parent"),z("commands")],_.prototype,"filterCommands",null),_=e([o("nord-command-menu")],_);var R=_;export{R as default};
 //# sourceMappingURL=CommandMenu.js.map

package/lib/CommandMenu.js.map

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

package/lib/CommandMenuAction.js

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

package/lib/CommandMenuAction.js.map

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

package/lib/{Component-5a0a26a0.js → Component-49a41387.js}

@@ -1,2 +1,2 @@
-import{r as t}from"./lit-element-67e6cd99.js";const e=t`:host{all:unset;display:block;font-family:var(--n-font-family);font-size:var(--n-font-size-m);line-height:var(--n-line-height);font-feature-settings:var(--n-font-features);box-sizing:border-box;text-align:start}*,::after,::before{box-sizing:border-box;margin:0;padding:0}:host([hidden]),[hidden]{display:none!important}`;export{e as s};
-//# sourceMappingURL=Component-5a0a26a0.js.map
+import{i as e}from"./lit-element-79bc2e0e.js";const t=e`:host{all:unset;display:block;font-family:var(--n-font-family);font-size:var(--n-font-size-m);line-height:var(--n-line-height);font-feature-settings:var(--n-font-features);box-sizing:border-box;text-align:start}*,::after,::before{box-sizing:border-box;margin:0;padding:0}:host([hidden]),[hidden]{display:none!important}`;export{t as s};
+//# sourceMappingURL=Component-49a41387.js.map

package/lib/Component-49a41387.js.map

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

package/lib/DatePicker.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as i,$ as o,w as a,s as n}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as l}from"./query-2d22378e.js";import{o as d}from"./class-map-f1b6f1fa.js";import{n as c}from"./ref-57ff8ffc.js";import{l as p}from"./if-defined-fe1a64e3.js";import{c as m}from"./interface-close-small-44ababc3.js";import{F as h}from"./FocusableMixin-175ea4d7.js";import{F as u}from"./FormAssociatedMixin-d0d98a92.js";import{I as b}from"./InputMixin-9334d385.js";import{m as v,p as g,a as f}from"./dates-a8de5b83.js";import{N as y}from"./events-731d0007.js";import{S as w,i as x}from"./Calendar-c2dc6905.js";import{L as j}from"./LightDismissController-a2645ae6.js";import{LocalizeController as k}from"./LocalizeController.js";import"./Button.js";import z from"./Icon.js";import"./VisuallyHidden.js";import{s as $}from"./Component-5a0a26a0.js";import{s as D}from"./FormField-d3767c2e.js";import{R as F,s as C}from"./TextField-f48e2e5c.js";import{isoAdapter as L}from"./date-adapter.js";import{c as A}from"./cond-97c45476.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./repeat-084c4167.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-8b298382.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./collection-800f5002.js";import"./DateSelectEvent.js";import"./ShortcutController-87615e31.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./LightDomController-6d26dea2.js";import"./Spinner.js";import"./unsafe-html-61a04601.js";var E=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126v112H7zM35 7v28m70-28v28M7 63h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});const B=i`:host{--n-date-picker-color-overlay:rgba(0, 0, 0, 0.8);--n-date-picker-line-height:1.25;--n-date-picker-toggle-height:34px;color:var(--n-color-text);position:relative}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--n-date-picker-toggle-height);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-accent);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input{padding-inline-end:calc(var(--n-space-s) * 1.6 + var(--n-date-picker-toggle-height))}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-popout)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-popout)}nord-calendar{box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--n-calendar-padding:0}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}`;z.registerIcon(E),z.registerIcon(m);const S=/[^0-9./-]+/g,I=()=>!1;let O=class extends(u(F(b(h(n))))){constructor(){super(...arguments),this.dismiss=new j(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new w(this,{target:()=>this.dialog,matchesGesture:x,onSwipeEnd:()=>this.hide(!1)}),this.localize=new k(this,{onLangChange:()=>this.createDateFormatters()}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.dateAdapter=L,this.isDateDisabled=I,this.handleDaySelect=e=>{e.stopPropagation(),this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new y("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new y("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,o=e.selectionStart,a=i.slice(0,o),n=i.slice(o,i.length),r=a.replace(t,""),s=r+n.replace(t,""),l=r.length;e.value=s,e.selectionStart=l,e.selectionEnd=l}(t,S),this.dispatchEvent(new y("input"));const i=this.dateAdapter.parse(t.value,v);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return g(this.value)}set valueAsDate(e){this.value=e?f(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?f(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new y("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new y("close")),e&&this.toggleButton.focus()}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"";return o`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${p(this.name)}" .value="${t}" placeholder="${p(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${c(this.focusableRef)} aria-invalid="${A(this.error,"true")}" aria-describedby="${p(this.getDescribedBy())}" ?readonly="${this.readonly}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled||this.readonly}" type="button"><nord-icon name="interface-calendar" size="s"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${e?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(e)}</span>`:a}</nord-visually-hidden></button></div>${this.renderError()}<div class="${d({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localize.term("modalHeading")}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?f(e):"",this.dispatchEvent(new y("change"))}};O.styles=[$,D,C,B],e([l(".n-date-toggle",!0)],O.prototype,"toggleButton",void 0),e([l(".n-date-close",!0)],O.prototype,"closeButton",void 0),e([l("nord-calendar",!0)],O.prototype,"calendar",void 0),e([l('[role="dialog"]',!0)],O.prototype,"dialog",void 0),e([s()],O.prototype,"open",void 0),e([r()],O.prototype,"value",void 0),e([r()],O.prototype,"min",void 0),e([r()],O.prototype,"max",void 0),e([r()],O.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],O.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],O.prototype,"dateAdapter",void 0),e([r({attribute:!1})],O.prototype,"isDateDisabled",void 0),O=e([t("nord-date-picker")],O);var M=O;export{M as default};
+import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i,y as o,b as a,s as n}from"./lit-element-79bc2e0e.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as l}from"./query-2d22378e.js";import{o as d}from"./class-map-cd6c8cbd.js";import{n as c}from"./ref-697b28b5.js";import{l as p}from"./if-defined-f43b1487.js";import{c as m}from"./interface-close-small-44ababc3.js";import{F as h}from"./FocusableMixin-99db12c1.js";import{F as u}from"./FormAssociatedMixin-f6e5b3cd.js";import{I as b}from"./InputMixin-158f63fb.js";import{m as v,p as g,a as f}from"./dates-a8de5b83.js";import{N as y}from"./events-731d0007.js";import{S as w,i as x}from"./Calendar-7905498d.js";import{L as j}from"./LightDismissController-a2645ae6.js";import{LocalizeController as k}from"./LocalizeController.js";import"./Button.js";import z from"./Icon.js";import"./VisuallyHidden.js";import{s as $}from"./Component-49a41387.js";import{s as D}from"./FormField-72062bf1.js";import{R as F,s as C}from"./TextField-c34519d4.js";import{isoAdapter as L}from"./date-adapter.js";import{c as A}from"./cond-0a8d4554.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./repeat-e7acc0bd.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-8b298382.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./collection-800f5002.js";import"./DateSelectEvent.js";import"./ShortcutController-87615e31.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./LightDomController-9a6e398f.js";import"./Spinner.js";import"./unsafe-html-be8023cd.js";var E=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126v112H7zM35 7v28m70-28v28M7 63h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});const B=i`:host{--n-date-picker-color-overlay:rgba(0, 0, 0, 0.8);--n-date-picker-line-height:1.25;--n-date-picker-toggle-height:34px;color:var(--n-color-text);position:relative}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--n-date-picker-toggle-height);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-accent);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input{padding-inline-end:calc(var(--n-space-s) * 1.6 + var(--n-date-picker-toggle-height))}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-popout)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-popout)}nord-calendar{box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--n-calendar-padding:0}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}`;z.registerIcon(E),z.registerIcon(m);const S=/[^0-9./-]+/g,I=()=>!1;let O=class extends(u(F(b(h(n))))){constructor(){super(...arguments),this.dismiss=new j(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new w(this,{target:()=>this.dialog,matchesGesture:x,onSwipeEnd:()=>this.hide(!1)}),this.localize=new k(this,{onLangChange:()=>this.createDateFormatters()}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.dateAdapter=L,this.isDateDisabled=I,this.handleDaySelect=e=>{e.stopPropagation(),this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new y("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new y("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,o=e.selectionStart,a=i.slice(0,o),n=i.slice(o,i.length),r=a.replace(t,""),s=r+n.replace(t,""),l=r.length;e.value=s,e.selectionStart=l,e.selectionEnd=l}(t,S),this.dispatchEvent(new y("input"));const i=this.dateAdapter.parse(t.value,v);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return g(this.value)}set valueAsDate(e){this.value=e?f(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?f(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new y("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new y("close")),e&&this.toggleButton.focus()}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"";return o`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${p(this.name)}" .value="${t}" placeholder="${p(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${c(this.focusableRef)} aria-invalid="${A(this.error,"true")}" aria-describedby="${p(this.getDescribedBy())}" ?readonly="${this.readonly}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled||this.readonly}" type="button"><nord-icon name="interface-calendar" size="s"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${e?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(e)}</span>`:a}</nord-visually-hidden></button></div>${this.renderError()}<div class="${d({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localize.term("modalHeading")}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?f(e):"",this.dispatchEvent(new y("change"))}};O.styles=[$,D,C,B],e([l(".n-date-toggle",!0)],O.prototype,"toggleButton",void 0),e([l(".n-date-close",!0)],O.prototype,"closeButton",void 0),e([l("nord-calendar",!0)],O.prototype,"calendar",void 0),e([l('[role="dialog"]',!0)],O.prototype,"dialog",void 0),e([s()],O.prototype,"open",void 0),e([r()],O.prototype,"value",void 0),e([r()],O.prototype,"min",void 0),e([r()],O.prototype,"max",void 0),e([r()],O.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],O.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],O.prototype,"dateAdapter",void 0),e([r({attribute:!1})],O.prototype,"isDateDisabled",void 0),O=e([t("nord-date-picker")],O);var M=O;export{M 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","../src/common/input.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 21h126v112H7zM35 7v28m70-28v28M7 63h126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport \"../button/Button.js\"\nimport type Button from \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport \"../calendar/Calendar.js\"\nimport { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DateDisabledPredicate } from \"../calendar/Calendar.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst DISALLOWED_CHARACTERS = /[^0-9./-]+/g\nconst isDateDisabled = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status ready\n * @category form\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends FormAssociatedMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement)))) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(`.n-date-toggle`, true) private toggleButton!: Button\n  @query(`.n-date-close`, true) private closeButton!: HTMLButtonElement\n  @query(`nord-calendar`, true) private calendar!: Calendar\n  @query(`[role=\"dialog\"]`, true) private dialog!: HTMLElement\n\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this.calendar && node !== this.toggleButton,\n  })\n\n  private swipe = new SwipeController(this, {\n    target: () => this.dialog,\n    matchesGesture: isDownwardsSwipe,\n    onSwipeEnd: () => this.hide(false),\n  })\n\n  private localize = new LocalizeController<\"nord-date-picker\">(this, {\n    onLangChange: () => this.createDateFormatters(),\n  })\n\n  /**\n   * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n   * these are used to format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong!: Intl.DateTimeFormat\n\n  @state() private open = false\n\n  /**\n   * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = \"\"\n\n  get valueAsDate(): Date | undefined {\n    return parseISODate(this.value)\n  }\n\n  /**\n   * Get/set the value of the picker as a Date object.\n   */\n  set valueAsDate(date: Date | undefined) {\n    this.value = date ? printISODate(date) : \"\"\n  }\n\n  get valueAsNumber(): number {\n    return this.valueAsDate?.getTime() ?? NaN\n  }\n\n  /**\n   * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n   */\n  set valueAsNumber(date: number) {\n    this.value = date ? printISODate(new Date(date)) : \"\"\n  }\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @property() min: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @property() max: string = \"\"\n\n  /**\n   * Forces the opening direction of the calendar modal to be always left or right.\n   * This setting can be useful when the input is smaller than the opening date picker\n   * would be as by default the picker always opens towards right.\n   */\n  @property() direction: \"left\" | \"right\" = \"right\"\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @property({ attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   * Default is IS0-8601 parsing and formatting.\n   */\n  @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @property({ attribute: false }) isDateDisabled: DateDisabledPredicate = isDateDisabled\n\n  /**\n   * Show the calendar modal, moving focus to the calendar inside.\n   */\n  show() {\n    this.open = true\n    /**\n     * Dispatched when the calendar is toggled open.\n     */\n    this.dispatchEvent(new NordEvent(\"open\"))\n\n    // we should only focus once the calendar is visible after render is complete\n    this.updateComplete.then(() => this.calendar.focus({ target: \"month\" }))\n  }\n\n  /**\n   * Hide the calendar modal.\n   * @param {boolean} moveFocusToButton controls whether focus should be returned to the date picker's button.\n   */\n  hide(moveFocusToButton = true) {\n    this.open = false\n    /**\n     * Dispatched when the calendar is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.toggleButton.focus()\n    }\n  }\n\n  render() {\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <input\n          class=\"n-input\"\n          name=${ifDefined(this.name)}\n          .value=${formattedDate}\n          placeholder=${ifDefined(this.placeholder)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-autocomplete=\"none\"\n          @input=${this.handleInputChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          autocomplete=\"off\"\n          ${ref(this.focusableRef)}\n          aria-invalid=${cond(this.error, \"true\")}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          ?readonly=${this.readonly}\n        />\n        <button\n          class=\"n-date-toggle\"\n          @click=${this.toggleOpen}\n          ?disabled=${this.disabled || this.readonly}\n          type=\"button\"\n        >\n          <nord-icon name=\"interface-calendar\" size=\"s\"></nord-icon>\n          <nord-visually-hidden>\n            ${this.localize.term(\"buttonLabel\")}\n            ${valueAsDate\n              ? html`\n                  <span>\n                    , ${this.localize.term(\"selectedDateMessage\")} ${this.dateFormatLong.format(valueAsDate)}\n                  </span>\n                `\n              : nothing}\n          </nord-visually-hidden>\n        </button>\n      </div>\n\n      ${this.renderError()}\n\n      <div\n        class=${classMap({\n          \"is-left\": this.direction === \"left\",\n          \"is-active\": this.open,\n        })}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n        aria-labelledby=\"dialog-header\"\n      >\n        <div class=\"n-date-dialog-content\">\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n          <div class=\"n-date-mobile\">\n            <div class=\"n-date-mobile-heading\" id=\"dialog-header\">${this.localize.term(\"modalHeading\")}</div>\n            <button class=\"n-date-close\" @click=${this.hide} type=\"button\">\n              <nord-icon color=\"var(--n-color-icon)\" name=\"interface-close-small\" size=\"xs\"></nord-icon>\n              <nord-visually-hidden>${this.localize.term(\"closeLabel\")}</nord-visually-hidden>\n            </button>\n          </div>\n          <nord-calendar\n            value=${this.value}\n            min=${this.min}\n            max=${this.max}\n            .firstDayOfWeek=${this.firstDayOfWeek}\n            .isDateDisabled=${this.isDateDisabled}\n            @change=${this.handleDaySelect}\n          ></nord-calendar>\n\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n        </div>\n      </div>\n    `\n  }\n\n  private createDateFormatters() {\n    this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n      day: \"numeric\",\n      month: \"long\",\n      year: \"numeric\",\n    })\n  }\n\n  private focusFirst() {\n    this.closeButton.focus()\n  }\n\n  private focusLast() {\n    this.calendar.focus({ target: \"day\" })\n  }\n\n  private handleDaySelect = (e: DateSelectEvent) => {\n    e.stopPropagation()\n    this.setValue(e.date)\n    this.hide()\n  }\n\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n\n    if (this.open) {\n      this.hide(false)\n    } else {\n      this.show()\n    }\n  }\n\n  private handleBlur = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"blur\"))\n  }\n\n  private handleFocus = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"focus\"))\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    cleanValue(target, DISALLOWED_CHARACTERS)\n    this.dispatchEvent(new NordEvent(\"input\"))\n\n    const parsed = this.dateAdapter.parse(target.value, createDate)\n    if (parsed || target.value === \"\") {\n      this.setValue(parsed)\n    }\n  }\n\n  private setValue(date?: Date) {\n    this.value = date ? printISODate(date) : \"\"\n    this.dispatchEvent(new NordEvent(\"change\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-date-picker\": DatePicker\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n  const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","DISALLOWED_CHARACTERS","isDateDisabled","DatePicker","FormAssociatedMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","dismiss","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","calendar","toggleButton","swipe","SwipeController","target","dialog","matchesGesture","isDownwardsSwipe","onSwipeEnd","localize","LocalizeController","onLangChange","createDateFormatters","value","min","max","direction","firstDayOfWeek","dateAdapter","isoAdapter","handleDaySelect","stopPropagation","setValue","date","toggleOpen","preventDefault","show","handleBlur","event","dispatchEvent","NordEvent","handleFocus","handleInputChange","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","parsed","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","_b","_a","getTime","NaN","Date","updateComplete","then","focus","moveFocusToButton","render","formattedDate","format","html","renderLabel","ifDefined","name","placeholder","inputId","disabled","required","ref","focusableRef","cond","error","getDescribedBy","readonly","term","dateFormatLong","nothing","renderError","classMap","focusLast","focusFirst","Intl","DateTimeFormat","resolvedLang","day","month","year","closeButton","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","state","property","attribute","Number","customElement"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../src/date-picker/DatePicker.ts","../src/common/input.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 21h126v112H7zM35 7v28m70-28v28M7 63h126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport \"../button/Button.js\"\nimport type Button from \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport \"../calendar/Calendar.js\"\nimport { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DateDisabledPredicate } from \"../calendar/Calendar.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst DISALLOWED_CHARACTERS = /[^0-9./-]+/g\nconst isDateDisabled = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status ready\n * @category form\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends FormAssociatedMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement)))) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(`.n-date-toggle`, true) private toggleButton!: Button\n  @query(`.n-date-close`, true) private closeButton!: HTMLButtonElement\n  @query(`nord-calendar`, true) private calendar!: Calendar\n  @query(`[role=\"dialog\"]`, true) private dialog!: HTMLElement\n\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this.calendar && node !== this.toggleButton,\n  })\n\n  private swipe = new SwipeController(this, {\n    target: () => this.dialog,\n    matchesGesture: isDownwardsSwipe,\n    onSwipeEnd: () => this.hide(false),\n  })\n\n  private localize = new LocalizeController<\"nord-date-picker\">(this, {\n    onLangChange: () => this.createDateFormatters(),\n  })\n\n  /**\n   * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n   * these are used to format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong!: Intl.DateTimeFormat\n\n  @state() private open = false\n\n  /**\n   * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = \"\"\n\n  get valueAsDate(): Date | undefined {\n    return parseISODate(this.value)\n  }\n\n  /**\n   * Get/set the value of the picker as a Date object.\n   */\n  set valueAsDate(date: Date | undefined) {\n    this.value = date ? printISODate(date) : \"\"\n  }\n\n  get valueAsNumber(): number {\n    return this.valueAsDate?.getTime() ?? NaN\n  }\n\n  /**\n   * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n   */\n  set valueAsNumber(date: number) {\n    this.value = date ? printISODate(new Date(date)) : \"\"\n  }\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @property() min: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @property() max: string = \"\"\n\n  /**\n   * Forces the opening direction of the calendar modal to be always left or right.\n   * This setting can be useful when the input is smaller than the opening date picker\n   * would be as by default the picker always opens towards right.\n   */\n  @property() direction: \"left\" | \"right\" = \"right\"\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @property({ attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   * Default is IS0-8601 parsing and formatting.\n   */\n  @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @property({ attribute: false }) isDateDisabled: DateDisabledPredicate = isDateDisabled\n\n  /**\n   * Show the calendar modal, moving focus to the calendar inside.\n   */\n  show() {\n    this.open = true\n    /**\n     * Dispatched when the calendar is toggled open.\n     */\n    this.dispatchEvent(new NordEvent(\"open\"))\n\n    // we should only focus once the calendar is visible after render is complete\n    this.updateComplete.then(() => this.calendar.focus({ target: \"month\" }))\n  }\n\n  /**\n   * Hide the calendar modal.\n   * @param {boolean} moveFocusToButton controls whether focus should be returned to the date picker's button.\n   */\n  hide(moveFocusToButton = true) {\n    this.open = false\n    /**\n     * Dispatched when the calendar is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.toggleButton.focus()\n    }\n  }\n\n  render() {\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <input\n          class=\"n-input\"\n          name=${ifDefined(this.name)}\n          .value=${formattedDate}\n          placeholder=${ifDefined(this.placeholder)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-autocomplete=\"none\"\n          @input=${this.handleInputChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          autocomplete=\"off\"\n          ${ref(this.focusableRef)}\n          aria-invalid=${cond(this.error, \"true\")}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          ?readonly=${this.readonly}\n        />\n        <button\n          class=\"n-date-toggle\"\n          @click=${this.toggleOpen}\n          ?disabled=${this.disabled || this.readonly}\n          type=\"button\"\n        >\n          <nord-icon name=\"interface-calendar\" size=\"s\"></nord-icon>\n          <nord-visually-hidden>\n            ${this.localize.term(\"buttonLabel\")}\n            ${valueAsDate\n              ? html`\n                  <span>\n                    , ${this.localize.term(\"selectedDateMessage\")} ${this.dateFormatLong.format(valueAsDate)}\n                  </span>\n                `\n              : nothing}\n          </nord-visually-hidden>\n        </button>\n      </div>\n\n      ${this.renderError()}\n\n      <div\n        class=${classMap({\n          \"is-left\": this.direction === \"left\",\n          \"is-active\": this.open,\n        })}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n        aria-labelledby=\"dialog-header\"\n      >\n        <div class=\"n-date-dialog-content\">\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n          <div class=\"n-date-mobile\">\n            <div class=\"n-date-mobile-heading\" id=\"dialog-header\">${this.localize.term(\"modalHeading\")}</div>\n            <button class=\"n-date-close\" @click=${this.hide} type=\"button\">\n              <nord-icon color=\"var(--n-color-icon)\" name=\"interface-close-small\" size=\"xs\"></nord-icon>\n              <nord-visually-hidden>${this.localize.term(\"closeLabel\")}</nord-visually-hidden>\n            </button>\n          </div>\n          <nord-calendar\n            value=${this.value}\n            min=${this.min}\n            max=${this.max}\n            .firstDayOfWeek=${this.firstDayOfWeek}\n            .isDateDisabled=${this.isDateDisabled}\n            @change=${this.handleDaySelect}\n          ></nord-calendar>\n\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n        </div>\n      </div>\n    `\n  }\n\n  private createDateFormatters() {\n    this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n      day: \"numeric\",\n      month: \"long\",\n      year: \"numeric\",\n    })\n  }\n\n  private focusFirst() {\n    this.closeButton.focus()\n  }\n\n  private focusLast() {\n    this.calendar.focus({ target: \"day\" })\n  }\n\n  private handleDaySelect = (e: DateSelectEvent) => {\n    e.stopPropagation()\n    this.setValue(e.date)\n    this.hide()\n  }\n\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n\n    if (this.open) {\n      this.hide(false)\n    } else {\n      this.show()\n    }\n  }\n\n  private handleBlur = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"blur\"))\n  }\n\n  private handleFocus = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"focus\"))\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    cleanValue(target, DISALLOWED_CHARACTERS)\n    this.dispatchEvent(new NordEvent(\"input\"))\n\n    const parsed = this.dateAdapter.parse(target.value, createDate)\n    if (parsed || target.value === \"\") {\n      this.setValue(parsed)\n    }\n  }\n\n  private setValue(date?: Date) {\n    this.value = date ? printISODate(date) : \"\"\n    this.dispatchEvent(new NordEvent(\"change\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-date-picker\": DatePicker\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n  const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","DISALLOWED_CHARACTERS","isDateDisabled","DatePicker","FormAssociatedMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","dismiss","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","calendar","toggleButton","swipe","SwipeController","target","dialog","matchesGesture","isDownwardsSwipe","onSwipeEnd","localize","LocalizeController","onLangChange","createDateFormatters","value","min","max","direction","firstDayOfWeek","dateAdapter","isoAdapter","handleDaySelect","stopPropagation","setValue","date","toggleOpen","preventDefault","show","handleBlur","event","dispatchEvent","NordEvent","handleFocus","handleInputChange","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","parsed","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","_b","_a","getTime","NaN","Date","updateComplete","then","focus","moveFocusToButton","render","formattedDate","format","html","renderLabel","ifDefined","name","placeholder","inputId","disabled","required","ref","focusableRef","cond","error","getDescribedBy","readonly","term","dateFormatLong","nothing","renderError","classMap","focusLast","focusFirst","Intl","DateTimeFormat","resolvedLang","day","month","year","closeButton","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","state","property","attribute","Number","customElement"],"mappings":"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"}

package/lib/DateSelectEvent.js.map

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

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

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

package/lib/Divider.js

@@ -1,2 +1,2 @@
-import{_ as r,n as i}from"./query-assigned-elements-ef860822.js";import{r as e,s as o}from"./lit-element-67e6cd99.js";import{e as t}from"./property-03f59dce.js";import{o as s}from"./observe-a9c6dfb6.js";import{s as d}from"./Component-5a0a26a0.js";const n=e`:host{--n-divider-color:var(--n-color-border);--n-divider-size:1px}:host([direction=horizontal]){display:block;border-block-start:solid var(--n-divider-size) var(--n-divider-color)}:host([direction=vertical]){display:inline-block;min-block-size:100%;border-inline-start:solid var(--n-divider-size) var(--n-divider-color)}`;let a=class extends o{constructor(){super(...arguments),this.direction="horizontal"}firstUpdated(){this.setAttribute("role","separator")}handleDirectionChange(){this.setAttribute("aria-orientation","vertical"===this.direction?"vertical":"horizontal")}};a.styles=[d,n],r([t({reflect:!0})],a.prototype,"direction",void 0),r([s("direction")],a.prototype,"handleDirectionChange",null),a=r([i("nord-divider")],a);var l=a;export{l as default};
+import{_ as r,e}from"./query-assigned-elements-e6cbac30.js";import{i,s as o}from"./lit-element-79bc2e0e.js";import{e as t}from"./property-03f59dce.js";import{o as s}from"./observe-a9c6dfb6.js";import{s as n}from"./Component-49a41387.js";const d=i`:host{--n-divider-color:var(--n-color-border);--n-divider-size:1px}:host([direction=horizontal]){display:block;border-block-start:solid var(--n-divider-size) var(--n-divider-color)}:host([direction=vertical]){display:inline-block;min-block-size:100%;border-inline-start:solid var(--n-divider-size) var(--n-divider-color)}`;let a=class extends o{constructor(){super(...arguments),this.direction="horizontal"}firstUpdated(){this.setAttribute("role","separator")}handleDirectionChange(){this.setAttribute("aria-orientation","vertical"===this.direction?"vertical":"horizontal")}};a.styles=[n,d],r([t({reflect:!0})],a.prototype,"direction",void 0),r([s("direction")],a.prototype,"handleDirectionChange",null),a=r([e("nord-divider")],a);var l=a;export{l as default};
 //# sourceMappingURL=Divider.js.map

package/lib/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../src/divider/Divider.ts"],"sourcesContent":["import { LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Divider.css\"\n\n/**\n * Divider components are used to separate and distinguish sections of\n * content or groups of menu items. Visually, they look like\n * horizontal or vertical lines.\n *\n * @status new\n * @category structure\n */\n@customElement(\"nord-divider\")\nexport default class Divider extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The direction of the divider.\n   */\n  @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"horizontal\"\n\n  firstUpdated() {\n    this.setAttribute(\"role\", \"separator\")\n  }\n\n  @observe(\"direction\")\n  private handleDirectionChange() {\n    this.setAttribute(\"aria-orientation\", this.direction === \"vertical\" ? \"vertical\" : \"horizontal\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-divider\": Divider\n  }\n}\n"],"names":["Divider","LitElement","constructor","this","direction","firstUpdated","setAttribute","handleDirectionChange","styles","componentStyle","style","__decorate","property","reflect","prototype","observe","customElement"],"mappings":"okBAgBA,IAAqBA,EAArB,cAAqCC,EAArCC,kCAM+BC,KAASC,UAA8B,aAEpEC,eACEF,KAAKG,aAAa,OAAQ,aAIpBC,wBACNJ,KAAKG,aAAa,mBAAuC,aAAnBH,KAAKC,UAA2B,WAAa,gBAb9EJ,EAAAQ,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2Db,EAAAc,UAAA,iBAAA,GAOhFH,EAAA,CADCI,EAAQ,cAGRf,EAAAc,UAAA,wBAAA,MAfkBd,EAAOW,EAAA,CAD3BK,EAAc,iBACMhB,SAAAA"}
+{"version":3,"file":"Divider.js","sources":["../src/divider/Divider.ts"],"sourcesContent":["import { LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Divider.css\"\n\n/**\n * Divider components are used to separate and distinguish sections of\n * content or groups of menu items. Visually, they look like\n * horizontal or vertical lines.\n *\n * @status new\n * @category structure\n */\n@customElement(\"nord-divider\")\nexport default class Divider extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The direction of the divider.\n   */\n  @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"horizontal\"\n\n  firstUpdated() {\n    this.setAttribute(\"role\", \"separator\")\n  }\n\n  @observe(\"direction\")\n  private handleDirectionChange() {\n    this.setAttribute(\"aria-orientation\", this.direction === \"vertical\" ? \"vertical\" : \"horizontal\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-divider\": Divider\n  }\n}\n"],"names":["Divider","LitElement","constructor","this","direction","firstUpdated","setAttribute","handleDirectionChange","styles","componentStyle","style","__decorate","property","reflect","prototype","observe","customElement"],"mappings":"0jBAgBA,IAAqBA,EAArB,cAAqCC,EAArCC,kCAM+BC,KAASC,UAA8B,YAUrE,CARCC,eACEF,KAAKG,aAAa,OAAQ,YAC3B,CAGOC,wBACNJ,KAAKG,aAAa,mBAAuC,aAAnBH,KAAKC,UAA2B,WAAa,aACpF,GAdMJ,EAAAQ,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2Db,EAAAc,UAAA,iBAAA,GAOhFH,EAAA,CADCI,EAAQ,cAGRf,EAAAc,UAAA,wBAAA,MAfkBd,EAAOW,EAAA,CAD3BK,EAAc,iBACMhB,SAAAA"}

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

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

package/lib/Dropdown.js

@@ -1,2 +1,2 @@
-import{_ as o,n as t}from"./query-assigned-elements-ef860822.js";import{r as e,s as r,$ as s}from"./lit-element-67e6cd99.js";import{e as n}from"./property-03f59dce.js";import{i as p}from"./query-2d22378e.js";import{l as i}from"./if-defined-fe1a64e3.js";import"./Popout.js";import{s as d}from"./Component-5a0a26a0.js";import"./state-70f38ceb.js";import"./positioning-b660767c.js";import"./LightDismissController-a2645ae6.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./events-731d0007.js";import"./DirectionController-8b298382.js";import"./observe-a9c6dfb6.js";const a=e`:host{--n-dropdown-item-margin:0 var(--n-space-s);--n-dropdown-group-margin:0 0 var(--n-space-s)}::slotted(nord-dropdown-group){border-block-end:1px solid var(--n-color-border);padding:0 var(--n-space-s) var(--n-space-s);margin:0 0 var(--n-space-s)}::slotted(nord-dropdown-group:last-child){border:0;padding:0 var(--n-space-s);margin:0}.n-dropdown-content{padding:var(--n-space-s) 0}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:80vh;overflow-y:auto}}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}`;let l=class extends r{constructor(){super(...arguments),this.expand=!1}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]');null==o||o.setAttribute("aria-haspopup","true")}hide(o){this.popout.hide(o)}show(){this.popout.show()}render(){return s`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${i(this.align)}" position="${i(this.position)}" @open="${this.handleOpen}"><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const t=o.relatedTarget;t&&!this.contains(t)&&this.popout.hide(!1)}handleOpen(){var o;null===(o=this.querySelector("nord-dropdown-item"))||void 0===o||o.focus()}};l.styles=[d,a],l.shadowRootOptions={...r.shadowRootOptions,delegatesFocus:!0},o([p("nord-popout",!0)],l.prototype,"popout",void 0),o([n({reflect:!0})],l.prototype,"align",void 0),o([n({reflect:!0})],l.prototype,"position",void 0),o([n({reflect:!0,type:Boolean})],l.prototype,"expand",void 0),l=o([t("nord-dropdown")],l);var c=l;export{c as default};
+import{_ as o,e}from"./query-assigned-elements-e6cbac30.js";import{i as t,s as n,y as s}from"./lit-element-79bc2e0e.js";import{e as r}from"./property-03f59dce.js";import{i}from"./query-2d22378e.js";import{l as p}from"./if-defined-f43b1487.js";import"./Popout.js";import{s as d}from"./Component-49a41387.js";import"./state-70f38ceb.js";import"./positioning-3bbd3548.js";import"./LightDismissController-a2645ae6.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./events-731d0007.js";import"./DirectionController-8b298382.js";import"./observe-a9c6dfb6.js";const a=t`:host{--n-dropdown-item-margin:0 var(--n-space-s);--n-dropdown-group-margin:0 0 var(--n-space-s);--n-dropdown-size:250px}::slotted(nord-dropdown-group){border-block-end:1px solid var(--n-color-border);padding:0 var(--n-space-s) var(--n-space-s);margin:0 0 var(--n-space-s)}::slotted(nord-dropdown-group:last-child){border:0;padding:0 var(--n-space-s);margin:0}.n-dropdown-content{padding:var(--n-space-s) 0;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}}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size="s"]){--n-dropdown-size:150px}:host([size="l"]){--n-dropdown-size:300px}`;let l=class extends 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")}hide(o){this.popout.hide(o)}show(){this.popout.show()}render(){return s`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${p(this.align)}" position="${p(this.position)}" @open="${this.handleOpen}"><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){var o;null===(o=this.querySelector("nord-dropdown-item"))||void 0===o||o.focus()}};l.styles=[d,a],l.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([i("nord-popout",!0)],l.prototype,"popout",void 0),o([r({reflect:!0})],l.prototype,"align",void 0),o([r({reflect:!0})],l.prototype,"position",void 0),o([r({reflect:!0,type:Boolean})],l.prototype,"expand",void 0),o([r({reflect:!0})],l.prototype,"size",void 0),l=o([e("nord-dropdown")],l);var c=l;export{c as default};
 //# sourceMappingURL=Dropdown.js.map