@nordhealth/components 4.15.0 → 4.16.1

package/lib/{Calendar-CL_eqbiT.js → Calendar-CKgiq2S1.js}

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as a,LitElement as t,isServer as n,html as i}from"lit";import{query as s,property as o,state as r,customElement as l}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{repeat as c}from"lit/directives/repeat.js";import{o as h}from"./tinykeys.module-_6MZt7MP.js";import{m as u,c as p}from"./collection-Dvg2XbxV.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{E as g}from"./EventController-BBOmvfLa.js";import{D as f,i as m,p as y,a as b,s as w,e as x,b as D,g as k,d as z,f as $,h as F,j as _,k as Y,l as T,m as M,n as S,o as j}from"./dates-CAAlPKZi.js";import{o as C}from"./observe-D0n0zOfU.js";import{c as N}from"./cond-CI1KbneT.js";import{r as L}from"./number-Dg2vCfGd.js";import{s as O}from"./Component-DSU3Qp0O.js";import X from"./Icon.js";import{LocalizeController as E}from"./LocalizeController.js";import{DateSelectEvent as W}from"./DateSelectEvent.js";import"./Button.js";import"./VisuallyHidden.js";var U=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m.100342 6.92903 2.121318-2.12132 7.77818 7.77819 7.77826-7.77828 2.1213 2.12132-8.4853 8.48536c-.7811.7811-2.04743.7811-2.82848 0z" fill="currentColor"/></svg>',tags:"nordicon arrow down small caret pointing triangle chevron",title:"arrow-down-small"});var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.0712.105225 2.1213 2.121315-7.77816 7.77816 7.77826 7.7783-2.1213 2.1213-8.48539-8.4854c-.78105-.781-.78105-2.04735 0-2.82839z" fill="currentColor"/></svg>',tags:"nordicon arrow left small caret pointing triangle chevron",title:"arrow-left-small"});var I=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m6.92903.100342-2.12132 2.121318 7.77819 7.77818-7.77828 7.77826 2.12132 2.1213 8.48536-8.4853c.7811-.7811.7811-2.04743 0-2.82848z" fill="currentColor"/></svg>',tags:"nordicon arrow right small caret pointing triangle chevron",title:"arrow-right-small"});const P=e=>e.preventDefault();class B{constructor(e,a){this.hadFirstUpdate=!1,this.initialTouchX=0,this.initialTouchY=0,this.handleTouchStart=e=>{const[{pageX:a,pageY:t}]=e.changedTouches;this.initialTouchX=a,this.initialTouchY=t},this.handleTouchEnd=e=>{const[{pageX:a,pageY:t}]=e.changedTouches,{matchesGesture:n,onSwipeEnd:i}=this.options,s=a-this.initialTouchX,o=t-this.initialTouchY,r={initialX:this.initialTouchX,initialY:this.initialTouchY,pageX:a,pageY:t,distX:s,distY:o};n(r)&&(e.preventDefault(),i(r))},e.addController(this),this.events=new g(e),this.options={target:()=>e,...a}}hostUpdated(){if(!this.hadFirstUpdate){this.hadFirstUpdate=!0;const e=this.options.target();this.events.listen(e,"touchstart",this.handleTouchStart),this.events.listen(e,"touchmove",P),this.events.listen(e,"touchend",this.handleTouchEnd)}}hostDisconnected(){this.hadFirstUpdate=!1}}function H({distX:e,distY:a}){return Math.abs(e)>=70&&Math.abs(a)<=70}function R({distX:e,distY:a}){return Math.abs(a)>=70&&Math.abs(e)<=70&&a>0}const V=a`:host{--_n-calendar-box-shadow:var(--n-calendar-box-shadow, var(--n-box-shadow-popout));--_n-calendar-border-radius:var(--n-calendar-border-radius, var(--n-border-radius-s));--_n-calendar-highlight-color:var(--n-calendar-highlight-color, var(--n-color-accent));--_n-calendar-padding:var(--n-space-m) var(--n-space-m) calc(var(--n-space-m) * 1.25);--_n-calendar-inline-size:max-content;font-feature-settings:var(--n-font-features-reduced)}.n-calendar{user-select:none;background:var(--n-color-surface);box-shadow:var(--_n-calendar-box-shadow);border-radius:var(--_n-calendar-border-radius);inline-size:var(--_n-calendar-inline-size);min-inline-size:min-content;padding:var(--_n-calendar-padding)}:host([expand]){--_n-calendar-inline-size:100%}.n-calendar-table{border-collapse:collapse;border-spacing:0;color:var(--n-color-text);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);text-align:center;inline-size:100%}.n-calendar-table-header{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);letter-spacing:1px;padding-block-end:var(--n-space-s);text-decoration:none;text-transform:uppercase}.n-calendar-cell{text-align:center;padding:1px}.n-calendar-day{appearance:none;background:0 0;border:0;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:inline-block;font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);font-variant-numeric:tabular-nums;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);padding:0 0 1px;position:relative;text-align:center;vertical-align:middle}.n-calendar-day[aria-current=date]{box-shadow:0 0 0 1px var(--n-color-text-link);color:var(--n-color-text-link);position:relative}.n-calendar-day:hover{background:var(--n-color-active)}.n-calendar-day:focus,.n-calendar-day[aria-pressed=true]{background:var(--n-color-accent);box-shadow:none;color:var(--n-color-text-on-accent);outline:0}.n-calendar-day:active{background:var(--n-color-accent);box-shadow:none!important;color:var(--n-color-text-on-accent)}.n-calendar-day:focus{box-shadow:0 0 5px var(--n-color-accent)}.n-calendar-day:not(.is-month){box-shadow:none}.n-calendar-day:not(.is-month),.n-calendar-day[aria-disabled=true]{background:0 0;color:var(--n-color-text-weakest);cursor:default}.n-calendar-day[aria-disabled=true]{color:var(--n-color-text-weaker);text-decoration:line-through}.n-calendar-day:not(.is-month)[aria-disabled=true]{color:var(--n-color-text-weakest);text-decoration:none}.n-calendar-day[aria-disabled=true][aria-current=date]{box-shadow:0 0 0 1px var(--n-color-accent);color:var(--n-color-text-link)}.n-calendar-day[aria-disabled=true][aria-current=date]:focus{box-shadow:0 0 5px var(--n-color-accent);background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-calendar-day[aria-disabled=true]:not([aria-current=date])::before{display:none}.n-calendar-day.is-outside{background:0 0;box-shadow:none;color:var(--n-color-text-weakest);cursor:default;pointer-events:none}.n-calendar-day.is-outside::before{display:none}.n-calendar-day.is-highlighted::after{--_n-calendar-highlight-size:5px;content:'';position:absolute;inset-inline-start:calc(50% - (var(--_n-calendar-highlight-size)/ 2));inset-block-end:var(--n-space-xs);block-size:var(--_n-calendar-highlight-size);inline-size:var(--_n-calendar-highlight-size);border-radius:var(--n-border-radius-circle);background-color:var(--_n-calendar-highlight-color)}.n-calendar-day.is-highlighted.is-month:is([aria-pressed=true],:focus):not([aria-disabled=true])::after{background-color:var(--n-color-text-on-accent)}.n-calendar-day.is-highlighted:is(:not(.is-month),.is-outside,[aria-disabled=true])::after{background-color:var(--n-color-text-weakest)}.n-calendar-header{align-items:start;display:flex;justify-content:space-between;margin-block-end:var(--n-space-m);inline-size:100%}.n-calendar-nav{white-space:nowrap}.n-calendar-nav nord-button{--_n-button-padding-inline:11px;margin-inline-start:var(--n-space-xs)}.n-calendar-select{display:inline-flex;margin-block-start:var(--n-space-xs);position:relative;line-height:var(--n-line-height)}.n-calendar-select span{margin-inline-end:var(--n-space-s)}.n-calendar-select select{cursor:pointer;font-size:var(--n-font-size-l);block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%}.n-calendar-select select:focus+.n-calendar-select-label{box-shadow:0 0 0 2px var(--n-color-accent)}.n-calendar-select-label{display:flex;align-items:center;border-radius:var(--n-border-radius-s);color:var(--n-color-text);font-size:var(--n-font-size-xl);font-weight:var(--n-font-weight-active);padding-block:0;padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-xs);pointer-events:none;position:relative;inline-size:100%}`;function G(e){return a=>{a.preventDefault(),e(a)}}X.registerIcon(I),X.registerIcon(A),X.registerIcon(U);const Z=()=>!1,q=()=>!1,J="dialog-header";let K=class extends t{constructor(){super(...arguments),this.direction=new v(this),this.swipe=new B(this,{matchesGesture:H,onSwipeEnd:({distX:e})=>this.addMonths(e<0?1:-1)}),this.shortcuts=h({ArrowRight:G((()=>this.addDays(this.direction.isLTR?1:-1))),ArrowLeft:G((()=>this.addDays(this.direction.isLTR?-1:1))),ArrowDown:G((()=>this.addDays(7))),ArrowUp:G((()=>this.addDays(-7))),Home:G((()=>this.startOfWeek())),End:G((()=>this.endOfWeek())),PageUp:G((()=>this.addMonths(-1))),PageDown:G((()=>this.addMonths(1))),"Shift+PageUp":G((()=>this.addYears(-1))),"Shift+PageDown":G((()=>this.addYears(1)))}),this.localize=new E(this,{onLangChange:()=>this.handleLangChange()}),this.value="",this.firstDayOfWeek=f.Monday,this.expand=!1,this.isDateDisabled=Z,this.isDateHighlighted=q,this.activeFocus=!1,this.focusedDay=new Date,this.handleDaySelect=e=>{const a=m(e,y(this.min||""),y(this.max||"")),t=!this.isDateDisabled(e);a&&t&&(this.value=b(e),this.dispatchEvent(new W("change",e)))},this.handleMonthSelect=e=>{this.setMonth(Number.parseInt(e.target.value,10))},this.handleYearSelect=e=>{this.setYear(Number.parseInt(e.target.value,10))},this.handleNextMonthClick=e=>{e.preventDefault(),this.addMonths(1)},this.handlePreviousMonthClick=e=>{e.preventDefault(),this.addMonths(-1)},this.enableActiveFocus=()=>{this.activeFocus=!0},this.disableActiveFocus=e=>{const a=e.currentTarget,t=e.relatedTarget;t&&!a.contains(t)&&(this.activeFocus=!1)}}focus(e){var a;const t=null!==(a=null==e?void 0:e.target)&&void 0!==a?a:"day";"day"===t?this.focusedDayNode.focus():"month"===t&&this.monthSelectNode.focus()}render(){const e=this.getToday(),a=y(this.value),t=this.focusedDay.getMonth(),s=this.focusedDay.getFullYear(),o=y(this.min||""),r=y(this.max||""),l=o?w(o):void 0,h=r?x(r):void 0,v=(a||this.focusedDay).getFullYear(),g=o?o.getFullYear():v-10,f=r?r.getFullYear():v+10;return n&&this.handleLangChange(),i`<div class="n-calendar"><div class="n-calendar-header"><div><nord-visually-hidden><h2 id="${J}" aria-live="polite" aria-atomic="true">${this.monthNames[t]}, ${this.focusedDay.getFullYear()}</h2></nord-visually-hidden><div class="n-calendar-select"><select aria-label="${this.localize.term("monthSelectLabel")}" class="n-calendar-select-month" @input="${this.handleMonthSelect}">${this.monthNames.map(((e,a)=>i`<option value="${a}" ?selected="${a===t}" ?disabled="${!m(new Date(s,a,1),l,h)}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.monthNamesShort[t]}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div><div class="n-calendar-select"><select aria-label="${this.localize.term("yearSelectLabel")}" class="n-calendar-select-year" @input="${this.handleYearSelect}">${c(L(g,f),(e=>e),(e=>i`<option ?selected="${e===s}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.focusedDay.getFullYear()}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div></div><div class="n-calendar-nav"><nord-button class="n-calendar-prev" @click="${this.handlePreviousMonthClick}" ?disabled="${D(o,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("prevMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-left-small":"arrow-right-small"}" size="s"></nord-icon></nord-button><nord-button class="n-calendar-next" @click="${this.handleNextMonthClick}" ?disabled="${D(r,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("nextMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-right-small":"arrow-left-small"}" size="s"></nord-icon></nord-button></div></div><table class="n-calendar-table" aria-labelledby="${J}" @focusin="${this.enableActiveFocus}" @focusout="${this.disableActiveFocus}"><thead><tr>${u(this.dayNames,this.firstDayOfWeek,((e,a)=>i`<th class="n-calendar-table-header" scope="col"><span aria-hidden="true">${this.dayNamesShort[a]}</span><nord-visually-hidden>${e}</nord-visually-hidden></th>`))}</tr></thead><tbody>${p(k(this.focusedDay,this.firstDayOfWeek),7).map((t=>i`<tr class="n-calendar-row">${t.map((t=>{const n=!m(t,o,r),s=z(t,e),l=this.isDateDisabled(t),c=z(t,a),h=D(t,this.focusedDay),u=this.isDateHighlighted(t),p=this.dateFormatShort.format(t),v=u&&"string"==typeof u?`${p}, ${u}`:p;return i`<td class="n-calendar-cell"><button type="button" tabindex="${z(t,this.focusedDay)?0:-1}" class="${d({"n-calendar-day":!0,"is-outside":n,"is-month":h,"is-highlighted":u})}" @click="${()=>this.handleDaySelect(t)}" @keydown="${this.shortcuts}" ?disabled="${n}" aria-disabled="${N(l,"true")}" aria-pressed="${c?"true":"false"}" aria-current="${N(s,"date")}" aria-label="${v}"><span aria-hidden="true">${t.getDate()}</span></button></td>`}))}</tr>`))}</tbody></table></div>`}handleValueChange(){this.setFocusedDay(y(this.value)||this.getToday())}handleFocusedDayChange(){this.activeFocus&&this.focusedDayNode.focus()}handleLangChange(){const e=this.localize.resolvedLang;this.dateFormatShort=new Intl.DateTimeFormat(e,{timeZone:"UTC",day:"numeric",month:"long"}),this.monthNames=$(e,"long"),this.monthNamesShort=$(e,"short"),this.dayNames=F(e,"long"),this.dayNamesShort=F(e,"narrow")}getToday(){return y(this.today||"")||new Date}addDays(e){this.setFocusedDay(_(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(Y(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(T(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const a=M(w(this.focusedDay),e),t=x(a),n=M(this.focusedDay,e);this.setFocusedDay(S(n,a,t))}setYear(e){const a=j(w(this.focusedDay),e),t=x(a),n=j(this.focusedDay,e);this.setFocusedDay(S(n,a,t))}setFocusedDay(e){this.focusedDay=S(e,y(this.min||""),y(this.max||"")),this.dispatchEvent(new W("nord-focus-date",this.focusedDay))}};K.styles=[O,V],e([s(".n-calendar-select-month",!0)],K.prototype,"monthSelectNode",void 0),e([s('button[tabindex="0"]')],K.prototype,"focusedDayNode",void 0),e([o()],K.prototype,"value",void 0),e([o({reflect:!0,type:Number,attribute:"first-day-of-week"})],K.prototype,"firstDayOfWeek",void 0),e([o({reflect:!0})],K.prototype,"min",void 0),e([o({reflect:!0})],K.prototype,"max",void 0),e([o({reflect:!0})],K.prototype,"today",void 0),e([o({reflect:!0,type:Boolean})],K.prototype,"expand",void 0),e([o({attribute:!1})],K.prototype,"isDateDisabled",void 0),e([o({attribute:!1})],K.prototype,"isDateHighlighted",void 0),e([r()],K.prototype,"activeFocus",void 0),e([r()],K.prototype,"focusedDay",void 0),e([C("value")],K.prototype,"handleValueChange",null),e([C("focusedDay","updated")],K.prototype,"handleFocusedDayChange",null),K=e([l("nord-calendar")],K);var Q=K;export{Q as C,B as S,R as i};
-//# sourceMappingURL=Calendar-CL_eqbiT.js.map
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as a,LitElement as t,isServer as n,html as i}from"lit";import{query as s,property as o,state as r,customElement as l}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{repeat as c}from"lit/directives/repeat.js";import{o as h}from"./tinykeys.module-_6MZt7MP.js";import{m as u,c as p}from"./collection-Dvg2XbxV.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{E as g}from"./EventController-BBOmvfLa.js";import{D as f,i as m,p as y,a as b,s as w,e as x,b as D,g as k,d as z,f as $,h as F,j as _,k as Y,l as M,m as S,n as T,o as j}from"./dates-CAAlPKZi.js";import{o as C}from"./observe-D0n0zOfU.js";import{c as N}from"./cond-CI1KbneT.js";import{r as L}from"./number-Dg2vCfGd.js";import{s as O}from"./Component-DSU3Qp0O.js";import X from"./Icon.js";import{LocalizeController as E}from"./LocalizeController.js";import{DateSelectEvent as W}from"./DateSelectEvent.js";import"./Button.js";import"./VisuallyHidden.js";var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m.100342 6.92903 2.121318-2.12132 7.77818 7.77819 7.77826-7.77828 2.1213 2.12132-8.4853 8.48536c-.7811.7811-2.04743.7811-2.82848 0z" fill="currentColor"/></svg>',tags:"nordicon arrow down small caret pointing triangle chevron",title:"arrow-down-small"});var U=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.0712.105225 2.1213 2.121315-7.77816 7.77816 7.77826 7.7783-2.1213 2.1213-8.48539-8.4854c-.78105-.781-.78105-2.04735 0-2.82839z" fill="currentColor"/></svg>',tags:"nordicon arrow left small caret pointing triangle chevron",title:"arrow-left-small"});var I=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m6.92903.100342-2.12132 2.121318 7.77819 7.77818-7.77828 7.77826 2.12132 2.1213 8.48536-8.4853c.7811-.7811.7811-2.04743 0-2.82848z" fill="currentColor"/></svg>',tags:"nordicon arrow right small caret pointing triangle chevron",title:"arrow-right-small"});const P=e=>e.preventDefault();class B{constructor(e,a){this.hadFirstUpdate=!1,this.initialTouchX=0,this.initialTouchY=0,this.handleTouchStart=e=>{const[{pageX:a,pageY:t}]=e.changedTouches;this.initialTouchX=a,this.initialTouchY=t},this.handleTouchEnd=e=>{const[{pageX:a,pageY:t}]=e.changedTouches,{matchesGesture:n,onSwipeEnd:i}=this.options,s=a-this.initialTouchX,o=t-this.initialTouchY,r={initialX:this.initialTouchX,initialY:this.initialTouchY,pageX:a,pageY:t,distX:s,distY:o};n(r)&&(e.preventDefault(),i(r))},e.addController(this),this.events=new g(e),this.options={target:()=>e,...a}}hostUpdated(){if(!this.hadFirstUpdate){this.hadFirstUpdate=!0;const e=this.options.target();this.events.listen(e,"touchstart",this.handleTouchStart),this.events.listen(e,"touchmove",P),this.events.listen(e,"touchend",this.handleTouchEnd)}}hostDisconnected(){this.hadFirstUpdate=!1}}function H({distX:e,distY:a}){return Math.abs(e)>=70&&Math.abs(a)<=70}function R({distX:e,distY:a}){return Math.abs(a)>=70&&Math.abs(e)<=70&&a>0}const V=a`:host{--_n-calendar-box-shadow:var(--n-calendar-box-shadow, var(--n-box-shadow-popout));--_n-calendar-border-radius:var(--n-calendar-border-radius, var(--n-border-radius-s));--_n-calendar-highlight-color:var(--n-calendar-highlight-color, var(--n-color-accent));--_n-calendar-padding:var(--n-space-m) var(--n-space-m) calc(var(--n-space-m) * 1.25);--_n-calendar-inline-size:max-content;font-feature-settings:var(--n-font-features-reduced)}.n-calendar{user-select:none;background:var(--n-color-surface);box-shadow:var(--_n-calendar-box-shadow);border-radius:var(--_n-calendar-border-radius);inline-size:var(--_n-calendar-inline-size);min-inline-size:min-content;padding:var(--_n-calendar-padding)}:host([expand]){--_n-calendar-inline-size:100%}.n-calendar-table{border-collapse:collapse;border-spacing:0;color:var(--n-color-text);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);text-align:center;inline-size:100%}.n-calendar-table-header{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);letter-spacing:1px;padding-block-end:var(--n-space-s);text-decoration:none;text-transform:uppercase}.n-calendar-cell{text-align:center;padding:1px}.n-calendar-day{appearance:none;background:0 0;border:0;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:inline-block;font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);font-variant-numeric:tabular-nums;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);padding:0 0 1px;position:relative;text-align:center;vertical-align:middle}.n-calendar-day[aria-current=date]{box-shadow:0 0 0 1px var(--n-color-text-link);color:var(--n-color-text-link);position:relative}.n-calendar-day:hover{background:var(--n-color-active)}.n-calendar-day:focus,.n-calendar-day[aria-pressed=true]{background:var(--n-color-accent);box-shadow:none;color:var(--n-color-text-on-accent);outline:0}.n-calendar-day:active{background:var(--n-color-accent);box-shadow:none!important;color:var(--n-color-text-on-accent)}.n-calendar-day:focus{box-shadow:0 0 5px var(--n-color-accent)}.n-calendar-day:not(.is-month){box-shadow:none}.n-calendar-day:not(.is-month),.n-calendar-day[aria-disabled=true]{background:0 0;color:var(--n-color-text-weakest);cursor:default}.n-calendar-day[aria-disabled=true]{color:var(--n-color-text-weaker);text-decoration:line-through}.n-calendar-day:not(.is-month)[aria-disabled=true]{color:var(--n-color-text-weakest);text-decoration:none}.n-calendar-day[aria-disabled=true][aria-current=date]{box-shadow:0 0 0 1px var(--n-color-accent);color:var(--n-color-text-link)}.n-calendar-day[aria-disabled=true][aria-current=date]:focus{box-shadow:0 0 5px var(--n-color-accent);background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-calendar-day[aria-disabled=true]:not([aria-current=date])::before{display:none}.n-calendar-day.is-outside{background:0 0;box-shadow:none;color:var(--n-color-text-weakest);cursor:default;pointer-events:none}.n-calendar-day.is-outside::before{display:none}.n-calendar-day.is-highlighted::after{--_n-calendar-highlight-size:5px;content:'';position:absolute;inset-inline-start:calc(50% - (var(--_n-calendar-highlight-size)/ 2));inset-block-end:var(--n-space-xs);block-size:var(--_n-calendar-highlight-size);inline-size:var(--_n-calendar-highlight-size);border-radius:var(--n-border-radius-circle);background-color:var(--_n-calendar-highlight-color)}.n-calendar-day.is-highlighted.is-month:is([aria-pressed=true],:focus):not([aria-disabled=true])::after{background-color:var(--n-color-text-on-accent)}.n-calendar-day.is-highlighted:is(:not(.is-month),.is-outside,[aria-disabled=true])::after{background-color:var(--n-color-text-weakest)}.n-calendar-header{align-items:start;display:flex;justify-content:space-between;margin-block-end:var(--n-space-m);inline-size:100%}.n-calendar-nav{white-space:nowrap}.n-calendar-nav nord-button{--_n-button-padding-inline:11px;margin-inline-start:var(--n-space-xs)}.n-calendar-select{display:inline-flex;margin-block-start:var(--n-space-xs);position:relative;line-height:var(--n-line-height)}.n-calendar-select span{margin-inline-end:var(--n-space-s)}.n-calendar-select select{cursor:pointer;font-size:var(--n-font-size-l);block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%}.n-calendar-select select:focus+.n-calendar-select-label{box-shadow:0 0 0 2px var(--n-color-accent)}.n-calendar-select-label{display:flex;align-items:center;border-radius:var(--n-border-radius-s);color:var(--n-color-text);font-size:var(--n-font-size-xl);font-weight:var(--n-font-weight-active);padding-block:0;padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-xs);pointer-events:none;position:relative;inline-size:100%}`;function G(e){return a=>{a.preventDefault(),e(a)}}X.registerIcon(I),X.registerIcon(U),X.registerIcon(A);const q=()=>!1,J=()=>!1,K="dialog-header";let Q=class extends t{constructor(){super(...arguments),this.direction=new v(this),this.swipe=new B(this,{matchesGesture:H,onSwipeEnd:({distX:e})=>this.addMonths(e<0?1:-1)}),this.shortcuts=h({ArrowRight:G((()=>this.addDays(this.direction.isLTR?1:-1))),ArrowLeft:G((()=>this.addDays(this.direction.isLTR?-1:1))),ArrowDown:G((()=>this.addDays(7))),ArrowUp:G((()=>this.addDays(-7))),Home:G((()=>this.startOfWeek())),End:G((()=>this.endOfWeek())),PageUp:G((()=>this.addMonths(-1))),PageDown:G((()=>this.addMonths(1))),"Shift+PageUp":G((()=>this.addYears(-1))),"Shift+PageDown":G((()=>this.addYears(1)))}),this.localize=new E(this,{onLangChange:()=>this.handleLangChange()}),this.value="",this.firstDayOfWeek=f.Monday,this.expand=!1,this.isDateDisabled=q,this.isDateHighlighted=J,this.activeFocus=!1,this.focusedDay=new Date,this.handleDaySelect=e=>{const a=m(e,y(this.min||""),y(this.max||"")),t=!this.isDateDisabled(e);a&&t&&(this.value=b(e),this.dispatchEvent(new W("change",e)))},this.handleMonthSelect=e=>{this.setMonth(Number.parseInt(e.target.value,10))},this.handleYearSelect=e=>{this.setYear(Number.parseInt(e.target.value,10))},this.handleNextMonthClick=e=>{e.preventDefault(),this.addMonths(1)},this.handlePreviousMonthClick=e=>{e.preventDefault(),this.addMonths(-1)},this.enableActiveFocus=()=>{this.activeFocus=!0},this.disableActiveFocus=e=>{const a=e.currentTarget,t=e.relatedTarget;t&&!a.contains(t)&&(this.activeFocus=!1)}}focus(e){var a;const t=null!==(a=null==e?void 0:e.target)&&void 0!==a?a:"day";"day"===t?this.focusedDayNode.focus():"month"===t&&this.monthSelectNode.focus()}render(){const e=this.getToday(),a=y(this.value),t=this.focusedDay.getMonth(),s=this.focusedDay.getFullYear(),o=y(this.min||""),r=y(this.max||""),l=o?w(o):void 0,h=r?x(r):void 0,v=(a||this.focusedDay).getFullYear(),g=o?o.getFullYear():v-10,f=r?r.getFullYear():v+10;return n&&this.handleLangChange(),i`<div class="n-calendar"><div class="n-calendar-header"><div><nord-visually-hidden><h2 id="${K}" aria-live="polite" aria-atomic="true">${this.monthNames[t]}, ${this.focusedDay.getFullYear()}</h2></nord-visually-hidden><div class="n-calendar-select"><select aria-label="${this.localize.term("monthSelectLabel")}" class="n-calendar-select-month" @input="${this.handleMonthSelect}">${this.monthNames.map(((e,a)=>i`<option value="${a}" ?selected="${a===t}" ?disabled="${!m(new Date(s,a,1),l,h)}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.monthNamesShort[t]}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div><div class="n-calendar-select"><select aria-label="${this.localize.term("yearSelectLabel")}" class="n-calendar-select-year" @input="${this.handleYearSelect}">${c(L(g,f),(e=>e),(e=>i`<option ?selected="${e===s}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.focusedDay.getFullYear()}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div></div><div class="n-calendar-nav"><nord-button class="n-calendar-prev" @click="${this.handlePreviousMonthClick}" ?disabled="${D(o,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("prevMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-left-small":"arrow-right-small"}" size="s"></nord-icon></nord-button><nord-button class="n-calendar-next" @click="${this.handleNextMonthClick}" ?disabled="${D(r,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("nextMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-right-small":"arrow-left-small"}" size="s"></nord-icon></nord-button></div></div><table class="n-calendar-table" aria-labelledby="${K}" @focusin="${this.enableActiveFocus}" @focusout="${this.disableActiveFocus}"><thead><tr>${u(this.dayNames,this.firstDayOfWeek,((e,a)=>i`<th class="n-calendar-table-header" scope="col"><span aria-hidden="true">${this.dayNamesShort[a]}</span><nord-visually-hidden>${e}</nord-visually-hidden></th>`))}</tr></thead><tbody>${p(k(this.focusedDay,this.firstDayOfWeek),7).map((t=>i`<tr class="n-calendar-row">${t.map((t=>{const n=!m(t,o,r),s=z(t,e),l=this.isDateDisabled(t),c=z(t,a),h=D(t,this.focusedDay),u=this.isDateHighlighted(t),p=this.dateFormatShort.format(t),v=u&&"string"==typeof u?`${p}, ${u}`:p;return i`<td class="n-calendar-cell"><button type="button" tabindex="${z(t,this.focusedDay)?0:-1}" class="${d({"n-calendar-day":!0,"is-outside":n,"is-month":h,"is-highlighted":u})}" @click="${()=>this.handleDaySelect(t)}" @keydown="${this.shortcuts}" ?disabled="${n}" aria-disabled="${N(l,"true")}" aria-pressed="${c?"true":"false"}" aria-current="${N(s,"date")}" aria-label="${v}"><span aria-hidden="true">${t.getDate()}</span></button></td>`}))}</tr>`))}</tbody></table></div>`}handleValueChange(){this.setFocusedDay(y(this.value)||this.getToday())}handleFocusedDayChange(){this.activeFocus&&this.focusedDayNode.focus()}handleLangChange(){const e=this.localize.resolvedLang;this.dateFormatShort=new Intl.DateTimeFormat(e,{day:"numeric",month:"long"}),this.monthNames=$(e,"long"),this.monthNamesShort=$(e,"short"),this.dayNames=F(e,"long"),this.dayNamesShort=F(e,"narrow")}getToday(){return y(this.today||"")||new Date}addDays(e){this.setFocusedDay(_(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(Y(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(M(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const a=S(w(this.focusedDay),e),t=x(a),n=S(this.focusedDay,e);this.setFocusedDay(T(n,a,t))}setYear(e){const a=j(w(this.focusedDay),e),t=x(a),n=j(this.focusedDay,e);this.setFocusedDay(T(n,a,t))}setFocusedDay(e){this.focusedDay=T(e,y(this.min||""),y(this.max||"")),this.dispatchEvent(new W("nord-focus-date",this.focusedDay))}};Q.styles=[O,V],e([s(".n-calendar-select-month",!0)],Q.prototype,"monthSelectNode",void 0),e([s('button[tabindex="0"]')],Q.prototype,"focusedDayNode",void 0),e([o()],Q.prototype,"value",void 0),e([o({reflect:!0,type:Number,attribute:"first-day-of-week"})],Q.prototype,"firstDayOfWeek",void 0),e([o({reflect:!0})],Q.prototype,"min",void 0),e([o({reflect:!0})],Q.prototype,"max",void 0),e([o({reflect:!0})],Q.prototype,"today",void 0),e([o({reflect:!0,type:Boolean})],Q.prototype,"expand",void 0),e([o({attribute:!1})],Q.prototype,"isDateDisabled",void 0),e([o({attribute:!1})],Q.prototype,"isDateHighlighted",void 0),e([r()],Q.prototype,"activeFocus",void 0),e([r()],Q.prototype,"focusedDay",void 0),e([C("value")],Q.prototype,"handleValueChange",null),e([C("focusedDay","updated")],Q.prototype,"handleFocusedDayChange",null),Q=e([l("nord-calendar")],Q);var Z=Q;export{Z as C,B as S,R as i};
+//# sourceMappingURL=Calendar-CKgiq2S1.js.map

package/lib/{Calendar-CL_eqbiT.js.map → Calendar-CKgiq2S1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Calendar-CL_eqbiT.js","sources":["../../icons/lib/assets/arrow-down-small.js","../../icons/lib/assets/arrow-left-small.js","../../icons/lib/assets/arrow-right-small.js","../src/common/controllers/SwipeController.ts","../src/calendar/Calendar.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m.100342 6.92903 2.121318-2.12132 7.77818 7.77819 7.77826-7.77828 2.1213 2.12132-8.4853 8.48536c-.7811.7811-2.04743.7811-2.82848 0z\" fill=\"currentColor\"/></svg>';\nexport const title = \"arrow-down-small\";\nexport const tags = \"nordicon arrow down small caret pointing triangle chevron\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.0712.105225 2.1213 2.121315-7.77816 7.77816 7.77826 7.7783-2.1213 2.1213-8.48539-8.4854c-.78105-.781-.78105-2.04735 0-2.82839z\" fill=\"currentColor\"/></svg>';\nexport const title = \"arrow-left-small\";\nexport const tags = \"nordicon arrow left small caret pointing triangle chevron\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.92903.100342-2.12132 2.121318 7.77819 7.77818-7.77828 7.77826 2.12132 2.1213 8.48536-8.4853c.7811-.7811.7811-2.04743 0-2.82848z\" fill=\"currentColor\"/></svg>';\nexport const title = \"arrow-right-small\";\nexport const tags =\n  \"nordicon arrow right small caret pointing triangle chevron\";\n","import type { ReactiveController, ReactiveElement } from 'lit'\nimport { EventController } from './EventController.js'\n\nexport interface SwipeDetails {\n  initialX: number\n  initialY: number\n  pageX: number\n  pageY: number\n  distX: number\n  distY: number\n}\n\nconst preventDefault = (e: Event) => e.preventDefault()\n\ntype SetRequired<T, K extends keyof T> = T & { [Property in K]-?: T[K] }\ninterface SwipeControllerOptions {\n  target?: () => HTMLElement\n  matchesGesture: (details: SwipeDetails) => boolean\n  onSwipeEnd: (details: SwipeDetails) => void\n}\n\nexport class SwipeController implements ReactiveController {\n  private events: EventController\n  private hadFirstUpdate = false\n\n  private initialTouchX: number = 0\n  private initialTouchY: number = 0\n  private options: SetRequired<SwipeControllerOptions, 'target'>\n\n  constructor(host: ReactiveElement, options: SwipeControllerOptions) {\n    host.addController(this)\n    this.events = new EventController(host)\n\n    this.options = {\n      target: () => host,\n      ...options,\n    }\n  }\n\n  hostUpdated() {\n    if (!this.hadFirstUpdate) {\n      this.hadFirstUpdate = true\n\n      const target = this.options.target()\n      this.events.listen(target, 'touchstart', this.handleTouchStart)\n      this.events.listen(target, 'touchmove', preventDefault)\n      this.events.listen(target, 'touchend', this.handleTouchEnd)\n    }\n  }\n\n  hostDisconnected() {\n    this.hadFirstUpdate = false\n  }\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const [{ pageX, pageY }] = event.changedTouches\n    this.initialTouchX = pageX\n    this.initialTouchY = pageY\n  }\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const [{ pageX, pageY }] = event.changedTouches\n    const { matchesGesture, onSwipeEnd } = this.options\n\n    const distX = pageX - this.initialTouchX\n    const distY = pageY - this.initialTouchY\n    const details = { initialX: this.initialTouchX, initialY: this.initialTouchY, pageX, pageY, distX, distY }\n\n    if (matchesGesture(details)) {\n      event.preventDefault()\n      onSwipeEnd(details)\n    }\n  }\n}\n\nconst THRESHOLD = 70\n\nexport function isHorizontalSwipe({ distX, distY }: SwipeDetails) {\n  return Math.abs(distX) >= THRESHOLD && Math.abs(distY) <= THRESHOLD\n}\n\nexport function isDownwardsSwipe({ distX, distY }: SwipeDetails) {\n  return Math.abs(distY) >= THRESHOLD && Math.abs(distX) <= THRESHOLD && distY > 0\n}\n","import * as arrowDownIcon from '@nordhealth/icons/lib/assets/arrow-down-small.js'\nimport * as arrowLeftIcon from '@nordhealth/icons/lib/assets/arrow-left-small.js'\nimport * as arrowRightIcon from '@nordhealth/icons/lib/assets/arrow-right-small.js'\nimport { html, isServer, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { createKeybindingsHandler } from 'tinykeys'\n\nimport { chunk, mapWithOffset } from '../common/collection.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { isHorizontalSwipe, SwipeController } from '../common/controllers/SwipeController.js'\n\nimport {\n  addDays,\n  clamp,\n  DaysOfWeek,\n  endOfMonth,\n  endOfWeek,\n  getDayNames,\n  getMonthNames,\n  getViewOfMonth,\n  inRange,\n  isEqual,\n  isEqualMonth,\n  parseISODate,\n  printISODate,\n  setMonth,\n  setYear,\n  startOfMonth,\n  startOfWeek,\n} from '../common/dates.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { range } from '../common/number.js'\nimport componentStyle from '../common/styles/Component.css'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Calendar.css'\n\nimport { DateSelectEvent } from './DateSelectEvent.js'\nimport '../button/Button.js'\nimport '../visually-hidden/VisuallyHidden.js'\n\nexport type DatePredicate = (date: Date) => boolean\n\nIcon.registerIcon(arrowRightIcon)\nIcon.registerIcon(arrowLeftIcon)\nIcon.registerIcon(arrowDownIcon)\n\nfunction preventDefault(fn: EventListener) {\n  return (e: Event) => {\n    e.preventDefault()\n    fn(e)\n  }\n}\n\nconst isDateDisabled: DatePredicate = () => false\nconst isDateHighlighted = () => false\n\nconst dialogLabelId = 'dialog-header'\n\n/**\n * Calendar allows user to pick a date. It comes with built-in\n * functionality that allows you to set a minimum and a maximum allowed date.\n * Please note that the date must be passed in ISO-8601 format.\n *\n * @status ready\n * @category list\n * @fires {DateSelectEvent} change - Dispatched when a date is selected and the value changes.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n *\n * @cssprop [--n-calendar-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-calendar-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n *\n * @localization prevMonthLabel - Accessible label for the previous month button.\n * @localization nextMonthLabel - Accessible label for the next month button.\n * @localization monthSelectLabel - Accessible label for the month select.\n * @localization yearSelectLabel - Accessible label for the year select.\n */\n@customElement('nord-calendar')\nexport default class Calendar extends LitElement {\n  static styles = [componentStyle, style]\n\n  @query('.n-calendar-select-month', true) private monthSelectNode!: HTMLElement\n  @query(`button[tabindex=\"0\"]`) private focusedDayNode!: HTMLButtonElement\n\n  private direction = new DirectionController(this)\n  private swipe = new SwipeController(this, {\n    matchesGesture: isHorizontalSwipe,\n    onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n  })\n\n  private shortcuts = createKeybindingsHandler({\n    'ArrowRight': preventDefault(() => this.addDays(this.direction.isLTR ? 1 : -1)),\n    'ArrowLeft': preventDefault(() => this.addDays(this.direction.isLTR ? -1 : 1)),\n    'ArrowDown': preventDefault(() => this.addDays(7)),\n    'ArrowUp': preventDefault(() => this.addDays(-7)),\n    'Home': preventDefault(() => this.startOfWeek()),\n    'End': preventDefault(() => this.endOfWeek()),\n    'PageUp': preventDefault(() => this.addMonths(-1)),\n    'PageDown': preventDefault(() => this.addMonths(1)),\n    'Shift+PageUp': preventDefault(() => this.addYears(-1)),\n    'Shift+PageDown': preventDefault(() => this.addYears(1)),\n  })\n\n  private localize = new LocalizeController<'nord-calendar'>(this, {\n    onLangChange: () => this.handleLangChange(),\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 dateFormatShort!: Intl.DateTimeFormat\n  private monthNames!: string[]\n  private monthNamesShort!: string[]\n  private dayNames!: string[]\n  private dayNamesShort!: string[]\n\n  /**\n   * The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = ''\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @property({ reflect: true, type: Number, attribute: 'first-day-of-week' }) firstDayOfWeek: DaysOfWeek\n    = DaysOfWeek.Monday\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @property({ reflect: true }) min?: string\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @property({ reflect: true }) max?: string\n\n  /**\n   * The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\n   * If not set, the current local date of the user is used.\n   */\n  @property({ reflect: true }) today?: string\n\n  /**\n   * Controls whether the calendar expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @property({ attribute: false }) isDateDisabled: DatePredicate = isDateDisabled\n\n  /**\n   * Controls which days are highlighted with a small indicator.\n   * Returning a \"falsy\" value will not show an indicator.\n   * Returning \"truthy\" value will show the indicator, but without an accessible label.\n   * Returning a string will show the indicator, and use the string as accessible label.\n   * It is recommended to return a string rather than a truthy value whenever possible.\n   */\n  @property({ attribute: false }) isDateHighlighted: (date: Date) => string | boolean = isDateHighlighted\n\n  @state() private activeFocus = false\n  @state() private focusedDay = new Date()\n\n  /**\n   * Programmatically move focus to the calendar.\n   * @param options An object which controls aspects of the focusing process.\n   */\n  focus(options?: FocusOptions & { target: 'day' | 'month' }) {\n    const target = options?.target ?? 'day'\n\n    if (target === 'day') {\n      this.focusedDayNode.focus()\n    }\n    else if (target === 'month') {\n      this.monthSelectNode.focus()\n    }\n  }\n\n  render() {\n    const today = this.getToday()\n    const valueAsDate = parseISODate(this.value)\n    const focusedMonth = this.focusedDay.getMonth()\n    const focusedYear = this.focusedDay.getFullYear()\n\n    const minDate = parseISODate(this.min || '')\n    const maxDate = parseISODate(this.max || '')\n    const minDateStartOfMonth = minDate ? startOfMonth(minDate) : undefined\n    const maxDateEndOfMonth = maxDate ? endOfMonth(maxDate) : undefined\n\n    const selectedYear = (valueAsDate || this.focusedDay).getFullYear()\n    const minYear = minDate ? minDate.getFullYear() : selectedYear - 10\n    const maxYear = maxDate ? maxDate.getFullYear() : selectedYear + 10\n\n    if (isServer) {\n      // Needed when run on a server, because the `onLangChange` callback does not get triggered, so we need to manually\n      // call `handleLangChange` to set the localized values for month and day names, which the `render` method relies on.\n      this.handleLangChange()\n    }\n\n    return html`\n      <div class=\"n-calendar\">\n        <div class=\"n-calendar-header\">\n          <div>\n            <nord-visually-hidden>\n              <h2 id=${dialogLabelId} aria-live=\"polite\" aria-atomic=\"true\">\n                ${this.monthNames[focusedMonth]}, ${this.focusedDay.getFullYear()}\n              </h2>\n            </nord-visually-hidden>\n\n            <div class=\"n-calendar-select\">\n              <select\n                aria-label=${this.localize.term('monthSelectLabel')}\n                class=\"n-calendar-select-month\"\n                @input=${this.handleMonthSelect}\n              >\n                ${this.monthNames.map(\n                  (month, i) => html`\n                    <option\n                      value=${i}\n                      ?selected=${i === focusedMonth}\n                      ?disabled=${!inRange(new Date(focusedYear, i, 1), minDateStartOfMonth, maxDateEndOfMonth)}\n                    >\n                      ${month}\n                    </option>\n                  `,\n                )}\n              </select>\n              <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n                <span>${this.monthNamesShort[focusedMonth]}</span>\n                <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n              </div>\n            </div>\n\n            <div class=\"n-calendar-select\">\n              <select\n                aria-label=${this.localize.term('yearSelectLabel')}\n                class=\"n-calendar-select-year\"\n                @input=${this.handleYearSelect}\n              >\n                ${repeat(\n                  range(minYear, maxYear),\n                  year => year,\n                  year => html`<option ?selected=${year === focusedYear}>${year}</option>`,\n                )}\n              </select>\n              <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n                <span>${this.focusedDay.getFullYear()}</span>\n                <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"n-calendar-nav\">\n            <nord-button\n              class=\"n-calendar-prev\"\n              @click=${this.handlePreviousMonthClick}\n              ?disabled=${isEqualMonth(minDate, this.focusedDay)}\n              type=\"button\"\n            >\n              <nord-visually-hidden>${this.localize.term('prevMonthLabel')}</nord-visually-hidden>\n              <nord-icon name=${this.direction.isLTR ? 'arrow-left-small' : 'arrow-right-small'} size=\"s\"></nord-icon>\n            </nord-button>\n\n            <nord-button\n              class=\"n-calendar-next\"\n              @click=${this.handleNextMonthClick}\n              ?disabled=${isEqualMonth(maxDate, this.focusedDay)}\n              type=\"button\"\n            >\n              <nord-visually-hidden>${this.localize.term('nextMonthLabel')}</nord-visually-hidden>\n              <nord-icon name=${this.direction.isLTR ? 'arrow-right-small' : 'arrow-left-small'} size=\"s\"></nord-icon>\n            </nord-button>\n          </div>\n        </div>\n\n        <table\n          class=\"n-calendar-table\"\n          aria-labelledby=${dialogLabelId}\n          @focusin=${this.enableActiveFocus}\n          @focusout=${this.disableActiveFocus}\n        >\n          <thead>\n            <tr>\n              ${mapWithOffset(\n                this.dayNames,\n                this.firstDayOfWeek,\n                (dayName, i) => html`\n                  <th class=\"n-calendar-table-header\" scope=\"col\">\n                    <span aria-hidden=\"true\">${this.dayNamesShort[i]}</span>\n                    <nord-visually-hidden>${dayName}</nord-visually-hidden>\n                  </th>\n                `,\n              )}\n            </tr>\n          </thead>\n          <tbody>\n            ${chunk(getViewOfMonth(this.focusedDay, this.firstDayOfWeek), 7).map(\n              week => html`\n                <tr class=\"n-calendar-row\">\n                  ${week.map((day) => {\n                    const outsideRange = !inRange(day, minDate, maxDate)\n                    const isToday = isEqual(day, today)\n                    const isDisabled = this.isDateDisabled(day)\n                    const isSelected = isEqual(day, valueAsDate)\n                    const isInMonth = isEqualMonth(day, this.focusedDay)\n                    const isHighlighted = this.isDateHighlighted(day)\n                    const formattedDate = this.dateFormatShort.format(day)\n\n                    const accessibleLabel\n                      = isHighlighted && typeof isHighlighted === 'string'\n                        ? `${formattedDate}, ${isHighlighted}`\n                        : formattedDate\n\n                    return html`\n                      <td class=\"n-calendar-cell\">\n                        <button\n                          type=\"button\"\n                          tabindex=${isEqual(day, this.focusedDay) ? 0 : -1}\n                          class=${classMap({\n                            'n-calendar-day': true,\n                            'is-outside': outsideRange,\n                            'is-month': isInMonth,\n                            'is-highlighted': isHighlighted,\n                          })}\n                          @click=${() => this.handleDaySelect(day)}\n                          @keydown=${this.shortcuts}\n                          ?disabled=${outsideRange}\n                          aria-disabled=${cond(isDisabled, 'true')}\n                          aria-pressed=${isSelected ? 'true' : 'false'}\n                          aria-current=${cond(isToday, 'date')}\n                          aria-label=${accessibleLabel}\n                        >\n                          <span aria-hidden=\"true\">${day.getDate()}</span>\n                        </button>\n                      </td>\n                    `\n                  })}\n                </tr>\n              `,\n            )}\n          </tbody>\n        </table>\n      </div>\n    `\n  }\n\n  @observe('value')\n  protected handleValueChange() {\n    this.setFocusedDay(parseISODate(this.value) || this.getToday())\n  }\n\n  @observe('focusedDay', 'updated')\n  protected handleFocusedDayChange() {\n    if (this.activeFocus) {\n      this.focusedDayNode.focus()\n    }\n  }\n\n  private handleLangChange() {\n    const lang = this.localize.resolvedLang\n    this.dateFormatShort = new Intl.DateTimeFormat(lang, { timeZone: 'UTC', day: 'numeric', month: 'long' })\n    this.monthNames = getMonthNames(lang, 'long')\n    this.monthNamesShort = getMonthNames(lang, 'short')\n    this.dayNames = getDayNames(lang, 'long')\n    this.dayNamesShort = getDayNames(lang, 'narrow')\n  }\n\n  private handleDaySelect = (day: Date) => {\n    const isInRange = inRange(day, parseISODate(this.min || ''), parseISODate(this.max || ''))\n    const isAllowed = !this.isDateDisabled(day)\n\n    if (isInRange && isAllowed) {\n      this.value = printISODate(day)\n      this.dispatchEvent(new DateSelectEvent('change', day))\n    }\n  }\n\n  private getToday() {\n    return parseISODate(this.today || '') || new Date()\n  }\n\n  private addDays(days: number) {\n    this.setFocusedDay(addDays(this.focusedDay, days))\n  }\n\n  private addMonths(months: number) {\n    this.setMonth(this.focusedDay.getMonth() + months)\n  }\n\n  private addYears(years: number) {\n    this.setYear(this.focusedDay.getFullYear() + years)\n  }\n\n  private startOfWeek() {\n    this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek))\n  }\n\n  private endOfWeek() {\n    this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek))\n  }\n\n  private setMonth(month: number) {\n    const min = setMonth(startOfMonth(this.focusedDay), month)\n    const max = endOfMonth(min)\n    const date = setMonth(this.focusedDay, month)\n\n    this.setFocusedDay(clamp(date, min, max))\n  }\n\n  private setYear(year: number) {\n    const min = setYear(startOfMonth(this.focusedDay), year)\n    const max = endOfMonth(min)\n    const date = setYear(this.focusedDay, year)\n\n    this.setFocusedDay(clamp(date, min, max))\n  }\n\n  private setFocusedDay(day: Date) {\n    this.focusedDay = clamp(day, parseISODate(this.min || ''), parseISODate(this.max || ''))\n    this.dispatchEvent(new DateSelectEvent('nord-focus-date', this.focusedDay))\n  }\n\n  private handleMonthSelect = (e: Event) => {\n    this.setMonth(Number.parseInt((e.target as HTMLSelectElement).value, 10))\n  }\n\n  private handleYearSelect = (e: Event) => {\n    this.setYear(Number.parseInt((e.target as HTMLSelectElement).value, 10))\n  }\n\n  private handleNextMonthClick = (event: MouseEvent) => {\n    event.preventDefault()\n    this.addMonths(1)\n  }\n\n  private handlePreviousMonthClick = (event: MouseEvent) => {\n    event.preventDefault()\n    this.addMonths(-1)\n  }\n\n  private enableActiveFocus = () => {\n    this.activeFocus = true\n  }\n\n  private disableActiveFocus = (e: FocusEvent) => {\n    const table = e.currentTarget as Node\n    const relatedTarget = e.relatedTarget as Node\n\n    if (relatedTarget && !table.contains(relatedTarget)) {\n      this.activeFocus = false\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-calendar': Calendar\n  }\n}\n"],"names":["preventDefault","e","SwipeController","constructor","host","options","this","hadFirstUpdate","initialTouchX","initialTouchY","handleTouchStart","event","pageX","pageY","changedTouches","handleTouchEnd","matchesGesture","onSwipeEnd","distX","distY","details","initialX","initialY","addController","events","EventController","target","hostUpdated","listen","hostDisconnected","isHorizontalSwipe","Math","abs","isDownwardsSwipe","fn","Icon","registerIcon","arrowRightIcon","arrowLeftIcon","arrowDownIcon","isDateDisabled","isDateHighlighted","dialogLabelId","Calendar","LitElement","direction","DirectionController","swipe","addMonths","shortcuts","createKeybindingsHandler","ArrowRight","addDays","isLTR","ArrowLeft","ArrowDown","ArrowUp","Home","startOfWeek","End","endOfWeek","PageUp","PageDown","addYears","localize","LocalizeController","onLangChange","handleLangChange","value","firstDayOfWeek","DaysOfWeek","Monday","expand","activeFocus","focusedDay","Date","handleDaySelect","day","isInRange","inRange","parseISODate","min","max","isAllowed","printISODate","dispatchEvent","DateSelectEvent","handleMonthSelect","setMonth","Number","parseInt","handleYearSelect","setYear","handleNextMonthClick","handlePreviousMonthClick","enableActiveFocus","disableActiveFocus","table","currentTarget","relatedTarget","contains","focus","_a","focusedDayNode","monthSelectNode","render","today","getToday","valueAsDate","focusedMonth","getMonth","focusedYear","getFullYear","minDate","maxDate","minDateStartOfMonth","startOfMonth","undefined","maxDateEndOfMonth","endOfMonth","selectedYear","minYear","maxYear","isServer","html","monthNames","term","map","month","i","monthNamesShort","repeat","range","year","isEqualMonth","mapWithOffset","dayNames","dayName","dayNamesShort","chunk","getViewOfMonth","week","outsideRange","isToday","isEqual","isDisabled","isSelected","isInMonth","isHighlighted","formattedDate","dateFormatShort","format","accessibleLabel","classMap","cond","getDate","handleValueChange","setFocusedDay","handleFocusedDayChange","lang","resolvedLang","Intl","DateTimeFormat","timeZone","getMonthNames","getDayNames","days","months","years","date","clamp","styles","componentStyle","style","__decorate","query","prototype","property","reflect","type","attribute","Boolean","state","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Calendar-CKgiq2S1.js","sources":["../../icons/lib/assets/arrow-down-small.js","../../icons/lib/assets/arrow-left-small.js","../../icons/lib/assets/arrow-right-small.js","../src/common/controllers/SwipeController.ts","../src/calendar/Calendar.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m.100342 6.92903 2.121318-2.12132 7.77818 7.77819 7.77826-7.77828 2.1213 2.12132-8.4853 8.48536c-.7811.7811-2.04743.7811-2.82848 0z\" fill=\"currentColor\"/></svg>';\nexport const title = \"arrow-down-small\";\nexport const tags = \"nordicon arrow down small caret pointing triangle chevron\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.0712.105225 2.1213 2.121315-7.77816 7.77816 7.77826 7.7783-2.1213 2.1213-8.48539-8.4854c-.78105-.781-.78105-2.04735 0-2.82839z\" fill=\"currentColor\"/></svg>';\nexport const title = \"arrow-left-small\";\nexport const tags = \"nordicon arrow left small caret pointing triangle chevron\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.92903.100342-2.12132 2.121318 7.77819 7.77818-7.77828 7.77826 2.12132 2.1213 8.48536-8.4853c.7811-.7811.7811-2.04743 0-2.82848z\" fill=\"currentColor\"/></svg>';\nexport const title = \"arrow-right-small\";\nexport const tags =\n  \"nordicon arrow right small caret pointing triangle chevron\";\n","import type { ReactiveController, ReactiveElement } from 'lit'\nimport { EventController } from './EventController.js'\n\nexport interface SwipeDetails {\n  initialX: number\n  initialY: number\n  pageX: number\n  pageY: number\n  distX: number\n  distY: number\n}\n\nconst preventDefault = (e: Event) => e.preventDefault()\n\ntype SetRequired<T, K extends keyof T> = T & { [Property in K]-?: T[K] }\ninterface SwipeControllerOptions {\n  target?: () => HTMLElement\n  matchesGesture: (details: SwipeDetails) => boolean\n  onSwipeEnd: (details: SwipeDetails) => void\n}\n\nexport class SwipeController implements ReactiveController {\n  private events: EventController\n  private hadFirstUpdate = false\n\n  private initialTouchX: number = 0\n  private initialTouchY: number = 0\n  private options: SetRequired<SwipeControllerOptions, 'target'>\n\n  constructor(host: ReactiveElement, options: SwipeControllerOptions) {\n    host.addController(this)\n    this.events = new EventController(host)\n\n    this.options = {\n      target: () => host,\n      ...options,\n    }\n  }\n\n  hostUpdated() {\n    if (!this.hadFirstUpdate) {\n      this.hadFirstUpdate = true\n\n      const target = this.options.target()\n      this.events.listen(target, 'touchstart', this.handleTouchStart)\n      this.events.listen(target, 'touchmove', preventDefault)\n      this.events.listen(target, 'touchend', this.handleTouchEnd)\n    }\n  }\n\n  hostDisconnected() {\n    this.hadFirstUpdate = false\n  }\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const [{ pageX, pageY }] = event.changedTouches\n    this.initialTouchX = pageX\n    this.initialTouchY = pageY\n  }\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const [{ pageX, pageY }] = event.changedTouches\n    const { matchesGesture, onSwipeEnd } = this.options\n\n    const distX = pageX - this.initialTouchX\n    const distY = pageY - this.initialTouchY\n    const details = { initialX: this.initialTouchX, initialY: this.initialTouchY, pageX, pageY, distX, distY }\n\n    if (matchesGesture(details)) {\n      event.preventDefault()\n      onSwipeEnd(details)\n    }\n  }\n}\n\nconst THRESHOLD = 70\n\nexport function isHorizontalSwipe({ distX, distY }: SwipeDetails) {\n  return Math.abs(distX) >= THRESHOLD && Math.abs(distY) <= THRESHOLD\n}\n\nexport function isDownwardsSwipe({ distX, distY }: SwipeDetails) {\n  return Math.abs(distY) >= THRESHOLD && Math.abs(distX) <= THRESHOLD && distY > 0\n}\n","import * as arrowDownIcon from '@nordhealth/icons/lib/assets/arrow-down-small.js'\nimport * as arrowLeftIcon from '@nordhealth/icons/lib/assets/arrow-left-small.js'\nimport * as arrowRightIcon from '@nordhealth/icons/lib/assets/arrow-right-small.js'\nimport { html, isServer, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { createKeybindingsHandler } from 'tinykeys'\n\nimport { chunk, mapWithOffset } from '../common/collection.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { isHorizontalSwipe, SwipeController } from '../common/controllers/SwipeController.js'\n\nimport {\n  addDays,\n  clamp,\n  DaysOfWeek,\n  endOfMonth,\n  endOfWeek,\n  getDayNames,\n  getMonthNames,\n  getViewOfMonth,\n  inRange,\n  isEqual,\n  isEqualMonth,\n  parseISODate,\n  printISODate,\n  setMonth,\n  setYear,\n  startOfMonth,\n  startOfWeek,\n} from '../common/dates.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { range } from '../common/number.js'\nimport componentStyle from '../common/styles/Component.css'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Calendar.css'\n\nimport { DateSelectEvent } from './DateSelectEvent.js'\nimport '../button/Button.js'\nimport '../visually-hidden/VisuallyHidden.js'\n\nexport type DatePredicate = (date: Date) => boolean\n\nIcon.registerIcon(arrowRightIcon)\nIcon.registerIcon(arrowLeftIcon)\nIcon.registerIcon(arrowDownIcon)\n\nfunction preventDefault(fn: EventListener) {\n  return (e: Event) => {\n    e.preventDefault()\n    fn(e)\n  }\n}\n\nconst isDateDisabled: DatePredicate = () => false\nconst isDateHighlighted = () => false\n\nconst dialogLabelId = 'dialog-header'\n\n/**\n * Calendar allows user to pick a date. It comes with built-in\n * functionality that allows you to set a minimum and a maximum allowed date.\n * Please note that the date must be passed in ISO-8601 format.\n *\n * @status ready\n * @category list\n * @fires {DateSelectEvent} change - Dispatched when a date is selected and the value changes.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n *\n * @cssprop [--n-calendar-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-calendar-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n *\n * @localization prevMonthLabel - Accessible label for the previous month button.\n * @localization nextMonthLabel - Accessible label for the next month button.\n * @localization monthSelectLabel - Accessible label for the month select.\n * @localization yearSelectLabel - Accessible label for the year select.\n */\n@customElement('nord-calendar')\nexport default class Calendar extends LitElement {\n  static styles = [componentStyle, style]\n\n  @query('.n-calendar-select-month', true) private monthSelectNode!: HTMLElement\n  @query(`button[tabindex=\"0\"]`) private focusedDayNode!: HTMLButtonElement\n\n  private direction = new DirectionController(this)\n  private swipe = new SwipeController(this, {\n    matchesGesture: isHorizontalSwipe,\n    onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n  })\n\n  private shortcuts = createKeybindingsHandler({\n    'ArrowRight': preventDefault(() => this.addDays(this.direction.isLTR ? 1 : -1)),\n    'ArrowLeft': preventDefault(() => this.addDays(this.direction.isLTR ? -1 : 1)),\n    'ArrowDown': preventDefault(() => this.addDays(7)),\n    'ArrowUp': preventDefault(() => this.addDays(-7)),\n    'Home': preventDefault(() => this.startOfWeek()),\n    'End': preventDefault(() => this.endOfWeek()),\n    'PageUp': preventDefault(() => this.addMonths(-1)),\n    'PageDown': preventDefault(() => this.addMonths(1)),\n    'Shift+PageUp': preventDefault(() => this.addYears(-1)),\n    'Shift+PageDown': preventDefault(() => this.addYears(1)),\n  })\n\n  private localize = new LocalizeController<'nord-calendar'>(this, {\n    onLangChange: () => this.handleLangChange(),\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 dateFormatShort!: Intl.DateTimeFormat\n  private monthNames!: string[]\n  private monthNamesShort!: string[]\n  private dayNames!: string[]\n  private dayNamesShort!: string[]\n\n  /**\n   * The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = ''\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @property({ reflect: true, type: Number, attribute: 'first-day-of-week' }) firstDayOfWeek: DaysOfWeek\n    = DaysOfWeek.Monday\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @property({ reflect: true }) min?: string\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @property({ reflect: true }) max?: string\n\n  /**\n   * The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\n   * If not set, the current local date of the user is used.\n   */\n  @property({ reflect: true }) today?: string\n\n  /**\n   * Controls whether the calendar expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @property({ attribute: false }) isDateDisabled: DatePredicate = isDateDisabled\n\n  /**\n   * Controls which days are highlighted with a small indicator.\n   * Returning a \"falsy\" value will not show an indicator.\n   * Returning \"truthy\" value will show the indicator, but without an accessible label.\n   * Returning a string will show the indicator, and use the string as accessible label.\n   * It is recommended to return a string rather than a truthy value whenever possible.\n   */\n  @property({ attribute: false }) isDateHighlighted: (date: Date) => string | boolean = isDateHighlighted\n\n  @state() private activeFocus = false\n  @state() private focusedDay = new Date()\n\n  /**\n   * Programmatically move focus to the calendar.\n   * @param options An object which controls aspects of the focusing process.\n   */\n  focus(options?: FocusOptions & { target: 'day' | 'month' }) {\n    const target = options?.target ?? 'day'\n\n    if (target === 'day') {\n      this.focusedDayNode.focus()\n    }\n    else if (target === 'month') {\n      this.monthSelectNode.focus()\n    }\n  }\n\n  render() {\n    const today = this.getToday()\n    const valueAsDate = parseISODate(this.value)\n    const focusedMonth = this.focusedDay.getMonth()\n    const focusedYear = this.focusedDay.getFullYear()\n\n    const minDate = parseISODate(this.min || '')\n    const maxDate = parseISODate(this.max || '')\n    const minDateStartOfMonth = minDate ? startOfMonth(minDate) : undefined\n    const maxDateEndOfMonth = maxDate ? endOfMonth(maxDate) : undefined\n\n    const selectedYear = (valueAsDate || this.focusedDay).getFullYear()\n    const minYear = minDate ? minDate.getFullYear() : selectedYear - 10\n    const maxYear = maxDate ? maxDate.getFullYear() : selectedYear + 10\n\n    if (isServer) {\n      // Needed when run on a server, because the `onLangChange` callback does not get triggered, so we need to manually\n      // call `handleLangChange` to set the localized values for month and day names, which the `render` method relies on.\n      this.handleLangChange()\n    }\n\n    return html`\n      <div class=\"n-calendar\">\n        <div class=\"n-calendar-header\">\n          <div>\n            <nord-visually-hidden>\n              <h2 id=${dialogLabelId} aria-live=\"polite\" aria-atomic=\"true\">\n                ${this.monthNames[focusedMonth]}, ${this.focusedDay.getFullYear()}\n              </h2>\n            </nord-visually-hidden>\n\n            <div class=\"n-calendar-select\">\n              <select\n                aria-label=${this.localize.term('monthSelectLabel')}\n                class=\"n-calendar-select-month\"\n                @input=${this.handleMonthSelect}\n              >\n                ${this.monthNames.map(\n                  (month, i) => html`\n                    <option\n                      value=${i}\n                      ?selected=${i === focusedMonth}\n                      ?disabled=${!inRange(new Date(focusedYear, i, 1), minDateStartOfMonth, maxDateEndOfMonth)}\n                    >\n                      ${month}\n                    </option>\n                  `,\n                )}\n              </select>\n              <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n                <span>${this.monthNamesShort[focusedMonth]}</span>\n                <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n              </div>\n            </div>\n\n            <div class=\"n-calendar-select\">\n              <select\n                aria-label=${this.localize.term('yearSelectLabel')}\n                class=\"n-calendar-select-year\"\n                @input=${this.handleYearSelect}\n              >\n                ${repeat(\n                  range(minYear, maxYear),\n                  year => year,\n                  year => html`<option ?selected=${year === focusedYear}>${year}</option>`,\n                )}\n              </select>\n              <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n                <span>${this.focusedDay.getFullYear()}</span>\n                <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"n-calendar-nav\">\n            <nord-button\n              class=\"n-calendar-prev\"\n              @click=${this.handlePreviousMonthClick}\n              ?disabled=${isEqualMonth(minDate, this.focusedDay)}\n              type=\"button\"\n            >\n              <nord-visually-hidden>${this.localize.term('prevMonthLabel')}</nord-visually-hidden>\n              <nord-icon name=${this.direction.isLTR ? 'arrow-left-small' : 'arrow-right-small'} size=\"s\"></nord-icon>\n            </nord-button>\n\n            <nord-button\n              class=\"n-calendar-next\"\n              @click=${this.handleNextMonthClick}\n              ?disabled=${isEqualMonth(maxDate, this.focusedDay)}\n              type=\"button\"\n            >\n              <nord-visually-hidden>${this.localize.term('nextMonthLabel')}</nord-visually-hidden>\n              <nord-icon name=${this.direction.isLTR ? 'arrow-right-small' : 'arrow-left-small'} size=\"s\"></nord-icon>\n            </nord-button>\n          </div>\n        </div>\n\n        <table\n          class=\"n-calendar-table\"\n          aria-labelledby=${dialogLabelId}\n          @focusin=${this.enableActiveFocus}\n          @focusout=${this.disableActiveFocus}\n        >\n          <thead>\n            <tr>\n              ${mapWithOffset(\n                this.dayNames,\n                this.firstDayOfWeek,\n                (dayName, i) => html`\n                  <th class=\"n-calendar-table-header\" scope=\"col\">\n                    <span aria-hidden=\"true\">${this.dayNamesShort[i]}</span>\n                    <nord-visually-hidden>${dayName}</nord-visually-hidden>\n                  </th>\n                `,\n              )}\n            </tr>\n          </thead>\n          <tbody>\n            ${chunk(getViewOfMonth(this.focusedDay, this.firstDayOfWeek), 7).map(\n              week => html`\n                <tr class=\"n-calendar-row\">\n                  ${week.map((day) => {\n                    const outsideRange = !inRange(day, minDate, maxDate)\n                    const isToday = isEqual(day, today)\n                    const isDisabled = this.isDateDisabled(day)\n                    const isSelected = isEqual(day, valueAsDate)\n                    const isInMonth = isEqualMonth(day, this.focusedDay)\n                    const isHighlighted = this.isDateHighlighted(day)\n                    const formattedDate = this.dateFormatShort.format(day)\n\n                    const accessibleLabel\n                      = isHighlighted && typeof isHighlighted === 'string'\n                        ? `${formattedDate}, ${isHighlighted}`\n                        : formattedDate\n\n                    return html`\n                      <td class=\"n-calendar-cell\">\n                        <button\n                          type=\"button\"\n                          tabindex=${isEqual(day, this.focusedDay) ? 0 : -1}\n                          class=${classMap({\n                            'n-calendar-day': true,\n                            'is-outside': outsideRange,\n                            'is-month': isInMonth,\n                            'is-highlighted': isHighlighted,\n                          })}\n                          @click=${() => this.handleDaySelect(day)}\n                          @keydown=${this.shortcuts}\n                          ?disabled=${outsideRange}\n                          aria-disabled=${cond(isDisabled, 'true')}\n                          aria-pressed=${isSelected ? 'true' : 'false'}\n                          aria-current=${cond(isToday, 'date')}\n                          aria-label=${accessibleLabel}\n                        >\n                          <span aria-hidden=\"true\">${day.getDate()}</span>\n                        </button>\n                      </td>\n                    `\n                  })}\n                </tr>\n              `,\n            )}\n          </tbody>\n        </table>\n      </div>\n    `\n  }\n\n  @observe('value')\n  protected handleValueChange() {\n    this.setFocusedDay(parseISODate(this.value) || this.getToday())\n  }\n\n  @observe('focusedDay', 'updated')\n  protected handleFocusedDayChange() {\n    if (this.activeFocus) {\n      this.focusedDayNode.focus()\n    }\n  }\n\n  private handleLangChange() {\n    const lang = this.localize.resolvedLang\n    this.dateFormatShort = new Intl.DateTimeFormat(lang, { day: 'numeric', month: 'long' })\n    this.monthNames = getMonthNames(lang, 'long')\n    this.monthNamesShort = getMonthNames(lang, 'short')\n    this.dayNames = getDayNames(lang, 'long')\n    this.dayNamesShort = getDayNames(lang, 'narrow')\n  }\n\n  private handleDaySelect = (day: Date) => {\n    const isInRange = inRange(day, parseISODate(this.min || ''), parseISODate(this.max || ''))\n    const isAllowed = !this.isDateDisabled(day)\n\n    if (isInRange && isAllowed) {\n      this.value = printISODate(day)\n      this.dispatchEvent(new DateSelectEvent('change', day))\n    }\n  }\n\n  private getToday() {\n    return parseISODate(this.today || '') || new Date()\n  }\n\n  private addDays(days: number) {\n    this.setFocusedDay(addDays(this.focusedDay, days))\n  }\n\n  private addMonths(months: number) {\n    this.setMonth(this.focusedDay.getMonth() + months)\n  }\n\n  private addYears(years: number) {\n    this.setYear(this.focusedDay.getFullYear() + years)\n  }\n\n  private startOfWeek() {\n    this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek))\n  }\n\n  private endOfWeek() {\n    this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek))\n  }\n\n  private setMonth(month: number) {\n    const min = setMonth(startOfMonth(this.focusedDay), month)\n    const max = endOfMonth(min)\n    const date = setMonth(this.focusedDay, month)\n\n    this.setFocusedDay(clamp(date, min, max))\n  }\n\n  private setYear(year: number) {\n    const min = setYear(startOfMonth(this.focusedDay), year)\n    const max = endOfMonth(min)\n    const date = setYear(this.focusedDay, year)\n\n    this.setFocusedDay(clamp(date, min, max))\n  }\n\n  private setFocusedDay(day: Date) {\n    this.focusedDay = clamp(day, parseISODate(this.min || ''), parseISODate(this.max || ''))\n    this.dispatchEvent(new DateSelectEvent('nord-focus-date', this.focusedDay))\n  }\n\n  private handleMonthSelect = (e: Event) => {\n    this.setMonth(Number.parseInt((e.target as HTMLSelectElement).value, 10))\n  }\n\n  private handleYearSelect = (e: Event) => {\n    this.setYear(Number.parseInt((e.target as HTMLSelectElement).value, 10))\n  }\n\n  private handleNextMonthClick = (event: MouseEvent) => {\n    event.preventDefault()\n    this.addMonths(1)\n  }\n\n  private handlePreviousMonthClick = (event: MouseEvent) => {\n    event.preventDefault()\n    this.addMonths(-1)\n  }\n\n  private enableActiveFocus = () => {\n    this.activeFocus = true\n  }\n\n  private disableActiveFocus = (e: FocusEvent) => {\n    const table = e.currentTarget as Node\n    const relatedTarget = e.relatedTarget as Node\n\n    if (relatedTarget && !table.contains(relatedTarget)) {\n      this.activeFocus = false\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-calendar': Calendar\n  }\n}\n"],"names":["preventDefault","e","SwipeController","constructor","host","options","this","hadFirstUpdate","initialTouchX","initialTouchY","handleTouchStart","event","pageX","pageY","changedTouches","handleTouchEnd","matchesGesture","onSwipeEnd","distX","distY","details","initialX","initialY","addController","events","EventController","target","hostUpdated","listen","hostDisconnected","isHorizontalSwipe","Math","abs","isDownwardsSwipe","fn","Icon","registerIcon","arrowRightIcon","arrowLeftIcon","arrowDownIcon","isDateDisabled","isDateHighlighted","dialogLabelId","Calendar","LitElement","direction","DirectionController","swipe","addMonths","shortcuts","createKeybindingsHandler","ArrowRight","addDays","isLTR","ArrowLeft","ArrowDown","ArrowUp","Home","startOfWeek","End","endOfWeek","PageUp","PageDown","addYears","localize","LocalizeController","onLangChange","handleLangChange","value","firstDayOfWeek","DaysOfWeek","Monday","expand","activeFocus","focusedDay","Date","handleDaySelect","day","isInRange","inRange","parseISODate","min","max","isAllowed","printISODate","dispatchEvent","DateSelectEvent","handleMonthSelect","setMonth","Number","parseInt","handleYearSelect","setYear","handleNextMonthClick","handlePreviousMonthClick","enableActiveFocus","disableActiveFocus","table","currentTarget","relatedTarget","contains","focus","_a","focusedDayNode","monthSelectNode","render","today","getToday","valueAsDate","focusedMonth","getMonth","focusedYear","getFullYear","minDate","maxDate","minDateStartOfMonth","startOfMonth","undefined","maxDateEndOfMonth","endOfMonth","selectedYear","minYear","maxYear","isServer","html","monthNames","term","map","month","i","monthNamesShort","repeat","range","year","isEqualMonth","mapWithOffset","dayNames","dayName","dayNamesShort","chunk","getViewOfMonth","week","outsideRange","isToday","isEqual","isDisabled","isSelected","isInMonth","isHighlighted","formattedDate","dateFormatShort","format","accessibleLabel","classMap","cond","getDate","handleValueChange","setFocusedDay","handleFocusedDayChange","lang","resolvedLang","Intl","DateTimeFormat","getMonthNames","getDayNames","days","months","years","date","clamp","styles","componentStyle","style","__decorate","query","prototype","property","reflect","type","attribute","Boolean","state","observe","customElement"],"mappings":"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"}

package/lib/Calendar.js

@@ -1,2 +1,2 @@
-import"./tslib.es6-CmLYFWVC.js";export{C as default}from"./Calendar-CL_eqbiT.js";import"lit";import"lit/decorators.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./collection-Dvg2XbxV.js";import"./DirectionController-ChvNGESZ.js";import"./dates-CAAlPKZi.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./number-Dg2vCfGd.js";import"./Component-DSU3Qp0O.js";import"./Icon.js";import"./LocalizeController.js";import"./DateSelectEvent.js";import"./Button.js";import"./VisuallyHidden.js";import"./EventController-BBOmvfLa.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./events-Bv6wNHwJ.js";import"lit/directives/ref.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";
+import"./tslib.es6-CmLYFWVC.js";export{C as default}from"./Calendar-CKgiq2S1.js";import"lit";import"lit/decorators.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./collection-Dvg2XbxV.js";import"./DirectionController-ChvNGESZ.js";import"./dates-CAAlPKZi.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./number-Dg2vCfGd.js";import"./Component-DSU3Qp0O.js";import"./Icon.js";import"./LocalizeController.js";import"./DateSelectEvent.js";import"./Button.js";import"./VisuallyHidden.js";import"./EventController-BBOmvfLa.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./events-Bv6wNHwJ.js";import"lit/directives/ref.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";
 //# sourceMappingURL=Calendar.js.map

package/lib/DatePicker.js

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

package/lib/DatePicker.js.map

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

package/lib/Dropdown.js

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,LitElement as n}from"lit";import{query as r,property as s,customElement as d}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{S as i}from"./SlotController-Z6eG7LSZ.js";import{o as l}from"./observe-D0n0zOfU.js";import{F as p}from"./Popout-vR6LxNS9.js";import{s as c}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./events-Bv6wNHwJ.js";const h=e`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px);--_n-dropdown-max-block-size:var(--n-dropdown-max-block-size, 460px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:var(--_n-dropdown-max-block-size);overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size='s']){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size='l']){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(p(n)){constructor(){super(...arguments),this.headerSlot=new i(this,"header"),this.headerEndSlot=new i(this,"header-end"),this.expand=!1,this.size="m",this.alwaysFloating=!1}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]');null==o||o.setAttribute("aria-haspopup","true")}render(){return t`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${a(this.align)}" position="${a(this.position)}" ?open="${this.open}" ?always-floating="${this.alwaysFloating}" @open="${this.handleOpen}" @close="${this.handleClose}"><div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){this.open=!0}handleClose(){this.open=!1}handleOpenChange(){var o;if(this.open){const e=null!==(o=this.querySelector("[autofocus]"))&&void 0!==o?o:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}}hide(o){return this.popout.hide(o)}show(){return this.popout.show()}};m.styles=[c,h],m.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([r(".n-dropdown-content")],m.prototype,"list",void 0),o([r("nord-popout",!0)],m.prototype,"popout",void 0),o([s({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),o([s({reflect:!0})],m.prototype,"size",void 0),o([s({reflect:!0,type:Boolean,attribute:"always-floating"})],m.prototype,"alwaysFloating",void 0),o([l("open","updated")],m.prototype,"handleOpenChange",null),m=o([d("nord-dropdown")],m);var u=m;export{u as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as o,LitElement as n}from"lit";import{query as s,state as i,property as a,customElement as r}from"lit/decorators.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{o as p}from"./observe-D0n0zOfU.js";import{F as c}from"./Popout-vR6LxNS9.js";import{s as u}from"./Component-DSU3Qp0O.js";import"./Icon.js";import"./DropdownItem.js";import"./EventController-BBOmvfLa.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./events-Bv6wNHwJ.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"lit/directives/ref.js";import"./FocusableMixin-BlQLNPdJ.js";import"./DropdownItem-tmJQrv7d.js";const h=e`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px);--_n-dropdown-max-block-size:var(--n-dropdown-max-block-size, 460px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:var(--_n-dropdown-max-block-size);overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}.n-dropdown-header.is-navigation-header{padding:var(--n-space-s) 0}.n-dropdown-back-item{padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s);inline-size:100%}.n-dropdown-content.is-submenu-active ::slotted(nord-dropdown-group),.n-dropdown-content.is-submenu-active ::slotted(nord-dropdown-item),.n-dropdown-content.is-submenu-active ::slotted(nord-dropdown-submenu:not([mobile-active])){display:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size='s']){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size='l']){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(c(n)){constructor(){super(...arguments),this.headerSlot=new l(this,"header"),this.headerEndSlot=new l(this,"header-end"),this.submenuStack=[],this.isNavigating=!1,this.expand=!1,this.size="m",this.alwaysFloating=!1}get isShowingSubmenu(){return this.submenuStack.length>0}get submenuStackRef(){return this.submenuStack}get deepestSubmenu(){return this.submenuStack[this.submenuStack.length-1]}handleAlwaysFloatingChange(){this.open&&(this.open=!1,this.updateComplete.then((()=>{this.open=!0})))}connectedCallback(){super.connectedCallback();const t=this.querySelector('[slot="toggle"]');null==t||t.setAttribute("aria-haspopup","true")}render(){var t;const e=this.submenuStack[this.submenuStack.length-1];return o`<div class="n-dropdown" @nord-submenu-navigate="${this.handleSubmenuNavigate}" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${d(this.align)}" position="${d(this.position)}" ?open="${this.open}" ?always-floating="${this.alwaysFloating}" @open="${this.handleOpen}" @close="${this.handleClose}">${this.isShowingSubmenu?o`<div class="n-dropdown-header is-navigation-header"><nord-dropdown-item @click="${this.handleBackClick}" class="n-dropdown-back-item"><nord-icon slot="start" name="arrow-left" size="s"></nord-icon>${null!==(t=null==e?void 0:e.label)&&void 0!==t?t:""}</nord-dropdown-item></div>`:o`<div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div>`}<div class="n-dropdown-content ${this.isShowingSubmenu?"is-submenu-active":""}"><slot></slot></div></nord-popout></div>`}handleBlur(t){const e=t.relatedTarget;this.isNavigating||this.isShowingSubmenu||e&&(this.contains(e)||this.popout.hide(!1))}handleOpen(){this.open=!0}handleBackClick(t){t.preventDefault(),t.stopPropagation(),this.isNavigating=!0,this.navigateBack(),this.updateComplete.then((()=>{this.isNavigating=!1;const t=this.submenuStack[this.submenuStack.length-1],e=t?t.querySelector('[slot="trigger"]'):this.querySelector("nord-dropdown-item");null==e||e.focus()}))}handleClose(t){if(this.isNavigating)return;this.clearSubmenuStack();const e=t.target;"NORD-POPOUT"===(null==e?void 0:e.tagName)&&this.contains(e)||(this.open=!1)}handleOpenChange(){var t;if(this.open){const e=null!==(t=this.querySelector("[autofocus]"))&&void 0!==t?t:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}else this.isNavigating||this.clearSubmenuStack()}navigateBack(){if(0===this.submenuStack.length)return;const t=this.submenuStack[this.submenuStack.length-1];t.deactivateMobile(),t.requestUpdate();const e=this.submenuStack[this.submenuStack.length-2];e&&(e.removeAttribute("has-active-child"),e.requestUpdate()),this.submenuStack=this.submenuStack.slice(0,-1)}clearSubmenuStack(){for(const t of this.submenuStack)t.deactivateMobile(),t.removeAttribute("has-active-child");this.submenuStack=[]}handleSubmenuNavigate(t){const e=t;e.stopPropagation();const o=this.submenuStack[this.submenuStack.length-1];o&&(o.setAttribute("has-active-child",""),o.requestUpdate());const n=e.detail.submenu;this.submenuStack=[...this.submenuStack,n],this.updateComplete.then((()=>{n.requestUpdate()}))}hide(t){return this.popout.hide(t)}show(){return this.popout.show()}};m.styles=[u,h],m.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},t([s(".n-dropdown-content")],m.prototype,"list",void 0),t([s("nord-popout",!0)],m.prototype,"popout",void 0),t([i()],m.prototype,"submenuStack",void 0),t([a({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),t([a({reflect:!0})],m.prototype,"size",void 0),t([a({reflect:!0,type:Boolean,attribute:"always-floating"})],m.prototype,"alwaysFloating",void 0),t([p("alwaysFloating")],m.prototype,"handleAlwaysFloatingChange",null),t([p("open","updated")],m.prototype,"handleOpenChange",null),m=t([r("nord-dropdown")],m);var g=m;export{g as default};
 //# sourceMappingURL=Dropdown.js.map

package/lib/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import type Popout from '../popout/Popout.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\n\nimport { FloatingMixin } from '../common/mixins/FloatingComponentMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport style from './Dropdown.css'\nimport '../popout/Popout.js'\n\n/**\n * Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n *\n * @status ready\n * @category action\n *\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n * @slot header - Optional slot that holds a header for the dropdown.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n *\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n *\n * @cssprop [--n-dropdown-size=250px] - Controls the inline size, or width, of the dropdown. Will resize up to 1.5 times to account for larger content.\n * @cssprop [--n-dropdown-max-block-size=460px] - Controls the maximum block size, or height, of the dropdown. Larger content will get a scrollbar.\n */\n@customElement('nord-dropdown')\nexport default class Dropdown extends FloatingMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  /**\n   * we delegate focus, to ensure focus does not move to body if you click\n   * some whitespace or a dropdown-group heading, as this would close the dropdown\n   * @internal\n   */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n  private headerSlot = new SlotController(this, 'header')\n  private headerEndSlot = new SlotController(this, 'header-end')\n\n  @query('.n-dropdown-content') private list!: HTMLElement\n  @query('nord-popout', true) private popout!: Popout\n\n  /**\n   * Controls whether the toggle slot expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * The size of the dropdown. This affects the minimum and maximum inline-size\n   * of the dropdown.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 'm'\n\n  /**\n   * Set to true to always display the dropdown as a floating overlay, even on smaller viewports.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'always-floating' }) alwaysFloating: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const toggle = this.querySelector(`[slot=\"toggle\"]`)\n    toggle?.setAttribute('aria-haspopup', 'true')\n  }\n\n  render() {\n    return html`\n      <div class=\"n-dropdown\" @focusout=${this.handleBlur}>\n        <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n        <nord-popout\n          id=\"popout\"\n          align=${ifDefined(this.align)}\n          position=${ifDefined(this.position)}\n          ?open=${this.open}\n          ?always-floating=${this.alwaysFloating}\n          @open=${this.handleOpen}\n          @close=${this.handleClose}\n        >\n          <div class=\"n-dropdown-header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n            <slot name=${this.headerSlot.slotName}></slot>\n            <slot name=${this.headerEndSlot.slotName}></slot>\n          </div>\n          <div class=\"n-dropdown-content\">\n            <slot></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private handleBlur(e: FocusEvent) {\n    const relatedTarget = e.relatedTarget as Node\n\n    // Safari will set relatedTarget to null when clicking on the trigger button\n    // because it doesn't focus buttons on click.\n    // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n    // so we only run this logic if relatedTarget is set, which sidesteps this issue\n    if (relatedTarget && !this.contains(relatedTarget)) {\n      this.popout.hide(false)\n    }\n  }\n\n  private handleOpen() {\n    this.open = true\n  }\n\n  private handleClose() {\n    this.open = false\n  }\n\n  @observe('open', 'updated')\n  protected handleOpenChange() {\n    if (this.open) {\n      const focusTarget\n        = this.querySelector<HTMLElement>('[autofocus]')\n          ?? this.querySelector<HTMLElement>('nord-dropdown-item, nord-message')\n\n      focusTarget?.focus()\n      this.list.scrollTop = 0\n    }\n  }\n\n  /**\n   * Hide the dropdown programmatically.\n   * This method delegates to the Dropdown's internal Popout component.\n   * See [Popout's hide() method](/components/popout#methods-hide) for more details.\n   * @param moveFocusToButton A boolean option to move the focus to the original button that opens the dropdown.\n   */\n  hide(moveFocusToButton?: boolean): Promise<TransitionEvent | void> {\n    return this.popout.hide(moveFocusToButton)\n  }\n\n  /**\n   * Show the dropdown programmatically.\n   * This method delegates to the Dropdown's internal Popout component.\n   * See [Popout's show() method](/components/popout#methods-hide) for more details.\n   */\n  show(): Promise<TransitionEvent | void> {\n    return this.popout.show()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-dropdown': Dropdown\n  }\n}\n"],"names":["Dropdown","FloatingMixin","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","expand","size","alwaysFloating","connectedCallback","super","toggle","querySelector","setAttribute","render","html","handleBlur","ifDefined","align","position","open","handleOpen","handleClose","isEmpty","slotName","e","relatedTarget","contains","popout","hide","handleOpenChange","focusTarget","_a","focus","list","scrollTop","moveFocusToButton","show","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"smFAiCe,IAAMA,EAAN,cAAuBC,EAAcC,IAArC,WAAAC,uBAULC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAaG,cAAG,IAAID,EAAeF,KAAM,cAQLA,KAAMI,QAAG,EAMxBJ,KAAIK,KAAoB,IAKqBL,KAAcM,gBAAY,CAoFrG,CAlFC,iBAAAC,GACEC,MAAMD,oBAEN,MAAME,EAAST,KAAKU,cAAc,mBAClCD,SAAAA,EAAQE,aAAa,gBAAiB,OACvC,CAED,MAAAC,GACE,OAAOC,CAAI,sCAC2Bb,KAAKc,iGAI7BC,EAAUf,KAAKgB,qBACZD,EAAUf,KAAKiB,qBAClBjB,KAAKkB,2BACMlB,KAAKM,0BAChBN,KAAKmB,uBACJnB,KAAKoB,wDAE2BpB,KAAKC,WAAWoB,SAAWrB,KAAKG,cAAckB,wBACxErB,KAAKC,WAAWqB,gCAChBtB,KAAKG,cAAcmB,gGAQzC,CAEO,UAAAR,CAAWS,GACjB,MAAMC,EAAgBD,EAAEC,cAMpBA,IAAkBxB,KAAKyB,SAASD,IAClCxB,KAAK0B,OAAOC,MAAK,EAEpB,CAEO,UAAAR,GACNnB,KAAKkB,MAAO,CACb,CAEO,WAAAE,GACNpB,KAAKkB,MAAO,CACb,CAGS,gBAAAU,SACR,GAAI5B,KAAKkB,KAAM,CACb,MAAMW,EAC4C,QAA9CC,EAAA9B,KAAKU,cAA2B,sBAAc,IAAAoB,EAAAA,EAC3C9B,KAAKU,cAA2B,oCAEvCmB,SAAAA,EAAaE,QACb/B,KAAKgC,KAAKC,UAAY,CACvB,CACF,CAQD,IAAAN,CAAKO,GACH,OAAOlC,KAAK0B,OAAOC,KAAKO,EACzB,CAOD,IAAAC,GACE,OAAOnC,KAAK0B,OAAOS,MACpB,GAhHMvC,EAAAwC,OAAS,CAACC,EAAgBC,GAO1B1C,EAAA2C,kBAAoB,IAAKzC,EAAWyC,kBAAmBC,gBAAgB,GAKxCC,EAAA,CAArCC,EAAM,wBAAiD9C,EAAA+C,UAAA,YAAA,GACpBF,EAAA,CAAnCC,EAAM,eAAe,IAA6B9C,EAAA+C,UAAA,cAAA,GAKPF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBnD,EAAA+C,UAAA,cAAA,GAM7BF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAmCjD,EAAA+C,UAAA,YAAA,GAKkBF,EAAA,CAAzEG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,QAASC,UAAW,qBAAoDpD,EAAA+C,UAAA,sBAAA,GAuD/FF,EAAA,CADTQ,EAAQ,OAAQ,YAUhBrD,EAAA+C,UAAA,mBAAA,MA9FkB/C,EAAQ6C,EAAA,CAD5BS,EAAc,kBACMtD,SAAAA"}
+{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import type DropdownSubmenu from '../dropdown-submenu/DropdownSubmenu.js'\nimport type Popout from '../popout/Popout.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\n\nimport { FloatingMixin } from '../common/mixins/FloatingComponentMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport style from './Dropdown.css'\nimport '../popout/Popout.js'\nimport '../icon/Icon.js'\nimport '../dropdown-item/DropdownItem.js'\n\n/**\n * Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n *\n * @status ready\n * @category action\n *\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n * @slot header - Optional slot that holds a header for the dropdown.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n *\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n *\n * @cssprop [--n-dropdown-size=250px] - Controls the inline size, or width, of the dropdown. Will resize up to 1.5 times to account for larger content.\n * @cssprop [--n-dropdown-max-block-size=460px] - Controls the maximum block size, or height, of the dropdown. Larger content will get a scrollbar.\n */\n@customElement('nord-dropdown')\nexport default class Dropdown extends FloatingMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  /**\n   * we delegate focus, to ensure focus does not move to body if you click\n   * some whitespace or a dropdown-group heading, as this would close the dropdown\n   * @internal\n   */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n  private headerSlot = new SlotController(this, 'header')\n  private headerEndSlot = new SlotController(this, 'header-end')\n\n  @query('.n-dropdown-content') private list!: HTMLElement\n  @query('nord-popout', true) private popout!: Popout\n\n  @state() private submenuStack: DropdownSubmenu[] = []\n  private isNavigating = false\n\n  private get isShowingSubmenu(): boolean {\n    return this.submenuStack.length > 0\n  }\n\n  /**\n   * @internal\n   */\n  get submenuStackRef(): readonly DropdownSubmenu[] {\n    return this.submenuStack\n  }\n\n  /**\n   * @internal\n   */\n  get deepestSubmenu(): DropdownSubmenu | undefined {\n    return this.submenuStack[this.submenuStack.length - 1]\n  }\n\n  /**\n   * Controls whether the toggle slot expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * The size of the dropdown. This affects the minimum and maximum inline-size\n   * of the dropdown.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 'm'\n\n  /**\n   * Set to true to always display the dropdown as a floating overlay, even on smaller viewports.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'always-floating' })\n  alwaysFloating: boolean = false\n\n  @observe('alwaysFloating')\n  protected handleAlwaysFloatingChange() {\n    if (this.open) {\n      this.open = false\n      this.updateComplete.then(() => {\n        this.open = true\n      })\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const toggle = this.querySelector(`[slot=\"toggle\"]`)\n    toggle?.setAttribute('aria-haspopup', 'true')\n  }\n\n  render() {\n    const activeSubmenu = this.submenuStack[this.submenuStack.length - 1]\n\n    return html`\n      <div class=\"n-dropdown\" @nord-submenu-navigate=${this.handleSubmenuNavigate} @focusout=${this.handleBlur}>\n        <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n        <nord-popout\n          id=\"popout\"\n          align=${ifDefined(this.align)}\n          position=${ifDefined(this.position)}\n          ?open=${this.open}\n          ?always-floating=${this.alwaysFloating}\n          @open=${this.handleOpen}\n          @close=${this.handleClose}\n        >\n          ${\n            this.isShowingSubmenu\n              ? html`\n              <div class=\"n-dropdown-header is-navigation-header\">\n                <nord-dropdown-item @click=${this.handleBackClick} class=\"n-dropdown-back-item\">\n                  <nord-icon slot=\"start\" name=\"arrow-left\" size=\"s\"></nord-icon>\n                  ${activeSubmenu?.label ?? ''}\n                </nord-dropdown-item>\n              </div>\n            `\n              : html`\n              <div class=\"n-dropdown-header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n                <slot name=${this.headerSlot.slotName}></slot>\n                <slot name=${this.headerEndSlot.slotName}></slot>\n              </div>\n            `\n          }\n          <div class=\"n-dropdown-content ${this.isShowingSubmenu ? 'is-submenu-active' : ''}\">\n            <slot></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private handleBlur(e: FocusEvent) {\n    const relatedTarget = e.relatedTarget as HTMLElement\n\n    // Don't close during navigation or if we're still showing a submenu\n    // (the blur event fires after back button is removed from DOM, but we're still in submenu mode)\n    if (this.isNavigating || this.isShowingSubmenu)\n      return\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) {\n      return\n    }\n\n    // Close dropdown if focus moved outside\n    if (!this.contains(relatedTarget)) {\n      this.popout.hide(false)\n    }\n  }\n\n  private handleOpen() {\n    this.open = true\n  }\n\n  private handleBackClick(event: MouseEvent) {\n    event.preventDefault()\n    event.stopPropagation()\n\n    this.isNavigating = true\n    this.navigateBack()\n\n    // Reset navigation flag after updates complete\n    this.updateComplete.then(() => {\n      this.isNavigating = false\n      // Focus the trigger of the submenu we're returning to, or the first item\n      const newTop = this.submenuStack[this.submenuStack.length - 1]\n      const focusTarget = newTop\n        ? newTop.querySelector<HTMLElement>('[slot=\"trigger\"]')\n        : this.querySelector<HTMLElement>('nord-dropdown-item')\n      focusTarget?.focus()\n    })\n  }\n\n  private handleClose(e: Event) {\n    // Don't close during navigation\n    if (this.isNavigating)\n      return\n\n    // Clear submenu stack on close\n    this.clearSubmenuStack()\n\n    // Ignore close events from child popouts (submenus)\n    // The event target will be a nord-popout element that is a child of this dropdown\n    const eventTarget = e.target as HTMLElement\n    const isChildPopout = eventTarget?.tagName === 'NORD-POPOUT' && this.contains(eventTarget)\n\n    if (isChildPopout) {\n      return\n    }\n\n    this.open = false\n  }\n\n  @observe('open', 'updated')\n  protected handleOpenChange() {\n    if (this.open) {\n      const focusTarget\n        = this.querySelector<HTMLElement>('[autofocus]')\n          ?? this.querySelector<HTMLElement>('nord-dropdown-item, nord-message')\n\n      focusTarget?.focus()\n      this.list.scrollTop = 0\n    }\n    else if (!this.isNavigating) {\n      // Clear submenu stack when dropdown closes (but not during navigation)\n      this.clearSubmenuStack()\n    }\n  }\n\n  /**\n   * Navigate back one level in the submenu stack.\n   * @internal\n   */\n  navigateBack() {\n    if (this.submenuStack.length === 0)\n      return\n\n    const topSubmenu = this.submenuStack[this.submenuStack.length - 1]\n    topSubmenu.deactivateMobile()\n    // Trigger re-render so it loses active and is-deepest-active classes\n    topSubmenu.requestUpdate()\n\n    const newTop = this.submenuStack[this.submenuStack.length - 2]\n    if (newTop) {\n      newTop.removeAttribute('has-active-child')\n      // Trigger re-render so it gains is-deepest-active class back\n      newTop.requestUpdate()\n    }\n\n    this.submenuStack = this.submenuStack.slice(0, -1)\n  }\n\n  /**\n   * Clear the entire submenu stack.\n   * @internal\n   */\n  private clearSubmenuStack() {\n    for (const submenu of this.submenuStack) {\n      submenu.deactivateMobile()\n      submenu.removeAttribute('has-active-child')\n    }\n    this.submenuStack = []\n  }\n\n  /**\n   * Handle submenu navigation event.\n   * @internal\n   */\n  private handleSubmenuNavigate(event: Event) {\n    const customEvent = event as CustomEvent<{ submenu: DropdownSubmenu }>\n    customEvent.stopPropagation()\n\n    const previousDeepest = this.submenuStack[this.submenuStack.length - 1]\n    if (previousDeepest) {\n      previousDeepest.setAttribute('has-active-child', '')\n      // Trigger re-render so it loses is-deepest-active class\n      previousDeepest.requestUpdate()\n    }\n\n    const newSubmenu = customEvent.detail.submenu\n    this.submenuStack = [...this.submenuStack, newSubmenu]\n\n    // Trigger re-render of new deepest so it gains is-deepest-active class\n    this.updateComplete.then(() => {\n      newSubmenu.requestUpdate()\n    })\n  }\n\n  /**\n   * Hide the dropdown programmatically.\n   * This method delegates to the Dropdown's internal Popout component.\n   * See [Popout's hide() method](/components/popout#methods-hide) for more details.\n   * @param moveFocusToButton A boolean option to move the focus to the original button that opens the dropdown.\n   */\n  hide(moveFocusToButton?: boolean): Promise<TransitionEvent | void> {\n    return this.popout.hide(moveFocusToButton)\n  }\n\n  /**\n   * Show the dropdown programmatically.\n   * This method delegates to the Dropdown's internal Popout component.\n   * See [Popout's show() method](/components/popout#methods-hide) for more details.\n   */\n  show(): Promise<TransitionEvent | void> {\n    return this.popout.show()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-dropdown': Dropdown\n  }\n}\n"],"names":["Dropdown","FloatingMixin","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","submenuStack","isNavigating","expand","size","alwaysFloating","isShowingSubmenu","length","submenuStackRef","deepestSubmenu","handleAlwaysFloatingChange","open","updateComplete","then","connectedCallback","super","toggle","querySelector","setAttribute","render","activeSubmenu","html","handleSubmenuNavigate","handleBlur","ifDefined","align","position","handleOpen","handleClose","handleBackClick","_a","label","isEmpty","slotName","e","relatedTarget","contains","popout","hide","event","preventDefault","stopPropagation","navigateBack","newTop","focusTarget","focus","clearSubmenuStack","eventTarget","target","tagName","handleOpenChange","list","scrollTop","topSubmenu","deactivateMobile","requestUpdate","removeAttribute","slice","submenu","customEvent","previousDeepest","newSubmenu","detail","moveFocusToButton","show","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}

package/lib/DropdownItem-tmJQrv7d.js

@@ -0,0 +1,2 @@
+import{css as o}from"lit";const n=o`:host{--_n-dropdown-item-background-color:var(--n-dropdown-item-background-color, transparent);--_n-dropdown-item-color:var(--n-dropdown-item-color, var(--n-color-text));display:flex;line-height:var(--n-line-height-tight)}.n-dropdown-item{appearance:none;cursor:pointer;display:flex;flex:1;gap:var(--n-space-s);align-items:center;font-family:inherit;font-size:inherit;font-weight:var(--n-font-weight);text-decoration:none;border:0;color:var(--_n-dropdown-item-color);padding:var(--n-space-s);border-radius:var(--n-border-radius-s);background:var(--_n-dropdown-item-background-color);text-align:start;box-shadow:var(--n-dropdown-item-box-shadow,none);min-inline-size:0}.n-dropdown-item ::slotted(nord-icon){color:var(--n-color-icon)}@media (hover:hover){.n-dropdown-item:hover{--_n-dropdown-item-background-color:var(--n-dropdown-item-background-color, var(--n-color-accent));--_n-dropdown-item-color:var(--n-dropdown-item-color, var(--n-color-text-on-accent))}.n-dropdown-item:hover ::slotted(*){color:var(--n-dropdown-item-color,var(--n-color-text-on-accent))!important}.n-dropdown-item:hover ::slotted(nord-icon){color:currentColor}}:host([aria-expanded=true]) .n-dropdown-item{--_n-dropdown-item-background-color:var(--n-dropdown-item-background-color, var(--n-color-accent));--_n-dropdown-item-color:var(--n-dropdown-item-color, var(--n-color-text-on-accent))}:host([aria-expanded=true]) .n-dropdown-item ::slotted(nord-icon){color:currentColor}.n-dropdown-item:active{opacity:.7}.n-dropdown-item:focus{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-dropdown-item:focus{--n-dropdown-item-box-shadow:none}.n-dropdown-item:focus-visible{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent)}}@media (max-width:35.9375em){.n-dropdown-item{gap:var(--n-space-m);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-dropdown-item ::slotted(nord-icon){block-size:var(--n-size-icon-m);inline-size:var(--n-size-icon-m)}}slot[name=end],slot[name=start]{flex:0 0 auto}slot[name=end]{display:flex;margin-inline-start:auto}.n-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([disabled]){--_n-dropdown-item-background-color:var(--n-dropdown-item-background-color, transparent);--_n-dropdown-item-color:var(--n-dropdown-item-color, var(--n-color-text-weakest));pointer-events:none}:host([disabled]) .n-button::after{display:none}::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;export{n as s};
+//# sourceMappingURL=DropdownItem-tmJQrv7d.js.map

package/lib/DropdownItem-tmJQrv7d.js.map

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

package/lib/DropdownItem.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{html as e,nothing as s,LitElement as o}from"lit";import{property as r,customElement as i}from"lit/decorators.js";import{ref as d}from"lit/directives/ref.js";import{S as n}from"./SlotController-Z6eG7LSZ.js";import{c as l}from"./cond-CI1KbneT.js";import{F as a}from"./FocusableMixin-BlQLNPdJ.js";import{s as m}from"./Component-DSU3Qp0O.js";import{s as p}from"./DropdownItem-Cy6lHtoG.js";import"./EventController-BBOmvfLa.js";let f=class extends(a(o)){constructor(){super(...arguments),this.endSlot=new n(this,"end"),this.target="_self",this.disabled=!1}render(){const t=e`<slot name="start"></slot><div class="n-content"><slot></slot></div><slot name="end" ?hidden="${this.endSlot.isEmpty}"></slot>`;return this.href?this.renderLink(t):this.renderButton(t)}renderLink(t){return e`<a ${d(this.focusableRef)} class="n-dropdown-item" target="${this.target}" href="${l(this.disabled,s,this.href)}" tabindex="${l(this.disabled,"-1")}" aria-disabled="${l(this.disabled,"true")}" role="${l(this.disabled,"link")}">${t}</a>`}renderButton(t){return e`<button ${d(this.focusableRef)} class="n-dropdown-item" ?disabled="${this.disabled}">${t}</button>`}};f.styles=[m,p],t([r({reflect:!0})],f.prototype,"href",void 0),t([r()],f.prototype,"target",void 0),t([r({type:Boolean,reflect:!0})],f.prototype,"disabled",void 0),f=t([i("nord-dropdown-item")],f);var h=f;export{h as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{html as e,nothing as s,LitElement as o}from"lit";import{property as r,customElement as i}from"lit/decorators.js";import{ref as d}from"lit/directives/ref.js";import{S as n}from"./SlotController-Z6eG7LSZ.js";import{c as l}from"./cond-CI1KbneT.js";import{F as a}from"./FocusableMixin-BlQLNPdJ.js";import{s as m}from"./Component-DSU3Qp0O.js";import{s as p}from"./DropdownItem-tmJQrv7d.js";import"./EventController-BBOmvfLa.js";let f=class extends(a(o)){constructor(){super(...arguments),this.endSlot=new n(this,"end"),this.target="_self",this.disabled=!1}render(){const t=e`<slot name="start"></slot><div class="n-content"><slot></slot></div><slot name="end" ?hidden="${this.endSlot.isEmpty}"></slot>`;return this.href?this.renderLink(t):this.renderButton(t)}renderLink(t){return e`<a ${d(this.focusableRef)} class="n-dropdown-item" target="${this.target}" href="${l(this.disabled,s,this.href)}" tabindex="${l(this.disabled,"-1")}" aria-disabled="${l(this.disabled,"true")}" role="${l(this.disabled,"link")}">${t}</a>`}renderButton(t){return e`<button ${d(this.focusableRef)} class="n-dropdown-item" ?disabled="${this.disabled}">${t}</button>`}};f.styles=[m,p],t([r({reflect:!0})],f.prototype,"href",void 0),t([r()],f.prototype,"target",void 0),t([r({type:Boolean,reflect:!0})],f.prototype,"disabled",void 0),f=t([i("nord-dropdown-item")],f);var h=f;export{h as default};
 //# sourceMappingURL=DropdownItem.js.map

package/lib/DropdownSubmenu.js

@@ -0,0 +1,2 @@
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,LitElement as o,html as n}from"lit";import{query as i,state as s,customElement as r}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{E as a}from"./EventController-BBOmvfLa.js";import{s as d}from"./Component-DSU3Qp0O.js";import"./Popout-vR6LxNS9.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./observe-D0n0zOfU.js";import"./events-Bv6wNHwJ.js";const u=t`:host{display:block;--_n-submenu-focus-padding:2px}.n-dropdown-submenu-content{padding-block-start:var(--_n-submenu-content-padding-block,var(--n-space-s));padding-block-end:var(--_n-submenu-content-padding-block,var(--n-space-s));min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:var(--_n-dropdown-max-block-size);overflow-y:auto}:host([mobile-active]){--_n-submenu-content-padding-block:0}@media (max-width:35.9375em){.n-dropdown-submenu-content{max-block-size:70vh;max-inline-size:none}.n-dropdown-submenu-content.is-deepest-active{padding-block-start:var(--_n-submenu-focus-padding);padding-block-end:var(--_n-submenu-focus-padding)}:host([mobile-active]) ::slotted([slot=trigger]){display:none}:host([mobile-active][has-active-child]) ::slotted(nord-dropdown-group),:host([mobile-active][has-active-child]) ::slotted(nord-dropdown-item),:host([mobile-active][has-active-child]) ::slotted(nord-dropdown-submenu:not([mobile-active])){display:none}}::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}`;let p=0,h=class extends o{constructor(){super(...arguments),this.mobileActive=!1,this.popoutId="nord-dropdown-submenu-popout-"+ ++p,this.events=new a(this),this.currentTriggerElement=null,this.popoutOpen=!1,this.mobileMediaQuery=window.matchMedia("(max-width: 35.9375em)"),this.isSmallScreen=this.mobileMediaQuery.matches,this.parentDropdownAlwaysFloating=!1,this.handleTriggerMouseEnter=()=>{var e;this.shouldUseMobileStack||(this.closeOtherSubmenus(),null===(e=this.popout)||void 0===e||e.show())},this.handleTriggerClick=e=>{var t;e.preventDefault(),e.stopImmediatePropagation(),this.shouldUseMobileStack?this.navigateIntoSubmenu():(this.closeOtherSubmenus(),null===(t=this.popout)||void 0===t||t.show())},this.handleTriggerKeydown=e=>{var t;if("ArrowRight"===e.key||"Enter"===e.key){if(e.preventDefault(),this.shouldUseMobileStack)return void this.navigateIntoSubmenu();this.closeOtherSubmenus(),null===(t=this.popout)||void 0===t||t.show(),this.updateComplete.then((()=>{var e;null===(e=this.querySelector("nord-dropdown-item"))||void 0===e||e.focus()}))}},this.handleContentKeydown=e=>{var t,o;if("ArrowLeft"===e.key){if(e.preventDefault(),e.stopPropagation(),this.shouldUseMobileStack&&this.mobileActive)return void(null===(t=this.closest("nord-dropdown"))||void 0===t||t.navigateBack());null===(o=this.popout)||void 0===o||o.hide(!0)}},this.handlePopoutOpen=()=>{this.popoutOpen=!0,this.closeOtherSubmenus()},this.handlePopoutClose=e=>{e.stopPropagation(),this.popoutOpen=!1},this.handleParentDropdownMouseOver=e=>{var t;if(this.shouldUseMobileStack)return;const o=e.target;"NORD-DROPDOWN-ITEM"===o.tagName&&!this.contains(o)&&this.popoutOpen&&(e.stopImmediatePropagation(),null===(t=this.popout)||void 0===t||t.hide())}}get shouldUseMobileStack(){return this.isSmallScreen&&!this.parentDropdownAlwaysFloating}get parentDropdown(){return this.closest("nord-dropdown")}get isInSubmenuStack(){const e=this.parentDropdown;return!!e&&e.submenuStackRef.includes(this)}get isDeepestInStack(){const e=this.parentDropdown;return!!e&&e.deepestSubmenu===this}connectedCallback(){super.connectedCallback();const e=this.querySelector('[slot="trigger"]');null==e||e.setAttribute("aria-haspopup","menu");const t=this.closest("nord-dropdown");t&&(this.parentDropdownAlwaysFloating=t.alwaysFloating,this.events.listen(t,"mouseover",this.handleParentDropdownMouseOver),this.parentObserver=new MutationObserver((e=>{for(const o of e)"always-floating"===o.attributeName&&(this.parentDropdownAlwaysFloating=t.alwaysFloating)})),this.parentObserver.observe(t,{attributes:!0,attributeFilter:["always-floating"]})),this.events.listen(this.mobileMediaQuery,"change",(e=>{this.isSmallScreen=e.matches,this.requestUpdate()}))}disconnectedCallback(){var e;super.disconnectedCallback(),null===(e=this.parentObserver)||void 0===e||e.disconnect()}render(){return this.shouldUseMobileStack&&this.mobileActive?n`<slot name="trigger"></slot><div class="${l({"n-dropdown-submenu-content":!0,active:this.isInSubmenuStack,"is-deepest-active":this.isDeepestInStack})}" @keydown="${this.handleContentKeydown}"><slot></slot></div>`:n`<slot name="trigger" aria-controls="${this.popoutId}" @slotchange="${this.handleTriggerSlotChange}"></slot><nord-popout id="${this.popoutId}" position="inline-end" always-floating @open="${this.handlePopoutOpen}" @close="${this.handlePopoutClose}"><div class="n-dropdown-submenu-content" @keydown="${this.handleContentKeydown}"><slot></slot></div></nord-popout>`}handleTriggerSlotChange(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('slot[name="trigger"]'),o=null==t?void 0:t.assignedElements()[0];if(this.currentTriggerElement&&this.currentTriggerElement!==o&&(this.currentTriggerElement.removeEventListener("mouseenter",this.handleTriggerMouseEnter),this.currentTriggerElement.removeEventListener("click",this.handleTriggerClick),this.currentTriggerElement.removeEventListener("keydown",this.handleTriggerKeydown)),this.currentTriggerElement=null!=o?o:null,!o)return;o.setAttribute("aria-haspopup","menu");const n=!window.matchMedia("(hover: hover)").matches;this.events.listen(o,"mouseenter",this.handleTriggerMouseEnter),n&&!this.isSmallScreen||this.events.listen(o,"click",this.handleTriggerClick),this.events.listen(o,"keydown",this.handleTriggerKeydown)}closeOtherSubmenus(){var e;if(this.shouldUseMobileStack)return;const t=null===(e=this.parentElement)||void 0===e?void 0:e.closest("nord-dropdown, nord-dropdown-submenu");t&&Array.from(t.querySelectorAll(":scope > nord-dropdown-submenu")).forEach((e=>{e!==this&&e.close()}))}deactivateMobile(){var e;this.mobileActive=!1,this.removeAttribute("mobile-active");const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('slot[name="trigger"]'),o=null==t?void 0:t.assignedElements()[0];null==o||o.removeAttribute("aria-expanded")}get label(){var e,t,o,n;const i=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('slot[name="trigger"]');return null!==(n=null===(o=null===(t=null==i?void 0:i.assignedElements()[0])||void 0===t?void 0:t.textContent)||void 0===o?void 0:o.trim())&&void 0!==n?n:""}close(){return this.mobileActive?(this.deactivateMobile(),Promise.resolve()):this.popout?this.popout.hide():Promise.reject(new Error("DropdownSubmenu: popout component not found or not ready"))}navigateIntoSubmenu(){this.mobileActive=!0,this.setAttribute("mobile-active",""),this.dispatchEvent(new CustomEvent("nord-submenu-navigate",{bubbles:!0,detail:{submenu:this}})),this.updateComplete.then((()=>{const e=this.querySelector(".n-dropdown-submenu-content"),t=null==e?void 0:e.querySelector("nord-dropdown-item");null==t||t.focus()}))}};h.styles=[d,u],e([i("nord-popout")],h.prototype,"popout",void 0),e([s()],h.prototype,"mobileActive",void 0),e([s()],h.prototype,"isSmallScreen",void 0),e([s()],h.prototype,"parentDropdownAlwaysFloating",void 0),h=e([r("nord-dropdown-submenu")],h);var c=h;export{c as default};
+//# sourceMappingURL=DropdownSubmenu.js.map