@brightspace-ui/core 2.122.0 → 2.122.2
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.
- package/components/dialog/dialog-mixin.js +8 -0
- package/components/dropdown/dropdown-content-mixin.js +8 -0
- package/components/icons/images/tier2/wizard.svg +6 -6
- package/generated/icons/tier2/wizard.js +6 -6
- package/package.json +1 -1
- package/templates/primary-secondary/demo/integration.html +38 -9
|
@@ -142,6 +142,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
|
|
|
142
142
|
|
|
143
143
|
_addHandlers() {
|
|
144
144
|
window.addEventListener('resize', this._updateSize);
|
|
145
|
+
this.addEventListener('touchstart', this._handleTouchStart);
|
|
145
146
|
if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-dialog-content').addEventListener('scroll', this._updateOverflow);
|
|
146
147
|
}
|
|
147
148
|
|
|
@@ -356,6 +357,12 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
|
|
|
356
357
|
this._useNative = false;
|
|
357
358
|
}
|
|
358
359
|
|
|
360
|
+
_handleTouchStart(e) {
|
|
361
|
+
// elements external to the dialog such as primary-secondary template should not be reacting
|
|
362
|
+
// to touchstart events originating inside the dialog or backdrop
|
|
363
|
+
e.stopPropagation();
|
|
364
|
+
}
|
|
365
|
+
|
|
359
366
|
_isCloseAborted() {
|
|
360
367
|
const abortEvent = new CustomEvent('d2l-dialog-before-close', {
|
|
361
368
|
cancelable: true,
|
|
@@ -441,6 +448,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
|
|
|
441
448
|
|
|
442
449
|
_removeHandlers() {
|
|
443
450
|
window.removeEventListener('resize', this._updateSize);
|
|
451
|
+
this.removeEventListener('touchstart', this._handleTouchStart);
|
|
444
452
|
if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-dialog-content').removeEventListener('scroll', this._updateOverflow);
|
|
445
453
|
}
|
|
446
454
|
|
|
@@ -294,6 +294,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
|
294
294
|
|
|
295
295
|
window.addEventListener('resize', this.__onResize);
|
|
296
296
|
this.addEventListener('blur', this.__onAutoCloseFocus, true);
|
|
297
|
+
this.addEventListener('touchstart', this.__onTouchStart);
|
|
297
298
|
document.body.addEventListener('focus', this.__onAutoCloseFocus, true);
|
|
298
299
|
document.body.addEventListener('click', this.__onAutoCloseClick, true);
|
|
299
300
|
this.mediaQueryList = window.matchMedia(`(max-width: ${this.mobileBreakpointOverride - 1}px)`);
|
|
@@ -305,6 +306,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
|
305
306
|
super.disconnectedCallback();
|
|
306
307
|
if (this.mediaQueryList.removeEventListener) this.mediaQueryList.removeEventListener('change', this._handleMobileResize);
|
|
307
308
|
this.removeEventListener('blur', this.__onAutoCloseFocus);
|
|
309
|
+
this.removeEventListener('touchstart', this.__onTouchStart);
|
|
308
310
|
window.removeEventListener('resize', this.__onResize);
|
|
309
311
|
if (document.body) {
|
|
310
312
|
// DE41322: document.body can be null in some scenarios
|
|
@@ -530,6 +532,12 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
|
530
532
|
this.resize();
|
|
531
533
|
}
|
|
532
534
|
|
|
535
|
+
__onTouchStart(e) {
|
|
536
|
+
// elements external to the dropdown content such as primary-secondary template should not be reacting
|
|
537
|
+
// to touchstart events originating inside the dropdown content
|
|
538
|
+
e.stopPropagation();
|
|
539
|
+
}
|
|
540
|
+
|
|
533
541
|
async __openedChanged(newValue) {
|
|
534
542
|
|
|
535
543
|
// DE44538: wait for dropdown content to fully render,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg"
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
2
|
+
<g fill="#494c4e">
|
|
3
|
+
<path d="M18.011 7.985a1.996 1.996 0 1 0 0-3.992 1.996 1.996 0 0 0 0 3.992Z"/>
|
|
4
|
+
<path fill-rule="evenodd" d="M20.935 4.063a1 1 0 0 1-.706-1.7l2-2a.999.999 0 1 1 1.409 1.407l-2 2a1 1 0 0 1-.703.293Zm-2.924-1.068a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v1a1 1 0 0 1-1 .995Zm0 8.984a1 1 0 0 1-1-1v-1a1 1 0 1 1 2 0v1a1 1 0 0 1-1 1Z" clip-rule="evenodd"/>
|
|
5
|
+
<path fill-rule="evenodd" d="M18.011 2.995a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v1a1 1 0 0 1-1 .995Zm0 8.984a1 1 0 0 1-1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1-1 1Zm-3.993-4.991h-1a1 1 0 1 1 0-2h1a1 1 0 1 1 0 2Zm8.982 0h-1a1 1 0 1 1 0-2h1a1 1 0 1 1 0 2Zm-7.984-2.995a1 1 0 0 1-.706-.293l-2-2A1 1 0 0 1 13.725.292l2 2a1 1 0 0 1-.709 1.701ZM23 11.979a1 1 0 0 1-.706-.292l-2-2a1 1 0 0 1 1.412-1.412l2 2A1 1 0 0 1 23 11.979Zm-11.021-.998c.237 0 .465.093.633.261l.145.145a.9.9 0 0 1 0 1.267l-9.088 9.088a.9.9 0 0 1-1.267 0l-.145-.142a.9.9 0 0 1 0-1.267l9.089-9.089a.893.893 0 0 1 .633-.261v-.002Zm0-1.998a2.873 2.873 0 0 0-2.045.846l-9.088 9.09a2.9 2.9 0 0 0 0 4.09l.145.145a2.895 2.895 0 0 0 4.09 0l9.089-9.088a2.9 2.9 0 0 0 0-4.09l-.146-.146a2.872 2.872 0 0 0-2.045-.846v-.001Z" clip-rule="evenodd"/>
|
|
6
|
+
</g>
|
|
7
7
|
</svg>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// auto-generated
|
|
2
|
-
export const val = `<svg xmlns="http://www.w3.org/2000/svg"
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
export const val = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
3
|
+
<g fill="#494c4e">
|
|
4
|
+
<path d="M18.011 7.985a1.996 1.996 0 1 0 0-3.992 1.996 1.996 0 0 0 0 3.992Z"/>
|
|
5
|
+
<path fill-rule="evenodd" d="M20.935 4.063a1 1 0 0 1-.706-1.7l2-2a.999.999 0 1 1 1.409 1.407l-2 2a1 1 0 0 1-.703.293Zm-2.924-1.068a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v1a1 1 0 0 1-1 .995Zm0 8.984a1 1 0 0 1-1-1v-1a1 1 0 1 1 2 0v1a1 1 0 0 1-1 1Z" clip-rule="evenodd"/>
|
|
6
|
+
<path fill-rule="evenodd" d="M18.011 2.995a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v1a1 1 0 0 1-1 .995Zm0 8.984a1 1 0 0 1-1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1-1 1Zm-3.993-4.991h-1a1 1 0 1 1 0-2h1a1 1 0 1 1 0 2Zm8.982 0h-1a1 1 0 1 1 0-2h1a1 1 0 1 1 0 2Zm-7.984-2.995a1 1 0 0 1-.706-.293l-2-2A1 1 0 0 1 13.725.292l2 2a1 1 0 0 1-.709 1.701ZM23 11.979a1 1 0 0 1-.706-.292l-2-2a1 1 0 0 1 1.412-1.412l2 2A1 1 0 0 1 23 11.979Zm-11.021-.998c.237 0 .465.093.633.261l.145.145a.9.9 0 0 1 0 1.267l-9.088 9.088a.9.9 0 0 1-1.267 0l-.145-.142a.9.9 0 0 1 0-1.267l9.089-9.089a.893.893 0 0 1 .633-.261v-.002Zm0-1.998a2.873 2.873 0 0 0-2.045.846l-9.088 9.09a2.9 2.9 0 0 0 0 4.09l.145.145a2.895 2.895 0 0 0 4.09 0l9.089-9.088a2.9 2.9 0 0 0 0-4.09l-.146-.146a2.872 2.872 0 0 0-2.045-.846v-.001Z" clip-rule="evenodd"/>
|
|
7
|
+
</g>
|
|
8
8
|
</svg>
|
|
9
9
|
`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.122.
|
|
3
|
+
"version": "2.122.2",
|
|
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",
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
import '../../../components/collapsible-panel/collapsible-panel.js';
|
|
15
15
|
import '../../../components/collapsible-panel/collapsible-panel-summary-item.js';
|
|
16
16
|
import '../../../components/demo/demo-page.js';
|
|
17
|
+
import '../../../components/dialog/dialog.js';
|
|
17
18
|
import '../../../components/dialog/dialog-fullscreen.js';
|
|
18
19
|
import '../../../components/dropdown/dropdown-button-subtle.js';
|
|
19
20
|
import '../../../components/dropdown/dropdown-content.js';
|
|
@@ -54,6 +55,7 @@
|
|
|
54
55
|
|
|
55
56
|
<d2l-list item-count="50" extend-separators>
|
|
56
57
|
<d2l-list-controls slot="controls" select-all-pages-allowed>
|
|
58
|
+
<d2l-button-icon icon="tier1:gear" id="openMainDialog" text="Open"></d2l-button-icon>
|
|
57
59
|
<d2l-selection-action icon="tier1:plus-default" text="Add"></d2l-selection-action>
|
|
58
60
|
<d2l-selection-action-dropdown text="Move To" requires-selection>
|
|
59
61
|
<d2l-dropdown-menu>
|
|
@@ -195,7 +197,6 @@
|
|
|
195
197
|
</d2l-list-item>
|
|
196
198
|
</d2l-list>
|
|
197
199
|
|
|
198
|
-
|
|
199
200
|
<div style="height: 100px;"></div>
|
|
200
201
|
|
|
201
202
|
<d2l-list item-count="50">
|
|
@@ -341,9 +342,7 @@
|
|
|
341
342
|
</d2l-list-item>
|
|
342
343
|
</d2l-list>
|
|
343
344
|
|
|
344
|
-
|
|
345
|
-
<div slot="secondary" style="padding: 1rem;">
|
|
346
|
-
<d2l-dialog-fullscreen id="dialogFullscreen" title-text="Fullscreen Title">
|
|
345
|
+
<d2l-dialog-fullscreen id="dialogMain" title-text="Dialog Title">
|
|
347
346
|
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
|
|
348
347
|
<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
|
|
349
348
|
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
|
|
@@ -353,14 +352,32 @@
|
|
|
353
352
|
<d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
|
|
354
353
|
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
|
|
355
354
|
</d2l-dialog-fullscreen>
|
|
355
|
+
|
|
356
|
+
<script>
|
|
357
|
+
document.querySelector('#openMainDialog').addEventListener('click', () => {
|
|
358
|
+
document.querySelector('#dialogMain').opened = true;
|
|
359
|
+
});
|
|
360
|
+
document.querySelector('#dialogMain').addEventListener('d2l-dialog-close', (e) => {
|
|
361
|
+
console.log('main dialog action:', e.detail.action);
|
|
362
|
+
});
|
|
363
|
+
</script>
|
|
364
|
+
|
|
365
|
+
</div>
|
|
366
|
+
<div slot="secondary" style="padding: 1rem;">
|
|
367
|
+
|
|
356
368
|
<d2l-collapsible-panel panel-title="Availability" expanded>
|
|
357
369
|
<d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
|
|
358
370
|
<d2l-collapsible-panel-summary-item slot="summary" text="Hidden by special access"></d2l-collapsible-panel-summary-item>
|
|
359
|
-
<d2l-button-icon slot="actions" icon="tier1:gear" id="
|
|
371
|
+
<d2l-button-icon slot="actions" icon="tier1:gear" id="openSecondaryDialog" text="Settings"></d2l-button-icon>
|
|
360
372
|
<d2l-dropdown-more slot="actions">
|
|
361
373
|
<d2l-dropdown-menu>
|
|
362
374
|
<d2l-menu>
|
|
375
|
+
<d2l-menu-item text="Add New"></d2l-menu-item>
|
|
376
|
+
<d2l-menu-item text="Bookmark"></d2l-menu-item>
|
|
363
377
|
<d2l-menu-item text="Duplicate"></d2l-menu-item>
|
|
378
|
+
<d2l-menu-item text="Settings"></d2l-menu-item>
|
|
379
|
+
<d2l-menu-item text="Move"></d2l-menu-item>
|
|
380
|
+
<d2l-menu-item text="Publish"></d2l-menu-item>
|
|
364
381
|
<d2l-menu-item text="Delete"></d2l-menu-item>
|
|
365
382
|
</d2l-menu>
|
|
366
383
|
</d2l-dropdown-menu>
|
|
@@ -397,12 +414,24 @@
|
|
|
397
414
|
</div>
|
|
398
415
|
<d2l-input-textarea label="Extra Text" label-hidden rows="6" value="This is a d2l-input-textarea." style="margin-top: 1rem;"></d2l-input-textarea>
|
|
399
416
|
</d2l-collapsible-panel>
|
|
417
|
+
|
|
418
|
+
<d2l-dialog id="dialogSecondary" title-text="Dialog Title">
|
|
419
|
+
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
|
|
420
|
+
<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
|
|
421
|
+
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
|
|
422
|
+
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
|
|
423
|
+
<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
|
|
424
|
+
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
|
|
425
|
+
<d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
|
|
426
|
+
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
|
|
427
|
+
</d2l-dialog>
|
|
428
|
+
|
|
400
429
|
<script>
|
|
401
|
-
document.querySelector('#
|
|
402
|
-
document.querySelector('#
|
|
430
|
+
document.querySelector('#openSecondaryDialog').addEventListener('click', () => {
|
|
431
|
+
document.querySelector('#dialogSecondary').opened = true;
|
|
403
432
|
});
|
|
404
|
-
document.querySelector('#
|
|
405
|
-
console.log('
|
|
433
|
+
document.querySelector('#dialogSecondary').addEventListener('d2l-dialog-close', (e) => {
|
|
434
|
+
console.log('secondary dialog action:', e.detail.action);
|
|
406
435
|
});
|
|
407
436
|
</script>
|
|
408
437
|
<p>
|