mirror of
https://github.com/itflow-org/itflow
synced 2026-09-14 18:55:12 +00:00
65 lines
3.6 KiB
TypeScript
65 lines
3.6 KiB
TypeScript
import { ARIA } from "../constants.js";
|
|
|
|
type SvgNode = [
|
|
tag: string,
|
|
attrs?: Record<string, string | number>,
|
|
children?: SvgNode[],
|
|
];
|
|
|
|
const SVG_NS = "http://www.w3.org/2000/svg";
|
|
|
|
const buildSvg = ([tag, attrs, children]: SvgNode): SVGElement => {
|
|
const el = document.createElementNS(SVG_NS, tag);
|
|
if (attrs) {
|
|
for (const k in attrs) {
|
|
el.setAttribute(k, String(attrs[k]));
|
|
}
|
|
}
|
|
if (children) {
|
|
for (const c of children) {
|
|
el.appendChild(buildSvg(c));
|
|
}
|
|
}
|
|
return el;
|
|
};
|
|
|
|
/** Magnifying glass search icon */
|
|
export const buildSearchIcon = (): SVGElement => buildSvg(
|
|
["svg", { class: "iti__search-icon-svg", width: 14, height: 14, viewBox: "0 0 24 24", focusable: "false", [ARIA.HIDDEN]: "true" }, [
|
|
["circle", { cx: 11, cy: 11, r: 7 }],
|
|
["line", { x1: 21, y1: 21, x2: 16.65, y2: 16.65 }],
|
|
]],
|
|
);
|
|
|
|
/**
|
|
* Clear (circle with X) icon
|
|
* @param id Instance id used to create a unique mask id.
|
|
*/
|
|
export const buildClearIcon = (id: number): SVGElement => {
|
|
const maskId = `iti-${id}-clear-mask`;
|
|
return buildSvg(
|
|
["svg", { class: "iti__search-clear-svg", width: 12, height: 12, viewBox: "0 0 16 16", [ARIA.HIDDEN]: "true", focusable: "false" }, [
|
|
["mask", { id: maskId, maskUnits: "userSpaceOnUse" }, [
|
|
["rect", { width: 16, height: 16, fill: "white" }],
|
|
["path", { d: "M5.2 5.2 L10.8 10.8 M10.8 5.2 L5.2 10.8", stroke: "black", "stroke-linecap": "round", class: "iti__search-clear-x" }],
|
|
]],
|
|
["circle", { cx: 8, cy: 8, r: 8, class: "iti__search-clear-bg", mask: `url(#${maskId})` }],
|
|
]],
|
|
);
|
|
};
|
|
|
|
/** Check icon shown next to the selected country in the country list. */
|
|
export const buildCheckIcon = (): SVGElement => buildSvg(
|
|
["svg", { class: "iti__country-check-svg", width: 14, height: 14, viewBox: "0 0 16 16", fill: "currentColor", focusable: "false", [ARIA.HIDDEN]: "true" }, [
|
|
["path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" }],
|
|
]],
|
|
);
|
|
|
|
/** Globe icon used when no country is selected */
|
|
export const buildGlobeIcon = (): SVGElement => buildSvg(
|
|
["svg", { width: 256, height: 256, viewBox: "0 0 512 512", class: "iti__globe-svg" }, [
|
|
["path", { d: "M508 213a240 240 0 0 0-449-87l-2 5-2 5c-8 14-13 30-17 46a65 65 0 0 1 56 4c16-10 35-19 56-27l9-3c-6 23-10 48-10 74h-16l4 6c3 4 5 8 6 13h6c0 22 3 44 8 65l2 10-25-10-4 5 12 18 9 3 6 2 8 3 9 26 1 2 16-7h1l-5-13-1-2c24 6 49 9 75 10v26l11 10 7 7v-30l1-13c22 0 44-3 65-8l10-2-21 48-1 1a317 317 0 0 1-14 23l-21 5h-2c6 16 7 33 1 50a240 240 0 0 0 211-265m-401-56-11 6c19-44 54-79 98-98-11 20-21 44-29 69-21 6-40 15-58 23m154 182v4c-29-1-57-6-81-13-7-25-12-52-13-81h94zm0-109h-94c1-29 6-56 13-81 24-7 52-12 81-13zm0-112c-22 1-44 4-65 8l-10 2 12-30 9-17 1-2a332 332 0 0 1 13-23c13-4 26-6 40-7zm187 69 6 4c4 12 6 25 6 38v1h-68c-1-26-4-51-10-74l48 20 1 1 14 8zm-14-44 10 20c-20-11-43-21-68-29-8-25-18-49-29-69 37 16 67 44 87 78M279 49h1c13 1 27 3 39 7l14 23 1 2a343 343 0 0 1 12 26l2 5 6 16c-23-6-48-9-74-10h-1zm0 87h1c29 1 56 6 81 13 7 24 12 51 12 80v1h-94zm2 207h-2v-94h95c-1 29-6 56-13 81-24 7-51 12-80 13m86 60-20 10c11-20 21-43 29-68 25-8 48-18 68-29-16 37-43 67-77 87m87-115-7 5-16 9-2 1a337 337 0 0 1-47 21c6-24 9-49 10-75h68c0 13-2 27-6 39" }],
|
|
["path", { d: "m261 428-2-2-22-21a40 40 0 0 0-32-11h-1a37 37 0 0 0-18 8l-1 1-4 2-2 2-5 4c-9-3-36-31-47-44s-32-45-34-55l3-2a151 151 0 0 0 11-9v-1a39 39 0 0 0 5-48l-3-3-11-19-3-4-5-7h-1l-3-3-4-3-5-2a35 35 0 0 0-16-3h-5c-4 1-14 5-24 11l-4 2-4 3-4 2c-9 8-17 17-18 27a380 380 0 0 0 212 259h3c12 0 25-10 36-21l10-12 6-11a39 39 0 0 0-8-40" }],
|
|
]],
|
|
);
|