@brightspace-ui/core 2.80.2 → 2.80.3

package/components/object-property-list/demo/object-property-list.html

@@ -59,6 +59,19 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Object Property List: Hidden items</h2>
+
+			<d2l-demo-snippet overflow-hidden>
+				<template>
+					<d2l-object-property-list>
+						<d2l-object-property-list-item text="Item 1"></d2l-object-property-list-item>
+						<d2l-object-property-list-item text="Item 2 (Hidden)" hidden></d2l-object-property-list-item>
+						<d2l-object-property-list-item text="Item 3"></d2l-object-property-list-item>
+						<d2l-object-property-list-item text="Item 4 (Hidden)" hidden></d2l-object-property-list-item>
+					</d2l-object-property-list>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Object Property List: No external whitespace (still contains internal whitespace in the component renderers)</h2>
 
 			<d2l-demo-snippet overflow-hidden>

package/components/object-property-list/object-property-list-item.js

@@ -11,6 +11,10 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 export class ObjectPropertyListItem extends SkeletonMixin(LitElement) {
 	static get properties() {
 		return {
+			/**
+			 * @ignore
+			 */
+			hidden: { type: Boolean },
 			/**
 			 * Name of an optional icon to display
 			 * @type {string}
@@ -21,6 +25,7 @@ export class ObjectPropertyListItem extends SkeletonMixin(LitElement) {
 			 * @type {string}
 			 */
 			text: { type: String },
+			_showSeparator: { state: true },
 		};
 	}
 
@@ -29,12 +34,14 @@ export class ObjectPropertyListItem extends SkeletonMixin(LitElement) {
 			:host {
 				vertical-align: middle;
 			}
+			:host([hidden]) {
+				display: none;
+			}
 			d2l-icon {
 				height: 1.2857em; /* 18px desired height at main font size (14px), but using em to scale properly at smaller breakpoint. */
 				width: 1.2857em;
 			}
 			.separator {
-				display: var(--d2l-object-property-list-item-separator-display, inline);
 				margin: 0 -0.05rem; /* 10px desired margin, subtract 5px arbitrary whitespace and 6px whitespace inside bullet icon. */
 			}
 			.separator d2l-icon {
@@ -57,6 +64,11 @@ export class ObjectPropertyListItem extends SkeletonMixin(LitElement) {
 		`];
 	}
 
+	constructor() {
+		super();
+		this._showSeparator = true;
+	}
+
 	render() {
 		return html`
 			${this._renderIcon()}
@@ -65,17 +77,27 @@ export class ObjectPropertyListItem extends SkeletonMixin(LitElement) {
 		`;
 	}
 
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has('hidden')) this._onHidden();
+	}
+
+	_onHidden() {
+		/** Dispatched when the visibility of the item changes */
+		this.dispatchEvent(new CustomEvent('d2l-object-property-list-item-visibility-change', { bubbles: true, composed: true }));
+	}
+
 	_renderIcon() {
 		return this.icon && !this.skeleton ? html`<d2l-icon icon="${this.icon}" class="item-icon"></d2l-icon>` : nothing;
 	}
 
 	_renderSeparator() {
-		return html`
+		return this._showSeparator ? html`
 			<span class="separator">
 				<d2l-screen-reader-pause></d2l-screen-reader-pause>
 				<d2l-icon icon="tier1:bullet"></d2l-icon>
 			</span>
-		`;
+		` : nothing;
 	}
 
 	_renderText() {

package/components/object-property-list/object-property-list.js

@@ -28,9 +28,6 @@ class ObjectPropertyList extends LocalizeCoreElement(SkeletonMixin(LitElement))
 			:host([hidden]) {
 				display: none;
 			}
-			::slotted(:last-child), slot :last-child {
-				--d2l-object-property-list-item-separator-display: none;
-			}
 			::slotted([slot="status"]) {
 				display: none;
 			}
@@ -41,6 +38,13 @@ class ObjectPropertyList extends LocalizeCoreElement(SkeletonMixin(LitElement))
 		`];
 	}
 
+	firstUpdated() {
+		this.addEventListener('d2l-object-property-list-item-visibility-change', () => this._onItemsChanged());
+
+		const slot = this.shadowRoot.querySelector('slot:not([name])');
+		if (slot.childElementCount) this._setItemSeparatorVisibility(slot);
+	}
+
 	render() {
 		const slotContents = this.skeleton && this.skeletonCount > 0 ? [...Array(this.skeletonCount)].map(() => html`
 			<d2l-object-property-list-item text="${this.localize('components.object-property-list.item-placeholder-text')}" skeleton></d2l-object-property-list-item>
@@ -50,10 +54,24 @@ class ObjectPropertyList extends LocalizeCoreElement(SkeletonMixin(LitElement))
 			<div class="d2l-body-small">
 				<slot name="status"></slot>
 				<d2l-screen-reader-pause></d2l-screen-reader-pause>
-				<slot>${slotContents}</slot>
+				<slot @slotchange="${this._onItemsChanged}">${slotContents}</slot>
 			</div>
 		`;
 	}
+
+	_onItemsChanged(e) {
+		const slot = e?.target || this.shadowRoot.querySelector('slot:not([name])');
+		this._setItemSeparatorVisibility(slot);
+	}
+
+	_setItemSeparatorVisibility(slot) {
+		const slottedElements = slot.assignedElements();
+		const elements = slottedElements.length ? slottedElements : [ ...slot.children ];
+		const filtered = elements.filter(item => item.tagName?.toLowerCase().includes('d2l-object-property-list-') && !item.hidden);
+
+		const lastIndex = filtered.length - 1;
+		filtered.forEach((item, i) => item._showSeparator = (i !== lastIndex));
+	}
 }
 
 customElements.define('d2l-object-property-list', ObjectPropertyList);

package/custom-elements.json

@@ -9498,6 +9498,12 @@
           "type": "boolean",
           "default": "false"
         }
+      ],
+      "events": [
+        {
+          "name": "d2l-object-property-list-item-visibility-change",
+          "description": "Dispatched when the visibility of the item changes"
+        }
       ]
     },
     {
@@ -9542,6 +9548,12 @@
           "type": "boolean",
           "default": "false"
         }
+      ],
+      "events": [
+        {
+          "name": "d2l-object-property-list-item-visibility-change",
+          "description": "Dispatched when the visibility of the item changes"
+        }
       ]
     },
     {

package/package.json

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