@alegendstale/holly-components
Version:
Reusable UI components created using lit
130 lines (129 loc) • 4.16 kB
JavaScript
import { LitElement as c, html as v } from "lit";
import { property as n, state as f, customElement as x } from "lit/decorators.js";
import { styleMap as w } from "lit/directives/style-map.js";
import { parseSVG as u } from "../../utils/basicUtils.js";
import { classMap as m } from "lit/directives/class-map.js";
import d from "./responsive-svg.styles.js";
import { StyleController as l } from "../../controllers/StyleController.js";
import { exposeParts as y } from "../../decorators/ExposeParts.js";
var M = Object.defineProperty, A = Object.getOwnPropertyDescriptor, p = (e, t, s, o) => {
for (var i = o > 1 ? void 0 : o ? A(t, s) : t, h = e.length - 1, a; h >= 0; h--)
(a = e[h]) && (i = (o ? a(t, s, i) : a(i)) || i);
return o && i && M(t, s, i), i;
};
const g = [
"none",
"xMinYMin",
"xMidYMin",
"xMaxYMin",
"xMinYMid",
"xMidYMid",
"xMaxYMid",
"xMinYMax",
"xMidYMax",
"xMaxYMax"
], B = ["meet", "slice"], _ = [
...g,
...g.flatMap((e) => B.map((t) => `${e} ${t}`))
], R = new Set(_);
function S(e) {
return R.has(e);
}
let r = class extends c {
constructor() {
super(...arguments), this.autofit = !1, this.svgColors = !1, this._svg = [], this.viewBox = { x: 0, y: 0, width: 0, height: 0 }, this._widthController = new l(this, "--svg-width", (e) => {
const t = parseFloat(e);
isNaN(t) || t <= 0 || (this.viewBox = { ...this.viewBox, width: t || 0 });
}), this._heightController = new l(this, "--svg-height", (e) => {
const t = parseFloat(e);
isNaN(t) || t <= 0 || (this.viewBox = { ...this.viewBox, height: t || 0 });
});
}
set svg(e) {
let t;
if (typeof e == "string") {
const s = u(e);
if (!(s instanceof SVGElement)) return;
t = s;
} else t = e;
if (t instanceof SVGElement) {
const s = this.getViewBoxSize(t), o = parseFloat(t.getAttribute("width") || "0"), i = parseFloat(t.getAttribute("height") || "0");
this.viewBox = {
x: s?.x ?? 0,
y: s?.y ?? 0,
width: s?.width || o || this.viewBox.width,
height: s?.height || i || this.viewBox.height
}, this._svg = Array.from(t.cloneNode(!0).childNodes);
} else this._svg = t;
}
// Widened range of types.
get svg() {
return this._svg ?? [];
}
set preserveAspectRatio(e) {
this._preserveAspectRatio = e;
}
get preserveAspectRatio() {
if (this._preserveAspectRatio == null && this.svg instanceof SVGElement) {
const e = this.svg.getAttribute("preserveAspectRatio") || "";
if (S(e)) return e;
}
return this._preserveAspectRatio || "xMidYMid meet";
}
// For classes inheriting from responsive-svg (e.g. draw-svg)
svgClasses() {
return {};
}
render() {
const { svg: e, viewBox: t, preserveAspectRatio: s } = this;
return t.height === 0 || t.width === 0 ? v`<p style="font-size: initial;">⚠️ SVG ViewBox</p>` : typeof e == "string" ? v`<p style="font-size: initial;">⚠️ SVG Error</p>` : v`
<svg
class=${m(this.svgClasses())}
style=${w({
"--svg-width-fallback": `${t.width}em`,
"--svg-height-fallback": `${t.height}em`
})}
viewBox="${t.x} ${t.y} ${t.width} ${t.height}"
preserveAspectRatio=${s}
xmlns="http://www.w3.org/2000/svg"
>
${e}
</svg>
`;
}
/**
* Gets the viewBox dimensions from an SVG element.
* @param svg The SVG to get the attribute from.
* @returns The SVG viewBox x, y, width, and height
*/
getViewBoxSize(e) {
const t = e.getAttribute("viewBox")?.split(" ");
return t ? { x: +t[0], y: +t[1], width: +t[2], height: +t[3] } : null;
}
};
r.styles = [d];
p([
n({ type: Boolean, reflect: !0 })
], r.prototype, "autofit", 2);
p([
n({ type: Boolean, reflect: !0 })
], r.prototype, "svgColors", 2);
p([
y(["svg", "path"]),
n({ type: Object })
], r.prototype, "svg", 1);
p([
n({ type: String, reflect: !0 })
], r.prototype, "preserveAspectRatio", 1);
p([
f()
], r.prototype, "viewBox", 2);
r = p([
x("responsive-svg")
], r);
export {
r as ResponsiveSvg,
g as preserveAspectRatioAlignOptions,
_ as preserveAspectRatioOptions,
B as preserveAspectRatioSpacingOptions
};