"use strict";
var __webpack_require__ = {};
(()=>{
    __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__, {
    renderSearchBoxTextArea: ()=>renderSearchBoxTextArea
});
const external_lit_namespaceObject = require("lit");
const if_defined_js_namespaceObject = require("lit/directives/if-defined.js");
const ref_js_namespaceObject = require("lit/directives/ref.js");
const when_js_namespaceObject = require("lit/directives/when.js");
const external_text_area_clear_button_cjs_namespaceObject = require("./text-area-clear-button.cjs");
function syncTextWithReplica(ref, value) {
    const elem = ref.value;
    const parent = elem?.parentNode;
    if (!parent || elem?.value === '\n') return;
    parent.dataset.replicatedValue = value ?? elem?.value;
}
function resetReplicaText(ref) {
    const elem = ref.value;
    const parent = elem?.parentNode;
    if (parent) delete parent.dataset.replicatedValue;
}
function collapseTextArea(ref) {
    const elem = ref.value;
    const parent = elem?.parentNode;
    if (parent) parent.classList.remove('expanded');
}
function expandTextArea(ref) {
    const elem = ref.value;
    const parent = elem?.parentNode;
    if (parent) parent.classList.add('expanded');
}
const renderSearchBoxTextArea = ({ props: { textAreaRef, loading, i18n, onInput, onFocus, onBlur, onChange, onKeyDown, onKeyUp, value, ariaLabel, title, onClear, popup } })=>(0, external_lit_namespaceObject.html)`<div class="flex grow overflow-hidden">
    <div part="textarea-expander" class="grid grow overflow-hidden">
      <textarea
        title=${title}
        part="textarea"
        aria-label=${ariaLabel}
        placeholder=${i18n.t('search')}
        class="placeholder-neutral-dark"
        rows="1"
        @input=${(e)=>{
        onInput?.(e);
        syncTextWithReplica(textAreaRef);
    }}
        @keydown=${(e)=>{
        syncTextWithReplica(textAreaRef);
        if ('Enter' === e.key && !e.shiftKey) e.preventDefault();
        onKeyDown?.(e);
    }}
        @keyup=${(e)=>{
        onKeyUp?.(e);
        if ('Enter' === e.key && !e.shiftKey) return void e.preventDefault();
        syncTextWithReplica(textAreaRef);
    }}
        @blur=${(e)=>{
        onBlur?.(e);
        collapseTextArea(textAreaRef);
        syncTextWithReplica(textAreaRef);
    }}
        @change=${(e)=>{
        onChange?.(e);
        syncTextWithReplica(textAreaRef);
    }}
        @focus=${(e)=>{
        onFocus?.(e);
        const target = e.target;
        syncTextWithReplica(textAreaRef ?? target);
        expandTextArea(textAreaRef ?? target);
    }}
        autocomplete="off"
        autocapitalize="off"
        aria-activedescendant=${(0, if_defined_js_namespaceObject.ifDefined)(popup.activeDescendant)}
        aria-autocomplete="both"
        aria-haspopup="true"
        aria-controls=${popup?.id}
        .value=${value}
        ${(0, ref_js_namespaceObject.ref)(textAreaRef)}
      ></textarea>
    </div>
    ${(0, when_js_namespaceObject.when)(loading, ()=>(0, external_lit_namespaceObject.html)`<div class="ml-2 flex items-center justify-center">
          <span
            part="loading"
            class="loading mr-2 grid h-5 w-5 animate-spin place-items-center rounded-full bg-linear-to-r"
          ></span>
        </div>`)}
    ${(0, when_js_namespaceObject.when)(!loading && 0 !== value.length, ()=>(0, external_lit_namespaceObject.html)`${(0, external_text_area_clear_button_cjs_namespaceObject.renderTextAreaClearButton)({
            props: {
                textAreaRef,
                i18n,
                onClick: ()=>{
                    onClear();
                    resetReplicaText(textAreaRef);
                }
            }
        })}`)}
  </div>`;
exports.renderSearchBoxTextArea = __webpack_exports__.renderSearchBoxTextArea;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "renderSearchBoxTextArea"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
