@tylertech/forge 2.0.0 → 2.1.0

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

@@ -0,0 +1,1203 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import {
+  SKELETON_CONSTANTS
+} from "./chunk.EL6B2ODN.js";
+import {
+  LIST_CONSTANTS,
+  LIST_ITEM_CONSTANTS
+} from "./chunk.G6FY472A.js";
+import {
+  createVisuallyHiddenElement
+} from "./chunk.PBGL3BRX.js";
+import {
+  getEventPath
+} from "./chunk.EY57VTRF.js";
+import {
+  LINEAR_PROGRESS_CONSTANTS
+} from "./chunk.RNPIV3BY.js";
+import {
+  POPUP_CONSTANTS
+} from "./chunk.5EEEKOOK.js";
+import {
+  tylIconCheckBox,
+  tylIconCheckBoxOutlineBlank
+} from "./chunk.GS2AXUCN.js";
+import {
+  ICON_CONSTANTS,
+  IconRegistry
+} from "./chunk.P43Z3YAS.js";
+import {
+  ICON_CLASS_NAME
+} from "./chunk.35U3UPDV.js";
+import {
+  getShadowElement
+} from "./chunk.K2PCTUVN.js";
+import {
+  addClass,
+  removeAllChildren,
+  removeElement,
+  replaceElement,
+  tryScrollIntoView
+} from "./chunk.4JURZYE4.js";
+import {
+  isDeepEqual,
+  isDefined,
+  isFunction,
+  isNumber,
+  isObject,
+  throttle
+} from "./chunk.MEFT5FQC.js";
+import {
+  __spreadValues
+} from "./chunk.LM5TVNZY.js";
+
+// dist/build/lib/staging/src/list-dropdown/list-dropdown-constants.ts
+var attributes = {
+  POPUP_CLASSES: "popup-classes",
+  OPTION_LIMIT: "option-limit",
+  OBSERVE_SCROLL: "observe-scroll",
+  OBSERVE_SCROLL_THRESHOLD: "observe-scroll-threshold",
+  SYNC_POPUP_WIDTH: "sync-popup-width",
+  CHECKBOX_ELEMENT: "data-list-dropdown-checkbox",
+  DATA_ALLOW_FOCUS: "data-list-dropdown-allow-focus"
+};
+var classes = {
+  GROUP_WRAPPER: "forge-list-dropdown__group-wrapper"
+};
+var LIST_DROPDOWN_CONSTANTS = {
+  attributes,
+  classes
+};
+var DEFAULT_LIST_DROPDOWN_CONFIG = {
+  options: [],
+  syncWidth: false,
+  selectedValues: [],
+  multiple: false
+};
+var ListDropdownType = /* @__PURE__ */ ((ListDropdownType2) => {
+  ListDropdownType2["None"] = "none";
+  ListDropdownType2["Standard"] = "standard";
+  ListDropdownType2["Menu"] = "menu";
+  return ListDropdownType2;
+})(ListDropdownType || {});
+var ListDropdownAsyncStyle = /* @__PURE__ */ ((ListDropdownAsyncStyle2) => {
+  ListDropdownAsyncStyle2["Spinner"] = "spinner";
+  ListDropdownAsyncStyle2["Skeleton"] = "skeleton";
+  return ListDropdownAsyncStyle2;
+})(ListDropdownAsyncStyle || {});
+
+// node_modules/@tylertech/forge-core/esm/events/event-aware.js
+var EventAware = class {
+  constructor() {
+    this._listenerMap = /* @__PURE__ */ new Map();
+  }
+  _emit(type, data) {
+    const listeners = this._listenerMap.get(type);
+    if (listeners && listeners.length) {
+      listeners.forEach((cb) => cb({ type, data }));
+    }
+  }
+  hasListeners(type) {
+    return type ? this._listenerMap.has(type) : this._listenerMap.size > 0;
+  }
+  addListener(type, listener) {
+    if (!this._listenerMap.has(type)) {
+      this._listenerMap.set(type, [listener]);
+    } else {
+      const listeners = this._listenerMap.get(type);
+      if (listeners) {
+        listeners.push(listener);
+      }
+    }
+  }
+  removeListener(type, listener) {
+    const listeners = this._listenerMap.get(type);
+    if (listeners && listeners.length && listeners.includes(listener)) {
+      listeners.splice(listeners.indexOf(listener), 1);
+      if (!listeners.length) {
+        this._listenerMap.delete(type);
+      }
+    }
+  }
+};
+
+// node_modules/@tylertech/forge-core/esm/scroll/scroll-types.js
+var ScrollDirection;
+(function(ScrollDirection2) {
+  ScrollDirection2["Up"] = "up";
+  ScrollDirection2["Down"] = "down";
+  ScrollDirection2["Left"] = "left";
+  ScrollDirection2["Right"] = "right";
+})(ScrollDirection || (ScrollDirection = {}));
+var ScrollEvents;
+(function(ScrollEvents2) {
+  ScrollEvents2["Scroll"] = "scroll";
+  ScrollEvents2["Scrolled"] = "scrolled";
+  ScrollEvents2["ScrolledStart"] = "scrolled-start";
+  ScrollEvents2["ScrolledEnd"] = "scrolled-end";
+})(ScrollEvents || (ScrollEvents = {}));
+
+// node_modules/@tylertech/forge-core/esm/scroll/scroll-axis-observer.js
+var DEFAULT_SCROLL_THROTTLE = 100;
+var ScrollAxisObserver = class extends EventAware {
+  constructor(_element, _config = {}) {
+    super();
+    this._element = _element;
+    this._config = _config;
+    this._axis = "vertical";
+    this._scrollThreshold = 0;
+    this._lastScrollPosition = 0;
+    this._lastScrollTop = 0;
+    this._lastScrollLeft = 0;
+    this._isListening = false;
+    this._initialize();
+  }
+  destroy() {
+    this.stop();
+  }
+  start() {
+    if (!this._isListening) {
+      this._element.addEventListener("scroll", this._scrollListener);
+      this._isListening = true;
+    }
+  }
+  stop() {
+    this._element.removeEventListener("scroll", this._scrollListener);
+    this._isListening = false;
+  }
+  _initialize() {
+    if (this._config.throttle) {
+      const wait = this._config.throttleTime || DEFAULT_SCROLL_THROTTLE;
+      this._scrollListener = throttle(() => this._onScroll(), wait);
+    } else {
+      this._scrollListener = () => this._onScroll();
+    }
+    if (!isDefined(this._config.paused) || !this._config.paused) {
+      this.start();
+    }
+    if (isDefined(this._config.axis)) {
+      this._axis = this._config.axis;
+    }
+    if (isDefined(this._config.scrollThreshold) && isNumber(this._config.scrollThreshold)) {
+      this._scrollThreshold = this._config.scrollThreshold;
+    }
+  }
+  _isScrollAxis() {
+    const isVertical = this._lastScrollTop !== this._element.scrollTop;
+    const isHorizontal = this._lastScrollLeft !== this._element.scrollLeft;
+    return this._axis === "vertical" && isVertical || this._axis === "horizontal" && isHorizontal;
+  }
+  _onScroll() {
+    if (!this._isScrollAxis()) {
+      return;
+    }
+    const position = this.scrollPosition;
+    const direction = this._lastScrollPosition - position < 0 ? this._axis === "vertical" ? ScrollDirection.Down : ScrollDirection.Right : this._axis === "vertical" ? ScrollDirection.Up : ScrollDirection.Left;
+    this._emit(ScrollEvents.Scroll, { direction, position });
+    if (this._lastScrollPosition <= this._scrollThreshold && position > this._scrollThreshold) {
+      this._emit(ScrollEvents.Scrolled, true);
+    } else if (this._lastScrollPosition >= this._scrollThreshold && (this._scrollThreshold > 0 ? position < this._scrollThreshold : position === 0)) {
+      this._emit(ScrollEvents.Scrolled, false);
+    }
+    const scrollStart = Math.round(position - this._scrollThreshold);
+    const scrollEnd = Math.round(this.scrollSize - position);
+    if (this._lastScrollPosition >= this._scrollThreshold && scrollStart <= 0) {
+      this._emit(ScrollEvents.ScrolledStart);
+    } else if (this._lastScrollPosition <= this.scrollSize - this._scrollThreshold && scrollEnd <= this._scrollThreshold) {
+      this._emit(ScrollEvents.ScrolledEnd);
+    }
+    this._lastScrollPosition = position || 0;
+    this._lastScrollTop = this._element.scrollTop || 0;
+    this._lastScrollLeft = this._element.scrollLeft || 0;
+  }
+  get scrollPosition() {
+    return this._axis === "vertical" ? this._element.scrollTop : this._element.scrollLeft;
+  }
+  get isScrolled() {
+    return this.scrollPosition > this._scrollThreshold;
+  }
+  get isScrolledStart() {
+    return this.scrollPosition === 0;
+  }
+  get isScrolledEnd() {
+    return this.scrollPosition === this._element.scrollWidth;
+  }
+  get isScrollable() {
+    if (this._axis === "vertical") {
+      return this._element.scrollHeight > this._element.clientHeight;
+    }
+    return this._element.scrollWidth > this._element.clientWidth;
+  }
+  get scrollSize() {
+    return (this._axis === "vertical" ? this._element.scrollHeight : this._element.scrollWidth) - this.elementSize;
+  }
+  get elementSize() {
+    return this._axis === "vertical" ? this._element.clientHeight : this._element.clientWidth;
+  }
+  setScrollPosition(position) {
+    if (this._axis === "vertical") {
+      this._element.scrollTop = position;
+    } else {
+      this._element.scrollLeft = position;
+    }
+  }
+};
+
+// dist/build/lib/staging/src/list-dropdown/list-dropdown-utils.ts
+function createDropdown(config, targetElement) {
+  const dropdownElement = createPopupDropdown(config, targetElement);
+  const dropdownId = `list-dropdown-popup-${config.id}`;
+  dropdownElement.addEventListener("mousedown", (evt) => {
+    const composedPath = getEventPath(evt);
+    const isFromCustomTemplate = composedPath.find((el) => el.nodeType === 1 && el.hasAttribute(LIST_DROPDOWN_CONSTANTS.attributes.DATA_ALLOW_FOCUS));
+    if (isFromCustomTemplate) {
+      return;
+    }
+    const isWithinDropdownElement = composedPath.find((el) => el.id === dropdownId || el.id === config.id);
+    if (isWithinDropdownElement) {
+      evt.preventDefault();
+    }
+  });
+  switch (config.type) {
+    case "menu" /* Menu */:
+      dropdownElement.setAttribute("role", "menu");
+      dropdownElement.setAttribute("aria-orientation", "vertical");
+      break;
+    default:
+      dropdownElement.setAttribute("role", "listbox");
+  }
+  if (config.id) {
+    dropdownElement.id = dropdownId;
+  }
+  if (config.popupClasses) {
+    addClass(config.popupClasses, dropdownElement);
+  }
+  return dropdownElement;
+}
+function createPopupDropdown(config, targetElement) {
+  const popupElement = document.createElement(POPUP_CONSTANTS.elementName);
+  popupElement.targetElement = targetElement;
+  popupElement.placement = config.popupPlacement || "bottom-start";
+  popupElement.manageFocus = false;
+  popupElement.static = !!config.popupStatic;
+  if (config.popupOffset) {
+    popupElement.offset = config.popupOffset;
+  }
+  switch (config.type) {
+    case "menu" /* Menu */:
+      popupElement.animationType = "menu" /* Menu */;
+      break;
+    case "none" /* None */:
+      popupElement.animationType = "none" /* None */;
+      break;
+    default:
+      popupElement.animationType = "dropdown" /* Dropdown */;
+  }
+  return popupElement;
+}
+function createList(config) {
+  const listElement = document.createElement(LIST_CONSTANTS.elementName);
+  listElement.id = `list-dropdown-list-${config.id}`;
+  listElement.propagateClick = false;
+  return listElement;
+}
+function createListItems(config, listElement, options) {
+  const groups = getOptionsByGroup(options || config.options);
+  const limitOptions = config.optionLimit ? true : false;
+  let optionLimit = config.optionLimit || 0;
+  let optionIndex = 0;
+  for (const group of groups) {
+    let optionParent = listElement;
+    if (group.builder && typeof group.builder === "function") {
+      const headerElement = group.builder(group);
+      if (headerElement) {
+        const groupWrapper = document.createElement("div");
+        groupWrapper.classList.add(LIST_DROPDOWN_CONSTANTS.classes.GROUP_WRAPPER);
+        optionParent = groupWrapper;
+        groupWrapper.appendChild(headerElement);
+        listElement.appendChild(groupWrapper);
+      }
+    } else if (group.text) {
+      const groupWrapper = document.createElement("div");
+      groupWrapper.classList.add(LIST_DROPDOWN_CONSTANTS.classes.GROUP_WRAPPER);
+      const listHeaderElement = document.createElement("div");
+      listHeaderElement.textContent = group.text;
+      listHeaderElement.classList.add("forge-typography--overline");
+      listHeaderElement.style.fontFamily = "Roboto,sans-serif";
+      listHeaderElement.style.fontSize = "0.75rem";
+      listHeaderElement.style.lineHeight = "2rem";
+      listHeaderElement.style.letterSpacing = "0.16667em";
+      listHeaderElement.style.fontWeight = "500";
+      listHeaderElement.style.margin = "4px 8px";
+      optionParent = groupWrapper;
+      groupWrapper.appendChild(listHeaderElement);
+      listElement.appendChild(groupWrapper);
+    }
+    for (const option of group.options) {
+      if (option.divider) {
+        const dividerElement = createDivider();
+        listElement.appendChild(dividerElement);
+        continue;
+      }
+      if (limitOptions && --optionLimit < 0) {
+        break;
+      }
+      optionIndex++;
+      const isSelected = config.selectedValues ? config.selectedValues.some((v) => isDeepEqual(v, option.value)) : false;
+      let listItemElement = document.createElement(LIST_ITEM_CONSTANTS.elementName);
+      listItemElement.value = option.value;
+      listItemElement.id = `list-dropdown-option-${config.id}-${optionIndex}`;
+      listItemElement.style.cursor = "pointer";
+      if (option.optionClass && (typeof option.optionClass === "string" || Array.isArray(option.optionClass) && option.optionClass.length)) {
+        addClass(option.optionClass, listItemElement);
+      }
+      switch (config.type) {
+        case "menu" /* Menu */:
+          listItemElement.setAttribute("role", "menuitem");
+          break;
+        case "none" /* None */:
+          break;
+        default:
+          listItemElement.setAttribute("role", "option");
+      }
+      if (config.dense) {
+        listItemElement.dense = true;
+      }
+      if (config.optionBuilder && typeof config.optionBuilder === "function") {
+        const element = config.optionBuilder(option, listItemElement);
+        if (element) {
+          if (typeof element === "string") {
+            listItemElement.innerHTML = element;
+          } else {
+            listItemElement.appendChild(element);
+          }
+        }
+      } else {
+        if (typeof config.transform !== "function") {
+          listItemElement.textContent = option.label || "";
+        } else {
+          const result = config.transform(option.label);
+          if (typeof result === "string") {
+            listItemElement.textContent = result;
+          } else if (typeof result === "object" && result.nodeType !== void 0) {
+            listItemElement.appendChild(result);
+          }
+        }
+      }
+      if (option.leadingBuilder) {
+        const element = option.leadingBuilder();
+        if (isObject(element)) {
+          element.slot = "leading";
+          listItemElement.appendChild(element);
+        }
+      } else if (option.leadingIcon) {
+        const leadingIconElement = createIconElement(option.leadingIconType, option.leadingIcon, option.leadingIconClass || config.iconClass);
+        leadingIconElement.slot = "leading";
+        listItemElement.appendChild(leadingIconElement);
+      }
+      if (option.trailingBuilder) {
+        const element = option.trailingBuilder();
+        if (isObject(element)) {
+          element.slot = "trailing";
+          listItemElement.appendChild(element);
+        }
+      } else if (option.trailingIcon) {
+        const trailingIconElement = createIconElement(option.trailingIconType, option.trailingIcon, option.trailingIconClass || config.iconClass);
+        trailingIconElement.slot = "trailing";
+        listItemElement.appendChild(trailingIconElement);
+      }
+      if (option.disabled) {
+        listItemElement.disabled = option.disabled;
+        listItemElement.setAttribute("aria-disabled", "true");
+      } else {
+        listItemElement.style.cursor = "pointer";
+        listItemElement.setAttribute("aria-disabled", "false");
+      }
+      if (isSelected) {
+        listItemElement.selected = true;
+      }
+      listItemElement.setAttribute("aria-selected", isSelected ? "true" : "false");
+      if (config.multiple) {
+        const checkboxElement = createCheckboxElement(isSelected);
+        listItemElement.appendChild(checkboxElement);
+        listItemElement.setAttribute("aria-selected", `${isSelected}`);
+        listItemElement.setAttribute("aria-checked", `${isSelected}`);
+      }
+      if (option.elementAttributes) {
+        option.elementAttributes.forEach((value, key) => {
+          listItemElement.setAttribute(key, value);
+        });
+      }
+      if (!option.disabled && typeof config.cascadingElementFactory === "function" && Array.isArray(option.options) && option.options.length) {
+        const optionIconElement = document.createElement("forge-icon");
+        optionIconElement.name = "arrow_right";
+        optionIconElement.slot = "trailing";
+        listItemElement.appendChild(optionIconElement);
+        const nonDividerOptions = group.options.filter((o) => !o.divider);
+        const factoryConfig = {
+          index: nonDividerOptions.indexOf(option),
+          options: option.options,
+          parentValue: option.value
+        };
+        const cascadingElement = config.cascadingElementFactory.call(null, factoryConfig);
+        cascadingElement.appendChild(listItemElement);
+        listItemElement = cascadingElement;
+      }
+      optionParent.appendChild(listItemElement);
+    }
+  }
+}
+function createCheckboxElement(selected) {
+  const checkboxElement = document.createElement("forge-icon");
+  checkboxElement.setAttribute(LIST_DROPDOWN_CONSTANTS.attributes.CHECKBOX_ELEMENT, "");
+  checkboxElement.name = selected ? tylIconCheckBox.name : tylIconCheckBoxOutlineBlank.name;
+  checkboxElement.slot = "leading";
+  checkboxElement.style.marginRight = "16px";
+  checkboxElement.style.verticalAlign = "middle";
+  return checkboxElement;
+}
+function createDivider() {
+  const divider = document.createElement("forge-divider");
+  divider.setAttribute("aria-hidden", "true");
+  return divider;
+}
+function createIconElement(type = "font", iconName, iconClass) {
+  if (type === "component") {
+    const icon = document.createElement("forge-icon");
+    if (iconClass) {
+      icon.classList.add(iconClass);
+    }
+    icon.setAttribute("aria-hidden", "true");
+    icon.name = iconName;
+    return icon;
+  }
+  const iconElement = document.createElement("i");
+  iconElement.classList.add(iconClass || ICON_CLASS_NAME);
+  iconElement.setAttribute("aria-hidden", "true");
+  iconElement.textContent = iconName;
+  return iconElement;
+}
+function createAsyncElement(asyncStyle) {
+  switch (asyncStyle) {
+    case "skeleton" /* Skeleton */:
+      return createSkeletonElement();
+    default:
+      return createSpinnerElement();
+  }
+}
+function createSpinnerElement() {
+  const div = document.createElement("div");
+  div.style.display = "flex";
+  div.style.justifyContent = "center";
+  div.style.alignItems = "center";
+  div.style.padding = "8px";
+  div.style.boxSizing = "border-box";
+  const spinner = document.createElement("forge-circular-progress");
+  spinner.style.setProperty("--forge-circular-progress-size", "24px");
+  div.appendChild(spinner);
+  return div;
+}
+function createSkeletonElement() {
+  const list = document.createElement("forge-list");
+  const div = document.createElement("div");
+  div.style.minWidth = "192px";
+  for (let i = 0; i < 3; i++) {
+    const listItemSkeleton = document.createElement(SKELETON_CONSTANTS.elementName);
+    listItemSkeleton.setAttribute("list-item", "");
+    div.appendChild(listItemSkeleton);
+  }
+  list.appendChild(div);
+  return list;
+}
+function createBusyElement() {
+  const linearProgress = document.createElement(LINEAR_PROGRESS_CONSTANTS.elementName);
+  linearProgress.determinate = false;
+  linearProgress.style.position = "absolute";
+  linearProgress.style.top = "0";
+  linearProgress.style.left = "0";
+  linearProgress.style.right = "0";
+  linearProgress.style.width = "100%";
+  return linearProgress;
+}
+function getOptionsByGroup(options) {
+  return isListDropdownOptionType(options, 1 /* Group */) ? options : [{ text: "", options }];
+}
+function isListDropdownOptionType(options, type) {
+  const isOptionGroups = options.some((o) => isDefined(o) && isObject(o) && o.hasOwnProperty("options") && (o.hasOwnProperty("text") || o.hasOwnProperty("builder")));
+  const isOptionTypes = options.some((o) => isDefined(o) && isObject(o) && o.hasOwnProperty("label") && o.hasOwnProperty("value"));
+  return isOptionGroups && type === 1 /* Group */ || isOptionTypes && type === 0 /* Option */;
+}
+
+// dist/build/lib/staging/src/list-dropdown/list-dropdown-foundation.ts
+var ListDropdownFoundation = class {
+  constructor(_adapter, config) {
+    this._adapter = _adapter;
+    this._open = false;
+    this._config = Object.assign(__spreadValues({}, DEFAULT_LIST_DROPDOWN_CONFIG), __spreadValues({}, config));
+    this._selectListener = (value, id) => this._onSelect(value, id);
+    this._closeListener = () => {
+      if (typeof this._config.closeCallback === "function") {
+        this._config.closeCallback();
+      }
+    };
+    this._scrollEndListener = () => {
+      if (this._config.observeScroll && typeof this._config.scrollEndListener === "function") {
+        this._config.scrollEndListener();
+      }
+    };
+  }
+  destroy() {
+    if (this._open) {
+      this.close();
+    }
+  }
+  open() {
+    if (!this._open) {
+      this._open = true;
+      this._adapter.open(this._config, this._selectListener, this._closeListener);
+      window.requestAnimationFrame(() => {
+        if (this._open) {
+          this.activateInitialOption();
+        }
+      });
+      if (this._config.observeScroll && this._config.scrollEndListener) {
+        this._adapter.setScrollBottomListener(this._scrollEndListener, this._config.observeScrollThreshold || 0);
+      }
+    }
+  }
+  close() {
+    if (this._open) {
+      this._open = false;
+      this._adapter.close();
+      if (this._config.observeScroll && this._config.scrollEndListener) {
+        this._adapter.removeScrollBottomListener(this._scrollEndListener);
+      }
+    }
+  }
+  _onSelect(value, id) {
+    if (typeof this._config.activeChangeCallback === "function") {
+      this._config.activeChangeCallback(id);
+    }
+    if (typeof this._config.selectCallback === "function") {
+      this._config.selectCallback(value);
+    }
+    if (this._open) {
+      const sync = this._config.syncWidth === void 0 ? true : false;
+      this._adapter.syncWidth(sync);
+    }
+  }
+  getActiveOptionIndex() {
+    return this._adapter.getActiveOptionIndex();
+  }
+  getActiveOption() {
+    const index = this.getActiveOptionIndex();
+    return index >= 0 ? this._nonDividerOptions[index] : void 0;
+  }
+  toggleOptionMultiple(index, isSelected) {
+    return this._adapter.toggleOptionMultiple(index, isSelected);
+  }
+  activateSelectedOption() {
+    this._adapter.activateSelectedOption(this._config);
+  }
+  activateFirstOption() {
+    const index = this._nonDividerOptions.findIndex((o) => !o.disabled);
+    if (index !== -1) {
+      this.activateOption(index);
+    }
+    return index;
+  }
+  activateLastOption() {
+    const options = this._nonDividerOptions;
+    const index = options.length - 1 - options.findIndex((o) => !o.disabled);
+    if (index !== -1) {
+      this.activateOption(index);
+    }
+    return index;
+  }
+  activateOption(index, animate) {
+    return this._adapter.activateOption(index, this._config.activeChangeCallback, animate);
+  }
+  activateInitialOption() {
+    if (typeof this._config.activeStartIndex === "number" && this._nonDividerOptions[this._config.activeStartIndex]) {
+      this.activateOption(this._config.activeStartIndex, false);
+      this._adapter.scrollSelectedOptionIntoView(false);
+    } else if (this._config.selectedValues && this._config.selectedValues.length) {
+      this._adapter.scrollSelectedOptionIntoView(false);
+    }
+  }
+  setSelectedValues(values) {
+    if (!Array.isArray(values)) {
+      values = [values];
+    }
+    if (!this._config.multiple && values.length > 1) {
+      values = [values[0]];
+    }
+    this._config.selectedValues = values;
+    this._adapter.setSelectedValues(values, this._config.multiple);
+  }
+  clearActiveOption() {
+    this._adapter.clearActiveOption();
+  }
+  setOptions(options) {
+    this._config.options = options;
+    if (!this._open) {
+      return;
+    }
+    this._adapter.setOptions(this._config);
+    this.activateInitialOption();
+  }
+  appendOptions(options) {
+    this._config.options = [...this._config.options, ...options];
+    if (!this._open) {
+      return;
+    }
+    this._adapter.appendOptions(options, this._config);
+  }
+  get dropdownElement() {
+    return this._adapter.dropdownElement;
+  }
+  scrollSelectedOptionIntoView(animate = true) {
+    this._adapter.scrollSelectedOptionIntoView(animate);
+  }
+  setScrollBottomListener(listener, threshold) {
+    this._config.scrollEndListener = listener;
+    this._config.observeScroll = true;
+    this._config.observeScrollThreshold = threshold;
+    this._adapter.setScrollBottomListener(this._scrollEndListener, this._config.observeScrollThreshold || 0);
+  }
+  removeScrollBottomListener() {
+    this._config.scrollEndListener = void 0;
+    this._adapter.removeScrollBottomListener(this._scrollEndListener);
+  }
+  setBusyVisibility(isVisible) {
+    if (!this._config.allowBusy) {
+      return;
+    }
+    this._adapter.setBusyVisibility(isVisible);
+  }
+  handleKey(key) {
+    switch (key) {
+      case "Enter":
+        const activeOptionIndex = this.getActiveOptionIndex();
+        const activeOption = this._nonDividerOptions[activeOptionIndex];
+        if (this._canSelectOption(activeOption)) {
+          const id = this._adapter.getActiveOptionIdByIndex(activeOptionIndex);
+          if (id) {
+            this._onSelect(activeOption.value, id);
+          }
+        }
+        break;
+      case "Up":
+      case "ArrowUp":
+      case "Down":
+      case "ArrowDown":
+        const options = this._nonDividerOptions;
+        if (options.length && options.every((o) => !this._canSelectOption(o))) {
+          return;
+        }
+        const index = this._getNextActiveOptionIndex(key);
+        this.activateOption(index);
+        break;
+      case "Home":
+        this.activateFirstOption();
+        break;
+      case "End":
+        this.activateLastOption();
+        break;
+    }
+  }
+  _canSelectOption(option) {
+    return option && !option.disabled && !option.divider;
+  }
+  _getNextActiveOptionIndex(key) {
+    let index = this._adapter.getActiveOptionIndex();
+    if (index === -1) {
+      index = this._adapter.getSelectedOptionIndex();
+    }
+    if (key === "ArrowUp" || key === "Up") {
+      return this._getPreviousHighlightableOptionIndex(index, this._nonDividerOptions);
+    }
+    return this._getNextHighlightableOptionIndex(index, this._nonDividerOptions);
+  }
+  _getPreviousHighlightableOptionIndex(startIndex, options) {
+    const index = startIndex <= 0 ? options.length - 1 : startIndex - 1;
+    if (options[index].disabled) {
+      return this._getPreviousHighlightableOptionIndex(index, options);
+    }
+    return index;
+  }
+  _getNextHighlightableOptionIndex(startIndex, options) {
+    const index = startIndex === options.length - 1 ? 0 : startIndex + 1;
+    if (options[index].disabled) {
+      return this._getNextHighlightableOptionIndex(index, options);
+    }
+    return index;
+  }
+  get _flatOptions() {
+    if (isListDropdownOptionType(this._config.options, 1 /* Group */)) {
+      const groups = this._config.options;
+      return groups.reduce((flatOpts, group) => flatOpts.concat(group.options), []);
+    }
+    return [...this._config.options];
+  }
+  get _nonDividerOptions() {
+    return this._flatOptions.filter((o) => !o.divider);
+  }
+};
+
+// dist/build/lib/staging/src/list-dropdown/list-dropdown-adapter.ts
+var ListDropdownAdapter = class {
+  constructor(_targetElement) {
+    this._targetElement = _targetElement;
+  }
+  get dropdownElement() {
+    return this._dropdownElement;
+  }
+  open(config, selectCallback, closeCb) {
+    this._dropdownElement = createDropdown(config, this._targetElement);
+    this.syncWidth(!!config.syncWidth, config.targetWidthCallback);
+    if (config.allowBusy) {
+      this._busyElement = createBusyElement();
+      this._busyElement.style.display = "none";
+      this._dropdownElement.appendChild(this._busyElement);
+    }
+    if (config.headerBuilder) {
+      this._headerElement = config.headerBuilder();
+      if (this._headerElement) {
+        this._headerElement.setAttribute(LIST_DROPDOWN_CONSTANTS.attributes.DATA_ALLOW_FOCUS, "");
+      }
+    }
+    if (config.footerBuilder) {
+      this._footerElement = config.footerBuilder();
+      if (this._footerElement) {
+        this._footerElement.setAttribute(LIST_DROPDOWN_CONSTANTS.attributes.DATA_ALLOW_FOCUS, "");
+      }
+    }
+    this._listElement = createList(config);
+    this._listElement.addEventListener(LIST_ITEM_CONSTANTS.events.SELECT, (evt) => {
+      evt.detail.listItem.setAttribute("aria-selected", "true");
+      selectCallback(evt.detail.value, evt.detail.listItem.id);
+    });
+    if (config.options.length) {
+      createListItems(config, this._listElement);
+      this._dropdownElement.appendChild(this._listElement);
+      if (this._headerElement) {
+        this._dropdownElement.insertAdjacentElement("afterbegin", this._headerElement);
+      }
+      if (this._footerElement) {
+        this._dropdownElement.appendChild(this._footerElement);
+      }
+    } else if (config.allowBusy) {
+      this._asyncElement = createAsyncElement(config.asyncStyle);
+      this._dropdownElement.appendChild(this._asyncElement);
+    }
+    this._announcerElement = createVisuallyHiddenElement();
+    this._announcerElement.id = `${config.id}-activedescendant`;
+    this._dropdownElement.appendChild(this._announcerElement);
+    this._dropdownElement.open = true;
+  }
+  close() {
+    if (!this._dropdownElement) {
+      return;
+    }
+    this._dropdownElement.open = false;
+    this._dropdownElement = void 0;
+    this._listElement = void 0;
+    this._announcerElement = void 0;
+  }
+  setScrollBottomListener(listener, scrollThreshold) {
+    if (this._dropdownElement) {
+      if (!this._scrollObserver) {
+        const scrollTarget = getShadowElement(this._dropdownElement, POPUP_CONSTANTS.selectors.CONTAINER);
+        const scrollConfig = { scrollThreshold };
+        this._scrollObserver = new ScrollAxisObserver(scrollTarget, scrollConfig);
+        this._scrollObserver.addListener(ScrollEvents.ScrolledEnd, listener);
+      }
+    }
+  }
+  removeScrollBottomListener(listener) {
+    if (this._scrollObserver) {
+      this._scrollObserver.removeListener(ScrollEvents.ScrolledEnd, listener);
+    }
+  }
+  getActiveOptionIndex() {
+    if (!this._dropdownElement) {
+      return -1;
+    }
+    const listItems = this._getListItemElements();
+    const activeListItem = [...listItems].reverse().find((li) => li.active);
+    return activeListItem ? listItems.indexOf(activeListItem) : -1;
+  }
+  getSelectedOptionIndex() {
+    const listItems = this._getListItemElements();
+    return listItems.findIndex((li) => li.selected);
+  }
+  getActiveOptionIdByIndex(index) {
+    if (!this._dropdownElement) {
+      return null;
+    }
+    const listItems = this._getListItemElements();
+    const item = listItems[index];
+    return item ? item.id : null;
+  }
+  toggleOptionMultiple(index, isSelected) {
+    if (!this._dropdownElement) {
+      return;
+    }
+    const listItems = this._getListItemElements();
+    if (listItems.length && listItems[index]) {
+      this._toggleSelectedOption(listItems[index], isSelected);
+    }
+  }
+  scrollSelectedOptionIntoView(animate = true) {
+    const listItem = this._getSelectedListItem();
+    this._scrollListItemIntoView(listItem, animate ? "smooth" : "auto", "center");
+  }
+  activateSelectedOption(config) {
+    const listItems = this._getListItemElements();
+    if (listItems.length) {
+      const activeListItems = listItems.filter((li) => li.active);
+      activeListItems.forEach((li) => li.active = false);
+    }
+    const listItem = this._getSelectedListItem();
+    if (listItem) {
+      this._activateListOption(listItem, config.activeChangeCallback);
+    }
+  }
+  activateOption(index, activeChangeCallback, animate = true) {
+    if (!this._dropdownElement) {
+      return;
+    }
+    const listItems = this._getListItemElements();
+    if (listItems.length) {
+      const activeListItems = listItems.filter((li) => li.active);
+      activeListItems.forEach((li) => li.active = false);
+      this._activateListOption(listItems[index], activeChangeCallback);
+      this._scrollListItemIntoView(listItems[index], animate ? "smooth" : "auto");
+    }
+  }
+  setSelectedValues(values, multiple = false) {
+    if (!this._dropdownElement) {
+      return;
+    }
+    const listItems = this._getListItemElements();
+    for (const listItem of listItems) {
+      const isSelected = values.some((v) => isDeepEqual(v, listItem.value));
+      listItem.selected = isSelected;
+      if (multiple) {
+        const checkboxElement = listItem.querySelector(`[${LIST_DROPDOWN_CONSTANTS.attributes.CHECKBOX_ELEMENT}]`);
+        if (checkboxElement) {
+          const newCheckboxElement = createCheckboxElement(isSelected);
+          replaceElement(newCheckboxElement, checkboxElement);
+        }
+      }
+    }
+  }
+  clearActiveOption() {
+    const listItems = this._getListItemElements();
+    listItems.forEach((li) => li.active = false);
+  }
+  syncWidth(sync, targetWidthCallback) {
+    if (this._dropdownElement) {
+      this._dropdownElement.style[sync ? "width" : "minWidth"] = `${this._getTargetElementWidth(targetWidthCallback)}px`;
+    }
+  }
+  setOptions(config) {
+    if (!this._dropdownElement || !this._listElement) {
+      return;
+    }
+    if (this._asyncElement && this._asyncElement.isConnected) {
+      removeElement(this._asyncElement);
+    }
+    if (this._busyElement) {
+      this._busyElement.close();
+    }
+    if (!this._listElement.isConnected) {
+      this._dropdownElement.appendChild(this._listElement);
+    }
+    removeAllChildren(this._listElement);
+    createListItems(config, this._listElement);
+    if (this._headerElement && !this._headerElement.isConnected) {
+      this._dropdownElement.insertAdjacentElement("afterbegin", this._headerElement);
+    }
+    if (this._footerElement && !this._footerElement.isConnected) {
+      this._dropdownElement.insertAdjacentElement("beforeend", this._footerElement);
+    }
+    if ("position" in this._dropdownElement && typeof this._dropdownElement.position === "function") {
+      this._dropdownElement.position();
+    }
+  }
+  appendOptions(options, config) {
+    if (!this._dropdownElement || !this._listElement) {
+      return;
+    }
+    createListItems(config, this._listElement, options);
+  }
+  setBusyVisibility(isVisible) {
+    if (!this._dropdownElement) {
+      return;
+    }
+    if (isVisible) {
+      this._busyElement.style.removeProperty("display");
+      this._busyElement.open();
+    } else {
+      this._busyElement.close();
+    }
+  }
+  getScreenWidth() {
+    return window.innerWidth;
+  }
+  _getListItemElements() {
+    return this._dropdownElement ? Array.from(this._dropdownElement.querySelectorAll(LIST_ITEM_CONSTANTS.elementName)) : [];
+  }
+  _toggleSelectedOption(listItem, isSelected) {
+    if (!this._dropdownElement) {
+      return;
+    }
+    const listItems = this._getListItemElements();
+    if (listItems.length) {
+      const activeItems = listItems.filter((li) => li !== listItem && li.active);
+      if (activeItems.length) {
+        activeItems.forEach((ai) => ai.active = false);
+      }
+    }
+    listItem.selected = isSelected;
+    listItem.setAttribute("aria-selected", `${isSelected}`);
+    listItem.setAttribute("aria-checked", `${isSelected}`);
+    if (isSelected) {
+      listItem.active = true;
+    }
+    const checkboxElement = listItem.querySelector(`${ICON_CONSTANTS.elementName}[slot=leading]`);
+    if (checkboxElement) {
+      const newCheckboxElement = createCheckboxElement(isSelected);
+      replaceElement(newCheckboxElement, checkboxElement);
+    }
+  }
+  _getTargetElementWidth(cb) {
+    if (cb && isFunction(cb)) {
+      return cb();
+    }
+    return this._targetElement.getBoundingClientRect().width;
+  }
+  _activateListOption(listItem, activeChangeCallback) {
+    if (listItem && !listItem.disabled) {
+      listItem.active = true;
+      if (activeChangeCallback && isFunction(activeChangeCallback)) {
+        activeChangeCallback(listItem.id);
+      }
+    }
+  }
+  _scrollListItemIntoView(listItem, behavior = "auto", block = "nearest") {
+    if (listItem && this._dropdownElement && this._dropdownElement.isConnected) {
+      const scrollContainer = getShadowElement(this._dropdownElement, POPUP_CONSTANTS.selectors.CONTAINER);
+      if (scrollContainer) {
+        tryScrollIntoView(scrollContainer, listItem, behavior, block);
+      }
+    }
+  }
+  _getSelectedListItem() {
+    const listItems = this._getListItemElements();
+    return listItems.find((li) => li.selected);
+  }
+};
+
+// dist/build/lib/staging/src/list-dropdown/list-dropdown.ts
+var ListDropdown = class {
+  constructor(_targetElement, config) {
+    this._targetElement = _targetElement;
+    IconRegistry.define([tylIconCheckBox, tylIconCheckBoxOutlineBlank]);
+    this._foundation = new ListDropdownFoundation(new ListDropdownAdapter(this._targetElement), config);
+  }
+  destroy() {
+    this._foundation.destroy();
+  }
+  open() {
+    this._foundation.open();
+  }
+  close() {
+    this._foundation.close();
+  }
+  getActiveOptionIndex() {
+    return this._foundation.getActiveOptionIndex();
+  }
+  getActiveOption() {
+    return this._foundation.getActiveOption();
+  }
+  toggleOptionMultiple(index, isSelected) {
+    return this._foundation.toggleOptionMultiple(index, isSelected);
+  }
+  activateSelectedOption() {
+    this._foundation.activateSelectedOption();
+  }
+  activateFirstOption() {
+    return this._foundation.activateFirstOption();
+  }
+  activateOption(index) {
+    return this._foundation.activateOption(index);
+  }
+  activateInitialOption() {
+    return this._foundation.activateInitialOption();
+  }
+  clearActiveOption() {
+    this._foundation.clearActiveOption();
+  }
+  setSelectedValues(values) {
+    return this._foundation.setSelectedValues(values);
+  }
+  get dropdownElement() {
+    return this._foundation.dropdownElement;
+  }
+  setOptions(options) {
+    this._foundation.setOptions(options);
+  }
+  appendOptions(options) {
+    this._foundation.appendOptions(options);
+  }
+  scrollSelectedOptionIntoView(animate) {
+    this._foundation.scrollSelectedOptionIntoView();
+  }
+  setScrollBottomListener(listener, threshold) {
+    this._foundation.setScrollBottomListener(listener, threshold);
+  }
+  removeScrollBottomListener() {
+    this._foundation.removeScrollBottomListener();
+  }
+  setBusyVisibility(isVisible) {
+    this._foundation.setBusyVisibility(isVisible);
+  }
+  handleKey(key) {
+    this._foundation.handleKey(key);
+  }
+};
+
+// dist/build/lib/staging/src/list-dropdown/list-dropdown-aware-foundation.ts
+var ListDropdownAwareFoundation = class {
+  constructor() {
+    this._popupClasses = [];
+    this._syncPopupWidth = false;
+    this._optionLimit = 0;
+    this._observeScroll = false;
+    this._observeScrollThreshold = 0;
+  }
+  get syncPopupWidth() {
+    return this._syncPopupWidth;
+  }
+  set syncPopupWidth(value) {
+    this._syncPopupWidth = value;
+  }
+  get popupClasses() {
+    return this._popupClasses;
+  }
+  set popupClasses(value) {
+    if (typeof value === "string") {
+      value = [value];
+    }
+    if (Array.isArray(value)) {
+      this._popupClasses = value;
+    }
+  }
+  get observeScroll() {
+    return this._observeScroll;
+  }
+  set observeScroll(value) {
+    this._observeScroll = value;
+  }
+  get observeScrollThreshold() {
+    return this._observeScrollThreshold;
+  }
+  set observeScrollThreshold(value) {
+    this._observeScrollThreshold = value;
+  }
+  get optionLimit() {
+    return this._optionLimit;
+  }
+  set optionLimit(value) {
+    this._optionLimit = value;
+  }
+  get popupHeaderBuilder() {
+    return this._popupHeaderBuilder;
+  }
+  set popupHeaderBuilder(value) {
+    this._popupHeaderBuilder = value;
+  }
+  get popupFooterBuilder() {
+    return this._popupFooterBuilder;
+  }
+  set popupFooterBuilder(value) {
+    this._popupFooterBuilder = value;
+  }
+  _applySelection() {
+  }
+};
+
+// dist/build/lib/staging/src/list-dropdown/cascading-list-dropdown-aware-foundation.ts
+var CascadingListDropdownAwareFoundation = class extends ListDropdownAwareFoundation {
+  constructor(_config) {
+    super();
+    this._config = _config;
+    this._open = false;
+    this._options = [];
+    this._childOpen = false;
+    this._popupHasMouse = false;
+    this._targetMouseEnterListener = (evt) => this._onTargetMouseEnter(evt);
+    this._targetMouseLeaveListener = (evt) => this._onTargetMouseLeave(evt);
+    this._childPopupMouseEnterListener = () => this._onChildPopupMouseEnter();
+    this._childPopupMouseLeaveListener = () => this._onChildPopupMouseLeave();
+    this._documentMouseMoveListener = (evt) => this._mouseCoords = { x: evt.pageX, y: evt.pageY };
+  }
+  _onChildPopupMouseEnter() {
+    this._popupHasMouse = true;
+  }
+  _onChildPopupMouseLeave() {
+    this._popupHasMouse = false;
+    setTimeout(() => {
+      const mouseElement = document.elementFromPoint(this._mouseCoords.x, this._mouseCoords.y);
+      if (!this._popupHasMouse && !this._childOpen && (!mouseElement || !this._isOwnElement(mouseElement))) {
+        this._closeDropdown();
+      }
+    }, this._config.popupTimeout);
+  }
+  _onTargetMouseEnter(evt) {
+    if (!this._options.length) {
+      return;
+    }
+    this._openDropdown();
+  }
+  _onTargetMouseLeave(evt) {
+    this._activeMouseLeaveTimeout = window.setTimeout(() => {
+      if (!this._open || this._childOpen) {
+        return;
+      }
+      if (this._mouseCoords) {
+        const mouseElement = document.elementFromPoint(this._mouseCoords.x, this._mouseCoords.y);
+        if (mouseElement && this._isOwnElement(mouseElement)) {
+          return;
+        }
+      }
+      this._closeDropdown();
+    }, this._config.targetTimeout);
+  }
+  _clearMouseLeaveTimeout() {
+    if (this._activeMouseLeaveTimeout !== void 0) {
+      window.clearTimeout(this._activeMouseLeaveTimeout);
+    }
+  }
+};
+
+export {
+  LIST_DROPDOWN_CONSTANTS,
+  DEFAULT_LIST_DROPDOWN_CONFIG,
+  ListDropdownType,
+  ListDropdownAsyncStyle,
+  isListDropdownOptionType,
+  ListDropdownFoundation,
+  ListDropdownAdapter,
+  ListDropdown,
+  ListDropdownAwareFoundation,
+  CascadingListDropdownAwareFoundation
+};
+//# sourceMappingURL=chunk.D4XU5MZN.js.map