@getflip/swirl-components 0.369.0 → 0.370.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 +1 -1
- package/dist/cjs/swirl-app-bar.cjs.entry.js +4 -2
- package/dist/collection/components/swirl-app-bar/swirl-app-bar.css +9 -0
- package/dist/collection/components/swirl-app-bar/swirl-app-bar.js +3 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +4 -1
- package/dist/components/swirl-app-bar.js +4 -2
- package/dist/esm/swirl-app-bar.entry.js +4 -2
- package/dist/swirl-components/p-0780dad3.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-ec634b0f.entry.js +0 -1
package/components.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-DM-IG6w2.js');
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
|
|
6
|
-
const swirlAppBarCss = ":host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-16)}.app-bar--has-cta .app-bar__cta{display:block}.app-bar:not(.app-bar--has-right-controls) .app-bar__right-controls{display:none}.app-bar__left-controls{display:flex;min-width:0;flex-shrink:0;align-items:center;gap:var(--s-space-16)}.app-bar__main-navigation-control{flex-shrink:0}.app-bar__cta{display:none}.app-bar__heading{display:flex;min-width:10rem;flex-grow:1;align-items:center}@media (min-width: 992px){.app-bar__heading{min-width:0;flex-grow:0}}.app-bar__stepper-controls{position:relative;display:flex;flex-shrink:0;gap:var(--s-space-4)}.app-bar__stepper-controls:not(:first-child){padding-left:var(--s-space-16)}.app-bar__stepper-controls:not(:first-child):after{position:absolute;top:50%;left:0;width:var(--s-border-width-default);height:1.25rem;background-color:var(--s-border-default);content:\"\";transform:translateY(-50%)}.app-bar__center-controls{display:none;flex-grow:1;justify-content:center;align-items:center}@media (min-width: 992px){.app-bar__center-controls{display:flex}}.app-bar__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}";
|
|
6
|
+
const swirlAppBarCss = ":host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-16)}.app-bar--has-cta .app-bar__cta{display:block}.app-bar:not(.app-bar--has-right-controls) .app-bar__right-controls{display:none}.app-bar__left-controls{display:flex;min-width:0;flex-shrink:0;align-items:center;gap:var(--s-space-16)}.app-bar__main-navigation-control{flex-shrink:0}.app-bar__cta{display:none}.app-bar__heading{display:flex;min-width:10rem;flex-grow:1;align-items:center}@media (min-width: 992px){.app-bar__heading{min-width:0;flex-grow:0}}.app-bar__stepper-controls{position:relative;display:flex;flex-shrink:0;gap:var(--s-space-4)}.app-bar__stepper-controls:not(:first-child){padding-left:var(--s-space-16)}.app-bar__stepper-controls:not(:first-child):after{position:absolute;top:50%;left:0;width:var(--s-border-width-default);height:1.25rem;background-color:var(--s-border-default);content:\"\";transform:translateY(-50%)}.app-bar__center-controls{display:none;flex-grow:1;justify-content:center;align-items:center}@media (min-width: 992px){.app-bar__center-controls{display:flex}}.app-bar:not(.app-bar--has-heading) .app-bar__center-controls{display:flex}.app-bar:not(.app-bar--has-heading) .app-bar__heading{display:none}.app-bar__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}";
|
|
7
7
|
|
|
8
8
|
const SwirlAppBar = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -50,15 +50,17 @@ const SwirlAppBar = class {
|
|
|
50
50
|
render() {
|
|
51
51
|
const showLeftControls = this.showBackButton || this.showCloseButton || this.showStepperControls;
|
|
52
52
|
const hasRightControls = Boolean(this.el.querySelector('[slot="right-controls"]'));
|
|
53
|
+
const hasHeading = Boolean(this.el.querySelector('[slot="heading"]'));
|
|
53
54
|
const className = index$1.classnames("app-bar", {
|
|
54
55
|
"app-bar--has-cta": this.hasCta,
|
|
55
56
|
"app-bar--has-right-controls": hasRightControls,
|
|
57
|
+
"app-bar--has-heading": hasHeading,
|
|
56
58
|
});
|
|
57
59
|
const styles = {
|
|
58
60
|
paddingInlineEnd: `var(--s-space-${this.paddingInlineEnd})`,
|
|
59
61
|
paddingInlineStart: `var(--s-space-${this.paddingInlineStart})`,
|
|
60
62
|
};
|
|
61
|
-
return (index.h(index.Host, { key: '
|
|
63
|
+
return (index.h(index.Host, { key: 'ebdb11284a5d7b0e495f3ef6ca5383e42f3a1217' }, index.h("div", { key: '3f835e7f255c1a5a64fdd77df04dd5125fa53af2', class: className, style: styles }, showLeftControls && (index.h("div", { key: 'c55d2dacce587f2443f2cb187adbb20335f1ebf7', class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (index.h("div", { key: 'bae9cf4d21723a64fe640128dfe8acc6ea50dd08', class: "app-bar__main-navigation-control" }, this.showBackButton && (index.h("swirl-button", { key: '823386ce17200d8e9eb59e53bc13fc272f618de4', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (index.h("swirl-button", { key: '70e54a538f8d434b86d73e5e26d43ad76ad8ec97', hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (index.h("div", { key: '5225bec74f239041e4e193a9800ebfda52fc190a', class: "app-bar__stepper-controls" }, index.h("swirl-button", { key: '00b3163a95f10a4dbf2fd9a0fc3046c7e27b1eb4', hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), index.h("swirl-button", { key: 'ca8d8f3e06408664b56352366f218ad014c36cb6', hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), index.h("div", { key: '0ec2af8a4ea6f9c17dd8d0c116a95c599f586fc5', class: "app-bar__cta" }, index.h("slot", { key: '82efa65c7381b155768baee4d5acaea72b4061c1', name: "cta" })), index.h("div", { key: '8561d4fee864f70e871d3fb2e2a17eaf4b45817e', class: "app-bar__heading" }, index.h("slot", { key: 'a536db6681aec3cf1a8eb8855b2838e7b923619e', name: "heading" })), index.h("div", { key: '5f7e7c18685d94e9147e2fc704e23a5d8ab05b02', class: "app-bar__center-controls" }, index.h("slot", { key: '414e3e0aa9109a6b29a96b383440581715d30084', name: "center-controls" })), index.h("div", { key: '2a3c606c9d22194237a958e121f46c98ab6bd887', class: "app-bar__right-controls" }, index.h("slot", { key: '1a1f867e1311fef262d2ff8dc884f9bfcea90c9d', name: "right-controls" })))));
|
|
62
64
|
}
|
|
63
65
|
get el() { return index.getElement(this); }
|
|
64
66
|
};
|
|
@@ -92,6 +92,15 @@
|
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
+
.app-bar:not(.app-bar--has-heading) .app-bar__center-controls {
|
|
96
|
+
display: flex;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.app-bar:not(.app-bar--has-heading) .app-bar__heading {
|
|
100
|
+
display: none;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
|
|
95
104
|
.app-bar__right-controls {
|
|
96
105
|
display: flex;
|
|
97
106
|
min-width: 0;
|
|
@@ -46,15 +46,17 @@ export class SwirlAppBar {
|
|
|
46
46
|
render() {
|
|
47
47
|
const showLeftControls = this.showBackButton || this.showCloseButton || this.showStepperControls;
|
|
48
48
|
const hasRightControls = Boolean(this.el.querySelector('[slot="right-controls"]'));
|
|
49
|
+
const hasHeading = Boolean(this.el.querySelector('[slot="heading"]'));
|
|
49
50
|
const className = classnames("app-bar", {
|
|
50
51
|
"app-bar--has-cta": this.hasCta,
|
|
51
52
|
"app-bar--has-right-controls": hasRightControls,
|
|
53
|
+
"app-bar--has-heading": hasHeading,
|
|
52
54
|
});
|
|
53
55
|
const styles = {
|
|
54
56
|
paddingInlineEnd: `var(--s-space-${this.paddingInlineEnd})`,
|
|
55
57
|
paddingInlineStart: `var(--s-space-${this.paddingInlineStart})`,
|
|
56
58
|
};
|
|
57
|
-
return (h(Host, { key: '
|
|
59
|
+
return (h(Host, { key: 'ebdb11284a5d7b0e495f3ef6ca5383e42f3a1217' }, h("div", { key: '3f835e7f255c1a5a64fdd77df04dd5125fa53af2', class: className, style: styles }, showLeftControls && (h("div", { key: 'c55d2dacce587f2443f2cb187adbb20335f1ebf7', class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { key: 'bae9cf4d21723a64fe640128dfe8acc6ea50dd08', class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { key: '823386ce17200d8e9eb59e53bc13fc272f618de4', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { key: '70e54a538f8d434b86d73e5e26d43ad76ad8ec97', hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { key: '5225bec74f239041e4e193a9800ebfda52fc190a', class: "app-bar__stepper-controls" }, h("swirl-button", { key: '00b3163a95f10a4dbf2fd9a0fc3046c7e27b1eb4', hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { key: 'ca8d8f3e06408664b56352366f218ad014c36cb6', hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { key: '0ec2af8a4ea6f9c17dd8d0c116a95c599f586fc5', class: "app-bar__cta" }, h("slot", { key: '82efa65c7381b155768baee4d5acaea72b4061c1', name: "cta" })), h("div", { key: '8561d4fee864f70e871d3fb2e2a17eaf4b45817e', class: "app-bar__heading" }, h("slot", { key: 'a536db6681aec3cf1a8eb8855b2838e7b923619e', name: "heading" })), h("div", { key: '5f7e7c18685d94e9147e2fc704e23a5d8ab05b02', class: "app-bar__center-controls" }, h("slot", { key: '414e3e0aa9109a6b29a96b383440581715d30084', name: "center-controls" })), h("div", { key: '2a3c606c9d22194237a958e121f46c98ab6bd887', class: "app-bar__right-controls" }, h("slot", { key: '1a1f867e1311fef262d2ff8dc884f9bfcea90c9d', name: "right-controls" })))));
|
|
58
60
|
}
|
|
59
61
|
static get is() { return "swirl-app-bar"; }
|
|
60
62
|
static get encapsulation() { return "shadow"; }
|