"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__, {
    identifierKeywordsSection: ()=>identifierKeywordsSection,
    renderKeywords: ()=>renderKeywords
});
const external_lit_namespaceObject = require("lit");
const repeat_js_namespaceObject = require("lit/directives/repeat.js");
const style_map_js_namespaceObject = require("lit/directives/style-map.js");
const fieldset_group_cjs_namespaceObject = require("../../../common/fieldset-group.cjs");
const icon_button_cjs_namespaceObject = require("../../../common/icon-button.cjs");
const multi_class_map_cjs_namespaceObject = require("../../../../directives/multi-class-map.cjs");
const add_cjs_namespaceObject = require("../../../../images/add.cjs");
var add_cjs_default = /*#__PURE__*/ __webpack_require__.n(add_cjs_namespaceObject);
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 arrow_top_rounded_cjs_namespaceObject = require("../../../../images/arrow-top-rounded.cjs");
var arrow_top_rounded_cjs_default = /*#__PURE__*/ __webpack_require__.n(arrow_top_rounded_cjs_namespaceObject);
const remove_cjs_namespaceObject = require("../../../../images/remove.cjs");
var remove_cjs_default = /*#__PURE__*/ __webpack_require__.n(remove_cjs_namespaceObject);
const identifierKeywordsSection = 'coveo-quickview-sidebar-keywords';
const renderKeywords = ({ props })=>(0, external_lit_namespaceObject.html)`
    <div id=${identifierKeywordsSection}>
      ${(0, repeat_js_namespaceObject.repeat)(Object.values(props.words), (keyword)=>keyword.text, (keyword)=>{
        const wordIsEnabled = !props.highlightKeywords.highlightNone && (void 0 === props.highlightKeywords.keywords[keyword.text] || true === props.highlightKeywords.keywords[keyword.text].enabled);
        const keywordContainerClasses = (0, multi_class_map_cjs_namespaceObject.tw)({
            'bg-background border-neutral flex grow items-center overflow-x-auto rounded-lg border': true,
            'pointer-events-none opacity-50': !wordIsEnabled
        });
        const navigationLabel = props.i18n.t('quickview-navigate-keywords', {
            occurrences: keyword.occurrences,
            keyword: keyword.text
        });
        const formattedOccurrences = new Intl.NumberFormat(props.i18n.language, {
            notation: 'compact'
        }).format(keyword.occurrences);
        const toggleLabel = props.i18n.t('quickview-remove-word');
        const ariaPressed = wordIsEnabled ? 'false' : 'true';
        const tabIndex = props.highlightKeywords.highlightNone ? -1 : 0;
        return (0, external_lit_namespaceObject.html)`
            <div class="my-4 flex w-100 items-center justify-between gap-x-2">
              <div class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)(keywordContainerClasses)}>
                <div
                  class="flex grow items-center border-r p-4"
                  aria-hidden="true"
                >
                  <div
                    class="mr-2 h-5 w-5 flex-none"
                    style=${(0, style_map_js_namespaceObject.styleMap)({
            backgroundColor: keyword.color
        })}
                  ></div>
                  <div class="mr-2 grow whitespace-nowrap">${keyword.text}</div>
                  <div class="flex-none">(${formattedOccurrences})</div>
                </div>
                ${(0, fieldset_group_cjs_namespaceObject.renderFieldsetGroup)({
            props: {
                label: navigationLabel
            }
        })((0, external_lit_namespaceObject.html)`
                  <div class="flex px-2">
                    ${(0, icon_button_cjs_namespaceObject.renderIconButton)({
            props: {
                partPrefix: 'sidebar-next',
                icon: arrow_bottom_rounded_cjs_default(),
                disabled: !wordIsEnabled,
                style: 'text-transparent',
                class: 'border-0',
                ariaLabel: props.i18n.t('next'),
                title: props.i18n.t('next'),
                onClick: ()=>keyword.navigateForward()
            }
        })}
                    ${(0, icon_button_cjs_namespaceObject.renderIconButton)({
            props: {
                partPrefix: 'sidebar-previous',
                icon: arrow_top_rounded_cjs_default(),
                disabled: !wordIsEnabled,
                style: 'text-transparent',
                class: 'border-0',
                ariaLabel: props.i18n.t('previous'),
                title: props.i18n.t('previous'),
                onClick: ()=>keyword.navigateBackward()
            }
        })}
                  </div>
                `)}
              </div>
              ${(0, icon_button_cjs_namespaceObject.renderIconButton)({
            props: {
                partPrefix: 'sidebar-remove-word',
                class: props.highlightKeywords.highlightNone ? 'pointer-events-none opacity-50' : '',
                tabIndex,
                ariaPressed,
                style: 'text-transparent',
                icon: wordIsEnabled ? remove_cjs_default() : add_cjs_default(),
                ariaLabel: toggleLabel,
                onClick: ()=>{
                    props.onHighlightKeywords({
                        ...props.highlightKeywords,
                        keywords: {
                            ...props.highlightKeywords.keywords,
                            [keyword.text]: {
                                enabled: !wordIsEnabled,
                                indexIdentifier: keyword.indexIdentifier
                            }
                        }
                    });
                }
            }
        })}
            </div>
          `;
    })}
    </div>
  `;
exports.identifierKeywordsSection = __webpack_exports__.identifierKeywordsSection;
exports.renderKeywords = __webpack_exports__.renderKeywords;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "identifierKeywordsSection",
    "renderKeywords"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
