@siemens/element-ng 49.3.0 → 49.5.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/fesm2022/siemens-element-ng-chat-messages.mjs +4 -4
- package/fesm2022/siemens-element-ng-chat-messages.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-datatable.mjs +1 -1
- package/fesm2022/siemens-element-ng-datatable.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-date-range-filter.mjs +13 -18
- package/fesm2022/siemens-element-ng-date-range-filter.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-datepicker.mjs +35 -5
- package/fesm2022/siemens-element-ng-datepicker.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-file-uploader.mjs +2 -2
- package/fesm2022/siemens-element-ng-file-uploader.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-filtered-search.mjs +123 -91
- package/fesm2022/siemens-element-ng-filtered-search.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-formly.mjs +1 -1
- package/fesm2022/siemens-element-ng-formly.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-list-details.mjs +1 -1
- package/fesm2022/siemens-element-ng-list-details.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-loading-spinner.mjs +2 -2
- package/fesm2022/siemens-element-ng-loading-spinner.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-markdown-renderer.mjs +2 -2
- package/fesm2022/siemens-element-ng-markdown-renderer.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-modal.mjs +6 -17
- package/fesm2022/siemens-element-ng-modal.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs +702 -0
- package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs.map +1 -0
- package/fesm2022/siemens-element-ng-number-input.mjs +2 -2
- package/fesm2022/siemens-element-ng-number-input.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-search-bar.mjs +2 -2
- package/fesm2022/siemens-element-ng-search-bar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-side-panel.mjs +2 -2
- package/fesm2022/siemens-element-ng-side-panel.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-threshold.mjs +14 -3
- package/fesm2022/siemens-element-ng-threshold.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tooltip.mjs +2 -2
- package/fesm2022/siemens-element-ng-tooltip.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tree-view.mjs +11 -8
- package/fesm2022/siemens-element-ng-tree-view.mjs.map +1 -1
- package/navbar-vertical-next/package.json +4 -0
- package/package.json +7 -3
- package/types/siemens-element-ng-filtered-search.d.ts +12 -10
- package/types/siemens-element-ng-markdown-renderer.d.ts +1 -1
- package/types/siemens-element-ng-navbar-vertical-next.d.ts +264 -0
- package/types/siemens-element-ng-threshold.d.ts +16 -6
- package/types/siemens-element-ng-tree-view.d.ts +1 -0
|
@@ -174,6 +174,13 @@ class SiThresholdComponent {
|
|
|
174
174
|
* ```
|
|
175
175
|
*/
|
|
176
176
|
statusAriaLabel = input(t(() => $localize `:@@SI_THRESHOLD.STATUS:Status`), ...(ngDevMode ? [{ debugName: "statusAriaLabel" }] : []));
|
|
177
|
+
/**
|
|
178
|
+
* When enabled, numeric step inputs are replaced with readonly text fields displaying the `aliasLabel` of each step.
|
|
179
|
+
* Add/remove step buttons are also hidden.
|
|
180
|
+
*
|
|
181
|
+
* @defaultValue false
|
|
182
|
+
*/
|
|
183
|
+
useAliasForStepValues = input(false, { ...(ngDevMode ? { debugName: "useAliasForStepValues" } : {}), transform: booleanAttribute });
|
|
177
184
|
/** Fired when validation status changes */
|
|
178
185
|
validChange = output();
|
|
179
186
|
colors = computed(() => {
|
|
@@ -192,6 +199,10 @@ class SiThresholdComponent {
|
|
|
192
199
|
return this._valid;
|
|
193
200
|
}
|
|
194
201
|
numberInputs = viewChildren(SiNumberInputComponent, ...(ngDevMode ? [{ debugName: "numberInputs" }] : []));
|
|
202
|
+
showAddRemoveButtons = computed(() => !this.useAliasForStepValues() &&
|
|
203
|
+
this.canAddRemoveSteps() &&
|
|
204
|
+
!this.readonly() &&
|
|
205
|
+
!this.readonlyConditions(), ...(ngDevMode ? [{ debugName: "showAddRemoveButtons" }] : []));
|
|
195
206
|
ngOnChanges() {
|
|
196
207
|
this.validate();
|
|
197
208
|
}
|
|
@@ -239,7 +250,7 @@ class SiThresholdComponent {
|
|
|
239
250
|
}
|
|
240
251
|
}
|
|
241
252
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiThresholdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
242
|
-
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 } }, 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 (
|
|
253
|
+
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\">​</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\">​</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\">​</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" }] });
|
|
243
254
|
}
|
|
244
255
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiThresholdComponent, decorators: [{
|
|
245
256
|
type: Component,
|
|
@@ -257,8 +268,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
257
268
|
'[class.add-remove]': 'canAddRemoveSteps()',
|
|
258
269
|
'[class.horizontal]': 'horizontalLayout()',
|
|
259
270
|
'[class.dec-inc-buttons]': 'showDecIncButtons()'
|
|
260
|
-
}, 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 (
|
|
261
|
-
}], 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 }] }], validChange: [{ type: i0.Output, args: ["validChange"] }], numberInputs: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SiNumberInputComponent), { isSignal: true }] }] } });
|
|
271
|
+
}, 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\">​</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\">​</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\">​</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"] }]
|
|
272
|
+
}], 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 }] }] } });
|
|
262
273
|
|
|
263
274
|
/**
|
|
264
275
|
* Copyright (c) Siemens 2016 - 2026
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"siemens-element-ng-threshold.mjs","sources":["../../../../projects/element-ng/threshold/si-readonly-threshold-option.component.ts","../../../../projects/element-ng/threshold/si-threshold.component.ts","../../../../projects/element-ng/threshold/si-threshold.component.html","../../../../projects/element-ng/threshold/si-threshold.module.ts","../../../../projects/element-ng/threshold/index.ts","../../../../projects/element-ng/threshold/siemens-element-ng-threshold.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Component, computed, input } from '@angular/core';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\nimport { SelectOption } from '@siemens/element-ng/select';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\n@Component({\n selector: 'si-readonly-threshold-option',\n imports: [SiTranslatePipe, SiIconComponent],\n template: `@let opt = option();\n @if (opt && opt.icon) {\n <i class=\"icon-stack\">\n <si-icon class=\"icon me-2\" [class]=\"color()\" [icon]=\"opt.icon\" />\n @if (opt.stackedIcon) {\n <si-icon class=\"icon me-2\" [class]=\"opt.stackedIconColor\" [icon]=\"opt.stackedIcon\" />\n }\n </i>\n }\n <span class=\"text-truncate\">{{ label() | translate }}</span>`,\n styleUrl: './si-readonly-threshold-option.component.scss',\n host: { class: 'd-flex align-items-center py-2 my-4 px-4 si-h5' }\n})\nexport class SiReadonlyThresholdOptionComponent {\n readonly value = input.required<string>();\n readonly options = input.required<SelectOption<unknown>[]>();\n\n protected readonly option = computed(() => {\n const options = this.options();\n const value = this.value();\n if (value && options) {\n return options.find(opt => opt.value === value);\n }\n return undefined;\n });\n\n protected readonly color = computed(() => {\n const option = this.option();\n return !option || option.disabled ? undefined : option.iconColor;\n });\n\n protected readonly label = computed(() => this.option()?.label);\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n Component,\n computed,\n input,\n model,\n OnChanges,\n output,\n viewChildren\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { elementDelete, elementPlus } from '@siemens/element-icons';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiNumberInputComponent } from '@siemens/element-ng/number-input';\nimport {\n SelectOption,\n SiSelectComponent,\n SiSelectSimpleOptionsDirective,\n SiSelectSingleValueDirective\n} from '@siemens/element-ng/select';\nimport { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';\n\nimport { SiReadonlyThresholdOptionComponent } from './si-readonly-threshold-option.component';\n\n/**\n * One step in a list of thresholds\n */\nexport interface ThresholdStep {\n /** Threshold value, the first step has no value */\n value?: number;\n /** One of the `SelectOption.id` */\n optionValue: string;\n /** When set to `false`, input fields are highlighted as invalid */\n valid?: boolean;\n}\n\n@Component({\n selector: 'si-threshold',\n imports: [\n FormsModule,\n NgTemplateOutlet,\n SiIconComponent,\n SiNumberInputComponent,\n SiSelectComponent,\n SiSelectSingleValueDirective,\n SiSelectSimpleOptionsDirective,\n SiTranslatePipe,\n SiReadonlyThresholdOptionComponent\n ],\n templateUrl: './si-threshold.component.html',\n styleUrl: './si-threshold.component.scss',\n host: {\n '[class.add-remove]': 'canAddRemoveSteps()',\n '[class.horizontal]': 'horizontalLayout()',\n '[class.dec-inc-buttons]': 'showDecIncButtons()'\n }\n})\nexport class SiThresholdComponent implements OnChanges {\n /**\n * Options to be shown in select dropdown\n *\n * @defaultValue []\n */\n readonly options = input<SelectOption<unknown>[]>([]);\n /**\n * The thresholds\n *\n * @defaultValue []\n */\n readonly thresholdSteps = model<ThresholdStep[]>([]);\n /**\n * The unit to show\n *\n * @defaultValue ''\n */\n readonly unit = input('');\n /**\n * The min. value for the threshold value\n *\n * @defaultValue 0\n */\n readonly minValue = input(0);\n /**\n * The max. value for the threshold value\n *\n * @defaultValue 100\n */\n readonly maxValue = input(100);\n /**\n * The step size for the threshold value\n *\n * @defaultValue 1\n */\n readonly stepSize = input(1);\n /**\n * Max. number of steps, 0 for no hard limit\n *\n * @defaultValue 0\n */\n readonly maxSteps = input(0);\n /**\n * Do validation?\n *\n * @defaultValue true\n */\n readonly validation = input(true, { transform: booleanAttribute });\n /**\n * When disabled, steps cannot be added/removed\n *\n * @defaultValue true\n */\n readonly canAddRemoveSteps = input(true, { transform: booleanAttribute });\n /**\n * Use horizontal layout?\n *\n * @defaultValue false\n */\n readonly horizontalLayout = input(false, { transform: booleanAttribute });\n /**\n * Show dec/inc buttons?\n *\n * @defaultValue true\n */\n readonly showDecIncButtons = input(true, { transform: booleanAttribute });\n /**\n * The obvious\n *\n * @defaultValue false\n */\n readonly readonly = input(false, { transform: booleanAttribute });\n /**\n * Indicate that the threshold options are readonly and cannot be changed. This will also disable adding / removing steps.\n *\n * @defaultValue false\n */\n readonly readonlyConditions = input(false, { transform: booleanAttribute });\n /**\n * The aria-label for delete button\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_THRESHOLD.DELETE:Delete step`)\n * ```\n */\n readonly deleteAriaLabel = input(t(() => $localize`:@@SI_THRESHOLD.DELETE:Delete step`));\n /**\n * The aria-label for add button\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_THRESHOLD.ADD:Add step`)\n * ```\n */\n readonly addAriaLabel = input(t(() => $localize`:@@SI_THRESHOLD.ADD:Add step`));\n /**\n * The aria-label for input field\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_THRESHOLD.INPUT_LABEL:Threshold value`)\n * ```\n */\n readonly inputAriaLabel = input(t(() => $localize`:@@SI_THRESHOLD.INPUT_LABEL:Threshold value`));\n /**\n * The aria-label for status selection\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_THRESHOLD.STATUS:Status`)\n * ```\n */\n readonly statusAriaLabel = input(t(() => $localize`:@@SI_THRESHOLD.STATUS:Status`));\n\n /** Fired when validation status changes */\n readonly validChange = output<boolean>();\n\n protected readonly colors = computed(() => {\n const colorMap = new Map<unknown, string>();\n for (const opt of this.options()) {\n colorMap.set(opt.value, opt.iconColor ?? '');\n }\n return this.thresholdSteps().map(ths => colorMap.get(ths.optionValue) ?? '');\n });\n\n protected readonly icons = addIcons({ elementDelete, elementPlus });\n private _valid = true;\n /**\n * Whether the current input value is valid or not.\n */\n get valid(): boolean {\n return this._valid;\n }\n\n private readonly numberInputs = viewChildren(SiNumberInputComponent);\n\n ngOnChanges(): void {\n this.validate();\n }\n\n protected deleteStep(index: number): void {\n const updated = [...this.thresholdSteps()];\n updated.splice(index, 1);\n this.thresholdSteps.set(updated);\n this.validate();\n }\n\n protected addStep(index: number): void {\n const newStep: ThresholdStep = { ...this.thresholdSteps()[index], value: undefined };\n const updated = [...this.thresholdSteps()];\n updated.splice(index + 1, 0, newStep);\n this.thresholdSteps.set(updated);\n this.validate();\n setTimeout(() => this.numberInputs()[index].inputElement().nativeElement.focus());\n }\n\n protected stepChange(): void {\n this.thresholdSteps.set([...this.thresholdSteps()]);\n this.validate();\n }\n\n private validate(): void {\n const prevValid = this.valid;\n this._valid = true;\n for (let i = 1; i < this.thresholdSteps().length; i++) {\n const step = this.thresholdSteps()[i];\n\n if (this.validation()) {\n const prev = this.thresholdSteps()[i - 1];\n const next = this.thresholdSteps()[i + 1];\n\n // valid: withing min/max, each step is lower than next step with step size between\n step.valid =\n step.value != null &&\n step.value >= this.minValue() &&\n step.value <= this.maxValue() &&\n (prev.value == null || step.value - this.stepSize() >= prev.value) &&\n (next?.value == null || step.value + this.stepSize() <= next.value);\n this._valid &&= step.valid;\n } else {\n step.valid = true;\n }\n }\n if (this.valid !== prevValid) {\n this.validChange.emit(this.valid);\n }\n }\n}\n","@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 (canAddRemoveSteps() && !readonly() && !readonlyConditions()) {\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 }\n @if (!canAddRemoveSteps() || readonly() || readonlyConditions()) {\n <div class=\"py-4 my-4\">​</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 <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 </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 (canAddRemoveSteps() && !readonly() && !readonlyConditions()) {\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 }\n @if (!canAddRemoveSteps() || readonly() || readonlyConditions()) {\n <div class=\"py-4 my-4\">​</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\">​</div>\n <div class=\"line\">\n <div class=\"segment\" [class]=\"color\"></div>\n </div>\n </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiThresholdComponent } from './si-threshold.component';\n\n@NgModule({\n imports: [SiThresholdComponent],\n exports: [SiThresholdComponent]\n})\nexport class SiThresholdModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-threshold.component';\nexport * from './si-threshold.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;AAAA;;;AAGG;MAsBU,kCAAkC,CAAA;AACpC,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAU;AAChC,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,kDAA2B;AAEzC,IAAA,MAAM,GAAG,QAAQ,CAAC,MAAK;AACxC,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;AAC9B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,IAAI,KAAK,IAAI,OAAO,EAAE;AACpB,YAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC;QACjD;AACA,QAAA,OAAO,SAAS;AAClB,IAAA,CAAC,kDAAC;AAEiB,IAAA,KAAK,GAAG,QAAQ,CAAC,MAAK;AACvC,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC,SAAS;AAClE,IAAA,CAAC,iDAAC;AAEiB,IAAA,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,iDAAC;uGAlBpD,kCAAkC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlC,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kCAAkC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,gDAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAbnC,CAAA;;;;;;;;;iEASqD,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAVpC,eAAe,iEAAhC,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA;;2FAcd,kCAAkC,EAAA,UAAA,EAAA,CAAA;kBAhB9C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,8BAA8B,WAC/B,CAAC,eAAe,EAAE,eAAe,CAAC,EAAA,QAAA,EACjC,CAAA;;;;;;;;;AASqD,gEAAA,CAAA,EAAA,IAAA,EAEzD,EAAE,KAAK,EAAE,gDAAgD,EAAE,EAAA,MAAA,EAAA,CAAA,0BAAA,CAAA,EAAA;;;ACvBnE;;;AAGG;MA2DU,oBAAoB,CAAA;AAC/B;;;;AAIG;AACM,IAAA,OAAO,GAAG,KAAK,CAA0B,EAAE,mDAAC;AACrD;;;;AAIG;AACM,IAAA,cAAc,GAAG,KAAK,CAAkB,EAAE,0DAAC;AACpD;;;;AAIG;AACM,IAAA,IAAI,GAAG,KAAK,CAAC,EAAE,gDAAC;AACzB;;;;AAIG;AACM,IAAA,QAAQ,GAAG,KAAK,CAAC,CAAC,oDAAC;AAC5B;;;;AAIG;AACM,IAAA,QAAQ,GAAG,KAAK,CAAC,GAAG,oDAAC;AAC9B;;;;AAIG;AACM,IAAA,QAAQ,GAAG,KAAK,CAAC,CAAC,oDAAC;AAC5B;;;;AAIG;AACM,IAAA,QAAQ,GAAG,KAAK,CAAC,CAAC,oDAAC;AAC5B;;;;AAIG;IACM,UAAU,GAAG,KAAK,CAAC,IAAI,uDAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAClE;;;;AAIG;IACM,iBAAiB,GAAG,KAAK,CAAC,IAAI,8DAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AACzE;;;;AAIG;IACM,gBAAgB,GAAG,KAAK,CAAC,KAAK,6DAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AACzE;;;;AAIG;IACM,iBAAiB,GAAG,KAAK,CAAC,IAAI,8DAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AACzE;;;;AAIG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,qDAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AACjE;;;;AAIG;IACM,kBAAkB,GAAG,KAAK,CAAC,KAAK,+DAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAC3E;;;;;;;AAOG;AACM,IAAA,eAAe,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,SAAS,CAAA,CAAA,kCAAA,CAAoC,CAAC,2DAAC;AACxF;;;;;;;AAOG;AACM,IAAA,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,SAAS,CAAA,CAAA,4BAAA,CAA8B,CAAC,wDAAC;AAC/E;;;;;;;AAOG;AACM,IAAA,cAAc,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,SAAS,CAAA,CAAA,2CAAA,CAA6C,CAAC,0DAAC;AAChG;;;;;;;AAOG;AACM,IAAA,eAAe,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,SAAS,CAAA,CAAA,6BAAA,CAA+B,CAAC,2DAAC;;IAG1E,WAAW,GAAG,MAAM,EAAW;AAErB,IAAA,MAAM,GAAG,QAAQ,CAAC,MAAK;AACxC,QAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAmB;QAC3C,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;AAChC,YAAA,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,SAAS,IAAI,EAAE,CAAC;QAC9C;QACA,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,GAAG,IAAI,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;AAC9E,IAAA,CAAC,kDAAC;IAEiB,KAAK,GAAG,QAAQ,CAAC,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC;IAC3D,MAAM,GAAG,IAAI;AACrB;;AAEG;AACH,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,IAAI,CAAC,MAAM;IACpB;AAEiB,IAAA,YAAY,GAAG,YAAY,CAAC,sBAAsB,wDAAC;IAEpE,WAAW,GAAA;QACT,IAAI,CAAC,QAAQ,EAAE;IACjB;AAEU,IAAA,UAAU,CAAC,KAAa,EAAA;QAChC,MAAM,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;AAC1C,QAAA,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;AACxB,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC;QAChC,IAAI,CAAC,QAAQ,EAAE;IACjB;AAEU,IAAA,OAAO,CAAC,KAAa,EAAA;AAC7B,QAAA,MAAM,OAAO,GAAkB,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE;QACpF,MAAM,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAC1C,OAAO,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC;AACrC,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC;QAChC,IAAI,CAAC,QAAQ,EAAE;QACf,UAAU,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC,YAAY,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;IACnF;IAEU,UAAU,GAAA;AAClB,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QACnD,IAAI,CAAC,QAAQ,EAAE;IACjB;IAEQ,QAAQ,GAAA;AACd,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK;AAC5B,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;AAClB,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACrD,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;AAErC,YAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;gBACrB,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;gBACzC,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;;AAGzC,gBAAA,IAAI,CAAC,KAAK;oBACR,IAAI,CAAC,KAAK,IAAI,IAAI;AAClB,wBAAA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE;AAC7B,wBAAA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE;AAC7B,yBAAC,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC;AAClE,yBAAC,IAAI,EAAE,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC;AACrE,gBAAA,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK;YAC5B;iBAAO;AACL,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI;YACnB;QACF;AACA,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;YAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;QACnC;IACF;uGA5LW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,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,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,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,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,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,mBAAA,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,kBAAA,EAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,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,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,cAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,kBAAA,EAAA,qBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,uBAAA,EAAA,qBAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,SAAA,EAwIc,sBAAsB,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtMrE,68GAiGA,spCDrDI,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,wIAAA,EAAA,MAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACX,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,eAAe,sEACf,sBAAsB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,KAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,aAAA,EAAA,YAAA,EAAA,SAAA,EAAA,UAAA,EAAA,UAAA,EAAA,aAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACtB,iBAAiB,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,WAAA,EAAA,YAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACjB,4BAA4B,mEAC5B,8BAA8B,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,oBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAE9B,kCAAkC,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EADlC,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA;;2FAWN,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBArBhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,OAAA,EACf;wBACP,WAAW;wBACX,gBAAgB;wBAChB,eAAe;wBACf,sBAAsB;wBACtB,iBAAiB;wBACjB,4BAA4B;wBAC5B,8BAA8B;wBAC9B,eAAe;wBACf;qBACD,EAAA,IAAA,EAGK;AACJ,wBAAA,oBAAoB,EAAE,qBAAqB;AAC3C,wBAAA,oBAAoB,EAAE,oBAAoB;AAC1C,wBAAA,yBAAyB,EAAE;AAC5B,qBAAA,EAAA,QAAA,EAAA,68GAAA,EAAA,MAAA,EAAA,CAAA,+lCAAA,CAAA,EAAA;+6DA0I4C,sBAAsB,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEtMrE;;;AAGG;MASU,iBAAiB,CAAA;uGAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAjB,iBAAiB,EAAA,OAAA,EAAA,CAHlB,oBAAoB,CAAA,EAAA,OAAA,EAAA,CACpB,oBAAoB,CAAA,EAAA,CAAA;AAEnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,YAHlB,oBAAoB,CAAA,EAAA,CAAA;;2FAGnB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAJ7B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,oBAAoB,CAAC;oBAC/B,OAAO,EAAE,CAAC,oBAAoB;AAC/B,iBAAA;;;ACXD;;;AAGG;;ACHH;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"siemens-element-ng-threshold.mjs","sources":["../../../../projects/element-ng/threshold/si-readonly-threshold-option.component.ts","../../../../projects/element-ng/threshold/si-threshold.component.ts","../../../../projects/element-ng/threshold/si-threshold.component.html","../../../../projects/element-ng/threshold/si-threshold.module.ts","../../../../projects/element-ng/threshold/index.ts","../../../../projects/element-ng/threshold/siemens-element-ng-threshold.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Component, computed, input } from '@angular/core';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\nimport { SelectOption } from '@siemens/element-ng/select';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\n@Component({\n selector: 'si-readonly-threshold-option',\n imports: [SiTranslatePipe, SiIconComponent],\n template: `@let opt = option();\n @if (opt && opt.icon) {\n <i class=\"icon-stack\">\n <si-icon class=\"icon me-2\" [class]=\"color()\" [icon]=\"opt.icon\" />\n @if (opt.stackedIcon) {\n <si-icon class=\"icon me-2\" [class]=\"opt.stackedIconColor\" [icon]=\"opt.stackedIcon\" />\n }\n </i>\n }\n <span class=\"text-truncate\">{{ label() | translate }}</span>`,\n styleUrl: './si-readonly-threshold-option.component.scss',\n host: { class: 'd-flex align-items-center py-2 my-4 px-4 si-h5' }\n})\nexport class SiReadonlyThresholdOptionComponent {\n readonly value = input.required<string>();\n readonly options = input.required<SelectOption<unknown>[]>();\n\n protected readonly option = computed(() => {\n const options = this.options();\n const value = this.value();\n if (value && options) {\n return options.find(opt => opt.value === value);\n }\n return undefined;\n });\n\n protected readonly color = computed(() => {\n const option = this.option();\n return !option || option.disabled ? undefined : option.iconColor;\n });\n\n protected readonly label = computed(() => this.option()?.label);\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n Component,\n computed,\n input,\n model,\n OnChanges,\n output,\n viewChildren\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { elementDelete, elementPlus } from '@siemens/element-icons';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiNumberInputComponent } from '@siemens/element-ng/number-input';\nimport {\n SelectOption,\n SiSelectComponent,\n SiSelectSimpleOptionsDirective,\n SiSelectSingleValueDirective\n} from '@siemens/element-ng/select';\nimport { SiTranslatePipe, t, TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SiReadonlyThresholdOptionComponent } from './si-readonly-threshold-option.component';\n\n/**\n * One step in a list of thresholds\n */\nexport interface ThresholdStep {\n /** Threshold value, the first step has no value */\n value?: number;\n /** One of the `SelectOption.id` */\n optionValue: string;\n /** When set to `false`, input fields are highlighted as invalid */\n valid?: boolean;\n /** Optional alias label for the threshold step, used when `useAliasForStepValues` is `true` */\n aliasLabel?: TranslatableString;\n}\n\n@Component({\n selector: 'si-threshold',\n imports: [\n FormsModule,\n NgTemplateOutlet,\n SiIconComponent,\n SiNumberInputComponent,\n SiSelectComponent,\n SiSelectSingleValueDirective,\n SiSelectSimpleOptionsDirective,\n SiTranslatePipe,\n SiReadonlyThresholdOptionComponent\n ],\n templateUrl: './si-threshold.component.html',\n styleUrl: './si-threshold.component.scss',\n host: {\n '[class.add-remove]': 'canAddRemoveSteps()',\n '[class.horizontal]': 'horizontalLayout()',\n '[class.dec-inc-buttons]': 'showDecIncButtons()'\n }\n})\nexport class SiThresholdComponent implements OnChanges {\n /**\n * Options to be shown in select dropdown\n *\n * @defaultValue []\n */\n readonly options = input<SelectOption<unknown>[]>([]);\n /**\n * The thresholds\n *\n * @defaultValue []\n */\n readonly thresholdSteps = model<ThresholdStep[]>([]);\n /**\n * The unit to show\n *\n * @defaultValue ''\n */\n readonly unit = input('');\n /**\n * The min. value for the threshold value\n *\n * @defaultValue 0\n */\n readonly minValue = input(0);\n /**\n * The max. value for the threshold value\n *\n * @defaultValue 100\n */\n readonly maxValue = input(100);\n /**\n * The step size for the threshold value\n *\n * @defaultValue 1\n */\n readonly stepSize = input(1);\n /**\n * Max. number of steps, 0 for no hard limit\n *\n * @defaultValue 0\n */\n readonly maxSteps = input(0);\n /**\n * Do validation?\n *\n * @defaultValue true\n */\n readonly validation = input(true, { transform: booleanAttribute });\n /**\n * When disabled, steps cannot be added/removed\n *\n * @defaultValue true\n */\n readonly canAddRemoveSteps = input(true, { transform: booleanAttribute });\n /**\n * Use horizontal layout?\n *\n * @defaultValue false\n */\n readonly horizontalLayout = input(false, { transform: booleanAttribute });\n /**\n * Show dec/inc buttons?\n *\n * @defaultValue true\n */\n readonly showDecIncButtons = input(true, { transform: booleanAttribute });\n /**\n * The obvious\n *\n * @defaultValue false\n */\n readonly readonly = input(false, { transform: booleanAttribute });\n /**\n * Indicate that the threshold options are readonly and cannot be changed. This will also disable adding / removing steps.\n *\n * @defaultValue false\n */\n readonly readonlyConditions = input(false, { transform: booleanAttribute });\n /**\n * The aria-label for delete button\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_THRESHOLD.DELETE:Delete step`)\n * ```\n */\n readonly deleteAriaLabel = input(t(() => $localize`:@@SI_THRESHOLD.DELETE:Delete step`));\n /**\n * The aria-label for add button\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_THRESHOLD.ADD:Add step`)\n * ```\n */\n readonly addAriaLabel = input(t(() => $localize`:@@SI_THRESHOLD.ADD:Add step`));\n /**\n * The aria-label for input field\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_THRESHOLD.INPUT_LABEL:Threshold value`)\n * ```\n */\n readonly inputAriaLabel = input(t(() => $localize`:@@SI_THRESHOLD.INPUT_LABEL:Threshold value`));\n /**\n * The aria-label for status selection\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_THRESHOLD.STATUS:Status`)\n * ```\n */\n readonly statusAriaLabel = input(t(() => $localize`:@@SI_THRESHOLD.STATUS:Status`));\n\n /**\n * When enabled, numeric step inputs are replaced with readonly text fields displaying the `aliasLabel` of each step.\n * Add/remove step buttons are also hidden.\n *\n * @defaultValue false\n */\n readonly useAliasForStepValues = input(false, { transform: booleanAttribute });\n\n /** Fired when validation status changes */\n readonly validChange = output<boolean>();\n\n protected readonly colors = computed(() => {\n const colorMap = new Map<unknown, string>();\n for (const opt of this.options()) {\n colorMap.set(opt.value, opt.iconColor ?? '');\n }\n return this.thresholdSteps().map(ths => colorMap.get(ths.optionValue) ?? '');\n });\n\n protected readonly icons = addIcons({ elementDelete, elementPlus });\n private _valid = true;\n /**\n * Whether the current input value is valid or not.\n */\n get valid(): boolean {\n return this._valid;\n }\n\n private readonly numberInputs = viewChildren(SiNumberInputComponent);\n\n protected readonly showAddRemoveButtons = computed(\n () =>\n !this.useAliasForStepValues() &&\n this.canAddRemoveSteps() &&\n !this.readonly() &&\n !this.readonlyConditions()\n );\n\n ngOnChanges(): void {\n this.validate();\n }\n\n protected deleteStep(index: number): void {\n const updated = [...this.thresholdSteps()];\n updated.splice(index, 1);\n this.thresholdSteps.set(updated);\n this.validate();\n }\n\n protected addStep(index: number): void {\n const newStep: ThresholdStep = { ...this.thresholdSteps()[index], value: undefined };\n const updated = [...this.thresholdSteps()];\n updated.splice(index + 1, 0, newStep);\n this.thresholdSteps.set(updated);\n this.validate();\n setTimeout(() => this.numberInputs()[index].inputElement().nativeElement.focus());\n }\n\n protected stepChange(): void {\n this.thresholdSteps.set([...this.thresholdSteps()]);\n this.validate();\n }\n\n private validate(): void {\n const prevValid = this.valid;\n this._valid = true;\n for (let i = 1; i < this.thresholdSteps().length; i++) {\n const step = this.thresholdSteps()[i];\n\n if (this.validation()) {\n const prev = this.thresholdSteps()[i - 1];\n const next = this.thresholdSteps()[i + 1];\n\n // valid: withing min/max, each step is lower than next step with step size between\n step.valid =\n step.value != null &&\n step.value >= this.minValue() &&\n step.value <= this.maxValue() &&\n (prev.value == null || step.value - this.stepSize() >= prev.value) &&\n (next?.value == null || step.value + this.stepSize() <= next.value);\n this._valid &&= step.valid;\n } else {\n step.valid = true;\n }\n }\n if (this.valid !== prevValid) {\n this.validChange.emit(this.valid);\n }\n }\n}\n","@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\">​</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\">​</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\">​</div>\n <div class=\"line\">\n <div class=\"segment\" [class]=\"color\"></div>\n </div>\n </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiThresholdComponent } from './si-threshold.component';\n\n@NgModule({\n imports: [SiThresholdComponent],\n exports: [SiThresholdComponent]\n})\nexport class SiThresholdModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-threshold.component';\nexport * from './si-threshold.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -196,7 +196,7 @@ class SiTooltipDirective {
|
|
|
196
196
|
this.tooltipRef?.hide();
|
|
197
197
|
}
|
|
198
198
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
199
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiTooltipDirective, isStandalone: true, selector: "[siTooltip]", inputs: { siTooltip: { classPropertyName: "siTooltip", publicName: "siTooltip", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipContext: { classPropertyName: "tooltipContext", publicName: "tooltipContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "focusIn($event)", "mouseenter": "show()", "touchstart": "hide()", "focusout": "hide()", "mouseleave": "hide()" }, properties: { "attr.aria-describedby": "describedBy" } }, providers: [SiTooltipService], ngImport: i0 });
|
|
199
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiTooltipDirective, isStandalone: true, selector: "[siTooltip]", inputs: { siTooltip: { classPropertyName: "siTooltip", publicName: "siTooltip", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipContext: { classPropertyName: "tooltipContext", publicName: "tooltipContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "focusIn($event)", "mouseenter": "show()", "touchstart": "hide()", "focusout": "hide()", "mouseleave": "hide()" }, properties: { "attr.aria-describedby": "isDisabled() ? null : describedBy" } }, providers: [SiTooltipService], ngImport: i0 });
|
|
200
200
|
}
|
|
201
201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTooltipDirective, decorators: [{
|
|
202
202
|
type: Directive,
|
|
@@ -204,7 +204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
204
204
|
selector: '[siTooltip]',
|
|
205
205
|
providers: [SiTooltipService],
|
|
206
206
|
host: {
|
|
207
|
-
'[attr.aria-describedby]': 'describedBy',
|
|
207
|
+
'[attr.aria-describedby]': 'isDisabled() ? null : describedBy',
|
|
208
208
|
'(focus)': 'focusIn($event)',
|
|
209
209
|
'(mouseenter)': 'show()',
|
|
210
210
|
'(touchstart)': 'hide()',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"siemens-element-ng-tooltip.mjs","sources":["../../../../projects/element-ng/tooltip/si-tooltip.model.ts","../../../../projects/element-ng/tooltip/si-tooltip.component.ts","../../../../projects/element-ng/tooltip/si-tooltip.component.html","../../../../projects/element-ng/tooltip/si-tooltip.service.ts","../../../../projects/element-ng/tooltip/si-tooltip.directive.ts","../../../../projects/element-ng/tooltip/si-tooltip.module.ts","../../../../projects/element-ng/tooltip/index.ts","../../../../projects/element-ng/tooltip/siemens-element-ng-tooltip.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { InjectionToken, TemplateRef, Type } from '@angular/core';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nexport type SiTooltipContent = TranslatableString | TemplateRef<any> | Type<any> | null | undefined;\n\nexport interface SiTooltipConfig {\n id: string;\n tooltip: () => SiTooltipContent;\n tooltipContext: () => unknown;\n}\n\nexport const SI_TOOLTIP_CONFIG = new InjectionToken<SiTooltipConfig>('SiTooltipConfig');\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ConnectedOverlayPositionChange } from '@angular/cdk/overlay';\nimport { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';\nimport { Component, computed, ElementRef, inject, signal, TemplateRef } from '@angular/core';\nimport { calculateOverlayArrowPosition, OverlayArrowPosition } from '@siemens/element-ng/common';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\nimport { SI_TOOLTIP_CONFIG } from './si-tooltip.model';\n\n@Component({\n selector: 'si-tooltip',\n imports: [NgTemplateOutlet, SiTranslatePipe, NgComponentOutlet],\n templateUrl: './si-tooltip.component.html',\n styleUrl: './si-tooltip.component.scss',\n host: {\n 'animate.leave': 'tooltip-leave'\n }\n})\nexport class TooltipComponent {\n protected readonly tooltipPositionClass = signal('');\n protected readonly arrowPos = signal<OverlayArrowPosition | undefined>(undefined);\n\n protected readonly config = inject(SI_TOOLTIP_CONFIG);\n private readonly elementRef = inject(ElementRef);\n\n protected readonly tooltipText = computed<string | null>(() => {\n const tooltip = this.config.tooltip();\n return typeof tooltip === 'string' ? tooltip : null;\n });\n\n protected readonly tooltipTemplate = computed<TemplateRef<any> | null>(() => {\n const tooltip = this.config.tooltip();\n return tooltip instanceof TemplateRef ? tooltip : null;\n });\n\n protected readonly tooltipComponent = computed(() => {\n const tooltip = this.config.tooltip();\n return !(tooltip instanceof TemplateRef) && typeof tooltip !== 'string' ? tooltip : null;\n });\n\n /** @internal */\n updateTooltipPosition(change: ConnectedOverlayPositionChange, anchor?: ElementRef): void {\n const arrowClassTooltip = `tooltip-${change.connectionPair.overlayX}-${change.connectionPair.overlayY}`;\n // need two updates as class changes affect the position\n if (arrowClassTooltip !== this.tooltipPositionClass()) {\n this.tooltipPositionClass.set(arrowClassTooltip);\n }\n const arrowPos = calculateOverlayArrowPosition(change, this.elementRef, anchor);\n this.arrowPos.set(arrowPos);\n }\n}\n","<div\n class=\"tooltip show position-relative\"\n role=\"tooltip\"\n [id]=\"config.id\"\n [class]=\"tooltipPositionClass()\"\n>\n <div\n class=\"tooltip-arrow\"\n [style.left.px]=\"arrowPos()?.left\"\n [style.right.px]=\"arrowPos()?.right\"\n ></div>\n <div class=\"tooltip-inner\">\n @if (tooltipText()) {\n <div class=\"si-body\">{{ tooltipText() | translate }}</div>\n } @else if (tooltipTemplate()) {\n <ng-template\n [ngTemplateOutlet]=\"tooltipTemplate()\"\n [ngTemplateOutletContext]=\"config.tooltipContext()\"\n />\n } @else if (tooltipComponent()) {\n <ng-container [ngComponentOutlet]=\"tooltipComponent()!\" />\n }\n </div>\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { ComponentRef, ElementRef, inject, Injectable, Injector } from '@angular/core';\nimport { getOverlay, getPositionStrategy, positions } from '@siemens/element-ng/common';\nimport { Subscription } from 'rxjs';\n\nimport { TooltipComponent } from './si-tooltip.component';\nimport { SI_TOOLTIP_CONFIG, SiTooltipContent } from './si-tooltip.model';\n\n/**\n * TooltipRef is attached to a specific element.\n * Use it to show or hide a tooltip for that element.\n *\n * @internal\n */\nclass TooltipRef {\n constructor(\n private overlayRef: OverlayRef,\n private element: ElementRef,\n private injector?: Injector\n ) {}\n\n private subscription?: Subscription;\n\n show(): void {\n if (this.overlayRef.hasAttached()) {\n return;\n }\n\n const toolTipPortal = new ComponentPortal(TooltipComponent, undefined, this.injector);\n const tooltipRef: ComponentRef<TooltipComponent> = this.overlayRef.attach(toolTipPortal);\n\n const positionStrategy = getPositionStrategy(this.overlayRef);\n this.subscription?.unsubscribe();\n this.subscription = positionStrategy?.positionChanges.subscribe(change =>\n tooltipRef.instance.updateTooltipPosition(change, this.element)\n );\n }\n\n hide(): void {\n this.overlayRef.detach();\n this.subscription?.unsubscribe();\n }\n\n destroy(): void {\n this.overlayRef.dispose();\n this.subscription?.unsubscribe();\n }\n}\n\n/**\n * A service to create tooltips for specific elements.\n * Use this if the tooltip directive is not suitable.\n * Must not be used outside element-ng.\n *\n * @internal\n */\n// We cannot provide this in root, as people may override the cdk overlay creation.\n@Injectable()\nexport class SiTooltipService {\n private overlay = inject(Overlay);\n\n createTooltip(config: {\n describedBy: string;\n element: ElementRef;\n placement: keyof typeof positions;\n injector?: Injector;\n tooltip: () => SiTooltipContent;\n tooltipContext: () => unknown;\n }): TooltipRef {\n const injector = Injector.create({\n parent: config.injector,\n providers: [\n {\n provide: SI_TOOLTIP_CONFIG,\n useValue: {\n id: config.describedBy,\n tooltip: config.tooltip,\n tooltipContext: config.tooltipContext\n }\n }\n ]\n });\n\n return new TooltipRef(\n getOverlay(config.element, this.overlay, false, config.placement),\n config.element,\n injector\n );\n }\n}\n\nexport type { TooltipRef };\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n booleanAttribute,\n Directive,\n ElementRef,\n inject,\n input,\n OnDestroy,\n PLATFORM_ID,\n TemplateRef\n} from '@angular/core';\nimport { positions } from '@siemens/element-ng/common';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SiTooltipService, TooltipRef } from './si-tooltip.service';\n\n@Directive({\n selector: '[siTooltip]',\n providers: [SiTooltipService],\n host: {\n '[attr.aria-describedby]': 'describedBy',\n '(focus)': 'focusIn($event)',\n '(mouseenter)': 'show()',\n '(touchstart)': 'hide()',\n '(focusout)': 'hide()',\n '(mouseleave)': 'hide()'\n }\n})\nexport class SiTooltipDirective implements OnDestroy {\n private static idCounter = 0;\n\n /**\n * The tooltip text to be displayed\n *\n * @defaultValue ''\n */\n readonly siTooltip = input<TranslatableString | TemplateRef<any>>('');\n\n /**\n * The placement of the tooltip. One of 'top', 'start', end', 'bottom'\n *\n * @defaultValue 'auto'\n */\n readonly placement = input<keyof typeof positions>('auto');\n\n /**\n * Allows the tooltip to be disabled\n *\n * @defaultValue false\n */\n readonly isDisabled = input(false, { transform: booleanAttribute });\n\n /**\n * The context for the attached template\n */\n readonly tooltipContext = input();\n\n protected describedBy = `__tooltip_${SiTooltipDirective.idCounter++}`;\n\n private tooltipRef?: TooltipRef;\n private showTimeout?: ReturnType<typeof setTimeout>;\n private tooltipService = inject(SiTooltipService);\n private elementRef = inject(ElementRef);\n private isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n ngOnDestroy(): void {\n this.clearShowTimeout();\n this.tooltipRef?.destroy();\n }\n\n private clearShowTimeout(): void {\n if (this.showTimeout) {\n clearTimeout(this.showTimeout);\n this.showTimeout = undefined;\n }\n }\n\n private showTooltip(immediate = false): void {\n const siTooltip = this.siTooltip();\n if (this.isDisabled() || !siTooltip) {\n return;\n }\n\n this.clearShowTimeout();\n\n const delay = immediate ? 0 : 500;\n\n this.showTimeout = setTimeout(() => {\n this.tooltipRef ??= this.tooltipService.createTooltip({\n describedBy: this.describedBy,\n element: this.elementRef,\n placement: this.placement(),\n tooltip: this.siTooltip,\n tooltipContext: this.tooltipContext\n });\n this.tooltipRef.show();\n }, delay);\n }\n\n protected focusIn(event: FocusEvent): void {\n if (this.isBrowser && (event.target as Element).matches(':focus-visible')) {\n this.showTooltip(true);\n }\n }\n\n protected show(): void {\n this.showTooltip(false);\n }\n\n protected hide(): void {\n this.clearShowTimeout();\n this.tooltipRef?.hide();\n }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiTooltipDirective } from './si-tooltip.directive';\n\n@NgModule({\n imports: [SiTooltipDirective],\n exports: [SiTooltipDirective]\n})\nexport class SiTooltipModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-tooltip.module';\nexport * from './si-tooltip.directive';\nexport * from './si-tooltip.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"siemens-element-ng-tooltip.mjs","sources":["../../../../projects/element-ng/tooltip/si-tooltip.model.ts","../../../../projects/element-ng/tooltip/si-tooltip.component.ts","../../../../projects/element-ng/tooltip/si-tooltip.component.html","../../../../projects/element-ng/tooltip/si-tooltip.service.ts","../../../../projects/element-ng/tooltip/si-tooltip.directive.ts","../../../../projects/element-ng/tooltip/si-tooltip.module.ts","../../../../projects/element-ng/tooltip/index.ts","../../../../projects/element-ng/tooltip/siemens-element-ng-tooltip.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { InjectionToken, TemplateRef, Type } from '@angular/core';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nexport type SiTooltipContent = TranslatableString | TemplateRef<any> | Type<any> | null | undefined;\n\nexport interface SiTooltipConfig {\n id: string;\n tooltip: () => SiTooltipContent;\n tooltipContext: () => unknown;\n}\n\nexport const SI_TOOLTIP_CONFIG = new InjectionToken<SiTooltipConfig>('SiTooltipConfig');\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ConnectedOverlayPositionChange } from '@angular/cdk/overlay';\nimport { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';\nimport { Component, computed, ElementRef, inject, signal, TemplateRef } from '@angular/core';\nimport { calculateOverlayArrowPosition, OverlayArrowPosition } from '@siemens/element-ng/common';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\nimport { SI_TOOLTIP_CONFIG } from './si-tooltip.model';\n\n@Component({\n selector: 'si-tooltip',\n imports: [NgTemplateOutlet, SiTranslatePipe, NgComponentOutlet],\n templateUrl: './si-tooltip.component.html',\n styleUrl: './si-tooltip.component.scss',\n host: {\n 'animate.leave': 'tooltip-leave'\n }\n})\nexport class TooltipComponent {\n protected readonly tooltipPositionClass = signal('');\n protected readonly arrowPos = signal<OverlayArrowPosition | undefined>(undefined);\n\n protected readonly config = inject(SI_TOOLTIP_CONFIG);\n private readonly elementRef = inject(ElementRef);\n\n protected readonly tooltipText = computed<string | null>(() => {\n const tooltip = this.config.tooltip();\n return typeof tooltip === 'string' ? tooltip : null;\n });\n\n protected readonly tooltipTemplate = computed<TemplateRef<any> | null>(() => {\n const tooltip = this.config.tooltip();\n return tooltip instanceof TemplateRef ? tooltip : null;\n });\n\n protected readonly tooltipComponent = computed(() => {\n const tooltip = this.config.tooltip();\n return !(tooltip instanceof TemplateRef) && typeof tooltip !== 'string' ? tooltip : null;\n });\n\n /** @internal */\n updateTooltipPosition(change: ConnectedOverlayPositionChange, anchor?: ElementRef): void {\n const arrowClassTooltip = `tooltip-${change.connectionPair.overlayX}-${change.connectionPair.overlayY}`;\n // need two updates as class changes affect the position\n if (arrowClassTooltip !== this.tooltipPositionClass()) {\n this.tooltipPositionClass.set(arrowClassTooltip);\n }\n const arrowPos = calculateOverlayArrowPosition(change, this.elementRef, anchor);\n this.arrowPos.set(arrowPos);\n }\n}\n","<div\n class=\"tooltip show position-relative\"\n role=\"tooltip\"\n [id]=\"config.id\"\n [class]=\"tooltipPositionClass()\"\n>\n <div\n class=\"tooltip-arrow\"\n [style.left.px]=\"arrowPos()?.left\"\n [style.right.px]=\"arrowPos()?.right\"\n ></div>\n <div class=\"tooltip-inner\">\n @if (tooltipText()) {\n <div class=\"si-body\">{{ tooltipText() | translate }}</div>\n } @else if (tooltipTemplate()) {\n <ng-template\n [ngTemplateOutlet]=\"tooltipTemplate()\"\n [ngTemplateOutletContext]=\"config.tooltipContext()\"\n />\n } @else if (tooltipComponent()) {\n <ng-container [ngComponentOutlet]=\"tooltipComponent()!\" />\n }\n </div>\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { ComponentRef, ElementRef, inject, Injectable, Injector } from '@angular/core';\nimport { getOverlay, getPositionStrategy, positions } from '@siemens/element-ng/common';\nimport { Subscription } from 'rxjs';\n\nimport { TooltipComponent } from './si-tooltip.component';\nimport { SI_TOOLTIP_CONFIG, SiTooltipContent } from './si-tooltip.model';\n\n/**\n * TooltipRef is attached to a specific element.\n * Use it to show or hide a tooltip for that element.\n *\n * @internal\n */\nclass TooltipRef {\n constructor(\n private overlayRef: OverlayRef,\n private element: ElementRef,\n private injector?: Injector\n ) {}\n\n private subscription?: Subscription;\n\n show(): void {\n if (this.overlayRef.hasAttached()) {\n return;\n }\n\n const toolTipPortal = new ComponentPortal(TooltipComponent, undefined, this.injector);\n const tooltipRef: ComponentRef<TooltipComponent> = this.overlayRef.attach(toolTipPortal);\n\n const positionStrategy = getPositionStrategy(this.overlayRef);\n this.subscription?.unsubscribe();\n this.subscription = positionStrategy?.positionChanges.subscribe(change =>\n tooltipRef.instance.updateTooltipPosition(change, this.element)\n );\n }\n\n hide(): void {\n this.overlayRef.detach();\n this.subscription?.unsubscribe();\n }\n\n destroy(): void {\n this.overlayRef.dispose();\n this.subscription?.unsubscribe();\n }\n}\n\n/**\n * A service to create tooltips for specific elements.\n * Use this if the tooltip directive is not suitable.\n * Must not be used outside element-ng.\n *\n * @internal\n */\n// We cannot provide this in root, as people may override the cdk overlay creation.\n@Injectable()\nexport class SiTooltipService {\n private overlay = inject(Overlay);\n\n createTooltip(config: {\n describedBy: string;\n element: ElementRef;\n placement: keyof typeof positions;\n injector?: Injector;\n tooltip: () => SiTooltipContent;\n tooltipContext: () => unknown;\n }): TooltipRef {\n const injector = Injector.create({\n parent: config.injector,\n providers: [\n {\n provide: SI_TOOLTIP_CONFIG,\n useValue: {\n id: config.describedBy,\n tooltip: config.tooltip,\n tooltipContext: config.tooltipContext\n }\n }\n ]\n });\n\n return new TooltipRef(\n getOverlay(config.element, this.overlay, false, config.placement),\n config.element,\n injector\n );\n }\n}\n\nexport type { TooltipRef };\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n booleanAttribute,\n Directive,\n ElementRef,\n inject,\n input,\n OnDestroy,\n PLATFORM_ID,\n TemplateRef\n} from '@angular/core';\nimport { positions } from '@siemens/element-ng/common';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SiTooltipService, TooltipRef } from './si-tooltip.service';\n\n@Directive({\n selector: '[siTooltip]',\n providers: [SiTooltipService],\n host: {\n '[attr.aria-describedby]': 'isDisabled() ? null : describedBy',\n '(focus)': 'focusIn($event)',\n '(mouseenter)': 'show()',\n '(touchstart)': 'hide()',\n '(focusout)': 'hide()',\n '(mouseleave)': 'hide()'\n }\n})\nexport class SiTooltipDirective implements OnDestroy {\n private static idCounter = 0;\n\n /**\n * The tooltip text to be displayed\n *\n * @defaultValue ''\n */\n readonly siTooltip = input<TranslatableString | TemplateRef<any>>('');\n\n /**\n * The placement of the tooltip. One of 'top', 'start', end', 'bottom'\n *\n * @defaultValue 'auto'\n */\n readonly placement = input<keyof typeof positions>('auto');\n\n /**\n * Allows the tooltip to be disabled\n *\n * @defaultValue false\n */\n readonly isDisabled = input(false, { transform: booleanAttribute });\n\n /**\n * The context for the attached template\n */\n readonly tooltipContext = input();\n\n protected describedBy = `__tooltip_${SiTooltipDirective.idCounter++}`;\n\n private tooltipRef?: TooltipRef;\n private showTimeout?: ReturnType<typeof setTimeout>;\n private tooltipService = inject(SiTooltipService);\n private elementRef = inject(ElementRef);\n private isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n ngOnDestroy(): void {\n this.clearShowTimeout();\n this.tooltipRef?.destroy();\n }\n\n private clearShowTimeout(): void {\n if (this.showTimeout) {\n clearTimeout(this.showTimeout);\n this.showTimeout = undefined;\n }\n }\n\n private showTooltip(immediate = false): void {\n const siTooltip = this.siTooltip();\n if (this.isDisabled() || !siTooltip) {\n return;\n }\n\n this.clearShowTimeout();\n\n const delay = immediate ? 0 : 500;\n\n this.showTimeout = setTimeout(() => {\n this.tooltipRef ??= this.tooltipService.createTooltip({\n describedBy: this.describedBy,\n element: this.elementRef,\n placement: this.placement(),\n tooltip: this.siTooltip,\n tooltipContext: this.tooltipContext\n });\n this.tooltipRef.show();\n }, delay);\n }\n\n protected focusIn(event: FocusEvent): void {\n if (this.isBrowser && (event.target as Element).matches(':focus-visible')) {\n this.showTooltip(true);\n }\n }\n\n protected show(): void {\n this.showTooltip(false);\n }\n\n protected hide(): void {\n this.clearShowTimeout();\n this.tooltipRef?.hide();\n }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiTooltipDirective } from './si-tooltip.directive';\n\n@NgModule({\n imports: [SiTooltipDirective],\n exports: [SiTooltipDirective]\n})\nexport class SiTooltipModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-tooltip.module';\nexport * from './si-tooltip.directive';\nexport * from './si-tooltip.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, inject, TemplateRef, Directive, InjectionToken, Injectable, ElementRef, ChangeDetectorRef, signal, computed, viewChild, HostBinding, Component, EventEmitter, ViewContainerRef, IterableDiffers, Injector, booleanAttribute, output, contentChildren, INJECTOR, viewChildren, contentChild, NgModule } from '@angular/core';
|
|
2
|
+
import { input, inject, TemplateRef, Directive, InjectionToken, Injectable, ElementRef, ChangeDetectorRef, signal, computed, viewChild, effect, HostBinding, Component, EventEmitter, ViewContainerRef, IterableDiffers, Injector, booleanAttribute, output, contentChildren, INJECTOR, viewChildren, contentChild, NgModule } from '@angular/core';
|
|
3
3
|
import { CdkMenuTrigger, CdkContextMenuTrigger } from '@angular/cdk/menu';
|
|
4
4
|
import { NgTemplateOutlet } from '@angular/common';
|
|
5
5
|
import { correctKeyRTL } from '@siemens/element-ng/common';
|
|
@@ -505,11 +505,13 @@ class SiTreeViewItemComponent {
|
|
|
505
505
|
}
|
|
506
506
|
return this.treeItem.state === 'expanded';
|
|
507
507
|
}
|
|
508
|
+
constructor() {
|
|
509
|
+
this.updateContextMenuItem();
|
|
510
|
+
}
|
|
508
511
|
ngOnInit() {
|
|
509
512
|
this.subscriptions.push(this.scrollIntoView.subscribe(event => this.onScrollIntoViewByConsumer(event)));
|
|
510
513
|
this.subscriptions.push(this.childrenLoaded.subscribe(event => this.childrenLoadingDone(event)));
|
|
511
514
|
this.subscriptions.push(this.siTreeViewService.triggerMarkForCheck.subscribe(() => this.cdRef.markForCheck()));
|
|
512
|
-
this.updateContextMenuItem();
|
|
513
515
|
}
|
|
514
516
|
ngDoCheck() {
|
|
515
517
|
if (this.treeItem.parent?.children && this.ariaPosinset) {
|
|
@@ -575,8 +577,8 @@ class SiTreeViewItemComponent {
|
|
|
575
577
|
return !!this.treeItem.showCheckbox || !!this.treeItem.showOptionbox;
|
|
576
578
|
}
|
|
577
579
|
updateContextMenuItem() {
|
|
578
|
-
|
|
579
|
-
|
|
580
|
+
effect(onCleanup => {
|
|
581
|
+
const contextMenuItems = this._contextMenuItems();
|
|
580
582
|
if (Array.isArray(contextMenuItems)) {
|
|
581
583
|
this.contextMenuItems.set(contextMenuItems);
|
|
582
584
|
}
|
|
@@ -586,12 +588,13 @@ class SiTreeViewItemComponent {
|
|
|
586
588
|
this.contextMenuItems.set(menuItems);
|
|
587
589
|
}
|
|
588
590
|
else if (menuItems) {
|
|
589
|
-
|
|
591
|
+
const sub = menuItems.subscribe(items => {
|
|
590
592
|
this.contextMenuItems.set(items);
|
|
591
|
-
})
|
|
593
|
+
});
|
|
594
|
+
onCleanup(() => sub.unsubscribe());
|
|
592
595
|
}
|
|
593
596
|
}
|
|
594
|
-
}
|
|
597
|
+
});
|
|
595
598
|
}
|
|
596
599
|
getItemFolderStateClass() {
|
|
597
600
|
if (this.treeItem.state === 'collapsed') {
|
|
@@ -851,7 +854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
851
854
|
'(contextmenu)': 'onContextMenu($event)',
|
|
852
855
|
'(keydown)': 'onKeydown($event)'
|
|
853
856
|
}, template: "@if (!isGroupedItem) {\n <div\n #contextMenuTrigger=\"cdkContextMenuTriggerFor\"\n class=\"si-tree-view-li si-tree-view-li-item focus-direct-sub-inside\"\n [class.si-tree-view-item-context-menu-visible]=\"\n !!(contextMenuTrigger.isOpen() || menuTrigger()?.isOpen())\n \"\n [class.si-tree-view-item-active]=\"treeItem.active\"\n [class.si-tree-view-item-selected]=\"enableSelection() && treeItem.selected\"\n [class.si-tree-view-item-not-selectable]=\"!treeItem.selectable\"\n [style.padding-inline-start]=\"biggerPaddingStart\"\n [cdkContextMenuTriggerFor]=\"contextMenu\"\n [cdkContextMenuDisabled]=\"!isContextMenuButtonVisible() || !treeItem.selectable\"\n (cdkContextMenuOpened)=\"onToggleContextMenuOpen()\"\n (cdkContextMenuClosed)=\"onToggleContextMenuClose()\"\n >\n <div class=\"si-tree-view-item\" (mousedown)=\"onMouseDownTreeItem($event)\">\n @if (showFolderStateStart && treeItem.state !== 'leaf') {\n <ng-container\n [ngTemplateOutlet]=\"toggleTemplate\"\n [ngTemplateOutletContext]=\"{\n biggerPaddingStart: '-' + biggerPaddingStart,\n paddingStart: paddingStart,\n toggleIcon: 'si-tree-view-item-dropdown-caret'\n }\"\n />\n }\n <ng-container [ngTemplateOutlet]=\"checkboxOrOption\" />\n\n <div\n class=\"si-tree-view-item-main d-flex flex-grow-1 align-self-stretch grab-area\"\n (click)=\"onItemClicked($event)\"\n >\n @if (showIcon()) {\n <div class=\"si-tree-stretch-center\">\n <si-icon class=\"si-tree-view-item-icon\" [icon]=\"treeItem.icon!\" />\n </div>\n }\n <div\n class=\"si-tree-view-item-object-data d-flex flex-column justify-content-center overflow-hidden\"\n >\n @if (!templates().length) {\n <ng-content select=\":not(si-tree-view-item):not([dragPreview])\"\n ><div class=\"text-truncate\" [class.si-h5]=\"enableSelection() && treeItem.selected\">{{\n treeItem.label | translate\n }}</div></ng-content\n >\n } @else {\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n renderMatchingTemplate(treeItem);\n context: { $implicit: treeItem }\n \"\n />\n </div>\n }\n @if (enableDataField1() && treeItem.dataField1) {\n <p class=\"si-tree-view-item-object-data-field-1 text-truncate\">{{\n treeItem.dataField1 | translate\n }}</p>\n }\n @if (enableDataField2() && treeItem.dataField2) {\n <p class=\"si-tree-view-item-object-data-field-2 text-truncate\">{{\n treeItem.dataField2 | translate\n }}</p>\n }\n </div>\n @if (treeItem.badge) {\n <span class=\"badge flex-shrink-0\" [class]=\"`bg-${treeItem.badgeColor || 'default'}`\">{{\n treeItem.badge\n }}</span>\n }\n </div>\n <div\n class=\"si-tree-view-item-end-icons d-flex ms-2 align-items-center\"\n [class.si-tree-view-item-end-icons-sticky]=\"stickyEndItems()\"\n >\n @if (showStateIndicator() && getStateIndicatorColor()) {\n <div\n class=\"si-tree-view-state-indicator\"\n [style.background-color]=\"getStateIndicatorColor()\"\n [class.si-tree-view-state-indicator-endmost]=\"\n !enableContextMenuButton() && !showFolderStateEnd\n \"\n ></div>\n }\n @if (isContextMenuButtonVisible()) {\n <div class=\"si-tree-stretch-center si-tree-context-menu-btn\">\n <div\n #menuTrigger=\"cdkMenuTriggerFor\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [cdkMenuTriggerFor]=\"contextMenu\"\n (cdkMenuOpened)=\"onToggleContextMenuOpen()\"\n (cdkMenuClosed)=\"onToggleContextMenuClose()\"\n >\n <i\n aria-hidden=\"true\"\n class=\"si-tree-view-item-icon si-tree-view-menu-btn\"\n [class]=\"icons().itemMenu\"\n ></i>\n </div>\n </div>\n }\n @if (showFolderStateEnd) {\n <ng-container\n [ngTemplateOutlet]=\"treeItem.state === 'leaf' ? spacerTemplate : toggleTemplate\"\n [ngTemplateOutletContext]=\"{\n toggleIcon: 'si-tree-view-item-icon',\n positionEnd: true\n }\"\n />\n }\n </div>\n </div>\n </div>\n} @else {\n <div class=\"si-tree-view-li focus-direct-sub-inside\">\n <div class=\"si-tree-view-item-group\">\n @if (showFolderStateStart) {\n <ng-container\n [ngTemplateOutlet]=\"toggleTemplate\"\n [ngTemplateOutletContext]=\"{\n toggleIcon: 'si-tree-view-item-icon'\n }\"\n />\n }\n <ng-container\n [ngTemplateOutlet]=\"checkboxOrOption\"\n [ngTemplateOutletContext]=\"{ classNames: 'form-check' }\"\n />\n\n <p class=\"mb-0\">{{ treeItem.label | translate }}</p>\n @if (showFolderStateEnd) {\n <ng-container\n [ngTemplateOutlet]=\"toggleTemplate\"\n [ngTemplateOutletContext]=\"{\n toggleIcon: 'si-tree-view-item-icon'\n }\"\n />\n }\n </div>\n </div>\n}\n\n<ng-template #contextMenu>\n <si-menu-factory class=\"me-5\" [items]=\"contextMenuItems()!\" [actionParam]=\"treeItem\" />\n</ng-template>\n\n<ng-template #checkboxOrOption let-classNames=\"classNames\">\n @if (showCheckOrOptionBox) {\n <a class=\"input-box\" tabindex=\"-1\" [class]=\"classNames\">\n <input\n class=\"form-check-input\"\n tabindex=\"-1\"\n [type]=\"getInputType()\"\n [indeterminate]=\"this.treeItem.checked === 'indeterminate' ? true : null\"\n [checked]=\"this.treeItem.checked === 'checked'\"\n [disabled]=\"!treeItem.selectable\"\n [attr.aria-label]=\"treeItem.label | translate\"\n (click)=\"onBoxClicked()\"\n />\n </a>\n }\n</ng-template>\n\n<ng-template\n #toggleTemplate\n let-biggerPaddingStart=\"biggerPaddingStart\"\n let-paddingStart=\"paddingStart\"\n let-toggleIcon=\"toggleIcon\"\n let-positionEnd=\"positionEnd\"\n>\n @let folderStateClass = getItemFolderStateClass();\n <a\n class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n tabindex=\"-1\"\n [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n [class.disabled]=\"!folderStateClass\"\n [style.margin-inline-start]=\"biggerPaddingStart\"\n [style.padding-inline-start]=\"paddingStart\"\n (click)=\"onItemFolderClicked()\"\n >\n @if (isExpanding) {\n <si-loading-spinner />\n } @else {\n <i aria-hidden=\"true\" [class]=\"`${toggleIcon} ${folderStateClass}`\"></i>\n }\n </a>\n</ng-template>\n\n<ng-template #spacerTemplate let-positionEnd=\"positionEnd\">\n <div\n class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n >\n <i aria-hidden=\"true\" class=\"si-tree-view-item-icon si-tree-view-item-icon-spacer\"></i>\n </div>\n</ng-template>\n", styles: [":host{--si-tree-view-background: var(--element-base-1);--si-tree-view-border-color: var(--element-ui-4);--si-tree-view-icon-size: 1.25rem;--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--element-base-1-hover);--si-tree-view-item-select-color: var(--element-base-1-selected);--si-tree-view-item-line-height: 1.1428571429;--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--element-text-secondary)}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:block}:host.cdk-drag-placeholder{block-size:0;margin-inline:8px;margin-block:0!important;opacity:1;min-block-size:0;position:relative;z-index:999}:host.cdk-drag-placeholder:after{position:absolute;inline-size:100%;block-size:2px;content:\"\";background-color:var(--element-focus-default)!important}:host.cdk-drag-placeholder>*{display:none}:host.cdk-drag:not(.cdk-drag-placeholder){transform:none!important}:host.cdk-drop-list-dragging *:hover,:host.cdk-drop-list-dragging .si-tree-view-item-end-icons,:host.cdk-drop-list-dragging .si-tree-view-item-context-menu-visible,:host .cdk-drop-list-dragging *:hover,:host .cdk-drop-list-dragging .si-tree-view-item-end-icons,:host .cdk-drop-list-dragging .si-tree-view-item-context-menu-visible{background-color:transparent!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{padding-inline-start:8px!important;padding-inline-end:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .si-tree-view-item-toggle{padding-inline-start:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .badge{margin-inline-end:0}:host.cdk-drag-preview .si-tree-view-item-end-icons,:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{background-color:var(--element-base-3)!important}.si-tree-view-li.si-tree-view-li-item{position:relative}.si-tree-view-li.si-tree-view-li-item:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible,.si-tree-view-li.si-tree-view-li-item:hover .si-tree-view-item-end-icons,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-hover-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-select-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-end-icons{background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item:hover{cursor:default;background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-dropdown-caret{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-context-menu-btn>div[role=button]{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end .si-tree-view-item-icon{color:var(--element-text-primary)}.si-tree-view-li.si-tree-view-li-item .si-tree-view-item-end-icons{background-color:var(--si-tree-view-background)}.si-tree-view-item-group,.si-tree-view-item{display:flex;align-items:center}.si-tree-stretch-center{align-self:stretch;display:flex;align-items:center;justify-content:center;margin:0;text-decoration:none}.si-tree-view-item-toggle.disabled .si-tree-view-item-icon{inline-size:24px}.si-tree-stretch-center+.si-tree-view-item-toggle-end .si-tree-view-item-icon{margin-inline-start:-4px}.si-tree-view-item-icon{padding-inline-end:4px}.si-tree-view-item-icon.si-tree-view-item-icon-spacer{box-sizing:content-box;inline-size:var(--si-tree-view-icon-size)}.si-tree-view-item-object-data,.si-tree-view-item-icon{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item{justify-content:space-between;min-block-size:var(--si-tree-view-item-min-height);padding-inline:var(--si-tree-view-padding-base-horizontal) calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item:hover{cursor:pointer}:host-context(.si-tree-view-flat) .si-tree-view-item{padding-inline-start:calc(var(--si-tree-view-padding-base-horizontal) / 2)}.si-tree-view-state-indicator{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) * .75);min-inline-size:6px;block-size:6px;border-radius:50%}.si-tree-view-state-indicator.si-tree-view-state-indicator-endmost{margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) * 1.75)}.si-tree-view-item-group{padding-block:calc(2 * var(--si-tree-view-padding-base-vertical));padding-inline:calc(var(--si-tree-view-padding-base-horizontal) / 2);cursor:default}.si-tree-view-item-group .si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-group .si-tree-view-item-icon:hover{cursor:pointer}.si-tree-view-item-dropdown-caret,.si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-icon,.si-tree-view-item-icon:hover{color:var(--element-text-primary);text-decoration:none;font-size:var(--si-tree-view-icon-size)}.si-tree-view-item-main{overflow-x:hidden}.si-tree-view-item-main>.badge{margin-block:auto}.si-tree-view-item-object-data>.si-tree-view-item-object-data-field-1{color:var(--si-tree-view-item-object-data-field-1-color)}:host.si-tree-ellipsis .si-tree-view-item-object-data{overflow-x:hidden}.si-tree-view-item-object-data>*{white-space:nowrap;margin-block:0;line-height:var(--si-tree-view-item-line-height)}:host.si-tree-ellipsis .si-tree-view-item-object-data>*{overflow:hidden;text-overflow:ellipsis}.si-tree-view-menu-btn{pointer-events:none}.si-tree-view-item-end-icons{block-size:calc(var(--si-tree-view-item-min-height) - 2 * (var(--element-button-focus-width) + var(--element-button-focus-overlay-width)))}.si-tree-view-item-end-icons.si-tree-view-item-end-icons-sticky{position:sticky;inset-inline-end:0}.input-box{margin-inline:2px 12px}.form-check-input{display:block}si-loading-spinner{--loading-spinner-size: var(--si-tree-view-icon-size)}\n"] }]
|
|
854
|
-
}], propDecorators: { menuTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkMenuTrigger), { isSignal: true }] }], ariaLevel: [{
|
|
857
|
+
}], ctorParameters: () => [], propDecorators: { menuTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkMenuTrigger), { isSignal: true }] }], ariaLevel: [{
|
|
855
858
|
type: HostBinding,
|
|
856
859
|
args: ['attr.aria-level']
|
|
857
860
|
}], ariaSetsize: [{
|