"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__, {
    AtomicGeneratedAnswerFeedbackModal: ()=>AtomicGeneratedAnswerFeedbackModal
});
require("../atomic-icon/atomic-icon.cjs");
require("../atomic-modal/atomic-modal.cjs");
const external_lit_namespaceObject = require("lit");
const decorators_js_namespaceObject = require("lit/decorators.js");
const ref_js_namespaceObject = require("lit/directives/ref.js");
const export_parts_cjs_namespaceObject = require("../atomic-modal/export-parts.cjs");
const external_button_cjs_namespaceObject = require("../button.cjs");
const external_fieldset_group_cjs_namespaceObject = require("../fieldset-group.cjs");
const external_icon_button_cjs_namespaceObject = require("../icon-button.cjs");
const external_radio_button_cjs_namespaceObject = require("../radio-button.cjs");
const boolean_converter_cjs_namespaceObject = require("../../../converters/boolean-converter.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 watch_cjs_namespaceObject = require("../../../decorators/watch.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 replace_breakpoint_utils_cjs_namespaceObject = require("../../../utils/replace-breakpoint-utils.cjs");
const utils_cjs_namespaceObject = require("../../../utils/utils.cjs");
const close_cjs_namespaceObject = require("../../../images/close.cjs");
var close_cjs_default = /*#__PURE__*/ __webpack_require__.n(close_cjs_namespaceObject);
const success_cjs_namespaceObject = require("../../../images/success.cjs");
var success_cjs_default = /*#__PURE__*/ __webpack_require__.n(success_cjs_namespaceObject);
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 AtomicGeneratedAnswerFeedbackModal extends external_lit_namespaceObject.LitElement {
    initialize() {}
    watchToggleOpen(_oldValue, newValue) {
        if (newValue) this.generatedAnswer.openFeedbackModal();
    }
    getInitialAnswerState() {
        return {
            documented: void 0,
            correctTopic: void 0,
            hallucinationFree: void 0,
            readable: void 0
        };
    }
    resetState() {
        this.feedbackSubmitted = false;
        this.currentAnswer = this.getInitialAnswerState();
        this.answerEvaluationRequired = false;
        this.isOpen = false;
    }
    clearInputRefs() {
        if (this.detailsInputRef.value) this.detailsInputRef.value.value = '';
        if (this.linkInputRef.value) this.linkInputRef.value.value = '';
    }
    close() {
        this.clearInputRefs();
        this.resetState();
        this.generatedAnswer.closeFeedbackModal();
    }
    setCurrentAnswer(key, value) {
        this.currentAnswer = {
            ...this.currentAnswer,
            [key]: value
        };
    }
    sendFeedback() {
        const feedback = {
            ...this.currentAnswer,
            helpful: this.helpful
        };
        this.generatedAnswer.sendFeedback(feedback);
        this.dispatchEvent(new CustomEvent('feedbackSent'));
    }
    handleSubmit(e) {
        e.preventDefault();
        if (this.isAnyAnswerEvaluationUndefined()) {
            this.answerEvaluationRequired = true;
            return;
        }
        this.feedbackSubmitted = true;
        this.answerEvaluationRequired = false;
        this.sendFeedback();
    }
    renderHeader() {
        return (0, external_lit_namespaceObject.html)`
      <div
        slot="header"
        part="modal-header"
        class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'flex w-full items-center justify-between': true
        })}
      >
        <h1>
          <span>${this.bindings.i18n.t('feedback-modal-title')}</span>
          <span class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'hide ml-0.5': true
        })}>
            ${this.bindings.i18n.t('additional-feedback')}
          </span>
        </h1>
        ${(0, external_icon_button_cjs_namespaceObject.renderIconButton)({
            props: {
                style: 'text-transparent',
                class: 'search-clear-button',
                onClick: ()=>this.close(),
                icon: close_cjs_default(),
                partPrefix: 'close',
                ariaLabel: this.bindings.i18n.t('close')
            }
        })}
      </div>
    `;
    }
    renderFeedbackOption(option, correspondingAnswer) {
        const isSelected = this.currentAnswer[correspondingAnswer] === option;
        return (0, external_radio_button_cjs_namespaceObject.renderRadioButton)({
            props: {
                key: String(correspondingAnswer),
                groupName: this.bindings.i18n.t(correspondingAnswer),
                style: 'outline-neutral',
                checked: isSelected,
                onChecked: ()=>{
                    this.setCurrentAnswer(correspondingAnswer, option);
                },
                class: `min-w-20 flex items-center justify-center whitespace-nowrap px-3 py-1.5 mr-1 text-neutral-dark ${isSelected ? 'active' : ''}`,
                text: this.bindings.i18n.t(option)
            }
        });
    }
    renderAnswerEvaluation(label, correspondingAnswer) {
        const isRequired = this.answerEvaluationRequired && void 0 === this.currentAnswer[correspondingAnswer];
        return (0, external_lit_namespaceObject.html)`
      <div class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            block: true
        })}>
        <div class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            flex: true
        })}>
          <label class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'text-base': true
        })}>
            ${this.bindings.i18n.t(label)}
            <span class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'text-error-red ml-0.5': true
        })}
              >*</span
            >
          </label>
        </div>
        <span
          class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'text-error-red text-sm': true,
            hidden: !isRequired
        })}
        >
          ${this.bindings.i18n.t('required-fields-error')}
        </span>
      </div>
    `;
    }
    renderRequiredFieldsAlert() {
        return (0, external_lit_namespaceObject.html)`
      <span
        class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'sr-only': true,
            hidden: !this.answerEvaluationRequired
        })}
        role="alert"
      >
        ${this.bindings.i18n.t('required-fields-error')}
      </span>
    `;
    }
    renderFeedbackOptions() {
        return (0, external_lit_namespaceObject.html)`
      <fieldset>
        <legend class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'font-bold': true
        })}>
          ${this.bindings.i18n.t('answer-evaluation')}
        </legend>
        ${AtomicGeneratedAnswerFeedbackModal.options.map(({ localeKey, correspondingAnswer })=>(0, external_fieldset_group_cjs_namespaceObject.renderFieldsetGroup)({
                props: {
                    label: this.bindings.i18n.t(localeKey)
                }
            })((0, external_lit_namespaceObject.html)`
              <div
                class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
                'answer-evaluation mt-3 flex items-center': true,
                [String(correspondingAnswer)]: true
            })}
                key=${String(correspondingAnswer)}
              >
                <div class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
                'flex-1 pr-4': true
            })}>
                  ${this.renderAnswerEvaluation(localeKey, correspondingAnswer)}
                </div>
                <div
                  class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
                'options flex flex-shrink-0 text-base': true
            })}
                >
                  ${this.renderFeedbackOption('yes', correspondingAnswer)}
                  ${this.renderFeedbackOption('unknown', correspondingAnswer)}
                  ${this.renderFeedbackOption('no', correspondingAnswer)}
                </div>
              </div>
            `))}
      </fieldset>
    `;
    }
    renderLinkToCorrectAnswerField() {
        return (0, external_lit_namespaceObject.html)`
      <fieldset>
        <legend class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'font-bold': true
        })}>
          ${this.bindings.i18n.t('generated-answer-feedback-link')}
        </legend>
        <input
          type="text"
          ${(0, ref_js_namespaceObject.ref)(this.linkInputRef)}
          placeholder="https://URL"
          class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'input-primary placeholder-neutral-dark mt-4 h-9 w-full rounded-md px-4': true
        })}
          @change=${(e)=>this.setCurrentAnswer('documentUrl', e.currentTarget.value)}
        />
      </fieldset>
    `;
    }
    renderAddNotesField() {
        return (0, external_lit_namespaceObject.html)`
      <fieldset>
        <legend class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'mt-8 font-bold': true
        })}>
          ${this.bindings.i18n.t('generated-answer-additional-notes')}
        </legend>
        <textarea
          name="answer-details"
          ${(0, ref_js_namespaceObject.ref)(this.detailsInputRef)}
          class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'placeholder-neutral-dark border-neutral hover:border-primary-light focus-visible:border-primary mt-4 w-full resize-none rounded-md border px-4 py-2 leading-5 focus:outline-hidden focus-visible:ring-2': true
        })}
          rows="4"
          placeholder=${this.bindings.i18n.t('add-notes')}
          @change=${(e)=>this.setCurrentAnswer('details', e.currentTarget.value)}
        ></textarea>
      </fieldset>
    `;
    }
    renderFeedbackForm() {
        return (0, external_lit_namespaceObject.html)`
      <form
        part="form"
        id=${this.formId}
        slot="body"
        @submit=${(e)=>this.handleSubmit(e)}
        class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'flex flex-col gap-8 leading-4': true
        })}
      >
        ${this.renderRequiredFieldsAlert()} ${this.renderFeedbackOptions()}
        ${this.renderLinkToCorrectAnswerField()} ${this.renderAddNotesField()}
      </form>
    `;
    }
    renderSuccessMessage() {
        return (0, external_lit_namespaceObject.html)`
      <div
        slot="body"
        class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'my-4 flex flex-col items-center gap-4': true
        })}
      >
        <atomic-icon
          icon=${success_cjs_default()}
          class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'w-48': true
        })}
        ></atomic-icon>
        <p
          class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'text-base': true
        })}
          role="status"
          aria-live="polite"
          aria-atomic="true"
        >
          ${this.bindings.i18n.t('generated-answer-feedback-success')}
        </p>
      </div>
    `;
    }
    renderBody() {
        if (!this.feedbackSubmitted) return this.renderFeedbackForm();
        return this.renderSuccessMessage();
    }
    renderFeedbackFormFooter() {
        const buttonClasses = 'flex items-center justify-center text-sm leading-4 p-2 rounded-md';
        return (0, external_lit_namespaceObject.html)`
      <div slot="footer" part="modal-footer">
        <div
          class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'flex items-center justify-between': true
        })}
        >
          <div class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'required-label text-base': true
        })}>
            <span class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'text-error-red mr-0.5': true
        })}
              >*</span
            >
            ${this.bindings.i18n.t('required-fields')}
          </div>
          <div class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'flex gap-2': true
        })}>
            ${(0, external_button_cjs_namespaceObject.renderButton)({
            props: {
                part: 'cancel-button',
                style: 'outline-primary',
                class: buttonClasses,
                ariaLabel: this.bindings.i18n.t('skip'),
                onClick: ()=>this.close()
            }
        })((0, external_lit_namespaceObject.html)`${this.bindings.i18n.t('skip')}`)}
            ${(0, external_button_cjs_namespaceObject.renderButton)({
            props: {
                part: 'submit-button',
                style: 'primary',
                type: 'submit',
                form: this.formId,
                class: buttonClasses,
                ariaLabel: this.bindings.i18n.t('generated-answer-send-feedback')
            }
        })((0, external_lit_namespaceObject.html)`${this.bindings.i18n.t('generated-answer-send-feedback')}`)}
          </div>
        </div>
      </div>
    `;
    }
    renderSuccessFormFooter() {
        return (0, external_lit_namespaceObject.html)`
      <div slot="footer">
        <div class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
            'flex justify-end gap-2 p-2': true
        })}>
          ${(0, external_button_cjs_namespaceObject.renderButton)({
            props: {
                part: 'cancel-button',
                style: 'primary',
                onClick: ()=>this.close(),
                class: 'flex justify-center p-2 text-sm leading-4',
                ariaLabel: this.bindings.i18n.t('modal-done')
            }
        })((0, external_lit_namespaceObject.html)`${this.bindings.i18n.t('modal-done')}`)}
        </div>
      </div>
    `;
    }
    renderFooter() {
        if (!this.feedbackSubmitted) return this.renderFeedbackFormFooter();
        return this.renderSuccessFormFooter();
    }
    render() {
        this.updateBreakpoints();
        return (0, external_lit_namespaceObject.html)`
      <atomic-modal
        .fullscreen=${false}
        .isOpen=${this.isOpen}
        .close=${()=>this.close()}
        .container=${this}
        part="generated-answer-feedback-modal"
        exportparts=${export_parts_cjs_namespaceObject.ATOMIC_MODAL_EXPORT_PARTS}
      >
        ${this.renderHeader()} ${this.renderBody()} ${this.renderFooter()}
      </atomic-modal>
    `;
    }
    constructor(...args){
        super(...args), this.isOpen = false, this.helpful = false, this.currentAnswer = this.getInitialAnswerState(), this.feedbackSubmitted = false, this.answerEvaluationRequired = false, this.formId = (0, utils_cjs_namespaceObject.randomID)('atomic-generated-answer-feedback-modal-form-'), this.detailsInputRef = (0, ref_js_namespaceObject.createRef)(), this.linkInputRef = (0, ref_js_namespaceObject.createRef)(), this.updateBreakpoints = (0, utils_cjs_namespaceObject.once)(()=>(0, replace_breakpoint_utils_cjs_namespaceObject.updateBreakpoints)(this)), this.isAnyAnswerEvaluationUndefined = ()=>Object.values(this.currentAnswer).some((value)=>void 0 === value);
    }
}
AtomicGeneratedAnswerFeedbackModal.options = [
    {
        localeKey: 'feedback-correct-topic',
        correspondingAnswer: 'correctTopic'
    },
    {
        localeKey: 'feedback-hallucination-free',
        correspondingAnswer: 'hallucinationFree'
    },
    {
        localeKey: 'feedback-documented',
        correspondingAnswer: 'documented'
    },
    {
        localeKey: 'feedback-readable',
        correspondingAnswer: 'readable'
    }
];
AtomicGeneratedAnswerFeedbackModal.styles = (0, external_lit_namespaceObject.css)`
    @reference '../../../utils/tailwind.global.tw.css';

    @utility mobile-feedback-modal {
      &::part(container) {
        @apply w-auto min-w-full;
      }

      &::part(header),
      &::part(body),
      &::part(footer) {
        @apply max-w-full;
      }
      [part='buttons'] {
        .required-label {
          @apply text-sm;
        }
      }
      [part='form'] {
        .answer-evaluation {
          @apply block;
        }

        .options {
          @apply mt-2;
        }
      }
      [part='modal-header'] {
        .hide {
          @apply hidden;
        }
      }
    }

    [part='generated-answer-feedback-modal'] {
      &::part(container) {
        @apply min-w-170;
      }

      &::part(header),
      &::part(body),
      &::part(footer) {
        @apply max-w-170;
      }

      @media not all and (width >= theme(--breakpoint-desktop)) {
        @apply mobile-feedback-modal;
      }
    }

    [part='form'] {
      .active {
        @apply border-primary-light text-primary-light bg-primary-background;
      }
      .text-error-red {
        @apply text-inline-code;
      }
    }
  `;
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: Boolean,
        reflect: true,
        attribute: 'is-open',
        converter: boolean_converter_cjs_namespaceObject.booleanConverter
    })
], AtomicGeneratedAnswerFeedbackModal.prototype, "isOpen", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: Object,
        attribute: false
    }),
    _ts_metadata("design:type", "u" < typeof GeneratedAnswer ? Object : GeneratedAnswer)
], AtomicGeneratedAnswerFeedbackModal.prototype, "generatedAnswer", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: Boolean,
        reflect: true
    })
], AtomicGeneratedAnswerFeedbackModal.prototype, "helpful", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.state)(),
    _ts_metadata("design:type", "u" < typeof AnyBindings ? Object : AnyBindings)
], AtomicGeneratedAnswerFeedbackModal.prototype, "bindings", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.state)(),
    _ts_metadata("design:type", "u" < typeof Error ? Object : Error)
], AtomicGeneratedAnswerFeedbackModal.prototype, "error", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.state)(),
    _ts_metadata("design:type", "u" < typeof Partial ? Object : Partial)
], AtomicGeneratedAnswerFeedbackModal.prototype, "currentAnswer", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.state)()
], AtomicGeneratedAnswerFeedbackModal.prototype, "feedbackSubmitted", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.state)()
], AtomicGeneratedAnswerFeedbackModal.prototype, "answerEvaluationRequired", void 0);
_ts_decorate([
    (0, watch_cjs_namespaceObject.watch)('isOpen'),
    _ts_metadata("design:type", Function),
    _ts_metadata("design:paramtypes", [
        Object,
        Object
    ]),
    _ts_metadata("design:returntype", void 0)
], AtomicGeneratedAnswerFeedbackModal.prototype, "watchToggleOpen", null);
_ts_decorate([
    (0, error_guard_cjs_namespaceObject.errorGuard)(),
    (0, binding_guard_cjs_namespaceObject.bindingGuard)(),
    _ts_metadata("design:type", Function),
    _ts_metadata("design:paramtypes", []),
    _ts_metadata("design:returntype", void 0)
], AtomicGeneratedAnswerFeedbackModal.prototype, "render", null);
AtomicGeneratedAnswerFeedbackModal = _ts_decorate([
    (0, decorators_js_namespaceObject.customElement)('atomic-generated-answer-feedback-modal'),
    (0, bindings_cjs_namespaceObject.bindings)(),
    with_tailwind_styles_cjs_namespaceObject.withTailwindStyles
], AtomicGeneratedAnswerFeedbackModal);
exports.AtomicGeneratedAnswerFeedbackModal = __webpack_exports__.AtomicGeneratedAnswerFeedbackModal;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "AtomicGeneratedAnswerFeedbackModal"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
