@telia/teddy 0.2.15 → 0.2.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/meter-bar/meter-bar-indicator.cjs +7 -5
  2. package/dist/components/meter-bar/meter-bar-indicator.js +8 -6
  3. package/dist/style.css +11 -10
  4. package/package.json +1 -1
package/dist/components/meter-bar/meter-bar-indicator.cjs CHANGED
@@ -4,12 +4,12 @@ const jsxRuntime = require("react/jsx-runtime");
4
4
  const React = require("react");
5
5
  const clsx = require("clsx");
6
6
  const components_meterBar_utils = require("./utils.cjs");
7
- const slideInFromLeft = "_slideInFromLeft_34v05_1";
7
+ const slideInFromLeft = "_slideInFromLeft_1wiil_1";
8
8
  const styles = {
9
- "teddy-meter-bar": "_teddy-meter-bar_34v05_1",
10
- "teddy-meter-bar__indicator": "_teddy-meter-bar__indicator_34v05_13",
9
+ "teddy-meter-bar": "_teddy-meter-bar_1wiil_1",
10
+ "teddy-meter-bar__indicator": "_teddy-meter-bar__indicator_1wiil_14",
11
11
  slideInFromLeft,
12
- "teddy-meter-bar--negative": "_teddy-meter-bar--negative_34v05_26"
12
+ "teddy-meter-bar--negative": "_teddy-meter-bar--negative_1wiil_27"
13
13
  };
14
14
  const Indicator = React.forwardRef(
15
15
  ({ className, value: valueProp, getValueLabel = components_meterBar_utils.defaultGetValueLabel, color, max: propMax, ...props }, forwardRef) => {
@@ -17,16 +17,18 @@ const Indicator = React.forwardRef(
17
17
  const maxInternal = propMax || (context == null ? void 0 : context.max);
18
18
  const classes = clsx([styles[`${rootClassName}__indicator`]], className);
19
19
  const max = components_meterBar_utils.isValidMaxNumber(maxInternal) ? maxInternal : components_meterBar_utils.DEFAULT_MAX;
20
+ const transformMaxValue = components_meterBar_utils.isValidMaxNumber(context == null ? void 0 : context.max) ? context.max : components_meterBar_utils.DEFAULT_MAX;
20
21
  const value = components_meterBar_utils.isValidValueNumber(valueProp, max) ? valueProp : null;
21
22
  const valueLabel = components_meterBar_utils.isNumber(value) ? getValueLabel(value, max) : void 0;
22
23
  const progress = components_meterBar_utils.getProgress(value, max);
24
+ const transform = components_meterBar_utils.getProgress(value, transformMaxValue);
23
25
  return /* @__PURE__ */ jsxRuntime.jsx(
24
26
  "div",
25
27
  {
26
28
  ...props,
27
29
  style: {
28
30
  zIndex: 100 - Math.round(progress),
29
- transform: `translateX(-${100 - progress}%)`,
31
+ width: `${transform}%`,
30
32
  backgroundColor: color,
31
33
  ...props.style
32
34
  },
package/dist/components/meter-bar/meter-bar-indicator.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import React__default from "react";
3
3
  import clsx from "clsx";
4
- import { isNumber, defaultGetValueLabel, isValidMaxNumber, DEFAULT_MAX, isValidValueNumber, getProgress } from "./utils.js";
5
- const slideInFromLeft = "_slideInFromLeft_34v05_1";
4
+ import { isValidMaxNumber, DEFAULT_MAX, isNumber, defaultGetValueLabel, isValidValueNumber, getProgress } from "./utils.js";
5
+ const slideInFromLeft = "_slideInFromLeft_1wiil_1";
6
6
  const styles = {
7
- "teddy-meter-bar": "_teddy-meter-bar_34v05_1",
8
- "teddy-meter-bar__indicator": "_teddy-meter-bar__indicator_34v05_13",
7
+ "teddy-meter-bar": "_teddy-meter-bar_1wiil_1",
8
+ "teddy-meter-bar__indicator": "_teddy-meter-bar__indicator_1wiil_14",
9
9
  slideInFromLeft,
10
- "teddy-meter-bar--negative": "_teddy-meter-bar--negative_34v05_26"
10
+ "teddy-meter-bar--negative": "_teddy-meter-bar--negative_1wiil_27"
11
11
  };
12
12
  const Indicator = React__default.forwardRef(
13
13
  ({ className, value: valueProp, getValueLabel = defaultGetValueLabel, color, max: propMax, ...props }, forwardRef) => {
@@ -15,16 +15,18 @@ const Indicator = React__default.forwardRef(
15
15
  const maxInternal = propMax || (context == null ? void 0 : context.max);
16
16
  const classes = clsx([styles[`${rootClassName}__indicator`]], className);
17
17
  const max = isValidMaxNumber(maxInternal) ? maxInternal : DEFAULT_MAX;
18
+ const transformMaxValue = isValidMaxNumber(context == null ? void 0 : context.max) ? context.max : DEFAULT_MAX;
18
19
  const value = isValidValueNumber(valueProp, max) ? valueProp : null;
19
20
  const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
20
21
  const progress = getProgress(value, max);
22
+ const transform = getProgress(value, transformMaxValue);
21
23
  return /* @__PURE__ */ jsx(
22
24
  "div",
23
25
  {
24
26
  ...props,
25
27
  style: {
26
28
  zIndex: 100 - Math.round(progress),
27
- transform: `translateX(-${100 - progress}%)`,
29
+ width: `${transform}%`,
28
30
  backgroundColor: color,
29
31
  ...props.style
30
32
  },
package/dist/style.css CHANGED
@@ -1,4 +1,4 @@
1
- @charset 'UTF-8';._teddy-meter-bar_34v05_1 {
1
+ @charset 'UTF-8';._teddy-meter-bar_1wiil_1 {
2
2
  background: var(--teddy-color-transparent-black-100);
3
3
  overflow: hidden;
4
4
  border-radius: var(--teddy-border-radius-full);
@@ -6,33 +6,34 @@
6
6
  position: relative;
7
7
  /* create a stacking context */
8
8
  z-index: 0;
9
+ display: flex;
9
10
  /* Fix overflow clipping in Safari */
10
11
  /* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
11
12
  transform: translateZ(0);
12
13
  }
13
- ._teddy-meter-bar__indicator_34v05_13 {
14
+ ._teddy-meter-bar__indicator_1wiil_14 {
14
15
  background-color: var(--teddy-color-purple-800);
15
16
  width: 100%;
16
17
  height: 100%;
17
- position: absolute;
18
+ position: relative;
18
19
  inset: 0;
19
20
  }
20
21
  @media (prefers-reduced-motion: no-preference) {
21
- ._teddy-meter-bar__indicator_34v05_13 {
22
- animation: _slideInFromLeft_34v05_1 1s cubic-bezier(0.65, 0, 0.35, 1);
23
- transition: transform var(--teddy-motion-duration-500) cubic-bezier(0.65, 0, 0.35, 1);
22
+ ._teddy-meter-bar__indicator_1wiil_14 {
23
+ animation: _slideInFromLeft_1wiil_1 1s cubic-bezier(0.65, 0, 0.35, 1);
24
+ transition: transform var(--teddy-motion-duration-500) cubic-bezier(0.65, 0, 0.35, 1), width var(--teddy-motion-duration-500) cubic-bezier(0.65, 0, 0.35, 1);
24
25
  }
25
26
  }
26
- ._teddy-meter-bar--negative_34v05_26 {
27
+ ._teddy-meter-bar--negative_1wiil_27 {
27
28
  background: var(--teddy-color-transparent-white-100);
28
29
  }
29
- ._teddy-meter-bar--negative_34v05_26 ._teddy-meter-bar__indicator_34v05_13 {
30
+ ._teddy-meter-bar--negative_1wiil_27 ._teddy-meter-bar__indicator_1wiil_14 {
30
31
  background-color: var(--teddy-color-purple-300);
31
32
  }
32
33
 
33
- @keyframes _slideInFromLeft_34v05_1 {
34
+ @keyframes _slideInFromLeft_1wiil_1 {
34
35
  0% {
35
- transform: translateX(-100%);
36
+ width: 0;
36
37
  }
37
38
  }._teddy-skeleton_11jot_1 {
38
39
  background-image: none;
package/package.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "pnpm": ">=9"
21
21
  },
22
22
  "private": false,
23
- "version": "0.2.15",
23
+ "version": "0.2.16",
24
24
  "sideEffects": [
25
25
  "**/*.css",
26
26
  "**/*.svg"