@brightspace-ui/core 3.215.0 → 3.216.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
<meta charset="UTF-8">
|
|
7
7
|
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
8
8
|
<script type="module">
|
|
9
|
+
import '../../demo/demo-page.js';
|
|
9
10
|
import '../../colors/colors.js';
|
|
10
11
|
import '../../typography/typography.js';
|
|
11
12
|
import '../html-block.js';
|
|
@@ -19,27 +20,36 @@
|
|
|
19
20
|
}
|
|
20
21
|
</style>
|
|
21
22
|
</head>
|
|
22
|
-
<body
|
|
23
|
+
<body>
|
|
24
|
+
<d2l-demo-page page-title="d2l-html-block (code)">
|
|
23
25
|
|
|
24
|
-
|
|
26
|
+
<h2 class="d2l-heading-3">Block Samples</h2>
|
|
25
27
|
|
|
26
|
-
|
|
28
|
+
<d2l-demo-snippet>
|
|
29
|
+
<template>
|
|
30
|
+
<d2l-html-block html="
|
|
31
|
+
<pre class="d2l-code d2l-code-dark"><code class="language-javascript">function helloGrumpy(name) {
|
|
32
|
+
console.log(`Hi there ${name}.`);
|
|
33
|
+
}
|
|
34
|
+
helloGrumpy('Wizard');</code></pre>
|
|
35
|
+
<br>
|
|
36
|
+
<pre class="d2l-code d2l-code-dark"><code class="language-javascript line-numbers">function helloGrumpy(name) {
|
|
37
|
+
console.log(`Hi there ${name}. Here's some really long text to test overflowing the bounding container.`);
|
|
38
|
+
}
|
|
39
|
+
helloGrumpy('Wizard');</code></pre>">
|
|
40
|
+
</d2l-html-block>
|
|
41
|
+
</template>
|
|
42
|
+
</d2l-demo-snippet>
|
|
27
43
|
|
|
28
|
-
|
|
29
|
-
<pre class="d2l-code d2l-code-dark"><code class="language-javascript">function helloGrumpy(name) {
|
|
30
|
-
console.log(`Hi there ${name}.`);
|
|
31
|
-
}
|
|
32
|
-
helloGrumpy('Wizard');</code></pre>
|
|
33
|
-
<br>
|
|
34
|
-
<pre class="d2l-code d2l-code-dark"><code class="language-javascript line-numbers">function helloGrumpy(name) {
|
|
35
|
-
console.log(`Hi there ${name}. Here's some really long text to test overflowing the bounding container.`);
|
|
36
|
-
}
|
|
37
|
-
helloGrumpy('Wizard');</code></pre>">
|
|
38
|
-
</d2l-html-block>
|
|
44
|
+
<h2 class="d2l-heading-3">Inline Samples</h2>
|
|
39
45
|
|
|
40
|
-
|
|
46
|
+
<d2l-demo-snippet>
|
|
47
|
+
<template>
|
|
48
|
+
<d2l-html-block html="The best type of donuts are he kind you assign in code, for example: <code class="d2l-code d2l-code-dark language-javascript">const jelly = 'donuts';</code>. The next best type of thing you can assign in code is stuff you can ferment. <code class="d2l-code d2l-code-dark language-javascript">let beer = hopsAndWater.map(ingredients => ferment(ingredients));</code>"></d2l-html-block>
|
|
49
|
+
</template>
|
|
50
|
+
</d2l-demo-snippet>
|
|
41
51
|
|
|
42
|
-
|
|
52
|
+
</d2l-demo-page>
|
|
43
53
|
|
|
44
54
|
</body>
|
|
45
55
|
</html>
|
|
@@ -34,7 +34,8 @@ const minBackdropWidthMobile = 30;
|
|
|
34
34
|
const minOpenerSizeNoShift = 52;
|
|
35
35
|
const pointerLength = 16;
|
|
36
36
|
const pointerRotatedLength = Math.SQRT2 * parseFloat(pointerLength);
|
|
37
|
-
|
|
37
|
+
|
|
38
|
+
export const isPopoverSupported = ('popover' in HTMLElement.prototype);
|
|
38
39
|
|
|
39
40
|
const getScrollbarWidth = () => {
|
|
40
41
|
const width = window.innerWidth - document.documentElement.clientWidth;
|
|
@@ -258,7 +259,7 @@ export const PopoverMixin = superclass => class extends superclass {
|
|
|
258
259
|
this.configure();
|
|
259
260
|
this._mobile = false;
|
|
260
261
|
this._showBackdrop = false;
|
|
261
|
-
this._useNativePopover =
|
|
262
|
+
this._useNativePopover = isPopoverSupported ? 'manual' : undefined;
|
|
262
263
|
this.#handleAncestorMutationBound = this.#handleAncestorMutation.bind(this);
|
|
263
264
|
this.#handleAutoCloseClickBound = this.#handleAutoCloseClick.bind(this);
|
|
264
265
|
this.#handleAutoCloseFocusBound = this.#handleAutoCloseFocus.bind(this);
|
|
@@ -4,9 +4,14 @@ import { css, html, LitElement, nothing } from 'lit';
|
|
|
4
4
|
import { cssSizes } from '../inputs/input-checkbox.js';
|
|
5
5
|
import { getComposedParent } from '../../helpers/dom.js';
|
|
6
6
|
import { getFlag } from '../../helpers/flags.js';
|
|
7
|
+
import { isPopoverSupported } from '../popover/popover-mixin.js';
|
|
7
8
|
import { PageableMixin } from '../paging/pageable-mixin.js';
|
|
8
9
|
import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
|
9
10
|
import { SelectionMixin } from '../selection/selection-mixin.js';
|
|
11
|
+
import { usePopoverMixin as useDropdownPopover } from '../dropdown/dropdown-popover-mixin.js';
|
|
12
|
+
import { usePopoverMixin as useTooltipPopover } from '../tooltip/tooltip.js';
|
|
13
|
+
|
|
14
|
+
export const isUsingNativePopover = isPopoverSupported && useDropdownPopover && useTooltipPopover;
|
|
10
15
|
|
|
11
16
|
const colSyncFix = getFlag('GAUD-8228-8186-improved-table-col-sync', true);
|
|
12
17
|
|
|
@@ -733,7 +738,7 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
|
|
|
733
738
|
}
|
|
734
739
|
|
|
735
740
|
_updateStickyAncestor(node, popoverOpened) {
|
|
736
|
-
if (!this.stickyHeaders) return;
|
|
741
|
+
if (!this.stickyHeaders || isUsingNativePopover) return;
|
|
737
742
|
|
|
738
743
|
node = getComposedParent(node);
|
|
739
744
|
while (node) {
|
|
@@ -13,7 +13,7 @@ import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
|
|
13
13
|
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
|
14
14
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
15
15
|
|
|
16
|
-
const usePopoverMixin = getFlag('GAUD-7355-tooltip-popover', true);
|
|
16
|
+
export const usePopoverMixin = getFlag('GAUD-7355-tooltip-popover', true);
|
|
17
17
|
|
|
18
18
|
const contentBorderSize = 1;
|
|
19
19
|
const contentHorizontalPadding = 15;
|
package/helpers/prism.js
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { css, unsafeCSS } from 'lit';
|
|
2
|
+
import { getFlag } from './flags.js';
|
|
2
3
|
import { svgToCSS } from './svg-to-css.js';
|
|
3
4
|
|
|
4
|
-
const prismLocation = '
|
|
5
|
+
const prismLocation = getFlag('shield-14201-update-prismjs-1-30', false)
|
|
6
|
+
? 'https://s.brightspace.com/lib/prismjs/1.30.0'
|
|
7
|
+
: 'https://s.brightspace.com/lib/prismjs/1.28.0';
|
|
5
8
|
//const prismLocation = '/node_modules/prismjs'; // for local debugging
|
|
6
9
|
|
|
7
10
|
// If adding a language, check its Prism dependencies and modify languageDependencies below if necessary
|
|
@@ -356,7 +359,7 @@ const languagesLoaded = {
|
|
|
356
359
|
plain: Promise.resolve()
|
|
357
360
|
};
|
|
358
361
|
|
|
359
|
-
const loadLanguage = async
|
|
362
|
+
const loadLanguage = async(key, location) => {
|
|
360
363
|
if (languagesLoaded[key]) return languagesLoaded[key];
|
|
361
364
|
|
|
362
365
|
// Prism languages can extend other anguages and must be loaded in order
|
|
@@ -370,7 +373,7 @@ const loadLanguage = async key => {
|
|
|
370
373
|
const script = document.createElement('script');
|
|
371
374
|
script.async = 'async';
|
|
372
375
|
script.onload = resolve;
|
|
373
|
-
script.src = `${
|
|
376
|
+
script.src = `${location}/components/prism-${key}.min.js`;
|
|
374
377
|
document.head.appendChild(script);
|
|
375
378
|
});
|
|
376
379
|
|
|
@@ -379,14 +382,14 @@ const loadLanguage = async key => {
|
|
|
379
382
|
|
|
380
383
|
const pluginsLoaded = {};
|
|
381
384
|
|
|
382
|
-
const loadPlugin = async
|
|
385
|
+
const loadPlugin = async(plugin, location) => {
|
|
383
386
|
if (pluginsLoaded[plugin]) return pluginsLoaded[plugin];
|
|
384
387
|
|
|
385
388
|
pluginsLoaded[plugin] = new Promise(resolve => {
|
|
386
389
|
const script = document.createElement('script');
|
|
387
390
|
script.async = 'async';
|
|
388
391
|
script.onload = resolve;
|
|
389
|
-
script.src = `${
|
|
392
|
+
script.src = `${location}/plugins/${plugin}/prism-${plugin}.min.js`;
|
|
390
393
|
document.head.appendChild(script);
|
|
391
394
|
});
|
|
392
395
|
|
|
@@ -397,17 +400,17 @@ const languageAddons = {
|
|
|
397
400
|
css: [{ key: 'css-extras', type: 'lang' }, { key: 'inline-color', type: 'plugin' }]
|
|
398
401
|
};
|
|
399
402
|
|
|
400
|
-
const loadLanguageAddons = async
|
|
403
|
+
const loadLanguageAddons = async(key, location) => {
|
|
401
404
|
if (!languageAddons[key]) return;
|
|
402
405
|
return Promise.all(languageAddons[key].map(addon => {
|
|
403
|
-
if (addon.type === 'lang') return loadLanguage(addon.key);
|
|
404
|
-
else return loadPlugin(addon.key);
|
|
406
|
+
if (addon.type === 'lang') return loadLanguage(addon.key, location);
|
|
407
|
+
else return loadPlugin(addon.key, location);
|
|
405
408
|
}));
|
|
406
409
|
};
|
|
407
410
|
|
|
408
411
|
let prismLoaded;
|
|
409
412
|
|
|
410
|
-
const loadPrism = () => {
|
|
413
|
+
const loadPrism = (location) => {
|
|
411
414
|
if (prismLoaded) return prismLoaded;
|
|
412
415
|
|
|
413
416
|
// Set Prism to manual mode before loading to make sure
|
|
@@ -421,7 +424,7 @@ const loadPrism = () => {
|
|
|
421
424
|
const script = document.createElement('script');
|
|
422
425
|
script.async = 'async';
|
|
423
426
|
script.onload = resolve;
|
|
424
|
-
script.src = `${
|
|
427
|
+
script.src = `${location}/prism.js`;
|
|
425
428
|
document.head.appendChild(script);
|
|
426
429
|
}),
|
|
427
430
|
new Promise(resolve => {
|
|
@@ -442,7 +445,7 @@ const getCodeElement = elem => {
|
|
|
442
445
|
return elem.querySelector('code');
|
|
443
446
|
};
|
|
444
447
|
|
|
445
|
-
export async function formatCodeElement(elem) {
|
|
448
|
+
export async function formatCodeElement(elem, forceVersionBump) {
|
|
446
449
|
const code = getCodeElement(elem);
|
|
447
450
|
|
|
448
451
|
if (code.className.indexOf('language-') === -1) return;
|
|
@@ -450,11 +453,14 @@ export async function formatCodeElement(elem) {
|
|
|
450
453
|
const languageInfo = getLanguageInfo(code);
|
|
451
454
|
const lineNumbers = elem.classList.contains('line-numbers') || code.classList.contains('line-numbers');
|
|
452
455
|
|
|
453
|
-
|
|
456
|
+
// Remove when shield-14201-update-prismjs-1-30 is removed (remove pass-throughs and use prismLocation directly in loadLanguage, loadPrism, and loadPlugin)
|
|
457
|
+
const location = forceVersionBump ? 'https://s.brightspace.com/lib/prismjs/1.30.0' : prismLocation;
|
|
458
|
+
|
|
459
|
+
await loadPrism(location); // must be loaded before loading plugins or languages
|
|
454
460
|
await Promise.all([
|
|
455
|
-
loadLanguage(languageInfo.key),
|
|
456
|
-
loadLanguageAddons(languageInfo.key),
|
|
457
|
-
lineNumbers ? loadPlugin('line-numbers') : null
|
|
461
|
+
loadLanguage(languageInfo.key, location),
|
|
462
|
+
loadLanguageAddons(languageInfo.key, location),
|
|
463
|
+
lineNumbers ? loadPlugin('line-numbers', location) : null
|
|
458
464
|
]);
|
|
459
465
|
|
|
460
466
|
if (!elem.dataset.language && languageInfo.key !== 'plain') elem.dataset.language = languageInfo.desc;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.216.1",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|