'use client';
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var lit = require('lit');
var decorators_js = require('lit/decorators.js');
var classMap_js = require('lit/directives/class-map.js');
var staticHtml_js = require('lit/static-html.js');
var cardElement = require('../../base/card-element.cjs.js');
var thumbnailCard = require('./thumbnail-card.cjs.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.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) {
        const assignedElements = e.target.assignedElements({ flatten: true });
        const anchor = this._getAnchorFromSlot(assignedElements);
        if (this.stretchedLink)
            this._forwardAnchorAttributes(anchor);
    }
    _handleLinkSlotChange(e) {
        this.warnLinkSlotMisused(e);
        const assignedElements = e.target.assignedElements({ flatten: true });
        const anchor = this._getAnchorFromSlot(assignedElements);
        if (this.stretchedLink)
            this._forwardAnchorAttributes(anchor);
    }
    render() {
        const tag = this.stretchedLink ? staticHtml_js.literal `a` : staticHtml_js.literal `div`;
        const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
        return staticHtml_js.html `
      <${tag} 
        class="card ${classMap_js.classMap({
            disabled: this.disabled
        })}"
        tabindex=${cardTabIndex}
      > 
        ${this.tinted && !this.noPadding ? staticHtml_js.html `<div class="card-tinted-bg"></div>` : lit.nothing}
        <div class="card-media">
          <slot name="thumbnail" @slotchange=${this._handleThumbnailSlotChange}></slot>
					${this.orientation === "vertical" ? staticHtml_js.html `<slot name="upper"></slot>` : lit.nothing}
        </div>
        <div class="card-body">
					${this.orientation === "horizontal" ? staticHtml_js.html `<slot name="upper"></slot>` : lit.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.CardElement.styles, thumbnailCard["default"]];
tslib.__decorate([
    decorators_js.queryAssignedNodes({ slot: "upper", flatten: true })
], SgdsThumbnailCard.prototype, "_upperNode", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean, reflect: true })
], SgdsThumbnailCard.prototype, "noPadding", void 0);

exports.SgdsThumbnailCard = SgdsThumbnailCard;
exports["default"] = SgdsThumbnailCard;
//# sourceMappingURL=sgds-thumbnail-card.cjs.js.map
