@ngstarter-ui/components 1.0.46 → 1.0.48

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 (11) hide show
  1. package/README.md +2 -3
  2. package/ai/component-registry.json +11 -19
  3. package/fesm2022/ngstarter-ui-components-core.mjs +545 -5
  4. package/fesm2022/ngstarter-ui-components-core.mjs.map +1 -1
  5. package/fesm2022/ngstarter-ui-components-paginator.mjs +2 -2
  6. package/fesm2022/ngstarter-ui-components-paginator.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/styles/_tokens.scss +284 -364
  9. package/styles/themes/modern.scss +210 -217
  10. package/types/ngstarter-ui-components-core.d.ts +9 -3
  11. package/styles/themes/enterprise.scss +0 -82
package/README.md CHANGED
@@ -41,7 +41,6 @@ Import one theme stylesheet once in your app styles:
41
41
  Other presets are available for faster admin styling:
42
42
 
43
43
  ```scss
44
- @use '@ngstarter-ui/components/styles/themes/enterprise';
45
44
  @use '@ngstarter-ui/components/styles/themes/modern';
46
45
  @use '@ngstarter-ui/components/styles/themes/compact';
47
46
  ```
@@ -60,7 +59,7 @@ import { provideNgsTheme } from '@ngstarter-ui/components/core';
60
59
  export const appConfig = {
61
60
  providers: [
62
61
  provideNgsTheme({
63
- theme: 'enterprise',
62
+ theme: 'modern',
64
63
  colorScheme: 'auto',
65
64
  density: 'compact',
66
65
  radius: 'small',
@@ -83,7 +82,7 @@ themeManager.changeColorScheme('dark');
83
82
  The same values can be controlled with document attributes:
84
83
 
85
84
  ```html
86
- <html data-ngs-theme="enterprise" data-ngs-density="compact" data-ngs-radius="small">
85
+ <html data-ngs-theme="modern" data-ngs-density="compact" data-ngs-radius="small">
87
86
  ```
88
87
 
89
88
  ## Component Demos
package/ai/component-registry.json CHANGED
@@ -2597,6 +2597,8 @@
2597
2597
  "FilterByPropertyPipe",
2598
2598
  "FocusElementDirective",
2599
2599
  "FormatFileSizePipe",
2600
+ "generateNgsThemeCssText",
2601
+ "generateNgsThemeProperties",
2600
2602
  "getActualTarget",
2601
2603
  "GlobalState",
2602
2604
  "GlobalStore",
@@ -2605,9 +2607,12 @@
2605
2607
  "injectElement",
2606
2608
  "isElement",
2607
2609
  "MutationObserverService",
2610
+ "NGS_GENERATED_THEME_PROPERTY_NAMES",
2608
2611
  "NGS_THEME_OPTIONS",
2609
2612
  "NgsColorScheme",
2613
+ "NgsGeneratedThemeColorScheme",
2610
2614
  "NgsRadius",
2615
+ "NgsThemeCssProperties",
2611
2616
  "NgsThemeName",
2612
2617
  "NgsThemeOptions",
2613
2618
  "Optgroup",
@@ -2868,38 +2873,24 @@
2868
2873
  "purpose": "Build operational data grids for records that users need to inspect, organize, select, and act on.",
2869
2874
  "useWhen": "Use for datatables and working data surfaces in admin screens, CRM and ERP records, users, orders, invoices, logs, tasks, assets, and any dataset where the table is the main interactive work surface. Choose DataView when users need row actions, selection, sorting, search/filter state, pagination, loading or empty states, column resizing, column visibility/order, pinned or sticky columns, custom cell renderers, refresh, snapshots, server-side data, or ngsDataViewActionBar. DataView is configured with columnDefs plus local data or a server-side datasource. Do not use for small static tables or simple read-only tabular content; use Table. Do not use as a card list, layout grid, chart widget, report summary, or form editor.",
2870
2875
  "exampleTopics": [
2871
- "Data View",
2872
- "Basic data view",
2873
- "Data view with selection",
2874
- "Data view with pagination",
2875
- "Embedded data view",
2876
- "Data view with sorting",
2877
- "Data view with resizable columns",
2878
- "Data view with column settings",
2879
- "Data view with column pinning",
2880
- "Data view with column pinning and pagination",
2881
- "Data view with custom cell renderers",
2882
- "Data view with action bar",
2883
- "Data view filter data",
2884
- "Data view loading state",
2885
- "Data view with sticky columns",
2886
- "Data view with server side data loading",
2887
- "Data view with server side data loading (empty state)",
2888
- "Data view with custom empty state",
2889
- "Data view refresh (client and server side)",
2890
2876
  "Basic dataview",
2891
2877
  "Data view column pinning",
2892
2878
  "Data view column settings",
2893
2879
  "Data view custom cell renderers",
2894
2880
  "Data view custom empty state",
2895
2881
  "Data view embedded",
2882
+ "Data view filter data",
2896
2883
  "Data view height test",
2884
+ "Data view loading state",
2897
2885
  "Data view pinning pagination",
2898
2886
  "Data view refresh",
2899
2887
  "Data view resizable columns",
2900
2888
  "Data view server side empty state",
2901
2889
  "Data view server side",
2902
2890
  "Data view sticky columns",
2891
+ "Data view with action bar",
2892
+ "Data view with pagination",
2893
+ "Data view with sorting",
2903
2894
  "Dataview with selection"
2904
2895
  ],
2905
2896
  "minimalExample": "<ngs-data-view [columnDefs]=\"columnDefs\"\n [data]=\"data\" class=\"h-[300px]\" />",
@@ -4386,6 +4377,7 @@
4386
4377
  "purpose": "Provide a full canvas-based image composition editor with layers, assets, text, backgrounds, effects, and snapshots.",
4387
4378
  "useWhen": "Use when users need to create or customize an image by composing multiple layers such as text, photos, uploaded assets, shapes, patterns, gradients, backgrounds, effects, opacity, typography, fit, flip, lock, and resize presets. Use for banner designers, social image builders, thumbnail editors, promo card creators, template-based creative tools, and embedded product design studios. Persist and restore work with ImageDesignerSnapshot, provide asset libraries with assetsDataSource or photosDataSource, handle uploads with uploadFn, and listen to snapshotChanged. Do not use for simple image viewing; use ImageViewer. Do not use for zoom/pan inspection; use ImageZoomViewer. Do not use for crop-only work; use Crop. Do not use for resize-only flows; use ImageResizer. Do not use for loading or missing-image placeholders; use ImagePlaceholder. Do not use for plain upload previews, color picking, or simple avatar/banner settings; use the smaller dedicated components or a normal form.",
4388
4379
  "exampleTopics": [
4380
+ "Visual Builder",
4389
4381
  "Image Designer"
4390
4382
  ],
4391
4383
  "minimalExample": null,
package/fesm2022/ngstarter-ui-components-core.mjs CHANGED
@@ -1157,6 +1157,538 @@ function provideNgsTheme(options = {}) {
1157
1157
  };
1158
1158
  }
1159
1159
 
1160
+ const NGS_GENERATED_THEME_PROPERTY_NAMES = [
1161
+ '--ngs-color-primary-seed',
1162
+ '--ngs-color-primary',
1163
+ '--ngs-color-on-primary',
1164
+ '--ngs-color-primary-container',
1165
+ '--ngs-color-on-primary-container',
1166
+ '--ngs-color-secondary',
1167
+ '--ngs-color-on-secondary',
1168
+ '--ngs-color-secondary-container',
1169
+ '--ngs-color-on-secondary-container',
1170
+ '--ngs-color-tertiary',
1171
+ '--ngs-color-on-tertiary',
1172
+ '--ngs-color-tertiary-container',
1173
+ '--ngs-color-on-tertiary-container',
1174
+ '--ngs-color-info',
1175
+ '--ngs-color-on-info',
1176
+ '--ngs-color-info-container',
1177
+ '--ngs-color-on-info-container',
1178
+ '--ngs-color-danger',
1179
+ '--ngs-color-on-danger',
1180
+ '--ngs-color-danger-container',
1181
+ '--ngs-color-on-danger-container',
1182
+ '--ngs-color-danger-container-lowest',
1183
+ '--ngs-color-danger-container-low',
1184
+ '--ngs-color-danger-container-high',
1185
+ '--ngs-color-danger-container-highest',
1186
+ '--ngs-color-success',
1187
+ '--ngs-color-on-success',
1188
+ '--ngs-color-success-container',
1189
+ '--ngs-color-on-success-container',
1190
+ '--ngs-color-warning',
1191
+ '--ngs-color-on-warning',
1192
+ '--ngs-color-warning-container',
1193
+ '--ngs-color-on-warning-container',
1194
+ '--ngs-color-orange-container',
1195
+ '--ngs-color-on-orange-container',
1196
+ '--ngs-color-green-500',
1197
+ '--ngs-color-background',
1198
+ '--ngs-color-on-background',
1199
+ '--ngs-color-surface',
1200
+ '--ngs-color-surface-bright',
1201
+ '--ngs-color-on-surface',
1202
+ '--ngs-color-on-surface-variant',
1203
+ '--ngs-color-neutral-50',
1204
+ '--ngs-color-neutral-100',
1205
+ '--ngs-color-neutral-200',
1206
+ '--ngs-color-neutral-300',
1207
+ '--ngs-color-neutral-400',
1208
+ '--ngs-color-neutral-500',
1209
+ '--ngs-color-neutral-600',
1210
+ '--ngs-color-neutral-650',
1211
+ '--ngs-color-neutral-700',
1212
+ '--ngs-color-neutral-800',
1213
+ '--ngs-color-neutral-900',
1214
+ '--ngs-color-neutral-950',
1215
+ '--ngs-color-surface-container-lowest',
1216
+ '--ngs-color-surface-container-low',
1217
+ '--ngs-color-surface-container',
1218
+ '--ngs-color-surface-container-high',
1219
+ '--ngs-color-surface-container-highest',
1220
+ '--ngs-color-outline',
1221
+ '--ngs-color-outline-variant',
1222
+ '--ngs-color-border',
1223
+ '--ngs-color-faint',
1224
+ '--ngs-color-subtle',
1225
+ '--ngs-color-muted',
1226
+ '--ngs-color-emphasis',
1227
+ '--ngs-color-strong',
1228
+ '--ngs-state-hover-bg',
1229
+ '--ngs-state-active-bg',
1230
+ '--ngs-state-selected-bg',
1231
+ '--ngs-state-selected-color',
1232
+ '--ngs-state-focus-ring',
1233
+ '--ngs-state-disabled-bg',
1234
+ '--ngs-state-disabled-color',
1235
+ '--ngs-state-disabled-border',
1236
+ '--ngs-color-primary-100',
1237
+ '--ngs-color-primary-200',
1238
+ '--ngs-color-primary-300',
1239
+ '--ngs-color-primary-400',
1240
+ '--ngs-color-primary-500',
1241
+ '--ngs-color-primary-600',
1242
+ '--ngs-color-secondary-100',
1243
+ '--ngs-color-secondary-200',
1244
+ '--ngs-color-secondary-300',
1245
+ '--ngs-color-secondary-400',
1246
+ '--ngs-color-secondary-fixed',
1247
+ '--ngs-color-on-secondary-fixed',
1248
+ '--ngs-color-tertiary-100',
1249
+ '--ngs-color-tertiary-200',
1250
+ '--ngs-color-tertiary-300',
1251
+ '--ngs-color-tertiary-700',
1252
+ '--ngs-color-tertiary-800',
1253
+ '--ngs-button-tonal-bg',
1254
+ '--ngs-button-tonal-color',
1255
+ '--ngs-button-outlined-border',
1256
+ '--ngs-field-border-color',
1257
+ '--ngs-field-border-focus-color',
1258
+ '--ngs-field-filled-bg',
1259
+ '--ngs-dropdown-item-selected-bg',
1260
+ '--ngs-dropdown-item-selected-color',
1261
+ '--ngs-nav-item-active-color',
1262
+ '--ngs-nav-item-active-bg',
1263
+ '--ngs-nav-item-active-icon-color',
1264
+ ];
1265
+ function generateNgsThemeProperties(primaryColor, colorScheme = 'light') {
1266
+ const seed = parseColor(primaryColor);
1267
+ if (!seed) {
1268
+ return {
1269
+ '--ngs-color-primary-seed': primaryColor,
1270
+ '--ngs-color-primary': primaryColor,
1271
+ '--ngs-color-on-primary': contrastColor('--ngs-color-primary'),
1272
+ };
1273
+ }
1274
+ return colorScheme === 'dark'
1275
+ ? generateDarkThemeProperties(seed)
1276
+ : generateLightThemeProperties(seed);
1277
+ }
1278
+ function generateNgsThemeCssText(primaryColor, colorScheme = 'light') {
1279
+ return Object.entries(generateNgsThemeProperties(primaryColor, colorScheme))
1280
+ .map(([name, value]) => `${name}: ${value};`)
1281
+ .join('\n');
1282
+ }
1283
+ function generateLightThemeProperties(seed) {
1284
+ const source = rgbToHsl(seed);
1285
+ const primary = toHex(seed);
1286
+ const primaryContainer = colorFromTone(source, 93, 0.62);
1287
+ const secondary = colorFromTone(source, 36, 0.36, -8);
1288
+ const secondaryContainer = colorFromTone(source, 92, 0.28, -8);
1289
+ const tertiary = colorFromTone(source, 42, 0.72, 48);
1290
+ const tertiaryContainer = colorFromTone(source, 92, 0.42, 48);
1291
+ const info = colorFromTone(source, 48, 0.9, 8);
1292
+ const infoContainer = colorFromTone(source, 92, 0.38, 8);
1293
+ const status = makeStatusColors('light');
1294
+ const neutral = makeNeutralScale(source, 'light');
1295
+ const border = colorFromTone(source, 90, 0.08);
1296
+ const outline = colorFromTone(source, 56, 0.12);
1297
+ const outlineVariant = colorFromTone(source, 86, 0.08);
1298
+ return withSharedGeneratedProperties({
1299
+ '--ngs-color-primary': primary,
1300
+ '--ngs-color-primary-seed': primary,
1301
+ '--ngs-color-on-primary': contrastColor('--ngs-color-primary'),
1302
+ '--ngs-color-primary-container': primaryContainer,
1303
+ '--ngs-color-on-primary-container': contrastColor('--ngs-color-primary-container'),
1304
+ '--ngs-color-secondary': secondary,
1305
+ '--ngs-color-on-secondary': contrastColor('--ngs-color-secondary'),
1306
+ '--ngs-color-secondary-container': secondaryContainer,
1307
+ '--ngs-color-on-secondary-container': contrastColor('--ngs-color-secondary-container'),
1308
+ '--ngs-color-tertiary': tertiary,
1309
+ '--ngs-color-on-tertiary': contrastColor('--ngs-color-tertiary'),
1310
+ '--ngs-color-tertiary-container': tertiaryContainer,
1311
+ '--ngs-color-on-tertiary-container': contrastColor('--ngs-color-tertiary-container'),
1312
+ '--ngs-color-info': info,
1313
+ '--ngs-color-on-info': contrastColor('--ngs-color-info'),
1314
+ '--ngs-color-info-container': infoContainer,
1315
+ '--ngs-color-on-info-container': contrastColor('--ngs-color-info-container'),
1316
+ ...status,
1317
+ '--ngs-color-background': neutral[0],
1318
+ '--ngs-color-on-background': contrastColor('--ngs-color-background'),
1319
+ '--ngs-color-surface': neutral[1],
1320
+ '--ngs-color-surface-bright': '#ffffff',
1321
+ '--ngs-color-on-surface': contrastColor('--ngs-color-surface'),
1322
+ '--ngs-color-on-surface-variant': neutral[6],
1323
+ '--ngs-color-neutral-50': neutral[0],
1324
+ '--ngs-color-neutral-100': neutral[1],
1325
+ '--ngs-color-neutral-200': neutral[2],
1326
+ '--ngs-color-neutral-300': neutral[3],
1327
+ '--ngs-color-neutral-400': neutral[4],
1328
+ '--ngs-color-neutral-500': neutral[5],
1329
+ '--ngs-color-neutral-600': neutral[6],
1330
+ '--ngs-color-neutral-650': neutral[7],
1331
+ '--ngs-color-neutral-700': neutral[8],
1332
+ '--ngs-color-neutral-800': neutral[9],
1333
+ '--ngs-color-neutral-900': neutral[10],
1334
+ '--ngs-color-neutral-950': neutral[11],
1335
+ '--ngs-color-surface-container-lowest': '#ffffff',
1336
+ '--ngs-color-surface-container-low': neutral[0],
1337
+ '--ngs-color-surface-container': neutral[1],
1338
+ '--ngs-color-surface-container-high': neutral[2],
1339
+ '--ngs-color-surface-container-highest': neutral[3],
1340
+ '--ngs-color-outline': outline,
1341
+ '--ngs-color-outline-variant': outlineVariant,
1342
+ '--ngs-color-border': border,
1343
+ '--ngs-color-faint': neutral[1],
1344
+ '--ngs-color-subtle': neutral[2],
1345
+ '--ngs-color-muted': neutral[3],
1346
+ '--ngs-color-emphasis': neutral[5],
1347
+ '--ngs-color-strong': neutral[6],
1348
+ '--ngs-state-selected-color': primary,
1349
+ '--ngs-button-tonal-bg': secondaryContainer,
1350
+ '--ngs-button-tonal-color': 'var(--ngs-color-on-secondary-container)',
1351
+ '--ngs-button-outlined-border': outlineVariant,
1352
+ '--ngs-field-border-color': outlineVariant,
1353
+ '--ngs-field-border-focus-color': primary,
1354
+ '--ngs-field-filled-bg': neutral[1],
1355
+ '--ngs-dropdown-item-selected-bg': primaryContainer,
1356
+ '--ngs-dropdown-item-selected-color': 'var(--ngs-color-on-primary-container)',
1357
+ '--ngs-nav-item-active-color': primary,
1358
+ '--ngs-nav-item-active-bg': primaryContainer,
1359
+ '--ngs-nav-item-active-icon-color': primary,
1360
+ });
1361
+ }
1362
+ function generateDarkThemeProperties(seed) {
1363
+ const source = rgbToHsl(seed);
1364
+ const primary = colorFromTone(source, 76, 0.82);
1365
+ const primaryContainer = colorFromTone(source, 28, 0.78);
1366
+ const secondary = colorFromTone(source, 78, 0.36, -8);
1367
+ const secondaryContainer = colorFromTone(source, 28, 0.3, -8);
1368
+ const tertiary = colorFromTone(source, 78, 0.62, 48);
1369
+ const tertiaryContainer = colorFromTone(source, 30, 0.52, 48);
1370
+ const info = colorFromTone(source, 76, 0.84, 8);
1371
+ const infoContainer = colorFromTone(source, 30, 0.62, 8);
1372
+ const status = makeStatusColors('dark');
1373
+ const neutral = makeNeutralScale(source, 'dark');
1374
+ const border = colorFromTone(source, 22, 0.08);
1375
+ const outline = colorFromTone(source, 66, 0.12);
1376
+ const outlineVariant = colorFromTone(source, 28, 0.08);
1377
+ return withSharedGeneratedProperties({
1378
+ '--ngs-color-primary': primary,
1379
+ '--ngs-color-primary-seed': toHex(seed),
1380
+ '--ngs-color-on-primary': contrastColor('--ngs-color-primary'),
1381
+ '--ngs-color-primary-container': primaryContainer,
1382
+ '--ngs-color-on-primary-container': contrastColor('--ngs-color-primary-container'),
1383
+ '--ngs-color-secondary': secondary,
1384
+ '--ngs-color-on-secondary': contrastColor('--ngs-color-secondary'),
1385
+ '--ngs-color-secondary-container': secondaryContainer,
1386
+ '--ngs-color-on-secondary-container': contrastColor('--ngs-color-secondary-container'),
1387
+ '--ngs-color-tertiary': tertiary,
1388
+ '--ngs-color-on-tertiary': contrastColor('--ngs-color-tertiary'),
1389
+ '--ngs-color-tertiary-container': tertiaryContainer,
1390
+ '--ngs-color-on-tertiary-container': contrastColor('--ngs-color-tertiary-container'),
1391
+ '--ngs-color-info': info,
1392
+ '--ngs-color-on-info': contrastColor('--ngs-color-info'),
1393
+ '--ngs-color-info-container': infoContainer,
1394
+ '--ngs-color-on-info-container': contrastColor('--ngs-color-info-container'),
1395
+ ...status,
1396
+ '--ngs-color-background': neutral[0],
1397
+ '--ngs-color-on-background': contrastColor('--ngs-color-background'),
1398
+ '--ngs-color-surface': neutral[1],
1399
+ '--ngs-color-surface-bright': neutral[2],
1400
+ '--ngs-color-on-surface': contrastColor('--ngs-color-surface'),
1401
+ '--ngs-color-on-surface-variant': neutral[8],
1402
+ '--ngs-color-neutral-50': neutral[0],
1403
+ '--ngs-color-neutral-100': neutral[1],
1404
+ '--ngs-color-neutral-200': neutral[2],
1405
+ '--ngs-color-neutral-300': neutral[3],
1406
+ '--ngs-color-neutral-400': neutral[4],
1407
+ '--ngs-color-neutral-500': neutral[5],
1408
+ '--ngs-color-neutral-600': neutral[6],
1409
+ '--ngs-color-neutral-650': neutral[7],
1410
+ '--ngs-color-neutral-700': neutral[8],
1411
+ '--ngs-color-neutral-800': neutral[9],
1412
+ '--ngs-color-neutral-900': neutral[10],
1413
+ '--ngs-color-neutral-950': neutral[11],
1414
+ '--ngs-color-surface-container-lowest': neutral[0],
1415
+ '--ngs-color-surface-container-low': neutral[1],
1416
+ '--ngs-color-surface-container': neutral[2],
1417
+ '--ngs-color-surface-container-high': neutral[3],
1418
+ '--ngs-color-surface-container-highest': neutral[4],
1419
+ '--ngs-color-outline': outline,
1420
+ '--ngs-color-outline-variant': outlineVariant,
1421
+ '--ngs-color-border': border,
1422
+ '--ngs-color-faint': neutral[1],
1423
+ '--ngs-color-subtle': neutral[2],
1424
+ '--ngs-color-muted': neutral[3],
1425
+ '--ngs-color-emphasis': neutral[7],
1426
+ '--ngs-color-strong': neutral[9],
1427
+ '--ngs-state-selected-color': primary,
1428
+ '--ngs-button-tonal-bg': secondaryContainer,
1429
+ '--ngs-button-tonal-color': 'var(--ngs-color-on-secondary-container)',
1430
+ '--ngs-button-outlined-border': outlineVariant,
1431
+ '--ngs-field-border-color': outlineVariant,
1432
+ '--ngs-field-border-focus-color': primary,
1433
+ '--ngs-field-filled-bg': neutral[2],
1434
+ '--ngs-dropdown-item-selected-bg': primaryContainer,
1435
+ '--ngs-dropdown-item-selected-color': 'var(--ngs-color-on-primary-container)',
1436
+ '--ngs-nav-item-active-color': primary,
1437
+ '--ngs-nav-item-active-bg': primaryContainer,
1438
+ '--ngs-nav-item-active-icon-color': primary,
1439
+ });
1440
+ }
1441
+ function withSharedGeneratedProperties(properties) {
1442
+ return {
1443
+ ...properties,
1444
+ '--ngs-state-hover-bg': 'color-mix(in srgb, var(--ngs-color-on-surface), transparent 94%)',
1445
+ '--ngs-state-active-bg': 'color-mix(in srgb, var(--ngs-color-on-surface), transparent 90%)',
1446
+ '--ngs-state-selected-bg': 'color-mix(in srgb, var(--ngs-color-primary), transparent 88%)',
1447
+ '--ngs-state-focus-ring': 'var(--ngs-field-border-focus-color)',
1448
+ '--ngs-state-disabled-bg': 'color-mix(in srgb, var(--ngs-color-on-surface), transparent 95%)',
1449
+ '--ngs-state-disabled-color': 'color-mix(in srgb, var(--ngs-color-on-surface), transparent 62%)',
1450
+ '--ngs-state-disabled-border': 'color-mix(in srgb, var(--ngs-color-on-surface), transparent 90%)',
1451
+ '--ngs-color-primary-100': 'color-mix(in srgb, var(--ngs-color-primary), transparent 90%)',
1452
+ '--ngs-color-primary-200': 'color-mix(in srgb, var(--ngs-color-primary), transparent 80%)',
1453
+ '--ngs-color-primary-300': 'color-mix(in srgb, var(--ngs-color-primary), transparent 70%)',
1454
+ '--ngs-color-primary-400': 'color-mix(in srgb, var(--ngs-color-primary), transparent 60%)',
1455
+ '--ngs-color-primary-500': 'color-mix(in srgb, var(--ngs-color-primary), transparent 50%)',
1456
+ '--ngs-color-primary-600': 'color-mix(in srgb, var(--ngs-color-primary), transparent 40%)',
1457
+ '--ngs-color-secondary-100': 'color-mix(in srgb, var(--ngs-color-secondary), transparent 90%)',
1458
+ '--ngs-color-secondary-200': 'color-mix(in srgb, var(--ngs-color-secondary), transparent 80%)',
1459
+ '--ngs-color-secondary-300': 'color-mix(in srgb, var(--ngs-color-secondary), transparent 70%)',
1460
+ '--ngs-color-secondary-400': 'color-mix(in srgb, var(--ngs-color-secondary), transparent 60%)',
1461
+ '--ngs-color-secondary-fixed': 'var(--ngs-color-secondary-container)',
1462
+ '--ngs-color-on-secondary-fixed': 'var(--ngs-color-on-secondary-container)',
1463
+ '--ngs-color-tertiary-100': 'color-mix(in srgb, var(--ngs-color-tertiary), transparent 90%)',
1464
+ '--ngs-color-tertiary-200': 'color-mix(in srgb, var(--ngs-color-tertiary), transparent 80%)',
1465
+ '--ngs-color-tertiary-300': 'color-mix(in srgb, var(--ngs-color-tertiary), transparent 70%)',
1466
+ '--ngs-color-tertiary-700': 'color-mix(in srgb, var(--ngs-color-tertiary), #000000 35%)',
1467
+ '--ngs-color-tertiary-800': 'color-mix(in srgb, var(--ngs-color-tertiary), #000000 50%)',
1468
+ };
1469
+ }
1470
+ function makeNeutralScale(source, colorScheme) {
1471
+ const saturation = Math.min(source.s * 0.12, 8);
1472
+ const lightness = colorScheme === 'dark'
1473
+ ? [5, 8, 12, 17, 24, 39, 55, 64, 73, 84, 92, 97]
1474
+ : [98, 96, 91, 84, 72, 56, 43, 36, 28, 19, 11, 4];
1475
+ return lightness.map(l => hslToHex({ h: source.h, s: saturation, l }));
1476
+ }
1477
+ function makeStatusColors(colorScheme) {
1478
+ if (colorScheme === 'dark') {
1479
+ return {
1480
+ '--ngs-color-danger': '#f87171',
1481
+ '--ngs-color-on-danger': contrastColor('--ngs-color-danger'),
1482
+ '--ngs-color-danger-container': '#7f1d1d',
1483
+ '--ngs-color-on-danger-container': contrastColor('--ngs-color-danger-container'),
1484
+ '--ngs-color-danger-container-lowest': '#1f0707',
1485
+ '--ngs-color-danger-container-low': '#2f0b0b',
1486
+ '--ngs-color-danger-container-high': '#5f1717',
1487
+ '--ngs-color-danger-container-highest': '#7f1d1d',
1488
+ '--ngs-color-success': '#4ade80',
1489
+ '--ngs-color-on-success': contrastColor('--ngs-color-success'),
1490
+ '--ngs-color-success-container': '#166534',
1491
+ '--ngs-color-on-success-container': contrastColor('--ngs-color-success-container'),
1492
+ '--ngs-color-warning': '#fbbf24',
1493
+ '--ngs-color-on-warning': contrastColor('--ngs-color-warning'),
1494
+ '--ngs-color-warning-container': '#78350f',
1495
+ '--ngs-color-on-warning-container': contrastColor('--ngs-color-warning-container'),
1496
+ '--ngs-color-orange-container': '#78350f',
1497
+ '--ngs-color-on-orange-container': contrastColor('--ngs-color-orange-container'),
1498
+ '--ngs-color-green-500': '#4ade80',
1499
+ };
1500
+ }
1501
+ return {
1502
+ '--ngs-color-danger': '#dc2626',
1503
+ '--ngs-color-on-danger': contrastColor('--ngs-color-danger'),
1504
+ '--ngs-color-danger-container': '#fee2e2',
1505
+ '--ngs-color-on-danger-container': contrastColor('--ngs-color-danger-container'),
1506
+ '--ngs-color-danger-container-lowest': '#fffafa',
1507
+ '--ngs-color-danger-container-low': '#fef2f2',
1508
+ '--ngs-color-danger-container-high': '#fecaca',
1509
+ '--ngs-color-danger-container-highest': '#fca5a5',
1510
+ '--ngs-color-success': '#16a34a',
1511
+ '--ngs-color-on-success': contrastColor('--ngs-color-success'),
1512
+ '--ngs-color-success-container': '#dcfce7',
1513
+ '--ngs-color-on-success-container': contrastColor('--ngs-color-success-container'),
1514
+ '--ngs-color-warning': '#d97706',
1515
+ '--ngs-color-on-warning': contrastColor('--ngs-color-warning'),
1516
+ '--ngs-color-warning-container': '#fef3c7',
1517
+ '--ngs-color-on-warning-container': contrastColor('--ngs-color-warning-container'),
1518
+ '--ngs-color-orange-container': '#fef3c7',
1519
+ '--ngs-color-on-orange-container': contrastColor('--ngs-color-orange-container'),
1520
+ '--ngs-color-green-500': '#16a34a',
1521
+ };
1522
+ }
1523
+ function colorFromTone(source, lightness, saturationMultiplier = 1, hueShift = 0) {
1524
+ return hslToHex({
1525
+ h: normalizeHue(source.h + hueShift),
1526
+ s: clamp(source.s * saturationMultiplier, 8, 92),
1527
+ l: lightness,
1528
+ });
1529
+ }
1530
+ function contrastColor(propertyName) {
1531
+ return `contrast-color(var(${propertyName}))`;
1532
+ }
1533
+ function parseColor(color) {
1534
+ const value = color.trim().toLowerCase();
1535
+ if (value.startsWith('#')) {
1536
+ return parseHexColor(value);
1537
+ }
1538
+ if (value.startsWith('rgb(') || value.startsWith('rgba(')) {
1539
+ return parseRgbColor(value);
1540
+ }
1541
+ if (value.startsWith('hsl(') || value.startsWith('hsla(')) {
1542
+ return parseHslColor(value);
1543
+ }
1544
+ return null;
1545
+ }
1546
+ function parseHexColor(value) {
1547
+ const hex = value.slice(1);
1548
+ if (!/^[\da-f]+$/i.test(hex)) {
1549
+ return null;
1550
+ }
1551
+ if (hex.length === 3 || hex.length === 4) {
1552
+ return {
1553
+ r: parseInt(hex[0] + hex[0], 16),
1554
+ g: parseInt(hex[1] + hex[1], 16),
1555
+ b: parseInt(hex[2] + hex[2], 16),
1556
+ };
1557
+ }
1558
+ if (hex.length === 6 || hex.length === 8) {
1559
+ return {
1560
+ r: parseInt(hex.slice(0, 2), 16),
1561
+ g: parseInt(hex.slice(2, 4), 16),
1562
+ b: parseInt(hex.slice(4, 6), 16),
1563
+ };
1564
+ }
1565
+ return null;
1566
+ }
1567
+ function parseRgbColor(value) {
1568
+ const matches = value.match(/rgba?\(([^)]+)\)/);
1569
+ if (!matches) {
1570
+ return null;
1571
+ }
1572
+ const channels = matches[1]
1573
+ .replace(/\s*\/\s*[\d.]+%?\s*$/, '')
1574
+ .split(/[\s,]+/)
1575
+ .filter(Boolean)
1576
+ .slice(0, 3)
1577
+ .map(channel => parseFloat(channel));
1578
+ if (channels.length < 3 || channels.some(Number.isNaN)) {
1579
+ return null;
1580
+ }
1581
+ return {
1582
+ r: clamp(Math.round(channels[0]), 0, 255),
1583
+ g: clamp(Math.round(channels[1]), 0, 255),
1584
+ b: clamp(Math.round(channels[2]), 0, 255),
1585
+ };
1586
+ }
1587
+ function parseHslColor(value) {
1588
+ const matches = value.match(/hsla?\(([^)]+)\)/);
1589
+ if (!matches) {
1590
+ return null;
1591
+ }
1592
+ const channels = matches[1]
1593
+ .replace(/\s*\/\s*[\d.]+%?\s*$/, '')
1594
+ .split(/[\s,]+/)
1595
+ .filter(Boolean)
1596
+ .slice(0, 3);
1597
+ if (channels.length < 3) {
1598
+ return null;
1599
+ }
1600
+ const h = parseFloat(channels[0]);
1601
+ const s = parseFloat(channels[1]);
1602
+ const l = parseFloat(channels[2]);
1603
+ if ([h, s, l].some(Number.isNaN)) {
1604
+ return null;
1605
+ }
1606
+ return hslToRgb({ h, s, l });
1607
+ }
1608
+ function rgbToHsl({ r, g, b }) {
1609
+ const red = r / 255;
1610
+ const green = g / 255;
1611
+ const blue = b / 255;
1612
+ const max = Math.max(red, green, blue);
1613
+ const min = Math.min(red, green, blue);
1614
+ const delta = max - min;
1615
+ const lightness = (max + min) / 2;
1616
+ if (delta === 0) {
1617
+ return { h: 0, s: 0, l: lightness * 100 };
1618
+ }
1619
+ const saturation = delta / (1 - Math.abs(2 * lightness - 1));
1620
+ let hue = 0;
1621
+ if (max === red) {
1622
+ hue = ((green - blue) / delta) % 6;
1623
+ }
1624
+ else if (max === green) {
1625
+ hue = (blue - red) / delta + 2;
1626
+ }
1627
+ else {
1628
+ hue = (red - green) / delta + 4;
1629
+ }
1630
+ return {
1631
+ h: normalizeHue(hue * 60),
1632
+ s: saturation * 100,
1633
+ l: lightness * 100,
1634
+ };
1635
+ }
1636
+ function hslToRgb({ h, s, l }) {
1637
+ const saturation = clamp(s, 0, 100) / 100;
1638
+ const lightness = clamp(l, 0, 100) / 100;
1639
+ const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
1640
+ const hue = normalizeHue(h) / 60;
1641
+ const x = chroma * (1 - Math.abs((hue % 2) - 1));
1642
+ const match = lightness - chroma / 2;
1643
+ let red = 0;
1644
+ let green = 0;
1645
+ let blue = 0;
1646
+ if (hue >= 0 && hue < 1) {
1647
+ red = chroma;
1648
+ green = x;
1649
+ }
1650
+ else if (hue >= 1 && hue < 2) {
1651
+ red = x;
1652
+ green = chroma;
1653
+ }
1654
+ else if (hue >= 2 && hue < 3) {
1655
+ green = chroma;
1656
+ blue = x;
1657
+ }
1658
+ else if (hue >= 3 && hue < 4) {
1659
+ green = x;
1660
+ blue = chroma;
1661
+ }
1662
+ else if (hue >= 4 && hue < 5) {
1663
+ red = x;
1664
+ blue = chroma;
1665
+ }
1666
+ else if (hue >= 5 && hue < 6) {
1667
+ red = chroma;
1668
+ blue = x;
1669
+ }
1670
+ return {
1671
+ r: Math.round((red + match) * 255),
1672
+ g: Math.round((green + match) * 255),
1673
+ b: Math.round((blue + match) * 255),
1674
+ };
1675
+ }
1676
+ function hslToHex(hsl) {
1677
+ return toHex(hslToRgb(hsl));
1678
+ }
1679
+ function toHex({ r, g, b }) {
1680
+ return `#${toHexChannel(r)}${toHexChannel(g)}${toHexChannel(b)}`;
1681
+ }
1682
+ function toHexChannel(value) {
1683
+ return clamp(Math.round(value), 0, 255).toString(16).padStart(2, '0');
1684
+ }
1685
+ function normalizeHue(hue) {
1686
+ return ((hue % 360) + 360) % 360;
1687
+ }
1688
+ function clamp(value, min, max) {
1689
+ return Math.min(max, Math.max(min, value));
1690
+ }
1691
+
1160
1692
  class ThemeManagerService {
1161
1693
  _document = inject(DOCUMENT);
1162
1694
  _window = this._document.defaultView;
@@ -1297,11 +1829,19 @@ class ThemeManagerService {
1297
1829
  root.setAttribute('data-ngs-theme', this._theme());
1298
1830
  root.setAttribute('data-ngs-color-scheme', this._colorScheme());
1299
1831
  root.setAttribute('data-ngs-radius', this._radius());
1300
- if (primaryColor && root.style) {
1301
- root.style.setProperty('--ngs-color-primary', primaryColor);
1832
+ if (!root.style) {
1833
+ return;
1834
+ }
1835
+ if (primaryColor) {
1836
+ for (const name of NGS_GENERATED_THEME_PROPERTY_NAMES) {
1837
+ root.style.removeProperty(name);
1838
+ }
1839
+ root.style.setProperty('--ngs-color-primary-seed', primaryColor);
1302
1840
  }
1303
- else if (root.style) {
1304
- root.style.removeProperty('--ngs-color-primary');
1841
+ else {
1842
+ for (const name of NGS_GENERATED_THEME_PROPERTY_NAMES) {
1843
+ root.style.removeProperty(name);
1844
+ }
1305
1845
  }
1306
1846
  }
1307
1847
  get _storageKey() {
@@ -1431,5 +1971,5 @@ function typedFromEvent(target, event, options) {
1431
1971
  * Generated bundle index. Do not edit.
1432
1972
  */
1433
1973
 
1434
- export { AUTOFOCUSABLE, AnalyticsService, AutoFocusDirective, DebounceTimeDirective, ENVIRONMENT, EnvironmentService, ErrorStateMatcher, FilterByPropertyPipe, FocusElementDirective, FormatFileSizePipe, GlobalStore, InactivityTrackerService, InitialsPipe, MutationObserverService, NGS_THEME_OPTIONS, OrderByPipe, PageTitleStrategyService, RIPPLE_GLOBAL_OPTIONS, ResizeObserverService, Ripple, RippleRef, RippleRenderer, RippleState, SafeHtmlPipe, SafeResourceUrlPipe, ScreenLoaderService, SearchByPropertyPipe, SeoService, ShowOnDirtyErrorStateMatcher, SoundEffectDirective, TextareaAutoSize, ThemeManagerService, arrayShallowEquals, defaultRippleAnimationConfig, getActualTarget, injectElement, isElement, provideNgsTheme, px, typedFromEvent, zonefreeScheduler };
1974
+ export { AUTOFOCUSABLE, AnalyticsService, AutoFocusDirective, DebounceTimeDirective, ENVIRONMENT, EnvironmentService, ErrorStateMatcher, FilterByPropertyPipe, FocusElementDirective, FormatFileSizePipe, GlobalStore, InactivityTrackerService, InitialsPipe, MutationObserverService, NGS_GENERATED_THEME_PROPERTY_NAMES, NGS_THEME_OPTIONS, OrderByPipe, PageTitleStrategyService, RIPPLE_GLOBAL_OPTIONS, ResizeObserverService, Ripple, RippleRef, RippleRenderer, RippleState, SafeHtmlPipe, SafeResourceUrlPipe, ScreenLoaderService, SearchByPropertyPipe, SeoService, ShowOnDirtyErrorStateMatcher, SoundEffectDirective, TextareaAutoSize, ThemeManagerService, arrayShallowEquals, defaultRippleAnimationConfig, generateNgsThemeCssText, generateNgsThemeProperties, getActualTarget, injectElement, isElement, provideNgsTheme, px, typedFromEvent, zonefreeScheduler };
1435
1975
  //# sourceMappingURL=ngstarter-ui-components-core.mjs.map