import { h } from "@stencil/core";
export class DgaCollapseUsage {
    constructor() {
        this.variant = 'neutral';
        this.open = false;
    }
    render() {
        return (h("div", { key: '92c7f8236a86a8ee28da56d937042bb40e97682d' }, h("h1", { key: '1dea075f3bf4b86406ccc8bbebbd21caa2851b2e' }, "Collapse Example"), h("div", { key: '9dd53648565c0a465f28813dd36ca117a220bc21', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'e7e4a8bbef8df4d23c900fd3ca3668ee104ddc74', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: 'deac6f3db9818e2735e70a1dfdd5e473aca69a64', style: { display: "flex", justifyContent: "center" } }, h("button", { key: '199ef6fc1e9f5eeaf0cb80eb90f50d0820bb9787', onClick: () => this.open = true }, "open"), h("button", { key: 'bb5af47342faab219c52a428e6120392555f0c5f', onClick: () => this.open = false }, "close"))), h("dga-collapse", { key: '647f2ae33a95941a88907a12783f7db88ae3dfde', open: this.open, "transition-duration": "0.1s" }, h("div", { key: '9e2867d83cf27978057d6c63517fabc8a5b40357' }, "Your content here")), h("div", { key: '5ea231376c2ca69e108060dbbbcecb0b189c2c30', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
    }
    static get is() { return "dga-collapse-usage"; }
    static get states() {
        return {
            "variant": {},
            "open": {}
        };
    }
}
//# sourceMappingURL=dga-collapse-usage.js.map
