@cyberalien/svg-utils 1.1.4 → 1.2.0

package/lib/svg-css/icon-set/minify/expand.js

@@ -0,0 +1,35 @@
+import { expandItem } from "../../../helpers/data/expand.js";
+import { iconSetMinifySimpleKeys, iconSetMinifyStatefulKeys } from "./keys.js";
+
+/**
+* Expand class content from icon set
+*/
+function expandSVGCSSIconSetClass(css, classContent) {
+	for (const prop of iconSetMinifySimpleKeys) if (css[prop]) expandItem(css[prop], classContent, prop);
+	for (const prop of iconSetMinifyStatefulKeys) {
+		const value = classContent[prop];
+		const list = css[prop];
+		if (list && value) for (const state in value) expandItem(list, value, state);
+	}
+}
+/**
+* Unminify icon set
+*/
+function expandSVGCSSIconSet(iconSet) {
+	const { viewBoxes, statesList, css } = iconSet;
+	if (viewBoxes || statesList) {
+		for (const iconName in iconSet.icons) {
+			const icon = iconSet.icons[iconName];
+			if (viewBoxes) expandItem(viewBoxes, icon, "viewBox");
+			if (statesList) expandItem(statesList, icon, "states");
+		}
+		delete iconSet.viewBoxes;
+		delete iconSet.statesList;
+	}
+	if (css && iconSet.classes) {
+		for (const className in iconSet.classes) expandSVGCSSIconSetClass(css, iconSet.classes[className]);
+		delete iconSet.css;
+	}
+}
+
+export { expandSVGCSSIconSet, expandSVGCSSIconSetClass };

package/lib/svg-css/icon-set/minify/keys.d.ts

@@ -0,0 +1,5 @@
+import { SVGCSSIconSetClassData } from "../types.js";
+declare const iconSetMinifySimpleKeys: (keyof Pick<SVGCSSIconSetClassData, 'r' | 'a' | 't'>)[];
+declare const iconSetMinifyStatefulKeys: (keyof Pick<SVGCSSIconSetClassData, 'sr' | 'st'>)[];
+declare const iconSetMinifyKeys: (keyof SVGCSSIconSetClassData)[];
+export { iconSetMinifyKeys, iconSetMinifySimpleKeys, iconSetMinifyStatefulKeys };

package/lib/svg-css/icon-set/minify/keys.js

@@ -0,0 +1,9 @@
+const iconSetMinifySimpleKeys = [
+	"r",
+	"a",
+	"t"
+];
+const iconSetMinifyStatefulKeys = ["sr", "st"];
+const iconSetMinifyKeys = [...iconSetMinifySimpleKeys, ...iconSetMinifyStatefulKeys];
+
+export { iconSetMinifyKeys, iconSetMinifySimpleKeys, iconSetMinifyStatefulKeys };

package/lib/svg-css/icon-set/minify/minify.d.ts

@@ -0,0 +1,19 @@
+import { IconViewBox } from "../../../svg/viewbox/types.js";
+import { IconStatesList } from "../../states/types.js";
+import { createCompactContext } from "../../../helpers/data/compact.js";
+import { SVGCSSIconSet } from "../types.js";
+import { iconSetMinifyKeys } from "./keys.js";
+type Keys = (typeof iconSetMinifyKeys)[number];
+interface Context extends Record<Keys, ReturnType<typeof createCompactContext<string>>> {
+  viewBox: ReturnType<typeof createCompactContext<IconViewBox | string>>;
+  states: ReturnType<typeof createCompactContext<IconStatesList>>;
+}
+/**
+ * Create context for minification
+ */
+declare function createIconSetMinifyContext(): Context;
+/**
+ * Minify icon set
+ */
+declare function minifySVGCSSIconSet(iconSet: SVGCSSIconSet): void;
+export { createIconSetMinifyContext, minifySVGCSSIconSet };

package/lib/svg-css/icon-set/minify/minify.js

@@ -0,0 +1,74 @@
+import { iconSetMinifyKeys, iconSetMinifySimpleKeys, iconSetMinifyStatefulKeys } from "./keys.js";
+import { stringifyIconViewBox } from "../../../svg/viewbox/value.js";
+import { compactItem, createCompactContext } from "../../../helpers/data/compact.js";
+
+/**
+* Create context for minification
+*/
+function createIconSetMinifyContext() {
+	const result = Object.create(null);
+	for (const key of iconSetMinifyKeys) result[key] = createCompactContext();
+	result.viewBox = createCompactContext();
+	result.states = createCompactContext();
+	return result;
+}
+/**
+* Get key for viewBox
+*/
+function viewBoxKey(viewBox) {
+	return typeof viewBox === "string" ? viewBox : stringifyIconViewBox(viewBox) + ("cx" in viewBox ? ` ${viewBox.cx}` : "");
+}
+/**
+* Minify icon set
+*/
+function minifySVGCSSIconSet(iconSet) {
+	const context = createIconSetMinifyContext();
+	const viewBoxes = context.viewBox;
+	const statesList = context.states;
+	if (iconSet.viewBoxes) viewBoxes.data = [...iconSet.viewBoxes];
+	viewBoxes.data.forEach((value, index) => {
+		const key = viewBoxKey(value);
+		viewBoxes.map.set(key, index);
+	});
+	if (iconSet.statesList) statesList.data = [...iconSet.statesList];
+	statesList.data.forEach((value, index) => {
+		const key = JSON.stringify(value);
+		statesList.map.set(key, index);
+	});
+	for (const prop of iconSetMinifyKeys) {
+		context[prop].data = [...iconSet.css?.[prop] ?? []];
+		const { data, map } = context[prop];
+		data.forEach((value, index) => {
+			map.set(value, index);
+		});
+	}
+	for (const iconName in iconSet.icons) {
+		const icon = iconSet.icons[iconName];
+		const viewBoxValue = icon.viewBox;
+		if (typeof viewBoxValue !== "number") compactItem(viewBoxes, viewBoxKey(viewBoxValue), icon, "viewBox", viewBoxValue);
+		const statesValue = icon.states;
+		if (typeof statesValue !== "number") compactItem(statesList, JSON.stringify(statesValue), icon, "states", statesValue);
+	}
+	if (iconSet.classes) for (const className in iconSet.classes) {
+		const classContent = iconSet.classes[className];
+		for (const prop of iconSetMinifySimpleKeys) if (typeof classContent[prop] === "string") compactItem(context[prop], classContent[prop], classContent, prop);
+		for (const prop of iconSetMinifyStatefulKeys) {
+			const value = classContent[prop];
+			if (value) {
+				for (const state in value) if (typeof value[state] === "string") compactItem(context[prop], value[state], value, state);
+			}
+		}
+	}
+	iconSet.viewBoxes = viewBoxes.data.length ? viewBoxes.data : void 0;
+	iconSet.statesList = statesList.data.length ? statesList.data : void 0;
+	delete iconSet.css;
+	for (const prop of iconSetMinifyKeys) {
+		const data = context[prop].data;
+		if (data.length) {
+			if (!iconSet.css) iconSet.css = Object.create(null);
+			iconSet.css[prop] = data;
+		}
+	}
+}
+
+export { createIconSetMinifyContext, minifySVGCSSIconSet };

package/lib/svg-css/icon-set/types.d.ts

@@ -0,0 +1,43 @@
+import { IconViewBox } from "../../svg/viewbox/types.js";
+import { IconStatesList } from "../states/types.js";
+/**
+ * Icon entry in an icon set
+ */
+interface SVGCSSIconSetIcon {
+  content: string;
+  viewBox: IconViewBox | string | number;
+  fallback?: string;
+  states?: IconStatesList | number;
+}
+/**
+ * Stateful class data
+ */
+interface SVGCSSIconSetClassData {
+  r?: string | number;
+  a?: string | number;
+  sr?: Record<string, string | number>;
+  t?: string | number;
+  st?: Record<string, string | number>;
+}
+/**
+ * Shared data for icons, which can be reused in multiple icons
+ */
+interface SVGCSSIconSetSharedData {
+  classes?: Record<string, SVGCSSIconSetClassData>;
+  keyframes?: Record<string, string>;
+  css?: Partial<Record<keyof SVGCSSIconSetClassData, string[]>>;
+  viewBoxes?: (IconViewBox | string)[];
+  statesList?: IconStatesList[];
+}
+/**
+ * Icon set in SVG+CSS format
+ *
+ * Does not include metadata
+ */
+interface SVGCSSIconSet extends SVGCSSIconSetSharedData {
+  fallbackPrefix?: string;
+  fallbackSuffix?: string;
+  icons: Record<string, SVGCSSIconSetIcon>;
+  aliases?: Record<string, string>;
+}
+export { SVGCSSIconSet, SVGCSSIconSetClassData, SVGCSSIconSetIcon, SVGCSSIconSetSharedData };

package/lib/svg-css/icon-set/types.js

@@ -0,0 +1 @@
+export {  };

package/lib/svg-css/states/cleanup-values.d.ts

@@ -0,0 +1,6 @@
+import { IconStatesList } from "./types.js";
+/**
+ * Clean up state values object
+ */
+declare function cleanupStateValues(states: IconStatesList, values: Record<string, boolean | string>, clone?: boolean): Record<string, string | boolean>;
+export { cleanupStateValues };

package/lib/svg-css/states/cleanup-values.js

@@ -0,0 +1,15 @@
+import { getStateValue } from "./value.js";
+
+/**
+* Clean up state values object
+*/
+function cleanupStateValues(states, values, clone = false) {
+	const result = clone ? { ...values } : values;
+	for (const state of states) {
+		const stateName = typeof state === "string" ? state : state[0];
+		result[stateName] = getStateValue(state, result[stateName]);
+	}
+	return result;
+}
+
+export { cleanupStateValues };

package/lib/svg-css/states/fallback/parse.d.ts

@@ -0,0 +1,7 @@
+import { IconStatesList } from "../types.js";
+import { IconFallbackTemplate } from "./types.js";
+/**
+ * Parse fallback template string into array of strings and states
+ */
+declare function parseIconFallbackTemplate(fallback: string, states: IconStatesList): IconFallbackTemplate | undefined;
+export { parseIconFallbackTemplate };

package/lib/svg-css/states/fallback/parse.js

@@ -0,0 +1,46 @@
+function unwrap(value) {
+	if (value.startsWith("'") && value.endsWith("'")) return value.slice(1, -1);
+	return value;
+}
+/**
+* Parse fallback template string into array of strings and states
+*/
+function parseIconFallbackTemplate(fallback, states) {
+	const chunks = [];
+	let startIndex = 0;
+	for (const match of fallback.matchAll(/{[^}]+}/g)) {
+		const matchText = match[0];
+		const matchIndex = match.index || 0;
+		if (matchIndex > startIndex) {
+			const prev = fallback.slice(startIndex, matchIndex);
+			if (prev) chunks.push(prev);
+		}
+		startIndex = matchIndex + matchText.length;
+		const textMatches = Array.from(matchText.matchAll(/[a-z0-9:'-]+/g));
+		if (!textMatches.length) return;
+		const separators = Array.from(matchText.matchAll(/[^a-z0-9:'-]/g));
+		if (separators.length !== textMatches.length + 1) return;
+		const stateName = textMatches[0][0].trim();
+		const state = states.find((s) => typeof s === "string" ? s === stateName : s[0] === stateName);
+		if (!state) return;
+		if (typeof state === "string") {
+			if (textMatches.length !== 3) return;
+			const trueValue = textMatches[1][0];
+			const falseValue = textMatches[2][0];
+			const firstSeparator = separators[1][0];
+			const secondSeparator = separators[2][0];
+			if (firstSeparator !== "?" || secondSeparator !== "|") return;
+			chunks.push({
+				state,
+				values: [unwrap(falseValue), unwrap(trueValue)]
+			});
+		} else {
+			if (textMatches.length > 1) return;
+			chunks.push({ state: stateName });
+		}
+	}
+	if (startIndex < fallback.length) chunks.push(fallback.slice(startIndex));
+	return chunks;
+}
+
+export { parseIconFallbackTemplate };

package/lib/svg-css/states/fallback/stringify.d.ts

@@ -0,0 +1,6 @@
+import { IconFallbackTemplate } from "./types.js";
+/**
+ * Generate fallback string from template and states
+ */
+declare function getIconFallback(template: IconFallbackTemplate, values: Record<string, boolean | string>, defaultValues?: Record<string, boolean | string>): string;
+export { getIconFallback };

package/lib/svg-css/states/fallback/stringify.js

@@ -0,0 +1,9 @@
+/**
+* Generate fallback string from template and states
+*/
+function getIconFallback(template, values, defaultValues) {
+	const stateValue = (state) => values[state] ?? defaultValues?.[state];
+	return template.map((chunk) => typeof chunk === "string" ? chunk : "values" in chunk ? chunk.values[+!!stateValue(chunk.state)] : stateValue(chunk.state)).join("");
+}
+
+export { getIconFallback };

package/lib/svg-css/states/fallback/test.d.ts

@@ -0,0 +1,9 @@
+import { IconStatesList } from "../types.js";
+import { IconFallbackTemplate } from "./types.js";
+/**
+ * Parse and test fallback template string
+ *
+ * This will make sure template is valid and does not contain invalid characters
+ */
+declare function parseAndTestIconFallbackTemplate(fallback: string, states: IconStatesList): IconFallbackTemplate | undefined;
+export { parseAndTestIconFallbackTemplate };

package/lib/svg-css/states/fallback/test.js

@@ -0,0 +1,21 @@
+import { parseIconFallbackTemplate } from "./parse.js";
+
+const match = /^[a-z0-9:-]*$/;
+/**
+* Parse and test fallback template string
+*
+* This will make sure template is valid and does not contain invalid characters
+*/
+function parseAndTestIconFallbackTemplate(fallback, states) {
+	const template = parseIconFallbackTemplate(fallback, states);
+	if (template) {
+		for (const chunk of template) if (typeof chunk === "string") {
+			if (!chunk.match(match)) return;
+		} else if ("values" in chunk) {
+			if (!chunk.values.every((v) => v.match(match))) return;
+		}
+	}
+	return template;
+}
+
+export { parseAndTestIconFallbackTemplate };

package/lib/svg-css/states/fallback/types.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Fallback replacement for boolean state
+ */
+interface IconFallbackBooleanState {
+  state: string;
+  values: [string, string];
+}
+/**
+ * Fallback for named state
+ *
+ * Value should match state values
+ */
+interface IconFallbackAdvancedState {
+  state: string;
+}
+/**
+ * Template for fallback: mix of strings and states
+ */
+type IconFallbackTemplate = (string | IconFallbackBooleanState | IconFallbackAdvancedState)[];
+export { IconFallbackAdvancedState, IconFallbackBooleanState, IconFallbackTemplate };

package/lib/svg-css/states/fallback/types.js

@@ -0,0 +1 @@
+export {  };

package/lib/svg-css/states/focus.d.ts

@@ -0,0 +1,10 @@
+import { IconStatesList, IconStatesState } from "./types.js";
+/**
+ * Check for focus state
+ */
+declare function isFocusState(state: IconStatesState | string): boolean;
+/**
+ * Filter out focus state from states list
+ */
+declare function filterFocusState(states: IconStatesList): IconStatesList;
+export { filterFocusState, isFocusState };

package/lib/svg-css/states/focus.js

@@ -0,0 +1,14 @@
+/**
+* Check for focus state
+*/
+function isFocusState(state) {
+	return state === "focus";
+}
+/**
+* Filter out focus state from states list
+*/
+function filterFocusState(states) {
+	return states.filter((state) => !isFocusState(state));
+}
+
+export { filterFocusState, isFocusState };

package/lib/svg-css/states/generator.d.ts

@@ -0,0 +1,19 @@
+import { IconStatesList, IconStatesState } from "./types.js";
+/**
+ * Generate code for object from states
+ *
+ * Does not include starting { and ending }
+ * Last entry does not have a comma at the end
+ */
+declare function generateObjectFromStates(states: IconStatesList): string;
+/**
+ * Generate code for TypeScript interface from state
+ */
+declare function getStateInterface(state: IconStatesState, optional?: boolean): string;
+/**
+ * Generate code for TypeScript interface from states
+ *
+ * Does not include starting { and ending }
+ */
+declare function generateInterfaceFromStates(states: IconStatesList, optional?: boolean): string;
+export { generateInterfaceFromStates, generateObjectFromStates, getStateInterface };

package/lib/svg-css/states/generator.js

@@ -0,0 +1,31 @@
+import { getAdvancedStateDefaultValue } from "./value.js";
+
+/**
+* Generate code for object from states
+*
+* Does not include starting { and ending }
+* Last entry does not have a comma at the end
+*/
+function generateObjectFromStates(states) {
+	const lines = [];
+	for (const state of states) if (typeof state === "string") lines.push(`'${state}': false`);
+	else lines.push(`'${state[0]}': '${getAdvancedStateDefaultValue(state)}'`);
+	return lines.join(",\n	");
+}
+/**
+* Generate code for TypeScript interface from state
+*/
+function getStateInterface(state, optional = true) {
+	const q = optional ? "?" : "";
+	return typeof state === "string" ? `'${state}'${q}: boolean;` : `'${state[0]}'${q}: ${state[1].map((value) => `'${value}'`).join(" | ")};`;
+}
+/**
+* Generate code for TypeScript interface from states
+*
+* Does not include starting { and ending }
+*/
+function generateInterfaceFromStates(states, optional = true) {
+	return states.map((state) => getStateInterface(state, optional)).join("\n	");
+}
+
+export { generateInterfaceFromStates, generateObjectFromStates, getStateInterface };

package/lib/svg-css/states/key.d.ts

@@ -0,0 +1,6 @@
+import { IconStatesList } from "./types.js";
+/**
+ * Get state values from an underscore separated list of state values
+ */
+declare function getStatesFromKey(key: string, states: IconStatesList): Record<string, string | boolean>;
+export { getStatesFromKey };

package/lib/svg-css/states/key.js

@@ -0,0 +1,22 @@
+/**
+* Get state values from an underscore separated list of state values
+*/
+function getStatesFromKey(key, states) {
+	const obj = Object.create(null);
+	const parts = key.split("_");
+	for (const state of states) {
+		if (typeof state === "string") {
+			if (parts.includes(state)) obj[state] = true;
+			continue;
+		}
+		const values = state[1];
+		const defaultValue = state[2] || values[0];
+		for (const value of values) if (value !== defaultValue && parts.includes(value)) {
+			obj[state[0]] = value;
+			break;
+		}
+	}
+	return obj;
+}
+
+export { getStatesFromKey };

package/lib/svg-css/states/object.d.ts

@@ -0,0 +1,6 @@
+import { IconStatesList } from "./types.js";
+/**
+ * Create reactive object from states
+ */
+declare function getObjectFromStates(states: IconStatesList): Record<string, boolean | string>;
+export { getObjectFromStates };

package/lib/svg-css/states/object.js

@@ -0,0 +1,13 @@
+import { getAdvancedStateDefaultValue } from "./value.js";
+
+/**
+* Create reactive object from states
+*/
+function getObjectFromStates(states) {
+	const obj = Object.create(null);
+	for (const state of states) if (typeof state === "string") obj[state] = false;
+	else obj[state[0]] = getAdvancedStateDefaultValue(state);
+	return obj;
+}
+
+export { getObjectFromStates };

package/lib/svg-css/states/selector/helpers/iterate.d.ts

@@ -0,0 +1,10 @@
+type Callback<T> = (item1: T, item2: T) => T | null;
+/**
+ * Merge arrays of items
+ */
+declare function mergeArrays<T>(list1: T[], list2: T[], merge: Callback<T>): T[][];
+/**
+ * Merge multiple arrays
+ */
+declare function mergeMultipleArrays<T>(lists: T[][], merge: Callback<T>): T[][];
+export { mergeArrays, mergeMultipleArrays };

package/lib/svg-css/states/selector/helpers/iterate.js

@@ -0,0 +1,71 @@
+function getMergeOrders(total) {
+	const orders = [{
+		order: "before",
+		index: 0
+	}];
+	for (let index = 0; index < total; index++) {
+		orders.push({
+			order: "merge",
+			index
+		});
+		orders.push({
+			order: "after",
+			index
+		});
+	}
+	return orders;
+}
+/**
+* Merge arrays of items
+*/
+function mergeArrays(list1, list2, merge) {
+	if (!list1.length) return [list2];
+	if (!list2.length) return [list1];
+	function appendRemaining(queue) {
+		return queue.filter((o) => o.order === "merge").map((o) => list1[o.index]);
+	}
+	function next(before, list2, queue) {
+		const prev = [...before];
+		const results = [];
+		const currentItem = list2[0];
+		const nextItems = list2.slice(1);
+		for (let i = 0; i < queue.length; i++) {
+			const orderItem = queue[i];
+			switch (orderItem.order) {
+				case "after": if (i > 0) prev.push(list1[orderItem.index]);
+				case "before": {
+					const newPrev = [...prev, currentItem];
+					if (!nextItems.length) results.push([...newPrev, ...appendRemaining(queue.slice(i + 1))]);
+					else results.push(...next(newPrev, nextItems, queue.slice(i)));
+					break;
+				}
+				case "merge": {
+					const merged = merge(list1[orderItem.index], currentItem);
+					if (merged) {
+						const newPrev = [...prev, merged];
+						if (!nextItems.length) results.push([...newPrev, ...appendRemaining(queue.slice(i + 1))]);
+						else results.push(...next(newPrev, nextItems, queue.slice(i + 1)));
+					}
+				}
+			}
+		}
+		return results;
+	}
+	return next([], list2, getMergeOrders(list1.length));
+}
+/**
+* Merge multiple arrays
+*/
+function mergeMultipleArrays(lists, merge) {
+	if (!lists.length) return [];
+	let prevLists = [lists[0]];
+	for (let i = 1; i < lists.length; i++) {
+		const mergeWith = lists[i];
+		const newLists = [];
+		for (const prevList of prevLists) newLists.push(...mergeArrays(prevList, mergeWith, merge));
+		prevLists = newLists;
+	}
+	return prevLists;
+}
+
+export { mergeArrays, mergeMultipleArrays };

package/lib/svg-css/states/selector/merge.d.ts

@@ -0,0 +1,6 @@
+import { StateSelectorData } from "./types.js";
+/**
+ * Merge sets of StateSelectorData into one
+ */
+declare function mergeSelectorsForStates(data: StateSelectorData[]): StateSelectorData | null;
+export { mergeSelectorsForStates };

package/lib/svg-css/states/selector/merge.js

@@ -0,0 +1,29 @@
+import { mergeSelectorParts } from "./part/merge.js";
+
+/**
+* Merge sets of StateSelectorData into one
+*/
+function mergeSelectorsForStates(data) {
+	const groupedResults = Object.create(null);
+	const next = (parents, key, index) => {
+		if (index >= data.length) {
+			const merged = mergeSelectorParts(parents);
+			if (!merged) return false;
+			if (!groupedResults[key]) groupedResults[key] = [];
+			groupedResults[key].push(...merged);
+			return true;
+		}
+		const group = data[index];
+		if (!group.length) return false;
+		for (let i = 0; i < group.length; i++) {
+			const items = group[i];
+			const nextKey = `${key}:${i}`;
+			for (const item of items) if (!next([...parents, item], nextKey, index + 1)) return false;
+		}
+		return true;
+	};
+	if (!next([], "", 0)) return null;
+	return Object.values(groupedResults);
+}
+
+export { mergeSelectorsForStates };

package/lib/svg-css/states/selector/parse.d.ts

@@ -0,0 +1,13 @@
+import { IconStatesList } from "../types.js";
+import { StatefulIconSelectorsConfig, StatefulIconSelectorsContext } from "./types.js";
+/**
+ * Create context object from config
+ */
+declare function createStatefulIconSelectorsContext(config: StatefulIconSelectorsConfig, states: IconStatesList): StatefulIconSelectorsContext;
+/**
+ * Get selectors to render state values
+ *
+ * Does not include shape class name
+ */
+declare function getSelectorsForStateValues(context: StatefulIconSelectorsContext, value: string | Record<string, string | boolean>): string[][] | null;
+export { createStatefulIconSelectorsContext, getSelectorsForStateValues };