@nysds/nys-breadcrumbs 1.19.3 → 1.20.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/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./nys-breadcrumbs";
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
import { NysElement } from "@nysds/internals";
|
|
2
|
+
import "@nysds/nys-icon";
|
|
3
|
+
/**
|
|
4
|
+
* A breadcrumb navigation trail composed of `li` elements.
|
|
5
|
+
* Collapses when the trail exceeds 5 items on desktop or 3 items on mobile,
|
|
6
|
+
* showing the first, last, and item before the current page, with an ellipsis to expand.
|
|
7
|
+
* A single item renders as a back-to-parent link instead of a trail.
|
|
8
|
+
*
|
|
9
|
+
* @summary Breadcrumb navigation trail with responsive collapse support.
|
|
10
|
+
* @element nys-breadcrumbs
|
|
11
|
+
*
|
|
12
|
+
* @slot - One or more `li` elements defining the trail.
|
|
13
|
+
*
|
|
14
|
+
* @fires nys-breadcrumbs-expand - Fired when the user clicks the ellipsis to expand the trail.
|
|
15
|
+
*
|
|
16
|
+
* @example Basic
|
|
17
|
+
* ```html
|
|
18
|
+
* <nys-breadcrumbs>
|
|
19
|
+
* <ol>
|
|
20
|
+
* <li><a href="/">Home</a></li>
|
|
21
|
+
* <li><a href="/services">Services</a></li>
|
|
22
|
+
* </ol>
|
|
23
|
+
* </nys-breadcrumbs>
|
|
24
|
+
* ```
|
|
25
|
+
*
|
|
26
|
+
* @example Current page
|
|
27
|
+
* ```html
|
|
28
|
+
* <nys-breadcrumbs>
|
|
29
|
+
* <ol>
|
|
30
|
+
* <li><a href="/">Home</a></li>
|
|
31
|
+
* <li><a href="/services">Services</a></li>
|
|
32
|
+
* <li>Current Page</li>
|
|
33
|
+
* </ol>
|
|
34
|
+
* </nys-breadcrumbs>
|
|
35
|
+
* ```
|
|
36
|
+
*
|
|
37
|
+
* @example Single item list
|
|
38
|
+
* ```html
|
|
39
|
+
* <nys-breadcrumbs>
|
|
40
|
+
* <ol>
|
|
41
|
+
* <li><a href="/services">Services</a></li>
|
|
42
|
+
* </ol>
|
|
43
|
+
* </nys-breadcrumbs>
|
|
44
|
+
* ```
|
|
45
|
+
*
|
|
46
|
+
* @example Long list
|
|
47
|
+
* ```html
|
|
48
|
+
* <nys-breadcrumbs>
|
|
49
|
+
* <ol>
|
|
50
|
+
* <li><a href="/">Home</a></li>
|
|
51
|
+
* <li><a href="/government">Government</a></li>
|
|
52
|
+
* <li><a href="/government/agencies">Agencies</a></li>
|
|
53
|
+
* <li><a href="/government/agencies/parks">Parks & Recreation</a></li>
|
|
54
|
+
* <li><a href="/parks/state-parks">State Parks</a></li>
|
|
55
|
+
* <li><a href="/parks/state-parks/delaware">Delaware Region</a></li>
|
|
56
|
+
* <li><a href="/parks/state-parks/delaware/water-gap">Delaware Water Gap</a></li>
|
|
57
|
+
* <li>Trail Conditions</li>
|
|
58
|
+
* </ol>
|
|
59
|
+
* </nys-breadcrumbs>
|
|
60
|
+
* ```
|
|
61
|
+
*
|
|
62
|
+
* @example Size small
|
|
63
|
+
* ```html
|
|
64
|
+
* <nys-breadcrumbs size="sm">
|
|
65
|
+
* <ol>
|
|
66
|
+
* <li><a href="/">Home</a></li>
|
|
67
|
+
* <li><a href="/government">Government</a></li>
|
|
68
|
+
* <li><a href="/government/agencies">Agencies</a></li>
|
|
69
|
+
* <li>Parks & Recreation</li>
|
|
70
|
+
* </ol>
|
|
71
|
+
* </nys-breadcrumbs>
|
|
72
|
+
* ```
|
|
73
|
+
*
|
|
74
|
+
* @example Back to parent (mobile)
|
|
75
|
+
* ```html
|
|
76
|
+
* <nys-breadcrumbs backToParent>
|
|
77
|
+
* <ol>
|
|
78
|
+
* <li><a href="/">Home</a></li>
|
|
79
|
+
* <li><a href="/government">Government</a></li>
|
|
80
|
+
* <li><a href="/government/agencies">Agencies</a></li>
|
|
81
|
+
* <li><a href="/government/agencies/parks">Parks & Recreation</a></li>
|
|
82
|
+
* <li><a href="/parks/state-parks">State Parks</a></li>
|
|
83
|
+
* <li><a href="/parks/state-parks/delaware">Delaware Region</a></li>
|
|
84
|
+
* <li><a href="/parks/state-parks/delaware/water-gap">Delaware Water Gap</a></li>
|
|
85
|
+
* <li>Trail Conditions</li>
|
|
86
|
+
* </ol>
|
|
87
|
+
* </nys-breadcrumbs>
|
|
88
|
+
* ```
|
|
89
|
+
*
|
|
90
|
+
* @example Background bar
|
|
91
|
+
* ```html
|
|
92
|
+
* <nys-breadcrumbs backgroundBar>
|
|
93
|
+
* <ol>
|
|
94
|
+
* <li><a href="/">Home</a></li>
|
|
95
|
+
* <li><a href="/services">Services</a></li>
|
|
96
|
+
* <li><a href="/tickets">Ticket System</a></li>
|
|
97
|
+
* <li>Del Water Gap</li>
|
|
98
|
+
* </ol>
|
|
99
|
+
* </nys-breadcrumbs>
|
|
100
|
+
* ```
|
|
101
|
+
*
|
|
102
|
+
* @example Disabled
|
|
103
|
+
* ```html
|
|
104
|
+
* <nys-breadcrumbs disabled>
|
|
105
|
+
* <ol>
|
|
106
|
+
* <li><a href="/">Home</a></li>
|
|
107
|
+
* <li><a href="/services">Services</a></li>
|
|
108
|
+
* <li><a href="/tickets">Ticket System</a></li>
|
|
109
|
+
* <li>Del Water Gap</li>
|
|
110
|
+
* </ol>
|
|
111
|
+
* </nys-breadcrumbs>
|
|
112
|
+
* ```
|
|
113
|
+
*/
|
|
114
|
+
export declare class NysBreadcrumbs extends NysElement {
|
|
115
|
+
static styles: import("lit").CSSResult;
|
|
116
|
+
/**
|
|
117
|
+
* Unique identifier. Auto-generated if not provided.
|
|
118
|
+
*/
|
|
119
|
+
id: string;
|
|
120
|
+
/**
|
|
121
|
+
* Accessible label for the `<nav>` landmark. Defaults to "Breadcrumb" if not set.
|
|
122
|
+
* Override when multiple crumbs exist on the same page.
|
|
123
|
+
*/
|
|
124
|
+
ariaLabel: string;
|
|
125
|
+
/**
|
|
126
|
+
* Controls the visual size of the breadcrumb text and spacing: `sm` for dense layouts, `md` (default) for standard use.
|
|
127
|
+
* @default "md"
|
|
128
|
+
*/
|
|
129
|
+
size: "sm" | "md";
|
|
130
|
+
/**
|
|
131
|
+
* On mobile, renders the trail as a single back-to-parent link pointing to the item before the current page.
|
|
132
|
+
* Has no effect on desktop or when only one item is present (which always renders as a back link).
|
|
133
|
+
* @default false
|
|
134
|
+
*/
|
|
135
|
+
backToParent: boolean;
|
|
136
|
+
/**
|
|
137
|
+
* Forces the trail into its collapsed state.
|
|
138
|
+
* It shows only the first item, an ellipsis, and the last two items.
|
|
139
|
+
* The user can still expand the trail by clicking the ellipsis.
|
|
140
|
+
* @default false
|
|
141
|
+
*/
|
|
142
|
+
collapsed: boolean;
|
|
143
|
+
/**
|
|
144
|
+
* Renders a filled light theme background bar behind the breadcrumb trail.
|
|
145
|
+
* @default false
|
|
146
|
+
*/
|
|
147
|
+
backgroundBar: boolean;
|
|
148
|
+
/**
|
|
149
|
+
* Prevents interaction.
|
|
150
|
+
* @default false
|
|
151
|
+
*/
|
|
152
|
+
disabled: boolean;
|
|
153
|
+
private _collapseThreshold;
|
|
154
|
+
private _manuallyExpanded;
|
|
155
|
+
private _mediaQuery;
|
|
156
|
+
/**
|
|
157
|
+
* Lifecycle methods
|
|
158
|
+
* --------------------------------------------------------------------------
|
|
159
|
+
*/
|
|
160
|
+
constructor();
|
|
161
|
+
connectedCallback(): void;
|
|
162
|
+
disconnectedCallback(): void;
|
|
163
|
+
firstUpdated(): void;
|
|
164
|
+
updated(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
165
|
+
/**
|
|
166
|
+
* Functions
|
|
167
|
+
* --------------------------------------------------------------------------
|
|
168
|
+
*/
|
|
169
|
+
private _updateCollapseThreshold;
|
|
170
|
+
private _getSlottedOl;
|
|
171
|
+
private _getSlottedItems;
|
|
172
|
+
private _getAnchor;
|
|
173
|
+
private _isCurrentPage;
|
|
174
|
+
private _createBackToParentElement;
|
|
175
|
+
private _createCrumbElement;
|
|
176
|
+
/**
|
|
177
|
+
* Main logic for cloning and handling user slots.
|
|
178
|
+
* New <ol>, <li>, and <a> tags are created and rendered out as crumbs for the breadcrumbs trail.
|
|
179
|
+
*/
|
|
180
|
+
private _handleSlotChange;
|
|
181
|
+
private _moveFocusToFirstExpandCrumb;
|
|
182
|
+
/**
|
|
183
|
+
* Event Handlers
|
|
184
|
+
* --------------------------------------------------------------------------
|
|
185
|
+
*/
|
|
186
|
+
private _dispatchExpandEvent;
|
|
187
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
188
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/nys-breadcrumbs.js
CHANGED
|
@@ -1,23 +1,46 @@
|
|
|
1
|
-
import { LitElement as T, unsafeCSS as S, html as
|
|
1
|
+
import { LitElement as T, unsafeCSS as S, html as P } from "lit";
|
|
2
2
|
import { property as d } from "lit/decorators.js";
|
|
3
|
+
import "@nysds/nys-icon";
|
|
3
4
|
/*!
|
|
4
5
|
* █▄ █ █ █ █▀▀▀█ █▀▀▄ █▀▀▀█
|
|
5
6
|
* █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
|
|
6
7
|
* █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
|
|
7
8
|
*
|
|
8
|
-
* Breadcrumbs Component v1.
|
|
9
|
+
* Breadcrumbs Component v1.20.0
|
|
9
10
|
* Part of the New York State Design System
|
|
10
11
|
* Repository: https://github.com/its-hcd/nysds
|
|
11
12
|
* License: MIT
|
|
12
13
|
*/
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
/*!
|
|
15
|
+
* New York State Design System v1.20.0
|
|
16
|
+
* Description: A design system for New York State's digital products.
|
|
17
|
+
* Repository: https://github.com/its-hcd/nysds
|
|
18
|
+
* License: MIT
|
|
19
|
+
*/
|
|
20
|
+
let L = 0;
|
|
21
|
+
function B(b) {
|
|
22
|
+
return `${b}-${Date.now()}-${L++}`;
|
|
23
|
+
}
|
|
24
|
+
const z = (b) => {
|
|
25
|
+
class e extends b {
|
|
26
|
+
get idPrefix() {
|
|
27
|
+
return this.localName || "nys-element";
|
|
28
|
+
}
|
|
29
|
+
ensureId() {
|
|
30
|
+
this.id || (this.id = B(this.idPrefix));
|
|
31
|
+
}
|
|
32
|
+
connectedCallback() {
|
|
33
|
+
super.connectedCallback(), this.ensureId();
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
return e;
|
|
37
|
+
}, I = /* @__PURE__ */ z(T), M = '@charset "UTF-8";:host{--_nys-breadcrumbs-padding: var(--nys-space-150, 12px) var(--nys-space-250, 20px);--_nys-breadcrumbs-gap: var(--nys-space-100, 8px);--_nys-breadcrumbs-background: transparent;--_nys-breadcrumbitem-gap: var(--nys-space-50, 4px);--_nys-breadcrumbitem-color: var(--nys-color-text-weak, #4a4d4f);--_nys-breadcrumbitem-color--focus: var(--nys-color-focus, #004dd1);--_nys-breadcrumbitem-outline-width: var(--nys-border-width-md, 2px);--_nys-breadcrumbitem-outline-radius: var(--nys-radius-md, 4px);--_nys-breadcrumb-gap--ellipsis: var(--nys-space-100, 8px);--_nys-breadcrumb-color--ellipsis: var(--nys-color-text-weak, #4a4d4f);--_nys-breadcrumbs-font-size: var(--nys-font-size-ui-md, 16px);--_nys-breadcrumbs-font-weight: var(--nys-font-weight-semibold, 600);--_nys-breadcrumbs-font-weight--current: var(--nys-font-weight-regular, 400);--_nys-breadcrumbs-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-breadcrumbs-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-breadcrumbs-max-width--content: var( --nys-breadcrumbs-max-width--content, 1280px )}.nys-breadcrumbs{padding:var(--_nys-breadcrumbs-padding);font-family:var(--_nys-breadcrumbs-font-family);font-size:var(--_nys-breadcrumbs-font-size);font-weight:var(--_nys-breadcrumbs-font-weight);line-height:var(--_nys-breadcrumbs-line-height);background:var(--_nys-breadcrumbs-background);display:flex;justify-content:center}.nys-breadcrumbs.nys-breadcrumbs--background-bar{--_nys-breadcrumbs-background: var(--nys-color-theme-faint, #f7fafd)}.nys-breadcrumbs ol{padding:0;margin:0;display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:var(--_nys-breadcrumbs-gap);list-style:none;max-width:var(--_nys-breadcrumbs-max-width--content);width:100%}:host([size=sm]){--_nys-breadcrumbs-font-size: var(--nys-font-size-ui-sm, 14px)}:host([disabled]) .nys-breadcrumbitem a{cursor:not-allowed;--_nys-breadcrumbitem-color: var(--nys-color-text-disabled, #cec0c1)}:host([disabled]) .nys-breadcrumbitem a:hover{text-decoration:none}:host([disabled]) .nys-breadcrumbs__ellipsis .ellipsis-btn{cursor:not-allowed;opacity:.4;pointer-events:none}:host([disabled]) .nys-breadcrumbs__ellipsis .ellipsis-btn:hover{text-decoration:none}:host([disabled]) nys-icon{color:var(--nys-color-text-disabled, #cec0c1)}.nys-breadcrumbitem{padding:0;display:flex;align-items:center;gap:var(--_nys-breadcrumbitem-gap);color:var(--_nys-breadcrumbitem-color);font-weight:var(--_nys-breadcrumbs-font-weight--current);white-space:nowrap}.nys-breadcrumbitem.hide{display:none}.nys-breadcrumbitem a{text-decoration:none;color:var(--_nys-breadcrumbitem-color);font-weight:var(--_nys-breadcrumbs-font-weight)}.nys-breadcrumbitem a:hover{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:14%;text-underline-offset:auto}.nys-breadcrumbitem a:active{text-decoration-thickness:14%;--_nys-breadcrumbitem-color: var(--nys-color-text)}.nys-breadcrumbitem a:focus-visible{border-radius:var(--_nys-breadcrumbitem-outline-radius);outline:var(--_nys-breadcrumbitem-outline-width) solid var(--_nys-breadcrumbitem-color--focus);outline-offset:2px}.nys-breadcrumbs__ellipsis{display:flex;gap:var(--_nys-breadcrumb-gap--ellipsis);margin:0;align-items:center;color:var(--_nys-breadcrumb-color--ellipsis)}.nys-breadcrumbs__ellipsis .ellipsis-btn{border:none;padding:0;background-color:inherit;text-decoration:none;font-family:var(--_nys-breadcrumbs-font-family);font-size:var(--_nys-breadcrumbs-font-size);font-weight:var(--_nys-breadcrumbs-font-weight);line-height:var(--_nys-breadcrumbs-line-height);color:var(--_nys-breadcrumb-color--ellipsis);cursor:pointer}.nys-breadcrumbs__ellipsis .ellipsis-btn:hover{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:auto}.nys-breadcrumbs__ellipsis .ellipsis-btn:active{text-decoration-thickness:14%}.nys-breadcrumbs__ellipsis .ellipsis-btn:focus-visible{border-radius:var(--_nys-breadcrumbitem-outline-radius);outline:var(--_nys-breadcrumbitem-outline-width) solid var(--_nys-breadcrumbitem-color--focus);outline-offset:2px}.nys-breadcrumbs__ellipsis nys-icon{margin-top:-3px}:host-context([dir=rtl]) nys-icon{transform:scaleX(-1)}@media(min-width:480px){:host{--_nys-breadcrumbs-padding: var(--nys-space-150, 12px) var(--nys-space-250, 20px)}}@media(min-width:768px){:host{--_nys-breadcrumbs-padding: var(--nys-space-150, 12px) var(--nys-space-400, 32px)}}@media(min-width:1024px){:host{--_nys-breadcrumbs-padding: var(--nys-space-150, 12px) var(--nys-space-400, 32px)}}@media(min-width:1280px){:host{--_nys-breadcrumbs-padding: var(--nys-space-150, 12px) var(--nys-space-800, 64px)}}';
|
|
38
|
+
var Q = Object.defineProperty, c = (b, e, s, t) => {
|
|
39
|
+
for (var r = void 0, a = b.length - 1, n; a >= 0; a--)
|
|
40
|
+
(n = b[a]) && (r = n(e, s, r) || r);
|
|
41
|
+
return r && Q(e, s, r), r;
|
|
18
42
|
};
|
|
19
|
-
|
|
20
|
-
const v = class v extends T {
|
|
43
|
+
const x = class x extends I {
|
|
21
44
|
/**
|
|
22
45
|
* Lifecycle methods
|
|
23
46
|
* --------------------------------------------------------------------------
|
|
@@ -28,9 +51,8 @@ const v = class v extends T {
|
|
|
28
51
|
s !== this._collapseThreshold && (this._collapseThreshold = s, this._manuallyExpanded = !1, this._handleSlotChange());
|
|
29
52
|
};
|
|
30
53
|
}
|
|
31
|
-
// Generate a unique ID if one is not provided
|
|
32
54
|
connectedCallback() {
|
|
33
|
-
super.connectedCallback(), this.
|
|
55
|
+
super.connectedCallback(), this._mediaQuery = window.matchMedia("(max-width: 767px)"), this._mediaQuery.addEventListener("change", this._updateCollapseThreshold);
|
|
34
56
|
}
|
|
35
57
|
disconnectedCallback() {
|
|
36
58
|
super.disconnectedCallback(), this._mediaQuery?.removeEventListener(
|
|
@@ -72,11 +94,11 @@ const v = class v extends T {
|
|
|
72
94
|
_createCrumbElement(e, s) {
|
|
73
95
|
const t = this._getAnchor(e), r = t?.getAttribute("href") ?? "", a = t?.textContent?.trim() ?? e.textContent?.trim() ?? "", n = document.createElement("li");
|
|
74
96
|
if (n.className = "nys-breadcrumbitem", s)
|
|
75
|
-
return n.
|
|
97
|
+
return n.setAttribute("aria-current", "page"), n.textContent = a, n;
|
|
76
98
|
const i = document.createElement("a");
|
|
77
99
|
this.disabled || (i.href = r), i.textContent = a, this.disabled && i.setAttribute("aria-disabled", "true");
|
|
78
|
-
const
|
|
79
|
-
return
|
|
100
|
+
const m = document.createElement("nys-icon");
|
|
101
|
+
return m.setAttribute("name", "chevron_right"), m.setAttribute("size", "14"), n.appendChild(i), n.appendChild(m), n;
|
|
80
102
|
}
|
|
81
103
|
/**
|
|
82
104
|
* Main logic for cloning and handling user slots.
|
|
@@ -88,38 +110,38 @@ const v = class v extends T {
|
|
|
88
110
|
const t = this._getSlottedItems();
|
|
89
111
|
if (t.length === 0) return;
|
|
90
112
|
s.innerHTML = "";
|
|
91
|
-
const r = (
|
|
92
|
-
const
|
|
93
|
-
s.appendChild(
|
|
113
|
+
const r = (u = 0) => {
|
|
114
|
+
const h = t[u].cloneNode(!0), g = this._createBackToParentElement(h);
|
|
115
|
+
s.appendChild(g);
|
|
94
116
|
};
|
|
95
117
|
if (t.length === 1) {
|
|
96
118
|
r();
|
|
97
119
|
return;
|
|
98
120
|
}
|
|
99
121
|
if (e && this.backToParent) {
|
|
100
|
-
const
|
|
101
|
-
r(
|
|
122
|
+
const u = this._isCurrentPage(t[t.length - 1]);
|
|
123
|
+
r(u ? t.length - 2 : t.length - 1);
|
|
102
124
|
return;
|
|
103
125
|
}
|
|
104
|
-
const a = !this._manuallyExpanded && t.length > this._collapseThreshold, n = this.collapsed || a, i = t[t.length - 1],
|
|
105
|
-
|
|
106
|
-
t.length -
|
|
126
|
+
const a = !this._manuallyExpanded && t.length > this._collapseThreshold, n = this.collapsed || a, i = t[t.length - 1], m = this._isCurrentPage(i), _ = Math.min(1, t.length - 1), k = Math.min(
|
|
127
|
+
m ? 2 : 1,
|
|
128
|
+
t.length - _
|
|
107
129
|
);
|
|
108
|
-
t.forEach((
|
|
109
|
-
const
|
|
110
|
-
if (
|
|
111
|
-
const
|
|
112
|
-
|
|
130
|
+
t.forEach((u, h) => {
|
|
131
|
+
const g = h < _, E = h >= t.length - k, C = g || E, A = n && !C, p = this._createCrumbElement(u, this._isCurrentPage(u));
|
|
132
|
+
if (p.setAttribute("data-cloned", "true"), A && p.classList.add("hide"), C || p.classList.add("intermediate"), s.appendChild(p), h === _ - 1 && n && t.length > 2) {
|
|
133
|
+
const y = document.createElement("li");
|
|
134
|
+
y.classList.add("nys-breadcrumbs__ellipsis");
|
|
113
135
|
const l = document.createElement("a");
|
|
114
136
|
l.classList.add("ellipsis-btn"), l.setAttribute("aria-label", "Show more links"), l.setAttribute("role", "button"), l.setAttribute("href", "#"), l.textContent = "…";
|
|
115
|
-
const w = (
|
|
116
|
-
|
|
137
|
+
const w = (f) => {
|
|
138
|
+
f.preventDefault(), this._manuallyExpanded = !0, this.collapsed = !1, this._handleSlotChange(), this._dispatchExpandEvent(), this._moveFocusToFirstExpandCrumb();
|
|
117
139
|
};
|
|
118
|
-
l.addEventListener("click", w), l.addEventListener("keydown", (
|
|
119
|
-
|
|
140
|
+
l.addEventListener("click", w), l.addEventListener("keydown", (f) => {
|
|
141
|
+
f.key === " " && w(f);
|
|
120
142
|
});
|
|
121
|
-
const
|
|
122
|
-
|
|
143
|
+
const v = document.createElement("nys-icon");
|
|
144
|
+
v.setAttribute("name", "chevron_right"), v.setAttribute("size", "14"), y.appendChild(l), y.appendChild(v), s.appendChild(y);
|
|
123
145
|
}
|
|
124
146
|
});
|
|
125
147
|
}
|
|
@@ -142,17 +164,17 @@ const v = class v extends T {
|
|
|
142
164
|
);
|
|
143
165
|
}
|
|
144
166
|
render() {
|
|
145
|
-
return
|
|
167
|
+
return P`<nav
|
|
146
168
|
class="nys-breadcrumbs ${this.backgroundBar ? "nys-breadcrumbs--background-bar" : ""}"
|
|
147
|
-
aria-label=${this.ariaLabel || "
|
|
169
|
+
aria-label=${this.ariaLabel || "Breadcrumb"}
|
|
148
170
|
>
|
|
149
171
|
<ol id="crumb-list"></ol>
|
|
150
172
|
<slot style="display: none;" @slotchange=${this._handleSlotChange}></slot>
|
|
151
173
|
</nav>`;
|
|
152
174
|
}
|
|
153
175
|
};
|
|
154
|
-
|
|
155
|
-
let o =
|
|
176
|
+
x.styles = S(M);
|
|
177
|
+
let o = x;
|
|
156
178
|
c([
|
|
157
179
|
d({ type: String, reflect: !0 })
|
|
158
180
|
], o.prototype, "id");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nys-breadcrumbs.js","sources":["../src/nys-breadcrumbs.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-breadcrumbs.scss?inline\";\n\nlet componentIdCounter = 0;\n\n/**\n * A breadcrumb navigation trail composed of `li` elements.\n * Collapses when the trail exceeds 5 items on desktop or 3 items on mobile,\n * showing the first, last, and item before the current page, with an ellipsis to expand.\n * A single item renders as a back-to-parent link instead of a trail.\n *\n * @summary Breadcrumb navigation trail with responsive collapse support.\n * @element nys-breadcrumbs\n *\n * @slot - One or more `li` elements defining the trail.\n *\n * @fires nys-breadcrumbs-expand - Fired when the user clicks the ellipsis to expand the trail.\n *\n * @example Basic\n * ```html\n * <nys-breadcrumbs>\n * <ol>\n * <li><a href=\"/\">Home</a></li>\n * <li><a href=\"/services\">Services</a></li>\n * </ol>\n * </nys-breadcrumbs>\n * ```\n *\n * @example Current page\n * ```html\n * <nys-breadcrumbs>\n * <ol>\n * <li><a href=\"/\">Home</a></li>\n * <li><a href=\"/services\">Services</a></li>\n * <li>Current Page</li>\n * </ol>\n * </nys-breadcrumbs>\n * ```\n *\n * @example Single item list\n * ```html\n * <nys-breadcrumbs>\n * <ol>\n * <li><a href=\"/services\">Services</a></li>\n * </ol>\n * </nys-breadcrumbs>\n * ```\n *\n * @example Long list\n * ```html\n * <nys-breadcrumbs>\n * <ol>\n * <li><a href=\"/\">Home</a></li>\n * <li><a href=\"/government\">Government</a></li>\n * <li><a href=\"/government/agencies\">Agencies</a></li>\n * <li><a href=\"/government/agencies/parks\">Parks & Recreation</a></li>\n * <li><a href=\"/parks/state-parks\">State Parks</a></li>\n * <li><a href=\"/parks/state-parks/delaware\">Delaware Region</a></li>\n * <li><a href=\"/parks/state-parks/delaware/water-gap\">Delaware Water Gap</a></li>\n * <li>Trail Conditions</li>\n * </ol>\n * </nys-breadcrumbs>\n * ```\n *\n * @example Size small\n * ```html\n * <nys-breadcrumbs size=\"sm\">\n * <ol>\n * <li><a href=\"/\">Home</a></li>\n * <li><a href=\"/government\">Government</a></li>\n * <li><a href=\"/government/agencies\">Agencies</a></li>\n * <li>Parks & Recreation</li>\n * </ol>\n * </nys-breadcrumbs>\n * ```\n *\n * @example Back to parent (mobile)\n * ```html\n * <nys-breadcrumbs backToParent>\n * <ol>\n * <li><a href=\"/\">Home</a></li>\n * <li><a href=\"/government\">Government</a></li>\n * <li><a href=\"/government/agencies\">Agencies</a></li>\n * <li><a href=\"/government/agencies/parks\">Parks & Recreation</a></li>\n * <li><a href=\"/parks/state-parks\">State Parks</a></li>\n * <li><a href=\"/parks/state-parks/delaware\">Delaware Region</a></li>\n * <li><a href=\"/parks/state-parks/delaware/water-gap\">Delaware Water Gap</a></li>\n * <li>Trail Conditions</li>\n * </ol>\n * </nys-breadcrumbs>\n * ```\n *\n * @example Background bar\n * ```html\n * <nys-breadcrumbs backgroundBar>\n * <ol>\n * <li><a href=\"/\">Home</a></li>\n * <li><a href=\"/services\">Services</a></li>\n * <li><a href=\"/tickets\">Ticket System</a></li>\n * <li>Del Water Gap</li>\n * </ol>\n * </nys-breadcrumbs>\n * ```\n *\n * @example Disabled\n * ```html\n * <nys-breadcrumbs disabled>\n * <ol>\n * <li><a href=\"/\">Home</a></li>\n * <li><a href=\"/services\">Services</a></li>\n * <li><a href=\"/tickets\">Ticket System</a></li>\n * <li>Del Water Gap</li>\n * </ol>\n * </nys-breadcrumbs>\n * ```\n */\n\nexport class NysBreadcrumbs extends LitElement {\n static styles = unsafeCSS(styles);\n\n /**\n * Unique identifier. Auto-generated if not provided.\n */\n @property({ type: String, reflect: true }) id = \"\";\n\n /**\n * Accessible label for the `<nav>` landmark. Defaults to \"path to this page\" if not set.\n * Override when multiple crumbs exist on the same page.\n */\n @property({ type: String }) ariaLabel = \"\";\n\n /**\n * Controls the visual size of the breadcrumb text and spacing: `sm` for dense layouts, `md` (default) for standard use.\n * @default \"md\"\n */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n /**\n * On mobile, renders the trail as a single back-to-parent link pointing to the item before the current page.\n * Has no effect on desktop or when only one item is present (which always renders as a back link).\n * @default false\n */\n @property({ type: Boolean }) backToParent = false;\n\n /**\n * Forces the trail into its collapsed state.\n * It shows only the first item, an ellipsis, and the last two items.\n * The user can still expand the trail by clicking the ellipsis.\n * @default false\n */\n @property({ type: Boolean }) collapsed = false;\n\n /**\n * Renders a filled light theme background bar behind the breadcrumb trail.\n * @default false\n */\n @property({ type: Boolean }) backgroundBar = false;\n\n /**\n * Prevents interaction.\n * @default false\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n private _collapseThreshold = 5; // default for desktop\n private _manuallyExpanded = false;\n private _mediaQuery: MediaQueryList | null = null;\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n\n constructor() {\n super();\n }\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-breadcrumbs-${Date.now()}-${componentIdCounter++}`;\n }\n\n this._mediaQuery = window.matchMedia(\"(max-width: 767px)\");\n this._mediaQuery.addEventListener(\"change\", this._updateCollapseThreshold);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._mediaQuery?.removeEventListener(\n \"change\",\n this._updateCollapseThreshold,\n );\n this._mediaQuery = null;\n }\n\n firstUpdated() {\n this._handleSlotChange();\n }\n\n updated(changedProperties: Map<string | number | symbol, unknown>) {\n if (\n changedProperties.has(\"collapsed\") ||\n changedProperties.has(\"backToParent\") ||\n changedProperties.has(\"disabled\")\n ) {\n this._handleSlotChange();\n }\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n private _updateCollapseThreshold = () => {\n const isMobile = this._mediaQuery?.matches ?? window.innerWidth < 768; // NYSDS sets anything below 768px as mobile. Desktop and Tablet is above 768px.\n const newThreshold = isMobile ? 3 : 5;\n\n if (newThreshold !== this._collapseThreshold) {\n this._collapseThreshold = newThreshold;\n this._manuallyExpanded = false;\n this._handleSlotChange();\n }\n };\n\n private _getSlottedOl(): HTMLOListElement | null {\n const slot = this.shadowRoot?.querySelector(\n \"slot\",\n ) as HTMLSlotElement | null;\n const assigned = slot?.assignedElements({ flatten: true }) ?? [];\n return (\n (assigned.find((el) => el.tagName === \"OL\") as HTMLOListElement) ?? null\n );\n }\n\n private _getSlottedItems(): HTMLLIElement[] {\n const ol = this._getSlottedOl();\n if (!ol) return [];\n return Array.from(ol.children).filter(\n (el) => el.tagName === \"LI\",\n ) as HTMLLIElement[];\n }\n\n private _getAnchor(li: HTMLLIElement): HTMLAnchorElement | null {\n return li.querySelector(\"a\");\n }\n\n private _isCurrentPage(li: HTMLLIElement): boolean {\n const a = this._getAnchor(li);\n if (!a) return true;\n return false;\n }\n\n private _createBackToParentElement(li: HTMLLIElement) {\n const anchor = this._getAnchor(li);\n const link = anchor?.getAttribute(\"href\") ?? \"\";\n const label = anchor?.textContent?.trim() ?? li.textContent?.trim() ?? \"\";\n\n const liEL = document.createElement(\"li\");\n liEL.className = \"nys-breadcrumbitem\";\n\n const icon = document.createElement(\"nys-icon\");\n icon.setAttribute(\"name\", \"arrow_back\");\n icon.setAttribute(\"size\", \"16\");\n\n const a = document.createElement(\"a\");\n if (!this.disabled) {\n a.href = link;\n }\n a.textContent = label;\n if (this.disabled) {\n a.setAttribute(\"aria-disabled\", \"true\");\n }\n\n liEL.appendChild(icon);\n liEL.appendChild(a);\n\n return liEL;\n }\n\n private _createCrumbElement(li: HTMLLIElement, isCurrentPage: boolean) {\n const anchor = this._getAnchor(li);\n const link = anchor?.getAttribute(\"href\") ?? \"\";\n const label = anchor?.textContent?.trim() ?? li.textContent?.trim() ?? \"\";\n\n const liEl = document.createElement(\"li\");\n liEl.className = \"nys-breadcrumbitem\";\n\n if (isCurrentPage) {\n liEl.textContent = label;\n liEl.setAttribute(\"aria-current\", \"page\");\n return liEl;\n }\n\n const a = document.createElement(\"a\");\n if (!this.disabled) {\n a.href = link;\n }\n a.textContent = label;\n if (this.disabled) {\n a.setAttribute(\"aria-disabled\", \"true\");\n }\n\n const icon = document.createElement(\"nys-icon\");\n icon.setAttribute(\"name\", \"chevron_right\");\n icon.setAttribute(\"size\", \"14\");\n\n liEl.appendChild(a);\n liEl.appendChild(icon);\n return liEl;\n }\n\n /**\n * Main logic for cloning and handling user slots.\n * New <ol>, <li>, and <a> tags are created and rendered out as crumbs for the breadcrumbs trail.\n */\n private _handleSlotChange() {\n const isMobile = this._mediaQuery?.matches ?? window.innerWidth < 768;\n const ol = this.shadowRoot?.getElementById(\"crumb-list\");\n if (!ol) return;\n\n const items = this._getSlottedItems();\n if (items.length === 0) return;\n\n ol.innerHTML = \"\";\n\n // ---------------------------------------------------------\n\n const setCrumbAsBackToParentBtn = (index = 0) => {\n const clone = items[index].cloneNode(true) as HTMLLIElement;\n\n const backToParentBtn = this._createBackToParentElement(clone);\n ol.appendChild(backToParentBtn);\n };\n\n // Single breadcrumb item OR backToParent=true for mobile - render as backToParent button\n if (items.length === 1) {\n setCrumbAsBackToParentBtn();\n return;\n }\n\n if (isMobile && this.backToParent) {\n const currentPageExist = this._isCurrentPage(items[items.length - 1]);\n\n if (currentPageExist) {\n setCrumbAsBackToParentBtn(items.length - 2);\n } else {\n setCrumbAsBackToParentBtn(items.length - 1);\n }\n return;\n }\n\n // ---------------------------------------------------------\n const shouldAutoCollapse =\n !this._manuallyExpanded && items.length > this._collapseThreshold;\n const collapseTrail = this.collapsed || shouldAutoCollapse;\n\n const lastItem = items[items.length - 1];\n const hasCurrentPage = this._isCurrentPage(lastItem);\n const itemsBeforeCollapse = Math.min(1, items.length - 1);\n const itemsAfterCollapse = Math.min(\n hasCurrentPage ? 2 : 1,\n items.length - itemsBeforeCollapse,\n );\n\n // Normal multi-item breadcrumb trail\n items.forEach((crumb, index) => {\n const crumbIsBeforeCollapse = index < itemsBeforeCollapse;\n const crumbIsAfterCollapse = index >= items.length - itemsAfterCollapse;\n const isAlwaysVisible = crumbIsBeforeCollapse || crumbIsAfterCollapse;\n const shouldHide = collapseTrail && !isAlwaysVisible; // Determines which of the crumbs is hidden\n\n const liEl = this._createCrumbElement(crumb, this._isCurrentPage(crumb));\n liEl.setAttribute(\"data-cloned\", \"true\");\n\n if (shouldHide) {\n liEl.classList.add(\"hide\");\n }\n\n if (!isAlwaysVisible) {\n // Assigning which crumb is an intermediate item (aka hidable) allows us to later redirect focus on the first of these intermediates.\n liEl.classList.add(\"intermediate\");\n }\n\n ol.appendChild(liEl);\n\n // Insert ellipsis before the first hidden cloned item when collapsed\n if (\n index === itemsBeforeCollapse - 1 &&\n collapseTrail &&\n items.length > 2\n ) {\n const ellipsis = document.createElement(\"li\");\n ellipsis.classList.add(\"nys-breadcrumbs__ellipsis\");\n\n // Ellipse button\n const button = document.createElement(\"a\");\n button.classList.add(\"ellipsis-btn\");\n button.setAttribute(\"aria-label\", \"Show more links\");\n button.setAttribute(\"role\", \"button\");\n button.setAttribute(\"href\", \"#\");\n button.textContent = \"…\";\n\n const expandTrail = (e: Event) => {\n e.preventDefault();\n this._manuallyExpanded = true;\n this.collapsed = false;\n this._handleSlotChange();\n this._dispatchExpandEvent();\n this._moveFocusToFirstExpandCrumb();\n };\n\n button.addEventListener(\"click\", expandTrail);\n button.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (e.key === \" \") expandTrail(e);\n });\n\n // Chevron Icon\n const icon = document.createElement(\"nys-icon\");\n icon.setAttribute(\"name\", \"chevron_right\");\n icon.setAttribute(\"size\", \"14\");\n\n ellipsis.appendChild(button);\n ellipsis.appendChild(icon);\n ol.appendChild(ellipsis);\n }\n });\n }\n\n private _moveFocusToFirstExpandCrumb() {\n setTimeout(() => {\n const ol = this.shadowRoot?.getElementById(\"crumb-list\");\n const firstClone = ol?.querySelector(\"li[data-cloned].intermediate\");\n firstClone?.querySelector<HTMLAnchorElement>(\"a\")?.focus();\n }, 0);\n }\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n private _dispatchExpandEvent() {\n this.dispatchEvent(\n new CustomEvent(\"nys-expand\", {\n detail: { id: this.id },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n render() {\n return html`<nav\n class=\"nys-breadcrumbs ${this.backgroundBar\n ? \"nys-breadcrumbs--background-bar\"\n : \"\"}\"\n aria-label=${this.ariaLabel || \"path to this page\"}\n >\n <ol id=\"crumb-list\"></ol>\n <slot style=\"display: none;\" @slotchange=${this._handleSlotChange}></slot>\n </nav>`;\n }\n}\n\nif (!customElements.get(\"nys-breadcrumbs\")) {\n customElements.define(\"nys-breadcrumbs\", NysBreadcrumbs);\n}\n"],"names":["componentIdCounter","_NysBreadcrumbs","LitElement","newThreshold","changedProperties","el","ol","li","anchor","link","label","liEL","icon","a","isCurrentPage","liEl","isMobile","items","setCrumbAsBackToParentBtn","index","clone","backToParentBtn","currentPageExist","shouldAutoCollapse","collapseTrail","lastItem","hasCurrentPage","itemsBeforeCollapse","itemsAfterCollapse","crumb","crumbIsBeforeCollapse","crumbIsAfterCollapse","isAlwaysVisible","shouldHide","ellipsis","button","expandTrail","e","html","unsafeCSS","styles","NysBreadcrumbs","__decorateClass","property"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"nys-breadcrumbs.js","sources":["../../internals/dist/index.js","../src/nys-breadcrumbs.ts"],"sourcesContent":["import { LitElement as u } from \"lit\";\n/*!\n * New York State Design System v1.20.0\n * Description: A design system for New York State's digital products.\n * Repository: https://github.com/its-hcd/nysds\n * License: MIT\n */\nlet y = 0;\nfunction f(e) {\n return `${e}-${Date.now()}-${y++}`;\n}\nconst p = {\n labelledby: \"ariaLabelledByElements\",\n describedby: \"ariaDescribedByElements\"\n}, A = {\n labelledby: \"ariaLabel\",\n describedby: \"ariaDescription\"\n};\nfunction R(e) {\n return \"ariaDescribedByElements\" in e;\n}\nfunction _(e) {\n return e === \"errormessage\" ? \"aria-errormessage\" : `aria-${e}`;\n}\nfunction d(e) {\n return e.filter((t) => !!t);\n}\nfunction E(e) {\n return e.map((t) => (t.id || (t.id = f(\"nys-ref\")), t.id));\n}\nfunction V(e, t, n) {\n const i = d(n), r = _(t);\n i.length ? e.setAttribute(r, E(i).join(\" \")) : e.removeAttribute(r);\n}\nfunction x(e, t, n, i, r) {\n const s = d(i), a = p[n], l = t;\n if (a && R(t)) {\n l[a] = s.length ? s : null;\n return;\n }\n const o = A[n];\n if (!o) return;\n const c = r ?? (s.length ? s.map((m) => m.textContent?.trim() ?? \"\").filter(Boolean).join(\" \") : \"\");\n o in l ? l[o] = c || null : c ? e.setAttribute(\n n === \"labelledby\" ? \"aria-label\" : \"aria-description\",\n c\n ) : e.removeAttribute(\n n === \"labelledby\" ? \"aria-label\" : \"aria-description\"\n );\n}\nconst g = {\n labelledby: \"ariaLabelledByElements\",\n describedby: \"ariaDescribedByElements\"\n}, C = {\n labelledby: \"aria-label\",\n describedby: \"aria-description\"\n};\nfunction L(e, t, n) {\n const i = d(n), r = g[t], s = C[t], a = e;\n if (r && r in e && (a[r] = i.length ? i : null), !s) return;\n const l = i.map((o) => o.textContent?.trim() ?? \"\").filter(Boolean).join(\" \");\n l ? e.setAttribute(s, l) : e.removeAttribute(s);\n}\nconst b = (e) => {\n class t extends e {\n get idPrefix() {\n return this.localName || \"nys-element\";\n }\n ensureId() {\n this.id || (this.id = f(this.idPrefix));\n }\n connectedCallback() {\n super.connectedCallback(), this.ensureId();\n }\n }\n return t;\n}, P = /* @__PURE__ */ b(u), h = (e) => {\n class t extends b(e) {\n constructor() {\n super(...arguments), this.__internals = null;\n }\n get internals() {\n if (this.__internals) return this.__internals;\n if (typeof this.attachInternals == \"function\")\n try {\n this.__internals = this.attachInternals();\n } catch {\n this.__internals = null;\n }\n return this.__internals;\n }\n get defaultRole() {\n return null;\n }\n setHostAria(i, r) {\n const s = this.internals;\n if (s && i in s) {\n s[i] = r;\n return;\n }\n const a = v(i);\n r === null ? this.removeAttribute(a) : this.setAttribute(a, r);\n }\n reflectDefaultSemantics() {\n const i = this.defaultRole;\n i && this.setHostAria(\"role\", i);\n }\n connectedCallback() {\n super.connectedCallback(), this.reflectDefaultSemantics();\n }\n }\n return t;\n};\nfunction v(e) {\n if (e === \"role\") return \"role\";\n const t = e.replace(/^aria/, \"\");\n return \"aria-\" + t.charAt(0).toLowerCase() + t.slice(1);\n}\nconst T = /* @__PURE__ */ h(u), I = (e) => {\n const n = class n extends h(e) {\n setFormValue(r) {\n this.internals?.setFormValue(r ?? null);\n }\n setValidityFromState(r, s, a) {\n const l = this.internals;\n if (!l) return;\n const o = Object.values(r).some(Boolean);\n o ? l.setValidity(r, s ?? \"Invalid value\", a) : l.setValidity({}), this.setHostAria(\"ariaInvalid\", o ? \"true\" : \"false\");\n }\n clearValidity() {\n this.internals?.setValidity({}), this.setHostAria(\"ariaInvalid\", \"false\");\n }\n checkValidity() {\n return this.internals?.checkValidity() ?? !0;\n }\n reportValidity() {\n return this.internals?.reportValidity() ?? !0;\n }\n formResetCallback() {\n this.clearValidity();\n }\n };\n n.formAssociated = !0;\n let t = n;\n return t;\n}, w = /* @__PURE__ */ I(u);\nfunction O(e) {\n const t = e.tagName.toLowerCase(), n = /* @__PURE__ */ new Set(), i = (r) => {\n r.querySelectorAll(\"*\").forEach((s) => {\n const a = s.tagName.toLowerCase();\n a.startsWith(\"nys-\") && a !== t && !customElements.get(a) && n.add(a), s.shadowRoot && i(s.shadowRoot);\n });\n };\n return e.shadowRoot && i(e.shadowRoot), i(e), [...n].sort();\n}\nexport {\n I as FormControlMixin,\n b as IdentifiedMixin,\n P as NysElement,\n w as NysFormControlElement,\n T as NysReflectsAriaElement,\n h as ReflectsAriaMixin,\n V as associateControl,\n L as associateControlRefs,\n x as associateHost,\n O as findUnregisteredChildren,\n f as generateId,\n R as supportsElementRefs\n};\n//# sourceMappingURL=index.js.map\n","import { html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { NysElement } from \"@nysds/internals\";\n// This element is created imperatively (document.createElement) for the\n// back-to-parent arrow, the trailing chevrons, and the collapsed-trail\n// ellipsis, so it must be registered whenever nys-breadcrumbs is used.\n// Importing it here (intentional side effect) guarantees it always renders.\nimport \"@nysds/nys-icon\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-breadcrumbs.scss?inline\";\n\n/**\n * A breadcrumb navigation trail composed of `li` elements.\n * Collapses when the trail exceeds 5 items on desktop or 3 items on mobile,\n * showing the first, last, and item before the current page, with an ellipsis to expand.\n * A single item renders as a back-to-parent link instead of a trail.\n *\n * @summary Breadcrumb navigation trail with responsive collapse support.\n * @element nys-breadcrumbs\n *\n * @slot - One or more `li` elements defining the trail.\n *\n * @fires nys-breadcrumbs-expand - Fired when the user clicks the ellipsis to expand the trail.\n *\n * @example Basic\n * ```html\n * <nys-breadcrumbs>\n * <ol>\n * <li><a href=\"/\">Home</a></li>\n * <li><a href=\"/services\">Services</a></li>\n * </ol>\n * </nys-breadcrumbs>\n * ```\n *\n * @example Current page\n * ```html\n * <nys-breadcrumbs>\n * <ol>\n * <li><a href=\"/\">Home</a></li>\n * <li><a href=\"/services\">Services</a></li>\n * <li>Current Page</li>\n * </ol>\n * </nys-breadcrumbs>\n * ```\n *\n * @example Single item list\n * ```html\n * <nys-breadcrumbs>\n * <ol>\n * <li><a href=\"/services\">Services</a></li>\n * </ol>\n * </nys-breadcrumbs>\n * ```\n *\n * @example Long list\n * ```html\n * <nys-breadcrumbs>\n * <ol>\n * <li><a href=\"/\">Home</a></li>\n * <li><a href=\"/government\">Government</a></li>\n * <li><a href=\"/government/agencies\">Agencies</a></li>\n * <li><a href=\"/government/agencies/parks\">Parks & Recreation</a></li>\n * <li><a href=\"/parks/state-parks\">State Parks</a></li>\n * <li><a href=\"/parks/state-parks/delaware\">Delaware Region</a></li>\n * <li><a href=\"/parks/state-parks/delaware/water-gap\">Delaware Water Gap</a></li>\n * <li>Trail Conditions</li>\n * </ol>\n * </nys-breadcrumbs>\n * ```\n *\n * @example Size small\n * ```html\n * <nys-breadcrumbs size=\"sm\">\n * <ol>\n * <li><a href=\"/\">Home</a></li>\n * <li><a href=\"/government\">Government</a></li>\n * <li><a href=\"/government/agencies\">Agencies</a></li>\n * <li>Parks & Recreation</li>\n * </ol>\n * </nys-breadcrumbs>\n * ```\n *\n * @example Back to parent (mobile)\n * ```html\n * <nys-breadcrumbs backToParent>\n * <ol>\n * <li><a href=\"/\">Home</a></li>\n * <li><a href=\"/government\">Government</a></li>\n * <li><a href=\"/government/agencies\">Agencies</a></li>\n * <li><a href=\"/government/agencies/parks\">Parks & Recreation</a></li>\n * <li><a href=\"/parks/state-parks\">State Parks</a></li>\n * <li><a href=\"/parks/state-parks/delaware\">Delaware Region</a></li>\n * <li><a href=\"/parks/state-parks/delaware/water-gap\">Delaware Water Gap</a></li>\n * <li>Trail Conditions</li>\n * </ol>\n * </nys-breadcrumbs>\n * ```\n *\n * @example Background bar\n * ```html\n * <nys-breadcrumbs backgroundBar>\n * <ol>\n * <li><a href=\"/\">Home</a></li>\n * <li><a href=\"/services\">Services</a></li>\n * <li><a href=\"/tickets\">Ticket System</a></li>\n * <li>Del Water Gap</li>\n * </ol>\n * </nys-breadcrumbs>\n * ```\n *\n * @example Disabled\n * ```html\n * <nys-breadcrumbs disabled>\n * <ol>\n * <li><a href=\"/\">Home</a></li>\n * <li><a href=\"/services\">Services</a></li>\n * <li><a href=\"/tickets\">Ticket System</a></li>\n * <li>Del Water Gap</li>\n * </ol>\n * </nys-breadcrumbs>\n * ```\n */\n\nexport class NysBreadcrumbs extends NysElement {\n static styles = unsafeCSS(styles);\n\n /**\n * Unique identifier. Auto-generated if not provided.\n */\n @property({ type: String, reflect: true }) id = \"\";\n\n /**\n * Accessible label for the `<nav>` landmark. Defaults to \"Breadcrumb\" if not set.\n * Override when multiple crumbs exist on the same page.\n */\n @property({ type: String }) ariaLabel = \"\";\n\n /**\n * Controls the visual size of the breadcrumb text and spacing: `sm` for dense layouts, `md` (default) for standard use.\n * @default \"md\"\n */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n /**\n * On mobile, renders the trail as a single back-to-parent link pointing to the item before the current page.\n * Has no effect on desktop or when only one item is present (which always renders as a back link).\n * @default false\n */\n @property({ type: Boolean }) backToParent = false;\n\n /**\n * Forces the trail into its collapsed state.\n * It shows only the first item, an ellipsis, and the last two items.\n * The user can still expand the trail by clicking the ellipsis.\n * @default false\n */\n @property({ type: Boolean }) collapsed = false;\n\n /**\n * Renders a filled light theme background bar behind the breadcrumb trail.\n * @default false\n */\n @property({ type: Boolean }) backgroundBar = false;\n\n /**\n * Prevents interaction.\n * @default false\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n private _collapseThreshold = 5; // default for desktop\n private _manuallyExpanded = false;\n private _mediaQuery: MediaQueryList | null = null;\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n\n constructor() {\n super();\n }\n\n connectedCallback() {\n // super.connectedCallback() (NysElement) auto-assigns an id when\n // one is not provided (prefix = localName, shape \"nys-breadcrumbs-<ts>-<n>\").\n // The breadcrumb's navigation role lives on the inner <nav> landmark (with an\n // accessible name), so defaultRole stays null and no host role is reflected.\n super.connectedCallback();\n\n this._mediaQuery = window.matchMedia(\"(max-width: 767px)\");\n this._mediaQuery.addEventListener(\"change\", this._updateCollapseThreshold);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._mediaQuery?.removeEventListener(\n \"change\",\n this._updateCollapseThreshold,\n );\n this._mediaQuery = null;\n }\n\n firstUpdated() {\n this._handleSlotChange();\n }\n\n updated(changedProperties: Map<string | number | symbol, unknown>) {\n if (\n changedProperties.has(\"collapsed\") ||\n changedProperties.has(\"backToParent\") ||\n changedProperties.has(\"disabled\")\n ) {\n this._handleSlotChange();\n }\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n private _updateCollapseThreshold = () => {\n const isMobile = this._mediaQuery?.matches ?? window.innerWidth < 768; // NYSDS sets anything below 768px as mobile. Desktop and Tablet is above 768px.\n const newThreshold = isMobile ? 3 : 5;\n\n if (newThreshold !== this._collapseThreshold) {\n this._collapseThreshold = newThreshold;\n this._manuallyExpanded = false;\n this._handleSlotChange();\n }\n };\n\n private _getSlottedOl(): HTMLOListElement | null {\n const slot = this.shadowRoot?.querySelector(\n \"slot\",\n ) as HTMLSlotElement | null;\n const assigned = slot?.assignedElements({ flatten: true }) ?? [];\n return (\n (assigned.find((el) => el.tagName === \"OL\") as HTMLOListElement) ?? null\n );\n }\n\n private _getSlottedItems(): HTMLLIElement[] {\n const ol = this._getSlottedOl();\n if (!ol) return [];\n return Array.from(ol.children).filter(\n (el) => el.tagName === \"LI\",\n ) as HTMLLIElement[];\n }\n\n private _getAnchor(li: HTMLLIElement): HTMLAnchorElement | null {\n return li.querySelector(\"a\");\n }\n\n private _isCurrentPage(li: HTMLLIElement): boolean {\n const a = this._getAnchor(li);\n if (!a) return true;\n return false;\n }\n\n private _createBackToParentElement(li: HTMLLIElement) {\n const anchor = this._getAnchor(li);\n const link = anchor?.getAttribute(\"href\") ?? \"\";\n const label = anchor?.textContent?.trim() ?? li.textContent?.trim() ?? \"\";\n\n const liEL = document.createElement(\"li\");\n liEL.className = \"nys-breadcrumbitem\";\n\n const icon = document.createElement(\"nys-icon\");\n icon.setAttribute(\"name\", \"arrow_back\");\n icon.setAttribute(\"size\", \"16\");\n\n const a = document.createElement(\"a\");\n if (!this.disabled) {\n a.href = link;\n }\n a.textContent = label;\n if (this.disabled) {\n a.setAttribute(\"aria-disabled\", \"true\");\n }\n\n liEL.appendChild(icon);\n liEL.appendChild(a);\n\n return liEL;\n }\n\n private _createCrumbElement(li: HTMLLIElement, isCurrentPage: boolean) {\n const anchor = this._getAnchor(li);\n const link = anchor?.getAttribute(\"href\") ?? \"\";\n const label = anchor?.textContent?.trim() ?? li.textContent?.trim() ?? \"\";\n\n const liEl = document.createElement(\"li\");\n liEl.className = \"nys-breadcrumbitem\";\n\n if (isCurrentPage) {\n // WCAG 4.1.2 / WAI-ARIA breadcrumb pattern: the current page must be\n // programmatically identified so assistive tech announces \"current page\".\n liEl.setAttribute(\"aria-current\", \"page\");\n liEl.textContent = label;\n return liEl;\n }\n\n const a = document.createElement(\"a\");\n if (!this.disabled) {\n a.href = link;\n }\n a.textContent = label;\n if (this.disabled) {\n a.setAttribute(\"aria-disabled\", \"true\");\n }\n\n const icon = document.createElement(\"nys-icon\");\n icon.setAttribute(\"name\", \"chevron_right\");\n icon.setAttribute(\"size\", \"14\");\n\n liEl.appendChild(a);\n liEl.appendChild(icon);\n return liEl;\n }\n\n /**\n * Main logic for cloning and handling user slots.\n * New <ol>, <li>, and <a> tags are created and rendered out as crumbs for the breadcrumbs trail.\n */\n private _handleSlotChange() {\n const isMobile = this._mediaQuery?.matches ?? window.innerWidth < 768;\n const ol = this.shadowRoot?.getElementById(\"crumb-list\");\n if (!ol) return;\n\n const items = this._getSlottedItems();\n if (items.length === 0) return;\n\n ol.innerHTML = \"\";\n\n // ---------------------------------------------------------\n\n const setCrumbAsBackToParentBtn = (index = 0) => {\n const clone = items[index].cloneNode(true) as HTMLLIElement;\n\n const backToParentBtn = this._createBackToParentElement(clone);\n ol.appendChild(backToParentBtn);\n };\n\n // Single breadcrumb item OR backToParent=true for mobile - render as backToParent button\n if (items.length === 1) {\n setCrumbAsBackToParentBtn();\n return;\n }\n\n if (isMobile && this.backToParent) {\n const currentPageExist = this._isCurrentPage(items[items.length - 1]);\n\n if (currentPageExist) {\n setCrumbAsBackToParentBtn(items.length - 2);\n } else {\n setCrumbAsBackToParentBtn(items.length - 1);\n }\n return;\n }\n\n // ---------------------------------------------------------\n const shouldAutoCollapse =\n !this._manuallyExpanded && items.length > this._collapseThreshold;\n const collapseTrail = this.collapsed || shouldAutoCollapse;\n\n const lastItem = items[items.length - 1];\n const hasCurrentPage = this._isCurrentPage(lastItem);\n const itemsBeforeCollapse = Math.min(1, items.length - 1);\n const itemsAfterCollapse = Math.min(\n hasCurrentPage ? 2 : 1,\n items.length - itemsBeforeCollapse,\n );\n\n // Normal multi-item breadcrumb trail\n items.forEach((crumb, index) => {\n const crumbIsBeforeCollapse = index < itemsBeforeCollapse;\n const crumbIsAfterCollapse = index >= items.length - itemsAfterCollapse;\n const isAlwaysVisible = crumbIsBeforeCollapse || crumbIsAfterCollapse;\n const shouldHide = collapseTrail && !isAlwaysVisible; // Determines which of the crumbs is hidden\n\n const liEl = this._createCrumbElement(crumb, this._isCurrentPage(crumb));\n liEl.setAttribute(\"data-cloned\", \"true\");\n\n if (shouldHide) {\n liEl.classList.add(\"hide\");\n }\n\n if (!isAlwaysVisible) {\n // Assigning which crumb is an intermediate item (aka hidable) allows us to later redirect focus on the first of these intermediates.\n liEl.classList.add(\"intermediate\");\n }\n\n ol.appendChild(liEl);\n\n // Insert ellipsis before the first hidden cloned item when collapsed\n if (\n index === itemsBeforeCollapse - 1 &&\n collapseTrail &&\n items.length > 2\n ) {\n const ellipsis = document.createElement(\"li\");\n ellipsis.classList.add(\"nys-breadcrumbs__ellipsis\");\n\n // Ellipse button\n const button = document.createElement(\"a\");\n button.classList.add(\"ellipsis-btn\");\n button.setAttribute(\"aria-label\", \"Show more links\");\n button.setAttribute(\"role\", \"button\");\n button.setAttribute(\"href\", \"#\");\n button.textContent = \"…\";\n\n const expandTrail = (e: Event) => {\n e.preventDefault();\n this._manuallyExpanded = true;\n this.collapsed = false;\n this._handleSlotChange();\n this._dispatchExpandEvent();\n this._moveFocusToFirstExpandCrumb();\n };\n\n button.addEventListener(\"click\", expandTrail);\n button.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (e.key === \" \") expandTrail(e);\n });\n\n // Chevron Icon\n const icon = document.createElement(\"nys-icon\");\n icon.setAttribute(\"name\", \"chevron_right\");\n icon.setAttribute(\"size\", \"14\");\n\n ellipsis.appendChild(button);\n ellipsis.appendChild(icon);\n ol.appendChild(ellipsis);\n }\n });\n }\n\n private _moveFocusToFirstExpandCrumb() {\n setTimeout(() => {\n const ol = this.shadowRoot?.getElementById(\"crumb-list\");\n const firstClone = ol?.querySelector(\"li[data-cloned].intermediate\");\n firstClone?.querySelector<HTMLAnchorElement>(\"a\")?.focus();\n }, 0);\n }\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n private _dispatchExpandEvent() {\n this.dispatchEvent(\n new CustomEvent(\"nys-expand\", {\n detail: { id: this.id },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n render() {\n return html`<nav\n class=\"nys-breadcrumbs ${this.backgroundBar\n ? \"nys-breadcrumbs--background-bar\"\n : \"\"}\"\n aria-label=${this.ariaLabel || \"Breadcrumb\"}\n >\n <ol id=\"crumb-list\"></ol>\n <slot style=\"display: none;\" @slotchange=${this._handleSlotChange}></slot>\n </nav>`;\n }\n}\n\nif (!customElements.get(\"nys-breadcrumbs\")) {\n customElements.define(\"nys-breadcrumbs\", NysBreadcrumbs);\n}\n"],"names":["LitElement","unsafeCSS","html","property","y","f","e","b","t","P","u","_NysBreadcrumbs","NysElement","newThreshold","changedProperties","el","ol","li","anchor","link","label","liEL","icon","a","isCurrentPage","liEl","isMobile","items","setCrumbAsBackToParentBtn","index","clone","backToParentBtn","currentPageExist","shouldAutoCollapse","collapseTrail","lastItem","hasCurrentPage","itemsBeforeCollapse","itemsAfterCollapse","crumb","crumbIsBeforeCollapse","crumbIsAfterCollapse","isAlwaysVisible","shouldHide","ellipsis","button","expandTrail","styles","NysBreadcrumbs","__decorateClass"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-breadcrumbs",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.20.0",
|
|
4
4
|
"description": "The Breadcrumbs component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-breadcrumbs.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -23,9 +23,10 @@
|
|
|
23
23
|
"lit-analyze": "lit-analyzer 'src/**/*.ts'"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@nysds/nys-icon": "^1.
|
|
26
|
+
"@nysds/nys-icon": "^1.20.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
+
"@nysds/internals": "^1.20.0",
|
|
29
30
|
"lit": "^3.3.1",
|
|
30
31
|
"typescript": "^5.9.3",
|
|
31
32
|
"vite": "^7.3.1"
|