@brightspace-ui/core 3.71.0 → 3.72.0

package/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 @@
 				</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>

package/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 }));
 	}
+
 };

package/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.
  */
 class VisibilitySwitch extends LocalizeCoreElement(SwitchMixin(LitElement)) {
 

package/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.
  */
 class Switch extends SwitchMixin(LitElement) {
 

package/custom-elements.json

@@ -11934,6 +11934,10 @@
         }
       ],
       "events": [
+        {
+          "name": "d2l-switch-before-change",
+          "description": "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."
+        },
         {
           "name": "change",
           "description": "Dispatched when the `on` property is updated"
@@ -12012,6 +12016,10 @@
         }
       ],
       "events": [
+        {
+          "name": "d2l-switch-before-change",
+          "description": "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."
+        },
         {
           "name": "change",
           "description": "Dispatched when the `on` property is updated"

package/package.json

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