import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@sunbird-cb/utils-v2";
export class AvatarPhotoComponent {
    constructor() {
        this.size = '';
        this.randomColor = false;
        this.showBadge = false;
        this.showInitials = false;
        this.random = Math.random().toString(36).slice(2);
        // public initials!: string
        this.colors = [
            '#EB7181',
            '#306933',
            '#000000',
            '#3670B2',
            '#4E9E87',
            '#7E4C8D',
        ];
        this.randomcolors = [
            '#EB7181',
            '#006400',
            '#000000',
            '#3670B2',
            '#4E9E87',
            '#7E4C8D',
        ];
    }
    ngOnInit() {
        if (!this.photoUrl) {
            this.showInitials = true;
            if (!this.initials) {
                this.createInititals();
            }
            if (this.datalen === 1) {
                this.randomcolors = [
                    '#006400', // green
                ];
            }
            const randomIndex = Math.floor(Math.random() * Math.floor(this.colors.length));
            this.circleColor = this.colors[randomIndex];
            if (this.randomColor) {
                const randomIndex1 = Math.floor(Math.random() * Math.floor(this.randomcolors.length));
                this.circleColor = this.randomcolors[randomIndex1];
            }
        }
    }
    ngOnChanges(change) {
        if (change.name.currentValue !== change.name.previousValue && !change.name.firstChange) {
            this.createInititals();
        }
    }
    get userInitials() {
        return this.initials;
    }
    createInititals() {
        let initials = '';
        const array = `${this.name} `.toString().split(' ');
        if (array[0] !== 'undefined' && typeof array[1] !== 'undefined') {
            initials += array[0].charAt(0);
            initials += array[1].charAt(0);
        }
        else {
            for (let i = 0; i < this.name.length; i += 1) {
                if (this.name.charAt(i) === ' ') {
                    continue;
                }
                if (this.name.charAt(i) === this.name.charAt(i)) {
                    initials += this.name.charAt(i);
                    if (initials.length === 2) {
                        break;
                    }
                }
            }
        }
        this.initials = initials.toUpperCase();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarPhotoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: { datalen: "datalen", photoUrl: "photoUrl", name: "name", size: "size", randomColor: "randomColor", initials: "initials", showBadge: "showBadge" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"user_icon\" [ngClass]=\"{'circle-s' : size=== 's',\n'circle-m' : size=== 'm',\n'circle-l' : size=== 'l',\n'circle-xl' : size=== 'xl',\n'circle-xxl' : size=== 'xxl',\n'circle-l-xs' : size=== 'l-xs',\n'circle-l-s' : size=== 'l-s',\n'circle-xl-s' : size=== 'xl-s',\n'circle-r-m': size=== 'round-m',\n'circle-r-xl': size=== 'round-xl',\n'circle-r-p-m': size=== 'profile-round-m',\n'circle-m-side': size=== 'm-side',\n'circle-m-recommended': size==='m-recommended',\n'circle-xxl-s': size=== 'xxl-s'}\" [ngStyle]=\"{'background-color':  circleColor }\">\n  <img *ngIf=\"!showInitials\" loading=\"lazy\" src=\"{{photoUrl |pipeCertImageURL}}\" [alt]=\"photoUrl? '' :(name || userInitials || size || random)\">\n\n  <div *ngIf=\"showInitials\" class=\"initials\" i18n-aria-label>\n    {{ userInitials }} \n  </div>\n  <div *ngIf=\"showBadge\"><span class=\"profile-badge\">  \n    <img src=\"fusion-assets/images/profile-badge.png\">\n  </span></div>\n\n  <!-- <div *ngIf=\"imageType === 'user-photo'\">\n    <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"user-image\" class=\"user-image\" [ngClass]=\"{'user-image-small': imageSize === 'small'}\">\n    <div class=\"user-image\" [ngClass]=\"{'user-image-small': imageSize === 'small'}\">\n      <span class=\"name-initials-image font-normal ws-mat-primary-default-text ws-mat-accent-background\"\n      *ngIf=\"!imageUrl\">{{ shortName }}</span>\n    </div>\n  </div> -->\n</div>", styles: ["@charset \"UTF-8\";.success-checkmark:after{content:\"\\2714\";position:absolute;left:25px;top:20px;width:11px;height:11px;border:1px solid #1D8923;background:#1d8923;border-radius:50%;color:#fff;line-height:11px;text-align:center;font-size:9px}.profile-badge{position:absolute;top:10px;right:0}.profile-badge img{height:15px!important;width:15px!important}.circle-s{border-radius:50%;width:24px;height:24px;display:flex;justify-content:center;align-items:center}.circle-s img{border-radius:50%;width:100%;height:100%}.circle-s .initials{color:#fff;font-size:10px;line-height:12px;letter-spacing:.2625px}.circle-m{border-radius:50%;width:72px!important;height:72px!important;display:flex;justify-content:center;align-items:center;margin-top:-36px}.circle-m img{border-radius:10%;width:40px;height:40px}.circle-m .initials{color:#fff;font-size:14px;line-height:19px;letter-spacing:.2625px}.circle-l{border-radius:50%;width:80px;height:80px;display:flex;justify-content:center;align-items:center}.circle-l img{border-radius:10%;width:80px;height:80px}.circle-l .initials{color:#fff;font-size:20px;line-height:19px;letter-spacing:.2625px}.circle-xl{border-radius:50%;width:105px;height:105px;display:flex;justify-content:center;align-items:center}.circle-xl img{border-radius:10%;width:105px;height:105px}.circle-xl .initials{color:#fff;font-size:20px;line-height:19px;letter-spacing:.2625px}.circle-xxl{border-radius:50%;width:145px;height:145px;display:flex;justify-content:center;align-items:center}.circle-xxl img{border-radius:10%;width:145px;height:145px}.circle-xxl .initials{color:#fff;font-size:20px;line-height:19px;letter-spacing:.2625px}.circle-l-xs{border-radius:50%;width:29px;height:29px;display:flex;justify-content:center;align-items:center}.circle-l-xs img{border-radius:50%;width:100%;height:100%}.circle-l-xs .initials{color:#fff;font-size:12px;line-height:12px;letter-spacing:.2625px}.circle-l-s{border-radius:50%;width:80px;height:80px;display:flex;justify-content:center;align-items:center}.circle-l-s img{border-radius:4px;width:80px;height:80px}.circle-l-s .initials{color:#fff;font-size:24px;line-height:24px;letter-spacing:.2625px}.circle-xl-s{border-radius:50%;width:125px;height:125px;display:flex;justify-content:center;align-items:center}.circle-xl-s img{border-radius:4px;width:152px;height:125px}.circle-xl-s .initials{color:#fff;font-size:32px;line-height:32px;letter-spacing:.2625px}.circle-xxl-s{border-radius:50%;width:208px;height:208px;display:flex;justify-content:center;align-items:center}.circle-xxl-s img{border-radius:50%;width:100%;height:100%}.circle-xxl-s .initials{color:#fff;font-size:40px;line-height:40px;letter-spacing:.2625px}.circle-r-m{border-radius:50%;width:50px;height:50px;display:flex;justify-content:center;align-items:center}.circle-r-m img{border-radius:50%;width:100%;height:100%}.circle-r-m .initials{color:#fff;font-size:16px;line-height:40px;letter-spacing:.2625px}.circle-r-xl{border-radius:50%;width:105px;height:105px;display:flex;justify-content:center;align-items:center}.circle-r-xl img{border-radius:50%;width:100%;height:100%}.circle-r-xl .initials{color:#fff;font-size:20px;line-height:19px;letter-spacing:.2625px}.circle-r-p-m{border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center}.circle-r-p-m img{border-radius:50%;width:100%;height:100%}.circle-r-p-m .initials{color:#fff;font-size:16px;line-height:40px;letter-spacing:.2625px}.circle-m-side{border-radius:50%;width:72px!important;height:72px!important;display:flex;justify-content:center;align-items:center}.circle-m-side img{border-radius:10%;width:40px;height:40px}.circle-m-side .initials{color:#fff;font-size:14px;line-height:19px;letter-spacing:.2625px}@media only screen and (max-width: 960px){.circle-xxl-s{width:100px;height:100px}.circle-xxl-s .initials{font-size:24px;line-height:24px}}.circle-m-recommended{border-radius:50%;width:72px!important;height:72px!important;display:flex;justify-content:center;align-items:center;margin-top:-49px}.circle-m-recommended img{border-radius:10%;width:40px;height:40px}.circle-m-recommended .initials{color:#fff;font-size:14px;line-height:19px;letter-spacing:.2625px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.PipeCertificateImageURL, name: "pipeCertImageURL" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarPhotoComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ws-widget-avatar-photo', template: "<div id=\"user_icon\" [ngClass]=\"{'circle-s' : size=== 's',\n'circle-m' : size=== 'm',\n'circle-l' : size=== 'l',\n'circle-xl' : size=== 'xl',\n'circle-xxl' : size=== 'xxl',\n'circle-l-xs' : size=== 'l-xs',\n'circle-l-s' : size=== 'l-s',\n'circle-xl-s' : size=== 'xl-s',\n'circle-r-m': size=== 'round-m',\n'circle-r-xl': size=== 'round-xl',\n'circle-r-p-m': size=== 'profile-round-m',\n'circle-m-side': size=== 'm-side',\n'circle-m-recommended': size==='m-recommended',\n'circle-xxl-s': size=== 'xxl-s'}\" [ngStyle]=\"{'background-color':  circleColor }\">\n  <img *ngIf=\"!showInitials\" loading=\"lazy\" src=\"{{photoUrl |pipeCertImageURL}}\" [alt]=\"photoUrl? '' :(name || userInitials || size || random)\">\n\n  <div *ngIf=\"showInitials\" class=\"initials\" i18n-aria-label>\n    {{ userInitials }} \n  </div>\n  <div *ngIf=\"showBadge\"><span class=\"profile-badge\">  \n    <img src=\"fusion-assets/images/profile-badge.png\">\n  </span></div>\n\n  <!-- <div *ngIf=\"imageType === 'user-photo'\">\n    <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"user-image\" class=\"user-image\" [ngClass]=\"{'user-image-small': imageSize === 'small'}\">\n    <div class=\"user-image\" [ngClass]=\"{'user-image-small': imageSize === 'small'}\">\n      <span class=\"name-initials-image font-normal ws-mat-primary-default-text ws-mat-accent-background\"\n      *ngIf=\"!imageUrl\">{{ shortName }}</span>\n    </div>\n  </div> -->\n</div>", styles: ["@charset \"UTF-8\";.success-checkmark:after{content:\"\\2714\";position:absolute;left:25px;top:20px;width:11px;height:11px;border:1px solid #1D8923;background:#1d8923;border-radius:50%;color:#fff;line-height:11px;text-align:center;font-size:9px}.profile-badge{position:absolute;top:10px;right:0}.profile-badge img{height:15px!important;width:15px!important}.circle-s{border-radius:50%;width:24px;height:24px;display:flex;justify-content:center;align-items:center}.circle-s img{border-radius:50%;width:100%;height:100%}.circle-s .initials{color:#fff;font-size:10px;line-height:12px;letter-spacing:.2625px}.circle-m{border-radius:50%;width:72px!important;height:72px!important;display:flex;justify-content:center;align-items:center;margin-top:-36px}.circle-m img{border-radius:10%;width:40px;height:40px}.circle-m .initials{color:#fff;font-size:14px;line-height:19px;letter-spacing:.2625px}.circle-l{border-radius:50%;width:80px;height:80px;display:flex;justify-content:center;align-items:center}.circle-l img{border-radius:10%;width:80px;height:80px}.circle-l .initials{color:#fff;font-size:20px;line-height:19px;letter-spacing:.2625px}.circle-xl{border-radius:50%;width:105px;height:105px;display:flex;justify-content:center;align-items:center}.circle-xl img{border-radius:10%;width:105px;height:105px}.circle-xl .initials{color:#fff;font-size:20px;line-height:19px;letter-spacing:.2625px}.circle-xxl{border-radius:50%;width:145px;height:145px;display:flex;justify-content:center;align-items:center}.circle-xxl img{border-radius:10%;width:145px;height:145px}.circle-xxl .initials{color:#fff;font-size:20px;line-height:19px;letter-spacing:.2625px}.circle-l-xs{border-radius:50%;width:29px;height:29px;display:flex;justify-content:center;align-items:center}.circle-l-xs img{border-radius:50%;width:100%;height:100%}.circle-l-xs .initials{color:#fff;font-size:12px;line-height:12px;letter-spacing:.2625px}.circle-l-s{border-radius:50%;width:80px;height:80px;display:flex;justify-content:center;align-items:center}.circle-l-s img{border-radius:4px;width:80px;height:80px}.circle-l-s .initials{color:#fff;font-size:24px;line-height:24px;letter-spacing:.2625px}.circle-xl-s{border-radius:50%;width:125px;height:125px;display:flex;justify-content:center;align-items:center}.circle-xl-s img{border-radius:4px;width:152px;height:125px}.circle-xl-s .initials{color:#fff;font-size:32px;line-height:32px;letter-spacing:.2625px}.circle-xxl-s{border-radius:50%;width:208px;height:208px;display:flex;justify-content:center;align-items:center}.circle-xxl-s img{border-radius:50%;width:100%;height:100%}.circle-xxl-s .initials{color:#fff;font-size:40px;line-height:40px;letter-spacing:.2625px}.circle-r-m{border-radius:50%;width:50px;height:50px;display:flex;justify-content:center;align-items:center}.circle-r-m img{border-radius:50%;width:100%;height:100%}.circle-r-m .initials{color:#fff;font-size:16px;line-height:40px;letter-spacing:.2625px}.circle-r-xl{border-radius:50%;width:105px;height:105px;display:flex;justify-content:center;align-items:center}.circle-r-xl img{border-radius:50%;width:100%;height:100%}.circle-r-xl .initials{color:#fff;font-size:20px;line-height:19px;letter-spacing:.2625px}.circle-r-p-m{border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center}.circle-r-p-m img{border-radius:50%;width:100%;height:100%}.circle-r-p-m .initials{color:#fff;font-size:16px;line-height:40px;letter-spacing:.2625px}.circle-m-side{border-radius:50%;width:72px!important;height:72px!important;display:flex;justify-content:center;align-items:center}.circle-m-side img{border-radius:10%;width:40px;height:40px}.circle-m-side .initials{color:#fff;font-size:14px;line-height:19px;letter-spacing:.2625px}@media only screen and (max-width: 960px){.circle-xxl-s{width:100px;height:100px}.circle-xxl-s .initials{font-size:24px;line-height:24px}}.circle-m-recommended{border-radius:50%;width:72px!important;height:72px!important;display:flex;justify-content:center;align-items:center;margin-top:-49px}.circle-m-recommended img{border-radius:10%;width:40px;height:40px}.circle-m-recommended .initials{color:#fff;font-size:14px;line-height:19px;letter-spacing:.2625px}\n"] }]
        }], propDecorators: { datalen: [{
                type: Input
            }], photoUrl: [{
                type: Input
            }], name: [{
                type: Input
            }], size: [{
                type: Input
            }], randomColor: [{
                type: Input
            }], initials: [{
                type: Input
            }], showBadge: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 