@govtechsg/sgds-web-component 3.21.2-rc.2 → 3.21.2-rc.3
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/components/Sidebar/index.umd.min.js +3 -1
- package/components/Sidebar/index.umd.min.js.map +1 -1
- package/components/Sidebar/sgds-sidebar-group.js +3 -1
- package/components/Sidebar/sgds-sidebar-group.js.map +1 -1
- package/components/index.umd.min.js +3 -1
- package/components/index.umd.min.js.map +1 -1
- package/custom-elements.json +1 -1
- package/index.umd.min.js +3 -1
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/components/Sidebar/sgds-sidebar-group.cjs.js +3 -1
- package/react/components/Sidebar/sgds-sidebar-group.cjs.js.map +1 -1
- package/react/components/Sidebar/sgds-sidebar-group.js +3 -1
- package/react/components/Sidebar/sgds-sidebar-group.js.map +1 -1
package/package.json
CHANGED
|
@@ -88,12 +88,14 @@ class SgdsSidebarGroup extends sidebarElement.SidebarElement {
|
|
|
88
88
|
render() {
|
|
89
89
|
return lit.html `
|
|
90
90
|
<div
|
|
91
|
+
role="button"
|
|
91
92
|
class=${classMap_js.classMap({
|
|
92
93
|
"sidebar-item": true,
|
|
93
94
|
"sidebar-item--collapsed": !this._isOverlay && this._sidebarCollapsed && this._childLevel === 1,
|
|
94
95
|
active: this._selected
|
|
95
96
|
})}
|
|
96
97
|
@click=${() => this._handleClick()}
|
|
98
|
+
aria-label=${this.title || this.name}
|
|
97
99
|
aria-expanded=${this._showMenu}
|
|
98
100
|
tabindex=${this._childLevel > 2 && !this._showMenu ? -1 : 0}
|
|
99
101
|
>
|
|
@@ -105,7 +107,7 @@ class SgdsSidebarGroup extends sidebarElement.SidebarElement {
|
|
|
105
107
|
|
|
106
108
|
<span class="sidebar-item-indicator">
|
|
107
109
|
<slot name="indicator"></slot>
|
|
108
|
-
<sgds-icon
|
|
110
|
+
<sgds-icon name=${this._getIcon()} size="sm"></sgds-icon>
|
|
109
111
|
</span>
|
|
110
112
|
</div>
|
|
111
113
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-sidebar-group.cjs.js","sources":["../../../../src/components/Sidebar/sgds-sidebar-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarOptionStyle from \"./sidebar-item.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { watch } from \"../../utils/watch\";\n\nimport { SidebarElement } from \"./sidebar-element\";\n\n/**\n * @summary Sidebar group represents a navigable parent item within the sidebar that can have nested children.\n * Groups support multiple levels of nesting and show nested items in a drawer overlay or submenu.\n * Groups can be used to organize related sidebar items into expanding/collapsing sections.\n *\n * Behavior varies by nesting level:\n * - Level 1 (root): Clicking opens drawer overlay showing all nested children. Keyboard: ArrowRight opens drawer.\n * - Level 2+ (nested): Clicking toggles submenu visibility. Keyboard: ArrowRight toggles submenu.\n *\n * @slot default - Insert sgds-sidebar-group or sgds-sidebar-item elements as nested children\n * @slot indicator - Display after the label text. A chevron is auto-appended. Typically used to show badges or other indicators for the group.\n *\n */\nexport class SgdsSidebarGroup extends SidebarElement {\n static styles = [...SgdsElement.styles, sidebarOptionStyle];\n\n /** @internal */\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /**\n * Manages submenu visibility state for nested groups (level 2+).\n * When true, nested children are displayed. When false, they are hidden.\n * Root-level groups use drawer overlay instead of submenu.\n * @internal\n */\n @state() private _showMenu = false;\n\n /**\n * Reports the visibility state of the submenu for nested groups.\n * Returns true when the submenu is displayed showing child items, false when hidden.\n * Only applicable for nested groups (level 2+). Root-level groups use drawer overlay instead.\n * @readonly\n * @type {boolean}\n */\n get showMenu(): boolean {\n return this._showMenu;\n }\n\n /**\n * Reacts to the active item context changing. If the newly active item is a descendant\n * of this group, expand the submenu without external callers touching internal state.\n * @internal\n */\n @watch(\"_sidebarActiveItem\")\n _handleActiveItemContext() {\n if (this._childLevel > 1 && this._sidebarActiveItem && this.contains(this._sidebarActiveItem)) {\n this._showMenu = true;\n }\n }\n\n /** @internal */\n protected override _handleClick(): void {\n if (this._childLevel !== 1) {\n this._showMenu = !this._showMenu;\n this._childElements.forEach(v => {\n v._hidden = !this._showMenu;\n });\n } else {\n super._handleClick();\n }\n }\n /**\n * Determines the appropriate chevron icon based on nesting level and submenu state.\n * Provides visual feedback for expandable/collapsible state:\n * - Level 1: chevron-right (drawer controlled by parent)\n * - Level 2+: chevron-down (open), chevron-up (closed)\n * @internal\n * @returns {string} Icon name to display\n */\n private _getIcon() {\n if (this._childLevel === 1) {\n return \"chevron-right\";\n } else {\n return this._showMenu ? \"chevron-down\" : \"chevron-up\";\n }\n }\n\n render() {\n return html`\n <div\n class=${classMap({\n \"sidebar-item\": true,\n \"sidebar-item--collapsed\": !this._isOverlay && this._sidebarCollapsed && this._childLevel === 1,\n active: this._selected\n })}\n @click=${() => this._handleClick()}\n aria-expanded=${this._showMenu}\n tabindex=${this._childLevel > 2 && !this._showMenu ? -1 : 0}\n >\n <div class=\"sidebar-item-label-wrapper\">\n <div>\n <slot name=\"icon\"></slot>\n <span class=\"sidebar-item-label\">${this.title}</span>\n </div>\n\n <span class=\"sidebar-item-indicator\">\n <slot name=\"indicator\"></slot>\n <sgds-icon
|
|
1
|
+
{"version":3,"file":"sgds-sidebar-group.cjs.js","sources":["../../../../src/components/Sidebar/sgds-sidebar-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarOptionStyle from \"./sidebar-item.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { watch } from \"../../utils/watch\";\n\nimport { SidebarElement } from \"./sidebar-element\";\n\n/**\n * @summary Sidebar group represents a navigable parent item within the sidebar that can have nested children.\n * Groups support multiple levels of nesting and show nested items in a drawer overlay or submenu.\n * Groups can be used to organize related sidebar items into expanding/collapsing sections.\n *\n * Behavior varies by nesting level:\n * - Level 1 (root): Clicking opens drawer overlay showing all nested children. Keyboard: ArrowRight opens drawer.\n * - Level 2+ (nested): Clicking toggles submenu visibility. Keyboard: ArrowRight toggles submenu.\n *\n * @slot default - Insert sgds-sidebar-group or sgds-sidebar-item elements as nested children\n * @slot indicator - Display after the label text. A chevron is auto-appended. Typically used to show badges or other indicators for the group.\n *\n */\nexport class SgdsSidebarGroup extends SidebarElement {\n static styles = [...SgdsElement.styles, sidebarOptionStyle];\n\n /** @internal */\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /**\n * Manages submenu visibility state for nested groups (level 2+).\n * When true, nested children are displayed. When false, they are hidden.\n * Root-level groups use drawer overlay instead of submenu.\n * @internal\n */\n @state() private _showMenu = false;\n\n /**\n * Reports the visibility state of the submenu for nested groups.\n * Returns true when the submenu is displayed showing child items, false when hidden.\n * Only applicable for nested groups (level 2+). Root-level groups use drawer overlay instead.\n * @readonly\n * @type {boolean}\n */\n get showMenu(): boolean {\n return this._showMenu;\n }\n\n /**\n * Reacts to the active item context changing. If the newly active item is a descendant\n * of this group, expand the submenu without external callers touching internal state.\n * @internal\n */\n @watch(\"_sidebarActiveItem\")\n _handleActiveItemContext() {\n if (this._childLevel > 1 && this._sidebarActiveItem && this.contains(this._sidebarActiveItem)) {\n this._showMenu = true;\n }\n }\n\n /** @internal */\n protected override _handleClick(): void {\n if (this._childLevel !== 1) {\n this._showMenu = !this._showMenu;\n this._childElements.forEach(v => {\n v._hidden = !this._showMenu;\n });\n } else {\n super._handleClick();\n }\n }\n /**\n * Determines the appropriate chevron icon based on nesting level and submenu state.\n * Provides visual feedback for expandable/collapsible state:\n * - Level 1: chevron-right (drawer controlled by parent)\n * - Level 2+: chevron-down (open), chevron-up (closed)\n * @internal\n * @returns {string} Icon name to display\n */\n private _getIcon() {\n if (this._childLevel === 1) {\n return \"chevron-right\";\n } else {\n return this._showMenu ? \"chevron-down\" : \"chevron-up\";\n }\n }\n\n render() {\n return html`\n <div\n role=\"button\"\n class=${classMap({\n \"sidebar-item\": true,\n \"sidebar-item--collapsed\": !this._isOverlay && this._sidebarCollapsed && this._childLevel === 1,\n active: this._selected\n })}\n @click=${() => this._handleClick()}\n aria-label=${this.title || this.name}\n aria-expanded=${this._showMenu}\n tabindex=${this._childLevel > 2 && !this._showMenu ? -1 : 0}\n >\n <div class=\"sidebar-item-label-wrapper\">\n <div>\n <slot name=\"icon\"></slot>\n <span class=\"sidebar-item-label\">${this.title}</span>\n </div>\n\n <span class=\"sidebar-item-indicator\">\n <slot name=\"indicator\"></slot>\n <sgds-icon name=${this._getIcon()} size=\"sm\"></sgds-icon>\n </span>\n </div>\n </div>\n\n <div\n class=${classMap({\n \"sidebar-submenu\": true,\n \"sidebar-submenu--collapsed\": this._sidebarCollapsed && this._childLevel == 1,\n show: this._showMenu\n })}\n >\n <div>\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsSidebarGroup;\n"],"names":["SidebarElement","html","classMap","SgdsElement","sidebarOptionStyle","SgdsIcon","__decorate","state","watch"],"mappings":"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"}
|
|
@@ -84,12 +84,14 @@ class SgdsSidebarGroup extends SidebarElement {
|
|
|
84
84
|
render() {
|
|
85
85
|
return html `
|
|
86
86
|
<div
|
|
87
|
+
role="button"
|
|
87
88
|
class=${classMap({
|
|
88
89
|
"sidebar-item": true,
|
|
89
90
|
"sidebar-item--collapsed": !this._isOverlay && this._sidebarCollapsed && this._childLevel === 1,
|
|
90
91
|
active: this._selected
|
|
91
92
|
})}
|
|
92
93
|
@click=${() => this._handleClick()}
|
|
94
|
+
aria-label=${this.title || this.name}
|
|
93
95
|
aria-expanded=${this._showMenu}
|
|
94
96
|
tabindex=${this._childLevel > 2 && !this._showMenu ? -1 : 0}
|
|
95
97
|
>
|
|
@@ -101,7 +103,7 @@ class SgdsSidebarGroup extends SidebarElement {
|
|
|
101
103
|
|
|
102
104
|
<span class="sidebar-item-indicator">
|
|
103
105
|
<slot name="indicator"></slot>
|
|
104
|
-
<sgds-icon
|
|
106
|
+
<sgds-icon name=${this._getIcon()} size="sm"></sgds-icon>
|
|
105
107
|
</span>
|
|
106
108
|
</div>
|
|
107
109
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-sidebar-group.js","sources":["../../../../src/components/Sidebar/sgds-sidebar-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarOptionStyle from \"./sidebar-item.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { watch } from \"../../utils/watch\";\n\nimport { SidebarElement } from \"./sidebar-element\";\n\n/**\n * @summary Sidebar group represents a navigable parent item within the sidebar that can have nested children.\n * Groups support multiple levels of nesting and show nested items in a drawer overlay or submenu.\n * Groups can be used to organize related sidebar items into expanding/collapsing sections.\n *\n * Behavior varies by nesting level:\n * - Level 1 (root): Clicking opens drawer overlay showing all nested children. Keyboard: ArrowRight opens drawer.\n * - Level 2+ (nested): Clicking toggles submenu visibility. Keyboard: ArrowRight toggles submenu.\n *\n * @slot default - Insert sgds-sidebar-group or sgds-sidebar-item elements as nested children\n * @slot indicator - Display after the label text. A chevron is auto-appended. Typically used to show badges or other indicators for the group.\n *\n */\nexport class SgdsSidebarGroup extends SidebarElement {\n static styles = [...SgdsElement.styles, sidebarOptionStyle];\n\n /** @internal */\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /**\n * Manages submenu visibility state for nested groups (level 2+).\n * When true, nested children are displayed. When false, they are hidden.\n * Root-level groups use drawer overlay instead of submenu.\n * @internal\n */\n @state() private _showMenu = false;\n\n /**\n * Reports the visibility state of the submenu for nested groups.\n * Returns true when the submenu is displayed showing child items, false when hidden.\n * Only applicable for nested groups (level 2+). Root-level groups use drawer overlay instead.\n * @readonly\n * @type {boolean}\n */\n get showMenu(): boolean {\n return this._showMenu;\n }\n\n /**\n * Reacts to the active item context changing. If the newly active item is a descendant\n * of this group, expand the submenu without external callers touching internal state.\n * @internal\n */\n @watch(\"_sidebarActiveItem\")\n _handleActiveItemContext() {\n if (this._childLevel > 1 && this._sidebarActiveItem && this.contains(this._sidebarActiveItem)) {\n this._showMenu = true;\n }\n }\n\n /** @internal */\n protected override _handleClick(): void {\n if (this._childLevel !== 1) {\n this._showMenu = !this._showMenu;\n this._childElements.forEach(v => {\n v._hidden = !this._showMenu;\n });\n } else {\n super._handleClick();\n }\n }\n /**\n * Determines the appropriate chevron icon based on nesting level and submenu state.\n * Provides visual feedback for expandable/collapsible state:\n * - Level 1: chevron-right (drawer controlled by parent)\n * - Level 2+: chevron-down (open), chevron-up (closed)\n * @internal\n * @returns {string} Icon name to display\n */\n private _getIcon() {\n if (this._childLevel === 1) {\n return \"chevron-right\";\n } else {\n return this._showMenu ? \"chevron-down\" : \"chevron-up\";\n }\n }\n\n render() {\n return html`\n <div\n class=${classMap({\n \"sidebar-item\": true,\n \"sidebar-item--collapsed\": !this._isOverlay && this._sidebarCollapsed && this._childLevel === 1,\n active: this._selected\n })}\n @click=${() => this._handleClick()}\n aria-expanded=${this._showMenu}\n tabindex=${this._childLevel > 2 && !this._showMenu ? -1 : 0}\n >\n <div class=\"sidebar-item-label-wrapper\">\n <div>\n <slot name=\"icon\"></slot>\n <span class=\"sidebar-item-label\">${this.title}</span>\n </div>\n\n <span class=\"sidebar-item-indicator\">\n <slot name=\"indicator\"></slot>\n <sgds-icon
|
|
1
|
+
{"version":3,"file":"sgds-sidebar-group.js","sources":["../../../../src/components/Sidebar/sgds-sidebar-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarOptionStyle from \"./sidebar-item.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { watch } from \"../../utils/watch\";\n\nimport { SidebarElement } from \"./sidebar-element\";\n\n/**\n * @summary Sidebar group represents a navigable parent item within the sidebar that can have nested children.\n * Groups support multiple levels of nesting and show nested items in a drawer overlay or submenu.\n * Groups can be used to organize related sidebar items into expanding/collapsing sections.\n *\n * Behavior varies by nesting level:\n * - Level 1 (root): Clicking opens drawer overlay showing all nested children. Keyboard: ArrowRight opens drawer.\n * - Level 2+ (nested): Clicking toggles submenu visibility. Keyboard: ArrowRight toggles submenu.\n *\n * @slot default - Insert sgds-sidebar-group or sgds-sidebar-item elements as nested children\n * @slot indicator - Display after the label text. A chevron is auto-appended. Typically used to show badges or other indicators for the group.\n *\n */\nexport class SgdsSidebarGroup extends SidebarElement {\n static styles = [...SgdsElement.styles, sidebarOptionStyle];\n\n /** @internal */\n static dependencies = {\n \"sgds-icon\": SgdsIcon\n };\n\n /**\n * Manages submenu visibility state for nested groups (level 2+).\n * When true, nested children are displayed. When false, they are hidden.\n * Root-level groups use drawer overlay instead of submenu.\n * @internal\n */\n @state() private _showMenu = false;\n\n /**\n * Reports the visibility state of the submenu for nested groups.\n * Returns true when the submenu is displayed showing child items, false when hidden.\n * Only applicable for nested groups (level 2+). Root-level groups use drawer overlay instead.\n * @readonly\n * @type {boolean}\n */\n get showMenu(): boolean {\n return this._showMenu;\n }\n\n /**\n * Reacts to the active item context changing. If the newly active item is a descendant\n * of this group, expand the submenu without external callers touching internal state.\n * @internal\n */\n @watch(\"_sidebarActiveItem\")\n _handleActiveItemContext() {\n if (this._childLevel > 1 && this._sidebarActiveItem && this.contains(this._sidebarActiveItem)) {\n this._showMenu = true;\n }\n }\n\n /** @internal */\n protected override _handleClick(): void {\n if (this._childLevel !== 1) {\n this._showMenu = !this._showMenu;\n this._childElements.forEach(v => {\n v._hidden = !this._showMenu;\n });\n } else {\n super._handleClick();\n }\n }\n /**\n * Determines the appropriate chevron icon based on nesting level and submenu state.\n * Provides visual feedback for expandable/collapsible state:\n * - Level 1: chevron-right (drawer controlled by parent)\n * - Level 2+: chevron-down (open), chevron-up (closed)\n * @internal\n * @returns {string} Icon name to display\n */\n private _getIcon() {\n if (this._childLevel === 1) {\n return \"chevron-right\";\n } else {\n return this._showMenu ? \"chevron-down\" : \"chevron-up\";\n }\n }\n\n render() {\n return html`\n <div\n role=\"button\"\n class=${classMap({\n \"sidebar-item\": true,\n \"sidebar-item--collapsed\": !this._isOverlay && this._sidebarCollapsed && this._childLevel === 1,\n active: this._selected\n })}\n @click=${() => this._handleClick()}\n aria-label=${this.title || this.name}\n aria-expanded=${this._showMenu}\n tabindex=${this._childLevel > 2 && !this._showMenu ? -1 : 0}\n >\n <div class=\"sidebar-item-label-wrapper\">\n <div>\n <slot name=\"icon\"></slot>\n <span class=\"sidebar-item-label\">${this.title}</span>\n </div>\n\n <span class=\"sidebar-item-indicator\">\n <slot name=\"indicator\"></slot>\n <sgds-icon name=${this._getIcon()} size=\"sm\"></sgds-icon>\n </span>\n </div>\n </div>\n\n <div\n class=${classMap({\n \"sidebar-submenu\": true,\n \"sidebar-submenu--collapsed\": this._sidebarCollapsed && this._childLevel == 1,\n show: this._showMenu\n })}\n >\n <div>\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsSidebarGroup;\n"],"names":["sidebarOptionStyle"],"mappings":"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"}
|