@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
package/components.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2023-05-
|
|
2
|
+
"timestamp": "2023-05-22T10:07:41",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "3.0.0",
|
|
@@ -4015,8 +4015,8 @@
|
|
|
4015
4015
|
"type": "string"
|
|
4016
4016
|
}
|
|
4017
4017
|
],
|
|
4018
|
-
"optional":
|
|
4019
|
-
"required":
|
|
4018
|
+
"optional": true,
|
|
4019
|
+
"required": false
|
|
4020
4020
|
},
|
|
4021
4021
|
{
|
|
4022
4022
|
"name": "backButonLabel",
|
|
@@ -6,7 +6,7 @@ const index = require('./index-83363034.js');
|
|
|
6
6
|
const index$1 = require('./index-2ddd0598.js');
|
|
7
7
|
const utils = require('./utils-f1b4e064.js');
|
|
8
8
|
|
|
9
|
-
const swirlConsoleLayoutCss = ":host{display:block;width:100%;height:100vh}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:\"main\"}@media (min-width: 768px){.console-layout{grid-template-columns:20rem 1fr;grid-template-areas:\"sidebar main\"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr auto;grid-template-areas:\"header\"\n \"navigation\"\n \"user\"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;margin-top:var(--s-border-width-default);padding:var(--s-space-16) var(--s-space-24) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user}.console-layout__main{display:grid;overflow-x:hidden;overflow-y:auto;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:4rem 1fr;grid-template-areas:\"app-bar\"\n \"content\"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{display:flex;min-width:0;padding:var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:2.5rem}}.console-
|
|
9
|
+
const swirlConsoleLayoutCss = ":host{display:block;width:100%;height:100vh}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:\"main\"}@media (min-width: 768px){.console-layout{grid-template-columns:20rem 1fr;grid-template-areas:\"sidebar main\"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:\"content\";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr auto;grid-template-areas:\"header\"\n \"navigation\"\n \"user\"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;margin-top:var(--s-border-width-default);padding:var(--s-space-16) var(--s-space-24) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user}.console-layout__main{display:grid;overflow-x:hidden;overflow-y:auto;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:4rem 1fr;grid-template-areas:\"app-bar\"\n \"content\"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{display:flex;min-width:0;padding:var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:2.5rem}}.console-layout__integration{flex-grow:1}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}";
|
|
10
10
|
|
|
11
11
|
const SwirlConsoleLayout = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -116,12 +116,13 @@ const SwirlConsoleLayout = class {
|
|
|
116
116
|
render() {
|
|
117
117
|
const className = index$1.classnames("console-layout", {
|
|
118
118
|
"console-layout--sidebar-active": this.sidebarActive,
|
|
119
|
+
"console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton,
|
|
119
120
|
});
|
|
120
|
-
return (index.h(index.Host, null, index.h("div", { class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, index.h("div", { "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, index.h("header", { class: "console-layout__header" }, index.h("div", { class: "console-layout__logo" }, index.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" }, index.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" }), index.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" }), index.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" }), index.h("path", { d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), index.h("swirl-text", { class: "console-layout__logo-text", weight: "medium" }, this.logoText))), index.h("nav", { "aria-label": this.navigationLabel, class: "console-layout__navigation" }, index.h("slot", { name: "navigation" })), index.h("div", { class: "console-layout__user" }, index.h("slot", { name: "user" }))), index.h("main", { "aria-labelledby": "app-name", class: "console-layout__main" }, index.h("header", { class: "console-layout__app-bar" }, index.h("span", { class: "console-layout__mobile-navigation-button" }, index.h("swirl-button", { swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
|
|
121
|
+
return (index.h(index.Host, null, index.h("div", { class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, index.h("div", { "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, index.h("header", { class: "console-layout__header" }, index.h("div", { class: "console-layout__logo" }, index.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" }, index.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" }), index.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" }), index.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" }), index.h("path", { d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), index.h("swirl-text", { class: "console-layout__logo-text", weight: "medium" }, this.logoText))), index.h("nav", { "aria-label": this.navigationLabel, class: "console-layout__navigation" }, index.h("slot", { name: "navigation" })), index.h("div", { class: "console-layout__user" }, index.h("slot", { name: "user" }))), index.h("main", { "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, index.h("header", { class: "console-layout__app-bar" }, index.h("span", { class: "console-layout__mobile-navigation-button" }, index.h("swirl-button", { swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
|
|
121
122
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
122
123
|
: "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive
|
|
123
124
|
? this.hideNavigationButtonLabel
|
|
124
|
-
: this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), index.h("
|
|
125
|
+
: this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), index.h("div", { class: "console-layout__app-name" }, this.appName && (index.h("swirl-heading", { as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (index.h("swirl-button", { class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), index.h("section", { "aria-labelledby": "heading", class: "console-layout__content" }, index.h("header", { class: "console-layout__content-header" }, this.showBackButton && (index.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 })), index.h("div", { class: "console-layout__heading-container" }, index.h("swirl-heading", { as: "h2", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (index.h("swirl-text", { class: "console-layout__subheading", color: "subdued" }, this.subheading))), index.h("div", { class: "console-layout__content-header-tools" }, index.h("slot", { name: "content-header-tools" }))), index.h("div", { class: "console-layout__integration" }, index.h("slot", { name: "content" }))), index.h("div", { class: "console-layout__overlays" }, index.h("slot", { name: "overlays" }))))));
|
|
125
126
|
}
|
|
126
127
|
get el() { return index.getElement(this); }
|
|
127
128
|
};
|