web-ui-pack/dropdownElement.js

import WUPBaseElement from "./baseElement";
import WUPPopupElement from "./popup/popupElement";
import { WUPcssButton, WUPcssMenu } from "./styles";
const tagName = "wup-dropdown";
/** Dropdown element
 * @example
 * ```html
  <wup-dropdown class="custom">
    <button type="button">Click Me</button>
    <wup-popup placement="bottom-middle" animation="stack">
      <ul>
        <li><button type="button">A</button></li>
        <li><button type="button">B</button></li>
        <li><button type="button">C</button></li>
      </ul>
    </wup-popup>
  </wup-dropdown>
 * ```
 * @tutorial Troubleshooting
 * * in comparison with Combobox Dropdown doesn't contain input but can contain in popup any items (like nav-menu etc.) */
export default class WUPDropdownElement extends WUPBaseElement {
    #ctr = this.constructor;
    static get $style() {
        return `${super.$style}
      :host {
        contain: style;
        display: inline-block;
      }${WUPcssButton(":host button")}
      :host button {
        min-width: initial;
        margin: 0;
        padding: 0.7em;
      }${WUPcssMenu(":host>[menu]")}`;
    }
    /** Default options applied to every element. Change it to configure default behavior
     * * @tutorial Troubleshooting
     * * Popup-related options are not observed so to change it use `WUPDropdownElement.$defaults` or `element.$refPopup.$options` direclty */
    static $defaults = {
        ...WUPPopupElement.$defaults,
        animation: 1 /* Animations.drawer */,
        showCase: 4 /* ShowCases.onClick */ | 2 /* ShowCases.onFocus */,
        hideOnPopupClick: true,
        minHeightByTarget: true,
        minWidthByTarget: true,
        placement: [
            WUPPopupElement.$placements.$bottom.$start,
            WUPPopupElement.$placements.$bottom.$end,
            WUPPopupElement.$placements.$top.$start,
            WUPPopupElement.$placements.$top.$end,
            WUPPopupElement.$placements.$bottom.$start.$resizeHeight,
            WUPPopupElement.$placements.$bottom.$end.$resizeHeight,
            WUPPopupElement.$placements.$top.$start.$resizeHeight,
            WUPPopupElement.$placements.$top.$end.$resizeHeight,
        ],
    };
    /** Reference to nested HTMLElement tied with $options.label */
    $refTitle = this.firstElementChild;
    /** Reference to popupMenu */
    $refPopup = this.lastElementChild;
    /** Reference to list */
    $refMenu = this.lastElementChild;
    gotReady() {
        this.$refTitle = this.firstElementChild;
        this.$refPopup = this.lastElementChild;
        if (this.$refTitle === this.$refPopup || !this.$refPopup.$show) {
            this.throwError("Invalid structure. Expected 1st element: <any/>, last element: <wup-popup/>");
        }
        else {
            this.$refPopup.setAttribute("menu", "");
            this.$refPopup.goShow = this.goShowPopup.bind(this);
            this.$refPopup.goHide = this.goHidePopup.bind(this);
            Object.assign(this.$refPopup.$options, this.$options);
            // WA
            const menu = this.$refPopup.querySelector("ul,ol,[items]") || this.$refPopup;
            menu.id = menu.id || this.#ctr.$uniqueId;
            this.$refMenu = menu;
            const lbl = this.$refTitle;
            lbl.setAttribute("aria-owns", menu.id);
            lbl.setAttribute("aria-controls", menu.id);
            lbl.setAttribute("aria-haspopup", "listbox");
            lbl.setAttribute("aria-expanded", false);
            // !menu.hasAttribute("role") && menu.setAttribute("role", "listbox");
            // li.setAttribute("role", "option");
            !menu.hasAttribute("tabindex") && menu.setAttribute("tabindex", -1); // otherwise Firefox move focus into it by keydown 'Tab'
            // lbl.id = lbl.id || this.#ctr.$uniqueId;
            // menu.setAttribute("aria-labelledby", lbl.id);
        }
        super.gotReady();
    }
    /** Custom function to override default `WUPPopupElement.prototype.goHide` */
    goShowPopup(showCase, ev) {
        const p = WUPPopupElement.prototype.goShow.call(this.$refPopup, showCase, ev);
        this.$refPopup.$options.target.setAttribute("aria-expanded", true);
        return p;
    }
    /** Custom function to override default `WUPPopupElement.prototype.goHide` */
    goHidePopup(hideCase, ev) {
        if (hideCase === 4 /* HideCases.onPopupClick */ && !this._opts.hideOnPopupClick) {
            return false;
        }
        const p = WUPPopupElement.prototype.goHide.call(this.$refPopup, hideCase, ev);
        this.$refPopup.$options.target.setAttribute("aria-expanded", false);
        return p;
    }
}
customElements.define(tagName, WUPDropdownElement);