@angulogic/ng-sidebar
Version:
angular sidebar - standalone components
70 lines • 8 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, isStandalone: true, 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;',
},
standalone: true
}]
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i2.NgSidebarService }], propDecorators: { safeSvg: [{
type: HostBinding,
args: ['innerHTML']
}], icon: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWwtaWNvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1zaWRlYmFyL3NyYy9saWIvY29tcG9uZW50L2FsLWljb24vYWwtaWNvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBSTlEOzs7Ozs7O0dBT0c7QUFVSCxNQUFNLE9BQU8sZUFBZTtJQVkxQjs7Ozs7T0FLRztJQUNILElBQWEsSUFBSSxDQUFDLE9BQTJCO1FBQzNDLElBQUksQ0FBQyxPQUFPO1lBQUUsT0FBTztRQUVyQixnQ0FBZ0M7UUFDaEMsSUFBSSxPQUFPLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUM7WUFDN0IsSUFBSSxDQUFDLGNBQWM7aUJBQ2hCLE9BQU8sQ0FBQyxPQUFPLENBQUM7aUJBQ2hCLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRTtnQkFDVixJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsdUJBQXVCLENBQUMsR0FBRyxDQUFDLENBQUM7WUFDN0QsQ0FBQyxDQUFDO2lCQUNELEtBQUssQ0FBQyxLQUFLLENBQUMsRUFBRTtnQkFDYixPQUFPLENBQUMsS0FBSyxDQUFDLG9CQUFvQixFQUFFLEtBQUssQ0FBQyxDQUFDO2dCQUMzQyxJQUFJLENBQUMsT0FBTyxHQUFHLFNBQVMsQ0FBQztZQUMzQixDQUFDLENBQUMsQ0FBQztRQUNQLENBQUM7YUFBTSxDQUFDO1lBQ04seUJBQXlCO1lBQ3pCLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyx1QkFBdUIsQ0FDbkQsYUFBYSxPQUFPLE1BQU0sQ0FDM0IsQ0FBQztRQUNKLENBQUM7SUFDSCxDQUFDO0lBRUQ7Ozs7O09BS0c7SUFDSCxZQUNVLFNBQXVCLEVBQ3ZCLGNBQWdDO1FBRGhDLGNBQVMsR0FBVCxTQUFTLENBQWM7UUFDdkIsbUJBQWMsR0FBZCxjQUFjLENBQWtCO0lBQ3ZDLENBQUM7K0dBakRPLGVBQWU7bUdBQWYsZUFBZSxpTkFQaEIsRUFBRTs7NEZBT0QsZUFBZTtrQkFUM0IsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsU0FBUztvQkFDbkIsUUFBUSxFQUFFLEVBQUU7b0JBQ1osSUFBSSxFQUFFO3dCQUNKLEtBQUssRUFBRSxTQUFTO3dCQUNoQixLQUFLLEVBQUUsZ0JBQWdCO3FCQUN4QjtvQkFDRCxVQUFVLEVBQUUsSUFBSTtpQkFDakI7Z0hBTTJCLE9BQU87c0JBQWhDLFdBQVc7dUJBQUMsV0FBVztnQkFhWCxJQUFJO3NCQUFoQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgU2FmZUh0bWwsIERvbVNhbml0aXplciB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xyXG5pbXBvcnQgeyBOZ1NpZGViYXJTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vbmctc2lkZWJhci5zZXJ2aWNlJztcclxuXHJcbi8qKlxyXG4gKiBBIGNvbXBvbmVudCB0aGF0IGR5bmFtaWNhbGx5IGxvYWRzIGFuZCBkaXNwbGF5cyBTVkcgaWNvbnMgb3IgaW1hZ2Ugc291cmNlcy5cclxuICogSWYgYW4gU1ZHIGZpbGUgaXMgcHJvdmlkZWQsIGl0IGZldGNoZXMgYW5kIHNhbml0aXplcyBpdCB0byBwcmV2ZW50IHNlY3VyaXR5IHJpc2tzLlxyXG4gKiBPdGhlcndpc2UsIGl0IHJlbmRlcnMgYW4gaW1hZ2UgZWxlbWVudCB3aXRoIHRoZSBnaXZlbiBzb3VyY2UuXHJcbiAqXHJcbiAqIEBleHBvcnRcclxuICogQGNsYXNzIEFsSWNvbkNvbXBvbmVudFxyXG4gKi9cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdhbC1pY29uJyxcclxuICB0ZW1wbGF0ZTogYGAsXHJcbiAgaG9zdDoge1xyXG4gICAgY2xhc3M6ICdhbC1pY29uJyxcclxuICAgIHN0eWxlOiAnZGlzcGxheTogZmxleDsnLFxyXG4gIH0sXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZVxyXG59KVxyXG5leHBvcnQgY2xhc3MgQWxJY29uQ29tcG9uZW50IHtcclxuICAvKipcclxuICAgKiBTdG9yZXMgdGhlIHNhbml0aXplZCBTVkcgY29udGVudCBvciBpbWFnZSBlbGVtZW50LlxyXG4gICAqIFRoZSBjb250ZW50IGlzIGRpcmVjdGx5IGJvdW5kIHRvIHRoZSBjb21wb25lbnQncyBgaW5uZXJIVE1MYC5cclxuICAgKi9cclxuICBASG9zdEJpbmRpbmcoJ2lubmVySFRNTCcpIHNhZmVTdmc6IFNhZmVIdG1sIHwgdW5kZWZpbmVkO1xyXG5cclxuICAvKipcclxuICAgKiBTdG9yZXMgdGhlIGltYWdlIHNvdXJjZSBVUkwgd2hlbiBhbiBpbWFnZSAobm9uLVNWRykgaXMgcHJvdmlkZWQuXHJcbiAgICovXHJcbiAgaW1nU291cmNlPzogc3RyaW5nO1xyXG5cclxuICAvKipcclxuICAgKiBTZXRzIHRoZSBzb3VyY2Ugb2YgdGhlIGljb24uIElmIGFuIFNWRyBmaWxlIGlzIGRldGVjdGVkLCBpdCBpcyBsb2FkZWQgYW5kIHNhbml0aXplZC5cclxuICAgKiBPdGhlcndpc2UsIGFuIGltYWdlIGVsZW1lbnQgaXMgY3JlYXRlZC5cclxuICAgKlxyXG4gICAqIEBwYXJhbSB7c3RyaW5nIHwgdW5kZWZpbmVkfSBjb250ZW50IC0gVGhlIHNvdXJjZSBVUkwgb3IgaW5saW5lIFNWRyBjb250ZW50LlxyXG4gICAqL1xyXG4gIEBJbnB1dCgpIHNldCBpY29uKGNvbnRlbnQ6IHN0cmluZyB8IHVuZGVmaW5lZCkge1xyXG4gICAgaWYgKCFjb250ZW50KSByZXR1cm47XHJcblxyXG4gICAgLy8gTG9hZCBhbmQgc2FuaXRpemUgU1ZHIGNvbnRlbnRcclxuICAgIGlmIChjb250ZW50LmVuZHNXaXRoKCcuc3ZnJykpIHtcclxuICAgICAgdGhpcy5zaWRlYmFyU2VydmljZVxyXG4gICAgICAgIC5sb2FkU3ZnKGNvbnRlbnQpXHJcbiAgICAgICAgLnRoZW4oc3ZnID0+IHtcclxuICAgICAgICAgIHRoaXMuc2FmZVN2ZyA9IHRoaXMuc2FuaXRpemVyLmJ5cGFzc1NlY3VyaXR5VHJ1c3RIdG1sKHN2Zyk7XHJcbiAgICAgICAgfSlcclxuICAgICAgICAuY2F0Y2goZXJyb3IgPT4ge1xyXG4gICAgICAgICAgY29uc29sZS5lcnJvcignRXJyb3IgbG9hZGluZyBTVkc6JywgZXJyb3IpO1xyXG4gICAgICAgICAgdGhpcy5zYWZlU3ZnID0gdW5kZWZpbmVkO1xyXG4gICAgICAgIH0pO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgLy8gUmVuZGVyIGFzIGFuIDxpbWc+IHRhZ1xyXG4gICAgICB0aGlzLnNhZmVTdmcgPSB0aGlzLnNhbml0aXplci5ieXBhc3NTZWN1cml0eVRydXN0SHRtbChcclxuICAgICAgICBgPGltZyBzcmM9XCIke2NvbnRlbnR9XCIgLz5gXHJcbiAgICAgICk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBDcmVhdGVzIGFuIGluc3RhbmNlIG9mIGBBbEljb25Db21wb25lbnRgLlxyXG4gICAqXHJcbiAgICogQHBhcmFtIHtEb21TYW5pdGl6ZXJ9IHNhbml0aXplciAtIEFuZ3VsYXIncyBzYW5pdGl6ZXIgc2VydmljZSB0byBieXBhc3Mgc2VjdXJpdHkgcmVzdHJpY3Rpb25zLlxyXG4gICAqIEBwYXJhbSB7TmdTaWRlYmFyU2VydmljZX0gc2lkZWJhclNlcnZpY2UgLSBUaGUgc2lkZWJhciBzZXJ2aWNlIHVzZWQgdG8gZmV0Y2ggU1ZHIGNvbnRlbnQuXHJcbiAgICovXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIHNhbml0aXplcjogRG9tU2FuaXRpemVyLFxyXG4gICAgcHJpdmF0ZSBzaWRlYmFyU2VydmljZTogTmdTaWRlYmFyU2VydmljZVxyXG4gICkge31cclxufVxyXG4iXX0=