import { LisioIcon, LisioIconNames } from "../enums/lisio-icon-names"; import { setAttributeRecursive } from "../utils"; class LisioIconController { private static _current: LisioIconController; private _areIconsLoaded = false; protected _icons: Map = new Map< LisioIconNames, LisioIcon >([ [ LisioIconNames.MAIN, { attributes: { xmlns: "http://www.w3.org/2000/svg", aria_hidden: true, width: 0, height: 0, viewBox: "0 0 23 27", fill: "currentColor", stroke: "currentColor", style: { height: "0px", width: "auto", }, }, strokeChildren: true, fillChildren: true, content: ``, }, ], [ LisioIconNames.LOGO, { attributes: { xmlns: "http://www.w3.org/2000/svg", aria_hidden: true, width: 0, height: 0, viewBox: "0 0 25 30", fill: "none", stroke: "none", style: { height: "0px", width: "auto", }, }, fillChildren: false, strokeChildren: false, content: ``, }, ], [ LisioIconNames.TRANS, { attributes: { xmlns: "http://www.w3.org/2000/svg", aria_hidden: true, width: 0, height: 0, viewBox: "-1 -1 32 32", fill: "currentColor", stroke: "none", style: { height: "0px", width: "auto", }, }, strokeChildren: false, fillChildren: true, content: ``, }, ], [ LisioIconNames.SAFE_TRANS, { attributes: { xmlns: "http://www.w3.org/2000/svg", aria_hidden: true, width: 0, height: 0, viewBox: "-1 -1 32 32", fill: "none", stroke: "none", style: { height: "0px", width: "auto", }, }, strokeChildren: false, fillChildren: true, content: ``, }, ], [ LisioIconNames.ECO, { attributes: { xmlns: "http://www.w3.org/2000/svg", aria_hidden: true, width: 0, height: 0, viewBox: "0 0 20 22", fill: "currentColor", stroke: "none", style: { height: "0px", width: "auto", }, }, strokeChildren: false, fillChildren: true, content: ``, }, ], [ LisioIconNames.TREE, { attributes: { xmlns: "http://www.w3.org/2000/svg", aria_hidden: true, width: 0, height: 0, viewBox: "4 0 25 30", fill: "none", stroke: "none", style: { height: "0px", width: "auto", }, }, strokeChildren: false, fillChildren: true, content: ``, }, ], [ LisioIconNames.HELP, { attributes: { xmlns: "http://www.w3.org/2000/svg", aria_hidden: true, width: 0, height: 0, viewBox: "0 0 68 100", fill: "none", stroke: "none", style: { height: "0px", width: "auto", }, }, strokeChildren: false, fillChildren: true, content: ``, }, ], [ // popup LisioIconNames.RIGHT_CARRET, { attributes: { xmlns: "http://www.w3.org/2000/svg", aria_hidden: true, width: 0, height: 0, viewBox: "0 0 10 18", fill: "none", stroke: "none", style: { height: "0px", width: "auto", }, }, strokeChildren: true, fillChildren: false, content: ``, }, ], [ // popup LisioIconNames.CROSS, { attributes: { xmlns: "http://www.w3.org/2000/svg", aria_hidden: true, width: 0, height: 0, viewBox: "0 0 16 16", fill: "none", stroke: "none", style: { height: "0px", width: "0px", }, }, strokeChildren: true, fillChildren: false, content: ``, }, ], [ // popup LisioIconNames.LOGO_LISIO, { attributes: { xmlns: "http://www.w3.org/2000/svg", aria_hidden: true, width: 0, height: 0, viewBox: "0 0 102 33", fill: "none", stroke: "none", style: { height: "auto", width: "0px", }, }, strokeChildren: false, fillChildren: true, content: ``, }, ], [ // popup LisioIconNames.LOGO_LISIO_MONOCHROME, { attributes: { xmlns: "http://www.w3.org/2000/svg", aria_hidden: true, width: 0, height: 0, viewBox: "0 0 467 156", fill: "currentColor", stroke: "none", style: { height: "auto", width: "0px", }, }, strokeChildren: false, fillChildren: true, class: "logo-lisio", content: ``, }, ], [ // popup LisioIconNames.LOGO_LISIO_MONOCHROME_NEW, { attributes: { xmlns: "http://www.w3.org/2000/svg", aria_hidden: true, width: 0, height: 0, viewBox: "0 0 97 35", fill: "currentColor", stroke: "none", style: { height: "auto", width: "0px", }, }, strokeChildren: false, fillChildren: true, class: "logo-lisio", content: ``, }, ], [ // popup LisioIconNames.HIPPO_AA, { attributes: { xmlns: "http://www.w3.org/2000/svg", aria_hidden: true, width: 0, height: 0, viewBox: "0 0 101 78", fill: "none", stroke: "none", style: { height: "auto", width: "0px", }, }, strokeChildren: false, fillChildren: true, class: "logo-lisio", content: ` `, }, ], [ // popup LisioIconNames.DEACTIVATE, { attributes: { xmlns: "http://www.w3.org/2000/svg", aria_hidden: true, width: 0, height: 0, viewBox: "0 0 27 27", fill: "none", stroke: "currentColor", style: { height: "auto", width: "0px", }, }, strokeChildren: true, fillChildren: true, class: "logo-lisio", content: ``, }, ], [ LisioIconNames.FR, { attributes: { xmlns: "http://www.w3.org/2000/svg", aria_hidden: true, width: 0, height: 0, viewBox: "0 0 30 23", fill: "none", stroke: "none", style: { height: "auto", width: "0px", }, }, strokeChildren: false, fillChildren: false, content: ``, class: "trans-flag", }, ], [ LisioIconNames.EN, { attributes: { xmlns: "http://www.w3.org/2000/svg", aria_hidden: true, width: 0, height: 0, viewBox: "0 0 30 22.5", fill: "none", stroke: "none", style: { height: "auto", width: "0px", }, }, strokeChildren: false, fillChildren: false, content: ` `, class: "trans-flag", }, ], [ LisioIconNames.EN_GB, { attributes: { xmlns: "http://www.w3.org/2000/svg", aria_hidden: true, width: 0, height: 0, viewBox: "0 0 30 22.5", fill: "none", stroke: "none", style: { height: "auto", width: "0px", }, }, strokeChildren: false, fillChildren: false, content: ` `, class: "trans-flag", }, ], ]); private constructor() {} public static get current() { if (!this._current) { this._current = new LisioIconController(); } return this._current; } public async getIconHTML( iconName: LisioIconNames, dims: { width?: number; height?: number }, id: string, options?: { color?: string; className?: string; }, ): Promise { const hasIcon = this._icons.has(iconName); if (!hasIcon && !this._areIconsLoaded) { // eslint-disable-next-line @typescript-eslint/no-explicit-any const flags: any = (await import("../assets/icons/flag-icons.ts")).flags; for (const flag of flags) { this._icons.set(flag[0], flag[1]); } } const icon = this._icons.get(iconName); if (icon != undefined) { const svg: HTMLElement = document.createElement("svg"); if (dims.height != undefined) { icon.attributes.height = dims.height; icon.attributes.style.height = `${dims.height}px`; } else{ delete icon.attributes.height; delete icon.attributes.style.height; } if (dims.width != undefined) { icon.attributes.width = dims.width; icon.attributes.style.width = `${dims.width}px`; } else{ delete icon.attributes.width; delete icon.attributes.style.width; } setAttributeRecursive(svg, icon.attributes); svg.innerHTML = icon.content.replace(/\$id/g, id); if ( (icon.fillChildren || icon.strokeChildren) && options?.color != undefined ) { for (const child of svg.children) { if (icon.fillChildren) { child.setAttribute("fill", options.color); } if (icon.strokeChildren) { child.setAttribute("stroke", options.color); } } } if (options?.className != undefined) { svg.className = options.className; } return svg.outerHTML; } else { throw new Error("icon not existing : " + iconName); } } } export default LisioIconController;