Skip to content

Commit b717ba6

Browse files
mrholekmrholek
committed
feat(CDatePicker, CDateRangePicker, CMultiSelect, CTimePicker): add valid and invalid states support
1 parent 81de036 commit b717ba6

File tree

11 files changed

+127
-18
lines changed

11 files changed

+127
-18
lines changed

‎docs/content/forms/date-picker.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,7 @@ const datePickerList = datePickerElementList.map(datePickerEl => {
230230
| `format` | string | | Set date format. We use date-fns to format dates. Visit <a href="https://date-fns.org/v2.28.0/docs/format" target="_blank" rel="nofollow">https://date-fns.org/v2.28.0/docs/format</a> to check accepted patterns. |
231231
| `indicator` | boolean | `true` | Toggle visibility or set the content of the input indicator. |
232232
| `inputReadOnly` | boolean | `false` | Toggle the readonly state for the component. |
233+
| `invalid` | boolean | `false` | Toggle the invalid state for the component. |
233234
| `locale` | string | `'default'` | Sets the default locale for components. If not set, it is inherited from the navigator.language. |
234235
| `maxDate` | date \| string \| null | `null` | Max selectable date. |
235236
| `minDate` | date \| string \| null | `null` | Min selectable date. |
@@ -238,6 +239,7 @@ const datePickerList = datePickerElementList.map(datePickerEl => {
238239
| `timepicker` | boolean | `false` | Provide an additional time selection by adding select boxes to choose times. |
239240
| `todayButton` | string | `'Today'` | Today button inner HTML |
240241
| `todayButtonClasses` | array \| string | `['btn', 'btn-sm', 'me-2']` | CSS class names that will be added to the today button |
242+
| `valid` | boolean | `false` | Toggle the valid state for the component. |
241243
| `weekdayFormat` | number \| 'long' \| 'narrow' \| 'short' | `2` | Set length or format of day name. |
242244
{{< /bs-table >}}
243245

‎docs/content/forms/date-range-picker.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ other_frameworks: date-range-picker
3737
data-coreui-locale="en-US"
3838
data-coreui-toggle="date-range-picker">
3939
</div>
40-
</div>2
40+
</div>
4141
<div class="col-lg-5">
4242
<div
4343
data-coreui-start-date="2022/08/03"
@@ -299,6 +299,7 @@ const dateRangePickerList = dateRangePickerElementList.map(dateRangePickerEl =>
299299
| `format` | string | | Set date format. We use date-fns to format dates. Visit <a href="https://date-fns.org/v2.28.0/docs/format" target="_blank" rel="nofollow">https://date-fns.org/v2.28.0/docs/format</a> to check accepted patterns. |
300300
| `indicator` | boolean | `true` | Toggle visibility or set the content of the input indicator. |
301301
| `inputReadOnly` | boolean | `false` | Toggle the readonly state for the component. |
302+
| `invalid` | boolean | `false` | Toggle the invalid state for the component. |
302303
| `locale` | string | `'default'` | Sets the default locale for components. If not set, it is inherited from the navigator.language. |
303304
| `maxDate` | date \| string \| null | `null` | Max selectable date. |
304305
| `minDate` | date \| string \| null | `null` | Min selectable date. |
@@ -311,6 +312,7 @@ const dateRangePickerList = dateRangePickerElementList.map(dateRangePickerEl =>
311312
| `timepicker` | boolean | `false` | Provide an additional time selection by adding select boxes to choose times. |
312313
| `todayButton` | string | `'Today'` | Today button inner HTML |
313314
| `todayButtonClasses` | array \| string | `['btn', 'btn-sm', 'me-2']` | CSS class names that will be added to the today button |
315+
| `valid` | boolean | `false` | Toggle the valid state for the component. |
314316
| `weekdayFormat` | number \| 'long' \| 'narrow' \| 'short' | `2` | Set length or format of day name. |
315317
{{< /bs-table >}}
316318

‎docs/content/forms/multi-select.md

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -263,19 +263,20 @@ You may also choose from small and large multi selects to match our similarly si
263263
{{< bs-table >}}
264264
| Name | Type | Default | Description |
265265
| --- | --- | --- | --- |
266-
| `cleaner`| boolean| `true` | |
267-
| `disabled` | boolean| `false` | |
268-
| `multiple` | boolean| `true` | |
269-
| `placeholder` | string| `'Select...'` | |
270-
| `options` | (boolean\|array)| `false` | |
271-
| `optionsMaxHeight` | (number\|string)| `'auto'` | |
272-
| `optionsStyle` | string| `'checkbox'` | |
273-
| `search` | boolean| `false` | |
274-
| `searchNoResultsLabel` | string| `'No results found'` | |
275-
| `selectAll` | boolean| `true` | |
276-
| `selectAllLabel` | string| `'Select all options'` | |
277-
| `selectionType` | string| `'tag'` | |
278-
| `selectionTypeCounterText` | string| `'item(s) selected'` | |
266+
| `cleaner`| boolean| `true` | Enables selection cleaner element. |
267+
| `disabled` | boolean | `false` | Toggle the disabled state for the component. |
268+
| `invalid` | boolean | `false` | Toggle the invalid state for the component. |
269+
| `options` | (boolean\|array)| `false` | List of option elements. |
270+
| `optionsMaxHeight` | (number\|string)| `'auto'` | Sets `max-height` of options list. |
271+
| `optionsStyle` | string| `'checkbox'` | Sets option style. |
272+
| `placeholder` | string| `'Select...'` | Specifies a short hint that is visible in the input. |
273+
| `search` | boolean| `false` | Enables search input element. |
274+
| `searchNoResultsLabel` | string| `'No results found'` | Sets the label for no results when filtering. |
275+
| `selectAll` | boolean| `true` | Enables select all button.|
276+
| `selectAllLabel` | string| `'Select all options'` | Sets the select all button label. |
277+
| `selectionType` | string| `'tag'` | Sets the selection style. |
278+
| `selectionTypeCounterText` | string| `'item(s) selected'` | Sets the counter selection label. |
279+
| `valid` | boolean | `false` | Toggle the valid state for the component. |
279280
{{< /bs-table >}}
280281

281282
### Methods

‎docs/content/forms/time-picker.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,10 +171,12 @@ const timePickerList = timePickerElementList.map(timePickerEl => {
171171
| `disabled` | boolean | `false` | Toggle the disabled state for the component. |
172172
| `indicator` | boolean | `true` | Toggle visibility or set the content of the input indicator. |
173173
| `inputReadOnly` | boolean | `false` | Toggle the readonly state for the component. |
174+
| `invalid` | boolean | `false` | Toggle the invalid state for the component. |
174175
| `locale` | string | `'default'` | Sets the default locale for components. If not set, it is inherited from the navigator.language. |
175176
| `placeholder` | string | `'Select time'` | Specifies a short hint that is visible in the input. |
176177
| `size` | `'sm'` \| `'lg'` | `null` | Size the component small or large. |
177178
| `time` | date \| string \| null | `null` | Default value of the component |
179+
| `valid` | boolean | `false` | Toggle the valid state for the component. |
178180
| `variant` | `'inline'` \| `'roll'` | `'roll'` | Set the time picker variant to a roll or select. |
179181
{{< /bs-table >}}
180182
### Methods

‎js/src/date-range-picker.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ const Default = {
4444
endDate: null,
4545
firstDayOfWeek: 1,
4646
format: null,
47+
invalid: false,
4748
indicator: true,
4849
locale: 'default',
4950
maxDate: null,
@@ -58,7 +59,8 @@ const Default = {
5859
selectEndDate: false,
5960
timepicker: false,
6061
todayButton: 'Today',
61-
todayButtonClasses: ['btn', 'btn-sm', 'btn-primary', 'me-auto']
62+
todayButtonClasses: ['btn', 'btn-sm', 'btn-primary', 'me-auto'],
63+
valid: false
6264
}
6365

6466
const DefaultType = {
@@ -73,6 +75,7 @@ const DefaultType = {
7375
firstDayOfWeek: 'number',
7476
format: '(string|null)',
7577
indicator: 'boolean',
78+
invalid: 'boolean',
7679
locale: 'string',
7780
maxDate: '(date|string|null)',
7881
minDate: '(date|string|null)',
@@ -86,7 +89,8 @@ const DefaultType = {
8689
selectEndDate: 'boolean',
8790
timepicker: 'boolean',
8891
todayButton: '(boolean|string)',
89-
todayButtonClasses: '(array|string)'
92+
todayButtonClasses: '(array|string)',
93+
valid: 'boolean'
9094
}
9195

9296
/**
@@ -474,6 +478,8 @@ class DateRangePicker extends Picker {
474478

475479
_createDateRangePicker() {
476480
this._element.classList.add('date-picker')
481+
this._element.classList.toggle('is-invalid', this._config.invalid)
482+
this._element.classList.toggle('is-valid', this._config.valid)
477483
this._dropdownToggleEl.append(this._createInputGroup())
478484
this._dropdownMenuEl.prepend(this._createDateRangePickerBody())
479485
}

‎js/src/multi-select.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ const CLASS_NAME_LABEL = 'label'
7474
const Default = {
7575
cleaner: true,
7676
disabled: false,
77+
invalid: false,
7778
multiple: true,
7879
placeholder: 'Select...',
7980
options: false,
@@ -84,12 +85,14 @@ const Default = {
8485
selectAll: true,
8586
selectAllLabel: 'Select all options',
8687
selectionType: 'tags',
87-
selectionTypeCounterText: 'item(s) selected'
88+
selectionTypeCounterText: 'item(s) selected',
89+
valid: false
8890
}
8991

9092
const DefaultType = {
9193
cleaner: 'boolean',
9294
disabled: 'boolean',
95+
invalid: 'boolean',
9396
multiple: 'boolean',
9497
placeholder: 'string',
9598
options: '(boolean|array)',
@@ -100,7 +103,8 @@ const DefaultType = {
100103
selectAll: 'boolean',
101104
selectAllLabel: 'string',
102105
selectionType: 'string',
103-
selectionTypeCounterText: 'string'
106+
selectionTypeCounterText: 'string',
107+
valid: 'boolean'
104108
}
105109

106110
/**
@@ -382,6 +386,8 @@ class MultiSelect extends BaseComponent {
382386
_createSelect() {
383387
const div = document.createElement('div')
384388
div.classList.add(CLASS_NAME_SELECT)
389+
div.classList.toggle('is-invalid', this._config.invalid)
390+
div.classList.toggle('is-valid', this._config.valid)
385391

386392
if (this._config.disabled) {
387393
this._element.classList.add(CLASS_NAME_DISABLED)

‎js/src/time-picker.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,13 @@ const Default = {
4646
disabled: false,
4747
footer: true,
4848
indicator: true,
49+
invalid: false,
4950
inputReadOnly: false,
5051
locale: 'default',
5152
placeholder: 'Select time',
5253
size: null,
5354
time: null,
55+
valid: false,
5456
variant: 'roll'
5557
}
5658

@@ -59,10 +61,12 @@ const DefaultType = {
5961
cleaner: 'boolean',
6062
indicator: 'boolean',
6163
inputReadOnly: 'boolean',
64+
invalid: 'boolean',
6265
locale: 'string',
6366
placeholder: 'string',
6467
size: '(string|null)',
6568
time: '(date|string|null)',
69+
valid: 'boolean',
6670
variant: 'string'
6771
}
6872

@@ -285,6 +289,8 @@ class TimePicker extends Picker {
285289

286290
_createTimePicker() {
287291
this._element.classList.add('time-picker')
292+
this._element.classList.toggle('is-invalid', this._config.invalid)
293+
this._element.classList.toggle('is-valid', this._config.valid)
288294

289295
if (this._config.container === 'dropdown') {
290296
this._dropdownToggleEl.append(this._createInputGroup())

‎scss/_date-picker.scss

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,42 @@
1010
.dropdown-menu {
1111
width: min-content;
1212
}
13+
14+
&.is-invalid {
15+
.form-control {
16+
--#{$prefix}input-border-color: #{$form-feedback-invalid-color};
17+
}
18+
19+
.input-group-text {
20+
--#{$prefix}input-group-addon-border-color: #{$form-feedback-invalid-color};
21+
}
22+
23+
.picker-input-group-indicator {
24+
--#{$prefix}input-group-addon-color: #{$form-feedback-invalid-color};
25+
}
26+
27+
.date-picker-input-icon {
28+
background-image: escape-svg($date-picker-invalid-icon);
29+
}
30+
}
31+
32+
&.is-valid {
33+
.form-control {
34+
--#{$prefix}input-border-color: #{$form-feedback-valid-color};
35+
}
36+
37+
.input-group-text {
38+
--#{$prefix}input-group-addon-border-color: #{$form-feedback-valid-color};
39+
}
40+
41+
.picker-input-group-indicator {
42+
--#{$prefix}input-group-addon-color: #{$form-feedback-valid-color};
43+
}
44+
45+
.date-picker-input-icon {
46+
background-image: escape-svg($date-picker-valid-icon);
47+
}
48+
}
1349
}
1450

1551
.date-picker-body {

‎scss/_time-picker.scss

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,42 @@
33
--#{$prefix}time-picker-body-padding: #{$time-picker-body-padding};
44
--#{$prefix}time-picker-roll-col-border: #{$time-picker-roll-col-border-width} solid #{$time-picker-roll-col-border-color};
55
// scss-docs-end time-picker-css-vars
6+
7+
&.is-invalid {
8+
.form-control {
9+
--#{$prefix}input-border-color: #{$form-feedback-invalid-color};
10+
}
11+
12+
.input-group-text {
13+
--#{$prefix}input-group-addon-border-color: #{$form-feedback-invalid-color};
14+
}
15+
16+
.picker-input-group-indicator {
17+
--#{$prefix}input-group-addon-color: #{$form-feedback-invalid-color};
18+
}
19+
20+
.time-picker-input-icon {
21+
background-image: escape-svg($time-picker-invalid-icon);
22+
}
23+
}
24+
25+
&.is-valid {
26+
.form-control {
27+
--#{$prefix}input-border-color: #{$form-feedback-valid-color};
28+
}
29+
30+
.input-group-text {
31+
--#{$prefix}input-group-addon-border-color: #{$form-feedback-valid-color};
32+
}
33+
34+
.picker-input-group-indicator {
35+
--#{$prefix}input-group-addon-color: #{$form-feedback-valid-color};
36+
}
37+
38+
.time-picker-input-icon {
39+
background-image: escape-svg($time-picker-valid-icon);
40+
}
41+
}
642
}
743

844
.time-picker-body {

‎scss/_variables.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2303,6 +2303,8 @@ $picker-footer-padding: .5rem !default;
23032303
// scss-docs-start date-picker-variables
23042304
$date-picker-default-icon-color: $gray-600 !default;
23052305
$date-picker-default-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$date-picker-default-icon-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$date-picker-default-icon-color}'></rect></svg>") !default;
2306+
$date-picker-invalid-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$form-feedback-invalid-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$form-feedback-invalid-color}'></rect></svg>") !default;
2307+
$date-picker-valid-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$form-feedback-valid-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$form-feedback-valid-color}'></rect></svg>") !default;
23062308

23072309
$date-picker-cleaner-icon-color: $gray-600 !default;
23082310
$date-picker-cleaner-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-cleaner-icon-color}' points='306.912 214.461 256 265.373 205.088 214.461 182.461 237.088 233.373 288 182.461 338.912 205.088 361.539 256 310.627 306.912 361.539 329.539 338.912 278.627 288 329.539 237.088 306.912 214.461'></polygon><path fill='#{$date-picker-cleaner-icon-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path></svg>") !default;
@@ -2327,6 +2329,8 @@ $date-picker-timepicker-border-color: $border-color !default;
23272329
// scss-docs-start time-picker-variables
23282330
$time-picker-default-icon-color: $gray-600 !default;
23292331
$time-picker-default-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$time-picker-default-icon-color}' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5' class='ci-primary'></polygon><path fill='#{$time-picker-default-icon-color}' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z' class='ci-primary'></path></svg>") !default;
2332+
$time-picker-invalid-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$form-feedback-invalid-color}' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5' class='ci-primary'></polygon><path fill='#{$form-feedback-invalid-color}' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z' class='ci-primary'></path></svg>") !default;
2333+
$time-picker-valid-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$form-feedback-valid-color}' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5' class='ci-primary'></polygon><path fill='#{$form-feedback-valid-color}' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z' class='ci-primary'></path></svg>") !default;
23302334

23312335
$time-picker-cleaner-icon-color: $gray-600 !default;
23322336
$time-picker-cleaner-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$time-picker-cleaner-icon-color}' points='348.071 141.302 260.308 229.065 172.545 141.302 149.917 163.929 237.681 251.692 149.917 339.456 172.545 362.083 260.308 274.32 348.071 362.083 370.699 339.456 282.935 251.692 370.699 163.929 348.071 141.302' class='ci-primary'></polygon><path fill='#{$time-picker-cleaner-icon-color}' d='M425.706,86.294A240,240,0,0,0,86.294,425.706,240,240,0,0,0,425.706,86.294ZM256,464C141.309,464,48,370.691,48,256S141.309,48,256,48s208,93.309,208,208S370.691,464,256,464Z' class='ci-primary'></path></svg>") !default;

0 commit comments

Comments
 (0)