@brightspace-ui/core 3.201.0 → 3.202.0

package/components/meter/demo/meter.html

@@ -45,6 +45,8 @@
 						<d2l-meter-linear value="3" max="6" text="Visited: {x/y}" percent text-hidden></d2l-meter-linear>
 						<d2l-meter-linear value="3" max="6" text="Visited: {%}"></d2l-meter-linear>
 						<d2l-meter-linear value="3" max="6" text="You're doing great!" percent></d2l-meter-linear>
+						<d2l-meter-linear value="1" max="3" text="Round up({x/y} => {%})" percent percent-rounding-mode="ceil"></d2l-meter-linear>
+						<d2l-meter-linear value="2" max="3" text="Round down({x/y} => {%})" percent percent-rounding-mode="floor"></d2l-meter-linear>
 					</div>
 					<div class="dark-background">
 						<d2l-meter-linear value="2" max="15" foreground-light text-inline></d2l-meter-linear>
@@ -56,6 +58,8 @@
 						<d2l-meter-linear value="3" max="6" foreground-light text="Visited: {x/y}" percent></d2l-meter-linear>
 						<d2l-meter-linear value="3" max="6" foreground-light text="Visited: {%}"></d2l-meter-linear>
 						<d2l-meter-linear value="3" max="6" foreground-light text="You're doing great!" percent></d2l-meter-linear>
+						<d2l-meter-linear value="1" max="3" foreground-light text="Round up({x/y} => {%})" percent percent-rounding-mode="ceil"></d2l-meter-linear>
+						<d2l-meter-linear value="2" max="3" foreground-light text="Round down({x/y} => {%})" percent percent-rounding-mode="floor"></d2l-meter-linear>
 					</div>
 				</template>
 			</d2l-demo-snippet>

package/components/meter/meter-mixin.js

@@ -16,6 +16,11 @@ export const MeterMixin = superclass => class extends LocalizeCoreElement(superc
 			 * @type {boolean}
 			 */
 			percent: { type: Boolean },
+			/**
+			 * Rounding mode for percentage text values
+			 * @type {"round" | "ceil" | "floor"}
+			 */
+			percentRoundingMode: { type: String, attribute: 'percent-rounding-mode' },
 			/**
 			 * Context information for the meter. If the text contains {%} or {x/y}, they will be replaced with a percentage or fraction respectively.
 			 * @type {string}
@@ -41,6 +46,7 @@ export const MeterMixin = superclass => class extends LocalizeCoreElement(superc
 		this.percent = false;
 		this.textHidden = false;
 		this.value = 0;
+		this.percentRoundingMode = 'round';
 
 		this._namespace = 'components.meter-mixin';
 	}
@@ -52,8 +58,17 @@ export const MeterMixin = superclass => class extends LocalizeCoreElement(superc
 		return secondary ? this.localize(`${this._namespace}.commaSeperatedAria`, { term1: secondary, term2: mainLabel }) : mainLabel;
 	}
 
+	_getPecentage() {
+		const value = this.max > 0 ? this.value / this.max : 0;
+		switch (this.percentRoundingMode) {
+			case 'ceil': return Math.ceil(value * 100) / 100;
+			case 'floor': return Math.floor(value * 100) / 100;
+			default: return Math.round(value * 100) / 100;
+		}
+	}
+
 	_primary(value, max, aria = false) {
-		const percentage = max > 0 ? value / max : 0;
+		const percentage = this._getPecentage();
 		const key = aria ? 'fractionAria' : 'fraction';
 
 		return this.percent
@@ -68,7 +83,7 @@ export const MeterMixin = superclass => class extends LocalizeCoreElement(superc
 
 		const key = aria ? 'fractionAria' : 'fraction';
 
-		const percentage = this.max > 0 ? value / max : 0;
+		const percentage = this._getPecentage();
 		context = context.replace('{%}', formatPercent(percentage, { maximumFractionDigits: 0 }));
 		context = context.replace('{x/y}', this.localize(`${this._namespace}.${key}`, { x: value, y: max }));
 		context = context.replace('{x}', value);

package/custom-elements.json

@@ -11320,6 +11320,12 @@
           "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
           "type": "number",
           "default": "0"
+        },
+        {
+          "name": "percent-rounding-mode",
+          "description": "Rounding mode for percentage text values",
+          "type": "\"round\" | \"ceil\" | \"floor\"",
+          "default": "\"round\""
         }
       ],
       "properties": [
@@ -11356,6 +11362,13 @@
           "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
           "type": "number",
           "default": "0"
+        },
+        {
+          "name": "percentRoundingMode",
+          "attribute": "percent-rounding-mode",
+          "description": "Rounding mode for percentage text values",
+          "type": "\"round\" | \"ceil\" | \"floor\"",
+          "default": "\"round\""
         }
       ]
     },
@@ -11398,6 +11411,12 @@
           "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
           "type": "number",
           "default": "0"
+        },
+        {
+          "name": "percent-rounding-mode",
+          "description": "Rounding mode for percentage text values",
+          "type": "\"round\" | \"ceil\" | \"floor\"",
+          "default": "\"round\""
         }
       ],
       "properties": [
@@ -11441,6 +11460,13 @@
           "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
           "type": "number",
           "default": "0"
+        },
+        {
+          "name": "percentRoundingMode",
+          "attribute": "percent-rounding-mode",
+          "description": "Rounding mode for percentage text values",
+          "type": "\"round\" | \"ceil\" | \"floor\"",
+          "default": "\"round\""
         }
       ]
     },
@@ -11477,6 +11503,12 @@
           "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
           "type": "number",
           "default": "0"
+        },
+        {
+          "name": "percent-rounding-mode",
+          "description": "Rounding mode for percentage text values",
+          "type": "\"round\" | \"ceil\" | \"floor\"",
+          "default": "\"round\""
         }
       ],
       "properties": [
@@ -11513,6 +11545,13 @@
           "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
           "type": "number",
           "default": "0"
+        },
+        {
+          "name": "percentRoundingMode",
+          "attribute": "percent-rounding-mode",
+          "description": "Rounding mode for percentage text values",
+          "type": "\"round\" | \"ceil\" | \"floor\"",
+          "default": "\"round\""
         }
       ]
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.201.0",
+  "version": "3.202.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",