import { Component, Input, ViewEncapsulation } from '@angular/core';
import { HttpClientService } from '@aztrix/helpers';
import { ProfileContext, PropertyType } from '@aztrix/models';
import { BehaviorSubject, ReplaySubject } from 'rxjs';
import { catchError, map, mergeMap, shareReplay } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/helpers";
import * as i2 from "@angular/common";
import * as i3 from "@aztrix/icons";
import * as i4 from "./communication/communication.component";
import * as i5 from "./communication/communication-icon/communication-icon.component";
import * as i6 from "./profile/profile.component";
export class ContactCardComponent {
    constructor(_http) {
        this._http = _http;
        this.selectedCommunicationType = false;
        this.error$ = new BehaviorSubject(false);
        // eslint-disable-next-line @typescript-eslint/naming-convention
        this.PropertyType = PropertyType;
        // eslint-disable-next-line @typescript-eslint/naming-convention
        this.ProfileContext = ProfileContext;
        this._profileId$ = new ReplaySubject(1);
        this.profile$ = this._profileId$.pipe(mergeMap((profileId) => {
            this.error$.next(false);
            return this._http.get(`r/profiles/${profileId}`);
        }), catchError((err) => {
            this.error$.next(true);
            throw err;
        }), shareReplay(1));
        this.profileContext$ = this.profile$.pipe(map((profile) => profile.profileContext));
    }
    ngOnInit() {
        if (!this.profileId) {
            this.error$.next(true);
        }
    }
    ngOnChanges(changes) {
        if (this.profileId && changes.profileId) {
            this._profileId$.next(this.profileId);
        }
        else {
            this.error$.next(true);
        }
    }
}
ContactCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ContactCardComponent, deps: [{ token: i1.HttpClientService }], target: i0.ɵɵFactoryTarget.Component });
ContactCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: ContactCardComponent, selector: "ax-contact-card", inputs: { profileId: "profileId" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card\">\n  <ax-profile\n    class=\"content\"\n    *ngIf=\"profile$ | async\"\n    [hidden]=\"selectedCommunicationType\"\n    [profile]=\"profile$ | async\"\n  ></ax-profile>\n\n  <ax-communication\n    class=\"content\"\n    *ngIf=\"selectedCommunicationType\"\n    [profile]=\"profile$ | async\"\n    [communicationType]=\"selectedCommunicationType\"\n  ></ax-communication>\n\n  <div *ngIf=\"(profile$ | async) === null && (error$ | async) === null\" class=\"loading\">\n    {{ 'label.loading' | translate }}...\n  </div>\n\n  <div *ngIf=\"error$ | async\" class=\"error\">\n    <ax-icon class=\"icon\" name=\"alert\"></ax-icon>\n    <span class=\"text\">{{ 'contact-card.error' | translate }}</span>\n  </div>\n\n  <div class=\"actions\">\n    <button\n      class=\"button\"\n      *ngIf=\"selectedCommunicationType\"\n      (click)=\"selectedCommunicationType = null\"\n    >\n      <ax-icon class=\"icon arrow-left\" name=\"arrow-left\"></ax-icon>\n    </button>\n    <ax-icon\n      *ngIf=\"!selectedCommunicationType && (profileContext$ | async) === ProfileContext.INDIVIDUAL\"\n      class=\"icon context-left\"\n      name=\"account\"\n    ></ax-icon>\n    <ax-icon\n      *ngIf=\"\n        !selectedCommunicationType && (profileContext$ | async) === ProfileContext.ORGANISATION\n      \"\n      class=\"icon context-left\"\n      name=\"factory\"\n    ></ax-icon>\n\n    <div class=\"communication-actions\">\n      <ax-communication-icon\n        type=\"ORGANISATION_NAME\"\n        *ngIf=\"\n          (profile$ | async | profilePropertyValue: PropertyType.ORGANISATION_NAME) &&\n          (profileContext$ | async) === 'INDIVIDUAL'\n        \"\n        (clicked)=\"selectedCommunicationType = 'ORGANISATION_NAME'\"\n      ></ax-communication-icon>\n      <ax-communication-icon\n        type=\"LEGAL_ID\"\n        *ngIf=\"\n          (profile$ | async | profilePropertyValue: PropertyType.LEGAL_ID) &&\n          (profileContext$ | async) === 'ORGANISATION'\n        \"\n        (clicked)=\"selectedCommunicationType = 'LEGAL_ID'\"\n      ></ax-communication-icon>\n      <ax-communication-icon\n        type=\"PHONE\"\n        *ngIf=\"profile$ | async | profilePropertyValue: PropertyType.PHONE\"\n        (clicked)=\"selectedCommunicationType = 'PHONE'\"\n      ></ax-communication-icon>\n      <ax-communication-icon\n        type=\"MOBILE_PHONE\"\n        *ngIf=\"profile$ | async | profilePropertyValue: PropertyType.MOBILE_PHONE\"\n        (clicked)=\"selectedCommunicationType = 'MOBILE_PHONE'\"\n      ></ax-communication-icon>\n      <ax-communication-icon\n        type=\"EMAIL\"\n        *ngIf=\"profile$ | async | profilePropertyValue: PropertyType.EMAIL\"\n        (clicked)=\"selectedCommunicationType = 'EMAIL'\"\n      ></ax-communication-icon>\n      <ax-communication-icon\n        type=\"ADDRESS\"\n        *ngIf=\"profile$ | async | profilePropertyValue: PropertyType.ADDRESS\"\n        (clicked)=\"selectedCommunicationType = 'ADDRESS'\"\n      ></ax-communication-icon>\n      <a\n        *ngIf=\"profile$ | async | profilePropertyValue: PropertyType.FACEBOOK as propertyValue\"\n        [attr.href]=\"propertyValue\"\n      >\n        <ax-icon class=\"icon\" name=\"facebook\"></ax-icon>\n      </a>\n      <a\n        *ngIf=\"profile$ | async | profilePropertyValue: PropertyType.TWITTER as propertyValue\"\n        [attr.href]=\"propertyValue\"\n      >\n        <ax-icon class=\"icon\" name=\"twitter\"></ax-icon>\n      </a>\n      <a\n        *ngIf=\"profile$ | async | profilePropertyValue: PropertyType.LINKEDIN as propertyValue\"\n        [attr.href]=\"propertyValue\"\n      >\n        <ax-icon class=\"icon\" name=\"linkedin\"></ax-icon>\n      </a>\n    </div>\n  </div>\n</div>\n", styles: [":host{width:320px;height:180px}.card{display:grid;width:320px;height:160px;grid-template-rows:3fr 1fr;border-radius:15px;background-color:#fff;box-shadow:0 6px 12px #0003}.content{font-family:Arial,sans-serif;font-size:16px;color:#555}.content[hidden]{display:none}.actions span,.actions .icon{display:flex;height:24px;width:24px;align-items:center;justify-content:center;color:#fff}.actions span.context-left,.actions .icon.context-left{color:var(--primary-color-900)}.actions span{color:#fff}.actions{display:flex;justify-content:space-between;align-items:center;min-height:0;min-width:288px;padding:0 16px;background-color:var(--primary-color-500);border-bottom-left-radius:15px;border-bottom-right-radius:15px;box-shadow:inset 0 6px 12px -6px #0006}.communication-actions{display:flex;justify-content:flex-end}.communication-actions ax-communication-icon,.communication-actions a{margin:0 10px}.communication-actions ax-communication-icon:last-child,.communication-actions a:last-child{margin-right:0}.communication-actions .icon{width:20px;cursor:pointer}.communication-actions span{cursor:pointer}.arrow-left{cursor:pointer;margin-right:8px}.context-left{margin-right:8px}.error,.loading{display:flex;flex-direction:column;align-items:center;margin:auto;padding:0 1rem}.error .icon,.loading .icon{width:48px;height:48px;margin-bottom:10px}.error{color:#e67e22}.button{background-color:transparent;border:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: i4.CommunicationComponent, selector: "ax-communication", inputs: ["profile", "communicationType"] }, { kind: "component", type: i5.CommunicationIconComponent, selector: "ax-communication-icon", inputs: ["type"], outputs: ["clicked"] }, { kind: "component", type: i6.ProfileComponent, selector: "ax-profile", inputs: ["profile"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.ProfilePropertyValuePipe, name: "profilePropertyValue" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.ShadowDom });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ContactCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-contact-card', encapsulation: ViewEncapsulation.ShadowDom, template: "<div class=\"card\">\n  <ax-profile\n    class=\"content\"\n    *ngIf=\"profile$ | async\"\n    [hidden]=\"selectedCommunicationType\"\n    [profile]=\"profile$ | async\"\n  ></ax-profile>\n\n  <ax-communication\n    class=\"content\"\n    *ngIf=\"selectedCommunicationType\"\n    [profile]=\"profile$ | async\"\n    [communicationType]=\"selectedCommunicationType\"\n  ></ax-communication>\n\n  <div *ngIf=\"(profile$ | async) === null && (error$ | async) === null\" class=\"loading\">\n    {{ 'label.loading' | translate }}...\n  </div>\n\n  <div *ngIf=\"error$ | async\" class=\"error\">\n    <ax-icon class=\"icon\" name=\"alert\"></ax-icon>\n    <span class=\"text\">{{ 'contact-card.error' | translate }}</span>\n  </div>\n\n  <div class=\"actions\">\n    <button\n      class=\"button\"\n      *ngIf=\"selectedCommunicationType\"\n      (click)=\"selectedCommunicationType = null\"\n    >\n      <ax-icon class=\"icon arrow-left\" name=\"arrow-left\"></ax-icon>\n    </button>\n    <ax-icon\n      *ngIf=\"!selectedCommunicationType && (profileContext$ | async) === ProfileContext.INDIVIDUAL\"\n      class=\"icon context-left\"\n      name=\"account\"\n    ></ax-icon>\n    <ax-icon\n      *ngIf=\"\n        !selectedCommunicationType && (profileContext$ | async) === ProfileContext.ORGANISATION\n      \"\n      class=\"icon context-left\"\n      name=\"factory\"\n    ></ax-icon>\n\n    <div class=\"communication-actions\">\n      <ax-communication-icon\n        type=\"ORGANISATION_NAME\"\n        *ngIf=\"\n          (profile$ | async | profilePropertyValue: PropertyType.ORGANISATION_NAME) &&\n          (profileContext$ | async) === 'INDIVIDUAL'\n        \"\n        (clicked)=\"selectedCommunicationType = 'ORGANISATION_NAME'\"\n      ></ax-communication-icon>\n      <ax-communication-icon\n        type=\"LEGAL_ID\"\n        *ngIf=\"\n          (profile$ | async | profilePropertyValue: PropertyType.LEGAL_ID) &&\n          (profileContext$ | async) === 'ORGANISATION'\n        \"\n        (clicked)=\"selectedCommunicationType = 'LEGAL_ID'\"\n      ></ax-communication-icon>\n      <ax-communication-icon\n        type=\"PHONE\"\n        *ngIf=\"profile$ | async | profilePropertyValue: PropertyType.PHONE\"\n        (clicked)=\"selectedCommunicationType = 'PHONE'\"\n      ></ax-communication-icon>\n      <ax-communication-icon\n        type=\"MOBILE_PHONE\"\n        *ngIf=\"profile$ | async | profilePropertyValue: PropertyType.MOBILE_PHONE\"\n        (clicked)=\"selectedCommunicationType = 'MOBILE_PHONE'\"\n      ></ax-communication-icon>\n      <ax-communication-icon\n        type=\"EMAIL\"\n        *ngIf=\"profile$ | async | profilePropertyValue: PropertyType.EMAIL\"\n        (clicked)=\"selectedCommunicationType = 'EMAIL'\"\n      ></ax-communication-icon>\n      <ax-communication-icon\n        type=\"ADDRESS\"\n        *ngIf=\"profile$ | async | profilePropertyValue: PropertyType.ADDRESS\"\n        (clicked)=\"selectedCommunicationType = 'ADDRESS'\"\n      ></ax-communication-icon>\n      <a\n        *ngIf=\"profile$ | async | profilePropertyValue: PropertyType.FACEBOOK as propertyValue\"\n        [attr.href]=\"propertyValue\"\n      >\n        <ax-icon class=\"icon\" name=\"facebook\"></ax-icon>\n      </a>\n      <a\n        *ngIf=\"profile$ | async | profilePropertyValue: PropertyType.TWITTER as propertyValue\"\n        [attr.href]=\"propertyValue\"\n      >\n        <ax-icon class=\"icon\" name=\"twitter\"></ax-icon>\n      </a>\n      <a\n        *ngIf=\"profile$ | async | profilePropertyValue: PropertyType.LINKEDIN as propertyValue\"\n        [attr.href]=\"propertyValue\"\n      >\n        <ax-icon class=\"icon\" name=\"linkedin\"></ax-icon>\n      </a>\n    </div>\n  </div>\n</div>\n", styles: [":host{width:320px;height:180px}.card{display:grid;width:320px;height:160px;grid-template-rows:3fr 1fr;border-radius:15px;background-color:#fff;box-shadow:0 6px 12px #0003}.content{font-family:Arial,sans-serif;font-size:16px;color:#555}.content[hidden]{display:none}.actions span,.actions .icon{display:flex;height:24px;width:24px;align-items:center;justify-content:center;color:#fff}.actions span.context-left,.actions .icon.context-left{color:var(--primary-color-900)}.actions span{color:#fff}.actions{display:flex;justify-content:space-between;align-items:center;min-height:0;min-width:288px;padding:0 16px;background-color:var(--primary-color-500);border-bottom-left-radius:15px;border-bottom-right-radius:15px;box-shadow:inset 0 6px 12px -6px #0006}.communication-actions{display:flex;justify-content:flex-end}.communication-actions ax-communication-icon,.communication-actions a{margin:0 10px}.communication-actions ax-communication-icon:last-child,.communication-actions a:last-child{margin-right:0}.communication-actions .icon{width:20px;cursor:pointer}.communication-actions span{cursor:pointer}.arrow-left{cursor:pointer;margin-right:8px}.context-left{margin-right:8px}.error,.loading{display:flex;flex-direction:column;align-items:center;margin:auto;padding:0 1rem}.error .icon,.loading .icon{width:48px;height:48px;margin-bottom:10px}.error{color:#e67e22}.button{background-color:transparent;border:none}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.HttpClientService }]; }, propDecorators: { profileId: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 