import { h } from "@stencil/core";
export class DgaTooltipUsage {
    constructor() {
        this.activeStep = 1;
    }
    render() {
        return (h("div", { key: '4317c5dedea6bd67a3c2a011367d43546bba8bf6' }, h("h1", { key: 'c02b720a04b2b652657bfb8ece9c0ec22238e47f' }, "Tooltip Example"), h("div", { key: '60d0adff535ed37a4b0c874657212aef210bbd0f', style: { padding: "50px", display: "flex", gap: "20px" } }, h("div", { key: '3f8ca32084a46b31c1972376047aa6ad3f917111', style: { display: "flex", flexDirection: "column", gap: "20px" } }, h("dga-tooltip", { key: '099fcf4c05586a0289c526dc8e51f85add9fd91e', title: "Tooltip title", helperText: "Max width of tooltips is 240px - text will wrap automatically", direction: 'right', theme: 'dark', icon: true, beakAlignment: 'end', beakPlacement: 'left', feedbackIcon: {
                type: "error-!",
                style: "container",
                size: 24
            } }, "Hello")), h("div", { key: '16e1f74e9b72038d08e570cabe2004fbf9b982fe', style: { display: "flex", flexDirection: "column", gap: "20px" } }))));
    }
    static get is() { return "dga-tooltip-usage"; }
    static get states() {
        return {
            "activeStep": {}
        };
    }
}
