@coreui/icons-angular/fesm2022/coreui-icons-angular.mjs

CoreUI Icons Angular component and service

import * as i0 from '@angular/core';
import { Injectable, inject, NgModule, input, computed, Directive, Renderer2, ElementRef, effect, viewChild, Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { NgClass } from '@angular/common';

class IconSetService {
    get iconNames() {
        return this.#iconNames;
    }
    #iconNames = {};
    get icons() {
        return this.#icons;
    }
    set icons(iconSet) {
        for (const iconsKey in iconSet) {
            this.#iconNames[iconsKey] = iconsKey;
        }
        this.#icons = iconSet;
    }
    #icons = {};
    getIcon(name) {
        const icon = this.icons[name];
        if (!icon) {
            console.warn(`CoreUI WARN: Icon ${name} is not registered in IconService`);
        }
        return this.icons[name];
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconSetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconSetService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconSetService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }] });

class IconSetModule {
    constructor() {
        const parentModule = inject(IconSetModule, { optional: true, skipSelf: true });
        if (parentModule) {
            throw new Error('CoreUI IconSetModule is already loaded. Import it in the AppModule only');
        }
    }
    static forRoot() {
        return {
            ngModule: IconSetModule,
            providers: [
                { provide: IconSetService }
            ]
        };
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconSetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: IconSetModule });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconSetModule, providers: [IconSetService] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconSetModule, decorators: [{
            type: NgModule,
            args: [{
                    providers: [IconSetService]
                }]
        }], ctorParameters: () => [] });

function toCamelCase(value) {
    return value.replace(/([-_][a-z0-9])/ig, ($1) => {
        return $1.toUpperCase().replace('-', '');
    });
}
function transformName(value) {
    return value && value.includes('-') ? toCamelCase(value) : value;
}

class IconDirective {
    #sanitizer = inject(DomSanitizer);
    #iconSet = inject(IconSetService);
    content = input(undefined, ...(ngDevMode ? [{ debugName: "content", alias: 'cIcon' }] : [{ alias: 'cIcon' }]));
    customClasses = input(...(ngDevMode ? [undefined, { debugName: "customClasses" }] : []));
    size = input('', ...(ngDevMode ? [{ debugName: "size" }] : []));
    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
    height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : []));
    width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
    name = input('', ...(ngDevMode ? [{ debugName: "name", transform: transformName }] : [{ transform: transformName }]));
    viewBoxInput = input(undefined, ...(ngDevMode ? [{ debugName: "viewBoxInput", alias: 'viewBox' }] : [{ alias: 'viewBox' }]));
    xmlns = input('http://www.w3.org/2000/svg', ...(ngDevMode ? [{ debugName: "xmlns" }] : []));
    pointerEvents = input('none', ...(ngDevMode ? [{ debugName: "pointerEvents", alias: 'pointer-events' }] : [{ alias: 'pointer-events' }]));
    role = input('img', ...(ngDevMode ? [{ debugName: "role" }] : []));
    hostClasses = computed(() => {
        const computedSize = this.computedSize();
        const classes = {
            icon: true,
            [`icon-${computedSize}`]: !!computedSize
        };
        return this.customClasses() ?? classes;
    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
    viewBox = computed(() => {
        return this.viewBoxInput() ?? this.scale();
    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : []));
    innerHtml = computed(() => {
        const codeVal = this.code();
        const code = Array.isArray(codeVal) ? (codeVal?.[1] ?? codeVal?.[0] ?? '') : codeVal || '';
        // todo proper sanitize
        // const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, code);
        return this.#sanitizer.bypassSecurityTrustHtml(this.#titleCode() + code || '');
    }, ...(ngDevMode ? [{ debugName: "innerHtml" }] : []));
    #titleCode = computed(() => {
        return this.title() ? `<title>${this.title()}</title>` : '';
    }, ...(ngDevMode ? [{ debugName: "#titleCode" }] : []));
    code = computed(() => {
        const content = this.content();
        if (content) {
            return content;
        }
        const name = this.name();
        if (this.#iconSet && name) {
            return this.#iconSet.getIcon(name);
        }
        if (name && !this.#iconSet?.icons[name]) {
            console.warn(`cIcon directive: The '${name}' icon not found. Add it to the IconSet service for use with the 'name' property. \n`, name);
        }
        return '';
    }, ...(ngDevMode ? [{ debugName: "code" }] : []));
    scale = computed(() => {
        return Array.isArray(this.code()) && (this.code()?.length ?? 0) > 1 ? `0 0 ${this.code()?.[0]}` : '0 0 64 64';
    }, ...(ngDevMode ? [{ debugName: "scale" }] : []));
    computedSize = computed(() => {
        const addCustom = !this.size() && (this.width() || this.height());
        return this.size() === 'custom' || addCustom ? 'custom-size' : this.size();
    }, ...(ngDevMode ? [{ debugName: "computedSize" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: IconDirective, isStandalone: true, selector: "svg[cIcon]", inputs: { content: { classPropertyName: "content", publicName: "cIcon", isSignal: true, isRequired: false, transformFunction: null }, customClasses: { classPropertyName: "customClasses", publicName: "customClasses", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, viewBoxInput: { classPropertyName: "viewBoxInput", publicName: "viewBox", isSignal: true, isRequired: false, transformFunction: null }, xmlns: { classPropertyName: "xmlns", publicName: "xmlns", isSignal: true, isRequired: false, transformFunction: null }, pointerEvents: { classPropertyName: "pointerEvents", publicName: "pointer-events", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "innerHtml": "innerHtml()", "class": "hostClasses()", "attr.viewBox": "viewBox()", "attr.xmlns": "xmlns()", "attr.pointer-events": "pointerEvents()", "attr.role": "role()", "attr.aria-hidden": "true" } }, exportAs: ["cIcon"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconDirective, decorators: [{
            type: Directive,
            args: [{
                    exportAs: 'cIcon',
                    selector: 'svg[cIcon]',
                    host: {
                        '[innerHtml]': 'innerHtml()',
                        '[class]': 'hostClasses()',
                        '[attr.viewBox]': 'viewBox()',
                        '[attr.xmlns]': 'xmlns()',
                        '[attr.pointer-events]': 'pointerEvents()',
                        '[attr.role]': 'role()',
                        '[attr.aria-hidden]': 'true'
                    }
                }]
        }] });

class HtmlAttributesDirective {
    cHtmlAttr = input(...(ngDevMode ? [undefined, { debugName: "cHtmlAttr" }] : []));
    #renderer = inject(Renderer2);
    #elementRef = inject(ElementRef);
    attrEffect = effect(() => {
        const attribs = this.cHtmlAttr();
        for (const attr in attribs) {
            if (attr === 'style' && typeof attribs[attr] === 'object') {
                this.setStyle(attribs[attr]);
            }
            else if (attr === 'class') {
                this.addClass(attribs[attr]);
            }
            else {
                this.setAttrib(attr, attribs[attr]);
            }
        }
    }, ...(ngDevMode ? [{ debugName: "attrEffect" }] : []));
    setStyle(styles) {
        for (const style in styles) {
            if (style) {
                this.#renderer.setStyle(this.#elementRef.nativeElement, style, styles[style]);
            }
        }
    }
    addClass(classes) {
        const classArray = Array.isArray(classes) ? classes : classes.split(' ');
        classArray
            .filter((element) => element.length > 0)
            .forEach((element) => {
            this.#renderer.addClass(this.#elementRef.nativeElement, element);
        });
    }
    setAttrib(key, value) {
        value !== null
            ? this.#renderer.setAttribute(this.#elementRef.nativeElement, key, value)
            : this.#renderer.removeAttribute(this.#elementRef.nativeElement, key);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: HtmlAttributesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: HtmlAttributesDirective, isStandalone: true, selector: "[cHtmlAttr]", inputs: { cHtmlAttr: { classPropertyName: "cHtmlAttr", publicName: "cHtmlAttr", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["cHtmlAttr"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: HtmlAttributesDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[cHtmlAttr]',
                    exportAs: 'cHtmlAttr'
                }]
        }] });

class IconComponent {
    #renderer = inject(Renderer2);
    #elementRef = inject(ElementRef);
    #sanitizer = inject(DomSanitizer);
    #iconSet = inject(IconSetService);
    content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
    attributes = input({ role: 'img' }, ...(ngDevMode ? [{ debugName: "attributes" }] : []));
    customClasses = input(...(ngDevMode ? [undefined, { debugName: "customClasses" }] : []));
    size = input('', ...(ngDevMode ? [{ debugName: "size" }] : []));
    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
    use = input('', ...(ngDevMode ? [{ debugName: "use" }] : []));
    height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : []));
    width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
    name = input('', ...(ngDevMode ? [{ debugName: "name", transform: transformName }] : [{ transform: transformName }]));
    viewBoxInput = input(undefined, ...(ngDevMode ? [{ debugName: "viewBoxInput", alias: 'viewBox' }] : [{ alias: 'viewBox' }]));
    svgElementRef = viewChild('svgElement', ...(ngDevMode ? [{ debugName: "svgElementRef" }] : []));
    #svgElementEffect = effect(() => {
        const svgElementRef = this.svgElementRef();
        const hostElement = this.#elementRef.nativeElement;
        if (svgElementRef && hostElement) {
            const svgElement = svgElementRef.nativeElement;
            hostElement.classList?.forEach((item) => {
                this.#renderer.addClass(svgElement, item);
            });
            const parentElement = this.#renderer.parentNode(hostElement);
            this.#renderer.insertBefore(parentElement, svgElement, hostElement);
            this.#renderer.removeChild(parentElement, hostElement);
        }
    }, ...(ngDevMode ? [{ debugName: "#svgElementEffect" }] : []));
    viewBox = computed(() => {
        return this.viewBoxInput() ?? this.scale();
    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : []));
    innerHtml = computed(() => {
        const codeVal = this.code();
        const code = Array.isArray(codeVal) ? (codeVal?.[1] ?? codeVal?.[0] ?? '') : codeVal || '';
        // todo proper sanitize
        // const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, code);
        return this.#sanitizer.bypassSecurityTrustHtml(this.#titleCode() + code || '');
    }, ...(ngDevMode ? [{ debugName: "innerHtml" }] : []));
    #titleCode = computed(() => {
        return this.title() ? `<title>${this.title()}</title>` : '';
    }, ...(ngDevMode ? [{ debugName: "#titleCode" }] : []));
    code = computed(() => {
        const content = this.content();
        if (content) {
            return content;
        }
        const name = this.name();
        if (this.#iconSet && name) {
            return this.#iconSet.getIcon(name);
        }
        if (name && !this.#iconSet?.icons[name]) {
            console.warn(`c-icon component: The '${name}' icon not found. Add it to the IconSet service for use with the 'name' property. \n`, name);
        }
        return '';
    }, ...(ngDevMode ? [{ debugName: "code" }] : []));
    scale = computed(() => {
        return Array.isArray(this.code()) && (this.code()?.length ?? 0) > 1 ? `0 0 ${this.code()?.[0]}` : '0 0 64 64';
    }, ...(ngDevMode ? [{ debugName: "scale" }] : []));
    computedSize = computed(() => {
        const addCustom = !this.size() && (this.width() || this.height());
        return this.size() === 'custom' || addCustom ? 'custom-size' : this.size();
    }, ...(ngDevMode ? [{ debugName: "computedSize" }] : []));
    computedClasses = computed(() => {
        const classes = {
            icon: true,
            [`icon-${this.computedSize()}`]: !!this.computedSize()
        };
        return this.customClasses() ?? classes;
    }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: IconComponent, isStandalone: true, selector: "c-icon", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, attributes: { classPropertyName: "attributes", publicName: "attributes", isSignal: true, isRequired: false, transformFunction: null }, customClasses: { classPropertyName: "customClasses", publicName: "customClasses", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, use: { classPropertyName: "use", publicName: "use", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, viewBoxInput: { classPropertyName: "viewBoxInput", publicName: "viewBox", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "ngSkipHydration": "true" }, styleAttribute: "display: none" }, viewQueries: [{ propertyName: "svgElementRef", first: true, predicate: ["svgElement"], descendants: true, isSignal: true }], exportAs: ["cIconComponent"], ngImport: i0, template: "@if (!use() && !!code()) {\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"height() || width()\"\n    [attr.viewBox]=\"viewBox() ?? scale()\"\n    [innerHtml]=\"innerHtml()\"\n    [ngClass]=\"computedClasses()\"\n    [cHtmlAttr]=\"attributes()\"\n    aria-hidden=\"true\"\n    pointer-events=\"none\"\n    role=\"img\"\n    #svgElement\n  >\n  </svg>\n} @else if (use()) {\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"height() || width()\"\n    [ngClass]=\"computedClasses()\"\n    [cHtmlAttr]=\"attributes()\"\n    aria-hidden=\"true\"\n    pointer-events=\"none\"\n    role=\"img\"\n    #svgElement\n  >\n    <use [attr.href]=\"use()\"></use>\n  </svg>\n}\n", styles: [".icon{display:inline-block;color:inherit;text-align:center;vertical-align:-.125rem;fill:currentColor}.icon:not(.icon-c-s):not(.icon-custom-size){width:1rem;height:1rem;font-size:1rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-xxl{width:2rem;height:2rem;font-size:2rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-xl{width:1.5rem;height:1.5rem;font-size:1.5rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-lg{width:1.25rem;height:1.25rem;font-size:1.25rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-sm{width:.875rem;height:.875rem;font-size:.875rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-3xl{width:3rem;height:3rem;font-size:3rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-4xl{width:4rem;height:4rem;font-size:4rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-5xl{width:5rem;height:5rem;font-size:5rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-6xl{width:6rem;height:6rem;font-size:6rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-7xl{width:7rem;height:7rem;font-size:7rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-8xl{width:8rem;height:8rem;font-size:8rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-9xl{width:9rem;height:9rem;font-size:9rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconComponent, decorators: [{
            type: Component,
            args: [{ exportAs: 'cIconComponent', imports: [NgClass, HtmlAttributesDirective], selector: 'c-icon', host: { ngSkipHydration: 'true', style: 'display: none' }, template: "@if (!use() && !!code()) {\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"height() || width()\"\n    [attr.viewBox]=\"viewBox() ?? scale()\"\n    [innerHtml]=\"innerHtml()\"\n    [ngClass]=\"computedClasses()\"\n    [cHtmlAttr]=\"attributes()\"\n    aria-hidden=\"true\"\n    pointer-events=\"none\"\n    role=\"img\"\n    #svgElement\n  >\n  </svg>\n} @else if (use()) {\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"height() || width()\"\n    [ngClass]=\"computedClasses()\"\n    [cHtmlAttr]=\"attributes()\"\n    aria-hidden=\"true\"\n    pointer-events=\"none\"\n    role=\"img\"\n    #svgElement\n  >\n    <use [attr.href]=\"use()\"></use>\n  </svg>\n}\n", styles: [".icon{display:inline-block;color:inherit;text-align:center;vertical-align:-.125rem;fill:currentColor}.icon:not(.icon-c-s):not(.icon-custom-size){width:1rem;height:1rem;font-size:1rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-xxl{width:2rem;height:2rem;font-size:2rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-xl{width:1.5rem;height:1.5rem;font-size:1.5rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-lg{width:1.25rem;height:1.25rem;font-size:1.25rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-sm{width:.875rem;height:.875rem;font-size:.875rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-3xl{width:3rem;height:3rem;font-size:3rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-4xl{width:4rem;height:4rem;font-size:4rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-5xl{width:5rem;height:5rem;font-size:5rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-6xl{width:6rem;height:6rem;font-size:6rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-7xl{width:7rem;height:7rem;font-size:7rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-8xl{width:8rem;height:8rem;font-size:8rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-9xl{width:9rem;height:9rem;font-size:9rem}\n"] }]
        }] });

class IconModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: IconModule, imports: [IconComponent,
            IconDirective], exports: [IconComponent,
            IconDirective] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        IconComponent,
                        IconDirective
                    ],
                    exports: [
                        IconComponent,
                        IconDirective
                    ]
                }]
        }] });

/*
 * Public API Surface of @coreui/icons-angular
 */

/**
 * Generated bundle index. Do not edit.
 */

export { IconComponent, IconDirective, IconModule, IconSetModule, IconSetService };
//# sourceMappingURL=coreui-icons-angular.mjs.map