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

194 lines
4.7 KiB
TypeScript
Raw Normal View History

2023-01-11 17:15:31 +00:00
import {
DeesElement,
html,
property,
customElement,
cssManager,
css,
2023-08-07 18:02:18 +00:00
type CSSResult,
2023-08-07 17:13:29 +00:00
} from '@design.estate/dees-element';
2020-09-17 10:35:33 +00:00
2023-08-07 17:13:29 +00:00
import * as domtools from '@design.estate/dees-domtools';
2020-09-17 10:35:33 +00:00
2023-08-07 18:02:18 +00:00
import { icon, type IconDefinition } from '@fortawesome/fontawesome-svg-core';
2020-12-02 17:11:04 +00:00
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 {
2023-01-12 23:30:56 +00:00
faCopy as faCopyRegular,
2023-01-13 00:17:08 +00:00
faCircleCheck as faCircleCheckRegular,
faCircleXmark as faCircleXmarkRegular,
2023-01-11 16:19:22 +00:00
faMessage as faMessageRegular,
2023-01-12 23:30:56 +00:00
faPaste as faPasteRegular,
2023-01-11 16:19:22 +00:00
faSun as faSunRegular,
2023-09-20 16:57:54 +00:00
faTrashCan as faTrashCanRegular,
2023-01-11 16:19:22 +00:00
} from '@fortawesome/free-regular-svg-icons';
import {
2023-01-12 23:30:56 +00:00
faArrowRight as faArrowRightSolid,
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-12 23:30:56 +00:00
faCaretRight as faCaretRightSolid,
faCheck as faCheckSolid,
2023-01-11 16:43:58 +00:00
faCircleInfo as faCircleInfoSolid,
2023-01-13 00:17:08 +00:00
faCircleCheck as faCircleCheckSolid,
faCircleXmark as faCircleXmarkSolid,
2023-09-14 17:43:26 +00:00
faClockRotateLeft as faClockRotateLeftSolid,
2023-01-12 23:30:56 +00:00
faCopy as faCopySolid,
2023-01-11 16:19:22 +00:00
faDesktop as faDesktopSolid,
2023-01-16 10:51:21 +00:00
faEye as faEyeSolid,
faEyeSlash as faEyeSlashSolid,
2023-10-12 13:43:10 +00:00
faFileInvoice as faFileInvoiceSolid,
faFileInvoiceDollar as faFileInvoiceDollarSolid,
2023-01-11 16:43:58 +00:00
faGrip as faGripSolid,
faMessage as faMessageSolid,
2023-10-12 13:43:10 +00:00
faMoneyCheckDollar as faMoneyCheckDollarSolid,
2023-03-09 16:08:19 +00:00
faMugHot as faMugHotSolid,
2023-01-12 23:30:56 +00:00
faMinus as faMinusSolid,
faPaste as faPasteSolid,
faPenToSquare as faPenToSquareSolid,
2023-09-22 11:15:34 +00:00
faPlus as faPlusSolid,
2023-10-12 13:43:10 +00:00
faReceipt as faReceiptSolid,
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-09-20 16:57:54 +00:00
faTrash as faTrashSolid,
faTrashCan as faTrashCanSolid,
2023-10-12 13:43:10 +00:00
faWallet as faWalletSolid,
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';
2023-09-20 16:57:54 +00:00
import { demoFunc } from './dees-icon.demo.js';
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 23:30:56 +00:00
arrowRight: faArrowRightSolid,
2023-01-12 17:14:59 +00:00
arrowUpRightFromSquare: faArrowUpRightFromSquareSolid,
2023-01-11 16:19:22 +00:00
bell: faBellSolid,
bug: faBugSolid,
2023-01-11 23:07:39 +00:00
building: faBuildingSolid,
2023-01-11 17:32:05 +00:00
caretLeft: faCaretLeftSolid,
2023-01-12 23:30:56 +00:00
caretRight: faCaretRightSolid,
check: faCheckSolid,
2023-01-13 00:17:08 +00:00
circleInfo: faCircleInfoSolid,
circleCheck: faCircleCheckRegular,
circleCheckSolid: faCircleCheckSolid,
circleXmark: faCircleXmarkRegular,
circleXmarkSolid: faCircleXmarkSolid,
2023-09-14 17:43:26 +00:00
clockRotateLeft: faClockRotateLeftSolid,
2023-01-12 23:30:56 +00:00
copy: faCopyRegular,
copySolid: faCopySolid,
2023-01-11 16:19:22 +00:00
desktop: faDesktopSolid,
2023-01-16 10:51:21 +00:00
eye: faEyeSolid,
eyeSlash: faEyeSlashSolid,
2023-10-12 13:43:10 +00:00
fileInvoice: faFileInvoiceSolid,
fileInvoiceDoller: faFileInvoiceDollarSolid,
2023-01-11 16:19:22 +00:00
grip: faGripSolid,
message: faMessageRegular,
2023-01-11 16:43:58 +00:00
messageSolid: faMessageSolid,
2023-10-12 13:43:10 +00:00
moneyCheckDollar: faMoneyCheckDollarSolid,
2023-03-09 16:08:19 +00:00
mugHot: faMugHotSolid,
2023-01-12 23:30:56 +00:00
minus: faMinusSolid,
paste: faPasteRegular,
pasteSolid: faPasteSolid,
penToSquare: faPenToSquareSolid,
2023-09-22 11:15:34 +00:00
plus: faPlusSolid,
2023-10-12 13:43:10 +00:00
receipt: faReceiptSolid,
2023-01-11 16:19:22 +00:00
rss: faRssSolid,
2023-01-11 16:50:37 +00:00
share: faShareSolid,
2023-01-11 16:19:22 +00:00
sun: faSunRegular,
sunSolid: faSunSolid,
2023-09-20 16:57:54 +00:00
trash: faTrashSolid,
trashSolid: faTrashSolid,
trashCan: faTrashCanRegular,
trashCanSolid: faTrashCanSolid,
users: faUsersSolid,
2023-10-12 13:43:10 +00:00
wallet: faWalletSolid,
2023-01-11 19:55:06 +00:00
xmark: 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,
2020-12-01 22:24:54 +00:00
};
2023-09-04 17:28:50 +00:00
export type TIconKey = keyof typeof faIcons;
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 {
2023-09-20 16:57:54 +00:00
public static demo = demoFunc;
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
}
2023-01-12 18:19:31 +00:00
* {
transition: inherit !important;
}
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-16 10:51:21 +00:00
public async updated() {
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
}