@ngstarter-ui/components 1.0.46 → 1.0.47
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/README.md +2 -3
- package/ai/component-registry.json +11 -19
- package/fesm2022/ngstarter-ui-components-core.mjs +567 -5
- package/fesm2022/ngstarter-ui-components-core.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-paginator.mjs +2 -2
- package/fesm2022/ngstarter-ui-components-paginator.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/_tokens.scss +223 -303
- package/styles/themes/modern.scss +174 -181
- package/types/ngstarter-ui-components-core.d.ts +9 -3
- 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: '
|
|
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="
|
|
85
|
+
<html data-ngs-theme="modern" data-ngs-density="compact" data-ngs-radius="small">
|
|
87
86
|
```
|
|
88
87
|
|
|
89
88
|
## Component Demos
|
|
@@ -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,
|