"use strict";
var __webpack_require__ = {};
(()=>{
    __webpack_require__.n = (module)=>{
        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
        __webpack_require__.d(getter, {
            a: getter
        });
        return getter;
    };
})();
(()=>{
    __webpack_require__.d = (exports1, definition)=>{
        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
            enumerable: true,
            get: definition[key]
        });
    };
})();
(()=>{
    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
    __webpack_require__.r = (exports1)=>{
        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
            value: 'Module'
        });
        Object.defineProperty(exports1, '__esModule', {
            value: true
        });
    };
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
    AtomicPopover: ()=>AtomicPopover
});
const headless_namespaceObject = require("@coveo/headless");
const core_namespaceObject = require("@popperjs/core");
const external_lit_namespaceObject = require("lit");
const decorators_js_namespaceObject = require("lit/decorators.js");
const ref_js_namespaceObject = require("lit/directives/ref.js");
const when_js_namespaceObject = require("lit/directives/when.js");
const button_cjs_namespaceObject = require("../../common/button.cjs");
const popover_type_cjs_namespaceObject = require("../../common/facets/popover/popover-type.cjs");
const bind_state_cjs_namespaceObject = require("../../../decorators/bind-state.cjs");
const binding_guard_cjs_namespaceObject = require("../../../decorators/binding-guard.cjs");
const bindings_cjs_namespaceObject = require("../../../decorators/bindings.cjs");
const error_guard_cjs_namespaceObject = require("../../../decorators/error-guard.cjs");
const with_tailwind_styles_cjs_namespaceObject = require("../../../decorators/with-tailwind-styles.cjs");
const multi_class_map_cjs_namespaceObject = require("../../../directives/multi-class-map.cjs");
const arrow_bottom_rounded_cjs_namespaceObject = require("../../../images/arrow-bottom-rounded.cjs");
var arrow_bottom_rounded_cjs_default = /*#__PURE__*/ __webpack_require__.n(arrow_bottom_rounded_cjs_namespaceObject);
const facet_common_tw_css_cjs_namespaceObject = require("../../common/facets/facet-common.tw.css.cjs");
var facet_common_tw_css_cjs_default = /*#__PURE__*/ __webpack_require__.n(facet_common_tw_css_cjs_namespaceObject);
require("../../common/atomic-focus-trap/atomic-focus-trap.cjs");
require("../../common/atomic-icon/atomic-icon.cjs");
function _ts_decorate(decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) 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;
}
function _ts_metadata(k, v) {
    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
}
class AtomicPopover extends external_lit_namespaceObject.LitElement {
    initialize() {
        this.searchStatus = (0, headless_namespaceObject.buildSearchStatus)(this.bindings.engine);
        if (0 === this.children.length) {
            this.error = new Error('One child is required inside a set of popover tags.');
            return;
        }
        if (this.children.length > 1) this.error = new Error('Cannot have more than one child inside a set of popover tags.');
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('atomic/initializePopover', this.handleInitializePopover);
        this.addEventListener('keydown', this.handleKeyDown);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.removeEventListener('atomic/initializePopover', this.handleInitializePopover);
        this.removeEventListener('keydown', this.handleKeyDown);
    }
    render() {
        if (!this.searchStatus || this.searchStatusState?.hasError) return (0, external_lit_namespaceObject.html)``;
        if (!this.searchStatusState?.firstSearchExecuted) return (0, external_lit_namespaceObject.html)`
        <div
          part="placeholder"
          aria-hidden="true"
          class="bg-neutral h-8 w-32 animate-pulse rounded"
        ></div>
      `;
        if (!this.searchStatusState?.hasResults || !this.childFacet?.hasValues()) return (0, external_lit_namespaceObject.html)``;
        return (0, external_lit_namespaceObject.html)`
      <atomic-focus-trap
        .source=${this.buttonRef.value}
        .container=${this.popupRef.value}
        .active=${this.isOpen}
        .shouldHideSelf=${false}
      >
        ${this.renderPopover()}
      </atomic-focus-trap>
      ${(0, when_js_namespaceObject.when)(this.isOpen, ()=>this.renderBackdrop())}
    `;
    }
    updated() {
        if (!this.buttonRef.value || !this.popupRef.value) return;
        if (this.popperInstance) this.popperInstance.forceUpdate();
        else this.popperInstance = (0, core_namespaceObject.createPopperLite)(this.buttonRef.value, this.popupRef.value, {
            placement: 'bottom-start',
            modifiers: [
                core_namespaceObject.preventOverflow
            ]
        });
    }
    renderDropdownButton() {
        const label = this.label;
        const hasActiveValues = !!this.childFacet.numberOfActiveValues();
        const count = this.childFacet.numberOfActiveValues().toLocaleString(this.bindings.i18n.language);
        const ariaLabel = this.bindings.i18n.t('popover', {
            label
        });
        const buttonClasses = (0, multi_class_map_cjs_namespaceObject.tw)({
            'hover:border-primary-light focus-visible:border-primary-light group box-border flex h-full max-w-60 min-w-24 items-center rounded p-2.5 hover:border focus-visible:border overflow-hidden relative': true,
            'border-primary ring-ring-primary text-primary z-9999 ring-3': this.isOpen
        });
        const labelClasses = (0, multi_class_map_cjs_namespaceObject.tw)({
            'mr-1.5 truncate': true,
            'group-hover:text-primary-light group-focus:text-primary': !this.isOpen
        });
        const countClasses = (0, multi_class_map_cjs_namespaceObject.tw)({
            'group-hover:text-primary-light group-focus:text-primary mr-1.5 truncate text-sm': true,
            hidden: !hasActiveValues,
            'text-primary': this.isOpen,
            'text-neutral-dark': !this.isOpen
        });
        const iconClasses = (0, multi_class_map_cjs_namespaceObject.tw)({
            'group-hover:text-primary-light group-focus:text-primary ml-auto w-2': true,
            'rotate-180': this.isOpen
        });
        const buttonClassString = Object.entries(buttonClasses).filter(([, value])=>value).map(([key])=>key).join(' ');
        return (0, button_cjs_namespaceObject.renderButton)({
            props: {
                ref: this.buttonRef,
                style: 'square-neutral',
                onClick: ()=>this.toggleOpen(),
                part: 'popover-button',
                ariaExpanded: this.isOpen ? 'true' : 'false',
                ariaLabel,
                ariaControls: this.popoverId,
                class: buttonClassString
            }
        })((0, external_lit_namespaceObject.html)`
      <span
        title=${label}
        part="value-label"
        class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)(labelClasses)}
      >
        ${label}
      </span>
      <span part="value-count" class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)(countClasses)}>
        ${this.bindings.i18n.t('between-parentheses', {
            text: count
        })}
      </span>
      <atomic-icon
        part="arrow-icon"
        class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)(iconClasses)}
        .icon=${arrow_bottom_rounded_cjs_default()}
      ></atomic-icon>
    `);
    }
    renderBackdrop() {
        return (0, external_lit_namespaceObject.html)`
      <div
        part="backdrop"
        class="fixed top-0 right-0 bottom-0 left-0 z-9998 cursor-pointer bg-transparent"
        @click=${()=>this.closePopover()}
      ></div>
    `;
    }
    renderPopover() {
        return (0, external_lit_namespaceObject.html)`
      <div class=${`relative ${this.isOpen ? 'z-9999' : ''}`}>
        ${this.renderDropdownButton()}
        <div
          id=${this.popoverId}
          ${(0, ref_js_namespaceObject.ref)(this.popupRef)}
          part="facet"
          class=${`absolute pt-0.5 ${this.isOpen ? 'block' : 'hidden'}`}
        >
          <slot></slot>
        </div>
      </div>
    `;
    }
    get popoverId() {
        return `${this.childFacet?.facetId}-popover`;
    }
    get label() {
        return this.childFacet.label();
    }
    closePopover() {
        this.isOpen = false;
    }
    toggleOpen() {
        this.isOpen = !this.isOpen;
    }
    constructor(...args){
        super(...args), this.buttonRef = (0, ref_js_namespaceObject.createRef)(), this.popupRef = (0, ref_js_namespaceObject.createRef)(), this.isOpen = false, this.handleInitializePopover = (event)=>{
            if (this.childFacet || !event.detail) return;
            this.childFacet = event.detail;
            this.childFacet.element.classList.add(popover_type_cjs_namespaceObject.popoverClass);
        }, this.handleKeyDown = (e)=>{
            if ('Escape' === e.key && this.isOpen) this.closePopover();
        };
    }
}
AtomicPopover.styles = [
    facet_common_tw_css_cjs_default()
];
_ts_decorate([
    (0, decorators_js_namespaceObject.state)(),
    _ts_metadata("design:type", "u" < typeof Bindings ? Object : Bindings)
], AtomicPopover.prototype, "bindings", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.state)(),
    _ts_metadata("design:type", "u" < typeof Error ? Object : Error)
], AtomicPopover.prototype, "error", void 0);
_ts_decorate([
    (0, bind_state_cjs_namespaceObject.bindStateToController)('searchStatus'),
    (0, decorators_js_namespaceObject.state)(),
    _ts_metadata("design:type", "u" < typeof SearchStatusState ? Object : SearchStatusState)
], AtomicPopover.prototype, "searchStatusState", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.state)()
], AtomicPopover.prototype, "isOpen", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.state)(),
    _ts_metadata("design:type", "u" < typeof PopoverChildFacet ? Object : PopoverChildFacet)
], AtomicPopover.prototype, "childFacet", void 0);
_ts_decorate([
    (0, binding_guard_cjs_namespaceObject.bindingGuard)(),
    (0, error_guard_cjs_namespaceObject.errorGuard)(),
    _ts_metadata("design:type", Function),
    _ts_metadata("design:paramtypes", []),
    _ts_metadata("design:returntype", void 0)
], AtomicPopover.prototype, "render", null);
AtomicPopover = _ts_decorate([
    (0, decorators_js_namespaceObject.customElement)('atomic-popover'),
    (0, bindings_cjs_namespaceObject.bindings)(),
    with_tailwind_styles_cjs_namespaceObject.withTailwindStyles
], AtomicPopover);
exports.AtomicPopover = __webpack_exports__.AtomicPopover;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "AtomicPopover"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
