@brightspace-ui/core 3.305.0 → 3.307.0

package/components/button/README.md

@@ -174,6 +174,36 @@ Use icon buttons for compact, supplementary actions where space is limited and t
 </d2l-button-icon>
 ```
 
+## Button Iterator [d2l-button-iterator]
+
+A navigation control for moving sequentially through a set of items.
+
+<!-- docs: demo code properties name:d2l-button-iterator sandboxTitle:'Iterator Button' -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/button/button-iterator.js';
+</script>
+<d2l-button-iterator></d2l-button-iterator>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `description` | String | An optional description, typically for indicating the current position within the set of items |
+| `previous-disabled` | Boolean | Disables the previous button |
+| `previous-text` | String | Overrides the default text for the previous button |
+| `next-disabled` | Boolean | Disables the next button |
+| `next-only` | Boolean | Renders only the next button |
+| `next-text` | String | Overrides the default text for the next button |
+
+### Events
+
+- `d2l-button-iterator-previous-click`: dispatched when the previous button is clicked
+- `d2l-button-iterator-next-click`: dispatched when the next button is clicked
+<!-- docs: end hidden content -->
+
 ## Toggle Button [d2l-button-toggle]
 
 Use toggle buttons when users need to easily flip between two opposing states, such as when subscribing or unsubscribing.

package/components/button/button-iterator.js

@@ -0,0 +1,174 @@
+import '../colors/colors.js';
+import '../icons/icon.js';
+import '../tooltip/tooltip.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { buttonStyles } from './button-styles.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { labelStyles } from '../typography/styles.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+
+/**
+ * A navigation control for moving sequentially through a set of items.
+ */
+class ButtonIterator extends FocusMixin(PropertyRequiredMixin(LocalizeCoreElement(LitElement))) {
+
+	static properties = {
+		/**
+		 * ACCESSIBILITY: An optional description, typically for indicating the current position within the set of items
+		 * @type {string}
+		 */
+		description: { type: String },
+		/**
+		 * Disables the previous button
+		 * @type {boolean}
+		 */
+		previousDisabled: { attribute: 'previous-disabled', type: Boolean },
+		/**
+		 * Overrides the default text for the previous button
+		 * @type {string}
+		 */
+		previousText: { attribute: 'previous-text', type: String },
+		/**
+		 * Disables the next button
+		 * @type {boolean}
+		 */
+		nextDisabled: { attribute: 'next-disabled', type: Boolean },
+		/**
+		 * Renders only the next button
+		 * @type {boolean}
+		 */
+		nextOnly: { attribute: 'next-only', type: Boolean },
+		/**
+		 * Overrides the default text for the next button
+		 * @type {string}
+		 */
+		nextText: { attribute: 'next-text', type: String }
+	};
+
+	static styles = [buttonStyles, labelStyles, css`
+		:host {
+			display: inline-block;
+			line-height: 0;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.container {
+			align-items: center;
+			display: flex;
+			gap: 6px;
+			justify-content: space-between;
+		}
+		.description {
+			margin-inline: 6px;
+		}
+		@media (max-width: 556px) {
+			.description {
+				display: none;
+			}
+		}
+		.next {
+			--d2l-button-end-start-radius: 0;
+			--d2l-button-start-start-radius: 0;
+		}
+		.previous {
+			--d2l-button-end-end-radius: 0;
+			--d2l-button-start-end-radius: 0;
+		}
+		button {
+			background-color: var(--d2l-theme-background-color-interactive-secondary-default);
+			min-width: calc(2rem + 2px);
+			padding: 0;
+		}
+		button:not([disabled]):hover,
+		button:not([disabled]):focus {
+			background-color: var(--d2l-theme-background-color-interactive-secondary-hover);
+		}
+		button[disabled] {
+			cursor: default;
+			opacity: var(--d2l-theme-opacity-disabled-control);
+		}
+	`];
+
+	constructor() {
+		super();
+		this.description = undefined;
+		this.nextDisabled = false;
+		this.nextOnly = false;
+		this.nextText = undefined;
+		this.previousDisabled = false;
+		this.previousText = undefined;
+	}
+
+	static get focusElementSelector() {
+		return 'button:not([disabled])';
+	}
+
+	render() {
+		const nextText = this.nextText ? this.nextText : this.localizeCommon('navigation:next:title');
+		if (this.nextOnly) {
+			return this.#renderButton(this.#nextId, 'next-only', 'tier1:chevron-right', nextText, undefined, this.nextDisabled);
+		}
+
+		const hasDescription = (this.description !== undefined && this.description !== '' && !this.nextOnly);
+		const description = hasDescription ? html`<div id="${this.#descriptionId}" class="description d2l-label-text">${this.description}</div>` : nothing;
+		const descriptionId = hasDescription ? this.#descriptionId : undefined;
+
+		const previousText = this.previousText ? this.previousText : this.localizeCommon('navigation:previous:title');
+
+		return html`
+			<div class="container">
+				${this.#renderButton(this.#previousId, 'previous', 'tier1:chevron-left', previousText, descriptionId, this.previousDisabled)}
+				${description}
+				${this.#renderButton(this.#nextId, 'next', 'tier1:chevron-right', nextText, descriptionId, this.nextDisabled)}
+			</div>
+		`;
+	}
+
+	#descriptionId = getUniqueId();
+	#previousId = getUniqueId();
+	#nextId = getUniqueId();
+
+	#handleButtonClick(e) {
+		const button = e.currentTarget;
+		if (button.disabled) {
+			return;
+		}
+		e.stopPropagation();
+		if (button.id === this.#nextId) {
+			/** Dispatched when the next button is clicked. */
+			this.dispatchEvent(new CustomEvent('d2l-button-iterator-next-click'));
+		} else if (button.id === this.#previousId) {
+			/** Dispatched when the previous button is clicked. */
+			this.dispatchEvent(new CustomEvent('d2l-button-iterator-previous-click'));
+		}
+	}
+
+	#renderButton(id, className, icon, text, descriptionId, disabled) {
+		const ariaLabel = disabled ? text : undefined;
+		const tooltip = !disabled ? html`
+			<d2l-tooltip
+				class="vdiff-target"
+				for="${id}"
+				for-type="label"
+				position="bottom">${text}</d2l-tooltip>` : nothing;
+		return html`
+			<button
+				aria-describedby="${ifDefined(descriptionId)}"
+				aria-label="${ifDefined(ariaLabel)}"
+				class="${className}"
+				@click="${this.#handleButtonClick}"
+				?disabled="${disabled}"
+				id="${id}"
+				type="button">
+				<d2l-icon icon="${icon}"></d2l-icon>
+			</button>
+			${tooltip}
+		`;
+	}
+}
+
+window.customElements.define('d2l-button-iterator', ButtonIterator);

package/components/page/page-divider-internal.js

@@ -11,7 +11,12 @@ export const DIVIDER_HANDLE_SIZE = 30;
 export const KEYBOARD_STEP = 20; // TO DO: Confirm
 export const KEYBOARD_STEP_LARGE = 80; // TO DO: Confirm
 
+const DRAG_THRESHOLD = 3; // Number of pixels to move to count as a drag
+const AUTO_EXPAND_WIDTH_FACTOR = 0.1;
+const AUTO_COLLAPSE_WIDTH_FACTOR = 0.75;
+
 const clampedSize = (size, min, max) => Math.max(min, Math.min(size, max));
+const isRtl = () => document.documentElement.getAttribute('dir') === 'rtl';
 
 const ICON_ARROW_COLLAPSE_LEFT = html`
 	<svg width="18" height="18" mirror-in-rtl xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
@@ -56,6 +61,11 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		 * @type {boolean}
 		 */
 		collapsed: { type: Boolean, reflect: true },
+		/**
+		 * Size the panel/drawer occupies while collapsed (the drag starts from here)
+		 * @type {number}
+		 */
+		collapsedSize: { type: Number, attribute: 'collapsed-size' },
 		/**
 		 * Current size of the panel/drawer the divider controls
 		 * @type {number}
@@ -195,6 +205,7 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		super();
 
 		this.collapsed = false;
+		this.collapsedSize = 0;
 		this.currentSize = 0;
 		this.label = '';
 		this.maxSize = 0;
@@ -243,6 +254,48 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 
 	#clickedArrow;
 	#clickedHandle = false;
+	#draggedDivider = false;
+	#dragStats;
+
+	#handlePointerMove = (e) => {
+		if (!this.#dragStats || e.pointerId !== this.#dragStats.pointerId) return;
+		const delta = this.panelType === 'panel' ? (e.clientX - this.#dragStats.startX) : (e.clientY - this.#dragStats.startY);
+		if (Math.abs(delta) >= DRAG_THRESHOLD) this.#dragStats.moved = true;
+		if (!this.#dragStats.moved) return;
+
+		let growthDirectionIsPositive;
+		if (this.panelType === 'panel') {
+			growthDirectionIsPositive = (this.panelPosition === 'start') !== isRtl();
+		} else if (this.panelType === 'drawer') {
+			growthDirectionIsPositive = false;
+		}
+		const signedDelta = (growthDirectionIsPositive ? 1 : -1) * delta;
+		const requestedSize = this.#dragStats.startSize + signedDelta;
+
+		this.#dragStats.lastSize = requestedSize;
+		this.#sendResizeLiveEvent(requestedSize);
+	};
+
+	#handlePointerUp = (e) => {
+		if (!this.#dragStats || e.pointerId !== this.#dragStats.pointerId) return;
+		const target = e.currentTarget;
+		target.removeEventListener('pointermove', this.#handlePointerMove);
+		target.removeEventListener('pointerup', this.#handlePointerUp);
+		target.removeEventListener('pointercancel', this.#handlePointerUp);
+
+		if (this.collapsed && this.#dragStats.lastSize > this.minSize * AUTO_EXPAND_WIDTH_FACTOR) {
+			this.#draggedDivider = true;
+			this.#sendToggleEvent();
+			this.#sendResizeEvent(this.#dragStats.lastSize);
+		} else if (!this.collapsed && this.#dragStats.lastSize < this.minSize * AUTO_COLLAPSE_WIDTH_FACTOR) {
+			this.#draggedDivider = true;
+			this.#sendToggleEvent();
+		} else if (this.#dragStats.moved) {
+			this.#draggedDivider = true;
+			this.#sendResizeEvent(this.#dragStats.lastSize);
+		}
+		this.#dragStats = null;
+	};
 
 	#getArrowVisibility() {
 		if (this.panelType !== 'panel' || this.collapsed) return { showStartArrow: false, showEndArrow: false };
@@ -269,6 +322,8 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		// Do not toggle/resize until click event is received,
 		// to avoid clicking on elements under the arrows in overlay mode or under the handle in drawer mode
 		e.stopPropagation();
+		if (this.#draggedDivider) return;
+
 		if (this.collapsed || this.#clickedHandle) {
 			this.#sendToggleEvent();
 		} else if (this.#clickedArrow) {
@@ -303,8 +358,7 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		let positiveStepKey;
 		if (this.panelType === 'panel') {
 			if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
-			const isRtl = (document.documentElement.getAttribute('dir') === 'rtl');
-			positiveStepKey = (this.panelPosition === 'start') !== isRtl ? 'ArrowRight' : 'ArrowLeft';
+			positiveStepKey = (this.panelPosition === 'start') !== isRtl() ? 'ArrowRight' : 'ArrowLeft';
 		} else if (this.panelType === 'drawer') {
 			if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
 			positiveStepKey = 'ArrowUp';
@@ -316,8 +370,11 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 	}
 
 	#handlePointerDown(e) {
+		this.#draggedDivider = false;
+
 		if (e.button !== 0) return; // Don't collapse when right-clicking to debug
 		e.preventDefault();
+		e.stopPropagation();
 		this.focus();
 
 		const path = e.composedPath();
@@ -325,7 +382,21 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		this.#clickedArrow = path.find(el => el.classList?.contains('divider-arrow'));
 		if (this.#clickedArrow) return; // Arrows don't support dragging
 
-		// TO DO: Dragging
+		const startSize = this.collapsed ? this.collapsedSize : this.currentSize;
+		this.#dragStats = {
+			pointerId: e.pointerId,
+			startX: e.clientX,
+			startY: e.clientY,
+			startSize,
+			lastSize: startSize,
+			moved: false
+		};
+
+		const target = e.currentTarget;
+		target.setPointerCapture(e.pointerId);
+		target.addEventListener('pointermove', this.#handlePointerMove);
+		target.addEventListener('pointerup', this.#handlePointerUp);
+		target.addEventListener('pointercancel', this.#handlePointerUp);
 	}
 
 	#sendResizeEvent(requestedSize) {
@@ -336,6 +407,15 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		} }));
 	}
 
+	#sendResizeLiveEvent(requestedSize) {
+		const clampedRequestedSize = clampedSize(requestedSize, this.collapsedSize, this.maxSize);
+		if (clampedRequestedSize === this.currentSize) return; // Don't bother sending events when dragging past min/max
+		/** @ignore */
+		this.dispatchEvent(new CustomEvent('d2l-page-divider-resize-live', { detail: {
+			requestedSize: clampedRequestedSize
+		} }));
+	}
+
 	#sendToggleEvent() {
 		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-page-divider-toggle'));

package/components/page/page.js

@@ -37,6 +37,7 @@ class PanelStateController {
 				collapsed: config.collapsed,
 				restoreCollapsed: !config.collapsed,
 				size: 0,
+				dragSize: null,
 				minSize: config.minSize,
 				maxSize: config.minSize
 			};
@@ -50,11 +51,14 @@ class PanelStateController {
 	getMinSize(key) { return this.#panels[key].minSize; }
 	getSize(key) {
 		const panel = this.#panels[key];
-		// TO DO: Factor in dragging
+		if (panel.dragSize !== null) return panel.dragSize;
 		return panel.collapsed ? 0 : panel.size;
 	}
 	getTrueSize(key) {
 		const panel = this.#panels[key];
+		if (panel.dragSize !== null) {
+			return Math.max(panel.minSize, panel.dragSize);
+		}
 		return panel.size;
 	}
 
@@ -78,6 +82,7 @@ class PanelStateController {
 		// Clamp requested size to min and max bounds
 		panel.size = Math.max(panel.minSize, Math.min(requestedSize, panel.maxSize));
 		panel.animate = animate;
+		panel.dragSize = null;
 		this.#host.requestUpdate();
 		if (storeState) this.#storePanelState(key);
 	}
@@ -85,14 +90,15 @@ class PanelStateController {
 	setCollapsed(key, collapsed) {
 		const panel = this.#panels[key];
 		panel.collapsed = collapsed;
+		panel.dragSize = null;
 		panel.animate = true;
 		this.#host.requestUpdate();
 		this.#storePanelState(key);
 	}
 
-	setDragSize(key) {
+	setDragSize(key, dragSize) {
 		const panel = this.#panels[key];
-		// TO DO: Handle Dragging
+		panel.dragSize = dragSize;
 		panel.animate = false;
 		this.#host.requestUpdate();
 	}
@@ -539,6 +545,11 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		this._panelState.resize(panelKey, e.detail.requestedSize, { animate: true, storeState: true });
 	};
 
+	#handleDividerResizeLive(e) {
+		const panelKey = e.target.dataset.panelKey;
+		this._panelState.setDragSize(panelKey, e.detail.requestedSize);
+	}
+
 	#handleDividerToggle(e) {
 		const panelKey = e.target.dataset.panelKey;
 		const collapsed = !this._panelState.getCollapsed(panelKey);
@@ -577,11 +588,13 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 				data-panel-key="${panelKey}"
 				label="${label}"
 				?collapsed="${this._panelState.getCollapsed(panelKey)}"
+				collapsed-size="${DIVIDER_GUTTER_WIDTH}"
 				current-size="${this._panelState.getSize(panelKey)}"
 				max-size="${this._panelState.getMaxSize(panelKey)}"
 				min-size="${this._panelState.getMinSize(panelKey)}"
 				panel-position="${ifDefined(panelPosition)}"
 				@d2l-page-divider-resize="${this.#handleDividerResize}"
+				@d2l-page-divider-resize-live="${this.#handleDividerResizeLive}"
 				@d2l-page-divider-toggle="${this.#handleDividerToggle}"
 			></d2l-page-divider-internal>
 		`;
@@ -627,7 +640,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		const classes = {
 			'side-nav-panel': true,
 			'animate': this._panelState.getAnimate(panelKey),
-			'collapsed': this._panelState.getCollapsed(panelKey)
+			'collapsed': this._panelState.getSize(panelKey) === 0 // Collapsed and not being dragged
 		};
 		return html`
 			<nav class="side-nav" ?hidden="${!this._slotVisibility['side-nav']}" aria-label="${this.localize('components.page.side-nav-label')}">
@@ -648,7 +661,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		const classes = {
 			'supporting-panel': true,
 			'animate': this._panelState.getAnimate(panelKey),
-			'collapsed': this._panelState.getCollapsed(panelKey)
+			'collapsed': this._panelState.getSize(panelKey) === 0 // Collapsed and not being dragged
 		};
 		return html`
 			<aside class="supporting" ?hidden="${!this._slotVisibility['supporting']}" aria-label="${this.localize('components.page.supporting-label')}">

package/custom-elements.json

@@ -702,6 +702,108 @@
         }
       ]
     },
+    {
+      "name": "d2l-button-iterator",
+      "path": "./components/button/button-iterator.js",
+      "description": "A navigation control for moving sequentially through a set of items.",
+      "attributes": [
+        {
+          "name": "description",
+          "description": "ACCESSIBILITY: An optional description, typically for indicating the current position within the set of items",
+          "type": "string",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "next-disabled",
+          "description": "Disables the next button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "next-only",
+          "description": "Renders only the next button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "next-text",
+          "description": "Overrides the default text for the next button",
+          "type": "string",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "previous-disabled",
+          "description": "Disables the previous button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "previous-text",
+          "description": "Overrides the default text for the previous button",
+          "type": "string",
+          "default": "\"undefined\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[\"buttonStyles\",\"labelStyles\",null]"
+        },
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "ACCESSIBILITY: An optional description, typically for indicating the current position within the set of items",
+          "type": "string",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "nextDisabled",
+          "attribute": "next-disabled",
+          "description": "Disables the next button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "nextOnly",
+          "attribute": "next-only",
+          "description": "Renders only the next button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "nextText",
+          "attribute": "next-text",
+          "description": "Overrides the default text for the next button",
+          "type": "string",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "previousDisabled",
+          "attribute": "previous-disabled",
+          "description": "Disables the previous button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "previousText",
+          "attribute": "previous-text",
+          "description": "Overrides the default text for the previous button",
+          "type": "string",
+          "default": "\"undefined\""
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-button-iterator-next-click",
+          "description": "Dispatched when the next button is clicked."
+        },
+        {
+          "name": "d2l-button-iterator-previous-click",
+          "description": "Dispatched when the previous button is clicked."
+        }
+      ]
+    },
     {
       "name": "d2l-button-move",
       "path": "./components/button/button-move.js",
@@ -13254,6 +13356,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "collapsed-size",
+          "description": "Size the panel/drawer occupies while collapsed (the drag starts from here)",
+          "type": "number",
+          "default": "0"
+        },
         {
           "name": "current-size",
           "description": "Current size of the panel/drawer the divider controls",
@@ -13308,6 +13416,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "collapsedSize",
+          "attribute": "collapsed-size",
+          "description": "Size the panel/drawer occupies while collapsed (the drag starts from here)",
+          "type": "number",
+          "default": "0"
+        },
         {
           "name": "currentSize",
           "attribute": "current-size",

package/package.json

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