@nordhealth/components 1.0.0-beta.21 → 1.0.0-beta.22

package/lib/DatePicker.js

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

package/lib/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../../icons/lib/assets/interface-close-small.js","../src/date-picker/DatePicker.ts","../src/common/input.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 21h126v112H7zM35 7v28m70-28v28M7 63h126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z\"/></svg>'\nexport const title = \"interface-close-small\"\nexport const tags = \"nordicon interface close remove small cross delete erase symbol\"\n","import { LitElement, html, nothing, PropertyValues } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport type Button from \"../button/Button.js\"\n\nimport \"../calendar/Calendar.js\"\nimport { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DateDisabledPredicate } from \"../calendar/Calendar.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\nimport localization, { DatePickerLocalizedText } from \"./date-localization.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst DISALLOWED_CHARACTERS = /[^0-9./-]+/g\nconst isDateDisabled = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status ready\n * @category form\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(`.n-date-toggle`, true) private toggleButton!: Button\n  @query(`.n-date-close`, true) private closeButton!: HTMLButtonElement\n  @query(`nord-calendar`, true) private calendar!: Calendar\n  @query(`[role=\"dialog\"]`, true) private dialog!: HTMLElement\n\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this.calendar && node !== this.toggleButton,\n  })\n\n  private swipe = new SwipeController(this, {\n    target: () => this.dialog,\n    matchesGesture: isDownwardsSwipe,\n    onSwipeEnd: () => this.hide(false),\n  })\n\n  /**\n   * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n   * these are used to format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong!: Intl.DateTimeFormat\n\n  @state() private open = false\n\n  /**\n   * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = \"\"\n\n  get valueAsDate(): Date | undefined {\n    return parseISODate(this.value)\n  }\n\n  /**\n   * Get/set the value of the picker as a Date object.\n   */\n  set valueAsDate(date: Date | undefined) {\n    this.value = date ? printISODate(date) : \"\"\n  }\n\n  get valueAsNumber(): number {\n    return this.valueAsDate?.getTime() ?? NaN\n  }\n\n  /**\n   * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n   */\n  set valueAsNumber(date: number) {\n    this.value = date ? printISODate(new Date(date)) : \"\"\n  }\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @property() min: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @property() max: string = \"\"\n\n  /**\n   * Forces the opening direction of the calendar modal to be always left or right.\n   * This setting can be useful when the input is smaller than the opening date picker\n   * would be as by default the picker always opens towards right.\n   */\n  @property() direction: \"left\" | \"right\" = \"right\"\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @property({ attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n  /**\n   * Button labels, day names, month names, etc, used for localization.\n   * Default is English.\n   */\n  @property({ attribute: false }) localization: DatePickerLocalizedText = localization\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   * Default is IS0-8601 parsing and formatting.\n   */\n  @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @property({ attribute: false }) isDateDisabled: DateDisabledPredicate = isDateDisabled\n\n  /**\n   * Show the calendar modal, moving focus to the calendar inside.\n   */\n  show() {\n    this.open = true\n    /**\n     * Dispatched when the calendar is toggled open.\n     */\n    this.dispatchEvent(new NordEvent(\"open\"))\n\n    // we should only focus once the calendar is visible after render is complete\n    this.updateComplete.then(() => this.calendar.focus({ target: \"month\" }))\n  }\n\n  /**\n   * Hide the calendar modal.\n   * @param {boolean} moveFocusToButton controls whether focus should be returned to the date picker's button.\n   */\n  hide(moveFocusToButton = true) {\n    this.open = false\n    /**\n     * Dispatched when the calendar is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.toggleButton.focus()\n    }\n  }\n\n  protected willUpdate(_changedProperties: PropertyValues<this>) {\n    if (_changedProperties.has(\"localization\")) {\n      this.createDateFormatters()\n    }\n  }\n\n  private createDateFormatters() {\n    this.dateFormatLong = new Intl.DateTimeFormat(this.localization.locale, {\n      day: \"numeric\",\n      month: \"long\",\n      year: \"numeric\",\n    })\n  }\n\n  render() {\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <input\n          class=\"n-input\"\n          name=${this.name}\n          .value=${formattedDate}\n          placeholder=${ifDefined(this.placeholder)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-autocomplete=\"none\"\n          @input=${this.handleInputChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          autocomplete=\"off\"\n          ${ref(this.focusableRef)}\n          aria-invalid=${ifDefined(this.error ? \"true\" : undefined)}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n        />\n        <button class=\"n-date-toggle\" @click=${this.toggleOpen} ?disabled=${this.disabled} type=\"button\">\n          <nord-icon name=\"interface-calendar\" size=\"s\"></nord-icon>\n          <nord-visually-hidden>\n            ${localization.buttonLabel}\n            ${valueAsDate\n              ? html`<span>, ${localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)} </span>`\n              : nothing}\n          </nord-visually-hidden>\n        </button>\n      </div>\n\n      ${this.renderError()}\n\n      <div\n        class=${classMap({\n          \"is-left\": this.direction === \"left\",\n          \"is-active\": this.open,\n        })}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n        aria-labelledby=\"dialog-header\"\n      >\n        <div class=\"n-date-dialog-content\">\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n          <div class=\"n-date-mobile\">\n            <div class=\"n-date-mobile-heading\" id=\"dialog-header\">${this.localization.calendarHeading}</div>\n            <button class=\"n-date-close\" @click=${this.hide} type=\"button\">\n              <nord-icon color=\"var(--n-color-icon)\" name=\"interface-close-small\" size=\"xs\"></nord-icon>\n              <nord-visually-hidden>${this.localization.closeLabel}</nord-visually-hidden>\n            </button>\n          </div>\n          <nord-calendar\n            value=${this.value}\n            min=${this.min}\n            max=${this.max}\n            .localization=${this.localization}\n            .firstDayOfWeek=${this.firstDayOfWeek}\n            .isDateDisabled=${this.isDateDisabled}\n            @change=${this.handleDaySelect}\n          ></nord-calendar>\n\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n        </div>\n      </div>\n    `\n  }\n\n  private focusFirst() {\n    this.closeButton.focus()\n  }\n\n  private focusLast() {\n    this.calendar.focus({ target: \"day\" })\n  }\n\n  private handleDaySelect = (e: DateSelectEvent) => {\n    e.stopPropagation()\n    this.setValue(e.date)\n    this.hide()\n  }\n\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n\n    if (this.open) {\n      this.hide(false)\n    } else {\n      this.show()\n    }\n  }\n\n  private handleBlur = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"blur\"))\n  }\n\n  private handleFocus = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"focus\"))\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    cleanValue(target, DISALLOWED_CHARACTERS)\n    this.dispatchEvent(new NordEvent(\"input\"))\n\n    const parsed = this.dateAdapter.parse(target.value, createDate)\n    if (parsed || target.value === \"\") {\n      this.setValue(parsed)\n    }\n  }\n\n  private setValue(date?: Date) {\n    this.value = date ? printISODate(date) : \"\"\n    this.dispatchEvent(new NordEvent(\"change\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-date-picker\": DatePicker\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n  const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","DISALLOWED_CHARACTERS","isDateDisabled","DatePicker","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","calendar","toggleButton","SwipeController","target","dialog","matchesGesture","isDownwardsSwipe","onSwipeEnd","localization","isoAdapter","stopPropagation","setValue","date","preventDefault","show","event","dispatchEvent","NordEvent","inputEl","regex","value","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","parsed","dateAdapter","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","getTime","NaN","Date","updateComplete","then","focus","moveFocusToButton","willUpdate","_changedProperties","has","createDateFormatters","dateFormatLong","Intl","DateTimeFormat","locale","day","month","year","render","formattedDate","format","html","renderLabel","name","ifDefined","placeholder","inputId","disabled","required","handleInputChange","handleFocus","handleBlur","ref","focusableRef","error","undefined","getDescribedBy","toggleOpen","buttonLabel","selectedDateMessage","nothing","renderError","classMap","direction","focusLast","calendarHeading","closeLabel","min","max","firstDayOfWeek","handleDaySelect","focusFirst","closeButton","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","state","property","attribute","Number","customElement"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../../icons/lib/assets/interface-close-small.js","../src/date-picker/DatePicker.ts","../src/common/input.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 21h126v112H7zM35 7v28m70-28v28M7 63h126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z\"/></svg>'\nexport const title = \"interface-close-small\"\nexport const tags = \"nordicon interface close remove small cross delete erase symbol\"\n","import { LitElement, html, nothing, PropertyValues } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport type Button from \"../button/Button.js\"\n\nimport \"../calendar/Calendar.js\"\nimport { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DateDisabledPredicate } from \"../calendar/Calendar.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\nimport localization, { DatePickerLocalizedText } from \"./date-localization.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst DISALLOWED_CHARACTERS = /[^0-9./-]+/g\nconst isDateDisabled = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status ready\n * @category form\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(`.n-date-toggle`, true) private toggleButton!: Button\n  @query(`.n-date-close`, true) private closeButton!: HTMLButtonElement\n  @query(`nord-calendar`, true) private calendar!: Calendar\n  @query(`[role=\"dialog\"]`, true) private dialog!: HTMLElement\n\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this.calendar && node !== this.toggleButton,\n  })\n\n  private swipe = new SwipeController(this, {\n    target: () => this.dialog,\n    matchesGesture: isDownwardsSwipe,\n    onSwipeEnd: () => this.hide(false),\n  })\n\n  /**\n   * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n   * these are used to format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong!: Intl.DateTimeFormat\n\n  @state() private open = false\n\n  /**\n   * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = \"\"\n\n  get valueAsDate(): Date | undefined {\n    return parseISODate(this.value)\n  }\n\n  /**\n   * Get/set the value of the picker as a Date object.\n   */\n  set valueAsDate(date: Date | undefined) {\n    this.value = date ? printISODate(date) : \"\"\n  }\n\n  get valueAsNumber(): number {\n    return this.valueAsDate?.getTime() ?? NaN\n  }\n\n  /**\n   * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n   */\n  set valueAsNumber(date: number) {\n    this.value = date ? printISODate(new Date(date)) : \"\"\n  }\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @property() min: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @property() max: string = \"\"\n\n  /**\n   * Forces the opening direction of the calendar modal to be always left or right.\n   * This setting can be useful when the input is smaller than the opening date picker\n   * would be as by default the picker always opens towards right.\n   */\n  @property() direction: \"left\" | \"right\" = \"right\"\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @property({ attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n  /**\n   * Button labels, day names, month names, etc, used for localization.\n   * Default is English.\n   */\n  @property({ attribute: false }) localization: DatePickerLocalizedText = localization\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   * Default is IS0-8601 parsing and formatting.\n   */\n  @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @property({ attribute: false }) isDateDisabled: DateDisabledPredicate = isDateDisabled\n\n  /**\n   * Show the calendar modal, moving focus to the calendar inside.\n   */\n  show() {\n    this.open = true\n    /**\n     * Dispatched when the calendar is toggled open.\n     */\n    this.dispatchEvent(new NordEvent(\"open\"))\n\n    // we should only focus once the calendar is visible after render is complete\n    this.updateComplete.then(() => this.calendar.focus({ target: \"month\" }))\n  }\n\n  /**\n   * Hide the calendar modal.\n   * @param {boolean} moveFocusToButton controls whether focus should be returned to the date picker's button.\n   */\n  hide(moveFocusToButton = true) {\n    this.open = false\n    /**\n     * Dispatched when the calendar is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.toggleButton.focus()\n    }\n  }\n\n  protected willUpdate(_changedProperties: PropertyValues<this>) {\n    if (_changedProperties.has(\"localization\")) {\n      this.createDateFormatters()\n    }\n  }\n\n  private createDateFormatters() {\n    this.dateFormatLong = new Intl.DateTimeFormat(this.localization.locale, {\n      day: \"numeric\",\n      month: \"long\",\n      year: \"numeric\",\n    })\n  }\n\n  render() {\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <input\n          class=\"n-input\"\n          name=${this.name}\n          .value=${formattedDate}\n          placeholder=${ifDefined(this.placeholder)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-autocomplete=\"none\"\n          @input=${this.handleInputChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          autocomplete=\"off\"\n          ${ref(this.focusableRef)}\n          aria-invalid=${ifDefined(this.error ? \"true\" : undefined)}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n        />\n        <button class=\"n-date-toggle\" @click=${this.toggleOpen} ?disabled=${this.disabled} type=\"button\">\n          <nord-icon name=\"interface-calendar\" size=\"s\"></nord-icon>\n          <nord-visually-hidden>\n            ${localization.buttonLabel}\n            ${valueAsDate\n              ? html`<span>, ${localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)} </span>`\n              : nothing}\n          </nord-visually-hidden>\n        </button>\n      </div>\n\n      ${this.renderError()}\n\n      <div\n        class=${classMap({\n          \"is-left\": this.direction === \"left\",\n          \"is-active\": this.open,\n        })}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n        aria-labelledby=\"dialog-header\"\n      >\n        <div class=\"n-date-dialog-content\">\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n          <div class=\"n-date-mobile\">\n            <div class=\"n-date-mobile-heading\" id=\"dialog-header\">${this.localization.calendarHeading}</div>\n            <button class=\"n-date-close\" @click=${this.hide} type=\"button\">\n              <nord-icon color=\"var(--n-color-icon)\" name=\"interface-close-small\" size=\"xs\"></nord-icon>\n              <nord-visually-hidden>${this.localization.closeLabel}</nord-visually-hidden>\n            </button>\n          </div>\n          <nord-calendar\n            value=${this.value}\n            min=${this.min}\n            max=${this.max}\n            .localization=${this.localization}\n            .firstDayOfWeek=${this.firstDayOfWeek}\n            .isDateDisabled=${this.isDateDisabled}\n            @change=${this.handleDaySelect}\n          ></nord-calendar>\n\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n        </div>\n      </div>\n    `\n  }\n\n  private focusFirst() {\n    this.closeButton.focus()\n  }\n\n  private focusLast() {\n    this.calendar.focus({ target: \"day\" })\n  }\n\n  private handleDaySelect = (e: DateSelectEvent) => {\n    e.stopPropagation()\n    this.setValue(e.date)\n    this.hide()\n  }\n\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n\n    if (this.open) {\n      this.hide(false)\n    } else {\n      this.show()\n    }\n  }\n\n  private handleBlur = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"blur\"))\n  }\n\n  private handleFocus = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"focus\"))\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    cleanValue(target, DISALLOWED_CHARACTERS)\n    this.dispatchEvent(new NordEvent(\"input\"))\n\n    const parsed = this.dateAdapter.parse(target.value, createDate)\n    if (parsed || target.value === \"\") {\n      this.setValue(parsed)\n    }\n  }\n\n  private setValue(date?: Date) {\n    this.value = date ? printISODate(date) : \"\"\n    this.dispatchEvent(new NordEvent(\"change\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-date-picker\": DatePicker\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n  const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","DISALLOWED_CHARACTERS","isDateDisabled","DatePicker","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","calendar","toggleButton","SwipeController","target","dialog","matchesGesture","isDownwardsSwipe","onSwipeEnd","localization","isoAdapter","stopPropagation","setValue","date","preventDefault","show","event","dispatchEvent","NordEvent","inputEl","regex","value","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","parsed","dateAdapter","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","getTime","NaN","Date","updateComplete","then","focus","moveFocusToButton","willUpdate","_changedProperties","has","createDateFormatters","dateFormatLong","Intl","DateTimeFormat","locale","day","month","year","render","formattedDate","format","html","renderLabel","name","ifDefined","placeholder","inputId","disabled","required","handleInputChange","handleFocus","handleBlur","ref","focusableRef","error","undefined","getDescribedBy","toggleOpen","buttonLabel","selectedDateMessage","nothing","renderError","classMap","direction","focusLast","calendarHeading","closeLabel","min","max","firstDayOfWeek","handleDaySelect","focusFirst","closeButton","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","state","property","attribute","Number","customElement"],"mappings":"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"}

package/lib/EventController-d99ebeef.js

@@ -0,0 +1,2 @@
+class s{constructor(s){this.listeners=[],s.addController(this)}hostDisconnected(){this.listeners.forEach((s=>s())),this.listeners=[]}listen(s,e,t,i){s.addEventListener(e,t,i);this.listeners.push((()=>s.removeEventListener(e,t,i)))}}export{s as E};
+//# sourceMappingURL=EventController-d99ebeef.js.map

package/lib/EventController-d99ebeef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventController-d99ebeef.js","sources":["../src/common/controllers/EventController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ninterface ShadowRootEventMap {\n  slotchange: Event\n}\n\nexport class EventController implements ReactiveController {\n  private listeners: Array<() => void> = []\n\n  constructor(host: ReactiveControllerHost) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.listeners.forEach(stop => stop())\n    this.listeners = []\n  }\n\n  listen<K extends keyof WindowEventMap>(\n    window: Window,\n    type: K,\n    listener: (this: Window, ev: WindowEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void\n\n  listen<K extends keyof DocumentEventMap>(\n    document: Document,\n    type: K,\n    listener: (this: Document, ev: DocumentEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void\n\n  listen<K extends keyof HTMLElementEventMap>(\n    element: HTMLElement,\n    type: K,\n    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void\n\n  listen<K extends keyof ShadowRootEventMap>(\n    element: ShadowRoot,\n    type: K,\n    listener: (this: ShadowRoot, ev: ShadowRootEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void\n\n  listen(\n    element: Window | Document | HTMLElement | ShadowRoot,\n    type: string,\n    listener: (ev: any) => any,\n    options?: boolean | AddEventListenerOptions\n  ) {\n    element.addEventListener(type, listener, options)\n\n    const stop = () => element.removeEventListener(type, listener, options)\n    this.listeners.push(stop)\n  }\n}\n"],"names":["EventController","constructor","host","this","addController","hostDisconnected","listeners","forEach","stop","listen","element","type","listener","options","addEventListener","push","removeEventListener"],"mappings":"MAMaA,EAGXC,YAAYC,GAFJC,eAA+B,GAGrCD,EAAKE,cAAcD,MAGrBE,mBACEF,KAAKG,UAAUC,SAAQC,GAAQA,MAC/BL,KAAKG,UAAY,GA+BnBG,OACEC,EACAC,EACAC,EACAC,GAEAH,EAAQI,iBAAiBH,EAAMC,EAAUC,GAGzCV,KAAKG,UAAUS,MADF,IAAML,EAAQM,oBAAoBL,EAAMC,EAAUC"}

package/lib/Fieldset.js

@@ -1,2 +1,2 @@
-import{_ as r,n as e}from"./query-assigned-elements-37b095c4.js";import{r as t,s as o,$ as s}from"./lit-element-74b6bb4b.js";import{e as i}from"./property-03f59dce.js";import{l as n}from"./if-defined-fe657a02.js";import{S as l}from"./SlotController-5bfc47d1.js";import{s as a}from"./Component-9d373ef3.js";import{s as d}from"./FormField-50bd73d5.js";const h=t`fieldset{border:none}.n-label-container{margin-block-end:var(--n-space-s)}`;let m=class extends o{constructor(){super(...arguments),this.errorSlot=new l(this,"error"),this.hintSlot=new l(this,"hint"),this.label=""}render(){const{hasError:r}=this;return s`<fieldset aria-invalid="${n(r?"true":void 0)}" aria-describedby="${n(r?"error":void 0)}"><legend class="n-label-container"><slot class="n-label" name="label">${this.label}</slot><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}};m.styles=[a,d,h],r([i()],m.prototype,"label",void 0),r([i()],m.prototype,"hint",void 0),r([i()],m.prototype,"error",void 0),m=r([e("nord-fieldset")],m);var p=m;export{p as default};
+import{_ as e,n as r}from"./query-assigned-elements-37b095c4.js";import{r as t,s as o,$ as s}from"./lit-element-74b6bb4b.js";import{e as i}from"./property-03f59dce.js";import{l as n}from"./if-defined-fe657a02.js";import{S as l}from"./SlotController-683d0e7c.js";import{s as a}from"./Component-9d373ef3.js";import{s as d}from"./FormField-50bd73d5.js";import"./EventController-d99ebeef.js";const h=t`fieldset{border:none}.n-label-container{margin-block-end:var(--n-space-s)}`;let m=class extends o{constructor(){super(...arguments),this.errorSlot=new l(this,"error"),this.hintSlot=new l(this,"hint"),this.label=""}render(){const{hasError:e}=this;return s`<fieldset aria-invalid="${n(e?"true":void 0)}" aria-describedby="${n(e?"error":void 0)}"><legend class="n-label-container"><slot class="n-label" name="label">${this.label}</slot><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}};m.styles=[a,d,h],e([i()],m.prototype,"label",void 0),e([i()],m.prototype,"hint",void 0),e([i()],m.prototype,"error",void 0),m=e([r("nord-fieldset")],m);var p=m;export{p as default};
 //# sourceMappingURL=Fieldset.js.map

package/lib/Fieldset.js.map

@@ -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 { ifDefined } from \"lit/directives/if-defined.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Fieldset.css\"\n\n/**\n * Fieldset is used for grouping sets of input components.\n * It is necessary to use a fieldset with radio and checkbox components.\n * It can also be useful for logically grouping other types of inputs.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the fieldset.\n * @slot error - Optional slot that holds error text for the fieldset.\n */\n@customElement(\"nord-fieldset\")\nexport default class Fieldset extends LitElement {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  private errorSlot = new SlotController(this, \"error\")\n  private hintSlot = new SlotController(this, \"hint\")\n\n  /**\n   * Label for the fieldset.\n   */\n  @property() label: string = \"\"\n\n  /**\n   * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n   */\n  @property() hint?: string\n\n  /**\n   * Optional error to be shown with the fieldset. Alternatively use the error slot.\n   */\n  @property() error?: string\n\n  render() {\n    const { hasError } = this\n\n    return html`\n      <fieldset\n        aria-invalid=${ifDefined(hasError ? \"true\" : undefined)}\n        aria-describedby=${ifDefined(hasError ? \"error\" : undefined)}\n      >\n        <legend class=\"n-label-container\">\n          <slot class=\"n-label\" name=\"label\">${this.label}</slot>\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","SlotController","render","hasError","html","ifDefined","undefined","label","hasHint","hint","error","Boolean","hintSlot","hasContent","errorSlot","componentStyle","formFieldStyle","style","__decorate","property","customElement"],"mappings":"obAqBA,IAAqBA,EAArB,cAAsCC,EAAtCC,kCAGUC,eAAY,IAAIC,EAAeD,KAAM,SACrCA,cAAW,IAAIC,EAAeD,KAAM,QAKhCA,WAAgB,GAY5BE,SACE,MAAMC,SAAEA,GAAaH,KAErB,OAAOI,CAAI,2BAEQC,EAAUF,EAAW,YAASG,yBAC1BD,EAAUF,EAAW,aAAUG,4EAGXN,KAAKO,uDAEDP,KAAKQ,8BACxBR,KAAKS,2GAMqCT,KAAKG,gCAChDH,KAAKU,gCAMpBF,cACZ,OAAOG,QAAQX,KAAKS,OAAST,KAAKY,SAASC,WAG/BV,eACZ,OAAOQ,QAAQX,KAAKU,QAAUV,KAAKc,UAAUD,aAlDxChB,SAAS,CAACkB,EAAgBC,EAAgBC,GAQrCC,GAAXC,iCAKWD,GAAXC,gCAKWD,GAAXC,iCAnBkBtB,KADpBuB,EAAc,kBACMvB,SAAAA"}
+{"version":3,"file":"Fieldset.js","sources":["../src/fieldset/Fieldset.ts"],"sourcesContent":["import { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Fieldset.css\"\n\n/**\n * Fieldset is used for grouping sets of input components.\n * It is necessary to use a fieldset with radio and checkbox components.\n * It can also be useful for logically grouping other types of inputs.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the fieldset.\n * @slot error - Optional slot that holds error text for the fieldset.\n */\n@customElement(\"nord-fieldset\")\nexport default class Fieldset extends LitElement {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  private errorSlot = new SlotController(this, \"error\")\n  private hintSlot = new SlotController(this, \"hint\")\n\n  /**\n   * Label for the fieldset.\n   */\n  @property() label: string = \"\"\n\n  /**\n   * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n   */\n  @property() hint?: string\n\n  /**\n   * Optional error to be shown with the fieldset. Alternatively use the error slot.\n   */\n  @property() error?: string\n\n  render() {\n    const { hasError } = this\n\n    return html`\n      <fieldset\n        aria-invalid=${ifDefined(hasError ? \"true\" : undefined)}\n        aria-describedby=${ifDefined(hasError ? \"error\" : undefined)}\n      >\n        <legend class=\"n-label-container\">\n          <slot class=\"n-label\" name=\"label\">${this.label}</slot>\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","SlotController","render","hasError","html","ifDefined","undefined","label","hasHint","hint","error","Boolean","hintSlot","hasContent","errorSlot","componentStyle","formFieldStyle","style","__decorate","property","customElement"],"mappings":"0dAqBA,IAAqBA,EAArB,cAAsCC,EAAtCC,kCAGUC,eAAY,IAAIC,EAAeD,KAAM,SACrCA,cAAW,IAAIC,EAAeD,KAAM,QAKhCA,WAAgB,GAY5BE,SACE,MAAMC,SAAEA,GAAaH,KAErB,OAAOI,CAAI,2BAEQC,EAAUF,EAAW,YAASG,yBAC1BD,EAAUF,EAAW,aAAUG,4EAGXN,KAAKO,uDAEDP,KAAKQ,8BACxBR,KAAKS,2GAMqCT,KAAKG,gCAChDH,KAAKU,gCAMpBF,cACZ,OAAOG,QAAQX,KAAKS,OAAST,KAAKY,SAASC,WAG/BV,eACZ,OAAOQ,QAAQX,KAAKU,QAAUV,KAAKc,UAAUD,aAlDxChB,SAAS,CAACkB,EAAgBC,EAAgBC,GAQrCC,GAAXC,iCAKWD,GAAXC,gCAKWD,GAAXC,iCAnBkBtB,KADpBuB,EAAc,kBACMvB,SAAAA"}

package/lib/FormAssociatedMixin-1f97ed66.js

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

package/lib/FormAssociatedMixin-1f97ed66.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormAssociatedMixin-1f97ed66.js","sources":["../src/common/controllers/FormDataController.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\nimport { EventController } from \"./EventController.js\"\n\ntype FormDataOptions = {\n  value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n  private events: EventController\n  constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n    this.host = host\n    host.addController(this)\n    this.options = options\n    this.events = new EventController(host)\n  }\n\n  hostConnected() {\n    if (this.host.form) {\n      this.events.listen(this.host.form, \"formdata\", this.handleFormData)\n    }\n  }\n\n  private handleFormData = (e: FormDataEvent) => {\n    const { disabled, name } = this.host\n\n    if (disabled) {\n      return\n    }\n\n    const value = this.options.value()\n\n    if (name && value != null) {\n      e.formData.append(name, value)\n    }\n  }\n}\n","/* eslint-disable max-classes-per-file */\nimport { html, LitElement, TemplateResult } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { FormDataController } from \"../controllers/FormDataController.js\"\nimport { SlotController } from \"../controllers/SlotController.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\nimport \"../../visually-hidden/VisuallyHidden.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n  label: string\n  required: boolean\n  hint?: string\n  hideLabel: boolean\n  placeholder?: string\n  error?: string\n  expand: boolean\n\n  protected inputId: string\n  protected errorId: string\n  protected hintId: string\n  protected labelSlot: SlotController\n  protected hintSlot: SlotController\n  protected errorSlot: SlotController\n  protected formData: FormDataController\n\n  protected get formValue(): string | undefined\n  protected get hasError(): boolean\n  protected get hasHint(): boolean\n\n  protected handleChange(e: Event): void\n  protected handleInput(e: Event): void\n  protected renderLabel(): TemplateResult\n  protected renderError(): TemplateResult\n  protected getDescribedBy(): string | undefined\n  protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n  // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n  /**\n   * @slot label - Use when a label requires more than plain text.\n   * @slot hint - Use when a hint requires more than plain text.\n   * @slot error - Optional slot that holds error text for the input.\n   */\n  class FormAssociatedElement extends superClass {\n    protected labelSlot = new SlotController(this, \"label\")\n    protected errorSlot = new SlotController(this, \"error\")\n    protected hintSlot = new SlotController(this, \"hint\")\n    protected formData = new FormDataController(this, { value: () => this.formValue })\n\n    protected get formValue() {\n      return this.value\n    }\n\n    protected inputId = \"input\"\n    protected errorId = \"error\"\n    protected hintId = \"hint\"\n\n    /**\n     * Label for the input.\n     */\n    @property() label: string = \"\"\n\n    /**\n     * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n     */\n    @property() hint?: string\n\n    /**\n     * Visually hide the label, but still show it to assistive technologies like screen readers.\n     */\n    @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n    /**\n     * Placeholder text to display within the input.\n     */\n    @property() placeholder?: string\n\n    /**\n     * Optional error to be shown with the input. Alternatively use the error slot.\n     */\n    @property() error?: string\n\n    /**\n     * Determines whether the input is required or not.\n     * An input marked as required will be announced as such to users of assistive technology.\n     * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n     */\n    @property({ type: Boolean }) required = false\n\n    /**\n     * Controls whether the input expands to fill the width of its container.\n     */\n    @property({ reflect: true, type: Boolean }) expand = false\n\n    protected handleInput(e: Event) {\n      e.stopPropagation()\n      const target = e.target as NativeInputElement\n      this.value = target.value\n\n      /**\n       * Fired as the user types into the input.\n       */\n      this.dispatchEvent(new NordEvent(\"input\"))\n    }\n\n    protected handleChange(e: Event) {\n      e.stopPropagation()\n\n      /**\n       * Fired whenever the input's value is changed via user interaction.\n       */\n      this.dispatchEvent(new NordEvent(\"change\"))\n    }\n\n    protected renderLabel() {\n      const label = html`\n        <label for=${this.inputId}>\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n          <slot name=\"hint\">${this.hint}</slot>\n        </div>\n      `\n\n      return this.hideLabel\n        ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n        : html`<div class=\"n-label-container\">${label}</div>`\n    }\n\n    protected renderError() {\n      return html`\n        <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n          <slot name=\"error\">${this.error}</slot>\n        </div>\n      `\n    }\n\n    protected getDescribedBy() {\n      const { hasHint, hasError } = this\n\n      if (hasHint && hasError) {\n        return `${this.hintId} ${this.errorId}`\n      }\n      if (hasHint) {\n        return this.hintId\n      }\n      if (hasError) {\n        return this.errorId\n      }\n\n      return undefined\n    }\n\n    protected getInvalid() {\n      return this.hasError ? \"true\" : undefined\n    }\n\n    protected get hasHint() {\n      return Boolean(this.hint) || this.hintSlot.hasContent\n    }\n\n    protected get hasError() {\n      return Boolean(this.error) || this.errorSlot.hasContent\n    }\n  }\n\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormDataController","constructor","host","options","this","e","disabled","name","value","formData","append","addController","events","EventController","hostConnected","form","listen","handleFormData","FormAssociatedMixin","superClass","FormAssociatedElement","SlotController","formValue","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","label","html","inputId","hintId","hasHint","hint","hideLabel","renderError","errorId","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hintSlot","hasContent","errorSlot","__decorate","property","type","attribute","reflect"],"mappings":"iUAQaA,EAEXC,YAAoBC,EAA4DC,GAA5DC,UAAAF,EAA4DE,aAAAD,EAaxEC,oBAAkBC,IACxB,MAAMC,SAAEA,EAAQC,KAAEA,GAASH,KAAKF,KAEhC,GAAII,EACF,OAGF,MAAME,EAAQJ,KAAKD,QAAQK,QAEvBD,GAAiB,MAATC,GACVH,EAAEI,SAASC,OAAOH,EAAMC,IAtB1BJ,KAAKF,KAAOA,EACZA,EAAKS,cAAcP,MACnBA,KAAKD,QAAUA,EACfC,KAAKQ,OAAS,IAAIC,EAAgBX,GAGpCY,gBACMV,KAAKF,KAAKa,MACZX,KAAKQ,OAAOI,OAAOZ,KAAKF,KAAKa,KAAM,WAAYX,KAAKa,0BCsB1CC,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApClB,kCACYG,eAAY,IAAIiB,EAAejB,KAAM,SACrCA,eAAY,IAAIiB,EAAejB,KAAM,SACrCA,cAAW,IAAIiB,EAAejB,KAAM,QACpCA,cAAW,IAAIJ,EAAmBI,KAAM,CAAEI,MAAO,IAAMJ,KAAKkB,YAM5DlB,aAAU,QACVA,aAAU,QACVA,YAAS,OAKPA,WAAgB,GAU0BA,gBAAY,EAiBrCA,eAAW,EAKIA,aAAS,EA3CvCkB,gBACZ,OAAOlB,KAAKI,MA4CJe,YAAYlB,GACpBA,EAAEmB,kBACF,MAAMC,EAASpB,EAAEoB,OACjBrB,KAAKI,MAAQiB,EAAOjB,MAKpBJ,KAAKsB,cAAc,IAAIC,EAAU,UAGzBC,aAAavB,GACrBA,EAAEmB,kBAKFpB,KAAKsB,cAAc,IAAIC,EAAU,WAGzBE,cACR,MAAMC,EAAQC,CAAI,eACH3B,KAAK4B,+BACK5B,KAAK0B,yDAGO1B,KAAK6B,qBAAmB7B,KAAK8B,8BAC1C9B,KAAK+B,oBAI7B,OAAO/B,KAAKgC,UACRL,CAAI,yBAAyBD,2BAC7BC,CAAI,kCAAkCD,UAGlCO,cACR,OAAON,CAAI,sCAC2B3B,KAAKkC,mCAAiClC,KAAKmC,gCACxDnC,KAAKoC,qBAKtBC,iBACR,MAAMP,QAAEA,EAAOK,SAAEA,GAAanC,KAE9B,OAAI8B,GAAWK,EACN,GAAGnC,KAAK6B,UAAU7B,KAAKkC,UAE5BJ,EACK9B,KAAK6B,OAEVM,EACKnC,KAAKkC,aADd,EAOQI,aACR,OAAOtC,KAAKmC,SAAW,YAASI,EAGpBT,cACZ,OAAOU,QAAQxC,KAAK+B,OAAS/B,KAAKyC,SAASC,WAG/BP,eACZ,OAAOK,QAAQxC,KAAKoC,QAAUpC,KAAK2C,UAAUD,YAIjD,OA3GcE,GAAXC,iCAKWD,GAAXC,gCAKqDD,GAArDC,EAAS,CAAEC,KAAMN,QAASO,UAAW,gDAK1BH,GAAXC,uCAKWD,GAAXC,iCAO4BD,GAA5BC,EAAS,CAAEC,KAAMN,0CAK0BI,GAA3CC,EAAS,CAAEG,SAAS,EAAMF,KAAMN,wCA2E5BxB"}

package/lib/Header.js

@@ -1,2 +1,2 @@
-import{_ as e,n as o}from"./query-assigned-elements-37b095c4.js";import{r,$ as a,s as n}from"./lit-element-74b6bb4b.js";import{D as t}from"./DraftComponentMixin-9e4b7b34.js";import{S as s}from"./SlotController-5bfc47d1.js";import{s as i}from"./Component-9d373ef3.js";const l=r`:host{--n-banner-box-shadow:none;font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-actions{display:flex;flex-flow:row wrap;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--n-space-m) var(--n-space-l);background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--n-box-shadow-header);min-block-size:var(--n-space-xxl)}.n-header-actions{margin-inline-start:auto;gap:var(--n-space-s)}`;let d=class extends(t(n)){constructor(){super(...arguments),this.actionSlot=new s(this,"action")}render(){return a`<header class="n-header"><slot></slot><div class="n-header-actions" ?hidden="${this.actionSlot.isEmpty}"><slot name="action"></slot></div></header>`}};d.styles=[i,l],d=e([o("nord-header")],d);var c=d;export{c as default};
+import{_ as e,n as o}from"./query-assigned-elements-37b095c4.js";import{r,$ as n,s as t}from"./lit-element-74b6bb4b.js";import{D as a}from"./DraftComponentMixin-9e4b7b34.js";import{S as s}from"./SlotController-683d0e7c.js";import{s as l}from"./Component-9d373ef3.js";import"./EventController-d99ebeef.js";const i=r`:host{--n-banner-box-shadow:none;font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-actions{display:flex;flex-flow:row wrap;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--n-space-m) var(--n-space-l);background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--n-box-shadow-header);min-block-size:var(--n-space-xxl)}.n-header-actions{margin-inline-start:auto;gap:var(--n-space-s)}`;let d=class extends(a(t)){constructor(){super(...arguments),this.actionSlot=new s(this,"action")}render(){return n`<header class="n-header"><slot></slot><div class="n-header-actions" ?hidden="${this.actionSlot.isEmpty}"><slot name="action"></slot></div></header>`}};d.styles=[l,i],d=e([o("nord-header")],d);var c=d;export{c as default};
 //# sourceMappingURL=Header.js.map

package/lib/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Header.css\"\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status draft\n * @category structure\n * @slot - The header content.\n * @slot action - Optional slot for buttons, toggles, etc.\n */\n@customElement(\"nord-header\")\nexport default class Header extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private actionSlot = new SlotController(this, \"action\")\n\n  render() {\n    return html`\n      <header class=\"n-header\">\n        <slot></slot>\n        <div class=\"n-header-actions\" ?hidden=${this.actionSlot.isEmpty}>\n          <slot name=\"action\"></slot>\n        </div>\n      </header>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-header\": Header\n  }\n}\n"],"names":["Header","DraftComponentMixin","LitElement","constructor","this","SlotController","render","html","actionSlot","isEmpty","componentStyle","style","customElement"],"mappings":"w3BAiBA,IAAqBA,EAArB,cAAoCC,EAAoBC,IAAxDC,kCAGUC,gBAAa,IAAIC,EAAeD,KAAM,UAE9CE,SACE,OAAOC,CAAI,gFAGiCH,KAAKI,WAAWC,wDARvDT,SAAS,CAACU,EAAgBC,GADdX,KADpBY,EAAc,gBACMZ,SAAAA"}
+{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Header.css\"\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status draft\n * @category structure\n * @slot - The header content.\n * @slot action - Optional slot for buttons, toggles, etc.\n */\n@customElement(\"nord-header\")\nexport default class Header extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private actionSlot = new SlotController(this, \"action\")\n\n  render() {\n    return html`\n      <header class=\"n-header\">\n        <slot></slot>\n        <div class=\"n-header-actions\" ?hidden=${this.actionSlot.isEmpty}>\n          <slot name=\"action\"></slot>\n        </div>\n      </header>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-header\": Header\n  }\n}\n"],"names":["Header","DraftComponentMixin","LitElement","constructor","this","SlotController","render","html","actionSlot","isEmpty","componentStyle","style","customElement"],"mappings":"85BAiBA,IAAqBA,EAArB,cAAoCC,EAAoBC,IAAxDC,kCAGUC,gBAAa,IAAIC,EAAeD,KAAM,UAE9CE,SACE,OAAOC,CAAI,gFAGiCH,KAAKI,WAAWC,wDARvDT,SAAS,CAACU,EAAgBC,GADdX,KADpBY,EAAc,gBACMZ,SAAAA"}

package/lib/Input.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,w as s,$ as n,s as r}from"./lit-element-74b6bb4b.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe657a02.js";import{n as l}from"./ref-7d028e3a.js";import{o as d}from"./unsafe-html-989a642b.js";import{F as p}from"./FocusableMixin-ebb67709.js";import{F as m}from"./FormAssociatedMixin-ccae91fd.js";import{I as c}from"./InputMixin-94d15730.js";import{s as h}from"./Component-9d373ef3.js";import{s as u}from"./FormField-50bd73d5.js";import{s as f}from"./TextField-ece1c786.js";import{S as b}from"./SlotController-5bfc47d1.js";import"./directive-de55b00a.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const v=i`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.n-input-container{font-size:var(--n-font-size-m)}slot[name=start]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;color:var(--n-color-icon)}slot[name=start]:not([hidden])+.n-input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-s)!important;inline-size:var(--n-size-icon-s)!important}`;let y=class extends(m(c(p(r)))){constructor(){super(...arguments),this.startSlot=new b(this,"start"),this.type="text"}render(){var e;const t="search"===this.type||this.startSlot.hasContent,i="number"===this.type,r="search"===this.type?d('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):s;return n`${this.renderLabel()}<div class="n-input-container"><slot name="${this.startSlot.slotName}" ?hidden="${!t}">${r}</slot><input ${l(this.focusableRef)} id="${this.inputId}" class="n-input" type="${i?"text":this.type}" inputmode="${a(i?"numeric":void 0)}" pattern="${a(i?"[0-9]*":void 0)}" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInput}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false"></div>${this.renderError()}`}handleKeydown(e){var t;"Enter"===e.key&&this.form&&(null===(t=this.form.querySelector('button[type="submit"]'))||void 0===t||t.click())}};y.styles=[h,u,f,v],e([o()],y.prototype,"type",void 0),y=e([t("nord-input")],y);var $=y;export{$ as default};
+import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,w as s,$ as n,s as r}from"./lit-element-74b6bb4b.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe657a02.js";import{n as l}from"./ref-7d028e3a.js";import{o as d}from"./unsafe-html-989a642b.js";import{F as p}from"./FocusableMixin-ebb67709.js";import{F as m}from"./FormAssociatedMixin-1f97ed66.js";import{I as c}from"./InputMixin-94d15730.js";import{s as h}from"./Component-9d373ef3.js";import{s as u}from"./FormField-50bd73d5.js";import{s as f}from"./TextField-ece1c786.js";import{S as v}from"./SlotController-683d0e7c.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const b=i`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.n-input-container{font-size:var(--n-font-size-m)}slot[name=start]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;color:var(--n-color-icon)}slot[name=start]:not([hidden])+.n-input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-s)!important;inline-size:var(--n-size-icon-s)!important}`;let y=class extends(m(c(p(r)))){constructor(){super(...arguments),this.startSlot=new v(this,"start"),this.type="text"}render(){var e;const t="search"===this.type||this.startSlot.hasContent,i="number"===this.type,r="search"===this.type?d('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):s;return n`${this.renderLabel()}<div class="n-input-container"><slot name="${this.startSlot.slotName}" ?hidden="${!t}">${r}</slot><input ${l(this.focusableRef)} id="${this.inputId}" class="n-input" type="${i?"text":this.type}" inputmode="${a(i?"numeric":void 0)}" pattern="${a(i?"[0-9]*":void 0)}" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInput}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false"></div>${this.renderError()}`}handleKeydown(e){var t;"Enter"===e.key&&this.form&&(null===(t=this.form.querySelector('button[type="submit"]'))||void 0===t||t.click())}};y.styles=[h,u,f,b],e([o()],y.prototype,"type",void 0),y=e([t("nord-input")],y);var $=y;export{$ as default};
 //# sourceMappingURL=Input.js.map

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/input/Input.ts","../../icons/lib/assets/navigation-search.js"],"sourcesContent":["import { LitElement, html, 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\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Input.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon at the start of the input.\n */\n@customElement(\"nord-input\")\nexport default class Input extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  private startSlot = new SlotController(this, \"start\")\n\n  /**\n   * The type of the input.\n   */\n  @property() type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" = \"text\"\n\n  render() {\n    const hasIcon = this.type === \"search\" || this.startSlot.hasContent\n    const isNumber = this.type === \"number\"\n    const defaultIcon = this.type === \"search\" ? unsafeHTML(searchIcon) : nothing\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <slot name=${this.startSlot.slotName} ?hidden=${!hasIcon}>${defaultIcon}</slot>\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          type=${isNumber ? \"text\" : this.type}\n          inputmode=${ifDefined(isNumber ? \"numeric\" : undefined)}\n          pattern=${ifDefined(isNumber ? \"[0-9]*\" : undefined)}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @input=${this.handleInput}\n          @change=${this.handleChange}\n          @keydown=${this.handleKeydown}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          spellcheck=\"false\"\n        />\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key === \"Enter\" && this.form) {\n      this.form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)?.click()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-input\": Input\n  }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n"],"names":["Input","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","SlotController","render","hasIcon","type","startSlot","hasContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","slotName","ref","focusableRef","inputId","ifDefined","undefined","disabled","required","name","value","placeholder","handleInput","handleChange","handleKeydown","getDescribedBy","getInvalid","renderError","e","key","form","querySelector","click","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","customElement"],"mappings":"guCA6BA,IAAqBA,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,MAAjFC,kCAGUC,eAAY,IAAIC,EAAeD,KAAM,SAKjCA,UAA4E,OAExFE,eACE,MAAMC,EAAwB,WAAdH,KAAKI,MAAqBJ,KAAKK,UAAUC,WACnDC,EAAyB,WAAdP,KAAKI,KAChBI,EAA4B,WAAdR,KAAKI,KAAoBK,EC1ClC,iQD0C2DC,EAEtE,OAAOC,CAAI,GACPX,KAAKY,2DAGQZ,KAAKK,UAAUQ,uBAAqBV,MAAWK,kBAExDM,EAAId,KAAKe,qBACNf,KAAKgB,kCAEHT,EAAW,OAASP,KAAKI,oBACpBa,EAAUV,EAAW,eAAYW,gBACnCD,EAAUV,EAAW,cAAWW,kBAC9BlB,KAAKmB,wBACLnB,KAAKoB,mBACVH,EAAUjB,KAAKqB,4BACbrB,KAAKsB,qBAAS,oBACTL,EAAUjB,KAAKuB,yBACpBvB,KAAKwB,yBACJxB,KAAKyB,2BACJzB,KAAK0B,oCACGT,EAAUjB,KAAK2B,oCACnBV,EAAUjB,KAAK4B,2CAKhC5B,KAAK6B,gBAIHH,cAAcI,SACN,UAAVA,EAAEC,KAAmB/B,KAAKgC,iBAC5BhC,KAAKgC,KAAKC,cAAiC,yCAA0BC,WA9ClExC,SAAS,CAACyC,EAAgBC,EAAgBC,EAAgBC,GAOrDC,GAAXC,gCARkB9C,KADpB+C,EAAc,eACM/C,SAAAA"}
+{"version":3,"file":"Input.js","sources":["../src/input/Input.ts","../../icons/lib/assets/navigation-search.js"],"sourcesContent":["import { LitElement, html, 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\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Input.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon at the start of the input.\n */\n@customElement(\"nord-input\")\nexport default class Input extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  private startSlot = new SlotController(this, \"start\")\n\n  /**\n   * The type of the input.\n   */\n  @property() type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" = \"text\"\n\n  render() {\n    const hasIcon = this.type === \"search\" || this.startSlot.hasContent\n    const isNumber = this.type === \"number\"\n    const defaultIcon = this.type === \"search\" ? unsafeHTML(searchIcon) : nothing\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <slot name=${this.startSlot.slotName} ?hidden=${!hasIcon}>${defaultIcon}</slot>\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          type=${isNumber ? \"text\" : this.type}\n          inputmode=${ifDefined(isNumber ? \"numeric\" : undefined)}\n          pattern=${ifDefined(isNumber ? \"[0-9]*\" : undefined)}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @input=${this.handleInput}\n          @change=${this.handleChange}\n          @keydown=${this.handleKeydown}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          spellcheck=\"false\"\n        />\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key === \"Enter\" && this.form) {\n      this.form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)?.click()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-input\": Input\n  }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n"],"names":["Input","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","SlotController","render","hasIcon","type","startSlot","hasContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","slotName","ref","focusableRef","inputId","ifDefined","undefined","disabled","required","name","value","placeholder","handleInput","handleChange","handleKeydown","getDescribedBy","getInvalid","renderError","e","key","form","querySelector","click","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","customElement"],"mappings":"swCA6BA,IAAqBA,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,MAAjFC,kCAGUC,eAAY,IAAIC,EAAeD,KAAM,SAKjCA,UAA4E,OAExFE,eACE,MAAMC,EAAwB,WAAdH,KAAKI,MAAqBJ,KAAKK,UAAUC,WACnDC,EAAyB,WAAdP,KAAKI,KAChBI,EAA4B,WAAdR,KAAKI,KAAoBK,EC1ClC,iQD0C2DC,EAEtE,OAAOC,CAAI,GACPX,KAAKY,2DAGQZ,KAAKK,UAAUQ,uBAAqBV,MAAWK,kBAExDM,EAAId,KAAKe,qBACNf,KAAKgB,kCAEHT,EAAW,OAASP,KAAKI,oBACpBa,EAAUV,EAAW,eAAYW,gBACnCD,EAAUV,EAAW,cAAWW,kBAC9BlB,KAAKmB,wBACLnB,KAAKoB,mBACVH,EAAUjB,KAAKqB,4BACbrB,KAAKsB,qBAAS,oBACTL,EAAUjB,KAAKuB,yBACpBvB,KAAKwB,yBACJxB,KAAKyB,2BACJzB,KAAK0B,oCACGT,EAAUjB,KAAK2B,oCACnBV,EAAUjB,KAAK4B,2CAKhC5B,KAAK6B,gBAIHH,cAAcI,SACN,UAAVA,EAAEC,KAAmB/B,KAAKgC,iBAC5BhC,KAAKgC,KAAKC,cAAiC,yCAA0BC,WA9ClExC,SAAS,CAACyC,EAAgBC,EAAgBC,EAAgBC,GAOrDC,GAAXC,gCARkB9C,KADpB+C,EAAc,eACM/C,SAAAA"}

package/lib/LightDismissController-a35d0f66.js

@@ -0,0 +1,2 @@
+import{E as s}from"./EventController-d99ebeef.js";import{S as t}from"./ShortcutController-93173ff4.js";class i{constructor(i,o){this.host=i,this.options=o,this.handleEsc=s=>{this.options.isOpen()&&this.options.onDismiss(s)},this.handleClickOut=s=>{var t;if(!this.options.isOpen())return;const i=null!==(t=this.options.isDismissible)&&void 0!==t?t:s=>s!==this.host;s.composedPath().every(i)&&this.options.onDismiss(s)},this.host=i,i.addController(this),this.options=o,this.shortcut=new t(this.host,{Escape:this.handleEsc}),this.events=new s(i)}hostConnected(){this.events.listen(document,"click",this.handleClickOut,!0)}}export{i as L};
+//# sourceMappingURL=LightDismissController-a35d0f66.js.map

package/lib/LightDismissController-a35d0f66.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightDismissController-a35d0f66.js","sources":["../src/common/controllers/LightDismissController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"./EventController.js\"\nimport { ShortcutController } from \"./ShortcutController.js\"\n\ntype LightDismissOptions = {\n  isOpen: () => boolean\n  onDismiss: EventListener\n  isDismissible?: (node: EventTarget) => boolean\n}\n\nexport class LightDismissController implements ReactiveController {\n  private shortcut: ShortcutController\n  private events: EventController\n\n  constructor(private host: ReactiveControllerHost & Element, private options: LightDismissOptions) {\n    this.host = host\n    host.addController(this)\n\n    this.options = options\n    this.shortcut = new ShortcutController(this.host, { Escape: this.handleEsc })\n    this.events = new EventController(host)\n  }\n\n  hostConnected() {\n    this.events.listen(document, \"click\", this.handleClickOut, true)\n  }\n\n  private handleEsc = (e: KeyboardEvent) => {\n    if (!this.options.isOpen()) {\n      return\n    }\n\n    this.options.onDismiss(e)\n  }\n\n  private handleClickOut = (e: MouseEvent) => {\n    if (!this.options.isOpen()) {\n      return\n    }\n\n    const predicate: LightDismissOptions[\"isDismissible\"] = this.options.isDismissible ?? (node => node !== this.host)\n    const isClickOutside = e.composedPath().every(predicate)\n\n    if (isClickOutside) {\n      this.options.onDismiss(e)\n    }\n  }\n}\n"],"names":["LightDismissController","constructor","host","options","this","e","isOpen","onDismiss","predicate","isDismissible","node","composedPath","every","addController","shortcut","ShortcutController","Escape","handleEsc","events","EventController","hostConnected","listen","document","handleClickOut"],"mappings":"6GAUaA,EAIXC,YAAoBC,EAAgDC,GAAhDC,UAAAF,EAAgDE,aAAAD,EAa5DC,eAAaC,IACdD,KAAKD,QAAQG,UAIlBF,KAAKD,QAAQI,UAAUF,IAGjBD,oBAAkBC,UACxB,IAAKD,KAAKD,QAAQG,SAChB,OAGF,MAAME,YAAkDJ,KAAKD,QAAQM,6BAAkBC,GAAQA,IAASN,KAAKF,KACtFG,EAAEM,eAAeC,MAAMJ,IAG5CJ,KAAKD,QAAQI,UAAUF,IA7BzBD,KAAKF,KAAOA,EACZA,EAAKW,cAAcT,MAEnBA,KAAKD,QAAUA,EACfC,KAAKU,SAAW,IAAIC,EAAmBX,KAAKF,KAAM,CAAEc,OAAQZ,KAAKa,YACjEb,KAAKc,OAAS,IAAIC,EAAgBjB,GAGpCkB,gBACEhB,KAAKc,OAAOG,OAAOC,SAAU,QAASlB,KAAKmB,gBAAgB"}

package/lib/NavItem.js

@@ -1,2 +1,2 @@
-import{_ as e,n}from"./query-assigned-elements-37b095c4.js";import{r as t,$ as o,w as a,s as r}from"./lit-element-74b6bb4b.js";import{e as i}from"./property-03f59dce.js";import{o as s}from"./class-map-87423405.js";import{l as c}from"./if-defined-fe657a02.js";import{n as l}from"./ref-7d028e3a.js";import{D as d}from"./DirectionController-82794ee9.js";import{S as v}from"./SlotController-5bfc47d1.js";import{N as p}from"./events-731d0007.js";import{D as h}from"./DraftComponentMixin-9e4b7b34.js";import{F as f}from"./FocusableMixin-ebb67709.js";import"./directive-de55b00a.js";const m=t`:host{all:unset;display:block;font-size:var(--n-font-size-m);font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--n-nav-item-box-shadow,none)}.n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([active]) .n-nav-item{--n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-highlight);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight-active);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;margin-inline-start:var(--n-space-s);font-size:var(--n-font-size-xs);display:inline-block}`;let g=class extends(f(h(r))){constructor(){super(...arguments),this.subnavSlot=new v(this,"subnav"),this.direction=new d(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=o`${this.icon?o`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}<div class="n-content"><slot></slot></div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),o`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return o`<a class="n-nav-item" ${l(this.focusableRef)} aria-current="${c(this.active?"page":void 0)}" href="${this.href||""}">${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:a}</a>`}renderToggle(e){return o`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${l(this.focusableRef)}>${e}<nord-icon size="xs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return o`<button class="n-nav-item" ${l(this.focusableRef)}>${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:a}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};g.styles=m,e([i({type:Boolean,reflect:!0})],g.prototype,"active",void 0),e([i()],g.prototype,"icon",void 0),e([i()],g.prototype,"href",void 0),e([i()],g.prototype,"badge",void 0),e([i({type:Boolean})],g.prototype,"open",void 0),g=e([n("nord-nav-item")],g);var b=g;export{b as default};
+import{_ as e,n}from"./query-assigned-elements-37b095c4.js";import{r as t,$ as o,w as r,s as a}from"./lit-element-74b6bb4b.js";import{e as i}from"./property-03f59dce.js";import{o as s}from"./class-map-87423405.js";import{l as c}from"./if-defined-fe657a02.js";import{n as l}from"./ref-7d028e3a.js";import{D as d}from"./DirectionController-82794ee9.js";import{S as v}from"./SlotController-683d0e7c.js";import{N as p}from"./events-731d0007.js";import{D as h}from"./DraftComponentMixin-9e4b7b34.js";import{F as m}from"./FocusableMixin-ebb67709.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const f=t`:host{all:unset;display:block;font-size:var(--n-font-size-m);font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--n-nav-item-box-shadow,none)}.n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([active]) .n-nav-item{--n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-highlight);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight-active);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;margin-inline-start:var(--n-space-s);font-size:var(--n-font-size-xs);display:inline-block}`;let g=class extends(m(h(a))){constructor(){super(...arguments),this.subnavSlot=new v(this,"subnav"),this.direction=new d(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=o`${this.icon?o`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:r}<div class="n-content"><slot></slot></div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),o`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return o`<a class="n-nav-item" ${l(this.focusableRef)} aria-current="${c(this.active?"page":void 0)}" href="${this.href||""}">${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:r}</a>`}renderToggle(e){return o`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${l(this.focusableRef)}>${e}<nord-icon size="xs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return o`<button class="n-nav-item" ${l(this.focusableRef)}>${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:r}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};g.styles=f,e([i({type:Boolean,reflect:!0})],g.prototype,"active",void 0),e([i()],g.prototype,"icon",void 0),e([i()],g.prototype,"href",void 0),e([i()],g.prototype,"badge",void 0),e([i({type:Boolean})],g.prototype,"open",void 0),g=e([n("nord-nav-item")],g);var b=g;export{b as default};
 //# sourceMappingURL=NavItem.js.map

package/lib/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status draft\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(DraftComponentMixin(LitElement)) {\n  static styles = style\n\n  private subnavSlot = new SlotController(this, \"subnav\")\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property() icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property() href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property() badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ type: Boolean }) open = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // in cases where there is nested nav, and one of the items is active\n    // we should auto-open the nav item for developer convenience\n    if (this.querySelector(`nord-nav-item[active]`)) {\n      this.open = true\n    }\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-content\">\n        <slot></slot>\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    } else if (this.href) {\n      element = this.renderLink(innards)\n    } else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a\n        class=\"n-nav-item\"\n        ${ref(this.focusableRef)}\n        aria-current=${ifDefined(this.active ? \"page\" : undefined)}\n        href=${this.href || \"\"}\n      >\n        ${innards} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? \"true\" : \"false\"}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xs\"\n          class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>\n      ${innards} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n    </button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent(\"toggle\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-item\": NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","DraftComponentMixin","LitElement","constructor","this","SlotController","DirectionController","connectedCallback","super","querySelector","open","render","innards","html","icon","nothing","element","subnavSlot","hasContent","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","ifDefined","active","undefined","badge","toggleOpen","classMap","direction","isRTL","dispatchEvent","NordEvent","style","__decorate","property","type","Boolean","reflect","customElement"],"mappings":"ikFAwBA,IAAqBA,EAArB,cAAqCC,EAAeC,EAAoBC,KAAxEC,kCAGUC,gBAAa,IAAIC,EAAeD,KAAM,UACtCA,eAAY,IAAIE,EAAoBF,MAMAA,aAAS,EAsBxBA,WAAO,EAEpCG,oBACEC,MAAMD,oBAIFH,KAAKK,cAAc,2BACrBL,KAAKM,MAAO,GAIhBC,SACE,MAAMC,EAAUC,CAAI,GAChBT,KAAKU,KAAOD,CAAI,uCAAsCT,KAAKU,8BAA+BC,8CAK9F,IAAIC,EAUJ,OAPEA,EADEZ,KAAKa,WAAWC,WACRd,KAAKe,aAAaP,GACnBR,KAAKgB,KACJhB,KAAKiB,WAAWT,GAEhBR,KAAKkB,aAAaV,GAGvBC,CAAI,wBAELG,gBACWZ,KAAKa,WAAWM,uBAAqBnB,KAAKM,sBAKrDW,WAAWT,GACjB,OAAOC,CAAI,yBAGLW,EAAIpB,KAAKqB,+BACIC,EAAUtB,KAAKuB,OAAS,YAASC,aACzCxB,KAAKgB,MAAQ,OAElBR,KAAWR,KAAKyB,MAAQhB,CAAI,6BAA6BT,KAAKyB,eAAiBd,QAK/EI,aAAaP,GACnB,OAAOC,CAAI,sCAGET,KAAK0B,8BACE1B,KAAKM,KAAO,OAAS,YACnCc,EAAIpB,KAAKqB,iBAETb,gCAIQmB,EAAS,CAAE,iBAAiB,EAAM,QAAS3B,KAAK4B,UAAUC,iEAOlEX,aAAaV,GACnB,OAAOC,CAAI,8BAA8BW,EAAIpB,KAAKqB,iBAC9Cb,KAAWR,KAAKyB,MAAQhB,CAAI,6BAA6BT,KAAKyB,eAAiBd,aAI7Ee,aACN1B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK8B,cAAc,IAAIC,EAAU,aA5G5BpC,SAASqC,EAS4BC,GAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,kCAKxBJ,GAAXC,gCAMWD,GAAXC,gCAKWD,GAAXC,iCAM4BD,GAA5BC,EAAS,CAAEC,KAAMC,sCAhCCzC,KADpB2C,EAAc,kBACM3C,SAAAA"}
+{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status draft\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(DraftComponentMixin(LitElement)) {\n  static styles = style\n\n  private subnavSlot = new SlotController(this, \"subnav\")\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property() icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property() href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property() badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ type: Boolean }) open = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // in cases where there is nested nav, and one of the items is active\n    // we should auto-open the nav item for developer convenience\n    if (this.querySelector(`nord-nav-item[active]`)) {\n      this.open = true\n    }\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-content\">\n        <slot></slot>\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    } else if (this.href) {\n      element = this.renderLink(innards)\n    } else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a\n        class=\"n-nav-item\"\n        ${ref(this.focusableRef)}\n        aria-current=${ifDefined(this.active ? \"page\" : undefined)}\n        href=${this.href || \"\"}\n      >\n        ${innards} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? \"true\" : \"false\"}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xs\"\n          class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>\n      ${innards} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n    </button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent(\"toggle\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-item\": NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","DraftComponentMixin","LitElement","constructor","this","SlotController","DirectionController","connectedCallback","super","querySelector","open","render","innards","html","icon","nothing","element","subnavSlot","hasContent","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","ifDefined","active","undefined","badge","toggleOpen","classMap","direction","isRTL","dispatchEvent","NordEvent","style","__decorate","property","type","Boolean","reflect","customElement"],"mappings":"umFAwBA,IAAqBA,EAArB,cAAqCC,EAAeC,EAAoBC,KAAxEC,kCAGUC,gBAAa,IAAIC,EAAeD,KAAM,UACtCA,eAAY,IAAIE,EAAoBF,MAMAA,aAAS,EAsBxBA,WAAO,EAEpCG,oBACEC,MAAMD,oBAIFH,KAAKK,cAAc,2BACrBL,KAAKM,MAAO,GAIhBC,SACE,MAAMC,EAAUC,CAAI,GAChBT,KAAKU,KAAOD,CAAI,uCAAsCT,KAAKU,8BAA+BC,8CAK9F,IAAIC,EAUJ,OAPEA,EADEZ,KAAKa,WAAWC,WACRd,KAAKe,aAAaP,GACnBR,KAAKgB,KACJhB,KAAKiB,WAAWT,GAEhBR,KAAKkB,aAAaV,GAGvBC,CAAI,wBAELG,gBACWZ,KAAKa,WAAWM,uBAAqBnB,KAAKM,sBAKrDW,WAAWT,GACjB,OAAOC,CAAI,yBAGLW,EAAIpB,KAAKqB,+BACIC,EAAUtB,KAAKuB,OAAS,YAASC,aACzCxB,KAAKgB,MAAQ,OAElBR,KAAWR,KAAKyB,MAAQhB,CAAI,6BAA6BT,KAAKyB,eAAiBd,QAK/EI,aAAaP,GACnB,OAAOC,CAAI,sCAGET,KAAK0B,8BACE1B,KAAKM,KAAO,OAAS,YACnCc,EAAIpB,KAAKqB,iBAETb,gCAIQmB,EAAS,CAAE,iBAAiB,EAAM,QAAS3B,KAAK4B,UAAUC,iEAOlEX,aAAaV,GACnB,OAAOC,CAAI,8BAA8BW,EAAIpB,KAAKqB,iBAC9Cb,KAAWR,KAAKyB,MAAQhB,CAAI,6BAA6BT,KAAKyB,eAAiBd,aAI7Ee,aACN1B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK8B,cAAc,IAAIC,EAAU,aA5G5BpC,SAASqC,EAS4BC,GAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,kCAKxBJ,GAAXC,gCAMWD,GAAXC,gCAKWD,GAAXC,iCAM4BD,GAA5BC,EAAS,CAAEC,KAAMC,sCAhCCzC,KADpB2C,EAAc,kBACM3C,SAAAA"}

package/lib/Radio.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{w as n,r as i,$ as o,s as r}from"./lit-element-74b6bb4b.js";import{e as s}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe657a02.js";import{n as l}from"./ref-7d028e3a.js";import{L as d}from"./LightDomController-011334da.js";import{S as c}from"./SlotController-5bfc47d1.js";import{F as h}from"./FocusableMixin-ebb67709.js";import{F as p}from"./FormAssociatedMixin-ccae91fd.js";import{I as m}from"./InputMixin-94d15730.js";import{s as u}from"./Component-9d373ef3.js";import{s as b}from"./FormField-50bd73d5.js";import"./directive-de55b00a.js";import"./events-731d0007.js";import"./VisuallyHidden.js";class v extends c{constructor(e,t){super(e,t.slotName),this.options=t,this.onChange=()=>{this.syncLightDom()},this.options=t,this.renderHook=document.createComment(this.slotName),this.lightDom=new d(e,{render:()=>this.hasContent?n:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}hostDisconnected(){super.hostDisconnected(),this.renderHook.remove()}syncLightDom(){const e=this.content;e&&this.options.syncLightDom(e)}}const f=i`:host{--n-radio-size:calc(var(--n-space-m) * 1.25);display:inline-block;line-height:var(--n-line-height);font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--n-radio-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0!important;padding:0!important;border:1px solid var(--n-radio-border-color,var(--n-color-border-hover))!important;border-radius:var(--n-border-radius-circle)!important;transition:none!important;display:block!important;inline-size:var(--n-radio-size)!important;block-size:var(--n-radio-size)!important;cursor:pointer}::slotted(input:checked){--n-radio-border-color:var(--n-color-accent);background:var(--n-radio-accent-color)!important}::slotted(input[aria-invalid]){--n-radio-accent-color:var(--n-color-status-danger);--n-radio-border-color:var(--n-radio-accent-color)}::slotted(input:active){opacity:.8}::slotted(input:focus-visible){outline:0!important}::slotted(input:focus){outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)!important}:host([disabled]) ::slotted(input){--n-radio-accent-color:var(--n-color-border-strong);--n-radio-border-color:var(--n-radio-accent-color);background:var(--n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(label){color:var(--n-color-text-weaker);cursor:default}.n-dot{--n-radio-dot-size:var(--n-space-s);--n-radio-dot-inset:calc((var(--n-radio-size) - var(--n-radio-dot-size)) / 2);position:absolute;border-radius:var(--n-border-radius-circle);inline-size:var(--n-radio-dot-size);block-size:var(--n-radio-dot-size);background-color:var(--n-color-text-on-accent);inset-inline-start:var(--n-radio-dot-inset);inset-block-start:var(--n-radio-dot-inset);z-index:var(--n-index-default);pointer-events:none}.n-label-container{padding-block-end:0}::slotted(label){-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l)!important;padding-inline-start:var(--n-space-s)!important;cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}`;let g=0;const k=e=>`nord-radio-${e}-${g++}`;let $=class extends(p(m(h(r)))){constructor(){super(...arguments),this.inputId=k("input"),this.hintId=k("hint"),this.errorId=k("error"),this.hintSlot=new v(this,{slotName:"hint",render:()=>this.hint?o`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:n,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new v(this,{slotName:"label",render:()=>this.label?o`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:n,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):e.htmlFor=this.inputId}}),this.errorSlot=new v(this,{slotName:"error",render:()=>this.error?o`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:n,syncLightDom:e=>{e.id=this.hintId}}),this.inputSlot=new d(this,{render:()=>o`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${l(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}">`}),this.checked=!1,this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}willUpdate(e){if(e.has("checked")){!e.get("checked")&&this.checked&&this.uncheckSiblings()}}render(){return o`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?o`<div class="n-dot"></div>`:n}</div><div class="n-expand"><div class="n-label-container">${e=this.hideLabel,t=()=>o`<slot name="label"></slot><slot name="label-internal"></slot>`,i=e=>o`<nord-visually-hidden>${e}</nord-visually-hidden>`,e?i(t()):t()}<div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint"></slot><slot name="hint-internal"></slot></div></div><div class="n-caption n-error" role="alert" ?hidden="${!this.hasError}"><slot name="error"></slot><slot name="error-internal"></slot></div></div></div>`;var e,t,i}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){e.stopPropagation();const t=e.target;this.checked=t.checked,super.handleChange(e)}};$.styles=[u,b,f],e([s({type:Boolean,reflect:!0})],$.prototype,"checked",void 0),$=e([t("nord-radio")],$);var y=$;export{y as default};
+import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{w as n,r as i,$ as o,s as r}from"./lit-element-74b6bb4b.js";import{e as s}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe657a02.js";import{n as l}from"./ref-7d028e3a.js";import{L as d}from"./LightDomController-011334da.js";import{S as c}from"./SlotController-683d0e7c.js";import{F as h}from"./FocusableMixin-ebb67709.js";import{F as p}from"./FormAssociatedMixin-1f97ed66.js";import{I as m}from"./InputMixin-94d15730.js";import{s as u}from"./Component-9d373ef3.js";import{s as v}from"./FormField-50bd73d5.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";class b extends c{constructor(e,t){super(e,t.slotName),this.options=t,this.onChange=()=>{this.syncLightDom()},this.options=t,this.renderHook=document.createComment(this.slotName),this.lightDom=new d(e,{render:()=>this.hasContent?n:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}hostDisconnected(){this.renderHook.remove()}syncLightDom(){const e=this.content;e&&this.options.syncLightDom(e)}}const f=i`:host{--n-radio-size:calc(var(--n-space-m) * 1.25);display:inline-block;line-height:var(--n-line-height);font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--n-radio-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0!important;padding:0!important;border:1px solid var(--n-radio-border-color,var(--n-color-border-hover))!important;border-radius:var(--n-border-radius-circle)!important;transition:none!important;display:block!important;inline-size:var(--n-radio-size)!important;block-size:var(--n-radio-size)!important;cursor:pointer}::slotted(input:checked){--n-radio-border-color:var(--n-color-accent);background:var(--n-radio-accent-color)!important}::slotted(input[aria-invalid]){--n-radio-accent-color:var(--n-color-status-danger);--n-radio-border-color:var(--n-radio-accent-color)}::slotted(input:active){opacity:.8}::slotted(input:focus-visible){outline:0!important}::slotted(input:focus){outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)!important}:host([disabled]) ::slotted(input){--n-radio-accent-color:var(--n-color-border-strong);--n-radio-border-color:var(--n-radio-accent-color);background:var(--n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(label){color:var(--n-color-text-weaker);cursor:default}.n-dot{--n-radio-dot-size:var(--n-space-s);--n-radio-dot-inset:calc((var(--n-radio-size) - var(--n-radio-dot-size)) / 2);position:absolute;border-radius:var(--n-border-radius-circle);inline-size:var(--n-radio-dot-size);block-size:var(--n-radio-dot-size);background-color:var(--n-color-text-on-accent);inset-inline-start:var(--n-radio-dot-inset);inset-block-start:var(--n-radio-dot-inset);z-index:var(--n-index-default);pointer-events:none}.n-label-container{padding-block-end:0}::slotted(label){-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l)!important;padding-inline-start:var(--n-space-s)!important;cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}`;let g=0;const k=e=>`nord-radio-${e}-${g++}`;let $=class extends(p(m(h(r)))){constructor(){super(...arguments),this.inputId=k("input"),this.hintId=k("hint"),this.errorId=k("error"),this.hintSlot=new b(this,{slotName:"hint",render:()=>this.hint?o`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:n,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new b(this,{slotName:"label",render:()=>this.label?o`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:n,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):e.htmlFor=this.inputId}}),this.errorSlot=new b(this,{slotName:"error",render:()=>this.error?o`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:n,syncLightDom:e=>{e.id=this.hintId}}),this.inputSlot=new d(this,{render:()=>o`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${l(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}">`}),this.checked=!1,this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}willUpdate(e){if(e.has("checked")){!e.get("checked")&&this.checked&&this.uncheckSiblings()}}render(){return o`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?o`<div class="n-dot"></div>`:n}</div><div class="n-expand"><div class="n-label-container">${e=this.hideLabel,t=()=>o`<slot name="label"></slot><slot name="label-internal"></slot>`,i=e=>o`<nord-visually-hidden>${e}</nord-visually-hidden>`,e?i(t()):t()}<div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint"></slot><slot name="hint-internal"></slot></div></div><div class="n-caption n-error" role="alert" ?hidden="${!this.hasError}"><slot name="error"></slot><slot name="error-internal"></slot></div></div></div>`;var e,t,i}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){e.stopPropagation();const t=e.target;this.checked=t.checked,super.handleChange(e)}};$.styles=[u,v,f],e([s({type:Boolean,reflect:!0})],$.prototype,"checked",void 0),$=e([t("nord-radio")],$);var y=$;export{y as default};
 //# sourceMappingURL=Radio.js.map

package/lib/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../src/common/controllers/LightSlotController.ts","../src/radio/Radio.ts","../src/common/directives/wrapIf.ts"],"sourcesContent":["import { nothing, ReactiveControllerHost } from \"lit\"\nimport { LightDomController } from \"./LightDomController.js\"\nimport { SlotController } from \"./SlotController.js\"\n\ntype LightSlotOptions = {\n  slotName: string\n  render: () => unknown\n  syncLightDom: (element: Element) => void\n}\n\n/**\n * Handles cases where a component needs to render to light DOM,\n * and potentially sync component properties to user-supplied content.\n */\nexport class LightSlotController extends SlotController {\n  private renderHook: Comment\n  private lightDom: LightDomController\n\n  constructor(host: ReactiveControllerHost & HTMLElement, private options: LightSlotOptions) {\n    super(host, options.slotName)\n    this.options = options\n\n    // we need a node to hook onto for rendering\n    // without this, multiple controllers rendering to the light DOM\n    // will overwrite each others' content\n    this.renderHook = document.createComment(this.slotName)\n\n    this.lightDom = new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })\n  }\n\n  hostConnected() {\n    super.hostConnected()\n    this.host.appendChild(this.renderHook)\n    this.syncLightDom()\n  }\n\n  hostDisconnected() {\n    super.hostDisconnected()\n    this.renderHook.remove()\n  }\n\n  protected override onChange = () => {\n    this.syncLightDom()\n  }\n\n  private syncLightDom() {\n    const node = this.content\n\n    if (node) {\n      this.options.syncLightDom(node)\n    }\n  }\n}\n","import { 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\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { LightSlotController } from \"../common/controllers/LightSlotController.js\"\nimport { wrapIf } from \"../common/directives/wrapIf.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Radio.css\"\n\nlet id = 0\nconst createId = (suffix: string) => `nord-radio-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n  return element.localName === \"label\"\n}\n\n/**\n * Radio buttons are graphical user interface elements that allow user to choose only one option from\n * a predefined set of mutually exclusive options.\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@customElement(\"nord-radio\")\nexport default class Radio extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override inputId = createId(\"input\")\n  protected override hintId = createId(\"hint\")\n  protected override errorId = createId(\"error\")\n\n  /**\n   * For accessibility reasons, we render some parts of the component to the light DOM.\n   */\n  protected override hintSlot = new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected override labelSlot = new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })\n\n  protected override errorSlot = new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected inputSlot = new LightDomController(this, {\n    render: () =>\n      html`\n        <input\n          slot=\"input\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          ${ref(this.focusableRef)}\n          class=\"n-input\"\n          id=${this.inputId}\n          type=\"radio\"\n          name=${ifDefined(this.name)}\n          .value=${this.value}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n        />\n      `,\n  })\n\n  // eslint-disable-next-line class-methods-use-this\n  protected override get formValue() {\n    // opt out of formdata event, since radio button is in light dom\n    return undefined\n  }\n\n  /**\n   * Controls whether the checkbox is checked or not.\n   */\n  @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n  willUpdate(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has(\"checked\")) {\n      const previousChecked = changedProperties.get(\"checked\")\n\n      // if this component was previous unchecked but is now checked,\n      // then we need to uncheck any radios in the same group\n      if (!previousChecked && this.checked) {\n        this.uncheckSiblings()\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"n-flex\">\n        <div class=\"n-input-container\" @change=${this.handleChange}>\n          <slot name=\"input\"></slot>\n          ${this.checked ? html`<div class=\"n-dot\"></div>` : nothing}\n        </div>\n        <div class=\"n-expand\">\n          <div class=\"n-label-container\">\n            ${wrapIf(\n              this.hideLabel,\n              () => html`\n                <slot name=\"label\"></slot>\n                <slot name=\"label-internal\"></slot>\n              `,\n              content => html`<nord-visually-hidden>${content}</nord-visually-hidden>`\n            )}\n            <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n              <slot name=\"hint\"></slot>\n              <slot name=\"hint-internal\"></slot>\n            </div>\n          </div>\n          <div class=\"n-caption n-error\" role=\"alert\" ?hidden=${!this.hasError}>\n            <slot name=\"error\"></slot>\n            <slot name=\"error-internal\"></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private uncheckSiblings() {\n    const root = this.getRootNode() as Document | ShadowRoot\n\n    root.querySelectorAll<Radio>(`nord-radio[name=\"${this.name}\"]`).forEach(radio => {\n      if (radio !== this) {\n        radio.checked = false\n      }\n    })\n  }\n\n  protected handleChange(e: Event): void {\n    e.stopPropagation()\n    const target = e.target as HTMLInputElement\n\n    this.checked = target.checked\n    super.handleChange(e)\n  }\n\n  private handleBlur = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"blur\", { bubbles: false, cancelable: true }))\n  }\n\n  private handleFocus = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"focus\", { bubbles: false, cancelable: true }))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-radio\": Radio\n  }\n}\n","// some clever typing so that TS knows what happens if you pass true/false values\nexport function wrapIf<TInner, TWrapper>(\n  condition: false,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner\nexport function wrapIf<TInner, TWrapper>(\n  condition: true,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TWrapper\nexport function wrapIf<TInner, TWrapper>(\n  condition: unknown,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner | TWrapper\n\n/**\n * @returns if condition is truthy, return result of wrapper, passing result of inner as arg. if falsy, return result of inner\n */\nexport function wrapIf<TInner, TWrapper>(condition: any, inner: () => TInner, wrapper: (innards: TInner) => TWrapper) {\n  return condition ? wrapper(inner()) : inner()\n}\n"],"names":["LightSlotController","SlotController","constructor","host","options","super","slotName","this","syncLightDom","renderHook","document","createComment","lightDom","LightDomController","render","hasContent","nothing","renderOptions","renderBefore","hostConnected","appendChild","hostDisconnected","remove","node","content","id","createId","suffix","Radio","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","hint","html","hintId","element","label","inputId","localName","isLabel","console","warn","htmlFor","error","errorId","handleBlur","handleFocus","ref","focusableRef","ifDefined","name","value","checked","disabled","required","getDescribedBy","getInvalid","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","formValue","willUpdate","changedProperties","has","get","uncheckSiblings","handleChange","condition","hideLabel","inner","wrapper","hasHint","hasError","getRootNode","querySelectorAll","forEach","radio","target","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"Radio.js","sources":["../src/common/controllers/LightSlotController.ts","../src/radio/Radio.ts","../src/common/directives/wrapIf.ts"],"sourcesContent":["import { nothing, ReactiveControllerHost } from \"lit\"\nimport { LightDomController } from \"./LightDomController.js\"\nimport { SlotController } from \"./SlotController.js\"\n\ntype LightSlotOptions = {\n  slotName: string\n  render: () => unknown\n  syncLightDom: (element: Element) => void\n}\n\n/**\n * Handles cases where a component needs to render to light DOM,\n * and potentially sync component properties to user-supplied content.\n */\nexport class LightSlotController extends SlotController {\n  private renderHook: Comment\n  private lightDom: LightDomController\n\n  constructor(host: ReactiveControllerHost & HTMLElement, private options: LightSlotOptions) {\n    super(host, options.slotName)\n    this.options = options\n\n    // we need a node to hook onto for rendering\n    // without this, multiple controllers rendering to the light DOM\n    // will overwrite each others' content\n    this.renderHook = document.createComment(this.slotName)\n\n    this.lightDom = new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })\n  }\n\n  hostConnected() {\n    super.hostConnected()\n    this.host.appendChild(this.renderHook)\n    this.syncLightDom()\n  }\n\n  hostDisconnected() {\n    this.renderHook.remove()\n  }\n\n  protected override onChange = () => {\n    this.syncLightDom()\n  }\n\n  private syncLightDom() {\n    const node = this.content\n\n    if (node) {\n      this.options.syncLightDom(node)\n    }\n  }\n}\n","import { 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\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { LightSlotController } from \"../common/controllers/LightSlotController.js\"\nimport { wrapIf } from \"../common/directives/wrapIf.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Radio.css\"\n\nlet id = 0\nconst createId = (suffix: string) => `nord-radio-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n  return element.localName === \"label\"\n}\n\n/**\n * Radio buttons are graphical user interface elements that allow user to choose only one option from\n * a predefined set of mutually exclusive options.\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@customElement(\"nord-radio\")\nexport default class Radio extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override inputId = createId(\"input\")\n  protected override hintId = createId(\"hint\")\n  protected override errorId = createId(\"error\")\n\n  /**\n   * For accessibility reasons, we render some parts of the component to the light DOM.\n   */\n  protected override hintSlot = new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected override labelSlot = new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })\n\n  protected override errorSlot = new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected inputSlot = new LightDomController(this, {\n    render: () =>\n      html`\n        <input\n          slot=\"input\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          ${ref(this.focusableRef)}\n          class=\"n-input\"\n          id=${this.inputId}\n          type=\"radio\"\n          name=${ifDefined(this.name)}\n          .value=${this.value}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n        />\n      `,\n  })\n\n  // eslint-disable-next-line class-methods-use-this\n  protected override get formValue() {\n    // opt out of formdata event, since radio button is in light dom\n    return undefined\n  }\n\n  /**\n   * Controls whether the checkbox is checked or not.\n   */\n  @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n  willUpdate(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has(\"checked\")) {\n      const previousChecked = changedProperties.get(\"checked\")\n\n      // if this component was previous unchecked but is now checked,\n      // then we need to uncheck any radios in the same group\n      if (!previousChecked && this.checked) {\n        this.uncheckSiblings()\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"n-flex\">\n        <div class=\"n-input-container\" @change=${this.handleChange}>\n          <slot name=\"input\"></slot>\n          ${this.checked ? html`<div class=\"n-dot\"></div>` : nothing}\n        </div>\n        <div class=\"n-expand\">\n          <div class=\"n-label-container\">\n            ${wrapIf(\n              this.hideLabel,\n              () => html`\n                <slot name=\"label\"></slot>\n                <slot name=\"label-internal\"></slot>\n              `,\n              content => html`<nord-visually-hidden>${content}</nord-visually-hidden>`\n            )}\n            <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n              <slot name=\"hint\"></slot>\n              <slot name=\"hint-internal\"></slot>\n            </div>\n          </div>\n          <div class=\"n-caption n-error\" role=\"alert\" ?hidden=${!this.hasError}>\n            <slot name=\"error\"></slot>\n            <slot name=\"error-internal\"></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private uncheckSiblings() {\n    const root = this.getRootNode() as Document | ShadowRoot\n\n    root.querySelectorAll<Radio>(`nord-radio[name=\"${this.name}\"]`).forEach(radio => {\n      if (radio !== this) {\n        radio.checked = false\n      }\n    })\n  }\n\n  protected handleChange(e: Event): void {\n    e.stopPropagation()\n    const target = e.target as HTMLInputElement\n\n    this.checked = target.checked\n    super.handleChange(e)\n  }\n\n  private handleBlur = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"blur\", { bubbles: false, cancelable: true }))\n  }\n\n  private handleFocus = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"focus\", { bubbles: false, cancelable: true }))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-radio\": Radio\n  }\n}\n","// some clever typing so that TS knows what happens if you pass true/false values\nexport function wrapIf<TInner, TWrapper>(\n  condition: false,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner\nexport function wrapIf<TInner, TWrapper>(\n  condition: true,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TWrapper\nexport function wrapIf<TInner, TWrapper>(\n  condition: unknown,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner | TWrapper\n\n/**\n * @returns if condition is truthy, return result of wrapper, passing result of inner as arg. if falsy, return result of inner\n */\nexport function wrapIf<TInner, TWrapper>(condition: any, inner: () => TInner, wrapper: (innards: TInner) => TWrapper) {\n  return condition ? wrapper(inner()) : inner()\n}\n"],"names":["LightSlotController","SlotController","constructor","host","options","super","slotName","this","syncLightDom","renderHook","document","createComment","lightDom","LightDomController","render","hasContent","nothing","renderOptions","renderBefore","hostConnected","appendChild","hostDisconnected","remove","node","content","id","createId","suffix","Radio","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","hint","html","hintId","element","label","inputId","localName","isLabel","console","warn","htmlFor","error","errorId","handleBlur","handleFocus","ref","focusableRef","ifDefined","name","value","checked","disabled","required","getDescribedBy","getInvalid","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","formValue","willUpdate","changedProperties","has","get","uncheckSiblings","handleChange","condition","hideLabel","inner","wrapper","hasHint","hasError","getRootNode","querySelectorAll","forEach","radio","target","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","reflect","customElement"],"mappings":"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"}

package/lib/Select.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as n,$ as o,s as r}from"./lit-element-74b6bb4b.js";import{l as i}from"./if-defined-fe657a02.js";import{n as s}from"./ref-7d028e3a.js";import{o as a}from"./unsafe-html-989a642b.js";import"./Button.js";import{I as l}from"./InputMixin-94d15730.js";import{F as d}from"./FocusableMixin-ebb67709.js";import{F as c}from"./FormAssociatedMixin-ccae91fd.js";import{s as p}from"./Component-9d373ef3.js";import{s as u}from"./FormField-50bd73d5.js";import{S as b}from"./SlotController-5bfc47d1.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./LightDomController-011334da.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const m=n`.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:2}nord-button{--n-button-text-align:start}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-label-container:hover+.n-select-container nord-button svg,select:hover+nord-button svg{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}::slotted(:not([slot])){display:none}[slot=end] svg{color:var(--n-color-icon);margin-inline-start:var(--n-space-m);margin-inline-end:calc(var(--n-space-s)/ -2);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::slotted([slot=start]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;let v=class extends(c(l(d(r)))){constructor(){super(...arguments),this.defaultSlot=new b(this),this.inputId="select"}get formValue(){return this.value||void 0}render(){const e=this.options,t=this.getButtonText(e);return o`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${s(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${i(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}">${this.placeholder&&o`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="start"></slot>${t}<div slot="end">${a('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></svg>')}</div></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return o`<option value="${i(e.value)}" ?disabled="${e.disabled}" ?selected="${e.value===this.value}">${e.text}</option>`}};v.styles=[p,u,m],v=e([t("nord-select")],v);var h=v;export{h as default};
+import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as o,$ as n,s as r}from"./lit-element-74b6bb4b.js";import{l as i}from"./if-defined-fe657a02.js";import{n as s}from"./ref-7d028e3a.js";import{o as a}from"./unsafe-html-989a642b.js";import"./Button.js";import{I as l}from"./InputMixin-94d15730.js";import{F as d}from"./FocusableMixin-ebb67709.js";import{F as c}from"./FormAssociatedMixin-1f97ed66.js";import{s as p}from"./Component-9d373ef3.js";import{s as u}from"./FormField-50bd73d5.js";import{S as b}from"./SlotController-683d0e7c.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./EventController-d99ebeef.js";import"./LightDomController-011334da.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const m=o`.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:2}nord-button{--n-button-text-align:start}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-label-container:hover+.n-select-container nord-button svg,select:hover+nord-button svg{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}::slotted(:not([slot])){display:none}[slot=end] svg{color:var(--n-color-icon);margin-inline-start:var(--n-space-m);margin-inline-end:calc(var(--n-space-s)/ -2);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::slotted([slot=start]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;let v=class extends(c(l(d(r)))){constructor(){super(...arguments),this.defaultSlot=new b(this),this.inputId="select"}get formValue(){return this.value||void 0}render(){const e=this.options,t=this.getButtonText(e);return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${s(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${i(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="start"></slot>${t}<div slot="end">${a('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></svg>')}</div></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return n`<option value="${i(e.value)}" ?disabled="${e.disabled}" ?selected="${e.value===this.value}">${e.text}</option>`}};v.styles=[p,u,m],v=e([t("nord-select")],v);var h=v;export{h as default};
 //# sourceMappingURL=Select.js.map