@siemens/element-ng 47.2.0 → 47.4.0

package/fesm2022/siemens-element-ng-slider.mjs

@@ -0,0 +1,313 @@
+import * as i0 from '@angular/core';
+import { viewChild, signal, input, model, numberAttribute, booleanAttribute, computed, inject, NgZone, ChangeDetectorRef, HostListener, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { correctKeyRTL, listenGlobal, isRTL } from '@siemens/element-ng/common';
+import { SI_FORM_ITEM_CONTROL } from '@siemens/element-ng/form';
+import { addIcons, elementPlus, elementMinus, SiIconNextComponent } from '@siemens/element-ng/icon';
+import * as i1 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+import { timer } from 'rxjs';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSliderComponent {
+    static idCounter = 0;
+    handleRef = viewChild.required('handle');
+    disabledNgControl = signal(false);
+    /**
+     * @defaultValue
+     * ```
+     * `__si-slider-${SiSliderComponent.idCounter++}`
+     * ```
+     */
+    id = input(`__si-slider-${SiSliderComponent.idCounter++}`);
+    /**
+     * Current value of slider.
+     */
+    value = model();
+    /**
+     * Minimum of slider range.
+     *
+     * @defaultValue 0
+     */
+    min = input(0, { transform: numberAttribute });
+    /**
+     * Maximum of slider range.
+     *
+     * @defaultValue 100
+     */
+    max = input(100, { transform: numberAttribute });
+    /**
+     * Label to describe minimum of slider range.
+     *
+     * @defaultValue ''
+     */
+    minLabel = input('');
+    /**
+     * Label to describe maximum of slider range.
+     *
+     * @defaultValue ''
+     */
+    maxLabel = input('');
+    /**
+     * Interval to step through the slider.
+     *
+     * @defaultValue 1
+     */
+    step = input(1, { transform: numberAttribute });
+    /**
+     * Icon to use as the slider thumb.
+     */
+    thumbIcon = input();
+    /**
+     * Text for aria-label of increment. Needed for a11y.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_SLIDER.INCREMENT:Increment`
+     * ```
+     */
+    incrementLabel = input($localize `:@@SI_SLIDER.INCREMENT:Increment`);
+    /**
+     * Text for aria-label of decrement. Needed for a11y.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_SLIDER.DECREMENT:Decrement`
+     * ```
+     */
+    decrementLabel = input($localize `:@@SI_SLIDER.DECREMENT:Decrement`);
+    /**
+     * Text for aria-label of slider. Needed for a11y
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_SLIDER.LABEL:Value`
+     * ```
+     */
+    sliderLabel = input($localize `:@@SI_SLIDER.LABEL:Value`);
+    /**
+     * @defaultValue
+     * ```
+     * `${this.id()}-label`
+     * ```
+     */
+    labelledby = input(`${this.id()}-label`);
+    /** @defaultValue false */
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });
+    disabled = computed(() => this.disabledInput() || this.disabledNgControl() || this.min() === this.max());
+    sliderValue = computed(() => {
+        const value = this.value();
+        if (typeof value !== 'number') {
+            return this.roundToStepPrecision((this.min() + this.max()) / 2);
+        }
+        return value;
+    });
+    /** @internal */
+    errormessageId = `${this.id()}-errormessage`;
+    indicatorPos = computed(() => {
+        const range = this.max() - this.min();
+        if (range === 0) {
+            return 50;
+        }
+        const indicatorPos = ((this.sliderValue() - this.min()) * 100) / range;
+        return Math.max(Math.min(indicatorPos, 100), 0);
+    });
+    icons = addIcons({ elementMinus, elementPlus });
+    isDragging = false;
+    autoUpdate$ = timer(400, 80); // 250
+    autoUpdateSubs;
+    rtl = false;
+    unlistenDragEvents = [];
+    onTouchedCallback = () => { };
+    onChangeCallback = () => { };
+    zone = inject(NgZone);
+    changeDetectorRef = inject(ChangeDetectorRef);
+    incrementValue() {
+        this.value.set(this.normalizeValue(this.sliderValue() + this.step()));
+        this.valueChanged();
+    }
+    decrementValue() {
+        this.value.set(this.normalizeValue(this.sliderValue() - this.step()));
+        this.valueChanged();
+    }
+    roundToStepPrecision(value) {
+        const factor = 1 / this.step();
+        if (factor > 1) {
+            return Math.round(value * factor) / factor;
+        }
+        return Math.round(value / this.step()) * this.step();
+    }
+    normalizeValue(value) {
+        return Math.min(Math.max(this.roundToStepPrecision(value), this.min()), this.max());
+    }
+    handleTouchMove(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        this.handleDragMove(event.touches[0]);
+    }
+    handleMouseMove(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.handleDragMove(event);
+    }
+    handleDragMove(event) {
+        const pointerPosX = event.clientX;
+        const handleRect = this.handleRef().nativeElement.getBoundingClientRect();
+        const handleWrapperWidth = this.handleRef().nativeElement.parentElement.clientWidth;
+        const direction = this.rtl ? -1 : 1;
+        const pointerPosDelta = Math.round(pointerPosX - (handleRect.x + handleRect.width / 2)) * direction;
+        const valueDelta = (pointerPosDelta / handleWrapperWidth) * (this.max() - this.min());
+        const newValue = this.normalizeValue(this.sliderValue() + valueDelta);
+        if ((pointerPosDelta > 0 && newValue > this.sliderValue()) ||
+            (pointerPosDelta < 0 && newValue < this.sliderValue())) {
+            // the zone is required to work around a problem on native device where CD doesn't trigger
+            this.zone.run(() => {
+                this.changeDetectorRef.markForCheck();
+                this.value.set(newValue);
+                this.valueChanged();
+            });
+        }
+        window.getSelection()?.removeAllRanges();
+    }
+    handleDragEnd() {
+        this.isDragging = false;
+        this.unlistenDragEvents.forEach(handler => handler());
+        this.unlistenDragEvents.length = 0;
+    }
+    valueChanged() {
+        this.onTouchedCallback();
+        this.onChangeCallback(this.sliderValue());
+    }
+    handlePointerDown(event) {
+        event.stopPropagation();
+    }
+    autoUpdateKeydown(event) {
+        const rtlCorrectedKey = correctKeyRTL(event.key);
+        if (rtlCorrectedKey === 'ArrowLeft') {
+            this.autoUpdateStart(event, false);
+        }
+        else if (rtlCorrectedKey === 'ArrowRight') {
+            this.autoUpdateStart(event, true);
+        }
+    }
+    autoUpdateStart(event, isIncrement) {
+        event.preventDefault();
+        const trigger = isIncrement ? () => this.incrementValue() : () => this.decrementValue();
+        this.autoUpdateSubs?.unsubscribe();
+        this.autoUpdateSubs = this.autoUpdate$.subscribe(trigger);
+        trigger();
+    }
+    autoUpdateStop() {
+        if (this.autoUpdateSubs) {
+            this.autoUpdateSubs.unsubscribe();
+            this.autoUpdateSubs = undefined;
+        }
+    }
+    handleMouseDown(event) {
+        this.unlistenDragEvents.push(listenGlobal('mousemove', moveEvent => this.handleMouseMove(moveEvent)));
+        this.unlistenDragEvents.push(listenGlobal('mouseup', () => this.handleDragEnd()));
+        this.isDragging = true;
+        this.rtl = isRTL();
+        this.handleMouseMove(event);
+    }
+    handleTouchStart(event) {
+        if (event.touches.length !== 1) {
+            return;
+        }
+        this.unlistenDragEvents.push(listenGlobal('touchmove', e => this.handleTouchMove(e), true));
+        this.unlistenDragEvents.push(listenGlobal('touchend', () => this.handleDragEnd()));
+        this.isDragging = true;
+        this.rtl = isRTL();
+        this.handleTouchMove(event);
+    }
+    /** @internal */
+    writeValue(val) {
+        this.value.set(val);
+    }
+    /** @internal */
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    /** @internal */
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    /** @internal */
+    setDisabledState(isDisabled) {
+        this.disabledNgControl.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: SiSliderComponent,
+                multi: true
+            },
+            {
+                provide: SI_FORM_ITEM_CONTROL,
+                useExisting: SiSliderComponent
+            }
+        ], 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-slider', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SiSliderComponent,
+                            multi: true
+                        },
+                        {
+                            provide: SI_FORM_ITEM_CONTROL,
+                            useExisting: SiSliderComponent
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [SiIconNextComponent, SiTranslateModule], host: {
+                        role: 'group',
+                        '[class.disabled]': 'disabled()',
+                        '[attr.aria-labelledby]': 'labelledby()'
+                    }, 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"] }]
+        }], propDecorators: { handlePointerDown: [{
+                type: HostListener,
+                args: ['pointerdown', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSliderModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiSliderModule, imports: [SiSliderComponent], exports: [SiSliderComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSliderModule, imports: [SiSliderComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSliderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SiSliderComponent],
+                    exports: [SiSliderComponent]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiSliderComponent, SiSliderModule };
+//# sourceMappingURL=siemens-element-ng-slider.mjs.map

package/fesm2022/siemens-element-ng-slider.mjs.map

@@ -0,0 +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":"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"}

package/fesm2022/siemens-element-ng-sort-bar.mjs

@@ -0,0 +1,89 @@
+import { HttpParams } from '@angular/common/http';
+import * as i0 from '@angular/core';
+import { input, output, Component, NgModule } from '@angular/core';
+import { addIcons, elementSortUp, elementSortDown, SiIconNextComponent } from '@siemens/element-ng/icon';
+import * as i1 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSortBarComponent {
+    /**
+     * Custom sort title.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_SORT_BAR.TITLE:Sort by`
+     * ```
+     */
+    sortTitle = input($localize `:@@SI_SORT_BAR.TITLE:Sort by`);
+    /**
+     * List of sort criteria.
+     */
+    sortCriteria = input.required();
+    /**
+     * `key` which sortCriteria is active by default.
+     */
+    defaultSortCriteria = input.required();
+    /**
+     * Output callback event will provide you with a HttpParams object if active
+     * sortCriteria change.
+     */
+    sortChange = output();
+    icons = addIcons({ elementSortDown, elementSortUp });
+    activeSortCriteria = '';
+    sortIsDescending = false;
+    ngOnInit() {
+        const defaultSortCriteria = this.defaultSortCriteria();
+        if (defaultSortCriteria) {
+            this.setActive(defaultSortCriteria);
+        }
+    }
+    setActive(key) {
+        if (this.activeSortCriteria === key) {
+            this.sortIsDescending = !this.sortIsDescending;
+        }
+        this.activeSortCriteria = key;
+        const searchParams = new HttpParams()
+            .set('sort', this.activeSortCriteria)
+            .set('order', this.sortIsDescending ? 'desc' : 'asc');
+        this.sortChange.emit(searchParams);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSortBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiSortBarComponent, isStandalone: true, selector: "si-sort-bar", inputs: { sortTitle: { classPropertyName: "sortTitle", publicName: "sortTitle", isSignal: true, isRequired: false, transformFunction: null }, sortCriteria: { classPropertyName: "sortCriteria", publicName: "sortCriteria", isSignal: true, isRequired: true, transformFunction: null }, defaultSortCriteria: { classPropertyName: "defaultSortCriteria", publicName: "defaultSortCriteria", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<div class=\"list-header list-header-sorting\">\n  <div class=\"list-title\">{{ sortTitle() | translate }}:</div>\n  @for (item of sortCriteria(); track $index) {\n    <div\n      class=\"sort-item\"\n      tabindex=\"0\"\n      [attr.data-key]=\"item.key\"\n      (click)=\"setActive(item.key)\"\n      (keydown.enter)=\"setActive(item.key)\"\n    >\n      <span>{{ item.name | translate }}</span>\n      @if (item.key === activeSortCriteria) {\n        <si-icon-next\n          class=\"icon\"\n          [icon]=\"sortIsDescending ? icons.elementSortDown : icons.elementSortUp\"\n        />\n      }\n    </div>\n  }\n</div>\n", styles: [".list-title{font-weight:500;margin-inline-end:5px}.list-header-sorting{background:var(--element-ui-4);padding:6px 12px;display:flex;align-items:center}.sort-item{padding-block:0;padding-inline:5px;cursor:pointer;display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSortBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-sort-bar', imports: [SiIconNextComponent, SiTranslateModule], template: "<div class=\"list-header list-header-sorting\">\n  <div class=\"list-title\">{{ sortTitle() | translate }}:</div>\n  @for (item of sortCriteria(); track $index) {\n    <div\n      class=\"sort-item\"\n      tabindex=\"0\"\n      [attr.data-key]=\"item.key\"\n      (click)=\"setActive(item.key)\"\n      (keydown.enter)=\"setActive(item.key)\"\n    >\n      <span>{{ item.name | translate }}</span>\n      @if (item.key === activeSortCriteria) {\n        <si-icon-next\n          class=\"icon\"\n          [icon]=\"sortIsDescending ? icons.elementSortDown : icons.elementSortUp\"\n        />\n      }\n    </div>\n  }\n</div>\n", styles: [".list-title{font-weight:500;margin-inline-end:5px}.list-header-sorting{background:var(--element-ui-4);padding:6px 12px;display:flex;align-items:center}.sort-item{padding-block:0;padding-inline:5px;cursor:pointer;display:flex;align-items:center}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSortBarModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSortBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiSortBarModule, imports: [SiSortBarComponent], exports: [SiSortBarComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSortBarModule, imports: [SiSortBarComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSortBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SiSortBarComponent],
+                    exports: [SiSortBarComponent]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiSortBarComponent, SiSortBarModule };
+//# sourceMappingURL=siemens-element-ng-sort-bar.mjs.map

package/fesm2022/siemens-element-ng-sort-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"siemens-element-ng-sort-bar.mjs","sources":["../../../../projects/element-ng/sort-bar/si-sort-bar.component.ts","../../../../projects/element-ng/sort-bar/si-sort-bar.component.html","../../../../projects/element-ng/sort-bar/si-sort-bar.module.ts","../../../../projects/element-ng/sort-bar/index.ts","../../../../projects/element-ng/sort-bar/siemens-element-ng-sort-bar.ts"],"sourcesContent":["/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { HttpParams } from '@angular/common/http';\nimport { Component, input, OnInit, output } from '@angular/core';\nimport {\n  addIcons,\n  elementSortDown,\n  elementSortUp,\n  SiIconNextComponent\n} from '@siemens/element-ng/icon';\nimport { SiTranslateModule } from '@siemens/element-translate-ng/translate';\n\nexport interface SortCriteria {\n  name: string;\n  key: number | string;\n}\n\n@Component({\n  selector: 'si-sort-bar',\n  templateUrl: './si-sort-bar.component.html',\n  styleUrl: './si-sort-bar.component.scss',\n  imports: [SiIconNextComponent, SiTranslateModule]\n})\nexport class SiSortBarComponent implements OnInit {\n  /**\n   * Custom sort title.\n   *\n   * @defaultValue\n   * ```\n   * $localize`:@@SI_SORT_BAR.TITLE:Sort by`\n   * ```\n   */\n  readonly sortTitle = input($localize`:@@SI_SORT_BAR.TITLE:Sort by`);\n  /**\n   * List of sort criteria.\n   */\n  readonly sortCriteria = input.required<SortCriteria[]>();\n  /**\n   * `key` which sortCriteria is active by default.\n   */\n  readonly defaultSortCriteria = input.required<SortCriteria['key']>();\n\n  /**\n   * Output callback event will provide you with a HttpParams object if active\n   * sortCriteria change.\n   */\n  readonly sortChange = output<HttpParams>();\n\n  protected readonly icons = addIcons({ elementSortDown, elementSortUp });\n  protected activeSortCriteria: SortCriteria['key'] = '';\n  protected sortIsDescending = false;\n\n  ngOnInit(): void {\n    const defaultSortCriteria = this.defaultSortCriteria();\n    if (defaultSortCriteria) {\n      this.setActive(defaultSortCriteria);\n    }\n  }\n\n  protected setActive(key: SortCriteria['key']): void {\n    if (this.activeSortCriteria === key) {\n      this.sortIsDescending = !this.sortIsDescending;\n    }\n\n    this.activeSortCriteria = key;\n\n    const searchParams = new HttpParams()\n      .set('sort', this.activeSortCriteria)\n      .set('order', this.sortIsDescending ? 'desc' : 'asc');\n\n    this.sortChange.emit(searchParams);\n  }\n}\n","<div class=\"list-header list-header-sorting\">\n  <div class=\"list-title\">{{ sortTitle() | translate }}:</div>\n  @for (item of sortCriteria(); track $index) {\n    <div\n      class=\"sort-item\"\n      tabindex=\"0\"\n      [attr.data-key]=\"item.key\"\n      (click)=\"setActive(item.key)\"\n      (keydown.enter)=\"setActive(item.key)\"\n    >\n      <span>{{ item.name | translate }}</span>\n      @if (item.key === activeSortCriteria) {\n        <si-icon-next\n          class=\"icon\"\n          [icon]=\"sortIsDescending ? icons.elementSortDown : icons.elementSortUp\"\n        />\n      }\n    </div>\n  }\n</div>\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiSortBarComponent } from './si-sort-bar.component';\n\n@NgModule({\n  imports: [SiSortBarComponent],\n  exports: [SiSortBarComponent]\n})\nexport class SiSortBarModule {}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-sort-bar.component';\nexport * from './si-sort-bar.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}