@nanahoshi/mona-ui 0.1.0 → 0.1.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/nanahoshi-mona-ui-auto-complete.mjs +11 -11
- package/fesm2022/nanahoshi-mona-ui-breadcrumb.mjs +17 -17
- package/fesm2022/nanahoshi-mona-ui-button-group.mjs +26 -26
- package/fesm2022/nanahoshi-mona-ui-button.mjs +109 -107
- package/fesm2022/nanahoshi-mona-ui-calendar.mjs +53 -53
- package/fesm2022/nanahoshi-mona-ui-check-box.mjs +80 -80
- package/fesm2022/nanahoshi-mona-ui-chip.mjs +98 -98
- package/fesm2022/nanahoshi-mona-ui-circular-progress-bar.mjs +2 -2
- package/fesm2022/nanahoshi-mona-ui-color-gradient.mjs +38 -38
- package/fesm2022/nanahoshi-mona-ui-color-palette.mjs +25 -25
- package/fesm2022/nanahoshi-mona-ui-color-picker.mjs +41 -37
- package/fesm2022/nanahoshi-mona-ui-combo-box.mjs +17 -19
- package/fesm2022/nanahoshi-mona-ui-date-input.mjs +6 -6
- package/fesm2022/nanahoshi-mona-ui-date-picker.mjs +11 -13
- package/fesm2022/nanahoshi-mona-ui-datetime-picker.mjs +18 -20
- package/fesm2022/nanahoshi-mona-ui-dialog.mjs +40 -40
- package/fesm2022/nanahoshi-mona-ui-dropdown-list.mjs +14 -16
- package/fesm2022/nanahoshi-mona-ui-dropdowns.mjs +52 -52
- package/fesm2022/nanahoshi-mona-ui-editor.mjs +462 -81
- package/fesm2022/nanahoshi-mona-ui-expansion-panel.mjs +26 -26
- package/fesm2022/nanahoshi-mona-ui-fieldset.mjs +8 -8
- package/fesm2022/nanahoshi-mona-ui-filter.mjs +14 -14
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-cell.component-B9SQH5N-.mjs → nanahoshi-mona-ui-grid-grid-footer-cell.component-B2ETh-uI.mjs} +14 -14
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-DlLwcCFT.mjs → nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-DZk18LJC.mjs} +2 -2
- package/fesm2022/nanahoshi-mona-ui-grid-grid-list.component-C7WKhhig.mjs +128 -0
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-toggle.component-DIUutx9s.mjs → nanahoshi-mona-ui-grid-grid-toggle.component-BRiY0CDX.mjs} +13 -13
- package/fesm2022/nanahoshi-mona-ui-grid-grid-virtual-list.component-BrYpFMyF.mjs +240 -0
- package/fesm2022/{nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-C3eZIaJK.mjs → nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-T9Bj98kl.mjs} +120 -120
- package/fesm2022/nanahoshi-mona-ui-grid.mjs +1 -1
- package/fesm2022/nanahoshi-mona-ui-internal-list.mjs +81 -81
- package/fesm2022/nanahoshi-mona-ui-internal-tree.mjs +35 -35
- package/fesm2022/nanahoshi-mona-ui-list-box.mjs +8 -8
- package/fesm2022/nanahoshi-mona-ui-list-view.mjs +7 -7
- package/fesm2022/nanahoshi-mona-ui-menubar.mjs +50 -50
- package/fesm2022/nanahoshi-mona-ui-multi-select.mjs +12 -14
- package/fesm2022/nanahoshi-mona-ui-notification.mjs +24 -24
- package/fesm2022/nanahoshi-mona-ui-numeric-text-box.mjs +69 -69
- package/fesm2022/nanahoshi-mona-ui-pager.mjs +29 -29
- package/fesm2022/nanahoshi-mona-ui-placeholder.mjs +9 -9
- package/fesm2022/nanahoshi-mona-ui-popover.mjs +12 -12
- package/fesm2022/nanahoshi-mona-ui-popup-menu.mjs +26 -26
- package/fesm2022/nanahoshi-mona-ui-popup.mjs +4 -4
- package/fesm2022/nanahoshi-mona-ui-progress-bar.mjs +2 -2
- package/fesm2022/nanahoshi-mona-ui-radio-button.mjs +55 -55
- package/fesm2022/nanahoshi-mona-ui-scroll-view.mjs +49 -49
- package/fesm2022/nanahoshi-mona-ui-slider.mjs +96 -96
- package/fesm2022/nanahoshi-mona-ui-split-button.mjs +30 -30
- package/fesm2022/nanahoshi-mona-ui-splitter.mjs +24 -24
- package/fesm2022/nanahoshi-mona-ui-stepper.mjs +29 -29
- package/fesm2022/nanahoshi-mona-ui-switch.mjs +42 -42
- package/fesm2022/nanahoshi-mona-ui-tabs.mjs +35 -39
- package/fesm2022/nanahoshi-mona-ui-text-area.mjs +22 -22
- package/fesm2022/nanahoshi-mona-ui-text-box.mjs +54 -54
- package/fesm2022/nanahoshi-mona-ui-time-picker.mjs +11 -19
- package/fesm2022/nanahoshi-mona-ui-time-selector.mjs +29 -29
- package/fesm2022/nanahoshi-mona-ui-tooltip.mjs +51 -51
- package/fesm2022/nanahoshi-mona-ui-tree-view.mjs +2 -2
- package/fesm2022/nanahoshi-mona-ui-window.mjs +27 -28
- package/package.json +30 -5
- package/types/nanahoshi-mona-ui-button.d.ts +4 -3
- package/types/nanahoshi-mona-ui-color-picker.d.ts +0 -3
- package/types/nanahoshi-mona-ui-dialog.d.ts +2 -2
- package/types/nanahoshi-mona-ui-editor.d.ts +17 -17
- package/types/nanahoshi-mona-ui-fieldset.d.ts +1 -1
- package/types/nanahoshi-mona-ui-filter.d.ts +2 -2
- package/types/nanahoshi-mona-ui-grid.d.ts +3 -3
- package/types/nanahoshi-mona-ui-internal-tree.d.ts +16 -16
- package/types/nanahoshi-mona-ui-menubar.d.ts +2 -2
- package/types/nanahoshi-mona-ui-stepper.d.ts +2 -2
- package/types/nanahoshi-mona-ui-tabs.d.ts +2 -2
- package/fesm2022/nanahoshi-mona-ui-grid-grid-list.component-Dgea-O0X.mjs +0 -130
- package/fesm2022/nanahoshi-mona-ui-grid-grid-virtual-list.component-DRHycGIh.mjs +0 -240
|
@@ -9,10 +9,10 @@ import { startWith, pairwise, map, Subject, timer, interval, takeUntil, asyncSch
|
|
|
9
9
|
import { twMerge } from 'tailwind-merge';
|
|
10
10
|
import { cva } from 'class-variance-authority';
|
|
11
11
|
|
|
12
|
-
const scrollViewBaseVariants = cva(`
|
|
13
|
-
block relative w-full h-full outline-none
|
|
14
|
-
overflow-hidden
|
|
15
|
-
border border-border border-2
|
|
12
|
+
const scrollViewBaseVariants = cva(`
|
|
13
|
+
block relative w-full h-full outline-none
|
|
14
|
+
overflow-hidden
|
|
15
|
+
border border-border border-2
|
|
16
16
|
`, {
|
|
17
17
|
variants: {
|
|
18
18
|
rounded: {
|
|
@@ -23,26 +23,26 @@ const scrollViewBaseVariants = cva(`
|
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
});
|
|
26
|
-
const scrollViewContentVariants = cva(`
|
|
27
|
-
absolute inset-0 overflow-hidden
|
|
26
|
+
const scrollViewContentVariants = cva(`
|
|
27
|
+
absolute inset-0 overflow-hidden
|
|
28
28
|
`);
|
|
29
|
-
const scrollViewListVariants = cva(`
|
|
30
|
-
relative list-none h-full
|
|
31
|
-
[&_li]:absolute
|
|
32
|
-
[&_li]:inset-0
|
|
33
|
-
[&_li]:outline-none
|
|
29
|
+
const scrollViewListVariants = cva(`
|
|
30
|
+
relative list-none h-full
|
|
31
|
+
[&_li]:absolute
|
|
32
|
+
[&_li]:inset-0
|
|
33
|
+
[&_li]:outline-none
|
|
34
34
|
`);
|
|
35
|
-
const scrollViewArrowVariants = cva(`
|
|
36
|
-
absolute top-0 bottom-0 px-1
|
|
37
|
-
flex items-center justify-center
|
|
38
|
-
cursor-pointer select-none
|
|
39
|
-
|
|
40
|
-
text-foreground
|
|
41
|
-
[&_svg]:stroke-white
|
|
42
|
-
[&_svg]:drop-shadow-[0_0_15px_#000]
|
|
43
|
-
[&_svg]:opacity-40
|
|
44
|
-
hover:[&_svg]:opacity-100
|
|
45
|
-
[&_svg]:transition-opacity duration-300 ease-out
|
|
35
|
+
const scrollViewArrowVariants = cva(`
|
|
36
|
+
absolute top-0 bottom-0 px-1
|
|
37
|
+
flex items-center justify-center
|
|
38
|
+
cursor-pointer select-none
|
|
39
|
+
|
|
40
|
+
text-foreground
|
|
41
|
+
[&_svg]:stroke-white
|
|
42
|
+
[&_svg]:drop-shadow-[0_0_15px_#000]
|
|
43
|
+
[&_svg]:opacity-40
|
|
44
|
+
hover:[&_svg]:opacity-100
|
|
45
|
+
[&_svg]:transition-opacity duration-300 ease-out
|
|
46
46
|
`, {
|
|
47
47
|
variants: {
|
|
48
48
|
hidden: {
|
|
@@ -59,8 +59,8 @@ const scrollViewArrowVariants = cva(`
|
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
});
|
|
62
|
-
const scrollViewPagerVariants = cva(`
|
|
63
|
-
absolute left-0 right-0 bottom-0 flex items-center justify-center
|
|
62
|
+
const scrollViewPagerVariants = cva(`
|
|
63
|
+
absolute left-0 right-0 bottom-0 flex items-center justify-center
|
|
64
64
|
`, {
|
|
65
65
|
variants: {
|
|
66
66
|
pagerOverlay: {
|
|
@@ -70,22 +70,22 @@ const scrollViewPagerVariants = cva(`
|
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
});
|
|
73
|
-
const scrollViewPagerListContainerVariants = cva(`
|
|
74
|
-
flex items-center justify-center
|
|
75
|
-
flex-1 overflow-hidden
|
|
73
|
+
const scrollViewPagerListContainerVariants = cva(`
|
|
74
|
+
flex items-center justify-center
|
|
75
|
+
flex-1 overflow-hidden
|
|
76
76
|
`);
|
|
77
|
-
const scrollViewPagerListVariants = cva(`
|
|
78
|
-
flex items-center gap-2
|
|
79
|
-
list-none overflow-hidden
|
|
80
|
-
flex-nowrap px-1 py-3
|
|
77
|
+
const scrollViewPagerListVariants = cva(`
|
|
78
|
+
flex items-center gap-2
|
|
79
|
+
list-none overflow-hidden
|
|
80
|
+
flex-nowrap px-1 py-3
|
|
81
81
|
`);
|
|
82
|
-
const scrollViewPagerListItemVariants = cva(`
|
|
83
|
-
w-3 h-3
|
|
84
|
-
content-[' ']
|
|
85
|
-
flex-grow-0 flex-shrink-0 flex-basis-3
|
|
86
|
-
cursor-pointer
|
|
87
|
-
border border-border bg-white
|
|
88
|
-
not-last:mr-3
|
|
82
|
+
const scrollViewPagerListItemVariants = cva(`
|
|
83
|
+
w-3 h-3
|
|
84
|
+
content-[' ']
|
|
85
|
+
flex-grow-0 flex-shrink-0 flex-basis-3
|
|
86
|
+
cursor-pointer
|
|
87
|
+
border border-border bg-white
|
|
88
|
+
not-last:mr-3
|
|
89
89
|
`, {
|
|
90
90
|
variants: {
|
|
91
91
|
active: {
|
|
@@ -101,17 +101,17 @@ const scrollViewPagerListItemVariants = cva(`
|
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
103
|
});
|
|
104
|
-
const scrollViewPagerArrowVariants = cva(`
|
|
105
|
-
flex items-center justify-center
|
|
106
|
-
p-2 cursor-pointer select-none
|
|
107
|
-
transition-opacity duration-300 ease-out
|
|
108
|
-
opacity-70 hover:opacity-100
|
|
109
|
-
font-medium
|
|
110
|
-
[&_svg]:stroke-white
|
|
111
|
-
[&_svg]:drop-shadow-[0_0_15px_#000]
|
|
112
|
-
[&_svg]:opacity-40
|
|
113
|
-
hover:[&_svg]:opacity-100
|
|
114
|
-
[&_svg]:transition-opacity duration-300 ease-out
|
|
104
|
+
const scrollViewPagerArrowVariants = cva(`
|
|
105
|
+
flex items-center justify-center
|
|
106
|
+
p-2 cursor-pointer select-none
|
|
107
|
+
transition-opacity duration-300 ease-out
|
|
108
|
+
opacity-70 hover:opacity-100
|
|
109
|
+
font-medium
|
|
110
|
+
[&_svg]:stroke-white
|
|
111
|
+
[&_svg]:drop-shadow-[0_0_15px_#000]
|
|
112
|
+
[&_svg]:opacity-40
|
|
113
|
+
hover:[&_svg]:opacity-100
|
|
114
|
+
[&_svg]:transition-opacity duration-300 ease-out
|
|
115
115
|
`);
|
|
116
116
|
|
|
117
117
|
const scrollViewBaseThemeVariants = (theme) => {
|
|
@@ -150,105 +150,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
150
150
|
}]
|
|
151
151
|
}] });
|
|
152
152
|
|
|
153
|
-
const sliderBaseVariants = cva(`
|
|
154
|
-
flex relative select-none
|
|
155
|
-
|
|
156
|
-
data-[orientation="horizontal"]:h-6
|
|
157
|
-
data-[orientation="horizontal"]:w-full
|
|
158
|
-
data-[orientation="horizontal"]:min-w-[200px]
|
|
159
|
-
data-[orientation="horizontal"]:items-center
|
|
160
|
-
|
|
161
|
-
data-[orientation="vertical"]:w-6
|
|
162
|
-
data-[orientation="vertical"]:h-[200px]
|
|
163
|
-
data-[orientation="vertical"]:justify-center
|
|
164
|
-
|
|
165
|
-
data-[disabled="true"]:pointer-events-none
|
|
166
|
-
data-[disabled="true"]:opacity-50
|
|
167
|
-
data-[disabled="true"]:cursor-not-allowed
|
|
153
|
+
const sliderBaseVariants = cva(`
|
|
154
|
+
flex relative select-none
|
|
155
|
+
|
|
156
|
+
data-[orientation="horizontal"]:h-6
|
|
157
|
+
data-[orientation="horizontal"]:w-full
|
|
158
|
+
data-[orientation="horizontal"]:min-w-[200px]
|
|
159
|
+
data-[orientation="horizontal"]:items-center
|
|
160
|
+
|
|
161
|
+
data-[orientation="vertical"]:w-6
|
|
162
|
+
data-[orientation="vertical"]:h-[200px]
|
|
163
|
+
data-[orientation="vertical"]:justify-center
|
|
164
|
+
|
|
165
|
+
data-[disabled="true"]:pointer-events-none
|
|
166
|
+
data-[disabled="true"]:opacity-50
|
|
167
|
+
data-[disabled="true"]:cursor-not-allowed
|
|
168
168
|
`);
|
|
169
|
-
const sliderTrackVariants = cva(`
|
|
170
|
-
relative z-2 cursor-pointer
|
|
171
|
-
border border-input-border
|
|
172
|
-
bg-background
|
|
173
|
-
|
|
174
|
-
data-[orientation="horizontal"]:w-full
|
|
175
|
-
data-[orientation="horizontal"]:h-1.5
|
|
176
|
-
|
|
177
|
-
data-[orientation="vertical"]:h-full
|
|
178
|
-
data-[orientation="vertical"]:w-1.5
|
|
179
|
-
|
|
169
|
+
const sliderTrackVariants = cva(`
|
|
170
|
+
relative z-2 cursor-pointer
|
|
171
|
+
border border-input-border
|
|
172
|
+
bg-background text-foreground
|
|
173
|
+
|
|
174
|
+
data-[orientation="horizontal"]:w-full
|
|
175
|
+
data-[orientation="horizontal"]:h-1.5
|
|
176
|
+
|
|
177
|
+
data-[orientation="vertical"]:h-full
|
|
178
|
+
data-[orientation="vertical"]:w-1.5
|
|
179
|
+
|
|
180
180
|
`);
|
|
181
|
-
const sliderSelectionVariants = cva(`
|
|
182
|
-
absolute
|
|
183
|
-
bg-primary border-none
|
|
184
|
-
|
|
185
|
-
ease-out duration-200
|
|
186
|
-
|
|
187
|
-
data-[orientation="horizontal"]:top-0
|
|
188
|
-
data-[orientation="horizontal"]:bottom-0
|
|
189
|
-
data-[orientation="horizontal"]:transition-[left,right]
|
|
190
|
-
data-[orientation="horizontal"]:data-[dragging="true"]:transition-none
|
|
191
|
-
|
|
192
|
-
data-[orientation="vertical"]:left-0
|
|
193
|
-
data-[orientation="vertical"]:right-0
|
|
194
|
-
data-[orientation="vertical"]:transition-[top,bottom]
|
|
195
|
-
data-[orientation="vertical"]:data-[dragging="true"]:transition-none
|
|
181
|
+
const sliderSelectionVariants = cva(`
|
|
182
|
+
absolute
|
|
183
|
+
bg-primary border-none
|
|
184
|
+
|
|
185
|
+
ease-out duration-200
|
|
186
|
+
|
|
187
|
+
data-[orientation="horizontal"]:top-0
|
|
188
|
+
data-[orientation="horizontal"]:bottom-0
|
|
189
|
+
data-[orientation="horizontal"]:transition-[left,right]
|
|
190
|
+
data-[orientation="horizontal"]:data-[dragging="true"]:transition-none
|
|
191
|
+
|
|
192
|
+
data-[orientation="vertical"]:left-0
|
|
193
|
+
data-[orientation="vertical"]:right-0
|
|
194
|
+
data-[orientation="vertical"]:transition-[top,bottom]
|
|
195
|
+
data-[orientation="vertical"]:data-[dragging="true"]:transition-none
|
|
196
196
|
`);
|
|
197
|
-
const sliderTickListVariants = cva(`
|
|
198
|
-
absolute
|
|
199
|
-
|
|
200
|
-
data-[orientation="horizontal"]:w-full
|
|
201
|
-
data-[orientation="horizontal"]:h-6
|
|
202
|
-
data-[orientation="horizontal"]:top-0
|
|
203
|
-
data-[orientation="horizontal"]:left-0
|
|
204
|
-
|
|
205
|
-
data-[orientation="vertical"]:w-6
|
|
206
|
-
data-[orientation="vertical"]:h-full
|
|
207
|
-
data-[orientation="vertical"]:top-0
|
|
208
|
-
data-[orientation="vertical"]:left-0
|
|
197
|
+
const sliderTickListVariants = cva(`
|
|
198
|
+
absolute
|
|
199
|
+
|
|
200
|
+
data-[orientation="horizontal"]:w-full
|
|
201
|
+
data-[orientation="horizontal"]:h-6
|
|
202
|
+
data-[orientation="horizontal"]:top-0
|
|
203
|
+
data-[orientation="horizontal"]:left-0
|
|
204
|
+
|
|
205
|
+
data-[orientation="vertical"]:w-6
|
|
206
|
+
data-[orientation="vertical"]:h-full
|
|
207
|
+
data-[orientation="vertical"]:top-0
|
|
208
|
+
data-[orientation="vertical"]:left-0
|
|
209
209
|
`);
|
|
210
|
-
const sliderTickVariants = cva(`
|
|
211
|
-
cursor-pointer
|
|
212
|
-
bg-input-border
|
|
213
|
-
brightness-75
|
|
210
|
+
const sliderTickVariants = cva(`
|
|
211
|
+
cursor-pointer
|
|
212
|
+
bg-input-border
|
|
213
|
+
brightness-75
|
|
214
214
|
`);
|
|
215
|
-
const sliderTickLabelListVariants = cva(`
|
|
216
|
-
absolute
|
|
217
|
-
w-full h-full
|
|
218
|
-
select-none
|
|
215
|
+
const sliderTickLabelListVariants = cva(`
|
|
216
|
+
absolute
|
|
217
|
+
w-full h-full
|
|
218
|
+
select-none
|
|
219
219
|
`);
|
|
220
|
-
const sliderTickLabelVariants = cva(`
|
|
221
|
-
absolute flex
|
|
222
|
-
items-center justify-center
|
|
223
|
-
|
|
224
|
-
text-xs/[1.667]
|
|
225
|
-
text-foreground
|
|
226
|
-
|
|
227
|
-
data-[orientation="vertical"]:w-4.25
|
|
228
|
-
data-[orientation="vertical"]:h-auto
|
|
220
|
+
const sliderTickLabelVariants = cva(`
|
|
221
|
+
absolute flex
|
|
222
|
+
items-center justify-center
|
|
223
|
+
|
|
224
|
+
text-xs/[1.667]
|
|
225
|
+
text-foreground
|
|
226
|
+
|
|
227
|
+
data-[orientation="vertical"]:w-4.25
|
|
228
|
+
data-[orientation="vertical"]:h-auto
|
|
229
229
|
`);
|
|
230
|
-
const sliderHandleVariants = cva(`
|
|
231
|
-
absolute z-2 flex items-center justify-center
|
|
232
|
-
w-4.25 h-4.25
|
|
233
|
-
cursor-pointer
|
|
234
|
-
outline-none
|
|
235
|
-
bg-primary border border-border
|
|
236
|
-
|
|
237
|
-
ease-out duration-200
|
|
238
|
-
|
|
239
|
-
data-[orientation="horizontal"]:translate-x-[-50%]
|
|
240
|
-
data-[orientation="horizontal"]:transition-[left]
|
|
241
|
-
data-[orientation="horizontal"]:data-[dragging="true"]:transition-none
|
|
242
|
-
|
|
243
|
-
data-[orientation="vertical"]:translate-y-[50%]
|
|
244
|
-
data-[orientation="vertical"]:transition-[bottom]
|
|
245
|
-
data-[orientation="vertical"]:data-[dragging="true"]:transition-none
|
|
246
|
-
|
|
247
|
-
data-[focused="true"]:ring-2
|
|
248
|
-
data-[focused="true"]:ring-primary/40
|
|
249
|
-
|
|
250
|
-
data-[invalid="true"]:border-error
|
|
251
|
-
data-[invalid="true"]:ring-2 data-[invalid="true"]:ring-error/40
|
|
230
|
+
const sliderHandleVariants = cva(`
|
|
231
|
+
absolute z-2 flex items-center justify-center
|
|
232
|
+
w-4.25 h-4.25
|
|
233
|
+
cursor-pointer
|
|
234
|
+
outline-none
|
|
235
|
+
bg-primary border border-border
|
|
236
|
+
|
|
237
|
+
ease-out duration-200
|
|
238
|
+
|
|
239
|
+
data-[orientation="horizontal"]:translate-x-[-50%]
|
|
240
|
+
data-[orientation="horizontal"]:transition-[left]
|
|
241
|
+
data-[orientation="horizontal"]:data-[dragging="true"]:transition-none
|
|
242
|
+
|
|
243
|
+
data-[orientation="vertical"]:translate-y-[50%]
|
|
244
|
+
data-[orientation="vertical"]:transition-[bottom]
|
|
245
|
+
data-[orientation="vertical"]:data-[dragging="true"]:transition-none
|
|
246
|
+
|
|
247
|
+
data-[focused="true"]:ring-2
|
|
248
|
+
data-[focused="true"]:ring-primary/40
|
|
249
|
+
|
|
250
|
+
data-[invalid="true"]:border-error
|
|
251
|
+
data-[invalid="true"]:ring-2 data-[invalid="true"]:ring-error/40
|
|
252
252
|
`, {
|
|
253
253
|
variants: {
|
|
254
254
|
rounded: {
|
|
@@ -786,7 +786,7 @@ class SliderComponent extends SliderBaseComponent {
|
|
|
786
786
|
});
|
|
787
787
|
}
|
|
788
788
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
789
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SliderComponent, isStandalone: true, selector: "mona-slider", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focus": "focus()" }, properties: { "class": "baseClasses()", "class.mona-slider": "true", "attr.data-disabled": "effectiveDisabled() || null", "attr.data-orientation": "orientation()" } }, viewQueries: [{ propertyName: "sliderHandle", first: true, predicate: ["sliderHandle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\
|
|
789
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SliderComponent, isStandalone: true, selector: "mona-slider", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focus": "focus()" }, properties: { "class": "baseClasses()", "class.mona-slider": "true", "attr.data-disabled": "effectiveDisabled() || null", "attr.data-orientation": "orientation()" } }, viewQueries: [{ propertyName: "sliderHandle", first: true, predicate: ["sliderHandle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n [class]=\"trackClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [style.height]=\"orientation() === 'horizontal' ? sliderTrackSize() : undefined\"\n [style.width]=\"orientation() === 'vertical' ? sliderTrackSize() : undefined\"\n [style]=\"trackBackgroundStyle()\">\n <div\n [class]=\"selectionClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-dragging]=\"dragging()\"\n [style.left.%]=\"orientation() === 'horizontal' ? selectionLeft() : undefined\"\n [style.right.%]=\"orientation() === 'horizontal' ? 100 - selectionRight() : undefined\"\n [style.bottom.%]=\"orientation() === 'vertical' ? selectionLeft() : undefined\"\n [style.top.%]=\"orientation() === 'vertical' ? 100 - selectionRight() : undefined\"\n [style]=\"selectionBackgroundStyle()\"></div>\n</div>\n@if (showTicks()) {\n <div [class]=\"tickListClasses()\" [attr.data-orientation]=\"orientation()\">\n @for (tick of renderTicks(); track tick.index) {\n <span\n [class]=\"tickClasses()\"\n [style]=\"tick | tickStyle: tickStyleArgs()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-value]=\"tick.value\"\n monaSliderTick>\n </span>\n }\n </div>\n}\n@if (showTicks() && showLabels()) {\n <div\n [class]=\"tickLabelListClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-label-position]=\"labelPosition()\">\n @for (tick of labelTicks(); track tick.index) {\n <span\n [class]=\"tickLabelClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [style]=\"tick | labelStyle: labelStyleArgs()\">\n @if (!tickValueTemplate()) {\n <span>{{ tick.value }}</span>\n } @else {\n <span>\n <ng-container\n *ngTemplateOutlet=\"\n tickValueTemplate() ?? null;\n context: { $implicit: tick.value }\n \"></ng-container>\n </span>\n }\n </span>\n }\n </div>\n}\n<div\n [class]=\"sliderHandleClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-dragging]=\"dragging()\"\n [attr.data-focused]=\"handleFocused()\"\n [style]=\"handleStyle()\"\n [style.left.%]=\"orientation() === 'horizontal' ? handlePosition() : undefined\"\n [style.bottom.%]=\"orientation() === 'vertical' ? handlePosition() : undefined\"\n [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\n [attr.role]=\"'slider'\"\n [attr.aria-valuemin]=\"minValue()\"\n [attr.aria-valuemax]=\"maxValue()\"\n [attr.aria-valuenow]=\"normalizedValue()\"\n [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()) : null\"\n [attr.aria-orientation]=\"orientation()\"\n [attr.aria-disabled]=\"effectiveDisabled() || null\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.data-invalid]=\"invalid() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n #sliderHandle>\n @if (handleTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue() }\"></ng-container>\n }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SliderTickDirective, selector: "span[monaSliderTick]" }, { kind: "pipe", type: LabelStylePipe, name: "labelStyle" }, { kind: "pipe", type: TickStylePipe, name: "tickStyle" }] }); }
|
|
790
790
|
}
|
|
791
791
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderComponent, decorators: [{
|
|
792
792
|
type: Component,
|
|
@@ -796,7 +796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
796
796
|
"[attr.data-disabled]": "effectiveDisabled() || null",
|
|
797
797
|
"[attr.data-orientation]": "orientation()",
|
|
798
798
|
"(focus)": "focus()"
|
|
799
|
-
}, template: "<div\
|
|
799
|
+
}, template: "<div\n [class]=\"trackClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [style.height]=\"orientation() === 'horizontal' ? sliderTrackSize() : undefined\"\n [style.width]=\"orientation() === 'vertical' ? sliderTrackSize() : undefined\"\n [style]=\"trackBackgroundStyle()\">\n <div\n [class]=\"selectionClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-dragging]=\"dragging()\"\n [style.left.%]=\"orientation() === 'horizontal' ? selectionLeft() : undefined\"\n [style.right.%]=\"orientation() === 'horizontal' ? 100 - selectionRight() : undefined\"\n [style.bottom.%]=\"orientation() === 'vertical' ? selectionLeft() : undefined\"\n [style.top.%]=\"orientation() === 'vertical' ? 100 - selectionRight() : undefined\"\n [style]=\"selectionBackgroundStyle()\"></div>\n</div>\n@if (showTicks()) {\n <div [class]=\"tickListClasses()\" [attr.data-orientation]=\"orientation()\">\n @for (tick of renderTicks(); track tick.index) {\n <span\n [class]=\"tickClasses()\"\n [style]=\"tick | tickStyle: tickStyleArgs()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-value]=\"tick.value\"\n monaSliderTick>\n </span>\n }\n </div>\n}\n@if (showTicks() && showLabels()) {\n <div\n [class]=\"tickLabelListClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-label-position]=\"labelPosition()\">\n @for (tick of labelTicks(); track tick.index) {\n <span\n [class]=\"tickLabelClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [style]=\"tick | labelStyle: labelStyleArgs()\">\n @if (!tickValueTemplate()) {\n <span>{{ tick.value }}</span>\n } @else {\n <span>\n <ng-container\n *ngTemplateOutlet=\"\n tickValueTemplate() ?? null;\n context: { $implicit: tick.value }\n \"></ng-container>\n </span>\n }\n </span>\n }\n </div>\n}\n<div\n [class]=\"sliderHandleClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-dragging]=\"dragging()\"\n [attr.data-focused]=\"handleFocused()\"\n [style]=\"handleStyle()\"\n [style.left.%]=\"orientation() === 'horizontal' ? handlePosition() : undefined\"\n [style.bottom.%]=\"orientation() === 'vertical' ? handlePosition() : undefined\"\n [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\n [attr.role]=\"'slider'\"\n [attr.aria-valuemin]=\"minValue()\"\n [attr.aria-valuemax]=\"maxValue()\"\n [attr.aria-valuenow]=\"normalizedValue()\"\n [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()) : null\"\n [attr.aria-orientation]=\"orientation()\"\n [attr.aria-disabled]=\"effectiveDisabled() || null\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.data-invalid]=\"invalid() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n #sliderHandle>\n @if (handleTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue() }\"></ng-container>\n }\n</div>\n" }]
|
|
800
800
|
}], propDecorators: { sliderHandle: [{ type: i0.ViewChild, args: ["sliderHandle", { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
801
801
|
|
|
802
802
|
class RangeSliderComponent extends SliderBaseComponent {
|
|
@@ -1024,7 +1024,7 @@ class RangeSliderComponent extends SliderBaseComponent {
|
|
|
1024
1024
|
});
|
|
1025
1025
|
}
|
|
1026
1026
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RangeSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1027
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RangeSliderComponent, isStandalone: true, selector: "mona-range-slider", inputs: { ariaLabelEnd: { classPropertyName: "ariaLabelEnd", publicName: "aria-label-end", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelStart: { classPropertyName: "ariaLabelStart", publicName: "aria-label-start", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focus": "focus()" }, properties: { "class": "baseClasses()", "class.mona-slider": "true", "attr.data-disabled": "effectiveDisabled()", "attr.data-orientation": "orientation()" } }, viewQueries: [{ propertyName: "secondarySliderHandle", first: true, predicate: ["secondarySliderHandle"], descendants: true, isSignal: true }, { propertyName: "sliderHandle", first: true, predicate: ["sliderHandle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\
|
|
1027
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RangeSliderComponent, isStandalone: true, selector: "mona-range-slider", inputs: { ariaLabelEnd: { classPropertyName: "ariaLabelEnd", publicName: "aria-label-end", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelStart: { classPropertyName: "ariaLabelStart", publicName: "aria-label-start", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focus": "focus()" }, properties: { "class": "baseClasses()", "class.mona-slider": "true", "attr.data-disabled": "effectiveDisabled()", "attr.data-orientation": "orientation()" } }, viewQueries: [{ propertyName: "secondarySliderHandle", first: true, predicate: ["secondarySliderHandle"], descendants: true, isSignal: true }, { propertyName: "sliderHandle", first: true, predicate: ["sliderHandle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n [class]=\"trackClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [style.height]=\"orientation() === 'horizontal' ? sliderTrackSize() : undefined\"\n [style.width]=\"orientation() === 'vertical' ? sliderTrackSize() : undefined\"\n [style]=\"trackBackgroundStyle()\">\n <div\n [class]=\"selectionClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-dragging]=\"dragging()\"\n [style.left.%]=\"orientation() === 'horizontal' ? selectionLeft() : undefined\"\n [style.right.%]=\"orientation() === 'horizontal' ? 100 - selectionRight() : undefined\"\n [style.bottom.%]=\"orientation() === 'vertical' ? selectionLeft() : undefined\"\n [style.top.%]=\"orientation() === 'vertical' ? 100 - selectionRight() : undefined\"\n [style]=\"selectionBackgroundStyle()\"></div>\n</div>\n@if (showTicks()) {\n <div [class]=\"tickListClasses()\" [attr.data-orientation]=\"orientation()\">\n @for (tick of renderTicks(); track tick.index) {\n <span\n [class]=\"tickClasses()\"\n [style]=\"tick | tickStyle: tickStyleArgs()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-value]=\"tick.value\"\n monaSliderTick>\n </span>\n }\n </div>\n}\n@if (showTicks() && showLabels()) {\n <div\n [class]=\"tickLabelListClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-label-position]=\"labelPosition()\">\n @for (tick of labelTicks(); track tick.index) {\n <span\n [class]=\"tickLabelClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [style]=\"tick | labelStyle: labelStyleArgs()\">\n @if (!tickValueTemplate()) {\n <span>{{ tick.value }}</span>\n } @else {\n <span>\n <ng-container\n *ngTemplateOutlet=\"\n tickValueTemplate() ?? null;\n context: { $implicit: tick.value }\n \"></ng-container>\n </span>\n }\n </span>\n }\n </div>\n}\n<div\n [class]=\"sliderHandleClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-dragging]=\"dragging()\"\n [attr.data-focused]=\"primaryHandleFocused()\"\n [style]=\"primaryHandleStyle()\"\n [style.left.%]=\"orientation() === 'horizontal' ? primaryHandlePosition() : undefined\"\n [style.bottom.%]=\"orientation() === 'vertical' ? primaryHandlePosition() : undefined\"\n [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\n [attr.role]=\"'slider'\"\n [attr.aria-valuemin]=\"minValue()\"\n [attr.aria-valuemax]=\"maxValue()\"\n [attr.aria-valuenow]=\"normalizedValue()[0]\"\n [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()[0]) : null\"\n [attr.aria-orientation]=\"orientation()\"\n [attr.aria-disabled]=\"effectiveDisabled() || null\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.data-invalid]=\"invalid() || null\"\n [attr.aria-label]=\"ariaLabelStart()\"\n #sliderHandle>\n @if (handleTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue()[0] }\"></ng-container>\n }\n</div>\n<div\n [class]=\"sliderHandleClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-dragging]=\"dragging()\"\n [attr.data-focused]=\"secondaryHandleFocused()\"\n [style]=\"secondaryHandleStyle()\"\n [style.left.%]=\"orientation() === 'horizontal' ? secondaryHandlePosition() : undefined\"\n [style.bottom.%]=\"orientation() === 'vertical' ? secondaryHandlePosition() : undefined\"\n [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\n [attr.role]=\"'slider'\"\n [attr.aria-valuemin]=\"minValue()\"\n [attr.aria-valuemax]=\"maxValue()\"\n [attr.aria-valuenow]=\"normalizedValue()[1]\"\n [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()[1]) : null\"\n [attr.aria-orientation]=\"orientation()\"\n [attr.aria-disabled]=\"effectiveDisabled() || null\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.data-invalid]=\"invalid() || null\"\n [attr.aria-label]=\"ariaLabelEnd()\"\n #secondarySliderHandle>\n @if (handleTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue()[1] }\"></ng-container>\n }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SliderTickDirective, selector: "span[monaSliderTick]" }, { kind: "pipe", type: LabelStylePipe, name: "labelStyle" }, { kind: "pipe", type: TickStylePipe, name: "tickStyle" }] }); }
|
|
1028
1028
|
}
|
|
1029
1029
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RangeSliderComponent, decorators: [{
|
|
1030
1030
|
type: Component,
|
|
@@ -1034,7 +1034,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
1034
1034
|
"[attr.data-disabled]": "effectiveDisabled()",
|
|
1035
1035
|
"[attr.data-orientation]": "orientation()",
|
|
1036
1036
|
"(focus)": "focus()"
|
|
1037
|
-
}, template: "<div\
|
|
1037
|
+
}, template: "<div\n [class]=\"trackClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [style.height]=\"orientation() === 'horizontal' ? sliderTrackSize() : undefined\"\n [style.width]=\"orientation() === 'vertical' ? sliderTrackSize() : undefined\"\n [style]=\"trackBackgroundStyle()\">\n <div\n [class]=\"selectionClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-dragging]=\"dragging()\"\n [style.left.%]=\"orientation() === 'horizontal' ? selectionLeft() : undefined\"\n [style.right.%]=\"orientation() === 'horizontal' ? 100 - selectionRight() : undefined\"\n [style.bottom.%]=\"orientation() === 'vertical' ? selectionLeft() : undefined\"\n [style.top.%]=\"orientation() === 'vertical' ? 100 - selectionRight() : undefined\"\n [style]=\"selectionBackgroundStyle()\"></div>\n</div>\n@if (showTicks()) {\n <div [class]=\"tickListClasses()\" [attr.data-orientation]=\"orientation()\">\n @for (tick of renderTicks(); track tick.index) {\n <span\n [class]=\"tickClasses()\"\n [style]=\"tick | tickStyle: tickStyleArgs()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-value]=\"tick.value\"\n monaSliderTick>\n </span>\n }\n </div>\n}\n@if (showTicks() && showLabels()) {\n <div\n [class]=\"tickLabelListClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-label-position]=\"labelPosition()\">\n @for (tick of labelTicks(); track tick.index) {\n <span\n [class]=\"tickLabelClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [style]=\"tick | labelStyle: labelStyleArgs()\">\n @if (!tickValueTemplate()) {\n <span>{{ tick.value }}</span>\n } @else {\n <span>\n <ng-container\n *ngTemplateOutlet=\"\n tickValueTemplate() ?? null;\n context: { $implicit: tick.value }\n \"></ng-container>\n </span>\n }\n </span>\n }\n </div>\n}\n<div\n [class]=\"sliderHandleClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-dragging]=\"dragging()\"\n [attr.data-focused]=\"primaryHandleFocused()\"\n [style]=\"primaryHandleStyle()\"\n [style.left.%]=\"orientation() === 'horizontal' ? primaryHandlePosition() : undefined\"\n [style.bottom.%]=\"orientation() === 'vertical' ? primaryHandlePosition() : undefined\"\n [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\n [attr.role]=\"'slider'\"\n [attr.aria-valuemin]=\"minValue()\"\n [attr.aria-valuemax]=\"maxValue()\"\n [attr.aria-valuenow]=\"normalizedValue()[0]\"\n [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()[0]) : null\"\n [attr.aria-orientation]=\"orientation()\"\n [attr.aria-disabled]=\"effectiveDisabled() || null\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.data-invalid]=\"invalid() || null\"\n [attr.aria-label]=\"ariaLabelStart()\"\n #sliderHandle>\n @if (handleTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue()[0] }\"></ng-container>\n }\n</div>\n<div\n [class]=\"sliderHandleClasses()\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-dragging]=\"dragging()\"\n [attr.data-focused]=\"secondaryHandleFocused()\"\n [style]=\"secondaryHandleStyle()\"\n [style.left.%]=\"orientation() === 'horizontal' ? secondaryHandlePosition() : undefined\"\n [style.bottom.%]=\"orientation() === 'vertical' ? secondaryHandlePosition() : undefined\"\n [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\n [attr.role]=\"'slider'\"\n [attr.aria-valuemin]=\"minValue()\"\n [attr.aria-valuemax]=\"maxValue()\"\n [attr.aria-valuenow]=\"normalizedValue()[1]\"\n [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()[1]) : null\"\n [attr.aria-orientation]=\"orientation()\"\n [attr.aria-disabled]=\"effectiveDisabled() || null\"\n [attr.aria-invalid]=\"invalid() || null\"\n [attr.data-invalid]=\"invalid() || null\"\n [attr.aria-label]=\"ariaLabelEnd()\"\n #secondarySliderHandle>\n @if (handleTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue()[1] }\"></ng-container>\n }\n</div>\n" }]
|
|
1038
1038
|
}], propDecorators: { secondarySliderHandle: [{ type: i0.ViewChild, args: ["secondarySliderHandle", { isSignal: true }] }], sliderHandle: [{ type: i0.ViewChild, args: ["sliderHandle", { isSignal: true }] }], ariaLabelEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label-end", required: false }] }], ariaLabelStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label-start", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
1039
1039
|
|
|
1040
1040
|
/*
|
|
@@ -137,10 +137,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
137
137
|
}]
|
|
138
138
|
}] });
|
|
139
139
|
|
|
140
|
-
const splitButtonVariants = cva(`
|
|
141
|
-
inline-flex flex-nowrap items-center
|
|
142
|
-
[&>button]:focus-visible:z-10
|
|
143
|
-
[&_svg]:w-5 [&_svg]:h-5
|
|
140
|
+
const splitButtonVariants = cva(`
|
|
141
|
+
inline-flex flex-nowrap items-center
|
|
142
|
+
[&>button]:focus-visible:z-10
|
|
143
|
+
[&_svg]:w-5 [&_svg]:h-5
|
|
144
144
|
`, {
|
|
145
145
|
variants: {
|
|
146
146
|
look: {
|
|
@@ -155,39 +155,39 @@ const splitButtonVariants = cva(`
|
|
|
155
155
|
warning: ""
|
|
156
156
|
},
|
|
157
157
|
rounded: {
|
|
158
|
-
full: `
|
|
159
|
-
rounded-full
|
|
160
|
-
[&>button]:first:rounded-tl-full [&>button]:first:rounded-bl-full
|
|
161
|
-
[&>button]:last:rounded-tr-full [&>button]:last:rounded-br-full
|
|
158
|
+
full: `
|
|
159
|
+
rounded-full
|
|
160
|
+
[&>button]:first:rounded-tl-full [&>button]:first:rounded-bl-full
|
|
161
|
+
[&>button]:last:rounded-tr-full [&>button]:last:rounded-br-full
|
|
162
162
|
`,
|
|
163
|
-
large: `
|
|
164
|
-
rounded-lg
|
|
165
|
-
[&>button]:first:rounded-tl-lg [&>button]:first:rounded-bl-lg
|
|
166
|
-
[&>button]:last:rounded-tr-lg [&>button]:last:rounded-br-lg
|
|
163
|
+
large: `
|
|
164
|
+
rounded-lg
|
|
165
|
+
[&>button]:first:rounded-tl-lg [&>button]:first:rounded-bl-lg
|
|
166
|
+
[&>button]:last:rounded-tr-lg [&>button]:last:rounded-br-lg
|
|
167
167
|
`,
|
|
168
|
-
medium: `
|
|
169
|
-
rounded-md
|
|
170
|
-
[&>button]:first:rounded-tl-md [&>button]:first:rounded-bl-md
|
|
171
|
-
[&>button]:last:rounded-tr-md [&>button]:last:rounded-br-md
|
|
168
|
+
medium: `
|
|
169
|
+
rounded-md
|
|
170
|
+
[&>button]:first:rounded-tl-md [&>button]:first:rounded-bl-md
|
|
171
|
+
[&>button]:last:rounded-tr-md [&>button]:last:rounded-br-md
|
|
172
172
|
`,
|
|
173
|
-
none: `
|
|
174
|
-
rounded-none
|
|
173
|
+
none: `
|
|
174
|
+
rounded-none
|
|
175
175
|
`,
|
|
176
|
-
small: `
|
|
177
|
-
rounded-sm
|
|
178
|
-
[&>button]:first:rounded-tl-sm [&>button]:first:rounded-bl-sm
|
|
179
|
-
[&>button]:last:rounded-tr-sm [&>button]:last:rounded-br-sm
|
|
176
|
+
small: `
|
|
177
|
+
rounded-sm
|
|
178
|
+
[&>button]:first:rounded-tl-sm [&>button]:first:rounded-bl-sm
|
|
179
|
+
[&>button]:last:rounded-tr-sm [&>button]:last:rounded-br-sm
|
|
180
180
|
`
|
|
181
181
|
},
|
|
182
182
|
size: {
|
|
183
|
-
large: `
|
|
184
|
-
[&_svg]:w-5 [&_svg]:h-5
|
|
183
|
+
large: `
|
|
184
|
+
[&_svg]:w-5 [&_svg]:h-5
|
|
185
185
|
`,
|
|
186
|
-
medium: `
|
|
187
|
-
[&_svg]:w-5 [&_svg]:h-5
|
|
186
|
+
medium: `
|
|
187
|
+
[&_svg]:w-5 [&_svg]:h-5
|
|
188
188
|
`,
|
|
189
|
-
small: `
|
|
190
|
-
[&_svg]:w-4 [&_svg]:h-4
|
|
189
|
+
small: `
|
|
190
|
+
[&_svg]:w-4 [&_svg]:h-4
|
|
191
191
|
`
|
|
192
192
|
}
|
|
193
193
|
},
|
|
@@ -384,7 +384,7 @@ class SplitButtonComponent {
|
|
|
384
384
|
});
|
|
385
385
|
}
|
|
386
386
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
387
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitButtonComponent, isStandalone: true, selector: "mona-split-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, menuButtonAriaLabel: { classPropertyName: "menuButtonAriaLabel", publicName: "menuButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", menuItemClick: "menuItemClick" }, host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: SplitButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: SplitButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "mainButtonTextTemplate", first: true, predicate: SplitButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "menuButtonTemplate", first: true, predicate: SplitButtonMenuButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "shortcutTemplate", first: true, predicate: SplitButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: SplitButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "menuButtonRef", first: true, predicate: ["menuButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\
|
|
387
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitButtonComponent, isStandalone: true, selector: "mona-split-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, menuButtonAriaLabel: { classPropertyName: "menuButtonAriaLabel", publicName: "menuButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", menuItemClick: "menuItemClick" }, host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: SplitButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: SplitButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "mainButtonTextTemplate", first: true, predicate: SplitButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "menuButtonTemplate", first: true, predicate: SplitButtonMenuButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "shortcutTemplate", first: true, predicate: SplitButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: SplitButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "menuButtonRef", first: true, predicate: ["menuButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n monaButton\n (click)=\"buttonClick.emit($event)\"\n [disabled]=\"disabled()\"\n [look]=\"look()\"\n [size]=\"size()\"\n [rounded]=\"rounded()\"\n class=\"rounded-tr-none rounded-br-none\"\n [attr.aria-label]=\"splitButtonAriaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [tabindex]=\"disabled() ? -1 : 0\"\n #mainButton>\n @if (mainButtonTextTemplate()) {\n <ng-container [ngTemplateOutlet]=\"mainButtonTextTemplate()\"></ng-container>\n } @else {\n <span>{{ text() }}</span>\n }\n</button>\n<button\n monaButton\n [disabled]=\"disabled()\"\n [iconOnly]=\"true\"\n [look]=\"look()\"\n [size]=\"size()\"\n [rounded]=\"rounded()\"\n class=\"rounded-tl-none rounded-bl-none border-l-0\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"menuOpen()\"\n [attr.aria-controls]=\"menuId\"\n [attr.aria-label]=\"menuButtonAriaLabel()\"\n [tabindex]=\"disabled() ? -1 : 0\"\n #menuButton>\n @if (menuButtonTemplate()) {\n <ng-container [ngTemplateOutlet]=\"menuButtonTemplate()\"></ng-container>\n } @else {\n <svg lucideChevronDown [size]=\"16\"></svg>\n }\n</button>\n\n<mona-popup-menu\n [anchorConnectionPoint]=\"'bottomleft'\"\n [anchor]=\"mainButton\"\n [items]=\"menuItems()\"\n (menuClick)=\"onMenuItemClick($event)\"\n (open)=\"onMenuOpen()\"\n (close)=\"onMenuClose()\"\n [offset]=\"{ horizontal: 0, vertical: 2 }\"\n [popupConnectionPoint]=\"'topleft'\"\n [rounded]=\"popupMenuRounded()\"\n [size]=\"size()\"\n [target]=\"menuButton\"\n [trigger]=\"'click'\"\n [id]=\"menuId\"\n [minWidth]=\"popupWidth() || undefined\"\n #popupMenu>\n @if (groupTemplate()) {\n <ng-template monaPopupMenuGroupTemplate let-group>\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n </ng-template>\n }\n @if (iconTemplate()) {\n <ng-template monaPopupMenuIconTemplate let-item>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n </ng-template>\n }\n @if (shortcutTemplate()) {\n <ng-template monaPopupMenuShortcutTemplate let-item>\n <ng-container\n [ngTemplateOutlet]=\"shortcutTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n </ng-template>\n }\n @if (textTemplate()) {\n <ng-template monaPopupMenuTextTemplate let-item>\n <ng-container\n [ngTemplateOutlet]=\"textTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n </ng-template>\n }\n</mona-popup-menu>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
|
|
388
388
|
}
|
|
389
389
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonComponent, decorators: [{
|
|
390
390
|
type: Component,
|
|
@@ -399,7 +399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
399
399
|
LucideChevronDown
|
|
400
400
|
], host: {
|
|
401
401
|
"[class]": "classes()"
|
|
402
|
-
}, template: "<button\
|
|
402
|
+
}, template: "<button\n monaButton\n (click)=\"buttonClick.emit($event)\"\n [disabled]=\"disabled()\"\n [look]=\"look()\"\n [size]=\"size()\"\n [rounded]=\"rounded()\"\n class=\"rounded-tr-none rounded-br-none\"\n [attr.aria-label]=\"splitButtonAriaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [tabindex]=\"disabled() ? -1 : 0\"\n #mainButton>\n @if (mainButtonTextTemplate()) {\n <ng-container [ngTemplateOutlet]=\"mainButtonTextTemplate()\"></ng-container>\n } @else {\n <span>{{ text() }}</span>\n }\n</button>\n<button\n monaButton\n [disabled]=\"disabled()\"\n [iconOnly]=\"true\"\n [look]=\"look()\"\n [size]=\"size()\"\n [rounded]=\"rounded()\"\n class=\"rounded-tl-none rounded-bl-none border-l-0\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"menuOpen()\"\n [attr.aria-controls]=\"menuId\"\n [attr.aria-label]=\"menuButtonAriaLabel()\"\n [tabindex]=\"disabled() ? -1 : 0\"\n #menuButton>\n @if (menuButtonTemplate()) {\n <ng-container [ngTemplateOutlet]=\"menuButtonTemplate()\"></ng-container>\n } @else {\n <svg lucideChevronDown [size]=\"16\"></svg>\n }\n</button>\n\n<mona-popup-menu\n [anchorConnectionPoint]=\"'bottomleft'\"\n [anchor]=\"mainButton\"\n [items]=\"menuItems()\"\n (menuClick)=\"onMenuItemClick($event)\"\n (open)=\"onMenuOpen()\"\n (close)=\"onMenuClose()\"\n [offset]=\"{ horizontal: 0, vertical: 2 }\"\n [popupConnectionPoint]=\"'topleft'\"\n [rounded]=\"popupMenuRounded()\"\n [size]=\"size()\"\n [target]=\"menuButton\"\n [trigger]=\"'click'\"\n [id]=\"menuId\"\n [minWidth]=\"popupWidth() || undefined\"\n #popupMenu>\n @if (groupTemplate()) {\n <ng-template monaPopupMenuGroupTemplate let-group>\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n </ng-template>\n }\n @if (iconTemplate()) {\n <ng-template monaPopupMenuIconTemplate let-item>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n </ng-template>\n }\n @if (shortcutTemplate()) {\n <ng-template monaPopupMenuShortcutTemplate let-item>\n <ng-container\n [ngTemplateOutlet]=\"shortcutTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n </ng-template>\n }\n @if (textTemplate()) {\n <ng-template monaPopupMenuTextTemplate let-item>\n <ng-container\n [ngTemplateOutlet]=\"textTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n </ng-template>\n }\n</mona-popup-menu>\n" }]
|
|
403
403
|
}], ctorParameters: () => [], propDecorators: { menuItemComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PopupMenuToken), { ...{ descendants: false }, isSignal: true }] }], menuButtonRef: [{ type: i0.ViewChild, args: ["menuButton", { isSignal: true }] }], popupMenuRef: [{ type: i0.ViewChild, args: ["popupMenu", { isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonMenuGroupTemplateDirective), { ...{
|
|
404
404
|
read: TemplateRef,
|
|
405
405
|
descendants: false
|