@ng-doc/ui-kit
Version:
<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>
76 lines (72 loc) • 4.32 kB
JavaScript
import { HttpClient } from '@angular/common/http';
import * as i0 from '@angular/core';
import { inject, ElementRef, numberAttribute, Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
import { NgDocCacheInterceptor } from '@ng-doc/ui-kit/interceptors';
import { NG_REQUEST_BASE_PATH, NG_DOC_ASSETS_PATH, NG_DOC_CUSTOM_ICONS_PATH } from '@ng-doc/ui-kit/tokens';
import { Subject, of } from 'rxjs';
import { startWith, switchMap, catchError } from 'rxjs/operators';
class NgDocIconComponent {
constructor() {
this.elementRef = inject(ElementRef);
this.httpClient = inject(HttpClient);
this.baseUrl = inject(NG_REQUEST_BASE_PATH);
/** Icon name */
this.icon = '';
/** Custom icon name, if not set, `icon` will be used */
this.customIcon = '';
/** Icon size */
this.size = 16;
this.reload$ = new Subject();
this.assetsPath = inject(NG_DOC_ASSETS_PATH, { optional: true }) ?? '';
this.customIconsPath = inject(NG_DOC_CUSTOM_ICONS_PATH, { optional: true }) ?? '';
}
ngOnChanges() {
this.reload$.next();
}
ngOnInit() {
this.reload$
.pipe(startWith(null), switchMap(() => this.httpClient
.get(this.href, {
responseType: 'text',
params: { [NgDocCacheInterceptor.TOKEN]: 'true' },
})
.pipe(catchError((e) => {
console.error(e);
return of('');
}))))
.subscribe((svg) => (this.elementRef.nativeElement.innerHTML = svg));
}
get href() {
return (this.baseUrl +
(this.customIcon
? `${this.customIconsPath}/${this.customIcon}.svg#${this.customIcon}`
: `${this.assetsPath}/icons/${this.size}/${this.icon}.svg#${this.icon}`));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.3", type: NgDocIconComponent, isStandalone: true, selector: "ng-doc-icon", inputs: { icon: "icon", customIcon: "customIcon", size: ["size", "size", numberAttribute] }, host: { properties: { "attr.data-ng-doc-icon": "this.icon", "attr.data-ng-doc-custom-icon": "this.customIcon", "attr.data-ng-doc-size": "this.size" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;width:var(--ng-doc-icon-width, 16px);height:var(--ng-doc-icon-height, 16px);color:var(--ng-doc-icon-color, var(--ng-doc-text));vertical-align:sub}:host svg{vertical-align:top}:host[data-ng-doc-size=\"24\"]{width:var(--ng-doc-icon-width, 24px);height:var(--ng-dpc-icon-height, 24px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocIconComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-icon', template: '', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;width:var(--ng-doc-icon-width, 16px);height:var(--ng-doc-icon-height, 16px);color:var(--ng-doc-icon-color, var(--ng-doc-text));vertical-align:sub}:host svg{vertical-align:top}:host[data-ng-doc-size=\"24\"]{width:var(--ng-doc-icon-width, 24px);height:var(--ng-dpc-icon-height, 24px)}\n"] }]
}], ctorParameters: () => [], propDecorators: { icon: [{
type: Input
}, {
type: HostBinding,
args: ['attr.data-ng-doc-icon']
}], customIcon: [{
type: Input
}, {
type: HostBinding,
args: ['attr.data-ng-doc-custom-icon']
}], size: [{
type: Input,
args: [{ transform: numberAttribute }]
}, {
type: HostBinding,
args: ['attr.data-ng-doc-size']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocIconComponent };
//# sourceMappingURL=ng-doc-ui-kit-components-icon.mjs.map