@everchron/ec-shards 19.12.1 → 19.12.3

package/dist/ec-shards.js

@@ -6397,6 +6397,15 @@ var Go = /*#__PURE__*/ V(Ro, [["render", Wo], ["__scopeId", "data-v-95f66a3d"]])
 		loading: {
 			type: Boolean,
 			default: !1
+		},
+		checkboxHeight: { type: Number },
+		sidebarWidth: {
+			type: String,
+			default: "300px"
+		},
+		sidebarBreakpoint: {
+			type: Number,
+			default: null
 		}
 	},
 	data() {
@@ -6405,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: ""
 		};
 	},
@@ -6414,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;
 		},
@@ -6555,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;
@@ -6563,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) => {
@@ -6571,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 = {
@@ -6580,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"
 };
@@ -6630,7 +6647,8 @@ function is(t, n, r, i, a, u) {
 				r.selectable ? (T(), c("div", {
 					key: 0,
 					onClick: n[0] ||= R(() => {}, ["stop"]),
-					class: "ecs-content-card-select"
+					class: "ecs-content-card-select",
+					style: S(r.checkboxHeight == null ? null : { height: r.checkboxHeight + "px" })
 				}, [f(p, {
 					onInput: u.onSelectInput,
 					value: a.isSelected,
@@ -6639,7 +6657,7 @@ function is(t, n, r, i, a, u) {
 					"onInput",
 					"value",
 					"disabled"
-				])])) : s("", !0),
+				])], 4)) : s("", !0),
 				t.$slots.header ? (T(), c("div", Qo, [k(t.$slots, "header", {}, void 0, !0)])) : s("", !0),
 				u.showExpandButton ? (T(), o(m, {
 					key: 2,
@@ -6681,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",
@@ -6705,7 +6736,7 @@ function is(t, n, r, i, a, u) {
 		"disabled"
 	])], 6);
 }
-var as = /*#__PURE__*/ V(Ko, [["render", is], ["__scopeId", "data-v-d1f03f28"]]), os = {
+var as = /*#__PURE__*/ V(Ko, [["render", is], ["__scopeId", "data-v-a5144026"]]), os = {
 	name: "ecs-formatted",
 	components: { EcsSkeletonLoader: G },
 	mixins: [Y],
@@ -11982,7 +12013,7 @@ function Bf(t, n, i, a, u, p) {
 		})
 	], 10, Df);
 }
-var Vf = /*#__PURE__*/ V(Ef, [["render", Bf], ["__scopeId", "data-v-01b37b2f"]]), Hf = { class: "ecs-flag" }, Uf = /*#__PURE__*/ V({
+var Vf = /*#__PURE__*/ V(Ef, [["render", Bf], ["__scopeId", "data-v-93d8b53b"]]), Hf = { class: "ecs-flag" }, Uf = /*#__PURE__*/ V({
 	__name: "flag",
 	props: { code: {
 		type: String,