@nordhealth/components 3.16.0-alpha.0 → 3.16.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.
- package/custom-elements.json +2318 -2316
- package/lib/Checkbox.js +1 -1
- package/lib/CommandMenu.js +1 -1
- package/lib/DatePicker.js +1 -1
- package/lib/DatePicker.js.map +1 -1
- package/lib/Dropdown.js +1 -1
- package/lib/Fieldset.js +1 -1
- package/lib/Fieldset.js.map +1 -1
- package/lib/{FormField-87551be2.js → FormField-b0da767b.js} +2 -2
- package/lib/FormField-b0da767b.js.map +1 -0
- package/lib/Input.js +1 -1
- package/lib/Layout.js +1 -1
- package/lib/LightDismissController-0a66b0a0.js +2 -0
- package/lib/LightDismissController-0a66b0a0.js.map +1 -0
- package/lib/Modal.js +1 -1
- package/lib/ModalController.js +1 -1
- package/lib/Popout-9ea00c67.js +2 -0
- package/lib/Popout-9ea00c67.js.map +1 -0
- package/lib/Popout.js +1 -1
- package/lib/Radio.js +1 -1
- package/lib/Range.js +1 -1
- package/lib/Select.js +1 -1
- package/lib/Textarea.js +1 -1
- package/lib/Textarea.js.map +1 -1
- package/lib/Toggle.js +1 -1
- package/lib/bundle.js +9 -9
- package/lib/bundle.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/src/common/controllers/LightDismissController.d.ts +1 -1
- package/lib/src/date-picker/DatePicker.d.ts +0 -4
- package/lib/src/fieldset/Fieldset.d.ts +4 -0
- package/lib/src/fieldset/Fieldset.test.d.ts +1 -0
- package/package.json +2 -2
- package/lib/FormField-87551be2.js.map +0 -1
- package/lib/LightDismissController-11ae4745.js +0 -2
- package/lib/LightDismissController-11ae4745.js.map +0 -1
- package/lib/Popout-b6f0175c.js +0 -2
- package/lib/Popout-b6f0175c.js.map +0 -1
package/lib/Checkbox.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,x as n,_ as o,e as r,s as i}from"./query-assigned-elements-92ce7494.js";import{n as c}from"./property-c78323b1.js";import{l as t}from"./if-defined-cccde88f.js";import{n as a}from"./ref-99418ab4.js";import{c as s}from"./interface-checked-small-07292940.js";import l from"./Icon.js";import{F as d}from"./FocusableMixin-d30213b4.js";import{F as p}from"./FormAssociatedMixin-3fa55d53.js";import{I as h}from"./InputMixin-83b5bd46.js";import{S as b}from"./SizeMixin-ab074eff.js";import{s as m}from"./Component-2253424f.js";import{s as v}from"./FormField-
|
|
1
|
+
import{i as e,x as n,_ as o,e as r,s as i}from"./query-assigned-elements-92ce7494.js";import{n as c}from"./property-c78323b1.js";import{l as t}from"./if-defined-cccde88f.js";import{n as a}from"./ref-99418ab4.js";import{c as s}from"./interface-checked-small-07292940.js";import l from"./Icon.js";import{F as d}from"./FocusableMixin-d30213b4.js";import{F as p}from"./FormAssociatedMixin-3fa55d53.js";import{I as h}from"./InputMixin-83b5bd46.js";import{S as b}from"./SizeMixin-ab074eff.js";import{s as m}from"./Component-2253424f.js";import{s as v}from"./FormField-b0da767b.js";import"./directive-e9ce14b4.js";import"./state-d31c6912.js";import"./cond-bb9ee891.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./FormDataController-592ff3dd.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m20 8.49976v3.00004h-20v-3.00004z" fill="currentColor"/></svg>',title:"interface-remove-small",tags:"nordicon interface remove small delete erase minimize line"});const f=e`:host{--_n-checkbox-size:calc(var(--n-space-m) * 1.25);--_n-checkbox-accent-color:var(--n-color-accent);--_n-checkbox-border-color:var(--n-color-border-hover);--_n-checkbox-icon-size:var(--n-size-icon-s);display:inline-block}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}input{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:var(--n-color-active);border:1px solid var(--_n-checkbox-border-color);border-radius:var(--n-border-radius-s);display:block;inline-size:var(--_n-checkbox-size);block-size:var(--_n-checkbox-size);cursor:pointer}input:checked,input:indeterminate{--_n-checkbox-border-color:var(--n-color-accent);background:var(--_n-checkbox-accent-color)}input[aria-invalid]{--_n-checkbox-accent-color:var(--n-color-status-danger);--_n-checkbox-border-color:var(--_n-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}input:active{opacity:.8}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{background:var(--_n-checkbox-accent-color);cursor:default;opacity:1}:host([disabled]) input:not(:is(:checked, :indeterminate)){--_n-checkbox-accent-color:var(--n-color-active);--_n-checkbox-border-color:var(--n-color-border-neutral)}:host([disabled]) input:is(:checked, :indeterminate){opacity:.3}nord-icon{--_n-icon-size:var(--_n-checkbox-icon-size);display:none;position:absolute;color:var(--n-color-text-on-accent);inset:var(--n-space-xs);z-index:var(--n-index-default);pointer-events:none}input:checked~.icon-checked,input:indeterminate~.icon-indeterminate{display:block}.n-label-container{margin-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-form);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([size="s"]){--_n-checkbox-size:var(--n-space-m);--_n-checkbox-icon-size:var(--n-size-icon-xs)}:host([size="s"]) nord-icon{inset:calc(var(--n-space-s)/ 2.6)}:host([size="s"]:not([hide-label])) .n-input-container{margin:calc(var(--n-space-s)/ 2.6) 0}:host([size="l"]){--_n-checkbox-size:var(--n-space-l);--_n-checkbox-icon-size:var(--n-size-icon-m)}:host([size="l"]:not([hide-label])) .n-label-container{margin:2px 0 0}`;l.registerIcon(s),l.registerIcon(u);let k=class extends(b(p(h(d(i))))){constructor(){super(...arguments),this.indeterminate=!1,this.checked=!1}get formValue(){return this.checked?this.value||"on":void 0}render(){return n`<div class="n-flex"><div class="n-input-container"><input ${a(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${t(this.name)}" .value="${this.value}" .checked="${this.checked}" .indeterminate="${this.indeterminate}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${t(this.getDescribedBy())}" aria-invalid="${t(this.getInvalid())}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small"></nord-icon><nord-icon class="icon-indeterminate" name="interface-remove-small"></nord-icon></div><div class="n-expand">${this.renderLabel()} ${this.renderError()}</div></div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};k.styles=[m,v,f],o([c({reflect:!0,type:Boolean})],k.prototype,"indeterminate",void 0),o([c({reflect:!0,type:Boolean})],k.prototype,"checked",void 0),k=o([r("nord-checkbox")],k);var x=k;export{x as default};
|
|
2
2
|
//# sourceMappingURL=Checkbox.js.map
|
package/lib/CommandMenu.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as o,s as t,x as n,A as i,e as s}from"./query-assigned-elements-92ce7494.js";import{n as r}from"./property-c78323b1.js";import{t as a}from"./state-d31c6912.js";import{g as l,c}from"./collection-511dcfac.js";import{e as d,n as p}from"./ref-99418ab4.js";import{o as m}from"./class-map-512f0bc1.js";import{l as h}from"./if-defined-cccde88f.js";import{w as v}from"./number-c3ab3e95.js";import{N as u}from"./events-d9666e88.js";import{L as f}from"./LightDismissController-11ae4745.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-2253424f.js";import{LocalizeController as w}from"./LocalizeController.js";import{c as z}from"./cond-bb9ee891.js";import{o as k}from"./observe-a9c6dfb6.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./IconManager.js";import"./DirectionController-f35f5476.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>',title:j,tags:"nordicon keyboard keys arrow up down shortcut"});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>',title:C,tags:"nordicon keyboard return key shortcut"});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>',title:I,tags:"nordicon keyboard backspace back delete key shortcut"});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=e`: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=d(),this.listRef=d(),this.localize=new w(this),this.dismissController=new f(this,{isOpen:()=>this.open,onDismiss:()=>this.close()}),this.keyboardController=new b(this,{trigger:()=>this.select(),goBack:()=>this.goBack(),end:()=>this.end(),start:()=>this.start(),next:()=>this.next(),previous:()=>this.previous(),toggleOpen:()=>this.toggleOpen()}),this.open=!1,this.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=l(this.filteredCommands,"section"),t=0===this.filteredCommands.length?"no-results":null===(e=this.selected)||void 0===e?void 0:e.id;return n`<div class="${m({"n-visible":this.open,"n-modal":!0})}"><div @animationend="${this.handleAnimationEnd}" class="${m({"n-bump":this.bump,"n-modal-content":!0})}"><div class="n-search-wrapper"><nord-visually-hidden id="instructions">${this.localize.term("instructions")}</nord-visually-hidden><input type="text" id="search" @input="${this.handleInput}" @blur="${this.handleBlur}" ${p(this.inputRef)} placeholder="${this.localize.term("placeholder")}" .value="${this.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="${h(t)}" aria-describedby="instructions"></div><div class="n-modal-body"><div id="list" ${p(this.listRef)} role="listbox">${0===this.filteredCommands.length?this.renderNoResults():Array.from(o,(([e,o])=>this.renderSection(e,o)))}</div></div><slot name="footer"><div class="n-modal-footer"><span class="n-help"><nord-icon label="Arrow keys" name="${j}"></nord-icon>${this.localize.term("footerArrowKeys")} </span><span class="n-help"><nord-icon label="Enter key" name="${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 n`<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 n`<div role="group" aria-labelledby="${z(e,t)}">${e?n`<div class="n-group-header" role="presentation" id="${t}">${e}</div>`:i} ${c(o,(e=>e.id),(e=>{var o,t;return n`<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=[...l(this.commands,"section").values()].flat();this.filteredCommands=o.filter((({title:o,keywords:t="",parent:n})=>{const i=`${o} ${t}`.toLocaleLowerCase(),s=e.every((e=>i.includes(e)));return(!this.parent&&this.search||n==this.parent)&&s}))}};O.styles=[y,R],o([r({reflect:!0,type:Boolean})],O.prototype,"open",void 0),o([r({type:Array,attribute:!1})],O.prototype,"commands",void 0),o([a()],O.prototype,"parent",void 0),o([a()],O.prototype,"search",void 0),o([a()],O.prototype,"bump",void 0),o([a()],O.prototype,"selectedIndex",void 0),o([a()],O.prototype,"filteredCommands",void 0),o([k("commands")],O.prototype,"handleCommandsChange",null),o([k("open")],O.prototype,"handleBump",null),o([k("open","updated")],O.prototype,"focusOnOpen",null),o([k("search"),k("parent"),k("commands")],O.prototype,"filterCommands",null),O=o([s("nord-command-menu")],O);var S=O;export{S as default};
|
|
1
|
+
import{i as e,_ as o,s as t,x as n,A as i,e as s}from"./query-assigned-elements-92ce7494.js";import{n as r}from"./property-c78323b1.js";import{t as a}from"./state-d31c6912.js";import{g as l,c}from"./collection-511dcfac.js";import{e as d,n as p}from"./ref-99418ab4.js";import{o as m}from"./class-map-512f0bc1.js";import{l as h}from"./if-defined-cccde88f.js";import{w as v}from"./number-c3ab3e95.js";import{N as u}from"./events-d9666e88.js";import{L as f}from"./LightDismissController-0a66b0a0.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-2253424f.js";import{LocalizeController as w}from"./LocalizeController.js";import{c as z}from"./cond-bb9ee891.js";import{o as k}from"./observe-a9c6dfb6.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./IconManager.js";import"./DirectionController-f35f5476.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>',title:j,tags:"nordicon keyboard keys arrow up down shortcut"});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>',title:C,tags:"nordicon keyboard return key shortcut"});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>',title:I,tags:"nordicon keyboard backspace back delete key shortcut"});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=e`: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=d(),this.listRef=d(),this.localize=new w(this),this.dismissController=new f(this,{isOpen:()=>this.open,onDismiss:()=>this.close()}),this.keyboardController=new b(this,{trigger:()=>this.select(),goBack:()=>this.goBack(),end:()=>this.end(),start:()=>this.start(),next:()=>this.next(),previous:()=>this.previous(),toggleOpen:()=>this.toggleOpen()}),this.open=!1,this.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=l(this.filteredCommands,"section"),t=0===this.filteredCommands.length?"no-results":null===(e=this.selected)||void 0===e?void 0:e.id;return n`<div class="${m({"n-visible":this.open,"n-modal":!0})}"><div @animationend="${this.handleAnimationEnd}" class="${m({"n-bump":this.bump,"n-modal-content":!0})}"><div class="n-search-wrapper"><nord-visually-hidden id="instructions">${this.localize.term("instructions")}</nord-visually-hidden><input type="text" id="search" @input="${this.handleInput}" @blur="${this.handleBlur}" ${p(this.inputRef)} placeholder="${this.localize.term("placeholder")}" .value="${this.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="${h(t)}" aria-describedby="instructions"></div><div class="n-modal-body"><div id="list" ${p(this.listRef)} role="listbox">${0===this.filteredCommands.length?this.renderNoResults():Array.from(o,(([e,o])=>this.renderSection(e,o)))}</div></div><slot name="footer"><div class="n-modal-footer"><span class="n-help"><nord-icon label="Arrow keys" name="${j}"></nord-icon>${this.localize.term("footerArrowKeys")} </span><span class="n-help"><nord-icon label="Enter key" name="${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 n`<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 n`<div role="group" aria-labelledby="${z(e,t)}">${e?n`<div class="n-group-header" role="presentation" id="${t}">${e}</div>`:i} ${c(o,(e=>e.id),(e=>{var o,t;return n`<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=[...l(this.commands,"section").values()].flat();this.filteredCommands=o.filter((({title:o,keywords:t="",parent:n})=>{const i=`${o} ${t}`.toLocaleLowerCase(),s=e.every((e=>i.includes(e)));return(!this.parent&&this.search||n==this.parent)&&s}))}};O.styles=[y,R],o([r({reflect:!0,type:Boolean})],O.prototype,"open",void 0),o([r({type:Array,attribute:!1})],O.prototype,"commands",void 0),o([a()],O.prototype,"parent",void 0),o([a()],O.prototype,"search",void 0),o([a()],O.prototype,"bump",void 0),o([a()],O.prototype,"selectedIndex",void 0),o([a()],O.prototype,"filteredCommands",void 0),o([k("commands")],O.prototype,"handleCommandsChange",null),o([k("open")],O.prototype,"handleBump",null),o([k("open","updated")],O.prototype,"focusOnOpen",null),o([k("search"),k("parent"),k("commands")],O.prototype,"filterCommands",null),O=o([s("nord-command-menu")],O);var S=O;export{S as default};
|
|
2
2
|
//# sourceMappingURL=CommandMenu.js.map
|
package/lib/DatePicker.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as t,x as e,A as i,_ as o,e as a,s}from"./query-assigned-elements-92ce7494.js";import{n as r}from"./property-c78323b1.js";import{i as n}from"./query-36bfe0e4.js";import{n as l}from"./ref-99418ab4.js";import{l as d}from"./if-defined-cccde88f.js";import{c as p}from"./interface-close-small-f26b0299.js";import{F as c}from"./FocusableMixin-d30213b4.js";import{F as h}from"./FormAssociatedMixin-3fa55d53.js";import{I as m}from"./InputMixin-83b5bd46.js";import{o as u,p as
|
|
1
|
+
import{i as t,x as e,A as i,_ as o,e as a,s}from"./query-assigned-elements-92ce7494.js";import{n as r}from"./property-c78323b1.js";import{i as n}from"./query-36bfe0e4.js";import{n as l}from"./ref-99418ab4.js";import{l as d}from"./if-defined-cccde88f.js";import{c as p}from"./interface-close-small-f26b0299.js";import{F as c}from"./FocusableMixin-d30213b4.js";import{F as h}from"./FormAssociatedMixin-3fa55d53.js";import{I as m}from"./InputMixin-83b5bd46.js";import{o as u,p as b,a as v}from"./dates-5b651fbe.js";import{N as f}from"./events-d9666e88.js";import{S as g,i as j}from"./Calendar-5fbf9d8d.js";import{LocalizeController as y}from"./LocalizeController.js";import $ from"./Icon.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-9ea00c67.js";import"./Stack.js";import{s as k}from"./Component-2253424f.js";import{s as D}from"./FormField-b0da767b.js";import{R as x,s as z}from"./TextField-2d778949.js";import{isoAdapter as w}from"./date-adapter.js";import{c as C}from"./cond-bb9ee891.js";import{S as F}from"./SizeMixin-ab074eff.js";import"./directive-e9ce14b4.js";import"./FormDataController-592ff3dd.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./state-d31c6912.js";import"./class-map-512f0bc1.js";import"./collection-511dcfac.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-f35f5476.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./DateSelectEvent.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./IconManager.js";import"./style-map-f8a1c8d5.js";import"./AutocompleteMixin-5a7e10b2.js";import"./TextSelectableMixin-aac97d82.js";import"./LightDomController-5388d84c.js";import"./Spinner.js";import"./positioning-35c8d434.js";import"./LightDismissController-0a66b0a0.js";import"./ShortcutController-87615e31.js";import"./ScrollbarController-773c79f4.js";var S=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});const A=t`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;$.registerIcon(S),$.registerIcon(p);const I=()=>!1,L=()=>!1;let B=class extends(F(h(x(m(c(s)))))){constructor(){super(...arguments),this.swipe=new g(this,{target:()=>this.popout,matchesGesture:j,onSwipeEnd:()=>this.hide()}),this.localize=new y(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=1,this.dateAdapter=w,this.isDateDisabled=I,this.isDateHighlighted=L,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.dispatchEvent(new f("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new f("focus"))},this.handleInputChange=t=>{const e=t.target,i=this.dateAdapter.parse(e.value,u);(i||""===e.value)&&this.setValue(i)}}get valueAsDate(){return b(this.value)}set valueAsDate(t){this.value=t?v(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?v(new Date(t)):""}render(){const{valueAsDate:t}=this,o=t?this.dateAdapter.format(t):"";return e`<nord-input class="n-date-picker-input" value="${o}" label="${d(this.label)}" hint="${d(this.hint)}" error="${C(this.error,this.error)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hide-label="${this.hideLabel}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${l(this.focusableRef)} aria-invalid="${C(this.error,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?i:e`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?i:e`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?e`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:i}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${d(this.min)}" max="${d(this.max)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{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?v(t):"",this.dispatchEvent(new f("change"))}hide(t){this.popout.hide(t)}show(){this.popout.show()}};B.styles=[k,D,z,A],o([n(".n-date-picker-toggle",!0)],B.prototype,"toggleButton",void 0),o([n(".n-date-picker-close-button",!0)],B.prototype,"closeButton",void 0),o([n("nord-calendar",!0)],B.prototype,"calendar",void 0),o([n('[role="dialog"]',!0)],B.prototype,"popout",void 0),o([r()],B.prototype,"value",void 0),o([r({type:Boolean,reflect:!0})],B.prototype,"open",void 0),o([r({reflect:!0})],B.prototype,"min",void 0),o([r({reflect:!0})],B.prototype,"max",void 0),o([r({reflect:!0,attribute:"first-day-of-week",type:Number})],B.prototype,"firstDayOfWeek",void 0),o([r({attribute:!1})],B.prototype,"dateAdapter",void 0),o([r({attribute:!1})],B.prototype,"isDateDisabled",void 0),o([r({attribute:!1})],B.prototype,"isDateHighlighted",void 0),o([r({reflect:!0,type:Boolean})],B.prototype,"expand",void 0),B=o([a("nord-date-picker")],B);var E=B;export{E as default};
|
|
2
2
|
//# sourceMappingURL=DatePicker.js.map
|
package/lib/DatePicker.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../src/date-picker/DatePicker.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport type Button from \"../button/Button.js\"\nimport type Popout from \"../popout/Popout.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../input/Input.js\"\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"../popout/Popout.js\"\nimport \"../stack/Stack.js\"\nimport \"../calendar/Calendar.js\"\n\nimport type { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DatePredicate } from \"../calendar/Calendar.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst isDateDisabled = () => false\nconst isDateHighlighted = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status ready\n * @category form\n *\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n *\n * @localization modalHeading - Heading for the date picker's modal.\n * @localization closeLabel - Accessible label for the close button.\n * @localization buttonLabel - Accessible label for the toggle button that opens the date picker modal.\n * @localization selectedDateMessage - Describes the selected date. This message is appended to the toggle button label when a date is selected.\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends SizeMixin(\n FormAssociatedMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n @query(`.n-date-picker-toggle`, true) private toggleButton!: Button\n @query(`.n-date-picker-close-button`, true) private closeButton!: HTMLButtonElement\n @query(`nord-calendar`, true) private calendar!: Calendar\n @query(`[role=\"dialog\"]`, true) private popout!: Popout\n\n private swipe = new SwipeController(this, {\n target: () => this.popout,\n matchesGesture: isDownwardsSwipe,\n onSwipeEnd: () => this.hide(),\n })\n\n private localize = new LocalizeController<\"nord-date-picker\">(this, {\n onLangChange: () => this.createDateFormatters(),\n })\n\n /**\n * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n * these are used to format dates exclusively for the benefit of screen readers.\n *\n * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n * better performance when formatting large number of dates. See:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n */\n private dateFormatLong!: Intl.DateTimeFormat\n\n /**\n * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n */\n @property() value: string = \"\"\n\n get valueAsDate(): Date | undefined {\n return parseISODate(this.value)\n }\n\n /**\n * Get/set the value of the picker as a Date object.\n */\n set valueAsDate(date: Date | undefined) {\n this.value = date ? printISODate(date) : \"\"\n }\n\n get valueAsNumber(): number {\n return this.valueAsDate?.getTime() ?? NaN\n }\n\n /**\n * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n */\n set valueAsNumber(date: number) {\n this.value = date ? printISODate(new Date(date)) : \"\"\n }\n\n /**\n * Exposes the raw value of the input field without date formatting.\n */\n @property({ reflect: true }) rawValue?: string\n\n /**\n * Controls whether date picker dialog is open or not.\n */\n @property({ type: Boolean, reflect: true }) open = false\n\n /**\n * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n */\n @property({ reflect: true }) min?: string\n\n /**\n * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n */\n @property({ reflect: true }) max?: string\n\n /**\n * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n */\n @property({ reflect: true, attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek =\n DaysOfWeek.Monday\n\n /**\n * Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n * Default is IS0-8601 parsing and formatting.\n */\n @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\n\n /**\n * Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n */\n @property({ attribute: false }) isDateDisabled: DatePredicate = isDateDisabled\n\n /**\n * Controls which days are highlighted with a small indicator.\n * Returning `false` will not show an indicator.\n * Returning `true` will show the indicator, but without an accessible label. Therefore\n * Returning a string will show the indicator, and use the string as accessible label.\n * It is recommended to return a string rather than `true` whenever possible.\n */\n @property({ attribute: false }) isDateHighlighted: (date: Date) => string | boolean = isDateHighlighted\n\n /**\n * Controls whether the date picker expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n render() {\n const { valueAsDate } = this\n const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n return html`\n <nord-input\n class=\"n-date-picker-input\"\n value=${formattedDate}\n label=${ifDefined(this.label)}\n hint=${ifDefined(this.hint)}\n error=${cond(this.error, this.error)}\n placeholder=${ifDefined(this.placeholder)}\n id=${this.inputId}\n size=${this.size}\n ?expand=${this.expand}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n ?hide-label=${this.hideLabel}\n disallow-pattern=\"[^0-9./-]\"\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n @input=${this.handleInputChange}\n ${ref(this.focusableRef)}\n aria-invalid=${cond(this.error, \"true\")}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n >\n ${!this.hintSlot.isEmpty ? html`<slot name=\"hint\" slot=\"hint\"></slot>` : nothing}\n ${!this.labelSlot.isEmpty ? html`<slot name=\"label\" slot=\"label\"></slot>` : nothing}\n <nord-button\n size=${this.size}\n ?disabled=${this.disabled || this.readonly}\n slot=\"end\"\n class=\"n-date-picker-toggle\"\n aria-controls=\"popout\"\n type=\"button\"\n >\n <nord-icon name=\"interface-calendar\"></nord-icon>\n <nord-visually-hidden>\n ${this.localize.term(\"buttonLabel\")}\n ${valueAsDate\n ? html`\n <span>\n , ${this.localize.term(\"selectedDateMessage\")} ${this.dateFormatLong.format(valueAsDate)}\n </span>\n `\n : nothing}\n </nord-visually-hidden>\n </nord-button>\n </nord-input>\n <nord-popout\n id=\"popout\"\n anchor=${this.inputId}\n align=\"end\"\n position=\"block-end\"\n role=\"dialog\"\n aria-modal=\"true\"\n ?open=${this.open}\n @open=${this.handleOpen}\n @close=${this.handleClose}\n aria-labelledby=\"header\"\n >\n <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n <nord-stack class=\"n-date-picker-header\" direction=\"horizontal\" justify-content=\"space-between\">\n <div class=\"n-date-picker-heading\" id=\"header\">${this.localize.term(\"modalHeading\")}</div>\n <nord-button\n class=\"n-date-picker-close-button\"\n type=\"button\"\n size=\"s\"\n variant=\"plain\"\n @click=${this.handleClose}\n >\n <nord-visually-hidden>${this.localize.term(\"closeLabel\")}</nord-visually-hidden>\n <nord-icon name=\"interface-close-small\"></nord-icon>\n </nord-button>\n </nord-stack>\n\n <nord-calendar\n class=\"n-date-picker-calendar\"\n expand\n value=${this.value}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n .firstDayOfWeek=${this.firstDayOfWeek}\n .isDateDisabled=${this.isDateDisabled}\n .isDateHighlighted=${this.isDateHighlighted}\n @change=${this.handleDaySelect}\n ></nord-calendar>\n\n <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n </nord-popout>\n `\n }\n\n private createDateFormatters() {\n this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n timeZone: \"UTC\",\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n })\n }\n\n private focusFirst() {\n this.closeButton.focus()\n }\n\n private focusLast() {\n this.calendar.focus({ target: \"day\" })\n }\n\n private handleDaySelect = (e: DateSelectEvent) => {\n e.stopPropagation()\n this.setValue(e.date)\n this.hide()\n }\n\n private handleOpen() {\n this.open = true\n this.calendar.focus({ target: \"month\" })\n }\n\n private handleClose() {\n this.open = false\n }\n\n private handleBlur = (event: Event) => {\n event.stopPropagation()\n this.dispatchEvent(new NordEvent(\"blur\"))\n }\n\n private handleFocus = (event: Event) => {\n event.stopPropagation()\n this.dispatchEvent(new NordEvent(\"focus\"))\n }\n\n private handleInputChange = (e: Event) => {\n const target = e.target as HTMLInputElement\n\n const parsed = this.dateAdapter.parse(target.value, createDate)\n this.rawValue = (<HTMLInputElement | null>this.focusableRef.value)?.value\n\n if (parsed || target.value === \"\") {\n this.setValue(parsed)\n }\n }\n\n private setValue(date?: Date) {\n this.value = date ? printISODate(date) : \"\"\n\n const { valueAsDate } = this\n const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n this.rawValue = formattedDate\n\n this.dispatchEvent(new NordEvent(\"change\"))\n }\n\n /**\n * Hide the date picker programmatically.\n * @param moveFocusToButton A boolean option to move the focus to the original button that opens the popout.\n */\n hide(moveFocusToButton?: boolean) {\n this.popout.hide(moveFocusToButton)\n }\n\n /**\n * Show the date picker programmatically.\n */\n show() {\n this.popout.show()\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-date-picker\": DatePicker\n }\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","isDateDisabled","isDateHighlighted","DatePicker","SizeMixin","FormAssociatedMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","swipe","SwipeController","target","popout","matchesGesture","isDownwardsSwipe","onSwipeEnd","hide","localize","LocalizeController","onLangChange","createDateFormatters","value","open","firstDayOfWeek","dateAdapter","isoAdapter","expand","handleDaySelect","e","stopPropagation","setValue","date","handleBlur","event","dispatchEvent","NordEvent","handleFocus","handleInputChange","parsed","parse","createDate","rawValue","_a","focusableRef","valueAsDate","parseISODate","printISODate","valueAsNumber","_b","getTime","NaN","Date","render","formattedDate","format","html","ifDefined","label","hint","cond","error","placeholder","inputId","size","disabled","required","readonly","hideLabel","ref","getDescribedBy","hintSlot","isEmpty","nothing","labelSlot","term","dateFormatLong","handleOpen","handleClose","focusLast","min","max","focusFirst","Intl","DateTimeFormat","resolvedLang","timeZone","day","month","year","closeButton","focus","calendar","moveFocusToButton","show","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","reflect","type","Boolean","attribute","Number","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../src/date-picker/DatePicker.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport type Button from \"../button/Button.js\"\nimport type Popout from \"../popout/Popout.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../input/Input.js\"\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"../popout/Popout.js\"\nimport \"../stack/Stack.js\"\nimport \"../calendar/Calendar.js\"\n\nimport type { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DatePredicate } from \"../calendar/Calendar.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst isDateDisabled = () => false\nconst isDateHighlighted = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status ready\n * @category form\n *\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n *\n * @localization modalHeading - Heading for the date picker's modal.\n * @localization closeLabel - Accessible label for the close button.\n * @localization buttonLabel - Accessible label for the toggle button that opens the date picker modal.\n * @localization selectedDateMessage - Describes the selected date. This message is appended to the toggle button label when a date is selected.\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends SizeMixin(\n FormAssociatedMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n @query(`.n-date-picker-toggle`, true) private toggleButton!: Button\n @query(`.n-date-picker-close-button`, true) private closeButton!: HTMLButtonElement\n @query(`nord-calendar`, true) private calendar!: Calendar\n @query(`[role=\"dialog\"]`, true) private popout!: Popout\n\n private swipe = new SwipeController(this, {\n target: () => this.popout,\n matchesGesture: isDownwardsSwipe,\n onSwipeEnd: () => this.hide(),\n })\n\n private localize = new LocalizeController<\"nord-date-picker\">(this, {\n onLangChange: () => this.createDateFormatters(),\n })\n\n /**\n * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n * these are used to format dates exclusively for the benefit of screen readers.\n *\n * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n * better performance when formatting large number of dates. See:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n */\n private dateFormatLong!: Intl.DateTimeFormat\n\n /**\n * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n */\n @property() value: string = \"\"\n\n get valueAsDate(): Date | undefined {\n return parseISODate(this.value)\n }\n\n /**\n * Get/set the value of the picker as a Date object.\n */\n set valueAsDate(date: Date | undefined) {\n this.value = date ? printISODate(date) : \"\"\n }\n\n get valueAsNumber(): number {\n return this.valueAsDate?.getTime() ?? NaN\n }\n\n /**\n * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n */\n set valueAsNumber(date: number) {\n this.value = date ? printISODate(new Date(date)) : \"\"\n }\n\n /**\n * Controls whether date picker dialog is open or not.\n */\n @property({ type: Boolean, reflect: true }) open = false\n\n /**\n * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n */\n @property({ reflect: true }) min?: string\n\n /**\n * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n */\n @property({ reflect: true }) max?: string\n\n /**\n * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n */\n @property({ reflect: true, attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek =\n DaysOfWeek.Monday\n\n /**\n * Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n * Default is IS0-8601 parsing and formatting.\n */\n @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\n\n /**\n * Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n */\n @property({ attribute: false }) isDateDisabled: DatePredicate = isDateDisabled\n\n /**\n * Controls which days are highlighted with a small indicator.\n * Returning `false` will not show an indicator.\n * Returning `true` will show the indicator, but without an accessible label. Therefore\n * Returning a string will show the indicator, and use the string as accessible label.\n * It is recommended to return a string rather than `true` whenever possible.\n */\n @property({ attribute: false }) isDateHighlighted: (date: Date) => string | boolean = isDateHighlighted\n\n /**\n * Controls whether the date picker expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n render() {\n const { valueAsDate } = this\n const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n return html`\n <nord-input\n class=\"n-date-picker-input\"\n value=${formattedDate}\n label=${ifDefined(this.label)}\n hint=${ifDefined(this.hint)}\n error=${cond(this.error, this.error)}\n placeholder=${ifDefined(this.placeholder)}\n id=${this.inputId}\n size=${this.size}\n ?expand=${this.expand}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n ?hide-label=${this.hideLabel}\n disallow-pattern=\"[^0-9./-]\"\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n @input=${this.handleInputChange}\n ${ref(this.focusableRef)}\n aria-invalid=${cond(this.error, \"true\")}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n >\n ${!this.hintSlot.isEmpty ? html`<slot name=\"hint\" slot=\"hint\"></slot>` : nothing}\n ${!this.labelSlot.isEmpty ? html`<slot name=\"label\" slot=\"label\"></slot>` : nothing}\n <nord-button\n size=${this.size}\n ?disabled=${this.disabled || this.readonly}\n slot=\"end\"\n class=\"n-date-picker-toggle\"\n aria-controls=\"popout\"\n type=\"button\"\n >\n <nord-icon name=\"interface-calendar\"></nord-icon>\n <nord-visually-hidden>\n ${this.localize.term(\"buttonLabel\")}\n ${valueAsDate\n ? html`\n <span>\n , ${this.localize.term(\"selectedDateMessage\")} ${this.dateFormatLong.format(valueAsDate)}\n </span>\n `\n : nothing}\n </nord-visually-hidden>\n </nord-button>\n </nord-input>\n <nord-popout\n id=\"popout\"\n anchor=${this.inputId}\n align=\"end\"\n position=\"block-end\"\n role=\"dialog\"\n aria-modal=\"true\"\n ?open=${this.open}\n @open=${this.handleOpen}\n @close=${this.handleClose}\n aria-labelledby=\"header\"\n >\n <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n <nord-stack class=\"n-date-picker-header\" direction=\"horizontal\" justify-content=\"space-between\">\n <div class=\"n-date-picker-heading\" id=\"header\">${this.localize.term(\"modalHeading\")}</div>\n <nord-button\n class=\"n-date-picker-close-button\"\n type=\"button\"\n size=\"s\"\n variant=\"plain\"\n @click=${this.handleClose}\n >\n <nord-visually-hidden>${this.localize.term(\"closeLabel\")}</nord-visually-hidden>\n <nord-icon name=\"interface-close-small\"></nord-icon>\n </nord-button>\n </nord-stack>\n\n <nord-calendar\n class=\"n-date-picker-calendar\"\n expand\n value=${this.value}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n .firstDayOfWeek=${this.firstDayOfWeek}\n .isDateDisabled=${this.isDateDisabled}\n .isDateHighlighted=${this.isDateHighlighted}\n @change=${this.handleDaySelect}\n ></nord-calendar>\n\n <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n </nord-popout>\n `\n }\n\n private createDateFormatters() {\n this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n timeZone: \"UTC\",\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n })\n }\n\n private focusFirst() {\n this.closeButton.focus()\n }\n\n private focusLast() {\n this.calendar.focus({ target: \"day\" })\n }\n\n private handleDaySelect = (e: DateSelectEvent) => {\n e.stopPropagation()\n this.setValue(e.date)\n this.hide()\n }\n\n private handleOpen() {\n this.open = true\n this.calendar.focus({ target: \"month\" })\n }\n\n private handleClose() {\n this.open = false\n }\n\n private handleBlur = (event: Event) => {\n event.stopPropagation()\n this.dispatchEvent(new NordEvent(\"blur\"))\n }\n\n private handleFocus = (event: Event) => {\n event.stopPropagation()\n this.dispatchEvent(new NordEvent(\"focus\"))\n }\n\n private handleInputChange = (e: Event) => {\n const target = e.target as HTMLInputElement\n\n const parsed = this.dateAdapter.parse(target.value, createDate)\n if (parsed || target.value === \"\") {\n this.setValue(parsed)\n }\n }\n\n private setValue(date?: Date) {\n this.value = date ? printISODate(date) : \"\"\n this.dispatchEvent(new NordEvent(\"change\"))\n }\n\n /**\n * Hide the date picker programmatically.\n * @param moveFocusToButton A boolean option to move the focus to the original button that opens the popout.\n */\n hide(moveFocusToButton?: boolean) {\n this.popout.hide(moveFocusToButton)\n }\n\n /**\n * Show the date picker programmatically.\n */\n show() {\n this.popout.show()\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-date-picker\": DatePicker\n }\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","isDateDisabled","isDateHighlighted","DatePicker","SizeMixin","FormAssociatedMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","swipe","SwipeController","target","popout","matchesGesture","isDownwardsSwipe","onSwipeEnd","hide","localize","LocalizeController","onLangChange","createDateFormatters","value","open","firstDayOfWeek","dateAdapter","isoAdapter","expand","handleDaySelect","e","stopPropagation","setValue","date","handleBlur","event","dispatchEvent","NordEvent","handleFocus","handleInputChange","parsed","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","_b","_a","getTime","NaN","Date","render","formattedDate","format","html","ifDefined","label","hint","cond","error","placeholder","inputId","size","disabled","required","readonly","hideLabel","ref","focusableRef","getDescribedBy","hintSlot","isEmpty","nothing","labelSlot","term","dateFormatLong","handleOpen","handleClose","focusLast","min","max","focusFirst","Intl","DateTimeFormat","resolvedLang","timeZone","day","month","year","closeButton","focus","calendar","moveFocusToButton","show","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","Number","customElement"],"mappings":"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"}
|
package/lib/Dropdown.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as o,x as e,s as t,_ as n,e as r}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{i as d}from"./query-36bfe0e4.js";import{l as a}from"./if-defined-cccde88f.js";import{S as i}from"./SlotController-d733c575.js";import{F as l}from"./Popout-
|
|
1
|
+
import{i as o,x as e,s as t,_ as n,e as r}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{i as d}from"./query-36bfe0e4.js";import{l as a}from"./if-defined-cccde88f.js";import{S as i}from"./SlotController-d733c575.js";import{F as l}from"./Popout-9ea00c67.js";import{o as p}from"./observe-a9c6dfb6.js";import{s as c}from"./Component-2253424f.js";import"./EventController-d99ebeef.js";import"./state-d31c6912.js";import"./positioning-35c8d434.js";import"./LightDismissController-0a66b0a0.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-773c79f4.js";import"./events-d9666e88.js";import"./DirectionController-f35f5476.js";const h=o`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:460px;overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size="s"]){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size="l"]){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(l(t)){constructor(){super(...arguments),this.headerSlot=new i(this,"header"),this.headerEndSlot=new i(this,"header-end"),this.expand=!1,this.size="m"}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]');null==o||o.setAttribute("aria-haspopup","true")}render(){return e`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${a(this.align)}" position="${a(this.position)}" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}"><div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){this.open=!0}handleClose(){this.open=!1}handleOpenChange(){var o;if(this.open){const e=null!==(o=this.querySelector("[autofocus]"))&&void 0!==o?o:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}}hide(o){return this.popout.hide(o)}show(){return this.popout.show()}};m.styles=[c,h],m.shadowRootOptions={...t.shadowRootOptions,delegatesFocus:!0},n([d(".n-dropdown-content")],m.prototype,"list",void 0),n([d("nord-popout",!0)],m.prototype,"popout",void 0),n([s({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),n([s({reflect:!0})],m.prototype,"size",void 0),n([p("open","updated")],m.prototype,"handleOpenChange",null),m=n([r("nord-dropdown")],m);var u=m;export{u as default};
|
|
2
2
|
//# sourceMappingURL=Dropdown.js.map
|
package/lib/Fieldset.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as r,s as t,x as i,e as o}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{S as n}from"./SlotController-d733c575.js";import{c as l}from"./cond-bb9ee891.js";import{s as a}from"./Component-2253424f.js";import{s as d}from"./FormField-
|
|
1
|
+
import{i as e,_ as r,s as t,x as i,e as o}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{S as n}from"./SlotController-d733c575.js";import{c as l}from"./cond-bb9ee891.js";import{s as a}from"./Component-2253424f.js";import{s as d}from"./FormField-b0da767b.js";import"./EventController-d99ebeef.js";const h=e`fieldset{border:none}.n-label-container{margin-block-end:calc(var(--n-space-s) * 2)}:host([size="s"]) .n-label-container{margin-block-end:var(--n-space-s)}.n-hidden{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);block-size:1px;inline-size:1px;white-space:nowrap}`;let p=class extends t{constructor(){super(...arguments),this.errorSlot=new n(this,"error"),this.hintSlot=new n(this,"hint"),this.label="",this.required=!1,this.hideRequired=!1,this.hideLabel=!1,this.size="m"}render(){const{hasError:e}=this;return i`<fieldset aria-invalid="${l(e,"true")}" aria-describedby="${l(e,"error")}" aria-required="${l(this.required,"true")}"><legend class="n-label-container ${this.hideLabel?"n-hidden":""}"><div class="n-label"><slot name="label">${this.label}</slot><span aria-hidden="true" class="n-required" ?hidden="${!this.required||this.hideRequired}">*</span></div><div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div></legend><slot></slot><div class="n-caption n-error" id="error" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div></fieldset>`}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}};p.styles=[a,d,h],r([s({reflect:!0})],p.prototype,"label",void 0),r([s({reflect:!0})],p.prototype,"hint",void 0),r([s({reflect:!0})],p.prototype,"error",void 0),r([s({reflect:!0,type:Boolean})],p.prototype,"required",void 0),r([s({reflect:!0,type:Boolean,attribute:"hide-required"})],p.prototype,"hideRequired",void 0),r([s({reflect:!0,type:Boolean,attribute:"hide-label"})],p.prototype,"hideLabel",void 0),r([s({reflect:!0})],p.prototype,"size",void 0),p=r([o("nord-fieldset")],p);var c=p;export{c as default};
|
|
2
2
|
//# sourceMappingURL=Fieldset.js.map
|
package/lib/Fieldset.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Fieldset.js","sources":["../src/fieldset/Fieldset.ts"],"sourcesContent":["import { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Fieldset.css\"\n\n/**\n * Fieldset is used for grouping sets of input components.\n * It is necessary to use a fieldset with radio and checkbox components.\n * It can also be useful for logically grouping other types of inputs.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the fieldset.\n * @slot error - Optional slot that holds error text for the fieldset.\n */\n@customElement(\"nord-fieldset\")\nexport default class Fieldset extends LitElement {\n static styles = [componentStyle, formFieldStyle, style]\n\n private errorSlot = new SlotController(this, \"error\")\n private hintSlot = new SlotController(this, \"hint\")\n\n /**\n * Label for the fieldset. Rendered as a `<legend>` element.\n */\n @property({ reflect: true }) label: string = \"\"\n\n /**\n * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n */\n @property({ reflect: true }) hint?: string\n\n /**\n * Optional error to be shown with the fieldset. Alternatively use the error slot.\n */\n @property({ reflect: true }) error?: string\n\n /**\n * Determines whether the fieldset is required or not.\n * A fieldset marked as required will be announced as such to users of assistive technology.\n * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n */\n @property({ reflect: true, type: Boolean }) required = false\n\n /**\n * Visually hide the required indicator, but still show\n * required attribute to assistive technologies like screen readers.\n */\n @property({ reflect: true, type: Boolean, attribute: \"hide-required\" }) hideRequired = false\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @property({ reflect: true, type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n render() {\n const { hasError } = this\n\n return html`\n <fieldset\n aria-invalid=${cond(hasError, \"true\")}\n aria-describedby=${cond(hasError, \"error\")}\n aria-required=${cond(this.required, \"true\")}\n >\n <legend class=\"n-label-container ${this.hideLabel ? \"n-hidden\" : \"\"}\">\n <div class=\"n-label\">\n <slot name=\"label\">${this.label}</slot\n ><span aria-hidden=\"true\" class=\"n-required\" ?hidden=${!this.required || this.hideRequired}>*</span>\n </div>\n\n <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n <slot name=\"hint\">${this.hint}</slot>\n </div>\n </legend>\n\n <slot></slot>\n\n <div class=\"n-caption n-error\" id=\"error\" role=\"alert\" ?hidden=${!this.hasError}>\n <slot name=\"error\">${this.error}</slot>\n </div>\n </fieldset>\n `\n }\n\n protected get hasHint() {\n return Boolean(this.hint) || this.hintSlot.hasContent\n }\n\n protected get hasError() {\n return Boolean(this.error) || this.errorSlot.hasContent\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-fieldset\": Fieldset\n }\n}\n"],"names":["Fieldset","LitElement","constructor","this","errorSlot","SlotController","hintSlot","label","required","hideRequired","hideLabel","render","hasError","html","cond","hasHint","hint","error","Boolean","hasContent","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","prototype","type","attribute","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Fieldset.js","sources":["../src/fieldset/Fieldset.ts"],"sourcesContent":["import { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Fieldset.css\"\n\n/**\n * Fieldset is used for grouping sets of input components.\n * It is necessary to use a fieldset with radio and checkbox components.\n * It can also be useful for logically grouping other types of inputs.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the fieldset.\n * @slot error - Optional slot that holds error text for the fieldset.\n */\n@customElement(\"nord-fieldset\")\nexport default class Fieldset extends LitElement {\n static styles = [componentStyle, formFieldStyle, style]\n\n private errorSlot = new SlotController(this, \"error\")\n private hintSlot = new SlotController(this, \"hint\")\n\n /**\n * Label for the fieldset. Rendered as a `<legend>` element.\n */\n @property({ reflect: true }) label: string = \"\"\n\n /**\n * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n */\n @property({ reflect: true }) hint?: string\n\n /**\n * Optional error to be shown with the fieldset. Alternatively use the error slot.\n */\n @property({ reflect: true }) error?: string\n\n /**\n * Determines whether the fieldset is required or not.\n * A fieldset marked as required will be announced as such to users of assistive technology.\n * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n */\n @property({ reflect: true, type: Boolean }) required = false\n\n /**\n * Visually hide the required indicator, but still show\n * required attribute to assistive technologies like screen readers.\n */\n @property({ reflect: true, type: Boolean, attribute: \"hide-required\" }) hideRequired = false\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @property({ reflect: true, type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n /**\n * The size of the label.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" = \"m\"\n\n render() {\n const { hasError } = this\n\n return html`\n <fieldset\n aria-invalid=${cond(hasError, \"true\")}\n aria-describedby=${cond(hasError, \"error\")}\n aria-required=${cond(this.required, \"true\")}\n >\n <legend class=\"n-label-container ${this.hideLabel ? \"n-hidden\" : \"\"}\">\n <div class=\"n-label\">\n <slot name=\"label\">${this.label}</slot\n ><span aria-hidden=\"true\" class=\"n-required\" ?hidden=${!this.required || this.hideRequired}>*</span>\n </div>\n\n <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n <slot name=\"hint\">${this.hint}</slot>\n </div>\n </legend>\n\n <slot></slot>\n\n <div class=\"n-caption n-error\" id=\"error\" role=\"alert\" ?hidden=${!this.hasError}>\n <slot name=\"error\">${this.error}</slot>\n </div>\n </fieldset>\n `\n }\n\n protected get hasHint() {\n return Boolean(this.hint) || this.hintSlot.hasContent\n }\n\n protected get hasError() {\n return Boolean(this.error) || this.errorSlot.hasContent\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-fieldset\": Fieldset\n }\n}\n"],"names":["Fieldset","LitElement","constructor","this","errorSlot","SlotController","hintSlot","label","required","hideRequired","hideLabel","size","render","hasError","html","cond","hasHint","hint","error","Boolean","hasContent","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","prototype","type","attribute","customElement"],"mappings":"ooBAqBe,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAGLC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAQG,SAAG,IAAID,EAAeF,KAAM,QAKfA,KAAKI,MAAW,GAiBDJ,KAAQK,UAAG,EAMiBL,KAAYM,cAAG,EAKlBN,KAASO,WAAG,EAKpDP,KAAIQ,KAAc,GAsChD,CApCC,MAAAC,GACE,MAAMC,SAAEA,GAAaV,KAErB,OAAOW,CAAI,2BAEQC,EAAKF,EAAU,8BACXE,EAAKF,EAAU,4BAClBE,EAAKZ,KAAKK,SAAU,6CAEDL,KAAKO,UAAY,WAAa,+CAExCP,KAAKI,qEAC8BJ,KAAKK,UAAYL,KAAKM,uEAGvCN,KAAKa,8BACxBb,KAAKc,2GAMqCd,KAAKU,gCAChDV,KAAKe,+BAIjC,CAED,WAAcF,GACZ,OAAOG,QAAQhB,KAAKc,OAASd,KAAKG,SAASc,UAC5C,CAED,YAAcP,GACZ,OAAOM,QAAQhB,KAAKe,QAAUf,KAAKC,UAAUgB,UAC9C,GA9EMpB,EAAMqB,OAAG,CAACC,EAAgBC,EAAgBC,GAQpBC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0B3B,EAAA4B,UAAA,aAAA,GAKlBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqB3B,EAAA4B,UAAA,YAAA,GAKbH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsB3B,EAAA4B,UAAA,aAAA,GAOCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMV,WAA2BnB,EAAA4B,UAAA,gBAAA,GAMYH,EAAA,CAAvEC,EAAS,CAAEC,SAAS,EAAME,KAAMV,QAASW,UAAW,mBAAuC9B,EAAA4B,UAAA,oBAAA,GAKvBH,EAAA,CAApEC,EAAS,CAAEC,SAAS,EAAME,KAAMV,QAASW,UAAW,gBAAiC9B,EAAA4B,UAAA,iBAAA,GAKzDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6B3B,EAAA4B,UAAA,YAAA,GA1C/B5B,EAAQyB,EAAA,CAD5BM,EAAc,kBACM/B,SAAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as n}from"./query-assigned-elements-92ce7494.js";const
|
|
2
|
-
//# sourceMappingURL=FormField-
|
|
1
|
+
import{i as n}from"./query-assigned-elements-92ce7494.js";const e=n`.n-caption,::slotted(.n-caption){font-size:var(--n-font-size-s);line-height:var(--n-line-height-caption)}.n-label-container{margin-block-end:var(--n-space-s);display:inline-block}.n-label,::slotted(label),label{display:block!important;color:var(--n-color-text);font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading);margin:0!important}.n-hint{padding-block-start:var(--n-space-xs);color:var(--n-color-text-weaker)}:host([size="s"]) ::slotted(label),:host([size="s"]) :is(label,.n-label){font-size:var(--n-font-size-s)}.n-error{margin-block-start:var(--n-space-s);color:var(--n-color-text-error)}.n-required{color:var(--n-color-status-danger);margin-inline-start:var(--n-space-xs)}`;export{e as s};
|
|
2
|
+
//# sourceMappingURL=FormField-b0da767b.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormField-b0da767b.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/lib/Input.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as t,x as n,A as e,_ as o,e as i,s as r}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{i as a}from"./query-36bfe0e4.js";import{l as d}from"./if-defined-cccde88f.js";import{o as l}from"./class-map-512f0bc1.js";import{n as c}from"./ref-99418ab4.js";import{o as p}from"./style-map-f8a1c8d5.js";import{F as u}from"./FocusableMixin-d30213b4.js";import{F as m}from"./FormAssociatedMixin-3fa55d53.js";import{I as h}from"./InputMixin-83b5bd46.js";import{R as b,s as v}from"./TextField-2d778949.js";import{A as f}from"./AutocompleteMixin-5a7e10b2.js";import{T as g}from"./TextSelectableMixin-aac97d82.js";import{S as w}from"./SizeMixin-ab074eff.js";import{s as y}from"./Component-2253424f.js";import{s as z}from"./FormField-
|
|
1
|
+
import{i as t,x as n,A as e,_ as o,e as i,s as r}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{i as a}from"./query-36bfe0e4.js";import{l as d}from"./if-defined-cccde88f.js";import{o as l}from"./class-map-512f0bc1.js";import{n as c}from"./ref-99418ab4.js";import{o as p}from"./style-map-f8a1c8d5.js";import{F as u}from"./FocusableMixin-d30213b4.js";import{F as m}from"./FormAssociatedMixin-3fa55d53.js";import{I as h}from"./InputMixin-83b5bd46.js";import{R as b,s as v}from"./TextField-2d778949.js";import{A as f}from"./AutocompleteMixin-5a7e10b2.js";import{T as g}from"./TextSelectableMixin-aac97d82.js";import{S as w}from"./SizeMixin-ab074eff.js";import{s as y}from"./Component-2253424f.js";import{s as z}from"./FormField-b0da767b.js";import{D as x}from"./DirectionController-f35f5476.js";import{c as j}from"./cond-bb9ee891.js";import $ from"./Icon.js";import{N as S}from"./events-d9666e88.js";import"./directive-e9ce14b4.js";import"./FormDataController-592ff3dd.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./VisuallyHidden.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";var _=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z" fill="currentColor"/></svg>',title:"navigation-search",tags:"nordicon navigation menu find search magnifying glass"});const k=t`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.n-input-container{font-size:var(--n-font-size-m);display:grid;grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4;padding-inline-start:var(--_n-input-start-inline-size,var(--_n-input-padding-inline));padding-inline-end:var(--_n-input-end-inline-size,var(--_n-input-padding-inline))}slot[name=end],slot[name=start]{pointer-events:none;display:flex;align-items:center;color:var(--n-color-icon)}:host([disabled]) slot:is([name=start],[name=end]){color:var(--n-color-text-weakest)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(*){font-size:var(--_n-input-font-size)}[name=start]::slotted(*),nord-icon{margin-inline-start:var(--_n-input-padding-inline)!important;margin-inline-end:calc(var(--_n-input-padding-inline)/ 2)!important}[name=end]::slotted(*){margin-inline-start:calc(var(--_n-input-padding-inline)/ 2)!important;margin-inline-end:var(--_n-input-padding-inline)!important}[name=start]::slotted(:is(nord-button, nord-dropdown)){margin-inline-start:0!important}[name=end]::slotted(:is(nord-button, nord-dropdown)){margin-inline-end:0!important}nord-icon{--_n-input-icon-color:var(--n-input-icon-color, var(--n-color-icon));color:var(--_n-input-icon-color)}::slotted(:is(nord-button:not([disabled]), nord-dropdown)){pointer-events:auto;position:relative}::slotted(nord-button:not([disabled],:focus)),::slotted(nord-dropdown:not(:focus-within)){--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-color:var(--n-color-text-weaker);-webkit-text-fill-color:var(--n-button-color);opacity:.8}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)){--n-button-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color, var(--n-color-status-danger))}:host([size="s"]) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s) * 1.4)}:host{--_n-input-icon-size:var(--n-size-icon-s)}:host([size="s"]){--_n-input-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-input-icon-size:var(--n-size-icon-m)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-input-icon-size)}:host([type=unit]) :is(.n-input-container,.n-input){--_n-input-text-align:var(--n-input-text-align, end);font-family:var(--n-font-family-code)!important}`;class F{constructor(t,n){this.target=n,this.hadFirstUpdate=!1,t.addController(this),this.observer=new ResizeObserver((([n])=>{const[e]=n.borderBoxSize;this.borderBoxSize=e,t.requestUpdate()}))}get inlineSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.inlineSize}get blockSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.blockSize}hostUpdated(){this.hadFirstUpdate||(this.observer.observe(this.target()),this.hadFirstUpdate=!0)}hostConnected(){this.hadFirstUpdate&&this.observer.observe(this.target())}hostDisconnected(){this.observer.disconnect()}}$.registerIcon(_);const C=t=>t?`${t}px`:void 0;let I=class extends(w(m(f(b(g(h(u(r)))))))){constructor(){super(...arguments),this.startObserver=new F(this,(()=>this.startSlot)),this.endObserver=new F(this,(()=>this.endSlot)),this.direction=new x(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,o=t.selectionStart,i=e.slice(0,o),r=e.slice(o,e.length),s=i.replace(n,""),a=s+r.replace(n,""),d=s.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const o="number"===this.type;return n`${this.renderLabel()}<div class="${l({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${p({"--_n-input-start-inline-size":C(this.startObserver.inlineSize),"--_n-input-end-inline-size":C(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?n`<nord-icon name="navigation-search"></nord-icon>`:e}</slot><input ${c(this.textSelectableRef)} ${c(this.focusableRef)} id="${this.inputId}" class="n-input" type="${o||"unit"===this.type?"text":this.type}" inputmode="${j(o,"numeric")}" pattern="${j(o,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${d(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${d(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" @select="${this.handleSelect}" aria-describedby="${d(this.getDescribedBy())}" aria-invalid="${d(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()}`}handleKeydown(t){if("Enter"!==t.key)return;const{form:n}=this;if(n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}handleSelect(t){t.stopPropagation(),this.dispatchEvent(new S("select"))}};I.styles=[y,z,v,k],o([a("slot[name='start']")],I.prototype,"startSlot",void 0),o([a("slot[name='end']")],I.prototype,"endSlot",void 0),o([s({reflect:!0})],I.prototype,"type",void 0),o([s({reflect:!0,type:Boolean})],I.prototype,"expand",void 0),o([s({reflect:!0,attribute:"disallow-pattern"})],I.prototype,"disallowPattern",void 0),I=o([i("nord-input")],I);var q=I;export{q as default};
|
|
2
2
|
//# sourceMappingURL=Input.js.map
|
package/lib/Layout.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as n,_ as e,s as a,x as t,A as o,e as i}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{t as r}from"./state-d31c6912.js";import{i as d}from"./query-36bfe0e4.js";import{o as l}from"./class-map-512f0bc1.js";import{o as c}from"./style-map-f8a1c8d5.js";import{l as h}from"./NavToggle-6b13700e.js";import{D as v}from"./DirectionController-f35f5476.js";import{E as p}from"./EventController-d99ebeef.js";import{L as u}from"./LightDismissController-11ae4745.js";import{S as g}from"./SlotController-d733c575.js";import{o as b}from"./observe-a9c6dfb6.js";import{c as y}from"./cond-bb9ee891.js";import{f as m}from"./fsm-50373df9.js";import{c as f}from"./number-c3ab3e95.js";import k from"./Icon.js";import{s as w}from"./Component-2253424f.js";import{s as z}from"./Sticky-c34c9b12.js";import"./directive-e9ce14b4.js";import"./ref-99418ab4.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./FocusableMixin-d30213b4.js";import"./Button.js";import"./LightDomController-5388d84c.js";import"./Spinner.js";import"./if-defined-cccde88f.js";import"./InputMixin-83b5bd46.js";import"./VisuallyHidden.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./IconManager.js";const x=()=>!0;class S{constructor(n,e){n.addController(this),this.options={enabled:x,...e}}hostConnected(){"undefined"!=typeof BroadcastChannel&&(this.channel=new BroadcastChannel(this.options.channelName),this.channel.addEventListener("message",this))}hostDisconnected(){var n,e;null===(n=this.channel)||void 0===n||n.removeEventListener("message",this),null===(e=this.channel)||void 0===e||e.close()}handleEvent(n){this.options.enabled()&&this.options.onMessage(n.data)}post(n){var e;this.options.enabled()&&(null===(e=this.channel)||void 0===e||e.postMessage(n))}}function _(n,e,a=JSON.stringify,t=JSON.parse){return{get value(){try{const a=localStorage.getItem(n);return a?t(a):e}catch(n){return e}},set value(e){try{localStorage.setItem(n,a(e))}catch(n){}}}}const j=n`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));--_n-layout-footer-size:var(--n-space-xxl);background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout{block-size:calc(100vh - var(--n-sticky-top))}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}:host([sticky-footer]) .n-has-footer slot[name=footer]::slotted(*){position:fixed}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgba(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgba(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--n-color-border) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:"";position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:fixed;inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-start:0;z-index:var(--n-index-top-bar)}[data-screen=narrow] .n-top-bar-container,[data-screen=wide]:not([data-nav=opened]) .n-top-bar-container{inset-inline-start:0}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar .n-layout-main{inset-block-start:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed;inset-block-start:0}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),.n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}.n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),.n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgba(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgba(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);opacity:0;visibility:hidden;cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}slot[name=footer]::slotted(*){inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-end:0}@media (min-width:1240px){.n-has-drawer slot[name=footer]::slotted(*){inset-inline-end:var(--_n-layout-drawer-inline-size)}}[data-screen=narrow] slot[name=footer]::slotted(*),[data-screen=wide]:not([data-nav=opened]) slot[name=footer]::slotted(*){inset-inline-start:0}:host([sticky-footer]) .n-has-footer .n-layout-content{padding-block-end:var(--_n-layout-footer-size)}`;k.registerIcon(h);const C=matchMedia("(min-width: 768px)"),N=_("nord-layout.navWidth",250),T=_("nord-layout.navOpen",!0),$=m({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let D=class extends a{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.footerSlot=new g(this,"footer"),this.direction=new v(this),this.events=new p(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:n=>n!==this.navEl}),this.broadcast=new S(this,{channelName:"nord-layout-nav-state",enabled:()=>this.syncNavState&&this.wideScreen,onMessage:n=>{"navOpen"in n&&(this.navOpen=n.navOpen),"navWidth"in n&&(this.navWidth=n.navWidth)}}),this.navWidth=N.value,this.isDragging=!1,this.wideScreen=C.matches,this.persistNavState=!1,this.syncNavState=!1,this.padding="m",this.sticky=!1,this.stickyFooter=!1,this.handleMediaQueryChange=()=>{this.wideScreen=C.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(C,"change",this.handleMediaQueryChange)}willUpdate(){this.hasUpdated||(this.isNarrow||this.persistNavState&&!1===T.value?this.navState="closed":this.navState="opened")}render(){const{navWidth:n,navState:e,navSlot:a,headerSlot:i,footerSlot:s,topBarSlot:r,drawerSlot:d,isDragging:h,direction:v}=this,p="opened"===e&&this.wideScreen?n:250;return t`<div class="${l({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":h,"n-has-header":i.hasContent,"n-has-footer":s.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":d.hasContent,"n-has-nav":a.hasContent})}" style="${c({"--_n-layout-nav-width":`${p}px`})}" data-nav="${a.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${a.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${y("opened"===e,this.startDragging)}" @pointermove="${y(h,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${a.hasContent?this.renderNavToggle():o}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main><slot name="footer"></slot></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return t`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return t`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){N.value=this.navWidth}handleNavStateChange(n){switch("wait"===n&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===n&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(n){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close"),this.persistNavState&&(T.value=this.navOpen),null!=n&&this.broadcast.post({navOpen:this.navOpen})}navTransition(n){this.navState=$.transition(this.navState,n)}handleNavClick(n){if(!n.defaultPrevented&&!this.wideScreen){const a=n.target;(n=>"nord-nav-item"===n.localName)(e=a)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(n){const{navWidth:e,direction:{isLTR:a}}=this;switch(n.key){case"ArrowLeft":this.setNavWidth(e+(a?-30:30));break;case"ArrowRight":this.setNavWidth(e+(a?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}this.broadcast.post({navWidth:this.navWidth}),n.preventDefault()}setNavWidth(n){this.navWidth=f(Math.round(n),220,400)}startDragging(n){if(0===n.button){n.target.setPointerCapture(n.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1,this.broadcast.post({navWidth:this.navWidth})}handleDrag(n){const e=this.direction.isRTL?this.clientWidth-n.clientX:n.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};D.styles=[w,z,j],e([d(".n-layout-nav",!0)],D.prototype,"navEl",void 0),e([r()],D.prototype,"navWidth",void 0),e([r()],D.prototype,"isDragging",void 0),e([r()],D.prototype,"navState",void 0),e([r()],D.prototype,"wideScreen",void 0),e([s({reflect:!0,type:Boolean,attribute:"nav-open"})],D.prototype,"navOpen",void 0),e([s({reflect:!0,type:Boolean,attribute:"persist-nav-state"})],D.prototype,"persistNavState",void 0),e([s({type:Boolean,reflect:!0,attribute:"sync-nav-state"})],D.prototype,"syncNavState",void 0),e([s({reflect:!0})],D.prototype,"padding",void 0),e([s({type:Boolean,reflect:!0})],D.prototype,"sticky",void 0),e([s({type:Boolean,reflect:!0,attribute:"sticky-footer"})],D.prototype,"stickyFooter",void 0),e([b("navWidth","updated")],D.prototype,"handleNavWidthChange",null),e([b("navState")],D.prototype,"handleNavStateChange",null),e([b("navOpen","updated")],D.prototype,"handleOpenChange",null),D=e([i("nord-layout")],D);var W=D;export{W as default};
|
|
1
|
+
import{i as n,_ as e,s as a,x as t,A as o,e as i}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{t as r}from"./state-d31c6912.js";import{i as d}from"./query-36bfe0e4.js";import{o as l}from"./class-map-512f0bc1.js";import{o as c}from"./style-map-f8a1c8d5.js";import{l as h}from"./NavToggle-6b13700e.js";import{D as v}from"./DirectionController-f35f5476.js";import{E as p}from"./EventController-d99ebeef.js";import{L as u}from"./LightDismissController-0a66b0a0.js";import{S as g}from"./SlotController-d733c575.js";import{o as b}from"./observe-a9c6dfb6.js";import{c as y}from"./cond-bb9ee891.js";import{f as m}from"./fsm-50373df9.js";import{c as f}from"./number-c3ab3e95.js";import k from"./Icon.js";import{s as w}from"./Component-2253424f.js";import{s as z}from"./Sticky-c34c9b12.js";import"./directive-e9ce14b4.js";import"./ref-99418ab4.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./FocusableMixin-d30213b4.js";import"./Button.js";import"./LightDomController-5388d84c.js";import"./Spinner.js";import"./if-defined-cccde88f.js";import"./InputMixin-83b5bd46.js";import"./VisuallyHidden.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./IconManager.js";const x=()=>!0;class S{constructor(n,e){n.addController(this),this.options={enabled:x,...e}}hostConnected(){"undefined"!=typeof BroadcastChannel&&(this.channel=new BroadcastChannel(this.options.channelName),this.channel.addEventListener("message",this))}hostDisconnected(){var n,e;null===(n=this.channel)||void 0===n||n.removeEventListener("message",this),null===(e=this.channel)||void 0===e||e.close()}handleEvent(n){this.options.enabled()&&this.options.onMessage(n.data)}post(n){var e;this.options.enabled()&&(null===(e=this.channel)||void 0===e||e.postMessage(n))}}function _(n,e,a=JSON.stringify,t=JSON.parse){return{get value(){try{const a=localStorage.getItem(n);return a?t(a):e}catch(n){return e}},set value(e){try{localStorage.setItem(n,a(e))}catch(n){}}}}const j=n`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));--_n-layout-footer-size:var(--n-space-xxl);background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout{block-size:calc(100vh - var(--n-sticky-top))}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}:host([sticky-footer]) .n-has-footer slot[name=footer]::slotted(*){position:fixed}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgba(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgba(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--n-color-border) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:"";position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:fixed;inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-start:0;z-index:var(--n-index-top-bar)}[data-screen=narrow] .n-top-bar-container,[data-screen=wide]:not([data-nav=opened]) .n-top-bar-container{inset-inline-start:0}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar .n-layout-main{inset-block-start:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed;inset-block-start:0}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),.n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}.n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),.n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgba(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgba(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);opacity:0;visibility:hidden;cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}slot[name=footer]::slotted(*){inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-end:0}@media (min-width:1240px){.n-has-drawer slot[name=footer]::slotted(*){inset-inline-end:var(--_n-layout-drawer-inline-size)}}[data-screen=narrow] slot[name=footer]::slotted(*),[data-screen=wide]:not([data-nav=opened]) slot[name=footer]::slotted(*){inset-inline-start:0}:host([sticky-footer]) .n-has-footer .n-layout-content{padding-block-end:var(--_n-layout-footer-size)}`;k.registerIcon(h);const C=matchMedia("(min-width: 768px)"),N=_("nord-layout.navWidth",250),T=_("nord-layout.navOpen",!0),$=m({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let D=class extends a{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.footerSlot=new g(this,"footer"),this.direction=new v(this),this.events=new p(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:n=>n!==this.navEl}),this.broadcast=new S(this,{channelName:"nord-layout-nav-state",enabled:()=>this.syncNavState&&this.wideScreen,onMessage:n=>{"navOpen"in n&&(this.navOpen=n.navOpen),"navWidth"in n&&(this.navWidth=n.navWidth)}}),this.navWidth=N.value,this.isDragging=!1,this.wideScreen=C.matches,this.persistNavState=!1,this.syncNavState=!1,this.padding="m",this.sticky=!1,this.stickyFooter=!1,this.handleMediaQueryChange=()=>{this.wideScreen=C.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(C,"change",this.handleMediaQueryChange)}willUpdate(){this.hasUpdated||(this.isNarrow||this.persistNavState&&!1===T.value?this.navState="closed":this.navState="opened")}render(){const{navWidth:n,navState:e,navSlot:a,headerSlot:i,footerSlot:s,topBarSlot:r,drawerSlot:d,isDragging:h,direction:v}=this,p="opened"===e&&this.wideScreen?n:250;return t`<div class="${l({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":h,"n-has-header":i.hasContent,"n-has-footer":s.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":d.hasContent,"n-has-nav":a.hasContent})}" style="${c({"--_n-layout-nav-width":`${p}px`})}" data-nav="${a.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${a.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${y("opened"===e,this.startDragging)}" @pointermove="${y(h,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${a.hasContent?this.renderNavToggle():o}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main><slot name="footer"></slot></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return t`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return t`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){N.value=this.navWidth}handleNavStateChange(n){switch("wait"===n&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===n&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(n){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close"),this.persistNavState&&(T.value=this.navOpen),null!=n&&this.broadcast.post({navOpen:this.navOpen})}navTransition(n){this.navState=$.transition(this.navState,n)}handleNavClick(n){if(!n.defaultPrevented&&!this.wideScreen){const a=n.target;(n=>"nord-nav-item"===n.localName)(e=a)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(n){const{navWidth:e,direction:{isLTR:a}}=this;switch(n.key){case"ArrowLeft":this.setNavWidth(e+(a?-30:30));break;case"ArrowRight":this.setNavWidth(e+(a?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}this.broadcast.post({navWidth:this.navWidth}),n.preventDefault()}setNavWidth(n){this.navWidth=f(Math.round(n),220,400)}startDragging(n){if(0===n.button){n.target.setPointerCapture(n.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1,this.broadcast.post({navWidth:this.navWidth})}handleDrag(n){const e=this.direction.isRTL?this.clientWidth-n.clientX:n.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};D.styles=[w,z,j],e([d(".n-layout-nav",!0)],D.prototype,"navEl",void 0),e([r()],D.prototype,"navWidth",void 0),e([r()],D.prototype,"isDragging",void 0),e([r()],D.prototype,"navState",void 0),e([r()],D.prototype,"wideScreen",void 0),e([s({reflect:!0,type:Boolean,attribute:"nav-open"})],D.prototype,"navOpen",void 0),e([s({reflect:!0,type:Boolean,attribute:"persist-nav-state"})],D.prototype,"persistNavState",void 0),e([s({type:Boolean,reflect:!0,attribute:"sync-nav-state"})],D.prototype,"syncNavState",void 0),e([s({reflect:!0})],D.prototype,"padding",void 0),e([s({type:Boolean,reflect:!0})],D.prototype,"sticky",void 0),e([s({type:Boolean,reflect:!0,attribute:"sticky-footer"})],D.prototype,"stickyFooter",void 0),e([b("navWidth","updated")],D.prototype,"handleNavWidthChange",null),e([b("navState")],D.prototype,"handleNavStateChange",null),e([b("navOpen","updated")],D.prototype,"handleOpenChange",null),D=e([i("nord-layout")],D);var W=D;export{W as default};
|
|
2
2
|
//# sourceMappingURL=Layout.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{E as s}from"./EventController-d99ebeef.js";import{S as t}from"./ShortcutController-87615e31.js";class i{constructor(i,o){this.host=i,this.options=o,this.isMouseDownOutside=!1,this.handleEsc=s=>{this.options.isOpen()&&this.options.onDismiss(s)},this.handleMouseDown=s=>{var t;if(!this.options.isOpen())return;const i=null!==(t=this.options.isDismissible)&&void 0!==t?t:s=>s!==this.host;this.isMouseDownOutside=s.composedPath().every(i)},this.handleClick=s=>{var t;if(!this.options.isOpen())return;const i=null!==(t=this.options.isDismissible)&&void 0!==t?t:s=>s!==this.host;s.composedPath().every(i)&&this.isMouseDownOutside&&this.options.onDismiss(s)},i.addController(this),this.shortcut=new t(i,{Escape:this.handleEsc}),this.events=new s(i)}hostConnected(){this.events.listen(document,"mousedown",this.handleMouseDown,!0),this.events.listen(document,"click",this.handleClick,!0)}}export{i as L};
|
|
2
|
+
//# sourceMappingURL=LightDismissController-0a66b0a0.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LightDismissController-0a66b0a0.js","sources":["../src/common/controllers/LightDismissController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"./EventController.js\"\nimport { ShortcutController } from \"./ShortcutController.js\"\n\nexport type LightDismissOptions = {\n isOpen: () => boolean\n onDismiss: EventListener\n isDismissible?: (node: EventTarget) => boolean\n}\n\nexport class LightDismissController implements ReactiveController {\n private shortcut: ShortcutController\n private events: EventController\n\n private isMouseDownOutside = false\n\n constructor(private host: ReactiveControllerHost & Element, private options: LightDismissOptions) {\n host.addController(this)\n this.shortcut = new ShortcutController(host, { Escape: this.handleEsc })\n this.events = new EventController(host)\n }\n\n hostConnected() {\n this.events.listen(document, \"mousedown\", this.handleMouseDown, true)\n this.events.listen(document, \"click\", this.handleClick, true)\n }\n\n private handleEsc = (e: KeyboardEvent) => {\n if (!this.options.isOpen()) {\n return\n }\n\n this.options.onDismiss(e)\n }\n\n private handleMouseDown = (e: MouseEvent) => {\n if (!this.options.isOpen()) {\n return\n }\n\n const predicate: LightDismissOptions[\"isDismissible\"] = this.options.isDismissible ?? (node => node !== this.host)\n this.isMouseDownOutside = e.composedPath().every(predicate)\n }\n\n private handleClick = (e: MouseEvent) => {\n if (!this.options.isOpen()) {\n return\n }\n\n const predicate: LightDismissOptions[\"isDismissible\"] = this.options.isDismissible ?? (node => node !== this.host)\n const isClickOutside = e.composedPath().every(predicate)\n\n const shouldDismiss = isClickOutside && this.isMouseDownOutside\n\n if (shouldDismiss) {\n this.options.onDismiss(e)\n }\n }\n}\n"],"names":["LightDismissController","constructor","host","options","this","isMouseDownOutside","handleEsc","e","isOpen","onDismiss","handleMouseDown","predicate","_a","isDismissible","node","composedPath","every","handleClick","addController","shortcut","ShortcutController","Escape","events","EventController","hostConnected","listen","document"],"mappings":"6GAUaA,EAMX,WAAAC,CAAoBC,EAAgDC,GAAhDC,KAAIF,KAAJA,EAAgDE,KAAOD,QAAPA,EAF5DC,KAAkBC,oBAAG,EAarBD,KAAAE,UAAaC,IACdH,KAAKD,QAAQK,UAIlBJ,KAAKD,QAAQM,UAAUF,EAAE,EAGnBH,KAAAM,gBAAmBH,UACzB,IAAKH,KAAKD,QAAQK,SAChB,OAGF,MAAMG,EAAgF,QAA9BC,EAAAR,KAAKD,QAAQU,qBAAiB,IAAAD,EAAAA,EAACE,GAAQA,IAASV,KAAKF,KAC7GE,KAAKC,mBAAqBE,EAAEQ,eAAeC,MAAML,EAAU,EAGrDP,KAAAa,YAAeV,UACrB,IAAKH,KAAKD,QAAQK,SAChB,OAGF,MAAMG,EAAgF,QAA9BC,EAAAR,KAAKD,QAAQU,qBAAiB,IAAAD,EAAAA,EAACE,GAAQA,IAASV,KAAKF,KACtFK,EAAEQ,eAAeC,MAAML,IAENP,KAAKC,oBAG3CD,KAAKD,QAAQM,UAAUF,EACxB,EAvCDL,EAAKgB,cAAcd,MACnBA,KAAKe,SAAW,IAAIC,EAAmBlB,EAAM,CAAEmB,OAAQjB,KAAKE,YAC5DF,KAAKkB,OAAS,IAAIC,EAAgBrB,EACnC,CAED,aAAAsB,GACEpB,KAAKkB,OAAOG,OAAOC,SAAU,YAAatB,KAAKM,iBAAiB,GAChEN,KAAKkB,OAAOG,OAAOC,SAAU,QAAStB,KAAKa,aAAa,EACzD"}
|
package/lib/Modal.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as o,_ as n,s as e,x as i,e as a}from"./query-assigned-elements-92ce7494.js";import{n as t}from"./property-c78323b1.js";import{i as l}from"./query-36bfe0e4.js";import{c as r}from"./interface-close-small-f26b0299.js";import s from"./Icon.js";import{S as d}from"./SlotController-d733c575.js";import{o as c}from"./observe-a9c6dfb6.js";import{N as p}from"./events-d9666e88.js";import{s as m}from"./Component-2253424f.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./Footer.js";import"./state-d31c6912.js";import"./if-defined-cccde88f.js";import"./directive-e9ce14b4.js";import"./cond-bb9ee891.js";import"./IconManager.js";import"./EventController-d99ebeef.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"./LightDismissController-
|
|
1
|
+
import{i as o,_ as n,s as e,x as i,e as a}from"./query-assigned-elements-92ce7494.js";import{n as t}from"./property-c78323b1.js";import{i as l}from"./query-36bfe0e4.js";import{c as r}from"./interface-close-small-f26b0299.js";import s from"./Icon.js";import{S as d}from"./SlotController-d733c575.js";import{o as c}from"./observe-a9c6dfb6.js";import{N as p}from"./events-d9666e88.js";import{s as m}from"./Component-2253424f.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./Footer.js";import"./state-d31c6912.js";import"./if-defined-cccde88f.js";import"./directive-e9ce14b4.js";import"./cond-bb9ee891.js";import"./IconManager.js";import"./EventController-d99ebeef.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"./LightDismissController-0a66b0a0.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-773c79f4.js";const b=o`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-modal)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{--n-footer-padding-inline:var(--_n-modal-padding-inline);--n-footer-background-color:transparent;--n-footer-box-shadow:none;position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding:var(--n-space-l) var(--_n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-header);border-block-end:1px solid var(--n-color-border)}.n-padded{padding:var(--_n-modal-padding-block) var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:"";position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 940px)}:host([size=xl]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, none)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:var(--n-space-xs);flex-direction:column;inline-size:100%}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:column;--_n-button-group-max-inline-size:100%}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;s.registerIcon(r);let u=class extends e{constructor(){super(...arguments),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new h(this,{isOpen:()=>this.open,onDismiss:()=>this.handleDismiss(),dialog:()=>this.modal,backdrop:()=>this.backdrop,close:o=>this.close(o)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new p("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return i`<div class="n-modal-backdrop"><div class="n-modal" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${this.handleDismiss}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="n-body-padded"></slot></div><nord-footer ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></nord-footer></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(){this.dispatchEvent(new p("cancel",{cancelable:!0}))&&this.close()}};u.styles=[m,b],n([l(".n-modal",!0)],u.prototype,"modal",void 0),n([l(".n-modal-backdrop",!0)],u.prototype,"backdrop",void 0),n([t({type:Boolean,reflect:!0})],u.prototype,"open",void 0),n([t({reflect:!0})],u.prototype,"size",void 0),n([t({attribute:!1})],u.prototype,"returnValue",void 0),n([t({type:Boolean,reflect:!0})],u.prototype,"scrollable",void 0),n([c("open","updated")],u.prototype,"handleOpenUpdated",null),u=n([a("nord-modal")],u);var f=u;export{f as default};
|
|
2
2
|
//# sourceMappingURL=Modal.js.map
|
package/lib/ModalController.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{E as t}from"./EventController-d99ebeef.js";import{L as s}from"./LightDismissController-
|
|
1
|
+
import{E as t}from"./EventController-d99ebeef.js";import{L as s}from"./LightDismissController-0a66b0a0.js";import{S as e}from"./ScrollbarController-773c79f4.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";function i(t,s){t.forEach((t=>((t,s)=>{if(s){const s=t.getAttribute("inert");null!==s&&t.setAttribute("data-n-inert",s),t.setAttribute("inert","")}else{const s=t.getAttribute("data-n-inert");null!==s?(t.setAttribute("inert",s),t.removeAttribute("data-n-inert")):t.removeAttribute("inert")}})(t,s)))}function o(t){const s=[];let e=t.nextElementSibling;for(;e;)s.push(e),e=e.nextElementSibling;for(e=t.previousElementSibling;e;)s.push(e),e=e.previousElementSibling;return t.parentElement&&t.parentElement!==document.body&&s.push(...o(t.parentElement)),s}class n{constructor(t){this.host=t,this.inertElements=[],t.addController(this)}hostDisconnected(){this.release()}trap(){const t=o(this.host);i(t,!0),this.inertElements=t}release(){i(this.inertElements,!1),this.inertElements=[]}}class r{constructor(i,o){this.host=i,this.trackLastButton=t=>{const s=t.target;"button"===s.localName&&(this.lastButton=s)},this.polyfillSubmitter=t=>{t.submitter=this.lastButton},this.handleTransitionEnd=t=>{this.options.isOpen()||t.target!==this.host||this.scrollBar.unlockScroll()},this.handleLightDismiss=t=>{this.host.contains(t.target)&&this.options.onDismiss(t)},this.handleSubmit=t=>{this.lastButton=void 0;const s=t.target,e=t.submitter,i="dialog"===s.method,o="dialog"===s.getAttribute("method");o&&!i&&t.preventDefault(),(o||i)&&this.options.close(null==e?void 0:e.value)},i.addController(this),this.options=o,this.scrollBar=new e(i),this.focusTrap=new n(i),this.events=new t(i),this.lightDismiss=new s(i,{isOpen:o.isOpen,isDismissible:t=>t!==o.dialog(),onDismiss:this.handleLightDismiss})}hostConnected(){window.SubmitEvent||(this.events.listen(this.host,"click",this.trackLastButton,!0),this.events.listen(this.host,"submit",this.polyfillSubmitter,!0)),this.events.listen(this.host,"transitionend",this.handleTransitionEnd),this.events.listen(this.host,"submit",this.handleSubmit)}hostDisconnected(){r.openModals.remove(this)}block(){var t;null===(t=r.openModals.top)||void 0===t||t.focusTrap.release(),r.openModals.push(this),this.scrollBar.lockScroll(),this.trigger=document.activeElement;(this.host.querySelector("[autofocus]")||this.host).focus(),this.focusTrap.trap()}unblock(){var t,s;r.openModals.top===this&&(r.openModals.pop(),this.options.backdrop().scrollTop=0,this.focusTrap.release(),null===(t=this.trigger)||void 0===t||t.focus(),this.trigger=void 0,null===(s=r.openModals.top)||void 0===s||s.focusTrap.trap())}}r.openModals=new class{constructor(){this.items=[]}get length(){return this.items.length}get top(){return this.items[this.length-1]}push(t){this.items.push(t)}pop(){return this.items.pop()}remove(t){const s=this.items.indexOf(t);-1!==s&&this.items.splice(s,1)}};export{r as ModalController};
|
|
2
2
|
//# sourceMappingURL=ModalController.js.map
|