@getflip/swirl-components 0.368.0 → 0.368.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/loader.cjs.js +1 -1
- package/dist/cjs/swirl-avatar-group.cjs.entry.js +2 -2
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-console-layout.cjs.entry.js +17 -8
- package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.js +2 -2
- package/dist/collection/components/swirl-console-layout/swirl-console-layout.css +8 -3
- package/dist/collection/components/swirl-console-layout/swirl-console-layout.js +19 -8
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-avatar-group.js +2 -2
- package/dist/components/swirl-console-layout.js +19 -8
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-avatar-group.entry.js +2 -2
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-console-layout.entry.js +17 -8
- package/dist/swirl-components/p-bf58de31.entry.js +1 -0
- package/dist/swirl-components/p-d80cdc45.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-console-layout/swirl-console-layout.d.ts +4 -0
- package/package.json +1 -1
- package/dist/swirl-components/p-7f2412cc.entry.js +0 -1
- package/dist/swirl-components/p-f7310735.entry.js +0 -1
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
width: 100%;
|
|
4
4
|
height: 100vh;
|
|
5
5
|
--console-footer-height: 4.25rem;
|
|
6
|
+
--console-app-bar-height: 3.5rem;
|
|
6
7
|
}
|
|
7
8
|
|
|
8
9
|
:host * {
|
|
@@ -137,15 +138,15 @@
|
|
|
137
138
|
height: 100%;
|
|
138
139
|
grid-area: main;
|
|
139
140
|
gap: var(--s-border-width-default);
|
|
140
|
-
grid-template-rows:
|
|
141
|
+
grid-template-rows: var(--console-app-bar-height) 1fr;
|
|
141
142
|
grid-template-areas:
|
|
142
143
|
"app-bar"
|
|
143
144
|
"content";
|
|
144
145
|
}
|
|
145
146
|
|
|
146
147
|
.console-layout--has-footer .console-layout__main {
|
|
147
|
-
grid-template-rows:
|
|
148
|
-
grid-template-rows:
|
|
148
|
+
grid-template-rows: var(--console-app-bar-height) 1fr -webkit-min-content;
|
|
149
|
+
grid-template-rows: var(--console-app-bar-height) 1fr min-content;
|
|
149
150
|
grid-template-areas:
|
|
150
151
|
"app-bar"
|
|
151
152
|
"content"
|
|
@@ -214,6 +215,10 @@
|
|
|
214
215
|
}
|
|
215
216
|
}
|
|
216
217
|
|
|
218
|
+
.console-layout--has-custom-app-bar .console-layout__content {
|
|
219
|
+
padding-top: var(--s-space-16);
|
|
220
|
+
}
|
|
221
|
+
|
|
217
222
|
.console-layout__integration {
|
|
218
223
|
flex-grow: 1;
|
|
219
224
|
}
|
|
@@ -24,6 +24,12 @@ export class SwirlConsoleLayout {
|
|
|
24
24
|
scrolledToTop: false,
|
|
25
25
|
scrolledToBottom: false,
|
|
26
26
|
};
|
|
27
|
+
this.updateCustomAppBarStatus = () => {
|
|
28
|
+
this.hasCustomAppBar = Boolean(this.el.querySelector('[slot="app-bar"]'));
|
|
29
|
+
};
|
|
30
|
+
this.updateFooterStatus = () => {
|
|
31
|
+
this.hasFooter = Boolean(this.el.querySelector('[slot="footer"]'));
|
|
32
|
+
};
|
|
27
33
|
this.onMainScroll = debounce(() => {
|
|
28
34
|
this.updateMainScrollState();
|
|
29
35
|
}, 16);
|
|
@@ -64,6 +70,9 @@ export class SwirlConsoleLayout {
|
|
|
64
70
|
}
|
|
65
71
|
// Update initial scroll state
|
|
66
72
|
this.updateMainScrollState();
|
|
73
|
+
// Update initial slot states
|
|
74
|
+
this.updateCustomAppBarStatus();
|
|
75
|
+
this.updateFooterStatus();
|
|
67
76
|
});
|
|
68
77
|
}
|
|
69
78
|
updateMainScrollState() {
|
|
@@ -134,22 +143,22 @@ export class SwirlConsoleLayout {
|
|
|
134
143
|
width: "100%",
|
|
135
144
|
}
|
|
136
145
|
: undefined;
|
|
137
|
-
|
|
138
|
-
|
|
146
|
+
this.updateCustomAppBarStatus();
|
|
147
|
+
this.updateFooterStatus();
|
|
139
148
|
const className = classnames("console-layout", {
|
|
140
149
|
"console-layout--sidebar-active": this.sidebarActive,
|
|
141
|
-
"console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton && !
|
|
142
|
-
"console-layout--has-footer":
|
|
143
|
-
"console-layout--has-custom-app-bar":
|
|
150
|
+
"console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton && !this.hasCustomAppBar,
|
|
151
|
+
"console-layout--has-footer": this.hasFooter,
|
|
152
|
+
"console-layout--has-custom-app-bar": this.hasCustomAppBar,
|
|
144
153
|
"console-layout--main-scrollable": this.mainScrollState.scrollable,
|
|
145
154
|
"console-layout--main-scrolled-to-top": this.mainScrollState.scrolledToTop,
|
|
146
155
|
"console-layout--main-scrolled-to-bottom": this.mainScrollState.scrolledToBottom,
|
|
147
156
|
});
|
|
148
|
-
return (h(Host, { key: '
|
|
157
|
+
return (h(Host, { key: '496726613eda9b1c13e33c085e915d775933ed0d' }, h("div", { key: '3579c1193e739746a8638efabfdce3117bf0f7ce', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '675b17d7ae85f8625e322debcb000d5bf2e90353', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: '8aff40aaea61bb8d05f3a055251f44b1e3127369', class: "console-layout__header" }, h("div", { key: '28c91b86ee3c54491354b2201529b93e616ed5a2', class: "console-layout__logo" }, h("svg", { key: '94c383254b365d55087f79016f64de5c2a9090f3', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 16 26", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '95d61c6613839aaadf51693466036c9fc80ae379', d: "M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z", fill: "#145AF5" }), h("path", { key: 'cbb0bcffdaebc54633f2e07d658e3c9c9a529ddc', d: "M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z", fill: "#145AF5" }), h("path", { key: '203d33fe023f8f24dfc3dbb5a484151ec2067179', d: "M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z", fill: "#80A8F4" }), h("path", { key: '78fa8fc8471d593dd6b82e9a0e6dd55804cbb5cb', d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { key: '1a1c38e126ceb14ed84d20ea35eb9881a6e96a29', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '10c48be46ba7cb3b57ab7941b565ec6262d5441e', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '40c8755440f5fa081cf75e80f2658082f5f372f2', name: "navigation" })), h("div", { key: 'dd865340cbff798b518dfd1619a71ac7aa746b28', class: "console-layout__user" }, h("slot", { key: '8526bf246e4df5ad1a8f156de420094b0bf07a42', name: "user" }))), h("main", { key: '1d748d5d7f368dfc04cc798b67c84ac70bfa27bc', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main", onScroll: this.onMainScroll, ref: (el) => (this.mainEl = el) }, h("header", { key: '4f4a0ec2fce6b3332a383d2eb490cef9f9914c82', class: "console-layout__app-bar console-layout__app-bar--custom" }, h("slot", { key: '22ef51d2afffe32c7802938b0501a980317fd422', name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), h("header", { key: '4e7f642ec1b0db200a06014895a304410d4e4bf6', class: "console-layout__app-bar" }, h("span", { key: '5b62b2d1c1d778b663a436d3f3cdb1fb3ceda0bd', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: 'dc14fca02f84c6e6deb1ad326940abfe6c46bb2e', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
|
|
149
158
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
150
159
|
: "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive
|
|
151
160
|
? this.hideNavigationButtonLabel
|
|
152
|
-
: this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: '
|
|
161
|
+
: this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: '01d45eb50d075757955b80853198f1b0f39299c8', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: '02175712524e8351c77fb19e694b578fb7286cf4', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: 'd32c76e8ece2eeb22f011f32c413a4830cc30981', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: 'd1988d4c22eb7bdc7f0a6e7b2214f279d16f0f58', "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { key: 'a0432af5b8fa2c86cdb38107bf9862434b71c3a8', class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { key: '247e57f3ad9aa23d632676da5f9412bf49178046', class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), Boolean(this.heading) && (h("div", { key: '45edcca489cfd352b051296b603014b4a3680f0d', class: "console-layout__heading-container" }, h("swirl-heading", { key: '7b4e9fd2b38eb7c577d9c24a777081091e67edd0', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: '1c2465d0e95338b0951eb4acca5c600b59e28ed0', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: '4ba8d0d2952cbd856740bdc9cc437bf3cc760a30', class: "console-layout__heading-container" }, h("slot", { key: 'e4f52ed468b699b7c7243857337342ee5c11ab42', name: "heading" }))), h("div", { key: '5aeb6ea58a0d5773684c63faab63efd58356472a', class: "console-layout__content-header-tools" }, h("slot", { key: '736fa0e793324d24da67ed4a005a520e55e9a047', name: "content-header-tools" }))), h("div", { key: 'ccfd6c9269d2eb46761dc5b1746928cc9f032e36', class: "console-layout__integration" }, h("slot", { key: '61c7b54e8ade13b05a8c3fca648c01fb45704913', name: "content" }))), h("footer", { key: '74be6cb8601f004b48e76070172d11a61a9567f9', class: "console-layout__footer" }, h("slot", { key: '346a507d59d8969c3d53289cdd777cd278c35608', name: "footer", onSlotchange: this.updateFooterStatus })), h("div", { key: '9d27e700c9d1863a0801661ca45f7e7bdf01e4f6', class: "console-layout__overlays" }, h("slot", { key: '3d2bc10779ef6cfdb56aed0a145a5d8ccfe2a764', name: "overlays" }))))));
|
|
153
162
|
}
|
|
154
163
|
static get is() { return "swirl-console-layout"; }
|
|
155
164
|
static get encapsulation() { return "shadow"; }
|
|
@@ -404,7 +413,9 @@ export class SwirlConsoleLayout {
|
|
|
404
413
|
static get states() {
|
|
405
414
|
return {
|
|
406
415
|
"sidebarActive": {},
|
|
407
|
-
"mainScrollState": {}
|
|
416
|
+
"mainScrollState": {},
|
|
417
|
+
"hasCustomAppBar": {},
|
|
418
|
+
"hasFooter": {}
|
|
408
419
|
};
|
|
409
420
|
}
|
|
410
421
|
static get events() {
|