@testgorilla/tgo-ui 3.2.5 → 3.3.0

package/README.md

@@ -1,95 +1,95 @@
-# TestGorilla UI Library
-
-# Test app
-
-To see the updates of the library in the client app, use commands below from package.json
-
-- build the updated version of canopy-ui with `build:tgo-ui (ng build tgo-ui)`
-- restart the client app with `start:client (ng serve)`
-
-# Foundations
-
-- Typography
-- Colors
-
-# Components
-
-- Alert Bars
-  - Alert Banner
-  - Banner Actions
-  - Snackbar
-- Button
-- Elevation Shadow
-- Dialog
-  - Confirm Dialog
-  - Custom Dialog
-- File Upload
-- Forms
-  - Checkbox
-  - Datepicker
-  - Dropdown
-  - Input Field
-  - Radio
-- Icon
-  - Icon + Label
-- Logo
-- Overflow Menu
-- Progress Bar
-- Tag
-- Tooltip
-
-# Deprecated
-
-- Card
-- Create Account
-- Create Password
-- Forgot Password
-- Label
-- Login
-- NavBar
-- Navigation
-- Paginator
-- Table
-
-## Visual Regression
-
-We use Playwright to capture visual differences. The relevant code is in the `visual-tests` folder.
-
-### Updating Snapshots
-
-To ensure consistency with CI, update snapshots using Docker:
-
-```
-docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:latest /bin/bash
-npx playwright install
-npx playwright test visual-tests --config 'visual-tests/playwright.config.ts' --update-snapshots
-```
-
-If you encounter the following error, it can be safely ignored. We need reports in a single directory for CI artifact storage:
-
-```
-Configuration Error: HTML reporter output folder clashes with the tests output folder:
-
-    html reporter folder: /work/test-results/html-report
-    test results folder: /work/test-results
-
-HTML reporter will clear its output directory prior to being generated, which will lead to the artifact loss.
-```
-
-### Running Visual Tests
-
-Use Docker to align screenshots with the same OS:
-
-```
-docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:latest /bin/bash
-npx playwright install
-npx playwright test visual-tests --config 'visual-tests/playwright.config.ts'
-```
-
-### Running Visual Tests for a single file 
-
-```
-npx playwright test visual-tests --config ‘visual-tests/playwright.config.ts’ -g ‘test_name’
-npx playwright test visual-tests/path_to_test_file --config ‘visual-tests/playwright.config.ts’
-```
-
+# TestGorilla UI Library
+
+# Test app
+
+To see the updates of the library in the client app, use commands below from package.json
+
+- build the updated version of canopy-ui with `build:tgo-ui (ng build tgo-ui)`
+- restart the client app with `start:client (ng serve)`
+
+# Foundations
+
+- Typography
+- Colors
+
+# Components
+
+- Alert Bars
+  - Alert Banner
+  - Banner Actions
+  - Snackbar
+- Button
+- Elevation Shadow
+- Dialog
+  - Confirm Dialog
+  - Custom Dialog
+- File Upload
+- Forms
+  - Checkbox
+  - Datepicker
+  - Dropdown
+  - Input Field
+  - Radio
+- Icon
+  - Icon + Label
+- Logo
+- Overflow Menu
+- Progress Bar
+- Tag
+- Tooltip
+
+# Deprecated
+
+- Card
+- Create Account
+- Create Password
+- Forgot Password
+- Label
+- Login
+- NavBar
+- Navigation
+- Paginator
+- Table
+
+## Visual Regression
+
+We use Playwright to capture visual differences. The relevant code is in the `visual-tests` folder.
+
+### Updating Snapshots
+
+To ensure consistency with CI, update snapshots using Docker:
+
+```
+docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:latest /bin/bash
+npx playwright install
+npx playwright test visual-tests --config 'visual-tests/playwright.config.ts' --update-snapshots
+```
+
+If you encounter the following error, it can be safely ignored. We need reports in a single directory for CI artifact storage:
+
+```
+Configuration Error: HTML reporter output folder clashes with the tests output folder:
+
+    html reporter folder: /work/test-results/html-report
+    test results folder: /work/test-results
+
+HTML reporter will clear its output directory prior to being generated, which will lead to the artifact loss.
+```
+
+### Running Visual Tests
+
+Use Docker to align screenshots with the same OS:
+
+```
+docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:latest /bin/bash
+npx playwright install
+npx playwright test visual-tests --config 'visual-tests/playwright.config.ts'
+```
+
+### Running Visual Tests for a single file 
+
+```
+npx playwright test visual-tests --config ‘visual-tests/playwright.config.ts’ -g ‘test_name’
+npx playwright test visual-tests/path_to_test_file --config ‘visual-tests/playwright.config.ts’
+```
+

package/components/badge/badge.model.d.ts

@@ -1,4 +1,4 @@
-export type BadgeVariant = 'primary' | 'secondary' | 'notification';
+export type BadgeVariant = 'primary' | 'secondary' | 'notification' | 'primary-ai' | 'secondary-ai';
 export type BadgeColor = 'red' | 'grey-medium' | 'teal' | 'yellow' | 'petrol' | 'teal-60w' | 'petrol-90w' | 'petrol-60w' | 'grey-dark' | 'blue-20' | 'blue-40' | 'pink-30' | 'blue-10';
 export declare enum BadgeColorEnum {
     RED = "red",
@@ -30,6 +30,8 @@ export declare enum RebrandBadgeColorEnum {
 }
 export declare enum BadgeVariantEnum {
     PRIMARY = "primary",
+    PRIMARY_AI = "primary-ai",
     SECONDARY = "secondary",
+    SECONDARY_AI = "secondary-ai",
     NOTIFICATION = "notification"
 }

package/components/button/button.model.d.ts

@@ -1,6 +1,6 @@
 import { BadgeVariant, RebrandBadgeColor } from '../badge/badge.model';
 export type ButtonIconPosition = 'left' | 'right';
-export type ButtonColor = 'primary' | 'secondary' | 'ghost' | 'outlined' | 'destructive' | 'tertiary' | 'link' | 'tab' | 'text' | 'menuTrigger' | 'menuCell' | 'icon-button';
+export type ButtonColor = 'primary' | 'secondary' | 'ghost' | 'ghost-ai' | 'outlined' | 'destructive' | 'tertiary' | 'link' | 'tab' | 'text' | 'menuTrigger' | 'menuCell' | 'icon-button';
 export type ButtonSize = 'big' | 'medium' | 'small';
 export type LinkUrlTarget = '' | '_self' | '_blank' | '_parent' | '_top';
 export type IconButtonSize = '24' | '32' | '40';

package/components/card/card.component.d.ts

@@ -2,6 +2,7 @@ import { EventEmitter, OnChanges, OnInit } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ApplicationTheme } from '../../models/application-theme.model';
 import { CardSize, CardVariant } from './card.model';
+import { IconSize } from '../icon/icon.model';
 import * as i0 from "@angular/core";
 export declare class CardComponent implements OnChanges, OnInit {
     private readonly defaultAppTheme;
@@ -35,6 +36,13 @@ export declare class CardComponent implements OnChanges, OnInit {
      * @memberof CardComponent
      */
     set errors(errors: string[]);
+    /**
+     * Errors size
+     *
+     * @type {string}
+     * @memberof CardComponent
+     */
+    errorsSize?: string | undefined;
     /**
      * Marks card as selected
      *
@@ -59,8 +67,9 @@ export declare class CardComponent implements OnChanges, OnInit {
     ngOnChanges(): void;
     ngOnInit(): void;
     get cardVariant(): CardVariant;
+    get errorIconSize(): IconSize;
     get isSelected(): boolean;
     selectCard(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, [{ optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "ui-card", never, { "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "allowSelect": { "alias": "allowSelect"; "required": false; }; }, { "cardSelected": "cardSelected"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "ui-card", never, { "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "errorsSize": { "alias": "errorsSize"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "allowSelect": { "alias": "allowSelect"; "required": false; }; }, { "cardSelected": "cardSelected"; }, never, ["*"], false, never>;
 }

package/components/dialog/dialog.component.d.ts

@@ -33,6 +33,12 @@ export declare class DialogComponent implements OnInit, OnChanges, AfterViewInit
      * @memberof DialogComponent
      */
     secondaryButtonLabel?: string | undefined;
+    /**
+     * Footer dialog message
+     *
+     * @memberof DialogComponent
+     */
+    footerMessage?: string | undefined;
     /**
      * Primary button label
      *
@@ -152,5 +158,5 @@ export declare class DialogComponent implements OnInit, OnChanges, AfterViewInit
     onSecondaryButtonClick(event: Event): void;
     onPrimaryButtonClick(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DialogComponent, [{ optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DialogComponent, "ui-dialog", never, { "title": { "alias": "title"; "required": false; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; }; "canCloseFn": { "alias": "canCloseFn"; "required": false; }; "secondaryButtonLabel": { "alias": "secondaryButtonLabel"; "required": false; }; "primaryButtonLabel": { "alias": "primaryButtonLabel"; "required": false; }; "primaryButtonIconName": { "alias": "primaryButtonIconName"; "required": false; }; "secondaryButtonType": { "alias": "secondaryButtonType"; "required": false; }; "primaryButtonType": { "alias": "primaryButtonType"; "required": false; }; "primaryButtonDataTestId": { "alias": "primaryButtonDataTestId"; "required": false; }; "secondaryButtonDataTestId": { "alias": "secondaryButtonDataTestId"; "required": false; }; "companyColor": { "alias": "companyColor"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "disablePrimaryButton": { "alias": "disablePrimaryButton"; "required": false; }; "disableClose": { "alias": "disableClose"; "required": false; }; "shouldDisableButtons": { "alias": "shouldDisableButtons"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "keyboardOpen": { "alias": "keyboardOpen"; "required": false; }; }, { "closeEvent": "closeEvent"; "secondaryButtonClickEvent": "secondaryButtonClickEvent"; "primaryButtonClickEvent": "primaryButtonClickEvent"; }, ["customHeader"], ["[dialogHeader]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DialogComponent, "ui-dialog", never, { "title": { "alias": "title"; "required": false; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; }; "canCloseFn": { "alias": "canCloseFn"; "required": false; }; "secondaryButtonLabel": { "alias": "secondaryButtonLabel"; "required": false; }; "footerMessage": { "alias": "footerMessage"; "required": false; }; "primaryButtonLabel": { "alias": "primaryButtonLabel"; "required": false; }; "primaryButtonIconName": { "alias": "primaryButtonIconName"; "required": false; }; "secondaryButtonType": { "alias": "secondaryButtonType"; "required": false; }; "primaryButtonType": { "alias": "primaryButtonType"; "required": false; }; "primaryButtonDataTestId": { "alias": "primaryButtonDataTestId"; "required": false; }; "secondaryButtonDataTestId": { "alias": "secondaryButtonDataTestId"; "required": false; }; "companyColor": { "alias": "companyColor"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "disablePrimaryButton": { "alias": "disablePrimaryButton"; "required": false; }; "disableClose": { "alias": "disableClose"; "required": false; }; "shouldDisableButtons": { "alias": "shouldDisableButtons"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "keyboardOpen": { "alias": "keyboardOpen"; "required": false; }; }, { "closeEvent": "closeEvent"; "secondaryButtonClickEvent": "secondaryButtonClickEvent"; "primaryButtonClickEvent": "primaryButtonClickEvent"; }, ["customHeader"], ["[dialogHeader]", "*"], false, never>;
 }

package/components/empty-state/empty-state.component.d.ts

@@ -1,11 +1,14 @@
 import { EventEmitter } from '@angular/core';
-import { IconName } from '../icon/icon.model';
+import { SafeHtml } from '@angular/platform-browser';
 import { ApplicationTheme } from '../../models/application-theme.model';
+import { ButtonColor, ButtonIconPosition } from '../button/button.model';
+import { IconName } from '../icon/icon.model';
 import { ButtonVariant, EmptyStateVariant, IllustrationVariant } from './empty-state.model';
-import { ButtonIconPosition } from '../button/button.model';
 import * as i0 from "@angular/core";
 export declare class EmptyStateComponent {
     private readonly defaultAppTheme;
+    private domSanitizer;
+    safeBodyText: SafeHtml;
     /**
      * @description If the default image should be displayed.
      * @type {boolean}
@@ -41,7 +44,7 @@ export declare class EmptyStateComponent {
      * @type {string}
      * @memberof EmptyStateComponent
      */
-    bodyText: string;
+    set bodyText(value: string);
     /**
      * @description Displays primary button if passed.
      * @type {string}
@@ -54,6 +57,12 @@ export declare class EmptyStateComponent {
      * @memberof EmptyStateComponent
      */
     primaryButtonVariant: ButtonVariant;
+    /**
+     * General button variation - only for new theme.
+     * @type {ButtonColor}
+     * @memberof EmptyStateComponent
+     */
+    generalButtonVariation: ButtonColor;
     /**
      * @description Name of ui-icon for primary button
      * @type {IconName}
@@ -114,6 +123,30 @@ export declare class EmptyStateComponent {
      * @memberof EmptyStateComponent
      */
     tertiaryButtonIconPosition: ButtonIconPosition;
+    /**
+     * @description Displays general variation button if passed.
+     * @type {string}
+     * @memberof EmptyStateComponent
+     */
+    generalVariationButtonText: string;
+    /**
+     * @description Name of ui-icon for general variation button
+     * @type {IconName}
+     * @memberof EmptyStateComponent
+     */
+    generalVariationButtonIconName: IconName;
+    /**
+     * @description Position of ui-icon for general variation button
+     * @type {ButtonIconPosition}
+     * @memberof EmptyStateComponent
+     */
+    generalVariationButtonIconPosition: ButtonIconPosition;
+    /**
+     * @description Disabled state for general variation button
+     * @type {boolean}
+     * @memberof EmptyStateComponent
+     */
+    generalVariationButtonDisabled: boolean;
     /**
      *
      * Defines the application theme
@@ -143,13 +176,21 @@ export declare class EmptyStateComponent {
      * @memberof TagComponent
      */
     tertiaryButtonClick: EventEmitter<Event>;
+    /**
+     * Event triggered when the general variation button is clicked.
+     * @type {Event}
+     * @event
+     * @memberof TagComponent
+     */
+    generalVariationButtonClick: EventEmitter<Event>;
     buttonApplicationTheme: ApplicationTheme;
     constructor(defaultAppTheme: ApplicationTheme);
     ngOnInit(): void;
     onPrimaryButtonClick(event: Event): void;
     onSecondaryButtonClick(event: Event): void;
     onTertiaryButtonClick(event: Event): void;
+    onGeneralVariationButtonClick(event: Event): void;
     getVariant(variant: ButtonVariant): "primary" | "secondary" | "ghost";
     static ɵfac: i0.ɵɵFactoryDeclaration<EmptyStateComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EmptyStateComponent, "ui-empty-state", never, { "showIllustration": { "alias": "showIllustration"; "required": false; }; "illustrationVariant": { "alias": "illustrationVariant"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "emptyStateVariant": { "alias": "emptyStateVariant"; "required": false; }; "title": { "alias": "title"; "required": false; }; "bodyText": { "alias": "bodyText"; "required": false; }; "primaryButtonText": { "alias": "primaryButtonText"; "required": false; }; "primaryButtonVariant": { "alias": "primaryButtonVariant"; "required": false; }; "primaryButtonIconName": { "alias": "primaryButtonIconName"; "required": false; }; "primaryButtonIconPosition": { "alias": "primaryButtonIconPosition"; "required": false; }; "secondaryButtonText": { "alias": "secondaryButtonText"; "required": false; }; "secondaryButtonVariant": { "alias": "secondaryButtonVariant"; "required": false; }; "secondaryButtonIconName": { "alias": "secondaryButtonIconName"; "required": false; }; "secondaryButtonIconPosition": { "alias": "secondaryButtonIconPosition"; "required": false; }; "tertiaryButtonText": { "alias": "tertiaryButtonText"; "required": false; }; "tertiaryButtonVariant": { "alias": "tertiaryButtonVariant"; "required": false; }; "tertiaryButtonIconName": { "alias": "tertiaryButtonIconName"; "required": false; }; "tertiaryButtonIconPosition": { "alias": "tertiaryButtonIconPosition"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; }, { "primaryButtonClick": "primaryButtonClick"; "secondaryButtonClick": "secondaryButtonClick"; "tertiaryButtonClick": "tertiaryButtonClick"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EmptyStateComponent, "ui-empty-state", never, { "showIllustration": { "alias": "showIllustration"; "required": false; }; "illustrationVariant": { "alias": "illustrationVariant"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "emptyStateVariant": { "alias": "emptyStateVariant"; "required": false; }; "title": { "alias": "title"; "required": false; }; "bodyText": { "alias": "bodyText"; "required": false; }; "primaryButtonText": { "alias": "primaryButtonText"; "required": false; }; "primaryButtonVariant": { "alias": "primaryButtonVariant"; "required": false; }; "generalButtonVariation": { "alias": "generalButtonVariation"; "required": false; }; "primaryButtonIconName": { "alias": "primaryButtonIconName"; "required": false; }; "primaryButtonIconPosition": { "alias": "primaryButtonIconPosition"; "required": false; }; "secondaryButtonText": { "alias": "secondaryButtonText"; "required": false; }; "secondaryButtonVariant": { "alias": "secondaryButtonVariant"; "required": false; }; "secondaryButtonIconName": { "alias": "secondaryButtonIconName"; "required": false; }; "secondaryButtonIconPosition": { "alias": "secondaryButtonIconPosition"; "required": false; }; "tertiaryButtonText": { "alias": "tertiaryButtonText"; "required": false; }; "tertiaryButtonVariant": { "alias": "tertiaryButtonVariant"; "required": false; }; "tertiaryButtonIconName": { "alias": "tertiaryButtonIconName"; "required": false; }; "tertiaryButtonIconPosition": { "alias": "tertiaryButtonIconPosition"; "required": false; }; "generalVariationButtonText": { "alias": "generalVariationButtonText"; "required": false; }; "generalVariationButtonIconName": { "alias": "generalVariationButtonIconName"; "required": false; }; "generalVariationButtonIconPosition": { "alias": "generalVariationButtonIconPosition"; "required": false; }; "generalVariationButtonDisabled": { "alias": "generalVariationButtonDisabled"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; }, { "primaryButtonClick": "primaryButtonClick"; "secondaryButtonClick": "secondaryButtonClick"; "tertiaryButtonClick": "tertiaryButtonClick"; "generalVariationButtonClick": "generalVariationButtonClick"; }, never, never, false, never>;
 }

package/components/field/field.component.d.ts

@@ -6,6 +6,7 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { FieldType } from '../../components/field/field.model';
 import { ApplicationTheme } from '../../models/application-theme.model';
 import { IconName } from '../icon/icon.model';
+import { BadgeVariant } from '../badge/badge.model';
 import * as i0 from "@angular/core";
 /**
  * A global counter used to generate unique field IDs.
@@ -68,6 +69,13 @@ export declare class FieldComponent implements OnInit, ControlValueAccessor, DoC
      * @memberof FieldComponent
      */
     value: string;
+    /**
+     * Variant of badge to use
+     *
+     * @type {BadgeVariant}
+     * @memberof FieldComponent
+     */
+    badgeVariant?: BadgeVariant | undefined;
     _errors: SafeHtml[];
     /**
      * Input field errors
@@ -327,5 +335,5 @@ export declare class FieldComponent implements OnInit, ControlValueAccessor, DoC
     focus(): void;
     refocusPasswordButton(btn: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FieldComponent, [{ optional: true; }, null, null, null, { optional: true; self: true; }, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FieldComponent, "ui-field", never, { "fullWidth": { "alias": "fullWidth"; "required": false; }; "label": { "alias": "label"; "required": false; }; "fieldName": { "alias": "fieldName"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "hintMessage": { "alias": "hintMessage"; "required": false; }; "type": { "alias": "type"; "required": false; }; "updateOnBlur": { "alias": "updateOnBlur"; "required": false; }; "allowOnlyDigits": { "alias": "allowOnlyDigits"; "required": false; }; "allowNegative": { "alias": "allowNegative"; "required": false; }; "showBottomContent": { "alias": "showBottomContent"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "isValid": { "alias": "isValid"; "required": false; }; "maxCharacters": { "alias": "maxCharacters"; "required": false; }; "trimOnBlur": { "alias": "trimOnBlur"; "required": false; }; "trimOnSubmit": { "alias": "trimOnSubmit"; "required": false; }; "maxRows": { "alias": "maxRows"; "required": false; }; "hasTextAreaCounter": { "alias": "hasTextAreaCounter"; "required": false; }; "hideBuiltInErrors": { "alias": "hideBuiltInErrors"; "required": false; }; "hideLabelInErrors": { "alias": "hideLabelInErrors"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "textareaHeight": { "alias": "textareaHeight"; "required": false; }; "borderless": { "alias": "borderless"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; }; }, { "validateEvent": "validateEvent"; "fieldBlur": "fieldBlur"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldComponent, "ui-field", never, { "fullWidth": { "alias": "fullWidth"; "required": false; }; "label": { "alias": "label"; "required": false; }; "fieldName": { "alias": "fieldName"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "badgeVariant": { "alias": "badgeVariant"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "hintMessage": { "alias": "hintMessage"; "required": false; }; "type": { "alias": "type"; "required": false; }; "updateOnBlur": { "alias": "updateOnBlur"; "required": false; }; "allowOnlyDigits": { "alias": "allowOnlyDigits"; "required": false; }; "allowNegative": { "alias": "allowNegative"; "required": false; }; "showBottomContent": { "alias": "showBottomContent"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "isValid": { "alias": "isValid"; "required": false; }; "maxCharacters": { "alias": "maxCharacters"; "required": false; }; "trimOnBlur": { "alias": "trimOnBlur"; "required": false; }; "trimOnSubmit": { "alias": "trimOnSubmit"; "required": false; }; "maxRows": { "alias": "maxRows"; "required": false; }; "hasTextAreaCounter": { "alias": "hasTextAreaCounter"; "required": false; }; "hideBuiltInErrors": { "alias": "hideBuiltInErrors"; "required": false; }; "hideLabelInErrors": { "alias": "hideLabelInErrors"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "textareaHeight": { "alias": "textareaHeight"; "required": false; }; "borderless": { "alias": "borderless"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; }; }, { "validateEvent": "validateEvent"; "fieldBlur": "fieldBlur"; }, never, never, false, never>;
 }

package/components/field/field.component.module.d.ts

@@ -11,8 +11,9 @@ import * as i9 from "../../pipes/ui-translate.pipe";
 import * as i10 from "../validation-error/validation-error.module";
 import * as i11 from "../../pipes/has-validation-error.pipe";
 import * as i12 from "../../directives/digits-only.directive";
+import * as i13 from "../badge/badge.component.module";
 export declare class FieldComponentModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FieldComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FieldComponentModule, [typeof i1.FieldComponent], [typeof i2.CommonModule, typeof i3.MatFormFieldModule, typeof i4.MatInputModule, typeof i5.IconComponentModule, typeof i6.FormsModule, typeof i6.ReactiveFormsModule, typeof i7.ButtonComponentModule, typeof i8.MatIconModule, typeof i9.UiTranslatePipe, typeof i10.ValidationErrorModule, typeof i11.HasValidationErrorPipe, typeof i12.DigitsOnlyDirective], [typeof i1.FieldComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FieldComponentModule, [typeof i1.FieldComponent], [typeof i2.CommonModule, typeof i3.MatFormFieldModule, typeof i4.MatInputModule, typeof i5.IconComponentModule, typeof i6.FormsModule, typeof i6.ReactiveFormsModule, typeof i7.ButtonComponentModule, typeof i8.MatIconModule, typeof i9.UiTranslatePipe, typeof i10.ValidationErrorModule, typeof i11.HasValidationErrorPipe, typeof i12.DigitsOnlyDirective, typeof i13.BadgeComponentModule], [typeof i1.FieldComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FieldComponentModule>;
 }

package/components/icon-label/icon-label.component.d.ts

@@ -24,6 +24,13 @@ export declare class IconLabelComponent implements OnInit {
      * @memberof IconLabelComponent
      */
     text: string;
+    /**
+     * Icon color
+     *
+     * @type {IconColor}
+     * @memberof IconLabelComponent
+     */
+    iconColor?: string | undefined;
     /**
      *
      * Defines the application theme
@@ -35,5 +42,5 @@ export declare class IconLabelComponent implements OnInit {
     constructor(defaultAppTheme: ApplicationTheme);
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IconLabelComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IconLabelComponent, "ui-icon-label", never, { "iconSize": { "alias": "iconSize"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "text": { "alias": "text"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconLabelComponent, "ui-icon-label", never, { "iconSize": { "alias": "iconSize"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "text": { "alias": "text"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; }, {}, never, never, false, never>;
 }

package/components/skeleton/skeleton.component.d.ts

@@ -8,6 +8,7 @@ export declare class SkeletonComponent {
     count: number | string;
     set theme(value: NgxSkeletonLoaderConfigTheme);
     set appearance(value: Appearance);
+    isAiTheme: boolean;
     /**
      *
      * Defines the application theme
@@ -22,5 +23,5 @@ export declare class SkeletonComponent {
     protected readonly currentTheme$: import("rxjs").Observable<NgxSkeletonLoaderConfigTheme>;
     private getThemeWithDefaultValues;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonComponent, "ui-skeleton", never, { "count": { "alias": "count"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonComponent, "ui-skeleton", never, { "count": { "alias": "count"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "isAiTheme": { "alias": "isAiTheme"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; }, {}, never, never, true, never>;
 }

package/components/tabs/tab.directive.d.ts

@@ -1,6 +1,7 @@
 import { OnInit } from '@angular/core';
 import { IconName } from '../icon/icon.model';
 import { Tab } from './tabs.model';
+import { NgxSkeletonLoaderConfigTheme } from 'ngx-skeleton-loader';
 import * as i0 from "@angular/core";
 export declare class TabDirective implements OnInit {
     tabLabel: import("@angular/core").InputSignal<string>;
@@ -14,6 +15,8 @@ export declare class TabDirective implements OnInit {
     }) => boolean | Promise<boolean>) | undefined>;
     linkUrl: import("@angular/core").InputSignal<string | undefined>;
     order: import("@angular/core").InputSignal<number | undefined>;
+    skeletonTheme: import("@angular/core").InputSignal<NgxSkeletonLoaderConfigTheme | undefined>;
+    isSkeletonAiTheme: import("@angular/core").InputSignal<boolean | undefined>;
     private tabsComponent;
     private template;
     private syncProps;
@@ -21,5 +24,5 @@ export declare class TabDirective implements OnInit {
     ngOnInit(): void;
     private addTab;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TabDirective, "ng-template[uiTab]", never, { "tabLabel": { "alias": "tabLabel"; "required": true; "isSignal": true; }; "tabName": { "alias": "tabName"; "required": true; "isSignal": true; }; "iconLeft": { "alias": "iconLeft"; "required": false; "isSignal": true; }; "iconRight": { "alias": "iconRight"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "canLeave": { "alias": "canLeave"; "required": false; "isSignal": true; }; "linkUrl": { "alias": "linkUrl"; "required": false; "isSignal": true; }; "order": { "alias": "order"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TabDirective, "ng-template[uiTab]", never, { "tabLabel": { "alias": "tabLabel"; "required": true; "isSignal": true; }; "tabName": { "alias": "tabName"; "required": true; "isSignal": true; }; "iconLeft": { "alias": "iconLeft"; "required": false; "isSignal": true; }; "iconRight": { "alias": "iconRight"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "canLeave": { "alias": "canLeave"; "required": false; "isSignal": true; }; "linkUrl": { "alias": "linkUrl"; "required": false; "isSignal": true; }; "order": { "alias": "order"; "required": false; "isSignal": true; }; "skeletonTheme": { "alias": "skeletonTheme"; "required": false; "isSignal": true; }; "isSkeletonAiTheme": { "alias": "isSkeletonAiTheme"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/components/tabs/tabs.component.d.ts

@@ -51,6 +51,7 @@ export declare class TabsComponent {
      * @memberof TabsComponent
      */
     applicationTheme: ApplicationTheme;
+    isLoading: import("@angular/core").InputSignal<boolean>;
     selectedTabIndex: EventEmitter<number>;
     selectedTab: EventEmitter<Tab>;
     tabGroup: MatTabGroup;
@@ -70,7 +71,7 @@ export declare class TabsComponent {
     removeTab(tabName: string): void;
     updateTab(tabName: string, tab: Partial<Omit<Tab, 'tabName'>>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabsComponent, [{ optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "ui-tabs", never, { "companyColor": { "alias": "companyColor"; "required": false; }; "type": { "alias": "type"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "headerContentPadding": { "alias": "headerContentPadding"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; }, { "selectedTabIndex": "selectedTabIndex"; "selectedTab": "selectedTab"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "ui-tabs", never, { "companyColor": { "alias": "companyColor"; "required": false; }; "type": { "alias": "type"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "headerContentPadding": { "alias": "headerContentPadding"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; }, { "selectedTabIndex": "selectedTabIndex"; "selectedTab": "selectedTab"; }, never, never, false, never>;
     static ngAcceptInputType_headerContentPadding: number;
     static ngAcceptInputType_dynamicHeight: unknown;
 }

package/components/tabs/tabs.component.module.d.ts

@@ -5,8 +5,9 @@ import * as i3 from "@angular/common";
 import * as i4 from "@angular/material/tabs";
 import * as i5 from "../icon/icon.component.module";
 import * as i6 from "../../pipes/ui-translate.pipe";
+import * as i7 from "../skeleton/skeleton.component";
 export declare class TabsComponentModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TabsComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TabsComponentModule, [typeof i1.TabsComponent], [typeof i2.TabDirective, typeof i3.CommonModule, typeof i4.MatTabsModule, typeof i5.IconComponentModule, typeof i6.UiTranslatePipe], [typeof i1.TabsComponent, typeof i2.TabDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TabsComponentModule, [typeof i1.TabsComponent], [typeof i2.TabDirective, typeof i3.CommonModule, typeof i4.MatTabsModule, typeof i5.IconComponentModule, typeof i6.UiTranslatePipe, typeof i7.SkeletonComponent], [typeof i1.TabsComponent, typeof i2.TabDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TabsComponentModule>;
 }

package/components/tabs/tabs.model.d.ts

@@ -1,4 +1,5 @@
 import { IconName } from '../icon/icon.model';
+import { NgxSkeletonLoaderConfigTheme } from 'ngx-skeleton-loader';
 export interface Tab {
     tabName: string;
     tabLabel: string;
@@ -13,5 +14,7 @@ export interface Tab {
     linkUrl?: string;
     ariaLabel?: string;
     order?: number;
+    skeletonTheme?: NgxSkeletonLoaderConfigTheme;
+    isSkeletonAiTheme?: boolean;
 }
 export type TabsType = 'underlined' | 'filled';