ag-design 1.0.81 → 1.0.82

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.
Files changed (13) hide show
  1. package/assets/static/fonts/ag-icons.css +9 -2
  2. package/assets/static/fonts/ag-icons.json +48 -6
  3. package/assets/static/fonts/ag-icons.ttf +0 -0
  4. package/assets/static/fonts/ag-icons.woff +0 -0
  5. package/assets/static/fonts/ag-icons.woff2 +0 -0
  6. package/assets/static/fonts/all-icons-gallery.html +379 -0
  7. package/fonts/ag-icons.css +9 -2
  8. package/fonts/ag-icons.json +48 -6
  9. package/fonts/ag-icons.ttf +0 -0
  10. package/fonts/ag-icons.woff +0 -0
  11. package/fonts/ag-icons.woff2 +0 -0
  12. package/fonts/all-icons-gallery.html +379 -0
  13. package/package.json +1 -1
package/assets/static/fonts/ag-icons.css CHANGED
@@ -39,12 +39,12 @@
39
39
  .aga-weather-wi-day-rain-mix:before{content:"\f113"}
40
40
  .aga-weather-wi-day-cloudy:before{content:"\f114"}
41
41
  .aga-text-editor-video:before{content:"\f115"}
42
- .aga-text-editor-undo:before{content:"\f116"}
42
+ .aga-text-editor-undo:before{content:"\f1eb"}
43
43
  .aga-text-editor-underline:before{content:"\f117"}
44
44
  .aga-text-editor-superscript:before{content:"\f118"}
45
45
  .aga-text-editor-subscript:before{content:"\f119"}
46
46
  .aga-text-editor-strikethrough:before{content:"\f11a"}
47
- .aga-text-editor-redo:before{content:"\f11b"}
47
+ .aga-text-editor-redo:before{content:"\f1ec"}
48
48
  .aga-text-editor-picker-arrows:before{content:"\f11c"}
49
49
  .aga-text-editor-list-ordered:before{content:"\f11d"}
50
50
  .aga-text-editor-list-bullet:before{content:"\f11e"}
@@ -380,3 +380,10 @@
380
380
  .aga-color-clean-format:before{content:"\f268"}
381
381
  .aga-color-bold:before{content:"\f269"}
382
382
  .aga-color-blockquote:before{content:"\f26a"}
383
+ .aga-media-video:before{content:"\e24b"}
384
+ .aga-media-image:before{content:"\f26c"}
385
+ .aga-layout-ui-picker-arrows:before{content:"\f20c"}
386
+ .aga-formatting-code-block:before{content:"\f1e9"}
387
+ .aga-formatting-blockquote:before{content:"\f1ea"}
388
+ .aga-communication-link:before{content:"\e99b"}
389
+ .aga-communication-links:before{content:"\f25f"}
package/assets/static/fonts/ag-icons.json CHANGED
@@ -614,6 +614,18 @@
614
614
  "hex": "\\f206",
615
615
  "unicode": ""
616
616
  },
617
+ "link": {
618
+ "class": "aga-communication-link",
619
+ "glyph": "e99b",
620
+ "hex": "\\e99b",
621
+ "unicode": ""
622
+ },
623
+ "links": {
624
+ "class": "aga-communication-links",
625
+ "glyph": "f25f",
626
+ "hex": "\\f25f",
627
+ "unicode": ""
628
+ },
617
629
  "phone-iphone": {
618
630
  "class": "aga-communication-phone-iphone",
619
631
  "glyph": "f205",
@@ -728,6 +740,12 @@
728
740
  }
729
741
  },
730
742
  "formatting": {
743
+ "blockquote": {
744
+ "class": "aga-formatting-blockquote",
745
+ "glyph": "f1ea",
746
+ "hex": "\\f1ea",
747
+ "unicode": ""
748
+ },
731
749
  "bold": {
732
750
  "class": "aga-formatting-bold",
733
751
  "glyph": "f1f3",
@@ -740,6 +758,12 @@
740
758
  "hex": "\\f1f2",
741
759
  "unicode": ""
742
760
  },
761
+ "code-block": {
762
+ "class": "aga-formatting-code-block",
763
+ "glyph": "f1e9",
764
+ "hex": "\\f1e9",
765
+ "unicode": ""
766
+ },
743
767
  "italic": {
744
768
  "class": "aga-formatting-italic",
745
769
  "glyph": "f1f1",
@@ -920,6 +944,12 @@
920
944
  "hex": "\\f1d5",
921
945
  "unicode": ""
922
946
  },
947
+ "picker-arrows": {
948
+ "class": "aga-layout-ui-picker-arrows",
949
+ "glyph": "f20c",
950
+ "hex": "\\f20c",
951
+ "unicode": ""
952
+ },
923
953
  "slider-curve": {
924
954
  "class": "aga-layout-ui-slider-curve",
925
955
  "glyph": "f1d4",
@@ -1112,6 +1142,12 @@
1112
1142
  "hex": "\\f1b6",
1113
1143
  "unicode": ""
1114
1144
  },
1145
+ "image": {
1146
+ "class": "aga-media-image",
1147
+ "glyph": "f26c",
1148
+ "hex": "\\f26c",
1149
+ "unicode": ""
1150
+ },
1115
1151
  "imageupload": {
1116
1152
  "class": "aga-media-imageupload",
1117
1153
  "glyph": "f1b5",
@@ -1142,6 +1178,12 @@
1142
1178
  "hex": "\\f1b1",
1143
1179
  "unicode": ""
1144
1180
  },
1181
+ "video": {
1182
+ "class": "aga-media-video",
1183
+ "glyph": "e24b",
1184
+ "hex": "\\e24b",
1185
+ "unicode": ""
1186
+ },
1145
1187
  "videocam": {
1146
1188
  "class": "aga-media-videocam",
1147
1189
  "glyph": "f1b0",
@@ -2048,9 +2090,9 @@
2048
2090
  },
2049
2091
  "redo": {
2050
2092
  "class": "aga-text-editor-redo",
2051
- "glyph": "f11b",
2052
- "hex": "\\f11b",
2053
- "unicode": ""
2093
+ "glyph": "f1ec",
2094
+ "hex": "\\f1ec",
2095
+ "unicode": ""
2054
2096
  },
2055
2097
  "strikethrough": {
2056
2098
  "class": "aga-text-editor-strikethrough",
@@ -2078,9 +2120,9 @@
2078
2120
  },
2079
2121
  "undo": {
2080
2122
  "class": "aga-text-editor-undo",
2081
- "glyph": "f116",
2082
- "hex": "\\f116",
2083
- "unicode": ""
2123
+ "glyph": "f1eb",
2124
+ "hex": "\\f1eb",
2125
+ "unicode": ""
2084
2126
  },
2085
2127
  "video": {
2086
2128
  "class": "aga-text-editor-video",
package/assets/static/fonts/ag-icons.ttf CHANGED
Binary file
package/assets/static/fonts/ag-icons.woff CHANGED
Binary file
package/assets/static/fonts/ag-icons.woff2 CHANGED
Binary file
package/assets/static/fonts/all-icons-gallery.html ADDED
@@ -0,0 +1,379 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AG Icons Gallery - All 362 Icons</title>
7
+ <link rel="stylesheet" href="ag-icons.css">
8
+ <style>
9
+ * { margin: 0; padding: 0; box-sizing: border-box; }
10
+
11
+ body {
12
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
13
+ background: #f8f9fa;
14
+ color: #333;
15
+ }
16
+
17
+ header {
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ color: white;
20
+ padding: 40px 20px;
21
+ text-align: center;
22
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
23
+ }
24
+
25
+ header h1 { font-size: 32px; margin-bottom: 10px; }
26
+ header p { font-size: 16px; opacity: 0.9; }
27
+
28
+ .controls {
29
+ background: white;
30
+ padding: 20px;
31
+ border-bottom: 1px solid #e0e0e0;
32
+ position: sticky;
33
+ top: 0;
34
+ z-index: 100;
35
+ box-shadow: 0 2px 4px rgba(0,0,0,0.05);
36
+ }
37
+
38
+ .search-box {
39
+ display: flex;
40
+ gap: 10px;
41
+ max-width: 600px;
42
+ margin: 0 auto 15px;
43
+ flex-wrap: wrap;
44
+ }
45
+
46
+ input[type="text"], select {
47
+ flex: 1;
48
+ min-width: 200px;
49
+ padding: 10px 15px;
50
+ border: 2px solid #e0e0e0;
51
+ border-radius: 6px;
52
+ font-size: 14px;
53
+ transition: border-color 0.2s;
54
+ }
55
+
56
+ input[type="text"]:focus, select:focus {
57
+ outline: none;
58
+ border-color: #667eea;
59
+ }
60
+
61
+ .stats {
62
+ display: flex;
63
+ gap: 20px;
64
+ justify-content: center;
65
+ flex-wrap: wrap;
66
+ font-size: 14px;
67
+ color: #666;
68
+ }
69
+
70
+ .stat {
71
+ display: flex;
72
+ align-items: center;
73
+ gap: 5px;
74
+ }
75
+
76
+ .stat-value {
77
+ font-weight: bold;
78
+ color: #333;
79
+ font-size: 16px;
80
+ }
81
+
82
+ .container {
83
+ max-width: 1400px;
84
+ margin: 0 auto;
85
+ padding: 20px;
86
+ }
87
+
88
+ .category-section {
89
+ margin-bottom: 40px;
90
+ }
91
+
92
+ .category-header {
93
+ display: flex;
94
+ align-items: center;
95
+ gap: 10px;
96
+ margin-bottom: 15px;
97
+ padding-bottom: 10px;
98
+ border-bottom: 2px solid #667eea;
99
+ }
100
+
101
+ .category-title {
102
+ font-size: 20px;
103
+ font-weight: 600;
104
+ color: #333;
105
+ }
106
+
107
+ .category-count {
108
+ background: #667eea;
109
+ color: white;
110
+ padding: 4px 12px;
111
+ border-radius: 20px;
112
+ font-size: 12px;
113
+ font-weight: 600;
114
+ }
115
+
116
+ .icons-grid {
117
+ display: grid;
118
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
119
+ gap: 10px;
120
+ margin-bottom: 30px;
121
+ }
122
+
123
+ .icon-card {
124
+ background: white;
125
+ border: 1px solid #e0e0e0;
126
+ border-radius: 8px;
127
+ padding: 15px;
128
+ text-align: center;
129
+ cursor: pointer;
130
+ transition: all 0.3s ease;
131
+ min-height: 120px;
132
+ display: flex;
133
+ flex-direction: column;
134
+ align-items: center;
135
+ justify-content: center;
136
+ }
137
+
138
+ .icon-card:hover {
139
+ border-color: #667eea;
140
+ background: #f5f7ff;
141
+ transform: translateY(-4px);
142
+ box-shadow: 0 8px 16px rgba(102, 126, 234, 0.15);
143
+ }
144
+
145
+ .icon-card.hidden { display: none; }
146
+
147
+ .icon-glyph {
148
+ font-size: 40px;
149
+ margin-bottom: 8px;
150
+ min-height: 45px;
151
+ display: flex;
152
+ align-items: center;
153
+ justify-content: center;
154
+ }
155
+
156
+ .icon-name {
157
+ font-size: 11px;
158
+ color: #666;
159
+ word-break: break-word;
160
+ margin-bottom: 4px;
161
+ font-weight: 500;
162
+ }
163
+
164
+ .icon-code {
165
+ font-size: 10px;
166
+ color: #999;
167
+ font-family: 'Courier New', monospace;
168
+ background: #f5f5f5;
169
+ padding: 2px 6px;
170
+ border-radius: 3px;
171
+ }
172
+
173
+ .no-results {
174
+ text-align: center;
175
+ padding: 40px 20px;
176
+ color: #999;
177
+ font-size: 16px;
178
+ }
179
+
180
+ .copy-notice {
181
+ position: fixed;
182
+ bottom: 20px;
183
+ right: 20px;
184
+ background: #667eea;
185
+ color: white;
186
+ padding: 12px 20px;
187
+ border-radius: 6px;
188
+ opacity: 0;
189
+ pointer-events: none;
190
+ transition: opacity 0.3s;
191
+ }
192
+
193
+ .copy-notice.show { opacity: 1; }
194
+
195
+ footer {
196
+ background: #f0f0f0;
197
+ padding: 20px;
198
+ text-align: center;
199
+ color: #666;
200
+ font-size: 12px;
201
+ margin-top: 40px;
202
+ }
203
+
204
+ @media (max-width: 768px) {
205
+ header h1 { font-size: 24px; }
206
+ .icons-grid {
207
+ grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
208
+ }
209
+ .icon-glyph { font-size: 32px; }
210
+ .search-box {
211
+ flex-direction: column;
212
+ }
213
+ input[type="text"], select {
214
+ min-width: auto;
215
+ width: 100%;
216
+ }
217
+ }
218
+ </style>
219
+ </head>
220
+ <body>
221
+ <header>
222
+ <h1>🎨 AG Icons Gallery</h1>
223
+ <p>Complete collection of 362 professional icons across 20 categories</p>
224
+ </header>
225
+
226
+ <div class="controls">
227
+ <div class="search-box">
228
+ <input type="text" id="searchInput" placeholder="🔍 Search icons by name..." />
229
+ <select id="categoryFilter">
230
+ <option value="">All Categories</option>
231
+ </select>
232
+ </div>
233
+ <div class="stats">
234
+ <div class="stat">
235
+ <span>Total Icons:</span>
236
+ <span class="stat-value" id="totalCount">362</span>
237
+ </div>
238
+ <div class="stat">
239
+ <span>Showing:</span>
240
+ <span class="stat-value" id="showingCount">362</span>
241
+ </div>
242
+ <div class="stat">
243
+ <span>Categories:</span>
244
+ <span class="stat-value" id="categoryCount">20</span>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <div class="container" id="gallerContainer">
250
+ <div class="no-results">Loading icons...</div>
251
+ </div>
252
+
253
+ <footer>
254
+ <p>Click any icon to copy its CSS class name • All icons available in TTF, WOFF, WOFF2 formats</p>
255
+ </footer>
256
+
257
+ <div class="copy-notice" id="copyNotice">✓ Copied to clipboard!</div>
258
+
259
+ <script>
260
+ let allIcons = {};
261
+ let filteredIcons = {};
262
+
263
+ async function loadIcons() {
264
+ try {
265
+ const response = await fetch('ag-icons.json');
266
+ allIcons = await response.json();
267
+ filteredIcons = JSON.parse(JSON.stringify(allIcons));
268
+ renderGallery();
269
+ populateCategoryFilter();
270
+ } catch (error) {
271
+ console.error('Failed to load icons:', error);
272
+ document.getElementById('gallerContainer').innerHTML =
273
+ '<div class="no-results">Failed to load icons. Please ensure ag-icons.json is available.</div>';
274
+ }
275
+ }
276
+
277
+ function populateCategoryFilter() {
278
+ const select = document.getElementById('categoryFilter');
279
+ const categories = Object.keys(allIcons).sort();
280
+ categories.forEach(cat => {
281
+ const option = document.createElement('option');
282
+ option.value = cat;
283
+ option.textContent = `${cat} (${Object.keys(allIcons[cat]).length})`;
284
+ select.appendChild(option);
285
+ });
286
+ }
287
+
288
+ function renderGallery() {
289
+ const container = document.getElementById('gallerContainer');
290
+ let html = '';
291
+ let totalShown = 0;
292
+
293
+ const categories = Object.keys(filteredIcons).sort();
294
+
295
+ if (categories.length === 0) {
296
+ container.innerHTML = '<div class="no-results">No icons match your search.</div>';
297
+ document.getElementById('showingCount').textContent = '0';
298
+ return;
299
+ }
300
+
301
+ categories.forEach(category => {
302
+ const icons = filteredIcons[category];
303
+ const iconCount = Object.keys(icons).length;
304
+
305
+ if (iconCount === 0) return;
306
+
307
+ totalShown += iconCount;
308
+ html += `
309
+ <div class="category-section">
310
+ <div class="category-header">
311
+ <h2 class="category-title">${category}</h2>
312
+ <span class="category-count">${iconCount}</span>
313
+ </div>
314
+ <div class="icons-grid">
315
+ `;
316
+
317
+ Object.entries(icons).forEach(([name, data]) => {
318
+ const classname = data.class;
319
+ const glyph = data.glyph;
320
+ html += `
321
+ <div class="icon-card" onclick="copyToClipboard('${classname}')">
322
+ <div class="icon-glyph"><i class="${classname}"></i></div>
323
+ <div class="icon-name">${name}</div>
324
+ <div class="icon-code">${glyph}</div>
325
+ </div>
326
+ `;
327
+ });
328
+
329
+ html += `
330
+ </div>
331
+ </div>
332
+ `;
333
+ });
334
+
335
+ container.innerHTML = html;
336
+ document.getElementById('showingCount').textContent = totalShown;
337
+ }
338
+
339
+ function copyToClipboard(text) {
340
+ navigator.clipboard.writeText(text).then(() => {
341
+ const notice = document.getElementById('copyNotice');
342
+ notice.classList.add('show');
343
+ setTimeout(() => notice.classList.remove('show'), 2000);
344
+ });
345
+ }
346
+
347
+ function filterIcons() {
348
+ const searchTerm = document.getElementById('searchInput').value.toLowerCase();
349
+ const selectedCategory = document.getElementById('categoryFilter').value;
350
+
351
+ filteredIcons = {};
352
+
353
+ Object.entries(allIcons).forEach(([category, icons]) => {
354
+ if (selectedCategory && category !== selectedCategory) return;
355
+
356
+ const filtered = {};
357
+ Object.entries(icons).forEach(([name, data]) => {
358
+ if (searchTerm === '' || name.toLowerCase().includes(searchTerm) ||
359
+ data.class.toLowerCase().includes(searchTerm)) {
360
+ filtered[name] = data;
361
+ }
362
+ });
363
+
364
+ if (Object.keys(filtered).length > 0) {
365
+ filteredIcons[category] = filtered;
366
+ }
367
+ });
368
+
369
+ renderGallery();
370
+ }
371
+
372
+ document.getElementById('searchInput').addEventListener('input', filterIcons);
373
+ document.getElementById('categoryFilter').addEventListener('change', filterIcons);
374
+
375
+ // Load icons on page load
376
+ loadIcons();
377
+ </script>
378
+ </body>
379
+ </html>
package/fonts/ag-icons.css CHANGED
@@ -39,12 +39,12 @@
39
39
  .aga-weather-wi-day-rain-mix:before{content:"\f113"}
40
40
  .aga-weather-wi-day-cloudy:before{content:"\f114"}
41
41
  .aga-text-editor-video:before{content:"\f115"}
42
- .aga-text-editor-undo:before{content:"\f116"}
42
+ .aga-text-editor-undo:before{content:"\f1eb"}
43
43
  .aga-text-editor-underline:before{content:"\f117"}
44
44
  .aga-text-editor-superscript:before{content:"\f118"}
45
45
  .aga-text-editor-subscript:before{content:"\f119"}
46
46
  .aga-text-editor-strikethrough:before{content:"\f11a"}
47
- .aga-text-editor-redo:before{content:"\f11b"}
47
+ .aga-text-editor-redo:before{content:"\f1ec"}
48
48
  .aga-text-editor-picker-arrows:before{content:"\f11c"}
49
49
  .aga-text-editor-list-ordered:before{content:"\f11d"}
50
50
  .aga-text-editor-list-bullet:before{content:"\f11e"}
@@ -380,3 +380,10 @@
380
380
  .aga-color-clean-format:before{content:"\f268"}
381
381
  .aga-color-bold:before{content:"\f269"}
382
382
  .aga-color-blockquote:before{content:"\f26a"}
383
+ .aga-media-video:before{content:"\e24b"}
384
+ .aga-media-image:before{content:"\f26c"}
385
+ .aga-layout-ui-picker-arrows:before{content:"\f20c"}
386
+ .aga-formatting-code-block:before{content:"\f1e9"}
387
+ .aga-formatting-blockquote:before{content:"\f1ea"}
388
+ .aga-communication-link:before{content:"\e99b"}
389
+ .aga-communication-links:before{content:"\f25f"}
package/fonts/ag-icons.json CHANGED
@@ -614,6 +614,18 @@
614
614
  "hex": "\\f206",
615
615
  "unicode": ""
616
616
  },
617
+ "link": {
618
+ "class": "aga-communication-link",
619
+ "glyph": "e99b",
620
+ "hex": "\\e99b",
621
+ "unicode": ""
622
+ },
623
+ "links": {
624
+ "class": "aga-communication-links",
625
+ "glyph": "f25f",
626
+ "hex": "\\f25f",
627
+ "unicode": ""
628
+ },
617
629
  "phone-iphone": {
618
630
  "class": "aga-communication-phone-iphone",
619
631
  "glyph": "f205",
@@ -728,6 +740,12 @@
728
740
  }
729
741
  },
730
742
  "formatting": {
743
+ "blockquote": {
744
+ "class": "aga-formatting-blockquote",
745
+ "glyph": "f1ea",
746
+ "hex": "\\f1ea",
747
+ "unicode": ""
748
+ },
731
749
  "bold": {
732
750
  "class": "aga-formatting-bold",
733
751
  "glyph": "f1f3",
@@ -740,6 +758,12 @@
740
758
  "hex": "\\f1f2",
741
759
  "unicode": ""
742
760
  },
761
+ "code-block": {
762
+ "class": "aga-formatting-code-block",
763
+ "glyph": "f1e9",
764
+ "hex": "\\f1e9",
765
+ "unicode": ""
766
+ },
743
767
  "italic": {
744
768
  "class": "aga-formatting-italic",
745
769
  "glyph": "f1f1",
@@ -920,6 +944,12 @@
920
944
  "hex": "\\f1d5",
921
945
  "unicode": ""
922
946
  },
947
+ "picker-arrows": {
948
+ "class": "aga-layout-ui-picker-arrows",
949
+ "glyph": "f20c",
950
+ "hex": "\\f20c",
951
+ "unicode": ""
952
+ },
923
953
  "slider-curve": {
924
954
  "class": "aga-layout-ui-slider-curve",
925
955
  "glyph": "f1d4",
@@ -1112,6 +1142,12 @@
1112
1142
  "hex": "\\f1b6",
1113
1143
  "unicode": ""
1114
1144
  },
1145
+ "image": {
1146
+ "class": "aga-media-image",
1147
+ "glyph": "f26c",
1148
+ "hex": "\\f26c",
1149
+ "unicode": ""
1150
+ },
1115
1151
  "imageupload": {
1116
1152
  "class": "aga-media-imageupload",
1117
1153
  "glyph": "f1b5",
@@ -1142,6 +1178,12 @@
1142
1178
  "hex": "\\f1b1",
1143
1179
  "unicode": ""
1144
1180
  },
1181
+ "video": {
1182
+ "class": "aga-media-video",
1183
+ "glyph": "e24b",
1184
+ "hex": "\\e24b",
1185
+ "unicode": ""
1186
+ },
1145
1187
  "videocam": {
1146
1188
  "class": "aga-media-videocam",
1147
1189
  "glyph": "f1b0",
@@ -2048,9 +2090,9 @@
2048
2090
  },
2049
2091
  "redo": {
2050
2092
  "class": "aga-text-editor-redo",
2051
- "glyph": "f11b",
2052
- "hex": "\\f11b",
2053
- "unicode": ""
2093
+ "glyph": "f1ec",
2094
+ "hex": "\\f1ec",
2095
+ "unicode": ""
2054
2096
  },
2055
2097
  "strikethrough": {
2056
2098
  "class": "aga-text-editor-strikethrough",
@@ -2078,9 +2120,9 @@
2078
2120
  },
2079
2121
  "undo": {
2080
2122
  "class": "aga-text-editor-undo",
2081
- "glyph": "f116",
2082
- "hex": "\\f116",
2083
- "unicode": ""
2123
+ "glyph": "f1eb",
2124
+ "hex": "\\f1eb",
2125
+ "unicode": ""
2084
2126
  },
2085
2127
  "video": {
2086
2128
  "class": "aga-text-editor-video",
package/fonts/ag-icons.ttf CHANGED
Binary file
package/fonts/ag-icons.woff CHANGED
Binary file
package/fonts/ag-icons.woff2 CHANGED
Binary file
package/fonts/all-icons-gallery.html ADDED
@@ -0,0 +1,379 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AG Icons Gallery - All 362 Icons</title>
7
+ <link rel="stylesheet" href="ag-icons.css">
8
+ <style>
9
+ * { margin: 0; padding: 0; box-sizing: border-box; }
10
+
11
+ body {
12
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
13
+ background: #f8f9fa;
14
+ color: #333;
15
+ }
16
+
17
+ header {
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ color: white;
20
+ padding: 40px 20px;
21
+ text-align: center;
22
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
23
+ }
24
+
25
+ header h1 { font-size: 32px; margin-bottom: 10px; }
26
+ header p { font-size: 16px; opacity: 0.9; }
27
+
28
+ .controls {
29
+ background: white;
30
+ padding: 20px;
31
+ border-bottom: 1px solid #e0e0e0;
32
+ position: sticky;
33
+ top: 0;
34
+ z-index: 100;
35
+ box-shadow: 0 2px 4px rgba(0,0,0,0.05);
36
+ }
37
+
38
+ .search-box {
39
+ display: flex;
40
+ gap: 10px;
41
+ max-width: 600px;
42
+ margin: 0 auto 15px;
43
+ flex-wrap: wrap;
44
+ }
45
+
46
+ input[type="text"], select {
47
+ flex: 1;
48
+ min-width: 200px;
49
+ padding: 10px 15px;
50
+ border: 2px solid #e0e0e0;
51
+ border-radius: 6px;
52
+ font-size: 14px;
53
+ transition: border-color 0.2s;
54
+ }
55
+
56
+ input[type="text"]:focus, select:focus {
57
+ outline: none;
58
+ border-color: #667eea;
59
+ }
60
+
61
+ .stats {
62
+ display: flex;
63
+ gap: 20px;
64
+ justify-content: center;
65
+ flex-wrap: wrap;
66
+ font-size: 14px;
67
+ color: #666;
68
+ }
69
+
70
+ .stat {
71
+ display: flex;
72
+ align-items: center;
73
+ gap: 5px;
74
+ }
75
+
76
+ .stat-value {
77
+ font-weight: bold;
78
+ color: #333;
79
+ font-size: 16px;
80
+ }
81
+
82
+ .container {
83
+ max-width: 1400px;
84
+ margin: 0 auto;
85
+ padding: 20px;
86
+ }
87
+
88
+ .category-section {
89
+ margin-bottom: 40px;
90
+ }
91
+
92
+ .category-header {
93
+ display: flex;
94
+ align-items: center;
95
+ gap: 10px;
96
+ margin-bottom: 15px;
97
+ padding-bottom: 10px;
98
+ border-bottom: 2px solid #667eea;
99
+ }
100
+
101
+ .category-title {
102
+ font-size: 20px;
103
+ font-weight: 600;
104
+ color: #333;
105
+ }
106
+
107
+ .category-count {
108
+ background: #667eea;
109
+ color: white;
110
+ padding: 4px 12px;
111
+ border-radius: 20px;
112
+ font-size: 12px;
113
+ font-weight: 600;
114
+ }
115
+
116
+ .icons-grid {
117
+ display: grid;
118
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
119
+ gap: 10px;
120
+ margin-bottom: 30px;
121
+ }
122
+
123
+ .icon-card {
124
+ background: white;
125
+ border: 1px solid #e0e0e0;
126
+ border-radius: 8px;
127
+ padding: 15px;
128
+ text-align: center;
129
+ cursor: pointer;
130
+ transition: all 0.3s ease;
131
+ min-height: 120px;
132
+ display: flex;
133
+ flex-direction: column;
134
+ align-items: center;
135
+ justify-content: center;
136
+ }
137
+
138
+ .icon-card:hover {
139
+ border-color: #667eea;
140
+ background: #f5f7ff;
141
+ transform: translateY(-4px);
142
+ box-shadow: 0 8px 16px rgba(102, 126, 234, 0.15);
143
+ }
144
+
145
+ .icon-card.hidden { display: none; }
146
+
147
+ .icon-glyph {
148
+ font-size: 40px;
149
+ margin-bottom: 8px;
150
+ min-height: 45px;
151
+ display: flex;
152
+ align-items: center;
153
+ justify-content: center;
154
+ }
155
+
156
+ .icon-name {
157
+ font-size: 11px;
158
+ color: #666;
159
+ word-break: break-word;
160
+ margin-bottom: 4px;
161
+ font-weight: 500;
162
+ }
163
+
164
+ .icon-code {
165
+ font-size: 10px;
166
+ color: #999;
167
+ font-family: 'Courier New', monospace;
168
+ background: #f5f5f5;
169
+ padding: 2px 6px;
170
+ border-radius: 3px;
171
+ }
172
+
173
+ .no-results {
174
+ text-align: center;
175
+ padding: 40px 20px;
176
+ color: #999;
177
+ font-size: 16px;
178
+ }
179
+
180
+ .copy-notice {
181
+ position: fixed;
182
+ bottom: 20px;
183
+ right: 20px;
184
+ background: #667eea;
185
+ color: white;
186
+ padding: 12px 20px;
187
+ border-radius: 6px;
188
+ opacity: 0;
189
+ pointer-events: none;
190
+ transition: opacity 0.3s;
191
+ }
192
+
193
+ .copy-notice.show { opacity: 1; }
194
+
195
+ footer {
196
+ background: #f0f0f0;
197
+ padding: 20px;
198
+ text-align: center;
199
+ color: #666;
200
+ font-size: 12px;
201
+ margin-top: 40px;
202
+ }
203
+
204
+ @media (max-width: 768px) {
205
+ header h1 { font-size: 24px; }
206
+ .icons-grid {
207
+ grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
208
+ }
209
+ .icon-glyph { font-size: 32px; }
210
+ .search-box {
211
+ flex-direction: column;
212
+ }
213
+ input[type="text"], select {
214
+ min-width: auto;
215
+ width: 100%;
216
+ }
217
+ }
218
+ </style>
219
+ </head>
220
+ <body>
221
+ <header>
222
+ <h1>🎨 AG Icons Gallery</h1>
223
+ <p>Complete collection of 362 professional icons across 20 categories</p>
224
+ </header>
225
+
226
+ <div class="controls">
227
+ <div class="search-box">
228
+ <input type="text" id="searchInput" placeholder="🔍 Search icons by name..." />
229
+ <select id="categoryFilter">
230
+ <option value="">All Categories</option>
231
+ </select>
232
+ </div>
233
+ <div class="stats">
234
+ <div class="stat">
235
+ <span>Total Icons:</span>
236
+ <span class="stat-value" id="totalCount">362</span>
237
+ </div>
238
+ <div class="stat">
239
+ <span>Showing:</span>
240
+ <span class="stat-value" id="showingCount">362</span>
241
+ </div>
242
+ <div class="stat">
243
+ <span>Categories:</span>
244
+ <span class="stat-value" id="categoryCount">20</span>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <div class="container" id="gallerContainer">
250
+ <div class="no-results">Loading icons...</div>
251
+ </div>
252
+
253
+ <footer>
254
+ <p>Click any icon to copy its CSS class name • All icons available in TTF, WOFF, WOFF2 formats</p>
255
+ </footer>
256
+
257
+ <div class="copy-notice" id="copyNotice">✓ Copied to clipboard!</div>
258
+
259
+ <script>
260
+ let allIcons = {};
261
+ let filteredIcons = {};
262
+
263
+ async function loadIcons() {
264
+ try {
265
+ const response = await fetch('ag-icons.json');
266
+ allIcons = await response.json();
267
+ filteredIcons = JSON.parse(JSON.stringify(allIcons));
268
+ renderGallery();
269
+ populateCategoryFilter();
270
+ } catch (error) {
271
+ console.error('Failed to load icons:', error);
272
+ document.getElementById('gallerContainer').innerHTML =
273
+ '<div class="no-results">Failed to load icons. Please ensure ag-icons.json is available.</div>';
274
+ }
275
+ }
276
+
277
+ function populateCategoryFilter() {
278
+ const select = document.getElementById('categoryFilter');
279
+ const categories = Object.keys(allIcons).sort();
280
+ categories.forEach(cat => {
281
+ const option = document.createElement('option');
282
+ option.value = cat;
283
+ option.textContent = `${cat} (${Object.keys(allIcons[cat]).length})`;
284
+ select.appendChild(option);
285
+ });
286
+ }
287
+
288
+ function renderGallery() {
289
+ const container = document.getElementById('gallerContainer');
290
+ let html = '';
291
+ let totalShown = 0;
292
+
293
+ const categories = Object.keys(filteredIcons).sort();
294
+
295
+ if (categories.length === 0) {
296
+ container.innerHTML = '<div class="no-results">No icons match your search.</div>';
297
+ document.getElementById('showingCount').textContent = '0';
298
+ return;
299
+ }
300
+
301
+ categories.forEach(category => {
302
+ const icons = filteredIcons[category];
303
+ const iconCount = Object.keys(icons).length;
304
+
305
+ if (iconCount === 0) return;
306
+
307
+ totalShown += iconCount;
308
+ html += `
309
+ <div class="category-section">
310
+ <div class="category-header">
311
+ <h2 class="category-title">${category}</h2>
312
+ <span class="category-count">${iconCount}</span>
313
+ </div>
314
+ <div class="icons-grid">
315
+ `;
316
+
317
+ Object.entries(icons).forEach(([name, data]) => {
318
+ const classname = data.class;
319
+ const glyph = data.glyph;
320
+ html += `
321
+ <div class="icon-card" onclick="copyToClipboard('${classname}')">
322
+ <div class="icon-glyph"><i class="${classname}"></i></div>
323
+ <div class="icon-name">${name}</div>
324
+ <div class="icon-code">${glyph}</div>
325
+ </div>
326
+ `;
327
+ });
328
+
329
+ html += `
330
+ </div>
331
+ </div>
332
+ `;
333
+ });
334
+
335
+ container.innerHTML = html;
336
+ document.getElementById('showingCount').textContent = totalShown;
337
+ }
338
+
339
+ function copyToClipboard(text) {
340
+ navigator.clipboard.writeText(text).then(() => {
341
+ const notice = document.getElementById('copyNotice');
342
+ notice.classList.add('show');
343
+ setTimeout(() => notice.classList.remove('show'), 2000);
344
+ });
345
+ }
346
+
347
+ function filterIcons() {
348
+ const searchTerm = document.getElementById('searchInput').value.toLowerCase();
349
+ const selectedCategory = document.getElementById('categoryFilter').value;
350
+
351
+ filteredIcons = {};
352
+
353
+ Object.entries(allIcons).forEach(([category, icons]) => {
354
+ if (selectedCategory && category !== selectedCategory) return;
355
+
356
+ const filtered = {};
357
+ Object.entries(icons).forEach(([name, data]) => {
358
+ if (searchTerm === '' || name.toLowerCase().includes(searchTerm) ||
359
+ data.class.toLowerCase().includes(searchTerm)) {
360
+ filtered[name] = data;
361
+ }
362
+ });
363
+
364
+ if (Object.keys(filtered).length > 0) {
365
+ filteredIcons[category] = filtered;
366
+ }
367
+ });
368
+
369
+ renderGallery();
370
+ }
371
+
372
+ document.getElementById('searchInput').addEventListener('input', filterIcons);
373
+ document.getElementById('categoryFilter').addEventListener('change', filterIcons);
374
+
375
+ // Load icons on page load
376
+ loadIcons();
377
+ </script>
378
+ </body>
379
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ag-design",
3
- "version": "1.0.81",
3
+ "version": "1.0.82",
4
4
  "description": "AG Design Core Framework",
5
5
  "repository": {
6
6
  "type": "git",