/**
* Implements AoflElement
*
* @version 3.0.0
* @since 1.0.0
* @author Arian Khosravi <arian.khosravi@aofl.com>
*/
import {LitElement, html, css} from 'lit-element';
/**
* @private
* @memberof module:@aofl/element
*/
const cachedStyles = Symbol('cachedStyles');
/**
* Base class for all aofl-js elements.
*
* @memberof module:@aofl/element
*/
class AoflElement extends LitElement {
/**
* Creates an instance of AoflElement.
*/
constructor() {
super();
this[cachedStyles] = [];
this._observedPropertiesMap = new Map();
}
/**
* Check if styles have been updated
*
* @private
* @param {Array} styles
* @return {Boolean}
*/
stylesUpdated(styles) {
if (this[cachedStyles].length !== styles.length) {
return true;
}
/* istanbul ignore next */
for (let i = 0; i < styles.length; i++) {
if (styles[i] !== this[cachedStyles][i]) {
return true;
}
}
return false;
}
/**
*
* @param {Function} template
* @param {Array} [styles=[]]
* @param {Array} args
* @return {Object}
*/
render(template, styles = []) {
if (this.stylesUpdated(styles)) {
this[cachedStyles] = styles;
const s = [
css([
styles.reduce((acc, item) => {
acc = acc + item;
return acc;
}, '')
])
];
this.constructor._styles = s;
const renderedStyles = this.renderRoot.querySelectorAll('style');
for (const rStyle of renderedStyles) {
/* istanbul ignore next */
if (rStyle.parentNode === this.renderRoot) {
rStyle.parentNode.removeChild(rStyle);
}
}
this.adoptStyles();
}
return template(this, html);
}
/**
* disconnectedCallback
*/
disconnectedCallback() {
this._observedPropertiesMap.forEach((cb) => {
cb();
});
this._observedPropertiesMap.clear();
super.disconnectedCallback();
}
}
export {
AoflElement
};