@getflip/swirl-components 0.220.0 → 0.220.2
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 +15 -7
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.css +13 -12
- 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 +29 -17
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-shell-layout.js +15 -7
- package/dist/esm/swirl-shell-layout.entry.js +15 -7
- package/dist/swirl-components/p-f15c968c.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
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view ::slotted(*) {
|
|
89
|
+
.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view ::slotted(ul > *) {
|
|
90
90
|
max-width: 100%;
|
|
91
91
|
flex-basis: 100%;
|
|
92
92
|
max-height: 3rem;
|
|
@@ -424,20 +424,21 @@
|
|
|
424
424
|
display: none;
|
|
425
425
|
}
|
|
426
426
|
|
|
427
|
-
.shell-layout__secondary-nav-items {
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
}
|
|
427
|
+
.shell-layout__secondary-nav-items ::slotted(ul) {
|
|
428
|
+
display: flex;
|
|
429
|
+
flex-direction: column;
|
|
430
|
+
gap: var(--s-space-2);
|
|
431
|
+
}
|
|
432
432
|
|
|
433
|
-
.shell-layout__secondary-nav-items--grid-view {
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
}
|
|
433
|
+
.shell-layout__secondary-nav-items--grid-view ::slotted(ul) {
|
|
434
|
+
flex-direction: row;
|
|
435
|
+
flex-wrap: wrap;
|
|
436
|
+
gap: var(--s-space-16);
|
|
437
|
+
}
|
|
438
438
|
|
|
439
|
-
.shell-layout__secondary-nav-items--grid-view ::slotted(*) {
|
|
439
|
+
.shell-layout__secondary-nav-items--grid-view ::slotted(ul > *) {
|
|
440
440
|
flex-basis: calc(50% - var(--s-space-8));
|
|
441
|
+
max-height: none;
|
|
441
442
|
}
|
|
442
443
|
|
|
443
444
|
.shell-layout__main {
|
|
@@ -95,12 +95,21 @@ export class SwirlShellLayout {
|
|
|
95
95
|
});
|
|
96
96
|
this.toggleNavItemLabels();
|
|
97
97
|
this.setSecondaryNavItemsTiled();
|
|
98
|
+
this.navMutationObserver = new MutationObserver(() => {
|
|
99
|
+
this.collectNavItems();
|
|
100
|
+
this.setSecondaryNavItemsTiled();
|
|
101
|
+
});
|
|
102
|
+
this.navMutationObserver.observe(this.navElement, {
|
|
103
|
+
childList: true,
|
|
104
|
+
subtree: true,
|
|
105
|
+
});
|
|
98
106
|
}
|
|
99
107
|
componentDidRender() {
|
|
100
108
|
this.focusTrap?.updateContainerElements(this.navElement);
|
|
101
109
|
}
|
|
102
110
|
disconnectedCallback() {
|
|
103
111
|
this.focusTrap?.deactivate();
|
|
112
|
+
this.navMutationObserver?.disconnect();
|
|
104
113
|
}
|
|
105
114
|
onWindowKeyDown(event) {
|
|
106
115
|
if (event.key === "Escape" && this.mobileNavigationActive) {
|
|
@@ -142,7 +151,6 @@ export class SwirlShellLayout {
|
|
|
142
151
|
item.hideLabel =
|
|
143
152
|
!!(this.enableSecondaryNavGridLayout && this.navigationCollapsed) ||
|
|
144
153
|
(!this.enableSecondaryNavGridLayout && this.navigationCollapsed);
|
|
145
|
-
console.log(this.enableSecondaryNavGridLayout && this.navigationCollapsed);
|
|
146
154
|
});
|
|
147
155
|
}
|
|
148
156
|
setSecondaryNavItemsTiled() {
|
|
@@ -162,22 +170,22 @@ export class SwirlShellLayout {
|
|
|
162
170
|
"shell-layout--navigation-collapsed": this.navigationCollapsed,
|
|
163
171
|
"shell-layout--sidebar-active": this.sidebarActive,
|
|
164
172
|
});
|
|
165
|
-
return (h(Host, { key: '
|
|
173
|
+
return (h(Host, { key: 'adc9e2fc265a9433423eee24356217b4f092e8b6' }, h("div", { key: 'b3730a8f4f0d38758b26064105889e9ac601792a', class: className }, h("header", { key: '53b44a20ee908f56478c22ad480c10af8e39207c', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '3e1af2d0750924f10c9249cae89669a23b81f7de', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: 'facbc861dab6ca4ac345d712cc95f0e1e80cf332', class: "shell-layout__header-left" }, h("button", { key: 'af58135756e998be3dda22ce984a4a6665e53152', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-dock-left", { key: 'bd9e8c166ff79094593a36746b7d76658768f70b', size: 20 }), h("swirl-visually-hidden", { key: '7b17513abe295dd3e898f3c972dbbd04e8d8e432' }, this.navigationToggleLabel)), h("a", { key: 'b11db23915c0c6e08d5ae73b4e3121b718b1ba60', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: 'e55bf3c9f653257bc6813cba251e94a56f6809ed', size: 20 }), h("swirl-visually-hidden", { key: '1d9ed2b3315d620b53ba186d5c6e4910cb817469' }, this.browserBackButtonLabel)), h("a", { key: '0309c1d01ed19133465ce57d38e6566212cd4d2d', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '8b36cbfbbd95d43c371ec2ae679b2c6cfc9cf9b6', size: 20 }), h("swirl-visually-hidden", { key: '0636c9e162db5687f2201f3ecefbd73ab138492e' }, this.browserForwardButtonLabel)), h("slot", { key: 'ff204208cfc3d964de19cf34282151231feffca2', name: "left-header-tools" })), h("div", { key: '3b67421fadb8ae927b41e8a880673d4231a702d8', class: "shell-layout__logo" }, h("slot", { key: '30e035a1e2019df1c8e0c4753986b838d80b2d43', name: "logo" })), h("div", { key: '3a820a285768c3a01df5ce3c27c7a6327f99fbfd', class: "shell-layout__header-right" }, h("slot", { key: '92eec4f65e57bfa62de2f946488e3dbcc5a55ac5', name: "right-header-tools" }), h("button", { key: 'bcb9abe9b026fa5a0bdd8e6a756c87bca571015b', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: 'a5c2cfd085fa5e2e562444bd0dafe7e752c437b8', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: 'bbead2f6466b45151e9b4564bbb8add03b877bb9' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: 'fb11e5178a9ff012f644cece32ad6ce517cba230', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
|
|
166
174
|
? this.sidebarToggleBadgeAriaLabel
|
|
167
|
-
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '
|
|
175
|
+
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '99ee33d8b3dff40ce4b534266fbdafc4dabf40d3', name: "avatar" }))), h("div", { key: '1e07aec21223b6b1277a1f736305204a9d051c69', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '593f2d068ec0dcf1161b7f95474611cd0e68a6ef', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'a5c91123dd243bace517da12663747fc3ad71e10', class: "shell-layout__mobile-header" }, h("slot", { key: '1294c6603ac3d687cad4d009f28b651d4f57f451', name: "mobile-logo" }), h("div", { key: '17e63882a7961b5b4284565d548955ba2d6c56d0', class: "shell-layout__mobile-header-tools" }, h("slot", { key: 'c032f2ed1c52472666d62dea4fb2e4d3d31b6be1', name: "mobile-header-tools" }), h("button", { key: 'c3dfbf08c35f2725160a2288b25c306efd0fcf1e', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'b05634fac98129147a4509c4461b48c28ed698f7', size: 20 }), h("swirl-visually-hidden", { key: 'b49b592652e0c4377e99934a18d0a81dcbcea55f' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '537391a48cc90659e367cb933c0625ef1b32146e', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: 'ba3f245289fada7bb8fc0b5c38d1f1c0a43f667d' }, h("span", { key: '7d1808931d93a88dd35746a5df8057f6e5aa46fd', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '3a082bac6933f9de6972ec0b69190c5ba6352405', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: 'c70a7ccf4d2408b05a8e74b378f9f32bb28fb6fa', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '2e961f628c249b66a10121ee936924ff26f272a3', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'a554a1070e79b14aac46bc0c73272071c3cc8866', paddingBlockEnd: "16" }, h("swirl-stack", { key: '333b1102a5900d06d5b27c9755e1e65132b248f6', justify: this.navigationCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: 'b3c51308bfb1067e6fc34b26e09efac5e8d251ac', hideLabel: this.navigationCollapsed, icon: this.secondaryNavCollapsed
|
|
168
176
|
? "<swirl-icon-expand-more></swirl-icon-expand-more>"
|
|
169
177
|
: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
|
|
170
178
|
? this.secondaryNavExpandLabel
|
|
171
179
|
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !this.navigationCollapsed &&
|
|
172
|
-
!this.secondaryNavCollapsed && (h("swirl-button", { key: '
|
|
180
|
+
!this.secondaryNavCollapsed && (h("swirl-button", { key: '907779e749bf62369d80c8c9ede8b29c1f8875ee', icon: this.secondaryNavView === "grid"
|
|
173
181
|
? "<swirl-icon-menu></swirl-icon-menu>"
|
|
174
182
|
: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
|
|
175
183
|
? this.gridNavLayoutToggleLabel
|
|
176
|
-
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("
|
|
184
|
+
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '63bc109d986d9e6556281f4c32fed5cf0df295bb', class: {
|
|
177
185
|
"shell-layout__secondary-nav-items": true,
|
|
178
186
|
"shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
|
|
179
187
|
this.secondaryNavView === "grid",
|
|
180
|
-
} }, h("slot", { key: '
|
|
188
|
+
} }, h("slot", { key: 'c80fd6c094acd411b1a3c9ff9f83d3e850926961', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: 'e124d72f598b847a8cdd10c61133cbbd794c7653', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '5f36222a496b3d09f8cdd4408d0046a1c7cbdd5c' })), h("aside", { key: 'c1230a26362fbefe0b89256f2c66bd45c11ed6ce', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '661dacd4e864efebb33eaef11542b6c4c38af45d', class: "shell-layout__sidebar-body" }, h("div", { key: 'ba3f25fe287f6b99865d9217e2dc0adf9e90dbe5', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '12aa5360f51fcef3b196409d42c2adcfabe6aea6', name: "sidebar-app-bar" })), h("div", { key: '82c185521ab9cc78e104fcd39e687bf4e25f7cf6', class: "shell-layout__sidebar-content" }, h("slot", { key: '20b78c6bb03c09ddeda88b39bb4e680f63c5a4f1', name: "sidebar" })))))));
|
|
181
189
|
}
|
|
182
190
|
static get is() { return "swirl-shell-layout"; }
|
|
183
191
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import { newSpecPage } from "@stencil/core/testing";
|
|
2
2
|
import { SwirlShellLayout } from "./swirl-shell-layout";
|
|
3
|
+
global.MutationObserver = class {
|
|
4
|
+
constructor() { }
|
|
5
|
+
disconnect() { }
|
|
6
|
+
observe() { }
|
|
7
|
+
};
|
|
3
8
|
describe("swirl-shell-layout", () => {
|
|
4
9
|
it("renders its content", async () => {
|
|
5
10
|
const page = await newSpecPage({
|
|
@@ -39,43 +39,55 @@ const Template = (args) => {
|
|
|
39
39
|
<div slot="nav">
|
|
40
40
|
<swirl-stack align="stretch" as="ul" spacing="2">
|
|
41
41
|
<li>
|
|
42
|
-
<swirl-shell-navigation-item label="
|
|
43
|
-
<swirl-app-icon icon="<swirl-icon-
|
|
42
|
+
<swirl-shell-navigation-item label="News">
|
|
43
|
+
<swirl-app-icon icon="<swirl-icon-news size="24"></swirl-icon-news>" slot="icon"></swirl-app-icon>
|
|
44
44
|
</swirl-shell-navigation-item>
|
|
45
45
|
</li>
|
|
46
46
|
<li>
|
|
47
|
-
<swirl-shell-navigation-item active label="
|
|
48
|
-
<swirl-app-icon icon="<swirl-icon-
|
|
47
|
+
<swirl-shell-navigation-item active label="Chats">
|
|
48
|
+
<swirl-app-icon icon="<swirl-icon-chats size="24"></swirl-icon-chats>" slot="icon"></swirl-app-icon>
|
|
49
49
|
</swirl-shell-navigation-item>
|
|
50
50
|
</li>
|
|
51
51
|
<li>
|
|
52
|
-
<swirl-shell-navigation-item label="
|
|
53
|
-
<swirl-app-icon icon="<swirl-icon-
|
|
52
|
+
<swirl-shell-navigation-item label="Tasks" badge-label="3">
|
|
53
|
+
<swirl-app-icon icon="<swirl-icon-tasks size="24"></swirl-icon-tasks>" slot="icon"></swirl-app-icon>
|
|
54
54
|
</swirl-shell-navigation-item>
|
|
55
55
|
</li>
|
|
56
56
|
<li>
|
|
57
|
-
<swirl-shell-navigation-item label="
|
|
58
|
-
<swirl-app-icon icon="<swirl-icon-
|
|
57
|
+
<swirl-shell-navigation-item label="Calendar">
|
|
58
|
+
<swirl-app-icon icon="<swirl-icon-today size="24"></swirl-icon-today>" slot="icon"></swirl-app-icon>
|
|
59
|
+
</swirl-shell-navigation-item>
|
|
60
|
+
</li>
|
|
61
|
+
<li>
|
|
62
|
+
<swirl-shell-navigation-item label="Employee directory">
|
|
63
|
+
<swirl-app-icon icon="<swirl-icon-directory size="24"></swirl-icon-directory>" slot="icon"></swirl-app-icon>
|
|
59
64
|
</swirl-shell-navigation-item>
|
|
60
65
|
</li>
|
|
61
66
|
</swirl-stack>
|
|
62
67
|
</div>
|
|
63
68
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
69
|
+
<ul slot="secondary-nav">
|
|
70
|
+
<li>
|
|
71
|
+
<swirl-shell-navigation-item label="Reporting hub">
|
|
72
|
+
<swirl-app-icon src="/menu-item-1.png" slot="icon"></swirl-app-icon>
|
|
73
|
+
</swirl-shell-navigation-item>
|
|
74
|
+
</li>
|
|
75
|
+
<li>
|
|
76
|
+
<swirl-shell-navigation-item label="My absences">
|
|
77
|
+
<swirl-app-icon src="/menu-item-2.png" slot="icon"></swirl-app-icon>
|
|
67
78
|
</swirl-shell-navigation-item>
|
|
68
79
|
</li>
|
|
69
|
-
<li
|
|
70
|
-
<swirl-shell-navigation-item
|
|
71
|
-
<swirl-app-icon
|
|
80
|
+
<li>
|
|
81
|
+
<swirl-shell-navigation-item label="IT self-service">
|
|
82
|
+
<swirl-app-icon src="/menu-item-3.png" slot="icon"></swirl-app-icon>
|
|
72
83
|
</swirl-shell-navigation-item>
|
|
73
84
|
</li>
|
|
74
|
-
<li
|
|
75
|
-
<swirl-shell-navigation-item label="
|
|
76
|
-
<swirl-app-icon
|
|
85
|
+
<li>
|
|
86
|
+
<swirl-shell-navigation-item label="Office door key">
|
|
87
|
+
<swirl-app-icon src="/menu-item-4.png" slot="icon"></swirl-app-icon>
|
|
77
88
|
</swirl-shell-navigation-item>
|
|
78
89
|
</li>
|
|
90
|
+
</ul>
|
|
79
91
|
|
|
80
92
|
<swirl-app-layout app-name="App name">
|
|
81
93
|
<swirl-button hide-label="true" icon="<swirl-icon-menu></swirl-icon-menu>" label="Menu" slot="navigation-mobile-menu-button"></swirl-button>
|