@nordhealth/components 3.15.0 → 3.16.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.
- package/custom-elements.json +1845 -1825
- package/lib/Checkbox.js +1 -1
- package/lib/CommandMenu.js +1 -1
- package/lib/DatePicker.js +1 -1
- package/lib/Dropdown.js +1 -1
- package/lib/Fieldset.js +1 -1
- package/lib/Fieldset.js.map +1 -1
- package/lib/{FormField-87551be2.js → FormField-b0da767b.js} +2 -2
- package/lib/FormField-b0da767b.js.map +1 -0
- package/lib/Input.js +1 -1
- package/lib/Layout.js +1 -1
- package/lib/LightDismissController-0a66b0a0.js +2 -0
- package/lib/LightDismissController-0a66b0a0.js.map +1 -0
- package/lib/Modal.js +1 -1
- package/lib/ModalController.js +1 -1
- package/lib/Popout-9ea00c67.js +2 -0
- package/lib/Popout-9ea00c67.js.map +1 -0
- package/lib/Popout.js +1 -1
- package/lib/Radio.js +1 -1
- package/lib/Range.js +1 -1
- package/lib/Select.js +1 -1
- package/lib/Textarea.js +1 -1
- package/lib/Textarea.js.map +1 -1
- package/lib/Toggle.js +1 -1
- package/lib/bundle.js +2 -2
- package/lib/bundle.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/src/common/controllers/LightDismissController.d.ts +1 -1
- package/lib/src/fieldset/Fieldset.d.ts +4 -0
- package/lib/src/fieldset/Fieldset.test.d.ts +1 -0
- package/package.json +2 -2
- package/lib/FormField-87551be2.js.map +0 -1
- package/lib/LightDismissController-11ae4745.js +0 -2
- package/lib/LightDismissController-11ae4745.js.map +0 -1
- package/lib/Popout-b6f0175c.js +0 -2
- package/lib/Popout-b6f0175c.js.map +0 -1
package/lib/Range.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as r,x as e,_ as n,e as a,s as o}from"./query-assigned-elements-92ce7494.js";import{n as t}from"./ref-99418ab4.js";import{o as i}from"./class-map-512f0bc1.js";import{n as s}from"./property-c78323b1.js";import{l as c}from"./if-defined-cccde88f.js";import{N as l}from"./events-d9666e88.js";import{F as d}from"./FocusableMixin-d30213b4.js";import{F as b}from"./FormAssociatedMixin-3fa55d53.js";import{I as m}from"./InputMixin-83b5bd46.js";import{R as g,s as u}from"./TextField-2d778949.js";import{A as h}from"./AutocompleteMixin-5a7e10b2.js";import{D as p}from"./DirectionController-f35f5476.js";import{s as v}from"./Component-2253424f.js";import{s as f}from"./FormField-
|
|
1
|
+
import{i as r,x as e,_ as n,e as a,s as o}from"./query-assigned-elements-92ce7494.js";import{n as t}from"./ref-99418ab4.js";import{o as i}from"./class-map-512f0bc1.js";import{n as s}from"./property-c78323b1.js";import{l as c}from"./if-defined-cccde88f.js";import{N as l}from"./events-d9666e88.js";import{F as d}from"./FocusableMixin-d30213b4.js";import{F as b}from"./FormAssociatedMixin-3fa55d53.js";import{I as m}from"./InputMixin-83b5bd46.js";import{R as g,s as u}from"./TextField-2d778949.js";import{A as h}from"./AutocompleteMixin-5a7e10b2.js";import{D as p}from"./DirectionController-f35f5476.js";import{s as v}from"./Component-2253424f.js";import{s as f}from"./FormField-b0da767b.js";import"./directive-e9ce14b4.js";import"./FormDataController-592ff3dd.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./VisuallyHidden.js";const _=r`:host{--_n-range-progress:0%;--_n-range-thumb-focus-ring:0 0 0 1px var(--n-color-accent);--_n-range-thumb-color:var(--n-color-text-on-accent);--_n-range-thumb-border-size:1px;--_n-range-thumb-border-color:var(--n-color-border-strong);--_n-range-gradient-direction:right;--_n-range-thumb-size:var(--n-range-thumb-size, 20px);--_n-range-track-color-active:var(--n-range-track-color-active, var(--n-color-accent));--_n-range-track-color-inactive:var(--n-range-track-color-inactive, var(--n-color-border-strong));--_n-range-track-size:var(--n-range-track-size, 3px)}.n-range{-webkit-appearance:none;appearance:none;inline-size:100%;background:linear-gradient(to var(--_n-range-gradient-direction),var(--_n-range-track-color-active) 0,var(--_n-range-track-color-active) var(--_n-range-progress),var(--_n-range-track-color-inactive) var(--_n-range-progress));border-radius:var(--n-border-radius-s)}.n-range.is-rtl{--_n-range-gradient-direction:left}.n-range::-webkit-slider-runnable-track{inline-size:100%;block-size:var(--_n-range-track-size)}.n-range::-webkit-slider-thumb{block-size:var(--_n-range-thumb-size);inline-size:var(--_n-range-thumb-size);box-shadow:var(--n-box-shadow),var(--n-box-shadow);border-radius:var(--n-border-radius-circle);background:var(--_n-range-thumb-color);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);cursor:pointer;-webkit-appearance:none;margin-block-start:calc(calc(var(--_n-range-thumb-size) - var(--_n-range-track-size))/ 2 * -1)}.n-range::-moz-range-track{border:var(--n-space-s) solid var(--n-color-surface);inline-size:100%;block-size:var(--_n-range-track-size)}.n-range::-moz-range-thumb{block-size:var(--_n-range-thumb-size);inline-size:var(--_n-range-thumb-size);box-shadow:var(--n-box-shadow);border-radius:var(--n-border-radius-circle);background:var(--_n-range-thumb-color);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);cursor:pointer;appearance:none;margin-block-start:calc(calc(var(--_n-range-thumb-size) - var(--_n-range-track-size))/ 2 * -1)}.n-label-container{margin-block-end:0;inline-size:100%}label{display:flex!important}.n-range-output{font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);font-size:var(--n-font-size-m);margin-inline-start:auto}.n-range:focus{outline:0}.n-label-container:hover+.n-input-container .n-input:disabled,.n-range:disabled{opacity:.5}.n-range:disabled::-webkit-slider-thumb,.n-range[readonly]::-webkit-slider-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:disabled::-moz-range-thumb,.n-range[readonly]::-moz-range-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:focus::-webkit-slider-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}.n-range:focus::-moz-range-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}`;let z=class extends(b(h(g(m(d(o)))))){constructor(){super(...arguments),this.direction=new p(this),this.min=0,this.max=10,this.step=1,this.expand=!1}render(){const r=Number(this.value)||0,n=Math.max(0,(r-this.min)/(this.max-this.min));return e`<div class="n-input-container">${this.renderLabel(e`<span class="n-range-output" aria-hidden="true">${r}</span>`)} <input ${t(this.focusableRef)} id="${this.inputId}" type="range" class="${i({"n-range":!0,"is-rtl":this.direction.isRTL})}" name="${c(this.name)}" min="${this.min}" step="${this.step}" max="${this.max}" style="${`--_n-range-progress: ${100*n}%`}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" .value="${this.value?this.value:"0"}" @input="${this.handleInput}" @change="${this.handleChange}" aria-describedby="${c(this.getDescribedBy())}" aria-invalid="${c(this.getInvalid())}"></div>${this.renderError()}`}handleInput(r){r.stopPropagation();const e=r.target;if(this.readonly)return r.preventDefault(),void(e.value=this.value);this.value=e.value,this.dispatchEvent(new l("input"))}};z.styles=[v,f,u,_],n([s({reflect:!0,type:Number})],z.prototype,"min",void 0),n([s({reflect:!0,type:Number})],z.prototype,"max",void 0),n([s({reflect:!0,type:Number})],z.prototype,"step",void 0),n([s({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),z=n([a("nord-range")],z);var k=z;export{k as default};
|
|
2
2
|
//# sourceMappingURL=Range.js.map
|
package/lib/Select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as t,x as o,_ as e,e as r,s as n}from"./query-assigned-elements-92ce7494.js";import{n as i}from"./property-c78323b1.js";import{l as s}from"./if-defined-cccde88f.js";import{n as a}from"./ref-99418ab4.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-83b5bd46.js";import{F as c}from"./FocusableMixin-d30213b4.js";import{F as p}from"./FormAssociatedMixin-3fa55d53.js";import{A as
|
|
1
|
+
import{i as t,x as o,_ as e,e as r,s as n}from"./query-assigned-elements-92ce7494.js";import{n as i}from"./property-c78323b1.js";import{l as s}from"./if-defined-cccde88f.js";import{n as a}from"./ref-99418ab4.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-83b5bd46.js";import{F as c}from"./FocusableMixin-d30213b4.js";import{F as p}from"./FormAssociatedMixin-3fa55d53.js";import{A as b}from"./AutocompleteMixin-5a7e10b2.js";import{S as u}from"./SizeMixin-ab074eff.js";import{s as m}from"./Component-2253424f.js";import{s as h}from"./FormField-b0da767b.js";import{S as v}from"./SlotController-d733c575.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";import"./LightDomController-5388d84c.js";import"./cond-bb9ee891.js";import"./Spinner.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./FormDataController-592ff3dd.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";var f=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z" fill="currentColor"/></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const x=t`:host{--_n-select-block-size:var(--n-select-block-size, var(--n-space-xl))}.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-select-block-size);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}option{color:initial}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-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-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}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;l.registerIcon(f);let g=class extends(u(p(b(d(c(n)))))){constructor(){super(...arguments),this.defaultSlot=new v(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const t=this.options,e=this.getButtonText(t);return o`<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&&o`<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="icon"></slot>${e}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(t){const o=t.find((t=>t.value===this.value.toString()));return o?o.text:this.placeholder?this.placeholder:t[0]?t[0].text:""}renderOption(t){return o`<option value="${s(t.value)}" ?disabled="${t.disabled}" .selected="${t.value===this.value.toString()}">${t.text}</option>`}};g.styles=[m,h,x],e([i({reflect:!0,type:Boolean})],g.prototype,"expand",void 0),g=e([r("nord-select")],g);var j=g;export{j as default};
|
|
2
2
|
//# sourceMappingURL=Select.js.map
|
package/lib/Textarea.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,x as r,A as t,_ as
|
|
1
|
+
import{i as e,x as r,A as t,_ as n,e as o,s as a}from"./query-assigned-elements-92ce7494.js";import{n as i}from"./property-c78323b1.js";import{l}from"./if-defined-cccde88f.js";import{n as s}from"./ref-99418ab4.js";import{o as c}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-d30213b4.js";import{F as p}from"./FormAssociatedMixin-3fa55d53.js";import{I as u}from"./InputMixin-83b5bd46.js";import{R as h,s as v}from"./TextField-2d778949.js";import{A as m}from"./AutocompleteMixin-5a7e10b2.js";import{S as b}from"./SizeMixin-ab074eff.js";import{T as x}from"./TextSelectableMixin-aac97d82.js";import{s as f}from"./Component-2253424f.js";import{s as g}from"./FormField-b0da767b.js";import{LocalizeController as z}from"./LocalizeController.js";import{N as j}from"./events-d9666e88.js";import"./directive-e9ce14b4.js";import"./FormDataController-592ff3dd.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./VisuallyHidden.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const y=e`: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-character-counter{margin-block-start:var(--n-space-xs);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker)}.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 $=class extends(b(p(m(h(x(u(d(a)))))))){constructor(){super(...arguments),this.inputId="textarea",this.localize=new z(this,{onLangChange:()=>this.handleLangChange()}),this.resize="vertical",this.expand=!1,this.characterCounter=!1}render(){var e;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${s(this.textSelectableRef)} ${s(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${l(this.name)}" maxlength="${l(this.maxLength)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${l(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" @select="${this.handleSelect}" aria-describedby="${l(this.getDescribedBy())}" aria-invalid="${l(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea> ${this.characterCounter?this.renderCharacterCounter():t}</div>${this.renderError()}`}handleSelect(e){e.stopPropagation(),this.dispatchEvent(new j("select"))}renderCharacterCounter(){const{value:e,maxLength:t}=this,n="string"==typeof e?this.lengthMeasurer(e):0,o=t?t-n:null,a=t?`${n}/${t}`:n;return r`<nord-visually-hidden aria-live="polite" aria-atomic="true">${null!=o&&o<=10?this.localize.term("remainingCharacters",o):""}</nord-visually-hidden><div class="n-character-counter">${a}</div>`}handleLangChange(){const e=this.localize.resolvedLang;this.lengthMeasurer=function(e){if(Intl.Segmenter){const r=new Intl.Segmenter(e);return e=>[...r.segment(e)].length}return e=>e.length}(e)}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height="")}};$.styles=[f,g,v,y],n([i({reflect:!0})],$.prototype,"resize",void 0),n([i({reflect:!0,type:Boolean})],$.prototype,"expand",void 0),n([i({reflect:!0,attribute:"maxlength",type:Number})],$.prototype,"maxLength",void 0),n([i({reflect:!0,type:Boolean,attribute:"character-counter"})],$.prototype,"characterCounter",void 0),n([c("resize","updated"),c("value","updated")],$.prototype,"resizeToFitContent",null),$=n([o("nord-textarea")],$);var C=$;export{C as default};
|
|
2
2
|
//# sourceMappingURL=Textarea.js.map
|
package/lib/Textarea.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { 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\"\nimport { TextSelectableMixin } from \"../common/mixins/TextSelectableMixin.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\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nfunction createLengthMeasurer(locale: string) {\n if (Intl.Segmenter) {\n const segmenter = new Intl.Segmenter(locale)\n return (value: string) => [...segmenter.segment(value)].length\n }\n\n return (value: string) => value.length\n}\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, of 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 * @localization remainingCharacters - A function which receives the number of remaining characters and returns a string to be used as the aria-live message.\n */\n@customElement(\"nord-textarea\")\nexport default class Textarea extends SizeMixin(\n FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(TextSelectableMixin(InputMixin(FocusableMixin(LitElement))))))\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n protected inputId = \"textarea\"\n\n private lengthMeasurer!: (value: string) => number\n private localize = new LocalizeController<\"nord-textarea\">(this, {\n onLangChange: () => this.handleLangChange(),\n })\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 /**\n * Controls the max allowed length for the textarea.\n */\n @property({ reflect: true, attribute: \"maxlength\", type: Number }) maxLength?: number\n\n /**\n * Controls whether to show a count of the number of characters in the textarea.\n * When combined with `maxlength`, both the count and the max length are shown.\n */\n @property({ reflect: true, type: Boolean, attribute: \"character-counter\" }) characterCounter = false\n\n render() {\n return html`\n ${this.renderLabel()}\n\n <div class=\"n-input-container\">\n <textarea\n ${ref(this.textSelectableRef)}\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 maxlength=${ifDefined(this.maxLength)}\n .value=${this.value ?? \"\"}\n placeholder=${ifDefined(this.placeholder)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @select=${this.handleSelect}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n autocomplete=${this.autocomplete as any}\n ></textarea>\n\n ${this.characterCounter ? this.renderCharacterCounter() : nothing}\n </div>\n\n ${this.renderError()}\n `\n }\n\n protected handleSelect(e: Event) {\n e.stopPropagation()\n\n /**\n * Fired when some text has been selected.\n */\n this.dispatchEvent(new NordEvent(\"select\"))\n }\n\n private renderCharacterCounter() {\n const { value, maxLength } = this\n const length = typeof value === \"string\" ? this.lengthMeasurer(value) : 0\n\n const remainder = maxLength ? maxLength - length : null\n const counter = maxLength ? `${length}/${maxLength}` : length\n\n return html`\n <nord-visually-hidden aria-live=\"polite\" aria-atomic=\"true\">\n ${remainder != null && remainder <= 10 ? this.localize.term(\"remainingCharacters\", remainder) : \"\"}\n </nord-visually-hidden>\n <div class=\"n-character-counter\">${counter}</div>\n `\n }\n\n private handleLangChange() {\n const lang = this.localize.resolvedLang\n this.lengthMeasurer = createLengthMeasurer(lang)\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 textarea.style.height = \"\"\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-textarea\": Textarea\n }\n}\n"],"names":["Textarea","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","localize","LocalizeController","onLangChange","handleLangChange","resize","expand","characterCounter","render","html","renderLabel","ref","textSelectableRef","focusableRef","disabled","readonly","required","ifDefined","name","maxLength","_a","value","placeholder","handleChange","handleInput","handleSelect","getDescribedBy","getInvalid","autocomplete","renderCharacterCounter","nothing","renderError","e","stopPropagation","dispatchEvent","NordEvent","length","lengthMeasurer","remainder","counter","term","lang","resolvedLang","locale","Intl","Segmenter","segmenter","segment","createLengthMeasurer","resizeToFitContent","textarea","style","height","scrollHeight","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","attribute","Number","observe","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { 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\"\nimport { TextSelectableMixin } from \"../common/mixins/TextSelectableMixin.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\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nfunction createLengthMeasurer(locale: string) {\n if (Intl.Segmenter) {\n const segmenter = new Intl.Segmenter(locale)\n return (value: string) => [...segmenter.segment(value)].length\n }\n\n return (value: string) => value.length\n}\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, of 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 * @localization remainingCharacters - A function which receives the number of remaining characters and returns a string to be used as the aria-live message.\n */\n@customElement(\"nord-textarea\")\nexport default class Textarea extends SizeMixin(\n FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(TextSelectableMixin(InputMixin(FocusableMixin(LitElement))))))\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n protected inputId = \"textarea\"\n\n private lengthMeasurer!: (value: string) => number\n private localize = new LocalizeController<\"nord-textarea\">(this, {\n onLangChange: () => this.handleLangChange(),\n })\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 /**\n * Controls the max allowed length for the textarea.\n */\n @property({ reflect: true, attribute: \"maxlength\", type: Number }) maxLength?: number\n\n /**\n * Controls whether to show a count of the number of characters in the textarea.\n * When combined with `maxlength`, both the count and the max length are shown.\n */\n @property({ reflect: true, type: Boolean, attribute: \"character-counter\" }) characterCounter = false\n\n render() {\n return html`\n ${this.renderLabel()}\n\n <div class=\"n-input-container\">\n <textarea\n ${ref(this.textSelectableRef)}\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 maxlength=${ifDefined(this.maxLength)}\n .value=${this.value ?? \"\"}\n placeholder=${ifDefined(this.placeholder)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @select=${this.handleSelect}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n autocomplete=${this.autocomplete as any}\n ></textarea>\n\n ${this.characterCounter ? this.renderCharacterCounter() : nothing}\n </div>\n\n ${this.renderError()}\n `\n }\n\n protected handleSelect(e: Event) {\n e.stopPropagation()\n\n /**\n * Fired when some text has been selected.\n */\n this.dispatchEvent(new NordEvent(\"select\"))\n }\n\n private renderCharacterCounter() {\n const { value, maxLength } = this\n const length = typeof value === \"string\" ? this.lengthMeasurer(value) : 0\n\n const remainder = maxLength ? maxLength - length : null\n const counter = maxLength ? `${length}/${maxLength}` : length\n\n return html`\n <nord-visually-hidden aria-live=\"polite\" aria-atomic=\"true\">\n ${remainder != null && remainder <= 10 ? this.localize.term(\"remainingCharacters\", remainder) : \"\"}\n </nord-visually-hidden>\n <div class=\"n-character-counter\">${counter}</div>\n `\n }\n\n private handleLangChange() {\n const lang = this.localize.resolvedLang\n this.lengthMeasurer = createLengthMeasurer(lang)\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 textarea.style.height = \"\"\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-textarea\": Textarea\n }\n}\n"],"names":["Textarea","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","localize","LocalizeController","onLangChange","handleLangChange","resize","expand","characterCounter","render","html","renderLabel","ref","textSelectableRef","focusableRef","disabled","readonly","required","ifDefined","name","maxLength","_a","value","placeholder","handleChange","handleInput","handleSelect","getDescribedBy","getInvalid","autocomplete","renderCharacterCounter","nothing","renderError","e","stopPropagation","dispatchEvent","NordEvent","length","lengthMeasurer","remainder","counter","term","lang","resolvedLang","locale","Intl","Segmenter","segmenter","segment","createLengthMeasurer","resizeToFitContent","textarea","style","height","scrollHeight","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","attribute","Number","observe","customElement"],"mappings":"mpGAmDe,IAAMA,EAAN,cAAuBC,EACpCC,EAAoBC,EAAkBC,EAAcC,EAAoBC,EAAWC,EAAeC,UADrF,WAAAC,uBAKHC,KAAOC,QAAG,WAGZD,KAAAE,SAAW,IAAIC,EAAoCH,KAAM,CAC/DI,aAAc,IAAMJ,KAAKK,qBAQEL,KAAMM,OAAwB,WAKfN,KAAMO,QAAG,EAWuBP,KAAgBQ,kBAAG,CA+EhG,CA7EC,MAAAC,SACE,OAAOC,CAAI,GACPV,KAAKW,yDAIDC,EAAIZ,KAAKa,sBACTD,EAAIZ,KAAKc,qBACNd,KAAKC,uCAEED,KAAKe,wBACLf,KAAKgB,wBACLhB,KAAKiB,mBACVC,EAAUlB,KAAKmB,qBACVD,EAAUlB,KAAKoB,uBACR,QAAVC,EAAArB,KAAKsB,aAAK,IAAAD,EAAAA,EAAI,oBACTH,EAAUlB,KAAKuB,0BACnBvB,KAAKwB,yBACNxB,KAAKyB,yBACJzB,KAAK0B,mCACIR,EAAUlB,KAAK2B,oCACnBT,EAAUlB,KAAK4B,gCACf5B,KAAK6B,6BAGpB7B,KAAKQ,iBAAmBR,KAAK8B,yBAA2BC,UAG1D/B,KAAKgC,eAEV,CAES,YAAAN,CAAaO,GACrBA,EAAEC,kBAKFlC,KAAKmC,cAAc,IAAIC,EAAU,UAClC,CAEO,sBAAAN,GACN,MAAMR,MAAEA,EAAKF,UAAEA,GAAcpB,KACvBqC,EAA0B,iBAAVf,EAAqBtB,KAAKsC,eAAehB,GAAS,EAElEiB,EAAYnB,EAAYA,EAAYiB,EAAS,KAC7CG,EAAUpB,EAAY,GAAGiB,KAAUjB,IAAciB,EAEvD,OAAO3B,CAAI,+DAEQ,MAAb6B,GAAqBA,GAAa,GAAKvC,KAAKE,SAASuC,KAAK,sBAAuBF,GAAa,6DAE/DC,SAEtC,CAEO,gBAAAnC,GACN,MAAMqC,EAAO1C,KAAKE,SAASyC,aAC3B3C,KAAKsC,eA3HT,SAA8BM,GAC5B,GAAIC,KAAKC,UAAW,CAClB,MAAMC,EAAY,IAAIF,KAAKC,UAAUF,GACrC,OAAQtB,GAAkB,IAAIyB,EAAUC,QAAQ1B,IAAQe,MACzD,CAED,OAAQf,GAAkBA,EAAMe,MAClC,CAoH0BY,CAAqBP,EAC5C,CAIS,kBAAAQ,GACR,MAAMC,EAAWnD,KAAKc,aAAaQ,MAE9B6B,IAIe,SAAhBnD,KAAKM,QACP6C,EAASC,MAAMC,OAAS,OACxBF,EAASC,MAAMC,OAAS,GAAGF,EAASG,kBAEpCH,EAASC,MAAMC,OAAS,GAE3B,GA5GM/D,EAAMiE,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBN,GAcpCO,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgDvE,EAAAwE,UAAA,cAAA,GAKzBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyB1E,EAAAwE,UAAA,cAAA,GAKSH,EAAA,CAAlEC,EAAS,CAAEC,SAAS,EAAMI,UAAW,YAAaF,KAAMG,UAA4B5E,EAAAwE,UAAA,iBAAA,GAMTH,EAAA,CAA3EC,EAAS,CAAEC,SAAS,EAAME,KAAMC,QAASC,UAAW,uBAA+C3E,EAAAwE,UAAA,wBAAA,GAiE1FH,EAAA,CAFTQ,EAAQ,SAAU,WAClBA,EAAQ,QAAS,YAcjB7E,EAAAwE,UAAA,qBAAA,MA/GkBxE,EAAQqE,EAAA,CAD5BS,EAAc,kBACM9E,SAAAA"}
|
package/lib/Toggle.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,x as n,_ as r,e as i,s as t}from"./query-assigned-elements-92ce7494.js";import{n as o}from"./property-c78323b1.js";import{l as
|
|
1
|
+
import{i as e,x as n,_ as r,e as i,s as t}from"./query-assigned-elements-92ce7494.js";import{n as o}from"./property-c78323b1.js";import{l as a}from"./if-defined-cccde88f.js";import{n as s}from"./ref-99418ab4.js";import{F as l}from"./FocusableMixin-d30213b4.js";import{F as c}from"./FormAssociatedMixin-3fa55d53.js";import{I as d}from"./InputMixin-83b5bd46.js";import{s as g}from"./Component-2253424f.js";import{s as p}from"./FormField-b0da767b.js";import"./directive-e9ce14b4.js";import"./FormDataController-592ff3dd.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";const h=e`:host{--_n-toggle-block-size:calc(var(--_n-toggle-inline-size) / 1.6);--_n-toggle-inline-size:3.2143em;--_n-toggle-thumb-margin:0.35em;display:inline-block;font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-block-size:100%}.n-input-container{position:relative}.n-toggle{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;inline-size:var(--_n-toggle-inline-size);block-size:var(--_n-toggle-block-size);border-radius:var(--n-border-radius-pill);background:var(--_n-toggle-background,var(--n-color-border-strong));cursor:pointer;transition:background var(--n-transition-slowly);font-size:var(--_n-toggle-size,var(--n-font-size-m))}.n-toggle::before{content:"";display:block;aspect-ratio:1/1;block-size:calc(100% - 2 * var(--_n-toggle-thumb-margin));background:var(--n-color-text-on-accent);border-radius:var(--n-border-radius-circle);transition:margin;transition-duration:inherit;margin-inline-start:var(--_n-toggle-thumb-margin);box-shadow:var(--n-box-shadow)}input:checked{--_n-toggle-background:var(--n-color-accent)}input:checked::before{margin-inline-start:calc(var(--_n-toggle-inline-size) - var(--_n-toggle-block-size) + var(--_n-toggle-thumb-margin))}input:checked[aria-invalid]{--_n-toggle-background:var(--n-color-status-danger)}input:focus{outline:0;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{cursor:default}:host([disabled]) input:not(:checked){--_n-toggle-background:var(--n-color-border-neutral)}:host([disabled]) input:checked{opacity:.3}.n-label-container{margin-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:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}:host([size="s"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xs)}:host([size="l"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xl)}`;let b=class extends(c(d(l(t)))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=n`<div class="n-expand">${this.renderLabel()} ${this.renderError()}</div>`,r=n`<div class="n-input-container"><input ${s(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"></div>`;return n`<div class="n-flex">${this.reverse?[e,r]:[r,e]}</div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};b.styles=[g,p,h],r([o({reflect:!0,type:Boolean})],b.prototype,"checked",void 0),r([o({reflect:!0,type:Boolean})],b.prototype,"reverse",void 0),r([o({reflect:!0})],b.prototype,"size",void 0),b=r([i("nord-toggle")],b);var v=b;export{v as default};
|
|
2
2
|
//# sourceMappingURL=Toggle.js.map
|