179 lines
4.3 KiB
JavaScript
179 lines
4.3 KiB
JavaScript
import {
|
|
e
|
|
} from "./chunk.2L6GHXIJ.js";
|
|
import {
|
|
getIconLibrary,
|
|
unwatchIcon,
|
|
watchIcon
|
|
} from "./chunk.ZL53POKZ.js";
|
|
import {
|
|
icon_styles_default
|
|
} from "./chunk.P5YT5LYQ.js";
|
|
import {
|
|
watch
|
|
} from "./chunk.FA5RT4K4.js";
|
|
import {
|
|
ShoelaceElement,
|
|
n,
|
|
r
|
|
} from "./chunk.SEXBCYCU.js";
|
|
import {
|
|
x
|
|
} from "./chunk.CXZZ2LVK.js";
|
|
import {
|
|
__decorateClass
|
|
} from "./chunk.KIILAQWQ.js";
|
|
|
|
// src/components/icon/icon.component.ts
|
|
var CACHEABLE_ERROR = Symbol();
|
|
var RETRYABLE_ERROR = Symbol();
|
|
var parser;
|
|
var iconCache = /* @__PURE__ */ new Map();
|
|
var SlIcon = class extends ShoelaceElement {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.initialRender = false;
|
|
this.svg = null;
|
|
this.label = "";
|
|
this.library = "default";
|
|
}
|
|
/** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
|
|
async resolveIcon(url, library) {
|
|
var _a;
|
|
let fileData;
|
|
if (library == null ? void 0 : library.spriteSheet) {
|
|
return x`<svg part="svg">
|
|
<use part="use" href="${url}"></use>
|
|
</svg>`;
|
|
}
|
|
try {
|
|
fileData = await fetch(url, { mode: "cors" });
|
|
if (!fileData.ok)
|
|
return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;
|
|
} catch (e2) {
|
|
return RETRYABLE_ERROR;
|
|
}
|
|
try {
|
|
const div = document.createElement("div");
|
|
div.innerHTML = await fileData.text();
|
|
const svg = div.firstElementChild;
|
|
if (((_a = svg == null ? void 0 : svg.tagName) == null ? void 0 : _a.toLowerCase()) !== "svg")
|
|
return CACHEABLE_ERROR;
|
|
if (!parser)
|
|
parser = new DOMParser();
|
|
const doc = parser.parseFromString(svg.outerHTML, "text/html");
|
|
const svgEl = doc.body.querySelector("svg");
|
|
if (!svgEl)
|
|
return CACHEABLE_ERROR;
|
|
svgEl.part.add("svg");
|
|
return document.adoptNode(svgEl);
|
|
} catch (e2) {
|
|
return CACHEABLE_ERROR;
|
|
}
|
|
}
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
watchIcon(this);
|
|
}
|
|
firstUpdated() {
|
|
this.initialRender = true;
|
|
this.setIcon();
|
|
}
|
|
disconnectedCallback() {
|
|
super.disconnectedCallback();
|
|
unwatchIcon(this);
|
|
}
|
|
getIconSource() {
|
|
const library = getIconLibrary(this.library);
|
|
if (this.name && library) {
|
|
return {
|
|
url: library.resolver(this.name),
|
|
fromLibrary: true
|
|
};
|
|
}
|
|
return {
|
|
url: this.src,
|
|
fromLibrary: false
|
|
};
|
|
}
|
|
handleLabelChange() {
|
|
const hasLabel = typeof this.label === "string" && this.label.length > 0;
|
|
if (hasLabel) {
|
|
this.setAttribute("role", "img");
|
|
this.setAttribute("aria-label", this.label);
|
|
this.removeAttribute("aria-hidden");
|
|
} else {
|
|
this.removeAttribute("role");
|
|
this.removeAttribute("aria-label");
|
|
this.setAttribute("aria-hidden", "true");
|
|
}
|
|
}
|
|
async setIcon() {
|
|
var _a;
|
|
const { url, fromLibrary } = this.getIconSource();
|
|
const library = fromLibrary ? getIconLibrary(this.library) : void 0;
|
|
if (!url) {
|
|
this.svg = null;
|
|
return;
|
|
}
|
|
let iconResolver = iconCache.get(url);
|
|
if (!iconResolver) {
|
|
iconResolver = this.resolveIcon(url, library);
|
|
iconCache.set(url, iconResolver);
|
|
}
|
|
if (!this.initialRender) {
|
|
return;
|
|
}
|
|
const svg = await iconResolver;
|
|
if (svg === RETRYABLE_ERROR) {
|
|
iconCache.delete(url);
|
|
}
|
|
if (url !== this.getIconSource().url) {
|
|
return;
|
|
}
|
|
if (e(svg)) {
|
|
this.svg = svg;
|
|
return;
|
|
}
|
|
switch (svg) {
|
|
case RETRYABLE_ERROR:
|
|
case CACHEABLE_ERROR:
|
|
this.svg = null;
|
|
this.emit("sl-error");
|
|
break;
|
|
default:
|
|
this.svg = svg.cloneNode(true);
|
|
(_a = library == null ? void 0 : library.mutator) == null ? void 0 : _a.call(library, this.svg);
|
|
this.emit("sl-load");
|
|
}
|
|
}
|
|
render() {
|
|
return this.svg;
|
|
}
|
|
};
|
|
SlIcon.styles = icon_styles_default;
|
|
__decorateClass([
|
|
r()
|
|
], SlIcon.prototype, "svg", 2);
|
|
__decorateClass([
|
|
n({ reflect: true })
|
|
], SlIcon.prototype, "name", 2);
|
|
__decorateClass([
|
|
n()
|
|
], SlIcon.prototype, "src", 2);
|
|
__decorateClass([
|
|
n()
|
|
], SlIcon.prototype, "label", 2);
|
|
__decorateClass([
|
|
n({ reflect: true })
|
|
], SlIcon.prototype, "library", 2);
|
|
__decorateClass([
|
|
watch("label")
|
|
], SlIcon.prototype, "handleLabelChange", 1);
|
|
__decorateClass([
|
|
watch(["name", "src", "library"])
|
|
], SlIcon.prototype, "setIcon", 1);
|
|
|
|
export {
|
|
SlIcon
|
|
};
|