@fundamental-ngx/core 0.59.1-rc.21 → 0.59.1-rc.23

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.
Files changed (7) hide show
  1. package/fesm2022/fundamental-ngx-core-layout-panel.mjs +72 -231
  2. package/fesm2022/fundamental-ngx-core-layout-panel.mjs.map +1 -1
  3. package/fesm2022/fundamental-ngx-core-status-indicator.mjs +137 -131
  4. package/fesm2022/fundamental-ngx-core-status-indicator.mjs.map +1 -1
  5. package/package.json +3 -3
  6. package/types/fundamental-ngx-core-layout-panel.d.ts +19 -131
  7. package/types/fundamental-ngx-core-status-indicator.d.ts +40 -56
package/fesm2022/fundamental-ngx-core-status-indicator.mjs CHANGED
@@ -1,9 +1,8 @@
1
- import { __decorate, __metadata } from 'tslib';
2
1
  import { NgTemplateOutlet } from '@angular/common';
3
2
  import * as i0 from '@angular/core';
4
- import { Input, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
5
- import { applyCssClass } from '@fundamental-ngx/cdk/utils';
3
+ import { input, booleanAttribute, inject, ElementRef, signal, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
6
4
 
5
+ let statusIndicatorId = 0;
7
6
  class Point {
8
7
  /** @hidden */
9
8
  constructor(x, y) {
@@ -12,113 +11,163 @@ class Point {
12
11
  }
13
12
  }
14
13
  class StatusIndicatorComponent {
15
- /** @hidden */
16
- set _fillDirection(direction) {
17
- this.fillDirection = direction;
18
- }
19
- get _fillDirection() {
20
- return this.fillDirection;
21
- }
22
- /** @hidden */
23
- constructor(elementRef, _cd) {
24
- this.elementRef = elementRef;
25
- this._cd = _cd;
14
+ constructor() {
15
+ /**
16
+ * value id defines the id of the object.
17
+ */
18
+ this.id = input('fd-status-indicator-' + ++statusIndicatorId, ...(ngDevMode ? [{ debugName: "id" }] : []));
26
19
  /**
27
20
  * defines the size of the status indicator.
28
21
  * Can be one of the following: 'sm' | 'md' | 'lg' | 'xl'
29
22
  * Default size is Medium(md).
30
23
  */
31
- this.size = 'md';
24
+ this.size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
25
+ /**
26
+ * The status represented by the Status Indicator.
27
+ * Can be one of the following: 'negative' | 'critical' | 'informative'
28
+ * For default Object Status omit this property
29
+ */
30
+ this.status = input(...(ngDevMode ? [undefined, { debugName: "status" }] : []));
31
+ /** Define the text content of the Status indicator*/
32
+ this.statusLabel = input(...(ngDevMode ? [undefined, { debugName: "statusLabel" }] : []));
33
+ /**
34
+ * positioning of the status indicator image within the defined height and width .
35
+ */
36
+ this.viewBox = input(...(ngDevMode ? [undefined, { debugName: "viewBox" }] : []));
37
+ /**
38
+ * boolean value to be marked as clickable
39
+ */
40
+ this.clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
32
41
  /**
33
42
  * defines the size of the status indicator.
34
43
  * Can be one of the following: 'sm' | 'md' | 'lg' | 'xl'
35
44
  */
36
- this.labelSize = 'sm';
45
+ this.labelSize = input('sm', ...(ngDevMode ? [{ debugName: "labelSize" }] : []));
46
+ /** Aria label for the Status Indicator. */
47
+ this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
48
+ /** Aria defines role description for the Status Indicator. */
49
+ this.ariaRoleDescription = input(...(ngDevMode ? [undefined, { debugName: "ariaRoleDescription" }] : []));
50
+ /** Aria Focusable for the Status Indicator. */
51
+ this.focusable = input(false, { ...(ngDevMode ? { debugName: "focusable" } : {}), transform: booleanAttribute });
52
+ /** Aria Role for the Status Indicator. */
53
+ this.role = input(...(ngDevMode ? [undefined, { debugName: "role" }] : []));
54
+ /** Aria Value Text for the Status Indicator. */
55
+ this.ariaValueText = input(...(ngDevMode ? [undefined, { debugName: "ariaValueText" }] : []));
56
+ /** Aria title for the status indicator. */
57
+ this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
58
+ /** defines the label position the value can be 'left' | 'right' | 'top' | 'bottom' */
59
+ this.labelPosition = input(...(ngDevMode ? [undefined, { debugName: "labelPosition" }] : []));
60
+ /** Path for the status indicator */
61
+ this.path = input(...(ngDevMode ? [undefined, { debugName: "path" }] : []));
62
+ /**
63
+ * Offset value to be filled under the give percentatge value.
64
+ */
65
+ this.fillPercentage = input(...(ngDevMode ? [undefined, { debugName: "fillPercentage" }] : []));
37
66
  /**
38
67
  * value to define fill direction
39
68
  */
40
- this.fillDirection = 'clockwise';
69
+ this.fillDirection = input('clockwise', ...(ngDevMode ? [{ debugName: "fillDirection" }] : []));
41
70
  /**
42
71
  * FillingType to represent the fill pattern of the component
43
72
  */
44
- this.fillingType = 'lineardown';
73
+ this.fillingType = input('lineardown', ...(ngDevMode ? [{ debugName: "fillingType" }] : []));
74
+ /** represent the degree of angle to project the filling of the component */
75
+ this.angle = input(...(ngDevMode ? [undefined, { debugName: "angle" }] : []));
45
76
  /** @hidden */
46
- this.pointsArray = [];
47
- }
48
- /** @hidden
49
- * CssClassBuilder interface implementation
50
- * function must return single string
51
- * function is responsible for order which css classes are applied
52
- */
53
- buildComponentCssClass() {
54
- return [
77
+ this.elementRef = inject((ElementRef));
78
+ /** @hidden */
79
+ this.binaryString = signal('', ...(ngDevMode ? [{ debugName: "binaryString" }] : []));
80
+ /** @hidden */
81
+ this.x1 = signal('', ...(ngDevMode ? [{ debugName: "x1" }] : []));
82
+ /** @hidden */
83
+ this.y1 = signal('', ...(ngDevMode ? [{ debugName: "y1" }] : []));
84
+ /** @hidden */
85
+ this.x2 = signal('', ...(ngDevMode ? [{ debugName: "x2" }] : []));
86
+ /** @hidden */
87
+ this.y2 = signal('', ...(ngDevMode ? [{ debugName: "y2" }] : []));
88
+ /** @hidden */
89
+ this.pointsArray = signal([], ...(ngDevMode ? [{ debugName: "pointsArray" }] : []));
90
+ /** @hidden Computed fill calculator based on percentage and path length */
91
+ this.fillCalculator = computed(() => {
92
+ const percentage = this.fillPercentage();
93
+ const pathLength = this.path()?.length || 0;
94
+ if (percentage === undefined || percentage < 0) {
95
+ return 0;
96
+ }
97
+ return (percentage * pathLength) / 100;
98
+ }, ...(ngDevMode ? [{ debugName: "fillCalculator" }] : []));
99
+ /** @hidden Computed CSS class */
100
+ this._cssClass = computed(() => [
55
101
  'fd-status-indicator',
56
- this.size ? `fd-status-indicator--${this.size}` : '',
57
- this.status ? `fd-status-indicator--${this.status}` : '',
58
- this.clickable ? `fd-status-indicator--link` : '',
59
- this.labelPosition === 'right' || this.labelPosition === 'left'
60
- ? `fd-status-indicator--horizontal-label`
61
- : '',
62
- this.class
63
- ];
102
+ this.size() ? `fd-status-indicator--${this.size()}` : '',
103
+ this.status() ? `fd-status-indicator--${this.status()}` : '',
104
+ this.clickable() ? 'fd-status-indicator--link' : '',
105
+ this.labelPosition() === 'right' || this.labelPosition() === 'left'
106
+ ? 'fd-status-indicator--horizontal-label'
107
+ : ''
108
+ ]
109
+ .filter(Boolean)
110
+ .join(' '), ...(ngDevMode ? [{ debugName: "_cssClass" }] : []));
111
+ this.labelCssClass = computed(() => [
112
+ 'fd-status-indicator__label',
113
+ this.labelSize() ? `fd-status-indicator__label--${this.labelSize()}` : '',
114
+ this.labelPosition() ? `fd-status-indicator__label--${this.labelPosition()}` : ''
115
+ ]
116
+ .filter(Boolean)
117
+ .join(' '), ...(ngDevMode ? [{ debugName: "labelCssClass" }] : []));
64
118
  }
65
119
  /** @hidden */
66
120
  ngAfterViewInit() {
67
121
  this._angleCalculation();
68
- this._cd.detectChanges();
69
- }
70
- /** @hidden */
71
- ngOnChanges() {
72
- this._calculateFilling();
73
- this.buildComponentCssClass();
74
- }
75
- /** @hidden */
76
- ngOnInit() {
77
- this.buildComponentCssClass();
78
- }
79
- /** @hidden */
80
- _calculateFilling() {
81
- if (this.fillPercentage < 0 || this.fillPercentage === undefined) {
82
- this.fillCalculator = 0;
83
- }
84
- else {
85
- this.fillCalculator = (this.fillPercentage * this.path.length) / 100;
86
- }
87
122
  }
88
123
  /** @hidden */
89
124
  _angleCalculation() {
90
125
  let sPointsAttributeValue;
91
126
  let polygonPoints;
92
- switch (this.fillingType) {
93
- case 'angled':
94
- this.binaryString = this._convertAngleToBinary(this.angle);
95
- this._assignBinaryValue(this.binaryString);
127
+ const fillType = this.fillingType();
128
+ switch (fillType) {
129
+ case 'angled': {
130
+ const angleValue = this.angle();
131
+ if (angleValue !== undefined) {
132
+ const binaryStr = this._convertAngleToBinary(angleValue);
133
+ this.binaryString.set(binaryStr);
134
+ this._assignBinaryValue(binaryStr);
135
+ }
96
136
  break;
137
+ }
97
138
  case 'radial': {
98
- const tempPercent = this.fillCalculator % 1;
139
+ const tempPercent = this.fillCalculator() % 1;
99
140
  const fillNumber = Number(tempPercent.toFixed(2));
100
141
  const element = this.elementRef.nativeElement.querySelectorAll('svg');
142
+ const points = [];
101
143
  for (let i = 1; i < element.length; i++) {
102
144
  sPointsAttributeValue = this._getPolygonPointsForCircularFilling(fillNumber * 100, element[i].getBBox());
103
145
  polygonPoints = sPointsAttributeValue.reduce((acc, item) => acc + item.x + ',' + item.y + ' ', '');
104
- this.pointsArray.push(polygonPoints);
146
+ points.push(polygonPoints);
105
147
  }
148
+ this.pointsArray.set(points);
106
149
  break;
107
150
  }
108
- case 'linearup':
109
- this.binaryString = this._convertAngleToBinary(90);
110
- this._assignBinaryValue(this.binaryString);
151
+ case 'linearup': {
152
+ const binaryStr = this._convertAngleToBinary(90);
153
+ this.binaryString.set(binaryStr);
154
+ this._assignBinaryValue(binaryStr);
111
155
  break;
112
- case 'lineardown':
113
- this.binaryString = this._convertAngleToBinary(270);
114
- this._assignBinaryValue(this.binaryString);
156
+ }
157
+ case 'lineardown': {
158
+ const binaryStr = this._convertAngleToBinary(270);
159
+ this.binaryString.set(binaryStr);
160
+ this._assignBinaryValue(binaryStr);
115
161
  break;
116
- case 'linearleft':
117
- this.binaryString = this._convertAngleToBinary(180);
118
- this._assignBinaryValue(this.binaryString);
162
+ }
163
+ case 'linearleft': {
164
+ const binaryStr = this._convertAngleToBinary(180);
165
+ this.binaryString.set(binaryStr);
166
+ this._assignBinaryValue(binaryStr);
119
167
  break;
168
+ }
120
169
  default:
121
- throw new Error(`fdStatusIndicator: No fillType found for ${this.fillingType}.`);
170
+ throw new Error(`fdStatusIndicator: No fillType found for ${fillType}.`);
122
171
  }
123
172
  }
124
173
  /** @hidden */
@@ -157,10 +206,10 @@ class StatusIndicatorComponent {
157
206
  /** @hidden */
158
207
  _assignBinaryValue(binaryString) {
159
208
  const binaryValue = binaryString.split(',');
160
- this.x1 = binaryValue[0];
161
- this.y1 = binaryValue[1];
162
- this.x2 = binaryValue[2];
163
- this.y2 = binaryValue[3];
209
+ this.x1.set(binaryValue[0]);
210
+ this.y1.set(binaryValue[1]);
211
+ this.x2.set(binaryValue[2]);
212
+ this.y2.set(binaryValue[3]);
164
213
  }
165
214
  /** @hidden */
166
215
  _getPolygonPointsForCircularFilling(value, boundingBoxSvg) {
@@ -176,7 +225,7 @@ class StatusIndicatorComponent {
176
225
  // Reflects x coordinate by centre point for Counter Clockwise type
177
226
  const _adjustIfCounterClockwise = (oPoint) => {
178
227
  const res = Object.assign({}, oPoint);
179
- if (this._fillDirection === 'counterclockwise') {
228
+ if (this.fillDirection() === 'counterclockwise') {
180
229
  const iXDistanceFromCentre = oPoint.x - oCentrePoint.x;
181
230
  res.x = oCentrePoint.x - iXDistanceFromCentre;
182
231
  }
@@ -230,68 +279,25 @@ class StatusIndicatorComponent {
230
279
  points.push(oCentrePoint);
231
280
  return points;
232
281
  }
233
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StatusIndicatorComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
234
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: StatusIndicatorComponent, isStandalone: true, selector: "fd-status-indicator", inputs: { id: "id", size: "size", status: "status", statusLabel: "statusLabel", viewBox: "viewBox", clickable: "clickable", labelSize: "labelSize", ariaLabel: "ariaLabel", ariaRoleDescription: "ariaRoleDescription", focusable: "focusable", role: "role", ariaValueText: "ariaValueText", title: "title", labelPosition: "labelPosition", path: "path", fillPercentage: "fillPercentage", fillDirection: "fillDirection", fillingType: "fillingType", angle: "angle" }, host: { properties: { "attr.aria-label": "ariaLabel", "attr.aria-roledescription": "ariaRoleDescription", "attr.focusable": "focusable", "attr.title": "title", "attr.role": "role", "attr.aria-valuetext": "ariaValueText", "attr.aria-valuenow": "fillPercentage ? fillPercentage : 0", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.tabindex": "focusable ? 0 : -1" } }, usesOnChanges: true, ngImport: i0, template: "@if (labelPosition === 'left' || labelPosition === 'top') {\n <span\n [class.fd-status-indicator__label--sm]=\"labelSize === 'sm'\"\n [class.fd-status-indicator__label--md]=\"labelSize === 'md'\"\n [class.fd-status-indicator__label--lg]=\"labelSize === 'lg'\"\n [class.fd-status-indicator__label--xl]=\"labelSize === 'xl'\"\n [class.fd-status-indicator__label--top]=\"labelPosition === 'top'\"\n [class.fd-status-indicator__label--left]=\"labelPosition === 'left'\"\n class=\"fd-status-indicator__label\"\n >{{ statusLabel }}\n </span>\n}\n<svg\n [attr.id]=\"id\"\n data-sap-ui=\"__shape0-__box21-24\"\n version=\"1.1\"\n [attr.viewBox]=\"viewBox\"\n xlmns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid meet\"\n class=\"fd-status-indicator__svg\"\n>\n <ng-container [ngTemplateOutlet]=\"svgTemplate\"></ng-container>\n</svg>\n@if (labelPosition === 'right' || labelPosition === 'bottom') {\n <span\n [class.fd-status-indicator__label--sm]=\"labelSize === 'sm'\"\n [class.fd-status-indicator__label--md]=\"labelSize === 'md'\"\n [class.fd-status-indicator__label--lg]=\"labelSize === 'lg'\"\n [class.fd-status-indicator__label--xl]=\"labelSize === 'xl'\"\n [class.fd-status-indicator__label--right]=\"labelPosition === 'right'\"\n [class.fd-status-indicator__label--bottom]=\"labelPosition === 'bottom'\"\n class=\"fd-status-indicator__label\"\n >{{ statusLabel }}\n </span>\n}\n<ng-template #svgTemplate>\n @for (path of path; track path; let i = $index) {\n <svg\n xlmns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid meet\"\n overflow=\"visible\"\n [attr.id]=\"id + i\"\n data-sap-ui=\"id\"\n >\n <defs>\n @if (!(fillCalculator - i > 0 && fillCalculator - i < 1) || fillingType !== 'radial') {\n <linearGradient\n id=\"{{ id + i }}-gradient\"\n [attr.x1]=\"x1\"\n [attr.y1]=\"y1\"\n [attr.x2]=\"x2\"\n [attr.y2]=\"y2\"\n >\n <stop [attr.offset]=\"fillCalculator - i\" stop-color=\"white\">\n <animate\n attributeName=\"offset\"\n attr.values=\"0, {{ fillCalculator - i }}\"\n repeatCount=\"1\"\n dur=\"1s\"\n begin=\"0s\"\n />\n </stop>\n <stop [attr.offset]=\"fillCalculator - i\" stop-color=\"transparent\">\n <animate\n attributeName=\"offset\"\n attr.values=\"0, {{ fillCalculator - i }}\"\n repeatCount=\"1\"\n dur=\"1s\"\n begin=\"0s\"\n />\n </stop>\n </linearGradient>\n }\n <mask #maskTemplate id=\"{{ id + i }}-mask\">\n @if (!(fillCalculator - i > 0 && fillCalculator - i < 1) || fillingType !== 'radial') {\n <path\n id=\"{{ id + i }}-mask-shape\"\n [attr.d]=\"path\"\n stroke-width=\"0\"\n stroke=\"white\"\n attr.fill=\"url(#{{ id + i }}-gradient)\"\n ></path>\n }\n @if (fillingType === 'radial' && fillCalculator - i > 0 && fillCalculator - i < 1) {\n <polygon id=\"{{ id + i }}-mask-shape\" fill=\"white\" [attr.points]=\"pointsArray[i]\"></polygon>\n }\n </mask>\n </defs>\n <path\n id=\"{{ id + i }}-shape\"\n [attr.d]=\"path\"\n stroke-width=\"0\"\n stroke=\"#89919A\"\n attr.mask=\"url(#{{ id + i }}-mask)\"\n ></path>\n <path\n id=\"{{ id + i }}-shape-border\"\n [attr.d]=\"path\"\n stroke-width=\"0.25\"\n stroke=\"#89919A\"\n fill=\"transparent\"\n ></path>\n </svg>\n }\n</ng-template>\n", styles: [".fd-status-indicator{color:var(--sapContent_LabelColor);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;stroke:var(--sapNeutralElementColor);stroke-width:.25;fill:transparent;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-status-indicator.is-focus,.fd-status-indicator:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--sapContent_FocusWidth);z-index:5}.fd-status-indicator:after,.fd-status-indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-status-indicator--horizontal-label{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.fd-status-indicator--horizontal-label:after,.fd-status-indicator--horizontal-label:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-status-indicator--link{cursor:pointer}.fd-status-indicator__label,.fd-status-indicator__label--sm{font-size:var(--sapFontSmallSize,.75rem)}.fd-status-indicator__label--sm.fd-status-indicator__label--top{-webkit-margin-after:.375rem;margin-block-end:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--right{-webkit-margin-start:.375rem;margin-inline-start:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--sm.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--sm.fd-status-indicator__label--left{-webkit-margin-end:.375rem;margin-inline-end:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--sm.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--sm.fd-status-indicator__label--bottom{margin-top:.375rem}.fd-status-indicator__label--md{font-size:var(--sapFontSize,.875rem)}.fd-status-indicator__label--md.fd-status-indicator__label--top{-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--right{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--md.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--md.fd-status-indicator__label--left{-webkit-margin-end:.5rem;margin-inline-end:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--md.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--md.fd-status-indicator__label--bottom{margin-top:.5rem}.fd-status-indicator__label--lg{font-size:1.125rem}.fd-status-indicator__label--lg.fd-status-indicator__label--top{-webkit-margin-after:.75rem;margin-block-end:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--right{-webkit-margin-start:.75rem;margin-inline-start:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--lg.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--lg.fd-status-indicator__label--left{-webkit-margin-end:.75rem;margin-inline-end:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--lg.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--lg.fd-status-indicator__label--bottom{margin-top:.75rem}.fd-status-indicator__label--xl{font-size:1.875rem}.fd-status-indicator__label--xl.fd-status-indicator__label--top{-webkit-margin-after:1rem;margin-block-end:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--right{-webkit-margin-start:1rem;margin-inline-start:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--xl.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--xl.fd-status-indicator__label--left{-webkit-margin-end:1rem;margin-inline-end:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--xl.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--xl.fd-status-indicator__label--bottom{margin-top:1rem}.fd-status-indicator--positive{fill:var(--sapPositiveElementColor);color:var(--sapPositiveElementColor)}.fd-status-indicator--critical{fill:var(--sapCriticalElementColor);color:var(--sapCriticalElementColor)}.fd-status-indicator--negative{fill:var(--sapNegativeElementColor);color:var(--sapNegativeElementColor)}.fd-status-indicator--sm .fd-status-indicator__svg{height:1.375rem;width:1.875rem}.fd-status-indicator--md .fd-status-indicator__svg{height:1.875rem;width:2.8125rem}.fd-status-indicator--lg .fd-status-indicator__svg{height:3.4375rem;width:5rem}.fd-status-indicator--xl .fd-status-indicator__svg{height:6.25rem;width:9.0625rem}\n/*! Bundled license information:\n\nfundamental-styles/dist/status-indicator.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
282
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StatusIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
283
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: StatusIndicatorComponent, isStandalone: true, selector: "fd-status-indicator", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusLabel: { classPropertyName: "statusLabel", publicName: "statusLabel", isSignal: true, isRequired: false, transformFunction: null }, viewBox: { classPropertyName: "viewBox", publicName: "viewBox", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, labelSize: { classPropertyName: "labelSize", publicName: "labelSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaRoleDescription: { classPropertyName: "ariaRoleDescription", publicName: "ariaRoleDescription", isSignal: true, isRequired: false, transformFunction: null }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaValueText: { classPropertyName: "ariaValueText", publicName: "ariaValueText", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, fillPercentage: { classPropertyName: "fillPercentage", publicName: "fillPercentage", isSignal: true, isRequired: false, transformFunction: null }, fillDirection: { classPropertyName: "fillDirection", publicName: "fillDirection", isSignal: true, isRequired: false, transformFunction: null }, fillingType: { classPropertyName: "fillingType", publicName: "fillingType", isSignal: true, isRequired: false, transformFunction: null }, angle: { classPropertyName: "angle", publicName: "angle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_cssClass()", "attr.aria-label": "ariaLabel()", "attr.aria-roledescription": "ariaRoleDescription()", "attr.focusable": "focusable()", "attr.title": "title()", "attr.role": "role()", "attr.aria-valuetext": "ariaValueText()", "attr.aria-valuenow": "fillPercentage() || 0", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.tabindex": "focusable() ? 0 : -1" } }, ngImport: i0, template: "@if (labelPosition() === 'left' || labelPosition() === 'top') {\n <span [class]=\"labelCssClass()\">{{ statusLabel() }} </span>\n}\n<svg\n [attr.id]=\"id()\"\n data-sap-ui=\"__shape0-__box21-24\"\n version=\"1.1\"\n [attr.viewBox]=\"viewBox()\"\n xlmns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid meet\"\n class=\"fd-status-indicator__svg\"\n>\n <ng-container [ngTemplateOutlet]=\"svgTemplate\"></ng-container>\n</svg>\n@if (labelPosition() === 'right' || labelPosition() === 'bottom') {\n <span [class]=\"labelCssClass()\">{{ statusLabel() }} </span>\n}\n<ng-template #svgTemplate>\n @for (path of path(); track path; let i = $index) {\n <svg\n xlmns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid meet\"\n overflow=\"visible\"\n [attr.id]=\"id() + i\"\n data-sap-ui=\"id\"\n >\n <defs>\n @if (!(fillCalculator() - i > 0 && fillCalculator() - i < 1) || fillingType() !== 'radial') {\n <linearGradient\n id=\"{{ id() + i }}-gradient\"\n [attr.x1]=\"x1()\"\n [attr.y1]=\"y1()\"\n [attr.x2]=\"x2()\"\n [attr.y2]=\"y2()\"\n >\n <stop [attr.offset]=\"fillCalculator() - i\" stop-color=\"white\">\n <animate\n attributeName=\"offset\"\n attr.values=\"0, {{ fillCalculator() - i }}\"\n repeatCount=\"1\"\n dur=\"1s\"\n begin=\"0s\"\n />\n </stop>\n <stop [attr.offset]=\"fillCalculator() - i\" stop-color=\"transparent\">\n <animate\n attributeName=\"offset\"\n attr.values=\"0, {{ fillCalculator() - i }}\"\n repeatCount=\"1\"\n dur=\"1s\"\n begin=\"0s\"\n />\n </stop>\n </linearGradient>\n }\n <mask #maskTemplate id=\"{{ id() + i }}-mask\">\n @if (!(fillCalculator() - i > 0 && fillCalculator() - i < 1) || fillingType() !== 'radial') {\n <path\n id=\"{{ id() + i }}-mask-shape\"\n [attr.d]=\"path\"\n stroke-width=\"0\"\n stroke=\"white\"\n attr.fill=\"url(#{{ id() + i }}-gradient)\"\n ></path>\n }\n @if (fillingType() === 'radial' && fillCalculator() - i > 0 && fillCalculator() - i < 1) {\n <polygon id=\"{{ id() + i }}-mask-shape\" fill=\"white\" [attr.points]=\"pointsArray()[i]\"></polygon>\n }\n </mask>\n </defs>\n <path\n id=\"{{ id() + i }}-shape\"\n [attr.d]=\"path\"\n stroke-width=\"0\"\n stroke=\"#89919A\"\n attr.mask=\"url(#{{ id() + i }}-mask)\"\n ></path>\n <path\n id=\"{{ id() + i }}-shape-border\"\n [attr.d]=\"path\"\n stroke-width=\"0.25\"\n stroke=\"#89919A\"\n fill=\"transparent\"\n ></path>\n </svg>\n }\n</ng-template>\n", styles: [".fd-status-indicator{color:var(--sapContent_LabelColor);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;stroke:var(--sapNeutralElementColor);stroke-width:.25;fill:transparent;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-status-indicator.is-focus,.fd-status-indicator:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--sapContent_FocusWidth);z-index:5}.fd-status-indicator:after,.fd-status-indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-status-indicator--horizontal-label{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.fd-status-indicator--horizontal-label:after,.fd-status-indicator--horizontal-label:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-status-indicator--link{cursor:pointer}.fd-status-indicator__label,.fd-status-indicator__label--sm{font-size:var(--sapFontSmallSize,.75rem)}.fd-status-indicator__label--sm.fd-status-indicator__label--top{-webkit-margin-after:.375rem;margin-block-end:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--right{-webkit-margin-start:.375rem;margin-inline-start:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--sm.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--sm.fd-status-indicator__label--left{-webkit-margin-end:.375rem;margin-inline-end:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--sm.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--sm.fd-status-indicator__label--bottom{margin-top:.375rem}.fd-status-indicator__label--md{font-size:var(--sapFontSize,.875rem)}.fd-status-indicator__label--md.fd-status-indicator__label--top{-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--right{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--md.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--md.fd-status-indicator__label--left{-webkit-margin-end:.5rem;margin-inline-end:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--md.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--md.fd-status-indicator__label--bottom{margin-top:.5rem}.fd-status-indicator__label--lg{font-size:1.125rem}.fd-status-indicator__label--lg.fd-status-indicator__label--top{-webkit-margin-after:.75rem;margin-block-end:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--right{-webkit-margin-start:.75rem;margin-inline-start:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--lg.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--lg.fd-status-indicator__label--left{-webkit-margin-end:.75rem;margin-inline-end:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--lg.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--lg.fd-status-indicator__label--bottom{margin-top:.75rem}.fd-status-indicator__label--xl{font-size:1.875rem}.fd-status-indicator__label--xl.fd-status-indicator__label--top{-webkit-margin-after:1rem;margin-block-end:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--right{-webkit-margin-start:1rem;margin-inline-start:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--xl.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--xl.fd-status-indicator__label--left{-webkit-margin-end:1rem;margin-inline-end:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--xl.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--xl.fd-status-indicator__label--bottom{margin-top:1rem}.fd-status-indicator--positive{fill:var(--sapPositiveElementColor);color:var(--sapPositiveElementColor)}.fd-status-indicator--critical{fill:var(--sapCriticalElementColor);color:var(--sapCriticalElementColor)}.fd-status-indicator--negative{fill:var(--sapNegativeElementColor);color:var(--sapNegativeElementColor)}.fd-status-indicator--sm .fd-status-indicator__svg{height:1.375rem;width:1.875rem}.fd-status-indicator--md .fd-status-indicator__svg{height:1.875rem;width:2.8125rem}.fd-status-indicator--lg .fd-status-indicator__svg{height:3.4375rem;width:5rem}.fd-status-indicator--xl .fd-status-indicator__svg{height:6.25rem;width:9.0625rem}\n/*! Bundled license information:\n\nfundamental-styles/dist/status-indicator.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
235
284
  }
236
- __decorate([
237
- applyCssClass,
238
- __metadata("design:type", Function),
239
- __metadata("design:paramtypes", []),
240
- __metadata("design:returntype", Array)
241
- ], StatusIndicatorComponent.prototype, "buildComponentCssClass", null);
242
285
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StatusIndicatorComponent, decorators: [{
243
286
  type: Component,
244
287
  args: [{ selector: 'fd-status-indicator', host: {
245
- '[attr.aria-label]': 'ariaLabel',
246
- '[attr.aria-roledescription]': 'ariaRoleDescription',
247
- '[attr.focusable]': 'focusable',
248
- '[attr.title]': 'title',
249
- '[attr.role]': 'role',
250
- '[attr.aria-valuetext]': 'ariaValueText',
251
- '[attr.aria-valuenow]': 'fillPercentage ? fillPercentage : 0',
288
+ '[class]': '_cssClass()',
289
+ '[attr.aria-label]': 'ariaLabel()',
290
+ '[attr.aria-roledescription]': 'ariaRoleDescription()',
291
+ '[attr.focusable]': 'focusable()',
292
+ '[attr.title]': 'title()',
293
+ '[attr.role]': 'role()',
294
+ '[attr.aria-valuetext]': 'ariaValueText()',
295
+ '[attr.aria-valuenow]': 'fillPercentage() || 0',
252
296
  '[attr.aria-valuemin]': '0',
253
297
  '[attr.aria-valuemax]': '100',
254
- '[attr.tabindex]': 'focusable ? 0 : -1'
255
- }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (labelPosition === 'left' || labelPosition === 'top') {\n <span\n [class.fd-status-indicator__label--sm]=\"labelSize === 'sm'\"\n [class.fd-status-indicator__label--md]=\"labelSize === 'md'\"\n [class.fd-status-indicator__label--lg]=\"labelSize === 'lg'\"\n [class.fd-status-indicator__label--xl]=\"labelSize === 'xl'\"\n [class.fd-status-indicator__label--top]=\"labelPosition === 'top'\"\n [class.fd-status-indicator__label--left]=\"labelPosition === 'left'\"\n class=\"fd-status-indicator__label\"\n >{{ statusLabel }}\n </span>\n}\n<svg\n [attr.id]=\"id\"\n data-sap-ui=\"__shape0-__box21-24\"\n version=\"1.1\"\n [attr.viewBox]=\"viewBox\"\n xlmns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid meet\"\n class=\"fd-status-indicator__svg\"\n>\n <ng-container [ngTemplateOutlet]=\"svgTemplate\"></ng-container>\n</svg>\n@if (labelPosition === 'right' || labelPosition === 'bottom') {\n <span\n [class.fd-status-indicator__label--sm]=\"labelSize === 'sm'\"\n [class.fd-status-indicator__label--md]=\"labelSize === 'md'\"\n [class.fd-status-indicator__label--lg]=\"labelSize === 'lg'\"\n [class.fd-status-indicator__label--xl]=\"labelSize === 'xl'\"\n [class.fd-status-indicator__label--right]=\"labelPosition === 'right'\"\n [class.fd-status-indicator__label--bottom]=\"labelPosition === 'bottom'\"\n class=\"fd-status-indicator__label\"\n >{{ statusLabel }}\n </span>\n}\n<ng-template #svgTemplate>\n @for (path of path; track path; let i = $index) {\n <svg\n xlmns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid meet\"\n overflow=\"visible\"\n [attr.id]=\"id + i\"\n data-sap-ui=\"id\"\n >\n <defs>\n @if (!(fillCalculator - i > 0 && fillCalculator - i < 1) || fillingType !== 'radial') {\n <linearGradient\n id=\"{{ id + i }}-gradient\"\n [attr.x1]=\"x1\"\n [attr.y1]=\"y1\"\n [attr.x2]=\"x2\"\n [attr.y2]=\"y2\"\n >\n <stop [attr.offset]=\"fillCalculator - i\" stop-color=\"white\">\n <animate\n attributeName=\"offset\"\n attr.values=\"0, {{ fillCalculator - i }}\"\n repeatCount=\"1\"\n dur=\"1s\"\n begin=\"0s\"\n />\n </stop>\n <stop [attr.offset]=\"fillCalculator - i\" stop-color=\"transparent\">\n <animate\n attributeName=\"offset\"\n attr.values=\"0, {{ fillCalculator - i }}\"\n repeatCount=\"1\"\n dur=\"1s\"\n begin=\"0s\"\n />\n </stop>\n </linearGradient>\n }\n <mask #maskTemplate id=\"{{ id + i }}-mask\">\n @if (!(fillCalculator - i > 0 && fillCalculator - i < 1) || fillingType !== 'radial') {\n <path\n id=\"{{ id + i }}-mask-shape\"\n [attr.d]=\"path\"\n stroke-width=\"0\"\n stroke=\"white\"\n attr.fill=\"url(#{{ id + i }}-gradient)\"\n ></path>\n }\n @if (fillingType === 'radial' && fillCalculator - i > 0 && fillCalculator - i < 1) {\n <polygon id=\"{{ id + i }}-mask-shape\" fill=\"white\" [attr.points]=\"pointsArray[i]\"></polygon>\n }\n </mask>\n </defs>\n <path\n id=\"{{ id + i }}-shape\"\n [attr.d]=\"path\"\n stroke-width=\"0\"\n stroke=\"#89919A\"\n attr.mask=\"url(#{{ id + i }}-mask)\"\n ></path>\n <path\n id=\"{{ id + i }}-shape-border\"\n [attr.d]=\"path\"\n stroke-width=\"0.25\"\n stroke=\"#89919A\"\n fill=\"transparent\"\n ></path>\n </svg>\n }\n</ng-template>\n", styles: [".fd-status-indicator{color:var(--sapContent_LabelColor);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;stroke:var(--sapNeutralElementColor);stroke-width:.25;fill:transparent;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-status-indicator.is-focus,.fd-status-indicator:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--sapContent_FocusWidth);z-index:5}.fd-status-indicator:after,.fd-status-indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-status-indicator--horizontal-label{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.fd-status-indicator--horizontal-label:after,.fd-status-indicator--horizontal-label:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-status-indicator--link{cursor:pointer}.fd-status-indicator__label,.fd-status-indicator__label--sm{font-size:var(--sapFontSmallSize,.75rem)}.fd-status-indicator__label--sm.fd-status-indicator__label--top{-webkit-margin-after:.375rem;margin-block-end:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--right{-webkit-margin-start:.375rem;margin-inline-start:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--sm.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--sm.fd-status-indicator__label--left{-webkit-margin-end:.375rem;margin-inline-end:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--sm.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--sm.fd-status-indicator__label--bottom{margin-top:.375rem}.fd-status-indicator__label--md{font-size:var(--sapFontSize,.875rem)}.fd-status-indicator__label--md.fd-status-indicator__label--top{-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--right{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--md.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--md.fd-status-indicator__label--left{-webkit-margin-end:.5rem;margin-inline-end:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--md.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--md.fd-status-indicator__label--bottom{margin-top:.5rem}.fd-status-indicator__label--lg{font-size:1.125rem}.fd-status-indicator__label--lg.fd-status-indicator__label--top{-webkit-margin-after:.75rem;margin-block-end:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--right{-webkit-margin-start:.75rem;margin-inline-start:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--lg.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--lg.fd-status-indicator__label--left{-webkit-margin-end:.75rem;margin-inline-end:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--lg.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--lg.fd-status-indicator__label--bottom{margin-top:.75rem}.fd-status-indicator__label--xl{font-size:1.875rem}.fd-status-indicator__label--xl.fd-status-indicator__label--top{-webkit-margin-after:1rem;margin-block-end:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--right{-webkit-margin-start:1rem;margin-inline-start:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--xl.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--xl.fd-status-indicator__label--left{-webkit-margin-end:1rem;margin-inline-end:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--xl.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--xl.fd-status-indicator__label--bottom{margin-top:1rem}.fd-status-indicator--positive{fill:var(--sapPositiveElementColor);color:var(--sapPositiveElementColor)}.fd-status-indicator--critical{fill:var(--sapCriticalElementColor);color:var(--sapCriticalElementColor)}.fd-status-indicator--negative{fill:var(--sapNegativeElementColor);color:var(--sapNegativeElementColor)}.fd-status-indicator--sm .fd-status-indicator__svg{height:1.375rem;width:1.875rem}.fd-status-indicator--md .fd-status-indicator__svg{height:1.875rem;width:2.8125rem}.fd-status-indicator--lg .fd-status-indicator__svg{height:3.4375rem;width:5rem}.fd-status-indicator--xl .fd-status-indicator__svg{height:6.25rem;width:9.0625rem}\n/*! Bundled license information:\n\nfundamental-styles/dist/status-indicator.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"] }]
256
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
257
- type: Input
258
- }], size: [{
259
- type: Input
260
- }], status: [{
261
- type: Input
262
- }], statusLabel: [{
263
- type: Input
264
- }], viewBox: [{
265
- type: Input
266
- }], clickable: [{
267
- type: Input
268
- }], labelSize: [{
269
- type: Input
270
- }], ariaLabel: [{
271
- type: Input
272
- }], ariaRoleDescription: [{
273
- type: Input
274
- }], focusable: [{
275
- type: Input
276
- }], role: [{
277
- type: Input
278
- }], ariaValueText: [{
279
- type: Input
280
- }], title: [{
281
- type: Input
282
- }], labelPosition: [{
283
- type: Input
284
- }], path: [{
285
- type: Input
286
- }], fillPercentage: [{
287
- type: Input
288
- }], fillDirection: [{
289
- type: Input
290
- }], fillingType: [{
291
- type: Input
292
- }], angle: [{
293
- type: Input
294
- }], buildComponentCssClass: [] } });
298
+ '[attr.tabindex]': 'focusable() ? 0 : -1'
299
+ }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (labelPosition() === 'left' || labelPosition() === 'top') {\n <span [class]=\"labelCssClass()\">{{ statusLabel() }} </span>\n}\n<svg\n [attr.id]=\"id()\"\n data-sap-ui=\"__shape0-__box21-24\"\n version=\"1.1\"\n [attr.viewBox]=\"viewBox()\"\n xlmns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid meet\"\n class=\"fd-status-indicator__svg\"\n>\n <ng-container [ngTemplateOutlet]=\"svgTemplate\"></ng-container>\n</svg>\n@if (labelPosition() === 'right' || labelPosition() === 'bottom') {\n <span [class]=\"labelCssClass()\">{{ statusLabel() }} </span>\n}\n<ng-template #svgTemplate>\n @for (path of path(); track path; let i = $index) {\n <svg\n xlmns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid meet\"\n overflow=\"visible\"\n [attr.id]=\"id() + i\"\n data-sap-ui=\"id\"\n >\n <defs>\n @if (!(fillCalculator() - i > 0 && fillCalculator() - i < 1) || fillingType() !== 'radial') {\n <linearGradient\n id=\"{{ id() + i }}-gradient\"\n [attr.x1]=\"x1()\"\n [attr.y1]=\"y1()\"\n [attr.x2]=\"x2()\"\n [attr.y2]=\"y2()\"\n >\n <stop [attr.offset]=\"fillCalculator() - i\" stop-color=\"white\">\n <animate\n attributeName=\"offset\"\n attr.values=\"0, {{ fillCalculator() - i }}\"\n repeatCount=\"1\"\n dur=\"1s\"\n begin=\"0s\"\n />\n </stop>\n <stop [attr.offset]=\"fillCalculator() - i\" stop-color=\"transparent\">\n <animate\n attributeName=\"offset\"\n attr.values=\"0, {{ fillCalculator() - i }}\"\n repeatCount=\"1\"\n dur=\"1s\"\n begin=\"0s\"\n />\n </stop>\n </linearGradient>\n }\n <mask #maskTemplate id=\"{{ id() + i }}-mask\">\n @if (!(fillCalculator() - i > 0 && fillCalculator() - i < 1) || fillingType() !== 'radial') {\n <path\n id=\"{{ id() + i }}-mask-shape\"\n [attr.d]=\"path\"\n stroke-width=\"0\"\n stroke=\"white\"\n attr.fill=\"url(#{{ id() + i }}-gradient)\"\n ></path>\n }\n @if (fillingType() === 'radial' && fillCalculator() - i > 0 && fillCalculator() - i < 1) {\n <polygon id=\"{{ id() + i }}-mask-shape\" fill=\"white\" [attr.points]=\"pointsArray()[i]\"></polygon>\n }\n </mask>\n </defs>\n <path\n id=\"{{ id() + i }}-shape\"\n [attr.d]=\"path\"\n stroke-width=\"0\"\n stroke=\"#89919A\"\n attr.mask=\"url(#{{ id() + i }}-mask)\"\n ></path>\n <path\n id=\"{{ id() + i }}-shape-border\"\n [attr.d]=\"path\"\n stroke-width=\"0.25\"\n stroke=\"#89919A\"\n fill=\"transparent\"\n ></path>\n </svg>\n }\n</ng-template>\n", styles: [".fd-status-indicator{color:var(--sapContent_LabelColor);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;stroke:var(--sapNeutralElementColor);stroke-width:.25;fill:transparent;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-status-indicator.is-focus,.fd-status-indicator:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--sapContent_FocusWidth);z-index:5}.fd-status-indicator:after,.fd-status-indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-status-indicator--horizontal-label{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.fd-status-indicator--horizontal-label:after,.fd-status-indicator--horizontal-label:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-status-indicator--link{cursor:pointer}.fd-status-indicator__label,.fd-status-indicator__label--sm{font-size:var(--sapFontSmallSize,.75rem)}.fd-status-indicator__label--sm.fd-status-indicator__label--top{-webkit-margin-after:.375rem;margin-block-end:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--right{-webkit-margin-start:.375rem;margin-inline-start:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--sm.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--sm.fd-status-indicator__label--left{-webkit-margin-end:.375rem;margin-inline-end:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--sm.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--sm.fd-status-indicator__label--bottom{margin-top:.375rem}.fd-status-indicator__label--md{font-size:var(--sapFontSize,.875rem)}.fd-status-indicator__label--md.fd-status-indicator__label--top{-webkit-margin-after:.5rem;margin-block-end:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--right{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--md.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--md.fd-status-indicator__label--left{-webkit-margin-end:.5rem;margin-inline-end:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--md.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--md.fd-status-indicator__label--bottom{margin-top:.5rem}.fd-status-indicator__label--lg{font-size:1.125rem}.fd-status-indicator__label--lg.fd-status-indicator__label--top{-webkit-margin-after:.75rem;margin-block-end:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--right{-webkit-margin-start:.75rem;margin-inline-start:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--lg.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--lg.fd-status-indicator__label--left{-webkit-margin-end:.75rem;margin-inline-end:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--lg.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--lg.fd-status-indicator__label--bottom{margin-top:.75rem}.fd-status-indicator__label--xl{font-size:1.875rem}.fd-status-indicator__label--xl.fd-status-indicator__label--top{-webkit-margin-after:1rem;margin-block-end:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--right{-webkit-margin-start:1rem;margin-inline-start:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--xl.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--xl.fd-status-indicator__label--left{-webkit-margin-end:1rem;margin-inline-end:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--xl.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--xl.fd-status-indicator__label--bottom{margin-top:1rem}.fd-status-indicator--positive{fill:var(--sapPositiveElementColor);color:var(--sapPositiveElementColor)}.fd-status-indicator--critical{fill:var(--sapCriticalElementColor);color:var(--sapCriticalElementColor)}.fd-status-indicator--negative{fill:var(--sapNegativeElementColor);color:var(--sapNegativeElementColor)}.fd-status-indicator--sm .fd-status-indicator__svg{height:1.375rem;width:1.875rem}.fd-status-indicator--md .fd-status-indicator__svg{height:1.875rem;width:2.8125rem}.fd-status-indicator--lg .fd-status-indicator__svg{height:3.4375rem;width:5rem}.fd-status-indicator--xl .fd-status-indicator__svg{height:6.25rem;width:9.0625rem}\n/*! Bundled license information:\n\nfundamental-styles/dist/status-indicator.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"] }]
300
+ }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusLabel", required: false }] }], viewBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewBox", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], labelSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelSize", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaRoleDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaRoleDescription", required: false }] }], focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaValueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaValueText", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }], fillPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillPercentage", required: false }] }], fillDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillDirection", required: false }] }], fillingType: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillingType", required: false }] }], angle: [{ type: i0.Input, args: [{ isSignal: true, alias: "angle", required: false }] }] } });
295
301
 
296
302
  /**
297
303
  * @deprecated