@brightspace-ui/core 1.208.0 → 1.209.1

package/components/alert/README.md

@@ -4,21 +4,38 @@ Alerts communicate critical information relating to the state of the system and
 <!-- docs: demo autoSize:false align:start -->
 ```html
 <script type="module">
-	import '@brightspace-ui/core/components/alert/alert-toast.js';
+  import '@brightspace-ui/core/components/alert/alert-toast.js';
+  import '@brightspace-ui/core/components/button/button.js';
+
+  var alert = document.querySelector('#alert');
+  var alertToast = document.querySelector('#alert-toast');
+  var button = document.querySelector('#open');
+
+  alert.addEventListener('d2l-alert-close', function() {
+    if (!alertToast.open) button.style.display = 'block';
+  });
+  alertToast.addEventListener('d2l-alert-toast-close', function() {
+    if (alert.hasAttribute('hidden')) button.style.display = 'block';
+  });
+
+  button.addEventListener('click', () => {
+    alert.removeAttribute('hidden');
+    alertToast.open = true;
+    button.style.display = 'none';
+  });
 </script>
-<!-- docs: start hidden content -->
 <style>
   d2l-alert-toast {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
 </style>
-<!-- docs: end hidden content -->
 
-<d2l-alert type="default" button-text="Undo" has-close-button>
+<d2l-button id="open" style="align-self:center;display:none;">Show Alerts</d2l-button>
+<d2l-alert id="alert" type="default" button-text="Undo" has-close-button>
 	A message.
 </d2l-alert>
-<d2l-alert-toast type="success" open no-auto-close>
+<d2l-alert-toast id="alert-toast" type="success" open no-auto-close>
 	A message.
 </d2l-alert-toast>
 ```

package/components/dialog/README.md

@@ -7,13 +7,17 @@ Dialogs interrupt the user to complete a set of tasks, confirm an action, or off
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/dialog/dialog.js';
-</script>
 
+  document.querySelector('#open-demo').addEventListener('click', () => {
+    document.querySelector('#dialog-demo').opened = true;
+  });
+</script>
 <d2l-dialog id="dialog-demo" title-text="Dialog Title">
   <div>Some dialog content</div>
   <d2l-button slot="footer" primary data-dialog-action="done">Done</d2l-button>
   <d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
 </d2l-dialog>
+<d2l-button id="open-demo">Show Dialog</d2l-button>
 ```
 
 ## General Dialog [d2l-dialog]

package/components/form/form-element-mixin.js

@@ -97,6 +97,11 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 			 * @ignore
 			 */
 			noValidate: { type: Boolean, attribute: 'novalidate' },
+			/**
+			 * @ignore
+			 * Perform validation immediately instead of waiting for the user to make changes.
+			 */
+			validateOnInit: { type: Boolean, attribute: 'validate-on-init' },
 			/**
 			 * @ignore
 			 */
@@ -125,6 +130,8 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 		/** @ignore */
 		this.noValidate = false;
 		/** @ignore */
+		this.validateOnInit = false;
+		/** @ignore */
 		this.validationError = null;
 		/** @ignore */
 		this.childErrors = new Map();
@@ -171,6 +178,9 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 				this.dispatchEvent(new CustomEvent('invalid-change'));
 			}
 		}
+		if (this.validateOnInit && (changedProperties.has('noValidate') || changedProperties.has('validateOnInit'))) {
+			this.requestValidate(true);
+		}
 	}
 
 	async requestValidate(showNewErrors = true) {
@@ -210,6 +220,9 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 
 	validationCustomConnected(custom) {
 		this._validationCustoms.add(custom);
+		if (this.validateOnInit) {
+			this.requestValidate(true);
+		}
 	}
 
 	validationCustomDisconnected(custom) {

package/components/html-block/demo/html-block.html

@@ -42,7 +42,7 @@
 
 		</script>
 		<script>
-			document.getElementsByTagName('html')[0].dataset.mathjaxContext = JSON.stringify({ renderLatex: window.location.search.indexOf('latex=true') !== -1 });
+			document.getElementsByTagName('html')[0].dataset.mathjaxContext = JSON.stringify({ outputScale: 1.1, renderLatex: window.location.search.indexOf('latex=true') !== -1 });
 		</script>
 	</head>
 	<body unresolved>

package/components/html-block/html-block.js

@@ -245,8 +245,10 @@ class HtmlBlock extends LitElement {
 			if (fragment) {
 
 				let temp = document.createElement('div');
+				temp.style.display = 'none';
 				temp.appendChild(fragment);
 
+				this._renderContainer.appendChild(temp);
 				temp = await this._processRenderers(temp);
 				this._renderContainer.innerHTML = temp.innerHTML;
 

package/components/inputs/input-date-time.js

@@ -15,6 +15,7 @@ import { formatDateInISO,
 	parseISOTime } from '../../helpers/dateTime.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getDefaultTime } from './input-time.js';
+import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { LabelledMixin } from '../../mixins/labelled-mixin.js';
@@ -119,6 +120,7 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
 		this.opened = false;
 		this.required = false;
 		this.timeDefaultValue = 'startOfDay';
+		this._documentLocaleSettings = getDocumentLocaleSettings();
 		this._inputId = getUniqueId();
 		this._namespace = 'components.input-date-time';
 		this._preventDefaultValidation = false;
@@ -190,6 +192,16 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
 		return super.validationMessage;
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+		this._documentLocaleSettings.addChangeListener(this._handleLocaleChange.bind(this));
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._documentLocaleSettings.removeChangeListener(this._handleLocaleChange.bind(this));
+	}
+
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
@@ -343,6 +355,10 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
 		if (tooltip) tooltip.show();
 	}
 
+	_handleLocaleChange() {
+		this.requestUpdate();
+	}
+
 	async _handleTimeChange(e) {
 		const date = this.shadowRoot.querySelector('d2l-input-date').value;
 		const time = e.target.value;

package/helpers/mathjax.js

@@ -32,9 +32,11 @@ export class HtmlBlockMathRenderer {
 		await loadMathJax(mathJaxConfig);
 
 		const temp = document.createElement('div');
+		temp.style.display = 'none';
 		temp.attachShadow({ mode: 'open' });
 		temp.shadowRoot.innerHTML = `<div><mjx-doc><mjx-head></mjx-head><mjx-body>${elem.innerHTML}</mjx-body></mjx-doc></div>`;
 
+		elem.appendChild(temp);
 		window.MathJax.typesetShadow(temp.shadowRoot);
 		return temp.shadowRoot.firstChild;
 	}

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.208.0",
+  "version": "1.209.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "repository": "https://github.com/BrightspaceUI/core.git",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build:clean": "node ./cli/clean.js",
-    "build:icons": "node ./cli/icon-generator.js",
+    "build:clean": "node ./cli/clean.mjs",
+    "build:icons": "node ./cli/icon-generator.mjs",
     "build:sass": "node-sass --output-style expanded ./test/sass.scss > ./test/sass.output.css",
     "build": "npm run build:clean && npm run build:icons && npm run build:sass",
     "lint": "npm run lint:eslint && npm run lint:style && npm run lint:lit",
-    "lint:eslint": "eslint . --ext .js,.html",
+    "lint:eslint": "eslint . --ext .js,.mjs,.html",
     "lint:lit": "lit-analyzer \"{components,directives,helpers,mixins,templates,test,tools}/**/*.js\" --strict",
     "lint:style": "stylelint \"**/*.{js,html}\"",
     "start": "web-dev-server --node-resolve --watch --open",
@@ -48,7 +48,7 @@
     "@web/test-runner": "^0.13",
     "@web/test-runner-playwright": "^0.8.8",
     "axe-core": "^4",
-    "chalk": "^4",
+    "chalk": "^5",
     "eslint": "^7",
     "eslint-config-brightspace": "^0.16",
     "eslint-plugin-html": "^6",