123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683 |
- import * as i0 from '@angular/core';
- import { Injectable, input, effect, Directive, computed, ChangeDetectionStrategy, Component, model, inject, DOCUMENT, NgModule } from '@angular/core';
- import { DomSanitizer } from '@angular/platform-browser';
- import { config, dom, icon, parse, counter, text } from '@fortawesome/fontawesome-svg-core';
- class FaConfig {
- /**
- * Default prefix to use, when one is not provided with the icon name.
- *
- * @default 'fas'
- */
- 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
- */
- fallbackIcon = null;
- /**
- * Set icons to the same fixed width.
- *
- * @see {@link: https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons}
- * @default false
- */
- fixedWidth;
- /**
- * Automatically add Font Awesome styles to the document when icon is rendered.
- *
- * For the majority of the cases the automatically added CSS is sufficient,
- * please refer to the linked guide for more information on when to disable
- * this feature.
- *
- * @see {@link: https://github.com/FortAwesome/angular-fontawesome/blob/main/docs/guide/adding-css.md}
- * @default true
- */
- set autoAddCss(value) {
- config.autoAddCss = value;
- this._autoAddCss = value;
- }
- get autoAddCss() {
- return this._autoAddCss;
- }
- _autoAddCss = true;
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaConfig, providedIn: 'root' });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaConfig, decorators: [{
- type: Injectable,
- args: [{ providedIn: 'root' }]
- }] });
- class FaIconLibrary {
- 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;
- for (const alias of icon.icon[2]) {
- if (typeof alias === 'string') {
- this.definitions[icon.prefix][alias] = 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;
- }
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaIconLibrary, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaIconLibrary, providedIn: 'root' });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: 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.');
- };
- const isKnownRotateValue = (rotate) => rotate != null &&
- (rotate === 90 || rotate === 180 || rotate === 270 || rotate === '90' || rotate === '180' || rotate === '270');
- /**
- * Fontawesome class list.
- * Returns classes array by props.
- */
- const faClassList = (props) => {
- const knownRotateValue = isKnownRotateValue(props.rotate);
- const classes = {
- [`fa-${props.animation}`]: props.animation != null && !props.animation.startsWith('spin'),
- 'fa-spin': props.animation === 'spin' || props.animation === 'spin-reverse',
- 'fa-spin-pulse': props.animation === 'spin-pulse' || props.animation === 'spin-pulse-reverse',
- 'fa-spin-reverse': props.animation === 'spin-reverse' || props.animation === 'spin-pulse-reverse',
- // According to https://fontawesome.com/docs/web/style/animate#spin fa-pulse
- // class is deprecated, remove the below line when Font Awesome 5 support
- // is dropped.
- 'fa-pulse': props.animation === 'spin-pulse' || props.animation === 'spin-pulse-reverse',
- '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}`]: knownRotateValue,
- 'fa-rotate-by': props.rotate != null && !knownRotateValue,
- [`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 != null);
- };
- const cssInserted = new WeakSet();
- const autoCssId = 'fa-auto-css';
- /**
- * Ensure that Font Awesome CSS is inserted into the page.
- *
- * SVG Core has the same logic to insert the same styles into the page, however
- * it's not aware of Angular SSR and therefore styles won't be added in that
- * context leading to https://github.com/FortAwesome/angular-fontawesome/issues/48.
- * That's why the same logic is duplicated here.
- *
- * @param document - Document.
- * @param config - Font Awesome configuration.
- */
- function ensureCss(document, config) {
- if (!config.autoAddCss) {
- return;
- }
- if (cssInserted.has(document)) {
- return;
- }
- // Prevent adding the same styles again after hydration.
- if (document.getElementById(autoCssId) != null) {
- config.autoAddCss = false;
- cssInserted.add(document);
- return;
- }
- const style = document.createElement('style');
- style.setAttribute('type', 'text/css');
- style.setAttribute('id', autoCssId);
- style.innerHTML = dom.css();
- const headChildren = document.head.childNodes;
- let beforeChild = null;
- for (let i = headChildren.length - 1; i > -1; i--) {
- const child = headChildren[i];
- const tagName = child.nodeName.toUpperCase();
- if (['STYLE', 'LINK'].indexOf(tagName) > -1) {
- beforeChild = child;
- }
- }
- document.head.insertBefore(style, beforeChild);
- // Prevent SVG Core from adding the same styles.
- //
- // As the logic is present in two places and SVG Core is not aware about
- // this library, it may lead to styles being added twice. This can only
- // occur when icon is rendered by SVG Core before the Angular component
- // and should not have any significant negative impact. This is a rare
- // use case, and it's tricky to prevent, so we accept this behavior. Consumer
- // can choose to disable `FaConfig.autoAddCss` and add styles manually to
- // prevent this from happening.
- config.autoAddCss = false;
- cssInserted.add(document);
- }
- /**
- * Returns if is IconLookup or not.
- */
- const isIconLookup = (i) => 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] };
- }
- return { prefix: defaultPrefix, iconName: iconSpec };
- };
- class FaStackItemSizeDirective {
- /**
- * Specify whether icon inside {@link FaStackComponent} should be rendered in
- * regular size (1x) or as a larger icon (2x).
- */
- stackItemSize = input('1x');
- /**
- * @internal
- */
- size = input();
- _effect = effect(() => {
- const size = this.size();
- if (size) {
- throw new Error('fa-icon is not allowed to customize size when used inside fa-stack. ' +
- 'Set size on the enclosing fa-stack instead: <fa-stack size="4x">...</fa-stack>.');
- }
- });
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaStackItemSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: FaStackItemSizeDirective, isStandalone: true, selector: "fa-icon[stackItemSize],fa-duotone-icon[stackItemSize]", inputs: { stackItemSize: { classPropertyName: "stackItemSize", publicName: "stackItemSize", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaStackItemSizeDirective, decorators: [{
- type: Directive,
- args: [{
- // eslint-disable-next-line @angular-eslint/directive-selector
- selector: 'fa-icon[stackItemSize],fa-duotone-icon[stackItemSize]',
- }]
- }] });
- class FaStackComponent {
- /**
- * Size of the stacked icon.
- * Note that stacked icon is by default 2 times bigger, than non-stacked icon.
- * You'll need to set size using custom CSS to align stacked icon with a
- * simple one. E.g. `fa-stack { font-size: 0.5em; }`.
- */
- size = input();
- classes = computed(() => {
- const sizeValue = this.size();
- const sizeClass = sizeValue ? { [`fa-${sizeValue}`]: true } : {};
- return {
- ...sizeClass,
- 'fa-stack': true,
- };
- });
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: FaStackComponent, isStandalone: true, selector: "fa-stack", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaStackComponent, decorators: [{
- type: Component,
- args: [{
- selector: 'fa-stack',
- template: `<ng-content></ng-content>`,
- host: {
- '[class]': 'classes()',
- },
- changeDetection: ChangeDetectionStrategy.OnPush,
- }]
- }] });
- class FaIconComponent {
- icon = model.required();
- /**
- * Specify a title for the icon.
- *
- * This text will be displayed in a tooltip on hover and presented to the
- * screen readers.
- */
- title = model();
- /**
- * Icon animation.
- *
- * Most of the animations are only available when using Font Awesome 6. With
- * Font Awesome 5, only 'spin' and 'spin-pulse' are supported.
- */
- animation = model();
- mask = model();
- flip = model();
- size = model();
- pull = model();
- border = model();
- inverse = model();
- symbol = model();
- rotate = model();
- fixedWidth = model();
- transform = model();
- /**
- * Specify the `role` attribute for the rendered <svg> element.
- *
- * @default 'img'
- */
- a11yRole = model();
- renderedIconHTML = computed(() => {
- const iconValue = this.icon();
- if (iconValue == null && this.config.fallbackIcon == null) {
- faWarnIfIconSpecMissing();
- return '';
- }
- const iconDefinition = this.findIconDefinition(iconValue ?? this.config.fallbackIcon);
- if (!iconDefinition) {
- return '';
- }
- const params = this.buildParams();
- ensureCss(this.document, this.config);
- const renderedIcon = icon(iconDefinition, params);
- return this.sanitizer.bypassSecurityTrustHtml(renderedIcon.html.join('\n'));
- });
- document = inject(DOCUMENT);
- sanitizer = inject(DomSanitizer);
- config = inject(FaConfig);
- iconLibrary = inject(FaIconLibrary);
- stackItem = inject(FaStackItemSizeDirective, { optional: true });
- stack = inject(FaStackComponent, { optional: true });
- constructor() {
- if (this.stack != null && this.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>.');
- }
- }
- 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 fixedWidth = this.fixedWidth();
- const classOpts = {
- flip: this.flip(),
- animation: this.animation(),
- border: this.border(),
- inverse: this.inverse(),
- size: this.size(),
- pull: this.pull(),
- rotate: this.rotate(),
- fixedWidth: typeof fixedWidth === 'boolean' ? fixedWidth : this.config.fixedWidth,
- stackItemSize: this.stackItem != null ? this.stackItem.stackItemSize() : undefined,
- };
- const transform = this.transform();
- const parsedTransform = typeof transform === 'string' ? parse.transform(transform) : transform;
- const mask = this.mask();
- const maskIconDefinition = mask != null ? this.findIconDefinition(mask) : null;
- const attributes = {};
- const a11yRole = this.a11yRole();
- if (a11yRole != null) {
- attributes['role'] = a11yRole;
- }
- const styles = {};
- if (classOpts.rotate != null && !isKnownRotateValue(classOpts.rotate)) {
- styles['--fa-rotate-angle'] = `${classOpts.rotate}`;
- }
- return {
- title: this.title(),
- transform: parsedTransform,
- classes: faClassList(classOpts),
- mask: maskIconDefinition ?? undefined,
- symbol: this.symbol(),
- attributes,
- styles,
- };
- }
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: FaIconComponent, isStandalone: true, selector: "fa-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pull: { classPropertyName: "pull", publicName: "pull", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, inverse: { classPropertyName: "inverse", publicName: "inverse", isSignal: true, isRequired: false, transformFunction: null }, symbol: { classPropertyName: "symbol", publicName: "symbol", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null }, fixedWidth: { classPropertyName: "fixedWidth", publicName: "fixedWidth", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null }, a11yRole: { classPropertyName: "a11yRole", publicName: "a11yRole", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { icon: "iconChange", title: "titleChange", animation: "animationChange", mask: "maskChange", flip: "flipChange", size: "sizeChange", pull: "pullChange", border: "borderChange", inverse: "inverseChange", symbol: "symbolChange", rotate: "rotateChange", fixedWidth: "fixedWidthChange", transform: "transformChange", a11yRole: "a11yRoleChange" }, host: { properties: { "attr.title": "title()", "innerHTML": "renderedIconHTML()" }, classAttribute: "ng-fa-icon" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaIconComponent, decorators: [{
- type: Component,
- args: [{
- selector: 'fa-icon',
- template: ``,
- host: {
- class: 'ng-fa-icon',
- '[attr.title]': 'title()',
- '[innerHTML]': 'renderedIconHTML()',
- },
- changeDetection: ChangeDetectionStrategy.OnPush,
- }]
- }], ctorParameters: () => [] });
- class FaDuotoneIconComponent extends FaIconComponent {
- /**
- * Swap the default opacity of each duotone icon’s layers. This will make an
- * icon’s primary layer have the default opacity of 40% rather than its
- * secondary layer.
- *
- * @default false
- */
- swapOpacity = input();
- /**
- * Customize the opacity of the primary icon layer.
- * Valid values are in range [0, 1.0].
- *
- * @default 1.0
- */
- primaryOpacity = input();
- /**
- * Customize the opacity of the secondary icon layer.
- * Valid values are in range [0, 1.0].
- *
- * @default 0.4
- */
- secondaryOpacity = input();
- /**
- * Customize the color of the primary icon layer.
- * Accepts any valid CSS color value.
- *
- * @default CSS inherited color
- */
- primaryColor = input();
- /**
- * Customize the color of the secondary icon layer.
- * Accepts any valid CSS color value.
- *
- * @default CSS inherited color
- */
- secondaryColor = input();
- 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: ' +
- `<fa-duotone-icon [icon]="['fad', '${definition.iconName}']"></fa-duotone-icon> ` +
- `or use: <fa-icon icon="${definition.iconName}"></fa-icon> instead.`);
- }
- return definition;
- }
- buildParams() {
- const params = super.buildParams();
- const swapOpacity = this.swapOpacity();
- if (swapOpacity === true || swapOpacity === 'true') {
- if (Array.isArray(params.classes)) {
- params.classes.push('fa-swap-opacity');
- }
- else if (typeof params.classes === 'string') {
- params.classes = [params.classes, 'fa-swap-opacity'];
- }
- else {
- params.classes = ['fa-swap-opacity'];
- }
- }
- if (params.styles == null) {
- params.styles = {};
- }
- const primaryOpacity = this.primaryOpacity();
- if (primaryOpacity != null) {
- params.styles['--fa-primary-opacity'] = primaryOpacity.toString();
- }
- const secondaryOpacity = this.secondaryOpacity();
- if (secondaryOpacity != null) {
- params.styles['--fa-secondary-opacity'] = secondaryOpacity.toString();
- }
- const primaryColor = this.primaryColor();
- if (primaryColor != null) {
- params.styles['--fa-primary-color'] = primaryColor;
- }
- const secondaryColor = this.secondaryColor();
- if (secondaryColor != null) {
- params.styles['--fa-secondary-color'] = secondaryColor;
- }
- return params;
- }
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaDuotoneIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: FaDuotoneIconComponent, isStandalone: true, selector: "fa-duotone-icon", inputs: { swapOpacity: { classPropertyName: "swapOpacity", publicName: "swapOpacity", isSignal: true, isRequired: false, transformFunction: null }, primaryOpacity: { classPropertyName: "primaryOpacity", publicName: "primaryOpacity", isSignal: true, isRequired: false, transformFunction: null }, secondaryOpacity: { classPropertyName: "secondaryOpacity", publicName: "secondaryOpacity", isSignal: true, isRequired: false, transformFunction: null }, primaryColor: { classPropertyName: "primaryColor", publicName: "primaryColor", isSignal: true, isRequired: false, transformFunction: null }, secondaryColor: { classPropertyName: "secondaryColor", publicName: "secondaryColor", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaDuotoneIconComponent, decorators: [{
- type: Component,
- args: [{
- selector: 'fa-duotone-icon',
- template: ``,
- changeDetection: ChangeDetectionStrategy.OnPush,
- }]
- }] });
- /**
- * 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 {
- size = input();
- fixedWidth = input();
- faFw = computed(() => {
- const fixedWidth = this.fixedWidth();
- return typeof fixedWidth === 'boolean' ? fixedWidth : this.config.fixedWidth;
- });
- classes = computed(() => {
- const sizeValue = this.size();
- const sizeClass = sizeValue ? { [`fa-${sizeValue}`]: true } : {};
- return {
- ...sizeClass,
- 'fa-fw': this.faFw(),
- 'fa-layers': true,
- };
- });
- document = inject(DOCUMENT);
- config = inject(FaConfig);
- ngOnInit() {
- ensureCss(this.document, this.config);
- }
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaLayersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: FaLayersComponent, isStandalone: true, selector: "fa-layers", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fixedWidth: { classPropertyName: "fixedWidth", publicName: "fixedWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaLayersComponent, decorators: [{
- type: Component,
- args: [{
- selector: 'fa-layers',
- template: `<ng-content></ng-content>`,
- host: {
- '[class]': 'classes()',
- },
- changeDetection: ChangeDetectionStrategy.OnPush,
- }]
- }] });
- class FaLayersCounterComponent {
- content = input.required();
- title = input();
- position = input();
- renderedHTML = computed(() => {
- const params = this.buildParams();
- return this.updateContent(params);
- });
- document = inject(DOCUMENT);
- config = inject(FaConfig);
- parent = inject(FaLayersComponent, { optional: true });
- sanitizer = inject(DomSanitizer);
- constructor() {
- faWarnIfParentNotExist(this.parent, 'FaLayersComponent', this.constructor.name);
- }
- buildParams() {
- const position = this.position();
- return {
- title: this.title(),
- classes: position != null ? [`fa-layers-${position}`] : undefined,
- };
- }
- updateContent(params) {
- ensureCss(this.document, this.config);
- return this.sanitizer.bypassSecurityTrustHtml(counter(this.content() || '', params).html.join(''));
- }
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaLayersCounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: FaLayersCounterComponent, isStandalone: true, selector: "fa-layers-counter", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "innerHTML": "renderedHTML()" }, classAttribute: "ng-fa-layers-counter" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaLayersCounterComponent, decorators: [{
- type: Component,
- args: [{
- selector: 'fa-layers-counter',
- template: '',
- host: {
- class: 'ng-fa-layers-counter',
- '[innerHTML]': 'renderedHTML()',
- },
- changeDetection: ChangeDetectionStrategy.OnPush,
- }]
- }], ctorParameters: () => [] });
- class FaLayersTextComponent {
- content = input.required();
- title = input();
- flip = input();
- size = input();
- pull = input();
- border = input();
- inverse = input();
- rotate = input();
- fixedWidth = input();
- transform = input();
- renderedHTML = computed(() => {
- const params = this.buildParams();
- return this.updateContent(params);
- });
- document = inject(DOCUMENT);
- config = inject(FaConfig);
- parent = inject(FaLayersComponent, { optional: true });
- sanitizer = inject(DomSanitizer);
- constructor() {
- faWarnIfParentNotExist(this.parent, 'FaLayersComponent', this.constructor.name);
- }
- /**
- * Updating params by component props.
- */
- buildParams() {
- const classOpts = {
- flip: this.flip(),
- border: this.border(),
- inverse: this.inverse(),
- size: this.size(),
- pull: this.pull(),
- rotate: this.rotate(),
- fixedWidth: this.fixedWidth(),
- };
- const transform = this.transform();
- const parsedTransform = typeof transform === 'string' ? parse.transform(transform) : transform;
- const styles = {};
- if (classOpts.rotate != null && !isKnownRotateValue(classOpts.rotate)) {
- styles['--fa-rotate-angle'] = `${classOpts.rotate}`;
- }
- return {
- transform: parsedTransform,
- classes: faClassList(classOpts),
- title: this.title(),
- styles,
- };
- }
- updateContent(params) {
- ensureCss(this.document, this.config);
- return this.sanitizer.bypassSecurityTrustHtml(text(this.content() || '', params).html.join('\n'));
- }
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaLayersTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: FaLayersTextComponent, isStandalone: true, selector: "fa-layers-text", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pull: { classPropertyName: "pull", publicName: "pull", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, inverse: { classPropertyName: "inverse", publicName: "inverse", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null }, fixedWidth: { classPropertyName: "fixedWidth", publicName: "fixedWidth", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "innerHTML": "renderedHTML()" }, classAttribute: "ng-fa-layers-text" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FaLayersTextComponent, decorators: [{
- type: Component,
- args: [{
- selector: 'fa-layers-text',
- template: '',
- host: {
- class: 'ng-fa-layers-text',
- '[innerHTML]': 'renderedHTML()',
- },
- changeDetection: ChangeDetectionStrategy.OnPush,
- }]
- }], ctorParameters: () => [] });
- class FontAwesomeModule {
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FontAwesomeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: FontAwesomeModule, imports: [FaIconComponent,
- FaDuotoneIconComponent,
- FaLayersComponent,
- FaLayersTextComponent,
- FaLayersCounterComponent,
- FaStackComponent,
- FaStackItemSizeDirective], exports: [FaIconComponent,
- FaDuotoneIconComponent,
- FaLayersComponent,
- FaLayersTextComponent,
- FaLayersCounterComponent,
- FaStackComponent,
- FaStackItemSizeDirective] });
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FontAwesomeModule });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FontAwesomeModule, decorators: [{
- type: NgModule,
- args: [{
- imports: [
- 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.mjs.map
|