import { BaseWebComponent } from '@ema/core';
const props = ['label', 'foo', 'foo2', 'test', 'data-json'];
window.customElements.define('web-comp', class extends BaseWebComponent {
    constructor() {
        super();
        this.defineProps(props);
        this.styles = `:host .content { 
            background: #ccc;
            padding: 15px;
        }`;
    }
    render() {
        return `
          webcomponent<br> 
          tag: web-comp<br>
          props: ['label','foo','foo2','test','data-json']<br>
          method: start<br>
          ${this['label']}<br>
          ${this['test']}
        `;
    }
    attributeChangedCallback(name, oldVal, newVal) {
        this.dispatch('change', { prop: name, oldVal: oldVal, newVal: newVal });
        this.preRender();
    }
    defineProps(props) {
        props.forEach((propName) => {
            let get, set;
            if (propName === 'test') {
                get = () => {
                    return this.getAttribute(propName) + ': CUSTOM GET';
                };
                set = (value) => {
                    this.setAttribute(propName, value + ': CUSTOM SET');
                };
            }
            this.declareProp(propName, get, set);
        });
    }
    start() {
        console.log('start()');
    }
    definePublicMethods() {
        this.start = this.start.bind(this);
    }
    static get observedAttributes() {
        return props;
    }
});
