Merge branch 'main' into awikkerink/typescript-add-type-exports

components/switch/demo/switch.html

@@ -6,6 +6,7 @@
 		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
 		<script type="module">
 			import '../../demo/demo-page.js';
+			import '../../dialog/dialog-confirm.js';
 			import '../switch.js';
 			import '../switch-visibility.js';
 		</script>
@@ -68,6 +69,27 @@ <h2>Visibility (with conditions)</h2>
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>On/Off (confirm)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-switch id="switch-with-confirm" text="Dark Mode"></d2l-switch>
+					<d2l-dialog-confirm id="confirm" title-text="Confirm" text="Are you sure you want to change?">
+						<d2l-button slot="footer" primary data-dialog-action="yes">Yes</d2l-button>
+						<d2l-button slot="footer" data-dialog-action="no">No</d2l-button>
+					</d2l-dialog-confirm>
+					<script>
+						const elem = document.querySelector('#switch-with-confirm');
+						elem.addEventListener('d2l-switch-before-change', async e => {
+							e.preventDefault();
+							const confirmResult = await document.querySelector('#confirm').open();
+							if (confirmResult === 'yes') e.detail.update(!elem.on);
+						});
+						elem.addEventListener('change', e => console.log('switch changed', e.target.on));
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

components/switch/switch-mixin.js

@@ -221,11 +221,11 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 
 	get _labelContent() {
 		return html`<span
-						@click='${this._handleClick}'
-						@mouseenter='${this._handleSwitchHover}'
-						@mouseleave='${this._handleSwitchHoverLeave}'>
-						${this.text}
-					</span>`;
+			@click='${this._handleClick}'
+			@mouseenter='${this._handleSwitchHover}'
+			@mouseleave='${this._handleSwitchHoverLeave}'>
+			${this.text}
+		</span>`;
 	}
 
 	_handleClick() {
@@ -252,8 +252,23 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 
 	_toggleState() {
 		if (this.disabled) return;
-		this.on = !this.on;
+
+		const beforeChangeEvent = new CustomEvent('d2l-switch-before-change', {
+			detail: { update: on => this._updateState(on) },
+			cancelable: true
+		});
+
+		this.dispatchEvent(beforeChangeEvent);
+		if (beforeChangeEvent.defaultPrevented) return;
+
+		this._updateState(!this.on);
+	}
+
+	_updateState(value) {
+		this.on = value;
+
 		/** Dispatched when the `on` property is updated */
 		this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
 	}
+
 };

components/switch/switch-visibility.js

@@ -8,6 +8,7 @@ import { SwitchMixin } from './switch-mixin.js';
 /**
  * A variant of the generic switch configured with special icons and default text for toggling "visibility".
  * @slot - Optional content that will be displayed within the "conditions" opener tooltip when the switch is on.
+ * @fires d2l-switch-before-change - Dispatched before on-state is updated. Can be canceled to allow the consumer to handle switching the on-state. This is useful if something needs to happen prior to the on-state being switched.
  * @typedef {VisibilitySwitch} VisibilitySwitchExported
  */
 class VisibilitySwitch extends LocalizeCoreElement(SwitchMixin(LitElement)) {

components/switch/switch.js

@@ -7,6 +7,7 @@ import { SwitchMixin } from './switch-mixin.js';
 /**
  * A generic switch with on/off semantics.
  * @attr {string} text - ACCESSIBILITY: REQUIRED: Acts as the primary label for the switch. Visible unless text-position is `hidden`.
+ * @fires d2l-switch-before-change - Dispatched before on-state is updated. Can be canceled to allow the consumer to handle switching the on-state. This is useful if something needs to happen prior to the on-state being switched.
  * @typedef {Switch} SwitchExported
  */
 class Switch extends SwitchMixin(LitElement) {

components/switch/test/switch.test.js

@@ -1,5 +1,5 @@
 import '../switch.js';
-import { expect, fixture, html, oneEvent, runConstructor, sendKeysElem } from '@brightspace-ui/testing';
+import { clickElem, expect, fixture, html, oneEvent, runConstructor, sendKeysElem } from '@brightspace-ui/testing';
 import { getComposedActiveElement } from '../../../helpers/focus.js';
 
 const switchFixture = html`<d2l-switch text="some text"></d2l-switch>`;
@@ -45,4 +45,28 @@ describe('d2l-switch', () => {
 		});
 	});
 
+	describe('consumer manages state', () => {
+
+		it('click with no state management', async() => {
+			const elem = await fixture(switchFixture);
+			elem.addEventListener('d2l-switch-before-change', e => {
+				e.preventDefault();
+			});
+			await clickElem(elem);
+			expect(elem.on).to.be.false;
+		});
+
+		it('click with state management', async() => {
+			const elem = await fixture(switchFixture);
+			elem.addEventListener('d2l-switch-before-change', e => {
+				e.preventDefault();
+				e.detail.update(true);
+			});
+			clickElem(elem);
+			await oneEvent(elem, 'change');
+			expect(elem.on).to.be.true;
+		});
+
+	});
+
 });

components/table/demo/table-test.js

@@ -103,7 +103,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 					<thead>
 						${this.multiLine ? html`
 							<tr>
-								<th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
+								<td scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></td>
 								${this._renderDoubleSortButton('City', 'Country')}
 								<th scope="col" colspan="${columns.length + 1}" sticky>
 									Metrics
@@ -116,7 +116,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 							</tr>
 						` : html`
 							<tr>
-								<th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
+								<td scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></td>
 								${this._renderDoubleSortButton('City', 'Country')}
 								${columns.map(columnHeading => this._renderSortButton(columnHeading))}
 								${this._renderMenuSortButton('Coordinates', ['Latitude', 'Longitude'])}

components/table/table-wrapper.js

@@ -87,7 +87,10 @@ export const tableStyles = css`
 	/* header cells */
 	.d2l-table > thead > tr > th,
 	.d2l-table > * > tr.d2l-table-header > th,
-	.d2l-table > * > tr[header] > th {
+	.d2l-table > * > tr[header] > th,
+	.d2l-table > thead > tr > td,
+	.d2l-table > * > tr.d2l-table-header > td,
+	.d2l-table > * > tr[header] > td {
 		background-color: var(--d2l-table-header-background-color);
 		font-size: 0.7rem;
 		line-height: 0.9rem;
@@ -214,6 +217,7 @@ export const tableStyles = css`
 
 	/* all header cells */
 	d2l-table-wrapper[sticky-headers] .d2l-table > thead > tr > th,
+	d2l-table-wrapper[sticky-headers] .d2l-table > thead > tr > td,
 	d2l-table-wrapper[sticky-headers]:not([sticky-headers-scroll-wrapper]) .d2l-table > * > tr.d2l-table-header > *,
 	d2l-table-wrapper[sticky-headers]:not([sticky-headers-scroll-wrapper]) .d2l-table > * > tr[header] > * {
 		position: -webkit-sticky;
@@ -224,6 +228,8 @@ export const tableStyles = css`
 	/* header cells that are also sticky */
 	d2l-table-wrapper[sticky-headers] .d2l-table > thead > tr > th.d2l-table-sticky-cell,
 	d2l-table-wrapper[sticky-headers] .d2l-table > thead > tr > th[sticky],
+	d2l-table-wrapper[sticky-headers] .d2l-table > thead > tr > td.d2l-table-sticky-cell,
+	d2l-table-wrapper[sticky-headers] .d2l-table > thead > tr > td[sticky],
 	d2l-table-wrapper[sticky-headers]:not([sticky-headers-scroll-wrapper]) .d2l-table > * > tr.d2l-table-header > .d2l-table-sticky-cell,
 	d2l-table-wrapper[sticky-headers]:not([sticky-headers-scroll-wrapper]) .d2l-table > * > tr.d2l-table-header > [sticky],
 	d2l-table-wrapper[sticky-headers]:not([sticky-headers-scroll-wrapper]) .d2l-table > * > tr[header] > .d2l-table-sticky-cell,
@@ -756,10 +762,10 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		const stickyRows = Array.from(this._table.querySelectorAll(SELECTORS.headers));
 		stickyRows.forEach(r => {
 			const thTop = hasStickyControls ? `${rowTop}px` : `calc(${rowTop}px + var(--d2l-table-border-radius-sticky-offset, 0px))`;
-			const ths = Array.from(r.querySelectorAll('th'));
+			const ths = Array.from(r.querySelectorAll('th,td'));
 			ths.forEach(th => th.style.top = thTop);
 
-			const rowHeight = r.querySelector('th:not([rowspan])')?.offsetHeight || 0;
+			const rowHeight = r.querySelector('th:not([rowspan]),td:not([rowspan])')?.offsetHeight || 0;
 			rowTop += rowHeight;
 		});
 	}

lang/en.js

@@ -32,8 +32,8 @@ export default {
 	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.filter-dimension-set-date-time-range-value.label": "{text}, expand to choose dates",
 	"components.filter-dimension-set-date-time-range-value.valueTextRange": "{startValue} to {endValue}",
-	"components.filter-dimension-set-date-time-range-value.valueTextRangeStartOnly": "Start Date: {startValue}",
-	"components.filter-dimension-set-date-time-range-value.valueTextRangeEndOnly": "End Date: {endValue}",
+	"components.filter-dimension-set-date-time-range-value.valueTextRangeStartOnly": "After {startValue}",
+	"components.filter-dimension-set-date-time-range-value.valueTextRangeEndOnly": "Before {endValue}",
 	"components.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"components.form-element.defaultError": "{label} is invalid",
 	"components.form-element.defaultFieldLabel": "Field",

lang/es.js

@@ -35,15 +35,15 @@ export default {
 	"components.filter-dimension-set-date-time-range-value.valueTextRangeStartOnly": "Fecha de inicio: {startValue}",
 	"components.filter-dimension-set-date-time-range-value.valueTextRangeEndOnly": "Fecha final: {endValue}",
 	"components.filter-dimension-set-date-time-range-value.text": "Rango de fechas personalizado",
-	"components.form-element.defaultError": "{label} no es válida",
+	"components.form-element.defaultError": "{label} no es válido",
 	"components.form-element.defaultFieldLabel": "Campo",
 	"components.form-element.input.email.typeMismatch": "El correo electrónico no es válido",
 	"components.form-element.input.number.rangeError": "{minExclusive, select, true {{maxExclusive, select, true {El número debe ser mayor que {min} y menor que {max}.} other {El número debe ser mayor que {min} y menor o igual que {max}.}}} other {{maxExclusive, select, true {El número debe ser mayor o igual que {min} y menor que {max}.} other {El número debe ser mayor o igual que {min} y menor o igual que {max}.}}}}",
 	"components.form-element.input.number.rangeOverflow": "{maxExclusive, select, true {El número debe ser menor que {max}.} other {El número debe ser menor o igual que {max}.}}",
 	"components.form-element.input.number.rangeUnderflow": "{minExclusive, select, true {El número debe ser mayor que {min}.} other {El número debe ser mayor o igual que {min}.}}",
 	"components.form-element.input.text.tooShort": "{label} debe tener al menos {minlength} caracteres",
 	"components.form-element.input.url.typeMismatch": "La dirección URL no es válida",
-	"components.form-element.valueMissing": "{label} es obligatoria",
+	"components.form-element.valueMissing": "{label} es obligatorio",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Se encontró {count} error en la información que envió} other {Se encontraron {count} errores en la información que envió}}",
 	"components.form-error-summary.text": "Activar o desactivar la presentación de detalles de los errores",
 	"components.input-color.backgroundColor": "Color de fondo",

lang/fr-fr.js

@@ -35,7 +35,7 @@ export default {
 	"components.filter-dimension-set-date-time-range-value.valueTextRangeStartOnly": "Date de début : {startValue}",
 	"components.filter-dimension-set-date-time-range-value.valueTextRangeEndOnly": "Date de fin : {endValue}",
 	"components.filter-dimension-set-date-time-range-value.text": "Période personnalisée",
-	"components.form-element.defaultError": "{label} n'est pas valide",
+	"components.form-element.defaultError": "{label} n’est pas valide",
 	"components.form-element.defaultFieldLabel": "Champ",
 	"components.form-element.input.email.typeMismatch": "L'adresse e-mail n'est pas valide.",
 	"components.form-element.input.number.rangeError": "{minExclusive, select, true {{maxExclusive, select, true {Le nombre doit être supérieur à {min} et inférieur à {max}.} other {Le nombre doit être supérieur à {min} et inférieur à ou égal à {max}.}}} other {{maxExclusive, select, true {Le nombre doit être supérieur ou égal à {min} et inférieur à {max}.} other {Le nombre doit être supérieur ou égal à {min} et inférieur ou égal à {max}.}}}}",

lang/hi.js

@@ -43,7 +43,7 @@ export default {
 	"components.form-element.input.number.rangeUnderflow": "{minExclusive, select, true {संख्या {min} से ज़्यादा होनी चाहिए.} other {संख्या {min} से ज़्यादा या उसके बराबर होनी चाहिए.}}",
 	"components.form-element.input.text.tooShort": "{label} कम से कम {minlength} वर्णों का होना चाहिए",
 	"components.form-element.input.url.typeMismatch": "URL मान्य नहीं है",
-	"components.form-element.valueMissing": "{label} आवश्यक है",
+	"components.form-element.valueMissing": "{label} ज़रूरी है",
 	"components.form-error-summary.errorSummary": "{count, plural, one {आपके द्वारा सबमिट की गई जानकारी में {count} त्रुटियाँ पाई गईं} other {आपके द्वारा सबमिट की गई जानकारी में {count} त्रुटियाँ पाई गईं}}",
 	"components.form-error-summary.text": "त्रुटि विवरण टॉगल करें",
 	"components.input-color.backgroundColor": "पृष्ठभूमि का रंग",

lang/ko.js

@@ -35,7 +35,7 @@ export default {
 	"components.filter-dimension-set-date-time-range-value.valueTextRangeStartOnly": "시작일: {startValue}",
 	"components.filter-dimension-set-date-time-range-value.valueTextRangeEndOnly": "종료일: {endValue}",
 	"components.filter-dimension-set-date-time-range-value.text": "사용자 지정 날짜 범위",
-	"components.form-element.defaultError": "{label}이(가) 잘못되었습니다",
+	"components.form-element.defaultError": "{label}이(가) 유효하지 않습니다",
 	"components.form-element.defaultFieldLabel": "필드",
 	"components.form-element.input.email.typeMismatch": "이메일이 유효하지 않습니다.",
 	"components.form-element.input.number.rangeError": "{minExclusive, select, true {{maxExclusive, select, true {숫자는 {min}보다 크고 {max}보다 작아야 합니다.} other {숫자는 {min}보다 크고 {max}보다 작거나 같아야 합니다.}}} other {{maxExclusive, select, true {숫자는 {min}보다 크거나 같고 {max}보다 작아야 합니다.} other {숫자는 {min}보다 크거나 같고 {max}보다 작거나 같아야 합니다.}}}}",

package.json

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