@brightspace-ui/core 3.257.3 → 3.259.0
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.
|
@@ -5,6 +5,7 @@ import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
|
|
|
5
5
|
import { findComposedAncestor, getComposedChildren, isComposedAncestor } from '../../helpers/dom.js';
|
|
6
6
|
import { getComposedActiveElement, getFirstFocusableDescendant, getFirstFocusableRelative, getNextFocusable, isFocusable } from '../../helpers/focus.js';
|
|
7
7
|
import { classMap } from 'lit/directives/class-map.js';
|
|
8
|
+
import { getFlag } from '../../helpers/flags.js';
|
|
8
9
|
import { getUniqueId } from '../../helpers/uniqueId.js';
|
|
9
10
|
import { html } from 'lit';
|
|
10
11
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
@@ -25,6 +26,8 @@ const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
|
25
26
|
const abortAction = 'abort';
|
|
26
27
|
const defaultMargin = { top: 75, right: 30, bottom: 30, left: 30 };
|
|
27
28
|
|
|
29
|
+
const closeDialogWhenDisconnectedFlag = getFlag('GAUD-10113-close-dialog-when-disconnected', true);
|
|
30
|
+
|
|
28
31
|
export const DialogMixin = superclass => class extends superclass {
|
|
29
32
|
|
|
30
33
|
static get properties() {
|
|
@@ -107,6 +110,11 @@ export const DialogMixin = superclass => class extends superclass {
|
|
|
107
110
|
disconnectedCallback() {
|
|
108
111
|
super.disconnectedCallback();
|
|
109
112
|
window.removeEventListener('d2l-mvc-dialog-open', this._handleMvcDialogOpen);
|
|
113
|
+
|
|
114
|
+
// If the dialog is disconnected before the close animation finishes
|
|
115
|
+
if (this.opened && closeDialogWhenDisconnectedFlag) {
|
|
116
|
+
this._handleClose();
|
|
117
|
+
}
|
|
110
118
|
}
|
|
111
119
|
|
|
112
120
|
async updated(changedProperties) {
|
|
@@ -477,7 +485,7 @@ export const DialogMixin = superclass => class extends superclass {
|
|
|
477
485
|
_removeHandlers() {
|
|
478
486
|
window.removeEventListener('resize', this._updateSize);
|
|
479
487
|
this.removeEventListener('touchstart', this._handleTouchStart);
|
|
480
|
-
|
|
488
|
+
this.shadowRoot?.querySelector('.d2l-dialog-content')?.removeEventListener('scroll', this._updateOverflow);
|
|
481
489
|
}
|
|
482
490
|
|
|
483
491
|
_render(inner, info, iframeTopOverride) {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { codeStyles, createHtmlBlockRenderer as createCodeRenderer } from '../../helpers/prism.js';
|
|
3
|
-
import { css, html, LitElement } from 'lit';
|
|
3
|
+
import { css, html, LitElement, unsafeCSS } from 'lit';
|
|
4
|
+
import { _isValidCssSelector } from '../../helpers/internal/css.js';
|
|
4
5
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
6
|
import { createHtmlBlockRenderer as createMathRenderer } from '../../helpers/mathjax.js';
|
|
6
7
|
import { getFocusRingStyles } from '../../helpers/focus.js';
|
|
@@ -9,121 +10,175 @@ import { renderEmbeds } from '../../helpers/embeds.js';
|
|
|
9
10
|
import { requestInstance } from '../../mixins/provider/provider-mixin.js';
|
|
10
11
|
import { tryGet } from '@brightspace-ui/lms-context-provider/client.js';
|
|
11
12
|
|
|
13
|
+
/**
|
|
14
|
+
* A private helper method that should not be used by general consumers
|
|
15
|
+
*/
|
|
16
|
+
export const _generateHtmlBlockContainerStyles = (selector) => {
|
|
17
|
+
if (!_isValidCssSelector(selector)) return;
|
|
18
|
+
|
|
19
|
+
selector = unsafeCSS(selector);
|
|
20
|
+
return css`
|
|
21
|
+
${selector} {
|
|
22
|
+
line-height: 1.47; /* 1.4rem / 0.95rem */
|
|
23
|
+
}
|
|
24
|
+
${selector} > :first-child {
|
|
25
|
+
margin-top: 0;
|
|
26
|
+
}
|
|
27
|
+
${selector} > :last-child {
|
|
28
|
+
margin-bottom: 0;
|
|
29
|
+
}
|
|
30
|
+
`;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* A private helper method that should not be used by general consumers
|
|
35
|
+
*/
|
|
36
|
+
export const _generateHtmlBlockRootStyles = (selector) => {
|
|
37
|
+
if (!_isValidCssSelector(selector)) return;
|
|
38
|
+
|
|
39
|
+
selector = unsafeCSS(selector);
|
|
40
|
+
return css`
|
|
41
|
+
${selector} {
|
|
42
|
+
overflow-wrap: break-word;
|
|
43
|
+
overflow-x: auto;
|
|
44
|
+
overflow-y: hidden;
|
|
45
|
+
text-align: start;
|
|
46
|
+
}
|
|
47
|
+
`;
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* A private helper method that should not be used by general consumers
|
|
52
|
+
*/
|
|
53
|
+
export const _generateHtmlBlockContentStyles = (selector) => {
|
|
54
|
+
if (!selector) selector = '';
|
|
55
|
+
else if (!_isValidCssSelector(selector)) return;
|
|
56
|
+
|
|
57
|
+
selector = unsafeCSS(selector);
|
|
58
|
+
return css`
|
|
59
|
+
${selector} h1,
|
|
60
|
+
${selector} h2,
|
|
61
|
+
${selector} h3,
|
|
62
|
+
${selector} h4,
|
|
63
|
+
${selector} h5,
|
|
64
|
+
${selector} h6,
|
|
65
|
+
${selector} b,
|
|
66
|
+
${selector} strong,
|
|
67
|
+
${selector} b *,
|
|
68
|
+
${selector} strong * {
|
|
69
|
+
font-weight: bold;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
${selector} h1 {
|
|
73
|
+
font-size: 2em;
|
|
74
|
+
line-height: 1;
|
|
75
|
+
margin: 21px 0;
|
|
76
|
+
}
|
|
77
|
+
${selector} h2 {
|
|
78
|
+
font-size: 1.5em;
|
|
79
|
+
line-height: 1;
|
|
80
|
+
margin: 20px 0;
|
|
81
|
+
}
|
|
82
|
+
${selector} h3 {
|
|
83
|
+
font-size: 1.2em;
|
|
84
|
+
line-height: 1;
|
|
85
|
+
margin: 19px 0;
|
|
86
|
+
}
|
|
87
|
+
${selector} h4 {
|
|
88
|
+
font-size: 1em;
|
|
89
|
+
line-height: 1.05;
|
|
90
|
+
margin: 21px 0;
|
|
91
|
+
}
|
|
92
|
+
${selector} h5 {
|
|
93
|
+
font-size: 0.83em;
|
|
94
|
+
line-height: 1;
|
|
95
|
+
margin: 22px 0;
|
|
96
|
+
}
|
|
97
|
+
${selector} h6 {
|
|
98
|
+
font-size: 0.67em;
|
|
99
|
+
line-height: 1;
|
|
100
|
+
margin: 25px 0;
|
|
101
|
+
}
|
|
102
|
+
${selector} pre {
|
|
103
|
+
font-family: Monospace;
|
|
104
|
+
font-size: 13px;
|
|
105
|
+
margin: 13px 0;
|
|
106
|
+
}
|
|
107
|
+
${selector} p {
|
|
108
|
+
margin: 0.5em 0 1em 0;
|
|
109
|
+
}
|
|
110
|
+
${selector} ul,
|
|
111
|
+
${selector} ol {
|
|
112
|
+
list-style-position: outside;
|
|
113
|
+
margin: 1em 0;
|
|
114
|
+
padding-inline-start: 3em;
|
|
115
|
+
}
|
|
116
|
+
${selector} ul,
|
|
117
|
+
${selector} ul[type="disc"] {
|
|
118
|
+
list-style-type: disc;
|
|
119
|
+
}
|
|
120
|
+
${selector} ul ul,
|
|
121
|
+
${selector} ul ol,
|
|
122
|
+
${selector} ol ul,
|
|
123
|
+
${selector} ol ol {
|
|
124
|
+
margin-bottom: 0;
|
|
125
|
+
margin-top: 0;
|
|
126
|
+
}
|
|
127
|
+
${selector} ul ul,
|
|
128
|
+
${selector} ol ul,
|
|
129
|
+
${selector} ul[type="circle"] {
|
|
130
|
+
list-style-type: circle;
|
|
131
|
+
}
|
|
132
|
+
${selector} ul ul ul,
|
|
133
|
+
${selector} ul ol ul,
|
|
134
|
+
${selector} ol ul ul,
|
|
135
|
+
${selector} ol ol ul,
|
|
136
|
+
${selector} ul[type="square"] {
|
|
137
|
+
list-style-type: square;
|
|
138
|
+
}
|
|
139
|
+
${selector} a,
|
|
140
|
+
${selector} a:visited,
|
|
141
|
+
${selector} a:link,
|
|
142
|
+
${selector} a:active {
|
|
143
|
+
color: var(--d2l-color-celestine, #006fbf);
|
|
144
|
+
cursor: pointer;
|
|
145
|
+
text-decoration: none;
|
|
146
|
+
}
|
|
147
|
+
${selector} a:hover {
|
|
148
|
+
color: var(--d2l-color-celestine-minus-1, #004489);
|
|
149
|
+
text-decoration: underline;
|
|
150
|
+
}
|
|
151
|
+
${selector} a {
|
|
152
|
+
--d2l-focus-ring-offset: 1px;
|
|
153
|
+
--d2l-focus-ring-color: var(--d2l-color-celestine, #006fbf);
|
|
154
|
+
}
|
|
155
|
+
${getFocusRingStyles(`${selector} a`, { extraStyles: css`border-radius: 2px; text-decoration: underline;` })}
|
|
156
|
+
@media print {
|
|
157
|
+
${selector} a,
|
|
158
|
+
${selector} a:visited,
|
|
159
|
+
${selector} a:link,
|
|
160
|
+
${selector} a:active {
|
|
161
|
+
color: var(--d2l-color-ferrite, #202122);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
${selector} mjx-assistive-mml math {
|
|
165
|
+
position: absolute;
|
|
166
|
+
}
|
|
167
|
+
`;
|
|
168
|
+
};
|
|
169
|
+
|
|
12
170
|
export const htmlBlockContentStyles = css`
|
|
13
|
-
.d2l-html-block-rendered
|
|
14
|
-
line-height: 1.47; /* 1.4rem / 0.95rem */
|
|
15
|
-
}
|
|
16
|
-
.d2l-html-block-rendered > :first-child {
|
|
17
|
-
margin-top: 0;
|
|
18
|
-
}
|
|
19
|
-
.d2l-html-block-rendered > :last-child {
|
|
20
|
-
margin-bottom: 0;
|
|
21
|
-
}
|
|
171
|
+
${_generateHtmlBlockContainerStyles('.d2l-html-block-rendered')}
|
|
22
172
|
.d2l-html-block-compact {
|
|
23
173
|
font-size: 0.8rem;
|
|
24
174
|
font-weight: 400;
|
|
25
175
|
line-height: 1.5; /* 1.2rem / 0.8rem */
|
|
26
176
|
}
|
|
27
|
-
|
|
28
|
-
font-weight: bold;
|
|
29
|
-
}
|
|
30
|
-
h1 {
|
|
31
|
-
font-size: 2em;
|
|
32
|
-
line-height: 1;
|
|
33
|
-
margin: 21px 0;
|
|
34
|
-
}
|
|
35
|
-
h2 {
|
|
36
|
-
font-size: 1.5em;
|
|
37
|
-
line-height: 1;
|
|
38
|
-
margin: 20px 0;
|
|
39
|
-
}
|
|
40
|
-
h3 {
|
|
41
|
-
font-size: 1.2em;
|
|
42
|
-
line-height: 1;
|
|
43
|
-
margin: 19px 0;
|
|
44
|
-
}
|
|
45
|
-
h4 {
|
|
46
|
-
font-size: 1em;
|
|
47
|
-
line-height: 1.05;
|
|
48
|
-
margin: 21px 0;
|
|
49
|
-
}
|
|
50
|
-
h5 {
|
|
51
|
-
font-size: 0.83em;
|
|
52
|
-
line-height: 1;
|
|
53
|
-
margin: 22px 0;
|
|
54
|
-
}
|
|
55
|
-
h6 {
|
|
56
|
-
font-size: 0.67em;
|
|
57
|
-
line-height: 1;
|
|
58
|
-
margin: 25px 0;
|
|
59
|
-
}
|
|
60
|
-
pre {
|
|
61
|
-
font-family: Monospace;
|
|
62
|
-
font-size: 13px;
|
|
63
|
-
margin: 13px 0;
|
|
64
|
-
}
|
|
65
|
-
p {
|
|
66
|
-
margin: 0.5em 0 1em 0;
|
|
67
|
-
}
|
|
68
|
-
ul, ol {
|
|
69
|
-
list-style-position: outside;
|
|
70
|
-
margin: 1em 0;
|
|
71
|
-
padding-inline-start: 3em;
|
|
72
|
-
}
|
|
177
|
+
${_generateHtmlBlockContentStyles()}
|
|
73
178
|
.d2l-html-block-compact ul,
|
|
74
179
|
.d2l-html-block-compact ol {
|
|
75
180
|
padding-inline-start: 1.5em;
|
|
76
181
|
}
|
|
77
|
-
ul, ul[type="disc"] {
|
|
78
|
-
list-style-type: disc;
|
|
79
|
-
}
|
|
80
|
-
ul ul,
|
|
81
|
-
ul ol,
|
|
82
|
-
ol ul,
|
|
83
|
-
ol ol {
|
|
84
|
-
margin-bottom: 0;
|
|
85
|
-
margin-top: 0;
|
|
86
|
-
}
|
|
87
|
-
ul ul,
|
|
88
|
-
ol ul,
|
|
89
|
-
ul[type="circle"] {
|
|
90
|
-
list-style-type: circle;
|
|
91
|
-
}
|
|
92
|
-
ul ul ul,
|
|
93
|
-
ul ol ul,
|
|
94
|
-
ol ul ul,
|
|
95
|
-
ol ol ul,
|
|
96
|
-
ul[type="square"] {
|
|
97
|
-
list-style-type: square;
|
|
98
|
-
}
|
|
99
|
-
a,
|
|
100
|
-
a:visited,
|
|
101
|
-
a:link,
|
|
102
|
-
a:active {
|
|
103
|
-
color: var(--d2l-color-celestine, #006fbf);
|
|
104
|
-
cursor: pointer;
|
|
105
|
-
text-decoration: none;
|
|
106
|
-
}
|
|
107
|
-
a:hover {
|
|
108
|
-
color: var(--d2l-color-celestine-minus-1, #004489);
|
|
109
|
-
text-decoration: underline;
|
|
110
|
-
}
|
|
111
|
-
a {
|
|
112
|
-
--d2l-focus-ring-offset: 1px;
|
|
113
|
-
--d2l-focus-ring-color: var(--d2l-color-celestine, #006fbf);
|
|
114
|
-
}
|
|
115
|
-
${getFocusRingStyles('a', { extraStyles: css`border-radius: 2px; text-decoration: underline;` })}
|
|
116
|
-
@media print {
|
|
117
|
-
a,
|
|
118
|
-
a:visited,
|
|
119
|
-
a:link,
|
|
120
|
-
a:active {
|
|
121
|
-
color: var(--d2l-color-ferrite, #202122);
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
mjx-assistive-mml math {
|
|
125
|
-
position: absolute;
|
|
126
|
-
}
|
|
127
182
|
${codeStyles}
|
|
128
183
|
`;
|
|
129
184
|
|
|
@@ -174,11 +229,8 @@ class HtmlBlock extends LoadingCompleteMixin(LitElement) {
|
|
|
174
229
|
return [ htmlBlockContentStyles, css`
|
|
175
230
|
:host {
|
|
176
231
|
display: block;
|
|
177
|
-
overflow-wrap: break-word;
|
|
178
|
-
overflow-x: auto;
|
|
179
|
-
overflow-y: hidden;
|
|
180
|
-
text-align: start;
|
|
181
232
|
}
|
|
233
|
+
${_generateHtmlBlockRootStyles(':host')}
|
|
182
234
|
:host([inline]),
|
|
183
235
|
:host([inline]) .d2l-html-block-rendered {
|
|
184
236
|
display: inline;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.259.0",
|
|
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",
|