@brightspace-ui/labs 2.18.0 → 2.19.0

package/src/components/ou-filter/tree-selector-node.js

@@ -0,0 +1,234 @@
+import '@brightspace-ui/core/components/icons/icon.js';
+import '@brightspace-ui/core/components/inputs/input-checkbox';
+
+import { css, html, LitElement, nothing } from 'lit';
+import { LocalizeLabsElement } from '../localize-labs-element.js';
+import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
+
+/**
+ * @property {string} name
+ * @property {Number} dataId - returned in event.detail; caller should use this to update its model
+ * @property {boolean} isOpen - whether the node is expanded (i.e. children are hidden unless true)
+ * @property {string} selectedState - checkbox state: may be "explicit", "indeterminate", or "none"
+ * @fires d2l-labs-tree-selector-node-select - user is requesting that this node be selected or deselected
+ * @fires d2l-labs-tree-selector-node-open - user has requested that this node be expanded or collapsed
+ *
+ */
+class TreeSelectorNode extends LocalizeLabsElement(RtlMixin(LitElement)) {
+	static get properties() {
+		return {
+			name: { type: String },
+			dataId: { type: Number, attribute: 'data-id' },
+			isOpen: { type: Boolean, reflect: true, attribute: 'open' },
+			selectedState: { type: String, reflect: true, attribute: 'selected-state' },
+			isOpenable: { type: Boolean, reflect: true, attribute: 'openable' },
+			// for screen readers
+			indentLevel: { type: Number, attribute: 'indent-level' },
+			parentName: { type: String, attribute: 'parent-name' },
+			// for search: if isSearch, only search-result nodes are shown; the caller should ensure their ancestors are open
+			isSearch: { type: Boolean, reflect: true, attribute: 'search' },
+			isSearchResult: { type: Boolean, reflect: true, attribute: 'search-result' }
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				display: block;
+				font-size: 0.8rem;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+
+			.d2l-labs-tree-selector-node-node {
+				display: flex;
+				flex-wrap: nowrap;
+				margin-bottom: 16px;
+			}
+
+			d2l-input-checkbox {
+				display: inline-block;
+			}
+
+			.d2l-labs-tree-selector-node-open-control {
+				cursor: default;
+				margin-top: -3px;
+			}
+			.d2l-labs-tree-selector-node-open-control .d2l-labs-tree-selector-node-open {
+				display: none;
+			}
+			.d2l-labs-tree-selector-node-open-control[open] .d2l-labs-tree-selector-node-open {
+				display: inline-block;
+			}
+			.d2l-labs-tree-selector-node-open-control[open] .d2l-labs-tree-selector-node-closed {
+				display: none;
+			}
+
+			.d2l-labs-tree-selector-node-subtree {
+				margin-left: 34px;
+				margin-right: 0;
+			}
+			:host([dir="rtl"]) .d2l-labs-tree-selector-node-subtree {
+				margin-left: 0;
+				margin-right: 34px;
+			}
+			.d2l-labs-tree-selector-node-subtree[hidden] {
+				display: none;
+			}
+
+			.d2l-labs-tree-selector-node-text {
+				cursor: default;
+				display: inline-block;
+				margin-left: 0.5rem;
+				margin-right: 0.5rem;
+				width: 100%;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+
+		this.isOpen = false;
+		this.selectedState = 'none';
+		this.indentLevel = 0;
+	}
+
+	/**
+	 * @returns {Promise} - resolves when all tree-selector-nodes in slots, recursively, have finished updating
+	 */
+	get treeUpdateComplete() {
+		return this._waitForTreeUpdateComplete();
+	}
+
+	render() {
+		return html`
+			${this._renderNode()}
+			${this._renderSubtree()}
+		`;
+	}
+
+	simulateArrowClick() {
+		this._onArrowClick();
+	}
+
+	simulateCheckboxClick() {
+		this.shadowRoot?.querySelector('d2l-input-checkbox').simulateClick();
+	}
+
+	get _arrowLabel() {
+		return this.localize(
+			this.isOpen ?
+				'components:ouFilter:treeSelector:arrowLabel:open' :
+				'components:ouFilter:treeSelector:arrowLabel:closed',
+			{ name: this.name, level: this.indentLevel, parentName: this.parentName }
+		);
+	}
+
+	get _showIndeterminate() {
+		return this.selectedState === 'indeterminate';
+	}
+
+	get _showSelected() {
+		return this.selectedState === 'explicit';
+	}
+
+	_onArrowClick() {
+		if (!this.isOpenable) return;
+
+		/**
+		 * @event d2l-labs-tree-selector-node-open
+		 */
+		this.dispatchEvent(new CustomEvent(
+			'd2l-labs-tree-selector-node-open',
+			{
+				bubbles: true,
+				composed: false,
+				detail: {
+					id: this.dataId,
+					isOpen: !this.isOpen
+				}
+			}
+		));
+	}
+
+	_onChange(e) {
+		/**
+		 * @event d2l-labs-tree-selector-node-select
+		 */
+		this.dispatchEvent(new CustomEvent(
+			'd2l-labs-tree-selector-node-select',
+			{
+				bubbles: true,
+				composed: false,
+				detail: {
+					id: this.dataId,
+					isSelected: e.target.checked
+				}
+			}
+		));
+	}
+
+	_renderNode() {
+		const label = this.parentName ?
+			this.localize('components:ouFilter:treeSelector:node:ariaLabel', { name: this.name, parentName: this.parentName }) :
+			this.name;
+
+		return html`
+			<div class="d2l-labs-tree-selector-node-node" ?search="${this.isSearch}" ?search-result="${this.isSearchResult}">
+				<d2l-input-checkbox
+					?checked="${this._showSelected}"
+					?indeterminate="${this._showIndeterminate}"
+					aria-label="${label}"
+					@change="${this._onChange}"
+				></d2l-input-checkbox>
+				<span class="d2l-labs-tree-selector-node-text" @click="${this._onArrowClick}" aria-hidden="true">${this.name}</span>
+				${this._renderOpenControl()}
+			</div>
+		`;
+	}
+
+	_renderOpenControl() {
+		if (this.isOpenable) {
+			return html`
+				<a href="#" class="d2l-labs-tree-selector-node-open-control"
+					?open="${this.isOpen}"
+				 	@click="${this._onArrowClick}"
+				 	aria-label="${this._arrowLabel}"
+				 	aria-expanded="${this.isOpen}"
+				 >
+					<d2l-icon class="d2l-labs-tree-selector-node-closed" icon="tier1:arrow-expand"></d2l-icon>
+					<d2l-icon class="d2l-labs-tree-selector-node-open" icon="tier1:arrow-collapse"></d2l-icon>
+				</a>
+			`;
+		} else {
+			return html`<span class="no-open-control"></span>`;
+		}
+	}
+
+	_renderSubtree() {
+		if (this.isOpenable) {
+			return html`<div class="d2l-labs-tree-selector-node-subtree"
+				?hidden="${!this.isOpen}"
+				id="subtree"
+			>
+				<slot name="tree"></slot>
+			</div>`;
+		} else {
+			return nothing;
+		}
+	}
+
+	async _waitForTreeUpdateComplete() {
+		await this.updateComplete;
+		const slot = this.shadowRoot?.querySelector('slot');
+		// to be sure all child nodes have been added, instead of using flatten,
+		// we recursively walk down the tree, waiting for each node's update to complete
+		if (slot) {
+			const childNodes = slot.assignedNodes({ flatten: false });
+			return Promise.all(childNodes.map(node => node.treeUpdateComplete));
+		}
+	}
+}
+customElements.define('d2l-labs-tree-selector-node', TreeSelectorNode);

package/src/components/ou-filter/tree-selector.js

@@ -0,0 +1,250 @@
+import './tree-selector-node.js';
+import '@brightspace-ui/core/components/button/button-subtle.js';
+import '@brightspace-ui/core/components/dropdown/dropdown-button-subtle.js';
+import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
+import '@brightspace-ui/core/components/dropdown/dropdown.js';
+import '@brightspace-ui/core/components/inputs/input-search.js';
+
+import { css, html, LitElement, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { LocalizeLabsElement } from '../localize-labs-element.js';
+import { selectStyles } from '@brightspace-ui/core/components/inputs/input-select-styles';
+
+/**
+ * @property {String} name
+ * @property {Boolean} isSearch - if true, show "search-results" slot instead of "tree" slot
+ * @property {Boolean} isSelected - if true, show a "Clear" button in the header
+ * @fires d2l-labs-tree-selector-search - user requested or cleared a search; search string is event.detail.value
+ * @fires d2l-labs-tree-selector-clear - user requested that all selections be cleared
+ * @fires d2l-labs-tree-selector-select-all - user requested that all nodes be checked
+ */
+class TreeSelector extends LocalizeLabsElement(LitElement) {
+
+	static get properties() {
+		return {
+			name: { type: String },
+			disabled: { type: Boolean, attribute: 'disabled' },
+			isSelectAllVisible: { type: Boolean, attribute: 'select-all-ui', reflect: true },
+			isSearch: { type: Boolean, attribute: 'search', reflect: true },
+			isSelected: { type: Boolean, attribute: 'selected', reflect: true }
+		};
+	}
+
+	static get styles() {
+		return [
+			selectStyles,
+			css`
+				:host {
+					display: inline-block;
+				}
+				:host([hidden]) {
+					display: none;
+				}
+
+				.d2l-labs-filter-dropdown-content-header {
+					display: flex;
+					justify-content: start;
+				}
+				.d2l-labs-filter-dropdown-content-header > span {
+					align-self: center;
+				}
+
+				.d2l-labs-tree-selector-margin-button {
+					margin-inline-end: 6px;
+				}
+
+				.d2l-labs-tree-selector-margin-auto {
+					margin-inline-start: auto;
+				}
+
+				.d2l-labs-tree-selector-search {
+					display: flex;
+					flex-wrap: nowrap;
+					padding-bottom: 26px;
+					padding-top: 4px;
+				}
+				@media screen and (max-width: 400px) {
+					.d2l-labs-tree-selector-search {
+						width: 100%;
+					}
+				}
+				:host([search]) d2l-dropdown d2l-dropdown-content .d2l-labs-tree-selector-tree {
+					display: none;
+				}
+
+				.d2l-labs-tree-selector-search-results {
+					display: none;
+				}
+				:host([search]) d2l-dropdown d2l-dropdown-content .d2l-labs-tree-selector-search-results {
+					display: block;
+				}
+			`
+		];
+	}
+
+	constructor() {
+		super();
+
+		this.name = 'SPECIFY NAME ATTRIBUTE';
+		this._isSearch = false;
+		this.isSelectAllVisible = false;
+		this.disabled = false;
+	}
+
+	/**
+	 * @returns {Promise} - resolves when all tree-selector-nodes in slots, recursively, have finished updating
+	 */
+	get treeUpdateComplete() {
+		return this._waitForTreeUpdateComplete();
+	}
+
+	render() {
+		// Using no-auto-fit on d2l-dropdown-content to avoid having the component jump to the top on every
+		// node open and load. The tradeoff is that the user has to scroll the whole page now.
+		// We have a defect logged to improve this in future.
+		return html`
+			<d2l-dropdown>
+				<d2l-dropdown-button-subtle text="${this.name}" ?disabled=${this.disabled}>
+					<d2l-dropdown-content align="start" no-auto-fit class="vdiff-target">
+						<div class="d2l-labs-filter-dropdown-content-header" slot="header">
+							<span>${this.localize('components:ouFilter:treeSelector:filterBy')}</span>
+
+							${this._clearButton}
+
+							${this._selectAllButton}
+						</div>
+						<div class="d2l-labs-tree-selector-search">
+							<d2l-input-search
+								label="${this.localize('components:ouFilter:treeSelector:searchLabel')}"
+								placeholder="${this.localize('components:ouFilter:treeSelector:searchPlaceholder')}"
+								@d2l-input-search-searched="${this._onSearch}"
+							></d2l-input-search>
+						</div>
+						<div class="d2l-labs-tree-selector-search-results">
+							<slot name="search-results"></slot>
+						</div>
+						<div class="d2l-labs-tree-selector-tree">
+							<slot name="tree"></slot>
+						</div>
+					</d2l-dropdown-content>
+				</d2l-dropdown-button-subtle>
+			</d2l-dropdown>
+		`;
+	}
+
+	clearSearchAndSelection(generateEvent = true) {
+		this.shadowRoot.querySelector('d2l-input-search').value = '';
+		this._onSearch({
+			detail: {
+				value: ''
+			}
+		}, generateEvent);
+
+		this._onClear(generateEvent);
+	}
+
+	async resize() {
+		await this.treeUpdateComplete;
+		const content = this.shadowRoot?.querySelector('d2l-dropdown-content');
+		content && await content.resize();
+	}
+
+	simulateSearch(searchString) {
+		this._onSearch({
+			detail: {
+				value: searchString
+			}
+		});
+	}
+
+	get _clearButton() {
+		if (!this.isSelected) return nothing;
+
+		const styles = {
+			'd2l-labs-tree-selector-select-clear': true,
+			'd2l-labs-tree-selector-margin-button': true,
+			'd2l-labs-tree-selector-margin-auto': true
+		};
+
+		return html`
+		<d2l-button-subtle
+			class="${classMap(styles)}"
+			text="${this.localize('components:ouFilter:treeSelector:clearLabel')}"
+			@click="${this._onClear}"
+		></d2l-button-subtle>`;
+	}
+
+	get _selectAllButton() {
+		if (!this.isSelectAllVisible) return nothing;
+
+		const styles = {
+			'd2l-labs-tree-selector-select-all': true,
+			'd2l-labs-tree-selector-margin-auto': !this.isSelected
+		};
+
+		return html`
+		<d2l-button-subtle
+			class="${classMap(styles)}"
+			text="${this.localize('components:ouFilter:treeSelector:selectAllLabel')}"
+			@click="${this._onSelectAll}"
+		></d2l-button-subtle>`;
+	}
+
+	_onClear(generateEvent = true) {
+		if (!generateEvent) {
+			return;
+		}
+		/**
+		 * @event d2l-labs-tree-selector-clear
+		 */
+		this.dispatchEvent(new CustomEvent(
+			'd2l-labs-tree-selector-clear',
+			{
+				bubbles: true,
+				composed: false
+			}
+		));
+	}
+
+	_onSearch(event, generateEvent = true) {
+		if (!generateEvent) {
+			return;
+		}
+		/**
+		 * @event d2l-labs-tree-selector-search
+		 */
+		this.dispatchEvent(new CustomEvent(
+			'd2l-labs-tree-selector-search',
+			{
+				bubbles: true,
+				composed: false,
+				detail: event.detail
+			}
+		));
+	}
+
+	_onSelectAll() {
+		/**
+		 * @event d2l-labs-tree-selector-select-all
+		 */
+		this.dispatchEvent(new CustomEvent(
+			'd2l-labs-tree-selector-select-all',
+			{
+				bubbles: true,
+				composed: false
+			}
+		));
+	}
+
+	async _waitForTreeUpdateComplete() {
+		await this.updateComplete;
+		const slots = [...(this.shadowRoot?.querySelectorAll('slot') || [])];
+		// to be sure all child nodes have been added, instead of using flatten,
+		// we recursively walk down the tree, waiting for each node's update to complete
+		return Promise.all(slots.map(slot => {
+			const childNodes = slot.assignedNodes({ flatten: false });
+			return Promise.all(childNodes.map(node => node.treeUpdateComplete));
+		}));
+	}
+}
+customElements.define('d2l-labs-tree-selector', TreeSelector);