@vime/core/dist/collection/components/ui/settings/menu-item/menu-item.js

Customizable, extensible, accessible and framework agnostic media player.

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
  return new (P || (P = Promise))(function (resolve, reject) {
    function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
    function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
    function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
    step((generator = generator.apply(thisArg, _arguments || [])).next());
  });
};
import { Component, Element, Event, h, Method, Prop, State, } from '@stencil/core';
import { isNil, isUndefined } from '../../../../utils/unit';
import { withComponentRegistry } from '../../../core/player/withComponentRegistry';
import { withPlayerContext } from '../../../core/player/withPlayerContext';
/**
 * A collection of radio buttons describing a set of related options. Only one radio button in a
 * group can be selected at the same time.
 *
 * ## Visual
 *
 * <img
 *   src="https://raw.githubusercontent.com/vime-js/vime/master/packages/core/src/components/ui/settings/menu-radio-group/menu-radio-group.png"
 *   alt="Vime settings menu radio group component"
 * />
 */
export class MenuItem {
  constructor() {
    this.showTapHighlight = false;
    /**
     * Whether the item is displayed or not.
     */
    this.hidden = false;
    /**
     * The name of the checkmark icon to resolve from the icon library.
     */
    this.checkIcon = 'check';
    /** @internal */
    this.isTouch = false;
    withComponentRegistry(this);
    withPlayerContext(this, ['isTouch']);
  }
  /**
   * Focuses the menu item.
   */
  focusItem() {
    var _a;
    return __awaiter(this, void 0, void 0, function* () {
      (_a = this.menuItem) === null || _a === void 0 ? void 0 : _a.focus();
    });
  }
  /**
   * Removes focus from the menu item.
   */
  blurItem() {
    var _a;
    return __awaiter(this, void 0, void 0, function* () {
      (_a = this.menuItem) === null || _a === void 0 ? void 0 : _a.blur();
    });
  }
  /**
   * Returns the height of the menu item.
   */
  getHeight() {
    return __awaiter(this, void 0, void 0, function* () {
      return parseFloat(this.menuItem ? window.getComputedStyle(this.menuItem).height : '0');
    });
  }
  onClick() {
    if (!isNil(this.menu))
      this.menu.active = !this.expanded;
  }
  onFocus() {
    this.vmFocus.emit();
  }
  onBlur() {
    this.vmBlur.emit();
  }
  onTouchStart() {
    this.showTapHighlight = true;
  }
  onTouchEnd() {
    setTimeout(() => {
      this.showTapHighlight = false;
    }, 100);
  }
  onMouseLeave() {
    var _a;
    (_a = this.menuItem) === null || _a === void 0 ? void 0 : _a.blur();
  }
  render() {
    var _a, _b, _c, _d;
    const isCheckedDefined = !isUndefined(this.checked);
    const isMenuDefined = !isUndefined(this.menu);
    const hasExpanded = this.expanded ? 'true' : 'false';
    const isChecked = this.checked ? 'true' : 'false';
    const showCheckedIcon = isCheckedDefined && !isUndefined(this.checkIcon);
    const showLeftNavArrow = isMenuDefined && this.expanded;
    const showRightNavArrow = isMenuDefined && !this.expanded;
    const showHint = !isUndefined(this.hint) &&
      !isCheckedDefined &&
      (!isMenuDefined || !this.expanded);
    const showBadge = !isUndefined(this.badge) && !showHint && !showRightNavArrow;
    const hasSpacer = showHint || showRightNavArrow;
    return (h("div", { class: {
        menuItem: true,
        notTouch: !this.isTouch,
        tapHighlight: this.showTapHighlight,
        showDivider: isMenuDefined && ((_a = this.expanded) !== null && _a !== void 0 ? _a : false),
      }, id: this.identifier, role: isCheckedDefined ? 'menuitemradio' : 'menuitem', tabindex: "0", "aria-label": this.label, "aria-hidden": this.hidden ? 'true' : 'false', "aria-haspopup": isMenuDefined ? 'true' : undefined, "aria-controls": (_c = (_b = this.menu) === null || _b === void 0 ? void 0 : _b.identifier) !== null && _c !== void 0 ? _c : (_d = this.menu) === null || _d === void 0 ? void 0 : _d.id, "aria-expanded": isMenuDefined ? hasExpanded : undefined, "aria-checked": isCheckedDefined ? isChecked : undefined, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), onTouchStart: this.onTouchStart.bind(this), onTouchEnd: this.onTouchEnd.bind(this), onMouseLeave: this.onMouseLeave.bind(this), ref: el => {
        this.menuItem = el;
      } },
      showCheckedIcon && (h("vm-icon", { name: this.checkIcon, library: this.icons })),
      showLeftNavArrow && h("span", { class: "arrow left" }),
      this.label,
      hasSpacer && h("span", { class: "spacer" }),
      showHint && h("span", { class: "hint" }, this.hint),
      showBadge && h("span", { class: "badge" }, this.badge),
      showRightNavArrow && h("span", { class: "arrow right" })));
  }
  static get is() { return "vm-menu-item"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["menu-item.css"]
  }; }
  static get styleUrls() { return {
    "$": ["menu-item.css"]
  }; }
  static get properties() { return {
    "identifier": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "The `id` attribute of the item."
      },
      "attribute": "identifier",
      "reflect": false
    },
    "hidden": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Whether the item is displayed or not."
      },
      "attribute": "hidden",
      "reflect": false,
      "defaultValue": "false"
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The label/title of the item."
      },
      "attribute": "label",
      "reflect": false
    },
    "menu": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "HTMLVmMenuElement",
        "resolved": "HTMLVmMenuElement | undefined",
        "references": {
          "HTMLVmMenuElement": {
            "location": "global"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "If the item has a popup menu, then this should be a reference to it."
      }
    },
    "expanded": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "If the item has a popup menu, this indicates whether the menu is open or not. Sets the\n`aria-expanded` property."
      },
      "attribute": "expanded",
      "reflect": false
    },
    "checked": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "If this item is to behave as a radio button, then this property determines whether the\nradio is selected or not. Sets the `aria-checked` property."
      },
      "attribute": "checked",
      "reflect": false
    },
    "hint": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "This can provide additional context about some underlying state of the item. For example, if\nthe menu item opens/closes a submenu with options, the hint could be the currently selected\noption. If `checked` is defined, `hint` is not shown."
      },
      "attribute": "hint",
      "reflect": false
    },
    "badge": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "This can provide additional context about the value of a menu item. For example, if the item\nis a radio button for a set of video qualities, the badge could describe whether the quality\nis UHD, HD etc. If `hint` is shown, `badge` is not shown."
      },
      "attribute": "badge",
      "reflect": false
    },
    "checkIcon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "The name of the checkmark icon to resolve from the icon library."
      },
      "attribute": "check-icon",
      "reflect": false,
      "defaultValue": "'check'"
    },
    "icons": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "The name of an icon library to use. Defaults to the library defined by the `icons` player\nproperty."
      },
      "attribute": "icons",
      "reflect": false
    },
    "isTouch": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "PlayerProps['isTouch']",
        "resolved": "boolean",
        "references": {
          "PlayerProps": {
            "location": "import",
            "path": "../../../core/player/PlayerProps"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "internal"
          }],
        "text": ""
      },
      "attribute": "is-touch",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "showTapHighlight": {}
  }; }
  static get events() { return [{
      "method": "vmFocus",
      "name": "vmFocus",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the item is focused."
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }, {
      "method": "vmBlur",
      "name": "vmBlur",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the item loses focus."
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }]; }
  static get methods() { return {
    "focusItem": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Focuses the menu item.",
        "tags": []
      }
    },
    "blurItem": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Removes focus from the menu item.",
        "tags": []
      }
    },
    "getHeight": {
      "complexType": {
        "signature": "() => Promise<number>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<number>"
      },
      "docs": {
        "text": "Returns the height of the menu item.",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "host"; }
}