dees-catalog/ts_web/elements/dees-icon.ts

120 lines
2.7 KiB
TypeScript
Raw Normal View History

2021-11-26 19:06:09 +00:00
import { DeesElement, html, property, customElement } from '@designestate/dees-element';
2020-09-17 10:35:33 +00:00
import * as domtools from '@designestate/dees-domtools';
2020-12-02 17:11:04 +00:00
import { icon, IconDefinition } from '@fortawesome/fontawesome-svg-core';
import {
faFacebook,
faGoogle,
faLinkedin,
faMedium,
2020-12-03 11:12:11 +00:00
faSlackHash,
2020-12-02 17:11:04 +00:00
faTwitter,
2022-07-14 21:29:25 +00:00
faInstagram,
faTiktok,
2020-12-02 17:11:04 +00:00
} from '@fortawesome/free-brands-svg-icons';
2020-12-01 22:24:54 +00:00
2023-01-11 16:19:22 +00:00
import {
faMessage as faMessageRegular,
faSun as faSunRegular,
} from '@fortawesome/free-regular-svg-icons';
import {
faBell as faBellSolid,
faBug as faBugSolid,
2023-01-11 16:43:58 +00:00
faCircleInfo as faCircleInfoSolid,
2023-01-11 16:19:22 +00:00
faDesktop as faDesktopSolid,
2023-01-11 16:43:58 +00:00
faGrip as faGripSolid,
faMessage as faMessageSolid,
2023-01-11 16:19:22 +00:00
faRss as faRssSolid,
faUsers as faUsersSolid,
2023-01-11 16:50:37 +00:00
faShare as faShareSolid,
2023-01-11 16:19:22 +00:00
faSun as faSunSolid,
} from '@fortawesome/free-solid-svg-icons';
2020-12-02 17:11:04 +00:00
2023-01-11 16:19:22 +00:00
export const faIcons = {
2020-12-02 17:11:04 +00:00
// normal
2023-01-11 16:19:22 +00:00
bell: faBellSolid,
bellSolid: faBellSolid,
bug: faBugSolid,
bugSolid: faBugSolid,
2023-01-11 16:43:58 +00:00
circleinfo: faCircleInfoSolid,
circleinfoSolid: faCircleInfoSolid,
2023-01-11 16:19:22 +00:00
desktop: faDesktopSolid,
desktopSolid: faDesktopSolid,
grip: faGripSolid,
gripSolid: faGripSolid,
message: faMessageRegular,
2023-01-11 16:43:58 +00:00
messageSolid: faMessageSolid,
2023-01-11 16:19:22 +00:00
rss: faRssSolid,
rssSolid: faRssSolid,
2023-01-11 16:50:37 +00:00
share: faShareSolid,
shareSolid: faShareSolid,
2023-01-11 16:19:22 +00:00
sun: faSunRegular,
sunSolid: faSunSolid,
2020-12-02 17:11:04 +00:00
// brands
2020-12-01 22:49:44 +00:00
facebook: faFacebook,
2020-12-02 17:11:04 +00:00
google: faGoogle,
2022-07-14 21:29:25 +00:00
instagram: faInstagram,
2020-12-01 22:49:44 +00:00
linkedin: faLinkedin,
2020-12-02 17:11:04 +00:00
medium: faMedium,
2020-12-03 11:12:11 +00:00
slack: faSlackHash,
2022-07-14 21:29:25 +00:00
tiktok: faTiktok,
2020-12-02 17:11:04 +00:00
twitter: faTwitter,
2023-01-11 16:19:22 +00:00
users: faUsersSolid,
2020-12-01 22:24:54 +00:00
};
2021-03-06 15:48:02 +00:00
declare global {
interface HTMLElementTagNameMap {
'dees-icon': DeesIcon;
}
}
2020-09-17 10:35:33 +00:00
@customElement('dees-icon')
2021-11-26 19:06:09 +00:00
export class DeesIcon extends DeesElement {
2020-12-01 22:24:54 +00:00
public static demo = () => html`
2021-11-26 19:06:09 +00:00
<dees-icon iconName="visibility"></dees-icon>
2023-01-07 13:12:18 +00:00
<div style="background: #fff; padding: 10px; font-size: 24px">
2023-01-11 16:43:58 +00:00
<dees-icon iconFA="messageSolid"></dees-icon>
2023-01-11 16:19:22 +00:00
<dees-icon iconFA="sun"></dees-icon>
<dees-icon iconFA="sunSolid"></dees-icon>
<dees-icon iconFA="facebook"></dees-icon>
2020-12-01 22:24:54 +00:00
</div>
2020-12-02 17:11:04 +00:00
`;
2020-09-17 10:35:33 +00:00
@property()
2023-01-11 16:19:22 +00:00
public iconFA: keyof typeof faIcons;
2020-09-17 10:35:33 +00:00
2020-12-01 22:24:54 +00:00
@property()
2023-01-11 16:19:22 +00:00
public iconSize: number = 20;
2020-12-01 22:24:54 +00:00
2020-09-17 10:35:33 +00:00
constructor() {
super();
domtools.elementBasic.setup();
}
public render() {
return html`
${domtools.elementBasic.styles}
<style>
:host {
display: block;
2022-12-06 12:32:00 +00:00
white-space: nowrap;
2020-09-17 10:35:33 +00:00
}
2020-12-01 22:24:54 +00:00
#iconContainer svg {
display: inline-block;
2023-01-11 16:19:22 +00:00
height: ${this.iconSize}px;
2020-09-17 10:35:33 +00:00
}
</style>
2023-01-11 16:19:22 +00:00
<div id="iconContainer"></div>
2020-09-17 10:35:33 +00:00
`;
}
2020-12-01 22:24:54 +00:00
2023-01-07 12:41:24 +00:00
public async firstUpdated() {
2023-01-11 16:19:22 +00:00
if (this.iconFA) {
this.shadowRoot.querySelector('#iconContainer').innerHTML = this.iconFA
? icon(faIcons[this.iconFA]).html[0]
: 'icon not found';
2020-12-01 22:24:54 +00:00
}
}
2020-09-17 10:35:33 +00:00
}