@nordhealth/components 2.15.2 → 2.16.1-2.16.1-alpha.1.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 +33 -7
- package/lib/Avatar.js +1 -1
- package/lib/Avatar.js.map +1 -1
- package/lib/NavGroup.js +1 -1
- package/lib/NavGroup.js.map +1 -1
- package/lib/Navigation.js +1 -1
- package/lib/Navigation.js.map +1 -1
- package/lib/bundle.js +2 -2
- package/lib/bundle.js.map +1 -1
- package/lib/src/avatar/Avatar.d.ts +8 -3
- package/lib/src/navigation/Navigation.d.ts +1 -0
- package/package.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -407,7 +407,7 @@
|
|
|
407
407
|
"declarations": [
|
|
408
408
|
{
|
|
409
409
|
"kind": "class",
|
|
410
|
-
"description": "Avatar is used for showing a thumbnail representation of a user or entity.\nDefault avatar illustration is displayed when no src is specified.",
|
|
410
|
+
"description": "Avatar is used for showing a thumbnail representation of a single user or entity.\nDefault avatar illustration is displayed when no src is specified.",
|
|
411
411
|
"name": "Avatar",
|
|
412
412
|
"cssProperties": [
|
|
413
413
|
{
|
|
@@ -435,7 +435,7 @@
|
|
|
435
435
|
"kind": "field",
|
|
436
436
|
"name": "size",
|
|
437
437
|
"type": {
|
|
438
|
-
"text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
|
|
438
|
+
"text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | \"xxxl\""
|
|
439
439
|
},
|
|
440
440
|
"default": "\"m\"",
|
|
441
441
|
"description": "The size of the avatar.",
|
|
@@ -459,9 +459,19 @@
|
|
|
459
459
|
"text": "string"
|
|
460
460
|
},
|
|
461
461
|
"default": "\"\"",
|
|
462
|
-
"description": "The name of the person.",
|
|
462
|
+
"description": "The name of the person or entity.",
|
|
463
463
|
"attribute": "name"
|
|
464
464
|
},
|
|
465
|
+
{
|
|
466
|
+
"kind": "field",
|
|
467
|
+
"name": "icon",
|
|
468
|
+
"type": {
|
|
469
|
+
"text": "string"
|
|
470
|
+
},
|
|
471
|
+
"default": "\"\"",
|
|
472
|
+
"description": "The fallback icon.",
|
|
473
|
+
"attribute": "icon"
|
|
474
|
+
},
|
|
465
475
|
{
|
|
466
476
|
"kind": "field",
|
|
467
477
|
"name": "variant",
|
|
@@ -503,7 +513,7 @@
|
|
|
503
513
|
{
|
|
504
514
|
"name": "size",
|
|
505
515
|
"type": {
|
|
506
|
-
"text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
|
|
516
|
+
"text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | \"xxxl\""
|
|
507
517
|
},
|
|
508
518
|
"default": "\"m\"",
|
|
509
519
|
"description": "The size of the avatar.",
|
|
@@ -523,9 +533,18 @@
|
|
|
523
533
|
"text": "string"
|
|
524
534
|
},
|
|
525
535
|
"default": "\"\"",
|
|
526
|
-
"description": "The name of the person.",
|
|
536
|
+
"description": "The name of the person or entity.",
|
|
527
537
|
"fieldName": "name"
|
|
528
538
|
},
|
|
539
|
+
{
|
|
540
|
+
"name": "icon",
|
|
541
|
+
"type": {
|
|
542
|
+
"text": "string"
|
|
543
|
+
},
|
|
544
|
+
"default": "\"\"",
|
|
545
|
+
"description": "The fallback icon.",
|
|
546
|
+
"fieldName": "icon"
|
|
547
|
+
},
|
|
529
548
|
{
|
|
530
549
|
"name": "variant",
|
|
531
550
|
"type": {
|
|
@@ -543,7 +562,7 @@
|
|
|
543
562
|
"localization": [],
|
|
544
563
|
"status": "ready",
|
|
545
564
|
"category": "image",
|
|
546
|
-
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Always add the name of the person using the `name` property.\n- For the best results, use square images or images cropped into a square.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.\n\n</div>\n",
|
|
565
|
+
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Always add the name of the person using the `name` property.\n- For the best results, use square images or images cropped into a square.\n- Use the avatar to represent a single user, pet or entity.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.\n- Don't use an avatar when an icon is more suitable, for example when denoting groups or \"things\".\n\n</div>\n",
|
|
547
566
|
"examples": [],
|
|
548
567
|
"tagName": "nord-avatar",
|
|
549
568
|
"customElement": true
|
|
@@ -9331,7 +9350,14 @@
|
|
|
9331
9350
|
"name": "footer"
|
|
9332
9351
|
}
|
|
9333
9352
|
],
|
|
9334
|
-
"members": [
|
|
9353
|
+
"members": [
|
|
9354
|
+
{
|
|
9355
|
+
"kind": "field",
|
|
9356
|
+
"name": "headerSlot",
|
|
9357
|
+
"privacy": "private",
|
|
9358
|
+
"default": "new SlotController(this, \"header\")"
|
|
9359
|
+
}
|
|
9360
|
+
],
|
|
9335
9361
|
"superclass": {
|
|
9336
9362
|
"name": "LitElement",
|
|
9337
9363
|
"package": "lit"
|
package/lib/Avatar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as a,_ as r,s as t,y as e,b as
|
|
1
|
+
import{i as a,_ as r,s as t,y as e,b as i,e as o}from"./query-assigned-elements-cf502539.js";import{e as n}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{s as l}from"./Component-449e40fb.js";import{f as c}from"./fsm-50373df9.js";import{o as v}from"./observe-a9c6dfb6.js";import"./VisuallyHidden.js";import"./Icon.js";import"./if-defined-720964c0.js";import"./directive-de55b00a.js";import"./cond-2da54107.js";import"./IconManager.js";const d=a`:host{--_n-avatar-color:var(--n-avatar-color, var(--n-color-text-weaker));--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-l));--_n-avatar-border-radius:var(--n-border-radius-circle);--_n-avatar-font-size:var(--n-font-size-xs);--_n-avatar-box-shadow:none;--_n-avatar-text-color:var(--n-color-text-on-accent);display:inline-flex;block-size:var(--_n-avatar-size);inline-size:var(--_n-avatar-size)}:host(:empty) .n-avatar-inner,:host(:not(:empty)) svg{display:none}:host(:empty){--_n-avatar-color:var(--n-avatar-color, var(--n-color-border))}.n-avatar{background:var(--_n-avatar-color);border-radius:var(--_n-avatar-border-radius);box-shadow:var(--_n-avatar-box-shadow);overflow:hidden;inline-size:100%;block-size:100%;display:grid;place-items:center;color:var(--_n-avatar-text-color);font-size:var(--_n-avatar-font-size);font-weight:var(--n-font-weight-active)}img,svg{inline-size:100%;block-size:auto;object-fit:cover}nord-icon{--_n-icon-size:calc(var(--_n-avatar-size) / 1.6)}.n-loading{display:none}:host([size="s"]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xs) * 2));--_n-avatar-font-size:calc(var(--n-font-size-xs) / 1.1)}:host([size="l"]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xl));--_n-avatar-font-size:var(--n-font-size-m)}:host([size=xl]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xl) + var(--n-size-icon-s)));--_n-avatar-font-size:var(--n-font-size-xl)}:host([size=xxl]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xxl));--_n-avatar-font-size:var(--n-font-size-xxl)}:host([size=xxxl]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xxl) + var(--n-size-icon-xl)));--_n-avatar-font-size:var(--n-font-size-xxxl)}:host([variant=square]){--_n-avatar-color:var(--n-avatar-color, var(--n-color-accent));--_n-avatar-border-radius:var(--n-border-radius);--_n-avatar-box-shadow:var(--n-box-shadow)}:host([icon]){--_n-avatar-color:var(--n-avatar-color, var(--n-color-status-neutral-weak));--_n-avatar-text-color:var(--n-color-text)}`,{transition:h}=c({initial:{"src-set":"loading"},loading:{load:"loaded",error:"initial","src-clear":"initial"},loaded:{"src-set":"loading","src-clear":"initial"}});let z=class extends t{constructor(){super(...arguments),this.state="initial",this.size="m",this.name="",this.icon="",this.variant="default"}render(){return e`<div class="n-avatar">${"initial"!==this.state?this.renderImage():i} ${"loaded"!==this.state?this.renderFallback():i}</div>`}handleSrcChange(){const a=this.src?"src-set":"src-clear";this.state=h(this.state,a)}renderImage(){return this.src?e`<slot hidden></slot><img class="n-${this.state}" src="${this.src}" @load="${this.handleLoad}" @error="${this.handleError}" alt="${this.name||""}">`:i}renderFallback(){return e`<nord-visually-hidden>${this.name}</nord-visually-hidden><div class="n-avatar-inner" aria-hidden="true"><slot></slot></div>${this.icon?e`<nord-icon name="${this.icon}"></nord-icon>`:e`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><rect fill="var(--_n-avatar-color)" height="27" rx="12" width="27" x="0" y="0"></rect><g fill="#fff" opacity=".7"><circle cx="13.5" cy="30" r="13"></circle><circle cx="13.5" cy="11" r="5"></circle></g></svg>`}`}handleLoad(){this.state=h(this.state,"load")}handleError(){this.state=h(this.state,"error")}};z.styles=[l,d],r([s()],z.prototype,"state",void 0),r([n({reflect:!0})],z.prototype,"size",void 0),r([n({reflect:!0})],z.prototype,"src",void 0),r([n()],z.prototype,"name",void 0),r([n()],z.prototype,"icon",void 0),r([n({reflect:!0})],z.prototype,"variant",void 0),r([v("src")],z.prototype,"handleSrcChange",null),z=r([o("nord-avatar")],z);var f=z;export{f as default};
|
|
2
2
|
//# sourceMappingURL=Avatar.js.map
|
package/lib/Avatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Avatar.css\"\nimport { fsm, States } from \"../common/fsm.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nconst { transition } = fsm({\n initial: {\n \"src-set\": \"loading\",\n },\n loading: {\n load: \"loaded\",\n error: \"initial\",\n \"src-clear\": \"initial\",\n },\n loaded: {\n \"src-set\": \"loading\",\n \"src-clear\": \"initial\",\n },\n})\n\n/**\n * Avatar is used for showing a thumbnail representation of a user or entity.\n * Default avatar illustration is displayed when no src is specified.\n *\n * @status ready\n * @category image\n *\n * @cssprop [--n-avatar-color=var(--n-color-status-highlight)] - Controls the color of the avatar fallback, using [color tokens](/tokens/#color).\n * @cssprop [--n-avatar-size=var(--n-size-icon-l)] - Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).\n */\n\n@customElement(\"nord-avatar\")\nexport default class Avatar extends LitElement {\n static styles = [componentStyle, style]\n\n @state() private state: States<typeof transition> = \"initial\"\n\n /**\n * The size of the avatar.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n /**\n * The URL of the avatar image uploaded by the user.\n */\n @property({ reflect: true }) src?: string\n\n /**\n * The name of the person.\n */\n @property() name: string = \"\"\n\n /**\n * The style variant of the avatar.\n */\n @property({ reflect: true }) variant: \"default\" | \"square\" = \"default\"\n\n render() {\n return html`\n <div class=\"n-avatar\">\n ${this.state !== \"initial\" ? this.renderImage() : nothing}\n ${this.state !== \"loaded\" ? this.renderFallback() : nothing}\n </div>\n `\n }\n\n @observe(\"src\")\n protected handleSrcChange() {\n const event = this.src ? \"src-set\" : \"src-clear\"\n this.state = transition(this.state, event)\n }\n\n protected renderImage() {\n return this.src\n ? html`\n <slot hidden></slot>\n <img\n class=\"n-${this.state}\"\n src=${this.src}\n @load=${this.handleLoad}\n @error=${this.handleError}\n alt=${this.name || \"\"}\n />\n `\n : nothing\n }\n\n protected renderFallback() {\n return html`\n <nord-visually-hidden>${this.name}</nord-visually-hidden>\n <div class=\"n-avatar-inner\" aria-hidden=\"true\">\n <slot></slot>\n </div>\n <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 27 27\">\n
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Avatar.css\"\nimport { fsm, States } from \"../common/fsm.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"../icon/Icon.js\"\n\nconst { transition } = fsm({\n initial: {\n \"src-set\": \"loading\",\n },\n loading: {\n load: \"loaded\",\n error: \"initial\",\n \"src-clear\": \"initial\",\n },\n loaded: {\n \"src-set\": \"loading\",\n \"src-clear\": \"initial\",\n },\n})\n\n/**\n * Avatar is used for showing a thumbnail representation of a single user or entity.\n * Default avatar illustration is displayed when no src is specified.\n *\n * @status ready\n * @category image\n *\n * @cssprop [--n-avatar-color=var(--n-color-status-highlight)] - Controls the color of the avatar fallback, using [color tokens](/tokens/#color).\n * @cssprop [--n-avatar-size=var(--n-size-icon-l)] - Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).\n */\n\n@customElement(\"nord-avatar\")\nexport default class Avatar extends LitElement {\n static styles = [componentStyle, style]\n\n @state() private state: States<typeof transition> = \"initial\"\n\n /**\n * The size of the avatar.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | \"xxxl\" = \"m\"\n\n /**\n * The URL of the avatar image uploaded by the user.\n */\n @property({ reflect: true }) src?: string\n\n /**\n * The name of the person or entity.\n */\n @property() name: string = \"\"\n\n /**\n * The fallback icon.\n */\n @property() icon: string = \"\"\n\n /**\n * The style variant of the avatar.\n */\n @property({ reflect: true }) variant: \"default\" | \"square\" = \"default\"\n\n render() {\n return html`\n <div class=\"n-avatar\">\n ${this.state !== \"initial\" ? this.renderImage() : nothing}\n ${this.state !== \"loaded\" ? this.renderFallback() : nothing}\n </div>\n `\n }\n\n @observe(\"src\")\n protected handleSrcChange() {\n const event = this.src ? \"src-set\" : \"src-clear\"\n this.state = transition(this.state, event)\n }\n\n protected renderImage() {\n return this.src\n ? html`\n <slot hidden></slot>\n <img\n class=\"n-${this.state}\"\n src=${this.src}\n @load=${this.handleLoad}\n @error=${this.handleError}\n alt=${this.name || \"\"}\n />\n `\n : nothing\n }\n\n protected renderFallback() {\n return html`\n <nord-visually-hidden>${this.name}</nord-visually-hidden>\n <div class=\"n-avatar-inner\" aria-hidden=\"true\">\n <slot></slot>\n </div>\n ${this.icon\n ? html`<nord-icon name=\"${this.icon}\"></nord-icon>`\n : html`\n <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 27 27\">\n <rect fill=\"var(--_n-avatar-color)\" height=\"27\" rx=\"12\" width=\"27\" x=\"0\" y=\"0\"></rect>\n <g fill=\"#fff\" opacity=\".7\">\n <circle cx=\"13.5\" cy=\"30\" r=\"13\"></circle>\n <circle cx=\"13.5\" cy=\"11\" r=\"5\"></circle>\n </g>\n </svg>\n `}\n `\n }\n\n private handleLoad() {\n this.state = transition(this.state, \"load\")\n }\n\n private handleError() {\n this.state = transition(this.state, \"error\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-avatar\": Avatar\n }\n}\n"],"names":["transition","fsm","initial","loading","load","error","loaded","Avatar","LitElement","constructor","this","state","size","name","icon","variant","render","html","renderImage","nothing","renderFallback","handleSrcChange","event","src","handleLoad","handleError","styles","componentStyle","style","__decorate","prototype","property","reflect","observe","customElement"],"mappings":"+7EAUMA,WAAEA,GAAeC,EAAI,CACzBC,QAAS,CACP,UAAW,WAEbC,QAAS,CACPC,KAAM,SACNC,MAAO,UACP,YAAa,WAEfC,OAAQ,CACN,UAAW,UACX,YAAa,aAgBjB,IAAqBC,EAArB,cAAoCC,EAApCC,kCAGmBC,KAAKC,MAA8B,UAKvBD,KAAIE,KAA4C,IAUjEF,KAAIG,KAAW,GAKfH,KAAII,KAAW,GAKEJ,KAAOK,QAAyB,SA2D9D,CAzDCC,SACE,OAAOC,CAAI,yBAEU,YAAfP,KAAKC,MAAsBD,KAAKQ,cAAgBC,KACjC,WAAfT,KAAKC,MAAqBD,KAAKU,iBAAmBD,SAGzD,CAGSE,kBACR,MAAMC,EAAQZ,KAAKa,IAAM,UAAY,YACrCb,KAAKC,MAAQX,EAAWU,KAAKC,MAAOW,EACrC,CAESJ,cACR,OAAOR,KAAKa,IACRN,CAAI,qCAGWP,KAAKC,eACVD,KAAKa,eACHb,KAAKc,uBACJd,KAAKe,qBACRf,KAAKG,MAAQ,OAGvBM,CACL,CAESC,iBACR,OAAOH,CAAI,yBACeP,KAAKG,gGAI3BH,KAAKI,KACHG,CAAI,oBAAoBP,KAAKI,qBAC7BG,CAAI,kSAUX,CAEOO,aACNd,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,OACrC,CAEOc,cACNf,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,QACrC,GArFMJ,EAAAmB,OAAS,CAACC,EAAgBC,GAExBC,EAAA,CAARlB,KAA4DJ,EAAAuB,UAAA,aAAA,GAKhCD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAA2DzB,EAAAuB,UAAA,YAAA,GAKnDD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAoBzB,EAAAuB,UAAA,WAAA,GAK7BD,EAAA,CAAXE,KAA4BxB,EAAAuB,UAAA,YAAA,GAKjBD,EAAA,CAAXE,KAA4BxB,EAAAuB,UAAA,YAAA,GAKAD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAiDzB,EAAAuB,UAAA,eAAA,GAYtED,EAAA,CADCI,EAAQ,QAIR1B,EAAAuB,UAAA,kBAAA,MA3CkBvB,EAAMsB,EAAA,CAD1BK,EAAc,gBACM3B,SAAAA"}
|
package/lib/NavGroup.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as i,s as n,y as t,b as o,e as r}from"./query-assigned-elements-cf502539.js";import{e as a}from"./property-03f59dce.js";import"./Icon.js";import"./state-70f38ceb.js";import"./if-defined-720964c0.js";import"./directive-de55b00a.js";import"./cond-2da54107.js";import"./IconManager.js";import"./Component-449e40fb.js";import"./observe-a9c6dfb6.js";const s=e`:host{color:var(--n-color-text-weak);font-weight:var(--n-font-weight);line-height:var(--n-line-height-tight);white-space:nowrap;text-overflow:ellipsis;user-select:none;all:unset;display:block;font-family:var(--n-font-family);font-size:var(--n-font-size-m)}*,::after,::before{box-sizing:border-box}[role=list]{margin-block-end:var(--n-space-m);min-inline-size:100%;list-style:none;appearance:none;border:0;box-sizing:border-box;margin:0;padding:0}.n-heading{min-inline-size:100%;color:var(--n-color-nav-heading);font-weight:var(--n-font-weight-active);line-height:var(--n-line-height-tight);padding-inline-start:var(--n-space-s);margin-block-end:var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let l=class extends n{render(){return t`${this.heading?t`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:o}<div role="list" aria-labelledby="${this.heading?"heading":o}"><slot></slot></div>`}};l.styles=s,i([a()],l.prototype,"heading",void 0),l=i([r("nord-nav-group")],l);var d=l;export{d as default};
|
|
1
|
+
import{i as e,_ as i,s as n,y as t,b as o,e as r}from"./query-assigned-elements-cf502539.js";import{e as a}from"./property-03f59dce.js";import"./Icon.js";import"./state-70f38ceb.js";import"./if-defined-720964c0.js";import"./directive-de55b00a.js";import"./cond-2da54107.js";import"./IconManager.js";import"./Component-449e40fb.js";import"./observe-a9c6dfb6.js";const s=e`:host{color:var(--n-color-text-weak);font-weight:var(--n-font-weight);line-height:var(--n-line-height-tight);white-space:nowrap;text-overflow:ellipsis;user-select:none;all:unset;display:block;font-family:var(--n-font-family);font-size:var(--n-font-size-m)}*,::after,::before{box-sizing:border-box}[role=list]{margin-block-end:var(--n-space-m);min-inline-size:100%;list-style:none;appearance:none;border:0;box-sizing:border-box;margin:0;padding:0}.n-heading{min-inline-size:100%;color:var(--n-color-nav-heading);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);line-height:var(--n-line-height-tight);padding-inline-start:var(--n-space-s);margin-block-start:var(--n-space-m);margin-block-end:var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let l=class extends n{render(){return t`${this.heading?t`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:o}<div role="list" aria-labelledby="${this.heading?"heading":o}"><slot></slot></div>`}};l.styles=s,i([a()],l.prototype,"heading",void 0),l=i([r("nord-nav-group")],l);var d=l;export{d as default};
|
|
2
2
|
//# sourceMappingURL=NavGroup.js.map
|
package/lib/NavGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavGroup.js","sources":["../src/nav-group/NavGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport \"../icon/Icon.js\"\n\nimport style from \"./NavGroup.css\"\n\n/**\n * Navigation group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status ready\n * @slot - The default slot used for the nav items.\n */\n@customElement(\"nord-nav-group\")\nexport default class NavGroup extends LitElement {\n static styles = style\n\n /**\n * Heading and accessible label for the nav group\n */\n @property() heading?: string\n\n render() {\n return html`\n ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n <div role=\"list\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n <slot></slot>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-nav-group\": NavGroup\n }\n}\n"],"names":["NavGroup","LitElement","render","html","this","heading","nothing","styles","style","__decorate","property","prototype","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"NavGroup.js","sources":["../src/nav-group/NavGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport \"../icon/Icon.js\"\n\nimport style from \"./NavGroup.css\"\n\n/**\n * Navigation group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status ready\n * @slot - The default slot used for the nav items.\n */\n@customElement(\"nord-nav-group\")\nexport default class NavGroup extends LitElement {\n static styles = style\n\n /**\n * Heading and accessible label for the nav group\n */\n @property() heading?: string\n\n render() {\n return html`\n ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n <div role=\"list\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n <slot></slot>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-nav-group\": NavGroup\n }\n}\n"],"names":["NavGroup","LitElement","render","html","this","heading","nothing","styles","style","__decorate","property","prototype","customElement"],"mappings":"woCAeA,IAAqBA,EAArB,cAAsCC,EAQpCC,SACE,OAAOC,CAAI,GACPC,KAAKC,QAAUF,CAAI,wDAAwDC,KAAKC,cAAgBC,sCAC/DF,KAAKC,QAAU,UAAYC,wBAIjE,GAdMN,EAAMO,OAAGC,EAKJC,EAAA,CAAXC,KAA2BV,EAAAW,UAAA,eAAA,GANTX,EAAQS,EAAA,CAD5BG,EAAc,mBACMZ,SAAAA"}
|
package/lib/Navigation.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as o,_ as n,s as e,y as t,e as r}from"./query-assigned-elements-cf502539.js";const
|
|
1
|
+
import{i as o,_ as n,s as e,y as t,e as r}from"./query-assigned-elements-cf502539.js";import{S as a}from"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";const s=o`:host{all:unset;display:flex;flex-direction:column;block-size:100%;background:var(--n-color-nav-surface);overflow:hidden auto}*,::after,::before{box-sizing:border-box}nav{flex-grow:1;padding:var(--n-space-s) var(--n-space-m) var(--n-space-m)}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;--n-button-padding-inline:calc(var(--n-space-s) / 2)}::slotted(:is([slot=header],[slot=footer]):not([open]):focus-within){--n-button-border-color:var(--n-color-accent)}slot[name=header]{--n-button-border-radius:0;--n-button-padding-inline:calc((var(--n-space-l) / 1.5) - 1px);--n-button-font-weight:var(--n-font-weight-heading);--n-button-font-size:var(--n-font-size-l);--n-button-min-block-size:calc(var(--n-space-xxl) - 2px);--n-select-block-size:var(--n-button-min-block-size);min-block-size:var(--n-button-min-block-size);padding:1px 1px 0;border-block-end:1px solid var(--n-color-border)}slot[name=footer]{--n-button-color:var(--n-color-text-weak);margin:var(--n-space-m)}slot[name=header][hidden]{display:none}::slotted(:is([slot=header]:hover,[slot=header][open])){box-shadow:0 -1px 0 1px var(--n-color-nav-hover);background-color:var(--n-color-nav-hover)}::slotted(:is([slot=footer]:hover,[slot=footer][open])){--n-button-border-color:var(--n-color-border-hover)}`;let l=class extends e{constructor(){super(...arguments),this.headerSlot=new a(this,"header")}render(){return t`<slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><nav><slot></slot></nav><slot name="footer"></slot>`}};l.styles=s,l=n([r("nord-navigation")],l);var d=l;export{d 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\"\n\nimport style from \"./Navigation.css\"\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status ready\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n */\n@customElement(\"nord-navigation\")\nexport default class Navigation extends LitElement {\n static styles = style\n\n render() {\n return html`\n <slot name=\"header\"></slot>\n <nav>\n <slot></slot>\n </nav>\n <slot name=\"footer\"></slot>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-navigation\": Navigation\n }\n}\n"],"names":["Navigation","LitElement","render","html","styles","style","__decorate","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["/* 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 style from \"./Navigation.css\"\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status ready\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n */\n@customElement(\"nord-navigation\")\nexport default class Navigation extends LitElement {\n static styles = style\n\n private headerSlot = new SlotController(this, \"header\")\n\n render() {\n return html`\n <slot name=\"header\" ?hidden=${this.headerSlot.isEmpty}></slot>\n <nav>\n <slot></slot>\n </nav>\n <slot name=\"footer\"></slot>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-navigation\": Navigation\n }\n}\n"],"names":["Navigation","LitElement","constructor","this","headerSlot","SlotController","render","html","isEmpty","styles","style","__decorate","customElement"],"mappings":"gnDAmBA,IAAqBA,EAArB,cAAwCC,EAAxCC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,SAW/C,CATCG,SACE,OAAOC,CAAI,gCACqBJ,KAAKC,WAAWI,qEAMjD,GAZMR,EAAMS,OAAGC,EADGV,EAAUW,EAAA,CAD9BC,EAAc,oBACMZ,SAAAA"}
|