grapesjs-icons
Version:
GrapesJS icons plugin with Iconify
1,845 lines (1,844 loc) • 44.6 kB
JavaScript
var ue = Object.defineProperty;
var fe = (t, e, n) => e in t ? ue(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
var F = (t, e, n) => (fe(t, typeof e != "symbol" ? e + "" : e, n), n);
const I = "grapesjs-icons", jt = "rgba(0, 0, 0, .7)", X = "open-icons-modal", de = `${I}-mode`, pe = `${I}-modal-container`, ut = `${I}-container`, he = `${I}-actions`, _t = `${I}-content`, U = `${I}-collection`, M = `${I}-category`, Ft = `${I}-search`, B = `${I}-icon-target`, ge = `${I}-icon`;
function me(t) {
return {
title: t.title || "Icons",
collectionText: t.collectionText || "Collection",
categoryText: t.categoryText || "Category",
searchText: t.searchText || "Search an icon..."
};
}
function ye(t) {
return {
type: t.type || "icon",
name: t.name || "Icon"
};
}
function be(t) {
return {
category: t.category || "Basic"
};
}
const xe = "https://api.iconify.design", Ie = "grapesjs-icons", Ce = `[${Ie}::utils/icon]`;
async function we(t) {
try {
return await (await fetch(`${xe}/collection?prefix=${t}`)).json();
} catch (e) {
return console.error(`${Ce} "${t}" fetching error`, e), null;
}
}
async function Se(t) {
const e = [];
for (const o of t) {
const s = we(o);
e.push(s);
}
return (await Promise.all(e)).filter((o) => o !== null);
}
function ve(t) {
const e = [];
for (const { title: n, prefix: r } of t) {
const o = {
text: n,
value: r
};
e.push(o);
}
return e;
}
function Ee(t) {
const { categories: e } = t, n = [];
for (const r in e) {
const o = {
text: r,
value: r
};
n.push(o);
}
return n;
}
function Rt(t) {
const e = document.createElement("select");
for (const { text: n, value: r } of t) {
const o = document.createElement("option");
o.text = n, o.value = r, e.appendChild(o);
}
return e.style.maxWidth = "220px", e.style.width = "100%", e.style.padding = "10px 14px", e.style.borderRadius = "6px", e.style.border = `1px solid ${jt}`, e.style.fontSize = "inherit", e.style.fontFamily = "inherit", e.style.color = "black", e.style.backgroundColor = "white", e;
}
function ke(t) {
const e = Rt(t);
return e.classList.add(U), e;
}
function Te(t) {
const e = Rt(t);
return e.classList.add(M), e;
}
function Ae(t) {
const e = [];
for (const n of t) {
const r = Ee(n), o = Te(r);
o.dataset.collectionName = n.prefix, e.push(o);
}
return e;
}
function Dt(t, e) {
const n = new Event("change"), r = t.options;
let o = r[0];
if (e) {
for (const s of r)
if (s.value === e) {
o = s;
break;
}
}
t.style.display = "initial", t.value = o.value, t.dispatchEvent(n);
}
function Ne(t) {
const e = document.createElement("input");
return e.type = "search", e.placeholder = t, e.style.padding = "10px 14px", e.style.borderRadius = "6px", e.style.border = `1px solid ${jt}`, e.style.fontSize = "inherit", e.style.fontFamily = "inherit", e.style.color = "black", e.style.backgroundColor = "white", e.classList.add(Ft), e;
}
function Oe(t, e) {
const n = document.createElement("div"), r = ve(t), o = ke(r), s = Ae(t), i = Ne(e);
return n.style.display = "flex", n.style.gap = "10px", n.style.marginBottom = "10px", n.classList.add(he), i.style.flexGrow = "1", n.appendChild(o), s.forEach((c) => {
c.style.display = "none", n.appendChild(c);
}), n.appendChild(i), n;
}
function Pe(t, e) {
const n = document.createElement("div");
return n.style.width = "48px", n.style.height = "48px", n.style.color = "black", n.style.cursor = "pointer", n.style.borderRadius = "6px", n.style.backgroundColor = "white", n.classList.add(B), n.dataset.iconPrefix = t, n.dataset.iconName = e, n;
}
function Me(t, e) {
const { categories: n, prefix: r } = t, o = e ? n[e] : n[Object.keys(n)[0]], s = document.createElement("div");
for (const i of o) {
const c = Pe(r, i);
s.appendChild(c);
}
return s.style.display = "flex", s.style.gap = "10px", s.style.flexWrap = "wrap", s.classList.add(_t), s;
}
function Le() {
const t = document.createElement("div");
return t.style.display = "flex", t.style.flexDirection = "column", t.style.gap = "10px", t.classList.add(ut), t;
}
function $e(t) {
const e = Le();
return e.appendChild(t), e.outerHTML;
}
function je(t, e) {
const n = new DocumentFragment(), r = Oe(t, e);
return n.appendChild(r), $e(n);
}
const k = [];
function _e(t, e) {
return k.findIndex((n) => n.type === t && n.element === e);
}
function Fe(t, e) {
return _e(t, e) !== -1;
}
function H(t, e, n) {
Fe(t, e) || (e.addEventListener(t, n), k.push({
type: t,
element: e,
listener: n
}));
}
function Re(t, e, n) {
for (const r of e)
H(t, r, n);
}
function ft(t) {
const e = k.length, n = [];
if (e !== 0) {
for (let r = 0; r < e; r++) {
const { type: o, element: s, listener: i } = k[r];
t && !s.classList.contains(t) || (s.removeEventListener(o, i), n.push(r));
}
for (const r of n)
k.splice(r, 1);
}
}
/**
* (c) Iconify
*
* For the full copyright and license information, please view the license.txt
* files at https://github.com/iconify/iconify
*
* Licensed under MIT.
*
* @license MIT
* @version 1.0.8
*/
const qt = Object.freeze(
{
left: 0,
top: 0,
width: 16,
height: 16
}
), Q = Object.freeze({
rotate: 0,
vFlip: !1,
hFlip: !1
}), L = Object.freeze({
...qt,
...Q
}), nt = Object.freeze({
...L,
body: "",
hidden: !1
}), De = Object.freeze({
width: null,
height: null
}), Bt = Object.freeze({
// Dimensions
...De,
// Transformations
...Q
});
function qe(t, e = 0) {
const n = t.replace(/^-?[0-9.]*/, "");
function r(o) {
for (; o < 0; )
o += 4;
return o % 4;
}
if (n === "") {
const o = parseInt(t);
return isNaN(o) ? 0 : r(o);
} else if (n !== t) {
let o = 0;
switch (n) {
case "%":
o = 25;
break;
case "deg":
o = 90;
}
if (o) {
let s = parseFloat(t.slice(0, t.length - n.length));
return isNaN(s) ? 0 : (s = s / o, s % 1 === 0 ? r(s) : 0);
}
}
return e;
}
const Be = /[\s,]+/;
function He(t, e) {
e.split(Be).forEach((n) => {
switch (n.trim()) {
case "horizontal":
t.hFlip = !0;
break;
case "vertical":
t.vFlip = !0;
break;
}
});
}
const Ht = {
...Bt,
preserveAspectRatio: ""
};
function yt(t) {
const e = {
...Ht
}, n = (r, o) => t.getAttribute(r) || o;
return e.width = n("width", null), e.height = n("height", null), e.rotate = qe(n("rotate", "")), He(e, n("flip", "")), e.preserveAspectRatio = n("preserveAspectRatio", n("preserveaspectratio", "")), e;
}
function Qe(t, e) {
for (const n in Ht)
if (t[n] !== e[n])
return !0;
return !1;
}
const T = /^[a-z0-9]+(-[a-z0-9]+)*$/, $ = (t, e, n, r = "") => {
const o = t.split(":");
if (t.slice(0, 1) === "@") {
if (o.length < 2 || o.length > 3)
return null;
r = o.shift().slice(1);
}
if (o.length > 3 || !o.length)
return null;
if (o.length > 1) {
const c = o.pop(), l = o.pop(), a = {
// Allow provider without '@': "provider:prefix:name"
provider: o.length > 0 ? o[0] : r,
prefix: l,
name: c
};
return e && !D(a) ? null : a;
}
const s = o[0], i = s.split("-");
if (i.length > 1) {
const c = {
provider: r,
prefix: i.shift(),
name: i.join("-")
};
return e && !D(c) ? null : c;
}
if (n && r === "") {
const c = {
provider: r,
prefix: "",
name: s
};
return e && !D(c, n) ? null : c;
}
return null;
}, D = (t, e) => t ? !!((t.provider === "" || t.provider.match(T)) && (e && t.prefix === "" || t.prefix.match(T)) && t.name.match(T)) : !1;
function ze(t, e) {
const n = {};
!t.hFlip != !e.hFlip && (n.hFlip = !0), !t.vFlip != !e.vFlip && (n.vFlip = !0);
const r = ((t.rotate || 0) + (e.rotate || 0)) % 4;
return r && (n.rotate = r), n;
}
function bt(t, e) {
const n = ze(t, e);
for (const r in nt)
r in Q ? r in t && !(r in n) && (n[r] = Q[r]) : r in e ? n[r] = e[r] : r in t && (n[r] = t[r]);
return n;
}
function Ve(t, e) {
const n = t.icons, r = t.aliases || /* @__PURE__ */ Object.create(null), o = /* @__PURE__ */ Object.create(null);
function s(i) {
if (n[i])
return o[i] = [];
if (!(i in o)) {
o[i] = null;
const c = r[i] && r[i].parent, l = c && s(c);
l && (o[i] = [c].concat(l));
}
return o[i];
}
return (e || Object.keys(n).concat(Object.keys(r))).forEach(s), o;
}
function Ue(t, e, n) {
const r = t.icons, o = t.aliases || /* @__PURE__ */ Object.create(null);
let s = {};
function i(c) {
s = bt(
r[c] || o[c],
s
);
}
return i(e), n.forEach(i), bt(t, s);
}
function Qt(t, e) {
const n = [];
if (typeof t != "object" || typeof t.icons != "object")
return n;
t.not_found instanceof Array && t.not_found.forEach((o) => {
e(o, null), n.push(o);
});
const r = Ve(t);
for (const o in r) {
const s = r[o];
s && (e(o, Ue(t, o, s)), n.push(o));
}
return n;
}
const Ge = {
provider: "",
aliases: {},
not_found: {},
...qt
};
function Y(t, e) {
for (const n in e)
if (n in t && typeof t[n] != typeof e[n])
return !1;
return !0;
}
function zt(t) {
if (typeof t != "object" || t === null)
return null;
const e = t;
if (typeof e.prefix != "string" || !t.icons || typeof t.icons != "object" || !Y(t, Ge))
return null;
const n = e.icons;
for (const o in n) {
const s = n[o];
if (!o.match(T) || typeof s.body != "string" || !Y(
s,
nt
))
return null;
}
const r = e.aliases || /* @__PURE__ */ Object.create(null);
for (const o in r) {
const s = r[o], i = s.parent;
if (!o.match(T) || typeof i != "string" || !n[i] && !r[i] || !Y(
s,
nt
))
return null;
}
return e;
}
const z = /* @__PURE__ */ Object.create(null);
function We(t, e) {
return {
provider: t,
prefix: e,
icons: /* @__PURE__ */ Object.create(null),
missing: /* @__PURE__ */ new Set()
};
}
function C(t, e) {
const n = z[t] || (z[t] = /* @__PURE__ */ Object.create(null));
return n[e] || (n[e] = We(t, e));
}
function dt(t, e) {
return zt(e) ? Qt(e, (n, r) => {
r ? t.icons[n] = r : t.missing.add(n);
}) : [];
}
function Je(t, e, n) {
try {
if (typeof n.body == "string")
return t.icons[e] = { ...n }, !0;
} catch {
}
return !1;
}
function Ke(t, e) {
let n = [];
return (typeof t == "string" ? [t] : Object.keys(z)).forEach((o) => {
(typeof o == "string" && typeof e == "string" ? [e] : Object.keys(z[o] || {})).forEach((i) => {
const c = C(o, i);
n = n.concat(
Object.keys(c.icons).map(
(l) => (o !== "" ? "@" + o + ":" : "") + i + ":" + l
)
);
});
}), n;
}
let N = !1;
function Vt(t) {
return typeof t == "boolean" && (N = t), N;
}
function O(t) {
const e = typeof t == "string" ? $(t, !0, N) : t;
if (e) {
const n = C(e.provider, e.prefix), r = e.name;
return n.icons[r] || (n.missing.has(r) ? null : void 0);
}
}
function Ut(t, e) {
const n = $(t, !0, N);
if (!n)
return !1;
const r = C(n.provider, n.prefix);
return Je(r, n.name, e);
}
function xt(t, e) {
if (typeof t != "object")
return !1;
if (typeof e != "string" && (e = t.provider || ""), N && !e && !t.prefix) {
let o = !1;
return zt(t) && (t.prefix = "", Qt(t, (s, i) => {
i && Ut(s, i) && (o = !0);
})), o;
}
const n = t.prefix;
if (!D({
provider: e,
prefix: n,
name: "a"
}))
return !1;
const r = C(e, n);
return !!dt(r, t);
}
function Xe(t) {
return !!O(t);
}
function Ye(t) {
const e = O(t);
return e ? {
...L,
...e
} : null;
}
function Ze(t) {
const e = {
loaded: [],
missing: [],
pending: []
}, n = /* @__PURE__ */ Object.create(null);
t.sort((o, s) => o.provider !== s.provider ? o.provider.localeCompare(s.provider) : o.prefix !== s.prefix ? o.prefix.localeCompare(s.prefix) : o.name.localeCompare(s.name));
let r = {
provider: "",
prefix: "",
name: ""
};
return t.forEach((o) => {
if (r.name === o.name && r.prefix === o.prefix && r.provider === o.provider)
return;
r = o;
const s = o.provider, i = o.prefix, c = o.name, l = n[s] || (n[s] = /* @__PURE__ */ Object.create(null)), a = l[i] || (l[i] = C(s, i));
let u;
c in a.icons ? u = e.loaded : i === "" || a.missing.has(c) ? u = e.missing : u = e.pending;
const f = {
provider: s,
prefix: i,
name: c
};
u.push(f);
}), e;
}
function Gt(t, e) {
t.forEach((n) => {
const r = n.loaderCallbacks;
r && (n.loaderCallbacks = r.filter((o) => o.id !== e));
});
}
function tn(t) {
t.pendingCallbacksFlag || (t.pendingCallbacksFlag = !0, setTimeout(() => {
t.pendingCallbacksFlag = !1;
const e = t.loaderCallbacks ? t.loaderCallbacks.slice(0) : [];
if (!e.length)
return;
let n = !1;
const r = t.provider, o = t.prefix;
e.forEach((s) => {
const i = s.icons, c = i.pending.length;
i.pending = i.pending.filter((l) => {
if (l.prefix !== o)
return !0;
const a = l.name;
if (t.icons[a])
i.loaded.push({
provider: r,
prefix: o,
name: a
});
else if (t.missing.has(a))
i.missing.push({
provider: r,
prefix: o,
name: a
});
else
return n = !0, !0;
return !1;
}), i.pending.length !== c && (n || Gt([t], s.id), s.callback(
i.loaded.slice(0),
i.missing.slice(0),
i.pending.slice(0),
s.abort
));
});
}));
}
let en = 0;
function nn(t, e, n) {
const r = en++, o = Gt.bind(null, n, r);
if (!e.pending.length)
return o;
const s = {
id: r,
icons: e,
callback: t,
abort: o
};
return n.forEach((i) => {
(i.loaderCallbacks || (i.loaderCallbacks = [])).push(s);
}), o;
}
const ot = /* @__PURE__ */ Object.create(null);
function It(t, e) {
ot[t] = e;
}
function rt(t) {
return ot[t] || ot[""];
}
function on(t, e = !0, n = !1) {
const r = [];
return t.forEach((o) => {
const s = typeof o == "string" ? $(o, e, n) : o;
s && r.push(s);
}), r;
}
var rn = {
resources: [],
index: 0,
timeout: 2e3,
rotate: 750,
random: !1,
dataAfterTimeout: !1
};
function sn(t, e, n, r) {
const o = t.resources.length, s = t.random ? Math.floor(Math.random() * o) : t.index;
let i;
if (t.random) {
let h = t.resources.slice(0);
for (i = []; h.length > 1; ) {
const x = Math.floor(Math.random() * h.length);
i.push(h[x]), h = h.slice(0, x).concat(h.slice(x + 1));
}
i = i.concat(h);
} else
i = t.resources.slice(s).concat(t.resources.slice(0, s));
const c = Date.now();
let l = "pending", a = 0, u, f = null, d = [], p = [];
typeof r == "function" && p.push(r);
function g() {
f && (clearTimeout(f), f = null);
}
function m() {
l === "pending" && (l = "aborted"), g(), d.forEach((h) => {
h.status === "pending" && (h.status = "aborted");
}), d = [];
}
function J(h, x) {
x && (p = []), typeof h == "function" && p.push(h);
}
function j() {
return {
startTime: c,
payload: e,
status: l,
queriesSent: a,
queriesPending: d.length,
subscribe: J,
abort: m
};
}
function y() {
l = "failed", p.forEach((h) => {
h(void 0, u);
});
}
function b() {
d.forEach((h) => {
h.status === "pending" && (h.status = "aborted");
}), d = [];
}
function ae(h, x, v) {
const _ = x !== "success";
switch (d = d.filter((w) => w !== h), l) {
case "pending":
break;
case "failed":
if (_ || !t.dataAfterTimeout)
return;
break;
default:
return;
}
if (x === "abort") {
u = v, y();
return;
}
if (_) {
u = v, d.length || (i.length ? K() : y());
return;
}
if (g(), b(), !t.random) {
const w = t.resources.indexOf(h.resource);
w !== -1 && w !== t.index && (t.index = w);
}
l = "completed", p.forEach((w) => {
w(v);
});
}
function K() {
if (l !== "pending")
return;
g();
const h = i.shift();
if (h === void 0) {
if (d.length) {
f = setTimeout(() => {
g(), l === "pending" && (b(), y());
}, t.timeout);
return;
}
y();
return;
}
const x = {
status: "pending",
resource: h,
callback: (v, _) => {
ae(x, v, _);
}
};
d.push(x), a++, f = setTimeout(K, t.rotate), n(h, e, x.callback);
}
return setTimeout(K), j;
}
function Wt(t) {
const e = {
...rn,
...t
};
let n = [];
function r() {
n = n.filter((c) => c().status === "pending");
}
function o(c, l, a) {
const u = sn(
e,
c,
l,
(f, d) => {
r(), a && a(f, d);
}
);
return n.push(u), u;
}
function s(c) {
return n.find((l) => c(l)) || null;
}
return {
query: o,
find: s,
setIndex: (c) => {
e.index = c;
},
getIndex: () => e.index,
cleanup: r
};
}
function pt(t) {
let e;
if (typeof t.resources == "string")
e = [t.resources];
else if (e = t.resources, !(e instanceof Array) || !e.length)
return null;
return {
// API hosts
resources: e,
// Root path
path: t.path || "/",
// URL length limit
maxURL: t.maxURL || 500,
// Timeout before next host is used.
rotate: t.rotate || 750,
// Timeout before failing query.
timeout: t.timeout || 5e3,
// Randomise default API end point.
random: t.random === !0,
// Start index
index: t.index || 0,
// Receive data after time out (used if time out kicks in first, then API module sends data anyway).
dataAfterTimeout: t.dataAfterTimeout !== !1
};
}
const G = /* @__PURE__ */ Object.create(null), E = [
"https://api.simplesvg.com",
"https://api.unisvg.com"
], q = [];
for (; E.length > 0; )
E.length === 1 || Math.random() > 0.5 ? q.push(E.shift()) : q.push(E.pop());
G[""] = pt({
resources: ["https://api.iconify.design"].concat(q)
});
function Ct(t, e) {
const n = pt(e);
return n === null ? !1 : (G[t] = n, !0);
}
function W(t) {
return G[t];
}
function cn() {
return Object.keys(G);
}
function wt() {
}
const Z = /* @__PURE__ */ Object.create(null);
function ln(t) {
if (!Z[t]) {
const e = W(t);
if (!e)
return;
const n = Wt(e), r = {
config: e,
redundancy: n
};
Z[t] = r;
}
return Z[t];
}
function Jt(t, e, n) {
let r, o;
if (typeof t == "string") {
const s = rt(t);
if (!s)
return n(void 0, 424), wt;
o = s.send;
const i = ln(t);
i && (r = i.redundancy);
} else {
const s = pt(t);
if (s) {
r = Wt(s);
const i = t.resources ? t.resources[0] : "", c = rt(i);
c && (o = c.send);
}
}
return !r || !o ? (n(void 0, 424), wt) : r.query(e, o, n)().abort;
}
const St = "iconify2", P = "iconify", Kt = P + "-count", vt = P + "-version", Xt = 36e5, an = 168;
function st(t, e) {
try {
return t.getItem(e);
} catch {
}
}
function ht(t, e, n) {
try {
return t.setItem(e, n), !0;
} catch {
}
}
function Et(t, e) {
try {
t.removeItem(e);
} catch {
}
}
function it(t, e) {
return ht(t, Kt, e.toString());
}
function ct(t) {
return parseInt(st(t, Kt)) || 0;
}
const S = {
local: !0,
session: !0
}, Yt = {
local: /* @__PURE__ */ new Set(),
session: /* @__PURE__ */ new Set()
};
let gt = !1;
function un(t) {
gt = t;
}
let R = typeof window > "u" ? {} : window;
function Zt(t) {
const e = t + "Storage";
try {
if (R && R[e] && typeof R[e].length == "number")
return R[e];
} catch {
}
S[t] = !1;
}
function te(t, e) {
const n = Zt(t);
if (!n)
return;
const r = st(n, vt);
if (r !== St) {
if (r) {
const c = ct(n);
for (let l = 0; l < c; l++)
Et(n, P + l.toString());
}
ht(n, vt, St), it(n, 0);
return;
}
const o = Math.floor(Date.now() / Xt) - an, s = (c) => {
const l = P + c.toString(), a = st(n, l);
if (typeof a == "string") {
try {
const u = JSON.parse(a);
if (typeof u == "object" && typeof u.cached == "number" && u.cached > o && typeof u.provider == "string" && typeof u.data == "object" && typeof u.data.prefix == "string" && // Valid item: run callback
e(u, c))
return !0;
} catch {
}
Et(n, l);
}
};
let i = ct(n);
for (let c = i - 1; c >= 0; c--)
s(c) || (c === i - 1 ? (i--, it(n, i)) : Yt[t].add(c));
}
function ee() {
if (!gt) {
un(!0);
for (const t in S)
te(t, (e) => {
const n = e.data, r = e.provider, o = n.prefix, s = C(
r,
o
);
if (!dt(s, n).length)
return !1;
const i = n.lastModified || -1;
return s.lastModifiedCached = s.lastModifiedCached ? Math.min(s.lastModifiedCached, i) : i, !0;
});
}
}
function fn(t, e) {
const n = t.lastModifiedCached;
if (
// Matches or newer
n && n >= e
)
return n === e;
if (t.lastModifiedCached = e, n)
for (const r in S)
te(r, (o) => {
const s = o.data;
return o.provider !== t.provider || s.prefix !== t.prefix || s.lastModified === e;
});
return !0;
}
function dn(t, e) {
gt || ee();
function n(r) {
let o;
if (!S[r] || !(o = Zt(r)))
return;
const s = Yt[r];
let i;
if (s.size)
s.delete(i = Array.from(s).shift());
else if (i = ct(o), !it(o, i + 1))
return;
const c = {
cached: Math.floor(Date.now() / Xt),
provider: t.provider,
data: e
};
return ht(
o,
P + i.toString(),
JSON.stringify(c)
);
}
e.lastModified && !fn(t, e.lastModified) || Object.keys(e.icons).length && (e.not_found && (e = Object.assign({}, e), delete e.not_found), n("local") || n("session"));
}
function kt() {
}
function pn(t) {
t.iconsLoaderFlag || (t.iconsLoaderFlag = !0, setTimeout(() => {
t.iconsLoaderFlag = !1, tn(t);
}));
}
function hn(t, e) {
t.iconsToLoad ? t.iconsToLoad = t.iconsToLoad.concat(e).sort() : t.iconsToLoad = e, t.iconsQueueFlag || (t.iconsQueueFlag = !0, setTimeout(() => {
t.iconsQueueFlag = !1;
const { provider: n, prefix: r } = t, o = t.iconsToLoad;
delete t.iconsToLoad;
let s;
if (!o || !(s = rt(n)))
return;
s.prepare(n, r, o).forEach((c) => {
Jt(n, c, (l) => {
if (typeof l != "object")
c.icons.forEach((a) => {
t.missing.add(a);
});
else
try {
const a = dt(
t,
l
);
if (!a.length)
return;
const u = t.pendingIcons;
u && a.forEach((f) => {
u.delete(f);
}), dn(t, l);
} catch (a) {
console.error(a);
}
pn(t);
});
});
}));
}
const mt = (t, e) => {
const n = on(t, !0, Vt()), r = Ze(n);
if (!r.pending.length) {
let l = !0;
return e && setTimeout(() => {
l && e(
r.loaded,
r.missing,
r.pending,
kt
);
}), () => {
l = !1;
};
}
const o = /* @__PURE__ */ Object.create(null), s = [];
let i, c;
return r.pending.forEach((l) => {
const { provider: a, prefix: u } = l;
if (u === c && a === i)
return;
i = a, c = u, s.push(C(a, u));
const f = o[a] || (o[a] = /* @__PURE__ */ Object.create(null));
f[u] || (f[u] = []);
}), r.pending.forEach((l) => {
const { provider: a, prefix: u, name: f } = l, d = C(a, u), p = d.pendingIcons || (d.pendingIcons = /* @__PURE__ */ new Set());
p.has(f) || (p.add(f), o[a][u].push(f));
}), s.forEach((l) => {
const { provider: a, prefix: u } = l;
o[a][u].length && hn(l, o[a][u]);
}), e ? nn(e, r, s) : kt;
}, gn = (t) => new Promise((e, n) => {
const r = typeof t == "string" ? $(t, !0) : t;
if (!r) {
n(t);
return;
}
mt([r || t], (o) => {
if (o.length && r) {
const s = O(r);
if (s) {
e({
...L,
...s
});
return;
}
}
n(t);
});
});
function mn(t) {
try {
const e = typeof t == "string" ? JSON.parse(t) : t;
if (typeof e.body == "string")
return {
...e
};
} catch {
}
}
function yn(t, e) {
const n = typeof t == "string" ? $(t, !0, !0) : null;
if (!n) {
const s = mn(t);
return {
value: t,
data: s
};
}
const r = O(n);
if (r !== void 0 || !n.prefix)
return {
value: t,
name: n,
data: r
// could be 'null' -> icon is missing
};
const o = mt([n], () => e(t, n, O(n)));
return {
value: t,
name: n,
loading: o
};
}
function tt(t) {
return t.hasAttribute("inline");
}
let ne = !1;
try {
ne = navigator.vendor.indexOf("Apple") === 0;
} catch {
}
function bn(t, e) {
switch (e) {
case "svg":
case "bg":
case "mask":
return e;
}
return e !== "style" && (ne || t.indexOf("<a") === -1) ? "svg" : t.indexOf("currentColor") === -1 ? "bg" : "mask";
}
const xn = /(-?[0-9.]*[0-9]+[0-9.]*)/g, In = /^-?[0-9.]*[0-9]+[0-9.]*$/g;
function lt(t, e, n) {
if (e === 1)
return t;
if (n = n || 100, typeof t == "number")
return Math.ceil(t * e * n) / n;
if (typeof t != "string")
return t;
const r = t.split(xn);
if (r === null || !r.length)
return t;
const o = [];
let s = r.shift(), i = In.test(s);
for (; ; ) {
if (i) {
const c = parseFloat(s);
isNaN(c) ? o.push(s) : o.push(Math.ceil(c * e * n) / n);
} else
o.push(s);
if (s = r.shift(), s === void 0)
return o.join("");
i = !i;
}
}
const Cn = (t) => t === "unset" || t === "undefined" || t === "none";
function oe(t, e) {
const n = {
...L,
...t
}, r = {
...Bt,
...e
}, o = {
left: n.left,
top: n.top,
width: n.width,
height: n.height
};
let s = n.body;
[n, r].forEach((g) => {
const m = [], J = g.hFlip, j = g.vFlip;
let y = g.rotate;
J ? j ? y += 2 : (m.push(
"translate(" + (o.width + o.left).toString() + " " + (0 - o.top).toString() + ")"
), m.push("scale(-1 1)"), o.top = o.left = 0) : j && (m.push(
"translate(" + (0 - o.left).toString() + " " + (o.height + o.top).toString() + ")"
), m.push("scale(1 -1)"), o.top = o.left = 0);
let b;
switch (y < 0 && (y -= Math.floor(y / 4) * 4), y = y % 4, y) {
case 1:
b = o.height / 2 + o.top, m.unshift(
"rotate(90 " + b.toString() + " " + b.toString() + ")"
);
break;
case 2:
m.unshift(
"rotate(180 " + (o.width / 2 + o.left).toString() + " " + (o.height / 2 + o.top).toString() + ")"
);
break;
case 3:
b = o.width / 2 + o.left, m.unshift(
"rotate(-90 " + b.toString() + " " + b.toString() + ")"
);
break;
}
y % 2 === 1 && (o.left !== o.top && (b = o.left, o.left = o.top, o.top = b), o.width !== o.height && (b = o.width, o.width = o.height, o.height = b)), m.length && (s = '<g transform="' + m.join(" ") + '">' + s + "</g>");
});
const i = r.width, c = r.height, l = o.width, a = o.height;
let u, f;
i === null ? (f = c === null ? "1em" : c === "auto" ? a : c, u = lt(f, l / a)) : (u = i === "auto" ? l : i, f = c === null ? lt(u, a / l) : c === "auto" ? a : c);
const d = {}, p = (g, m) => {
Cn(m) || (d[g] = m.toString());
};
return p("width", u), p("height", f), d.viewBox = o.left.toString() + " " + o.top.toString() + " " + l.toString() + " " + a.toString(), {
attributes: d,
body: s
};
}
const wn = () => {
let t;
try {
if (t = fetch, typeof t == "function")
return t;
} catch {
}
};
let V = wn();
function Sn(t) {
V = t;
}
function vn() {
return V;
}
function En(t, e) {
const n = W(t);
if (!n)
return 0;
let r;
if (!n.maxURL)
r = 0;
else {
let o = 0;
n.resources.forEach((i) => {
o = Math.max(o, i.length);
});
const s = e + ".json?icons=";
r = n.maxURL - o - n.path.length - s.length;
}
return r;
}
function kn(t) {
return t === 404;
}
const Tn = (t, e, n) => {
const r = [], o = En(t, e), s = "icons";
let i = {
type: s,
provider: t,
prefix: e,
icons: []
}, c = 0;
return n.forEach((l, a) => {
c += l.length + 1, c >= o && a > 0 && (r.push(i), i = {
type: s,
provider: t,
prefix: e,
icons: []
}, c = l.length), i.icons.push(l);
}), r.push(i), r;
};
function An(t) {
if (typeof t == "string") {
const e = W(t);
if (e)
return e.path;
}
return "/";
}
const Nn = (t, e, n) => {
if (!V) {
n("abort", 424);
return;
}
let r = An(e.provider);
switch (e.type) {
case "icons": {
const s = e.prefix, c = e.icons.join(","), l = new URLSearchParams({
icons: c
});
r += s + ".json?" + l.toString();
break;
}
case "custom": {
const s = e.uri;
r += s.slice(0, 1) === "/" ? s.slice(1) : s;
break;
}
default:
n("abort", 400);
return;
}
let o = 503;
V(t + r).then((s) => {
const i = s.status;
if (i !== 200) {
setTimeout(() => {
n(kn(i) ? "abort" : "next", i);
});
return;
}
return o = 501, s.json();
}).then((s) => {
if (typeof s != "object" || s === null) {
setTimeout(() => {
s === 404 ? n("abort", s) : n("next", o);
});
return;
}
setTimeout(() => {
n("success", s);
});
}).catch(() => {
n("next", o);
});
}, On = {
prepare: Tn,
send: Nn
};
function Tt(t, e) {
switch (t) {
case "local":
case "session":
S[t] = e;
break;
case "all":
for (const n in S)
S[n] = e;
break;
}
}
const et = "data-style";
let re = "";
function Pn(t) {
re = t;
}
function At(t, e) {
let n = Array.from(t.childNodes).find((r) => r.hasAttribute && r.hasAttribute(et));
n || (n = document.createElement("style"), n.setAttribute(et, et), t.appendChild(n)), n.textContent = ":host{display:inline-block;vertical-align:" + (e ? "-0.125em" : "0") + "}span,svg{display:block}" + re;
}
function se() {
It("", On), Vt(!0);
let t;
try {
t = window;
} catch {
}
if (t) {
if (ee(), t.IconifyPreload !== void 0) {
const n = t.IconifyPreload, r = "Invalid IconifyPreload syntax.";
typeof n == "object" && n !== null && (n instanceof Array ? n : [n]).forEach((o) => {
try {
// Check if item is an object and not null/array
(typeof o != "object" || o === null || o instanceof Array || // Check for 'icons' and 'prefix'
typeof o.icons != "object" || typeof o.prefix != "string" || // Add icon set
!xt(o)) && console.error(r);
} catch {
console.error(r);
}
});
}
if (t.IconifyProviders !== void 0) {
const n = t.IconifyProviders;
if (typeof n == "object" && n !== null)
for (const r in n) {
const o = "IconifyProviders[" + r + "] is invalid.";
try {
const s = n[r];
if (typeof s != "object" || !s || s.resources === void 0)
continue;
Ct(r, s) || console.error(o);
} catch {
console.error(o);
}
}
}
}
return {
enableCache: (n) => Tt(n, !0),
disableCache: (n) => Tt(n, !1),
iconExists: Xe,
getIcon: Ye,
listIcons: Ke,
addIcon: Ut,
addCollection: xt,
calculateSize: lt,
buildIcon: oe,
loadIcons: mt,
loadIcon: gn,
addAPIProvider: Ct,
appendCustomStyle: Pn,
_api: {
getAPIConfig: W,
setAPIModule: It,
sendAPIQuery: Jt,
setFetch: Sn,
getFetch: vn,
listAPIProviders: cn
}
};
}
function ie(t, e) {
let n = t.indexOf("xlink:") === -1 ? "" : ' xmlns:xlink="http://www.w3.org/1999/xlink"';
for (const r in e)
n += " " + r + '="' + e[r] + '"';
return '<svg xmlns="http://www.w3.org/2000/svg"' + n + ">" + t + "</svg>";
}
function Mn(t) {
return t.replace(/"/g, "'").replace(/%/g, "%25").replace(/#/g, "%23").replace(/</g, "%3C").replace(/>/g, "%3E").replace(/\s+/g, " ");
}
function Ln(t) {
return "data:image/svg+xml," + Mn(t);
}
function $n(t) {
return 'url("' + Ln(t) + '")';
}
const at = {
"background-color": "currentColor"
}, ce = {
"background-color": "transparent"
}, Nt = {
image: "var(--svg)",
repeat: "no-repeat",
size: "100% 100%"
}, Ot = {
"-webkit-mask": at,
mask: at,
background: ce
};
for (const t in Ot) {
const e = Ot[t];
for (const n in Nt)
e[t + "-" + n] = Nt[n];
}
function Pt(t) {
return t ? t + (t.match(/^[-0-9.]+$/) ? "px" : "") : "inherit";
}
function jn(t, e, n) {
const r = document.createElement("span");
let o = t.body;
o.indexOf("<a") !== -1 && (o += "<!-- " + Date.now() + " -->");
const s = t.attributes, i = ie(o, {
...s,
width: e.width + "",
height: e.height + ""
}), c = $n(i), l = r.style, a = {
"--svg": c,
width: Pt(s.width),
height: Pt(s.height),
...n ? at : ce
};
for (const u in a)
l.setProperty(u, a[u]);
return r;
}
let A;
function _n() {
try {
A = window.trustedTypes.createPolicy("iconify", {
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
createHTML: (t) => t
});
} catch {
A = null;
}
}
function Fn(t) {
return A === void 0 && _n(), A ? A.createHTML(t) : t;
}
function Rn(t) {
const e = document.createElement("span"), n = t.attributes;
let r = "";
n.width || (r = "width: inherit;"), n.height || (r += "height: inherit;"), r && (n.style = r);
const o = ie(t.body, n);
return e.innerHTML = Fn(o), e.firstChild;
}
function Mt(t, e) {
const n = e.icon.data, r = e.customisations, o = oe(n, r);
r.preserveAspectRatio && (o.attributes.preserveAspectRatio = r.preserveAspectRatio);
const s = e.renderedMode;
let i;
switch (s) {
case "svg":
i = Rn(o);
break;
default:
i = jn(o, {
...L,
...n
}, s === "mask");
}
const c = Array.from(t.childNodes).find((l) => {
const a = l.tagName && l.tagName.toUpperCase();
return a === "SPAN" || a === "SVG";
});
c ? i.tagName === "SPAN" && c.tagName === i.tagName ? c.setAttribute("style", i.getAttribute("style")) : t.replaceChild(i, c) : t.appendChild(i);
}
function Lt(t, e, n) {
const r = n && (n.rendered ? n : n.lastRender);
return {
rendered: !1,
inline: e,
icon: t,
lastRender: r
};
}
function Dn(t = "iconify-icon") {
let e, n;
try {
e = window.customElements, n = window.HTMLElement;
} catch {
return;
}
if (!e || !n)
return;
const r = e.get(t);
if (r)
return r;
const o = [
// Icon
"icon",
// Mode
"mode",
"inline",
// Customisations
"width",
"height",
"rotate",
"flip"
], s = class extends n {
/**
* Constructor
*/
constructor() {
super();
// Root
F(this, "_shadowRoot");
// State
F(this, "_state");
// Attributes check queued
F(this, "_checkQueued", !1);
const l = this._shadowRoot = this.attachShadow({
mode: "open"
}), a = tt(this);
At(l, a), this._state = Lt({
value: ""
}, a), this._queueCheck();
}
/**
* Observed attributes
*/
static get observedAttributes() {
return o.slice(0);
}
/**
* Observed properties that are different from attributes
*
* Experimental! Need to test with various frameworks that support it
*/
/*
static get properties() {
return {
inline: {
type: Boolean,
reflect: true,
},
// Not listing other attributes because they are strings or combination
// of string and another type. Cannot have multiple types
};
}
*/
/**
* Attribute has changed
*/
attributeChangedCallback(l) {
if (l === "inline") {
const a = tt(this), u = this._state;
a !== u.inline && (u.inline = a, At(this._shadowRoot, a));
} else
this._queueCheck();
}
/**
* Get/set icon
*/
get icon() {
const l = this.getAttribute("icon");
if (l && l.slice(0, 1) === "{")
try {
return JSON.parse(l);
} catch {
}
return l;
}
set icon(l) {
typeof l == "object" && (l = JSON.stringify(l)), this.setAttribute("icon", l);
}
/**
* Get/set inline
*/
get inline() {
return tt(this);
}
set inline(l) {
l ? this.setAttribute("inline", "true") : this.removeAttribute("inline");
}
/**
* Restart animation
*/
restartAnimation() {
const l = this._state;
if (l.rendered) {
const a = this._shadowRoot;
if (l.renderedMode === "svg")
try {
a.lastChild.setCurrentTime(0);
return;
} catch {
}
Mt(a, l);
}
}
/**
* Get status
*/
get status() {
const l = this._state;
return l.rendered ? "rendered" : l.icon.data === null ? "failed" : "loading";
}
/**
* Queue attributes re-check
*/
_queueCheck() {
this._checkQueued || (this._checkQueued = !0, setTimeout(() => {
this._check();
}));
}
/**
* Check for changes
*/
_check() {
if (!this._checkQueued)
return;
this._checkQueued = !1;
const l = this._state, a = this.getAttribute("icon");
if (a !== l.icon.value) {
this._iconChanged(a);
return;
}
if (!l.rendered)
return;
const u = this.getAttribute("mode"), f = yt(this);
(l.attrMode !== u || Qe(l.customisations, f)) && this._renderIcon(l.icon, f, u);
}
/**
* Icon value has changed
*/
_iconChanged(l) {
const a = yn(l, (u, f, d) => {
const p = this._state;
if (p.rendered || this.getAttribute("icon") !== u)
return;
const g = {
value: u,
name: f,
data: d
};
g.data ? this._gotIconData(g) : p.icon = g;
});
a.data ? this._gotIconData(a) : this._state = Lt(a, this._state.inline, this._state);
}
/**
* Got new icon data, icon is ready to (re)render
*/
_gotIconData(l) {
this._checkQueued = !1, this._renderIcon(l, yt(this), this.getAttribute("mode"));
}
/**
* Re-render based on icon data
*/
_renderIcon(l, a, u) {
const f = bn(l.data.body, u), d = this._state.inline;
Mt(this._shadowRoot, this._state = {
rendered: !0,
icon: l,
inline: d,
customisations: a,
attrMode: u,
renderedMode: f
});
}
};
o.forEach((c) => {
c in s.prototype || Object.defineProperty(s.prototype, c, {
get: function() {
return this.getAttribute(c);
},
set: function(l) {
l !== null ? this.setAttribute(c, l) : this.removeAttribute(c);
}
});
});
const i = se();
for (const c in i)
s[c] = s.prototype[c] = i[c];
return e.define(t, s), s;
}
const qn = Dn() || se(), { enableCache: so, disableCache: io, iconExists: Bn, getIcon: Hn, listIcons: co, addIcon: lo, addCollection: ao, calculateSize: uo, buildIcon: fo, loadIcons: Qn, loadIcon: po, addAPIProvider: ho, _api: go } = qn;
function zn(t) {
const e = t || "click";
localStorage.setItem(de, e);
}
function Vn(t) {
localStorage.setItem(U, t);
}
function Un(t) {
localStorage.setItem(M, t);
}
function le() {
return localStorage.getItem(U);
}
function Gn() {
return localStorage.getItem(M);
}
const Wn = "grapesjs-icons", Jn = `[${Wn}::utils/listener]`;
function Kn() {
let t = null;
return (e) => {
const n = e.target;
if (!n)
return;
const r = n.value;
Vn(r), t || (t = document.querySelectorAll(`.${M}`));
for (const o of t) {
const s = o.dataset.collectionName, i = o.style.display;
if (s === r && i !== "none")
continue;
if (s !== r) {
o.style.display = "none";
continue;
}
const c = Gn() || "";
Dt(o, c);
}
};
}
function Xn(t) {
return (e) => {
const n = e.target;
if (!n)
return;
const r = le(), o = n.value;
Un(o);
const s = t.find(({ prefix: f }) => f === r);
if (!s)
return;
const i = s.categories[o], c = [];
for (const f of i) {
const d = `${r}:${f}`;
c.push(d);
}
Qn(c);
const l = document.querySelector(`.${ut}`);
if (!l)
return;
const a = l.querySelector(`.${_t}`), u = Me(s, o);
if (!a) {
l.appendChild(u);
return;
}
ft(`.${B}`), a.replaceWith(u);
};
}
function Yn() {
return (t) => {
const e = t.target;
if (!e)
return;
const n = e.value;
console.warn(
Jn,
'Search is not implemented yet in "grapesjs-icons". Do you want contribute?',
`Value changed: ${n}`
);
};
}
function Zn(t) {
const e = document.querySelector(`.${U}`), n = document.querySelectorAll(`.${M}`), r = document.querySelector(`.${Ft}`);
if (!e || !n || !r)
return;
const o = Kn(), s = Xn(t), i = Yn();
H("change", e, o), Re("change", n, s), H("input", r, i);
const c = le() || "";
Dt(e, c);
}
function to(t, e, n) {
const { Modal: r } = t, { title: o, searchText: s } = e, i = je(
n,
s
);
r.open({
title: o,
content: i,
attributes: {
class: pe
}
}).onceClose(() => {
ft();
}), Zn(n);
}
function eo(t, e) {
let n = 0;
const r = (s) => {
const i = s - n;
return n && i < e ? !1 : (n = s, !0);
}, o = (s = 0) => (r(s) && t(), window.requestAnimationFrame(
o
));
return o();
}
function no(t) {
if (!Bn(t))
return null;
const {
body: e,
width: n,
height: r
} = Hn(t);
return `
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 ${n} ${r}"
width="100%"
height="100%"
>
${e}
</svg>
`.replace(/^\s+/gm, "").replace(/[\r\n]+/g, " ");
}
function oo(t, e = 1e3) {
eo(() => {
const n = document.querySelectorAll(`.${B}`);
if (n.length !== 0)
for (const r of n) {
const o = r.dataset.iconPrefix, s = r.dataset.iconName, i = `${o}:${s}`, c = no(i);
c && (r.classList.replace(B, ge), r.innerHTML = c, H("click", r, () => {
const l = t.getSelected();
l && (l.set({
content: c
}), t.Modal.close());
}));
}
}, e);
}
const $t = {
insertionMode: "drop"
}, mo = (t, e) => {
const { collections: n, modal: r = {}, component: o = {}, block: s = {} } = e, i = me(r), { type: c, name: l } = ye(o), { category: a } = be(s);
let u = [];
function f() {
t.on("load", async () => {
u = await Se(n), oo(t);
}), t.on("modal:open", () => {
document.querySelector(`.${ut}`) && ft();
}), t.on("block:drag:stop", (d) => {
const {
"data-type": p
} = d.getAttributes();
p !== c || t.Modal.isOpen() || (t.select(d), t.Commands.run(X, $t));
});
}
t.DomComponents.addType(c, {
isComponent(d) {
var p;
return ((p = d.dataset) == null ? void 0 : p.type) === c;
},
model: {
defaults: {
name: l,
tagName: "span",
attributes: {
"data-type": c
},
style: {
display: "inline-block",
width: "48px",
height: "48px"
}
}
},
view: {
events: {
// @ts-ignore
dblclick: "openIconModal"
},
openIconModal(d) {
d.preventDefault();
const p = d.target, g = (p == null ? void 0 : p.getAttribute("data-type")) || "", m = p == null ? void 0 : p.closest(`[data-type="${c}"]`);
g !== c && !m || t.Modal.isOpen() || t.Commands.run(X, $t);
}
}
}), t.Commands.add(X, (d, p, g = {}) => {
zn(g.insertionMode), to(t, i, u);
}), t.BlockManager.add(c, {
category: a,
label: l,
content: {
type: c
}
}), f();
};
export {
mo as default
};