import { r as registerInstance, h } from './index-D0dWnGvB.js';

const NdsTableOfContentUsage = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    render() {
        return (h("div", { key: '8976d2f5b9ffcc322e12a0606c52adb9b8a1f624', style: {
                position: 'relative',
                width: '100%',
                maxWidth: '1200px',
                margin: '0 auto',
                padding: '20px'
            } }, h("h1", { key: '8a2317a495203dbcc3e61ffc95c00316c0cce49c' }, "Table of Content Example"), h("section", { key: 'b13a9a190ad05ffab1acdb419bb17a395020ce1d' }, h("div", { key: '590289d1c385c7d15567f6c37b78b44175d5901e', id: "section_1", style: {
                minHeight: "100vh",
                backgroundColor: "gray",
                padding: "20px",
                margin: "20px 0 200px 0"
            } }, h("h2", { key: 'e95a13f23af97e5a4a66a8b1e5722012b41bcc0f' }, "Section 1"), h("div", { key: 'a339d723ac2dee1a8f25f26d07d49991cb69239f', id: "section_1_child_1", style: {
                minHeight: "100vh",
                backgroundColor: "rgba(255,0,0,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h3", { key: 'e5ae3e0505cc81f2ea00080f71f4c7035aaebcf8' }, "Section 1 Child 1")), h("div", { key: '2ba0bc4c427024c8914602f453973e1d95e4a984', id: "section_1_child_2", style: {
                minHeight: "100vh",
                backgroundColor: "rgba(0,0,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h3", { key: 'f12acd5017da8cc65465b94393e099e9bfc29d6e' }, "Section 1 Child 2")), h("div", { key: 'c508177abd9e75a48c34a7b9c2559f331f3a7b2d', id: "section_1_child_3", style: {
                minHeight: "100vh",
                backgroundColor: "rgba(0,255,0,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h3", { key: 'c7d4b3594f1de545898ca59d68cec54ef0448a43' }, "Section 1 Child 3"), h("div", { key: 'a7430bef424b2034fc0aa2eb9edacbaf24436b66', id: "section_1_sub_child_1", style: {
                minHeight: "50vh",
                backgroundColor: "rgba(255,255,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h4", { key: '283f9e228ddcc395c666e525015b71fdf9d4cf17' }, "Section 1 Sub Child 1")), h("div", { key: 'ebe9c97d3616d89fe4e399c1e5b8969d6300b710', id: "section_1_sub_child_2", style: {
                minHeight: "50vh",
                backgroundColor: "rgba(255,255,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h4", { key: '2d5359ea2b1fdf31cc7dc7352a6fd0f247bcc285' }, "Section 1 Sub Child 2")), h("div", { key: 'f0ccaae803103eb9ff7fa4da2ea19adb3d3da33b', id: "section_1_sub_child_3", style: {
                minHeight: "50vh",
                backgroundColor: "rgba(255,255,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h4", { key: '451d8c82c3b175c60cc83212054d6a78a4f9a5d3' }, "Section 1 Sub Child 3")))), h("div", { key: '15cca72a6b6ff10b4b7f5c780a2e4c058a4be28b', id: "section_2", style: {
                minHeight: "100vh",
                backgroundColor: "rgba(0,0,0,0.8)",
                color: "white",
                padding: "20px",
                margin: "20px 0"
            } }, h("h2", { key: '21454ee03d34b1c07f12150798c38343fea3ae21' }, "Section 2")), h("div", { key: 'e6ade736af01c30cf338bf460785e7b59a8ad9c6', id: "section_3", style: {
                minHeight: "100vh",
                backgroundColor: "brown",
                padding: "20px",
                margin: "20px 0"
            } }, h("h2", { key: '83a6ffc62d3f02d84e11084c17450d354d14f8b9' }, "Section 3"), h("div", { key: 'cc3684cc455d3cbe62afe684b5b5fdacbcd973f3', id: "section_3_child_1", style: {
                minHeight: "50vh",
                backgroundColor: "rgba(255,255,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h3", { key: '4126ccdf944880d47bfdad8e9897b8b56b1a3676' }, "Section 3 Child 1")), h("div", { key: '11603836d5a4e54d1048693cd35509c91562b14c', id: "section_3_child_2", style: {
                minHeight: "50vh",
                backgroundColor: "rgba(255,255,255,0.3)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h3", { key: '3593b5f8260f9e343ea4f6f3c1dc6e14dc598a1f' }, "Section 3 Child 2"), h("div", { key: '9e40873181139cc30c0c751282cba78d86324c9a', id: "section_3_child_2_1", style: {
                minHeight: "30vh",
                backgroundColor: "rgba(0,0,0,0.1)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h4", { key: 'dbbb90d7b4111701ddfa82151155e5985939f737' }, "Section 3 Child 2.1")), h("div", { key: '07eaa7fccefd587663cad8714557ca50ed5ad6b2', id: "section_3_child_2_2", style: {
                minHeight: "30vh",
                backgroundColor: "rgba(0,0,0,0.1)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h4", { key: '3775282c598e6f5aeada1021177e85cdb0e1c1cd' }, "Section 3 Child 2.2")), h("div", { key: 'c19c544633e04729669142bf6d4f164c134b3016', id: "section_3_child_2_3", style: {
                minHeight: "30vh",
                backgroundColor: "rgba(0,0,0,0.1)",
                margin: "20px 0",
                padding: "20px"
            } }, h("h4", { key: '9afd9cd00c393fd71c6b2ed102f79f3be4638fc5' }, "Section 3 Child 2.3"))))), h("div", { key: 'da39630ace9f929a53e3f31dc14ceb3bb4462310', 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: '6853707a25c51ef6b770dad5d8425d6db3288b86', 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: '62ae23f4553b8597b5aee914a811811cf05fafbf', 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: '87662f93081dd4dbbc47435d4b4e2df09205964a', 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' }
                            ]
                        }
                    ]
                }
            ] }))));
    }
};

export { NdsTableOfContentUsage as nds_table_of_content_usage };
