@brightspace-ui/core 2.14.5 → 2.14.8

package/components/html-block/html-block.js

@@ -111,9 +111,6 @@ export const htmlBlockContentStyles = css`
 	mjx-assistive-mml math {
 		position: absolute;
 	}
-	:host([dir="rtl"]) {
-		text-align: right;
-	}
 `;
 
 let renderers;
@@ -164,6 +161,9 @@ class HtmlBlock extends RtlMixin(LitElement) {
 			:host([no-deferred-rendering]) div.d2l-html-block-rendered {
 				display: none;
 			}
+			:host([dir="rtl"]) {
+				text-align: right;
+			}
 		`];
 	}
 

package/components/list/list-header.js

@@ -31,6 +31,7 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 			 * @type {boolean}
 			 */
 			selectAllPagesAllowed: { type: Boolean, attribute: 'select-all-pages-allowed' },
+			_hasActions: { state: true },
 			_scrolled: { type: Boolean, reflect: true }
 		};
 	}
@@ -60,6 +61,7 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 				height: 40px;
 				position: absolute;
 				width: 100%;
+				z-index: -1;
 			}
 			:host([hidden]) {
 				display: none;
@@ -69,6 +71,9 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 				display: flex;
 				margin-bottom: 6px;
 				margin-top: 6px;
+				min-height: 54px;
+			}
+			.d2l-list-header-container-slim {
 				min-height: 36px;
 			}
 			.d2l-list-header-extend-separator {
@@ -124,6 +129,7 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 	render() {
 		const classes = {
 			'd2l-list-header-container': true,
+			'd2l-list-header-container-slim': (!this._hasActions && !this.selectAllPagesAllowed),
 			'd2l-list-header-extend-separator': this._extendSeparator
 		};
 		return html`
@@ -138,13 +144,17 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 					${this.selectAllPagesAllowed ? html`<d2l-selection-select-all-pages></d2l-selection-select-all-pages>` : null}
 				`}
 				<div class="d2l-list-header-actions">
-					<d2l-overflow-group opener-type="icon"><slot></slot></d2l-overflow-group>
+					<d2l-overflow-group opener-type="icon"><slot @slotchange="${this._handleSlotChange}"></slot></d2l-overflow-group>
 				</div>
 			</div>
 			${!this.noSticky ? html`<div class="d2l-list-header-shadow"></div>` : null}
 		`;
 	}
 
+	_handleSlotChange(e) {
+		this._hasActions = (e.target.assignedNodes({ flatten: true }).filter(node => node.nodeType === Node.ELEMENT_NODE).length > 0);
+	}
+
 }
 
 customElements.define('d2l-list-header', ListHeader);

package/components/tag-list/tag-list.js

@@ -94,6 +94,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		this._contentReady = false;
 		this._hasResized = false;
 		this._itemHeight = 0;
+		this._listContainerObserver = null;
 		this._resizeObserver = null;
 		this._showHiddenTags = false;
 	}
@@ -101,6 +102,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this._clearButtonResizeObserver) this._clearButtonResizeObserver.disconnect();
+		if (this._listContainerObserver) this._listContainerObserver.disconnect();
 		if (this._resizeObserver) this._resizeObserver.disconnect();
 		if (this._subtleButtonResizeObserver) this._subtleButtonResizeObserver.disconnect();
 	}
@@ -114,16 +116,20 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		});
 		this._subtleButtonResizeObserver.observe(subtleButton);
 
-		const container = this.shadowRoot.querySelector('.tag-list-outer-container');
-		this._resizeObserver = new ResizeObserver((e) => requestAnimationFrame(() => this._handleResize(e)));
-		this._resizeObserver.observe(container);
-
 		const clearButton = this.shadowRoot.querySelector('d2l-button-subtle.d2l-tag-list-clear-button');
 		this._clearButtonResizeObserver = new ResizeObserver(() => {
 			this._clearButtonWidth = Math.ceil(parseFloat(getComputedStyle(clearButton).getPropertyValue('width')));
 			this._clearButtonHeight = Math.ceil(parseFloat(getComputedStyle(clearButton).getPropertyValue('height')));
 		});
 		this._clearButtonResizeObserver.observe(clearButton);
+
+		const container = this.shadowRoot.querySelector('.tag-list-outer-container');
+		this._resizeObserver = new ResizeObserver((e) => requestAnimationFrame(() => this._handleResize(e)));
+		this._resizeObserver.observe(container);
+
+		const listContainer = this.shadowRoot.querySelector('.tag-list-container');
+		this._listContainerObserver = new ResizeObserver(() => requestAnimationFrame(() => this._handleSlotChange()));
+		this._listContainerObserver.observe(listContainer);
 	}
 
 	render() {

package/package.json

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