@leanix/components 0.4.748 → 0.4.750

package/fesm2022/leanix-components.mjs

@@ -1103,36 +1103,45 @@ function isFontAwesomeIcon(iconName) {
 
 class IconScaleComponent {
     constructor() {
-        this.icon = {
-            type: 'star'
-        };
-        this.numberOfColoredItems = 0;
-        this.numberOfItems = 0;
+        /**
+         * The icon to render
+         */
+        this.icon = input({ type: 'star' });
+        /**
+         * The amount of colored (active) icons
+         */
+        this.numberOfColoredItems = input(0);
+        /**
+         * The total amount of icons
+         */
+        this.numberOfItems = input(0);
+        this.isFontAwesomeIcon = computed(() => {
+            const fontAwesomeIconName = `fa-${this.icon().type}`;
+            return !!ICON_MAP[fontAwesomeIconName];
+        });
+        this.iconName = computed(() => {
+            if (this.isFontAwesomeIcon()) {
+                return `fa-${this.icon().type}`;
+            }
+            return this.icon().type;
+        });
+        this.iconArray = computed(() => {
+            return this.createIconArray(this.numberOfColoredItems(), this.numberOfItems(), this.icon().order || 'ASC');
+        });
         /** @internal */
         this.NAME = 'IconScaleComponent';
-        /** @internal */
-        this.iconArray = [];
-    }
-    ngOnChanges(_changes) {
-        this.iconArray = this.createIconArray(this.numberOfColoredItems, this.numberOfItems, this.icon?.order || 'ASC');
     }
     createIconArray(items, totalItems, order) {
         const coloredItems = order === 'DESC' ? totalItems - items + 1 : items;
         return [...Array(totalItems).keys()].map((index) => index < coloredItems);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: IconScaleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: IconScaleComponent, isStandalone: true, selector: "lx-icon-scale", inputs: { icon: "icon", numberOfColoredItems: "numberOfColoredItems", numberOfItems: "numberOfItems" }, usesOnChanges: true, ngImport: i0, template: "@for (isColored of iconArray; track $index) {\n  <span data-testid=\"icon-scale\" class=\"iconElement fas fa-{{ icon.type }}\" [style.color]=\"isColored ? icon.color : null\"> </span>\n}\n", styles: [".iconElement{color:#c2c9d6;width:15px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: IconScaleComponent, isStandalone: true, selector: "lx-icon-scale", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, numberOfColoredItems: { classPropertyName: "numberOfColoredItems", publicName: "numberOfColoredItems", isSignal: true, isRequired: false, transformFunction: null }, numberOfItems: { classPropertyName: "numberOfItems", publicName: "numberOfItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (isColored of iconArray(); track $index) {\n  @if (isFontAwesomeIcon()) {\n    <span data-testid=\"icon-scale\" class=\"faIconElement fas {{ iconName() }}\" [style.color]=\"isColored ? icon().color : null\"> </span>\n  } @else {\n    <ui5-icon data-testid=\"icon-scale\" class=\"iconElement\" [name]=\"iconName()\" [style.color]=\"isColored ? icon().color : null\" />\n  }\n}\n", styles: [".iconElement{color:#c2c9d6;vertical-align:middle}.faIconElement{color:#c2c9d6;width:15px}\n"], dependencies: [{ kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: IconScaleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-icon-scale', changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (isColored of iconArray; track $index) {\n  <span data-testid=\"icon-scale\" class=\"iconElement fas fa-{{ icon.type }}\" [style.color]=\"isColored ? icon.color : null\"> </span>\n}\n", styles: [".iconElement{color:#c2c9d6;width:15px}\n"] }]
-        }], propDecorators: { icon: [{
-                type: Input
-            }], numberOfColoredItems: [{
-                type: Input
-            }], numberOfItems: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'lx-icon-scale', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent$1], template: "@for (isColored of iconArray(); track $index) {\n  @if (isFontAwesomeIcon()) {\n    <span data-testid=\"icon-scale\" class=\"faIconElement fas {{ iconName() }}\" [style.color]=\"isColored ? icon().color : null\"> </span>\n  } @else {\n    <ui5-icon data-testid=\"icon-scale\" class=\"iconElement\" [name]=\"iconName()\" [style.color]=\"isColored ? icon().color : null\" />\n  }\n}\n", styles: [".iconElement{color:#c2c9d6;vertical-align:middle}.faIconElement{color:#c2c9d6;width:15px}\n"] }]
+        }] });
 
 /**
  * The following CSS classes should be used to style this component. The use of the inputs is deprecated.
@@ -2666,6 +2675,7 @@ class LxCoreUiModule {
             ButtonComponent,
             CollapsibleComponent,
             EllipsisComponent,
+            IconScaleComponent,
             StepperComponent,
             TableHeaderComponent,
             EmptyStateComponent] }); }