dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
89 lines (88 loc) • 3.89 kB
JavaScript
import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { setFromParentSize as h } from "../../common/utils.js";
import { parseResponsiveSizeMap as n, getResponsiveSize as z, subscribeToBreakpoints as c } from "../../common/viewport.js";
var d = Object.defineProperty, p = (r, i, u, e) => {
for (var t = void 0, s = r.length - 1, o; s >= 0; s--)
(o = r[s]) && (t = o(i, u, t) || t);
return t && d(i, u, t), t;
};
const l = ["xs", "sm", "md", "lg", "xl", "2xl"];
function f(r) {
class i extends r {
constructor() {
super(...arguments), this.sizeMap = "", this.size = "sm", this.parentSized = "false", this.spacing = "none", this._unsubscribeBreakpoints = null, this._parentSizeObserver = null, this._requestedSize = null, this._internalSizeUpdate = !1;
}
/** Resolve sizeMap from property or attribute so it works before Lit has reflected the attribute. */
_getSizeMapValue() {
const e = this;
return this.sizeMap || e.getAttribute("sizemap") || e.getAttribute("size-map") || "";
}
get effectiveSize() {
const e = this._getBaseSize(), t = n(this._getSizeMapValue());
return t ? z(e, t) : e;
}
_getBaseSize() {
var t;
if (this.parentSized === "true") {
const s = (t = this.closest("dap-ds-card")) == null ? void 0 : t.getAttribute("size");
return s != null ? s : "sm";
}
return n(this._getSizeMapValue()) && this._requestedSize != null ? this._requestedSize : this.size;
}
connectedCallback() {
var e;
super.connectedCallback(), this._requestedSize = (e = this.getAttribute("size")) != null ? e : this.size, this._updateBreakpointSubscription(), this._observeParentCardSize();
}
disconnectedCallback() {
this._clearBreakpointSubscription(), this._clearParentCardSizeObserver(), super.disconnectedCallback();
}
_observeParentCardSize() {
if (this.parentSized !== "true") return;
const e = this.closest("dap-ds-card");
e && (this._clearParentCardSizeObserver(), this._parentSizeObserver = new MutationObserver(() => {
this.isConnected && this.requestUpdate();
}), this._parentSizeObserver.observe(e, {
attributes: !0,
attributeFilter: ["size"]
}));
}
_clearParentCardSizeObserver() {
var e;
(e = this._parentSizeObserver) == null || e.disconnect(), this._parentSizeObserver = null;
}
_updateBreakpointSubscription() {
if (!n(this._getSizeMapValue())) {
this._clearBreakpointSubscription();
return;
}
this._clearBreakpointSubscription(), this._unsubscribeBreakpoints = c(
l,
() => {
this.isConnected && this.requestUpdate();
}
);
}
_clearBreakpointSubscription() {
var e;
(e = this._unsubscribeBreakpoints) == null || e.call(this), this._unsubscribeBreakpoints = null;
}
update(e) {
e.has("sizeMap") && this._updateBreakpointSubscription(), e.has("parentSized") && (this.parentSized === "true" ? this._observeParentCardSize() : this._clearParentCardSizeObserver());
const t = n(this._getSizeMapValue());
t && this._requestedSize == null && (this._requestedSize = this.size), t && !this._unsubscribeBreakpoints && this._updateBreakpointSubscription(), e.has("size") && !this._internalSizeUpdate && (this._requestedSize = this.size), this._internalSizeUpdate && (this._internalSizeUpdate = !1), this.parentSized === "true" && h(this), this._internalSizeUpdate = !0, this.setAttribute("size", this.effectiveSize), super.update(e);
}
}
return p([
a()
], i.prototype, "sizeMap"), p([
a()
], i.prototype, "size"), p([
a()
], i.prototype, "parentSized"), p([
a()
], i.prototype, "spacing"), i;
}
export {
f as SizedMixin
};
//# sourceMappingURL=sizedMixin.js.map