import { LasalRuntimeSigElement, SigPolymer } from '../../sigmatek/sig-element/sig-element.js';
import "../sig-control-listview/sig-control-listview.js"
import "../sig-control-titlebar/sig-control-titlebar.js"
import "../sig-control-image/sig-control-image.js"
import '../sig-control-listview/sig-control-listview-css.js'
import '../sig-control-titlebar/sig-control-titlebar-css.js'
import '../sig-control-image/sig-control-image-css.js'
import "../sig-control-scrollbar/sig-control-scrollbar-css.js"

/****************************************************************************************************
 * @class 
 * @classdesc Implements and exports sig-control-language-selection component.
 * @extends LasalRuntimeSigElement
 * 
 * @property {String} activeLang The acronym of an active language.
 * @property {String} controlTextList Name of the property holding the component's text list.
 * @property {Object} fontObjHeader The object containing font properties applied on the component's header. 
 * @property {Object} fontObjTitle The object containing font properties applied on the component's title.
 * @property {Object} fontObjBody The object containing font properties applied on the component's body.
 * @property {Object} tmApi The reference to the TextManager API object.
 * @property {Object} stylingManager The reference to the defaultStyleManager API object.
 * @property {Number} borderWidthCache An obsolete property.
****************************************************************************************************/
export class LasalRuntimeSigControlLanguageSelection extends LasalRuntimeSigElement {

    /****************************************************************************************************
     * Returns the component's registered tag name.
     * 
     * @readonly
     * @static
     * @returns {String} The component's tag name.
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    static get is() {
        return "sig-control-language-selection";
    }

    /****************************************************************************************************
     * Returns the import path URL used by Polymer.
     * 
     * @readonly
     * @static
     * @returns {String} The import path URL.
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    static get importMeta() { return import.meta; }

    /****************************************************************************************************
     * Returns the HTML literal of the component.
     * 
     * @readonly
     * @static
     * @returns {HTMLLIElement} The template literal of the component.
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    static get template() {
        return SigPolymer.html`
        
            <style include="sig-element-css sig-control-listview-css sig-control-titlebar-css sig-control-image-css sig-control-scrollbar-css">
                :host {
                    /* Basic styling of the component */
                    color: var(--theme-sig-control-language-selection-color, inherit);
                    background-color: var(--theme-sig-control-language-selection-background-color, inherit);

                    border-width: var(--theme-sig-control-language-selection-border-width, 0px);
                    border-color: var(--theme-sig-control-language-selection-border-color, inherit);
                    border-style: var(--theme-sig-control-language-selection-border-style, none);
                    border-radius: var(--theme-sig-control-language-selection-border-radius, 0px);

                    /* Basic box model settings */
                    display: var(--theme-sig-control-language-selection-display, block);
                    position: var(--theme-sig-control-language-selection-position, absolute);
                    margin: var(--theme-sig-control-language-selection-margin, 0);
                    padding: var(--theme-sig-control-language-selection-padding, 0);
                    overflow: var(--theme-sig-control-language-selection-overflow, hidden);

                    top: var(--theme-sig-control-language-selection-top, var(--theme-sig-element-top, auto));
                    left: var(--theme-sig-control-language-selection-left, var(--theme-sig-element-left, auto));
                    width: var(--theme-sig-control-language-selection-width, var(--theme-sig-element-width, auto));
                    height: var(--theme-sig-control-language-selection-height, var(--theme-sig-element-height, auto));
                }

                :host * {
                    /* Reset margin and padding for child elements and turn off text selection */
                    @apply --notextselect;
                    margin: 0;
                    padding: 0;
                }

                .clearfix:after {
                    /* Import the global clearfix css mixin */
                    @apply --clearfix
                }

                .sig-control-language-selection {
                    /* should be relative for use in designer */
                    position: relative;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    display: flex;
                    flex-direction: column; 
                    min-height:100%;
                }

                :host([hidetitle]) sig-control-titlebar {
                    display: none !important;
                }

                :host sig-control-titlebar {
                    position: unset;
                    display: block;
                    width:100%;
                    height: var(--theme-sig-element-height, 26px); 
                }

                .languages {
                    flex: 1;
                    height:100%;
                    width: 100%;
                    position:relative;
                }

                :host sig-control-listview {
                    --theme-sig-control-listview-border-radius: 0px;
                    height:100%;
                    text-indent: 2px;
                    width:100%;
                }
            </style>
            <div id="languageselection" class="sig-control-language-selection clearfix">
                <sig-control-titlebar id="titlebar" value="[[texts.titletext]]" applybordereffect="[[applybordereffect]]"
                    shadowactive="[[shadowactive]]"></sig-control-titlebar>
                <div class="languages">
                    <sig-control-listview id="languageselectiongrid"></sig-control-listview>
                </div>
            </div>
        `;
    }

    /****************************************************************************************************
     * Returns the defined Polymer properties of the component.
     * 
     * @readonly
     * @static
     * @returns {Object} The defined Polymer properties.
     * @memberof LasalRuntimeSigControlLanguageSelection
     * 
     * @property {Object}   data                    - Object containing language data.   
     * @property {Object}   config                  - Object containing language configuration.
     * @property {Boolean}  hideheader              - Defines whether the component's header should be hidden.
     * @property {Boolean}  hidetitle               - Defines whether the component's title should be hidden.
     * @property {Boolean}  shadowactive            - Defines whether the box-shadow should be applied on the component.
     * @property {Boolean}  applybordereffect       - Defines whether the border effect should be applied on the component.
     * @property {Boolean}  hideflag                - Defines whether the language's country flag should be hidden.
     * @property {Boolean}  hidelanguagename        - Defines whether the language names should be hidden.
     * @property {String}   namecolumnwidth         - The width of the name column given in px.
     * @property {Boolean}  disablekeys             - Defines whether key movement and actions in the sub-component sig-control-listview is disabled.
     * @property {String}   flagbackgroundcolor     - The background color of the flag column. 
     * @property {String}   flagcolumnwidth         - The width of the flag column given in px.
     * @property {String}   titletext               - The title text of the component.
     *    
    ****************************************************************************************************/
    static get properties() {
        // property names should always be lower case so we
        // can use them directly on the element as an attribute
        let props = {
            data: {
                type: Object,
                value: () => null
            },
            config: {
                type: Object,
                value: () => null
            },
            hideheader: {
                type: Boolean,
                value: false,
                observer: '_initChange'
            },
            hidetitle: {
                type: Boolean,
                value: false,
                reflectToAttribute: true,
            },
            shadowactive: {
                type: Boolean,
                value: false,
                reflectToAttribute: true
            },
            applybordereffect: {
                type: Boolean,
                value: false,
                reflectToAttribute: true
            },
            flagbackgroundcolor: {
                type: String,
                value: "transparent",
                observer: '_initChange'
            },
            titletext: {
                type: String,
                value: '',
                observer: '_setTexts'
            },
            // this property was renamed to "Visible" in 01.03.003 and due to compatibility reasons the internal name was kept
            // -> the value is inverted and saved in showflag
            hideflag: {
                type: Boolean,
                value: true,
                observer: '_hideFlagChanged'
            },
            flagcolumnwidth: {
                type: String,
                value: "60px",
                observer: '_initChange'
            },
            headertextalignflag: {
                type: String,
                value: 'center',
                observer: '_initChange'
            },
            orderflag:{
                type: Number,
                value: 10,
                observer: '_initChange'
            },
            // this property was renamed to "Visible" in 01.03.003 and due to compatibility reasons the internal name was kept
            // -> the value is inverted and saved in showlanguagename
            hidelanguagename: {
                type: Boolean,
                value: true,
                observer: '_hideLanguageNameChanged'
            },
            namecolumnwidth: {
                type: String,
                value: "150px",
                observer: '_initChange'
            },
            headertextalignlanguagename: {
                type: String,
                value: 'left',
                observer: '_initChange'
            },
            textalignlanguagename: {
                type: String,
                value: undefined,
                observer: '_initChange'
            },
            orderlanguagename:{
                type: Number,
                value: 20,
                observer: '_initChange'
            }
        }
        return props;
    }

    /****************************************************************************************************
     * Creates an instance of sig-control-language-selection.
     * 
     * @constructor
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    constructor() {
        super();
        this.activeLang = null;
        this.controlTextList = this.getControlTextListName();
        this.fontObjHeader = null;
        this.fontObjBody = null;
        this.fontObjTitle = null;
        this.tmApi = window.sigApi.textManager;
        this.stylingManager = window.sigApi.defaultStyleManager;
        this.borderWidthCache = null;

        // define lowercase so they can be used as polymer properties in the future
        this.showlanguagename = true;
        this.showflag = true;
    }

    /****************************************************************************************************
     * This callback is called when the component is connected in the DOM.
     * 
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    connectedCallback() {
        super.connectedCallback();

        SigPolymer.beforeNextRender(this, function (params) {
            if (!this.isdesignmode) {
                // Bind the event mediator for language switch
                this.sigAddEventListener('LANGUAGE_CHG', (majorId, minorId, msg) => {
                    this._switchLang(msg);
                }, 'runtimeEvent');
            }
            if (!this.activeLang) {
                this._init();
            }

            // Apply fonts
            this._applyFontObjects();
        });
    }


    /****************************************************************************************************
     * Initiates the component. Called by the connectedCallback().
     * 
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    _init() {
        this.activeLang = this._getActiveLang();
        this._setTexts().then(() => {
            this._getData();
            this._initProps();
            this._setConfig();            
        }).catch((error) => {
            this._log('_init(): failed to get texts -> ' + error, 'ERROR');
        });
    }

    /****************************************************************************************************
     * Called when hidelanguagename changed.
     *
     * @param {*} newval
     * @param {*} oldval
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    _hideLanguageNameChanged(newval, oldval) {
        if (newval !== null && newval !== undefined) {
            this.showlanguagename = newval;
            this._initChange();
        }
    }

    /****************************************************************************************************
     * Called when hideflag changed.
     *
     * @param {*} newval
     * @param {*} oldval
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    _hideFlagChanged(newval, oldval) {
        if (newval !== null && newval !== undefined) {  
            this.showflag = newval;
            this._initChange();
        }   
    }

    /****************************************************************************************************
     * Applies a style class to the sig-control-image in the sub-component sig-control-listview.
     * 
     * @private
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    setImageStyling() {
        if (!this.isdesignmode) {
            if (typeof window.sigApi.defaultStyleManager.setStylingByClassName === 'function') {
                const styleClassToApply = this.stylingManager.getStyleClassByPropName(this.id, 'sig-control-listview');
                const applied = this.stylingManager.setStylingByClassName(this.id, this.$.languageselectiongrid, styleClassToApply);
                if (!applied) {
                    this._log('setImageStyling(): Styling was not applied!');
                }
            }
        }
    }

    /****************************************************************************************************
     * Called by LVD after a property has been changed. Desigmode only.
     * 
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    designerOnControlUpdate() {
        this._applyshadowDomElementsMap(true);
    }

    /****************************************************************************************************
     * An observer method that is called by _init().
     * 
     * @private
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    _initProps() {
        // Default text for language in header
        this.textlanguagename = 'Language';

        // Set Props in ListView
        this.style.setProperty('--theme-sig-control-listview-left', '0px');
        this.style.setProperty('--theme-sig-control-listview-top', '0px');

        // Fix height, if image larger than row height
        const _rowHeight = parseInt(getComputedStyle(this).getPropertyValue('--theme-sig-control-language-selection-listview-row-height'), 10);
        const _imgHeight = parseInt(getComputedStyle(this).getPropertyValue('--theme-sig-control-language-selection-listview-backgroundimage-height'), 10);
        const _borderHeight = !isNaN(parseInt(getComputedStyle(this).getPropertyValue('--theme-sig-control-language-selection-listview-lineseparator-height'), 10)) ? parseInt(getComputedStyle(this).getPropertyValue('--theme-sig-control-language-selection-listview-lineseparator-height'), 10) : 0;
        
        if (!isNaN(_rowHeight) && !isNaN(_imgHeight) && this.showflag) {
            this.style.setProperty('--theme-sig-control-language-selection-listview-row-height', Math.max(_rowHeight, (_imgHeight + _borderHeight)) + 'px');
        }

        this.$.languageselectiongrid.hideheader = this.hideheader;
        this.$.languageselectiongrid.disablemultiselect = true;
        this.$.languageselectiongrid.disablekeys = false;
        this.$.languageselectiongrid.disableautodeactivate = true;

        // Set active row on select
        this.$.languageselectiongrid.setactiverow = true;

        // Surpress setting row on init (due some side effects)
        this.$.languageselectiongrid.ignoresetactiverow = true;
    }

    /****************************************************************************************************
     * Applies the font objects fontObjHeader, fontObjBody and fontObjTitle on the sig-control-listview's header, title and body.
     * 
     * @private
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    _applyFontObjects() {
        let _listView = null;
        let _titleBar = null;
        if (this.$) {
            _listView = this.$.languageselectiongrid;
            _titleBar = this.$.titlebar;
        }
        if (!_listView && !_titleBar) {
            return;
        }

        // apply font for header
        if (this.fontObjHeader) {
            _listView.fontobjectheader = this.fontObjHeader;
        } else {
            _listView.fontobjectheader = "{}";
        }

        // apply font for body
        if (this.fontObjBody) {
            _listView.fontobjectbody = this.fontObjBody;
        } else {
            _listView.fontobjectbody = "{}"; 
        }

        // apply font for title
        if (this.fontObjTitle) {
            _titleBar.fontobjecttitle = this.fontObjTitle;
        }else {
            _titleBar.fontobjecttitle = "{}";
        }
    }

    /****************************************************************************************************
     * An observer method that initiates the component every time the properties change.
     * Desigmode only.
     * 
     * @private
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    _initChange() {
        if (this.isdesignmode) {
            this._init();
        }
    }

    /****************************************************************************************************
     * Initiates the data object containing language data. 
     * 
     * @private
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    _getData() {
        this.data = {
            "cols": [{
                "id": "imageSource",
                "name": this.texts.flag,
                "type": "backgroundimg",
                "default": "",
                "visible": this.showflag,
                "sortable": false,
                "prefix": "../../res/",
                "css": {
                    "background-color": this.flagbackgroundcolor,
                    "width": parseInt(this.flagcolumnwidth, 10) + 'px',
                    "min-width": parseInt(this.flagcolumnwidth, 10) + 'px',
                    "vertical-align": "middle",
                    "head-text-align": this.headertextalignflag 
                },
                "order": this.orderflag
            }, {
                "id": "languageCode",
                "name": "language Code",
                "type": "text",
                "default": "&nbsp;",
                "visible": false,
                "sortable": true,
                "order": -1
            }, {
                "id": "languageID",
                "name": "language ID",
                "type": "text",
                "default": "&nbsp;",
                "visible": false,
                "sortable": false,
                "order": -1
            }, {
                "id": "languageIndex",
                "name": "language Index",
                "type": "text",
                "default": "&nbsp;",
                "visible": false,
                "sortable": false,
                "order": -1
            },
            {
                "id": "name",
                "name": "language Name",
                "type": "text",
                "default": "&nbsp;",
                "visible": false,
                "sortable": false,
                "order": -1
            },
            {
                "id": "version",
                "name": "language Version",
                "type": "text",
                "default": "&nbsp;",
                "visible": false,
                "sortable": false,
                "order": -1
            },
            {
                "id": "description",
                "name": this.texts.language,
                "type": "text",
                "default": "",
                "visible": this.showlanguagename,
                "sortable": true,
                "css": {
                    "font-weight": "normal",
                    "width": parseInt(this.namecolumnwidth, 10) + 'px',
                    "min-width": parseInt(this.namecolumnwidth, 10) + 'px',
                    "text-align": this.textalignlanguagename,
                    "head-text-align": this.headertextalignlanguagename 
                },
                "order": this.orderlanguagename,
                "formatDataCallback": this._formatLangname
            }],
            "data": {
                "nodes": [{
                    "active": true,
                    "description": "Language1",
                    "imageSource": "",
                    "languageCode": "la-la",
                    "languageID": 1033,
                    "languageIndex": 0
                }
                    , {
                    "active": false,
                    "description": "Language2",
                    "imageSource": "",
                    "languageCode": "le-le",
                    "languageID": 1034,
                    "languageIndex": 1
                }, {
                    "active": false,
                    "description": "Language3",
                    "imageSource": "",
                    "languageCode": "lu-lu",
                    "languageID": 1035,
                    "languageIndex": 2
                }
                ]
            },
            "params": {
                scrolltoactiverow: true
            }
        }

        this.data.cols.sort((c1, c2) => {
            return c1.order - c2.order;
        });          
    }

    /****************************************************************************************************
     * Applies the active language data. Called by _switchLang().   
     * 
     * @private
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    async _setConfigData() {
        try {
            await this._processData();
            this.$.languageselectiongrid.configdata = Object.assign({}, this.data);            
        }
        catch(error) {
            this._log('_setConfigData(): failed to process data -> ' + error, 'ERROR');
        }
    }

    /****************************************************************************************************
     * Applies the language configuration. Called by _init().
     * 
     * @private
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    async _setConfig() {
        try {
            // get data from the source and process
            await this._processData();
            this.gridConfig = {
                updateActiveRowCallback: (data, pane) => {
                    this._updateActiveRow(data, pane);
                },
                onRenderReadyCallback: (renderdata, pane) => {
                    if (!this.isdesignmode) this.setImageStyling();
                    else this.$.languageselectiongrid._applyshadowDomElementsMap(true);
                },
                data: this.data,
                name: "languagelistview"
            };
            this.$.languageselectiongrid.config = Object.assign({
                name: 'languageselectiongrid'
            }, this.gridConfig);            
        }
        catch(error) {
            this._log('_setConfig(): failed to process data -> ' + error, 'ERROR');
        }

    }

    /****************************************************************************************************
     * Updates the active row. Called by _setConfig().
     * 
     * @private
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    async _updateActiveRow(data, pane) {
        if (data.languageCode && this.tmApi) {
            try {
                await this.tmApi.setLanguageAsync(data.languageIndex);
            }
            catch(error) {
                this._log('_updateActiveRow(): failed to set language -> ' + error, 'ERROR');
            }
        }
    }

    /****************************************************************************************************
     * Switches the active language setting its data, texts and configuration. Called by connectedCallback().
     * 
     * @private
     * @param {String} msg message of the event.
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    async _switchLang(msg) {
        if (this.activeLang !== msg.languageCode.toLowerCase()) {
            this.activeLang = msg.languageCode.toLowerCase();
            await this._setTexts();
            this._getData();
            await this._setConfigData();
        }
    }

    /****************************************************************************************************
     * An observer method that sets the language text when the property titletext changes. Also called by _init() and _switchLang().
     * 
     * @private
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    async _setTexts() {
        try {
            const texts = await this.tmApi.getTextsAsync(this._getTextsObject());
            if (this.titletext !== '') {
                texts[this.controlTextList].titletext = this.titletext;
            }
            this.texts = texts[this.controlTextList];            
        }
        catch(error) {
            this._log('_setTexts(): failed to get texts -> ' + error, 'ERROR');
        }
    }

    /****************************************************************************************************
     * Called by the Designer Runtime when the project language changes.
     * @param {Object} language The definition object of the current language.
     * @return {Undefined} Undefined 
     * @memberof LasalRuntimeSigControlLanguageSelection
     ****************************************************************************************************/
     designerOnLanguageChanged(language) {
        this._switchLang(language);
    }

    /****************************************************************************************************
     * Called by the Designer Runtime if the ObjectStore has been updated.
     * @async
     * @param {Object} data The payload of the ObjectStore command which triggered the update.
     * @return {Promise} Returns a promise which is resolved when the object store updates has finished. 
     * @memberof LasalRuntimeSigControlLanguageSelection
     ****************************************************************************************************/
    async designerOnObjectStoreUpdate(data) {
        const textListChanged = await this.tmApi.isTextListUpdate(data, this.controlTextList);
        const languageChanged = this.tmApi.isLanguageUpdate(data);
        // We can't call _switchLang() because it will not run if the current language does not change.
        if (languageChanged || textListChanged) this._init();
    }

    /****************************************************************************************************
     * Returns the name of the language according to the known language description.
     * 
     * @private
     * @param {String} _val The language description.
     * @param {Object} _row The language object containing languageIndex, languageID, languageCode, description, imageSource and name.
     * @param {Object} _col The object containing description of the language object.
     * @returns {String} The language name if it is defined or the language description.
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    _formatLangname(_val, _row, _col) {
        if (_row.name) {
            return _row.name;
        } else {
            return _val
        }
    }

    /****************************************************************************************************
     * Returns the object containing the list of the control texts "flag", "language" and "titletext" for the active language.
     * 
     * @private
     * @returns {Object} The control texts object.
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    _getTextsObject() {
        return {
            [this.controlTextList]: {
                flag: 'Flag',
                language: 'Language',
                titletext: 'Language selection'
            }
        }
    }

    /****************************************************************************************************
     * An eventhandler which selects the next language in the list.
     * 
     * @param [row=1] The current row in the selection grid.
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    moveCursorDown(row = 1) {
        this.$.languageselectiongrid.moveCursorDown();
    }

    /****************************************************************************************************
     * An eventhandler which selects the previous language in the list.
     * 
     * @param [row=1] The current row in the selection grid.
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    moveCursorUp(row = 1) {
        this.$.languageselectiongrid.moveCursorUp();
    }

    /****************************************************************************************************
     * An eventhandler which scrolls to the next page in the list.
     * 
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    moveCursorPageDown() {
        this.$.languageselectiongrid.moveCursorPageDown();
    }

    /****************************************************************************************************
     * An eventhandler which scrolls to the previous page in the list.
     * 
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    moveCursorPageUp() {
        this.$.languageselectiongrid.moveCursorPageUp();
    }

    /****************************************************************************************************
     * An eventhandler which scrolls and selects the row with the given index.
     * 
     * @param {Number} [row=1] The index of the row.
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    moveCursorToRow(row = 1) {
        this.$.languageselectiongrid.moveCursorToRow(row);
    }

    /****************************************************************************************************
     * Saves the language configuration data, marks the active language and processes the image source URL.
     * 
     * @private
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    async _processData() {
        try {
            const data = await this.tmApi.getLanguages();
            const activeLang = await this._getActiveLangAsync();
            if (data && data.length > 0) {
                this.data.data.nodes = data.map((lang) => {
                    if (lang.languageCode.toLowerCase() === activeLang.toLowerCase()) lang.active = true;
                    if (lang.imageSource) lang.imageSource = (lang.imageSource).replace(/\\/g, '/');
                    return lang;
                });
            }            
        }
        catch(error) {
            this._log('_processData(): failed to get language -> ' + error, 'ERROR');
        }
    }

    /****************************************************************************************************
     * Calls the overridden method of the parent component and applies the fontObj to a sub-component denoted by propName.
     * 
     * @override 
     * @param {String} propName  The attribute selector where to apply the font.
     * @param {Object} fontObj The font object.
     * @memberof LasalRuntimeSigControlLanguageSelection
    ****************************************************************************************************/
    sigApplyFontObject(propName, fontObj) {
        super.sigApplyFontObject(propName, fontObj);
        // Save the fontObj
        if (propName === 'sig-control-listview thead') {
            this.fontObjHeader = fontObj;
        } else if (propName === 'sig-control-listview tbody') {
            this.fontObjBody = fontObj;
        }
        else if (propName === 'sig-control-titlebar') {
            this.fontObjTitle = fontObj;
        }
        this._applyFontObjects();
    }
}
customElements.define(LasalRuntimeSigControlLanguageSelection.is, LasalRuntimeSigControlLanguageSelection);