@nice2dev/icons 1.3.8 → 1.3.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +46 -0
- package/dist/cjs/NiceIconPicker.js +289 -92
- package/dist/cjs/NiceIconStacker.js +137 -120
- package/dist/cjs/client.js +6 -0
- package/dist/cjs/iconHtml.js +122 -0
- package/dist/cjs/iconStack.js +71 -0
- package/dist/cjs/index.js +6 -0
- package/dist/cjs/nicetodev-icons.css +1 -1
- package/dist/esm/NiceIconPicker.js +292 -95
- package/dist/esm/NiceIconStacker.js +140 -123
- package/dist/esm/client.js +2 -1
- package/dist/esm/iconHtml.js +117 -0
- package/dist/esm/iconStack.js +69 -1
- package/dist/esm/index.js +2 -1
- package/dist/esm/nicetodev-icons.css +1 -1
- package/dist/types/NiceIconPicker.d.ts +66 -20
- package/dist/types/NiceIconStacker.d.ts +30 -9
- package/dist/types/client.d.ts +4 -2
- package/dist/types/iconHtml.d.ts +44 -0
- package/dist/types/iconStack.d.ts +18 -0
- package/dist/types/index.d.ts +4 -2
- package/package.json +2 -2
|
@@ -8,27 +8,51 @@ var navigation = require('./icons/navigation.js');
|
|
|
8
8
|
var iconStack = require('./iconStack.js');
|
|
9
9
|
var stacking = require('./stacking.js');
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
'
|
|
14
|
-
'top',
|
|
15
|
-
'
|
|
16
|
-
'left',
|
|
17
|
-
'
|
|
18
|
-
'top-
|
|
19
|
-
'
|
|
20
|
-
'
|
|
21
|
-
'
|
|
22
|
-
'half-
|
|
23
|
-
'
|
|
24
|
-
'half-left',
|
|
25
|
-
'half-
|
|
26
|
-
'half-
|
|
27
|
-
'
|
|
28
|
-
'
|
|
29
|
-
'
|
|
11
|
+
/** Where a layer can sit, laid out on the 5 × 5 pad as it sits in its parent. */
|
|
12
|
+
const PAD = [
|
|
13
|
+
{ align: 'top-left', row: 1, col: 1 },
|
|
14
|
+
{ align: 'top', row: 1, col: 3 },
|
|
15
|
+
{ align: 'top-right', row: 1, col: 5 },
|
|
16
|
+
{ align: 'half-top-left', row: 2, col: 2 },
|
|
17
|
+
{ align: 'half-top', row: 2, col: 3 },
|
|
18
|
+
{ align: 'half-top-right', row: 2, col: 4 },
|
|
19
|
+
{ align: 'left', row: 3, col: 1 },
|
|
20
|
+
{ align: 'half-left', row: 3, col: 2 },
|
|
21
|
+
{ align: 'center', row: 3, col: 3 },
|
|
22
|
+
{ align: 'half-right', row: 3, col: 4 },
|
|
23
|
+
{ align: 'right', row: 3, col: 5 },
|
|
24
|
+
{ align: 'half-bottom-left', row: 4, col: 2 },
|
|
25
|
+
{ align: 'half-bottom', row: 4, col: 3 },
|
|
26
|
+
{ align: 'half-bottom-right', row: 4, col: 4 },
|
|
27
|
+
{ align: 'bottom-left', row: 5, col: 1 },
|
|
28
|
+
{ align: 'bottom', row: 5, col: 3 },
|
|
29
|
+
{ align: 'bottom-right', row: 5, col: 5 },
|
|
30
30
|
];
|
|
31
|
-
|
|
31
|
+
/** The positions' names, in words. */
|
|
32
|
+
function alignNames(t) {
|
|
33
|
+
return {
|
|
34
|
+
perfect: t('iconStacker.align.perfect', 'Auto'),
|
|
35
|
+
center: t('iconStacker.align.center', 'Centre'),
|
|
36
|
+
top: t('iconStacker.align.top', 'Top edge'),
|
|
37
|
+
bottom: t('iconStacker.align.bottom', 'Bottom edge'),
|
|
38
|
+
left: t('iconStacker.align.left', 'Left edge'),
|
|
39
|
+
right: t('iconStacker.align.right', 'Right edge'),
|
|
40
|
+
'top-left': t('iconStacker.align.top-left', 'Top-left corner'),
|
|
41
|
+
'top-right': t('iconStacker.align.top-right', 'Top-right corner'),
|
|
42
|
+
'bottom-left': t('iconStacker.align.bottom-left', 'Bottom-left corner'),
|
|
43
|
+
'bottom-right': t('iconStacker.align.bottom-right', 'Bottom-right corner'),
|
|
44
|
+
'half-top': t('iconStacker.align.half-top', 'Halfway to the top'),
|
|
45
|
+
'half-bottom': t('iconStacker.align.half-bottom', 'Halfway to the bottom'),
|
|
46
|
+
'half-left': t('iconStacker.align.half-left', 'Halfway to the left'),
|
|
47
|
+
'half-right': t('iconStacker.align.half-right', 'Halfway to the right'),
|
|
48
|
+
'half-top-left': t('iconStacker.align.half-top-left', 'Halfway to the top-left corner'),
|
|
49
|
+
'half-top-right': t('iconStacker.align.half-top-right', 'Halfway to the top-right corner'),
|
|
50
|
+
'half-bottom-left': t('iconStacker.align.half-bottom-left', 'Halfway to the bottom-left corner'),
|
|
51
|
+
'half-bottom-right': t('iconStacker.align.half-bottom-right', 'Halfway to the bottom-right corner'),
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
const STAGE_SIZE = 64;
|
|
55
|
+
const STAGE_SMALL = [32, 24, 16];
|
|
32
56
|
const NO_LAYERS = [];
|
|
33
57
|
/** What a colour field shows while the colour is unset (follows the parent). */
|
|
34
58
|
const AUTO_SWATCH = '#808080';
|
|
@@ -46,57 +70,21 @@ function walk(layers) {
|
|
|
46
70
|
}
|
|
47
71
|
return out;
|
|
48
72
|
}
|
|
49
|
-
/** Removes a layer; what sat in it moves up into its parent (a removed base hands over to its first child). */
|
|
50
|
-
function removeLayer(layers, id) {
|
|
51
|
-
const base = layers[0];
|
|
52
|
-
if (!base) {
|
|
53
|
-
return [];
|
|
54
|
-
}
|
|
55
|
-
if (id !== base.id) {
|
|
56
|
-
const gone = layers.find((l) => l.id === id);
|
|
57
|
-
const up = gone ? iconStack.stackParentId(layers, gone) : undefined;
|
|
58
|
-
return layers
|
|
59
|
-
.filter((l) => l.id !== id)
|
|
60
|
-
.map((l) => (l.parent === id ? { ...l, parent: up === base.id ? undefined : up } : l));
|
|
61
|
-
}
|
|
62
|
-
const [heir, ...siblings] = iconStack.stackChildrenOf(layers, base.id);
|
|
63
|
-
if (!heir) {
|
|
64
|
-
return [];
|
|
65
|
-
}
|
|
66
|
-
const newBase = {
|
|
67
|
-
...heir,
|
|
68
|
-
parent: undefined,
|
|
69
|
-
align: undefined,
|
|
70
|
-
size: undefined,
|
|
71
|
-
rotation: undefined,
|
|
72
|
-
offsetX: undefined,
|
|
73
|
-
offsetY: undefined,
|
|
74
|
-
};
|
|
75
|
-
return [
|
|
76
|
-
newBase,
|
|
77
|
-
...layers
|
|
78
|
-
.filter((l) => l.id !== base.id && l.id !== heir.id)
|
|
79
|
-
.map((l) => siblings.includes(l)
|
|
80
|
-
? { ...l, parent: heir.id }
|
|
81
|
-
: l.parent === heir.id
|
|
82
|
-
? { ...l, parent: undefined }
|
|
83
|
-
: l),
|
|
84
|
-
];
|
|
85
|
-
}
|
|
86
73
|
/** A colour of the layer's own, or "auto" — following its parent — until one is picked. */
|
|
87
|
-
function
|
|
88
|
-
return (jsxRuntime.jsxs("span", { className: "nice-icon-
|
|
74
|
+
function Swatch({ label, value, onChange, autoLabel, resetLabel }) {
|
|
75
|
+
return (jsxRuntime.jsxs("span", { className: "nice-icon-stacker__swatch", children: [jsxRuntime.jsxs("label", { className: `nice-icon-stacker__swatch-pick${value ? '' : ' nice-icon-stacker__swatch-pick--auto'}`, title: `${label}: ${value !== null && value !== void 0 ? value : autoLabel}`, children: [jsxRuntime.jsx("span", { className: "nice-icon-stacker__swatch-dot", style: value ? { background: value } : undefined }), jsxRuntime.jsx("span", { children: label }), jsxRuntime.jsx("input", { type: "color", value: value !== null && value !== void 0 ? value : AUTO_SWATCH, onChange: (e) => onChange(e.target.value) })] }), value && (jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__reset", onClick: () => onChange(undefined), "aria-label": `${resetLabel}: ${label}`, title: resetLabel, children: jsxRuntime.jsx(navigation.NtdClose, { size: 10 }) }))] }));
|
|
89
76
|
}
|
|
90
77
|
/**
|
|
91
|
-
* NiceIconStacker (1.3.5) — builds an icon stack: the base icon and the icons stacked in it,
|
|
92
|
-
*
|
|
93
|
-
*
|
|
94
|
-
*
|
|
95
|
-
*
|
|
96
|
-
*
|
|
78
|
+
* NiceIconStacker (1.3.5) — builds an icon stack: the base icon and the icons stacked in it, nested
|
|
79
|
+
* any number of levels deep (1.3.6) with text innermost. Since 1.3.9 it is laid out to fit a picker's
|
|
80
|
+
* panel: the stack drawn large and small, the layers as a list, and under it the selected layer —
|
|
81
|
+
* where it sits (picked on a pad shaped like its parent), its size and text, with the turn, nudge,
|
|
82
|
+
* colours and binding folded under "More". A new icon goes into the selected layer and is selected,
|
|
83
|
+
* so adding again goes one level deeper; select an outer layer to add side by side. The JSX that
|
|
84
|
+
* draws the stack is folded at the end. `NiceIconStack` draws a stack built here from data.
|
|
97
85
|
*/
|
|
98
|
-
const NiceIconStacker = React.forwardRef(function NiceIconStacker({ icons, layers: layersProp, defaultLayers, onLayersChange, current, previewProps, className }, ref) {
|
|
99
|
-
var _a, _b, _c, _d;
|
|
86
|
+
const NiceIconStacker = React.forwardRef(function NiceIconStacker({ icons, layers: layersProp, defaultLayers, onLayersChange, current, onAddClick, previewProps, iconLabel = iconStack.iconDisplayName, showCode = true, keepBase = false, className, }, ref) {
|
|
87
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
100
88
|
const { t } = uiCore.useNiceTranslation();
|
|
101
89
|
const [layers, setLayers] = uiCore.useControllableState({
|
|
102
90
|
value: layersProp,
|
|
@@ -105,43 +93,47 @@ const NiceIconStacker = React.forwardRef(function NiceIconStacker({ icons, layer
|
|
|
105
93
|
onChange: onLayersChange,
|
|
106
94
|
componentName: 'NiceIconStacker',
|
|
107
95
|
});
|
|
108
|
-
const nextId = React.useRef(0);
|
|
109
|
-
const targetGroup = React.useId();
|
|
110
96
|
const [copied, setCopied] = React.useState(false);
|
|
111
|
-
// The layer the next icon goes into — the newest by default, so adding nests deeper.
|
|
97
|
+
// The layer being edited, which the next icon goes into — the newest by default, so adding nests deeper.
|
|
112
98
|
const [selected, setSelected] = React.useState(undefined);
|
|
113
99
|
const base = layers[0];
|
|
114
100
|
const target = (_b = (_a = layers.find((l) => l.id === selected)) !== null && _a !== void 0 ? _a : layers[layers.length - 1]) !== null && _b !== void 0 ? _b : undefined;
|
|
101
|
+
const listRef = React.useRef(null);
|
|
102
|
+
uiCore.useRovingFocus(listRef, {
|
|
103
|
+
orientation: 'vertical',
|
|
104
|
+
itemSelector: '.nice-icon-stacker__layer-select',
|
|
105
|
+
});
|
|
106
|
+
const padRef = React.useRef(null);
|
|
107
|
+
uiCore.useRovingFocus(padRef, {
|
|
108
|
+
orientation: 'grid',
|
|
109
|
+
itemSelector: '[role="radio"]',
|
|
110
|
+
activateOnMove: true,
|
|
111
|
+
});
|
|
115
112
|
const resolve = React.useCallback((name) => (typeof icons === 'function' ? icons(name) : icons[name]), [icons]);
|
|
116
113
|
const tree = React.useMemo(() => walk(layers), [layers]);
|
|
117
|
-
const code = React.useMemo(() => iconStack.niceIconStackCode(layers), [layers]);
|
|
114
|
+
const code = React.useMemo(() => (showCode ? iconStack.niceIconStackCode(layers) : ''), [layers, showCode]);
|
|
118
115
|
const update = (id, patch) => setLayers((prev) => prev.map((l) => (l.id === id ? { ...l, ...patch } : l)));
|
|
119
|
-
const add = () => {
|
|
120
|
-
if (!
|
|
116
|
+
const add = (icon = current) => {
|
|
117
|
+
if (!icon) {
|
|
121
118
|
return;
|
|
122
119
|
}
|
|
123
|
-
|
|
124
|
-
const id = `${current.icon}-${Date.now().toString(36)}-${nextId.current}`;
|
|
120
|
+
let added = '';
|
|
125
121
|
setLayers((prev) => {
|
|
126
|
-
|
|
127
|
-
const
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
variant: current.variant,
|
|
131
|
-
...(into && into !== prev[0] ? { parent: into.id } : {}),
|
|
132
|
-
};
|
|
133
|
-
return [...prev, layer];
|
|
122
|
+
var _a;
|
|
123
|
+
const next = iconStack.addStackLayer(prev, icon, (_a = prev.find((l) => l.id === (target === null || target === void 0 ? void 0 : target.id))) === null || _a === void 0 ? void 0 : _a.id);
|
|
124
|
+
added = next.id;
|
|
125
|
+
return next.layers;
|
|
134
126
|
});
|
|
135
|
-
setSelected(
|
|
127
|
+
setSelected(added);
|
|
136
128
|
};
|
|
137
129
|
const remove = (id) => {
|
|
138
|
-
setLayers((prev) =>
|
|
130
|
+
setLayers((prev) => iconStack.removeStackLayer(prev, id));
|
|
139
131
|
if (selected === id) {
|
|
140
132
|
setSelected(undefined);
|
|
141
133
|
}
|
|
142
134
|
};
|
|
143
135
|
const clear = () => {
|
|
144
|
-
setLayers(NO_LAYERS);
|
|
136
|
+
setLayers((prev) => (keepBase && prev[0] ? [prev[0]] : NO_LAYERS));
|
|
145
137
|
setSelected(undefined);
|
|
146
138
|
};
|
|
147
139
|
React.useImperativeHandle(ref, () => ({ add, clear }));
|
|
@@ -154,41 +146,66 @@ const NiceIconStacker = React.forwardRef(function NiceIconStacker({ icons, layer
|
|
|
154
146
|
};
|
|
155
147
|
const autoLabel = t('iconStacker.auto', 'auto');
|
|
156
148
|
const resetLabel = t('iconStacker.reset', 'Back to auto');
|
|
157
|
-
const
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
149
|
+
const names = alignNames(t);
|
|
150
|
+
const alignName = (a) => names[a];
|
|
151
|
+
const currentName = current ? iconLabel(current.icon) : '';
|
|
152
|
+
const targetName = target ? iconLabel(target.icon) : '';
|
|
153
|
+
const asks = !!onAddClick || !current;
|
|
154
|
+
const addText = asks
|
|
155
|
+
? t('iconStacker.addIcon', 'Add an icon')
|
|
156
|
+
: t('iconStacker.addShort', 'Add {icon}').replace('{icon}', currentName);
|
|
157
|
+
const addLabel = asks
|
|
158
|
+
? base && target
|
|
159
|
+
? t('iconStacker.addIconInto', 'Add an icon into {target}').replace('{target}', targetName)
|
|
160
|
+
: addText
|
|
161
|
+
: base && target
|
|
162
|
+
? t('iconStacker.addInto', 'Add {icon} into {target}')
|
|
163
|
+
.replace('{icon}', currentName)
|
|
164
|
+
.replace('{target}', targetName)
|
|
165
|
+
: t('iconStacker.add', 'Add {icon} to the stack').replace('{icon}', currentName);
|
|
166
|
+
const clearLabel = keepBase
|
|
167
|
+
? t('iconStacker.clearOverlays', 'Take off the stacked icons')
|
|
168
|
+
: t('iconStacker.clear', 'Clear the stack');
|
|
169
|
+
// the selected layer, as the inspector edits it
|
|
170
|
+
const edited = target;
|
|
171
|
+
const editedIcon = edited ? resolve(edited.icon) : undefined;
|
|
172
|
+
const editedIsBase = !!edited && edited === base;
|
|
173
|
+
const align = (_c = edited === null || edited === void 0 ? void 0 : edited.align) !== null && _c !== void 0 ? _c : 'perfect';
|
|
174
|
+
// the spot the parent keeps for stacked icons (1.3.8): its size and turn are the layer's
|
|
175
|
+
// defaults while it sits there
|
|
176
|
+
const parentId = edited ? iconStack.stackParentId(layers, edited) : undefined;
|
|
177
|
+
const parentLayer = parentId ? layers.find((p) => p.id === parentId) : undefined;
|
|
178
|
+
const spot = (parentLayer && stacking.perfectStackOf(resolve(parentLayer.icon))) || stacking.BOX_PERFECT_STACK;
|
|
179
|
+
const atSpot = align === 'perfect';
|
|
180
|
+
const share = (_d = edited === null || edited === void 0 ? void 0 : edited.size) !== null && _d !== void 0 ? _d : (atSpot ? spot.size : stacking.defaultStackSize(align));
|
|
181
|
+
const turnDefault = atSpot ? spot.rotation : 0;
|
|
182
|
+
const turn = (_e = edited === null || edited === void 0 ? void 0 : edited.rotation) !== null && _e !== void 0 ? _e : turnDefault;
|
|
183
|
+
const innermost = !!edited && iconStack.stackChildrenOf(layers, edited.id).length === 0;
|
|
184
|
+
const hasText = !!edited && (innermost || !!edited.text || !!edited.textBinding);
|
|
185
|
+
const textSize = (_f = edited === null || edited === void 0 ? void 0 : edited.textSize) !== null && _f !== void 0 ? _f : stacking.defaultTextSize(((_g = edited === null || edited === void 0 ? void 0 : edited.text) !== null && _g !== void 0 ? _g : '').length || 1, (_h = stacking.perfectStackOf(editedIcon)) === null || _h === void 0 ? void 0 : _h.size);
|
|
186
|
+
const bindingInvalid = !!(edited === null || edited === void 0 ? void 0 : edited.textBinding) && !iconStack.isValidTextBinding(edited.textBinding);
|
|
187
|
+
return (jsxRuntime.jsxs("div", { className: ['nice-icon-stacker', className].filter(Boolean).join(' '), children: [jsxRuntime.jsxs("div", { className: "nice-icon-stacker__bar", children: [jsxRuntime.jsx("span", { className: "nice-icon-stacker__title", children: t('iconStacker.layers', 'Layers') }), jsxRuntime.jsxs("button", { type: "button", className: "nice-icon-stacker__add", onClick: () => (onAddClick ? onAddClick(target) : add()), disabled: !onAddClick && !current, "aria-label": addLabel, title: addLabel, children: [jsxRuntime.jsx(actions.NtdPlus, { size: 14 }), " ", addText] }), jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__clear", onClick: clear, disabled: keepBase ? layers.length < 2 : layers.length === 0, "aria-label": clearLabel, title: clearLabel, children: jsxRuntime.jsx(actions.NtdTrash, { size: 14 }) })] }), !base || !edited ? (jsxRuntime.jsx("p", { className: "nice-icon-stacker__empty", children: t('iconStacker.empty', 'The stack is empty. Add an icon to start one.') })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "nice-icon-stacker__top", children: [jsxRuntime.jsxs("div", { className: "nice-icon-stacker__preview", "aria-label": t('iconStacker.preview', 'Preview'), role: "group", children: [jsxRuntime.jsx("span", { className: "nice-icon-stacker__preview-main", title: `${STAGE_SIZE}px`, children: iconStack.renderIconStack(layers, icons, {
|
|
188
|
+
baseProps: { ...previewProps, size: STAGE_SIZE, title: iconLabel(base.icon) },
|
|
189
|
+
}) }), jsxRuntime.jsx("span", { className: "nice-icon-stacker__preview-small", children: STAGE_SMALL.map((s) => (jsxRuntime.jsx("span", { title: `${s}px`, children: iconStack.renderIconStack(layers, icons, { baseProps: { ...previewProps, size: s } }) }, s))) })] }), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__layers-wrap", children: [jsxRuntime.jsx("ol", { ref: listRef, className: "nice-icon-stacker__layers", "aria-label": t('iconStacker.layers', 'Layers'), children: tree.map(({ layer: l, depth }) => {
|
|
190
|
+
const Icon = resolve(l.icon);
|
|
191
|
+
const isBase = l === base;
|
|
192
|
+
const isSelected = l === edited;
|
|
193
|
+
const name = iconLabel(l.icon);
|
|
194
|
+
const removable = !(isBase && keepBase);
|
|
195
|
+
const removeLabel = t('iconStacker.remove', 'Remove {icon}').replace('{icon}', name);
|
|
196
|
+
return (jsxRuntime.jsxs("li", { className: `nice-icon-stacker__layer${isSelected ? ' nice-icon-stacker__layer--selected' : ''}`, style: { ['--nice-icon-stacker-depth']: String(depth) }, children: [jsxRuntime.jsxs("button", { type: "button", className: "nice-icon-stacker__layer-select", "aria-pressed": isSelected, onClick: () => setSelected(l.id), onKeyDown: (e) => {
|
|
197
|
+
if (removable && (e.key === 'Delete' || e.key === 'Backspace')) {
|
|
198
|
+
e.preventDefault();
|
|
199
|
+
remove(l.id);
|
|
200
|
+
}
|
|
201
|
+
}, children: [jsxRuntime.jsx("span", { className: "nice-icon-stacker__layer-icon", children: Icon ? jsxRuntime.jsx(Icon, { size: 18, variant: l.variant }) : null }), jsxRuntime.jsx("span", { className: "nice-icon-stacker__layer-name", children: name }), l.text && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [' ', jsxRuntime.jsx("span", { className: "nice-icon-stacker__layer-text", children: l.text })] })), isBase && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [' ', jsxRuntime.jsx("span", { className: "nice-icon-stacker__badge", children: t('iconStacker.base', 'Base') })] }))] }), removable && (jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__remove", onClick: () => remove(l.id), "aria-label": removeLabel, title: removeLabel, children: jsxRuntime.jsx(navigation.NtdClose, { size: 10 }) }))] }, l.id));
|
|
202
|
+
}) }), jsxRuntime.jsx("small", { className: "nice-icon-stacker__hint", children: t('iconStacker.hint', 'A new icon goes into the selected layer.') })] })] }), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__inspector", role: "group", "aria-label": iconLabel(edited.icon), children: [jsxRuntime.jsxs("div", { className: "nice-icon-stacker__inspector-head", children: [editedIcon &&
|
|
203
|
+
React.createElement(editedIcon, { size: 16, variant: edited.variant }), jsxRuntime.jsx("span", { children: iconLabel(edited.icon) }), parentLayer && (jsxRuntime.jsx("small", { children: t('iconStacker.inside', 'in {icon}').replace('{icon}', iconLabel(parentLayer.icon)) }))] }), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__inspector-body", children: [!editedIsBase && (jsxRuntime.jsxs("div", { ref: padRef, className: "nice-icon-stacker__pad", role: "radiogroup", "aria-label": t('iconStacker.align', 'Position'), children: [jsxRuntime.jsx("button", { type: "button", role: "radio", "aria-checked": align === 'perfect', className: "nice-icon-stacker__pad-auto", title: t('iconStacker.align.perfectHint', 'The spot the icon keeps for what is stacked in it'), onClick: () => update(edited.id, { align: undefined }), children: alignName('perfect') }), jsxRuntime.jsx("span", { className: "nice-icon-stacker__pad-box", children: PAD.map(({ align: a, row, col }) => (jsxRuntime.jsx("button", { type: "button", role: "radio", "aria-checked": align === a, "aria-label": alignName(a), title: alignName(a), className: "nice-icon-stacker__pad-dot", style: { gridRow: row, gridColumn: col }, onClick: () => update(edited.id, { align: a }) }, a))) })] })), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__fields", children: [!editedIsBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.size', 'Size') }), jsxRuntime.jsx("input", { type: "range", min: 0.2, max: 1, step: 0.05, value: share, onChange: (e) => update(edited.id, { size: Number(e.target.value) }) }), jsxRuntime.jsxs("output", { children: [Math.round(share * 100), "%"] })] })), hasText && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.text', 'Text') }), jsxRuntime.jsx("input", { type: "text", value: (_j = edited.text) !== null && _j !== void 0 ? _j : '', maxLength: 4, onChange: (e) => update(edited.id, { text: e.target.value || undefined }) })] }))] })] }), jsxRuntime.jsxs("details", { className: "nice-icon-stacker__more", children: [jsxRuntime.jsx("summary", { children: t('iconStacker.more', 'More') }), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__more-body", children: [!editedIsBase && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.rotation', 'Turn') }), jsxRuntime.jsx("input", { type: "range", min: -180, max: 180, step: 15, value: turn, onChange: (e) => {
|
|
204
|
+
const v = Number(e.target.value);
|
|
205
|
+
update(edited.id, { rotation: v === turnDefault ? undefined : v });
|
|
206
|
+
} }), jsxRuntime.jsxs("output", { children: [turn, "\u00B0"] })] }), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.offsetX', 'Shift right') }), jsxRuntime.jsx("input", { type: "range", min: -50, max: 50, step: 1, value: (_k = edited.offsetX) !== null && _k !== void 0 ? _k : 0, onChange: (e) => update(edited.id, { offsetX: Number(e.target.value) || undefined }) }), jsxRuntime.jsxs("output", { children: [(_l = edited.offsetX) !== null && _l !== void 0 ? _l : 0, "%"] })] }), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.offsetY', 'Shift down') }), jsxRuntime.jsx("input", { type: "range", min: -50, max: 50, step: 1, value: (_m = edited.offsetY) !== null && _m !== void 0 ? _m : 0, onChange: (e) => update(edited.id, { offsetY: Number(e.target.value) || undefined }) }), jsxRuntime.jsxs("output", { children: [(_o = edited.offsetY) !== null && _o !== void 0 ? _o : 0, "%"] })] })] })), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__swatches", children: [jsxRuntime.jsx(Swatch, { label: t('iconStacker.primary', 'Primary'), value: edited.primaryColor, onChange: (v) => update(edited.id, { primaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsx(Swatch, { label: t('iconStacker.secondary', 'Secondary'), value: edited.secondaryColor, onChange: (v) => update(edited.id, { secondaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsx(Swatch, { label: t('iconStacker.accent', 'Accent'), value: edited.accentColor, onChange: (v) => update(edited.id, { accentColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), hasText && (jsxRuntime.jsx(Swatch, { label: t('iconStacker.textColor', 'Text colour'), value: edited.textColor, onChange: (v) => update(edited.id, { textColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }))] }), hasText && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.textSize', 'Text size') }), jsxRuntime.jsx("input", { type: "range", min: 3, max: 14, step: 0.5, value: textSize, onChange: (e) => update(edited.id, { textSize: Number(e.target.value) }) }), jsxRuntime.jsx("output", { children: textSize }), edited.textSize !== undefined && (jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__reset", onClick: () => update(edited.id, { textSize: undefined }), "aria-label": `${resetLabel}: ${t('iconStacker.textSize', 'Text size')}`, title: resetLabel, children: jsxRuntime.jsx(navigation.NtdClose, { size: 10 }) }))] }), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.bind', 'Bind to') }), jsxRuntime.jsx("input", { type: "text", value: (_p = edited.textBinding) !== null && _p !== void 0 ? _p : '', "aria-invalid": bindingInvalid || undefined, title: t('iconStacker.bindHint', 'The name of the value the text shows, e.g. count — the text above is a sample'), onChange: (e) => update(edited.id, { textBinding: e.target.value.trim() || undefined }) })] })] }))] })] })] }), showCode && (jsxRuntime.jsxs("details", { className: "nice-icon-stacker__code", children: [jsxRuntime.jsx("summary", { children: t('iconStacker.code', 'JSX code') }), jsxRuntime.jsx("pre", { children: code }), jsxRuntime.jsxs("button", { type: "button", onClick: copy, children: [copied ? jsxRuntime.jsx(actions.NtdCheck, { size: 14 }) : jsxRuntime.jsx(actions.NtdCopy, { size: 14 }), ' ', copied
|
|
190
207
|
? t('iconStacker.copied', 'Copied')
|
|
191
|
-
: t('iconStacker.copy', 'Copy the code')] })] })] }))] }));
|
|
208
|
+
: t('iconStacker.copy', 'Copy the code')] })] }))] }))] }));
|
|
192
209
|
});
|
|
193
210
|
if (process.env.NODE_ENV !== 'production') {
|
|
194
211
|
NiceIconStacker.displayName = 'NiceIconStacker';
|
package/dist/cjs/client.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var animationControls = require('./animationControls.js');
|
|
4
4
|
var NiceIconPicker = require('./NiceIconPicker.js');
|
|
5
|
+
var iconHtml = require('./iconHtml.js');
|
|
5
6
|
var NiceIconStacker = require('./NiceIconStacker.js');
|
|
6
7
|
var iconStack = require('./iconStack.js');
|
|
7
8
|
var NtdIconMorph = require('./NtdIconMorph.js');
|
|
@@ -20,10 +21,15 @@ exports.createHoverAnimation = animationControls.createHoverAnimation;
|
|
|
20
21
|
exports.createVisibilityAnimation = animationControls.createVisibilityAnimation;
|
|
21
22
|
exports.useAnimationSequence = animationControls.useAnimationSequence;
|
|
22
23
|
exports.NiceIconPicker = NiceIconPicker.NiceIconPicker;
|
|
24
|
+
exports.NiceIconHtml = iconHtml.NiceIconHtml;
|
|
25
|
+
exports.parseIconHtml = iconHtml.parseIconHtml;
|
|
23
26
|
exports.NiceIconStacker = NiceIconStacker.NiceIconStacker;
|
|
24
27
|
exports.NiceIconStack = iconStack.NiceIconStack;
|
|
28
|
+
exports.addStackLayer = iconStack.addStackLayer;
|
|
29
|
+
exports.iconDisplayName = iconStack.iconDisplayName;
|
|
25
30
|
exports.isValidTextBinding = iconStack.isValidTextBinding;
|
|
26
31
|
exports.niceIconStackCode = iconStack.niceIconStackCode;
|
|
32
|
+
exports.removeStackLayer = iconStack.removeStackLayer;
|
|
27
33
|
exports.renderIconStack = iconStack.renderIconStack;
|
|
28
34
|
exports.NtdIconMorph = NtdIconMorph.NtdIconMorph;
|
|
29
35
|
exports.NtdMorphPair = NtdIconMorph.NtdMorphPair;
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var iconStack = require('./iconStack.js');
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* An icon — or a stack of icons — kept as HTML (1.3.9): the `<svg>` NiceIconPicker draws, ready to
|
|
8
|
+
* store in a database and to show anywhere, even without React. What it was drawn from rides along
|
|
9
|
+
* in data attributes on the root, so the picker reads its own value back.
|
|
10
|
+
*/
|
|
11
|
+
const ATTR_ICON = 'data-ntd-icon';
|
|
12
|
+
const ATTR_VARIANT = 'data-ntd-variant';
|
|
13
|
+
const ATTR_STACK = 'data-ntd-stack';
|
|
14
|
+
const ENTITIES = {
|
|
15
|
+
amp: '&',
|
|
16
|
+
quot: '"',
|
|
17
|
+
apos: "'",
|
|
18
|
+
'#39': "'",
|
|
19
|
+
lt: '<',
|
|
20
|
+
gt: '>',
|
|
21
|
+
};
|
|
22
|
+
/** The value of a data attribute of the root element (the first one in the markup). */
|
|
23
|
+
function readAttr(html, name) {
|
|
24
|
+
const hit = new RegExp(`\\s${name}="([^"]*)"`).exec(html);
|
|
25
|
+
return hit
|
|
26
|
+
? hit[1].replace(/&(amp|quot|apos|#39|lt|gt);/g, (_, e) => ENTITIES[e])
|
|
27
|
+
: undefined;
|
|
28
|
+
}
|
|
29
|
+
function isLayer(value) {
|
|
30
|
+
const layer = value;
|
|
31
|
+
return (!!layer &&
|
|
32
|
+
typeof layer === 'object' &&
|
|
33
|
+
typeof layer.id === 'string' &&
|
|
34
|
+
typeof layer.icon === 'string');
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Reads back what an icon's HTML was drawn from — the base icon and the stack. `null` for anything
|
|
38
|
+
* else: empty, plain text or HTML the picker did not write.
|
|
39
|
+
*/
|
|
40
|
+
function parseIconHtml(html) {
|
|
41
|
+
if (!html) {
|
|
42
|
+
return null;
|
|
43
|
+
}
|
|
44
|
+
const icon = readAttr(html, ATTR_ICON);
|
|
45
|
+
if (!icon) {
|
|
46
|
+
return null;
|
|
47
|
+
}
|
|
48
|
+
const stack = readAttr(html, ATTR_STACK);
|
|
49
|
+
if (stack) {
|
|
50
|
+
try {
|
|
51
|
+
const parsed = JSON.parse(stack);
|
|
52
|
+
const layers = Array.isArray(parsed) ? parsed.filter(isLayer) : [];
|
|
53
|
+
if (layers.length > 0) {
|
|
54
|
+
return { icon: layers[0].icon, layers };
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
catch (_a) {
|
|
58
|
+
// a damaged stack still shows its base
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
const variant = readAttr(html, ATTR_VARIANT);
|
|
62
|
+
return { icon, layers: [{ id: '1', icon, ...(variant ? { variant } : {}) }] };
|
|
63
|
+
}
|
|
64
|
+
/** The data attributes that let the HTML of a stack be read back: the base, and the stack unless it is a plain icon. */
|
|
65
|
+
function iconHtmlAttributes(layers) {
|
|
66
|
+
const base = layers[0];
|
|
67
|
+
if (!base) {
|
|
68
|
+
return {};
|
|
69
|
+
}
|
|
70
|
+
const plain = layers.length === 1 &&
|
|
71
|
+
Object.entries(base).every(([key, value]) => value === undefined || key === 'id' || key === 'icon' || key === 'variant');
|
|
72
|
+
if (plain) {
|
|
73
|
+
return { [ATTR_ICON]: base.icon, ...(base.variant ? { [ATTR_VARIANT]: base.variant } : {}) };
|
|
74
|
+
}
|
|
75
|
+
return { [ATTR_ICON]: base.icon, [ATTR_STACK]: JSON.stringify(layers) };
|
|
76
|
+
}
|
|
77
|
+
/** djb2, base 36 — a short, stable name for a drawing. */
|
|
78
|
+
function hash(text) {
|
|
79
|
+
let h = 5381;
|
|
80
|
+
for (let i = 0; i < text.length; i++) {
|
|
81
|
+
h = ((h << 5) + h + text.charCodeAt(i)) | 0;
|
|
82
|
+
}
|
|
83
|
+
return (h >>> 0).toString(36);
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* Renames the ids inside an icon's markup (masks, gradients, clip paths) after the drawing itself.
|
|
87
|
+
* React's ids (`_r_3_`) are unique only within the page that drew them; pasted into another page they
|
|
88
|
+
* could hit an element of its own and borrow the wrong mask. Named after the drawing, two copies of
|
|
89
|
+
* one icon share ids that point at identical definitions.
|
|
90
|
+
*/
|
|
91
|
+
function scopeIconHtmlIds(markup) {
|
|
92
|
+
const ids = [...new Set([...markup.matchAll(/\sid="([^"]+)"/g)].map((m) => m[1]))];
|
|
93
|
+
if (ids.length === 0) {
|
|
94
|
+
return markup;
|
|
95
|
+
}
|
|
96
|
+
const index = new Map(ids.map((id, i) => [id, i]));
|
|
97
|
+
const rename = (fn) => markup
|
|
98
|
+
.replace(/(\sid=")([^"]+)(")/g, (all, a, id, b) => index.has(id) ? a + fn(id) + b : all)
|
|
99
|
+
.replace(/url\(#([^)]+)\)/g, (all, id) => (index.has(id) ? `url(#${fn(id)})` : all))
|
|
100
|
+
.replace(/(href=")#([^"]+)(")/g, (all, a, id, b) => index.has(id) ? `${a}#${fn(id)}${b}` : all);
|
|
101
|
+
const name = hash(rename((id) => `#${index.get(id)}`));
|
|
102
|
+
return rename((id) => `ntd-${name}-${index.get(id)}`);
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* NiceIconHtml (1.3.9) — shows an icon kept as HTML in a React page by drawing it again from its
|
|
106
|
+
* data attributes; the markup itself is never injected, so HTML from a database cannot run anything.
|
|
107
|
+
* A plain export name (`'NtdStar'`) works too. The rest of the props go to the base icon.
|
|
108
|
+
*/
|
|
109
|
+
function NiceIconHtml({ html, icons, values, fallback = null, ...baseProps }) {
|
|
110
|
+
var _a;
|
|
111
|
+
const source = (_a = parseIconHtml(html)) !== null && _a !== void 0 ? _a : (html && !html.includes('<') ? { layers: [{ id: '1', icon: html }] } : null);
|
|
112
|
+
const drawn = source ? iconStack.renderIconStack(source.layers, icons, { baseProps, values }) : null;
|
|
113
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: drawn !== null && drawn !== void 0 ? drawn : fallback });
|
|
114
|
+
}
|
|
115
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
116
|
+
NiceIconHtml.displayName = 'NiceIconHtml';
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
exports.NiceIconHtml = NiceIconHtml;
|
|
120
|
+
exports.iconHtmlAttributes = iconHtmlAttributes;
|
|
121
|
+
exports.parseIconHtml = parseIconHtml;
|
|
122
|
+
exports.scopeIconHtmlIds = scopeIconHtmlIds;
|
package/dist/cjs/iconStack.js
CHANGED
|
@@ -16,6 +16,74 @@ function stackParentId(layers, layer) {
|
|
|
16
16
|
function stackChildrenOf(layers, id) {
|
|
17
17
|
return layers.filter((l) => l !== layers[0] && stackParentId(layers, l) === id);
|
|
18
18
|
}
|
|
19
|
+
/** An icon's name as people read it: the export name without `Ntd` — `NtdAlertBell` → `AlertBell`. */
|
|
20
|
+
function iconDisplayName(name) {
|
|
21
|
+
return name.replace(/^Ntd(?=[A-Z0-9])/, '');
|
|
22
|
+
}
|
|
23
|
+
/** A short id no layer of the stack has yet: `'1'`, `'2'`… (1.3.9 — it was the icon name and a timestamp). */
|
|
24
|
+
function nextStackLayerId(layers) {
|
|
25
|
+
const taken = new Set(layers.map((l) => l.id));
|
|
26
|
+
let n = layers.length + 1;
|
|
27
|
+
while (taken.has(String(n))) {
|
|
28
|
+
n += 1;
|
|
29
|
+
}
|
|
30
|
+
return String(n);
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Puts an icon on the stack (1.3.9): into layer `into` (the base when absent or unknown), or as the
|
|
34
|
+
* base of an empty stack. Returns the new layers and the new layer's id.
|
|
35
|
+
*/
|
|
36
|
+
function addStackLayer(layers, icon, into) {
|
|
37
|
+
const id = nextStackLayerId(layers);
|
|
38
|
+
const parent = layers.find((l) => l.id === into);
|
|
39
|
+
const layer = {
|
|
40
|
+
id,
|
|
41
|
+
icon: icon.icon,
|
|
42
|
+
...(icon.variant ? { variant: icon.variant } : {}),
|
|
43
|
+
...(parent && parent !== layers[0] ? { parent: parent.id } : {}),
|
|
44
|
+
};
|
|
45
|
+
return { layers: [...layers, layer], id };
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Takes a layer off the stack (1.3.9; NiceIconStacker's own until then): what sat in it moves up
|
|
49
|
+
* into its parent, and a removed base hands over to its first child.
|
|
50
|
+
*/
|
|
51
|
+
function removeStackLayer(layers, id) {
|
|
52
|
+
const base = layers[0];
|
|
53
|
+
if (!base) {
|
|
54
|
+
return [];
|
|
55
|
+
}
|
|
56
|
+
if (id !== base.id) {
|
|
57
|
+
const gone = layers.find((l) => l.id === id);
|
|
58
|
+
const up = gone ? stackParentId(layers, gone) : undefined;
|
|
59
|
+
return layers
|
|
60
|
+
.filter((l) => l.id !== id)
|
|
61
|
+
.map((l) => (l.parent === id ? { ...l, parent: up === base.id ? undefined : up } : l));
|
|
62
|
+
}
|
|
63
|
+
const [heir, ...siblings] = stackChildrenOf(layers, base.id);
|
|
64
|
+
if (!heir) {
|
|
65
|
+
return [];
|
|
66
|
+
}
|
|
67
|
+
const newBase = {
|
|
68
|
+
...heir,
|
|
69
|
+
parent: undefined,
|
|
70
|
+
align: undefined,
|
|
71
|
+
size: undefined,
|
|
72
|
+
rotation: undefined,
|
|
73
|
+
offsetX: undefined,
|
|
74
|
+
offsetY: undefined,
|
|
75
|
+
};
|
|
76
|
+
return [
|
|
77
|
+
newBase,
|
|
78
|
+
...layers
|
|
79
|
+
.filter((l) => l.id !== base.id && l.id !== heir.id)
|
|
80
|
+
.map((l) => siblings.includes(l)
|
|
81
|
+
? { ...l, parent: heir.id }
|
|
82
|
+
: l.parent === heir.id
|
|
83
|
+
? { ...l, parent: undefined }
|
|
84
|
+
: l),
|
|
85
|
+
];
|
|
86
|
+
}
|
|
19
87
|
const COLOR_PROPS = ['primaryColor', 'secondaryColor', 'accentColor', 'textColor'];
|
|
20
88
|
/** The stack as JSX: every layer wrapping the layers that sit in it, text innermost. */
|
|
21
89
|
function niceIconStackCode(layers) {
|
|
@@ -106,8 +174,11 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
106
174
|
}
|
|
107
175
|
|
|
108
176
|
exports.NiceIconStack = NiceIconStack;
|
|
177
|
+
exports.addStackLayer = addStackLayer;
|
|
178
|
+
exports.iconDisplayName = iconDisplayName;
|
|
109
179
|
exports.isValidTextBinding = isValidTextBinding;
|
|
110
180
|
exports.niceIconStackCode = niceIconStackCode;
|
|
181
|
+
exports.removeStackLayer = removeStackLayer;
|
|
111
182
|
exports.renderIconStack = renderIconStack;
|
|
112
183
|
exports.stackChildrenOf = stackChildrenOf;
|
|
113
184
|
exports.stackParentId = stackParentId;
|
package/dist/cjs/index.js
CHANGED
|
@@ -4,6 +4,7 @@ var types = require('./types.js');
|
|
|
4
4
|
var createIcon = require('./createIcon.js');
|
|
5
5
|
var smilAnimations = require('./smilAnimations.js');
|
|
6
6
|
var NiceIconPicker = require('./NiceIconPicker.js');
|
|
7
|
+
var iconHtml = require('./iconHtml.js');
|
|
7
8
|
var NiceIconStacker = require('./NiceIconStacker.js');
|
|
8
9
|
var iconStack = require('./iconStack.js');
|
|
9
10
|
var animationControls = require('./animationControls.js');
|
|
@@ -70,10 +71,15 @@ exports.createSmilAnimationDef = smilAnimations.createSmilAnimationDef;
|
|
|
70
71
|
exports.generateSmilAnimation = smilAnimations.generateSmilAnimation;
|
|
71
72
|
exports.isSmilSupported = smilAnimations.isSmilSupported;
|
|
72
73
|
exports.NiceIconPicker = NiceIconPicker.NiceIconPicker;
|
|
74
|
+
exports.NiceIconHtml = iconHtml.NiceIconHtml;
|
|
75
|
+
exports.parseIconHtml = iconHtml.parseIconHtml;
|
|
73
76
|
exports.NiceIconStacker = NiceIconStacker.NiceIconStacker;
|
|
74
77
|
exports.NiceIconStack = iconStack.NiceIconStack;
|
|
78
|
+
exports.addStackLayer = iconStack.addStackLayer;
|
|
79
|
+
exports.iconDisplayName = iconStack.iconDisplayName;
|
|
75
80
|
exports.isValidTextBinding = iconStack.isValidTextBinding;
|
|
76
81
|
exports.niceIconStackCode = iconStack.niceIconStackCode;
|
|
82
|
+
exports.removeStackLayer = iconStack.removeStackLayer;
|
|
77
83
|
exports.renderIconStack = iconStack.renderIconStack;
|
|
78
84
|
exports.AnimationController = animationControls.AnimationController;
|
|
79
85
|
exports.InteractiveIcon = animationControls.InteractiveIcon;
|