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

import {
  DeesElement,
  html,
  property,
  customElement,
  cssManager,
  css,
  type CSSResult,
} from '@design.estate/dees-element';

import * as domtools from '@design.estate/dees-domtools';

import { icon, type IconDefinition } from '@fortawesome/fontawesome-svg-core';
import {
  faFacebook,
  faGoogle,
  faLinkedin,
  faMedium,
  faSlackHash,
  faTwitter,
  faInstagram,
  faTiktok,
} from '@fortawesome/free-brands-svg-icons';

import {
  faCopy as faCopyRegular,
  faCircleCheck as faCircleCheckRegular,
  faCircleXmark as faCircleXmarkRegular,
  faMessage as faMessageRegular,
  faPaste as faPasteRegular,
  faSun as faSunRegular,
  faTrashCan as faTrashCanRegular,
} from '@fortawesome/free-regular-svg-icons';
import {
  faArrowRight as faArrowRightSolid,
  faArrowUpRightFromSquare as faArrowUpRightFromSquareSolid,
  faBell as faBellSolid,
  faBug as faBugSolid,
  faBuilding as faBuildingSolid,
  faCaretLeft as faCaretLeftSolid,
  faCaretRight as faCaretRightSolid,
  faCheck as faCheckSolid,
  faCircleInfo as faCircleInfoSolid,
  faCircleCheck as faCircleCheckSolid,
  faCircleXmark as faCircleXmarkSolid,
  faClockRotateLeft as faClockRotateLeftSolid,
  faCopy as faCopySolid,
  faDesktop as faDesktopSolid,
  faEye as faEyeSolid,
  faEyeSlash as faEyeSlashSolid,
  faFileInvoice as faFileInvoiceSolid,
  faFileInvoiceDollar as faFileInvoiceDollarSolid,
  faGrip as faGripSolid,
  faMessage as faMessageSolid,
  faMoneyCheckDollar as faMoneyCheckDollarSolid,
  faMugHot as faMugHotSolid,
  faMinus as faMinusSolid,
  faPaste as faPasteSolid,
  faPenToSquare as faPenToSquareSolid,
  faPlus as faPlusSolid,
  faReceipt as faReceiptSolid,
  faRss as faRssSolid,
  faUsers as faUsersSolid,
  faShare as faShareSolid,
  faSun as faSunSolid,
  faTrash as faTrashSolid,
  faTrashCan as faTrashCanSolid,
  faWallet as faWalletSolid,
  faXmark as faXmarkSolid,
} from '@fortawesome/free-solid-svg-icons';
import { demoFunc } from './dees-icon.demo.js';

export const faIcons = {
  // normal
  arrowRight: faArrowRightSolid,
  arrowUpRightFromSquare: faArrowUpRightFromSquareSolid,
  bell: faBellSolid,
  bug: faBugSolid,
  building: faBuildingSolid,
  caretLeft: faCaretLeftSolid,
  caretRight: faCaretRightSolid,
  check: faCheckSolid,
  circleInfo: faCircleInfoSolid,
  circleCheck: faCircleCheckRegular,
  circleCheckSolid: faCircleCheckSolid,
  circleXmark: faCircleXmarkRegular,
  circleXmarkSolid: faCircleXmarkSolid,
  clockRotateLeft: faClockRotateLeftSolid,
  copy: faCopyRegular,
  copySolid: faCopySolid,
  desktop: faDesktopSolid,
  eye: faEyeSolid,
  eyeSlash: faEyeSlashSolid,
  fileInvoice: faFileInvoiceSolid,
  fileInvoiceDoller: faFileInvoiceDollarSolid,
  grip: faGripSolid,
  message: faMessageRegular,
  messageSolid: faMessageSolid,
  moneyCheckDollar: faMoneyCheckDollarSolid,
  mugHot: faMugHotSolid,
  minus: faMinusSolid,
  paste: faPasteRegular,
  pasteSolid: faPasteSolid,
  penToSquare: faPenToSquareSolid,
  plus: faPlusSolid,
  receipt: faReceiptSolid,
  rss: faRssSolid,
  share: faShareSolid,
  sun: faSunRegular,
  sunSolid: faSunSolid,
  trash: faTrashSolid,
  trashSolid: faTrashSolid,
  trashCan: faTrashCanRegular,
  trashCanSolid: faTrashCanSolid,
  users: faUsersSolid,
  wallet: faWalletSolid,
  xmark: faXmarkSolid,
  // brands
  facebook: faFacebook,
  google: faGoogle,
  instagram: faInstagram,
  linkedin: faLinkedin,
  medium: faMedium,
  slack: faSlackHash,
  tiktok: faTiktok,
  twitter: faTwitter,
};

export type TIconKey = keyof typeof faIcons;

declare global {
  interface HTMLElementTagNameMap {
    'dees-icon': DeesIcon;
  }
}

@customElement('dees-icon')
export class DeesIcon extends DeesElement {
  public static demo = demoFunc;

  @property({
    type: String
  })
  public iconFA: keyof typeof faIcons;

  @property()
  public iconSize: number;

  constructor() {
    super();
    domtools.elementBasic.setup();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      * {
        transition: inherit !important;
      }
    `,
  ];

  public render() {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        #iconContainer svg {
          display: block;
          height: ${this.iconSize}px;
        }
      </style>
      <div id="iconContainer"></div>
    `;
  }

  public async updated() {
    if (!this.iconSize) {
      this.iconSize = parseInt(globalThis.getComputedStyle(this).fontSize.replace(/\D/g,''));
    }
    if (this.iconFA) {
      this.shadowRoot.querySelector('#iconContainer').innerHTML = this.iconFA
        ? icon(faIcons[this.iconFA]).html[0]
        : 'icon not found';
    }
  }
}