@getflip/swirl-components 0.220.0 → 0.220.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/components.json +1 -1
- package/dist/cjs/swirl-shell-layout.cjs.entry.js +14 -6
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.js +14 -6
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.spec.js +5 -0
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.stories.js +33 -23
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-shell-layout.js +14 -6
- package/dist/esm/swirl-shell-layout.entry.js +14 -6
- package/dist/swirl-components/p-1c0f8418.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-shell-layout/swirl-shell-layout.d.ts +1 -0
- package/package.json +1 -1
- package/dist/swirl-components/p-cbc04aaa.entry.js +0 -1
package/components.json
CHANGED
|
@@ -94,12 +94,21 @@ const SwirlShellLayout = class {
|
|
|
94
94
|
});
|
|
95
95
|
this.toggleNavItemLabels();
|
|
96
96
|
this.setSecondaryNavItemsTiled();
|
|
97
|
+
this.navMutationObserver = new MutationObserver(() => {
|
|
98
|
+
this.collectNavItems();
|
|
99
|
+
this.setSecondaryNavItemsTiled();
|
|
100
|
+
});
|
|
101
|
+
this.navMutationObserver.observe(this.navElement, {
|
|
102
|
+
childList: true,
|
|
103
|
+
subtree: true,
|
|
104
|
+
});
|
|
97
105
|
}
|
|
98
106
|
componentDidRender() {
|
|
99
107
|
this.focusTrap?.updateContainerElements(this.navElement);
|
|
100
108
|
}
|
|
101
109
|
disconnectedCallback() {
|
|
102
110
|
this.focusTrap?.deactivate();
|
|
111
|
+
this.navMutationObserver?.disconnect();
|
|
103
112
|
}
|
|
104
113
|
onWindowKeyDown(event) {
|
|
105
114
|
if (event.key === "Escape" && this.mobileNavigationActive) {
|
|
@@ -141,7 +150,6 @@ const SwirlShellLayout = class {
|
|
|
141
150
|
item.hideLabel =
|
|
142
151
|
!!(this.enableSecondaryNavGridLayout && this.navigationCollapsed) ||
|
|
143
152
|
(!this.enableSecondaryNavGridLayout && this.navigationCollapsed);
|
|
144
|
-
console.log(this.enableSecondaryNavGridLayout && this.navigationCollapsed);
|
|
145
153
|
});
|
|
146
154
|
}
|
|
147
155
|
setSecondaryNavItemsTiled() {
|
|
@@ -161,22 +169,22 @@ const SwirlShellLayout = class {
|
|
|
161
169
|
"shell-layout--navigation-collapsed": this.navigationCollapsed,
|
|
162
170
|
"shell-layout--sidebar-active": this.sidebarActive,
|
|
163
171
|
});
|
|
164
|
-
return (index.h(index.Host, { key: '
|
|
172
|
+
return (index.h(index.Host, { key: 'adc9e2fc265a9433423eee24356217b4f092e8b6' }, index.h("div", { key: 'b3730a8f4f0d38758b26064105889e9ac601792a', class: className }, index.h("header", { key: '53b44a20ee908f56478c22ad480c10af8e39207c', class: "shell-layout__header", "data-tauri-drag-region": "true" }, index.h("button", { key: '3e1af2d0750924f10c9249cae89669a23b81f7de', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), index.h("div", { key: 'facbc861dab6ca4ac345d712cc95f0e1e80cf332', class: "shell-layout__header-left" }, index.h("button", { key: 'af58135756e998be3dda22ce984a4a6665e53152', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, index.h("swirl-icon-dock-left", { key: 'bd9e8c166ff79094593a36746b7d76658768f70b', size: 20 }), index.h("swirl-visually-hidden", { key: '7b17513abe295dd3e898f3c972dbbd04e8d8e432' }, this.navigationToggleLabel)), index.h("a", { key: 'b11db23915c0c6e08d5ae73b4e3121b718b1ba60', class: "shell-layout__header-tool", href: "javascript:history.back()" }, index.h("swirl-icon-arrow-back", { key: 'e55bf3c9f653257bc6813cba251e94a56f6809ed', size: 20 }), index.h("swirl-visually-hidden", { key: '1d9ed2b3315d620b53ba186d5c6e4910cb817469' }, this.browserBackButtonLabel)), index.h("a", { key: '0309c1d01ed19133465ce57d38e6566212cd4d2d', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, index.h("swirl-icon-arrow-forward", { key: '8b36cbfbbd95d43c371ec2ae679b2c6cfc9cf9b6', size: 20 }), index.h("swirl-visually-hidden", { key: '0636c9e162db5687f2201f3ecefbd73ab138492e' }, this.browserForwardButtonLabel)), index.h("slot", { key: 'ff204208cfc3d964de19cf34282151231feffca2', name: "left-header-tools" })), index.h("div", { key: '3b67421fadb8ae927b41e8a880673d4231a702d8', class: "shell-layout__logo" }, index.h("slot", { key: '30e035a1e2019df1c8e0c4753986b838d80b2d43', name: "logo" })), index.h("div", { key: '3a820a285768c3a01df5ce3c27c7a6327f99fbfd', class: "shell-layout__header-right" }, index.h("slot", { key: '92eec4f65e57bfa62de2f946488e3dbcc5a55ac5', name: "right-header-tools" }), index.h("button", { key: 'bcb9abe9b026fa5a0bdd8e6a756c87bca571015b', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, index.h("swirl-icon", { key: 'a5c2cfd085fa5e2e562444bd0dafe7e752c437b8', glyph: this.sidebarToggleIcon, size: 20 }), index.h("swirl-visually-hidden", { key: 'bbead2f6466b45151e9b4564bbb8add03b877bb9' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (index.h("swirl-badge", { key: 'fb11e5178a9ff012f644cece32ad6ce517cba230', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
|
|
165
173
|
? this.sidebarToggleBadgeAriaLabel
|
|
166
|
-
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), index.h("slot", { key: '
|
|
174
|
+
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), index.h("slot", { key: '99ee33d8b3dff40ce4b534266fbdafc4dabf40d3', name: "avatar" }))), index.h("div", { key: '1e07aec21223b6b1277a1f736305204a9d051c69', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), index.h("nav", { key: '593f2d068ec0dcf1161b7f95474611cd0e68a6ef', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, index.h("div", { key: 'a5c91123dd243bace517da12663747fc3ad71e10', class: "shell-layout__mobile-header" }, index.h("slot", { key: '1294c6603ac3d687cad4d009f28b651d4f57f451', name: "mobile-logo" }), index.h("div", { key: '17e63882a7961b5b4284565d548955ba2d6c56d0', class: "shell-layout__mobile-header-tools" }, index.h("slot", { key: 'c032f2ed1c52472666d62dea4fb2e4d3d31b6be1', name: "mobile-header-tools" }), index.h("button", { key: 'c3dfbf08c35f2725160a2288b25c306efd0fcf1e', class: "shell-layout__header-tool", type: "button" }, index.h("swirl-icon-double-arrow-left", { key: 'b05634fac98129147a4509c4461b48c28ed698f7', size: 20 }), index.h("swirl-visually-hidden", { key: 'b49b592652e0c4377e99934a18d0a81dcbcea55f' }, this.hideMobileNavigationButtonLabel)))), index.h("div", { key: '537391a48cc90659e367cb933c0625ef1b32146e', class: "shell-layout__nav-body" }, index.h("swirl-visually-hidden", { key: 'ba3f245289fada7bb8fc0b5c38d1f1c0a43f667d' }, index.h("span", { key: '7d1808931d93a88dd35746a5df8057f6e5aa46fd', id: "main-navigation-label" }, this.navigationLabel)), index.h("slot", { key: '3a082bac6933f9de6972ec0b69190c5ba6352405', name: "nav", onSlotchange: this.collectNavItems }), index.h("div", { key: 'c70a7ccf4d2408b05a8e74b378f9f32bb28fb6fa', class: "shell-layout__secondary-nav" }, index.h("swirl-separator", { key: '2e961f628c249b66a10121ee936924ff26f272a3', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (index.h("swirl-box", { key: 'a554a1070e79b14aac46bc0c73272071c3cc8866', paddingBlockEnd: "16" }, index.h("swirl-stack", { key: '333b1102a5900d06d5b27c9755e1e65132b248f6', justify: this.navigationCollapsed ? "center" : "space-between", orientation: "horizontal" }, index.h("swirl-button", { key: 'b3c51308bfb1067e6fc34b26e09efac5e8d251ac', hideLabel: this.navigationCollapsed, icon: this.secondaryNavCollapsed
|
|
167
175
|
? "<swirl-icon-expand-more></swirl-icon-expand-more>"
|
|
168
176
|
: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
|
|
169
177
|
? this.secondaryNavExpandLabel
|
|
170
178
|
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !this.navigationCollapsed &&
|
|
171
|
-
!this.secondaryNavCollapsed && (index.h("swirl-button", { key: '
|
|
179
|
+
!this.secondaryNavCollapsed && (index.h("swirl-button", { key: '907779e749bf62369d80c8c9ede8b29c1f8875ee', icon: this.secondaryNavView === "grid"
|
|
172
180
|
? "<swirl-icon-menu></swirl-icon-menu>"
|
|
173
181
|
: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
|
|
174
182
|
? this.gridNavLayoutToggleLabel
|
|
175
|
-
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), index.h("ul", { key: '
|
|
183
|
+
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), index.h("ul", { key: '329aa0e2fc43a301b935580e136dff2ded4f3278', class: {
|
|
176
184
|
"shell-layout__secondary-nav-items": true,
|
|
177
185
|
"shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
|
|
178
186
|
this.secondaryNavView === "grid",
|
|
179
|
-
} }, index.h("slot", { key: '
|
|
187
|
+
} }, index.h("slot", { key: '422269185dc3b2b3c6cea0a09e7857128e50af71', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), index.h("main", { key: 'ea6015af362cfff1535995a4bc9b0188378ef755', class: "shell-layout__main", id: "main-content" }, index.h("slot", { key: '71863925b9b8e4430e236920edec978e3852dd2e' })), index.h("aside", { key: 'ece8a7300a11336a48769ccbcb11e769ce0f82d6', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, index.h("div", { key: '3eceb6b713a38976380315d20b98ece681fc43cd', class: "shell-layout__sidebar-body" }, index.h("div", { key: '4848e6a1069a475ddc43b0a29f789be5aae0314a', class: "shell-layout__sidebar-app-bar" }, index.h("slot", { key: '3889563150445f7fb0d1825441488946f14c3a71', name: "sidebar-app-bar" })), index.h("div", { key: '4247f7afb9c55615d039ef9758a3407163f00c99', class: "shell-layout__sidebar-content" }, index.h("slot", { key: '74e5c9a3d91ff76381431a1319d323f285003a24', name: "sidebar" })))))));
|
|
180
188
|
}
|
|
181
189
|
get el() { return index.getElement(this); }
|
|
182
190
|
static get watchers() { return {
|