@m3e/drawer-container 1.1.2 → 1.1.4

package/dist/custom-elements.json

@@ -362,15 +362,18 @@
           "members": [
             {
               "kind": "field",
-              "name": "#clickHandler",
+              "name": "#drawerContainerChangeHandler",
               "privacy": "private",
               "readonly": true
             },
             {
               "kind": "field",
-              "name": "#drawerContainerChangeHandler",
+              "name": "#togglingDrawer",
               "privacy": "private",
-              "readonly": true
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
             },
             {
               "kind": "method",
@@ -410,21 +413,12 @@
             },
             {
               "kind": "method",
-              "name": "#handleClick",
-              "privacy": "private",
+              "name": "_onClick",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              }
             },
             {
               "kind": "method",
@@ -436,6 +430,16 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "#toggleDrawer",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "#updateToggle",
@@ -451,6 +455,12 @@
                   "type": {
                     "text": "M3eDrawerContainerElement"
                   }
+                },
+                {
+                  "name": "syncToggle",
+                  "type": {
+                    "text": "boolean"
+                  }
                 }
               ]
             },
@@ -512,8 +522,8 @@
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "ActionElementBase",
+            "package": "@m3e/core"
           },
           "tagName": "m3e-drawer-toggle",
           "customElement": true,
@@ -2249,12 +2259,51 @@
           "description": "Mixin to augment an element with behavior emits a click event on keyboard events.",
           "name": "KeyboardClick",
           "members": [
+            {
+              "kind": "field",
+              "name": "#keyPressed",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "#keyDownHandler",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#keyUpHandler",
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#focusOutHandler",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "#handleKeyUp",

package/dist/index.js

@@ -4,7 +4,7 @@
  * See LICENSE file in the project root for full license text.
  */
 import { unsafeCSS, css, LitElement, html } from 'lit';
-import { DesignToken, hasAssignedNodes, HtmlFor } from '@m3e/core';
+import { DesignToken, hasAssignedNodes, HtmlFor, ActionElementBase } from '@m3e/core';
 import { M3eBreakpointObserver, Breakpoint } from '@m3e/core/layout';
 import { addAriaReferencedId, removeAriaReferencedId } from '@m3e/core/a11y';
 
@@ -703,7 +703,7 @@ __decorate([n({
 })], M3eDrawerContainerElement.prototype, "endDivider", void 0);
 M3eDrawerContainerElement = __decorate([t$1("m3e-drawer-container")], M3eDrawerContainerElement);
 
-var _M3eDrawerToggleElement_instances, _M3eDrawerToggleElement_clickHandler, _M3eDrawerToggleElement_drawerContainerChangeHandler, _M3eDrawerToggleElement_handleClick, _M3eDrawerToggleElement_handleDrawerContainerChange, _M3eDrawerToggleElement_updateToggle;
+var _M3eDrawerToggleElement_instances, _M3eDrawerToggleElement_drawerContainerChangeHandler, _M3eDrawerToggleElement_togglingDrawer, _M3eDrawerToggleElement_handleDrawerContainerChange, _M3eDrawerToggleElement_toggleDrawer, _M3eDrawerToggleElement_updateToggle;
 /**
  * An element, nested within a clickable element, used to toggle the opened state of a drawer.
  *
@@ -728,24 +728,14 @@ var _M3eDrawerToggleElement_instances, _M3eDrawerToggleElement_clickHandler, _M3
  *
  * @tag m3e-drawer-toggle
  */
-let M3eDrawerToggleElement = class M3eDrawerToggleElement extends HtmlFor(LitElement) {
+let M3eDrawerToggleElement = class M3eDrawerToggleElement extends HtmlFor(ActionElementBase) {
   constructor() {
     super(...arguments);
     _M3eDrawerToggleElement_instances.add(this);
     /** @private */
-    _M3eDrawerToggleElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eDrawerToggleElement_instances, "m", _M3eDrawerToggleElement_handleClick).call(this, e));
-    /** @private */
     _M3eDrawerToggleElement_drawerContainerChangeHandler.set(this, () => __classPrivateFieldGet(this, _M3eDrawerToggleElement_instances, "m", _M3eDrawerToggleElement_handleDrawerContainerChange).call(this));
-  }
-  /** @inheritdoc */
-  connectedCallback() {
-    super.connectedCallback();
-    this.parentElement?.addEventListener("click", __classPrivateFieldGet(this, _M3eDrawerToggleElement_clickHandler, "f"));
-  }
-  /** @inheritdoc */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.parentElement?.removeEventListener("click", __classPrivateFieldGet(this, _M3eDrawerToggleElement_clickHandler, "f"));
+    /** @private */
+    _M3eDrawerToggleElement_togglingDrawer.set(this, false);
   }
   /** @inheritdoc */
   attach(control) {
@@ -756,7 +746,7 @@ let M3eDrawerToggleElement = class M3eDrawerToggleElement extends HtmlFor(LitEle
     const container = control.closest("m3e-drawer-container");
     if (container) {
       container.addEventListener("change", __classPrivateFieldGet(this, _M3eDrawerToggleElement_drawerContainerChangeHandler, "f"));
-      __classPrivateFieldGet(this, _M3eDrawerToggleElement_instances, "m", _M3eDrawerToggleElement_updateToggle).call(this, container);
+      __classPrivateFieldGet(this, _M3eDrawerToggleElement_instances, "m", _M3eDrawerToggleElement_updateToggle).call(this, container, true);
     }
   }
   /** @inheritdoc */
@@ -771,36 +761,46 @@ let M3eDrawerToggleElement = class M3eDrawerToggleElement extends HtmlFor(LitEle
     super.detach();
   }
   /** @inheritdoc */
-  render() {
-    return html`<slot></slot>`;
+  _onClick() {
+    __classPrivateFieldGet(this, _M3eDrawerToggleElement_instances, "m", _M3eDrawerToggleElement_toggleDrawer).call(this);
   }
 };
-_M3eDrawerToggleElement_clickHandler = new WeakMap();
 _M3eDrawerToggleElement_drawerContainerChangeHandler = new WeakMap();
+_M3eDrawerToggleElement_togglingDrawer = new WeakMap();
 _M3eDrawerToggleElement_instances = new WeakSet();
-_M3eDrawerToggleElement_handleClick = function _M3eDrawerToggleElement_handleClick(e) {
-  if (!e.defaultPrevented && this.control && this.parentElement) {
+_M3eDrawerToggleElement_handleDrawerContainerChange = function _M3eDrawerToggleElement_handleDrawerContainerChange() {
+  if (this.control && !__classPrivateFieldGet(this, _M3eDrawerToggleElement_togglingDrawer, "f")) {
     const container = this.control.closest("m3e-drawer-container");
     if (container) {
+      __classPrivateFieldGet(this, _M3eDrawerToggleElement_instances, "m", _M3eDrawerToggleElement_updateToggle).call(this, container, true);
+    }
+  }
+};
+_M3eDrawerToggleElement_toggleDrawer = /** @private */
+async function _M3eDrawerToggleElement_toggleDrawer() {
+  if (!this.parentElement || !this.control) {
+    return;
+  }
+  const container = this.control.closest("m3e-drawer-container");
+  if (container) {
+    __classPrivateFieldSet(this, _M3eDrawerToggleElement_togglingDrawer, true, "f");
+    try {
       if (this.control.slot === "start") {
         container.start = !container.start;
       } else if (this.control.slot === "end") {
         container.end = !container.end;
       }
-      __classPrivateFieldGet(this, _M3eDrawerToggleElement_instances, "m", _M3eDrawerToggleElement_updateToggle).call(this, container);
-    }
-  }
-};
-_M3eDrawerToggleElement_handleDrawerContainerChange = function _M3eDrawerToggleElement_handleDrawerContainerChange() {
-  if (this.control) {
-    const container = this.control.closest("m3e-drawer-container");
-    if (container) {
-      __classPrivateFieldGet(this, _M3eDrawerToggleElement_instances, "m", _M3eDrawerToggleElement_updateToggle).call(this, container);
+      if (container.isUpdatePending) {
+        await container.updateComplete;
+      }
+      await __classPrivateFieldGet(this, _M3eDrawerToggleElement_instances, "m", _M3eDrawerToggleElement_updateToggle).call(this, container, false);
+    } finally {
+      __classPrivateFieldSet(this, _M3eDrawerToggleElement_togglingDrawer, false, "f");
     }
   }
 };
 _M3eDrawerToggleElement_updateToggle = /** @private */
-async function _M3eDrawerToggleElement_updateToggle(container) {
+async function _M3eDrawerToggleElement_updateToggle(container, syncToggle) {
   if (!this.parentElement || !this.control) {
     return;
   }
@@ -811,7 +811,7 @@ async function _M3eDrawerToggleElement_updateToggle(container) {
     selected = container.end;
   }
   this.parentElement.ariaExpanded = `${selected}`;
-  if (this.parentElement.hasAttribute("toggle")) {
+  if (syncToggle && this.parentElement.hasAttribute("toggle")) {
     this.parentElement.toggleAttribute("selected", selected);
   }
   if (this.parentElement instanceof LitElement) {
@@ -820,8 +820,6 @@ async function _M3eDrawerToggleElement_updateToggle(container) {
     this.parentElement.ariaPressed = null;
   }
 };
-/** The styles of the element. */
-M3eDrawerToggleElement.styles = css`:host { display: contents; } ::slotted(.material-icons) { font-size: inherit !important; }`;
 M3eDrawerToggleElement = __decorate([t$1("m3e-drawer-toggle")], M3eDrawerToggleElement);
 
 export { M3eDrawerContainerElement, M3eDrawerToggleElement };