@brightspace-ui/core 3.216.1 → 3.217.0

package/custom-elements.json

@@ -15603,12 +15603,12 @@
       ],
       "events": [
         {
-          "name": "d2l-template-primary-secondary-resize-start",
-          "description": "Dispatched when a user begins moving the divider."
+          "name": "d2l-iframe-pointer-events-disable",
+          "description": "Dispatched when a user begins moving the divider to instruct iframe owners to disable pointer events."
         },
         {
-          "name": "d2l-template-primary-secondary-resize-end",
-          "description": "Dispatched when a user finishes moving the divider."
+          "name": "d2l-iframe-pointer-events-enable",
+          "description": "Dispatched when a user finishes moving the divider to instruct iframe owners to re-enable pointer events."
         },
         {
           "name": "d2l-template-primary-secondary-form-invalid",

package/package.json

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

package/templates/primary-secondary/README.md

@@ -47,7 +47,7 @@ Note: this template automatically includes `<header>`, `<main>`, `<aside>` and `
 
 ### IFrames
 
-If either of the panels contain an `iframe`, resizing may not work properly. This occurs because `iframe`s prevent the page template from receiving mouse events. To handle situations like these, setting `pointer-events: none` for the `iframe` is recommended during resizing. This can be done by listening for `d2l-template-primary-secondary-resize-start` and `d2l-template-primary-secondary-resize-end` events.
+If either of the panels contain an `iframe`, resizing may not work properly. This occurs because `iframe`s prevent the page template from receiving mouse events. To handle situations like these, setting `pointer-events: none` for the `iframe` is recommended during resizing. This can be done by listening for `d2l-iframe-pointer-events-disable` and `d2l-iframe-pointer-events-enable` events.
 
 <!-- docs: start hidden content -->
 ### Properties
@@ -63,8 +63,8 @@ If either of the panels contain an `iframe`, resizing may not work properly. Thi
 | `width-type` | String, default: `'fullscreen'` | Whether content fills the screen or not. When set to `normal`, the width of the template is constrained to `1230px`. Can be one of `'fullscreen'`, `'normal'`. |
 
 ### Events
-* `d2l-template-primary-secondary-resize-start`: dispatched when a user begins moving the divider
-* `d2l-template-primary-secondary-resize-end`: dispatched when a user finishes moving the divider
+* `d2l-iframe-pointer-events-disable`: dispatched when a user begins moving the divider to instruct iframe owners to disable pointer events
+* `d2l-iframe-pointer-events-enable`: dispatched when a user finishes moving the divider to instruct iframe owners to re-enable pointer events.
 
 ### Slots
 * `header`: page header content

package/templates/primary-secondary/primary-secondary.js

@@ -547,8 +547,8 @@ class MobileTouchResizer extends Resizer {
  * @slot footer - Page footer content
  * @slot primary - Main page content
  * @slot secondary - Supplementary page content
- * @fires d2l-template-primary-secondary-resize-start - Dispatched when a user begins moving the divider.
- * @fires d2l-template-primary-secondary-resize-end - Dispatched when a user finishes moving the divider.
+ * @fires d2l-iframe-pointer-events-disable - Dispatched when a user begins moving the divider to instruct iframe owners to disable pointer events.
+ * @fires d2l-iframe-pointer-events-enable - Dispatched when a user finishes moving the divider to instruct iframe owners to re-enable pointer events.
  * @fires d2l-template-primary-secondary-form-invalid Dispatched when the form fails validation. The error map can be obtained from the detail's errors property.
  * @fires d2l-template-primary-secondary-form-dirty Dispatched whenever any form element fires an input or change event. Can be used to track whether the form is dirty or not.
  * @fires d2l-template-primary-secondary-form-submit Dispatched when the form is submitted. The form data can be obtained from the detail's formData property.
@@ -1262,10 +1262,18 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 	}
 
 	_onPanelResizeEnd() {
+		this.dispatchEvent(new CustomEvent('d2l-iframe-pointer-events-enable', { bubbles: true, composed: true }));
+		/**
+		 * @ignore
+		 */
 		this.dispatchEvent(new CustomEvent('d2l-template-primary-secondary-resize-end', { bubbles: true, composed: true }));
 	}
 
 	_onPanelResizeStart() {
+		this.dispatchEvent(new CustomEvent('d2l-iframe-pointer-events-disable', { bubbles: true, composed: true }));
+		/**
+		 * @ignore
+		 */
 		this.dispatchEvent(new CustomEvent('d2l-template-primary-secondary-resize-start', { bubbles: true, composed: true }));
 	}