openproject-primer_view_components 0.6.3

data/app/components/primer/alpha/action_list.rb

@@ -0,0 +1,256 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # An ActionList is a styled list of links. It acts as the base component for many
+    # other menu-type components, including `ActionMenu` and `SelectPanel`, as well as
+    # the navigational component `NavList`.
+    #
+    # Each item in an action list can be augmented by specifying corresponding leading
+    # and/or trailing visuals.
+    class ActionList < Primer::Component
+      status :alpha
+      audited_at "2023-07-10"
+
+      DEFAULT_ROLE = :list
+
+      MENU_ROLE = :menu
+      DEFAULT_MENU_ITEM_ROLE = :menuitem
+
+      DEFAULT_SCHEME = :full
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => nil,
+        :inset => "ActionListWrap--inset"
+      }.freeze
+      SCHEME_OPTIONS = SCHEME_MAPPINGS.keys.freeze
+
+      DEFAULT_SELECT_VARIANT = :none
+      SELECT_VARIANT_OPTIONS = [
+        :single,
+        :multiple,
+        :multiple_checkbox,
+        DEFAULT_SELECT_VARIANT
+      ].freeze
+
+      SELECT_VARIANT_ROLE_MAP = {
+        single: :menuitemradio,
+        multiple: :menuitemcheckbox,
+        multiple_checkbox: :menuitemcheckbox
+      }.freeze
+
+      # :nocov:
+      # @private
+      def self.custom_element_name
+        @custom_element_name ||= name.split("::").last.underscore.dasherize
+      end
+
+      # @private
+      def custom_element_name
+        self.class.custom_element_name
+      end
+      # :nocov:
+
+      # Heading text rendered above the list of items.
+      #
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Heading) %>.
+      renders_one :heading, lambda { |**system_arguments|
+        Heading.new(**system_arguments)
+      }
+
+      # @!parse
+      #   # Adds an item to the list.
+      #   #
+      #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Alpha::ActionList::Item) %>
+      #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::ActionList::Item) %>, or whatever class is passed as the `component_klass` argument.
+      #   def with_item(**system_arguments, &block)
+      #   end
+
+      # @!parse
+      #   # Adds a divider to the list. Dividers visually separate items.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Divider) %>.
+      #   def with_divider(**system_arguments, &block)
+      #   end
+
+      # @!parse
+      #   # Adds an avatar item to the list. Avatar items are a convenient way to accessibly add an item with a leading avatar image.
+      #   #
+      #   # @param src [String] The source url of the avatar image.
+      #   # @param username [String] The username associated with the avatar.
+      #   # @param full_name [String] Optional. The user's full name.
+      #   # @param full_name_scheme [Symbol] Optional. How to display the user's full name. <%= one_of(Primer::Alpha::ActionList::Item::DESCRIPTION_SCHEME_OPTIONS) %>
+      #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Alpha::ActionList::Item) %>
+      #   # @param avatar_arguments [Hash] Optional. The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %>
+      #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::ActionList::Item) %>, or whatever class is passed as the `component_klass` argument.
+      #   def with_avatar_item(src:, username:, full_name: nil, full_name_scheme: Primer::Alpha::ActionList::Item::DEFAULT_DESCRIPTION_SCHEME, component_klass: ActionList::Item, avatar_arguments: {}, **system_arguments, &block)
+      #   end
+
+      # Items. Items can be individual items, avatar items, or dividers. See the documentation for `#with_item`, `#with_divider`, and `#with_avatar_item` respectively for more information.
+      #
+      renders_many :items, types: {
+        item: {
+          renders: lambda { |**system_arguments|
+            build_item(**system_arguments).tap do |item|
+              will_add_item(item)
+            end
+          },
+
+          as: :item
+        },
+
+        avatar_item: {
+          renders: lambda { |**system_arguments|
+            build_avatar_item(**system_arguments).tap do |item|
+              will_add_item(item)
+            end
+          },
+
+          as: :avatar_item
+        },
+
+        divider: {
+          renders: ActionList::Divider,
+          as: :divider
+        }
+      }
+
+      attr_reader :id, :select_variant, :role
+
+      # @param id [String] HTML ID value.
+      # @param role [Boolean] ARIA role describing the function of the list. listbox and menu are a common values.
+      # @param item_classes [String] Additional CSS classes to attach to items.
+      # @param scheme [Symbol] <%= one_of(Primer::Alpha::ActionList::SCHEME_OPTIONS) %> `inset` children are offset (vertically and horizontally) from list edges. `full` (default) children are flush (vertically and horizontally) with list edges.
+      # @param show_dividers [Boolean] Display a divider above each item in the list when it does not follow a header or divider.
+      # @param select_variant [Symbol] How items may be selected in the list. <%= one_of(Primer::Alpha::ActionList::SELECT_VARIANT_OPTIONS) %>
+      # @param form_arguments [Hash] Allows an `ActionList` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission. *NOTE*: Consider using an <%= link_to_component(Primer::Alpha::ActionMenu) %> instead of using this feature directly.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        id: self.class.generate_id,
+        role: nil,
+        item_classes: nil,
+        scheme: DEFAULT_SCHEME,
+        show_dividers: false,
+        select_variant: DEFAULT_SELECT_VARIANT,
+        form_arguments: {},
+        **system_arguments
+      )
+        @system_arguments = system_arguments
+        @id = id
+        @system_arguments[:id] = @id
+        @system_arguments[:tag] = :ul
+        @item_classes = item_classes
+        @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)
+        @show_dividers = show_dividers
+        @select_variant = select_variant
+        @system_arguments[:classes] = class_names(
+          SCHEME_MAPPINGS[@scheme],
+          system_arguments[:classes],
+          "ActionListWrap",
+          "ActionListWrap--divided" => @show_dividers
+        )
+
+        @role = role || (allows_selection? ? MENU_ROLE : DEFAULT_ROLE)
+        @system_arguments[:role] = @role
+
+        @list_wrapper_arguments = {}
+
+        @form_builder = form_arguments[:builder]
+        @input_name = form_arguments[:name]
+
+        return unless required_form_arguments_given? && !allows_selection?
+
+        raise ArgumentError, "lists/menus that act as form inputs must also allow item selection (please pass the `select_variant:` option)"
+      end
+
+      # @private
+      def before_render
+        return unless heading?
+
+        @system_arguments[:"aria-labelledby"] = heading.title_id
+        @system_arguments[:"aria-describedby"] = heading.subtitle_id if heading.subtitle?
+      end
+
+      # Builds a new item but does not add it to the list. Use this method
+      # instead of the `#with_item` slot if you need to render an item outside
+      # the context of a list, eg. if rendering additional items to append to
+      # an existing list, perhaps via a separate HTTP request.
+      #
+      # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Alpha::ActionList::Item) %>
+      # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::ActionList::Item) %>, or whatever class is passed as the `component_klass` argument.
+      def build_item(component_klass: ActionList::Item, **system_arguments)
+        # rubocop:disable Style/IfUnlessModifier
+        if single_select? && system_arguments[:active] && items.count(&:active?).positive?
+          raise ArgumentError, "only a single item may be active when select_variant is set to :single"
+        end
+        # rubocop:enable Style/IfUnlessModifier
+
+        system_arguments[:classes] = class_names(
+          @item_classes,
+          system_arguments[:classes]
+        )
+
+        component_klass.new(list: self, **system_arguments)
+      end
+
+      # Builds a new avatar item but does not add it to the list. Avatar items
+      # are a convenient way to accessibly add an item with a leading avatar
+      # image. Use this method instead of the `#with_avatar_item` slot if you
+      # need to render an avatar item outside the context of a list, eg. if
+      # rendering additional items to append to an existing list, perhaps via
+      # a separate HTTP request.
+      #
+      # @param src [String] The source url of the avatar image.
+      # @param username [String] The username associated with the avatar.
+      # @param full_name [String] Optional. The user's full name.
+      # @param full_name_scheme [Symbol] Optional. How to display the user's full name. <%= one_of(Primer::Alpha::ActionList::Item::DESCRIPTION_SCHEME_OPTIONS) %>
+      # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Alpha::ActionList::Item) %>
+      # @param avatar_arguments [Hash] Optional. The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %>
+      # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::ActionList::Item) %>, or whatever class is passed as the `component_klass` argument.
+      def build_avatar_item(src:, username:, full_name: nil, full_name_scheme: Primer::Alpha::ActionList::Item::DEFAULT_DESCRIPTION_SCHEME, component_klass: ActionList::Item, avatar_arguments: {}, **system_arguments)
+        build_item(label: username, description_scheme: full_name_scheme, component_klass: component_klass, **system_arguments).tap do |item|
+          item.with_leading_visual_raw_content do
+            # no alt text necessary for presentational item
+            item.render(Primer::Beta::Avatar.new(src: src, **avatar_arguments, role: :presentation, size: 16))
+          end
+
+          item.with_description_content(full_name) if full_name
+        end
+      end
+
+      def single_select?
+        select_variant == :single
+      end
+
+      def multi_select?
+        select_variant == :multiple || select_variant == :multiple_checkbox
+      end
+
+      def allows_selection?
+        single_select? || multi_select?
+      end
+
+      def acts_as_menu?
+        @system_arguments[:role] == :menu
+      end
+
+      def required_form_arguments_given?
+        @form_builder && @input_name
+      end
+
+      def acts_as_form_input?
+        required_form_arguments_given? && allows_selection?
+      end
+
+      # @private
+      def will_add_item(_item); end
+
+      private
+
+      def with_post_list_content(&block)
+        @post_list_content_block = block
+      end
+
+      attr_reader :post_list_content_block
+    end
+  end
+end

data/app/components/primer/alpha/action_menu/action_menu_element.d.ts

@@ -0,0 +1,31 @@
+import '@oddbird/popover-polyfill';
+import type { IncludeFragmentElement } from '@github/include-fragment-element';
+type SelectVariant = 'none' | 'single' | 'multiple' | null;
+type SelectedItem = {
+    label: string | null | undefined;
+    value: string | null | undefined;
+    element: Element;
+};
+export declare class ActionMenuElement extends HTMLElement {
+    #private;
+    includeFragment: IncludeFragmentElement;
+    get selectVariant(): SelectVariant;
+    set selectVariant(variant: SelectVariant);
+    get dynamicLabelPrefix(): string;
+    set dynamicLabelPrefix(value: string);
+    get dynamicLabel(): boolean;
+    set dynamicLabel(value: boolean);
+    get popoverElement(): HTMLElement | null;
+    get invokerElement(): HTMLButtonElement | null;
+    get invokerLabel(): HTMLElement | null;
+    get selectedItems(): SelectedItem[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+}
+declare global {
+    interface Window {
+        ActionMenuElement: typeof ActionMenuElement;
+    }
+}
+export {};

data/app/components/primer/alpha/action_menu/action_menu_element.js

@@ -0,0 +1,241 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_isActivationKeydown, _ActionMenuElement_firstItem_get;
+import { controller, target } from '@github/catalyst';
+import '@oddbird/popover-polyfill';
+const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
+let ActionMenuElement = class ActionMenuElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ActionMenuElement_instances.add(this);
+        _ActionMenuElement_abortController.set(this, void 0);
+        _ActionMenuElement_originalLabel.set(this, '');
+        _ActionMenuElement_inputName.set(this, '');
+    }
+    get selectVariant() {
+        return this.getAttribute('data-select-variant');
+    }
+    set selectVariant(variant) {
+        if (variant) {
+            this.setAttribute('data-select-variant', variant);
+        }
+        else {
+            this.removeAttribute('variant');
+        }
+    }
+    get dynamicLabelPrefix() {
+        const prefix = this.getAttribute('data-dynamic-label-prefix');
+        if (!prefix)
+            return '';
+        return `${prefix}:`;
+    }
+    set dynamicLabelPrefix(value) {
+        this.setAttribute('data-dynamic-label', value);
+    }
+    get dynamicLabel() {
+        return this.hasAttribute('data-dynamic-label');
+    }
+    set dynamicLabel(value) {
+        this.toggleAttribute('data-dynamic-label', value);
+    }
+    get popoverElement() {
+        var _a;
+        return ((_a = this.invokerElement) === null || _a === void 0 ? void 0 : _a.popoverTargetElement) || null;
+    }
+    get invokerElement() {
+        var _a;
+        const id = (_a = this.querySelector('[role=menu]')) === null || _a === void 0 ? void 0 : _a.id;
+        if (!id)
+            return null;
+        for (const el of this.querySelectorAll(`[aria-controls]`)) {
+            if (el.getAttribute('aria-controls') === id)
+                return el;
+        }
+        return null;
+    }
+    get invokerLabel() {
+        if (!this.invokerElement)
+            return null;
+        return this.invokerElement.querySelector('.Button-label');
+    }
+    get selectedItems() {
+        const selectedItems = this.querySelectorAll('[aria-checked=true]');
+        const results = [];
+        for (const selectedItem of selectedItems) {
+            const labelEl = selectedItem.querySelector('.ActionListItem-label');
+            results.push({
+                label: labelEl === null || labelEl === void 0 ? void 0 : labelEl.textContent,
+                value: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.getAttribute('data-value'),
+                element: selectedItem
+            });
+        }
+        return results;
+    }
+    connectedCallback() {
+        const { signal } = (__classPrivateFieldSet(this, _ActionMenuElement_abortController, new AbortController(), "f"));
+        this.addEventListener('keydown', this, { signal });
+        this.addEventListener('click', this, { signal });
+        this.addEventListener('mouseover', this, { signal });
+        this.addEventListener('focusout', this, { signal });
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
+        if (this.includeFragment) {
+            this.includeFragment.addEventListener('include-fragment-replaced', this, { signal });
+        }
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
+    }
+    handleEvent(event) {
+        var _a, _b;
+        if (event.target === this.invokerElement && __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivationKeydown).call(this, event)) {
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)) {
+                event.preventDefault();
+                (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.showPopover();
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
+                return;
+            }
+        }
+        if (!((_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.matches(':popover-open')))
+            return;
+        if (event.type === 'include-fragment-replaced') {
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get))
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
+        }
+        else if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivationKeydown).call(this, event) || (event instanceof MouseEvent && event.type === 'click')) {
+            // Hide popover after current event loop to prevent changes in focus from
+            // altering the target of the event. Not doing this specifically affects
+            // <a> tags. It causes the event to be sent to the currently focused element
+            // instead of the anchor, which effectively prevents navigation, i.e. it
+            // appears as if hitting enter does nothing. Curiously, clicking instead
+            // works fine.
+            if (this.selectVariant !== 'multiple') {
+                setTimeout(() => {
+                    var _a, _b;
+                    if ((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.matches(':popover-open')) {
+                        (_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.hidePopover();
+                    }
+                });
+            }
+            // The rest of the code below deals with single/multiple selection behavior, and should not
+            // interfere with events fired by menu items whose behavior is specified outside the library.
+            if (this.selectVariant !== 'multiple' && this.selectVariant !== 'single')
+                return;
+            const item = event.target.closest(menuItemSelectors.join(','));
+            if (!item)
+                return;
+            const ariaChecked = item.getAttribute('aria-checked');
+            const checked = ariaChecked !== 'true';
+            if (this.selectVariant === 'single') {
+                // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
+                if (checked) {
+                    item.setAttribute('aria-checked', 'true');
+                }
+                for (const checkedItem of this.querySelectorAll('[aria-checked]')) {
+                    if (checkedItem !== item) {
+                        checkedItem.setAttribute('aria-checked', 'false');
+                    }
+                }
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
+            }
+            else {
+                // multi-select mode allows unchecking a checked item
+                item.setAttribute('aria-checked', `${checked}`);
+            }
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
+            if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
+                // prevent buttons from being clicked twice
+                event.preventDefault();
+            }
+        }
+    }
+};
+_ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalLabel = new WeakMap(), _ActionMenuElement_inputName = new WeakMap(), _ActionMenuElement_instances = new WeakSet(), _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
+    if (!this.dynamicLabel)
+        return;
+    const invokerLabel = this.invokerLabel;
+    if (!invokerLabel)
+        return;
+    __classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invokerLabel.textContent || ''), "f");
+    const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label');
+    if (itemLabel && this.dynamicLabel) {
+        const prefixSpan = document.createElement('span');
+        prefixSpan.classList.add('color-fg-muted');
+        const contentSpan = document.createElement('span');
+        prefixSpan.textContent = this.dynamicLabelPrefix;
+        contentSpan.textContent = itemLabel.textContent || '';
+        invokerLabel.replaceChildren(prefixSpan, contentSpan);
+    }
+    else {
+        invokerLabel.textContent = __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f");
+    }
+}, _ActionMenuElement_updateInput = function _ActionMenuElement_updateInput() {
+    if (this.selectVariant === 'single') {
+        const input = this.querySelector(`[data-list-inputs=true] input`);
+        if (!input)
+            return;
+        const selectedItem = this.selectedItems[0];
+        if (selectedItem) {
+            input.value = (selectedItem.value || selectedItem.label || '').trim();
+            input.removeAttribute('disabled');
+        }
+        else {
+            input.setAttribute('disabled', 'disabled');
+        }
+    }
+    else if (this.selectVariant !== 'none') {
+        // multiple select variant
+        const inputList = this.querySelector('[data-list-inputs=true]');
+        if (!inputList)
+            return;
+        const inputs = inputList.querySelectorAll('input');
+        if (inputs.length > 0) {
+            __classPrivateFieldSet(this, _ActionMenuElement_inputName, __classPrivateFieldGet(this, _ActionMenuElement_inputName, "f") || inputs[0].name, "f");
+        }
+        for (const selectedItem of this.selectedItems) {
+            const newInput = document.createElement('input');
+            newInput.setAttribute('data-list-input', 'true');
+            newInput.type = 'hidden';
+            newInput.autocomplete = 'off';
+            newInput.name = __classPrivateFieldGet(this, _ActionMenuElement_inputName, "f");
+            newInput.value = (selectedItem.value || selectedItem.label || '').trim();
+            inputList.append(newInput);
+        }
+        for (const input of inputs) {
+            input.remove();
+        }
+    }
+}, _ActionMenuElement_isActivationKeydown = function _ActionMenuElement_isActivationKeydown(event) {
+    return (event instanceof KeyboardEvent &&
+        event.type === 'keydown' &&
+        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+        (event.key === 'Enter' || event.key === ' '));
+}, _ActionMenuElement_firstItem_get = function _ActionMenuElement_firstItem_get() {
+    return this.querySelector(menuItemSelectors.join(','));
+};
+__decorate([
+    target
+], ActionMenuElement.prototype, "includeFragment", void 0);
+ActionMenuElement = __decorate([
+    controller
+], ActionMenuElement);
+export { ActionMenuElement };
+if (!window.customElements.get('action-menu')) {
+    window.ActionMenuElement = ActionMenuElement;
+    window.customElements.define('action-menu', ActionMenuElement);
+}