// Copyright 2022 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import '//resources/cr_elements/cr_action_menu/cr_action_menu.js';
import '//resources/cr_elements/cr_button/cr_button.js';
import '//resources/cr_elements/cr_icon_button/cr_icon_button.js';
import '//resources/cr_elements/icons.html.js';
import { AnchorAlignment } from '//resources/cr_elements/cr_action_menu/cr_action_menu.js';
import { CrLitElement } from '//resources/lit/v3_0/lit.rollup.js';
import { getCss } from './cr_action_menu_demo.css.js';
import { getHtml } from './cr_action_menu_demo.html.js';
export class CrActionMenuDemoElement extends CrLitElement {
    static get is() {
        return 'cr-action-menu-demo';
    }
    static get styles() {
        return getCss();
    }
    render() {
        return getHtml.bind(this)();
    }
    static get properties() {
        return {
            alignmentOptions_: { type: Array },
            customAlignmentX_: { type: String },
            customAlignmentY_: { type: String },
        };
    }
    #alignmentOptions__accessor_storage = [
        'BEFORE_START',
        'AFTER_START',
        'CENTER',
        'BEFORE_END',
        'AFTER_END',
    ];
    get alignmentOptions_() { return this.#alignmentOptions__accessor_storage; }
    set alignmentOptions_(value) { this.#alignmentOptions__accessor_storage = value; }
    #customAlignmentX__accessor_storage = 'CENTER';
    get customAlignmentX_() { return this.#customAlignmentX__accessor_storage; }
    set customAlignmentX_(value) { this.#customAlignmentX__accessor_storage = value; }
    #customAlignmentY__accessor_storage = 'CENTER';
    get customAlignmentY_() { return this.#customAlignmentY__accessor_storage; }
    set customAlignmentY_(value) { this.#customAlignmentY__accessor_storage = value; }
    onShowAnchoredMenuClick_(event) {
        this.$.menu.showAt(event.target);
    }
    onDemosContextmenu_(event) {
        event.preventDefault();
        this.$.menu.close();
        this.$.menu.showAtPosition({ top: event.clientY, left: event.clientX });
    }
    onShowMinMaxMenuClick_(event) {
        const minMaxContainerRect = this.$.minMaxContainer.getBoundingClientRect();
        const config = {
            minX: minMaxContainerRect.left,
            maxX: minMaxContainerRect.right,
            minY: minMaxContainerRect.top,
            maxY: minMaxContainerRect.bottom,
        };
        this.$.menu.showAt(event.target, config);
    }
    onAnchorAlignmentDemoClick_() {
        this.$.menu.showAt(this.$.anchorAlignmentDemo, {
            anchorAlignmentX: AnchorAlignment[this.customAlignmentX_],
            anchorAlignmentY: AnchorAlignment[this.customAlignmentY_],
        });
    }
    isSelectedAlignment_(selectedAlignment, option) {
        return selectedAlignment === option;
    }
    onCustomAlignmentXChange_(e) {
        this.customAlignmentX_ =
            e.target.value;
    }
    onCustomAlignmentYChange_(e) {
        this.customAlignmentY_ =
            e.target.value;
    }
}
export const tagName = CrActionMenuDemoElement.is;
customElements.define(CrActionMenuDemoElement.is, CrActionMenuDemoElement);
