168 lines
21 KiB
JavaScript
168 lines
21 KiB
JavaScript
|
import { Component, HostBinding, Input, Optional } from '@angular/core';
|
||
|
|
import { icon, parse, } from '@fortawesome/fontawesome-svg-core';
|
||
|
|
import { faWarnIfIconDefinitionMissing } from '../shared/errors/warn-if-icon-html-missing';
|
||
|
|
import { faWarnIfIconSpecMissing } from '../shared/errors/warn-if-icon-spec-missing';
|
||
|
|
import { faClassList } from '../shared/utils/classlist.util';
|
||
|
|
import { faNormalizeIconSpec } from '../shared/utils/normalize-icon-spec.util';
|
||
|
|
import * as i0 from "@angular/core";
|
||
|
|
import * as i1 from "@angular/platform-browser";
|
||
|
|
import * as i2 from "../config";
|
||
|
|
import * as i3 from "../icon-library";
|
||
|
|
import * as i4 from "../stack/stack-item-size.directive";
|
||
|
|
import * as i5 from "../stack/stack.component";
|
||
|
|
export class FaIconComponent {
|
||
|
|
/**
|
||
|
|
* @deprecated Use animation="spin" instead. To be removed in 0.14.0.
|
||
|
|
*/
|
||
|
|
set spin(value) {
|
||
|
|
this.animation = value ? 'spin' : undefined;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @deprecated Use animation="spin-pulse" instead. To be removed in 0.14.0.
|
||
|
|
*/
|
||
|
|
set pulse(value) {
|
||
|
|
this.animation = value ? 'spin-pulse' : undefined;
|
||
|
|
}
|
||
|
|
constructor(sanitizer, config, iconLibrary, stackItem, stack) {
|
||
|
|
this.sanitizer = sanitizer;
|
||
|
|
this.config = config;
|
||
|
|
this.iconLibrary = iconLibrary;
|
||
|
|
this.stackItem = stackItem;
|
||
|
|
/**
|
||
|
|
* Set `class` attribute on the SVG element rendered by the component.
|
||
|
|
*
|
||
|
|
* @deprecated This input breaks view encapsulation and is not recommended.
|
||
|
|
* For simple cases (like colors), use `class` on the component itself, for
|
||
|
|
* more complex usages, explicitly opt-in to break the view encapsulation.
|
||
|
|
* This input is deprecated since 0.12.0 and will be removed in 0.13.0.
|
||
|
|
*/
|
||
|
|
this.classes = [];
|
||
|
|
if (stack != null && stackItem == null) {
|
||
|
|
console.error('FontAwesome: fa-icon and fa-duotone-icon elements must specify stackItemSize attribute when wrapped into ' +
|
||
|
|
'fa-stack. Example: <fa-icon stackItemSize="2x"></fa-icon>.');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ngOnChanges(changes) {
|
||
|
|
if (this.icon == null && this.config.fallbackIcon == null) {
|
||
|
|
faWarnIfIconSpecMissing();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (changes) {
|
||
|
|
const iconToBeRendered = this.icon != null ? this.icon : this.config.fallbackIcon;
|
||
|
|
const iconDefinition = this.findIconDefinition(iconToBeRendered);
|
||
|
|
if (iconDefinition != null) {
|
||
|
|
const params = this.buildParams();
|
||
|
|
this.renderIcon(iconDefinition, params);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Programmatically trigger rendering of the icon.
|
||
|
|
*
|
||
|
|
* This method is useful, when creating {@link FaIconComponent} dynamically or
|
||
|
|
* changing its inputs programmatically as in these cases icon won't be
|
||
|
|
* re-rendered automatically.
|
||
|
|
*/
|
||
|
|
render() {
|
||
|
|
this.ngOnChanges({});
|
||
|
|
}
|
||
|
|
findIconDefinition(i) {
|
||
|
|
const lookup = faNormalizeIconSpec(i, this.config.defaultPrefix);
|
||
|
|
if ('icon' in lookup) {
|
||
|
|
return lookup;
|
||
|
|
}
|
||
|
|
const definition = this.iconLibrary.getIconDefinition(lookup.prefix, lookup.iconName);
|
||
|
|
if (definition != null) {
|
||
|
|
return definition;
|
||
|
|
}
|
||
|
|
faWarnIfIconDefinitionMissing(lookup);
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
buildParams() {
|
||
|
|
const classOpts = {
|
||
|
|
flip: this.flip,
|
||
|
|
animation: this.animation,
|
||
|
|
border: this.border,
|
||
|
|
inverse: this.inverse,
|
||
|
|
size: this.size || null,
|
||
|
|
pull: this.pull || null,
|
||
|
|
rotate: this.rotate || null,
|
||
|
|
fixedWidth: typeof this.fixedWidth === 'boolean' ? this.fixedWidth : this.config.fixedWidth,
|
||
|
|
stackItemSize: this.stackItem != null ? this.stackItem.stackItemSize : null,
|
||
|
|
};
|
||
|
|
const parsedTransform = typeof this.transform === 'string' ? parse.transform(this.transform) : this.transform;
|
||
|
|
return {
|
||
|
|
title: this.title,
|
||
|
|
transform: parsedTransform,
|
||
|
|
classes: [...faClassList(classOpts), ...this.classes],
|
||
|
|
mask: this.mask != null ? this.findIconDefinition(this.mask) : null,
|
||
|
|
styles: this.styles != null ? this.styles : {},
|
||
|
|
symbol: this.symbol,
|
||
|
|
attributes: {
|
||
|
|
role: this.a11yRole,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
}
|
||
|
|
renderIcon(definition, params) {
|
||
|
|
const renderedIcon = icon(definition, params);
|
||
|
|
this.renderedIconHTML = this.sanitizer.bypassSecurityTrustHtml(renderedIcon.html.join('\n'));
|
||
|
|
}
|
||
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0", ngImport: i0, type: FaIconComponent, deps: [{ token: i1.DomSanitizer }, { token: i2.FaConfig }, { token: i3.FaIconLibrary }, { token: i4.FaStackItemSizeDirective, optional: true }, { token: i5.FaStackComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
||
|
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0", type: FaIconComponent, isStandalone: true, selector: "fa-icon", inputs: { icon: "icon", title: "title", animation: "animation", spin: "spin", pulse: "pulse", mask: "mask", styles: "styles", flip: "flip", size: "size", pull: "pull", border: "border", inverse: "inverse", symbol: "symbol", rotate: "rotate", fixedWidth: "fixedWidth", classes: "classes", transform: "transform", a11yRole: "a11yRole" }, host: { properties: { "attr.title": "title", "innerHTML": "this.renderedIconHTML" }, classAttribute: "ng-fa-icon" }, usesOnChanges: true, ngImport: i0, template: ``, isInline: true }); }
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0", ngImport: i0, type: FaIconComponent, decorators: [{
|
||
|
|
type: Component,
|
||
|
|
args: [{
|
||
|
|
selector: 'fa-icon',
|
||
|
|
standalone: true,
|
||
|
|
template: ``,
|
||
|
|
host: {
|
||
|
|
class: 'ng-fa-icon',
|
||
|
|
'[attr.title]': 'title',
|
||
|
|
},
|
||
|
|
}]
|
||
|
|
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i2.FaConfig }, { type: i3.FaIconLibrary }, { type: i4.FaStackItemSizeDirective, decorators: [{
|
||
|
|
type: Optional
|
||
|
|
}] }, { type: i5.FaStackComponent, decorators: [{
|
||
|
|
type: Optional
|
||
|
|
}] }], propDecorators: { icon: [{
|
||
|
|
type: Input
|
||
|
|
}], title: [{
|
||
|
|
type: Input
|
||
|
|
}], animation: [{
|
||
|
|
type: Input
|
||
|
|
}], spin: [{
|
||
|
|
type: Input
|
||
|
|
}], pulse: [{
|
||
|
|
type: Input
|
||
|
|
}], mask: [{
|
||
|
|
type: Input
|
||
|
|
}], styles: [{
|
||
|
|
type: Input
|
||
|
|
}], flip: [{
|
||
|
|
type: Input
|
||
|
|
}], size: [{
|
||
|
|
type: Input
|
||
|
|
}], pull: [{
|
||
|
|
type: Input
|
||
|
|
}], border: [{
|
||
|
|
type: Input
|
||
|
|
}], inverse: [{
|
||
|
|
type: Input
|
||
|
|
}], symbol: [{
|
||
|
|
type: Input
|
||
|
|
}], rotate: [{
|
||
|
|
type: Input
|
||
|
|
}], fixedWidth: [{
|
||
|
|
type: Input
|
||
|
|
}], classes: [{
|
||
|
|
type: Input
|
||
|
|
}], transform: [{
|
||
|
|
type: Input
|
||
|
|
}], a11yRole: [{
|
||
|
|
type: Input
|
||
|
|
}], renderedIconHTML: [{
|
||
|
|
type: HostBinding,
|
||
|
|
args: ['innerHTML']
|
||
|
|
}] } });
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbGliL2ljb24vaWNvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFhLFFBQVEsRUFBaUIsTUFBTSxlQUFlLENBQUM7QUFFbEcsT0FBTyxFQUdMLElBQUksRUFJSixLQUFLLEdBTU4sTUFBTSxtQ0FBbUMsQ0FBQztBQUczQyxPQUFPLEVBQUUsNkJBQTZCLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQztBQUMzRixPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQztBQUVyRixPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDN0QsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sMENBQTBDLENBQUM7Ozs7Ozs7QUFhL0UsTUFBTSxPQUFPLGVBQWU7SUFtQjFCOztPQUVHO0lBQ0gsSUFBYSxJQUFJLENBQUMsS0FBYztRQUM5QixJQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUM7SUFDOUMsQ0FBQztJQUVEOztPQUVHO0lBQ0gsSUFBYSxLQUFLLENBQUMsS0FBYztRQUMvQixJQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQyxDQUFDLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUM7SUFDcEQsQ0FBQztJQTBDRCxZQUNVLFNBQXVCLEVBQ3ZCLE1BQWdCLEVBQ2hCLFdBQTBCLEVBQ2QsU0FBbUMsRUFDM0MsS0FBdUI7UUFKM0IsY0FBUyxHQUFULFNBQVMsQ0FBYztRQUN2QixXQUFNLEdBQU4sTUFBTSxDQUFVO1FBQ2hCLGdCQUFXLEdBQVgsV0FBVyxDQUFlO1FBQ2QsY0FBUyxHQUFULFNBQVMsQ0FBMEI7UUF4QnpEOzs7Ozs7O1dBT0c7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
|