@getflip/swirl-components 0.57.1 → 0.58.0
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 +3 -3
- package/dist/cjs/swirl-console-layout.cjs.entry.js +4 -3
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-console-layout/swirl-console-layout.css +17 -5
- package/dist/collection/components/swirl-console-layout/swirl-console-layout.js +5 -4
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-console-layout.js +4 -3
- package/dist/esm/swirl-console-layout.entry.js +4 -3
- package/dist/swirl-components/p-5bf27fd2.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 +1 -1
- package/dist/types/components.d.ts +2 -2
- package/package.json +1 -1
- package/dist/swirl-components/p-90ef5b51.entry.js +0 -1
|
@@ -32,6 +32,21 @@
|
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
@media (min-width: 768px) {
|
|
36
|
+
|
|
37
|
+
.console-layout--empty-app-bar .console-layout__main {
|
|
38
|
+
grid-template-areas: "content";
|
|
39
|
+
grid-template-rows: 1fr
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@media (min-width: 768px) {
|
|
44
|
+
|
|
45
|
+
.console-layout--empty-app-bar .console-layout__app-bar {
|
|
46
|
+
display: none
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
35
50
|
.console-layout__sidebar {
|
|
36
51
|
position: fixed;
|
|
37
52
|
z-index: var(--s-z-30);
|
|
@@ -176,10 +191,6 @@
|
|
|
176
191
|
}
|
|
177
192
|
}
|
|
178
193
|
|
|
179
|
-
.console-layout__content-header {
|
|
180
|
-
flex-shrink: 0;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
194
|
.console-layout__integration {
|
|
184
195
|
flex-grow: 1;
|
|
185
196
|
}
|
|
@@ -207,7 +218,8 @@
|
|
|
207
218
|
|
|
208
219
|
.console-layout__content-header {
|
|
209
220
|
display: flex;
|
|
210
|
-
margin-bottom:
|
|
221
|
+
margin-bottom: var(--s-space-24);
|
|
222
|
+
flex-shrink: 0;
|
|
211
223
|
gap: var(--s-space-16);
|
|
212
224
|
}
|
|
213
225
|
|
|
@@ -106,12 +106,13 @@ export class SwirlConsoleLayout {
|
|
|
106
106
|
render() {
|
|
107
107
|
const className = classnames("console-layout", {
|
|
108
108
|
"console-layout--sidebar-active": this.sidebarActive,
|
|
109
|
+
"console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton,
|
|
109
110
|
});
|
|
110
|
-
return (h(Host, null, h("div", { class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("div", { "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("header", { class: "console-layout__header" }, h("div", { class: "console-layout__logo" }, h("svg", { 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", { 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", { 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", { 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", { d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { name: "navigation" })), h("div", { class: "console-layout__user" }, h("slot", { name: "user" }))), h("main", { "aria-labelledby": "app-name", class: "console-layout__main" }, h("header", { class: "console-layout__app-bar" }, h("span", { class: "console-layout__mobile-navigation-button" }, h("swirl-button", { swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
|
|
111
|
+
return (h(Host, null, h("div", { class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("div", { "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("header", { class: "console-layout__header" }, h("div", { class: "console-layout__logo" }, h("svg", { 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", { 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", { 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", { 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", { d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { name: "navigation" })), h("div", { class: "console-layout__user" }, h("slot", { name: "user" }))), h("main", { "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { class: "console-layout__app-bar" }, h("span", { class: "console-layout__mobile-navigation-button" }, h("swirl-button", { swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
|
|
111
112
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
112
113
|
: "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive
|
|
113
114
|
? this.hideNavigationButtonLabel
|
|
114
|
-
: this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("
|
|
115
|
+
: this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { "aria-labelledby": "heading", class: "console-layout__content" }, h("header", { class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), h("div", { class: "console-layout__heading-container" }, h("swirl-heading", { as: "h2", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { class: "console-layout__subheading", color: "subdued" }, this.subheading))), h("div", { class: "console-layout__content-header-tools" }, h("slot", { name: "content-header-tools" }))), h("div", { class: "console-layout__integration" }, h("slot", { name: "content" }))), h("div", { class: "console-layout__overlays" }, h("slot", { name: "overlays" }))))));
|
|
115
116
|
}
|
|
116
117
|
static get is() { return "swirl-console-layout"; }
|
|
117
118
|
static get encapsulation() { return "shadow"; }
|
|
@@ -135,8 +136,8 @@ export class SwirlConsoleLayout {
|
|
|
135
136
|
"resolved": "string",
|
|
136
137
|
"references": {}
|
|
137
138
|
},
|
|
138
|
-
"required":
|
|
139
|
-
"optional":
|
|
139
|
+
"required": false,
|
|
140
|
+
"optional": true,
|
|
140
141
|
"docs": {
|
|
141
142
|
"tags": [],
|
|
142
143
|
"text": ""
|