@siemens/ix 2.5.0 → 2.6.0

package/components/date-time-card.js.map

@@ -1 +1 @@
-{"file":"date-time-card.js","mappings":";;AAAA,MAAM,eAAe,GAAG,y+CAAy+C,CAAC;AAClgD,6BAAe,eAAe;;MCoBjB,YAAY;;;;;oCAEQ,SAAS;0BAKV,IAAI;uBAKK,SAAS;;IAExC,WAAW;QACjB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,oBAAoB,EAClB,IAAI,CAAC,oBAAoB,KAAK,SAAS;kBACnC,IAAI,CAAC,oBAAoB;kBACzB,IAAI,CAAC,UAAU;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAChC,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAC5B,4DAAK,KAAK,EAAC,QAAQ,IACjB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EAEN,4DAAK,KAAK,EAAC,WAAW,GAAO,EAE7B,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAa,CACT,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","src/components/date-time-card/date-time-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .card {\n    background-color: var(--theme-menu--background);\n    width: 100%;\n    box-shadow: none;\n    border: none;\n    border-radius: unset;\n    display: flex;\n    flex-direction: column;\n\n    &.standaloneAppearance {\n      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),\n        0 12px 18px 0 rgba(0, 0, 0, 0.1);\n      border-radius: 4px;\n    }\n\n    &.rounded {\n      border-radius: 4px;\n    }\n\n    &.left {\n      border-radius: 4px 0 0 4px;\n      height: 100%;\n    }\n\n    &.right {\n      border-radius: 0 4px 4px 0;\n      height: 100%;\n    }\n\n    .header {\n      padding: $default-space;\n      flex: 0 1 auto;\n    }\n\n    .separator {\n      border: 1px solid var(--theme-datepicker-separator--background);\n      width: 100%;\n      flex: 0 1 auto;\n    }\n\n    .content {\n      padding: 0 $medium-space $medium-space $medium-space;\n      flex: 1 1 auto;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /** @internal */\n  @Prop() standaloneAppearance = undefined;\n\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      standaloneAppearance:\n        this.standaloneAppearance !== undefined\n          ? this.standaloneAppearance\n          : this.individual,\n      rounded: this.corners === 'rounded',\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          <div class=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n\n          <div class=\"separator\"></div>\n\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"date-time-card.js","mappings":";;AAAA,MAAM,eAAe,GAAG,g+CAAg+C,CAAC;AACz/C,6BAAe,eAAe;;MCoBjB,YAAY;;;;;;0BAOO,IAAI;uBAKK,SAAS;;IAExC,WAAW;;QACjB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,oBAAoB,EAAE,MAAA,IAAI,CAAC,oBAAoB,mCAAI,IAAI,CAAC,UAAU;YAClE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAChC,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAC5B,4DAAK,KAAK,EAAC,QAAQ,IACjB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EAEN,4DAAK,KAAK,EAAC,WAAW,GAAO,EAE7B,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAa,CACT,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","src/components/date-time-card/date-time-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .card {\n    background-color: var(--theme-menu--background);\n    width: 100%;\n    box-shadow: none;\n    border: none;\n    border-radius: unset;\n    display: flex;\n    flex-direction: column;\n\n    &.standaloneAppearance {\n      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),\n        0 12px 18px 0 rgba(0, 0, 0, 0.1);\n      border-radius: 4px;\n    }\n\n    &.rounded {\n      border-radius: 4px;\n    }\n\n    &.left {\n      border-radius: 4px 0 0 4px;\n      height: 100%;\n    }\n\n    &.right {\n      border-radius: 0 4px 4px 0;\n      height: 100%;\n    }\n\n    .header {\n      padding: $default-space;\n      flex: 0 1 auto;\n    }\n\n    .separator {\n      border: 1px solid var(--theme-datepicker-separator--background);\n      width: 100%;\n      flex: 0 1 auto;\n    }\n\n    .content {\n      padding: 0 $default-space $default-space $default-space;\n      flex: 1 1 auto;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /** @internal */\n  @Prop() standaloneAppearance?: boolean;\n\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      standaloneAppearance: this.standaloneAppearance ?? this.individual,\n      rounded: this.corners === 'rounded',\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          <div class=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n\n          <div class=\"separator\"></div>\n\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/divider.js

@@ -10,7 +10,7 @@ const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLEleme
         this.__attachShadow();
     }
     render() {
-        return h(Host, { key: 'c86675e3fc86e702df2e59447d57bfcd6a5f80ba' });
+        return h(Host, { key: '1b2bc210e67cb0e1b5421a1f792feea56b7fec55' });
     }
     static get style() { return IxDividerStyle0; }
 }, [1, "ix-divider"]);

package/components/dropdown-controller.js

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 function hasDropdownItemWrapperImplemented(item) {
-    return (item &&
+    return (item !== null &&
         item.getDropdownItemElement !== undefined &&
         typeof item.getDropdownItemElement === 'function');
 }
@@ -27,7 +27,24 @@ class DropdownController {
         }
     }
     disconnected(dropdown) {
-        this.dropdowns.delete(dropdown.getId());
+        const id = dropdown.getId();
+        this.removeFromSubmenuIds(id);
+        this.dropdowns.delete(id);
+    }
+    removeFromSubmenuIds(id) {
+        this.dropdowns.forEach((dropdown) => {
+            const submenuIds = this.submenuIds[dropdown.getId()];
+            if (submenuIds) {
+                const index = submenuIds.indexOf(id);
+                if (index > -1) {
+                    submenuIds.splice(index, 1);
+                }
+            }
+        });
+        delete this.submenuIds[id];
+    }
+    getDropdownById(id) {
+        return this.dropdowns.get(id);
     }
     discoverSubmenus() {
         this.dropdowns.forEach((dropdown) => {
@@ -35,7 +52,8 @@ class DropdownController {
         });
     }
     present(dropdown) {
-        if (!dropdown.isPresent() && dropdown.willPresent()) {
+        var _a;
+        if (!dropdown.isPresent() && ((_a = dropdown.willPresent) === null || _a === void 0 ? void 0 : _a.call(dropdown))) {
             this.submenuIds[dropdown.getId()] = dropdown.getAssignedSubmenuIds();
             dropdown.present();
         }
@@ -43,11 +61,15 @@ class DropdownController {
     dismissChildren(uid) {
         const childIds = this.submenuIds[uid] || [];
         for (const id of childIds) {
-            this.dismiss(this.dropdowns.get(id));
+            const dropdown = this.dropdowns.get(id);
+            if (dropdown) {
+                this.dismiss(dropdown);
+            }
         }
     }
     dismiss(dropdown) {
-        if (dropdown.isPresent() && dropdown.willDismiss()) {
+        var _a;
+        if (dropdown.isPresent() && ((_a = dropdown.willDismiss) === null || _a === void 0 ? void 0 : _a.call(dropdown))) {
             this.dismissChildren(dropdown.getId());
             dropdown.dismiss();
             delete this.submenuIds[dropdown.getId()];
@@ -127,14 +149,8 @@ class DropdownController {
         });
     }
 }
-const addDisposableEventListener = (element, eventType, callback) => {
-    element.addEventListener(eventType, callback);
-    return () => {
-        element.removeEventListener(eventType, callback);
-    };
-};
 const dropdownController = new DropdownController();
 
-export { addDisposableEventListener as a, dropdownController as d, hasDropdownItemWrapperImplemented as h };
+export { dropdownController as d, hasDropdownItemWrapperImplemented as h };
 
 //# sourceMappingURL=dropdown-controller.js.map

package/components/dropdown-controller.js.map

@@ -1 +1 @@
-{"file":"dropdown-controller.js","mappings":"AAAA;;;;;;;;SA8BgB,iCAAiC,CAC/C,IAAa;IAEb,QACE,IAAI;QACH,IAA4B,CAAC,sBAAsB,KAAK,SAAS;QAClE,OAAQ,IAA4B,CAAC,sBAAsB,KAAK,UAAU,EAC1E;AACJ,CAAC;AAQD,MAAM,kBAAkB;IAAxB;QACU,cAAS,GAAmC,IAAI,GAAG,EAGxD,CAAC;QACI,eAAU,GAAe,EAAE,CAAC;QAE5B,2BAAsB,GAAG,KAAK,CAAC;KAgJxC;IA9IC,SAAS,CAAC,QAA2B;QACnC,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE;YAChC,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC5B;QACD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC;QAE/C,IAAI,QAAQ,CAAC,mBAAmB,EAAE;YAChC,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;KACF;IAED,YAAY,CAAC,QAA2B;QACtC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;KACzC;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ;YAC9B,QAAQ,CAAC,eAAe,EAAE,CAAC;SAC5B,CAAC,CAAC;KACJ;IAED,OAAO,CAAC,QAA2B;QACjC,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,IAAI,QAAQ,CAAC,WAAW,EAAE,EAAE;YACnD,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAC;YACrE,QAAQ,CAAC,OAAO,EAAE,CAAC;SACpB;KACF;IAED,eAAe,CAAC,GAAW;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;QAC5C,KAAK,MAAM,EAAE,IAAI,QAAQ,EAAE;YACzB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;SACtC;KACF;IAED,OAAO,CAAC,QAA2B;QACjC,IAAI,QAAQ,CAAC,SAAS,EAAE,IAAI,QAAQ,CAAC,WAAW,EAAE,EAAE;YAClD,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;YACvC,QAAQ,CAAC,OAAO,EAAE,CAAC;YACnB,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;SAC1C;KACF;IAED,UAAU,CACR,uBAAiC,EAAE,EACnC,sBAAsB,GAAG,KAAK;QAE9B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ;YAC9B,MAAM,cAAc,GAClB,QAAQ,CAAC,aAAa,KAAK,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,KAAK,CAAC;YAE1E,MAAM,YAAY,GAAG,oBAAoB,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;YACrE,MAAM,IAAI,GAAG,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,IAAI,GAAG,EAAU,CAAC,CAAC;YAEzE,IAAI,oBAAoB,CAAC,MAAM,GAAG,CAAC,IAAI,sBAAsB,EAAE;gBAC7D,IAAI,mBAAmB,GAAG,KAAK,CAAC;gBAEhC,oBAAoB,CAAC,OAAO,CAAC,CAAC,EAAE;oBAC9B,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;wBAChB,mBAAmB,GAAG,IAAI,CAAC;wBAC3B,OAAO;qBACR;iBACF,CAAC,CAAC;gBAEH,IAAI,CAAC,mBAAmB,EAAE;oBACxB,OAAO;iBACR;aACF;YAED,IAAI,CAAC,YAAY,IAAI,cAAc,EAAE;gBACnC,OAAO;aACR;YAED,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;SACxB,CAAC,CAAC;KACJ;IAED,aAAa,CAAC,GAAW;QACvB,IAAI,IAAI,GAAG,IAAI,CAAC,iBAAiB,CAAC,GAAG,EAAE,IAAI,GAAG,EAAU,CAAC,CAAC;QAC1D,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAEd,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ;YAC9B,IACE,QAAQ,CAAC,aAAa,KAAK,QAAQ;gBACnC,QAAQ,CAAC,aAAa,KAAK,KAAK;gBAChC,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,EAC3B;gBACA,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;aACxB;SACF,CAAC,CAAC;KACJ;IAED,mBAAmB,CAAC,YAA2B;QAC7C,KAAK,IAAI,WAAW,IAAI,YAAY,EAAE;YACpC,IAAI,WAAW,YAAY,WAAW,EAAE;gBACtC,IAAI,WAAW,CAAC,YAAY,CAAC,0BAA0B,CAAC,EAAE;oBACxD,OAAO,WAAW,CAAC;iBACpB;aACF;SACF;QAED,OAAO;KACR;IAEO,oBAAoB,CAAC,YAA2B;QACtD,OAAO,CAAC,CAAC,YAAY,CAAC,IAAI,CACxB,CAAC,OAAoB,KAAK,OAAO,CAAC,OAAO,KAAK,aAAa,CAC5D,CAAC;KACH;IAEO,iBAAiB,CAAC,EAAU,EAAE,IAAiB;QACrD,IAAI,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE;YACvB,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;SACd;QAED,KAAK,MAAM,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;YAClD,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;gBACzC,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;aACvE;SACF;QAED,OAAO,IAAI,CAAC;KACb;IAEO,mBAAmB;QACzB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;QAEnC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAmB;YACnD,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC;YAClE,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC;YAEpE,IAAI,CAAC,UAAU,IAAI,CAAC,WAAW,EAAE;gBAC/B,IAAI,CAAC,UAAU,EAAE,CAAC;aACnB;SACF,CAAC,CAAC;QAEH,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAoB;YACtD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBAC1B,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;aAC7C;SACF,CAAC,CAAC;KACJ;CACF;MAEY,0BAA0B,GAAG,CACxC,OAAoC,EACpC,SAAiB,EACjB,QAA4C;IAE5C,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAE9C,OAAO;QACL,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;KAClD,CAAC;AACJ,EAAE;MAgBW,kBAAkB,GAAG,IAAI,kBAAkB;;;;","names":[],"sources":["src/components/dropdown/dropdown-controller.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { IxComponent } from '../utils/internal';\nexport type CloseBehavior = 'inside' | 'outside' | 'both' | boolean;\n\nexport interface DropdownInterface extends IxComponent {\n  closeBehavior: CloseBehavior;\n  discoverAllSubmenus: boolean;\n\n  getAssignedSubmenuIds(): string[];\n  getId(): string;\n\n  discoverSubmenu(): void;\n\n  isPresent(): boolean;\n\n  willPresent?(): boolean;\n  willDismiss?(): boolean;\n\n  present(): void;\n  dismiss(): void;\n}\n\nexport function hasDropdownItemWrapperImplemented(\n  item: unknown\n): item is DropdownItemWrapper {\n  return (\n    item &&\n    (item as DropdownItemWrapper).getDropdownItemElement !== undefined &&\n    typeof (item as DropdownItemWrapper).getDropdownItemElement === 'function'\n  );\n}\n\nexport interface DropdownItemWrapper {\n  getDropdownItemElement(): Promise<HTMLIxDropdownItemElement>;\n}\n\ntype SubmenuIds = Record<string, string[]>;\n\nclass DropdownController {\n  private dropdowns: Map<string, DropdownInterface> = new Map<\n    string,\n    DropdownInterface\n  >();\n  private submenuIds: SubmenuIds = {};\n\n  private isWindowListenerActive = false;\n\n  connected(dropdown: DropdownInterface) {\n    if (!this.isWindowListenerActive) {\n      this.addOverlayListeners();\n    }\n    this.dropdowns.set(dropdown.getId(), dropdown);\n\n    if (dropdown.discoverAllSubmenus) {\n      this.discoverSubmenus();\n    }\n  }\n\n  disconnected(dropdown: DropdownInterface) {\n    this.dropdowns.delete(dropdown.getId());\n  }\n\n  discoverSubmenus() {\n    this.dropdowns.forEach((dropdown) => {\n      dropdown.discoverSubmenu();\n    });\n  }\n\n  present(dropdown: DropdownInterface) {\n    if (!dropdown.isPresent() && dropdown.willPresent()) {\n      this.submenuIds[dropdown.getId()] = dropdown.getAssignedSubmenuIds();\n      dropdown.present();\n    }\n  }\n\n  dismissChildren(uid: string) {\n    const childIds = this.submenuIds[uid] || [];\n    for (const id of childIds) {\n      this.dismiss(this.dropdowns.get(id));\n    }\n  }\n\n  dismiss(dropdown: DropdownInterface) {\n    if (dropdown.isPresent() && dropdown.willDismiss()) {\n      this.dismissChildren(dropdown.getId());\n      dropdown.dismiss();\n      delete this.submenuIds[dropdown.getId()];\n    }\n  }\n\n  dismissAll(\n    ignoreBehaviorForIds: string[] = [],\n    ignoreRelatedDropdowns = false\n  ) {\n    this.dropdowns.forEach((dropdown) => {\n      const preventClosing =\n        dropdown.closeBehavior === 'inside' || dropdown.closeBehavior === false;\n\n      const shouldIgnore = ignoreBehaviorForIds.includes(dropdown.getId());\n      const path = this.buildComposedPath(dropdown.getId(), new Set<string>());\n\n      if (ignoreBehaviorForIds.length > 0 && ignoreRelatedDropdowns) {\n        let skipRelatedDropdown = false;\n\n        ignoreBehaviorForIds.forEach((id) => {\n          if (path.has(id)) {\n            skipRelatedDropdown = true;\n            return;\n          }\n        });\n\n        if (!skipRelatedDropdown) {\n          return;\n        }\n      }\n\n      if (!shouldIgnore && preventClosing) {\n        return;\n      }\n\n      this.dismiss(dropdown);\n    });\n  }\n\n  dismissOthers(uid: string) {\n    let path = this.buildComposedPath(uid, new Set<string>());\n    path.add(uid);\n\n    this.dropdowns.forEach((dropdown) => {\n      if (\n        dropdown.closeBehavior !== 'inside' &&\n        dropdown.closeBehavior !== false &&\n        !path.has(dropdown.getId())\n      ) {\n        this.dismiss(dropdown);\n      }\n    });\n  }\n\n  pathIncludesTrigger(eventTargets: EventTarget[]) {\n    for (let eventTarget of eventTargets) {\n      if (eventTarget instanceof HTMLElement) {\n        if (eventTarget.hasAttribute('data-ix-dropdown-trigger')) {\n          return eventTarget;\n        }\n      }\n    }\n\n    return;\n  }\n\n  private pathIncludesDropdown(eventTargets: EventTarget[]) {\n    return !!eventTargets.find(\n      (element: HTMLElement) => element.tagName === 'IX-DROPDOWN'\n    );\n  }\n\n  private buildComposedPath(id: string, path: Set<string>): Set<string> {\n    if (this.submenuIds[id]) {\n      path.add(id);\n    }\n\n    for (const ruleKey of Object.keys(this.submenuIds)) {\n      if (this.submenuIds[ruleKey].includes(id)) {\n        this.buildComposedPath(ruleKey, path).forEach((key) => path.add(key));\n      }\n    }\n\n    return path;\n  }\n\n  private addOverlayListeners() {\n    this.isWindowListenerActive = true;\n\n    window.addEventListener('click', (event: PointerEvent) => {\n      const hasTrigger = this.pathIncludesTrigger(event.composedPath());\n      const hasDropdown = this.pathIncludesDropdown(event.composedPath());\n\n      if (!hasTrigger && !hasDropdown) {\n        this.dismissAll();\n      }\n    });\n\n    window.addEventListener('keydown', (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        this.dismissAll([...this.dropdowns.keys()]);\n      }\n    });\n  }\n}\n\nexport const addDisposableEventListener = (\n  element: Element | Window | Document,\n  eventType: string,\n  callback: EventListenerOrEventListenerObject\n) => {\n  element.addEventListener(eventType, callback);\n\n  return () => {\n    element.removeEventListener(eventType, callback);\n  };\n};\n\nexport const addDisposableEventListenerAsArray = (\n  listener: {\n    element: Element | Window | Document;\n    eventType: string;\n    callback: EventListenerOrEventListenerObject;\n  }[]\n) => {\n  const disposables = listener.map(({ callback, element, eventType }) =>\n    addDisposableEventListener(element, eventType, callback)\n  );\n\n  return () => disposables.forEach((dispose) => dispose());\n};\n\nexport const dropdownController = new DropdownController();\n"],"version":3}
+{"file":"dropdown-controller.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown-controller.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { IxComponent } from '../utils/internal';\nexport type CloseBehavior = 'inside' | 'outside' | 'both' | boolean;\n\nexport interface DropdownInterface extends IxComponent {\n  closeBehavior: CloseBehavior;\n  discoverAllSubmenus: boolean;\n\n  getAssignedSubmenuIds(): string[];\n  getId(): string;\n\n  discoverSubmenu(): void;\n\n  isPresent(): boolean;\n\n  willPresent?(): boolean;\n  willDismiss?(): boolean;\n\n  present(): void;\n  dismiss(): void;\n}\n\nexport function hasDropdownItemWrapperImplemented(\n  item: unknown\n): item is DropdownItemWrapper {\n  return (\n    item !== null &&\n    (item as DropdownItemWrapper).getDropdownItemElement !== undefined &&\n    typeof (item as DropdownItemWrapper).getDropdownItemElement === 'function'\n  );\n}\n\nexport interface DropdownItemWrapper {\n  getDropdownItemElement(): Promise<HTMLIxDropdownItemElement>;\n}\n\ntype SubmenuIds = Record<string, string[]>;\n\nclass DropdownController {\n  private readonly dropdowns: Map<string, DropdownInterface> = new Map<\n    string,\n    DropdownInterface\n  >();\n  private submenuIds: SubmenuIds = {};\n\n  private isWindowListenerActive = false;\n\n  connected(dropdown: DropdownInterface) {\n    if (!this.isWindowListenerActive) {\n      this.addOverlayListeners();\n    }\n    this.dropdowns.set(dropdown.getId(), dropdown);\n\n    if (dropdown.discoverAllSubmenus) {\n      this.discoverSubmenus();\n    }\n  }\n\n  disconnected(dropdown: DropdownInterface) {\n    const id = dropdown.getId();\n    this.removeFromSubmenuIds(id);\n    this.dropdowns.delete(id);\n  }\n\n  removeFromSubmenuIds(id: string) {\n    this.dropdowns.forEach((dropdown) => {\n      const submenuIds = this.submenuIds[dropdown.getId()];\n      if (submenuIds) {\n        const index = submenuIds.indexOf(id);\n        if (index > -1) {\n          submenuIds.splice(index, 1);\n        }\n      }\n    });\n\n    delete this.submenuIds[id];\n  }\n\n  getDropdownById(id: string) {\n    return this.dropdowns.get(id);\n  }\n\n  discoverSubmenus() {\n    this.dropdowns.forEach((dropdown) => {\n      dropdown.discoverSubmenu();\n    });\n  }\n\n  present(dropdown: DropdownInterface) {\n    if (!dropdown.isPresent() && dropdown.willPresent?.()) {\n      this.submenuIds[dropdown.getId()] = dropdown.getAssignedSubmenuIds();\n      dropdown.present();\n    }\n  }\n\n  dismissChildren(uid: string) {\n    const childIds = this.submenuIds[uid] || [];\n    for (const id of childIds) {\n      const dropdown = this.dropdowns.get(id);\n      if (dropdown) {\n        this.dismiss(dropdown);\n      }\n    }\n  }\n\n  dismiss(dropdown: DropdownInterface) {\n    if (dropdown.isPresent() && dropdown.willDismiss?.()) {\n      this.dismissChildren(dropdown.getId());\n      dropdown.dismiss();\n      delete this.submenuIds[dropdown.getId()];\n    }\n  }\n\n  dismissAll(\n    ignoreBehaviorForIds: string[] = [],\n    ignoreRelatedDropdowns = false\n  ) {\n    this.dropdowns.forEach((dropdown) => {\n      const preventClosing =\n        dropdown.closeBehavior === 'inside' || dropdown.closeBehavior === false;\n\n      const shouldIgnore = ignoreBehaviorForIds.includes(dropdown.getId());\n      const path = this.buildComposedPath(dropdown.getId(), new Set<string>());\n\n      if (ignoreBehaviorForIds.length > 0 && ignoreRelatedDropdowns) {\n        let skipRelatedDropdown = false;\n\n        ignoreBehaviorForIds.forEach((id) => {\n          if (path.has(id)) {\n            skipRelatedDropdown = true;\n            return;\n          }\n        });\n\n        if (!skipRelatedDropdown) {\n          return;\n        }\n      }\n\n      if (!shouldIgnore && preventClosing) {\n        return;\n      }\n\n      this.dismiss(dropdown);\n    });\n  }\n\n  dismissOthers(uid: string) {\n    let path = this.buildComposedPath(uid, new Set<string>());\n    path.add(uid);\n\n    this.dropdowns.forEach((dropdown) => {\n      if (\n        dropdown.closeBehavior !== 'inside' &&\n        dropdown.closeBehavior !== false &&\n        !path.has(dropdown.getId())\n      ) {\n        this.dismiss(dropdown);\n      }\n    });\n  }\n\n  pathIncludesTrigger(eventTargets: EventTarget[]) {\n    for (let eventTarget of eventTargets) {\n      if (eventTarget instanceof HTMLElement) {\n        if (eventTarget.hasAttribute('data-ix-dropdown-trigger')) {\n          return eventTarget;\n        }\n      }\n    }\n\n    return;\n  }\n\n  private pathIncludesDropdown(eventTargets: EventTarget[]) {\n    return !!eventTargets.find(\n      (element: EventTarget) =>\n        (element as HTMLElement).tagName === 'IX-DROPDOWN'\n    );\n  }\n\n  private buildComposedPath(id: string, path: Set<string>): Set<string> {\n    if (this.submenuIds[id]) {\n      path.add(id);\n    }\n\n    for (const ruleKey of Object.keys(this.submenuIds)) {\n      if (this.submenuIds[ruleKey].includes(id)) {\n        this.buildComposedPath(ruleKey, path).forEach((key) => path.add(key));\n      }\n    }\n\n    return path;\n  }\n\n  private addOverlayListeners() {\n    this.isWindowListenerActive = true;\n\n    window.addEventListener('click', (event: MouseEvent) => {\n      const hasTrigger = this.pathIncludesTrigger(event.composedPath());\n      const hasDropdown = this.pathIncludesDropdown(event.composedPath());\n\n      if (!hasTrigger && !hasDropdown) {\n        this.dismissAll();\n      }\n    });\n\n    window.addEventListener('keydown', (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        this.dismissAll([...this.dropdowns.keys()]);\n      }\n    });\n  }\n}\n\nexport const dropdownController = new DropdownController();\n"],"version":3}

package/components/dropdown-item.js

@@ -33,15 +33,15 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
             this.icon !== undefined);
     }
     render() {
-        return (h(Host, { key: '2cfd2c1c15e44dd78403e0809382bf07141c73ba', class: {
+        return (h(Host, { key: 'a3bb371da7e04f07da99bcd2e675152cba162c9c', class: {
                 hover: this.hover,
                 'icon-only': this.isIconOnly(),
                 disabled: this.disabled,
                 submenu: this.isSubMenu,
-            }, role: "listitem" }, h("button", { key: 'e60fba707a53859c785ddf20bcda4928d1c80695', type: "button", tabIndex: 0, class: {
+            }, role: "listitem" }, h("button", { key: 'fe8d07d5524ca68d92599f1f67bebf4728e9d55c', type: "button", tabIndex: 0, class: {
                 'dropdown-item': true,
                 'no-checked-field': this.suppressChecked,
-            }, onClick: () => this.emitItemClick() }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { class: "checkmark", name: 'single-check', size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, h("div", { key: '66c35f150fb79f2ad92703c3cb3f6ec6205ff0e0', class: "dropdown-item-text" }, this.label, h("slot", { key: '403f144a8b3d8def9592091445355303f39d2a8f' })), this.isSubMenu ? (h("ix-icon", { name: 'chevron-right-small', class: 'submenu-icon' })) : null)));
+            }, onClick: () => this.emitItemClick() }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { class: "checkmark", name: 'single-check', size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, h("div", { key: '30d9ed8400a979bd463182b1914fb6a13554fcd3', class: "dropdown-item-text" }, this.label, h("slot", { key: 'd69eeb6bdb5633331415cebf3e3170809c2cc291' })), this.isSubMenu ? (h("ix-icon", { name: 'chevron-right-small', class: 'submenu-icon' })) : null)));
     }
     get hostElement() { return this; }
     static get style() { return IxDropdownItemStyle0; }

package/components/dropdown.js

@@ -1,6 +1,22 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { f as flip, i as inline, s as shift, o as offset, a as autoUpdate, c as computePosition } from './floating-ui.dom.esm.js';
-import { d as dropdownController, a as addDisposableEventListener, h as hasDropdownItemWrapperImplemented } from './dropdown-controller.js';
+import { d as dropdownController, h as hasDropdownItemWrapperImplemented } from './dropdown-controller.js';
+import { f as findElement } from './find-element.js';
+
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const addDisposableEventListener = (element, eventType, callback) => {
+    element.addEventListener(eventType, callback);
+    return () => {
+        element.removeEventListener(eventType, callback);
+    };
+};
 
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
@@ -13,14 +29,20 @@ import { d as dropdownController, a as addDisposableEventListener, h as hasDropd
 class ArrowFocusController {
     constructor(items, container, callback) {
         this.wrap = false;
-        this.keyListenerBind = this.keyListener.bind(this);
         this.items = items;
         this.container = container;
         this.callback = callback;
-        this.container.addEventListener('keydown', this.keyListenerBind);
+        this.keyListener = addDisposableEventListener(container, 'keydown', (e) => this.onKeyDown(e));
+    }
+    getActiveIndex() {
+        if (!document.activeElement) {
+            return -1;
+        }
+        return this.items.indexOf(document.activeElement);
     }
-    keyListener(e) {
-        const activeIndex = this.items.indexOf(document.activeElement);
+    onKeyDown(e) {
+        var _a, _b, _c, _d;
+        const activeIndex = this.getActiveIndex();
         if (activeIndex < 0) {
             return;
         }
@@ -28,37 +50,33 @@ class ArrowFocusController {
             case 'ArrowDown':
                 if (activeIndex < this.items.length - 1) {
                     e.preventDefault();
-                    if (this.callback) {
-                        this.callback(activeIndex + 1);
-                    }
+                    (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, activeIndex + 1);
                 }
                 else if (this.wrap) {
                     e.preventDefault();
-                    if (this.callback) {
-                        this.callback(0);
-                    }
+                    (_b = this.callback) === null || _b === void 0 ? void 0 : _b.call(this, 0);
                 }
                 break;
             case 'ArrowUp':
                 {
                     if (activeIndex > 0) {
                         e.preventDefault();
-                        if (this.callback) {
-                            this.callback(activeIndex - 1);
-                        }
+                        (_c = this.callback) === null || _c === void 0 ? void 0 : _c.call(this, activeIndex - 1);
                     }
                     else if (this.wrap && activeIndex === 0) {
                         e.preventDefault();
-                        if (this.callback) {
-                            this.callback(this.items.length - 1);
-                        }
+                        (_d = this.callback) === null || _d === void 0 ? void 0 : _d.call(this, this.items.length - 1);
                     }
                 }
                 break;
         }
     }
     disconnect() {
-        this.container.removeEventListener('keydown', this.keyListenerBind);
+        if (this.keyListener) {
+            this.keyListener();
+        }
+        this.container = undefined;
+        this.callback = undefined;
     }
 }
 
@@ -72,12 +90,12 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         this.__registerHost();
         this.__attachShadow();
         this.showChanged = createEvent(this, "showChanged", 7);
-        this.autoUpdateCleanup = null;
         this.localUId = `dropdown-${sequenceId++}`;
         this.assignedSubmenu = [];
-        this.focusDropdownItemBind = this.focusDropdownItem.bind(this);
         this.itemObserver = new MutationObserver(() => {
-            this.arrowFocusController.items = this.dropdownItems;
+            if (this.arrowFocusController) {
+                this.arrowFocusController.items = this.dropdownItems;
+            }
         });
         this.suppressAutomaticPlacement = false;
         this.show = false;
@@ -91,6 +109,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         this.overwriteDropdownStyle = undefined;
         this.discoverAllSubmenus = false;
         this.ignoreRelatedSubmenu = false;
+        this.suppressOverflowBehavior = false;
     }
     connectedCallback() {
         dropdownController.connected(this);
@@ -107,16 +126,28 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         }
     }
     disconnectedCallback() {
+        var _a;
         dropdownController.dismiss(this);
         dropdownController.disconnected(this);
+        if (this.arrowFocusController) {
+            (_a = this.arrowFocusController) === null || _a === void 0 ? void 0 : _a.disconnect();
+            this.arrowFocusController = undefined;
+        }
+        if (this.itemObserver) {
+            this.itemObserver.disconnect();
+            this.itemObserver = undefined;
+        }
         if (this.disposeClickListener) {
             this.disposeClickListener();
+            this.disposeClickListener = undefined;
         }
         if (this.disposeKeyListener) {
             this.disposeKeyListener();
+            this.disposeKeyListener = undefined;
         }
         if (this.autoUpdateCleanup) {
             this.autoUpdateCleanup();
+            this.autoUpdateCleanup = undefined;
         }
     }
     getAssignedSubmenuIds() {
@@ -161,6 +192,9 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
             }
             dropdownController.dismissOthers(this.getId());
         };
+        if (!this.triggerElement) {
+            return;
+        }
         this.disposeClickListener = addDisposableEventListener(this.triggerElement, 'click', (event) => {
             if (!event.defaultPrevented) {
                 toggleController();
@@ -182,7 +216,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         if (!this.triggerElement) {
             return;
         }
-        this.disposeKeyListener = addDisposableEventListener(this.triggerElement, 'keydown', (event) => {
+        this.disposeKeyListener = addDisposableEventListener(this.triggerElement, 'keydown', ((event) => {
             if (event.key !== 'ArrowDown') {
                 return;
             }
@@ -193,7 +227,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
             setTimeout(() => {
                 this.focusDropdownItem(0);
             });
-        });
+        }));
     }
     async registerListener(element) {
         this.triggerElement = await this.resolveElement(element);
@@ -203,12 +237,12 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         }
     }
     async resolveElement(element) {
-        const el = await this.findElement(element);
+        const el = await findElement(element);
         return this.checkForSubmenuAnchor(el);
     }
     async checkForSubmenuAnchor(element) {
         if (!element) {
-            return null;
+            return undefined;
         }
         if (hasDropdownItemWrapperImplemented(element)) {
             const dropdownItem = await element.getDropdownItemElement();
@@ -221,44 +255,23 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         }
         return element;
     }
-    findElement(element) {
-        if (element instanceof Promise) {
-            return element;
+    async resolveAnchorElement() {
+        if (this.anchor) {
+            this.anchorElement = await this.resolveElement(this.anchor);
         }
-        if (typeof element === 'object') {
-            return Promise.resolve(element);
+        else if (this.trigger) {
+            this.anchorElement = await this.resolveElement(this.trigger);
         }
-        if (typeof element != 'string') {
-            return;
-        }
-        const selector = `#${element}`;
-        return new Promise((resolve) => {
-            if (document.querySelector(selector)) {
-                return resolve(document.querySelector(selector));
-            }
-            const observer = new MutationObserver(() => {
-                if (document.querySelector(selector)) {
-                    resolve(document.querySelector(selector));
-                    observer.disconnect();
-                }
-            });
-            observer.observe(document.body, {
-                childList: true,
-                subtree: true,
-            });
-        });
     }
     async changedShow(newShow) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (newShow) {
-            this.anchorElement = await (this.anchor
-                ? this.resolveElement(this.anchor)
-                : this.resolveElement(this.trigger));
+            await this.resolveAnchorElement();
             if (this.anchorElement) {
                 this.applyDropdownPosition();
             }
-            this.arrowFocusController = new ArrowFocusController(this.dropdownItems, this.dropdownRef, this.focusDropdownItemBind);
-            this.itemObserver.observe(this.dropdownRef, {
+            this.arrowFocusController = new ArrowFocusController(this.dropdownItems, this.hostElement, (index) => this.focusDropdownItem(index));
+            (_a = this.itemObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostElement, {
                 childList: true,
                 subtree: true,
             });
@@ -266,9 +279,9 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         }
         else {
             this.destroyAutoUpdate();
-            (_a = this.arrowFocusController) === null || _a === void 0 ? void 0 : _a.disconnect();
-            this.itemObserver.disconnect();
-            (_b = this.disposeKeyListener) === null || _b === void 0 ? void 0 : _b.call(this);
+            (_b = this.arrowFocusController) === null || _b === void 0 ? void 0 : _b.disconnect();
+            (_c = this.itemObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+            (_d = this.disposeKeyListener) === null || _d === void 0 ? void 0 : _d.call(this);
         }
     }
     changedTrigger(newTriggerValue) {
@@ -277,7 +290,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
     destroyAutoUpdate() {
         if (this.autoUpdateCleanup) {
             this.autoUpdateCleanup();
-            this.autoUpdateCleanup = null;
+            this.autoUpdateCleanup = undefined;
         }
     }
     isAnchorSubmenu() {
@@ -290,26 +303,24 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         return true;
     }
     async applyDropdownPosition() {
+        var _a, _b;
         if (!this.show) {
             return;
         }
         if (!this.anchorElement) {
             return;
         }
-        if (!this.dropdownRef) {
-            return;
-        }
         const isSubmenu = this.isAnchorSubmenu();
         let positionConfig = {
             strategy: this.positioningStrategy,
             middleware: [],
         };
         if (!this.suppressAutomaticPlacement) {
-            positionConfig.middleware.push(flip({ fallbackStrategy: 'initialPlacement' }));
+            (_a = positionConfig.middleware) === null || _a === void 0 ? void 0 : _a.push(flip({ fallbackStrategy: 'initialPlacement' }));
         }
         positionConfig.placement = isSubmenu ? 'right-start' : this.placement;
         positionConfig.middleware = [
-            ...positionConfig.middleware,
+            ...(((_b = positionConfig.middleware) === null || _b === void 0 ? void 0 : _b.filter(Boolean)) || []),
             inline(),
             shift(),
         ];
@@ -317,19 +328,24 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
             positionConfig.middleware.push(offset(this.offset));
         }
         this.destroyAutoUpdate();
-        this.autoUpdateCleanup = autoUpdate(this.anchorElement, this.dropdownRef, async () => {
-            const computeResponse = await computePosition(this.anchorElement, this.dropdownRef, positionConfig);
-            Object.assign(this.dropdownRef.style, {
-                top: '0',
-                left: '0',
-                transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(computeResponse.y)}px)`,
-            });
+        if (!this.anchorElement) {
+            return;
+        }
+        this.autoUpdateCleanup = autoUpdate(this.anchorElement, this.hostElement, async () => {
+            if (this.anchorElement) {
+                const computeResponse = await computePosition(this.anchorElement, this.hostElement, positionConfig);
+                Object.assign(this.hostElement.style, {
+                    top: '0',
+                    left: '0',
+                    transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(computeResponse.y)}px)`,
+                });
+            }
             if (this.overwriteDropdownStyle) {
                 const overwriteStyle = await this.overwriteDropdownStyle({
-                    dropdownRef: this.dropdownRef,
+                    dropdownRef: this.hostElement,
                     triggerRef: this.triggerElement,
                 });
-                Object.assign(this.dropdownRef.style, overwriteStyle);
+                Object.assign(this.hostElement.style, overwriteStyle);
             }
         }, {
             ancestorResize: true,
@@ -339,18 +355,22 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
     }
     focusDropdownItem(index) {
         requestAnimationFrame(() => {
-            var _a;
-            (_a = this.dropdownItems[index]) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('button').focus();
+            var _a, _b;
+            const button = (_b = (_a = this.dropdownItems[index]) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button');
+            if (button) {
+                button.focus();
+            }
         });
     }
     async componentDidLoad() {
+        if (!this.trigger) {
+            return;
+        }
         this.changedTrigger(this.trigger);
     }
     async componentDidRender() {
         await this.applyDropdownPosition();
-        this.anchorElement = await (this.anchor
-            ? this.resolveElement(this.anchor)
-            : this.resolveElement(this.trigger));
+        await this.resolveAnchorElement();
     }
     isTriggerElement(element) {
         const trigger = !!element.hasAttribute('data-ix-dropdown-trigger');
@@ -383,15 +403,15 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         this.applyDropdownPosition();
     }
     render() {
-        return (h(Host, { key: 'a0822930491de50066f777003b05892d9fc9587b', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
+        return (h(Host, { key: 'f0cb7a478c8b8c066a7c163e83cbc101e6f3a5ec', "data-ix-dropdown": this.localUId, class: {
                 'dropdown-menu': true,
                 show: this.show,
-                overflow: true,
+                overflow: !this.suppressOverflowBehavior,
             }, style: {
                 margin: '0',
                 minWidth: '0px',
                 position: this.positioningStrategy,
-            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: '00f8905edd2cfac83a21fbeee7001a4987fc018e', style: { display: 'contents' } }, this.header && h("div", { key: '4ae378c15f844f67c4894bf8ab4c18e502cddceb', class: "dropdown-header" }, this.header), this.show && h("slot", { key: 'bca1aac38def6df5d322b42415236daf61f67865' }))));
+            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: '5431d09d3eb6b08f357ef7202617223ab3b347bf', style: { display: 'contents' } }, this.header && h("div", { key: 'b771273fe7292d3f253690b17955f13bb95ef56a', class: "dropdown-header" }, this.header), this.show && h("slot", { key: '0150080d095cce23717962df423ea6b8a137841e' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -412,6 +432,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         "overwriteDropdownStyle": [16],
         "discoverAllSubmenus": [4, "discover-all-submenus"],
         "ignoreRelatedSubmenu": [4, "ignore-related-submenu"],
+        "suppressOverflowBehavior": [4, "suppress-overflow-behavior"],
         "discoverSubmenu": [64],
         "updatePosition": [64]
     }, [[0, "ix-assign-sub-menu", "cacheSubmenuId"]], {
@@ -432,6 +453,6 @@ function defineCustomElement() {
     } });
 }
 
-export { ArrowFocusController as A, Dropdown as D, defineCustomElement as d };
+export { ArrowFocusController as A, Dropdown as D, addDisposableEventListener as a, defineCustomElement as d };
 
 //# sourceMappingURL=dropdown.js.map