import { LitElement, html, property, customElement } from 'lit-element';
import * as domtools from '@designestate/dees-domtools';
import { icon, IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faFacebook } from '@fortawesome/free-brands-svg-icons';
type TBrand = 'facebook' | 'twitter';
const brandIcons: {[key: string]: IconDefinition} = {
facebook: faFacebook
};
@customElement('dees-icon')
export class DeesIcon extends LitElement {
public static demo = () => html`
`;
@property()
public iconName: string;
@property()
public brandName: TBrand;
@property()
public svgSize: number = 20;
constructor() {
super();
domtools.elementBasic.setup();
}
public render() {
return html`
${domtools.elementBasic.styles}
${this.iconName ? html`${this.iconName}` : html``}
${this.brandName ? html`` : html``}
`;
}
firstUpdated() {
if (this.brandName && !this.iconName) {
this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(brandIcons[this.brandName]).html[0];
}
}
}