198.mjs

/**
 * @file development/issues/open/198.mjs
 * @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/198
 * @description Find Template Datatable in Object
 * @issue 198
 */

import "../../../source/components/style/property.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/datatable/datatable.mjs";

import "../../../source/components/style/color.pcss";
import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/table.pcss";
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/badge.pcss";
import "../../../source/components/style/button.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/data-grid.pcss";
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/style/display.pcss";
import "../../../source/components/datatable/datasource/rest.mjs";
import "../../../source/components/datatable/datasource/dom.mjs";
import "../../../source/components/datatable/filter.mjs";
import "../../../source/components/datatable/filter-button.mjs";
import "../../../source/components/datatable/embedded-pagination.mjs";
import "../../../source/components/datatable/datatable.mjs";
import "../../../source/components/datatable/dataset.mjs";
import "../../../source/components/datatable/status.mjs";
import "../../../source/components/datatable/filter/range.mjs";
import "../../../source/components/datatable/filter/select.mjs";
import "../../../source/components/datatable/filter/input.mjs";
import "../../../source/components/datatable/filter/date-range.mjs";
import {windowReady} from "../../../source/dom/ready.mjs";
import "../../../source/components/host/host.mjs";
import {CustomElement} from "../../../source/dom/customelement.mjs";
import "../../../source/components/form/button.mjs";
import "../../../source/components/form/popper-button.mjs";
import "../../../source/components/form/tabs.mjs";


// Definiere eine Klasse, die von HTMLElement erbt
class SimpleComponent extends CustomElement {
    // Der Konstruktor wird aufgerufen, wenn die Instanz der Komponente erstellt wird
    constructor() {
        super(); // Ruft den Konstruktor der übergeordneten Klasse auf

        // Erstelle eine Shadow Root
        const shadow = this.attachShadow({ mode: 'open' });

        // Erstelle ein neues div-Element
        const div = document.createElement('div');

        // Füge etwas Inhalt zum div hinzu
        
        
         div.innerHTML = `
        
        <monster-datasource-rest id="data1"
                                 data-monster-option-read-url="/assets/world.json"></monster-datasource-rest>

                <monster-datatable id="t12" data-monster-datasource-selector="#data1"
                data-monster-option-mapping-data=""
                           data-monster-responsive-breakpoint="1500">
            <template id="t12-row">
                <div data-monster-head="name" data-monster-replace="path:t12-row.name"></div>
                <div data-monster-head="region" data-monster-replace="path:t12-row.region"></div>
            </template>
        </monster-datatable>
         `;
        

        // Füge das div zur Shadow Root hinzu
        shadow.appendChild(div);
    }
}

// Registriere die neue benutzerdefinierte Komponente unter dem Namen <simple-component>
customElements.define('simple-component', SimpleComponent);