import { __decorate } from 'tslib';
import { nothing } from 'lit';
import { queryAssignedNodes, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { literal, html } from 'lit/static-html.js';
import { CardElement } from '../../base/card-element.js';
import css_248z from './thumbnail-card.js';

/**
 * @summary Thumbnail cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
 * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
 * @slot thumbnail - Accepts a small image or visual element typically displayed alongside the card's title or content to provide quick visual context.
 * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.
 * @slot subtitle - The subtitle of the card
 * @slot title - The title of the card
 * @slot description - The paragrapher text of the card
 * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
 * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.
 * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.
 *  Legacy slot for anchor elements. Use `footer` instead.
 */
class SgdsThumbnailCard extends CardElement {
    constructor() {
        super(...arguments);
        /** Removes the card's internal padding when set to true.  */
        this.noPadding = false;
    }
    _getAnchorFromSlot(elements) {
        if (!elements || elements.length === 0)
            return null;
        const element = elements[0];
        return (element.querySelector("a") || element);
    }
    _handleThumbnailSlotChange(e) {
        const thumbnailNode = e.target.assignedElements({ flatten: true });
        if (thumbnailNode.length === 0) {
            if ((this.orientation === "vertical" && this._upperNode.length === 0) || this.orientation === "horizontal") {
                const media = this.shadowRoot.querySelector(".card-media");
                media.style.display = "none";
                const body = this.shadowRoot.querySelector(".card-body");
                if (this.noPadding)
                    body.style.padding = "0px";
            }
        }
    }
    _handleFooterSlotChange(e) {
        var _a;
        const assignedElements = e.target.assignedElements({ flatten: true });
        const footerHref = (_a = this._getAnchorFromSlot(assignedElements)) === null || _a === void 0 ? void 0 : _a.href;
        if (this.stretchedLink && footerHref) {
            this.card.setAttribute("href", footerHref);
        }
    }
    _handleLinkSlotChange(e) {
        var _a;
        this.warnLinkSlotMisused(e);
        const assignedElements = e.target.assignedElements({ flatten: true });
        const linkHref = (_a = this._getAnchorFromSlot(assignedElements)) === null || _a === void 0 ? void 0 : _a.href;
        if (this.stretchedLink && linkHref)
            this.card.setAttribute("href", linkHref);
    }
    render() {
        const tag = this.stretchedLink ? literal `a` : literal `div`;
        const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
        return html `
      <${tag} 
        class="card ${classMap({
            disabled: this.disabled
        })}"
        tabindex=${cardTabIndex}
      > 
        ${this.tinted && !this.noPadding ? html `<div class="card-tinted-bg"></div>` : nothing}
        <div class="card-media">
          <slot name="thumbnail" @slotchange=${this._handleThumbnailSlotChange}></slot>
					${this.orientation === "vertical" ? html `<slot name="upper"></slot>` : nothing}
        </div>
        <div class="card-body">
					${this.orientation === "horizontal" ? html `<slot name="upper"></slot>` : nothing}
          <div class="card-header-container">
            <div class="card-header">
              <slot name="subtitle"></slot>
              <h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
            </div>
            <slot></slot>
          </div>
          <slot name="description"></slot>
          <slot name="lower"></slot>
          <slot name="footer" @slotchange=${this._handleFooterSlotChange}>
            <slot name="link" @slotchange=${this._handleLinkSlotChange}></slot>
          </slot>
        </div>
      </${tag}>
    `;
    }
}
SgdsThumbnailCard.styles = [...CardElement.styles, css_248z];
__decorate([
    queryAssignedNodes({ slot: "upper", flatten: true })
], SgdsThumbnailCard.prototype, "_upperNode", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsThumbnailCard.prototype, "noPadding", void 0);

export { SgdsThumbnailCard, SgdsThumbnailCard as default };
//# sourceMappingURL=sgds-thumbnail-card.js.map
