@siemens/ix 1.1.0 → 1.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/dist/cjs/ix-application-header.cjs.entry.js +2 -2
- package/dist/cjs/ix-event-list_2.cjs.entry.js +3 -3
- package/dist/cjs/ix-map-navigation_2.cjs.entry.js +4 -4
- package/dist/cjs/ix-select_2.cjs.entry.js +45 -22
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/siemens-ix.cjs.js +1 -1
- package/dist/collection/components/animated-tabs/animated-tabs.js +3 -3
- package/dist/collection/components/application-header/application-header.css +1 -0
- package/dist/collection/components/application-header/application-header.js +1 -1
- package/dist/collection/components/category-filter/category-filter.js +3 -3
- package/dist/collection/components/date-picker/date-picker.js +2 -2
- package/dist/collection/components/dropdown/dropdown.js +3 -3
- package/dist/collection/components/event-list/event-list.css +0 -3
- package/dist/collection/components/event-list-item/event-list-item.css +2 -3
- package/dist/collection/components/event-list-item/event-list-item.js +2 -2
- package/dist/collection/components/icon-button/icon-button.js +1 -1
- package/dist/collection/components/map-navigation/map-navigation.css +1 -19
- package/dist/collection/components/map-navigation/map-navigation.js +5 -5
- package/dist/collection/components/menu-item/menu-item.js +1 -1
- package/dist/collection/components/select/select.js +48 -24
- package/dist/collection/components/split-button/split-button.js +3 -3
- package/dist/collection/components/time-picker/time-picker.js +2 -2
- package/dist/collection/components/toggle/toggle.js +2 -2
- package/dist/components/application-header.js +2 -2
- package/dist/components/ix-event-list-item.js +2 -2
- package/dist/components/ix-event-list.js +1 -1
- package/dist/components/ix-map-navigation.js +11 -5
- package/dist/components/ix-select.js +47 -23
- package/dist/esm/ix-application-header.entry.js +2 -2
- package/dist/esm/ix-event-list_2.entry.js +3 -3
- package/dist/esm/ix-map-navigation_2.entry.js +4 -4
- package/dist/esm/ix-select_2.entry.js +45 -22
- package/dist/esm/loader.js +1 -1
- package/dist/esm/siemens-ix.js +1 -1
- package/dist/siemens-ix/p-0a85cdff.entry.js +1 -0
- package/dist/siemens-ix/p-0e3aab52.entry.js +1 -0
- package/dist/siemens-ix/p-25fda9f7.entry.js +1 -0
- package/dist/siemens-ix/p-a8b6454f.entry.js +1 -0
- package/dist/siemens-ix/siemens-ix.css +44 -31
- package/dist/siemens-ix/siemens-ix.esm.js +1 -1
- package/dist/types/components/animated-tabs/animated-tabs.d.ts +1 -1
- package/dist/types/components/category-filter/category-filter.d.ts +2 -2
- package/dist/types/components/date-picker/date-picker.d.ts +2 -2
- package/dist/types/components/dropdown/dropdown.d.ts +1 -1
- package/dist/types/components/event-list-item/event-list-item.d.ts +1 -1
- package/dist/types/components/icon-button/icon-button.d.ts +1 -1
- package/dist/types/components/map-navigation/map-navigation.d.ts +2 -2
- package/dist/types/components/menu-item/menu-item.d.ts +1 -1
- package/dist/types/components/select/select.d.ts +8 -5
- package/dist/types/components/split-button/split-button.d.ts +1 -1
- package/dist/types/components/time-picker/time-picker.d.ts +1 -1
- package/dist/types/components/toggle/toggle.d.ts +1 -1
- package/dist/types/components.d.ts +21 -35
- package/package.json +1 -1
- package/scss/components/_button-group.scss +2 -0
- package/scss/components/_buttons.scss +5 -0
- package/scss/components/_checkboxes.scss +19 -16
- package/scss/components/_radiobuttons.scss +12 -12
- package/src/components/animated-tabs/readme.md +4 -5
- package/src/components/category-filter/readme.md +13 -14
- package/src/components/date-picker/readme.md +2 -2
- package/src/components/dropdown/readme.md +11 -11
- package/src/components/event-list-item/readme.md +7 -7
- package/src/components/icon-button/readme.md +1 -1
- package/src/components/map-navigation/readme.md +2 -2
- package/src/components/menu-item/readme.md +8 -8
- package/src/components/split-button/readme.md +11 -11
- package/src/components/time-picker/readme.md +12 -12
- package/src/components/toggle/readme.md +10 -10
- package/dist/siemens-ix/p-1686ce8c.entry.js +0 -1
- package/dist/siemens-ix/p-a2e33741.entry.js +0 -1
- package/dist/siemens-ix/p-a3760331.entry.js +0 -1
- package/dist/siemens-ix/p-ca8a41ea.entry.js +0 -1
|
@@ -32,9 +32,6 @@ export namespace Components {
|
|
|
32
32
|
"icon": string;
|
|
33
33
|
}
|
|
34
34
|
interface IxAnimatedTabs {
|
|
35
|
-
/**
|
|
36
|
-
* @deprecated - For debugging purposes only
|
|
37
|
-
*/
|
|
38
35
|
"disableAnimations": boolean;
|
|
39
36
|
/**
|
|
40
37
|
* Current selected tab index
|
|
@@ -154,7 +151,7 @@ export namespace Components {
|
|
|
154
151
|
"icon": string;
|
|
155
152
|
/**
|
|
156
153
|
* When set this will initially populate the component with the provided search criteria. This will trigger all input events accordingly.
|
|
157
|
-
* @deprecated
|
|
154
|
+
* @deprecated Will be removed with 2.0.0. Use the member filterState instead.
|
|
158
155
|
*/
|
|
159
156
|
"initialState": FilterState;
|
|
160
157
|
/**
|
|
@@ -179,9 +176,6 @@ export namespace Components {
|
|
|
179
176
|
* A list of strings that will be supplied as typeahead suggestions not tied to any categories.
|
|
180
177
|
*/
|
|
181
178
|
"suggestions": string[];
|
|
182
|
-
/**
|
|
183
|
-
* @deprecated For debugging purposes only!
|
|
184
|
-
*/
|
|
185
179
|
"tmpDisableScrollIntoView": boolean;
|
|
186
180
|
}
|
|
187
181
|
interface IxChip {
|
|
@@ -274,7 +268,7 @@ export namespace Components {
|
|
|
274
268
|
*/
|
|
275
269
|
"getCurrentDate": () => Promise<{ start: string; end: string; }>;
|
|
276
270
|
/**
|
|
277
|
-
* @deprecated
|
|
271
|
+
* @deprecated Will be removed in 2.0.0
|
|
278
272
|
*/
|
|
279
273
|
"individual": boolean;
|
|
280
274
|
/**
|
|
@@ -422,7 +416,7 @@ export namespace Components {
|
|
|
422
416
|
"adjustDropdownWidthToReferenceWidth": boolean;
|
|
423
417
|
/**
|
|
424
418
|
* Adjust dropdown width to the parent width
|
|
425
|
-
* @deprecated
|
|
419
|
+
* @deprecated Will be removed in 2.0.0. Property has a typo use `adjustDropdownWidthToReferenceWidth` instead.
|
|
426
420
|
*/
|
|
427
421
|
"adjustDropdownWidthToReferenceWith": boolean;
|
|
428
422
|
/**
|
|
@@ -517,7 +511,7 @@ export namespace Components {
|
|
|
517
511
|
"disabled": boolean;
|
|
518
512
|
/**
|
|
519
513
|
* Opacity of the status indicator. Defaults to 1.0
|
|
520
|
-
* @deprecated Will be removed in
|
|
514
|
+
* @deprecated Will be removed in 2.0.0
|
|
521
515
|
*/
|
|
522
516
|
"opacity": number;
|
|
523
517
|
/**
|
|
@@ -660,7 +654,7 @@ export namespace Components {
|
|
|
660
654
|
"icon": string;
|
|
661
655
|
/**
|
|
662
656
|
* Button invisible
|
|
663
|
-
* @deprecated
|
|
657
|
+
* @deprecated Use ghost property
|
|
664
658
|
*/
|
|
665
659
|
"invisible": boolean;
|
|
666
660
|
/**
|
|
@@ -704,7 +698,7 @@ export namespace Components {
|
|
|
704
698
|
"applicationName": string;
|
|
705
699
|
/**
|
|
706
700
|
* Close current shown overlay
|
|
707
|
-
* @deprecated
|
|
701
|
+
* @deprecated Will be removed in 2.0.0. Use slot based approach
|
|
708
702
|
*/
|
|
709
703
|
"closeOverlay": () => Promise<void>;
|
|
710
704
|
/**
|
|
@@ -717,7 +711,7 @@ export namespace Components {
|
|
|
717
711
|
"navigationTitle": string;
|
|
718
712
|
/**
|
|
719
713
|
* Open a overlay inside content area
|
|
720
|
-
* @deprecated
|
|
714
|
+
* @deprecated Will be removed in 2.0.0. Use slot based approach
|
|
721
715
|
* @param name
|
|
722
716
|
* @param component
|
|
723
717
|
* @param icon
|
|
@@ -874,7 +868,7 @@ export namespace Components {
|
|
|
874
868
|
"active": boolean;
|
|
875
869
|
/**
|
|
876
870
|
* Caution: this is no longer working. Please use slot="bottom" instead. Place tab on bottom
|
|
877
|
-
* @deprecated
|
|
871
|
+
* @deprecated Will be removed in 2.0.0. Replaced by slot based implementation
|
|
878
872
|
*/
|
|
879
873
|
"bottom": boolean;
|
|
880
874
|
/**
|
|
@@ -1122,7 +1116,7 @@ export namespace Components {
|
|
|
1122
1116
|
"icon": string;
|
|
1123
1117
|
/**
|
|
1124
1118
|
* Button invisible
|
|
1125
|
-
* @deprecated
|
|
1119
|
+
* @deprecated Will be removed in 2.0.0. Use ghost property
|
|
1126
1120
|
*/
|
|
1127
1121
|
"invisible": boolean;
|
|
1128
1122
|
/**
|
|
@@ -1233,7 +1227,7 @@ export namespace Components {
|
|
|
1233
1227
|
*/
|
|
1234
1228
|
"getCurrentTime": () => Promise<string>;
|
|
1235
1229
|
/**
|
|
1236
|
-
* @deprecated
|
|
1230
|
+
* @deprecated Will be removed in 2.0.0
|
|
1237
1231
|
*/
|
|
1238
1232
|
"individual": boolean;
|
|
1239
1233
|
/**
|
|
@@ -1311,7 +1305,7 @@ export namespace Components {
|
|
|
1311
1305
|
"checked": boolean;
|
|
1312
1306
|
/**
|
|
1313
1307
|
* Basic and status colors from color palette
|
|
1314
|
-
* @deprecated
|
|
1308
|
+
* @deprecated Will be removed in 2.0.0
|
|
1315
1309
|
*/
|
|
1316
1310
|
"color": string;
|
|
1317
1311
|
/**
|
|
@@ -2100,10 +2094,6 @@ declare namespace LocalJSX {
|
|
|
2100
2094
|
"icon"?: string;
|
|
2101
2095
|
}
|
|
2102
2096
|
interface IxAnimatedTabs {
|
|
2103
|
-
/**
|
|
2104
|
-
* @deprecated - For debugging purposes only
|
|
2105
|
-
*/
|
|
2106
|
-
"disableAnimations"?: boolean;
|
|
2107
2097
|
/**
|
|
2108
2098
|
* Tab navigated
|
|
2109
2099
|
*/
|
|
@@ -2238,7 +2228,7 @@ declare namespace LocalJSX {
|
|
|
2238
2228
|
"icon"?: string;
|
|
2239
2229
|
/**
|
|
2240
2230
|
* When set this will initially populate the component with the provided search criteria. This will trigger all input events accordingly.
|
|
2241
|
-
* @deprecated
|
|
2231
|
+
* @deprecated Will be removed with 2.0.0. Use the member filterState instead.
|
|
2242
2232
|
*/
|
|
2243
2233
|
"initialState"?: FilterState;
|
|
2244
2234
|
/**
|
|
@@ -2271,10 +2261,6 @@ declare namespace LocalJSX {
|
|
|
2271
2261
|
* A list of strings that will be supplied as typeahead suggestions not tied to any categories.
|
|
2272
2262
|
*/
|
|
2273
2263
|
"suggestions"?: string[];
|
|
2274
|
-
/**
|
|
2275
|
-
* @deprecated For debugging purposes only!
|
|
2276
|
-
*/
|
|
2277
|
-
"tmpDisableScrollIntoView"?: boolean;
|
|
2278
2264
|
}
|
|
2279
2265
|
interface IxChip {
|
|
2280
2266
|
/**
|
|
@@ -2366,7 +2352,7 @@ declare namespace LocalJSX {
|
|
|
2366
2352
|
*/
|
|
2367
2353
|
"from"?: string;
|
|
2368
2354
|
/**
|
|
2369
|
-
* @deprecated
|
|
2355
|
+
* @deprecated Will be removed in 2.0.0
|
|
2370
2356
|
*/
|
|
2371
2357
|
"individual"?: boolean;
|
|
2372
2358
|
/**
|
|
@@ -2396,7 +2382,7 @@ declare namespace LocalJSX {
|
|
|
2396
2382
|
"onDateSelect"?: (event: IxDatePickerCustomEvent<DateChangeEvent>) => void;
|
|
2397
2383
|
/**
|
|
2398
2384
|
* Date selection confirmed via button action
|
|
2399
|
-
* @deprecated Use `dateSelect`
|
|
2385
|
+
* @deprecated Will be removed in 2.0.0. Use `dateSelect`
|
|
2400
2386
|
*/
|
|
2401
2387
|
"onDone"?: (event: IxDatePickerCustomEvent<string>) => void;
|
|
2402
2388
|
/**
|
|
@@ -2556,7 +2542,7 @@ declare namespace LocalJSX {
|
|
|
2556
2542
|
"adjustDropdownWidthToReferenceWidth"?: boolean;
|
|
2557
2543
|
/**
|
|
2558
2544
|
* Adjust dropdown width to the parent width
|
|
2559
|
-
* @deprecated
|
|
2545
|
+
* @deprecated Will be removed in 2.0.0. Property has a typo use `adjustDropdownWidthToReferenceWidth` instead.
|
|
2560
2546
|
*/
|
|
2561
2547
|
"adjustDropdownWidthToReferenceWith"?: boolean;
|
|
2562
2548
|
/**
|
|
@@ -2655,7 +2641,7 @@ declare namespace LocalJSX {
|
|
|
2655
2641
|
"onItemClick"?: (event: IxEventListItemCustomEvent<any>) => void;
|
|
2656
2642
|
/**
|
|
2657
2643
|
* Opacity of the status indicator. Defaults to 1.0
|
|
2658
|
-
* @deprecated Will be removed in
|
|
2644
|
+
* @deprecated Will be removed in 2.0.0
|
|
2659
2645
|
*/
|
|
2660
2646
|
"opacity"?: number;
|
|
2661
2647
|
/**
|
|
@@ -2822,7 +2808,7 @@ declare namespace LocalJSX {
|
|
|
2822
2808
|
"icon"?: string;
|
|
2823
2809
|
/**
|
|
2824
2810
|
* Button invisible
|
|
2825
|
-
* @deprecated
|
|
2811
|
+
* @deprecated Use ghost property
|
|
2826
2812
|
*/
|
|
2827
2813
|
"invisible"?: boolean;
|
|
2828
2814
|
/**
|
|
@@ -3042,7 +3028,7 @@ declare namespace LocalJSX {
|
|
|
3042
3028
|
"active"?: boolean;
|
|
3043
3029
|
/**
|
|
3044
3030
|
* Caution: this is no longer working. Please use slot="bottom" instead. Place tab on bottom
|
|
3045
|
-
* @deprecated
|
|
3031
|
+
* @deprecated Will be removed in 2.0.0. Replaced by slot based implementation
|
|
3046
3032
|
*/
|
|
3047
3033
|
"bottom"?: boolean;
|
|
3048
3034
|
/**
|
|
@@ -3298,7 +3284,7 @@ declare namespace LocalJSX {
|
|
|
3298
3284
|
"icon"?: string;
|
|
3299
3285
|
/**
|
|
3300
3286
|
* Button invisible
|
|
3301
|
-
* @deprecated
|
|
3287
|
+
* @deprecated Will be removed in 2.0.0. Use ghost property
|
|
3302
3288
|
*/
|
|
3303
3289
|
"invisible"?: boolean;
|
|
3304
3290
|
/**
|
|
@@ -3413,7 +3399,7 @@ declare namespace LocalJSX {
|
|
|
3413
3399
|
*/
|
|
3414
3400
|
"format"?: string;
|
|
3415
3401
|
/**
|
|
3416
|
-
* @deprecated
|
|
3402
|
+
* @deprecated Will be removed in 2.0.0
|
|
3417
3403
|
*/
|
|
3418
3404
|
"individual"?: boolean;
|
|
3419
3405
|
/**
|
|
@@ -3498,7 +3484,7 @@ declare namespace LocalJSX {
|
|
|
3498
3484
|
"checked"?: boolean;
|
|
3499
3485
|
/**
|
|
3500
3486
|
* Basic and status colors from color palette
|
|
3501
|
-
* @deprecated
|
|
3487
|
+
* @deprecated Will be removed in 2.0.0
|
|
3502
3488
|
*/
|
|
3503
3489
|
"color"?: string;
|
|
3504
3490
|
/**
|
package/package.json
CHANGED
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
ix-button:first-child .btn {
|
|
12
12
|
border-top-right-radius: 0px;
|
|
13
13
|
border-bottom-right-radius: 0px;
|
|
14
|
+
border-right: 0px;
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
ix-button:last-child .btn {
|
|
@@ -20,5 +21,6 @@
|
|
|
20
21
|
|
|
21
22
|
ix-button:not(:first-child):not(:last-child) .btn {
|
|
22
23
|
border-radius: 0px;
|
|
24
|
+
border-right: 0px;
|
|
23
25
|
}
|
|
24
26
|
}
|
|
@@ -8,13 +8,14 @@
|
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
@mixin checkbox-basic() {
|
|
11
|
-
$size:
|
|
11
|
+
$size: 1.125rem;
|
|
12
12
|
|
|
13
13
|
/* Base for label styling */
|
|
14
14
|
[type='checkbox']:not(:checked),
|
|
15
15
|
[type='checkbox']:checked {
|
|
16
16
|
position: absolute;
|
|
17
17
|
opacity: 0;
|
|
18
|
+
pointer-events: none;
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
.ag-checkbox-input-wrapper {
|
|
@@ -28,7 +29,9 @@
|
|
|
28
29
|
[type='checkbox']:not(:checked) + label,
|
|
29
30
|
[type='checkbox']:checked + label {
|
|
30
31
|
position: relative;
|
|
31
|
-
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
line-height: $default-space;
|
|
32
35
|
user-select: none;
|
|
33
36
|
|
|
34
37
|
color: var(--theme-checkbox-label--color);
|
|
@@ -52,14 +55,14 @@
|
|
|
52
55
|
|
|
53
56
|
[type='checkbox'] + label:focus-visible {
|
|
54
57
|
&:before {
|
|
55
|
-
outline:
|
|
58
|
+
outline: 0.0625rem solid var(--focus--border-color);
|
|
56
59
|
outline-offset: var(--theme-checkbox--focus--outline-offset);
|
|
57
60
|
}
|
|
58
61
|
}
|
|
59
62
|
|
|
60
63
|
[type='checkbox']:focus-visible + label {
|
|
61
64
|
&:before {
|
|
62
|
-
outline:
|
|
65
|
+
outline: 0.0625rem solid var(--focus--border-color);
|
|
63
66
|
outline-offset: var(--theme-checkbox--focus--outline-offset);
|
|
64
67
|
}
|
|
65
68
|
}
|
|
@@ -99,17 +102,17 @@
|
|
|
99
102
|
|
|
100
103
|
& + label:after {
|
|
101
104
|
content: '';
|
|
102
|
-
width:
|
|
103
|
-
height:
|
|
105
|
+
width: 0.45rem;
|
|
106
|
+
height: 0.25rem;
|
|
104
107
|
display: block;
|
|
105
108
|
border-top: none;
|
|
106
109
|
border-right: none;
|
|
107
|
-
border-bottom:
|
|
108
|
-
border-left:
|
|
110
|
+
border-bottom: 0.0625rem solid var(--theme-checkbox-checked--color);
|
|
111
|
+
border-left: 0.0625rem solid var(--theme-checkbox-checked--color);
|
|
109
112
|
position: absolute;
|
|
110
|
-
top:
|
|
111
|
-
left:
|
|
112
|
-
transform: rotate(-
|
|
113
|
+
top: 0.3rem;
|
|
114
|
+
left: 0.35rem;
|
|
115
|
+
transform: rotate(-53deg) scale(2);
|
|
113
116
|
}
|
|
114
117
|
|
|
115
118
|
&:hover + label:before {
|
|
@@ -144,12 +147,12 @@
|
|
|
144
147
|
& + label:after {
|
|
145
148
|
content: '';
|
|
146
149
|
display: block;
|
|
147
|
-
width:
|
|
148
|
-
height:
|
|
149
|
-
border-bottom:
|
|
150
|
+
width: 0.625rem;
|
|
151
|
+
height: 0.125rem;
|
|
152
|
+
border-bottom: 0.125rem solid var(--theme-checkbox-mixed--color);
|
|
150
153
|
position: absolute;
|
|
151
|
-
top:
|
|
152
|
-
left:
|
|
154
|
+
top: $small-space;
|
|
155
|
+
left: $tiny-space;
|
|
153
156
|
}
|
|
154
157
|
|
|
155
158
|
& + label:before {
|
|
@@ -8,13 +8,14 @@
|
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
@mixin radio-basic() {
|
|
11
|
-
$size:
|
|
11
|
+
$size: 1.25rem;
|
|
12
12
|
|
|
13
13
|
/* Base for label styling */
|
|
14
14
|
[type='radio']:not(:checked),
|
|
15
15
|
[type='radio']:checked {
|
|
16
16
|
position: absolute;
|
|
17
17
|
opacity: 0;
|
|
18
|
+
pointer-events: none;
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
[type='radio']:not(:checked) + label,
|
|
@@ -47,14 +48,14 @@
|
|
|
47
48
|
|
|
48
49
|
[type='radio'] + label:focus-visible {
|
|
49
50
|
&:before {
|
|
50
|
-
outline:
|
|
51
|
+
outline: 0.0625rem solid var(--focus--border-color);
|
|
51
52
|
outline-offset: var(--theme-radiobtn--focus--outline-offset);
|
|
52
53
|
}
|
|
53
54
|
}
|
|
54
55
|
|
|
55
56
|
[type='radio']:focus-visible + label {
|
|
56
57
|
&:before {
|
|
57
|
-
outline:
|
|
58
|
+
outline: 0.0625rem solid var(--focus--border-color);
|
|
58
59
|
outline-offset: var(--theme-radiobtn--focus--outline-offset);
|
|
59
60
|
}
|
|
60
61
|
}
|
|
@@ -94,15 +95,14 @@
|
|
|
94
95
|
|
|
95
96
|
& + label:after {
|
|
96
97
|
content: '';
|
|
97
|
-
width:
|
|
98
|
-
height:
|
|
98
|
+
width: 0.625rem;
|
|
99
|
+
height: 0.625rem;
|
|
99
100
|
display: block;
|
|
100
101
|
background-color: var(--theme-radiobtn-checked--color);
|
|
101
102
|
border-radius: 100%;
|
|
102
|
-
transform: scale(1.5);
|
|
103
103
|
position: absolute;
|
|
104
|
-
top:
|
|
105
|
-
left:
|
|
104
|
+
top: 0.3125rem;
|
|
105
|
+
left: 0.3125rem;
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
&:hover + label:before {
|
|
@@ -138,10 +138,10 @@
|
|
|
138
138
|
content: '';
|
|
139
139
|
position: relative;
|
|
140
140
|
display: block;
|
|
141
|
-
width:
|
|
142
|
-
height:
|
|
143
|
-
border-bottom:
|
|
144
|
-
transform: translateX(
|
|
141
|
+
width: 0.875rem;
|
|
142
|
+
height: 0.0625rem;
|
|
143
|
+
border-bottom: 0.125rem solid var(--theme-radiobtn-mixed--color);
|
|
144
|
+
transform: translateX(0.3125rem) translateY(-0.8rem);
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
& + label:before {
|
|
@@ -13,11 +13,10 @@ SPDX-License-Identifier: MIT
|
|
|
13
13
|
|
|
14
14
|
## Properties
|
|
15
15
|
|
|
16
|
-
| Property
|
|
17
|
-
|
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
20
|
-
| `tabPlacement` | `tab-placement` | Placement of the tabs | `"bottom" \| "top"` | `'top'` |
|
|
16
|
+
| Property | Attribute | Description | Type | Default |
|
|
17
|
+
| --------------- | ---------------- | -------------------------- | ------------------- | ------- |
|
|
18
|
+
| `selectedIndex` | `selected-index` | Current selected tab index | `number` | `0` |
|
|
19
|
+
| `tabPlacement` | `tab-placement` | Placement of the tabs | `"bottom" \| "top"` | `'top'` |
|
|
21
20
|
|
|
22
21
|
|
|
23
22
|
## Events
|
|
@@ -11,20 +11,19 @@ SPDX-License-Identifier: MIT
|
|
|
11
11
|
|
|
12
12
|
## Properties
|
|
13
13
|
|
|
14
|
-
| Property
|
|
15
|
-
|
|
|
16
|
-
| `categories`
|
|
17
|
-
| `filterState`
|
|
18
|
-
| `hideIcon`
|
|
19
|
-
| `i18nPlainText`
|
|
20
|
-
| `icon`
|
|
21
|
-
| `initialState`
|
|
22
|
-
| `labelCategories`
|
|
23
|
-
| `nonSelectableCategories`
|
|
24
|
-
| `placeholder`
|
|
25
|
-
| `repeatCategories`
|
|
26
|
-
| `suggestions`
|
|
27
|
-
| `tmpDisableScrollIntoView` | `tmp-disable-scroll-into-view` | <span style="color:red">**[DEPRECATED]**</span> For debugging purposes only!<br/><br/> | `boolean` | `true` |
|
|
14
|
+
| Property | Attribute | Description | Type | Default |
|
|
15
|
+
| ------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------- | ------------------ |
|
|
16
|
+
| `categories` | -- | Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality. Each ID maps to an object with a label and an array of options to select from. | `{ [id: string]: { label: string; options: string[]; }; }` | `undefined` |
|
|
17
|
+
| `filterState` | -- | A set of search criteria to populate the component with. | `FilterState` | `undefined` |
|
|
18
|
+
| `hideIcon` | `hide-icon` | Allows to hide the icon inside the text input. Defaults to false | `boolean` | `undefined` |
|
|
19
|
+
| `i18nPlainText` | `i-1-8n-plain-text` | i18n | `string` | `'Filter by text'` |
|
|
20
|
+
| `icon` | `icon` | The icon next to the actual text input Defaults to 'search' | `string` | `'search'` |
|
|
21
|
+
| `initialState` | -- | <span style="color:red">**[DEPRECATED]**</span> Will be removed with 2.0.0. Use the member filterState instead.<br/><br/>When set this will initially populate the component with the provided search criteria. This will trigger all input events accordingly. | `FilterState` | `undefined` |
|
|
22
|
+
| `labelCategories` | `label-categories` | i18n | `string` | `'Categories'` |
|
|
23
|
+
| `nonSelectableCategories` | -- | In certain use cases some categories are not available for selection any more. To allow proper display of set filters with these categories this ID to label mapping can be populated. Configuration object hash used to supply labels to the filter chips in the input field. Each ID maps to a string representing the label to display. | `{ [id: string]: string; }` | `{}` |
|
|
24
|
+
| `placeholder` | `placeholder` | Placeholder text to be displayed in an empty input field. | `string` | `undefined` |
|
|
25
|
+
| `repeatCategories` | `repeat-categories` | If set to true allows that a single category can be set more than once. An already set category will not appear in the category dropdown if set to false. Defaults to true | `boolean` | `true` |
|
|
26
|
+
| `suggestions` | -- | A list of strings that will be supplied as typeahead suggestions not tied to any categories. | `string[]` | `undefined` |
|
|
28
27
|
|
|
29
28
|
|
|
30
29
|
## Events
|
|
@@ -17,7 +17,7 @@ SPDX-License-Identifier: MIT
|
|
|
17
17
|
| `eventDelimiter` | `event-delimiter` | Default behavior of the done event is to join the two events (date and time) into one combined string output. This combination can be configured over the delimiter | `string` | `' - '` |
|
|
18
18
|
| `format` | `format` | Date format string. See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens. | `string` | `'yyyy/LL/dd'` |
|
|
19
19
|
| `from` | `from` | Picker date. If the picker is in range mode this property is the start date. Format is based on `format` | `string` | `DateTime.now().toFormat(this.format)` |
|
|
20
|
-
| `individual` | `individual` | <span style="color:red">**[DEPRECATED]**</span>
|
|
20
|
+
| `individual` | `individual` | <span style="color:red">**[DEPRECATED]**</span> Will be removed in 2.0.0<br/><br/> | `boolean` | `true` |
|
|
21
21
|
| `maxDate` | `max-date` | The latest date that can be selected by the date picker. If not set there will be no restriction. | `string` | `undefined` |
|
|
22
22
|
| `minDate` | `min-date` | The earliest date that can be selected by the date picker. If not set there will be no restriction. | `string` | `undefined` |
|
|
23
23
|
| `range` | `range` | If true a range of dates can be selected. | `boolean` | `true` |
|
|
@@ -32,7 +32,7 @@ SPDX-License-Identifier: MIT
|
|
|
32
32
|
| `dateChange` | Date change event If datepicker is in range mode the event detail will be sperated with a `-` e.g. `2022/10/22 - 2022/10/24` (start and end). If range mode is choosen consider to use `dateRangeChange`. | `CustomEvent<DateChangeEvent \| string>` |
|
|
33
33
|
| `dateRangeChange` | Date range change. Only triggered if datepicker is in range mode | `CustomEvent<DateChangeEvent>` |
|
|
34
34
|
| `dateSelect` | Date selection confirmed via button action | `CustomEvent<DateChangeEvent>` |
|
|
35
|
-
| `done` | <span style="color:red">**[DEPRECATED]**</span> Use `dateSelect`<br/><br/>Date selection confirmed via button action
|
|
35
|
+
| `done` | <span style="color:red">**[DEPRECATED]**</span> Will be removed in 2.0.0. Use `dateSelect`<br/><br/>Date selection confirmed via button action | `CustomEvent<string>` |
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
## Methods
|
|
@@ -11,17 +11,17 @@ SPDX-License-Identifier: MIT
|
|
|
11
11
|
|
|
12
12
|
## Properties
|
|
13
13
|
|
|
14
|
-
| Property | Attribute | Description
|
|
15
|
-
| ------------------------------------- | ------------------------------------------ |
|
|
16
|
-
| `adjustDropdownWidthToReferenceWidth` | `adjust-dropdown-width-to-reference-width` | Adjust dropdown width to the parent width
|
|
17
|
-
| `adjustDropdownWidthToReferenceWith` | `adjust-dropdown-width-to-reference-with` | <span style="color:red">**[DEPRECATED]**</span>
|
|
18
|
-
| `anchor` | `anchor` | Define an anchor element
|
|
19
|
-
| `closeBehavior` | `close-behavior` | Close behavior
|
|
20
|
-
| `header` | `header` | An optional header shown at the top of the dropdown
|
|
21
|
-
| `placement` | `placement` | Placement of the dropdown
|
|
22
|
-
| `positioningStrategy` | `positioning-strategy` | Position strategy
|
|
23
|
-
| `show` | `show` | Show dropdown
|
|
24
|
-
| `trigger` | `trigger` | Define an element that triggers the dropdown. A trigger can either be a string that will be interprated as id attribute or a DOM element.
|
|
14
|
+
| Property | Attribute | Description | Type | Default |
|
|
15
|
+
| ------------------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
|
|
16
|
+
| `adjustDropdownWidthToReferenceWidth` | `adjust-dropdown-width-to-reference-width` | Adjust dropdown width to the parent width | `boolean` | `false` |
|
|
17
|
+
| `adjustDropdownWidthToReferenceWith` | `adjust-dropdown-width-to-reference-with` | <span style="color:red">**[DEPRECATED]**</span> Will be removed in 2.0.0. Property has a typo use `adjustDropdownWidthToReferenceWidth` instead.<br/><br/>Adjust dropdown width to the parent width | `boolean` | `false` |
|
|
18
|
+
| `anchor` | `anchor` | Define an anchor element | `HTMLElement \| string` | `undefined` |
|
|
19
|
+
| `closeBehavior` | `close-behavior` | Close behavior | `"both" \| "inside" \| "outside" \| boolean` | `'both'` |
|
|
20
|
+
| `header` | `header` | An optional header shown at the top of the dropdown | `string` | `undefined` |
|
|
21
|
+
| `placement` | `placement` | Placement of the dropdown | `"auto" \| "auto-end" \| "auto-start" \| "bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom-end'` |
|
|
22
|
+
| `positioningStrategy` | `positioning-strategy` | Position strategy | `"absolute" \| "fixed"` | `'fixed'` |
|
|
23
|
+
| `show` | `show` | Show dropdown | `boolean` | `false` |
|
|
24
|
+
| `trigger` | `trigger` | Define an element that triggers the dropdown. A trigger can either be a string that will be interprated as id attribute or a DOM element. | `HTMLElement \| string` | `undefined` |
|
|
25
25
|
|
|
26
26
|
|
|
27
27
|
## Events
|
|
@@ -11,13 +11,13 @@ SPDX-License-Identifier: MIT
|
|
|
11
11
|
|
|
12
12
|
## Properties
|
|
13
13
|
|
|
14
|
-
| Property | Attribute | Description
|
|
15
|
-
| ---------- | ---------- |
|
|
16
|
-
| `chevron` | `chevron` | Show chevron on right side of the event list item
|
|
17
|
-
| `color` | `color` | Color of the status indicator. Allowed values are all Core UI color names.
|
|
18
|
-
| `disabled` | `disabled` | Disable event list item
|
|
19
|
-
| `opacity` | `opacity` | <span style="color:red">**[DEPRECATED]**</span> Will be removed in
|
|
20
|
-
| `selected` | `selected` | Show event list item as selected
|
|
14
|
+
| Property | Attribute | Description | Type | Default |
|
|
15
|
+
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
|
|
16
|
+
| `chevron` | `chevron` | Show chevron on right side of the event list item | `boolean` | `undefined` |
|
|
17
|
+
| `color` | `color` | Color of the status indicator. Allowed values are all Core UI color names. | `string` | `undefined` |
|
|
18
|
+
| `disabled` | `disabled` | Disable event list item | `boolean` | `undefined` |
|
|
19
|
+
| `opacity` | `opacity` | <span style="color:red">**[DEPRECATED]**</span> Will be removed in 2.0.0<br/><br/>Opacity of the status indicator. Defaults to 1.0 | `number` | `1` |
|
|
20
|
+
| `selected` | `selected` | Show event list item as selected | `boolean` | `undefined` |
|
|
21
21
|
|
|
22
22
|
|
|
23
23
|
## Events
|
|
@@ -17,7 +17,7 @@ SPDX-License-Identifier: MIT
|
|
|
17
17
|
| `disabled` | `disabled` | Disabled | `boolean` | `false` |
|
|
18
18
|
| `ghost` | `ghost` | Button invisible | `boolean` | `undefined` |
|
|
19
19
|
| `icon` | `icon` | Button icon | `string` | `undefined` |
|
|
20
|
-
| `invisible` | `invisible` | <span style="color:red">**[DEPRECATED]**</span>
|
|
20
|
+
| `invisible` | `invisible` | <span style="color:red">**[DEPRECATED]**</span> Use ghost property<br/><br/>Button invisible | `boolean` | `undefined` |
|
|
21
21
|
| `outline` | `outline` | Button outline | `boolean` | `undefined` |
|
|
22
22
|
| `oval` | `oval` | Button in oval shape | `boolean` | `undefined` |
|
|
23
23
|
| `selected` | `selected` | Selected state only working with outline or invisible | `boolean` | `false` |
|
|
@@ -30,7 +30,7 @@ SPDX-License-Identifier: MIT
|
|
|
30
30
|
|
|
31
31
|
### `closeOverlay() => Promise<void>`
|
|
32
32
|
|
|
33
|
-
<span style="color:red">**[DEPRECATED]**</span>
|
|
33
|
+
<span style="color:red">**[DEPRECATED]**</span> Will be removed in 2.0.0. Use slot based approach<br/><br/>Close current shown overlay
|
|
34
34
|
|
|
35
35
|
#### Returns
|
|
36
36
|
|
|
@@ -40,7 +40,7 @@ Type: `Promise<void>`
|
|
|
40
40
|
|
|
41
41
|
### `openOverlay(name: string, component: HTMLElement, icon?: string, color?: string) => Promise<void>`
|
|
42
42
|
|
|
43
|
-
<span style="color:red">**[DEPRECATED]**</span>
|
|
43
|
+
<span style="color:red">**[DEPRECATED]**</span> Will be removed in 2.0.0. Use slot based approach<br/><br/>Open a overlay inside content area
|
|
44
44
|
|
|
45
45
|
#### Returns
|
|
46
46
|
|