@nordhealth/components 2.12.0 → 2.13.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/README.md +1 -1
- package/custom-elements.json +2336 -2232
- package/lib/Button.js +1 -1
- package/lib/Button.js.map +1 -1
- package/lib/{Calendar-e3786f07.js → Calendar-9d3d6d01.js} +2 -2
- package/lib/{Calendar-e3786f07.js.map → Calendar-9d3d6d01.js.map} +1 -1
- package/lib/Calendar.js +1 -1
- package/lib/Card.js +1 -1
- package/lib/Checkbox.js +1 -1
- package/lib/Checkbox.js.map +1 -1
- package/lib/CommandMenu.js +1 -1
- package/lib/CommandMenu.js.map +1 -1
- package/lib/DatePicker.js +1 -1
- package/lib/DatePicker.js.map +1 -1
- package/lib/Drawer.js +1 -1
- package/lib/DropdownItem.js +1 -1
- package/lib/DropdownItem.js.map +1 -1
- package/lib/Fieldset.js +1 -1
- package/lib/{FormAssociatedMixin-e8bc2869.js → FormAssociatedMixin-f4da77a8.js} +2 -2
- package/lib/{FormAssociatedMixin-e8bc2869.js.map → FormAssociatedMixin-f4da77a8.js.map} +1 -1
- package/lib/Header.js +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/Layout.js +1 -1
- package/lib/Layout.js.map +1 -1
- package/lib/LocalizeController.js +1 -1
- package/lib/LocalizeController.js.map +1 -1
- package/lib/Modal.js +1 -1
- package/lib/Modal.js.map +1 -1
- package/lib/NavItem.js +1 -1
- package/lib/NavToggle.js +1 -1
- package/lib/NavToggle.js.map +1 -1
- package/lib/Radio.js +1 -1
- package/lib/Range.js +1 -1
- package/lib/Range.js.map +1 -1
- package/lib/Select.js +1 -1
- package/lib/Select.js.map +1 -1
- package/lib/SizeMixin-4d04817d.js +2 -0
- package/lib/{SizeMixin-d5afdb92.js.map → SizeMixin-4d04817d.js.map} +1 -1
- package/lib/SlotController-d733c575.js +2 -0
- package/lib/SlotController-d733c575.js.map +1 -0
- package/lib/Tab.js +1 -1
- package/lib/TabGroup.js +1 -1
- package/lib/Textarea.js +1 -1
- package/lib/Textarea.js.map +1 -1
- package/lib/Toggle.js +1 -1
- package/lib/Tooltip.js +1 -1
- package/lib/Tooltip.js.map +1 -1
- package/lib/bundle.js +6 -6
- package/lib/bundle.js.map +1 -1
- package/lib/en-us.js +1 -1
- package/lib/en-us.js.map +1 -1
- package/lib/fi-fi.js +1 -1
- package/lib/fi-fi.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/localization6.js +2 -0
- package/lib/localization6.js.map +1 -0
- package/lib/src/button/Button.d.ts +1 -0
- package/lib/src/common/controllers/SlotController.d.ts +2 -0
- package/lib/src/common/mixins/SizeMixin.d.ts +0 -1
- package/lib/src/icon/Icon.d.ts +1 -1
- package/lib/src/localization/en-us.d.ts +3 -0
- package/lib/src/textarea/Textarea.d.ts +13 -1
- package/lib/src/textarea/localization.d.ts +4 -0
- package/lib/translation.js +1 -1
- package/lib/translation.js.map +1 -1
- package/package.json +5 -4
- package/lib/SizeMixin-d5afdb92.js +0 -2
- package/lib/SlotController-89834aef.js +0 -2
- package/lib/SlotController-89834aef.js.map +0 -1
package/lib/Select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as t,y as o,_ as e,e as n,s as r}from"./query-assigned-elements-cf502539.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-720964c0.js";import{n as a}from"./ref-c44e9f3c.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-7fa755e1.js";import{F as c}from"./FocusableMixin-32631bff.js";import{F as p}from"./FormAssociatedMixin-
|
|
1
|
+
import{i as t,y as o,_ as e,e as n,s as r}from"./query-assigned-elements-cf502539.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-720964c0.js";import{n as a}from"./ref-c44e9f3c.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-7fa755e1.js";import{F as c}from"./FocusableMixin-32631bff.js";import{F as p}from"./FormAssociatedMixin-f4da77a8.js";import{A as u}from"./AutocompleteMixin-5163f8db.js";import{S as b}from"./SizeMixin-4d04817d.js";import{s as m}from"./Component-449e40fb.js";import{s as h}from"./FormField-413f22f5.js";import{S as f}from"./SlotController-d733c575.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./LightDomController-052f446a.js";import"./cond-2da54107.js";import"./Spinner.js";import"./state-70f38ceb.js";import"./observe-a9c6dfb6.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g transform="translate(6,6) scale(0.9)"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></g></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const x=t`.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)}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-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}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;l.registerIcon(v);let g=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);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([n("nord-select")],g);var j=g;export{j 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\"\nimport { SizeMixin
|
|
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 } 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\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=\"icon\"></slot>\n ${buttonText}\n <nord-icon slot=\"end\" 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","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","placeholder","map","option","renderOption","size","renderError","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"47BAAe,0gBACM,gCACD,mhDCmBpBA,EAAKC,aAAaC,GAclB,IAAqBC,EAArB,cAAoCC,EAClCC,EAAoBC,EAAkBC,EAAWC,EAAeC,QADlEC,kCASUC,KAAAC,YAAc,IAAIC,EAAeF,MAE/BA,KAAOG,QAAG,SAKwBH,KAAMI,QAAG,CA8EtD,CAzFwBC,gBACrB,OAAOL,KAAKM,YAASC,CACtB,CAWDC,SACE,MAAMC,EAAiBT,KAAKU,QACtBC,EAAaX,KAAKY,cAAcH,GAEtC,OAAOI,CAAI,gBAEPb,KAAKc,wDAIDC,EAAIf,KAAKgB,qBACNhB,KAAKG,uBACEH,KAAKiB,wBACLjB,KAAKkB,mBACVC,EAAUnB,KAAKoB,mBACZpB,KAAKqB,yBACNrB,KAAKsB,kCACKH,EAAUnB,KAAKuB,oCACnBJ,EAAUnB,KAAKwB,gCACfxB,KAAKyB,iBAElBzB,KAAK0B,aAAeb,CAAI,oDAAwCb,KAAKM,UAASN,KAAK0B,0BACnFjB,EAAekB,KAAIC,GAAU5B,KAAK6B,aAAaD,mCAI1C5B,KAAK8B,kCAEA9B,KAAKiB,sBACPjB,KAAKI,kFAKbO,0FAKJX,KAAK+B,eAEV,CAEWrB,cACV,OAAOsB,MAAMC,KAAKjC,KAAKkC,iBAAiB,UACzC,CAEOtB,cAAcF,GACpB,MAAMyB,EAAWzB,EAAQ0B,MAAKR,GAAUA,EAAOtB,QAAUN,KAAKM,MAAM+B,aAEpE,OAAIF,EACKA,EAASG,KAGdtC,KAAK0B,YACA1B,KAAK0B,YAGVhB,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,EACR,CAEOT,aAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,EAAOtB,sBACbsB,EAAOX,wBACPW,EAAOtB,QAAUN,KAAKM,MAAM+B,eAEtCT,EAAOU,eAGd,GA1FM9C,EAAM+C,OAAG,CAACC,EAAgBC,EAAgBC,GAaLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBvD,EAAAwD,UAAA,cAAA,GAhBvCxD,EAAMmD,EAAA,CAD1BM,EAAc,gBACMzD,SAAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{_ as e}from"./query-assigned-elements-cf502539.js";import{e as r}from"./property-03f59dce.js";function s(s){class t extends s{constructor(){super(...arguments),this.size="m"}}return e([r({reflect:!0})],t.prototype,"size",void 0),t}export{s as S};
|
|
2
|
+
//# sourceMappingURL=SizeMixin-4d04817d.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SizeMixin-
|
|
1
|
+
{"version":3,"file":"SizeMixin-4d04817d.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"],"names":["SizeMixin","superClass","SizeElement","constructor","this","size","__decorate","property","reflect","prototype"],"mappings":"qGAUM,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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{E as t}from"./EventController-d99ebeef.js";class e{constructor(e,s=""){this.host=e,this.slotName=s,this.handleSlotChange=t=>{t.target.name===this.slotName&&this.onChange(t)},e.addController(this),this.events=new t(e),this.selector=s?`:scope > [slot="${s}"]`:":scope > :not([slot])"}hostConnected(){this.host.shadowRoot&&this.events.listen(this.host.shadowRoot,"slotchange",this.handleSlotChange)}get hasContent(){return null!=this.content}get isEmpty(){return!this.hasContent}get content(){return this.host.querySelector(this.selector)}get assigned(){return Array.from(this.host.querySelectorAll(this.selector))}onChange(t){this.host.requestUpdate()}}export{e as S};
|
|
2
|
+
//# sourceMappingURL=SlotController-d733c575.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SlotController-d733c575.js","sources":["../src/common/controllers/SlotController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"./EventController.js\"\n\nexport class SlotController implements ReactiveController {\n private events: EventController\n private selector: string\n\n constructor(protected host: ReactiveControllerHost & HTMLElement, public slotName: string = \"\") {\n host.addController(this)\n this.events = new EventController(host)\n this.selector = slotName ? `:scope > [slot=\"${slotName}\"]` : `:scope > :not([slot])`\n }\n\n hostConnected() {\n if (this.host.shadowRoot) {\n this.events.listen(this.host.shadowRoot, \"slotchange\", this.handleSlotChange)\n }\n }\n\n get hasContent() {\n return this.content != null\n }\n\n get isEmpty() {\n return !this.hasContent\n }\n\n get content() {\n return this.host.querySelector(this.selector)\n }\n\n get assigned() {\n return Array.from(this.host.querySelectorAll(this.selector))\n }\n\n private handleSlotChange = (e: Event) => {\n const slot = e.target as HTMLSlotElement\n\n if (slot.name === this.slotName) {\n this.onChange(e)\n }\n }\n\n protected onChange(_e: Event) {\n this.host.requestUpdate()\n }\n}\n"],"names":["SlotController","constructor","host","slotName","this","handleSlotChange","e","target","name","onChange","addController","events","EventController","selector","hostConnected","shadowRoot","listen","hasContent","content","isEmpty","querySelector","assigned","Array","from","querySelectorAll","_e","requestUpdate"],"mappings":"wDAGaA,EAIXC,YAAsBC,EAAmDC,EAAmB,IAAtEC,KAAIF,KAAJA,EAAmDE,KAAQD,SAARA,EA4BjEC,KAAAC,iBAAoBC,IACbA,EAAEC,OAENC,OAASJ,KAAKD,UACrBC,KAAKK,SAASH,EACf,EAhCDJ,EAAKQ,cAAcN,MACnBA,KAAKO,OAAS,IAAIC,EAAgBV,GAClCE,KAAKS,SAAWV,EAAW,mBAAmBA,MAAe,uBAC9D,CAEDW,gBACMV,KAAKF,KAAKa,YACZX,KAAKO,OAAOK,OAAOZ,KAAKF,KAAKa,WAAY,aAAcX,KAAKC,iBAE/D,CAEGY,iBACF,OAAuB,MAAhBb,KAAKc,OACb,CAEGC,cACF,OAAQf,KAAKa,UACd,CAEGC,cACF,OAAOd,KAAKF,KAAKkB,cAAchB,KAAKS,SACrC,CAEGQ,eACF,OAAOC,MAAMC,KAAKnB,KAAKF,KAAKsB,iBAAiBpB,KAAKS,UACnD,CAUSJ,SAASgB,GACjBrB,KAAKF,KAAKwB,eACX"}
|
package/lib/Tab.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as t,_ as e,s as a,y as o,e as n}from"./query-assigned-elements-cf502539.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./observe-a9c6dfb6.js";import{S as i}from"./SlotController-
|
|
1
|
+
import{i as t,_ as e,s as a,y as o,e as n}from"./query-assigned-elements-cf502539.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./observe-a9c6dfb6.js";import{S as i}from"./SlotController-d733c575.js";import{s as l}from"./Component-449e40fb.js";import"./EventController-d99ebeef.js";const c=t`:host{--_n-tab-color:var(--n-tab-color, var(--n-color-text-weak));--_n-tab-font-weight:var(--n-tab-font-weight, var(--n-font-weight));--_n-tab-border:1px solid transparent;-webkit-user-select:none;user-select:none;cursor:pointer;padding:calc(var(--n-space-l)/ 2) calc(var(--n-space-s)/ 2);border-block-end:var(--_n-tab-border);transition:border var(--n-transition-quickly) ease}.n-tab{color:var(--_n-tab-color);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-font-size-m);font-weight:var(--_n-tab-font-weight);line-height:var(--n-line-height-form);border-radius:var(--n-border-radius-sharp);white-space:nowrap}.n-tab,.n-tab[data-text]:not([data-text=""])::before{font-weight:var(--_n-tab-font-weight)}.n-tab[data-text=""]{display:flex;gap:var(--n-space-s);align-items:center}.n-tab[data-text]:not([data-text=""]){text-align:center}.n-tab[data-text]:not([data-text=""])::before{content:attr(data-text);display:block;block-size:0;visibility:hidden}:host(:hover){--_n-tab-color:var(--n-tab-color, var(--n-color-text))}.n-tab[data-text]:not([data-text=""])::before,:host([aria-selected=true]){--_n-tab-color:var(--n-tab-color, var(--n-color-text-link));--_n-tab-font-weight:var(--n-tab-font-weight, var(--n-font-weight-active));--_n-tab-border:2px solid var(--n-color-text-link)}:host(:active){opacity:.8;transform:translateY(1px)}:host(:focus) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-text-link);outline:0}@supports selector(:focus-visible){:host(:focus) .n-tab{box-shadow:none}:host(:focus-visible) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-text-link)}}`;let b=class extends a{constructor(){super(...arguments),this.defaultSlot=new i(this),this.selected=!1}render(){return o`<div class="n-tab" data-text="${this.defaultSlot.isEmpty?this.textContent:""}"><slot></slot></div>`}handleSelectionChange(){this.setAttribute("aria-selected",`${this.selected}`),this.setAttribute("tabindex",this.selected?"0":"-1")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab")}};b.styles=[l,c],e([r({reflect:!0,type:Boolean})],b.prototype,"selected",void 0),e([s("selected")],b.prototype,"handleSelectionChange",null),b=e([n("nord-tab")],b);var d=b;export{d as default};
|
|
2
2
|
//# sourceMappingURL=Tab.js.map
|
package/lib/TabGroup.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as t,_ as e,s as r,y as a,e as s}from"./query-assigned-elements-cf502539.js";import{e as o}from"./property-03f59dce.js";import{t as i}from"./state-70f38ceb.js";import{s as n}from"./Component-449e40fb.js";import{s as l}from"./Sticky-c4cf185e.js";import d from"./Tab.js";import{D as b}from"./DirectionController-8b298382.js";import"./observe-a9c6dfb6.js";import"./SlotController-
|
|
1
|
+
import{i as t,_ as e,s as r,y as a,e as s}from"./query-assigned-elements-cf502539.js";import{e as o}from"./property-03f59dce.js";import{t as i}from"./state-70f38ceb.js";import{s as n}from"./Component-449e40fb.js";import{s as l}from"./Sticky-c4cf185e.js";import d from"./Tab.js";import{D as b}from"./DirectionController-8b298382.js";import"./observe-a9c6dfb6.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";const c=t`:host{--_n-tab-group-padding:var(--n-tab-group-padding, 0);--_n-tab-group-list-background:var(--n-color-background);--_n-tab-group-list-border:inset 0 -1px 0 0 var(--n-color-border);--_n-tab-group-list-shadow:var(--n-box-shadow-header);--_n-sticky-size:46px;border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}.n-tab-group-list{list-style:none;display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior:none;box-shadow:var(--_n-tab-group-list-border);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0;gap:var(--n-space-s);background-color:var(--_n-tab-group-list-background);background-image:radial-gradient(ellipse farthest-side at 0 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background)),radial-gradient(ellipse farthest-side at 100% 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background));background-repeat:no-repeat;background-position:0 calc(var(--n-space-s)/ 2),100% calc(var(--n-space-s)/ 2);background-size:var(--n-space-s) var(--n-space-xl),var(--n-space-s) var(--n-space-xl)}.n-tab-group-list::after,.n-tab-group-list::before{content:"";box-sizing:content-box;align-self:stretch;min-inline-size:var(--n-space-l);margin-block-end:1px}.n-tab-group-list::before{margin-inline-end:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-start:var(--_n-tab-group-padding)}.n-tab-group-list::after{margin-inline-start:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-end:var(--_n-tab-group-padding);flex:1}.n-tab-group-list::before,.n-tab-group.is-rtl .n-tab-group-list::after{box-shadow:inset var(--n-space-l) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}.n-tab-group-list::after,.n-tab-group.is-rtl .n-tab-group-list::before{box-shadow:inset calc(-1 * var(--n-space-l)) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}::slotted(nord-tab-panel){display:none;padding:var(--_n-tab-group-padding)}::slotted(nord-tab-panel[aria-hidden=false]){display:block}::slotted(nord-tab){z-index:var(--n-index-default)}:host([padding="m"]){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-m))}:host([padding="l"]){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-l))}:host([sticky]) .n-sticky{box-shadow:var(--_n-tab-group-list-border),var(--_n-tab-group-list-shadow);inset-inline:0;inset-block-end:auto}`;var p;let u=1,g=p=class extends r{constructor(){super(...arguments),this.direction=new b(this),this.tabGroupId="nord-tab-group-"+u++,this.label="",this.padding="m",this.sticky=!1,this.selectedTab=this.initialSelectedTab,this.handleMutation=t=>{t.forEach((t=>{var e,r;if("selected"===t.attributeName&&null===t.oldValue){const a=t.target;null===(e=this.observer)||void 0===e||e.disconnect(),this.updateSelectedTab(a),null===(r=this.observer)||void 0===r||r.observe(this,p.observerOptions)}}))}}render(){return a`<div class="n-tab-group is-${this.direction.dir}"><div class="n-tab-group-list n-sticky" role="tablist" aria-label="${this.label}" @click="${this.handleTabChange}" @keydown="${this.handleKeydown}"><slot name="tab"></slot></div><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.updateSlots()}updateSlots(){this.setupTabs(),this.setupPanels()}firstUpdated(){var t;this.observer=new MutationObserver(this.handleMutation),null===(t=this.observer)||void 0===t||t.observe(this,p.observerOptions)}get initialSelectedTab(){return this.querySelector("nord-tab[selected]")||this.querySelector("nord-tab")}setupTabs(){this.querySelectorAll("nord-tab").forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-controls",`${this.tabGroupId}-panel-${e+1}`),t.toggleAttribute("selected",t===this.selectedTab)}))}setupPanels(){var t;const e=this.querySelectorAll("nord-tab-panel"),r=null===(t=this.selectedTab)||void 0===t?void 0:t.getAttribute("aria-controls");e.forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-panel-${e+1}`),t.setAttribute("aria-labelledby",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-hidden",`${t.getAttribute("id")!==r}`)}))}handleTabChange(t){this.scrollTo({top:0}),t.target instanceof d&&t.target!==this.selectedTab&&this.updateSelectedTab(t.target)}previousTab(t){const e=[...this.querySelectorAll("nord-tab")],r=e.indexOf(t);return e[r-1]}handleKeydown(t){const e=t.target,r=this.querySelector("nord-tab:first-of-type"),a=this.querySelector("nord-tab:last-of-type"),s=this.querySelector(`#${e.getAttribute("id")} ~ nord-tab`)||r,o=this.previousTab(e)||a,i=(t,e)=>{e.preventDefault(),this.scrollTo({top:0}),this.updateSelectedTab(t)};switch(t.key){case"ArrowLeft":case"ArrowUp":i(this.direction.isLTR?o:s,t);break;case"ArrowRight":case"ArrowDown":i(this.direction.isLTR?s:o,t);break;case"Home":i(r,t);break;case"End":i(a,t)}}updateSelectedTab(t){const e=this.querySelector(`#${t.getAttribute("aria-controls")}`);t!==this.selectedTab&&(this.querySelectorAll("nord-tab").forEach((e=>{e.removeAttribute("selected"),e===t&&(e.setAttribute("selected",""),e.focus(),e.scrollIntoView({block:"nearest",inline:"nearest"}),this.selectedTab=e)})),this.querySelectorAll("nord-tab-panel").forEach((t=>{t.setAttribute("aria-hidden",`${t!==e}`)})))}};g.styles=[n,l,c],g.observerOptions={attributes:!0,subtree:!0,attributeFilter:["selected"],attributeOldValue:!0},e([o({reflect:!0})],g.prototype,"label",void 0),e([o({reflect:!0})],g.prototype,"padding",void 0),e([o({reflect:!0,type:Boolean})],g.prototype,"sticky",void 0),e([i()],g.prototype,"selectedTab",void 0),g=p=e([s("nord-tab-group")],g);var h=g;export{h as default};
|
|
2
2
|
//# sourceMappingURL=TabGroup.js.map
|
package/lib/Textarea.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,y as r,
|
|
1
|
+
import{i as e,y as r,b as t,_ as n,e as o,s as a}from"./query-assigned-elements-cf502539.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-720964c0.js";import{n as l}from"./ref-c44e9f3c.js";import{o as c}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-32631bff.js";import{F as p}from"./FormAssociatedMixin-f4da77a8.js";import{I as u}from"./InputMixin-7fa755e1.js";import{R as h,s as v}from"./TextField-ca819c35.js";import{A as m}from"./AutocompleteMixin-5163f8db.js";import{S as b}from"./SizeMixin-4d04817d.js";import{s as x}from"./Component-449e40fb.js";import{s as f}from"./FormField-413f22f5.js";import{LocalizeController as g}from"./LocalizeController.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-731d0007.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";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:calc(var(--n-space-s)/ 2);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 z=class extends(b(p(m(h(u(d(a))))))){constructor(){super(...arguments),this.inputId="textarea",this.localize=new g(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 ${l(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${s(this.name)}" maxlength="${s(this.maxLength)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${s(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea> ${this.characterCounter?this.renderCharacterCounter():t}</div>${this.renderError()}`}renderCharacterCounter(){const{value:e,maxLength:t}=this,n="string"==typeof e?this.lengthMeasurer(e):0,o=t?t-n:void 0,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="")}};z.styles=[x,f,v,y],n([i({reflect:!0})],z.prototype,"resize",void 0),n([i({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),n([i({attribute:"maxlength",type:Number})],z.prototype,"maxLength",void 0),n([i({type:Boolean,attribute:"character-counter"})],z.prototype,"characterCounter",void 0),n([c("resize","updated"),c("value","updated")],z.prototype,"resizeToFitContent",null),z=n([o("nord-textarea")],z);var j=z;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\"\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
|
|
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\"\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\"\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, 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@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 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({ 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({ 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.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 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 private renderCharacterCounter() {\n const { value, maxLength } = this\n const length = typeof value === \"string\" ? this.lengthMeasurer(value) : 0\n const remainder = maxLength ? maxLength - length : undefined\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","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","localize","LocalizeController","onLangChange","handleLangChange","resize","expand","characterCounter","render","html","renderLabel","ref","focusableRef","disabled","readonly","required","ifDefined","name","maxLength","_a","value","placeholder","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","renderCharacterCounter","nothing","renderError","length","lengthMeasurer","remainder","undefined","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":"q8FA+CA,IAAqBA,EAArB,cAAsCC,EACpCC,EAAoBC,EAAkBC,EAAcC,EAAWC,EAAeC,SADhFC,kCAKYC,KAAOC,QAAG,WAGZD,KAAAE,SAAW,IAAIC,EAAoCH,KAAM,CAC/DI,aAAc,IAAMJ,KAAKK,qBAQEL,KAAMM,OAAwB,WAKfN,KAAMO,QAAG,EAWQP,KAAgBQ,kBAAG,CAmEjF,CAjECC,eACE,OAAOC,CAAI,GACPV,KAAKW,yDAIDC,EAAIZ,KAAKa,qBACNb,KAAKC,uCAEED,KAAKc,wBACLd,KAAKe,wBACLf,KAAKgB,mBACVC,EAAUjB,KAAKkB,qBACVD,EAAUjB,KAAKmB,uBACR,QAAVC,EAAApB,KAAKqB,aAAK,IAAAD,EAAAA,EAAI,oBACTH,EAAUjB,KAAKsB,0BACnBtB,KAAKuB,yBACNvB,KAAKwB,kCACKP,EAAUjB,KAAKyB,oCACnBR,EAAUjB,KAAK0B,gCACf1B,KAAK2B,6BAGpB3B,KAAKQ,iBAAmBR,KAAK4B,yBAA2BC,UAG1D7B,KAAK8B,eAEV,CAEOF,yBACN,MAAMP,MAAEA,EAAKF,UAAEA,GAAcnB,KACvB+B,EAA0B,iBAAVV,EAAqBrB,KAAKgC,eAAeX,GAAS,EAClEY,EAAYd,EAAYA,EAAYY,OAASG,EAC7CC,EAAUhB,EAAY,GAAGY,KAAUZ,IAAcY,EAEvD,OAAOrB,CAAI,+DAEQ,MAAbuB,GAAqBA,GAAa,GAAKjC,KAAKE,SAASkC,KAAK,sBAAuBH,GAAa,6DAE/DE,SAEtC,CAEO9B,mBACN,MAAMgC,EAAOrC,KAAKE,SAASoC,aAC3BtC,KAAKgC,eA7GT,SAA8BO,GAC5B,GAAIC,KAAKC,UAAW,CAClB,MAAMC,EAAY,IAAIF,KAAKC,UAAUF,GACrC,OAAQlB,GAAkB,IAAIqB,EAAUC,QAAQtB,IAAQU,MACzD,CAED,OAAQV,GAAkBA,EAAMU,MAClC,CAsG0Ba,CAAqBP,EAC5C,CAISQ,qBACR,MAAMC,EAAW9C,KAAKa,aAAaQ,MAE9ByB,IAIe,SAAhB9C,KAAKM,QACPwC,EAASC,MAAMC,OAAS,OACxBF,EAASC,MAAMC,OAAS,GAAGF,EAASG,kBAEpCH,EAASC,MAAMC,OAAS,GAE3B,GAhGMzD,EAAM2D,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBN,GAcpCO,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgDjE,EAAAkE,UAAA,cAAA,GAKzBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyBpE,EAAAkE,UAAA,cAAA,GAKNH,EAAA,CAAnDC,EAAS,CAAEK,UAAW,YAAaF,KAAMG,UAA4BtE,EAAAkE,UAAA,iBAAA,GAMTH,EAAA,CAA5DC,EAAS,CAAEG,KAAMC,QAASC,UAAW,uBAA+CrE,EAAAkE,UAAA,wBAAA,GAqDrFH,EAAA,CAFCQ,EAAQ,SAAU,WAClBA,EAAQ,QAAS,YAcjBvE,EAAAkE,UAAA,qBAAA,MAnGkBlE,EAAQ+D,EAAA,CAD5BS,EAAc,kBACMxE,SAAAA"}
|
package/lib/Toggle.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,y as n,_ as i,e as r,s as t}from"./query-assigned-elements-cf502539.js";import{e as o}from"./property-03f59dce.js";import{l as s}from"./if-defined-720964c0.js";import{n as a}from"./ref-c44e9f3c.js";import{F as l}from"./FocusableMixin-32631bff.js";import{F as c}from"./FormAssociatedMixin-
|
|
1
|
+
import{i as e,y as n,_ as i,e as r,s as t}from"./query-assigned-elements-cf502539.js";import{e as o}from"./property-03f59dce.js";import{l as s}from"./if-defined-720964c0.js";import{n as a}from"./ref-c44e9f3c.js";import{F as l}from"./FocusableMixin-32631bff.js";import{F as c}from"./FormAssociatedMixin-f4da77a8.js";import{I as d}from"./InputMixin-7fa755e1.js";import{s as g}from"./Component-449e40fb.js";import{s as p}from"./FormField-413f22f5.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-731d0007.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-text-link)}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{opacity:.3;cursor:not-allowed}.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:calc(var(--n-space-s)/ 2);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 v=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>`,i=n`<div class="n-input-container"><input ${a(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${s(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" @change="${this.handleChange}"></div>`;return n`<div class="n-flex">${this.reverse?[e,i]:[i,e]}</div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};v.styles=[g,p,h],i([o({type:Boolean})],v.prototype,"checked",void 0),i([o({type:Boolean})],v.prototype,"reverse",void 0),i([o({reflect:!0})],v.prototype,"size",void 0),v=i([r("nord-toggle")],v);var u=v;export{u as default};
|
|
2
2
|
//# sourceMappingURL=Toggle.js.map
|
package/lib/Tooltip.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as t,_ as i,s as e,y as s,e as o}from"./query-assigned-elements-cf502539.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as d,o as l,f as h,s as
|
|
1
|
+
import{i as t,_ as i,s as e,y as s,e as o}from"./query-assigned-elements-cf502539.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as d,o as l,f as h,s as c}from"./positioning-3bbd3548.js";import{S as p}from"./SlotController-d733c575.js";import{s as u}from"./Component-449e40fb.js";import{E as v}from"./EventController-d99ebeef.js";import{f as m}from"./fsm-50373df9.js";import{o as b}from"./observe-a9c6dfb6.js";function y(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function f(t,i,e){t.setAttribute(i,e.join(" "))}const g=t`:host{--_n-tooltip-max-size:var(--n-tooltip-max-size, 50ch);--_n-tooltip-background:rgba(20, 20, 20, 0.95);--_n-tooltip-color:#fff;--_n-tooltip-key-border:rgba(255, 255, 255, 0.03);--_n-tooltip-key-background:rgba(255, 255, 255, 0.1);position:fixed;pointer-events:none;visibility:hidden;opacity:0;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transition-timing-function:ease;z-index:var(--n-index-popout)}.n-tooltip{gap:var(--n-space-s);font-family:var(--n-font-family);font-size:var(--n-font-size-xs);line-height:var(--n-line-height);color:var(--_n-tooltip-color);padding:calc(var(--n-space-s)/ 1.5) var(--n-space-s);background-color:var(--_n-tooltip-background);border-radius:var(--n-border-radius-s);word-break:break-word;max-inline-size:var(--_n-tooltip-max-size)}.n-tooltip,.n-tooltip-shortcut{display:flex;align-items:center}.n-tooltip-shortcut{gap:2px}::slotted([slot=shortcut]){box-sizing:border-box;margin:0;inline-size:var(--n-size-icon-m);block-size:var(--n-size-icon-m);border-radius:var(--n-border-radius-s);border:1px solid var(--_n-tooltip-key-border)!important;padding:1px!important;text-align:center;font-size:var(--n-font-size-xs);line-height:var(--n-line-height-tight);letter-spacing:-.5px;vertical-align:middle!important;background-color:var(--_n-tooltip-key-background)}[slot=shortcut]::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;var x;function w(t,i){return Boolean(i.id)&&t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("aria-describedby")===i.id}function k(t){var i;const e=null===(i=null==t?void 0:t.focusableRef)||void 0===i?void 0:i.value;return e&&"focusableRef"in e?k(e):e}const{transition:E}=m({hidden:{show:"waiting"},visible:{hide:"hidden",reposition:"positioning",show:"positioning"},waiting:{timeout:"positioning",hide:"hidden"},positioning:{positioned:"visible",hide:"hidden"}});let z=x=class extends e{constructor(){super(...arguments),this.shortcutSlot=new p(this,"shortcut"),this.events=new v(this),this.proxy=document.createElement("span"),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.updatePosition=t=>a(t,this,{strategy:"fixed",placement:d(this.position),middleware:[l(8),h(),c({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=E(this.state,"positioned")})),this.hideTooltip=()=>{this.state=E(this.state,"hide")},this.reposition=()=>{this.state=E(this.state,"reposition")},this.handleShow=t=>{const i=t.target;w(i,this)&&(this.currentElement=i,this.state=E(this.state,"show"))},this.handleHide=t=>{t.target===this.currentElement&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{const t=k(this.currentElement);t&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,t.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const s=y(t,i);s.includes(e)||f(t,i,s.concat(e))}(t,"aria-describedby",this.id))},this.removeDescribedBy=()=>{const t=k(this.currentElement);t&&(this.proxy.remove(),function(t,i,e){const s=y(t,i);s.includes(e)&&f(t,i,s.filter((t=>t!==e)))}(t,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback();const t=this.getRootNode();this.events.listen(t,"keydown",this.hideOnEscape),this.events.listen(t,"mouseover",this.handleShow),this.events.listen(t,"focusin",this.handleShow),this.events.listen(t,"mouseout",this.handleHide),this.events.listen(t,"focusout",this.handleHide),this.events.listen(t,"click",this.handleHide,{capture:!0}),this.events.listen(window,"resize",this.reposition,{passive:!0}),this.events.listen(window,"scroll",this.reposition,{passive:!0})}render(){return s`<div class="n-tooltip"><slot></slot><div class="n-tooltip-shortcut" ?hidden="${this.shortcutSlot.isEmpty}"><slot class="n-tooltip-key" name="shortcut"></slot></div></div>`}handleIdChange(){this.id||console.warn("NORD: The tooltip requires an id attribute and value")}handleStateChange(t){var i;switch(this.state){case"hidden":"waiting"===t&&this.timeoutId&&clearTimeout(this.timeoutId),this.removeDescribedBy(),this.currentElement=void 0,this.style.visibility="hidden",this.style.opacity="0";break;case"visible":{this.timeoutId=void 0,x.lastOpened=this,this.addDescribedBy();const[t,i]=this.coords;this.style.left=`${t}px`,this.style.top=`${i}px`,this.style.visibility="visible",this.style.opacity="1";break}case"waiting":this.timeoutId=setTimeout((()=>{this.state=E(this.state,"timeout")}),this.delay);break;case"positioning":x.lastOpened!==this&&(null===(i=x.lastOpened)||void 0===i||i.hideTooltip()),this.currentElement&&this.updatePosition(this.currentElement)}}};z.styles=[u,g],i([r()],z.prototype,"state",void 0),i([n({reflect:!0})],z.prototype,"position",void 0),i([n({reflect:!0})],z.prototype,"role",void 0),i([n({reflect:!0})],z.prototype,"id",void 0),i([n({reflect:!0,type:Number})],z.prototype,"delay",void 0),i([b("id")],z.prototype,"handleIdChange",null),i([b("state")],z.prototype,"handleStateChange",null),z=x=i([o("nord-tooltip")],z);var _=z;export{_ as default};
|
|
2
2
|
//# sourceMappingURL=Tooltip.js.map
|
package/lib/Tooltip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../src/common/attribute.ts","../src/tooltip/Tooltip.ts"],"sourcesContent":["function getTokens(element: Element, attr: string) {\n const value = element.getAttribute(attr)\n return value ? value.split(/\\s+/) : []\n}\n\nfunction setTokens(element: Element, attr: string, tokens: string[]) {\n element.setAttribute(attr, tokens.join(\" \"))\n}\n\n/**\n * Carefully adds a token to a space-separated attribute\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add\n */\nexport function add(element: Element, attr: string, token: string) {\n const tokens = getTokens(element, attr)\n\n if (!tokens.includes(token)) {\n setTokens(element, attr, tokens.concat(token))\n }\n}\n\n/**\n * Carefully removes a token from a space-separated attribute.\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove\n */\nexport function remove(element: Element, attr: string, token: string) {\n const tokens = getTokens(element, attr)\n\n if (tokens.includes(token)) {\n setTokens(\n element,\n attr,\n tokens.filter(t => t !== token)\n )\n }\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, flip, shift, offset } from \"@floating-ui/dom\"\n\nimport * as attr from \"../common/attribute.js\"\nimport type { FocusableMixinInterface } from \"../common/mixins/FocusableMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tooltip.css\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { States, fsm } from \"../common/fsm.js\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n// @ts-expect-error we're being naughty and accessing a protected field!\n// however this means we always get the correct types,\n// and it will ensure this file is not forgotten about if focusable mixin ever changes\ntype FocusableElement = HTMLElement & Pick<FocusableMixinInterface, \"focusableRef\">\n\nfunction isElement(el: Node): el is Element {\n return el.nodeType === Node.ELEMENT_NODE\n}\n\nfunction referencesTooltip(node: Node, tooltip: Tooltip) {\n return Boolean(tooltip.id) && isElement(node) && node.getAttribute(\"aria-describedby\") === tooltip.id\n}\n\nfunction getFocusable(el?: FocusableElement): HTMLElement | undefined {\n const focusable = el?.focusableRef?.value as HTMLElement | FocusableElement | undefined\n\n if (focusable && \"focusableRef\" in focusable) {\n return getFocusable(focusable)\n }\n\n return focusable\n}\n\nconst { transition } = fsm({\n hidden: {\n show: \"waiting\",\n },\n visible: {\n hide: \"hidden\",\n reposition: \"positioning\",\n show: \"positioning\",\n },\n waiting: {\n timeout: \"positioning\",\n hide: \"hidden\",\n },\n positioning: {\n positioned: \"visible\",\n hide: \"hidden\",\n },\n})\n\ntype TooltipStates = States<typeof transition>\n\n/**\n * Tooltips are floating containers for displaying additional information\n * for the currently focused element. A tooltip can be useful when you want\n * to e.g. give a hint about an existing Command Menu shortcut.\n *\n * @status ready\n * @category overlay\n * @slot - The tooltip content\n * @slot shortcut - Optional slot that holds shortcut keys to access the subject\n * @cssprop [--n-tooltip-max-size=50ch] - Controls the maximum inline size, or width, of the tooltip.\n */\n@customElement(\"nord-tooltip\")\nexport default class Tooltip extends LitElement {\n static styles = [componentStyle, style]\n\n // tracks the last tooltip opened, so we can enforce only one is ever open at a time\n private static lastOpened?: Tooltip\n\n private shortcutSlot = new SlotController(this, \"shortcut\")\n private events = new EventController(this)\n\n // The current element which revealed the tooltip shown\n private currentElement?: FocusableElement\n private timeoutId?: ReturnType<typeof setTimeout>\n\n /**\n * the proxy element is for cases where the targetElement is a web component,\n * and the WC has a focusable child in its shadow root e.g. a button component.\n * in this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\n * and wire up aria-describedby from the focusable element to the proxy.\n * when the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship.\n */\n private proxy = document.createElement(\"span\")\n\n /**\n * The current state of the tooltip, dependent on the state machine\n */\n @state() private state: TooltipStates = \"hidden\"\n\n // The current coordinates for the tooltip\n private coords: [number, number] = [0, 0]\n\n /**\n * Control the position of the tooltip component.\n * When set to \"none\", the tooltip will be shown above\n * but accommodate for browser boundaries.\n */\n @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-start\"\n\n /**\n * The tooltip role, set on the component by default.\n */\n @property({ reflect: true }) role = \"tooltip\"\n\n /**\n * The id for the active element to reference via aria-describedby.\n */\n @property({ reflect: true }) id: string = \"\"\n\n /**\n * The delay in milliseconds before the tooltip is opened.\n */\n @property({ reflect: true, type: Number }) delay: number = 500\n\n /**\n * Apply all event listeners\n */\n connectedCallback() {\n super.connectedCallback()\n\n const rootNode = this.getRootNode() as Document\n\n this.events.listen(rootNode, \"keydown\", this.hideOnEscape)\n\n // we treat mouseover and focusin the same, since they both show tooltip\n this.events.listen(rootNode, \"mouseover\", this.handleShow)\n this.events.listen(rootNode, \"focusin\", this.handleShow)\n\n // we treat focusout, mouseout, click the same, since they all hide tooltip\n this.events.listen(rootNode, \"mouseout\", this.handleHide)\n this.events.listen(rootNode, \"focusout\", this.handleHide)\n // we use event capture here to handle cases where e.g. a close button causes its ancestor to be removed from the DOM.\n // in this case the click event will never bubble up to the rootNode, so we never receive it, and the tooltip can remain open\n // by capturing, we get this event first, and can close the tooltip eagerly\n this.events.listen(rootNode, \"click\", this.handleHide, { capture: true })\n\n this.events.listen(window, \"resize\", this.reposition, { passive: true })\n this.events.listen(window, \"scroll\", this.reposition, { passive: true })\n }\n\n render() {\n return html`\n <div class=\"n-tooltip\">\n <slot></slot>\n <div class=\"n-tooltip-shortcut\" ?hidden=${this.shortcutSlot.isEmpty}>\n <slot class=\"n-tooltip-key\" name=\"shortcut\"></slot>\n </div>\n </div>\n `\n }\n\n @observe(\"id\")\n protected handleIdChange() {\n if (!this.id) {\n // eslint-disable-next-line no-console\n console.warn(\"NORD: The tooltip requires an id attribute and value\")\n }\n }\n\n @observe(\"state\")\n private handleStateChange(prevState: TooltipStates) {\n switch (this.state) {\n case \"hidden\": {\n if (prevState === \"waiting\" && this.timeoutId) {\n clearTimeout(this.timeoutId)\n }\n\n this.removeDescribedBy()\n this.currentElement = undefined\n this.style.visibility = \"hidden\"\n this.style.opacity = \"0\"\n break\n }\n\n case \"visible\": {\n this.timeoutId = undefined\n Tooltip.lastOpened = this\n this.addDescribedBy()\n\n const [x, y] = this.coords\n\n // use physical properties here since floating-ui\n // works exclusively in physical dimensions\n // we do all the mapping in logicalToPhysical\n this.style.left = `${x}px`\n this.style.top = `${y}px`\n this.style.visibility = \"visible\"\n this.style.opacity = \"1\"\n break\n }\n\n case \"waiting\": {\n this.timeoutId = setTimeout(() => {\n this.state = transition(this.state, \"timeout\")\n }, this.delay)\n break\n }\n\n case \"positioning\": {\n if (Tooltip.lastOpened !== this) {\n Tooltip.lastOpened?.hideTooltip()\n }\n\n if (this.currentElement) {\n this.updatePosition(this.currentElement)\n }\n break\n }\n }\n }\n\n /**\n * Setting and updating the position of the tooltip\n */\n private updatePosition = (currentElement: HTMLElement) =>\n computePosition(currentElement, this, {\n strategy: \"fixed\",\n placement: logicalToPhysical(this.position),\n middleware: [\n offset(8),\n flip(),\n shift({\n padding: 8,\n }),\n ],\n }).then(({ x, y }) => {\n this.coords = [x, y]\n this.state = transition(this.state, \"positioned\")\n })\n\n private hideTooltip = () => {\n this.state = transition(this.state, \"hide\")\n }\n\n private reposition = () => {\n this.state = transition(this.state, \"reposition\")\n }\n\n private handleShow = (e: Event) => {\n const target = e.target as FocusableElement\n\n if (referencesTooltip(target, this)) {\n this.currentElement = target\n this.state = transition(this.state, \"show\")\n }\n }\n\n private handleHide = (e: Event) => {\n if (e.target === this.currentElement) {\n this.hideTooltip()\n }\n }\n\n private hideOnEscape = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n this.hideTooltip()\n }\n }\n\n private addDescribedBy = () => {\n const focusable = getFocusable(this.currentElement)\n\n if (focusable) {\n this.proxy.hidden = true\n this.proxy.id = this.id\n this.proxy.textContent = this.textContent\n\n focusable.insertAdjacentElement(\"afterend\", this.proxy)\n attr.add(focusable, \"aria-describedby\", this.id)\n }\n }\n\n private removeDescribedBy = () => {\n const focusable = getFocusable(this.currentElement)\n\n if (focusable) {\n this.proxy.remove()\n attr.remove(focusable, \"aria-describedby\", this.id)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-tooltip\": Tooltip\n }\n}\n"],"names":["getTokens","element","attr","value","getAttribute","split","setTokens","tokens","setAttribute","join","referencesTooltip","node","tooltip","Boolean","id","nodeType","Node","ELEMENT_NODE","getFocusable","el","focusable","_a","focusableRef","transition","fsm","hidden","show","visible","hide","reposition","waiting","timeout","positioning","positioned","Tooltip","Tooltip_1","LitElement","constructor","this","shortcutSlot","SlotController","events","EventController","proxy","document","createElement","state","coords","position","role","delay","updatePosition","currentElement","computePosition","strategy","placement","logicalToPhysical","middleware","offset","flip","shift","padding","then","x","y","hideTooltip","handleShow","e","target","handleHide","hideOnEscape","key","addDescribedBy","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","rootNode","getRootNode","listen","capture","window","passive","render","html","isEmpty","handleIdChange","console","warn","handleStateChange","prevState","timeoutId","clearTimeout","undefined","style","visibility","opacity","lastOpened","left","top","setTimeout","styles","componentStyle","__decorate","prototype","property","reflect","type","Number","observe","customElement"],"mappings":"kdAAA,SAASA,EAAUC,EAAkBC,GACnC,MAAMC,EAAQF,EAAQG,aAAaF,GACnC,OAAOC,EAAQA,EAAME,MAAM,OAAS,EACtC,CAEA,SAASC,EAAUL,EAAkBC,EAAcK,GACjDN,EAAQO,aAAaN,EAAMK,EAAOE,KAAK,KACzC,o0CCgBA,SAASC,EAAkBC,EAAYC,GACrC,OAAOC,QAAQD,EAAQE,KAAiBH,EAJ9BI,WAAaC,KAAKC,cAIqBN,EAAKP,aAAa,sBAAwBQ,EAAQE,EACrG,CAEA,SAASI,EAAaC,SACpB,MAAMC,EAA8B,QAAlBC,EAAAF,aAAA,EAAAA,EAAIG,oBAAc,IAAAD,OAAA,EAAAA,EAAAlB,MAEpC,OAAIiB,GAAa,iBAAkBA,EAC1BF,EAAaE,GAGfA,CACT,CAEA,MAAMG,WAAEA,GAAeC,EAAI,CACzBC,OAAQ,CACNC,KAAM,WAERC,QAAS,CACPC,KAAM,SACNC,WAAY,cACZH,KAAM,eAERI,QAAS,CACPC,QAAS,cACTH,KAAM,UAERI,YAAa,CACXC,WAAY,UACZL,KAAM,YAkBV,IAAqBM,EAAOC,EAA5B,cAAqCC,EAArCC,kCAMUC,KAAYC,aAAG,IAAIC,EAAeF,KAAM,YACxCA,KAAAG,OAAS,IAAIC,EAAgBJ,MAa7BA,KAAAK,MAAQC,SAASC,cAAc,QAKtBP,KAAKQ,MAAkB,SAGhCR,KAAAS,OAA2B,CAAC,EAAG,GAOVT,KAAQU,SAAgE,cAKxEV,KAAIW,KAAG,UAKPX,KAAExB,GAAW,GAKCwB,KAAKY,MAAW,IAsGnDZ,KAAca,eAAIC,GACxBC,EAAgBD,EAAgBd,KAAM,CACpCgB,SAAU,QACVC,UAAWC,EAAkBlB,KAAKU,UAClCS,WAAY,CACVC,EAAO,GACPC,IACAC,EAAM,CACJC,QAAS,OAGZC,MAAK,EAAGC,IAAGC,QACZ1B,KAAKS,OAAS,CAACgB,EAAGC,GAClB1B,KAAKQ,MAAQvB,EAAWe,KAAKQ,MAAO,aAAa,IAG7CR,KAAW2B,YAAG,KACpB3B,KAAKQ,MAAQvB,EAAWe,KAAKQ,MAAO,OAAO,EAGrCR,KAAUT,WAAG,KACnBS,KAAKQ,MAAQvB,EAAWe,KAAKQ,MAAO,aAAa,EAG3CR,KAAA4B,WAAcC,IACpB,MAAMC,EAASD,EAAEC,OAEb1D,EAAkB0D,EAAQ9B,QAC5BA,KAAKc,eAAiBgB,EACtB9B,KAAKQ,MAAQvB,EAAWe,KAAKQ,MAAO,QACrC,EAGKR,KAAA+B,WAAcF,IAChBA,EAAEC,SAAW9B,KAAKc,gBACpBd,KAAK2B,aACN,EAGK3B,KAAAgC,aAAgBH,IACR,WAAVA,EAAEI,KACJjC,KAAK2B,aACN,EAGK3B,KAAckC,eAAG,KACvB,MAAMpD,EAAYF,EAAaoB,KAAKc,gBAEhChC,IACFkB,KAAKK,MAAMlB,QAAS,EACpBa,KAAKK,MAAM7B,GAAKwB,KAAKxB,GACrBwB,KAAKK,MAAM8B,YAAcnC,KAAKmC,YAE9BrD,EAAUsD,sBAAsB,WAAYpC,KAAKK,gBDrQnC1C,EAAkBC,EAAcyE,GAClD,MAAMpE,EAASP,EAAUC,EAASC,GAE7BK,EAAOqE,SAASD,IACnBrE,EAAUL,EAASC,EAAMK,EAAOsE,OAAOF,GAE3C,CCgQMG,CAAS1D,EAAW,mBAAoBkB,KAAKxB,IAC9C,EAGKwB,KAAiByC,kBAAG,KAC1B,MAAM3D,EAAYF,EAAaoB,KAAKc,gBAEhChC,IACFkB,KAAKK,MAAMqC,kBDjQM/E,EAAkBC,EAAcyE,GACrD,MAAMpE,EAASP,EAAUC,EAASC,GAE9BK,EAAOqE,SAASD,IAClBrE,EACEL,EACAC,EACAK,EAAO0E,QAAOC,GAAKA,IAAMP,IAG/B,CCwPMQ,CAAY/D,EAAW,mBAAoBkB,KAAKxB,IACjD,CAEJ,CAnKCsE,oBACEC,MAAMD,oBAEN,MAAME,EAAWhD,KAAKiD,cAEtBjD,KAAKG,OAAO+C,OAAOF,EAAU,UAAWhD,KAAKgC,cAG7ChC,KAAKG,OAAO+C,OAAOF,EAAU,YAAahD,KAAK4B,YAC/C5B,KAAKG,OAAO+C,OAAOF,EAAU,UAAWhD,KAAK4B,YAG7C5B,KAAKG,OAAO+C,OAAOF,EAAU,WAAYhD,KAAK+B,YAC9C/B,KAAKG,OAAO+C,OAAOF,EAAU,WAAYhD,KAAK+B,YAI9C/B,KAAKG,OAAO+C,OAAOF,EAAU,QAAShD,KAAK+B,WAAY,CAAEoB,SAAS,IAElEnD,KAAKG,OAAO+C,OAAOE,OAAQ,SAAUpD,KAAKT,WAAY,CAAE8D,SAAS,IACjErD,KAAKG,OAAO+C,OAAOE,OAAQ,SAAUpD,KAAKT,WAAY,CAAE8D,SAAS,GAClE,CAEDC,SACE,OAAOC,CAAI,gFAGmCvD,KAAKC,aAAauD,0EAKjE,CAGSC,iBACHzD,KAAKxB,IAERkF,QAAQC,KAAK,uDAEhB,CAGOC,kBAAkBC,SACxB,OAAQ7D,KAAKQ,OACX,IAAK,SACe,YAAdqD,GAA2B7D,KAAK8D,WAClCC,aAAa/D,KAAK8D,WAGpB9D,KAAKyC,oBACLzC,KAAKc,oBAAiBkD,EACtBhE,KAAKiE,MAAMC,WAAa,SACxBlE,KAAKiE,MAAME,QAAU,IACrB,MAGF,IAAK,UAAW,CACdnE,KAAK8D,eAAYE,EACjBnE,EAAQuE,WAAapE,KACrBA,KAAKkC,iBAEL,MAAOT,EAAGC,GAAK1B,KAAKS,OAKpBT,KAAKiE,MAAMI,KAAO,GAAG5C,MACrBzB,KAAKiE,MAAMK,IAAM,GAAG5C,MACpB1B,KAAKiE,MAAMC,WAAa,UACxBlE,KAAKiE,MAAME,QAAU,IACrB,KACD,CAED,IAAK,UACHnE,KAAK8D,UAAYS,YAAW,KAC1BvE,KAAKQ,MAAQvB,EAAWe,KAAKQ,MAAO,UAAU,GAC7CR,KAAKY,OACR,MAGF,IAAK,cACCf,EAAQuE,aAAepE,OACL,QAApBjB,EAAAc,EAAQuE,kBAAY,IAAArF,GAAAA,EAAA4C,eAGlB3B,KAAKc,gBACPd,KAAKa,eAAeb,KAAKc,gBAKhC,GAlJMlB,EAAA4E,OAAS,CAACC,EAAgBR,GAwBxBS,EAAA,CAARlE,KAA+CZ,EAAA+E,UAAA,aAAA,GAUnBD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAA6FjF,EAAA+E,UAAA,gBAAA,GAKrFD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAwBjF,EAAA+E,UAAA,YAAA,GAKhBD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAuBjF,EAAA+E,UAAA,UAAA,GAKDD,EAAA,CAA1CE,EAAS,CAAEC,SAAS,EAAMC,KAAMC,UAA6BnF,EAAA+E,UAAA,aAAA,GAwC9DD,EAAA,CADCM,EAAQ,OAMRpF,EAAA+E,UAAA,iBAAA,MAGDD,EAAA,CADCM,EAAQ,UAkDRpF,EAAA+E,UAAA,oBAAA,MAnJkB/E,EAAOC,EAAA6E,EAAA,CAD3BO,EAAc,iBACMrF,SAAAA"}
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../src/common/attribute.ts","../src/tooltip/Tooltip.ts"],"sourcesContent":["function getTokens(element: Element, attr: string) {\n const value = element.getAttribute(attr)\n return value ? value.split(/\\s+/) : []\n}\n\nfunction setTokens(element: Element, attr: string, tokens: string[]) {\n element.setAttribute(attr, tokens.join(\" \"))\n}\n\n/**\n * Carefully adds a token to a space-separated attribute\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add\n */\nexport function add(element: Element, attr: string, token: string) {\n const tokens = getTokens(element, attr)\n\n if (!tokens.includes(token)) {\n setTokens(element, attr, tokens.concat(token))\n }\n}\n\n/**\n * Carefully removes a token from a space-separated attribute.\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove\n */\nexport function remove(element: Element, attr: string, token: string) {\n const tokens = getTokens(element, attr)\n\n if (tokens.includes(token)) {\n setTokens(\n element,\n attr,\n tokens.filter(t => t !== token)\n )\n }\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, flip, shift, offset } from \"@floating-ui/dom\"\n\nimport * as attr from \"../common/attribute.js\"\nimport type { FocusableMixinInterface } from \"../common/mixins/FocusableMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tooltip.css\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { States, fsm } from \"../common/fsm.js\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n// @ts-expect-error we're being naughty and accessing a protected field!\n// however this means we always get the correct types,\n// and it will ensure this file is not forgotten about if focusable mixin ever changes\ntype FocusableElement = HTMLElement & Pick<FocusableMixinInterface, \"focusableRef\">\n\nfunction isElement(el: Node): el is Element {\n return el.nodeType === Node.ELEMENT_NODE\n}\n\nfunction referencesTooltip(node: Node, tooltip: Tooltip) {\n return Boolean(tooltip.id) && isElement(node) && node.getAttribute(\"aria-describedby\") === tooltip.id\n}\n\nfunction getFocusable(el?: FocusableElement): HTMLElement | undefined {\n const focusable = el?.focusableRef?.value as HTMLElement | FocusableElement | undefined\n\n if (focusable && \"focusableRef\" in focusable) {\n return getFocusable(focusable)\n }\n\n return focusable\n}\n\nconst { transition } = fsm({\n hidden: {\n show: \"waiting\",\n },\n visible: {\n hide: \"hidden\",\n reposition: \"positioning\",\n show: \"positioning\",\n },\n waiting: {\n timeout: \"positioning\",\n hide: \"hidden\",\n },\n positioning: {\n positioned: \"visible\",\n hide: \"hidden\",\n },\n})\n\ntype TooltipStates = States<typeof transition>\n\n/**\n * Tooltips are floating containers for displaying additional information\n * for the currently focused element. A tooltip can be useful when you want\n * to e.g. give a hint about an existing Command Menu shortcut.\n *\n * @status ready\n * @category overlay\n * @slot - The tooltip content\n * @slot shortcut - Optional slot that holds shortcut keys to access the subject\n * @cssprop [--n-tooltip-max-size=50ch] - Controls the maximum inline size, or width, of the tooltip.\n */\n@customElement(\"nord-tooltip\")\nexport default class Tooltip extends LitElement {\n static styles = [componentStyle, style]\n\n // tracks the last tooltip opened, so we can enforce only one is ever open at a time\n private static lastOpened?: Tooltip\n\n private shortcutSlot = new SlotController(this, \"shortcut\")\n private events = new EventController(this)\n\n // The current element which revealed the tooltip shown\n private currentElement?: FocusableElement\n private timeoutId?: ReturnType<typeof setTimeout>\n\n /**\n * the proxy element is for cases where the targetElement is a web component,\n * and the WC has a focusable child in its shadow root e.g. a button component.\n * in this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\n * and wire up aria-describedby from the focusable element to the proxy.\n * when the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship.\n */\n private proxy = document.createElement(\"span\")\n\n /**\n * The current state of the tooltip, dependent on the state machine\n */\n @state() private state: TooltipStates = \"hidden\"\n\n // The current coordinates for the tooltip\n private coords: [number, number] = [0, 0]\n\n /**\n * Control the position of the tooltip component.\n * When set to \"none\", the tooltip will be shown above\n * but accommodate for browser boundaries.\n */\n @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-start\"\n\n /**\n * The tooltip role, set on the component by default.\n */\n @property({ reflect: true }) role = \"tooltip\"\n\n /**\n * The id for the active element to reference via aria-describedby.\n */\n @property({ reflect: true }) id: string = \"\"\n\n /**\n * The delay in milliseconds before the tooltip is opened.\n */\n @property({ reflect: true, type: Number }) delay: number = 500\n\n /**\n * Apply all event listeners\n */\n connectedCallback() {\n super.connectedCallback()\n\n const rootNode = this.getRootNode() as Document\n\n this.events.listen(rootNode, \"keydown\", this.hideOnEscape)\n\n // we treat mouseover and focusin the same, since they both show tooltip\n this.events.listen(rootNode, \"mouseover\", this.handleShow)\n this.events.listen(rootNode, \"focusin\", this.handleShow)\n\n // we treat focusout, mouseout, click the same, since they all hide tooltip\n this.events.listen(rootNode, \"mouseout\", this.handleHide)\n this.events.listen(rootNode, \"focusout\", this.handleHide)\n // we use event capture here to handle cases where e.g. a close button causes its ancestor to be removed from the DOM.\n // in this case the click event will never bubble up to the rootNode, so we never receive it, and the tooltip can remain open\n // by capturing, we get this event first, and can close the tooltip eagerly\n this.events.listen(rootNode, \"click\", this.handleHide, { capture: true })\n\n this.events.listen(window, \"resize\", this.reposition, { passive: true })\n this.events.listen(window, \"scroll\", this.reposition, { passive: true })\n }\n\n render() {\n return html`\n <div class=\"n-tooltip\">\n <slot></slot>\n <div class=\"n-tooltip-shortcut\" ?hidden=${this.shortcutSlot.isEmpty}>\n <slot class=\"n-tooltip-key\" name=\"shortcut\"></slot>\n </div>\n </div>\n `\n }\n\n @observe(\"id\")\n protected handleIdChange() {\n if (!this.id) {\n // eslint-disable-next-line no-console\n console.warn(\"NORD: The tooltip requires an id attribute and value\")\n }\n }\n\n @observe(\"state\")\n private handleStateChange(prevState: TooltipStates) {\n switch (this.state) {\n case \"hidden\": {\n if (prevState === \"waiting\" && this.timeoutId) {\n clearTimeout(this.timeoutId)\n }\n\n this.removeDescribedBy()\n this.currentElement = undefined\n this.style.visibility = \"hidden\"\n this.style.opacity = \"0\"\n break\n }\n\n case \"visible\": {\n this.timeoutId = undefined\n Tooltip.lastOpened = this\n this.addDescribedBy()\n\n const [x, y] = this.coords\n\n // use physical properties here since floating-ui\n // works exclusively in physical dimensions\n // we do all the mapping in logicalToPhysical\n this.style.left = `${x}px`\n this.style.top = `${y}px`\n this.style.visibility = \"visible\"\n this.style.opacity = \"1\"\n break\n }\n\n case \"waiting\": {\n this.timeoutId = setTimeout(() => {\n this.state = transition(this.state, \"timeout\")\n }, this.delay)\n break\n }\n\n case \"positioning\": {\n if (Tooltip.lastOpened !== this) {\n Tooltip.lastOpened?.hideTooltip()\n }\n\n if (this.currentElement) {\n this.updatePosition(this.currentElement)\n }\n break\n }\n }\n }\n\n /**\n * Setting and updating the position of the tooltip\n */\n private updatePosition = (currentElement: HTMLElement) =>\n computePosition(currentElement, this, {\n strategy: \"fixed\",\n placement: logicalToPhysical(this.position),\n middleware: [\n offset(8),\n flip(),\n shift({\n padding: 8,\n }),\n ],\n }).then(({ x, y }) => {\n this.coords = [x, y]\n this.state = transition(this.state, \"positioned\")\n })\n\n private hideTooltip = () => {\n this.state = transition(this.state, \"hide\")\n }\n\n private reposition = () => {\n this.state = transition(this.state, \"reposition\")\n }\n\n private handleShow = (e: Event) => {\n const target = e.target as FocusableElement\n\n if (referencesTooltip(target, this)) {\n this.currentElement = target\n this.state = transition(this.state, \"show\")\n }\n }\n\n private handleHide = (e: Event) => {\n if (e.target === this.currentElement) {\n this.hideTooltip()\n }\n }\n\n private hideOnEscape = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n this.hideTooltip()\n }\n }\n\n private addDescribedBy = () => {\n const focusable = getFocusable(this.currentElement)\n\n if (focusable) {\n this.proxy.hidden = true\n this.proxy.id = this.id\n this.proxy.textContent = this.textContent\n\n focusable.insertAdjacentElement(\"afterend\", this.proxy)\n attr.add(focusable, \"aria-describedby\", this.id)\n }\n }\n\n private removeDescribedBy = () => {\n const focusable = getFocusable(this.currentElement)\n\n if (focusable) {\n this.proxy.remove()\n attr.remove(focusable, \"aria-describedby\", this.id)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-tooltip\": Tooltip\n }\n}\n"],"names":["getTokens","element","attr","value","getAttribute","split","setTokens","tokens","setAttribute","join","referencesTooltip","node","tooltip","Boolean","id","nodeType","Node","ELEMENT_NODE","getFocusable","el","focusable","_a","focusableRef","transition","fsm","hidden","show","visible","hide","reposition","waiting","timeout","positioning","positioned","Tooltip","Tooltip_1","LitElement","constructor","this","shortcutSlot","SlotController","events","EventController","proxy","document","createElement","state","coords","position","role","delay","updatePosition","currentElement","computePosition","strategy","placement","logicalToPhysical","middleware","offset","flip","shift","padding","then","x","y","hideTooltip","handleShow","e","target","handleHide","hideOnEscape","key","addDescribedBy","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","rootNode","getRootNode","listen","capture","window","passive","render","html","isEmpty","handleIdChange","console","warn","handleStateChange","prevState","timeoutId","clearTimeout","undefined","style","visibility","opacity","lastOpened","left","top","setTimeout","styles","componentStyle","__decorate","prototype","property","reflect","type","Number","observe","customElement"],"mappings":"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"}
|