"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__, {
    renderFacetSearchInput: ()=>renderFacetSearchInput
});
const external_lit_namespaceObject = require("lit");
const ref_js_namespaceObject = require("lit/directives/ref.js");
const when_js_namespaceObject = require("lit/directives/when.js");
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("../../atomic-icon/atomic-icon.cjs");
const external_button_cjs_namespaceObject = require("../../button.cjs");
const inputRef = (0, ref_js_namespaceObject.createRef)();
const renderFacetSearchInput = ({ props })=>{
    const label = props.i18n.t(props.label);
    const search = props.i18n.t('facet-search-input');
    const facetSearch = props.i18n.t('facet-search', {
        label
    });
    const clear = props.i18n.t('clear');
    return (0, external_lit_namespaceObject.html)`
    <div class="mt-3 px-2" part="search-wrapper">
      <div class="relative h-10">
        <input
          ${(0, ref_js_namespaceObject.ref)(inputRef)}
          part="search-input"
          class="input-primary placeholder-neutral-dark group h-full w-full px-9 text-sm"
          type="text"
          placeholder=${search}
          aria-label=${facetSearch}
          .value=${props.query}
          @input=${(e)=>props.onChange(e.target.value)}
        />
        <div
          class="search-icon text-on-background pointer-events-none absolute left-0 inline-flex h-full w-9 items-center justify-center"
        >
          <atomic-icon part="search-icon" .icon=${search_cjs_default()}></atomic-icon>
        </div>
        ${(0, when_js_namespaceObject.when)('' !== props.query, ()=>(0, external_button_cjs_namespaceObject.renderButton)({
            props: {
                style: 'text-transparent',
                title: clear,
                class: 'search-clear-button absolute top-px right-px bottom-px inline-flex w-9 items-center justify-center',
                onClick: ()=>{
                    props.onClear();
                    inputRef.value?.focus();
                }
            }
        })((0, external_lit_namespaceObject.html)`<atomic-icon
              part="search-clear-button"
              .icon=${close_cjs_default()}
            ></atomic-icon>`))}
      </div>
    </div>
  `;
};
exports.renderFacetSearchInput = __webpack_exports__.renderFacetSearchInput;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "renderFacetSearchInput"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
