primereact 10.5.0 → 10.5.2

package/metergroup/metergroup.d.ts

@@ -0,0 +1,183 @@
+/**
+ *
+ * MeterGroup displays scalar measurements within a known range.
+ *
+ * [Live Demo](https://www.primereact.org/metergroup/)
+ *
+ * @module metergroup
+ *
+ */
+import * as React from 'react';
+import { ComponentType, ReactNode } from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { CheckboxPassThroughOptions } from '../checkbox/checkbox';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition/csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { SelectItemOptionsType } from '../selectitem/selectitem';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { IconType, PassThroughType } from '../utils/utils';
+import { VirtualScrollerPassThroughOptions, VirtualScrollerProps } from '../virtualscroller/virtualscroller';
+
+export declare type MeterGroupPassThroughType<T> = PassThroughType<T, MeterGroupPassThroughMethodOptions>;
+export declare type MeterGroupPassThroughTransitionType = ReactCSSTransitionProps | ((options: MeterGroupPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Defines current options in MeterGroup component.
+ */
+export interface MeterGroupContext {
+    /**
+     * Current disabled state of the component as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MeterGroupPassThroughMethodOptions {
+    props: MeterGroupProps;
+    context: MeterGroupContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MeterGroupProps.pt}
+ */
+export interface MeterGroupPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: MeterGroupPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to pass attributes to the label list's DOM element.
+     */
+    labellist?: MeterGroupPassThroughType<React.HTMLAttributes<HTMLOListElement>>;
+    /**
+     * Used to pass attributes to the label list item's DOM element.
+     */
+    labellistitem?: MeterGroupPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Used to pass attributes to the label list type's DOM element.
+     */
+    labellisttype?: MeterGroupPassThroughType<React.HTMLAttributes<HTMLOrSVGElement | any>>;
+    /**
+     * Used to pass attributes to the label's DOM element.
+     */
+    label?: MeterGroupPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to pass attributes to the meter container's DOM element.
+     */
+    metercontainer?: MeterGroupPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to pass attributes to the meter's DOM element.
+     */
+    meter?: MeterGroupPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+
+interface MeterGroupValue {
+    value?: number;
+    label?: string | HTMLElement;
+    color?: string;
+    [key: string]: any;
+}
+
+interface CustomRenderProps {
+    totaLPercent: number;
+    percentages: number[];
+    values: MeterGroupValue[];
+}
+
+/**
+ * Defines valid properties in MeterGroup component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+interface MeterGroupProps {
+    /**
+     * Additional CSS classes to apply to the MeterGroup.
+     */
+    className?: string;
+
+    /**
+     * An array of values to be represented by the MeterGroup.
+     */
+    values?: MeterGroupValue[];
+
+    /**
+     * The minimum value for the MeterGroup.
+     * @defaultValue 0
+     */
+    min?: number;
+
+    /**
+     * The maximum value for the MeterGroup.
+     * @defaultValue 100
+     */
+    max?: number;
+
+    /**
+     * The orientation of the MeterGroup. Can be either 'horizontal' or 'vertical'.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+
+    /**
+     * The position of the label. Can be either 'start' or 'end'.
+     * @defaultValue 'end'
+     */
+    labelPosition?: 'start' | 'end';
+
+    /**
+     * The orientation of the label. Can be either 'horizontal' or 'vertical'.
+     * @defaultValue 'horizontal'
+     */
+    labelOrientation?: 'horizontal' | 'vertical';
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MeterGroupPassThroughOptions}
+     */
+    pt?: MeterGroupPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * A function to render custom start label.
+     * @param {CustomRenderProps} prop - Custom Render Props
+     */
+    start?: (props: CustomRenderProps) => ReactNode;
+
+    /**
+     * A function to render custom end label.
+     * @param {CustomRenderProps} prop - Custom Render Props
+     */
+    end?: (props: CustomRenderProps) => ReactNode;
+
+    /**
+     * A function to render a custom meter.
+     * @param {CustomRenderProps} prop - Custom Render Props
+     */
+    meter?: (props: CustomRenderProps) => ReactNode;
+
+    /**
+     * A function to render a custom label list.
+     * @param {CustomRenderProps} prop - Custom Render Props
+     */
+    labelList?: (props: CustomRenderProps) => ReactNode;
+}
+
+/**
+ * **PrimeReact - MeterGroup**
+ *
+ * _MeterGroup is an extension to standard input element with theming and keyfiltering._
+ *
+ * [Live Demo](https://www.primereact.org/metergroup/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class MeterGroup extends React.Component<MeterGroupProps, any> {}

package/metergroup/metergroup.esm.js

@@ -0,0 +1,233 @@
+'use client';
+import { useContext } from 'react';
+import { useMergeProps } from 'primereact/hooks';
+import { PrimeReactContext } from 'primereact/api';
+import { classNames, ObjectUtils } from 'primereact/utils';
+import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+var classes = {
+  root: function root(_ref) {
+    var props = _ref.props;
+    return [classNames('p-metergroup p-component', {
+      'p-metergroup-horizontal': props.orientation === 'horizontal',
+      'p-metergroup-vertical': props.orientation === 'vertical'
+    })];
+  },
+  metercontainer: 'p-metergroup-meter-container',
+  meter: 'p-metergroup-meter',
+  labellist: function labellist(_ref2) {
+    var props = _ref2.props;
+    return classNames('p-metergroup-label-list', {
+      'p-metergroup-label-list-start': props.labelPosition === 'start',
+      'p-metergroup-label-list-end': props.labelPosition === 'end',
+      'p-metergroup-label-list-vertical': props.labelOrientation === 'vertical',
+      'p-metergroup-label-list-horizontal': props.labelOrientation === 'horizontal'
+    });
+  },
+  labellistitem: 'p-metergroup-label-list-item',
+  labelicon: 'p-metergroup-label-icon',
+  labellisttype: 'p-metergroup-label-type',
+  label: 'p-metergroup-label'
+};
+var styles = "\n@layer primereact {\n    .p-metergroup {\n        position: relative;\n        overflow: hidden;\n    }\n\n    .p-metergroup-vertical.p-metergroup {\n        display: flex;\n    }\n\n    .p-metergroup-vertical .p-metergroup-meter-container {\n        flex-direction: column;\n    }\n\n    .p-metergroup-meter-container {\n        display: flex;\n    }\n\n    .p-metergroup-label-list {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n\n    .p-metergroup-vertical .p-metergroup-label-list {\n        align-items: start;\n    }\n\n    .p-metergroup-label-list-vertical {\n        flex-direction: column;\n    }\n\n    .p-metergroup-label-list-horizontal {\n        flex-direction: row;\n    }\n\n    .p-metergroup-label-list-item {\n        display: inline-flex;\n        align-items: center;\n    }\n\n    .p-metergroup-label-type {\n        display: inline-block;\n    }\n}\n";
+var MeterGroupBase = ComponentBase.extend({
+  defaultProps: {
+    __TYPE: 'MeterGroup',
+    __parentMetadata: null,
+    children: undefined,
+    className: null,
+    values: null,
+    min: 0,
+    max: 100,
+    orientation: 'horizontal',
+    labelPosition: 'end',
+    labelOrientation: 'horizontal',
+    start: null,
+    end: null,
+    meter: null,
+    labelList: null
+  },
+  css: {
+    classes: classes,
+    styles: styles
+  }
+});
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MeterGroup = function MeterGroup(inProps) {
+  var context = useContext(PrimeReactContext);
+  var props = MeterGroupBase.getProps(inProps, context);
+  var values = props.values,
+    min = props.min,
+    max = props.max,
+    orientation = props.orientation,
+    labelPosition = props.labelPosition,
+    start = props.start,
+    end = props.end,
+    meter = props.meter,
+    labelList = props.labelList;
+  var mergeProps = useMergeProps();
+  var _MeterGroupBase$setMe = MeterGroupBase.setMetaData(_objectSpread(_objectSpread({
+      props: props
+    }, props.__parentMetadata), {}, {
+      context: {
+        disabled: props.disabled
+      }
+    })),
+    ptm = _MeterGroupBase$setMe.ptm,
+    cx = _MeterGroupBase$setMe.cx,
+    isUnstyled = _MeterGroupBase$setMe.isUnstyled;
+  useHandleStyle(MeterGroupBase.css.styles, isUnstyled, {
+    name: 'progressbar'
+  });
+  var totalPercent = 0;
+  var precentages = [];
+  values.map(function (item) {
+    totalPercent += item.value;
+    precentages.push(Math.round(item.value / totalPercent * 100));
+  });
+  var calculatePercentage = function calculatePercentage() {
+    var meterValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var percentageOfItem = (meterValue - min) / (max - min) * 100;
+    return Math.round(Math.max(0, Math.min(100, percentageOfItem)));
+  };
+  var rootProps = mergeProps({
+    className: classNames(props.className, cx('root', {
+      orientation: orientation
+    }))
+  }, MeterGroupBase.getOtherProps(props), ptm('root'));
+  var createMeters = function createMeters() {
+    var meters = values.map(function (item, index) {
+      var calculatedPercantage = calculatePercentage(item.value);
+      var meterInlineStyles = {
+        backgroundColor: item.color,
+        width: orientation === 'horizontal' ? calculatedPercantage + '%' : 'auto',
+        height: orientation === 'vertical' ? calculatedPercantage + '%' : 'auto'
+      };
+      var meterProps = mergeProps({
+        className: cx('meter'),
+        style: meterInlineStyles
+      }, ptm('meter'));
+      if (meter || item.meterTemplate) {
+        var meterTemplateProps = mergeProps({
+          className: cx('meter')
+        }, ptm('meter'));
+        return ObjectUtils.getJSXElement(item.meterTemplate || meter, _objectSpread(_objectSpread({}, item), {}, {
+          percentage: calculatedPercantage,
+          index: index
+        }), meterTemplateProps);
+      } else {
+        return /*#__PURE__*/React.createElement("span", _extends({
+          key: index
+        }, meterProps));
+      }
+    });
+    var meterContainerProps = mergeProps({
+      className: cx('metercontainer')
+    }, ptm('metercontainer'));
+    return /*#__PURE__*/React.createElement("div", meterContainerProps, meters);
+  };
+  var createLabelList = function createLabelList() {
+    var labelListProps = mergeProps({
+      className: cx('labellist')
+    }, ptm('labellist'));
+    var labelItemProps = mergeProps({
+      className: cx('labellistitem')
+    }, ptm('labellistitem'));
+    var labelProps = mergeProps({
+      className: cx('label')
+    }, ptm('label'));
+    return /*#__PURE__*/React.createElement("ol", labelListProps, values.map(function (item, index) {
+      var labelIconProps = mergeProps({
+        className: classNames(cx('labelicon'), item.icon),
+        style: {
+          color: item.color
+        }
+      }, ptm('labelicon'));
+      var labelListIconProps = mergeProps({
+        className: cx('labellisttype'),
+        style: {
+          backgroundColor: item.color
+        }
+      }, ptm('labellisttype'));
+      var labelIcon = item.icon ? /*#__PURE__*/React.createElement("i", labelIconProps) : /*#__PURE__*/React.createElement("span", labelListIconProps);
+      return /*#__PURE__*/React.createElement("li", _extends({
+        key: index
+      }, labelItemProps), labelIcon, /*#__PURE__*/React.createElement("span", labelProps, item === null || item === void 0 ? void 0 : item.label, " ", (item === null || item === void 0 ? void 0 : item.value) && "(".concat(item === null || item === void 0 ? void 0 : item.value, "%)")));
+    }));
+  };
+  var templateProps = {
+    totalPercent: totalPercent,
+    precentages: precentages,
+    values: values
+  };
+  var labelElement = ObjectUtils.getJSXElement(labelList || createLabelList, {
+    values: values,
+    totalPercent: totalPercent
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({}, rootProps, {
+    role: "meter",
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-valuenow": totalPercent
+  }), labelPosition === 'start' && labelElement, start && ObjectUtils.getJSXElement(start, templateProps), createMeters(), end && ObjectUtils.getJSXElement(end, templateProps), labelPosition === 'end' && labelElement);
+};
+
+export { MeterGroup };

package/metergroup/metergroup.esm.min.js

@@ -0,0 +1 @@
+import{useContext as e}from"react";import{useMergeProps as t}from"primereact/hooks";import{PrimeReactContext as r}from"primereact/api";import{classNames as n,ObjectUtils as l}from"primereact/utils";import{ComponentBase as a,useHandleStyle as o}from"primereact/componentbase";function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},i.apply(this,arguments)}function p(e){return p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p(e)}function c(e,t){if("object"!==p(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==p(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function m(e){var t=c(e,"string");return"symbol"===p(t)?t:String(t)}var s=a.extend({defaultProps:{__TYPE:"MeterGroup",__parentMetadata:null,children:void 0,className:null,values:null,min:0,max:100,orientation:"horizontal",labelPosition:"end",labelOrientation:"horizontal",start:null,end:null,meter:null,labelList:null},css:{classes:{root:function(e){var t=e.props;return[n("p-metergroup p-component",{"p-metergroup-horizontal":"horizontal"===t.orientation,"p-metergroup-vertical":"vertical"===t.orientation})]},metercontainer:"p-metergroup-meter-container",meter:"p-metergroup-meter",labellist:function(e){var t=e.props;return n("p-metergroup-label-list",{"p-metergroup-label-list-start":"start"===t.labelPosition,"p-metergroup-label-list-end":"end"===t.labelPosition,"p-metergroup-label-list-vertical":"vertical"===t.labelOrientation,"p-metergroup-label-list-horizontal":"horizontal"===t.labelOrientation})},labellistitem:"p-metergroup-label-list-item",labelicon:"p-metergroup-label-icon",labellisttype:"p-metergroup-label-type",label:"p-metergroup-label"},styles:"\n@layer primereact {\n    .p-metergroup {\n        position: relative;\n        overflow: hidden;\n    }\n\n    .p-metergroup-vertical.p-metergroup {\n        display: flex;\n    }\n\n    .p-metergroup-vertical .p-metergroup-meter-container {\n        flex-direction: column;\n    }\n\n    .p-metergroup-meter-container {\n        display: flex;\n    }\n\n    .p-metergroup-label-list {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n\n    .p-metergroup-vertical .p-metergroup-label-list {\n        align-items: start;\n    }\n\n    .p-metergroup-label-list-vertical {\n        flex-direction: column;\n    }\n\n    .p-metergroup-label-list-horizontal {\n        flex-direction: row;\n    }\n\n    .p-metergroup-label-list-item {\n        display: inline-flex;\n        align-items: center;\n    }\n\n    .p-metergroup-label-type {\n        display: inline-block;\n    }\n}\n"}});function u(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function b(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?u(Object(r),!0).forEach((function(t){var n,l,a;n=e,a=r[t],(l=m(l=t))in n?Object.defineProperty(n,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):n[l]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var g=function(a){var p=e(r),c=s.getProps(a,p),m=c.values,u=c.min,g=c.max,v=c.orientation,f=c.labelPosition,y=c.start,d=c.end,h=c.meter,O=c.labelList,P=t(),j=s.setMetaData(b(b({props:c},c.__parentMetadata),{},{context:{disabled:c.disabled}})),x=j.ptm,E=j.cx;o(s.css.styles,j.isUnstyled,{name:"progressbar"});var w=0,S=[];m.map((function(e){w+=e.value,S.push(Math.round(e.value/w*100))}));var N,z,M=function(){return Math.round(Math.max(0,Math.min(100,((arguments.length>0&&void 0!==arguments[0]?arguments[0]:0)-u)/(g-u)*100)))},R=P({className:n(c.className,E("root",{orientation:v}))},s.getOtherProps(c),x("root")),k={totalPercent:w,precentages:S,values:m},_=l.getJSXElement(O||function(){var e=P({className:E("labellist")},x("labellist")),t=P({className:E("labellistitem")},x("labellistitem")),r=P({className:E("label")},x("label"));return React.createElement("ol",e,m.map((function(e,l){var a=P({className:n(E("labelicon"),e.icon),style:{color:e.color}},x("labelicon")),o=P({className:E("labellisttype"),style:{backgroundColor:e.color}},x("labellisttype")),p=e.icon?React.createElement("i",a):React.createElement("span",o);return React.createElement("li",i({key:l},t),p,React.createElement("span",r,null==e?void 0:e.label," ",(null==e?void 0:e.value)&&"(".concat(null==e?void 0:e.value,"%)")))})))},{values:m,totalPercent:w});return React.createElement("div",i({},R,{role:"meter","aria-valuemin":u,"aria-valuemax":g,"aria-valuenow":w}),"start"===f&&_,y&&l.getJSXElement(y,k),(N=m.map((function(e,t){var r=M(e.value),n={backgroundColor:e.color,width:"horizontal"===v?r+"%":"auto",height:"vertical"===v?r+"%":"auto"},a=P({className:E("meter"),style:n},x("meter"));if(h||e.meterTemplate){var o=P({className:E("meter")},x("meter"));return l.getJSXElement(e.meterTemplate||h,b(b({},e),{},{percentage:r,index:t}),o)}return React.createElement("span",i({key:t},a))})),z=P({className:E("metercontainer")},x("metercontainer")),React.createElement("div",z,N)),d&&l.getJSXElement(d,k),"end"===f&&_)};export{g as MeterGroup};

package/metergroup/metergroup.js

@@ -0,0 +1,236 @@
+this.primereact = this.primereact || {};
+this.primereact.metergroup = (function (exports, react, hooks, api, utils, componentbase) {
+  'use strict';
+
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+
+  function _typeof(o) {
+    "@babel/helpers - typeof";
+
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+      return typeof o;
+    } : function (o) {
+      return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+    }, _typeof(o);
+  }
+
+  function _toPrimitive(input, hint) {
+    if (_typeof(input) !== "object" || input === null) return input;
+    var prim = input[Symbol.toPrimitive];
+    if (prim !== undefined) {
+      var res = prim.call(input, hint || "default");
+      if (_typeof(res) !== "object") return res;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return (hint === "string" ? String : Number)(input);
+  }
+
+  function _toPropertyKey(arg) {
+    var key = _toPrimitive(arg, "string");
+    return _typeof(key) === "symbol" ? key : String(key);
+  }
+
+  function _defineProperty(obj, key, value) {
+    key = _toPropertyKey(key);
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+    return obj;
+  }
+
+  var classes = {
+    root: function root(_ref) {
+      var props = _ref.props;
+      return [utils.classNames('p-metergroup p-component', {
+        'p-metergroup-horizontal': props.orientation === 'horizontal',
+        'p-metergroup-vertical': props.orientation === 'vertical'
+      })];
+    },
+    metercontainer: 'p-metergroup-meter-container',
+    meter: 'p-metergroup-meter',
+    labellist: function labellist(_ref2) {
+      var props = _ref2.props;
+      return utils.classNames('p-metergroup-label-list', {
+        'p-metergroup-label-list-start': props.labelPosition === 'start',
+        'p-metergroup-label-list-end': props.labelPosition === 'end',
+        'p-metergroup-label-list-vertical': props.labelOrientation === 'vertical',
+        'p-metergroup-label-list-horizontal': props.labelOrientation === 'horizontal'
+      });
+    },
+    labellistitem: 'p-metergroup-label-list-item',
+    labelicon: 'p-metergroup-label-icon',
+    labellisttype: 'p-metergroup-label-type',
+    label: 'p-metergroup-label'
+  };
+  var styles = "\n@layer primereact {\n    .p-metergroup {\n        position: relative;\n        overflow: hidden;\n    }\n\n    .p-metergroup-vertical.p-metergroup {\n        display: flex;\n    }\n\n    .p-metergroup-vertical .p-metergroup-meter-container {\n        flex-direction: column;\n    }\n\n    .p-metergroup-meter-container {\n        display: flex;\n    }\n\n    .p-metergroup-label-list {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n\n    .p-metergroup-vertical .p-metergroup-label-list {\n        align-items: start;\n    }\n\n    .p-metergroup-label-list-vertical {\n        flex-direction: column;\n    }\n\n    .p-metergroup-label-list-horizontal {\n        flex-direction: row;\n    }\n\n    .p-metergroup-label-list-item {\n        display: inline-flex;\n        align-items: center;\n    }\n\n    .p-metergroup-label-type {\n        display: inline-block;\n    }\n}\n";
+  var MeterGroupBase = componentbase.ComponentBase.extend({
+    defaultProps: {
+      __TYPE: 'MeterGroup',
+      __parentMetadata: null,
+      children: undefined,
+      className: null,
+      values: null,
+      min: 0,
+      max: 100,
+      orientation: 'horizontal',
+      labelPosition: 'end',
+      labelOrientation: 'horizontal',
+      start: null,
+      end: null,
+      meter: null,
+      labelList: null
+    },
+    css: {
+      classes: classes,
+      styles: styles
+    }
+  });
+
+  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+  var MeterGroup = function MeterGroup(inProps) {
+    var context = react.useContext(api.PrimeReactContext);
+    var props = MeterGroupBase.getProps(inProps, context);
+    var values = props.values,
+      min = props.min,
+      max = props.max,
+      orientation = props.orientation,
+      labelPosition = props.labelPosition,
+      start = props.start,
+      end = props.end,
+      meter = props.meter,
+      labelList = props.labelList;
+    var mergeProps = hooks.useMergeProps();
+    var _MeterGroupBase$setMe = MeterGroupBase.setMetaData(_objectSpread(_objectSpread({
+        props: props
+      }, props.__parentMetadata), {}, {
+        context: {
+          disabled: props.disabled
+        }
+      })),
+      ptm = _MeterGroupBase$setMe.ptm,
+      cx = _MeterGroupBase$setMe.cx,
+      isUnstyled = _MeterGroupBase$setMe.isUnstyled;
+    componentbase.useHandleStyle(MeterGroupBase.css.styles, isUnstyled, {
+      name: 'progressbar'
+    });
+    var totalPercent = 0;
+    var precentages = [];
+    values.map(function (item) {
+      totalPercent += item.value;
+      precentages.push(Math.round(item.value / totalPercent * 100));
+    });
+    var calculatePercentage = function calculatePercentage() {
+      var meterValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var percentageOfItem = (meterValue - min) / (max - min) * 100;
+      return Math.round(Math.max(0, Math.min(100, percentageOfItem)));
+    };
+    var rootProps = mergeProps({
+      className: utils.classNames(props.className, cx('root', {
+        orientation: orientation
+      }))
+    }, MeterGroupBase.getOtherProps(props), ptm('root'));
+    var createMeters = function createMeters() {
+      var meters = values.map(function (item, index) {
+        var calculatedPercantage = calculatePercentage(item.value);
+        var meterInlineStyles = {
+          backgroundColor: item.color,
+          width: orientation === 'horizontal' ? calculatedPercantage + '%' : 'auto',
+          height: orientation === 'vertical' ? calculatedPercantage + '%' : 'auto'
+        };
+        var meterProps = mergeProps({
+          className: cx('meter'),
+          style: meterInlineStyles
+        }, ptm('meter'));
+        if (meter || item.meterTemplate) {
+          var meterTemplateProps = mergeProps({
+            className: cx('meter')
+          }, ptm('meter'));
+          return utils.ObjectUtils.getJSXElement(item.meterTemplate || meter, _objectSpread(_objectSpread({}, item), {}, {
+            percentage: calculatedPercantage,
+            index: index
+          }), meterTemplateProps);
+        } else {
+          return /*#__PURE__*/React.createElement("span", _extends({
+            key: index
+          }, meterProps));
+        }
+      });
+      var meterContainerProps = mergeProps({
+        className: cx('metercontainer')
+      }, ptm('metercontainer'));
+      return /*#__PURE__*/React.createElement("div", meterContainerProps, meters);
+    };
+    var createLabelList = function createLabelList() {
+      var labelListProps = mergeProps({
+        className: cx('labellist')
+      }, ptm('labellist'));
+      var labelItemProps = mergeProps({
+        className: cx('labellistitem')
+      }, ptm('labellistitem'));
+      var labelProps = mergeProps({
+        className: cx('label')
+      }, ptm('label'));
+      return /*#__PURE__*/React.createElement("ol", labelListProps, values.map(function (item, index) {
+        var labelIconProps = mergeProps({
+          className: utils.classNames(cx('labelicon'), item.icon),
+          style: {
+            color: item.color
+          }
+        }, ptm('labelicon'));
+        var labelListIconProps = mergeProps({
+          className: cx('labellisttype'),
+          style: {
+            backgroundColor: item.color
+          }
+        }, ptm('labellisttype'));
+        var labelIcon = item.icon ? /*#__PURE__*/React.createElement("i", labelIconProps) : /*#__PURE__*/React.createElement("span", labelListIconProps);
+        return /*#__PURE__*/React.createElement("li", _extends({
+          key: index
+        }, labelItemProps), labelIcon, /*#__PURE__*/React.createElement("span", labelProps, item === null || item === void 0 ? void 0 : item.label, " ", (item === null || item === void 0 ? void 0 : item.value) && "(".concat(item === null || item === void 0 ? void 0 : item.value, "%)")));
+      }));
+    };
+    var templateProps = {
+      totalPercent: totalPercent,
+      precentages: precentages,
+      values: values
+    };
+    var labelElement = utils.ObjectUtils.getJSXElement(labelList || createLabelList, {
+      values: values,
+      totalPercent: totalPercent
+    });
+    return /*#__PURE__*/React.createElement("div", _extends({}, rootProps, {
+      role: "meter",
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": totalPercent
+    }), labelPosition === 'start' && labelElement, start && utils.ObjectUtils.getJSXElement(start, templateProps), createMeters(), end && utils.ObjectUtils.getJSXElement(end, templateProps), labelPosition === 'end' && labelElement);
+  };
+
+  exports.MeterGroup = MeterGroup;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+  return exports;
+
+})({}, React, primereact.hooks, primereact.api, primereact.utils, primereact.componentbase);

package/metergroup/metergroup.min.js

@@ -0,0 +1 @@
+this.primereact=this.primereact||{},this.primereact.metergroup=function(e,t,r,n,l,a){"use strict";function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o.apply(this,arguments)}function i(e){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i(e)}function s(e,t){if("object"!==i(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function c(e){var t=s(e,"string");return"symbol"===i(t)?t:String(t)}var p=a.ComponentBase.extend({defaultProps:{__TYPE:"MeterGroup",__parentMetadata:null,children:void 0,className:null,values:null,min:0,max:100,orientation:"horizontal",labelPosition:"end",labelOrientation:"horizontal",start:null,end:null,meter:null,labelList:null},css:{classes:{root:function(e){var t=e.props;return[l.classNames("p-metergroup p-component",{"p-metergroup-horizontal":"horizontal"===t.orientation,"p-metergroup-vertical":"vertical"===t.orientation})]},metercontainer:"p-metergroup-meter-container",meter:"p-metergroup-meter",labellist:function(e){var t=e.props;return l.classNames("p-metergroup-label-list",{"p-metergroup-label-list-start":"start"===t.labelPosition,"p-metergroup-label-list-end":"end"===t.labelPosition,"p-metergroup-label-list-vertical":"vertical"===t.labelOrientation,"p-metergroup-label-list-horizontal":"horizontal"===t.labelOrientation})},labellistitem:"p-metergroup-label-list-item",labelicon:"p-metergroup-label-icon",labellisttype:"p-metergroup-label-type",label:"p-metergroup-label"},styles:"\n@layer primereact {\n    .p-metergroup {\n        position: relative;\n        overflow: hidden;\n    }\n\n    .p-metergroup-vertical.p-metergroup {\n        display: flex;\n    }\n\n    .p-metergroup-vertical .p-metergroup-meter-container {\n        flex-direction: column;\n    }\n\n    .p-metergroup-meter-container {\n        display: flex;\n    }\n\n    .p-metergroup-label-list {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n\n    .p-metergroup-vertical .p-metergroup-label-list {\n        align-items: start;\n    }\n\n    .p-metergroup-label-list-vertical {\n        flex-direction: column;\n    }\n\n    .p-metergroup-label-list-horizontal {\n        flex-direction: row;\n    }\n\n    .p-metergroup-label-list-item {\n        display: inline-flex;\n        align-items: center;\n    }\n\n    .p-metergroup-label-type {\n        display: inline-block;\n    }\n}\n"}});function m(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?m(Object(r),!0).forEach((function(t){var n,l,a;n=e,a=r[t],(l=c(l=t))in n?Object.defineProperty(n,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):n[l]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):m(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}return e.MeterGroup=function(e){var i=t.useContext(n.PrimeReactContext),s=p.getProps(e,i),c=s.values,m=s.min,b=s.max,g=s.orientation,v=s.labelPosition,f=s.start,y=s.end,d=s.meter,h=s.labelList,O=r.useMergeProps(),P=p.setMetaData(u(u({props:s},s.__parentMetadata),{},{context:{disabled:s.disabled}})),j=P.ptm,x=P.cx;a.useHandleStyle(p.css.styles,P.isUnstyled,{name:"progressbar"});var E=0,N=[];c.map((function(e){E+=e.value,N.push(Math.round(e.value/E*100))}));var S,w,M=function(){return Math.round(Math.max(0,Math.min(100,((arguments.length>0&&void 0!==arguments[0]?arguments[0]:0)-m)/(b-m)*100)))},R=O({className:l.classNames(s.className,x("root",{orientation:g}))},p.getOtherProps(s),j("root")),z={totalPercent:E,precentages:N,values:c},_=l.ObjectUtils.getJSXElement(h||function(){var e=O({className:x("labellist")},j("labellist")),t=O({className:x("labellistitem")},j("labellistitem")),r=O({className:x("label")},j("label"));return React.createElement("ol",e,c.map((function(e,n){var a=O({className:l.classNames(x("labelicon"),e.icon),style:{color:e.color}},j("labelicon")),i=O({className:x("labellisttype"),style:{backgroundColor:e.color}},j("labellisttype")),s=e.icon?React.createElement("i",a):React.createElement("span",i);return React.createElement("li",o({key:n},t),s,React.createElement("span",r,null==e?void 0:e.label," ",(null==e?void 0:e.value)&&"(".concat(null==e?void 0:e.value,"%)")))})))},{values:c,totalPercent:E});return React.createElement("div",o({},R,{role:"meter","aria-valuemin":m,"aria-valuemax":b,"aria-valuenow":E}),"start"===v&&_,f&&l.ObjectUtils.getJSXElement(f,z),(S=c.map((function(e,t){var r=M(e.value),n={backgroundColor:e.color,width:"horizontal"===g?r+"%":"auto",height:"vertical"===g?r+"%":"auto"},a=O({className:x("meter"),style:n},j("meter"));if(d||e.meterTemplate){var i=O({className:x("meter")},j("meter"));return l.ObjectUtils.getJSXElement(e.meterTemplate||d,u(u({},e),{},{percentage:r,index:t}),i)}return React.createElement("span",o({key:t},a))})),w=O({className:x("metercontainer")},j("metercontainer")),React.createElement("div",w,S)),y&&l.ObjectUtils.getJSXElement(y,z),"end"===v&&_)},Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.hooks,primereact.api,primereact.utils,primereact.componentbase);