@nordhealth/components 2.3.0 → 2.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 +384 -379
- package/lib/Badge.js +1 -1
- package/lib/Badge.js.map +1 -1
- package/lib/Button.js +1 -1
- package/lib/Button.js.map +1 -1
- package/lib/{Calendar-a0246aa3.js → Calendar-7ae2dda7.js} +2 -2
- package/lib/Calendar-7ae2dda7.js.map +1 -0
- package/lib/Calendar.js +1 -1
- package/lib/Checkbox.js +1 -1
- package/lib/Checkbox.js.map +1 -1
- package/lib/DatePicker.js +1 -1
- package/lib/DatePicker.js.map +1 -1
- package/lib/Icon.js +1 -1
- package/lib/Icon.js.map +1 -1
- package/lib/NavItem.js +1 -1
- package/lib/NavItem.js.map +1 -1
- package/lib/bundle.js +8 -8
- package/lib/bundle.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/src/button/Button.d.ts +1 -0
- package/lib/src/icon/Icon.d.ts +1 -1
- package/package.json +5 -5
- package/lib/Calendar-a0246aa3.js.map +0 -1
package/lib/Icon.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as s}from"./query-assigned-elements-e6cbac30.js";import{i,s as o,y as t}from"./lit-element-79bc2e0e.js";import{e as r}from"./property-03f59dce.js";import{t as n}from"./state-70f38ceb.js";import{l as a}from"./if-defined-f43b1487.js";import{o as c}from"./unsafe-html-be8023cd.js";import{o as l}from"./observe-a9c6dfb6.js";import{c as d}from"./cond-0a8d4554.js";import{s as h}from"./Component-49a41387.js";import"./directive-de55b00a.js";const m=i`:host{--_n-icon-size:var(--n-size-icon-m);display:inline-block;block-size:var(--_n-icon-size);inline-size:var(--_n-icon-size);min-inline-size:var(--_n-icon-size)}:host([size=xs]){--_n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--_n-icon-size:var(--n-size-icon-s)}:host([size="l"]){--_n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--_n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-icon-size:var(--n-size-icon-xxl)}.n-icon{display:block}svg{display:block}`;var
|
|
1
|
+
import{_ as e,e as s}from"./query-assigned-elements-e6cbac30.js";import{i,s as o,y as t}from"./lit-element-79bc2e0e.js";import{e as r}from"./property-03f59dce.js";import{t as n}from"./state-70f38ceb.js";import{l as a}from"./if-defined-f43b1487.js";import{o as c}from"./unsafe-html-be8023cd.js";import{o as l}from"./observe-a9c6dfb6.js";import{c as d}from"./cond-0a8d4554.js";import{s as h}from"./Component-49a41387.js";import"./directive-de55b00a.js";const m=i`:host{--_n-icon-size:var(--n-size-icon-m);display:inline-block;block-size:var(--_n-icon-size);inline-size:var(--_n-icon-size);min-inline-size:var(--_n-icon-size)}:host([size=xxs]){--_n-icon-size:var(--n-size-icon-xxs)}:host([size=xs]){--_n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--_n-icon-size:var(--n-size-icon-s)}:host([size="l"]){--_n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--_n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-icon-size:var(--n-size-icon-xxl)}.n-icon{display:block}svg{display:block}`;var v;let p=v=class extends o{constructor(){super(...arguments),this.name="",this.size="m",this.svg=""}static registerResolver(e){v.resolver=e}static registerIcon(e,s){let i,o;if("string"==typeof e?(i=e,o=s):(i=e.title,o=e.default),!i)throw new Error("name is required when registering an icon");if(!o)throw new Error("icon must not be empty");v.registeredIcons.has(i)||v.registeredIcons.set(i,o)}render(){return t`<div role="${d(this.label,"img")}" style="${d(this.color,`color:${this.color}`)}" aria-label="${a(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${c(this.svg)}</div></div>`}handleNameChange(){this.name?v.registeredIcons.has(this.name)?this.svg=v.registeredIcons.get(this.name):v.resolver(this.name).then((e=>{this.svg=e})).catch((()=>{this.svg=""})):this.svg=""}};p.styles=[h,m],p.resolver=e=>fetch(`https://nordcdn.net/ds/icons/1.7.0/assets/${e}.svg`).then((s=>{if(!s.ok)throw new TypeError(`NORD: unknown icon '${e}'`);return s.text()})),p.registeredIcons=new Map,e([r({reflect:!0})],p.prototype,"name",void 0),e([r({reflect:!0})],p.prototype,"size",void 0),e([r({reflect:!0})],p.prototype,"color",void 0),e([r({reflect:!0})],p.prototype,"label",void 0),e([n()],p.prototype,"svg",void 0),e([l("name")],p.prototype,"handleNameChange",null),p=v=e([s("nord-icon")],p);var z=p;export{z as default};
|
|
2
2
|
//# sourceMappingURL=Icon.js.map
|
package/lib/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sources":["../src/icon/Icon.ts"],"sourcesContent":["import { html, LitElement } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Icon.css\"\n\nexport type IconResolver = (iconName: string) => Promise<string>\n\n// in dev we should just load from node_modules\nconst loadIcon: IconResolver = (name: string) =>\n import(`@nordhealth/icons/lib/assets/${name}.js`).then(({ default: svg }) => svg)\n\n// in prod we should load from the CDN, as a sensible default\nconst loadIconCdn: IconResolver = (name: string) =>\n fetch(`https://nordcdn.net/ds/icons/${process.env.ICON_VERSION}/assets/${name}.svg`).then(response => {\n if (!response.ok) {\n throw new TypeError(`NORD: unknown icon '${name}'`)\n }\n\n return response.text()\n })\n\n/**\n * Icons are used to provide additional meaning or in places where text label doesn’t fit.\n * Icon component allows you to display an icon from the Nordicons library.\n *\n * @status ready\n * @category image\n * @slot - The default slot used for placing a custom SVG icon.\n */\n@customElement(\"nord-icon\")\nexport default class Icon extends LitElement {\n static styles = [componentStyle, style]\n\n private static resolver: IconResolver = process.env.NODE_ENV === \"development\" ? loadIcon : loadIconCdn\n private static registeredIcons = new Map<string, string>()\n\n /**\n * Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\n * Can return a string synchronously, or a promise of a string.\n * By default, will load icons from the Nord CDN.\n * @param resolver The resolver function to register.\n */\n static registerResolver(resolver: IconResolver) {\n Icon.resolver = resolver\n }\n\n /**\n * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n * @param icon An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n * This is intended to be used in cases where you import an icon's entire ES module and register it directly.\n */\n static registerIcon(icon: { title: string; default: string }): void\n\n /**\n * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n * @param name The name of the icon to be registered.\n * @param icon The SVG string for the icon.\n */\n static registerIcon(name: string, icon: string): void\n\n /**\n * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n * @param iconOrName The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n * @param icon The SVG string for the icon.\n */\n static registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) {\n let name: string | undefined\n let svg: string | undefined\n\n if (typeof iconOrName === \"string\") {\n name = iconOrName\n svg = icon\n } else {\n name = iconOrName.title\n svg = iconOrName.default\n }\n\n // handle errors\n if (!name) {\n throw new Error(\"name is required when registering an icon\")\n }\n if (!svg) {\n throw new Error(\"icon must not be empty\")\n }\n\n if (!Icon.registeredIcons.has(name)) {\n Icon.registeredIcons.set(name, svg)\n }\n }\n\n /**\n * The name of the icon to display, as defined by [nordicons](/nordicons/).\n */\n @property({ reflect: true }) name: string = \"\"\n\n /**\n * The size of the icon.\n */\n @property({ reflect: true }) size: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n /**\n * The color of the icon.\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 icon.\n * If no label is supplied, the icon is hidden from assistive technology.\n */\n @property({ reflect: true }) label?: string\n\n @state() private svg: 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 // we always hide the inner svg, since the svg does not have any text/title/label itself.\n return html`\n <div\n role=${cond(this.label, \"img\")}\n style=${cond(this.color, `color:${this.color}`)}\n aria-label=${ifDefined(this.label)}\n >\n <slot aria-hidden=\"true\"></slot>\n <div aria-hidden=\"true\">${unsafeHTML(this.svg)}</div>\n </div>\n `\n }\n\n @observe(\"name\")\n protected handleNameChange() {\n if (!this.name) {\n this.svg = \"\"\n return\n }\n\n if (Icon.registeredIcons.has(this.name)) {\n this.svg = Icon.registeredIcons.get(this.name) as string\n return\n }\n\n Icon.resolver(this.name)\n .then(svg => {\n this.svg = svg\n })\n .catch(() => {\n this.svg = \"\"\n })\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-icon\": Icon\n }\n}\n"],"names":["Icon","Icon_1","LitElement","constructor","this","name","size","svg","static","resolver","iconOrName","icon","title","default","Error","registeredIcons","has","set","render","html","cond","label","color","ifDefined","unsafeHTML","handleNameChange","get","then","catch","styles","componentStyle","style","fetch","response","ok","TypeError","text","Map","__decorate","property","reflect","prototype","state","observe","customElement"],"mappings":"+
|
|
1
|
+
{"version":3,"file":"Icon.js","sources":["../src/icon/Icon.ts"],"sourcesContent":["import { html, LitElement } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Icon.css\"\n\nexport type IconResolver = (iconName: string) => Promise<string>\n\n// in dev we should just load from node_modules\nconst loadIcon: IconResolver = (name: string) =>\n import(`@nordhealth/icons/lib/assets/${name}.js`).then(({ default: svg }) => svg)\n\n// in prod we should load from the CDN, as a sensible default\nconst loadIconCdn: IconResolver = (name: string) =>\n fetch(`https://nordcdn.net/ds/icons/${process.env.ICON_VERSION}/assets/${name}.svg`).then(response => {\n if (!response.ok) {\n throw new TypeError(`NORD: unknown icon '${name}'`)\n }\n\n return response.text()\n })\n\n/**\n * Icons are used to provide additional meaning or in places where text label doesn’t fit.\n * Icon component allows you to display an icon from the Nordicons library.\n *\n * @status ready\n * @category image\n * @slot - The default slot used for placing a custom SVG icon.\n */\n@customElement(\"nord-icon\")\nexport default class Icon extends LitElement {\n static styles = [componentStyle, style]\n\n private static resolver: IconResolver = process.env.NODE_ENV === \"development\" ? loadIcon : loadIconCdn\n private static registeredIcons = new Map<string, string>()\n\n /**\n * Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\n * Can return a string synchronously, or a promise of a string.\n * By default, will load icons from the Nord CDN.\n * @param resolver The resolver function to register.\n */\n static registerResolver(resolver: IconResolver) {\n Icon.resolver = resolver\n }\n\n /**\n * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n * @param icon An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n * This is intended to be used in cases where you import an icon's entire ES module and register it directly.\n */\n static registerIcon(icon: { title: string; default: string }): void\n\n /**\n * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n * @param name The name of the icon to be registered.\n * @param icon The SVG string for the icon.\n */\n static registerIcon(name: string, icon: string): void\n\n /**\n * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n * @param iconOrName The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n * @param icon The SVG string for the icon.\n */\n static registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) {\n let name: string | undefined\n let svg: string | undefined\n\n if (typeof iconOrName === \"string\") {\n name = iconOrName\n svg = icon\n } else {\n name = iconOrName.title\n svg = iconOrName.default\n }\n\n // handle errors\n if (!name) {\n throw new Error(\"name is required when registering an icon\")\n }\n if (!svg) {\n throw new Error(\"icon must not be empty\")\n }\n\n if (!Icon.registeredIcons.has(name)) {\n Icon.registeredIcons.set(name, svg)\n }\n }\n\n /**\n * The name of the icon to display, as defined by [nordicons](/nordicons/).\n */\n @property({ reflect: true }) name: string = \"\"\n\n /**\n * The size of the icon.\n */\n @property({ reflect: true }) size: \"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n /**\n * The color of the icon.\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 icon.\n * If no label is supplied, the icon is hidden from assistive technology.\n */\n @property({ reflect: true }) label?: string\n\n @state() private svg: 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 // we always hide the inner svg, since the svg does not have any text/title/label itself.\n return html`\n <div\n role=${cond(this.label, \"img\")}\n style=${cond(this.color, `color:${this.color}`)}\n aria-label=${ifDefined(this.label)}\n >\n <slot aria-hidden=\"true\"></slot>\n <div aria-hidden=\"true\">${unsafeHTML(this.svg)}</div>\n </div>\n `\n }\n\n @observe(\"name\")\n protected handleNameChange() {\n if (!this.name) {\n this.svg = \"\"\n return\n }\n\n if (Icon.registeredIcons.has(this.name)) {\n this.svg = Icon.registeredIcons.get(this.name) as string\n return\n }\n\n Icon.resolver(this.name)\n .then(svg => {\n this.svg = svg\n })\n .catch(() => {\n this.svg = \"\"\n })\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-icon\": Icon\n }\n}\n"],"names":["Icon","Icon_1","LitElement","constructor","this","name","size","svg","static","resolver","iconOrName","icon","title","default","Error","registeredIcons","has","set","render","html","cond","label","color","ifDefined","unsafeHTML","handleNameChange","get","then","catch","styles","componentStyle","style","fetch","response","ok","TypeError","text","Map","__decorate","property","reflect","prototype","state","observe","customElement"],"mappings":"u+BAmCA,IAAqBA,EAAIC,EAAzB,cAAkCC,EAAlCC,kCA+D+BC,KAAIC,KAAW,GAKfD,KAAIE,KAAkD,IAclEF,KAAGG,IAAW,EAsChC,CA5GCC,wBAAwBC,GACtBR,EAAKQ,SAAWA,CACjB,CAqBDD,oBAAoBE,EAAyDC,GAC3E,IAAIN,EACAE,EAWJ,GAT0B,iBAAfG,GACTL,EAAOK,EACPH,EAAMI,IAENN,EAAOK,EAAWE,MAClBL,EAAMG,EAAWG,UAIdR,EACH,MAAM,IAAIS,MAAM,6CAElB,IAAKP,EACH,MAAM,IAAIO,MAAM,0BAGbb,EAAKc,gBAAgBC,IAAIX,IAC5BJ,EAAKc,gBAAgBE,IAAIZ,EAAME,EAElC,CA0BDW,SAIE,OAAOC,CAAI,cAEAC,EAAKhB,KAAKiB,MAAO,kBAChBD,EAAKhB,KAAKkB,MAAO,SAASlB,KAAKkB,yBAC1BC,EAAUnB,KAAKiB,mEAGFG,EAAWpB,KAAKG,kBAG/C,CAGSkB,mBACHrB,KAAKC,KAKNJ,EAAKc,gBAAgBC,IAAIZ,KAAKC,MAChCD,KAAKG,IAAMN,EAAKc,gBAAgBW,IAAItB,KAAKC,MAI3CJ,EAAKQ,SAASL,KAAKC,MAChBsB,MAAKpB,IACJH,KAAKG,IAAMA,CAAG,IAEfqB,OAAM,KACLxB,KAAKG,IAAM,EAAE,IAdfH,KAAKG,IAAM,EAgBd,GAtHMP,EAAA6B,OAAS,CAACC,EAAgBC,GAElB/B,EAAAS,SArBkBJ,GACjC2B,MAAM,6CAAmE3B,SAAYsB,MAAKM,IACxF,IAAKA,EAASC,GACZ,MAAM,IAAIC,UAAU,uBAAuB9B,MAG7C,OAAO4B,EAASG,MAAM,IAgBTpC,EAAAe,gBAAkB,IAAIsB,IA2DRC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyBxC,EAAAyC,UAAA,YAAA,GAKjBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiExC,EAAAyC,UAAA,YAAA,GAMzDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBxC,EAAAyC,UAAA,aAAA,GAMdH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBxC,EAAAyC,UAAA,aAAA,GAElCH,EAAA,CAARI,KAAgC1C,EAAAyC,UAAA,WAAA,GAmBjCH,EAAA,CADCK,EAAQ,SAmBR3C,EAAAyC,UAAA,mBAAA,MAvHkBzC,EAAIC,EAAAqC,EAAA,CADxBM,EAAc,cACM5C,SAAAA"}
|
package/lib/NavItem.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as t,b as a,s as i}from"./lit-element-79bc2e0e.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./class-map-cd6c8cbd.js";import{n as c}from"./ref-697b28b5.js";import{D as l}from"./DirectionController-8b298382.js";import{S as d}from"./SlotController-ea6eff46.js";import{c as v}from"./cond-0a8d4554.js";import{N as p}from"./events-731d0007.js";import{F as m}from"./FocusableMixin-99db12c1.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const h=o`:host{--_n-nav-item-box-shadow:none;all:unset;display:block;font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;max-inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--_n-nav-item-box-shadow);position:relative}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-nav-item:focus{--_n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent)}}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-nav-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([badge]) .n-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-inline-size:calc(100% - calc(var(--n-space-m) + var(--n-space-m)));margin-block-end:-3px}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-warning);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;position:absolute;margin-block-start:-2px;margin-inline-start:calc(var(--n-space-s)/ 1.5);font-size:var(--n-font-size-xs);display:inline-block}`;let b=class extends(m(i)){constructor(){super(...arguments),this.subnavSlot=new d(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=t`${this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:a}</div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),t`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return t`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${v(this.active,"page")}" href="${this.href||""}">${e}</a>`}renderToggle(e){return t`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${e}<nord-icon size="
|
|
1
|
+
import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as t,b as a,s as i}from"./lit-element-79bc2e0e.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./class-map-cd6c8cbd.js";import{n as c}from"./ref-697b28b5.js";import{D as l}from"./DirectionController-8b298382.js";import{S as d}from"./SlotController-ea6eff46.js";import{c as v}from"./cond-0a8d4554.js";import{N as p}from"./events-731d0007.js";import{F as m}from"./FocusableMixin-99db12c1.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const h=o`:host{--_n-nav-item-box-shadow:none;all:unset;display:block;font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;max-inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--_n-nav-item-box-shadow);position:relative}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-nav-item:focus{--_n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent)}}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-nav-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([badge]) .n-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-inline-size:calc(100% - calc(var(--n-space-m) + var(--n-space-m)));margin-block-end:-3px}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-warning);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;position:absolute;margin-block-start:-2px;margin-inline-start:calc(var(--n-space-s)/ 1.5);font-size:var(--n-font-size-xs);display:inline-block}`;let b=class extends(m(i)){constructor(){super(...arguments),this.subnavSlot=new d(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=t`${this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:a}</div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),t`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return t`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${v(this.active,"page")}" href="${this.href||""}">${e}</a>`}renderToggle(e){return t`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${e}<nord-icon size="xxs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return t`<button class="n-nav-item" ${c(this.focusableRef)}>${e}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};b.styles=h,e([r({type:Boolean,reflect:!0})],b.prototype,"active",void 0),e([r()],b.prototype,"icon",void 0),e([r()],b.prototype,"href",void 0),e([r()],b.prototype,"badge",void 0),e([r({type:Boolean})],b.prototype,"open",void 0),b=e([n("nord-nav-item")],b);var f=b;export{f as default};
|
|
2
2
|
//# sourceMappingURL=NavItem.js.map
|
package/lib/NavItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(LitElement) {\n static styles = style\n\n private subnavSlot = new SlotController(this, \"subnav\")\n private direction = new DirectionController(this)\n\n /**\n * Used for indicating the current page. This gives a prominent background to the nav item,\n * and marks the item as the current page for assistive technology.\n */\n @property({ type: Boolean, reflect: true }) active = false\n\n /**\n * The name of an icon from Nordicons to display for the nav item.\n */\n @property() icon?: string\n\n /**\n * The url the nav item should link to.\n * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n */\n @property() href?: string\n\n /**\n * Allows you to add a notification badge with a number next to the nav item.\n */\n @property() badge?: string\n\n /**\n * When the nav items contains a subnav, controls whether the section is expanded or not.\n * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n */\n @property({ type: Boolean }) open = false\n\n connectedCallback() {\n super.connectedCallback()\n\n // in cases where there is nested nav, and one of the items is active\n // we should auto-open the nav item for developer convenience\n if (this.querySelector(`nord-nav-item[active]`)) {\n this.open = true\n }\n }\n\n render() {\n const innards = html`\n ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n <div class=\"n-nav-content\">\n <span class=\"n-nav-label\"><slot></slot></span>\n ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n </div>\n `\n let element: TemplateResult\n\n if (this.subnavSlot.hasContent) {\n element = this.renderToggle(innards)\n } else if (this.href) {\n element = this.renderLink(innards)\n } else {\n element = this.renderButton(innards)\n }\n\n return html`\n <div role=\"listitem\">\n ${element}\n <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n </div>\n `\n }\n\n private renderLink(innards: TemplateResult) {\n return html`\n <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, \"page\")} href=${this.href || \"\"}>\n ${innards}\n </a>\n `\n }\n\n private renderToggle(innards: TemplateResult) {\n return html`\n <button\n class=\"n-nav-item\"\n @click=${this.toggleOpen}\n aria-expanded=${this.open ? \"true\" : \"false\"}\n ${ref(this.focusableRef)}\n >\n ${innards}\n\n <nord-icon\n size=\"
|
|
1
|
+
{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(LitElement) {\n static styles = style\n\n private subnavSlot = new SlotController(this, \"subnav\")\n private direction = new DirectionController(this)\n\n /**\n * Used for indicating the current page. This gives a prominent background to the nav item,\n * and marks the item as the current page for assistive technology.\n */\n @property({ type: Boolean, reflect: true }) active = false\n\n /**\n * The name of an icon from Nordicons to display for the nav item.\n */\n @property() icon?: string\n\n /**\n * The url the nav item should link to.\n * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n */\n @property() href?: string\n\n /**\n * Allows you to add a notification badge with a number next to the nav item.\n */\n @property() badge?: string\n\n /**\n * When the nav items contains a subnav, controls whether the section is expanded or not.\n * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n */\n @property({ type: Boolean }) open = false\n\n connectedCallback() {\n super.connectedCallback()\n\n // in cases where there is nested nav, and one of the items is active\n // we should auto-open the nav item for developer convenience\n if (this.querySelector(`nord-nav-item[active]`)) {\n this.open = true\n }\n }\n\n render() {\n const innards = html`\n ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n <div class=\"n-nav-content\">\n <span class=\"n-nav-label\"><slot></slot></span>\n ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n </div>\n `\n let element: TemplateResult\n\n if (this.subnavSlot.hasContent) {\n element = this.renderToggle(innards)\n } else if (this.href) {\n element = this.renderLink(innards)\n } else {\n element = this.renderButton(innards)\n }\n\n return html`\n <div role=\"listitem\">\n ${element}\n <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n </div>\n `\n }\n\n private renderLink(innards: TemplateResult) {\n return html`\n <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, \"page\")} href=${this.href || \"\"}>\n ${innards}\n </a>\n `\n }\n\n private renderToggle(innards: TemplateResult) {\n return html`\n <button\n class=\"n-nav-item\"\n @click=${this.toggleOpen}\n aria-expanded=${this.open ? \"true\" : \"false\"}\n ${ref(this.focusableRef)}\n >\n ${innards}\n\n <nord-icon\n size=\"xxs\"\n class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n name=\"arrow-expand-right-small\"\n ></nord-icon>\n </button>\n `\n }\n\n private renderButton(innards: TemplateResult) {\n return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n }\n\n private toggleOpen() {\n this.open = !this.open\n this.dispatchEvent(new NordEvent(\"toggle\"))\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-nav-item\": NavItem\n }\n}\n"],"names":["NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","connectedCallback","super","querySelector","render","innards","html","icon","nothing","badge","element","hasContent","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","styles","style","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"8hGAuBA,IAAqBA,EAArB,cAAqCC,EAAeC,IAApDC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBxBL,KAAIM,MAAG,CAyErC,CAvECC,oBACEC,MAAMD,oBAIFP,KAAKS,cAAc,2BACrBT,KAAKM,MAAO,EAEf,CAEDI,SACE,MAAMC,EAAUC,CAAI,GAChBZ,KAAKa,KAAOD,CAAI,uCAAsCZ,KAAKa,8BAA+BC,6EAGxFd,KAAKe,MAAQH,CAAI,6BAA6BZ,KAAKe,eAAiBD,UAG1E,IAAIE,EAUJ,OAPEA,EADEhB,KAAKC,WAAWgB,WACRjB,KAAKkB,aAAaP,GACnBX,KAAKmB,KACJnB,KAAKoB,WAAWT,GAEhBX,KAAKqB,aAAaV,GAGvBC,CAAI,wBAELI,gBACWhB,KAAKC,WAAWqB,uBAAqBtB,KAAKM,qBAG5D,CAEOc,WAAWT,GACjB,OAAOC,CAAI,yBACeW,EAAIvB,KAAKwB,+BAA8BC,EAAKzB,KAAKK,OAAQ,kBAAgBL,KAAKmB,MAAQ,OAC1GR,OAGP,CAEOO,aAAaP,GACnB,OAAOC,CAAI,sCAGEZ,KAAK0B,8BACE1B,KAAKM,KAAO,OAAS,YACnCiB,EAAIvB,KAAKwB,iBAETb,iCAIQgB,EAAS,CAAE,iBAAiB,EAAM,QAAS3B,KAAKG,UAAUyB,gEAKzE,CAEOP,aAAaV,GACnB,OAAOC,CAAI,8BAA8BW,EAAIvB,KAAKwB,iBAAiBb,YACpE,CAEOe,aACN1B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK6B,cAAc,IAAIC,EAAU,UAClC,GAvGMlC,EAAMmC,OAAGC,EAS4BC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBzC,EAAA0C,UAAA,cAAA,GAK9CL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAMbL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAAyBtC,EAAA0C,UAAA,aAAA,GAMGL,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAuBxC,EAAA0C,UAAA,YAAA,GAhCtB1C,EAAOqC,EAAA,CAD3BM,EAAc,kBACM3C,SAAAA"}
|