@everchron/ec-shards 19.12.2 → 19.12.3

package/dist/ec-shards.js

@@ -6398,7 +6398,15 @@ var Go = /*#__PURE__*/ V(Ro, [["render", Wo], ["__scopeId", "data-v-95f66a3d"]])
 			type: Boolean,
 			default: !1
 		},
-		checkboxHeight: { type: Number }
+		checkboxHeight: { type: Number },
+		sidebarWidth: {
+			type: String,
+			default: "300px"
+		},
+		sidebarBreakpoint: {
+			type: Number,
+			default: null
+		}
 	},
 	data() {
 		return {
@@ -6406,8 +6414,9 @@ var Go = /*#__PURE__*/ V(Ro, [["render", Wo], ["__scopeId", "data-v-95f66a3d"]])
 			isExpanded: this.expanded,
 			isLoading: !1,
 			expandHeight: 0,
-			sidebarWidth: 0,
+			sidebarInlineHeight: 0,
 			footerHeight: 0,
+			containerWidth: 0,
 			expandId: ""
 		};
 	},
@@ -6415,6 +6424,15 @@ var Go = /*#__PURE__*/ V(Ro, [["render", Wo], ["__scopeId", "data-v-95f66a3d"]])
 		rootStyle() {
 			return { width: this.isExpanded ? this.expandedWidth : this.collapsedWidth };
 		},
+		resolvedSidebarWidth() {
+			let e = this.sidebarWidth;
+			if (typeof e != "string") return 0;
+			let t = parseFloat(e);
+			return isNaN(t) ? 0 : e.trim().endsWith("%") ? Math.round(this.containerWidth * t / 100) : t;
+		},
+		sidebarInline() {
+			return this.sidebarBreakpoint != null && this.containerWidth > 0 && this.containerWidth <= this.sidebarBreakpoint;
+		},
 		expandMode() {
 			return this.expandable === !0 || this.expandable === "button" ? "button" : this.expandable === "click" || this.expandable === "dblclick" ? this.expandable : null;
 		},
@@ -6556,7 +6574,7 @@ var Go = /*#__PURE__*/ V(Ro, [["render", Wo], ["__scopeId", "data-v-95f66a3d"]])
 			this.isExpanded !== t && (this.measure(), this.isExpanded = t, this.$emit("update:expanded", this.isExpanded));
 		},
 		setupObservers() {
-			typeof ResizeObserver > "u" || (this.resizeObserver = new ResizeObserver(() => this.measure()), this.observeRefs());
+			typeof ResizeObserver > "u" || (this.resizeObserver = new ResizeObserver(() => this.measure()), this.$el && this.$el.nodeType === 1 && this.resizeObserver.observe(this.$el), this.observeRefs());
 		},
 		observeRefs() {
 			if (!this.resizeObserver) return;
@@ -6564,6 +6582,7 @@ var Go = /*#__PURE__*/ V(Ro, [["render", Wo], ["__scopeId", "data-v-95f66a3d"]])
 			let e = {
 				expand: this.$refs.expandInner,
 				sidebar: this.$refs.sidebarInner,
+				sidebarInline: this.$refs.sidebarInlineInner,
 				footer: this.$refs.footerInner
 			};
 			Object.keys(e).forEach((t) => {
@@ -6572,7 +6591,7 @@ var Go = /*#__PURE__*/ V(Ro, [["render", Wo], ["__scopeId", "data-v-95f66a3d"]])
 			});
 		},
 		measure() {
-			this.$refs.expandInner && (this.expandHeight = this.$refs.expandInner.offsetHeight), this.$refs.sidebarInner && (this.sidebarWidth = this.$refs.sidebarInner.offsetWidth), this.$refs.footerInner && (this.footerHeight = this.$refs.footerInner.offsetHeight);
+			this.$el && this.$el.nodeType === 1 && (this.containerWidth = this.$el.offsetWidth), this.$refs.expandInner && (this.expandHeight = this.$refs.expandInner.offsetHeight), this.$refs.sidebarInlineInner && (this.sidebarInlineHeight = this.$refs.sidebarInlineInner.offsetHeight), this.$refs.footerInner && (this.footerHeight = this.$refs.footerInner.offsetHeight);
 		}
 	}
 }, qo = { class: "ecs-content-card-timeline-inner" }, Jo = { class: "ecs-content-card-body" }, Yo = { class: "ecs-content-card-columns" }, Xo = { class: "ecs-content-card-main" }, Zo = {
@@ -6581,10 +6600,7 @@ var Go = /*#__PURE__*/ V(Ro, [["render", Wo], ["__scopeId", "data-v-95f66a3d"]])
 }, Qo = {
 	key: 1,
 	class: "ecs-content-card-header-content"
-}, $o = ["id", "aria-hidden"], es = ["aria-hidden"], ts = {
-	ref: "sidebarInner",
-	class: "ecs-content-card-sidebar-inner"
-}, ns = ["aria-hidden"], rs = {
+}, $o = ["id", "aria-hidden"], es = ["aria-hidden"], ts = ["aria-hidden"], ns = ["aria-hidden"], rs = {
 	ref: "footerInner",
 	class: "ecs-content-card-footer-inner"
 };
@@ -6683,13 +6699,26 @@ function is(t, n, r, i, a, u) {
 			}, [l("div", {
 				ref: "expandInner",
 				class: b(["ecs-content-card-expand-inner", { "has-select": r.selectable }])
-			}, [k(t.$slots, "contentExpand", {}, void 0, !0)], 2)], 12, $o)) : s("", !0)
-		]), t.$slots.sidebar ? (T(), c("div", {
+			}, [k(t.$slots, "contentExpand", {}, void 0, !0)], 2)], 12, $o)) : s("", !0),
+			t.$slots.sidebar && u.sidebarInline ? (T(), c("div", {
+				key: 2,
+				style: S({ height: a.isExpanded ? a.sidebarInlineHeight + "px" : "0px" }),
+				"aria-hidden": a.isExpanded ? "false" : "true",
+				class: "ecs-content-card-sidebar-inline"
+			}, [l("div", {
+				ref: "sidebarInlineInner",
+				class: b(["ecs-content-card-sidebar-inline-inner", { "has-select": r.selectable }])
+			}, [k(t.$slots, "sidebar", {}, void 0, !0)], 2)], 12, es)) : s("", !0)
+		]), t.$slots.sidebar && !u.sidebarInline ? (T(), c("div", {
 			key: 0,
-			style: S({ width: a.isExpanded ? "300px" : "0px" }),
+			style: S({ width: a.isExpanded ? u.resolvedSidebarWidth + "px" : "0px" }),
 			"aria-hidden": a.isExpanded ? "false" : "true",
 			class: "ecs-content-card-sidebar"
-		}, [l("div", ts, [k(t.$slots, "sidebar", {}, void 0, !0)], 512)], 12, es)) : s("", !0)]), t.$slots.footer ? (T(), c("div", {
+		}, [l("div", {
+			ref: "sidebarInner",
+			style: S({ width: u.resolvedSidebarWidth + "px" }),
+			class: "ecs-content-card-sidebar-inner"
+		}, [k(t.$slots, "sidebar", {}, void 0, !0)], 4)], 12, ts)) : s("", !0)]), t.$slots.footer ? (T(), c("div", {
 			key: 0,
 			style: S(u.footerStyle),
 			"aria-hidden": u.footerHidden ? "true" : "false",
@@ -6707,7 +6736,7 @@ function is(t, n, r, i, a, u) {
 		"disabled"
 	])], 6);
 }
-var as = /*#__PURE__*/ V(Ko, [["render", is], ["__scopeId", "data-v-a3acca35"]]), os = {
+var as = /*#__PURE__*/ V(Ko, [["render", is], ["__scopeId", "data-v-a5144026"]]), os = {
 	name: "ecs-formatted",
 	components: { EcsSkeletonLoader: G },
 	mixins: [Y],