npm - @nordhealth/components - Versions diffs - 4.19.0 → 4.20.0 - Mend

@nordhealth/components 4.19.0 → 4.20.0

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

Files changed (38) hide show

package/custom-elements.json +3182 -2894
package/lib/Calendar-B5X2WKNb.js +2 -0
package/lib/Calendar-B5X2WKNb.js.map +1 -0
package/lib/Calendar.js +1 -1
package/lib/DatePicker.js +1 -1
package/lib/Dropdown.js +1 -1
package/lib/DropdownGroup.js +1 -1
package/lib/DropdownGroup.js.map +1 -1
package/lib/DropdownItem-Cp-z3XA9.js +2 -0
package/lib/DropdownItem-Cp-z3XA9.js.map +1 -0
package/lib/DropdownItem.js +1 -1
package/lib/Header.js +1 -1
package/lib/Header.js.map +1 -1
package/lib/Input.js.map +1 -1
package/lib/Layout.js +1 -1
package/lib/Layout.js.map +1 -1
package/lib/Message.js +1 -1
package/lib/Message.js.map +1 -1
package/lib/NavItem.js +1 -1
package/lib/NavItem.js.map +1 -1
package/lib/Navigation.js +1 -1
package/lib/Navigation.js.map +1 -1
package/lib/Select.js +1 -1
package/lib/Select.js.map +1 -1
package/lib/bundle.js +7 -7
package/lib/bundle.js.map +1 -1
package/lib/index.js +1 -1
package/lib/src/calendar/Calendar.d.ts +15 -0
package/lib/src/header/Header.d.ts +2 -0
package/lib/src/input/Input.d.ts +1 -1
package/lib/src/layout/Layout.d.ts +14 -0
package/lib/src/nav-item/NavItem.d.ts +15 -0
package/lib/src/navigation/Navigation.d.ts +7 -0
package/package.json +3 -3
package/lib/Calendar-20BBxuFj.js +0 -2
package/lib/Calendar-20BBxuFj.js.map +0 -1
package/lib/DropdownItem-tmJQrv7d.js +0 -2
package/lib/DropdownItem-tmJQrv7d.js.map +0 -1

package/lib/Calendar-B5X2WKNb.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{_ as a}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as n,isServer as t,html as i}from"lit";import{query as r,property as s,state as o,customElement as d}from"lit/decorators.js";import{classMap as l}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 v}from"./collection-Dvg2XbxV.js";import{D as p}from"./DirectionController-ChvNGESZ.js";import{E as g}from"./EventController-BBOmvfLa.js";import{D as f,i as b,p as m,a as y,s as w,e as x,b as D,g as z,d as k,f as _,h as $,j as F,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=a=>a.preventDefault();class B{constructor(a,e){this.hadFirstUpdate=!1,this.initialTouchX=0,this.initialTouchY=0,this.handleTouchStart=a=>{const[{pageX:e,pageY:n}]=a.changedTouches;this.initialTouchX=e,this.initialTouchY=n},this.handleTouchEnd=a=>{const[{pageX:e,pageY:n}]=a.changedTouches,{matchesGesture:t,onSwipeEnd:i}=this.options,r=e-this.initialTouchX,s=n-this.initialTouchY,o={initialX:this.initialTouchX,initialY:this.initialTouchY,pageX:e,pageY:n,distX:r,distY:s};t(o)&&(a.preventDefault(),i(o))},a.addController(this),this.events=new g(a),this.options={target:()=>a,...e}}hostUpdated(){if(!this.hadFirstUpdate){this.hadFirstUpdate=!0;const a=this.options.target();this.events.listen(a,"touchstart",this.handleTouchStart),this.events.listen(a,"touchmove",P),this.events.listen(a,"touchend",this.handleTouchEnd)}}hostDisconnected(){this.hadFirstUpdate=!1}}function H({distX:a,distY:e}){return Math.abs(a)>=70&&Math.abs(e)<=70}function R({distX:a,distY:e}){return Math.abs(e)>=70&&Math.abs(a)<=70&&e>0}const V=e`: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-block-start:var(--n-calendar-padding-block, var(--n-space-m));--_n-calendar-padding-block-end:var(--n-calendar-padding-block, var(--n-space-m));--_n-calendar-padding-inline:var(--n-calendar-padding-inline, var(--n-space-m));--_n-calendar-day-size:var(--n-calendar-day-size, var(--n-space-xl));--_n-calendar-day-font-size:var(--n-calendar-day-font-size, var(--n-font-size-m));--_n-calendar-select-label-font-size:var(--n-calendar-select-label-font-size, var(--n-font-size-xl));--_n-calendar-nav-padding-inline:var(--n-calendar-nav-padding-inline, 11px);--_n-calendar-nav-gap:var(--n-calendar-nav-gap, var(--n-space-xs));--_n-calendar-header-margin-block-end:var(--n-calendar-header-margin-block-end, var(--n-space-m));--_n-calendar-header-padding-block-end:var(--n-calendar-header-padding-block-end, 0);--_n-calendar-header-gap:var(--n-calendar-header-gap, var(--n-space-s));--_n-calendar-inline-size:var(--n-calendar-inline-size, max-content);font-feature-settings:var(--n-font-features-reduced)}:host([size='s']){--_n-calendar-day-size:var(--n-calendar-day-size, calc(var(--n-space-l) + var(--n-space-xs)));--_n-calendar-day-font-size:var(--n-calendar-day-font-size, var(--n-font-size-s));--_n-calendar-select-label-font-size:var(--n-calendar-select-label-font-size, var(--n-font-size-l));--_n-calendar-nav-padding-inline:var(--n-calendar-nav-padding-inline, var(--n-space-s));--_n-calendar-header-margin-block-end:var(--n-calendar-header-margin-block-end, var(--n-space-s));--_n-calendar-header-padding-block-end:var(--n-calendar-header-padding-block-end, var(--n-space-xs))}.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-block-start:var(--_n-calendar-padding-block-start);padding-block-end:var(--_n-calendar-padding-block-end);padding-inline-start:var(--_n-calendar-padding-inline);padding-inline-end:var(--_n-calendar-padding-inline)}:host([expand]){--_n-calendar-inline-size:var(--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-calendar-day-font-size);font-weight:var(--n-font-weight);font-variant-numeric:tabular-nums;block-size:var(--_n-calendar-day-size);inline-size:var(--_n-calendar-day-size);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:center;display:flex;justify-content:space-between;column-gap:var(--_n-calendar-header-gap);margin-block-end:var(--_n-calendar-header-margin-block-end);padding-block-end:var(--_n-calendar-header-padding-block-end);inline-size:100%}.n-calendar-nav{display:flex;column-gap:var(--_n-calendar-nav-gap);white-space:nowrap}.n-calendar-nav nord-button{--_n-button-padding-inline:var(--_n-calendar-nav-padding-inline)}.n-calendar-select{display:inline-flex;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-calendar-select-label-font-size);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 q(a){return e=>{e.preventDefault(),a(e)}}X.registerIcon(I),X.registerIcon(U),X.registerIcon(A);const G=()=>!1,J=()=>!1,K="dialog-header";let Q=class extends n{constructor(){super(...arguments),this.direction=new p(this),this.swipe=new B(this,{matchesGesture:H,onSwipeEnd:({distX:a})=>this.addMonths(a<0?1:-1)}),this.shortcuts=h({ArrowRight:q((()=>this.addDays(this.direction.isLTR?1:-1))),ArrowLeft:q((()=>this.addDays(this.direction.isLTR?-1:1))),ArrowDown:q((()=>this.addDays(7))),ArrowUp:q((()=>this.addDays(-7))),Home:q((()=>this.startOfWeek())),End:q((()=>this.endOfWeek())),PageUp:q((()=>this.addMonths(-1))),PageDown:q((()=>this.addMonths(1))),"Shift+PageUp":q((()=>this.addYears(-1))),"Shift+PageDown":q((()=>this.addYears(1)))}),this.localize=new E(this,{onLangChange:()=>this.handleLangChange()}),this.value="",this.firstDayOfWeek=f.Monday,this.expand=!1,this.size="m",this.isDateDisabled=G,this.isDateHighlighted=J,this.activeFocus=!1,this.focusedDay=new Date,this.handleDaySelect=a=>{const e=b(a,m(this.min\|\|""),m(this.max\|\|"")),n=!this.isDateDisabled(a);e&&n&&(this.value=y(a),this.dispatchEvent(new W("change",a)))},this.handleMonthSelect=a=>{this.setMonth(Number.parseInt(a.target.value,10))},this.handleYearSelect=a=>{this.setYear(Number.parseInt(a.target.value,10))},this.handleNextMonthClick=a=>{a.preventDefault(),this.addMonths(1)},this.handlePreviousMonthClick=a=>{a.preventDefault(),this.addMonths(-1)},this.enableActiveFocus=()=>{this.activeFocus=!0},this.disableActiveFocus=a=>{const e=a.currentTarget,n=a.relatedTarget;n&&!e.contains(n)&&(this.activeFocus=!1)}}focus(a){var e;const n=null!==(e=null==a?void 0:a.target)&&void 0!==e?e:"day";"day"===n?this.focusedDayNode.focus():"month"===n&&this.monthSelectNode.focus()}render(){const a=this.getToday(),e=m(this.value),n=this.focusedDay.getMonth(),r=this.focusedDay.getFullYear(),s=m(this.min\|\|""),o=m(this.max\|\|""),d=s?w(s):void 0,h=o?x(o):void 0,p=a.getFullYear(),g=s?s.getFullYear():p-100,f=o?o.getFullYear():p+10;return t&&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[n]}, ${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(((a,e)=>i`<option value="${e}" ?selected="${e===n}" ?disabled="${!b(new Date(r,e,1),d,h)}">${a}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.monthNamesShort[n]}</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),(a=>a),(a=>i`<option ?selected="${a===r}">${a}</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" size="${this.size}" square @click="${this.handlePreviousMonthClick}" ?disabled="${D(s,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"===this.size?"xs":"s"}"></nord-icon></nord-button><nord-button class="n-calendar-next" size="${this.size}" square @click="${this.handleNextMonthClick}" ?disabled="${D(o,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"===this.size?"xs":"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,((a,e)=>i`<th class="n-calendar-table-header" scope="col"><span aria-hidden="true">${this.dayNamesShort[e]}</span><nord-visually-hidden>${a}</nord-visually-hidden></th>`))}</tr></thead><tbody>${v(z(this.focusedDay,this.firstDayOfWeek),7).map((n=>i`<tr class="n-calendar-row">${n.map((n=>{const t=!b(n,s,o),r=k(n,a),d=this.isDateDisabled(n),c=k(n,e),h=D(n,this.focusedDay),u=this.isDateHighlighted(n),v=this.dateFormatShort.format(n),p=u&&"string"==typeof u?`${v}, ${u}`:v;return i`<td class="n-calendar-cell"><button type="button" tabindex="${k(n,this.focusedDay)?0:-1}" class="${l({"n-calendar-day":!0,"is-outside":t,"is-month":h,"is-highlighted":u})}" @click="${()=>this.handleDaySelect(n)}" @keydown="${this.shortcuts}" ?disabled="${t}" aria-disabled="${N(d,"true")}" aria-pressed="${c?"true":"false"}" aria-current="${N(r,"date")}" aria-label="${p}"><span aria-hidden="true">${n.getDate()}</span></button></td>`}))}</tr>`))}</tbody></table></div>`}handleValueChange(){this.setFocusedDay(m(this.value)\|\|this.getToday())}handleFocusedDayChange(){this.activeFocus&&this.focusedDayNode.focus()}handleLangChange(){const a=this.localize.resolvedLang;this.dateFormatShort=new Intl.DateTimeFormat(a,{day:"numeric",month:"long"}),this.monthNames=_(a,"long"),this.monthNamesShort=_(a,"short"),this.dayNames=$(a,"long"),this.dayNamesShort=$(a,"narrow")}getToday(){return m(this.today\|\|"")\|\|new Date}addDays(a){this.setFocusedDay(F(this.focusedDay,a))}addMonths(a){this.setMonth(this.focusedDay.getMonth()+a)}addYears(a){this.setYear(this.focusedDay.getFullYear()+a)}startOfWeek(){this.setFocusedDay(Y(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(M(this.focusedDay,this.firstDayOfWeek))}setMonth(a){const e=S(w(this.focusedDay),a),n=x(e),t=S(this.focusedDay,a);this.setFocusedDay(T(t,e,n))}setYear(a){const e=j(w(this.focusedDay),a),n=x(e),t=j(this.focusedDay,a);this.setFocusedDay(T(t,e,n))}setFocusedDay(a){this.focusedDay=T(a,m(this.min\|\|""),m(this.max\|\|"")),this.dispatchEvent(new W("nord-focus-date",this.focusedDay))}};Q.styles=[O,V],a([r(".n-calendar-select-month",!0)],Q.prototype,"monthSelectNode",void 0),a([r('button[tabindex="0"]')],Q.prototype,"focusedDayNode",void 0),a([s()],Q.prototype,"value",void 0),a([s({reflect:!0,type:Number,attribute:"first-day-of-week"})],Q.prototype,"firstDayOfWeek",void 0),a([s({reflect:!0})],Q.prototype,"min",void 0),a([s({reflect:!0})],Q.prototype,"max",void 0),a([s({reflect:!0})],Q.prototype,"today",void 0),a([s({reflect:!0,type:Boolean})],Q.prototype,"expand",void 0),a([s({reflect:!0})],Q.prototype,"size",void 0),a([s({attribute:!1})],Q.prototype,"isDateDisabled",void 0),a([s({attribute:!1})],Q.prototype,"isDateHighlighted",void 0),a([o()],Q.prototype,"activeFocus",void 0),a([o()],Q.prototype,"focusedDay",void 0),a([C("value")],Q.prototype,"handleValueChange",null),a([C("focusedDay","updated")],Q.prototype,"handleFocusedDayChange",null),Q=a([d("nord-calendar")],Q);var Z=Q;export{Z as C,B as S,R as i};
2	+ //# sourceMappingURL=Calendar-B5X2WKNb.js.map

package/lib/Calendar-B5X2WKNb.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Calendar-B5X2WKNb.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 * @cssprop [--n-calendar-padding-block=var(--n-space-m)] - Controls the block padding of the calendar, using [space tokens](/tokens/#space).\n * @cssprop [--n-calendar-padding-inline=var(--n-space-m)] - Controls the inline padding of the calendar, using [space tokens](/tokens/#space).\n * @cssprop [--n-calendar-day-size=var(--n-space-xl)] - Controls the block and inline size of each day cell, using [space tokens](/tokens/#space).\n * @cssprop [--n-calendar-day-font-size=var(--n-font-size-m)] - Controls the font size of each day cell, using [font size tokens](/tokens/#font-size).\n * @cssprop [--n-calendar-select-label-font-size=var(--n-font-size-xl)] - Controls the font size of the month and year select labels, using [font size tokens](/tokens/#font-size).\n * @cssprop [--n-calendar-nav-padding-inline=11px] - Controls the inline padding of the previous and next month buttons.\n * @cssprop [--n-calendar-nav-gap=var(--n-space-xs)] - Controls the gap between the previous and next month buttons, using [space tokens](/tokens/#space).\n * @cssprop [--n-calendar-header-margin-block-end=var(--n-space-m)] - Controls the block-end margin of the calendar header, using [space tokens](/tokens/#space).\n * @cssprop [--n-calendar-header-padding-block-end=0] - Controls the block-end padding of the calendar header, using [space tokens](/tokens/#space).\n * @cssprop [--n-calendar-header-gap=var(--n-space-s)] - Controls the gap between the month/year selects and the navigation buttons, using [space tokens](/tokens/#space).\n * @cssprop [--n-calendar-inline-size=max-content] - Controls the inline size of the calendar. Defaults to `100%` when the `expand` attribute is set.\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 the size of the calendar.\n */\n @property({ reflect: true }) size: 's' | 'm' = 'm'\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 currentYear = today.getFullYear()\n const minYear = minDate ? minDate.getFullYear() : currentYear - 100\n const maxYear = maxDate ? maxDate.getFullYear() : currentYear + 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 size=${this.size}\n square\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=${this.size === 's' ? 'xs' : 's'}></nord-icon>\n </nord-button>\n\n <nord-button\n class=\"n-calendar-next\"\n size=${this.size}\n square\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=${this.size === 's' ? 'xs' : '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","size","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","currentYear","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 CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./tslib.es6-CmLYFWVC.js";export{C as default}from"./Calendar-20BBxuFj.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-B5X2WKNb.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 CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-close-small-CnpAFMO3.js";import{css as i,html as o,nothing as a,LitElement as r}from"lit";import{query as s,property as n,customElement as l}from"lit/decorators.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{ref as p}from"lit/directives/ref.js";import{S as h,i as c}from"./Calendar-20BBxuFj.js";import{D as m,c as u,p as v,a as f}from"./dates-CAAlPKZi.js";import{c as b}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as j}from"./FocusableMixin-BlQLNPdJ.js";import{F as y}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as $}from"./InputMixin-LetXsCyv.js";import{R as D,s as x}from"./TextField-B955GOhe.js";import{S as k}from"./SizeMixin-CU9cLbLC.js";import{s as w}from"./Component-DSU3Qp0O.js";import{s as z}from"./FormField-BFaVzUjk.js";import C from"./Icon.js";import{LocalizeController as F}from"./LocalizeController.js";import{isoAdapter as 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 B=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',tags:"nordicon interface calendar date time day week month year",title:"interface-calendar"});const S=i`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;C.registerIcon(B),C.registerIcon(e);const E=()=>!1,I=()=>!1;let L=class extends(k(y(D($(j(r)))))){constructor(){super(...arguments),this.swipe=new h(this,{target:()=>this.popout,matchesGesture:c,onSwipeEnd:()=>this.hide()}),this.localize=new F(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=m.Monday,this.dateAdapter=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}" ?hint-below="${this.hintBelow}" ?hide-label="${this.hideLabel}" ?hide-required="${this.hideRequired}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${p(this.focusableRef)} aria-invalid="${b(this.error||this.internalError,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?a:o`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?a:o`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:a}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${d(this.min)}" max="${d(this.max)}" today="${d(this.today)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?f(t):"";const{valueAsDate:e}=this,i=e?this.dateAdapter.format(e):"";this.rawValue=i,this.dispatchEvent(new g("change"))}validateDateBounds(t){if(!t)return;const e=v(this.min||""),i=v(this.max||"");return e&&t<e?this.localize.term("dateOutOfMinBound",this.min):i&&t>i?this.localize.term("dateOutOfMaxBound",this.max):void 0}hide(t){this.popout.hide(t)}show(){this.popout.show()}};L.styles=[w,z,x,S],t([s(".n-date-picker-toggle",!0)],L.prototype,"toggleButton",void 0),t([s(".n-date-picker-close-button",!0)],L.prototype,"closeButton",void 0),t([s("nord-calendar",!0)],L.prototype,"calendar",void 0),t([s('[role="dialog"]',!0)],L.prototype,"popout",void 0),t([n()],L.prototype,"value",void 0),t([n({attribute:!1})],L.prototype,"internalError",void 0),t([n({attribute:!1})],L.prototype,"rawValue",void 0),t([n({type:Boolean,reflect:!0})],L.prototype,"open",void 0),t([n({reflect:!0})],L.prototype,"min",void 0),t([n({reflect:!0})],L.prototype,"max",void 0),t([n({reflect:!0})],L.prototype,"today",void 0),t([n({reflect:!0,attribute:"first-day-of-week",type:Number})],L.prototype,"firstDayOfWeek",void 0),t([n({attribute:!1})],L.prototype,"dateAdapter",void 0),t([n({attribute:!1})],L.prototype,"isDateDisabled",void 0),t([n({attribute:!1})],L.prototype,"isDateHighlighted",void 0),t([n({reflect:!0,type:Boolean})],L.prototype,"expand",void 0),L=t([l("nord-date-picker")],L);var M=L;export{M as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-close-small-CnpAFMO3.js";import{css as i,html as o,nothing as a,LitElement as r}from"lit";import{query as s,property as n,customElement as l}from"lit/decorators.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{ref as p}from"lit/directives/ref.js";import{S as h,i as c}from"./Calendar-B5X2WKNb.js";import{D as m,c as u,p as v,a as f}from"./dates-CAAlPKZi.js";import{c as b}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as j}from"./FocusableMixin-BlQLNPdJ.js";import{F as y}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as $}from"./InputMixin-LetXsCyv.js";import{R as D,s as x}from"./TextField-B955GOhe.js";import{S as k}from"./SizeMixin-CU9cLbLC.js";import{s as w}from"./Component-DSU3Qp0O.js";import{s as z}from"./FormField-BFaVzUjk.js";import C from"./Icon.js";import{LocalizeController as F}from"./LocalizeController.js";import{isoAdapter as 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 B=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',tags:"nordicon interface calendar date time day week month year",title:"interface-calendar"});const S=i`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;C.registerIcon(B),C.registerIcon(e);const E=()=>!1,I=()=>!1;let L=class extends(k(y(D($(j(r)))))){constructor(){super(...arguments),this.swipe=new h(this,{target:()=>this.popout,matchesGesture:c,onSwipeEnd:()=>this.hide()}),this.localize=new F(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=m.Monday,this.dateAdapter=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}" ?hint-below="${this.hintBelow}" ?hide-label="${this.hideLabel}" ?hide-required="${this.hideRequired}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${p(this.focusableRef)} aria-invalid="${b(this.error||this.internalError,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?a:o`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?a:o`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:a}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${d(this.min)}" max="${d(this.max)}" today="${d(this.today)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?f(t):"";const{valueAsDate:e}=this,i=e?this.dateAdapter.format(e):"";this.rawValue=i,this.dispatchEvent(new g("change"))}validateDateBounds(t){if(!t)return;const e=v(this.min||""),i=v(this.max||"");return e&&t<e?this.localize.term("dateOutOfMinBound",this.min):i&&t>i?this.localize.term("dateOutOfMaxBound",this.max):void 0}hide(t){this.popout.hide(t)}show(){this.popout.show()}};L.styles=[w,z,x,S],t([s(".n-date-picker-toggle",!0)],L.prototype,"toggleButton",void 0),t([s(".n-date-picker-close-button",!0)],L.prototype,"closeButton",void 0),t([s("nord-calendar",!0)],L.prototype,"calendar",void 0),t([s('[role="dialog"]',!0)],L.prototype,"popout",void 0),t([n()],L.prototype,"value",void 0),t([n({attribute:!1})],L.prototype,"internalError",void 0),t([n({attribute:!1})],L.prototype,"rawValue",void 0),t([n({type:Boolean,reflect:!0})],L.prototype,"open",void 0),t([n({reflect:!0})],L.prototype,"min",void 0),t([n({reflect:!0})],L.prototype,"max",void 0),t([n({reflect:!0})],L.prototype,"today",void 0),t([n({reflect:!0,attribute:"first-day-of-week",type:Number})],L.prototype,"firstDayOfWeek",void 0),t([n({attribute:!1})],L.prototype,"dateAdapter",void 0),t([n({attribute:!1})],L.prototype,"isDateDisabled",void 0),t([n({attribute:!1})],L.prototype,"isDateHighlighted",void 0),t([n({reflect:!0,type:Boolean})],L.prototype,"expand",void 0),L=t([l("nord-date-picker")],L);var M=L;export{M as default};
 //# sourceMappingURL=DatePicker.js.map

package/lib/Dropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-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};
+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-Cp-z3XA9.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/DropdownGroup.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as n,html as r,nothing as a}from"lit";import{property as d,customElement as s}from"lit/decorators.js";import{s as i}from"./Component-DSU3Qp0O.js";const t=o`.n-dropdown-group-heading{font-size:var(--n-font-size-xs);font-weight:var(--n-font-weight-heading);color:var(--n-color-text-weaker);padding:var(--n-space-xs) var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width:35.9375em){.n-dropdown-group-heading{padding:calc(var(--n-space-s)/ 1.5) var(--n-space-m)}}.n-dropdown-group-content{display:flex;flex-direction:column}::slotted(nord-message){inline-size:calc(100% + calc(var(--n-space-s) * 2));margin-inline-start:calc(var(--n-space-s) * -1)}::slotted(nord-message:last-of-type){padding-block-end:0;border-block-end:0}`;let p=class extends n{render(){return r`<div class="n-dropdown-group">${this.heading?r`<p id="heading" aria-hidden="true" class="n-dropdown-group-heading">${this.heading}</p>`:a}<div class="n-dropdown-group-content" role="group" aria-labelledby="${this.heading?"heading":a}"><slot></slot></div></div>`}};p.styles=[i,t],e([d({reflect:!0})],p.prototype,"heading",void 0),p=e([s("nord-dropdown-group")],p);var l=p;export{l as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as o,html as a,nothing as r}from"lit";import{property as s,customElement as d}from"lit/decorators.js";import{s as i}from"./Component-DSU3Qp0O.js";const t=n`.n-dropdown-group-heading{font-size:var(--n-font-size-xs);font-weight:var(--n-font-weight-heading);color:var(--n-color-text-weaker);padding:var(--n-space-xs) var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width:35.9375em){.n-dropdown-group-heading{padding:calc(var(--n-space-s)/ 1.5) var(--n-space-m)}}.n-dropdown-group-content{display:flex;flex-direction:column}::slotted(nord-message){inline-size:calc(100% + calc(var(--n-space-s) * 2));margin-inline-start:calc(var(--n-space-s) * -1)}::slotted(nord-message:last-of-type){padding-block-end:0;border-block-end:0}::slotted(nord-dropdown-submenu){inline-size:calc(100% + calc(var(--n-space-s) * 2));margin-inline-start:calc(var(--n-space-s) * -1)}`;let l=class extends o{render(){return a`<div class="n-dropdown-group">${this.heading?a`<p id="heading" aria-hidden="true" class="n-dropdown-group-heading">${this.heading}</p>`:r}<div class="n-dropdown-group-content" role="group" aria-labelledby="${this.heading?"heading":r}"><slot></slot></div></div>`}};l.styles=[i,t],e([s({reflect:!0})],l.prototype,"heading",void 0),l=e([d("nord-dropdown-group")],l);var p=l;export{p as default};
 //# sourceMappingURL=DropdownGroup.js.map

package/lib/DropdownGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownGroup.js","sources":["../src/dropdown-group/DropdownGroup.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './DropdownGroup.css'\n\n/*\n Dropdown group includes all the actions or items in a single dropdown\n * group and is used for grouping items into related categories.\n \n @status ready\n * @category action\n * @slot - The dropdown group content.\n /\n@customElement('nord-dropdown-group')\nexport default class DropdownGroup extends LitElement {\n static styles = [componentStyle, style]\n\n /\n Heading and accessible label for the dropdown group.\n */\n @property({ reflect: true }) heading?: string\n\n render() {\n return html`\n <div class=\"n-dropdown-group\">\n ${this.heading\n ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-dropdown-group-heading\">${this.heading}</p>`\n : nothing}\n <div class=\"n-dropdown-group-content\" role=\"group\" aria-labelledby=${this.heading ? 'heading' : nothing}>\n <slot></slot>\n </div>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-dropdown-group': DropdownGroup\n }\n}\n"],"names":["DropdownGroup","LitElement","render","html","this","heading","nothing","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"~~g0BAee~~,IAAMA,EAAN,cAA4BC,EAQzC,MAAAC,GACE,OAAOC,CAAI,iCAELC,KAAKC,QACHF,CAAI,uEAAuEC,KAAKC,cAChFC,wEACiEF,KAAKC,QAAU,UAAYC,8BAKrG,GAlBMN,EAAAO,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAwBZ,EAAAa,UAAA,eAAA,GAN1Bb,EAAaU,EAAA,CADjCI,EAAc,wBACMd,SAAAA"}
1	+ {"version":3,"file":"DropdownGroup.js","sources":["../src/dropdown-group/DropdownGroup.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './DropdownGroup.css'\n\n/*\n Dropdown group includes all the actions or items in a single dropdown\n * group and is used for grouping items into related categories.\n \n @status ready\n * @category action\n * @slot - The dropdown group content.\n /\n@customElement('nord-dropdown-group')\nexport default class DropdownGroup extends LitElement {\n static styles = [componentStyle, style]\n\n /\n Heading and accessible label for the dropdown group.\n */\n @property({ reflect: true }) heading?: string\n\n render() {\n return html`\n <div class=\"n-dropdown-group\">\n ${this.heading\n ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-dropdown-group-heading\">${this.heading}</p>`\n : nothing}\n <div class=\"n-dropdown-group-content\" role=\"group\" aria-labelledby=${this.heading ? 'heading' : nothing}>\n <slot></slot>\n </div>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-dropdown-group': DropdownGroup\n }\n}\n"],"names":["DropdownGroup","LitElement","render","html","this","heading","nothing","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"q8BAee,IAAMA,EAAN,cAA4BC,EAQzC,MAAAC,GACE,OAAOC,CAAI,iCAELC,KAAKC,QACHF,CAAI,uEAAuEC,KAAKC,cAChFC,wEACiEF,KAAKC,QAAU,UAAYC,8BAKrG,GAlBMN,EAAAO,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAwBZ,EAAAa,UAAA,eAAA,GAN1Bb,EAAaU,EAAA,CADjCI,EAAc,wBACMd,SAAAA"}

package/lib/DropdownItem-Cp-z3XA9.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ 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-active));--_n-dropdown-item-color:var(--n-dropdown-item-color, var(--n-color-text))}.n-dropdown-item:hover ::slotted(*){color:var(--n-dropdown-item-color,var(--n-color-text))!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-active));--_n-dropdown-item-color:var(--n-dropdown-item-color, var(--n-color-text))}: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};
2	+ //# sourceMappingURL=DropdownItem-Cp-z3XA9.js.map

package/lib/DropdownItem-Cp-z3XA9.js.map ADDED Viewed

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

package/lib/DropdownItem.js CHANGED Viewed

@@ -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-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};
+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-Cp-z3XA9.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/Header.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as a,html as o}from"lit";import{property as n,customElement as d}from"lit/decorators.js";import{S as t}from"./SlotController-Z6eG7LSZ.js";import{s}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const i=r`:host{--_n-header-box-shadow:var(--n-box-shadow-header);--_n-header-block-size:var(--n-header-block-size, var(--n-space-xxl));--_n-header-padding-block:var(--n-space-m);--_n-header-padding-inline:var(--n-space-l);color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-end{display:flex;flex-flow:row;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--_n-header-padding-block) var(--_n-header-padding-inline);padding-inline-start:calc(var(--_n-header-padding-inline) + var(--_n-header-gutter,0px));background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);block-size:var(--_n-header-block-size)}.n-header-end{margin-inline-start:auto;gap:var(--n-space-s)}:host([size='s']){--_n-header-block-size:var(--n-size-top-bar);--_n-header-padding-block:var(--n-space-s)}`;let l=class extends a{constructor(){super(...arguments),this.endSlot=new t(this,"end"),this.size="m"}render(){return o`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};l.styles=[s,i],e([n({reflect:!0})],l.prototype,"size",void 0),l=e([d("nord-header")],l);var c=l;export{c as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as a,html as o}from"lit";import{property as n,customElement as d}from"lit/decorators.js";import{S as t}from"./SlotController-Z6eG7LSZ.js";import{s}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const l=r`:host{--_n-header-box-shadow:var(--n-box-shadow-header);--_n-header-block-size:var(--n-header-block-size, var(--n-space-xxl));--_n-header-padding-block:var(--n-space-m);--_n-header-padding-inline:var(--n-space-l);--_n-header-background-color:var(--n-header-background-color, var(--n-color-surface));color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-end{display:flex;flex-flow:row;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--_n-header-padding-block) var(--_n-header-padding-inline);padding-inline-start:calc(var(--_n-header-padding-inline) + var(--_n-header-gutter,0px));background-color:var(--_n-header-background-color);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);block-size:var(--_n-header-block-size)}.n-header-end{margin-inline-start:auto;gap:var(--n-space-s)}:host([size='s']){--_n-header-block-size:var(--n-size-top-bar);--_n-header-padding-block:var(--n-space-s)}`;let i=class extends a{constructor(){super(...arguments),this.endSlot=new t(this,"end"),this.size="m"}render(){return o`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};i.styles=[s,l],e([n({reflect:!0})],i.prototype,"size",void 0),i=e([d("nord-header")],i);var c=i;export{c as default};
 //# sourceMappingURL=Header.js.map

package/lib/Header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Header.css'\n\n/*\n The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n \n @status ready\n * @category structure\n * @slot - The header content.\n * @slot end - Optional slot for buttons, toggles, etc.\n /\n@customElement('nord-header')\nexport default class Header extends LitElement {\n static styles = [componentStyle, style]\n\n private endSlot = new SlotController(this, 'end')\n\n /\n Controls the size of the header component.\n */\n @property({ reflect: true }) size: 'm' \| 's' = 'm'\n\n render() {\n return html`\n <header class=\"n-header\">\n <slot></slot>\n <div class=\"n-header-end\" ?hidden=${this.endSlot.isEmpty}>\n <slot name=\"end\"></slot>\n </div>\n </header>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-header': Header\n }\n}\n"],"names":["Header","LitElement","constructor","this","endSlot","SlotController","size","render","html","isEmpty","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"~~yvCAgBe~~,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAGLC,KAAOC,QAAG,IAAIC,EAAeF,KAAM,OAKdA,KAAIG,KAAc,GAYhD,CAVC,MAAAC,GACE,OAAOC,CAAI,4EAG6BL,KAAKC,QAAQK,kDAKtD,GAlBMT,EAAAU,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6Bf,EAAAgB,UAAA,YAAA,GAR/BhB,EAAMa,EAAA,CAD1BI,EAAc,gBACMjB,SAAAA"}
1	+ {"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Header.css'\n\n/*\n The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n \n @status ready\n * @category structure\n * @slot - The header content.\n * @slot end - Optional slot for buttons, toggles, etc.\n \n @cssprop [--n-header-background-color=var(--n-color-surface)] - Background color of the header.\n /\n@customElement('nord-header')\nexport default class Header extends LitElement {\n static styles = [componentStyle, style]\n\n private endSlot = new SlotController(this, 'end')\n\n /\n Controls the size of the header component.\n */\n @property({ reflect: true }) size: 'm' \| 's' = 'm'\n\n render() {\n return html`\n <header class=\"n-header\">\n <slot></slot>\n <div class=\"n-header-end\" ?hidden=${this.endSlot.isEmpty}>\n <slot name=\"end\"></slot>\n </div>\n </header>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-header': Header\n }\n}\n"],"names":["Header","LitElement","constructor","this","endSlot","SlotController","size","render","html","isEmpty","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"01CAkBe,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAGLC,KAAOC,QAAG,IAAIC,EAAeF,KAAM,OAKdA,KAAIG,KAAc,GAYhD,CAVC,MAAAC,GACE,OAAOC,CAAI,4EAG6BL,KAAKC,QAAQK,kDAKtD,GAlBMT,EAAAU,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6Bf,EAAAgB,UAAA,YAAA,GAR/BhB,EAAMa,EAAA,CAD1BI,EAAc,gBACMjB,SAAAA"}

package/lib/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","sources":["../../icons/lib/assets/navigation-search.js","../src/common/controllers/ResizeController.ts","../src/input/Input.ts","../src/common/input.ts","../src/common/form.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z\" fill=\"currentColor\"/></svg>';\nexport const title = \"navigation-search\";\nexport const tags = \"nordicon navigation menu find search magnifying glass\";\n","import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { isServer } from 'lit'\n\nexport class ResizeController implements ReactiveController {\n private observer?: ResizeObserver\n private hadFirstUpdate = false\n private borderBoxSize?: ResizeObserverSize\n\n constructor(\n host: ReactiveControllerHost,\n private target: () => HTMLElement,\n ) {\n host.addController(this)\n\n if (!isServer) {\n this.observer = new ResizeObserver(([entry]) => {\n const [borderBoxSize] = entry.borderBoxSize\n this.borderBoxSize = borderBoxSize\n host.requestUpdate()\n })\n }\n }\n\n get inlineSize() {\n return this.borderBoxSize?.inlineSize\n }\n\n get blockSize() {\n return this.borderBoxSize?.blockSize\n }\n\n hostUpdated() {\n if (!this.hadFirstUpdate && this.observer) {\n this.observer.observe(this.target())\n this.hadFirstUpdate = true\n }\n }\n\n hostConnected() {\n // in case the host has rendered, disconnected, and is now reconnected\n if (this.hadFirstUpdate && this.observer) {\n this.observer.observe(this.target())\n }\n }\n\n hostDisconnected() {\n if (this.observer) {\n this.observer.disconnect()\n }\n }\n}\n","import * as searchIcon from '@nordhealth/icons/lib/assets/navigation-search.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { ResizeController } from '../common/controllers/ResizeController.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\nimport { getSubmitButton } from '../common/form.js'\nimport { cleanValue } from '../common/input.js'\nimport { AutocompleteMixin } from '../common/mixins/AutocompleteMixin.js'\n\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 { TextSelectableMixin } from '../common/mixins/TextSelectableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport formFieldStyle from '../common/styles/FormField.css'\nimport textFieldStyle from '../common/styles/TextField.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Input.css'\n\nIcon.registerIcon(searchIcon)\n\nconst px = (value?: number) => (value ? `${value}px` : undefined)\n\ntype InputMode = 'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search'\nconst defaultInputmodeMap: Record<string, InputMode> = {\n number: 'numeric',\n email: 'email',\n tel: 'tel',\n url: 'url',\n search: 'search',\n}\n\n/*\n Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n \n @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon or prefix at the start of the input.\n * @slot end - Optional slot used to place an icon or suffix at the end of the input.\n \n @cssprop [--n-input-inline-size=240px] - Controls the inline size, or width, of the input.\n * @cssprop [--n-input-background=var(--n-color-active)] - Controls the background of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-color=var(--n-color-text)] - Controls the text color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-color=var(--n-color-border-strong)] - Controls the border color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-input-text-align=start] - Controls the alignment of text within the input itself.\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-input')\nexport default class Input extends SizeMixin(\n FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(TextSelectableMixin(InputMixin(FocusableMixin(LitElement)))))),\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n @query('slot[name=\\'start\\']') private startSlot!: HTMLSlotElement\n @query('slot[name=\\'end\\']') private endSlot!: HTMLSlotElement\n private startObserver = new ResizeController(this, () => this.startSlot)\n private endObserver = new ResizeController(this, () => this.endSlot)\n private direction = new DirectionController(this)\n\n /\n The type of the input.\n /\n @property({ reflect: true }) type:\n \| 'text'\n \| 'email'\n \| 'password'\n \| 'tel'\n \| 'url'\n \| 'search'\n \| 'number'\n \| 'unit'\n \| 'button' = 'text'\n\n /\n Controls whether the input expands to fill the width of its container.\n /\n @property({ reflect: true, type: Boolean }) expand = false\n\n /\n Optionally disallow certain characters from being used inside the input, using a regex pattern.\n /\n @property({ reflect: true, attribute: 'disallow-pattern' }) disallowPattern?: string = undefined\n\n /\n The inputmode attribute provides a hint to the browser about what type of keyboard to open on mobile devices.\n * Valid values: none, text, decimal, numeric, tel, search, email, url\n * When not explicitly set, defaults based on input type:\n * - type=\"number\" → inputmode=\"numeric\"\n * - type=\"email\" → inputmode=\"email\"\n * - type=\"tel\" → inputmode=\"tel\"\n * - type=\"url\" → inputmode=\"url\"\n * - type=\"search\" → inputmode=\"search\"\n * Can be explicitly overridden for any type.\n /\n @property({ reflect: true }) inputmode?: 'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url' = undefined\n\n render() {\n const isNumber = this.type === 'number'\n\n const inputmodeValue = this.inputmode \|\| defaultInputmodeMap[this.type]\n\n return html`\n ${this.renderLabel()}\n\n <div\n class=${classMap({\n 'n-input-container': true,\n 'is-rtl': this.direction.dir === 'rtl',\n })}\n style=${styleMap({\n '--_n-input-start-inline-size': px(this.startObserver.inlineSize),\n '--_n-input-end-inline-size': px(this.endObserver.inlineSize),\n })}\n >\n <slot name=\"start\">\n ${this.type === 'search' ? html`<nord-icon name=\"navigation-search\"></nord-icon>` : nothing}\n </slot>\n <input\n ${ref(this.textSelectableRef)}\n ${ref(this.focusableRef)}\n id=${this.inputId}\n class=\"n-input\"\n type=${isNumber \|\| this.type === 'unit' ? 'text' : this.type}\n inputmode=${ifDefined(inputmodeValue)}\n pattern=${cond(isNumber, '[0-9]')}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n name=${ifDefined(this.name)}\n .value=${this.value ?? ''}\n placeholder=${ifDefined(this.placeholder)}\n @input=${this.handleInputChange}\n @change=${this.handleChange}\n @keydown=${this.handleKeydown}\n @select=${this.handleSelect}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n spellcheck=\"false\"\n autocomplete=${this.autocomplete as any}\n />\n <slot name=\"end\"></slot>\n </div>\n\n ${this.renderError()}\n ${this.isHintBelow ? this.renderHint() : nothing}\n `\n }\n\n private handleKeydown(e: KeyboardEvent) {\n if (e.key !== 'Enter') {\n return\n }\n\n const { form } = this\n\n if (form) {\n const button = getSubmitButton(form)\n setTimeout(() => button?.click(), 0)\n }\n }\n\n private handleInputChange = (e: Event) => {\n const target = e.target as HTMLInputElement\n\n // clean up any invalid characters\n if (this.disallowPattern) {\n cleanValue(target, new RegExp(this.disallowPattern, 'g'))\n }\n this.handleInput(e)\n }\n\n protected handleSelect(e: Event) {\n e.stopPropagation()\n\n /*\n Fired when some text has been selected.\n /\n this.dispatchEvent(new NordEvent('select'))\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-input': Input\n }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n const { value } = inputEl\n const cursor = inputEl.selectionStart as number\n\n const beforeCursor = value.slice(0, cursor)\n const afterCursor = value.slice(cursor, value.length)\n\n const filteredBeforeCursor = beforeCursor.replace(regex, '')\n const filterAfterCursor = afterCursor.replace(regex, '')\n\n const newValue = filteredBeforeCursor + filterAfterCursor\n const newCursor = filteredBeforeCursor.length\n\n inputEl.value = newValue\n inputEl.selectionStart = newCursor\n inputEl.selectionEnd = newCursor\n\n return newValue\n}\n","/\n Finds a form's submit button. First looking for a button inside form,\n * and then looking for a button whose form attribute is equal to the ID of the form.\n */\nexport function getSubmitButton(form: HTMLFormElement): HTMLButtonElement \| null {\n // we can get away with just looking for native <button> elements,\n // rather than our component, since our button component renders one to light dom.\n let button = form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)\n\n if (!button && form.id) {\n const root = form.getRootNode() as ShadowRoot \| Document\n button = root.querySelector<HTMLButtonElement>(`button[form=${form.id}]`)\n }\n\n return button\n}\n"],"names":["ResizeController","constructor","host","target","this","hadFirstUpdate","addController","isServer","observer","ResizeObserver","entry","borderBoxSize","requestUpdate","inlineSize","_a","blockSize","hostUpdated","observe","hostConnected","hostDisconnected","disconnect","Icon","registerIcon","searchIcon","px","value","undefined","defaultInputmodeMap","number","email","tel","url","search","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","InputMixin","FocusableMixin","LitElement","startObserver","startSlot","endObserver","endSlot","direction","DirectionController","type","expand","disallowPattern","inputmode","handleInputChange","e","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","isNumber","inputmodeValue","html","renderLabel","classMap","dir","styleMap","nothing","ref","textSelectableRef","focusableRef","inputId","ifDefined","cond","disabled","required","readonly","name","placeholder","handleChange","handleKeydown","handleSelect","getDescribedBy","getInvalid","autocomplete","renderError","isHintBelow","renderHint","key","form","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","stopPropagation","dispatchEvent","NordEvent","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","reflect","Boolean","attribute","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"Input.js","sources":["../../icons/lib/assets/navigation-search.js","../src/common/controllers/ResizeController.ts","../src/input/Input.ts","../src/common/input.ts","../src/common/form.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z\" fill=\"currentColor\"/></svg>';\nexport const title = \"navigation-search\";\nexport const tags = \"nordicon navigation menu find search magnifying glass\";\n","import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { isServer } from 'lit'\n\nexport class ResizeController implements ReactiveController {\n private observer?: ResizeObserver\n private hadFirstUpdate = false\n private borderBoxSize?: ResizeObserverSize\n\n constructor(\n host: ReactiveControllerHost,\n private target: () => HTMLElement,\n ) {\n host.addController(this)\n\n if (!isServer) {\n this.observer = new ResizeObserver(([entry]) => {\n const [borderBoxSize] = entry.borderBoxSize\n this.borderBoxSize = borderBoxSize\n host.requestUpdate()\n })\n }\n }\n\n get inlineSize() {\n return this.borderBoxSize?.inlineSize\n }\n\n get blockSize() {\n return this.borderBoxSize?.blockSize\n }\n\n hostUpdated() {\n if (!this.hadFirstUpdate && this.observer) {\n this.observer.observe(this.target())\n this.hadFirstUpdate = true\n }\n }\n\n hostConnected() {\n // in case the host has rendered, disconnected, and is now reconnected\n if (this.hadFirstUpdate && this.observer) {\n this.observer.observe(this.target())\n }\n }\n\n hostDisconnected() {\n if (this.observer) {\n this.observer.disconnect()\n }\n }\n}\n","import * as searchIcon from '@nordhealth/icons/lib/assets/navigation-search.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { ResizeController } from '../common/controllers/ResizeController.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\nimport { getSubmitButton } from '../common/form.js'\nimport { cleanValue } from '../common/input.js'\nimport { AutocompleteMixin } from '../common/mixins/AutocompleteMixin.js'\n\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 { TextSelectableMixin } from '../common/mixins/TextSelectableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport formFieldStyle from '../common/styles/FormField.css'\nimport textFieldStyle from '../common/styles/TextField.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Input.css'\n\nIcon.registerIcon(searchIcon)\n\nconst px = (value?: number) => (value ? `${value}px` : undefined)\n\ntype InputMode = 'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search'\nconst defaultInputmodeMap: Record<string, InputMode> = {\n number: 'numeric',\n email: 'email',\n tel: 'tel',\n url: 'url',\n search: 'search',\n}\n\n/*\n Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n \n @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon or prefix at the start of the input.\n * @slot end - Optional slot used to place an icon or suffix at the end of the input.\n \n @cssprop [--n-input-inline-size=240px] - Controls the inline size, or width, of the input.\n * @cssprop [--n-input-background=var(--n-color-surface)] - Controls the background of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-color=var(--n-color-text)] - Controls the text color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-color=var(--n-color-border-strong)] - Controls the border color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-input-text-align=start] - Controls the alignment of text within the input itself.\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-input')\nexport default class Input extends SizeMixin(\n FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(TextSelectableMixin(InputMixin(FocusableMixin(LitElement)))))),\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n @query('slot[name=\\'start\\']') private startSlot!: HTMLSlotElement\n @query('slot[name=\\'end\\']') private endSlot!: HTMLSlotElement\n private startObserver = new ResizeController(this, () => this.startSlot)\n private endObserver = new ResizeController(this, () => this.endSlot)\n private direction = new DirectionController(this)\n\n /\n The type of the input.\n /\n @property({ reflect: true }) type:\n \| 'text'\n \| 'email'\n \| 'password'\n \| 'tel'\n \| 'url'\n \| 'search'\n \| 'number'\n \| 'unit'\n \| 'button' = 'text'\n\n /\n Controls whether the input expands to fill the width of its container.\n /\n @property({ reflect: true, type: Boolean }) expand = false\n\n /\n Optionally disallow certain characters from being used inside the input, using a regex pattern.\n /\n @property({ reflect: true, attribute: 'disallow-pattern' }) disallowPattern?: string = undefined\n\n /\n The inputmode attribute provides a hint to the browser about what type of keyboard to open on mobile devices.\n * Valid values: none, text, decimal, numeric, tel, search, email, url\n * When not explicitly set, defaults based on input type:\n * - type=\"number\" → inputmode=\"numeric\"\n * - type=\"email\" → inputmode=\"email\"\n * - type=\"tel\" → inputmode=\"tel\"\n * - type=\"url\" → inputmode=\"url\"\n * - type=\"search\" → inputmode=\"search\"\n * Can be explicitly overridden for any type.\n /\n @property({ reflect: true }) inputmode?: 'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url' = undefined\n\n render() {\n const isNumber = this.type === 'number'\n\n const inputmodeValue = this.inputmode \|\| defaultInputmodeMap[this.type]\n\n return html`\n ${this.renderLabel()}\n\n <div\n class=${classMap({\n 'n-input-container': true,\n 'is-rtl': this.direction.dir === 'rtl',\n })}\n style=${styleMap({\n '--_n-input-start-inline-size': px(this.startObserver.inlineSize),\n '--_n-input-end-inline-size': px(this.endObserver.inlineSize),\n })}\n >\n <slot name=\"start\">\n ${this.type === 'search' ? html`<nord-icon name=\"navigation-search\"></nord-icon>` : nothing}\n </slot>\n <input\n ${ref(this.textSelectableRef)}\n ${ref(this.focusableRef)}\n id=${this.inputId}\n class=\"n-input\"\n type=${isNumber \|\| this.type === 'unit' ? 'text' : this.type}\n inputmode=${ifDefined(inputmodeValue)}\n pattern=${cond(isNumber, '[0-9]')}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n name=${ifDefined(this.name)}\n .value=${this.value ?? ''}\n placeholder=${ifDefined(this.placeholder)}\n @input=${this.handleInputChange}\n @change=${this.handleChange}\n @keydown=${this.handleKeydown}\n @select=${this.handleSelect}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n spellcheck=\"false\"\n autocomplete=${this.autocomplete as any}\n />\n <slot name=\"end\"></slot>\n </div>\n\n ${this.renderError()}\n ${this.isHintBelow ? this.renderHint() : nothing}\n `\n }\n\n private handleKeydown(e: KeyboardEvent) {\n if (e.key !== 'Enter') {\n return\n }\n\n const { form } = this\n\n if (form) {\n const button = getSubmitButton(form)\n setTimeout(() => button?.click(), 0)\n }\n }\n\n private handleInputChange = (e: Event) => {\n const target = e.target as HTMLInputElement\n\n // clean up any invalid characters\n if (this.disallowPattern) {\n cleanValue(target, new RegExp(this.disallowPattern, 'g'))\n }\n this.handleInput(e)\n }\n\n protected handleSelect(e: Event) {\n e.stopPropagation()\n\n /*\n Fired when some text has been selected.\n /\n this.dispatchEvent(new NordEvent('select'))\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-input': Input\n }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n const { value } = inputEl\n const cursor = inputEl.selectionStart as number\n\n const beforeCursor = value.slice(0, cursor)\n const afterCursor = value.slice(cursor, value.length)\n\n const filteredBeforeCursor = beforeCursor.replace(regex, '')\n const filterAfterCursor = afterCursor.replace(regex, '')\n\n const newValue = filteredBeforeCursor + filterAfterCursor\n const newCursor = filteredBeforeCursor.length\n\n inputEl.value = newValue\n inputEl.selectionStart = newCursor\n inputEl.selectionEnd = newCursor\n\n return newValue\n}\n","/\n Finds a form's submit button. First looking for a button inside form,\n * and then looking for a button whose form attribute is equal to the ID of the form.\n */\nexport function getSubmitButton(form: HTMLFormElement): HTMLButtonElement \| null {\n // we can get away with just looking for native <button> elements,\n // rather than our component, since our button component renders one to light dom.\n let button = form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)\n\n if (!button && form.id) {\n const root = form.getRootNode() as ShadowRoot \| Document\n button = root.querySelector<HTMLButtonElement>(`button[form=${form.id}]`)\n }\n\n return button\n}\n"],"names":["ResizeController","constructor","host","target","this","hadFirstUpdate","addController","isServer","observer","ResizeObserver","entry","borderBoxSize","requestUpdate","inlineSize","_a","blockSize","hostUpdated","observe","hostConnected","hostDisconnected","disconnect","Icon","registerIcon","searchIcon","px","value","undefined","defaultInputmodeMap","number","email","tel","url","search","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","InputMixin","FocusableMixin","LitElement","startObserver","startSlot","endObserver","endSlot","direction","DirectionController","type","expand","disallowPattern","inputmode","handleInputChange","e","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","isNumber","inputmodeValue","html","renderLabel","classMap","dir","styleMap","nothing","ref","textSelectableRef","focusableRef","inputId","ifDefined","cond","disabled","required","readonly","name","placeholder","handleChange","handleKeydown","handleSelect","getDescribedBy","getInvalid","autocomplete","renderError","isHintBelow","renderHint","key","form","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","stopPropagation","dispatchEvent","NordEvent","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","reflect","Boolean","attribute","customElement"],"mappings":"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"}

package/lib/Layout.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{l as e}from"./NavToggle-DL74d1aQ.js";import{css as t,LitElement as a,html as o,nothing as i}from"lit";import{query as s,state as r,property as l,customElement as d}from"lit/decorators.js";import{classMap as c}from"lit/directives/class-map.js";import{styleMap as h}from"lit/directives/style-map.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{E as p}from"./EventController-BBOmvfLa.js";import{L as u}from"./LightDismissController-4pH8cdko.js";import{S as g}from"./SlotController-Z6eG7LSZ.js";import{o as b}from"./observe-D0n0zOfU.js";import{c as m}from"./cond-CI1KbneT.js";import{f as y}from"./fsm-Bq5jMQrK.js";import{c as k}from"./number-Dg2vCfGd.js";import{s as f}from"./Component-DSU3Qp0O.js";import{s as w}from"./Sticky-DqnqENYN.js";import z from"./Icon.js";import"lit/directives/ref.js";import"./FocusableMixin-BlQLNPdJ.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./Button.js";import"./LightDomController-DIwtVelV.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";import"lit/directives/if-defined.js";import"./VisuallyHidden.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";const x=()=>!0;class S{constructor(n,e){n.addController(this),this.options={enabled:x,...e}}hostConnected(){"undefined"!=typeof BroadcastChannel&&(this.channel=new BroadcastChannel(this.options.channelName),this.channel.addEventListener("message",this))}hostDisconnected(){var n,e;null===(n=this.channel)||void 0===n||n.removeEventListener("message",this),null===(e=this.channel)||void 0===e||e.close()}handleEvent(n){this.options.enabled()&&this.options.onMessage(n.data)}post(n){var e;this.options.enabled()&&(null===(e=this.channel)||void 0===e||e.postMessage(n))}}function _(n,e,t=JSON.stringify,a=JSON.parse){return{get value(){try{const t=localStorage.getItem(n);return t?a(t):e}catch(n){return e}},set value(e){try{localStorage.setItem(n,t(e))}catch(n){}}}}const C=t`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));--_n-layout-footer-size:var(--n-space-xxl);background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout{block-size:calc(100vh - var(--n-sticky-top))}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}:host([sticky-footer]) .n-has-footer slot[name=footer]::slotted(*){position:fixed}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgb(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgb(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgb(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--n-color-border) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:'';position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:'';position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:fixed;inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-start:0;z-index:var(--n-index-top-bar)}[data-screen=narrow] .n-top-bar-container,[data-screen=wide]:not([data-nav=opened]) .n-top-bar-container{inset-inline-start:0}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar .n-layout-main{inset-block-start:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed;inset-block-start:0}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),.n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}.n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),.n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgb(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgb(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}@media (hover:hover) and (pointer:fine){.n-collapse-btn{opacity:0;visibility:hidden}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}slot[name=footer]::slotted(*){inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-end:0}@media (min-width:1240px){.n-has-drawer slot[name=footer]::slotted(*){inset-inline-end:var(--_n-layout-drawer-inline-size)}}[data-screen=narrow] slot[name=footer]::slotted(*),[data-screen=wide]:not([data-nav=opened]) slot[name=footer]::slotted(*){inset-inline-start:0}:host([sticky-footer]) .n-has-footer .n-layout-content{padding-block-end:var(--_n-layout-footer-size)}`;z.registerIcon(e);const j="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){}},N=_("nord-layout.navWidth",250),T=_("nord-layout.navOpen",!0),$=y({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let D=class extends a{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.footerSlot=new g(this,"footer"),this.direction=new v(this),this.events=new p(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:n=>n!==this.navEl}),this.broadcast=new S(this,{channelName:"nord-layout-nav-state",enabled:()=>this.syncNavState&&this.wideScreen,onMessage:n=>{"navOpen"in n&&(this.navOpen=n.navOpen),"navWidth"in n&&(this.navWidth=n.navWidth)}}),this.navWidth=N.value,this.isDragging=!1,this.wideScreen=j.matches,this.persistNavState=!1,this.syncNavState=!1,this.padding="m",this.sticky=!1,this.stickyFooter=!1,this.handleMediaQueryChange=()=>{this.wideScreen=j.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(j,"change",this.handleMediaQueryChange)}willUpdate(){this.hasUpdated||(this.isNarrow||this.persistNavState&&!1===T.value?this.navState="closed":this.navState="opened")}render(){const{navWidth:n,navState:e,navSlot:t,headerSlot:a,footerSlot:s,topBarSlot:r,drawerSlot:l,isDragging:d,direction:v}=this,p="opened"===e&&this.wideScreen?n:250;return o`<div class="${c({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":d,"n-has-header":a.hasContent,"n-has-footer":s.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":l.hasContent,"n-has-nav":t.hasContent})}" style="${h({"--_n-layout-nav-width":`${p}px`})}" data-nav="${t.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${t.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${m("opened"===e,this.startDragging)}" @pointermove="${m(d,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${t.hasContent?this.renderNavToggle():i}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main><slot name="footer"></slot></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return o`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return o`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){N.value=this.navWidth}handleNavStateChange(n){switch("wait"===n&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===n&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(n){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close"),this.persistNavState&&(T.value=this.navOpen),null!=n&&this.broadcast.post({navOpen:this.navOpen})}navTransition(n){this.navState=$.transition(this.navState,n)}handleNavClick(n){if(!n.defaultPrevented&&!this.wideScreen){const t=n.target;(n=>"nord-nav-item"===n.localName)(e=t)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(n){const{navWidth:e,direction:{isLTR:t}}=this;switch(n.key){case"ArrowLeft":this.setNavWidth(e+(t?-30:30));break;case"ArrowRight":this.setNavWidth(e+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}this.broadcast.post({navWidth:this.navWidth}),n.preventDefault()}setNavWidth(n){this.navWidth=k(Math.round(n),220,400)}startDragging(n){if(0===n.button){n.target.setPointerCapture(n.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1,this.broadcast.post({navWidth:this.navWidth})}handleDrag(n){const e=this.direction.isRTL?this.clientWidth-n.clientX:n.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};D.styles=[f,w,C],n([s(".n-layout-nav",!0)],D.prototype,"navEl",void 0),n([r()],D.prototype,"navWidth",void 0),n([r()],D.prototype,"isDragging",void 0),n([r()],D.prototype,"navState",void 0),n([r()],D.prototype,"wideScreen",void 0),n([l({reflect:!0,type:Boolean,attribute:"nav-open"})],D.prototype,"navOpen",void 0),n([l({reflect:!0,type:Boolean,attribute:"persist-nav-state"})],D.prototype,"persistNavState",void 0),n([l({type:Boolean,reflect:!0,attribute:"sync-nav-state"})],D.prototype,"syncNavState",void 0),n([l({reflect:!0})],D.prototype,"padding",void 0),n([l({type:Boolean,reflect:!0})],D.prototype,"sticky",void 0),n([l({type:Boolean,reflect:!0,attribute:"sticky-footer"})],D.prototype,"stickyFooter",void 0),n([b("navWidth","updated")],D.prototype,"handleNavWidthChange",null),n([b("navState")],D.prototype,"handleNavStateChange",null),n([b("navOpen","updated")],D.prototype,"handleOpenChange",null),D=n([d("nord-layout")],D);var W=D;export{W as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{l as n}from"./NavToggle-DL74d1aQ.js";import{css as e,LitElement as a,html as i,nothing as o}from"lit";import{query as s,state as r,property as d,customElement as l}from"lit/decorators.js";import{classMap as c}from"lit/directives/class-map.js";import{styleMap as h}from"lit/directives/style-map.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{E as p}from"./EventController-BBOmvfLa.js";import{L as u}from"./LightDismissController-4pH8cdko.js";import{S as g}from"./SlotController-Z6eG7LSZ.js";import{o as m}from"./observe-D0n0zOfU.js";import{c as b}from"./cond-CI1KbneT.js";import{f as y}from"./fsm-Bq5jMQrK.js";import{c as f}from"./number-Dg2vCfGd.js";import{s as k}from"./Component-DSU3Qp0O.js";import{s as w}from"./Sticky-DqnqENYN.js";import z from"./Icon.js";import"lit/directives/ref.js";import"./FocusableMixin-BlQLNPdJ.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./Button.js";import"./LightDomController-DIwtVelV.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";import"lit/directives/if-defined.js";import"./VisuallyHidden.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";const x=()=>!0;class N{constructor(t,n){t.addController(this),this.options={enabled:x,...n}}hostConnected(){"undefined"!=typeof BroadcastChannel&&(this.channel=new BroadcastChannel(this.options.channelName),this.channel.addEventListener("message",this))}hostDisconnected(){var t,n;null===(t=this.channel)||void 0===t||t.removeEventListener("message",this),null===(n=this.channel)||void 0===n||n.close()}handleEvent(t){this.options.enabled()&&this.options.onMessage(t.data)}post(t){var n;this.options.enabled()&&(null===(n=this.channel)||void 0===n||n.postMessage(t))}}function W(t,n,e=JSON.stringify,a=JSON.parse){return{get value(){try{const e=localStorage.getItem(t);return e?a(e):n}catch(t){return n}},set value(n){try{localStorage.setItem(t,e(n))}catch(t){}}}}const S=e`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));--_n-layout-footer-size:var(--n-space-xxl);background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout{block-size:calc(100vh - var(--n-sticky-top))}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}:host([sticky-footer]) .n-has-footer slot[name=footer]::slotted(*){position:fixed}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgb(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgb(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgb(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--n-color-border) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:'';position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:'';position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:fixed;inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-start:0;z-index:var(--n-index-top-bar)}[data-screen=narrow] .n-top-bar-container,[data-screen=wide]:not([data-nav=opened]) .n-top-bar-container{inset-inline-start:0}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar .n-layout-main{inset-block-start:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed;inset-block-start:0}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),.n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}.n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),.n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgb(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgb(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}@media (hover:hover) and (pointer:fine){.n-collapse-btn{opacity:0;visibility:hidden}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}slot[name=footer]::slotted(*){inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-end:0}@media (min-width:1240px){.n-has-drawer slot[name=footer]::slotted(*){inset-inline-end:var(--_n-layout-drawer-inline-size)}}[data-screen=narrow] slot[name=footer]::slotted(*),[data-screen=wide]:not([data-nav=opened]) slot[name=footer]::slotted(*){inset-inline-start:0}:host([sticky-footer]) .n-has-footer .n-layout-content{padding-block-end:var(--_n-layout-footer-size)}`;z.registerIcon(n);const _=250,C="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){}},j=W("nord-layout.navWidth",_),T=W("nord-layout.navWidthDefault",_),D=W("nord-layout.navOpen",!0),$=y({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let E=class extends a{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.footerSlot=new g(this,"footer"),this.direction=new v(this),this.events=new p(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:t=>t!==this.navEl}),this.broadcast=new N(this,{channelName:"nord-layout-nav-state",enabled:()=>this.syncNavState&&this.wideScreen,onMessage:t=>{"navOpen"in t&&(this.navOpen=t.navOpen),"navWidth"in t&&(this.navWidth=t.navWidth)}}),this.navWidth=j.value,this.isDragging=!1,this.wideScreen=C.matches,this.persistNavState=!1,this.syncNavState=!1,this.defaultNavWidth=_,this.minNavWidth=220,this.maxNavWidth=400,this.padding="m",this.sticky=!1,this.stickyFooter=!1,this.handleMediaQueryChange=()=>{this.wideScreen=C.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(C,"change",this.handleMediaQueryChange)}willUpdate(){this.hasUpdated||(Number.isFinite(this.defaultNavWidth)||(this.defaultNavWidth=_),Number.isFinite(this.minNavWidth)||(this.minNavWidth=220),Number.isFinite(this.maxNavWidth)||(this.maxNavWidth=400),T.value!==this.defaultNavWidth?(this.setNavWidth(this.defaultNavWidth),j.value=this.navWidth,T.value=this.defaultNavWidth):this.setNavWidth(this.navWidth),this.isNarrow||this.persistNavState&&!1===D.value?this.navState="closed":this.navState="opened")}render(){const{navWidth:t,navState:n,navSlot:e,headerSlot:a,footerSlot:s,topBarSlot:r,drawerSlot:d,isDragging:l,direction:v}=this,p="opened"===n&&this.wideScreen?t:this.defaultNavWidth;return i`<div class="${c({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":l,"n-has-header":a.hasContent,"n-has-footer":s.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":d.hasContent,"n-has-nav":e.hasContent})}" style="${h({"--_n-layout-nav-width":`${p}px`})}" data-nav="${e.hasContent?n:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${e.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${b("opened"===n,this.startDragging)}" @pointermove="${b(l,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${e.hasContent?this.renderNavToggle():o}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main><slot name="footer"></slot></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return i`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return i`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){j.value=this.navWidth}handleNavStateChange(t){switch("wait"===t&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===t&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(t){this.isDragging||this.setNavWidth(Math.max(this.navWidth,this.defaultNavWidth)),this.navTransition(this.navOpen?"open":"close"),this.persistNavState&&(D.value=this.navOpen),null!=t&&this.broadcast.post({navOpen:this.navOpen})}navTransition(t){this.navState=$.transition(this.navState,t)}handleNavClick(t){if(!t.defaultPrevented&&!this.wideScreen){const e=t.target;(t=>"nord-nav-item"===t.localName)(n=e)&&!n.hasSubNav&&this.navTransition("close")}var n}handleMainClick(){this.navTransition("click")}handleDropdownOpen(t){"nord-dropdown"===t.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(t){"nord-dropdown"===t.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(t){const{navWidth:n,direction:{isLTR:e}}=this;switch(t.key){case"ArrowLeft":this.setNavWidth(n+(e?-30:30));break;case"ArrowRight":this.setNavWidth(n+(e?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(this.minNavWidth);break;case"End":this.setNavWidth(this.maxNavWidth);break;default:return}this.broadcast.post({navWidth:this.navWidth}),t.preventDefault()}setNavWidth(t){this.navWidth=f(Math.round(t),this.minNavWidth,this.maxNavWidth)}startDragging(t){if(0===t.button){t.target.setPointerCapture(t.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1,this.broadcast.post({navWidth:this.navWidth})}handleDrag(t){const n=this.direction.isRTL?this.clientWidth-t.clientX:t.clientX;this.setNavWidth(n),this.navTransition(n>=100?"open":"close")}};E.styles=[k,w,S],t([s(".n-layout-nav",!0)],E.prototype,"navEl",void 0),t([r()],E.prototype,"navWidth",void 0),t([r()],E.prototype,"isDragging",void 0),t([r()],E.prototype,"navState",void 0),t([r()],E.prototype,"wideScreen",void 0),t([d({reflect:!0,type:Boolean,attribute:"nav-open"})],E.prototype,"navOpen",void 0),t([d({reflect:!0,type:Boolean,attribute:"persist-nav-state"})],E.prototype,"persistNavState",void 0),t([d({type:Boolean,reflect:!0,attribute:"sync-nav-state"})],E.prototype,"syncNavState",void 0),t([d({type:Number,reflect:!0,attribute:"default-nav-width"})],E.prototype,"defaultNavWidth",void 0),t([d({type:Number,reflect:!0,attribute:"min-nav-width"})],E.prototype,"minNavWidth",void 0),t([d({type:Number,reflect:!0,attribute:"max-nav-width"})],E.prototype,"maxNavWidth",void 0),t([d({reflect:!0})],E.prototype,"padding",void 0),t([d({type:Boolean,reflect:!0})],E.prototype,"sticky",void 0),t([d({type:Boolean,reflect:!0,attribute:"sticky-footer"})],E.prototype,"stickyFooter",void 0),t([m("navWidth","updated")],E.prototype,"handleNavWidthChange",null),t([m("navState")],E.prototype,"handleNavStateChange",null),t([m("navOpen","updated")],E.prototype,"handleOpenChange",null),E=t([l("nord-layout")],E);var M=E;export{M as default};
 //# sourceMappingURL=Layout.js.map