280.mjs

/**
 * @file development/issues/open/280.mjs
 * @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/280
 * @description select attribute=\"value\" from datasource doesn´t work
 * @issue 280
 */

import "../../../source/components/style/property.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/form/select.mjs";
import {assembleMethodSymbol, CustomElement, registerCustomElement} from "../../../source/dom/customelement.mjs";

const dataset = [
    {
        "name": "United Kingdom",
        "alpha-2": "GB",
        "country-code": "826",
    },
    {
        "name": "Sweden",
        "alpha-2": "SE",
        "country-code": "752",

    },
    {
        "name": "Germany",
        "alpha-2": "DE",
        "country-code": "276",
    }
]

setTimeout(() => {

    const select = document.getElementById("i280")
   // console.log(select);

    //select.setOption("disabled", true);

    select.setOption("test.value", ["826", "752"]);

    select.getSelect().setOption('mapping.labelTemplate', '${name} (${alpha-2})')

// the value template is a string that will be used to generate the value for each option
    select.getSelect().setOption('mapping.valueTemplate', '${country-code}')


    //if(true) return

    //document.getElementById("i280").setOption("test.value", "a,b,c");

    setTimeout(() => {
// the label template is a string that will be used to generate the label for each option

        select.getSelect().importOptions(dataset);

    }, 1000);

    //select.setOption("test.value", ["826","752"]);

}, 1000);


class Issue280 extends CustomElement {

    [assembleMethodSymbol]() {
        super[assembleMethodSymbol]();
    }

    get defaults() {
        return Object.assign({}, super.defaults, {
            templates: {
                main: getTemplate(),
            },

            test: {
                value: ["826"]
            }

        });
    }

    static getTag() {
        return "monster-issue-280";
    }

    getSelect() {
        return this.shadowRoot.querySelector("monster-select");
    }

}


/**
 * @private
 * @return {string}
 */
function getTemplate() {
    // language=HTML
    return `
        <div data-monster-role="control" part="control">

            <monster-select data-monster-attributes="value path:test.value" data-monster-option-type="checkbox">

            </monster-select>


        </div>
    `;
}


registerCustomElement(Issue280);