npm - @nordhealth/components - Versions diffs - 4.6.0 → 4.8.0 - Mend

@nordhealth/components 4.6.0 → 4.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/custom-elements.json +4815 -4728
package/lib/CommandMenu.js +1 -1
package/lib/CommandMenu.js.map +1 -1
package/lib/DatePicker.js +1 -1
package/lib/Dropdown.js +1 -1
package/lib/Dropdown.js.map +1 -1
package/lib/Popout-DBLHeeXk.js +2 -0
package/lib/Popout-DBLHeeXk.js.map +1 -0
package/lib/Popout.js +1 -1
package/lib/bundle.js +8 -8
package/lib/bundle.js.map +1 -1
package/lib/index.js +1 -1
package/lib/react.d.ts +5 -0
package/lib/src/command-menu/CommandMenu.d.ts +14 -1
package/lib/src/command-menu/ICommandMenuAction.d.ts +1 -1
package/lib/src/dropdown/Dropdown.d.ts +4 -0
package/lib/src/popout/Popout.d.ts +4 -0
package/lib/vue.d.ts +5 -0
package/package.json +4 -3
package/lib/Popout-BnM-vhZ-.js +0 -2
package/lib/Popout-BnM-vhZ-.js.map +0 -1

package/lib/CommandMenu.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as t,html as i,nothing as n}from"lit";import{property as s,state as r,customElement as a}from"lit/decorators.js";import{repeat as l}from"lit/directives/repeat.js";import{createRef as c,ref as d}from"lit/directives/ref.js";import{classMap as p}from"lit/directives/class-map.js";import{ifDefined as m}from"lit/directives/if-defined.js";import{g as h}from"./collection-Dvg2XbxV.js";import{w as v}from"./number-Dg2vCfGd.js";import{N as u}from"./events-Bv6wNHwJ.js";import{L as f}from"./LightDismissController-4pH8cdko.js";import{KeyboardController as b}from"./KeyboardController.js";import x from"./Icon.js";import"./VisuallyHidden.js";import"./CommandMenuAction.js";import{SelectEvent as g}from"./SelectEvent.js";import{s as y}from"./Component-DSU3Qp0O.js";import{LocalizeController as w}from"./LocalizeController.js";import{c as z}from"./cond-CI1KbneT.js";import{o as k}from"./observe-D0n0zOfU.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./DirectionController-ChvNGESZ.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const j="keyboard-arrow-up-down";var $=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m8.29008 12.3413 1.41 1.42-3.96 3.95c-.2.19-.45.29-.71.29s-.51-.1-.71-.29l-3.990002-4 1.410002-1.42 2.26 2.25v-12.54002h2v12.63002zm11.38002-6.05002-4.01-4c-.39-.39-1.02-.39-1.41 0l-3.96 3.95 1.41 1.42 2.29-2.29v12.63002h2v-12.54002l2.26 2.25 1.41-1.42z" fill="currentColor"/></svg>',tags:"nordicon keyboard keys arrow up down shortcut",title:j});const C="keyboard-return";var _=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18.0025 4v8c0 1.1-.9 2-2 2h-12.59l3 3-1.41 1.41-4.71-4.7c-.39-.39-.39-1.02 0-1.41l4.71-4.71 1.41 1.41-3 3h12.59v-8h-4v-2h4c1.1 0 2 .9 2 2z" fill="currentColor"/></svg>',tags:"nordicon keyboard return key shortcut",title:C});const I="keyboard-backspace";var B=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-10.54c-.58 0-1.14.25-1.52.7l-5.14 6c-.65.75-.65 1.85 0 2.6l5.14 6c.38.44.93.7 1.52.7h10.54c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm0 14h-10.54l-5.14-6 5.14-6h10.54zm-9.54-3.88 2.12-2.12-2.12-2.12 1.41-1.41 2.12 2.12 2.12-2.12 1.41 1.41-2.12 2.12 2.12 2.12-1.41 1.41-2.12-2.12-2.12 2.12z" fill="currentColor"/></svg>',tags:"nordicon keyboard backspace back delete key shortcut",title:I});function E(e){var o;return(null===(o=e.activeElement)||void 0===o?void 0:o.shadowRoot)?E(e.activeElement.shadowRoot):e.activeElement||void 0}const R=o`:host{--_n-command-menu-inline-size:var(--n-command-menu-inline-size, 640px);--_n-command-menu-block-size:var(--n-command-menu-block-size, 290px);--_n-command-menu-block-start:var(--n-command-menu-block-start, 16%)}.n-modal{display:none;position:fixed;pointer-events:none;z-index:var(--n-index-modal);inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;overflow:auto}.n-modal.n-visible{display:block}.n-modal-content{position:relative;pointer-events:all;inset-block-start:var(--_n-command-menu-block-start);margin:auto;display:flex;flex-direction:column;min-inline-size:0;background:var(--n-color-surface);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-modal);max-inline-size:var(--_n-command-menu-inline-size);overflow:hidden}.n-bump{animation:zoom-in-zoom-out var(--n-transition-slowly)}@keyframes zoom-in-zoom-out{0%{transform:translateY(-10px) scale(.97);opacity:0}100%{transform:translateY(0) scale(1.0001);opacity:1}}.n-modal-footer{display:flex;gap:var(--n-space-s);padding:var(--n-space-s) var(--n-space-m);font-size:calc(var(--n-font-size-s) - 1px);color:var(--n-color-text-weaker)}.n-help{display:flex;align-items:center;gap:2px}.n-help+.n-help{padding-inline-start:var(--n-space-s);border-inline-start:1px solid var(--n-color-border-strong)}.n-help nord-icon{--_n-icon-size:10px;color:currentColor;margin:3px 4px}.n-help.n-backspace nord-icon{--_n-icon-size:12px}.n-search-wrapper{display:flex;border-block-end:1px solid var(--n-color-border)}[role=combobox]{flex:1;font-size:var(--n-font-size-l);font-weight:var(--n-font-weight);font-family:inherit;background:0 0;color:var(--n-color-text);border:none;border-radius:0;appearance:none;outline:0;margin:0;padding:var(--n-space-m)}[role=combobox]::-webkit-input-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=combobox]::-moz-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=combobox]::-ms-input-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=listbox]{max-block-size:var(--_n-command-menu-block-size);overflow:auto;margin:0;padding:0}.n-group-header{line-height:var(--n-line-height);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-s)/ 1.4) var(--n-space-m);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:var(--n-font-size-s);background:var(--n-color-surface-raised);font-weight:var(--n-font-weight-active);color:var(--n-color-text-weaker)}.n-command-empty{display:flex;flex:1;flex-direction:column;border-inline-start:2px solid transparent;align-items:flex-start;color:var(--n-color-text);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-command-empty .n-title{flex:1;margin-block-start:var(--n-space-s);margin-inline-end:var(--n-space-xs);max-inline-size:100%;font-size:var(--n-font-size-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-command-empty .n-tip{flex:1;margin-block-start:var(--n-space-s);margin-block-end:var(--n-space-m);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker)}`;x.registerIcon($),x.registerIcon(_),x.registerIcon(B);let O=class extends t{constructor(){super(...arguments),this.inputRef=c(),this.listRef=c(),this.localize=new w(this),this.dismissController=new f(this,{isOpen:()=>this.open,onDismiss:()=>this.close()}),this.keyboardController=new b(this,{trigger:()=>this.select(),goBack:()=>this.goBack(),end:()=>this.end(),start:()=>this.start(),next:()=>this.next(),previous:()=>this.previous(),toggleOpen:()=>this.toggleOpen()}),this.open=!1,this.commands=[],this.search="",this.bump=!0,this.selectedIndex=0,this.filteredCommands=[]}get selected(){return this.filteredCommands[this.selectedIndex]}show(e={}){this.dispatchEvent(new u("open",{cancelable:!0}))&&(this.open=!0,this.setParent(e.parent))}close(){var e;this.open=!1,null===(e=this.previousFocus)||void 0===e||e.focus(),this.previousFocus=void 0,this.dispatchEvent(new u("close"))}toggleOpen(){this.open?this.close():this.show()}focus(){var e;null===(e=this.inputRef.value)||void 0===e||e.focus()}render(){var e;const o=h(this.filteredCommands,"section"),t=0===this.filteredCommands.length?"no-results":null===(e=this.selected)||void 0===e?void 0:e.id;return i`<div class="${p({"n-visible":this.open,"n-modal":!0})}"><div @animationend="${this.handleAnimationEnd}" class="${p({"n-bump":this.bump,"n-modal-content":!0})}"><div class="n-search-wrapper"><nord-visually-hidden id="instructions">${this.localize.term("instructions")}</nord-visually-hidden><input type="text" id="search" @input="${this.handleInput}" @blur="${this.handleBlur}" ${d(this.inputRef)} placeholder="${this.localize.term("placeholder")}" .value="${this.search}" spellcheck="false" autocomplete="off" autocapitalize="off" aria-label="${this.localize.term("inputLabel")}" aria-autocomplete="list" aria-haspopup="listbox" role="combobox" aria-controls="list" aria-expanded="true" aria-activedescendant="${m(t)}" aria-describedby="instructions"></div><div class="n-modal-body"><div id="list" ${d(this.listRef)} role="listbox" aria-label="${this.localize.term("inputLabel")}">${0===this.filteredCommands.length?this.renderNoResults():Array.from(o,(([e,o])=>this.renderSection(e,o)))}</div></div><slot name="footer"><div class="n-modal-footer"><span class="n-help"><nord-icon label="Arrow keys" name="${j}"></nord-icon>${this.localize.term("footerArrowKeys")} </span><span class="n-help"><nord-icon label="Enter key" name="${C}"></nord-icon>${this.localize.term("footerEnterKey")} </span><span class="n-help">${this.localize.term("footerEscapeKey")}</span> <span class="n-help n-backspace"><nord-icon label="Backspace key" name="${I}"></nord-icon>${this.localize.term("footerBackspaceKey")}</span></div></slot></div></div>`}renderNoResults(){return i`<div id="no-results" class="n-command-empty" role="option" aria-selected="true"><div class="n-title">${this.localize.term("noResults",this.search)}</div><div class="n-tip">${this.localize.term("tip")}</div></div>`}renderSection(e,o){const t=`section-${e}`;return i`<div role="group" aria-labelledby="${z(e,t)}">${e?i`<div class="n-group-header" role="presentation" id="${t}">${e}</div>`:n} ${l(o,(e=>e.id),(e=>{var o,t;return i`<nord-command-menu-action id="${e.id}" .command="${e}" ?selected="${this.open&&e.id===(null===(o=this.selected)||void 0===o?void 0:o.id)}" @click="${()=>this.select(e)}" role="option" aria-selected="${z(e.id===(null===(t=this.selected)||void 0===t?void 0:t.id),"true")}"></nord-command-menu-action>`}))}</div>`}handleCommandsChange(){this.keyboardController.registerCommandShortcuts()}handleBump(){this.open&&(this.bump=!0)}focusOnOpen(){this.open&&(this.previousFocus=E(document),this.focus(),this.listRef.value&&(this.listRef.value.scrollTop=0))}handleAnimationEnd(){this.bump=!1}handleBlur(){this.open&&this.focus()}handleInput(e){const o=e.target;this.setSearch(o.value)}select(e=this.selected){var o;this.commands.some((o=>o.parent===e.id))?(this.setParent(e.id),this.bump=!0,this.focus()):this.close(),this.setSearch(""),null===(o=e.handler)||void 0===o||o.call(e,this);const t=new g(e);this.dispatchEvent(t)}start(){this.selectedIndex=0}end(){this.selectedIndex=this.filteredCommands.length-1}next(){this.selectedIndex=v(this.selectedIndex+1,0,this.filteredCommands.length-1)}previous(){this.selectedIndex=v(this.selectedIndex-1,0,this.filteredCommands.length-1)}goBack(){if(!this.search&&this.parent){const e=this.commands.find((e=>e.id===this.parent));this.setParent(null==e?void 0:e.parent)}}setParent(e){this.parent=e,this.setSearch("")}setSearch(e){this.search=e,this.selectedIndex=0}filterCommands(){const e=this.search.toLocaleLowerCase().split(/\s+/),o=[...h(this.commands,"section").values()].flat();this.filteredCommands=o.filter((({title:o,keywords:t="",parent:i})=>{const n=`${o} ${t}`.toLocaleLowerCase(),s=e.every((e=>n.includes(e)));return(!this.parent&&this.search||i==this.parent)&&s}))}};O.styles=[y,R],e([s({reflect:!0,type:Boolean})],O.prototype,"open",void 0),e([s({type:Array,attribute:!1})],O.prototype,"commands",void 0),e([r()],O.prototype,"parent",void 0),e([r()],O.prototype,"search",void 0),e([r()],O.prototype,"bump",void 0),e([r()],O.prototype,"selectedIndex",void 0),e([r()],O.prototype,"filteredCommands",void 0),e([k("commands")],O.prototype,"handleCommandsChange",null),e([k("open")],O.prototype,"handleBump",null),e([k("open","updated")],O.prototype,"focusOnOpen",null),e([k("search"),k("parent"),k("commands")],O.prototype,"filterCommands",null),O=e([a("nord-command-menu")],O);var L=O;export{L 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{repeat as l}from"lit/directives/repeat.js";import{createRef as c,ref as d}from"lit/directives/ref.js";import{classMap as p}from"lit/directives/class-map.js";import{ifDefined as m}from"lit/directives/if-defined.js";import{g as h}from"./collection-Dvg2XbxV.js";import{w as v}from"./number-Dg2vCfGd.js";import{N as u}from"./events-Bv6wNHwJ.js";import{L as f}from"./LightDismissController-4pH8cdko.js";import{KeyboardController as b}from"./KeyboardController.js";import x from"./Icon.js";import"./VisuallyHidden.js";import"./CommandMenuAction.js";import{SelectEvent as g}from"./SelectEvent.js";import{s as y}from"./Component-DSU3Qp0O.js";import{LocalizeController as w}from"./LocalizeController.js";import{c as z}from"./cond-CI1KbneT.js";import{o as k}from"./observe-D0n0zOfU.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./DirectionController-ChvNGESZ.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const j="keyboard-arrow-up-down";var $=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m8.29008 12.3413 1.41 1.42-3.96 3.95c-.2.19-.45.29-.71.29s-.51-.1-.71-.29l-3.990002-4 1.410002-1.42 2.26 2.25v-12.54002h2v12.63002zm11.38002-6.05002-4.01-4c-.39-.39-1.02-.39-1.41 0l-3.96 3.95 1.41 1.42 2.29-2.29v12.63002h2v-12.54002l2.26 2.25 1.41-1.42z" fill="currentColor"/></svg>',tags:"nordicon keyboard keys arrow up down shortcut",title:j});const C="keyboard-return";var _=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18.0025 4v8c0 1.1-.9 2-2 2h-12.59l3 3-1.41 1.41-4.71-4.7c-.39-.39-.39-1.02 0-1.41l4.71-4.71 1.41 1.41-3 3h12.59v-8h-4v-2h4c1.1 0 2 .9 2 2z" fill="currentColor"/></svg>',tags:"nordicon keyboard return key shortcut",title:C});const I="keyboard-backspace";var B=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-10.54c-.58 0-1.14.25-1.52.7l-5.14 6c-.65.75-.65 1.85 0 2.6l5.14 6c.38.44.93.7 1.52.7h10.54c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm0 14h-10.54l-5.14-6 5.14-6h10.54zm-9.54-3.88 2.12-2.12-2.12-2.12 1.41-1.41 2.12 2.12 2.12-2.12 1.41 1.41-2.12 2.12 2.12 2.12-1.41 1.41-2.12-2.12-2.12 2.12z" fill="currentColor"/></svg>',tags:"nordicon keyboard backspace back delete key shortcut",title:I});function E(e){var t;return(null===(t=e.activeElement)||void 0===t?void 0:t.shadowRoot)?E(e.activeElement.shadowRoot):e.activeElement||void 0}const O=t`:host{--_n-command-menu-inline-size:var(--n-command-menu-inline-size, 640px);--_n-command-menu-block-size:var(--n-command-menu-block-size, 290px);--_n-command-menu-block-start:var(--n-command-menu-block-start, 16%)}.n-modal{display:none;position:fixed;pointer-events:none;z-index:var(--n-index-modal);inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;overflow:auto}.n-modal.n-visible{display:block}.n-modal-content{position:relative;pointer-events:all;inset-block-start:var(--_n-command-menu-block-start);margin:auto;display:flex;flex-direction:column;min-inline-size:0;background:var(--n-color-surface);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-modal);max-inline-size:var(--_n-command-menu-inline-size);overflow:hidden}.n-bump{animation:zoom-in-zoom-out var(--n-transition-slowly)}@keyframes zoom-in-zoom-out{0%{transform:translateY(-10px) scale(.97);opacity:0}100%{transform:translateY(0) scale(1.0001);opacity:1}}.n-modal-footer{display:flex;gap:var(--n-space-s);padding:var(--n-space-s) var(--n-space-m);font-size:calc(var(--n-font-size-s) - 1px);color:var(--n-color-text-weaker)}.n-help{display:flex;align-items:center;gap:2px}.n-help+.n-help{padding-inline-start:var(--n-space-s);border-inline-start:1px solid var(--n-color-border-strong)}.n-help nord-icon{--_n-icon-size:10px;color:currentColor;margin:3px 4px}.n-help.n-backspace nord-icon{--_n-icon-size:12px}.n-search-wrapper{display:flex;border-block-end:1px solid var(--n-color-border)}[role=combobox]{flex:1;font-size:var(--n-font-size-l);font-weight:var(--n-font-weight);font-family:inherit;background:0 0;color:var(--n-color-text);border:none;border-radius:0;appearance:none;outline:0;margin:0;padding:var(--n-space-m)}[role=combobox]::-webkit-input-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=combobox]::-moz-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=combobox]::-ms-input-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=listbox]{max-block-size:var(--_n-command-menu-block-size);overflow:auto;margin:0;padding:0}.n-group-header{line-height:var(--n-line-height);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-s)/ 1.4) var(--n-space-m);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:var(--n-font-size-s);background:var(--n-color-surface-raised);font-weight:var(--n-font-weight-active);color:var(--n-color-text-weaker)}.n-command-empty{display:flex;flex:1;flex-direction:column;border-inline-start:2px solid transparent;align-items:flex-start;color:var(--n-color-text);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-command-empty .n-title{flex:1;margin-block-start:var(--n-space-s);margin-inline-end:var(--n-space-xs);max-inline-size:100%;font-size:var(--n-font-size-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-command-empty .n-tip{flex:1;margin-block-start:var(--n-space-s);margin-block-end:var(--n-space-m);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker)}`;x.registerIcon($),x.registerIcon(_),x.registerIcon(B);let S=class extends o{constructor(){super(...arguments),this.inputRef=c(),this.listRef=c(),this.localize=new w(this),this.dismissController=new f(this,{isOpen:()=>this.open,onDismiss:()=>this.close()}),this.keyboardController=new b(this,{trigger:()=>this.select(),goBack:()=>this.goBack(),end:()=>this.end(),start:()=>this.start(),next:()=>this.next(),previous:()=>this.previous(),toggleOpen:()=>this.toggleOpen()}),this.open=!1,this.externalFiltering=!1,this.exitNestedOnSearch=!1,this.commands=[],this.searchQuery="",this.bump=!0,this.selectedIndex=0,this.filteredCommands=[]}get selected(){return this.filteredCommands[this.selectedIndex]}show(e={}){this.dispatchEvent(new u("open",{cancelable:!0}))&&(this.open=!0,this.setParent(e.parent))}close(){var e;this.open=!1,null===(e=this.previousFocus)||void 0===e||e.focus(),this.previousFocus=void 0,this.dispatchEvent(new u("close"))}toggleOpen(){this.open?this.close():this.show()}focus(){var e;null===(e=this.inputRef.value)||void 0===e||e.focus()}render(){var e;const t=h(this.filteredCommands,"section"),o=0===this.filteredCommands.length?"no-results":null===(e=this.selected)||void 0===e?void 0:e.id;return i`<div class="${p({"n-visible":this.open,"n-modal":!0})}"><div @animationend="${this.handleAnimationEnd}" class="${p({"n-bump":this.bump,"n-modal-content":!0})}"><div class="n-search-wrapper"><nord-visually-hidden id="instructions">${this.localize.term("instructions")}</nord-visually-hidden><input type="text" id="search" @input="${this.handleInput}" @blur="${this.handleBlur}" ${d(this.inputRef)} placeholder="${this.localize.term("placeholder")}" .value="${this.searchQuery}" spellcheck="false" autocomplete="off" autocapitalize="off" aria-label="${this.localize.term("inputLabel")}" aria-autocomplete="list" aria-haspopup="listbox" role="combobox" aria-controls="list" aria-expanded="true" aria-activedescendant="${m(o)}" aria-describedby="instructions"></div><div class="n-modal-body"><div id="list" ${d(this.listRef)} role="listbox" aria-label="${this.localize.term("inputLabel")}">${0===this.filteredCommands.length?this.renderNoResults():Array.from(t,(([e,t])=>this.renderSection(e,t)))}</div></div><slot name="footer"><div class="n-modal-footer"><span class="n-help"><nord-icon label="Arrow keys" name="${j}"></nord-icon>${this.localize.term("footerArrowKeys")} </span><span class="n-help"><nord-icon label="Enter key" name="${C}"></nord-icon>${this.localize.term("footerEnterKey")} </span><span class="n-help">${this.localize.term("footerEscapeKey")}</span> <span class="n-help n-backspace"><nord-icon label="Backspace key" name="${I}"></nord-icon>${this.localize.term("footerBackspaceKey")}</span></div></slot></div></div>`}renderNoResults(){return i`<div id="no-results" class="n-command-empty" role="option" aria-selected="true"><div class="n-title">${this.localize.term("noResults",this.searchQuery)}</div><div class="n-tip">${this.localize.term("tip")}</div></div>`}renderSection(e,t){const o=`section-${e}`;return i`<div role="group" aria-labelledby="${z(e,o)}">${e?i`<div class="n-group-header" role="presentation" id="${o}">${e}</div>`:n} ${l(t,(e=>e.id),(e=>{var t,o;return i`<nord-command-menu-action id="${e.id}" .command="${e}" ?selected="${this.open&&e.id===(null===(t=this.selected)||void 0===t?void 0:t.id)}" @click="${()=>this.select(e)}" role="option" aria-selected="${z(e.id===(null===(o=this.selected)||void 0===o?void 0:o.id),"true")}"></nord-command-menu-action>`}))}</div>`}handleCommandsChange(){this.keyboardController.registerCommandShortcuts()}handleBump(){this.open&&(this.bump=!0)}focusOnOpen(){this.open&&(this.previousFocus=E(document),this.focus(),this.listRef.value&&(this.listRef.value.scrollTop=0))}handleAnimationEnd(){this.bump=!1}handleBlur(){this.open&&this.focus()}handleInput(e){e.stopPropagation();const t=e.target;this.setSearch(t.value),this.exitNestedOnSearch&&t.value&&this.parent&&(this.parent=void 0),this.dispatchEvent(new u("input"))}select(e=this.selected){var t;this.commands.some((t=>t.parent===e.id))?(this.setParent(e.id),this.bump=!0,this.focus()):this.close(),this.setSearch(""),null===(t=e.handler)||void 0===t||t.call(e,this);const o=new g(e);this.dispatchEvent(o)}start(){this.selectedIndex=0}end(){this.selectedIndex=this.filteredCommands.length-1}next(){this.selectedIndex=v(this.selectedIndex+1,0,this.filteredCommands.length-1)}previous(){this.selectedIndex=v(this.selectedIndex-1,0,this.filteredCommands.length-1)}goBack(){if(!this.searchQuery&&this.parent){const e=this.commands.find((e=>e.id===this.parent));this.setParent(null==e?void 0:e.parent)}}setParent(e){this.parent=e,this.setSearch("")}setSearch(e){this.searchQuery=e,this.selectedIndex=0}filterCommands(){const e=[...h(this.commands,"section").values()].flat();if(this.externalFiltering)return void(this.filteredCommands=e.filter((({parent:e})=>e==this.parent)));const t=this.searchQuery.toLocaleLowerCase().split(/\s+/);this.filteredCommands=e.filter((({title:e,keywords:o="",parent:i})=>{const n=`${e} ${o}`.toLocaleLowerCase(),r=t.every((e=>n.includes(e)));return!this.parent&&this.searchQuery?r&&!i:i==this.parent&&r}))}};S.styles=[y,O],e([r({reflect:!0,type:Boolean})],S.prototype,"open",void 0),e([r({reflect:!0,type:Boolean,attribute:"external-filtering"})],S.prototype,"externalFiltering",void 0),e([r({reflect:!0,type:Boolean,attribute:"exit-nested-on-search"})],S.prototype,"exitNestedOnSearch",void 0),e([r({type:Array,attribute:!1})],S.prototype,"commands",void 0),e([r({type:String,attribute:!1})],S.prototype,"searchQuery",void 0),e([s()],S.prototype,"parent",void 0),e([s()],S.prototype,"bump",void 0),e([s()],S.prototype,"selectedIndex",void 0),e([s()],S.prototype,"filteredCommands",void 0),e([k("commands")],S.prototype,"handleCommandsChange",null),e([k("open")],S.prototype,"handleBump",null),e([k("open","updated")],S.prototype,"focusOnOpen",null),e([k("searchQuery"),k("parent"),k("commands"),k("externalFiltering")],S.prototype,"filterCommands",null),S=e([a("nord-command-menu")],S);var R=S;export{R as default};
 //# sourceMappingURL=CommandMenu.js.map

package/lib/CommandMenu.js.map CHANGED Viewed

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

package/lib/DatePicker.js CHANGED Viewed

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

package/lib/Dropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,LitElement as n}from"lit";import{query as r,property as s,customElement as d}from"lit/decorators.js";import{ifDefined as i}from"lit/directives/if-defined.js";import{S as a}from"./SlotController-Z6eG7LSZ.js";import{F as l}from"./Popout-BnM-vhZ-.js";import{o as p}from"./observe-D0n0zOfU.js";import{s as c}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";import"./positioning-CsfLhMSW.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-C5CMxfb3.js";import"./events-Bv6wNHwJ.js";import"./DirectionController-ChvNGESZ.js";const h=e`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px);--_n-dropdown-max-block-size:var(--n-dropdown-max-block-size, 460px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:var(--_n-dropdown-max-block-size);overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size="s"]){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size="l"]){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(l(n)){constructor(){super(...arguments),this.headerSlot=new a(this,"header"),this.headerEndSlot=new a(this,"header-end"),this.expand=!1,this.size="m"}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]');null==o||o.setAttribute("aria-haspopup","true")}render(){return t`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${i(this.align)}" position="${i(this.position)}" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}"><div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){this.open=!0}handleClose(){this.open=!1}handleOpenChange(){var o;if(this.open){const e=null!==(o=this.querySelector("[autofocus]"))&&void 0!==o?o:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}}hide(o){return this.popout.hide(o)}show(){return this.popout.show()}};m.styles=[c,h],m.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([r(".n-dropdown-content")],m.prototype,"list",void 0),o([r("nord-popout",!0)],m.prototype,"popout",void 0),o([s({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),o([s({reflect:!0})],m.prototype,"size",void 0),o([p("open","updated")],m.prototype,"handleOpenChange",null),m=o([d("nord-dropdown")],m);var u=m;export{u as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,LitElement as n}from"lit";import{query as r,property as s,customElement as d}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{S as i}from"./SlotController-Z6eG7LSZ.js";import{F as l}from"./Popout-DBLHeeXk.js";import{o as p}from"./observe-D0n0zOfU.js";import{s as c}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";import"./positioning-CsfLhMSW.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-C5CMxfb3.js";import"./events-Bv6wNHwJ.js";import"./DirectionController-ChvNGESZ.js";const h=e`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px);--_n-dropdown-max-block-size:var(--n-dropdown-max-block-size, 460px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:var(--_n-dropdown-max-block-size);overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size="s"]){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size="l"]){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(l(n)){constructor(){super(...arguments),this.headerSlot=new i(this,"header"),this.headerEndSlot=new i(this,"header-end"),this.expand=!1,this.size="m",this.alwaysFloating=!1}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]');null==o||o.setAttribute("aria-haspopup","true")}render(){return t`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${a(this.align)}" position="${a(this.position)}" ?open="${this.open}" ?always-floating="${this.alwaysFloating}" @open="${this.handleOpen}" @close="${this.handleClose}"><div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){this.open=!0}handleClose(){this.open=!1}handleOpenChange(){var o;if(this.open){const e=null!==(o=this.querySelector("[autofocus]"))&&void 0!==o?o:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}}hide(o){return this.popout.hide(o)}show(){return this.popout.show()}};m.styles=[c,h],m.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([r(".n-dropdown-content")],m.prototype,"list",void 0),o([r("nord-popout",!0)],m.prototype,"popout",void 0),o([s({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),o([s({reflect:!0})],m.prototype,"size",void 0),o([s({reflect:!0,type:Boolean,attribute:"always-floating"})],m.prototype,"alwaysFloating",void 0),o([p("open","updated")],m.prototype,"handleOpenChange",null),m=o([d("nord-dropdown")],m);var u=m;export{u as default};
 //# sourceMappingURL=Dropdown.js.map

package/lib/Dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { FloatingMixin } from \"../common/mixins/FloatingComponentMixin.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport type Popout from \"../popout/Popout.js\"\nimport \"../popout/Popout.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Dropdown.css\"\n\n/*\n Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n \n @status ready\n * @category action\n \n @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n * @slot header - Optional slot that holds a header for the dropdown.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n \n @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n \n @cssprop [--n-dropdown-size=250px] - Controls the inline size, or width, of the dropdown. Will resize up to 1.5 times to account for larger content.\n * @cssprop [--n-dropdown-max-block-size=460px] - Controls the maximum block size, or height, of the dropdown. Larger content will get a scrollbar.\n /\n@customElement(\"nord-dropdown\")\nexport default class Dropdown extends FloatingMixin(LitElement) {\n static styles = [componentStyle, style]\n\n /\n we delegate focus, to ensure focus does not move to body if you click\n * some whitespace or a dropdown-group heading, as this would close the dropdown\n * @internal\n /\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n private headerSlot = new SlotController(this, \"header\")\n private headerEndSlot = new SlotController(this, \"header-end\")\n\n @query(\".n-dropdown-content\") private list!: HTMLElement\n @query(\"nord-popout\", true) private popout!: Popout\n\n /\n Controls whether the toggle slot expands to fill the width of its container.\n /\n @property({ reflect: true, type: Boolean }) expand = false\n\n /\n The size of the dropdown. This affects the minimum and maximum inline-size\n * of the dropdown.\n /\n @property({ reflect: true }) size: \"s\" \| \"m\" \| \"l\" = \"m\"\n\n connectedCallback() {\n super.connectedCallback()\n\n const toggle = this.querySelector(`[slot=\"toggle\"]`)\n toggle?.setAttribute(\"aria-haspopup\", \"true\")\n }\n\n render() {\n return html`\n <div class=\"n-dropdown\" @focusout=${this.handleBlur}>\n <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n <nord-popout\n id=\"popout\"\n align=${ifDefined(this.align)}\n position=${ifDefined(this.position)}\n ?open=${this.open}\n @open=${this.handleOpen}\n @close=${this.handleClose}\n >\n <div class=\"n-dropdown-header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n <slot name=${this.headerSlot.slotName}></slot>\n <slot name=${this.headerEndSlot.slotName}></slot>\n </div>\n <div class=\"n-dropdown-content\">\n <slot></slot>\n </div>\n </nord-popout>\n </div>\n `\n }\n\n private handleBlur(e: FocusEvent) {\n const relatedTarget = e.relatedTarget as Node\n\n // Safari will set relatedTarget to null when clicking on the trigger button\n // because it doesn't focus buttons on click.\n // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n // so we only run this logic if relatedTarget is set, which sidesteps this issue\n if (relatedTarget && !this.contains(relatedTarget)) {\n this.popout.hide(false)\n }\n }\n\n private handleOpen() {\n this.open = true\n }\n\n private handleClose() {\n this.open = false\n }\n\n @observe(\"open\", \"updated\")\n protected handleOpenChange() {\n if (this.open) {\n const focusTarget =\n this.querySelector<HTMLElement>(\"[autofocus]\") ??\n this.querySelector<HTMLElement>(\"nord-dropdown-item, nord-message\")\n\n focusTarget?.focus()\n this.list.scrollTop = 0\n }\n }\n\n /\n Hide the dropdown programmatically.\n * This method delegates to the Dropdown's internal Popout component.\n * See [Popout's hide() method](/components/popout#methods-hide) for more details.\n * @param moveFocusToButton A boolean option to move the focus to the original button that opens the dropdown.\n /\n hide(moveFocusToButton?: boolean): Promise<TransitionEvent \| void> {\n return this.popout.hide(moveFocusToButton)\n }\n\n /\n Show the dropdown programmatically.\n * This method delegates to the Dropdown's internal Popout component.\n * See [Popout's show() method](/components/popout#methods-hide) for more details.\n */\n show(): Promise<TransitionEvent \| void> {\n return this.popout.show()\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-dropdown\": Dropdown\n }\n}\n"],"names":["Dropdown","FloatingMixin","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","expand","size","connectedCallback","super","toggle","querySelector","setAttribute","render","html","handleBlur","ifDefined","align","position","open","handleOpen","handleClose","isEmpty","slotName","e","relatedTarget","contains","popout","hide","handleOpenChange","focusTarget","_a","focus","list","scrollTop","moveFocusToButton","show","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","reflect","type","Boolean","observe","customElement"],"mappings":"smFAiCe,IAAMA,EAAN,cAAuBC,EAAcC,IAArC,WAAAC,uBAULC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAaG,cAAG,IAAID,EAAeF,KAAM,cAQLA,KAAMI,QAAG,EAMxBJ,KAAIK,KAAoB,~~GAmFtD~~,~~CAjFC~~,iBAAAC,GACEC,MAAMD,oBAEN,MAAME,~~EAASR~~,~~KAAKS~~,cAAc,mBAClCD,SAAAA,EAAQE,aAAa,gBAAiB,OACvC,CAED,MAAAC,GACE,OAAOC,CAAI,~~sCAC2BZ~~,~~KAAKa~~,iGAI7BC,~~EAAUd~~,~~KAAKe~~,qBACZD,~~EAAUd~~,~~KAAKgB,qBAClBhB,~~KAAKiB,~~gBACLjB~~,KAAKkB,~~uBACJlB~~,KAAKmB,~~wDAE2BnB~~,KAAKC,~~WAAWmB~~,~~SAAWpB~~,KAAKG,~~cAAciB~~,~~wBACxEpB~~,KAAKC,~~WAAWoB~~,~~gCAChBrB~~,KAAKG,~~cAAckB~~,gGAQzC,CAEO,UAAAR,CAAWS,GACjB,MAAMC,EAAgBD,EAAEC,cAMpBA,~~IAAkBvB~~,~~KAAKwB~~,SAASD,~~IAClCvB~~,~~KAAKyB~~,OAAOC,MAAK,EAEpB,CAEO,UAAAR,~~GACNlB~~,~~KAAKiB~~,MAAO,CACb,CAEO,WAAAE,~~GACNnB~~,~~KAAKiB~~,MAAO,CACb,CAGS,gBAAAU,SACR,~~GAAI3B~~,~~KAAKiB~~,KAAM,CACb,MAAMW,EAC0C,QAA9CC,~~EAAA7B~~,~~KAAKS~~,cAA2B,sBAAc,IAAAoB,EAAAA,~~EAC9C7B~~,~~KAAKS~~,cAA2B,oCAElCmB,SAAAA,EAAaE,~~QACb9B,KAAK+~~B,KAAKC,UAAY,CACvB,CACF,CAQD,IAAAN,CAAKO,GACH,~~OAAOjC~~,~~KAAKyB~~,OAAOC,KAAKO,EACzB,CAOD,IAAAC,GACE,~~OAAOlC~~,~~KAAKyB~~,OAAOS,MACpB,~~GA1GMtC~~,~~EAAAuC~~,OAAS,CAACC,EAAgBC,~~GAO1BzC~~,~~EAAA0C~~,kBAAoB,~~IAAKxC~~,~~EAAWwC~~,kBAAmBC,gBAAgB,GAKxCC,EAAA,CAArCC,EAAM,~~wBAAiD7C~~,~~EAAA8C~~,UAAA,YAAA,GACpBF,EAAA,CAAnCC,EAAM,eAAe,~~IAA6B7C~~,~~EAAA8C~~,UAAA,cAAA,GAKPF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,~~WAAyBlD~~,~~EAAA8C~~,UAAA,cAAA,GAM7BF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,~~KAAmChD~~,~~EAAA8C~~,UAAA,YAAA,~~GAsD9CF~~,EAAA,~~CADTO~~,EAAQ,OAAQ,~~YAUhBnD~~,~~EAAA8C~~,UAAA,mBAAA,~~MAxFkB9C~~,~~EAAQ4C~~,EAAA,~~CAD5BQ~~,EAAc,~~kBACMpD~~,SAAAA"}
1	+ {"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { FloatingMixin } from \"../common/mixins/FloatingComponentMixin.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport type Popout from \"../popout/Popout.js\"\nimport \"../popout/Popout.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Dropdown.css\"\n\n/*\n Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n \n @status ready\n * @category action\n \n @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n * @slot header - Optional slot that holds a header for the dropdown.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n \n @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n \n @cssprop [--n-dropdown-size=250px] - Controls the inline size, or width, of the dropdown. Will resize up to 1.5 times to account for larger content.\n * @cssprop [--n-dropdown-max-block-size=460px] - Controls the maximum block size, or height, of the dropdown. Larger content will get a scrollbar.\n /\n@customElement(\"nord-dropdown\")\nexport default class Dropdown extends FloatingMixin(LitElement) {\n static styles = [componentStyle, style]\n\n /\n we delegate focus, to ensure focus does not move to body if you click\n * some whitespace or a dropdown-group heading, as this would close the dropdown\n * @internal\n /\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n private headerSlot = new SlotController(this, \"header\")\n private headerEndSlot = new SlotController(this, \"header-end\")\n\n @query(\".n-dropdown-content\") private list!: HTMLElement\n @query(\"nord-popout\", true) private popout!: Popout\n\n /\n Controls whether the toggle slot expands to fill the width of its container.\n /\n @property({ reflect: true, type: Boolean }) expand = false\n\n /\n The size of the dropdown. This affects the minimum and maximum inline-size\n * of the dropdown.\n /\n @property({ reflect: true }) size: \"s\" \| \"m\" \| \"l\" = \"m\"\n\n /\n Set to true to always display the dropdown as a floating overlay, even on smaller viewports.\n /\n @property({ reflect: true, type: Boolean, attribute: \"always-floating\" }) alwaysFloating: boolean = false\n\n connectedCallback() {\n super.connectedCallback()\n\n const toggle = this.querySelector(`[slot=\"toggle\"]`)\n toggle?.setAttribute(\"aria-haspopup\", \"true\")\n }\n\n render() {\n return html`\n <div class=\"n-dropdown\" @focusout=${this.handleBlur}>\n <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n <nord-popout\n id=\"popout\"\n align=${ifDefined(this.align)}\n position=${ifDefined(this.position)}\n ?open=${this.open}\n ?always-floating=${this.alwaysFloating}\n @open=${this.handleOpen}\n @close=${this.handleClose}\n >\n <div class=\"n-dropdown-header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n <slot name=${this.headerSlot.slotName}></slot>\n <slot name=${this.headerEndSlot.slotName}></slot>\n </div>\n <div class=\"n-dropdown-content\">\n <slot></slot>\n </div>\n </nord-popout>\n </div>\n `\n }\n\n private handleBlur(e: FocusEvent) {\n const relatedTarget = e.relatedTarget as Node\n\n // Safari will set relatedTarget to null when clicking on the trigger button\n // because it doesn't focus buttons on click.\n // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n // so we only run this logic if relatedTarget is set, which sidesteps this issue\n if (relatedTarget && !this.contains(relatedTarget)) {\n this.popout.hide(false)\n }\n }\n\n private handleOpen() {\n this.open = true\n }\n\n private handleClose() {\n this.open = false\n }\n\n @observe(\"open\", \"updated\")\n protected handleOpenChange() {\n if (this.open) {\n const focusTarget =\n this.querySelector<HTMLElement>(\"[autofocus]\") ??\n this.querySelector<HTMLElement>(\"nord-dropdown-item, nord-message\")\n\n focusTarget?.focus()\n this.list.scrollTop = 0\n }\n }\n\n /\n Hide the dropdown programmatically.\n * This method delegates to the Dropdown's internal Popout component.\n * See [Popout's hide() method](/components/popout#methods-hide) for more details.\n * @param moveFocusToButton A boolean option to move the focus to the original button that opens the dropdown.\n /\n hide(moveFocusToButton?: boolean): Promise<TransitionEvent \| void> {\n return this.popout.hide(moveFocusToButton)\n }\n\n /\n Show the dropdown programmatically.\n * This method delegates to the Dropdown's internal Popout component.\n * See [Popout's show() method](/components/popout#methods-hide) for more details.\n */\n show(): Promise<TransitionEvent \| void> {\n return this.popout.show()\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-dropdown\": Dropdown\n }\n}\n"],"names":["Dropdown","FloatingMixin","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","expand","size","alwaysFloating","connectedCallback","super","toggle","querySelector","setAttribute","render","html","handleBlur","ifDefined","align","position","open","handleOpen","handleClose","isEmpty","slotName","e","relatedTarget","contains","popout","hide","handleOpenChange","focusTarget","_a","focus","list","scrollTop","moveFocusToButton","show","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"smFAiCe,IAAMA,EAAN,cAAuBC,EAAcC,IAArC,WAAAC,uBAULC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAaG,cAAG,IAAID,EAAeF,KAAM,cAQLA,KAAMI,QAAG,EAMxBJ,KAAIK,KAAoB,IAKqBL,KAAcM,gBAAY,CAoFrG,CAlFC,iBAAAC,GACEC,MAAMD,oBAEN,MAAME,EAAST,KAAKU,cAAc,mBAClCD,SAAAA,EAAQE,aAAa,gBAAiB,OACvC,CAED,MAAAC,GACE,OAAOC,CAAI,sCAC2Bb,KAAKc,iGAI7BC,EAAUf,KAAKgB,qBACZD,EAAUf,KAAKiB,qBAClBjB,KAAKkB,2BACMlB,KAAKM,0BAChBN,KAAKmB,uBACJnB,KAAKoB,wDAE2BpB,KAAKC,WAAWoB,SAAWrB,KAAKG,cAAckB,wBACxErB,KAAKC,WAAWqB,gCAChBtB,KAAKG,cAAcmB,gGAQzC,CAEO,UAAAR,CAAWS,GACjB,MAAMC,EAAgBD,EAAEC,cAMpBA,IAAkBxB,KAAKyB,SAASD,IAClCxB,KAAK0B,OAAOC,MAAK,EAEpB,CAEO,UAAAR,GACNnB,KAAKkB,MAAO,CACb,CAEO,WAAAE,GACNpB,KAAKkB,MAAO,CACb,CAGS,gBAAAU,SACR,GAAI5B,KAAKkB,KAAM,CACb,MAAMW,EAC0C,QAA9CC,EAAA9B,KAAKU,cAA2B,sBAAc,IAAAoB,EAAAA,EAC9C9B,KAAKU,cAA2B,oCAElCmB,SAAAA,EAAaE,QACb/B,KAAKgC,KAAKC,UAAY,CACvB,CACF,CAQD,IAAAN,CAAKO,GACH,OAAOlC,KAAK0B,OAAOC,KAAKO,EACzB,CAOD,IAAAC,GACE,OAAOnC,KAAK0B,OAAOS,MACpB,GAhHMvC,EAAAwC,OAAS,CAACC,EAAgBC,GAO1B1C,EAAA2C,kBAAoB,IAAKzC,EAAWyC,kBAAmBC,gBAAgB,GAKxCC,EAAA,CAArCC,EAAM,wBAAiD9C,EAAA+C,UAAA,YAAA,GACpBF,EAAA,CAAnCC,EAAM,eAAe,IAA6B9C,EAAA+C,UAAA,cAAA,GAKPF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBnD,EAAA+C,UAAA,cAAA,GAM7BF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAmCjD,EAAA+C,UAAA,YAAA,GAKkBF,EAAA,CAAzEG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,QAASC,UAAW,qBAAoDpD,EAAA+C,UAAA,sBAAA,GAuD/FF,EAAA,CADTQ,EAAQ,OAAQ,YAUhBrD,EAAA+C,UAAA,mBAAA,MA9FkB/C,EAAQ6C,EAAA,CAD5BS,EAAc,kBACMtD,SAAAA"}

package/lib/Popout-DBLHeeXk.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as i,LitElement as e}from"lit";import{property as s,query as n,state as a,customElement as r}from"lit/decorators.js";import{o as l,a as h,s as p,h as d,l as c,c as m,b as u,f as g}from"./positioning-CsfLhMSW.js";import{L as v}from"./LightDismissController-4pH8cdko.js";import{S as f}from"./ScrollbarController-C5CMxfb3.js";import{N as y,t as w}from"./events-Bv6wNHwJ.js";import{s as b}from"./Component-DSU3Qp0O.js";import{D as E}from"./DirectionController-ChvNGESZ.js";import{o as x}from"./observe-D0n0zOfU.js";import{E as k}from"./EventController-BBOmvfLa.js";function C(o){class i extends o{constructor(){super(...arguments),this.open=!1,this.align="start",this.position="block-end"}}return t([s({type:Boolean,reflect:!0})],i.prototype,"open",void 0),t([s({reflect:!0})],i.prototype,"align",void 0),t([s({reflect:!0})],i.prototype,"position",void 0),i}const A=o`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);left:var(--_n-popout-position-x);top:var(--_n-popout-position-y);color:var(--n-color-text);opacity:0;transition:opacity var(--n-transition-slowly)}.n-popout{pointer-events:none;transform:translateY(-10px) scale(.97);visibility:hidden;transition:transform var(--n-transition-slowly),visibility var(--n-transition-slowly);transform-origin:top left;will-change:transform,opacity,visibility;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-popout);border-radius:var(--n-border-radius-s)}:host([open]){opacity:1}:host([open]) .n-popout{transition-property:transform;visibility:visible;pointer-events:auto;transform:translateY(0) translateX(0) scale(1)}@media (max-width:35.9375em){:host(:not([always-floating])){position:fixed;inset:0;overflow-y:auto;opacity:1;background:0 0;transition:background var(--n-transition-mobile)}:host([open]:not([always-floating])){pointer-events:auto;background:var(--n-color-overlay)}:host([open]:not([always-floating])) .n-popout{transform:translateY(0)}:host(:not([always-floating])) .n-popout{position:fixed;inset:0;inset-block-start:auto;transform:translateY(100%);transition:transform var(--n-transition-mobile),visibility var(--n-transition-mobile);transform-origin:bottom center;border-radius:0}}.top-end,.top-start{transform:translateY(10px) scale(.97)}.left-end,.left-start{transform:translateX(10px) scale(.97)}.right-end,.right-start{transform:translateX(-10px) scale(.97)}.bottom-start.is-rtl,.left-end,.top-end{transform-origin:bottom right}.bottom-end,.left-start,.top-start.is-rtl{transform-origin:top right}.bottom-end.is-rtl,.right-end,.right-start{transform-origin:bottom left}.right-start,.top-end.is-rtl{transform-origin:top left}`,P="undefined"==typeof matchMedia?{matches:!1,addEventListener(){}}:matchMedia("(max-width: 35.9375em)");let S=class extends(C(e)){constructor(){super(...arguments),this.scrollBar=new f(this),this.dismiss=new v(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this.popout&&t!==this.targetElement}),this.events=new k(this),this.direction=new E(this),this.smallViewport=P.matches,this.id="",this.alwaysFloating=!1,this.enableScroll=()=>{this.open\|\|this.scrollBar.unlockScroll()},this.updatePosition=async()=>{var t;if(!this.anchorElement)return;const o={strategy:"fixed"};"auto"===this.position?o.middleware=[l(8),h({alignment:this.align,padding:8}),p({padding:8}),d()]:(o.placement=c(this.position,this.align,this.direction.dir),o.middleware=[l(8),g(),p({padding:8}),d()]);const{x:i,y:e,placement:s,middlewareData:n}=await m(this.anchorElement,this,o);this.computedPosition=s,this.style.setProperty("--_n-popout-position-x",`${i}px`),this.style.setProperty("--_n-popout-position-y",`${e}px`),(null===(t=n.hide)\|\|void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):!this.smallViewport\|\|this.alwaysFloating?this.updatePosition().then((()=>this.show())):this.show()},this.handleMediaQueryChange=()=>{var t;this.smallViewport=P.matches,null===(t=this.cleanupAutoUpdate)\|\|void 0===t\|\|t.call(this),(!this.smallViewport\|\|this.alwaysFloating)&&this.open&&this.anchorElement?(this.cleanupAutoUpdate=u(this.anchorElement,this,this.updatePosition),this.scrollBar.unlockScroll()):this.open&&this.scrollBar.lockScroll()}}async show(){return this.open?Promise.resolve():(this.open=!0,await this.updateComplete,this.dispatchEvent(new y("open")),w(this.popout))}async hide(t=!0){var o,i;return this.open?(this.open=!1,null===(o=this.cleanupAutoUpdate)\|\|void 0===o\|\|o.call(this),this.dispatchEvent(new y("close")),t&&(null===(i=this.targetElement)\|\|void 0===i\|\|i.focus({preventScroll:!0})),w(this.popout)):Promise.resolve()}firstUpdated(){this.smallViewport&&!this.alwaysFloating\|\|this.updatePosition()}connectedCallback(){super.connectedCallback(),this.events.listen(P,"change",this.handleMediaQueryChange),this.initializeElements()}disconnectedCallback(){var t,o;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)\|\|void 0===t\|\|t.call(this),null===(o=this.targetElement)\|\|void 0===o\|\|o.removeAttribute("aria-expanded")}render(){return i`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}" @transitionend="${this.enableScroll}"><slot></slot></div>`}handleIdChange(){var t;null===(t=this.targetElement)\|\|void 0===t\|\|t.removeEventListener("click",this.toggleOpen),this.id?this.initializeElements():console.warn("NORD: popout requires an id attribute and value")}initializeElements(){this.targetElement=this.getToggle(),this.anchorElement=this.getAnchor(),this.events.listen(this.targetElement,"click",this.toggleOpen)}handleOpenChange(){var t,o;null===(t=this.targetElement)\|\|void 0===t\|\|t.setAttribute("aria-expanded",`${this.open}`),this.open?this.smallViewport&&!this.alwaysFloating?this.scrollBar.lockScroll():this.anchorElement&&(this.cleanupAutoUpdate=u(this.anchorElement,this,this.updatePosition)):null===(o=this.cleanupAutoUpdate)\|\|void 0===o\|\|o.call(this)}handleAnchorChange(){var t;null===(t=this.cleanupAutoUpdate)\|\|void 0===t\|\|t.call(this),this.anchorElement=this.getAnchor(),this.open&&(!this.smallViewport\|\|this.alwaysFloating)&&this.anchorElement&&(this.cleanupAutoUpdate=u(this.anchorElement,this,this.updatePosition))}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}getAnchor(){if(!this.anchor)return this.targetElement;const t=this.getRootNode().querySelector(`#${this.anchor}`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};S.styles=[b,A],t([n(".n-popout",!0)],S.prototype,"popout",void 0),t([a()],S.prototype,"computedPosition",void 0),t([a()],S.prototype,"smallViewport",void 0),t([s({reflect:!0})],S.prototype,"id",void 0),t([s({reflect:!0})],S.prototype,"anchor",void 0),t([s({reflect:!0,type:Boolean,attribute:"always-floating"})],S.prototype,"alwaysFloating",void 0),t([x("id")],S.prototype,"handleIdChange",null),t([x("open")],S.prototype,"handleOpenChange",null),t([x("anchor")],S.prototype,"handleAnchorChange",null),S=t([r("nord-popout")],S);var j=S;export{C as F,j as P};
2	+ //# sourceMappingURL=Popout-DBLHeeXk.js.map

package/lib/Popout-DBLHeeXk.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Popout-DBLHeeXk.js","sources":["../src/common/mixins/FloatingComponentMixin.ts","../src/popout/Popout.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { Alignment } from \"@floating-ui/dom\"\nimport { LogicalSide } from \"../positioning.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FloatingMixinInterface {\n open: boolean\n align: Alignment\n position: LogicalSide | \"auto\"\n}\n\nexport function FloatingMixin<T extends Constructor<LitElement>>(\n superClass: T\n): Constructor<FloatingMixinInterface> & T {\n class FloatingElement extends superClass {\n /**\n * Controls whether the component is open or not.\n */\n @property({ type: Boolean, reflect: true }) open = false\n\n /**\n * Set the alignment in relation to the toggle (or anchor) depending on the position.\n * `start` will align it to the left of the toggle (or anchor).\n * `end` will align it to the right of the toggle (or anchor).\n * Setting the `position` to `inline-start` or `inline-end` will switch\n * `start` and `end` to the top and bottom respectively.\n */\n @property({ reflect: true }) align: \"start\" | \"end\" = \"start\"\n\n /**\n * Set the position in relation to the toggle (or anchor).\n * Options follow logical properties.\n * `block-start` and `block-end` referring to top and bottom respectively,\n * `inline-start` and `inline-end` referring to left and right respectively.\n * You can also set it to `auto` for automatic positioning depending on\n * which side has the most space available.\n */\n @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" | \"auto\" =\n \"block-end\"\n }\n\n return FloatingElement\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport {\n computePosition,\n shift,\n offset,\n flip,\n autoPlacement,\n hide,\n autoUpdate,\n Placement,\n ComputePositionConfig,\n} from \"@floating-ui/dom\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { ScrollbarController } from \"../common/controllers/ScrollbarController.js\"\nimport { NordEvent, transition } from \"../common/events.js\"\nimport { FloatingMixin } from \"../common/mixins/FloatingComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Popout.css\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\n\n/*\n * The breakpoint width to switch between \"sheet\" design and floating design\n */\nconst mediaQuery =\n typeof matchMedia === \"undefined\"\n ? ({\n matches: false,\n addEventListener() {\n /* noop */\n },\n } as unknown as MediaQueryList)\n : matchMedia(\"(max-width: 35.9375em)\")\n\n/**\n * Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.\n *\n * @status ready\n * @category overlay\n * @slot - The popout content.\n */\n@customElement(\"nord-popout\")\nexport default class Popout extends FloatingMixin(LitElement) {\n static styles = [componentStyle, style]\n\n private targetElement?: HTMLElement\n private anchorElement?: HTMLElement\n private cleanupAutoUpdate?: ReturnType<typeof autoUpdate>\n\n @query(\".n-popout\", true) private popout!: HTMLDivElement\n\n private scrollBar = new ScrollbarController(this)\n\n /**\n * Handle dismissal of the popout, clicking outside the target button and popout.\n */\n private dismiss = new LightDismissController(this, {\n isOpen: () => this.open,\n onDismiss: e => this.hide(e.type !== \"click\"),\n isDismissible: node => node !== this.popout && node !== this.targetElement,\n })\n\n private events = new EventController(this)\n private direction = new DirectionController(this)\n\n @state() private computedPosition?: Placement\n\n @state() private smallViewport = mediaQuery.matches\n\n /**\n * The id for the active element to reference via aria-controls.\n */\n // eslint-disable-next-line lit/no-native-attributes\n @property({ reflect: true }) id: string = \"\"\n\n /**\n * Set an optional anchor element to align against, replacing the triggering element.\n */\n @property({ reflect: true }) anchor?: string\n\n /**\n * Set to true to always display the popout as a floating overlay, even on smaller viewports.\n */\n @property({ reflect: true, type: Boolean, attribute: \"always-floating\" }) alwaysFloating: boolean = false\n\n /**\n * Show the popout.\n * A promise that resolves to a `TransitionEvent` when the popout's show animation ends or is cancelled.\n * If the popout is already open, the promise resolves immediately with `undefined`.\n */\n async show(): Promise<TransitionEvent | void> {\n if (this.open) {\n return Promise.resolve()\n }\n\n this.open = true\n\n // we should only focus once the popout is visible after render is complete\n await this.updateComplete\n\n /**\n * Dispatched when the popout is opened.\n */\n this.dispatchEvent(new NordEvent(\"open\"))\n\n return transition(this.popout)\n }\n\n /**\n * Hide the popout.\n * Returns a promise that resolves to a `TransitionEvent` when the popout's hide animation ends or is cancelled.\n * If the popout is already closed, the promise resolves immediately with `undefined`.\n * @param {boolean} moveFocusToButton prevent focus returning to the target button. Default is true.\n */\n async hide(moveFocusToButton: boolean = true): Promise<TransitionEvent | void> {\n if (!this.open) {\n return Promise.resolve()\n }\n\n this.open = false\n\n this.cleanupAutoUpdate?.()\n\n /**\n * Dispatched when the popout is closed.\n */\n this.dispatchEvent(new NordEvent(\"close\"))\n\n if (moveFocusToButton) {\n this.targetElement?.focus({ preventScroll: true })\n }\n\n return transition(this.popout)\n }\n\n /**\n * Position the popout on load.\n */\n firstUpdated() {\n if (!this.smallViewport || this.alwaysFloating) {\n this.updatePosition()\n }\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n\n this.initializeElements()\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this.cleanupAutoUpdate?.()\n this.targetElement?.removeAttribute(\"aria-expanded\")\n }\n\n render() {\n return html`\n <div\n class=\"n-popout ${this.computedPosition} is-${this.direction.dir}\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n @transitionend=${this.enableScroll}\n >\n <slot></slot>\n </div>\n `\n }\n\n @observe(\"id\")\n protected handleIdChange() {\n // clean up any old listeners\n this.targetElement?.removeEventListener(\"click\", this.toggleOpen)\n\n if (!this.id) {\n // eslint-disable-next-line no-console\n console.warn(\"NORD: popout requires an id attribute and value\")\n } else {\n this.initializeElements()\n }\n }\n\n private initializeElements() {\n this.targetElement = this.getToggle()\n this.anchorElement = this.getAnchor()\n\n this.events.listen(this.targetElement, \"click\", this.toggleOpen)\n }\n\n @observe(\"open\")\n protected handleOpenChange() {\n this.targetElement?.setAttribute(\"aria-expanded\", `${this.open}`)\n\n if (this.open) {\n if (this.smallViewport && !this.alwaysFloating) {\n // hide scrollbar and prevent scroll on body\n this.scrollBar.lockScroll()\n } else if (this.anchorElement) {\n this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n }\n } else {\n this.cleanupAutoUpdate?.()\n }\n }\n\n @observe(\"anchor\")\n protected handleAnchorChange() {\n this.cleanupAutoUpdate?.()\n this.anchorElement = this.getAnchor()\n\n // if the popout is already open when the anchor changes, we should update its position\n if (this.open && (!this.smallViewport || this.alwaysFloating) && this.anchorElement) {\n this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n }\n }\n\n private enableScroll = () => {\n // scrollbar should only be restored when the backdrop has transitioned\n // that way we avoid awkward double scrollbars.\n if (!this.open) {\n this.scrollBar.unlockScroll()\n }\n }\n\n /**\n * Get the position of the element toggling the popout\n * and position the popout underneath it, taking into account the optional placement.\n */\n private updatePosition = async () => {\n if (!this.anchorElement) {\n return\n }\n\n const computePositionConfig: ComputePositionConfig = {\n strategy: \"fixed\",\n }\n\n if (this.position === \"auto\") {\n computePositionConfig.middleware = [\n offset(8),\n autoPlacement({ alignment: this.align, padding: 8 }),\n shift({\n padding: 8,\n }),\n hide(),\n ]\n } else {\n computePositionConfig.placement = logicalToPhysical(this.position, this.align, this.direction.dir)\n computePositionConfig.middleware = [\n offset(8),\n flip(),\n shift({\n padding: 8,\n }),\n hide(),\n ]\n }\n\n const { x, y, placement, middlewareData } = await computePosition(this.anchorElement, this, computePositionConfig)\n\n this.computedPosition = placement\n\n // use physical properties here since floating-ui\n // works exclusively in physical dimensions\n // we do all the mapping in logicalToPhysical\n this.style.setProperty(\"--_n-popout-position-x\", `${x}px`)\n this.style.setProperty(\"--_n-popout-position-y\", `${y}px`)\n\n if (middlewareData.hide?.referenceHidden) {\n this.hide()\n }\n }\n\n /**\n * Toggle the popout open or closed using state.\n * Updating the position to underneath the target button before the popout is opened.\n */\n private toggleOpen = (e: Event) => {\n e.preventDefault()\n if (this.open) {\n this.hide(false)\n } else if (!this.smallViewport || this.alwaysFloating) {\n this.updatePosition().then(() => this.show())\n } else {\n this.show()\n }\n }\n\n private getToggle() {\n const rootNode = this.getRootNode() as Document | ShadowRoot\n const toggle = <HTMLElement>rootNode.querySelector(`[aria-controls='${this.id}']`)\n\n if (toggle instanceof HTMLSlotElement) {\n return toggle.assignedElements()[0] as HTMLElement\n }\n\n return toggle\n }\n\n private getAnchor() {\n if (!this.anchor) {\n return this.targetElement\n }\n\n const rootNode = this.getRootNode() as Document | ShadowRoot\n const anchor = <HTMLElement>rootNode.querySelector(`#${this.anchor}`)\n\n if (anchor instanceof HTMLSlotElement) {\n return anchor.assignedElements()[0] as HTMLElement\n }\n\n return anchor\n }\n\n /**\n * Update the smallViewport flag to switch between \"sheet\" and \"floating\".\n * autoUpdate is needed when a viewport gets larger and the popout is open.\n */\n private handleMediaQueryChange = () => {\n this.smallViewport = mediaQuery.matches\n\n this.cleanupAutoUpdate?.()\n\n if ((!this.smallViewport || this.alwaysFloating) && this.open && this.anchorElement) {\n this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n this.scrollBar.unlockScroll()\n } else if (this.open) {\n this.scrollBar.lockScroll()\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-popout\": Popout\n }\n}\n"],"names":["FloatingMixin","superClass","FloatingElement","constructor","this","open","align","position","__decorate","property","type","Boolean","reflect","prototype","mediaQuery","matchMedia","matches","addEventListener","Popout","LitElement","scrollBar","ScrollbarController","dismiss","LightDismissController","isOpen","onDismiss","e","hide","isDismissible","node","popout","targetElement","events","EventController","direction","DirectionController","smallViewport","id","alwaysFloating","enableScroll","unlockScroll","updatePosition","async","anchorElement","computePositionConfig","strategy","middleware","offset","autoPlacement","alignment","padding","shift","placement","logicalToPhysical","dir","flip","x","y","middlewareData","computePosition","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","then","show","handleMediaQueryChange","cleanupAutoUpdate","call","autoUpdate","lockScroll","Promise","resolve","updateComplete","dispatchEvent","NordEvent","transition","moveFocusToButton","_b","focus","preventScroll","firstUpdated","connectedCallback","super","listen","initializeElements","disconnectedCallback","removeAttribute","render","html","handleIdChange","removeEventListener","console","warn","getToggle","getAnchor","handleOpenChange","setAttribute","handleAnchorChange","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","anchor","styles","componentStyle","query","state","attribute","observe","customElement"],"mappings":"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"}

package/lib/Popout.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./tslib.es6-CmLYFWVC.js";import"lit";import"lit/decorators.js";import"./positioning-CsfLhMSW.js";import"./LightDismissController-4pH8cdko.js";import"./ScrollbarController-C5CMxfb3.js";import"./events-Bv6wNHwJ.js";export{P as default}from"./Popout-BnM-vhZ-.js";import"./Component-DSU3Qp0O.js";import"./DirectionController-ChvNGESZ.js";import"./observe-D0n0zOfU.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";
+import"./tslib.es6-CmLYFWVC.js";import"lit";import"lit/decorators.js";import"./positioning-CsfLhMSW.js";import"./LightDismissController-4pH8cdko.js";import"./ScrollbarController-C5CMxfb3.js";import"./events-Bv6wNHwJ.js";export{P as default}from"./Popout-DBLHeeXk.js";import"./Component-DSU3Qp0O.js";import"./DirectionController-ChvNGESZ.js";import"./observe-D0n0zOfU.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";
 //# sourceMappingURL=Popout.js.map