@nordhealth/components 1.11.0 → 1.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +1270 -1270
- package/lib/Badge.js +1 -1
- package/lib/Badge.js.map +1 -1
- package/lib/Calendar-8b474799.js +2 -0
- package/lib/{Calendar-2797d956.js.map → Calendar-8b474799.js.map} +1 -1
- package/lib/Calendar.js +1 -1
- package/lib/DatePicker.js +1 -1
- package/lib/DatePicker.js.map +1 -1
- package/lib/Layout.js +1 -1
- package/lib/Layout.js.map +1 -1
- package/lib/Select.js +1 -1
- package/lib/Select.js.map +1 -1
- package/lib/TabGroup.js +1 -1
- package/lib/TabGroup.js.map +1 -1
- package/lib/Table.js +1 -1
- package/lib/Table.js.map +1 -1
- package/lib/bundle.js +6 -6
- package/lib/bundle.js.map +1 -1
- package/lib/index.js +1 -1
- package/package.json +5 -5
- package/lib/Calendar-2797d956.js +0 -2
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, property } 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\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-select\")\nexport default class Select extends FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement)))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.value || undefined\n }\n\n private defaultSlot = new SlotController(this)\n\n protected inputId = \"select\"\n\n /**\n * Controls whether the select expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n render() {\n const slottedOptions = this.options\n const buttonText = this.getButtonText(slottedOptions)\n\n return html`\n <slot></slot>\n ${this.renderLabel()}\n\n <div class=\"n-select-container\">\n <select\n ${ref(this.focusableRef)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n autocomplete=${this.autocomplete as any}\n >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n <slot slot=\"start\" name=\"start\"></slot>\n ${buttonText}\n <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","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","unsafeHTML","renderError","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"
|
|
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, property } 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\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-select\")\nexport default class Select extends FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement)))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.value || undefined\n }\n\n private defaultSlot = new SlotController(this)\n\n protected inputId = \"select\"\n\n /**\n * Controls whether the select expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n render() {\n const slottedOptions = this.options\n const buttonText = this.getButtonText(slottedOptions)\n\n return html`\n <slot></slot>\n ${this.renderLabel()}\n\n <div class=\"n-select-container\">\n <select\n ${ref(this.focusableRef)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n autocomplete=${this.autocomplete as any}\n >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n <slot slot=\"start\" name=\"start\"></slot>\n ${buttonText}\n <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","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","unsafeHTML","renderError","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"86EAgCA,IAAqBA,EAArB,cAAoCC,EAAoBC,EAAkBC,EAAWC,EAAeC,OAApGC,kCAOUC,KAAAC,YAAc,IAAIC,EAAeF,MAE/BA,KAAOG,QAAG,SAKwBH,KAAMI,QAAG,EAX9BC,gBACrB,OAAOL,KAAKM,YAASC,EAYvBC,SACE,MAAMC,EAAiBT,KAAKU,QACtBC,EAAaX,KAAKY,cAAcH,GAEtC,OAAOI,CAAI,gBAEPb,KAAKc,wDAIDC,EAAIf,KAAKgB,qBACNhB,KAAKG,uBACEH,KAAKiB,wBACLjB,KAAKkB,mBACVC,EAAUnB,KAAKoB,mBACZpB,KAAKqB,yBACNrB,KAAKsB,kCACKH,EAAUnB,KAAKuB,oCACnBJ,EAAUnB,KAAKwB,gCACfxB,KAAKyB,iBAElBzB,KAAK0B,aAAeb,CAAI,oDAAwCb,KAAKM,UAASN,KAAK0B,0BACnFjB,EAAekB,KAAIC,GAAU5B,KAAK6B,aAAaD,sDAGZ5B,KAAKiB,sBAAoBjB,KAAKI,mFAEjEO,oBACgBmB,EC5Eb,ofDgFP9B,KAAK+B,gBAICrB,cACV,OAAOsB,MAAMC,KAAKjC,KAAKkC,iBAAiB,WAGlCtB,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,GAGDT,aAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,EAAOtB,sBACbsB,EAAOX,wBACPW,EAAOtB,QAAUN,KAAKM,MAAM+B,eAEtCT,EAAOU,kBAhFR7C,EAAM8C,OAAG,CAACC,EAAgBC,EAAgBC,GAaLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBtD,EAAAuD,UAAA,cAAA,GAdvCvD,EAAMkD,EAAA,CAD1BM,EAAc,gBACMxD,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 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
|
+
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:var(--n-index-default)}: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 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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"}
|
|
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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"}
|
package/lib/Table.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as a,s as n,x as r,$ as o}from"./lit-element-67e6cd99.js";import{e as d}from"./property-03f59dce.js";const l=a`nord-table{all:initial;color:var(--n-color-text);-webkit-user-select:inherit;user-select:inherit}nord-table[density=condensed]{--n-table-td-padding:calc(var(--n-space-m) * 0.5)}nord-table[density=default]{--n-table-td-padding:calc(var(--n-space-m) * 0.95)}nord-table[density=relaxed]{--n-table-td-padding:calc(var(--n-space-m) * 1.2);--n-table-th-padding:var(--n-space-m)}nord-table table{inline-size:100%;font-size:var(--n-font-size-m);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-tight);text-align:start;border-spacing:0;border-collapse:separate;color:var(--n-color-text);font-variant-numeric:tabular-nums}nord-table th{border-block-end:1px solid var(--n-color-border);font-weight:var(--n-font-weight-active);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker);padding:calc(var(--n-table-th-padding,var(--n-table-td-padding))/ 1.1) var(--n-space-m);text-align:start;background:var(--n-color-surface-raised);position:-webkit-sticky;position:sticky;inset-block-start:0;z-index:
|
|
1
|
+
import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as a,s as n,x as r,$ as o}from"./lit-element-67e6cd99.js";import{e as d}from"./property-03f59dce.js";const l=a`nord-table{all:initial;color:var(--n-color-text);-webkit-user-select:inherit;user-select:inherit}nord-table[density=condensed]{--n-table-td-padding:calc(var(--n-space-m) * 0.5)}nord-table[density=default]{--n-table-td-padding:calc(var(--n-space-m) * 0.95)}nord-table[density=relaxed]{--n-table-td-padding:calc(var(--n-space-m) * 1.2);--n-table-th-padding:var(--n-space-m)}nord-table table{inline-size:100%;font-size:var(--n-font-size-m);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-tight);text-align:start;border-spacing:0;border-collapse:separate;color:var(--n-color-text);font-variant-numeric:tabular-nums}nord-table th{border-block-end:1px solid var(--n-color-border);font-weight:var(--n-font-weight-active);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker);padding:calc(var(--n-table-th-padding,var(--n-table-td-padding))/ 1.1) var(--n-space-m);text-align:start;background:var(--n-color-surface-raised);position:-webkit-sticky;position:sticky;inset-block-start:0;z-index:calc(var(--n-index-sticky) - 1)}nord-table td{border-block-end:1px solid var(--n-color-border);padding:var(--n-table-td-padding) var(--n-space-m);white-space:nowrap}@media (max-width:1000px){nord-table td,nord-table th{padding:var(--n-table-td-padding) var(--n-space-s)}}nord-table tbody tr:hover{background:var(--n-color-active)}nord-table tbody .active,nord-table tbody .active:hover{background:var(--n-color-active);color:var(--n-color-text);opacity:1;cursor:default}nord-table tbody .active td,nord-table tbody tr:hover td{color:var(--n-color-text)}nord-table tbody .active nord-badge,nord-table tbody tr:hover nord-badge{--n-badge-color:var(--n-color-text)}nord-card nord-table tbody tr:last-child td{border-block-end-color:transparent}nord-table .n-table-ellipsis{max-inline-size:0;inline-size:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nord-table .n-table-align-right{text-align:end}nord-table .n-table-actions{display:flex;justify-content:center}nord-table .n-table-actions nord-button{margin-block:-10px}`;let i=class extends n{constructor(){super(...arguments),this.density="default"}connectedCallback(){super.connectedCallback(),this.renderStyles()}renderStyles(){const e=this.getRootNode(),t=e.nodeType===Node.DOCUMENT_NODE?e.head:e;const a=this.localName;e.querySelector(`style[data-component=${a}]`)||r(o`<style data-component="${a}">${l}</style>`,t)}createRenderRoot(){return this}};i.styles=l,e([d({reflect:!0})],i.prototype,"density",void 0),i=e([t("nord-table")],i);var c=i;export{c as default};
|
|
2
2
|
//# sourceMappingURL=Table.js.map
|
package/lib/Table.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../src/table/Table.ts"],"sourcesContent":["import { LitElement, html, render } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport style from \"./Table.css\"\n\nfunction isDocument(node: Node): node is Document {\n return node.nodeType === Node.DOCUMENT_NODE\n}\n\n/**\n * Table is used to organize and display information from a data set.\n * Provides table styles in addition to features like sticky\n * headers and support for narrow viewports.\n *\n * @status ready\n * @category list\n * @slot - The table.\n */\n@customElement(\"nord-table\")\nexport default class Table extends LitElement {\n static styles = style\n\n /**\n * Controls the density of the table's rows and headers.\n * Relaxed increases space, condensed reduces space.\n */\n @property({ reflect: true }) density: \"condensed\" | \"default\" | \"relaxed\" = \"default\"\n\n connectedCallback() {\n super.connectedCallback()\n this.renderStyles()\n }\n\n /**\n * renders table styles into nearest root.\n * this is necessary since we do not use shadow dom.\n */\n private renderStyles() {\n const rootNode = this.getRootNode() as Document | ShadowRoot\n const renderTarget = isDocument(rootNode) ? rootNode.head : rootNode\n const tagName = this.localName\n\n const componentStyles = rootNode.querySelector(`style[data-component=${tagName}]`)\n if (componentStyles) {\n return\n }\n\n render(\n html`\n <style data-component=${tagName}>\n ${style}\n </style>\n `,\n renderTarget\n )\n }\n\n /**\n * opt out of shadow dom\n */\n protected createRenderRoot() {\n return this\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-table\": Table\n }\n}\n"],"names":["Table","LitElement","constructor","this","density","connectedCallback","super","renderStyles","rootNode","getRootNode","renderTarget","nodeType","Node","DOCUMENT_NODE","head","tagName","localName","querySelector","render","html","style","createRenderRoot","styles","__decorate","property","reflect","prototype","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../src/table/Table.ts"],"sourcesContent":["import { LitElement, html, render } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport style from \"./Table.css\"\n\nfunction isDocument(node: Node): node is Document {\n return node.nodeType === Node.DOCUMENT_NODE\n}\n\n/**\n * Table is used to organize and display information from a data set.\n * Provides table styles in addition to features like sticky\n * headers and support for narrow viewports.\n *\n * @status ready\n * @category list\n * @slot - The table.\n */\n@customElement(\"nord-table\")\nexport default class Table extends LitElement {\n static styles = style\n\n /**\n * Controls the density of the table's rows and headers.\n * Relaxed increases space, condensed reduces space.\n */\n @property({ reflect: true }) density: \"condensed\" | \"default\" | \"relaxed\" = \"default\"\n\n connectedCallback() {\n super.connectedCallback()\n this.renderStyles()\n }\n\n /**\n * renders table styles into nearest root.\n * this is necessary since we do not use shadow dom.\n */\n private renderStyles() {\n const rootNode = this.getRootNode() as Document | ShadowRoot\n const renderTarget = isDocument(rootNode) ? rootNode.head : rootNode\n const tagName = this.localName\n\n const componentStyles = rootNode.querySelector(`style[data-component=${tagName}]`)\n if (componentStyles) {\n return\n }\n\n render(\n html`\n <style data-component=${tagName}>\n ${style}\n </style>\n `,\n renderTarget\n )\n }\n\n /**\n * opt out of shadow dom\n */\n protected createRenderRoot() {\n return this\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-table\": Table\n }\n}\n"],"names":["Table","LitElement","constructor","this","density","connectedCallback","super","renderStyles","rootNode","getRootNode","renderTarget","nodeType","Node","DOCUMENT_NODE","head","tagName","localName","querySelector","render","html","style","createRenderRoot","styles","__decorate","property","reflect","prototype","customElement"],"mappings":"iuEAkBA,IAAqBA,EAArB,cAAmCC,EAAnCC,kCAO+BC,KAAOC,QAAwC,UAE5EC,oBACEC,MAAMD,oBACNF,KAAKI,eAOCA,eACN,MAAMC,EAAWL,KAAKM,cAChBC,EAA0BF,EAjCtBG,WAAaC,KAAKC,cAiCgBL,EAASM,KAAON,EAC5D,MAAMO,EAAUZ,KAAKa,UAEGR,EAASS,cAAc,wBAAwBF,OAKvEG,EACEC,CAAI,0BACsBJ,MACpBK,YAGNV,GAOMW,mBACR,OAAOlB,OAzCFH,EAAMsB,OAAGF,EAMaG,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgEzB,EAAA0B,UAAA,eAAA,GAPlE1B,EAAKuB,EAAA,CADzBI,EAAc,eACM3B,SAAAA"}
|