@simplysm/angular 14.0.90 → 14.0.92
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/dist/controls/button/sd-button.js +2 -2
- package/dist/controls/list/sd-list-item.d.ts +4 -0
- package/dist/controls/list/sd-list-item.d.ts.map +1 -1
- package/dist/controls/list/sd-list-item.js +79 -35
- package/dist/controls/list/sd-list.d.ts.map +1 -1
- package/dist/controls/list/sd-list.js +3 -3
- package/dist/core/modal/sd-modal.d.ts.map +1 -1
- package/dist/core/modal/sd-modal.js +3 -3
- package/dist/core/routing/injectCurrentPageCodeSignal.js +1 -1
- package/dist/core/routing/injectViewTypeSignal.d.ts.map +1 -1
- package/dist/data/crud/sd-base-container.js +11 -11
- package/dist/data/crud/sd-crud-detail.js +13 -13
- package/dist/data/crud/sd-crud-list.d.ts +4 -1
- package/dist/data/crud/sd-crud-list.d.ts.map +1 -1
- package/dist/data/crud/sd-crud-list.js +39 -35
- package/dist/data/shared-data/sd-shared-data-select-list.d.ts.map +1 -1
- package/dist/data/shared-data/sd-shared-data-select-list.js +60 -60
- package/dist/layout/sidebar/sd-sidebar-menu.d.ts.map +1 -1
- package/dist/layout/sidebar/sd-sidebar-menu.js +26 -29
- package/dist/layout/sidebar/sd-sidebar-user.d.ts +1 -0
- package/dist/layout/sidebar/sd-sidebar-user.d.ts.map +1 -1
- package/dist/layout/sidebar/sd-sidebar-user.js +37 -20
- package/dist/layout/sidebar/sd-sidebar.d.ts.map +1 -1
- package/dist/layout/sidebar/sd-sidebar.js +3 -3
- package/dist/layout/topbar/sd-topbar.d.ts.map +1 -1
- package/dist/layout/topbar/sd-topbar.js +10 -9
- package/package.json +8 -7
- package/scss/commons/_styles.scss +430 -428
- package/scss/commons/_variables.scss +4 -10
- package/scss/controls/_table.scss +2 -2
- package/src/controls/button/sd-button.ts +1 -1
- package/src/controls/list/sd-list-item.ts +218 -153
- package/src/controls/list/sd-list.ts +13 -0
- package/src/core/modal/sd-modal.ts +2 -1
- package/src/core/routing/injectCurrentPageCodeSignal.ts +1 -1
- package/src/core/routing/injectViewTypeSignal.ts +1 -0
- package/src/data/crud/sd-base-container.ts +3 -3
- package/src/data/crud/sd-crud-detail.ts +2 -2
- package/src/data/crud/sd-crud-list.ts +15 -10
- package/src/data/shared-data/sd-shared-data-select-list.ts +7 -8
- package/src/layout/sidebar/sd-sidebar-menu.ts +2 -5
- package/src/layout/sidebar/sd-sidebar-user.ts +15 -3
- package/src/layout/sidebar/sd-sidebar.ts +3 -2
- package/src/layout/topbar/sd-topbar.ts +7 -5
- package/{dist/styles.css → styles.css} +57 -22
|
@@ -30,7 +30,7 @@ import { NgIcon } from "@ng-icons/core";
|
|
|
30
30
|
"[attr.data-sd-root-layout]": "rootLayout()",
|
|
31
31
|
},
|
|
32
32
|
template: `
|
|
33
|
-
<div class="control-header p-default">MENU</div>
|
|
33
|
+
<div class="control-header p-default"><b>MENU</b></div>
|
|
34
34
|
|
|
35
35
|
<sd-list class="flex-fill" [inset]="true">
|
|
36
36
|
<ng-template
|
|
@@ -42,8 +42,6 @@ import { NgIcon } from "@ng-icons/core";
|
|
|
42
42
|
<ng-template #itemTpl [typed]="itemTemplateType" let-currMenus="menus" let-depth="depth">
|
|
43
43
|
@for (menu of currMenus; track menu.codeChain.join(".")) {
|
|
44
44
|
<sd-list-item
|
|
45
|
-
[contentClass]="depth === 0 ? 'pv-default' : ''"
|
|
46
|
-
[style.text-indent.em]="depth > 0 ? (depth + 1) * 0.5 : undefined"
|
|
47
45
|
[sdRouterLink]="getMenuRouterLinkOption(menu)"
|
|
48
46
|
(click)="onMenuClick(menu)"
|
|
49
47
|
[selected]="getIsMenuSelected(menu)"
|
|
@@ -76,11 +74,10 @@ import { NgIcon } from "@ng-icons/core";
|
|
|
76
74
|
sd-list {
|
|
77
75
|
background: var(--trans-lightest);
|
|
78
76
|
}
|
|
79
|
-
|
|
80
77
|
}
|
|
81
78
|
|
|
82
79
|
&:not([data-sd-root-layout="accordion"]) {
|
|
83
|
-
> sd-list[data-sd-inset="true"] > sd-list-item > sd-collapse > ._content > sd-list {
|
|
80
|
+
> sd-list[data-sd-inset="true"] > sd-list-item > sd-collapse > ._content > ._children > sd-list {
|
|
84
81
|
background: transparent;
|
|
85
82
|
}
|
|
86
83
|
}
|
|
@@ -10,15 +10,19 @@ import { SdCollapse } from "../../controls/collapse/sd-collapse";
|
|
|
10
10
|
import { SdRipple } from "../../core/ripple/sd-ripple";
|
|
11
11
|
import { SdList } from "../../controls/list/sd-list";
|
|
12
12
|
import { SdListItem } from "../../controls/list/sd-list-item";
|
|
13
|
+
import { NgIcon } from "@ng-icons/core";
|
|
13
14
|
|
|
14
15
|
@Component({
|
|
15
16
|
selector: "sd-sidebar-user",
|
|
16
17
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
17
18
|
encapsulation: ViewEncapsulation.None,
|
|
18
19
|
standalone: true,
|
|
19
|
-
imports: [SdCollapseIcon, SdCollapse, SdRipple, SdList, SdListItem],
|
|
20
|
+
imports: [SdCollapseIcon, SdCollapse, SdRipple, SdList, SdListItem, NgIcon],
|
|
21
|
+
host:{
|
|
22
|
+
"[class]": "'pv-lg'"
|
|
23
|
+
},
|
|
20
24
|
template: `
|
|
21
|
-
<div class="p-
|
|
25
|
+
<div class="p-xs-default">
|
|
22
26
|
<ng-content />
|
|
23
27
|
</div>
|
|
24
28
|
@if (userMenu(); as _userMenu) {
|
|
@@ -29,6 +33,9 @@ import { SdListItem } from "../../controls/list/sd-list-item";
|
|
|
29
33
|
(keydown.enter)="onMenuOpenButtonClick()"
|
|
30
34
|
[sdRipple]="true"
|
|
31
35
|
>
|
|
36
|
+
@if (_userMenu.icon) {
|
|
37
|
+
<ng-icon [svg]="_userMenu.icon" />
|
|
38
|
+
}
|
|
32
39
|
{{ _userMenu.title }}
|
|
33
40
|
<sd-collapse-icon [open]="menuOpen()" style="float: right;" [openRotate]="180" />
|
|
34
41
|
</div>
|
|
@@ -53,8 +60,11 @@ import { SdListItem } from "../../controls/list/sd-list-item";
|
|
|
53
60
|
display: block;
|
|
54
61
|
cursor: pointer;
|
|
55
62
|
user-select: none;
|
|
63
|
+
color: var(--text-trans-light);
|
|
56
64
|
|
|
57
|
-
padding: var(--gap-default);
|
|
65
|
+
padding: var(--gap-sm) var(--gap-default);
|
|
66
|
+
border-radius: var(--border-radius-default);
|
|
67
|
+
margin: 0 var(--gap-sm);
|
|
58
68
|
|
|
59
69
|
&:hover {
|
|
60
70
|
background: var(--trans-lighter);
|
|
@@ -64,6 +74,7 @@ import { SdListItem } from "../../controls/list/sd-list-item";
|
|
|
64
74
|
> sd-collapse > ._content > sd-list {
|
|
65
75
|
background: var(--trans-lightest);
|
|
66
76
|
padding: var(--gap-xs) 0;
|
|
77
|
+
margin: 0 var(--gap-sm);
|
|
67
78
|
}
|
|
68
79
|
}
|
|
69
80
|
`,
|
|
@@ -80,6 +91,7 @@ export class SdSidebarUser {
|
|
|
80
91
|
}
|
|
81
92
|
|
|
82
93
|
export interface SdSidebarUserMenu {
|
|
94
|
+
icon?: string;
|
|
83
95
|
title: string;
|
|
84
96
|
menus: {
|
|
85
97
|
title: string;
|
|
@@ -32,8 +32,9 @@ import { SdSidebarContainer } from "./sd-sidebar-container";
|
|
|
32
32
|
left: 0;
|
|
33
33
|
width: var(--sidebar-width);
|
|
34
34
|
height: 100%;
|
|
35
|
-
background: var(--control-color);
|
|
36
|
-
|
|
35
|
+
//background: var(--control-color);
|
|
36
|
+
background: var(--theme-gray-lightest);
|
|
37
|
+
//border-right: 1px solid var(--border-color-lighter);
|
|
37
38
|
|
|
38
39
|
@media not all and (max-width: variables.$breakpoint-mobile) {
|
|
39
40
|
transition: transform 0.1s ease-out;
|
|
@@ -18,13 +18,14 @@ import { tablerMenu2 } from "@ng-icons/tabler-icons";
|
|
|
18
18
|
standalone: true,
|
|
19
19
|
imports: [SdButton, NgIcon],
|
|
20
20
|
host: {
|
|
21
|
-
"class": "flex-row gap-
|
|
21
|
+
"class": "flex-row gap-sm cross-align-center main-align-start"
|
|
22
22
|
},
|
|
23
23
|
template: `
|
|
24
24
|
@if (hasSidebar()) {
|
|
25
25
|
<sd-button
|
|
26
|
-
[
|
|
27
|
-
[
|
|
26
|
+
[size]="'sm'"
|
|
27
|
+
[theme]="'link-gray'"
|
|
28
|
+
[buttonClass]="'p-xs-sm'"
|
|
28
29
|
(click)="onToggleButtonClick()"
|
|
29
30
|
>
|
|
30
31
|
<ng-icon [svg]="tablerMenu2" />
|
|
@@ -41,10 +42,11 @@ import { tablerMenu2 } from "@ng-icons/tabler-icons";
|
|
|
41
42
|
overflow-y: hidden;
|
|
42
43
|
user-select: none;
|
|
43
44
|
|
|
44
|
-
background: var(--control-color);
|
|
45
|
+
//background: var(--control-color);
|
|
46
|
+
background: var(--theme-gray-lightest);
|
|
45
47
|
color: var(--text-trans-default);
|
|
46
48
|
border-bottom: 1px solid var(--border-color-lighter);
|
|
47
|
-
padding-left: var(--gap-
|
|
49
|
+
padding-left: var(--gap-xs);
|
|
48
50
|
|
|
49
51
|
@each $h in (h1, h2, h3, h4, h5, h6) {
|
|
50
52
|
> #{$h} {
|
|
@@ -23,13 +23,13 @@
|
|
|
23
23
|
--color-zinc: rgb(158.7663980135, 158.7531978858, 169.1566961074);
|
|
24
24
|
--color-neutral: rgb(160.69161709, 160.69161709, 160.69161709);
|
|
25
25
|
--color-stone: rgb(166.2932937041, 159.6867953132, 155.2792477711);
|
|
26
|
-
--theme-gray-lightest: rgb(
|
|
27
|
-
--theme-gray-lighter: rgb(
|
|
28
|
-
--theme-gray-light: rgb(
|
|
26
|
+
--theme-gray-lightest: rgb(244.800224637, 245.6005770037, 246.9731758024);
|
|
27
|
+
--theme-gray-lighter: rgb(229.5005615925, 231.5014425092, 234.9329395059);
|
|
28
|
+
--theme-gray-light: rgb(214.200898548, 217.4023080146, 222.8927032095);
|
|
29
29
|
--theme-gray-default: rgb(153.0022463699, 161.0057700366, 174.7317580236);
|
|
30
|
-
--theme-gray-dark: rgb(
|
|
31
|
-
--theme-gray-darker: rgb(
|
|
32
|
-
--theme-gray-darkest: rgb(
|
|
30
|
+
--theme-gray-dark: rgb(134.6619453582, 144.1045892797, 160.2986585961);
|
|
31
|
+
--theme-gray-darker: rgb(108.2482457069, 119.0416476185, 137.5522575883);
|
|
32
|
+
--theme-gray-darkest: rgb(86.5985965655, 95.2333180948, 110.0418060707);
|
|
33
33
|
--theme-blue-gray-lightest: rgb(243.9036427762, 245.6082550459, 247.9935980992);
|
|
34
34
|
--theme-blue-gray-lighter: rgb(227.2591069406, 231.5206376147, 237.483995248);
|
|
35
35
|
--theme-blue-gray-light: rgb(210.614571105, 217.4330201836, 226.9743923967);
|
|
@@ -116,11 +116,13 @@
|
|
|
116
116
|
--gap-xxl: 1.5rem;
|
|
117
117
|
--gap-0: 0;
|
|
118
118
|
--gap-auto: auto;
|
|
119
|
-
--border-color-
|
|
120
|
-
--border-color-
|
|
121
|
-
--border-color-
|
|
122
|
-
--border-color-
|
|
123
|
-
--border-color-
|
|
119
|
+
--border-color-lightest: rgb(249.9001123185, 250.3002885018, 250.9865879012);
|
|
120
|
+
--border-color-lighter: rgb(234.600449274, 236.2011540073, 238.9463516047);
|
|
121
|
+
--border-color-light: rgb(219.3007862295, 222.1020195128, 226.9061153083);
|
|
122
|
+
--border-color-default: rgb(153.0022463699, 161.0057700366, 174.7317580236);
|
|
123
|
+
--border-color-dark: rgb(143.832095864, 152.5551796582, 167.5152083098);
|
|
124
|
+
--border-color-darker: rgb(116.3216443464, 127.2034085228, 145.8655591685);
|
|
125
|
+
--border-color-darkest: rgb(93.8151462793, 103.169427936, 119.2119565765);
|
|
124
126
|
--border-radius-xs: var(--gap-xxs);
|
|
125
127
|
--border-radius-sm: var(--gap-xs);
|
|
126
128
|
--border-radius-default: var(--gap-sm);
|
|
@@ -142,8 +144,8 @@
|
|
|
142
144
|
--busy-overlay-bg: rgba(255, 255, 255, 0.6);
|
|
143
145
|
--animation-duration: 0.2s;
|
|
144
146
|
--elevation-size: 0.0833rem;
|
|
145
|
-
--sidebar-width:
|
|
146
|
-
--topbar-height:
|
|
147
|
+
--sidebar-width: 14rem;
|
|
148
|
+
--topbar-height: 2.5rem;
|
|
147
149
|
--sheet-pv: var(--gap-xs);
|
|
148
150
|
--sheet-ph: var(--gap-sm);
|
|
149
151
|
--sheet-bg: var(--theme-gray-lightest);
|
|
@@ -277,13 +279,16 @@
|
|
|
277
279
|
border-radius: 0.6667rem;
|
|
278
280
|
}
|
|
279
281
|
*::-webkit-scrollbar-thumb {
|
|
280
|
-
background-color: var(--
|
|
282
|
+
background-color: var(--trans-lighter);
|
|
281
283
|
border-radius: 0.6667rem;
|
|
282
284
|
background-clip: padding-box;
|
|
283
285
|
border: 2px solid transparent;
|
|
284
286
|
}
|
|
287
|
+
*:hover::-webkit-scrollbar-thumb {
|
|
288
|
+
background-color: var(--trans-light);
|
|
289
|
+
}
|
|
285
290
|
*::-webkit-scrollbar-track:hover {
|
|
286
|
-
background-color: var(--
|
|
291
|
+
background-color: var(--trans-lightest);
|
|
287
292
|
border-radius: 0.6667rem;
|
|
288
293
|
background-clip: padding-box;
|
|
289
294
|
border: 2px solid transparent;
|
|
@@ -1012,6 +1017,9 @@
|
|
|
1012
1017
|
.bd-trans-rev-lightest {
|
|
1013
1018
|
border-color: var(--trans-rev-lightest) !important;
|
|
1014
1019
|
}
|
|
1020
|
+
.bd-color-lightest {
|
|
1021
|
+
border-color: var(--border-color-lightest) !important;
|
|
1022
|
+
}
|
|
1015
1023
|
.bd-color-lighter {
|
|
1016
1024
|
border-color: var(--border-color-lighter) !important;
|
|
1017
1025
|
}
|
|
@@ -1027,6 +1035,9 @@
|
|
|
1027
1035
|
.bd-color-darker {
|
|
1028
1036
|
border-color: var(--border-color-darker) !important;
|
|
1029
1037
|
}
|
|
1038
|
+
.bd-color-darkest {
|
|
1039
|
+
border-color: var(--border-color-darkest) !important;
|
|
1040
|
+
}
|
|
1030
1041
|
.bd-none {
|
|
1031
1042
|
border: none !important;
|
|
1032
1043
|
}
|
|
@@ -1237,6 +1248,9 @@
|
|
|
1237
1248
|
.bdt-trans-rev-lightest {
|
|
1238
1249
|
border-top-color: var(--trans-rev-lightest) !important;
|
|
1239
1250
|
}
|
|
1251
|
+
.bdt-color-lightest {
|
|
1252
|
+
border-top-color: var(--border-color-lightest) !important;
|
|
1253
|
+
}
|
|
1240
1254
|
.bdt-color-lighter {
|
|
1241
1255
|
border-top-color: var(--border-color-lighter) !important;
|
|
1242
1256
|
}
|
|
@@ -1252,6 +1266,9 @@
|
|
|
1252
1266
|
.bdt-color-darker {
|
|
1253
1267
|
border-top-color: var(--border-color-darker) !important;
|
|
1254
1268
|
}
|
|
1269
|
+
.bdt-color-darkest {
|
|
1270
|
+
border-top-color: var(--border-color-darkest) !important;
|
|
1271
|
+
}
|
|
1255
1272
|
.bdt-none {
|
|
1256
1273
|
border-top: none !important;
|
|
1257
1274
|
}
|
|
@@ -1462,6 +1479,9 @@
|
|
|
1462
1479
|
.bdr-trans-rev-lightest {
|
|
1463
1480
|
border-right-color: var(--trans-rev-lightest) !important;
|
|
1464
1481
|
}
|
|
1482
|
+
.bdr-color-lightest {
|
|
1483
|
+
border-right-color: var(--border-color-lightest) !important;
|
|
1484
|
+
}
|
|
1465
1485
|
.bdr-color-lighter {
|
|
1466
1486
|
border-right-color: var(--border-color-lighter) !important;
|
|
1467
1487
|
}
|
|
@@ -1477,6 +1497,9 @@
|
|
|
1477
1497
|
.bdr-color-darker {
|
|
1478
1498
|
border-right-color: var(--border-color-darker) !important;
|
|
1479
1499
|
}
|
|
1500
|
+
.bdr-color-darkest {
|
|
1501
|
+
border-right-color: var(--border-color-darkest) !important;
|
|
1502
|
+
}
|
|
1480
1503
|
.bdr-none {
|
|
1481
1504
|
border-right: none !important;
|
|
1482
1505
|
}
|
|
@@ -1687,6 +1710,9 @@
|
|
|
1687
1710
|
.bdb-trans-rev-lightest {
|
|
1688
1711
|
border-bottom-color: var(--trans-rev-lightest) !important;
|
|
1689
1712
|
}
|
|
1713
|
+
.bdb-color-lightest {
|
|
1714
|
+
border-bottom-color: var(--border-color-lightest) !important;
|
|
1715
|
+
}
|
|
1690
1716
|
.bdb-color-lighter {
|
|
1691
1717
|
border-bottom-color: var(--border-color-lighter) !important;
|
|
1692
1718
|
}
|
|
@@ -1702,6 +1728,9 @@
|
|
|
1702
1728
|
.bdb-color-darker {
|
|
1703
1729
|
border-bottom-color: var(--border-color-darker) !important;
|
|
1704
1730
|
}
|
|
1731
|
+
.bdb-color-darkest {
|
|
1732
|
+
border-bottom-color: var(--border-color-darkest) !important;
|
|
1733
|
+
}
|
|
1705
1734
|
.bdb-none {
|
|
1706
1735
|
border-bottom: none !important;
|
|
1707
1736
|
}
|
|
@@ -1912,6 +1941,9 @@
|
|
|
1912
1941
|
.bdl-trans-rev-lightest {
|
|
1913
1942
|
border-left-color: var(--trans-rev-lightest) !important;
|
|
1914
1943
|
}
|
|
1944
|
+
.bdl-color-lightest {
|
|
1945
|
+
border-left-color: var(--border-color-lightest) !important;
|
|
1946
|
+
}
|
|
1915
1947
|
.bdl-color-lighter {
|
|
1916
1948
|
border-left-color: var(--border-color-lighter) !important;
|
|
1917
1949
|
}
|
|
@@ -1927,6 +1959,9 @@
|
|
|
1927
1959
|
.bdl-color-darker {
|
|
1928
1960
|
border-left-color: var(--border-color-darker) !important;
|
|
1929
1961
|
}
|
|
1962
|
+
.bdl-color-darkest {
|
|
1963
|
+
border-left-color: var(--border-color-darkest) !important;
|
|
1964
|
+
}
|
|
1930
1965
|
.bdl-none {
|
|
1931
1966
|
border-left: none !important;
|
|
1932
1967
|
}
|
|
@@ -4022,26 +4057,26 @@
|
|
|
4022
4057
|
width: 100%;
|
|
4023
4058
|
border-collapse: separate;
|
|
4024
4059
|
border-spacing: 0;
|
|
4025
|
-
border-right: 1px solid var(--border-color-
|
|
4026
|
-
border-bottom: 1px solid var(--border-color-
|
|
4060
|
+
border-right: 1px solid var(--border-color-light);
|
|
4061
|
+
border-bottom: 1px solid var(--border-color-light);
|
|
4027
4062
|
}
|
|
4028
4063
|
.table > * > tr > *,
|
|
4029
4064
|
.table > tr > * {
|
|
4030
4065
|
padding: var(--gap-xs) var(--gap-sm);
|
|
4031
|
-
border-left: 1px solid var(--
|
|
4032
|
-
border-top: 1px solid var(--
|
|
4066
|
+
border-left: 1px solid var(--border-color-lighter);
|
|
4067
|
+
border-top: 1px solid var(--border-color-lighter);
|
|
4033
4068
|
}
|
|
4034
4069
|
.table > * > tr > *:first-child,
|
|
4035
4070
|
.table > tr > *:first-child {
|
|
4036
|
-
border-left: 1px solid var(--border-color-
|
|
4071
|
+
border-left: 1px solid var(--border-color-light);
|
|
4037
4072
|
}
|
|
4038
4073
|
.table > * > tr:first-child > *,
|
|
4039
4074
|
.table > tr:first-child > * {
|
|
4040
|
-
border-top: 1px solid var(--border-color-
|
|
4075
|
+
border-top: 1px solid var(--border-color-light);
|
|
4041
4076
|
}
|
|
4042
4077
|
.table > tbody > tr:first-child,
|
|
4043
4078
|
.table > tr:first-child {
|
|
4044
|
-
border-top: 1px solid var(--border-color-
|
|
4079
|
+
border-top: 1px solid var(--border-color-light);
|
|
4045
4080
|
}
|
|
4046
4081
|
.table > tbody > tr > th,
|
|
4047
4082
|
.table > tr > th {
|