@nordhealth/components 4.26.1 → 5.0.0-alpha.0

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{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{g as x}from"./focus-D8oSvIcN.js";import{w as g}from"./number-Dg2vCfGd.js";import{s as y}from"./Component-DSU3Qp0O.js";import w from"./Icon.js";import{LocalizeController as z}from"./LocalizeController.js";import{KeyboardController as k}from"./KeyboardController.js";import{SelectEvent as j}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 $="keyboard-arrow-up-down";var C=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:$});const _="keyboard-backspace";var I=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:_});const B="keyboard-return";var O=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:B});const S=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)}`;w.registerIcon(C),w.registerIcon(O),w.registerIcon(I);let E=class extends o{constructor(){super(...arguments),this.inputRef=d(),this.listRef=d(),this.localize=new z(this),this.dismissController=new v(this,{isOpen:()=>this.open,onDismiss:()=>this.close()}),this.keyboardController=new k(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="${$}"></nord-icon>${this.localize.term("footerArrowKeys")} </span><span class="n-help"><nord-icon label="Enter key" name="${B}"></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="${_}"></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=x(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 j(e);this.dispatchEvent(o)}start(){this.selectedIndex=0}end(){this.selectedIndex=this.filteredCommands.length-1}next(){this.selectedIndex=g(this.selectedIndex+1,0,this.filteredCommands.length-1)}previous(){this.selectedIndex=g(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}))}};E.styles=[y,S],e([r({reflect:!0,type:Boolean})],E.prototype,"open",void 0),e([r({reflect:!0,type:Boolean,attribute:"external-filtering"})],E.prototype,"externalFiltering",void 0),e([r({reflect:!0,type:Boolean,attribute:"exit-nested-on-search"})],E.prototype,"exitNestedOnSearch",void 0),e([r({type:Array,attribute:!1})],E.prototype,"commands",void 0),e([r({type:String,attribute:!1})],E.prototype,"searchQuery",void 0),e([s()],E.prototype,"parent",void 0),e([s()],E.prototype,"bump",void 0),e([s()],E.prototype,"selectedIndex",void 0),e([s()],E.prototype,"filteredCommands",void 0),e([u("commands")],E.prototype,"handleCommandsChange",null),e([u("open")],E.prototype,"handleBump",null),e([u("open","updated")],E.prototype,"focusOnOpen",null),e([u("searchQuery"),u("parent"),u("commands"),u("externalFiltering")],E.prototype,"filterCommands",null),E=e([a("nord-command-menu")],E);var R=E;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 u}from"./LightDismissController-4pH8cdko.js";import{o as v}from"./observe-D0n0zOfU.js";import{c as f}from"./cond-CI1KbneT.js";import{N as b}from"./events-Bv6wNHwJ.js";import{g as x}from"./focus-D8oSvIcN.js";import{w as g}from"./number-Dg2vCfGd.js";import{s as y}from"./Component-BJ5O5n8k.js";import z from"./Icon.js";import{LocalizeController as w}from"./LocalizeController.js";import{KeyboardController as k}from"./KeyboardController.js";import{SelectEvent as j}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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./DirectionController-ChvNGESZ.js";const $="keyboard-arrow-up-down";var C=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:$});const _="keyboard-backspace";var I=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:_});const B="keyboard-return";var O=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:B});const S=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{block-size:100%;display:none;inline-size:100%;inset-block-start:0;inset-inline-start:0;overflow:auto;pointer-events:none;position:fixed;z-index:var(--n-index-modal)}.n-modal.n-visible{display:block}.n-modal-content{background:var(--n-color-surface);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-modal);display:flex;flex-direction:column;inset-block-start:var(--_n-command-menu-block-start);margin:auto;max-inline-size:var(--_n-command-menu-inline-size);min-inline-size:0;overflow:hidden;pointer-events:all;position:relative}.n-bump{animation:zoom-in-zoom-out var(--n-transition-slowly)}@keyframes zoom-in-zoom-out{0%{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1.0001)}}.n-modal-footer{color:var(--n-color-text-weaker);display:flex;font-size:calc(var(--n-font-size-s) - 1px);gap:var(--n-space-s);padding:var(--n-space-s) var(--n-space-m)}.n-help{align-items:center;display:flex;gap:2px}.n-help+.n-help{border-inline-start:1px solid var(--n-color-border-strong);padding-inline-start:var(--n-space-s)}.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{border-block-end:1px solid var(--n-color-border);display:flex}[role=combobox]{appearance:none;background:#0000;border:none;border-radius:0;color:var(--n-color-text);flex:1;font-family:inherit;font-size:var(--n-font-size-l);font-weight:var(--n-font-weight);margin:0;outline:none;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]{margin:0;max-block-size:var(--_n-command-menu-block-size);overflow:auto;padding:0}.n-group-header{background:var(--n-color-surface-raised);color:var(--n-color-text-weaker);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);line-height:var(--n-line-height);overflow:hidden;padding:calc(var(--n-space-s)/1.4) var(--n-space-m);text-overflow:ellipsis;white-space:nowrap}.n-command-empty,.n-group-header{border-block-end:1px solid var(--n-color-border)}.n-command-empty{align-items:flex-start;border-inline-start:2px solid #0000;color:var(--n-color-text);display:flex;flex:1;flex-direction:column;padding:calc(var(--n-space-m)/1.5) var(--n-space-m)}.n-command-empty .n-title{flex:1;font-size:var(--n-font-size-m);margin-block-start:var(--n-space-s);margin-inline-end:var(--n-space-xs);max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.n-command-empty .n-tip{color:var(--n-color-text-weaker);flex:1;font-size:var(--n-font-size-s);margin-block-end:var(--n-space-m);margin-block-start:var(--n-space-s)}`;z.registerIcon(C),z.registerIcon(O),z.registerIcon(I);let E=class extends o{constructor(){super(...arguments),this.inputRef=d(),this.listRef=d(),this.localize=new w(this),this.dismissController=new u(this,{isOpen:()=>this.open,onDismiss:()=>this.close()}),this.keyboardController=new k(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="${$}"></nord-icon>${this.localize.term("footerArrowKeys")} </span><span class="n-help"><nord-icon label="Enter key" name="${B}"></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="${_}"></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=x(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 j(e);this.dispatchEvent(o)}start(){this.selectedIndex=0}end(){this.selectedIndex=this.filteredCommands.length-1}next(){this.selectedIndex=g(this.selectedIndex+1,0,this.filteredCommands.length-1)}previous(){this.selectedIndex=g(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}))}};E.styles=[y,S],e([r({reflect:!0,type:Boolean})],E.prototype,"open",void 0),e([r({reflect:!0,type:Boolean,attribute:"external-filtering"})],E.prototype,"externalFiltering",void 0),e([r({reflect:!0,type:Boolean,attribute:"exit-nested-on-search"})],E.prototype,"exitNestedOnSearch",void 0),e([r({type:Array,attribute:!1})],E.prototype,"commands",void 0),e([r({type:String,attribute:!1})],E.prototype,"searchQuery",void 0),e([s()],E.prototype,"parent",void 0),e([s()],E.prototype,"bump",void 0),e([s()],E.prototype,"selectedIndex",void 0),e([s()],E.prototype,"filteredCommands",void 0),e([v("commands")],E.prototype,"handleCommandsChange",null),e([v("open")],E.prototype,"handleBump",null),e([v("open","updated")],E.prototype,"focusOnOpen",null),e([v("searchQuery"),v("parent"),v("commands"),v("externalFiltering")],E.prototype,"filterCommands",null),E=e([a("nord-command-menu")],E);var R=E;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-backspace.js","../../icons/lib/assets/keyboard-return.js","../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","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","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","_a","previousFocus","focus","undefined","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","getFocusedElement","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/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","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","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","_a","previousFocus","focus","undefined","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","getFocusedElement","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 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};
+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-BJ5O5n8k.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{align-items:center;border-block-end:1px solid var(--n-color-border);border-inline-start:2px solid #0000;color:var(--n-color-text);display:flex;flex:1;padding:calc(var(--n-space-m)/1.5) var(--n-space-m)}.n-command.n-selected,.n-command:hover{background-color:var(--n-color-active);cursor:pointer}.n-command.n-selected{border-inline-start-color:var(--n-color-accent)}nord-icon{color:var(--n-color-icon)}.n-command-icon{line-height:var(--n-line-height-tight);margin-inline-end:calc(var(--n-space-s)*1.4);margin-inline-start:2px}.n-selected .n-command-icon nord-icon{color:var(--n-color-icon-hover)}.n-title{flex:1;margin-inline-end:var(--n-space-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.n-shortcuts{display:flex;gap:var(--n-space-xs)}.n-shortcut{align-items:center;background:var(--n-color-button);border:1px solid var(--n-color-border-strong);border-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow);color:var(--n-color-icon);display:inline-flex;font-size:var(--n-font-size-xs);font-weight:var(--n-font-weight);justify-content:center;line-height:var(--n-line-height-tight);min-inline-size:var(--n-space-s);padding:calc(var(--n-space-xs)/2) calc(var(--n-space-s)/3);text-transform:capitalize;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-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"}
+{"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,qzCCadC,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/Component-BJ5O5n8k.js

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

package/lib/Component-BJ5O5n8k.js.map

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

package/lib/DatePicker.js

@@ -1,2 +1,2 @@
-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 r}from"lit";import{query as s,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 h,i as c}from"./Calendar-ChNZdVRO.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-B4Qj-CQN.js";import{I as $}from"./InputMixin-LetXsCyv.js";import{R as D,s as k}from"./TextField-B955GOhe.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{s as w}from"./Component-DSU3Qp0O.js";import{s as z}from"./FormField-BFaVzUjk.js";import C from"./Icon.js";import{LocalizeController as F}from"./LocalizeController.js";import{isoAdapter as B}from"./date-adapter.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-DtEL0HZ0.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-D-K8Mueq.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 S=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 E=()=>!1,I=()=>!1;let L=class extends(x(y(D($(j(r)))))){constructor(){super(...arguments),this.swipe=new h(this,{target:()=>this.popout,matchesGesture:c,onSwipeEnd:()=>this.hide()}),this.localize=new F(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=m.Monday,this.dateAdapter=B,this.isDateDisabled=E,this.isDateHighlighted=I,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.internalError=this.validateDateBounds(this.valueAsDate),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.internalError,this.error||this.internalError)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hint-below="${this.hintBelow}" ?hide-label="${this.hideLabel}" ?hide-required="${this.hideRequired}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${p(this.focusableRef)} aria-invalid="${b(this.error||this.internalError,"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,{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"))}validateDateBounds(t){if(!t)return;const e=v(this.min||""),i=v(this.max||"");return e&&t<e?this.localize.term("dateOutOfMinBound",this.min):i&&t>i?this.localize.term("dateOutOfMaxBound",this.max):void 0}hide(t){this.popout.hide(t)}show(){this.popout.show()}};L.styles=[w,z,k,S],t([s(".n-date-picker-toggle",!0)],L.prototype,"toggleButton",void 0),t([s(".n-date-picker-close-button",!0)],L.prototype,"closeButton",void 0),t([s("nord-calendar",!0)],L.prototype,"calendar",void 0),t([s('[role="dialog"]',!0)],L.prototype,"popout",void 0),t([n()],L.prototype,"value",void 0),t([n({attribute:!1})],L.prototype,"internalError",void 0),t([n({attribute:!1})],L.prototype,"rawValue",void 0),t([n({type:Boolean,reflect:!0})],L.prototype,"open",void 0),t([n({reflect:!0})],L.prototype,"min",void 0),t([n({reflect:!0})],L.prototype,"max",void 0),t([n({reflect:!0})],L.prototype,"today",void 0),t([n({reflect:!0,attribute:"first-day-of-week",type:Number})],L.prototype,"firstDayOfWeek",void 0),t([n({attribute:!1})],L.prototype,"dateAdapter",void 0),t([n({attribute:!1})],L.prototype,"isDateDisabled",void 0),t([n({attribute:!1})],L.prototype,"isDateHighlighted",void 0),t([n({reflect:!0,type:Boolean})],L.prototype,"expand",void 0),L=t([l("nord-date-picker")],L);var M=L;export{M as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{i}from"./context-provider-D8lrPLVi.js";import{c as e}from"./interface-calendar-Cw2bJfbS.js";import{c as o}from"./interface-close-small-CnpAFMO3.js";import{css as a,html as s,nothing as r,LitElement as n}from"lit";import{query as l,property as d,customElement as p}from"lit/decorators.js";import{ifDefined as c}from"lit/directives/if-defined.js";import{ref as h}from"lit/directives/ref.js";import{S as m,i as u}from"./Calendar-C1SxrlzN.js";import{D as v,c as j,p as f,a as b}from"./dates-C-ZvzXaC.js";import{c as y}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as $}from"./FocusableMixin-BlQLNPdJ.js";import{F as z}from"./FormAssociatedMixin-D9aPREgv.js";import{I as D}from"./InputMixin-LetXsCyv.js";import{R as x}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as k}from"./SizeMixin-CU9cLbLC.js";import{s as w}from"./Component-BJ5O5n8k.js";import{s as F}from"./FormField-CMgEFZCK.js";import{s as C}from"./TextField-CSKvieoG.js";import{fieldContext as A}from"./field-context.js";import I from"./Icon.js";import{LocalizeController as S}from"./LocalizeController.js";import{isoAdapter as B}from"./date-adapter.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-DpN7PP9h.js";import"./Stack.js";import"./context-request-event-CCRlXoeR.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"./DateRangeSelectEvent.js";import"./DateSelectEvent.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./SlotController-Z6eG7LSZ.js";import"./light-dom-styles-DXsbiKU9.js";import"./create-context-CJ69ntlY.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./navigation-search-CBbIGzo2.js";import"lit/directives/style-map.js";import"./ResizeController-14PUwRQy.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./ScrollbarController-BFC67Y2x.js";const E=a`: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{border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-s)*1.5) var(--n-space-m)}.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;inset-block-start:calc(var(--n-space-s)*-1);inset-inline-end:calc(var(--n-space-s)*-1);opacity:0;position:absolute}.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{inset:auto;opacity:1;position:relative}.n-date-picker-heading{display:initial}}`;I.registerIcon(e),I.registerIcon(o);const L=()=>!1,M=()=>!1;let O=class extends(k(z(x(D($(n)))))){constructor(){super(...arguments),this.fieldBarrier=new i(this,{context:A,initialValue:void 0}),this.swipe=new m(this,{target:()=>this.popout,matchesGesture:u,onSwipeEnd:()=>this.hide()}),this.localize=new S(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=v.Monday,this.dateAdapter=B,this.isDateDisabled=L,this.isDateHighlighted=M,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.internalError=this.validateDateBounds(this.valueAsDate),this.dispatchEvent(new g("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new g("focus"))},this.handleInputChange=t=>{var i;const e=t.target,o=this.dateAdapter.parse(e.value,j);this.rawValue=null===(i=this.focusableRef.value)||void 0===i?void 0:i.value,(o||""===e.value)&&this.setValue(o)}}get valueAsDate(){return f(this.value)}set valueAsDate(t){this.value=t?b(t):""}get valueAsNumber(){var t,i;return null!==(i=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==i?i:Number.NaN}set valueAsNumber(t){this.value=t?b(new Date(t)):""}get ownInvalid(){return Boolean(this.error||this.internalError)||super.ownInvalid}firstUpdated(){var t;this.rawValue=null===(t=this.focusableRef.value)||void 0===t?void 0:t.value}render(){const{valueAsDate:t}=this,i=t?this.dateAdapter.format(t):"";return s`<nord-input class="n-date-picker-input" value="${i}" label="${this.insideField?r:c(this.label)}" hint="${this.insideField?r:c(this.hint)}" error="${this.insideField?r:y(this.error||this.internalError,this.error||this.internalError)}" placeholder="${c(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.effectiveDisabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hint-below="${this.hintBelow}" ?hide-label="${this.insideField||this.hideLabel}" ?hide-required="${this.hideRequired}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${h(this.focusableRef)} aria-label="${c(this.controlAriaLabel)}" aria-invalid="${c(this.controlAriaInvalid)}" aria-describedby="${c(this.controlAriaDescribedby)}">${this.insideField||this.hintSlot.isEmpty?r:s`<slot name="hint" slot="hint"></slot>`} ${this.insideField||this.labelSlot.isEmpty?r:s`<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?s`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:r}</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="${c(this.min)}" max="${c(this.max)}" today="${c(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,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?b(t):"";const{valueAsDate:i}=this,e=i?this.dateAdapter.format(i):"";this.rawValue=e,this.dispatchEvent(new g("change"))}validateDateBounds(t){if(!t)return;const i=f(this.min||""),e=f(this.max||"");return i&&t<i?this.localize.term("dateOutOfMinBound",this.min):e&&t>e?this.localize.term("dateOutOfMaxBound",this.max):void 0}hide(t){this.popout.hide(t)}show(){this.popout.show()}};O.styles=[w,F,C,E],t([l(".n-date-picker-toggle",!0)],O.prototype,"toggleButton",void 0),t([l(".n-date-picker-close-button",!0)],O.prototype,"closeButton",void 0),t([l("nord-calendar",!0)],O.prototype,"calendar",void 0),t([l('[role="dialog"]',!0)],O.prototype,"popout",void 0),t([d()],O.prototype,"value",void 0),t([d({attribute:!1})],O.prototype,"internalError",void 0),t([d({attribute:!1})],O.prototype,"rawValue",void 0),t([d({type:Boolean,reflect:!0})],O.prototype,"open",void 0),t([d({reflect:!0})],O.prototype,"min",void 0),t([d({reflect:!0})],O.prototype,"max",void 0),t([d({reflect:!0})],O.prototype,"today",void 0),t([d({reflect:!0,attribute:"first-day-of-week",type:Number})],O.prototype,"firstDayOfWeek",void 0),t([d({attribute:!1})],O.prototype,"dateAdapter",void 0),t([d({attribute:!1})],O.prototype,"isDateDisabled",void 0),t([d({attribute:!1})],O.prototype,"isDateHighlighted",void 0),t([d({reflect:!0,type:Boolean})],O.prototype,"expand",void 0),O=t([p("nord-date-picker")],O);var R=O;export{R 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 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 * @localization dateOutOfMinBound - Error message shown when the entered date is below the minimum allowed date.\n * @localization dateOutOfMaxBound - Error message shown when the entered date is above the maximum allowed date.\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  /**\n   * Internal validation error message. Set automatically when min/max validation fails.\n   * This is a read-only property that's managed by the component.\n   */\n  @property({ attribute: false }) internalError?: 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.internalError, this.error || this.internalError)}\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        ?hint-below=${this.hintBelow}\n        ?hide-label=${this.hideLabel}\n        ?hide-required=${this.hideRequired}\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 || this.internalError, '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      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\n    // Validate on blur and set internal error\n    this.internalError = this.validateDateBounds(this.valueAsDate)\n\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  private validateDateBounds(date: Date | undefined): string | undefined {\n    if (!date)\n      return undefined\n\n    const minDate = parseISODate(this.min || '')\n    const maxDate = parseISODate(this.max || '')\n\n    if (minDate && date < minDate) {\n      return this.localize.term('dateOutOfMinBound', this.min!)\n    }\n    if (maxDate && date > maxDate) {\n      return this.localize.term('dateOutOfMaxBound', this.max!)\n    }\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","internalError","validateDateBounds","valueAsDate","dispatchEvent","NordEvent","handleFocus","handleInputChange","parsed","parse","createDate","rawValue","_a","focusableRef","parseISODate","printISODate","valueAsNumber","_b","getTime","Number","NaN","Date","firstUpdated","render","formattedDate","format","html","ifDefined","label","hint","cond","error","placeholder","inputId","size","disabled","required","readonly","hintBelow","hideLabel","hideRequired","ref","getDescribedBy","hintSlot","isEmpty","nothing","labelSlot","term","dateFormatLong","handleOpen","handleClose","focusLast","min","max","today","focusFirst","Intl","DateTimeFormat","resolvedLang","day","month","year","closeButton","focus","calendar","minDate","maxDate","moveFocusToButton","show","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","attribute","type","Boolean","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../src/date-picker/DatePicker.ts"],"sourcesContent":["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 { ContextProvider } from '@lit/context'\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 { html, LitElement, nothing } from 'lit'\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'\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from '../common/dates.js'\n\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'\nimport formFieldStyle from '../common/styles/FormField.css'\n\nimport textFieldStyle from '../common/styles/TextField.css'\nimport { fieldContext } from '../field/field-context.js'\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 * @localization dateOutOfMinBound - Error message shown when the entered date is below the minimum allowed date.\n * @localization dateOutOfMaxBound - Error message shown when the entered date is above the maximum allowed date.\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  // Barrier: the composed inner <nord-input> would otherwise consume the same\n  // Field context and double up the label/description. Provide `undefined` to the\n  // subtree so the inner input is driven entirely by this component's props.\n  private fieldBarrier = new ContextProvider(this, { context: fieldContext, initialValue: undefined })\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  /**\n   * Internal validation error message. Set automatically when min/max validation fails.\n   * This is a read-only property that's managed by the component.\n   */\n  @property({ attribute: false }) internalError?: 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  // The control's own invalid state for the field context: a built-in/internal\n  // error. (When inside a Field, the Field's `invalid` is ORed in by the mixin.)\n  protected override get ownInvalid() {\n    return Boolean(this.error || this.internalError) || super.ownInvalid\n  }\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=${this.insideField ? nothing : ifDefined(this.label)}\n        hint=${this.insideField ? nothing : ifDefined(this.hint)}\n        error=${this.insideField ? nothing : cond(this.error || this.internalError, this.error || this.internalError)}\n        placeholder=${ifDefined(this.placeholder)}\n        id=${this.inputId}\n        size=${this.size}\n        ?expand=${this.expand}\n        ?disabled=${this.effectiveDisabled}\n        ?required=${this.required}\n        ?readonly=${this.readonly}\n        ?hint-below=${this.hintBelow}\n        ?hide-label=${this.insideField || this.hideLabel}\n        ?hide-required=${this.hideRequired}\n        disallow-pattern=\"[^0-9./-]\"\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @input=${this.handleInputChange}\n        ${ref(this.focusableRef)}\n        aria-label=${ifDefined(this.controlAriaLabel)}\n        aria-invalid=${ifDefined(this.controlAriaInvalid)}\n        aria-describedby=${ifDefined(this.controlAriaDescribedby)}\n      >\n        ${this.insideField || this.hintSlot.isEmpty ? nothing : html`<slot name=\"hint\" slot=\"hint\"></slot>`}\n        ${this.insideField || this.labelSlot.isEmpty ? nothing : html`<slot name=\"label\" slot=\"label\"></slot>`}\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      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\n    // Validate on blur and set internal error\n    this.internalError = this.validateDateBounds(this.valueAsDate)\n\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  private validateDateBounds(date: Date | undefined): string | undefined {\n    if (!date)\n      return undefined\n\n    const minDate = parseISODate(this.min || '')\n    const maxDate = parseISODate(this.max || '')\n\n    if (minDate && date < minDate) {\n      return this.localize.term('dateOutOfMinBound', this.min!)\n    }\n    if (maxDate && date > maxDate) {\n      return this.localize.term('dateOutOfMaxBound', this.max!)\n    }\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","fieldBarrier","ContextProvider","context","fieldContext","initialValue","undefined","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","internalError","validateDateBounds","valueAsDate","dispatchEvent","NordEvent","handleFocus","handleInputChange","parsed","parse","createDate","rawValue","_a","focusableRef","parseISODate","printISODate","valueAsNumber","_b","getTime","Number","NaN","Date","ownInvalid","Boolean","error","super","firstUpdated","render","formattedDate","format","html","insideField","nothing","ifDefined","label","hint","cond","placeholder","inputId","size","effectiveDisabled","required","readonly","hintBelow","hideLabel","hideRequired","ref","controlAriaLabel","controlAriaInvalid","controlAriaDescribedby","hintSlot","isEmpty","labelSlot","disabled","term","dateFormatLong","handleOpen","handleClose","focusLast","min","max","today","focusFirst","Intl","DateTimeFormat","resolvedLang","day","month","year","closeButton","focus","calendar","minDate","maxDate","moveFocusToButton","show","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","attribute","type","reflect","customElement"],"mappings":"w5HA2CAA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAElB,MAAMC,EAAiB,KAAM,EACvBC,EAAoB,KAAM,EAyBjB,IAAMC,EAAN,cAAyBC,EACtCC,EAAoBC,EAAcC,EAAWC,EAAeC,QAD/C,WAAAC,uBAQLC,KAAAC,aAAe,IAAIC,EAAgBF,KAAM,CAAEG,QAASC,EAAcC,kBAAcC,IAOhFN,KAAAO,MAAQ,IAAIC,EAAgBR,KAAM,CACxCS,OAAQ,IAAMT,KAAKU,OACnBC,eAAgBC,EAChBC,WAAY,IAAMb,KAAKc,SAGjBd,KAAAe,SAAW,IAAIC,EAAuChB,KAAM,CAClEiB,aAAc,IAAMjB,KAAKkB,yBAgBflB,KAAKmB,MAAW,GAsCgBnB,KAAIoB,MAAG,EAwBwBpB,KAAAqB,eACvEC,EAAWC,OAQiBvB,KAAWwB,YAAgBC,EAM3BzB,KAAcV,eAAkBA,EAShCU,KAAiBT,kBAAqCA,EAK1CS,KAAM0B,QAAG,EAgI7C1B,KAAA2B,gBAAmBC,IACzBA,EAAEC,kBACF7B,KAAK8B,SAASF,EAAEG,MAChB/B,KAAKc,MAAM,EAYLd,KAAAgC,WAAcC,IACpBA,EAAMJ,kBAGN7B,KAAKkC,cAAgBlC,KAAKmC,mBAAmBnC,KAAKoC,aAElDpC,KAAKqC,cAAc,IAAIC,EAAU,QAAQ,EAGnCtC,KAAAuC,YAAeN,IACrBA,EAAMJ,kBACN7B,KAAKqC,cAAc,IAAIC,EAAU,SAAS,EAGpCtC,KAAAwC,kBAAqBZ,UAC3B,MAAMnB,EAASmB,EAAEnB,OAEXgC,EAASzC,KAAKwB,YAAYkB,MAAMjC,EAAOU,MAAOwB,GACpD3C,KAAK4C,SAAgE,QAA1BC,EAAA7C,KAAK8C,aAAa3B,aAAQ,IAAA0B,OAAA,EAAAA,EAAA1B,OAEjEsB,GAA2B,KAAjBhC,EAAOU,QACnBnB,KAAK8B,SAASW,EACf,CA0CJ,CAlSC,eAAIL,GACF,OAAOW,EAAa/C,KAAKmB,MAC1B,CAKD,eAAIiB,CAAYL,GACd/B,KAAKmB,MAAQY,EAAOiB,EAAajB,GAAQ,EAC1C,CAED,iBAAIkB,WACF,OAAsC,QAA/BC,EAAgB,QAAhBL,EAAA7C,KAAKoC,mBAAW,IAAAS,OAAA,EAAAA,EAAEM,iBAAa,IAAAD,EAAAA,EAAAE,OAAOC,GAC9C,CAKD,iBAAIJ,CAAclB,GAChB/B,KAAKmB,MAAQY,EAAOiB,EAAa,IAAIM,KAAKvB,IAAS,EACpD,CAmED,cAAuBwB,GACrB,OAAOC,QAAQxD,KAAKyD,OAASzD,KAAKkC,gBAAkBwB,MAAMH,UAC3D,CAED,YAAAI,SAEE3D,KAAK4C,SAAgE,QAA1BC,EAAA7C,KAAK8C,aAAa3B,aAAQ,IAAA0B,OAAA,EAAAA,EAAA1B,KACtE,CAED,MAAAyC,GACE,MAAMxB,YAAEA,GAAgBpC,KAClB6D,EAAgBzB,EAAcpC,KAAKwB,YAAYsC,OAAO1B,GAAe,GAE3E,OAAO2B,CAAI,kDAGCF,aACA7D,KAAKgE,YAAcC,EAAUC,EAAUlE,KAAKmE,iBAC7CnE,KAAKgE,YAAcC,EAAUC,EAAUlE,KAAKoE,iBAC3CpE,KAAKgE,YAAcC,EAAUI,EAAKrE,KAAKyD,OAASzD,KAAKkC,cAAelC,KAAKyD,OAASzD,KAAKkC,gCACjFgC,EAAUlE,KAAKsE,qBACxBtE,KAAKuE,kBACHvE,KAAKwE,kBACFxE,KAAK0B,sBACH1B,KAAKyE,iCACLzE,KAAK0E,wBACL1E,KAAK2E,0BACH3E,KAAK4E,2BACL5E,KAAKgE,aAAehE,KAAK6E,8BACtB7E,KAAK8E,sDAEb9E,KAAKuC,uBACNvC,KAAKgC,uBACJhC,KAAKwC,sBACZuC,EAAI/E,KAAK8C,6BACEoB,EAAUlE,KAAKgF,oCACbd,EAAUlE,KAAKiF,0CACXf,EAAUlE,KAAKkF,4BAEhClF,KAAKgE,aAAehE,KAAKmF,SAASC,QAAUnB,EAAUF,CAAI,2CAC1D/D,KAAKgE,aAAehE,KAAKqF,UAAUD,QAAUnB,EAAUF,CAAI,+DAEpD/D,KAAKwE,oBACAxE,KAAKsF,UAAYtF,KAAK2E,iKAQ9B3E,KAAKe,SAASwE,KAAK,kBACnBnD,EACE2B,CAAI,WAEI/D,KAAKe,SAASwE,KAAK,0BAA0BvF,KAAKwF,eAAe1B,OAAO1B,YAGhF6B,uFAMCjE,KAAKuE,oFAKNvE,KAAKoB,gBACLpB,KAAKyF,uBACJzF,KAAK0F,sFAGgC1F,KAAK2F,mKAGA3F,KAAKe,SAASwE,KAAK,uHAMzDvF,KAAK0F,sCAEU1F,KAAKe,SAASwE,KAAK,kLAQrCvF,KAAKmB,eACP+C,EAAUlE,KAAK4F,cACf1B,EAAUlE,KAAK6F,gBACb3B,EAAUlE,KAAK8F,4BACL9F,KAAKqB,oCACLrB,KAAKV,uCACFU,KAAKT,+BAChBS,KAAK2B,iFAG6B3B,KAAK+F,kCAGxD,CAEO,oBAAA7E,GACNlB,KAAKwF,eAAiB,IAAIQ,KAAKC,eAAejG,KAAKe,SAASmF,aAAc,CACxEC,IAAK,UACLC,MAAO,OACPC,KAAM,WAET,CAEO,UAAAN,GACN/F,KAAKsG,YAAYC,OAClB,CAEO,SAAAZ,GACN3F,KAAKwG,SAASD,MAAM,CAAE9F,OAAQ,OAC/B,CAQO,UAAAgF,GACNzF,KAAKoB,MAAO,EACZpB,KAAKwG,SAASD,MAAM,CAAE9F,OAAQ,SAC/B,CAEO,WAAAiF,GACN1F,KAAKoB,MAAO,CACb,CA2BO,QAAAU,CAASC,GACf/B,KAAKmB,MAAQY,EAAOiB,EAAajB,GAAQ,GAEzC,MAAMK,YAAEA,GAAgBpC,KAClB6D,EAAgBzB,EAAcpC,KAAKwB,YAAYsC,OAAO1B,GAAe,GAC3EpC,KAAK4C,SAAWiB,EAEhB7D,KAAKqC,cAAc,IAAIC,EAAU,UAClC,CAEO,kBAAAH,CAAmBJ,GACzB,IAAKA,EACH,OAEF,MAAM0E,EAAU1D,EAAa/C,KAAK4F,KAAO,IACnCc,EAAU3D,EAAa/C,KAAK6F,KAAO,IAEzC,OAAIY,GAAW1E,EAAO0E,EACbzG,KAAKe,SAASwE,KAAK,oBAAqBvF,KAAK4F,KAElDc,GAAW3E,EAAO2E,EACb1G,KAAKe,SAASwE,KAAK,oBAAqBvF,KAAK6F,UADtD,CAGD,CAMD,IAAA/E,CAAK6F,GACH3G,KAAKU,OAAOI,KAAK6F,EAClB,CAKD,IAAAC,GACE5G,KAAKU,OAAOkG,MACb,GA5UMpH,EAAMqH,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAOnBC,EAAA,CAA7CC,EAAM,yBAAyB,IAAmC3H,EAAA4H,UAAA,oBAAA,GACfF,EAAA,CAAnDC,EAAM,+BAA+B,IAA6C3H,EAAA4H,UAAA,mBAAA,GAC7CF,EAAA,CAArCC,EAAM,iBAAiB,IAAiC3H,EAAA4H,UAAA,gBAAA,GACjBF,EAAA,CAAvCC,EAAM,mBAAmB,IAA6B3H,EAAA4H,UAAA,cAAA,GAyB3CF,EAAA,CAAXG,KAA6B7H,EAAA4H,UAAA,aAAA,GAMEF,EAAA,CAA/BG,EAAS,CAAEC,WAAW,KAA+B9H,EAAA4H,UAAA,qBAAA,GA2BtBF,EAAA,CAA/BG,EAAS,CAAEC,WAAW,KAA0B9H,EAAA4H,UAAA,gBAAA,GAKLF,EAAA,CAA3CG,EAAS,CAAEE,KAAM/D,QAASgE,SAAS,KAAoBhI,EAAA4H,UAAA,YAAA,GAM3BF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAAoBhI,EAAA4H,UAAA,WAAA,GAMZF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAAoBhI,EAAA4H,UAAA,WAAA,GAMZF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAAsBhI,EAAA4H,UAAA,aAAA,GAMgCF,EAAA,CAA1EG,EAAS,CAAEG,SAAS,EAAMF,UAAW,oBAAqBC,KAAMnE,UAC5C5D,EAAA4H,UAAA,sBAAA,GAQWF,EAAA,CAA/BG,EAAS,CAAEC,WAAW,KAA8C9H,EAAA4H,UAAA,mBAAA,GAMrCF,EAAA,CAA/BG,EAAS,CAAEC,WAAW,KAAuD9H,EAAA4H,UAAA,sBAAA,GAS9CF,EAAA,CAA/BG,EAAS,CAAEC,WAAW,KAAgF9H,EAAA4H,UAAA,yBAAA,GAK3DF,EAAA,CAA3CG,EAAS,CAAEG,SAAS,EAAMD,KAAM/D,WAAyBhE,EAAA4H,UAAA,cAAA,GAjIvC5H,EAAU0H,EAAA,CAD9BO,EAAc,qBACMjI,SAAAA"}

package/lib/DateRangeChangeEvent.js

@@ -0,0 +1,2 @@
+import{N as t}from"./events-Bv6wNHwJ.js";class e extends t{constructor(t,e){super(t),this._detail=e}get detail(){return this._detail}get value(){return this._detail.value}get startDate(){return this._detail.startDate}get endDate(){return this._detail.endDate}}export{e as DateRangeChangeEvent};
+//# sourceMappingURL=DateRangeChangeEvent.js.map

package/lib/DateRangeChangeEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeChangeEvent.js","sources":["../src/date-range-picker/DateRangeChangeEvent.ts"],"sourcesContent":["import { NordEvent } from '../common/events.js'\n\n/** The payload carried by a {@link DateRangeChangeEvent}. */\nexport interface DateRangeChangeDetail {\n  /** The committed interval string `YYYY-MM-DD/YYYY-MM-DD`, or `\"\"` when empty. */\n  value: string\n  /** The committed start date in ISO-8601 format, or `\"\"` when empty. */\n  startDate: string\n  /** The committed end date in ISO-8601 format, or `\"\"` when empty. */\n  endDate: string\n}\n\n/**\n * Dispatched by `nord-date-range-picker` when the committed range changes. The\n * live `input` event uses this same shape, while `change` is dispatched once the\n * pending selection is applied (or cleared).\n */\nexport class DateRangeChangeEvent extends NordEvent {\n  constructor(\n    name: string,\n    private readonly _detail: DateRangeChangeDetail,\n  ) {\n    super(name)\n  }\n\n  /** Convenience accessor mirroring `CustomEvent.detail`. */\n  get detail(): DateRangeChangeDetail {\n    return this._detail\n  }\n\n  /** The committed interval string `YYYY-MM-DD/YYYY-MM-DD`, or `\"\"`. */\n  get value(): string {\n    return this._detail.value\n  }\n\n  /** The committed start date in ISO-8601 format, or `\"\"`. */\n  get startDate(): string {\n    return this._detail.startDate\n  }\n\n  /** The committed end date in ISO-8601 format, or `\"\"`. */\n  get endDate(): string {\n    return this._detail.endDate\n  }\n}\n"],"names":["DateRangeChangeEvent","NordEvent","constructor","name","_detail","super","this","detail","value","startDate","endDate"],"mappings":"yCAiBM,MAAOA,UAA6BC,EACxC,WAAAC,CACEC,EACiBC,GAEjBC,MAAMF,GAFWG,KAAOF,QAAPA,CAGlB,CAGD,UAAIG,GACF,OAAOD,KAAKF,OACb,CAGD,SAAII,GACF,OAAOF,KAAKF,QAAQI,KACrB,CAGD,aAAIC,GACF,OAAOH,KAAKF,QAAQK,SACrB,CAGD,WAAIC,GACF,OAAOJ,KAAKF,QAAQM,OACrB"}

package/lib/DateRangePicker.js

@@ -0,0 +1,2 @@
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{c as t}from"./interface-calendar-Cw2bJfbS.js";import{c as r}from"./interface-close-small-CnpAFMO3.js";import{d as i}from"./interface-dropdown-small-CYvgxudU.js";import{css as n,html as a,nothing as s,LitElement as o}from"lit";import{query as d,property as l,state as p,customElement as c}from"lit/decorators.js";import{classMap as h}from"lit/directives/class-map.js";import{ifDefined as m}from"lit/directives/if-defined.js";import{ref as u}from"lit/directives/ref.js";import{O as g}from"./OpenStateController-CCnZ7up6.js";import{D as v,a as b,p as f,b as y,s as k,d as $,e as z,f as j,g as D,h as x,i as w,j as F}from"./dates-C-ZvzXaC.js";import{o as P}from"./observe-D0n0zOfU.js";import{c as C}from"./cond-CI1KbneT.js";import{N as S}from"./events-Bv6wNHwJ.js";import{i as L}from"./light-dom-styles-DXsbiKU9.js";import{D as E}from"./DraftComponentMixin-4qug5Rky.js";import{F as O}from"./FocusableMixin-BlQLNPdJ.js";import{F as R}from"./FormAssociatedMixin-D9aPREgv.js";import{I}from"./InputMixin-LetXsCyv.js";import{R as T}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as N}from"./SizeMixin-CU9cLbLC.js";import M from"./Icon.js";import{LocalizeController as B}from"./LocalizeController.js";import{DateRangeChangeEvent as V}from"./DateRangeChangeEvent.js";import"./Button.js";import"./Input.js";import"./Calendar-C1SxrlzN.js";import"./Popout-DpN7PP9h.js";import"./Stack.js";import"./VisuallyHidden.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"lit/directives/unsafe-html.js";import"./Component-BJ5O5n8k.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./navigation-search-CBbIGzo2.js";import"lit/directives/style-map.js";import"./DirectionController-ChvNGESZ.js";import"./ResizeController-14PUwRQy.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./FormField-CMgEFZCK.js";import"./TextField-CSKvieoG.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./collection-Dvg2XbxV.js";import"./number-Dg2vCfGd.js";import"./DateRangeSelectEvent.js";import"./DateSelectEvent.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./ScrollbarController-BFC67Y2x.js";const A=n`nord-date-range-picker,nord-date-range-picker *,nord-date-range-picker :after,nord-date-range-picker :before{box-sizing:border-box}nord-date-range-picker{--_n-drp-trigger-min-inline-size:var(--n-date-range-picker-trigger-min-inline-size,14rem);color:var(--n-color-text);display:block;font-family:var(--n-font-family)}nord-date-range-picker .n-drp{inline-size:100%;position:relative}nord-date-range-picker .n-drp-toggle{--n-input-inline-size:100%;display:block;min-inline-size:var(--_n-drp-trigger-min-inline-size)}nord-date-range-picker:not([disabled]) .n-drp-toggle.is-placeholder{--n-input-color:var(--n-color-text-weaker)}nord-date-range-picker .n-drp-popout{inline-size:var(--n-date-range-picker-popout-inline-size,max-content);max-inline-size:100%}nord-date-range-picker[inline] .n-drp{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-border-radius-l);display:inline-block;inline-size:auto;max-inline-size:100%}nord-date-range-picker .n-drp-popout-header{align-items:center;display:none;gap:var(--n-space-s);justify-content:space-between;padding-block-end:var(--n-space-s)}nord-date-range-picker .n-drp-heading{font-weight:var(--n-font-weight-active)}nord-date-range-picker .n-drp-close{align-items:center;appearance:none;background:#0000;border:none;border-radius:var(--n-border-radius-circle);color:var(--n-color-icon);cursor:pointer;display:flex;flex-shrink:0;justify-content:center;margin:0;padding:0}nord-date-range-picker .n-drp-close:hover{color:var(--n-color-text)}nord-date-range-picker .n-drp-close nord-icon{--_n-icon-size:var(--n-size-icon-s)}nord-date-range-picker .n-drp-body{align-items:flex-start;display:flex;justify-content:center;padding:var(--n-space-m)}nord-date-range-picker .n-drp-body:not(.is-narrow){padding:0}nord-date-range-picker .n-drp-presets{border-inline-end:1px solid var(--n-color-border);display:flex;flex-direction:column;max-block-size:20.375rem;min-inline-size:calc(var(--n-space-xl)*5);overflow-y:auto;padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-date-range-picker .n-drp-preset-group{display:flex;flex-direction:column;gap:0;list-style:none;margin:0;padding:0}nord-date-range-picker .n-drp-preset-group:not(:last-child){border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s);padding-block-end:var(--n-space-s)}nord-date-range-picker .n-drp-preset-group li{margin:0;padding:0}nord-date-range-picker .n-drp-body.is-narrow{align-items:center;flex-direction:column;gap:var(--n-space-s)}nord-date-range-picker .n-drp-presets-collapsed{inline-size:100%}nord-date-range-picker .n-drp-body.is-narrow .n-drp-calendar{padding-inline:0}nord-date-range-picker .n-drp-presets-menu{display:flex;flex-direction:column;inline-size:var(--_n-drp-presets-inline-size,100%);max-block-size:20rem;overflow-y:auto;padding:var(--n-space-s)}nord-date-range-picker .n-drp-preset{align-items:center;appearance:none;background:#0000;border:none;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:flex;font-family:var(--n-font-family);font-size:var(--n-font-size-m);inline-size:100%;line-height:var(--n-line-height);margin:0;min-block-size:var(--n-space-xl);padding-block-end:0;padding-block-start:0;padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s);text-align:start;transition:background var(--n-transition-quickly)}nord-date-range-picker .n-drp-preset:hover{background:var(--n-color-active)}nord-date-range-picker .n-drp-preset:focus-visible{box-shadow:0 0 0 2px var(--n-color-accent);outline:none}nord-date-range-picker .n-drp-preset.is-active{background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}nord-date-range-picker .n-drp-calendar{padding:var(--n-space-m)}nord-date-range-picker .n-drp-calendar nord-calendar{--n-calendar-box-shadow:none;--n-calendar-padding-block:0;--n-calendar-padding-inline:0;--n-calendar-day-size:var(--n-space-xl);--n-calendar-header-margin-block-end:var(--n-space-xs);--n-calendar-header-padding-block-end:var(--n-space-s);--n-calendar-nav-padding-inline:var(--n-space-s)}nord-date-range-picker .n-drp-footer{align-items:center;border-block-start:1px solid var(--n-color-border);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--n-space-s);justify-content:space-between;margin-block-start:0;padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-m);padding-inline-start:var(--n-space-m)}nord-date-range-picker .n-drp-footer-end{align-items:center;display:flex;flex-direction:row;gap:var(--n-space-m)}nord-date-range-picker .n-drp-period{color:var(--n-color-text-weaker);font-size:var(--n-font-size-s);white-space:nowrap}@media (max-width:35.9375em){nord-date-range-picker .n-drp-popout{margin-inline-end:auto;margin-inline-start:auto}nord-date-range-picker .n-drp-popout-header{display:flex;margin-block-start:var(--n-space-s)}nord-date-range-picker .n-drp-body{flex-direction:column}nord-date-range-picker .n-drp-calendar{margin-block-end:var(--n-space-s);padding:0}nord-date-range-picker .n-drp-presets{border-block-end:1px solid var(--n-color-border);border-inline-end:none;inline-size:100%;padding-block-end:var(--n-space-m);padding-inline-end:0}nord-date-range-picker .n-drp-footer{padding-inline:0}}`;var q;M.registerIcon(t),M.registerIcon(r),M.registerIcon(i);let W=1;const H=()=>!1,G=()=>!1,_=["today","lastDays","lastPeriod","currentPeriod","quarters"];function Y(e,t){return e&&t?`${e}/${t}`:""}let Q=q=class extends(E(N(R(T(I(O(o))))))){constructor(){super(...arguments),this.dateRangePickerId="nord-date-range-picker-"+W++,this.inputId=`${this.dateRangePickerId}-input`,this.localize=new B(this,{onLangChange:()=>this.createDateFormatters()}),this.openState=new g(this,{isOpen:()=>this.open,setOpen:e=>{this.open=e},popout:()=>this.popout,isInert:()=>this.disabled||this.readonly,onOpen:()=>{var e;this.pendingStart=this.startDate,this.pendingEnd=this.endDate,null===(e=this.calendar)||void 0===e||e.updateComplete.then((()=>{var e;return null===(e=this.calendar)||void 0===e?void 0:e.focus({target:"day"})}))}}),this.value="",this.startDate="",this.endDate="",this.open=!1,this.firstDayOfWeek=v.Monday,this.isDateDisabled=H,this.isDateHighlighted=G,this.hidePresets=!1,this.inline=!1,this.pendingStart="",this.pendingEnd="",this.isNarrow=!1,this.presetsOpen=!1,this.resizeObserver=new ResizeObserver((()=>{this.measureNarrow(),this.syncPresetsInlineSize()})),this.handleViewportResize=()=>{this.measureNarrow()},this.customTrigger=null,this.syncingFromValue=!1,this.boundForm=null,this.handleFormData=e=>{if(!this.disabled)return this.startName&&this.endName?(this.startDate&&e.formData.append(this.startName,this.startDate),void(this.endDate&&e.formData.append(this.endName,this.endDate))):void(this.name&&this.value&&e.formData.append(this.name,this.value))},this.handleFocus=()=>{this.dispatchEvent(new S("focus"))},this.handleBlur=()=>{this.dispatchEvent(new S("blur"))},this.handleRangeChange=e=>{e.stopPropagation(),this.disabled||this.readonly||(this.pendingStart=b(e.start),this.pendingEnd=b(e.end),this.emitInput())},this.handleApply=()=>{!this.disabled&&!this.readonly&&this.pendingStart&&this.pendingEnd&&(this.commit(this.pendingStart,this.pendingEnd),this.hide(!0))},this.handleClear=()=>{this.disabled||this.readonly||(this.pendingStart="",this.pendingEnd="",this.commit("",""),this.hide(!0))},this.handleTriggerClick=()=>{this.measureNarrow(),this.openState.toggle()}}get labelFocusOnly(){return!0}measureNarrow(e=window.innerWidth){if(e>0){const t=Number.parseFloat(getComputedStyle(document.documentElement).fontSize)||16;this.isNarrow=e<q.narrowThresholdRem*t}}syncPresetsInlineSize(){const e=this.renderRoot.querySelector(".n-drp-presets-collapsed");e&&this.style.setProperty("--_n-drp-presets-inline-size",`${e.clientWidth}px`)}get valueAsDateRange(){const e=f(this.startDate),t=f(this.endDate);return e&&t?[e,t]:void 0}set valueAsDateRange(e){if(!e)return void(this.value="");const[t,r]=e;this.value=Y(b(t),b(r))}connectedCallback(){super.connectedCallback(),L(this,A),this.syncFormListener(),this.resizeObserver.observe(this),window.addEventListener("resize",this.handleViewportResize),this.customTrigger=this.querySelector(':scope > [slot="trigger"]')}disconnectedCallback(){var e;super.disconnectedCallback(),null===(e=this.boundForm)||void 0===e||e.removeEventListener("formdata",this.handleFormData),this.boundForm=null,this.resizeObserver.disconnect(),window.removeEventListener("resize",this.handleViewportResize)}createRenderRoot(){return this}get ownInvalid(){return Boolean(this.error||this.internalError)||super.ownInvalid}firstUpdated(e){super.firstUpdated(e),this.inline&&(this.pendingStart=this.startDate,this.pendingEnd=this.endDate)}updated(e){super.updated(e),this.syncFormListener(),this.wireCustomTrigger(),this.syncPresetsInlineSize()}wireCustomTrigger(){const e=this.customTrigger;if(!e)return;const t=`${this.dateRangePickerId}-popout`;e.setAttribute("aria-controls",t),e.setAttribute("aria-haspopup","dialog"),e.setAttribute("aria-expanded",this.open?"true":"false"),e.removeEventListener("click",this.handleTriggerClick),e.addEventListener("click",this.handleTriggerClick)}syncFormListener(){var e,t;const r=this.form;r!==this.boundForm&&(null===(e=this.boundForm)||void 0===e||e.removeEventListener("formdata",this.handleFormData),this.boundForm=r,null===(t=this.boundForm)||void 0===t||t.addEventListener("formdata",this.handleFormData))}handleValueObserve(){if(this.syncingFromValue)return;this.syncingFromValue=!0;const[e,t]=function(e){if(!e)return["",""];const[t="",r=""]=e.split("/");return[t,r]}(this.value);this.startDate=e,this.endDate=t,this.internalError=this.validateBounds(e,t),this.syncingFromValue=!1,this.inline&&(this.pendingStart=e,this.pendingEnd=t)}handlePartObserve(){this.syncingFromValue||(this.syncingFromValue=!0,this.value=Y(this.startDate,this.endDate),this.internalError=this.validateBounds(this.startDate,this.endDate),this.syncingFromValue=!1)}get formValue(){}get presetCatalogue(){const e=this.localize,t=this.firstDayOfWeek,r=this.getToday().getFullYear(),i=r-1,n=[{id:"today",group:"today",label:e.term("presetToday"),resolve:e=>[e,e]},{id:"yesterday",group:"today",label:e.term("presetYesterday"),resolve:e=>{const t=y(e,-1);return[t,t]}},{id:"last-7",group:"lastDays",label:e.term("presetLastDays",7),resolve:e=>[y(e,-7),e]},{id:"last-30",group:"lastDays",label:e.term("presetLastDays",30),resolve:e=>[y(e,-30),e]},{id:"last-60",group:"lastDays",label:e.term("presetLastDays",60),resolve:e=>[y(e,-60),e]},{id:"last-90",group:"lastDays",label:e.term("presetLastDays",90),resolve:e=>[y(e,-90),e]},{id:"last-365",group:"lastDays",label:e.term("presetLastDays",365),resolve:e=>[y(e,-365),e]},{id:"last-week",group:"lastPeriod",label:e.term("presetLastWeek"),resolve:e=>{const r=k(e,t);return[y(r,-7),y(r,-1)]}},{id:"last-month",group:"lastPeriod",label:e.term("presetLastMonth"),resolve:e=>{const t=y($(e),-1);return[$(t),t]}},{id:"last-6-months",group:"lastPeriod",label:e.term("presetLastMonths",6),resolve:e=>{const t=y($(e),-1);return[$(z(t,-5)),t]}},{id:"last-quarter",group:"lastPeriod",label:e.term("presetLastQuarter"),resolve:e=>{const t=y(j(e),-1);return[j(t),t]}},{id:"last-year",group:"lastPeriod",label:e.term("presetLastYear"),resolve:e=>{const t=D(e,e.getFullYear()-1);return[x(t),y(x(e),-1)]}},{id:"last-12-months",group:"lastPeriod",label:e.term("presetLastMonths",12),resolve:e=>{const t=y($(e),-1);return[$(z(t,-11)),t]}},{id:"current-week",group:"currentPeriod",label:e.term("presetCurrentWeek"),resolve:e=>[k(e,t),e]},{id:"current-month",group:"currentPeriod",label:e.term("presetCurrentMonth"),resolve:e=>[$(e),e]},{id:"current-quarter",group:"currentPeriod",label:e.term("presetCurrentQuarter"),resolve:e=>[j(e),e]},{id:"current-year",group:"currentPeriod",label:e.term("presetCurrentYear"),resolve:e=>[x(e),e]}];for(const t of[r,i])for(const i of[4,3,2,1])n.push({id:`q-${t}-${i}`,group:"quarters",label:e.term("presetQuarter",i,t),resolve:()=>w(i,t),available:t===r?e=>F(i,e):void 0});return n}get visiblePresets(){const e=this.getToday(),t=f(this.min||""),r=f(this.max||"");let i=this.presetCatalogue;if(this.presets){const e=new Set(this.presets);i=i.filter((t=>e.has(t.id)))}return i.filter((i=>{if(i.available&&!i.available(e))return!1;const[n,a]=i.resolve(e);return!(t&&n.getTime()<t.getTime())&&!(r&&a.getTime()>r.getTime())}))}get presetGroups(){const e=this.visiblePresets;return _.map((t=>e.filter((e=>e.group===t)))).filter((e=>e.length>0))}getToday(){return f(this.today||"")||new Date}get activePresetId(){if(!this.pendingStart||!this.pendingEnd)return;const e=this.getToday();for(const t of this.visiblePresets){const[r,i]=t.resolve(e);if(b(r)===this.pendingStart&&b(i)===this.pendingEnd)return t.id}}createDateFormatters(){this.dateFormat=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"short",year:"numeric"})}get displayValue(){const e=this.valueAsDateRange;if(!e)return"";const[t,r]=e,i=this.localize.term("rangeSeparator");return`${this.dateFormat.format(t)} ${i} ${this.dateFormat.format(r)}`}get pendingRangeLabel(){const e=f(this.pendingStart);if(!e)return"";const t=f(this.pendingEnd),r=this.localize.term("rangeSeparator");return t?`${this.dateFormat.format(e)} ${r} ${this.dateFormat.format(t)}`:this.dateFormat.format(e)}validateBounds(e,t){const r=f(this.min||""),i=f(this.max||""),n=f(e),a=f(t);return r&&n&&n<r?this.localize.term("dateOutOfMinBound",this.min):i&&a&&a>i?this.localize.term("dateOutOfMaxBound",this.max):void 0}render(){const e=this.displayValue,t=this.placeholder||this.localize.term("placeholder"),r=`${this.dateRangePickerId}-anchor`,i=`${this.dateRangePickerId}-popout`,n=`${this.dateRangePickerId}-header`,o=this.controlAriaLabel,d=this.controlAriaLabelledby,l=this.controlAriaDescribedby,p=this.activePresetId;return this.inline?a`${this.renderLabel()}<div class="n-drp" id="${r}" aria-label="${m(o)}" aria-labelledby="${m(d)}" aria-describedby="${m(l)}" ?inert="${this.effectiveDisabled||this.readonly}" aria-disabled="${this.effectiveDisabled?"true":s}">${this.renderBody(p)}</div>${this.renderError()} ${this.isHintBelow?this.renderHint():s}`:a`<div class="n-drp" id="${r}">${this.customTrigger?this.customTrigger:a`<nord-input class="${h({"n-drp-toggle":!0,"is-placeholder":!e})}" type="button" size="${this.size}" id="${`${this.dateRangePickerId}-input`}" value="${e||t}" label="${this.insideField?s:m(this.label)}" hint="${this.insideField?s:m(this.hint)}" error="${this.insideField?s:C(this.error||this.internalError,this.error||this.internalError)}" placeholder="${m(t)}" ?disabled="${this.effectiveDisabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hint-below="${this.hintBelow}" ?hide-label="${this.insideField||this.hideLabel}" aria-haspopup="dialog" aria-controls="${i}" aria-expanded="${this.open?"true":"false"}" aria-label="${m(o)}" aria-describedby="${m(l)}" aria-invalid="${m(this.controlAriaInvalid)}" @click="${this.handleTriggerClick}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" ${u(this.focusableRef)}>${this.insideField||this.hintSlot.isEmpty?s:a`<slot name="hint" slot="hint"></slot>`} ${this.insideField||this.labelSlot.isEmpty?s:a`<slot name="label" slot="label"></slot>`}<nord-button slot="end" class="n-drp-toggle-button" size="${this.size}" ?disabled="${this.effectiveDisabled||this.readonly}" aria-controls="${i}" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")}</nord-visually-hidden></nord-button></nord-input>`}<nord-popout id="${i}" controlled anchor="${r}" align="start" position="block-end" role="dialog" aria-modal="true" aria-labelledby="${n}" @open="${this.openState.onPopoutOpen}" @close="${this.openState.onPopoutClose}"><div class="n-drp-popout"><div class="n-drp-popout-header"><span class="n-drp-heading" id="${n}">${this.localize.term("modalHeading")}</span> <button type="button" class="n-drp-close" aria-label="${this.localize.term("closeLabel")}" @click="${()=>this.hide(!0)}"><nord-icon name="interface-close-small"></nord-icon></button></div>${this.renderBody(p)}</div></nord-popout></div>`}renderBody(e){const t=this.isNarrow?"s":"m";return a`<div class="${h({"n-drp-body":!0,"is-narrow":this.isNarrow})}">${this.hidePresets||0===this.presetGroups.length?s:this.isNarrow?this.renderPresetsCollapsed(e):this.renderPresetsList(e)}<div class="n-drp-calendar"><nord-calendar range expand months="${this.isNarrow?1:2}" range-start="${this.pendingStart}" range-end="${this.pendingEnd}" min="${m(this.min)}" max="${m(this.max)}" today="${m(this.today)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @range-change="${this.handleRangeChange}"></nord-calendar></div></div><div class="n-drp-footer"><nord-button type="button" size="${t}" variant="plain" @click="${this.handleClear}">${this.localize.term("clearLabel")}</nord-button><div class="n-drp-footer-end">${this.pendingRangeLabel?a`<span class="n-drp-period">${this.pendingRangeLabel}</span>`:s} ${this.inline?s:a`<nord-button type="button" size="${t}" @click="${()=>this.hide(!0)}">${this.localize.term("cancelLabel")}</nord-button>`}<nord-button type="button" size="${t}" variant="primary" ?disabled="${!this.pendingStart||!this.pendingEnd}" @click="${this.handleApply}">${this.localize.term("applyLabel")}</nord-button></div></div>`}renderPreset(e,t){return a`<li><button type="button" class="${h({"n-drp-preset":!0,"is-active":e.id===t})}" aria-pressed="${e.id===t?"true":"false"}" @click="${()=>this.handlePresetClick(e)}">${e.label}</button></li>`}renderPresetGroups(e){return this.presetGroups.map((t=>a`<ul class="n-drp-preset-group">${t.map((t=>this.renderPreset(t,e)))}</ul>`))}renderPresetsList(e){return a`<div class="n-drp-presets" role="group" aria-label="${this.localize.term("presetsLabel")}">${this.renderPresetGroups(e)}</div>`}renderPresetsCollapsed(e){var t;const r=`${this.dateRangePickerId}-presets`,i=null===(t=this.visiblePresets.find((t=>t.id===e)))||void 0===t?void 0:t.label;return a`<div class="n-drp-presets-collapsed"><nord-button type="button" size="s" expand aria-haspopup="true" aria-controls="${r}" aria-expanded="${this.presetsOpen?"true":"false"}">${null!=i?i:this.localize.term("presetsCollapsedLabel")}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button><nord-popout id="${r}" always-floating expand position="block-end" ?open="${this.presetsOpen}" @open="${()=>this.presetsOpen=!0}" @close="${()=>this.presetsOpen=!1}"><div class="n-drp-presets-menu" role="group" aria-label="${this.localize.term("presetsLabel")}">${this.renderPresetGroups(e)}</div></nord-popout></div>`}handlePresetClick(e){if(this.disabled||this.readonly)return;const[t,r]=e.resolve(this.getToday());this.pendingStart=b(t),this.pendingEnd=b(r),this.emitInput(),this.presetsOpen=!1}emitInput(){this.dispatchEvent(new V("input",{value:Y(this.pendingStart,this.pendingEnd),startDate:this.pendingStart,endDate:this.pendingEnd}))}commit(e,t){this.value=Y(e,t),this.dispatchEvent(new V("change",{value:this.value,startDate:e,endDate:t}))}show(){this.measureNarrow(),this.openState.show()}hide(e=!1){var t,r;e&&(null===(r=null!==(t=this.customTrigger)&&void 0!==t?t:this.toggle)||void 0===r||r.focus()),this.openState.hide()}focus(e){var t;null===(t=this.toggle)||void 0===t||t.focus(e)}};Q.narrowThresholdRem=57.5,e([d("nord-calendar",!0)],Q.prototype,"calendar",void 0),e([d(".n-drp-toggle",!0)],Q.prototype,"toggle",void 0),e([d("nord-popout",!0)],Q.prototype,"popout",void 0),e([l()],Q.prototype,"value",void 0),e([l({reflect:!0,attribute:"start-date"})],Q.prototype,"startDate",void 0),e([l({reflect:!0,attribute:"end-date"})],Q.prototype,"endDate",void 0),e([l({type:Boolean,reflect:!0})],Q.prototype,"open",void 0),e([l({reflect:!0})],Q.prototype,"min",void 0),e([l({reflect:!0})],Q.prototype,"max",void 0),e([l({reflect:!0})],Q.prototype,"today",void 0),e([l({reflect:!0,attribute:"first-day-of-week",type:Number})],Q.prototype,"firstDayOfWeek",void 0),e([l({attribute:!1})],Q.prototype,"isDateDisabled",void 0),e([l({attribute:!1})],Q.prototype,"isDateHighlighted",void 0),e([l({reflect:!0,type:Boolean,attribute:"hide-presets"})],Q.prototype,"hidePresets",void 0),e([l({attribute:!1})],Q.prototype,"presets",void 0),e([l({reflect:!0,type:Boolean})],Q.prototype,"inline",void 0),e([l({reflect:!0,attribute:"start-name"})],Q.prototype,"startName",void 0),e([l({reflect:!0,attribute:"end-name"})],Q.prototype,"endName",void 0),e([l({attribute:!1})],Q.prototype,"internalError",void 0),e([p()],Q.prototype,"pendingStart",void 0),e([p()],Q.prototype,"pendingEnd",void 0),e([p()],Q.prototype,"isNarrow",void 0),e([p()],Q.prototype,"presetsOpen",void 0),e([P("value")],Q.prototype,"handleValueObserve",null),e([P("startDate"),P("endDate")],Q.prototype,"handlePartObserve",null),Q=q=e([c("nord-date-range-picker")],Q);var U=Q;export{U as default};
+//# sourceMappingURL=DateRangePicker.js.map