@tylertech/forge 2.0.0 → 2.1.0

package/dist/esm/chunks/chunk.XIDZXGD4.js

@@ -0,0 +1,912 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import {
+  ListDropdownAware
+} from "./chunk.ST3R6JEE.js";
+import {
+  CascadingListDropdownAwareFoundation,
+  ListDropdown,
+  isListDropdownOptionType
+} from "./chunk.D4XU5MZN.js";
+import {
+  ListComponent
+} from "./chunk.4UKSUUTX.js";
+import {
+  LIST_CONSTANTS,
+  LIST_ITEM_CONSTANTS
+} from "./chunk.G6FY472A.js";
+import {
+  CircularProgressComponent
+} from "./chunk.EKIW7VYG.js";
+import {
+  LinearProgressComponent
+} from "./chunk.RNPIV3BY.js";
+import {
+  PopupComponent
+} from "./chunk.5EEEKOOK.js";
+import {
+  tylIconArrowRight
+} from "./chunk.GS2AXUCN.js";
+import {
+  IconRegistry
+} from "./chunk.P43Z3YAS.js";
+import {
+  BaseAdapter
+} from "./chunk.KZATVOA6.js";
+import {
+  FoundationProperty
+} from "./chunk.MMIZOYAS.js";
+import {
+  COMPONENT_NAME_PREFIX,
+  CustomElement,
+  ICON_CLASS_NAME
+} from "./chunk.35U3UPDV.js";
+import {
+  attachShadowTemplate,
+  defineCustomElement
+} from "./chunk.K2PCTUVN.js";
+import {
+  ensureChildren
+} from "./chunk.4JURZYE4.js";
+import {
+  coerceBoolean,
+  isArray,
+  isDefined,
+  randomChars
+} from "./chunk.MEFT5FQC.js";
+import {
+  __decorateClass,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.LM5TVNZY.js";
+
+// dist/build/lib/staging/src/menu/menu-constants.ts
+var elementName = `${COMPONENT_NAME_PREFIX}menu`;
+var classes = {
+  POPUP: "forge-menu__popup",
+  MENU: "mdc-menu"
+};
+var selectors = {
+  TOGGLE: `.${COMPONENT_NAME_PREFIX}menu__toggle, [${elementName}-toggle], button, [type=button]`,
+  MENU_LIST: "forge-list"
+};
+var attributes = {
+  OPEN: "open",
+  PLACEMENT: "placement",
+  SELECTED_INDEX: "selected-index",
+  SELECTED_VALUE: "selected-value",
+  DENSE: "dense",
+  ICON_CLASS: "icon-class",
+  PERSIST_SELECTION: "persist-selection",
+  MODE: "mode",
+  SYNC_POPUP_WIDTH: "sync-popup-width",
+  POPUP_CLASSES: "popup-classes",
+  OPTION_LIMIT: "option-limit",
+  OBSERVE_SCROLL: "observe-scroll",
+  OBSERVE_SCROLL_THRESHOLD: "observe-scroll-threshold"
+};
+var events = {
+  SELECT: `${elementName}-select`,
+  OPEN: `${elementName}-open`,
+  CLOSE: `${elementName}-close`,
+  ACTIVE_CHANGE: `${elementName}-active-change`
+};
+var numbers = {
+  CHILD_MOUSE_LEAVE_TIMEOUT: 300,
+  POPUP_MOUSE_LEAVE_TIMEOUT: 500
+};
+var MENU_CONSTANTS = {
+  elementName,
+  classes,
+  selectors,
+  attributes,
+  events,
+  numbers
+};
+
+// dist/build/lib/staging/src/menu/menu-adapter.ts
+var MenuAdapter = class extends BaseAdapter {
+  constructor(component) {
+    super(component);
+    this._childMenus = /* @__PURE__ */ new Map();
+  }
+  getDropdownElement() {
+    var _a, _b;
+    return (_b = (_a = this._listDropdown) == null ? void 0 : _a.dropdownElement) != null ? _b : null;
+  }
+  hasTargetElement() {
+    return !!this._targetElement;
+  }
+  initializeTarget() {
+    this._targetElement = this._component.querySelector(MENU_CONSTANTS.selectors.TOGGLE);
+    if (!this._targetElement) {
+      this._targetElement = this._component.firstElementChild;
+    }
+  }
+  initializeAccessibility(id) {
+    if (!this._targetElement) {
+      return;
+    }
+    this._targetElement.setAttribute("aria-atomic", "true");
+    this._targetElement.setAttribute("aria-live", "assertive");
+    this._targetElement.setAttribute("aria-haspopup", "true");
+    this._targetElement.setAttribute("aria-expanded", "false");
+    if (!this._targetElement.hasAttribute("aria-label")) {
+      this._targetElement.setAttribute("aria-label", this._targetElement.textContent || "");
+    }
+  }
+  addTargetListener(event, callback, bubbles = false) {
+    if (this._targetElement) {
+      this._targetElement.addEventListener(event, callback, bubbles);
+    }
+  }
+  removeTargetListener(event, callback) {
+    if (this._targetElement) {
+      this._targetElement.removeEventListener(event, callback);
+    }
+  }
+  attachMenu(config) {
+    if (this._listDropdown || !this._targetElement) {
+      return;
+    }
+    this._listDropdown = new ListDropdown(this._targetElement, config);
+    this._listDropdown.open();
+    this._targetElement.setAttribute("aria-expanded", "true");
+    this._targetElement.setAttribute("aria-controls", `list-dropdown-popup-${config.id}`);
+  }
+  setOptions(options) {
+    if (this._listDropdown) {
+      this._listDropdown.setOptions(options);
+    }
+  }
+  detachMenu() {
+    if (this._targetElement) {
+      this._targetElement.removeAttribute("aria-activedescendant");
+      this._targetElement.removeAttribute("aria-expanded");
+      this._targetElement.removeAttribute("aria-controls");
+    }
+    if (this._listDropdown) {
+      this._listDropdown.close();
+      this._listDropdown.destroy();
+      this._listDropdown = void 0;
+    }
+  }
+  setActiveOption(index) {
+    var _a;
+    (_a = this._listDropdown) == null ? void 0 : _a.activateOption(index);
+  }
+  activateFirstOption() {
+    var _a;
+    (_a = this._listDropdown) == null ? void 0 : _a.activateFirstOption();
+  }
+  getActiveOptionIndex() {
+    var _a, _b;
+    return (_b = (_a = this._listDropdown) == null ? void 0 : _a.getActiveOptionIndex()) != null ? _b : -1;
+  }
+  focusTarget() {
+    if (this._targetElement) {
+      this._targetElement.focus();
+    }
+  }
+  isTargetFocused() {
+    return document.activeElement === this._targetElement;
+  }
+  updateActiveDescendant(id) {
+    if (!this._targetElement) {
+      return;
+    }
+    if (id) {
+      this._targetElement.setAttribute("aria-activedescendant", id);
+    } else {
+      this._targetElement.removeAttribute("aria-activedescendant");
+    }
+  }
+  addDropdownListener(type, listener) {
+    if (!this._listDropdown || !this._listDropdown.dropdownElement) {
+      return;
+    }
+    this._listDropdown.dropdownElement.addEventListener(type, listener);
+  }
+  isOwnElement(el) {
+    if (!this._targetElement || !this._listDropdown || !this._listDropdown.dropdownElement) {
+      return false;
+    }
+    return this._targetElement.contains(el) || !!this._listDropdown.dropdownElement.contains(el);
+  }
+  propagateKey(key) {
+    var _a;
+    (_a = this._listDropdown) == null ? void 0 : _a.handleKey(key);
+  }
+  proxyKeyboardEventToChild(evt, id) {
+    if (!this.getDropdownElement()) {
+      return;
+    }
+    const openMenu = this._getOpenChildMenu(id);
+    if (openMenu) {
+      openMenu.propagateKeyEvent(evt);
+    }
+  }
+  toggleChildMenu(index, open) {
+    const listItems = this._getListItems();
+    const listItem = listItems[index];
+    const childMenu = listItem.parentElement;
+    if (childMenu && childMenu.tagName.toLowerCase() === MENU_CONSTANTS.elementName) {
+      if (open === void 0) {
+        childMenu.open = !childMenu.open;
+      } else {
+        childMenu.open = open;
+      }
+    }
+  }
+  createChildMenu(index, parentValue, openCb, closeCb, selectCb) {
+    const menu = document.createElement("forge-menu");
+    menu.style.display = "block";
+    menu.addEventListener(MENU_CONSTANTS.events.OPEN, () => {
+      this._childMenus.set(index, menu);
+      openCb(index);
+    });
+    menu.addEventListener(MENU_CONSTANTS.events.CLOSE, () => {
+      this._childMenus.delete(index);
+      closeCb(index);
+    });
+    menu.addEventListener(MENU_CONSTANTS.events.SELECT, (evt) => {
+      evt.stopPropagation();
+      selectCb(__spreadProps(__spreadValues({}, evt.detail), { parentValue }));
+    });
+    return menu;
+  }
+  closeOtherChildMenus(excludeIndex) {
+    const menusToRemove = [];
+    this._childMenus.forEach((menu, index) => {
+      if (index !== excludeIndex) {
+        menu.open = false;
+        menusToRemove.push(index);
+      }
+    });
+    menusToRemove.forEach((index) => this._childMenus.delete(index));
+  }
+  setSelectedValues(values) {
+    var _a;
+    (_a = this._listDropdown) == null ? void 0 : _a.setSelectedValues(values);
+  }
+  _getOpenChildMenu(id) {
+    if (!this.getDropdownElement()) {
+      return null;
+    }
+    const list = this._getOwnList(id);
+    return list ? list.querySelector(`${MENU_CONSTANTS.elementName}[${MENU_CONSTANTS.attributes.OPEN}]`) : null;
+  }
+  _getOwnList(id) {
+    const popup = this.getDropdownElement();
+    if (!popup) {
+      return null;
+    }
+    return popup.querySelector(`${LIST_CONSTANTS.elementName}[id="list-dropdown-list-${id}"]`);
+  }
+  _getListItems() {
+    const popup = this.getDropdownElement();
+    if (!popup) {
+      return [];
+    }
+    const listElement = popup.querySelector(LIST_CONSTANTS.elementName);
+    if (listElement) {
+      return Array.from(listElement.querySelectorAll(LIST_ITEM_CONSTANTS.elementName));
+    }
+    return [];
+  }
+};
+
+// dist/build/lib/staging/src/menu/menu-foundation.ts
+var MenuFoundation = class extends CascadingListDropdownAwareFoundation {
+  constructor(_adapter) {
+    super({
+      popupTimeout: MENU_CONSTANTS.numbers.POPUP_MOUSE_LEAVE_TIMEOUT,
+      targetTimeout: MENU_CONSTANTS.numbers.CHILD_MOUSE_LEAVE_TIMEOUT
+    });
+    this._adapter = _adapter;
+    this._placement = "bottom-start";
+    this._dense = false;
+    this._iconClass = ICON_CLASS_NAME;
+    this._persistSelection = false;
+    this._mode = "click";
+    this._identifier = randomChars();
+    this._clickListener = (evt) => this._onTargetClick(evt);
+    this._blurListener = (evt) => this._onTargetBlur(evt);
+    this._selectListener = (value) => this._handleSelectEvent(value);
+    this._keydownListener = (evt) => this.onKeydown(evt);
+    this._activeChangeListener = (id) => this._onActiveOptionChanged(id);
+  }
+  initialize() {
+    this._adapter.initializeTarget();
+    this._adapter.initializeAccessibility(this._identifier);
+    this._initializeInteractionListeners();
+  }
+  disconnect() {
+    if (this._open) {
+      this._closeDropdown();
+    }
+    this._destroyInteractionListeners();
+  }
+  _applyMode() {
+    if (!this._adapter.hasTargetElement()) {
+      return;
+    }
+    if (this._mode !== "cascade") {
+      this._adapter.addTargetListener("click", this._clickListener);
+    } else {
+      this._attachCascadingListeners();
+    }
+  }
+  _initializeInteractionListeners() {
+    if (!this._adapter.hasTargetElement()) {
+      return;
+    }
+    this._applyMode();
+    this._adapter.addTargetListener("keydown", this._keydownListener, true);
+    this._adapter.addTargetListener("blur", this._blurListener);
+  }
+  _destroyInteractionListeners() {
+    if (!this._adapter.hasTargetElement()) {
+      return;
+    }
+    this._adapter.removeTargetListener("keydown", this._clickListener);
+    this._adapter.removeTargetListener("blur", this._blurListener);
+    this._adapter.removeTargetListener("click", this._clickListener);
+    this._detachCascadingListeners();
+  }
+  _attachCascadingListeners() {
+    this._adapter.addTargetListener("mouseenter", this._targetMouseEnterListener);
+    this._adapter.addTargetListener("mouseleave", this._targetMouseLeaveListener);
+    this._adapter.addDocumentListener("mousemove", this._documentMouseMoveListener);
+  }
+  _detachCascadingListeners() {
+    this._adapter.removeTargetListener("mouseenter", this._targetMouseEnterListener);
+    this._adapter.removeTargetListener("mouseleave", this._targetMouseLeaveListener);
+    this._adapter.removeDocumentListener("mousemove", this._documentMouseMoveListener);
+  }
+  get _nonDividerOptions() {
+    return this._flatOptions.filter((o) => !o.divider);
+  }
+  get _flatOptions() {
+    if (isListDropdownOptionType(this._options, 1 /* Group */)) {
+      return this._options.reduce((previousValue, currentValue) => previousValue.concat(currentValue.options), []);
+    }
+    return this._options;
+  }
+  _onTargetClick(evt) {
+    if (this._open) {
+      this._closeDropdown();
+      return;
+    }
+    this.open = !this._open;
+    if (this._open) {
+      this._adapter.focusTarget();
+    }
+  }
+  _onTargetBlur(evt) {
+    if (this._open) {
+      this._closeDropdown();
+    }
+  }
+  _onActiveOptionChanged(id) {
+    const data = { id };
+    const canSetActiveDescendant = this._adapter.emitHostEvent(MENU_CONSTANTS.events.ACTIVE_CHANGE, data, true, true);
+    if (this._mode !== "cascade" && canSetActiveDescendant) {
+      this._adapter.updateActiveDescendant(id);
+    }
+  }
+  onKeydown(evt) {
+    if (this._childOpen) {
+      if (evt.code === "Escape") {
+        evt.preventDefault();
+        this._adapter.closeOtherChildMenus();
+        this._closeDropdown();
+        return;
+      }
+      this._adapter.proxyKeyboardEventToChild(evt, this._identifier);
+      return;
+    }
+    switch (evt.code) {
+      case "Tab":
+        if (this._open) {
+          this._selectActiveOption();
+        }
+        break;
+      case "Escape":
+        if (this._open) {
+          evt.preventDefault();
+          this._closeDropdown();
+        }
+        break;
+      case "Space":
+        evt.preventDefault();
+        if (this._open) {
+          this._closeDropdown();
+        } else {
+          this._openDropdown();
+        }
+        break;
+      case "Home":
+      case "End":
+        if (this._open) {
+          evt.preventDefault();
+          this._adapter.propagateKey(evt.code);
+        }
+        break;
+      case "Enter":
+        if (!this._open) {
+          return;
+        }
+        evt.stopImmediatePropagation();
+        evt.preventDefault();
+        this._adapter.propagateKey(evt.code);
+        const activeIndex = this._adapter.getActiveOptionIndex();
+        const activeOption = this._nonDividerOptions[activeIndex];
+        if (activeOption && activeOption.options && activeOption.options.length) {
+          this._adapter.toggleChildMenu(activeIndex);
+        }
+        break;
+      case "ArrowUp":
+      case "ArrowDown":
+        if (this._open) {
+          evt.stopImmediatePropagation();
+        }
+        evt.preventDefault();
+        if (!this._open && evt.code === "ArrowDown") {
+          this._openDropdown();
+          this._adapter.activateFirstOption();
+          return;
+        }
+        this._adapter.propagateKey(evt.code);
+        break;
+      case "ArrowLeft":
+        if (this._open) {
+          evt.stopImmediatePropagation();
+        }
+        if (this._mode === "cascade" && this._open) {
+          this._closeDropdown();
+        }
+        break;
+      case "ArrowRight":
+        if (this._open) {
+          evt.stopImmediatePropagation();
+        }
+        if (!this._open) {
+          return;
+        }
+        const hoveredIndex = this._adapter.getActiveOptionIndex();
+        const hoveredOption = this._nonDividerOptions[hoveredIndex];
+        if (hoveredOption && hoveredOption.options) {
+          this._adapter.toggleChildMenu(hoveredIndex, evt.code === "ArrowRight");
+          return;
+        }
+        break;
+    }
+  }
+  async _openMenu() {
+    this._open = true;
+    let options = [];
+    if (typeof this._optionsFactory === "function") {
+      this._loadOptionsAsync();
+      this._options = [];
+    } else {
+      if (!this._options || !this._options.length) {
+        return;
+      }
+      options = this._options;
+    }
+    if (!this._persistSelection) {
+      options.forEach((o) => o.selected = false);
+    }
+    const flatOptions = this._flatOptions;
+    flatOptions.filter((o) => o.icon).forEach((o) => o.leadingIcon = o.icon);
+    const selectedValues = this._persistSelection ? this._getSelectedValues() : [];
+    const config = {
+      id: this._identifier,
+      type: "menu" /* Menu */,
+      options: this._options,
+      selectedValues,
+      iconClass: this._iconClass,
+      dense: this._dense,
+      multiple: false,
+      popupStatic: true,
+      allowBusy: true,
+      asyncStyle: "spinner" /* Spinner */,
+      optionBuilder: this._optionBuilder,
+      optionLimit: this._optionLimit,
+      headerBuilder: this._popupHeaderBuilder,
+      footerBuilder: this._popupFooterBuilder,
+      observeScroll: this._observeScroll,
+      observeScrollThreshold: this._observeScrollThreshold,
+      popupPlacement: this._placement,
+      activeStartIndex: this._mode === "cascade" ? 0 : void 0,
+      popupClasses: [
+        MENU_CONSTANTS.classes.POPUP,
+        MENU_CONSTANTS.classes.MENU,
+        ...this._popupClasses
+      ],
+      syncWidth: this._syncPopupWidth,
+      activeChangeCallback: this._activeChangeListener,
+      selectCallback: this._selectListener,
+      popupOffset: this._popupOffset,
+      cascadingElementFactory: (params) => this._createCascadingElement(params)
+    };
+    this._adapter.setHostAttribute(MENU_CONSTANTS.attributes.OPEN, "");
+    this._adapter.attachMenu(config);
+    if (this._mode === "cascade") {
+      this._adapter.addDropdownListener("mouseenter", this._childPopupMouseEnterListener);
+      this._adapter.addDropdownListener("mouseleave", this._childPopupMouseLeaveListener);
+    }
+    this._adapter.addDropdownListener(MENU_CONSTANTS.events.ACTIVE_CHANGE, (evt) => {
+      this._onActiveOptionChanged(evt.detail.id);
+    });
+    this._adapter.emitHostEvent(MENU_CONSTANTS.events.OPEN);
+  }
+  _closeMenu() {
+    this._open = false;
+    this._childOpen = false;
+    this._adapter.detachMenu();
+    if (this._activeMouseLeaveTimeout !== void 0) {
+      window.clearTimeout(this._activeMouseLeaveTimeout);
+    }
+    this._adapter.removeHostAttribute(MENU_CONSTANTS.attributes.OPEN);
+    this._adapter.emitHostEvent(MENU_CONSTANTS.events.CLOSE);
+  }
+  _loadOptionsAsync() {
+    if (!this._optionsFactory) {
+      if (this._open) {
+        this._closeMenu();
+      }
+      return Promise.resolve();
+    }
+    return Promise.resolve(this._optionsFactory()).then((results) => {
+      if (!this._persistSelection) {
+        results.forEach((o) => o.selected = false);
+      }
+      if (this._open) {
+        if (results && isArray(results) && results.length) {
+          this._options = results;
+          this._adapter.setOptions(results);
+          const selectedValues = this._getSelectedValues();
+          if (selectedValues.length) {
+            this._adapter.setSelectedValues(selectedValues);
+          }
+        } else if (this._open) {
+          this._closeDropdown();
+        }
+      }
+    }).catch((e) => {
+      console.error("An unexpected error ocurred while opening the menu:", e);
+      if (this._open) {
+        this._closeDropdown();
+      }
+    });
+  }
+  _handleSelectEvent(value) {
+    const index = this._nonDividerOptions.findIndex((o) => o.value === value);
+    if (index < 0) {
+      return;
+    }
+    this._selectOptionByIndex(index);
+  }
+  _selectActiveOption() {
+    const index = this._adapter.getActiveOptionIndex();
+    if (index >= 0 && this._nonDividerOptions[index]) {
+      this._selectOptionByIndex(index);
+    }
+  }
+  _selectOptionByIndex(index) {
+    const { options, value } = this._nonDividerOptions[index];
+    if (options) {
+      this._adapter.setActiveOption(index);
+      return;
+    }
+    this._closeDropdown();
+    const data = { index, value };
+    const isCancelled = !this._adapter.emitHostEvent(MENU_CONSTANTS.events.SELECT, data, true, true);
+    if (!isCancelled) {
+      this._selectedValue = this._persistSelection ? value : void 0;
+    }
+  }
+  _getSelectedValues() {
+    const values = this._flatOptions.filter((o) => o.selected).map((o) => o.value);
+    if (this._selectedValue !== void 0) {
+      values.push(this._selectedValue);
+    }
+    return values;
+  }
+  _onCascadingOptionSelected(data) {
+    if (this._persistSelection) {
+      this._selectedValue = data.value;
+    }
+    this._adapter.emitHostEvent(MENU_CONSTANTS.events.SELECT, data);
+    this._closeDropdown();
+  }
+  _onCascadingChildOpen(index) {
+    super._clearMouseLeaveTimeout();
+    this._adapter.closeOtherChildMenus(index);
+    this._childOpen = true;
+    this._adapter.setActiveOption(index);
+  }
+  _onCascadingChildClose() {
+    this._childOpen = false;
+  }
+  _closeDropdown() {
+    this._closeMenu();
+  }
+  _openDropdown() {
+    this._openMenu();
+  }
+  _isOwnElement(element) {
+    return this._adapter.isOwnElement(element);
+  }
+  _createCascadingElement({ index, options, parentValue }) {
+    const menu = this._adapter.createChildMenu(index, parentValue, this._onCascadingChildOpen.bind(this), this._onCascadingChildClose.bind(this), this._onCascadingOptionSelected.bind(this));
+    menu.mode = "cascade";
+    menu.popupOffset = { x: 0, y: -8 };
+    menu.dense = this._dense;
+    menu.placement = "right-start";
+    menu.persistSelection = this._persistSelection;
+    if (this._persistSelection) {
+      menu.selectedValue = this._selectedValue;
+    }
+    menu.options = options;
+    menu.optionBuilder = this._optionBuilder;
+    menu.iconClass = this._iconClass;
+    return menu;
+  }
+  get open() {
+    return this._open;
+  }
+  set open(value) {
+    value = Boolean(value);
+    if (this._open !== value) {
+      this._open = value;
+      if (value) {
+        this._openDropdown();
+      } else {
+        this._closeDropdown();
+      }
+    }
+  }
+  set options(options) {
+    if (typeof options === "function") {
+      this.optionsFactory = options;
+    } else {
+      this.optionsFactory = void 0;
+      this._options = options.map((o) => __spreadValues({}, o));
+      if (this._open) {
+        this._adapter.setOptions(this._options);
+        if (this._persistSelection) {
+          const selectedValues = this._getSelectedValues();
+          if (selectedValues.length) {
+            this._adapter.setSelectedValues(selectedValues);
+          }
+        }
+      }
+    }
+  }
+  get options() {
+    if (!this._options) {
+      return [];
+    }
+    return this._flatOptions.map((o) => __spreadValues({}, o));
+  }
+  set optionsFactory(factory) {
+    this._optionsFactory = factory;
+  }
+  set selectedIndex(value) {
+    const option = this._nonDividerOptions[value];
+    if (option && option.value !== this._selectedValue) {
+      this.selectedValue = option.value;
+    }
+  }
+  get selectedIndex() {
+    return this._selectedValue !== void 0 ? this._nonDividerOptions.findIndex((o) => o.value === this._selectedValue) : -1;
+  }
+  set selectedValue(value) {
+    if (this._selectedValue !== value) {
+      this._selectedValue = value;
+      this._adapter.setSelectedValues(this._selectedValue);
+    }
+  }
+  get selectedValue() {
+    return this._selectedValue;
+  }
+  get placement() {
+    return this._placement;
+  }
+  set placement(value) {
+    if (this._placement !== value) {
+      this._placement = value || "bottom-start";
+      this._adapter.setHostAttribute(MENU_CONSTANTS.attributes.PLACEMENT, this._placement);
+    }
+  }
+  get dense() {
+    return this._dense;
+  }
+  set dense(value) {
+    this._dense = value;
+  }
+  get iconClass() {
+    return this._iconClass;
+  }
+  set iconClass(value) {
+    this._iconClass = value;
+  }
+  get persistSelection() {
+    return this._persistSelection;
+  }
+  set persistSelection(value) {
+    if (this._persistSelection === value) {
+      return;
+    }
+    this._persistSelection = value;
+    this._adapter.toggleHostAttribute(MENU_CONSTANTS.attributes.PERSIST_SELECTION, this._persistSelection);
+    if (!this._persistSelection) {
+      this._flatOptions.forEach((o) => o.selected = false);
+      this._selectedValue = void 0;
+    }
+  }
+  get mode() {
+    return this._mode;
+  }
+  set mode(value) {
+    if (this._mode !== value) {
+      this._mode = value;
+      this._destroyInteractionListeners();
+      this._applyMode();
+      this._adapter.setHostAttribute(MENU_CONSTANTS.attributes.MODE, this._mode);
+    }
+  }
+  get popupOffset() {
+    return this._popupOffset;
+  }
+  set popupOffset(value) {
+    this._popupOffset = value;
+  }
+  get optionBuilder() {
+    return this._optionBuilder;
+  }
+  set optionBuilder(cb) {
+    this._optionBuilder = cb;
+  }
+  get popupElement() {
+    return this._adapter.getDropdownElement();
+  }
+};
+
+// dist/build/lib/staging/src/menu/menu.ts
+var template = "<template><slot></slot></template>";
+var styles = ":host{display:inline-block}:host([hidden]){display:none}";
+var MenuComponent = class extends ListDropdownAware {
+  constructor() {
+    super();
+    IconRegistry.define(tylIconArrowRight);
+    this._foundation = new MenuFoundation(new MenuAdapter(this));
+    attachShadowTemplate(this, template, styles);
+  }
+  static get observedAttributes() {
+    return [
+      MENU_CONSTANTS.attributes.OPEN,
+      MENU_CONSTANTS.attributes.PLACEMENT,
+      MENU_CONSTANTS.attributes.SELECTED_INDEX,
+      MENU_CONSTANTS.attributes.SELECTED_VALUE,
+      MENU_CONSTANTS.attributes.DENSE,
+      MENU_CONSTANTS.attributes.ICON_CLASS,
+      MENU_CONSTANTS.attributes.PERSIST_SELECTION,
+      MENU_CONSTANTS.attributes.MODE,
+      MENU_CONSTANTS.attributes.SYNC_POPUP_WIDTH,
+      MENU_CONSTANTS.attributes.POPUP_CLASSES,
+      MENU_CONSTANTS.attributes.OPTION_LIMIT,
+      MENU_CONSTANTS.attributes.OBSERVE_SCROLL,
+      MENU_CONSTANTS.attributes.OBSERVE_SCROLL_THRESHOLD
+    ];
+  }
+  connectedCallback() {
+    if (this.children.length) {
+      this._foundation.initialize();
+    } else {
+      ensureChildren(this).then(() => this._foundation.initialize());
+    }
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    switch (name) {
+      case MENU_CONSTANTS.attributes.OPEN:
+        this._foundation.open = isDefined(newValue);
+        break;
+      case MENU_CONSTANTS.attributes.PLACEMENT:
+        this._foundation.placement = newValue;
+        break;
+      case MENU_CONSTANTS.attributes.SELECTED_INDEX:
+        this._foundation.selectedIndex = Number(newValue);
+        break;
+      case MENU_CONSTANTS.attributes.SELECTED_VALUE:
+        this._foundation.selectedValue = newValue;
+        break;
+      case MENU_CONSTANTS.attributes.DENSE:
+        this._foundation.dense = coerceBoolean(newValue);
+        break;
+      case MENU_CONSTANTS.attributes.ICON_CLASS:
+        this._foundation.iconClass = newValue;
+        break;
+      case MENU_CONSTANTS.attributes.PERSIST_SELECTION:
+        this.persistSelection = coerceBoolean(newValue);
+        break;
+      case MENU_CONSTANTS.attributes.MODE:
+        this.mode = newValue;
+        break;
+    }
+  }
+  disconnectedCallback() {
+    this._foundation.disconnect();
+  }
+  propagateKeyEvent(evt) {
+    this._foundation.onKeydown(evt);
+  }
+};
+__decorateClass([
+  FoundationProperty()
+], MenuComponent.prototype, "open", 2);
+__decorateClass([
+  FoundationProperty()
+], MenuComponent.prototype, "options", 2);
+__decorateClass([
+  FoundationProperty()
+], MenuComponent.prototype, "selectedIndex", 2);
+__decorateClass([
+  FoundationProperty()
+], MenuComponent.prototype, "selectedValue", 2);
+__decorateClass([
+  FoundationProperty()
+], MenuComponent.prototype, "placement", 2);
+__decorateClass([
+  FoundationProperty()
+], MenuComponent.prototype, "dense", 2);
+__decorateClass([
+  FoundationProperty()
+], MenuComponent.prototype, "iconClass", 2);
+__decorateClass([
+  FoundationProperty()
+], MenuComponent.prototype, "persistSelection", 2);
+__decorateClass([
+  FoundationProperty()
+], MenuComponent.prototype, "mode", 2);
+__decorateClass([
+  FoundationProperty()
+], MenuComponent.prototype, "popupOffset", 2);
+__decorateClass([
+  FoundationProperty()
+], MenuComponent.prototype, "optionBuilder", 2);
+__decorateClass([
+  FoundationProperty({ set: false })
+], MenuComponent.prototype, "popupElement", 2);
+MenuComponent = __decorateClass([
+  CustomElement({
+    name: MENU_CONSTANTS.elementName,
+    dependencies: [
+      PopupComponent,
+      ListComponent,
+      CircularProgressComponent,
+      LinearProgressComponent
+    ]
+  })
+], MenuComponent);
+
+// dist/build/lib/staging/src/menu/index.ts
+function defineMenuComponent() {
+  defineCustomElement(MenuComponent);
+}
+
+export {
+  MENU_CONSTANTS,
+  MenuAdapter,
+  MenuFoundation,
+  MenuComponent,
+  defineMenuComponent
+};
+//# sourceMappingURL=chunk.XIDZXGD4.js.map