"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__, {
    AtomicGeneratedAnswerThreadItem: ()=>AtomicGeneratedAnswerThreadItem
});
const external_lit_namespaceObject = require("lit");
const decorators_js_namespaceObject = require("lit/decorators.js");
const class_map_js_namespaceObject = require("lit/directives/class-map.js");
const when_js_namespaceObject = require("lit/directives/when.js");
const with_tailwind_styles_cjs_namespaceObject = require("../../../decorators/with-tailwind-styles.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;
}
class AtomicGeneratedAnswerThreadItem extends external_lit_namespaceObject.LitElement {
    willUpdate() {
        if (!this.hasUpdated) this.isExpanded = this.disableCollapse ? true : this.isExpanded;
    }
    render() {
        const isTimelineDotInteractive = !this.disableCollapse && this.showTimelineDot;
        const isTimelineLineInteractive = !this.disableCollapse && !this.hideLine;
        const clampedTitleStyles = 'display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(4.5rem + 1px);';
        const titleBaseClasses = {
            'text-on-background': true,
            'text-base': true,
            'min-w-0': true,
            'text-left': true,
            'mr-auto': true,
            'px-2': true,
            'py-1.5': true
        };
        const titleWeightClasses = {
            'font-semibold': this.isExpanded,
            'font-normal': !this.isExpanded
        };
        const titleButtonClasses = (0, class_map_js_namespaceObject.classMap)({
            ...titleBaseClasses,
            ...titleWeightClasses,
            'bg-transparent': true,
            'border-0': true,
            'appearance-none': true,
            'transition-colors': true,
            'hover:bg-neutral-light': true,
            'rounded-md': true,
            'cursor-pointer': true,
            'focus-visible:outline-none': true,
            'focus-visible:ring-2': true,
            'focus-visible:ring-primary': true,
            'focus-visible:ring-offset-2': true
        });
        const titleTextClasses = (0, class_map_js_namespaceObject.classMap)({
            ...titleBaseClasses,
            ...titleWeightClasses
        });
        const timelineDotClasses = (0, class_map_js_namespaceObject.classMap)({
            'h-2': true,
            'w-2': true,
            'rounded-full': true,
            'transition-colors': true,
            'bg-neutral-dark': this.isExpanded,
            'bg-neutral-dim': !this.isExpanded,
            'cursor-pointer': isTimelineDotInteractive,
            'group-hover:bg-neutral-dark': !this.isExpanded && isTimelineDotInteractive
        });
        const timelineDotToggleClasses = (0, class_map_js_namespaceObject.classMap)({
            flex: true,
            'w-[10px]': true,
            'shrink-0': true,
            'justify-center': true,
            'items-center': true
        });
        const timelineLineToggleClasses = (0, class_map_js_namespaceObject.classMap)({
            flex: true,
            'w-[10px]': true,
            'shrink-0': true,
            'justify-center': true,
            'items-center': true,
            group: isTimelineLineInteractive,
            'cursor-pointer': isTimelineLineInteractive,
            'py-2': true,
            '-my-2': true
        });
        const timelineBodyRowClasses = (0, class_map_js_namespaceObject.classMap)({
            flex: true,
            'min-w-0': true,
            'gap-3': true,
            'min-h-3': !this.isExpanded
        });
        const timelineConnectorClasses = "relative h-full w-px bg-neutral transition-colors duration-150 group-hover:bg-neutral-dark before:absolute before:left-0 before:top-[-8px] before:h-[8px] before:w-px before:bg-neutral before:transition-colors before:duration-150 group-hover:before:bg-neutral-dark before:content-[''] after:absolute after:bottom-[-8px] after:left-0 after:h-[8px] after:w-px after:bg-neutral after:transition-colors after:duration-150 group-hover:after:bg-neutral-dark after:content-['']";
        return (0, external_lit_namespaceObject.html)`
      <li class="grid min-w-0">
        <div class="flex min-w-0 items-center gap-3">
          <div class=${timelineDotToggleClasses}>
            ${(0, when_js_namespaceObject.when)(this.showTimelineDot, ()=>(0, external_lit_namespaceObject.html)`
                <span
                  class=${timelineDotClasses}
                  @click=${isTimelineDotInteractive ? this.toggle : null}
                ></span>
              `)}
          </div>
          <div class="flex min-w-0 flex-col">
            ${(0, when_js_namespaceObject.when)(!this.disableCollapse, ()=>(0, external_lit_namespaceObject.html)`<button
                  type="button"
                  aria-expanded=${this.isExpanded}
                  aria-controls=${this.contentId}
                  class=${titleButtonClasses}
                  @click=${this.toggle}
                >
                  <span part="thread-item-title" style=${clampedTitleStyles}
                    >${this.title}</span
                  >
                </button>`, ()=>(0, external_lit_namespaceObject.html)`<span
                  class=${titleTextClasses}
                  part="thread-item-title"
                  style=${clampedTitleStyles}
                  >${this.title}</span
                >`)}
          </div>
        </div>
        <div class=${timelineBodyRowClasses}>
          <div
            class=${timelineLineToggleClasses}
            @click=${isTimelineLineInteractive ? this.toggle : null}
          >
            ${(0, when_js_namespaceObject.when)(this.hideLine, ()=>(0, external_lit_namespaceObject.html)``, ()=>(0, external_lit_namespaceObject.html)`<span class=${timelineConnectorClasses}> </span>`)}
          </div>
          <div id=${this.contentId} class="min-w-0 pl-2 py-1.5">
            <div
              class="mb-2"
              ?hidden=${!this.isExpanded}
              aria-hidden=${this.isExpanded ? 'false' : 'true'}
            >
              <slot></slot>
            </div>
          </div>
        </div>
      </li>
    `;
    }
    constructor(...args){
        super(...args), this.contentId = `atomic-generated-answer-thread-item-content-${crypto.randomUUID()}`, this.title = '', this.disableCollapse = false, this.hideLine = false, this.isExpanded = false, this.showTimelineDot = true, this.toggle = ()=>{
            if (this.disableCollapse) return;
            this.isExpanded = !this.isExpanded;
        };
    }
}
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: String
    })
], AtomicGeneratedAnswerThreadItem.prototype, "title", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: Boolean,
        attribute: 'disable-collapse'
    })
], AtomicGeneratedAnswerThreadItem.prototype, "disableCollapse", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: Boolean,
        attribute: 'hide-line'
    })
], AtomicGeneratedAnswerThreadItem.prototype, "hideLine", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: Boolean,
        attribute: 'is-expanded'
    })
], AtomicGeneratedAnswerThreadItem.prototype, "isExpanded", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: Boolean,
        attribute: 'show-timeline-dot'
    })
], AtomicGeneratedAnswerThreadItem.prototype, "showTimelineDot", void 0);
AtomicGeneratedAnswerThreadItem = _ts_decorate([
    (0, decorators_js_namespaceObject.customElement)('atomic-generated-answer-thread-item'),
    with_tailwind_styles_cjs_namespaceObject.withTailwindStyles
], AtomicGeneratedAnswerThreadItem);
exports.AtomicGeneratedAnswerThreadItem = __webpack_exports__.AtomicGeneratedAnswerThreadItem;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "AtomicGeneratedAnswerThreadItem"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
