@nordhealth/components 1.8.1 → 1.8.3
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 +2 -2
- package/custom-elements.json +2341 -2335
- package/lib/Button.js +1 -1
- package/lib/Button.js.map +1 -1
- package/lib/{Calendar-a59d353e.js → Calendar-e5fc9c3b.js} +1 -1
- package/lib/{Calendar-a59d353e.js.map → Calendar-e5fc9c3b.js.map} +1 -1
- package/lib/Calendar.js +1 -1
- package/lib/DatePicker.js +1 -1
- package/lib/Layout.js +1 -1
- package/lib/Layout.js.map +1 -1
- package/lib/NavItem.js +1 -1
- package/lib/NavItem.js.map +1 -1
- package/lib/Navigation.js +1 -1
- package/lib/Navigation.js.map +1 -1
- package/lib/Select.js +1 -1
- package/lib/Select.js.map +1 -1
- package/lib/Tab.js +1 -1
- package/lib/Tab.js.map +1 -1
- package/lib/TabGroup.js +1 -1
- package/lib/TabGroup.js.map +1 -1
- package/lib/bundle.js +2 -2
- package/lib/bundle.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/src/button/Button.d.ts +5 -0
- package/package.json +4 -4
package/lib/Navigation.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,n as o}from"./query-assigned-elements-ef860822.js";import{r,s as
|
|
1
|
+
import{_ as e,n as o}from"./query-assigned-elements-ef860822.js";import{r as n,s as r,$ as a}from"./lit-element-67e6cd99.js";const l=n`:host{all:unset;display:flex;flex-direction:column;block-size:100%;background:var(--n-color-nav-surface);overflow:hidden auto}*,::after,::before{box-sizing:border-box}nav{flex-grow:1;padding:var(--n-space-m)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center}slot[name=header]{min-block-size:var(--n-space-xxl);border-block-end:1px solid var(--n-color-border)}slot[name=footer]{padding:var(--n-space-m)}`;let s=class extends r{render(){return a`<slot name="header"></slot><nav><slot></slot></nav><slot name="footer"></slot>`}};s.styles=l,s=e([o("nord-navigation")],s);var t=s;export{t as default};
|
|
2
2
|
//# sourceMappingURL=Navigation.js.map
|
package/lib/Navigation.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport style from \"./Navigation.css\"\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status ready\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n */\n@customElement(\"nord-navigation\")\nexport default class Navigation extends LitElement {\n static styles = style\n\n render() {\n return html`\n <slot name=\"header\"></slot>\n <nav>\n <slot></slot>\n </nav>\n <slot name=\"footer\"></slot>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-navigation\": Navigation\n }\n}\n"],"names":["Navigation","LitElement","render","html","styles","style","__decorate","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport style from \"./Navigation.css\"\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status ready\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n */\n@customElement(\"nord-navigation\")\nexport default class Navigation extends LitElement {\n static styles = style\n\n render() {\n return html`\n <slot name=\"header\"></slot>\n <nav>\n <slot></slot>\n </nav>\n <slot name=\"footer\"></slot>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-navigation\": Navigation\n }\n}\n"],"names":["Navigation","LitElement","render","html","styles","style","__decorate","customElement"],"mappings":"ukBAiBA,IAAqBA,EAArB,cAAwCC,EAGtCC,SACE,OAAOC,CAAI,mFAHNH,EAAMI,OAAGC,EADGL,EAAUM,EAAA,CAD9BC,EAAc,oBACMP,SAAAA"}
|
package/lib/Select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as o,$ as n,s as r}from"./lit-element-67e6cd99.js";import{l as i}from"./if-defined-fe1a64e3.js";import{n as s}from"./ref-57ff8ffc.js";import{o as a}from"./unsafe-html-61a04601.js";import"./Button.js";import{I as l}from"./InputMixin-9334d385.js";import{F as d}from"./FocusableMixin-175ea4d7.js";import{F as c}from"./FormAssociatedMixin-d3124755.js";import{s as p}from"./Component-a61df53a.js";import{s as u}from"./FormField-d3767c2e.js";import{S as h}from"./SlotController-ea6eff46.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./EventController-d99ebeef.js";import"./LightDomController-6d26dea2.js";import"./cond-97c45476.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const m=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:2}nord-button{--n-button-text-align:start}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-label-container:hover+.n-select-container nord-button svg,select:hover+nord-button svg{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}::slotted(:not([slot])){display:none}[slot=end] svg{color:var(--n-color-icon);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::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)}`;let v=class extends(c(l(d(r)))){constructor(){super(...arguments),this.defaultSlot=new h(this),this.inputId="select"}get formValue(){return this.value||void 0}render(){const e=this.options,t=this.getButtonText(e);return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${s(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${i(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="start"></slot>${t}<div slot="end">${a('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><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"/></svg>')}</div></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value.toString()));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return n`<option value="${i(e.value)}" ?disabled="${e.disabled}"
|
|
1
|
+
import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as o,$ as n,s as r}from"./lit-element-67e6cd99.js";import{l as i}from"./if-defined-fe1a64e3.js";import{n as s}from"./ref-57ff8ffc.js";import{o as a}from"./unsafe-html-61a04601.js";import"./Button.js";import{I as l}from"./InputMixin-9334d385.js";import{F as d}from"./FocusableMixin-175ea4d7.js";import{F as c}from"./FormAssociatedMixin-d3124755.js";import{s as p}from"./Component-a61df53a.js";import{s as u}from"./FormField-d3767c2e.js";import{S as h}from"./SlotController-ea6eff46.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./EventController-d99ebeef.js";import"./LightDomController-6d26dea2.js";import"./cond-97c45476.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const m=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:2}nord-button{--n-button-text-align:start}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-label-container:hover+.n-select-container nord-button svg,select:hover+nord-button svg{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}::slotted(:not([slot])){display:none}[slot=end] svg{color:var(--n-color-icon);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::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)}`;let v=class extends(c(l(d(r)))){constructor(){super(...arguments),this.defaultSlot=new h(this),this.inputId="select"}get formValue(){return this.value||void 0}render(){const e=this.options,t=this.getButtonText(e);return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${s(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${i(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="start"></slot>${t}<div slot="end">${a('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><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"/></svg>')}</div></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value.toString()));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return n`<option value="${i(e.value)}" ?disabled="${e.disabled}" .selected="${e.value===this.value.toString()}">${e.text}</option>`}};v.styles=[p,u,m],v=e([t("nord-select")],v);var b=v;export{b as default};
|
|
2
2
|
//# sourceMappingURL=Select.js.map
|
package/lib/Select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../src/select/Select.ts","../../icons/lib/assets/interface-dropdown-small.js"],"sourcesContent":["/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport \"../button/Button.js\"\n\nimport dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.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\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(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 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 >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n <slot slot=\"start\" name=\"start\"></slot>\n ${buttonText}\n <div slot=\"end\">${unsafeHTML(dropdownIcon)}</div>\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
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../src/select/Select.ts","../../icons/lib/assets/interface-dropdown-small.js"],"sourcesContent":["/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport \"../button/Button.js\"\n\nimport dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.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\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(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 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 >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n <slot slot=\"start\" name=\"start\"></slot>\n ${buttonText}\n <div slot=\"end\">${unsafeHTML(dropdownIcon)}</div>\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","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><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\"/></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n"],"names":["Select","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","inputId","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","placeholder","map","option","renderOption","expand","unsafeHTML","renderError","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","customElement"],"mappings":"kmEA+BA,IAAqBA,EAArB,cAAoCC,EAAoBC,EAAWC,EAAeC,MAAlFC,kCAOUC,KAAAC,YAAc,IAAIC,EAAeF,MAE/BA,KAAOG,QAAG,SANGC,gBACrB,OAAOJ,KAAKK,YAASC,EAOvBC,SACE,MAAMC,EAAiBR,KAAKS,QACtBC,EAAaV,KAAKW,cAAcH,GAEtC,OAAOI,CAAI,gBAEPZ,KAAKa,wDAIDC,EAAId,KAAKe,qBACNf,KAAKG,uBACEH,KAAKgB,wBACLhB,KAAKiB,mBACVC,EAAUlB,KAAKmB,mBACZnB,KAAKoB,yBACNpB,KAAKqB,kCACKH,EAAUlB,KAAKsB,oCACnBJ,EAAUlB,KAAKuB,kBAE5BvB,KAAKwB,aAAeZ,CAAI,oDAAwCZ,KAAKK,UAASL,KAAKwB,0BACnFhB,EAAeiB,KAAIC,GAAU1B,KAAK2B,aAAaD,sDAGZ1B,KAAKgB,sBAAoBhB,KAAK4B,mFAEjElB,oBACgBmB,ECrEb,ofDyEP7B,KAAK8B,gBAICrB,cACV,OAAOsB,MAAMC,KAAKhC,KAAKiC,iBAAiB,WAGlCtB,cAAcF,GACpB,MAAMyB,EAAWzB,EAAQ0B,MAAKT,GAAUA,EAAOrB,QAAUL,KAAKK,MAAM+B,aAEpE,OAAIF,EACKA,EAASG,KAGdrC,KAAKwB,YACAxB,KAAKwB,YAGVf,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,GAGDV,aAAaD,GACnB,OAAOd,CAAI,kBAECM,EAAUQ,EAAOrB,sBACbqB,EAAOV,wBACPU,EAAOrB,QAAUL,KAAKK,MAAM+B,eAEtCV,EAAOW,kBA1ER3C,EAAM4C,OAAG,CAACC,EAAgBC,EAAgBC,GAD9B/C,EAAMgD,EAAA,CAD1BC,EAAc,gBACMjD,SAAAA"}
|
package/lib/Tab.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as o,$ as a,s as n}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{D as s}from"./DraftComponentMixin-9e4b7b34.js";import{o as i}from"./observe-a9c6dfb6.js";import{S as l}from"./SlotController-ea6eff46.js";import{s as c}from"./Component-a61df53a.js";import"./EventController-d99ebeef.js";const d=o`:host{--n-tab-color:var(--n-color-text-weak);--n-tab-border:1px solid
|
|
1
|
+
import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as o,$ as a,s as n}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{D as s}from"./DraftComponentMixin-9e4b7b34.js";import{o as i}from"./observe-a9c6dfb6.js";import{S as l}from"./SlotController-ea6eff46.js";import{s as c}from"./Component-a61df53a.js";import"./EventController-d99ebeef.js";const d=o`:host{--n-tab-color:var(--n-color-text-weak);--n-tab-border:1px solid transparent;--n-tab-font-weight:var(--n-font-weight);-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-color-text)}.n-tab[data-text]:not([data-text=""])::before,:host([aria-selected=true]){--n-tab-color:var(--n-color-text-link);--n-tab-border:2px solid var(--n-color-text-link);--n-tab-font-weight:var(--n-font-weight-active)}: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(s(n)){constructor(){super(...arguments),this.defaultSlot=new l(this),this.selected=!1}render(){return a`<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=[c,d],t([r({reflect:!0,type:Boolean})],b.prototype,"selected",void 0),t([i("selected")],b.prototype,"handleSelectionChange",null),b=t([e("nord-tab")],b);var f=b;export{f as default};
|
|
2
2
|
//# sourceMappingURL=Tab.js.map
|
package/lib/Tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sources":["../src/tab/Tab.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tab.css\"\n\n/**\n * The interactive tab button for use within the tab group component.\n *\n * @status draft\n * @category navigation\n * @slot - The tab button content.\n */\n@customElement(\"nord-tab\")\nexport default class Tab extends DraftComponentMixin(LitElement) {\n static styles = [componentStyle, style]\n\n private defaultSlot = new SlotController(this)\n\n /**\n * Whether the tab item is selected\n */\n @property({ reflect: true, type: Boolean }) selected: boolean = false\n\n render() {\n return html`<div class=\"n-tab\" data-text=\"${this.defaultSlot.isEmpty ? this.textContent : \"\"}\">\n <slot></slot>\n </div>`\n }\n\n /**\n * Apply accessible attributes and values to the tab button.\n * Observe the selected property if it changes\n */\n @observe(\"selected\")\n protected handleSelectionChange() {\n this.setAttribute(\"aria-selected\", `${this.selected}`)\n this.setAttribute(\"tabindex\", this.selected ? \"0\" : \"-1\")\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute(\"role\", \"tab\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-tab\": Tab\n }\n}\n"],"names":["Tab","DraftComponentMixin","LitElement","constructor","this","defaultSlot","SlotController","selected","render","html","isEmpty","textContent","handleSelectionChange","setAttribute","connectedCallback","super","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","observe","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tab.js","sources":["../src/tab/Tab.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tab.css\"\n\n/**\n * The interactive tab button for use within the tab group component.\n *\n * @status draft\n * @category navigation\n * @slot - The tab button content.\n */\n@customElement(\"nord-tab\")\nexport default class Tab extends DraftComponentMixin(LitElement) {\n static styles = [componentStyle, style]\n\n private defaultSlot = new SlotController(this)\n\n /**\n * Whether the tab item is selected\n */\n @property({ reflect: true, type: Boolean }) selected: boolean = false\n\n render() {\n return html`<div class=\"n-tab\" data-text=\"${this.defaultSlot.isEmpty ? this.textContent : \"\"}\">\n <slot></slot>\n </div>`\n }\n\n /**\n * Apply accessible attributes and values to the tab button.\n * Observe the selected property if it changes\n */\n @observe(\"selected\")\n protected handleSelectionChange() {\n this.setAttribute(\"aria-selected\", `${this.selected}`)\n this.setAttribute(\"tabindex\", this.selected ? \"0\" : \"-1\")\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute(\"role\", \"tab\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-tab\": Tab\n }\n}\n"],"names":["Tab","DraftComponentMixin","LitElement","constructor","this","defaultSlot","SlotController","selected","render","html","isEmpty","textContent","handleSelectionChange","setAttribute","connectedCallback","super","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","observe","customElement"],"mappings":"o6DAiBA,IAAqBA,EAArB,cAAiCC,EAAoBC,IAArDC,kCAGUC,KAAAC,YAAc,IAAIC,EAAeF,MAKGA,KAAQG,UAAY,EAEhEC,SACE,OAAOC,CAAI,iCAAiCL,KAAKC,YAAYK,QAAUN,KAAKO,YAAc,0BAUlFC,wBACRR,KAAKS,aAAa,gBAAiB,GAAGT,KAAKG,YAC3CH,KAAKS,aAAa,WAAYT,KAAKG,SAAW,IAAM,MAGtDO,oBACEC,MAAMD,oBACNV,KAAKS,aAAa,OAAQ,SA3BrBb,EAAAgB,OAAS,CAACC,EAAgBC,GAOWC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAoCvB,EAAAwB,UAAA,gBAAA,GAarEL,EAAA,CADCM,EAAQ,aAIRzB,EAAAwB,UAAA,wBAAA,MAxBkBxB,EAAGmB,EAAA,CADvBO,EAAc,aACM1B,SAAAA"}
|
package/lib/TabGroup.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r,$ as a,s}from"./lit-element-67e6cd99.js";import{e as o}from"./property-03f59dce.js";import{t as i}from"./state-70f38ceb.js";import{D as
|
|
1
|
+
import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r,$ as a,s}from"./lit-element-67e6cd99.js";import{e as o}from"./property-03f59dce.js";import{t as i}from"./state-70f38ceb.js";import{D as n}from"./DraftComponentMixin-9e4b7b34.js";import{s as l}from"./Component-a61df53a.js";import d from"./Tab.js";import{D as b}from"./DirectionController-8b298382.js";import"./observe-a9c6dfb6.js";import"./SlotController-ea6eff46.js";import"./EventController-d99ebeef.js";const c=r`:host{--n-tab-group-padding:0;--n-tab-list-background:var(--n-color-background);--n-tab-list-border:inset 0 -1px 0 0 var(--n-color-border);--n-tab-list-shadow:var(--n-box-shadow-header);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-list-border);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0;gap:var(--n-space-s);background-color:var(--n-tab-list-background);background-image:radial-gradient(ellipse farthest-side at 0 50%,var(--n-color-border-strong) 0,var(--n-tab-list-background)),radial-gradient(ellipse farthest-side at 100% 50%,var(--n-color-border-strong) 0,var(--n-tab-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-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-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:1}:host([padding="m"]){--n-tab-group-padding:var(--n-space-m)}:host([padding="l"]){--n-tab-group-padding:var(--n-space-l)}:host([sticky]) .n-tab-group-list{box-shadow:var(--n-tab-list-border),var(--n-tab-list-shadow);position:sticky;inset:0 0 auto 0;z-index:var(--n-index-sticky);inset-block-start:0}`;var p;let u=1,h=p=class extends(n(s)){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" 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":i(this.direction.isLTR?o:s,t);break;case"ArrowRight":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}`)})))}};h.styles=[l,c],h.observerOptions={attributes:!0,subtree:!0,attributeFilter:["selected"],attributeOldValue:!0},t([o({reflect:!0})],h.prototype,"label",void 0),t([o({reflect:!0})],h.prototype,"padding",void 0),t([o({reflect:!0,type:Boolean})],h.prototype,"sticky",void 0),t([i()],h.prototype,"selectedTab",void 0),h=p=t([e("nord-tab-group")],h);var v=h;export{v as default};
|
|
2
2
|
//# sourceMappingURL=TabGroup.js.map
|
package/lib/TabGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabGroup.js","sources":["../src/tab-group/TabGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TabGroup.css\"\nimport Tab from \"../tab/Tab.js\"\n\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\n\nlet tabGroupCount = 1\n\n/**\n * Tab Group allows multiple panels to be contained within a single window,\n * using tabs as a navigational element.\n *\n * @status draft\n * @category navigation\n * @slot - The element which contains the content to be revealed.\n * @slot tab - The element which contains all tabs to reveal tabbed content.\n */\n@customElement(\"nord-tab-group\")\nexport default class TabGroup extends DraftComponentMixin(LitElement) {\n static styles = [componentStyle, style]\n\n private direction = new DirectionController(this)\n\n private observer?: MutationObserver\n\n private static observerOptions = {\n attributes: true,\n subtree: true,\n attributeFilter: [\"selected\"],\n attributeOldValue: true,\n }\n\n /**\n * Unique ID for each tab group component present.\n */\n private tabGroupId = `nord-tab-group-${tabGroupCount++}`\n\n /**\n * Adds an accessible label to the tab list container.\n */\n @property({ reflect: true }) label: string = \"\"\n\n /**\n * Controls the padding of the tab group component.\n */\n @property({ reflect: true }) padding?: \"m\" | \"l\" | \"none\" = \"m\"\n\n /**\n * Whether the tab list sticks to the top of the tab group as you scroll.\n */\n @property({ reflect: true, type: Boolean }) sticky: boolean = false\n\n /**\n * The current tab node selected in the tab group.\n */\n @state() private selectedTab = this.initialSelectedTab\n\n render() {\n return html`\n <div class=\"n-tab-group\">\n <div\n class=\"n-tab-group-list\"\n role=\"tablist\"\n aria-label=\"${this.label}\"\n @click=${this.handleTabChange}\n @keydown=${this.handleKeydown}\n >\n <slot name=\"tab\"></slot>\n </div>\n <slot></slot>\n </div>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.updateSlots()\n }\n\n private updateSlots() {\n this.setupTabs()\n this.setupPanels()\n }\n\n firstUpdated() {\n this.observer = new MutationObserver(this.handleMutation)\n this.observer?.observe(this, TabGroup.observerOptions)\n }\n\n /**\n * If the selected tab is selected programmatically update all the tabs.\n */\n private handleMutation = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.attributeName === \"selected\" && mutation.oldValue === null) {\n const selectedTab = <Tab>mutation.target\n this.observer?.disconnect()\n this.updateSelectedTab(selectedTab)\n this.observer?.observe(this, TabGroup.observerOptions)\n }\n })\n }\n\n /**\n * Get the selected tab button, or the first tab button.\n */\n private get initialSelectedTab() {\n return this.querySelector(\"nord-tab[selected]\") || this.querySelector(\"nord-tab\")\n }\n\n /**\n * Apply accessible attributes and values to the tab buttons.\n */\n private setupTabs() {\n const tabs = this.querySelectorAll(\"nord-tab\")\n\n tabs.forEach((tab, index) => {\n tab.setAttribute(\"id\", `${this.tabGroupId}-tab-${index + 1}`)\n tab.setAttribute(\"aria-controls\", `${this.tabGroupId}-panel-${index + 1}`)\n tab.toggleAttribute(\"selected\", tab === this.selectedTab)\n })\n }\n\n /**\n * Apply accessible attributes and values to the tab panels.\n */\n private setupPanels() {\n const panels = this.querySelectorAll(\"nord-tab-panel\")\n const selectedPanelId = this.selectedTab?.getAttribute(\"aria-controls\")\n\n panels.forEach((panel, index) => {\n panel.setAttribute(\"id\", `${this.tabGroupId}-panel-${index + 1}`)\n panel.setAttribute(\"aria-labelledby\", `${this.tabGroupId}-tab-${index + 1}`)\n panel.setAttribute(\"aria-hidden\", `${panel.getAttribute(\"id\") !== selectedPanelId}`)\n })\n }\n\n private handleTabChange(event: Event) {\n // Always reset the scroll when a tab is selected.\n this.scrollTo({ top: 0 })\n\n /**\n * Return handler if it's not a tab or if it's already selected\n */\n if (!(event.target instanceof Tab) || event.target === this.selectedTab) return\n\n this.updateSelectedTab(event.target)\n }\n\n /**\n * Get the previous tab button in the tab group\n */\n private previousTab(tab: Tab) {\n const tabs = [...this.querySelectorAll(\"nord-tab\")]\n const selectedTabIndex = tabs.indexOf(tab)\n return tabs[selectedTabIndex - 1]\n }\n\n /**\n * Handle keyboard accessible controls.\n */\n private handleKeydown(event: KeyboardEvent) {\n const tab = <Tab>event.target\n\n const firstTab = <Tab>this.querySelector(\"nord-tab:first-of-type\")\n const lastTab = <Tab>this.querySelector(\"nord-tab:last-of-type\")\n const nextTab = <Tab>this.querySelector(`#${tab.getAttribute(\"id\")} ~ nord-tab`) || firstTab\n const previousTab = <Tab>this.previousTab(tab) || lastTab\n\n const updateTab = (selectedTab: Tab, keyEvent: Event) => {\n keyEvent.preventDefault()\n\n // Always reset the scroll when a tab is selected.\n this.scrollTo({ top: 0 })\n this.updateSelectedTab(selectedTab)\n }\n\n switch (event.key) {\n case \"ArrowLeft\":\n updateTab(this.direction.isLTR ? previousTab : nextTab, event)\n break\n\n case \"ArrowRight\":\n updateTab(this.direction.isLTR ? nextTab : previousTab, event)\n break\n\n case \"Home\":\n updateTab(firstTab, event)\n break\n\n case \"End\":\n updateTab(lastTab, event)\n break\n\n default:\n break\n }\n }\n\n /**\n * Update the selected tab button with attributes and values.\n * Update the tab group state.\n */\n private updateSelectedTab(selectedTab: Tab) {\n const selectedPanel = this.querySelector(`#${selectedTab.getAttribute(\"aria-controls\")}`)\n\n if (selectedTab === this.selectedTab) return\n\n /**\n * Reset all the selected state of the tabs, and select the clicked tab\n */\n this.querySelectorAll(\"nord-tab\").forEach(tab => {\n tab.removeAttribute(\"selected\")\n if (tab === selectedTab) {\n tab.setAttribute(\"selected\", \"\")\n tab.focus()\n tab.scrollIntoView({ block: \"nearest\", inline: \"nearest\" })\n this.selectedTab = tab\n }\n })\n\n /**\n * Reset all the visibility of the panels,\n * and show the panel related to the selected tab\n */\n this.querySelectorAll(\"nord-tab-panel\").forEach(panel => {\n panel.setAttribute(\"aria-hidden\", `${panel !== selectedPanel}`)\n })\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-tab-group\": TabGroup\n }\n}\n"],"names":["tabGroupCount","TabGroup","DraftComponentMixin","LitElement","constructor","this","direction","DirectionController","tabGroupId","label","padding","sticky","selectedTab","initialSelectedTab","handleMutation","mutations","forEach","mutation","attributeName","oldValue","target","_a","observer","disconnect","updateSelectedTab","_b","observe","TabGroup_1","observerOptions","render","html","handleTabChange","handleKeydown","connectedCallback","super","updateSlots","setupTabs","setupPanels","firstUpdated","MutationObserver","querySelector","querySelectorAll","tab","index","setAttribute","toggleAttribute","panels","selectedPanelId","getAttribute","panel","event","scrollTo","top","Tab","previousTab","tabs","selectedTabIndex","indexOf","firstTab","lastTab","nextTab","updateTab","keyEvent","preventDefault","key","isLTR","selectedPanel","removeAttribute","focus","scrollIntoView","block","inline","styles","componentStyle","style","attributes","subtree","attributeFilter","attributeOldValue","__decorate","property","reflect","prototype","type","Boolean","state","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TabGroup.js","sources":["../src/tab-group/TabGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TabGroup.css\"\nimport Tab from \"../tab/Tab.js\"\n\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\n\nlet tabGroupCount = 1\n\n/**\n * Tab Group allows multiple panels to be contained within a single window,\n * using tabs as a navigational element.\n *\n * @status draft\n * @category navigation\n * @slot - The element which contains the content to be revealed.\n * @slot tab - The element which contains all tabs to reveal tabbed content.\n */\n@customElement(\"nord-tab-group\")\nexport default class TabGroup extends DraftComponentMixin(LitElement) {\n static styles = [componentStyle, style]\n\n private direction = new DirectionController(this)\n\n private observer?: MutationObserver\n\n private static observerOptions = {\n attributes: true,\n subtree: true,\n attributeFilter: [\"selected\"],\n attributeOldValue: true,\n }\n\n /**\n * Unique ID for each tab group component present.\n */\n private tabGroupId = `nord-tab-group-${tabGroupCount++}`\n\n /**\n * Adds an accessible label to the tab list container.\n */\n @property({ reflect: true }) label: string = \"\"\n\n /**\n * Controls the padding of the tab group component.\n */\n @property({ reflect: true }) padding?: \"m\" | \"l\" | \"none\" = \"m\"\n\n /**\n * Whether the tab list sticks to the top of the tab group as you scroll.\n */\n @property({ reflect: true, type: Boolean }) sticky: boolean = false\n\n /**\n * The current tab node selected in the tab group.\n */\n @state() private selectedTab = this.initialSelectedTab\n\n render() {\n return html`\n <div class=\"n-tab-group is-${this.direction.dir}\">\n <div\n class=\"n-tab-group-list\"\n role=\"tablist\"\n aria-label=\"${this.label}\"\n @click=${this.handleTabChange}\n @keydown=${this.handleKeydown}\n >\n <slot name=\"tab\"></slot>\n </div>\n <slot></slot>\n </div>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.updateSlots()\n }\n\n private updateSlots() {\n this.setupTabs()\n this.setupPanels()\n }\n\n firstUpdated() {\n this.observer = new MutationObserver(this.handleMutation)\n this.observer?.observe(this, TabGroup.observerOptions)\n }\n\n /**\n * If the selected tab is selected programmatically update all the tabs.\n */\n private handleMutation = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.attributeName === \"selected\" && mutation.oldValue === null) {\n const selectedTab = <Tab>mutation.target\n this.observer?.disconnect()\n this.updateSelectedTab(selectedTab)\n this.observer?.observe(this, TabGroup.observerOptions)\n }\n })\n }\n\n /**\n * Get the selected tab button, or the first tab button.\n */\n private get initialSelectedTab() {\n return this.querySelector(\"nord-tab[selected]\") || this.querySelector(\"nord-tab\")\n }\n\n /**\n * Apply accessible attributes and values to the tab buttons.\n */\n private setupTabs() {\n const tabs = this.querySelectorAll(\"nord-tab\")\n\n tabs.forEach((tab, index) => {\n tab.setAttribute(\"id\", `${this.tabGroupId}-tab-${index + 1}`)\n tab.setAttribute(\"aria-controls\", `${this.tabGroupId}-panel-${index + 1}`)\n tab.toggleAttribute(\"selected\", tab === this.selectedTab)\n })\n }\n\n /**\n * Apply accessible attributes and values to the tab panels.\n */\n private setupPanels() {\n const panels = this.querySelectorAll(\"nord-tab-panel\")\n const selectedPanelId = this.selectedTab?.getAttribute(\"aria-controls\")\n\n panels.forEach((panel, index) => {\n panel.setAttribute(\"id\", `${this.tabGroupId}-panel-${index + 1}`)\n panel.setAttribute(\"aria-labelledby\", `${this.tabGroupId}-tab-${index + 1}`)\n panel.setAttribute(\"aria-hidden\", `${panel.getAttribute(\"id\") !== selectedPanelId}`)\n })\n }\n\n private handleTabChange(event: Event) {\n // Always reset the scroll when a tab is selected.\n this.scrollTo({ top: 0 })\n\n /**\n * Return handler if it's not a tab or if it's already selected\n */\n if (!(event.target instanceof Tab) || event.target === this.selectedTab) return\n\n this.updateSelectedTab(event.target)\n }\n\n /**\n * Get the previous tab button in the tab group\n */\n private previousTab(tab: Tab) {\n const tabs = [...this.querySelectorAll(\"nord-tab\")]\n const selectedTabIndex = tabs.indexOf(tab)\n return tabs[selectedTabIndex - 1]\n }\n\n /**\n * Handle keyboard accessible controls.\n */\n private handleKeydown(event: KeyboardEvent) {\n const tab = <Tab>event.target\n\n const firstTab = <Tab>this.querySelector(\"nord-tab:first-of-type\")\n const lastTab = <Tab>this.querySelector(\"nord-tab:last-of-type\")\n const nextTab = <Tab>this.querySelector(`#${tab.getAttribute(\"id\")} ~ nord-tab`) || firstTab\n const previousTab = <Tab>this.previousTab(tab) || lastTab\n\n const updateTab = (selectedTab: Tab, keyEvent: Event) => {\n keyEvent.preventDefault()\n\n // Always reset the scroll when a tab is selected.\n this.scrollTo({ top: 0 })\n this.updateSelectedTab(selectedTab)\n }\n\n switch (event.key) {\n case \"ArrowLeft\":\n updateTab(this.direction.isLTR ? previousTab : nextTab, event)\n break\n\n case \"ArrowRight\":\n updateTab(this.direction.isLTR ? nextTab : previousTab, event)\n break\n\n case \"Home\":\n updateTab(firstTab, event)\n break\n\n case \"End\":\n updateTab(lastTab, event)\n break\n\n default:\n break\n }\n }\n\n /**\n * Update the selected tab button with attributes and values.\n * Update the tab group state.\n */\n private updateSelectedTab(selectedTab: Tab) {\n const selectedPanel = this.querySelector(`#${selectedTab.getAttribute(\"aria-controls\")}`)\n\n if (selectedTab === this.selectedTab) return\n\n /**\n * Reset all the selected state of the tabs, and select the clicked tab\n */\n this.querySelectorAll(\"nord-tab\").forEach(tab => {\n tab.removeAttribute(\"selected\")\n if (tab === selectedTab) {\n tab.setAttribute(\"selected\", \"\")\n tab.focus()\n tab.scrollIntoView({ block: \"nearest\", inline: \"nearest\" })\n this.selectedTab = tab\n }\n })\n\n /**\n * Reset all the visibility of the panels,\n * and show the panel related to the selected tab\n */\n this.querySelectorAll(\"nord-tab-panel\").forEach(panel => {\n panel.setAttribute(\"aria-hidden\", `${panel !== selectedPanel}`)\n })\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-tab-group\": TabGroup\n }\n}\n"],"names":["tabGroupCount","TabGroup","DraftComponentMixin","LitElement","constructor","this","direction","DirectionController","tabGroupId","label","padding","sticky","selectedTab","initialSelectedTab","handleMutation","mutations","forEach","mutation","attributeName","oldValue","target","_a","observer","disconnect","updateSelectedTab","_b","observe","TabGroup_1","observerOptions","render","html","dir","handleTabChange","handleKeydown","connectedCallback","super","updateSlots","setupTabs","setupPanels","firstUpdated","MutationObserver","querySelector","querySelectorAll","tab","index","setAttribute","toggleAttribute","panels","selectedPanelId","getAttribute","panel","event","scrollTo","top","Tab","previousTab","tabs","selectedTabIndex","indexOf","firstTab","lastTab","nextTab","updateTab","keyEvent","preventDefault","key","isLTR","selectedPanel","removeAttribute","focus","scrollIntoView","block","inline","styles","componentStyle","style","attributes","subtree","attributeFilter","attributeOldValue","__decorate","property","reflect","prototype","type","Boolean","state","customElement"],"mappings":"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"}
|