@govtechsg/sgds-web-component 3.14.0 → 3.14.1-rc.1
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/README.md +0 -6
- package/base/sidebar-element.d.ts +112 -0
- package/base/sidebar-element.js +281 -0
- package/base/sidebar-element.js.map +1 -0
- package/components/Accordion/index.umd.min.js +8 -8
- package/components/Accordion/index.umd.min.js.map +1 -1
- package/components/Accordion/sgds-accordion.d.ts +1 -2
- package/components/Accordion/sgds-accordion.js +2 -3
- package/components/Accordion/sgds-accordion.js.map +1 -1
- package/components/Mainnav/index.umd.min.js +8 -8
- package/components/Mainnav/index.umd.min.js.map +1 -1
- package/components/Mainnav/sgds-mainnav.d.ts +3 -1
- package/components/Mainnav/sgds-mainnav.js +9 -5
- package/components/Mainnav/sgds-mainnav.js.map +1 -1
- package/components/Sidebar/index.d.ts +16 -0
- package/components/Sidebar/index.js +10 -0
- package/components/Sidebar/index.js.map +1 -0
- package/components/Sidebar/index.umd.min.js +2501 -0
- package/components/Sidebar/index.umd.min.js.map +1 -0
- package/components/Sidebar/sgds-sidebar-group.d.ts +51 -0
- package/components/Sidebar/sgds-sidebar-group.js +124 -0
- package/components/Sidebar/sgds-sidebar-group.js.map +1 -0
- package/components/Sidebar/sgds-sidebar-item.d.ts +25 -0
- package/components/Sidebar/sgds-sidebar-item.js +73 -0
- package/components/Sidebar/sgds-sidebar-item.js.map +1 -0
- package/components/Sidebar/sgds-sidebar-section.d.ts +56 -0
- package/components/Sidebar/sgds-sidebar-section.js +125 -0
- package/components/Sidebar/sgds-sidebar-section.js.map +1 -0
- package/components/Sidebar/sgds-sidebar.d.ts +156 -0
- package/components/Sidebar/sgds-sidebar.js +412 -0
- package/components/Sidebar/sgds-sidebar.js.map +1 -0
- package/components/Sidebar/sidebar-context.d.ts +51 -0
- package/components/Sidebar/sidebar-context.js +45 -0
- package/components/Sidebar/sidebar-context.js.map +1 -0
- package/components/Sidebar/sidebar-item.js +6 -0
- package/components/Sidebar/sidebar-item.js.map +1 -0
- package/components/Sidebar/sidebar-section.js +6 -0
- package/components/Sidebar/sidebar-section.js.map +1 -0
- package/components/Sidebar/sidebar.js +6 -0
- package/components/Sidebar/sidebar.js.map +1 -0
- package/components/index.d.ts +1 -0
- package/components/index.js +1 -0
- package/components/index.js.map +1 -1
- package/components/index.umd.min.js +130 -77
- package/components/index.umd.min.js.map +1 -1
- package/css/fouc.css +4 -0
- package/css/sgds.css +2 -2
- package/css/utility.css +4 -0
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/index.umd.min.js +183 -52
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/base/sidebar-element.cjs.js +286 -0
- package/react/base/sidebar-element.cjs.js.map +1 -0
- package/react/base/sidebar-element.js +282 -0
- package/react/base/sidebar-element.js.map +1 -0
- package/react/components/Accordion/sgds-accordion.cjs.js +2 -3
- package/react/components/Accordion/sgds-accordion.cjs.js.map +1 -1
- package/react/components/Accordion/sgds-accordion.js +2 -3
- package/react/components/Accordion/sgds-accordion.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav.cjs.js +9 -5
- package/react/components/Mainnav/sgds-mainnav.cjs.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav.js +9 -5
- package/react/components/Mainnav/sgds-mainnav.js.map +1 -1
- package/react/components/Sidebar/sgds-sidebar-group.cjs.js +130 -0
- package/react/components/Sidebar/sgds-sidebar-group.cjs.js.map +1 -0
- package/react/components/Sidebar/sgds-sidebar-group.js +125 -0
- package/react/components/Sidebar/sgds-sidebar-group.js.map +1 -0
- package/react/components/Sidebar/sgds-sidebar-item.cjs.js +79 -0
- package/react/components/Sidebar/sgds-sidebar-item.cjs.js.map +1 -0
- package/react/components/Sidebar/sgds-sidebar-item.js +74 -0
- package/react/components/Sidebar/sgds-sidebar-item.js.map +1 -0
- package/react/components/Sidebar/sgds-sidebar-section.cjs.js +131 -0
- package/react/components/Sidebar/sgds-sidebar-section.cjs.js.map +1 -0
- package/react/components/Sidebar/sgds-sidebar-section.js +126 -0
- package/react/components/Sidebar/sgds-sidebar-section.js.map +1 -0
- package/react/components/Sidebar/sgds-sidebar.cjs.js +418 -0
- package/react/components/Sidebar/sgds-sidebar.cjs.js.map +1 -0
- package/react/components/Sidebar/sgds-sidebar.js +413 -0
- package/react/components/Sidebar/sgds-sidebar.js.map +1 -0
- package/react/components/Sidebar/sidebar-context.cjs.js +54 -0
- package/react/components/Sidebar/sidebar-context.cjs.js.map +1 -0
- package/react/components/Sidebar/sidebar-context.js +46 -0
- package/react/components/Sidebar/sidebar-context.js.map +1 -0
- package/react/components/Sidebar/sidebar-item.cjs.js +11 -0
- package/react/components/Sidebar/sidebar-item.cjs.js.map +1 -0
- package/react/components/Sidebar/sidebar-item.js +7 -0
- package/react/components/Sidebar/sidebar-item.js.map +1 -0
- package/react/components/Sidebar/sidebar-section.cjs.js +11 -0
- package/react/components/Sidebar/sidebar-section.cjs.js.map +1 -0
- package/react/components/Sidebar/sidebar-section.js +7 -0
- package/react/components/Sidebar/sidebar-section.js.map +1 -0
- package/react/components/Sidebar/sidebar.cjs.js +11 -0
- package/react/components/Sidebar/sidebar.cjs.js.map +1 -0
- package/react/components/Sidebar/sidebar.js +7 -0
- package/react/components/Sidebar/sidebar.js.map +1 -0
- package/react/index.cjs.js +56 -48
- package/react/index.cjs.js.map +1 -1
- package/react/index.d.ts +4 -0
- package/react/index.js +4 -0
- package/react/index.js.map +1 -1
- package/react/sidebar/index.cjs.js +42 -0
- package/react/sidebar/index.cjs.js.map +1 -0
- package/react/sidebar/index.d.ts +2 -0
- package/react/sidebar/index.js +18 -0
- package/react/sidebar/index.js.map +1 -0
- package/react/sidebar-group/index.cjs.js +40 -0
- package/react/sidebar-group/index.cjs.js.map +1 -0
- package/react/sidebar-group/index.d.ts +2 -0
- package/react/sidebar-group/index.js +16 -0
- package/react/sidebar-group/index.js.map +1 -0
- package/react/sidebar-item/index.cjs.js +40 -0
- package/react/sidebar-item/index.cjs.js.map +1 -0
- package/react/sidebar-item/index.d.ts +2 -0
- package/react/sidebar-item/index.js +16 -0
- package/react/sidebar-item/index.js.map +1 -0
- package/react/sidebar-section/index.cjs.js +40 -0
- package/react/sidebar-section/index.cjs.js.map +1 -0
- package/react/sidebar-section/index.d.ts +2 -0
- package/react/sidebar-section/index.js +16 -0
- package/react/sidebar-section/index.js.map +1 -0
- package/themes/responsive.css +18 -0
package/README.md
CHANGED
|
@@ -56,10 +56,7 @@ import "@govtechsg/sgds-web-component";
|
|
|
56
56
|
Once imported, the custom elements can be used throughout the project.
|
|
57
57
|
|
|
58
58
|
```js
|
|
59
|
-
// import all custom elements at once
|
|
60
59
|
import "@govtechsg/sgds-web-component";
|
|
61
|
-
// or import individual custom elements
|
|
62
|
-
import "@govtechsg/sgds-web-component/components/Button";
|
|
63
60
|
|
|
64
61
|
//usage
|
|
65
62
|
// <sgds-button>Hello World</sgds-button>
|
|
@@ -72,9 +69,6 @@ Each component's Class is exported via named exports, prefixed with `Sgds`.
|
|
|
72
69
|
|
|
73
70
|
```js
|
|
74
71
|
import { SgdsButton, SgdsMainnav } from "@govtechsg/sgds-web-component/components";
|
|
75
|
-
// or
|
|
76
|
-
import { SgdsButton } from "@govtechsg/sgds-web-component/components/Button/sgds-button";
|
|
77
|
-
import { SgdsMainnav } from "@govtechsg/sgds-web-component/components/Mainnav/sgds-mainnav";
|
|
78
72
|
```
|
|
79
73
|
|
|
80
74
|
# Attributes and Properties
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { PropertyValueMap } from "lit";
|
|
2
|
+
import SgdsElement from "./sgds-element";
|
|
3
|
+
/**
|
|
4
|
+
* @summary Base class for sidebar navigation components.
|
|
5
|
+
* Provides core functionality for sidebar items and groups including keyboard navigation,
|
|
6
|
+
* selection state management, and nesting support. This class manages hierarchical navigation,
|
|
7
|
+
* active state tracking, and drawer overlay coordination through context providers.
|
|
8
|
+
*
|
|
9
|
+
* Features:
|
|
10
|
+
* - Multi-level keyboard navigation (Arrow keys, Enter)
|
|
11
|
+
* - Active state management via Lit context subscription
|
|
12
|
+
* - Support for nested hierarchies up to 3 levels deep
|
|
13
|
+
* - Focus management and full ARIA attribute support
|
|
14
|
+
* - Event emission for sidebar coordination (i-sgds-click)
|
|
15
|
+
* - Automatic child element tracking and nesting level detection
|
|
16
|
+
*
|
|
17
|
+
* Keyboard Navigation:
|
|
18
|
+
* - Arrow Up/Down: Navigate between siblings in the same level
|
|
19
|
+
* - Arrow Left/Right: Navigate hierarchically (collapse/expand or move in drawer)
|
|
20
|
+
* - Enter: Activate focused item or toggle group
|
|
21
|
+
*
|
|
22
|
+
* Context Management:
|
|
23
|
+
* - Consumes: SidebarCollapsed, SidebarActiveItem, SidebarActiveGroup, SidebarDrawerItems
|
|
24
|
+
* - Updates state based on context changes for responsive UI updates
|
|
25
|
+
*
|
|
26
|
+
* @internal
|
|
27
|
+
*/
|
|
28
|
+
export declare class SidebarElement extends SgdsElement {
|
|
29
|
+
static styles: import("lit").CSSResult[];
|
|
30
|
+
/**
|
|
31
|
+
* The display title/label for the sidebar element.
|
|
32
|
+
* Shown in the UI and used for accessibility labels (aria-label).
|
|
33
|
+
* @attribute title
|
|
34
|
+
* @type {string}
|
|
35
|
+
* @default ""
|
|
36
|
+
*/
|
|
37
|
+
title: string;
|
|
38
|
+
/**
|
|
39
|
+
* The unique name identifier for the sidebar element.
|
|
40
|
+
* Used to identify selections in sgds-select events and manage active states.
|
|
41
|
+
* Should be unique among siblings in the same navigation level.
|
|
42
|
+
* @attribute name
|
|
43
|
+
* @type {string}
|
|
44
|
+
* @default ""
|
|
45
|
+
*/
|
|
46
|
+
name: string;
|
|
47
|
+
/** @internal */
|
|
48
|
+
_sidebarCollapsed: boolean;
|
|
49
|
+
/** @internal */
|
|
50
|
+
_sidebarActiveItem: SidebarElement | null;
|
|
51
|
+
/** @internal */
|
|
52
|
+
_sidebarActiveGroup: SidebarElement | null;
|
|
53
|
+
/** @internal */
|
|
54
|
+
_drawerItems: SidebarElement[] | null;
|
|
55
|
+
/** @internal Tracks whether a drawer overlay is currently open */
|
|
56
|
+
_showDrawer: boolean;
|
|
57
|
+
/** @internal */
|
|
58
|
+
_childLevel: number;
|
|
59
|
+
/**
|
|
60
|
+
* Indicates whether this element is currently selected/active.
|
|
61
|
+
* @internal
|
|
62
|
+
*/
|
|
63
|
+
_selected: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* Indicates whether this element should be hidden based on nesting context.
|
|
66
|
+
* @internal
|
|
67
|
+
*/
|
|
68
|
+
_hidden: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* List of child elements assigned to this component.
|
|
71
|
+
* @internal
|
|
72
|
+
*/
|
|
73
|
+
_childElements: SidebarElement[];
|
|
74
|
+
/** @internal */
|
|
75
|
+
_childActive: boolean;
|
|
76
|
+
/** @internal */
|
|
77
|
+
private _defaultNodes;
|
|
78
|
+
connectedCallback(): void;
|
|
79
|
+
disconnectedCallback(): void;
|
|
80
|
+
firstUpdated(changedProperties: PropertyValueMap<this>): void;
|
|
81
|
+
updated(): void;
|
|
82
|
+
/**
|
|
83
|
+
* Handles slot change events and updates child elements list.
|
|
84
|
+
* @internal
|
|
85
|
+
* @returns {void}
|
|
86
|
+
*/
|
|
87
|
+
_handleSlotChange(): void;
|
|
88
|
+
/**
|
|
89
|
+
* Handles click/activation events on the sidebar element.
|
|
90
|
+
* Emits internal click event for parent sidebar to handle selection.
|
|
91
|
+
* @internal
|
|
92
|
+
* @param {SidebarElement} [element] - Optional element parameter (for keyboard compatibility)
|
|
93
|
+
* @returns {void}
|
|
94
|
+
*/
|
|
95
|
+
_handleClick(): void;
|
|
96
|
+
/**
|
|
97
|
+
* Handles keyboard navigation events for sidebar elements.
|
|
98
|
+
* Supports Arrow Up/Down for navigation and Arrow Left/Right for drawer management.
|
|
99
|
+
* @internal
|
|
100
|
+
* @param {KeyboardEvent} event - The keyboard event object
|
|
101
|
+
* @returns {void}
|
|
102
|
+
*/
|
|
103
|
+
private _handleKeyDown;
|
|
104
|
+
/**
|
|
105
|
+
* Calculates the nesting level by counting parent sgds-sidebar-group ancestors.
|
|
106
|
+
* Level 0 = top-level element, Level 1+ = nested within another group.
|
|
107
|
+
* Updates the _childLevel state property.
|
|
108
|
+
* @internal
|
|
109
|
+
* @returns {void}
|
|
110
|
+
*/
|
|
111
|
+
private getChildLevel;
|
|
112
|
+
}
|
|
@@ -0,0 +1,281 @@
|
|
|
1
|
+
import { __decorate } from 'tslib';
|
|
2
|
+
import { property, state, queryAssignedElements } from 'lit/decorators.js';
|
|
3
|
+
import { DropdownElement } from './dropdown-element.js';
|
|
4
|
+
import SgdsElement from './sgds-element.js';
|
|
5
|
+
import { consume } from '@lit/context';
|
|
6
|
+
import { SidebarCollapsed, SidebarActiveItem, SidebarActiveGroup, SidebarDrawerItems, SidebarDrawerOpen } from '../components/Sidebar/sidebar-context.js';
|
|
7
|
+
|
|
8
|
+
const ARROW_DOWN = "ArrowDown";
|
|
9
|
+
const ARROW_UP = "ArrowUp";
|
|
10
|
+
const ARROW_LEFT = "ArrowLeft";
|
|
11
|
+
const ARROW_RIGHT = "ArrowRight";
|
|
12
|
+
const ENTER = "Enter";
|
|
13
|
+
/**
|
|
14
|
+
* @summary Base class for sidebar navigation components.
|
|
15
|
+
* Provides core functionality for sidebar items and groups including keyboard navigation,
|
|
16
|
+
* selection state management, and nesting support. This class manages hierarchical navigation,
|
|
17
|
+
* active state tracking, and drawer overlay coordination through context providers.
|
|
18
|
+
*
|
|
19
|
+
* Features:
|
|
20
|
+
* - Multi-level keyboard navigation (Arrow keys, Enter)
|
|
21
|
+
* - Active state management via Lit context subscription
|
|
22
|
+
* - Support for nested hierarchies up to 3 levels deep
|
|
23
|
+
* - Focus management and full ARIA attribute support
|
|
24
|
+
* - Event emission for sidebar coordination (i-sgds-click)
|
|
25
|
+
* - Automatic child element tracking and nesting level detection
|
|
26
|
+
*
|
|
27
|
+
* Keyboard Navigation:
|
|
28
|
+
* - Arrow Up/Down: Navigate between siblings in the same level
|
|
29
|
+
* - Arrow Left/Right: Navigate hierarchically (collapse/expand or move in drawer)
|
|
30
|
+
* - Enter: Activate focused item or toggle group
|
|
31
|
+
*
|
|
32
|
+
* Context Management:
|
|
33
|
+
* - Consumes: SidebarCollapsed, SidebarActiveItem, SidebarActiveGroup, SidebarDrawerItems
|
|
34
|
+
* - Updates state based on context changes for responsive UI updates
|
|
35
|
+
*
|
|
36
|
+
* @internal
|
|
37
|
+
*/
|
|
38
|
+
class SidebarElement extends SgdsElement {
|
|
39
|
+
constructor() {
|
|
40
|
+
super(...arguments);
|
|
41
|
+
/**
|
|
42
|
+
* The display title/label for the sidebar element.
|
|
43
|
+
* Shown in the UI and used for accessibility labels (aria-label).
|
|
44
|
+
* @attribute title
|
|
45
|
+
* @type {string}
|
|
46
|
+
* @default ""
|
|
47
|
+
*/
|
|
48
|
+
this.title = "";
|
|
49
|
+
/**
|
|
50
|
+
* The unique name identifier for the sidebar element.
|
|
51
|
+
* Used to identify selections in sgds-select events and manage active states.
|
|
52
|
+
* Should be unique among siblings in the same navigation level.
|
|
53
|
+
* @attribute name
|
|
54
|
+
* @type {string}
|
|
55
|
+
* @default ""
|
|
56
|
+
*/
|
|
57
|
+
this.name = "";
|
|
58
|
+
/** @internal */
|
|
59
|
+
this._sidebarCollapsed = false;
|
|
60
|
+
/** @internal */
|
|
61
|
+
this._sidebarActiveItem = null;
|
|
62
|
+
/** @internal */
|
|
63
|
+
this._sidebarActiveGroup = null;
|
|
64
|
+
/** @internal */
|
|
65
|
+
this._drawerItems = null;
|
|
66
|
+
/** @internal Tracks whether a drawer overlay is currently open */
|
|
67
|
+
this._showDrawer = false;
|
|
68
|
+
/** @internal */
|
|
69
|
+
this._childLevel = 0;
|
|
70
|
+
/**
|
|
71
|
+
* Indicates whether this element is currently selected/active.
|
|
72
|
+
* @internal
|
|
73
|
+
*/
|
|
74
|
+
this._selected = false;
|
|
75
|
+
/**
|
|
76
|
+
* Indicates whether this element should be hidden based on nesting context.
|
|
77
|
+
* @internal
|
|
78
|
+
*/
|
|
79
|
+
this._hidden = false;
|
|
80
|
+
/**
|
|
81
|
+
* List of child elements assigned to this component.
|
|
82
|
+
* @internal
|
|
83
|
+
*/
|
|
84
|
+
this._childElements = [];
|
|
85
|
+
/** @internal */
|
|
86
|
+
this._childActive = false;
|
|
87
|
+
}
|
|
88
|
+
connectedCallback() {
|
|
89
|
+
super.connectedCallback();
|
|
90
|
+
this.getChildLevel();
|
|
91
|
+
this.setAttribute("role", "option");
|
|
92
|
+
this.setAttribute("aria-label", this.title || this.name);
|
|
93
|
+
this.addEventListener("keydown", this._handleKeyDown);
|
|
94
|
+
}
|
|
95
|
+
disconnectedCallback() {
|
|
96
|
+
super.disconnectedCallback();
|
|
97
|
+
this.removeEventListener("keydown", this._handleKeyDown);
|
|
98
|
+
}
|
|
99
|
+
firstUpdated(changedProperties) {
|
|
100
|
+
super.firstUpdated(changedProperties);
|
|
101
|
+
this.getChildLevel();
|
|
102
|
+
}
|
|
103
|
+
updated() {
|
|
104
|
+
if (this._childLevel === 1) {
|
|
105
|
+
this._hidden = !this.closest(".sidebar-nested-overlay");
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
/**
|
|
109
|
+
* Handles slot change events and updates child elements list.
|
|
110
|
+
* @internal
|
|
111
|
+
* @returns {void}
|
|
112
|
+
*/
|
|
113
|
+
_handleSlotChange() {
|
|
114
|
+
this._childElements = this._defaultNodes;
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* Handles click/activation events on the sidebar element.
|
|
118
|
+
* Emits internal click event for parent sidebar to handle selection.
|
|
119
|
+
* @internal
|
|
120
|
+
* @param {SidebarElement} [element] - Optional element parameter (for keyboard compatibility)
|
|
121
|
+
* @returns {void}
|
|
122
|
+
*/
|
|
123
|
+
_handleClick() {
|
|
124
|
+
this.emit("i-sgds-click", { detail: { element: this, level: this._childLevel } });
|
|
125
|
+
}
|
|
126
|
+
/**
|
|
127
|
+
* Handles keyboard navigation events for sidebar elements.
|
|
128
|
+
* Supports Arrow Up/Down for navigation and Arrow Left/Right for drawer management.
|
|
129
|
+
* @internal
|
|
130
|
+
* @param {KeyboardEvent} event - The keyboard event object
|
|
131
|
+
* @returns {void}
|
|
132
|
+
*/
|
|
133
|
+
_handleKeyDown(event) {
|
|
134
|
+
var _a, _b, _c;
|
|
135
|
+
const target = event.target;
|
|
136
|
+
switch (event.key) {
|
|
137
|
+
case ENTER: {
|
|
138
|
+
event.preventDefault();
|
|
139
|
+
event.stopPropagation();
|
|
140
|
+
if (event.target === this)
|
|
141
|
+
this._handleClick();
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
case ARROW_DOWN: {
|
|
145
|
+
event.preventDefault();
|
|
146
|
+
event.stopPropagation();
|
|
147
|
+
const child = target._childElements[0];
|
|
148
|
+
const isChildHidden = child === null || child === void 0 ? void 0 : child._hidden;
|
|
149
|
+
const childElement = !isChildHidden ? child : null;
|
|
150
|
+
const nextElement = childElement || target.nextElementSibling || target.parentElement.nextElementSibling;
|
|
151
|
+
if (nextElement === null || nextElement === void 0 ? void 0 : nextElement.shadowRoot) {
|
|
152
|
+
const focusTarget = nextElement.shadowRoot.querySelector("[tabindex]");
|
|
153
|
+
focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus();
|
|
154
|
+
}
|
|
155
|
+
return;
|
|
156
|
+
}
|
|
157
|
+
case ARROW_UP: {
|
|
158
|
+
event.preventDefault();
|
|
159
|
+
event.stopPropagation();
|
|
160
|
+
const prevSiblingChildren = (_a = target.previousElementSibling) === null || _a === void 0 ? void 0 : _a._childElements;
|
|
161
|
+
const lastChild = prevSiblingChildren ? prevSiblingChildren[(prevSiblingChildren === null || prevSiblingChildren === void 0 ? void 0 : prevSiblingChildren.length) - 1] : null;
|
|
162
|
+
const isChildHidden = lastChild === null || lastChild === void 0 ? void 0 : lastChild._hidden;
|
|
163
|
+
const childElement = !isChildHidden ? lastChild : null;
|
|
164
|
+
const prevElement = childElement || target.previousElementSibling || target.parentElement;
|
|
165
|
+
if (prevElement === null || prevElement === void 0 ? void 0 : prevElement.shadowRoot) {
|
|
166
|
+
const focusTarget = prevElement.shadowRoot.querySelector("[tabindex]");
|
|
167
|
+
focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus();
|
|
168
|
+
}
|
|
169
|
+
return;
|
|
170
|
+
}
|
|
171
|
+
case ARROW_LEFT: {
|
|
172
|
+
event.preventDefault();
|
|
173
|
+
event.stopPropagation();
|
|
174
|
+
if (this._sidebarActiveGroup === this) {
|
|
175
|
+
// when drawer is open, close it
|
|
176
|
+
if (this._showDrawer)
|
|
177
|
+
this._handleClick();
|
|
178
|
+
}
|
|
179
|
+
else {
|
|
180
|
+
// check if we are on the drawer, if so move back to parent
|
|
181
|
+
const childLevel = target._childLevel;
|
|
182
|
+
if (childLevel >= 1 && ((_b = this._sidebarActiveGroup) === null || _b === void 0 ? void 0 : _b.shadowRoot)) {
|
|
183
|
+
const focusTarget = this._sidebarActiveGroup.shadowRoot.querySelector("[tabindex]");
|
|
184
|
+
focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus();
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
return;
|
|
188
|
+
}
|
|
189
|
+
case ARROW_RIGHT: {
|
|
190
|
+
event.preventDefault();
|
|
191
|
+
event.stopPropagation();
|
|
192
|
+
if (this._sidebarActiveGroup === this) {
|
|
193
|
+
if ((_c = this._drawerItems) === null || _c === void 0 ? void 0 : _c.length) {
|
|
194
|
+
if (this._showDrawer) {
|
|
195
|
+
const drawerItem = this._drawerItems[0];
|
|
196
|
+
if (drawerItem === null || drawerItem === void 0 ? void 0 : drawerItem.shadowRoot) {
|
|
197
|
+
const focusTarget = drawerItem.shadowRoot.querySelector("[tabindex]");
|
|
198
|
+
focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus();
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
else {
|
|
202
|
+
this._handleClick();
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
else {
|
|
207
|
+
if (this._childLevel === 0 && this._childElements.length > 0) {
|
|
208
|
+
// when there is nested, we trigger click to show drawer
|
|
209
|
+
this._handleClick();
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
return;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
/**
|
|
217
|
+
* Calculates the nesting level by counting parent sgds-sidebar-group ancestors.
|
|
218
|
+
* Level 0 = top-level element, Level 1+ = nested within another group.
|
|
219
|
+
* Updates the _childLevel state property.
|
|
220
|
+
* @internal
|
|
221
|
+
* @returns {void}
|
|
222
|
+
*/
|
|
223
|
+
getChildLevel() {
|
|
224
|
+
let currentEle = this.parentElement;
|
|
225
|
+
let level = 0;
|
|
226
|
+
while (currentEle.tagName.toLowerCase() === "sgds-sidebar-group") {
|
|
227
|
+
level += 1;
|
|
228
|
+
currentEle = currentEle.parentElement;
|
|
229
|
+
}
|
|
230
|
+
const isInDrawer = currentEle.classList.contains("sidebar-nested-overlay");
|
|
231
|
+
this._childLevel = isInDrawer ? level + 1 : level;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
SidebarElement.styles = DropdownElement.styles;
|
|
235
|
+
__decorate([
|
|
236
|
+
property({ type: String, reflect: true })
|
|
237
|
+
], SidebarElement.prototype, "title", void 0);
|
|
238
|
+
__decorate([
|
|
239
|
+
property({ type: String, reflect: true })
|
|
240
|
+
], SidebarElement.prototype, "name", void 0);
|
|
241
|
+
__decorate([
|
|
242
|
+
consume({ context: SidebarCollapsed, subscribe: true }),
|
|
243
|
+
state()
|
|
244
|
+
], SidebarElement.prototype, "_sidebarCollapsed", void 0);
|
|
245
|
+
__decorate([
|
|
246
|
+
consume({ context: SidebarActiveItem, subscribe: true }),
|
|
247
|
+
state()
|
|
248
|
+
], SidebarElement.prototype, "_sidebarActiveItem", void 0);
|
|
249
|
+
__decorate([
|
|
250
|
+
consume({ context: SidebarActiveGroup, subscribe: true }),
|
|
251
|
+
state()
|
|
252
|
+
], SidebarElement.prototype, "_sidebarActiveGroup", void 0);
|
|
253
|
+
__decorate([
|
|
254
|
+
consume({ context: SidebarDrawerItems, subscribe: true }),
|
|
255
|
+
state()
|
|
256
|
+
], SidebarElement.prototype, "_drawerItems", void 0);
|
|
257
|
+
__decorate([
|
|
258
|
+
consume({ context: SidebarDrawerOpen, subscribe: true }),
|
|
259
|
+
state()
|
|
260
|
+
], SidebarElement.prototype, "_showDrawer", void 0);
|
|
261
|
+
__decorate([
|
|
262
|
+
state()
|
|
263
|
+
], SidebarElement.prototype, "_childLevel", void 0);
|
|
264
|
+
__decorate([
|
|
265
|
+
state()
|
|
266
|
+
], SidebarElement.prototype, "_selected", void 0);
|
|
267
|
+
__decorate([
|
|
268
|
+
state()
|
|
269
|
+
], SidebarElement.prototype, "_hidden", void 0);
|
|
270
|
+
__decorate([
|
|
271
|
+
state()
|
|
272
|
+
], SidebarElement.prototype, "_childElements", void 0);
|
|
273
|
+
__decorate([
|
|
274
|
+
state()
|
|
275
|
+
], SidebarElement.prototype, "_childActive", void 0);
|
|
276
|
+
__decorate([
|
|
277
|
+
queryAssignedElements({ flatten: true })
|
|
278
|
+
], SidebarElement.prototype, "_defaultNodes", void 0);
|
|
279
|
+
|
|
280
|
+
export { SidebarElement };
|
|
281
|
+
//# sourceMappingURL=sidebar-element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar-element.js","sources":["../../src/base/sidebar-element.ts"],"sourcesContent":["import { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { DropdownElement } from \"./dropdown-element\";\nimport { PropertyValueMap } from \"lit\";\nimport SgdsElement from \"./sgds-element\";\nimport { consume } from \"@lit/context\";\nimport {\n SidebarActiveGroup,\n SidebarActiveItem,\n SidebarCollapsed,\n SidebarDrawerItems,\n SidebarDrawerOpen\n} from \"../components/Sidebar/sidebar-context\";\n\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ARROW_LEFT = \"ArrowLeft\";\nconst ARROW_RIGHT = \"ArrowRight\";\nconst ENTER = \"Enter\";\n\n/**\n * @summary Base class for sidebar navigation components.\n * Provides core functionality for sidebar items and groups including keyboard navigation,\n * selection state management, and nesting support. This class manages hierarchical navigation,\n * active state tracking, and drawer overlay coordination through context providers.\n *\n * Features:\n * - Multi-level keyboard navigation (Arrow keys, Enter)\n * - Active state management via Lit context subscription\n * - Support for nested hierarchies up to 3 levels deep\n * - Focus management and full ARIA attribute support\n * - Event emission for sidebar coordination (i-sgds-click)\n * - Automatic child element tracking and nesting level detection\n *\n * Keyboard Navigation:\n * - Arrow Up/Down: Navigate between siblings in the same level\n * - Arrow Left/Right: Navigate hierarchically (collapse/expand or move in drawer)\n * - Enter: Activate focused item or toggle group\n *\n * Context Management:\n * - Consumes: SidebarCollapsed, SidebarActiveItem, SidebarActiveGroup, SidebarDrawerItems\n * - Updates state based on context changes for responsive UI updates\n *\n * @internal\n */\nexport class SidebarElement extends SgdsElement {\n static styles = DropdownElement.styles;\n\n /**\n * The display title/label for the sidebar element.\n * Shown in the UI and used for accessibility labels (aria-label).\n * @attribute title\n * @type {string}\n * @default \"\"\n */\n @property({ type: String, reflect: true }) title = \"\";\n\n /**\n * The unique name identifier for the sidebar element.\n * Used to identify selections in sgds-select events and manage active states.\n * Should be unique among siblings in the same navigation level.\n * @attribute name\n * @type {string}\n * @default \"\"\n */\n @property({ type: String, reflect: true }) name = \"\";\n\n /** @internal */\n @consume({ context: SidebarCollapsed, subscribe: true })\n @state()\n _sidebarCollapsed = false;\n\n /** @internal */\n @consume({ context: SidebarActiveItem, subscribe: true })\n @state()\n _sidebarActiveItem: SidebarElement | null = null;\n\n /** @internal */\n @consume({ context: SidebarActiveGroup, subscribe: true })\n @state()\n _sidebarActiveGroup: SidebarElement | null = null;\n\n /** @internal */\n @consume({ context: SidebarDrawerItems, subscribe: true })\n @state()\n _drawerItems: SidebarElement[] | null = null;\n\n /** @internal Tracks whether a drawer overlay is currently open */\n @consume({ context: SidebarDrawerOpen, subscribe: true })\n @state()\n _showDrawer = false;\n\n /** @internal */\n @state() _childLevel = 0;\n\n /**\n * Indicates whether this element is currently selected/active.\n * @internal\n */\n @state() _selected = false;\n\n /**\n * Indicates whether this element should be hidden based on nesting context.\n * @internal\n */\n @state() _hidden = false;\n\n /**\n * List of child elements assigned to this component.\n * @internal\n */\n @state()\n _childElements: SidebarElement[] = [];\n\n /** @internal */\n @state() _childActive = false;\n\n /** @internal */\n @queryAssignedElements({ flatten: true })\n private _defaultNodes!: SidebarElement[];\n\n connectedCallback() {\n super.connectedCallback();\n this.getChildLevel();\n this.setAttribute(\"role\", \"option\");\n this.setAttribute(\"aria-label\", this.title || this.name);\n this.addEventListener(\"keydown\", this._handleKeyDown);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"keydown\", this._handleKeyDown);\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n this.getChildLevel();\n }\n\n updated() {\n if (this._childLevel === 1) {\n this._hidden = !this.closest(\".sidebar-nested-overlay\");\n }\n }\n\n /**\n * Handles slot change events and updates child elements list.\n * @internal\n * @returns {void}\n */\n _handleSlotChange() {\n this._childElements = this._defaultNodes;\n }\n\n /**\n * Handles click/activation events on the sidebar element.\n * Emits internal click event for parent sidebar to handle selection.\n * @internal\n * @param {SidebarElement} [element] - Optional element parameter (for keyboard compatibility)\n * @returns {void}\n */\n _handleClick() {\n this.emit(\"i-sgds-click\", { detail: { element: this, level: this._childLevel } });\n }\n\n /**\n * Handles keyboard navigation events for sidebar elements.\n * Supports Arrow Up/Down for navigation and Arrow Left/Right for drawer management.\n * @internal\n * @param {KeyboardEvent} event - The keyboard event object\n * @returns {void}\n */\n private _handleKeyDown(event: KeyboardEvent) {\n const target = event.target as HTMLElement;\n\n switch (event.key) {\n case ENTER: {\n event.preventDefault();\n event.stopPropagation();\n if (event.target === this) this._handleClick();\n return;\n }\n case ARROW_DOWN: {\n event.preventDefault();\n event.stopPropagation();\n\n const child = (target as SidebarElement)._childElements[0];\n\n const isChildHidden = child?._hidden;\n const childElement = !isChildHidden ? child : null;\n const nextElement = childElement || target.nextElementSibling || target.parentElement.nextElementSibling;\n\n if (nextElement?.shadowRoot) {\n const focusTarget = nextElement.shadowRoot.querySelector(\"[tabindex]\") as HTMLElement | null;\n focusTarget?.focus();\n }\n\n return;\n }\n case ARROW_UP: {\n event.preventDefault();\n event.stopPropagation();\n\n const prevSiblingChildren = (target.previousElementSibling as SidebarElement)?._childElements;\n const lastChild = prevSiblingChildren ? prevSiblingChildren[prevSiblingChildren?.length - 1] : null;\n const isChildHidden = lastChild?._hidden;\n\n const childElement = !isChildHidden ? lastChild : null;\n const prevElement = childElement || target.previousElementSibling || target.parentElement;\n\n if (prevElement?.shadowRoot) {\n const focusTarget = prevElement.shadowRoot.querySelector(\"[tabindex]\") as HTMLElement | null;\n focusTarget?.focus();\n }\n return;\n }\n case ARROW_LEFT: {\n event.preventDefault();\n event.stopPropagation();\n\n if (this._sidebarActiveGroup === this) {\n // when drawer is open, close it\n if (this._showDrawer) this._handleClick();\n } else {\n // check if we are on the drawer, if so move back to parent\n const childLevel = (target as SidebarElement)._childLevel;\n if (childLevel >= 1 && this._sidebarActiveGroup?.shadowRoot) {\n const focusTarget = this._sidebarActiveGroup.shadowRoot.querySelector(\"[tabindex]\") as HTMLElement | null;\n focusTarget?.focus();\n }\n }\n\n return;\n }\n case ARROW_RIGHT: {\n event.preventDefault();\n event.stopPropagation();\n\n if (this._sidebarActiveGroup === this) {\n if (this._drawerItems?.length) {\n if (this._showDrawer) {\n const drawerItem = this._drawerItems[0];\n if (drawerItem?.shadowRoot) {\n const focusTarget = drawerItem.shadowRoot.querySelector(\"[tabindex]\") as HTMLElement | null;\n focusTarget?.focus();\n }\n } else {\n this._handleClick();\n }\n }\n } else {\n if (this._childLevel === 0 && this._childElements.length > 0) {\n // when there is nested, we trigger click to show drawer\n this._handleClick();\n }\n }\n\n return;\n }\n }\n }\n\n /**\n * Calculates the nesting level by counting parent sgds-sidebar-group ancestors.\n * Level 0 = top-level element, Level 1+ = nested within another group.\n * Updates the _childLevel state property.\n * @internal\n * @returns {void}\n */\n private getChildLevel() {\n let currentEle = this.parentElement;\n let level = 0;\n\n while (currentEle.tagName.toLowerCase() === \"sgds-sidebar-group\") {\n level += 1;\n currentEle = currentEle.parentElement;\n }\n\n const isInDrawer = currentEle.classList.contains(\"sidebar-nested-overlay\");\n this._childLevel = isInDrawer ? level + 1 : level;\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ const t=globalThis,s=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
10
10
|
* Copyright 2017 Google LLC
|
|
11
11
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
12
12
|
*/
|
|
13
|
-
const x=globalThis,E=e=>{x.emitLitDebugLogEvents&&x.dispatchEvent(new CustomEvent("lit-debug",{detail:e}))};let C,k=0;x.litIssuedWarnings??=new Set,C=(e,t)=>{t+=e?` See https://lit.dev/msg/${e} for more information.`:"",x.litIssuedWarnings.has(t)||x.litIssuedWarnings.has(e)||(console.warn(t),x.litIssuedWarnings.add(t))},queueMicrotask(()=>{C("dev-mode","Lit is in dev mode. Not recommended for production!")});const T=x.ShadyDOM?.inUse&&!0===x.ShadyDOM?.noPatch?x.ShadyDOM.wrap:e=>e,N=x.trustedTypes,U=N?N.createPolicy("lit-html",{createHTML:e=>e}):void 0,O=e=>e,M=(e,t,s)=>O,V=e=>{if(oe!==M)throw new Error("Attempted to overwrite existing lit-html security policy. setSanitizeDOMValueFactory should be called at most once.");oe=e},z=()=>{oe=M},A=(e,t,s)=>oe(e,t,s),L="$lit$",R=`lit$${Math.random().toFixed(9).slice(2)}$`,W="?"+R,D=`<${W}>`,I=document,j=()=>I.createComment(""),q=e=>null===e||"object"!=typeof e&&"function"!=typeof e,H=Array.isArray,F="[ \t\n\f\r]",B=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Z=/-->/g,J=/>/g,K=new RegExp(`>|${F}(?:([^\\s"'>=/]+)(${F}*=${F}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),Y=/'/g,X=/"/g,G=/^(?:script|style|textarea|title)$/i,Q=(ee=1,(e,...t)=>(e.some(e=>void 0===e)&&console.warn("Some template strings are undefined.\nThis is probably caused by illegal octal escape sequences."),t.some(e=>e?._$litStatic$)&&C("","Static values 'literal' or 'unsafeStatic' cannot be used as values to non-static templates.\nPlease use the static 'html' tag function. See https://lit.dev/docs/templates/expressions/#static-expressions"),{_$litType$:ee,strings:e,values:t}));var ee;const te=Symbol.for("lit-noChange"),se=Symbol.for("lit-nothing"),ie=new WeakMap,ne=I.createTreeWalker(I,129);let oe=M;function re(e,t){if(!H(e)||!e.hasOwnProperty("raw")){let e="invalid template strings array";throw e="\n Internal Error: expected template strings to be an array\n with a 'raw' field. Faking a template strings array by\n calling html or svg like an ordinary function is effectively\n the same as calling unsafeHtml and can lead to major security\n issues, e.g. opening your code up to XSS attacks.\n If you're using the html or svg tagged template functions normally\n and still seeing this error, please file a bug at\n https://github.com/lit/lit/issues/new?template=bug_report.md\n and include information about your build tooling, if any.\n ".trim().replace(/\n */g,"\n"),new Error(e)}return void 0!==U?U.createHTML(t):t}class ae{constructor({strings:e,_$litType$:t},s){let i;this.parts=[];let n=0,o=0;const r=e.length-1,a=this.parts,[d,l]=((e,t)=>{const s=e.length-1,i=[];let n,o=2===t?"<svg>":3===t?"<math>":"",r=B;for(let t=0;t<s;t++){const s=e[t];let a,d,l=-1,c=0;for(;c<s.length&&(r.lastIndex=c,d=r.exec(s),null!==d);)if(c=r.lastIndex,r===B){if("!--"===d[1])r=Z;else if(void 0!==d[1])r=J;else if(void 0!==d[2])G.test(d[2])&&(n=new RegExp(`</${d[2]}`,"g")),r=K;else if(void 0!==d[3])throw new Error("Bindings in tag names are not supported. Please use static templates instead. See https://lit.dev/docs/templates/expressions/#static-expressions")}else r===K?">"===d[0]?(r=n??B,l=-1):void 0===d[1]?l=-2:(l=r.lastIndex-d[2].length,a=d[1],r=void 0===d[3]?K:'"'===d[3]?X:Y):r===X||r===Y?r=K:r===Z||r===J?r=B:(r=K,n=void 0);console.assert(-1===l||r===K||r===Y||r===X,"unexpected parse state B");const h=r===K&&e[t+1].startsWith("/>")?" ":"";o+=r===B?s+D:l>=0?(i.push(a),s.slice(0,l)+L+s.slice(l)+R+h):s+R+(-2===l?t:h)}return[re(e,o+(e[s]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),i]})(e,t);if(this.el=ae.createElement(d,s),ne.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(i=ne.nextNode())&&a.length<r;){if(1===i.nodeType){{const e=i.localName;if(/^(?:textarea|template)$/i.test(e)&&i.innerHTML.includes(R)){const t=`Expressions are not supported inside \`${e}\` elements. See https://lit.dev/msg/expression-in-${e} for more information.`;if("template"===e)throw new Error(t);C("",t)}}if(i.hasAttributes())for(const e of i.getAttributeNames())if(e.endsWith(L)){const t=l[o++],s=i.getAttribute(e).split(R),r=/([.?@])?(.*)/.exec(t);a.push({type:1,index:n,name:r[2],strings:s,ctor:"."===r[1]?pe:"?"===r[1]?ue:"@"===r[1]?me:he}),i.removeAttribute(e)}else e.startsWith(R)&&(a.push({type:6,index:n}),i.removeAttribute(e));if(G.test(i.tagName)){const e=i.textContent.split(R),t=e.length-1;if(t>0){i.textContent=N?N.emptyScript:"";for(let s=0;s<t;s++)i.append(e[s],j()),ne.nextNode(),a.push({type:2,index:++n});i.append(e[t],j())}}}else if(8===i.nodeType){if(i.data===W)a.push({type:2,index:n});else{let e=-1;for(;-1!==(e=i.data.indexOf(R,e+1));)a.push({type:7,index:n}),e+=R.length-1}}n++}if(l.length!==o)throw new Error('Detected duplicate attribute bindings. This occurs if your template has duplicate attributes on an element tag. For example "<input ?disabled=${true} ?disabled=${false}>" contains a duplicate "disabled" attribute. The error was detected in the following template: \n`'+e.join("${...}")+"`");E&&E({kind:"template prep",template:this,clonableTemplate:this.el,parts:this.parts,strings:e})}static createElement(e,t){const s=I.createElement("template");return s.innerHTML=e,s}}function de(e,t,s=e,i){if(t===te)return t;let n=void 0!==i?s.__directives?.[i]:s.__directive;const o=q(t)?void 0:t._$litDirective$;return n?.constructor!==o&&(n?._$notifyDirectiveConnectionChanged?.(!1),void 0===o?n=void 0:(n=new o(e),n._$initialize(e,s,i)),void 0!==i?(s.__directives??=[])[i]=n:s.__directive=n),void 0!==n&&(t=de(e,n._$resolve(e,t.values),n,i)),t}class le{constructor(e,t){this._$parts=[],this._$disconnectableChildren=void 0,this._$template=e,this._$parent=t}get parentNode(){return this._$parent.parentNode}get _$isConnected(){return this._$parent._$isConnected}_clone(e){const{el:{content:t},parts:s}=this._$template,i=(e?.creationScope??I).importNode(t,!0);ne.currentNode=i;let n=ne.nextNode(),o=0,r=0,a=s[0];for(;void 0!==a;){if(o===a.index){let t;2===a.type?t=new ce(n,n.nextSibling,this,e):1===a.type?t=new a.ctor(n,a.name,a.strings,this,e):6===a.type&&(t=new ge(n,this,e)),this._$parts.push(t),a=s[++r]}o!==a?.index&&(n=ne.nextNode(),o++)}return ne.currentNode=I,i}_update(e){let t=0;for(const s of this._$parts)void 0!==s&&(E&&E({kind:"set part",part:s,value:e[t],valueIndex:t,values:e,templateInstance:this}),void 0!==s.strings?(s._$setValue(e,s,t),t+=s.strings.length-2):s._$setValue(e[t])),t++}}class ce{get _$isConnected(){return this._$parent?._$isConnected??this.__isConnected}constructor(e,t,s,i){this.type=2,this._$committedValue=se,this._$disconnectableChildren=void 0,this._$startNode=e,this._$endNode=t,this._$parent=s,this.options=i,this.__isConnected=i?.isConnected??!0,this._textSanitizer=void 0}get parentNode(){let e=T(this._$startNode).parentNode;const t=this._$parent;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$startNode}get endNode(){return this._$endNode}_$setValue(e,t=this){if(null===this.parentNode)throw new Error("This `ChildPart` has no `parentNode` and therefore cannot accept a value. This likely means the element containing the part was manipulated in an unsupported way outside of Lit's control such that the part's marker nodes were ejected from DOM. For example, setting the element's `innerHTML` or `textContent` can do this.");if(e=de(this,e,t),q(e))e===se||null==e||""===e?(this._$committedValue!==se&&(E&&E({kind:"commit nothing to child",start:this._$startNode,end:this._$endNode,parent:this._$parent,options:this.options}),this._$clear()),this._$committedValue=se):e!==this._$committedValue&&e!==te&&this._commitText(e);else if(void 0!==e._$litType$)this._commitTemplateResult(e);else if(void 0!==e.nodeType){if(this.options?.host===e)return this._commitText("[probable mistake: rendered a template's host in itself (commonly caused by writing ${this} in a template]"),void console.warn("Attempted to render the template host",e,"inside itself. This is almost always a mistake, and in dev mode ","we render some warning text. In production however, we'll ","render it, which will usually result in an error, and sometimes ","in the element disappearing from the DOM.");this._commitNode(e)}else(e=>H(e)||"function"==typeof e?.[Symbol.iterator])(e)?this._commitIterable(e):this._commitText(e)}_insert(e){return T(T(this._$startNode).parentNode).insertBefore(e,this._$endNode)}_commitNode(e){if(this._$committedValue!==e){if(this._$clear(),oe!==M){const e=this._$startNode.parentNode?.nodeName;if("STYLE"===e||"SCRIPT"===e){let t="Forbidden";throw t="STYLE"===e?"Lit does not support binding inside style nodes. This is a security risk, as style injection attacks can exfiltrate data and spoof UIs. Consider instead using css`...` literals to compose styles, and do dynamic styling with css custom properties, ::parts, <slot>s, and by mutating the DOM rather than stylesheets.":"Lit does not support binding inside script nodes. This is a security risk, as it could allow arbitrary code execution.",new Error(t)}}E&&E({kind:"commit node",start:this._$startNode,parent:this._$parent,value:e,options:this.options}),this._$committedValue=this._insert(e)}}_commitText(e){if(this._$committedValue!==se&&q(this._$committedValue)){const t=T(this._$startNode).nextSibling;void 0===this._textSanitizer&&(this._textSanitizer=A(t,"data","property")),e=this._textSanitizer(e),E&&E({kind:"commit text",node:t,value:e,options:this.options}),t.data=e}else{const t=I.createTextNode("");this._commitNode(t),void 0===this._textSanitizer&&(this._textSanitizer=A(t,"data","property")),e=this._textSanitizer(e),E&&E({kind:"commit text",node:t,value:e,options:this.options}),t.data=e}this._$committedValue=e}_commitTemplateResult(e){const{values:t,_$litType$:s}=e,i="number"==typeof s?this._$getTemplate(e):(void 0===s.el&&(s.el=ae.createElement(re(s.h,s.h[0]),this.options)),s);if(this._$committedValue?._$template===i)E&&E({kind:"template updating",template:i,instance:this._$committedValue,parts:this._$committedValue._$parts,options:this.options,values:t}),this._$committedValue._update(t);else{const e=new le(i,this),s=e._clone(this.options);E&&E({kind:"template instantiated",template:i,instance:e,parts:e._$parts,options:this.options,fragment:s,values:t}),e._update(t),E&&E({kind:"template instantiated and updated",template:i,instance:e,parts:e._$parts,options:this.options,fragment:s,values:t}),this._commitNode(s),this._$committedValue=e}}_$getTemplate(e){let t=ie.get(e.strings);return void 0===t&&ie.set(e.strings,t=new ae(e)),t}_commitIterable(e){H(this._$committedValue)||(this._$committedValue=[],this._$clear());const t=this._$committedValue;let s,i=0;for(const n of e)i===t.length?t.push(s=new ce(this._insert(j()),this._insert(j()),this,this.options)):s=t[i],s._$setValue(n),i++;i<t.length&&(this._$clear(s&&T(s._$endNode).nextSibling,i),t.length=i)}_$clear(e=T(this._$startNode).nextSibling,t){for(this._$notifyConnectionChanged?.(!1,!0,t);e!==this._$endNode;){const t=T(e).nextSibling;T(e).remove(),e=t}}setConnected(e){if(void 0!==this._$parent)throw new Error("part.setConnected() may only be called on a RootPart returned from render().");this.__isConnected=e,this._$notifyConnectionChanged?.(e)}}class he{get tagName(){return this.element.tagName}get _$isConnected(){return this._$parent._$isConnected}constructor(e,t,s,i,n){this.type=1,this._$committedValue=se,this._$disconnectableChildren=void 0,this.element=e,this.name=t,this._$parent=i,this.options=n,s.length>2||""!==s[0]||""!==s[1]?(this._$committedValue=new Array(s.length-1).fill(new String),this.strings=s):this._$committedValue=se,this._sanitizer=void 0}_$setValue(e,t=this,s,i){const n=this.strings;let o=!1;if(void 0===n)e=de(this,e,t,0),o=!q(e)||e!==this._$committedValue&&e!==te,o&&(this._$committedValue=e);else{const i=e;let r,a;for(e=n[0],r=0;r<n.length-1;r++)a=de(this,i[s+r],t,r),a===te&&(a=this._$committedValue[r]),o||=!q(a)||a!==this._$committedValue[r],a===se?e=se:e!==se&&(e+=(a??"")+n[r+1]),this._$committedValue[r]=a}o&&!i&&this._commitValue(e)}_commitValue(e){e===se?T(this.element).removeAttribute(this.name):(void 0===this._sanitizer&&(this._sanitizer=oe(this.element,this.name,"attribute")),e=this._sanitizer(e??""),E&&E({kind:"commit attribute",element:this.element,name:this.name,value:e,options:this.options}),T(this.element).setAttribute(this.name,e??""))}}class pe extends he{constructor(){super(...arguments),this.type=3}_commitValue(e){void 0===this._sanitizer&&(this._sanitizer=oe(this.element,this.name,"property")),e=this._sanitizer(e),E&&E({kind:"commit property",element:this.element,name:this.name,value:e,options:this.options}),this.element[this.name]=e===se?void 0:e}}class ue extends he{constructor(){super(...arguments),this.type=4}_commitValue(e){E&&E({kind:"commit boolean attribute",element:this.element,name:this.name,value:!(!e||e===se),options:this.options}),T(this.element).toggleAttribute(this.name,!!e&&e!==se)}}class me extends he{constructor(e,t,s,i,n){if(super(e,t,s,i,n),this.type=5,void 0!==this.strings)throw new Error(`A \`<${e.localName}>\` has a \`@${t}=...\` listener with invalid content. Event listeners in templates must have exactly one expression and no surrounding text.`)}_$setValue(e,t=this){if((e=de(this,e,t,0)??se)===te)return;const s=this._$committedValue,i=e===se&&s!==se||e.capture!==s.capture||e.once!==s.once||e.passive!==s.passive,n=e!==se&&(s===se||i);E&&E({kind:"commit event listener",element:this.element,name:this.name,value:e,options:this.options,removeListener:i,addListener:n,oldListener:s}),i&&this.element.removeEventListener(this.name,this,s),n&&this.element.addEventListener(this.name,this,e),this._$committedValue=e}handleEvent(e){"function"==typeof this._$committedValue?this._$committedValue.call(this.options?.host??this.element,e):this._$committedValue.handleEvent(e)}}class ge{constructor(e,t,s){this.element=e,this.type=6,this._$disconnectableChildren=void 0,this._$parent=t,this.options=s}get _$isConnected(){return this._$parent._$isConnected}_$setValue(e){E&&E({kind:"commit to element binding",element:this.element,value:e,options:this.options}),de(this,e)}}const fe=x.litHtmlPolyfillSupportDevMode;fe?.(ae,ce),(x.litHtmlVersions??=[]).push("3.3.2"),x.litHtmlVersions.length>1&&queueMicrotask(()=>{C("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")});const ve=(e,t,s)=>{if(null==t)throw new TypeError(`The container to render into may not be ${t}`);const i=k++,n=s?.renderBefore??t;let o=n._$litPart$;if(E&&E({kind:"begin render",id:i,value:e,container:t,options:s,part:o}),void 0===o){const e=s?.renderBefore??null;n._$litPart$=o=new ce(t.insertBefore(j(),e),e,void 0,s??{})}return o._$setValue(e),E&&E({kind:"end render",id:i,value:e,container:t,options:s,part:o}),o};ve.setSanitizer=V,ve.createSanitizer=A,ve._testOnlyClearSanitizerFactoryDoNotCallOrElse=z;
|
|
13
|
+
const x=globalThis,C=e=>{x.emitLitDebugLogEvents&&x.dispatchEvent(new CustomEvent("lit-debug",{detail:e}))};let E,k=0;x.litIssuedWarnings??=new Set,E=(e,t)=>{t+=e?` See https://lit.dev/msg/${e} for more information.`:"",x.litIssuedWarnings.has(t)||x.litIssuedWarnings.has(e)||(console.warn(t),x.litIssuedWarnings.add(t))},queueMicrotask(()=>{E("dev-mode","Lit is in dev mode. Not recommended for production!")});const T=x.ShadyDOM?.inUse&&!0===x.ShadyDOM?.noPatch?x.ShadyDOM.wrap:e=>e,N=x.trustedTypes,U=N?N.createPolicy("lit-html",{createHTML:e=>e}):void 0,O=e=>e,M=(e,t,s)=>O,V=e=>{if(oe!==M)throw new Error("Attempted to overwrite existing lit-html security policy. setSanitizeDOMValueFactory should be called at most once.");oe=e},z=()=>{oe=M},A=(e,t,s)=>oe(e,t,s),L="$lit$",R=`lit$${Math.random().toFixed(9).slice(2)}$`,W="?"+R,D=`<${W}>`,I=document,j=()=>I.createComment(""),q=e=>null===e||"object"!=typeof e&&"function"!=typeof e,H=Array.isArray,F="[ \t\n\f\r]",B=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Z=/-->/g,J=/>/g,K=new RegExp(`>|${F}(?:([^\\s"'>=/]+)(${F}*=${F}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),Y=/'/g,X=/"/g,G=/^(?:script|style|textarea|title)$/i,Q=(ee=1,(e,...t)=>(e.some(e=>void 0===e)&&console.warn("Some template strings are undefined.\nThis is probably caused by illegal octal escape sequences."),t.some(e=>e?._$litStatic$)&&E("","Static values 'literal' or 'unsafeStatic' cannot be used as values to non-static templates.\nPlease use the static 'html' tag function. See https://lit.dev/docs/templates/expressions/#static-expressions"),{_$litType$:ee,strings:e,values:t}));var ee;const te=Symbol.for("lit-noChange"),se=Symbol.for("lit-nothing"),ie=new WeakMap,ne=I.createTreeWalker(I,129);let oe=M;function re(e,t){if(!H(e)||!e.hasOwnProperty("raw")){let e="invalid template strings array";throw e="\n Internal Error: expected template strings to be an array\n with a 'raw' field. Faking a template strings array by\n calling html or svg like an ordinary function is effectively\n the same as calling unsafeHtml and can lead to major security\n issues, e.g. opening your code up to XSS attacks.\n If you're using the html or svg tagged template functions normally\n and still seeing this error, please file a bug at\n https://github.com/lit/lit/issues/new?template=bug_report.md\n and include information about your build tooling, if any.\n ".trim().replace(/\n */g,"\n"),new Error(e)}return void 0!==U?U.createHTML(t):t}class ae{constructor({strings:e,_$litType$:t},s){let i;this.parts=[];let n=0,o=0;const r=e.length-1,a=this.parts,[d,l]=((e,t)=>{const s=e.length-1,i=[];let n,o=2===t?"<svg>":3===t?"<math>":"",r=B;for(let t=0;t<s;t++){const s=e[t];let a,d,l=-1,c=0;for(;c<s.length&&(r.lastIndex=c,d=r.exec(s),null!==d);)if(c=r.lastIndex,r===B){if("!--"===d[1])r=Z;else if(void 0!==d[1])r=J;else if(void 0!==d[2])G.test(d[2])&&(n=new RegExp(`</${d[2]}`,"g")),r=K;else if(void 0!==d[3])throw new Error("Bindings in tag names are not supported. Please use static templates instead. See https://lit.dev/docs/templates/expressions/#static-expressions")}else r===K?">"===d[0]?(r=n??B,l=-1):void 0===d[1]?l=-2:(l=r.lastIndex-d[2].length,a=d[1],r=void 0===d[3]?K:'"'===d[3]?X:Y):r===X||r===Y?r=K:r===Z||r===J?r=B:(r=K,n=void 0);console.assert(-1===l||r===K||r===Y||r===X,"unexpected parse state B");const h=r===K&&e[t+1].startsWith("/>")?" ":"";o+=r===B?s+D:l>=0?(i.push(a),s.slice(0,l)+L+s.slice(l)+R+h):s+R+(-2===l?t:h)}return[re(e,o+(e[s]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),i]})(e,t);if(this.el=ae.createElement(d,s),ne.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(i=ne.nextNode())&&a.length<r;){if(1===i.nodeType){{const e=i.localName;if(/^(?:textarea|template)$/i.test(e)&&i.innerHTML.includes(R)){const t=`Expressions are not supported inside \`${e}\` elements. See https://lit.dev/msg/expression-in-${e} for more information.`;if("template"===e)throw new Error(t);E("",t)}}if(i.hasAttributes())for(const e of i.getAttributeNames())if(e.endsWith(L)){const t=l[o++],s=i.getAttribute(e).split(R),r=/([.?@])?(.*)/.exec(t);a.push({type:1,index:n,name:r[2],strings:s,ctor:"."===r[1]?pe:"?"===r[1]?ue:"@"===r[1]?me:he}),i.removeAttribute(e)}else e.startsWith(R)&&(a.push({type:6,index:n}),i.removeAttribute(e));if(G.test(i.tagName)){const e=i.textContent.split(R),t=e.length-1;if(t>0){i.textContent=N?N.emptyScript:"";for(let s=0;s<t;s++)i.append(e[s],j()),ne.nextNode(),a.push({type:2,index:++n});i.append(e[t],j())}}}else if(8===i.nodeType){if(i.data===W)a.push({type:2,index:n});else{let e=-1;for(;-1!==(e=i.data.indexOf(R,e+1));)a.push({type:7,index:n}),e+=R.length-1}}n++}if(l.length!==o)throw new Error('Detected duplicate attribute bindings. This occurs if your template has duplicate attributes on an element tag. For example "<input ?disabled=${true} ?disabled=${false}>" contains a duplicate "disabled" attribute. The error was detected in the following template: \n`'+e.join("${...}")+"`");C&&C({kind:"template prep",template:this,clonableTemplate:this.el,parts:this.parts,strings:e})}static createElement(e,t){const s=I.createElement("template");return s.innerHTML=e,s}}function de(e,t,s=e,i){if(t===te)return t;let n=void 0!==i?s.__directives?.[i]:s.__directive;const o=q(t)?void 0:t._$litDirective$;return n?.constructor!==o&&(n?._$notifyDirectiveConnectionChanged?.(!1),void 0===o?n=void 0:(n=new o(e),n._$initialize(e,s,i)),void 0!==i?(s.__directives??=[])[i]=n:s.__directive=n),void 0!==n&&(t=de(e,n._$resolve(e,t.values),n,i)),t}class le{constructor(e,t){this._$parts=[],this._$disconnectableChildren=void 0,this._$template=e,this._$parent=t}get parentNode(){return this._$parent.parentNode}get _$isConnected(){return this._$parent._$isConnected}_clone(e){const{el:{content:t},parts:s}=this._$template,i=(e?.creationScope??I).importNode(t,!0);ne.currentNode=i;let n=ne.nextNode(),o=0,r=0,a=s[0];for(;void 0!==a;){if(o===a.index){let t;2===a.type?t=new ce(n,n.nextSibling,this,e):1===a.type?t=new a.ctor(n,a.name,a.strings,this,e):6===a.type&&(t=new ge(n,this,e)),this._$parts.push(t),a=s[++r]}o!==a?.index&&(n=ne.nextNode(),o++)}return ne.currentNode=I,i}_update(e){let t=0;for(const s of this._$parts)void 0!==s&&(C&&C({kind:"set part",part:s,value:e[t],valueIndex:t,values:e,templateInstance:this}),void 0!==s.strings?(s._$setValue(e,s,t),t+=s.strings.length-2):s._$setValue(e[t])),t++}}class ce{get _$isConnected(){return this._$parent?._$isConnected??this.__isConnected}constructor(e,t,s,i){this.type=2,this._$committedValue=se,this._$disconnectableChildren=void 0,this._$startNode=e,this._$endNode=t,this._$parent=s,this.options=i,this.__isConnected=i?.isConnected??!0,this._textSanitizer=void 0}get parentNode(){let e=T(this._$startNode).parentNode;const t=this._$parent;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$startNode}get endNode(){return this._$endNode}_$setValue(e,t=this){if(null===this.parentNode)throw new Error("This `ChildPart` has no `parentNode` and therefore cannot accept a value. This likely means the element containing the part was manipulated in an unsupported way outside of Lit's control such that the part's marker nodes were ejected from DOM. For example, setting the element's `innerHTML` or `textContent` can do this.");if(e=de(this,e,t),q(e))e===se||null==e||""===e?(this._$committedValue!==se&&(C&&C({kind:"commit nothing to child",start:this._$startNode,end:this._$endNode,parent:this._$parent,options:this.options}),this._$clear()),this._$committedValue=se):e!==this._$committedValue&&e!==te&&this._commitText(e);else if(void 0!==e._$litType$)this._commitTemplateResult(e);else if(void 0!==e.nodeType){if(this.options?.host===e)return this._commitText("[probable mistake: rendered a template's host in itself (commonly caused by writing ${this} in a template]"),void console.warn("Attempted to render the template host",e,"inside itself. This is almost always a mistake, and in dev mode ","we render some warning text. In production however, we'll ","render it, which will usually result in an error, and sometimes ","in the element disappearing from the DOM.");this._commitNode(e)}else(e=>H(e)||"function"==typeof e?.[Symbol.iterator])(e)?this._commitIterable(e):this._commitText(e)}_insert(e){return T(T(this._$startNode).parentNode).insertBefore(e,this._$endNode)}_commitNode(e){if(this._$committedValue!==e){if(this._$clear(),oe!==M){const e=this._$startNode.parentNode?.nodeName;if("STYLE"===e||"SCRIPT"===e){let t="Forbidden";throw t="STYLE"===e?"Lit does not support binding inside style nodes. This is a security risk, as style injection attacks can exfiltrate data and spoof UIs. Consider instead using css`...` literals to compose styles, and do dynamic styling with css custom properties, ::parts, <slot>s, and by mutating the DOM rather than stylesheets.":"Lit does not support binding inside script nodes. This is a security risk, as it could allow arbitrary code execution.",new Error(t)}}C&&C({kind:"commit node",start:this._$startNode,parent:this._$parent,value:e,options:this.options}),this._$committedValue=this._insert(e)}}_commitText(e){if(this._$committedValue!==se&&q(this._$committedValue)){const t=T(this._$startNode).nextSibling;void 0===this._textSanitizer&&(this._textSanitizer=A(t,"data","property")),e=this._textSanitizer(e),C&&C({kind:"commit text",node:t,value:e,options:this.options}),t.data=e}else{const t=I.createTextNode("");this._commitNode(t),void 0===this._textSanitizer&&(this._textSanitizer=A(t,"data","property")),e=this._textSanitizer(e),C&&C({kind:"commit text",node:t,value:e,options:this.options}),t.data=e}this._$committedValue=e}_commitTemplateResult(e){const{values:t,_$litType$:s}=e,i="number"==typeof s?this._$getTemplate(e):(void 0===s.el&&(s.el=ae.createElement(re(s.h,s.h[0]),this.options)),s);if(this._$committedValue?._$template===i)C&&C({kind:"template updating",template:i,instance:this._$committedValue,parts:this._$committedValue._$parts,options:this.options,values:t}),this._$committedValue._update(t);else{const e=new le(i,this),s=e._clone(this.options);C&&C({kind:"template instantiated",template:i,instance:e,parts:e._$parts,options:this.options,fragment:s,values:t}),e._update(t),C&&C({kind:"template instantiated and updated",template:i,instance:e,parts:e._$parts,options:this.options,fragment:s,values:t}),this._commitNode(s),this._$committedValue=e}}_$getTemplate(e){let t=ie.get(e.strings);return void 0===t&&ie.set(e.strings,t=new ae(e)),t}_commitIterable(e){H(this._$committedValue)||(this._$committedValue=[],this._$clear());const t=this._$committedValue;let s,i=0;for(const n of e)i===t.length?t.push(s=new ce(this._insert(j()),this._insert(j()),this,this.options)):s=t[i],s._$setValue(n),i++;i<t.length&&(this._$clear(s&&T(s._$endNode).nextSibling,i),t.length=i)}_$clear(e=T(this._$startNode).nextSibling,t){for(this._$notifyConnectionChanged?.(!1,!0,t);e!==this._$endNode;){const t=T(e).nextSibling;T(e).remove(),e=t}}setConnected(e){if(void 0!==this._$parent)throw new Error("part.setConnected() may only be called on a RootPart returned from render().");this.__isConnected=e,this._$notifyConnectionChanged?.(e)}}class he{get tagName(){return this.element.tagName}get _$isConnected(){return this._$parent._$isConnected}constructor(e,t,s,i,n){this.type=1,this._$committedValue=se,this._$disconnectableChildren=void 0,this.element=e,this.name=t,this._$parent=i,this.options=n,s.length>2||""!==s[0]||""!==s[1]?(this._$committedValue=new Array(s.length-1).fill(new String),this.strings=s):this._$committedValue=se,this._sanitizer=void 0}_$setValue(e,t=this,s,i){const n=this.strings;let o=!1;if(void 0===n)e=de(this,e,t,0),o=!q(e)||e!==this._$committedValue&&e!==te,o&&(this._$committedValue=e);else{const i=e;let r,a;for(e=n[0],r=0;r<n.length-1;r++)a=de(this,i[s+r],t,r),a===te&&(a=this._$committedValue[r]),o||=!q(a)||a!==this._$committedValue[r],a===se?e=se:e!==se&&(e+=(a??"")+n[r+1]),this._$committedValue[r]=a}o&&!i&&this._commitValue(e)}_commitValue(e){e===se?T(this.element).removeAttribute(this.name):(void 0===this._sanitizer&&(this._sanitizer=oe(this.element,this.name,"attribute")),e=this._sanitizer(e??""),C&&C({kind:"commit attribute",element:this.element,name:this.name,value:e,options:this.options}),T(this.element).setAttribute(this.name,e??""))}}class pe extends he{constructor(){super(...arguments),this.type=3}_commitValue(e){void 0===this._sanitizer&&(this._sanitizer=oe(this.element,this.name,"property")),e=this._sanitizer(e),C&&C({kind:"commit property",element:this.element,name:this.name,value:e,options:this.options}),this.element[this.name]=e===se?void 0:e}}class ue extends he{constructor(){super(...arguments),this.type=4}_commitValue(e){C&&C({kind:"commit boolean attribute",element:this.element,name:this.name,value:!(!e||e===se),options:this.options}),T(this.element).toggleAttribute(this.name,!!e&&e!==se)}}class me extends he{constructor(e,t,s,i,n){if(super(e,t,s,i,n),this.type=5,void 0!==this.strings)throw new Error(`A \`<${e.localName}>\` has a \`@${t}=...\` listener with invalid content. Event listeners in templates must have exactly one expression and no surrounding text.`)}_$setValue(e,t=this){if((e=de(this,e,t,0)??se)===te)return;const s=this._$committedValue,i=e===se&&s!==se||e.capture!==s.capture||e.once!==s.once||e.passive!==s.passive,n=e!==se&&(s===se||i);C&&C({kind:"commit event listener",element:this.element,name:this.name,value:e,options:this.options,removeListener:i,addListener:n,oldListener:s}),i&&this.element.removeEventListener(this.name,this,s),n&&this.element.addEventListener(this.name,this,e),this._$committedValue=e}handleEvent(e){"function"==typeof this._$committedValue?this._$committedValue.call(this.options?.host??this.element,e):this._$committedValue.handleEvent(e)}}class ge{constructor(e,t,s){this.element=e,this.type=6,this._$disconnectableChildren=void 0,this._$parent=t,this.options=s}get _$isConnected(){return this._$parent._$isConnected}_$setValue(e){C&&C({kind:"commit to element binding",element:this.element,value:e,options:this.options}),de(this,e)}}const fe=x.litHtmlPolyfillSupportDevMode;fe?.(ae,ce),(x.litHtmlVersions??=[]).push("3.3.2"),x.litHtmlVersions.length>1&&queueMicrotask(()=>{E("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")});const ve=(e,t,s)=>{if(null==t)throw new TypeError(`The container to render into may not be ${t}`);const i=k++,n=s?.renderBefore??t;let o=n._$litPart$;if(C&&C({kind:"begin render",id:i,value:e,container:t,options:s,part:o}),void 0===o){const e=s?.renderBefore??null;n._$litPart$=o=new ce(t.insertBefore(j(),e),e,void 0,s??{})}return o._$setValue(e),C&&C({kind:"end render",id:i,value:e,container:t,options:s,part:o}),o};ve.setSanitizer=V,ve.createSanitizer=A,ve._testOnlyClearSanitizerFactoryDoNotCallOrElse=z;
|
|
14
14
|
/**
|
|
15
15
|
* @license
|
|
16
16
|
* Copyright 2017 Google LLC
|
|
@@ -22,26 +22,26 @@ const ye=globalThis;let be;ye.litIssuedWarnings??=new Set,be=(e,t)=>{t+=` See ht
|
|
|
22
22
|
* Copyright 2017 Google LLC
|
|
23
23
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
24
24
|
*/
|
|
25
|
-
let Se;$e?.({LitElement:_e}),(ye.litElementVersions??=[]).push("4.2.2"),ye.litElementVersions.length>1&&queueMicrotask(()=>{be("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")}),globalThis.litIssuedWarnings??=new Set,Se=(e,t)=>{t+=` See https://lit.dev/msg/${e} for more information.`,globalThis.litIssuedWarnings.has(t)||globalThis.litIssuedWarnings.has(e)||(console.warn(t),globalThis.litIssuedWarnings.add(t))};const Pe={attribute:!0,type:String,converter:w,reflect:!1,hasChanged:$},xe=(e=Pe,t,s)=>{const{kind:i,metadata:n}=s;null==n&&Se("missing-class-metadata",`The class ${t} is missing decorator metadata. This could mean that you're using a compiler that supports decorators but doesn't support decorator metadata, such as TypeScript 5.1. Please update your compiler.`);let o=globalThis.litPropertyMetadata.get(n);if(void 0===o&&globalThis.litPropertyMetadata.set(n,o=new Map),"setter"===i&&((e=Object.create(e)).wrapped=!0),o.set(s.name,e),"accessor"===i){const{name:i}=s;return{set(s){const n=t.get.call(this);t.set.call(this,s),this.requestUpdate(i,n,e,!0,s)},init(t){return void 0!==t&&this._$changeProperty(i,void 0,e,t),t}}}if("setter"===i){const{name:i}=s;return function(s){const n=this[i];t.call(this,s),this.requestUpdate(i,n,e,!0,s)}}throw new Error(`Unsupported decorator location: ${i}`)};function
|
|
25
|
+
let Se;$e?.({LitElement:_e}),(ye.litElementVersions??=[]).push("4.2.2"),ye.litElementVersions.length>1&&queueMicrotask(()=>{be("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")}),globalThis.litIssuedWarnings??=new Set,Se=(e,t)=>{t+=` See https://lit.dev/msg/${e} for more information.`,globalThis.litIssuedWarnings.has(t)||globalThis.litIssuedWarnings.has(e)||(console.warn(t),globalThis.litIssuedWarnings.add(t))};const Pe={attribute:!0,type:String,converter:w,reflect:!1,hasChanged:$},xe=(e=Pe,t,s)=>{const{kind:i,metadata:n}=s;null==n&&Se("missing-class-metadata",`The class ${t} is missing decorator metadata. This could mean that you're using a compiler that supports decorators but doesn't support decorator metadata, such as TypeScript 5.1. Please update your compiler.`);let o=globalThis.litPropertyMetadata.get(n);if(void 0===o&&globalThis.litPropertyMetadata.set(n,o=new Map),"setter"===i&&((e=Object.create(e)).wrapped=!0),o.set(s.name,e),"accessor"===i){const{name:i}=s;return{set(s){const n=t.get.call(this);t.set.call(this,s),this.requestUpdate(i,n,e,!0,s)},init(t){return void 0!==t&&this._$changeProperty(i,void 0,e,t),t}}}if("setter"===i){const{name:i}=s;return function(s){const n=this[i];t.call(this,s),this.requestUpdate(i,n,e,!0,s)}}throw new Error(`Unsupported decorator location: ${i}`)};function Ce(e){return(t,s)=>"object"==typeof s?xe(e,t,s):((e,t,s)=>{const i=t.hasOwnProperty(s);return t.constructor.createProperty(s,e),i?Object.getOwnPropertyDescriptor(t,s):void 0})(e,t,s)}
|
|
26
26
|
/**
|
|
27
27
|
* @license
|
|
28
28
|
* Copyright 2017 Google LLC
|
|
29
29
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
30
|
-
*/const
|
|
30
|
+
*/const Ee=(e,t,s)=>(s.configurable=!0,s.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,s),s);
|
|
31
31
|
/**
|
|
32
32
|
* @license
|
|
33
33
|
* Copyright 2017 Google LLC
|
|
34
34
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
35
|
-
*/let ke;function Te(e,t){return(s,i,n)=>{const o=s=>{const n=s.renderRoot?.querySelector(e)??null;if(null===n&&t&&!s.hasUpdated){const t="object"==typeof i?i.name:i;ke("",`@query'd field ${JSON.stringify(String(t))} with the 'cache' flag set for selector '${e}' has been accessed before the first update and returned null. This is expected if the renderRoot tree has not been provided beforehand (e.g. via Declarative Shadow DOM). Therefore the value hasn't been cached.`)}return n};if(t){const{get:e,set:t}="object"==typeof i?s:n??(()=>{const e=Symbol(`${String(i)} (@query() cache)`);return{get(){return this[e]},set(t){this[e]=t}}})();return
|
|
35
|
+
*/let ke;function Te(e,t){return(s,i,n)=>{const o=s=>{const n=s.renderRoot?.querySelector(e)??null;if(null===n&&t&&!s.hasUpdated){const t="object"==typeof i?i.name:i;ke("",`@query'd field ${JSON.stringify(String(t))} with the 'cache' flag set for selector '${e}' has been accessed before the first update and returned null. This is expected if the renderRoot tree has not been provided beforehand (e.g. via Declarative Shadow DOM). Therefore the value hasn't been cached.`)}return n};if(t){const{get:e,set:t}="object"==typeof i?s:n??(()=>{const e=Symbol(`${String(i)} (@query() cache)`);return{get(){return this[e]},set(t){this[e]=t}}})();return Ee(s,i,{get(){let s=e.call(this);return void 0===s&&(s=o(this),(null!==s||this.hasUpdated)&&t.call(this,s)),s}})}return Ee(s,i,{get(){return o(this)}})}}
|
|
36
36
|
/**
|
|
37
37
|
* @license
|
|
38
38
|
* Copyright 2021 Google LLC
|
|
39
39
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
40
|
-
*/globalThis.litIssuedWarnings??=new Set,ke=(e,t)=>{t+=e?` See https://lit.dev/msg/${e} for more information.`:"",globalThis.litIssuedWarnings.has(t)||globalThis.litIssuedWarnings.has(e)||(console.warn(t),globalThis.litIssuedWarnings.add(t))};var Ne=r`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-16);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-24);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:top;width:1em}::slotted(svg){vertical-align:middle}}`;class Ue extends _e{emit(e,t){const s=new CustomEvent(e,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},t));return this.dispatchEvent(s),s}static define(e,t=this,s={}){if(customElements.get(e));else try{customElements.define(e,t,s)}catch(i){customElements.define(e,class extends t{},s)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach(([e,t])=>{this.constructor.define(e,t)})}firstUpdated(e){var t;super.firstUpdated(e),this.ssr&&(null===(t=this.shadowRoot)||void 0===t||t.querySelectorAll("slot").forEach(e=>{e.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))}))}}Ue.styles=[Ne],Ue.dependencies={},e([
|
|
40
|
+
*/globalThis.litIssuedWarnings??=new Set,ke=(e,t)=>{t+=e?` See https://lit.dev/msg/${e} for more information.`:"",globalThis.litIssuedWarnings.has(t)||globalThis.litIssuedWarnings.has(e)||(console.warn(t),globalThis.litIssuedWarnings.add(t))};var Ne=r`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-16);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-24);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:top;width:1em}::slotted(svg){vertical-align:middle}}`;class Ue extends _e{emit(e,t){const s=new CustomEvent(e,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},t));return this.dispatchEvent(s),s}static define(e,t=this,s={}){if(customElements.get(e));else try{customElements.define(e,t,s)}catch(i){customElements.define(e,class extends t{},s)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach(([e,t])=>{this.constructor.define(e,t)})}firstUpdated(e){var t;super.firstUpdated(e),this.ssr&&(null===(t=this.shadowRoot)||void 0===t||t.querySelectorAll("slot").forEach(e=>{e.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))}))}}Ue.styles=[Ne],Ue.dependencies={},e([Ce({type:Boolean,reflect:!0})],Ue.prototype,"ssr",void 0);var Oe=r`:host([variant=border]) .accordion{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-md)}`;const Me=["Enter","ArrowUp","ArrowLeft","ArrowDown","ArrowRight"];class Ve extends Ue{constructor(){super(...arguments),this.allowMultiple=!1,this.variant="default",this.density="default"}get items(){return[...this.defaultNodes||[]].filter(e=>void 0!==e.tagName)}_handleSlotChange(){const e=[...this.items];e.forEach((t,s)=>{if(e.length>1)switch(s){case 0:t.setAttribute("first-of-type","");break;case e.length-1:t.setAttribute("last-of-type","");break;default:t.setAttribute("nth-of-type","")}t.setAttribute("variant",this.variant),t.setAttribute("density",this.density)})}async _onToggle(e){if(this.allowMultiple)return;const t=[...this.items];t&&!t.length||t.forEach(t=>{e.composedPath().includes(t)||(t.open=!1)})}async _onKeyboardToggle(e){if(Me.includes(e.key))return this._onToggle(e)}render(){return Q`
|
|
41
41
|
<div class="accordion">
|
|
42
|
-
<slot @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>
|
|
42
|
+
<slot @slotchange=${this._handleSlotChange} @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>
|
|
43
43
|
</div>
|
|
44
|
-
`}}var ze;Ve.styles=[...Ue.styles,Oe],e([
|
|
44
|
+
`}}var ze;Ve.styles=[...Ue.styles,Oe],e([Ce({type:Boolean,reflect:!0})],Ve.prototype,"allowMultiple",void 0),e([Ce({type:String,reflect:!0})],Ve.prototype,"variant",void 0),e([Ce({type:String,reflect:!0})],Ve.prototype,"density",void 0),e([(e,t)=>{const{slot:s,selector:i}=ze??{},n="slot"+(s?`[name=${s}]`:":not([name])");return Ee(e,t,{get(){const e=this.renderRoot?.querySelector(n),t=e?.assignedElements(ze)??[];return void 0===i?t:t.filter(e=>e.matches(i))}})}],Ve.prototype,"defaultNodes",void 0);
|
|
45
45
|
/**
|
|
46
46
|
* @license
|
|
47
47
|
* Copyright 2017 Google LLC
|
|
@@ -76,5 +76,5 @@ const Ae=1;class Le{constructor(e){}get _$isConnected(){return this._$parent._$i
|
|
|
76
76
|
<slot id="content" name="content" class="content" role="region" aria-labelledby="header"></slot>
|
|
77
77
|
</div>
|
|
78
78
|
</div>
|
|
79
|
-
`}}function Xe(e,t){customElements.get(e)||customElements.define(e,t)}Ye.styles=[...Ue.styles,Ke],e([Te(".accordion-item")],Ye.prototype,"accordion",void 0),e([Te(".accordion-btn")],Ye.prototype,"header",void 0),e([Te(".accordion-body")],Ye.prototype,"body",void 0),e([
|
|
79
|
+
`}}function Xe(e,t){customElements.get(e)||customElements.define(e,t)}Ye.styles=[...Ue.styles,Ke],e([Te(".accordion-item")],Ye.prototype,"accordion",void 0),e([Te(".accordion-btn")],Ye.prototype,"header",void 0),e([Te(".accordion-body")],Ye.prototype,"body",void 0),e([Ce({type:Boolean,reflect:!0})],Ye.prototype,"open",void 0),e([Ce({type:Boolean,reflect:!0})],Ye.prototype,"disabled",void 0),e([function(e,t){const s=Object.assign({waitUntilFirstUpdate:!1},t);return(t,i)=>{const{update:n}=t;if(e in t){const o=e;t.update=function(e){if(e.has(o)){const t=e.get(o),n=this[o];t!==n&&(s.waitUntilFirstUpdate&&!this.hasUpdated||this[i](t,n))}n.call(this,e)}}}}("open",{waitUntilFirstUpdate:!0})],Ye.prototype,"handleOpenChange",null),Ze("accordion.show",{keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:350,easing:"ease-in-out"}}),Ze("accordion.hide",{keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:350,easing:"ease-in-out"}}),Xe("sgds-accordion",Ve),Xe("sgds-accordion-item",Ye)});
|
|
80
80
|
//# sourceMappingURL=index.umd.min.js.map
|