@c8y/ngx-components 1023.78.5 → 1023.79.1

package/fesm2022/c8y-ngx-components-widgets-implementations-pie-chart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-widgets-implementations-pie-chart.mjs","sources":["../../widgets/implementations/pie-chart/current-measurement.service.ts","../../widgets/implementations/pie-chart/pie-chart-widget-view/pie-chart-widget-view.component.ts","../../widgets/implementations/pie-chart/pie-chart-widget-view/pie-chart-widget-view.component.html","../../widgets/implementations/pie-chart/pie-chart-widget-config/pie-chart-widget-config.component.ts","../../widgets/implementations/pie-chart/pie-chart-widget-config/pie-chart-widget-config.component.html","../../widgets/implementations/pie-chart/c8y-ngx-components-widgets-implementations-pie-chart.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { MeasurementRealtimeService } from '@c8y/ngx-components';\nimport { IMeasurementValue } from '@c8y/client';\nimport { KPIDetails } from '@c8y/ngx-components/datapoint-selector';\nimport { Observable, of } from 'rxjs';\nimport { map, catchError } from 'rxjs/operators';\n\n@Injectable({ providedIn: 'root' })\nexport class CurrentMeasurementService {\n  constructor(private realtime: MeasurementRealtimeService) {}\n\n  /**\n   * Fetches the latest measurement value for a given datapoint.\n   * Combines initial historical value with realtime updates.\n   *\n   * @param datapoint - The KPI datapoint configuration\n   * @returns Observable emitting measurement value, unit, date, and notFound flag\n   */\n  getLatest(datapoint: KPIDetails): Observable<{\n    value: number;\n    unit: string;\n    date: string;\n    notFound?: boolean;\n  }> {\n    return this.realtime\n      .latestValueOfSpecificMeasurement$(\n        datapoint.fragment,\n        datapoint.series,\n        datapoint.__target,\n        1,\n        true\n      )\n      .pipe(\n        map(m => {\n          if (!m) {\n            return {\n              value: Number.NaN,\n              unit: datapoint.unit || '',\n              date: '',\n              notFound: true\n            };\n          }\n\n          const v: IMeasurementValue = m[datapoint.fragment][datapoint.series];\n          return {\n            value: v.value,\n            unit: v.unit || datapoint.unit,\n            date: m.time\n          };\n        }),\n        catchError(() =>\n          of({\n            value: Number.NaN,\n            unit: datapoint.unit || '',\n            date: '',\n            notFound: true\n          })\n        )\n      );\n  }\n}\n","import {\n  Component,\n  ElementRef,\n  inject,\n  Input,\n  OnChanges,\n  SimpleChanges,\n  ChangeDetectionStrategy,\n  ViewChild\n} from '@angular/core';\nimport {\n  DatapointValue,\n  MeasurementValue,\n  PieChartConfig,\n  PieChartOptions\n} from '../pie-chart.model';\nimport { ECharts } from 'echarts/core';\nimport { BehaviorSubject, combineLatest, map, Observable, switchMap, tap } from 'rxjs';\nimport { NGX_ECHARTS_CONFIG, NgxEchartsModule } from 'ngx-echarts';\nimport { AsyncPipe } from '@angular/common';\nimport { CurrentMeasurementService } from '../current-measurement.service';\nimport {\n  DynamicComponent,\n  DynamicComponentAlert,\n  DynamicComponentAlertAggregator,\n  MeasurementRealtimeService\n} from '@c8y/ngx-components';\nimport { ChartAlertsComponent } from '@c8y/ngx-components/echart';\nimport { TranslateService } from '@ngx-translate/core';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport * as echarts from 'echarts';\nimport type { EChartsOption, PieSeriesOption } from 'echarts';\nimport { KPIDetails } from '@c8y/ngx-components/datapoint-selector';\nimport { CallbackDataParams } from 'echarts/types/dist/shared';\n\n/** Chart layout constants */\nconst CHART_LAYOUT = {\n  LEGEND_TOP: '5%',\n  SERIES_TOP: '5%',\n  PIE_RADIUS: '80%',\n  EMPTY_STATE_FONT_SIZE: 30\n} as const;\n\n@Component({\n  selector: 'c8y-pie-chart',\n  templateUrl: './pie-chart-widget-view.component.html',\n  providers: [\n    MeasurementRealtimeService,\n    CurrentMeasurementService,\n    { provide: NGX_ECHARTS_CONFIG, useFactory: () => ({ echarts: () => import('echarts') }) }\n  ],\n  imports: [NgxEchartsModule, AsyncPipe, ChartAlertsComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PieChartWidgetViewComponent implements OnChanges, DynamicComponent {\n  @Input() config!: PieChartConfig;\n  @ViewChild('chart', { static: false }) chart!: ElementRef;\n  activeDatapoints: KPIDetails[] = [];\n\n  chartOptions$!: Observable<EChartsOption>;\n  alerts = new DynamicComponentAlertAggregator();\n  echartsInstance!: ECharts;\n\n  private readonly configChanged$ = new BehaviorSubject<void>(undefined);\n  private readonly measurements = inject(CurrentMeasurementService);\n  private readonly translateService = inject(TranslateService);\n\n  constructor() {\n    this.chartOptions$ = this.configChanged$.pipe(\n      switchMap(() => this.fetchMeasurements()),\n      tap(entries => this.handleNegativeValues(entries)),\n      map(entries => this.buildChartOptions(entries)),\n      tap(options => this.updateChartInstance(options))\n    );\n  }\n\n  ngOnChanges(_: SimpleChanges) {\n    if (this.config?.datapoints?.length) {\n      this.configChanged$.next();\n    }\n  }\n\n  onChartInit(ec: ECharts) {\n    this.echartsInstance = ec;\n  }\n\n  /**\n   * Fetches latest measurements for all configured datapoints.\n   */\n  private fetchMeasurements(): Observable<DatapointValue[]> {\n    this.activeDatapoints = this.config?.datapoints?.filter(dp => dp.__active);\n    const streams = this.activeDatapoints.map(dp =>\n      this.measurements.getLatest(dp).pipe(map(m => this.mapToDatapointValue(dp, m)))\n    );\n    return combineLatest(streams);\n  }\n\n  /**\n   * Maps a datapoint and its measurement to a DatapointValue.\n   */\n  private mapToDatapointValue(\n    datapoint: KPIDetails,\n    measurement: MeasurementValue\n  ): DatapointValue {\n    const rawValue = measurement.value;\n    return {\n      label: datapoint.label || '',\n      value: rawValue < 0 || Number.isNaN(rawValue) ? 0 : rawValue,\n      rawValue,\n      unit: datapoint.unit || measurement.unit || '',\n      color: datapoint.color || ''\n    };\n  }\n\n  /**\n   * Handles negative value alerts - clears existing alerts and adds warning if needed.\n   */\n  private handleNegativeValues(entries: DatapointValue[]): void {\n    this.alerts.clear();\n\n    const negatives = entries.filter(e => e.rawValue < 0);\n    if (negatives.length === 0) {\n      return;\n    }\n\n    const negativeDpList = negatives\n      .map(n => `${this.encodeHtml(n.label)}: ${n.rawValue} ${this.encodeHtml(n.unit)}`)\n      .join('; ');\n\n    const errorMessage = this.translateService.instant(\n      gettext('Negative measurements received from data point(s): {{ datapoints }}'),\n      { datapoints: negativeDpList }\n    );\n\n    this.alerts.addAlerts(new DynamicComponentAlert({ type: 'warning', text: errorMessage }));\n  }\n\n  /**\n   * Builds the ECharts options based on datapoint values.\n   */\n  private buildChartOptions(datapoints: DatapointValue[]): EChartsOption {\n    if (this.isEmptyState(datapoints)) {\n      return this.buildEmptyStateOptions();\n    }\n    return this.buildPieChartOptions(datapoints);\n  }\n\n  /**\n   * Checks if chart should display empty state (no positive data).\n   */\n  private isEmptyState(entries: DatapointValue[]): boolean {\n    const hasPositiveData = entries.some(e => e.rawValue > 0);\n    const hasNegativeData = entries.some(e => e.rawValue < 0);\n    return !hasPositiveData && !hasNegativeData;\n  }\n\n  /**\n   * Builds options for empty state display.\n   */\n  private buildEmptyStateOptions(): EChartsOption {\n    return {\n      title: {\n        text: gettext('No data available.'),\n        left: 'center',\n        top: 'center',\n        textStyle: { fontSize: CHART_LAYOUT.EMPTY_STATE_FONT_SIZE }\n      },\n      series: []\n    };\n  }\n\n  /**\n   * Builds the pie chart options with data.\n   */\n  private buildPieChartOptions(entries: DatapointValue[]): EChartsOption {\n    const options = this.config.pieChartOptions;\n    const total = this.calculateTotal(entries);\n\n    return {\n      tooltip: this.buildTooltipConfig(entries, options),\n      legend: this.buildLegendConfig(options),\n      series: [this.buildPieSeriesConfig(entries, total, options)]\n    };\n  }\n\n  /**\n   * Calculates total of all entry values.\n   */\n  private calculateTotal(entries: DatapointValue[]): number {\n    return entries.reduce((sum, e) => sum + e.value, 0);\n  }\n\n  /**\n   * Builds tooltip configuration.\n   */\n  private buildTooltipConfig(\n    entries: DatapointValue[],\n    options?: PieChartOptions\n  ): EChartsOption['tooltip'] {\n    return {\n      show: options?.showTooltips ?? false,\n      formatter: (params: CallbackDataParams) => {\n        const entry = entries.find(e => e.label === params.name);\n        const unit = entry?.unit || '';\n        const value = (params.value as number).toFixed(2);\n        return `${this.encodeHtml(params.name as string)}: ${value} ${this.encodeHtml(unit)}`;\n      }\n    };\n  }\n\n  /**\n   * Builds legend configuration.\n   */\n  private buildLegendConfig(options?: PieChartOptions): EChartsOption['legend'] {\n    return {\n      top: CHART_LAYOUT.LEGEND_TOP,\n      left: 'right',\n      show: options?.showLegend ?? false,\n      formatter: (name: string) => {\n        const match = name.match(/^(.+)_\\d+$/);\n        return match ? match[1] : name;\n      }\n    };\n  }\n\n  /**\n   * Builds pie series configuration.\n   */\n  private buildPieSeriesConfig(\n    entries: DatapointValue[],\n    total: number,\n    options?: PieChartOptions\n  ): PieSeriesOption {\n    return {\n      top: CHART_LAYOUT.SERIES_TOP,\n      type: 'pie',\n      radius: CHART_LAYOUT.PIE_RADIUS,\n      label: {\n        show: options?.showLabels ?? false,\n        position: 'inside',\n        formatter: (params: CallbackDataParams) =>\n          this.formatPercentageLabel(params.value as number, total)\n      },\n      data: entries.map((e, index) => ({\n        name: `${e.label}_${index}`,\n        value: e.value,\n        itemStyle: { color: e.color }\n      }))\n    };\n  }\n\n  /**\n   * Formats percentage label for pie slice.\n   */\n  private formatPercentageLabel(value: number, total: number): string {\n    const percentage = total > 0 ? Math.round((value / total) * 100) : 0;\n    return percentage === 0 ? '' : `${percentage}%`;\n  }\n\n  /**\n   * Updates the ECharts instance with new options.\n   */\n  private updateChartInstance(options: EChartsOption): void {\n    if (this.echartsInstance) {\n      this.echartsInstance.setOption(options, true);\n    }\n  }\n\n  /**\n   * Encodes HTML to prevent XSS attacks.\n   */\n  private encodeHtml(text: string): string {\n    return echarts.format.encodeHTML(text);\n  }\n}\n","<div class=\"p-relative fit-h\">\n  <div\n    class=\"p-absolute fit-w fit-h\"\n    #chart\n    echarts\n    [options]=\"chartOptions$ | async\"\n    (chartInit)=\"onChartInit($event)\"\n  ></div>\n\n  <c8y-chart-alerts [alerts]=\"alerts\"></c8y-chart-alerts>\n</div>\n","import { Component, inject, Input, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';\nimport { PieChartConfig } from '../pie-chart.model';\nimport { WidgetConfigService } from '@c8y/ngx-components/context-dashboard';\nimport { Observable, Subject } from 'rxjs';\nimport { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';\nimport { CommonModule, CoreModule } from '@c8y/ngx-components';\nimport { PieChartWidgetViewComponent } from '../pie-chart-widget-view/pie-chart-widget-view.component';\n\n@Component({\n  selector: 'app-pie-chart-config',\n  templateUrl: './pie-chart-widget-config.component.html',\n  imports: [\n    CommonModule,\n    CoreModule,\n    DatapointSelectorModule,\n    FormsModule,\n    ReactiveFormsModule,\n    PieChartWidgetViewComponent\n  ]\n})\nexport class PieChartWidgetConfigComponent implements OnInit, OnDestroy {\n  @Input() config: PieChartConfig;\n  formGroup!: ReturnType<PieChartWidgetConfigComponent['initForm']>;\n  private readonly destroy$ = new Subject<void>();\n\n  @ViewChild('pieChartPreview')\n  set previewMapSet(template: TemplateRef<any>) {\n    if (template) {\n      this.widgetConfigService.setPreview(template);\n      return;\n    }\n    this.widgetConfigService.setPreview(null);\n  }\n\n  private readonly widgetConfigService = inject(WidgetConfigService);\n  private readonly formBuilder = inject(FormBuilder);\n\n  ngOnInit() {\n    this.formGroup = this.initForm();\n  }\n\n  ngOnDestroy() {\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n\n  onBeforeSave(config?: PieChartConfig): boolean | Promise<boolean> | Observable<boolean> {\n    if (!this.formGroup.valid || !config) return false;\n\n    const formValue = this.formGroup.value;\n    config.pieChartOptions = config.pieChartOptions || {\n      showLabels: false,\n      showLegend: false,\n      showTooltips: false\n    };\n    config.pieChartOptions.showLabels = formValue.pieChartOptions.showLabels;\n    config.pieChartOptions.showLegend = formValue.pieChartOptions.showLegend;\n    config.pieChartOptions.showTooltips = formValue.pieChartOptions.showTooltips;\n\n    this.widgetConfigService.updateConfig(config);\n\n    return true;\n  }\n\n  private initForm() {\n    const form = this.formBuilder.group({\n      pieChartOptions: this.formBuilder.group({\n        showLabels: [this.config.pieChartOptions?.showLabels ?? false],\n        showLegend: [this.config.pieChartOptions?.showLegend ?? false],\n        showTooltips: [this.config.pieChartOptions?.showTooltips ?? false]\n      })\n    });\n    return form;\n  }\n}\n","@if (formGroup) {\n  <form\n    class=\"p-4\"\n    [formGroup]=\"formGroup\"\n  >\n    <fieldset class=\"c8y-fieldset m-t-16 p-b-8\">\n      <legend>{{ 'Pie chart options' | translate }}</legend>\n      <div\n        class=\"d-flex flex-column gap-8 form-group-sm\"\n        formGroupName=\"pieChartOptions\"\n      >\n        <label class=\"c8y-checkbox\">\n          <input\n            type=\"checkbox\"\n            formControlName=\"showLabels\"\n          />\n          <span></span>\n          <span>\n            {{ 'Show Labels' | translate }}\n          </span>\n        </label>\n        <label class=\"c8y-checkbox\">\n          <input\n            type=\"checkbox\"\n            formControlName=\"showLegend\"\n          />\n          <span></span>\n          <span>\n            {{ 'Show Legend' | translate }}\n          </span>\n        </label>\n        <label class=\"c8y-checkbox\">\n          <input\n            type=\"checkbox\"\n            formControlName=\"showTooltips\"\n          />\n          <span></span>\n          <span>\n            {{ 'Show Tooltips' | translate }}\n          </span>\n        </label>\n      </div>\n    </fieldset>\n  </form>\n\n  <ng-template #pieChartPreview>\n    @if (config.datapoints?.length > 0) {\n      <c8y-pie-chart\n        class=\"w-100 h-100\"\n        [config]=\"{\n          datapoints: config.datapoints,\n          pieChartOptions: {\n            showLabels: formGroup.value.pieChartOptions.showLabels,\n            showLegend: formGroup.value.pieChartOptions.showLegend,\n            showTooltips: formGroup.value.pieChartOptions.showTooltips\n          }\n        }\"\n      ></c8y-pie-chart>\n    } @else {\n      <div class=\"col-md-6 d-col a-i-start j-c-center\">\n        <c8y-ui-empty-state\n          [icon]=\"'c8y-data-points'\"\n          [title]=\"'No data points selected' | translate\"\n          [subtitle]=\"'Select data point to render content' | translate\"\n          [horizontal]=\"false\"\n          data-cy=\"kpi-widget--empty-state-no-data-point-selected\"\n        >\n          <p c8y-guide-docs>\n            <small\n              translate\n              ngNonBindable\n            >\n              Find out more in the\n              <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#kpi\">user documentation</a>\n              .\n            </small>\n          </p>\n        </c8y-ui-empty-state>\n      </div>\n    }\n  </ng-template>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["map","i1"],"mappings":"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"}
+{"version":3,"file":"c8y-ngx-components-widgets-implementations-pie-chart.mjs","sources":["../../widgets/implementations/pie-chart/current-measurement.service.ts","../../widgets/implementations/pie-chart/pie-chart-widget-view/pie-chart-widget-view.component.ts","../../widgets/implementations/pie-chart/pie-chart-widget-view/pie-chart-widget-view.component.html","../../widgets/implementations/pie-chart/pie-chart-widget-config/pie-chart-widget-config.component.ts","../../widgets/implementations/pie-chart/pie-chart-widget-config/pie-chart-widget-config.component.html","../../widgets/implementations/pie-chart/c8y-ngx-components-widgets-implementations-pie-chart.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { MeasurementRealtimeService } from '@c8y/ngx-components';\nimport { IMeasurementValue } from '@c8y/client';\nimport { KPIDetails } from '@c8y/ngx-components/datapoint-selector';\nimport { Observable, of } from 'rxjs';\nimport { map, catchError } from 'rxjs/operators';\n\n@Injectable({ providedIn: 'root' })\nexport class CurrentMeasurementService {\n  constructor(private realtime: MeasurementRealtimeService) {}\n\n  /**\n   * Fetches the latest measurement value for a given datapoint.\n   * Combines initial historical value with realtime updates.\n   *\n   * @param datapoint - The KPI datapoint configuration\n   * @returns Observable emitting measurement value, unit, date, and notFound flag\n   */\n  getLatest(datapoint: KPIDetails): Observable<{\n    value: number;\n    unit: string;\n    date: string;\n    notFound?: boolean;\n  }> {\n    return this.realtime\n      .latestValueOfSpecificMeasurement$(\n        datapoint.fragment,\n        datapoint.series,\n        datapoint.__target,\n        1,\n        true\n      )\n      .pipe(\n        map(m => {\n          if (!m) {\n            return {\n              value: Number.NaN,\n              unit: datapoint.unit || '',\n              date: '',\n              notFound: true\n            };\n          }\n\n          const v: IMeasurementValue = m[datapoint.fragment][datapoint.series];\n          return {\n            value: v.value,\n            unit: v.unit || datapoint.unit,\n            date: m.time\n          };\n        }),\n        catchError(() =>\n          of({\n            value: Number.NaN,\n            unit: datapoint.unit || '',\n            date: '',\n            notFound: true\n          })\n        )\n      );\n  }\n}\n","import {\n  Component,\n  ElementRef,\n  inject,\n  Input,\n  OnChanges,\n  SimpleChanges,\n  ChangeDetectionStrategy,\n  ViewChild\n} from '@angular/core';\nimport {\n  DatapointValue,\n  MeasurementValue,\n  PieChartConfig,\n  PieChartOptions\n} from '../pie-chart.model';\nimport { ECharts } from 'echarts/core';\nimport { BehaviorSubject, combineLatest, map, Observable, switchMap, tap } from 'rxjs';\nimport { NGX_ECHARTS_CONFIG, NgxEchartsModule } from 'ngx-echarts';\nimport { AsyncPipe } from '@angular/common';\nimport { CurrentMeasurementService } from '../current-measurement.service';\nimport {\n  DynamicComponent,\n  DynamicComponentAlert,\n  DynamicComponentAlertAggregator,\n  MeasurementRealtimeService\n} from '@c8y/ngx-components';\nimport { ChartAlertsComponent } from '@c8y/ngx-components/echart';\nimport { TranslateService } from '@ngx-translate/core';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport * as echarts from 'echarts';\nimport type { EChartsOption, PieSeriesOption } from 'echarts';\nimport { KPIDetails } from '@c8y/ngx-components/datapoint-selector';\nimport { CallbackDataParams } from 'echarts/types/dist/shared';\n\n/** Chart layout constants */\nconst CHART_LAYOUT = {\n  LEGEND_TOP: '5%',\n  SERIES_TOP: '5%',\n  PIE_RADIUS: '80%',\n  EMPTY_STATE_FONT_SIZE: 30\n} as const;\n\n@Component({\n  selector: 'c8y-pie-chart',\n  templateUrl: './pie-chart-widget-view.component.html',\n  providers: [\n    MeasurementRealtimeService,\n    CurrentMeasurementService,\n    { provide: NGX_ECHARTS_CONFIG, useFactory: () => ({ echarts: () => import('echarts') }) }\n  ],\n  imports: [NgxEchartsModule, AsyncPipe, ChartAlertsComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PieChartWidgetViewComponent implements OnChanges, DynamicComponent {\n  @Input() config!: PieChartConfig;\n  @ViewChild('chart', { static: false }) chart!: ElementRef;\n  activeDatapoints: KPIDetails[] = [];\n\n  chartOptions$!: Observable<EChartsOption>;\n  alerts = new DynamicComponentAlertAggregator();\n  echartsInstance!: ECharts;\n\n  private readonly configChanged$ = new BehaviorSubject<void>(undefined);\n  private readonly measurements = inject(CurrentMeasurementService);\n  private readonly translateService = inject(TranslateService);\n\n  constructor() {\n    this.chartOptions$ = this.configChanged$.pipe(\n      switchMap(() => this.fetchMeasurements()),\n      tap(entries => this.handleNegativeValues(entries)),\n      map(entries => this.buildChartOptions(entries)),\n      tap(options => this.updateChartInstance(options))\n    );\n  }\n\n  ngOnChanges(_: SimpleChanges) {\n    if (this.config?.datapoints?.length) {\n      this.configChanged$.next();\n    }\n  }\n\n  onChartInit(ec: ECharts) {\n    this.echartsInstance = ec;\n  }\n\n  /**\n   * Fetches latest measurements for all configured datapoints.\n   */\n  private fetchMeasurements(): Observable<DatapointValue[]> {\n    this.activeDatapoints = this.config?.datapoints?.filter(dp => dp.__active);\n    const streams = this.activeDatapoints.map(dp =>\n      this.measurements.getLatest(dp).pipe(map(m => this.mapToDatapointValue(dp, m)))\n    );\n    return combineLatest(streams);\n  }\n\n  /**\n   * Maps a datapoint and its measurement to a DatapointValue.\n   */\n  private mapToDatapointValue(\n    datapoint: KPIDetails,\n    measurement: MeasurementValue\n  ): DatapointValue {\n    const rawValue = measurement.value;\n    return {\n      label: datapoint.label || '',\n      value: rawValue < 0 || Number.isNaN(rawValue) ? 0 : rawValue,\n      rawValue,\n      unit: datapoint.unit || measurement.unit || '',\n      color: datapoint.color || ''\n    };\n  }\n\n  /**\n   * Handles negative value alerts - clears existing alerts and adds warning if needed.\n   */\n  private handleNegativeValues(entries: DatapointValue[]): void {\n    this.alerts.clear();\n\n    const negatives = entries.filter(e => e.rawValue < 0);\n    if (negatives.length === 0) {\n      return;\n    }\n\n    const negativeDpList = negatives\n      .map(n => `${this.encodeHtml(n.label)}: ${n.rawValue} ${this.encodeHtml(n.unit)}`)\n      .join('; ');\n\n    const errorMessage = this.translateService.instant(\n      gettext('Negative measurements received from data point(s): {{ datapoints }}'),\n      { datapoints: negativeDpList }\n    );\n\n    this.alerts.addAlerts(new DynamicComponentAlert({ type: 'warning', text: errorMessage }));\n  }\n\n  /**\n   * Builds the ECharts options based on datapoint values.\n   */\n  private buildChartOptions(datapoints: DatapointValue[]): EChartsOption {\n    if (this.isEmptyState(datapoints)) {\n      return this.buildEmptyStateOptions();\n    }\n    return this.buildPieChartOptions(datapoints);\n  }\n\n  /**\n   * Checks if chart should display empty state (no positive data).\n   */\n  private isEmptyState(entries: DatapointValue[]): boolean {\n    const hasPositiveData = entries.some(e => e.rawValue > 0);\n    const hasNegativeData = entries.some(e => e.rawValue < 0);\n    return !hasPositiveData && !hasNegativeData;\n  }\n\n  /**\n   * Builds options for empty state display.\n   */\n  private buildEmptyStateOptions(): EChartsOption {\n    return {\n      title: {\n        text: gettext('No data available.'),\n        left: 'center',\n        top: 'center',\n        textStyle: { fontSize: CHART_LAYOUT.EMPTY_STATE_FONT_SIZE }\n      },\n      series: []\n    };\n  }\n\n  /**\n   * Builds the pie chart options with data.\n   */\n  private buildPieChartOptions(entries: DatapointValue[]): EChartsOption {\n    const options = this.config.pieChartOptions;\n    const total = this.calculateTotal(entries);\n\n    return {\n      tooltip: this.buildTooltipConfig(entries, options),\n      legend: this.buildLegendConfig(options),\n      series: [this.buildPieSeriesConfig(entries, total, options)]\n    };\n  }\n\n  /**\n   * Calculates total of all entry values.\n   */\n  private calculateTotal(entries: DatapointValue[]): number {\n    return entries.reduce((sum, e) => sum + e.value, 0);\n  }\n\n  /**\n   * Builds tooltip configuration.\n   */\n  private buildTooltipConfig(\n    entries: DatapointValue[],\n    options?: PieChartOptions\n  ): EChartsOption['tooltip'] {\n    return {\n      show: options?.showTooltips ?? false,\n      formatter: (params: CallbackDataParams) => {\n        const entry = entries.find(e => e.label === params.name);\n        const unit = entry?.unit || '';\n        const value = (params.value as number).toFixed(2);\n        return `${this.encodeHtml(params.name as string)}: ${value} ${this.encodeHtml(unit)}`;\n      }\n    };\n  }\n\n  /**\n   * Builds legend configuration.\n   */\n  private buildLegendConfig(options?: PieChartOptions): EChartsOption['legend'] {\n    return {\n      top: CHART_LAYOUT.LEGEND_TOP,\n      left: 'right',\n      show: options?.showLegend ?? false,\n      formatter: (name: string) => {\n        const match = name.match(/^(.+)_\\d+$/);\n        return match ? match[1] : name;\n      }\n    };\n  }\n\n  /**\n   * Builds pie series configuration.\n   */\n  private buildPieSeriesConfig(\n    entries: DatapointValue[],\n    total: number,\n    options?: PieChartOptions\n  ): PieSeriesOption {\n    return {\n      top: CHART_LAYOUT.SERIES_TOP,\n      type: 'pie',\n      radius: CHART_LAYOUT.PIE_RADIUS,\n      label: {\n        show: options?.showLabels ?? false,\n        position: 'inside',\n        formatter: (params: CallbackDataParams) =>\n          this.formatPercentageLabel(params.value as number, total)\n      },\n      data: entries.map((e, index) => ({\n        name: `${e.label}_${index}`,\n        value: e.value,\n        itemStyle: { color: e.color }\n      }))\n    };\n  }\n\n  /**\n   * Formats percentage label for pie slice.\n   */\n  private formatPercentageLabel(value: number, total: number): string {\n    const percentage = total > 0 ? Math.round((value / total) * 100) : 0;\n    return percentage === 0 ? '' : `${percentage}%`;\n  }\n\n  /**\n   * Updates the ECharts instance with new options.\n   */\n  private updateChartInstance(options: EChartsOption): void {\n    if (this.echartsInstance) {\n      this.echartsInstance.setOption(options, true);\n    }\n  }\n\n  /**\n   * Encodes HTML to prevent XSS attacks.\n   */\n  private encodeHtml(text: string): string {\n    return echarts.format.encodeHTML(text);\n  }\n}\n","<div class=\"p-relative fit-h\">\n  <div\n    class=\"p-absolute fit-w fit-h\"\n    #chart\n    echarts\n    [options]=\"chartOptions$ | async\"\n    (chartInit)=\"onChartInit($event)\"\n  ></div>\n\n  <c8y-chart-alerts [alerts]=\"alerts\"></c8y-chart-alerts>\n</div>\n","import { Component, inject, Input, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';\nimport { PieChartConfig } from '../pie-chart.model';\nimport { WidgetConfigService } from '@c8y/ngx-components/context-dashboard';\nimport { Observable, Subject } from 'rxjs';\nimport { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';\nimport { CommonModule, CoreModule } from '@c8y/ngx-components';\nimport { PieChartWidgetViewComponent } from '../pie-chart-widget-view/pie-chart-widget-view.component';\n\n@Component({\n  selector: 'app-pie-chart-config',\n  templateUrl: './pie-chart-widget-config.component.html',\n  imports: [\n    CommonModule,\n    CoreModule,\n    DatapointSelectorModule,\n    FormsModule,\n    ReactiveFormsModule,\n    PieChartWidgetViewComponent\n  ]\n})\nexport class PieChartWidgetConfigComponent implements OnInit, OnDestroy {\n  @Input() config: PieChartConfig;\n  formGroup!: ReturnType<PieChartWidgetConfigComponent['initForm']>;\n  private readonly destroy$ = new Subject<void>();\n\n  @ViewChild('pieChartPreview')\n  set previewMapSet(template: TemplateRef<any>) {\n    if (template) {\n      this.widgetConfigService.setPreview(template);\n      return;\n    }\n    this.widgetConfigService.setPreview(null);\n  }\n\n  private readonly widgetConfigService = inject(WidgetConfigService);\n  private readonly formBuilder = inject(FormBuilder);\n\n  ngOnInit() {\n    this.formGroup = this.initForm();\n  }\n\n  ngOnDestroy() {\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n\n  onBeforeSave(config?: PieChartConfig): boolean | Promise<boolean> | Observable<boolean> {\n    if (!this.formGroup.valid || !config) return false;\n\n    const formValue = this.formGroup.value;\n    config.pieChartOptions = config.pieChartOptions || {\n      showLabels: false,\n      showLegend: false,\n      showTooltips: false\n    };\n    config.pieChartOptions.showLabels = formValue.pieChartOptions.showLabels;\n    config.pieChartOptions.showLegend = formValue.pieChartOptions.showLegend;\n    config.pieChartOptions.showTooltips = formValue.pieChartOptions.showTooltips;\n\n    this.widgetConfigService.updateConfig(config);\n\n    return true;\n  }\n\n  private initForm() {\n    const form = this.formBuilder.group({\n      pieChartOptions: this.formBuilder.group({\n        showLabels: [this.config.pieChartOptions?.showLabels ?? false],\n        showLegend: [this.config.pieChartOptions?.showLegend ?? false],\n        showTooltips: [this.config.pieChartOptions?.showTooltips ?? false]\n      })\n    });\n    return form;\n  }\n}\n","@if (formGroup) {\n  <form\n    class=\"p-4\"\n    [formGroup]=\"formGroup\"\n  >\n    <fieldset class=\"c8y-fieldset m-t-16 p-b-8\">\n      <legend>{{ 'Pie chart options' | translate }}</legend>\n      <div\n        class=\"d-flex flex-column gap-8 form-group-sm\"\n        formGroupName=\"pieChartOptions\"\n      >\n        <label class=\"c8y-checkbox\">\n          <input\n            type=\"checkbox\"\n            formControlName=\"showLabels\"\n          />\n          <span></span>\n          <span>\n            {{ 'Show labels' | translate }}\n          </span>\n        </label>\n        <label class=\"c8y-checkbox\">\n          <input\n            type=\"checkbox\"\n            formControlName=\"showLegend\"\n          />\n          <span></span>\n          <span>\n            {{ 'Show legend' | translate }}\n          </span>\n        </label>\n        <label class=\"c8y-checkbox\">\n          <input\n            type=\"checkbox\"\n            formControlName=\"showTooltips\"\n          />\n          <span></span>\n          <span>\n            {{ 'Show tooltips' | translate }}\n          </span>\n        </label>\n      </div>\n    </fieldset>\n  </form>\n\n  <ng-template #pieChartPreview>\n    @if (config.datapoints?.length > 0) {\n      <c8y-pie-chart\n        class=\"w-100 h-100\"\n        [config]=\"{\n          datapoints: config.datapoints,\n          pieChartOptions: {\n            showLabels: formGroup.value.pieChartOptions.showLabels,\n            showLegend: formGroup.value.pieChartOptions.showLegend,\n            showTooltips: formGroup.value.pieChartOptions.showTooltips\n          }\n        }\"\n      ></c8y-pie-chart>\n    } @else {\n      <div class=\"col-md-6 d-col a-i-start j-c-center\">\n        <c8y-ui-empty-state\n          [icon]=\"'c8y-data-points'\"\n          [title]=\"'No data points selected' | translate\"\n          [subtitle]=\"'Select data point to render content' | translate\"\n          [horizontal]=\"false\"\n          data-cy=\"kpi-widget--empty-state-no-data-point-selected\"\n        >\n          <p c8y-guide-docs>\n            <small\n              translate\n              ngNonBindable\n            >\n              Find out more in the\n              <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#kpi\">user documentation</a>.\n            </small>\n          </p>\n        </c8y-ui-empty-state>\n      </div>\n    }\n  </ng-template>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["map","i1"],"mappings":"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"}

package/fesm2022/c8y-ngx-components.mjs

@@ -20220,8 +20220,9 @@ class SelectComponent {
      * @ignore
      * @param selectKeyboardService The service to handle keyboard navigation.
      */
-    constructor(selectKeyboardService) {
+    constructor(selectKeyboardService, translateService) {
         this.selectKeyboardService = selectKeyboardService;
+        this.translateService = translateService;
         /**
          * Placeholder text to be displayed in the select.
          */
@@ -20301,6 +20302,12 @@ class SelectComponent {
             noMatchHighlightFirst: this.filterItems
         };
     }
+    /**
+     * @ignore
+     */
+    ngOnInit() {
+        this.updateDisplayPlaceholder();
+    }
     /**
      * @ignore
      */
@@ -20345,6 +20352,9 @@ class SelectComponent {
                 noMatchHighlightFirst: changes.filterItems?.currentValue || this.filterItems
             };
         }
+        if (changes.placeholder || changes.required) {
+            this.updateDisplayPlaceholder();
+        }
     }
     /**
      * @ignore
@@ -20493,7 +20503,21 @@ class SelectComponent {
             this.onChange(this.multi ? this._selected : this._selected[0]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SelectComponent, deps: [{ token: SelectKeyboardService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** Computes translated placeholder, appending a "(required)" hint when required. */
+    updateDisplayPlaceholder() {
+        const translatedPlaceholder = this.placeholder
+            ? this.translateService.instant(this.placeholder)
+            : this.placeholder;
+        if (!this.required) {
+            this.displayPlaceholder = translatedPlaceholder;
+            return;
+        }
+        const requiredText = `(${this.translateService.instant(gettext$1('required'))})`;
+        this.displayPlaceholder = translatedPlaceholder?.trim()
+            ? `${translatedPlaceholder} ${requiredText}`
+            : requiredText;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SelectComponent, deps: [{ token: SelectKeyboardService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: SelectComponent, isStandalone: true, selector: "c8y-select", inputs: { placeholder: "placeholder", items: "items", selected: "selected", container: "container", multi: "multi", canSelectWithSpace: "canSelectWithSpace", disabled: "disabled", autoClose: "autoClose", insideClick: "insideClick", required: "required", canDeselect: "canDeselect", name: "name", icon: "icon", filterItems: "filterItems" }, outputs: { onSelect: "onSelect", onDeselect: "onDeselect", onIconClick: "onIconClick" }, host: { classAttribute: "c8y-select-v2" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -20506,7 +20530,7 @@ class SelectComponent {
                 multi: true
             },
             SelectKeyboardService
-        ], queries: [{ propertyName: "projectedSelectedItems", first: true, predicate: SelectedItemsDirective, descendants: true }, { propertyName: "projectedSelectableItems", predicate: SelectItemDirective }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "list", predicate: ListItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"autoClose\"\n  [isDisabled]=\"disabled\"\n  [insideClick]=\"insideClick\"\n  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  dropdownToggle\n  (click)=\"open()\"\n>\n  <div\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\n    <div\n      class=\"form-control text-truncate\"\n      [ngClass]=\"{\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0,\n        'text-truncate': !multi,\n        'inner-scroll d-flex a-i-center': multi\n      }\"\n    >\n      <!-- rendering of selected items (with content projection) -->\n      @if (projectedSelectedItems) {\n        <div class=\"selected-items\">\n          @for (selectedItem of selected; track selectedItem) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                projectedSelectedItems.templateRef;\n                context: { $implicit: selectedItem }\n              \"\n            ></ng-container>\n          }\n        </div>\n        @if (selected.length === 0 && !searchHasFocus && searchControl.value.length === 0) {\n          <i class=\"text-muted\">\n            {{ placeholder | translate }}\n          </i>\n        }\n      } @else {\n        <div class=\"selected-items\">\n          @if (!multi) {\n            <!-- hidden is needed, otherwise the propagation does not work correctly -->\n            <span [hidden]=\"!searchHasFocus || !preselectedItem || filterItems\">\n              {{ preselectedItem?.label | translate }}\n            </span>\n            <span [hidden]=\"searchHasFocus || selected.length !== 1\">\n              {{ selected[0]?.label | translate }}\n            </span>\n          }\n          @if (selected.length === 0 && !preselectedItem && searchControl.value.length === 0) {\n            <i class=\"text-muted\">\n              {{ placeholder | translate }}\n            </i>\n          }\n          @if (multi) {\n            <span class=\"m-r-4\">{{ searchControl.value }}</span>\n            @for (selectedItem of selected; track selectedItem) {\n              <span class=\"tag tag--info chip\">\n                <button\n                  class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                  title=\"{{ selectedItem.label | translate }}\"\n                  type=\"button\"\n                  [disabled]=\"disabled\"\n                  (click)=\"\n                    $event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\n                  \"\n                >\n                  <i c8yIcon=\"times\"></i>\n                </button>\n                {{ selectedItem.label | translate }}\n              </span>\n            }\n          }\n        </div>\n      }\n    </div>\n\n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      autocomplete=\"off\"\n      #searchControl\n      [ngClass]=\"{\n        'p-absolute': true,\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0\n      }\"\n      [required]=\"required\"\n      (blur)=\"doBlur()\"\n      (focus)=\"doFocus()\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n    />\n\n    <span class=\"input-group-btn\">\n      <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n      @if (canDeselect && selected.length > 0) {\n        <button\n          class=\"btn btn-dot\"\n          title=\"{{ 'Deselect' | translate }}\"\n          type=\"button\"\n          [disabled]=\"disabled\"\n          (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n          data-cy=\"deselect-all-button\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n      }\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"select-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal dropdown-menu--select\"\n    [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"select--dropdown-menu\"\n    *dropdownMenu\n  >\n    <!-- rendering of items (default) -->\n    @for (item of filterItems ? (items | filterBy: searchControl.value) : items; track item) {\n      <c8y-li\n        style=\"cursor: pointer\"\n        [selectable]=\"true\"\n        [dense]=\"true\"\n        [active]=\"!multi && item.value === selected[0]?.value\"\n        (click)=\"select(item)\"\n      >\n        <span [attr.data-search-label]=\"item.label | translate\"></span>\n        @if (multi) {\n          <c8y-li-checkbox\n            [selected]=\"selected.indexOf(item) > -1\"\n            (click)=\"$event.preventDefault()\"\n          ></c8y-li-checkbox>\n        }\n        @if (!item.template) {\n          <c8y-li-body>\n            {{ item.label | translate }}\n          </c8y-li-body>\n        }\n        <ng-container\n          *ngTemplateOutlet=\"item?.template\"\n          ngProjectAs=\"c8y-li-body\"\n        ></ng-container>\n      </c8y-li>\n    }\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: FilterByPipe, name: "filterBy" }] }); }
+        ], queries: [{ propertyName: "projectedSelectedItems", first: true, predicate: SelectedItemsDirective, descendants: true }, { propertyName: "projectedSelectableItems", predicate: SelectItemDirective }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "list", predicate: ListItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"autoClose\"\n  [isDisabled]=\"disabled\"\n  [insideClick]=\"insideClick\"\n  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  dropdownToggle\n  (click)=\"open()\"\n>\n  <div\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\n    <div\n      class=\"form-control text-truncate\"\n      [ngClass]=\"{\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0,\n        'text-truncate': !multi,\n        'inner-scroll d-flex a-i-center': multi\n      }\"\n    >\n      <!-- rendering of selected items (with content projection) -->\n      @if (projectedSelectedItems) {\n        <div class=\"selected-items\">\n          @for (selectedItem of selected; track selectedItem) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                projectedSelectedItems.templateRef;\n                context: { $implicit: selectedItem }\n              \"\n            ></ng-container>\n          }\n        </div>\n        @if (selected.length === 0 && !searchHasFocus && searchControl.value.length === 0) {\n          <i class=\"text-muted\">\n            {{ displayPlaceholder }}\n          </i>\n        }\n      } @else {\n        <div class=\"selected-items\">\n          @if (!multi) {\n            <!-- hidden is needed, otherwise the propagation does not work correctly -->\n            <span [hidden]=\"!searchHasFocus || !preselectedItem || filterItems\">\n              {{ preselectedItem?.label | translate }}\n            </span>\n            <span [hidden]=\"searchHasFocus || selected.length !== 1\">\n              {{ selected[0]?.label | translate }}\n            </span>\n          }\n          @if (selected.length === 0 && !preselectedItem && searchControl.value.length === 0) {\n            <i class=\"text-muted\">\n              {{ displayPlaceholder }}\n            </i>\n          }\n          @if (multi) {\n            <span class=\"m-r-4\">{{ searchControl.value }}</span>\n            @for (selectedItem of selected; track selectedItem) {\n              <span class=\"tag tag--info chip\">\n                <button\n                  class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                  title=\"{{ selectedItem.label | translate }}\"\n                  type=\"button\"\n                  [disabled]=\"disabled\"\n                  (click)=\"\n                    $event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\n                  \"\n                >\n                  <i c8yIcon=\"times\"></i>\n                </button>\n                {{ selectedItem.label | translate }}\n              </span>\n            }\n          }\n        </div>\n      }\n    </div>\n\n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      autocomplete=\"off\"\n      #searchControl\n      [ngClass]=\"{\n        'p-absolute': true,\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0\n      }\"\n      [required]=\"required\"\n      (blur)=\"doBlur()\"\n      (focus)=\"doFocus()\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n    />\n\n    <span class=\"input-group-btn\">\n      <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n      @if (canDeselect && selected.length > 0) {\n        <button\n          class=\"btn btn-dot\"\n          title=\"{{ 'Deselect' | translate }}\"\n          type=\"button\"\n          [disabled]=\"disabled\"\n          (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n          data-cy=\"deselect-all-button\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n      }\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"select-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal dropdown-menu--select\"\n    [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"select--dropdown-menu\"\n    *dropdownMenu\n  >\n    <!-- rendering of items (default) -->\n    @for (item of filterItems ? (items | filterBy: searchControl.value) : items; track item) {\n      <c8y-li\n        style=\"cursor: pointer\"\n        [selectable]=\"true\"\n        [dense]=\"true\"\n        [active]=\"!multi && item.value === selected[0]?.value\"\n        (click)=\"select(item)\"\n      >\n        <span [attr.data-search-label]=\"item.label | translate\"></span>\n        @if (multi) {\n          <c8y-li-checkbox\n            [selected]=\"selected.indexOf(item) > -1\"\n            (click)=\"$event.preventDefault()\"\n          ></c8y-li-checkbox>\n        }\n        @if (!item.template) {\n          <c8y-li-body>\n            {{ item.label | translate }}\n          </c8y-li-body>\n        }\n        <ng-container\n          *ngTemplateOutlet=\"item?.template\"\n          ngProjectAs=\"c8y-li-body\"\n        ></ng-container>\n      </c8y-li>\n    }\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: FilterByPipe, name: "filterBy" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -20534,8 +20558,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         ListItemBodyComponent,
                         C8yTranslatePipe,
                         FilterByPipe
-                    ], template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"autoClose\"\n  [isDisabled]=\"disabled\"\n  [insideClick]=\"insideClick\"\n  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  dropdownToggle\n  (click)=\"open()\"\n>\n  <div\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\n    <div\n      class=\"form-control text-truncate\"\n      [ngClass]=\"{\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0,\n        'text-truncate': !multi,\n        'inner-scroll d-flex a-i-center': multi\n      }\"\n    >\n      <!-- rendering of selected items (with content projection) -->\n      @if (projectedSelectedItems) {\n        <div class=\"selected-items\">\n          @for (selectedItem of selected; track selectedItem) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                projectedSelectedItems.templateRef;\n                context: { $implicit: selectedItem }\n              \"\n            ></ng-container>\n          }\n        </div>\n        @if (selected.length === 0 && !searchHasFocus && searchControl.value.length === 0) {\n          <i class=\"text-muted\">\n            {{ placeholder | translate }}\n          </i>\n        }\n      } @else {\n        <div class=\"selected-items\">\n          @if (!multi) {\n            <!-- hidden is needed, otherwise the propagation does not work correctly -->\n            <span [hidden]=\"!searchHasFocus || !preselectedItem || filterItems\">\n              {{ preselectedItem?.label | translate }}\n            </span>\n            <span [hidden]=\"searchHasFocus || selected.length !== 1\">\n              {{ selected[0]?.label | translate }}\n            </span>\n          }\n          @if (selected.length === 0 && !preselectedItem && searchControl.value.length === 0) {\n            <i class=\"text-muted\">\n              {{ placeholder | translate }}\n            </i>\n          }\n          @if (multi) {\n            <span class=\"m-r-4\">{{ searchControl.value }}</span>\n            @for (selectedItem of selected; track selectedItem) {\n              <span class=\"tag tag--info chip\">\n                <button\n                  class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                  title=\"{{ selectedItem.label | translate }}\"\n                  type=\"button\"\n                  [disabled]=\"disabled\"\n                  (click)=\"\n                    $event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\n                  \"\n                >\n                  <i c8yIcon=\"times\"></i>\n                </button>\n                {{ selectedItem.label | translate }}\n              </span>\n            }\n          }\n        </div>\n      }\n    </div>\n\n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      autocomplete=\"off\"\n      #searchControl\n      [ngClass]=\"{\n        'p-absolute': true,\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0\n      }\"\n      [required]=\"required\"\n      (blur)=\"doBlur()\"\n      (focus)=\"doFocus()\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n    />\n\n    <span class=\"input-group-btn\">\n      <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n      @if (canDeselect && selected.length > 0) {\n        <button\n          class=\"btn btn-dot\"\n          title=\"{{ 'Deselect' | translate }}\"\n          type=\"button\"\n          [disabled]=\"disabled\"\n          (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n          data-cy=\"deselect-all-button\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n      }\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"select-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal dropdown-menu--select\"\n    [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"select--dropdown-menu\"\n    *dropdownMenu\n  >\n    <!-- rendering of items (default) -->\n    @for (item of filterItems ? (items | filterBy: searchControl.value) : items; track item) {\n      <c8y-li\n        style=\"cursor: pointer\"\n        [selectable]=\"true\"\n        [dense]=\"true\"\n        [active]=\"!multi && item.value === selected[0]?.value\"\n        (click)=\"select(item)\"\n      >\n        <span [attr.data-search-label]=\"item.label | translate\"></span>\n        @if (multi) {\n          <c8y-li-checkbox\n            [selected]=\"selected.indexOf(item) > -1\"\n            (click)=\"$event.preventDefault()\"\n          ></c8y-li-checkbox>\n        }\n        @if (!item.template) {\n          <c8y-li-body>\n            {{ item.label | translate }}\n          </c8y-li-body>\n        }\n        <ng-container\n          *ngTemplateOutlet=\"item?.template\"\n          ngProjectAs=\"c8y-li-body\"\n        ></ng-container>\n      </c8y-li>\n    }\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: SelectKeyboardService }], propDecorators: { placeholder: [{
+                    ], template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"autoClose\"\n  [isDisabled]=\"disabled\"\n  [insideClick]=\"insideClick\"\n  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  dropdownToggle\n  (click)=\"open()\"\n>\n  <div\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\n    <div\n      class=\"form-control text-truncate\"\n      [ngClass]=\"{\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0,\n        'text-truncate': !multi,\n        'inner-scroll d-flex a-i-center': multi\n      }\"\n    >\n      <!-- rendering of selected items (with content projection) -->\n      @if (projectedSelectedItems) {\n        <div class=\"selected-items\">\n          @for (selectedItem of selected; track selectedItem) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                projectedSelectedItems.templateRef;\n                context: { $implicit: selectedItem }\n              \"\n            ></ng-container>\n          }\n        </div>\n        @if (selected.length === 0 && !searchHasFocus && searchControl.value.length === 0) {\n          <i class=\"text-muted\">\n            {{ displayPlaceholder }}\n          </i>\n        }\n      } @else {\n        <div class=\"selected-items\">\n          @if (!multi) {\n            <!-- hidden is needed, otherwise the propagation does not work correctly -->\n            <span [hidden]=\"!searchHasFocus || !preselectedItem || filterItems\">\n              {{ preselectedItem?.label | translate }}\n            </span>\n            <span [hidden]=\"searchHasFocus || selected.length !== 1\">\n              {{ selected[0]?.label | translate }}\n            </span>\n          }\n          @if (selected.length === 0 && !preselectedItem && searchControl.value.length === 0) {\n            <i class=\"text-muted\">\n              {{ displayPlaceholder }}\n            </i>\n          }\n          @if (multi) {\n            <span class=\"m-r-4\">{{ searchControl.value }}</span>\n            @for (selectedItem of selected; track selectedItem) {\n              <span class=\"tag tag--info chip\">\n                <button\n                  class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                  title=\"{{ selectedItem.label | translate }}\"\n                  type=\"button\"\n                  [disabled]=\"disabled\"\n                  (click)=\"\n                    $event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\n                  \"\n                >\n                  <i c8yIcon=\"times\"></i>\n                </button>\n                {{ selectedItem.label | translate }}\n              </span>\n            }\n          }\n        </div>\n      }\n    </div>\n\n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      autocomplete=\"off\"\n      #searchControl\n      [ngClass]=\"{\n        'p-absolute': true,\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0\n      }\"\n      [required]=\"required\"\n      (blur)=\"doBlur()\"\n      (focus)=\"doFocus()\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n    />\n\n    <span class=\"input-group-btn\">\n      <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n      @if (canDeselect && selected.length > 0) {\n        <button\n          class=\"btn btn-dot\"\n          title=\"{{ 'Deselect' | translate }}\"\n          type=\"button\"\n          [disabled]=\"disabled\"\n          (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n          data-cy=\"deselect-all-button\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n      }\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"select-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal dropdown-menu--select\"\n    [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"select--dropdown-menu\"\n    *dropdownMenu\n  >\n    <!-- rendering of items (default) -->\n    @for (item of filterItems ? (items | filterBy: searchControl.value) : items; track item) {\n      <c8y-li\n        style=\"cursor: pointer\"\n        [selectable]=\"true\"\n        [dense]=\"true\"\n        [active]=\"!multi && item.value === selected[0]?.value\"\n        (click)=\"select(item)\"\n      >\n        <span [attr.data-search-label]=\"item.label | translate\"></span>\n        @if (multi) {\n          <c8y-li-checkbox\n            [selected]=\"selected.indexOf(item) > -1\"\n            (click)=\"$event.preventDefault()\"\n          ></c8y-li-checkbox>\n        }\n        @if (!item.template) {\n          <c8y-li-body>\n            {{ item.label | translate }}\n          </c8y-li-body>\n        }\n        <ng-container\n          *ngTemplateOutlet=\"item?.template\"\n          ngProjectAs=\"c8y-li-body\"\n        ></ng-container>\n      </c8y-li>\n    }\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: SelectKeyboardService }, { type: i1$1.TranslateService }], propDecorators: { placeholder: [{
                 type: Input
             }], items: [{
                 type: Input
@@ -28020,14 +28044,14 @@ class FieldTextArea extends FieldType {
                 cols: 68
             }
         };
+        this.translate = inject(TranslateService$1);
     }
     ngOnInit() {
         const { required, placeholder } = this.props;
-        if (required) {
-            this.props.placeholder =
-                placeholder.length > 0
-                    ? placeholder.concat(' ').concat(gettext$1('(required)'))
-                    : gettext$1('(required)');
+        if (placeholder || required) {
+            const placeholderText = placeholder ? this.translate.instant(placeholder) : '';
+            const requiredText = required ? this.translate.instant(gettext$1('(required)')) : '';
+            this.props.placeholder = `${placeholderText} ${requiredText}`.trim();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FieldTextArea, deps: null, target: i0.ɵɵFactoryTarget.Component }); }