@dnb/eufemia 10.28.0 → 10.29.0

package/es/components/progress-indicator/ProgressIndicatorCircular.js

@@ -3,8 +3,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _Circle, _circle;
-const _excluded = ["size", "visible", "progress", "maxOffset", "onComplete", "callOnCompleteHandler", "title"];
+const _excluded = ["size", "visible", "progress", "onComplete", "callOnCompleteHandler", "title", "customColors", "customCircleWidth", "counterClockwise"],
+  _excluded2 = ["customColor", "customWidth", "className"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useEffect, useRef, forwardRef } from 'react';
@@ -16,10 +16,12 @@ function ProgressIndicatorCircular(props) {
       size,
       visible,
       progress,
-      maxOffset = 88,
       onComplete,
       callOnCompleteHandler,
-      title
+      title,
+      customColors,
+      customCircleWidth,
+      counterClockwise = false
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
   const keepAnimatingRef = useRef(true);
@@ -51,7 +53,7 @@ function ProgressIndicatorCircular(props) {
   }, [visible]);
   const doAnimation = (element, animateOnStart = true, callback = null) => {
     const min = 1;
-    const max = 88;
+    const max = Math.PI * 100;
     let start = 0,
       ms = 0,
       prog = max,
@@ -65,13 +67,13 @@ function ProgressIndicatorCircular(props) {
       }
       ms = timestamp - start;
       if (animate1) {
-        if (!visibleRef.current && prog < 5) {
+        if (!visibleRef.current && prog < 20) {
           prog = min;
         }
         if (setProg) {
-          element.style['stroke-dashoffset'] = prog;
+          element.style['stroke-dashoffset'] = `${prog}%`;
         } else if (!animateOnStart) {
-          element.style['stroke-dashoffset'] = max;
+          element.style['stroke-dashoffset'] = `${max}%`;
         }
       }
       if (stopNextRound) {
@@ -99,9 +101,8 @@ function ProgressIndicatorCircular(props) {
       window.requestAnimationFrame(step);
     }
   };
-  const strokeDashoffset = maxOffset - maxOffset / 100 * progress;
-  const hasProgressValue = progress > -1;
-  if (hasProgressValue) {
+  const progressIsControlled = progress > -1;
+  if (progressIsControlled) {
     rest.role = 'progressbar';
     rest['aria-label'] = title;
     rest['title'] = title;
@@ -111,33 +112,67 @@ function ProgressIndicatorCircular(props) {
   }
   const remainingDOMAttributes = validateDOMAttributes(props, _objectSpread({}, rest));
   return React.createElement("span", _extends({
-    className: classnames('dnb-progress-indicator__circular', size && `dnb-progress-indicator__circular--${size}`, hasProgressValue && 'dnb-progress-indicator__circular--has-progress-value')
-  }, remainingDOMAttributes), _Circle || (_Circle = React.createElement(Circle, {
-    className: "dnb-progress-indicator__circular__line light paused"
+    className: classnames('dnb-progress-indicator__circular', size && `dnb-progress-indicator__circular--${size}`, progressIsControlled && 'dnb-progress-indicator__circular--has-progress-value')
+  }, remainingDOMAttributes), React.createElement("span", {
+    className: "dnb-progress-indicator__circular__background-padding"
+  }, React.createElement("span", {
+    className: "dnb-progress-indicator__circular__background",
+    style: {
+      backgroundColor: customColors === null || customColors === void 0 ? void 0 : customColors.background
+    }
   })), React.createElement(Circle, {
-    className: "dnb-progress-indicator__circular__line dark dark" + (hasProgressValue || useAnimationFrame ? " paused" : ""),
-    style: hasProgressValue ? {
-      strokeDashoffset
+    className: "light paused",
+    customColor: customColors === null || customColors === void 0 ? void 0 : customColors.shaft,
+    customWidth: customCircleWidth
+  }), React.createElement(Circle, {
+    className: "dark dark" + (progressIsControlled || useAnimationFrame ? " paused" : ""),
+    style: progressIsControlled ? {
+      strokeDashoffset: getOffset(progress, counterClockwise)
     } : {},
+    customColor: customColors === null || customColors === void 0 ? void 0 : customColors.line,
+    customWidth: customCircleWidth,
     ref: _refDark
-  }), !hasProgressValue && React.createElement(Circle, {
-    className: "dnb-progress-indicator__circular__line light" + (useAnimationFrame ? " paused" : ""),
+  }), !progressIsControlled && React.createElement(Circle, {
+    className: 'light' + (useAnimationFrame ? " paused" : ""),
+    customColor: customColors === null || customColors === void 0 ? void 0 : customColors.shaft,
+    customWidth: customCircleWidth,
     ref: _refLight
   }));
 }
-const Circle = forwardRef(function Circle(props, ref) {
+const Circle = forwardRef(function Circle(_ref, ref) {
+  let {
+      customColor,
+      customWidth,
+      className
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded2);
+  const correctedCustomWidth = correctPercentageStrokeWidth(customWidth);
   return React.createElement("svg", _extends({
-    viewBox: "0 0 32 32",
+    className: classnames('dnb-progress-indicator__circular__line', className),
     shapeRendering: "geometricPrecision",
     ref: ref
-  }, props), _circle || (_circle = React.createElement("circle", {
+  }, rest), React.createElement("circle", {
     className: "dnb-progress-indicator__circular__circle",
     fill: "none",
-    strokeWidth: "4",
-    cx: "16",
-    cy: "16",
-    r: "14"
-  })));
+    cx: "50%",
+    cy: "50%",
+    r: "50%",
+    style: _objectSpread({
+      stroke: customColor
+    }, correctedCustomWidth ? {
+      '--progress-indicator-circular-stroke-width': correctedCustomWidth
+    } : undefined)
+  }));
 });
+function getOffset(progress, counterClockwise = false) {
+  const offset = Math.PI * (100 - progress);
+  return `${counterClockwise ? -offset : offset}%`;
+}
+function correctPercentageStrokeWidth(strokeWidth) {
+  if (typeof strokeWidth === 'string' && strokeWidth.endsWith('%')) {
+    const number = parseFloat(strokeWidth.slice(0, strokeWidth.length - 1));
+    return `${100 * number / (100 - number)}%`;
+  }
+}
 export default ProgressIndicatorCircular;
 //# sourceMappingURL=ProgressIndicatorCircular.js.map

package/es/components/progress-indicator/ProgressIndicatorCircular.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressIndicatorCircular.js","names":["React","useEffect","useRef","forwardRef","classnames","validateDOMAttributes","IS_EDGE","ProgressIndicatorCircular","props","size","visible","progress","maxOffset","onComplete","callOnCompleteHandler","title","rest","_objectWithoutProperties","_excluded","keepAnimatingRef","visibleRef","useAnimationFrame","_refDark","_refLight","_startupTimeout","current","setTimeout","doAnimation","clearTimeout","element","animateOnStart","callback","min","max","start","ms","prog","setProg","animate1","completeCalled","stopNextRound","step","timestamp","style","Math","round","ceil","window","requestAnimationFrame","strokeDashoffset","hasProgressValue","role","remainingDOMAttributes","_objectSpread","createElement","_extends","className","_Circle","Circle","ref","viewBox","shapeRendering","_circle","fill","strokeWidth","cx","cy","r"],"sources":["../../../../src/components/progress-indicator/ProgressIndicatorCircular.tsx"],"sourcesContent":["/**\n * Web ProgressIndicator Component\n *\n */\n\nimport React, { useEffect, useRef, forwardRef } from 'react'\nimport classnames from 'classnames'\nimport { validateDOMAttributes } from '../../shared/component-helper'\nimport { IS_EDGE } from '../../shared/helpers'\n\ntype ProgressIndicatorCircularProps = {\n  /**\n   * Defines the size, like `small`, `default`, `medium` or `large`. Defaults to `default`.\n   */\n  size?: 'default' | 'small' | 'medium' | 'large' | 'huge'\n  /**\n   * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`.\n   */\n  visible?: boolean\n  /**\n   * To visualize a static \"percentage\" (0-100) as a progress state. Defaults to `null`.\n   */\n  progress?: number\n  maxOffset?: number\n  onComplete?: (...args: any[]) => any\n  callOnCompleteHandler?: (...args: any[]) => any\n  /**\n   * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.\n   */\n  title?: string\n}\n\nfunction ProgressIndicatorCircular(\n  props: ProgressIndicatorCircularProps &\n    Omit<React.HTMLProps<HTMLElement>, 'size'>\n) {\n  const {\n    size,\n    visible,\n    progress,\n    maxOffset = 88,\n    onComplete,\n    callOnCompleteHandler,\n    title,\n    ...rest\n  } = props\n  const keepAnimatingRef = useRef(true)\n  const visibleRef = useRef(false)\n  const useAnimationFrame = typeof onComplete === 'function' || IS_EDGE\n  const _refDark = useRef<SVGSVGElement>(null)\n  const _refLight = useRef<SVGSVGElement>(null)\n  const _startupTimeout = useRef<NodeJS.Timeout>()\n\n  useEffect(() => {\n    if (useAnimationFrame) {\n      _startupTimeout.current = setTimeout(() => {\n        if (_refDark.current) {\n          doAnimation(_refDark.current, true, callOnCompleteHandler)\n        }\n        if (_refLight.current) {\n          doAnimation(_refLight.current, false)\n        }\n      }, 300)\n    }\n\n    return () => {\n      keepAnimatingRef.current = false\n      if (_startupTimeout.current) {\n        clearTimeout(_startupTimeout.current)\n      }\n    }\n  }, [])\n\n  useEffect(() => {\n    visibleRef.current = visible\n  }, [visible])\n\n  const doAnimation = (\n    element: SVGSVGElement,\n    animateOnStart = true,\n    callback = null\n  ) => {\n    const min = 1\n    const max = 88\n    let start = 0,\n      ms = 0,\n      prog = max,\n      setProg = animateOnStart,\n      animate1 = true,\n      completeCalled = false,\n      stopNextRound = false\n\n    const step = (timestamp) => {\n      if (!start) {\n        start = timestamp\n      }\n\n      // milliseconds\n      ms = timestamp - start\n\n      if (animate1) {\n        if (!visibleRef.current && prog < 5) {\n          prog = min\n        }\n        if (setProg) {\n          element.style['stroke-dashoffset'] = prog\n        } else if (!animateOnStart) {\n          element.style['stroke-dashoffset'] = max\n        }\n      }\n\n      // if complete\n      if (stopNextRound) {\n        animate1 = false\n        if (!completeCalled) {\n          completeCalled = true\n          if (animateOnStart && typeof callback === 'function') {\n            callback()\n          }\n        } else if (visibleRef.current && ms % 1e3 > 950) {\n          // startAnimationFirstTime() // will not start completely from scratch\n          stopNextRound = false\n        }\n      } else {\n        // make sure we stop next round\n        stopNextRound = !visibleRef.current && prog === min\n        animate1 = true\n        completeCalled = false\n      }\n\n      // since we have 1sec as duration, and we want always a max of 1000ms\n      prog = Math.round(max - (max / 1e3) * (ms % 1e3))\n\n      // calc if we want to animate\n      setProg = animateOnStart\n        ? Math.ceil(ms / 1e3) % 2 === 1 || ms === 0\n        : Math.ceil(ms / 1e3) % 2 === 0 && ms !== 0\n\n      if (keepAnimatingRef.current) {\n        window.requestAnimationFrame(step)\n      }\n    }\n    if (typeof window !== 'undefined' && window.requestAnimationFrame) {\n      window.requestAnimationFrame(step)\n    }\n  }\n\n  const strokeDashoffset = maxOffset - (maxOffset / 100) * progress\n  const hasProgressValue = progress > -1\n\n  if (hasProgressValue) {\n    rest.role = 'progressbar'\n    rest['aria-label'] = title\n    rest['title'] = title\n  } else {\n    rest.role = 'alert'\n    rest['aria-busy'] = true\n  }\n\n  const remainingDOMAttributes = validateDOMAttributes(props, { ...rest })\n\n  return (\n    <span\n      className={classnames(\n        'dnb-progress-indicator__circular',\n        size && `dnb-progress-indicator__circular--${size}`,\n        hasProgressValue &&\n          'dnb-progress-indicator__circular--has-progress-value'\n      )}\n      {...remainingDOMAttributes}\n    >\n      {/* The first one is the background line */}\n      <Circle\n        className={classnames(\n          'dnb-progress-indicator__circular__line',\n          'light',\n          'paused'\n        )}\n      />\n      <Circle\n        className={classnames(\n          'dnb-progress-indicator__circular__line',\n          'dark',\n          'dark',\n          hasProgressValue || useAnimationFrame ? 'paused' : null\n        )}\n        style={hasProgressValue ? { strokeDashoffset } : {}}\n        ref={_refDark}\n      />\n      {!hasProgressValue && (\n        <Circle\n          className={classnames(\n            'dnb-progress-indicator__circular__line',\n            'light',\n            useAnimationFrame ? 'paused' : null\n          )}\n          ref={_refLight}\n        />\n      )}\n    </span>\n  )\n}\n\nconst Circle = forwardRef(function Circle(\n  props: React.HTMLProps<SVGSVGElement>,\n  ref: React.RefObject<SVGSVGElement>\n) {\n  return (\n    <svg\n      viewBox=\"0 0 32 32\"\n      shapeRendering=\"geometricPrecision\"\n      ref={ref}\n      {...props}\n    >\n      <circle\n        className=\"dnb-progress-indicator__circular__circle\"\n        fill=\"none\"\n        strokeWidth=\"4\"\n        cx=\"16\"\n        cy=\"16\"\n        r=\"14\"\n      />\n    </svg>\n  )\n})\n\nexport default ProgressIndicatorCircular\n"],"mappings":"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"}
+{"version":3,"file":"ProgressIndicatorCircular.js","names":["React","useEffect","useRef","forwardRef","classnames","validateDOMAttributes","IS_EDGE","ProgressIndicatorCircular","props","size","visible","progress","onComplete","callOnCompleteHandler","title","customColors","customCircleWidth","counterClockwise","rest","_objectWithoutProperties","_excluded","keepAnimatingRef","visibleRef","useAnimationFrame","_refDark","_refLight","_startupTimeout","current","setTimeout","doAnimation","clearTimeout","element","animateOnStart","callback","min","max","Math","PI","start","ms","prog","setProg","animate1","completeCalled","stopNextRound","step","timestamp","style","round","ceil","window","requestAnimationFrame","progressIsControlled","role","remainingDOMAttributes","_objectSpread","createElement","_extends","className","backgroundColor","background","Circle","customColor","shaft","customWidth","strokeDashoffset","getOffset","line","ref","_ref","_excluded2","correctedCustomWidth","correctPercentageStrokeWidth","shapeRendering","fill","cx","cy","r","stroke","undefined","offset","strokeWidth","endsWith","number","parseFloat","slice","length"],"sources":["../../../../src/components/progress-indicator/ProgressIndicatorCircular.tsx"],"sourcesContent":["/**\n * Web ProgressIndicator Component\n *\n */\n\nimport React, { useEffect, useRef, forwardRef } from 'react'\nimport * as CSS from 'csstype'\nimport classnames from 'classnames'\nimport { validateDOMAttributes } from '../../shared/component-helper'\nimport { IS_EDGE } from '../../shared/helpers'\nimport { ProgressIndicatorCircularAllProps } from './types'\n\nfunction ProgressIndicatorCircular(\n  props: ProgressIndicatorCircularAllProps\n) {\n  const {\n    size,\n    visible,\n    progress,\n    onComplete,\n    callOnCompleteHandler,\n    title,\n    customColors,\n    customCircleWidth,\n    counterClockwise = false,\n    ...rest\n  } = props\n  const keepAnimatingRef = useRef(true)\n  const visibleRef = useRef(false)\n  const useAnimationFrame = typeof onComplete === 'function' || IS_EDGE\n  const _refDark = useRef<SVGSVGElement>(null)\n  const _refLight = useRef<SVGSVGElement>(null)\n  const _startupTimeout = useRef<NodeJS.Timeout>()\n\n  useEffect(() => {\n    if (useAnimationFrame) {\n      _startupTimeout.current = setTimeout(() => {\n        if (_refDark.current) {\n          doAnimation(_refDark.current, true, callOnCompleteHandler)\n        }\n        if (_refLight.current) {\n          doAnimation(_refLight.current, false)\n        }\n      }, 300)\n    }\n\n    return () => {\n      keepAnimatingRef.current = false\n      if (_startupTimeout.current) {\n        clearTimeout(_startupTimeout.current)\n      }\n    }\n  }, [])\n\n  useEffect(() => {\n    visibleRef.current = visible\n  }, [visible])\n\n  const doAnimation = (\n    element: SVGSVGElement,\n    animateOnStart = true,\n    callback = null\n  ) => {\n    const min = 1\n    const max = Math.PI * 100\n    let start = 0,\n      ms = 0,\n      prog = max,\n      setProg = animateOnStart,\n      animate1 = true,\n      completeCalled = false,\n      stopNextRound = false\n\n    const step = (timestamp) => {\n      if (!start) {\n        start = timestamp\n      }\n\n      // milliseconds\n      ms = timestamp - start\n\n      if (animate1) {\n        if (!visibleRef.current && prog < 20) {\n          prog = min\n        }\n        if (setProg) {\n          element.style['stroke-dashoffset'] = `${prog}%`\n        } else if (!animateOnStart) {\n          element.style['stroke-dashoffset'] = `${max}%`\n        }\n      }\n\n      // if complete\n      if (stopNextRound) {\n        animate1 = false\n        if (!completeCalled) {\n          completeCalled = true\n          if (animateOnStart && typeof callback === 'function') {\n            callback()\n          }\n        } else if (visibleRef.current && ms % 1e3 > 950) {\n          // startAnimationFirstTime() // will not start completely from scratch\n          stopNextRound = false\n        }\n      } else {\n        // make sure we stop next round\n        stopNextRound = !visibleRef.current && prog === min\n        animate1 = true\n        completeCalled = false\n      }\n\n      // since we have 1sec as duration, and we want always a max of 1000ms\n      prog = Math.round(max - (max / 1e3) * (ms % 1e3))\n\n      // calc if we want to animate\n      setProg = animateOnStart\n        ? Math.ceil(ms / 1e3) % 2 === 1 || ms === 0\n        : Math.ceil(ms / 1e3) % 2 === 0 && ms !== 0\n\n      if (keepAnimatingRef.current) {\n        window.requestAnimationFrame(step)\n      }\n    }\n    if (typeof window !== 'undefined' && window.requestAnimationFrame) {\n      window.requestAnimationFrame(step)\n    }\n  }\n\n  const progressIsControlled = progress > -1\n\n  if (progressIsControlled) {\n    rest.role = 'progressbar'\n    rest['aria-label'] = title\n    rest['title'] = title\n  } else {\n    rest.role = 'alert'\n    rest['aria-busy'] = true\n  }\n\n  const remainingDOMAttributes = validateDOMAttributes(props, { ...rest })\n\n  return (\n    <span\n      className={classnames(\n        'dnb-progress-indicator__circular',\n        size && `dnb-progress-indicator__circular--${size}`,\n        progressIsControlled &&\n          'dnb-progress-indicator__circular--has-progress-value'\n      )}\n      {...remainingDOMAttributes}\n    >\n      <span className=\"dnb-progress-indicator__circular__background-padding\">\n        <span\n          className=\"dnb-progress-indicator__circular__background\"\n          style={{ backgroundColor: customColors?.background }}\n        />\n      </span>\n\n      {/* The first one is the background line */}\n      <Circle\n        className={classnames('light', 'paused')}\n        customColor={customColors?.shaft}\n        customWidth={customCircleWidth}\n      />\n      <Circle\n        className={classnames(\n          'dark',\n          'dark',\n          progressIsControlled || useAnimationFrame ? 'paused' : null\n        )}\n        style={\n          progressIsControlled\n            ? {\n                strokeDashoffset: getOffset(progress, counterClockwise),\n              }\n            : {}\n        }\n        customColor={customColors?.line}\n        customWidth={customCircleWidth}\n        ref={_refDark}\n      />\n      {!progressIsControlled && (\n        <Circle\n          className={classnames(\n            'light',\n            useAnimationFrame ? 'paused' : null\n          )}\n          customColor={customColors?.shaft}\n          customWidth={customCircleWidth}\n          ref={_refLight}\n        />\n      )}\n    </span>\n  )\n}\n\nconst Circle = forwardRef(function Circle(\n  {\n    customColor,\n    customWidth,\n    className,\n    ...rest\n  }: React.HTMLProps<SVGSVGElement> & {\n    customColor?: CSS.Property.BackgroundColor\n    customWidth?: CSS.Property.StrokeWidth\n  },\n  ref: React.RefObject<SVGSVGElement>\n) {\n  const correctedCustomWidth = correctPercentageStrokeWidth(customWidth)\n  return (\n    <svg\n      className={classnames(\n        'dnb-progress-indicator__circular__line',\n        className\n      )}\n      shapeRendering=\"geometricPrecision\"\n      ref={ref}\n      {...rest}\n    >\n      <circle\n        className=\"dnb-progress-indicator__circular__circle\"\n        fill=\"none\"\n        cx=\"50%\"\n        cy=\"50%\"\n        r=\"50%\"\n        style={{\n          stroke: customColor,\n          ...(correctedCustomWidth\n            ? {\n                '--progress-indicator-circular-stroke-width':\n                  correctedCustomWidth,\n              }\n            : undefined),\n        }}\n      />\n    </svg>\n  )\n})\n/**\n *\n * @param progress number between 0-100\n * @param counterClockwise decides direction of movement. Default is `false`\n * @returns\n */\n\nfunction getOffset(progress: number, counterClockwise = false) {\n  const offset = Math.PI * (100 - progress)\n  return `${counterClockwise ? -offset : offset}%`\n}\n\n/**\n * If the custom stroke width is a percentage, returns a corrected width\n * relative to the parent SVG\n * @param strokeWidth\n * @returns\n */\nfunction correctPercentageStrokeWidth(\n  strokeWidth: CSS.Property.StrokeWidth\n) {\n  if (typeof strokeWidth === 'string' && strokeWidth.endsWith('%')) {\n    const number = parseFloat(strokeWidth.slice(0, strokeWidth.length - 1))\n    return `${(100 * number) / (100 - number)}%`\n  }\n}\nexport default ProgressIndicatorCircular\n"],"mappings":"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"}

package/es/components/progress-indicator/ProgressIndicatorDocs.d.ts

@@ -1,5 +1,6 @@
 import { PropertiesTableProps } from '../../shared/types';
 export declare const ProgressIndicatorProperties: PropertiesTableProps;
+export declare const CustomColorsData: PropertiesTableProps;
 export declare const ProgressIndicatorDeprecatedProperties: PropertiesTableProps;
 export declare const ProgressIndicatorEvents: PropertiesTableProps;
 export declare const ProgressIndicatorDeprecatedEvents: PropertiesTableProps;

package/es/components/progress-indicator/ProgressIndicatorDocs.js

@@ -13,7 +13,7 @@ export const ProgressIndicatorProperties = {
   },
   type: {
     doc: 'Defines the type.',
-    type: [`'circular'`, `'linear'`],
+    type: [`'circular'`, `'linear'`, `'countdown'`],
     defaultValue: `'circular'`,
     status: 'optional'
   },
@@ -25,19 +25,25 @@ export const ProgressIndicatorProperties = {
   },
   size: {
     doc: 'Defines the size.',
-    type: [`'default'`, `'small'`, `'medium'`, `'large'`, `'huge'`],
+    type: [`'default'`, `'small'`, `'medium'`, `'large'`, `'huge'`, 'string'],
     defaultValue: `'default'`,
     status: 'optional'
   },
   label: {
-    doc: 'Show a custom label to the right or under the indicator.',
+    doc: 'Content of a custom label. (Overrides `indicator_label` and `showDefaultLabel`)',
+    type: 'React.ReactNode',
+    defaultValue: 'undefined',
+    status: 'optional'
+  },
+  children: {
+    doc: 'Same as `label` prop (`label` prop has priority)',
     type: 'React.ReactNode',
     defaultValue: 'undefined',
     status: 'optional'
   },
   labelDirection: {
-    doc: 'Sets the position of the label.',
-    type: [`'horizontal'`, '`vertical`'],
+    doc: "Sets the position of the label. `'inside'` only works with `type='circular'.",
+    type: [`'horizontal'`, `'vertical'`, `'inside'`],
     defaultValue: `'horizontal'`,
     status: 'optional'
   },
@@ -59,12 +65,44 @@ export const ProgressIndicatorProperties = {
     defaultValue: 'undefined',
     status: 'optional'
   },
+  '[customColors](/uilib/components/progress-indicator/properties/#data-object-customcolors)': {
+    doc: 'Send in custom css colors that overrides any css. See below for data structure.',
+    type: 'object',
+    defaultValue: 'undefined',
+    status: 'optional'
+  },
+  customCircleWidth: {
+    doc: 'Send in custom css width for circle progress line. (`undefined` defaults to one eighth of the size).',
+    type: 'string',
+    defaultValue: 'undefined',
+    status: 'optional'
+  },
   '[Space](/uilib/layout/space/properties)': {
     doc: 'Spacing properties like `top` or `bottom` are supported.',
     type: ['string', 'object'],
     status: 'optional'
   }
 };
+export const CustomColorsData = {
+  line: {
+    doc: 'Override the moving line color.',
+    type: 'string',
+    defaultValue: 'undefined',
+    status: 'optional'
+  },
+  shaft: {
+    doc: 'Override the background line color.',
+    type: 'string',
+    defaultValue: 'undefined',
+    status: 'optional'
+  },
+  background: {
+    doc: 'Set a background color for the center of the circle.',
+    type: 'string',
+    defaultValue: 'undefined',
+    status: 'optional'
+  }
+};
 export const ProgressIndicatorDeprecatedProperties = {
   no_animation: {
     doc: 'use `noAnimation`.',
@@ -80,11 +118,6 @@ export const ProgressIndicatorDeprecatedProperties = {
     doc: 'use `showDefaultLabel`.',
     type: 'boolean',
     status: 'deprecated'
-  },
-  children: {
-    doc: 'use the `label` prop instead.',
-    type: 'React.ReactNode',
-    status: 'deprecated'
   }
 };
 export const ProgressIndicatorEvents = {

package/es/components/progress-indicator/ProgressIndicatorDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressIndicatorDocs.js","names":["ProgressIndicatorProperties","progress","doc","type","defaultValue","status","visible","noAnimation","size","label","labelDirection","showDefaultLabel","indicator_label","title","ProgressIndicatorDeprecatedProperties","no_animation","label_direction","show_label","children","ProgressIndicatorEvents","onComplete","ProgressIndicatorDeprecatedEvents","on_complete"],"sources":["../../../../src/components/progress-indicator/ProgressIndicatorDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const ProgressIndicatorProperties: PropertiesTableProps = {\n  progress: {\n    doc: 'A number between 0-100, if not supplied a continous loading-type animation will be used.',\n    type: ['string', 'number'],\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  visible: {\n    doc: 'Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation.',\n    type: 'boolean',\n    defaultValue: 'true',\n    status: 'optional',\n  },\n  type: {\n    doc: 'Defines the type.',\n    type: [`'circular'`, `'linear'`],\n    defaultValue: `'circular'`,\n    status: 'optional',\n  },\n  noAnimation: {\n    doc: 'Disables the fade-in and fade-out animation.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  size: {\n    doc: 'Defines the size.',\n    type: [`'default'`, `'small'`, `'medium'`, `'large'`, `'huge'`],\n    defaultValue: `'default'`,\n    status: 'optional',\n  },\n  label: {\n    doc: 'Show a custom label to the right or under the indicator.',\n    type: 'React.ReactNode',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  labelDirection: {\n    doc: 'Sets the position of the label.',\n    type: [`'horizontal'`, '`vertical`'],\n    defaultValue: `'horizontal'`,\n    status: 'optional',\n  },\n  showDefaultLabel: {\n    doc: 'If set to `true` a default label (from text locales) will be shown.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  indicator_label: {\n    doc: 'Use this to override the default label from text locales.',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const ProgressIndicatorDeprecatedProperties: PropertiesTableProps =\n  {\n    no_animation: {\n      doc: 'use `noAnimation`.',\n      type: ' boolean',\n      status: 'deprecated',\n    },\n    label_direction: {\n      doc: 'use `labelDirection`.',\n      type: 'string',\n      status: 'deprecated',\n    },\n    show_label: {\n      doc: 'use `showDefaultLabel`.',\n      type: 'boolean',\n      status: 'deprecated',\n    },\n    children: {\n      doc: 'use the `label` prop instead.',\n      type: 'React.ReactNode',\n      status: 'deprecated',\n    },\n  }\n\nexport const ProgressIndicatorEvents: PropertiesTableProps = {\n  onComplete: {\n    doc: \"Will be called once it's no longer `visible`.\",\n    type: 'function',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\nexport const ProgressIndicatorDeprecatedEvents: PropertiesTableProps = {\n  on_complete: {\n    doc: 'use `onComplete`.',\n    type: 'function',\n    status: 'deprecated',\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"ProgressIndicatorDocs.js","names":["ProgressIndicatorProperties","progress","doc","type","defaultValue","status","visible","noAnimation","size","label","children","labelDirection","showDefaultLabel","indicator_label","title","customCircleWidth","CustomColorsData","line","shaft","background","ProgressIndicatorDeprecatedProperties","no_animation","label_direction","show_label","ProgressIndicatorEvents","onComplete","ProgressIndicatorDeprecatedEvents","on_complete"],"sources":["../../../../src/components/progress-indicator/ProgressIndicatorDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const ProgressIndicatorProperties: PropertiesTableProps = {\n  progress: {\n    doc: 'A number between 0-100, if not supplied a continous loading-type animation will be used.',\n    type: ['string', 'number'],\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  visible: {\n    doc: 'Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation.',\n    type: 'boolean',\n    defaultValue: 'true',\n    status: 'optional',\n  },\n  type: {\n    doc: 'Defines the type.',\n    type: [`'circular'`, `'linear'`, `'countdown'`],\n    defaultValue: `'circular'`,\n    status: 'optional',\n  },\n  noAnimation: {\n    doc: 'Disables the fade-in and fade-out animation.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  size: {\n    doc: 'Defines the size.',\n    type: [\n      `'default'`,\n      `'small'`,\n      `'medium'`,\n      `'large'`,\n      `'huge'`,\n      'string',\n    ],\n    defaultValue: `'default'`,\n    status: 'optional',\n  },\n  label: {\n    doc: 'Content of a custom label. (Overrides `indicator_label` and `showDefaultLabel`)',\n    type: 'React.ReactNode',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Same as `label` prop (`label` prop has priority)',\n    type: 'React.ReactNode',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  labelDirection: {\n    doc: \"Sets the position of the label. `'inside'` only works with `type='circular'.\",\n    type: [`'horizontal'`, `'vertical'`, `'inside'`],\n    defaultValue: `'horizontal'`,\n    status: 'optional',\n  },\n  showDefaultLabel: {\n    doc: 'If set to `true` a default label (from text locales) will be shown.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  indicator_label: {\n    doc: 'Use this to override the default label from text locales.',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  '[customColors](/uilib/components/progress-indicator/properties/#data-object-customcolors)':\n    {\n      doc: 'Send in custom css colors that overrides any css. See below for data structure.',\n      type: 'object',\n      defaultValue: 'undefined',\n      status: 'optional',\n    },\n  customCircleWidth: {\n    doc: 'Send in custom css width for circle progress line. (`undefined` defaults to one eighth of the size).',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const CustomColorsData: PropertiesTableProps = {\n  line: {\n    doc: 'Override the moving line color.',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  shaft: {\n    doc: 'Override the background line color.',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  background: {\n    doc: 'Set a background color for the center of the circle.',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n\nexport const ProgressIndicatorDeprecatedProperties: PropertiesTableProps =\n  {\n    no_animation: {\n      doc: 'use `noAnimation`.',\n      type: ' boolean',\n      status: 'deprecated',\n    },\n    label_direction: {\n      doc: 'use `labelDirection`.',\n      type: 'string',\n      status: 'deprecated',\n    },\n    show_label: {\n      doc: 'use `showDefaultLabel`.',\n      type: 'boolean',\n      status: 'deprecated',\n    },\n  }\n\nexport const ProgressIndicatorEvents: PropertiesTableProps = {\n  onComplete: {\n    doc: \"Will be called once it's no longer `visible`.\",\n    type: 'function',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\nexport const ProgressIndicatorDeprecatedEvents: PropertiesTableProps = {\n  on_complete: {\n    doc: 'use `onComplete`.',\n    type: 'function',\n    status: 'deprecated',\n  },\n}\n"],"mappings":"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"}

package/es/components/progress-indicator/ProgressIndicatorLinear.d.ts

@@ -2,26 +2,6 @@
  * Web ProgressIndicator Component
  *
  */
-import React from 'react';
-type ProgressIndicatorLinearProps = {
-    /**
-     * Defines the size, like `small`, `default`, `medium` or `large`. Defaults to `default`.
-     */
-    size?: string;
-    /**
-     * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`.
-     */
-    visible?: boolean;
-    /**
-     * To visualize a static "percentage" (0-100) as a progress state. Defaults to `null`.
-     */
-    progress?: number;
-    onComplete?: (...args: any[]) => any;
-    callOnCompleteHandler?: (...args: any[]) => any;
-    /**
-     * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.
-     */
-    title?: string;
-};
-declare function ProgressIndicatorLine(props: ProgressIndicatorLinearProps & Omit<React.HTMLProps<HTMLElement>, 'size'>): import("react/jsx-runtime").JSX.Element;
+import { ProgressIndicatorLinearAllProps } from './types';
+declare function ProgressIndicatorLine(props: ProgressIndicatorLinearAllProps): import("react/jsx-runtime").JSX.Element;
 export default ProgressIndicatorLine;

package/es/components/progress-indicator/ProgressIndicatorLinear.js

@@ -3,8 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _span;
-const _excluded = ["size", "title", "progress", "visible", "onComplete", "callOnCompleteHandler"];
+const _excluded = ["size", "title", "progress", "visible", "onComplete", "callOnCompleteHandler", "customColors", "style"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useRef, useEffect } from 'react';
@@ -23,7 +22,9 @@ function ProgressIndicatorLine(props) {
       progress,
       visible,
       onComplete,
-      callOnCompleteHandler
+      callOnCompleteHandler,
+      customColors,
+      style
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
   const onCompleteIsFn = typeof onComplete === 'function' && typeof callOnCompleteHandler === 'function';
@@ -43,15 +44,22 @@ function ProgressIndicatorLine(props) {
   }
   const remainingDOMAttributes = validateDOMAttributes(props, _objectSpread({}, rest));
   return React.createElement("span", _extends({
-    className: 'dnb-progress-indicator__linear' + (size ? ` dnb-progress-indicator__linear--${size}` : "")
+    className: 'dnb-progress-indicator__linear' + (size ? ` dnb-progress-indicator__linear--${size}` : ""),
+    style: _objectSpread(_objectSpread({}, style), (customColors === null || customColors === void 0 ? void 0 : customColors.shaft) && {
+      backgroundColor: customColors === null || customColors === void 0 ? void 0 : customColors.shaft
+    })
   }, remainingDOMAttributes), React.createElement("span", {
     className: "dnb-progress-indicator__linear__bar " + (hasProgressValue ? 'dnb-progress-indicator__linear__bar-transition' : 'dnb-progress-indicator__linear__bar1-animation'),
-    style: hasProgressValue ? {
-      transform
-    } : {}
-  }), !hasProgressValue && (_span || (_span = React.createElement("span", {
-    className: "dnb-progress-indicator__linear__bar dnb-progress-indicator__linear__bar2-animation"
-  }))));
+    style: {
+      backgroundColor: customColors === null || customColors === void 0 ? void 0 : customColors.line,
+      transform: hasProgressValue ? transform : undefined
+    }
+  }), !hasProgressValue && React.createElement("span", {
+    className: "dnb-progress-indicator__linear__bar dnb-progress-indicator__linear__bar2-animation",
+    style: {
+      backgroundColor: customColors === null || customColors === void 0 ? void 0 : customColors.line
+    }
+  }));
 }
 export default ProgressIndicatorLine;
 //# sourceMappingURL=ProgressIndicatorLinear.js.map

package/es/components/progress-indicator/ProgressIndicatorLinear.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressIndicatorLinear.js","names":["React","useRef","useEffect","validateDOMAttributes","usePrevious","value","ref","current","ProgressIndicatorLine","props","size","title","progress","visible","onComplete","callOnCompleteHandler","rest","_objectWithoutProperties","_excluded","onCompleteIsFn","visibleCurrent","visiblePrev","hasProgressValue","transform","role","remainingDOMAttributes","_objectSpread","createElement","_extends","className","style","_span"],"sources":["../../../../src/components/progress-indicator/ProgressIndicatorLinear.tsx"],"sourcesContent":["/**\n * Web ProgressIndicator Component\n *\n */\n\nimport React, { useRef, useEffect } from 'react'\nimport classnames from 'classnames'\nimport { validateDOMAttributes } from '../../shared/component-helper'\ntype ProgressIndicatorLinearProps = {\n  /**\n   * Defines the size, like `small`, `default`, `medium` or `large`. Defaults to `default`.\n   */\n  size?: string\n  /**\n   * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`.\n   */\n  visible?: boolean\n  /**\n   * To visualize a static \"percentage\" (0-100) as a progress state. Defaults to `null`.\n   */\n  progress?: number\n  onComplete?: (...args: any[]) => any\n  callOnCompleteHandler?: (...args: any[]) => any\n  /**\n   * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.\n   */\n  title?: string\n}\n\nfunction usePrevious<P>(value: P): [P, P] {\n  const ref = useRef<P>()\n  useEffect(() => {\n    ref.current = value\n  }, [value])\n  return [ref.current, value]\n}\n\nfunction ProgressIndicatorLine(\n  props: ProgressIndicatorLinearProps &\n    Omit<React.HTMLProps<HTMLElement>, 'size'>\n) {\n  const {\n    size,\n    title,\n    progress,\n    visible,\n    onComplete,\n    callOnCompleteHandler,\n    ...rest\n  } = props\n\n  const onCompleteIsFn =\n    typeof onComplete === 'function' &&\n    typeof callOnCompleteHandler === 'function'\n\n  const [visibleCurrent, visiblePrev] = usePrevious(visible)\n\n  if (onCompleteIsFn && !visibleCurrent && visiblePrev) {\n    callOnCompleteHandler()\n  }\n\n  const hasProgressValue = progress > -1\n\n  const transform = `translateX(${(progress || 0) - 100}%)`\n\n  if (hasProgressValue) {\n    rest.role = 'progressbar'\n    rest['aria-label'] = title\n    rest['title'] = title\n  } else {\n    rest.role = 'alert'\n    rest['aria-busy'] = true\n  }\n\n  const remainingDOMAttributes = validateDOMAttributes(props, { ...rest })\n\n  return (\n    <span\n      className={classnames(\n        'dnb-progress-indicator__linear',\n        size && `dnb-progress-indicator__linear--${size}`\n      )}\n      {...remainingDOMAttributes}\n    >\n      <span\n        className={classnames(\n          'dnb-progress-indicator__linear__bar',\n          hasProgressValue &&\n            'dnb-progress-indicator__linear__bar-transition',\n          !hasProgressValue &&\n            'dnb-progress-indicator__linear__bar1-animation'\n        )}\n        style={hasProgressValue ? { transform } : {}}\n      />\n      {!hasProgressValue && (\n        <span\n          className={classnames(\n            'dnb-progress-indicator__linear__bar',\n            'dnb-progress-indicator__linear__bar2-animation'\n          )}\n        />\n      )}\n    </span>\n  )\n}\n\nexport default ProgressIndicatorLine\n"],"mappings":";;;;;;;;;AAKA,OAAOA,KAAK,IAAIC,MAAM,EAAEC,SAAS,QAAQ,OAAO;AAEhD,SAASC,qBAAqB,QAAQ,+BAA+B;AAsBrE,SAASC,WAAWA,CAAIC,KAAQ,EAAU;EACxC,MAAMC,GAAG,GAAGL,MAAM,CAAI,CAAC;EACvBC,SAAS,CAAC,MAAM;IACdI,GAAG,CAACC,OAAO,GAAGF,KAAK;EACrB,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EACX,OAAO,CAACC,GAAG,CAACC,OAAO,EAAEF,KAAK,CAAC;AAC7B;AAEA,SAASG,qBAAqBA,CAC5BC,KAC4C,EAC5C;EACA,MAAM;MACJC,IAAI;MACJC,KAAK;MACLC,QAAQ;MACRC,OAAO;MACPC,UAAU;MACVC;IAEF,CAAC,GAAGN,KAAK;IADJO,IAAI,GAAAC,wBAAA,CACLR,KAAK,EAAAS,SAAA;EAET,MAAMC,cAAc,GAClB,OAAOL,UAAU,KAAK,UAAU,IAChC,OAAOC,qBAAqB,KAAK,UAAU;EAE7C,MAAM,CAACK,cAAc,EAAEC,WAAW,CAAC,GAAGjB,WAAW,CAACS,OAAO,CAAC;EAE1D,IAAIM,cAAc,IAAI,CAACC,cAAc,IAAIC,WAAW,EAAE;IACpDN,qBAAqB,CAAC,CAAC;EACzB;EAEA,MAAMO,gBAAgB,GAAGV,QAAQ,GAAG,CAAC,CAAC;EAEtC,MAAMW,SAAS,GAAI,cAAa,CAACX,QAAQ,IAAI,CAAC,IAAI,GAAI,IAAG;EAEzD,IAAIU,gBAAgB,EAAE;IACpBN,IAAI,CAACQ,IAAI,GAAG,aAAa;IACzBR,IAAI,CAAC,YAAY,CAAC,GAAGL,KAAK;IAC1BK,IAAI,CAAC,OAAO,CAAC,GAAGL,KAAK;EACvB,CAAC,MAAM;IACLK,IAAI,CAACQ,IAAI,GAAG,OAAO;IACnBR,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI;EAC1B;EAEA,MAAMS,sBAAsB,GAAGtB,qBAAqB,CAACM,KAAK,EAAAiB,aAAA,KAAOV,IAAI,CAAE,CAAC;EAExE,OACEhB,KAAA,CAAA2B,aAAA,SAAAC,QAAA;IACEC,SAAS,EACP,gCAAgC,IAChCnB,IAAI,uCAAuCA,IAAK;EAChD,GACEe,sBAAsB,GAE1BzB,KAAA,CAAA2B,aAAA;IACEE,SAAS,4CAEPP,gBAAgB,GACd,gDAAgD,GAEhD,gDAAgD,CAClD;IACFQ,KAAK,EAAER,gBAAgB,GAAG;MAAEC;IAAU,CAAC,GAAG,CAAC;EAAE,CAC9C,CAAC,EACD,CAACD,gBAAgB,KAAAS,KAAA,KAAAA,KAAA,GAChB/B,KAAA,CAAA2B,aAAA;IACEE,SAAS;EAGP,CACH,CAAC,EAEA,CAAC;AAEX;AAEA,eAAerB,qBAAqB"}
+{"version":3,"file":"ProgressIndicatorLinear.js","names":["React","useRef","useEffect","validateDOMAttributes","usePrevious","value","ref","current","ProgressIndicatorLine","props","size","title","progress","visible","onComplete","callOnCompleteHandler","customColors","style","rest","_objectWithoutProperties","_excluded","onCompleteIsFn","visibleCurrent","visiblePrev","hasProgressValue","transform","role","remainingDOMAttributes","_objectSpread","createElement","_extends","className","shaft","backgroundColor","line","undefined"],"sources":["../../../../src/components/progress-indicator/ProgressIndicatorLinear.tsx"],"sourcesContent":["/**\n * Web ProgressIndicator Component\n *\n */\n\nimport React, { useRef, useEffect } from 'react'\nimport classnames from 'classnames'\nimport { validateDOMAttributes } from '../../shared/component-helper'\nimport { ProgressIndicatorLinearAllProps } from './types'\n\nfunction usePrevious<P>(value: P): [P, P] {\n  const ref = useRef<P>()\n  useEffect(() => {\n    ref.current = value\n  }, [value])\n  return [ref.current, value]\n}\n\nfunction ProgressIndicatorLine(props: ProgressIndicatorLinearAllProps) {\n  const {\n    size,\n    title,\n    progress,\n    visible,\n    onComplete,\n    callOnCompleteHandler,\n    customColors,\n    style,\n    ...rest\n  } = props\n\n  const onCompleteIsFn =\n    typeof onComplete === 'function' &&\n    typeof callOnCompleteHandler === 'function'\n\n  const [visibleCurrent, visiblePrev] = usePrevious(visible)\n\n  if (onCompleteIsFn && !visibleCurrent && visiblePrev) {\n    callOnCompleteHandler()\n  }\n\n  const hasProgressValue = progress > -1\n\n  const transform = `translateX(${(progress || 0) - 100}%)`\n\n  if (hasProgressValue) {\n    rest.role = 'progressbar'\n    rest['aria-label'] = title\n    rest['title'] = title\n  } else {\n    rest.role = 'alert'\n    rest['aria-busy'] = true\n  }\n\n  const remainingDOMAttributes = validateDOMAttributes(props, { ...rest })\n\n  return (\n    <span\n      className={classnames(\n        'dnb-progress-indicator__linear',\n        size && `dnb-progress-indicator__linear--${size}`\n      )}\n      style={{\n        ...style,\n        ...(customColors?.shaft && {\n          backgroundColor: customColors?.shaft,\n        }),\n      }}\n      {...remainingDOMAttributes}\n    >\n      <span\n        className={classnames(\n          'dnb-progress-indicator__linear__bar',\n          hasProgressValue &&\n            'dnb-progress-indicator__linear__bar-transition',\n          !hasProgressValue &&\n            'dnb-progress-indicator__linear__bar1-animation'\n        )}\n        style={{\n          backgroundColor: customColors?.line,\n          transform: hasProgressValue ? transform : undefined,\n        }}\n      />\n      {!hasProgressValue && (\n        <span\n          className={classnames(\n            'dnb-progress-indicator__linear__bar',\n            'dnb-progress-indicator__linear__bar2-animation'\n          )}\n          style={{\n            backgroundColor: customColors?.line,\n          }}\n        />\n      )}\n    </span>\n  )\n}\n\nexport default ProgressIndicatorLine\n"],"mappings":";;;;;;;;AAKA,OAAOA,KAAK,IAAIC,MAAM,EAAEC,SAAS,QAAQ,OAAO;AAEhD,SAASC,qBAAqB,QAAQ,+BAA+B;AAGrE,SAASC,WAAWA,CAAIC,KAAQ,EAAU;EACxC,MAAMC,GAAG,GAAGL,MAAM,CAAI,CAAC;EACvBC,SAAS,CAAC,MAAM;IACdI,GAAG,CAACC,OAAO,GAAGF,KAAK;EACrB,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EACX,OAAO,CAACC,GAAG,CAACC,OAAO,EAAEF,KAAK,CAAC;AAC7B;AAEA,SAASG,qBAAqBA,CAACC,KAAsC,EAAE;EACrE,MAAM;MACJC,IAAI;MACJC,KAAK;MACLC,QAAQ;MACRC,OAAO;MACPC,UAAU;MACVC,qBAAqB;MACrBC,YAAY;MACZC;IAEF,CAAC,GAAGR,KAAK;IADJS,IAAI,GAAAC,wBAAA,CACLV,KAAK,EAAAW,SAAA;EAET,MAAMC,cAAc,GAClB,OAAOP,UAAU,KAAK,UAAU,IAChC,OAAOC,qBAAqB,KAAK,UAAU;EAE7C,MAAM,CAACO,cAAc,EAAEC,WAAW,CAAC,GAAGnB,WAAW,CAACS,OAAO,CAAC;EAE1D,IAAIQ,cAAc,IAAI,CAACC,cAAc,IAAIC,WAAW,EAAE;IACpDR,qBAAqB,CAAC,CAAC;EACzB;EAEA,MAAMS,gBAAgB,GAAGZ,QAAQ,GAAG,CAAC,CAAC;EAEtC,MAAMa,SAAS,GAAI,cAAa,CAACb,QAAQ,IAAI,CAAC,IAAI,GAAI,IAAG;EAEzD,IAAIY,gBAAgB,EAAE;IACpBN,IAAI,CAACQ,IAAI,GAAG,aAAa;IACzBR,IAAI,CAAC,YAAY,CAAC,GAAGP,KAAK;IAC1BO,IAAI,CAAC,OAAO,CAAC,GAAGP,KAAK;EACvB,CAAC,MAAM;IACLO,IAAI,CAACQ,IAAI,GAAG,OAAO;IACnBR,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI;EAC1B;EAEA,MAAMS,sBAAsB,GAAGxB,qBAAqB,CAACM,KAAK,EAAAmB,aAAA,KAAOV,IAAI,CAAE,CAAC;EAExE,OACElB,KAAA,CAAA6B,aAAA,SAAAC,QAAA;IACEC,SAAS,EACP,gCAAgC,IAChCrB,IAAI,uCAAuCA,IAAK,QAChD;IACFO,KAAK,EAAAW,aAAA,CAAAA,aAAA,KACAX,KAAK,GACJ,CAAAD,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEgB,KAAK,KAAI;MACzBC,eAAe,EAAEjB,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEgB;IACjC,CAAC;EACD,GACEL,sBAAsB,GAE1B3B,KAAA,CAAA6B,aAAA;IACEE,SAAS,4CAEPP,gBAAgB,GACd,gDAAgD,GAEhD,gDAAgD,CAClD;IACFP,KAAK,EAAE;MACLgB,eAAe,EAAEjB,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEkB,IAAI;MACnCT,SAAS,EAAED,gBAAgB,GAAGC,SAAS,GAAGU;IAC5C;EAAE,CACH,CAAC,EACD,CAACX,gBAAgB,IAChBxB,KAAA,CAAA6B,aAAA;IACEE,SAAS,sFAGP;IACFd,KAAK,EAAE;MACLgB,eAAe,EAAEjB,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEkB;IACjC;EAAE,CACH,CAEC,CAAC;AAEX;AAEA,eAAe1B,qBAAqB"}

package/es/components/progress-indicator/style/dnb-progress-indicator.css

@@ -7,11 +7,16 @@
  */
 .dnb-progress-indicator {
   --progress-indicator-timing: cubic-bezier(0.5, 0, 0.5, 0.99);
-  --progress-indicator-circular-circle: 88;
-  --progress-indicator-circular-circle-offset--min: 88;
-  --progress-indicator-circular-circle-offset--max: 1;
+  --progress-indicator-circular-circle: 314.159265359%;
+  --progress-indicator-circular-circle-offset--min: 314.159265359%;
+  --progress-indicator-circular-circle-offset--max: 1%;
+  --progress-indicator-circular-size: 2rem;
+  --progress-indicator-circular-stroke-width: calc(
+    var(--progress-indicator-circular-size) / 8
+  );
   --progress-indicator-circular-background-color: grey;
   --progress-indicator-circular-bar-color: var(--color-black);
+  --progress-indicator-linear-size: 0.5rem;
   --progress-indicator-linear-background-color: grey;
   --progress-indicator-linear-bar-color: var(--color-black);
   position: relative;
@@ -44,10 +49,32 @@
 .dnb-progress-indicator--vertical .dnb-progress-indicator__label {
   padding-top: 0.5rem;
 }
+.dnb-progress-indicator--inside .dnb-progress-indicator__label {
+  position: absolute;
+  width: 100%;
+  justify-content: center;
+  padding: var(--progress-indicator-circular-stroke-width);
+}
+.dnb-progress-indicator--small {
+  --progress-indicator-circular-size: 1rem;
+  --progress-indicator-linear-size: 0.25rem;
+}
+.dnb-progress-indicator--medium {
+  --progress-indicator-circular-size: 1.5rem;
+  --progress-indicator-linear-size: 1rem;
+}
+.dnb-progress-indicator--large {
+  --progress-indicator-circular-size: 3.5rem;
+  --progress-indicator-linear-size: 1.5rem;
+}
+.dnb-progress-indicator--huge {
+  --progress-indicator-circular-size: 20rem;
+  --progress-indicator-linear-size: 2rem;
+}
 .dnb-progress-indicator__circular {
   position: relative;
-  width: 2rem;
-  height: 2rem;
+  width: var(--progress-indicator-circular-size);
+  height: var(--progress-indicator-circular-size);
   transform: rotate(-90deg);
 }
 .dnb-progress-indicator__circular svg {
@@ -55,6 +82,21 @@
   inset: 0;
   width: 100%;
   height: 100%;
+  padding: calc(var(--progress-indicator-circular-stroke-width) / 2);
+}
+.dnb-progress-indicator__circular svg:not(:root) {
+  overflow: visible;
+}
+.dnb-progress-indicator__circular__background-padding {
+  display: block;
+  height: 100%;
+  padding: calc(var(--progress-indicator-circular-stroke-width) / 2);
+}
+.dnb-progress-indicator__circular__background {
+  display: block;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 50%;
 }
 .dnb-progress-indicator__circular__line {
   animation-duration: 2s;
@@ -83,43 +125,14 @@
 }
 .dnb-progress-indicator__circular__circle {
   stroke-linecap: round;
+  stroke-width: var(--progress-indicator-circular-stroke-width);
 }
 .dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle {
   stroke: var(--progress-indicator-circular-background-color);
 }
 .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
   stroke: var(--progress-indicator-circular-bar-color);
-}
-.dnb-progress-indicator__circular--small {
-  width: 1rem;
-  height: 1rem;
-}
-.dnb-progress-indicator__circular--medium {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.dnb-progress-indicator__circular--large {
-  width: 3.5rem;
-  height: 3.5rem;
-}
-.dnb-progress-indicator__circular--huge {
-  width: 20rem;
-  height: 20rem;
-}
-.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.1;
-}
-.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.3;
-}
-.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.5;
-}
-.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.7;
-}
-.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.9;
+  stroke-width: calc(var(--progress-indicator-circular-stroke-width) - 0.5px);
 }
 .dnb-progress-indicator__linear {
   background-color: var(--progress-indicator-linear-background-color);
@@ -127,8 +140,8 @@
   overflow: hidden;
   width: 100%;
   will-change: transform;
-  height: 0.5rem;
-  border-radius: 0.25rem;
+  height: var(--progress-indicator-linear-size);
+  border-radius: calc(var(--progress-indicator-linear-size) / 2);
 }
 .dnb-progress-indicator__linear__bar {
   background-color: var(--progress-indicator-linear-bar-color);
@@ -151,22 +164,6 @@
   width: auto;
   animation: progress-indicator-linear-bar-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
 }
-.dnb-progress-indicator__linear--small {
-  height: 0.25rem;
-  border-radius: 0.125rem;
-}
-.dnb-progress-indicator__linear--medium {
-  height: 1rem;
-  border-radius: 0.5rem;
-}
-.dnb-progress-indicator__linear--large {
-  height: 1.5rem;
-  border-radius: 0.75rem;
-}
-.dnb-progress-indicator__linear--huge {
-  height: 2rem;
-  border-radius: 1rem;
-}
 html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation {
   left: -35%;
   right: 100%;
@@ -190,7 +187,7 @@ html[data-visual-test] .dnb-progress-indicator {
   opacity: 1;
   animation-duration: 0ms;
 }
-.dnb-progress-indicator--no-animation {
+.dnb-progress-indicator--no-animation, .dnb-progress-indicator--no-animation.dnb-progress-indicator--complete {
   animation-duration: 0ms;
 }
 html[data-visual-test] .dnb-progress-indicator__bar-transition {