@nordhealth/components 2.2.0 → 2.4.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 +1572 -1320
- package/lib/Badge.js +1 -1
- package/lib/Badge.js.map +1 -1
- package/lib/{Calendar-a0246aa3.js → Calendar-8b36a7e5.js} +2 -2
- package/lib/Calendar-8b36a7e5.js.map +1 -0
- package/lib/Calendar.js +1 -1
- package/lib/Checkbox.js +1 -1
- package/lib/Checkbox.js.map +1 -1
- package/lib/DatePicker.js +1 -1
- package/lib/DatePicker.js.map +1 -1
- package/lib/Icon.js +1 -1
- package/lib/Icon.js.map +1 -1
- package/lib/Input.js +1 -1
- package/lib/Input.js.map +1 -1
- package/lib/NavItem.js +1 -1
- package/lib/NavItem.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 +4 -4
- 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/icon/Icon.d.ts +1 -1
- 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 +5 -5
- package/lib/Calendar-a0246aa3.js.map +0 -1
package/lib/Input.js.map
CHANGED
|
@@ -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
|
|
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/NavItem.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as t,b as a,s as i}from"./lit-element-79bc2e0e.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./class-map-cd6c8cbd.js";import{n as c}from"./ref-697b28b5.js";import{D as l}from"./DirectionController-8b298382.js";import{S as d}from"./SlotController-ea6eff46.js";import{c as v}from"./cond-0a8d4554.js";import{N as p}from"./events-731d0007.js";import{F as m}from"./FocusableMixin-99db12c1.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const h=o`:host{--_n-nav-item-box-shadow:none;all:unset;display:block;font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;max-inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--_n-nav-item-box-shadow);position:relative}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-nav-item:focus{--_n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent)}}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-nav-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([badge]) .n-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-inline-size:calc(100% - calc(var(--n-space-m) + var(--n-space-m)));margin-block-end:-3px}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-warning);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;position:absolute;margin-block-start:-2px;margin-inline-start:calc(var(--n-space-s)/ 1.5);font-size:var(--n-font-size-xs);display:inline-block}`;let b=class extends(m(i)){constructor(){super(...arguments),this.subnavSlot=new d(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=t`${this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:a}</div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),t`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return t`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${v(this.active,"page")}" href="${this.href||""}">${e}</a>`}renderToggle(e){return t`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${e}<nord-icon size="
|
|
1
|
+
import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as t,b as a,s as i}from"./lit-element-79bc2e0e.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./class-map-cd6c8cbd.js";import{n as c}from"./ref-697b28b5.js";import{D as l}from"./DirectionController-8b298382.js";import{S as d}from"./SlotController-ea6eff46.js";import{c as v}from"./cond-0a8d4554.js";import{N as p}from"./events-731d0007.js";import{F as m}from"./FocusableMixin-99db12c1.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const h=o`:host{--_n-nav-item-box-shadow:none;all:unset;display:block;font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;max-inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--_n-nav-item-box-shadow);position:relative}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-nav-item:focus{--_n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent)}}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-nav-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([badge]) .n-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-inline-size:calc(100% - calc(var(--n-space-m) + var(--n-space-m)));margin-block-end:-3px}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-warning);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;position:absolute;margin-block-start:-2px;margin-inline-start:calc(var(--n-space-s)/ 1.5);font-size:var(--n-font-size-xs);display:inline-block}`;let b=class extends(m(i)){constructor(){super(...arguments),this.subnavSlot=new d(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=t`${this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:a}</div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),t`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return t`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${v(this.active,"page")}" href="${this.href||""}">${e}</a>`}renderToggle(e){return t`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${e}<nord-icon size="xxs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return t`<button class="n-nav-item" ${c(this.focusableRef)}>${e}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};b.styles=h,e([r({type:Boolean,reflect:!0})],b.prototype,"active",void 0),e([r()],b.prototype,"icon",void 0),e([r()],b.prototype,"href",void 0),e([r()],b.prototype,"badge",void 0),e([r({type:Boolean})],b.prototype,"open",void 0),b=e([n("nord-nav-item")],b);var f=b;export{f as default};
|
|
2
2
|
//# sourceMappingURL=NavItem.js.map
|
package/lib/NavItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(LitElement) {\n static styles = style\n\n private subnavSlot = new SlotController(this, \"subnav\")\n private direction = new DirectionController(this)\n\n /**\n * Used for indicating the current page. This gives a prominent background to the nav item,\n * and marks the item as the current page for assistive technology.\n */\n @property({ type: Boolean, reflect: true }) active = false\n\n /**\n * The name of an icon from Nordicons to display for the nav item.\n */\n @property() icon?: string\n\n /**\n * The url the nav item should link to.\n * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n */\n @property() href?: string\n\n /**\n * Allows you to add a notification badge with a number next to the nav item.\n */\n @property() badge?: string\n\n /**\n * When the nav items contains a subnav, controls whether the section is expanded or not.\n * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n */\n @property({ type: Boolean }) open = false\n\n connectedCallback() {\n super.connectedCallback()\n\n // in cases where there is nested nav, and one of the items is active\n // we should auto-open the nav item for developer convenience\n if (this.querySelector(`nord-nav-item[active]`)) {\n this.open = true\n }\n }\n\n render() {\n const innards = html`\n ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n <div class=\"n-nav-content\">\n <span class=\"n-nav-label\"><slot></slot></span>\n ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n </div>\n `\n let element: TemplateResult\n\n if (this.subnavSlot.hasContent) {\n element = this.renderToggle(innards)\n } else if (this.href) {\n element = this.renderLink(innards)\n } else {\n element = this.renderButton(innards)\n }\n\n return html`\n <div role=\"listitem\">\n ${element}\n <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n </div>\n `\n }\n\n private renderLink(innards: TemplateResult) {\n return html`\n <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, \"page\")} href=${this.href || \"\"}>\n ${innards}\n </a>\n `\n }\n\n private renderToggle(innards: TemplateResult) {\n return html`\n <button\n class=\"n-nav-item\"\n @click=${this.toggleOpen}\n aria-expanded=${this.open ? \"true\" : \"false\"}\n ${ref(this.focusableRef)}\n >\n ${innards}\n\n <nord-icon\n size=\"
|
|
1
|
+
{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(LitElement) {\n static styles = style\n\n private subnavSlot = new SlotController(this, \"subnav\")\n private direction = new DirectionController(this)\n\n /**\n * Used for indicating the current page. This gives a prominent background to the nav item,\n * and marks the item as the current page for assistive technology.\n */\n @property({ type: Boolean, reflect: true }) active = false\n\n /**\n * The name of an icon from Nordicons to display for the nav item.\n */\n @property() icon?: string\n\n /**\n * The url the nav item should link to.\n * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n */\n @property() href?: string\n\n /**\n * Allows you to add a notification badge with a number next to the nav item.\n */\n @property() badge?: string\n\n /**\n * When the nav items contains a subnav, controls whether the section is expanded or not.\n * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n */\n @property({ type: Boolean }) open = false\n\n connectedCallback() {\n super.connectedCallback()\n\n // in cases where there is nested nav, and one of the items is active\n // we should auto-open the nav item for developer convenience\n if (this.querySelector(`nord-nav-item[active]`)) {\n this.open = true\n }\n }\n\n render() {\n const innards = html`\n ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n <div class=\"n-nav-content\">\n <span class=\"n-nav-label\"><slot></slot></span>\n ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n </div>\n `\n let element: TemplateResult\n\n if (this.subnavSlot.hasContent) {\n element = this.renderToggle(innards)\n } else if (this.href) {\n element = this.renderLink(innards)\n } else {\n element = this.renderButton(innards)\n }\n\n return html`\n <div role=\"listitem\">\n ${element}\n <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n </div>\n `\n }\n\n private renderLink(innards: TemplateResult) {\n return html`\n <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, \"page\")} href=${this.href || \"\"}>\n ${innards}\n </a>\n `\n }\n\n private renderToggle(innards: TemplateResult) {\n return html`\n <button\n class=\"n-nav-item\"\n @click=${this.toggleOpen}\n aria-expanded=${this.open ? \"true\" : \"false\"}\n ${ref(this.focusableRef)}\n >\n ${innards}\n\n <nord-icon\n size=\"xxs\"\n class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n name=\"arrow-expand-right-small\"\n ></nord-icon>\n </button>\n `\n }\n\n private renderButton(innards: TemplateResult) {\n return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n }\n\n private toggleOpen() {\n this.open = !this.open\n this.dispatchEvent(new NordEvent(\"toggle\"))\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-nav-item\": NavItem\n }\n}\n"],"names":["NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","connectedCallback","super","querySelector","render","innards","html","icon","nothing","badge","element","hasContent","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","styles","style","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"8hGAuBA,IAAqBA,EAArB,cAAqCC,EAAeC,IAApDC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBxBL,KAAIM,MAAG,CAyErC,CAvECC,oBACEC,MAAMD,oBAIFP,KAAKS,cAAc,2BACrBT,KAAKM,MAAO,EAEf,CAEDI,SACE,MAAMC,EAAUC,CAAI,GAChBZ,KAAKa,KAAOD,CAAI,uCAAsCZ,KAAKa,8BAA+BC,6EAGxFd,KAAKe,MAAQH,CAAI,6BAA6BZ,KAAKe,eAAiBD,UAG1E,IAAIE,EAUJ,OAPEA,EADEhB,KAAKC,WAAWgB,WACRjB,KAAKkB,aAAaP,GACnBX,KAAKmB,KACJnB,KAAKoB,WAAWT,GAEhBX,KAAKqB,aAAaV,GAGvBC,CAAI,wBAELI,gBACWhB,KAAKC,WAAWqB,uBAAqBtB,KAAKM,qBAG5D,CAEOc,WAAWT,GACjB,OAAOC,CAAI,yBACeW,EAAIvB,KAAKwB,+BAA8BC,EAAKzB,KAAKK,OAAQ,kBAAgBL,KAAKmB,MAAQ,OAC1GR,OAGP,CAEOO,aAAaP,GACnB,OAAOC,CAAI,sCAGEZ,KAAK0B,8BACE1B,KAAKM,KAAO,OAAS,YACnCiB,EAAIvB,KAAKwB,iBAETb,iCAIQgB,EAAS,CAAE,iBAAiB,EAAM,QAAS3B,KAAKG,UAAUyB,gEAKzE,CAEOP,aAAaV,GACnB,OAAOC,CAAI,8BAA8BW,EAAIvB,KAAKwB,iBAAiBb,YACpE,CAEOe,aACN1B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK6B,cAAc,IAAIC,EAAU,UAClC,GAvGMlC,EAAMmC,OAAGC,EAS4BC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBzC,EAAA0C,UAAA,cAAA,GAK9CL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAMbL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAAyBtC,EAAA0C,UAAA,aAAA,GAMGL,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAuBxC,EAAA0C,UAAA,YAAA,GAhCtB1C,EAAOqC,EAAA,CAD3BM,EAAc,kBACM3C,SAAAA"}
|
package/lib/Select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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{
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=Select.js.map
|
package/lib/Select.js.map
CHANGED
|
@@ -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
|
|
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"}
|
|
@@ -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
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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};
|
|
2
|
-
//# sourceMappingURL=TextField-
|
|
1
|
+
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};
|
|
2
|
+
//# sourceMappingURL=TextField-94b0839b.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField-
|
|
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
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as t,y as
|
|
1
|
+
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};
|
|
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 } 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
|
|
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"}
|