import { __decorate } from "tslib";
import { attr } from '@ni/fast-element';
import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
import '@ni/nimble-components/dist/esm/button';
import '@ni/nimble-components/dist/esm/icons/cog';
import { styles } from './styles';
import { template } from './template';
/**
 * A layout container for summary tiles with an optional edit-items affordance.
 */
export class FvSummaryPanel extends FoundationElement {
    constructor() {
        super(...arguments);
        this.showEditItemsButton = false;
        this.legacyStyle = false;
        this.editItemsButtonLabel = 'Configure';
    }
    /** @internal */
    connectedCallback() {
        super.connectedCallback();
        this.syncTileLegacyStyle();
    }
    /** @internal */
    legacyStyleChanged() {
        if (this.$fastController.isConnected) {
            this.syncTileLegacyStyle();
        }
    }
    /** @internal */
    handleEditItemsClick() {
        this.dispatchEvent(new CustomEvent('edit-items', {
            bubbles: true,
            composed: true
        }));
    }
    /** @internal */
    handleItemsSlotChange() {
        this.syncTileLegacyStyle();
    }
    syncTileLegacyStyle() {
        for (const element of this.shadowRoot?.querySelector('slot')?.assignedElements({ flatten: true }) ?? []) {
            if (element.localName !== 'ok-fv-summary-panel-tile') {
                continue;
            }
            if (this.legacyStyle) {
                element.setAttribute('legacy-style', '');
            }
            else {
                element.removeAttribute('legacy-style');
            }
        }
    }
}
__decorate([
    attr({ attribute: 'show-edit-items-button', mode: 'boolean' })
], FvSummaryPanel.prototype, "showEditItemsButton", void 0);
__decorate([
    attr({ attribute: 'legacy-style', mode: 'boolean' })
], FvSummaryPanel.prototype, "legacyStyle", void 0);
__decorate([
    attr({ attribute: 'edit-items-button-label' })
], FvSummaryPanel.prototype, "editItemsButtonLabel", void 0);
const okFvSummaryPanel = FvSummaryPanel.compose({
    baseName: 'fv-summary-panel',
    template,
    styles
});
DesignSystem.getOrCreate().withPrefix('ok').register(okFvSummaryPanel());
export const fvSummaryPanelTag = 'ok-fv-summary-panel';
//# sourceMappingURL=index.js.map