@brightspace-ui/core 3.116.6 → 3.118.0

package/components/inputs/input-radio-group.js

@@ -0,0 +1,239 @@
+import { css, html, LitElement } from 'lit';
+import { FormElementMixin } from '../form/form-element-mixin.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { inputLabelStyles } from './input-label-styles.js';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
+
+/**
+ * A group of <d2l-input-radio> components.
+ * @slot - Radio components
+ * @fires change - Dispatched when the radio group's state changes
+ */
+class InputRadioGroup extends PropertyRequiredMixin(SkeletonMixin(FormElementMixin(LitElement))) {
+
+	static get properties() {
+		return {
+			/**
+			 * REQUIRED: Label for the input
+			 * @type {string}
+			 */
+			label: { required: true, type: String },
+			/**
+			 * Hides the label visually
+			 * @type {boolean}
+			 */
+			labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean },
+			/**
+			 * Indicates that a value is required
+			 * @type {boolean}
+			 */
+			required: { type: Boolean, reflect: true }
+		};
+	}
+
+	static get styles() {
+		return [super.styles, inputLabelStyles, css`
+			:host {
+				display: block;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			div[role="radiogroup"] {
+				display: flex;
+				flex-direction: column;
+				gap: 0.6rem;
+			}
+			.d2l-input-label[hidden] {
+				display: none;
+			}
+			::slotted(:not(d2l-input-radio)) {
+				display: none;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this.labelHidden = false;
+		this.required = false;
+		this.setFormValue('');
+	}
+
+	render() {
+		return html`
+			<span class="d2l-input-label" ?hidden="${this.labelHidden}" id="${this.#labelId}"><span class="d2l-skeletize">${this.label}</span></span>
+			<div
+				aria-invalid="${ifDefined(this.invalid ? 'true' : undefined)}"
+				aria-labelledby="${this.#labelId}"
+				aria-required="${ifDefined(this.required ? 'true' : undefined)}"
+				@click="${this.#handleClick}"
+				@d2l-input-radio-checked="${this.#handleRadioChecked}"
+				@keydown="${this.#handleKeyDown}"
+				role="radiogroup">	
+				<slot @slotchange="${this.#handleSlotChange}"></slot>
+			</div>
+		`;
+	}
+
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('invalid')) {
+			const radios = this.#getRadios();
+			radios.forEach(el => el._invalid = this.invalid);
+		}
+		if (changedProperties.has('required')) {
+			this.#recalculateState(true);
+		}
+	}
+
+	focus() {
+		const radios = this.#getRadios();
+		if (radios.length === 0) return;
+		let firstFocusable = null;
+		let firstChecked = null;
+		radios.forEach(el => {
+			if (firstFocusable === null && !el.disabled) firstFocusable = el;
+			if (firstChecked === null && el._checked) firstChecked = el;
+		});
+		const focusElem = firstChecked || firstFocusable;
+		focusElem.focus();
+		setTimeout(() => focusElem.focus()); // timeout required when following link from form validation
+	}
+
+	#labelId = getUniqueId();
+
+	async #doUpdateChecked(newChecked, doFocus, doDispatchEvent) {
+		const radios = this.#getRadios();
+		let prevChecked = null;
+		radios.forEach(el => {
+			if (el._checked) prevChecked = el;
+		});
+		if (prevChecked === newChecked) return;
+
+		newChecked._checked = true;
+		if (prevChecked !== null) {
+			prevChecked._checked = false;
+		}
+		this.#recalculateState(true);
+
+		if (doDispatchEvent) {
+			this.dispatchEvent(new CustomEvent('change', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					value: newChecked.value,
+					oldValue: prevChecked?.value
+				}
+			}));
+		}
+
+		if (doFocus) {
+			await newChecked.updateComplete; // wait for tabindex to be updated
+			newChecked.focus();
+		}
+	}
+
+	#getRadios() {
+		const elems = this.shadowRoot?.querySelector('slot')?.assignedElements();
+		if (!elems) return [];
+		return elems.filter(el => el.tagName === 'D2L-INPUT-RADIO');
+	}
+
+	#handleClick(e) {
+		if (e.target.tagName !== 'D2L-INPUT-RADIO') return;
+		if (e.target.disabled) return;
+		this.#doUpdateChecked(e.target, true, true);
+		e.preventDefault();
+	}
+
+	#handleKeyDown(e) {
+		if (e.target.tagName !== 'D2L-INPUT-RADIO') return;
+
+		const isRtl = (getComputedStyle(this).direction === 'rtl');
+		let newOffset = null;
+		if (e.key === ' ') {
+			newOffset = 0;
+		} else if (e.key === 'ArrowUp' || (!isRtl && e.key === 'ArrowLeft') || (isRtl && e.key === 'ArrowRight')) {
+			newOffset = -1;
+		} else if (e.key === 'ArrowDown' || (!isRtl && e.key === 'ArrowRight') || (isRtl && e.key === 'ArrowLeft')) {
+			newOffset = 1;
+		}
+
+		if (newOffset === null) return;
+
+		const radios = this.#getRadios().filter(el => !el.disabled || el._checked);
+		let checkedIndex = -1;
+		let firstFocusableIndex = -1;
+		radios.forEach((el, i) => {
+			if (el._checked) checkedIndex = i;
+			if (firstFocusableIndex < 0 && !el.disabled) firstFocusableIndex = i;
+		});
+		if (checkedIndex === -1) {
+			if (firstFocusableIndex === -1) return;
+			checkedIndex = firstFocusableIndex;
+		}
+
+		const newIndex = (checkedIndex + newOffset + radios.length) % radios.length;
+		this.#doUpdateChecked(radios[newIndex], true, true);
+
+		e.preventDefault();
+	}
+
+	#handleRadioChecked(e) {
+		if (e.detail.checked) {
+			this.#doUpdateChecked(e.target, false, false);
+		} else {
+			e.target._checked = false;
+			this.#recalculateState(true);
+		}
+	}
+
+	#handleSlotChange() {
+		this.#recalculateState(false);
+	}
+
+	#recalculateState(doValidate) {
+		const radios = this.#getRadios();
+		if (radios.length === 0) return;
+
+		let firstFocusable = null;
+		const checkedRadios = [];
+		radios.forEach(el => {
+			if (firstFocusable === null && !el.disabled) firstFocusable = el;
+			if (el._checked) checkedRadios.push(el);
+			el._isInitFromGroup = true;
+			el._firstFocusable = false;
+		});
+
+		// let the first non-disabled radio know it's first so it can be focusable
+		if (checkedRadios.length === 0 && firstFocusable !== null) {
+			firstFocusable._firstFocusable = true;
+		}
+
+		// only the last checked radio is actually checked
+		for (let i = 0; i < checkedRadios.length - 1; i++) {
+			checkedRadios[i]._checked = false;
+		}
+		if (checkedRadios.length > 0) {
+			const lastCheckedRadio = checkedRadios[checkedRadios.length - 1];
+			lastCheckedRadio._checked = true;
+			this.setFormValue(lastCheckedRadio.value);
+			if (this.required) {
+				this.setValidity({ valueMissing: false });
+			}
+		} else {
+			this.setFormValue('');
+			if (this.required) {
+				this.setValidity({ valueMissing: true });
+			}
+		}
+		if (doValidate && this.required) {
+			this.requestValidate(true);
+		}
+	}
+
+}
+customElements.define('d2l-input-radio-group', InputRadioGroup);

package/components/inputs/input-radio.js

@@ -0,0 +1,177 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { InputInlineHelpMixin } from './input-inline-help.js';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+import { radioStyles } from './input-radio-styles.js';
+import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
+
+/**
+ * A radio input within a <d2l-input-radio-group>.
+ * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
+ * @slot supporting - Supporting information which will appear below and be aligned with the input.
+ */
+class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyRequiredMixin(LitElement)))) {
+
+	static get properties() {
+		return {
+			/**
+			 * Checked state
+			 * @type {boolean}
+			 */
+			checked: { type: Boolean, reflect: true },
+			/**
+			 * ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input
+			 * @type {string}
+			 */
+			description: { type: String },
+			/**
+			 * Disables the input
+			 * @type {boolean}
+			 */
+			disabled: { type: Boolean, reflect: true },
+			/**
+			 * REQUIRED: Label for the input
+			 * @type {string}
+			 */
+			label: { required: true, type: String },
+			/**
+			 * Hides the supporting slot when unchecked
+			 * @type {boolean}
+			 */
+			supportingHiddenWhenUnchecked: { type: Boolean, attribute: 'supporting-hidden-when-unchecked', reflect: true },
+			/**
+			 * Value of the input
+			 * @type {string}
+			 */
+			value: { type: String },
+			_checked: { state: true },
+			_firstFocusable: { state: true },
+			_hasSupporting: { state: true },
+			_isHovered: { state: true },
+			_invalid: { state: true }
+		};
+	}
+
+	static get styles() {
+		return [super.styles, radioStyles, css`
+			:host {
+				display: block;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			.d2l-input-radio-label {
+				cursor: default;
+				margin-block-end: 0;
+			}
+			.d2l-input-inline-help,
+			.d2l-input-radio-supporting {
+				margin-inline-start: 1.7rem;
+			}
+			.d2l-input-radio-supporting {
+				display: none;
+				margin-block-start: 0.6rem;
+			}
+			.d2l-input-radio-supporting-visible {
+				display: block;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this.disabled = false;
+		this.supportingHiddenWhenUnchecked = false;
+		this.value = 'on';
+		this._checked = false;
+		this._firstFocusable = false;
+		this._hasSupporting = false;
+		this._isHovered = false;
+		this._isInitFromGroup = false;
+		this._invalid = false;
+	}
+
+	get checked() { return this._checked; }
+	set checked(value) {
+		if (value === this._checked) return;
+		if (!this._isInitFromGroup) {
+			this._checked = value;
+		} else {
+			/** @ignore */
+			this.dispatchEvent(
+				new CustomEvent(
+					'd2l-input-radio-checked',
+					{ bubbles: true, composed: false, detail: { checked: value } }
+				)
+			);
+		}
+	}
+
+	static get focusElementSelector() {
+		return '.d2l-input-radio';
+	}
+
+	render() {
+		const disabled = this.disabled || this.skeleton;
+		const labelClasses = {
+			'd2l-input-radio-label': true,
+			'd2l-input-radio-label-disabled': this.disabled && !this.skeleton,
+		};
+		const radioClasses = {
+			'd2l-input-radio': true,
+			'd2l-disabled': this.disabled && !this.skeleton,
+			'd2l-hovering': this._isHovered && !disabled,
+			'd2l-skeletize': true
+		};
+		const supportingClasses = {
+			'd2l-input-radio-supporting': true,
+			'd2l-input-radio-supporting-visible': this._hasSupporting && (!this.supportingHiddenWhenUnchecked || this._checked),
+		};
+		const description = this.description ? html`<div id="${this.#descriptionId}" hidden>${this.description}</div>` : nothing;
+		const ariaDescribedByIds = `${this.description ? this.#descriptionId : ''} ${this._hasInlineHelp ? this.#inlineHelpId : ''}`.trim();
+		const tabindex = (!disabled && (this._checked || this._firstFocusable)) ? '0' : undefined;
+		return html`
+			<div class="${classMap(labelClasses)}" @mouseover="${this.#handleMouseOver}" @mouseout="${this.#handleMouseOut}">
+				<div
+					aria-checked="${this._checked}"
+					aria-describedby="${ifDefined(ariaDescribedByIds.length > 0 ? ariaDescribedByIds : undefined)}"
+					aria-disabled="${ifDefined(disabled ? 'true' : undefined)}"
+					aria-invalid="${ifDefined(this._invalid ? 'true' : undefined)}"
+					aria-labelledby="${this.#labelId}"
+					class="${classMap(radioClasses)}"
+					role="radio"
+					tabindex="${ifDefined(tabindex)}"></div>
+				<div id="${this.#labelId}" class="d2l-skeletize">${this.label}</div>
+			</div>
+			${this._renderInlineHelp(this.#inlineHelpId)}
+			${description}
+			<div class="${classMap(supportingClasses)}" @change="${this.#handleSupportingChange}"><slot name="supporting" @slotchange="${this.#handleSupportingSlotChange}"></slot></div>
+		`;
+	}
+
+	#descriptionId = getUniqueId();
+	#inlineHelpId = getUniqueId();
+	#labelId = getUniqueId();
+
+	#handleMouseOut() {
+		this._isHovered = false;
+	}
+
+	#handleMouseOver() {
+		this._isHovered = true;
+	}
+
+	#handleSupportingChange(e) {
+		e.stopPropagation();
+	}
+
+	#handleSupportingSlotChange(e) {
+		const content = e.target.assignedNodes({ flatten: true });
+		this._hasSupporting = content?.length > 0;
+	}
+
+}
+customElements.define('d2l-input-radio', InputRadio);

package/components/validation/README.md

@@ -4,10 +4,10 @@
 The `d2l-validation-custom` component is used to add custom validation logic to native form elements like `input`, `select` and `textarea` or custom form elements created with the [`FormElementMixin`](../form/docs/form-element-mixin.md).
 
 **Native Form Elements:**
-- When attached to native form elements like `input`, `select` and `textarea`, both the `d2l-validation-custom` and native form element **must** be within a [`d2l-form`](../form/docs/form.md) or [`d2l-form-native`](../form/docs/form-native.md) for the validation custom to function.
+- When attached to native form elements like `input`, `select` and `textarea`, both the `d2l-validation-custom` and native form element **must** be within a [`d2l-form`](../form/docs/form.md) for the validation custom to function.
 
 **Custom Form Elements:**
-- When attached to custom form elements created with the [`FormElementMixin`](../form/docs/form-element-mixin.md), the `d2l-validation-custom` will function even if no [`d2l-form`](../form/docs/form.md) or [`d2l-form-native`](../form/docs/form-native.md) is present.
+- When attached to custom form elements created with the [`FormElementMixin`](../form/docs/form-element-mixin.md), the `d2l-validation-custom` will function even if no [`d2l-form`](../form/docs/form.md) is present.
 
 **Usage:**
 ```html