npm - @nordhealth/components - Versions diffs - 1.8.3 → 1.9.0 - Mend

@nordhealth/components 1.8.3 → 1.9.0

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

Files changed (49) hide show

package/custom-elements.json +5326 -5085
package/lib/Badge.js +1 -1
package/lib/Badge.js.map +1 -1
package/lib/Checkbox.js +1 -1
package/lib/DatePicker.js +1 -1
package/lib/DatePicker.js.map +1 -1
package/lib/Divider.js +2 -0
package/lib/Divider.js.map +1 -0
package/lib/Dropdown.js +1 -1
package/lib/Dropdown.js.map +1 -1
package/lib/FormAssociatedMixin-d0d98a92.js +2 -0
package/lib/FormAssociatedMixin-d0d98a92.js.map +1 -0
package/lib/Input.js +1 -1
package/lib/Input.js.map +1 -1
package/lib/Layout.js +1 -1
package/lib/Layout.js.map +1 -1
package/lib/Modal.js +1 -1
package/lib/Modal.js.map +1 -1
package/lib/Radio.js +1 -1
package/lib/Select.js +1 -1
package/lib/Select.js.map +1 -1
package/lib/Textarea.js +1 -1
package/lib/Textarea.js.map +1 -1
package/lib/Toast.js +2 -0
package/lib/Toast.js.map +1 -0
package/lib/ToastGroup.js +2 -0
package/lib/ToastGroup.js.map +1 -0
package/lib/Toggle.js +1 -1
package/lib/bundle.js +3 -3
package/lib/bundle.js.map +1 -1
package/lib/index.js +1 -1
package/lib/interface-close-small-44ababc3.js +2 -0
package/lib/interface-close-small-44ababc3.js.map +1 -0
package/lib/src/common/controllers/ScrollbarController.d.ts +1 -0
package/lib/src/divider/Divider.d.ts +25 -0
package/lib/src/divider/Divider.test.d.ts +2 -0
package/lib/src/dropdown/Dropdown.d.ts +3 -1
package/lib/src/index.d.ts +3 -0
package/lib/src/input/Input.d.ts +4 -0
package/lib/src/modal/Modal.d.ts +0 -1
package/lib/src/select/Select.d.ts +4 -0
package/lib/src/textarea/Textarea.d.ts +4 -0
package/lib/src/toast/Toast.d.ts +40 -0
package/lib/src/toast/Toast.test.d.ts +2 -0
package/lib/src/toast-group/ToastGroup.d.ts +28 -0
package/lib/src/toast-group/ToastGroup.test.d.ts +2 -0
package/package.json +2 -2
package/lib/FormAssociatedMixin-d3124755.js +0 -2
package/lib/FormAssociatedMixin-d3124755.js.map +0 -1

package/lib/Badge.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as r,n as e}from"./query-assigned-elements-ef860822.js";import{r as a,s as o,$ as n}from"./lit-element-67e6cd99.js";import{e as s}from"./property-03f59dce.js";import{s as t}from"./Component-a61df53a.js";const i=a`:host{display:inline-block}.n-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-surface);border:1px solid var(--n-color-border);font-size:var(--n-font-size-s);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height);padding-block-start:calc(var(--n-space-s)/ 2);padding-block-end:calc(var(--n-space-s)/ 2);padding-inline-start:calc(var(--n-space-s) * 2.5);padding-inline-end:var(--n-space-s);color:var(--n-badge-color,var(--n-color-text-weaker));position:relative}.n-badge:hover{background:var(--n-color-active);color:var(--n-color-text);cursor:default}.n-badge::after{content:"";inline-size:var(--n-space-s);block-size:var(--n-space-s);background:var(--n-badge-chip-color,var(--n-color-status-info));border-radius:var(--n-border-radius-circle);display:inline-block;position:absolute;transform:translateY(-50%);inset-block-start:50%;inset-inline-start:var(--n-space-s);z-index:2}:host([type=success]){--n-badge-chip-color:var(--n-color-status-success)}:host([type=warning]){--n-badge-chip-color:var(--n-color-status-warning)}:host([type=danger]){--n-badge-chip-color:var(--n-color-status-danger)}:host([type=highlight]){--n-badge-chip-color:var(--n-color-status-highlight)}`;let c=class extends o{constructor(){super(...arguments),this.type="info"}render(){return n`<span class="n-badge"><slot></slot></span>`}};c.styles=[t,i],r([s({reflect:!0})],c.prototype,"type",void 0),c=r([e("nord-badge")],c);var l=c;export{l as default};
+import{_ as r,n as e}from"./query-assigned-elements-ef860822.js";import{r as a,s as o,$ as n}from"./lit-element-67e6cd99.js";import{e as s}from"./property-03f59dce.js";import{s as t}from"./Component-a61df53a.js";const i=a`:host{display:inline-block}.n-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-surface);border:1px solid var(--n-color-border);font-size:var(--n-font-size-s);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height);padding-block-start:calc(var(--n-space-s)/ 2);padding-block-end:calc(var(--n-space-s)/ 2);padding-inline-start:calc(var(--n-space-s) * 2.5);padding-inline-end:var(--n-space-s);color:var(--n-badge-color,var(--n-color-text-weaker));white-space:nowrap;position:relative}.n-badge:hover{background:var(--n-color-active);color:var(--n-color-text);cursor:default}.n-badge::after{content:"";inline-size:var(--n-space-s);block-size:var(--n-space-s);background:var(--n-badge-chip-color,var(--n-color-status-info));border-radius:var(--n-border-radius-circle);display:inline-block;position:absolute;transform:translateY(-50%);inset-block-start:50%;inset-inline-start:var(--n-space-s);z-index:2}:host([type=success]){--n-badge-chip-color:var(--n-color-status-success)}:host([type=warning]){--n-badge-chip-color:var(--n-color-status-warning)}:host([type=danger]){--n-badge-chip-color:var(--n-color-status-danger)}:host([type=highlight]){--n-badge-chip-color:var(--n-color-status-highlight)}`;let c=class extends o{constructor(){super(...arguments),this.type="info"}render(){return n`<span class="n-badge"><slot></slot></span>`}};c.styles=[t,i],r([s({reflect:!0})],c.prototype,"type",void 0),c=r([e("nord-badge")],c);var l=c;export{l as default};
 //# sourceMappingURL=Badge.js.map

package/lib/Badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.js","sources":["../src/badge/Badge.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Badge.css\"\n\n/*\n Badges are used to inform users of the status of an object or of an action that’s been taken. Commonly used in tabular data to indicate status.\n \n @status ready\n * @category text\n * @slot - The badge content.\n /\n@customElement(\"nord-badge\")\nexport default class Badge extends LitElement {\n static styles = [componentStyle, style]\n\n /\n The type of badge.\n * Determines the color of the chip shown on the badge.\n */\n @property({ reflect: true }) type?: \"warning\" \| \"success\" \| \"danger\" \| \"highlight\" \| \"info\" = \"info\"\n\n render() {\n return html`\n <span class=\"n-badge\">\n <slot></slot>\n </span>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-badge\": Badge\n }\n}\n"],"names":["Badge","LitElement","constructor","this","type","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"~~k8CAaA~~,IAAqBA,EAArB,cAAmCC,EAAnCC,kCAO+BC,KAAIC,KAA6D,OAE9FC,SACE,OAAOC,CAAI,+CATNN,EAAAO,OAAS,CAACC,EAAgBC,GAMJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA+EZ,EAAAa,UAAA,YAAA,GAPjFb,EAAKU,EAAA,CADzBI,EAAc,eACMd,SAAAA"}
1	+ {"version":3,"file":"Badge.js","sources":["../src/badge/Badge.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Badge.css\"\n\n/*\n Badges are used to inform users of the status of an object or of an action that’s been taken. Commonly used in tabular data to indicate status.\n \n @status ready\n * @category text\n * @slot - The badge content.\n /\n@customElement(\"nord-badge\")\nexport default class Badge extends LitElement {\n static styles = [componentStyle, style]\n\n /\n The type of badge.\n * Determines the color of the chip shown on the badge.\n */\n @property({ reflect: true }) type?: \"warning\" \| \"success\" \| \"danger\" \| \"highlight\" \| \"info\" = \"info\"\n\n render() {\n return html`\n <span class=\"n-badge\">\n <slot></slot>\n </span>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-badge\": Badge\n }\n}\n"],"names":["Badge","LitElement","constructor","this","type","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"q9CAaA,IAAqBA,EAArB,cAAmCC,EAAnCC,kCAO+BC,KAAIC,KAA6D,OAE9FC,SACE,OAAOC,CAAI,+CATNN,EAAAO,OAAS,CAACC,EAAgBC,GAMJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA+EZ,EAAAa,UAAA,YAAA,GAPjFb,EAAKU,EAAA,CADzBI,EAAc,eACMd,SAAAA"}

package/lib/Checkbox.js CHANGED Viewed

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

package/lib/DatePicker.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as i,$ as o,w as a,s as n}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as l}from"./query-2d22378e.js";import{o as d}from"./class-map-f1b6f1fa.js";import{n as c}from"./ref-57ff8ffc.js";import{l as p}from"./if-defined-fe1a64e3.js";import{F as m}from"./FocusableMixin-175ea4d7.js";import{F as h}from"./FormAssociatedMixin-d3124755.js";import{I as u}from"./InputMixin-9334d385.js";import{m as v,p as b,a as g}from"./dates-a8de5b83.js";import{N as f}from"./events-731d0007.js";import{S as y,i as w}from"./Calendar-e5fc9c3b.js";import{L as x}from"./LightDismissController-a2645ae6.js";import{LocalizeController as j}from"./LocalizeController.js";import"./Button.js";import k from"./Icon.js";import"./VisuallyHidden.js";import{s as z}from"./Component-a61df53a.js";import{s as $}from"./FormField-d3767c2e.js";import{s as D}from"./TextField-93a3922f.js";import{isoAdapter as L}from"./date-adapter.js";import{c as F}from"./cond-97c45476.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./repeat-084c4167.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-8b298382.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./collection-800f5002.js";import"./DateSelectEvent.js";import"./ShortcutController-87615e31.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./LightDomController-6d26dea2.js";import"./unsafe-html-61a04601.js";var C=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126v112H7zM35 7v28m70-28v28M7 63h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z"/></svg>',title:"interface-close-small",tags:"nordicon interface close remove small cross delete erase symbol"});const B=i`:host{--n-date-picker-color-overlay:rgba(0, 0, 0, 0.8);--n-date-picker-line-height:1.25;--n-date-picker-toggle-height:34px;color:var(--n-color-text);position:relative}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--n-date-picker-toggle-height);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-accent);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input{padding-inline-end:calc(var(--n-space-s) * 1.6 + var(--n-date-picker-toggle-height))}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-dropdown)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-dropdown)}nord-calendar{box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--n-calendar-padding:0}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0;z-index:10}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}`;k.registerIcon(C),k.registerIcon(A);const E=/[^0-9./-]+/g,I=()=>!1;let O=class extends(h(u(m(n)))){constructor(){super(...arguments),this.dismiss=new x(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new y(this,{target:()=>this.dialog,matchesGesture:w,onSwipeEnd:()=>this.hide(!1)}),this.localize=new j(this,{onLangChange:()=>this.createDateFormatters()}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.dateAdapter=L,this.isDateDisabled=I,this.handleDaySelect=e=>{e.stopPropagation(),this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new f("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new f("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,o=e.selectionStart,a=i.slice(0,o),n=i.slice(o,i.length),r=a.replace(t,""),s=r+n.replace(t,""),l=r.length;e.value=s,e.selectionStart=l,e.selectionEnd=l}(t,E),this.dispatchEvent(new f("input"));const i=this.dateAdapter.parse(t.value,v);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return b(this.value)}set valueAsDate(e){this.value=e?g(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?g(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new f("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new f("close")),e&&this.toggleButton.focus()}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"";return o`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${p(this.name)}" .value="${t}" placeholder="${p(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${c(this.focusableRef)} aria-invalid="${F(this.error,"true")}" aria-describedby="${p(this.getDescribedBy())}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled}" type="button"><nord-icon name="interface-calendar" size="s"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${e?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(e)}</span>`:a}</nord-visually-hidden></button></div>${this.renderError()}<div class="${d({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localize.term("modalHeading")}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?g(e):"",this.dispatchEvent(new f("change"))}};O.styles=[z,$,D,B],e([l(".n-date-toggle",!0)],O.prototype,"toggleButton",void 0),e([l(".n-date-close",!0)],O.prototype,"closeButton",void 0),e([l("nord-calendar",!0)],O.prototype,"calendar",void 0),e([l('[role="dialog"]',!0)],O.prototype,"dialog",void 0),e([s()],O.prototype,"open",void 0),e([r()],O.prototype,"value",void 0),e([r()],O.prototype,"min",void 0),e([r()],O.prototype,"max",void 0),e([r()],O.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],O.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],O.prototype,"dateAdapter",void 0),e([r({attribute:!1})],O.prototype,"isDateDisabled",void 0),O=e([t("nord-date-picker")],O);var S=O;export{S as default};
+import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as i,$ as o,w as a,s as n}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as l}from"./query-2d22378e.js";import{o as d}from"./class-map-f1b6f1fa.js";import{n as c}from"./ref-57ff8ffc.js";import{l as p}from"./if-defined-fe1a64e3.js";import{c as m}from"./interface-close-small-44ababc3.js";import{F as h}from"./FocusableMixin-175ea4d7.js";import{F as u}from"./FormAssociatedMixin-d0d98a92.js";import{I as b}from"./InputMixin-9334d385.js";import{m as v,p as g,a as f}from"./dates-a8de5b83.js";import{N as y}from"./events-731d0007.js";import{S as w,i as x}from"./Calendar-e5fc9c3b.js";import{L as j}from"./LightDismissController-a2645ae6.js";import{LocalizeController as k}from"./LocalizeController.js";import"./Button.js";import z from"./Icon.js";import"./VisuallyHidden.js";import{s as $}from"./Component-a61df53a.js";import{s as D}from"./FormField-d3767c2e.js";import{s as F}from"./TextField-93a3922f.js";import{isoAdapter as C}from"./date-adapter.js";import{c as L}from"./cond-97c45476.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./repeat-084c4167.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-8b298382.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./collection-800f5002.js";import"./DateSelectEvent.js";import"./ShortcutController-87615e31.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./LightDomController-6d26dea2.js";import"./unsafe-html-61a04601.js";var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126v112H7zM35 7v28m70-28v28M7 63h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});const E=i`:host{--n-date-picker-color-overlay:rgba(0, 0, 0, 0.8);--n-date-picker-line-height:1.25;--n-date-picker-toggle-height:34px;color:var(--n-color-text);position:relative}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--n-date-picker-toggle-height);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-accent);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input{padding-inline-end:calc(var(--n-space-s) * 1.6 + var(--n-date-picker-toggle-height))}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-dropdown)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-dropdown)}nord-calendar{box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--n-calendar-padding:0}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0;z-index:10}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}`;z.registerIcon(A),z.registerIcon(m);const B=/[^0-9./-]+/g,I=()=>!1;let S=class extends(u(b(h(n)))){constructor(){super(...arguments),this.dismiss=new j(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new w(this,{target:()=>this.dialog,matchesGesture:x,onSwipeEnd:()=>this.hide(!1)}),this.localize=new k(this,{onLangChange:()=>this.createDateFormatters()}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.dateAdapter=C,this.isDateDisabled=I,this.handleDaySelect=e=>{e.stopPropagation(),this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new y("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new y("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,o=e.selectionStart,a=i.slice(0,o),n=i.slice(o,i.length),r=a.replace(t,""),s=r+n.replace(t,""),l=r.length;e.value=s,e.selectionStart=l,e.selectionEnd=l}(t,B),this.dispatchEvent(new y("input"));const i=this.dateAdapter.parse(t.value,v);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return g(this.value)}set valueAsDate(e){this.value=e?f(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?f(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new y("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new y("close")),e&&this.toggleButton.focus()}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"";return o`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${p(this.name)}" .value="${t}" placeholder="${p(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${c(this.focusableRef)} aria-invalid="${L(this.error,"true")}" aria-describedby="${p(this.getDescribedBy())}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled}" type="button"><nord-icon name="interface-calendar" size="s"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${e?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(e)}</span>`:a}</nord-visually-hidden></button></div>${this.renderError()}<div class="${d({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localize.term("modalHeading")}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?f(e):"",this.dispatchEvent(new y("change"))}};S.styles=[$,D,F,E],e([l(".n-date-toggle",!0)],S.prototype,"toggleButton",void 0),e([l(".n-date-close",!0)],S.prototype,"closeButton",void 0),e([l("nord-calendar",!0)],S.prototype,"calendar",void 0),e([l('[role="dialog"]',!0)],S.prototype,"dialog",void 0),e([s()],S.prototype,"open",void 0),e([r()],S.prototype,"value",void 0),e([r()],S.prototype,"min",void 0),e([r()],S.prototype,"max",void 0),e([r()],S.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],S.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],S.prototype,"dateAdapter",void 0),e([r({attribute:!1})],S.prototype,"isDateDisabled",void 0),S=e([t("nord-date-picker")],S);var O=S;export{O as default};
 //# sourceMappingURL=DatePicker.js.map

package/lib/DatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../../icons/lib/assets/interface-close-small.js","../src/date-picker/DatePicker.ts","../src/common/input.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 21h126v112H7zM35 7v28m70-28v28M7 63h126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z\"/></svg>'\nexport const title = \"interface-close-small\"\nexport const tags = \"nordicon interface close remove small cross delete erase symbol\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport \"../button/Button.js\"\nimport type Button from \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport \"../calendar/Calendar.js\"\nimport { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DateDisabledPredicate } from \"../calendar/Calendar.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst DISALLOWED_CHARACTERS = /[^0-9./-]+/g\nconst isDateDisabled = () => false\n\n/*\n \n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n \n @status ready\n * @category form\n /\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n @query(`.n-date-toggle`, true) private toggleButton!: Button\n @query(`.n-date-close`, true) private closeButton!: HTMLButtonElement\n @query(`nord-calendar`, true) private calendar!: Calendar\n @query(`[role=\"dialog\"]`, true) private dialog!: HTMLElement\n\n private dismiss = new LightDismissController(this, {\n isOpen: () => this.open,\n onDismiss: e => this.hide(e.type !== \"click\"),\n isDismissible: node => node !== this.calendar && node !== this.toggleButton,\n })\n\n private swipe = new SwipeController(this, {\n target: () => this.dialog,\n matchesGesture: isDownwardsSwipe,\n onSwipeEnd: () => this.hide(false),\n })\n\n private localize = new LocalizeController<\"nord-date-picker\">(this, {\n onLangChange: () => this.createDateFormatters(),\n })\n\n /\n Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n * these are used to format dates exclusively for the benefit of screen readers.\n \n We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n * better performance when formatting large number of dates. See:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n /\n private dateFormatLong!: Intl.DateTimeFormat\n\n @state() private open = false\n\n /\n Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n /\n @property() value: string = \"\"\n\n get valueAsDate(): Date \| undefined {\n return parseISODate(this.value)\n }\n\n /\n Get/set the value of the picker as a Date object.\n /\n set valueAsDate(date: Date \| undefined) {\n this.value = date ? printISODate(date) : \"\"\n }\n\n get valueAsNumber(): number {\n return this.valueAsDate?.getTime() ?? NaN\n }\n\n /\n Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n /\n set valueAsNumber(date: number) {\n this.value = date ? printISODate(new Date(date)) : \"\"\n }\n\n /\n Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n /\n @property() min: string = \"\"\n\n /\n Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n /\n @property() max: string = \"\"\n\n /\n Forces the opening direction of the calendar modal to be always left or right.\n * This setting can be useful when the input is smaller than the opening date picker\n * would be as by default the picker always opens towards right.\n /\n @property() direction: \"left\" \| \"right\" = \"right\"\n\n /\n Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n /\n @property({ attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n /\n Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n * Default is IS0-8601 parsing and formatting.\n /\n @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\n\n /\n Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n /\n @property({ attribute: false }) isDateDisabled: DateDisabledPredicate = isDateDisabled\n\n /\n Show the calendar modal, moving focus to the calendar inside.\n /\n show() {\n this.open = true\n /\n Dispatched when the calendar is toggled open.\n /\n this.dispatchEvent(new NordEvent(\"open\"))\n\n // we should only focus once the calendar is visible after render is complete\n this.updateComplete.then(() => this.calendar.focus({ target: \"month\" }))\n }\n\n /\n Hide the calendar modal.\n * @param {boolean} moveFocusToButton controls whether focus should be returned to the date picker's button.\n /\n hide(moveFocusToButton = true) {\n this.open = false\n /\n Dispatched when the calendar is closed.\n */\n this.dispatchEvent(new NordEvent(\"close\"))\n\n if (moveFocusToButton) {\n this.toggleButton.focus()\n }\n }\n\n render() {\n const { valueAsDate } = this\n const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n return html`\n ${this.renderLabel()}\n\n <div class=\"n-input-container\">\n <input\n class=\"n-input\"\n name=${ifDefined(this.name)}\n .value=${formattedDate}\n placeholder=${ifDefined(this.placeholder)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-autocomplete=\"none\"\n @input=${this.handleInputChange}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n autocomplete=\"off\"\n ${ref(this.focusableRef)}\n aria-invalid=${cond(this.error, \"true\")}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n />\n <button class=\"n-date-toggle\" @click=${this.toggleOpen} ?disabled=${this.disabled} type=\"button\">\n <nord-icon name=\"interface-calendar\" size=\"s\"></nord-icon>\n <nord-visually-hidden>\n ${this.localize.term(\"buttonLabel\")}\n ${valueAsDate\n ? html`\n <span>\n , ${this.localize.term(\"selectedDateMessage\")} ${this.dateFormatLong.format(valueAsDate)}\n </span>\n `\n : nothing}\n </nord-visually-hidden>\n </button>\n </div>\n\n ${this.renderError()}\n\n <div\n class=${classMap({\n \"is-left\": this.direction === \"left\",\n \"is-active\": this.open,\n })}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n aria-labelledby=\"dialog-header\"\n >\n <div class=\"n-date-dialog-content\">\n <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n <div class=\"n-date-mobile\">\n <div class=\"n-date-mobile-heading\" id=\"dialog-header\">${this.localize.term(\"modalHeading\")}</div>\n <button class=\"n-date-close\" @click=${this.hide} type=\"button\">\n <nord-icon color=\"var(--n-color-icon)\" name=\"interface-close-small\" size=\"xs\"></nord-icon>\n <nord-visually-hidden>${this.localize.term(\"closeLabel\")}</nord-visually-hidden>\n </button>\n </div>\n <nord-calendar\n value=${this.value}\n min=${this.min}\n max=${this.max}\n .firstDayOfWeek=${this.firstDayOfWeek}\n .isDateDisabled=${this.isDateDisabled}\n @change=${this.handleDaySelect}\n ></nord-calendar>\n\n <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n </div>\n </div>\n `\n }\n\n private createDateFormatters() {\n this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n })\n }\n\n private focusFirst() {\n this.closeButton.focus()\n }\n\n private focusLast() {\n this.calendar.focus({ target: \"day\" })\n }\n\n private handleDaySelect = (e: DateSelectEvent) => {\n e.stopPropagation()\n this.setValue(e.date)\n this.hide()\n }\n\n private toggleOpen = (e: Event) => {\n e.preventDefault()\n\n if (this.open) {\n this.hide(false)\n } else {\n this.show()\n }\n }\n\n private handleBlur = (event: Event) => {\n event.stopPropagation()\n this.dispatchEvent(new NordEvent(\"blur\"))\n }\n\n private handleFocus = (event: Event) => {\n event.stopPropagation()\n this.dispatchEvent(new NordEvent(\"focus\"))\n }\n\n private handleInputChange = (e: Event) => {\n const target = e.target as HTMLInputElement\n\n // clean up any invalid characters\n cleanValue(target, DISALLOWED_CHARACTERS)\n this.dispatchEvent(new NordEvent(\"input\"))\n\n const parsed = this.dateAdapter.parse(target.value, createDate)\n if (parsed \|\| target.value === \"\") {\n this.setValue(parsed)\n }\n }\n\n private setValue(date?: Date) {\n this.value = date ? printISODate(date) : \"\"\n this.dispatchEvent(new NordEvent(\"change\"))\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-date-picker\": DatePicker\n }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n const { value } = inputEl\n const cursor = inputEl.selectionStart as number\n\n const beforeCursor = value.slice(0, cursor)\n const afterCursor = value.slice(cursor, value.length)\n\n const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n const newValue = filteredBeforeCursor + filterAfterCursor\n const newCursor = filteredBeforeCursor.length\n\n inputEl.value = newValue\n inputEl.selectionStart = newCursor\n inputEl.selectionEnd = newCursor\n\n return newValue\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","DISALLOWED_CHARACTERS","isDateDisabled","DatePicker","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","dismiss","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","calendar","toggleButton","swipe","SwipeController","target","dialog","matchesGesture","isDownwardsSwipe","onSwipeEnd","localize","LocalizeController","onLangChange","createDateFormatters","value","min","max","direction","firstDayOfWeek","dateAdapter","isoAdapter","handleDaySelect","stopPropagation","setValue","date","toggleOpen","preventDefault","show","handleBlur","event","dispatchEvent","NordEvent","handleFocus","handleInputChange","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","parsed","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","_b","_a","getTime","NaN","Date","updateComplete","then","focus","moveFocusToButton","render","formattedDate","format","html","renderLabel","ifDefined","name","placeholder","inputId","disabled","required","ref","focusableRef","cond","error","getDescribedBy","term","dateFormatLong","nothing","renderError","classMap","focusLast","focusFirst","Intl","DateTimeFormat","resolvedLang","day","month","year","closeButton","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","state","property","attribute","Number","customElement"],"mappings":"4tDAAe,sOACM,0BACD,0GCFL,+YACM,6BACD,gnJCmCpBA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAElB,MAAMC,EAAwB,cACxBC,EAAiB,KAAM,EAY7B,IAAqBC,EAArB,cAAwCC,EAAoBC,EAAWC,EAAeC,MAAtFC,kCAQUC,KAAAC,QAAU,IAAIC,EAAuBF,KAAM,CACjDG,OAAQ,IAAMH,KAAKI,KACnBC,UAAWC,GAAKN,KAAKO,KAAgB,UAAXD,EAAEE,MAC5BC,cAAeC,GAAQA,IAASV,KAAKW,UAAYD,IAASV,KAAKY,eAGzDZ,KAAAa,MAAQ,IAAIC,EAAgBd,KAAM,CACxCe,OAAQ,IAAMf,KAAKgB,OACnBC,eAAgBC,EAChBC,WAAY,IAAMnB,KAAKO,MAAK,KAGtBP,KAAAoB,SAAW,IAAIC,EAAuCrB,KAAM,CAClEsB,aAAc,IAAMtB,KAAKuB,yBAaVvB,KAAII,MAAG,EAKZJ,KAAKwB,MAAW,GA4BhBxB,KAAGyB,IAAW,GAMdzB,KAAG0B,IAAW,GAOd1B,KAAS2B,UAAqB,QAMkB3B,KAAA4B,eAA8C,EAQ1E5B,KAAW6B,YAAgBC,EAM3B9B,KAAcP,eAA0BA,EA6HhEO,KAAA+B,gBAAmBzB,IACzBA,EAAE0B,kBACFhC,KAAKiC,SAAS3B,EAAE4B,MAChBlC,KAAKO,QAGCP,KAAAmC,WAAc7B,IACpBA,EAAE8B,iBAEEpC,KAAKI,KACPJ,KAAKO,MAAK,GAEVP,KAAKqC,QAIDrC,KAAAsC,WAAcC,IACpBA,EAAMP,kBACNhC,KAAKwC,cAAc,IAAIC,EAAU,UAG3BzC,KAAA0C,YAAeH,IACrBA,EAAMP,kBACNhC,KAAKwC,cAAc,IAAIC,EAAU,WAG3BzC,KAAA2C,kBAAqBrC,IAC3B,MAAMS,EAAST,EAAES,QCjTL,SAAW6B,EAA2BC,GACpD,MAAMrB,MAAEA,GAAUoB,EACZE,EAASF,EAAQG,eAEjBC,EAAexB,EAAMyB,MAAM,EAAGH,GAC9BI,EAAc1B,EAAMyB,MAAMH,EAAQtB,EAAM2B,QAExCC,EAAuBJ,EAAaK,QAAQR,EAAO,IAGnDS,EAAWF,EAFSF,EAAYG,QAAQR,EAAO,IAG/CU,EAAYH,EAAqBD,OAEvCP,EAAQpB,MAAQ8B,EAChBV,EAAQG,eAAiBQ,EACzBX,EAAQY,aAAeD,EDqSrBE,CAAW1C,EAAQvB,GACnBQ,KAAKwC,cAAc,IAAIC,EAAU,UAEjC,MAAMiB,EAAS1D,KAAK6B,YAAY8B,MAAM5C,EAAOS,MAAOoC,IAChDF,GAA2B,KAAjB3C,EAAOS,QACnBxB,KAAKiC,SAASyB,IA3NdG,kBACF,OAAOC,EAAa9D,KAAKwB,OAMvBqC,gBAAY3B,GACdlC,KAAKwB,MAAQU,EAAO6B,EAAa7B,GAAQ,GAGvC8B,4BACF,OAAsC,QAA/BC,UAAAC,EAAAlE,KAAK6D,kCAAaM,iBAAa,IAAAF,EAAAA,EAAAG,IAMpCJ,kBAAc9B,GAChBlC,KAAKwB,MAAQU,EAAO6B,EAAa,IAAIM,KAAKnC,IAAS,GA6CrDG,OACErC,KAAKI,MAAO,EAIZJ,KAAKwC,cAAc,IAAIC,EAAU,SAGjCzC,KAAKsE,eAAeC,MAAK,IAAMvE,KAAKW,SAAS6D,MAAM,CAAEzD,OAAQ,YAO/DR,KAAKkE,GAAoB,GACvBzE,KAAKI,MAAO,EAIZJ,KAAKwC,cAAc,IAAIC,EAAU,UAE7BgC,GACFzE,KAAKY,aAAa4D,QAItBE,SACE,MAAMb,YAAEA,GAAgB7D,KAClB2E,EAAgBd,EAAc7D,KAAK6B,YAAY+C,OAAOf,GAAe,GAE3E,OAAOgB,CAAI,GACP7E,KAAK8E,4EAKIC,EAAU/E,KAAKgF,kBACbL,mBACKI,EAAU/E,KAAKiF,qBACxBjF,KAAKkF,uBACElF,KAAKmF,wBACLnF,KAAKoF,8CAERpF,KAAK2C,8BACL3C,KAAK0C,uBACN1C,KAAKsC,kCAEX+C,EAAIrF,KAAKsF,+BACIC,EAAKvF,KAAKwF,MAAO,8BACbT,EAAU/E,KAAKyF,6DAEGzF,KAAKmC,0BAAwBnC,KAAKmF,2GAGnEnF,KAAKoB,SAASsE,KAAK,kBACnB7B,EACEgB,CAAI,WAEI7E,KAAKoB,SAASsE,KAAK,0BAA0B1F,KAAK2F,eAAef,OAAOf,YAGhF+B,0CAKR5F,KAAK6F,4BAGGC,EAAS,CACf,UAA8B,SAAnB9F,KAAK2B,UAChB,YAAa3B,KAAKI,wDAINJ,KAAKI,KAAO,QAAU,2HAIYJ,KAAK+F,qGAGO/F,KAAKoB,SAASsE,KAAK,6DACrC1F,KAAKO,uIAEjBP,KAAKoB,SAASsE,KAAK,4EAIrC1F,KAAKwB,eACPxB,KAAKyB,aACLzB,KAAK0B,yBACO1B,KAAK4B,oCACL5B,KAAKP,4BACbO,KAAK+B,iFAG6B/B,KAAKgG,iCAMnDzE,uBACNvB,KAAK2F,eAAiB,IAAIM,KAAKC,eAAelG,KAAKoB,SAAS+E,aAAc,CACxEC,IAAK,UACLC,MAAO,OACPC,KAAM,YAIFN,aACNhG,KAAKuG,YAAY/B,QAGXuB,YACN/F,KAAKW,SAAS6D,MAAM,CAAEzD,OAAQ,QA0CxBkB,SAASC,GACflC,KAAKwB,MAAQU,EAAO6B,EAAa7B,GAAQ,GACzClC,KAAKwC,cAAc,IAAIC,EAAU,aAzQ5B/C,EAAM8G,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAElCC,EAAA,CAA9BC,EAAM,kBAAkB,IAAmCpH,EAAAqH,UAAA,oBAAA,GAC9BF,EAAA,CAA7BC,EAAM,iBAAiB,IAA6CpH,EAAAqH,UAAA,mBAAA,GACvCF,EAAA,CAA7BC,EAAM,iBAAiB,IAAiCpH,EAAAqH,UAAA,gBAAA,GACzBF,EAAA,CAA/BC,EAAM,mBAAmB,IAAkCpH,EAAAqH,UAAA,cAAA,GA4BnDF,EAAA,CAARG,KAA4BtH,EAAAqH,UAAA,YAAA,GAKjBF,EAAA,CAAXI,KAA6BvH,EAAAqH,UAAA,aAAA,GA4BlBF,EAAA,CAAXI,KAA2BvH,EAAAqH,UAAA,WAAA,GAMhBF,EAAA,CAAXI,KAA2BvH,EAAAqH,UAAA,WAAA,GAOhBF,EAAA,CAAXI,KAAgDvH,EAAAqH,UAAA,iBAAA,GAMWF,EAAA,CAA3DI,EAAS,CAAEC,UAAW,oBAAqB1G,KAAM2G,UAAwDzH,EAAAqH,UAAA,sBAAA,GAQ1EF,EAAA,CAA/BI,EAAS,CAAEC,WAAW,KAA8CxH,EAAAqH,UAAA,mBAAA,GAMrCF,EAAA,CAA/BI,EAAS,CAAEC,WAAW,KAA+DxH,EAAAqH,UAAA,sBAAA,GApGnErH,EAAUmH,EAAA,CAD9BO,EAAc,qBACM1H,SAAAA"}
1	+ {"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../src/date-picker/DatePicker.ts","../src/common/input.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 21h126v112H7zM35 7v28m70-28v28M7 63h126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport \"../button/Button.js\"\nimport type Button from \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport \"../calendar/Calendar.js\"\nimport { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DateDisabledPredicate } from \"../calendar/Calendar.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst DISALLOWED_CHARACTERS = /[^0-9./-]+/g\nconst isDateDisabled = () => false\n\n/*\n \n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n \n @status ready\n * @category form\n /\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n @query(`.n-date-toggle`, true) private toggleButton!: Button\n @query(`.n-date-close`, true) private closeButton!: HTMLButtonElement\n @query(`nord-calendar`, true) private calendar!: Calendar\n @query(`[role=\"dialog\"]`, true) private dialog!: HTMLElement\n\n private dismiss = new LightDismissController(this, {\n isOpen: () => this.open,\n onDismiss: e => this.hide(e.type !== \"click\"),\n isDismissible: node => node !== this.calendar && node !== this.toggleButton,\n })\n\n private swipe = new SwipeController(this, {\n target: () => this.dialog,\n matchesGesture: isDownwardsSwipe,\n onSwipeEnd: () => this.hide(false),\n })\n\n private localize = new LocalizeController<\"nord-date-picker\">(this, {\n onLangChange: () => this.createDateFormatters(),\n })\n\n /\n Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n * these are used to format dates exclusively for the benefit of screen readers.\n \n We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n * better performance when formatting large number of dates. See:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n /\n private dateFormatLong!: Intl.DateTimeFormat\n\n @state() private open = false\n\n /\n Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n /\n @property() value: string = \"\"\n\n get valueAsDate(): Date \| undefined {\n return parseISODate(this.value)\n }\n\n /\n Get/set the value of the picker as a Date object.\n /\n set valueAsDate(date: Date \| undefined) {\n this.value = date ? printISODate(date) : \"\"\n }\n\n get valueAsNumber(): number {\n return this.valueAsDate?.getTime() ?? NaN\n }\n\n /\n Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n /\n set valueAsNumber(date: number) {\n this.value = date ? printISODate(new Date(date)) : \"\"\n }\n\n /\n Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n /\n @property() min: string = \"\"\n\n /\n Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n /\n @property() max: string = \"\"\n\n /\n Forces the opening direction of the calendar modal to be always left or right.\n * This setting can be useful when the input is smaller than the opening date picker\n * would be as by default the picker always opens towards right.\n /\n @property() direction: \"left\" \| \"right\" = \"right\"\n\n /\n Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n /\n @property({ attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n /\n Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n * Default is IS0-8601 parsing and formatting.\n /\n @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\n\n /\n Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n /\n @property({ attribute: false }) isDateDisabled: DateDisabledPredicate = isDateDisabled\n\n /\n Show the calendar modal, moving focus to the calendar inside.\n /\n show() {\n this.open = true\n /\n Dispatched when the calendar is toggled open.\n /\n this.dispatchEvent(new NordEvent(\"open\"))\n\n // we should only focus once the calendar is visible after render is complete\n this.updateComplete.then(() => this.calendar.focus({ target: \"month\" }))\n }\n\n /\n Hide the calendar modal.\n * @param {boolean} moveFocusToButton controls whether focus should be returned to the date picker's button.\n /\n hide(moveFocusToButton = true) {\n this.open = false\n /\n Dispatched when the calendar is closed.\n */\n this.dispatchEvent(new NordEvent(\"close\"))\n\n if (moveFocusToButton) {\n this.toggleButton.focus()\n }\n }\n\n render() {\n const { valueAsDate } = this\n const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n return html`\n ${this.renderLabel()}\n\n <div class=\"n-input-container\">\n <input\n class=\"n-input\"\n name=${ifDefined(this.name)}\n .value=${formattedDate}\n placeholder=${ifDefined(this.placeholder)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-autocomplete=\"none\"\n @input=${this.handleInputChange}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n autocomplete=\"off\"\n ${ref(this.focusableRef)}\n aria-invalid=${cond(this.error, \"true\")}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n />\n <button class=\"n-date-toggle\" @click=${this.toggleOpen} ?disabled=${this.disabled} type=\"button\">\n <nord-icon name=\"interface-calendar\" size=\"s\"></nord-icon>\n <nord-visually-hidden>\n ${this.localize.term(\"buttonLabel\")}\n ${valueAsDate\n ? html`\n <span>\n , ${this.localize.term(\"selectedDateMessage\")} ${this.dateFormatLong.format(valueAsDate)}\n </span>\n `\n : nothing}\n </nord-visually-hidden>\n </button>\n </div>\n\n ${this.renderError()}\n\n <div\n class=${classMap({\n \"is-left\": this.direction === \"left\",\n \"is-active\": this.open,\n })}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n aria-labelledby=\"dialog-header\"\n >\n <div class=\"n-date-dialog-content\">\n <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n <div class=\"n-date-mobile\">\n <div class=\"n-date-mobile-heading\" id=\"dialog-header\">${this.localize.term(\"modalHeading\")}</div>\n <button class=\"n-date-close\" @click=${this.hide} type=\"button\">\n <nord-icon color=\"var(--n-color-icon)\" name=\"interface-close-small\" size=\"xs\"></nord-icon>\n <nord-visually-hidden>${this.localize.term(\"closeLabel\")}</nord-visually-hidden>\n </button>\n </div>\n <nord-calendar\n value=${this.value}\n min=${this.min}\n max=${this.max}\n .firstDayOfWeek=${this.firstDayOfWeek}\n .isDateDisabled=${this.isDateDisabled}\n @change=${this.handleDaySelect}\n ></nord-calendar>\n\n <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n </div>\n </div>\n `\n }\n\n private createDateFormatters() {\n this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n })\n }\n\n private focusFirst() {\n this.closeButton.focus()\n }\n\n private focusLast() {\n this.calendar.focus({ target: \"day\" })\n }\n\n private handleDaySelect = (e: DateSelectEvent) => {\n e.stopPropagation()\n this.setValue(e.date)\n this.hide()\n }\n\n private toggleOpen = (e: Event) => {\n e.preventDefault()\n\n if (this.open) {\n this.hide(false)\n } else {\n this.show()\n }\n }\n\n private handleBlur = (event: Event) => {\n event.stopPropagation()\n this.dispatchEvent(new NordEvent(\"blur\"))\n }\n\n private handleFocus = (event: Event) => {\n event.stopPropagation()\n this.dispatchEvent(new NordEvent(\"focus\"))\n }\n\n private handleInputChange = (e: Event) => {\n const target = e.target as HTMLInputElement\n\n // clean up any invalid characters\n cleanValue(target, DISALLOWED_CHARACTERS)\n this.dispatchEvent(new NordEvent(\"input\"))\n\n const parsed = this.dateAdapter.parse(target.value, createDate)\n if (parsed \|\| target.value === \"\") {\n this.setValue(parsed)\n }\n }\n\n private setValue(date?: Date) {\n this.value = date ? printISODate(date) : \"\"\n this.dispatchEvent(new NordEvent(\"change\"))\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-date-picker\": DatePicker\n }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n const { value } = inputEl\n const cursor = inputEl.selectionStart as number\n\n const beforeCursor = value.slice(0, cursor)\n const afterCursor = value.slice(cursor, value.length)\n\n const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n const newValue = filteredBeforeCursor + filterAfterCursor\n const newCursor = filteredBeforeCursor.length\n\n inputEl.value = newValue\n inputEl.selectionStart = newCursor\n inputEl.selectionEnd = newCursor\n\n return newValue\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","DISALLOWED_CHARACTERS","isDateDisabled","DatePicker","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","dismiss","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","calendar","toggleButton","swipe","SwipeController","target","dialog","matchesGesture","isDownwardsSwipe","onSwipeEnd","localize","LocalizeController","onLangChange","createDateFormatters","value","min","max","direction","firstDayOfWeek","dateAdapter","isoAdapter","handleDaySelect","stopPropagation","setValue","date","toggleOpen","preventDefault","show","handleBlur","event","dispatchEvent","NordEvent","handleFocus","handleInputChange","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","parsed","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","_b","_a","getTime","NaN","Date","updateComplete","then","focus","moveFocusToButton","render","formattedDate","format","html","renderLabel","ifDefined","name","placeholder","inputId","disabled","required","ref","focusableRef","cond","error","getDescribedBy","term","dateFormatLong","nothing","renderError","classMap","focusLast","focusFirst","Intl","DateTimeFormat","resolvedLang","day","month","year","closeButton","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","state","property","attribute","Number","customElement"],"mappings":"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"}

package/lib/Divider.js ADDED Viewed

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

package/lib/Divider.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/lib/Dropdown.js CHANGED Viewed

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

package/lib/Dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\n\nimport type Popout from \"../popout/Popout.js\"\nimport \"../popout/Popout.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Dropdown.css\"\n\n/*\n Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n \n @status ready\n * @category action\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n /\n@customElement(\"nord-dropdown\")\nexport default class Dropdown extends LitElement {\n static styles = [componentStyle, style]\n\n /\n we delegate focus, to ensure focus does not move to body if you click\n * some whitespace or a dropdown-group heading, as this would close the dropdown\n * @internal\n /\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n @query(\"nord-popout\", true) private popout!: Popout\n\n /\n Set the alignment of the dropdown in relation to the toggle depending on the position.\n * `start` will align the left of the dropdown to the left of the toggle.\n * `end` will align the right of the dropdown to the right of the toggle.\n * A dropdown with a set position of `inline-start` or `inline-end` will switch\n * `start` and `end` to the top and bottom of the dropdown respectively.\n /\n @property({ reflect: true }) align?: Popout[\"align\"]\n\n /\n Set the position of the dropdown in relation to the toggle.\n * Options follow logical properties.\n * `block-start` and `block-end` referring to top and bottom respectively,\n * `inline-start` and `inline-end` referring to left and right respectively.\n /\n @property({ reflect: true }) position?: Popout[\"position\"]\n\n /\n Controls whether the toggle slot expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n connectedCallback() {\n super.connectedCallback()\n\n const toggle = this.querySelector(`[slot=\"toggle\"]`) ~~\|\| undefined~~\n toggle?.setAttribute(\"aria-haspopup\", \"true\")\n }\n\n render() {\n return html`\n <div class=\"n-dropdown\" @focusout=${this.handleBlur}>\n <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n <nord-popout\n id=\"popout\"\n align=${ifDefined(this.align)}\n position=${ifDefined(this.position)}\n @open=${this.handleOpen}\n >\n <div class=\"n-dropdown-content\">\n <slot></slot>\n </div>\n </nord-popout>\n </div>\n `\n }\n\n private handleBlur(e: FocusEvent) {\n const relatedTarget = e.relatedTarget as Node\n\n // safari will set relatedTarget to null when clicking on the trigger button\n // because it doesn't focus buttons on click.\n // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n // so we only run this logic if relatedTarget is set, which sidesteps this issue\n if (relatedTarget && !this.contains(relatedTarget)) {\n this.popout.hide(false)\n }\n }\n\n private handleOpen() {\n this.querySelector(\"nord-dropdown-item\")?.focus()\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-dropdown\": Dropdown\n }\n}\n"],"names":["Dropdown","LitElement","constructor","this","expand","connectedCallback","super","toggle","querySelector","~~undefined~~","~~setAttribute~~","render","html","handleBlur","ifDefined","align","position","handleOpen","e","relatedTarget","contains","~~popout","hide","~~_a","focus","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","reflect","type","Boolean","customElement"],"mappings":"6rCAqBA,IAAqBA,EAArB,cAAsCC,EAAtCC,kCAgC8CC,KAAMC,QAAG,EAErDC,oBACEC,MAAMD,oBAEN,MAAME,EAASJ,KAAKK,cAAc,~~yBAAsBC~~,~~EACxDF,~~SAAAA,~~EAAQG~~,aAAa,gBAAiB,QAGxCC,SACE,OAAOC,CAAI,~~sCAC2BT~~,~~KAAKU~~,iGAI7BC,~~EAAUX~~,~~KAAKY~~,qBACZD,~~EAAUX~~,~~KAAKa~~,~~qBAClBb~~,~~KAAKc~~,sFAUbJ,WAAWK,GACjB,MAAMC,EAAgBD,EAAEC,cAMpBA,~~IAAkBhB~~,~~KAAKiB~~,SAASD,~~IAClChB~~,~~KAAKkB~~,~~OAAOC~~,MAAK,~~GAIbL~~,mBACkC,~~QAAxCM~~,~~EAAApB~~,KAAKK,cAAc,6BAAqB,~~IAAAe~~,GAAAA,EAAEC,~~UAvErCxB~~,~~EAAAyB~~,OAAS,CAACC,EAAgBC,~~GAO1B3B~~,~~EAAiB4B~~,kBAAG,~~IAAK3B~~,~~EAAW2B~~,kBAAmBC,gBAAgB,GAElDC,EAAA,CAA3BC,EAAM,eAAe,~~IAA6B/B~~,~~EAAAgC~~,UAAA,cAAA,GAStBF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAA+~~BlC~~,~~EAAAgC~~,UAAA,aAAA,GAQvBF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,~~KAAqClC~~,~~EAAAgC~~,UAAA,gBAAA,GAKdF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,~~WAAyBpC~~,~~EAAAgC~~,UAAA,cAAA,~~GAhCvChC~~,~~EAAQ8B~~,EAAA,CAD5BO,EAAc,~~kBACMrC~~,SAAAA"}
1	+ {"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\n\nimport type Popout from \"../popout/Popout.js\"\nimport \"../popout/Popout.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Dropdown.css\"\n\n/*\n Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n \n @status ready\n * @category action\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n /\n@customElement(\"nord-dropdown\")\nexport default class Dropdown extends LitElement implements Pick<Popout, \"hide\" \| \"show\"> {\n static styles = [componentStyle, style]\n\n /\n we delegate focus, to ensure focus does not move to body if you click\n * some whitespace or a dropdown-group heading, as this would close the dropdown\n * @internal\n /\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n @query(\"nord-popout\", true) private popout!: Popout\n\n /\n Set the alignment of the dropdown in relation to the toggle depending on the position.\n * `start` will align the left of the dropdown to the left of the toggle.\n * `end` will align the right of the dropdown to the right of the toggle.\n * A dropdown with a set position of `inline-start` or `inline-end` will switch\n * `start` and `end` to the top and bottom of the dropdown respectively.\n /\n @property({ reflect: true }) align?: Popout[\"align\"]\n\n /\n Set the position of the dropdown in relation to the toggle.\n * Options follow logical properties.\n * `block-start` and `block-end` referring to top and bottom respectively,\n * `inline-start` and `inline-end` referring to left and right respectively.\n /\n @property({ reflect: true }) position?: Popout[\"position\"]\n\n /\n Controls whether the toggle slot expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n connectedCallback() {\n super.connectedCallback()\n\n const toggle = this.querySelector(`[slot=\"toggle\"]`)\n toggle?.setAttribute(\"aria-haspopup\", \"true\")\n }\n\n hide(moveFocusToButton?: boolean) {\n this.popout.hide(moveFocusToButton)\n }\n\n show() {\n this.popout.show()\n }\n\n render() {\n return html`\n <div class=\"n-dropdown\" @focusout=${this.handleBlur}>\n <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n <nord-popout\n id=\"popout\"\n align=${ifDefined(this.align)}\n position=${ifDefined(this.position)}\n @open=${this.handleOpen}\n >\n <div class=\"n-dropdown-content\">\n <slot></slot>\n </div>\n </nord-popout>\n </div>\n `\n }\n\n private handleBlur(e: FocusEvent) {\n const relatedTarget = e.relatedTarget as Node\n\n // safari will set relatedTarget to null when clicking on the trigger button\n // because it doesn't focus buttons on click.\n // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n // so we only run this logic if relatedTarget is set, which sidesteps this issue\n if (relatedTarget && !this.contains(relatedTarget)) {\n this.popout.hide(false)\n }\n }\n\n private handleOpen() {\n this.querySelector(\"nord-dropdown-item\")?.focus()\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-dropdown\": Dropdown\n }\n}\n"],"names":["Dropdown","LitElement","constructor","this","expand","connectedCallback","super","toggle","querySelector","setAttribute","hide","moveFocusToButton","popout","show","render","html","handleBlur","ifDefined","align","position","handleOpen","e","relatedTarget","contains","_a","focus","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","reflect","type","Boolean","customElement"],"mappings":"6rCAqBA,IAAqBA,EAArB,cAAsCC,EAAtCC,kCAgC8CC,KAAMC,QAAG,EAErDC,oBACEC,MAAMD,oBAEN,MAAME,EAASJ,KAAKK,cAAc,mBAClCD,SAAAA,EAAQE,aAAa,gBAAiB,QAGxCC,KAAKC,GACHR,KAAKS,OAAOF,KAAKC,GAGnBE,OACEV,KAAKS,OAAOC,OAGdC,SACE,OAAOC,CAAI,sCAC2BZ,KAAKa,iGAI7BC,EAAUd,KAAKe,qBACZD,EAAUd,KAAKgB,qBAClBhB,KAAKiB,sFAUbJ,WAAWK,GACjB,MAAMC,EAAgBD,EAAEC,cAMpBA,IAAkBnB,KAAKoB,SAASD,IAClCnB,KAAKS,OAAOF,MAAK,GAIbU,mBACkC,QAAxCI,EAAArB,KAAKK,cAAc,6BAAqB,IAAAgB,GAAAA,EAAEC,UA/ErCzB,EAAA0B,OAAS,CAACC,EAAgBC,GAO1B5B,EAAiB6B,kBAAG,IAAK5B,EAAW4B,kBAAmBC,gBAAgB,GAElDC,EAAA,CAA3BC,EAAM,eAAe,IAA6BhC,EAAAiC,UAAA,cAAA,GAStBF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAA+BnC,EAAAiC,UAAA,aAAA,GAQvBF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAqCnC,EAAAiC,UAAA,gBAAA,GAKdF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBrC,EAAAiC,UAAA,cAAA,GAhCvCjC,EAAQ+B,EAAA,CAD5BO,EAAc,kBACMtC,SAAAA"}

package/lib/FormAssociatedMixin-d0d98a92.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{_ as t}from"./query-assigned-elements-ef860822.js";import{$ as e}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{E as i}from"./EventController-d99ebeef.js";import{S as o}from"./SlotController-ea6eff46.js";import{N as s}from"./events-731d0007.js";import"./VisuallyHidden.js";class n{constructor(t,e){this.host=t,this.options=e,this.handleFormData=t=>{const{disabled:e,name:r}=this.host;if(e)return;const i=this.options.value();r&&null!=i&&t.formData.append(r,i)},t.addController(this),this.events=new i(t)}hostConnected(){this.host.form&&this.events.listen(this.host.form,"formdata",this.handleFormData)}}function h(i){class h extends i{constructor(){super(...arguments),this.labelSlot=new o(this,"label"),this.errorSlot=new o(this,"error"),this.hintSlot=new o(this,"hint"),this.formData=new n(this,{value:()=>this.formValue}),this.inputId="input",this.errorId="error",this.hintId="hint",this.label="",this.hideLabel=!1,this.required=!1}get formValue(){return this.value}handleInput(t){t.stopPropagation();const e=t.target;this.value=e.value,this.dispatchEvent(new s("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new s("change"))}renderLabel(){const t=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot></label><div class="n-caption n-hint" id="${this.hintId}" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div>`;return this.hideLabel?e`<nord-visually-hidden>${t}</nord-visually-hidden>`:e`<div class="n-label-container">${t}</div>`}renderError(){return e`<div class="n-caption n-error" id="${this.errorId}" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div>`}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?`${this.hintId} ${this.errorId}`:t?this.hintId:e?this.errorId:void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return Boolean(this.hint)\|\|this.hintSlot.hasContent}get hasError(){return Boolean(this.error)\|\|this.errorSlot.hasContent}}return t([r()],h.prototype,"label",void 0),t([r()],h.prototype,"hint",void 0),t([r({type:Boolean,attribute:"hide-label"})],h.prototype,"hideLabel",void 0),t([r()],h.prototype,"placeholder",void 0),t([r()],h.prototype,"error",void 0),t([r({type:Boolean})],h.prototype,"required",void 0),h}export{h as F};
2	+ //# sourceMappingURL=FormAssociatedMixin-d0d98a92.js.map

package/lib/FormAssociatedMixin-d0d98a92.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FormAssociatedMixin-d0d98a92.js","sources":["../src/common/controllers/FormDataController.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\nimport { EventController } from \"./EventController.js\"\n\ntype FormDataOptions = {\n value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n private events: EventController\n constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n host.addController(this)\n this.events = new EventController(host)\n }\n\n hostConnected() {\n if (this.host.form) {\n this.events.listen(this.host.form, \"formdata\", this.handleFormData)\n }\n }\n\n private handleFormData = (e: FormDataEvent) => {\n const { disabled, name } = this.host\n\n if (disabled) {\n return\n }\n\n const value = this.options.value()\n\n if (name && value != null) {\n e.formData.append(name, value)\n }\n }\n}\n","/* eslint-disable max-classes-per-file */\nimport { html, LitElement, TemplateResult } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { FormDataController } from \"../controllers/FormDataController.js\"\nimport { SlotController } from \"../controllers/SlotController.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\nimport \"../../visually-hidden/VisuallyHidden.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n label: string\n required: boolean\n hint?: string\n hideLabel: boolean\n placeholder?: string\n error?: string\n expand: boolean\n\n protected inputId: string\n protected errorId: string\n protected hintId: string\n protected labelSlot: SlotController\n protected hintSlot: SlotController\n protected errorSlot: SlotController\n protected formData: FormDataController\n\n protected get formValue(): string | undefined\n protected get hasError(): boolean\n protected get hasHint(): boolean\n\n protected handleChange(e: Event): void\n protected handleInput(e: Event): void\n protected renderLabel(): TemplateResult\n protected renderError(): TemplateResult\n protected getDescribedBy(): string | undefined\n protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n /**\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n class FormAssociatedElement extends superClass {\n protected labelSlot = new SlotController(this, \"label\")\n protected errorSlot = new SlotController(this, \"error\")\n protected hintSlot = new SlotController(this, \"hint\")\n protected formData = new FormDataController(this, { value: () => this.formValue })\n\n protected get formValue() {\n return this.value\n }\n\n protected inputId = \"input\"\n protected errorId = \"error\"\n protected hintId = \"hint\"\n\n /**\n * Label for the input.\n */\n @property() label: string = \"\"\n\n /**\n * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n */\n @property() hint?: string\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n /**\n * Placeholder text to display within the input.\n */\n @property() placeholder?: string\n\n /**\n * Optional error to be shown with the input. Alternatively use the error slot.\n */\n @property() error?: string\n\n /**\n * Determines whether the input is required or not.\n * An input 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({ type: Boolean }) required = false\n\n protected handleInput(e: Event) {\n e.stopPropagation()\n const target = e.target as NativeInputElement\n this.value = target.value\n\n /**\n * Fired as the user types into the input.\n */\n this.dispatchEvent(new NordEvent(\"input\"))\n }\n\n protected handleChange(e: Event) {\n e.stopPropagation()\n\n /**\n * Fired whenever the input's value is changed via user interaction.\n */\n this.dispatchEvent(new NordEvent(\"change\"))\n }\n\n protected renderLabel() {\n const label = html`\n <label for=${this.inputId}>\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n <slot name=\"hint\">${this.hint}</slot>\n </div>\n `\n\n return this.hideLabel\n ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n : html`<div class=\"n-label-container\">${label}</div>`\n }\n\n protected renderError() {\n return html`\n <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n <slot name=\"error\">${this.error}</slot>\n </div>\n `\n }\n\n protected getDescribedBy() {\n const { hasHint, hasError } = this\n\n if (hasHint && hasError) {\n return `${this.hintId} ${this.errorId}`\n }\n if (hasHint) {\n return this.hintId\n }\n if (hasError) {\n return this.errorId\n }\n\n return undefined\n }\n\n protected getInvalid() {\n return this.hasError ? \"true\" : undefined\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\n return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormDataController","constructor","host","options","this","handleFormData","e","disabled","name","value","formData","append","addController","events","EventController","hostConnected","form","listen","FormAssociatedMixin","superClass","FormAssociatedElement","labelSlot","SlotController","errorSlot","hintSlot","formValue","inputId","errorId","hintId","label","hideLabel","required","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","prototype","type","attribute"],"mappings":"iUAQaA,EAEXC,YAAoBC,EAA4DC,GAA5DC,KAAIF,KAAJA,EAA4DE,KAAOD,QAAPA,EAWxEC,KAAAC,eAAkBC,IACxB,MAAMC,SAAEA,EAAQC,KAAEA,GAASJ,KAAKF,KAEhC,GAAIK,EACF,OAGF,MAAME,EAAQL,KAAKD,QAAQM,QAEvBD,GAAiB,MAATC,GACVH,EAAEI,SAASC,OAAOH,EAAMC,IApB1BP,EAAKU,cAAcR,MACnBA,KAAKS,OAAS,IAAIC,EAAgBZ,GAGpCa,gBACMX,KAAKF,KAAKc,MACZZ,KAAKS,OAAOI,OAAOb,KAAKF,KAAKc,KAAM,WAAYZ,KAAKC,iBCwBpD,SAAUa,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApClB,kCACYG,KAASiB,UAAG,IAAIC,EAAelB,KAAM,SACrCA,KAASmB,UAAG,IAAID,EAAelB,KAAM,SACrCA,KAAQoB,SAAG,IAAIF,EAAelB,KAAM,QACpCA,KAAAM,SAAW,IAAIV,EAAmBI,KAAM,CAAEK,MAAO,IAAML,KAAKqB,YAM5DrB,KAAOsB,QAAG,QACVtB,KAAOuB,QAAG,QACVvB,KAAMwB,OAAG,OAKPxB,KAAKyB,MAAW,GAU0BzB,KAAS0B,WAAG,EAiBrC1B,KAAQ2B,UAAG,EAtC1BN,gBACZ,OAAOrB,KAAKK,MAuCJuB,YAAY1B,GACpBA,EAAE2B,kBACF,MAAMC,EAAS5B,EAAE4B,OACjB9B,KAAKK,MAAQyB,EAAOzB,MAKpBL,KAAK+B,cAAc,IAAIC,EAAU,UAGzBC,aAAa/B,GACrBA,EAAE2B,kBAKF7B,KAAK+B,cAAc,IAAIC,EAAU,WAGzBE,cACR,MAAMT,EAAQU,CAAI,eACHnC,KAAKsB,+BACKtB,KAAKyB,yDAGOzB,KAAKwB,qBAAmBxB,KAAKoC,8BAC1CpC,KAAKqC,oBAI7B,OAAOrC,KAAK0B,UACRS,CAAI,yBAAyBV,2BAC7BU,CAAI,kCAAkCV,UAGlCa,cACR,OAAOH,CAAI,sCAC2BnC,KAAKuB,mCAAiCvB,KAAKuC,gCACxDvC,KAAKwC,qBAKtBC,iBACR,MAAML,QAAEA,EAAOG,SAAEA,GAAavC,KAE9B,OAAIoC,GAAWG,EACN,GAAGvC,KAAKwB,UAAUxB,KAAKuB,UAE5Ba,EACKpC,KAAKwB,OAEVe,EACKvC,KAAKuB,aADd,EAOQmB,aACR,OAAO1C,KAAKuC,SAAW,YAASI,EAGpBP,cACZ,OAAOQ,QAAQ5C,KAAKqC,OAASrC,KAAKoB,SAASyB,WAG/BN,eACZ,OAAOK,QAAQ5C,KAAKwC,QAAUxC,KAAKmB,UAAU0B,YAIjD,OAtGcC,EAAA,CAAXC,KAA6B/B,EAAAgC,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwB/B,EAAAgC,UAAA,YAAA,GAK6BF,EAAA,CAArDC,EAAS,CAAEE,KAAML,QAASM,UAAW,gBAAiClC,EAAAgC,UAAA,iBAAA,GAK3DF,EAAA,CAAXC,KAA+B/B,EAAAgC,UAAA,mBAAA,GAKpBF,EAAA,CAAXC,KAAyB/B,EAAAgC,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAML,WAA2B5B,EAAAgC,UAAA,gBAAA,GA2ExChC"}

package/lib/Input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as s,w as n,$ as i,s as o}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe1a64e3.js";import{o as l}from"./class-map-f1b6f1fa.js";import{n as d}from"./ref-57ff8ffc.js";import{o as p}from"./unsafe-html-61a04601.js";import{F as m}from"./FocusableMixin-175ea4d7.js";import{F as c}from"./FormAssociatedMixin-d3124755.js";import{I as h}from"./InputMixin-9334d385.js";import{s as f}from"./Component-a61df53a.js";import{s as u}from"./FormField-d3767c2e.js";import{s as v}from"./TextField-93a3922f.js";import{S as $}from"./SlotController-ea6eff46.js";import{c as b}from"./cond-97c45476.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const y=s`.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)}slot[name=end],slot[name=start]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;inset-block-start:0;color:var(--n-color-icon)}slot[name=end]{inset-inline-end:var(--n-space-m)}.has-start .n-input{padding-inline-start:var(--n-space-xl)}.has-end .n-input{padding-inline-end:calc(var(--n-space-xl) + var(--n-space-s))}::slotted(svg),svg{block-size:var(--n-size-icon-s)!important;inline-size:var(--n-size-icon-s)!important}`;let j=class extends(c(h(m(o)))){constructor(){super(...arguments),this.startSlot=new $(this,"start"),this.endSlot=new $(this,"end"),this.type="text"}render(){var e;const t="search"===this.type||this.startSlot.hasContent,s="number"===this.type,o="search"===this.type?p('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):n;return i`${this.renderLabel()}<div class="${l({"n-input-container":!0,"has-start":t,"has-end":this.endSlot.hasContent})}"><slot name="${this.startSlot.slotName}" ?hidden="${!t}">${o}</slot><input ${d(this.focusableRef)} id="${this.inputId}" class="n-input" type="${s?"text":this.type}" inputmode="${b(s,"numeric")}" pattern="${b(s,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInput}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false"><slot name="${this.endSlot.slotName}" ?hidden="${this.endSlot.isEmpty}"></slot></div>${this.renderError()}`}handleKeydown(e){const{form:t}=this;if("Enter"===e.key&&t){const e=function(e){let t=e.querySelector('button[type="submit"]');!t&&e.id&&(t=e.getRootNode().querySelector(`button[form=${e.id}]`));return t}(t);setTimeout((()=>null==e?void 0:e.click()),0)}}};j.styles=[f,u,v,y],e([r()],j.prototype,"type",void 0),j=e([t("nord-input")],j);var g=j;export{g as default};
+import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as s,w as n,$ as i,s as o}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe1a64e3.js";import{o as l}from"./class-map-f1b6f1fa.js";import{n as d}from"./ref-57ff8ffc.js";import{o as p}from"./unsafe-html-61a04601.js";import{F as m}from"./FocusableMixin-175ea4d7.js";import{F as c}from"./FormAssociatedMixin-d0d98a92.js";import{I as h}from"./InputMixin-9334d385.js";import{s as f}from"./Component-a61df53a.js";import{s as u}from"./FormField-d3767c2e.js";import{s as v}from"./TextField-93a3922f.js";import{S as y}from"./SlotController-ea6eff46.js";import{c as $}from"./cond-97c45476.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const b=s`.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)}slot[name=end],slot[name=start]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;inset-block-start:0;color:var(--n-color-icon)}slot[name=end]{inset-inline-end:var(--n-space-m)}.has-start .n-input{padding-inline-start:var(--n-space-xl)}.has-end .n-input{padding-inline-end:calc(var(--n-space-xl) + var(--n-space-s))}::slotted(svg),svg{block-size:var(--n-size-icon-s)!important;inline-size:var(--n-size-icon-s)!important}`;let j=class extends(c(h(m(o)))){constructor(){super(...arguments),this.startSlot=new y(this,"start"),this.endSlot=new y(this,"end"),this.type="text",this.expand=!1}render(){var e;const t="search"===this.type||this.startSlot.hasContent,s="number"===this.type,o="search"===this.type?p('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):n;return i`${this.renderLabel()}<div class="${l({"n-input-container":!0,"has-start":t,"has-end":this.endSlot.hasContent})}"><slot name="${this.startSlot.slotName}" ?hidden="${!t}">${o}</slot><input ${d(this.focusableRef)} id="${this.inputId}" class="n-input" type="${s?"text":this.type}" inputmode="${$(s,"numeric")}" pattern="${$(s,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInput}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false"><slot name="${this.endSlot.slotName}" ?hidden="${this.endSlot.isEmpty}"></slot></div>${this.renderError()}`}handleKeydown(e){const{form:t}=this;if("Enter"===e.key&&t){const e=function(e){let t=e.querySelector('button[type="submit"]');!t&&e.id&&(t=e.getRootNode().querySelector(`button[form=${e.id}]`));return t}(t);setTimeout((()=>null==e?void 0:e.click()),0)}}};j.styles=[f,u,v,b],e([r()],j.prototype,"type",void 0),e([r({reflect:!0,type:Boolean})],j.prototype,"expand",void 0),j=e([t("nord-input")],j);var g=j;export{g as default};
 //# sourceMappingURL=Input.js.map

package/lib/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","sources":["../src/input/Input.ts","../../icons/lib/assets/navigation-search.js","../src/common/form.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Input.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { getSubmitButton } from \"../common/form.js\"\n\n/*\n Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n \n @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon or prefix at the start of the input.\n * @slot end - Optional slot used to place an icon or suffix at the end of the input.\n /\n@customElement(\"nord-input\")\nexport default class Input extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n private startSlot = new SlotController(this, \"start\")\n private endSlot = new SlotController(this, \"end\")\n\n /\n The type of the input.\n /\n @property() type: \"text\" \| \"email\" \| \"password\" \| \"tel\" \| \"url\" \| \"search\" \| \"number\" = \"text\"\n\n render() {\n const startSlotHasContent = this.type === \"search\" \|\| this.startSlot.hasContent\n const isNumber = this.type === \"number\"\n const defaultIcon = this.type === \"search\" ? unsafeHTML(searchIcon) : nothing\n\n return html`\n ${this.renderLabel()}\n\n <div\n class=${classMap({\n \"n-input-container\": true,\n \"has-start\": startSlotHasContent,\n \"has-end\": this.endSlot.hasContent,\n })}\n >\n <slot name=${this.startSlot.slotName} ?hidden=${!startSlotHasContent}>${defaultIcon}</slot>\n <input\n ${ref(this.focusableRef)}\n id=${this.inputId}\n class=\"n-input\"\n type=${isNumber ? \"text\" : this.type}\n inputmode=${cond(isNumber, \"numeric\")}\n pattern=${cond(isNumber, \"[0-9]\")}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n .value=${this.value ?? \"\"}\n placeholder=${ifDefined(this.placeholder)}\n @input=${this.handleInput}\n @change=${this.handleChange}\n @keydown=${this.handleKeydown}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n spellcheck=\"false\"\n />\n <slot name=${this.endSlot.slotName} ?hidden=${this.endSlot.isEmpty}></slot>\n </div>\n\n ${this.renderError()}\n `\n }\n\n private handleKeydown(e: KeyboardEvent) {\n const { form } = this\n\n if (e.key === \"Enter\" && form) {\n const button = getSubmitButton(form)\n setTimeout(() => button?.click(), 0)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-input\": Input\n }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n","/*\n Finds a form's submit button. First looking for a button inside form,\n * and then looking for a button whose form attribute is equal to the ID of the form.\n */\nexport function getSubmitButton(form: HTMLFormElement): HTMLButtonElement \| null {\n // we can get away with just looking for native <button> elements,\n // rather than our component, since our button component renders one to light dom.\n let button = form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)\n\n if (!button && form.id) {\n const root = form.getRootNode() as ShadowRoot \| Document\n button = root.querySelector<HTMLButtonElement>(`button[form=${form.id}]`)\n }\n\n return button\n}\n"],"names":["Input","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","startSlot","SlotController","endSlot","type","render","startSlotHasContent","hasContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","classMap","slotName","ref","focusableRef","inputId","cond","disabled","required","ifDefined","name","_a","value","placeholder","handleInput","handleChange","handleKeydown","getDescribedBy","getInvalid","isEmpty","renderError","e","form","key","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","prototype","customElement"],"mappings":"y+CAiCA,IAAqBA,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,MAAjFC,kCAGUC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAOG,QAAG,IAAID,EAAeF,KAAM,OAK/BA,KAAII,KAAwE,~~OAExFC~~,eACE,MAAMC,EAAoC,~~WAAdN~~,KAAKI,MAAqBJ,KAAKC,~~UAAUM~~,WAC/DC,EAAyB,~~WAAdR~~,KAAKI,~~KAChBK~~,EAA4B,~~WAAdT~~,KAAKI,~~KAAoBM~~,~~EC/ClC~~,~~iQD+C2DC~~,EAEtE,OAAOC,CAAI,~~GACPZ~~,~~KAAKa~~,4BAGGC,EAAS,CACf,qBAAqB,EACrB,YAAaR,EACb,~~UAAWN~~,KAAKG,~~QAAQI~~,~~6BAGbP~~,KAAKC,~~UAAUc~~,uBAAqBT,MAAuBG,kBAEpEO,~~EAAIhB~~,~~KAAKiB~~,~~qBACNjB~~,~~KAAKkB~~,kCAEHV,EAAW,~~OAASR~~,KAAKI,~~oBACpBe~~,EAAKX,EAAU,wBACjBW,EAAKX,EAAU,~~yBACbR~~,~~KAAKoB~~,~~wBACLpB~~,~~KAAKqB~~,mBACVC,~~EAAUtB~~,~~KAAKuB~~,kBACH,QAAVC,~~EAAAxB~~,~~KAAKyB~~,aAAK,IAAAD,EAAAA,EAAI,oBACTF,~~EAAUtB~~,~~KAAK0B,yBACpB1B,~~KAAK2B,~~yBACJ3B~~,KAAK4B,~~2BACJ5B~~,KAAK6B,~~oCACGP~~,~~EAAUtB,~~KAAK8B,~~oCACnBR~~,~~EAAUtB~~,KAAK+B,~~iDAGnB/B~~,KAAKG,~~QAAQY~~,~~sBAAoBf~~,KAAKG,~~QAAQ6B~~,~~yBAG3DhC~~,~~KAAKiC~~,gBAIHJ,cAAcK,GACpB,MAAMC,KAAEA,~~GAASnC~~,KAEjB,GAAc,~~UAAVkC~~,EAAEE,KAAmBD,EAAM,CAC7B,MAAME,~~EEtFN~~,SAA0BF,GAG9B,IAAIE,EAASF,EAAKG,cAAiC,0BAE9CD,GAAUF,EAAKI,KAElBF,EADaF,EAAKK,cACJF,cAAiC,eAAeH,EAAKI,QAGrE,OAAOF,~~EF4EYI~~,CAAgBN,GAC/BO,YAAW,IAAML,aAAA,EAAAA,EAAQM,SAAS,~~MAzD~~/~~BjD~~,~~EAAMkD~~,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAQrDC,EAAA,CAAXC,~~KAA6FxD~~,~~EAAAyD~~,UAAA,YAAA,~~GAT3EzD~~,~~EAAKuD~~,EAAA,~~CADzBG~~,EAAc,~~eACM1D~~,SAAAA"}
1	+ {"version":3,"file":"Input.js","sources":["../src/input/Input.ts","../../icons/lib/assets/navigation-search.js","../src/common/form.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Input.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { getSubmitButton } from \"../common/form.js\"\n\n/*\n Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n \n @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon or prefix at the start of the input.\n * @slot end - Optional slot used to place an icon or suffix at the end of the input.\n /\n@customElement(\"nord-input\")\nexport default class Input extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n private startSlot = new SlotController(this, \"start\")\n private endSlot = new SlotController(this, \"end\")\n\n /\n The type of the input.\n /\n @property() type: \"text\" \| \"email\" \| \"password\" \| \"tel\" \| \"url\" \| \"search\" \| \"number\" = \"text\"\n\n /\n Controls whether the input expands to fill the width of its container.\n /\n @property({ reflect: true, type: Boolean }) expand = false\n\n render() {\n const startSlotHasContent = this.type === \"search\" \|\| this.startSlot.hasContent\n const isNumber = this.type === \"number\"\n const defaultIcon = this.type === \"search\" ? unsafeHTML(searchIcon) : nothing\n\n return html`\n ${this.renderLabel()}\n\n <div\n class=${classMap({\n \"n-input-container\": true,\n \"has-start\": startSlotHasContent,\n \"has-end\": this.endSlot.hasContent,\n })}\n >\n <slot name=${this.startSlot.slotName} ?hidden=${!startSlotHasContent}>${defaultIcon}</slot>\n <input\n ${ref(this.focusableRef)}\n id=${this.inputId}\n class=\"n-input\"\n type=${isNumber ? \"text\" : this.type}\n inputmode=${cond(isNumber, \"numeric\")}\n pattern=${cond(isNumber, \"[0-9]\")}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n .value=${this.value ?? \"\"}\n placeholder=${ifDefined(this.placeholder)}\n @input=${this.handleInput}\n @change=${this.handleChange}\n @keydown=${this.handleKeydown}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n spellcheck=\"false\"\n />\n <slot name=${this.endSlot.slotName} ?hidden=${this.endSlot.isEmpty}></slot>\n </div>\n\n ${this.renderError()}\n `\n }\n\n private handleKeydown(e: KeyboardEvent) {\n const { form } = this\n\n if (e.key === \"Enter\" && form) {\n const button = getSubmitButton(form)\n setTimeout(() => button?.click(), 0)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-input\": Input\n }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n","/*\n Finds a form's submit button. First looking for a button inside form,\n * and then looking for a button whose form attribute is equal to the ID of the form.\n */\nexport function getSubmitButton(form: HTMLFormElement): HTMLButtonElement \| null {\n // we can get away with just looking for native <button> elements,\n // rather than our component, since our button component renders one to light dom.\n let button = form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)\n\n if (!button && form.id) {\n const root = form.getRootNode() as ShadowRoot \| Document\n button = root.querySelector<HTMLButtonElement>(`button[form=${form.id}]`)\n }\n\n return button\n}\n"],"names":["Input","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","startSlot","SlotController","endSlot","type","expand","render","startSlotHasContent","hasContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","classMap","slotName","ref","focusableRef","inputId","cond","disabled","required","ifDefined","name","_a","value","placeholder","handleInput","handleChange","handleKeydown","getDescribedBy","getInvalid","isEmpty","renderError","e","form","key","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","prototype","reflect","Boolean","customElement"],"mappings":"y+CAiCA,IAAqBA,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,MAAjFC,kCAGUC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAOG,QAAG,IAAID,EAAeF,KAAM,OAK/BA,KAAII,KAAwE,OAK5CJ,KAAMK,QAAG,EAErDC,eACE,MAAMC,EAAoC,WAAdP,KAAKI,MAAqBJ,KAAKC,UAAUO,WAC/DC,EAAyB,WAAdT,KAAKI,KAChBM,EAA4B,WAAdV,KAAKI,KAAoBO,ECpDlC,iQDoD2DC,EAEtE,OAAOC,CAAI,GACPb,KAAKc,4BAGGC,EAAS,CACf,qBAAqB,EACrB,YAAaR,EACb,UAAWP,KAAKG,QAAQK,6BAGbR,KAAKC,UAAUe,uBAAqBT,MAAuBG,kBAEpEO,EAAIjB,KAAKkB,qBACNlB,KAAKmB,kCAEHV,EAAW,OAAST,KAAKI,oBACpBgB,EAAKX,EAAU,wBACjBW,EAAKX,EAAU,yBACbT,KAAKqB,wBACLrB,KAAKsB,mBACVC,EAAUvB,KAAKwB,kBACH,QAAVC,EAAAzB,KAAK0B,aAAK,IAAAD,EAAAA,EAAI,oBACTF,EAAUvB,KAAK2B,yBACpB3B,KAAK4B,yBACJ5B,KAAK6B,2BACJ7B,KAAK8B,oCACGP,EAAUvB,KAAK+B,oCACnBR,EAAUvB,KAAKgC,iDAGnBhC,KAAKG,QAAQa,sBAAoBhB,KAAKG,QAAQ8B,yBAG3DjC,KAAKkC,gBAIHJ,cAAcK,GACpB,MAAMC,KAAEA,GAASpC,KAEjB,GAAc,UAAVmC,EAAEE,KAAmBD,EAAM,CAC7B,MAAME,EE3FN,SAA0BF,GAG9B,IAAIE,EAASF,EAAKG,cAAiC,0BAE9CD,GAAUF,EAAKI,KAElBF,EADaF,EAAKK,cACJF,cAAiC,eAAeH,EAAKI,QAGrE,OAAOF,EFiFYI,CAAgBN,GAC/BO,YAAW,IAAML,aAAA,EAAAA,EAAQM,SAAS,MA9D/BlD,EAAMmD,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAQrDC,EAAA,CAAXC,KAA6FzD,EAAA0D,UAAA,YAAA,GAKlDF,EAAA,CAA3CC,EAAS,CAAEE,SAAS,EAAMjD,KAAMkD,WAAyB5D,EAAA0D,UAAA,cAAA,GAdvC1D,EAAKwD,EAAA,CADzBK,EAAc,eACM7D,SAAAA"}

package/lib/Layout.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as t,s as a,$ as i}from"./lit-element-67e6cd99.js";import{e as s}from"./property-03f59dce.js";import{t as o}from"./state-70f38ceb.js";import{i as r}from"./query-2d22378e.js";import{o as d}from"./class-map-f1b6f1fa.js";import{D as l}from"./DirectionController-8b298382.js";import{L as h}from"./LightDismissController-a2645ae6.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as v}from"./cond-97c45476.js";import{f as p}from"./fsm-50373df9.js";import{c as g}from"./number-c3ab3e95.js";import{s as u}from"./Component-a61df53a.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";class m{constructor(e,n,t){this.host=e,this.onChange=t,this.handleChange=()=>{var e;null===(e=this.onChange)||void 0===e||e.call(this),this.host.requestUpdate()},e.addController(this),this.mq="string"==typeof n?matchMedia(n):n}get matches(){return this.mq.matches}hostConnected(){this.mq.addListener(this.handleChange)}hostDisconnected(){this.mq.removeListener(this.handleChange)}}const k=t`:host{--n-layout-padding:var(--n-space-l);--n-nav-transition-duration:0.3s;background:var(--n-color-background);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--n-color-background);inset-block-start:0;min-block-size:100%;position:absolute}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--n-nav-width);z-index:2;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{inset-inline-end:0;z-index:1;inline-size:100%}main{padding:var(--n-layout-padding)}: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{transition:transform var(--n-nav-transition-duration) ease}[data-screen=wide]:is([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .n-layout-nav{transition:transform var(--n-nav-transition-duration) ease;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] .n-layout-main{inline-size:calc(100% - var(--n-nav-width))}.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 .2s .15s ease;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}@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:0}`,f=matchMedia("(min-width: 768px)"),b=function(e,n,t=JSON.stringify,a=JSON.parse){return{get value(){const t=localStorage.getItem(e);try{return t?a(t):n}catch(e){return n}},set value(n){localStorage.setItem(e,t(n))}}}("nord-layout.navWidth",250),y=p({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 T=class extends a{constructor(){super(...arguments),this.navWidth=b.value,this.isDragging=!1,this.navState=f.matches?"opened":"closed",this.navOpen="opened"===this.navState,this.padding="m",this.lightDismiss=new h(this,{isOpen:()=>"opened"===this.navState&&!this.mq.matches,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl&&e!==this.navToggleEl}),this.mq=new m(this,f,(()=>this.handleMediaQueryChange())),this.direction=new l(this),this.handleMediaQueryChange=()=>{this.navTransition(this.mq.matches?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=e=>{e.target!==this.navToggleEl&&this.navTransition("focusout")},this.handleMouseEnter=()=>{this.mq.matches&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}render(){const{navWidth:e,navState:n,mq:t,isDragging:a,direction:s}=this,o="opened"===n&&t.matches?e:250;return i`<div class="${d({"n-layout":!0,"n-rtl":s.isRTL,"n-dragging":a})}" style="${`--n-nav-width: ${o}px`}" data-nav="${n}" data-screen="${t.matches?"wide":"narrow"}"><div class="n-layout-nav" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${v("opened"===n,this.startDragging)}" @pointermove="${v(a,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}"></div></div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleClick}"><slot name="header"></slot><main><slot></slot></main></div></div>`}getToggleElement(){if(this.cleanup(),!this.navToggle)return;const e=this.getRootNode().querySelector(`#${this.navToggle}`);e&&(this.navToggleEl=e,this.navToggleEl.addEventListener("click",this.handleToggleClick),this.navToggleEl.addEventListener("mouseenter",this.handleMouseEnter),this.navToggleEl.addEventListener("mouseleave",this.handleMouseLeave))}cleanup(){this.navToggleEl&&(this.navToggleEl.removeEventListener("click",this.handleToggleClick),this.navToggleEl.removeEventListener("mouseenter",this.handleMouseEnter),this.navToggleEl.removeEventListener("mouseleave",this.handleMouseLeave),this.navToggleEl=void 0)}handleNavWidthChange(){b.value=this.navWidth}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&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(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(e){this.navState=y.transition(this.navState,e)}handleClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(e){const{navWidth:n,direction:{isLTR:t}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(n+(t?-30:30));break;case"ArrowRight":this.setNavWidth(n+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}e.preventDefault()}setNavWidth(e){this.navWidth=g(Math.round(e),220,400)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(e){const n=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(n),this.navTransition(n>=100?"open":"close")}};T.styles=[u,k],e([r(".n-layout-nav",!0)],T.prototype,"navEl",void 0),e([o()],T.prototype,"navWidth",void 0),e([o()],T.prototype,"isDragging",void 0),e([o()],T.prototype,"navState",void 0),e([s({reflect:!0,type:Boolean,attribute:"nav-open"})],T.prototype,"navOpen",void 0),e([s({attribute:"nav-toggle"})],T.prototype,"navToggle",void 0),e([s({reflect:!0})],T.prototype,"padding",void 0),e([c("navToggle")],T.prototype,"getToggleElement",null),e([c("navWidth","updated")],T.prototype,"handleNavWidthChange",null),e([c("navState")],T.prototype,"handleNavStateChange",null),e([c("navOpen","updated")],T.prototype,"handleOpenChange",null),T=e([n("nord-layout")],T);var w=T;export{w as default};
+import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as t,s as a,$ as i}from"./lit-element-67e6cd99.js";import{e as s}from"./property-03f59dce.js";import{t as o}from"./state-70f38ceb.js";import{i as r}from"./query-2d22378e.js";import{o as d}from"./class-map-f1b6f1fa.js";import{D as l}from"./DirectionController-8b298382.js";import{L as h}from"./LightDismissController-a2645ae6.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as v}from"./cond-97c45476.js";import{f as p}from"./fsm-50373df9.js";import{c as g}from"./number-c3ab3e95.js";import{s as u}from"./Component-a61df53a.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";class m{constructor(e,n,t){this.host=e,this.onChange=t,this.handleChange=()=>{var e;null===(e=this.onChange)||void 0===e||e.call(this),this.host.requestUpdate()},e.addController(this),this.mq="string"==typeof n?matchMedia(n):n}get matches(){return this.mq.matches}hostConnected(){this.mq.addListener(this.handleChange)}hostDisconnected(){this.mq.removeListener(this.handleChange)}}const k=t`:host{--n-layout-padding:var(--n-space-l);--n-nav-transition-duration:0.3s;background:var(--n-color-background);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--n-color-background);inset-block-start:0;min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--n-nav-width);z-index:var(--n-index-header);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{inset-inline-end:0;z-index:1;inline-size:100%}main{padding:var(--n-layout-padding)}: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{transition:transform var(--n-nav-transition-duration) ease}[data-screen=wide]:is([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .n-layout-nav{transition:transform var(--n-nav-transition-duration) ease;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] .n-layout-main{inline-size:calc(100% - var(--n-nav-width));margin-inline-start:var(--n-nav-width)}.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 .2s .15s ease;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}@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:0}`,f=matchMedia("(min-width: 768px)"),b=function(e,n,t=JSON.stringify,a=JSON.parse){return{get value(){const t=localStorage.getItem(e);try{return t?a(t):n}catch(e){return n}},set value(n){localStorage.setItem(e,t(n))}}}("nord-layout.navWidth",250),y=p({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 T=class extends a{constructor(){super(...arguments),this.navWidth=b.value,this.isDragging=!1,this.navState=f.matches?"opened":"closed",this.navOpen="opened"===this.navState,this.padding="m",this.lightDismiss=new h(this,{isOpen:()=>"opened"===this.navState&&!this.mq.matches,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl&&e!==this.navToggleEl}),this.mq=new m(this,f,(()=>this.handleMediaQueryChange())),this.direction=new l(this),this.handleMediaQueryChange=()=>{this.navTransition(this.mq.matches?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=e=>{e.target!==this.navToggleEl&&this.navTransition("focusout")},this.handleMouseEnter=()=>{this.mq.matches&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}render(){const{navWidth:e,navState:n,mq:t,isDragging:a,direction:s}=this,o="opened"===n&&t.matches?e:250;return i`<div class="${d({"n-layout":!0,"n-rtl":s.isRTL,"n-dragging":a})}" style="${`--n-nav-width: ${o}px`}" data-nav="${n}" data-screen="${t.matches?"wide":"narrow"}"><div class="n-layout-nav" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${v("opened"===n,this.startDragging)}" @pointermove="${v(a,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}"></div></div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleClick}"><slot name="header"></slot><main><slot></slot></main></div></div>`}getToggleElement(){if(this.cleanup(),!this.navToggle)return;const e=this.getRootNode().querySelector(`#${this.navToggle}`);e&&(this.navToggleEl=e,this.navToggleEl.addEventListener("click",this.handleToggleClick),this.navToggleEl.addEventListener("mouseenter",this.handleMouseEnter),this.navToggleEl.addEventListener("mouseleave",this.handleMouseLeave))}cleanup(){this.navToggleEl&&(this.navToggleEl.removeEventListener("click",this.handleToggleClick),this.navToggleEl.removeEventListener("mouseenter",this.handleMouseEnter),this.navToggleEl.removeEventListener("mouseleave",this.handleMouseLeave),this.navToggleEl=void 0)}handleNavWidthChange(){b.value=this.navWidth}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&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(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(e){this.navState=y.transition(this.navState,e)}handleClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(e){const{navWidth:n,direction:{isLTR:t}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(n+(t?-30:30));break;case"ArrowRight":this.setNavWidth(n+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}e.preventDefault()}setNavWidth(e){this.navWidth=g(Math.round(e),220,400)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(e){const n=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(n),this.navTransition(n>=100?"open":"close")}};T.styles=[u,k],e([r(".n-layout-nav",!0)],T.prototype,"navEl",void 0),e([o()],T.prototype,"navWidth",void 0),e([o()],T.prototype,"isDragging",void 0),e([o()],T.prototype,"navState",void 0),e([s({reflect:!0,type:Boolean,attribute:"nav-open"})],T.prototype,"navOpen",void 0),e([s({attribute:"nav-toggle"})],T.prototype,"navToggle",void 0),e([s({reflect:!0})],T.prototype,"padding",void 0),e([c("navToggle")],T.prototype,"getToggleElement",null),e([c("navWidth","updated")],T.prototype,"handleNavWidthChange",null),e([c("navState")],T.prototype,"handleNavStateChange",null),e([c("navOpen","updated")],T.prototype,"handleOpenChange",null),T=e([n("nord-layout")],T);var w=T;export{w as default};
 //# sourceMappingURL=Layout.js.map

package/lib/Layout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Layout.js","sources":["../src/common/controllers/MediaQueryController.ts","../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ntype MediaQueryChange = () => void\n\nexport class MediaQueryController implements ReactiveController {\n private mq: MediaQueryList\n\n constructor(host: ReactiveControllerHost, mediaQuery: MediaQueryList, onChange?: MediaQueryChange)\n constructor(host: ReactiveControllerHost, mediaQuery: string, onChange?: MediaQueryChange)\n\n constructor(\n private host: ReactiveControllerHost,\n mediaQuery: string \| MediaQueryList,\n private onChange?: MediaQueryChange\n ) {\n host.addController(this)\n this.mq = typeof mediaQuery === \"string\" ? matchMedia(mediaQuery) : mediaQuery\n }\n\n get matches() {\n return this.mq.matches\n }\n\n hostConnected() {\n this.mq.addListener(this.handleChange)\n }\n\n hostDisconnected() {\n this.mq.removeListener(this.handleChange)\n }\n\n handleChange = () => {\n this.onChange?.()\n this.host.requestUpdate()\n }\n}\n","/* eslint-disable lit-a11y/click-events-have-key-events /\nimport { LitElement, html } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { MediaQueryController } from \"../common/controllers/MediaQueryController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = matchMedia(\"(min-width: 768px)\")\nconst store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\n\nconst navMachine = fsm({\n opened: {\n toggle: \"closed\",\n close: \"closed\",\n },\n closed: {\n toggle: \"opened\",\n open: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n },\n peek: {\n toggle: \"opened\",\n focusout: \"unpeek\",\n pointerleave: \"wait\",\n dropdownOpen: \"blocked\",\n click: \"unpeek\",\n open: \"opened\",\n },\n blocked: {\n dropdownClose: \"peek\",\n open: \"opened\",\n },\n wait: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n timeout: \"unpeek\",\n },\n unpeek: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n transitionend: \"closed\",\n },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\n/\n Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n \n @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot header - Used to place content inside the header section.\n /\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n static styles = [componentStyle, style]\n\n private peekTimeoutId?: ReturnType<typeof setTimeout>\n private navToggleEl?: Element\n\n @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n @state() private navWidth = store.value\n @state() private isDragging = false\n @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\n\n /\n Controls whether the navigation is hidden off-screen or not.\n * Defaults to `true` for wide viewports, and `false` otherwise.\n /\n @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen: boolean = this.navState === \"opened\"\n\n /\n ID reference of element used to toggle the navigation.\n /\n @property({ attribute: \"nav-toggle\" }) navToggle?: string\n\n /\n Controls the padding of the default main section slot. When set to “none”,\n * the nav and header slots will still have padding.\n /\n @property({ reflect: true }) padding: \"m\" \| \"none\" = \"m\"\n\n private lightDismiss = new LightDismissController(this, {\n isOpen: () => this.navState === \"opened\" && !this.mq.matches,\n onDismiss: () => this.navTransition(\"close\"),\n isDismissible: node => node !== this.navEl && node !== this.navToggleEl,\n })\n\n private mq = new MediaQueryController(this, mediaQuery, () => this.handleMediaQueryChange())\n private direction = new DirectionController(this)\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.cleanup()\n }\n\n render() {\n const { navWidth, navState, mq, isDragging, direction } = this\n const adjustedNavWidth = navState === \"opened\" && mq.matches ? navWidth : NAV_DEFAULT_WIDTH\n\n return html`\n <div\n class=${classMap({\n \"n-layout\": true,\n \"n-rtl\": direction.isRTL,\n \"n-dragging\": isDragging,\n })}\n style=${`--n-nav-width: ${adjustedNavWidth}px`}\n data-nav=${navState}\n data-screen=${mq.matches ? \"wide\" : \"narrow\"}\n >\n <div\n class=\"n-layout-nav\"\n @focusin=${this.handleNavFocus}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n @open=${this.handleDropdownOpen}\n @close=${this.handleDropdownClose}\n >\n <slot name=\"nav\"></slot>\n <div\n class=\"n-resize\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n tabindex=\"0\"\n @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n @pointermove=${cond(isDragging, this.handleDrag)}\n @pointerleave=${this.stopDragging}\n @pointerup=${this.stopDragging}\n @keydown=${this.handleKeyboardResize}\n ></div>\n </div>\n <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleClick}>\n <slot name=\"header\"></slot>\n <main>\n <slot></slot>\n </main>\n </div>\n </div>\n `\n }\n\n @observe(\"navToggle\")\n protected getToggleElement() {\n // clean up\n this.cleanup()\n\n // handle case where id removed\n if (!this.navToggle) {\n return\n }\n\n const root = this.getRootNode() as Document \| ShadowRoot\n const toggleEl = root.querySelector(`#${this.navToggle}`)\n\n if (toggleEl) {\n this.navToggleEl = toggleEl\n this.navToggleEl.addEventListener(\"click\", this.handleToggleClick)\n this.navToggleEl.addEventListener(\"mouseenter\", this.handleMouseEnter)\n this.navToggleEl.addEventListener(\"mouseleave\", this.handleMouseLeave)\n }\n }\n\n private cleanup() {\n if (this.navToggleEl) {\n this.navToggleEl.removeEventListener(\"click\", this.handleToggleClick)\n this.navToggleEl.removeEventListener(\"mouseenter\", this.handleMouseEnter)\n this.navToggleEl.removeEventListener(\"mouseleave\", this.handleMouseLeave)\n this.navToggleEl = undefined\n }\n }\n\n @observe(\"navWidth\", \"updated\")\n protected handleNavWidthChange() {\n store.value = this.navWidth\n }\n\n @observe(\"navState\")\n protected handleNavStateChange(prev: NavState) {\n if (prev === \"wait\" && this.peekTimeoutId) {\n clearTimeout(this.peekTimeoutId)\n }\n if (prev === \"unpeek\") {\n this.navEl.removeEventListener(\"transitionend\", this.handleTransitionEnd)\n }\n\n switch (this.navState) {\n case \"closed\":\n this.navOpen = false\n break\n case \"opened\":\n this.navOpen = true\n break\n case \"wait\":\n this.peekTimeoutId = setTimeout(() => this.navTransition(\"timeout\"), NAV_PEEK_DELAY)\n break\n case \"unpeek\":\n this.navEl.addEventListener(\"transitionend\", this.handleTransitionEnd, { once: true })\n break\n default:\n break\n }\n }\n\n @observe(\"navOpen\", \"updated\")\n protected handleOpenChange() {\n if (!this.isDragging) {\n // when opening nav, it should restore to default width (or larger).\n // unless it is being dragged, in which case the drag width wins\n this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n }\n\n this.navTransition(this.navOpen ? \"open\" : \"close\")\n }\n\n / ---------------------------------------------\n / NAVIGATION OPEN/CLOSE LOGIC\n / --------------------------------------------- /\n\n private navTransition(event: NavEvent) {\n this.navState = navMachine.transition(this.navState, event)\n }\n\n private handleClick() {\n this.navTransition(\"click\")\n }\n\n private handleDropdownOpen(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownOpen\")\n }\n }\n\n private handleDropdownClose(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownClose\")\n }\n }\n\n private handleMediaQueryChange = () => {\n this.navTransition(this.mq.matches ? \"open\" : \"close\")\n }\n\n private handleToggleClick = () => {\n this.navTransition(\"toggle\")\n }\n\n private handleNavFocus = () => {\n this.navTransition(\"focusin\")\n }\n\n private handleMainFocus = (e: FocusEvent) => {\n if (e.target !== this.navToggleEl) {\n this.navTransition(\"focusout\")\n }\n }\n\n private handleMouseEnter = () => {\n if (this.mq.matches) {\n this.navTransition(\"pointerenter\")\n }\n }\n\n private handleMouseLeave = () => {\n this.navTransition(\"pointerleave\")\n }\n\n private handleTransitionEnd = () => {\n this.navTransition(\"transitionend\")\n }\n\n / ---------------------------------------------\n / RESIZE LOGIC\n / --------------------------------------------- /\n\n private handleKeyboardResize(e: KeyboardEvent) {\n const {\n navWidth,\n direction: { isLTR },\n } = this\n\n switch (e.key) {\n case \"ArrowLeft\":\n this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n break\n case \"ArrowRight\":\n this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n break\n case \"Enter\":\n this.navTransition(\"toggle\")\n break\n case \"Home\":\n this.setNavWidth(NAV_MIN_WIDTH)\n break\n case \"End\":\n this.setNavWidth(NAV_MAX_WIDTH)\n break\n default:\n return\n }\n\n e.preventDefault()\n }\n\n private setNavWidth(width: number) {\n this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n }\n\n private startDragging(e: PointerEvent) {\n if (e.button === 0) {\n const target = e.target as Element\n target.setPointerCapture(e.pointerId)\n this.isDragging = true\n }\n }\n\n private stopDragging() {\n this.isDragging = false\n }\n\n private handleDrag(e: PointerEvent) {\n const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n this.setNavWidth(width)\n this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-layout\": Layout\n }\n}\n","/\n Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n key: string,\n defaultValue: T,\n serialize: (value: T) => string = JSON.stringify,\n deserialize: (value: string) => T = JSON.parse\n) {\n return {\n get value(): T {\n const value = localStorage.getItem(key)\n\n try {\n return value ? deserialize(value) : defaultValue\n } catch {\n return defaultValue\n }\n },\n\n set value(value: T) {\n localStorage.setItem(key, serialize(value))\n },\n }\n}\n"],"names":["MediaQueryController","constructor","host","mediaQuery","onChange","this","handleChange","_a","call","requestUpdate","addController","mq","matchMedia","matches","hostConnected","addListener","hostDisconnected","removeListener","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navWidth","isDragging","navState","navOpen","padding","lightDismiss","LightDismissController","isOpen","onDismiss","navTransition","isDismissible","node","navEl","navToggleEl","handleMediaQueryChange","direction","DirectionController","handleToggleClick","handleNavFocus","handleMainFocus","e","target","handleMouseEnter","handleMouseLeave","handleTransitionEnd","disconnectedCallback","super","cleanup","render","adjustedNavWidth","html","classMap","isRTL","handleDropdownOpen","handleDropdownClose","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleClick","getToggleElement","navToggle","toggleEl","getRootNode","querySelector","addEventListener","removeEventListener","undefined","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","event","transition","localName","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"Layout.js","sources":["../src/common/controllers/MediaQueryController.ts","../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ntype MediaQueryChange = () => void\n\nexport class MediaQueryController implements ReactiveController {\n private mq: MediaQueryList\n\n constructor(host: ReactiveControllerHost, mediaQuery: MediaQueryList, onChange?: MediaQueryChange)\n constructor(host: ReactiveControllerHost, mediaQuery: string, onChange?: MediaQueryChange)\n\n constructor(\n private host: ReactiveControllerHost,\n mediaQuery: string \| MediaQueryList,\n private onChange?: MediaQueryChange\n ) {\n host.addController(this)\n this.mq = typeof mediaQuery === \"string\" ? matchMedia(mediaQuery) : mediaQuery\n }\n\n get matches() {\n return this.mq.matches\n }\n\n hostConnected() {\n this.mq.addListener(this.handleChange)\n }\n\n hostDisconnected() {\n this.mq.removeListener(this.handleChange)\n }\n\n handleChange = () => {\n this.onChange?.()\n this.host.requestUpdate()\n }\n}\n","/* eslint-disable lit-a11y/click-events-have-key-events /\nimport { LitElement, html } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { MediaQueryController } from \"../common/controllers/MediaQueryController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = matchMedia(\"(min-width: 768px)\")\nconst store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\n\nconst navMachine = fsm({\n opened: {\n toggle: \"closed\",\n close: \"closed\",\n },\n closed: {\n toggle: \"opened\",\n open: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n },\n peek: {\n toggle: \"opened\",\n focusout: \"unpeek\",\n pointerleave: \"wait\",\n dropdownOpen: \"blocked\",\n click: \"unpeek\",\n open: \"opened\",\n },\n blocked: {\n dropdownClose: \"peek\",\n open: \"opened\",\n },\n wait: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n timeout: \"unpeek\",\n },\n unpeek: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n transitionend: \"closed\",\n },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\n/\n Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n \n @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot header - Used to place content inside the header section.\n /\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n static styles = [componentStyle, style]\n\n private peekTimeoutId?: ReturnType<typeof setTimeout>\n private navToggleEl?: Element\n\n @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n @state() private navWidth = store.value\n @state() private isDragging = false\n @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\n\n /\n Controls whether the navigation is hidden off-screen or not.\n * Defaults to `true` for wide viewports, and `false` otherwise.\n /\n @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen: boolean = this.navState === \"opened\"\n\n /\n ID reference of element used to toggle the navigation.\n /\n @property({ attribute: \"nav-toggle\" }) navToggle?: string\n\n /\n Controls the padding of the default main section slot. When set to “none”,\n * the nav and header slots will still have padding.\n /\n @property({ reflect: true }) padding: \"m\" \| \"none\" = \"m\"\n\n private lightDismiss = new LightDismissController(this, {\n isOpen: () => this.navState === \"opened\" && !this.mq.matches,\n onDismiss: () => this.navTransition(\"close\"),\n isDismissible: node => node !== this.navEl && node !== this.navToggleEl,\n })\n\n private mq = new MediaQueryController(this, mediaQuery, () => this.handleMediaQueryChange())\n private direction = new DirectionController(this)\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.cleanup()\n }\n\n render() {\n const { navWidth, navState, mq, isDragging, direction } = this\n const adjustedNavWidth = navState === \"opened\" && mq.matches ? navWidth : NAV_DEFAULT_WIDTH\n\n return html`\n <div\n class=${classMap({\n \"n-layout\": true,\n \"n-rtl\": direction.isRTL,\n \"n-dragging\": isDragging,\n })}\n style=${`--n-nav-width: ${adjustedNavWidth}px`}\n data-nav=${navState}\n data-screen=${mq.matches ? \"wide\" : \"narrow\"}\n >\n <div\n class=\"n-layout-nav\"\n @focusin=${this.handleNavFocus}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n @open=${this.handleDropdownOpen}\n @close=${this.handleDropdownClose}\n >\n <slot name=\"nav\"></slot>\n <div\n class=\"n-resize\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n tabindex=\"0\"\n @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n @pointermove=${cond(isDragging, this.handleDrag)}\n @pointerleave=${this.stopDragging}\n @pointerup=${this.stopDragging}\n @keydown=${this.handleKeyboardResize}\n ></div>\n </div>\n <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleClick}>\n <slot name=\"header\"></slot>\n <main>\n <slot></slot>\n </main>\n </div>\n </div>\n `\n }\n\n @observe(\"navToggle\")\n protected getToggleElement() {\n // clean up\n this.cleanup()\n\n // handle case where id removed\n if (!this.navToggle) {\n return\n }\n\n const root = this.getRootNode() as Document \| ShadowRoot\n const toggleEl = root.querySelector(`#${this.navToggle}`)\n\n if (toggleEl) {\n this.navToggleEl = toggleEl\n this.navToggleEl.addEventListener(\"click\", this.handleToggleClick)\n this.navToggleEl.addEventListener(\"mouseenter\", this.handleMouseEnter)\n this.navToggleEl.addEventListener(\"mouseleave\", this.handleMouseLeave)\n }\n }\n\n private cleanup() {\n if (this.navToggleEl) {\n this.navToggleEl.removeEventListener(\"click\", this.handleToggleClick)\n this.navToggleEl.removeEventListener(\"mouseenter\", this.handleMouseEnter)\n this.navToggleEl.removeEventListener(\"mouseleave\", this.handleMouseLeave)\n this.navToggleEl = undefined\n }\n }\n\n @observe(\"navWidth\", \"updated\")\n protected handleNavWidthChange() {\n store.value = this.navWidth\n }\n\n @observe(\"navState\")\n protected handleNavStateChange(prev: NavState) {\n if (prev === \"wait\" && this.peekTimeoutId) {\n clearTimeout(this.peekTimeoutId)\n }\n if (prev === \"unpeek\") {\n this.navEl.removeEventListener(\"transitionend\", this.handleTransitionEnd)\n }\n\n switch (this.navState) {\n case \"closed\":\n this.navOpen = false\n break\n case \"opened\":\n this.navOpen = true\n break\n case \"wait\":\n this.peekTimeoutId = setTimeout(() => this.navTransition(\"timeout\"), NAV_PEEK_DELAY)\n break\n case \"unpeek\":\n this.navEl.addEventListener(\"transitionend\", this.handleTransitionEnd, { once: true })\n break\n default:\n break\n }\n }\n\n @observe(\"navOpen\", \"updated\")\n protected handleOpenChange() {\n if (!this.isDragging) {\n // when opening nav, it should restore to default width (or larger).\n // unless it is being dragged, in which case the drag width wins\n this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n }\n\n this.navTransition(this.navOpen ? \"open\" : \"close\")\n }\n\n / ---------------------------------------------\n / NAVIGATION OPEN/CLOSE LOGIC\n / --------------------------------------------- /\n\n private navTransition(event: NavEvent) {\n this.navState = navMachine.transition(this.navState, event)\n }\n\n private handleClick() {\n this.navTransition(\"click\")\n }\n\n private handleDropdownOpen(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownOpen\")\n }\n }\n\n private handleDropdownClose(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownClose\")\n }\n }\n\n private handleMediaQueryChange = () => {\n this.navTransition(this.mq.matches ? \"open\" : \"close\")\n }\n\n private handleToggleClick = () => {\n this.navTransition(\"toggle\")\n }\n\n private handleNavFocus = () => {\n this.navTransition(\"focusin\")\n }\n\n private handleMainFocus = (e: FocusEvent) => {\n if (e.target !== this.navToggleEl) {\n this.navTransition(\"focusout\")\n }\n }\n\n private handleMouseEnter = () => {\n if (this.mq.matches) {\n this.navTransition(\"pointerenter\")\n }\n }\n\n private handleMouseLeave = () => {\n this.navTransition(\"pointerleave\")\n }\n\n private handleTransitionEnd = () => {\n this.navTransition(\"transitionend\")\n }\n\n / ---------------------------------------------\n / RESIZE LOGIC\n / --------------------------------------------- /\n\n private handleKeyboardResize(e: KeyboardEvent) {\n const {\n navWidth,\n direction: { isLTR },\n } = this\n\n switch (e.key) {\n case \"ArrowLeft\":\n this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n break\n case \"ArrowRight\":\n this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n break\n case \"Enter\":\n this.navTransition(\"toggle\")\n break\n case \"Home\":\n this.setNavWidth(NAV_MIN_WIDTH)\n break\n case \"End\":\n this.setNavWidth(NAV_MAX_WIDTH)\n break\n default:\n return\n }\n\n e.preventDefault()\n }\n\n private setNavWidth(width: number) {\n this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n }\n\n private startDragging(e: PointerEvent) {\n if (e.button === 0) {\n const target = e.target as Element\n target.setPointerCapture(e.pointerId)\n this.isDragging = true\n }\n }\n\n private stopDragging() {\n this.isDragging = false\n }\n\n private handleDrag(e: PointerEvent) {\n const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n this.setNavWidth(width)\n this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-layout\": Layout\n }\n}\n","/\n Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n key: string,\n defaultValue: T,\n serialize: (value: T) => string = JSON.stringify,\n deserialize: (value: string) => T = JSON.parse\n) {\n return {\n get value(): T {\n const value = localStorage.getItem(key)\n\n try {\n return value ? deserialize(value) : defaultValue\n } catch {\n return defaultValue\n }\n },\n\n set value(value: T) {\n localStorage.setItem(key, serialize(value))\n },\n }\n}\n"],"names":["MediaQueryController","constructor","host","mediaQuery","onChange","this","handleChange","_a","call","requestUpdate","addController","mq","matchMedia","matches","hostConnected","addListener","hostDisconnected","removeListener","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navWidth","isDragging","navState","navOpen","padding","lightDismiss","LightDismissController","isOpen","onDismiss","navTransition","isDismissible","node","navEl","navToggleEl","handleMediaQueryChange","direction","DirectionController","handleToggleClick","handleNavFocus","handleMainFocus","e","target","handleMouseEnter","handleMouseLeave","handleTransitionEnd","disconnectedCallback","super","cleanup","render","adjustedNavWidth","html","classMap","isRTL","handleDropdownOpen","handleDropdownClose","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleClick","getToggleElement","navToggle","toggleEl","getRootNode","querySelector","addEventListener","removeEventListener","undefined","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","event","transition","localName","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}