@brightspace-ui/core 3.70.0 → 3.72.0

package/components/inputs/demo/input-text.html

@@ -132,9 +132,9 @@
 			<h2>Inline Help</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-text label="Name">
+					<d2l-input-text label="Alphabet" pattern="[a-z]*" pattern-failure-text="Must be a lowercase letter from a to z">
 						<div slot="inline-help">
-							Help text <b>right here</b>!
+							Enter only lowercase letters from the alphabet.
 						</div>
 					</d2l-input-text>
 				</template>

package/components/inputs/docs/input-text.md

@@ -81,6 +81,7 @@ The `<d2l-input-text>` element is a simple wrapper around the native `<input typ
 | `name` | String | Name of the input |
 | `novalidate` | Boolean | Disables the built-in validation |
 | `pattern` | String | Regular expression pattern to validate the value |
+| `pattern-failure-text` | String | Text to display when input fails validation against the pattern. If a list of characters is included in the message, use `LocalizeMixin`'s `localizeCharacter`. |
 | `prevent-submit` | Boolean | Prevents pressing ENTER from submitting forms |
 | `readonly` | Boolean | Makes the input read-only |
 | `required` | Boolean | Indicates that a value is required |

package/components/inputs/input-text.js

@@ -102,12 +102,12 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 			 */
 			minlength: { type: Number },
 			/**
-			 * Regular expression pattern to validate the value
+			 * ADVANCED: Regular expression pattern to validate the value
 			 * @type {string}
 			 */
 			pattern: { type: String },
 			/**
-			 * Text to display when input fails validation against the pattern
+			 * ADVANCED: Text to display when input fails validation against the pattern.  If a list of characters is included in the message, use `LocalizeMixin`'s `localizeCharacter`.
 			 */
 			patternFailureText: { type: String, attribute: 'pattern-failure-text' },
 			/**
@@ -332,6 +332,8 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 			} else if (this.type === 'url') {
 				return this.localize('components.form-element.input.url.typeMismatch');
 			}
+		} else if (this.validity.patternMismatch && (typeof this.patternFailureText === 'string')) {
+			return this.patternFailureText;
 		}
 		return super.validationMessage;
 	}

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

@@ -6847,12 +6847,12 @@
         },
         {
           "name": "pattern",
-          "description": "Regular expression pattern to validate the value",
+          "description": "ADVANCED: Regular expression pattern to validate the value",
           "type": "string"
         },
         {
           "name": "pattern-failure-text",
-          "description": "Text to display when input fails validation against the pattern",
+          "description": "ADVANCED: Text to display when input fails validation against the pattern.  If a list of characters is included in the message, use `LocalizeMixin`'s `localizeCharacter`.",
           "type": "string"
         },
         {
@@ -7013,13 +7013,13 @@
         {
           "name": "pattern",
           "attribute": "pattern",
-          "description": "Regular expression pattern to validate the value",
+          "description": "ADVANCED: Regular expression pattern to validate the value",
           "type": "string"
         },
         {
           "name": "patternFailureText",
           "attribute": "pattern-failure-text",
-          "description": "Text to display when input fails validation against the pattern",
+          "description": "ADVANCED: Text to display when input fails validation against the pattern.  If a list of characters is included in the message, use `LocalizeMixin`'s `localizeCharacter`.",
           "type": "string"
         },
         {
@@ -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/mixins/localize/README.md

@@ -152,6 +152,39 @@ this.localizeHTML('octopus', {
 });
 ```
 
+### Common Resources
+
+Some localization resources are common and shared across D2L applications. To use these resources, set the `loadCommon` option:
+
+```javascript
+static get localizeConfig() {
+  return {
+    loadCommon: true
+  };
+}
+```
+
+#### localizeCharacter
+
+The localized value of the following characters can be accessed using `localizeCharacter(char)`:
+* `'` (apostrophe)
+* `&` (ampersand)
+* `*` (asterisk)
+* `\` (backslash)
+* `:` (colon)
+* `,` (comma)
+* `>` (greater-than sign)
+* `<` (less-than sign)
+* `#` (number sign)
+* `%` (percent sign)
+* `|` (pipe)
+* `?` (question mark)
+* `"` (quotation mark)
+
+```javascript
+this.localizeCharacter('&'); // -> 'ampersand' in en-US
+```
+
 ## Off-Stack Language Overrides
 
 To enable OSLO, map the project's localization resources to a language collection in Brightspace by defining `osloCollection` in `localizeConfig`:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.70.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",