@nordhealth/components 2.16.1-alpha.2 → 2.16.1-alpha.4
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 +73 -73
- package/lib/Header.js +1 -1
- package/lib/Header.js.map +1 -1
- package/lib/NavItem.js +1 -1
- package/lib/NavItem.js.map +1 -1
- package/lib/bundle.js +1 -1
- package/lib/bundle.js.map +1 -1
- package/package.json +5 -5
package/custom-elements.json
CHANGED
|
@@ -589,57 +589,52 @@
|
|
|
589
589
|
},
|
|
590
590
|
{
|
|
591
591
|
"kind": "javascript-module",
|
|
592
|
-
"path": "src/
|
|
592
|
+
"path": "src/banner/Banner.ts",
|
|
593
593
|
"declarations": [
|
|
594
594
|
{
|
|
595
595
|
"kind": "class",
|
|
596
|
-
"description": "
|
|
597
|
-
"name": "
|
|
596
|
+
"description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
|
|
597
|
+
"name": "Banner",
|
|
598
|
+
"cssProperties": [
|
|
599
|
+
{
|
|
600
|
+
"description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
|
|
601
|
+
"name": "--n-banner-border-radius",
|
|
602
|
+
"default": "var(--n-border-radius)"
|
|
603
|
+
},
|
|
604
|
+
{
|
|
605
|
+
"description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
|
|
606
|
+
"name": "--n-banner-box-shadow",
|
|
607
|
+
"default": "var(--n-box-shadow-card)"
|
|
608
|
+
}
|
|
609
|
+
],
|
|
598
610
|
"slots": [
|
|
599
611
|
{
|
|
600
|
-
"description": "
|
|
612
|
+
"description": "default slot",
|
|
601
613
|
"name": ""
|
|
602
614
|
}
|
|
603
615
|
],
|
|
604
616
|
"members": [
|
|
605
617
|
{
|
|
606
618
|
"kind": "field",
|
|
607
|
-
"name": "
|
|
619
|
+
"name": "variant",
|
|
608
620
|
"type": {
|
|
609
|
-
"text": "\"
|
|
621
|
+
"text": "\"info\" | \"danger\" | \"success\" | \"warning\""
|
|
610
622
|
},
|
|
611
|
-
"default": "\"
|
|
612
|
-
"description": "The
|
|
613
|
-
"attribute": "
|
|
623
|
+
"default": "\"info\"",
|
|
624
|
+
"description": "The style variant of the banner.",
|
|
625
|
+
"attribute": "variant",
|
|
614
626
|
"reflects": true
|
|
615
|
-
},
|
|
616
|
-
{
|
|
617
|
-
"kind": "field",
|
|
618
|
-
"name": "progress",
|
|
619
|
-
"type": {
|
|
620
|
-
"text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
|
|
621
|
-
},
|
|
622
|
-
"description": "The progress of the badge. Displays a progress\nindicator next to the label.",
|
|
623
|
-
"attribute": "progress"
|
|
624
627
|
}
|
|
625
628
|
],
|
|
626
629
|
"attributes": [
|
|
627
630
|
{
|
|
628
|
-
"name": "
|
|
629
|
-
"type": {
|
|
630
|
-
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
|
|
631
|
-
},
|
|
632
|
-
"default": "\"neutral\"",
|
|
633
|
-
"description": "The type of badge.\nDetermines the background color of the badge.",
|
|
634
|
-
"fieldName": "type"
|
|
635
|
-
},
|
|
636
|
-
{
|
|
637
|
-
"name": "progress",
|
|
631
|
+
"name": "variant",
|
|
638
632
|
"type": {
|
|
639
|
-
"text": "\"
|
|
633
|
+
"text": "\"info\" | \"danger\" | \"success\" | \"warning\""
|
|
640
634
|
},
|
|
641
|
-
"
|
|
642
|
-
"
|
|
635
|
+
"default": "\"info\"",
|
|
636
|
+
"description": "The style variant of the banner.",
|
|
637
|
+
"fieldName": "variant"
|
|
643
638
|
}
|
|
644
639
|
],
|
|
645
640
|
"superclass": {
|
|
@@ -648,10 +643,10 @@
|
|
|
648
643
|
},
|
|
649
644
|
"localization": [],
|
|
650
645
|
"status": "ready",
|
|
651
|
-
"category": "
|
|
652
|
-
"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- Use
|
|
646
|
+
"category": "feedback",
|
|
647
|
+
"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- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n",
|
|
653
648
|
"examples": [],
|
|
654
|
-
"tagName": "nord-
|
|
649
|
+
"tagName": "nord-banner",
|
|
655
650
|
"customElement": true
|
|
656
651
|
}
|
|
657
652
|
],
|
|
@@ -660,68 +655,73 @@
|
|
|
660
655
|
"kind": "js",
|
|
661
656
|
"name": "default",
|
|
662
657
|
"declaration": {
|
|
663
|
-
"name": "
|
|
664
|
-
"module": "src/
|
|
658
|
+
"name": "Banner",
|
|
659
|
+
"module": "src/banner/Banner.ts"
|
|
665
660
|
}
|
|
666
661
|
},
|
|
667
662
|
{
|
|
668
663
|
"kind": "custom-element-definition",
|
|
669
|
-
"name": "nord-
|
|
664
|
+
"name": "nord-banner",
|
|
670
665
|
"declaration": {
|
|
671
|
-
"name": "
|
|
672
|
-
"module": "src/
|
|
666
|
+
"name": "Banner",
|
|
667
|
+
"module": "src/banner/Banner.ts"
|
|
673
668
|
}
|
|
674
669
|
}
|
|
675
670
|
]
|
|
676
671
|
},
|
|
677
672
|
{
|
|
678
673
|
"kind": "javascript-module",
|
|
679
|
-
"path": "src/
|
|
674
|
+
"path": "src/badge/Badge.ts",
|
|
680
675
|
"declarations": [
|
|
681
676
|
{
|
|
682
677
|
"kind": "class",
|
|
683
|
-
"description": "
|
|
684
|
-
"name": "
|
|
685
|
-
"cssProperties": [
|
|
686
|
-
{
|
|
687
|
-
"description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
|
|
688
|
-
"name": "--n-banner-border-radius",
|
|
689
|
-
"default": "var(--n-border-radius)"
|
|
690
|
-
},
|
|
691
|
-
{
|
|
692
|
-
"description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
|
|
693
|
-
"name": "--n-banner-box-shadow",
|
|
694
|
-
"default": "var(--n-box-shadow-card)"
|
|
695
|
-
}
|
|
696
|
-
],
|
|
678
|
+
"description": "Badges are used to inform users of the status of an object\nor of an action that’s been taken. Commonly used in tabular\ndata to indicate status.",
|
|
679
|
+
"name": "Badge",
|
|
697
680
|
"slots": [
|
|
698
681
|
{
|
|
699
|
-
"description": "
|
|
682
|
+
"description": "The badge content.",
|
|
700
683
|
"name": ""
|
|
701
684
|
}
|
|
702
685
|
],
|
|
703
686
|
"members": [
|
|
704
687
|
{
|
|
705
688
|
"kind": "field",
|
|
706
|
-
"name": "
|
|
689
|
+
"name": "type",
|
|
707
690
|
"type": {
|
|
708
|
-
"text": "\"
|
|
691
|
+
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
|
|
709
692
|
},
|
|
710
|
-
"default": "\"
|
|
711
|
-
"description": "The
|
|
712
|
-
"attribute": "
|
|
693
|
+
"default": "\"neutral\"",
|
|
694
|
+
"description": "The type of badge.\nDetermines the background color of the badge.",
|
|
695
|
+
"attribute": "type",
|
|
713
696
|
"reflects": true
|
|
697
|
+
},
|
|
698
|
+
{
|
|
699
|
+
"kind": "field",
|
|
700
|
+
"name": "progress",
|
|
701
|
+
"type": {
|
|
702
|
+
"text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
|
|
703
|
+
},
|
|
704
|
+
"description": "The progress of the badge. Displays a progress\nindicator next to the label.",
|
|
705
|
+
"attribute": "progress"
|
|
714
706
|
}
|
|
715
707
|
],
|
|
716
708
|
"attributes": [
|
|
717
709
|
{
|
|
718
|
-
"name": "
|
|
710
|
+
"name": "type",
|
|
719
711
|
"type": {
|
|
720
|
-
"text": "\"
|
|
712
|
+
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
|
|
721
713
|
},
|
|
722
|
-
"default": "\"
|
|
723
|
-
"description": "The
|
|
724
|
-
"fieldName": "
|
|
714
|
+
"default": "\"neutral\"",
|
|
715
|
+
"description": "The type of badge.\nDetermines the background color of the badge.",
|
|
716
|
+
"fieldName": "type"
|
|
717
|
+
},
|
|
718
|
+
{
|
|
719
|
+
"name": "progress",
|
|
720
|
+
"type": {
|
|
721
|
+
"text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
|
|
722
|
+
},
|
|
723
|
+
"description": "The progress of the badge. Displays a progress\nindicator next to the label.",
|
|
724
|
+
"fieldName": "progress"
|
|
725
725
|
}
|
|
726
726
|
],
|
|
727
727
|
"superclass": {
|
|
@@ -730,10 +730,10 @@
|
|
|
730
730
|
},
|
|
731
731
|
"localization": [],
|
|
732
732
|
"status": "ready",
|
|
733
|
-
"category": "
|
|
734
|
-
"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- Use
|
|
733
|
+
"category": "text",
|
|
734
|
+
"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- Use established variants and color patterns so that users can clearly identify the importance level.\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name | Purpose |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `neutral` | The default style variant. |\n| `info` | Used to convey general information that isn’t critical. |\n| `success` | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful. |\n| `highlight` | Used to highlight specific items in the interface, like notifications. |\n| `danger` | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning` | Used to display information that needs a user’s attention attention and may require further steps. |\n| `progress` | Used to convey something that’s in progress. |\n",
|
|
735
735
|
"examples": [],
|
|
736
|
-
"tagName": "nord-
|
|
736
|
+
"tagName": "nord-badge",
|
|
737
737
|
"customElement": true
|
|
738
738
|
}
|
|
739
739
|
],
|
|
@@ -742,16 +742,16 @@
|
|
|
742
742
|
"kind": "js",
|
|
743
743
|
"name": "default",
|
|
744
744
|
"declaration": {
|
|
745
|
-
"name": "
|
|
746
|
-
"module": "src/
|
|
745
|
+
"name": "Badge",
|
|
746
|
+
"module": "src/badge/Badge.ts"
|
|
747
747
|
}
|
|
748
748
|
},
|
|
749
749
|
{
|
|
750
750
|
"kind": "custom-element-definition",
|
|
751
|
-
"name": "nord-
|
|
751
|
+
"name": "nord-badge",
|
|
752
752
|
"declaration": {
|
|
753
|
-
"name": "
|
|
754
|
-
"module": "src/
|
|
753
|
+
"name": "Badge",
|
|
754
|
+
"module": "src/badge/Badge.ts"
|
|
755
755
|
}
|
|
756
756
|
}
|
|
757
757
|
]
|
package/lib/Header.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as r,s as
|
|
1
|
+
import{i as e,_ as r,s as o,y as a,e as n}from"./query-assigned-elements-cf502539.js";import{S as t}from"./SlotController-d733c575.js";import{s}from"./Component-449e40fb.js";import"./EventController-d99ebeef.js";const d=e`:host{color:var(--n-color-text);--_n-header-gutter:var(--n-space-l);--_n-header-box-shadow:var(--n-box-shadow-header)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-end{display:flex;flex-flow:row wrap;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--n-space-s) var(--n-space-l);padding-inline-start:var(--_n-header-gutter);background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);min-block-size:52px}.n-header-end{margin-inline-start:auto;gap:var(--n-space-s)}`;let l=class extends o{constructor(){super(...arguments),this.endSlot=new t(this,"end")}render(){return a`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};l.styles=[s,d],l=r([n("nord-header")],l);var i=l;export{i as default};
|
|
2
2
|
//# sourceMappingURL=Header.js.map
|
package/lib/Header.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Header.css\"\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status ready\n * @category structure\n * @slot - The header content.\n * @slot end - Optional slot for buttons, toggles, etc.\n */\n@customElement(\"nord-header\")\nexport default class Header extends LitElement {\n static styles = [componentStyle, style]\n\n private endSlot = new SlotController(this, \"end\")\n\n render() {\n return html`\n <header class=\"n-header\">\n <slot></slot>\n <div class=\"n-header-end\" ?hidden=${this.endSlot.isEmpty}>\n <slot name=\"end\"></slot>\n </div>\n </header>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-header\": Header\n }\n}\n"],"names":["Header","LitElement","constructor","this","endSlot","SlotController","render","html","isEmpty","styles","componentStyle","style","__decorate","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Header.css\"\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status ready\n * @category structure\n * @slot - The header content.\n * @slot end - Optional slot for buttons, toggles, etc.\n */\n@customElement(\"nord-header\")\nexport default class Header extends LitElement {\n static styles = [componentStyle, style]\n\n private endSlot = new SlotController(this, \"end\")\n\n render() {\n return html`\n <header class=\"n-header\">\n <slot></slot>\n <div class=\"n-header-end\" ?hidden=${this.endSlot.isEmpty}>\n <slot name=\"end\"></slot>\n </div>\n </header>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-header\": Header\n }\n}\n"],"names":["Header","LitElement","constructor","this","endSlot","SlotController","render","html","isEmpty","styles","componentStyle","style","__decorate","customElement"],"mappings":"q3BAgBA,IAAqBA,EAArB,cAAoCC,EAApCC,kCAGUC,KAAOC,QAAG,IAAIC,EAAeF,KAAM,MAY5C,CAVCG,SACE,OAAOC,CAAI,4EAG6BJ,KAAKC,QAAQI,kDAKtD,GAbMR,EAAAS,OAAS,CAACC,EAAgBC,GADdX,EAAMY,EAAA,CAD1BC,EAAc,gBACMb,SAAAA"}
|
package/lib/NavItem.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as
|
|
1
|
+
import{i as n,_ as e,y as o,b as t,e as a,s as r}from"./query-assigned-elements-cf502539.js";import{e as i}from"./property-03f59dce.js";import{o as s}from"./class-map-21152cee.js";import{n as c}from"./ref-c44e9f3c.js";import{D as l}from"./DirectionController-8b298382.js";import{S as v}from"./SlotController-d733c575.js";import{c as d}from"./cond-2da54107.js";import{N as p}from"./events-5337a6d7.js";import{F as h}from"./FocusableMixin-32631bff.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const m=n`: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([open]) .n-nav-item{background:var(--n-color-nav-hover);color:var(--n-color-text)}: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 f=class extends(h(r)){constructor(){super(...arguments),this.subnavSlot=new v(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}get hasSubNav(){return this.subnavSlot.hasContent}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const n=o`${this.icon?o`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:t}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:t}</div>`;let e;return e=this.subnavSlot.hasContent?this.renderToggle(n):this.href?this.renderLink(n):this.renderButton(n),o`<div role="listitem">${e}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(n){return o`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${d(this.active,"page")}" href="${this.href||""}">${n}</a>`}renderToggle(n){return o`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${n}<nord-icon size="xxs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(n){return o`<button class="n-nav-item" ${c(this.focusableRef)}>${n}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};f.styles=m,e([i({type:Boolean,reflect:!0})],f.prototype,"active",void 0),e([i()],f.prototype,"icon",void 0),e([i()],f.prototype,"href",void 0),e([i()],f.prototype,"badge",void 0),e([i({type:Boolean})],f.prototype,"open",void 0),f=e([a("nord-nav-item")],f);var b=f;export{b 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 /**\n * @internal\n */\n get hasSubNav() {\n return this.subnavSlot.hasContent\n }\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","hasSubNav","hasContent","connectedCallback","super","querySelector","render","innards","html","icon","nothing","badge","element","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","styles","style","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"
|
|
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 /**\n * @internal\n */\n get hasSubNav() {\n return this.subnavSlot.hasContent\n }\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","hasSubNav","hasContent","connectedCallback","super","querySelector","render","innards","html","icon","nothing","badge","element","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","styles","style","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"+kGAuBA,IAAqBA,EAArB,cAAqCC,EAAeC,IAApDC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBxBL,KAAIM,MAAG,CAgFrC,CA3EKC,gBACF,OAAOP,KAAKC,WAAWO,UACxB,CAEDC,oBACEC,MAAMD,oBAIFT,KAAKW,cAAc,2BACrBX,KAAKM,MAAO,EAEf,CAEDM,SACE,MAAMC,EAAUC,CAAI,GAChBd,KAAKe,KAAOD,CAAI,uCAAsCd,KAAKe,8BAA+BC,6EAGxFhB,KAAKiB,MAAQH,CAAI,6BAA6Bd,KAAKiB,eAAiBD,UAG1E,IAAIE,EAUJ,OAPEA,EADElB,KAAKC,WAAWO,WACRR,KAAKmB,aAAaN,GACnBb,KAAKoB,KACJpB,KAAKqB,WAAWR,GAEhBb,KAAKsB,aAAaT,GAGvBC,CAAI,wBAELI,gBACWlB,KAAKC,WAAWsB,uBAAqBvB,KAAKM,qBAG5D,CAEOe,WAAWR,GACjB,OAAOC,CAAI,yBACeU,EAAIxB,KAAKyB,+BAA8BC,EAAK1B,KAAKK,OAAQ,kBAAgBL,KAAKoB,MAAQ,OAC1GP,OAGP,CAEOM,aAAaN,GACnB,OAAOC,CAAI,sCAGEd,KAAK2B,8BACE3B,KAAKM,KAAO,OAAS,YACnCkB,EAAIxB,KAAKyB,iBAETZ,iCAIQe,EAAS,CAAE,iBAAiB,EAAM,QAAS5B,KAAKG,UAAU0B,gEAKzE,CAEOP,aAAaT,GACnB,OAAOC,CAAI,8BAA8BU,EAAIxB,KAAKyB,iBAAiBZ,YACpE,CAEOc,aACN3B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK8B,cAAc,IAAIC,EAAU,UAClC,GA9GMnC,EAAMoC,OAAGC,EAS4BC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsB1C,EAAA2C,UAAA,cAAA,GAK9CL,EAAA,CAAXC,KAAwBvC,EAAA2C,UAAA,YAAA,GAMbL,EAAA,CAAXC,KAAwBvC,EAAA2C,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAAyBvC,EAAA2C,UAAA,aAAA,GAMGL,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAuBzC,EAAA2C,UAAA,YAAA,GAhCtB3C,EAAOsC,EAAA,CAD3BM,EAAc,kBACM5C,SAAAA"}
|