@getflip/swirl-components 0.151.2 → 0.152.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 +9 -1
- package/dist/cjs/swirl-app-layout_6.cjs.entry.js +4 -2
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-empty-state/swirl-empty-state.css +9 -0
- package/dist/collection/components/swirl-empty-state/swirl-empty-state.js +4 -1
- package/dist/collection/components/swirl-empty-state/swirl-empty-state.spec.js +3 -0
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-empty-state2.js +4 -2
- package/dist/esm/swirl-app-layout_6.entry.js +4 -2
- package/dist/swirl-components/p-2d8b2e01.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-empty-state/swirl-empty-state.d.ts +1 -0
- package/package.json +1 -1
- package/dist/swirl-components/p-d2a6ba17.entry.js +0 -1
package/components.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2024-02-
|
|
2
|
+
"timestamp": "2024-02-13T11:55:32",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "3.3.1",
|
|
@@ -6984,6 +6984,10 @@
|
|
|
6984
6984
|
{
|
|
6985
6985
|
"name": "slot",
|
|
6986
6986
|
"text": "controls - The component content"
|
|
6987
|
+
},
|
|
6988
|
+
{
|
|
6989
|
+
"name": "slot",
|
|
6990
|
+
"text": "illustration - The placeholder illustration"
|
|
6987
6991
|
}
|
|
6988
6992
|
],
|
|
6989
6993
|
"usage": {},
|
|
@@ -7030,6 +7034,10 @@
|
|
|
7030
7034
|
"name": "controls",
|
|
7031
7035
|
"docs": "The component content"
|
|
7032
7036
|
},
|
|
7037
|
+
{
|
|
7038
|
+
"name": "illustration",
|
|
7039
|
+
"docs": "The placeholder illustration"
|
|
7040
|
+
},
|
|
7033
7041
|
{
|
|
7034
7042
|
"name": "slot",
|
|
7035
7043
|
"docs": "The component content"
|
|
@@ -208,7 +208,7 @@ const SwirlAppLayout = class {
|
|
|
208
208
|
};
|
|
209
209
|
SwirlAppLayout.style = swirlAppLayoutCss;
|
|
210
210
|
|
|
211
|
-
const swirlEmptyStateCss = ":host{display:block}:host *{box-sizing:border-box}.empty-state{display:flex;max-width:28rem;align-items:center;flex-direction:column;gap:var(--s-space-16)}.empty-state--has-controls .empty-state__controls{display:block}.empty-state__illustration{max-width:16rem}.empty-state__body{display:flex;align-items:center;flex-direction:column;gap:var(--s-space-24)}.empty-state__controls{display:none}";
|
|
211
|
+
const swirlEmptyStateCss = ":host{display:block}:host *{box-sizing:border-box}.empty-state{display:flex;max-width:28rem;align-items:center;flex-direction:column;gap:var(--s-space-16)}.empty-state--has-controls .empty-state__controls{display:block}.empty-state--has-slotted-illustration .empty-state__slotted-illustration{display:block}.empty-state__illustration{max-width:16rem}.empty-state__body{display:flex;align-items:center;flex-direction:column;gap:var(--s-space-24)}.empty-state__controls{display:none}.empty-state__slotted-illustration{display:none;max-width:16rem}";
|
|
212
212
|
|
|
213
213
|
const SwirlEmptyState = class {
|
|
214
214
|
constructor(hostRef) {
|
|
@@ -218,10 +218,12 @@ const SwirlEmptyState = class {
|
|
|
218
218
|
}
|
|
219
219
|
render() {
|
|
220
220
|
const hasControls = Boolean(this.el.querySelector('[slot="controls"]'));
|
|
221
|
+
const hasSlottedIllustration = Boolean(this.el.querySelector('[slot="illustration"]'));
|
|
221
222
|
const className = index$1.classnames("empty-state", {
|
|
222
223
|
"empty-state--has-controls": hasControls,
|
|
224
|
+
"empty-state--has-slotted-illustration": hasSlottedIllustration,
|
|
223
225
|
});
|
|
224
|
-
return (index.h(index.Host, null, index.h("div", { class: className }, this.illustration && (index.h("img", { alt: "", class: "empty-state__illustration", src: this.illustration })), index.h("div", { class: "empty-state__body" }, index.h("swirl-stack", { align: "stretch", spacing: "8" }, this.heading && (index.h("swirl-heading", { align: "center", as: "p", level: 4, text: this.heading })), index.h("div", { class: "empty-state__content" }, index.h("swirl-text", { align: "center", color: "subdued" }, index.h("slot", null)))), index.h("div", { class: "empty-state__controls" }, index.h("slot", { name: "controls" }))))));
|
|
226
|
+
return (index.h(index.Host, null, index.h("div", { class: className }, this.illustration && !hasSlottedIllustration && (index.h("img", { alt: "", class: "empty-state__illustration", src: this.illustration })), index.h("div", { class: "empty-state__slotted-illustration" }, index.h("slot", { name: "illustration" })), index.h("div", { class: "empty-state__body" }, index.h("swirl-stack", { align: "stretch", spacing: "8" }, this.heading && (index.h("swirl-heading", { align: "center", as: "p", level: 4, text: this.heading })), index.h("div", { class: "empty-state__content" }, index.h("swirl-text", { align: "center", color: "subdued" }, index.h("slot", null)))), index.h("div", { class: "empty-state__controls" }, index.h("slot", { name: "controls" }))))));
|
|
225
227
|
}
|
|
226
228
|
get el() { return index.getElement(this); }
|
|
227
229
|
};
|