@brightspace-ui/core 3.219.1 → 3.219.3
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.
|
@@ -54,14 +54,6 @@
|
|
|
54
54
|
</template>
|
|
55
55
|
</d2l-demo-snippet>
|
|
56
56
|
|
|
57
|
-
<h2>Button (Tooltip)</h2>
|
|
58
|
-
|
|
59
|
-
<d2l-demo-snippet>
|
|
60
|
-
<template>
|
|
61
|
-
<d2l-button tooltip="Optional tooltip text">Normal Button</d2l-button>
|
|
62
|
-
</template>
|
|
63
|
-
</d2l-demo-snippet>
|
|
64
|
-
|
|
65
57
|
</d2l-demo-page>
|
|
66
58
|
|
|
67
59
|
<script>
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import '../button/button-subtle.js';
|
|
2
|
-
import { css, html, LitElement
|
|
3
|
-
import { getComposedChildren, isComposedAncestor } from '../../helpers/dom.js';
|
|
2
|
+
import { css, html, LitElement } from 'lit';
|
|
4
3
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
4
|
import { getComposedActiveElement } from '../../helpers/focus.js';
|
|
6
|
-
import { getFlag } from '../../helpers/flags.js';
|
|
7
5
|
import { getUniqueId } from '../../helpers/uniqueId.js';
|
|
8
6
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
7
|
+
import { isComposedAncestor } from '../../helpers/dom.js';
|
|
9
8
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
10
9
|
import { overflowHiddenDeclarations } from '../../helpers/overflow.js';
|
|
11
10
|
import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
|
@@ -94,17 +93,13 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
|
|
|
94
93
|
|
|
95
94
|
this.__transitionAdded = false;
|
|
96
95
|
this.__maxHeight = this.height;
|
|
97
|
-
|
|
98
96
|
this.__baseHeight = 0;
|
|
99
97
|
this.__contentId = getUniqueId();
|
|
100
|
-
this.__contentSlot = null;
|
|
101
98
|
this.__content = null;
|
|
102
99
|
this.__autoExpanded = false;
|
|
103
100
|
this.__shift = false;
|
|
104
101
|
this.__bound_transitionEvents = null;
|
|
105
102
|
|
|
106
|
-
this._observeContentOnly = getFlag('GAUD-8725-more-less-refactor-resizing', true);
|
|
107
|
-
if (!this._observeContentOnly) this._mutationObserver = new MutationObserver(this.__reactToMutationChanges.bind(this));
|
|
108
103
|
this._resizeObserver = new ResizeObserver(this.__reactToChanges.bind(this));
|
|
109
104
|
}
|
|
110
105
|
|
|
@@ -112,7 +107,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
|
|
|
112
107
|
super.disconnectedCallback();
|
|
113
108
|
|
|
114
109
|
this._resizeObserver.disconnect();
|
|
115
|
-
if (!this._observeContentOnly) this._mutationObserver.disconnect();
|
|
116
110
|
|
|
117
111
|
this.shadowRoot.removeEventListener('transitionstart', this.__bound_transitionEvents);
|
|
118
112
|
this.shadowRoot.removeEventListener('transitionend', this.__bound_transitionEvents);
|
|
@@ -124,13 +118,8 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
|
|
|
124
118
|
super.firstUpdated();
|
|
125
119
|
|
|
126
120
|
this.__content = this.shadowRoot.querySelector('.d2l-more-less-content');
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
this._resizeObserver.observe(this.__content);
|
|
130
|
-
} else {
|
|
131
|
-
this.__contentSlot = this.shadowRoot.querySelector('.d2l-more-less-content slot');
|
|
132
|
-
this.__startObserving();
|
|
133
|
-
}
|
|
121
|
+
this.__reactToChanges();
|
|
122
|
+
this._resizeObserver.observe(this.__content);
|
|
134
123
|
|
|
135
124
|
this.__bound_transitionEvents = this.__transitionEvents.bind(this);
|
|
136
125
|
this.shadowRoot.addEventListener('transitionstart', this.__bound_transitionEvents);
|
|
@@ -146,17 +135,15 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
|
|
|
146
135
|
};
|
|
147
136
|
|
|
148
137
|
// The .force-margin-scroll div is used to force content bottom margin to be included in scrollHeight calculations.
|
|
149
|
-
// The load and slotchange events can be removed when GAUD-8725-more-less-refactor-resizing is removed
|
|
150
138
|
return html`
|
|
151
139
|
<div
|
|
152
140
|
id="${this.__contentId}"
|
|
153
141
|
class=${classMap(contentClasses)}
|
|
154
142
|
style=${styleMap({ maxHeight: `${this.__maxHeight}` })}
|
|
155
143
|
@focusin="${this.__focusIn}"
|
|
156
|
-
@focusout="${this.__focusOut}"
|
|
157
|
-
|
|
158
|
-
<
|
|
159
|
-
${this._observeContentOnly ? html`<div class="force-margin-scroll"></div>` : nothing}
|
|
144
|
+
@focusout="${this.__focusOut}">
|
|
145
|
+
<slot></slot>
|
|
146
|
+
<div class="force-margin-scroll"></div>
|
|
160
147
|
</div>
|
|
161
148
|
<d2l-button-subtle
|
|
162
149
|
class="d2l-more-less-toggle"
|
|
@@ -284,29 +271,11 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
|
|
|
284
271
|
});
|
|
285
272
|
}
|
|
286
273
|
|
|
287
|
-
// Remove when GAUD-8725-more-less-refactor-resizing is removed
|
|
288
|
-
__isOwnMutation(mutation) {
|
|
289
|
-
return mutation.target === this.__content
|
|
290
|
-
&& (mutation.type === 'style' || mutation.type === 'attributes');
|
|
291
|
-
}
|
|
292
|
-
|
|
293
274
|
__reactToChanges() {
|
|
294
275
|
this.__transitionAdded = true;
|
|
295
276
|
this.__adjustToContent();
|
|
296
277
|
}
|
|
297
278
|
|
|
298
|
-
// Remove when GAUD-8725-more-less-refactor-resizing is removed
|
|
299
|
-
__reactToMutationChanges(mutations) {
|
|
300
|
-
if (mutations
|
|
301
|
-
&& Array.isArray(mutations)
|
|
302
|
-
&& mutations.every(this.__isOwnMutation.bind(this))
|
|
303
|
-
) {
|
|
304
|
-
return;
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
this.__reactToChanges();
|
|
308
|
-
}
|
|
309
|
-
|
|
310
279
|
__shrink() {
|
|
311
280
|
this.__transitionAdded = true;
|
|
312
281
|
this.__maxHeight = this.height;
|
|
@@ -314,32 +283,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
|
|
|
314
283
|
this.__content.scrollTo({ top: 0, behavior: 'instant' });
|
|
315
284
|
}
|
|
316
285
|
|
|
317
|
-
// Remove when GAUD-8725-more-less-refactor-resizing is removed
|
|
318
|
-
__startObserving() {
|
|
319
|
-
this._resizeObserver.disconnect();
|
|
320
|
-
this._mutationObserver.disconnect();
|
|
321
|
-
|
|
322
|
-
if (this.__contentSlot) {
|
|
323
|
-
const children = getComposedChildren(this.__contentSlot);
|
|
324
|
-
for (let i = 0; i < children.length; ++i) {
|
|
325
|
-
this._resizeObserver.observe(children[i]);
|
|
326
|
-
this._mutationObserver.observe(children[i], {
|
|
327
|
-
childList: true,
|
|
328
|
-
subtree: true,
|
|
329
|
-
characterData: true,
|
|
330
|
-
attributes: true
|
|
331
|
-
});
|
|
332
|
-
}
|
|
333
|
-
}
|
|
334
|
-
this._resizeObserver.observe(this.__content);
|
|
335
|
-
this._mutationObserver.observe(this.__content, {
|
|
336
|
-
childList: true,
|
|
337
|
-
subtree: true,
|
|
338
|
-
characterData: true,
|
|
339
|
-
attributes: true
|
|
340
|
-
});
|
|
341
|
-
}
|
|
342
|
-
|
|
343
286
|
__toggleOnClick() {
|
|
344
287
|
if (this.expanded) {
|
|
345
288
|
this.__shrink();
|
|
@@ -353,12 +296,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
|
|
|
353
296
|
__transitionEvents(e) {
|
|
354
297
|
this.dispatchEvent(new CustomEvent(e.type, { bubbles: true, composed: true, detail: e.detail }));
|
|
355
298
|
}
|
|
356
|
-
|
|
357
|
-
// Remove when GAUD-8725-more-less-refactor-resizing is removed
|
|
358
|
-
#handleSlotChange() {
|
|
359
|
-
this.__reactToChanges();
|
|
360
|
-
this.__startObserving();
|
|
361
|
-
}
|
|
362
299
|
}
|
|
363
300
|
|
|
364
301
|
customElements.define('d2l-more-less', MoreLess);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.219.
|
|
3
|
+
"version": "3.219.3",
|
|
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",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"chalk": "^5",
|
|
55
55
|
"eslint": "^9",
|
|
56
56
|
"eslint-config-brightspace": "^2.0.0",
|
|
57
|
-
"eslint-plugin-unicorn": "^
|
|
57
|
+
"eslint-plugin-unicorn": "^63",
|
|
58
58
|
"glob-all": "^3",
|
|
59
59
|
"messageformat-validator": "^3.0.0-beta",
|
|
60
60
|
"rollup": "^4",
|