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

154 lines
3.6 KiB
TypeScript
Raw Normal View History

2023-01-11 17:15:31 +00:00
import {
DeesElement,
html,
property,
customElement,
cssManager,
css,
} 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 {
2023-01-12 17:14:59 +00:00
faArrowUpRightFromSquare as faArrowUpRightFromSquareSolid,
2023-01-11 16:19:22 +00:00
faBell as faBellSolid,
faBug as faBugSolid,
2023-01-11 23:07:39 +00:00
faBuilding as faBuildingSolid,
2023-01-11 17:32:05 +00:00
faCaretLeft as faCaretLeftSolid,
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,
2023-01-11 19:55:06 +00:00
faXmark as faXmarkSolid,
2023-01-11 16:19:22 +00:00
} 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-12 17:14:59 +00:00
arrowUpRightFromSquare: faArrowUpRightFromSquareSolid,
arrowUpRightFromSquareSolid: faArrowUpRightFromSquareSolid,
2023-01-11 16:19:22 +00:00
bell: faBellSolid,
bellSolid: faBellSolid,
bug: faBugSolid,
bugSolid: faBugSolid,
2023-01-11 23:07:39 +00:00
building: faBuildingSolid,
buildingSolid: faBuildingSolid,
2023-01-11 17:32:05 +00:00
caretLeft: faCaretLeftSolid,
caretLeftSolid: faCaretLeftSolid,
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,
2023-01-11 19:55:06 +00:00
xmark: faXmarkSolid,
xmarkSolid: faXmarkSolid,
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-11 19:52:37 +00:00
<div style="background: #fff; padding: 10px; font-size: 30px">
2023-01-12 17:14:59 +00:00
<dees-icon .iconFA=${'messageSolid'}></dees-icon>
<dees-icon .iconFA=${'sun'}></dees-icon>
<dees-icon .iconFA=${'sunSolid'}></dees-icon>
<dees-icon .iconFA=${'facebook'}></dees-icon>
<dees-icon .iconFA=${'arrowUpRightFromSquare'}></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
2023-01-12 17:14:59 +00:00
@property({
type: String
})
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 19:52:37 +00:00
public iconSize: number;
2020-12-01 22:24:54 +00:00
2020-09-17 10:35:33 +00:00
constructor() {
super();
domtools.elementBasic.setup();
}
2023-01-11 17:15:31 +00:00
public static styles = [
cssManager.defaultStyles,
css`
:host {
display: block;
white-space: nowrap;
2023-01-11 19:52:37 +00:00
display: flex;
align-items: center;
justify-content: center;
2023-01-11 17:15:31 +00:00
}
`,
];
2020-09-17 10:35:33 +00:00
public render() {
return html`
${domtools.elementBasic.styles}
<style>
2020-12-01 22:24:54 +00:00
#iconContainer svg {
2023-01-11 19:52:37 +00:00
display: 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 19:52:37 +00:00
if (!this.iconSize) {
this.iconSize = parseInt(globalThis.getComputedStyle(this).fontSize.replace(/\D/g,''));
}
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
}