// #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 { CssLength } from '@breadstone/mosaik-themes';
import { Dimensionable } from '../../../Behaviors/Dimensionable';
import { Fitable } from '../../../Behaviors/Fitable';
import { Variantable } from '../../../Behaviors/Variantable';
import { Property } from '../../../Decorators/PropertyDecorator';
import { Watch } from '../../../Decorators/WatchDecorator';
import { Fit } from '../../../Types/Fit';
import { Variant } from '../../../Types/Variant';
import { CustomElement } from '../../Abstracts/CustomElement';
// #endregion
/**
 * Chart Base Element - The foundational base class for all chart and data visualization components.
 *
 * @description
 * ChartBaseElement provides the core infrastructure for all chart-type components in the Mosaik
 * design system. It combines essential behaviors for data visualization including dimensional
 * control (width/height), fit modes (fill/contain), and visual variants (color schemes). This
 * abstract class establishes common properties like header and subheader for chart titles,
 * and provides lifecycle watch methods for property changes. All concrete chart implementations
 * (line charts, bar charts, pie charts, etc.) extend this base class to inherit consistent
 * sizing behavior, responsive capabilities, and theming support.
 *
 * @remarks
 * The class applies behavior mixins in composition order: Dimensionable (innermost) → Fitable
 * → Variantable (outermost). Watch decorators are provided as protected methods for subclasses
 * to react to property changes without overriding core behavior logic.
 *
 * @name ChartBaseElement
 * @category Abstract Elements
 *
 * @fires connected {ConnectedEvent} - Emitted when the element is connected to the DOM
 * @fires disconnected {DisconnectedEvent} - Emitted when the element is disconnected from the DOM
 * @fires changed {PropertyChangedEvent} - Emitted when any attribute changes before update
 *
 * @example
 * Extending ChartBaseElement for a line chart:
 * ```typescript
 * export class LineChartElement extends ChartBaseElement {
 *   constructor() {
 *     super();
 *   }
 *
 *   protected override onHeaderPropertyChanged(oldValue?: string, newValue?: string): void {
 *     this.updateChartTitle(newValue);
 *   }
 * }
 * ```
 *
 * @example
 * Using chart headers:
 * ```html
 * <mosaik-line-chart
 *   header="Sales Performance"
 *   subHeader="Q4 2024"
 *   width="800px"
 *   height="400px">
 * </mosaik-line-chart>
 * ```
 *
 * @example
 * Responsive chart with fit mode:
 * ```html
 * <mosaik-bar-chart
 *   fit="fill"
 *   variant="primary"
 *   header="Revenue Comparison">
 * </mosaik-bar-chart>
 * ```
 *
 * @example
 * Reacting to dimension changes:
 * ```typescript
 * protected override onWidthPropertyChanged(oldValue?: CssLength, newValue?: CssLength): void {
 *   this.recalculateLayout();
 *   this.redrawChart();
 * }
 * ```
 *
 * @abstract
 * @public
 */
export class ChartBaseElement extends Variantable(Fitable(Dimensionable(CustomElement))) {
    // #region Fields
    _header;
    _subHeader;
    // #endregion
    // #region Ctor
    /**
     * @protected
     */
    constructor() {
        super();
        this._header = '';
        this._subHeader = '';
    }
    // #endregion
    // #region Properties
    /**
        * Gets or sets the `header` property.
        *
        * @public
        */
    get header() {
        return this._header;
    }
    set header(value) {
        if (this._header !== value) {
            this._header = value;
            this.requestUpdate('header');
        }
    }
    /**
     * Gets or sets the `subHeader` property.
     *
     * @public
     */
    get subHeader() {
        return this._subHeader;
    }
    set subHeader(value) {
        if (this._subHeader !== value) {
            this._subHeader = value;
            this.requestUpdate('subHeader');
        }
    }
    // #endregion
    // #region Methods
    /**
     * @protected
     */
    onVariantPropertyChanged(oldValue, newValue) {
        // override
    }
    /**
     * @protected
     */
    onFitPropertyChanged(oldValue, newValue) {
        // override
    }
    /**
     * @protected
     */
    onWidthPropertyChanged(oldValue, newValue) {
        // override
    }
    /**
     * @protected
     */
    onHeightPropertyChanged(oldValue, newValue) {
        // override
    }
    /**
     * @protected
     */
    onHeaderPropertyChanged(oldValue, newValue) {
        // override
    }
    /**
     * @protected
     */
    onSubHeaderPropertyChanged(oldValue, newValue) {
        // override
    }
}
__decorate([
    Property({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], ChartBaseElement.prototype, "header", null);
__decorate([
    Property({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], ChartBaseElement.prototype, "subHeader", null);
__decorate([
    Watch('variant'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [String, String]),
    __metadata("design:returntype", void 0)
], ChartBaseElement.prototype, "onVariantPropertyChanged", null);
__decorate([
    Watch('fit'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [String, String]),
    __metadata("design:returntype", void 0)
], ChartBaseElement.prototype, "onFitPropertyChanged", null);
__decorate([
    Watch('width'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object, Object]),
    __metadata("design:returntype", void 0)
], ChartBaseElement.prototype, "onWidthPropertyChanged", null);
__decorate([
    Watch('height'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object, Object]),
    __metadata("design:returntype", void 0)
], ChartBaseElement.prototype, "onHeightPropertyChanged", null);
__decorate([
    Watch('header'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [String, String]),
    __metadata("design:returntype", void 0)
], ChartBaseElement.prototype, "onHeaderPropertyChanged", null);
__decorate([
    Watch('subHeader'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [String, String]),
    __metadata("design:returntype", void 0)
], ChartBaseElement.prototype, "onSubHeaderPropertyChanged", null);
//# sourceMappingURL=ChartBaseElement.js.map