import {Indexable} from '../interfaces';
/**
* BaseClass for view Elements
*/
export class VetproviehElement extends HTMLElement {
/**
* Getting the template
* @return {string}
*/
public get template() : string {
return '';
}
/**
* Default-Constructor
* @param {boolean} shadowed
* @param {boolean} render
*/
constructor(shadowed = true, render = true) {
super();
if (shadowed) {
this.attachShadow({
mode: 'open',
});
}
if (render) this.render();
}
/**
* Should skip render on callback
* @return {boolean}
*/
protected get skipRenderOnCallback(): boolean {
return false;
}
/**
* Hide css?
* @param {boolean} bool
* @return {string}
*/
public cssHidden(bool : boolean) : string {
return bool ? 'is-hidden' : '';
}
/**
* Callback Implementation
* @param {string} name
* @param {any} old
* @param {any} value
*/
attributeChangedCallback(name: string, old: any, value: any) {
if (old !== value) {
this.sendCallback(`_${name}_beforeSet`, value);
(this as Indexable)[name] = value;
this.sendCallback(`_${name}_afterSet`, value);
if (!this.skipRenderOnCallback) this.render();
}
}
/**
* Connected Callback
*/
connectedCallback() {
console.debug('VetproviehElement: ConnectedCallback');
}
/**
* Sending a Callback
* @param {string} name
* @param {any} value
*/
private sendCallback(name: string, value: any) {
const method = (this as Indexable)[name] as any;
if (method && typeof (method) === 'function') {
(this as Indexable)[name](value);
}
}
/**
* Loading HTML-Element From ShadowRoot
* @param {string} id
* @return {HTMLElement | undefined}
*/
getByIdFromShadowRoot(id: string): HTMLElement | undefined {
if (this.shadowRoot) {
return this.shadowRoot.getElementById(id) as HTMLElement;
}
}
/**
* Render Template
*/
render() {
const renderedTemplate = Function('return `' + this.template + '`')
.bind(this)() as string;
if (this.shadowRoot) {
this.shadowRoot.innerHTML = renderedTemplate;
} else {
this.innerHTML = renderedTemplate;
}
}
/**
* Hide Or Show Element
* @param {string} id
* @param {boolean} show
*/
updateVisibility(id: string, show: boolean) {
const search = this.getByIdFromShadowRoot(id);
if (search) {
if (!show) {
search.classList.add('is-hidden');
} else {
search.classList.remove('is-hidden');
}
}
}
/**
* Getting InnerHTML
* @return {string}
*/
public get innerHTML() {
return super.innerHTML;
}
/**
* Setting InnerHTML to innerHTML or ShadowRoot
* @param {string} input
*/
public set innerHTML(input: string) {
if (this.shadowRoot != null) {
this.shadowRoot.innerHTML = input;
} else {
super.innerHTML = input;
}
}
// -----------------
// CLASS METHODS
// -----------------
/**
* Getting Template
* @return {string}
*/
static get template(): string {
return `
`;
}
}