@1024pix/pix-ui 58.4.9 → 58.4.11

package/addon/components/pix-gauge.gjs

@@ -36,7 +36,7 @@ export default class PixGauge extends Component {
     return this.args.hideValues ?? false;
   }
 
-  get maxLevelPourcentage() {
+  get maxLevelPercentage() {
     return this.maxLevel / 8;
   }
   get viewBox() {
@@ -71,6 +71,41 @@ export default class PixGauge extends Component {
     return this.args.isSmall ? 18 : 26;
   }
 
+  get gaugeWidths() {
+    let reachedLevelWidth = this.gaugeWidthCSS(this.reachedLevelPercentage);
+    let maxLevelWidth = this.gaugeWidthCSS(this.maxLevelPercentage);
+
+    const levelDifference = Math.round((this.maxLevel - this.reachedLevel) * 10) / 10;
+
+    const isMaxLevelInteger = this.maxLevel % 1 === 0;
+    const spacingRem = isMaxLevelInteger ? 1.75 : 2.625;
+
+    const isSpaceBetweenLevelsNarrow = this.args.isSmall
+      ? levelDifference < 1.5
+      : levelDifference < 0.5;
+
+    if (!this.hideValues && levelDifference !== 0 && isSpaceBetweenLevelsNarrow) {
+      if (this.maxLevel >= 7.5) {
+        reachedLevelWidth = this.gaugeWidthCSS(this.maxLevelPercentage, `- ${spacingRem}rem`);
+      } else {
+        maxLevelWidth = this.gaugeWidthCSS(this.reachedLevelPercentage, `+ ${spacingRem}rem`);
+      }
+    }
+
+    const reachedLevelMinWidth = `3rem`;
+    const maxLevelMinWidth = `${reachedLevelMinWidth} + ${spacingRem}rem`;
+
+    return {
+      reachedLevel: this.gaugeAdaptativeWidthCSS(reachedLevelMinWidth, reachedLevelWidth),
+      maxLevel: this.gaugeAdaptativeWidthCSS(maxLevelMinWidth, maxLevelWidth),
+    };
+  }
+
+  gaugeWidthCSS = (levelPercentage, spacing = '') =>
+    `calc(calc(100% - 8px) * ${levelPercentage} ${spacing})`;
+
+  gaugeAdaptativeWidthCSS = (width, minWidth) => `max(${minWidth}, ${width})`;
+
   isLevelActive = (index) => {
     if (this.reachedLevel === 0 && index === 0) return true;
     const step = 8 / this.args.stepLabels.length;
@@ -127,13 +162,13 @@ export default class PixGauge extends Component {
         {{! gauge white max level}}
         <rect
           y={{26}}
-          width="calc(calc(100% - 8px) * {{this.maxLevelPourcentage}})"
+          width={{this.gaugeWidths.maxLevel}}
           height={{this.whiteAndPurpleGaugesHeight}}
           rx={{this.whiteAndPurpleGaugeRx}}
           class="result-level-gauge__max-bar"
         />
         {{#unless this.hideValues}}
-          <g style="transform: translate(calc(calc(100% - 8px) * {{this.maxLevelPourcentage}}))">
+          <g style="transform: translate({{this.gaugeWidths.maxLevel}})">
             <text
               y={{this.statsFontHeight}}
               x="0"
@@ -147,15 +182,13 @@ export default class PixGauge extends Component {
         {{! mean purple level }}
         <rect
           y={{26}}
-          width="max(calc(calc(100% - 8px) * {{this.reachedLevelPercentage}}), 44px)"
+          width={{this.gaugeWidths.reachedLevel}}
           height={{this.whiteAndPurpleGaugesHeight}}
           rx={{this.whiteAndPurpleGaugeRx}}
           class="result-level-gauge__mean-bar"
         />
         {{#unless this.hideValues}}
-          <g
-            style="transform: translate(max(calc(calc(100% - 8px) * {{this.reachedLevelPercentage}}), 44px))"
-          >
+          <g style="transform: translate({{this.gaugeWidths.reachedLevel}})">
             <text
               y={{this.statsFontHeight}}
               x="0"

package/addon/components/pix-multi-select.gjs

@@ -43,10 +43,10 @@ export default class PixMultiSelect extends Component {
           getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
         );
         const listWidth = elementList.getBoundingClientRect().width;
-        const selectWidth = listWidth / baseFontRemRatio;
+        const selectWidth = Number(listWidth / baseFontRemRatio + 0.5).toFixed(2); // Fix for FF
 
         const element = document.getElementById(`container-${this.multiSelectId}`);
-        element.style.setProperty('--pix-multi-select-width', `${selectWidth + 0.5}rem`); // Fix for FF
+        element.style.setProperty('--pix-multi-select-width', `${selectWidth}rem`);
       });
     }
 

package/addon/components/pix-select.gjs

@@ -33,10 +33,10 @@ export default class PixSelect extends Component {
           getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
         );
         const listWidth = elementList.getBoundingClientRect().width;
-        const selectWidth = listWidth / baseFontRemRatio;
+        const selectWidth = Number(listWidth / baseFontRemRatio + 0.5).toFixed(2); // Fix for FF
 
         const element = document.getElementById(`container-${this.selectId}`);
-        element.style.setProperty('--pix-select-width', `${selectWidth + 0.5}rem`); // Fix for FF
+        element.style.setProperty('--pix-select-width', `${selectWidth}rem`);
       });
     }
   }

package/addon/styles/_pix-multi-select.scss

@@ -106,7 +106,7 @@
   }
 
   &::-webkit-scrollbar {
-    width: 11px;
+    width: 0.5rem;
   }
 
   &::-webkit-scrollbar-track {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "58.4.9",
+  "version": "58.4.11",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.25.2",
-    "@formatjs/intl": "^3.0.0",
+    "@formatjs/intl": "^4.0.0",
     "check-engine": "^1.14.0",
     "ember-auto-import": "^2.7.4",
     "ember-cli-babel": "^8.2.0",