npm - @nordhealth/components - Versions diffs - 2.2.0 → 2.3.0 - Mend

@nordhealth/components 2.2.0 → 2.3.0

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

Files changed (26) hide show

package/custom-elements.json +1242 -990
package/lib/Checkbox.js +1 -1
package/lib/Checkbox.js.map +1 -1
package/lib/DatePicker.js +1 -1
package/lib/DatePicker.js.map +1 -1
package/lib/Input.js +1 -1
package/lib/Input.js.map +1 -1
package/lib/Select.js +1 -1
package/lib/Select.js.map +1 -1
package/lib/SizeMixin-4559b224.js +2 -0
package/lib/SizeMixin-4559b224.js.map +1 -0
package/lib/{TextField-2df7c697.js → TextField-94b0839b.js} +2 -2
package/lib/{TextField-2df7c697.js.map → TextField-94b0839b.js.map} +1 -1
package/lib/Textarea.js +1 -1
package/lib/Textarea.js.map +1 -1
package/lib/bundle.js +7 -7
package/lib/bundle.js.map +1 -1
package/lib/index.js +1 -1
package/lib/src/checkbox/Checkbox.d.ts +1 -1
package/lib/src/common/mixins/SizeMixin.d.ts +8 -0
package/lib/src/date-picker/DatePicker.d.ts +1 -1
package/lib/src/date-picker/DatePicker.test.d.ts +1 -0
package/lib/src/input/Input.d.ts +1 -1
package/lib/src/select/Select.d.ts +1 -1
package/lib/src/textarea/Textarea.d.ts +1 -1
package/package.json +3 -3

package/lib/Checkbox.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as r,y as o,s as i}from"./lit-element-79bc2e0e.js";import{e as t}from"./property-03f59dce.js";import{l as c}from"./if-defined-f43b1487.js";import{n as a}from"./ref-697b28b5.js";import s from"./Icon.js";import{F as l}from"./FocusableMixin-99db12c1.js";import{F as d}from"./FormAssociatedMixin-f6e5b3cd.js";import{I as p}from"./InputMixin-158f63fb.js";import{s as h}from"./Component-49a41387.js";import{s as b}from"./FormField-72062bf1.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./unsafe-html-be8023cd.js";import"./observe-a9c6dfb6.js";import"./cond-0a8d4554.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var m=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z"/></svg>',title:"interface-checked-small",tags:"nordicon interface checked small symbol checkmark done ready"});var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M129.5 80.5h-119a10.5 10.5 0 0 1 0-21h119a10.5 10.5 0 0 1 0 21z"/></svg>',title:"interface-remove-small",tags:"nordicon interface remove small delete erase minimize line"});const u=r`: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);display:inline-block}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}input{-moz-appearance:none;-webkit-appearance:none;appearance:none;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{--_n-checkbox-accent-color:var(--n-color-border-strong);--_n-checkbox-border-color:var(--_n-checkbox-accent-color);background:var(--_n-checkbox-accent-color);cursor:default;opacity:1}nord-icon{display:none;position:absolute;color:var(--n-color-text-on-accent);inset:calc(var(--n-space-s)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked~.icon-checked,input:indeterminate~.icon-indeterminate{display:block}.n-label-container{padding-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}`;s.registerIcon(m),s.registerIcon(v);let f=class extends(d(p(l(i)))){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 ${a(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${c(this.name)}" .value="${this.value}" .checked="${this.checked}" .indeterminate="${this.indeterminate}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${c(this.getDescribedBy())}" aria-invalid="${c(this.getInvalid())}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small" size="s"></nord-icon><nord-icon class="icon-indeterminate" name="interface-remove-small" size="s"></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)}};f.styles=[h,b,u],e([t({type:Boolean})],f.prototype,"indeterminate",void 0),e([t({type:Boolean})],f.prototype,"checked",void 0),f=e([n("nord-checkbox")],f);var k=f;export{k as default};
+import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as r,s as i}from"./lit-element-79bc2e0e.js";import{e as t}from"./property-03f59dce.js";import{l as a}from"./if-defined-f43b1487.js";import{n as c}from"./ref-697b28b5.js";import s from"./Icon.js";import{F as l}from"./FocusableMixin-99db12c1.js";import{F as d}from"./FormAssociatedMixin-f6e5b3cd.js";import{I as p}from"./InputMixin-158f63fb.js";import{S as h,i as m}from"./SizeMixin-4559b224.js";import{s as b}from"./Component-49a41387.js";import{s as v}from"./FormField-72062bf1.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./unsafe-html-be8023cd.js";import"./observe-a9c6dfb6.js";import"./cond-0a8d4554.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z"/></svg>',title:"interface-checked-small",tags:"nordicon interface checked small symbol checkmark done ready"});var f=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M129.5 80.5h-119a10.5 10.5 0 0 1 0-21h119a10.5 10.5 0 0 1 0 21z"/></svg>',title:"interface-remove-small",tags:"nordicon interface remove small delete erase minimize line"});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);display:inline-block}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}input{-moz-appearance:none;-webkit-appearance:none;appearance:none;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{--_n-checkbox-accent-color:var(--n-color-border-strong);--_n-checkbox-border-color:var(--_n-checkbox-accent-color);background:var(--_n-checkbox-accent-color);cursor:default;opacity:1}nord-icon{display:none;position:absolute;color:var(--n-color-text-on-accent);inset:calc(var(--n-space-s)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked~.icon-checked,input:indeterminate~.icon-indeterminate{display:block}.n-label-container{padding-block-end:0}label{-webkit-user-select:none;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:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}:host([size="s"]){--_n-checkbox-size:var(--n-space-m)}:host([size="s"]) .n-label-container{transform:translateY(-2px)}:host([size="l"]){--_n-checkbox-size:var(--n-space-l)}`;s.registerIcon(u),s.registerIcon(f);let x=class extends(h(d(p(l(i))))){constructor(){super(...arguments),this.indeterminate=!1,this.checked=!1}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=m[this.size]||m.m;return r`<div class="n-flex"><div class="n-input-container"><input ${c(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" size="${e}"></nord-icon><nord-icon class="icon-indeterminate" name="interface-remove-small" size="${e}"></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=[b,v,k],e([t({type:Boolean})],x.prototype,"indeterminate",void 0),e([t({type:Boolean})],x.prototype,"checked",void 0),x=e([n("nord-checkbox")],x);var g=x;export{g as default};
 //# sourceMappingURL=Checkbox.js.map

package/lib/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","sources":["../../icons/lib/assets/interface-checked-small.js","../../icons/lib/assets/interface-remove-small.js","../src/checkbox/Checkbox.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z\"/></svg>'\nexport const title = \"interface-checked-small\"\nexport const tags = \"nordicon interface checked small symbol checkmark done ready\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M129.5 80.5h-119a10.5 10.5 0 0 1 0-21h119a10.5 10.5 0 0 1 0 21z\"/></svg>'\nexport const title = \"interface-remove-small\"\nexport const tags = \"nordicon interface remove small delete erase minimize line\"\n","import { 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\"\nimport * as checkedIcon from \"@nordhealth/icons/lib/assets/interface-checked-small.js\"\nimport * as indeterminateIcon from \"@nordhealth/icons/lib/assets/interface-remove-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport 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@customElement(\"nord-checkbox\")\nexport default class Checkbox extends 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({ type: Boolean }) indeterminate = false\n\n /\n Controls whether the checkbox is checked or not.\n */\n @property({ 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\" size~~=\"s\"~~></nord-icon>\n <nord-icon class=\"icon-indeterminate\" name=\"interface-remove-small\" size~~=\"s\"~~></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","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","type","Boolean","prototype","customElement"],"mappings":"~~u0BAAe~~,6VACM,+BACD,6GCFL,4KACM,8BACD,~~u2DCcpBA~~,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAalB,IAAqBC,EAArB,cAAsCC,EAAoBC,EAAWC,EAAeC,~~MAApFC~~,kCAU+BC,KAAaC,eAAG,EAKhBD,KAAOE,SAAY,~~CAkCjD~~,~~CA9CwBC~~,gBACrB,OAAOH,KAAKE,QAAUF,KAAKI,OAAS,UAAOC,CAC5C,CAYDC,SACE,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~~,~~0NAKKjB~~,~~KAAKkB~~,~~iBAAiBlB~~,~~KAAKmB~~,2BAGxD,CAESF,aAAaG,GACrB,MAAMC,EAASD,EAAEC,~~OACjBrB~~,KAAKE,~~QAAUmB~~,~~EAAOnB~~,~~QACtBoB~~,MAAML,aAAaG,EACpB,GA/~~CM1B~~,~~EAAM6B~~,OAAG,CAACC,EAAgBC,EAAgBC,GASpBC,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,~~WAAgCpC~~,~~EAAAqC~~,UAAA,qBAAA,GAKrBJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,~~WAAmCpC~~,~~EAAAqC~~,UAAA,eAAA,~~GAflCrC~~,~~EAAQiC~~,EAAA,CAD5BK,EAAc,~~kBACMtC~~,SAAAA"}
1	+ {"version":3,"file":"Checkbox.js","sources":["../../icons/lib/assets/interface-checked-small.js","../../icons/lib/assets/interface-remove-small.js","../src/checkbox/Checkbox.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z\"/></svg>'\nexport const title = \"interface-checked-small\"\nexport const tags = \"nordicon interface checked small symbol checkmark done ready\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M129.5 80.5h-119a10.5 10.5 0 0 1 0-21h119a10.5 10.5 0 0 1 0 21z\"/></svg>'\nexport const title = \"interface-remove-small\"\nexport const tags = \"nordicon interface remove small delete erase minimize line\"\n","import { 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\"\nimport * as checkedIcon from \"@nordhealth/icons/lib/assets/interface-checked-small.js\"\nimport * as indeterminateIcon from \"@nordhealth/icons/lib/assets/interface-remove-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { SizeMixin, iconSizeMap } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\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@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({ type: Boolean }) indeterminate = false\n\n /\n Controls whether the checkbox is checked or not.\n */\n @property({ type: Boolean }) checked: boolean = false\n\n render() {\n const iconSize = iconSizeMap[this.size] \|\| iconSizeMap.m\n\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\" size=${iconSize}></nord-icon>\n <nord-icon class=\"icon-indeterminate\" name=\"interface-remove-small\" size=${iconSize}></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","iconSize","iconSizeMap","size","m","html","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","renderLabel","renderError","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","prototype","customElement"],"mappings":"03BAAe,6VACM,+BACD,6GCFL,4KACM,8BACD,shECepBA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAalB,IAAqBC,EAArB,cAAsCC,EAAUC,EAAoBC,EAAWC,EAAeC,OAA9FC,kCAU+BC,KAAaC,eAAG,EAKhBD,KAAOE,SAAY,CAoCjD,CAhDwBC,gBACrB,OAAOH,KAAKE,QAAUF,KAAKI,OAAS,UAAOC,CAC5C,CAYDC,SACE,MAAMC,EAAWC,EAAYR,KAAKS,OAASD,EAAYE,EAEvD,OAAOC,CAAI,6DAIDC,EAAIZ,KAAKa,qCAENb,KAAKc,kCAEHC,EAAUf,KAAKgB,kBACbhB,KAAKI,oBACHJ,KAAKE,4BACCF,KAAKC,6BACVD,KAAKiB,wBACLjB,KAAKkB,+BACEH,EAAUf,KAAKmB,oCACnBJ,EAAUf,KAAKoB,2BACpBpB,KAAKqB,sFAEqDd,4FACKA,8CAErDP,KAAKsB,iBAAiBtB,KAAKuB,2BAGxD,CAESF,aAAaG,GACrB,MAAMC,EAASD,EAAEC,OACjBzB,KAAKE,QAAUuB,EAAOvB,QACtBwB,MAAML,aAAaG,EACpB,GAjDM/B,EAAMkC,OAAG,CAACC,EAAgBC,EAAgBC,GASpBC,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAgCzC,EAAA0C,UAAA,qBAAA,GAKrBJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCzC,EAAA0C,UAAA,eAAA,GAflC1C,EAAQsC,EAAA,CAD5BK,EAAc,kBACM3C,SAAAA"}

package/lib/DatePicker.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i,y as o,b as a,s as n}from"./lit-element-79bc2e0e.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as l}from"./query-2d22378e.js";import{o as d}from"./class-map-cd6c8cbd.js";import{n as c}from"./ref-697b28b5.js";import{l as p}from"./if-defined-f43b1487.js";import{c as m}from"./interface-close-small-44ababc3.js";import{F as h}from"./FocusableMixin-99db12c1.js";import{F as u}from"./FormAssociatedMixin-f6e5b3cd.js";import{I as b}from"./InputMixin-158f63fb.js";import{m as v,p as g,a as f}from"./dates-a8de5b83.js";import{N as y}from"./events-731d0007.js";import{S as w,i as x}from"./Calendar-a0246aa3.js";import{L as j}from"./LightDismissController-a2645ae6.js";import{LocalizeController as k}from"./LocalizeController.js";import"./Button.js";import z from"./Icon.js";import"./VisuallyHidden.js";import{s as $}from"./Component-49a41387.js";import{s as D}from"./FormField-72062bf1.js";import{R as F,s as C}from"./TextField-2df7c697.js";import{isoAdapter as L}from"./date-adapter.js";import{c as A}from"./cond-0a8d4554.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./repeat-e7acc0bd.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-8b298382.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./collection-800f5002.js";import"./DateSelectEvent.js";import"./ShortcutController-87615e31.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./LightDomController-9a6e398f.js";import"./Spinner.js";import"./unsafe-html-be8023cd.js";var E=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126v112H7zM35 7v28m70-28v28M7 63h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});const B=i`:host{--_n-date-picker-toggle-block-size:calc(var(--n-size-icon-xs) * 4.25);color:var(--n-color-text);position:relative}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--_n-date-picker-toggle-block-size);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-accent);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input{padding-inline-end:calc(var(--n-space-s) * 1.6 + var(--_n-date-picker-toggle-block-size))}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-popout)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-popout)}nord-calendar{--n-calendar-box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--_n-calendar-padding:0;--_n-calendar-inline-size:100%}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}`;z.registerIcon(E),z.registerIcon(m);const S=/[^0-9./-]+/g,_=()=>!1;let I=class extends(u(F(b(h(n))))){constructor(){super(...arguments),this.dismiss=new j(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new w(this,{target:()=>this.dialog,matchesGesture:x,onSwipeEnd:()=>this.hide(!1)}),this.localize=new k(this,{onLangChange:()=>this.createDateFormatters()}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.dateAdapter=L,this.isDateDisabled=_,this.handleDaySelect=e=>{e.stopPropagation(),this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new y("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new y("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,o=e.selectionStart,a=i.slice(0,o),n=i.slice(o,i.length),r=a.replace(t,""),s=r+n.replace(t,""),l=r.length;e.value=s,e.selectionStart=l,e.selectionEnd=l}(t,S),this.dispatchEvent(new y("input"));const i=this.dateAdapter.parse(t.value,v);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return g(this.value)}set valueAsDate(e){this.value=e?f(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?f(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new y("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new y("close")),e&&this.toggleButton.focus()}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"";return o`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${p(this.name)}" .value="${t}" placeholder="${p(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${c(this.focusableRef)} aria-invalid="${A(this.error,"true")}" aria-describedby="${p(this.getDescribedBy())}" ?readonly="${this.readonly}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled||this.readonly}" type="button"><nord-icon name="interface-calendar" size="s"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${e?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(e)}</span>`:a}</nord-visually-hidden></button></div>${this.renderError()}<div class="${d({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localize.term("modalHeading")}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}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"})}setValue(e){this.value=e?f(e):"",this.dispatchEvent(new y("change"))}};I.styles=[$,D,C,B],e([l(".n-date-toggle",!0)],I.prototype,"toggleButton",void 0),e([l(".n-date-close",!0)],I.prototype,"closeButton",void 0),e([l("nord-calendar",!0)],I.prototype,"calendar",void 0),e([l('[role="dialog"]',!0)],I.prototype,"dialog",void 0),e([s()],I.prototype,"open",void 0),e([r()],I.prototype,"value",void 0),e([r()],I.prototype,"min",void 0),e([r()],I.prototype,"max",void 0),e([r()],I.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],I.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],I.prototype,"dateAdapter",void 0),e([r({attribute:!1})],I.prototype,"isDateDisabled",void 0),I=e([t("nord-date-picker")],I);var O=I;export{O as default};
+import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i,y as a,b as o,s as n}from"./lit-element-79bc2e0e.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as l}from"./query-2d22378e.js";import{o as d}from"./class-map-cd6c8cbd.js";import{n as c}from"./ref-697b28b5.js";import{l as p}from"./if-defined-f43b1487.js";import{c as m}from"./interface-close-small-44ababc3.js";import{F as h}from"./FocusableMixin-99db12c1.js";import{F as u}from"./FormAssociatedMixin-f6e5b3cd.js";import{I as b}from"./InputMixin-158f63fb.js";import{m as v,p as g,a as f}from"./dates-a8de5b83.js";import{N as y}from"./events-731d0007.js";import{S as x,i as w}from"./Calendar-a0246aa3.js";import{L as j}from"./LightDismissController-a2645ae6.js";import{LocalizeController as k}from"./LocalizeController.js";import"./Button.js";import z from"./Icon.js";import"./VisuallyHidden.js";import{s as $}from"./Component-49a41387.js";import{s as D}from"./FormField-72062bf1.js";import{R as F,s as C}from"./TextField-94b0839b.js";import{isoAdapter as L}from"./date-adapter.js";import{c as S}from"./cond-0a8d4554.js";import{S as A,i as E}from"./SizeMixin-4559b224.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./repeat-e7acc0bd.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-8b298382.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./collection-800f5002.js";import"./DateSelectEvent.js";import"./ShortcutController-87615e31.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./LightDomController-9a6e398f.js";import"./Spinner.js";import"./unsafe-html-be8023cd.js";var B=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126v112H7zM35 7v28m70-28v28M7 63h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});const I=i`:host{--_n-date-picker-toggle-block-size:calc(100% - 2px);color:var(--n-color-text);position:relative}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--_n-date-picker-toggle-block-size);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-accent);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input-container .n-input{padding-inline-end:calc(var(--n-space-xl) * 1.25)}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-popout)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-popout)}nord-calendar{--n-calendar-box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--_n-calendar-padding:0;--_n-calendar-inline-size:100%}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}:host([size="s"]) .n-date-toggle nord-icon{transform:translateY(-1px)}:host([size="s"]) .n-input-container .n-input{padding-inline-end:var(--n-space-xl)}:host([size="l"]) .n-date-toggle{padding-inline-start:var(--n-space-m);padding-inline-end:var(--n-space-m)}:host([size="l"]) .n-input-container .n-input{padding-inline-end:var(--n-space-xxl)}`;z.registerIcon(B),z.registerIcon(m);const _=/[^0-9./-]+/g,M=()=>!1;let O=class extends(A(u(F(b(h(n)))))){constructor(){super(...arguments),this.dismiss=new j(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new x(this,{target:()=>this.dialog,matchesGesture:w,onSwipeEnd:()=>this.hide(!1)}),this.localize=new k(this,{onLangChange:()=>this.createDateFormatters()}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.dateAdapter=L,this.isDateDisabled=M,this.handleDaySelect=e=>{e.stopPropagation(),this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new y("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new y("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,a=e.selectionStart,o=i.slice(0,a),n=i.slice(a,i.length),r=o.replace(t,""),s=r+n.replace(t,""),l=r.length;e.value=s,e.selectionStart=l,e.selectionEnd=l}(t,_),this.dispatchEvent(new y("input"));const i=this.dateAdapter.parse(t.value,v);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return g(this.value)}set valueAsDate(e){this.value=e?f(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?f(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new y("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new y("close")),e&&this.toggleButton.focus()}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"",i=E[this.size]||E.m;return a`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${p(this.name)}" .value="${t}" placeholder="${p(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${c(this.focusableRef)} aria-invalid="${S(this.error,"true")}" aria-describedby="${p(this.getDescribedBy())}" ?readonly="${this.readonly}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled||this.readonly}" type="button"><nord-icon name="interface-calendar" size="${i}"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${e?a`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(e)}</span>`:o}</nord-visually-hidden></button></div>${this.renderError()}<div class="${d({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localize.term("modalHeading")}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}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"})}setValue(e){this.value=e?f(e):"",this.dispatchEvent(new y("change"))}};O.styles=[$,D,C,I],e([l(".n-date-toggle",!0)],O.prototype,"toggleButton",void 0),e([l(".n-date-close",!0)],O.prototype,"closeButton",void 0),e([l("nord-calendar",!0)],O.prototype,"calendar",void 0),e([l('[role="dialog"]',!0)],O.prototype,"dialog",void 0),e([s()],O.prototype,"open",void 0),e([r()],O.prototype,"value",void 0),e([r()],O.prototype,"min",void 0),e([r()],O.prototype,"max",void 0),e([r()],O.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],O.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],O.prototype,"dateAdapter",void 0),e([r({attribute:!1})],O.prototype,"isDateDisabled",void 0),O=e([t("nord-date-picker")],O);var N=O;export{N as default};
 //# sourceMappingURL=DatePicker.js.map

package/lib/DatePicker.js.map CHANGED Viewed

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

package/lib/Input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i as s,b as n,y as i,s as o}from"./lit-element-79bc2e0e.js";import{e as r}from"./property-03f59dce.js";import{l as a}from"./if-defined-f43b1487.js";import{o as l}from"./class-map-cd6c8cbd.js";import{n as d}from"./ref-697b28b5.js";import{o as p}from"./unsafe-html-be8023cd.js";import{F as c}from"./FocusableMixin-99db12c1.js";import{F as m}from"./FormAssociatedMixin-f6e5b3cd.js";import{I as h}from"./InputMixin-158f63fb.js";import{R as u,s as f}from"./TextField-2df7c697.js";import{A as b}from"./AutocompleteMixin-370de2be.js";import{s as v}from"./Component-49a41387.js";import{s as y}from"./FormField-72062bf1.js";import{S as $}from"./SlotController-ea6eff46.js";import{c as j}from"./cond-0a8d4554.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const g=s`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.n-input-container{font-size:var(--n-font-size-m)}slot[name=end],slot[name=start]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;inset-block-start:0;color:var(--n-color-icon)}slot[name=end]{inset-inline-end:var(--n-space-m)}.has-start .n-input{padding-inline-start:var(--n-space-xl)}.has-end .n-input{padding-inline-end:calc(var(--n-space-xl) + var(--n-space-s))}::slotted(svg),svg{block-size:var(--n-size-icon-s)!important;inline-size:var(--n-size-icon-s)!important}`;let x=class extends(m(b(u(h(c(o)))))){constructor(){super(...arguments),this.startSlot=new $(this,"start"),this.endSlot=new $(this,"end"),this.type="text",this.expand=!1}render(){var e;const t="search"===this.type||this.startSlot.hasContent,s="number"===this.type,o="search"===this.type?p('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):n;return i`${this.renderLabel()}<div class="${l({"n-input-container":!0,"has-start":t,"has-end":this.endSlot.hasContent})}"><slot name="${this.startSlot.slotName}" ?hidden="${!t}">${o}</slot><input ${d(this.focusableRef)} id="${this.inputId}" class="n-input" type="${s?"text":this.type}" inputmode="${j(s,"numeric")}" pattern="${j(s,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInput}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="${this.endSlot.slotName}" ?hidden="${this.endSlot.isEmpty}"></slot></div>${this.renderError()}`}handleKeydown(e){const{form:t}=this;if("Enter"===e.key&&t){const e=function(e){let t=e.querySelector('button[type="submit"]');!t&&e.id&&(t=e.getRootNode().querySelector(`button[form=${e.id}]`));return t}(t);setTimeout((()=>null==e?void 0:e.click()),0)}}};x.styles=[v,y,f,g],e([r()],x.prototype,"type",void 0),e([r({reflect:!0,type:Boolean})],x.prototype,"expand",void 0),x=e([t("nord-input")],x);var k=x;export{k as default};
+import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i as s,b as n,y as i,s as o}from"./lit-element-79bc2e0e.js";import{e as r}from"./property-03f59dce.js";import{l as a}from"./if-defined-f43b1487.js";import{o as l}from"./class-map-cd6c8cbd.js";import{n as d}from"./ref-697b28b5.js";import{o as p}from"./unsafe-html-be8023cd.js";import{F as m}from"./FocusableMixin-99db12c1.js";import{F as c}from"./FormAssociatedMixin-f6e5b3cd.js";import{I as h}from"./InputMixin-158f63fb.js";import{R as u,s as f}from"./TextField-94b0839b.js";import{A as b}from"./AutocompleteMixin-370de2be.js";import{S as v}from"./SizeMixin-4559b224.js";import{s as y}from"./Component-49a41387.js";import{s as $}from"./FormField-72062bf1.js";import{S as j}from"./SlotController-ea6eff46.js";import{c as g}from"./cond-0a8d4554.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const x=s`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.n-input-container{font-size:var(--n-font-size-m)}slot[name=end],slot[name=start]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;inset-block-start:0;color:var(--n-color-icon)}slot[name=end]{inset-inline-end:var(--n-space-m)}.has-start .n-input{padding-inline-start:var(--n-space-xl)}.n-input-container.has-end .n-input{padding-inline-end:calc(var(--n-space-xl) + var(--n-space-s))}::slotted(svg),svg{block-size:var(--n-size-icon-s)!important;inline-size:var(--n-size-icon-s)!important}:host([size="s"]) :is(slot[name=start],slot[name=end]){margin-inline-start:var(--n-space-s)}:host([size="s"]) .has-start .n-input{padding-inline-start:var(--n-space-l)}`;let k=class extends(v(c(b(u(h(m(o))))))){constructor(){super(...arguments),this.startSlot=new j(this,"start"),this.endSlot=new j(this,"end"),this.type="text",this.expand=!1}render(){var e;const t="search"===this.type||this.startSlot.hasContent,s="number"===this.type,o="search"===this.type?p('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):n;return i`${this.renderLabel()}<div class="${l({"n-input-container":!0,"has-start":t,"has-end":this.endSlot.hasContent})}"><slot name="${this.startSlot.slotName}" ?hidden="${!t}">${o}</slot><input ${d(this.focusableRef)} id="${this.inputId}" class="n-input" type="${s?"text":this.type}" inputmode="${g(s,"numeric")}" pattern="${g(s,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInput}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="${this.endSlot.slotName}" ?hidden="${this.endSlot.isEmpty}"></slot></div>${this.renderError()}`}handleKeydown(e){const{form:t}=this;if("Enter"===e.key&&t){const e=function(e){let t=e.querySelector('button[type="submit"]');!t&&e.id&&(t=e.getRootNode().querySelector(`button[form=${e.id}]`));return t}(t);setTimeout((()=>null==e?void 0:e.click()),0)}}};k.styles=[y,$,f,x],e([r()],k.prototype,"type",void 0),e([r({reflect:!0,type:Boolean})],k.prototype,"expand",void 0),k=e([t("nord-input")],k);var w=k;export{w as default};
 //# sourceMappingURL=Input.js.map

package/lib/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","sources":["../src/input/Input.ts","../../icons/lib/assets/navigation-search.js","../src/common/form.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Input.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { getSubmitButton } from \"../common/form.js\"\n\n/*\n Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n \n @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon 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 /\n@customElement(\"nord-input\")\nexport default class Input extends ~~FormAssociatedMixin~~(\n AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n private startSlot = new SlotController(this, \"start\")\n private endSlot = new SlotController(this, \"end\")\n\n /\n The type of the input.\n /\n @property() type: \"text\" \| \"email\" \| \"password\" \| \"tel\" \| \"url\" \| \"search\" \| \"number\" = \"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 render() {\n const startSlotHasContent = this.type === \"search\" \|\| this.startSlot.hasContent\n const isNumber = this.type === \"number\"\n const defaultIcon = this.type === \"search\" ? unsafeHTML(searchIcon) : nothing\n\n return html`\n ${this.renderLabel()}\n\n <div\n class=${classMap({\n \"n-input-container\": true,\n \"has-start\": startSlotHasContent,\n \"has-end\": this.endSlot.hasContent,\n })}\n >\n <slot name=${this.startSlot.slotName} ?hidden=${!startSlotHasContent}>${defaultIcon}</slot>\n <input\n ${ref(this.focusableRef)}\n id=${this.inputId}\n class=\"n-input\"\n type=${isNumber ? \"text\" : this.type}\n inputmode=${cond(isNumber, \"numeric\")}\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.handleInput}\n @change=${this.handleChange}\n @keydown=${this.handleKeydown}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n spellcheck=\"false\"\n autocomplete=${this.autocomplete as any}\n />\n <slot name=${this.endSlot.slotName} ?hidden=${this.endSlot.isEmpty}></slot>\n </div>\n\n ${this.renderError()}\n `\n }\n\n private handleKeydown(e: KeyboardEvent) {\n const { form } = this\n\n if (e.key === \"Enter\" && form) {\n const button = getSubmitButton(form)\n setTimeout(() => button?.click(), 0)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-input\": Input\n }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n","/*\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":["Input","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","startSlot","SlotController","endSlot","type","expand","render","startSlotHasContent","hasContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","classMap","slotName","ref","focusableRef","inputId","cond","disabled","required","readonly","ifDefined","name","_a","value","placeholder","handleInput","handleChange","handleKeydown","getDescribedBy","getInvalid","autocomplete","isEmpty","renderError","e","form","key","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","prototype","reflect","Boolean","customElement"],"mappings":"~~oiDAyCA~~,IAAqBA,EAArB,cAAmCC,EACjCC,EAAkBC,EAAcC,EAAWC,EAAeC,~~QAD5DC~~,kCAKUC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAOG,QAAG,IAAID,EAAeF,KAAM,OAK/BA,KAAII,KAAwE,OAK5CJ,KAAMK,QAAG,CAsDtD,CApDCC,eACE,MAAMC,EAAoC,WAAdP,KAAKI,MAAqBJ,KAAKC,UAAUO,WAC/DC,EAAyB,WAAdT,KAAKI,KAChBM,EAA4B,WAAdV,KAAKI,KAAoBO,~~EC9DlC~~,~~iQD8D2DC~~,EAEtE,OAAOC,CAAI,GACPb,KAAKc,4BAGGC,EAAS,CACf,qBAAqB,EACrB,YAAaR,EACb,UAAWP,KAAKG,QAAQK,6BAGbR,KAAKC,UAAUe,uBAAqBT,MAAuBG,kBAEpEO,EAAIjB,KAAKkB,qBACNlB,KAAKmB,kCAEHV,EAAW,OAAST,KAAKI,oBACpBgB,EAAKX,EAAU,wBACjBW,EAAKX,EAAU,yBACbT,KAAKqB,wBACLrB,KAAKsB,wBACLtB,KAAKuB,mBACVC,EAAUxB,KAAKyB,kBACH,QAAVC,EAAA1B,KAAK2B,aAAK,IAAAD,EAAAA,EAAI,oBACTF,EAAUxB,KAAK4B,yBACpB5B,KAAK6B,yBACJ7B,KAAK8B,2BACJ9B,KAAK+B,oCACGP,EAAUxB,KAAKgC,oCACnBR,EAAUxB,KAAKiC,mDAEfjC,KAAKkC,6BAETlC,KAAKG,QAAQa,sBAAoBhB,KAAKG,QAAQgC,yBAG3DnC,KAAKoC,eAEV,CAEOL,cAAcM,GACpB,MAAMC,KAAEA,GAAStC,KAEjB,GAAc,UAAVqC,EAAEE,KAAmBD,EAAM,CAC7B,MAAME,~~EEvGN~~,SAA0BF,GAG9B,IAAIE,EAASF,EAAKG,cAAiC,0BAE9CD,GAAUF,EAAKI,KAElBF,EADaF,EAAKK,cACJF,cAAiC,eAAeH,EAAKI,QAGrE,OAAOF,CACT,~~CF4FqBI~~,CAAgBN,GAC/BO,YAAW,IAAML,aAAA,EAAAA,EAAQM,SAAS,EACnC,CACF,~~GAlEMtD~~,~~EAAMuD~~,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAQrDC,EAAA,CAAXC,~~KAA6F7D~~,~~EAAA8D~~,UAAA,YAAA,GAKlDF,EAAA,CAA3CC,EAAS,CAAEE,SAAS,EAAMnD,KAAMoD,~~WAAyBhE~~,~~EAAA8D~~,UAAA,cAAA,~~GAhBvC9D~~,~~EAAK4D~~,EAAA,CADzBK,EAAc,~~eACMjE~~,SAAAA"}
1	+ {"version":3,"file":"Input.js","sources":["../src/input/Input.ts","../../icons/lib/assets/navigation-search.js","../src/common/form.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Input.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { getSubmitButton } from \"../common/form.js\"\n\n/*\n Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n \n @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon 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 /\n@customElement(\"nord-input\")\nexport default class Input extends SizeMixin(\n FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement)))))\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n private startSlot = new SlotController(this, \"start\")\n private endSlot = new SlotController(this, \"end\")\n\n /\n The type of the input.\n /\n @property() type: \"text\" \| \"email\" \| \"password\" \| \"tel\" \| \"url\" \| \"search\" \| \"number\" = \"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 render() {\n const startSlotHasContent = this.type === \"search\" \|\| this.startSlot.hasContent\n const isNumber = this.type === \"number\"\n const defaultIcon = this.type === \"search\" ? unsafeHTML(searchIcon) : nothing\n\n return html`\n ${this.renderLabel()}\n\n <div\n class=${classMap({\n \"n-input-container\": true,\n \"has-start\": startSlotHasContent,\n \"has-end\": this.endSlot.hasContent,\n })}\n >\n <slot name=${this.startSlot.slotName} ?hidden=${!startSlotHasContent}>${defaultIcon}</slot>\n <input\n ${ref(this.focusableRef)}\n id=${this.inputId}\n class=\"n-input\"\n type=${isNumber ? \"text\" : this.type}\n inputmode=${cond(isNumber, \"numeric\")}\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.handleInput}\n @change=${this.handleChange}\n @keydown=${this.handleKeydown}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n spellcheck=\"false\"\n autocomplete=${this.autocomplete as any}\n />\n <slot name=${this.endSlot.slotName} ?hidden=${this.endSlot.isEmpty}></slot>\n </div>\n\n ${this.renderError()}\n `\n }\n\n private handleKeydown(e: KeyboardEvent) {\n const { form } = this\n\n if (e.key === \"Enter\" && form) {\n const button = getSubmitButton(form)\n setTimeout(() => button?.click(), 0)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-input\": Input\n }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n","/*\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":["Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","startSlot","SlotController","endSlot","type","expand","render","startSlotHasContent","hasContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","classMap","slotName","ref","focusableRef","inputId","cond","disabled","required","readonly","ifDefined","name","_a","value","placeholder","handleInput","handleChange","handleKeydown","getDescribedBy","getInvalid","autocomplete","isEmpty","renderError","e","form","key","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","prototype","reflect","Boolean","customElement"],"mappings":"0wDA0CA,IAAqBA,EAArB,cAAmCC,EACjCC,EAAoBC,EAAkBC,EAAcC,EAAWC,EAAeC,SADhFC,kCAKUC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAOG,QAAG,IAAID,EAAeF,KAAM,OAK/BA,KAAII,KAAwE,OAK5CJ,KAAMK,QAAG,CAsDtD,CApDCC,eACE,MAAMC,EAAoC,WAAdP,KAAKI,MAAqBJ,KAAKC,UAAUO,WAC/DC,EAAyB,WAAdT,KAAKI,KAChBM,EAA4B,WAAdV,KAAKI,KAAoBO,EC/DlC,iQD+D2DC,EAEtE,OAAOC,CAAI,GACPb,KAAKc,4BAGGC,EAAS,CACf,qBAAqB,EACrB,YAAaR,EACb,UAAWP,KAAKG,QAAQK,6BAGbR,KAAKC,UAAUe,uBAAqBT,MAAuBG,kBAEpEO,EAAIjB,KAAKkB,qBACNlB,KAAKmB,kCAEHV,EAAW,OAAST,KAAKI,oBACpBgB,EAAKX,EAAU,wBACjBW,EAAKX,EAAU,yBACbT,KAAKqB,wBACLrB,KAAKsB,wBACLtB,KAAKuB,mBACVC,EAAUxB,KAAKyB,kBACH,QAAVC,EAAA1B,KAAK2B,aAAK,IAAAD,EAAAA,EAAI,oBACTF,EAAUxB,KAAK4B,yBACpB5B,KAAK6B,yBACJ7B,KAAK8B,2BACJ9B,KAAK+B,oCACGP,EAAUxB,KAAKgC,oCACnBR,EAAUxB,KAAKiC,mDAEfjC,KAAKkC,6BAETlC,KAAKG,QAAQa,sBAAoBhB,KAAKG,QAAQgC,yBAG3DnC,KAAKoC,eAEV,CAEOL,cAAcM,GACpB,MAAMC,KAAEA,GAAStC,KAEjB,GAAc,UAAVqC,EAAEE,KAAmBD,EAAM,CAC7B,MAAME,EExGN,SAA0BF,GAG9B,IAAIE,EAASF,EAAKG,cAAiC,0BAE9CD,GAAUF,EAAKI,KAElBF,EADaF,EAAKK,cACJF,cAAiC,eAAeH,EAAKI,QAGrE,OAAOF,CACT,CF6FqBI,CAAgBN,GAC/BO,YAAW,IAAML,aAAA,EAAAA,EAAQM,SAAS,EACnC,CACF,GAlEMvD,EAAMwD,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAQrDC,EAAA,CAAXC,KAA6F9D,EAAA+D,UAAA,YAAA,GAKlDF,EAAA,CAA3CC,EAAS,CAAEE,SAAS,EAAMnD,KAAMoD,WAAyBjE,EAAA+D,UAAA,cAAA,GAhBvC/D,EAAK6D,EAAA,CADzBK,EAAc,eACMlE,SAAAA"}

package/lib/Select.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as n,s as r}from"./lit-element-79bc2e0e.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-f43b1487.js";import{n as a}from"./ref-697b28b5.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-158f63fb.js";import{F as c}from"./FocusableMixin-99db12c1.js";import{F as p}from"./FormAssociatedMixin-f6e5b3cd.js";import{A as u}from"./AutocompleteMixin-370de2be.js";import{s as b}from"./Component-49a41387.js";import{s as m}from"./FormField-72062bf1.js";import{S as h}from"./SlotController-ea6eff46.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./LightDomController-9a6e398f.js";import"./cond-0a8d4554.js";import"./Spinner.js";import"./state-70f38ceb.js";import"./unsafe-html-be8023cd.js";import"./observe-a9c6dfb6.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g transform="translate(6,6) scale(0.9)"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></g></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const f=o`.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}nord-button{--n-button-text-align:start}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-border-color:var(--n-color-border-hover);--_n-button-background-color:var(--n-color-button-hover)}.n-label-container:hover+.n-select-container nord-button nord-icon,select:hover+nord-button nord-icon{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--_n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}::slotted([slot=start]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;l.registerIcon(v);let x=class extends(p(u(d(c(r))))){constructor(){super(...arguments),this.defaultSlot=new h(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const t=this.options,e=this.getButtonText(t);return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${t.map((t=>this.renderOption(t)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="start"></slot>${e}<nord-icon slot="end" size="s" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(t){const e=t.find((t=>t.value===this.value.toString()));return e?e.text:this.placeholder?this.placeholder:t[0]?t[0].text:""}renderOption(t){return n`<option value="${s(t.value)}" ?disabled="${t.disabled}" .selected="${t.value===this.value.toString()}">${t.text}</option>`}};x.styles=[b,m,f],t([i({reflect:!0,type:Boolean})],x.prototype,"expand",void 0),x=t([e("nord-select")],x);var g=x;export{g as default};
+import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as n,s as r}from"./lit-element-79bc2e0e.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-f43b1487.js";import{n as a}from"./ref-697b28b5.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-158f63fb.js";import{F as c}from"./FocusableMixin-99db12c1.js";import{F as p}from"./FormAssociatedMixin-f6e5b3cd.js";import{A as u}from"./AutocompleteMixin-370de2be.js";import{S as b,i as m}from"./SizeMixin-4559b224.js";import{s as h}from"./Component-49a41387.js";import{s as v}from"./FormField-72062bf1.js";import{S as f}from"./SlotController-ea6eff46.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./LightDomController-9a6e398f.js";import"./cond-0a8d4554.js";import"./Spinner.js";import"./state-70f38ceb.js";import"./unsafe-html-be8023cd.js";import"./observe-a9c6dfb6.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var x=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g transform="translate(6,6) scale(0.9)"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></g></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const g=o`.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}nord-button{--n-button-text-align:start}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-border-color:var(--n-color-border-hover);--_n-button-background-color:var(--n-color-button-hover)}.n-label-container:hover+.n-select-container nord-button nord-icon,select:hover+nord-button nord-icon{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--_n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}::slotted([slot=start]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;l.registerIcon(x);let j=class extends(b(p(u(d(c(r)))))){constructor(){super(...arguments),this.defaultSlot=new f(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const t=this.options,e=this.getButtonText(t),o=m[this.size]||m.m;return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${t.map((t=>this.renderOption(t)))}</select><nord-button size="${this.size}" tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="start"></slot>${e}<nord-icon slot="end" size="${o}" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(t){const e=t.find((t=>t.value===this.value.toString()));return e?e.text:this.placeholder?this.placeholder:t[0]?t[0].text:""}renderOption(t){return n`<option value="${s(t.value)}" ?disabled="${t.disabled}" .selected="${t.value===this.value.toString()}">${t.text}</option>`}};j.styles=[h,v,g],t([i({reflect:!0,type:Boolean})],j.prototype,"expand",void 0),j=t([e("nord-select")],j);var $=j;export{$ as default};
 //# sourceMappingURL=Select.js.map

package/lib/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","sources":["../../icons/lib/assets/interface-dropdown-small.js","../src/select/Select.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><g transform=\"translate(6,6) scale(0.9)\"><path fill=\"currentColor\" d=\"M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z\"/></g></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n","/* eslint-disable lit-a11y/no-invalid-change-handler /\nimport { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport as dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nIcon.registerIcon(dropdownIcon)\n\n/*\n Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n \n @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\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@customElement(\"nord-select\")\nexport default class Select extends FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement)))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.value \|\| undefined\n }\n\n private defaultSlot = new SlotController(this)\n\n protected inputId = \"select\"\n\n /\n Controls whether the select expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n render() {\n const slottedOptions = this.options\n const buttonText = this.getButtonText(slottedOptions)\n\n return html`\n <slot></slot>\n ${this.renderLabel()}\n\n <div class=\"n-select-container\">\n <select\n ${ref(this.focusableRef)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n autocomplete=${this.autocomplete as any}\n >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n <slot slot=\"start\" name=\"start\"></slot>\n ${buttonText}\n <nord-icon slot=\"end\" size~~=\"s\"~~ name=\"interface-dropdown-small\"></nord-icon>\n </nord-button>\n </div>\n\n ${this.renderError()}\n `\n }\n\n private get options() {\n return Array.from(this.querySelectorAll(\"option\"))\n }\n\n private getButtonText(options: HTMLOptionElement[]): string {\n const selected = options.find(option => option.value === this.value.toString())\n\n if (selected) {\n return selected.text\n }\n\n if (this.placeholder) {\n return this.placeholder\n }\n\n if (options[0]) {\n return options[0].text\n }\n\n return \"\"\n }\n\n private renderOption(option: HTMLOptionElement) {\n return html`\n <option\n value=${ifDefined(option.value)}\n ?disabled=${option.disabled}\n .selected=${option.value === this.value.toString()}\n >\n ${option.text}\n </option>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-select\": Select\n }\n}\n"],"names":["Icon","registerIcon","dropdownIcon","Select","FormAssociatedMixin","AutocompleteMixin","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","inputId","expand","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","placeholder","map","option","renderOption","renderError","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"~~o9BAAe~~,0gBACM,gCACD,~~ymDCkBpBA~~,EAAKC,aAAaC,GAclB,IAAqBC,EAArB,cAAoCC,EAAoBC,EAAkBC,EAAWC,EAAeC,~~OAApGC~~,~~kCAOUC~~,KAAAC,YAAc,IAAIC,EAAeF,MAE/BA,KAAOG,QAAG,SAKwBH,KAAMI,QAAG,~~CAuEtD~~,~~CAlFwBC~~,gBACrB,OAAOL,KAAKM,YAASC,CACtB,CAWDC,SACE,MAAMC,EAAiBT,KAAKU,QACtBC,EAAaX,KAAKY,cAAcH,~~GAEtC~~,~~OAAOI~~,CAAI,~~gBAEPb~~,~~KAAKc~~,wDAIDC,~~EAAIf~~,~~KAAKgB~~,~~qBACNhB~~,KAAKG,uBACEH,~~KAAKiB~~,~~wBACLjB~~,~~KAAKkB~~,mBACVC,~~EAAUnB~~,~~KAAKoB~~,~~mBACZpB~~,~~KAAKqB~~,~~yBACNrB~~,~~KAAKsB~~,kCACKH,~~EAAUnB~~,~~KAAKuB~~,oCACnBJ,~~EAAUnB~~,~~KAAKwB~~,~~gCACfxB~~,~~KAAKyB~~,~~iBAElBzB~~,~~KAAK0B~~,aAAeb,CAAI,~~oDAAwCb~~,KAAKM,UAASN,~~KAAK0B~~,~~0BACnFjB~~,~~EAAekB~~,KAAIC,~~GAAU5B~~,~~KAAK6B~~,aAAaD,~~sDAGZ5B~~,~~KAAKiB~~,~~sBAAoBjB~~,KAAKI,~~mFAEjEO~~,~~mGAKJX~~,~~KAAK8B~~,eAEV,~~CAEWpB~~,cACV,~~OAAOqB~~,MAAMC,~~KAAKhC~~,~~KAAKiC~~,iBAAiB,UACzC,~~CAEOrB~~,cAAcF,GACpB,~~MAAMwB~~,~~EAAWxB~~,~~EAAQyB~~,MAAKP,GAAUA,~~EAAOtB~~,QAAUN,KAAKM,~~MAAM8B~~,aAEpE,OAAIF,EACKA,EAASG,~~KAGdrC~~,~~KAAK0B~~,~~YACA1B~~,~~KAAK0B~~,~~YAGVhB~~,EAAQ,GACHA,EAAQ,~~GAAG2B~~,KAGb,EACR,CAEOR,aAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,~~EAAOtB~~,~~sBACbsB~~,EAAOX,wBACPW,~~EAAOtB~~,QAAUN,KAAKM,~~MAAM8B~~,eAEtCR,EAAOS,eAGd,~~GAnFM5C~~,~~EAAM6C~~,OAAG,CAACC,EAAgBC,EAAgBC,GAaLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,~~WAAyBrD~~,~~EAAAsD~~,UAAA,cAAA,~~GAdvCtD~~,~~EAAMiD~~,EAAA,CAD1BM,EAAc,~~gBACMvD~~,SAAAA"}
1	+ {"version":3,"file":"Select.js","sources":["../../icons/lib/assets/interface-dropdown-small.js","../src/select/Select.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><g transform=\"translate(6,6) scale(0.9)\"><path fill=\"currentColor\" d=\"M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z\"/></g></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n","/* eslint-disable lit-a11y/no-invalid-change-handler /\nimport { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport as dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin, iconSizeMap } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nIcon.registerIcon(dropdownIcon)\n\n/*\n Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n \n @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\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@customElement(\"nord-select\")\nexport default class Select extends SizeMixin(\n FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.value \|\| undefined\n }\n\n private defaultSlot = new SlotController(this)\n\n protected inputId = \"select\"\n\n /\n Controls whether the select expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n render() {\n const slottedOptions = this.options\n const buttonText = this.getButtonText(slottedOptions)\n const iconSize = iconSizeMap[this.size] \|\| iconSizeMap.m\n\n return html`\n <slot></slot>\n ${this.renderLabel()}\n\n <div class=\"n-select-container\">\n <select\n ${ref(this.focusableRef)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n autocomplete=${this.autocomplete as any}\n >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button\n size=${this.size}\n tabindex=\"-1\"\n ?disabled=${this.disabled}\n ?expand=${this.expand}\n aria-hidden=\"true\"\n type=\"button\"\n >\n <slot slot=\"start\" name=\"start\"></slot>\n ${buttonText}\n <nord-icon slot=\"end\" size=${iconSize} name=\"interface-dropdown-small\"></nord-icon>\n </nord-button>\n </div>\n\n ${this.renderError()}\n `\n }\n\n private get options() {\n return Array.from(this.querySelectorAll(\"option\"))\n }\n\n private getButtonText(options: HTMLOptionElement[]): string {\n const selected = options.find(option => option.value === this.value.toString())\n\n if (selected) {\n return selected.text\n }\n\n if (this.placeholder) {\n return this.placeholder\n }\n\n if (options[0]) {\n return options[0].text\n }\n\n return \"\"\n }\n\n private renderOption(option: HTMLOptionElement) {\n return html`\n <option\n value=${ifDefined(option.value)}\n ?disabled=${option.disabled}\n .selected=${option.value === this.value.toString()}\n >\n ${option.text}\n </option>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-select\": Select\n }\n}\n"],"names":["Icon","registerIcon","dropdownIcon","Select","SizeMixin","FormAssociatedMixin","AutocompleteMixin","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","inputId","expand","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","iconSize","iconSizeMap","size","m","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","placeholder","map","option","renderOption","renderError","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"ugCAAe,0gBACM,gCACD,ymDCmBpBA,EAAKC,aAAaC,GAclB,IAAqBC,EAArB,cAAoCC,EAClCC,EAAoBC,EAAkBC,EAAWC,EAAeC,QADlEC,kCASUC,KAAAC,YAAc,IAAIC,EAAeF,MAE/BA,KAAOG,QAAG,SAKwBH,KAAMI,QAAG,CA+EtD,CA1FwBC,gBACrB,OAAOL,KAAKM,YAASC,CACtB,CAWDC,SACE,MAAMC,EAAiBT,KAAKU,QACtBC,EAAaX,KAAKY,cAAcH,GAChCI,EAAWC,EAAYd,KAAKe,OAASD,EAAYE,EAEvD,OAAOC,CAAI,gBAEPjB,KAAKkB,wDAIDC,EAAInB,KAAKoB,qBACNpB,KAAKG,uBACEH,KAAKqB,wBACLrB,KAAKsB,mBACVC,EAAUvB,KAAKwB,mBACZxB,KAAKyB,yBACNzB,KAAK0B,kCACKH,EAAUvB,KAAK2B,oCACnBJ,EAAUvB,KAAK4B,gCACf5B,KAAK6B,iBAElB7B,KAAK8B,aAAeb,CAAI,oDAAwCjB,KAAKM,UAASN,KAAK8B,0BACnFrB,EAAesB,KAAIC,GAAUhC,KAAKiC,aAAaD,mCAI1ChC,KAAKe,kCAEAf,KAAKqB,sBACPrB,KAAKI,mFAKbO,gCAC2BE,sEAI/Bb,KAAKkC,eAEV,CAEWxB,cACV,OAAOyB,MAAMC,KAAKpC,KAAKqC,iBAAiB,UACzC,CAEOzB,cAAcF,GACpB,MAAM4B,EAAW5B,EAAQ6B,MAAKP,GAAUA,EAAO1B,QAAUN,KAAKM,MAAMkC,aAEpE,OAAIF,EACKA,EAASG,KAGdzC,KAAK8B,YACA9B,KAAK8B,YAGVpB,EAAQ,GACHA,EAAQ,GAAG+B,KAGb,EACR,CAEOR,aAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,EAAO1B,sBACb0B,EAAOX,wBACPW,EAAO1B,QAAUN,KAAKM,MAAMkC,eAEtCR,EAAOS,eAGd,GA3FMjD,EAAMkD,OAAG,CAACC,EAAgBC,EAAgBC,GAaLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyB1D,EAAA2D,UAAA,cAAA,GAhBvC3D,EAAMsD,EAAA,CAD1BM,EAAc,gBACM5D,SAAAA"}

package/lib/SizeMixin-4559b224.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{_ as s}from"./query-assigned-elements-e6cbac30.js";import{e}from"./property-03f59dce.js";function r(r){class t extends r{constructor(){super(...arguments),this.size="m"}}return s([e({reflect:!0})],t.prototype,"size",void 0),t}const t={s:"xs",m:"s",l:"m"};export{r as S,t as i};
2	+ //# sourceMappingURL=SizeMixin-4559b224.js.map

package/lib/SizeMixin-4559b224.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SizeMixin-4559b224.js","sources":["../src/common/mixins/SizeMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class SizeMixinInterface {\n size: \"s\" | \"m\" | \"l\"\n}\n\nexport function SizeMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<SizeMixinInterface> & T {\n class SizeElement extends superClass {\n /**\n * The size of the component.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n }\n\n return SizeElement\n}\n\nexport const iconSizeMap: Record<SizeMixinInterface[\"size\"], string> = {\n s: \"xs\",\n m: \"s\",\n l: \"m\",\n}\n"],"names":["SizeMixin","superClass","SizeElement","constructor","this","size","__decorate","property","reflect","prototype","iconSizeMap","s","m","l"],"mappings":"gGAUM,SAAUA,EAA6CC,GAC3D,MAAMC,UAAoBD,EAA1BE,kCAI+BC,KAAIC,KAAoB,GACtD,EAED,OAH+BC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmCN,EAAAO,UAAA,YAAA,GAGnDP,CACT,CAEa,MAAAQ,EAA0D,CACrEC,EAAG,KACHC,EAAG,IACHC,EAAG"}

package/lib/{TextField-2df7c697.js → TextField-94b0839b.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{_ as n}from"./query-assigned-elements-e6cbac30.js";import{e as r}from"./property-03f59dce.js";import{i as o}from"./lit-element-79bc2e0e.js";function i(o){class i extends o{constructor(){super(...arguments),this.readonly=!1}}return n([r({type:Boolean,reflect:!0})],i.prototype,"readonly",void 0),i}const t=o`:host{--_n-input-inline-size:var(--n-input-inline-size, 240px);--_n-input-background:var(--n-input-background, var(--n-color-active));--_n-input-color:var(--n-input-color, var(--n-color-text));--_n-input-border-color:var(--n-input-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-input-border-radius, var(--n-border-radius-s))}.n-input-container{position:relative;inline-size:var(--_n-input-inline-size)}.n-input{background:var(--_n-input-background);color:var(--_n-input-color);padding:calc(var(--n-space-s) - 1px) calc(var(--n-space-s) * 1.6);border-radius:var(--_n-input-border-radius);border:1px solid var(--_n-input-border-color);font-family:var(--n-font-family);font-size:var(--n-font-size-m);line-height:var(--n-line-height-form);inline-size:100%;transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:480px){.n-input{font-size:var(--n-font-size-l)}}:host([expand]){--_n-input-inline-size:100%;inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-input-border-color, var(--n-color-accent));--_n-input-background:var(--n-input-background, var(--n-color-surface));outline:0;box-shadow:0 0 0 1px var(--_n-input-border-color)}.n-input::placeholder{color:var(--n-color-text-weakest)}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-input-border-color, var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-border-color:var(--n-input-border-color, var(--n-color-active));--_n-input-color:var(--n-input-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-input-color, var(--n-color-text-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-input-border-color, var(--n-color-accent))}`;export{i as R,t as s};
-//# sourceMappingURL=TextField-2df7c697.js.map
+import{_ as n}from"./query-assigned-elements-e6cbac30.js";import{e as r}from"./property-03f59dce.js";import{i as o}from"./lit-element-79bc2e0e.js";function i(o){class i extends o{constructor(){super(...arguments),this.readonly=!1}}return n([r({type:Boolean,reflect:!0})],i.prototype,"readonly",void 0),i}const t=o`:host{--_n-input-inline-size:var(--n-input-inline-size, 240px);--_n-input-background:var(--n-input-background, var(--n-color-active));--_n-input-color:var(--n-input-color, var(--n-color-text));--_n-input-border-color:var(--n-input-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-input-border-radius, var(--n-border-radius-s))}.n-input-container{position:relative;inline-size:var(--_n-input-inline-size)}.n-input{background:var(--_n-input-background);color:var(--_n-input-color);padding:calc(var(--n-space-s) - 1px) calc(var(--n-space-s) * 1.6);border-radius:var(--_n-input-border-radius);border:1px solid var(--_n-input-border-color);font-family:var(--n-font-family);font-size:var(--n-font-size-m);line-height:var(--n-line-height-form);inline-size:100%;transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:480px){.n-input{font-size:var(--n-font-size-l)}}:host([expand]){--_n-input-inline-size:100%;inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-input-border-color, var(--n-color-accent));--_n-input-background:var(--n-input-background, var(--n-color-surface));outline:0;box-shadow:0 0 0 1px var(--_n-input-border-color)}.n-input::placeholder{color:var(--n-color-text-weakest)}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-input-border-color, var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-border-color:var(--n-input-border-color, var(--n-color-active));--_n-input-color:var(--n-input-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-input-color, var(--n-color-text-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([size="s"]) :is(.n-input-container, .n-input){font-size:var(--n-font-size-s)}:host([size="s"]) .n-input{padding:calc((var(--n-space-s)/ 2) - 2px) calc((var(--n-space-s)/ 2) * 1.6)}:host([size="l"]) :is(.n-input-container, .n-input){font-size:var(--n-font-size-l)}:host([size="l"]) .n-input{padding-block-start:calc(var(--n-space-m)/ 1.25);padding-block-end:calc(var(--n-space-m)/ 1.25)}`;export{i as R,t as s};
+//# sourceMappingURL=TextField-94b0839b.js.map

package/lib/{TextField-2df7c697.js.map → TextField-94b0839b.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextField-~~2df7c697~~.js","sources":["../src/common/mixins/ReadonlyMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file /\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class ReadonlyMixinInterface {\n readonly: boolean\n}\n\nexport function ReadonlyMixin<T extends Constructor<LitElement>>(\n superClass: T\n): Constructor<ReadonlyMixinInterface> & T {\n class ReadonlyElement extends superClass {\n /\n Makes the component readonly, so that it is not editable.\n * Readonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.\n */\n @property({ type: Boolean, reflect: true }) readonly = false\n }\n\n return ReadonlyElement as Constructor<ReadonlyMixinInterface> & T\n}\n"],"names":["ReadonlyMixin","superClass","ReadonlyElement","constructor","this","readonly","__decorate","property","type","Boolean","reflect","prototype"],"mappings":"mJAUM,SAAUA,EACdC,GAEA,MAAMC,UAAwBD,EAA9BE,kCAK8CC,KAAQC,UAAG,CACxD,EAED,OAH8CC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBR,EAAAS,UAAA,gBAAA,GAGvDT,CACT"}
1	+ {"version":3,"file":"TextField-94b0839b.js","sources":["../src/common/mixins/ReadonlyMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file /\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class ReadonlyMixinInterface {\n readonly: boolean\n}\n\nexport function ReadonlyMixin<T extends Constructor<LitElement>>(\n superClass: T\n): Constructor<ReadonlyMixinInterface> & T {\n class ReadonlyElement extends superClass {\n /\n Makes the component readonly, so that it is not editable.\n * Readonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.\n */\n @property({ type: Boolean, reflect: true }) readonly = false\n }\n\n return ReadonlyElement as Constructor<ReadonlyMixinInterface> & T\n}\n"],"names":["ReadonlyMixin","superClass","ReadonlyElement","constructor","this","readonly","__decorate","property","type","Boolean","reflect","prototype"],"mappings":"mJAUM,SAAUA,EACdC,GAEA,MAAMC,UAAwBD,EAA9BE,kCAK8CC,KAAQC,UAAG,CACxD,EAED,OAH8CC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBR,EAAAS,UAAA,gBAAA,GAGvDT,CACT"}

package/lib/Textarea.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as t,y as n,s as o}from"./lit-element-79bc2e0e.js";import{e as a}from"./property-03f59dce.js";import{l as i}from"./if-defined-f43b1487.js";import{n as s}from"./ref-697b28b5.js";import{o as l}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-99db12c1.js";import{F as c}from"./FormAssociatedMixin-f6e5b3cd.js";import{I as p}from"./InputMixin-158f63fb.js";import{R as u,s as v}from"./TextField-2df7c697.js";import{A as b}from"./AutocompleteMixin-370de2be.js";import{s as h}from"./Component-49a41387.js";import{s as m}from"./FormField-72062bf1.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const x=t`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size, 240px);--_n-textarea-block-size:var(--n-textarea-block-size, 76px);--_n-input-background:var(--n-textarea-background, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text));--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-textarea-border-radius, var(--n-border-radius-s))}.n-input-container{position:relative;inline-size:var(--_n-textarea-inline-size)}.n-input{min-block-size:var(--_n-textarea-block-size);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}:host([expand]){--_n-textarea-inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent));--_n-input-background:var(--n-textarea-background, var(--n-color-surface))}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-textarea-color, var(--n-color-text-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent))}`;let f=class extends(c(b(u(p(d(o)))))){constructor(){super(...arguments),this.inputId="textarea",this.resize="vertical",this.expand=!1}render(){var e;return n`${this.renderLabel()}<div class="n-input-container"><textarea ${s(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${i(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${i(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea></div>${this.renderError()}`}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=null)}};f.styles=[h,m,v,x],e([a({reflect:!0})],f.prototype,"resize",void 0),e([a({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),e([l("resize","updated"),l("value","updated")],f.prototype,"resizeToFitContent",null),f=e([r("nord-textarea")],f);var y=f;export{y as default};
+import{_ as e,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as t,y as o,s as n}from"./lit-element-79bc2e0e.js";import{e as a}from"./property-03f59dce.js";import{l as i}from"./if-defined-f43b1487.js";import{n as s}from"./ref-697b28b5.js";import{o as l}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-99db12c1.js";import{F as c}from"./FormAssociatedMixin-f6e5b3cd.js";import{I as p}from"./InputMixin-158f63fb.js";import{R as u,s as b}from"./TextField-94b0839b.js";import{A as v}from"./AutocompleteMixin-370de2be.js";import{S as m}from"./SizeMixin-4559b224.js";import{s as h}from"./Component-49a41387.js";import{s as x}from"./FormField-72062bf1.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const f=t`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size, 240px);--_n-textarea-block-size:var(--n-textarea-block-size, 76px);--_n-input-background:var(--n-textarea-background, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text));--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-textarea-border-radius, var(--n-border-radius-s))}.n-input-container{position:relative;inline-size:var(--_n-textarea-inline-size)}.n-input{min-block-size:var(--_n-textarea-block-size);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}:host([expand]){--_n-textarea-inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent));--_n-input-background:var(--n-textarea-background, var(--n-color-surface))}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-textarea-color, var(--n-color-text-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent))}`;let y=class extends(m(c(v(u(p(d(n))))))){constructor(){super(...arguments),this.inputId="textarea",this.resize="vertical",this.expand=!1}render(){var e;return o`${this.renderLabel()}<div class="n-input-container"><textarea ${s(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${i(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${i(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea></div>${this.renderError()}`}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=null)}};y.styles=[h,x,b,f],e([a({reflect:!0})],y.prototype,"resize",void 0),e([a({reflect:!0,type:Boolean})],y.prototype,"expand",void 0),e([l("resize","updated"),l("value","updated")],y.prototype,"resizeToFitContent",null),y=e([r("nord-textarea")],y);var j=y;export{j as default};
 //# sourceMappingURL=Textarea.js.map

package/lib/Textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { observe } from \"../common/decorators/observe.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 { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Textarea.css\"\n\n/*\n Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\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 textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n \n @cssprop [--n-textarea-inline-size=240px] - Controls the inline size, or width, of the textarea.\n * @cssprop [--n-textarea-block-size=76px] - Controls the block size, or height, or the textarea.\n * @cssprop [--n-textarea-background=var(--n-color-active)] - Controls the background of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-color=var(--n-color-text)] - Controls the text color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-color=var(--n-color-border-strong)] - Controls the border color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n\n /\n@customElement(\"nord-textarea\")\nexport default class Textarea extends ~~FormAssociatedMixin~~(\n AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n protected inputId = \"textarea\"\n\n /\n Controls whether the textarea is resizable.\n * By default is manually resizable vertically.\n * Set to \"auto\" to enable auto-resizing as content grows.\n /\n @property({ reflect: true }) resize: \"vertical\" \| \"auto\" = \"vertical\"\n\n /\n Controls whether the textarea expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n render() {\n return html`\n ${this.renderLabel()}\n\n <div class=\"n-input-container\">\n <textarea\n ${ref(this.focusableRef)}\n id=${this.inputId}\n class=\"n-input\"\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n .value=${this.value ?? \"\"}\n placeholder=${ifDefined(this.placeholder)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n autocomplete=${this.autocomplete as any}\n ></textarea>\n </div>\n\n ${this.renderError()}\n `\n }\n\n @observe(\"resize\", \"updated\")\n @observe(\"value\", \"updated\")\n protected resizeToFitContent() {\n const textarea = this.focusableRef.value\n\n if (!textarea) {\n return\n }\n\n if (this.resize === \"auto\") {\n textarea.style.height = \"auto\"\n textarea.style.height = `${textarea.scrollHeight}px`\n } else {\n // @ts-expect-error this is actually fine, and removes the style value\n textarea.style.height = null\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-textarea\": Textarea\n }\n}\n"],"names":["Textarea","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","resize","expand","render","html","renderLabel","ref","focusableRef","disabled","readonly","required","ifDefined","name","_a","value","placeholder","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","renderError","resizeToFitContent","textarea","style","height","scrollHeight","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","observe","customElement"],"mappings":"~~4kFAqCA~~,IAAqBA,EAArB,cAAsCC,EACpCC,EAAkBC,EAAcC,EAAWC,EAAeC,~~QAD5DC~~,kCAKYC,KAAOC,QAAG,WAOSD,KAAME,OAAwB,WAKfF,KAAMG,QAAG,CA8CtD,CA5CCC,eACE,OAAOC,CAAI,GACPL,KAAKM,yDAIDC,EAAIP,KAAKQ,qBACNR,KAAKC,uCAEED,KAAKS,wBACLT,KAAKU,wBACLV,KAAKW,mBACVC,EAAUZ,KAAKa,kBACH,QAAVC,EAAAd,KAAKe,aAAK,IAAAD,EAAAA,EAAI,oBACTF,EAAUZ,KAAKgB,0BACnBhB,KAAKiB,yBACNjB,KAAKkB,kCACKN,EAAUZ,KAAKmB,oCACnBP,EAAUZ,KAAKoB,gCACfpB,KAAKqB,kCAItBrB,KAAKsB,eAEV,CAISC,qBACR,MAAMC,EAAWxB,KAAKQ,aAAaO,MAE9BS,IAIe,SAAhBxB,KAAKE,QACPsB,EAASC,MAAMC,OAAS,OACxBF,EAASC,MAAMC,OAAS,GAAGF,EAASG,kBAGpCH,EAASC,MAAMC,OAAS,KAE3B,~~GA3DMlC~~,~~EAAMoC~~,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBN,GASpCO,EAAA,CAA5BC,EAAS,CAAEC,SAAS,~~KAAgD1C~~,~~EAAA2C~~,UAAA,cAAA,GAKzBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,~~WAAyB7C~~,~~EAAA2C~~,UAAA,cAAA,GA+B1DH,EAAA,CAFCM,EAAQ,SAAU,WAClBA,EAAQ,QAAS,~~YAejB9C~~,~~EAAA2C~~,UAAA,qBAAA,~~MA9DkB3C~~,~~EAAQwC~~,EAAA,CAD5BO,EAAc,~~kBACM/C~~,SAAAA"}
1	+ {"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { observe } from \"../common/decorators/observe.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 { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Textarea.css\"\n\n/*\n Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\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 textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n \n @cssprop [--n-textarea-inline-size=240px] - Controls the inline size, or width, of the textarea.\n * @cssprop [--n-textarea-block-size=76px] - Controls the block size, or height, or the textarea.\n * @cssprop [--n-textarea-background=var(--n-color-active)] - Controls the background of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-color=var(--n-color-text)] - Controls the text color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-color=var(--n-color-border-strong)] - Controls the border color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n\n /\n@customElement(\"nord-textarea\")\nexport default class Textarea extends SizeMixin(\n FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement)))))\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n protected inputId = \"textarea\"\n\n /\n Controls whether the textarea is resizable.\n * By default is manually resizable vertically.\n * Set to \"auto\" to enable auto-resizing as content grows.\n /\n @property({ reflect: true }) resize: \"vertical\" \| \"auto\" = \"vertical\"\n\n /\n Controls whether the textarea expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n render() {\n return html`\n ${this.renderLabel()}\n\n <div class=\"n-input-container\">\n <textarea\n ${ref(this.focusableRef)}\n id=${this.inputId}\n class=\"n-input\"\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n .value=${this.value ?? \"\"}\n placeholder=${ifDefined(this.placeholder)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n autocomplete=${this.autocomplete as any}\n ></textarea>\n </div>\n\n ${this.renderError()}\n `\n }\n\n @observe(\"resize\", \"updated\")\n @observe(\"value\", \"updated\")\n protected resizeToFitContent() {\n const textarea = this.focusableRef.value\n\n if (!textarea) {\n return\n }\n\n if (this.resize === \"auto\") {\n textarea.style.height = \"auto\"\n textarea.style.height = `${textarea.scrollHeight}px`\n } else {\n // @ts-expect-error this is actually fine, and removes the style value\n textarea.style.height = null\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-textarea\": Textarea\n }\n}\n"],"names":["Textarea","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","resize","expand","render","html","renderLabel","ref","focusableRef","disabled","readonly","required","ifDefined","name","_a","value","placeholder","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","renderError","resizeToFitContent","textarea","style","height","scrollHeight","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","observe","customElement"],"mappings":"wnFAsCA,IAAqBA,EAArB,cAAsCC,EACpCC,EAAoBC,EAAkBC,EAAcC,EAAWC,EAAeC,SADhFC,kCAKYC,KAAOC,QAAG,WAOSD,KAAME,OAAwB,WAKfF,KAAMG,QAAG,CA8CtD,CA5CCC,eACE,OAAOC,CAAI,GACPL,KAAKM,yDAIDC,EAAIP,KAAKQ,qBACNR,KAAKC,uCAEED,KAAKS,wBACLT,KAAKU,wBACLV,KAAKW,mBACVC,EAAUZ,KAAKa,kBACH,QAAVC,EAAAd,KAAKe,aAAK,IAAAD,EAAAA,EAAI,oBACTF,EAAUZ,KAAKgB,0BACnBhB,KAAKiB,yBACNjB,KAAKkB,kCACKN,EAAUZ,KAAKmB,oCACnBP,EAAUZ,KAAKoB,gCACfpB,KAAKqB,kCAItBrB,KAAKsB,eAEV,CAISC,qBACR,MAAMC,EAAWxB,KAAKQ,aAAaO,MAE9BS,IAIe,SAAhBxB,KAAKE,QACPsB,EAASC,MAAMC,OAAS,OACxBF,EAASC,MAAMC,OAAS,GAAGF,EAASG,kBAGpCH,EAASC,MAAMC,OAAS,KAE3B,GA3DMnC,EAAMqC,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBN,GASpCO,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgD3C,EAAA4C,UAAA,cAAA,GAKzBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyB9C,EAAA4C,UAAA,cAAA,GA+B1DH,EAAA,CAFCM,EAAQ,SAAU,WAClBA,EAAQ,QAAS,YAejB/C,EAAA4C,UAAA,qBAAA,MA9DkB5C,EAAQyC,EAAA,CAD5BO,EAAc,kBACMhD,SAAAA"}