@fundamental-ngx/core 0.59.1 → 0.59.2-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,86 +1,89 @@
1
- import { __decorate, __metadata } from 'tslib';
2
1
  import * as i0 from '@angular/core';
3
- import { inject, ElementRef, isDevMode, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
4
- import { applyCssClass } from '@fundamental-ngx/cdk/utils';
2
+ import { input, inject, ElementRef, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
5
3
  import { IconComponent } from '@fundamental-ngx/core/icon';
4
+ import { FdTranslatePipe } from '@fundamental-ngx/i18n';
6
5
 
7
6
  const labelColorRange = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
7
+ const defaultColor = 7;
8
8
  class InfoLabelComponent {
9
9
  constructor() {
10
- /** User's custom classes */
11
- this.class = '';
12
10
  /**
13
- * The icon font
14
- * Options include: 'SAP-icons', 'BusinessSuiteInAppSymbols' and 'SAP-icons-TNT'
11
+ * The type of the info label.
12
+ * - `'numeric'`: Displays the label as a number with special numeric styling
13
+ * - `'icon'`: Displays an icon alongside the label text
14
+ * - `undefined`: Default text-only label (omit this property for default)
15
+ * @default undefined
15
16
  */
16
- this.font = 'SAP-icons';
17
- /** Define the colour of the info label starting form 1 to 10 */
18
- this.color = 7;
17
+ this.type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : []));
18
+ /**
19
+ * The icon name to display when `type` is set to `'icon'`.
20
+ * @default null
21
+ */
22
+ this.glyph = input(...(ngDevMode ? [undefined, { debugName: "glyph" }] : []));
23
+ /**
24
+ * The icon font family to use for the icon.
25
+ * @default 'SAP-icons'
26
+ */
27
+ this.font = input('SAP-icons', ...(ngDevMode ? [{ debugName: "font" }] : []));
28
+ /**
29
+ * Accent color of the info label, ranging from 1 to 10.
30
+ * Invalid values default to 7 with a console warning in development mode.
31
+ * @default 7
32
+ */
33
+ this.color = input(defaultColor, ...(ngDevMode ? [{ debugName: "color" }] : []));
34
+ /**
35
+ * The text content displayed in the info label.
36
+ */
37
+ this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
38
+ /**
39
+ * Tooltip text displayed on hover.
40
+ * Provides additional context about the label.
41
+ */
42
+ this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
43
+ /**
44
+ * ARIA label for accessibility.
45
+ * Overrides the visible label for screen readers when provided.
46
+ */
47
+ this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
48
+ /**
49
+ * ARIA labelledby for accessibility.
50
+ * Used when the label is provided by another element.
51
+ */
52
+ this.ariaLabelledBy = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : []));
53
+ /**
54
+ * Screen reader only text for additional context.
55
+ * Defaults to translated "Info Label" if not provided.
56
+ */
57
+ this.srText = input(...(ngDevMode ? [undefined, { debugName: "srText" }] : []));
19
58
  /** @hidden */
20
59
  this.elementRef = inject(ElementRef);
21
- }
22
- /** @hidden */
23
- buildComponentCssClass() {
24
- return [
25
- 'fd-info-label',
26
- this.type ? `fd-info-label--${this.type}` : '',
27
- this.color ? `fd-info-label--accent-color-${this.color}` : '',
28
- this.class
29
- ];
30
- }
31
- /** @hidden */
32
- ngOnInit() {
33
- this._validateColorInput();
34
- this.buildComponentCssClass();
35
- }
36
- /** @hidden */
37
- ngOnChanges(changes) {
38
- if (changes.color) {
39
- this._validateColorInput();
40
- }
41
- this.buildComponentCssClass();
42
- }
43
- /** @hidden */
44
- _validateColorInput() {
45
- const matchingColor = labelColorRange.find((color) => color === Number(this.color));
46
- if (!matchingColor) {
47
- if (isDevMode()) {
48
- console.warn(`Invalid color input: ${this.color}. Please provide a number between 1 and 10`);
60
+ /** @hidden Validated color with fallback to default */
61
+ this.validatedColor = computed(() => {
62
+ const numericColor = Number(this.color() ?? defaultColor);
63
+ // Check if it's a valid integer in range 1-10
64
+ if (Number.isInteger(numericColor) && numericColor >= 1 && numericColor <= 10) {
65
+ return numericColor;
49
66
  }
50
- this.color = 7;
51
- }
67
+ return defaultColor; // Default fallback for invalid values
68
+ }, ...(ngDevMode ? [{ debugName: "validatedColor" }] : []));
69
+ /** @hidden */
70
+ this.cssClass = computed(() => [
71
+ 'fd-info-label',
72
+ this.type() ? `fd-info-label--${this.type()}` : '',
73
+ `fd-info-label--accent-color-${this.validatedColor()}`
74
+ ]
75
+ .filter(Boolean)
76
+ .join(' '), ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
52
77
  }
53
78
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InfoLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
54
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: InfoLabelComponent, isStandalone: true, selector: "fd-info-label", inputs: { class: "class", type: "type", glyph: "glyph", font: "font", color: "color", label: "label", title: "title", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy" }, usesOnChanges: true, ngImport: i0, template: "@if (glyph) {\n <fd-icon class=\"fd-info-label__icon\" [glyph]=\"glyph\" [font]=\"font\"></fd-icon>\n}\n@if (label) {\n <span\n class=\"fd-info-label__text\"\n [attr.title]=\"title\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n >{{ label }}</span\n >\n}\n", styles: [".fd-info-label{--fdInfoLabel_Margin:.25rem;--fdInfoLabel_Padding:.375rem;--fdInfoLabel_Icon_Size:.75rem;--fdInfoLabel_Height:var(--fdInfo_Label_Height);--fdInfoLabel_Label_Font_Size:var(--sapFontSize);--fdInfoLabel_Color:var(--fdInfoLabel_Color_Accent_7);--fdInfoLabel_Border_Radius:var(--fdInfo_Label_Border_Radius);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Background_Color7);--fdInfoLabel_Background:var(--fdInfoLabel_Background_Color_Accent_7);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;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-inline:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--fdInfoLabel_Background);border:.0625rem solid var(--fdInfoLabel_Border_Color);border-radius:var(--fdInfoLabel_Border_Radius);color:var(--fdInfoLabel_Color);gap:var(--fdInfoLabel_Margin);height:var(--fdInfoLabel_Height);padding-block:0;padding-inline:var(--fdInfoLabel_Padding);width:auto}.fd-info-label:after,.fd-info-label:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-info-label__icon [class*=sap-icon],.fd-info-label__icon[class*=sap-icon]{color:inherit;font-size:var(--fdInfoLabel_Icon_Size);height:var(--fdInfoLabel_Height);line-height:var(--fdInfoLabel_Height)}.fd-info-label__text{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:inherit;font-family:var(--sapFontFamily);font-family:var(--sapFontSemiboldDuplexFamily);font-size:var(--sapFontSize);font-size:var(--fdInfoLabel_Label_Font_Size);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-info-label__text:after,.fd-info-label__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-info-label--accent-color-1{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color1);--fdInfoLabel_Color:var(--fdInfo_Label_Color1);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color1)}.fd-info-label--accent-color-2{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color2);--fdInfoLabel_Color:var(--fdInfo_Label_Color2);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color2)}.fd-info-label--accent-color-3{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color3);--fdInfoLabel_Color:var(--fdInfo_Label_Color3);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color3)}.fd-info-label--accent-color-4{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color4);--fdInfoLabel_Color:var(--fdInfo_Label_Color4);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color4)}.fd-info-label--accent-color-5{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color5);--fdInfoLabel_Color:var(--fdInfo_Label_Color5);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color5)}.fd-info-label--accent-color-6{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color6);--fdInfoLabel_Color:var(--fdInfo_Label_Color6);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color6)}.fd-info-label--accent-color-7{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color7);--fdInfoLabel_Color:var(--fdInfo_Label_Color7);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color7)}.fd-info-label--accent-color-8{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color8);--fdInfoLabel_Color:var(--fdInfo_Label_Color8);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color8)}.fd-info-label--accent-color-9{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color9);--fdInfoLabel_Color:var(--fdInfo_Label_Color9);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color9)}.fd-info-label--accent-color-10{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color10);--fdInfoLabel_Color:var(--fdInfo_Label_Color10);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color10)}.fd-info-label--display{--fdInfoLabel_Padding:.25rem;--fdInfoLabel_Margin:.125rem;--fdInfoLabel_Icon_Size:.625rem;--fdInfoLabel_Label_Font_Size:var(--sapFontSmallSize);--fdInfoLabel_Height:var(--fdInfo_Label_Height_Display);--fdInfoLabel_Border_Radius:var(--fdInfo_Label_Border_Radius_Display)}\n/*! Bundled license information:\n\nfundamental-styles/dist/info-label.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: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
79
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: InfoLabelComponent, isStandalone: true, selector: "fd-info-label", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, font: { classPropertyName: "font", publicName: "font", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, srText: { classPropertyName: "srText", publicName: "srText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClass()" } }, ngImport: i0, template: "@if (glyph()) {\n <fd-icon\n class=\"fd-info-label__icon\"\n [glyph]=\"glyph()\"\n [font]=\"font()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></fd-icon>\n}\n@if (label()) {\n <span\n class=\"fd-info-label__text\"\n [attr.title]=\"title()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n >{{ label() }}</span\n >\n}\n<span class=\"fd-info-label__sr-only\">{{ srText() || ('coreInfoLabel.srOnlyText' | fdTranslate) }}</span>\n", styles: [".fd-info-label{--fdInfoLabel_Margin:.25rem;--fdInfoLabel_Padding:.375rem;--fdInfoLabel_Icon_Size:.75rem;--fdInfoLabel_Height:var(--fdInfo_Label_Height);--fdInfoLabel_Label_Font_Size:var(--sapFontSize);--fdInfoLabel_Color:var(--fdInfoLabel_Color_Accent_7);--fdInfoLabel_Border_Radius:var(--fdInfo_Label_Border_Radius);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Background_Color7);--fdInfoLabel_Background:var(--fdInfoLabel_Background_Color_Accent_7);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;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-inline:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--fdInfoLabel_Background);border:.0625rem solid var(--fdInfoLabel_Border_Color);border-radius:var(--fdInfoLabel_Border_Radius);color:var(--fdInfoLabel_Color);gap:var(--fdInfoLabel_Margin);height:var(--fdInfoLabel_Height);padding-block:0;padding-inline:var(--fdInfoLabel_Padding);width:auto}.fd-info-label:after,.fd-info-label:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-info-label__icon [class*=sap-icon],.fd-info-label__icon[class*=sap-icon]{color:inherit;font-size:var(--fdInfoLabel_Icon_Size);height:var(--fdInfoLabel_Height);line-height:var(--fdInfoLabel_Height)}.fd-info-label__text{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:inherit;font-family:var(--sapFontFamily);font-family:var(--sapFontSemiboldDuplexFamily);font-size:var(--sapFontSize);font-size:var(--fdInfoLabel_Label_Font_Size);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-info-label__text:after,.fd-info-label__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-info-label--accent-color-1{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color1);--fdInfoLabel_Color:var(--fdInfo_Label_Color1);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color1)}.fd-info-label--accent-color-2{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color2);--fdInfoLabel_Color:var(--fdInfo_Label_Color2);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color2)}.fd-info-label--accent-color-3{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color3);--fdInfoLabel_Color:var(--fdInfo_Label_Color3);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color3)}.fd-info-label--accent-color-4{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color4);--fdInfoLabel_Color:var(--fdInfo_Label_Color4);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color4)}.fd-info-label--accent-color-5{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color5);--fdInfoLabel_Color:var(--fdInfo_Label_Color5);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color5)}.fd-info-label--accent-color-6{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color6);--fdInfoLabel_Color:var(--fdInfo_Label_Color6);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color6)}.fd-info-label--accent-color-7{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color7);--fdInfoLabel_Color:var(--fdInfo_Label_Color7);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color7)}.fd-info-label--accent-color-8{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color8);--fdInfoLabel_Color:var(--fdInfo_Label_Color8);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color8)}.fd-info-label--accent-color-9{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color9);--fdInfoLabel_Color:var(--fdInfo_Label_Color9);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color9)}.fd-info-label--accent-color-10{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color10);--fdInfoLabel_Color:var(--fdInfo_Label_Color10);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color10)}.fd-info-label--display{--fdInfoLabel_Padding:.25rem;--fdInfoLabel_Margin:.125rem;--fdInfoLabel_Icon_Size:.625rem;--fdInfoLabel_Label_Font_Size:var(--sapFontSmallSize);--fdInfoLabel_Height:var(--fdInfo_Label_Height_Display);--fdInfoLabel_Border_Radius:var(--fdInfo_Label_Border_Radius_Display)}.fd-info-label__sr-only{position:absolute;clip:rect(0 0 0 0);height:1px;width:1px;border:0;margin-inline:-1px;margin-block:-1px;padding-inline:0;padding-block:0;overflow:hidden;white-space:nowrap}\n/*! Bundled license information:\n\nfundamental-styles/dist/info-label.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: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
55
80
  }
56
- __decorate([
57
- applyCssClass,
58
- __metadata("design:type", Function),
59
- __metadata("design:paramtypes", []),
60
- __metadata("design:returntype", Array)
61
- ], InfoLabelComponent.prototype, "buildComponentCssClass", null);
62
81
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InfoLabelComponent, decorators: [{
63
82
  type: Component,
64
- args: [{ selector: 'fd-info-label', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], template: "@if (glyph) {\n <fd-icon class=\"fd-info-label__icon\" [glyph]=\"glyph\" [font]=\"font\"></fd-icon>\n}\n@if (label) {\n <span\n class=\"fd-info-label__text\"\n [attr.title]=\"title\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n >{{ label }}</span\n >\n}\n", styles: [".fd-info-label{--fdInfoLabel_Margin:.25rem;--fdInfoLabel_Padding:.375rem;--fdInfoLabel_Icon_Size:.75rem;--fdInfoLabel_Height:var(--fdInfo_Label_Height);--fdInfoLabel_Label_Font_Size:var(--sapFontSize);--fdInfoLabel_Color:var(--fdInfoLabel_Color_Accent_7);--fdInfoLabel_Border_Radius:var(--fdInfo_Label_Border_Radius);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Background_Color7);--fdInfoLabel_Background:var(--fdInfoLabel_Background_Color_Accent_7);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;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-inline:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--fdInfoLabel_Background);border:.0625rem solid var(--fdInfoLabel_Border_Color);border-radius:var(--fdInfoLabel_Border_Radius);color:var(--fdInfoLabel_Color);gap:var(--fdInfoLabel_Margin);height:var(--fdInfoLabel_Height);padding-block:0;padding-inline:var(--fdInfoLabel_Padding);width:auto}.fd-info-label:after,.fd-info-label:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-info-label__icon [class*=sap-icon],.fd-info-label__icon[class*=sap-icon]{color:inherit;font-size:var(--fdInfoLabel_Icon_Size);height:var(--fdInfoLabel_Height);line-height:var(--fdInfoLabel_Height)}.fd-info-label__text{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:inherit;font-family:var(--sapFontFamily);font-family:var(--sapFontSemiboldDuplexFamily);font-size:var(--sapFontSize);font-size:var(--fdInfoLabel_Label_Font_Size);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-info-label__text:after,.fd-info-label__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-info-label--accent-color-1{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color1);--fdInfoLabel_Color:var(--fdInfo_Label_Color1);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color1)}.fd-info-label--accent-color-2{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color2);--fdInfoLabel_Color:var(--fdInfo_Label_Color2);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color2)}.fd-info-label--accent-color-3{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color3);--fdInfoLabel_Color:var(--fdInfo_Label_Color3);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color3)}.fd-info-label--accent-color-4{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color4);--fdInfoLabel_Color:var(--fdInfo_Label_Color4);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color4)}.fd-info-label--accent-color-5{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color5);--fdInfoLabel_Color:var(--fdInfo_Label_Color5);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color5)}.fd-info-label--accent-color-6{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color6);--fdInfoLabel_Color:var(--fdInfo_Label_Color6);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color6)}.fd-info-label--accent-color-7{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color7);--fdInfoLabel_Color:var(--fdInfo_Label_Color7);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color7)}.fd-info-label--accent-color-8{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color8);--fdInfoLabel_Color:var(--fdInfo_Label_Color8);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color8)}.fd-info-label--accent-color-9{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color9);--fdInfoLabel_Color:var(--fdInfo_Label_Color9);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color9)}.fd-info-label--accent-color-10{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color10);--fdInfoLabel_Color:var(--fdInfo_Label_Color10);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color10)}.fd-info-label--display{--fdInfoLabel_Padding:.25rem;--fdInfoLabel_Margin:.125rem;--fdInfoLabel_Icon_Size:.625rem;--fdInfoLabel_Label_Font_Size:var(--sapFontSmallSize);--fdInfoLabel_Height:var(--fdInfo_Label_Height_Display);--fdInfoLabel_Border_Radius:var(--fdInfo_Label_Border_Radius_Display)}\n/*! Bundled license information:\n\nfundamental-styles/dist/info-label.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"] }]
65
- }], propDecorators: { class: [{
66
- type: Input
67
- }], type: [{
68
- type: Input
69
- }], glyph: [{
70
- type: Input
71
- }], font: [{
72
- type: Input
73
- }], color: [{
74
- type: Input
75
- }], label: [{
76
- type: Input
77
- }], title: [{
78
- type: Input
79
- }], ariaLabel: [{
80
- type: Input
81
- }], ariaLabelledBy: [{
82
- type: Input
83
- }], buildComponentCssClass: [] } });
83
+ args: [{ selector: 'fd-info-label', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, FdTranslatePipe], host: {
84
+ '[class]': 'cssClass()'
85
+ }, template: "@if (glyph()) {\n <fd-icon\n class=\"fd-info-label__icon\"\n [glyph]=\"glyph()\"\n [font]=\"font()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></fd-icon>\n}\n@if (label()) {\n <span\n class=\"fd-info-label__text\"\n [attr.title]=\"title()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n >{{ label() }}</span\n >\n}\n<span class=\"fd-info-label__sr-only\">{{ srText() || ('coreInfoLabel.srOnlyText' | fdTranslate) }}</span>\n", styles: [".fd-info-label{--fdInfoLabel_Margin:.25rem;--fdInfoLabel_Padding:.375rem;--fdInfoLabel_Icon_Size:.75rem;--fdInfoLabel_Height:var(--fdInfo_Label_Height);--fdInfoLabel_Label_Font_Size:var(--sapFontSize);--fdInfoLabel_Color:var(--fdInfoLabel_Color_Accent_7);--fdInfoLabel_Border_Radius:var(--fdInfo_Label_Border_Radius);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Background_Color7);--fdInfoLabel_Background:var(--fdInfoLabel_Background_Color_Accent_7);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;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-inline:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--fdInfoLabel_Background);border:.0625rem solid var(--fdInfoLabel_Border_Color);border-radius:var(--fdInfoLabel_Border_Radius);color:var(--fdInfoLabel_Color);gap:var(--fdInfoLabel_Margin);height:var(--fdInfoLabel_Height);padding-block:0;padding-inline:var(--fdInfoLabel_Padding);width:auto}.fd-info-label:after,.fd-info-label:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-info-label__icon [class*=sap-icon],.fd-info-label__icon[class*=sap-icon]{color:inherit;font-size:var(--fdInfoLabel_Icon_Size);height:var(--fdInfoLabel_Height);line-height:var(--fdInfoLabel_Height)}.fd-info-label__text{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:inherit;font-family:var(--sapFontFamily);font-family:var(--sapFontSemiboldDuplexFamily);font-size:var(--sapFontSize);font-size:var(--fdInfoLabel_Label_Font_Size);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-info-label__text:after,.fd-info-label__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-info-label--accent-color-1{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color1);--fdInfoLabel_Color:var(--fdInfo_Label_Color1);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color1)}.fd-info-label--accent-color-2{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color2);--fdInfoLabel_Color:var(--fdInfo_Label_Color2);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color2)}.fd-info-label--accent-color-3{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color3);--fdInfoLabel_Color:var(--fdInfo_Label_Color3);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color3)}.fd-info-label--accent-color-4{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color4);--fdInfoLabel_Color:var(--fdInfo_Label_Color4);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color4)}.fd-info-label--accent-color-5{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color5);--fdInfoLabel_Color:var(--fdInfo_Label_Color5);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color5)}.fd-info-label--accent-color-6{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color6);--fdInfoLabel_Color:var(--fdInfo_Label_Color6);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color6)}.fd-info-label--accent-color-7{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color7);--fdInfoLabel_Color:var(--fdInfo_Label_Color7);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color7)}.fd-info-label--accent-color-8{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color8);--fdInfoLabel_Color:var(--fdInfo_Label_Color8);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color8)}.fd-info-label--accent-color-9{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color9);--fdInfoLabel_Color:var(--fdInfo_Label_Color9);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color9)}.fd-info-label--accent-color-10{--fdInfoLabel_Background:var(--fdInfo_Label_Background_Color10);--fdInfoLabel_Color:var(--fdInfo_Label_Color10);--fdInfoLabel_Border_Color:var(--fdInfo_Label_Border_Color10)}.fd-info-label--display{--fdInfoLabel_Padding:.25rem;--fdInfoLabel_Margin:.125rem;--fdInfoLabel_Icon_Size:.625rem;--fdInfoLabel_Label_Font_Size:var(--sapFontSmallSize);--fdInfoLabel_Height:var(--fdInfo_Label_Height_Display);--fdInfoLabel_Border_Radius:var(--fdInfo_Label_Border_Radius_Display)}.fd-info-label__sr-only{position:absolute;clip:rect(0 0 0 0);height:1px;width:1px;border:0;margin-inline:-1px;margin-block:-1px;padding-inline:0;padding-block:0;overflow:hidden;white-space:nowrap}\n/*! Bundled license information:\n\nfundamental-styles/dist/info-label.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"] }]
86
+ }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], glyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyph", required: false }] }], font: [{ type: i0.Input, args: [{ isSignal: true, alias: "font", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], srText: [{ type: i0.Input, args: [{ isSignal: true, alias: "srText", required: false }] }] } });
84
87
 
85
88
  /**
86
89
  * @deprecated
@@ -1 +1 @@
1
- {"version":3,"file":"fundamental-ngx-core-info-label.mjs","sources":["../../../../libs/core/info-label/info-label.component.ts","../../../../libs/core/info-label/info-label.component.html","../../../../libs/core/info-label/info-label.module.ts","../../../../libs/core/info-label/fundamental-ngx-core-info-label.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n inject,\n Input,\n isDevMode,\n OnChanges,\n OnInit,\n SimpleChanges,\n ViewEncapsulation\n} from '@angular/core';\nimport { applyCssClass, CssClassBuilder, HasElementRef, Nullable } from '@fundamental-ngx/cdk/utils';\nimport { IconComponent, IconFont } from '@fundamental-ngx/core/icon';\n\nexport type LabelType = 'numeric' | 'icon';\nconst labelColorRange = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const;\nexport type InfoLabelColor = (typeof labelColorRange)[number];\nexport type InfoLabelColorInput = InfoLabelColor | `${InfoLabelColor}`;\n\n@Component({\n selector: 'fd-info-label',\n templateUrl: './info-label.component.html',\n styleUrl: './info-label.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [IconComponent]\n})\nexport class InfoLabelComponent implements OnInit, OnChanges, CssClassBuilder, HasElementRef {\n /** User's custom classes */\n @Input()\n class = '';\n\n /**\n * The LabelType represented by the info label .\n * For default info label omit this property\n */\n @Input()\n type: LabelType;\n\n /** The icon name to display. See the icon page for the list of icons\n * here: https://sap.github.io/fundamental-ngx/icon\n * */\n @Input()\n glyph: Nullable<string>;\n\n /**\n * The icon font\n * Options include: 'SAP-icons', 'BusinessSuiteInAppSymbols' and 'SAP-icons-TNT'\n */\n @Input()\n font: IconFont = 'SAP-icons';\n\n /** Define the colour of the info label starting form 1 to 10 */\n @Input()\n color: Nullable<InfoLabelColorInput> = 7;\n\n /** Define the text content of the info label */\n @Input()\n label: string;\n\n /** Define the tooltip content of the info label */\n @Input()\n title: string;\n\n /** Define the ariaLabel content of the info label */\n @Input()\n ariaLabel: Nullable<string>;\n\n /** Define the labelled by content of the info label */\n @Input()\n ariaLabelledBy: Nullable<string>;\n\n /** @hidden */\n elementRef: ElementRef<HTMLElement> = inject(ElementRef);\n\n /** @hidden */\n @applyCssClass\n buildComponentCssClass(): string[] {\n return [\n 'fd-info-label',\n this.type ? `fd-info-label--${this.type}` : '',\n this.color ? `fd-info-label--accent-color-${this.color}` : '',\n this.class\n ];\n }\n\n /** @hidden */\n ngOnInit(): void {\n this._validateColorInput();\n this.buildComponentCssClass();\n }\n\n /** @hidden */\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.color) {\n this._validateColorInput();\n }\n this.buildComponentCssClass();\n }\n\n /** @hidden */\n private _validateColorInput(): void {\n const matchingColor = labelColorRange.find((color) => color === Number(this.color));\n if (!matchingColor) {\n if (isDevMode()) {\n console.warn(`Invalid color input: ${this.color}. Please provide a number between 1 and 10`);\n }\n this.color = 7;\n }\n }\n}\n","@if (glyph) {\n <fd-icon class=\"fd-info-label__icon\" [glyph]=\"glyph\" [font]=\"font\"></fd-icon>\n}\n@if (label) {\n <span\n class=\"fd-info-label__text\"\n [attr.title]=\"title\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n >{{ label }}</span\n >\n}\n","import { NgModule } from '@angular/core';\nimport { InfoLabelComponent } from './info-label.component';\n\n/**\n * @deprecated\n * Use direct imports of components and directives.\n */\n@NgModule({\n imports: [InfoLabelComponent],\n exports: [InfoLabelComponent]\n})\nexport class InfoLabelModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"fundamental-ngx-core-info-label.mjs","sources":["../../../../libs/core/info-label/info-label.component.ts","../../../../libs/core/info-label/info-label.component.html","../../../../libs/core/info-label/info-label.module.ts","../../../../libs/core/info-label/fundamental-ngx-core-info-label.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n ViewEncapsulation\n} from '@angular/core';\nimport { HasElementRef } from '@fundamental-ngx/cdk/utils';\nimport { IconComponent, IconFont } from '@fundamental-ngx/core/icon';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\n\n/** Display type for the info label. */\nexport type LabelType = 'numeric' | 'icon';\n\nconst labelColorRange = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const;\n\nconst defaultColor: InfoLabelColor = 7;\n\n/** Valid accent color values for info labels (1-10). */\nexport type InfoLabelColor = (typeof labelColorRange)[number];\n\n/** Accent color input accepting both number and string representations. */\nexport type InfoLabelColorInput = InfoLabelColor | `${InfoLabelColor}`;\n\n@Component({\n selector: 'fd-info-label',\n templateUrl: './info-label.component.html',\n styleUrl: './info-label.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [IconComponent, FdTranslatePipe],\n host: {\n '[class]': 'cssClass()'\n }\n})\nexport class InfoLabelComponent implements HasElementRef {\n /**\n * The type of the info label.\n * - `'numeric'`: Displays the label as a number with special numeric styling\n * - `'icon'`: Displays an icon alongside the label text\n * - `undefined`: Default text-only label (omit this property for default)\n * @default undefined\n */\n readonly type = input<LabelType>();\n\n /**\n * The icon name to display when `type` is set to `'icon'`.\n * @default null\n */\n readonly glyph = input<string | null>();\n\n /**\n * The icon font family to use for the icon.\n * @default 'SAP-icons'\n */\n readonly font = input<IconFont>('SAP-icons');\n\n /**\n * Accent color of the info label, ranging from 1 to 10.\n * Invalid values default to 7 with a console warning in development mode.\n * @default 7\n */\n readonly color = input<InfoLabelColorInput | null | undefined>(defaultColor);\n\n /**\n * The text content displayed in the info label.\n */\n readonly label = input<string>();\n\n /**\n * Tooltip text displayed on hover.\n * Provides additional context about the label.\n */\n readonly title = input<string>();\n\n /**\n * ARIA label for accessibility.\n * Overrides the visible label for screen readers when provided.\n */\n readonly ariaLabel = input<string | null>();\n\n /**\n * ARIA labelledby for accessibility.\n * Used when the label is provided by another element.\n */\n readonly ariaLabelledBy = input<string | null>();\n\n /**\n * Screen reader only text for additional context.\n * Defaults to translated \"Info Label\" if not provided.\n */\n readonly srText = input<string>();\n\n /** @hidden */\n elementRef: ElementRef<HTMLElement> = inject(ElementRef);\n\n /** @hidden Validated color with fallback to default */\n protected readonly validatedColor = computed(() => {\n const numericColor = Number(this.color() ?? defaultColor);\n\n // Check if it's a valid integer in range 1-10\n if (Number.isInteger(numericColor) && numericColor >= 1 && numericColor <= 10) {\n return numericColor;\n }\n\n return defaultColor; // Default fallback for invalid values\n });\n\n /** @hidden */\n protected readonly cssClass = computed(() =>\n [\n 'fd-info-label',\n this.type() ? `fd-info-label--${this.type()}` : '',\n `fd-info-label--accent-color-${this.validatedColor()}`\n ]\n .filter(Boolean)\n .join(' ')\n );\n}\n","@if (glyph()) {\n <fd-icon\n class=\"fd-info-label__icon\"\n [glyph]=\"glyph()\"\n [font]=\"font()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></fd-icon>\n}\n@if (label()) {\n <span\n class=\"fd-info-label__text\"\n [attr.title]=\"title()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n >{{ label() }}</span\n >\n}\n<span class=\"fd-info-label__sr-only\">{{ srText() || ('coreInfoLabel.srOnlyText' | fdTranslate) }}</span>\n","import { NgModule } from '@angular/core';\nimport { InfoLabelComponent } from './info-label.component';\n\n/**\n * @deprecated\n * Use direct imports of components and directives.\n */\n@NgModule({\n imports: [InfoLabelComponent],\n exports: [InfoLabelComponent]\n})\nexport class InfoLabelModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fundamental-ngx/core",
3
- "version": "0.59.1",
3
+ "version": "0.59.2-rc.0",
4
4
  "schematics": "./schematics/collection.json",
5
5
  "ng-update": {
6
6
  "migrations": "./schematics/migrations.json"
@@ -23,8 +23,8 @@
23
23
  "@angular/forms": "^21.0.0",
24
24
  "@angular/platform-browser": "^21.0.0",
25
25
  "@angular/router": "^21.0.0",
26
- "@fundamental-ngx/cdk": "0.59.1",
27
- "@fundamental-ngx/i18n": "0.59.1",
26
+ "@fundamental-ngx/cdk": "0.59.2-rc.0",
27
+ "@fundamental-ngx/i18n": "0.59.2-rc.0",
28
28
  "@sap-theming/theming-base-content": "^11.32.0",
29
29
  "fundamental-styles": "0.40.1",
30
30
  "rxjs": "^7.8.0"
@@ -1,51 +1,72 @@
1
- import * as i0 from '@angular/core';
2
- import { OnInit, OnChanges, ElementRef, SimpleChanges } from '@angular/core';
3
- import { CssClassBuilder, HasElementRef, Nullable } from '@fundamental-ngx/cdk/utils';
1
+ import * as _angular_core from '@angular/core';
2
+ import { ElementRef } from '@angular/core';
3
+ import { HasElementRef } from '@fundamental-ngx/cdk/utils';
4
4
  import { IconFont } from '@fundamental-ngx/core/icon';
5
5
 
6
+ /** Display type for the info label. */
6
7
  type LabelType = 'numeric' | 'icon';
7
8
  declare const labelColorRange: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
9
+ /** Valid accent color values for info labels (1-10). */
8
10
  type InfoLabelColor = (typeof labelColorRange)[number];
11
+ /** Accent color input accepting both number and string representations. */
9
12
  type InfoLabelColorInput = InfoLabelColor | `${InfoLabelColor}`;
10
- declare class InfoLabelComponent implements OnInit, OnChanges, CssClassBuilder, HasElementRef {
11
- /** User's custom classes */
12
- class: string;
13
- /**
14
- * The LabelType represented by the info label .
15
- * For default info label omit this property
16
- */
17
- type: LabelType;
18
- /** The icon name to display. See the icon page for the list of icons
19
- * here: https://sap.github.io/fundamental-ngx/icon
20
- * */
21
- glyph: Nullable<string>;
22
- /**
23
- * The icon font
24
- * Options include: 'SAP-icons', 'BusinessSuiteInAppSymbols' and 'SAP-icons-TNT'
25
- */
26
- font: IconFont;
27
- /** Define the colour of the info label starting form 1 to 10 */
28
- color: Nullable<InfoLabelColorInput>;
29
- /** Define the text content of the info label */
30
- label: string;
31
- /** Define the tooltip content of the info label */
32
- title: string;
33
- /** Define the ariaLabel content of the info label */
34
- ariaLabel: Nullable<string>;
35
- /** Define the labelled by content of the info label */
36
- ariaLabelledBy: Nullable<string>;
13
+ declare class InfoLabelComponent implements HasElementRef {
14
+ /**
15
+ * The type of the info label.
16
+ * - `'numeric'`: Displays the label as a number with special numeric styling
17
+ * - `'icon'`: Displays an icon alongside the label text
18
+ * - `undefined`: Default text-only label (omit this property for default)
19
+ * @default undefined
20
+ */
21
+ readonly type: _angular_core.InputSignal<LabelType | undefined>;
22
+ /**
23
+ * The icon name to display when `type` is set to `'icon'`.
24
+ * @default null
25
+ */
26
+ readonly glyph: _angular_core.InputSignal<string | null | undefined>;
27
+ /**
28
+ * The icon font family to use for the icon.
29
+ * @default 'SAP-icons'
30
+ */
31
+ readonly font: _angular_core.InputSignal<IconFont>;
32
+ /**
33
+ * Accent color of the info label, ranging from 1 to 10.
34
+ * Invalid values default to 7 with a console warning in development mode.
35
+ * @default 7
36
+ */
37
+ readonly color: _angular_core.InputSignal<InfoLabelColorInput | null | undefined>;
38
+ /**
39
+ * The text content displayed in the info label.
40
+ */
41
+ readonly label: _angular_core.InputSignal<string | undefined>;
42
+ /**
43
+ * Tooltip text displayed on hover.
44
+ * Provides additional context about the label.
45
+ */
46
+ readonly title: _angular_core.InputSignal<string | undefined>;
47
+ /**
48
+ * ARIA label for accessibility.
49
+ * Overrides the visible label for screen readers when provided.
50
+ */
51
+ readonly ariaLabel: _angular_core.InputSignal<string | null | undefined>;
52
+ /**
53
+ * ARIA labelledby for accessibility.
54
+ * Used when the label is provided by another element.
55
+ */
56
+ readonly ariaLabelledBy: _angular_core.InputSignal<string | null | undefined>;
57
+ /**
58
+ * Screen reader only text for additional context.
59
+ * Defaults to translated "Info Label" if not provided.
60
+ */
61
+ readonly srText: _angular_core.InputSignal<string | undefined>;
37
62
  /** @hidden */
38
63
  elementRef: ElementRef<HTMLElement>;
64
+ /** @hidden Validated color with fallback to default */
65
+ protected readonly validatedColor: _angular_core.Signal<number>;
39
66
  /** @hidden */
40
- buildComponentCssClass(): string[];
41
- /** @hidden */
42
- ngOnInit(): void;
43
- /** @hidden */
44
- ngOnChanges(changes: SimpleChanges): void;
45
- /** @hidden */
46
- private _validateColorInput;
47
- static ɵfac: i0.ɵɵFactoryDeclaration<InfoLabelComponent, never>;
48
- static ɵcmp: i0.ɵɵComponentDeclaration<InfoLabelComponent, "fd-info-label", never, { "class": { "alias": "class"; "required": false; }; "type": { "alias": "type"; "required": false; }; "glyph": { "alias": "glyph"; "required": false; }; "font": { "alias": "font"; "required": false; }; "color": { "alias": "color"; "required": false; }; "label": { "alias": "label"; "required": false; }; "title": { "alias": "title"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; }, {}, never, never, true, never>;
67
+ protected readonly cssClass: _angular_core.Signal<string>;
68
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<InfoLabelComponent, never>;
69
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<InfoLabelComponent, "fd-info-label", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "glyph": { "alias": "glyph"; "required": false; "isSignal": true; }; "font": { "alias": "font"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "srText": { "alias": "srText"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
49
70
  }
50
71
 
51
72
  /**
@@ -53,9 +74,9 @@ declare class InfoLabelComponent implements OnInit, OnChanges, CssClassBuilder,
53
74
  * Use direct imports of components and directives.
54
75
  */
55
76
  declare class InfoLabelModule {
56
- static ɵfac: i0.ɵɵFactoryDeclaration<InfoLabelModule, never>;
57
- static ɵmod: i0.ɵɵNgModuleDeclaration<InfoLabelModule, never, [typeof InfoLabelComponent], [typeof InfoLabelComponent]>;
58
- static ɵinj: i0.ɵɵInjectorDeclaration<InfoLabelModule>;
77
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<InfoLabelModule, never>;
78
+ static ɵmod: _angular_core.ɵɵNgModuleDeclaration<InfoLabelModule, never, [typeof InfoLabelComponent], [typeof InfoLabelComponent]>;
79
+ static ɵinj: _angular_core.ɵɵInjectorDeclaration<InfoLabelModule>;
59
80
  }
60
81
 
61
82
  export { InfoLabelComponent, InfoLabelModule };