{"size": 2525, "ext": "js", "max_stars_repo_path": "de.dashup.application/src/main/webapp/components/dashup-grid-layout.js", "max_stars_repo_name": "raphaelmue/dashup", "max_stars_repo_stars_event_min_datetime": "2018-11-09T22:53:00.000Z", "max_stars_repo_stars_event_max_datetime": "2019-03-24T14:36:35.000Z", "max_issues_repo_path": "de.dashup.application/src/main/webapp/components/dashup-grid-layout.js", "max_issues_repo_name": "raphaelmue/dashup", "max_issues_repo_issues_event_min_datetime": "2018-11-29T19:13:19.000Z", "max_issues_repo_issues_event_max_datetime": "2019-06-17T15:36:43.000Z", "max_forks_repo_path": "de.dashup.application/src/main/webapp/components/dashup-grid-layout.js", "max_forks_repo_name": "raphaelmue/dashup", "max_forks_repo_forks_event_min_datetime": "2018-10-20T09:31:36.000Z", "max_forks_repo_forks_event_max_datetime": "2021-11-30T10:44:14.000Z"}
{"max_stars_count": 3, "max_issues_count": 87, "max_forks_count": 6, "avg_line_length": 35.0694444444, "max_line_length": 114, "alphanum_fraction": 0.4162376238}
import {DashupComponent} from "./dashup-component.js";

export class DashupGridLayout extends DashupComponent {

    render() {
        return DashupComponent.html`
            <div class="container">
                ${this.elements.map((row) => DashupComponent.html`
                    <div class="row">
                        ${row.map((element) => {
                            let size = element.layout.size;
                            let offset = element.layout.offset;
                            let classes = {col: true};
                            let sizes = ["s", "m", "l", "xl"];
                            sizes.forEach((element) => {
                                if (size) {
                                    classes[element + size] = true;
                                } else {
                                    classes[element + "4"] = true;
                                }
                                if (offset) {
                                    classes["offset-" + element + offset] = true;
                                }
                            });
                            return DashupComponent.html`
                                <div class="${DashupComponent.classMap(classes)}">
                                    <slot name="${DashupGridLayout.getSlotName(element)}"></slot>
                                </div>
                            `;
        })}
                    </div>
                `)}
            </div>
        `;
    }

    static get properties() {
        return {
            elements: {
                type: Array, hasChanged: () => {
                    return false;
                }
            }
        };
    }

    constructor() {
        super();
        this.elements = [];
    }

    //Called after elements templated is created -> layout for grid layout within a grid layout is already defined
    firstUpdated() {
        Array.from(this.children).map((element) => {
            let row = element.layout.row;
            if (!this.elements[row]) {
                this.elements[row] = [];
            }
            element.setAttribute("slot", DashupGridLayout.getSlotName(element));
            this.elements[row].push(element);
        });
        this.requestUpdate();
    }

    static getSlotName(element) {
        let keyData = [element.name, element.layout.row, element.layout.offset, element.layout.size];
        return keyData.join("-");
    }

}

customElements.define("dashup-grid-layout", DashupGridLayout);