// #region Imports
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") 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;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Themeable } from '../../../../Controls/Behaviors/Themeable';
import { Appearanceable } from '../../../Behaviors/Appearanceable';
import { Disableable } from '../../../Behaviors/Disableable';
import { Elevatable } from '../../../Behaviors/Elevatable';
import { Fitable } from '../../../Behaviors/Fitable';
import { Insetable } from '../../../Behaviors/Insetable';
import { Orientable } from '../../../Behaviors/Orientable';
import { Selectable } from '../../../Behaviors/Selectable';
import { Slottable } from '../../../Behaviors/Slottable';
import { TextFormattable } from '../../../Behaviors/TextFormattable';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Property } from '../../../Decorators/PropertyDecorator';
import { Orientation } from '../../../Types/Orientation';
import { CustomElement } from '../../Abstracts/CustomElement';
import { ElevationElement } from '../../Primitives/Elevation/ElevationElement';
import { CardActionsElement } from './CardActionsElement';
import { CardContentElement } from './CardContentElement';
import { cardElementTemplate } from './CardElementTemplate';
import { CardHeaderElement } from './CardHeaderElement';
import { CardSubTitleElement } from './CardSubTitleElement';
import { CardTitleElement } from './CardTitleElement';
import { cardElementCosmopolitanStyle } from './Themes/CardElement.Cosmopolitan';
import { cardElementJoyStyle } from './Themes/CardElement.Joy';
import { cardElementMemphisStyle } from './Themes/CardElement.Memphis';
// #endregion
/**
 * Card - A versatile container component for organizing related content in a visually distinct layout.
 *
 * @description
 * The Card component provides structured sections for media, headers, content, and actions within a cohesive,
 * elevated container. It supports advanced features like selectable states, elevation effects, inline media
 * positioning, and flexible content arrangement. Essential for displaying information hierarchies such as
 * product listings, user profiles, content previews, and dashboard widgets. Integrates seamlessly with the
 * theme system and supports comprehensive accessibility features.
 *
 * @name Card
 * @element mosaik-card
 * @category Grouping
 *
 * @slot actions - Action buttons or interactive elements for user engagement
 * @slot content - Main content body for text, descriptions, or detailed information
 * @slot cover - Primary visual content like hero images or graphics positioned at the top
 * @slot footer - Footer section for supplementary information, links, or metadata
 * @slot header - Header section typically containing titles and navigation elements
 * @slot media - Additional media content such as images, videos, or rich content
 *
 * @csspart actions - Actions section container for buttons and controls
 * @csspart content - Main content area container
 * @csspart cover - Cover image or media container at the top of the card
 * @csspart elevation - Container for card elevation and shadow effects
 * @csspart footer - Footer section container for additional content
 * @csspart header - Header section for titles and subtitles
 * @csspart heading - Header section container wrapping header and inline media
 * @csspart media - Media content container for images or visual elements
 *
 * @cssprop {String} --card-background-color - Background color of the card container
 * @cssprop {String} --card-border-color - Border color around the card
 * @cssprop {String} --card-border-radius - Border radius for card corner rounding
 * @cssprop {String} --card-border-style - Border line style (solid, dashed, dotted)
 * @cssprop {String} --card-border-width - Border width for card outline
 * @cssprop {String} --card-divider-height - Height of divider lines between sections
 * @cssprop {String} --card-font-family - Font family for card text content
 * @cssprop {String} --card-font-letter-spacing - Letter spacing for card text
 * @cssprop {String} --card-font-line-height - Line height for card text
 * @cssprop {String} --card-font-size - Font size for card text
 * @cssprop {String} --card-font-text-decoration - Text decoration for card text
 * @cssprop {String} --card-font-text-transform - Text transformation for card text
 * @cssprop {String} --card-font-weight - Font weight for card text
 * @cssprop {String} --card-foreground-color - Primary text and icon color
 * @cssprop {String} --card-gap - The gap CSS custom property.
 * @cssprop {String} --card-padding-bottom - The padding bottom CSS custom property.
 * @cssprop {String} --card-padding-left - The padding left CSS custom property.
 * @cssprop {String} --card-padding-right - The padding right CSS custom property.
 * @cssprop {String} --card-padding-top - The padding top CSS custom property.
 * @cssprop {String} --card-shadow - The shadow CSS custom property.
 * @cssprop {String} --card-shadow-blur - Shadow blur radius for elevation effect
 * @cssprop {String} --card-shadow-color - Shadow color for elevation effect
 * @cssprop {String} --card-shadow-offset-x - Horizontal shadow offset
 * @cssprop {String} --card-shadow-offset-y - Vertical shadow offset
 * @cssprop {String} --card-shadow-spread - Shadow spread radius
 * @cssprop {String} --card-transition-duration - Duration of hover and state transitions
 * @cssprop {String} --card-transition-mode - Timing function for transitions
 * @cssprop {String} --card-transition-property - CSS properties to transition
 * @cssprop {String} --card-translate - The translate CSS custom property.
 *
 * @fires selected {SelectedEvent} - Fired when the card is selected (when selectable)
 * @fires deselected {DeselectedEvent} - Fired when the card is deselected (when selectable)
 *
 * @dependency mosaik-card-content - The Card Content element.
 * @dependency mosaik-card-header - The Card Header element.
 * @dependency mosaik-elevation - The Elevation element.
 *
 * @example
 * Full card anatomy with all sub-components:
 * ```html
 * <mosaik-card>
 *   <img slot="cover" src="hero.jpg" alt="Card cover image">
 *   <mosaik-card-header>
 *     <mosaik-card-title text="Product Name"></mosaik-card-title>
 *     <mosaik-card-sub-title text="Premium Edition"></mosaik-card-sub-title>
 *   </mosaik-card-header>
 *   <mosaik-card-content text="Detailed product description and features."></mosaik-card-content>
 *   <mosaik-card-actions>
 *     <mosaik-button label="Learn More"></mosaik-button>
 *     <mosaik-button label="Buy Now" variant="primary"></mosaik-button>
 *   </mosaik-card-actions>
 *   <mosaik-card-footer>
 *     <mosaik-text text="Last updated: Today"></mosaik-text>
 *   </mosaik-card-footer>
 * </mosaik-card>
 * ```
 *
 * @example
 * Media card with cover image and elevation:
 * ```html
 * <mosaik-card elevation="2">
 *   <img slot="cover" src="hero.jpg" alt="Article image">
 *   <mosaik-card-header>
 *     <mosaik-card-title text="Article Title"></mosaik-card-title>
 *     <mosaik-card-sub-title text="Article summary and preview content."></mosaik-card-sub-title>
 *   </mosaik-card-header>
 *   <mosaik-card-footer>
 *     <mosaik-text text="Published: March 2024"></mosaik-text>
 *   </mosaik-card-footer>
 * </mosaik-card>
 * ```
 *
 * @example
 * Selectable card with inline media:
 * ```html
 * <mosaik-card inline-media>
 *   <img slot="media" src="thumbnail.jpg" alt="Option thumbnail">
 *   <mosaik-card-header>
 *     <mosaik-card-title text="Option A"></mosaik-card-title>
 *     <mosaik-card-sub-title text="Best Value"></mosaik-card-sub-title>
 *   </mosaik-card-header>
 *   <mosaik-card-content text="This option provides the best value for your needs."></mosaik-card-content>
 * </mosaik-card>
 * ```
 *
 * @example
 * Horizontal card layout with outline appearance:
 * ```html
 * <mosaik-card orientation="horizontal" appearance="outline">
 *   <img slot="media" src="profile.jpg" alt="Profile picture">
 *   <mosaik-card-header>
 *     <mosaik-card-title text="John Doe"></mosaik-card-title>
 *     <mosaik-card-sub-title text="Software Engineer"></mosaik-card-sub-title>
 *   </mosaik-card-header>
 *   <mosaik-card-content text="Bio and professional summary."></mosaik-card-content>
 * </mosaik-card>
 * ```
 *
 * @public
 */
let CardElement = class CardElement extends Themeable(Elevatable(Appearanceable(Insetable(Fitable(Orientable(TextFormattable(Slottable(Selectable(Disableable(CustomElement)))))))))) {
    // #region Fields
    _header;
    _subHeader;
    _content;
    _inlineMedia;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._header = '';
        this._subHeader = '';
        this._content = '';
        this._inlineMedia = false;
        // TODO: REMARK: This is a workaround for the issue with the docs generation.
        // If we set the orientation property like this `this.orientation = Orientation.Vertical;` the
        // docs generation will generates a wrong type.
        Object.assign(this, { orientation: Orientation.Vertical });
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @readonly
    */
    static get is() {
        return 'mosaik-card';
    }
    /**
     * The `header` property represents the header of the card.
     * It will inherited automatically by the `CardHeaderElement`.
     *
     * @public
     */
    get header() {
        return this._header;
    }
    set header(value) {
        if (this._header !== value) {
            this._header = value;
            this.requestUpdate('header');
        }
    }
    /**
     * The `subHeader` property represents the sub header of the card.
     * It will inherited automatically by the `CardSubTitleElement`.
     *
     * @public
     */
    get subHeader() {
        return this._subHeader;
    }
    set subHeader(value) {
        if (this._subHeader !== value) {
            this._subHeader = value;
            this.requestUpdate('subHeader');
        }
    }
    /**
     * Gets or sets the `content` property.
     *
     * @public
     */
    get content() {
        return this._content;
    }
    set content(value) {
        if (this._content !== value) {
            this._content = value;
            this.requestUpdate('content');
        }
    }
    /**
     * Gets or sets the `inlineMedia` property.
     *
     * @public
     * @attr
     */
    get inlineMedia() {
        return this._inlineMedia;
    }
    set inlineMedia(value) {
        if (this._inlineMedia !== value) {
            this._inlineMedia = value;
            this.requestUpdate('inlineMedia');
        }
    }
};
__decorate([
    Property({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], CardElement.prototype, "header", null);
__decorate([
    Property({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], CardElement.prototype, "subHeader", null);
__decorate([
    Property({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], CardElement.prototype, "content", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], CardElement.prototype, "inlineMedia", null);
CardElement = __decorate([
    Component({
        selector: 'mosaik-card',
        template: cardElementTemplate,
        themes: {
            joy: cardElementJoyStyle,
            memphis: cardElementMemphisStyle,
            cosmopolitan: cardElementCosmopolitanStyle
        },
        imports: [
            CardContentElement,
            CardHeaderElement,
            CardSubTitleElement,
            CardTitleElement,
            CardActionsElement,
            ElevationElement
        ]
    }),
    __metadata("design:paramtypes", [])
], CardElement);
export { CardElement };
//# sourceMappingURL=CardElement.js.map