@brightspace-ui/core 3.309.0 → 3.310.0

package/components/demo/code-view.js

@@ -1,5 +1,5 @@
-import 'prismjs/prism.js';
 import { html, LitElement } from 'lit';
+import { formatCodeElement } from '../../helpers/prism.js';
 import { styles } from './code-view-styles.js';
 import { themeStyles } from './code-dark-plus-styles.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
@@ -17,17 +17,10 @@ class CodeView extends LitElement {
 	constructor() {
 		super();
 		this.language = 'html';
-		this._dependenciesPromise = Promise.resolve();
 	}
 
 	attributeChangedCallback(name, oldval, newval) {
 		if (name !== 'language' || oldval === newval) return;
-		const language = this._getLanguage(newval);
-		if (Prism.languages[language]) {
-			this._dependenciesPromise = Promise.resolve();
-		} else {
-			this._dependenciesPromise = import(`../../node_modules/prismjs/components/prism-${language}.min.js`);
-		}
 		if (this.shadowRoot) this._updateCode(this.shadowRoot.querySelector('slot'));
 		super.attributeChangedCallback(name, oldval, newval);
 	}
@@ -78,17 +71,6 @@ class CodeView extends LitElement {
 		}).join('\n');
 	}
 
-	_getLanguage(language) {
-		const aliases = { shell: 'bash' };
-		return aliases[language] ? aliases[language] : language;
-	}
-
-	_getPrismGrammar(language) {
-		language = this._getLanguage(language);
-		if (Prism.languages[language]) return Prism.languages[language];
-		else return Prism.languages.html;
-	}
-
 	_handleSlotChange(e) {
 		this._updateCode(e.target);
 	}
@@ -107,8 +89,11 @@ class CodeView extends LitElement {
 		let code = this._formatCode(nodes.reduce((code, node) => code + node.textContent, ''));
 
 		try {
-			await this._dependenciesPromise;
-			code = Prism.highlight(code, this._getPrismGrammar(this.language), this.language);
+			const codeElement = document.createElement('code');
+			codeElement.className = `language-${this.language}`;
+			codeElement.textContent = code;
+			await formatCodeElement(codeElement, { allowAllLanguages: true });
+			code = codeElement.innerHTML;
 		} catch (ex) {
 			// eslint-disable-next-line no-console
 			console.log(ex);

package/components/dialog/dialog-fullscreen.js

@@ -6,8 +6,8 @@ import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
+import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -49,6 +49,11 @@ class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncCo
 
 	static styles = [_generateResetStyles(':host'), dialogStyles, heading2Styles, heading3Styles, css`
 
+		.d2l-dialog-header > div {
+			display: flex;
+			flex-direction: row-reverse;
+		}
+
 		.d2l-dialog-footer.d2l-footer-no-content {
 			display: none;
 		}
@@ -189,7 +194,7 @@ class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncCo
 		super();
 		this.async = false;
 		this.noPadding = false;
-		this.preferNative = false;
+		this.preferNative = getFlag('GAUD-10336-prefer-native-fullscreen-dialogs', true);
 		this._autoSize = false;
 		this._hasFooterContent = false;
 		this._icon = 'tier1:close-large-thick';
@@ -251,17 +256,15 @@ class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncCo
 			<div style=${styleMap(slotStyles)}><slot @slotchange="${this._handleSlotChange}"></slot></div>
 		`;
 
-		const contentTabIndex = !this.focusableContentElemPresent ? '0' : undefined;
-
 		const inner = html`
 			<div class="d2l-dialog-inner" style=${styleMap(heightOverride)}>
 				<div class="d2l-dialog-header">
 					<div>
-						<h2 id="${this._titleId}" class="${this._headerStyle}">${this.titleText}</h2>
 						<d2l-button-icon icon="${this._icon}" text="${this.localize('components.dialog.close')}" @click="${this._abort}"></d2l-button-icon>
+						${this._renderHeading(this.titleText, { id: this._titleId, class: this._headerStyle })}
 					</div>
 				</div>
-				<div class="d2l-dialog-content" @pending-state="${this._handleAsyncItemState}" tabindex="${ifDefined(contentTabIndex)}">${content}</div>
+				${this._renderContent(content, { handleAsyncItemState: this._handleAsyncItemState, hasTitleText: !!this.titleText })}
 				<div class="${classMap(footerClasses)}">
 					<slot name="footer" @slotchange="${this._handleFooterSlotChange}"></slot>
 				</div>
@@ -296,6 +299,11 @@ class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncCo
 		this._close('abort');
 	}
 
+	_focusInitial() {
+		if (!this.shadowRoot || this._useNative) return;
+		else super._focusInitial();
+	}
+
 	_handleFooterSlotChange(e) {
 		const footerContent = e.target.assignedNodes({ flatten: true });
 		this._hasFooterContent = (footerContent && footerContent.length > 0);

package/components/dialog/dialog-mixin.js

@@ -582,6 +582,32 @@ export const DialogMixin = superclass => class extends superclass {
 
 	}
 
+	_renderContent(content, options) {
+		let tabIndex = undefined;
+		let autoFocus = false;
+		if (this._useNative) {
+			if (!options.hasTitleText) {
+				tabIndex = '-1';
+				autoFocus = true;
+			}
+		} else {
+			tabIndex = !this.focusableContentElemPresent ? '0' : undefined;
+		}
+		return html`<div ?autofocus="${autoFocus}" class="d2l-dialog-content" @pending-state="${ifDefined(options.handleAsyncItemState)}" tabindex="${ifDefined(tabIndex)}">${content}</div>`;
+	}
+
+	_renderHeading(text, options) {
+		let tabIndex = undefined;
+		let autoFocus = false;
+		if (this._useNative) {
+			if (text) {
+				tabIndex = '-1';
+				autoFocus = true;
+			}
+		}
+		return html`<h2 ?autofocus="${autoFocus}" class="${ifDefined(options.class)}" id="${ifDefined(options.id)}" tabindex="${ifDefined(tabIndex)}">${text}</h2>`;
+	}
+
 	_tryApplyFocus(node) {
 		const focusable = getFirstFocusableRelative(node);
 		if (focusable) focusable.focus();

package/custom-elements.json

@@ -2976,7 +2976,6 @@
         },
         {
           "name": "preferNative",
-          "type": "boolean",
           "default": "false"
         }
       ],

package/helpers/prism.js

@@ -330,13 +330,17 @@ export const codeStyles = css`
 	}
 `;
 
-const getLanguageInfo = elem => {
+const languageAliases = {
+	shell: 'bash'
+};
+
+const getLanguageInfo = (elem, allowAllLanguages) => {
 	const classes = elem.classList;
 	for (let i = 0; i < classes.length; i++) {
 		if (classes[i].startsWith('language-')) {
 			const key = classes[i].substring(9);
 			const desc = codeLanguages.get(key);
-			if (desc) return { key: key, desc: desc };
+			if (desc || allowAllLanguages) return { key: languageAliases[key] || key, desc: desc };
 		}
 	}
 	return { key: 'plain', desc: codeLanguages.get('plain') };
@@ -351,6 +355,7 @@ const languageDependencies = {
 const languagesLoaded = {
 	clike: Promise.resolve(),
 	css: Promise.resolve(),
+	html: Promise.resolve(),
 	javascript: Promise.resolve(),
 	markup: Promise.resolve(),
 	plain: Promise.resolve()
@@ -442,12 +447,13 @@ const getCodeElement = elem => {
 	return elem.querySelector('code');
 };
 
-export async function formatCodeElement(elem) {
+// allowAllLanguages is intended only for development consumers.
+export async function formatCodeElement(elem, { allowAllLanguages = false } = {}) {
 	const code = getCodeElement(elem);
 
 	if (code.className.indexOf('language-') === -1) return;
 
-	const languageInfo = getLanguageInfo(code);
+	const languageInfo = getLanguageInfo(code, allowAllLanguages);
 	const lineNumbers = elem.classList.contains('line-numbers') || code.classList.contains('line-numbers');
 
 	await loadPrism(); // must be loaded before loading plugins or languages
@@ -457,7 +463,7 @@ export async function formatCodeElement(elem) {
 		lineNumbers ? loadPlugin('line-numbers') : null
 	]);
 
-	if (!elem.dataset.language && languageInfo.key !== 'plain') elem.dataset.language = languageInfo.desc;
+	if (!elem.dataset.language && languageInfo.desc && languageInfo.key !== 'plain') elem.dataset.language = languageInfo.desc;
 	Prism.highlightElement(code);
 }
 

package/package.json

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