import { ɵɵdefineInjectable, Injectable, Directive, Input, Component, Renderer2, ElementRef, Optional, HostBinding, NgModule } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import { findIconDefinition, parse, icon, counter, text } from '@fortawesome/fontawesome-svg-core'; class FaConfig { constructor() { /** * Default prefix to use, when one is not provided with the icon name. * * @default 'fas' */ this.defaultPrefix = 'fas'; /** * Provides a fallback icon to use whilst main icon is being loaded asynchronously. * When value is null, then fa-icon component will throw an error if icon input is missing. * When value is not null, then the provided icon will be used as a fallback icon if icon input is missing. * * @default null */ this.fallbackIcon = null; /** * Whether components should lookup icon definitions in the global icon * library (the one available from * `import { library } from '@fortawesome/fontawesome-svg-core')`. * * See https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/usage/icon-library.md * for detailed description of library modes. * * - 'unset' - Components should lookup icon definitions in the global library * and emit warning if they find a definition there. This option is a default * to assist existing applications with a migration. Applications are expected * to switch to using {@link FaIconLibrary}. * - true - Components should lookup icon definitions in the global library. * Note that global icon library is deprecated and support for it will be * removed. This option can be used to temporarily suppress warnings. * - false - Components should not lookup icon definitions in the global * library. Library will throw an error if missing icon is found in the global * library. * * @deprecated This option is deprecated since 0.5.0. In 0.6.0 default will * be changed to false. In 0.8.0 the option will be removed together with the * support for the global icon library. * * @default false */ this.globalLibrary = false; } } FaConfig.ɵprov = ɵɵdefineInjectable({ factory: function FaConfig_Factory() { return new FaConfig(); }, token: FaConfig, providedIn: "root" }); FaConfig.decorators = [ { type: Injectable, args: [{ providedIn: 'root' },] } ]; class FaIconLibrary { constructor() { this.definitions = {}; } addIcons(...icons) { for (const icon of icons) { if (!(icon.prefix in this.definitions)) { this.definitions[icon.prefix] = {}; } this.definitions[icon.prefix][icon.iconName] = icon; } } addIconPacks(...packs) { for (const pack of packs) { const icons = Object.keys(pack).map((key) => pack[key]); this.addIcons(...icons); } } getIconDefinition(prefix, name) { if (prefix in this.definitions && name in this.definitions[prefix]) { return this.definitions[prefix][name]; } return null; } } FaIconLibrary.ɵprov = ɵɵdefineInjectable({ factory: function FaIconLibrary_Factory() { return new FaIconLibrary(); }, token: FaIconLibrary, providedIn: "root" }); FaIconLibrary.decorators = [ { type: Injectable, args: [{ providedIn: 'root' },] } ]; const faWarnIfIconDefinitionMissing = (iconSpec) => { throw new Error(`Could not find icon with iconName=${iconSpec.iconName} and prefix=${iconSpec.prefix} in the icon library.`); }; const faWarnIfIconSpecMissing = () => { throw new Error('Property `icon` is required for `fa-icon`/`fa-duotone-icon` components.'); }; /** * Fontawesome class list. * Returns classes array by props. */ const faClassList = (props) => { const classes = { 'fa-spin': props.spin, 'fa-pulse': props.pulse, 'fa-fw': props.fixedWidth, 'fa-border': props.border, 'fa-inverse': props.inverse, 'fa-layers-counter': props.counter, 'fa-flip-horizontal': props.flip === 'horizontal' || props.flip === 'both', 'fa-flip-vertical': props.flip === 'vertical' || props.flip === 'both', [`fa-${props.size}`]: props.size !== null, [`fa-rotate-${props.rotate}`]: props.rotate !== null, [`fa-pull-${props.pull}`]: props.pull !== null, [`fa-stack-${props.stackItemSize}`]: props.stackItemSize != null, }; return Object.keys(classes) .map((key) => (classes[key] ? key : null)) .filter((key) => key); }; /** * Returns if is IconLookup or not. */ const isIconLookup = (i) => { return i.prefix !== undefined && i.iconName !== undefined; }; /** * Normalizing icon spec. */ const faNormalizeIconSpec = (iconSpec, defaultPrefix) => { if (isIconLookup(iconSpec)) { return iconSpec; } if (Array.isArray(iconSpec) && iconSpec.length === 2) { return { prefix: iconSpec[0], iconName: iconSpec[1] }; } if (typeof iconSpec === 'string') { return { prefix: defaultPrefix, iconName: iconSpec }; } }; class FaStackItemSizeDirective { constructor() { /** * Specify whether icon inside {@link FaStackComponent} should be rendered in * regular size (1x) or as a larger icon (2x). */ this.stackItemSize = '1x'; } ngOnChanges(changes) { if ('size' in changes) { throw new Error('fa-icon is not allowed to customize size when used inside fa-stack. ' + 'Set size on the enclosing fa-stack instead: ....'); } } } FaStackItemSizeDirective.decorators = [ { type: Directive, args: [{ // tslint:disable-next-line:directive-selector selector: 'fa-icon[stackItemSize],fa-duotone-icon[stackItemSize]', },] } ]; FaStackItemSizeDirective.propDecorators = { stackItemSize: [{ type: Input }], size: [{ type: Input }] }; class FaStackComponent { constructor(renderer, elementRef) { this.renderer = renderer; this.elementRef = elementRef; } ngOnInit() { this.renderer.addClass(this.elementRef.nativeElement, 'fa-stack'); } ngOnChanges(changes) { if ('size' in changes) { if (changes.size.currentValue != null) { this.renderer.addClass(this.elementRef.nativeElement, `fa-${changes.size.currentValue}`); } if (changes.size.previousValue != null) { this.renderer.removeClass(this.elementRef.nativeElement, `fa-${changes.size.previousValue}`); } } } } FaStackComponent.decorators = [ { type: Component, args: [{ selector: 'fa-stack', template: `` },] } ]; FaStackComponent.ctorParameters = () => [ { type: Renderer2 }, { type: ElementRef } ]; FaStackComponent.propDecorators = { size: [{ type: Input }] }; class FaIconComponent { constructor(sanitizer, config, iconLibrary, stackItem, stack) { this.sanitizer = sanitizer; this.config = config; this.iconLibrary = iconLibrary; this.stackItem = stackItem; 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: .'); } } ngOnChanges(changes) { if (this.icon == null && this.config.fallbackIcon == null) { return faWarnIfIconSpecMissing(); } let iconToBeRendered = null; if (this.icon == null) { iconToBeRendered = this.config.fallbackIcon; } else { iconToBeRendered = this.icon; } if (changes) { 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; } const globalDefinition = findIconDefinition(lookup); if (globalDefinition != null) { const message = 'Global icon library is deprecated. ' + 'Consult https://github.com/FortAwesome/angular-fontawesome/blob/master/UPGRADING.md ' + 'for the migration instructions.'; if (this.config.globalLibrary === 'unset') { console.error('FontAwesome: ' + message); } else if (!this.config.globalLibrary) { throw new Error(message); } return globalDefinition; } faWarnIfIconDefinitionMissing(lookup); return null; } buildParams() { const classOpts = { flip: this.flip, spin: this.spin, pulse: this.pulse, 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')); } } FaIconComponent.decorators = [ { type: Component, args: [{ selector: 'fa-icon', template: ``, host: { class: 'ng-fa-icon', '[attr.title]': 'title', } },] } ]; FaIconComponent.ctorParameters = () => [ { type: DomSanitizer }, { type: FaConfig }, { type: FaIconLibrary }, { type: FaStackItemSizeDirective, decorators: [{ type: Optional }] }, { type: FaStackComponent, decorators: [{ type: Optional }] } ]; FaIconComponent.propDecorators = { icon: [{ type: Input }], title: [{ 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',] }] }; class FaDuotoneIconComponent extends FaIconComponent { findIconDefinition(i) { const definition = super.findIconDefinition(i); if (definition != null && !Array.isArray(definition.icon[4])) { throw new Error('The specified icon does not appear to be a Duotone icon. ' + 'Check that you specified the correct style: ' + ` ` + `or use: instead.`); } return definition; } buildParams() { const params = super.buildParams(); if (this.swapOpacity === true || this.swapOpacity === 'true') { params.classes.push('fa-swap-opacity'); } if (this.primaryOpacity != null) { params.styles['--fa-primary-opacity'] = this.primaryOpacity.toString(); } if (this.secondaryOpacity != null) { params.styles['--fa-secondary-opacity'] = this.secondaryOpacity.toString(); } if (this.primaryColor != null) { params.styles['--fa-primary-color'] = this.primaryColor; } if (this.secondaryColor != null) { params.styles['--fa-secondary-color'] = this.secondaryColor; } return params; } } FaDuotoneIconComponent.decorators = [ { type: Component, args: [{ selector: 'fa-duotone-icon', template: `` },] } ]; FaDuotoneIconComponent.propDecorators = { swapOpacity: [{ type: Input }], primaryOpacity: [{ type: Input }], secondaryOpacity: [{ type: Input }], primaryColor: [{ type: Input }], secondaryColor: [{ type: Input }] }; /** * Warns if parent component not existing. */ const faWarnIfParentNotExist = (parent, parentName, childName) => { if (!parent) { throw new Error(`${childName} should be used as child of ${parentName} only.`); } }; /** * Fontawesome layers. */ class FaLayersComponent { constructor(renderer, elementRef, config) { this.renderer = renderer; this.elementRef = elementRef; this.config = config; } ngOnInit() { this.renderer.addClass(this.elementRef.nativeElement, 'fa-layers'); this.fixedWidth = typeof this.fixedWidth === 'boolean' ? this.fixedWidth : this.config.fixedWidth; } ngOnChanges(changes) { if ('size' in changes) { if (changes.size.currentValue != null) { this.renderer.addClass(this.elementRef.nativeElement, `fa-${changes.size.currentValue}`); } if (changes.size.previousValue != null) { this.renderer.removeClass(this.elementRef.nativeElement, `fa-${changes.size.previousValue}`); } } } } FaLayersComponent.decorators = [ { type: Component, args: [{ selector: 'fa-layers', template: `` },] } ]; FaLayersComponent.ctorParameters = () => [ { type: Renderer2 }, { type: ElementRef }, { type: FaConfig } ]; FaLayersComponent.propDecorators = { size: [{ type: Input }], fixedWidth: [{ type: Input }, { type: HostBinding, args: ['class.fa-fw',] }] }; class FaLayersCounterComponent { constructor(parent, sanitizer) { this.parent = parent; this.sanitizer = sanitizer; this.classes = []; faWarnIfParentNotExist(this.parent, 'FaLayersComponent', this.constructor.name); } ngOnChanges(changes) { if (changes) { const params = this.buildParams(); this.updateContent(params); } } buildParams() { return { title: this.title, classes: this.classes, styles: this.styles, }; } updateContent(params) { this.renderedHTML = this.sanitizer.bypassSecurityTrustHtml(counter(this.content || '', params).html.join('')); } } FaLayersCounterComponent.decorators = [ { type: Component, args: [{ selector: 'fa-layers-counter', template: '', host: { class: 'ng-fa-layers-counter', } },] } ]; FaLayersCounterComponent.ctorParameters = () => [ { type: FaLayersComponent, decorators: [{ type: Optional }] }, { type: DomSanitizer } ]; FaLayersCounterComponent.propDecorators = { content: [{ type: Input }], title: [{ type: Input }], styles: [{ type: Input }], classes: [{ type: Input }], renderedHTML: [{ type: HostBinding, args: ['innerHTML',] }] }; class FaLayersTextComponent { constructor(parent, sanitizer) { this.parent = parent; this.sanitizer = sanitizer; this.classes = []; faWarnIfParentNotExist(this.parent, 'FaLayersComponent', this.constructor.name); } ngOnChanges(changes) { if (changes) { const params = this.buildParams(); this.updateContent(params); } } /** * Updating params by component props. */ buildParams() { const classOpts = { flip: this.flip, spin: this.spin, pulse: this.pulse, border: this.border, inverse: this.inverse, size: this.size || null, pull: this.pull || null, rotate: this.rotate || null, fixedWidth: this.fixedWidth, }; const parsedTransform = typeof this.transform === 'string' ? parse.transform(this.transform) : this.transform; return { transform: parsedTransform, classes: [...faClassList(classOpts), ...this.classes], title: this.title, styles: this.styles, }; } updateContent(params) { this.renderedHTML = this.sanitizer.bypassSecurityTrustHtml(text(this.content || '', params).html.join('\n')); } } FaLayersTextComponent.decorators = [ { type: Component, args: [{ selector: 'fa-layers-text', template: '', host: { class: 'ng-fa-layers-text', } },] } ]; FaLayersTextComponent.ctorParameters = () => [ { type: FaLayersComponent, decorators: [{ type: Optional }] }, { type: DomSanitizer } ]; FaLayersTextComponent.propDecorators = { content: [{ type: Input }], title: [{ type: Input }], styles: [{ type: Input }], classes: [{ type: Input }], spin: [{ type: Input }], pulse: [{ type: Input }], flip: [{ type: Input }], size: [{ type: Input }], pull: [{ type: Input }], border: [{ type: Input }], inverse: [{ type: Input }], rotate: [{ type: Input }], fixedWidth: [{ type: Input }], transform: [{ type: Input }], renderedHTML: [{ type: HostBinding, args: ['innerHTML',] }] }; class FontAwesomeModule { } FontAwesomeModule.decorators = [ { type: NgModule, args: [{ declarations: [ FaIconComponent, FaDuotoneIconComponent, FaLayersComponent, FaLayersTextComponent, FaLayersCounterComponent, FaStackComponent, FaStackItemSizeDirective, ], exports: [ FaIconComponent, FaDuotoneIconComponent, FaLayersComponent, FaLayersTextComponent, FaLayersCounterComponent, FaStackComponent, FaStackItemSizeDirective, ], },] } ]; /** * Generated bundle index. Do not edit. */ export { FaConfig, FaDuotoneIconComponent, FaIconComponent, FaIconLibrary, FaLayersComponent, FaLayersCounterComponent, FaLayersTextComponent, FaStackComponent, FaStackItemSizeDirective, FontAwesomeModule }; //# sourceMappingURL=angular-fontawesome.js.map