@momentum-design/components 0.27.6 → 0.28.1

package/dist/components/popover/popover.component.js

@@ -0,0 +1,675 @@
+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 __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { property } from 'lit/decorators.js';
+import { computePosition, autoUpdate, offset, flip, shift, arrow, size } from '@floating-ui/dom';
+import styles from './popover.styles';
+import { Component } from '../../models';
+import { FocusTrapMixin } from '../../utils/mixins/FocusTrapMixin';
+import { popoverStack } from './popover.stack';
+import { COLOR } from '../modalcontainer/modalcontainer.constants';
+import { DEFAULTS, POPOVER_PLACEMENT, TRIGGER } from './popover.constants';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { DataAriaDescribedbyMixin } from '../../utils/mixins/DataAriaDescribedbyMixin';
+import { DataAriaLabelledbyMixin } from '../../utils/mixins/DataAriaLabelledbyMixin';
+import { PopoverEventManager } from './popover.events';
+import { PopoverUtils } from './popover.utils';
+/**
+ * Popover component is a lightweight floating UI element that displays additional content when triggered.
+ * It can be used for tooltips, dropdowns, or contextual menus.
+ * The popover automatically positions itself based on available space and
+ * supports dynamic height adjustments with scrollable content when needed。
+ *
+ * @dependency mdc-button
+ * @dependency mdc-modalcontainer
+ *
+ * @tagname mdc-popover
+ *
+ * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
+ * @cssproperty --mdc-popover-arrow-border - border of the arrow
+ * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover
+ * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover
+ * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
+ * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
+ *
+ * @slot - Default slot for modal container
+ *
+ */
+class Popover extends DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescribedbyMixin(FocusTrapMixin(Component)))) {
+    constructor() {
+        super();
+        /**
+         * The unique ID of the popover.
+         */
+        this.id = '';
+        /**
+         * The ID of the element that triggers the popover.
+         * This attribute is required for the popover to work.
+         */
+        this.triggerID = '';
+        /**
+         * Determines the events that cause the Popover to show.
+         * Multiple event names should be separated by spaces.
+         * For example to allow both click and hover, use 'click mouseenter' as the trigger.
+         * - **click**
+         * - **mouseenter**
+         * - **focusin**
+         * - **manual**
+         * @default click
+         */
+        this.trigger = DEFAULTS.TRIGGER;
+        /**
+         * The placement of the popover.
+         * - **top**
+         * - **top-start**
+         * - **top-end**
+         * - **bottom**
+         * - **bottom-start**
+         * - **bottom-end**
+         * - **left**
+         * - **left-start**
+         * - **left-end**
+         * - **right**
+         * - **right-start**
+         * - **right-end**
+         * @default bottom
+         */
+        this.placement = DEFAULTS.PLACEMENT;
+        /**
+         * Color of the popover
+         * - **tonal**
+         * - **contrast**
+         * @default tonal
+         */
+        this.color = DEFAULTS.COLOR;
+        /**
+         * The visibility of the popover.
+         * @default false
+         */
+        this.visible = DEFAULTS.VISIBLE;
+        /**
+         * The offset of the popover.
+         * @default 4
+         */
+        this.offset = DEFAULTS.OFFSET;
+        /**
+         * Determines whether the focus trap is enabled.
+         * If true, focus will be restricted to the content within this component.
+         * @default false
+         */
+        this.focusTrap = DEFAULTS.FOCUS_TRAP;
+        /**
+         * Prevent outside scrolling when popover show.
+         * @default false
+         */
+        this.preventScroll = DEFAULTS.PREVENT_SCROLL;
+        /**
+         * The arrow visibility of the popover.
+         * @default false
+         */
+        this.showArrow = DEFAULTS.ARROW;
+        /**
+         * The close button visibility of the popover.
+         * @default false
+         */
+        this.closeButton = DEFAULTS.CLOSE_BUTTON;
+        /**
+         * Determines whether the popover is interactive。
+         * @default false
+         */
+        this.interactive = DEFAULTS.INTERACTIVE;
+        /**
+         * The delay of the show/hide popover.
+         * @default 0,0
+         */
+        this.delay = DEFAULTS.DELAY;
+        /**
+         * Hide popover on escape key press.
+         * @default false
+         */
+        this.hideOnEscape = DEFAULTS.HIDE_ON_ESCAPE;
+        /**
+         * Hide popover on blur.
+         * @default false
+         */
+        this.hideOnBlur = DEFAULTS.HIDE_ON_BLUR;
+        /**
+         * Hide on outside click of the popover.
+         * @default false
+         */
+        this.hideOnOutsideClick = DEFAULTS.HIDE_ON_CLICK_OUTSIDE;
+        /**
+         * The focus back to trigger after the popover hide.
+         * @default false
+         */
+        this.focusBackToTrigger = DEFAULTS.FOCUS_BACK;
+        /**
+         * Determines whether the popover with backdrop.
+         * Other than popover and trigger element, the rest of the screen will be covered with a backdrop.
+         * @default false
+         */
+        this.backdrop = DEFAULTS.BACKDROP;
+        /**
+         * Changes the placement of popover to keep it in view when scrolling.
+         * @default true
+         */
+        this.flip = DEFAULTS.FLIP;
+        /**
+         * Changes the size of popover to keep it in view when scrolling.
+         * @default false
+         */
+        this.size = DEFAULTS.SIZE;
+        /**
+         * The z-index of the popover.
+         * @default 1000
+         */
+        this.zIndex = DEFAULTS.Z_INDEX;
+        /**
+         * Element ID that the popover append to.
+         * @default ''
+         */
+        this.appendTo = '';
+        /**
+         * aria-label attribute to be set for close button accessibility.
+         * @default null
+         */
+        this.closeButtonAriaLabel = null;
+        /**
+         * Role of the popover
+         * @default dialog
+         */
+        this.dataRole = DEFAULTS.ROLE;
+        this.arrowElement = null;
+        /** @internal */
+        this.triggerElement = null;
+        /** @internal */
+        this.containerElement = null;
+        /** @internal */
+        this.hoverTimer = null;
+        /** @internal */
+        this.isTriggerClicked = false;
+        /** @internal */
+        this.openDelay = 0;
+        /** @internal */
+        this.closeDelay = 0;
+        /**
+         * Handles the outside click event to close the popover.
+         *
+         * @param event - The mouse event.
+         */
+        this.onOutsidePopoverClick = (event) => {
+            if (popoverStack.peek() !== this)
+                return;
+            let insidePopoverClick = false;
+            const path = event.composedPath();
+            insidePopoverClick = this.contains(event.target) || path.includes(this.triggerElement);
+            const backdropElement = this.renderRoot.querySelector('.popover-backdrop');
+            const clickedOnBackdrop = backdropElement ? path.includes(backdropElement) : false;
+            if (!insidePopoverClick || clickedOnBackdrop) {
+                this.hidePopover();
+            }
+        };
+        /**
+         * Handles the escape keydown event to close the popover.
+         *
+         * @param event - The keyboard event.
+         */
+        this.onEscapeKeydown = (event) => {
+            if (!this.visible || event.code !== 'Escape') {
+                return;
+            }
+            event.preventDefault();
+            this.hidePopover();
+        };
+        /**
+         * Handles the popover focus out event.
+         *
+         * @param event - The focus event.
+         */
+        this.onPopoverFocusOut = (event) => {
+            if (!this.contains(event.relatedTarget)) {
+                this.hidePopover();
+            }
+        };
+        /**
+         * Starts the close delay timer.
+         * If the popover is not interactive, it will close the popover after the delay.
+         */
+        this.startCloseDelay = () => {
+            if (!this.interactive) {
+                this.hidePopover();
+            }
+            else {
+                if (this.isTriggerClicked)
+                    return;
+                this.hoverTimer = window.setTimeout(() => {
+                    this.visible = false;
+                }, this.closeDelay);
+            }
+        };
+        /**
+         * Cancels the close delay timer.
+         */
+        this.cancelCloseDelay = () => {
+            if (this.hoverTimer) {
+                clearTimeout(this.hoverTimer);
+                this.hoverTimer = null;
+            }
+        };
+        /**
+         * Shows the popover.
+         */
+        this.showPopover = () => {
+            this.cancelCloseDelay();
+            setTimeout(() => {
+                this.visible = true;
+                PopoverEventManager.onShowPopover(this);
+            }, this.openDelay);
+            if (popoverStack.peek() !== this) {
+                popoverStack.push(this);
+            }
+        };
+        /**
+         * Hides the popover.
+         */
+        this.hidePopover = () => {
+            if (popoverStack.peek() === this) {
+                setTimeout(() => {
+                    this.visible = false;
+                    PopoverEventManager.onHidePopover(this);
+                    this.isTriggerClicked = false;
+                }, this.closeDelay);
+                popoverStack.pop();
+            }
+        };
+        /**
+         * Toggles the popover visibility.
+         */
+        this.togglePopoverVisible = () => {
+            if (this.isTriggerClicked) {
+                this.hidePopover();
+            }
+            else {
+                this.showPopover();
+                this.isTriggerClicked = true;
+            }
+        };
+        this.utils = new PopoverUtils(this);
+    }
+    async firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.containerElement = this.renderRoot.querySelector('.popover-container');
+        this.utils.setupAppendTo();
+        [this.openDelay, this.closeDelay] = this.utils.setupDelay();
+        this.setupTriggerListener();
+        this.utils.setupAccessibility();
+        PopoverEventManager.onCreatedPopover(this);
+        if (this.visible) {
+            await this.positionPopover();
+            await this.handleCreatePopoverFirstUpdate();
+        }
+    }
+    async disconnectedCallback() {
+        super.disconnectedCallback();
+        await this.removeEventListeners();
+        PopoverEventManager.onDestroyedPopover(this);
+        popoverStack.remove(this);
+    }
+    /**
+     * Sets up the trigger event listeners based on the trigger type.
+     */
+    setupTriggerListener() {
+        var _a, _b;
+        if (!this.triggerID)
+            return;
+        this.triggerElement = document.getElementById(this.triggerID);
+        if (!this.triggerElement)
+            return;
+        if (this.trigger === 'mouseenter') {
+            if (this.interactive) {
+                // if the popover is interactive, there is interactive content inside the popover
+                // so we can't use the focusin trigger, since after closing with escape key, the
+                // popover keeps opening. So we need to use the click trigger instead.
+                this.trigger = 'mouseenter click';
+            }
+            else {
+                // non-interactive popovers with trigger mouseenter (like a tooltip) should also open
+                // when focusing to the trigger element
+                this.trigger = 'mouseenter focusin';
+            }
+        }
+        if (this.trigger.includes('click')) {
+            this.triggerElement.addEventListener('click', this.togglePopoverVisible);
+        }
+        if (this.trigger.includes('mouseenter')) {
+            const hoverBridge = this.renderRoot.querySelector('.popover-hover-bridge');
+            this.triggerElement.addEventListener('mouseenter', this.showPopover);
+            this.triggerElement.addEventListener('mouseleave', this.startCloseDelay);
+            (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.cancelCloseDelay);
+            (_b = this.containerElement) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.startCloseDelay);
+            hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.addEventListener('mouseenter', this.cancelCloseDelay);
+        }
+        if (this.trigger.includes('focusin')) {
+            this.triggerElement.addEventListener('focusin', this.showPopover);
+            if (!this.interactive) {
+                this.triggerElement.addEventListener('focusout', this.hidePopover);
+            }
+        }
+        this.addEventListener('focus-trap-exit', this.hidePopover);
+    }
+    /**
+     * Removes the trigger event listeners.
+     */
+    removeEventListeners() {
+        var _a, _b;
+        if (!this.triggerElement)
+            return;
+        const hoverBridge = this.renderRoot.querySelector('.popover-hover-bridge');
+        this.triggerElement.removeEventListener('click', this.togglePopoverVisible);
+        this.triggerElement.removeEventListener('mouseenter', this.showPopover);
+        this.triggerElement.removeEventListener('mouseleave', this.hidePopover);
+        (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.cancelCloseDelay);
+        (_b = this.containerElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.startCloseDelay);
+        this.triggerElement.removeEventListener('focusin', this.showPopover);
+        this.triggerElement.removeEventListener('focusout', this.hidePopover);
+        hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.removeEventListener('mouseenter', this.cancelCloseDelay);
+        this.removeEventListener('focus-trap-exit', this.hidePopover);
+    }
+    async updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('visible')) {
+            const oldValue = changedProperties.get('visible');
+            await this.isOpenUpdated(oldValue, this.visible);
+        }
+        if (changedProperties.has('placement')) {
+            this.setAttribute('placement', Object.values(POPOVER_PLACEMENT).includes(this.placement) ? this.placement : DEFAULTS.PLACEMENT);
+        }
+        if (changedProperties.has('delay')) {
+            [this.openDelay, this.closeDelay] = this.utils.setupDelay();
+        }
+        if (changedProperties.has('trigger')) {
+            const triggers = this.trigger.split(' ');
+            const validTriggers = triggers.filter((trigger) => Object.values(TRIGGER).includes(trigger));
+            this.setAttribute('trigger', validTriggers.length > 0 ? this.trigger : DEFAULTS.TRIGGER);
+            this.removeEventListeners();
+            this.setupTriggerListener();
+        }
+        if (changedProperties.has('color')) {
+            this.setAttribute('color', Object.values(COLOR).includes(this.color) ? this.color : DEFAULTS.COLOR);
+        }
+        if (changedProperties.has('zIndex')) {
+            this.setAttribute('z-index', `${this.zIndex}`);
+        }
+        if (changedProperties.has('append-to')) {
+            this.utils.setupAppendTo();
+        }
+        if (changedProperties.has('interactive')
+            || changedProperties.has('data-aria-label')
+            || changedProperties.has('data-aria-labelledby')) {
+            this.utils.setupAccessibility();
+        }
+    }
+    /**
+     * Handles the popover visibility change and position the popover.
+     * Handles the exit event to close the popover.
+     *
+     * @param oldValue - The old value of the visible property.
+     * @param newValue - The new value of the visible property.
+     */
+    async isOpenUpdated(oldValue, newValue) {
+        var _a, _b, _c, _d;
+        if (oldValue === newValue || !this.triggerElement) {
+            return;
+        }
+        if (newValue) {
+            this.enabledFocusTrap = this.focusTrap;
+            this.enabledPreventScroll = this.preventScroll;
+            if (this.backdrop) {
+                const popoverBackdrop = this.renderRoot.querySelector('.popover-backdrop');
+                popoverBackdrop.style.zIndex = `${this.zIndex - 1}`;
+                this.triggerElement.style.zIndex = `${this.zIndex}`;
+            }
+            this.positionPopover();
+            await this.handleCreatePopoverFirstUpdate();
+            if (this.hideOnBlur) {
+                (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('focusout', this.onPopoverFocusOut);
+                if (this.trigger === 'click') {
+                    this.triggerElement.style.pointerEvents = 'none';
+                }
+            }
+            if (this.hideOnOutsideClick) {
+                document.addEventListener('click', this.onOutsidePopoverClick);
+            }
+            if (this.hideOnEscape) {
+                document.addEventListener('keydown', this.onEscapeKeydown);
+            }
+            this.triggerElement.setAttribute('aria-expanded', 'true');
+            if (this.interactive) {
+                this.triggerElement.setAttribute('aria-haspopup', this.triggerElement.getAttribute('aria-haspopup') || 'dialog');
+            }
+        }
+        else {
+            if (this.hideOnBlur) {
+                (_b = this.containerElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('focusout', this.onPopoverFocusOut);
+                if (this.trigger === 'click') {
+                    this.triggerElement.style.pointerEvents = '';
+                }
+            }
+            if (this.hideOnOutsideClick) {
+                document.removeEventListener('click', this.onOutsidePopoverClick);
+            }
+            if (this.hideOnEscape) {
+                document.removeEventListener('keydown', this.onEscapeKeydown);
+            }
+            (_c = this.deactivateFocusTrap) === null || _c === void 0 ? void 0 : _c.call(this);
+            this.triggerElement.removeAttribute('aria-expanded');
+            if (this.interactive) {
+                this.triggerElement.removeAttribute('aria-haspopup');
+            }
+            if (this.focusBackToTrigger) {
+                (_d = this.triggerElement) === null || _d === void 0 ? void 0 : _d.focus();
+            }
+        }
+    }
+    /**
+     * Sets the focusable elements inside the popover.
+     */
+    async handleCreatePopoverFirstUpdate() {
+        var _a, _b;
+        if (this.visible && this.interactive) {
+            (_a = this.setFocusableElements) === null || _a === void 0 ? void 0 : _a.call(this);
+            await this.updateComplete;
+            (_b = this.setInitialFocus) === null || _b === void 0 ? void 0 : _b.call(this);
+        }
+    }
+    /**
+     * Positions the popover based on the trigger element.
+     * It also handles the flip, size and arrow placement.
+     * It uses the floating-ui/dom library to calculate the position.
+     */
+    positionPopover() {
+        if (!this.triggerElement || !this.containerElement)
+            return;
+        const middleware = [shift()];
+        let popoverOffset = this.offset;
+        if (this.flip) {
+            middleware.push(flip());
+        }
+        if (this.size) {
+            const popoverContent = this.containerElement.querySelector('[part="popover-content"]');
+            middleware.push(size({
+                apply({ availableHeight }) {
+                    if (!popoverContent)
+                        return;
+                    Object.assign(popoverContent.style, {
+                        maxHeight: `${availableHeight}px`,
+                    });
+                },
+                padding: 50,
+            }));
+        }
+        if (this.showArrow) {
+            this.arrowElement = this.renderRoot.querySelector('.popover-arrow');
+            if (this.arrowElement) {
+                const arrowLen = this.arrowElement.offsetHeight;
+                const arrowOffset = Math.sqrt(2 * arrowLen ** 2) / 2;
+                popoverOffset = arrowOffset + this.offset;
+                middleware.push(arrow({ element: this.arrowElement, padding: 12 }));
+            }
+        }
+        middleware.push(offset(popoverOffset));
+        autoUpdate(this.triggerElement, this.containerElement, async () => {
+            if (!this.triggerElement || !this.containerElement)
+                return;
+            const { x, y, middlewareData, placement } = await computePosition(this.triggerElement, this.containerElement, {
+                placement: this.placement,
+                middleware,
+            });
+            this.utils.updatePopoverStyle(x, y);
+            if (middlewareData.arrow && this.arrowElement) {
+                this.utils.updateArrowStyle(middlewareData.arrow, placement);
+            }
+            if (this.trigger.includes('mouseenter')) {
+                this.utils.setupHoverBridge(placement);
+            }
+        });
+    }
+    render() {
+        return html `
+      ${this.backdrop && this.visible ? html `<div class="popover-backdrop"></div>` : nothing}
+      <mdc-modalcontainer
+        class="popover-container"
+        elevation="3"
+        color=${this.color}
+        ?data-aria-modal=${this.interactive}
+        data-role="${ifDefined(this.dataRole)}"
+        data-aria-label="${ifDefined(this.interactive ? this.dataAriaLabel : undefined)}"
+        data-aria-labelledby="${ifDefined(this.interactive ? this.dataAriaLabelledby : undefined)}"
+        data-aria-describedby="${ifDefined(this.interactive ? this.dataAriaDescribedby : undefined)}"
+        style="z-index: ${this.zIndex};"
+      >
+        <div class="popover-hover-bridge"></div>
+        ${this.closeButton
+            ? html ` <mdc-button
+              class="popover-close"
+              prefix-icon="cancel-bold"
+              variant="tertiary"
+              size="20"
+              aria-label=${ifDefined(this.closeButtonAriaLabel)}
+              @click="${this.hidePopover}"
+            ></mdc-button>`
+            : nothing}
+        ${this.showArrow ? html `<div class="popover-arrow"></div>` : nothing}
+        <div part="popover-content">
+          <slot></slot>
+        </div>
+      </mdc-modalcontainer>
+    `;
+    }
+}
+Popover.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Popover.prototype, "id", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Popover.prototype, "triggerID", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Popover.prototype, "trigger", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Popover.prototype, "placement", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Popover.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "visible", void 0);
+__decorate([
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Number)
+], Popover.prototype, "offset", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'focus-trap' }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "focusTrap", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'prevent-scroll' }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "preventScroll", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-arrow' }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "showArrow", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'close-button' }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "closeButton", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "interactive", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Popover.prototype, "delay", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-on-escape' }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "hideOnEscape", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-on-blur' }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "hideOnBlur", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-on-outside-click' }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "hideOnOutsideClick", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'focus-back-to-trigger' }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "focusBackToTrigger", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "backdrop", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "flip", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "size", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'z-index' }),
+    __metadata("design:type", Number)
+], Popover.prototype, "zIndex", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'append-to' }),
+    __metadata("design:type", String)
+], Popover.prototype, "appendTo", void 0);
+__decorate([
+    property({ type: String, attribute: 'close-button-aria-label' }),
+    __metadata("design:type", Object)
+], Popover.prototype, "closeButtonAriaLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'data-role' }),
+    __metadata("design:type", Object)
+], Popover.prototype, "dataRole", void 0);
+export default Popover;