coer-elements 2.0.9 → 2.0.11

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 (21) hide show
  1. package/components/lib/coer-modal/coer-modal.component.d.ts +11 -10
  2. package/components/lib/coer-numberbox/coer-numberbox.component.d.ts +12 -13
  3. package/components/lib/coer-page-title/coer-page-title.component.d.ts +2 -2
  4. package/components/lib/coer-secretbox/coer-secretbox.component.d.ts +8 -7
  5. package/components/lib/coer-selectbox/coer-selectbox.component.d.ts +15 -15
  6. package/components/lib/coer-switch/coer-switch.component.d.ts +8 -7
  7. package/components/lib/coer-tab/coer-tab.component.d.ts +13 -9
  8. package/components/lib/coer-textarea/coer-textarea.component.d.ts +7 -8
  9. package/components/lib/coer-textbox/coer-textbox.component.d.ts +9 -9
  10. package/fesm2022/coer-elements-components.mjs +220 -228
  11. package/fesm2022/coer-elements-components.mjs.map +1 -1
  12. package/fesm2022/coer-elements-pages.mjs +6 -5
  13. package/fesm2022/coer-elements-pages.mjs.map +1 -1
  14. package/fesm2022/coer-elements-signals.mjs +1 -0
  15. package/fesm2022/coer-elements-signals.mjs.map +1 -1
  16. package/fesm2022/coer-elements-tools.mjs +1 -0
  17. package/fesm2022/coer-elements-tools.mjs.map +1 -1
  18. package/interfaces/lib/colors.interface.d.ts +1 -0
  19. package/package.json +12 -12
  20. package/styles/coer-elements.css +107 -54
  21. package/styles/colors.scss +32 -28
package/interfaces/lib/colors.interface.d.ts CHANGED
@@ -30,6 +30,7 @@ export interface IAppColors {
30
30
  containers: string;
31
31
  sidenav: string;
32
32
  sidenavText: string;
33
+ sidenavFocus: string;
33
34
  toolbar: string;
34
35
  toolbarText: string;
35
36
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "coer-elements",
3
- "version": "2.0.9",
3
+ "version": "2.0.11",
4
4
  "author": "Christian Omar Escamilla Rodríguez",
5
5
  "keywords": [
6
6
  "Components",
@@ -61,17 +61,13 @@
61
61
  "types": "./components/index.d.ts",
62
62
  "default": "./fesm2022/coer-elements-components.mjs"
63
63
  },
64
- "./directives": {
65
- "types": "./directives/index.d.ts",
66
- "default": "./fesm2022/coer-elements-directives.mjs"
67
- },
68
64
  "./guards": {
69
65
  "types": "./guards/index.d.ts",
70
66
  "default": "./fesm2022/coer-elements-guards.mjs"
71
67
  },
72
- "./interceptors": {
73
- "types": "./interceptors/index.d.ts",
74
- "default": "./fesm2022/coer-elements-interceptors.mjs"
68
+ "./directives": {
69
+ "types": "./directives/index.d.ts",
70
+ "default": "./fesm2022/coer-elements-directives.mjs"
75
71
  },
76
72
  "./extensions": {
77
73
  "types": "./extensions/index.d.ts",
@@ -81,18 +77,22 @@
81
77
  "types": "./interfaces/index.d.ts",
82
78
  "default": "./fesm2022/coer-elements-interfaces.mjs"
83
79
  },
80
+ "./interceptors": {
81
+ "types": "./interceptors/index.d.ts",
82
+ "default": "./fesm2022/coer-elements-interceptors.mjs"
83
+ },
84
84
  "./pages": {
85
85
  "types": "./pages/index.d.ts",
86
86
  "default": "./fesm2022/coer-elements-pages.mjs"
87
87
  },
88
- "./services": {
89
- "types": "./services/index.d.ts",
90
- "default": "./fesm2022/coer-elements-services.mjs"
91
- },
92
88
  "./pipes": {
93
89
  "types": "./pipes/index.d.ts",
94
90
  "default": "./fesm2022/coer-elements-pipes.mjs"
95
91
  },
92
+ "./services": {
93
+ "types": "./services/index.d.ts",
94
+ "default": "./fesm2022/coer-elements-services.mjs"
95
+ },
96
96
  "./signals": {
97
97
  "types": "./signals/index.d.ts",
98
98
  "default": "./fesm2022/coer-elements-signals.mjs"
package/styles/coer-elements.css CHANGED
@@ -43,10 +43,49 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
43
43
  --containers-inner: var(--app-containers, var(--white));
44
44
  --sidenav-inner: var(--app-sidenav, var(--black));
45
45
  --sidenav-text-inner: var(--app-sidenav-text, var(--smoke));
46
+ --sidenav-focus-inner: var(--app-sidenav-focus, var(--orange));
46
47
  --toolbar-inner: var(--app-toolbar, var(--smoke));
47
48
  --toolbar-text-inner: var(--app-toolbar-text, var(--black));
48
49
  }
49
50
 
51
+ .text-transparent {
52
+ color: transparent !important;
53
+ }
54
+
55
+ .text-transparent-bold {
56
+ color: transparent !important;
57
+ font-weight: bold !important;
58
+ }
59
+
60
+ .border-transparent {
61
+ border-color: transparent !important;
62
+ }
63
+
64
+ .border-top-transparent {
65
+ border-top-color: transparent !important;
66
+ }
67
+
68
+ .border-right-transparent {
69
+ border-right-color: transparent !important;
70
+ }
71
+
72
+ .border-bottom-transparent {
73
+ border-bottom-color: transparent !important;
74
+ }
75
+
76
+ .border-left-transparent {
77
+ border-left-color: transparent !important;
78
+ }
79
+
80
+ .background-transparent {
81
+ background-color: transparent !important;
82
+ }
83
+
84
+ .background-border-transparent {
85
+ background-color: transparent !important;
86
+ border-color: transparent !important;
87
+ }
88
+
50
89
  .text-blue {
51
90
  color: var(--blue) !important;
52
91
  }
@@ -883,6 +922,44 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
883
922
  border-color: var(--sidenav-text-inner) !important;
884
923
  }
885
924
 
925
+ .text-app-sidenav-focus {
926
+ color: var(--sidenav-focus-inner) !important;
927
+ }
928
+
929
+ .text-app-sidenav-focus-bold {
930
+ color: var(--sidenav-focus-inner) !important;
931
+ font-weight: bold !important;
932
+ }
933
+
934
+ .border-app-sidenav-focus {
935
+ border-color: var(--sidenav-focus-inner) !important;
936
+ }
937
+
938
+ .border-top-app-sidenav-focus {
939
+ border-top-color: var(--sidenav-focus-inner) !important;
940
+ }
941
+
942
+ .border-right-app-sidenav-focus {
943
+ border-right-color: var(--sidenav-focus-inner) !important;
944
+ }
945
+
946
+ .border-bottom-app-sidenav-focus {
947
+ border-bottom-color: var(--sidenav-focus-inner) !important;
948
+ }
949
+
950
+ .border-left-app-sidenav-focus {
951
+ border-left-color: var(--sidenav-focus-inner) !important;
952
+ }
953
+
954
+ .background-app-sidenav-focus {
955
+ background-color: var(--sidenav-focus-inner) !important;
956
+ }
957
+
958
+ .background-border-app-sidenav-focus {
959
+ background-color: var(--sidenav-focus-inner) !important;
960
+ border-color: var(--sidenav-focus-inner) !important;
961
+ }
962
+
886
963
  .text-app-toolbar {
887
964
  color: var(--toolbar-inner) !important;
888
965
  }
@@ -959,44 +1036,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
959
1036
  border-color: var(--toolbar-text-inner) !important;
960
1037
  }
961
1038
 
962
- .text-transparent {
963
- color: transparent !important;
964
- }
965
-
966
- .text-transparent-bold {
967
- color: transparent !important;
968
- font-weight: bold !important;
969
- }
970
-
971
- .border-transparent {
972
- border-color: transparent !important;
973
- }
974
-
975
- .border-top-transparent {
976
- border-top-color: transparent !important;
977
- }
978
-
979
- .border-right-transparent {
980
- border-right-color: transparent !important;
981
- }
982
-
983
- .border-bottom-transparent {
984
- border-bottom-color: transparent !important;
985
- }
986
-
987
- .border-left-transparent {
988
- border-left-color: transparent !important;
989
- }
990
-
991
- .background-transparent {
992
- background-color: transparent !important;
993
- }
994
-
995
- .background-border-transparent {
996
- background-color: transparent !important;
997
- border-color: transparent !important;
998
- }
999
-
1000
1039
  coer-button {
1001
1040
  display: contents !important;
1002
1041
  }
@@ -2157,8 +2196,9 @@ mat-nav-list.coer-menu-option mat-list-item span.icon-container.active-link,
2157
2196
  mat-nav-list.coer-menu-option mat-list-item span.label-container.active-link {
2158
2197
  color: var(--navigation-inner) !important;
2159
2198
  }
2160
- mat-nav-list.coer-menu-option mat-list-item:hover {
2161
- background-color: color-mix(in srgb, var(--app-sidenav), white 20%) !important;
2199
+ mat-nav-list.coer-menu-option mat-list-item:hover,
2200
+ mat-nav-list.coer-menu-option mat-list-item.mdc-list-item:hover::before {
2201
+ background-color: color-mix(in srgb, var(--app-sidenav), white 35%) !important;
2162
2202
  }
2163
2203
 
2164
2204
  mat-accordion.coer-tree-accordion div, mat-accordion.coer-tree-accordion span {
@@ -2184,37 +2224,50 @@ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header
2184
2224
  padding: 0px 10px;
2185
2225
  height: 48px !important;
2186
2226
  }
2187
- mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator {
2188
- width: 10px !important;
2189
- margin-left: 15px !important;
2190
- }
2191
- mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator::after {
2192
- color: var(--background-inner) !important;
2193
- }
2194
- mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description {
2227
+ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description {
2195
2228
  margin-right: 0px !important;
2196
2229
  }
2197
- mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description span.icon-container {
2230
+ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.icon-container {
2198
2231
  height: 48px !important;
2199
2232
  min-width: 20px !important;
2200
2233
  max-width: 20px !important;
2201
2234
  display: flex !important;
2202
2235
  align-items: center !important;
2203
2236
  justify-content: center !important;
2204
- color: var(--background-inner);
2237
+ color: var(--sidenav-text-inner);
2205
2238
  }
2206
- mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description span.label-container {
2239
+ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.label-container {
2207
2240
  height: 48px !important;
2208
2241
  margin-left: 10px !important;
2209
2242
  display: flex !important;
2210
2243
  align-items: center !important;
2211
- color: var(--background-inner);
2244
+ color: var(--sidenav-text-inner);
2245
+ }
2246
+ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator {
2247
+ width: 10px !important;
2248
+ margin-left: 15px !important;
2249
+ }
2250
+ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator::after {
2251
+ color: var(--sidenav-text-inner) !important;
2212
2252
  }
2213
2253
  mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-navigation span.mat-expansion-indicator::after {
2214
2254
  color: var(--navigation-inner) !important;
2215
2255
  }
2216
- mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover {
2217
- background-color: color-mix(in srgb, var(--app-sidenav), white 20%) !important;
2256
+ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.cdk-focused {
2257
+ background-color: var(--sidenav-inner) !important;
2258
+ }
2259
+ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.mat-expanded {
2260
+ background-color: var(--navigation-inner) !important;
2261
+ }
2262
+ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.background-navigation:hover {
2263
+ background-color: color-mix(in srgb, var(--navigation-inner), white 10%) !important;
2264
+ }
2265
+ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header.mat-expanded {
2266
+ background-color: var(--sidenav-inner) !important;
2267
+ }
2268
+ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover,
2269
+ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover {
2270
+ background-color: color-mix(in srgb, var(--app-sidenav), white 30%) !important;
2218
2271
  }
2219
2272
 
2220
2273
  div#coer-tool-bar {
package/styles/colors.scss CHANGED
@@ -24,38 +24,42 @@
24
24
  --breadcrumbs-inner: var(--app-breadcrumbs, var(--blue));
25
25
  --background-inner: var(--app-background, var(--smoke));
26
26
  --containers-inner: var(--app-containers, var(--white));
27
- --sidenav-inner: var(--app-sidenav, var(--black));
28
- --sidenav-text-inner: var(--app-sidenav-text, var(--smoke));
27
+
28
+ --sidenav-inner: var(--app-sidenav, var(--black));
29
+ --sidenav-text-inner: var(--app-sidenav-text, var(--smoke));
30
+ --sidenav-focus-inner: var(--app-sidenav-focus, var(--orange));
31
+
29
32
  --toolbar-inner: var(--app-toolbar, var(--smoke));
30
33
  --toolbar-text-inner: var(--app-toolbar-text, var(--black));
31
34
  }
32
35
 
33
- $colors: (
34
- 'blue': var(--blue),
35
- 'gray': var(--gray),
36
- 'green': var(--green),
37
- 'yellow': var(--yellow),
38
- 'red': var(--red),
39
- 'smoke': var(--smoke),
40
- 'black': var(--black),
41
- 'orange': var(--orange),
42
- 'white': var(--white),
43
- 'purple': var(--purple),
44
- 'primary': var(--primary-inner),
45
- 'secondary': var(--secondary-inner),
46
- 'success': var(--success-inner),
47
- 'warning': var(--warning-inner),
48
- 'danger': var(--danger-inner),
49
- 'navigation': var(--navigation-inner),
50
- 'information': var(--information-inner),
51
- 'breadcrumbs': var(--breadcrumbs-inner),
52
- 'app-background': var(--background-inner),
53
- 'app-container': var(--containers-inner),
54
- 'app-sidenav': var(--sidenav-inner),
55
- 'app-sidenav-text': var(--sidenav-text-inner),
56
- 'app-toolbar': var(--toolbar-inner),
57
- 'app-toolbar-text': var(--toolbar-text-inner),
58
- 'transparent': transparent
36
+ $colors: (
37
+ 'transparent': transparent,
38
+ 'blue' : var(--blue),
39
+ 'gray' : var(--gray),
40
+ 'green' : var(--green),
41
+ 'yellow': var(--yellow),
42
+ 'red' : var(--red),
43
+ 'smoke' : var(--smoke),
44
+ 'black' : var(--black),
45
+ 'orange': var(--orange),
46
+ 'white' : var(--white),
47
+ 'purple': var(--purple),
48
+ 'primary' : var(--primary-inner),
49
+ 'secondary' : var(--secondary-inner),
50
+ 'success' : var(--success-inner),
51
+ 'warning' : var(--warning-inner),
52
+ 'danger' : var(--danger-inner),
53
+ 'navigation' : var(--navigation-inner),
54
+ 'information': var(--information-inner),
55
+ 'breadcrumbs' : var(--breadcrumbs-inner),
56
+ 'app-background' : var(--background-inner),
57
+ 'app-container' : var(--containers-inner),
58
+ 'app-sidenav' : var(--sidenav-inner),
59
+ 'app-sidenav-text' : var(--sidenav-text-inner),
60
+ 'app-sidenav-focus': var(--sidenav-focus-inner),
61
+ 'app-toolbar' : var(--toolbar-inner),
62
+ 'app-toolbar-text' : var(--toolbar-text-inner)
59
63
  );
60
64
 
61
65