"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__, {
    AtomicIpxButton: ()=>AtomicIpxButton
});
const recommendation_namespaceObject = require("@coveo/headless/recommendation");
const external_lit_namespaceObject = require("lit");
const decorators_js_namespaceObject = require("lit/decorators.js");
const when_js_namespaceObject = require("lit/directives/when.js");
const button_cjs_namespaceObject = require("../../common/button.cjs");
const bindings_cjs_namespaceObject = require("../../../decorators/bindings.cjs");
const with_tailwind_styles_cjs_namespaceObject = require("../../../decorators/with-tailwind-styles.cjs");
const close_cjs_namespaceObject = require("../../../images/close.cjs");
var close_cjs_default = /*#__PURE__*/ __webpack_require__.n(close_cjs_namespaceObject);
const search_cjs_namespaceObject = require("../../../images/search.cjs");
var search_cjs_default = /*#__PURE__*/ __webpack_require__.n(search_cjs_namespaceObject);
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);
}
const numberOrPixelValuePattern = new RegExp(/^(?=.*(?:\d+|px)$).*$/);
class AtomicIpxButton extends external_lit_namespaceObject.LitElement {
    initialize() {}
    async getRecommendations() {
        const recsEngine = this.bindings.interfaceElement.querySelector('atomic-recs-interface')?.engine;
        if (recsEngine) {
            this.recommendationsLoaded = true;
            recsEngine.dispatch((0, recommendation_namespaceObject.loadRecommendationActions)(recsEngine).getRecommendations());
        }
    }
    async onClick() {
        if (!this.recommendationsLoaded) await this.getRecommendations();
        this.isModalOpen ? this.close() : this.open();
    }
    renderIPXButton() {
        const ariaLabel = this.isModalOpen ? 'Close' : 'Open';
        return (0, button_cjs_namespaceObject.renderButton)({
            props: {
                style: 'primary',
                part: 'ipx-button',
                class: 'my-2',
                onClick: ()=>this.onClick(),
                ariaLabel: this.label ?? ariaLabel,
                ariaExpanded: this.isModalOpen ? 'true' : 'false'
            }
        })((0, external_lit_namespaceObject.html)`
      <span part="button-icon">
        <atomic-icon
          part="ipx-close-icon"
          .icon=${this.getIcon(this.closeIcon)}
        ></atomic-icon>
        <atomic-icon
          part="ipx-open-icon"
          .icon=${this.getIcon(this.openIcon)}
        ></atomic-icon>
      </span>
      ${(0, when_js_namespaceObject.when)(this.label, ()=>(0, external_lit_namespaceObject.html)`<span part="button-text">${this.label}</span>`)}
    `);
    }
    render() {
        const [displayedIcon, hiddenIcon] = this.isModalOpen ? [
            'ipx-close-icon',
            'ipx-open-icon'
        ] : [
            'ipx-open-icon',
            'ipx-close-icon'
        ];
        if (this.isModalOpen && !this.recommendationsLoaded) this.getRecommendations();
        return (0, external_lit_namespaceObject.html)`
      <style>
        [part='${displayedIcon}'] {
          transform: translateY(0rem);
        }
        [part='${hiddenIcon}'] {
          transform: translateY(3rem);
        }

        .btn-open {
          [part='${displayedIcon}'] {
            transform: translateY(3rem);
          }

          [part='${hiddenIcon}'] {
            transform: translateY(0rem);
          }
        }
      </style>
      <div class="flex flex-col items-center" part="container">
        ${this.renderIPXButton()}
      </div>
    `;
    }
    get ipxModal() {
        return this.bindings?.interfaceElement?.querySelector('atomic-ipx-modal');
    }
    open() {
        this.isModalOpen = true;
        this.classList.add('btn-open');
        this.ipxModal?.setAttribute('is-open', 'true');
    }
    close() {
        this.isModalOpen = false;
        this.classList.remove('btn-open');
        this.ipxModal?.setAttribute('is-open', 'false');
    }
    getIcon(icon) {
        const initialDiv = document.createElement('div');
        initialDiv.innerHTML = icon;
        const iconElement = initialDiv.querySelector('svg');
        if (!iconElement) return initialDiv.innerHTML;
        const iconWidth = this.getIconWidth(iconElement);
        const iconHeight = this.getIconHeight(iconElement);
        this.cleanupSVGStyles(iconElement);
        if (iconWidth && iconHeight) iconElement.setAttribute('viewBox', `0 0 ${iconWidth} ${iconHeight}`);
        return initialDiv.innerHTML;
    }
    cleanupSVGStyles(iconElement) {
        iconElement.removeAttribute('style');
        iconElement.removeAttribute('width');
        iconElement.removeAttribute('height');
    }
    getIconWidth(icon) {
        const width = icon.getAttribute('width') ?? '';
        if (numberOrPixelValuePattern.test(width)) return width;
        return null;
    }
    getIconHeight(icon) {
        const height = icon.getAttribute('height') ?? '';
        if (numberOrPixelValuePattern.test(height)) return height;
        return null;
    }
    constructor(...args){
        super(...args), this.closeIcon = close_cjs_default(), this.openIcon = search_cjs_default(), this.isModalOpen = false, this.recommendationsLoaded = false;
    }
}
AtomicIpxButton.styles = (0, external_lit_namespaceObject.css)`
    @reference '../../../utils/tailwind.global.tw.css';

    :host {
      [part='ipx-button'] {
        @apply fixed right-12 bottom-1 px-3 whitespace-nowrap;
        height: var(--atomic-ipx-button-height, 2.75rem);
      }

      [part='button-icon'] {
        @apply relative inline-block h-4 w-4 p-0 align-middle;
        font-size: 100%;
      }

      [part='button-text'] {
        @apply ml-2 overflow-hidden;
      }

      [part='ipx-close-icon'],
      [part='ipx-open-icon'] {
        @apply absolute left-0;
        transition: transform 500ms;
      }
    }
  `;
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: String,
        reflect: true
    }),
    _ts_metadata("design:type", String)
], AtomicIpxButton.prototype, "label", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: String,
        reflect: true
    })
], AtomicIpxButton.prototype, "closeIcon", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: String,
        reflect: true
    })
], AtomicIpxButton.prototype, "openIcon", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: Boolean,
        reflect: true,
        attribute: 'is-modal-open'
    })
], AtomicIpxButton.prototype, "isModalOpen", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.state)(),
    _ts_metadata("design:type", "u" < typeof Bindings ? Object : Bindings)
], AtomicIpxButton.prototype, "bindings", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.state)(),
    _ts_metadata("design:type", "u" < typeof Error ? Object : Error)
], AtomicIpxButton.prototype, "error", void 0);
AtomicIpxButton = _ts_decorate([
    (0, decorators_js_namespaceObject.customElement)('atomic-ipx-button'),
    (0, bindings_cjs_namespaceObject.bindings)(),
    with_tailwind_styles_cjs_namespaceObject.withTailwindStyles
], AtomicIpxButton);
exports.AtomicIpxButton = __webpack_exports__.AtomicIpxButton;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "AtomicIpxButton"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
