@brightspace-ui/core 3.200.0 → 3.202.0

package/components/list/demo/list-layout.html

@@ -467,6 +467,62 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Color Indicator</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-toggle pressed>
+						<d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
+						<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
+					</d2l-button-toggle>
+					<d2l-list layout="tiles">
+						<d2l-list-item label="item 1" key="1" color="#29a6ff" selectable tile-header>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
+							<d2l-list-item-content>
+								<div>Identify categories of physical activities</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation A1.2</div>
+							</d2l-list-item-content>
+							<div slot="actions">
+								<d2l-button-icon text="More" icon="tier1:more"></d2l-button-icon>
+							</div>
+						</d2l-list-item>
+						<d2l-list-item label="item 2" key="2" color="#29a6ff">
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
+							<d2l-list-item-content>
+								<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation B2.1</div>
+							</d2l-list-item-content>
+							<div slot="actions">
+								<d2l-button-icon text="More" icon="tier1:more" translucent></d2l-button-icon>
+							</div>
+						</d2l-list-item>
+						<d2l-list-item label="item 3" key="3" tile-header selectable color="#29a6ff">
+							<d2l-list-item-content>
+								<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation B2.2</div>
+							</d2l-list-item-content>
+							<div slot="actions">
+								<d2l-button-icon text="Pin" icon="tier1:pin-filled"></d2l-button-icon>
+								<d2l-button-icon text="More" icon="tier1:more"></d2l-button-icon>
+							</div>
+						</d2l-list-item>
+						<d2l-list-item label="item 4" key="4" color="#29a6ff">
+							<d2l-list-item-content>
+								<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation B2.2</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+					</d2l-list>
+					<script data-demo-hide>
+						(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/list/list-item-generic-layout.js

@@ -256,13 +256,17 @@ class ListItemGenericLayout extends LitElement {
 				grid-row: start / start;
 			}
 
+			:host([layout="tile"]) ::slotted([slot="color-indicator"]) {
+				grid-column: start;
+				grid-row: content-start / content-end;
+			}
+
 			:host(:not([layout="tile"])) slot[name="header"],
 			:host([layout="tile"]) slot[name="add-top"],
 			:host([layout="tile"]) slot[name="control-container"],
 			:host([layout="tile"]) slot[name="before-content"],
 			:host([layout="tile"]) slot[name="outside-control"],
 			:host([layout="tile"]) slot[name="outside-control-action"],
-			:host([layout="tile"]) slot[name="color-indicator"],
 			:host([layout="tile"]) slot[name="expand-collapse"],
 			:host([layout="tile"]) slot[name="drop-target"],
 			:host([layout="tile"]) slot[name="nested"],

package/components/list/list-item-mixin.js

@@ -619,6 +619,24 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				margin-inline: 0;
 			}
 
+			:host([layout="tile"]) .d2l-list-item-color-outer {
+				padding: 1px;
+			}
+			:host([layout="tile"]) .d2l-list-item-color-inner {
+				border-end-end-radius: 0;
+				border-end-start-radius: 6px;
+				border-start-end-radius: 0;
+				border-start-start-radius: 6px;
+				width: 5px;
+			}
+			:host([layout="tile"][tile-header]) .d2l-list-item-color-outer {
+				padding-block-start: 0;
+			}
+			:host([layout="tile"][tile-header]) .d2l-list-item-color-inner {
+				border-start-end-radius: 0;
+				border-start-start-radius: 0;
+			}
+
 		`];
 
 		super.styles && styles.unshift(super.styles);

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.200.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",