Metergroup new

angular.json

@@ -118,5 +118,8 @@
                 }
             }
         }
+    },
+    "cli": {
+      "analytics": false
     }
 }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "primeng",
-    "version": "17.7.0",
+    "version": "17.8.0",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {
         "ng": "ng",
@@ -24,22 +24,22 @@
     },
     "devDependencies": {
         "@angular-devkit/build-angular": "^17.0.5",
-        "@angular-eslint/eslint-plugin": "17.1.1",
-        "@angular-eslint/eslint-plugin-template": "17.1.1",
-        "@angular-eslint/schematics": "17.1.1",
-        "@angular-eslint/template-parser": "17.1.1",
-        "@angular/animations": "^17.0.5",
-        "@angular/cdk": "^17.0.2",
-        "@angular/cli": "^17.0.5",
-        "@angular/common": "^17.0.5",
-        "@angular/compiler": "^17.0.5",
-        "@angular/compiler-cli": "^17.0.5",
-        "@angular/core": "^17.0.5",
-        "@angular/forms": "^17.0.5",
-        "@angular/platform-browser": "^17.0.5",
-        "@angular/platform-browser-dynamic": "^17.0.5",
-        "@angular/platform-server": "^17.0.5",
-        "@angular/router": "^17.0.5",
+        "@angular-eslint/eslint-plugin": "17.2.1",
+        "@angular-eslint/eslint-plugin-template": "17.2.1",
+        "@angular-eslint/schematics": "17.2.1",
+        "@angular-eslint/template-parser": "17.2.1",
+        "@angular/animations": "^17.2.2",
+        "@angular/cdk": "^17.2.1",
+        "@angular/cli": "^17.2.1",
+        "@angular/common": "^17.2.2",
+        "@angular/compiler": "^17.2.2",
+        "@angular/compiler-cli": "^17.2.2",
+        "@angular/core": "^17.2.2",
+        "@angular/forms": "^17.2.2",
+        "@angular/platform-browser": "^17.2.2",
+        "@angular/platform-browser-dynamic": "^17.2.2",
+        "@angular/platform-server": "^17.2.2",
+        "@angular/router": "^17.2.2",
         "@stackblitz/sdk": "1.9.0",
         "@types/express": "^4.17.17",
         "@types/jasmine": "~4.3.1",
@@ -72,7 +72,7 @@
         "karma-coverage": "~2.2.0",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.0.0",
-        "ng-packagr": "^17.0.2",
+        "ng-packagr": "^17.2.0",
         "prettier": "2.8.8",
         "primeflex": "^3.3.1",
         "primeicons": "^6.0.1",
@@ -85,8 +85,8 @@
         "typescript": "5.2.2",
         "xlsx": "^0.18.5",
         "zone.js": "~0.14.0",
-        "@angular/ssr": "^17.0.5",
+        "@angular/ssr": "^17.2.1",
         "@docsearch/js": "^3.3.4",
         "esbuild": "^0.19.8"
     }
-}
+}

src/app/components/metergroup/metergroup.interface.ts

@@ -0,0 +1,108 @@
+import { TemplateRef } from '@angular/core';
+
+/**
+ * Defines valid templates in MeterGroup.
+ * @group Templates
+ */
+export interface MeterGroupTemplates {
+    /**
+     * Custom label template.
+     */
+    label(context: {
+        /**
+         * Current value of the component.
+         */
+        $implicit?: MeterItem;
+        /**
+         * Total percent of the metergroup items.
+         */
+        totalPercent?: number;
+        /**
+         * Array of sequential sum of values of metergroup items.
+         */
+        percentages?: number;
+    }): TemplateRef<any>;
+    /**
+     * Custom meter item template.
+     */
+    meter(context: {
+        /**
+         * Current value of the component.
+         */
+        $implicit?: MeterItem;
+        /**
+         * Current index of the meter item.
+         */
+        index?: number;
+        /**
+         * Style class of the meter item
+         */
+        class?: string;
+        /**
+         * Current orientation of the component.
+         */
+        orientation?: string;
+        /**
+         * Current width of the meter item.
+         */
+        size?: string;
+        /**
+         * Total percent of the metergroup items
+         */
+        totalPercent?: number;
+    }): TemplateRef<any>;
+    /**
+     * Custom start template.
+     */
+    start(context: {
+        /**
+         * Current value of the component.
+         */
+        $implicit?: MeterItem;
+        /**
+         * Total percent of the metergroup items.
+         */
+        totalPercent?: number;
+        /**
+         * Array of sequential sum of values of metergroup items.
+         */
+        percentages?: number;
+    }): TemplateRef<any>;
+    /**
+     * Custom start template.
+     */
+    end(context: {
+        /**
+         * Current value of the component.
+         */
+        $implicit?: MeterItem;
+        /**
+         * Total percent of the metergroup items.
+         */
+        totalPercent?: number;
+        /**
+         * Array of sequential sum of values of metergroup items.
+         */
+        percentages?: number;
+    }): TemplateRef<any>;
+    /**
+     * Custom icon template.
+     */
+    icon(context: {
+        /**
+         * Current value of the component.
+         */
+        $implicit?: MeterItem;
+        /**
+         * Style class of the icon.
+         */
+        class?: string;
+    }): TemplateRef<any>;
+}
+
+export interface MeterItem {
+    label?: string;
+    value?: number;
+    color?: string;
+    icon?: string;
+}