import { __decorate } from "tslib";
import { attr } from '@ni/fast-element';
import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
import { styles } from './styles';
import { template } from './template';
import { FvSummaryPanelTileTextPosition } from './types';
/**
 * A clickable summary tile for displaying a large value with a compact label.
 */
export class FvSummaryPanelTile extends FoundationElement {
    constructor() {
        super(...arguments);
        this.count = '';
        this.label = '';
        this.legacyStyle = false;
        this.selected = false;
        this.textPosition = FvSummaryPanelTileTextPosition.beside;
    }
    /** @internal */
    connectedCallback() {
        super.connectedCallback();
        this.syncLegacyStyleAttribute();
    }
    /** @internal */
    legacyStyleChanged() {
        this.syncLegacyStyleAttribute();
    }
    syncLegacyStyleAttribute() {
        if (this.legacyStyle) {
            this.setAttribute('legacy-style', '');
        }
        else {
            this.removeAttribute('legacy-style');
        }
    }
}
__decorate([
    attr
], FvSummaryPanelTile.prototype, "count", void 0);
__decorate([
    attr
], FvSummaryPanelTile.prototype, "label", void 0);
__decorate([
    attr({ attribute: 'legacy-style', mode: 'boolean' })
], FvSummaryPanelTile.prototype, "legacyStyle", void 0);
__decorate([
    attr({ mode: 'boolean' })
], FvSummaryPanelTile.prototype, "selected", void 0);
__decorate([
    attr({ attribute: 'text-position' })
], FvSummaryPanelTile.prototype, "textPosition", void 0);
const okFvSummaryPanelTile = FvSummaryPanelTile.compose({
    baseName: 'fv-summary-panel-tile',
    template,
    styles
});
DesignSystem.getOrCreate().withPrefix('ok').register(okFvSummaryPanelTile());
export const fvSummaryPanelTileTag = 'ok-fv-summary-panel-tile';
//# sourceMappingURL=index.js.map