@brightspace-ui/core 2.102.0 → 2.104.0

package/mixins/labelled-mixin.js

@@ -1,215 +1 @@
-
-import { cssEscape } from '../helpers/dom.js';
-
-const getCommonAncestor = (elem1, elem2) => {
-
-	const labelledPath = new WeakMap();
-	let elem = elem1;
-	while (elem) {
-		labelledPath.set(elem, elem);
-		elem = elem.parentNode;
-	}
-
-	let ancestorElem = elem2.parentNode;
-	while (ancestorElem) {
-		if (labelledPath.has(ancestorElem)) return ancestorElem;
-		ancestorElem = ancestorElem.parentNode;
-	}
-
-};
-
-const isCustomElement = elem => {
-	return elem.tagName.includes('-');
-};
-
-const getLabel = labelElem => {
-	if (isCustomElement(labelElem)) return labelElem._label;
-	else return labelElem.textContent;
-};
-
-const waitForElement = async(contextElement, selector, timeout) => {
-	let elem = contextElement.querySelector(selector);
-	if (elem) return elem;
-
-	return new Promise(resolve => {
-		let elapsedTime = 0;
-		const intervalId = setInterval(() => {
-			elem = contextElement.querySelector(selector);
-			if (!elem) elapsedTime += 100;
-			if (elem || elapsedTime > timeout) {
-				clearInterval(intervalId);
-				resolve(elem);
-				return;
-			}
-		}, 100);
-	});
-};
-
-export const LabelMixin = superclass => class extends superclass {
-
-	static get properties() {
-		return {
-			_label: { type: String, reflect: true }
-		};
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener('d2l-label-change', this._handleLabelChange);
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener('d2l-label-change', this._handleLabelChange);
-	}
-
-	updateLabel(text) {
-		this._label = text;
-	}
-
-	_handleLabelChange(e) {
-		e.stopPropagation();
-		this.updateLabel(e.detail);
-	}
-
-};
-
-export const LabelledMixin = superclass => class extends superclass {
-
-	static get properties() {
-		return {
-			/**
-			 * The id of element that provides the label for this element
-			 * @type {string}
-			 */
-			labelledBy: { type: String, reflect: true, attribute: 'labelled-by' },
-			/**
-			 * REQUIRED: Explicitly defined label for the element
-			 * @type {string}
-			 */
-			label: { type: String }
-		};
-	}
-
-	constructor() {
-		super();
-		this.labelRequired = true;
-		this._labelElem = null;
-		this._missingLabelErrorHasBeenThrown = false;
-		this._validatingLabelTimeout = null;
-	}
-
-	firstUpdated(changedProperties) {
-		super.firstUpdated(changedProperties);
-		this._validateLabel(); // need to check this even if "label" isn't updated in case it's never set
-	}
-
-	async updated(changedProperties) {
-
-		super.updated(changedProperties);
-
-		if (changedProperties.has('label')) this._validateLabel();
-
-		if (!changedProperties.has('labelledBy')) return;
-
-		if (!this.labelledBy) {
-			this._updateLabelElem(null);
-		} else {
-			const labelElem = await waitForElement(this.getRootNode(), `#${cssEscape(this.labelledBy)}`, 3000);
-			if (!labelElem) {
-				this._throwError(
-					new Error(`LabelledMixin: "${this.tagName.toLowerCase()}" is labelled-by="${this.labelledBy}", but no such element exists`)
-				);
-			}
-			this._updateLabelElem(labelElem);
-		}
-
-	}
-
-	_throwError(err) {
-		if (!this.labelRequired || this._missingLabelErrorHasBeenThrown) return;
-		this._missingLabelErrorHasBeenThrown = true;
-		setTimeout(() => { throw err; }); // we don't want to prevent rendering
-	}
-
-	_updateLabelElem(labelElem) {
-
-		// setting textContent doesn't change labelElem but we do need to refetch the label
-		if (labelElem === this._labelElem && this._labelElem) {
-			this.label = getLabel(this._labelElem);
-			return;
-		}
-
-		this._labelElem = labelElem;
-
-		if (this._labelObserver) this._labelObserver.disconnect();
-		if (!this._labelElem) {
-			this.label = undefined;
-			return;
-		}
-
-		this._labelObserver = new MutationObserver(() => {
-			const newElem = this.getRootNode().querySelector(`#${cssEscape(this.labelledBy)}`);
-			if (isCustomElement(newElem)) {
-				requestAnimationFrame(() => {
-					// element often sets its label in its own updated(), so we need to wait
-					this._updateLabelElem(newElem);
-				});
-			} else {
-				this._updateLabelElem(newElem);
-			}
-		});
-
-		const ancestor = getCommonAncestor(this, this._labelElem);
-
-		// assumption: the labelling element will not change from a native to a custom element
-		// or vice versa, which allows the use of a more optimal observer configuration
-		if (isCustomElement(this._labelElem)) {
-			this._labelObserver.observe(ancestor, {
-				attributes: true, // required for legacy-Edge, otherwise attributeFilter throws a syntax error
-				attributeFilter: ['_label'],
-				childList: true,
-				subtree: true
-			});
-		} else {
-			this._labelObserver.observe(ancestor, {
-				characterData: true,
-				childList: true,
-				subtree: true
-			});
-		}
-
-		this.label = getLabel(this._labelElem);
-		/** @ignore */
-		this.dispatchEvent(new CustomEvent(
-			'd2l-labelled-mixin-label-elem-change', {
-				bubbles: false,
-				composed: false
-			}
-		));
-
-	}
-
-	_validateLabel() {
-		clearTimeout(this._validatingLabelTimeout);
-		// don't error immediately in case it doesn't get set immediately
-		this._validatingLabelTimeout = setTimeout(() => {
-			this._validatingLabelTimeout = null;
-			const hasLabel = (typeof this.label === 'string') && this.label.length > 0;
-			if (!hasLabel) {
-				if (this.labelledBy) {
-					if (this._labelElem) {
-						this._throwError(
-							new Error(`LabelledMixin: "${this.tagName.toLowerCase()}" is labelled-by="${this.labelledBy}", but its label is empty`)
-						);
-					}
-				} else {
-					this._throwError(
-						new Error(`LabelledMixin: "${this.tagName.toLowerCase()}" is missing a required "label" attribute`)
-					);
-				}
-			}
-		}, 3000);
-	}
-
-};
+export { LabelMixin, LabelledMixin } from './labelled/labelled-mixin.js';

package/mixins/{provider-mixin.md → provider/README.md}

@@ -7,7 +7,7 @@ The `ProviderMixin` and `RequesterMixin` can be used to create a DI-like system
 Apply the `ProviderMixin` to the component that will be responsible for providing some data to components that request it:
 
 ```js
-import { ProviderMixin } from '@brightspace-ui/core/mixins/provider-mixin.js';
+import { ProviderMixin } from '@brightspace-ui/core/mixins/provider/provider-mixin.js';
 
 class InterestingFactProvider extends ProviderMixin(LitElement) {
 	constructor() {
@@ -24,7 +24,7 @@ Once this has been set up, child components can request your provider's data via
 NB: due to its reliance on DOM events, `requestInstance()` needs to be called after the element has been attached to the DOM, such as in `connectedCallback()`.
 
 ```js
-import { RequesterMixin } from '@brightspace-ui/core/mixins/provider-mixin.js'
+import { RequesterMixin } from '@brightspace-ui/core/mixins/provider/provider-mixin.js'
 
 class InterestingFactUI extends RequesterMixin(LitElement) {
 	static get properties() {
@@ -55,7 +55,7 @@ class InterestingFactUI extends RequesterMixin(LitElement) {
 In the absence of a component context, the `requestInstance` helper may be used by providing the `node` context and the `key` for the instance.
 
 ```js
-import { requestInstance } from '@brightspace-ui/core/mixins/provider-mixin.js'
+import { requestInstance } from '@brightspace-ui/core/mixins/provider/provider-mixin.js'
 
 const factString = requestInstance(node, 'd2l-interesting-fact-string');
 const factObjectString = requestInstance(node, 'd2l-interesting-fact-object').fact;

package/mixins/provider/provider-mixin.js

@@ -0,0 +1,35 @@
+export function provideInstance(node, key, obj) {
+	if (!node._providerInstances) {
+		node._providerInstances = new Map();
+		node.addEventListener('d2l-request-instance', e => {
+			if (node._providerInstances.has(e.detail.key)) {
+				e.detail.instance = node._providerInstances.get(e.detail.key);
+				e.stopPropagation();
+			}
+		});
+	}
+	node._providerInstances.set(key, obj);
+}
+
+export const ProviderMixin = superclass => class extends superclass {
+	provideInstance(key, obj) {
+		provideInstance(this, key, obj);
+	}
+};
+
+export function requestInstance(node, key) {
+	const event = new CustomEvent('d2l-request-instance', {
+		detail: { key },
+		bubbles: true,
+		composed: true,
+		cancelable: true
+	});
+	node.dispatchEvent(event);
+	return event.detail.instance;
+}
+
+export const RequesterMixin = superclass => class extends superclass {
+	requestInstance(key) {
+		return requestInstance(this, key);
+	}
+};

package/mixins/provider-mixin.js

@@ -1,35 +1 @@
-export function provideInstance(node, key, obj) {
-	if (!node._providerInstances) {
-		node._providerInstances = new Map();
-		node.addEventListener('d2l-request-instance', e => {
-			if (node._providerInstances.has(e.detail.key)) {
-				e.detail.instance = node._providerInstances.get(e.detail.key);
-				e.stopPropagation();
-			}
-		});
-	}
-	node._providerInstances.set(key, obj);
-}
-
-export const ProviderMixin = superclass => class extends superclass {
-	provideInstance(key, obj) {
-		provideInstance(this, key, obj);
-	}
-};
-
-export function requestInstance(node, key) {
-	const event = new CustomEvent('d2l-request-instance', {
-		detail: { key },
-		bubbles: true,
-		composed: true,
-		cancelable: true
-	});
-	node.dispatchEvent(event);
-	return event.detail.instance;
-}
-
-export const RequesterMixin = superclass => class extends superclass {
-	requestInstance(key) {
-		return requestInstance(this, key);
-	}
-};
+export { provideInstance, ProviderMixin, requestInstance, RequesterMixin } from './provider/provider-mixin.js';

package/mixins/{rtl-mixin.md → rtl/README.md}

@@ -7,7 +7,7 @@ The `RtlMixin` creates `dir` attributes on host elements based on the document's
 Apply the mixin and define RTL styles.
 
 ```js
-import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
+import { RtlMixin } from '@brightspace-ui/core/mixins/rtl/rtl-mixin.js';
 class MyComponent extends RtlMixin(LitElement) {
   static get styles() {
     return css`

package/mixins/rtl/rtl-mixin.js

@@ -0,0 +1,40 @@
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
+
+export const RtlMixin = dedupeMixin(superclass => class extends superclass {
+
+	static get properties() {
+		return {
+			/**
+			 * @ignore
+			 */
+			dir: { type: String, reflect: true }
+		};
+	}
+
+	constructor() {
+		super();
+		this._localeSettings = getDocumentLocaleSettings();
+		this._handleLanguageChange = this._handleLanguageChange.bind(this);
+		this._handleLanguageChange();
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this._localeSettings.addChangeListener(this._handleLanguageChange);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._localeSettings.removeChangeListener(this._handleLanguageChange);
+	}
+
+	_handleLanguageChange() {
+		const dir = document.documentElement.getAttribute('dir');
+		// avoid reflecting "ltr" for better performance
+		if (dir && (dir !== 'ltr' || this.dir === 'rtl')) {
+			this.dir = dir;
+		}
+	}
+
+});

package/mixins/rtl-mixin.js

@@ -1,40 +1 @@
-import { dedupeMixin } from '@open-wc/dedupe-mixin';
-import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
-
-export const RtlMixin = dedupeMixin(superclass => class extends superclass {
-
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			dir: { type: String, reflect: true }
-		};
-	}
-
-	constructor() {
-		super();
-		this._localeSettings = getDocumentLocaleSettings();
-		this._handleLanguageChange = this._handleLanguageChange.bind(this);
-		this._handleLanguageChange();
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-		this._localeSettings.addChangeListener(this._handleLanguageChange);
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._localeSettings.removeChangeListener(this._handleLanguageChange);
-	}
-
-	_handleLanguageChange() {
-		const dir = document.documentElement.getAttribute('dir');
-		// avoid reflecting "ltr" for better performance
-		if (dir && (dir !== 'ltr' || this.dir === 'rtl')) {
-			this.dir = dir;
-		}
-	}
-
-});
+export { RtlMixin } from './rtl/rtl-mixin.js';

package/mixins/theme/theme-mixin.js

@@ -0,0 +1,19 @@
+/**
+ * This is a draft mixin that may eventually be extended to support
+ * themed components, including "dark mode". At that point, the
+ * "theme" attribute could resolve automatically based on the user's
+ * OS preference. For now, it's only used in menus/dropdowns by
+ * the media player.
+ */
+export const ThemeMixin = superclass => class extends superclass {
+
+	static get properties() {
+		return {
+			/**
+			 * @ignore
+			 */
+			theme: { reflect: true, type: String }
+		};
+	}
+
+};

package/mixins/theme-mixin.js

@@ -1,19 +1 @@
-/**
- * This is a draft mixin that may eventually be extended to support
- * themed components, including "dark mode". At that point, the
- * "theme" attribute could resolve automatically based on the user's
- * OS preference. For now, it's only used in menus/dropdowns by
- * the media player.
- */
-export const ThemeMixin = superclass => class extends superclass {
-
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			theme: { reflect: true, type: String }
-		};
-	}
-
-};
+export { ThemeMixin } from './theme/theme-mixin.js';

package/mixins/{visible-on-ancestor-mixin.md → visible-on-ancestor/README.md}

@@ -7,7 +7,7 @@ The `VisibleOnAncestorMixin` adds a behavior to a component so that it is initia
 Apply the mixin and include the required `visibleOnAncestorStyles`.
 
 ```js
-import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '@brightspace-ui/core/mixins/visible-on-ancestor-mixin.js';
+import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '@brightspace-ui/core/mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
 class MyComponent extends VisibleOnAncestorMixin(LitElement) {
   static get styles() {
     return [ visibleOnAncestorStyles, css`/* MyComponent styles */` ];

package/mixins/visible-on-ancestor/visible-on-ancestor-mixin.js

@@ -0,0 +1,160 @@
+import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
+import { css } from 'lit';
+
+const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+export const visibleOnAncestorStyles = css`
+
+	:host([__voa-state="hidden"]),
+	:host([__voa-state="hiding"]) {
+		opacity: 0 !important;
+		transform: translateY(-10px) !important;
+	}
+	:host([__voa-state="showing"]),
+	:host([__voa-state="hiding"]) {
+		transition: transform 200ms ease-out, opacity 200ms ease-out !important;
+	}
+
+	@media only screen and (hover: none), only screen and (-moz-touch-enabled: 1) {
+		:host([__voa-state="hidden"]),
+		:host([__voa-state="hiding"]) {
+			opacity: 1 !important;
+			transform: translateY(0) !important;
+		}
+		:host([__voa-state="hidden"][d2l-visible-on-ancestor-no-hover-hide]),
+		:host([__voa-state="hiding"][d2l-visible-on-ancestor-no-hover-hide]) {
+			opacity: 0 !important;
+			transform: translateY(-10px) !important;
+		}
+	}
+
+`;
+
+export const VisibleOnAncestorMixin = superclass => class extends superclass {
+
+	static get properties() {
+		return {
+			/**
+			 * @ignore
+			 */
+			visibleOnAncestor: { type: Boolean, reflect: true, attribute: 'visible-on-ancestor' },
+			__voaState: { type: String, reflect: true, attribute: '__voa-state' }
+		};
+	}
+
+	constructor() {
+		super();
+
+		this.visibleOnAncestor = false;
+	}
+
+	attributeChangedCallback(name, oldval, newval) {
+		if (name === 'visible-on-ancestor' && this.__voaAttached) {
+			if (newval) this.__voaInit();
+			else this.__voaUninit();
+		}
+		super.attributeChangedCallback(name, oldval, newval);
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.__voaAttached = true;
+		if (this.visibleOnAncestor) {
+			requestAnimationFrame(() => this.__voaInit());
+		} else this.__voaState = null;
+	}
+
+	disconnectedCallback() {
+		this.__voaAttached = false;
+		this.__voaUninit();
+		super.disconnectedCallback();
+	}
+
+	__voaHandleBlur(e) {
+		if (isComposedAncestor(this.__voaTarget, e.relatedTarget)) return;
+		this.__voaFocusIn = false;
+		this.__voaHide();
+	}
+
+	__voaHandleFocus() {
+		this.__voaFocusIn = true;
+		this.__voaShow();
+	}
+
+	__voaHandleMouseEnter() {
+		this.__voaMouseOver = true;
+		this.__voaShow();
+	}
+
+	__voaHandleMouseLeave() {
+		this.__voaMouseOver = false;
+		this.__voaHide();
+	}
+
+	__voaHide() {
+		if (this.__voaFocusIn || this.__voaMouseOver) return;
+		if (reduceMotion) {
+			this.__voaState = 'hidden';
+		} else {
+			const handleTransitionEnd = (e) => {
+				if (e.propertyName !== 'transform') return;
+				this.removeEventListener('transitionend', handleTransitionEnd);
+				this.__voaState = 'hidden';
+			};
+			this.addEventListener('transitionend', handleTransitionEnd);
+			this.__voaState = 'hiding';
+		}
+	}
+
+	__voaInit() {
+
+		if (!this.visibleOnAncestor) return;
+
+		this.__voaTarget = findComposedAncestor(this, (node) => {
+			if (!node || node.nodeType !== 1) return false;
+			return (node.classList.contains('d2l-visible-on-ancestor-target'));
+		});
+		if (!this.__voaTarget) {
+			this.__voaState = null;
+			return;
+		}
+
+		this.__voaHandleBlur = this.__voaHandleBlur.bind(this);
+		this.__voaHandleFocus = this.__voaHandleFocus.bind(this);
+		this.__voaHandleMouseEnter = this.__voaHandleMouseEnter.bind(this);
+		this.__voaHandleMouseLeave = this.__voaHandleMouseLeave.bind(this);
+
+		this.__voaTarget.addEventListener('focus', this.__voaHandleFocus, true);
+		this.__voaTarget.addEventListener('blur', this.__voaHandleBlur, true);
+		this.__voaTarget.addEventListener('mouseenter', this.__voaHandleMouseEnter);
+		this.__voaTarget.addEventListener('mouseleave', this.__voaHandleMouseLeave);
+
+		this.__voaState = 'hidden';
+
+	}
+
+	__voaShow() {
+		if (reduceMotion) {
+			this.__voaState = 'shown';
+		} else {
+			const handleTransitionEnd = (e) => {
+				if (e.propertyName !== 'transform') return;
+				this.removeEventListener('transitionend', handleTransitionEnd);
+				this.__voaState = 'shown';
+			};
+			this.addEventListener('transitionend', handleTransitionEnd);
+			this.__voaState = 'showing';
+		}
+	}
+
+	__voaUninit() {
+		this.__voaState = null;
+		if (!this.__voaTarget) return;
+		this.__voaTarget.removeEventListener('focus', this.__voaHandleFocus, true);
+		this.__voaTarget.removeEventListener('blur', this.__voaHandleBlur, true);
+		this.__voaTarget.removeEventListener('mouseenter', this.__voaHandleMouseEnter);
+		this.__voaTarget.removeEventListener('mouseleave', this.__voaHandleMouseLeave);
+		this.__voaTarget = null;
+	}
+
+};