@nordhealth/components 4.11.0 → 4.12.1

package/lib/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../src/card/Card.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Card.css\"\n\n/**\n * Cards are shadowed surfaces that display content and actions on a\n * single topic. They should be easy to scan for relevant and\n * actionable information.\n *\n * @status ready\n * @category structure\n * @slot - The card content.\n * @slot header - Optional slot that holds a header for the card.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n * @slot footer - Optional slot that holds footer content for the card.\n *\n * @cssprop [--n-card-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-card-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-card-padding=var(--n-space-m)] - Controls the padding on all sides of the card.\n * @cssprop [--n-card-slot-padding=var(--n-space-m)] - Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.\n * @cssprop [--n-card-header-background=transparent] - Controls the background color of the card header.\n */\n@customElement(\"nord-card\")\nexport default class Card extends LitElement {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, \"header\")\n  private headerEndSlot = new SlotController(this, \"header-end\")\n  private footerSlot = new SlotController(this, \"footer\")\n\n  /**\n   * Controls the padding of the card component. When set to “none”,\n   * the header and footer slots will still have padding.\n   */\n  @property({ reflect: true }) padding: \"m\" | \"l\" | \"none\" = \"m\"\n\n  render() {\n    return html`\n      <div class=\"n-card\">\n        <div class=\"header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n          <slot name=${this.headerSlot.slotName}></slot>\n          <slot name=${this.headerEndSlot.slotName}></slot>\n        </div>\n        <slot></slot>\n        <slot name=${this.footerSlot.slotName} ?hidden=${this.footerSlot.isEmpty}></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-card\": Card\n  }\n}\n"],"names":["Card","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","footerSlot","padding","render","html","isEmpty","slotName","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"wiEAyBe,IAAMA,EAAN,cAAmBC,EAAnB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAaG,cAAG,IAAID,EAAeF,KAAM,cACzCA,KAAUI,WAAG,IAAIF,EAAeF,KAAM,UAMjBA,KAAOK,QAAuB,GAc5D,CAZC,MAAAC,GACE,OAAOC,CAAI,oDAEuBP,KAAKC,WAAWO,SAAWR,KAAKG,cAAcK,wBAC7DR,KAAKC,WAAWQ,gCAChBT,KAAKG,cAAcM,mDAGrBT,KAAKI,WAAWK,sBAAoBT,KAAKI,WAAWI,wBAGtE,GAvBMX,EAAAa,OAAS,CAACC,EAAgBC,GAUJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyClB,EAAAmB,UAAA,eAAA,GAX3CnB,EAAIgB,EAAA,CADxBI,EAAc,cACMpB,SAAAA"}
+{"version":3,"file":"Card.js","sources":["../src/card/Card.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Card.css'\n\n/**\n * Cards are shadowed surfaces that display content and actions on a\n * single topic. They should be easy to scan for relevant and\n * actionable information.\n *\n * @status ready\n * @category structure\n * @slot - The card content.\n * @slot header - Optional slot that holds a header for the card.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n * @slot footer - Optional slot that holds footer content for the card.\n *\n * @cssprop [--n-card-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-card-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-card-padding=var(--n-space-m)] - Controls the padding on all sides of the card.\n * @cssprop [--n-card-slot-padding=var(--n-space-m)] - Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.\n * @cssprop [--n-card-header-background=transparent] - Controls the background color of the card header.\n */\n@customElement('nord-card')\nexport default class Card extends LitElement {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, 'header')\n  private headerEndSlot = new SlotController(this, 'header-end')\n  private footerSlot = new SlotController(this, 'footer')\n\n  /**\n   * Controls the padding of the card component. When set to “none”,\n   * the header and footer slots will still have padding.\n   */\n  @property({ reflect: true }) padding: 'm' | 'l' | 'none' = 'm'\n\n  render() {\n    return html`\n      <div class=\"n-card\">\n        <div class=\"header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n          <slot name=${this.headerSlot.slotName}></slot>\n          <slot name=${this.headerEndSlot.slotName}></slot>\n        </div>\n        <slot></slot>\n        <slot name=${this.footerSlot.slotName} ?hidden=${this.footerSlot.isEmpty}></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-card': Card\n  }\n}\n"],"names":["Card","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","footerSlot","padding","render","html","isEmpty","slotName","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"wiEAyBe,IAAMA,EAAN,cAAmBC,EAAnB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAaG,cAAG,IAAID,EAAeF,KAAM,cACzCA,KAAUI,WAAG,IAAIF,EAAeF,KAAM,UAMjBA,KAAOK,QAAuB,GAc5D,CAZC,MAAAC,GACE,OAAOC,CAAI,oDAEuBP,KAAKC,WAAWO,SAAWR,KAAKG,cAAcK,wBAC7DR,KAAKC,WAAWQ,gCAChBT,KAAKG,cAAcM,mDAGrBT,KAAKI,WAAWK,sBAAoBT,KAAKI,WAAWI,wBAGtE,GAvBMX,EAAAa,OAAS,CAACC,EAAgBC,GAUJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyClB,EAAAmB,UAAA,eAAA,GAX3CnB,EAAIgB,EAAA,CADxBI,EAAc,cACMpB,SAAAA"}

package/lib/Checkbox.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as n,html as o,LitElement as i}from"lit";import{property as r,customElement as t}from"lit/decorators.js";import{ifDefined as c}from"lit/directives/if-defined.js";import{ref as a}from"lit/directives/ref.js";import{c as s}from"./interface-checked-small-BtICPEsp.js";import l from"./Icon.js";import{F as d}from"./FocusableMixin-BlQLNPdJ.js";import{F as p}from"./FormAssociatedMixin-DFL7yabe.js";import{I as h}from"./InputMixin-LetXsCyv.js";import{S as m}from"./SizeMixin-CU9cLbLC.js";import{s as v}from"./Component-DSU3Qp0O.js";import{s as b}from"./FormField-CUC_H-0e.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./observe-D0n0zOfU.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m20 8.49976v3.00004h-20v-3.00004z" fill="currentColor"/></svg>',tags:"nordicon interface remove small delete erase minimize line",title:"interface-remove-small"});const k=n`:host{--_n-checkbox-size:calc(var(--n-space-m) * 1.25);--_n-checkbox-accent-color:var(--n-color-accent);--_n-checkbox-border-color:var(--n-color-border-hover);--_n-checkbox-icon-size:var(--n-size-icon-s);display:inline-block}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}input{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:var(--n-color-active);border:1px solid var(--_n-checkbox-border-color);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{background:var(--_n-checkbox-accent-color);cursor:default;opacity:1}:host([disabled]) input:not(:is(:checked, :indeterminate)){--_n-checkbox-accent-color:var(--n-color-active);--_n-checkbox-border-color:var(--n-color-border-neutral)}:host([disabled]) input:is(:checked, :indeterminate){opacity:.3}nord-icon{--_n-icon-size:var(--_n-checkbox-icon-size);display:none;position:absolute;color:var(--n-color-text-on-accent);inset:var(--n-space-xs);z-index:var(--n-index-default);pointer-events:none}input:checked~.icon-checked,input:indeterminate~.icon-indeterminate{display:block}.n-label-container{margin-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-form);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([size="s"]){--_n-checkbox-size:var(--n-space-m);--_n-checkbox-icon-size:var(--n-size-icon-xs)}:host([size="s"]) nord-icon{inset:calc(var(--n-space-s)/ 2.6)}:host([size="s"]:not([hide-label])) .n-input-container{margin:calc(var(--n-space-s)/ 2.6) 0}:host([size="l"]){--_n-checkbox-size:var(--n-space-l);--_n-checkbox-icon-size:var(--n-size-icon-m)}:host([size="l"]:not([hide-label])) .n-label-container{margin:2px 0 0}`;l.registerIcon(s),l.registerIcon(u);let x=class extends(m(p(h(d(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 ${a(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${c(this.name)}" .value="${this.value}" .checked="${this.checked}" .indeterminate="${this.indeterminate}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${c(this.getDescribedBy())}" aria-invalid="${c(this.getInvalid())}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small"></nord-icon><nord-icon class="icon-indeterminate" name="interface-remove-small"></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)}};x.styles=[v,b,k],e([r({reflect:!0,type:Boolean})],x.prototype,"indeterminate",void 0),e([r({reflect:!0,type:Boolean})],x.prototype,"checked",void 0),x=e([t("nord-checkbox")],x);var f=x;export{f as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{c as n}from"./interface-checked-small-BtICPEsp.js";import{css as o,html as i,LitElement as r}from"lit";import{property as t,customElement as c}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{ref as s}from"lit/directives/ref.js";import{F as l}from"./FocusableMixin-BlQLNPdJ.js";import{F as d}from"./FormAssociatedMixin-DFL7yabe.js";import{I as p}from"./InputMixin-LetXsCyv.js";import{S as h}from"./SizeMixin-CU9cLbLC.js";import{s as m}from"./Component-DSU3Qp0O.js";import{s as v}from"./FormField--eLuhPue.js";import b from"./Icon.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m20 8.49976v3.00004h-20v-3.00004z" fill="currentColor"/></svg>',tags:"nordicon interface remove small delete erase minimize line",title:"interface-remove-small"});const k=o`:host{--_n-checkbox-size:calc(var(--n-space-m) * 1.25);--_n-checkbox-accent-color:var(--n-color-accent);--_n-checkbox-border-color:var(--n-color-border-hover);--_n-checkbox-icon-size:var(--n-size-icon-s);display:inline-block}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}input{appearance:none;background:var(--n-color-active);border:1px solid var(--_n-checkbox-border-color);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{background:var(--_n-checkbox-accent-color);cursor:default;opacity:1}:host([disabled]) input:not(:is(:checked, :indeterminate)){--_n-checkbox-accent-color:var(--n-color-active);--_n-checkbox-border-color:var(--n-color-border-neutral)}:host([disabled]) input:is(:checked, :indeterminate){opacity:.3}nord-icon{--_n-icon-size:var(--_n-checkbox-icon-size);display:none;position:absolute;color:var(--n-color-text-on-accent);inset:var(--n-space-xs);z-index:var(--n-index-default);pointer-events:none}input:checked~.icon-checked,input:indeterminate~.icon-indeterminate{display:block}.n-label-container{margin-block-end:0}label{user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-form);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([size='s']){--_n-checkbox-size:var(--n-space-m);--_n-checkbox-icon-size:var(--n-size-icon-xs)}:host([size='s']) nord-icon{inset:calc(var(--n-space-s)/ 2.6)}:host([size='s']:not([hide-label])) .n-input-container{margin:calc(var(--n-space-s)/ 2.6) 0}:host([size='l']){--_n-checkbox-size:var(--n-space-l);--_n-checkbox-icon-size:var(--n-size-icon-m)}:host([size='l']:not([hide-label])) .n-label-container{margin:2px 0 0}`;b.registerIcon(n),b.registerIcon(u);let x=class extends(h(d(p(l(r))))){constructor(){super(...arguments),this.indeterminate=!1,this.checked=!1}get formValue(){return this.checked?this.value||"on":void 0}render(){return i`<div class="n-flex"><div class="n-input-container"><input ${s(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"></nord-icon><nord-icon class="icon-indeterminate" name="interface-remove-small"></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)}};x.styles=[m,v,k],e([t({reflect:!0,type:Boolean})],x.prototype,"indeterminate",void 0),e([t({reflect:!0,type:Boolean})],x.prototype,"checked",void 0),x=e([c("nord-checkbox")],x);var f=x;export{f as default};
 //# sourceMappingURL=Checkbox.js.map

package/lib/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../icons/lib/assets/interface-remove-small.js","../src/checkbox/Checkbox.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m20 8.49976v3.00004h-20v-3.00004z\" fill=\"currentColor\"/></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\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.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 * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement(\"nord-checkbox\")\nexport default class Checkbox extends SizeMixin(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({ reflect: true, type: Boolean }) indeterminate = false\n\n  /**\n   * Controls whether the checkbox is checked or not.\n   */\n  @property({ reflect: true, 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\"></nord-icon>\n          <nord-icon class=\"icon-indeterminate\" name=\"interface-remove-small\"></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","SizeMixin","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","reflect","type","Boolean","prototype","customElement"],"mappings":"i8BAAe,2IAEK,mEADC,w8ECgBrBA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAeH,IAAMC,EAAN,cAAuBC,EAAUC,EAAoBC,EAAWC,EAAeC,OAA/E,WAAAC,uBAU+BC,KAAaC,eAAG,EAKhBD,KAAOE,SAAY,CAkChE,CA9CC,aAAuBC,GACrB,OAAOH,KAAKE,QAAUF,KAAKI,OAAS,UAAOC,CAC5C,CAYD,MAAAC,GACE,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,wMAKKjB,KAAKkB,iBAAiBlB,KAAKmB,2BAGxD,CAES,YAAAF,CAAaG,GACrB,MAAMC,EAASD,EAAEC,OACjBrB,KAAKE,QAAUmB,EAAOnB,QACtBoB,MAAML,aAAaG,EACpB,GA/CM3B,EAAM8B,OAAG,CAACC,EAAgBC,EAAgBC,GASLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAgCtC,EAAAuC,UAAA,qBAAA,GAKrBL,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAmCtC,EAAAuC,UAAA,eAAA,GAfjDvC,EAAQkC,EAAA,CAD5BM,EAAc,kBACMxC,SAAAA"}
+{"version":3,"file":"Checkbox.js","sources":["../../icons/lib/assets/interface-remove-small.js","../src/checkbox/Checkbox.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m20 8.49976v3.00004h-20v-3.00004z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-remove-small\";\nexport const tags =\n  \"nordicon interface remove small delete erase minimize line\";\n","import * as checkedIcon from '@nordhealth/icons/lib/assets/interface-checked-small.js'\nimport * as indeterminateIcon from '@nordhealth/icons/lib/assets/interface-remove-small.js'\nimport { 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'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport formFieldStyle from '../common/styles/FormField.css'\nimport Icon from '../icon/Icon.js'\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 * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-checkbox')\nexport default class Checkbox extends SizeMixin(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({ reflect: true, type: Boolean }) indeterminate = false\n\n  /**\n   * Controls whether the checkbox is checked or not.\n   */\n  @property({ reflect: true, 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\"></nord-icon>\n          <nord-icon class=\"icon-indeterminate\" name=\"interface-remove-small\"></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","SizeMixin","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","reflect","type","Boolean","prototype","customElement"],"mappings":"i8BAAe,2IAGb,mEAFmB,k4ECgBrBA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAeH,IAAMC,EAAN,cAAuBC,EAAUC,EAAoBC,EAAWC,EAAeC,OAA/E,WAAAC,uBAU+BC,KAAaC,eAAG,EAKhBD,KAAOE,SAAY,CAkChE,CA9CC,aAAuBC,GACrB,OAAOH,KAAKE,QAAUF,KAAKI,OAAS,UAAOC,CAC5C,CAYD,MAAAC,GACE,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,wMAKKjB,KAAKkB,iBAAiBlB,KAAKmB,2BAGxD,CAES,YAAAF,CAAaG,GACrB,MAAMC,EAASD,EAAEC,OACjBrB,KAAKE,QAAUmB,EAAOnB,QACtBoB,MAAML,aAAaG,EACpB,GA/CM3B,EAAM8B,OAAG,CAACC,EAAgBC,EAAgBC,GASLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAgCtC,EAAAuC,UAAA,qBAAA,GAKrBL,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAmCtC,EAAAuC,UAAA,eAAA,GAfjDvC,EAAQkC,EAAA,CAD5BM,EAAc,kBACMxC,SAAAA"}

package/lib/CommandMenu.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,LitElement as o,html as i,nothing as n}from"lit";import{property as r,state as s,customElement as a}from"lit/decorators.js";import{repeat as l}from"lit/directives/repeat.js";import{createRef as c,ref as d}from"lit/directives/ref.js";import{classMap as p}from"lit/directives/class-map.js";import{ifDefined as m}from"lit/directives/if-defined.js";import{g as h}from"./collection-Dvg2XbxV.js";import{w as v}from"./number-Dg2vCfGd.js";import{N as u}from"./events-Bv6wNHwJ.js";import{L as f}from"./LightDismissController-4pH8cdko.js";import{KeyboardController as b}from"./KeyboardController.js";import x from"./Icon.js";import"./VisuallyHidden.js";import"./CommandMenuAction.js";import{SelectEvent as g}from"./SelectEvent.js";import{s as y}from"./Component-DSU3Qp0O.js";import{LocalizeController as w}from"./LocalizeController.js";import{c as z}from"./cond-CI1KbneT.js";import{o as k}from"./observe-D0n0zOfU.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./DirectionController-ChvNGESZ.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const j="keyboard-arrow-up-down";var $=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m8.29008 12.3413 1.41 1.42-3.96 3.95c-.2.19-.45.29-.71.29s-.51-.1-.71-.29l-3.990002-4 1.410002-1.42 2.26 2.25v-12.54002h2v12.63002zm11.38002-6.05002-4.01-4c-.39-.39-1.02-.39-1.41 0l-3.96 3.95 1.41 1.42 2.29-2.29v12.63002h2v-12.54002l2.26 2.25 1.41-1.42z" fill="currentColor"/></svg>',tags:"nordicon keyboard keys arrow up down shortcut",title:j});const C="keyboard-return";var _=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18.0025 4v8c0 1.1-.9 2-2 2h-12.59l3 3-1.41 1.41-4.71-4.7c-.39-.39-.39-1.02 0-1.41l4.71-4.71 1.41 1.41-3 3h12.59v-8h-4v-2h4c1.1 0 2 .9 2 2z" fill="currentColor"/></svg>',tags:"nordicon keyboard return key shortcut",title:C});const I="keyboard-backspace";var B=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-10.54c-.58 0-1.14.25-1.52.7l-5.14 6c-.65.75-.65 1.85 0 2.6l5.14 6c.38.44.93.7 1.52.7h10.54c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm0 14h-10.54l-5.14-6 5.14-6h10.54zm-9.54-3.88 2.12-2.12-2.12-2.12 1.41-1.41 2.12 2.12 2.12-2.12 1.41 1.41-2.12 2.12 2.12 2.12-1.41 1.41-2.12-2.12-2.12 2.12z" fill="currentColor"/></svg>',tags:"nordicon keyboard backspace back delete key shortcut",title:I});function E(e){var t;return(null===(t=e.activeElement)||void 0===t?void 0:t.shadowRoot)?E(e.activeElement.shadowRoot):e.activeElement||void 0}const O=t`:host{--_n-command-menu-inline-size:var(--n-command-menu-inline-size, 640px);--_n-command-menu-block-size:var(--n-command-menu-block-size, 290px);--_n-command-menu-block-start:var(--n-command-menu-block-start, 16%)}.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-block-start);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-inline-size);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-block-size);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:var(--n-space-xs);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)}`;x.registerIcon($),x.registerIcon(_),x.registerIcon(B);let S=class extends o{constructor(){super(...arguments),this.inputRef=c(),this.listRef=c(),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.externalFiltering=!1,this.exitNestedOnSearch=!1,this.commands=[],this.searchQuery="",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 t=h(this.filteredCommands,"section"),o=0===this.filteredCommands.length?"no-results":null===(e=this.selected)||void 0===e?void 0:e.id;return i`<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}" ${d(this.inputRef)} placeholder="${this.localize.term("placeholder")}" .value="${this.searchQuery}" 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(o)}" aria-describedby="instructions"></div><div class="n-modal-body"><div id="list" ${d(this.listRef)} role="listbox" aria-label="${this.localize.term("inputLabel")}">${0===this.filteredCommands.length?this.renderNoResults():Array.from(t,(([e,t])=>this.renderSection(e,t)))}</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="${C}"></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 i`<div id="no-results" class="n-command-empty" role="option" aria-selected="true"><div class="n-title">${this.localize.term("noResults",this.searchQuery)}</div><div class="n-tip">${this.localize.term("tip")}</div></div>`}renderSection(e,t){const o=`section-${e}`;return i`<div role="group" aria-labelledby="${z(e,o)}">${e?i`<div class="n-group-header" role="presentation" id="${o}">${e}</div>`:n} ${l(t,(e=>e.id),(e=>{var t,o;return i`<nord-command-menu-action id="${e.id}" .command="${e}" ?selected="${this.open&&e.id===(null===(t=this.selected)||void 0===t?void 0:t.id)}" @click="${()=>this.select(e)}" role="option" aria-selected="${z(e.id===(null===(o=this.selected)||void 0===o?void 0:o.id),"true")}"></nord-command-menu-action>`}))}</div>`}handleCommandsChange(){this.keyboardController.registerCommandShortcuts()}handleBump(){this.open&&(this.bump=!0)}focusOnOpen(){this.open&&(this.previousFocus=E(document),this.focus(),this.listRef.value&&(this.listRef.value.scrollTop=0))}handleAnimationEnd(){this.bump=!1}handleBlur(){this.open&&this.focus()}handleInput(e){e.stopPropagation();const t=e.target;this.setSearch(t.value),this.exitNestedOnSearch&&t.value&&this.parent&&(this.parent=void 0),this.dispatchEvent(new u("input"))}select(e=this.selected){var t;this.commands.some((t=>t.parent===e.id))?(this.setParent(e.id),this.bump=!0,this.focus()):this.close(),this.setSearch(""),null===(t=e.handler)||void 0===t||t.call(e,this);const o=new g(e);this.dispatchEvent(o)}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.searchQuery&&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.searchQuery=e,this.selectedIndex=0}filterCommands(){const e=[...h(this.commands,"section").values()].flat();if(this.externalFiltering)return void(this.filteredCommands=e.filter((({parent:e})=>e==this.parent)));const t=this.searchQuery.toLocaleLowerCase().split(/\s+/);this.filteredCommands=e.filter((({title:e,keywords:o="",parent:i})=>{const n=`${e} ${o}`.toLocaleLowerCase(),r=t.every((e=>n.includes(e)));return!this.parent&&this.searchQuery?r&&!i:i==this.parent&&r}))}};S.styles=[y,O],e([r({reflect:!0,type:Boolean})],S.prototype,"open",void 0),e([r({reflect:!0,type:Boolean,attribute:"external-filtering"})],S.prototype,"externalFiltering",void 0),e([r({reflect:!0,type:Boolean,attribute:"exit-nested-on-search"})],S.prototype,"exitNestedOnSearch",void 0),e([r({type:Array,attribute:!1})],S.prototype,"commands",void 0),e([r({type:String,attribute:!1})],S.prototype,"searchQuery",void 0),e([s()],S.prototype,"parent",void 0),e([s()],S.prototype,"bump",void 0),e([s()],S.prototype,"selectedIndex",void 0),e([s()],S.prototype,"filteredCommands",void 0),e([k("commands")],S.prototype,"handleCommandsChange",null),e([k("open")],S.prototype,"handleBump",null),e([k("open","updated")],S.prototype,"focusOnOpen",null),e([k("searchQuery"),k("parent"),k("commands"),k("externalFiltering")],S.prototype,"filterCommands",null),S=e([a("nord-command-menu")],S);var R=S;export{R as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,LitElement as o,html as i,nothing as n}from"lit";import{property as r,state as s,customElement as a}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{ifDefined as c}from"lit/directives/if-defined.js";import{createRef as d,ref as p}from"lit/directives/ref.js";import{repeat as m}from"lit/directives/repeat.js";import{g as h}from"./collection-Dvg2XbxV.js";import{L as v}from"./LightDismissController-4pH8cdko.js";import{o as u}from"./observe-D0n0zOfU.js";import{c as f}from"./cond-CI1KbneT.js";import{N as b}from"./events-Bv6wNHwJ.js";import{w as x}from"./number-Dg2vCfGd.js";import{s as g}from"./Component-DSU3Qp0O.js";import y from"./Icon.js";import{LocalizeController as w}from"./LocalizeController.js";import{KeyboardController as z}from"./KeyboardController.js";import{SelectEvent as k}from"./SelectEvent.js";import"./VisuallyHidden.js";import"./CommandMenuAction.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./DirectionController-ChvNGESZ.js";const j="keyboard-arrow-up-down";var $=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m8.29008 12.3413 1.41 1.42-3.96 3.95c-.2.19-.45.29-.71.29s-.51-.1-.71-.29l-3.990002-4 1.410002-1.42 2.26 2.25v-12.54002h2v12.63002zm11.38002-6.05002-4.01-4c-.39-.39-1.02-.39-1.41 0l-3.96 3.95 1.41 1.42 2.29-2.29v12.63002h2v-12.54002l2.26 2.25 1.41-1.42z" fill="currentColor"/></svg>',tags:"nordicon keyboard keys arrow up down shortcut",title:j});const C="keyboard-backspace";var _=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-10.54c-.58 0-1.14.25-1.52.7l-5.14 6c-.65.75-.65 1.85 0 2.6l5.14 6c.38.44.93.7 1.52.7h10.54c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm0 14h-10.54l-5.14-6 5.14-6h10.54zm-9.54-3.88 2.12-2.12-2.12-2.12 1.41-1.41 2.12 2.12 2.12-2.12 1.41 1.41-2.12 2.12 2.12 2.12-1.41 1.41-2.12-2.12-2.12 2.12z" fill="currentColor"/></svg>',tags:"nordicon keyboard backspace back delete key shortcut",title:C});const I="keyboard-return";var B=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18.0025 4v8c0 1.1-.9 2-2 2h-12.59l3 3-1.41 1.41-4.71-4.7c-.39-.39-.39-1.02 0-1.41l4.71-4.71 1.41 1.41-3 3h12.59v-8h-4v-2h4c1.1 0 2 .9 2 2z" fill="currentColor"/></svg>',tags:"nordicon keyboard return key shortcut",title:I});function E(e){var t;return(null===(t=e.activeElement)||void 0===t?void 0:t.shadowRoot)?E(e.activeElement.shadowRoot):e.activeElement||void 0}const O=t`:host{--_n-command-menu-inline-size:var(--n-command-menu-inline-size, 640px);--_n-command-menu-block-size:var(--n-command-menu-block-size, 290px);--_n-command-menu-block-start:var(--n-command-menu-block-start, 16%)}.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-block-start);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-inline-size);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-block-size);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:var(--n-space-xs);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)}`;y.registerIcon($),y.registerIcon(B),y.registerIcon(_);let S=class extends o{constructor(){super(...arguments),this.inputRef=d(),this.listRef=d(),this.localize=new w(this),this.dismissController=new v(this,{isOpen:()=>this.open,onDismiss:()=>this.close()}),this.keyboardController=new z(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.externalFiltering=!1,this.exitNestedOnSearch=!1,this.commands=[],this.searchQuery="",this.bump=!0,this.selectedIndex=0,this.filteredCommands=[]}get selected(){return this.filteredCommands[this.selectedIndex]}show(e={}){this.dispatchEvent(new b("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 b("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 t=h(this.filteredCommands,"section"),o=0===this.filteredCommands.length?"no-results":null===(e=this.selected)||void 0===e?void 0:e.id;return i`<div class="${l({"n-visible":this.open,"n-modal":!0})}"><div @animationend="${this.handleAnimationEnd}" class="${l({"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}" ${p(this.inputRef)} placeholder="${this.localize.term("placeholder")}" .value="${this.searchQuery}" 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="${c(o)}" aria-describedby="instructions"></div><div class="n-modal-body"><div id="list" ${p(this.listRef)} role="listbox" aria-label="${this.localize.term("inputLabel")}">${0===this.filteredCommands.length?this.renderNoResults():Array.from(t,(([e,t])=>this.renderSection(e,t)))}</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="${I}"></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="${C}"></nord-icon>${this.localize.term("footerBackspaceKey")}</span></div></slot></div></div>`}renderNoResults(){return i`<div id="no-results" class="n-command-empty" role="option" aria-selected="true"><div class="n-title">${this.localize.term("noResults",this.searchQuery)}</div><div class="n-tip">${this.localize.term("tip")}</div></div>`}renderSection(e,t){const o=`section-${e}`;return i`<div role="group" aria-labelledby="${f(e,o)}">${e?i`<div class="n-group-header" role="presentation" id="${o}">${e}</div>`:n} ${m(t,(e=>e.id),(e=>{var t,o;return i`<nord-command-menu-action id="${e.id}" .command="${e}" ?selected="${this.open&&e.id===(null===(t=this.selected)||void 0===t?void 0:t.id)}" @click="${()=>this.select(e)}" role="option" aria-selected="${f(e.id===(null===(o=this.selected)||void 0===o?void 0:o.id),"true")}"></nord-command-menu-action>`}))}</div>`}handleCommandsChange(){this.keyboardController.registerCommandShortcuts()}handleBump(){this.open&&(this.bump=!0)}focusOnOpen(){this.open&&(this.previousFocus=E(document),this.focus(),this.listRef.value&&(this.listRef.value.scrollTop=0))}handleAnimationEnd(){this.bump=!1}handleBlur(){this.open&&this.focus()}handleInput(e){e.stopPropagation();const t=e.target;this.setSearch(t.value),this.exitNestedOnSearch&&t.value&&this.parent&&(this.parent=void 0),this.dispatchEvent(new b("input"))}select(e=this.selected){var t;this.commands.some((t=>t.parent===e.id))?(this.setParent(e.id),this.bump=!0,this.focus()):this.close(),this.setSearch(""),null===(t=e.handler)||void 0===t||t.call(e,this);const o=new k(e);this.dispatchEvent(o)}start(){this.selectedIndex=0}end(){this.selectedIndex=this.filteredCommands.length-1}next(){this.selectedIndex=x(this.selectedIndex+1,0,this.filteredCommands.length-1)}previous(){this.selectedIndex=x(this.selectedIndex-1,0,this.filteredCommands.length-1)}goBack(){if(!this.searchQuery&&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.searchQuery=e,this.selectedIndex=0}filterCommands(){const e=[...h(this.commands,"section").values()].flat();if(this.externalFiltering)return void(this.filteredCommands=e.filter((({parent:e})=>e==this.parent)));const t=this.searchQuery.toLocaleLowerCase().split(/\s+/);this.filteredCommands=e.filter((({title:e,keywords:o="",parent:i})=>{const n=`${e} ${o}`.toLocaleLowerCase(),r=t.every((e=>n.includes(e)));return!this.parent&&this.searchQuery?r&&!i:i==this.parent&&r}))}};S.styles=[g,O],e([r({reflect:!0,type:Boolean})],S.prototype,"open",void 0),e([r({reflect:!0,type:Boolean,attribute:"external-filtering"})],S.prototype,"externalFiltering",void 0),e([r({reflect:!0,type:Boolean,attribute:"exit-nested-on-search"})],S.prototype,"exitNestedOnSearch",void 0),e([r({type:Array,attribute:!1})],S.prototype,"commands",void 0),e([r({type:String,attribute:!1})],S.prototype,"searchQuery",void 0),e([s()],S.prototype,"parent",void 0),e([s()],S.prototype,"bump",void 0),e([s()],S.prototype,"selectedIndex",void 0),e([s()],S.prototype,"filteredCommands",void 0),e([u("commands")],S.prototype,"handleCommandsChange",null),e([u("open")],S.prototype,"handleBump",null),e([u("open","updated")],S.prototype,"focusOnOpen",null),e([u("searchQuery"),u("parent"),u("commands"),u("externalFiltering")],S.prototype,"filterCommands",null),S=e([a("nord-command-menu")],S);var R=S;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 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m8.29008 12.3413 1.41 1.42-3.96 3.95c-.2.19-.45.29-.71.29s-.51-.1-.71-.29l-3.990002-4 1.410002-1.42 2.26 2.25v-12.54002h2v12.63002zm11.38002-6.05002-4.01-4c-.39-.39-1.02-.39-1.41 0l-3.96 3.95 1.41 1.42 2.29-2.29v12.63002h2v-12.54002l2.26 2.25 1.41-1.42z\" fill=\"currentColor\"/></svg>'\nexport const title = \"keyboard-arrow-up-down\"\nexport const tags = \"nordicon keyboard keys arrow up down shortcut\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18.0025 4v8c0 1.1-.9 2-2 2h-12.59l3 3-1.41 1.41-4.71-4.7c-.39-.39-.39-1.02 0-1.41l4.71-4.71 1.41 1.41-3 3h12.59v-8h-4v-2h4c1.1 0 2 .9 2 2z\" fill=\"currentColor\"/></svg>'\nexport const title = \"keyboard-return\"\nexport const tags = \"nordicon keyboard return key shortcut\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18 2h-10.54c-.58 0-1.14.25-1.52.7l-5.14 6c-.65.75-.65 1.85 0 2.6l5.14 6c.38.44.93.7 1.52.7h10.54c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm0 14h-10.54l-5.14-6 5.14-6h10.54zm-9.54-3.88 2.12-2.12-2.12-2.12 1.41-1.41 2.12 2.12 2.12-2.12 1.41 1.41-2.12 2.12 2.12 2.12-1.41 1.41-2.12-2.12-2.12 2.12z\" fill=\"currentColor\"/></svg>'\nexport const title = \"keyboard-backspace\"\nexport const tags = \"nordicon keyboard backspace back delete key shortcut\"\n","/**\n * Gets the currently focused element, taking shadow roots into account.\n */\nexport function getFocusedElement(root: Document | ShadowRoot): Element | undefined {\n  if (root.activeElement?.shadowRoot) {\n    return getFocusedElement(root.activeElement.shadowRoot)\n  }\n\n  return root.activeElement || undefined\n}\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { repeat } from \"lit/directives/repeat.js\"\nimport { createRef, ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\n\nimport * as navigateIcon from \"@nordhealth/icons/lib/assets/keyboard-arrow-up-down.js\"\nimport * as enterIcon from \"@nordhealth/icons/lib/assets/keyboard-return.js\"\nimport * as backspaceIcon from \"@nordhealth/icons/lib/assets/keyboard-backspace.js\"\n\nimport { groupBy } from \"../common/collection.js\"\nimport { wrap } from \"../common/number.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { getFocusedElement } from \"../common/focus.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { KeyboardController } from \"./KeyboardController.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"./CommandMenuAction.js\"\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\nimport { SelectEvent } from \"./SelectEvent.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./CommandMenu.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nIcon.registerIcon(navigateIcon)\nIcon.registerIcon(enterIcon)\nIcon.registerIcon(backspaceIcon)\n\n/**\n * Command Menu allows users to navigate and use an app without\n * touching the mouse and helps them transform into “power users”\n * who can harness more advanced features far faster.\n *\n * @status ready\n * @category action\n * @slot footer - Used to replace the default footer contents.\n * @fires open - The command menu was opened.\n * @fires close - The command menu was closed.\n * @fires {SelectEvent} nord-select - User selected a command from the menu.\n *\n * @cssprop [--n-command-menu-inline-size=640px] - Controls the max inline size, or width, of the command menu.\n * @cssprop [--n-command-menu-block-size=290px] - Controls the max block size, or height, of the command menu.\n * @cssprop [--n-command-menu-block-start=16%] - Controls the command menu offset from the block start, or top, of the screen.\n *\n * @localization instructions - Instructions that offer guidance on how to use the command menu.\n * @localization inputLabel - Accessible label given to the command menu's input.\n * @localization footerArrowKeys - Describes what the arrow keys do.\n * @localization footerEnterKey - Describes what the enter key does.\n * @localization footerEscapeKey - Describes what the escape key does.\n * @localization footerBackspaceKey - Describes what the backspace key does.\n * @localization noResults - A message shown when there are no matching results.\n * @localization tip - A hint tip that describes some approaches to find a command when there are no matching results.\n * @localization placeholder - Hint text to display in the Command Menu search field.\n */\n@customElement(\"nord-command-menu\")\nexport default class CommandMenu extends LitElement {\n  static styles = [componentStyle, style]\n\n  private inputRef = createRef<HTMLInputElement>()\n  private listRef = createRef<HTMLElement>()\n  private previousFocus?: HTMLElement\n\n  private localize = new LocalizeController<\"nord-command-menu\">(this)\n  private dismissController = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.close(),\n  })\n\n  private keyboardController = new KeyboardController(this, {\n    trigger: () => this.select(),\n    goBack: () => this.goBack(),\n    end: () => this.end(),\n    start: () => this.start(),\n    next: () => this.next(),\n    previous: () => this.previous(),\n    toggleOpen: () => this.toggleOpen(),\n  })\n\n  /**\n   * Show or hide the command menu.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * Use external filtering mode. When set to true, the component will not perform\n   * internal text-based filtering and expects external filtering logic to be implemented.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"external-filtering\" }) externalFiltering = false\n\n  /**\n   * When enabled, typing in the search input will automatically exit nested views\n   * to allow global search across all commands.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"exit-nested-on-search\" }) exitNestedOnSearch = false\n\n  /**\n   * Array of commands to be included in the menu.\n   * Please see “Commands data” section for more documentation.\n   */\n  @property({ type: Array, attribute: false }) commands: Array<ICommandMenuAction> = []\n\n  /**\n   * Current search query in the command menu input.\n   */\n  @property({ type: String, attribute: false }) searchQuery: string = \"\"\n\n  @state() private parent: ICommandMenuAction[\"parent\"]\n  @state() private bump = true\n  @state() private selectedIndex = 0\n  @state() private filteredCommands: Array<ICommandMenuAction> = []\n\n  private get selected(): ICommandMenuAction {\n    return this.filteredCommands[this.selectedIndex]\n  }\n\n  /**\n   * Show the command menu programmatically.\n   * @param options allows you to open the menu filtered to a specific parent command.\n   */\n  show(options: { parent?: string } = {}) {\n    const notCancelled = this.dispatchEvent(new NordEvent(\"open\", { cancelable: true }))\n\n    if (notCancelled) {\n      this.open = true\n      this.setParent(options.parent)\n    }\n  }\n\n  /**\n   * Close the command menu programmatically.\n   */\n  close() {\n    this.open = false\n    this.previousFocus?.focus()\n    this.previousFocus = undefined\n\n    this.dispatchEvent(new NordEvent(\"close\"))\n  }\n\n  /**\n   * Toggle the open state programmatically.\n   */\n  toggleOpen() {\n    if (this.open) {\n      this.close()\n    } else {\n      this.show()\n    }\n  }\n\n  /**\n   * Focus the command menu's input.\n   */\n  focus() {\n    this.inputRef.value?.focus()\n  }\n\n  override render() {\n    const sections = groupBy(this.filteredCommands, \"section\")\n    const activeDescendant = this.filteredCommands.length === 0 ? \"no-results\" : this.selected?.id\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-visible\": this.open,\n          \"n-modal\": true,\n        })}\n      >\n        <div\n          @animationend=${this.handleAnimationEnd}\n          class=${classMap({\n            \"n-bump\": this.bump,\n            \"n-modal-content\": true,\n          })}\n        >\n          <div class=\"n-search-wrapper\">\n            <nord-visually-hidden id=\"instructions\">${this.localize.term(\"instructions\")}</nord-visually-hidden>\n            <input\n              type=\"text\"\n              id=\"search\"\n              @input=${this.handleInput}\n              @blur=${this.handleBlur}\n              ${ref(this.inputRef)}\n              placeholder=${this.localize.term(\"placeholder\")}\n              .value=${this.searchQuery}\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\" aria-label=${this.localize.term(\"inputLabel\")}>\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.searchQuery)}</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    event.stopPropagation()\n\n    const input = event.target as HTMLInputElement\n    this.setSearch(input.value)\n\n    // When exitNestedOnSearch is enabled, clear the parent to exit nested view and allow global search\n    if (this.exitNestedOnSearch && input.value && this.parent) {\n      this.parent = undefined\n    }\n\n    /**\n     * Fired as the user types into the search input.\n     */\n    this.dispatchEvent(new NordEvent(\"input\"))\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.searchQuery) {\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.searchQuery = str\n    this.selectedIndex = 0\n  }\n\n  @observe(\"searchQuery\")\n  @observe(\"parent\")\n  @observe(\"commands\")\n  @observe(\"externalFiltering\")\n  private filterCommands() {\n    // sort commands in the same way as they are visually displayed\n    // this is a quick fix for cases where the visual order of commands is different from order in the commands array\n    // without ordering, the up/down arrow keys can end up navigating out of visual order.\n    // but it feels wasteful to groupBy here, then discard the result, only to re-calculate in render.\n    // TODO: is there a way to do this without grouping twice?\n    const groupedBySection = groupBy(this.commands, \"section\")\n    const ordered = [...groupedBySection.values()].flat()\n\n    if (this.externalFiltering) {\n      // When external filtering is enabled, still filter by parent but skip search-based filtering\n      this.filteredCommands = ordered.filter(\n        ({ parent }) =>\n          // use looser equality check so that it handles `null` as command's `parent` value\n          // eslint-disable-next-line eqeqeq\n          parent == this.parent\n      )\n      return\n    }\n\n    const searchTerms = this.searchQuery.toLocaleLowerCase().split(/\\s+/)\n\n    this.filteredCommands = ordered.filter(({ title, keywords = \"\", parent }) => {\n      const searchSpace = `${title} ${keywords}`.toLocaleLowerCase()\n      const matcher = searchTerms.every(term => searchSpace.includes(term))\n\n      if (!this.parent && this.searchQuery) {\n        // global search for items on root only (exclude nested items)\n        return matcher && !parent\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","externalFiltering","exitNestedOnSearch","commands","searchQuery","bump","selectedIndex","filteredCommands","selected","show","options","dispatchEvent","NordEvent","cancelable","setParent","parent","previousFocus","focus","value","render","sections","groupBy","activeDescendant","length","id","html","classMap","handleAnimationEnd","term","handleInput","handleBlur","ref","ifDefined","renderNoResults","Array","from","section","renderSection","navigateIcon.title","enterIcon.title","backspaceIcon.title","sectionId","cond","nothing","repeat","command","_b","handleCommandsChange","registerCommandShortcuts","handleBump","focusOnOpen","document","scrollTop","event","stopPropagation","input","target","setSearch","some","item","handler","call","SelectEvent","wrap","parentCommand","find","str","filterCommands","ordered","values","flat","filter","searchTerms","toLocaleLowerCase","split","keywords","searchSpace","matcher","every","includes","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","attribute","String","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-backspace.js","../../icons/lib/assets/keyboard-return.js","../src/common/focus.ts","../src/command-menu/CommandMenu.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m8.29008 12.3413 1.41 1.42-3.96 3.95c-.2.19-.45.29-.71.29s-.51-.1-.71-.29l-3.990002-4 1.410002-1.42 2.26 2.25v-12.54002h2v12.63002zm11.38002-6.05002-4.01-4c-.39-.39-1.02-.39-1.41 0l-3.96 3.95 1.41 1.42 2.29-2.29v12.63002h2v-12.54002l2.26 2.25 1.41-1.42z\" fill=\"currentColor\"/></svg>';\nexport const title = \"keyboard-arrow-up-down\";\nexport const tags = \"nordicon keyboard keys arrow up down shortcut\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18 2h-10.54c-.58 0-1.14.25-1.52.7l-5.14 6c-.65.75-.65 1.85 0 2.6l5.14 6c.38.44.93.7 1.52.7h10.54c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm0 14h-10.54l-5.14-6 5.14-6h10.54zm-9.54-3.88 2.12-2.12-2.12-2.12 1.41-1.41 2.12 2.12 2.12-2.12 1.41 1.41-2.12 2.12 2.12 2.12-1.41 1.41-2.12-2.12-2.12 2.12z\" fill=\"currentColor\"/></svg>';\nexport const title = \"keyboard-backspace\";\nexport const tags = \"nordicon keyboard backspace back delete key shortcut\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18.0025 4v8c0 1.1-.9 2-2 2h-12.59l3 3-1.41 1.41-4.71-4.7c-.39-.39-.39-1.02 0-1.41l4.71-4.71 1.41 1.41-3 3h12.59v-8h-4v-2h4c1.1 0 2 .9 2 2z\" fill=\"currentColor\"/></svg>';\nexport const title = \"keyboard-return\";\nexport const tags = \"nordicon keyboard return key shortcut\";\n","/**\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 type { ICommandMenuAction } from './ICommandMenuAction.js'\nimport * as navigateIcon from '@nordhealth/icons/lib/assets/keyboard-arrow-up-down.js'\nimport * as backspaceIcon from '@nordhealth/icons/lib/assets/keyboard-backspace.js'\nimport * as enterIcon from '@nordhealth/icons/lib/assets/keyboard-return.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\n\nimport { repeat } from 'lit/directives/repeat.js'\nimport { groupBy } from '../common/collection.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\n\nimport { getFocusedElement } from '../common/focus.js'\nimport { wrap } from '../common/number.js'\nimport componentStyle from '../common/styles/Component.css'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './CommandMenu.css'\nimport { KeyboardController } from './KeyboardController.js'\nimport { SelectEvent } from './SelectEvent.js'\nimport '../visually-hidden/VisuallyHidden.js'\nimport './CommandMenuAction.js'\n\nIcon.registerIcon(navigateIcon)\nIcon.registerIcon(enterIcon)\nIcon.registerIcon(backspaceIcon)\n\n/**\n * Command Menu allows users to navigate and use an app without\n * touching the mouse and helps them transform into “power users”\n * who can harness more advanced features far faster.\n *\n * @status ready\n * @category action\n * @slot footer - Used to replace the default footer contents.\n * @fires open - The command menu was opened.\n * @fires close - The command menu was closed.\n * @fires {SelectEvent} nord-select - User selected a command from the menu.\n *\n * @cssprop [--n-command-menu-inline-size=640px] - Controls the max inline size, or width, of the command menu.\n * @cssprop [--n-command-menu-block-size=290px] - Controls the max block size, or height, of the command menu.\n * @cssprop [--n-command-menu-block-start=16%] - Controls the command menu offset from the block start, or top, of the screen.\n *\n * @localization instructions - Instructions that offer guidance on how to use the command menu.\n * @localization inputLabel - Accessible label given to the command menu's input.\n * @localization footerArrowKeys - Describes what the arrow keys do.\n * @localization footerEnterKey - Describes what the enter key does.\n * @localization footerEscapeKey - Describes what the escape key does.\n * @localization footerBackspaceKey - Describes what the backspace key does.\n * @localization noResults - A message shown when there are no matching results.\n * @localization tip - A hint tip that describes some approaches to find a command when there are no matching results.\n * @localization placeholder - Hint text to display in the Command Menu search field.\n */\n@customElement('nord-command-menu')\nexport default class CommandMenu extends LitElement {\n  static styles = [componentStyle, style]\n\n  private inputRef = createRef<HTMLInputElement>()\n  private listRef = createRef<HTMLElement>()\n  private previousFocus?: HTMLElement\n\n  private localize = new LocalizeController<'nord-command-menu'>(this)\n  private dismissController = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.close(),\n  })\n\n  private keyboardController = new KeyboardController(this, {\n    trigger: () => this.select(),\n    goBack: () => this.goBack(),\n    end: () => this.end(),\n    start: () => this.start(),\n    next: () => this.next(),\n    previous: () => this.previous(),\n    toggleOpen: () => this.toggleOpen(),\n  })\n\n  /**\n   * Show or hide the command menu.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * Use external filtering mode. When set to true, the component will not perform\n   * internal text-based filtering and expects external filtering logic to be implemented.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'external-filtering' }) externalFiltering = false\n\n  /**\n   * When enabled, typing in the search input will automatically exit nested views\n   * to allow global search across all commands.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'exit-nested-on-search' }) exitNestedOnSearch = false\n\n  /**\n   * Array of commands to be included in the menu.\n   * Please see “Commands data” section for more documentation.\n   */\n  @property({ type: Array, attribute: false }) commands: Array<ICommandMenuAction> = []\n\n  /**\n   * Current search query in the command menu input.\n   */\n  @property({ type: String, attribute: false }) searchQuery: string = ''\n\n  @state() private parent: ICommandMenuAction['parent']\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 - Options for showing the menu.\n   * @param options.parent - Opens 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    }\n    else {\n      this.show()\n    }\n  }\n\n  /**\n   * Focus the command menu's input.\n   */\n  focus() {\n    this.inputRef.value?.focus()\n  }\n\n  override render() {\n    const sections = groupBy(this.filteredCommands, 'section')\n    const activeDescendant = this.filteredCommands.length === 0 ? 'no-results' : this.selected?.id\n\n    return html`\n      <div\n        class=${classMap({\n          'n-visible': this.open,\n          'n-modal': true,\n        })}\n      >\n        <div\n          @animationend=${this.handleAnimationEnd}\n          class=${classMap({\n            'n-bump': this.bump,\n            'n-modal-content': true,\n          })}\n        >\n          <div class=\"n-search-wrapper\">\n            <nord-visually-hidden id=\"instructions\">${this.localize.term('instructions')}</nord-visually-hidden>\n            <input\n              type=\"text\"\n              id=\"search\"\n              @input=${this.handleInput}\n              @blur=${this.handleBlur}\n              ${ref(this.inputRef)}\n              placeholder=${this.localize.term('placeholder')}\n              .value=${this.searchQuery}\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\" aria-label=${this.localize.term('inputLabel')}>\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.searchQuery)}</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    event.stopPropagation()\n\n    const input = event.target as HTMLInputElement\n    this.setSearch(input.value)\n\n    // When exitNestedOnSearch is enabled, clear the parent to exit nested view and allow global search\n    if (this.exitNestedOnSearch && input.value && this.parent) {\n      this.parent = undefined\n    }\n\n    /**\n     * Fired as the user types into the search input.\n     */\n    this.dispatchEvent(new NordEvent('input'))\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    }\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.searchQuery) {\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.searchQuery = str\n    this.selectedIndex = 0\n  }\n\n  @observe('searchQuery')\n  @observe('parent')\n  @observe('commands')\n  @observe('externalFiltering')\n  private filterCommands() {\n    // sort commands in the same way as they are visually displayed\n    // this is a quick fix for cases where the visual order of commands is different from order in the commands array\n    // without ordering, the up/down arrow keys can end up navigating out of visual order.\n    // but it feels wasteful to groupBy here, then discard the result, only to re-calculate in render.\n    // TODO: is there a way to do this without grouping twice?\n    const groupedBySection = groupBy(this.commands, 'section')\n    const ordered = [...groupedBySection.values()].flat()\n\n    if (this.externalFiltering) {\n      // When external filtering is enabled, still filter by parent but skip search-based filtering\n      this.filteredCommands = ordered.filter(\n        ({ parent }) =>\n          // use looser equality check so that it handles `null` as command's `parent` value\n          // eslint-disable-next-line eqeqeq\n          parent == this.parent,\n      )\n      return\n    }\n\n    const searchTerms = this.searchQuery.toLocaleLowerCase().split(/\\s+/)\n\n    this.filteredCommands = ordered.filter(({ title, keywords = '', parent }) => {\n      const searchSpace = `${title} ${keywords}`.toLocaleLowerCase()\n      const matcher = searchTerms.every(term => searchSpace.includes(term))\n\n      if (!this.parent && this.searchQuery) {\n        // global search for items on root only (exclude nested items)\n        return matcher && !parent\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","externalFiltering","exitNestedOnSearch","commands","searchQuery","bump","selectedIndex","filteredCommands","selected","show","options","dispatchEvent","NordEvent","cancelable","setParent","parent","previousFocus","focus","value","render","sections","groupBy","activeDescendant","length","id","html","classMap","handleAnimationEnd","term","handleInput","handleBlur","ref","ifDefined","renderNoResults","Array","from","section","renderSection","navigateIcon.title","enterIcon.title","backspaceIcon.title","sectionId","cond","nothing","repeat","command","_b","handleCommandsChange","registerCommandShortcuts","handleBump","focusOnOpen","document","scrollTop","event","stopPropagation","input","target","setSearch","some","item","handler","call","SelectEvent","wrap","parentCommand","find","str","filterCommands","ordered","values","flat","filter","searchTerms","toLocaleLowerCase","split","keywords","searchSpace","matcher","every","includes","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","attribute","String","state","observe","customElement"],"mappings":"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"}

package/lib/CommandMenuAction.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as r,html as t,nothing as n}from"lit";import{property as i,customElement as s}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{D as c}from"./DirectionController-ChvNGESZ.js";import{o as l}from"./observe-D0n0zOfU.js";import d from"./Icon.js";import"./VisuallyHidden.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./Component-DSU3Qp0O.js";const m="arrow-right";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.7098 10.7401-8.63996 8.67-1.42-1.41 7.93996-7.97-7.99996-8.03001 1.42-1.410002 8.69996 8.740002c.39.39.39 1.02001 0 1.41001z" fill="currentColor"/></svg>',tags:"nordicon arrow right caret pointing triangle chevron",title:m});const p="arrow-left";var h=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z"/><path d="m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z"/></g></svg>',tags:"nordicon arrow left caret pointing triangle chevron",title:p});const g="keyboard-option";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.5 14h6.5v2h-6.5c-.63 0-1.22-.3-1.6-.8l-5.4-7.2h-6.5v-2h6.5c.63 0 1.22.3 1.6.8zm-1.5-8v2h8v-2z" fill="currentColor"/></svg>',tags:"nordicon keyboard option key shortcut",title:g});const f=o`: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:var(--n-space-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-shortcuts{display:flex;gap:var(--n-space-xs)}.n-shortcut{padding:calc(var(--n-space-xs)/ 2) 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}`,w=/(?:Key|Digit)([A-Z0-9])/g;d.registerIcon(h),d.registerIcon(v),d.registerIcon(u);let x=class extends r{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?m:p}renderShortcut(){if(!this.command.shortcut)return n;const e=this.command.shortcut.replace(w,"$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="${g}" size="s"></nord-icon>`:e}</div>`))}</div>`}};x.styles=f,e([i({type:Object})],x.prototype,"command",void 0),e([i({type:Boolean})],x.prototype,"selected",void 0),e([l("selected")],x.prototype,"ensureInView",null),x=e([s("nord-command-menu-action")],x);var b=x;export{b as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as r,html as t,nothing as n}from"lit";import{property as i,customElement as s}from"lit/decorators.js";import{classMap as c}from"lit/directives/class-map.js";import{D as a}from"./DirectionController-ChvNGESZ.js";import{o as l}from"./observe-D0n0zOfU.js";import d from"./Icon.js";import"./VisuallyHidden.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./Component-DSU3Qp0O.js";import"./IconManager.js";const m="arrow-left";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z"/><path d="m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z"/></g></svg>',tags:"nordicon arrow left caret pointing triangle chevron",title:m});const p="arrow-right";var h=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.7098 10.7401-8.63996 8.67-1.42-1.41 7.93996-7.97-7.99996-8.03001 1.42-1.410002 8.69996 8.740002c.39.39.39 1.02001 0 1.41001z" fill="currentColor"/></svg>',tags:"nordicon arrow right caret pointing triangle chevron",title:p});const g="keyboard-option";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.5 14h6.5v2h-6.5c-.63 0-1.22-.3-1.6-.8l-5.4-7.2h-6.5v-2h6.5c.63 0 1.22.3 1.6.8zm-1.5-8v2h8v-2z" fill="currentColor"/></svg>',tags:"nordicon keyboard option key shortcut",title:g});const f=o`: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:var(--n-space-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-shortcuts{display:flex;gap:var(--n-space-xs)}.n-shortcut{padding:calc(var(--n-space-xs)/ 2) 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}`,w=/(?:Key|Digit)([A-Z0-9])/g;d.registerIcon(v),d.registerIcon(h),d.registerIcon(u);let x=class extends r{constructor(){super(...arguments),this.direction=new a(this),this.selected=!1}render(){return t`<div class="${c({"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?p:m}renderShortcut(){if(!this.command.shortcut)return n;const e=this.command.shortcut.replace(w,"$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.includes("Mac")?t`<nord-icon name="${g}" size="s"></nord-icon>`:e}</div>`))}</div>`}};x.styles=f,e([i({type:Object})],x.prototype,"command",void 0),e([i({type:Boolean})],x.prototype,"selected",void 0),e([l("selected")],x.prototype,"ensureInView",null),x=e([s("nord-command-menu-action")],x);var b=x;export{b 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 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m14.7098 10.7401-8.63996 8.67-1.42-1.41 7.93996-7.97-7.99996-8.03001 1.42-1.410002 8.69996 8.740002c.39.39.39 1.02001 0 1.41001z\" fill=\"currentColor\"/></svg>'\nexport const title = \"arrow-right\"\nexport const tags = \"nordicon arrow right caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"currentColor\"><path d=\"m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z\"/><path d=\"m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z\"/></g></svg>'\nexport const title = \"arrow-left\"\nexport const tags = \"nordicon arrow left caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.5 14h6.5v2h-6.5c-.63 0-1.22-.3-1.6-.8l-5.4-7.2h-6.5v-2h6.5c.63 0 1.22.3 1.6.8zm-1.5-8v2h8v-2z\" fill=\"currentColor\"/></svg>'\nexport const title = \"keyboard-option\"\nexport const tags = \"nordicon keyboard option key shortcut\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as chevronIconRight from \"@nordhealth/icons/lib/assets/arrow-right.js\"\nimport * as chevronIconLeft from \"@nordhealth/icons/lib/assets/arrow-left.js\"\nimport * as altKeyIcon from \"@nordhealth/icons/lib/assets/keyboard-option.js\"\n\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport style from \"./CommandMenuAction.css\"\n\nconst KEY_REGEX = /(?:Key|Digit)([A-Z0-9])/g\nconst isMacintosh = () => navigator.platform.indexOf(\"Mac\") > -1\n\nIcon.registerIcon(chevronIconLeft)\nIcon.registerIcon(chevronIconRight)\nIcon.registerIcon(altKeyIcon)\n\n/**\n * Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.\n *\n * @status internal\n */\n@customElement(\"nord-command-menu-action\")\nexport default class CommandMenuAction extends LitElement {\n  static styles = style\n\n  private direction = new DirectionController(this)\n\n  @property({ type: Object }) command!: ICommandMenuAction\n\n  @property({ type: Boolean }) selected = false\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          \"n-selected\": this.selected,\n          \"n-command\": true,\n        })}\n      >\n        <div aria-hidden=\"true\" class=\"n-command-icon\">\n          <nord-icon size=\"s\" name=${this.getIconName()}></nord-icon>\n        </div>\n        <div class=\"n-title\">${this.command.title}</div>\n        ${this.renderShortcut()}\n      </div>\n    `\n  }\n\n  /**\n   * Scroll to show element\n   */\n  @observe(\"selected\")\n  protected ensureInView() {\n    if (this.selected) {\n      requestAnimationFrame(() => this.scrollIntoView({ block: \"nearest\" }))\n    }\n  }\n\n  private getIconName() {\n    if (this.command.icon) {\n      return this.command.icon\n    }\n\n    return this.direction.isLTR ? chevronIconRight.title : chevronIconLeft.title\n  }\n\n  private renderShortcut() {\n    if (!this.command.shortcut) {\n      return nothing\n    }\n\n    const keys = this.command.shortcut.replace(KEY_REGEX, \"$1\")\n\n    return html`\n      <nord-visually-hidden>, ${keys}</nord-visually-hidden>\n\n      <div aria-hidden=\"true\" class=\"n-shortcuts\">\n        ${keys\n          .split(\"+\")\n          .map(\n            key =>\n              html`<div class=\"n-shortcut\">\n                ${key.toLowerCase() === \"alt\" && isMacintosh()\n                  ? html`<nord-icon name=${altKeyIcon.title} size=\"s\"></nord-icon>`\n                  : key}\n              </div>`\n          )}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-command-menu-action\": CommandMenuAction\n  }\n}\n"],"names":["title","KEY_REGEX","Icon","registerIcon","chevronIconLeft","chevronIconRight","altKeyIcon","CommandMenuAction","LitElement","constructor","this","direction","DirectionController","selected","render","html","classMap","getIconName","command","renderShortcut","ensureInView","requestAnimationFrame","scrollIntoView","block","icon","isLTR","chevronIconRight.title","chevronIconLeft.title","shortcut","nothing","keys","replace","split","map","key","toLowerCase","navigator","platform","indexOf","altKeyIcon.title","styles","style","__decorate","property","type","Object","prototype","Boolean","observe","customElement"],"mappings":"whBACO,MAAMA,EAAQ,0DADN,0OAEK,iECDb,MAAMA,EAAQ,yDADN,mYAEK,gECDb,MAAMA,EAAQ,8DADN,2MAEK,g0CCadC,EAAY,2BAGlBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAQH,IAAMC,EAAN,cAAgCC,EAAhC,WAAAC,uBAGLC,KAAAC,UAAY,IAAIC,EAAoBF,MAIfA,KAAQG,UAAG,CA6DzC,CA3DU,MAAAC,GACP,OAAOC,CAAI,eAECC,EAAS,CACf,aAAcN,KAAKG,SACnB,aAAa,iFAIcH,KAAKO,yDAEXP,KAAKQ,QAAQlB,cAClCU,KAAKS,wBAGZ,CAMS,YAAAC,GACJV,KAAKG,UACPQ,uBAAsB,IAAMX,KAAKY,eAAe,CAAEC,MAAO,aAE5D,CAEO,WAAAN,GACN,OAAIP,KAAKQ,QAAQM,KACRd,KAAKQ,QAAQM,KAGfd,KAAKC,UAAUc,MAAQC,EAAyBC,CACxD,CAEO,cAAAR,GACN,IAAKT,KAAKQ,QAAQU,SAChB,OAAOC,EAGT,MAAMC,EAAOpB,KAAKQ,QAAQU,SAASG,QAAQ9B,EAAW,MAEtD,OAAOc,CAAI,2BACiBe,uEAGtBA,EACCE,MAAM,KACNC,KACCC,GACEnB,CAAI,2BACsB,QAAtBmB,EAAIC,eAxEIC,UAAUC,SAASC,QAAQ,QAAU,EAyE3CvB,CAAI,oBAAmBwB,2BACvBL,mBAKjB,GAlEM3B,EAAMiC,OAAGC,EAIYC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAAsCtC,EAAAuC,UAAA,eAAA,GAE3BJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,WAA2BxC,EAAAuC,UAAA,gBAAA,GAuBnCJ,EAAA,CADTM,EAAQ,aAKRzC,EAAAuC,UAAA,eAAA,MAlCkBvC,EAAiBmC,EAAA,CADrCO,EAAc,6BACM1C,SAAAA"}
+{"version":3,"file":"CommandMenuAction.js","sources":["../../icons/lib/assets/arrow-left.js","../../icons/lib/assets/arrow-right.js","../../icons/lib/assets/keyboard-option.js","../src/command-menu/CommandMenuAction.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"currentColor\"><path d=\"m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z\"/><path d=\"m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z\"/></g></svg>';\nexport const title = \"arrow-left\";\nexport const tags = \"nordicon arrow left caret pointing triangle chevron\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m14.7098 10.7401-8.63996 8.67-1.42-1.41 7.93996-7.97-7.99996-8.03001 1.42-1.410002 8.69996 8.740002c.39.39.39 1.02001 0 1.41001z\" fill=\"currentColor\"/></svg>';\nexport const title = \"arrow-right\";\nexport const tags = \"nordicon arrow right caret pointing triangle chevron\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.5 14h6.5v2h-6.5c-.63 0-1.22-.3-1.6-.8l-5.4-7.2h-6.5v-2h6.5c.63 0 1.22.3 1.6.8zm-1.5-8v2h8v-2z\" fill=\"currentColor\"/></svg>';\nexport const title = \"keyboard-option\";\nexport const tags = \"nordicon keyboard option key shortcut\";\n","import type { ICommandMenuAction } from './ICommandMenuAction.js'\nimport * as chevronIconLeft from '@nordhealth/icons/lib/assets/arrow-left.js'\nimport * as chevronIconRight from '@nordhealth/icons/lib/assets/arrow-right.js'\nimport * as altKeyIcon from '@nordhealth/icons/lib/assets/keyboard-option.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { classMap } from 'lit/directives/class-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport Icon from '../icon/Icon.js'\nimport style from './CommandMenuAction.css'\n\nimport '../visually-hidden/VisuallyHidden.js'\n\nconst KEY_REGEX = /(?:Key|Digit)([A-Z0-9])/g\nconst isMacintosh = () => navigator.platform.includes('Mac')\n\nIcon.registerIcon(chevronIconLeft)\nIcon.registerIcon(chevronIconRight)\nIcon.registerIcon(altKeyIcon)\n\n/**\n * Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.\n *\n * @status internal\n */\n@customElement('nord-command-menu-action')\nexport default class CommandMenuAction extends LitElement {\n  static styles = style\n\n  private direction = new DirectionController(this)\n\n  @property({ type: Object }) command!: ICommandMenuAction\n\n  @property({ type: Boolean }) selected = false\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          'n-selected': this.selected,\n          'n-command': true,\n        })}\n      >\n        <div aria-hidden=\"true\" class=\"n-command-icon\">\n          <nord-icon size=\"s\" name=${this.getIconName()}></nord-icon>\n        </div>\n        <div class=\"n-title\">${this.command.title}</div>\n        ${this.renderShortcut()}\n      </div>\n    `\n  }\n\n  /**\n   * Scroll to show element\n   */\n  @observe('selected')\n  protected ensureInView() {\n    if (this.selected) {\n      requestAnimationFrame(() => this.scrollIntoView({ block: 'nearest' }))\n    }\n  }\n\n  private getIconName() {\n    if (this.command.icon) {\n      return this.command.icon\n    }\n\n    return this.direction.isLTR ? chevronIconRight.title : chevronIconLeft.title\n  }\n\n  private renderShortcut() {\n    if (!this.command.shortcut) {\n      return nothing\n    }\n\n    const keys = this.command.shortcut.replace(KEY_REGEX, '$1')\n\n    return html`\n      <nord-visually-hidden>, ${keys}</nord-visually-hidden>\n\n      <div aria-hidden=\"true\" class=\"n-shortcuts\">\n        ${keys\n          .split('+')\n          .map(\n            key =>\n              html`<div class=\"n-shortcut\">\n                ${key.toLowerCase() === 'alt' && isMacintosh()\n                  ? html`<nord-icon name=${altKeyIcon.title} size=\"s\"></nord-icon>`\n                  : key}\n              </div>`,\n          )}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-command-menu-action': CommandMenuAction\n  }\n}\n"],"names":["title","KEY_REGEX","Icon","registerIcon","chevronIconLeft","chevronIconRight","altKeyIcon","CommandMenuAction","LitElement","constructor","this","direction","DirectionController","selected","render","html","classMap","getIconName","command","renderShortcut","ensureInView","requestAnimationFrame","scrollIntoView","block","icon","isLTR","chevronIconRight.title","chevronIconLeft.title","shortcut","nothing","keys","replace","split","map","key","toLowerCase","navigator","platform","includes","altKeyIcon.title","styles","style","__decorate","property","type","Object","prototype","Boolean","observe","customElement"],"mappings":"whBACO,MAAMA,EAAQ,yDADN,mYAEK,gECDb,MAAMA,EAAQ,0DADN,0OAEK,iECDb,MAAMA,EAAQ,8DADN,2MAEK,g0CCadC,EAAY,2BAGlBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAQH,IAAMC,EAAN,cAAgCC,EAAhC,WAAAC,uBAGLC,KAAAC,UAAY,IAAIC,EAAoBF,MAIfA,KAAQG,UAAG,CA6DzC,CA3DU,MAAAC,GACP,OAAOC,CAAI,eAECC,EAAS,CACf,aAAcN,KAAKG,SACnB,aAAa,iFAIcH,KAAKO,yDAEXP,KAAKQ,QAAQlB,cAClCU,KAAKS,wBAGZ,CAMS,YAAAC,GACJV,KAAKG,UACPQ,uBAAsB,IAAMX,KAAKY,eAAe,CAAEC,MAAO,aAE5D,CAEO,WAAAN,GACN,OAAIP,KAAKQ,QAAQM,KACRd,KAAKQ,QAAQM,KAGfd,KAAKC,UAAUc,MAAQC,EAAyBC,CACxD,CAEO,cAAAR,GACN,IAAKT,KAAKQ,QAAQU,SAChB,OAAOC,EAGT,MAAMC,EAAOpB,KAAKQ,QAAQU,SAASG,QAAQ9B,EAAW,MAEtD,OAAOc,CAAI,2BACiBe,uEAGtBA,EACCE,MAAM,KACNC,KACCC,GACEnB,CAAI,2BACsB,QAAtBmB,EAAIC,eAxEIC,UAAUC,SAASC,SAAS,OAyElCvB,CAAI,oBAAmBwB,2BACvBL,mBAKjB,GAlEM3B,EAAMiC,OAAGC,EAIYC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAAsCtC,EAAAuC,UAAA,eAAA,GAE3BJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,WAA2BxC,EAAAuC,UAAA,gBAAA,GAuBnCJ,EAAA,CADTM,EAAQ,aAKRzC,EAAAuC,UAAA,eAAA,MAlCkBvC,EAAiBmC,EAAA,CADrCO,EAAc,6BACM1C,SAAAA"}

package/lib/DatePicker.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as i,nothing as o,LitElement as a}from"lit";import{query as s,property as r,customElement as n}from"lit/decorators.js";import{ref as l}from"lit/directives/ref.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{c as p}from"./interface-close-small-CnpAFMO3.js";import{F as c}from"./FocusableMixin-BlQLNPdJ.js";import{F as h}from"./FormAssociatedMixin-DFL7yabe.js";import{I as m}from"./InputMixin-LetXsCyv.js";import{c as u,p as v,a as f}from"./dates-lbaNvUdr.js";import{N as b}from"./events-Bv6wNHwJ.js";import{S as g,i as j}from"./Calendar-CYcI340m.js";import{LocalizeController as y}from"./LocalizeController.js";import $ from"./Icon.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-DBLHeeXk.js";import"./Stack.js";import{s as k}from"./Component-DSU3Qp0O.js";import{s as D}from"./FormField-CUC_H-0e.js";import{R as x,s as w}from"./TextField-C5gYzfOp.js";import{isoAdapter as z}from"./date-adapter.js";import{c as C}from"./cond-CI1KbneT.js";import{S as F}from"./SizeMixin-CU9cLbLC.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./DirectionController-ChvNGESZ.js";import"./collection-Dvg2XbxV.js";import"./number-Dg2vCfGd.js";import"./observe-D0n0zOfU.js";import"./DateSelectEvent.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"lit/directives/style-map.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./positioning-CsfLhMSW.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./ScrollbarController-C5CMxfb3.js";var S=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',tags:"nordicon interface calendar date time day week month year",title:"interface-calendar"});const A=e`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;$.registerIcon(S),$.registerIcon(p);const I=()=>!1,L=()=>!1;let B=class extends(F(h(x(m(c(a)))))){constructor(){super(...arguments),this.swipe=new g(this,{target:()=>this.popout,matchesGesture:j,onSwipeEnd:()=>this.hide()}),this.localize=new y(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=1,this.dateAdapter=z,this.isDateDisabled=I,this.isDateHighlighted=L,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.dispatchEvent(new b("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new b("focus"))},this.handleInputChange=t=>{var e;const i=t.target,o=this.dateAdapter.parse(i.value,u);this.rawValue=null===(e=this.focusableRef.value)||void 0===e?void 0:e.value,(o||""===i.value)&&this.setValue(o)}}get valueAsDate(){return v(this.value)}set valueAsDate(t){this.value=t?f(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:NaN}set valueAsNumber(t){this.value=t?f(new Date(t)):""}firstUpdated(){var t;this.rawValue=null===(t=this.focusableRef.value)||void 0===t?void 0:t.value}render(){const{valueAsDate:t}=this,e=t?this.dateAdapter.format(t):"";return i`<nord-input class="n-date-picker-input" value="${e}" label="${d(this.label)}" hint="${d(this.hint)}" error="${C(this.error,this.error)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hide-label="${this.hideLabel}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${l(this.focusableRef)} aria-invalid="${C(this.error,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?o:i`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?o:i`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?i`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:o}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${d(this.min)}" max="${d(this.max)}" today="${d(this.today)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{timeZone:"UTC",day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?f(t):"";const{valueAsDate:e}=this,i=e?this.dateAdapter.format(e):"";this.rawValue=i,this.dispatchEvent(new b("change"))}hide(t){this.popout.hide(t)}show(){this.popout.show()}};B.styles=[k,D,w,A],t([s(".n-date-picker-toggle",!0)],B.prototype,"toggleButton",void 0),t([s(".n-date-picker-close-button",!0)],B.prototype,"closeButton",void 0),t([s("nord-calendar",!0)],B.prototype,"calendar",void 0),t([s('[role="dialog"]',!0)],B.prototype,"popout",void 0),t([r()],B.prototype,"value",void 0),t([r({attribute:!1})],B.prototype,"rawValue",void 0),t([r({type:Boolean,reflect:!0})],B.prototype,"open",void 0),t([r({reflect:!0})],B.prototype,"min",void 0),t([r({reflect:!0})],B.prototype,"max",void 0),t([r({reflect:!0})],B.prototype,"today",void 0),t([r({reflect:!0,attribute:"first-day-of-week",type:Number})],B.prototype,"firstDayOfWeek",void 0),t([r({attribute:!1})],B.prototype,"dateAdapter",void 0),t([r({attribute:!1})],B.prototype,"isDateDisabled",void 0),t([r({attribute:!1})],B.prototype,"isDateHighlighted",void 0),t([r({reflect:!0,type:Boolean})],B.prototype,"expand",void 0),B=t([n("nord-date-picker")],B);var E=B;export{E as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-close-small-CnpAFMO3.js";import{css as i,html as o,nothing as a,LitElement as s}from"lit";import{query as r,property as n,customElement as l}from"lit/decorators.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{ref as p}from"lit/directives/ref.js";import{S as c,i as h}from"./Calendar-CL_eqbiT.js";import{D as m,c as u,p as v,a as f}from"./dates-CAAlPKZi.js";import{c as b}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as j}from"./FocusableMixin-BlQLNPdJ.js";import{F as y}from"./FormAssociatedMixin-DFL7yabe.js";import{I as $}from"./InputMixin-LetXsCyv.js";import{R as D,s as k}from"./TextField-BdEdZ0_b.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{s as w}from"./Component-DSU3Qp0O.js";import{s as z}from"./FormField--eLuhPue.js";import C from"./Icon.js";import{LocalizeController as F}from"./LocalizeController.js";import{isoAdapter as S}from"./date-adapter.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-k_ddK22Q.js";import"./Stack.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./collection-Dvg2XbxV.js";import"./DirectionController-ChvNGESZ.js";import"./EventController-BBOmvfLa.js";import"./observe-D0n0zOfU.js";import"./number-Dg2vCfGd.js";import"./DateSelectEvent.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"lit/directives/style-map.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./positioning-DDh0UNgJ.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./ScrollbarController-BFC67Y2x.js";var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',tags:"nordicon interface calendar date time day week month year",title:"interface-calendar"});const I=i`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;C.registerIcon(A),C.registerIcon(e);const L=()=>!1,B=()=>!1;let M=class extends(x(y(D($(j(s)))))){constructor(){super(...arguments),this.swipe=new c(this,{target:()=>this.popout,matchesGesture:h,onSwipeEnd:()=>this.hide()}),this.localize=new F(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=m.Monday,this.dateAdapter=S,this.isDateDisabled=L,this.isDateHighlighted=B,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.dispatchEvent(new g("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new g("focus"))},this.handleInputChange=t=>{var e;const i=t.target,o=this.dateAdapter.parse(i.value,u);this.rawValue=null===(e=this.focusableRef.value)||void 0===e?void 0:e.value,(o||""===i.value)&&this.setValue(o)}}get valueAsDate(){return v(this.value)}set valueAsDate(t){this.value=t?f(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:Number.NaN}set valueAsNumber(t){this.value=t?f(new Date(t)):""}firstUpdated(){var t;this.rawValue=null===(t=this.focusableRef.value)||void 0===t?void 0:t.value}render(){const{valueAsDate:t}=this,e=t?this.dateAdapter.format(t):"";return o`<nord-input class="n-date-picker-input" value="${e}" label="${d(this.label)}" hint="${d(this.hint)}" error="${b(this.error,this.error)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hide-label="${this.hideLabel}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${p(this.focusableRef)} aria-invalid="${b(this.error,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?a:o`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?a:o`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:a}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${d(this.min)}" max="${d(this.max)}" today="${d(this.today)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{timeZone:"UTC",day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?f(t):"";const{valueAsDate:e}=this,i=e?this.dateAdapter.format(e):"";this.rawValue=i,this.dispatchEvent(new g("change"))}hide(t){this.popout.hide(t)}show(){this.popout.show()}};M.styles=[w,z,k,I],t([r(".n-date-picker-toggle",!0)],M.prototype,"toggleButton",void 0),t([r(".n-date-picker-close-button",!0)],M.prototype,"closeButton",void 0),t([r("nord-calendar",!0)],M.prototype,"calendar",void 0),t([r('[role="dialog"]',!0)],M.prototype,"popout",void 0),t([n()],M.prototype,"value",void 0),t([n({attribute:!1})],M.prototype,"rawValue",void 0),t([n({type:Boolean,reflect:!0})],M.prototype,"open",void 0),t([n({reflect:!0})],M.prototype,"min",void 0),t([n({reflect:!0})],M.prototype,"max",void 0),t([n({reflect:!0})],M.prototype,"today",void 0),t([n({reflect:!0,attribute:"first-day-of-week",type:Number})],M.prototype,"firstDayOfWeek",void 0),t([n({attribute:!1})],M.prototype,"dateAdapter",void 0),t([n({attribute:!1})],M.prototype,"isDateDisabled",void 0),t([n({attribute:!1})],M.prototype,"isDateHighlighted",void 0),t([n({reflect:!0,type:Boolean})],M.prototype,"expand",void 0),M=t([l("nord-date-picker")],M);var E=M;export{E as default};
 //# sourceMappingURL=DatePicker.js.map

package/lib/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../src/date-picker/DatePicker.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport type Button from \"../button/Button.js\"\nimport type Popout from \"../popout/Popout.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../input/Input.js\"\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"../popout/Popout.js\"\nimport \"../stack/Stack.js\"\nimport \"../calendar/Calendar.js\"\n\nimport type { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DatePredicate } from \"../calendar/Calendar.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst isDateDisabled = () => false\nconst isDateHighlighted = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status ready\n * @category form\n *\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n *\n * @localization modalHeading - Heading for the date picker's modal.\n * @localization closeLabel - Accessible label for the close button.\n * @localization buttonLabel - Accessible label for the toggle button that opens the date picker modal.\n * @localization selectedDateMessage - Describes the selected date. This message is appended to the toggle button label when a date is selected.\n *\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends SizeMixin(\n  FormAssociatedMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(`.n-date-picker-toggle`, true) private toggleButton!: Button\n  @query(`.n-date-picker-close-button`, true) private closeButton!: HTMLButtonElement\n  @query(`nord-calendar`, true) private calendar!: Calendar\n  @query(`[role=\"dialog\"]`, true) private popout!: Popout\n\n  private swipe = new SwipeController(this, {\n    target: () => this.popout,\n    matchesGesture: isDownwardsSwipe,\n    onSwipeEnd: () => this.hide(),\n  })\n\n  private localize = new LocalizeController<\"nord-date-picker\">(this, {\n    onLangChange: () => this.createDateFormatters(),\n  })\n\n  /**\n   * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n   * these are used to format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong!: Intl.DateTimeFormat\n\n  /**\n   * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = \"\"\n\n  get valueAsDate(): Date | undefined {\n    return parseISODate(this.value)\n  }\n\n  /**\n   * Get/set the value of the picker as a Date object.\n   */\n  set valueAsDate(date: Date | undefined) {\n    this.value = date ? printISODate(date) : \"\"\n  }\n\n  get valueAsNumber(): number {\n    return this.valueAsDate?.getTime() ?? NaN\n  }\n\n  /**\n   * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n   */\n  set valueAsNumber(date: number) {\n    this.value = date ? printISODate(new Date(date)) : \"\"\n  }\n\n  /**\n   * Get the raw value of the input field without date formatting. This is a read-only property.\n   */\n  @property({ attribute: false }) rawValue?: string\n\n  /**\n   * Controls whether date picker dialog is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @property({ reflect: true }) min?: string\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @property({ reflect: true }) max?: string\n\n  /**\n   * The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\n   * If not set, the current local date of the user is used.\n   */\n  @property({ reflect: true }) today?: string\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @property({ reflect: true, attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek =\n    DaysOfWeek.Monday\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   * Default is IS0-8601 parsing and formatting.\n   */\n  @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @property({ attribute: false }) isDateDisabled: DatePredicate = isDateDisabled\n\n  /**\n   * Controls which days are highlighted with a small indicator.\n   * Returning `false` will not show an indicator.\n   * Returning `true` will show the indicator, but without an accessible label. Therefore\n   * Returning a string will show the indicator, and use the string as accessible label.\n   * It is recommended to return a string rather than `true` whenever possible.\n   */\n  @property({ attribute: false }) isDateHighlighted: (date: Date) => string | boolean = isDateHighlighted\n\n  /**\n   * Controls whether the date picker expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  firstUpdated() {\n    // Make sure the date picker has a raw value when the value is initially set\n    this.rawValue = (<HTMLInputElement | null>this.focusableRef.value)?.value\n  }\n\n  render() {\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n    return html`\n      <nord-input\n        class=\"n-date-picker-input\"\n        value=${formattedDate}\n        label=${ifDefined(this.label)}\n        hint=${ifDefined(this.hint)}\n        error=${cond(this.error, this.error)}\n        placeholder=${ifDefined(this.placeholder)}\n        id=${this.inputId}\n        size=${this.size}\n        ?expand=${this.expand}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        ?readonly=${this.readonly}\n        ?hide-label=${this.hideLabel}\n        disallow-pattern=\"[^0-9./-]\"\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @input=${this.handleInputChange}\n        ${ref(this.focusableRef)}\n        aria-invalid=${cond(this.error, \"true\")}\n        aria-describedby=${ifDefined(this.getDescribedBy())}\n      >\n        ${!this.hintSlot.isEmpty ? html`<slot name=\"hint\" slot=\"hint\"></slot>` : nothing}\n        ${!this.labelSlot.isEmpty ? html`<slot name=\"label\" slot=\"label\"></slot>` : nothing}\n        <nord-button\n          size=${this.size}\n          ?disabled=${this.disabled || this.readonly}\n          slot=\"end\"\n          class=\"n-date-picker-toggle\"\n          aria-controls=\"popout\"\n          type=\"button\"\n        >\n          <nord-icon name=\"interface-calendar\"></nord-icon>\n          <nord-visually-hidden>\n            ${this.localize.term(\"buttonLabel\")}\n            ${valueAsDate\n              ? html`\n                  <span>\n                    , ${this.localize.term(\"selectedDateMessage\")} ${this.dateFormatLong.format(valueAsDate)}\n                  </span>\n                `\n              : nothing}\n          </nord-visually-hidden>\n        </nord-button>\n      </nord-input>\n      <nord-popout\n        id=\"popout\"\n        anchor=${this.inputId}\n        align=\"end\"\n        position=\"block-end\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        ?open=${this.open}\n        @open=${this.handleOpen}\n        @close=${this.handleClose}\n        aria-labelledby=\"header\"\n      >\n        <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n        <nord-stack class=\"n-date-picker-header\" direction=\"horizontal\" justify-content=\"space-between\">\n          <div class=\"n-date-picker-heading\" id=\"header\">${this.localize.term(\"modalHeading\")}</div>\n          <nord-button\n            class=\"n-date-picker-close-button\"\n            type=\"button\"\n            size=\"s\"\n            variant=\"plain\"\n            @click=${this.handleClose}\n          >\n            <nord-visually-hidden>${this.localize.term(\"closeLabel\")}</nord-visually-hidden>\n            <nord-icon name=\"interface-close-small\"></nord-icon>\n          </nord-button>\n        </nord-stack>\n\n        <nord-calendar\n          class=\"n-date-picker-calendar\"\n          expand\n          value=${this.value}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          today=${ifDefined(this.today)}\n          .firstDayOfWeek=${this.firstDayOfWeek}\n          .isDateDisabled=${this.isDateDisabled}\n          .isDateHighlighted=${this.isDateHighlighted}\n          @change=${this.handleDaySelect}\n        ></nord-calendar>\n\n        <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n      </nord-popout>\n    `\n  }\n\n  private createDateFormatters() {\n    this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n      timeZone: \"UTC\",\n      day: \"numeric\",\n      month: \"long\",\n      year: \"numeric\",\n    })\n  }\n\n  private focusFirst() {\n    this.closeButton.focus()\n  }\n\n  private focusLast() {\n    this.calendar.focus({ target: \"day\" })\n  }\n\n  private handleDaySelect = (e: DateSelectEvent) => {\n    e.stopPropagation()\n    this.setValue(e.date)\n    this.hide()\n  }\n\n  private handleOpen() {\n    this.open = true\n    this.calendar.focus({ target: \"month\" })\n  }\n\n  private handleClose() {\n    this.open = false\n  }\n\n  private handleBlur = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"blur\"))\n  }\n\n  private handleFocus = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"focus\"))\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    const parsed = this.dateAdapter.parse(target.value, createDate)\n    this.rawValue = (<HTMLInputElement | null>this.focusableRef.value)?.value\n\n    if (parsed || target.value === \"\") {\n      this.setValue(parsed)\n    }\n  }\n\n  private setValue(date?: Date) {\n    this.value = date ? printISODate(date) : \"\"\n\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n    this.rawValue = formattedDate\n\n    this.dispatchEvent(new NordEvent(\"change\"))\n  }\n\n  /**\n   * Hide the date picker programmatically.\n   * @param moveFocusToButton A boolean option to move the focus to the original button that opens the popout.\n   */\n  hide(moveFocusToButton?: boolean) {\n    this.popout.hide(moveFocusToButton)\n  }\n\n  /**\n   * Show the date picker programmatically.\n   */\n  show() {\n    this.popout.show()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-date-picker\": DatePicker\n  }\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","isDateDisabled","isDateHighlighted","DatePicker","SizeMixin","FormAssociatedMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","swipe","SwipeController","target","popout","matchesGesture","isDownwardsSwipe","onSwipeEnd","hide","localize","LocalizeController","onLangChange","createDateFormatters","value","open","firstDayOfWeek","dateAdapter","isoAdapter","expand","handleDaySelect","e","stopPropagation","setValue","date","handleBlur","event","dispatchEvent","NordEvent","handleFocus","handleInputChange","parsed","parse","createDate","rawValue","_a","focusableRef","valueAsDate","parseISODate","printISODate","valueAsNumber","_b","getTime","NaN","Date","firstUpdated","render","formattedDate","format","html","ifDefined","label","hint","cond","error","placeholder","inputId","size","disabled","required","readonly","hideLabel","ref","getDescribedBy","hintSlot","isEmpty","nothing","labelSlot","term","dateFormatLong","handleOpen","handleClose","focusLast","min","max","today","focusFirst","Intl","DateTimeFormat","resolvedLang","timeZone","day","month","year","closeButton","focus","calendar","moveFocusToButton","show","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","attribute","type","Boolean","reflect","Number","customElement"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../src/date-picker/DatePicker.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-calendar\";\nexport const tags = \"nordicon interface calendar date time day week month year\";\n","import type Button from '../button/Button.js'\nimport type Calendar from '../calendar/Calendar.js'\nimport type { DatePredicate } from '../calendar/Calendar.js'\nimport type { DateSelectEvent } from '../calendar/DateSelectEvent.js'\nimport type Popout from '../popout/Popout.js'\nimport type { DateAdapter } from './date-adapter.js'\n\nimport * as calendarIcon from '@nordhealth/icons/lib/assets/interface-calendar.js'\nimport * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport { html, LitElement, nothing } from 'lit'\n\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { isDownwardsSwipe, SwipeController } from '../common/controllers/SwipeController.js'\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from '../common/dates.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { ReadonlyMixin } from '../common/mixins/ReadonlyMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport formFieldStyle from '../common/styles/FormField.css'\nimport textFieldStyle from '../common/styles/TextField.css'\nimport Icon from '../icon/Icon.js'\n\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport { isoAdapter } from './date-adapter.js'\nimport style from './DatePicker.css'\nimport '../input/Input.js'\nimport '../button/Button.js'\n\nimport '../visually-hidden/VisuallyHidden.js'\nimport '../popout/Popout.js'\nimport '../stack/Stack.js'\nimport '../calendar/Calendar.js'\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst isDateDisabled = () => false\nconst isDateHighlighted = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status ready\n * @category form\n *\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n *\n * @localization modalHeading - Heading for the date picker's modal.\n * @localization closeLabel - Accessible label for the close button.\n * @localization buttonLabel - Accessible label for the toggle button that opens the date picker modal.\n * @localization selectedDateMessage - Describes the selected date. This message is appended to the toggle button label when a date is selected.\n *\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-date-picker')\nexport default class DatePicker extends SizeMixin(\n  FormAssociatedMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement)))),\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(`.n-date-picker-toggle`, true) private toggleButton!: Button\n  @query(`.n-date-picker-close-button`, true) private closeButton!: HTMLButtonElement\n  @query(`nord-calendar`, true) private calendar!: Calendar\n  @query(`[role=\"dialog\"]`, true) private popout!: Popout\n\n  private swipe = new SwipeController(this, {\n    target: () => this.popout,\n    matchesGesture: isDownwardsSwipe,\n    onSwipeEnd: () => this.hide(),\n  })\n\n  private localize = new LocalizeController<'nord-date-picker'>(this, {\n    onLangChange: () => this.createDateFormatters(),\n  })\n\n  /**\n   * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n   * these are used to format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong!: Intl.DateTimeFormat\n\n  /**\n   * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = ''\n\n  get valueAsDate(): Date | undefined {\n    return parseISODate(this.value)\n  }\n\n  /**\n   * Get/set the value of the picker as a Date object.\n   */\n  set valueAsDate(date: Date | undefined) {\n    this.value = date ? printISODate(date) : ''\n  }\n\n  get valueAsNumber(): number {\n    return this.valueAsDate?.getTime() ?? Number.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   * Get the raw value of the input field without date formatting. This is a read-only property.\n   */\n  @property({ attribute: false }) rawValue?: string\n\n  /**\n   * Controls whether date picker dialog is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @property({ reflect: true }) min?: string\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @property({ reflect: true }) max?: string\n\n  /**\n   * The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\n   * If not set, the current local date of the user is used.\n   */\n  @property({ reflect: true }) today?: string\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @property({ reflect: true, attribute: 'first-day-of-week', type: Number }) firstDayOfWeek: DaysOfWeek\n    = DaysOfWeek.Monday\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   * Default is IS0-8601 parsing and formatting.\n   */\n  @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @property({ attribute: false }) isDateDisabled: DatePredicate = isDateDisabled\n\n  /**\n   * Controls which days are highlighted with a small indicator.\n   * Returning `false` will not show an indicator.\n   * Returning `true` will show the indicator, but without an accessible label. Therefore\n   * Returning a string will show the indicator, and use the string as accessible label.\n   * It is recommended to return a string rather than `true` whenever possible.\n   */\n  @property({ attribute: false }) isDateHighlighted: (date: Date) => string | boolean = isDateHighlighted\n\n  /**\n   * Controls whether the date picker expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  firstUpdated() {\n    // Make sure the date picker has a raw value when the value is initially set\n    this.rawValue = (<HTMLInputElement | null> this.focusableRef.value)?.value\n  }\n\n  render() {\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : ''\n\n    return html`\n      <nord-input\n        class=\"n-date-picker-input\"\n        value=${formattedDate}\n        label=${ifDefined(this.label)}\n        hint=${ifDefined(this.hint)}\n        error=${cond(this.error, this.error)}\n        placeholder=${ifDefined(this.placeholder)}\n        id=${this.inputId}\n        size=${this.size}\n        ?expand=${this.expand}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        ?readonly=${this.readonly}\n        ?hide-label=${this.hideLabel}\n        disallow-pattern=\"[^0-9./-]\"\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @input=${this.handleInputChange}\n        ${ref(this.focusableRef)}\n        aria-invalid=${cond(this.error, 'true')}\n        aria-describedby=${ifDefined(this.getDescribedBy())}\n      >\n        ${!this.hintSlot.isEmpty ? html`<slot name=\"hint\" slot=\"hint\"></slot>` : nothing}\n        ${!this.labelSlot.isEmpty ? html`<slot name=\"label\" slot=\"label\"></slot>` : nothing}\n        <nord-button\n          size=${this.size}\n          ?disabled=${this.disabled || this.readonly}\n          slot=\"end\"\n          class=\"n-date-picker-toggle\"\n          aria-controls=\"popout\"\n          type=\"button\"\n        >\n          <nord-icon name=\"interface-calendar\"></nord-icon>\n          <nord-visually-hidden>\n            ${this.localize.term('buttonLabel')}\n            ${valueAsDate\n              ? html`\n                  <span>\n                    , ${this.localize.term('selectedDateMessage')} ${this.dateFormatLong.format(valueAsDate)}\n                  </span>\n                `\n              : nothing}\n          </nord-visually-hidden>\n        </nord-button>\n      </nord-input>\n      <nord-popout\n        id=\"popout\"\n        anchor=${this.inputId}\n        align=\"end\"\n        position=\"block-end\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        ?open=${this.open}\n        @open=${this.handleOpen}\n        @close=${this.handleClose}\n        aria-labelledby=\"header\"\n      >\n        <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n        <nord-stack class=\"n-date-picker-header\" direction=\"horizontal\" justify-content=\"space-between\">\n          <div class=\"n-date-picker-heading\" id=\"header\">${this.localize.term('modalHeading')}</div>\n          <nord-button\n            class=\"n-date-picker-close-button\"\n            type=\"button\"\n            size=\"s\"\n            variant=\"plain\"\n            @click=${this.handleClose}\n          >\n            <nord-visually-hidden>${this.localize.term('closeLabel')}</nord-visually-hidden>\n            <nord-icon name=\"interface-close-small\"></nord-icon>\n          </nord-button>\n        </nord-stack>\n\n        <nord-calendar\n          class=\"n-date-picker-calendar\"\n          expand\n          value=${this.value}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          today=${ifDefined(this.today)}\n          .firstDayOfWeek=${this.firstDayOfWeek}\n          .isDateDisabled=${this.isDateDisabled}\n          .isDateHighlighted=${this.isDateHighlighted}\n          @change=${this.handleDaySelect}\n        ></nord-calendar>\n\n        <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n      </nord-popout>\n    `\n  }\n\n  private createDateFormatters() {\n    this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n      timeZone: 'UTC',\n      day: 'numeric',\n      month: 'long',\n      year: 'numeric',\n    })\n  }\n\n  private focusFirst() {\n    this.closeButton.focus()\n  }\n\n  private focusLast() {\n    this.calendar.focus({ target: 'day' })\n  }\n\n  private handleDaySelect = (e: DateSelectEvent) => {\n    e.stopPropagation()\n    this.setValue(e.date)\n    this.hide()\n  }\n\n  private handleOpen() {\n    this.open = true\n    this.calendar.focus({ target: 'month' })\n  }\n\n  private handleClose() {\n    this.open = false\n  }\n\n  private handleBlur = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent('blur'))\n  }\n\n  private handleFocus = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent('focus'))\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    const parsed = this.dateAdapter.parse(target.value, createDate)\n    this.rawValue = (<HTMLInputElement | null> this.focusableRef.value)?.value\n\n    if (parsed || target.value === '') {\n      this.setValue(parsed)\n    }\n  }\n\n  private setValue(date?: Date) {\n    this.value = date ? printISODate(date) : ''\n\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : ''\n    this.rawValue = formattedDate\n\n    this.dispatchEvent(new NordEvent('change'))\n  }\n\n  /**\n   * Hide the date picker programmatically.\n   * @param moveFocusToButton A boolean option to move the focus to the original button that opens the popout.\n   */\n  hide(moveFocusToButton?: boolean) {\n    this.popout.hide(moveFocusToButton)\n  }\n\n  /**\n   * Show the date picker programmatically.\n   */\n  show() {\n    this.popout.show()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-date-picker': DatePicker\n  }\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","isDateDisabled","isDateHighlighted","DatePicker","SizeMixin","FormAssociatedMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","swipe","SwipeController","target","popout","matchesGesture","isDownwardsSwipe","onSwipeEnd","hide","localize","LocalizeController","onLangChange","createDateFormatters","value","open","firstDayOfWeek","DaysOfWeek","Monday","dateAdapter","isoAdapter","expand","handleDaySelect","e","stopPropagation","setValue","date","handleBlur","event","dispatchEvent","NordEvent","handleFocus","handleInputChange","parsed","parse","createDate","rawValue","_a","focusableRef","valueAsDate","parseISODate","printISODate","valueAsNumber","_b","getTime","Number","NaN","Date","firstUpdated","render","formattedDate","format","html","ifDefined","label","hint","cond","error","placeholder","inputId","size","disabled","required","readonly","hideLabel","ref","getDescribedBy","hintSlot","isEmpty","nothing","labelSlot","term","dateFormatLong","handleOpen","handleClose","focusLast","min","max","today","focusFirst","Intl","DateTimeFormat","resolvedLang","timeZone","day","month","year","closeButton","focus","calendar","moveFocusToButton","show","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","attribute","type","Boolean","reflect","customElement"],"mappings":"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"}

package/lib/DateSelectEvent.js

@@ -1,2 +1,2 @@
-import{N as s}from"./events-Bv6wNHwJ.js";class e extends s{constructor(s,e){super(s),this.date=e}}export{e as DateSelectEvent};
+import{N as s}from"./events-Bv6wNHwJ.js";class t extends s{constructor(s,t){super(s),this.date=t}}export{t as DateSelectEvent};
 //# sourceMappingURL=DateSelectEvent.js.map

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(\n    name: string,\n    public date: Date\n  ) {\n    super(name)\n  }\n}\n"],"names":["DateSelectEvent","NordEvent","constructor","name","date","super","this"],"mappings":"yCAEM,MAAOA,UAAwBC,EACnC,WAAAC,CACEC,EACOC,GAEPC,MAAMF,GAFCG,KAAIF,KAAJA,CAGR"}
+{"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(\n    name: string,\n    public date: Date,\n  ) {\n    super(name)\n  }\n}\n"],"names":["DateSelectEvent","NordEvent","constructor","name","date","super","this"],"mappings":"yCAEM,MAAOA,UAAwBC,EACnC,WAAAC,CACEC,EACOC,GAEPC,MAAMF,GAFCG,KAAIF,KAAJA,CAGR"}

package/lib/DirectionController-ChvNGESZ.js.map

@@ -1 +1 @@
-{"version":3,"file":"DirectionController-ChvNGESZ.js","sources":["../src/common/controllers/DirectionController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost, isServer } 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    if (!isServer && document.documentElement.dir) {\n      return document.documentElement.dir as WritingDirection\n    }\n\n    return \"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","dir","isServer","document","documentElement","isLTR","this","isRTL","constructor","host","addController","hostConnected","observer","MutationObserver","observe","attributes","attributeFilter","hosts","has","add","hostDisconnected","delete","forEach","requestUpdate","Set"],"mappings":"qCAIaA,EAMX,OAAIC,GACF,OAAKC,GAAYC,SAASC,gBAAgBH,IACjCE,SAASC,gBAAgBH,IAG3B,KACR,CAED,SAAII,GACF,MAAoB,QAAbC,KAAKL,GACb,CAED,SAAIM,GACF,MAAoB,QAAbD,KAAKL,GACb,CAED,WAAAO,CAAoBC,GAAAH,KAAIG,KAAJA,EAClBH,KAAKG,KAAKC,cAAcJ,KACzB,CAED,aAAAK,GACOX,EAAoBY,WACvBZ,EAAoBY,SAAW,IAAIC,iBAAiBb,EAAoBc,SACxEd,EAAoBY,SAASE,QAAQX,SAASC,gBAAiB,CAAEW,YAAY,EAAMC,gBAAiB,CAAC,UAGlGhB,EAAoBiB,MAAMC,IAAIZ,KAAKG,OACtCT,EAAoBiB,MAAME,IAAIb,KAAKG,KAEtC,CAED,gBAAAW,GACEpB,EAAoBiB,MAAMI,OAAOf,KAAKG,KACvC,CAEO,cAAOK,GACbd,EAAoBiB,MAAMK,SAAQb,GAAQA,EAAKc,iBAChD,EAzCcvB,EAAAiB,MAAQ,IAAIO"}
+{"version":3,"file":"DirectionController-ChvNGESZ.js","sources":["../src/common/controllers/DirectionController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { isServer } 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  get dir(): WritingDirection {\n    if (!isServer && document.documentElement.dir) {\n      return document.documentElement.dir as WritingDirection\n    }\n\n    return '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","dir","isServer","document","documentElement","isLTR","this","isRTL","constructor","host","addController","hostConnected","observer","MutationObserver","observe","attributes","attributeFilter","hosts","has","add","hostDisconnected","delete","forEach","requestUpdate","Set"],"mappings":"qCAKaA,EAKX,OAAIC,GACF,OAAKC,GAAYC,SAASC,gBAAgBH,IACjCE,SAASC,gBAAgBH,IAG3B,KACR,CAED,SAAII,GACF,MAAoB,QAAbC,KAAKL,GACb,CAED,SAAIM,GACF,MAAoB,QAAbD,KAAKL,GACb,CAED,WAAAO,CAAoBC,GAAAH,KAAIG,KAAJA,EAClBH,KAAKG,KAAKC,cAAcJ,KACzB,CAED,aAAAK,GACOX,EAAoBY,WACvBZ,EAAoBY,SAAW,IAAIC,iBAAiBb,EAAoBc,SACxEd,EAAoBY,SAASE,QAAQX,SAASC,gBAAiB,CAAEW,YAAY,EAAMC,gBAAiB,CAAC,UAGlGhB,EAAoBiB,MAAMC,IAAIZ,KAAKG,OACtCT,EAAoBiB,MAAME,IAAIb,KAAKG,KAEtC,CAED,gBAAAW,GACEpB,EAAoBiB,MAAMI,OAAOf,KAAKG,KACvC,CAEO,cAAOK,GACbd,EAAoBiB,MAAMK,SAAQb,GAAQA,EAAKc,iBAChD,EAxCcvB,EAAAiB,MAAQ,IAAIO"}

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 ready\n * @category structure\n *\n * @cssprop [--n-divider-color=var(--n-color-border)] - Controls the color of the divider, using our [color tokens](/tokens/#color).\n * @cssprop [--n-divider-size=1px] - Controls the size, or thickness, of the divider.\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":"8mBAmBe,IAAMA,EAAN,cAAsBC,EAAtB,WAAAC,uBAMgBC,KAASC,UAA8B,YAUrE,CARC,YAAAC,GACEF,KAAKG,aAAa,OAAQ,YAC3B,CAGO,qBAAAC,GACNJ,KAAKG,aAAa,mBAAuC,aAAnBH,KAAKC,UAA2B,WAAa,aACpF,GAdMJ,EAAAQ,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2Db,EAAAc,UAAA,iBAAA,GAOxEH,EAAA,CADPI,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 ready\n * @category structure\n *\n * @cssprop [--n-divider-color=var(--n-color-border)] - Controls the color of the divider, using our [color tokens](/tokens/#color).\n * @cssprop [--n-divider-size=1px] - Controls the size, or thickness, of the divider.\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":"8mBAmBe,IAAMA,EAAN,cAAsBC,EAAtB,WAAAC,uBAMgBC,KAASC,UAA8B,YAUrE,CARC,YAAAC,GACEF,KAAKG,aAAa,OAAQ,YAC3B,CAGO,qBAAAC,GACNJ,KAAKG,aAAa,mBAAuC,aAAnBH,KAAKC,UAA2B,WAAa,aACpF,GAdMJ,EAAAQ,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2Db,EAAAc,UAAA,iBAAA,GAOxEH,EAAA,CADPI,EAAQ,cAGRf,EAAAc,UAAA,wBAAA,MAfkBd,EAAOW,EAAA,CAD3BK,EAAc,iBACMhB,SAAAA"}