@siemens/element-ng 47.3.0 → 47.4.0
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/badge/si-badge.component.d.ts +1 -1
- package/breadcrumb/breadcrumb-item.model.d.ts +36 -0
- package/breadcrumb/index.d.ts +7 -0
- package/breadcrumb/package.json +3 -0
- package/breadcrumb/si-breadcrumb-item-template.directive.d.ts +10 -0
- package/breadcrumb/si-breadcrumb.component.d.ts +46 -0
- package/breadcrumb/si-breadcrumb.module.d.ts +7 -0
- package/card/index.d.ts +6 -0
- package/card/package.json +3 -0
- package/card/si-card.component.d.ts +79 -0
- package/card/si-card.module.d.ts +7 -0
- package/circle-status/index.d.ts +6 -0
- package/circle-status/package.json +3 -0
- package/circle-status/si-circle-status.component.d.ts +66 -0
- package/circle-status/si-circle-status.module.d.ts +7 -0
- package/column-selection-dialog/column-selection-editor/si-column-selection-editor.component.d.ts +23 -0
- package/column-selection-dialog/index.d.ts +6 -0
- package/column-selection-dialog/package.json +3 -0
- package/column-selection-dialog/si-column-selection-dialog.component.d.ts +114 -0
- package/column-selection-dialog/si-column-selection-dialog.service.d.ts +20 -0
- package/column-selection-dialog/si-column-selection-dialog.types.d.ts +68 -0
- package/common/models/status-type.model.d.ts +2 -2
- package/date-range-filter/index.d.ts +8 -0
- package/date-range-filter/package.json +3 -0
- package/date-range-filter/si-date-range-calculation.service.d.ts +33 -0
- package/date-range-filter/si-date-range-filter.component.d.ts +248 -0
- package/date-range-filter/si-date-range-filter.module.d.ts +7 -0
- package/date-range-filter/si-date-range-filter.types.d.ts +40 -0
- package/date-range-filter/si-relative-date.component.d.ts +31 -0
- package/datepicker/components/si-calendar-body.component.d.ts +137 -0
- package/datepicker/components/si-calendar-date-cell.directive.d.ts +16 -0
- package/datepicker/components/si-calendar-direction-button.component.d.ts +18 -0
- package/datepicker/components/si-compare-adapter.d.ts +37 -0
- package/datepicker/components/si-day-selection.component.d.ts +76 -0
- package/datepicker/components/si-initial-focus.component.d.ts +74 -0
- package/datepicker/components/si-month-selection.component.d.ts +62 -0
- package/datepicker/components/si-year-selection.component.d.ts +65 -0
- package/datepicker/date-time-helper.d.ts +302 -0
- package/datepicker/index.d.ts +15 -0
- package/datepicker/package.json +3 -0
- package/datepicker/si-calendar-button.component.d.ts +49 -0
- package/datepicker/si-date-input.directive.d.ts +114 -0
- package/datepicker/si-date-range.component.d.ts +150 -0
- package/datepicker/si-datepicker-overlay.component.d.ts +82 -0
- package/datepicker/si-datepicker-overlay.directive.d.ts +104 -0
- package/datepicker/si-datepicker.component.d.ts +228 -0
- package/datepicker/si-datepicker.directive.d.ts +62 -0
- package/datepicker/si-datepicker.model.d.ts +129 -0
- package/datepicker/si-datepicker.module.d.ts +12 -0
- package/datepicker/si-timepicker.component.d.ts +214 -0
- package/electron-titlebar/electron.helpers.d.ts +5 -0
- package/electron-titlebar/index.d.ts +7 -0
- package/electron-titlebar/package.json +3 -0
- package/electron-titlebar/si-electron-titlebar.component.d.ts +72 -0
- package/electron-titlebar/si-electron-titlebar.module.d.ts +7 -0
- package/fesm2022/siemens-element-ng-badge.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-breadcrumb.mjs +302 -0
- package/fesm2022/siemens-element-ng-breadcrumb.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-card.mjs +122 -0
- package/fesm2022/siemens-element-ng-card.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-circle-status.mjs +146 -0
- package/fesm2022/siemens-element-ng-circle-status.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-column-selection-dialog.mjs +369 -0
- package/fesm2022/siemens-element-ng-column-selection-dialog.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-common.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-date-range-filter.mjs +649 -0
- package/fesm2022/siemens-element-ng-date-range-filter.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-datepicker.mjs +4231 -0
- package/fesm2022/siemens-element-ng-datepicker.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-electron-titlebar.mjs +142 -0
- package/fesm2022/siemens-element-ng-electron-titlebar.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-file-uploader.mjs +751 -0
- package/fesm2022/siemens-element-ng-file-uploader.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-filter-bar.mjs +153 -0
- package/fesm2022/siemens-element-ng-filter-bar.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-icon.mjs +11 -1
- package/fesm2022/siemens-element-ng-icon.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-info-page.mjs +63 -0
- package/fesm2022/siemens-element-ng-info-page.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-inline-notification.mjs +4 -6
- package/fesm2022/siemens-element-ng-inline-notification.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-ip-input.mjs +451 -0
- package/fesm2022/siemens-element-ng-ip-input.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-localization.mjs +306 -0
- package/fesm2022/siemens-element-ng-localization.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-photo-upload.mjs +480 -0
- package/fesm2022/siemens-element-ng-photo-upload.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-search-bar.mjs +193 -0
- package/fesm2022/siemens-element-ng-search-bar.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-slider.mjs +313 -0
- package/fesm2022/siemens-element-ng-slider.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-sort-bar.mjs +89 -0
- package/fesm2022/siemens-element-ng-sort-bar.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-split.mjs +575 -0
- package/fesm2022/siemens-element-ng-split.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-status-toggle.mjs +196 -0
- package/fesm2022/siemens-element-ng-status-toggle.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-system-banner.mjs +47 -0
- package/fesm2022/siemens-element-ng-system-banner.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-tabs.mjs +395 -0
- package/fesm2022/siemens-element-ng-tabs.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-translate.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-unauthorized-page.mjs +76 -0
- package/fesm2022/siemens-element-ng-unauthorized-page.mjs.map +1 -0
- package/file-uploader/index.d.ts +8 -0
- package/file-uploader/package.json +3 -0
- package/file-uploader/si-file-dropzone.component.d.ts +106 -0
- package/file-uploader/si-file-uploader.component.d.ts +296 -0
- package/file-uploader/si-file-uploader.model.d.ts +12 -0
- package/file-uploader/si-file-uploader.module.d.ts +8 -0
- package/filter-bar/filter.d.ts +26 -0
- package/filter-bar/index.d.ts +8 -0
- package/filter-bar/package.json +3 -0
- package/filter-bar/si-filter-bar.component.d.ts +65 -0
- package/filter-bar/si-filter-bar.module.d.ts +7 -0
- package/filter-bar/si-filter-pill.component.d.ts +20 -0
- package/icon/element-icons.d.ts +10 -0
- package/info-page/index.d.ts +5 -0
- package/info-page/package.json +3 -0
- package/info-page/si-info-page.component.d.ts +38 -0
- package/inline-notification/si-inline-notification.component.d.ts +0 -2
- package/ip-input/address-utils.d.ts +28 -0
- package/ip-input/address-validators.d.ts +21 -0
- package/ip-input/index.d.ts +7 -0
- package/ip-input/package.json +3 -0
- package/ip-input/si-ip-input.directive.d.ts +53 -0
- package/ip-input/si-ip4-input.directive.d.ts +9 -0
- package/ip-input/si-ip6-input.directive.d.ts +10 -0
- package/localization/index.d.ts +8 -0
- package/localization/package.json +3 -0
- package/localization/si-directionality.d.ts +41 -0
- package/localization/si-locale-id.d.ts +22 -0
- package/localization/si-locale-store.d.ts +16 -0
- package/localization/si-locale.service.d.ts +73 -0
- package/package.json +91 -3
- package/photo-upload/index.d.ts +6 -0
- package/photo-upload/package.json +3 -0
- package/photo-upload/si-image-cropper-style.component.d.ts +5 -0
- package/photo-upload/si-photo-upload.component.d.ts +298 -0
- package/search-bar/index.d.ts +6 -0
- package/search-bar/package.json +3 -0
- package/search-bar/si-search-bar.component.d.ts +87 -0
- package/search-bar/si-search-bar.module.d.ts +7 -0
- package/slider/index.d.ts +6 -0
- package/slider/package.json +3 -0
- package/slider/si-slider.component.d.ts +129 -0
- package/slider/si-slider.module.d.ts +7 -0
- package/sort-bar/index.d.ts +6 -0
- package/sort-bar/package.json +3 -0
- package/sort-bar/si-sort-bar.component.d.ts +42 -0
- package/sort-bar/si-sort-bar.module.d.ts +7 -0
- package/split/index.d.ts +8 -0
- package/split/package.json +3 -0
- package/split/si-split-part.component.d.ts +154 -0
- package/split/si-split.component.d.ts +48 -0
- package/split/si-split.interfaces.d.ts +17 -0
- package/split/si-split.module.d.ts +8 -0
- package/status-toggle/index.d.ts +6 -0
- package/status-toggle/package.json +3 -0
- package/status-toggle/si-status-toggle.component.d.ts +54 -0
- package/status-toggle/status-toggle.model.d.ts +26 -0
- package/system-banner/index.d.ts +5 -0
- package/system-banner/package.json +3 -0
- package/system-banner/system-banner.component.d.ts +23 -0
- package/tabs/index.d.ts +7 -0
- package/tabs/package.json +3 -0
- package/tabs/si-tab/index.d.ts +5 -0
- package/tabs/si-tab/si-tab.component.d.ts +58 -0
- package/tabs/si-tabs.module.d.ts +8 -0
- package/tabs/si-tabset/index.d.ts +5 -0
- package/tabs/si-tabset/si-tabset.component.d.ts +100 -0
- package/template-i18n.json +82 -0
- package/translate/si-translatable-keys.interface.d.ts +82 -0
- package/unauthorized-page/index.d.ts +6 -0
- package/unauthorized-page/package.json +3 -0
- package/unauthorized-page/si-unauthorized-page.component.d.ts +35 -0
- package/unauthorized-page/si-unauthorized-page.module.d.ts +7 -0
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { viewChild, signal, input, numberAttribute, booleanAttribute, output, computed, HostListener, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
3
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
|
+
import { addIcons, elementSearch, elementCancel, SiIconNextComponent } from '@siemens/element-ng/icon';
|
|
5
|
+
import { Subject } from 'rxjs';
|
|
6
|
+
import { debounceTime } from 'rxjs/operators';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Copyright Siemens 2016 - 2025.
|
|
10
|
+
* SPDX-License-Identifier: MIT
|
|
11
|
+
*/
|
|
12
|
+
class SiSearchBarComponent {
|
|
13
|
+
inputRef = viewChild.required('inputRef');
|
|
14
|
+
debouncer = new Subject();
|
|
15
|
+
disabledNgControl = signal(false);
|
|
16
|
+
/**
|
|
17
|
+
* Time unit change of search input takes effect.
|
|
18
|
+
*
|
|
19
|
+
* @defaultValue 400
|
|
20
|
+
*/
|
|
21
|
+
debounceTime = input(400, { transform: numberAttribute });
|
|
22
|
+
/**
|
|
23
|
+
* Prohibited characters restricting search.
|
|
24
|
+
*/
|
|
25
|
+
prohibitedCharacters = input();
|
|
26
|
+
/**
|
|
27
|
+
* Define search input placeholder.
|
|
28
|
+
*
|
|
29
|
+
* @defaultValue ''
|
|
30
|
+
*/
|
|
31
|
+
placeholder = input('');
|
|
32
|
+
/**
|
|
33
|
+
* Display search icon before search input.
|
|
34
|
+
*
|
|
35
|
+
* @defaultValue false
|
|
36
|
+
*/
|
|
37
|
+
showIcon = input(false, { transform: booleanAttribute });
|
|
38
|
+
/**
|
|
39
|
+
* Whether the search is tabbable or not.
|
|
40
|
+
*
|
|
41
|
+
* @defaultValue true
|
|
42
|
+
*/
|
|
43
|
+
tabbable = input(true, { transform: booleanAttribute });
|
|
44
|
+
/**
|
|
45
|
+
* Define search input content.
|
|
46
|
+
*/
|
|
47
|
+
value = input();
|
|
48
|
+
/** @defaultValue false */
|
|
49
|
+
readonly = input(false, { transform: booleanAttribute });
|
|
50
|
+
/**
|
|
51
|
+
* Color to use for component background
|
|
52
|
+
*
|
|
53
|
+
* @defaultValue 'base-1'
|
|
54
|
+
*/
|
|
55
|
+
colorVariant = input('base-1');
|
|
56
|
+
/** @defaultValue false */
|
|
57
|
+
// eslint-disable-next-line @angular-eslint/no-input-rename
|
|
58
|
+
disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });
|
|
59
|
+
/**
|
|
60
|
+
* Output callback event will provide you with search term if search input changes.
|
|
61
|
+
*/
|
|
62
|
+
searchChange = output();
|
|
63
|
+
isInvalid = false;
|
|
64
|
+
inFocus = false;
|
|
65
|
+
onChange = (val) => { };
|
|
66
|
+
onTouch = () => { };
|
|
67
|
+
disabled = computed(() => this.disabledInput() || this.disabledNgControl());
|
|
68
|
+
searchValue = signal('');
|
|
69
|
+
icons = addIcons({ elementCancel, elementSearch });
|
|
70
|
+
/** @internal */
|
|
71
|
+
writeValue(value) {
|
|
72
|
+
this.setSearch(value);
|
|
73
|
+
}
|
|
74
|
+
/** @internal */
|
|
75
|
+
registerOnChange(fn) {
|
|
76
|
+
this.onChange = fn;
|
|
77
|
+
}
|
|
78
|
+
/** @internal */
|
|
79
|
+
registerOnTouched(fn) {
|
|
80
|
+
this.onTouch = fn;
|
|
81
|
+
}
|
|
82
|
+
/** @internal */
|
|
83
|
+
setDisabledState(disabled) {
|
|
84
|
+
this.disabledNgControl.set(disabled);
|
|
85
|
+
}
|
|
86
|
+
ngOnChanges(changes) {
|
|
87
|
+
if (changes.value) {
|
|
88
|
+
this.setSearch(changes.value.currentValue);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
ngOnInit() {
|
|
92
|
+
this.debouncer.pipe(debounceTime(this.debounceTime())).subscribe(value => {
|
|
93
|
+
this.setSearch(value);
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
ngOnDestroy() {
|
|
97
|
+
this.debouncer.complete();
|
|
98
|
+
}
|
|
99
|
+
setSearch(value) {
|
|
100
|
+
if (value !== this.searchValue()) {
|
|
101
|
+
// FIXME: in v48, move outside the `if` so we don't emit when `value === undefined`
|
|
102
|
+
const searchVal = value ?? '';
|
|
103
|
+
this.searchValue.set(searchVal);
|
|
104
|
+
this.inputRef().nativeElement.value = searchVal;
|
|
105
|
+
this.onChange(searchVal);
|
|
106
|
+
this.searchChange.emit(searchVal);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
isProhibitedCharactersUsed(searchString) {
|
|
110
|
+
const prohibitedCharacters = this.prohibitedCharacters();
|
|
111
|
+
if (!prohibitedCharacters || !searchString) {
|
|
112
|
+
return false;
|
|
113
|
+
}
|
|
114
|
+
for (const prohibitedCharacter of prohibitedCharacters) {
|
|
115
|
+
if (searchString.includes(prohibitedCharacter)) {
|
|
116
|
+
return true;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
return false;
|
|
120
|
+
}
|
|
121
|
+
/** @internal */
|
|
122
|
+
focus() {
|
|
123
|
+
this.inputRef().nativeElement.focus();
|
|
124
|
+
}
|
|
125
|
+
onCancelFocus(event) {
|
|
126
|
+
event.stopPropagation();
|
|
127
|
+
}
|
|
128
|
+
input(event) {
|
|
129
|
+
const value = event.target.value;
|
|
130
|
+
if (!this.isProhibitedCharactersUsed(value)) {
|
|
131
|
+
this.debouncer.next(value);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
onBlur() {
|
|
135
|
+
this.inFocus = false;
|
|
136
|
+
this.onTouch();
|
|
137
|
+
}
|
|
138
|
+
resetForm() {
|
|
139
|
+
this.setSearch('');
|
|
140
|
+
}
|
|
141
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
142
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiSearchBarComponent, isStandalone: true, selector: "si-search-bar", inputs: { debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, prohibitedCharacters: { classPropertyName: "prohibitedCharacters", publicName: "prohibitedCharacters", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, tabbable: { classPropertyName: "tabbable", publicName: "tabbable", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange" }, host: { listeners: { "focus": "focus()" }, properties: { "class.readonly": "readonly()" } }, providers: [
|
|
143
|
+
{
|
|
144
|
+
provide: NG_VALUE_ACCESSOR,
|
|
145
|
+
useExisting: SiSearchBarComponent,
|
|
146
|
+
multi: true
|
|
147
|
+
}
|
|
148
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"position-relative\" [class.disabled]=\"disabled()\" [class.focus]=\"inFocus\">\n @if (showIcon()) {\n <si-icon-next class=\"search-bar-icon icon text-secondary\" [icon]=\"icons.elementSearch\" />\n }\n <input\n #inputRef\n type=\"text\"\n class=\"form-control\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n [class.dark-background]=\"colorVariant() === 'base-0'\"\n [class.ps-9]=\"showIcon()\"\n [class.is-invalid]=\"isInvalid\"\n [class.icon-end]=\"searchValue()\"\n [attr.tabindex]=\"tabbable() ? '' : '-1'\"\n [readonly]=\"readonly()\"\n (focus)=\"inFocus = true\"\n (blur)=\"onBlur()\"\n (input)=\"input($event)\"\n />\n @if (searchValue()) {\n <button\n type=\"button\"\n aria-label=\"clear\"\n class=\"btn btn-circle btn-xs btn-ghost cancel-button\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"resetForm()\"\n (focusin)=\"onCancelFocus($event)\"\n >\n <si-icon-next [icon]=\"icons.elementCancel\" />\n </button>\n }\n</div>\n", styles: [":host{--search-bar-icon-color: var(--element-text-secondary);--input-background-color: var(--element-base-1);--input-background-hover-color: var(--element-base-1)}:host div:hover .search-bar-icon,:host div:hover ::placeholder,:host div.focus .search-bar-icon,:host div.focus ::placeholder{color:var(--element-text-primary)!important}.dark-background{--input-background-color: var(--element-base-0);--input-background-hover-color: var(--element-ui-4)}input{transition:none;background-color:var(--input-background-color);border-radius:4px;border-width:0}input.form-control:focus-visible{background-color:var(--input-background-color)}.cancel-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}.is-invalid~.cancel-button{color:var(--element-status-danger)}.search-bar-icon{position:absolute;inset-block-start:4px;inset-inline-start:4px;color:var(--search-bar-icon-color);line-height:1}.icon-end{padding-inline-end:1.5rem}::placeholder{color:var(--element-text-secondary);padding-inline-start:2px}.disabled .search-bar-icon,.disabled input,.disabled .cancel-button,.disabled ::placeholder{color:var(--element-text-disabled)}.disabled input{background-color:var(--input-background-color)}\n"], dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
149
|
+
}
|
|
150
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSearchBarComponent, decorators: [{
|
|
151
|
+
type: Component,
|
|
152
|
+
args: [{ selector: 'si-search-bar', providers: [
|
|
153
|
+
{
|
|
154
|
+
provide: NG_VALUE_ACCESSOR,
|
|
155
|
+
useExisting: SiSearchBarComponent,
|
|
156
|
+
multi: true
|
|
157
|
+
}
|
|
158
|
+
], imports: [SiIconNextComponent], host: {
|
|
159
|
+
'[class.readonly]': 'readonly()'
|
|
160
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"position-relative\" [class.disabled]=\"disabled()\" [class.focus]=\"inFocus\">\n @if (showIcon()) {\n <si-icon-next class=\"search-bar-icon icon text-secondary\" [icon]=\"icons.elementSearch\" />\n }\n <input\n #inputRef\n type=\"text\"\n class=\"form-control\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n [class.dark-background]=\"colorVariant() === 'base-0'\"\n [class.ps-9]=\"showIcon()\"\n [class.is-invalid]=\"isInvalid\"\n [class.icon-end]=\"searchValue()\"\n [attr.tabindex]=\"tabbable() ? '' : '-1'\"\n [readonly]=\"readonly()\"\n (focus)=\"inFocus = true\"\n (blur)=\"onBlur()\"\n (input)=\"input($event)\"\n />\n @if (searchValue()) {\n <button\n type=\"button\"\n aria-label=\"clear\"\n class=\"btn btn-circle btn-xs btn-ghost cancel-button\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"resetForm()\"\n (focusin)=\"onCancelFocus($event)\"\n >\n <si-icon-next [icon]=\"icons.elementCancel\" />\n </button>\n }\n</div>\n", styles: [":host{--search-bar-icon-color: var(--element-text-secondary);--input-background-color: var(--element-base-1);--input-background-hover-color: var(--element-base-1)}:host div:hover .search-bar-icon,:host div:hover ::placeholder,:host div.focus .search-bar-icon,:host div.focus ::placeholder{color:var(--element-text-primary)!important}.dark-background{--input-background-color: var(--element-base-0);--input-background-hover-color: var(--element-ui-4)}input{transition:none;background-color:var(--input-background-color);border-radius:4px;border-width:0}input.form-control:focus-visible{background-color:var(--input-background-color)}.cancel-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}.is-invalid~.cancel-button{color:var(--element-status-danger)}.search-bar-icon{position:absolute;inset-block-start:4px;inset-inline-start:4px;color:var(--search-bar-icon-color);line-height:1}.icon-end{padding-inline-end:1.5rem}::placeholder{color:var(--element-text-secondary);padding-inline-start:2px}.disabled .search-bar-icon,.disabled input,.disabled .cancel-button,.disabled ::placeholder{color:var(--element-text-disabled)}.disabled input{background-color:var(--input-background-color)}\n"] }]
|
|
161
|
+
}], propDecorators: { focus: [{
|
|
162
|
+
type: HostListener,
|
|
163
|
+
args: ['focus']
|
|
164
|
+
}] } });
|
|
165
|
+
|
|
166
|
+
/**
|
|
167
|
+
* Copyright Siemens 2016 - 2025.
|
|
168
|
+
* SPDX-License-Identifier: MIT
|
|
169
|
+
*/
|
|
170
|
+
class SiSearchBarModule {
|
|
171
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSearchBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
172
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiSearchBarModule, imports: [SiSearchBarComponent], exports: [SiSearchBarComponent] });
|
|
173
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSearchBarModule, imports: [SiSearchBarComponent] });
|
|
174
|
+
}
|
|
175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSearchBarModule, decorators: [{
|
|
176
|
+
type: NgModule,
|
|
177
|
+
args: [{
|
|
178
|
+
imports: [SiSearchBarComponent],
|
|
179
|
+
exports: [SiSearchBarComponent]
|
|
180
|
+
}]
|
|
181
|
+
}] });
|
|
182
|
+
|
|
183
|
+
/**
|
|
184
|
+
* Copyright Siemens 2016 - 2025.
|
|
185
|
+
* SPDX-License-Identifier: MIT
|
|
186
|
+
*/
|
|
187
|
+
|
|
188
|
+
/**
|
|
189
|
+
* Generated bundle index. Do not edit.
|
|
190
|
+
*/
|
|
191
|
+
|
|
192
|
+
export { SiSearchBarComponent, SiSearchBarModule };
|
|
193
|
+
//# sourceMappingURL=siemens-element-ng-search-bar.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"siemens-element-ng-search-bar.mjs","sources":["../../../../projects/element-ng/search-bar/si-search-bar.component.ts","../../../../projects/element-ng/search-bar/si-search-bar.component.html","../../../../projects/element-ng/search-bar/si-search-bar.module.ts","../../../../projects/element-ng/search-bar/index.ts","../../../../projects/element-ng/search-bar/siemens-element-ng-search-bar.ts"],"sourcesContent":["/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n HostListener,\n input,\n numberAttribute,\n OnChanges,\n OnDestroy,\n OnInit,\n output,\n signal,\n SimpleChanges,\n viewChild\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { BackgroundColorVariant } from '@siemens/element-ng/common';\nimport {\n elementCancel,\n elementSearch,\n addIcons,\n SiIconNextComponent\n} from '@siemens/element-ng/icon';\nimport { Subject } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\n@Component({\n selector: 'si-search-bar',\n templateUrl: './si-search-bar.component.html',\n styleUrl: './si-search-bar.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: SiSearchBarComponent,\n multi: true\n }\n ],\n imports: [SiIconNextComponent],\n host: {\n '[class.readonly]': 'readonly()'\n },\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiSearchBarComponent implements OnInit, OnDestroy, ControlValueAccessor, OnChanges {\n private readonly inputRef = viewChild.required<ElementRef<HTMLInputElement>>('inputRef');\n private debouncer = new Subject<string>();\n private readonly disabledNgControl = signal(false);\n\n /**\n * Time unit change of search input takes effect.\n *\n * @defaultValue 400\n */\n readonly debounceTime = input(400, { transform: numberAttribute });\n /**\n * Prohibited characters restricting search.\n */\n readonly prohibitedCharacters = input<string>();\n /**\n * Define search input placeholder.\n *\n * @defaultValue ''\n */\n readonly placeholder = input('');\n /**\n * Display search icon before search input.\n *\n * @defaultValue false\n */\n readonly showIcon = input(false, { transform: booleanAttribute });\n /**\n * Whether the search is tabbable or not.\n *\n * @defaultValue true\n */\n readonly tabbable = input(true, { transform: booleanAttribute });\n\n /**\n * Define search input content.\n */\n readonly value = input<string>();\n\n /** @defaultValue false */\n readonly readonly = input(false, { transform: booleanAttribute });\n /**\n * Color to use for component background\n *\n * @defaultValue 'base-1'\n */\n readonly colorVariant = input<BackgroundColorVariant>('base-1');\n\n /** @defaultValue false */\n // eslint-disable-next-line @angular-eslint/no-input-rename\n readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });\n\n /**\n * Output callback event will provide you with search term if search input changes.\n */\n readonly searchChange = output<string>();\n\n protected isInvalid = false;\n protected inFocus = false;\n\n protected onChange = (val: any): void => {};\n protected onTouch = (): void => {};\n\n protected readonly disabled = computed(() => this.disabledInput() || this.disabledNgControl());\n\n protected readonly searchValue = signal('');\n protected readonly icons = addIcons({ elementCancel, elementSearch });\n\n /** @internal */\n writeValue(value: string): void {\n this.setSearch(value);\n }\n\n /** @internal */\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n /** @internal */\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n /** @internal */\n setDisabledState(disabled: boolean): void {\n this.disabledNgControl.set(disabled);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.value) {\n this.setSearch(changes.value.currentValue);\n }\n }\n\n ngOnInit(): void {\n this.debouncer.pipe(debounceTime(this.debounceTime())).subscribe(value => {\n this.setSearch(value);\n });\n }\n\n ngOnDestroy(): void {\n this.debouncer.complete();\n }\n\n private setSearch(value?: string): void {\n if (value !== this.searchValue()) {\n // FIXME: in v48, move outside the `if` so we don't emit when `value === undefined`\n const searchVal = value ?? '';\n this.searchValue.set(searchVal);\n this.inputRef().nativeElement.value = searchVal;\n this.onChange(searchVal);\n this.searchChange.emit(searchVal);\n }\n }\n\n private isProhibitedCharactersUsed(searchString: string | null): boolean {\n const prohibitedCharacters = this.prohibitedCharacters();\n if (!prohibitedCharacters || !searchString) {\n return false;\n }\n\n for (const prohibitedCharacter of prohibitedCharacters) {\n if (searchString.includes(prohibitedCharacter)) {\n return true;\n }\n }\n\n return false;\n }\n\n /** @internal */\n @HostListener('focus')\n focus(): void {\n this.inputRef().nativeElement.focus();\n }\n\n protected onCancelFocus(event: Event): void {\n event.stopPropagation();\n }\n\n protected input(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n if (!this.isProhibitedCharactersUsed(value)) {\n this.debouncer.next(value);\n }\n }\n\n protected onBlur(): void {\n this.inFocus = false;\n this.onTouch();\n }\n\n protected resetForm(): void {\n this.setSearch('');\n }\n}\n","<div class=\"position-relative\" [class.disabled]=\"disabled()\" [class.focus]=\"inFocus\">\n @if (showIcon()) {\n <si-icon-next class=\"search-bar-icon icon text-secondary\" [icon]=\"icons.elementSearch\" />\n }\n <input\n #inputRef\n type=\"text\"\n class=\"form-control\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n [class.dark-background]=\"colorVariant() === 'base-0'\"\n [class.ps-9]=\"showIcon()\"\n [class.is-invalid]=\"isInvalid\"\n [class.icon-end]=\"searchValue()\"\n [attr.tabindex]=\"tabbable() ? '' : '-1'\"\n [readonly]=\"readonly()\"\n (focus)=\"inFocus = true\"\n (blur)=\"onBlur()\"\n (input)=\"input($event)\"\n />\n @if (searchValue()) {\n <button\n type=\"button\"\n aria-label=\"clear\"\n class=\"btn btn-circle btn-xs btn-ghost cancel-button\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"resetForm()\"\n (focusin)=\"onCancelFocus($event)\"\n >\n <si-icon-next [icon]=\"icons.elementCancel\" />\n </button>\n }\n</div>\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiSearchBarComponent } from './si-search-bar.component';\n\n@NgModule({\n imports: [SiSearchBarComponent],\n exports: [SiSearchBarComponent]\n})\nexport class SiSearchBarModule {}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-search-bar.component';\nexport * from './si-search-bar.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,313 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { viewChild, signal, input, model, numberAttribute, booleanAttribute, computed, inject, NgZone, ChangeDetectorRef, HostListener, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
3
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
|
+
import { correctKeyRTL, listenGlobal, isRTL } from '@siemens/element-ng/common';
|
|
5
|
+
import { SI_FORM_ITEM_CONTROL } from '@siemens/element-ng/form';
|
|
6
|
+
import { addIcons, elementPlus, elementMinus, SiIconNextComponent } from '@siemens/element-ng/icon';
|
|
7
|
+
import * as i1 from '@siemens/element-translate-ng/translate';
|
|
8
|
+
import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
|
|
9
|
+
import { timer } from 'rxjs';
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Copyright Siemens 2016 - 2025.
|
|
13
|
+
* SPDX-License-Identifier: MIT
|
|
14
|
+
*/
|
|
15
|
+
class SiSliderComponent {
|
|
16
|
+
static idCounter = 0;
|
|
17
|
+
handleRef = viewChild.required('handle');
|
|
18
|
+
disabledNgControl = signal(false);
|
|
19
|
+
/**
|
|
20
|
+
* @defaultValue
|
|
21
|
+
* ```
|
|
22
|
+
* `__si-slider-${SiSliderComponent.idCounter++}`
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
id = input(`__si-slider-${SiSliderComponent.idCounter++}`);
|
|
26
|
+
/**
|
|
27
|
+
* Current value of slider.
|
|
28
|
+
*/
|
|
29
|
+
value = model();
|
|
30
|
+
/**
|
|
31
|
+
* Minimum of slider range.
|
|
32
|
+
*
|
|
33
|
+
* @defaultValue 0
|
|
34
|
+
*/
|
|
35
|
+
min = input(0, { transform: numberAttribute });
|
|
36
|
+
/**
|
|
37
|
+
* Maximum of slider range.
|
|
38
|
+
*
|
|
39
|
+
* @defaultValue 100
|
|
40
|
+
*/
|
|
41
|
+
max = input(100, { transform: numberAttribute });
|
|
42
|
+
/**
|
|
43
|
+
* Label to describe minimum of slider range.
|
|
44
|
+
*
|
|
45
|
+
* @defaultValue ''
|
|
46
|
+
*/
|
|
47
|
+
minLabel = input('');
|
|
48
|
+
/**
|
|
49
|
+
* Label to describe maximum of slider range.
|
|
50
|
+
*
|
|
51
|
+
* @defaultValue ''
|
|
52
|
+
*/
|
|
53
|
+
maxLabel = input('');
|
|
54
|
+
/**
|
|
55
|
+
* Interval to step through the slider.
|
|
56
|
+
*
|
|
57
|
+
* @defaultValue 1
|
|
58
|
+
*/
|
|
59
|
+
step = input(1, { transform: numberAttribute });
|
|
60
|
+
/**
|
|
61
|
+
* Icon to use as the slider thumb.
|
|
62
|
+
*/
|
|
63
|
+
thumbIcon = input();
|
|
64
|
+
/**
|
|
65
|
+
* Text for aria-label of increment. Needed for a11y.
|
|
66
|
+
*
|
|
67
|
+
* @defaultValue
|
|
68
|
+
* ```
|
|
69
|
+
* $localize`:@@SI_SLIDER.INCREMENT:Increment`
|
|
70
|
+
* ```
|
|
71
|
+
*/
|
|
72
|
+
incrementLabel = input($localize `:@@SI_SLIDER.INCREMENT:Increment`);
|
|
73
|
+
/**
|
|
74
|
+
* Text for aria-label of decrement. Needed for a11y.
|
|
75
|
+
*
|
|
76
|
+
* @defaultValue
|
|
77
|
+
* ```
|
|
78
|
+
* $localize`:@@SI_SLIDER.DECREMENT:Decrement`
|
|
79
|
+
* ```
|
|
80
|
+
*/
|
|
81
|
+
decrementLabel = input($localize `:@@SI_SLIDER.DECREMENT:Decrement`);
|
|
82
|
+
/**
|
|
83
|
+
* Text for aria-label of slider. Needed for a11y
|
|
84
|
+
*
|
|
85
|
+
* @defaultValue
|
|
86
|
+
* ```
|
|
87
|
+
* $localize`:@@SI_SLIDER.LABEL:Value`
|
|
88
|
+
* ```
|
|
89
|
+
*/
|
|
90
|
+
sliderLabel = input($localize `:@@SI_SLIDER.LABEL:Value`);
|
|
91
|
+
/**
|
|
92
|
+
* @defaultValue
|
|
93
|
+
* ```
|
|
94
|
+
* `${this.id()}-label`
|
|
95
|
+
* ```
|
|
96
|
+
*/
|
|
97
|
+
labelledby = input(`${this.id()}-label`);
|
|
98
|
+
/** @defaultValue false */
|
|
99
|
+
// eslint-disable-next-line @angular-eslint/no-input-rename
|
|
100
|
+
disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });
|
|
101
|
+
disabled = computed(() => this.disabledInput() || this.disabledNgControl() || this.min() === this.max());
|
|
102
|
+
sliderValue = computed(() => {
|
|
103
|
+
const value = this.value();
|
|
104
|
+
if (typeof value !== 'number') {
|
|
105
|
+
return this.roundToStepPrecision((this.min() + this.max()) / 2);
|
|
106
|
+
}
|
|
107
|
+
return value;
|
|
108
|
+
});
|
|
109
|
+
/** @internal */
|
|
110
|
+
errormessageId = `${this.id()}-errormessage`;
|
|
111
|
+
indicatorPos = computed(() => {
|
|
112
|
+
const range = this.max() - this.min();
|
|
113
|
+
if (range === 0) {
|
|
114
|
+
return 50;
|
|
115
|
+
}
|
|
116
|
+
const indicatorPos = ((this.sliderValue() - this.min()) * 100) / range;
|
|
117
|
+
return Math.max(Math.min(indicatorPos, 100), 0);
|
|
118
|
+
});
|
|
119
|
+
icons = addIcons({ elementMinus, elementPlus });
|
|
120
|
+
isDragging = false;
|
|
121
|
+
autoUpdate$ = timer(400, 80); // 250
|
|
122
|
+
autoUpdateSubs;
|
|
123
|
+
rtl = false;
|
|
124
|
+
unlistenDragEvents = [];
|
|
125
|
+
onTouchedCallback = () => { };
|
|
126
|
+
onChangeCallback = () => { };
|
|
127
|
+
zone = inject(NgZone);
|
|
128
|
+
changeDetectorRef = inject(ChangeDetectorRef);
|
|
129
|
+
incrementValue() {
|
|
130
|
+
this.value.set(this.normalizeValue(this.sliderValue() + this.step()));
|
|
131
|
+
this.valueChanged();
|
|
132
|
+
}
|
|
133
|
+
decrementValue() {
|
|
134
|
+
this.value.set(this.normalizeValue(this.sliderValue() - this.step()));
|
|
135
|
+
this.valueChanged();
|
|
136
|
+
}
|
|
137
|
+
roundToStepPrecision(value) {
|
|
138
|
+
const factor = 1 / this.step();
|
|
139
|
+
if (factor > 1) {
|
|
140
|
+
return Math.round(value * factor) / factor;
|
|
141
|
+
}
|
|
142
|
+
return Math.round(value / this.step()) * this.step();
|
|
143
|
+
}
|
|
144
|
+
normalizeValue(value) {
|
|
145
|
+
return Math.min(Math.max(this.roundToStepPrecision(value), this.min()), this.max());
|
|
146
|
+
}
|
|
147
|
+
handleTouchMove(event) {
|
|
148
|
+
if (event.cancelable) {
|
|
149
|
+
event.preventDefault();
|
|
150
|
+
event.stopPropagation();
|
|
151
|
+
}
|
|
152
|
+
this.handleDragMove(event.touches[0]);
|
|
153
|
+
}
|
|
154
|
+
handleMouseMove(event) {
|
|
155
|
+
event.preventDefault();
|
|
156
|
+
event.stopPropagation();
|
|
157
|
+
this.handleDragMove(event);
|
|
158
|
+
}
|
|
159
|
+
handleDragMove(event) {
|
|
160
|
+
const pointerPosX = event.clientX;
|
|
161
|
+
const handleRect = this.handleRef().nativeElement.getBoundingClientRect();
|
|
162
|
+
const handleWrapperWidth = this.handleRef().nativeElement.parentElement.clientWidth;
|
|
163
|
+
const direction = this.rtl ? -1 : 1;
|
|
164
|
+
const pointerPosDelta = Math.round(pointerPosX - (handleRect.x + handleRect.width / 2)) * direction;
|
|
165
|
+
const valueDelta = (pointerPosDelta / handleWrapperWidth) * (this.max() - this.min());
|
|
166
|
+
const newValue = this.normalizeValue(this.sliderValue() + valueDelta);
|
|
167
|
+
if ((pointerPosDelta > 0 && newValue > this.sliderValue()) ||
|
|
168
|
+
(pointerPosDelta < 0 && newValue < this.sliderValue())) {
|
|
169
|
+
// the zone is required to work around a problem on native device where CD doesn't trigger
|
|
170
|
+
this.zone.run(() => {
|
|
171
|
+
this.changeDetectorRef.markForCheck();
|
|
172
|
+
this.value.set(newValue);
|
|
173
|
+
this.valueChanged();
|
|
174
|
+
});
|
|
175
|
+
}
|
|
176
|
+
window.getSelection()?.removeAllRanges();
|
|
177
|
+
}
|
|
178
|
+
handleDragEnd() {
|
|
179
|
+
this.isDragging = false;
|
|
180
|
+
this.unlistenDragEvents.forEach(handler => handler());
|
|
181
|
+
this.unlistenDragEvents.length = 0;
|
|
182
|
+
}
|
|
183
|
+
valueChanged() {
|
|
184
|
+
this.onTouchedCallback();
|
|
185
|
+
this.onChangeCallback(this.sliderValue());
|
|
186
|
+
}
|
|
187
|
+
handlePointerDown(event) {
|
|
188
|
+
event.stopPropagation();
|
|
189
|
+
}
|
|
190
|
+
autoUpdateKeydown(event) {
|
|
191
|
+
const rtlCorrectedKey = correctKeyRTL(event.key);
|
|
192
|
+
if (rtlCorrectedKey === 'ArrowLeft') {
|
|
193
|
+
this.autoUpdateStart(event, false);
|
|
194
|
+
}
|
|
195
|
+
else if (rtlCorrectedKey === 'ArrowRight') {
|
|
196
|
+
this.autoUpdateStart(event, true);
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
autoUpdateStart(event, isIncrement) {
|
|
200
|
+
event.preventDefault();
|
|
201
|
+
const trigger = isIncrement ? () => this.incrementValue() : () => this.decrementValue();
|
|
202
|
+
this.autoUpdateSubs?.unsubscribe();
|
|
203
|
+
this.autoUpdateSubs = this.autoUpdate$.subscribe(trigger);
|
|
204
|
+
trigger();
|
|
205
|
+
}
|
|
206
|
+
autoUpdateStop() {
|
|
207
|
+
if (this.autoUpdateSubs) {
|
|
208
|
+
this.autoUpdateSubs.unsubscribe();
|
|
209
|
+
this.autoUpdateSubs = undefined;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
handleMouseDown(event) {
|
|
213
|
+
this.unlistenDragEvents.push(listenGlobal('mousemove', moveEvent => this.handleMouseMove(moveEvent)));
|
|
214
|
+
this.unlistenDragEvents.push(listenGlobal('mouseup', () => this.handleDragEnd()));
|
|
215
|
+
this.isDragging = true;
|
|
216
|
+
this.rtl = isRTL();
|
|
217
|
+
this.handleMouseMove(event);
|
|
218
|
+
}
|
|
219
|
+
handleTouchStart(event) {
|
|
220
|
+
if (event.touches.length !== 1) {
|
|
221
|
+
return;
|
|
222
|
+
}
|
|
223
|
+
this.unlistenDragEvents.push(listenGlobal('touchmove', e => this.handleTouchMove(e), true));
|
|
224
|
+
this.unlistenDragEvents.push(listenGlobal('touchend', () => this.handleDragEnd()));
|
|
225
|
+
this.isDragging = true;
|
|
226
|
+
this.rtl = isRTL();
|
|
227
|
+
this.handleTouchMove(event);
|
|
228
|
+
}
|
|
229
|
+
/** @internal */
|
|
230
|
+
writeValue(val) {
|
|
231
|
+
this.value.set(val);
|
|
232
|
+
}
|
|
233
|
+
/** @internal */
|
|
234
|
+
registerOnChange(fn) {
|
|
235
|
+
this.onChangeCallback = fn;
|
|
236
|
+
}
|
|
237
|
+
/** @internal */
|
|
238
|
+
registerOnTouched(fn) {
|
|
239
|
+
this.onTouchedCallback = fn;
|
|
240
|
+
}
|
|
241
|
+
/** @internal */
|
|
242
|
+
setDisabledState(isDisabled) {
|
|
243
|
+
this.disabledNgControl.set(isDisabled);
|
|
244
|
+
}
|
|
245
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
246
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiSliderComponent, isStandalone: true, selector: "si-slider", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLabel: { classPropertyName: "minLabel", publicName: "minLabel", isSignal: true, isRequired: false, transformFunction: null }, maxLabel: { classPropertyName: "maxLabel", publicName: "maxLabel", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, thumbIcon: { classPropertyName: "thumbIcon", publicName: "thumbIcon", isSignal: true, isRequired: false, transformFunction: null }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", isSignal: true, isRequired: false, transformFunction: null }, sliderLabel: { classPropertyName: "sliderLabel", publicName: "sliderLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledby: { classPropertyName: "labelledby", publicName: "labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "group" }, listeners: { "pointerdown": "handlePointerDown($event)", "mousedown": "handlePointerDown($event)", "touchstart": "handlePointerDown($event)" }, properties: { "class.disabled": "disabled()", "attr.aria-labelledby": "labelledby()" } }, providers: [
|
|
247
|
+
{
|
|
248
|
+
provide: NG_VALUE_ACCESSOR,
|
|
249
|
+
useExisting: SiSliderComponent,
|
|
250
|
+
multi: true
|
|
251
|
+
},
|
|
252
|
+
{
|
|
253
|
+
provide: SI_FORM_ITEM_CONTROL,
|
|
254
|
+
useExisting: SiSliderComponent
|
|
255
|
+
}
|
|
256
|
+
], viewQueries: [{ propertyName: "handleRef", first: true, predicate: ["handle"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"slider-container\">\n <button\n type=\"button\"\n class=\"btn btn-sm btn-circle btn-secondary decrement-button\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"decrementLabel() | translate\"\n [attr.aria-describedby]=\"errormessageId\"\n (mousedown)=\"autoUpdateStart($event, false)\"\n (touchstart)=\"autoUpdateStart($event, false)\"\n (keydown.enter)=\"autoUpdateStart($event, false)\"\n (touchend)=\"autoUpdateStop()\"\n (mouseup)=\"autoUpdateStop()\"\n (keyup.enter)=\"autoUpdateStop()\"\n (mouseleave)=\"autoUpdateStop()\"\n >\n <si-icon-next [icon]=\"icons.elementMinus\" />\n </button>\n\n <div class=\"slider-wrapper\">\n <div class=\"value-indicator-wrapper\">\n <span class=\"value-indicator\" [style.inset-inline-start.%]=\"indicatorPos()\">\n <span>\n <ng-content />\n </span>\n </span>\n </div>\n\n <div class=\"slider\" [class.dragging]=\"isDragging\">\n <div class=\"track\"></div>\n <div\n class=\"thumb-handle-wrapper\"\n [class.dragging]=\"isDragging\"\n (mousedown)=\"handleMouseDown($event)\"\n (touchstart)=\"handleTouchStart($event)\"\n >\n <div #handle class=\"thumb-handle\" [style.inset-inline-start.%]=\"indicatorPos()\">\n <div\n class=\"thumb\"\n tabindex=\"0\"\n role=\"slider\"\n [attr.aria-label]=\"sliderLabel() | translate\"\n [attr.aria-valuenow]=\"sliderValue()\"\n [attr.aria-describedby]=\"errormessageId\"\n [class.dragging]=\"isDragging\"\n (keydown)=\"autoUpdateKeydown($event)\"\n (keyup)=\"autoUpdateStop()\"\n >\n @let iconValue = thumbIcon();\n @if (iconValue) {\n <si-icon-next [icon]=\"iconValue\" />\n } @else {\n <div class=\"hover-circle\"></div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"btn btn-sm btn-circle btn-secondary increment-button\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"incrementLabel() | translate\"\n [attr.aria-describedby]=\"errormessageId\"\n (mousedown)=\"autoUpdateStart($event, true)\"\n (touchstart)=\"autoUpdateStart($event, true)\"\n (keydown.enter)=\"autoUpdateStart($event, true)\"\n (touchend)=\"autoUpdateStop()\"\n (mouseup)=\"autoUpdateStop()\"\n (keyup.enter)=\"autoUpdateStop()\"\n (mouseleave)=\"autoUpdateStop()\"\n >\n <si-icon-next [icon]=\"icons.elementPlus\" />\n </button>\n</div>\n\n@if (minLabel() && maxLabel()) {\n <div class=\"range-indicator-wrapper\">\n <div class=\"range-indicator\">\n <span>{{ minLabel() }}</span>\n <span class=\"ms-auto\">{{ maxLabel() }}</span>\n </div>\n </div>\n}\n", styles: [":host{display:flex;flex-direction:column}.slider-container{display:flex;align-items:flex-end}.decrement-button{margin-inline-end:4px}.increment-button{margin-inline-start:4px}.slider-wrapper{position:relative;flex:1 1 0;min-inline-size:0;display:flex;flex-direction:column}.value-indicator-wrapper{position:relative;margin-inline:12px;text-align:start}.value-indicator{position:relative;display:inline-block;white-space:nowrap;color:var(--element-text-secondary)}.value-indicator>span{display:inline-block;margin-inline-start:-50%}.range-indicator-wrapper{margin-block:0;margin-inline:36px}.range-indicator-wrapper .range-indicator{display:inline-flex;white-space:nowrap;inline-size:100%;color:var(--element-text-secondary)}.range-indicator-wrapper .range-indicator>span{display:inline-block}.slider{position:relative;inline-size:100%;block-size:32px;cursor:pointer}.slider.dragging{cursor:grabbing}:host.disabled .slider{cursor:default}.slider .track{position:absolute;inset-block-start:50%;border-radius:var(--element-radius-1);margin-block-start:-2px;block-size:4px;inline-size:100%;background:var(--element-ui-4);pointer-events:none}.slider .thumb-handle-wrapper{position:absolute;inset-block:0;inset-inline:12px}:host.disabled .slider .thumb-handle-wrapper{pointer-events:none}.slider .thumb-handle{display:flex;align-items:center;justify-content:center;position:absolute;inset-block-start:50%;margin-block-start:-20px;margin-inline:-20px;inline-size:40px;block-size:40px}:host.disabled .slider .thumb-handle{pointer-events:none}.slider .thumb{--thumb-state-color: var(--element-ui-0);display:flex;align-items:center;justify-content:center;block-size:24px;min-block-size:24px;inline-size:24px;min-inline-size:24px;border-radius:50%;border:1px solid var(--thumb-state-color);box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2);background:var(--element-base-1)}.slider .thumb:hover:not(.dragging){--thumb-state-color: var(--element-ui-0-hover);background:var(--element-action-secondary-hover)}:host.disabled .slider .thumb{--thumb-state-color: var(--element-ui-3)}.slider .thumb si-icon-next{font-size:1.5rem;color:var(--thumb-state-color)}.slider .thumb:hover .hover-circle,.slider .thumb:focus .hover-circle,.slider .thumb.dragging .hover-circle{display:block}.slider .hover-circle{display:none;block-size:12px;inline-size:12px;border-radius:50%;background:var(--thumb-state-color)}\n"], dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
257
|
+
}
|
|
258
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSliderComponent, decorators: [{
|
|
259
|
+
type: Component,
|
|
260
|
+
args: [{ selector: 'si-slider', providers: [
|
|
261
|
+
{
|
|
262
|
+
provide: NG_VALUE_ACCESSOR,
|
|
263
|
+
useExisting: SiSliderComponent,
|
|
264
|
+
multi: true
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
provide: SI_FORM_ITEM_CONTROL,
|
|
268
|
+
useExisting: SiSliderComponent
|
|
269
|
+
}
|
|
270
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [SiIconNextComponent, SiTranslateModule], host: {
|
|
271
|
+
role: 'group',
|
|
272
|
+
'[class.disabled]': 'disabled()',
|
|
273
|
+
'[attr.aria-labelledby]': 'labelledby()'
|
|
274
|
+
}, template: "<div class=\"slider-container\">\n <button\n type=\"button\"\n class=\"btn btn-sm btn-circle btn-secondary decrement-button\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"decrementLabel() | translate\"\n [attr.aria-describedby]=\"errormessageId\"\n (mousedown)=\"autoUpdateStart($event, false)\"\n (touchstart)=\"autoUpdateStart($event, false)\"\n (keydown.enter)=\"autoUpdateStart($event, false)\"\n (touchend)=\"autoUpdateStop()\"\n (mouseup)=\"autoUpdateStop()\"\n (keyup.enter)=\"autoUpdateStop()\"\n (mouseleave)=\"autoUpdateStop()\"\n >\n <si-icon-next [icon]=\"icons.elementMinus\" />\n </button>\n\n <div class=\"slider-wrapper\">\n <div class=\"value-indicator-wrapper\">\n <span class=\"value-indicator\" [style.inset-inline-start.%]=\"indicatorPos()\">\n <span>\n <ng-content />\n </span>\n </span>\n </div>\n\n <div class=\"slider\" [class.dragging]=\"isDragging\">\n <div class=\"track\"></div>\n <div\n class=\"thumb-handle-wrapper\"\n [class.dragging]=\"isDragging\"\n (mousedown)=\"handleMouseDown($event)\"\n (touchstart)=\"handleTouchStart($event)\"\n >\n <div #handle class=\"thumb-handle\" [style.inset-inline-start.%]=\"indicatorPos()\">\n <div\n class=\"thumb\"\n tabindex=\"0\"\n role=\"slider\"\n [attr.aria-label]=\"sliderLabel() | translate\"\n [attr.aria-valuenow]=\"sliderValue()\"\n [attr.aria-describedby]=\"errormessageId\"\n [class.dragging]=\"isDragging\"\n (keydown)=\"autoUpdateKeydown($event)\"\n (keyup)=\"autoUpdateStop()\"\n >\n @let iconValue = thumbIcon();\n @if (iconValue) {\n <si-icon-next [icon]=\"iconValue\" />\n } @else {\n <div class=\"hover-circle\"></div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"btn btn-sm btn-circle btn-secondary increment-button\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"incrementLabel() | translate\"\n [attr.aria-describedby]=\"errormessageId\"\n (mousedown)=\"autoUpdateStart($event, true)\"\n (touchstart)=\"autoUpdateStart($event, true)\"\n (keydown.enter)=\"autoUpdateStart($event, true)\"\n (touchend)=\"autoUpdateStop()\"\n (mouseup)=\"autoUpdateStop()\"\n (keyup.enter)=\"autoUpdateStop()\"\n (mouseleave)=\"autoUpdateStop()\"\n >\n <si-icon-next [icon]=\"icons.elementPlus\" />\n </button>\n</div>\n\n@if (minLabel() && maxLabel()) {\n <div class=\"range-indicator-wrapper\">\n <div class=\"range-indicator\">\n <span>{{ minLabel() }}</span>\n <span class=\"ms-auto\">{{ maxLabel() }}</span>\n </div>\n </div>\n}\n", styles: [":host{display:flex;flex-direction:column}.slider-container{display:flex;align-items:flex-end}.decrement-button{margin-inline-end:4px}.increment-button{margin-inline-start:4px}.slider-wrapper{position:relative;flex:1 1 0;min-inline-size:0;display:flex;flex-direction:column}.value-indicator-wrapper{position:relative;margin-inline:12px;text-align:start}.value-indicator{position:relative;display:inline-block;white-space:nowrap;color:var(--element-text-secondary)}.value-indicator>span{display:inline-block;margin-inline-start:-50%}.range-indicator-wrapper{margin-block:0;margin-inline:36px}.range-indicator-wrapper .range-indicator{display:inline-flex;white-space:nowrap;inline-size:100%;color:var(--element-text-secondary)}.range-indicator-wrapper .range-indicator>span{display:inline-block}.slider{position:relative;inline-size:100%;block-size:32px;cursor:pointer}.slider.dragging{cursor:grabbing}:host.disabled .slider{cursor:default}.slider .track{position:absolute;inset-block-start:50%;border-radius:var(--element-radius-1);margin-block-start:-2px;block-size:4px;inline-size:100%;background:var(--element-ui-4);pointer-events:none}.slider .thumb-handle-wrapper{position:absolute;inset-block:0;inset-inline:12px}:host.disabled .slider .thumb-handle-wrapper{pointer-events:none}.slider .thumb-handle{display:flex;align-items:center;justify-content:center;position:absolute;inset-block-start:50%;margin-block-start:-20px;margin-inline:-20px;inline-size:40px;block-size:40px}:host.disabled .slider .thumb-handle{pointer-events:none}.slider .thumb{--thumb-state-color: var(--element-ui-0);display:flex;align-items:center;justify-content:center;block-size:24px;min-block-size:24px;inline-size:24px;min-inline-size:24px;border-radius:50%;border:1px solid var(--thumb-state-color);box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2);background:var(--element-base-1)}.slider .thumb:hover:not(.dragging){--thumb-state-color: var(--element-ui-0-hover);background:var(--element-action-secondary-hover)}:host.disabled .slider .thumb{--thumb-state-color: var(--element-ui-3)}.slider .thumb si-icon-next{font-size:1.5rem;color:var(--thumb-state-color)}.slider .thumb:hover .hover-circle,.slider .thumb:focus .hover-circle,.slider .thumb.dragging .hover-circle{display:block}.slider .hover-circle{display:none;block-size:12px;inline-size:12px;border-radius:50%;background:var(--thumb-state-color)}\n"] }]
|
|
275
|
+
}], propDecorators: { handlePointerDown: [{
|
|
276
|
+
type: HostListener,
|
|
277
|
+
args: ['pointerdown', ['$event']]
|
|
278
|
+
}, {
|
|
279
|
+
type: HostListener,
|
|
280
|
+
args: ['mousedown', ['$event']]
|
|
281
|
+
}, {
|
|
282
|
+
type: HostListener,
|
|
283
|
+
args: ['touchstart', ['$event']]
|
|
284
|
+
}] } });
|
|
285
|
+
|
|
286
|
+
/**
|
|
287
|
+
* Copyright Siemens 2016 - 2025.
|
|
288
|
+
* SPDX-License-Identifier: MIT
|
|
289
|
+
*/
|
|
290
|
+
class SiSliderModule {
|
|
291
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
292
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiSliderModule, imports: [SiSliderComponent], exports: [SiSliderComponent] });
|
|
293
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSliderModule, imports: [SiSliderComponent] });
|
|
294
|
+
}
|
|
295
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSliderModule, decorators: [{
|
|
296
|
+
type: NgModule,
|
|
297
|
+
args: [{
|
|
298
|
+
imports: [SiSliderComponent],
|
|
299
|
+
exports: [SiSliderComponent]
|
|
300
|
+
}]
|
|
301
|
+
}] });
|
|
302
|
+
|
|
303
|
+
/**
|
|
304
|
+
* Copyright Siemens 2016 - 2025.
|
|
305
|
+
* SPDX-License-Identifier: MIT
|
|
306
|
+
*/
|
|
307
|
+
|
|
308
|
+
/**
|
|
309
|
+
* Generated bundle index. Do not edit.
|
|
310
|
+
*/
|
|
311
|
+
|
|
312
|
+
export { SiSliderComponent, SiSliderModule };
|
|
313
|
+
//# sourceMappingURL=siemens-element-ng-slider.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"siemens-element-ng-slider.mjs","sources":["../../../../projects/element-ng/slider/si-slider.component.ts","../../../../projects/element-ng/slider/si-slider.component.html","../../../../projects/element-ng/slider/si-slider.module.ts","../../../../projects/element-ng/slider/index.ts","../../../../projects/element-ng/slider/siemens-element-ng-slider.ts"],"sourcesContent":["/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n ElementRef,\n HostListener,\n inject,\n input,\n model,\n NgZone,\n numberAttribute,\n signal,\n viewChild\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { correctKeyRTL, isRTL, listenGlobal } from '@siemens/element-ng/common';\nimport { SI_FORM_ITEM_CONTROL, SiFormItemControl } from '@siemens/element-ng/form';\nimport { elementMinus, elementPlus, addIcons, SiIconNextComponent } from '@siemens/element-ng/icon';\nimport { SiTranslateModule } from '@siemens/element-translate-ng/translate';\nimport { Subscription, timer } from 'rxjs';\n\n@Component({\n selector: 'si-slider',\n templateUrl: './si-slider.component.html',\n styleUrl: './si-slider.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: SiSliderComponent,\n multi: true\n },\n {\n provide: SI_FORM_ITEM_CONTROL,\n useExisting: SiSliderComponent\n }\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [SiIconNextComponent, SiTranslateModule],\n host: {\n role: 'group',\n '[class.disabled]': 'disabled()',\n '[attr.aria-labelledby]': 'labelledby()'\n }\n})\nexport class SiSliderComponent implements ControlValueAccessor, SiFormItemControl {\n private static idCounter = 0;\n\n private readonly handleRef = viewChild.required<ElementRef>('handle');\n\n private readonly disabledNgControl = signal(false);\n\n /**\n * @defaultValue\n * ```\n * `__si-slider-${SiSliderComponent.idCounter++}`\n * ```\n */\n readonly id = input(`__si-slider-${SiSliderComponent.idCounter++}`);\n\n /**\n * Current value of slider.\n */\n readonly value = model<number>();\n /**\n * Minimum of slider range.\n *\n * @defaultValue 0\n */\n readonly min = input(0, { transform: numberAttribute });\n /**\n * Maximum of slider range.\n *\n * @defaultValue 100\n */\n readonly max = input(100, { transform: numberAttribute });\n /**\n * Label to describe minimum of slider range.\n *\n * @defaultValue ''\n */\n readonly minLabel = input('');\n /**\n * Label to describe maximum of slider range.\n *\n * @defaultValue ''\n */\n readonly maxLabel = input('');\n /**\n * Interval to step through the slider.\n *\n * @defaultValue 1\n */\n readonly step = input(1, { transform: numberAttribute });\n /**\n * Icon to use as the slider thumb.\n */\n readonly thumbIcon = input<string>();\n /**\n * Text for aria-label of increment. Needed for a11y.\n *\n * @defaultValue\n * ```\n * $localize`:@@SI_SLIDER.INCREMENT:Increment`\n * ```\n */\n readonly incrementLabel = input($localize`:@@SI_SLIDER.INCREMENT:Increment`);\n /**\n * Text for aria-label of decrement. Needed for a11y.\n *\n * @defaultValue\n * ```\n * $localize`:@@SI_SLIDER.DECREMENT:Decrement`\n * ```\n */\n readonly decrementLabel = input($localize`:@@SI_SLIDER.DECREMENT:Decrement`);\n /**\n * Text for aria-label of slider. Needed for a11y\n *\n * @defaultValue\n * ```\n * $localize`:@@SI_SLIDER.LABEL:Value`\n * ```\n */\n readonly sliderLabel = input($localize`:@@SI_SLIDER.LABEL:Value`);\n\n /**\n * @defaultValue\n * ```\n * `${this.id()}-label`\n * ```\n */\n readonly labelledby = input(`${this.id()}-label`);\n\n /** @defaultValue false */\n // eslint-disable-next-line @angular-eslint/no-input-rename\n readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });\n\n protected readonly disabled = computed(\n () => this.disabledInput() || this.disabledNgControl() || this.min() === this.max()\n );\n\n protected readonly sliderValue = computed<number>(() => {\n const value = this.value();\n if (typeof value !== 'number') {\n return this.roundToStepPrecision((this.min() + this.max()) / 2);\n }\n return value;\n });\n\n /** @internal */\n readonly errormessageId = `${this.id()}-errormessage`;\n\n protected readonly indicatorPos = computed(() => {\n const range = this.max() - this.min();\n if (range === 0) {\n return 50;\n }\n const indicatorPos = ((this.sliderValue()! - this.min()) * 100) / range;\n return Math.max(Math.min(indicatorPos, 100), 0);\n });\n\n protected readonly icons = addIcons({ elementMinus, elementPlus });\n protected isDragging = false;\n\n private autoUpdate$ = timer(400, 80); // 250\n private autoUpdateSubs?: Subscription;\n private rtl = false;\n\n private unlistenDragEvents: (() => void)[] = [];\n\n private onTouchedCallback: () => void = () => {};\n private onChangeCallback: (val: any) => void = () => {};\n\n private zone = inject(NgZone);\n private changeDetectorRef = inject(ChangeDetectorRef);\n\n private incrementValue(): void {\n this.value.set(this.normalizeValue(this.sliderValue()! + this.step()));\n this.valueChanged();\n }\n\n private decrementValue(): void {\n this.value.set(this.normalizeValue(this.sliderValue()! - this.step()));\n this.valueChanged();\n }\n\n private roundToStepPrecision(value: number): number {\n const factor = 1 / this.step();\n if (factor > 1) {\n return Math.round(value * factor) / factor;\n }\n return Math.round(value / this.step()) * this.step();\n }\n\n private normalizeValue(value: number): number {\n return Math.min(Math.max(this.roundToStepPrecision(value), this.min()), this.max());\n }\n\n private handleTouchMove(event: TouchEvent): void {\n if (event.cancelable) {\n event.preventDefault();\n event.stopPropagation();\n }\n this.handleDragMove(event.touches[0]);\n }\n\n private handleMouseMove(event: MouseEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.handleDragMove(event);\n }\n\n private handleDragMove(event: MouseEvent | Touch): void {\n const pointerPosX = event.clientX;\n const handleRect = this.handleRef().nativeElement.getBoundingClientRect();\n const handleWrapperWidth = this.handleRef().nativeElement.parentElement.clientWidth;\n\n const direction = this.rtl ? -1 : 1;\n const pointerPosDelta =\n Math.round(pointerPosX - (handleRect.x + handleRect.width / 2)) * direction;\n const valueDelta = (pointerPosDelta / handleWrapperWidth) * (this.max() - this.min());\n\n const newValue = this.normalizeValue(this.sliderValue()! + valueDelta);\n\n if (\n (pointerPosDelta > 0 && newValue > this.sliderValue()!) ||\n (pointerPosDelta < 0 && newValue < this.sliderValue()!)\n ) {\n // the zone is required to work around a problem on native device where CD doesn't trigger\n this.zone.run(() => {\n this.changeDetectorRef.markForCheck();\n this.value.set(newValue);\n this.valueChanged();\n });\n }\n window.getSelection()?.removeAllRanges();\n }\n\n private handleDragEnd(): void {\n this.isDragging = false;\n\n this.unlistenDragEvents.forEach(handler => handler());\n this.unlistenDragEvents.length = 0;\n }\n\n private valueChanged(): void {\n this.onTouchedCallback();\n this.onChangeCallback(this.sliderValue());\n }\n\n @HostListener('pointerdown', ['$event'])\n @HostListener('mousedown', ['$event'])\n @HostListener('touchstart', ['$event'])\n protected handlePointerDown(event: Event): void {\n event.stopPropagation();\n }\n\n protected autoUpdateKeydown(event: KeyboardEvent): void {\n const rtlCorrectedKey = correctKeyRTL(event.key);\n\n if (rtlCorrectedKey === 'ArrowLeft') {\n this.autoUpdateStart(event, false);\n } else if (rtlCorrectedKey === 'ArrowRight') {\n this.autoUpdateStart(event, true);\n }\n }\n\n protected autoUpdateStart(event: Event, isIncrement: boolean): void {\n event.preventDefault();\n\n const trigger = isIncrement ? () => this.incrementValue() : () => this.decrementValue();\n\n this.autoUpdateSubs?.unsubscribe();\n this.autoUpdateSubs = this.autoUpdate$.subscribe(trigger);\n trigger();\n }\n\n protected autoUpdateStop(): void {\n if (this.autoUpdateSubs) {\n this.autoUpdateSubs.unsubscribe();\n this.autoUpdateSubs = undefined;\n }\n }\n\n protected handleMouseDown(event: MouseEvent): void {\n this.unlistenDragEvents.push(\n listenGlobal('mousemove', moveEvent => this.handleMouseMove(moveEvent))\n );\n this.unlistenDragEvents.push(listenGlobal('mouseup', () => this.handleDragEnd()));\n\n this.isDragging = true;\n\n this.rtl = isRTL();\n this.handleMouseMove(event);\n }\n\n protected handleTouchStart(event: TouchEvent): void {\n if (event.touches.length !== 1) {\n return;\n }\n\n this.unlistenDragEvents.push(listenGlobal('touchmove', e => this.handleTouchMove(e), true));\n this.unlistenDragEvents.push(listenGlobal('touchend', () => this.handleDragEnd()));\n\n this.isDragging = true;\n\n this.rtl = isRTL();\n this.handleTouchMove(event);\n }\n\n /** @internal */\n writeValue(val: any): void {\n this.value.set(val);\n }\n\n /** @internal */\n registerOnChange(fn: any): void {\n this.onChangeCallback = fn;\n }\n\n /** @internal */\n registerOnTouched(fn: () => void): void {\n this.onTouchedCallback = fn;\n }\n\n /** @internal */\n setDisabledState(isDisabled: boolean): void {\n this.disabledNgControl.set(isDisabled);\n }\n}\n","<div class=\"slider-container\">\n <button\n type=\"button\"\n class=\"btn btn-sm btn-circle btn-secondary decrement-button\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"decrementLabel() | translate\"\n [attr.aria-describedby]=\"errormessageId\"\n (mousedown)=\"autoUpdateStart($event, false)\"\n (touchstart)=\"autoUpdateStart($event, false)\"\n (keydown.enter)=\"autoUpdateStart($event, false)\"\n (touchend)=\"autoUpdateStop()\"\n (mouseup)=\"autoUpdateStop()\"\n (keyup.enter)=\"autoUpdateStop()\"\n (mouseleave)=\"autoUpdateStop()\"\n >\n <si-icon-next [icon]=\"icons.elementMinus\" />\n </button>\n\n <div class=\"slider-wrapper\">\n <div class=\"value-indicator-wrapper\">\n <span class=\"value-indicator\" [style.inset-inline-start.%]=\"indicatorPos()\">\n <span>\n <ng-content />\n </span>\n </span>\n </div>\n\n <div class=\"slider\" [class.dragging]=\"isDragging\">\n <div class=\"track\"></div>\n <div\n class=\"thumb-handle-wrapper\"\n [class.dragging]=\"isDragging\"\n (mousedown)=\"handleMouseDown($event)\"\n (touchstart)=\"handleTouchStart($event)\"\n >\n <div #handle class=\"thumb-handle\" [style.inset-inline-start.%]=\"indicatorPos()\">\n <div\n class=\"thumb\"\n tabindex=\"0\"\n role=\"slider\"\n [attr.aria-label]=\"sliderLabel() | translate\"\n [attr.aria-valuenow]=\"sliderValue()\"\n [attr.aria-describedby]=\"errormessageId\"\n [class.dragging]=\"isDragging\"\n (keydown)=\"autoUpdateKeydown($event)\"\n (keyup)=\"autoUpdateStop()\"\n >\n @let iconValue = thumbIcon();\n @if (iconValue) {\n <si-icon-next [icon]=\"iconValue\" />\n } @else {\n <div class=\"hover-circle\"></div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"btn btn-sm btn-circle btn-secondary increment-button\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"incrementLabel() | translate\"\n [attr.aria-describedby]=\"errormessageId\"\n (mousedown)=\"autoUpdateStart($event, true)\"\n (touchstart)=\"autoUpdateStart($event, true)\"\n (keydown.enter)=\"autoUpdateStart($event, true)\"\n (touchend)=\"autoUpdateStop()\"\n (mouseup)=\"autoUpdateStop()\"\n (keyup.enter)=\"autoUpdateStop()\"\n (mouseleave)=\"autoUpdateStop()\"\n >\n <si-icon-next [icon]=\"icons.elementPlus\" />\n </button>\n</div>\n\n@if (minLabel() && maxLabel()) {\n <div class=\"range-indicator-wrapper\">\n <div class=\"range-indicator\">\n <span>{{ minLabel() }}</span>\n <span class=\"ms-auto\">{{ maxLabel() }}</span>\n </div>\n </div>\n}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiSliderComponent } from './si-slider.component';\n\n@NgModule({\n imports: [SiSliderComponent],\n exports: [SiSliderComponent]\n})\nexport class SiSliderModule {}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-slider.component';\nexport * from './si-slider.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;AAAA;;;AAGG;MA+CU,iBAAiB,CAAA;AACpB,IAAA,OAAO,SAAS,GAAG,CAAC;AAEX,IAAA,SAAS,GAAG,SAAS,CAAC,QAAQ,CAAa,QAAQ,CAAC;AAEpD,IAAA,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC;AAElD;;;;;AAKG;IACM,EAAE,GAAG,KAAK,CAAC,CAAe,YAAA,EAAA,iBAAiB,CAAC,SAAS,EAAE,CAAE,CAAA,CAAC;AAEnE;;AAEG;IACM,KAAK,GAAG,KAAK,EAAU;AAChC;;;;AAIG;IACM,GAAG,GAAG,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;AACvD;;;;AAIG;IACM,GAAG,GAAG,KAAK,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;AACzD;;;;AAIG;AACM,IAAA,QAAQ,GAAG,KAAK,CAAC,EAAE,CAAC;AAC7B;;;;AAIG;AACM,IAAA,QAAQ,GAAG,KAAK,CAAC,EAAE,CAAC;AAC7B;;;;AAIG;IACM,IAAI,GAAG,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;AACxD;;AAEG;IACM,SAAS,GAAG,KAAK,EAAU;AACpC;;;;;;;AAOG;AACM,IAAA,cAAc,GAAG,KAAK,CAAC,SAAS,CAAA,CAAA,gCAAA,CAAkC,CAAC;AAC5E;;;;;;;AAOG;AACM,IAAA,cAAc,GAAG,KAAK,CAAC,SAAS,CAAA,CAAA,gCAAA,CAAkC,CAAC;AAC5E;;;;;;;AAOG;AACM,IAAA,WAAW,GAAG,KAAK,CAAC,SAAS,CAAA,CAAA,wBAAA,CAA0B,CAAC;AAEjE;;;;;AAKG;IACM,UAAU,GAAG,KAAK,CAAC,CAAG,EAAA,IAAI,CAAC,EAAE,EAAE,CAAQ,MAAA,CAAA,CAAC;;;AAIxC,IAAA,aAAa,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAEtE,QAAQ,GAAG,QAAQ,CACpC,MAAM,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,iBAAiB,EAAE,IAAI,IAAI,CAAC,GAAG,EAAE,KAAK,IAAI,CAAC,GAAG,EAAE,CACpF;AAEkB,IAAA,WAAW,GAAG,QAAQ,CAAS,MAAK;AACrD,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,YAAA,OAAO,IAAI,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;;AAEjE,QAAA,OAAO,KAAK;AACd,KAAC,CAAC;;AAGO,IAAA,cAAc,GAAG,CAAG,EAAA,IAAI,CAAC,EAAE,EAAE,eAAe;AAElC,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;QAC9C,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE;AACrC,QAAA,IAAI,KAAK,KAAK,CAAC,EAAE;AACf,YAAA,OAAO,EAAE;;AAEX,QAAA,MAAM,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAG,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,GAAG,IAAI,KAAK;AACvE,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;AACjD,KAAC,CAAC;IAEiB,KAAK,GAAG,QAAQ,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC;IACxD,UAAU,GAAG,KAAK;IAEpB,WAAW,GAAG,KAAK,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;AAC7B,IAAA,cAAc;IACd,GAAG,GAAG,KAAK;IAEX,kBAAkB,GAAmB,EAAE;AAEvC,IAAA,iBAAiB,GAAe,MAAK,GAAG;AACxC,IAAA,gBAAgB,GAAuB,MAAK,GAAG;AAE/C,IAAA,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC;AACrB,IAAA,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC;IAE7C,cAAc,GAAA;QACpB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,EAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACtE,IAAI,CAAC,YAAY,EAAE;;IAGb,cAAc,GAAA;QACpB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,EAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACtE,IAAI,CAAC,YAAY,EAAE;;AAGb,IAAA,oBAAoB,CAAC,KAAa,EAAA;QACxC,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;AAC9B,QAAA,IAAI,MAAM,GAAG,CAAC,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,MAAM;;AAE5C,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;;AAG9C,IAAA,cAAc,CAAC,KAAa,EAAA;QAClC,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC;;AAG7E,IAAA,eAAe,CAAC,KAAiB,EAAA;AACvC,QAAA,IAAI,KAAK,CAAC,UAAU,EAAE;YACpB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;;QAEzB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;;AAG/B,IAAA,eAAe,CAAC,KAAiB,EAAA;QACvC,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;;AAGpB,IAAA,cAAc,CAAC,KAAyB,EAAA;AAC9C,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO;QACjC,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,aAAa,CAAC,qBAAqB,EAAE;AACzE,QAAA,MAAM,kBAAkB,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,aAAa,CAAC,aAAa,CAAC,WAAW;AAEnF,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC;QACnC,MAAM,eAAe,GACnB,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,UAAU,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS;AAC7E,QAAA,MAAM,UAAU,GAAG,CAAC,eAAe,GAAG,kBAAkB,KAAK,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;AAErF,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,EAAG,GAAG,UAAU,CAAC;QAEtE,IACE,CAAC,eAAe,GAAG,CAAC,IAAI,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAG;AACtD,aAAC,eAAe,GAAG,CAAC,IAAI,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAG,CAAC,EACvD;;AAEA,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,MAAK;AACjB,gBAAA,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE;AACrC,gBAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC;gBACxB,IAAI,CAAC,YAAY,EAAE;AACrB,aAAC,CAAC;;AAEJ,QAAA,MAAM,CAAC,YAAY,EAAE,EAAE,eAAe,EAAE;;IAGlC,aAAa,GAAA;AACnB,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AAEvB,QAAA,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,OAAO,IAAI,OAAO,EAAE,CAAC;AACrD,QAAA,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC;;IAG5B,YAAY,GAAA;QAClB,IAAI,CAAC,iBAAiB,EAAE;QACxB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;;AAMjC,IAAA,iBAAiB,CAAC,KAAY,EAAA;QACtC,KAAK,CAAC,eAAe,EAAE;;AAGf,IAAA,iBAAiB,CAAC,KAAoB,EAAA;QAC9C,MAAM,eAAe,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC;AAEhD,QAAA,IAAI,eAAe,KAAK,WAAW,EAAE;AACnC,YAAA,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC;;AAC7B,aAAA,IAAI,eAAe,KAAK,YAAY,EAAE;AAC3C,YAAA,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC;;;IAI3B,eAAe,CAAC,KAAY,EAAE,WAAoB,EAAA;QAC1D,KAAK,CAAC,cAAc,EAAE;QAEtB,MAAM,OAAO,GAAG,WAAW,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE;AAEvF,QAAA,IAAI,CAAC,cAAc,EAAE,WAAW,EAAE;QAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC;AACzD,QAAA,OAAO,EAAE;;IAGD,cAAc,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,WAAW,EAAE;AACjC,YAAA,IAAI,CAAC,cAAc,GAAG,SAAS;;;AAIzB,IAAA,eAAe,CAAC,KAAiB,EAAA;QACzC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAC1B,YAAY,CAAC,WAAW,EAAE,SAAS,IAAI,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CACxE;AACD,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;AAEjF,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AAEtB,QAAA,IAAI,CAAC,GAAG,GAAG,KAAK,EAAE;AAClB,QAAA,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;;AAGnB,IAAA,gBAAgB,CAAC,KAAiB,EAAA;QAC1C,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;YAC9B;;QAGF,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;AAC3F,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;AAElF,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AAEtB,QAAA,IAAI,CAAC,GAAG,GAAG,KAAK,EAAE;AAClB,QAAA,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;;;AAI7B,IAAA,UAAU,CAAC,GAAQ,EAAA;AACjB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;;;AAIrB,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,gBAAgB,GAAG,EAAE;;;AAI5B,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE;;;AAI7B,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC;;uGA3R7B,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAnBjB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,EAAA,aAAA,EAAA,2BAAA,EAAA,WAAA,EAAA,2BAAA,EAAA,YAAA,EAAA,2BAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,sBAAA,EAAA,cAAA,EAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,iBAAiB;AAC9B,gBAAA,KAAK,EAAE;AACR,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,oBAAoB;AAC7B,gBAAA,WAAW,EAAE;AACd;AACF,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,QAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECzCH,ozFAqFA,EAAA,MAAA,EAAA,CAAA,o4EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED1CY,mBAAmB,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,iBAAiB,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAOrC,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAvB7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAGV,SAAA,EAAA;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAmB,iBAAA;AAC9B,4BAAA,KAAK,EAAE;AACR,yBAAA;AACD,wBAAA;AACE,4BAAA,OAAO,EAAE,oBAAoB;AAC7B,4BAAA,WAAW,EAAmB;AAC/B;qBACF,EACgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,EAC3C,IAAA,EAAA;AACJ,wBAAA,IAAI,EAAE,OAAO;AACb,wBAAA,kBAAkB,EAAE,YAAY;AAChC,wBAAA,wBAAwB,EAAE;AAC3B,qBAAA,EAAA,QAAA,EAAA,ozFAAA,EAAA,MAAA,EAAA,CAAA,o4EAAA,CAAA,EAAA;8BAmNS,iBAAiB,EAAA,CAAA;sBAH1B,YAAY;uBAAC,aAAa,EAAE,CAAC,QAAQ,CAAC;;sBACtC,YAAY;uBAAC,WAAW,EAAE,CAAC,QAAQ,CAAC;;sBACpC,YAAY;uBAAC,YAAY,EAAE,CAAC,QAAQ,CAAC;;;AElQxC;;;AAGG;MASU,cAAc,CAAA;uGAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAd,cAAc,EAAA,OAAA,EAAA,CAHf,iBAAiB,CAAA,EAAA,OAAA,EAAA,CACjB,iBAAiB,CAAA,EAAA,CAAA;AAEhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,YAHf,iBAAiB,CAAA,EAAA,CAAA;;2FAGhB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAJ1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,iBAAiB,CAAC;oBAC5B,OAAO,EAAE,CAAC,iBAAiB;AAC5B,iBAAA;;;ACXD;;;AAGG;;ACHH;;AAEG;;;;"}
|