import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Input, HostBinding, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
import * as i1$1 from '@aztrix/helpers';
import { isDeflatedProfile, avatarUrl, isProfile, groupIconClass, isGroup, isPublic, isPrivate, isMeProfile, isDynamic, isPublicProfile, HelperPipesModule } from '@aztrix/helpers';
import * as i1 from '@aztrix/components/overlay';
import { OverlayModule } from '@aztrix/components/overlay';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from 'ngx-image-cropper';
import { ImageCropperModule } from 'ngx-image-cropper';
import * as i4 from '@aztrix/components/button';
import { ButtonModule } from '@aztrix/components/button';
import * as i3$2 from '@aztrix/components/snackbar';
import { SnackbarModule } from '@aztrix/components/snackbar';
import * as i3$1 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';
import * as i4$1 from '@aztrix/components/image-source';
import { ImageSourceModule } from '@aztrix/components/image-source';
import * as i5 from '@aztrix/components/property-published-button';
import { PropertyPublishedButtonModule } from '@aztrix/components/property-published-button';
import { __decorate } from 'tslib';
import { UntilDestroy } from '@ngneat/until-destroy';
import { ReplaySubject } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';

class AvatarCropperModalComponent {
    constructor(_changeDetector, _overlay) {
        this._changeDetector = _changeDetector;
        this._overlay = _overlay;
        this.isIndividual = false;
    }
    imageCropped(event) {
        this.croppedImage = event;
        this._changeDetector.markForCheck();
    }
    save() {
        this._overlay.closeModal();
        this.didFinishCropping(this.croppedImage);
    }
}
AvatarCropperModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AvatarCropperModalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
AvatarCropperModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: AvatarCropperModalComponent, selector: "ax-avatar-cropper-modal", inputs: { isIndividual: "isIndividual" }, ngImport: i0, template: "<div class=\"modal-content-wrapper\">\n  <div class=\"c-modal__section\">\n    <div class=\"image-crop\" *ngIf=\"imageChangedEvent\">\n      <image-cropper\n        [imageChangedEvent]=\"imageChangedEvent\"\n        [maintainAspectRatio]=\"true\"\n        [resizeToWidth]=\"250\"\n        [roundCropper]=\"isIndividual\"\n        (imageCropped)=\"imageCropped($event)\"\n      ></image-cropper>\n    </div>\n    <div class=\"h-button-wrapper\">\n      <button axButton (click)=\"save()\" color=\"primary\" fullWidth outline>\n        {{ 'label.upload' | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["image-cropper{padding:0!important}.image-crop{width:50%;margin:0 auto 1rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ImageCropperComponent, selector: "image-cropper", inputs: ["format", "transform", "maintainAspectRatio", "aspectRatio", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "cropper", "alignImage", "disabled", "imageChangedEvent", "imageURL", "imageBase64", "imageFile"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AvatarCropperModalComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-avatar-cropper-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal-content-wrapper\">\n  <div class=\"c-modal__section\">\n    <div class=\"image-crop\" *ngIf=\"imageChangedEvent\">\n      <image-cropper\n        [imageChangedEvent]=\"imageChangedEvent\"\n        [maintainAspectRatio]=\"true\"\n        [resizeToWidth]=\"250\"\n        [roundCropper]=\"isIndividual\"\n        (imageCropped)=\"imageCropped($event)\"\n      ></image-cropper>\n    </div>\n    <div class=\"h-button-wrapper\">\n      <button axButton (click)=\"save()\" color=\"primary\" fullWidth outline>\n        {{ 'label.upload' | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["image-cropper{padding:0!important}.image-crop{width:50%;margin:0 auto 1rem}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.OverlayService }]; }, propDecorators: { isIndividual: [{
                type: Input
            }] } });

var AvatarType;
(function (AvatarType) {
    AvatarType["INDIVIDUAL"] = "INDIVIDUAL";
    AvatarType["ORGANISATION"] = "ORGANISATION";
    AvatarType["GROUP"] = "GROUP";
    AvatarType["PROPOSAL"] = "PROPOSAL";
    AvatarType["PAGE"] = "PAGE";
    AvatarType["ALIST"] = "ALIST";
})(AvatarType || (AvatarType = {}));

var BadgeIconType;
(function (BadgeIconType) {
    BadgeIconType["AZTRIX"] = "AZTRIX";
    BadgeIconType["BLOCKED"] = "BLOCKED";
    BadgeIconType["MEMBER"] = "MEMBER";
    BadgeIconType["FOLLOWER"] = "FOLLOWER";
    BadgeIconType["PUBLIC"] = "PUBLIC";
    BadgeIconType["PRIVATE"] = "PRIVATE";
    BadgeIconType["CLOSED"] = "CLOSED";
})(BadgeIconType || (BadgeIconType = {}));

class BadgeIconComponent {
    constructor() {
        this.classes = 'badge';
    }
    ngOnChanges() {
        const colorClass = this.colorClass;
        this.classes = 'badge' + (colorClass ? ` ${colorClass}` : '');
    }
    get iconClass() {
        switch (this.type) {
            case BadgeIconType.BLOCKED:
                return 'minus';
            case BadgeIconType.MEMBER:
                return 'user';
            case BadgeIconType.FOLLOWER:
                return 'heart';
            case BadgeIconType.PUBLIC:
                return 'eye';
            case BadgeIconType.PRIVATE:
                return 'eye-off';
            case BadgeIconType.CLOSED:
                return 'account-multiple';
            case BadgeIconType.AZTRIX:
                return 'custom:aztrixlogo';
            default:
                return null;
        }
    }
    get colorClass() {
        if (this.color) {
            return this.color + (this.color.endsWith('-bg') ? '' : '-bg');
        }
        switch (this.type) {
            case BadgeIconType.BLOCKED:
                return 'red-bg';
            case BadgeIconType.MEMBER:
                return 'green-bg';
            case BadgeIconType.FOLLOWER:
                return 'green-bg';
            case BadgeIconType.PUBLIC:
                return 'green-bg';
            case BadgeIconType.PRIVATE:
                return 'grey-bg';
            case BadgeIconType.CLOSED:
                return 'green-bg';
            default:
                return null;
        }
    }
}
BadgeIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BadgeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
BadgeIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: BadgeIconComponent, selector: "ax-badge-icon", inputs: { type: "type", color: "color" }, host: { properties: { "class": "this.classes" } }, usesOnChanges: true, ngImport: i0, template: "<ax-icon class=\"icon\" [name]=\"iconClass\"></ax-icon>\n", styles: [":host{display:block;border:1px solid white;border-radius:50%;width:100%;height:100%;min-width:18px;min-height:18px;color:#fff;box-shadow:0 1px 5px #00000080;position:relative;z-index:5}:host .icon{top:50%;left:50%;transform:translate(-50%,-50%);width:50%;height:50%;position:absolute}\n"], dependencies: [{ kind: "component", type: i3$1.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BadgeIconComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-badge-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-icon class=\"icon\" [name]=\"iconClass\"></ax-icon>\n", styles: [":host{display:block;border:1px solid white;border-radius:50%;width:100%;height:100%;min-width:18px;min-height:18px;color:#fff;box-shadow:0 1px 5px #00000080;position:relative;z-index:5}:host .icon{top:50%;left:50%;transform:translate(-50%,-50%);width:50%;height:50%;position:absolute}\n"] }]
        }], propDecorators: { type: [{
                type: Input
            }], color: [{
                type: Input
            }], classes: [{
                type: HostBinding,
                args: ['class']
            }] } });

class AvatarComponent {
    constructor(_urlTransformer) {
        this._urlTransformer = _urlTransformer;
        this.source = null;
        this.type = AvatarType.INDIVIDUAL;
        this.iconColor = 'avatar-bg';
        this.border = true;
        this.round = true;
        this.rounded = false;
        this.published = false;
        this.fallbackIcon = this._fallbackIcon(this.type);
        // eslint-disable-next-line @typescript-eslint/naming-convention
        this.AvatarType = AvatarType;
    }
    ngOnChanges(changes) {
        if (changes.source && this.source) {
            this._source = this._sourceAvatar(this.source);
        }
        if (!this.source) {
            this._source = null;
        }
        if (changes.source || changes.type) {
            this.fallbackIcon = this._fallbackIcon(this.type);
        }
    }
    _fallbackIcon(type) {
        switch (type) {
            case AvatarType.ORGANISATION:
                return 'factory';
            case AvatarType.GROUP:
                return 'account-group';
            case AvatarType.PROPOSAL:
                return 'file-document-edit';
            case AvatarType.PAGE:
                return 'card-text';
            default:
                return 'account';
        }
    }
    _sourceAvatar(source) {
        return source.includes('data:image')
            ? source
            : this._urlTransformer.transformUrl(this._staticFilePath(source));
    }
    _staticFilePath(source) {
        return this.type === AvatarType.ALIST
            ? `staticFiles/alistFiles/${source}`
            : `staticFiles/avatars/${source}`;
    }
}
AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AvatarComponent, deps: [{ token: i1$1.UrlTransformerService }], target: i0.ɵɵFactoryTarget.Component });
AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: AvatarComponent, selector: "ax-avatar", inputs: { source: "source", type: "type", icon: "icon", iconColor: "iconColor", badge: "badge", badgeColor: "badgeColor", border: "border", round: "round", rounded: "rounded", published: "published" }, usesOnChanges: true, ngImport: i0, template: "<!-- image -->\n<ax-image-source\n  *ngIf=\"!icon\"\n  [border]=\"border\"\n  [source]=\"_source\"\n  [round]=\"round\"\n  [rounded]=\"rounded\"\n>\n  <div\n    class=\"placeholder\"\n    [ngClass]=\"{border: border}\"\n    [style.border-radius]=\"round || rounded ? (round ? '50%' : '10px') : undefined\"\n  >\n    <ax-icon class=\"placeholder-icon\" [name]=\"fallbackIcon\"></ax-icon>\n  </div>\n</ax-image-source>\n\n<!-- icon -->\n<div *ngIf=\"icon\" class=\"avatar\" [ngClass]=\"[iconColor, type | lowercase]\">\n  <ax-icon class=\"icon avatar-icon\" [name]=\"icon\"></ax-icon>\n</div>\n\n<!-- badge -->\n<div class=\"avatar-badge\" *ngIf=\"badge && badgeColor\">\n  <ax-badge-icon [type]=\"badge\" [color]=\"badgeColor\"></ax-badge-icon>\n</div>\n\n<ax-property-published-button *ngIf=\"published\"></ax-property-published-button>\n", styles: [":host{position:relative;display:flex;width:100%;height:100%}:host ::ng-deep ax-property-published-button{right:23px;top:0;background-color:transparent}@media only screen and (min-width: 600px){:host ::ng-deep ax-property-published-button{right:42px;top:-9px}}.avatar{width:100%;height:100%;border:3px solid #ebebeb;background-color:var(--primary-color-400);text-align:center;font-size:inherit;color:#fff}.avatar.individual{border-radius:50%}.avatar.group{border-radius:10px}.avatar.organisation{border-radius:0}.avatar.facebook{background-color:#1877f2}.avatar.twitter{background-color:#000}.avatar.google{background-color:#5789ee}.avatar.microsoft{background-color:#66a5ee}.avatar.yahoo{background-color:#9871d8}.avatar.avatar-bg--green{background-color:var(--primary-color-500)}.placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#fff9;background-color:var(--primary-color-400)}.placeholder.border{border:3px solid #ebebeb}.placeholder .placeholder-icon{width:50%;height:50%}.avatar-badge{display:block;min-width:18px;min-height:18px;position:absolute;bottom:-2px;right:-2px}.avatar-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;width:50%;height:50%}.avatar-bg{background-color:#a7a8ac}.avatar-bg--facebook{background-color:#1877f2}.avatar-bg--twitter{background-color:#000}.avatar-bg--google{background-color:#5789ee}.avatar-bg--microsoft{background-color:#66a5ee}.avatar-bg--yahoo{background-color:#9871d8}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: i4$1.ImageSourceComponent, selector: "ax-image-source", inputs: ["source", "fallbackSource", "actualSize", "alt", "round", "rounded", "border"] }, { kind: "component", type: i5.PropertyPublishedButtonComponent, selector: "ax-property-published-button" }, { kind: "component", type: BadgeIconComponent, selector: "ax-badge-icon", inputs: ["type", "color"] }, { kind: "pipe", type: i2.LowerCasePipe, name: "lowercase" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AvatarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-avatar', template: "<!-- image -->\n<ax-image-source\n  *ngIf=\"!icon\"\n  [border]=\"border\"\n  [source]=\"_source\"\n  [round]=\"round\"\n  [rounded]=\"rounded\"\n>\n  <div\n    class=\"placeholder\"\n    [ngClass]=\"{border: border}\"\n    [style.border-radius]=\"round || rounded ? (round ? '50%' : '10px') : undefined\"\n  >\n    <ax-icon class=\"placeholder-icon\" [name]=\"fallbackIcon\"></ax-icon>\n  </div>\n</ax-image-source>\n\n<!-- icon -->\n<div *ngIf=\"icon\" class=\"avatar\" [ngClass]=\"[iconColor, type | lowercase]\">\n  <ax-icon class=\"icon avatar-icon\" [name]=\"icon\"></ax-icon>\n</div>\n\n<!-- badge -->\n<div class=\"avatar-badge\" *ngIf=\"badge && badgeColor\">\n  <ax-badge-icon [type]=\"badge\" [color]=\"badgeColor\"></ax-badge-icon>\n</div>\n\n<ax-property-published-button *ngIf=\"published\"></ax-property-published-button>\n", styles: [":host{position:relative;display:flex;width:100%;height:100%}:host ::ng-deep ax-property-published-button{right:23px;top:0;background-color:transparent}@media only screen and (min-width: 600px){:host ::ng-deep ax-property-published-button{right:42px;top:-9px}}.avatar{width:100%;height:100%;border:3px solid #ebebeb;background-color:var(--primary-color-400);text-align:center;font-size:inherit;color:#fff}.avatar.individual{border-radius:50%}.avatar.group{border-radius:10px}.avatar.organisation{border-radius:0}.avatar.facebook{background-color:#1877f2}.avatar.twitter{background-color:#000}.avatar.google{background-color:#5789ee}.avatar.microsoft{background-color:#66a5ee}.avatar.yahoo{background-color:#9871d8}.avatar.avatar-bg--green{background-color:var(--primary-color-500)}.placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#fff9;background-color:var(--primary-color-400)}.placeholder.border{border:3px solid #ebebeb}.placeholder .placeholder-icon{width:50%;height:50%}.avatar-badge{display:block;min-width:18px;min-height:18px;position:absolute;bottom:-2px;right:-2px}.avatar-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;width:50%;height:50%}.avatar-bg{background-color:#a7a8ac}.avatar-bg--facebook{background-color:#1877f2}.avatar-bg--twitter{background-color:#000}.avatar-bg--google{background-color:#5789ee}.avatar-bg--microsoft{background-color:#66a5ee}.avatar-bg--yahoo{background-color:#9871d8}\n"] }]
        }], ctorParameters: function () { return [{ type: i1$1.UrlTransformerService }]; }, propDecorators: { source: [{
                type: Input
            }], type: [{
                type: Input
            }], icon: [{
                type: Input
            }], iconColor: [{
                type: Input
            }], badge: [{
                type: Input
            }], badgeColor: [{
                type: Input
            }], border: [{
                type: Input
            }], round: [{
                type: Input
            }], rounded: [{
                type: Input
            }], published: [{
                type: Input
            }] } });

class AvatarEditComponent {
    constructor(_overlay, _elementRef) {
        this._overlay = _overlay;
        this._elementRef = _elementRef;
        this.canDelete = false;
        this.published = false;
        this.error = false;
        // eslint-disable-next-line @typescript-eslint/naming-convention
        this.AvatarType = AvatarType;
    }
    fileSelected(event) {
        this.error = false;
        const acceptedFileTypes = ['image/jpeg', 'image/png'];
        const file = event.target.files[0];
        if (!acceptedFileTypes.includes(file.type)) {
            this.error = true;
        }
        else {
            this._overlay.createModal(AvatarCropperModalComponent, {
                title: 'modal.avatar.title',
                init: (avatarModal) => {
                    avatarModal.isIndividual =
                        this.type === AvatarType.INDIVIDUAL || this.type === AvatarType.ALIST;
                    avatarModal.imageChangedEvent = event;
                    avatarModal.didFinishCropping = (croppedImage) => {
                        this.update(croppedImage.base64);
                        this.fileInputElement.nativeElement.value = '';
                    };
                },
            }, this._elementRef);
        }
    }
}
AvatarEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AvatarEditComponent, deps: [{ token: i1.OverlayService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
AvatarEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: AvatarEditComponent, selector: "ax-avatar-edit", inputs: { name: "name", avatarURL: "avatarURL", canDelete: "canDelete", delete: "delete", type: "type", update: "update", published: "published" }, viewQueries: [{ propertyName: "fileInputElement", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<ax-snackbar style=\"margin-bottom: 1rem\" *ngIf=\"error\" color=\"red\" [dismissible]=\"false\">\n  {{ 'modal.avatar.error' | translate }}\n</ax-snackbar>\n<div class=\"current-avatar\">\n  <ax-avatar\n    [source]=\"avatarURL\"\n    [type]=\"type\"\n    [published]=\"published\"\n    [round]=\"type === AvatarType.INDIVIDUAL || type === AvatarType.ALIST\"\n    [rounded]=\"type === AvatarType.GROUP\"\n  ></ax-avatar>\n</div>\n<div class=\"h-button-wrapper h-button-wrapper--center\">\n  <button axButton *ngIf=\"canDelete\" (click)=\"delete()\" color=\"danger\" outline>\n    {{ 'label.delete' | translate }}\n  </button>\n  <label class=\"file-button\" for=\"file\">\n    {{ 'modal.avatar.upload' | translate | uppercase }}\n    <input\n      #fileInput\n      [attr.name]=\"name\"\n      type=\"file\"\n      id=\"file\"\n      (change)=\"fileSelected($event)\"\n      accept=\"image/*\"\n    />\n  </label>\n</div>\n", styles: [".current-avatar{text-align:center;width:120px;height:120px;margin:.5rem auto 0}.current-avatar ::ng-deep img{max-height:100px;width:auto;margin:0 auto}@media only screen and (min-width: 600px){.current-avatar ::ng-deep img{max-height:160px}}@media only screen and (min-width: 600px){.current-avatar{width:160px;height:160px}}input[type=file]{position:absolute;top:-200%;left:0;width:1px;height:1px;opacity:0;visibility:hidden;cursor:pointer}.h-button-wrapper{padding:1rem 0}.file-button{background-color:var(--primary-color-500);color:var(--primary-color-500-contrast);border:1px solid transparent;font-size:.875rem;font-weight:700;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:0;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;min-width:64px;line-height:2rem;padding:0 .75rem;border-radius:20px;overflow:visible;transform:translateZ(0);transition:background .4s cubic-bezier(.25,.8,.25,1),color .4s cubic-bezier(.25,.8,.25,1)}.file-button:hover{color:#fff;background-color:var(--primary-color-900)}.file-button:active{color:#fff;background-color:#4c5965}.file-button.is-disabled,.file-button:disabled,.file-button.is-disabled:hover,.file-button:disabled:hover{background-color:transparent;color:#bdc3c9;cursor:default;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.SnackbarComponent, selector: "ax-snackbar", inputs: ["type", "timeout", "dismissible", "open", "icon", "color"], outputs: ["didClose"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "component", type: AvatarComponent, selector: "ax-avatar", inputs: ["source", "type", "icon", "iconColor", "badge", "badgeColor", "border", "round", "rounded", "published"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AvatarEditComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-avatar-edit', template: "<ax-snackbar style=\"margin-bottom: 1rem\" *ngIf=\"error\" color=\"red\" [dismissible]=\"false\">\n  {{ 'modal.avatar.error' | translate }}\n</ax-snackbar>\n<div class=\"current-avatar\">\n  <ax-avatar\n    [source]=\"avatarURL\"\n    [type]=\"type\"\n    [published]=\"published\"\n    [round]=\"type === AvatarType.INDIVIDUAL || type === AvatarType.ALIST\"\n    [rounded]=\"type === AvatarType.GROUP\"\n  ></ax-avatar>\n</div>\n<div class=\"h-button-wrapper h-button-wrapper--center\">\n  <button axButton *ngIf=\"canDelete\" (click)=\"delete()\" color=\"danger\" outline>\n    {{ 'label.delete' | translate }}\n  </button>\n  <label class=\"file-button\" for=\"file\">\n    {{ 'modal.avatar.upload' | translate | uppercase }}\n    <input\n      #fileInput\n      [attr.name]=\"name\"\n      type=\"file\"\n      id=\"file\"\n      (change)=\"fileSelected($event)\"\n      accept=\"image/*\"\n    />\n  </label>\n</div>\n", styles: [".current-avatar{text-align:center;width:120px;height:120px;margin:.5rem auto 0}.current-avatar ::ng-deep img{max-height:100px;width:auto;margin:0 auto}@media only screen and (min-width: 600px){.current-avatar ::ng-deep img{max-height:160px}}@media only screen and (min-width: 600px){.current-avatar{width:160px;height:160px}}input[type=file]{position:absolute;top:-200%;left:0;width:1px;height:1px;opacity:0;visibility:hidden;cursor:pointer}.h-button-wrapper{padding:1rem 0}.file-button{background-color:var(--primary-color-500);color:var(--primary-color-500-contrast);border:1px solid transparent;font-size:.875rem;font-weight:700;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:0;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;min-width:64px;line-height:2rem;padding:0 .75rem;border-radius:20px;overflow:visible;transform:translateZ(0);transition:background .4s cubic-bezier(.25,.8,.25,1),color .4s cubic-bezier(.25,.8,.25,1)}.file-button:hover{color:#fff;background-color:var(--primary-color-900)}.file-button:active{color:#fff;background-color:#4c5965}.file-button.is-disabled,.file-button:disabled,.file-button.is-disabled:hover,.file-button:disabled:hover{background-color:transparent;color:#bdc3c9;cursor:default;pointer-events:none}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.OverlayService }, { type: i0.ElementRef }]; }, propDecorators: { name: [{
                type: Input
            }], avatarURL: [{
                type: Input
            }], canDelete: [{
                type: Input
            }], delete: [{
                type: Input
            }], type: [{
                type: Input
            }], update: [{
                type: Input
            }], published: [{
                type: Input
            }], fileInputElement: [{
                type: ViewChild,
                args: ['fileInput']
            }] } });

class AvatarByProfileComponent {
    constructor(_overlay, _elementRef) {
        this._overlay = _overlay;
        this._elementRef = _elementRef;
        this.edit = false;
        this.border = true;
        this.update = new EventEmitter();
        this.type = AvatarType.INDIVIDUAL;
        // eslint-disable-next-line @typescript-eslint/naming-convention
        this.AvatarType = AvatarType;
    }
    ngOnChanges(changes) {
        if (changes.profile && this.profile) {
            if (isDeflatedProfile(this.profile)) {
                this.source = avatarUrl(this.profile);
                this.type = AvatarType[this.profile.profileContext];
                this.fallback = this._fallbackAvatarURL(this.source, this.type);
            }
            else if (isProfile(this.profile)) {
                this.source = avatarUrl(this.profile);
                this.type = AvatarType[this.profile.profileContext];
                this.fallback = this._fallbackAvatarURL(this.source, this.type);
            }
            else {
                this.source = this.profile.avatar;
                this.type = AvatarType.GROUP;
                this.fallback = this._fallbackAvatarURL(this.source, this.type);
                this.icon = groupIconClass(this.profile);
                this.iconColor = this._iconColor();
            }
        }
    }
    openEditModal() {
        this._overlay.createModal(AvatarEditComponent, {
            title: 'modal.avatar.title',
            init: (avatarEditModal) => {
                avatarEditModal.avatarURL = this.source;
                avatarEditModal.update = (base64) => {
                    this.update.emit(base64);
                    this.source = base64;
                };
                avatarEditModal.canDelete = !!this.source;
                avatarEditModal.delete = () => {
                    this.update.emit(null);
                    this.source = null;
                };
            },
        }, this._elementRef);
    }
    _fallbackAvatarURL(source, type) {
        if (type === AvatarType.ORGANISATION) {
            return `assets/images/avatar/default/default_avatar_organisation${source ? '' : '_placeholder'}.png`;
        }
        if (type === AvatarType.GROUP) {
            return `assets/images/avatar/default/default_avatar_group${source ? '' : '_placeholder'}.png`;
        }
        return `assets/images/avatar/default/default_avatar_individual${source ? '' : '_placeholder'}.png`;
    }
    _iconColor() {
        if (isProfile(this.profile)) {
            return 'avatar-bg';
        }
        else {
            this.profile = this.profile;
            if (this.profile.importProvider === 'FACEBOOK') {
                return 'avatar-bg--facebook';
            }
            if (this.profile.importProvider === 'TWITTER') {
                return 'avatar-bg--twitter';
            }
            if (this.profile.importProvider === 'YAHOO') {
                return 'avatar-bg--yahoo';
            }
            if (this.profile.importProvider === 'MICROSOFT') {
                return 'avatar-bg--microsoft';
            }
            if (this.profile.importProvider === 'GOOGLE') {
                return 'avatar-bg--google';
            }
            return 'green-bg';
        }
    }
}
AvatarByProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AvatarByProfileComponent, deps: [{ token: i1.OverlayService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
AvatarByProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: AvatarByProfileComponent, selector: "ax-avatar-by-profile", inputs: { profile: "profile", edit: "edit", badge: "badge", badgeColor: "badgeColor", border: "border" }, outputs: { update: "update" }, usesOnChanges: true, ngImport: i0, template: "<ax-avatar\n  [source]=\"source\"\n  [type]=\"type\"\n  [round]=\"type === AvatarType.INDIVIDUAL || type === AvatarType.ALIST\"\n  [rounded]=\"type === AvatarType.GROUP\"\n  [icon]=\"icon\"\n  [iconColor]=\"iconColor\"\n  [badge]=\"badge\"\n  [badgeColor]=\"badgeColor\"\n  [border]=\"border\"\n  (update)=\"update.emit($event)\"\n></ax-avatar>\n\n<span\n  *ngIf=\"edit\"\n  class=\"avatar-edit-overlay__button\"\n  [ngClass]=\"[type | lowercase]\"\n  (click)=\"openEditModal()\"\n>\n  <ax-icon class=\"icon\" name=\"camera\"></ax-icon>\n</span>\n", styles: [":host{display:block;width:100%;height:100%;position:relative}.avatar-edit-overlay__button{cursor:pointer;width:100%;height:50%;position:absolute;left:0;bottom:0;z-index:2;border-bottom-right-radius:100px;border-bottom-left-radius:100px;color:#fff;background-color:#363f4880;display:flex;justify-content:center;align-items:center}.avatar-edit-overlay__button .icon{font-size:1rem;width:1em;height:1em}.avatar-edit-overlay__button.group{border-bottom-right-radius:10px;border-bottom-left-radius:10px}@media only screen and (min-width: 600px){.avatar-edit-overlay__button .icon{font-size:1.5rem}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: AvatarComponent, selector: "ax-avatar", inputs: ["source", "type", "icon", "iconColor", "badge", "badgeColor", "border", "round", "rounded", "published"] }, { kind: "pipe", type: i2.LowerCasePipe, name: "lowercase" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AvatarByProfileComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-avatar-by-profile', template: "<ax-avatar\n  [source]=\"source\"\n  [type]=\"type\"\n  [round]=\"type === AvatarType.INDIVIDUAL || type === AvatarType.ALIST\"\n  [rounded]=\"type === AvatarType.GROUP\"\n  [icon]=\"icon\"\n  [iconColor]=\"iconColor\"\n  [badge]=\"badge\"\n  [badgeColor]=\"badgeColor\"\n  [border]=\"border\"\n  (update)=\"update.emit($event)\"\n></ax-avatar>\n\n<span\n  *ngIf=\"edit\"\n  class=\"avatar-edit-overlay__button\"\n  [ngClass]=\"[type | lowercase]\"\n  (click)=\"openEditModal()\"\n>\n  <ax-icon class=\"icon\" name=\"camera\"></ax-icon>\n</span>\n", styles: [":host{display:block;width:100%;height:100%;position:relative}.avatar-edit-overlay__button{cursor:pointer;width:100%;height:50%;position:absolute;left:0;bottom:0;z-index:2;border-bottom-right-radius:100px;border-bottom-left-radius:100px;color:#fff;background-color:#363f4880;display:flex;justify-content:center;align-items:center}.avatar-edit-overlay__button .icon{font-size:1rem;width:1em;height:1em}.avatar-edit-overlay__button.group{border-bottom-right-radius:10px;border-bottom-left-radius:10px}@media only screen and (min-width: 600px){.avatar-edit-overlay__button .icon{font-size:1.5rem}}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.OverlayService }, { type: i0.ElementRef }]; }, propDecorators: { profile: [{
                type: Input
            }], edit: [{
                type: Input
            }], badge: [{
                type: Input
            }], badgeColor: [{
                type: Input
            }], border: [{
                type: Input
            }], update: [{
                type: Output
            }] } });

let AvatarProfileComponent = class AvatarProfileComponent {
    constructor() {
        this.edit = false;
        this.blocked = false;
        this.border = true;
        this.update = new EventEmitter();
        this._putBadge = false;
        this._profile$ = new ReplaySubject(1);
        this._putBadge$ = new ReplaySubject(1);
        this.badge$ = this._profile$.pipe(map((profile) => this._badge(profile, this.blocked)), shareReplay(1));
        this.badgeColor$ = this._profile$.pipe(map((profile) => this._badgeColor(profile, this.blocked)), shareReplay(1));
    }
    set putBadge(putBadge) {
        this._putBadge = typeof putBadge === 'boolean' ? putBadge : true;
    }
    ngOnChanges(changes) {
        if (changes.putBadge) {
            this._putBadge$.next(this._putBadge);
        }
        if (changes.profile && this.profile && isProfile(this.profile)) {
            this._profile$.next(this.profile);
        }
    }
    _badge(profile, blocked) {
        if (!this._putBadge) {
            return null;
        }
        if (!profile) {
            return null;
        }
        if (isProfile(profile)) {
            // Blocked badge
            if (blocked) {
                return BadgeIconType.BLOCKED;
            }
            // Default Aztrix badge
            return BadgeIconType.AZTRIX;
        }
        else if (isGroup(profile)) {
            if (isPublic(profile)) {
                return BadgeIconType.PUBLIC;
            }
            else if ((isPrivate(profile) && profile.visibleToMembers) ||
                (isPrivate(profile) && profile.member)) {
                return BadgeIconType.CLOSED;
            }
            else if (isPrivate(profile) && !profile.visibleToMembers) {
                return BadgeIconType.PRIVATE;
            }
        }
        return null;
    }
    _badgeColor(profile, blocked) {
        if (!profile || isGroup(profile) || isMeProfile(profile)) {
            return 'green';
        }
        if (blocked) {
            return 'red';
        }
        const contact = profile;
        if (isDynamic(contact)) {
            return 'green';
        }
        if (isPublicProfile(contact)) {
            return 'grey-light1';
        }
        if (contact.invited) {
            return 'orange';
        }
        return null;
    }
};
AvatarProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AvatarProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AvatarProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: AvatarProfileComponent, selector: "ax-avatar-profile", inputs: { profile: "profile", edit: "edit", blocked: "blocked", border: "border", putBadge: "putBadge" }, outputs: { update: "update" }, usesOnChanges: true, ngImport: i0, template: "<ax-avatar-by-profile\n  [profile]=\"profile\"\n  [edit]=\"edit\"\n  [badge]=\"badge$ | async\"\n  [badgeColor]=\"badgeColor$ | async\"\n  [border]=\"border\"\n  (update)=\"update.emit($event)\"\n></ax-avatar-by-profile>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: AvatarByProfileComponent, selector: "ax-avatar-by-profile", inputs: ["profile", "edit", "badge", "badgeColor", "border"], outputs: ["update"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
AvatarProfileComponent = __decorate([
    UntilDestroy()
], AvatarProfileComponent);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AvatarProfileComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-avatar-profile', template: "<ax-avatar-by-profile\n  [profile]=\"profile\"\n  [edit]=\"edit\"\n  [badge]=\"badge$ | async\"\n  [badgeColor]=\"badgeColor$ | async\"\n  [border]=\"border\"\n  (update)=\"update.emit($event)\"\n></ax-avatar-by-profile>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
        }], propDecorators: { profile: [{
                type: Input
            }], edit: [{
                type: Input
            }], blocked: [{
                type: Input
            }], border: [{
                type: Input
            }], update: [{
                type: Output
            }], putBadge: [{
                type: Input
            }] } });

class AvatarModule {
}
AvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: AvatarModule, declarations: [AvatarComponent,
        AvatarCropperModalComponent,
        AvatarEditComponent,
        AvatarByProfileComponent,
        BadgeIconComponent,
        AvatarProfileComponent], imports: [CommonModule,
        IconsModule,
        ImageSourceModule,
        OverlayModule,
        ImageCropperModule,
        SnackbarModule,
        ButtonModule,
        HelperPipesModule,
        PropertyPublishedButtonModule], exports: [AvatarComponent,
        AvatarCropperModalComponent,
        AvatarEditComponent,
        AvatarByProfileComponent,
        AvatarProfileComponent] });
AvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AvatarModule, imports: [CommonModule,
        IconsModule,
        ImageSourceModule,
        OverlayModule,
        ImageCropperModule,
        SnackbarModule,
        ButtonModule,
        HelperPipesModule,
        PropertyPublishedButtonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AvatarModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        AvatarComponent,
                        AvatarCropperModalComponent,
                        AvatarEditComponent,
                        AvatarByProfileComponent,
                        BadgeIconComponent,
                        AvatarProfileComponent,
                    ],
                    imports: [
                        CommonModule,
                        IconsModule,
                        ImageSourceModule,
                        OverlayModule,
                        ImageCropperModule,
                        SnackbarModule,
                        ButtonModule,
                        HelperPipesModule,
                        PropertyPublishedButtonModule,
                    ],
                    exports: [
                        AvatarComponent,
                        AvatarCropperModalComponent,
                        AvatarEditComponent,
                        AvatarByProfileComponent,
                        AvatarProfileComponent,
                    ],
                }]
        }] });

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

export { AvatarByProfileComponent, AvatarComponent, AvatarCropperModalComponent, AvatarEditComponent, AvatarModule, AvatarProfileComponent, AvatarType, BadgeIconType };
//# sourceMappingURL=aztrix-components-avatar.mjs.map
//# sourceMappingURL=aztrix-components-avatar.mjs.map
