invensys-ng 21.0.1 → 21.3.2

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/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "invensys-ng",
3
- "version": "21.0.1",
3
+ "version": "21.3.2",
4
4
  "repository": {
5
5
  "type": "git",
6
- "url": "git+https://github.com/ulbrichFrauendorf/invensys-ng.git"
6
+ "url": "https://github.com/ulbrichFrauendorf/invensys-ng"
7
7
  },
8
8
  "peerDependencies": {
9
9
  "@angular/common": "^21.2.12",
@@ -25,5 +25,6 @@
25
25
  "types": "./types/invensys-ng.d.ts",
26
26
  "default": "./fesm2022/invensys-ng.mjs"
27
27
  }
28
- }
28
+ },
29
+ "type": "module"
29
30
  }
@@ -1,8 +1,8 @@
1
- /* General */
2
- $scale: 14px; /* main font size */
3
- $borderRadius: 8px; /* border radius of layout element e.g. card, sidebar */
4
- $componentBorderRadius: 4px; /* border radius of components e.g. buttons, inputs */
5
- $transitionDuration: 0.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */
6
- /* Standardized component input height (useful for input-text, chips, select triggers)
7
- Set this to match the visual height of inputs across the library. */
8
- $component-input-height: 42px; /* default: matches float-label input (14px font + 14px padding top+bottom) */
1
+ /* General */
2
+ $scale: 14px; /* main font size */
3
+ $borderRadius: 8px; /* border radius of layout element e.g. card, sidebar */
4
+ $componentBorderRadius: 4px; /* border radius of components e.g. buttons, inputs */
5
+ $transitionDuration: 0.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */
6
+ /* Standardized component input height (useful for input-text, chips, select triggers)
7
+ Set this to match the visual height of inputs across the library. */
8
+ $component-input-height: 42px; /* default: matches float-label input (14px font + 14px padding top+bottom) */
@@ -1,158 +1,158 @@
1
- // This file contains the color variables used throughout the application.
2
- $colors: (
3
- "blue": (
4
- 50: #f5f9ff,
5
- 100: #d0e1fd,
6
- 200: #abc9fb,
7
- 300: #85b2f9,
8
- 400: #609af8,
9
- 500: #3b82f6,
10
- 600: #326fd1,
11
- 700: #295bac,
12
- 800: #204887,
13
- 900: #183462,
14
- ),
15
- "green": (
16
- 50: #f4fcf7,
17
- 100: #caf1d8,
18
- 200: #a0e6ba,
19
- 300: #76db9b,
20
- 400: #4cd07d,
21
- 500: #22c55e,
22
- 600: #1da750,
23
- 700: #188a42,
24
- 800: #136c34,
25
- 900: #0e4f26,
26
- ),
27
- "yellow": (
28
- 50: #fefbf3,
29
- 100: #faedc4,
30
- 200: #f6de95,
31
- 300: #f2d066,
32
- 400: #eec137,
33
- 500: #eab308,
34
- 600: #c79807,
35
- 700: #a47d06,
36
- 800: #816204,
37
- 900: #5e4803,
38
- ),
39
- "cyan": (
40
- 50: #f3fbfd,
41
- 100: #c3edf5,
42
- 200: #94e0ed,
43
- 300: #65d2e4,
44
- 400: #35c4dc,
45
- 500: #06b6d4,
46
- 600: #059bb4,
47
- 700: #047f94,
48
- 800: #036475,
49
- 900: #024955,
50
- ),
51
- "pink": (
52
- 50: #fef6fa,
53
- 100: #fad3e7,
54
- 200: #f7b0d3,
55
- 300: #f38ec0,
56
- 400: #f06bac,
57
- 500: #ec4899,
58
- 600: #c93d82,
59
- 700: #a5326b,
60
- 800: #822854,
61
- 900: #5e1d3d,
62
- ),
63
- "indigo": (
64
- 50: #f7f7fe,
65
- 100: #dadafc,
66
- 200: #bcbdf9,
67
- 300: #9ea0f6,
68
- 400: #8183f4,
69
- 500: #6366f1,
70
- 600: #5457cd,
71
- 700: #4547a9,
72
- 800: #363885,
73
- 900: #282960,
74
- ),
75
- "teal": (
76
- 50: #f3fbfb,
77
- 100: #c7eeea,
78
- 200: #9ae0d9,
79
- 300: #6dd3c8,
80
- 400: #41c5b7,
81
- 500: #14b8a6,
82
- 600: #119c8d,
83
- 700: #0e8174,
84
- 800: #0b655b,
85
- 900: #084a42,
86
- ),
87
- "orange": (
88
- 50: #fff7ed,
89
- 100: #ffedd5,
90
- 200: #fed7aa,
91
- 300: #fdba74,
92
- 400: #fb923c,
93
- 500: #f59e0b,
94
- 600: #d97706,
95
- 700: #b45309,
96
- 800: #92400e,
97
- 900: #78350f,
98
- ),
99
- "bluegray": (
100
- 50: #f7f8f9,
101
- 100: #dadee3,
102
- 200: #bcc3cd,
103
- 300: #9fa9b7,
104
- 400: #818ea1,
105
- 500: #64748b,
106
- 600: #556376,
107
- 700: #465161,
108
- 800: #37404c,
109
- 900: #282e38,
110
- ),
111
- "purple": (
112
- 50: #fbf7ff,
113
- 100: #ead6fd,
114
- 200: #dab6fc,
115
- 300: #c996fa,
116
- 400: #b975f9,
117
- 500: #a855f7,
118
- 600: #8f48d2,
119
- 700: #763cad,
120
- 800: #5c2f88,
121
- 900: #432263,
122
- ),
123
- "red": (
124
- 50: #fff5f5,
125
- 100: #ffd0ce,
126
- 200: #ffaca7,
127
- 300: #ff8780,
128
- 400: #ff6259,
129
- 500: #ff3d32,
130
- 600: #d9342b,
131
- 700: #b32b23,
132
- 800: #8c221c,
133
- 900: #661814,
134
- ),
135
- "sky": (
136
- base: #38bdf8,
137
- dark: #0ea5e9,
138
- darker: #0369a1,
139
- light: #7dd3fc,
140
- lighter: #e0f2fe,
141
- contrast: #fff,
142
- contrast-dark: #0f172a,
143
- ),
144
- "gray": (
145
- 0: #ffffff,
146
- 50: #f8fafc,
147
- 100: #f1f5f9,
148
- 200: #e2e8f0,
149
- 300: #cbd5e1,
150
- 400: #94a3b8,
151
- 500: #64748b,
152
- 600: #475569,
153
- 700: #334155,
154
- 800: #1e293b,
155
- 900: #111827,
156
- 950: #020617,
157
- ),
158
- );
1
+ // This file contains the color variables used throughout the application.
2
+ $colors: (
3
+ "blue": (
4
+ 50: #f5f9ff,
5
+ 100: #d0e1fd,
6
+ 200: #abc9fb,
7
+ 300: #85b2f9,
8
+ 400: #609af8,
9
+ 500: #3b82f6,
10
+ 600: #326fd1,
11
+ 700: #295bac,
12
+ 800: #204887,
13
+ 900: #183462,
14
+ ),
15
+ "green": (
16
+ 50: #f4fcf7,
17
+ 100: #caf1d8,
18
+ 200: #a0e6ba,
19
+ 300: #76db9b,
20
+ 400: #4cd07d,
21
+ 500: #22c55e,
22
+ 600: #1da750,
23
+ 700: #188a42,
24
+ 800: #136c34,
25
+ 900: #0e4f26,
26
+ ),
27
+ "yellow": (
28
+ 50: #fefbf3,
29
+ 100: #faedc4,
30
+ 200: #f6de95,
31
+ 300: #f2d066,
32
+ 400: #eec137,
33
+ 500: #eab308,
34
+ 600: #c79807,
35
+ 700: #a47d06,
36
+ 800: #816204,
37
+ 900: #5e4803,
38
+ ),
39
+ "cyan": (
40
+ 50: #f3fbfd,
41
+ 100: #c3edf5,
42
+ 200: #94e0ed,
43
+ 300: #65d2e4,
44
+ 400: #35c4dc,
45
+ 500: #06b6d4,
46
+ 600: #059bb4,
47
+ 700: #047f94,
48
+ 800: #036475,
49
+ 900: #024955,
50
+ ),
51
+ "pink": (
52
+ 50: #fef6fa,
53
+ 100: #fad3e7,
54
+ 200: #f7b0d3,
55
+ 300: #f38ec0,
56
+ 400: #f06bac,
57
+ 500: #ec4899,
58
+ 600: #c93d82,
59
+ 700: #a5326b,
60
+ 800: #822854,
61
+ 900: #5e1d3d,
62
+ ),
63
+ "indigo": (
64
+ 50: #f7f7fe,
65
+ 100: #dadafc,
66
+ 200: #bcbdf9,
67
+ 300: #9ea0f6,
68
+ 400: #8183f4,
69
+ 500: #6366f1,
70
+ 600: #5457cd,
71
+ 700: #4547a9,
72
+ 800: #363885,
73
+ 900: #282960,
74
+ ),
75
+ "teal": (
76
+ 50: #f3fbfb,
77
+ 100: #c7eeea,
78
+ 200: #9ae0d9,
79
+ 300: #6dd3c8,
80
+ 400: #41c5b7,
81
+ 500: #14b8a6,
82
+ 600: #119c8d,
83
+ 700: #0e8174,
84
+ 800: #0b655b,
85
+ 900: #084a42,
86
+ ),
87
+ "orange": (
88
+ 50: #fff7ed,
89
+ 100: #ffedd5,
90
+ 200: #fed7aa,
91
+ 300: #fdba74,
92
+ 400: #fb923c,
93
+ 500: #f59e0b,
94
+ 600: #d97706,
95
+ 700: #b45309,
96
+ 800: #92400e,
97
+ 900: #78350f,
98
+ ),
99
+ "bluegray": (
100
+ 50: #f7f8f9,
101
+ 100: #dadee3,
102
+ 200: #bcc3cd,
103
+ 300: #9fa9b7,
104
+ 400: #818ea1,
105
+ 500: #64748b,
106
+ 600: #556376,
107
+ 700: #465161,
108
+ 800: #37404c,
109
+ 900: #282e38,
110
+ ),
111
+ "purple": (
112
+ 50: #fbf7ff,
113
+ 100: #ead6fd,
114
+ 200: #dab6fc,
115
+ 300: #c996fa,
116
+ 400: #b975f9,
117
+ 500: #a855f7,
118
+ 600: #8f48d2,
119
+ 700: #763cad,
120
+ 800: #5c2f88,
121
+ 900: #432263,
122
+ ),
123
+ "red": (
124
+ 50: #fff5f5,
125
+ 100: #ffd0ce,
126
+ 200: #ffaca7,
127
+ 300: #ff8780,
128
+ 400: #ff6259,
129
+ 500: #ff3d32,
130
+ 600: #d9342b,
131
+ 700: #b32b23,
132
+ 800: #8c221c,
133
+ 900: #661814,
134
+ ),
135
+ "sky": (
136
+ base: #38bdf8,
137
+ dark: #0ea5e9,
138
+ darker: #0369a1,
139
+ light: #7dd3fc,
140
+ lighter: #e0f2fe,
141
+ contrast: #fff,
142
+ contrast-dark: #0f172a,
143
+ ),
144
+ "gray": (
145
+ 0: #ffffff,
146
+ 50: #f8fafc,
147
+ 100: #f1f5f9,
148
+ 200: #e2e8f0,
149
+ 300: #cbd5e1,
150
+ 400: #94a3b8,
151
+ 500: #64748b,
152
+ 600: #475569,
153
+ 700: #334155,
154
+ 800: #1e293b,
155
+ 900: #111827,
156
+ 950: #020617,
157
+ ),
158
+ );
@@ -1,38 +1,38 @@
1
- $color-white: #ffffff;
2
- $color-black: #000000;
3
- $color-primary: var(--color-primary);
4
- $color-secondary: var(--color-secondary);
5
- $color-tertiary: var(--color-tertiary);
6
- $color-success: var(--color-success);
7
- $color-info: var(--color-info);
8
- $color-warning: var(--color-warning);
9
- $color-danger: var(--color-danger);
10
- $color-contrast: var(--color-contrast);
11
- $color-contrast-inverse: var(--color-contrast-inverse);
12
-
13
- $color-overlay-background: rgba(0, 0, 0, 0.4);
14
- $color-component-background: var(--color-component-background);
15
- $color-component-background-secondary: var(
16
- --color-component-background-secondary
17
- );
18
- $color-component-background-solid: var(--color-component-background-solid);
19
- $color-disabled-background: var(--color-disabled-background);
20
- $color-disabled-border: var(--color-disabled-border);
21
-
22
- $color-surface-ground: var(--surface-ground);
23
- $color-surface-elevated: var(--surface-elevated);
24
- $color-surface-section: var(--surface-section);
25
- $color-surface-card: var(--surface-card);
26
- $color-surface-overlay: var(--surface-overlay);
27
- $color-surface-border: var(--surface-border);
28
- $color-surface-hover: var(--surface-hover);
29
-
30
- $color-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
31
-
32
- $color-text-primary: var(--color-text-primary);
33
- $color-text-contrast: var(--color-text-contrast);
34
- $color-text-secondary: var(--color-text-secondary);
35
- $color-text-tertiary: var(--color-text-tertiary);
36
- $color-text-disabled: var(--color-text-disabled);
37
-
38
- $color-border: var(--color-border);
1
+ $color-white: #ffffff;
2
+ $color-black: #000000;
3
+ $color-primary: var(--color-primary);
4
+ $color-secondary: var(--color-secondary);
5
+ $color-tertiary: var(--color-tertiary);
6
+ $color-success: var(--color-success);
7
+ $color-info: var(--color-info);
8
+ $color-warning: var(--color-warning);
9
+ $color-danger: var(--color-danger);
10
+ $color-contrast: var(--color-contrast);
11
+ $color-contrast-inverse: var(--color-contrast-inverse);
12
+
13
+ $color-overlay-background: rgba(0, 0, 0, 0.4);
14
+ $color-component-background: var(--color-component-background);
15
+ $color-component-background-secondary: var(
16
+ --color-component-background-secondary
17
+ );
18
+ $color-component-background-solid: var(--color-component-background-solid);
19
+ $color-disabled-background: var(--color-disabled-background);
20
+ $color-disabled-border: var(--color-disabled-border);
21
+
22
+ $color-surface-ground: var(--surface-ground);
23
+ $color-surface-elevated: var(--surface-elevated);
24
+ $color-surface-section: var(--surface-section);
25
+ $color-surface-card: var(--surface-card);
26
+ $color-surface-overlay: var(--surface-overlay);
27
+ $color-surface-border: var(--surface-border);
28
+ $color-surface-hover: var(--surface-hover);
29
+
30
+ $color-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
31
+
32
+ $color-text-primary: var(--color-text-primary);
33
+ $color-text-contrast: var(--color-text-contrast);
34
+ $color-text-secondary: var(--color-text-secondary);
35
+ $color-text-tertiary: var(--color-text-tertiary);
36
+ $color-text-disabled: var(--color-text-disabled);
37
+
38
+ $color-border: var(--color-border);
@@ -1,87 +1,87 @@
1
- @use "sass:map";
2
- @use "./color-variables.scss" as vars;
3
- @use "./get-color.scss" as color;
4
-
5
- @mixin define-color-palette($mode: light) {
6
- @if $mode == light {
7
- .light {
8
- --color-primary: #{color.get-color("orange", 500)};
9
- --color-secondary: #{color.get-color("gray", 700)};
10
- --color-tertiary: #{color.get-color("bluegray", 500)};
11
- --color-success: #{color.get-color("green", 500)};
12
- --color-info: #{color.get-color("sky", "dark")};
13
- --color-warning: #{color.get-color("yellow", 500)};
14
- --color-danger: #{color.get-color("red", 500)};
15
- --color-contrast: #000;
16
- --color-contrast-inverse: #fff;
17
-
18
- // Text colors
19
- --color-text-primary: #{color.get-color("gray", 700)};
20
- --color-text-contrast: #ffffffde;
21
- --color-text-secondary: #{color.get-color("gray", 600)};
22
- --color-text-tertiary: #{color.get-color("bluegray", 500)};
23
-
24
- // Background colors
25
- --color-component-background: #ffffff;
26
- --color-component-background-secondary: #ffffff;
27
- --color-component-background-solid: #{color.get-color("bluegray", 900)};
28
-
29
- // Border colors
30
- --color-border: #{color.get-color("gray", 300)};
31
-
32
- // Disabled state colors
33
- --color-disabled-background: #f5f5f5;
34
- --color-disabled-border: #e2e8f0;
35
- --color-text-disabled: #{color.get-color("gray", 700)};
36
-
37
- // Surface colors
38
- --surface-ground: #f8fafc;
39
- --surface-elevated: #ffffff;
40
- --surface-section: #ffffff;
41
- --surface-card: #ffffff;
42
- --surface-overlay: #ffffff;
43
- --surface-border: #e2e8f0;
44
- --surface-hover: #f1f5f9;
45
- }
46
- } @else if $mode == dark {
47
- .dark {
48
- --color-primary: #{color.get-color("yellow", 500)};
49
- --color-secondary: #{color.get-color("gray", 300)};
50
- --color-tertiary: #{color.get-color("bluegray", 500)};
51
- --color-success: #{color.get-color("green", 400)};
52
- --color-info: #{color.get-color("sky", "base")};
53
- --color-warning: #{color.get-color("yellow", 400)};
54
- --color-danger: #{color.get-color("red", 400)};
55
- --color-contrast: #ffffff;
56
- --color-contrast-inverse: #000;
57
-
58
- // Text colors
59
- --color-text-primary: #ffffffde;
60
- --color-text-contrast: #ffffffde;
61
- --color-text-secondary: #{color.get-color("gray", 300)};
62
- --color-text-tertiary: #{color.get-color("bluegray", 500)};
63
-
64
- // Background colors
65
- --color-component-background: #0b121c;
66
- --color-component-background-secondary: #000510;
67
- --color-component-background-solid: #{color.get-color("bluegray", 900)};
68
-
69
- // Border colors
70
- --color-border: #5e564b;
71
-
72
- // Disabled state colors
73
- --color-disabled-background: #1f2937;
74
- --color-disabled-border: #4b4e50;
75
- --color-text-disabled: #ffffffde;
76
-
77
- // Surface colors
78
- --surface-ground: #000510;
79
- --surface-elevated: #1f2937;
80
- --surface-section: #111827;
81
- --surface-card: #0b121c;
82
- --surface-overlay: #0b121c;
83
- --surface-border: #4b4e50; //625a4e
84
- --surface-hover: rgba(255, 255, 255, 0.03);
85
- }
86
- }
87
- }
1
+ @use "sass:map";
2
+ @use "./color-variables.scss" as vars;
3
+ @use "./get-color.scss" as color;
4
+
5
+ @mixin define-color-palette($mode: light) {
6
+ @if $mode == light {
7
+ .light {
8
+ --color-primary: #{color.get-color("orange", 500)};
9
+ --color-secondary: #{color.get-color("gray", 700)};
10
+ --color-tertiary: #{color.get-color("bluegray", 500)};
11
+ --color-success: #{color.get-color("green", 500)};
12
+ --color-info: #{color.get-color("sky", "dark")};
13
+ --color-warning: #{color.get-color("yellow", 500)};
14
+ --color-danger: #{color.get-color("red", 500)};
15
+ --color-contrast: #000;
16
+ --color-contrast-inverse: #fff;
17
+
18
+ // Text colors
19
+ --color-text-primary: #{color.get-color("gray", 700)};
20
+ --color-text-contrast: #ffffffde;
21
+ --color-text-secondary: #{color.get-color("gray", 600)};
22
+ --color-text-tertiary: #{color.get-color("bluegray", 500)};
23
+
24
+ // Background colors
25
+ --color-component-background: #ffffff;
26
+ --color-component-background-secondary: #ffffff;
27
+ --color-component-background-solid: #{color.get-color("bluegray", 900)};
28
+
29
+ // Border colors
30
+ --color-border: #{color.get-color("gray", 300)};
31
+
32
+ // Disabled state colors
33
+ --color-disabled-background: #f5f5f5;
34
+ --color-disabled-border: #e2e8f0;
35
+ --color-text-disabled: #{color.get-color("gray", 700)};
36
+
37
+ // Surface colors
38
+ --surface-ground: #f8fafc;
39
+ --surface-elevated: #ffffff;
40
+ --surface-section: #ffffff;
41
+ --surface-card: #ffffff;
42
+ --surface-overlay: #ffffff;
43
+ --surface-border: #e2e8f0;
44
+ --surface-hover: #f1f5f9;
45
+ }
46
+ } @else if $mode == dark {
47
+ .dark {
48
+ --color-primary: #{color.get-color("yellow", 500)};
49
+ --color-secondary: #{color.get-color("gray", 300)};
50
+ --color-tertiary: #{color.get-color("bluegray", 500)};
51
+ --color-success: #{color.get-color("green", 400)};
52
+ --color-info: #{color.get-color("sky", "base")};
53
+ --color-warning: #{color.get-color("yellow", 400)};
54
+ --color-danger: #{color.get-color("red", 400)};
55
+ --color-contrast: #ffffff;
56
+ --color-contrast-inverse: #000;
57
+
58
+ // Text colors
59
+ --color-text-primary: #ffffffde;
60
+ --color-text-contrast: #ffffffde;
61
+ --color-text-secondary: #{color.get-color("gray", 300)};
62
+ --color-text-tertiary: #{color.get-color("bluegray", 500)};
63
+
64
+ // Background colors
65
+ --color-component-background: #0b121c;
66
+ --color-component-background-secondary: #000510;
67
+ --color-component-background-solid: #{color.get-color("bluegray", 900)};
68
+
69
+ // Border colors
70
+ --color-border: #5e564b;
71
+
72
+ // Disabled state colors
73
+ --color-disabled-background: #1f2937;
74
+ --color-disabled-border: #4b4e50;
75
+ --color-text-disabled: #ffffffde;
76
+
77
+ // Surface colors
78
+ --surface-ground: #000510;
79
+ --surface-elevated: #1f2937;
80
+ --surface-section: #111827;
81
+ --surface-card: #0b121c;
82
+ --surface-overlay: #0b121c;
83
+ --surface-border: #4b4e50; //625a4e
84
+ --surface-hover: rgba(255, 255, 255, 0.03);
85
+ }
86
+ }
87
+ }
@@ -1,16 +1,16 @@
1
- @use 'sass:map';
2
- @use './color-palette.scss' as colors;
3
-
4
- @function get-color($name, $shade) {
5
- $shades: map.get(colors.$colors, $name);
6
- @if $shades == null {
7
- @error "Color `#{$name}` not found in \$colors map.";
8
- }
9
-
10
- $value: map.get($shades, $shade);
11
- @if $value == null {
12
- @error "Shade `#{$shade}` not found in `#{$name}` color.";
13
- }
14
-
15
- @return $value;
1
+ @use 'sass:map';
2
+ @use './color-palette.scss' as colors;
3
+
4
+ @function get-color($name, $shade) {
5
+ $shades: map.get(colors.$colors, $name);
6
+ @if $shades == null {
7
+ @error "Color `#{$name}` not found in \$colors map.";
8
+ }
9
+
10
+ $value: map.get($shades, $shade);
11
+ @if $value == null {
12
+ @error "Shade `#{$shade}` not found in `#{$name}` color.";
13
+ }
14
+
15
+ @return $value;
16
16
  }