import { LasalRuntimeSigElement, SigPolymer } from '../../sigmatek/sig-element/sig-element.js';
import "../sig-control-input/sig-control-input.js"
import "../sig-control-checkbox/sig-control-checkbox.js"
import "../sig-control-button/sig-control-button.js"
import "../sig-control-titlebar/sig-control-titlebar.js"
import "../sig-control-enum/sig-control-enum.js"
import '../sig-control-input/sig-control-input-css.js'
import '../sig-control-checkbox/sig-control-checkbox-css.js'
import '../sig-control-button/sig-control-button-css.js'
import '../sig-control-titlebar/sig-control-titlebar-css.js'
import '../sig-control-enum/sig-control-enum-css.js'
import '../sig-control-scrollbar/sig-control-scrollbar-css.js'

const _emptyItem = {
    idxcnt: '',
    id: '',
    datetime: '',
    data: '',
    detail: '',
    alertstate: '',
    alarmnr: '',
    param1: ''
};




/**
 * @class 
 * @classdesc Implements and exports sig-logging component.
 * @version 01.02.004
 * @extends LasalRuntimeSigElement
 * 
 * @property {Object}  sigApiEventJournal      Saved reference to the Event Journal API.
 * @property {Object}  tmApi                   Saved reference to the Text Manager API.
 * @property {Object}  evtMedApi               Saved reference to the Event Mediator API. 
 * @property {Object}  utils                   Saved reference to the Utils API. 
 * @property {Boolean} multisort               Determines whether the listview can be multisorted.
 * @property {Number}  fakescrollcontentheight Helper variable for listview (and scrollbar) that determines the scroll content height.
 * @property {Number}  fakescrollheighttop     Helper variable for listview (and scrollbar) that determines the already scrolled content height.
 * @property {Number}  fakescrollheightbot     Helper variable for listview (and scrollbar) that determines the height of the content to which it was not yet scrolled to.
 * @property {Number}  recordcount             Determines the current row in listview. Starts from 1.
 * @property {Number}  page                    Determines the current page of listview.
 * @property {Number}  offset                  The number of rows that is over the current. 
 * @property {Number}  itemscount              The maximum visible amount of rows.
 * @property {Number}  linemodeFactor          Helper variable that determines the size of the space between rows.
 * @property {Boolean} isscrolling             Helper variable that determines whether the listview is being scrolled or not.
 * @property {Array}   selectedItems           An array of selected items from the listview.
 * @property {Array}   filters                 An array of filters applied in the listview.
 * @property {Array}   filterkey               The filter key.
 * @property {String}  controlTextList         Name of the property holding the component's list of default texts.
 * @property {Array}   isloaded                Determines whether the sig-logging is loaded.
 */
export class LasalRuntimeSigLogging extends LasalRuntimeSigElement {

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

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

    /**
     * Returns the HTML literal of the component.
     * @readonly
     * @static
     * @returns {HTMLLIElement} The template literal of the component 
     * @memberof LasalRuntimeSigLogging
     */
    static get template() {
        return SigPolymer.html`
                <style include="sig-element-css sig-control-titlebar-css sig-control-scrollbar-css sig-control-button-css sig-control-input-css sig-control-checkbox-css sig-control-enum-css">
                    :host {           
                            /* Filter */
                            --theme-sig-logging-filter-height: 26px;
                            --theme-sig-logging-input-placeholder-color: rgba(255, 255, 255, 0.5);
                            --theme-sig-logging-input-background-color: rgba(128, 128, 128, 1);
                        }        
  
        
                    :host sig-control-button {
                            @apply --symbol;
                            box-sizing: border-box;
                            position: relative;
                            top: 0px;
                            left: 0px;
                            float: left;
                        }
       
                    #paginator sig-control-button {
                        box-sizing: content-box;        /* fix for paginator button on MacOS Safari */      
                    }

                    #paginator sig-control-button,
                    #configfooter sig-control-button,
                    #filterinputsfooter sig-control-button,
                    #detailfooter sig-control-button {
                            /*font-size: var(--theme-sig-logging-footer-symbol-fontsize, 20px);*/
                            width: var(--theme-sig-element-width, 24px);
                            height: var(--theme-sig-element-height, 24px);
                            max-height:var(--theme-sig-logging-footer-height, 26px);
                            /* line-height: var(--theme-sig-element-height, 24px);*/
                            margin: 1px 0 1px var(--theme-sig-logging-footer-button-margin, 5px);
                        }
        
                :host sig-control-button#clearfilterbutton {
                           /* font-size: var(--theme-sig-logging-filter-symbol-fontsize, 24px);
                            width: var(--theme-sig-logging-filter-symbol-width, 24px);
                            height: var(--theme-sig-logging-filter-symbol-height, 26px);*/

                            width: var(--theme-sig-element-width, 24px);
                            height: var(--theme-sig-element-height, 26px);
        
                        }
        
                :host([filterset]) sig-control-button#clearfilterbutton {
                            text-decoration: line-through;
                        }

                :host sig-control-input {
                            /* Input Field */
                            --theme-sig-control-input-placeholder-color: var(--theme-sig-logging-input-placeholder-color, rgba(255, 255, 255, 0.5));
                            text-decoration: inherit;
                        
                        }        
        
                :host sig-control-enum {
                            --theme-sig-element-top: initial;
                            --theme-sig-element-left: initial;
                            --theme-sig-element-height: var(--theme-sig-logging-row-height, 26px);
                            --theme-sig-element-width: initial;
        
                            /* enum (Select) */
                        }
        
                :host sig-control-titlebar {
                           /* height: var(--theme-sig-logging-titlebar-height, 26px);*/
                            height: var(--theme-sig-element-height, 26px);
                            width:100%;
                            top: unset;
                            left: unset;
                            position: unset;
                            display: none;
                        }
        
                :host(:not([hidetitle])) sig-control-titlebar {
                                display: block;
                        }


                :host * {
                            /* Reset margin and paddings for child elements and turn of text selection */
                            @apply --notextselect;
                            margin: 0;
                            padding: 0;
                            overflow: hidden;
                        }
        
                :host {
                            /* Basic Styling of the component */
                            color: var(--theme-sig-logging-color, rgba(0, 0, 0, 1));
                            background-color: var(--theme-sig-logging-background-color, rgba(128, 128, 128, 1));
        
                            /* Basic box model settings */
                            position: var(--theme-sig-logging-position, absolute);
                            top: var(--theme-sig-logging-top, var(--theme-sig-element-top, auto));
                            left: var(--theme-sig-logging-left, var(--theme-sig-element-left, auto));
                            width: var(--theme-sig-logging-width, var(--theme-sig-element-width, auto));
                            height: var(--theme-sig-logging-height, var(--theme-sig-element-height, '150px'));
        
                            border-width: var(--theme-sig-logging-border-width, 0px);
                            border-color: var(--theme-sig-logging-border-color, rgba(255, 255, 255, 0));
                            border-style: var(--theme-sig-logging-border-style, none);
                            border-radius: var(--theme-sig-logging-border-radius, 0px);
        
                            box-sizing: border-box;
        
                            min-width: 435px;
                            min-height: 150px;
        
                            display: flex;
                            flex-direction: column;
                        }
        
                :host([hidden]) {
                            display: none;
                        }
        
                .clearfix:after {
                            /* Import the global clearfix css mixin */
                            @apply --clearfix
                        }
        
                .sig-logging {
                            height: inherit;
                            overflow-y: hidden;
                            height: inherit;
                            padding: 0px;
                            box-sizing: border-box;
                        }
        
                .row {
                            overflow: hidden;
                            height: var(--theme-sig-logging-row-height, 26px);
                            line-height: var(--theme-sig-logging-row-height, 26px);
                            text-align: var(--theme-sig-logging-row-text-align, left);
        
                            /* width: max-content; */
                            width: 100%;
        
                            clear: both;
                            float: none;
        
                            background: var(--theme-sig-logging-row-background-color, rgba(215, 215, 215, 1));
                            color: var(--theme-sig-logging-row-color, rgba(8, 8, 8, 1));
        
                            border-bottom-width: var(--theme-sig-logging-row-border-width, 1px);
                            border-bottom-color: var(--theme-sig-logging-row-border-color, rgba(255, 255, 255, 1));
                            border-bottom-style: var(--theme-sig-logging-row-border-style, solid);
        
                            cursor: default;
        
                            display: flex;
                            display: -webkit-flex;
                            flex-direction: row;
                            -webkit-flex-direction: row;
                            flex-grow: 0;
                            -webkit-flex-grow: 0;
                            flex-wrap: wrap;
                            -webkit-flex-wrap: wrap;
        
                            box-sizing: border-box;
                        }
        
                .row.singleline {
                            clear: none;
                            float: left;
                        }
        
                .column {
                            /* border-left-width: var(--theme-sig-logging-column-border-width, 1px);
                            border-left-color: var(--theme-sig-logging-column-border-color, rgba(255, 255, 255, 1));
                            border-left-style: var(--theme-sig-logging-column-border-style, solid); */
                            border-right-width: var(--theme-sig-logging-column-border-width, 1px);
                            border-right-color: var(--theme-sig-logging-column-border-color, rgba(255, 255, 255, 1));
                            border-right-style: var(--theme-sig-logging-column-border-style, solid);
                            text-indent: 3px;
        
                            flex-grow: 1;
                            -webkit-flex-grow: 1;
        
                            overflow: hidden;
                            float: left;
                            clear: none;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
        
                #grid1 .column {
                            /* background: var(--theme-sig-logging-column-background-color, transparent); */
                            background: transparent;
                        }
        
                .row[alertstate="1"],
                .row[alertstate="1"] .column {
                            background: var(--theme-sig-logging-row-background-color-alarm-hi, rgba(215, 215, 215, 1)) !important;
                            color: var(--theme-sig-logging-row-color-alarm-hi, rgba(105, 0, 0, 1)) !important;
                        }
        
                .row[alertstate="0"],
                .row[alertstate="0"] .column {
                            background: var(--theme-sig-logging-row-background-color-alarm-lo, rgba(160, 160, 160, 1)) !important;
                            color: var(--theme-sig-logging-row-color-alarm-lo, rgba(95, 95, 100, 1)) !important;
                        }
        
                :host([itemfilter='alarm']) .row[alertstate="0"],
                :host([itemfilter='alarm']) .row[alertstate="1"] {
                            cursor: pointer;
                        }
        
                .row[alertstate="1001"],
                .row[alertstate="1001"] .column {
                            /* background: var(--theme-sig-logging-row-background-color-alarm-hi-quit, rgba(255, 50, 50, var(--theme-sig-logging-row-background-color-alarm-opacity))) !important; */
                            background: var(--theme-sig-logging-row-background-color-alarm-quit, rgba(64, 66, 71, 1)) !important;
                            color: var(--theme-sig-logging-row-color-alarm-quit, rgba(160, 160, 160, 1)) !important;
                        }
        
                .row[alertstate="1000"],
                .row[alertstate="1000"] .column {
                            /* background: var(--theme-sig-logging-row-background-color-alarm-lo-quit, rgba(255, 250, 100, var(--theme-sig-logging-row-background-color-alarm-opacity))) !important; */
                            background: var(--theme-sig-logging-row-background-color-alarm-quit, rgba(64, 66, 71, 1)) !important;
                            color: var(--theme-sig-logging-row-color-alarm-quit,  rgba(160, 160, 160, 1)) !important;
                        }
        
                .row[alertstate="255"],
                .row[alertstate="255"] .column {
                            /* background: var(--theme-sig-logging-row-background-color-alarm-quit, rgb(100, 255, 100)) !important; */
                            background: var(--theme-sig-logging-row-background-color-alarm-quit, rgba(64, 66, 71, 1)) !important;
                            color: var(--theme-sig-logging-row-color-alarm-quit,  rgba(160, 160, 160, 1)) !important;
                        }
        
                .row[alertstate="1255"],
                .row[alertstate="1255"] .column {
                            /* background: var(--theme-sig-logging-row-background-color-alarm-quit, rgba(100, 255, 100, var(--theme-sig-logging-row-background-color-alarm-opacity))) !important; */
                            background: var(--theme-sig-logging-row-background-color-alarm-quit, rgba(0, 150, 0, 1)) !important;
                            color: var(--theme-sig-logging-row-color-alarm-quit,  rgba(160, 160, 160, 1)) !important;
                        }
        
                        .row[isselected='selected'],
                .row[isselected='selected'] .column {
                                background: var(--theme-sig-logging-row-selected-background-color, rgba(215, 215, 215, 1)) !important;
                            color: var(--theme-sig-logging-row-selected-color, rgba(42, 42, 42, 1)) !important;
                        }
        
                .columnfilterinput {
                            width: auto;
                            margin: 5px !important;
                            display: none;
                        }
        
                .columnfilterinput.dateandtime {
                                display: inline-block;
                        }
        
                /* #_filter_DateTime {
                                display: flex !important;
                            align-items: center;
                            flex-direction: column;
                        } */
        
                .columnfilterinput .datetimeblock {
                                float: left;
                        }
        
                .columnfilterinput span {
                            float: left;
                            margin: 5px !important;
                            /* border-width: var(--theme-sig-logging-overlay-element-border-width, 1px);
                            border-color: var(--theme-sig-logging-overlay-element-border-color, rgba(204, 204, 204, 1));
                            border-style: var(--theme-sig-logging-overlay-element-border-style, solid); */
                        }
        
                .columnfilterinput span.sidelabel {
                            /* line-height: calc(var(--theme-sig-logging-symbol-height, 24px) * 2); */
                            float: left;
                            border: none;
                        }
        
                .overlayed label {
                            display: block;
                            text-align: center;
                            background: var(--theme-sig-logging-overlay-label-background-color, rgba(64, 66, 72, 1));
                            color: var(--theme-sig-logging-overlay-label-color, rgba(255, 255, 255, 1));
        
                            height: var(--theme-sig-logging-row-height, 26px);
                            line-height: var(--theme-sig-logging-row-height, 26px);
                            font-family: inherit;
                            text-align: center;
                
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
        
                .filter_label_value {
                            height: inherit;
        
                            line-height: calc(var(--theme-sig-logging-filter-height-height, 26px) / 2);
                            font-size: calc(var(--theme-sig-logging-filter-height-height, 26px) / 3);
        
                            text-indent: 0px;
                            padding: 0 5px !important;
                            height: 100%;
                        }
        
                #filterinputsheader {
                            text-align: center;
                        }
        
                #filterinputsfooter {
                            height: 100%;
                            text-align: center;
                            padding: 5px 0 0 0;
                        }
        
                #detailwrapper,
                #filterwrapper {
                            width: calc(100% + 2px);
                            height: 100%;
                            position: absolute;
                            top: 0px;
                            left: 0px;
                            display: none;
                            padding: 0px;
                            overflow: auto;
                            z-index: 100;
                            flex-direction: column;
                        }
        
                #filterinputs,
                #detail {
                            position: relative;
                            top: 0;
                            width: auto;
                            height: 100%;
        
                            overflow-x: hidden;
                            overflow-y: auto;
                            padding: 0px;
        
                            border-width: var(--theme-sig-logging-overlay-border-width, 1px);
                            border-color: var(--theme-sig-logging-overlay-border-color, rgba(204, 204, 204, 1));
                            border-style: var(--theme-sig-logging-overlay-border-style, solid);
        
                            box-sizing: border-box;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                        }
        
                #detailinner {
                            text-indent: 10px;
                            width: 100%;
                            clear: both;
                            padding: 10px 0;
                        }
        
                #filterinputs .actionbutton,
                #detailfooter .actionbutton,
                #configfooter .actionbutton,
                #paginator #quitAllAlarms {
                            overflow: hidden;
                            font-family: inherit;
                            margin-right: var(--theme-sig-logging-footer-button-margin, 5px);
                            --theme-sig-control-button-padding: 10px;
                            clear: unset;
                            cursor: pointer;

                            position: relative;
                            left: 0px;
                            top: 0px;
                            width: var(--theme-sig-element-width, auto);


                        }
        
                .column.decnumber,
                .column.hexnumber {
                            width: var(--theme-sig-logging-column-numeric-width, 60px);
                            max-width: var(--theme-sig-logging-column-numeric-width, 60px);
                        }
        
                .column.dateandtime {
                            width: var(--theme-sig-logging-column-datetime-width, 160px);
                            max-width: var(--theme-sig-logging-column-datetime-width, 160px);
                        }
        
                .column.string {
                            width: var(--theme-sig-logging-column-string-width, 60px);
                        }
        
                .column.icon {
                            width: var(--theme-sig-logging-column-icon-width, 24px);
                            max-width: var(--theme-sig-logging-column-icon-width, 24px);
                            text-indent: 2px;
                            text-align: var(--theme-sig-logging-row-text-align, left);
                            cursor: pointer;
                        }
        
                .column[iconclass="alerticon"]:before {
                            @apply --symbol;
                            content: "\\f05a";
                            color: #00f;
                        }
        
                .column[iconclass="alerticon"][alertstate="0"]:before {
                            @apply --symbolRegular;
                            content: "\\f0f3";
                            color: rgba(0, 0, 0, 1);
                        }
        
                .column[iconclass="alerticon"][alertstate="1"]:before {
                            @apply --symbol;
                            content: "\\f0f3";
                            color: rgb(192, 0, 0);
                        }
        
                .column[iconclass="alerticon"][alertstate="1000"]:before {
                            @apply --symbolRegular;
                            content: "\\f1f6";
                            color: rgba(0, 0, 0, 0.6);
                        }
        
                .column[iconclass="alerticon"][alertstate="1001"]:before {
                            @apply --symbol;
                            content: "\\f1f6";
                            color: rgba(233, 2, 2, 0.6);
                        }
        
                .column[iconclass="alerticon"][alertstate="11"]:before {
                            @apply --symbol;
                            content: "\\f1f6";
                        }
        
                .column[iconclass="alerticon"][alertstate="12"]:before {
                            @apply --symbolRegular;
                            content: "\\f1f6 ";
                        }
        
                #gridwrapper,
                #outergridwrapper {
                            height: inherit;
        
                            display: -webkit-box;
                            /* OLD - iOS 6-, Safari 3.1-6 */
                            display: -moz-box;
                            /* OLD - Firefox 19- (buggy but mostly works) */
                            display: -ms-flexbox;
                            /* TWEENER - IE 10 */
                            display: -webkit-flex;
                            /* NEW - Chrome */
                            display: flex;
                            flex-direction: column;
                            background-color: var(--theme-sig-logging-background-color, rgba(128, 128, 128, 1));
                            width: 100%;
                        }
        
                #grid1 {
                            overflow-y: hidden;
                            width: inherit;
                            clear: both;
                            float: none;
                            flex: 1;
                            background-image: var(--theme-sig-logging-background-image, none);
                            background-size: var(--theme-sig-logging-background-size, contain);
                            background-repeat: var(--theme-sig-logging-background-repeat, no-repeat);
                            background-position-x: var(--theme-sig-logging-background-position-x, center);
                            background-position-y: var(--theme-sig-logging-background-position-y, center);
                        }
        
                :host(:not([hidescroller])) #grid1 {
                            overflow-y: scroll;
                        }

                #gridheader,
                #configheader,
                #detailheader,
                #filterinputsheader {
                            background: var(--theme-sig-logging-header-background-color, rgba(64, 66, 71, 1));
        
                            border-bottom-width: var(--theme-sig-logging-row-border-width, 1px);
                            border-bottom-color: var(--theme-sig-logging-row-border-color, rgba(255, 255, 255, 1));
                            border-bottom-style: var(--theme-sig-logging-row-border-style, solid);
        
                            height: auto;
                            width: 100%;
        
                            overflow: hidden;
                            clear: both;
                            float: none;
                        }
        
                #gridheader .row {
                            height: var(--theme-sig-logging-header-height, 26px);
                            line-height: var(--theme-sig-logging-header-height, 26px);
                            text-align: var(--theme-sig-logging-header-text-align, left);
        
                            background: var(--theme-sig-logging-header-background-color, rgba(64, 66, 71, 1));
                            color: var(--theme-sig-logging-header-color, rgba(228, 228, 228, 1));
        
                            border: none;
        
                            clear: both;
                            box-sizing: border-box;
                        }
        
                #gridfilter {
                            height: auto;
                            width: 100%;
                            background: var(--theme-sig-logging-header-background-color, rgba(64, 66, 71, 1));
        
                            border-bottom-width: var(--theme-sig-logging-row-border-width, 1px);
                            border-bottom-color: var(--theme-sig-logging-row-border-color, rgba(255, 255, 255, 1));
                            border-bottom-style: var(--theme-sig-logging-row-border-style, solid);
        
                            overflow: hidden;
                            clear: both;
                            float: none;
                        }
        
                #gridfilter .row {
                            color: var(--theme-sig-logging-input-color, rgba(255, 255, 255, 1));
                            background: var(--theme-sig-logging-input-background-color, rgba(128, 128, 128, 1));
        
                            height: var(--theme-sig-logging-filter-height, 26px);
                            line-height: var(--theme-sig-logging-filter-height, 26px);
                            text-align: var(--theme-sig-logging-filter-text-align, left);
        
                            border: none;
                        }
        
                #gridfilter .row .column.filtericon {
                            display: flex;
                            background: transparent;
        
                            width: var(--theme-sig-logging-filter-symbol-width, 24px);
                            max-width: var(--theme-sig-logging-filter-symbol-width, 24px);
                            text-indent: 0px;
                            border: none;
                        }
        
                #gridfilter .row .column {
                            /* color: var(--theme-sig-logging-input-color, rgba(255, 255, 255, 1));
                            background: var(--theme-sig-logging-input-background-color, rgba(128, 128, 128, 1)); */
                            text-decoration: inherit;
                            cursor: pointer;
                            height: inherit;
                        }

                #gridheader .action2,
                #gridfilter .action2 {
                            display: none;
                        }
        
                #gridfilter .row .column div,
                #gridfilter .row .column div sig-control-input {
                            text-decoration: inherit;
                        }
                
                #gridheader .column.sortable {
                            text-indent: 3px;
                            height: inherit;
                            cursor: pointer;
                        }
        
                #gridheader .column.sortable:before {
                            @apply --symbol;
                            content: "\\f0dc";
                            color: var(--theme-sig-logging-header-symbol-color, rgba(153, 153, 153, 1));
                            font-size: var(--theme-sig-logging-header-symbol-fontsize, 20px);
        
                            margin-left: -3px;
                            padding-right: 3px;
                            vertical-align: middle;
                        }
        
                #gridheader .column.sortable[data-sorttype="desc"]:before {
                            content: "\\f0dd";
                            color: var(--theme-sig-logging-header-symbol-active-color, rgba(51, 51, 51, 1));
                        }
        
                #gridheader .column.sortable[data-sorttype="asc"]:before {
                            content: "\\f0de";
                            color: var(--theme-sig-logging-header-symbol-active-color, rgba(51, 51, 51, 1));
                        }
        
                #filter_label_filter_DateTime,
                #filter_label_filter_DateTime1,
                #filter_label_filter_DateTime2 {
                            color: var(--theme-sig-logging-input-placeholder-color, rgba(255, 255, 255, 0.5));
                        }
        
                #gridfilter #clearfilterbutton {
                            margin: auto;
                            /* float: right; */
                        }
        
                .closebutton {
                            position: absolute;
                            top: 2px;
                            right: 2px;
                            /* width: var(--theme-sig-logging-header-symbol-width, 24px);
                            height: var(--theme-sig-logging-header-symbol-height, 24px); */
                            /* background: var(--theme-sig-logging-overlay-button-background-color, rgba(42, 42, 42, 1)); */
                            background: transparent;
                            border: none;
                            cursor: pointer;
                        }
        
                .closebutton::before {
                            @apply --symbol;
                            content: "\\f057";
                            font-size: var(--theme-sig-logging-header-symbol-fontsize, 20px);
                            /* line-height: var(--theme-sig-logging-header-symbol-height, 20px); */
                            color: var(--theme-sig-logging-overlay-button-color, rgba(255, 255, 255, 1));
                        }
        
                #paginator,
                #configfooter,
                #detailfooter,
                #filterinputsfooter {
                            height: var(--theme-sig-logging-footer-height, 26px);
                            overflow:hidden; /* If buttons are too big, overflowing content will be hidden */
                            min-height: var(--theme-sig-logging-footer-height, 26px);
                            /* line-height: var(--theme-sig-logging-footer-height, 26px); */
        
                            background: var(--theme-sig-logging-footer-background-color, var(--theme-sig-logging-header-background-color, rgba(64, 66, 71, 1)));
                            color: var(--theme-sig-logging-footer-color, var(--theme-sig-logging-header-color, rgba(228, 228, 228, 1)));
        
                            border-width: var(--theme-sig-logging-footer-border-width, 0px);
                            border-color: var(--theme-sig-logging-footer-border-color, rgba(255, 255, 255, 0));
                            border-style: var(--theme-sig-logging-footer-border-style, none);
                            border-radius: var(--theme-sig-logging-footer-border-radius, 0px);
        
                            padding: 0px;
        
                            overflow: hidden;
                            clear: both;
                            float: none;
                            box-sizing: border-box; 
                        }
        
                #paginator {
                            min-width: 380px;
                            width: 100%;
                            display: flex;
                        }
        
                #paginator #paginatorbuttons {
                            display: flex;
                            align-items: center;
                        }
        
                #paginator #configbuttons {
                            position: absolute;
                            max-height:var(--theme-sig-logging-footer-height, 26px);
                            right: calc(var(--theme-sig-logging-footer-border-width, 0px) + var(--theme-sig-logging-footer-button-margin, 5px));
                        }
        
                #paginator #navigationbuttons {
                            position: absolute;
                            max-height: var(--theme-sig-logging-footer-height, 26px);
                            left: var(--theme-sig-logging-footer-border-width, 0px);
                        }
        
                #paginator .info {
                            /* width: var(--theme-sig-logging-footer-width, 26px); */
                            min-width: 160px;
                            line-height: var(--theme-sig-logging-footer-height, 26px);             /* fix for text vertical alignment */ 
                            
                            text-align: var(--theme-sig-logging-footer-text-align, center);
                            padding: 0 var(--theme-sig-logging-footer-button-margin, 5px);
        
                            overflow: hidden;
                            float: left;
                            clear: unset;
                        /*    position: -webkit-sticky;
                            position: sticky;
                            top: 50%;
                            transform: translateY(-50%);*/
                        }

                #paginator #quitAlarm,
                #paginator #quitAllAlarms,
                #paginator #showConfig {
                            float: right;
                        }
        
                #paginator #quitAlarm {
                            color: var(--theme-sig-logging-feedback-quitalarm-color, rgba(160, 160, 160, 1));
                        }
        
                #paginator #quitAllAlarms {
                            font-family: inherit;
                            width: var(--theme-sig-element-width, auto);
                            color: var(--theme-sig-logging-feedback-quitalarmall-color, rgba(160, 160, 160, 1));
                        }
        
                :host(:not([itemfilter="alarm"])) #paginator #quitAlarm,
                :host(:not([itemfilter="alarm"])) #paginator #quitAllAlarms {
                            display: none;
                        }
        
                div.scrollfaketop,
                div.scrollfakebot {
                            height: 0px;
                            clear: both;
                        }
        
                #fakescrolltop.row,
                #fakescrollbot.row {
                            height: 0px;
                            border: none;
                        }
        
                :host(:not([isdesignmode])) #grid1.wait {
                            display: block;
                            background: transparent url(./loader.gif) no-repeat center center;
                        }
        
                sig-control-input {
                        /*    height: var(--theme-sig-logging-filter-height, 26px);*/
                            height: var(--theme-sig-element-height, 26px);
                            line-height: var(--theme-sig-logging-filter-height, 26px);
                            width: 100%;
                            position: relative;
                            top: 0px;
                            left: 0px;
                            padding: 0px 0px;
                        }
        
                .overlayed sig-control-input {
                            width: var(--theme-sig-logging-overlay-input-width, 120px);
                            margin: 2px !important;
        
                            border-width: var(--theme-sig-logging-overlay-element-border-color, 1px);
                            border-color: var(--theme-sig-logging-overlay-element-border-color, rgba(204, 204, 204, 1));
                            border-style: var(--theme-sig-logging-overlay-element-border-style, solid);
                            /* border-radius: var(--theme-sig-logging-overlay-element-border-radius, 0px); */
                            text-align: center;
                        }
        
                #configmenue {
                            /* display: none; */
                            height: 100%;
                            width: 100%;
                            top: 0px;
                            left: 0px;
                            position: absolute;
                            justify-content: space-around;
                            align-items: center;
        
                            border-width: var(--theme-sig-logging-overlay-border-width, 1px);
                            border-color: var(--theme-sig-logging-overlay-border-color, rgba(204, 204, 204, 1));
                            border-style: var(--theme-sig-logging-overlay-border-style, solid);
        
                            z-index: 10000;
                            /* box-sizing: content-box; */
                            box-sizing: border-box;
        
                            background: transparent;
                        }
        
                :host(:not([hidetitle])) #configmenue,
                :host(:not([hidetitle])) #filterwrapper,
                :host(:not([hidetitle])) #detailwrapper {
                            left: -1.0px;
                        }
        
                .w25 {
                                width: 25%;
                        }
        
                .w40 {
                                width: 40%;
                        }
        
                .w50 {
                                width: 50%;
                        }
        
                .w60 {
                                width: 60%;
                        }
        
                .w75 {
                                width: 75%;
                        }
        
                .w100 {
                                width: 100%;
                        }
        
        
                #configmenue #configheader,
                #configmenue #configfooter {
                            /* height: var(--theme-sig-logging-symbol-height, 24px); */
                            margin: 0;
                            clear: both;
                        }
        
                #configmenue #configheader,
                #filterinputsheader,
                #detailheader {
                            height: var(--theme-sig-logging-header-height, 26px);
                            line-height: var(--theme-sig-logging-header-height, 26px);
        
                            background: var(--theme-sig-logging-overlay-header-background-color, var(--theme-sig-logging-header-background-color, rgba(64, 66, 71, 1)));
                            color: var(--theme-sig-logging-overlay-header-color, var(--theme-sig-logging-header-color, rgba(228, 228, 228, 1)));
        
                            text-decoration: inherit;
                        }
        
                #configmenue #configfooter,
                #filterinputsfooter,
                #detailfooter {
                            /* padding: 5px; */
                            height: var(--theme-sig-logging-footer-height, 26px);
                            line-height: var(--theme-sig-logging-filter-height, 26px);
                            background: var(--theme-sig-logging-overlay-footer-background-color, var(--theme-sig-logging-overlay-header-background-color, rgba(64, 66, 71, 1)));
                            color: var(--theme-sig-logging-overlay-footer-color, var(--theme-sig-logging-overlay-header-color, rgba(255, 255, 255, 1)));
                        }
        
                #configbuttons,
                #configfooterclose,
                #detailfooterclose,
                #filterinputsfooterclose {
                            height: inherit;
                            vertical-align: middle;
                            display: table; /* Fix for webkit to calculate the button width correctly when using width:auto; */
                           /* flex-direction: row-reverse;*/
                            align-items: center;
                            float: right;
                        }
        
                #configmenue #columnconfig,
                #configmenue #filterconfig,
                #filterinputscontent,
                #detailinner {
                                height: calc(100% - (var(--theme-sig-logging-header-height, 26px) + var(--theme-sig-logging-footer-height, 26px)));
                            top: 0px;
                            left: 0px;
                            overflow-y: auto;
                        }
        
                #configmenue,
                #filterinputscontent,
                #detailinner {
                            /* width: 100%; */
                            width: calc(100% + 2.0px);
                        }
        
                #configmenue #columnconfig {
                            border-right-width: var(--theme-sig-logging-column-border-width, 1px);
                            border-right-color: var(--theme-sig-logging-column-border-color, rgba(255, 255, 255, 1));
                            border-right-style: var(--theme-sig-logging-column-border-style, solid);
                        }
        
                #configmenue #columnconfig,
                #configmenue #filterconfig {
                            float: left;
        
                        }
        
                #configmenue .content {
                            border-color: var(--theme-sig-logging-overlay-element-border-color, rgba(204, 204, 204, 1));
                            border-width: var(--theme-sig-logging-overlay-element-border-width, 1px);
                            border-style: var(--theme-sig-logging-overlay-element-border-style, solid);
                            border-radius: var(--theme-sig-logging-overlay-element-border-radius, 0px);
                            text-decoration: inherit;
                        }
        
                #configmenue .configcheckbox {
                            position: relative;
                            margin: 0px;
                            padding: 0px;
                            top: 0px;
                            left: 0px;
                            float: left; 

                            height: var(--theme-sig-logging-row-height, 26px);
                        }
        
                #configmenue #columnconfig,
                /* #configmenue .configcheckbox, */
                #configmenue #filterconfig,
                #filterinputscontent,
                #detailinner {
                            background: var(--theme-sig-logging-overlay-background-color, var(--theme-sig-logging-background-color, rgba(128, 128, 128, 1)));
                            box-sizing: border-box;
                            text-decoration: inherit;
                        }
        
                #configmenue label {
                            float: left;
                            width: 50%;
                            text-decoration: inherit;
                        }
        
                #configmenue .configrow {
                            margin: 10px;
                            text-decoration: inherit;
                        }
        
                #configmenue #columnconfig label {
                            width: 50%;
                        }
        
                #configmenue #columnconfig .configcheckbox {
                            width: 50%;
                        }
        
                #configmenue #filterconfig label {
                            width: 50%;
                        }
        
                #configmenue #filterconfig .configcheckbox {
                            width: 25%;
                        }
        
                #configmenue.hidden {
                            display: none;
                        }
        
                #configmenue .content {
                                margin: 10px;
                        }
        
                #configmenue #filterconfig .titleheader,
                #configmenue #columnconfig .titleheader {
                            margin: 5px 0;
                            float: none;
                        }
        
                #configmenue #filterconfig .titleheader .configrow,
                #configmenue #columnconfig .titleheader .configrow {
                            height: var(--theme-sig-logging-row-height, 26px);
                            line-height: var(--theme-sig-logging-row-height, 26px);
                            background: var(--theme-sig-logging-overlay-label-background-color, rgba(64, 66, 72, 1));
                            color: var(--theme-sig-logging-overlay-label-color, rgba(255, 255, 255, 1));
                            margin: 0px 10px;
                        }
        
        
                #configmenue .configrow div {
                            float: left;
                            text-decoration: inherit;
                        }
        
                #configmenue .actionbutton {
                            overflow: hidden;
                            font-family: inherit;

                        /*    float: right; */
                            clear: unset;
                            cursor: pointer;
        
                            position: relative;
                            left: 0px;
                            top: 0px;
                        }
        
                .titleheader,
                .footer {
                            text-align: center;
                            float: left;
                            text-decoration: inherit;
                        }
                .dateinput {
                            float: left;
                        }
        
                dom-if {
                            height: 0px !important;
                        }
        
                #configmenue #columnconfig sig-control-enum {
                            /* padding: 10px 5px; */
                            text-align: center;
                        }
        
                :host sig-control-enum .sig-control-enum-element {
                            padding: 10px 0px;
                        }
            </style>

            <!-- Title Begin-->
            <sig-control-titlebar id="titlebar" value="[[texts.caption]]" shadowactive=[[shadowactive]] applybordereffect="[[applybordereffect]]"></sig-control-titlebar>
            <!-- Title end-->
    
            <div id="outergridwrapper">
                <div id="gridwrapper">
                    <!-- Header (Sort) Begin-->
                    <template is="dom-if" if="[[!hideheader]]">
                            <div id="gridheader" class="sig-header" sortable="[[sortable]]">
                                <div class$="row gridheader [[alarmmode]]">
                                    <template is="dom-repeat" items="[[columns]]" as="column">
                                        <div class$="column [[column.type]] [[column.key]] [[_setSortable(column.sortable)]]"
                                            data-sorttype$="[[column.sorttype]]" hidden$=[[!column.visible]] on-down="_setSort">
                                        [[_setSortLabel(column.sortable, column.title)]]
                                        </div>
                                    </template>
                                </div>
                            </div>
                    </template>
                    <!-- Header (Sort) End -->

                    <!-- Header Filter row Begin -->
                    <template is="dom-if" if="[[!hidefilter]]">
                        <div id="gridfilter">
                            <div class$="row gridfilter [[alarmmode]]">
                                <template is="dom-repeat" items="[[columns]]" as="column">
                                    <!-- add a filter column -->
                                    <div class$="column [[column.type]] [[column.key]]" hidden$=[[!column.visible]]>
                                        <template is="dom-if" if="[[!_isDateFilter(column)]]">
                                            <div id$="[[column.filtername]]">

                                                <template is="dom-if" if="[[column.filtername]]">
                                                    <sig-control-input type$="[[column.keyboardtype]]"
                                                        limit-low="[[column.keyboardlimitlow]]"
                                                        limit-high="[[column.keyboardlimithigh]]" maxlength="0"
                                                        name$="[[column.filtername]]" placeholder="[[column.title]]"
                                                        titletext="[[column.title]]" value={{column.filtervalue}}
                                                        on-value-changed="_applyFilterInputs">
                                                    </sig-control-input>
                                                </template>

                                            </div>
                                        </template>
                                        <template is="dom-if" if="[[_isDateFilter(column)]]">
                                            <div id$="filter_label[[column.filtername]]" on-down="_openFilterInputs">[[column.title]]</div>
                                            <div id$="filter_label_value[[column.filtername]]" class="filter_label_value" on-down="_openFilterInputs"></div>
                                        </template>
                                    </div>
                                </template>

                                <div class="column filtericon">
                                    <sig-control-button id="clearfilterbutton" sigbtntext="&#xf0b0" on-down="clearAllFilter" class="filterbutton"></sig-control-button>
                                </div>
                            </div>
                        </div>
                    </template>
                    <!-- Header Filter row End -->

                    <!-- Datagrid rows Begin -->
                    <div id="grid1" class="sig-logging wait" on-scroll="_scrolled">
                        <div id="innergrid1">
                            <div id="fakescrolltop" class="scrollfaketop"></div>
                            <template is="dom-repeat" items="[[items]]">
                                <div class$="row [[alarmmode]]" isselected$="[[item.isselected]]" index$="[[index]]"
                                    idxcnt$="[[item.idxcnt]]" idstate$="[[item.id]]" alertstate$="[[item.alertstate]]"
                                    on-down="_selectRow">
                                    <template is="dom-repeat" items="[[columns]]" as="column">

                                        <div class$="column [[column.type]] [[column.key]]"
                                            iconclass$="[[column.iconclass]]" hidden$=[[!column.visible]]
                                            alertstate$="{{item.alertstate}}">
                                            [[get(column.key, item)]]<br />
                                        </div>

                                    </template>
                                </div>
                            </template>
                            <div id="fakescrollbot" class="scrollfakebot"></div>
                        </div>
                    </div>
                    <!-- Datagrid rows End -->
                </div>

                <!-- Paginator Begin -->
                <template is="dom-if" if="[[!hidepaginator]]" restamp>
                    <div id="paginator">
                        <div id="paginatorbuttons">
                            <div id="navigationbuttons">
                                <sig-control-button id="startbutton" sigbtntext="&#xf048" on-down="firstPage" class="footerbutton">
                                </sig-control-button>
                                <sig-control-button id="prevbutton" sigbtntext="&#xf04a" on-down="prevPage" class="footerbutton">
                                </sig-control-button>
                                <sig-control-button id="prevrecordbutton" sigbtntext="&#xf0d9" on-down="prevRecord" class="footerbutton">
                                </sig-control-button>
                                <div class="info">[[recordcount]] [[texts.textcounterof]] [[_elementMaxCount(maxitems)]]
                                        </div>
                                <sig-control-button id="nextrecordbutton" sigbtntext="&#xf0da" on-down="nextRecord" class="footerbutton">
                                </sig-control-button>
                                <sig-control-button id="nextbutton" sigbtntext="&#xf04e" on-down="nextPage" class="footerbutton">
                                </sig-control-button>
                                <sig-control-button id="endbutton" sigbtntext="&#xf051" on-down="endPage" class="footerbutton">
                                </sig-control-button>
                            </div>
                            <div id="configbuttons">
                                <sig-control-button id="showConfig" sigbtntext="&#xf013" on-down="showConfigInputs" class="footerbutton">
                                </sig-control-button>
                                <sig-control-button id="quitAllAlarms" sigbtnicon="&#xf1f6" sigbtniconpressed="&#xf1f6"
                                    sigbtntext="[[texts.textlabelallalarm]]" on-down="quitAllAlarms" class="footerbutton"></sig-control-button>
                                <sig-control-button id="quitAlarm" sigbtntext="&#xf1f6" on-down="quitAlarm" class="footerbutton">
                                </sig-control-button>
                            </div>
                        </div>
                    </div>
                </template>
                <!-- Paginator End -->

                <!-- Overlays Begin -->
                <div id="detailwrapper" class="overlayed" on-down="_closeDetail">
                    <div id="detail">
                        <div id="detailheader" class="titleheader w100">[[texts.textlabeldetail]]</div>
                        <div id="detailinner"></div>
                        <div id="detailfooter" class="footer w100">
                            <div id="detailfooterclose">
                                <sig-control-button class='actionbutton okbutton' on-down="_closeDetail"
                                    sigbtntext="[[texts.textlabelok]]"></sig-control-button>
                                <!-- <button class='actionbutton' on-down="_exportEvents">[[texts.textlabelconfigfilterexport]]</sig-control-button>-->
                                    </div>
                        </div>
                        <button class='closebutton' on-down="_closeDetail"></button>
                    </div>
                </div>

                <div id="configmenue" class="overlayed" hidden>
                    <div id="configheader">
                        <div class="titleheader w40">[[texts.textlabelconfigcolumn]]</div>
                        <div class="titleheader w60">[[texts.textlabelconfigfilter]]</div>
                        <button class="closebutton" on-down="_closeConfigInputs"></button>
                    </div>

                    <div id="columnconfig" class="w40">

                        <div class="content">

                            <div class="titleheader w100">
                                <div class="configrow">
                                    <div class="w50">[[texts.textlabelconfigfield]]</div>
                                    <div class="w50">[[texts.textlabelconfigview]]</div>
                                </div>
                            </div>

                            <template is="dom-repeat" items="[[columns]]" as="column">
                                <div class="configrow" hidden$=[[!column.configurable]]>

                                    <template is="dom-if" if="[[!_isIcon(column.type)]]">
                                        <label>[[column.title]]</label>
                                        <sig-control-checkbox class="configcheckbox" data-key$="[[column.key]]"
                                            value$="[[_isChecked(column.visible)]]"
                                            checked$="[[_isChecked(column.visible)]]" on-tap="_changeConfigColumns">
                                        </sig-control-checkbox>
                                    </template>
                                    <template is="dom-if" if="[[_isIcon(column.type)]]">
                                        <label>[[texts.textlabelconfigicon]]</label>
                                        <sig-control-enum id="iconselect"
                                            valueoptions$=[[enumvalueoptions]] class="configcheckbox"
                                            data-key$="[[column.key]]" value$=[[_getenumvalue(showiconcolumn)]]
                                            activeoption$="[[showiconcolumntext]]" on-value-changed="_changeEnumValue">
                                        </sig-control-enum>
                                    </template>

                                </div>
                            </template>
                        </div>
                    </div>

                    <div id="filterconfig" class="w60">

                        <div class="content">
                            <div class="titleheader w100">
                                <div class="configrow">
                                    <div class="w50">[[texts.textlabelconfigfilterfield]]</div>
                                    <div class="w25">[[texts.textlabelconfigfilterview]]</div>
                                    <div class="w25">[[texts.textlabelconfigfilterexport]]</div>
                                </div>
                            </div>
                            <template is="dom-repeat" items="[[filterconfig]]" as="column">
                                <template is="dom-if" if="[[column.visible]]">
                                    <div class="configrow">
                                        <label>[[column.title]]</label>
                                        <sig-control-checkbox class="configcheckbox" data-fieldkey$="[[column.key]]"
                                            data-key$="[[column.value]]" value$="[[_isChecked(column.active)]]"
                                            checked$="[[_isChecked(column.active)]]" disabled$=[[column.disabled]]
                                            on-tap="_changeConfigFilters">
                                        </sig-control-checkbox>
                                        <sig-control-checkbox class="configcheckbox" data-fieldkey$="[[column.key]]"
                                            data-key="export" value$="[[_isChecked(column.export)]]"
                                            checked$="[[_isChecked(column.export)]]" on-tap="_changeConfigFilters">
                                        </sig-control-checkbox>
                                    </div>
                                </template>
                            </template>
                        </div>

                    </div>

                    <div id="configfooter" class="footer w100">
                        <div id="configfooterclose">
                            <sig-control-button class='actionbutton okbutton' on-down="_closeConfigInputs"
                                sigbtntext="[[texts.textlabelok]]"></sig-control-button>
                            <!-- <button class='actionbutton' on-down="_exportEvents">[[texts.textlabelconfigfilterexport]]</sig-control-button>-->
                        </div>
                    </div>

                </div >

                <div id="filterwrapper" class="overlayed">
                    <div id="filterinputs">
                        <div id="filterinputsheader" class="titleheader w100">[[filterinputsheadertext]]<button
                            class='closebutton' on-down="_closeFilterInputs"></button>
                        </div>
                        <div id="filterinputscontent">
                            <template is="dom-repeat" items="[[columns]]" as="column">
                                <!-- add a filter column -->
                                <template is="dom-if" if="[[column.filtername]]">
                                    <div class$="columnfilterinput [[column.type]]">
                                        <template is="dom-if" if="[[_isDateFilter(column)]]">

                                            <div id$="[[column.filtername]]">
                                                <div class="datetimeblock">
                                                    <span class="sidelabel">[[texts.textlabelfrom]]</span>
                                                    <span>
                                                        <label>[[texts.textlabeldate]]</label>
                                                        <sig-control-input id$="[[column.filtername]]_filtervalue1"
                                                            class="dateinput" placeholder="[[column.title]]" type="date"
                                                            titletext="[[texts.textlabeldate]]"
                                                            value="{{column.filtervalue1}}">
                                                        </sig-control-input>&nbsp;</span>
                                                    <span>
                                                        <label>[[texts.textlabeltime]]</label>
                                                        <sig-control-input id$="[[column.filtername]]_filtervalue2"
                                                            class="dateinput" placeholder="[[column.title]]" type="time"
                                                            titletext="[[texts.textlabeltime]]"
                                                            value="{{column.filtervalue2}}">
                                                        </sig-control-input>&nbsp;
                                                    </span>
                                                </div>
                                                <div class="datetimeblock">
                                                    <span class="sidelabel">[[texts.textlabelto]]</span>
                                                    <span>
                                                        <label>[[texts.textlabeldate]]</label>
                                                        <sig-control-input id$="[[column.filtername]]_filtervalue3"
                                                            class="dateinput" placeholder="[[column.title]]" type="date"
                                                            titletext="[[texts.textlabeldate]]"
                                                            value="{{column.filtervalue3}}">
                                                        </sig-control-input>&nbsp;
                                                    </span>
                                                    <span>
                                                        <label>[[texts.textlabeltime]]</label>
                                                        <sig-control-input id$="[[column.filtername]]_filtervalue4"
                                                            class="dateinput" placeholder="[[column.title]]" type="time"
                                                            titletext="[[texts.textlabeltime]]"
                                                            value="{{column.filtervalue4}}">
                                                        </sig-control-input>&nbsp;
                                                    </span>
                                                </div>

                                            </div>

                                        </template>
                                    </div>
                                </template>
                            </template>
                        </div>
                        <div id="filterinputsfooter" class="footer w100">
                            <div id="filterinputsfooterclose">
                                <template is="dom-if" if="[[showcancel]]">
                                    <sig-control-button class='actionbutton cancelbutton' on-down="_cancelFilterInputs"
                                        sigbtntext="[[texts.textlabelcancel]]">
                                    </sig-control-button>
                                </template>
                                <sig-control-button class='actionbutton okbutton' on-down="_applyFilterInputs" sigbtntext="[[texts.textlabelok]]"></sig-control-button>
                            </div>
                        </div>
                    </div>
                </div >
                <!--Overlays End-->

            </div >
        <!-- </template > -->
        <!-- Main End-->
            `
    }

    /**
    * Returns the defined Polymer properties of the component.
    * @readonly
    * @static
    * @returns {Object} The defined Polymer properties
    * @memberof LasalRuntimeSigLogging
    * 
    * @property {Array}     items                 - An array of Event Journal (listview) items.
    * @property {Array}     filters               - An array of filters.
    * @property {Array}     columns               - An array of column settings.
    * @property {String}    activeoption          - Obsolete variable, might be removed during further development.   
    * @property {Number}    page                  - The current page of the listview.
    * @property {Number}    offset                - The amount of rows that are currently over the current position. 
    * @property {Number}    maxitems              - Total items in listview.
    * @property {Number}    itemscount            - The maximum visible amount of rows.
    * @property {Number}    recordcount           - Determines the current position in listview.
    * @property {Boolean}   hideheader            - Shows or hides the header.         
    * @property {Boolean}   hidetitle             - Shows or hides the titlebar.
    * @property {Boolean}   applybordereffect     - Defines if the titlebar has border effect applied.   
    * @property {Boolean}   shadowactive          - Obsolete titlebar variable.
    * @property {Boolean}   showcancel            - Shows or hides cancel button in overlay dialogs.
    * @property {String}    titletext             - Title text. 
    * @property {Boolean}   hidefilter            - Shows or hides the filter.
    * @property {Boolean}   hidepaginator         - Shows or hides the footer.   
    * @property {Boolean}   hidescroller          - Shows or hides the scrollbar.
    * @property {String}    showiconcolumn        - Shows icon on first/last column or hides it.     
    * @property {Boolean}   showidcolumn          - Shows or hides ID column.  
    * @property {Boolean}   showalarmnrcolumn     - Shows or hides alarm number column.        
    * @property {Boolean}   showalarmparamcolumn  - Shows or hides PARAM1 column.          
    * @property {Boolean}   showindexcolumn       - Shows or hides index column.     
    * @property {Boolean}   showdatecolumn        - Shows or hides date/time column.    
    * @property {Boolean}   debounce              - Enables or disables the fast scroller (loads entries on scroll stop).
    * @property {Number}    debouncedelay         - Scroll detection delay for the fast scroller (ms).    
    * @property {String}    itemfilter            - The basic filtering of the event journal entries.
    * @property {String}    alarmmode             - Determines the alarm mode.
    * @property {Boolean}   filterset             - Determines whether any of the input filters is set or not.
    */
    static get properties() {
        return {
            // Elements for datagrid
            items: {
                type: Array,
                value: () => { return [] }
                // observer: '_itemsChanged'
            },
            filters: {
                type: Array,
                value: () => { return [] }
                // observer: '_filtersChanged'
            },
            columns: {
                type: Array,
                value: () => { return [] }
                // notify: true,
                // readOnly: false,
                // observer: '_columnsChanged'
            },
            activeoption: {
                type: String,
                value: null
                // observer: '_changeEnumValue'
            },
            // scrolling/paging properties
            page: {
                type: Number,
                value: null
            },
            offset: {
                type: Number,
                value: 0
            },
            maxitems: {
                type: Number,
                value: 0
            },
            itemscount: {
                type: Number,
                value: 20
            },
            recordcount: {
                type: Number,
                value: 0
            },

            // designer properties
            hideheader: {
                type: Boolean,
                value: false,
                reflectToAttribute: false
            },
            hidetitle: {
                type: Boolean,
                value: false,
                reflectToAttribute: true
            },
            applybordereffect: {
                type: Boolean,
                value: false,
                reflectToAttribute: false,
                observer: '_init'
            },
            shadowactive: {
                type: Boolean,
                value: false,
                reflectToAttribute: true
            },

            showcancel: {
                type: Boolean,
                value: false,
                reflectToAttribute: false
            },
            titletext: {
                type: String,
                value: '',
                reflectToAttribute: false,
                observer: '_getSystemTexts'
            },
            hidefilter: {
                type: Boolean,
                value: false,
                reflectToAttribute: false
            },
            hidepaginator: {
                type: Boolean,
                value: false,
                reflectToAttribute: false
            },
            hidescroller: {
                type: Boolean,
                value: false,
                reflectToAttribute: true
            },

            showiconcolumn: {
                type: String,
                value: 'none',
                reflectToAttribute: false,
                observer: '_initColumns'
            },
            showidcolumn: {
                type: Boolean,
                value: false,
                reflectToAttribute: false,
                observer: '_initColumns'
            },
            showalarmnrcolumn: {
                type: Boolean,
                value: false,
                reflectToAttribute: false,
                observer: '_initColumns'
            },
            showalarmparamcolumn: {
                type: Boolean,
                value: false,
                reflectToAttribute: false,
                observer: '_initColumns'
            },
            showindexcolumn: {
                type: Boolean,
                value: false,
                reflectToAttribute: false,
                observer: '_initColumns'
            },
            showdatecolumn: {
                type: Boolean,
                value: true,
                reflectToAttribute: false,
                observer: '_initColumns'
            },
            // alarmopacity: {
            //     type: Number,
            //     value: 0.6,
            //     reflectToAttribute: false
            // },
            debounce: {
                type: Boolean,
                value: false,
                reflectToAttribute: false
            },
            debouncedelay: {
                type: Number,
                value: 250,
                reflectToAttribute: false
            },
            itemfilter: {
                type: String,
                value: 'none',
                reflectToAttribute: true,
                observer: '_initColumns'
            },
            alarmmode: {
                type: String,
                value: null,
                reflectToAttribute: true,
                observer: '_initColumns'
            },
            filterset: {
                type: Boolean,
                value: false,
                reflectToAttribute: true
            }
        }
    }

    // static get observers() {
    //     return [
    //         '_columnsChanged(columns.*)'
    //     ]
    // }

    /**
     * Creates an instance of LasalRuntimeSigLogging.
     * @constructor
     * @memberof LasalRuntimeSigLogging
     */
    constructor() {
        super();
        this.sigApiEventJournal = sigApi.eventJournal;
        this.tmApi = window.sigApi.textManager;
        this.utils = window.sigApi.sigUtils;

        this.multisort = false;

        // Fakescroller Props
        this.fakescrollcontentheight = 0;
        this.fakescrollheighttop = 0;
        this.fakescrollheightbot = 0;
        this.recordcount = 1;
        this.page = 0;
        this.offset = 0;
        this.itemscount = 0;
        this.linemodeFactor = 1;

        // this.tracked = {};
        this.isscrolling = false;
        this.selectedItems = [];

        this.filters = [];
        this.filterkey = null;

        this.controlTextList = 'controlTexts_sig_logging';

        this.isloaded = false;

        //Notify for changes so that logging can react to value change in enum
        this.notifyOnValueUpdatesInShadowDom = true;

    }

    /**
     * Event handler which is executed every time a sig-control-checkbox in the Column Configuration overlay is tapped. 
     * It updates columns configuration.
     * @private
     * @param {Event} evt The on-tap JavaScript event.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _changeConfigColumns(evt) {
        const _evtPath = evt.composedPath();
        if (_evtPath) {
            _evtPath.filter((_path) => {
                if (_path.tagName === 'SIG-CONTROL-CHECKBOX') {
                    const key = _path.getAttribute('data-key');
                    this._setConfigColumns(key, _path.value);
                }
            })
        }
    }

    /**
     * Sets CSS height property on all three overlay wrappers. 
     * This is done dynamically because the titlebar height can be changed by applying a titlebar style class.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _updateHeights() {
        SigPolymer.afterNextRender(this, () => {
            const calcedHeight = this.offsetHeight - this.$.titlebar.offsetHeight + "px";
            const calcedTop = this.$.titlebar.offsetHeight + "px";
            //Configmenue wrapper
            this.$.configmenue.style.top = calcedTop;
            this.$.configmenue.style.height = calcedHeight;
            //Filter wrapper
            this.$.filterwrapper.style.top = calcedTop;
            this.$.filterwrapper.style.height = calcedHeight;
            //Detail wrapper
            this.$.detailwrapper.style.top = calcedTop;
            this.$.detailwrapper.style.height = calcedHeight;
        });
    }

    /**
     * Event handler which is executed every time the value of the sig-control-enum  in the Column Configuration overlay is changed. 
     * It updates the position of the icon column in the listview.
     * @private
     * @param {Event} evt on-value-changed event
     * @param {Object} data Selected option data 
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _changeEnumValue(evt, data) {
        if (evt && data.value !== undefined && this.isloaded) {
            const _enumVal = parseInt(data.value, 10);
            if (_enumVal === 1) {
                this._setConfigColumns('action1', 1);
                this._setConfigColumns('action2', 0);
            }
            else if (_enumVal === 2) {
                this._setConfigColumns('action1', 0);
                this._setConfigColumns('action2', 1);
            } else {
                this._setConfigColumns('action1', 0);
                this._setConfigColumns('action2', 0);
            }
        }
    }
    // _changeEnumValue(evt) {
    //     if (evt.detail && evt.detail.value !== undefined && this.isloaded) {
    //         const _enumVal = parseInt(evt.detail.value, 10);
    //         if (_enumVal === 1) {
    //             this._setConfigColumns('action1', 1);
    //             this._setConfigColumns('action2', 0);
    //         }
    //         else if (_enumVal === 2) {
    //             this._setConfigColumns('action1', 0);
    //             this._setConfigColumns('action2', 1);
    //         } else {
    //             this._setConfigColumns('action1', 0);
    //             this._setConfigColumns('action2', 0);
    //         }
    //     }
    // }

    /**
     * Returns the id of the 'showiconcolumn' property option specified by its shortname.
     * @private
     * @param {String} _val The shortname of the 'showiconcolumn' property option.
     * @returns {Number|Null} The Id of the 'showiconcolumn' property option or Null on error.
     * @memberof LasalRuntimeSigLogging
    */
    _getenumvalue(_val) {
        const _retval = this.enumvalueoptions.filter((_item) => _item.shortname === _val);
        if (_retval[0]) return _retval[0].id;
        return null;
    }

    /**
     * Event handler which is executed every time a sig-control-checkbox in the Event Filter of the Configuration overlay is tapped. 
     * It updates filter configuration of the list view.
     * @private
     * @param {Event} evt The on-tap event.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _changeConfigFilters(evt) {
        const _evtPath = evt.composedPath();
        if (_evtPath) {
            _evtPath.filter((_path) => {
                if (_path.tagName === 'SIG-CONTROL-CHECKBOX') {
                    const fieldKey = _path.getAttribute('data-fieldkey');
                    const key = _path.getAttribute('data-key');
                    this._setConfigFilter('id', fieldKey, key, _path.value);
                }
            })
        }
    }

    /**
     * This method is on-down event handler which is executed every time th OK button in the footer of the Configuration overlay is pressed.
     * It closes the Configuration overlay.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _closeConfigInputs() {
        // this.$.configmenue.classList.add('hidden');
        this.$.configmenue.setAttribute('hidden', '');
    }

    /**
     * This method should export Events.
     * @todo Needs implementation
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _exportEvents() {
        // Prep 4 Event Export
    }

    /**
     * This method is on-down event handler which is executed every time the Configuration button of the paginator is pressed.
     * It opens the Configuration overlay.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
     */
    showConfigInputs() {
        // this.$.configmenue.classList.remove('hidden');
        this.$.configmenue.removeAttribute('hidden');
    }

    /**
     * Updates filters in the Event Filter Configuration overlay.
     * @private
     * @param {String} key The filter key, e.g. 'id'.
     * @param {String} fieldKey The fieldKey of filter, e.g. 'cat8'. 
     * @param {String} value The value of the filter, e.g. 'login/logout'.
     * @param {Number} set 1 indicates tha the filter is set (checkbox in active state); 0 indicates that the filter is not set
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _setConfigFilter(key, fieldKey, value, set) {
        const _set = set === 1 ? true : false;
        const _obj = { type: 'config-changed', key: key, fieldKey: fieldKey, value: value, set: _set }
        this.setFilter(_obj);
        this.saveLocalStorageFiltersConfig();
    }

    /**
     * Updates columns configuration in the Column Configuration overlay.
     * @private
     * @param {String} key The column key, e.g. 'alarmnr'.
     * @param {Number} value The column value: 0 = column is not present in the list view; 1 = column is not present in the list.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _setConfigColumns(key, value) {
        // console.log('Change columns config ' + key + ' ' + value)
        this.columns.map((column) => {
            if (key === column.key) {
                column.visible = value === 1 ? true : false;
                const _class = '.' + column.key;
                const _elems = this.$.gridwrapper.querySelectorAll(_class);
                // console.dir(_elems)
                if (_elems) {
                    [..._elems].map((_elem) => {
                        if (column.visible === false) _elem.setAttribute('hidden', '');
                        else _elem.removeAttribute('hidden');
                    })
                }
            }
        });
        this.saveLocalStorageColumnsConfig();
    }

    /**
     * Converts a boolean parameter into a corresponding string "0" for False and "1" for True.
     * @param {Boolean} _val Boolean parameter
     * @returns {String} Returns "0" for input parameter False and "1" for True.
     * @memberof LasalRuntimeSigLogging
    */
    _isChecked(_val) {
        if (_val) return "1";
        else return "0";
    }

    /**
     * Obsolete method
     * @todo Might be removed during further development. 
     * @memberof LasalRuntimeSigLogging
    */
    _isHeader(_sort, _vis) {
        if (_sort && _vis) return true;
        else return false;
    }

    /**
     * Sets alarmmode property on "alarm" if the specified itemfilter is any of alarms. Otherwise the property alarmmode is set on Null.
     * @private
     * @param {String} itemfilter The item type.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _setAlarmMode(itemfilter) {
        // this.alarmmode = null;
        if (itemfilter.startsWith("alarm") && itemfilter.length > 5) {
            this.itemfilter = itemfilter.substring(0, 5);
            this.alarmmode = itemfilter.substring(5);
        } else if (itemfilter !== "alarm") {
            this.alarmmode = null;
        }
    }
    // _isAlarmMode(itemfilter) {
    //     this.alarmmode = null;
    //     if (itemfilter.startsWith("alarm") && itemfilter.length > 5) {
    //         this.itemfilter = itemfilter.substring(0, 5);
    //         this.alarmmode = itemfilter.substring(5);
    //         return this.alarmmode;
    //     }
    //     return false;
    // }

    /**
     * Determines whether a given column type is icon type.
     * @param {String} _type The column type.
     * @returns {Boolean} True if column type is icon.
     * @memberof LasalRuntimeSigLogging
    */
    _isIcon(_type) {
        if (_type === "icon") return true;
        return false;
    }

    /**
     * Obsolete method.
     * @private
     * @todo Might be removed during further development. 
     * @memberof LasalRuntimeSigLogging
    */
    _isIconColumn(_value, _optionValue) {
        if (_value === _optionValue) return true;
        return false;
    }

    /**
     * Converts the boolean parameter sortable into string 'sortable' if it is True. Otherwise the returned value is Undefined.
     * Used to apply the style class 'sortable' on a column with sortable option True.
     * @private
     * @param {Boolean} sortable Determines whether the column is sortable or not.
     * @returns {String|Undefined} Class name 'sortable' if the column is sortable.
     * @memberof LasalRuntimeSigLogging
    */
    _setSortable(sortable) {
        if (sortable) return "sortable";
    }

    /**
     * Set the label of the column header.
     * @private
     * @param {Boolean} sortable Determines whether the column is sortable or not.
     * @param {String} text The name of the header column.
     * @returns {String} The column header label.
     * @memberof LasalRuntimeSigLogging
    */
    _setSortLabel(sortable, text) {
        if (sortable) return text;
        else return "";
    }

    /**
     * This method is on-down event handler which is executed every time a row of the listview is pressed.
     * It updates the property selectedItems.
     * @private
     * @param {Event} evt On-down JavaScript event.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
     */
    _selectRow(evt) {
        const _selectedItem = evt.model.item;
        const _evtPath = evt.composedPath();
        if (_evtPath[0].classList[1] === 'icon') {
            this._openDetail(evt, _selectedItem.detail);
        } else {
            if (this.isAlarm(_selectedItem.id) === true && _selectedItem.alertstate < 1000 && this.itemfilter === 'alarm') {
                const _selectedItemIdxcnt = _selectedItem.idxcnt;
                const _selectedItemAlertstate = _selectedItem.alertstate;
                const _selectedItemQuit = _selectedItem.quit;
                const _isSelectedItem = this.selectedItems.filter((item, index) => item === _selectedItemIdxcnt);
                const _setSelectedItem = this.items.filter((item, index) => item.idxcnt === _selectedItemIdxcnt);

                if (_isSelectedItem.length === 0) {
                    this.selectedItems.push(_selectedItemIdxcnt);
                    _evtPath[1].setAttribute('isselected', 'selected');
                    _setSelectedItem[0].isselected = true;
                } else {
                    this.selectedItems = this.selectedItems.filter((item, index) => item !== _selectedItemIdxcnt);
                    _evtPath[1].setAttribute('isselected', '');
                    _setSelectedItem[0].isselected = false;
                }
            }
        }
    }

    /**
     * This method opens the detail overlay if the icon column of the selected row is pressed.
     * It is called by the on-down event handler when a row of the listview is pressed.
     * @private
     * @param {Event} evt on-down JavaScript Event.
     * @param {String} detail Detail of the selected item.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
     */
    _openDetail(evt, detail = null) {
        let _detail = detail;
        if (_detail === null) _detail = evt.model.item.detail;
        const _element = this.shadowRoot.getElementById('detailwrapper');
        const _elementInner = this.shadowRoot.getElementById('detailinner');
        _elementInner.innerHTML = _detail;
        _element.style.setProperty('display', 'flex');
    }

    /**
     * This method is on-down event handler not only for the OK or Cancel Button but for the whole area of the detail overlay.
     * It closes the detail overlay.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
     */
    _closeDetail() {
        const _element = this.shadowRoot.getElementById('detailwrapper');
        _element.style.setProperty('display', 'none');
    }

    /**
     * Opens the filter inputs layer.
     * @private
     * @param {Event} evt on-down JavaScript event.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
     */
    _openFilterInputs(evt) {
        this.filterkey = evt.model.column.key;
        const _key = evt.model.column.key;
        const _name = evt.model.column.filtername;

        const _element = this.shadowRoot.getElementById('filterwrapper');
        // const _elementKey = this.shadowRoot.getElementById('filter_' + _key);
        const _elementName = this.shadowRoot.getElementById(_name);
        const _elementFilterHeaderText = this.shadowRoot.getElementById('filterinputsheader');
        _element.style.setProperty('display', 'block');
        _elementName.style.setProperty('display', 'block');

        if (this.alarmmode === 'singleline') {
            if (_key === 'datetime') this.filterinputsheadertext = this.texts.textlabelfilter + ' ' + this.texts.textlabelfilteralarmin;
            else if (_key === 'datetime1') this.filterinputsheadertext = this.texts.textlabelfilter + ' ' + this.texts.textlabelfilteralarmout;
        } else {
            if (_key === 'datetime') this.filterinputsheadertext = this.texts.textlabelfilter + ' ' + this.texts.textlabeldatetime;
        }
    }

    /**
     * This method is on-down event handler which is executed every time the Cancel button of the filter layer is pressed.
     * It discards filter inputs and closes the filter layer.
     * @private
     * @param {Event} obj on-down JavaScript event.
     * @returns {Undefined | Boolean} Undefined
     * @memberof LasalRuntimeSigLogging
     */
    _cancelFilterInputs(obj) {
        this.columns.map((column) => {
            if (column.key === this.filterkey) {
                let _found = false;
                this.filters.map((data) => {
                    if (data.key === this.filterkey) {
                        column.filtervalue1 = data.value.startdate;
                        column.filtervalue2 = data.value.starttime;
                        column.filtervalue3 = data.value.enddate;
                        column.filtervalue4 = data.value.endtime;
                        _found = true;
                    }
                    return _found;
                });

                if (_found === false) {
                    column.filtervalue1 = null;
                    column.filtervalue2 = null;
                    column.filtervalue3 = null;
                    column.filtervalue4 = null;
                }

                let _filterInputElement = this.shadowRoot.getElementById(column.filtername + '_filtervalue1');
                _filterInputElement.value = column.filtervalue1;
                _filterInputElement = this.shadowRoot.getElementById(column.filtername + '_filtervalue2');
                _filterInputElement.value = column.filtervalue2;
                _filterInputElement = this.shadowRoot.getElementById(column.filtername + '_filtervalue3');
                _filterInputElement.value = column.filtervalue3;
                _filterInputElement = this.shadowRoot.getElementById(column.filtername + '_filtervalue4');
                _filterInputElement.value = column.filtervalue4;

            }
        });
        this._closeFilterInputs(obj);
    }

    /**
     * This method is on-down event handler which is executed every time the Close button in the filter layer header is pressed.
     * It closes the filter layer. The method is also called by two other event handler _applyFilterInputs() and _cancelFilterInputs().
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
     */
    _closeFilterInputs() {
        const filterKeyInputElement = this.shadowRoot.getElementById('filterwrapper');

        const _element = this.shadowRoot.getElementById('filterwrapper');
        const _elementInputs = this.shadowRoot.getElementById('filterinputs');
        const _elementDivs = _elementInputs.querySelectorAll('div');
        [..._elementDivs].filter((data) => data.id.startsWith('_filter_')).map((data) => {
            data.style.setProperty('display', 'none')
        });
        _element.style.setProperty('display', 'none');
    }

    /**
     * This method is on-down event handler which is executed every time the OK button in the filter layer footer is pressed.
     * It applies the set filter values and closes the filter layer.
     * @private
     * @param {Event} obj on-down JavaScript event.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _applyFilterInputs(obj) {
        this._closeFilterInputs();
        this.setFilter(obj);
        // Reset scroller
        // this._getEventJournalEntries();
        // this.firstPage();
    }

    /**
     * Returns the number of max items in listview according to the maxitems property.
     * @private
     * @param {Number} maxitems Total items in listview.
     * @returns {Number} Returns the maxitems number or the half of it if the alarmmode is 'singleline'.
     * @memberof LasalRuntimeSigLogging
    */
    _elementMaxCount(maxitems) {
        // displayed max in pager
        if (this.alarmmode === 'singleline') return maxitems / 2;
        return maxitems;
    }

    /**
     * Returns whether the column filter is of type datetime.
     * @private
     * @param {Object} column The column object to test.
     * @returns {Boolean} True if the filter format of the column is datetime.
     * @memberof LasalRuntimeSigLogging
     */
    _isDateFilter(column) {
        return column.filterformat === 'datetime';
    }

    /**
     * Initiates all filters, saves column and filter configuration locally and updates the property items by Event Journal API.
     * It navigates back to the first page afterwards.
     * @param {Object} [obj=null] A filter configuration object.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    setFilter(obj = null) {
        // no filterbutton anymore
        /*
        const _element = this.shadowRoot.getElementById('filterbutton');
        if (obj === null)  _element.classList.remove('active');
        else _element.classList.add('active');
        */
        // set Multifilter
        this.filters = this._buildFilter(obj);
        // this.filterset = (obj === null || obj.type !== 'value-changed' || obj.detail.value === '') ? false : true;
        // if (this.filters.length > 1) this.filterset = true;
        // else this.filterset = false;

        this.saveLocalStorageColumnsConfig();
        this.saveLocalStorageFiltersConfig();
        // Reset scroller
        this._getEventJournalEntries();
        this.firstPage();
    }

    /**
     * Saves the columns configuration in the localStorage as a JSON string in form "sig-logging_columnsconfig-" +  this.id, JSON.stringify(this.columns). 
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    saveLocalStorageColumnsConfig() {
        if (this.isloaded) {
            // console.log('save COLUMNs Config: ');
            // console.log(this.columns);
            localStorage.setItem("sig-logging_columnsconfig-" + this.id, JSON.stringify(this.columns));
        }
    }

    /**
     * Gets the columns configuration as a JSON string from the localStorage.
     * @returns {String}  JSON String 
     * @memberof LasalRuntimeSigLogging
    */
    getLocalStorageColumnsConfig() {
        return localStorage.getItem("sig-logging_columnsconfig-" + this.id);
    }

    /**
     * Saves the filters configuration in the localStorage as a JSON string in form "sig-logging_filtersconfig-" + this.id, JSON.stringify(this.filterconfig).
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    saveLocalStorageFiltersConfig() {
        localStorage.setItem("sig-logging_filtersconfig-" + this.id, JSON.stringify(this.filterconfig));
    }

    /**
    * Gets the filters configuration as a JSON string from the localStorage.
    * @returns {String} JSON String 
    * @memberof LasalRuntimeSigLogging
    */
    getLocalStorageFiltersConfig() {
        return localStorage.getItem("sig-logging_filtersconfig-" + this.id);
    }

    /**
     * This is the event handler method for the Runtime events INT_DOWNLOAD_PRJ_START and INT_DOWNLOAD_PRJ_END.
     * Removes items from the the localStorage which belong to all sig-logging components i.e. starts with 'sig-logging_'.
     * @param {String} msg Message
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    clearLocalStorage(msg) {
        // console.log('clear storage on project load')
        for (const key in localStorage) {
            if (key.startsWith("sig-logging_")) {
                localStorage.removeItem(key);
            }
        }
    }

    /**
     * Sets the sort.
     * @private
     * @param {Event} obj setSort event
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _setSort(obj) {
        // the data
        const _dataObj = obj.model.column;
        // not sortable? return
        if (!_dataObj.sortable || _dataObj.sortable !== true) return;

        // the clicked element
        let _elem = obj.composedPath()[0];

        // get the recent element sortstate
        let _attr = _elem.getAttribute('data-sorttype');
        if (_attr === null) { _elem = obj.composedPath()[1]; _attr = _elem.getAttribute('data-sorttype'); }
        // clear all sortvalues
        if (this.multisort === false) {
            this._clearAllSort();
        }

        // toggle/set sort arrows & reload data
        let _sorttype = 'none';
        switch (_attr) {
            case 'asc':
                _sorttype = 'desc';
                break
            case 'desc':
                _sorttype = 'none';
                break
            default:
                _sorttype = 'asc';
                break
        }

        // set Element sorttype
        _elem.setAttribute('data-sorttype', _sorttype);
        // set model (columns)
        _dataObj.sorttype = _sorttype;

        // Sort change fetches new sorted list 
        this.sort = this._buildSort();
        // set loading pointer to the first record
        this.recordcount = 1;
        this.offset = 0;
        // Update Config
        this.saveLocalStorageColumnsConfig();
        // get data
        this._getEventJournalEntries();
    }

    /**
     * Clears all filters for all columns.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    clearAllFilter() {
        let index = 0;
        for (let _column of this.columns) {
            // if (_column.key !== "id") {
            // This is the only (rude)way to reset the values in polymer array bindings
            if (_column.key === "datetime" || _column.key === "datetime1") {
                const _filterItem1 = 'columns.' + index + '.filtervalue1';
                const _filterItem2 = 'columns.' + index + '.filtervalue2';
                const _filterItem3 = 'columns.' + index + '.filtervalue3';
                const _filterItem4 = 'columns.' + index + '.filtervalue4';
                _column.filtervalue1 = '';
                _column.filtervalue2 = '';
                _column.filtervalue3 = '';
                _column.filtervalue4 = '';
                this.set(_filterItem1, null);
                this.set(_filterItem2, null);
                this.set(_filterItem3, null);
                this.set(_filterItem4, null);
            } else {
                _column.filtervalue = '';
                const _filterItem = 'columns.' + index + '.filtervalue';
                this.set(_filterItem, null);
            }
            // }
            index += 1;
        }
        this.setFilter(null);
        // this.filterset = false;
        // this.notifyPath('columns', this.columns);
    }

    /**
     * Clears the sorttype property at all columns.
     * Clears the data-sorttype attribute at all sortable child elements in the shadow DOM.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _clearAllSort() {
        // clears all sort(props)
        for (let _column of this.columns) {
            _column.sorttype = '';
        }
        const _childElemsSortable = this.shadowRoot.getElementById('gridheader').querySelectorAll('.sortable');
        for (let _childElem of _childElemsSortable) {
            _childElem.setAttribute('data-sorttype', '');
        }
    }

    /**
     * This method is on-scroll event handler which is executed on scrolling the listview.
     * It updates the properties recordcount, isscrolling and offset.
     * @private
     * @param {Event} obj on-scroll JavaScript event
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
     */
    _scrolled(obj) {
        let _scrollTop = 0;
        // internal or external event
        if (obj instanceof Event) {
            // obj.preventDefault();
            // obj.stopPropagation();
            _scrollTop = obj.composedPath()[0].scrollTop;
        } else {
            this.isscrolling = true;
            // TEST external event - slider give 0 to 100%
            _scrollTop = Math.max(Math.round((this.maxitems - this.itemscount) * obj * this.fakescrollheightrow / 100), 0);
            // TEST external event - slider give absolute value
            // _scrollTop = obj;
        }

        // actual record(position) while scrolling
        this.recordcount = Math.round(_scrollTop / this.fakescrollheightrow) + 1;

        // Using scrollbar to lazy load record(s)
        if (this.isscrolling === false) {
            // only if record(position) changes
            if (this.offset !== this.recordcount - 1) {
                log.debug("START scrolling ");
                this.isscrolling = true;
                this.$.grid1.classList.add('wait');
            }
        }
        if (this.isscrolling === true) {
            log.debug("IS scrolling " + this.recordcount);
            if (this.debounce === true) {
                // debounce while scrolling
                this._debounceEndScroll();
            } else {
                // direct loading while scrolling - only if record(position) changes
                if (this.offset !== this.recordcount - 1) {
                    this.offset = this.recordcount - 1;
                    this._getEventJournalEntries();
                }
            }
        }
    }

    /**
     * This method calls SigPolymer debouncer while scrolling.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _debounceEndScroll() {
        this._updateScrollerDebouncer = SigPolymer.debouncer.debounce(
            this._updateScrollerDebouncer,
            SigPolymer.timeOut.after(this.debouncedelay),
            () => {
                this.isscrolling = false;
                log.debug("END scrolling ");
                // Do updates only if data offsetposition changed
                if (this.offset !== this.recordcount - 1) {
                    this.offset = this.recordcount - 1;
                    this._getEventJournalEntries();
                }
            }
        );
    }

    /**
     * Updates the properties maxClusters, fakescrollheighttop, fakescrollheightbot and page to fit the new number of listview items.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
     */
    _updateScroller() {
        this.maxClusters = Math.ceil((this.maxitems / this.linemodeFactor) / this.maxClusterNumberRows);
        const _maxFakeScrollHeight = Math.max(((this.maxitems - this.maxClusterNumberRows) * this.fakescrollheightrow / this.linemodeFactor), this.fakescrollcontentheight);
        this.fakescrollheighttop = Math.min((this.recordcount - 1) * this.fakescrollheightrow, _maxFakeScrollHeight + this.fakescrollheightrow);
        this.fakescrollheightbot = Math.max((this.maxitems - (this.recordcount * this.linemodeFactor) - this.itemscount + this.linemodeFactor) * this.fakescrollheightrow / this.linemodeFactor, 0);
        this.$.fakescrolltop.style.setProperty('height', this.fakescrollheighttop + "px");
        this.$.fakescrollbot.style.setProperty('height', this.fakescrollheightbot + "px");
        this.$.grid1.scrollTop = this.fakescrollheighttop;
        this.page = Math.round((this.recordcount * this.linemodeFactor) / this.itemscount);
        this.$.grid1.classList.remove('wait');
    }

    /**
     * The on-down event handler which is executed every time the Previous button in the paginator is pressed.
     * It navigates to the previous record in the listview.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    prevRecord() {
        // console.log('_prevRecord');
        this._recordChanged(Math.max(0, this.offset - 1));
    }

    /**
     * The on-down event handler which is executed every time the Next button in the paginator is pressed.
     * It navigates to the next record in the listview.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    nextRecord() {
        this._recordChanged(Math.max(Math.min((this.maxitems / this.linemodeFactor) - this.maxClusterNumberRows, this.offset + 1), 0));
    }

    /**
     * Sets the property offset on the new value and updates items data from Event Journal API.
     * Called by prevRecord(), nextRecord() and endPage() event handlers.
     * @private
     * @param {Number} offset The listview offset of the newly changed record.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _recordChanged(offset) {
        this.offset = offset;
        log.debug('_recordChanged to: ' + this.offset + ' Page #' + this.page);
        // fetch data from event Journal
        this._getEventJournalEntries();
    }

    /**
     * Obsolete method.
     * @private
     * @todo Might be removed during further development.
     * @memberof LasalRuntimeSigLogging
    */
    _selectPage(evt) {
        this._pageChanged(evt.model.item - 1);
    }
    /**
     * The on-down event handler which is executed every time the Start button in the paginator is pressed. 
     * It navigates to the first page of the listview.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    firstPage() {
        this._pageChanged(0);
    }

    /**
     * The on-down event handler which is executed every time the Previous button in the paginator is pressed. 
     * It navigates to the previous page of the listview.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    prevPage() {
        this._pageChanged(Math.max(0, this.page - 1));
    }

    /**
     * The on-down event handler which is executed every time the Next button in the paginator is pressed. 
     * It navigates to the next page of the listview.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    nextPage() {
        this._pageChanged(this.page + 1);
    }
    /**
     * The on-down event handler which is executed every time the End button in the paginator is pressed.  
     * It navigates to the end page of the listview.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    endPage() {
        this._recordChanged(Math.max((this.maxitems / this.linemodeFactor) - this.maxClusterNumberRows, 0));
    }

    /**
     * Quits alarm entries specified by the property selectedItems.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    quitAlarm() {
        this.sigApiEventJournal.quitAlarms(this.selectedItems).then((_val) => {
            this._resetAlarms();
        }).catch((_err) => {
            log.error('Quit Alarm failed');
        });

    }

    /**
     * Quits all the alarms of logging.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    quitAllAlarms() {
        this.sigApiEventJournal.quitAllAlarms().then(() => {
            this._resetAlarms();
        });
        // this._resetAlarms();
    }

    /**
     * Clears the property selectedItems and updates the property items using the Event Journal API.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _resetAlarms() {
        this.selectedItems = [];
        this._getEventJournalEntries();
    }

    /**
     * Changes the properties page and offset and updates the property items using the Event Journal API.
     * @private
     * @param {Number} page The page number to be changed on. Page numbers start from 0.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _pageChanged(page) {
        if (page === undefined || page === null || page > this.maxClusters - 1) {
            return;
        }
        this.page = Math.min(page, Math.max(this.maxClusters - 1, 0));

        // Last page: Switch to last full recordset
        if (page >= this.maxClusters - 1) {
            this.endPage();
        } else {
            // calc new offset for page change
            this.offset = page * this.itemscount / this.linemodeFactor;
            // this.offset = (page * (Math.round(this.fakescrollcontentheight / this.fakescrollheightrow)));
            log.debug('_pageChanged to: ' + page + '(' + (this.maxClusters - 1) + ') Offset: ' + this.offset);
            // fetch data from event Journal
            this._getEventJournalEntries();
        }
    }

    /**
     * Initializes the properties fakescrollcontentheight, fakescrollheightrow, maxClusterNumberRows and itemscount based on content and the row height.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _calcContent() {
        // init fakescroller based on content & rowheight
        if (this.alarmmode === 'singleline') this.linemodeFactor = 2;
        this.fakescrollcontentheight = parseInt(getComputedStyle(this).height, 10);
        const _content = parseInt(getComputedStyle(this.shadowRoot.getElementById('grid1')).height, 10);
        if (_content > 0) this.fakescrollcontentheight = _content;

        this.fakescrollheightrow = getComputedStyle(this).getPropertyValue('--theme-sig-logging-row-height') ? parseInt(getComputedStyle(this).getPropertyValue('--theme-sig-logging-row-height'), 10) : 26;
        // this.fakescrollheightrow += (getComputedStyle(this).getPropertyValue('--theme-sig-logging-row-border-width') && getComputedStyle(this).getPropertyValue('--theme-sig-logging-row-border-style') !== 'none') ? parseInt(getComputedStyle(this).getPropertyValue('--theme-sig-logging-row-border-width'), 10) * 2 : 2;

        // Amount of items/rows loaded from dataprovider (eg. dataservice)
        this.maxClusterNumberRows = Math.round(this.fakescrollcontentheight / this.fakescrollheightrow);
        this.itemscount = Math.round(_content / this.fakescrollheightrow) * this.linemodeFactor;
        // this.fakescrollheightrow = this.fakescrollheightrow * this.linemodeFactor;
    }

    /**
     * An observer method for the titletext property. Gets all the system texts and saves them in the property 'texts'.
     * Initiates the property enumvalueoptions afterwards.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _getSystemTexts() {
        if (this.tmApi) {
            const texts = this.tmApi.getTexts(this._getTextsObject());
            if (this.titletext !== '') texts[this.controlTextList].caption = this.titletext;
            this.texts = texts[this.controlTextList];
            // set enum values
            this.enumvalueoptions = [{
                "id": 0,
                "name": this.texts.textlabelconfignonecolumn,
                "shortname": "none"
            }, {
                "id": 1,
                "name": this.texts.textlabelconfigfirstcolumn,
                "shortname": "first"
            }, {
                "id": 2,
                "name": this.texts.textlabelconfiglastcolumn,
                "shortname": "last"
            }];

        }

    }

    /**
     * Returns object containing list of control texts with default i.e. fallback values.
     * @private
     * @returns {Object} Default texts object.
     * @memberof LasalRuntimeSigLogging
    */
    _getTextsObject() {
        return {
            [this.controlTextList]: {

                textlabeldate: 'date',
                textlabeltime: 'time',
                textlabeldatetime: 'date / time',
                textlabelinformation: 'information',
                textlabelid: 'ID',
                textlabelindex: 'No.',
                textlabelalarmnr: 'AlarmNo.',
                textlabelalarmparam1: 'Param1',

                textlabelicon: '',
                textlabelfrom: 'from',
                textlabelto: 'to',
                textlabelfromto: 'from / to',
                textlabelok: 'OK',
                textlabelcancel: 'Cancel',
                textlabeldetail: 'Detail',
                textlabelconfigicon: 'icon',
                textlabelconfigfilter: 'Event Filter Configuration',
                textlabelconfigcolumn: 'Column Configuration',

                textlabelconfigfield: 'Column',
                textlabelconfigview: 'View',
                textlabelconfigfilterfield: 'Event',
                textlabelconfigfilterview: 'View',
                textlabelconfigfilterexport: 'Export',

                textcounterof: 'of',

                textlabelconfigfirstcolumn: 'First',
                textlabelconfiglastcolumn: 'Last',
                textlabelconfignonecolumn: 'None',

                filterinputsheadertext: '',

                textlabelfilteralarm: 'Alarm',
                textlabelfilteralarmin: 'incoming alarm',
                textlabelfilteralarmout: 'outgoing alarm',
                textlabelfiltermessage: 'Message',
                textlabelfilterwarning: 'Warning',
                textlabelfiltererror: 'Error',
                textlabelfilterlogonoff: 'Log on/off',
                textlabelfilterpoweronoff: 'Power on/off',
                textlabelfilterreceipeload: 'Receipe load',
                textlabelfilterreceipesave: 'Receipe save',
                textlabelfiltersetpoint: 'Set point',
                textlabelfiltersetpointstring: 'Set point string',
                textlabelfilterdelAll: 'Delete all events',
                textlabelfilteruserText: 'User text',
                textlabelfilterstationReconnect: 'station reconnect',
                textlabelallalarm: 'all',
                textlabelfilter: 'filter',

                caption: 'EventJournal'
            }
        }
    }

    /**
     * Initializes the sig-logging component.
     * It is also the observer method of the property applybordereffect.
     * @private
     * @param {Boolean} _newval The new value of the property applybordereffect.
     * @param {Boolean} _oldval The old value of the property applybordereffect.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
     */
    _init(_newval, _oldval) {
        if (this.isdesignmode) this._setDummyData();

        // if ((this.isdesignmode === false && _oldval === null && _newval === null) || this.isdesignmode === true) {
        if (_newval !== null) {
            // get SystemTexts
            this._getSystemTexts();
            // Set Configs
            this._setFilterConfig();
            // this._setColumnsConfig();

            this.$.titlebar.applybordereffect = this.applybordereffect;
        }
        else return;
    }

    /**
     * An observer method that runs every time any of the properties  changes. 
     * @private
     * @param {*} _newval The new value of the changed property.
     * @param {*} _oldval The old value of the changed property.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _initColumns(_newval, _oldval) {
        // console.log(_newval);
        // console.log(this.id, this.showalarmparamcolumn, this.showalarmnrcolumn)
        this._setColumnsConfig();
    }

    /**
     * Waits for the content to be loaded to initialize the component.
     * @private
     * @param {Number} _count The number of already set timeouts; up to 10.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _waitForContent(_count) {
        // wait 4 Copmonent ready
        if (!isNaN(parseInt(getComputedStyle(this).height, 10)) && parseInt(getComputedStyle(this).height, 10) > 150 && this.shadowRoot.getElementById('grid1').style !== undefined) {
            this._calcContent();
            // Workaround: Dataservice wait for journal
            // this._waitForJournal(0);
            this._initEventJournal();
        } else {
            if (_count < 10) {
                this.sigSetTimeout(() => {
                    log.debug('try to determine content height: ' + getComputedStyle(this).height);
                    this._waitForContent(_count + 1);
                }, 500);
            } else {
                // give up
                log.error('Component not loaded!');
                // this._calcContent();
            }
        }
    }

    // _getPropColorOpacity(color) {
    //     if (color === '') return {};
    //     let _colorObj = {};
    //     let colorValues = color
    //         .replace(/rgba?\(/, '')
    //         .replace(/\)/, '')
    //         .replace(/[\s+]/g, '')
    //         .split(',');

    //     if (colorValues && colorValues.length <= 1) {
    //         colorValues = color.slice(1).match(/.{1,2}/g);
    //         _colorObj = {
    //             r: parseInt(colorValues[0], 16),
    //             g: parseInt(colorValues[1], 16),
    //             b: parseInt(colorValues[2], 16),
    //             o: colorValues[3] ? parseInt(colorValues[3], 16) / 255 : 1
    //         };
    //     } else {
    //         _colorObj = {
    //             r: colorValues[0],
    //             g: colorValues[1],
    //             b: colorValues[2],
    //             o: colorValues[3] ? colorValues[3] : 1
    //         };
    //     }
    //     return _colorObj;
    // }

    /**
    * Applies the texts from the controlTextList. This is the event handler method for the Runtime event LANGUAGE_CHG.
    * It is also the observer method for the property titletext.
    * @private
    * @param {Number} majorId The major Id of the Runtime event.
    * @param {Number} minorId The minor Id of the Runtime event.
    * @param {Object} msg The payload of the Runtime event.
    * @returns {Undefined} Undefined
    * @memberof LasalRuntimeSigLogging
    */
    _switchLang(majorId, minorId, msg) {
        this._getSystemTexts();
        // this._init();
        this._setColumnsConfig();
        this._setFilterConfig();
    }

    /**
     * Sets the filterconfig property.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _setFilterConfig() {
        let _logonFilter = false;
        let _alarmFilter = false;
        let _powerFilter = false;
        let _allFilter = false;
        let _allFilterExport = true;

        if (this.itemfilter) {
            switch (this.itemfilter) {
                case 'alarm':
                    _alarmFilter = true;
                    _allFilter = false;
                    break;
                case 'power on/off':
                    _powerFilter = true;
                    _allFilter = false;
                    break;
                case 'login/logout':
                    _logonFilter = true;
                    _allFilter = false;
                    break;
                default:
                    _allFilter = true;
                    break;
            }
        }
        // EventJournal Filterconfig
        this.filterconfig = [
            {
                key: 'cat1',
                title: this.texts.textlabelfiltererror,
                value: 'ERROR',
                visible: _allFilter,
                active: _allFilter,
                export: _allFilterExport
            },
            {
                key: 'cat2',
                title: this.texts.textlabelfilterwarning,
                value: 'WARNING',
                visible: _allFilter,
                active: _allFilter,
                export: _allFilterExport
            },
            {
                key: 'cat3',
                title: this.texts.textlabelfiltermessage,
                value: 'MESSAGE',
                visible: _allFilter,
                active: _allFilter,
                export: _allFilterExport
            },
            {
                key: 'cat6',
                title: this.texts.textlabelfilteralarm,
                value: 'alarm',
                visible: _allFilter || _alarmFilter,
                active: _allFilter || _alarmFilter,
                disabled: _alarmFilter,
                export: _allFilterExport
            },
            {
                key: 'cat7',
                title: this.texts.textlabelfilterpoweronoff,
                value: 'power on/off',
                visible: _allFilter || _powerFilter,
                active: _allFilter || _powerFilter,
                disabled: _powerFilter,
                export: _allFilterExport
            },
            {
                key: 'cat8',
                title: this.texts.textlabelfilterlogonoff,
                value: 'login/logout',
                visible: _allFilter || _logonFilter,
                active: _allFilter || _logonFilter,
                disabled: _logonFilter,
                export: _allFilterExport
            },
            {
                key: 'cat9',
                title: this.texts.textlabelfilterreceipeload,
                value: 'RECIPE_LOAD',
                visible: _allFilter,
                active: _allFilter,
                export: _allFilterExport
            },
            {
                key: 'cat10',
                title: this.texts.textlabelfilterreceipesave,
                value: 'RECIPE_SAVE',
                visible: _allFilter,
                active: _allFilter,
                export: _allFilterExport
            },
            {
                key: 'cat4',
                title: this.texts.textlabelfiltersetpoint,
                value: 'SET_POINT',
                visible: _allFilter,
                active: _allFilter,
                export: _allFilterExport
            },
            {
                key: 'cat5',
                title: this.texts.textlabelfiltersetpointstring,
                value: 'SET_POINT_STR',
                visible: _allFilter,
                active: _allFilter,
                export: _allFilterExport
            },
            {
                key: 'cat11',
                title: this.texts.textlabelfilterdelAll,
                value: 'DEL_ALL',
                visible: _allFilter,
                active: _allFilter,
                export: _allFilterExport
            },
            {
                key: 'cat12',
                title: this.texts.textlabelfilteruserText,
                value: 'USER_TEXT',
                visible: _allFilter,
                active: _allFilter,
                export: _allFilterExport
            },
            {
                key: 'cat13',
                title: this.texts.textlabelfilterstationReconnect,
                value: 'STATION_RECONNECT',
                visible: _allFilter,
                active: _allFilter,
                export: _allFilterExport
            }
        ]

        // Overload Config due Custom Config
        if (!this.isdesignmode) {
            const _filterconfig = this.getLocalStorageFiltersConfig();
            if (_filterconfig && _allFilter) {
                JSON.parse(_filterconfig).map((_filter, index) => {
                    if (this.filterconfig[index].key === _filter.key) {
                        // this.filterconfig[index].visible = _filter.visible;
                        this.filterconfig[index].active = _filter.active;
                        this.filterconfig[index].export = _filter.export;
                    }
                })
            }
        }

    }

    /**
     * Updates the property columns i.e. sets configuration for columns in the listview.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _setColumnsConfig() {
        // EventJournal Datacolumns
        /* Layout 2 : singleline Alarmview */
        this._setAlarmMode(this.itemfilter);
        // console.log(this.alarmmode, this.itemfilter)
        const _columnsconfig = JSON.parse(this.getLocalStorageColumnsConfig());

        if (this.alarmmode === 'singleline') {
            this.columns = [
                {
                    key: 'action1',
                    title: this.texts.textlabelicon,
                    type: 'icon',
                    filtervalue: '',
                    sortable: false,
                    sorttype: '',
                    iconclass: 'alerticon',
                    visible: this.showiconcolumn === 'first' ? true : false,
                    configurable: true
                }, {
                    key: 'idxcnt',
                    title: this.texts.textlabelindex,
                    type: 'decnumber',
                    keyboardtype: 'numeric',
                    keyboardlimitlow: "0",
                    keyboardlimithigh: "2147483647",
                    filtername: '_filter_No',
                    filtervalue: '',
                    sortable: true,
                    sorttype: '',
                    visible: this.showindexcolumn,
                    configurable: true
                }, {
                    key: 'id',
                    title: this.texts.textlabelid,
                    type: 'hexnumber',
                    keyboardtype: 'numeric',
                    keyboardlimitlow: "0",
                    keyboardlimithigh: "2147483647",
                    filtername: '_filter_Id',
                    filtervalue: '',
                    sortable: true,
                    sorttype: '',
                    visible: this.showidcolumn,
                    configurable: true
                }, {
                    key: 'alarmnr',
                    title: this.texts.textlabelalarmnr,
                    type: 'hexnumber',
                    keyboardtype: 'numeric',
                    keyboardlimitlow: "0",
                    keyboardlimithigh: "2147483647",
                    filtername: '_filter_Alarmnr',
                    filtervalue: '',
                    sortable: true,
                    sorttype: '',
                    visible: this.showalarmnrcolumn,
                    configurable: true
                }, {
                    key: 'param1',
                    title: this.texts.textlabelalarmparam1,
                    type: 'hexnumber',
                    keyboardtype: 'numeric',
                    keyboardlimitlow: "0",
                    keyboardlimithigh: "2147483647",
                    filtername: '_filter_Param1',
                    filtervalue: '',
                    sortable: true,
                    sorttype: '',
                    visible: this.showalarmparamcolumn,
                    configurable: true
                }, {
                    key: 'datetime',
                    title: this.texts.textlabelfilteralarmin,
                    type: 'dateandtime',
                    filtername: '_filter_DateTime1',
                    filtervalue: 'dummy',
                    filtervalue1: '',
                    filtervalue2: '',
                    filtervalue3: '',
                    filtervalue4: '',
                    filterformat: 'datetime',
                    sortable: true,
                    sorttype: 'desc',
                    visible: this.showdatecolumn,
                    configurable: true
                }, {
                    key: 'datetime1',
                    title: this.texts.textlabelfilteralarmout,
                    type: 'dateandtime',
                    filtername: '_filter_DateTime2',
                    filtervalue: 'dummy',
                    filtervalue1: '',
                    filtervalue2: '',
                    filtervalue3: '',
                    filtervalue4: '',
                    filterformat: 'datetime',
                    sortable: true,
                    sorttype: '',
                    visible: this.showdatecolumn,
                    configurable: true
                }, {
                    key: 'data',
                    title: this.texts.textlabelinformation,
                    type: 'string',
                    filtername: '_filter_Info1',
                    filtervalue: '',
                    filterformat: 'text',
                    keyboardtype: 'text',
                    sortable: true,
                    sorttype: '',
                    visible: true,
                    configurable: true
                }, {
                    key: 'action2',
                    title: this.texts.textlabelicon,
                    type: 'icon',
                    filtervalue: '',
                    sortable: false,
                    sorttype: '',
                    iconclass: 'alerticon',
                    visible: this.showiconcolumn === 'last' ? true : false,
                    configurable: false
                }];

        } else {
            this.columns = [
                {
                    key: 'action1',
                    title: this.texts.textlabelicon,
                    type: 'icon',
                    filtervalue: '',
                    sortable: false,
                    sorttype: '',
                    iconclass: 'alerticon',
                    visible: this.showiconcolumn === 'first' ? true : false,
                    configurable: true
                }, {
                    key: 'idxcnt',
                    title: this.texts.textlabelindex,
                    type: 'decnumber',
                    keyboardtype: 'numeric',
                    keyboardlimitlow: "0",
                    keyboardlimithigh: "2147483647",
                    filtername: '_filter_No',
                    filtervalue: '',
                    sortable: true,
                    sorttype: '',
                    visible: this.showindexcolumn,
                    configurable: true
                }, {
                    key: 'id',
                    title: this.texts.textlabelid,
                    type: 'hexnumber',
                    keyboardtype: 'numeric',
                    keyboardlimitlow: "0",
                    keyboardlimithigh: "2147483647",
                    filtername: '_filter_Id',
                    filtervalue: '',
                    sortable: true,
                    sorttype: '',
                    visible: this.showidcolumn,
                    configurable: true
                }, {
                    key: 'alarmnr',
                    title: this.texts.textlabelalarmnr,
                    type: 'hexnumber',
                    keyboardtype: 'numeric',
                    keyboardlimitlow: "0",
                    keyboardlimithigh: "2147483647",
                    filtername: '_filter_Alarmnr',
                    filtervalue: '',
                    sortable: true,
                    sorttype: '',
                    visible: this.showalarmnrcolumn,
                    configurable: true
                }, {
                    key: 'param1',
                    title: this.texts.textlabelalarmparam1,
                    type: 'hexnumber',
                    keyboardtype: 'numeric',
                    keyboardlimitlow: "0",
                    keyboardlimithigh: "2147483647",
                    filtername: '_filter_Param1',
                    filtervalue: '',
                    sortable: true,
                    sorttype: '',
                    visible: this.showalarmparamcolumn,
                    configurable: true
                }, {
                    key: 'datetime',
                    title: this.texts.textlabeldate + '/' + this.texts.textlabeltime,
                    type: 'dateandtime',

                    filtername: '_filter_DateTime',
                    filtervalue: 'dummy',
                    filtervalue1: '',
                    filtervalue2: '',
                    filtervalue3: '',
                    filtervalue4: '',
                    filterformat: 'datetime',
                    sortable: true,
                    sorttype: 'desc',
                    visible: this.showdatecolumn,
                    configurable: true
                }, {
                    key: 'data',
                    title: this.texts.textlabelinformation,
                    type: 'string',
                    filtername: '_filter_Info',
                    filtervalue: '',
                    filterformat: 'text',
                    keyboardtype: 'text',
                    sortable: true,
                    sorttype: '',
                    visible: true,
                    configurable: true
                }, {
                    key: 'action2',
                    title: this.texts.textlabelicon,
                    type: 'icon',
                    filtervalue: '',
                    sortable: false,
                    sorttype: '',
                    iconclass: 'alerticon',
                    visible: this.showiconcolumn === 'last' ? true : false,
                    configurable: false
                }

            ];
        }
        // Overload Config due Custom Config
        if (!this.isdesignmode) {

            if (_columnsconfig && Array.isArray(_columnsconfig) && Array.isArray(this.columns)) {
                // if (_columnsconfig.length === this.columns.length) {
                // this.showiconcolumn = 'none';
                this.showiconcolumntext = this.texts.textlabelconfignonecolumn;
                _columnsconfig.map((_column, index) => {
                    try {
                        if (this.columns[index].key === _column.key) {
                            this.columns[index].visible = _column.visible;
                            this.columns[index].sorttype = _column.sorttype;
                            this.columns[index].filtervalue = _column.filtervalue;
                            if (_column.filtervalue1 !== undefined) this.columns[index].filtervalue1 = _column.filtervalue1;
                            if (_column.filtervalue2 !== undefined) this.columns[index].filtervalue2 = _column.filtervalue2;
                            if (_column.filtervalue3 !== undefined) this.columns[index].filtervalue3 = _column.filtervalue3;
                            if (_column.filtervalue4 !== undefined) this.columns[index].filtervalue4 = _column.filtervalue4;
                        }
                        if (this.columns[index].key === 'action1') {
                            if (this.columns[index].visible === true) {
                                this.showiconcolumn = 'first';
                                this.showiconcolumntext = this.texts.textlabelconfigfirstcolumn;
                            }
                        }
                        else if (this.columns[index].key === 'action2') {
                            if (this.columns[index].visible === true) {
                                this.showiconcolumn = 'last';
                                this.showiconcolumntext = this.texts.textlabelconfiglastcolumn;
                            }
                        }
                    } catch (error) {
                        // log.error(error);
                    }
                })
                // }
            }
        }
    }

    /**
     * Builds sort. 
     * @private
     * @returns {Object} Object describing the sort.
     * @memberof LasalRuntimeSigLogging
    */
    _buildSort() {
        if (this.columns) {
            if (this.multisort === true) {
                const sort = [];
                for (let _column of this.columns) {
                    const _sort = {};
                    if (_column.sorttype !== '' && _column.sorttype !== 'none' && _column.sortable === true) {
                        _sort.key = _column.key;
                        _sort.sorttype = _column.sorttype;
                        sort.push(_sort);
                    }
                }
                return sort;
            } else {
                const sort = {};
                for (let _column of this.columns) {
                    if (_column.sorttype !== '' && _column.sorttype !== 'none' && _column.sortable === true) {
                        sort.key = _column.key;
                        sort.sorttype = _column.sorttype;
                    }
                }
                return sort;
            }
        } else return null;
    }

    /**
     * Creates all configuration filters and filters set in sig-control-input forms.
     * @private
     * @param {Object} [obj=null] Object containing data given in a sig-control-input form.
     * @returns {Object} List of all active filters.
     * @memberof LasalRuntimeSigLogging
     */
    _buildFilter(obj = null) {
        const filters = [];
        // Set (ALL)Config Filters
        const _configFilters = [];
        if (this.filterconfig && Array.isArray(this.filterconfig)) {
            this.filterconfig.map((_filter) => {
                // Set Filter by Config Menu {type: 'config-changed', fieldKey: 'cat1', key: 'id', value: 'alarm', set: true/false}
                if (obj && obj.type === 'config-changed' && _filter.key === obj.fieldKey) {
                    if (obj.value === "export") _filter.export = obj.set;
                    else _filter.active = obj.set;
                }
                if (_filter.active === true) _configFilters.push(this.parseId(_filter.value));
            });
            filters.push({ key: "ids", value: _configFilters });
        }
        // Set Filters on Inputs
        if (this.columns) {
            for (let _column of this.columns) {
                // Set Filters by input value (Id, Data,...)
                if (obj && obj.type === 'value-changed') {
                    const _key = obj.model.column.key;
                    const _value = obj.detail.value;
                    if (_column.key === _key) _column.filtervalue = _value;
                };

                // Builds all Filters by the column object
                const _filter = {};
                if (_column.filtervalue !== '' && _column.filtervalue !== undefined) {
                    if (_column.key === 'id' && _column.filtervalue !== 'none') {
                        _filter.value = this.parseId(_column.filtervalue);
                    }
                    else if (_column.type === 'string') _filter.value = _column.filtervalue;
                    else if (_column.type === 'dateandtime' && (_column.filtervalue1 !== '' || _column.filtervalue2 !== '' || _column.filtervalue3 !== '' || _column.filtervalue4 !== '')) {
                        if (_column.filtervalue1 !== null || _column.filtervalue2 !== null || _column.filtervalue3 !== null || _column.filtervalue4 !== null)
                            _filter.value = {
                                startdate: _column.filtervalue1,
                                starttime: _column.filtervalue2,
                                enddate: _column.filtervalue3,
                                endtime: _column.filtervalue4,
                            };
                        else _filter.value = null;
                        // Set label & Labelvalue (if filtered)
                        const _filterLabelId = 'filter_label' + _column.filtername;
                        const _filterLabelElement = this.shadowRoot.getElementById(_filterLabelId);
                        const _filterLabelValueId = 'filter_label_value' + _column.filtername;
                        const _filterLabelValueElement = this.shadowRoot.getElementById(_filterLabelValueId);

                        if (_filterLabelElement) {
                            if (_column.type === 'dateandtime' && (_column.filtervalue1 !== null || _column.filtervalue2 !== null || _column.filtervalue3 !== null || _column.filtervalue4 !== null)) {
                                _filterLabelElement.style.setProperty('display', 'none');
                                _filterLabelValueElement.innerHTML = _column.filtervalue1 === null ? '' : _column.filtervalue1;
                                _filterLabelValueElement.innerHTML += ' ';
                                _filterLabelValueElement.innerHTML += _column.filtervalue2 === null ? '' : _column.filtervalue2;
                                _filterLabelValueElement.innerHTML += ' - <br />';
                                _filterLabelValueElement.innerHTML += _column.filtervalue3 === null ? '' : _column.filtervalue3;
                                _filterLabelValueElement.innerHTML += ' ';
                                _filterLabelValueElement.innerHTML += _column.filtervalue4 === null ? '' : _column.filtervalue4;
                            } else {
                                _filterLabelElement.style.setProperty('display', 'block');
                                _filterLabelValueElement.innerHTML = "";
                            }
                        } else {
                            // console.log(_filterLabelId)
                        }
                    }

                    else if (_column.type === 'decnumber' && !isNaN(parseInt(_column.filtervalue, 10))) _filter.value = parseInt(_column.filtervalue, 10);
                    else if (_column.type === 'hexnumber' && !isNaN(parseInt(_column.filtervalue, 10))) _filter.value = parseInt(_column.filtervalue, 10);

                    if (_filter.value !== null && _filter.value !== undefined) {
                        _filter.key = _column.key;
                        filters.push(_filter);
                    }
                }
            }
        }

        if (filters.length > 1) this.filterset = true;
        else this.filterset = false;
        return filters;
    }

    /**
     * Sets the preview data for the listview. Designmode only.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _setDummyData() {

        this.items = [
            {
                alarmnr: null,
                alertstate: null,
                data: "Demomessage",
                datetime: "11.11.1111 11:11:11",
                datetime1: "11.12.1212 12:12:12",
                detail: "Demomessage Detail",
                id: 65528,
                idxcnt: 1,
                isselected: "",
                param1: ""
            },
            {
                alarmnr: 65533,
                alertstate: 0,
                data: "Demoalarm 1 (LO)",
                datetime: "11.11.1111 11:11:11",
                datetime1: "11.12.1212 12:12:12",
                detail: "Demoalarm LO 1 Detail",
                id: 12345,
                idxcnt: 2,
                isselected: "",
                param1: 1
            },
            {
                alarmnr: 65533,
                alertstate: 1,
                data: "Demoalarm 2 (HI)",
                datetime: "11.11.1111 11:11:11",
                datetime1: "11.12.1212 12:12:12",
                detail: "Demoalarm HI 2 Detail",
                id: 12345,
                idxcnt: 3,
                isselected: "",
                param1: 2
            },

            {
                alarmnr: 65533,
                alertstate: 0,
                data: "Demoalarm 1 (LO) selected",
                datetime: "11.11.1111 11:11:11",
                datetime1: "11.12.1212 12:12:12",
                detail: "Demoalarm 1 Detail",
                id: 12345,
                idxcnt: 12,
                isselected: "selected",
                param1: 1
            },
            {
                alarmnr: 65533,
                alertstate: 1,
                data: "Demoalarm 2 (HI) selected",
                datetime: "11.11.1111 11:11:11",
                datetime1: "11.12.1212 12:12:12",
                detail: "Demoalarm 2 Detail",
                id: 12345,
                idxcnt: 13,
                isselected: "selected",
                param1: 2
            },
            {
                alarmnr: 65533,
                alertstate: 1000,
                data: "Demoalarm 3 (LO) quit",
                datetime: "11.11.1111 11:11:11",
                datetime1: "11.12.1212 12:12:12",
                detail: "Demoalarm 3 (LO) Detail",
                id: 12345,
                idxcnt: 4,
                isselected: "",
                param1: 3
            },
            {
                alarmnr: 65533,
                alertstate: 1001,
                data: "Demoalarm 4 (HI) quit",
                datetime: "11.11.1111 11:11:11",
                datetime1: "11.12.1212 12:12:12",
                detail: "Demoalarm 4 (HI) Detail",
                id: 12345,
                idxcnt: 5,
                isselected: "",
                param1: 4
            },
            {
                alarmnr: null,
                alertstate: null,
                data: "Demomessage (selected)",
                datetime: "11.11.1111 11:11:11",
                datetime1: "11.12.1212 12:12:12",
                detail: "Demomessage Detail (selected)",
                id: 65528,
                idxcnt: 121,
                isselected: "selected",
                param1: ""
            },
            {
                alarmnr: null,
                alertstate: null,
                data: "Demomessage",
                datetime: "11.11.1111 11:11:11",
                datetime1: "11.12.1212 12:12:12",
                detail: "Demomessage Detail",
                id: 65528,
                idxcnt: 1211,
                isselected: "",
                param1: ""
            },
            {
                alarmnr: null,
                alertstate: null,
                data: "Demomessage",
                datetime: "11.11.1111 11:11:11",
                datetime1: "11.12.1212 12:12:12",
                detail: "Demomessage Detail",
                id: 65528,
                idxcnt: 12112,
                isselected: "",
                param1: ""
            },
            {
                alarmnr: null,
                alertstate: null,
                data: "Demomessage",
                datetime: "11.11.1111 11:11:11",
                datetime1: "11.12.1212 12:12:12",
                detail: "Demomessage Detail",
                id: 65528,
                idxcnt: 12113,
                isselected: "",
                param1: ""
            },
            {
                alarmnr: null,
                alertstate: null,
                data: "Demomessage",
                datetime: "11.11.1111 11:11:11",
                datetime1: "11.12.1212 12:12:12",
                detail: "Demomessage Detail",
                id: 65528,
                idxcnt: 12113,
                isselected: "",
                param1: ""
            }
        ];
        this.maxitems = 9999;
    }

    /**
     * Initializes the component.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _initEventJournal() {
        log.debug('[sig-logging._initEventJournal]');

        this.filters = this._buildFilter();
        this.sort = this._buildSort();

        // debounce event (100ms) fired for reload event journal
        if (!this.isdesignmode) {
            this.sigAddEventListener('EVENTJOURNAL_MGR_STATE_CHG', () => {
                log.debug('evJournal partial loading');
                this._updateDebouncer = SigPolymer.debouncer.debounce(
                    this._updateDebouncer, // initially undefined
                    SigPolymer.timeOut.after(100),
                    () => {
                        log.debug('evJournal loaded');
                        this._getEventJournalEntries();
                    }
                );
            }, 'runtimeEvent');

        }
        // init first
        if (!this.isdesignmode) {
            this.isscrolling = true;
            this._getEventJournalEntries();
            this.isscrolling = false;
            this._applyProps();
        } else {
            this._applyProps();
        }
    }

    /**
     * Gets all Event Journal entries from the Event Journal API and updates the property items afterwards.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _getEventJournalEntries() {
        if (!this.isdesignmode && this.sigApiEventJournal !== undefined) {
            this.recordcount = this.offset + 1;
            let _offset = this.offset * this.linemodeFactor;
            let evJournal = [];
            if (this.itemfilter === 'alarm') {
                evJournal = this.sigApiEventJournal.getAlarmEntries(_offset, this.itemscount, this.filters, this.sort, this.alarmmode === 'multiline');
            } else {
                evJournal = this.sigApiEventJournal.getEventJournalEntries(_offset, this.itemscount, this.filters, this.sort);
            }
            // log.dir(evJournal);
            this._updateValue(evJournal);
        }
    }

    /**
     * Updates the property items with Event Journal entry/ies specified in the parameter message.
     * @private
     * @param {Array} message An array of Event Journal entry/ies.
     * @returns {Undefined} Undefined.
     * @memberof LasalRuntimeSigLogging
    */
    _updateValue(message) {
        log.debug('_updateValue');
        const items = [];
        let item1 = null;
        let item = null;
        let strDateTime = '';
        let id = '0xfffe';
        let _alarmnr = '';
        let _param1 = '';

        let _isselected = false;
        let _singleLineCount = 0;
        let entries = message.entries();

        for (const [index, element] of entries) {

            // if (index === 0) element = null; // just 4 debug only!!!

            if (element !== null) {
                strDateTime = this.utils.getSigDateTimeAsString(element.getDate(), element.getTime());
                id = element.getId();
                const alertstate = this._setAlertState(element);
                _isselected = this.selectedItems.filter((item) => element.getIdxCnt() === item).length > 0 ? 'selected' : '';
                if (this.isAlarm(element.id)) {
                    _alarmnr = element.getAlarmNr();
                    _param1 = element.getParam1();
                } else {
                    _alarmnr = '';
                    _param1 = '';
                }

                item = {
                    idxcnt: element.getIdxCnt(),
                    id: id,
                    alarmnr: _alarmnr,
                    param1: _param1,
                    datetime: strDateTime,
                    data: element.getDataAsStr(),
                    detail: element.getDataAsStr(),
                    alertstate: alertstate,
                    isselected: _isselected
                }

            } else {
                item = _emptyItem;
                strDateTime = '';
            }

            if (this.alarmmode === 'singleline') {
                _singleLineCount += 1;
                if (_singleLineCount === 1) {
                    item1 = Object.assign({}, item);
                } else {
                    if (item1 === null) {
                        item1 = {};
                    }
                    // put date, state, id & data (going alert) into item & push the item
                    item1.datetime1 = strDateTime;

                    if (item1.idxcnt === '' && element !== null) {
                        item1.idxcnt = element.getIdxCnt();
                        item1.data = element.getDataAsStr();
                        // item1.alertstate = this._setAlertState(element);
                        item1.id = element.getId();
                        item1.alarmnr = element.getAlarmNr();
                        item1.param1 = element.getParam1();
                    }
                    if (element) item1.alertstate = this._setAlertState(element);
                    // if (!item1.id) item1.id = element.getId();
                    // console.log(element.state, item1.state, item1.alertstate)
                    items.push(item1);
                    _singleLineCount = 0;
                }

            } else {
                if (item !== _emptyItem) {
                    items.push(item);
                }
            }

        }
        // Last resort (push the item in singleline mode, if no other element follows - should not occur!)
        if (this.alarmmode === 'singleline' && _singleLineCount === 1) items.push(item1);

        this.items = items;

        if (this.itemfilter === 'alarm') {
            this.maxitems = this.sigApiEventJournal.getAlarmListLength(this.alarmmode !== 'singleline');
        } else {
            this.maxitems = this.sigApiEventJournal.getJournalListLength();
        }
        this._updateScroller();
    }

    /**
     * Updates the alert state of a specific Event Journal entry.
     * @private
     * @param {EventJournalEntry} [element=null] Specific Event Journal entry.
     * @returns {Object|Null} Alertstate object or Null if the given element is Null.
     * @memberof LasalRuntimeSigLogging
    */
    _setAlertState(element = null) {
        let alertstate = null;
        if (!element) return alertstate;
        if (element.id && this.isAlarm(element.id) === true) {
            if (element.state !== undefined) {
                alertstate = element.state;
                if (element.quit !== undefined) {
                    if (element.quit === true) {
                        alertstate += 1000;
                    }
                }
            }
        }
        return alertstate;
    }

    /**
     * Obsolete method, might be removed during further development.
     * @private
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
    */
    _applyProps() {
        const _enumitems = (this.$.columnconfig.querySelectorAll('sig-control-enum'));
        if (_enumitems) {
            /* [..._enumitems].map((_item) => {
                 _item.style.setProperty('--theme-sig-control-enum-list-color', this.style.getPropertyValue('--theme-sig-logging-overlay-enum-color') ? this.style.getPropertyValue('--theme-sig-logging-overlay-enum-color') : 'rgba(8, 8, 8, 1)');
                 _item.style.setProperty('--theme-sig-control-enum-list-background-color', this.style.getPropertyValue('--theme-sig-logging-overlay-enum-background-color') ? this.style.getPropertyValue('--theme-sig-logging-overlay-enum-background-color') : 'rgba(130, 213, 213, 1)');
 
                 _item.style.setProperty('--theme-sig-control-enum-list-border-width', this.style.getPropertyValue('--theme-sig-logging-overlay-element-border-width') ? this.style.getPropertyValue('--theme-sig-logging-overlay-element-border-width') : '1px');
                 _item.style.setProperty('--theme-sig-control-enum-list-border-color', this.style.getPropertyValue('--theme-sig-logging-overlay-element-border-color') ? this.style.getPropertyValue('--theme-sig-logging-overlay-element-border-color') : 'rgba(204, 204, 204, 1)');
                 _item.style.setProperty('--theme-sig-control-enum-pressed-border-color', this.style.getPropertyValue('--theme-sig-logging-overlay-element-border-color') ? this.style.getPropertyValue('--theme-sig-logging-overlay-element-border-color') : 'rgba(204, 204, 204, 1)');
                 _item.style.setProperty('--theme-sig-control-enum-list-border-style', this.style.getPropertyValue('--theme-sig-logging-overlay-element-border-style') ? this.style.getPropertyValue('--theme-sig-logging-overlay-element-border-style') : 'solid');
 
                 // _item.style.setProperty('--theme-sig-control-enum-list-border-radius', this.style.getPropertyValue('--theme-sig-logging-overlay-element-border-radius') ? this.style.getPropertyValue('--theme-sig-logging-overlay-element-border-radius') : '0px');
 
                 _item.style.setProperty('--theme-sig-control-enum-list-option-background-color-odd', this.style.getPropertyValue('--theme-sig-logging-overlay-enum-background-color') ? this.style.getPropertyValue('--theme-sig-logging-overlay-enum-background-color') : 'rgba(130, 213, 213, 1)');
                 _item.style.setProperty('--theme-sig-control-enum-list-option-background-color-even', this.style.getPropertyValue('--theme-sig-logging-overlay-enum-background-color') ? this.style.getPropertyValue('--theme-sig-logging-overlay-enum-background-color') : 'rgba(130, 213, 213, 1)');
 
                 _item.style.setProperty('--theme-sig-control-enum-list-option-color-odd', this.style.getPropertyValue('--theme-sig-logging-overlay-enum-color') ? this.style.getPropertyValue('--theme-sig-logging-overlay-enum-color') : 'rgba(8, 8, 8, 1)');
                 _item.style.setProperty('--theme-sig-control-enum-list-option-color-even', this.style.getPropertyValue('--theme-sig-logging-overlay-enum-color') ? this.style.getPropertyValue('--theme-sig-logging-overlay-enum-color') : 'rgba(8, 8, 8, 1)');
 
                 _item.style.setProperty('--theme-sig-control-enum-list-option-background-color-hover', this.style.getPropertyValue('--theme-sig-logging-overlay-enum-selected-background-color') ? this.style.getPropertyValue('--theme-sig-logging-overlay-enum-selected-background-color') : 'rgba(215, 215, 215, 1)');
                 _item.style.setProperty('--theme-sig-control-enum-list-option-color-hover', this.style.getPropertyValue('--theme-sig-logging-overlay-enum-selected-color') ? this.style.getPropertyValue('--theme-sig-logging-overlay-enum-selected-color') : 'rgba(42, 42, 42, 1)');
 
                 _item.style.setProperty('--theme-sig-control-enum-list-option-background-color-selected', this.style.getPropertyValue('--theme-sig-logging-overlay-enum-selected-background-color') ? this.style.getPropertyValue('--theme-sig-logging-overlay-enum-selected-background-color') : 'rgba(215, 215, 215, 1)');
                 _item.style.setProperty('--theme-sig-control-enum-list-option-color-selected', this.style.getPropertyValue('--theme-sig-logging-overlay-enum-selected-color') ? this.style.getPropertyValue('--theme-sig-logging-overlay-enum-selected-color') : 'rgba(42, 42, 42, 1)');
 
                 const _enumStyles = getComputedStyle(this.$.configmenue);
                 if (_enumStyles.fontFamily) _item.style.setProperty('--theme-sig-control-enum-list-font-family', _enumStyles.fontFamily);
                 if (_enumStyles.fontSize) _item.style.setProperty('--theme-sig-control-enum-list-font-size', _enumStyles.fontSize);
                 if (_enumStyles.fontWeight) _item.style.setProperty('--theme-sig-control-enum-list-font-weight', _enumStyles.fontWeight);
                 if (_enumStyles.fontStyle) _item.style.setProperty('--theme-sig-control-enum-list-font-style', _enumStyles.fontStyle);
             })*/
        }

    }

    /**
     * This callback runs when the component is connected in the DOM.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
     */
    connectedCallback() {
        super.connectedCallback();
        // console.log('connected');

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

            this.sigAddEventListener('INT_DOWNLOAD_PRJ_START', (maId, miId, message) => {
                this.clearLocalStorage(message);
            }, 'runtimeEvent');

            this.sigAddEventListener('INT_DOWNLOAD_PRJ_END', (maId, miId, message) => {
                this.clearLocalStorage(message);
            }, 'runtimeEvent');
        }
    }

    /**
     * This method converts a specified record type from type string into a number supporting hex and decimal format.
     * For predefined record types given as strings e.g. 'ERROR', 'WARNING', 'MESSAGE' predefined number values are returned.
     * @param {String} filtervalue The type Id of the logging record, 
     * @returns {Number} Record Id as number. 0 in case of error.
     * @memberof LasalRuntimeSigLogging
    */
    parseId(filtervalue) {
        // Implemented in DS 
        /*
        export const EVENTJOURNAL_SET_POINT = 0xFFFD;
        export const EVENTJOURNAL_MESSAGE = 0xFFFC;
        export const EVENTJOURNAL_WARNING = 0xFFFB;
        export const EVENTJOURNAL_ERROR = 0xFFFA;
        export const EVENTJOURNAL_LOG_IN_OUT = 0xFFF9;
        export const EVENTJOURNAL_POWER_ON_OFF = 0xFFF8;
        export const EVENTJOURNAL_DEL_ALL = 0xFFF7;
        export const EVENTJOURNAL_SET_POINT_STR = 0xFFF6;
        export const EVENTJOURNAL_RECIPE_LOAD = 0xFFF5;
        export const EVENTJOURNAL_RECIPE_SAVE = 0xFFF4; 
        export const EVENTJOURNAL_USER_TEXT = 0xFFF3;
        export const EVENTJOURNAL_STATION_RECONNECT = 0xFFF2;
        */
        switch (filtervalue) {
            case 'ERROR':
                return 0xFFFA;
            case 'WARNING':
                return 0xFFFB;
            case 'MESSAGE':
                return 0xFFFC;
            case 'alarm':
                return 0xfffe;
            case 'login/logout':
                return 0xfff9;
            case 'power on/off':
                return 0xfff8;
            case 'RECIPE_SAVE':
                return 0xFFF4;
            case 'RECIPE_LOAD':
                return 0xFFF5;
            case 'SET_POINT_STR':
                return 0xFFF6;
            case 'SET_POINT':
                return 0xFFFD;
            case 'DEL_ALL':
                return 0xFFF7;
            case 'USER_TEXT':
                return 0xFFF3;
            case 'STATION_RECONNECT':
                return 0xFFF2;
            default:
                // return 0x0000;
                let _value = filtervalue;
                const regexpHex = /^0x[0-9a-fA-F]+$/;
                const regexpDec = /^[0-9]+$/;
                if (regexpHex.test(filtervalue)) _value = parseInt(filtervalue, 16);
                else if (regexpDec.test(filtervalue)) _value = parseInt(filtervalue, 10);
                return isNaN(_value) ? 0x0000 : _value;
        }
    }

    /**
     * Returns Boolean true if the specified row is an alarm.
     * @private
     * @param {Number} id The row ID.
     * @returns {Boolean} True if the specified row is an alarm otherwise false.
     * @memberof LasalRuntimeSigLogging
    */
    isAlarm(id) {
        return (id === 0xfffe);
    }

    // DEBUG ONLY START
    _filtersChanged(newvalue, oldvalue) {
        // console.dir(this.filters);
        // console.log(newvalue, oldvalue)
    }
    _itemsChanged(newvalue, oldvalue) {
        // console.dir(this.items);
    }
    _columnsChanged(newvalue, oldvalue) {
        // console.dir(newvalue);
    }
    // DEBUG ONLY END

    /**
     * This callback is called after property values are set and local DOM is initialized.
     * @returns {Undefined} Undefined
     * @memberof LasalRuntimeSigLogging
     */
    ready() {
        super.ready();

        SigPolymer.beforeNextRender(this, () => {
            this._init(null, null);
        });

        SigPolymer.afterNextRender(this, function () {
            if (!this.isdesignmode) {
                //
                // Update event log entries
                //
                this.sigAddEventListener('INT_SET_SCROLL', (maID, miID, message) => {
                    this._scrolled(Math.round(message));
                }, 'runtimeEvent');

                this._updateHeights();
            }

            // console.log('afterNextRender');
            // this.$.titlebar.applybordereffect = this.applybordereffect;
            // this.$.iconselect.valueoptions = this.enumvalueoptions;

            this._waitForContent(0);

            // this._applyProps();
            this.isloaded = true;

            //Directly pass the right context to enum
            const iconEnum = this.shadowRoot.querySelector("#iconselect");
            if (iconEnum) iconEnum.context = this.context;
            
            
            log.info('[Polymer] LoggingJournal rendering complete');
        });

    }

}

customElements.define(LasalRuntimeSigLogging.is, LasalRuntimeSigLogging);