import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { input, computed, Component, model, booleanAttribute, output, viewChildren, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { elementPlus, elementDelete } from '@siemens/element-icons';
import { SiIconComponent, addIcons } from '@siemens/element-ng/icon';
import { SiNumberInputComponent } from '@siemens/element-ng/number-input';
import { SiSelectComponent, SiSelectSingleValueDirective, SiSelectSimpleOptionsDirective } from '@siemens/element-ng/select';
import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiReadonlyThresholdOptionComponent {
    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
    option = computed(() => {
        const options = this.options();
        const value = this.value();
        if (value && options) {
            return options.find(opt => opt.value === value);
        }
        return undefined;
    }, ...(ngDevMode ? [{ debugName: "option" }] : []));
    color = computed(() => {
        const option = this.option();
        return !option || option.disabled ? undefined : option.iconColor;
    }, ...(ngDevMode ? [{ debugName: "color" }] : []));
    label = computed(() => this.option()?.label, ...(ngDevMode ? [{ debugName: "label" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiReadonlyThresholdOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiReadonlyThresholdOptionComponent, isStandalone: true, selector: "si-readonly-threshold-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "d-flex align-items-center py-2 my-4 px-4 si-h5" }, ngImport: i0, template: `@let opt = option();
    @if (opt && opt.icon) {
      <i class="icon-stack">
        <si-icon class="icon me-2" [class]="color()" [icon]="opt.icon" />
        @if (opt.stackedIcon) {
          <si-icon class="icon me-2" [class]="opt.stackedIconColor" [icon]="opt.stackedIcon" />
        }
      </i>
    }
    <span class="text-truncate">{{ label() | translate }}</span>`, isInline: true, styles: [":host{block-size:2rem}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiReadonlyThresholdOptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-readonly-threshold-option', imports: [SiTranslatePipe, SiIconComponent], template: `@let opt = option();
    @if (opt && opt.icon) {
      <i class="icon-stack">
        <si-icon class="icon me-2" [class]="color()" [icon]="opt.icon" />
        @if (opt.stackedIcon) {
          <si-icon class="icon me-2" [class]="opt.stackedIconColor" [icon]="opt.stackedIcon" />
        }
      </i>
    }
    <span class="text-truncate">{{ label() | translate }}</span>`, host: { class: 'd-flex align-items-center py-2 my-4 px-4 si-h5' }, styles: [":host{block-size:2rem}\n"] }]
        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiThresholdComponent {
    /**
     * Options to be shown in select dropdown
     *
     * @defaultValue []
     */
    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
    /**
     * The thresholds
     *
     * @defaultValue []
     */
    thresholdSteps = model([], ...(ngDevMode ? [{ debugName: "thresholdSteps" }] : []));
    /**
     * The unit to show
     *
     * @defaultValue ''
     */
    unit = input('', ...(ngDevMode ? [{ debugName: "unit" }] : []));
    /**
     * The min. value for the threshold value
     *
     * @defaultValue 0
     */
    minValue = input(0, ...(ngDevMode ? [{ debugName: "minValue" }] : []));
    /**
     * The max. value for the threshold value
     *
     * @defaultValue 100
     */
    maxValue = input(100, ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
    /**
     * The step size for the threshold value
     *
     * @defaultValue 1
     */
    stepSize = input(1, ...(ngDevMode ? [{ debugName: "stepSize" }] : []));
    /**
     * Max. number of steps, 0 for no hard limit
     *
     * @defaultValue 0
     */
    maxSteps = input(0, ...(ngDevMode ? [{ debugName: "maxSteps" }] : []));
    /**
     * Do validation?
     *
     * @defaultValue true
     */
    validation = input(true, { ...(ngDevMode ? { debugName: "validation" } : {}), transform: booleanAttribute });
    /**
     * When disabled, steps cannot be added/removed
     *
     * @defaultValue true
     */
    canAddRemoveSteps = input(true, { ...(ngDevMode ? { debugName: "canAddRemoveSteps" } : {}), transform: booleanAttribute });
    /**
     * Use horizontal layout?
     *
     * @defaultValue false
     */
    horizontalLayout = input(false, { ...(ngDevMode ? { debugName: "horizontalLayout" } : {}), transform: booleanAttribute });
    /**
     * Show dec/inc buttons?
     *
     * @defaultValue true
     */
    showDecIncButtons = input(true, { ...(ngDevMode ? { debugName: "showDecIncButtons" } : {}), transform: booleanAttribute });
    /**
     * The obvious
     *
     * @defaultValue false
     */
    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
    /**
     * Indicate that the threshold options are readonly and cannot be changed. This will also disable adding / removing steps.
     *
     * @defaultValue false
     */
    readonlyConditions = input(false, { ...(ngDevMode ? { debugName: "readonlyConditions" } : {}), transform: booleanAttribute });
    /**
     * The aria-label for delete button
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_THRESHOLD.DELETE:Delete step`)
     * ```
     */
    deleteAriaLabel = input(t(() => $localize `:@@SI_THRESHOLD.DELETE:Delete step`), ...(ngDevMode ? [{ debugName: "deleteAriaLabel" }] : []));
    /**
     * The aria-label for add button
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_THRESHOLD.ADD:Add step`)
     * ```
     */
    addAriaLabel = input(t(() => $localize `:@@SI_THRESHOLD.ADD:Add step`), ...(ngDevMode ? [{ debugName: "addAriaLabel" }] : []));
    /**
     * The aria-label for input field
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_THRESHOLD.INPUT_LABEL:Threshold value`)
     * ```
     */
    inputAriaLabel = input(t(() => $localize `:@@SI_THRESHOLD.INPUT_LABEL:Threshold value`), ...(ngDevMode ? [{ debugName: "inputAriaLabel" }] : []));
    /**
     * The aria-label for status selection
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_THRESHOLD.STATUS:Status`)
     * ```
     */
    statusAriaLabel = input(t(() => $localize `:@@SI_THRESHOLD.STATUS:Status`), ...(ngDevMode ? [{ debugName: "statusAriaLabel" }] : []));
    /**
     * When enabled, numeric step inputs are replaced with readonly text fields displaying the `aliasLabel` of each step.
     * Add/remove step buttons are also hidden.
     *
     * @defaultValue false
     */
    useAliasForStepValues = input(false, { ...(ngDevMode ? { debugName: "useAliasForStepValues" } : {}), transform: booleanAttribute });
    /** Fired when validation status changes */
    validChange = output();
    colors = computed(() => {
        const colorMap = new Map();
        for (const opt of this.options()) {
            colorMap.set(opt.value, opt.iconColor ?? '');
        }
        return this.thresholdSteps().map(ths => colorMap.get(ths.optionValue) ?? '');
    }, ...(ngDevMode ? [{ debugName: "colors" }] : []));
    icons = addIcons({ elementDelete, elementPlus });
    _valid = true;
    /**
     * Whether the current input value is valid or not.
     */
    get valid() {
        return this._valid;
    }
    numberInputs = viewChildren(SiNumberInputComponent, ...(ngDevMode ? [{ debugName: "numberInputs" }] : []));
    showAddRemoveButtons = computed(() => !this.useAliasForStepValues() &&
        this.canAddRemoveSteps() &&
        !this.readonly() &&
        !this.readonlyConditions(), ...(ngDevMode ? [{ debugName: "showAddRemoveButtons" }] : []));
    ngOnChanges() {
        this.validate();
    }
    deleteStep(index) {
        const updated = [...this.thresholdSteps()];
        updated.splice(index, 1);
        this.thresholdSteps.set(updated);
        this.validate();
    }
    addStep(index) {
        const newStep = { ...this.thresholdSteps()[index], value: undefined };
        const updated = [...this.thresholdSteps()];
        updated.splice(index + 1, 0, newStep);
        this.thresholdSteps.set(updated);
        this.validate();
        setTimeout(() => this.numberInputs()[index].inputElement().nativeElement.focus());
    }
    stepChange() {
        this.thresholdSteps.set([...this.thresholdSteps()]);
        this.validate();
    }
    validate() {
        const prevValid = this.valid;
        this._valid = true;
        for (let i = 1; i < this.thresholdSteps().length; i++) {
            const step = this.thresholdSteps()[i];
            if (this.validation()) {
                const prev = this.thresholdSteps()[i - 1];
                const next = this.thresholdSteps()[i + 1];
                // valid: withing min/max, each step is lower than next step with step size between
                step.valid =
                    step.value != null &&
                        step.value >= this.minValue() &&
                        step.value <= this.maxValue() &&
                        (prev.value == null || step.value - this.stepSize() >= prev.value) &&
                        (next?.value == null || step.value + this.stepSize() <= next.value);
                this._valid &&= step.valid;
            }
            else {
                step.valid = true;
            }
        }
        if (this.valid !== prevValid) {
            this.validChange.emit(this.valid);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiThresholdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiThresholdComponent, isStandalone: true, selector: "si-threshold", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, thresholdSteps: { classPropertyName: "thresholdSteps", publicName: "thresholdSteps", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, stepSize: { classPropertyName: "stepSize", publicName: "stepSize", isSignal: true, isRequired: false, transformFunction: null }, maxSteps: { classPropertyName: "maxSteps", publicName: "maxSteps", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, canAddRemoveSteps: { classPropertyName: "canAddRemoveSteps", publicName: "canAddRemoveSteps", isSignal: true, isRequired: false, transformFunction: null }, horizontalLayout: { classPropertyName: "horizontalLayout", publicName: "horizontalLayout", isSignal: true, isRequired: false, transformFunction: null }, showDecIncButtons: { classPropertyName: "showDecIncButtons", publicName: "showDecIncButtons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, readonlyConditions: { classPropertyName: "readonlyConditions", publicName: "readonlyConditions", isSignal: true, isRequired: false, transformFunction: null }, deleteAriaLabel: { classPropertyName: "deleteAriaLabel", publicName: "deleteAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, addAriaLabel: { classPropertyName: "addAriaLabel", publicName: "addAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputAriaLabel: { classPropertyName: "inputAriaLabel", publicName: "inputAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, statusAriaLabel: { classPropertyName: "statusAriaLabel", publicName: "statusAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, useAliasForStepValues: { classPropertyName: "useAliasForStepValues", publicName: "useAliasForStepValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thresholdSteps: "thresholdStepsChange", validChange: "validChange" }, host: { properties: { "class.add-remove": "canAddRemoveSteps()", "class.horizontal": "horizontalLayout()", "class.dec-inc-buttons": "showDecIncButtons()" } }, viewQueries: [{ propertyName: "numberInputs", predicate: SiNumberInputComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@for (step of thresholdSteps(); track step) {\n  <div class=\"ths-step\">\n    @if (!$first) {\n      <div class=\"ths-value d-flex align-items-center\">\n        @if (showAddRemoveButtons()) {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-ghost m-4\"\n            [attr.aria-label]=\"deleteAriaLabel() | translate\"\n            (click)=\"deleteStep($index)\"\n          >\n            <si-icon [icon]=\"icons.elementDelete\" />\n          </button>\n        } @else {\n          <div class=\"py-4 my-4\">&#8203;</div>\n        }\n        <div class=\"line\">\n          <div class=\"segment\" [class]=\"colors()[$index - 1]\"></div>\n          <div class=\"dot\"></div>\n          <div class=\"segment\" [class]=\"colors()[$index]\"></div>\n        </div>\n        <div class=\"d-flex align-items-center text-nowrap m-4\">\n          @if (useAliasForStepValues()) {\n            <input\n              type=\"text\"\n              readonly\n              class=\"form-control\"\n              [value]=\"step.aliasLabel ?? '' | translate\"\n            />\n          } @else {\n            <si-number-input\n              #valueInput=\"ngModel\"\n              class=\"form-control text-end\"\n              [class.is-invalid]=\"step.valid === false\"\n              [aria-label]=\"inputAriaLabel() | translate\"\n              [readonly]=\"readonly()\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              [min]=\"minValue()\"\n              [max]=\"maxValue()\"\n              [step]=\"stepSize()\"\n              [unit]=\"unit()\"\n              [showButtons]=\"showDecIncButtons()\"\n              [required]=\"true\"\n              [(ngModel)]=\"step.value\"\n              (ngModelChange)=\"stepChange()\"\n            />\n          }\n        </div>\n      </div>\n    }\n    @if ($first && horizontalLayout()) {\n      <ng-container\n        [ngTemplateOutlet]=\"startend\"\n        [ngTemplateOutletContext]=\"{ color: colors()[$index] }\"\n      />\n    }\n    <div class=\"ths-option d-flex align-items-center\">\n      @if (showAddRemoveButtons()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-circle btn-secondary m-4\"\n          [disabled]=\"maxSteps() && $count >= maxSteps()\"\n          [attr.aria-label]=\"addAriaLabel() | translate\"\n          (click)=\"addStep($index)\"\n        >\n          <si-icon [icon]=\"icons.elementPlus\" />\n        </button>\n      } @else {\n        <div class=\"py-4 my-4\">&#8203;</div>\n      }\n      <div class=\"line\" [class]=\"colors()[$index]\">\n        <div class=\"segment\"></div>\n      </div>\n      @if (!readonly() && !readonlyConditions()) {\n        <si-select\n          class=\"my-4\"\n          [ariaLabel]=\"statusAriaLabel() | translate\"\n          [readonly]=\"readonly()\"\n          [options]=\"options()\"\n          [(value)]=\"step.optionValue\"\n          (valueChange)=\"stepChange()\"\n        />\n      }\n      @if (readonly() || readonlyConditions()) {\n        <si-readonly-threshold-option [options]=\"options()\" [value]=\"step.optionValue\" />\n      }\n    </div>\n    @if ($last && horizontalLayout()) {\n      <ng-container\n        [ngTemplateOutlet]=\"startend\"\n        [ngTemplateOutletContext]=\"{ color: colors()[$index] }\"\n      />\n    }\n  </div>\n}\n\n<ng-template #startend let-color=\"color\">\n  <div class=\"ths-value d-flex align-items-center startend\">\n    <div class=\"py-4 my-4\">&#8203;</div>\n    <div class=\"line\">\n      <div class=\"segment\" [class]=\"color\"></div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{--direction-main: column;--direction-option: row;--direction-value: row;--input-width: calc(var(--input-base-width, 90px) + var(--buttons-width, 0px))}:host.horizontal{--direction-main: row;--direction-option: column;--direction-value: column-reverse;--value-margin: -24px;padding-inline:calc(var(--value-margin) * -1)}:host.dec-inc-buttons{--buttons-width: 48px}:host,.ths-step{display:flex;flex-direction:var(--direction-main)}.ths-option{flex-direction:var(--direction-option);min-inline-size:var(--option-width, 160px)}.ths-value{flex-direction:var(--direction-value);margin-inline:var(--value-margin)}si-select{border-radius:var(--element-button-radius);overflow:hidden}.form-control{inline-size:var(--input-width);block-size:calc(1rem + 16px);position:relative;z-index:1}.line{align-self:stretch;flex-basis:16px;display:flex;flex-direction:var(--direction-main);align-items:center;color:var(--element-ui-2);gap:4px}.segment{flex:1;border:1px solid currentColor}.dot{inline-size:6px;block-size:6px;border:1px solid var(--element-ui-2);border-radius:50%}.startend{inline-size:calc(var(--input-width) / 2)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiNumberInputComponent, selector: "si-number-input", inputs: ["min", "max", "step", "value", "unit", "showButtons", "aria-label", "inputId", "disabled", "readonly", "placeholder", "errormessageId"], outputs: ["valueChange"] }, { kind: "component", type: SiSelectComponent, selector: "si-select", inputs: ["id", "ariaLabel", "labelledby", "filterPlaceholder", "noResultsFoundLabel", "placeholder", "readonly", "errormessageId", "hasFilter"], outputs: ["openChange"] }, { kind: "directive", type: SiSelectSingleValueDirective, selector: "si-select:not([multi])" }, { kind: "directive", type: SiSelectSimpleOptionsDirective, selector: "si-select[options]", inputs: ["options", "optionEqualCheckFn"] }, { kind: "component", type: SiReadonlyThresholdOptionComponent, selector: "si-readonly-threshold-option", inputs: ["value", "options"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiThresholdComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-threshold', imports: [
                        FormsModule,
                        NgTemplateOutlet,
                        SiIconComponent,
                        SiNumberInputComponent,
                        SiSelectComponent,
                        SiSelectSingleValueDirective,
                        SiSelectSimpleOptionsDirective,
                        SiTranslatePipe,
                        SiReadonlyThresholdOptionComponent
                    ], host: {
                        '[class.add-remove]': 'canAddRemoveSteps()',
                        '[class.horizontal]': 'horizontalLayout()',
                        '[class.dec-inc-buttons]': 'showDecIncButtons()'
                    }, template: "@for (step of thresholdSteps(); track step) {\n  <div class=\"ths-step\">\n    @if (!$first) {\n      <div class=\"ths-value d-flex align-items-center\">\n        @if (showAddRemoveButtons()) {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-ghost m-4\"\n            [attr.aria-label]=\"deleteAriaLabel() | translate\"\n            (click)=\"deleteStep($index)\"\n          >\n            <si-icon [icon]=\"icons.elementDelete\" />\n          </button>\n        } @else {\n          <div class=\"py-4 my-4\">&#8203;</div>\n        }\n        <div class=\"line\">\n          <div class=\"segment\" [class]=\"colors()[$index - 1]\"></div>\n          <div class=\"dot\"></div>\n          <div class=\"segment\" [class]=\"colors()[$index]\"></div>\n        </div>\n        <div class=\"d-flex align-items-center text-nowrap m-4\">\n          @if (useAliasForStepValues()) {\n            <input\n              type=\"text\"\n              readonly\n              class=\"form-control\"\n              [value]=\"step.aliasLabel ?? '' | translate\"\n            />\n          } @else {\n            <si-number-input\n              #valueInput=\"ngModel\"\n              class=\"form-control text-end\"\n              [class.is-invalid]=\"step.valid === false\"\n              [aria-label]=\"inputAriaLabel() | translate\"\n              [readonly]=\"readonly()\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              [min]=\"minValue()\"\n              [max]=\"maxValue()\"\n              [step]=\"stepSize()\"\n              [unit]=\"unit()\"\n              [showButtons]=\"showDecIncButtons()\"\n              [required]=\"true\"\n              [(ngModel)]=\"step.value\"\n              (ngModelChange)=\"stepChange()\"\n            />\n          }\n        </div>\n      </div>\n    }\n    @if ($first && horizontalLayout()) {\n      <ng-container\n        [ngTemplateOutlet]=\"startend\"\n        [ngTemplateOutletContext]=\"{ color: colors()[$index] }\"\n      />\n    }\n    <div class=\"ths-option d-flex align-items-center\">\n      @if (showAddRemoveButtons()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-circle btn-secondary m-4\"\n          [disabled]=\"maxSteps() && $count >= maxSteps()\"\n          [attr.aria-label]=\"addAriaLabel() | translate\"\n          (click)=\"addStep($index)\"\n        >\n          <si-icon [icon]=\"icons.elementPlus\" />\n        </button>\n      } @else {\n        <div class=\"py-4 my-4\">&#8203;</div>\n      }\n      <div class=\"line\" [class]=\"colors()[$index]\">\n        <div class=\"segment\"></div>\n      </div>\n      @if (!readonly() && !readonlyConditions()) {\n        <si-select\n          class=\"my-4\"\n          [ariaLabel]=\"statusAriaLabel() | translate\"\n          [readonly]=\"readonly()\"\n          [options]=\"options()\"\n          [(value)]=\"step.optionValue\"\n          (valueChange)=\"stepChange()\"\n        />\n      }\n      @if (readonly() || readonlyConditions()) {\n        <si-readonly-threshold-option [options]=\"options()\" [value]=\"step.optionValue\" />\n      }\n    </div>\n    @if ($last && horizontalLayout()) {\n      <ng-container\n        [ngTemplateOutlet]=\"startend\"\n        [ngTemplateOutletContext]=\"{ color: colors()[$index] }\"\n      />\n    }\n  </div>\n}\n\n<ng-template #startend let-color=\"color\">\n  <div class=\"ths-value d-flex align-items-center startend\">\n    <div class=\"py-4 my-4\">&#8203;</div>\n    <div class=\"line\">\n      <div class=\"segment\" [class]=\"color\"></div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{--direction-main: column;--direction-option: row;--direction-value: row;--input-width: calc(var(--input-base-width, 90px) + var(--buttons-width, 0px))}:host.horizontal{--direction-main: row;--direction-option: column;--direction-value: column-reverse;--value-margin: -24px;padding-inline:calc(var(--value-margin) * -1)}:host.dec-inc-buttons{--buttons-width: 48px}:host,.ths-step{display:flex;flex-direction:var(--direction-main)}.ths-option{flex-direction:var(--direction-option);min-inline-size:var(--option-width, 160px)}.ths-value{flex-direction:var(--direction-value);margin-inline:var(--value-margin)}si-select{border-radius:var(--element-button-radius);overflow:hidden}.form-control{inline-size:var(--input-width);block-size:calc(1rem + 16px);position:relative;z-index:1}.line{align-self:stretch;flex-basis:16px;display:flex;flex-direction:var(--direction-main);align-items:center;color:var(--element-ui-2);gap:4px}.segment{flex:1;border:1px solid currentColor}.dot{inline-size:6px;block-size:6px;border:1px solid var(--element-ui-2);border-radius:50%}.startend{inline-size:calc(var(--input-width) / 2)}\n"] }]
        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], thresholdSteps: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholdSteps", required: false }] }, { type: i0.Output, args: ["thresholdStepsChange"] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], stepSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepSize", required: false }] }], maxSteps: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSteps", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], canAddRemoveSteps: [{ type: i0.Input, args: [{ isSignal: true, alias: "canAddRemoveSteps", required: false }] }], horizontalLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalLayout", required: false }] }], showDecIncButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDecIncButtons", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], readonlyConditions: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyConditions", required: false }] }], deleteAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteAriaLabel", required: false }] }], addAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addAriaLabel", required: false }] }], inputAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAriaLabel", required: false }] }], statusAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusAriaLabel", required: false }] }], useAliasForStepValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAliasForStepValues", required: false }] }], validChange: [{ type: i0.Output, args: ["validChange"] }], numberInputs: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SiNumberInputComponent), { isSignal: true }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiThresholdModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiThresholdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiThresholdModule, imports: [SiThresholdComponent], exports: [SiThresholdComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiThresholdModule, imports: [SiThresholdComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiThresholdModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [SiThresholdComponent],
                    exports: [SiThresholdComponent]
                }]
        }] });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */

/**
 * Generated bundle index. Do not edit.
 */

export { SiThresholdComponent, SiThresholdModule };
//# sourceMappingURL=siemens-element-ng-threshold.mjs.map
