@nordhealth/components 3.4.0 → 3.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +2570 -2562
- package/lib/{Calendar-3fd55b5d.js → Calendar-b19b4bf6.js} +1 -1
- package/lib/{Calendar-3fd55b5d.js.map → Calendar-b19b4bf6.js.map} +1 -1
- package/lib/Calendar.js +1 -1
- package/lib/DatePicker.js +1 -1
- package/lib/DropdownItem-5c12978f.js +2 -0
- package/lib/DropdownItem-5c12978f.js.map +1 -0
- package/lib/DropdownItem.js +1 -1
- package/lib/IconManager.js +1 -1
- package/lib/Layout.js +1 -1
- package/lib/Layout.js.map +1 -1
- package/lib/Message.js +1 -1
- package/lib/{NavToggle-fbd227e5.js → NavToggle-0e6c6458.js} +1 -1
- package/lib/{NavToggle-fbd227e5.js.map → NavToggle-0e6c6458.js.map} +1 -1
- package/lib/NavToggle.js +1 -1
- package/lib/Navigation.js +1 -1
- package/lib/Navigation.js.map +1 -1
- package/lib/Spinner.js +1 -1
- package/lib/Spinner.js.map +1 -1
- package/lib/bundle.js +11 -11
- package/lib/bundle.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/src/layout/Layout.d.ts +1 -1
- package/lib/src/navigation/Navigation.d.ts +1 -0
- package/lib/src/spinner/Spinner.d.ts +2 -0
- package/package.json +3 -3
- package/lib/DropdownItem-4a02675f.js +0 -2
- package/lib/DropdownItem-4a02675f.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavToggle-
|
|
1
|
+
{"version":3,"file":"NavToggle-0e6c6458.js","sources":["../../icons/lib/assets/navigation-toggle-lock.js","../../icons/lib/assets/navigation-toggle.js","../src/nav-toggle/NavToggle.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-toggle-lock\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-toggle\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation three lines\"\n","import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as unlockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle.js\"\nimport * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.js\"\n\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./NavToggle.css\"\n\nIcon.registerIcon(unlockIcon)\nIcon.registerIcon(lockIcon)\n\n/**\n * Nav toggle is meant for hiding and showing the primary navigation.\n * This component is used internally in the Layout component, but can also be\n * used separate to further customize the behavior.\n *\n * @status new\n * @category action\n *\n * @localization label - Accessible label for the nav toggle button.\n */\n@customElement(\"nord-nav-toggle\")\nexport default class NavToggle extends FocusableMixin(LitElement) {\n static styles = [componentStyle, style]\n\n private direction = new DirectionController(this)\n private localization = new LocalizeController<\"nord-nav-toggle\">(this)\n\n render() {\n return html`\n <nord-button variant=\"plain\" ${ref(this.focusableRef)} class=${classMap({ \"is-rtl\": this.direction.isRTL })}>\n <nord-visually-hidden>${this.localization.term(\"label\")}</nord-visually-hidden>\n <nord-icon size=\"m\" name=${unlockIcon.title}></nord-icon>\n <nord-icon size=\"m\" name=${lockIcon.title}></nord-icon>\n </nord-button>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-nav-toggle\": NavToggle\n }\n}\n"],"names":["title","Icon","registerIcon","unlockIcon","lockIcon","NavToggle","FocusableMixin","LitElement","constructor","this","direction","DirectionController","localization","LocalizeController","render","html","ref","focusableRef","classMap","isRTL","term","unlockIcon.title","lockIcon.title","styles","componentStyle","style","__decorate","customElement"],"mappings":"icACO,MAAMA,EAAQ,qEADN,4TAEK,kGCDb,MAAMA,EAAQ,gEADN,0MAEK,ijBCgBpBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAaH,IAAMC,EAAN,cAAwBC,EAAeC,IAAvCC,kCAGLC,KAAAC,UAAY,IAAIC,EAAoBF,MACpCA,KAAAG,aAAe,IAAIC,EAAsCJ,KAWlE,CATCK,SACE,OAAOC,CAAI,gCACsBC,EAAIP,KAAKQ,wBAAuBC,EAAS,CAAE,SAAUT,KAAKC,UAAUS,kCACzEV,KAAKG,aAAaQ,KAAK,4DACpBC,4CACAC,+BAGhC,GAbMjB,EAAAkB,OAAS,CAACC,EAAgBC,GADdpB,EAASqB,EAAA,CAD7BC,EAAc,oBACMtB,SAAAA"}
|
package/lib/NavToggle.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"./query-assigned-elements-822fe360.js";import"./ref-6b46e5ea.js";import"./class-map-c0d8e1e5.js";export{N as default}from"./NavToggle-
|
|
1
|
+
import"./query-assigned-elements-822fe360.js";import"./ref-6b46e5ea.js";import"./class-map-c0d8e1e5.js";export{N as default}from"./NavToggle-0e6c6458.js";import"./LocalizeController.js";import"./DirectionController-f35f5476.js";import"./FocusableMixin-186c69a2.js";import"./Button.js";import"./Icon.js";import"./VisuallyHidden.js";import"./Component-1f694235.js";import"./directive-de55b00a.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./property-03f59dce.js";import"./EventController-d99ebeef.js";import"./LightDomController-8a770234.js";import"./cond-09498763.js";import"./Spinner.js";import"./if-defined-8a007930.js";import"./InputMixin-d50cb41a.js";import"./SlotController-d733c575.js";import"./state-70f38ceb.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";
|
|
2
2
|
//# sourceMappingURL=NavToggle.js.map
|
package/lib/Navigation.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as n,_ as o,s as
|
|
1
|
+
import{i as n,_ as o,s as e,x as a,e as t}from"./query-assigned-elements-822fe360.js";import{S as r}from"./SlotController-d733c575.js";import{s as i}from"./Component-1f694235.js";import{E as l}from"./EventController-d99ebeef.js";const s=n`:host{--_n-navigation-background-color:var(--n-navigation-background-color, var(--n-color-nav-surface));--_n-navigation-header-block-size:var(--n-navigation-header-block-size, var(--n-space-xxl));--_n-navigation-header-padding-inline:var(--n-navigation-header-padding-inline);--_n-navigation-header-background:var(--n-navigation-header-background, var(--_n-navigation-background-color));--_n-navigation-header-divider:var(--n-navigation-header-divider, 1px solid var(--n-color-border));--_n-navigation-header-color:var(--n-navigation-header-color);--_n-navigation-header-toggle-icon-color:var(--n-navigation-header-toggle-icon-color);--_n-navigation-header-focus-style:var(--n-navigation-header-focus-style, var(--_n-navigation-dropdown-box-shadow));--_n-navigation-dropdown-box-shadow:0 0 0 1px var(--n-color-accent) inset;display:flex;flex-direction:column;block-size:100%;background:var(--_n-navigation-background-color)}.n-navigation-main{display:flex;flex-direction:column;flex:1;overflow-y:auto;overscroll-behavior-y:none}nav{flex:1;padding:var(--n-space-m)}::slotted(nord-nav-group[heading]:first-of-type){margin-block-start:calc(var(--n-space-s) * -1)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center;--n-button-text-align:start;--n-button-background-color:transparent;--n-button-border-color:transparent;--n-button-box-shadow:none;--n-button-gradient:none}slot[name=header]{--n-button-border-radius:0;--n-button-color:var(--_n-navigation-header-color);--n-button-min-block-size:var(--_n-navigation-header-block-size);--n-select-block-size:var(--n-button-min-block-size);--n-button-font-weight:var(--n-font-weight-active);--n-button-toggle-icon-color:var(--_n-navigation-header-toggle-icon-color);--n-button-padding-inline:var(--_n-navigation-header-padding-inline);block-size:var(--_n-navigation-header-block-size);background-color:var(--_n-navigation-header-background);border-block-end:var(--_n-navigation-header-divider)}slot[name=footer]{--n-button-color:var(--n-color-text-weak);--n-button-padding-inline:var(--n-space-xs);margin:var(--n-space-m)}:is([name=header],[name=footer])::slotted(:not([open]):focus-within){--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:var(--_n-navigation-dropdown-box-shadow)}slot[name=header]::slotted(:not([open], :active):focus-within){--n-button-box-shadow:var(--_n-navigation-header-focus-style)}[name=footer]::slotted(:is(:hover, [open])){--n-button-border-color:var(--n-color-border-hover)}`;let d=class extends e{constructor(){super(...arguments),this.headerSlot=new r(this,"header"),this.events=new l(this),this.allowItemsToRemainOpen=!1,this.handleActivate=n=>{var o,e;const a=n.target,t=new Set;let r=null===(o=a.parentElement)||void 0===o?void 0:o.closest("nord-nav-item");for(;r;)t.add(r),r=null===(e=r.parentElement)||void 0===e?void 0:e.closest("nord-nav-item");for(const n of this.querySelectorAll("nord-nav-item"))if(n!==a){const o=t.has(n);n.open=o||this.allowItemsToRemainOpen&&n.open,n.active=o}this.allowItemsToRemainOpen=!1}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"activate",this.handleActivate);const n=this.querySelector("nord-nav-item[active]");this.allowItemsToRemainOpen=null!=n}render(){return a`<slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><div class="n-navigation-main"><nav><slot></slot></nav><slot name="footer"></slot></div>`}};d.styles=[i,s],d=o([t("nord-navigation")],d);var c=d;export{c 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":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Navigation.css\"\nimport NavItem from \"../nav-item/NavItem.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\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 * @cssprop [--n-navigation-background-color=var(--n-color-nav-surface)] - Controls the background color of the navigation element.\n */\n@customElement(\"nord-navigation\")\nexport default class Navigation extends LitElement {\n static styles = [componentStyle, style]\n\n private headerSlot = new SlotController(this, \"header\")\n private events = new EventController(this)\n\n connectedCallback() {\n super.connectedCallback()\n // if we add this event listener during render\n // we seem to miss the first activate event.\n // so let's add it as early as possible.\n this.events.listen(this, \"activate\", this.handleActivate)\n }\n\n render() {\n return html`\n <slot name=\"header\" ?hidden=${this.headerSlot.isEmpty}></slot>\n <div class=\"n-navigation-main\">\n <nav>\n <slot></slot>\n </nav>\n <slot name=\"footer\"></slot>\n </div>\n `\n }\n\n private handleActivate = (e: Event) => {\n const target = e.target as NavItem\n const ancestors = new Set<NavItem>()\n\n // walk up the DOM, gathering all ancestors from the target to its top-most nav-item.\n // it's more efficient to first gather ancestors here,\n // than to repeatedly call item.contains(target) in the for-loop below.\n let parent = target.parentElement?.closest(\"nord-nav-item\")\n while (parent) {\n ancestors.add(parent)\n parent = parent.parentElement?.closest(\"nord-nav-item\")\n }\n\n // open and activate any items on the path, otherwise close and deactivate.\n for (const item of this.querySelectorAll(\"nord-nav-item\")) {\n if (item !== target) {\n const isAncestor = ancestors.has(item)\n item.open = isAncestor\n item.active = isAncestor\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-navigation\": Navigation\n }\n}\n"],"names":["Navigation","LitElement","constructor","this","headerSlot","SlotController","events","EventController","handleActivate","e","target","ancestors","Set","parent","_a","parentElement","closest","add","_b","item","querySelectorAll","isAncestor","has","open","active","connectedCallback","super","listen","render","html","isEmpty","styles","componentStyle","style","__decorate","customElement"],"mappings":"0rFAwBe,IAAMA,EAAN,cAAyBC,EAAzBC,kCAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,OAAS,IAAIC,EAAgBJ,
|
|
1
|
+
{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Navigation.css\"\nimport NavItem from \"../nav-item/NavItem.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\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 * @cssprop [--n-navigation-background-color=var(--n-color-nav-surface)] - Controls the background color of the navigation element.\n */\n@customElement(\"nord-navigation\")\nexport default class Navigation extends LitElement {\n static styles = [componentStyle, style]\n\n private headerSlot = new SlotController(this, \"header\")\n private events = new EventController(this)\n private allowItemsToRemainOpen = false\n\n connectedCallback() {\n super.connectedCallback()\n // if we add this event listener during render\n // we seem to miss the first activate event.\n // so let's add it as early as possible.\n this.events.listen(this, \"activate\", this.handleActivate)\n\n // in cases where there is an initially active nav-item,\n // we should allow any nav-items with the `open` attribute to remain open.\n const activeItem = this.querySelector(\"nord-nav-item[active]\")\n this.allowItemsToRemainOpen = activeItem != null\n }\n\n render() {\n return html`\n <slot name=\"header\" ?hidden=${this.headerSlot.isEmpty}></slot>\n <div class=\"n-navigation-main\">\n <nav>\n <slot></slot>\n </nav>\n <slot name=\"footer\"></slot>\n </div>\n `\n }\n\n private handleActivate = (e: Event) => {\n const target = e.target as NavItem\n const ancestors = new Set<NavItem>()\n\n // walk up the DOM, gathering all ancestors from the target to its top-most nav-item.\n // it's more efficient to first gather ancestors here,\n // than to repeatedly call item.contains(target) in the for-loop below.\n let parent = target.parentElement?.closest(\"nord-nav-item\")\n while (parent) {\n ancestors.add(parent)\n parent = parent.parentElement?.closest(\"nord-nav-item\")\n }\n\n // open and activate any items on the path, otherwise close and deactivate.\n // however, if the item is set to open initially, we should not close it.\n for (const item of this.querySelectorAll(\"nord-nav-item\")) {\n if (item !== target) {\n const isAncestor = ancestors.has(item)\n item.open = isAncestor || (this.allowItemsToRemainOpen && item.open)\n item.active = isAncestor\n }\n }\n\n // this is a one-time thing, purely for initial open state\n this.allowItemsToRemainOpen = false\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-navigation\": Navigation\n }\n}\n"],"names":["Navigation","LitElement","constructor","this","headerSlot","SlotController","events","EventController","allowItemsToRemainOpen","handleActivate","e","target","ancestors","Set","parent","_a","parentElement","closest","add","_b","item","querySelectorAll","isAncestor","has","open","active","connectedCallback","super","listen","activeItem","querySelector","render","html","isEmpty","styles","componentStyle","style","__decorate","customElement"],"mappings":"0rFAwBe,IAAMA,EAAN,cAAyBC,EAAzBC,kCAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,OAAS,IAAIC,EAAgBJ,MAC7BA,KAAsBK,wBAAG,EA2BzBL,KAAAM,eAAkBC,YACxB,MAAMC,EAASD,EAAEC,OACXC,EAAY,IAAIC,IAKtB,IAAIC,EAA6B,QAApBC,EAAAJ,EAAOK,qBAAa,IAAAD,OAAA,EAAAA,EAAEE,QAAQ,iBAC3C,KAAOH,GACLF,EAAUM,IAAIJ,GACdA,UAASK,EAAAL,EAAOE,oCAAeC,QAAQ,iBAKzC,IAAK,MAAMG,KAAQjB,KAAKkB,iBAAiB,iBACvC,GAAID,IAAST,EAAQ,CACnB,MAAMW,EAAaV,EAAUW,IAAIH,GACjCA,EAAKI,KAAOF,GAAenB,KAAKK,wBAA0BY,EAAKI,KAC/DJ,EAAKK,OAASH,CACf,CAIHnB,KAAKK,wBAAyB,CAAK,CAEtC,CAnDCkB,oBACEC,MAAMD,oBAINvB,KAAKG,OAAOsB,OAAOzB,KAAM,WAAYA,KAAKM,gBAI1C,MAAMoB,EAAa1B,KAAK2B,cAAc,yBACtC3B,KAAKK,uBAAuC,MAAdqB,CAC/B,CAEDE,SACE,OAAOC,CAAI,gCACqB7B,KAAKC,WAAW6B,0GAQjD,GA7BMjC,EAAAkC,OAAS,CAACC,EAAgBC,GADdpC,EAAUqC,EAAA,CAD9BC,EAAc,oBACMtC,SAAAA"}
|
package/lib/Spinner.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as
|
|
1
|
+
import{i as n,_ as r,s as e,x as i,e as s}from"./query-assigned-elements-822fe360.js";import{e as o}from"./property-03f59dce.js";import{l as t}from"./if-defined-8a007930.js";import{c as a}from"./cond-09498763.js";import{s as l}from"./Component-1f694235.js";const p=n`:host{--_n-spinner-color:var(--n-spinner-color, var(--n-color-accent));--_n-spinner-size:var(--n-size-icon-m);--_n-spinner-border-width:calc(var(--_n-spinner-size) * 0.18);--_n-spinner-duration:0.66s;inline-size:var(--_n-spinner-size);block-size:var(--_n-spinner-size);display:inline-flex;position:relative;color:inherit}:host([size=xs]){--_n-spinner-size:var(--n-size-icon-xs)}:host([size="s"]){--_n-spinner-size:var(--n-size-icon-s)}:host([size="l"]){--_n-spinner-size:var(--n-size-icon-l)}:host([size=xl]){--_n-spinner-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-spinner-size:var(--n-size-icon-xxl)}.n-spinner,.n-spinner::after{position:absolute;z-index:var(--n-index-spinner);border-radius:var(--n-border-radius-circle);border:var(--_n-spinner-border-width) solid}.n-spinner{inset:0;border-color:transparent;border-block-end-color:var(--_n-spinner-color);animation:nRotate var(--_n-spinner-duration) linear infinite}.n-spinner::after{content:"";inset:calc(var(--_n-spinner-border-width) * -1);opacity:.3;border-color:var(--_n-spinner-color);border-block-end-color:transparent}@keyframes nRotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}`;let c=class extends e{constructor(){super(...arguments),this.size="m"}render(){return i`<div class="n-spinner" role="${a(this.label,"img")}" aria-label="${t(this.label)}" style="${a(this.color,`--_n-spinner-color:${this.color}`)}"></div>`}};c.styles=[l,p],r([o({reflect:!0})],c.prototype,"size",void 0),r([o({reflect:!0})],c.prototype,"color",void 0),r([o({reflect:!0})],c.prototype,"label",void 0),c=r([s("nord-spinner")],c);var d=c;export{d as default};
|
|
2
2
|
//# sourceMappingURL=Spinner.js.map
|
package/lib/Spinner.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Spinner.css\"\n\n/**\n * Spinner component is used to indicate users that their action is being\n * processed. You can customize the size and color of the spinner with the\n * provided properties.\n *\n * @status ready\n * @category feedback\n */\n@customElement(\"nord-spinner\")\nexport default class Spinner extends LitElement {\n static styles = [componentStyle, style]\n\n /**\n * The size of the spinner.\n */\n @property({ reflect: true }) size: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n /**\n * The color of the spinner.\n * Can accept any valid CSS color value, including custom properties.\n */\n @property({ reflect: true }) color?: string\n\n /**\n * An accessible label for the spinner.\n * If no label is supplied, the spinner is hidden from assistive technology.\n */\n @property({ reflect: true }) label?: string\n\n render() {\n // if a label is supplied, we give the div a role of img.\n // without this we could not use aria-label, since it is only valid on elements of certain roles.\n return html`\n <div\n class=\"n-spinner\"\n role=${cond(this.label, \"img\")}\n aria-label=${ifDefined(this.label)}\n style=${cond(this.color,
|
|
1
|
+
{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Spinner.css\"\n\n/**\n * Spinner component is used to indicate users that their action is being\n * processed. You can customize the size and color of the spinner with the\n * provided properties.\n *\n * @status ready\n * @category feedback\n * @cssprop [--n-spinner-color=var(--n-color-accent)] - Controls the color the spinner.\n */\n@customElement(\"nord-spinner\")\nexport default class Spinner extends LitElement {\n static styles = [componentStyle, style]\n\n /**\n * The size of the spinner.\n */\n @property({ reflect: true }) size: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n /**\n * The color of the spinner.\n * Can accept any valid CSS color value, including custom properties.\n * Takes precedence over the `--n-spinner-color` CSS custom property.\n */\n @property({ reflect: true }) color?: string\n\n /**\n * An accessible label for the spinner.\n * If no label is supplied, the spinner is hidden from assistive technology.\n */\n @property({ reflect: true }) label?: string\n\n render() {\n // if a label is supplied, we give the div a role of img.\n // without this we could not use aria-label, since it is only valid on elements of certain roles.\n return html`\n <div\n class=\"n-spinner\"\n role=${cond(this.label, \"img\")}\n aria-label=${ifDefined(this.label)}\n style=${cond(this.color, `--_n-spinner-color:${this.color}`)}\n ></div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-spinner\": Spinner\n }\n}\n"],"names":["Spinner","LitElement","constructor","this","size","render","html","cond","label","ifDefined","color","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"o5CAiBe,IAAMA,EAAN,cAAsBC,EAAtBC,kCAMgBC,KAAIC,KAA0C,GA2B5E,CAZCC,SAGE,OAAOC,CAAI,gCAGAC,EAAKJ,KAAKK,MAAO,uBACXC,EAAUN,KAAKK,kBACpBD,EAAKJ,KAAKO,MAAO,sBAAsBP,KAAKO,kBAGzD,GA/BMV,EAAAW,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDhB,EAAAiB,UAAA,YAAA,GAOjDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBhB,EAAAiB,UAAA,aAAA,GAMdH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBhB,EAAAiB,UAAA,aAAA,GAnBxBjB,EAAOc,EAAA,CAD3BI,EAAc,iBACMlB,SAAAA"}
|