npm - @nordhealth/components - Versions diffs - 4.16.1 → 4.18.0 - Mend

@nordhealth/components 4.16.1 → 4.18.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 (37) hide show

package/custom-elements.json +9863 -9232
package/lib/{Calendar-CKgiq2S1.js → Calendar-20BBxuFj.js} +2 -2
package/lib/Calendar-20BBxuFj.js.map +1 -0
package/lib/Calendar.js +1 -1
package/lib/Checkbox.js +1 -1
package/lib/Checkbox.js.map +1 -1
package/lib/DatePicker.js +1 -1
package/lib/DatePicker.js.map +1 -1
package/lib/Fieldset.js +1 -1
package/lib/Fieldset.js.map +1 -1
package/lib/FormAssociatedMixin-B4Qj-CQN.js +2 -0
package/lib/FormAssociatedMixin-B4Qj-CQN.js.map +1 -0
package/lib/FormField-BFaVzUjk.js +2 -0
package/lib/FormField-BFaVzUjk.js.map +1 -0
package/lib/Input.js +1 -1
package/lib/Input.js.map +1 -1
package/lib/Radio.js +1 -1
package/lib/Radio.js.map +1 -1
package/lib/Range.js +1 -1
package/lib/Range.js.map +1 -1
package/lib/Select.js +1 -1
package/lib/Select.js.map +1 -1
package/lib/Textarea.js +1 -1
package/lib/Textarea.js.map +1 -1
package/lib/Toggle.js +1 -1
package/lib/Toggle.js.map +1 -1
package/lib/bundle.js +14 -14
package/lib/bundle.js.map +1 -1
package/lib/index.js +1 -1
package/lib/src/common/mixins/FormAssociatedMixin.d.ts +3 -0
package/lib/src/fieldset/Fieldset.d.ts +9 -0
package/package.json +4 -4
package/lib/Calendar-CKgiq2S1.js.map +0 -1
package/lib/FormAssociatedMixin-DFL7yabe.js +0 -2
package/lib/FormAssociatedMixin-DFL7yabe.js.map +0 -1
package/lib/FormField--eLuhPue.js +0 -2
package/lib/FormField--eLuhPue.js.map +0 -1

package/lib/{Calendar-CKgiq2S1.js → Calendar-20BBxuFj.js} RENAMED Viewed

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

package/lib/Calendar-20BBxuFj.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/lib/Checkbox.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{c as n}from"./interface-checked-small-BtICPEsp.js";import{css as o,html as i,LitElement as r}from"lit";import{property as t,customElement as c}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{ref as s}from"lit/directives/ref.js";import{F as l}from"./FocusableMixin-BlQLNPdJ.js";import{F as d}from"./FormAssociatedMixin-DFL7yabe.js";import{I as p}from"./InputMixin-LetXsCyv.js";import{S as h}from"./SizeMixin-CU9cLbLC.js";import{s as m}from"./Component-DSU3Qp0O.js";import{s as v}from"./FormField--eLuhPue.js";import b from"./Icon.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m20 8.49976v3.00004h-20v-3.00004z" fill="currentColor"/></svg>',tags:"nordicon interface remove small delete erase minimize line",title:"interface-remove-small"});const k=o`:host{--_n-checkbox-size:calc(var(--n-space-m) * 1.25);--_n-checkbox-accent-color:var(--n-color-accent);--_n-checkbox-border-color:var(--n-color-border-hover);--_n-checkbox-icon-size:var(--n-size-icon-s);display:inline-block}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}input{appearance:none;background:var(--n-color-active);border:1px solid var(--_n-checkbox-border-color);border-radius:var(--n-border-radius-s);display:block;inline-size:var(--_n-checkbox-size);block-size:var(--_n-checkbox-size);cursor:pointer}input:checked,input:indeterminate{--_n-checkbox-border-color:var(--n-color-accent);background:var(--_n-checkbox-accent-color)}input[aria-invalid]{--_n-checkbox-accent-color:var(--n-color-status-danger);--_n-checkbox-border-color:var(--_n-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}input:active{opacity:.8}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{background:var(--_n-checkbox-accent-color);cursor:default;opacity:1}:host([disabled]) input:not(:is(:checked, :indeterminate)){--_n-checkbox-accent-color:var(--n-color-active);--_n-checkbox-border-color:var(--n-color-border-neutral)}:host([disabled]) input:is(:checked, :indeterminate){opacity:.3}nord-icon{--_n-icon-size:var(--_n-checkbox-icon-size);display:none;position:absolute;color:var(--n-color-text-on-accent);inset:var(--n-space-xs);z-index:var(--n-index-default);pointer-events:none}input:checked~.icon-checked,input:indeterminate~.icon-indeterminate{display:block}.n-label-container{margin-block-end:0}label{user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-form);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([size='s']){--_n-checkbox-size:var(--n-space-m);--_n-checkbox-icon-size:var(--n-size-icon-xs)}:host([size='s']) nord-icon{inset:calc(var(--n-space-s)/ 2.6)}:host([size='s']:not([hide-label])) .n-input-container{margin:calc(var(--n-space-s)/ 2.6) 0}:host([size='l']){--_n-checkbox-size:var(--n-space-l);--_n-checkbox-icon-size:var(--n-size-icon-m)}:host([size='l']:not([hide-label])) .n-label-container{margin:2px 0 0}`;b.registerIcon(n),b.registerIcon(u);let x=class extends(h(d(p(l(r))))){constructor(){super(...arguments),this.indeterminate=!1,this.checked=!1}get formValue(){return this.checked?this.value||"on":void 0}render(){return i`<div class="n-flex"><div class="n-input-container"><input ${s(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" .indeterminate="${this.indeterminate}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small"></nord-icon><nord-icon class="icon-indeterminate" name="interface-remove-small"></nord-icon></div><div class="n-expand">${this.renderLabel()} ${this.renderError()}</div></div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};x.styles=[m,v,k],e([t({reflect:!0,type:Boolean})],x.prototype,"indeterminate",void 0),e([t({reflect:!0,type:Boolean})],x.prototype,"checked",void 0),x=e([c("nord-checkbox")],x);var f=x;export{f as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{c as n}from"./interface-checked-small-BtICPEsp.js";import{css as i,html as o,nothing as r,LitElement as t}from"lit";import{property as c,customElement as a}from"lit/decorators.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{ref as l}from"lit/directives/ref.js";import{F as d}from"./FocusableMixin-BlQLNPdJ.js";import{F as h}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as p}from"./InputMixin-LetXsCyv.js";import{S as m}from"./SizeMixin-CU9cLbLC.js";import{s as v}from"./Component-DSU3Qp0O.js";import{s as b}from"./FormField-BFaVzUjk.js";import u from"./Icon.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";var k=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m20 8.49976v3.00004h-20v-3.00004z" fill="currentColor"/></svg>',tags:"nordicon interface remove small delete erase minimize line",title:"interface-remove-small"});const x=i`:host{--_n-checkbox-size:calc(var(--n-space-m) * 1.25);--_n-checkbox-accent-color:var(--n-color-accent);--_n-checkbox-border-color:var(--n-color-border-hover);--_n-checkbox-icon-size:var(--n-size-icon-s);display:inline-block}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}input{appearance:none;background:var(--n-color-active);border:1px solid var(--_n-checkbox-border-color);border-radius:var(--n-border-radius-s);display:block;inline-size:var(--_n-checkbox-size);block-size:var(--_n-checkbox-size);cursor:pointer}input:checked,input:indeterminate{--_n-checkbox-border-color:var(--n-color-accent);background:var(--_n-checkbox-accent-color)}input[aria-invalid]{--_n-checkbox-accent-color:var(--n-color-status-danger);--_n-checkbox-border-color:var(--_n-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}input:active{opacity:.8}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{background:var(--_n-checkbox-accent-color);cursor:default;opacity:1}:host([disabled]) input:not(:is(:checked, :indeterminate)){--_n-checkbox-accent-color:var(--n-color-active);--_n-checkbox-border-color:var(--n-color-border-neutral)}:host([disabled]) input:is(:checked, :indeterminate){opacity:.3}nord-icon{--_n-icon-size:var(--_n-checkbox-icon-size);display:none;position:absolute;color:var(--n-color-text-on-accent);inset:var(--n-space-xs);z-index:var(--n-index-default);pointer-events:none}input:checked~.icon-checked,input:indeterminate~.icon-indeterminate{display:block}.n-label-container{margin-block-end:0}label{user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-form);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([hint-below]) :is(.n-hint, .n-error){padding-inline-start:0}:host([size='s']){--_n-checkbox-size:var(--n-space-m);--_n-checkbox-icon-size:var(--n-size-icon-xs)}:host([size='s']) nord-icon{inset:calc(var(--n-space-s)/ 2.6)}:host([size='s']:not([hide-label])) .n-input-container{margin:calc(var(--n-space-s)/ 2.6) 0}:host([size='l']){--_n-checkbox-size:var(--n-space-l);--_n-checkbox-icon-size:var(--n-size-icon-m)}:host([size='l']:not([hide-label])) .n-label-container{margin:2px 0 0}`;u.registerIcon(n),u.registerIcon(k);let f=class extends(m(h(p(d(t))))){constructor(){super(...arguments),this.indeterminate=!1,this.checked=!1}get formValue(){return this.checked?this.value||"on":void 0}render(){return o`<div class="n-flex"><div class="n-input-container"><input ${l(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${s(this.name)}" .value="${this.value}" .checked="${this.checked}" .indeterminate="${this.indeterminate}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small"></nord-icon><nord-icon class="icon-indeterminate" name="interface-remove-small"></nord-icon></div><div class="n-expand">${this.renderLabel()} ${this.isHintBelow?r:this.renderError()}</div></div>${this.isHintBelow?this.renderError():r} ${this.isHintBelow?this.renderHint():r}`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};f.styles=[v,b,x],e([c({reflect:!0,type:Boolean})],f.prototype,"indeterminate",void 0),e([c({reflect:!0,type:Boolean})],f.prototype,"checked",void 0),f=e([a("nord-checkbox")],f);var g=f;export{g as default};
 //# sourceMappingURL=Checkbox.js.map

package/lib/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","sources":["../../icons/lib/assets/interface-remove-small.js","../src/checkbox/Checkbox.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m20 8.49976v3.00004h-20v-3.00004z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-remove-small\";\nexport const tags =\n \"nordicon interface remove small delete erase minimize line\";\n","import * as checkedIcon from '@nordhealth/icons/lib/assets/interface-checked-small.js'\nimport * as indeterminateIcon from '@nordhealth/icons/lib/assets/interface-remove-small.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport formFieldStyle from '../common/styles/FormField.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Checkbox.css'\n\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(indeterminateIcon)\n\n/*\n Checkboxes allow user to choose one or more options from a limited set of options.\n * If you have more than 10 options, please use Select component instead.\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 \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-checkbox')\nexport default class Checkbox extends SizeMixin(FormAssociatedMixin(InputMixin(FocusableMixin(LitElement)))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.checked ? this.value \|\| 'on' : undefined\n }\n\n /\n Controls whether the checkbox is in an indeterminate state.\n /\n @property({ reflect: true, type: Boolean }) indeterminate = false\n\n /\n Controls whether the checkbox is checked or not.\n */\n @property({ reflect: true, type: Boolean }) checked: boolean = false\n\n render() {\n return html`\n <div class=\"n-flex\">\n <div class=\"n-input-container\">\n <input\n ${ref(this.focusableRef)}\n class=\"n-input\"\n id=${this.inputId}\n type=\"checkbox\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .checked=${this.checked}\n .indeterminate=${this.indeterminate}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n @change=${this.handleChange}\n />\n <nord-icon class=\"icon-checked\" name=\"interface-checked-small\"></nord-icon>\n <nord-icon class=\"icon-indeterminate\" name=\"interface-remove-small\"></nord-icon>\n </div>\n <div class=\"n-expand\">${this.renderLabel()} ${this.renderError()}</div>\n </div>\n `\n }\n\n protected handleChange(e: Event): void {\n const target = e.target as HTMLInputElement\n this.checked = target.checked\n super.handleChange(e)\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-checkbox': Checkbox\n }\n}\n"],"names":["Icon","registerIcon","checkedIcon","indeterminateIcon","Checkbox","SizeMixin","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","indeterminate","checked","formValue","value","undefined","render","html","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","renderLabel","renderError","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"~~i8BAAe~~,2IAGb,mEAFmB,~~k4ECgBrBA~~,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAeH,IAAMC,EAAN,cAAuBC,EAAUC,EAAoBC,EAAWC,EAAeC,OAA/E,WAAAC,uBAU+BC,KAAaC,eAAG,EAKhBD,KAAOE,SAAY,~~CAkChE~~,~~CA9CC~~,aAAuBC,GACrB,OAAOH,KAAKE,QAAUF,KAAKI,OAAS,UAAOC,CAC5C,CAYD,MAAAC,GACE,OAAOC,CAAI,6DAIDC,EAAIR,KAAKS,qCAENT,KAAKU,kCAEHC,EAAUX,KAAKY,kBACbZ,KAAKI,oBACHJ,KAAKE,4BACCF,KAAKC,6BACVD,KAAKa,wBACLb,KAAKc,+BACEH,EAAUX,KAAKe,oCACnBJ,EAAUX,KAAKgB,2BACpBhB,KAAKiB,wMAKKjB,KAAKkB,iBAAiBlB,KAAKmB,~~2BAGxD~~,CAES,~~YAAAF~~,~~CAAaG~~,GACrB,MAAMC,EAASD,EAAEC,~~OACjBrB~~,KAAKE,~~QAAUmB~~,~~EAAOnB~~,~~QACtBoB~~,~~MAAML~~,~~aAAaG~~,EACpB,~~GA/CM3B~~,~~EAAM8B~~,OAAG,CAACC,EAAgBC,EAAgBC,GASLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,~~WAAgCtC~~,~~EAAAuC~~,UAAA,qBAAA,GAKrBL,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,~~WAAmCtC~~,~~EAAAuC~~,UAAA,eAAA,~~GAfjDvC~~,~~EAAQkC~~,EAAA,CAD5BM,EAAc,~~kBACMxC~~,SAAAA"}
1	+ {"version":3,"file":"Checkbox.js","sources":["../../icons/lib/assets/interface-remove-small.js","../src/checkbox/Checkbox.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m20 8.49976v3.00004h-20v-3.00004z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-remove-small\";\nexport const tags =\n \"nordicon interface remove small delete erase minimize line\";\n","import * as checkedIcon from '@nordhealth/icons/lib/assets/interface-checked-small.js'\nimport * as indeterminateIcon from '@nordhealth/icons/lib/assets/interface-remove-small.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport formFieldStyle from '../common/styles/FormField.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Checkbox.css'\n\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(indeterminateIcon)\n\n/*\n Checkboxes allow user to choose one or more options from a limited set of options.\n * If you have more than 10 options, please use Select component instead.\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 \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-checkbox')\nexport default class Checkbox extends SizeMixin(FormAssociatedMixin(InputMixin(FocusableMixin(LitElement)))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.checked ? this.value \|\| 'on' : undefined\n }\n\n /\n Controls whether the checkbox is in an indeterminate state.\n /\n @property({ reflect: true, type: Boolean }) indeterminate = false\n\n /\n Controls whether the checkbox is checked or not.\n */\n @property({ reflect: true, type: Boolean }) checked: boolean = false\n\n render() {\n return html`\n <div class=\"n-flex\">\n <div class=\"n-input-container\">\n <input\n ${ref(this.focusableRef)}\n class=\"n-input\"\n id=${this.inputId}\n type=\"checkbox\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .checked=${this.checked}\n .indeterminate=${this.indeterminate}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n @change=${this.handleChange}\n />\n <nord-icon class=\"icon-checked\" name=\"interface-checked-small\"></nord-icon>\n <nord-icon class=\"icon-indeterminate\" name=\"interface-remove-small\"></nord-icon>\n </div>\n <div class=\"n-expand\">${this.renderLabel()} ${this.isHintBelow ? nothing : this.renderError()}</div>\n </div>\n ${this.isHintBelow ? this.renderError() : nothing}\n ${this.isHintBelow ? this.renderHint() : nothing}\n `\n }\n\n protected handleChange(e: Event): void {\n const target = e.target as HTMLInputElement\n this.checked = target.checked\n super.handleChange(e)\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-checkbox': Checkbox\n }\n}\n"],"names":["Icon","registerIcon","checkedIcon","indeterminateIcon","Checkbox","SizeMixin","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","indeterminate","checked","formValue","value","undefined","render","html","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","renderLabel","isHintBelow","nothing","renderError","renderHint","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"88BAAe,2IAGb,mEAFmB,o8ECgBrBA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAeH,IAAMC,EAAN,cAAuBC,EAAUC,EAAoBC,EAAWC,EAAeC,OAA/E,WAAAC,uBAU+BC,KAAaC,eAAG,EAKhBD,KAAOE,SAAY,CAoChE,CAhDC,aAAuBC,GACrB,OAAOH,KAAKE,QAAUF,KAAKI,OAAS,UAAOC,CAC5C,CAYD,MAAAC,GACE,OAAOC,CAAI,6DAIDC,EAAIR,KAAKS,qCAENT,KAAKU,kCAEHC,EAAUX,KAAKY,kBACbZ,KAAKI,oBACHJ,KAAKE,4BACCF,KAAKC,6BACVD,KAAKa,wBACLb,KAAKc,+BACEH,EAAUX,KAAKe,oCACnBJ,EAAUX,KAAKgB,2BACpBhB,KAAKiB,wMAKKjB,KAAKkB,iBAAiBlB,KAAKmB,YAAcC,EAAUpB,KAAKqB,4BAEhFrB,KAAKmB,YAAcnB,KAAKqB,cAAgBD,KACxCpB,KAAKmB,YAAcnB,KAAKsB,aAAeF,GAE5C,CAES,YAAAH,CAAaM,GACrB,MAAMC,EAASD,EAAEC,OACjBxB,KAAKE,QAAUsB,EAAOtB,QACtBuB,MAAMR,aAAaM,EACpB,GAjDM9B,EAAMiC,OAAG,CAACC,EAAgBC,EAAgBC,GASLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAgCzC,EAAA0C,UAAA,qBAAA,GAKrBL,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAmCzC,EAAA0C,UAAA,eAAA,GAfjD1C,EAAQqC,EAAA,CAD5BM,EAAc,kBACM3C,SAAAA"}

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

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

package/lib/Fieldset.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as t,html as i}from"lit";import{property as o,customElement as s}from"lit/decorators.js";import{S as n}from"./SlotController-Z6eG7LSZ.js";import{c as l}from"./cond-CI1KbneT.js";import{s as a}from"./Component-DSU3Qp0O.js";import{s as d}from"./FormField--eLuhPue.js";import"./EventController-BBOmvfLa.js";const h=r`fieldset{border:none}.n-label-container{margin-block-end:calc(var(--n-space-s) * 2)}:host([size='s']) .n-label-container{margin-block-end:var(--n-space-s)}.n-hidden{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);block-size:1px;inline-size:1px;white-space:nowrap}`;let p=class extends t{constructor(){super(...arguments),this.errorSlot=new n(this,"error"),this.hintSlot=new n(this,"hint"),this.label="",this.required=!1,this.hideRequired=!1,this.hideLabel=!1,this.size="m"}render(){const{hasError:e}=this;return i`<fieldset aria-invalid="${l(e,"true")}" aria-describedby="${l(e,"error")}" aria-required="${l(this.required,"true")}"><legend class="n-label-container ${this.hideLabel?"n-hidden":""}"><div class="n-label"><slot name="label">${this.label}</slot><span aria-hidden="true" class="n-required" ?hidden="${!this.required||this.hideRequired}">*</span></div><div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div></legend><slot></slot><div class="n-caption n-error" id="error" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div></fieldset>`}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}};p.styles=[a,d,h],e([o({reflect:!0})],p.prototype,"label",void 0),e([o({reflect:!0})],p.prototype,"hint",void 0),e([o({reflect:!0})],p.prototype,"error",void 0),e([o({reflect:!0,type:Boolean})],p.prototype,"required",void 0),e([o({reflect:!0,type:Boolean,attribute:"hide-required"})],p.prototype,"hideRequired",void 0),e([o({reflect:!0,type:Boolean,attribute:"hide-label"})],p.prototype,"hideLabel",void 0),e([o({reflect:!0})],p.prototype,"size",void 0),p=e([s("nord-fieldset")],p);var c=p;export{c as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,LitElement as i,html as r,nothing as o}from"lit";import{property as s,customElement as n}from"lit/decorators.js";import{S as h}from"./SlotController-Z6eG7LSZ.js";import{c as l}from"./cond-CI1KbneT.js";import{s as d}from"./Component-DSU3Qp0O.js";import{s as a}from"./FormField-BFaVzUjk.js";import"./EventController-BBOmvfLa.js";const p=t`fieldset{border:none}.n-label-container{margin-block-end:calc(var(--n-space-s) * 2)}:host([size='s']) .n-label-container{margin-block-end:var(--n-space-s)}.n-hidden{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);block-size:1px;inline-size:1px;white-space:nowrap}`;let c=class extends i{constructor(){super(...arguments),this.errorSlot=new h(this,"error"),this.hintSlot=new h(this,"hint"),this.errorId="error",this.hintId="hint",this.label="",this.hintBelow=!1,this.required=!1,this.hideRequired=!1,this.hideLabel=!1,this.size="m"}render(){const{hasError:e}=this;return r`<fieldset aria-invalid="${l(e,"true")}" aria-describedby="${l(this.getDescribedBy())}" aria-required="${l(this.required,"true")}"><legend class="n-label-container ${this.hideLabel?"n-hidden":""}"><div class="n-label"><slot name="label">${this.label}</slot><span aria-hidden="true" class="n-required" ?hidden="${!this.required||this.hideRequired}">*</span></div>${this.isHintBelow?o:this.renderHint()}</legend><slot></slot><div class="n-caption n-error" id="${this.errorId}" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div>${this.isHintBelow?this.renderHint():o}</fieldset>`}renderHint(){return r`<div class="n-caption n-hint" id="${this.hintId}" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div>`}getDescribedBy(){return this.isHintBelow?this.hasHint&&this.hasError?`${this.errorId} ${this.hintId}`:this.hasError?this.errorId:this.hasHint?this.hintId:void 0:this.hasError?this.errorId:void 0}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}get isHintBelow(){return this.hintBelow}};c.styles=[d,a,p],e([s({reflect:!0})],c.prototype,"label",void 0),e([s({reflect:!0})],c.prototype,"hint",void 0),e([s({reflect:!0,type:Boolean,attribute:"hint-below"})],c.prototype,"hintBelow",void 0),e([s({reflect:!0})],c.prototype,"error",void 0),e([s({reflect:!0,type:Boolean})],c.prototype,"required",void 0),e([s({reflect:!0,type:Boolean,attribute:"hide-required"})],c.prototype,"hideRequired",void 0),e([s({reflect:!0,type:Boolean,attribute:"hide-label"})],c.prototype,"hideLabel",void 0),e([s({reflect:!0})],c.prototype,"size",void 0),c=e([n("nord-fieldset")],c);var b=c;export{b as default};
 //# sourceMappingURL=Fieldset.js.map

package/lib/Fieldset.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Fieldset.js","sources":["../src/fieldset/Fieldset.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { cond } from '../common/directives/cond.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport formFieldStyle from '../common/styles/FormField.css'\nimport style from './Fieldset.css'\n\n/*\n Fieldset is used for grouping sets of input components.\n * It is necessary to use a fieldset with radio and checkbox components.\n * It can also be useful for logically grouping other types of inputs.\n \n @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the fieldset.\n * @slot error - Optional slot that holds error text for the fieldset.\n \n @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-fieldset')\nexport default class Fieldset extends LitElement {\n static styles = [componentStyle, formFieldStyle, style]\n\n private errorSlot = new SlotController(this, 'error')\n private hintSlot = new SlotController(this, 'hint')\n\n /\n Label for the fieldset. Rendered as a `<legend>` element.\n /\n @property({ reflect: true }) label: string = ''\n\n /\n Optional hint text to be displayed with the input. Alternatively use the hint slot.\n /\n @property({ reflect: true }) hint?: string\n\n /\n Optional error to be shown with the fieldset. Alternatively use the error slot.\n /\n @property({ reflect: true }) error?: string\n\n /\n Determines whether the fieldset is required or not.\n * A fieldset marked as required will be announced as such to users of assistive technology.\n * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n /\n @property({ reflect: true, type: Boolean }) required = false\n\n /\n Visually hide the required indicator, but still show\n * required attribute to assistive technologies like screen readers.\n /\n @property({ reflect: true, type: Boolean, attribute: 'hide-required' }) hideRequired = false\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @property({ reflect: true, type: Boolean, attribute: 'hide-label' }) hideLabel = false\n\n /\n The size of the label.\n /\n @property({ reflect: true }) size: 's' \| 'm' = 'm'\n\n render() {\n const { hasError } = this\n\n return html`\n <fieldset\n aria-invalid=${cond(hasError, 'true')}\n aria-describedby=${cond(~~hasError, 'error'~~)}\n aria-required=${cond(this.required, 'true')}\n >\n <legend class=\"n-label-container ${this.hideLabel ? 'n-hidden' : ''}\">\n <div class=\"n-label\">\n <slot name=\"label\">${this.label}</slot\n ><span aria-hidden=\"true\" class=\"n-required\" ?hidden=${!this.required \|\| this.hideRequired}></span>\n </div>\n\n <div class=\"n-caption n-~~hint~~\" ?hidden=${!this.~~hasHint~~}>\n <slot name=\"~~hint~~\">${this.~~hint~~}</slot>\n </div>\n </~~legend~~>\n\n ~~<slot></slot>\~~n\n <div class=\"n-caption n-~~error~~\" id~~=\"error\"~~ ~~role=\"alert\"~~ ?hidden=${!this.~~hasError~~}>\n <slot name=\"~~error~~\">${this.~~error~~}</slot>\n </div>\n ~~</fieldset>\~~n `\n }\n\n protected get hasHint() {\n return Boolean(this.hint) \|\| this.hintSlot.hasContent\n }\n\n protected get hasError() {\n return Boolean(this.error) \|\| this.errorSlot.hasContent\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-fieldset': Fieldset\n }\n}\n"],"names":["Fieldset","LitElement","constructor","this","errorSlot","SlotController","hintSlot","label","required","hideRequired","hideLabel","size","render","hasError","html","cond","hasHint","hint","~~error~~","Boolean","hasContent","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","prototype","type","attribute","customElement"],"mappings":"~~mqBAuBe~~,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAGLC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAQG,SAAG,IAAID,EAAeF,KAAM,~~QAKfA~~,~~KAAKI~~,MAAW,~~GAiBDJ~~,~~KAAQK~~,UAAG,~~EAMiBL~~,~~KAAYM~~,cAAG,~~EAKlBN~~,~~KAASO~~,WAAG,~~EAKpDP~~,~~KAAIQ~~,KAAc,~~GAsChD~~,~~CApCC~~,MAAAC,GACE,MAAMC,SAAEA,~~GAAaV~~,KAErB,~~OAAOW~~,CAAI,2BAEQC,EAAKF,EAAU,8BACXE,~~EAAKF~~,~~EAAU~~,~~4BAClBE~~,~~EAAKZ~~,~~KAAKK~~,SAAU,~~6CAEDL~~,~~KAAKO~~,UAAY,WAAa,+~~CAExCP~~,KAAKI,~~qEAC8BJ~~,KAAKK,~~UAAYL~~,~~KAAKM~~,~~uEAGvCN~~,KAAKa,~~8BACxBb~~,~~KAAKc~~,~~2GAMqCd~~,~~KAAKU~~,~~gCAChDV~~,~~KAAKe,+BAIjC~~,CAED,WAAcF,GACZ,OAAOG,~~QAAQhB~~,~~KAAKc~~,~~OAASd~~,KAAKG,~~SAASc~~,UAC5C,CAED,~~YAAcP~~,GACZ,~~OAAOM~~,~~QAAQhB~~,~~KAAKe~~,~~QAAUf~~,KAAKC,~~UAAUgB~~,UAC9C,~~GA9EMpB~~,~~EAAMqB~~,OAAG,CAACC,EAAgBC,EAAgBC,~~GAQpBC~~,EAAA,CAA5BC,EAAS,CAAEC,SAAS,~~KAA0B3B~~,~~EAAA4B~~,UAAA,aAAA,GAKlBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,~~KAAqB3B~~,~~EAAA4B~~,UAAA,YAAA,~~GAKbH~~,EAAA,CAA5BC,EAAS,CAAEC,SAAS,~~KAAsB3B~~,~~EAAA4B~~,UAAA,aAAA,GAOCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMV,~~WAA2BnB~~,~~EAAA4B~~,UAAA,gBAAA,GAMYH,EAAA,CAAvEC,EAAS,CAAEC,SAAS,EAAME,KAAMV,QAASW,UAAW,~~mBAAuC9B~~,~~EAAA4B~~,UAAA,oBAAA,GAKvBH,EAAA,CAApEC,EAAS,CAAEC,SAAS,EAAME,KAAMV,QAASW,UAAW,~~gBAAiC9B~~,~~EAAA4B~~,UAAA,iBAAA,GAKzDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,~~KAA6B3B~~,~~EAAA4B~~,UAAA,YAAA,~~GA1C~~/~~B5B~~,~~EAAQyB~~,EAAA,CAD5BM,EAAc,~~kBACM/B~~,SAAAA"}
1	+ {"version":3,"file":"Fieldset.js","sources":["../src/fieldset/Fieldset.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { cond } from '../common/directives/cond.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport formFieldStyle from '../common/styles/FormField.css'\nimport style from './Fieldset.css'\n\n/*\n Fieldset is used for grouping sets of input components.\n * It is necessary to use a fieldset with radio and checkbox components.\n * It can also be useful for logically grouping other types of inputs.\n \n @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the fieldset.\n * @slot error - Optional slot that holds error text for the fieldset.\n \n @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-fieldset')\nexport default class Fieldset extends LitElement {\n static styles = [componentStyle, formFieldStyle, style]\n\n private errorSlot = new SlotController(this, 'error')\n private hintSlot = new SlotController(this, 'hint')\n private errorId = 'error'\n private hintId = 'hint'\n\n /\n Label for the fieldset. Rendered as a `<legend>` element.\n /\n @property({ reflect: true }) label: string = ''\n\n /\n Optional hint text to be displayed with the input. Alternatively use the hint slot.\n /\n @property({ reflect: true }) hint?: string\n\n /\n Renders the hint below the grouped controls and any error instead of below the legend.\n /\n @property({ reflect: true, type: Boolean, attribute: 'hint-below' }) hintBelow = false\n\n /\n Optional error to be shown with the fieldset. Alternatively use the error slot.\n /\n @property({ reflect: true }) error?: string\n\n /\n Determines whether the fieldset is required or not.\n * A fieldset marked as required will be announced as such to users of assistive technology.\n * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n /\n @property({ reflect: true, type: Boolean }) required = false\n\n /\n Visually hide the required indicator, but still show\n * required attribute to assistive technologies like screen readers.\n /\n @property({ reflect: true, type: Boolean, attribute: 'hide-required' }) hideRequired = false\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @property({ reflect: true, type: Boolean, attribute: 'hide-label' }) hideLabel = false\n\n /\n The size of the label.\n /\n @property({ reflect: true }) size: 's' \| 'm' = 'm'\n\n render() {\n const { hasError } = this\n\n return html`\n <fieldset\n aria-invalid=${cond(hasError, 'true')}\n aria-describedby=${cond(this.getDescribedBy())}\n aria-required=${cond(this.required, 'true')}\n >\n <legend class=\"n-label-container ${this.hideLabel ? 'n-hidden' : ''}\">\n <div class=\"n-label\">\n <slot name=\"label\">${this.label}</slot\n ><span aria-hidden=\"true\" class=\"n-required\" ?hidden=${!this.required \|\| this.hideRequired}></span>\n </div>\n\n ${this.isHintBelow ? nothing : this.renderHint()}\n </legend>\n\n <slot></slot>\n\n <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n <slot name=\"error\">${this.error}</slot>\n </div>\n ${this.isHintBelow ? this.renderHint() : nothing}\n </fieldset>\n `\n }\n\n private renderHint() {\n return html`\n <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n <slot name=\"hint\">${this.hint}</slot>\n </div>\n `\n }\n\n private getDescribedBy() {\n if (!this.isHintBelow) {\n return this.hasError ? this.errorId : undefined\n }\n\n if (this.hasHint && this.hasError) {\n return `${this.errorId} ${this.hintId}`\n }\n\n if (this.hasError) {\n return this.errorId\n }\n\n if (this.hasHint) {\n return this.hintId\n }\n\n return undefined\n }\n\n protected get hasHint() {\n return Boolean(this.hint) \|\| this.hintSlot.hasContent\n }\n\n protected get hasError() {\n return Boolean(this.error) \|\| this.errorSlot.hasContent\n }\n\n private get isHintBelow() {\n return this.hintBelow\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-fieldset': Fieldset\n }\n}\n"],"names":["Fieldset","LitElement","constructor","this","errorSlot","SlotController","hintSlot","errorId","hintId","label","hintBelow","required","hideRequired","hideLabel","size","render","hasError","html","cond","getDescribedBy","isHintBelow","nothing","renderHint","error","hasHint","hint","undefined","Boolean","hasContent","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","prototype","type","attribute","customElement"],"mappings":"grBAuBe,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAGLC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAQG,SAAG,IAAID,EAAeF,KAAM,QACpCA,KAAOI,QAAG,QACVJ,KAAMK,OAAG,OAKYL,KAAKM,MAAW,GAUwBN,KAASO,WAAG,EAYrCP,KAAQQ,UAAG,EAMiBR,KAAYS,cAAG,EAKlBT,KAASU,WAAG,EAKpDV,KAAIW,KAAc,GAqEhD,CAnEC,MAAAC,GACE,MAAMC,SAAEA,GAAab,KAErB,OAAOc,CAAI,2BAEQC,EAAKF,EAAU,8BACXE,EAAKf,KAAKgB,qCACbD,EAAKf,KAAKQ,SAAU,6CAEDR,KAAKU,UAAY,WAAa,+CAExCV,KAAKM,qEAC8BN,KAAKQ,UAAYR,KAAKS,+BAG9ET,KAAKiB,YAAcC,EAAUlB,KAAKmB,wEAKFnB,KAAKI,mCAAiCJ,KAAKa,gCACxDb,KAAKoB,qBAE1BpB,KAAKiB,YAAcjB,KAAKmB,aAAeD,cAG9C,CAEO,UAAAC,GACN,OAAOL,CAAI,qCAC0Bd,KAAKK,qBAAmBL,KAAKqB,8BAC1CrB,KAAKsB,mBAG9B,CAEO,cAAAN,GACN,OAAKhB,KAAKiB,YAINjB,KAAKqB,SAAWrB,KAAKa,SAChB,GAAGb,KAAKI,WAAWJ,KAAKK,SAG7BL,KAAKa,SACAb,KAAKI,QAGVJ,KAAKqB,QACArB,KAAKK,YADd,EAXSL,KAAKa,SAAWb,KAAKI,aAAUmB,CAgBzC,CAED,WAAcF,GACZ,OAAOG,QAAQxB,KAAKsB,OAAStB,KAAKG,SAASsB,UAC5C,CAED,YAAcZ,GACZ,OAAOW,QAAQxB,KAAKoB,QAAUpB,KAAKC,UAAUwB,UAC9C,CAED,eAAYR,GACV,OAAOjB,KAAKO,SACb,GApHMV,EAAM6B,OAAG,CAACC,EAAgBC,EAAgBC,GAUpBC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0BnC,EAAAoC,UAAA,aAAA,GAKlBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBnC,EAAAoC,UAAA,YAAA,GAK2BH,EAAA,CAApEC,EAAS,CAAEC,SAAS,EAAME,KAAMV,QAASW,UAAW,gBAAiCtC,EAAAoC,UAAA,iBAAA,GAKzDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBnC,EAAAoC,UAAA,aAAA,GAOCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMV,WAA2B3B,EAAAoC,UAAA,gBAAA,GAMYH,EAAA,CAAvEC,EAAS,CAAEC,SAAS,EAAME,KAAMV,QAASW,UAAW,mBAAuCtC,EAAAoC,UAAA,oBAAA,GAKvBH,EAAA,CAApEC,EAAS,CAAEC,SAAS,EAAME,KAAMV,QAASW,UAAW,gBAAiCtC,EAAAoC,UAAA,iBAAA,GAKzDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6BnC,EAAAoC,UAAA,YAAA,GAjD/BpC,EAAQiC,EAAA,CAD5BM,EAAc,kBACMvC,SAAAA"}

package/lib/FormAssociatedMixin-B4Qj-CQN.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{html as e,nothing as r}from"lit";import{property as i}from"lit/decorators.js";import{F as o}from"./FormDataController-OUt5L5uC.js";import{S as s}from"./SlotController-Z6eG7LSZ.js";import{N as n}from"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";function h(h){class l extends h{constructor(){super(...arguments),this.labelSlot=new s(this,"label"),this.errorSlot=new s(this,"error"),this.hintSlot=new s(this,"hint"),this.formData=new o(this,{value:()=>this.formValue}),this.inputId="input",this.errorId="error",this.hintId="hint",this.label="",this.hintBelow=!1,this.hideLabel=!1,this.required=!1,this.hideRequired=!1}get formValue(){return this.value}handleInput(t){t.stopPropagation();const e=t.target;this.value=e.value,this.dispatchEvent(new n("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new n("change"))}renderLabel(t){const i=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot><span ?hidden="${!this.required\|\|this.hideRequired}" aria-hidden="true" class="n-required">*</span> ${t}</label>`;return this.hideLabel?e`<nord-visually-hidden>${i} ${this.isHintBelow?r:this.renderHint()}</nord-visually-hidden>`:e`<div class="n-label-container">${i} ${this.isHintBelow?r:this.renderHint()}</div>`}renderHint(){return e`<div class="n-caption n-hint" id="${this.hintId}" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div>`}renderError(){return e`<div class="n-caption n-error" id="${this.errorId}" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div>`}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?this.isHintBelow?`${this.errorId} ${this.hintId}`:`${this.hintId} ${this.errorId}`:t?this.hintId:e?this.errorId:void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return Boolean(this.hint)\|\|this.hintSlot.hasContent}get hasError(){return Boolean(this.error)\|\|this.errorSlot.hasContent}get isHintBelow(){return this.hintBelow}}return t([i({reflect:!0})],l.prototype,"label",void 0),t([i({reflect:!0})],l.prototype,"hint",void 0),t([i({reflect:!0,type:Boolean,attribute:"hint-below"})],l.prototype,"hintBelow",void 0),t([i({reflect:!0,type:Boolean,attribute:"hide-label"})],l.prototype,"hideLabel",void 0),t([i({reflect:!0})],l.prototype,"placeholder",void 0),t([i({reflect:!0})],l.prototype,"error",void 0),t([i({reflect:!0,type:Boolean})],l.prototype,"required",void 0),t([i({reflect:!0,type:Boolean,attribute:"hide-required"})],l.prototype,"hideRequired",void 0),l}export{h as F};
2	+ //# sourceMappingURL=FormAssociatedMixin-B4Qj-CQN.js.map

package/lib/FormAssociatedMixin-B4Qj-CQN.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FormAssociatedMixin-B4Qj-CQN.js","sources":["../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import type { LitElement, TemplateResult } from 'lit'\nimport type { InputMixinInterface } from './InputMixin.js'\nimport { html, nothing } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { FormDataController } from '../controllers/FormDataController.js'\nimport { SlotController } from '../controllers/SlotController.js'\nimport { NordEvent } from '../events.js'\nimport '../../visually-hidden/VisuallyHidden.js'\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n label: string\n required: boolean\n hideRequired: boolean\n hint?: string\n hintBelow: boolean\n hideLabel: boolean\n placeholder?: string\n error?: string\n\n protected inputId: string\n protected errorId: string\n protected hintId: string\n protected labelSlot: SlotController\n protected hintSlot: SlotController\n protected errorSlot: SlotController\n protected formData: FormDataController\n\n protected get formValue(): string | undefined\n protected get hasError(): boolean\n protected get hasHint(): boolean\n protected get isHintBelow(): boolean\n\n protected handleChange(e: Event): void\n protected handleInput(e: Event): void\n protected renderLabel(additionalContent?: TemplateResult): TemplateResult\n protected renderHint(): TemplateResult\n protected renderError(): TemplateResult\n protected getDescribedBy(): string | undefined\n protected getInvalid(): 'true' | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n /**\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n class FormAssociatedElement extends superClass {\n protected labelSlot = new SlotController(this, 'label')\n protected errorSlot = new SlotController(this, 'error')\n protected hintSlot = new SlotController(this, 'hint')\n protected formData = new FormDataController(this, { value: () => this.formValue })\n\n protected get formValue() {\n return this.value\n }\n\n protected inputId = 'input'\n protected errorId = 'error'\n protected hintId = 'hint'\n\n /**\n * Label for the input.\n */\n @property({ reflect: true }) label: string = ''\n\n /**\n * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n */\n @property({ reflect: true }) hint?: string\n\n /**\n * Renders the hint below the input and any error instead of below the label.\n */\n @property({ reflect: true, type: Boolean, attribute: 'hint-below' }) hintBelow = false\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @property({ reflect: true, type: Boolean, attribute: 'hide-label' }) hideLabel = false\n\n /**\n * Placeholder text to display within the input.\n */\n @property({ reflect: true }) placeholder?: string\n\n /**\n * Optional error to be shown with the input. Alternatively use the error slot.\n */\n @property({ reflect: true }) error?: string\n\n /**\n * Determines whether the input is required or not.\n * An input marked as required will be announced as such to users of assistive technology.\n * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n */\n @property({ reflect: true, type: Boolean }) required = false\n\n /**\n * Visually hide the required indicator, but still show\n * required attribute to assistive technologies like screen readers.\n */\n @property({ reflect: true, type: Boolean, attribute: 'hide-required' }) hideRequired = false\n\n protected handleInput(e: Event) {\n e.stopPropagation()\n const target = e.target as NativeInputElement\n this.value = target.value\n\n /**\n * Fired as the user types into the input.\n */\n this.dispatchEvent(new NordEvent('input'))\n }\n\n protected handleChange(e: Event) {\n e.stopPropagation()\n\n /**\n * Fired whenever the input's value is changed via user interaction.\n */\n this.dispatchEvent(new NordEvent('change'))\n }\n\n protected renderLabel(additionalContent?: TemplateResult) {\n const label = html`\n <label for=${this.inputId}>\n <slot name=\"label\">${this.label}</slot\n ><span ?hidden=${!this.required || this.hideRequired} aria-hidden=\"true\" class=\"n-required\">*</span>\n ${additionalContent}\n </label>\n `\n\n if (this.hideLabel) {\n return html`\n <nord-visually-hidden>\n ${label}\n ${this.isHintBelow ? nothing : this.renderHint()}\n </nord-visually-hidden>\n `\n }\n\n return html`\n <div class=\"n-label-container\">\n ${label}\n ${this.isHintBelow ? nothing : this.renderHint()}\n </div>\n `\n }\n\n protected renderHint() {\n return html`\n <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n <slot name=\"hint\">${this.hint}</slot>\n </div>\n `\n }\n\n protected renderError() {\n return html`\n <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n <slot name=\"error\">${this.error}</slot>\n </div>\n `\n }\n\n protected getDescribedBy() {\n const { hasHint, hasError } = this\n\n if (hasHint && hasError) {\n if (this.isHintBelow) {\n return `${this.errorId} ${this.hintId}`\n }\n return `${this.hintId} ${this.errorId}`\n }\n if (hasHint) {\n return this.hintId\n }\n if (hasError) {\n return this.errorId\n }\n\n return undefined\n }\n\n protected getInvalid() {\n return this.hasError ? 'true' : undefined\n }\n\n protected get hasHint() {\n return Boolean(this.hint) || this.hintSlot.hasContent\n }\n\n protected get hasError() {\n return Boolean(this.error) || this.errorSlot.hasContent\n }\n\n protected get isHintBelow() {\n return this.hintBelow\n }\n }\n\n return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormAssociatedMixin","superClass","FormAssociatedElement","constructor","this","labelSlot","SlotController","errorSlot","hintSlot","formData","FormDataController","value","formValue","inputId","errorId","hintId","label","hintBelow","hideLabel","required","hideRequired","handleInput","e","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","additionalContent","html","isHintBelow","nothing","renderHint","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","reflect","prototype","type","attribute"],"mappings":"4SA4CM,SAAUA,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApC,WAAAE,uBACYC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAASG,UAAG,IAAID,EAAeF,KAAM,SACrCA,KAAQI,SAAG,IAAIF,EAAeF,KAAM,QACpCA,KAAAK,SAAW,IAAIC,EAAmBN,KAAM,CAAEO,MAAO,IAAMP,KAAKQ,YAM5DR,KAAOS,QAAG,QACVT,KAAOU,QAAG,QACVV,KAAMW,OAAG,OAKUX,KAAKY,MAAW,GAUwBZ,KAASa,WAAG,EAKZb,KAASc,WAAG,EAiBrCd,KAAQe,UAAG,EAMiBf,KAAYgB,cAAG,CAkGxF,CAnJC,aAAcR,GACZ,OAAOR,KAAKO,KACb,CAiDS,WAAAU,CAAYC,GACpBA,EAAEC,kBACF,MAAMC,EAASF,EAAEE,OACjBpB,KAAKO,MAAQa,EAAOb,MAKpBP,KAAKqB,cAAc,IAAIC,EAAU,SAClC,CAES,YAAAC,CAAaL,GACrBA,EAAEC,kBAKFnB,KAAKqB,cAAc,IAAIC,EAAU,UAClC,CAES,WAAAE,CAAYC,GACpB,MAAMb,EAAQc,CAAI,eACH1B,KAAKS,+BACKT,KAAKY,+BACRZ,KAAKe,UAAYf,KAAKgB,gEACtCS,YAIN,OAAIzB,KAAKc,UACAY,CAAI,yBAELd,KACAZ,KAAK2B,YAAcC,EAAU5B,KAAK6B,sCAKnCH,CAAI,kCAELd,KACAZ,KAAK2B,YAAcC,EAAU5B,KAAK6B,oBAGzC,CAES,UAAAA,GACR,OAAOH,CAAI,qCAC0B1B,KAAKW,qBAAmBX,KAAK8B,8BAC1C9B,KAAK+B,mBAG9B,CAES,WAAAC,GACR,OAAON,CAAI,sCAC2B1B,KAAKU,mCAAiCV,KAAKiC,gCACxDjC,KAAKkC,oBAG/B,CAES,cAAAC,GACR,MAAML,QAAEA,EAAOG,SAAEA,GAAajC,KAE9B,OAAI8B,GAAWG,EACTjC,KAAK2B,YACA,GAAG3B,KAAKU,WAAWV,KAAKW,SAE1B,GAAGX,KAAKW,UAAUX,KAAKU,UAE5BoB,EACK9B,KAAKW,OAEVsB,EACKjC,KAAKU,aADd,CAKD,CAES,UAAA0B,GACR,OAAOpC,KAAKiC,SAAW,YAASI,CACjC,CAED,WAAcP,GACZ,OAAOQ,QAAQtC,KAAK+B,OAAS/B,KAAKI,SAASmC,UAC5C,CAED,YAAcN,GACZ,OAAOK,QAAQtC,KAAKkC,QAAUlC,KAAKG,UAAUoC,UAC9C,CAED,eAAcZ,GACZ,OAAO3B,KAAKa,SACb,EAGH,OA1I+B2B,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0B5C,EAAA6C,UAAA,aAAA,GAKlBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqB5C,EAAA6C,UAAA,YAAA,GAK2BH,EAAA,CAApEC,EAAS,CAAEC,SAAS,EAAME,KAAMN,QAASO,UAAW,gBAAiC/C,EAAA6C,UAAA,iBAAA,GAKjBH,EAAA,CAApEC,EAAS,CAAEC,SAAS,EAAME,KAAMN,QAASO,UAAW,gBAAiC/C,EAAA6C,UAAA,iBAAA,GAKzDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA4B5C,EAAA6C,UAAA,mBAAA,GAKpBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsB5C,EAAA6C,UAAA,aAAA,GAOCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMN,WAA2BxC,EAAA6C,UAAA,gBAAA,GAMYH,EAAA,CAAvEC,EAAS,CAAEC,SAAS,EAAME,KAAMN,QAASO,UAAW,mBAAuC/C,EAAA6C,UAAA,oBAAA,GAoGvF7C,CACT"}

package/lib/FormField-BFaVzUjk.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{css as n}from"lit";const t=n`:host{--_n-label-color:var(--n-label-color, var(--n-color-text))}.n-caption,::slotted(.n-caption){font-size:var(--n-font-size-s);line-height:var(--n-line-height-caption)}.n-label-container{margin-block-end:var(--n-space-s);display:inline-block}.n-label,::slotted(label),label{display:block!important;color:var(--_n-label-color);font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading);margin:0!important}.n-hint{padding-block-start:var(--n-space-xs);color:var(--n-color-text-weaker)}:host([hint-below]) .n-hint{margin-block-start:var(--n-space-s);padding-block-start:0}:host([hint-below]) .n-error:not([hidden])+.n-hint{margin-block-start:var(--n-space-xs)}:host([size='s']) ::slotted(label),:host([size='s']) :is(label,.n-label){font-size:var(--n-font-size-s)}.n-error{margin-block-start:var(--n-space-s);color:var(--n-color-text-error)}.n-required{color:var(--n-color-status-danger);margin-inline-start:var(--n-space-xs)}`;export{t as s};
2	+ //# sourceMappingURL=FormField-BFaVzUjk.js.map

package/lib/FormField-BFaVzUjk.js.map ADDED Viewed

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

package/lib/Input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{isServer as n,css as e,html as o,nothing as i,LitElement as r}from"lit";import{query as s,property as a,customElement as d}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{ifDefined as p}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{styleMap as u}from"lit/directives/style-map.js";import{D as m}from"./DirectionController-ChvNGESZ.js";import{c as h}from"./cond-CI1KbneT.js";import{N as v}from"./events-Bv6wNHwJ.js";import{A as b}from"./AutocompleteMixin-D8eiOxvO.js";import{F as f}from"./FocusableMixin-BlQLNPdJ.js";import{F as g}from"./FormAssociatedMixin-DFL7yabe.js";import{I as w}from"./InputMixin-LetXsCyv.js";import{R as y,s as z}from"./TextField-BdEdZ0_b.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{T as j}from"./TextSelectableMixin-Cfv__lHS.js";import{s as $}from"./Component-DSU3Qp0O.js";import{s as S}from"./FormField--eLuhPue.js";import _ from"./Icon.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./IconManager.js";var k=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z" fill="currentColor"/></svg>',tags:"nordicon navigation menu find search magnifying glass",title:"navigation-search"});class F{constructor(t,e){this.target=e,this.hadFirstUpdate=!1,t.addController(this),n||(this.observer=new ResizeObserver((([n])=>{const[e]=n.borderBoxSize;this.borderBoxSize=e,t.requestUpdate()})))}get inlineSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.inlineSize}get blockSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.blockSize}hostUpdated(){!this.hadFirstUpdate&&this.observer&&(this.observer.observe(this.target()),this.hadFirstUpdate=!0)}hostConnected(){this.hadFirstUpdate&&this.observer&&this.observer.observe(this.target())}hostDisconnected(){this.observer&&this.observer.disconnect()}}const C=e`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{appearance:none}.n-input-container{font-size:var(--n-font-size-m);display:grid;grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4;padding-inline-start:var(--_n-input-start-inline-size,var(--_n-input-padding-inline));padding-inline-end:var(--_n-input-end-inline-size,var(--_n-input-padding-inline))}slot[name=end],slot[name=start]{pointer-events:none;display:flex;align-items:center;color:var(--n-color-icon)}:host([disabled]) slot:is([name=start],[name=end]){color:var(--n-color-text-weakest)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(*){font-size:var(--_n-input-font-size)}[name=start]::slotted(*),nord-icon{margin-inline-start:var(--_n-input-padding-inline)!important;margin-inline-end:calc(var(--_n-input-padding-inline)/ 2)!important}[name=end]::slotted(*){margin-inline-start:calc(var(--_n-input-padding-inline)/ 2)!important;margin-inline-end:var(--_n-input-padding-inline)!important}[name=start]::slotted(:is(nord-button, nord-dropdown)){margin-inline-start:0!important}[name=end]::slotted(:is(nord-button, nord-dropdown)){margin-inline-end:0!important}nord-icon{--_n-input-icon-color:var(--n-input-icon-color, var(--n-color-icon));color:var(--_n-input-icon-color)}::slotted(:is(nord-button:not([disabled]), nord-dropdown)){pointer-events:auto;position:relative}::slotted(nord-button:not([disabled],:focus)),::slotted(nord-dropdown:not(:focus-within)){--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-color:var(--n-color-text-weaker);-webkit-text-fill-color:var(--n-button-color);opacity:.8}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button:not([disabled]), nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)){--n-button-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color, var(--n-color-status-danger))}:host([size='s']) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s) * 1.4)}:host{--_n-input-icon-size:var(--n-size-icon-s)}:host([size='s']){--_n-input-icon-size:var(--n-size-icon-xs)}:host([size='l']){--_n-input-icon-size:var(--n-size-icon-m)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-input-icon-size)}:host([type=unit]) :is(.n-input-container,.n-input){--_n-input-text-align:var(--n-input-text-align, end);font-family:var(--n-font-family-code)!important}:host([type=button]) :is(.n-input-container,.n-input){cursor:pointer}`;_.registerIcon(k);const I=t=>t?`${t}px`:void 0,B={number:"numeric",email:"email",tel:"tel",url:"url",search:"search"};let M=class extends(x(g(b(y(j(w(f(r)))))))){constructor(){super(...arguments),this.startObserver=new F(this,(()=>this.startSlot)),this.endObserver=new F(this,(()=>this.endSlot)),this.direction=new m(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.inputmode=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,o=t.selectionStart,i=e.slice(0,o),r=e.slice(o,e.length),s=i.replace(n,""),a=s+r.replace(n,""),d=s.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const n="number"===this.type,e=this.inputmode||B[this.type];return o`${this.renderLabel()}<div class="${l({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${u({"--_n-input-start-inline-size":I(this.startObserver.inlineSize),"--_n-input-end-inline-size":I(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?o`<nord-icon name="navigation-search"></nord-icon>`:i}</slot><input ${c(this.textSelectableRef)} ${c(this.focusableRef)} id="${this.inputId}" class="n-input" type="${n||"unit"===this.type?"text":this.type}" inputmode="${p(e)}" pattern="${h(n,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${p(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${p(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" @select="${this.handleSelect}" aria-describedby="${p(this.getDescribedBy())}" aria-invalid="${p(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()}`}handleKeydown(t){if("Enter"!==t.key)return;const{form:n}=this;if(n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}handleSelect(t){t.stopPropagation(),this.dispatchEvent(new v("select"))}};M.styles=[$,S,z,C],t([s("slot[name='start']")],M.prototype,"startSlot",void 0),t([s("slot[name='end']")],M.prototype,"endSlot",void 0),t([a({reflect:!0})],M.prototype,"type",void 0),t([a({reflect:!0,type:Boolean})],M.prototype,"expand",void 0),t([a({reflect:!0,attribute:"disallow-pattern"})],M.prototype,"disallowPattern",void 0),t([a({reflect:!0})],M.prototype,"inputmode",void 0),M=t([d("nord-input")],M);var E=M;export{E as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{isServer as n,css as e,html as o,nothing as i,LitElement as r}from"lit";import{query as s,property as a,customElement as d}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{ifDefined as p}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{styleMap as u}from"lit/directives/style-map.js";import{D as m}from"./DirectionController-ChvNGESZ.js";import{c as h}from"./cond-CI1KbneT.js";import{N as v}from"./events-Bv6wNHwJ.js";import{A as b}from"./AutocompleteMixin-D8eiOxvO.js";import{F as f}from"./FocusableMixin-BlQLNPdJ.js";import{F as g}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as w}from"./InputMixin-LetXsCyv.js";import{R as y,s as z}from"./TextField-BdEdZ0_b.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{T as j}from"./TextSelectableMixin-Cfv__lHS.js";import{s as $}from"./Component-DSU3Qp0O.js";import{s as S}from"./FormField-BFaVzUjk.js";import _ from"./Icon.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./IconManager.js";var k=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z" fill="currentColor"/></svg>',tags:"nordicon navigation menu find search magnifying glass",title:"navigation-search"});class F{constructor(t,e){this.target=e,this.hadFirstUpdate=!1,t.addController(this),n||(this.observer=new ResizeObserver((([n])=>{const[e]=n.borderBoxSize;this.borderBoxSize=e,t.requestUpdate()})))}get inlineSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.inlineSize}get blockSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.blockSize}hostUpdated(){!this.hadFirstUpdate&&this.observer&&(this.observer.observe(this.target()),this.hadFirstUpdate=!0)}hostConnected(){this.hadFirstUpdate&&this.observer&&this.observer.observe(this.target())}hostDisconnected(){this.observer&&this.observer.disconnect()}}const C=e`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{appearance:none}.n-input-container{font-size:var(--n-font-size-m);display:grid;grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4;padding-inline-start:var(--_n-input-start-inline-size,var(--_n-input-padding-inline));padding-inline-end:var(--_n-input-end-inline-size,var(--_n-input-padding-inline))}slot[name=end],slot[name=start]{pointer-events:none;display:flex;align-items:center;color:var(--n-color-icon)}:host([disabled]) slot:is([name=start],[name=end]){color:var(--n-color-text-weakest)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(*){font-size:var(--_n-input-font-size)}[name=start]::slotted(*),nord-icon{margin-inline-start:var(--_n-input-padding-inline)!important;margin-inline-end:calc(var(--_n-input-padding-inline)/ 2)!important}[name=end]::slotted(*){margin-inline-start:calc(var(--_n-input-padding-inline)/ 2)!important;margin-inline-end:var(--_n-input-padding-inline)!important}[name=start]::slotted(:is(nord-button, nord-dropdown)){margin-inline-start:0!important}[name=end]::slotted(:is(nord-button, nord-dropdown)){margin-inline-end:0!important}nord-icon{--_n-input-icon-color:var(--n-input-icon-color, var(--n-color-icon));color:var(--_n-input-icon-color)}::slotted(:is(nord-button:not([disabled]), nord-dropdown)){pointer-events:auto;position:relative}::slotted(nord-button:not([disabled],:focus)),::slotted(nord-dropdown:not(:focus-within)){--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-color:var(--n-color-text-weaker);-webkit-text-fill-color:var(--n-button-color);opacity:.8}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button:not([disabled]), nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)){--n-button-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color, var(--n-color-status-danger))}:host([size='s']) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s) * 1.4)}:host{--_n-input-icon-size:var(--n-size-icon-s)}:host([size='s']){--_n-input-icon-size:var(--n-size-icon-xs)}:host([size='l']){--_n-input-icon-size:var(--n-size-icon-m)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-input-icon-size)}:host([type=unit]) :is(.n-input-container,.n-input){--_n-input-text-align:var(--n-input-text-align, end);font-family:var(--n-font-family-code)!important}:host([type=button]) :is(.n-input-container,.n-input){cursor:pointer}`;_.registerIcon(k);const I=t=>t?`${t}px`:void 0,B={number:"numeric",email:"email",tel:"tel",url:"url",search:"search"};let M=class extends(x(g(b(y(j(w(f(r)))))))){constructor(){super(...arguments),this.startObserver=new F(this,(()=>this.startSlot)),this.endObserver=new F(this,(()=>this.endSlot)),this.direction=new m(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.inputmode=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,o=t.selectionStart,i=e.slice(0,o),r=e.slice(o,e.length),s=i.replace(n,""),a=s+r.replace(n,""),d=s.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const n="number"===this.type,e=this.inputmode||B[this.type];return o`${this.renderLabel()}<div class="${l({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${u({"--_n-input-start-inline-size":I(this.startObserver.inlineSize),"--_n-input-end-inline-size":I(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?o`<nord-icon name="navigation-search"></nord-icon>`:i}</slot><input ${c(this.textSelectableRef)} ${c(this.focusableRef)} id="${this.inputId}" class="n-input" type="${n||"unit"===this.type?"text":this.type}" inputmode="${p(e)}" pattern="${h(n,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${p(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${p(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" @select="${this.handleSelect}" aria-describedby="${p(this.getDescribedBy())}" aria-invalid="${p(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()} ${this.isHintBelow?this.renderHint():i}`}handleKeydown(t){if("Enter"!==t.key)return;const{form:n}=this;if(n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}handleSelect(t){t.stopPropagation(),this.dispatchEvent(new v("select"))}};M.styles=[$,S,z,C],t([s("slot[name='start']")],M.prototype,"startSlot",void 0),t([s("slot[name='end']")],M.prototype,"endSlot",void 0),t([a({reflect:!0})],M.prototype,"type",void 0),t([a({reflect:!0,type:Boolean})],M.prototype,"expand",void 0),t([a({reflect:!0,attribute:"disallow-pattern"})],M.prototype,"disallowPattern",void 0),t([a({reflect:!0})],M.prototype,"inputmode",void 0),M=t([d("nord-input")],M);var E=M;export{E as default};
 //# sourceMappingURL=Input.js.map