@foxeltech/angular-ui 0.3.0 → 0.3.1
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/fesm2022/foxeltech-angular-ui.mjs +205 -205
- package/fesm2022/foxeltech-angular-ui.mjs.map +1 -1
- package/package.json +12 -11
- package/src/lib/ui/components/datetime-picker/datetime-picker.component.html +8 -4
- package/src/lib/ui/components/drawer/drawer.component.html +75 -61
- package/src/lib/ui/components/loading-panel/loading-panel.component.html +53 -53
- package/src/lib/ui/components/radio-button/radio-button.component.html +24 -24
- package/src/lib/ui/components/search-bar/search-bar.component.html +11 -10
- package/src/lib/ui/components/select/select.component.html +8 -6
- package/src/lib/ui/components/slider/slider.component.html +17 -15
- package/src/lib/ui/components/tab-group/tab-group.component.html +35 -32
- package/src/lib/ui/components/toast/toast.component.html +36 -34
- package/src/lib/ui/components/tree-diagram/tree-diagram.component.html +21 -19
- /package/{index.d.ts → types/foxeltech-angular-ui.d.ts} +0 -0
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@foxeltech/angular-ui",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
7
7
|
},
|
|
8
8
|
"peerDependencies": {
|
|
9
9
|
"tailwindcss": "^4.0.0",
|
|
10
|
-
"@angular/common": "^20.3.0",
|
|
11
|
-
"@angular/animations": "^20.3.0",
|
|
12
|
-
"@angular/core": "^20.3.0",
|
|
13
|
-
"@angular/forms": "^20.3.0",
|
|
14
|
-
"@angular/material": "^20.2.7",
|
|
15
|
-
"@angular/cdk": "^20.2.7",
|
|
10
|
+
"@angular/common": "^20.3.0 || ^21.0.0",
|
|
11
|
+
"@angular/animations": "^20.3.0 || ^21.0.0",
|
|
12
|
+
"@angular/core": "^20.3.0 || ^21.0.0",
|
|
13
|
+
"@angular/forms": "^20.3.0 || ^21.0.0",
|
|
14
|
+
"@angular/material": "^20.2.7 || ^21.0.0",
|
|
15
|
+
"@angular/cdk": "^20.2.7 || ^21.0.0",
|
|
16
16
|
"lodash": "^4.17.21",
|
|
17
17
|
"@ngx-translate/core": "^14.0.0",
|
|
18
18
|
"@ngx-translate/http-loader": "^7.0.0",
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"tslib": "^2.3.0",
|
|
23
|
-
"@danielmoncada/angular-datetime-picker": "^
|
|
24
|
-
"@danielmoncada/angular-datetime-picker-moment-adapter": "^
|
|
23
|
+
"@danielmoncada/angular-datetime-picker": "^21.0.0",
|
|
24
|
+
"@danielmoncada/angular-datetime-picker-moment-adapter": "^8.0.0",
|
|
25
25
|
"echarts": "^6.0.0",
|
|
26
26
|
"ngx-echarts": "^20.0.2",
|
|
27
27
|
"d3": "^7.9.0",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"default": "./package.json"
|
|
44
44
|
},
|
|
45
45
|
".": {
|
|
46
|
-
"types": "./
|
|
46
|
+
"types": "./types/foxeltech-angular-ui.d.ts",
|
|
47
47
|
"default": "./fesm2022/foxeltech-angular-ui.mjs"
|
|
48
48
|
}
|
|
49
49
|
},
|
|
@@ -51,5 +51,6 @@
|
|
|
51
51
|
"*.css"
|
|
52
52
|
],
|
|
53
53
|
"module": "fesm2022/foxeltech-angular-ui.mjs",
|
|
54
|
-
"typings": "
|
|
54
|
+
"typings": "types/foxeltech-angular-ui.d.ts",
|
|
55
|
+
"type": "module"
|
|
55
56
|
}
|
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
@if (label) {
|
|
3
3
|
<label class="txt-field-label" [attr.for]="fieldId">
|
|
4
4
|
{{ label }}
|
|
5
|
-
|
|
5
|
+
@if (required) {
|
|
6
|
+
<span class="txt-required" aria-hidden="true">*</span>
|
|
7
|
+
}
|
|
6
8
|
</label>
|
|
7
9
|
}
|
|
8
10
|
|
|
@@ -19,11 +21,11 @@
|
|
|
19
21
|
[value]="value"
|
|
20
22
|
readonly
|
|
21
23
|
class="input-default pr-9"
|
|
22
|
-
|
|
24
|
+
/>
|
|
23
25
|
<span
|
|
24
26
|
[owlDateTimeTrigger]="picker"
|
|
25
27
|
class="absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors"
|
|
26
|
-
|
|
28
|
+
>
|
|
27
29
|
<fx-ui-hero-icon icon="calendar" [size]="20" class="text-text-primary"></fx-ui-hero-icon>
|
|
28
30
|
</span>
|
|
29
31
|
</div>
|
|
@@ -33,5 +35,7 @@
|
|
|
33
35
|
[pickerType]="type"
|
|
34
36
|
(afterPickerClosed)="onValueChange($event)"
|
|
35
37
|
></owl-date-time>
|
|
36
|
-
|
|
38
|
+
@if (invalid) {
|
|
39
|
+
<div class="txt-invalid">{{ getErrorMessage(label) }}</div>
|
|
40
|
+
}
|
|
37
41
|
</div>
|
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
href="/"
|
|
4
4
|
class="h-[60px]"
|
|
5
5
|
[ngClass]="{ 'flex items-center justify-center': !isExpanded, 'p-4': isExpanded }"
|
|
6
|
-
|
|
6
|
+
>
|
|
7
7
|
@if (logo) {
|
|
8
8
|
<img
|
|
9
9
|
[src]="logo"
|
|
10
10
|
alt="Home"
|
|
11
11
|
class="h-[20px] w-auto transition-all duration-300 ease-in-out"
|
|
12
12
|
[ngClass]="{ 'scale-90': !isExpanded, 'ml-5': isExpanded }"
|
|
13
|
-
|
|
13
|
+
/>
|
|
14
14
|
} @else {
|
|
15
15
|
<div class="h-[30px] w-auto transition-all duration-300 ease-in-out"></div>
|
|
16
16
|
}
|
|
@@ -18,18 +18,24 @@
|
|
|
18
18
|
<div class="drawer-container" [@drawerExpand]="getDrawerState()">
|
|
19
19
|
<!-- Navigation Items -->
|
|
20
20
|
<nav class="drawer-nav">
|
|
21
|
-
|
|
21
|
+
@for (item of items; track item) {
|
|
22
22
|
<ng-container
|
|
23
23
|
*ngTemplateOutlet="drawerItem; context: { $implicit: item, level: 0 }"
|
|
24
24
|
></ng-container>
|
|
25
|
-
|
|
25
|
+
}
|
|
26
26
|
</nav>
|
|
27
27
|
|
|
28
28
|
<!-- Version -->
|
|
29
|
-
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
@if (version) {
|
|
30
|
+
<div class="drawer-version" [matTooltip]="!isExpanded ? version : ''" matTooltipPosition="right">
|
|
31
|
+
@if (isExpanded) {
|
|
32
|
+
<span>{{ version }}</span>
|
|
33
|
+
}
|
|
34
|
+
@if (!isExpanded) {
|
|
35
|
+
<span class="drawer-version-dot"></span>
|
|
36
|
+
}
|
|
37
|
+
</div>
|
|
38
|
+
}
|
|
33
39
|
</div>
|
|
34
40
|
|
|
35
41
|
<!-- Floating Toggle Button on right border -->
|
|
@@ -42,7 +48,7 @@
|
|
|
42
48
|
[matTooltip]="isExpanded ? 'Collapse' : 'Expand'"
|
|
43
49
|
matTooltipClass="text-text-primary text-xs font-semibold"
|
|
44
50
|
matTooltipPosition="right"
|
|
45
|
-
|
|
51
|
+
>
|
|
46
52
|
<fx-ui-hero-icon
|
|
47
53
|
[icon]="isExpanded ? 'chevron-left' : 'chevron-right'"
|
|
48
54
|
[size]="16"
|
|
@@ -55,60 +61,68 @@
|
|
|
55
61
|
<ng-template #drawerItem let-item let-level="level">
|
|
56
62
|
<div class="drawer-item-wrapper">
|
|
57
63
|
<!-- Item Button/Link -->
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
64
|
+
@if (item.route && !item.children) {
|
|
65
|
+
<a
|
|
66
|
+
[routerLink]="item.route"
|
|
67
|
+
class="drawer-item"
|
|
68
|
+
[class.active]="isActiveRoute(item.route)"
|
|
69
|
+
[class.has-children]="item.children && item.children.length > 0"
|
|
70
|
+
[style.paddingLeft.px]="isExpanded ? 16 + level * 16 : 16"
|
|
71
|
+
[matTooltip]="!isExpanded ? item.label : ''"
|
|
72
|
+
matTooltipPosition="right"
|
|
73
|
+
matTooltipClass="text-text-primary text-xs font-semibold"
|
|
74
|
+
(click)="onItemClick(item, $event)"
|
|
75
|
+
>
|
|
76
|
+
<div class="item-content">
|
|
77
|
+
<fx-ui-hero-icon [icon]="item.icon" [size]="20" class="item-icon"></fx-ui-hero-icon>
|
|
78
|
+
@if (isExpanded) {
|
|
79
|
+
<span class="item-label">{{ item.label }}</span>
|
|
80
|
+
}
|
|
81
|
+
</div>
|
|
82
|
+
</a>
|
|
83
|
+
}
|
|
75
84
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
85
|
+
@if (!item.route || item.children) {
|
|
86
|
+
<button
|
|
87
|
+
type="button"
|
|
88
|
+
class="drawer-item"
|
|
89
|
+
[class.active]="isActiveRoute(item.route)"
|
|
90
|
+
[class.has-children]="item.children && item.children.length > 0"
|
|
91
|
+
[style.paddingLeft.px]="isExpanded ? 16 + level * 16 : 16"
|
|
92
|
+
[matTooltip]="!isExpanded ? item.label : ''"
|
|
93
|
+
matTooltipPosition="right"
|
|
94
|
+
matTooltipClass="text-text-primary text-sm font-semibold"
|
|
95
|
+
(click)="onItemClick(item, $event)"
|
|
96
|
+
>
|
|
97
|
+
<div class="item-content">
|
|
98
|
+
<fx-ui-hero-icon [icon]="item.icon" [size]="20" class="item-icon"></fx-ui-hero-icon>
|
|
99
|
+
@if (isExpanded) {
|
|
100
|
+
<span class="item-label">{{ item.label }}</span>
|
|
101
|
+
}
|
|
102
|
+
@if (isExpanded && item.children && item.children.length > 0) {
|
|
103
|
+
<fx-ui-hero-icon
|
|
104
|
+
[icon]="'chevron-down'"
|
|
105
|
+
[size]="16"
|
|
106
|
+
class="chevron-icon"
|
|
107
|
+
[class.rotated]="isAccordionExpanded(item.id)"
|
|
108
|
+
></fx-ui-hero-icon>
|
|
109
|
+
}
|
|
110
|
+
</div>
|
|
111
|
+
</button>
|
|
112
|
+
}
|
|
100
113
|
|
|
101
114
|
<!-- Accordion Children -->
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
115
|
+
@if (item.children && item.children.length > 0) {
|
|
116
|
+
<div
|
|
117
|
+
class="accordion-children"
|
|
118
|
+
[@accordionExpand]="getAccordionState(item.id)"
|
|
119
|
+
>
|
|
120
|
+
@for (child of item.children; track child) {
|
|
121
|
+
<ng-container
|
|
122
|
+
*ngTemplateOutlet="drawerItem; context: { $implicit: child, level: level + 1 }"
|
|
123
|
+
></ng-container>
|
|
124
|
+
}
|
|
125
|
+
</div>
|
|
126
|
+
}
|
|
113
127
|
</div>
|
|
114
128
|
</ng-template>
|
|
@@ -1,57 +1,57 @@
|
|
|
1
1
|
<!-- Full-screen glass overlay -->
|
|
2
|
-
|
|
3
|
-
*ngIf="show"
|
|
4
|
-
class="fixed inset-0 z-50 flex items-center justify-center"
|
|
5
|
-
aria-hidden="false"
|
|
6
|
-
role="alert"
|
|
7
|
-
aria-busy="true"
|
|
8
|
-
>
|
|
9
|
-
<div class="absolute inset-0 bg-bg-primary/30 backdrop-blur-xl" aria-hidden="true"></div>
|
|
10
|
-
|
|
2
|
+
@if (show) {
|
|
11
3
|
<div
|
|
12
|
-
class="
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
4
|
+
class="fixed inset-0 z-50 flex items-center justify-center"
|
|
5
|
+
aria-hidden="false"
|
|
6
|
+
role="alert"
|
|
7
|
+
aria-busy="true"
|
|
8
|
+
>
|
|
9
|
+
<div class="absolute inset-0 bg-bg-primary/30 backdrop-blur-xl" aria-hidden="true"></div>
|
|
10
|
+
<div
|
|
11
|
+
class="relative z-10 flex flex-col items-center gap-4 p-6 rounded-2xl shadow-xl bg-bg-primary/70 border border-border-strong backdrop-bg-primary/70"
|
|
12
|
+
style="min-width: 220px; max-width: 90%"
|
|
13
|
+
>
|
|
14
|
+
<svg fill="url(#spinner-gradient)" width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
15
|
+
<defs>
|
|
16
|
+
<linearGradient id="spinner-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
17
|
+
<stop offset="0%" style="stop-color: rgb(var(--gradient-primary-start)); stop-opacity: 1" />
|
|
18
|
+
<stop offset="100%" style="stop-color: rgb(var(--gradient-primary-end)); stop-opacity: 1" />
|
|
19
|
+
</linearGradient>
|
|
20
|
+
</defs>
|
|
21
|
+
<circle cx="4" cy="12" r="0">
|
|
22
|
+
<animate begin="0;spinner_z0Or.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
|
|
23
|
+
<animate begin="spinner_OLMs.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
|
|
24
|
+
<animate begin="spinner_UHR2.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
|
|
25
|
+
<animate id="spinner_lo66" begin="spinner_Aguh.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
|
|
26
|
+
<animate id="spinner_z0Or" begin="spinner_lo66.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
|
|
27
|
+
</circle>
|
|
28
|
+
<circle cx="4" cy="12" r="3">
|
|
29
|
+
<animate begin="0;spinner_z0Or.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
|
|
30
|
+
<animate begin="spinner_OLMs.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
|
|
31
|
+
<animate id="spinner_JsnR" begin="spinner_UHR2.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
|
|
32
|
+
<animate id="spinner_Aguh" begin="spinner_JsnR.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
|
|
33
|
+
<animate begin="spinner_Aguh.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
|
|
34
|
+
</circle>
|
|
35
|
+
<circle cx="12" cy="12" r="3">
|
|
36
|
+
<animate begin="0;spinner_z0Or.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
|
|
37
|
+
<animate id="spinner_hSjk" begin="spinner_OLMs.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
|
|
38
|
+
<animate id="spinner_UHR2" begin="spinner_hSjk.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
|
|
39
|
+
<animate begin="spinner_UHR2.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
|
|
40
|
+
<animate begin="spinner_Aguh.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
|
|
41
|
+
</circle>
|
|
42
|
+
<circle cx="20" cy="12" r="3">
|
|
43
|
+
<animate id="spinner_4v5M" begin="0;spinner_z0Or.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
|
|
44
|
+
<animate id="spinner_OLMs" begin="spinner_4v5M.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
|
|
45
|
+
<animate begin="spinner_OLMs.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
|
|
46
|
+
<animate begin="spinner_UHR2.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
|
|
47
|
+
<animate begin="spinner_Aguh.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
|
|
48
|
+
</circle>
|
|
49
|
+
</svg>
|
|
50
|
+
@if (message) {
|
|
51
|
+
<div class="text-sm text-text-primary text-center">
|
|
52
|
+
{{ message }}
|
|
53
|
+
</div>
|
|
54
|
+
}
|
|
55
55
|
</div>
|
|
56
56
|
</div>
|
|
57
|
-
|
|
57
|
+
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
[class]="class"
|
|
4
4
|
role="radiogroup"
|
|
5
5
|
[attr.aria-labelledby]="label ? groupId + '-label' : null"
|
|
6
|
-
>
|
|
6
|
+
>
|
|
7
7
|
<!-- A radiogroup has no single control a <label> could point at — name it via aria-labelledby. -->
|
|
8
8
|
@if (label) {
|
|
9
9
|
<span class="txt-field-label block" [id]="groupId + '-label'">
|
|
@@ -24,33 +24,33 @@
|
|
|
24
24
|
</span>
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
27
|
+
@for (opt of options; track opt) {
|
|
28
|
+
<button
|
|
29
|
+
type="button"
|
|
30
|
+
role="radio"
|
|
31
|
+
[attr.aria-checked]="value === opt.value"
|
|
32
|
+
(click)="onSelectValue(opt.value)"
|
|
33
|
+
[disabled]="disabled"
|
|
34
|
+
[class.text-gray-900]="value !== opt.value"
|
|
35
|
+
class="flex-1 px-normal w-full flex items-center gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed"
|
|
36
|
+
[matTooltip]="opt.tooltip || ''"
|
|
37
|
+
matTooltipPosition="right"
|
|
38
|
+
matTooltipClass="text-text-primary text-xs font-semibold"
|
|
39
|
+
>
|
|
40
|
+
<span
|
|
41
41
|
[ngClass]="{
|
|
42
42
|
'radio-checked': value === opt.value,
|
|
43
43
|
'radio-uncheck': value !== opt.value,
|
|
44
44
|
}"
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
45
|
+
class="radio-container"
|
|
46
|
+
>
|
|
47
|
+
@if (value === opt.value) {
|
|
48
|
+
<span class="radio-dot"></span>
|
|
49
|
+
}
|
|
50
|
+
</span>
|
|
51
|
+
<span class="txt-default mb-0">{{ opt.label }}</span>
|
|
52
|
+
</button>
|
|
53
|
+
}
|
|
54
54
|
@if (invalid) {
|
|
55
55
|
<div class="txt-invalid">
|
|
56
56
|
{{ getErrorMessage(label) }}
|
|
@@ -8,15 +8,16 @@
|
|
|
8
8
|
[value]="value"
|
|
9
9
|
(input)="onValueChange($any($event.target).value)"
|
|
10
10
|
(keydown.enter)="onEnterKey()"
|
|
11
|
-
|
|
11
|
+
/>
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
13
|
+
@if (value && !disabled) {
|
|
14
|
+
<button
|
|
15
|
+
type="button"
|
|
16
|
+
class="absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary"
|
|
17
|
+
(click)="clear()"
|
|
18
|
+
aria-label="Clear"
|
|
19
|
+
>
|
|
20
|
+
<i class="material-symbols-outlined text-lg select-none">close</i>
|
|
21
|
+
</button>
|
|
22
|
+
}
|
|
22
23
|
</div>
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
[attr.invalid]="invalid || null"
|
|
23
23
|
class="fx-select-field w-full shadow-sm"
|
|
24
24
|
appearance="fill"
|
|
25
|
-
|
|
25
|
+
>
|
|
26
26
|
<mat-select
|
|
27
27
|
[id]="fieldId"
|
|
28
28
|
[required]="!!required"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
(selectionChange)="onSelectionChange($event.value)"
|
|
36
36
|
(openedChange)="onOpened($event)"
|
|
37
37
|
(blur)="onTouched()"
|
|
38
|
-
|
|
38
|
+
>
|
|
39
39
|
@if (enableSearch) {
|
|
40
40
|
<div class="px-semi w-full">
|
|
41
41
|
<input
|
|
@@ -46,12 +46,14 @@
|
|
|
46
46
|
(ngModelChange)="onSearchChange($event)"
|
|
47
47
|
(click)="$event.stopPropagation()"
|
|
48
48
|
class="text-text-primary placeholder:text-text-placeholder w-full bg-bg-primary border-b px-semi py-normal border-border-default focus:outline-none focus:border-gradient-primary-start focus-visible:ring-2 focus-visible:ring-primary/50 text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out"
|
|
49
|
-
|
|
49
|
+
/>
|
|
50
50
|
</div>
|
|
51
51
|
}
|
|
52
|
-
|
|
53
|
-
<
|
|
54
|
-
|
|
52
|
+
@for (option of filteredOptions; track option) {
|
|
53
|
+
<mat-option [value]="option.value">
|
|
54
|
+
<span class="txt-default">{{ option.label }}</span>
|
|
55
|
+
</mat-option>
|
|
56
|
+
}
|
|
55
57
|
</mat-select>
|
|
56
58
|
</mat-form-field>
|
|
57
59
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
[class.cursor-not-allowed]="disabled"
|
|
4
4
|
[class.opacity-60]="disabled"
|
|
5
5
|
role="group"
|
|
6
|
-
>
|
|
6
|
+
>
|
|
7
7
|
<!-- Track click is a pointer shortcut; the thumb button below owns keyboard/focus. -->
|
|
8
8
|
<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
|
|
9
9
|
<div
|
|
@@ -12,27 +12,29 @@
|
|
|
12
12
|
(click)="onTrackClick($event)"
|
|
13
13
|
[attr.aria-disabled]="disabled"
|
|
14
14
|
[attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
|
|
15
|
-
|
|
15
|
+
>
|
|
16
16
|
<div
|
|
17
17
|
class="relative flex items-center"
|
|
18
18
|
[ngClass]="{ 'flex-col h-48': vertical }"
|
|
19
|
-
|
|
19
|
+
>
|
|
20
20
|
<div
|
|
21
21
|
class="relative flex-1 rounded-full bg-gray-600 h-2"
|
|
22
22
|
[ngClass]="{ 'w-1 rotate-0 h-full w-auto bg-border-gray-700': vertical }"
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
23
|
+
>
|
|
24
|
+
@if (!vertical) {
|
|
25
|
+
<div
|
|
26
|
+
class="absolute left-0 top-0 h-full rounded-full bg-primary"
|
|
27
|
+
[style.width.%]="percent"
|
|
28
|
+
></div>
|
|
29
|
+
}
|
|
29
30
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
31
|
+
@if (vertical) {
|
|
32
|
+
<div
|
|
33
|
+
class="absolute bottom-0 left-0 w-full rounded-full bg-primary"
|
|
34
|
+
[style.height.%]="percent"
|
|
35
|
+
style="transform-origin: bottom;"
|
|
36
|
+
></div>
|
|
37
|
+
}
|
|
36
38
|
|
|
37
39
|
<button
|
|
38
40
|
#thumb
|