// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to
//  deal in the Software without restriction, including without limitation the
//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
//  sell copies of the Software, and to permit persons to whom the Software is
//  furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
//  all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
//  THE SOFTWARE.
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import _isInteger from "lodash/isInteger";
import isNil from "lodash/isNil";
import { IconService } from "./icon.service";
import { IconStatus } from "./types";
import * as i0 from "@angular/core";
import * as i1 from "./icon.service";
import * as i2 from "@angular/platform-browser";
import * as i3 from "@angular/common";
/**
 * <example-url>./../examples/index.html#/icon</example-url>
 */
export class IconComponent {
    constructor(iconService, sanitizer) {
        this.iconService = iconService;
        this.sanitizer = sanitizer;
        this.brushType = "filled";
        this.fillContainer = false;
    }
    getIconByStatus(status) {
        if (!status) {
            return "";
        }
        return this.iconService.getStatusIcon(status);
    }
    get iconClass() {
        const iconClass = ["nui-icon"];
        if (!this.iconFound) {
            iconClass.push("nui-icon-not-found");
        }
        else {
            if (this.brushType) {
                iconClass.push(this.brushType);
            }
            if (this.iconColor) {
                iconClass.push("custom-icon-color", `${this.iconColor}-icon`);
            }
            if (this.iconHoverColor) {
                iconClass.push(`${this.iconHoverColor}-hover-icon`);
            }
            const sizeClass = IconComponent.SIZE_MAP[this.iconSize];
            if (sizeClass) {
                iconClass.push(sizeClass);
            }
            if (this.cssClass) {
                iconClass.push(this.cssClass);
            }
            if (this.fillContainer) {
                iconClass.push("nui-icon--fill-container");
            }
        }
        return iconClass.join(" ");
    }
    set counter(value) {
        // eslint-disable-next-line no-undef-init
        let counterAttrValue = undefined;
        if (!isNil(value)) {
            counterAttrValue = +value;
        }
        if (_isInteger(counterAttrValue)) {
            this._counter = counterAttrValue;
        }
        else {
            this._counter = undefined;
        }
    }
    get counter() {
        // Using isNil to prevent toString of undefined error
        return isNil(this._counter) ? this._counter : this._counter.toString();
    }
    ngOnChanges(changes) {
        if (changes["status"] || changes["childStatus"] || changes["icon"]) {
            this.generateIcon();
        }
    }
    generateIcon() {
        this.iconData = this.iconService.getIconData(this.icon);
        this.iconFound = !!this.iconData;
        let resultingSvg = `<div class='nui-icon-item'>${(this.iconData && this.iconData.code) ?? ""}</div>`;
        if (this.status) {
            resultingSvg += `<div class="nui-icon-item nui-icon-item__child">
                                    ${this.getIconByStatus(this.status)}
                                </div>`;
        }
        if (this.childStatus) {
            resultingSvg += `<div class="nui-icon-item nui-icon-item__grand-child">
                                        ${this.getIconByStatus(this.childStatus)}
                                 </div>`;
        }
        this.resultingSvg =
            this.sanitizer.bypassSecurityTrustHtml(resultingSvg);
    }
}
IconComponent.SIZE_MAP = {
    medium: "nui-icon-size-md",
    small: "nui-icon-size-sm",
};
IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: IconComponent, deps: [{ token: i1.IconService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: IconComponent, selector: "nui-icon", inputs: { iconColor: "iconColor", brushType: "brushType", iconHoverColor: "iconHoverColor", iconSize: "iconSize", cssClass: "cssClass", fillContainer: "fillContainer", status: "status", childStatus: "childStatus", icon: "icon", counter: "counter" }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "icon + ' icon'" }, classAttribute: "nui-icon-wrapper" }, usesOnChanges: true, ngImport: i0, template: "<i\n    [ngClass]=\"iconClass\"\n    [attr.icon]=\"icon\"\n    [attr.counter]=\"counter\"\n    [attr.status]=\"status | lowercase\"\n>\n    <div class=\"nui-svg-wrapper\" [innerHTML]=\"resultingSvg\"></div>\n</i>\n", styles: [".nui-icon-wrapper{display:inline-flex}.nui-icon-wrapper .nui-svg-wrapper{position:relative}.nui-icon-wrapper .nui-icon-item{position:absolute;top:0px;left:0px;display:flex}.nui-icon-wrapper .nui-icon-item__child{position:absolute;top:8px;left:8px;z-index:1;transform:scale(.75) translate(-2.5px,-2.5px)}.nui-icon-wrapper .nui-icon-item__grand-child{position:absolute;top:14px;left:14px;z-index:2;transform:scale(.5) translate(-9.5px,-9.5px)}.nui-icon{width:16px;height:16px;background-size:16px;vertical-align:middle;background-repeat:no-repeat;line-height:1.66666667;position:relative}.nui-icon svg{width:16px;height:16px;display:inline-block;background-repeat:no-repeat;line-height:1.66666667}.nui-icon.nui-icon-line-height,.nui-icon.nui-icon-line-height i.nui-icon{line-height:1}.nui-icon.nui-icon-line-height svg{line-height:1}.nui-icon.nui-icon-size-sm svg{width:12px;height:12px}.nui-icon.nui-icon-size-md svg{width:20px;height:20px}.nui-icon.white-icon.stroked svg *,.nui-icon.white-hover-icon.stroked:hover svg *{stroke:var(--nui-color-bg-light,#fff)}.nui-icon.white-icon.filled svg *,.nui-icon.white-hover-icon.filled:hover svg *{fill:var(--nui-color-bg-light,#fff)}.nui-icon.gray-icon.stroked svg *,.nui-icon.gray-hover-icon.stroked:hover svg *{stroke:var(--nui-color-icon-default,rgba(17, 17, 17, .5))}.nui-icon.gray-icon.filled svg *,.nui-icon.gray-hover-icon.filled:hover svg *{fill:var(--nui-color-icon-default,rgba(17, 17, 17, .5))}.nui-icon.primary-black-icon.stroked svg *,.nui-icon.primary-black-hover-icon.stroked:hover svg *{stroke:var(--nui-color-icon-highlight-default,#111)}.nui-icon.black-icon.filled svg *,.nui-icon.black-hover-icon.filled:hover svg *{fill:var(--nui-color-icon-highlight-default,#111)}.nui-icon.primary-blue-icon.stroked svg *,.nui-icon.primary-blue-hover-icon.stroked:hover svg *{stroke:var(--nui-color-icon-active,#0079aa)}.nui-icon.primary-blue-icon.filled svg *,.nui-icon.primary-blue-hover-icon.filled:hover svg *{fill:var(--nui-color-icon-active,#0079aa)}.nui-icon.orange-icon.filled svg *,.nui-icon.orange-hover-icon.filled:hover svg *{fill:var(--nui-color-icon-highlight-platform_bar,#f99d1c)}.nui-icon.orange-icon.stroked svg *,.nui-icon.orange-hover-icon.stroked:hover svg *{stroke:var(--nui-color-icon-highlight-platform_bar,#f99d1c)}.nui-icon.red-icon.filled svg *,.nui-icon.red-hover-icon.filled:hover svg *{fill:var(--nui-color-icon-critical,#dd2c00)}.nui-icon.red-icon.stroked svg *,.nui-icon.red-hover-icon.stroked:hover svg *{stroke:var(--nui-color-icon-critical,#dd2c00)}.nui-icon.disabled-gray-icon.filled svg *,.nui-icon.red-hover-icon.filled:hover svg *{fill:var(--nui-color-icon-disabled,rgba(17, 17, 17, .3))}.nui-icon.disabled-gray-icon.stroked svg *,.nui-icon.red-hover-icon.stroked:hover svg *{stroke:var(--nui-color-icon-disabled,rgba(17, 17, 17, .3))}.nui-icon.nui-icon-not-found{background-color:#f0f}.nui-icon[status]:not([status=\"\"]):after{content:\"\"}.nui-icon[counter]:not([counter=\"\"]):after{border-radius:50%;content:attr(counter);background:#0079aa no-repeat;background:var(--nui-color-active, #0079aa) no-repeat}.nui-icon:after{display:inline-block;background-repeat:no-repeat;position:relative;vertical-align:middle;text-align:center;font-style:normal;color:var(--nui-color-bg-light,#fff);width:12px;height:12px;background-size:12px;line-height:12px;font-size:8px}.nui-icon[status]:not([status=\"\"]),.nui-icon[counter]:not([counter=\"\"]){margin-right:10px}.nui-icon[status]:not([status=\"\"]):after,.nui-icon[counter]:not([counter=\"\"]):after{position:absolute;top:8px;left:8px}.nui-icon.nui-icon-size-sm{width:12px;height:12px;background-size:12px;line-height:1}.nui-icon.nui-icon-size-sm:after{width:12px;height:12px;background-size:12px;line-height:12px;font-size:8px}.nui-icon.nui-icon-size-sm[status]:not([status=\"\"]):after,.nui-icon.nui-icon-size-sm[counter]:not([counter=\"\"]):after{position:absolute;top:6px;left:6px}.nui-icon.nui-icon-size-md{width:20px;height:20px;background-size:20px;line-height:1}.nui-icon.nui-icon-size-md:after{width:20px;height:20px;background-size:20px;line-height:20px;font-size:8px}.nui-icon.nui-icon-size-md[status]:not([status=\"\"]):after,.nui-icon.nui-icon-size-md[counter]:not([counter=\"\"]):after{position:absolute;top:10px;left:10px}.nui-icon.nui-icon--fill-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;margin-top:0}\n"], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "lowercase": i3.LowerCasePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: IconComponent, decorators: [{
            type: Component,
            args: [{ selector: "nui-icon", changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: "nui-icon-wrapper",
                        role: "img",
                        "[attr.aria-label]": "icon + ' icon'",
                    }, encapsulation: ViewEncapsulation.None, template: "<i\n    [ngClass]=\"iconClass\"\n    [attr.icon]=\"icon\"\n    [attr.counter]=\"counter\"\n    [attr.status]=\"status | lowercase\"\n>\n    <div class=\"nui-svg-wrapper\" [innerHTML]=\"resultingSvg\"></div>\n</i>\n", styles: [".nui-icon-wrapper{display:inline-flex}.nui-icon-wrapper .nui-svg-wrapper{position:relative}.nui-icon-wrapper .nui-icon-item{position:absolute;top:0px;left:0px;display:flex}.nui-icon-wrapper .nui-icon-item__child{position:absolute;top:8px;left:8px;z-index:1;transform:scale(.75) translate(-2.5px,-2.5px)}.nui-icon-wrapper .nui-icon-item__grand-child{position:absolute;top:14px;left:14px;z-index:2;transform:scale(.5) translate(-9.5px,-9.5px)}.nui-icon{width:16px;height:16px;background-size:16px;vertical-align:middle;background-repeat:no-repeat;line-height:1.66666667;position:relative}.nui-icon svg{width:16px;height:16px;display:inline-block;background-repeat:no-repeat;line-height:1.66666667}.nui-icon.nui-icon-line-height,.nui-icon.nui-icon-line-height i.nui-icon{line-height:1}.nui-icon.nui-icon-line-height svg{line-height:1}.nui-icon.nui-icon-size-sm svg{width:12px;height:12px}.nui-icon.nui-icon-size-md svg{width:20px;height:20px}.nui-icon.white-icon.stroked svg *,.nui-icon.white-hover-icon.stroked:hover svg *{stroke:var(--nui-color-bg-light,#fff)}.nui-icon.white-icon.filled svg *,.nui-icon.white-hover-icon.filled:hover svg *{fill:var(--nui-color-bg-light,#fff)}.nui-icon.gray-icon.stroked svg *,.nui-icon.gray-hover-icon.stroked:hover svg *{stroke:var(--nui-color-icon-default,rgba(17, 17, 17, .5))}.nui-icon.gray-icon.filled svg *,.nui-icon.gray-hover-icon.filled:hover svg *{fill:var(--nui-color-icon-default,rgba(17, 17, 17, .5))}.nui-icon.primary-black-icon.stroked svg *,.nui-icon.primary-black-hover-icon.stroked:hover svg *{stroke:var(--nui-color-icon-highlight-default,#111)}.nui-icon.black-icon.filled svg *,.nui-icon.black-hover-icon.filled:hover svg *{fill:var(--nui-color-icon-highlight-default,#111)}.nui-icon.primary-blue-icon.stroked svg *,.nui-icon.primary-blue-hover-icon.stroked:hover svg *{stroke:var(--nui-color-icon-active,#0079aa)}.nui-icon.primary-blue-icon.filled svg *,.nui-icon.primary-blue-hover-icon.filled:hover svg *{fill:var(--nui-color-icon-active,#0079aa)}.nui-icon.orange-icon.filled svg *,.nui-icon.orange-hover-icon.filled:hover svg *{fill:var(--nui-color-icon-highlight-platform_bar,#f99d1c)}.nui-icon.orange-icon.stroked svg *,.nui-icon.orange-hover-icon.stroked:hover svg *{stroke:var(--nui-color-icon-highlight-platform_bar,#f99d1c)}.nui-icon.red-icon.filled svg *,.nui-icon.red-hover-icon.filled:hover svg *{fill:var(--nui-color-icon-critical,#dd2c00)}.nui-icon.red-icon.stroked svg *,.nui-icon.red-hover-icon.stroked:hover svg *{stroke:var(--nui-color-icon-critical,#dd2c00)}.nui-icon.disabled-gray-icon.filled svg *,.nui-icon.red-hover-icon.filled:hover svg *{fill:var(--nui-color-icon-disabled,rgba(17, 17, 17, .3))}.nui-icon.disabled-gray-icon.stroked svg *,.nui-icon.red-hover-icon.stroked:hover svg *{stroke:var(--nui-color-icon-disabled,rgba(17, 17, 17, .3))}.nui-icon.nui-icon-not-found{background-color:#f0f}.nui-icon[status]:not([status=\"\"]):after{content:\"\"}.nui-icon[counter]:not([counter=\"\"]):after{border-radius:50%;content:attr(counter);background:#0079aa no-repeat;background:var(--nui-color-active, #0079aa) no-repeat}.nui-icon:after{display:inline-block;background-repeat:no-repeat;position:relative;vertical-align:middle;text-align:center;font-style:normal;color:var(--nui-color-bg-light,#fff);width:12px;height:12px;background-size:12px;line-height:12px;font-size:8px}.nui-icon[status]:not([status=\"\"]),.nui-icon[counter]:not([counter=\"\"]){margin-right:10px}.nui-icon[status]:not([status=\"\"]):after,.nui-icon[counter]:not([counter=\"\"]):after{position:absolute;top:8px;left:8px}.nui-icon.nui-icon-size-sm{width:12px;height:12px;background-size:12px;line-height:1}.nui-icon.nui-icon-size-sm:after{width:12px;height:12px;background-size:12px;line-height:12px;font-size:8px}.nui-icon.nui-icon-size-sm[status]:not([status=\"\"]):after,.nui-icon.nui-icon-size-sm[counter]:not([counter=\"\"]):after{position:absolute;top:6px;left:6px}.nui-icon.nui-icon-size-md{width:20px;height:20px;background-size:20px;line-height:1}.nui-icon.nui-icon-size-md:after{width:20px;height:20px;background-size:20px;line-height:20px;font-size:8px}.nui-icon.nui-icon-size-md[status]:not([status=\"\"]):after,.nui-icon.nui-icon-size-md[counter]:not([counter=\"\"]):after{position:absolute;top:10px;left:10px}.nui-icon.nui-icon--fill-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;margin-top:0}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.IconService }, { type: i2.DomSanitizer }]; }, propDecorators: { iconColor: [{
                type: Input
            }], brushType: [{
                type: Input
            }], iconHoverColor: [{
                type: Input
            }], iconSize: [{
                type: Input
            }], cssClass: [{
                type: Input
            }], fillContainer: [{
                type: Input
            }], status: [{
                type: Input
            }], childStatus: [{
                type: Input
            }], icon: [{
                type: Input
            }], counter: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 