import { h } from "@stencil/core";
export class DgaTableOfContentUsage {
    render() {
        return (h("div", { key: 'd15349f639299a8a13ba612d18940844d2e66391', style: {
                position: 'relative',
                width: '100%',
                maxWidth: '1200px',
                margin: '0 auto',
                padding: '20px'
            } }, h("h1", { key: 'c241f5fb92aec3d58e5d3187c6b06135ceb1dd64' }, "Table of Content Example"), h("section", { key: '1a23badd07e4d2ad3005c9d75556d21c72e04a67' }, h("div", { key: '58cb04b4992e4bf61142cea62974e8b6766207d0', id: "section_1", style: {
                minHeight: "100vh",
                backgroundColor: "gray",
                padding: "20px",
                margin: "20px 0 200px 0"
            } }, h("h2", { key: '8083353da675666aaafd7de30c96be8a591e8618' }, "Section 1"), h("div", { key: 'dde1b84bac1987abbd025ed6ff47720d7eea43fe', id: "section_1_child_1", style: {
                minHeight: "100vh",
                backgroundColor: "rgba(255,0,0,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h3", { key: '071c99f442f9a4f98634140f07a3b54726c150b6' }, "Section 1 Child 1")), h("div", { key: '14e26789c607c157aa93b810d13c6fbd57788956', id: "section_1_child_2", style: {
                minHeight: "100vh",
                backgroundColor: "rgba(0,0,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h3", { key: '57999c1d01c770f386b0270767691690764726fb' }, "Section 1 Child 2")), h("div", { key: '92ba68aacd26323573c583af6d1114271b8706f7', id: "section_1_child_3", style: {
                minHeight: "100vh",
                backgroundColor: "rgba(0,255,0,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h3", { key: '8e765a3ca959e8888d0b59041c60f4ebecb5dda8' }, "Section 1 Child 3"), h("div", { key: 'b49a68dcc5bdfe9172813d92b18c43a273010688', id: "section_1_sub_child_1", style: {
                minHeight: "50vh",
                backgroundColor: "rgba(255,255,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h4", { key: '38a861ca3baf9141abe8a085991eda4ec8cfee46' }, "Section 1 Sub Child 1")), h("div", { key: '8cf1b89e6b82435e7e7867aa7a589cd2ffab4960', id: "section_1_sub_child_2", style: {
                minHeight: "50vh",
                backgroundColor: "rgba(255,255,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h4", { key: '40f13cbc2bf1713b05ea43e485c79296488b1308' }, "Section 1 Sub Child 2")), h("div", { key: 'cf9a416fe48021fa8362b0054ae6eb39231a43db', id: "section_1_sub_child_3", style: {
                minHeight: "50vh",
                backgroundColor: "rgba(255,255,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h4", { key: '698ccd912bde9c965eb029c60bd16670c9588bc6' }, "Section 1 Sub Child 3")))), h("div", { key: 'cc750db9ad84cbe493c27500de0caaba687044f9', id: "section_2", style: {
                minHeight: "100vh",
                backgroundColor: "rgba(0,0,0,0.8)",
                color: "white",
                padding: "20px",
                margin: "20px 0"
            } }, h("h2", { key: '7625fef39028d26d9ba94da0a5f19232ca5a8bb7' }, "Section 2")), h("div", { key: '8fdef76dd784f36e415b0c7055c3482333c239f5', id: "section_3", style: {
                minHeight: "100vh",
                backgroundColor: "brown",
                padding: "20px",
                margin: "20px 0"
            } }, h("h2", { key: '2cc3e53dad0347a96ae95775092d76164318127b' }, "Section 3"), h("div", { key: 'e14e96256c836b85ae44626667c010bff8f014d9', id: "section_3_child_1", style: {
                minHeight: "50vh",
                backgroundColor: "rgba(255,255,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h3", { key: 'c1e0bbbd48a010d291ed8e65e627d902d9947fc9' }, "Section 3 Child 1")), h("div", { key: '488cac924188ac4a37af327242f7454a4d9b433e', id: "section_3_child_2", style: {
                minHeight: "50vh",
                backgroundColor: "rgba(255,255,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h3", { key: '2f8f92511e6671c8381e9e128c976c3fecf6239e' }, "Section 3 Child 2"), h("div", { key: 'a5de40fb0dd8647cfc6cbe952049b50a2aed69ed', id: "section_3_child_2_1", style: {
                minHeight: "30vh",
                backgroundColor: "rgba(0,0,0,0.1)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h4", { key: '43b5a052e83e60297cd8ef3aa673089d9b858aee' }, "Section 3 Child 2.1")), h("div", { key: '977546d7f8f3d9354f51a23386a5cddfcb137df2', id: "section_3_child_2_2", style: {
                minHeight: "30vh",
                backgroundColor: "rgba(0,0,0,0.1)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h4", { key: '4290eb07b34eeddce1cb411631331bbec70b73b7' }, "Section 3 Child 2.2")), h("div", { key: '2ab2d4a0a4805a9ace81c1af9b3e219e1987d671', id: "section_3_child_2_3", style: {
                minHeight: "30vh",
                backgroundColor: "rgba(0,0,0,0.1)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h4", { key: '93e3dc436cf1e8aea59085514d8cb9b9fe2a6cc9' }, "Section 3 Child 2.3"))))), h("div", { key: '2d977331c849d63655c781aa381f27834b94824b', style: {
                position: "fixed",
                top: "100px",
                left: "40px",
                zIndex: '100',
                background: "white",
                borderRadius: "8px",
                boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
            } }, h("dga-table-of-content", { key: '08fe8c34cc6bed47143854d5e57ea2528649c444', 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' }
                            ]
                        }
                    ]
                }
            ] })), h("div", { key: '04e02601de43ec292c2a28926ac95d3e5fa06d6d', style: {
                position: "fixed",
                top: "100px",
                right: "40px",
                zIndex: '100',
                background: "white",
                borderRadius: "8px",
                boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
            } }, h("dga-table-of-content", { key: '4f87d536da5b9257c2d4d1374f27fcafe88a3b8c', title: "\u0641\u064A \u0647\u0630\u0647 \u0627\u0644\u0635\u0641\u062D\u0629", subTitle: "[\u0627\u0633\u0645 \u0627\u0644\u0635\u0641\u062D\u0629]", rtl: true, sections: [
                {
                    Name: 'قسم صفحة',
                    Target: 'section_1',
                    Children: [
                        { Name: 'قسم صفحة', Target: 'section_1_child_1' },
                        { Name: 'قسم صفحة', Target: 'section_1_child_2' },
                        {
                            Name: 'قسم صفحة',
                            Target: 'section_1_child_3',
                            Children: [
                                { Name: 'قسم صفحة', Target: 'section_1_sub_child_1' },
                                { Name: 'قسم صفحة', Target: 'section_1_sub_child_2' },
                                { Name: 'قسم صفحة', 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' }
                            ]
                        }
                    ]
                }
            ] }))));
    }
    static get is() { return "dga-table-of-content-usage"; }
}
