import {
  __decorateClass,
  __privateAdd,
  __privateMethod
} from "../../chunks/chunk.QU3DSPNU.js";
var _GdsCardPattern01_instances, hasFooterContent_fn, getVariant_fn, getClasses_fn, renderLinkedCard_fn, renderLinkedFooter_fn, renderStaticCard_fn, renderStaticFooter_fn, renderCardContent_fn;
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { when } from "lit/directives/when.js";
import { GdsCardLinked } from "../../components/card-linked/card-linked.component.js";
import { GdsCard } from "../../components/card/card.component.js";
import { GdsFlex } from "../../components/flex/flex.component.js";
import { GdsFormattedDate } from "../../components/formatted-text/date/formatted-date.component.js";
import { IconChainLink } from "../../components/icon/icons/chain-link.js";
import { GdsImg } from "../../components/img/img.component.js";
import { GdsText } from "../../components/text/text.component.js";
import { GdsElement } from "../../gds-element.js";
import { tokens } from "../../tokens.style.js";
import {
  gdsCustomElement,
  html
} from "../../utils/helpers/custom-element-scoping.js";
import {
  withLayoutChildProps,
  withMarginProps,
  withSizeXProps
} from "../../utils/mixins/declarative-layout-mixins.js";
import { withImageProps } from "../../utils/mixins/props-image.js";
import { withLinkProps } from "../../utils/mixins/props-link.js";
import CardPattern01Styles from "./card-pattern-01.styles.js";
let GdsCardPattern01 = class extends withSizeXProps(
  withMarginProps(
    withLayoutChildProps(withLinkProps(withImageProps(GdsElement)))
  )
) {
  constructor() {
    super(...arguments);
    __privateAdd(this, _GdsCardPattern01_instances);
    this.title = "";
    this.excerpt = "";
    this.label = "";
    this.variant = "neutral-01";
    this.outlined = false;
    this.tag = "h2";
    this.ratio = "landscape";
    this.category = "";
    this.date = "";
    this.dateFormat = "dateTimeLong";
    this.locale = "en-GB";
  }
  render() {
    return when(
      this.href,
      () => __privateMethod(this, _GdsCardPattern01_instances, renderLinkedCard_fn).call(this),
      () => __privateMethod(this, _GdsCardPattern01_instances, renderStaticCard_fn).call(this)
    );
  }
};
_GdsCardPattern01_instances = new WeakSet();
/**
 * Checks if footer content exists
 * @param isLinked - Determines if label should be considered for linked cards
 */
hasFooterContent_fn = function(isLinked = false) {
  return isLinked && this.label || this.querySelector('[slot="footer"]');
};
/**
 * Determines card variant based on neutral-01/02 and outlined state
 * neutral-01 → primary
 * neutral-02 + outlined → secondary
 * neutral-02 → tertiary
 */
getVariant_fn = function() {
  switch (this.variant) {
    case "neutral-02":
      return this.outlined ? "secondary" : "tertiary";
    case "neutral-01":
    default:
      return "primary";
  }
};
getClasses_fn = function(type) {
  return classMap({
    card: true,
    outlined: this.outlined,
    [`card-${type}`]: !!type,
    [`variant-${this.variant}`]: true,
    [`ratio-${this.ratio}`]: true
  });
};
/**
 * Renders linked version of the card
 * Includes href, target, and rel attributes
 */
renderLinkedCard_fn = function() {
  return html`
      <gds-card-linked
        padding="0"
        gap="0"
        href=${ifDefined(this.href)}
        target=${ifDefined(this.target)}
        rel=${ifDefined(this.rel)}
        variant=${__privateMethod(this, _GdsCardPattern01_instances, getVariant_fn).call(this)}
        class=${__privateMethod(this, _GdsCardPattern01_instances, getClasses_fn).call(this, "linked")}
      >
        ${__privateMethod(this, _GdsCardPattern01_instances, renderCardContent_fn).call(this)}
      </gds-card-linked>
    `;
};
/**
 * Renders footer for linked cards
 * Includes accessibility attributes and default link
 */
renderLinkedFooter_fn = function() {
  return when(
    __privateMethod(this, _GdsCardPattern01_instances, hasFooterContent_fn).call(this, true),
    () => html`
        <gds-flex
          font="detail-book-m"
          align-items="center"
          gap="s"
          pointer-events="none"
          aria-hidden="true"
          inert
        >
          <slot name="footer">
            ${when(
      this.label,
      () => html`
                <gds-link href=${ifDefined(this.href)}>
                  <gds-icon-chain-link slot="lead"></gds-icon-chain-link>
                  ${this.label}
                </gds-link>
              `
    )}
          </slot>
        </gds-flex>
      `
  );
};
/**
 * Renders static version of the card
 * Used when no href is provided
 */
renderStaticCard_fn = function() {
  return html`
      <gds-card
        padding="0"
        gap="0"
        variant=${__privateMethod(this, _GdsCardPattern01_instances, getVariant_fn).call(this)}
        class=${__privateMethod(this, _GdsCardPattern01_instances, getClasses_fn).call(this, "static")}
      >
        ${__privateMethod(this, _GdsCardPattern01_instances, renderCardContent_fn).call(this)}
      </gds-card>
    `;
};
/**
 * Renders footer for static cards
 * Simple slot without accessibility restrictions
 */
renderStaticFooter_fn = function() {
  return when(
    __privateMethod(this, _GdsCardPattern01_instances, hasFooterContent_fn).call(this),
    () => html`
        <gds-flex font="detail-book-m" align-items="center" gap="s">
          <slot name="footer"></slot>
        </gds-flex>
      `
  );
};
/**
 * Renders card content structure
 * Includes media, header slot, title/excerpt, and footer
 * Header slot only shows when no media is present
 */
renderCardContent_fn = function() {
  return html`
      ${when(
    this.src,
    () => html`
          <gds-flex padding="xs xs 0 xs">
            <gds-img
              src=${ifDefined(this.src)}
              srcset=${ifDefined(this.srcset)}
              sizes=${ifDefined(this.sizes)}
              width="100%"
              height="100%"
              object-fit="cover"
              object-position="center"
              border-radius="xs"
              aspect-ratio=${this.ratio === "square" ? "1/1" : "16/9"}
              loading=${ifDefined(this.loading)}
              decoding=${ifDefined(this.decoding)}
              alt=${ifDefined(this.alt)}
              class="card-media"
            ></gds-img>
          </gds-flex>
        `
  )}
      <gds-flex flex-direction="column" gap="xl" padding="xl">
        ${when(!this.src, () => html`<slot name="header"></slot>`)}
        ${when(
    this.title || this.excerpt,
    () => html`
            <gds-flex flex-direction="column" gap="xs">
              ${when(
      this.category || this.date,
      () => html`
                  <gds-flex gap="s" align-items="center" flex-wrap="wrap">
                    ${when(
        this.category,
        () => html` <gds-text tag="p" font="detail-book-s">
                          ${this.category}
                        </gds-text>`
      )}
                    ${when(
        this.date,
        () => html`
                        <gds-formatted-date
                          .value=${this.date}
                          .locale=${this.locale}
                          .format=${this.dateFormat}
                          font="detail-book-s"
                          color="neutral-02"
                        ></gds-formatted-date>
                      `
      )}
                  </gds-flex>
                `
    )}
              ${when(
      this.title,
      () => html`
                  <gds-text tag=${ifDefined(this.tag)} font="heading-s">
                    ${this.title}
                  </gds-text>
                `
    )}
              ${when(
      this.excerpt,
      () => html`
                  <gds-text tag="p" lines="3" font="body-regular-m">
                    ${this.excerpt}
                  </gds-text>
                `
    )}
            </gds-flex>
          `
  )}
        ${when(
    this.href,
    () => __privateMethod(this, _GdsCardPattern01_instances, renderLinkedFooter_fn).call(this),
    () => __privateMethod(this, _GdsCardPattern01_instances, renderStaticFooter_fn).call(this)
  )}
      </gds-flex>
    `;
};
GdsCardPattern01.styles = [tokens, CardPattern01Styles];
__decorateClass([
  property({ reflect: false })
], GdsCardPattern01.prototype, "title", 2);
__decorateClass([
  property({ reflect: false })
], GdsCardPattern01.prototype, "excerpt", 2);
__decorateClass([
  property({ reflect: false })
], GdsCardPattern01.prototype, "label", 2);
__decorateClass([
  property({ reflect: false })
], GdsCardPattern01.prototype, "variant", 2);
__decorateClass([
  property({ type: Boolean, reflect: false })
], GdsCardPattern01.prototype, "outlined", 2);
__decorateClass([
  property({ reflect: false })
], GdsCardPattern01.prototype, "tag", 2);
__decorateClass([
  property({ reflect: false, attribute: "aspect-ratio" })
], GdsCardPattern01.prototype, "ratio", 2);
__decorateClass([
  property({ reflect: false })
], GdsCardPattern01.prototype, "category", 2);
__decorateClass([
  property({ reflect: false })
], GdsCardPattern01.prototype, "date", 2);
__decorateClass([
  property({ reflect: false, attribute: "date-format" })
], GdsCardPattern01.prototype, "dateFormat", 2);
__decorateClass([
  property({ reflect: false })
], GdsCardPattern01.prototype, "locale", 2);
GdsCardPattern01 = __decorateClass([
  gdsCustomElement("gds-card-pattern-01", {
    dependsOn: [
      GdsCard,
      GdsCardLinked,
      GdsImg,
      GdsText,
      GdsFlex,
      GdsFormattedDate,
      IconChainLink
    ]
  })
], GdsCardPattern01);
export {
  GdsCardPattern01
};
