@fluid-topics/ft-icon/build/ftds-icon.js

Typography components

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { html } from "lit";
import { property } from "lit/decorators.js";
import { FtLitElement } from "@fluid-topics/ft-wc-utils";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
import { classMap } from "lit/directives/class-map.js";
import { dsStyles } from "./ftds-icon.styles.js";
import { all } from "@awesome.me/kit-f60314a0e3/icons";
import { icon, library } from "@fortawesome/fontawesome-svg-core";
import { faPrefixByVariant } from "./ftds-icons";
export class FtdsIcon extends FtLitElement {
    constructor() {
        super(...arguments);
        this.monospace = false;
        this.ariaHidden = "true";
    }
    render() {
        const classes = {
            "ftds-icon": true,
            "ftds-icon--monospace": this.monospace,
        };
        return html `
            <div class="${classMap(classes)}">${unsafeHTML(this.buildIcon())}</div>
        `;
    }
    buildIcon() {
        const faPrefix = this.variant ? faPrefixByVariant[this.variant] : undefined;
        const iconDef = all.find((icon) => icon.iconName === this.icon && (faPrefix ? icon.prefix === faPrefix : true));
        if (!iconDef) {
            console.log(`Attempted usage of unknown ftds-icon : ${this.icon}/${this.variant}`);
            return "";
        }
        library.add(iconDef);
        return icon(iconDef).html[0];
    }
}
FtdsIcon.elementDefinitions = {};
FtdsIcon.styles = dsStyles;
__decorate([
    property()
], FtdsIcon.prototype, "variant", void 0);
__decorate([
    property()
], FtdsIcon.prototype, "icon", void 0);
__decorate([
    property({ type: Boolean })
], FtdsIcon.prototype, "monospace", void 0);
__decorate([
    property({ reflect: true, attribute: "aria-hidden" })
], FtdsIcon.prototype, "ariaHidden", void 0);