'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-a0b63bee.js');

const DgaTableOfContentUsage = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    render() {
        return (index.h("div", { key: 'dd6512aa32f5908970cb161eaac5f72ac42dba13', style: {
                position: 'relative',
                width: '100%',
                maxWidth: '1200px',
                margin: '0 auto',
                padding: '20px'
            } }, index.h("h1", { key: '8292b420c38cd0d8b7013d6d890962968f7320f2' }, "Table of Content Example"), index.h("section", { key: '59d850ebec9e15db146c2a76ce70109ad378f32d' }, index.h("div", { key: 'c275c1f1e181363f67e9cb2b272f09089474353d', id: "section_1", style: {
                minHeight: "100vh",
                backgroundColor: "gray",
                padding: "20px",
                margin: "20px 0"
            } }, index.h("h2", { key: 'fac4c49659d58c7681aaddac11b801bd261fc3b1' }, "Section 1"), index.h("div", { key: '5d30a83a3ce0bc16a2c8b7182ee83b5a1bc77d22', id: "section_1_child_1", style: {
                minHeight: "100vh",
                backgroundColor: "rgba(255,0,0,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, index.h("h3", { key: 'a3c6171121dd7660aaf393466f8ad1cc8bf95620' }, "Section 1 Child 1")), index.h("div", { key: 'c534a2faedb18f086746ea6e6e284d7ed40e7524', id: "section_1_child_2", style: {
                minHeight: "100vh",
                backgroundColor: "rgba(0,0,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, index.h("h3", { key: '98c968935ca58ac62df03c0153926084d662d0f8' }, "Section 1 Child 2")), index.h("div", { key: 'ac567fba55c2ca3e39dbcae32ea9062572ac0031', id: "section_1_child_3", style: {
                minHeight: "100vh",
                backgroundColor: "rgba(0,255,0,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, index.h("h3", { key: '52f816b2f994d4a2a35a91492ad0d0ce6c1a7268' }, "Section 1 Child 3"), index.h("div", { key: '8d7eb48e3ec546b7a3be3f39d8ad4381fb8091d4', id: "section_1_sub_child_1", style: {
                minHeight: "50vh",
                backgroundColor: "rgba(255,255,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, index.h("h4", { key: 'd573962e302f8bcbaec3a43b3054dd1147840227' }, "Section 1 Sub Child 1")), index.h("div", { key: '8e1138611d7f9ed8bf77bc6b01da3d5cd8fefdfa', id: "section_1_sub_child_2", style: {
                minHeight: "50vh",
                backgroundColor: "rgba(255,255,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, index.h("h4", { key: 'fb9ff2d66c25ca6c4f4b6feffb6081c42009a9ee' }, "Section 1 Sub Child 2")), index.h("div", { key: 'f40f61d8bffe9581c438e9f10b8cc06bc2511050', id: "section_1_sub_child_3", style: {
                minHeight: "50vh",
                backgroundColor: "rgba(255,255,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, index.h("h4", { key: 'f3c4ac9729fa10b1d1d962f076ff134a390695ce' }, "Section 1 Sub Child 3")))), index.h("div", { key: '2593bc70d277d893e53788b523707bd7ef17fbf9', id: "section_2", style: {
                minHeight: "100vh",
                backgroundColor: "rgba(0,0,0,0.8)",
                color: "white",
                padding: "20px",
                margin: "20px 0"
            } }, index.h("h2", { key: '0c2ac0accb51d73ab0c8eb3596267a591ac1e3d0' }, "Section 2")), index.h("div", { key: '98f8eb1e90348fe9c6309e654bd5010f85015300', id: "section_3", style: {
                minHeight: "100vh",
                backgroundColor: "brown",
                padding: "20px",
                margin: "20px 0"
            } }, index.h("h2", { key: '88ba92fbd7b78649e7782a1dce59bc95249036cc' }, "Section 3"), index.h("div", { key: '2cd7722c6a529ba195a9c0cbc3f0c1d051ca385a', id: "section_3_child_1", style: {
                minHeight: "50vh",
                backgroundColor: "rgba(255,255,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, index.h("h3", { key: 'e9b29be3fdccf6047604b900dd8b580b9ad8084e' }, "Section 3 Child 1")), index.h("div", { key: '798a9af55605c38a7f079686619bcf8ae5599d66', id: "section_3_child_2", style: {
                minHeight: "50vh",
                backgroundColor: "rgba(255,255,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, index.h("h3", { key: '19bfac1fdc7a9cef8113f0e54e444d781e614c71' }, "Section 3 Child 2"), index.h("div", { key: '5113637e9b01c79dc3952e57fe002d52f994c5dc', id: "section_3_child_2_1", style: {
                minHeight: "30vh",
                backgroundColor: "rgba(0,0,0,0.1)",
                margin: "20px 0",
                padding: "20px"
            } }, index.h("h4", { key: '89eb1544227615054ec220226aba6de315d7347b' }, "Section 3 Child 2.1")), index.h("div", { key: '7b85000bb7c9876662ecfc76eb8e362d9696f2a0', id: "section_3_child_2_2", style: {
                minHeight: "30vh",
                backgroundColor: "rgba(0,0,0,0.1)",
                margin: "20px 0",
                padding: "20px"
            } }, index.h("h4", { key: '6b27f6764648eb8597ff657d9e272f632574813d' }, "Section 3 Child 2.2")), index.h("div", { key: '8f3f4732bfa023226ea008fe93a8248a5783f565', id: "section_3_child_2_3", style: {
                minHeight: "30vh",
                backgroundColor: "rgba(0,0,0,0.1)",
                margin: "20px 0",
                padding: "20px"
            } }, index.h("h4", { key: '69610f6c5ebcd04f81efa2416a316ab624b9e219' }, "Section 3 Child 2.3"))))), index.h("div", { key: 'b353af0b50023532b80320cb27254b69786876c4', style: {
                position: "fixed",
                top: "100px",
                right: "40px",
                zIndex: '100',
                background: "white",
                borderRadius: "8px",
                boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
            } }, index.h("dga-table-of-content", { key: '6702bdc065644ca0ccc0a7e87c827b2bff72cad2', title: "On this Page", subTitle: "Page Title", sections: [
                {
                    Name: 'Section 1',
                    Target: 'section_1',
                    Children: [
                        { Name: 'Section 1 Child 1', Target: 'section_1_child_1' },
                        { Name: 'Section 1 Child 2', Target: 'section_1_child_2' },
                        {
                            Name: 'Section 1 Child 3',
                            Target: 'section_1_child_3',
                            Children: [
                                { Name: 'Sub Child 1', Target: 'section_1_sub_child_1' },
                                { Name: 'Sub Child 2', Target: 'section_1_sub_child_2' },
                                { Name: 'Sub Child 3', Target: 'section_1_sub_child_3' }
                            ]
                        }
                    ]
                },
                { Name: 'Section 2', Target: 'section_2' },
                {
                    Name: 'Section 3',
                    Target: 'section_3',
                    Children: [
                        { Name: 'Section 3 Child 1', Target: 'section_3_child_1' },
                        {
                            Name: 'Section 3 Child 2',
                            Target: 'section_3_child_2',
                            Children: [
                                { Name: 'Child 2.1', Target: 'section_3_child_2_1' },
                                { Name: 'Child 2.2', Target: 'section_3_child_2_2' },
                                { Name: 'Child 2.3', Target: 'section_3_child_2_3' }
                            ]
                        }
                    ]
                }
            ] }))));
    }
};

exports.dga_table_of_content_usage = DgaTableOfContentUsage;

//# sourceMappingURL=dga-table-of-content-usage.cjs.entry.js.map