@fluid-topics/ft-icon
Version:
Typography components
79 lines (78 loc) • 3.31 kB
JavaScript
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, nothing } from "lit";
import { property, query, state } from "lit/decorators.js";
import { FtLitElement } from "@fluid-topics/ft-wc-utils";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
import { FtFileFormatIcons, FtIcons } from "./icons";
import { styles } from "./ft-icon.styles";
import { FtIconVariants } from "./ft-icon.properties";
export class FtIcon extends FtLitElement {
constructor() {
super(...arguments);
this.ariaHidden = "true";
this.resolvedIcon = nothing;
}
render() {
const variant = this.variant && Object.values(FtIconVariants).includes(this.variant)
? this.variant
: FtIconVariants.fluid_topics;
const slotHidden = variant !== FtIconVariants.material || !!this.value;
return html `
<i class="ft-icon ft-icon--${variant} ft-no-text-select" part="icon icon-${variant}">
${unsafeHTML(this.resolvedIcon)}
<slot ?hidden=${slotHidden}></slot>
</i>
`;
}
getTextContent() {
var _a, _b;
return (_b = (_a = this.slottedContent) === null || _a === void 0 ? void 0 : _a.assignedNodes().map((n) => n.textContent).join("").trim()) !== null && _b !== void 0 ? _b : "";
}
update(changedProperties) {
super.update(changedProperties);
if (["value", "variant"].some((p) => changedProperties.has(p))) {
this.resolveIcon();
}
}
resolveIcon() {
var _a, _b;
const content = this.value || this.getTextContent();
switch (this.variant) {
case FtIconVariants.file_format:
this.resolvedIcon = (_a = FtFileFormatIcons[content.replace("-", "_").toUpperCase()]) !== null && _a !== void 0 ? _a : content;
break;
case FtIconVariants.material:
this.resolvedIcon = this.value || nothing;
break;
default:
this.resolvedIcon = (_b = FtIcons[content.replace("-", "_").toUpperCase()]) !== null && _b !== void 0 ? _b : content;
break;
}
}
firstUpdated(_changedProperties) {
super.firstUpdated(_changedProperties);
setTimeout(() => this.resolveIcon());
}
}
FtIcon.elementDefinitions = {};
FtIcon.styles = styles;
__decorate([
property()
], FtIcon.prototype, "variant", void 0);
__decorate([
property()
], FtIcon.prototype, "value", void 0);
__decorate([
property({ reflect: true, attribute: "aria-hidden" })
], FtIcon.prototype, "ariaHidden", void 0);
__decorate([
state()
], FtIcon.prototype, "resolvedIcon", void 0);
__decorate([
query("slot")
], FtIcon.prototype, "slottedContent", void 0);