'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const shared_tailwindElement_index = require('../../index-179a633e.cjs');
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
const state = require('../../state-d9fb972b.cjs');
const styleMap = require('../../style-map-f36cc35f.cjs');
const index = require('../../index-1d3f4a5a.cjs');
require('../../directive-8278ab14.cjs');
require('../../bundle-mjs-d58a83c6.cjs');

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
exports.LuksoImage = class LuksoImage extends shared_tailwindElement_index.TailwindElement {
  constructor() {
    super(...arguments);
    this.src = "";
    this.placeholder = "";
    this.isLoading = true;
    this.resolvedPlaceholder = "";
    this.hasError = false;
    this.imageStyles = index.ce({
      slots: {
        wrapper: "size-full bg-neutral-100",
        placeholder: "bg-[50%] bg-no-repeat bg-cover bg-neutral-90 relative size-full",
        image: "object-cover opacity-0 size-full"
      },
      variants: {
        isLoading: {
          true: {}
        },
        hasError: {
          true: {}
        }
      },
      compoundVariants: [
        {
          isLoading: false,
          hasError: false,
          class: {
            image: "animate-fade-in animation-fill-forwards"
          }
        },
        {
          isLoading: true,
          hasError: false,
          class: {
            placeholder: "animate-pulse"
          }
        },
        {
          isLoading: false,
          hasError: true,
          class: {
            image: "opacity-0"
          }
        }
      ]
    });
  }
  handleLoad() {
    this.isLoading = false;
    this.hasError = false;
  }
  handleError() {
    this.isLoading = false;
    this.hasError = true;
  }
  async willUpdate(changedProperties) {
    if (changedProperties.has("hasError")) {
      if (this.hasError) {
        this.resolvedPlaceholder = this.placeholder;
      } else {
        this.resolvedPlaceholder = "";
      }
      await this.updateComplete;
    }
  }
  render() {
    const { wrapper, placeholder, image } = this.imageStyles({
      isLoading: this.isLoading,
      hasError: this.hasError
    });
    return shared_tailwindElement_index.x`
      <div class=${wrapper()}>
        <div
          class=${placeholder()}
          style=${styleMap.o({
      backgroundImage: `url('${this.resolvedPlaceholder}')`
    })}
        >
          <img
            src=${this.src}
            class=${image()}
            loading="lazy"
            @load=${this.handleLoad}
            @error=${this.handleError}
          />
        </div>
      </div>
    `;
  }
};
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoImage.prototype, "src", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoImage.prototype, "placeholder", 2);
__decorateClass([
  state.t()
], exports.LuksoImage.prototype, "isLoading", 2);
__decorateClass([
  state.t()
], exports.LuksoImage.prototype, "resolvedPlaceholder", 2);
__decorateClass([
  state.t()
], exports.LuksoImage.prototype, "hasError", 2);
exports.LuksoImage = __decorateClass([
  queryAssignedElements.e("lukso-image")
], exports.LuksoImage);
