@brightspace-ui/core 2.72.0 → 2.73.1

package/components/more-less/demo/more-less.html

@@ -29,8 +29,8 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-more-less height="6em">
-						<p id="img-target">Hi everybody! <a href="">Hi!</a></p>
+					<d2l-more-less height="8em">
+						<p id="img-target">Lorem ipsum dolor sit amet, consectetur adipiscing elit, magna aliqua quis. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident <a href="">proident.</a></p>
 					</d2l-more-less>
 				</template>
 			</d2l-demo-snippet>
@@ -39,7 +39,7 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-more-less expanded="">
+					<d2l-more-less expanded>
 						<p id="clone-target">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum venenatis arcu sit amet varius. Maecenas posuere magna arcu, quis maximus odio fringilla ac. Integer ligula lorem, faucibus sit amet cursus vel, pellentesque a justo. Aliquam urna metus, molestie at tempor eget, vestibulum a purus. Donec aliquet rutrum mi. Duis ornare congue tempor. Nullam sed massa fermentum, tincidunt leo eu, vestibulum orci. Sed ultrices est in lacus venenatis, posuere suscipit arcu scelerisque. In aliquam ipsum rhoncus, lobortis ligula ut, molestie orci. Proin scelerisque tempor posuere. Phasellus consequat, lorem quis hendrerit tempor, sem lectus sagittis nunc, in tristique dui arcu non arcu. Nunc aliquam nisi et sapien commodo lacinia. <a href="">Quisque</a> iaculis orci vel odio varius porta. Fusce tincidunt dolor enim, vitae sollicitudin purus suscipit eu.</p>
 					</d2l-more-less>
 				</template>

package/components/more-less/more-less.js

@@ -46,9 +46,9 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 			 * @type {boolean}
 			 */
 			inactive: { type: Boolean, reflect: true },
-			__blurBackground: { type: String },
-			__contentHeight: { type: String },
-			__transitionAdded: { type: Boolean }
+			__blurBackground: { state: true },
+			__maxHeight: { state: true },
+			__transitionAdded: { state: true }
 		};
 	}
 
@@ -62,7 +62,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 				overflow: hidden;
 			}
 			.d2l-more-less-transition {
-				transition: height 400ms cubic-bezier(0, 0.7, 0.5, 1);
+				transition: max-height 400ms cubic-bezier(0, 0.7, 0.5, 1);
 			}
 			.d2l-more-less-blur {
 				display: none;
@@ -83,13 +83,14 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 	constructor() {
 		super();
 
-		this.__blurBackground = 'linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%)';
-		this.__transitionAdded = false;
-
 		this.expanded = false;
 		this.height = '4em';
 		this.inactive = false;
 
+		this.__blurBackground = 'linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%)';
+		this.__transitionAdded = false;
+		this.__maxHeight = this.height;
+
 		this.__baseHeight = 0;
 		this.__contentId = getUniqueId();
 		this.__resizeObserver = null;
@@ -135,9 +136,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 
 		this.__content = this.shadowRoot.querySelector('.d2l-more-less-content');
 		this.__contentSlot = this.shadowRoot.querySelector('.d2l-more-less-content slot');
-		if (this.__content.offsetParent !== null) {
-			this.__init_setBaseHeight();
-		}
 		this.__init_setupBlurColour();
 		this.__init_setupListeners();
 
@@ -160,7 +158,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 			'd2l-more-less-transition': this.__transitionAdded
 		};
 		return html`
-			<div id="${this.__contentId}" class=${classMap(contentClasses)} style=${styleMap({ height: `${this.__contentHeight}` })}>
+			<div id="${this.__contentId}" class=${classMap(contentClasses)} style=${styleMap({ maxHeight: `${this.__maxHeight}` })}>
 				<slot></slot>
 			</div>
 			<div class="d2l-more-less-blur" style=${styleMap({ background: `${this.__blurBackground}` })}></div>
@@ -204,17 +202,17 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 
 	__adjustToContent_makeActive() {
 		this.inactive = false;
-		this.__contentHeight = this.height;
+		this.__maxHeight = this.height;
 	}
 
 	__adjustToContent_makeInactive() {
 		this.inactive = true;
 		this.expanded = false;
-		this.__contentHeight = 'unset';
+		this.__maxHeight = `${this.__content.scrollHeight}px`;
 	}
 
 	__adjustToContent_resize(contentHeight) {
-		this.__contentHeight = `${contentHeight}px`;
+		this.__maxHeight = `${contentHeight}px`;
 	}
 
 	__computeAriaExpanded() {
@@ -231,7 +229,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 
 	__expand() {
 		this.__transitionAdded = true;
-		this.__contentHeight = `${this.__content.scrollHeight}px`;
+		this.__maxHeight = `${this.__content.scrollHeight}px`;
 		this.expanded = true;
 	}
 
@@ -266,7 +264,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 	}
 
 	__init_setBaseHeight() {
-		this.__contentHeight = this.height;
+		this.__maxHeight = this.height;
 
 		requestAnimationFrame(() => {
 			this.__init_measureBaseHeight();
@@ -341,7 +339,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 
 	__shrink() {
 		this.__transitionAdded = true;
-		this.__contentHeight = this.height;
+		this.__maxHeight = this.height;
 		this.expanded = false;
 	}
 

package/custom-elements.json

@@ -11385,6 +11385,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "secondary-first",
+          "description": "When set to true, the secondary panel will be displayed on the left (or the\nright in RTL) in the desktop view. This attribute has no effect on the mobile view.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "width-type",
           "description": "Whether content fills the screen or not",
@@ -11419,6 +11425,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "secondaryFirst",
+          "attribute": "secondary-first",
+          "description": "When set to true, the secondary panel will be displayed on the left (or the\nright in RTL) in the desktop view. This attribute has no effect on the mobile view.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "widthType",
           "attribute": "width-type",

package/package.json

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

package/templates/primary-secondary/README.md

@@ -55,6 +55,7 @@ If either of the panels contain an `iframe`, resizing may not work properly. Thi
 | `background-shading` | String, default: `'none'` | Controls whether the primary and secondary panels have shaded backgrounds. Can be one of `'primary'`, `'secondary'`, `'none'`. |
 | `primary-overflow` | String, default: `'default'` | Controls how the primary panel's contents overflow. Can be one of `'default'`, `'hidden'`. |
 | `resizable` | Boolean, default: `false` | Whether the panels are user resizable. This only applies to desktop users, mobile users will always be able to resize. |
+| `secondary-first` | Boolean, default: `false` | When set to true, the secondary panel will be displayed on the left (or the right in RTL) in the desktop view. This attribute has no effect on the mobile view. |
 | `storage-key` | String | The key used to persist the divider's position to local storage. This key should not be shared between appliactions so that users can save different divider positions for different applications. If no key is provided, the template will fall back its default size. |
 | `width-type` | String, default: `'fullscreen'` | Whether content fills the screen or not. When set to `normal`, the width of the template is constrained to `1230px`. Can be one of `'fullscreen'`, `'normal'`. |
 

package/templates/primary-secondary/primary-secondary.js

@@ -49,6 +49,7 @@ class Resizer {
 		this.isMobile = false;
 		this.panelSize = 0;
 		this.isRtl = false;
+		this.secondaryFirst = false;
 	}
 
 	clampHeight(height) {
@@ -112,15 +113,18 @@ class DesktopKeyboardResizer extends Resizer {
 		if (this.isMobile) {
 			return;
 		}
-		const leftKeyCode = this.isRtl ? keyCodes.RIGHT : keyCodes.LEFT;
-		const rightKeyCode = this.isRtl ? keyCodes.LEFT : keyCodes.RIGHT;
-		if (e.keyCode !== leftKeyCode && e.keyCode !== rightKeyCode) {
+		if (e.keyCode !== keyCodes.LEFT && e.keyCode !== keyCodes.RIGHT) {
 			return;
 		}
 		e.preventDefault();
+
+		// The direction of the container is flipped if exactly one of isRtl and secondaryFirst is true
+		const isFlipped = this.isRtl ^ this.secondaryFirst;
+		const direction = e.keyCode === keyCodes.LEFT && !isFlipped
+			|| e.keyCode === keyCodes.RIGHT && isFlipped ? 1 : -1;
 		let secondaryWidth;
 		if (this.panelSize === 0) {
-			if (e.keyCode === leftKeyCode) {
+			if (direction === 1) {
 				secondaryWidth = this.contentBounds.minWidth;
 			} else {
 				secondaryWidth = 0;
@@ -129,7 +133,6 @@ class DesktopKeyboardResizer extends Resizer {
 			const steps = clamp(Math.round((this.contentBounds.maxWidth - this.contentBounds.minWidth) / desktopStepDelta), desktopMinSteps, desktopMaxSteps);
 			const delta = (this.contentBounds.maxWidth - this.contentBounds.minWidth) / steps;
 
-			const direction = e.keyCode === leftKeyCode ? 1 : -1;
 			const desiredWidth = this.panelSize + delta * direction;
 			const desiredSteppedWidth = this.contentBounds.minWidth + delta * Math.round((desiredWidth - this.contentBounds.minWidth) / delta);
 
@@ -180,7 +183,8 @@ class DesktopMouseResizer extends Resizer {
 
 	_computeContentX(clientX) {
 		const x = clientX - this.contentRect.left;
-		return this.isRtl ? x : this.contentRect.width - x;
+		// The direction of the container is flipped if exactly one of isRtl and secondaryFirst is true
+		return this.isRtl ^ this.secondaryFirst ? x : this.contentRect.width - x;
 	}
 
 	_onMouseDown(e) {
@@ -487,6 +491,12 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 			 * @type {boolean}
 			 */
 			resizable: { type: Boolean, reflect: true },
+			/**
+			 * When set to true, the secondary panel will be displayed on the left (or the
+			 * right in RTL) in the desktop view. This attribute has no effect on the mobile view.
+			 * @type {boolean}
+			 */
+			secondaryFirst: { type: Boolean, attribute: 'secondary-first', reflect: true },
 			/**
 			 * The key used to persist the divider's position to local storage. This key
 			 * should not be shared between pages so that users can save different divider
@@ -887,6 +897,7 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 
 		this.backgroundShading = 'none';
 		this.resizable = false;
+		this.secondaryFirst = false;
 		this.widthType = 'fullscreen';
 
 		this._animateResize = false;
@@ -933,11 +944,19 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 			'd2l-template-scroll': isWindows
 		};
 		const keyboardHelpText = this._isMobile ? this.localize('templates.primary-secondary.keyboardVertical') : this.localize('templates.primary-secondary.keyboardHorizontal');
+		const primarySection = html`<main class="${classMap(scrollClasses)}"><slot name="primary"></slot></main>`;
+		const secondarySection = html`
+			<div style=${styleMap(secondaryPanelStyles)} class="d2l-template-primary-secondary-secondary-container" @transitionend=${this._onTransitionEnd}>
+				<div class="d2l-template-primary-secondary-divider-shadow"></div>
+				<aside class="${classMap(scrollClasses)}">
+					<slot name="secondary"></slot>
+				</aside>
+			</div>`;
 		return html`
 			<div class="d2l-template-primary-secondary-container">
 				<header><slot name="header"></slot></header>
 				<div class="d2l-template-primary-secondary-content" data-background-shading="${this.backgroundShading}" ?data-animate-resize=${this._animateResize} ?data-is-collapsed=${this._isCollapsed} ?data-is-expanded=${this._isExpanded}>
-					<main class="${classMap(scrollClasses)}"><slot name="primary"></slot></main>
+					${this.secondaryFirst && !this._isMobile ? secondarySection : primarySection}
 					<d2l-offscreen id="${this._keyboardDescId}">${keyboardHelpText}</d2l-offscreen>
 					<div tabindex="${ifDefined(tabindex)}" class="d2l-template-primary-secondary-divider" role=separator aria-label="${this.localize('templates.primary-secondary.adjustableSplitView')}" aria-describedby="${this._keyboardDescId}" aria-orientation=${this._isMobile ? 'horizontal' : 'vertical'} aria-valuenow="${ifDefined(separatorVal)}" aria-valuemax="${ifDefined(separatorMax)}">
 						<div class="d2l-template-primary-secondary-divider-handle" @click=${this._onHandleTap} @mousedown=${this._onHandleTapStart}>
@@ -959,13 +978,7 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 							</div>
 						</div>
 					</div>
-					<div style=${styleMap(secondaryPanelStyles)} class="d2l-template-primary-secondary-secondary-container" @transitionend=${this._onTransitionEnd}>
-						<div class="d2l-template-primary-secondary-divider-shadow">
-						</div>
-						<aside class="${classMap(scrollClasses)}">
-							<slot name="secondary"></slot>
-						</aside>
-					</div>
+					${this.secondaryFirst && !this._isMobile ? primarySection : secondarySection}
 				</div>
 				<footer ?hidden="${!this._hasFooter}">
 					<div class="d2l-template-primary-secondary-footer"><slot name="footer" @slotchange="${this._handleFooterSlotChange}"></div></slot>
@@ -986,6 +999,10 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 				}
 			}
 		}
+		if (changedProperties.has('secondaryFirst')) {
+			this._desktopKeyboardResizer.secondaryFirst = this.secondaryFirst;
+			this._desktopMouseResizer.secondaryFirst = this.secondaryFirst;
+		}
 		if (!this._secondary) {
 			this._secondary = this.shadowRoot.querySelector('aside');
 			this._divider = this.shadowRoot.querySelector('.d2l-template-primary-secondary-divider');