import { WebComponent } from '../../lib/web-component';
const props = ['label', 'foo', 'foo2', 'test', 'data-json'];
window.customElements.define('web-comp-runtime', class extends WebComponent {
    constructor() {
        super();
        this.defineProps(props);
        this.styles = `:host .content { 
            background: var(--ema-primary,black); 
            color:white;padding:15px;
        }`;
    }
    render() {
        this.html = `
      
          <h5>${this.label}: - foo =  ${this['data'].foo}  - sliderV: ${this['data'].sliderV}</h5>
       
          <ema-slider value="${this['data'].sliderV}"></ema-slider>
          <ema-card>
            <ema-card-header>
                <span class="ema-card-header-title">${this.label}</span>
                <span class="ema-card-header-subtitle">${this['data'].foo}</span>
            </ema-card-header>
            <ema-card-content>
                Content goes here
            </ema-card-content>
            <ema-card-footer>
                <button class="btn btn-primary">Action!</button>
            </ema-card-footer>
            </ema-card>
        `;
    }
    attributeChangedCallback(name, oldVal, 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);
        });
    }
    hide() {
        this.root.querySelector('.content').style.display = 'none';
    }
    definePublicMethods() {
        this.hide = this.hide.bind(this);
    }
});
