/**
 * AlInitialsComponent provides a icon-like initials component used as a convenient shorthand to represent
 * unique individuals or accounts.  It is based on the NameColoredSquareComponent from dunkirk project, originally written
 * by Gisler Garces for the user management functionality in ozone.
 *
 * @author Gisler Garces <ggarces@alertlogic.com>
 * @author Cristhian Rendón <crendon@alertlogic.com>
 * @author McNielsen <knielsen@alertlogic.com>
 *
 * @copyright Alert Logic, Inc 2018
 */
import { Input, Component } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
function AlInitialsComponent_span_2_font_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "font", 9);
    i0.ɵɵelementStart(1, "span");
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var ctx_r4 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", ctx_r4.letters, " ");
} }
function AlInitialsComponent_span_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 7);
    i0.ɵɵtemplate(1, AlInitialsComponent_span_2_font_1_Template, 3, 1, "font", 8);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵproperty("ngClass", ctx_r0.classes);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", !ctx_r0.selected);
} }
function AlInitialsComponent_span_3_i_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "i", 12);
    i0.ɵɵtext(1, "check_box");
    i0.ɵɵelementEnd();
} }
function AlInitialsComponent_span_3_i_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "i", 12);
    i0.ɵɵtext(1, "check_box_outline_blank");
    i0.ɵɵelementEnd();
} }
function AlInitialsComponent_span_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 10);
    i0.ɵɵtemplate(1, AlInitialsComponent_span_3_i_1_Template, 2, 0, "i", 11);
    i0.ɵɵtemplate(2, AlInitialsComponent_span_3_i_2_Template, 2, 0, "i", 11);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r1.selected);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", !ctx_r1.selected);
} }
function AlInitialsComponent_span_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 13);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate(ctx_r2.name);
} }
function AlInitialsComponent_span_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 14);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    var ctx_r3 = i0.ɵɵnextContext();
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate(ctx_r3.subname);
} }
var _c0 = function (a0, a1) { return { "selected": a0, "hoverClass": a1 }; };
var AlInitialsComponent = /** @class */ (function () {
    function AlInitialsComponent() {
        /**
         *  @property entity The account being displayed in this tile.
         */
        this.name = 'John Doe';
        /**
         *  @property the subname, this is going to be shown bellow the initial name.
         */
        this.subname = '';
        /**
         *  @property in order to show the account letters or the user letters.
         */
        this.circular = false;
        /**
         *  @property Indicates whether or not the account is "selected" or not.
         */
        this.selected = false;
        /**
         *  @property Indicates whether or not the initial should render simple without checkboxes.
         */
        this.simple = false;
        /**
         *  @property Indicates whether or not the full name should be displayed alongside the icon as a label.
         */
        this.labelled = false;
        this.letters = ""; //  the initials calculated from the name @Input()
        this.hovering = false; //  Is the mouse hovering over the control right now?
        this.classes = {}; //  CSS properties for fun and profit
    }
    /**
     * When the component inits use the account name to properly color the tile.
     */
    AlInitialsComponent.prototype.ngOnInit = function () {
        this.refresh(); //  Do it on load.
    };
    AlInitialsComponent.prototype.ngOnChanges = function (changes) {
        this.refresh(); //  Do it on changes
    };
    /**
     * Returns the reference of the clicked account.
     */
    AlInitialsComponent.prototype.onClick = function () {
        console.log('click fire');
        // this.onClicked.emit( this.account );
    };
    AlInitialsComponent.prototype.toggleSelection = function () {
        this.selected = !this.selected;
    };
    AlInitialsComponent.prototype.refresh = function () {
        this.letters = '';
        this.classes = {};
        var parts = this.name.split(" ");
        var colorClass = "color1";
        for (var i = 0; i < Math.min(2, parts.length); i++) {
            var character = parts[i].trim().toUpperCase().charAt(0);
            this.letters += character;
            if (i === 0 && character >= 'A' && character <= 'Z') {
                colorClass = "account-color-" + Math.floor((character.charCodeAt(0) - 65) / 2 + 1).toString(); /* [ "account-color-1"..."account-color-13" ] */
            }
        }
        this.classes["colored-square"] = true;
        this.classes["circular"] = this.circular;
        this.classes[colorClass] = true;
    };
    AlInitialsComponent.prototype.onHoverStart = function () {
        if (!this.simple) {
            this.hovering = true;
        }
    };
    AlInitialsComponent.prototype.onHoverEnd = function () {
        this.hovering = false;
    };
    /** @nocollapse */ AlInitialsComponent.ɵfac = function AlInitialsComponent_Factory(t) { return new (t || AlInitialsComponent)(); };
    /** @nocollapse */ AlInitialsComponent.ɵcmp = i0.ɵɵdefineComponent({ type: AlInitialsComponent, selectors: [["al-initials"]], inputs: { name: "name", subname: "subname", circular: "circular", selected: "selected", simple: "simple", labelled: "labelled" }, features: [i0.ɵɵNgOnChangesFeature], decls: 7, vars: 8, consts: [[1, "al-initials", 3, "ngClass", "mouseenter", "mouseleave", "click"], ["fxLayout", "row", "fxLayoutAlign", "space-around center", 1, "icon-square"], ["class", "colored-square", 3, "ngClass", 4, "ngIf"], ["class", "colored-square", 4, "ngIf"], ["fxLayout", "column", "fxLayoutAlign", "space-around none", 1, "account-info"], ["class", "label", 4, "ngIf"], ["class", "subname", 4, "ngIf"], [1, "colored-square", 3, "ngClass"], ["class", "colored-initials", 4, "ngIf"], [1, "colored-initials"], [1, "colored-square"], ["class", "material-icons", 4, "ngIf"], [1, "material-icons"], [1, "label"], [1, "subname"]], template: function AlInitialsComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0);
            i0.ɵɵlistener("mouseenter", function AlInitialsComponent_Template_div_mouseenter_0_listener() { return ctx.onHoverStart(); })("mouseleave", function AlInitialsComponent_Template_div_mouseleave_0_listener() { return ctx.onHoverEnd(); })("click", function AlInitialsComponent_Template_div_click_0_listener() { return ctx.toggleSelection(); });
            i0.ɵɵelementStart(1, "div", 1);
            i0.ɵɵtemplate(2, AlInitialsComponent_span_2_Template, 2, 2, "span", 2);
            i0.ɵɵtemplate(3, AlInitialsComponent_span_3_Template, 3, 2, "span", 3);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(4, "div", 4);
            i0.ɵɵtemplate(5, AlInitialsComponent_span_5_Template, 2, 1, "span", 5);
            i0.ɵɵtemplate(6, AlInitialsComponent_span_6_Template, 2, 1, "span", 6);
            i0.ɵɵelementEnd();
            i0.ɵɵelementEnd();
        } if (rf & 2) {
            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(5, _c0, ctx.selected, ctx.hovering));
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("ngIf", !ctx.hovering && !ctx.selected);
            i0.ɵɵadvance(1);
            i0.ɵɵproperty("ngIf", ctx.hovering || ctx.selected);
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("ngIf", ctx.labelled);
            i0.ɵɵadvance(1);
            i0.ɵɵproperty("ngIf", ctx.labelled && ctx.subname);
        } }, directives: [i1.NgClass, i1.NgIf], styles: [".al-initials[_ngcontent-%COMP%]{padding:5px;width:100%;display:inline-flex}.al-initials.selected[_ngcontent-%COMP%]{background-color:#aacfea}.al-initials.selected[_ngcontent-%COMP%]   .colored-square[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{color:#57a0d7}.al-initials[_ngcontent-%COMP%]   .colored-square[_ngcontent-%COMP%]{display:inline-flex;height:35px;width:35px;padding:0;margin:0;align-items:center;justify-content:center;color:#fff;font-weight:600}.al-initials[_ngcontent-%COMP%]   .colored-square[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{color:#535353}.al-initials[_ngcontent-%COMP%]   span.label[_ngcontent-%COMP%]{display:block;padding-left:10px;font-size:1em;align-items:center}.al-initials[_ngcontent-%COMP%]   span.subname[_ngcontent-%COMP%]{font-size:.9em;padding-left:10px}.al-initials[_ngcontent-%COMP%]   .account-color-1[_ngcontent-%COMP%]{background-color:#ff7f00}.al-initials[_ngcontent-%COMP%]   .account-color-2[_ngcontent-%COMP%]{background-color:#5498b5}.al-initials[_ngcontent-%COMP%]   .account-color-3[_ngcontent-%COMP%]{background-color:#8fc183}.al-initials[_ngcontent-%COMP%]   .account-color-4[_ngcontent-%COMP%]{background-color:#a8ccdb}.al-initials[_ngcontent-%COMP%]   .account-color-5[_ngcontent-%COMP%]{background-color:#f8bb2c}.al-initials[_ngcontent-%COMP%]   .account-color-6[_ngcontent-%COMP%]{background-color:#e20010}.al-initials[_ngcontent-%COMP%]   .account-color-7[_ngcontent-%COMP%]{background-color:#6c6c6c}.al-initials[_ngcontent-%COMP%]   .account-color-8[_ngcontent-%COMP%]{background-color:#8ebcd0}.al-initials[_ngcontent-%COMP%]   .account-color-9[_ngcontent-%COMP%]{background-color:#e53935}.al-initials[_ngcontent-%COMP%]   .account-color-10[_ngcontent-%COMP%]{background-color:#aed2a5}.al-initials[_ngcontent-%COMP%]   .account-color-11[_ngcontent-%COMP%]{background-color:#9f9f9f}.al-initials[_ngcontent-%COMP%]   .account-color-12[_ngcontent-%COMP%]{background-color:#9eacac}.al-initials[_ngcontent-%COMP%]   .account-color-13[_ngcontent-%COMP%]{background-color:#99f}.al-initials[_ngcontent-%COMP%]   .circular[_ngcontent-%COMP%]{border-radius:50%}.hoverClass[_ngcontent-%COMP%]{background-color:#edf4fa}"] });
    return AlInitialsComponent;
}());
export { AlInitialsComponent };
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(AlInitialsComponent, [{
        type: Component,
        args: [{
                selector: 'al-initials',
                templateUrl: './al-initials.component.html',
                styleUrls: ['./al-initials.component.scss']
            }]
    }], null, { name: [{
            type: Input
        }], subname: [{
            type: Input
        }], circular: [{
            type: Input
        }], selected: [{
            type: Input
        }], simple: [{
            type: Input
        }], labelled: [{
            type: Input
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 