@angulogic/ng-sidebar
Version:
angular sidebar
69 lines • 7.88 kB
JavaScript
import { Component, HostBinding, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/platform-browser";
import * as i2 from "../../ng-sidebar.service";
/**
* A component that dynamically loads and displays SVG icons or image sources.
* If an SVG file is provided, it fetches and sanitizes it to prevent security risks.
* Otherwise, it renders an image element with the given source.
*
* @export
* @class AlIconComponent
*/
export class AlIconComponent {
/**
* Sets the source of the icon. If an SVG file is detected, it is loaded and sanitized.
* Otherwise, an image element is created.
*
* @param {string | undefined} content - The source URL or inline SVG content.
*/
set icon(content) {
if (!content)
return;
// Load and sanitize SVG content
if (content.endsWith('.svg')) {
this.sidebarService
.loadSvg(content)
.then(svg => {
this.safeSvg = this.sanitizer.bypassSecurityTrustHtml(svg);
})
.catch(error => {
console.error('Error loading SVG:', error);
this.safeSvg = undefined;
});
}
else {
// Render as an <img> tag
this.safeSvg = this.sanitizer.bypassSecurityTrustHtml(`<img src="${content}" />`);
}
}
/**
* Creates an instance of `AlIconComponent`.
*
* @param {DomSanitizer} sanitizer - Angular's sanitizer service to bypass security restrictions.
* @param {NgSidebarService} sidebarService - The sidebar service used to fetch SVG content.
*/
constructor(sanitizer, sidebarService) {
this.sanitizer = sanitizer;
this.sidebarService = sidebarService;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlIconComponent, deps: [{ token: i1.DomSanitizer }, { token: i2.NgSidebarService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlIconComponent, selector: "al-icon", inputs: { icon: "icon" }, host: { properties: { "innerHTML": "this.safeSvg" }, styleAttribute: "display: flex;", classAttribute: "al-icon" }, ngImport: i0, template: ``, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlIconComponent, decorators: [{
type: Component,
args: [{
selector: 'al-icon',
template: ``,
host: {
class: 'al-icon',
style: 'display: flex;',
},
}]
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i2.NgSidebarService }], propDecorators: { safeSvg: [{
type: HostBinding,
args: ['innerHTML']
}], icon: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWwtaWNvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1zaWRlYmFyL3NyYy9saWIvY29tcG9uZW50L2FsLWljb24vYWwtaWNvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBSTlEOzs7Ozs7O0dBT0c7QUFTSCxNQUFNLE9BQU8sZUFBZTtJQVkxQjs7Ozs7T0FLRztJQUNILElBQWEsSUFBSSxDQUFDLE9BQTJCO1FBQzNDLElBQUksQ0FBQyxPQUFPO1lBQUUsT0FBTztRQUVyQixnQ0FBZ0M7UUFDaEMsSUFBSSxPQUFPLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUM7WUFDN0IsSUFBSSxDQUFDLGNBQWM7aUJBQ2hCLE9BQU8sQ0FBQyxPQUFPLENBQUM7aUJBQ2hCLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRTtnQkFDVixJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsdUJBQXVCLENBQUMsR0FBRyxDQUFDLENBQUM7WUFDN0QsQ0FBQyxDQUFDO2lCQUNELEtBQUssQ0FBQyxLQUFLLENBQUMsRUFBRTtnQkFDYixPQUFPLENBQUMsS0FBSyxDQUFDLG9CQUFvQixFQUFFLEtBQUssQ0FBQyxDQUFDO2dCQUMzQyxJQUFJLENBQUMsT0FBTyxHQUFHLFNBQVMsQ0FBQztZQUMzQixDQUFDLENBQUMsQ0FBQztRQUNQLENBQUM7YUFBTSxDQUFDO1lBQ04seUJBQXlCO1lBQ3pCLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyx1QkFBdUIsQ0FDbkQsYUFBYSxPQUFPLE1BQU0sQ0FDM0IsQ0FBQztRQUNKLENBQUM7SUFDSCxDQUFDO0lBRUQ7Ozs7O09BS0c7SUFDSCxZQUNVLFNBQXVCLEVBQ3ZCLGNBQWdDO1FBRGhDLGNBQVMsR0FBVCxTQUFTLENBQWM7UUFDdkIsbUJBQWMsR0FBZCxjQUFjLENBQWtCO0lBQ3ZDLENBQUM7K0dBakRPLGVBQWU7bUdBQWYsZUFBZSw2TEFOaEIsRUFBRTs7NEZBTUQsZUFBZTtrQkFSM0IsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsU0FBUztvQkFDbkIsUUFBUSxFQUFFLEVBQUU7b0JBQ1osSUFBSSxFQUFFO3dCQUNKLEtBQUssRUFBRSxTQUFTO3dCQUNoQixLQUFLLEVBQUUsZ0JBQWdCO3FCQUN4QjtpQkFDRjtnSEFNMkIsT0FBTztzQkFBaEMsV0FBVzt1QkFBQyxXQUFXO2dCQWFYLElBQUk7c0JBQWhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBTYWZlSHRtbCwgRG9tU2FuaXRpemVyIH0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlcic7XHJcbmltcG9ydCB7IE5nU2lkZWJhclNlcnZpY2UgfSBmcm9tICcuLi8uLi9uZy1zaWRlYmFyLnNlcnZpY2UnO1xyXG5cclxuLyoqXHJcbiAqIEEgY29tcG9uZW50IHRoYXQgZHluYW1pY2FsbHkgbG9hZHMgYW5kIGRpc3BsYXlzIFNWRyBpY29ucyBvciBpbWFnZSBzb3VyY2VzLlxyXG4gKiBJZiBhbiBTVkcgZmlsZSBpcyBwcm92aWRlZCwgaXQgZmV0Y2hlcyBhbmQgc2FuaXRpemVzIGl0IHRvIHByZXZlbnQgc2VjdXJpdHkgcmlza3MuXHJcbiAqIE90aGVyd2lzZSwgaXQgcmVuZGVycyBhbiBpbWFnZSBlbGVtZW50IHdpdGggdGhlIGdpdmVuIHNvdXJjZS5cclxuICpcclxuICogQGV4cG9ydFxyXG4gKiBAY2xhc3MgQWxJY29uQ29tcG9uZW50XHJcbiAqL1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FsLWljb24nLFxyXG4gIHRlbXBsYXRlOiBgYCxcclxuICBob3N0OiB7XHJcbiAgICBjbGFzczogJ2FsLWljb24nLFxyXG4gICAgc3R5bGU6ICdkaXNwbGF5OiBmbGV4OycsXHJcbiAgfSxcclxufSlcclxuZXhwb3J0IGNsYXNzIEFsSWNvbkNvbXBvbmVudCB7XHJcbiAgLyoqXHJcbiAgICogU3RvcmVzIHRoZSBzYW5pdGl6ZWQgU1ZHIGNvbnRlbnQgb3IgaW1hZ2UgZWxlbWVudC5cclxuICAgKiBUaGUgY29udGVudCBpcyBkaXJlY3RseSBib3VuZCB0byB0aGUgY29tcG9uZW50J3MgYGlubmVySFRNTGAuXHJcbiAgICovXHJcbiAgQEhvc3RCaW5kaW5nKCdpbm5lckhUTUwnKSBzYWZlU3ZnOiBTYWZlSHRtbCB8IHVuZGVmaW5lZDtcclxuXHJcbiAgLyoqXHJcbiAgICogU3RvcmVzIHRoZSBpbWFnZSBzb3VyY2UgVVJMIHdoZW4gYW4gaW1hZ2UgKG5vbi1TVkcpIGlzIHByb3ZpZGVkLlxyXG4gICAqL1xyXG4gIGltZ1NvdXJjZT86IHN0cmluZztcclxuXHJcbiAgLyoqXHJcbiAgICogU2V0cyB0aGUgc291cmNlIG9mIHRoZSBpY29uLiBJZiBhbiBTVkcgZmlsZSBpcyBkZXRlY3RlZCwgaXQgaXMgbG9hZGVkIGFuZCBzYW5pdGl6ZWQuXHJcbiAgICogT3RoZXJ3aXNlLCBhbiBpbWFnZSBlbGVtZW50IGlzIGNyZWF0ZWQuXHJcbiAgICpcclxuICAgKiBAcGFyYW0ge3N0cmluZyB8IHVuZGVmaW5lZH0gY29udGVudCAtIFRoZSBzb3VyY2UgVVJMIG9yIGlubGluZSBTVkcgY29udGVudC5cclxuICAgKi9cclxuICBASW5wdXQoKSBzZXQgaWNvbihjb250ZW50OiBzdHJpbmcgfCB1bmRlZmluZWQpIHtcclxuICAgIGlmICghY29udGVudCkgcmV0dXJuO1xyXG5cclxuICAgIC8vIExvYWQgYW5kIHNhbml0aXplIFNWRyBjb250ZW50XHJcbiAgICBpZiAoY29udGVudC5lbmRzV2l0aCgnLnN2ZycpKSB7XHJcbiAgICAgIHRoaXMuc2lkZWJhclNlcnZpY2VcclxuICAgICAgICAubG9hZFN2Zyhjb250ZW50KVxyXG4gICAgICAgIC50aGVuKHN2ZyA9PiB7XHJcbiAgICAgICAgICB0aGlzLnNhZmVTdmcgPSB0aGlzLnNhbml0aXplci5ieXBhc3NTZWN1cml0eVRydXN0SHRtbChzdmcpO1xyXG4gICAgICAgIH0pXHJcbiAgICAgICAgLmNhdGNoKGVycm9yID0+IHtcclxuICAgICAgICAgIGNvbnNvbGUuZXJyb3IoJ0Vycm9yIGxvYWRpbmcgU1ZHOicsIGVycm9yKTtcclxuICAgICAgICAgIHRoaXMuc2FmZVN2ZyA9IHVuZGVmaW5lZDtcclxuICAgICAgICB9KTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIC8vIFJlbmRlciBhcyBhbiA8aW1nPiB0YWdcclxuICAgICAgdGhpcy5zYWZlU3ZnID0gdGhpcy5zYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdEh0bWwoXHJcbiAgICAgICAgYDxpbWcgc3JjPVwiJHtjb250ZW50fVwiIC8+YFxyXG4gICAgICApO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogQ3JlYXRlcyBhbiBpbnN0YW5jZSBvZiBgQWxJY29uQ29tcG9uZW50YC5cclxuICAgKlxyXG4gICAqIEBwYXJhbSB7RG9tU2FuaXRpemVyfSBzYW5pdGl6ZXIgLSBBbmd1bGFyJ3Mgc2FuaXRpemVyIHNlcnZpY2UgdG8gYnlwYXNzIHNlY3VyaXR5IHJlc3RyaWN0aW9ucy5cclxuICAgKiBAcGFyYW0ge05nU2lkZWJhclNlcnZpY2V9IHNpZGViYXJTZXJ2aWNlIC0gVGhlIHNpZGViYXIgc2VydmljZSB1c2VkIHRvIGZldGNoIFNWRyBjb250ZW50LlxyXG4gICAqL1xyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSBzYW5pdGl6ZXI6IERvbVNhbml0aXplcixcclxuICAgIHByaXZhdGUgc2lkZWJhclNlcnZpY2U6IE5nU2lkZWJhclNlcnZpY2VcclxuICApIHt9XHJcbn1cclxuIl19