@nordhealth/components 4.17.0 → 4.19.0

package/lib/Checkbox.js

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

package/lib/Checkbox.js.map

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

package/lib/DatePicker.js

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

package/lib/DatePicker.js.map

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

package/lib/Fieldset.js

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

package/lib/Fieldset.js.map

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

package/lib/FormAssociatedMixin-B4Qj-CQN.js

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

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

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

package/lib/FormField-BFaVzUjk.js

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

package/lib/FormField-BFaVzUjk.js.map

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

package/lib/Input.js

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

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../icons/lib/assets/navigation-search.js","../src/common/controllers/ResizeController.ts","../src/input/Input.ts","../src/common/input.ts","../src/common/form.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z\" fill=\"currentColor\"/></svg>';\nexport const title = \"navigation-search\";\nexport const tags = \"nordicon navigation menu find search magnifying glass\";\n","import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { isServer } from 'lit'\n\nexport class ResizeController implements ReactiveController {\n  private observer?: ResizeObserver\n  private hadFirstUpdate = false\n  private borderBoxSize?: ResizeObserverSize\n\n  constructor(\n    host: ReactiveControllerHost,\n    private target: () => HTMLElement,\n  ) {\n    host.addController(this)\n\n    if (!isServer) {\n      this.observer = new ResizeObserver(([entry]) => {\n        const [borderBoxSize] = entry.borderBoxSize\n        this.borderBoxSize = borderBoxSize\n        host.requestUpdate()\n      })\n    }\n  }\n\n  get inlineSize() {\n    return this.borderBoxSize?.inlineSize\n  }\n\n  get blockSize() {\n    return this.borderBoxSize?.blockSize\n  }\n\n  hostUpdated() {\n    if (!this.hadFirstUpdate && this.observer) {\n      this.observer.observe(this.target())\n      this.hadFirstUpdate = true\n    }\n  }\n\n  hostConnected() {\n    // in case the host has rendered, disconnected, and is now reconnected\n    if (this.hadFirstUpdate && this.observer) {\n      this.observer.observe(this.target())\n    }\n  }\n\n  hostDisconnected() {\n    if (this.observer) {\n      this.observer.disconnect()\n    }\n  }\n}\n","import * as searchIcon from '@nordhealth/icons/lib/assets/navigation-search.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { ResizeController } from '../common/controllers/ResizeController.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\nimport { getSubmitButton } from '../common/form.js'\nimport { cleanValue } from '../common/input.js'\nimport { AutocompleteMixin } from '../common/mixins/AutocompleteMixin.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { ReadonlyMixin } from '../common/mixins/ReadonlyMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport { TextSelectableMixin } from '../common/mixins/TextSelectableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport formFieldStyle from '../common/styles/FormField.css'\nimport textFieldStyle from '../common/styles/TextField.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Input.css'\n\nIcon.registerIcon(searchIcon)\n\nconst px = (value?: number) => (value ? `${value}px` : undefined)\n\ntype InputMode = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'\nconst defaultInputmodeMap: Record<string, InputMode> = {\n  number: 'numeric',\n  email: 'email',\n  tel: 'tel',\n  url: 'url',\n  search: 'search',\n}\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon or prefix at the start of the input.\n * @slot end - Optional slot used to place an icon or suffix at the end of the input.\n *\n * @cssprop [--n-input-inline-size=240px] - Controls the inline size, or width, of the input.\n * @cssprop [--n-input-background=var(--n-color-active)] - Controls the background of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-color=var(--n-color-text)] - Controls the text color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-color=var(--n-color-border-strong)] - Controls the border color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-input-text-align=start] - Controls the alignment of text within the input itself.\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-input')\nexport default class Input extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(TextSelectableMixin(InputMixin(FocusableMixin(LitElement)))))),\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query('slot[name=\\'start\\']') private startSlot!: HTMLSlotElement\n  @query('slot[name=\\'end\\']') private endSlot!: HTMLSlotElement\n  private startObserver = new ResizeController(this, () => this.startSlot)\n  private endObserver = new ResizeController(this, () => this.endSlot)\n  private direction = new DirectionController(this)\n\n  /**\n   * The type of the input.\n   */\n  @property({ reflect: true }) type:\n    | 'text'\n    | 'email'\n    | 'password'\n    | 'tel'\n    | 'url'\n    | 'search'\n    | 'number'\n    | 'unit'\n    | 'button' = 'text'\n\n  /**\n   * Controls whether the input expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * Optionally disallow certain characters from being used inside the input, using a regex pattern.\n   */\n  @property({ reflect: true, attribute: 'disallow-pattern' }) disallowPattern?: string = undefined\n\n  /**\n   * The inputmode attribute provides a hint to the browser about what type of keyboard to open on mobile devices.\n   * Valid values: none, text, decimal, numeric, tel, search, email, url\n   * When not explicitly set, defaults based on input type:\n   * - type=\"number\" → inputmode=\"numeric\"\n   * - type=\"email\" → inputmode=\"email\"\n   * - type=\"tel\" → inputmode=\"tel\"\n   * - type=\"url\" → inputmode=\"url\"\n   * - type=\"search\" → inputmode=\"search\"\n   * Can be explicitly overridden for any type.\n   */\n  @property({ reflect: true }) inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' = undefined\n\n  render() {\n    const isNumber = this.type === 'number'\n\n    const inputmodeValue = this.inputmode || defaultInputmodeMap[this.type]\n\n    return html`\n      ${this.renderLabel()}\n\n      <div\n        class=${classMap({\n          'n-input-container': true,\n          'is-rtl': this.direction.dir === 'rtl',\n        })}\n        style=${styleMap({\n          '--_n-input-start-inline-size': px(this.startObserver.inlineSize),\n          '--_n-input-end-inline-size': px(this.endObserver.inlineSize),\n        })}\n      >\n        <slot name=\"start\">\n          ${this.type === 'search' ? html`<nord-icon name=\"navigation-search\"></nord-icon>` : nothing}\n        </slot>\n        <input\n          ${ref(this.textSelectableRef)}\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          type=${isNumber || this.type === 'unit' ? 'text' : this.type}\n          inputmode=${ifDefined(inputmodeValue)}\n          pattern=${cond(isNumber, '[0-9]*')}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          ?readonly=${this.readonly}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? ''}\n          placeholder=${ifDefined(this.placeholder)}\n          @input=${this.handleInputChange}\n          @change=${this.handleChange}\n          @keydown=${this.handleKeydown}\n          @select=${this.handleSelect}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          spellcheck=\"false\"\n          autocomplete=${this.autocomplete as any}\n        />\n        <slot name=\"end\"></slot>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key !== 'Enter') {\n      return\n    }\n\n    const { form } = this\n\n    if (form) {\n      const button = getSubmitButton(form)\n      setTimeout(() => button?.click(), 0)\n    }\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    if (this.disallowPattern) {\n      cleanValue(target, new RegExp(this.disallowPattern, 'g'))\n    }\n    this.handleInput(e)\n  }\n\n  protected handleSelect(e: Event) {\n    e.stopPropagation()\n\n    /**\n     * Fired when some text has been selected.\n     */\n    this.dispatchEvent(new NordEvent('select'))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-input': Input\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, '')\n  const filterAfterCursor = afterCursor.replace(regex, '')\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\n","/**\n * Finds a form's submit button. First looking for a button inside form,\n * and then looking for a button whose form attribute is equal to the ID of the form.\n */\nexport function getSubmitButton(form: HTMLFormElement): HTMLButtonElement | null {\n  // we can get away with just looking for native <button> elements,\n  // rather than our component, since our button component renders one to light dom.\n  let button = form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)\n\n  if (!button && form.id) {\n    const root = form.getRootNode() as ShadowRoot | Document\n    button = root.querySelector<HTMLButtonElement>(`button[form=${form.id}]`)\n  }\n\n  return button\n}\n"],"names":["ResizeController","constructor","host","target","this","hadFirstUpdate","addController","isServer","observer","ResizeObserver","entry","borderBoxSize","requestUpdate","inlineSize","_a","blockSize","hostUpdated","observe","hostConnected","hostDisconnected","disconnect","Icon","registerIcon","searchIcon","px","value","undefined","defaultInputmodeMap","number","email","tel","url","search","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","InputMixin","FocusableMixin","LitElement","startObserver","startSlot","endObserver","endSlot","direction","DirectionController","type","expand","disallowPattern","inputmode","handleInputChange","e","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","isNumber","inputmodeValue","html","renderLabel","classMap","dir","styleMap","nothing","ref","textSelectableRef","focusableRef","inputId","ifDefined","cond","disabled","required","readonly","name","placeholder","handleChange","handleKeydown","handleSelect","getDescribedBy","getInvalid","autocomplete","renderError","key","form","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","stopPropagation","dispatchEvent","NordEvent","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","reflect","Boolean","attribute","customElement"],"mappings":"swCAAe,sTAEK,8DADC,4BCERA,EAKX,WAAAC,CACEC,EACQC,GAAAC,KAAMD,OAANA,EALFC,KAAcC,gBAAG,EAOvBH,EAAKI,cAAcF,MAEdG,IACHH,KAAKI,SAAW,IAAIC,gBAAe,EAAEC,MACnC,MAAOC,GAAiBD,EAAMC,cAC9BP,KAAKO,cAAgBA,EACrBT,EAAKU,eAAe,IAGzB,CAED,cAAIC,SACF,OAAyB,UAAlBT,KAAKO,qBAAa,IAAAG,OAAA,EAAAA,EAAED,UAC5B,CAED,aAAIE,SACF,OAAyB,UAAlBX,KAAKO,qBAAa,IAAAG,OAAA,EAAAA,EAAEC,SAC5B,CAED,WAAAC,IACOZ,KAAKC,gBAAkBD,KAAKI,WAC/BJ,KAAKI,SAASS,QAAQb,KAAKD,UAC3BC,KAAKC,gBAAiB,EAEzB,CAED,aAAAa,GAEMd,KAAKC,gBAAkBD,KAAKI,UAC9BJ,KAAKI,SAASS,QAAQb,KAAKD,SAE9B,CAED,gBAAAgB,GACMf,KAAKI,UACPJ,KAAKI,SAASY,YAEjB,ytGCrBHC,EAAKC,aAAaC,GAElB,MAAMC,EAAMC,GAAoBA,EAAQ,GAAGA,WAAYC,EAGjDC,EAAiD,CACrDC,OAAQ,UACRC,MAAO,QACPC,IAAK,MACLC,IAAK,MACLC,OAAQ,UAwBK,IAAMC,EAAN,cAAoBC,EACjCC,EAAoBC,EAAkBC,EAAcC,EAAoBC,EAAWC,EAAeC,UADrF,WAAAxC,uBAOLG,KAAAsC,cAAgB,IAAI1C,EAAiBI,MAAM,IAAMA,KAAKuC,YACtDvC,KAAAwC,YAAc,IAAI5C,EAAiBI,MAAM,IAAMA,KAAKyC,UACpDzC,KAAA0C,UAAY,IAAIC,EAAoB3C,MAKfA,KAAI4C,KASlB,OAK6B5C,KAAM6C,QAAG,EAKO7C,KAAe8C,qBAAYxB,EAa1DtB,KAAS+C,eAAkFzB,EAkEhHtB,KAAAgD,kBAAqBC,IAC3B,MAAMlD,EAASkD,EAAElD,OAGbC,KAAK8C,iBClLG,SAAWI,EAA2BC,GACpD,MAAM9B,MAAEA,GAAU6B,EACZE,EAASF,EAAQG,eAEjBC,EAAejC,EAAMkC,MAAM,EAAGH,GAC9BI,EAAcnC,EAAMkC,MAAMH,EAAQ/B,EAAMoC,QAExCC,EAAuBJ,EAAaK,QAAQR,EAAO,IAGnDS,EAAWF,EAFSF,EAAYG,QAAQR,EAAO,IAG/CU,EAAYH,EAAqBD,OAEvCP,EAAQ7B,MAAQuC,EAChBV,EAAQG,eAAiBQ,EACzBX,EAAQY,aAAeD,CAGzB,CDiKME,CAAWhE,EAAQ,IAAIiE,OAAOhE,KAAK8C,gBAAiB,MAEtD9C,KAAKiE,YAAYhB,EAAE,CAWtB,CAlFC,MAAAiB,SACE,MAAMC,EAAyB,WAAdnE,KAAK4C,KAEhBwB,EAAiBpE,KAAK+C,WAAaxB,EAAoBvB,KAAK4C,MAElE,OAAOyB,CAAI,GACPrE,KAAKsE,4BAGGC,EAAS,CACf,qBAAqB,EACrB,SAAiC,QAAvBvE,KAAK0C,UAAU8B,iBAEnBC,EAAS,CACf,+BAAgCrD,EAAGpB,KAAKsC,cAAc7B,YACtD,6BAA8BW,EAAGpB,KAAKwC,YAAY/B,qCAIlC,WAAdT,KAAK4C,KAAoByB,CAAI,mDAAqDK,kBAGlFC,EAAI3E,KAAK4E,sBACTD,EAAI3E,KAAK6E,qBACN7E,KAAK8E,kCAEHX,GAA0B,SAAdnE,KAAK4C,KAAkB,OAAS5C,KAAK4C,oBAC5CmC,EAAUX,gBACZY,EAAKb,EAAU,yBACbnE,KAAKiF,wBACLjF,KAAKkF,wBACLlF,KAAKmF,mBACVJ,EAAU/E,KAAKoF,kBACH,QAAV1E,EAAAV,KAAKqB,aAAK,IAAAX,EAAAA,EAAI,oBACTqE,EAAU/E,KAAKqF,yBACpBrF,KAAKgD,+BACJhD,KAAKsF,2BACJtF,KAAKuF,2BACNvF,KAAKwF,mCACIT,EAAU/E,KAAKyF,oCACnBV,EAAU/E,KAAK0F,mDAEf1F,KAAK2F,+CAKtB3F,KAAK4F,eAEV,CAEO,aAAAL,CAActC,GACpB,GAAc,UAAVA,EAAE4C,IACJ,OAGF,MAAMC,KAAEA,GAAS9F,KAEjB,GAAI8F,EAAM,CACR,MAAMC,EErKN,SAA0BD,GAG9B,IAAIC,EAASD,EAAKE,cAAiC,0BAE9CD,GAAUD,EAAKG,KAElBF,EADaD,EAAKI,cACJF,cAAiC,eAAeF,EAAKG,QAGrE,OAAOF,CACT,CF0JqBI,CAAgBL,GAC/BM,YAAW,IAAML,aAAA,EAAAA,EAAQM,SAAS,EACnC,CACF,CAYS,YAAAb,CAAavC,GACrBA,EAAEqD,kBAKFtG,KAAKuG,cAAc,IAAIC,EAAU,UAClC,GA9HM3E,EAAM4E,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAE1BC,EAAA,CAAtCC,EAAM,uBAA2DlF,EAAAmF,UAAA,iBAAA,GAC7BF,EAAA,CAApCC,EAAM,qBAAuDlF,EAAAmF,UAAA,eAAA,GAQjCF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KASArF,EAAAmF,UAAA,YAAA,GAKuBF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMtE,KAAMuE,WAAyBtF,EAAAmF,UAAA,cAAA,GAKEF,EAAA,CAA3DG,EAAS,CAAEC,SAAS,EAAME,UAAW,sBAA0DvF,EAAAmF,UAAA,uBAAA,GAanEF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAA4GrF,EAAAmF,UAAA,iBAAA,GA9C9GnF,EAAKiF,EAAA,CADzBO,EAAc,eACMxF,SAAAA"}
+{"version":3,"file":"Input.js","sources":["../../icons/lib/assets/navigation-search.js","../src/common/controllers/ResizeController.ts","../src/input/Input.ts","../src/common/input.ts","../src/common/form.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z\" fill=\"currentColor\"/></svg>';\nexport const title = \"navigation-search\";\nexport const tags = \"nordicon navigation menu find search magnifying glass\";\n","import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { isServer } from 'lit'\n\nexport class ResizeController implements ReactiveController {\n  private observer?: ResizeObserver\n  private hadFirstUpdate = false\n  private borderBoxSize?: ResizeObserverSize\n\n  constructor(\n    host: ReactiveControllerHost,\n    private target: () => HTMLElement,\n  ) {\n    host.addController(this)\n\n    if (!isServer) {\n      this.observer = new ResizeObserver(([entry]) => {\n        const [borderBoxSize] = entry.borderBoxSize\n        this.borderBoxSize = borderBoxSize\n        host.requestUpdate()\n      })\n    }\n  }\n\n  get inlineSize() {\n    return this.borderBoxSize?.inlineSize\n  }\n\n  get blockSize() {\n    return this.borderBoxSize?.blockSize\n  }\n\n  hostUpdated() {\n    if (!this.hadFirstUpdate && this.observer) {\n      this.observer.observe(this.target())\n      this.hadFirstUpdate = true\n    }\n  }\n\n  hostConnected() {\n    // in case the host has rendered, disconnected, and is now reconnected\n    if (this.hadFirstUpdate && this.observer) {\n      this.observer.observe(this.target())\n    }\n  }\n\n  hostDisconnected() {\n    if (this.observer) {\n      this.observer.disconnect()\n    }\n  }\n}\n","import * as searchIcon from '@nordhealth/icons/lib/assets/navigation-search.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { ResizeController } from '../common/controllers/ResizeController.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\nimport { getSubmitButton } from '../common/form.js'\nimport { cleanValue } from '../common/input.js'\nimport { AutocompleteMixin } from '../common/mixins/AutocompleteMixin.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { ReadonlyMixin } from '../common/mixins/ReadonlyMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport { TextSelectableMixin } from '../common/mixins/TextSelectableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport formFieldStyle from '../common/styles/FormField.css'\nimport textFieldStyle from '../common/styles/TextField.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Input.css'\n\nIcon.registerIcon(searchIcon)\n\nconst px = (value?: number) => (value ? `${value}px` : undefined)\n\ntype InputMode = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'\nconst defaultInputmodeMap: Record<string, InputMode> = {\n  number: 'numeric',\n  email: 'email',\n  tel: 'tel',\n  url: 'url',\n  search: 'search',\n}\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon or prefix at the start of the input.\n * @slot end - Optional slot used to place an icon or suffix at the end of the input.\n *\n * @cssprop [--n-input-inline-size=240px] - Controls the inline size, or width, of the input.\n * @cssprop [--n-input-background=var(--n-color-active)] - Controls the background of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-color=var(--n-color-text)] - Controls the text color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-color=var(--n-color-border-strong)] - Controls the border color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-input-text-align=start] - Controls the alignment of text within the input itself.\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-input')\nexport default class Input extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(TextSelectableMixin(InputMixin(FocusableMixin(LitElement)))))),\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query('slot[name=\\'start\\']') private startSlot!: HTMLSlotElement\n  @query('slot[name=\\'end\\']') private endSlot!: HTMLSlotElement\n  private startObserver = new ResizeController(this, () => this.startSlot)\n  private endObserver = new ResizeController(this, () => this.endSlot)\n  private direction = new DirectionController(this)\n\n  /**\n   * The type of the input.\n   */\n  @property({ reflect: true }) type:\n    | 'text'\n    | 'email'\n    | 'password'\n    | 'tel'\n    | 'url'\n    | 'search'\n    | 'number'\n    | 'unit'\n    | 'button' = 'text'\n\n  /**\n   * Controls whether the input expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * Optionally disallow certain characters from being used inside the input, using a regex pattern.\n   */\n  @property({ reflect: true, attribute: 'disallow-pattern' }) disallowPattern?: string = undefined\n\n  /**\n   * The inputmode attribute provides a hint to the browser about what type of keyboard to open on mobile devices.\n   * Valid values: none, text, decimal, numeric, tel, search, email, url\n   * When not explicitly set, defaults based on input type:\n   * - type=\"number\" → inputmode=\"numeric\"\n   * - type=\"email\" → inputmode=\"email\"\n   * - type=\"tel\" → inputmode=\"tel\"\n   * - type=\"url\" → inputmode=\"url\"\n   * - type=\"search\" → inputmode=\"search\"\n   * Can be explicitly overridden for any type.\n   */\n  @property({ reflect: true }) inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' = undefined\n\n  render() {\n    const isNumber = this.type === 'number'\n\n    const inputmodeValue = this.inputmode || defaultInputmodeMap[this.type]\n\n    return html`\n      ${this.renderLabel()}\n\n      <div\n        class=${classMap({\n          'n-input-container': true,\n          'is-rtl': this.direction.dir === 'rtl',\n        })}\n        style=${styleMap({\n          '--_n-input-start-inline-size': px(this.startObserver.inlineSize),\n          '--_n-input-end-inline-size': px(this.endObserver.inlineSize),\n        })}\n      >\n        <slot name=\"start\">\n          ${this.type === 'search' ? html`<nord-icon name=\"navigation-search\"></nord-icon>` : nothing}\n        </slot>\n        <input\n          ${ref(this.textSelectableRef)}\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          type=${isNumber || this.type === 'unit' ? 'text' : this.type}\n          inputmode=${ifDefined(inputmodeValue)}\n          pattern=${cond(isNumber, '[0-9]*')}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          ?readonly=${this.readonly}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? ''}\n          placeholder=${ifDefined(this.placeholder)}\n          @input=${this.handleInputChange}\n          @change=${this.handleChange}\n          @keydown=${this.handleKeydown}\n          @select=${this.handleSelect}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          spellcheck=\"false\"\n          autocomplete=${this.autocomplete as any}\n        />\n        <slot name=\"end\"></slot>\n      </div>\n\n      ${this.renderError()}\n      ${this.isHintBelow ? this.renderHint() : nothing}\n    `\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key !== 'Enter') {\n      return\n    }\n\n    const { form } = this\n\n    if (form) {\n      const button = getSubmitButton(form)\n      setTimeout(() => button?.click(), 0)\n    }\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    if (this.disallowPattern) {\n      cleanValue(target, new RegExp(this.disallowPattern, 'g'))\n    }\n    this.handleInput(e)\n  }\n\n  protected handleSelect(e: Event) {\n    e.stopPropagation()\n\n    /**\n     * Fired when some text has been selected.\n     */\n    this.dispatchEvent(new NordEvent('select'))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-input': Input\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, '')\n  const filterAfterCursor = afterCursor.replace(regex, '')\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\n","/**\n * Finds a form's submit button. First looking for a button inside form,\n * and then looking for a button whose form attribute is equal to the ID of the form.\n */\nexport function getSubmitButton(form: HTMLFormElement): HTMLButtonElement | null {\n  // we can get away with just looking for native <button> elements,\n  // rather than our component, since our button component renders one to light dom.\n  let button = form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)\n\n  if (!button && form.id) {\n    const root = form.getRootNode() as ShadowRoot | Document\n    button = root.querySelector<HTMLButtonElement>(`button[form=${form.id}]`)\n  }\n\n  return button\n}\n"],"names":["ResizeController","constructor","host","target","this","hadFirstUpdate","addController","isServer","observer","ResizeObserver","entry","borderBoxSize","requestUpdate","inlineSize","_a","blockSize","hostUpdated","observe","hostConnected","hostDisconnected","disconnect","Icon","registerIcon","searchIcon","px","value","undefined","defaultInputmodeMap","number","email","tel","url","search","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","InputMixin","FocusableMixin","LitElement","startObserver","startSlot","endObserver","endSlot","direction","DirectionController","type","expand","disallowPattern","inputmode","handleInputChange","e","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","isNumber","inputmodeValue","html","renderLabel","classMap","dir","styleMap","nothing","ref","textSelectableRef","focusableRef","inputId","ifDefined","cond","disabled","required","readonly","name","placeholder","handleChange","handleKeydown","handleSelect","getDescribedBy","getInvalid","autocomplete","renderError","isHintBelow","renderHint","key","form","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","stopPropagation","dispatchEvent","NordEvent","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","reflect","Boolean","attribute","customElement"],"mappings":"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"}

package/lib/Radio.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as i,html as e,nothing as o,LitElement as n}from"lit";import{property as r,customElement as a}from"lit/decorators.js";import{ref as s}from"lit/directives/ref.js";import{L as l}from"./LightDomController-DIwtVelV.js";import{L as d}from"./LightSlotController-Coyy4nqS.js";import{o as c}from"./observe-D0n0zOfU.js";import{c as h}from"./cond-CI1KbneT.js";import{F as p}from"./FocusableMixin-BlQLNPdJ.js";import{F as m}from"./FormAssociatedMixin-DFL7yabe.js";import{I as v}from"./InputMixin-LetXsCyv.js";import{S as u}from"./SizeMixin-CU9cLbLC.js";import{s as b}from"./Component-DSU3Qp0O.js";import{s as f}from"./FormField--eLuhPue.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./FormDataController-OUt5L5uC.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";const g=i`:host{--_n-radio-size:calc(var(--n-space-m) * 1.25);--_n-radio-dot-size:var(--n-space-s);--_n-radio-dot-inset:calc((var(--_n-radio-size) - var(--_n-radio-dot-size)) / 2);display:inline-block;line-height:var(--n-line-height)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--_n-radio-accent-color:var(--n-color-accent);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(label){color:var(--n-color-text-weaker);cursor:default}:host([disabled]) ::slotted(input){background:var(--_n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(input:not(:checked)){--_n-radio-accent-color:var(--n-color-active);--_n-radio-border-color:var(--n-color-border-neutral)}:host([disabled]) ::slotted(input:checked){opacity:.3}.n-dot{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{margin-block-end:0}::slotted(label){user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height)!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:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([size='s']){--_n-radio-size:var(--n-size-icon-m);--_n-radio-dot-size:calc(var(--n-size-icon-s) / 2)}:host([size='s']:not([hide-label])) .n-input-container{margin:calc(var(--n-space-s)/ 3) 0}:host([size='l']){--_n-radio-size:var(--n-size-icon-l);--_n-radio-dot-size:var(--n-size-icon-xs)}:host([size='l']:not([hide-label])) .n-label-container{margin:2px 0 0}`;let k=0;const $=t=>`nord-radio-${t}-${k++}`;let _=class extends(u(m(v(p(n))))){constructor(){super(...arguments),this.inputId=$("input"),this.hintId=$("hint"),this.errorId=$("error"),this.hintSlot=new d(this,{slotName:"hint",render:()=>this.hint?e`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:o,syncLightDom:t=>{t.id=this.hintId}}),this.labelSlot=new d(this,{slotName:"label",render:()=>this.label?e`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:o,syncLightDom:t=>{!function(t){return"label"===t.localName}(t)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):t.htmlFor=this.inputId}}),this.errorSlot=new d(this,{slotName:"error",render:()=>this.error?e`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:o,syncLightDom:t=>{t.id=this.hintId}}),this.inputSlot=new l(this,{render:()=>e`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${s(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" name="${h(this.name)}" .value="${h(this.value)}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${h(this.getDescribedBy())}" aria-invalid="${h(this.getInvalid())}" form="${h(this._formId)}">`}),this.checked=!1,this.handleBlur=t=>{t.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}render(){return e`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?e`<div class="n-dot"></div>`:o}</div><div class="n-expand"><div class="n-label-container">${t=this.hideLabel,i=()=>e`<slot name="label"></slot><slot name="label-internal"></slot>`,n=t=>e`<nord-visually-hidden>${t}</nord-visually-hidden>`,t?n(i()):i()}<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 t,i,n}handleCheckedChange(t){!t&&this.checked&&this.uncheckSiblings()}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((t=>{t!==this&&t.checked&&(t.checked=!1,function(t){t.style.display="none",t.offsetHeight,t.style.display="inline-block"}(t))}))}handleChange(t){t.stopPropagation();const i=t.target;this.checked=i.checked,super.handleChange(t)}};_.styles=[b,f,g],t([r({type:Boolean,reflect:!0})],_.prototype,"checked",void 0),t([c("checked")],_.prototype,"handleCheckedChange",null),_=t([a("nord-radio")],_);var z=_;export{z as default};
+import{_ as i}from"./tslib.es6-CmLYFWVC.js";import{css as t,html as e,nothing as o,LitElement as n}from"lit";import{property as r,customElement as a}from"lit/decorators.js";import{ref as s}from"lit/directives/ref.js";import{L as l}from"./LightDomController-DIwtVelV.js";import{L as d}from"./LightSlotController-Coyy4nqS.js";import{o as c}from"./observe-D0n0zOfU.js";import{c as h}from"./cond-CI1KbneT.js";import{F as p}from"./FocusableMixin-BlQLNPdJ.js";import{F as m}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as v}from"./InputMixin-LetXsCyv.js";import{S as u}from"./SizeMixin-CU9cLbLC.js";import{s as b}from"./Component-DSU3Qp0O.js";import{s as f}from"./FormField-BFaVzUjk.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./FormDataController-OUt5L5uC.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";const g=t`:host{--_n-radio-size:calc(var(--n-space-m) * 1.25);--_n-radio-dot-size:var(--n-space-s);--_n-radio-dot-inset:calc((var(--_n-radio-size) - var(--_n-radio-dot-size)) / 2);display:inline-block;line-height:var(--n-line-height)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--_n-radio-accent-color:var(--n-color-accent);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(label){color:var(--n-color-text-weaker);cursor:default}:host([disabled]) ::slotted(input){background:var(--_n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(input:not(:checked)){--_n-radio-accent-color:var(--n-color-active);--_n-radio-border-color:var(--n-color-border-neutral)}:host([disabled]) ::slotted(input:checked){opacity:.3}.n-dot{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{margin-block-end:0}::slotted(label){user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height)!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:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([hint-below]) :is(.n-hint, .n-error){padding-inline-start:0}:host([size='s']){--_n-radio-size:var(--n-size-icon-m);--_n-radio-dot-size:calc(var(--n-size-icon-s) / 2)}:host([size='s']:not([hide-label])) .n-input-container{margin:calc(var(--n-space-s)/ 3) 0}:host([size='l']){--_n-radio-size:var(--n-size-icon-l);--_n-radio-dot-size:var(--n-size-icon-xs)}:host([size='l']:not([hide-label])) .n-label-container{margin:2px 0 0}`;let $=0;const k=i=>`nord-radio-${i}-${$++}`;let _=class extends(u(m(v(p(n))))){constructor(){super(...arguments),this.inputId=k("input"),this.hintId=k("hint"),this.errorId=k("error"),this.hintSlot=new d(this,{slotName:"hint",render:()=>this.hint?e`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:o,syncLightDom:i=>{i.id=this.hintId}}),this.labelSlot=new d(this,{slotName:"label",render:()=>this.label?e`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:o,syncLightDom:i=>{!function(i){return"label"===i.localName}(i)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):i.htmlFor=this.inputId}}),this.errorSlot=new d(this,{slotName:"error",render:()=>this.error?e`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:o,syncLightDom:i=>{i.id=this.hintId}}),this.inputSlot=new l(this,{render:()=>e`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${s(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" name="${h(this.name)}" .value="${h(this.value)}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${h(this.getDescribedBy())}" aria-invalid="${h(this.getInvalid())}" form="${h(this._formId)}">`}),this.checked=!1,this.handleBlur=i=>{i.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=i=>{i.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}render(){const i=e`<div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint"></slot><slot name="hint-internal"></slot></div>`,t=e`<div class="n-caption n-error" role="alert" ?hidden="${!this.hasError}"><slot name="error"></slot><slot name="error-internal"></slot></div>`;return e`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?e`<div class="n-dot"></div>`:o}</div><div class="n-expand"><div class="n-label-container">${n=this.hideLabel,r=()=>e`<slot name="label"></slot><slot name="label-internal"></slot>`,a=i=>e`<nord-visually-hidden>${i}</nord-visually-hidden>`,n?a(r()):r()} ${this.isHintBelow?o:i}</div>${this.isHintBelow?o:t}</div></div>${this.isHintBelow?t:o} ${this.isHintBelow?i:o}`;var n,r,a}handleCheckedChange(i){!i&&this.checked&&this.uncheckSiblings()}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((i=>{i!==this&&i.checked&&(i.checked=!1,function(i){i.style.display="none",i.offsetHeight,i.style.display="inline-block"}(i))}))}handleChange(i){i.stopPropagation();const t=i.target;this.checked=t.checked,super.handleChange(i)}};_.styles=[b,f,g],i([r({type:Boolean,reflect:!0})],_.prototype,"checked",void 0),i([c("checked")],_.prototype,"handleCheckedChange",null),_=i([a("nord-radio")],_);var z=_;export{z as default};
 //# sourceMappingURL=Radio.js.map