"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__, {
    AtomicResultPlaceholder: ()=>AtomicResultPlaceholder
});
require("../../search/atomic-result-section-actions/atomic-result-section-actions.cjs");
require("../../search/atomic-result-section-badges/atomic-result-section-badges.cjs");
require("../../search/atomic-result-section-bottom-metadata/atomic-result-section-bottom-metadata.cjs");
require("../../search/atomic-result-section-excerpt/atomic-result-section-excerpt.cjs");
require("../../search/atomic-result-section-title/atomic-result-section-title.cjs");
require("../../search/atomic-result-section-visual/atomic-result-section-visual.cjs");
const external_lit_namespaceObject = require("lit");
const decorators_js_namespaceObject = require("lit/decorators.js");
const item_layout_utils_cjs_namespaceObject = require("../layout/item-layout-utils.cjs");
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;
}
function _ts_metadata(k, v) {
    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
}
const placeholderClasses = 'block bg-neutral w-full h-full rounded';
class AtomicResultPlaceholder extends external_lit_namespaceObject.LitElement {
    renderExcerptLine(width) {
        return (0, external_lit_namespaceObject.html)`
      <div style="height: var(--line-height); width: ${width};">
        <div
          class=${placeholderClasses}
          style="height: var(--font-size);"
        ></div>
      </div>
    `;
    }
    render() {
        const classes = [
            'result-root',
            'placeholder',
            'with-sections',
            'animate-pulse',
            ...(0, item_layout_utils_cjs_namespaceObject.getItemDisplayClasses)(this.display, this.density, this.imageSize)
        ].join(' ').trim();
        return (0, external_lit_namespaceObject.html)`
      <div class=${classes}>
        <atomic-result-section-visual>
          <div class=${placeholderClasses}></div>
        </atomic-result-section-visual>
        <atomic-result-section-badges>
          <div class="badge ${placeholderClasses}"></div>
        </atomic-result-section-badges>
        <atomic-result-section-actions>
          <div class="action ${placeholderClasses}"></div>
        </atomic-result-section-actions>
        <atomic-result-section-title>
          <div class="title ${placeholderClasses}"></div>
        </atomic-result-section-title>
        <atomic-result-section-excerpt>
          ${this.renderExcerptLine('100%')} ${this.renderExcerptLine('95%')}
          ${this.renderExcerptLine('98%')}
        </atomic-result-section-excerpt>
        <atomic-result-section-bottom-metadata>
          <div class="fields-placeholder">
            ${Array.from({
            length: 4
        }, ()=>(0, external_lit_namespaceObject.html)`
                <div
                  class="field-value-placeholder ${placeholderClasses}"
                ></div>
              `)}
          </div>
        </atomic-result-section-bottom-metadata>
      </div>
    `;
    }
}
AtomicResultPlaceholder.styles = (0, external_lit_namespaceObject.css)`
    @reference '../../common/template-system/legacy-template-system.css';

    :host {
      @apply atomic-template-system;

      .result-root {
        &.display-grid {
          atomic-result-section-actions {
            display: none;
          }
        }

        .badge {
          width: 14rem;
        }

        .action {
          width: 10rem;
        }

        .title {
          display: grid;
          grid-auto-flow: column;
          grid-gap: 0.5rem;
          height: var(--line-height);
          width: 30rem;
          max-width: 100%;
        }

        .fields-placeholder {
          display: grid;
          grid-template-columns: repeat(auto-fill, min(11rem, 40%));
          grid-column-gap: 0.5rem;

          .field-value-placeholder {
            height: var(--font-size);
            margin: calc((var(--line-height) - var(--font-size)) / 2) 0;
          }
        }
      }
    }
  `;
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: String
    }),
    _ts_metadata("design:type", "u" < typeof ItemDisplayLayout ? Object : ItemDisplayLayout)
], AtomicResultPlaceholder.prototype, "display", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: String
    }),
    _ts_metadata("design:type", "u" < typeof ItemDisplayDensity ? Object : ItemDisplayDensity)
], AtomicResultPlaceholder.prototype, "density", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: String,
        attribute: 'image-size'
    }),
    _ts_metadata("design:type", "u" < typeof ItemDisplayImageSize ? Object : ItemDisplayImageSize)
], AtomicResultPlaceholder.prototype, "imageSize", void 0);
AtomicResultPlaceholder = _ts_decorate([
    (0, decorators_js_namespaceObject.customElement)('atomic-result-placeholder'),
    with_tailwind_styles_cjs_namespaceObject.withTailwindStyles
], AtomicResultPlaceholder);
exports.AtomicResultPlaceholder = __webpack_exports__.AtomicResultPlaceholder;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "AtomicResultPlaceholder"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
