'use strict';

var index = require('./index-Bc25FxCt.js');
var placeholder = require('./placeholder-Bw760CYv.js');
var componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-CTEgPajK.js');
var component = require('./component-f6SRjQa4.js');
var designToken = require('./design-token-C_KFCGA0.js');
var chevronUp = require('./chevron-up-CuIRWXrb.js');
var chevronDown = require('./chevron-down-BkcsO6WN.js');
var eventEmitSlimmer = require('./event-emit-slimmer-Cj-fHZ2m.js');
require('./responsive-format-facade-HA8sO-0_.js');
require('./array-CyqWaFqX.js');
require('./state-border-formatter-B6OKYNVo.js');

var __decorate$2 = (undefined && undefined.__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;
};
class VegaAccordionRenderer extends index.VegaSlimmer {
    constructor() {
        super();
    }
    render() {
        return (index.h("div", { class: {
                'accordion': true,
                'background': this.drawsBackground,
                'expanded': this.expand,
                'collapsed': !this.expand,
                'icon-position-center': this.iconPosition === 'center',
            } }, this.renderHeader(), this.renderContent()));
    }
    renderHeader() {
        const titleDom = (index.h(index.Fragment, null, this.renderPrefixIcon(), this.accordionTitle ? this.renderTitle() : this.renderTitleSlot()));
        return (index.h("div", { class: "accordion-header" }, index.h("vega-flex", { gap: "size-8", "align-items": "start" }, this.expandIconAlign === 'left' && this.renderExpandIcon(), titleDom, this.expandIconAlign === 'right' && this.renderExpandIcon())));
    }
    renderPrefixIcon() {
        return (this.prefixIcon && (index.h("div", { class: "accordion-prefix-icon" }, index.h("vega-icon", { icon: this.prefixIcon, size: "size-24" }))));
    }
    renderTitle() {
        return index.h("div", { class: "accordion-title" }, this.accordionTitle);
    }
    renderExpandIcon() {
        const classes = [
            'accordion-expand-icon',
            `accordion-expand-icon-align-${this.expandIconAlign}`,
            designToken.formatAndValidResponsiveToken(this.showExpandIcon, 'display'),
        ];
        return (index.h("div", { class: `${index.arrayToClassString(classes)}` }, index.h("vega-button-circle", { size: "small", "icon-color": "text-link", variant: "icon-only", "data-aria-label": this.expand ? 'Collapse accordion' : 'Expand accordion', "data-aria-expanded": `${this.expand}`, icon: index.VegaInternalIconManager.getIconKey(this.expandIconAlign === 'left' ? 'chevron-down' : 'chevron-up'), ref: (ref) => {
                index.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, index.VegaClick, () => {
                    this.expandController.flipExpand();
                });
            } })));
    }
    renderContent() {
        return (index.h("div", { class: "accordion-content" }, index.h("slot", { name: "content" }), index.h("slot", { name: "accordion-content" })));
    }
    renderTitleSlot() {
        return (index.h("div", { class: "accordion-title-slot" }, index.h("slot", { name: "title" }), index.h("slot", { name: "accordion-title" })));
    }
}
(() => {
    index.VegaInternalIconManager.register({
        'chevron-up': chevronUp.chevronUp,
        'chevron-down': chevronDown.chevronDown,
    });
})();
__decorate$2([
    index.MapToComponentField()
], VegaAccordionRenderer.prototype, "drawsBackground", void 0);
__decorate$2([
    index.MapToComponentField()
], VegaAccordionRenderer.prototype, "prefixIcon", void 0);
__decorate$2([
    index.MapToComponentField()
], VegaAccordionRenderer.prototype, "accordionTitle", void 0);
__decorate$2([
    index.MapToComponentField()
], VegaAccordionRenderer.prototype, "expandIconAlign", void 0);
__decorate$2([
    index.MapToComponentField()
], VegaAccordionRenderer.prototype, "expand", void 0);
__decorate$2([
    index.MapToComponentField()
], VegaAccordionRenderer.prototype, "iconPosition", void 0);
__decorate$2([
    index.MapToComponentField()
], VegaAccordionRenderer.prototype, "showExpandIcon", void 0);
__decorate$2([
    index.MapToComponentField()
], VegaAccordionRenderer.prototype, "expandController", void 0);

var __decorate$1 = (undefined && undefined.__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;
};
class VegaAccordionExpandController extends index.VegaSlimmer {
    constructor() {
        super();
    }
    flipExpand() {
        this.expand = !this.expand;
    }
    onExpand() {
        if (this.groupId && this.expand) {
            index.ChangeManager.notify(index.ACCORDION_EXPAND_TOPIC, {
                groupId: this.groupId,
                element: this.host,
            });
        }
        this.expandEventEmitter.emit(this.expand);
    }
    registerObserver() {
        this.observer = new index.Observer(index.isAccordionObserverPayload, this.shouldCollapseSelfIfOtherExpand.bind(this));
        index.ChangeManager.register(index.ACCORDION_EXPAND_TOPIC, this.observer);
    }
    unregisterObserver() {
        if (this.observer) {
            index.ChangeManager.unregister(index.ACCORDION_EXPAND_TOPIC, this.observer);
            this.observer = null;
        }
    }
    shouldCollapseSelfIfOtherExpand(payload) {
        if (this.groupId === payload.groupId && this.host !== payload.element) {
            this.expand = false;
        }
    }
}
__decorate$1([
    index.MapToComponentField()
], VegaAccordionExpandController.prototype, "host", void 0);
__decorate$1([
    index.MapToComponentField()
], VegaAccordionExpandController.prototype, "groupId", void 0);
__decorate$1([
    index.MapToComponentField({ writable: true })
], VegaAccordionExpandController.prototype, "expand", void 0);
__decorate$1([
    index.MapToComponentField()
], VegaAccordionExpandController.prototype, "expandEventEmitter", void 0);
__decorate$1([
    index.MapToComponentMethod('watchExpand')
], VegaAccordionExpandController.prototype, "onExpand", null);
__decorate$1([
    index.MapToComponentMethod('componentWillLoad')
], VegaAccordionExpandController.prototype, "registerObserver", null);
__decorate$1([
    index.MapToComponentMethod('disconnectedCallback')
], VegaAccordionExpandController.prototype, "unregisterObserver", null);

const vegaAccordionCss = () => `:host(.v-block),.v-block{display:block}:host(.v-inline-block),.v-inline-block{display:inline-block}:host(.v-hidden),.v-hidden{display:none}@media (min-width: 320px){:host(.S\\:v-block),.S\\:v-block{display:block}:host(.S\\:v-inline-block),.S\\:v-inline-block{display:inline-block}:host(.S\\:v-hidden),.S\\:v-hidden{display:none}}@media (min-width: 768px){:host(.M\\:v-block),.M\\:v-block{display:block}:host(.M\\:v-inline-block),.M\\:v-inline-block{display:inline-block}:host(.M\\:v-hidden),.M\\:v-hidden{display:none}}@media (min-width: 1024px){:host(.L\\:v-block),.L\\:v-block{display:block}:host(.L\\:v-inline-block),.L\\:v-inline-block{display:inline-block}:host(.L\\:v-hidden),.L\\:v-hidden{display:none}}@media (min-width: 1440px){:host(.XL\\:v-block),.XL\\:v-block{display:block}:host(.XL\\:v-inline-block),.XL\\:v-inline-block{display:inline-block}:host(.XL\\:v-hidden),.XL\\:v-hidden{display:none}}:host{display:block;text-align:left;line-height:normal}.accordion{display:block;border-radius:16px}.accordion-title,.accordion-title-slot{font-family:"Inter", sans-serif;font-size:20px;font-weight:700;line-height:28px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));overflow:hidden;flex-basis:0;flex-grow:1;padding-top:2px;padding-bottom:2px}@media screen and (min-width: 768px) and (max-width: 1023px){.accordion-title,.accordion-title-slot{font-family:"Inter", sans-serif;font-size:20px;font-weight:700;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.accordion-title,.accordion-title-slot{font-family:"Inter", sans-serif;font-size:20px;font-weight:700;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.accordion-title,.accordion-title-slot{font-family:"Inter", sans-serif;font-size:20px;font-weight:700;line-height:28px;letter-spacing:0px}}.accordion-prefix-icon{width:24px;height:32px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));box-sizing:border-box;padding-top:4px;padding-bottom:4px;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;flex-shrink:0}.icon-position-center .accordion-prefix-icon{align-self:center}.accordion-content{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.accordion.background{padding:24px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}.accordion.expanded .accordion-content{margin-top:24px}.accordion.collapsed .accordion-content{max-height:0px;overflow:hidden;display:none}.accordion.collapsed .accordion-expand-icon-align-left{transform:rotate(-90deg)}.accordion.collapsed .accordion-expand-icon-align-right{transform:rotate(180deg)}.accordion-expand-icon{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;flex-shrink:0}.icon-position-center .accordion-expand-icon{align-self:center}.hidden{display:none}`;

var __decorate = (undefined && undefined.__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;
};
const VegaAccordion = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.vegaExpand = index.createEvent(this, "vegaExpand", 7);
        this.accordionExpand = index.createEvent(this, "accordionExpand", 7);
        this.globalSlimmers = {};
        this.renderer = new VegaAccordionRenderer();
        this.expandController = new VegaAccordionExpandController();
        this.expandEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaAccordion, index.VegaExpand, 'accordionExpand');
        this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
        /**
         * Determines whether the accordion block should be displayed
         *    with its default background color `bg-primary`
         *    and padding of `size-24`.
         *
         * @vegaVersion 1.3.0
         */
        this.drawsBackground = true;
        /**
         * Specifies the placement of the expand icon in the accordion.
         *
         * @vegaVersion 1.3.0
         */
        this.expandIconAlign = 'right';
        /* this property is modified by a slimmer */
        /**
         * Controls whether the accordion is expanded.
         *
         * @vegaVersion 1.0.4
         */
        /* eslint-disable-next-line @stencil/strict-mutable */
        this.expand = true;
        /**
         * Specifies the vertical placement of the prefix icon
         *    and expand icon within the accordion.
         *
         * @vegaVersion 1.8.1
         */
        this.iconPosition = 'top';
        /**
         * Specifies whether to display or hide the expand icon in the accordion.
         *
         * It can be provided as a ResponsiveType or boolean value.
         *
         * @vegaVersion 1.3.0
         */
        this.showExpandIcon = true;
    }
    watchExpand() {
    }
    render() {
        placeholder.slotPlaceholder(index.h("slot", null));
        return component.sanitizeVegaComponent(index.h(index.Host, null, this.renderer.render()), this.host);
    }
    get host() { return index.getElement(this); }
    static get watchers() { return {
        "expand": [{
                "watchExpand": 0
            }]
    }; }
};
__decorate([
    componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
], VegaAccordion.prototype, "globalSlimmers", void 0);
__decorate([
    index.InjectVegaSlimmer()
], VegaAccordion.prototype, "renderer", void 0);
__decorate([
    index.InjectVegaSlimmer()
], VegaAccordion.prototype, "expandController", void 0);
__decorate([
    index.InjectVegaSlimmer()
], VegaAccordion.prototype, "expandEventEmitter", void 0);
__decorate([
    index.InjectVegaSlimmer()
], VegaAccordion.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
VegaAccordion.style = vegaAccordionCss();

exports.vega_accordion = VegaAccordion;
