import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, Optional, Inject, ViewChild, ViewEncapsulation, NgModule } from '@angular/core';
import { PropertyType, ProfileContext } from '@aztrix/models';
import * as i1 from '@aztrix/sdk';
import * as i6 from 'rxjs';
import { map, switchMap, BehaviorSubject, ReplaySubject } from 'rxjs';
import { mergeMap, catchError, shareReplay, map as map$1 } from 'rxjs/operators';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';
import { BASE_URL, BACKEND_URL } from '@aztrix/environment';
import * as i5 from '@aztrix/helpers';
import { getPropertyTuples, typeFilter, isOrganisation, generateQR$, dummyPropertyForType, getProperty, isOfType, HelperPipesModule } from '@aztrix/helpers';
import * as i3$1 from '@aztrix/components/property-view';
import { PropertyViewModule } from '@aztrix/components/property-view';
import * as i4 from '@angular/cdk/stepper';
import { CdkStepperModule } from '@angular/cdk/stepper';
import * as i5$1 from '@aztrix/components/content-stepper';
import { ContentStepperModule } from '@aztrix/components/content-stepper';
import * as i4$1 from '@aztrix/components/powered-by-aztrix';
import { PoweredByAztrixModule } from '@aztrix/components/powered-by-aztrix';

class CommunicationIconComponent {
    constructor() {
        this.clicked = new EventEmitter();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommunicationIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CommunicationIconComponent, selector: "ax-communication-icon", inputs: { type: "type" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button class=\"button\" (click)=\"clicked.next()\">\n  <ax-icon class=\"icon\" *ngIf=\"type === 'PHONE'\" name=\"phone\"></ax-icon>\n  <ax-icon class=\"icon\" *ngIf=\"type === 'MOBILE_PHONE'\" name=\"message\"></ax-icon>\n  <ax-icon class=\"icon\" *ngIf=\"type === 'EMAIL'\" name=\"email\"></ax-icon>\n  <ax-icon class=\"icon\" *ngIf=\"type === 'ADDRESS'\" name=\"map-marker\"></ax-icon>\n  <ax-icon class=\"icon\" *ngIf=\"type === 'ORGANISATION_NAME'\" name=\"briefcase\"></ax-icon>\n  <span *ngIf=\"type === 'LEGAL_ID'\">{{ 'communication.icon.LEGAL_ID' | translate }}</span>\n</button>\n", styles: [":host{height:24px}.icon{height:20px;width:20px;margin:2px 0}span{font-weight:700}.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: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommunicationIconComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-communication-icon', template: "<button class=\"button\" (click)=\"clicked.next()\">\n  <ax-icon class=\"icon\" *ngIf=\"type === 'PHONE'\" name=\"phone\"></ax-icon>\n  <ax-icon class=\"icon\" *ngIf=\"type === 'MOBILE_PHONE'\" name=\"message\"></ax-icon>\n  <ax-icon class=\"icon\" *ngIf=\"type === 'EMAIL'\" name=\"email\"></ax-icon>\n  <ax-icon class=\"icon\" *ngIf=\"type === 'ADDRESS'\" name=\"map-marker\"></ax-icon>\n  <ax-icon class=\"icon\" *ngIf=\"type === 'ORGANISATION_NAME'\" name=\"briefcase\"></ax-icon>\n  <span *ngIf=\"type === 'LEGAL_ID'\">{{ 'communication.icon.LEGAL_ID' | translate }}</span>\n</button>\n", styles: [":host{height:24px}.icon{height:20px;width:20px;margin:2px 0}span{font-weight:700}.button{background-color:transparent;border:none}\n"] }]
        }], propDecorators: { type: [{
                type: Input
            }], clicked: [{
                type: Output
            }] } });

class CommunicationComponent {
    constructor(baseUrl) {
        this.baseUrl = baseUrl;
    }
    get communicationProperties() {
        if (!this.profile || !this.communicationType) {
            return [];
        }
        return getPropertyTuples(this.profile.propertyContexts, typeFilter(this.communicationType)).map((tuple) => tuple.property);
    }
    notUseStepper() {
        if (this.communicationType === PropertyType.ADDRESS ||
            this.communicationType === PropertyType.LEGAL_ID) {
            if (this.communicationProperties.length <= 1) {
                return true;
            }
        }
        else {
            if (this.communicationProperties.length <= 3) {
                return true;
            }
        }
        return false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommunicationComponent, deps: [{ token: BASE_URL, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CommunicationComponent, selector: "ax-communication", inputs: { profile: "profile", communicationType: "communicationType" }, ngImport: i0, template: "<ng-template #line let-property>\n  <div class=\"wrapper\">\n    <ax-communication-icon class=\"icon\" [type]=\"communicationType\"></ax-communication-icon>\n    <ax-property-value-view [property]=\"property\" [clickable]=\"true\"></ax-property-value-view>\n  </div>\n</ng-template>\n\n<ng-container *ngIf=\"notUseStepper(); else stepper\">\n  <ng-container *ngFor=\"let property of communicationProperties\">\n    <ng-container *ngTemplateOutlet=\"line; context: {$implicit: property}\"></ng-container>\n  </ng-container>\n</ng-container>\n<ng-template #stepper>\n  <ng-container\n    *ngIf=\"communicationType !== 'ADDRESS' && communicationType !== 'LEGAL_ID'; else singleProp\"\n  >\n    <ax-content-stepper [mode]=\"'VERTICAL'\">\n      <ng-container *ngFor=\"let p of communicationProperties; let index = index\">\n        <cdk-step *ngIf=\"index % 3 === 0\">\n          <ng-container *ngFor=\"let property of communicationProperties.slice(index, index + 3)\">\n            <ng-container *ngTemplateOutlet=\"line; context: {$implicit: property}\"></ng-container>\n          </ng-container>\n        </cdk-step>\n      </ng-container>\n    </ax-content-stepper>\n  </ng-container>\n  <ng-template #singleProp>\n    <ax-content-stepper [mode]=\"'VERTICAL'\">\n      <ng-container *ngFor=\"let p of communicationProperties; let index = index\">\n        <cdk-step *ngIf=\"index % 1 === 0\">\n          <ng-container *ngFor=\"let property of communicationProperties.slice(index, index + 1)\">\n            <ng-container *ngTemplateOutlet=\"line; context: {$implicit: property}\"></ng-container>\n          </ng-container>\n        </cdk-step>\n      </ng-container>\n    </ax-content-stepper>\n  </ng-template>\n</ng-template>\n", styles: [":host{min-height:0}.wrapper{display:flex;margin:8px 16px 0}.wrapper ax-communication-icon{margin-right:8px}.link{line-height:1.5}.link:link,.link:visited,.link:hover,.link:active{color:var(--primary-color-500)}.link:hover{text-decoration:none}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CommunicationIconComponent, selector: "ax-communication-icon", inputs: ["type"], outputs: ["clicked"] }, { kind: "component", type: i3$1.PropertyValueViewComponent, selector: "ax-property-value-view", inputs: ["property", "showVerificationLabel", "clickable", "isIndividual", "params"] }, { kind: "component", type: i4.CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { kind: "component", type: i5$1.ContentStepperComponent, selector: "ax-content-stepper", inputs: ["mode", "interactable", "reverse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommunicationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-communication', template: "<ng-template #line let-property>\n  <div class=\"wrapper\">\n    <ax-communication-icon class=\"icon\" [type]=\"communicationType\"></ax-communication-icon>\n    <ax-property-value-view [property]=\"property\" [clickable]=\"true\"></ax-property-value-view>\n  </div>\n</ng-template>\n\n<ng-container *ngIf=\"notUseStepper(); else stepper\">\n  <ng-container *ngFor=\"let property of communicationProperties\">\n    <ng-container *ngTemplateOutlet=\"line; context: {$implicit: property}\"></ng-container>\n  </ng-container>\n</ng-container>\n<ng-template #stepper>\n  <ng-container\n    *ngIf=\"communicationType !== 'ADDRESS' && communicationType !== 'LEGAL_ID'; else singleProp\"\n  >\n    <ax-content-stepper [mode]=\"'VERTICAL'\">\n      <ng-container *ngFor=\"let p of communicationProperties; let index = index\">\n        <cdk-step *ngIf=\"index % 3 === 0\">\n          <ng-container *ngFor=\"let property of communicationProperties.slice(index, index + 3)\">\n            <ng-container *ngTemplateOutlet=\"line; context: {$implicit: property}\"></ng-container>\n          </ng-container>\n        </cdk-step>\n      </ng-container>\n    </ax-content-stepper>\n  </ng-container>\n  <ng-template #singleProp>\n    <ax-content-stepper [mode]=\"'VERTICAL'\">\n      <ng-container *ngFor=\"let p of communicationProperties; let index = index\">\n        <cdk-step *ngIf=\"index % 1 === 0\">\n          <ng-container *ngFor=\"let property of communicationProperties.slice(index, index + 1)\">\n            <ng-container *ngTemplateOutlet=\"line; context: {$implicit: property}\"></ng-container>\n          </ng-container>\n        </cdk-step>\n      </ng-container>\n    </ax-content-stepper>\n  </ng-template>\n</ng-template>\n", styles: [":host{min-height:0}.wrapper{display:flex;margin:8px 16px 0}.wrapper ax-communication-icon{margin-right:8px}.link{line-height:1.5}.link:link,.link:visited,.link:hover,.link:active{color:var(--primary-color-500)}.link:hover{text-decoration:none}\n"] }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [BASE_URL]
                }] }], propDecorators: { profile: [{
                type: Input
            }], communicationType: [{
                type: Input
            }] } });

class ProfileComponent {
    constructor(_vcard, backendUrl$) {
        this._vcard = _vcard;
        this.backendUrl$ = backendUrl$;
        this.profileLink$ = this.backendUrl$.pipe(map((backendUrl) => {
            if (!this.profile) {
                return null;
            }
            return `${backendUrl || ''}/profile/${this.profile.id}`;
        }));
    }
    ngOnChanges() {
        this._updateQR();
    }
    get nameProperties() {
        if (!this.profile) {
            return [];
        }
        return getPropertyTuples(this.profile.propertyContexts, isOrganisation(this.profile)
            ? typeFilter(PropertyType.ORGANISATION_NAME)
            : typeFilter(PropertyType.FIRST_NAME, PropertyType.MIDDLE_NAME, PropertyType.LAST_NAME))
            .map((tuple) => (tuple ? tuple.property : null))
            .filter((property) => !!property);
    }
    _updateQR() {
        if (this.profile) {
            this._fetchVCard$()
                .pipe(switchMap((vCard) => generateQR$(500, vCard)))
                .subscribe((dataUrl) => {
                this.qrImage.nativeElement.src = dataUrl;
            });
        }
    }
    _fetchVCard$() {
        return this.profileLink$.pipe(switchMap((profileLink) => {
            const websiteProperty = {
                ...dummyPropertyForType(PropertyType.WEBSITE),
                value: profileLink,
            };
            const propertyContexts = (this.profile?.propertyContexts || []);
            const firstContext = propertyContexts[0];
            const properties = [...propertyContexts[0].properties, websiteProperty];
            firstContext.properties = properties;
            propertyContexts.splice(0, 1, firstContext);
            const profile = {
                ...this.profile,
                propertyContexts: propertyContexts.map((context) => {
                    const avatar = getProperty(context, typeFilter(PropertyType.AVATAR));
                    if (!avatar) {
                        return context;
                    }
                    return {
                        ...context,
                        properties: context.properties.filter((property) => !isOfType(property, PropertyType.AVATAR)),
                    };
                }),
            };
            return this._vcard.createVcard(profile.propertyContexts);
        }));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProfileComponent, deps: [{ token: i1.VcardsService }, { token: BACKEND_URL }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProfileComponent, selector: "ax-profile", inputs: { profile: "profile" }, viewQueries: [{ propertyName: "qrImage", first: true, predicate: ["qrCode"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<img class=\"qr\" #qrCode />\n<div class=\"info\">\n  <div class=\"name\">\n    <a *ngIf=\"profileLink$ | async\" [href]=\"profileLink$ | async\" target=\"_blank\">\n      {{ nameProperties | propertyDisplayValue }}\n    </a>\n    <p *ngIf=\"(profileLink$ | async) === null\">\n      {{ nameProperties | propertyDisplayValue }}\n    </p>\n  </div>\n  <a class=\"connect\" *ngIf=\"profileLink$ | async\" [href]=\"profileLink$ | async\" target=\"_blank\">\n    <ax-icon class=\"icon\" name=\"bookmark-outline\" class=\"icon\"></ax-icon>\n    {{ 'label.connect' | translate | uppercase }}\n  </a>\n</div>\n<ax-powered-by-aztrix [legal]=\"false\"></ax-powered-by-aztrix>\n", styles: [":host{display:grid;grid-template-columns:auto 1fr;grid-template-rows:80px auto;margin:16px 16px 0;min-height:0}.qr{min-height:0;width:80px;height:80px}.qr svg{color:#000;height:100%}.info{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;margin-left:12px;grid-column-start:2;grid-row-start:1;grid-row-end:3;padding-bottom:8px}.name{font-size:18px;max-height:50px;overflow:hidden;color:#555}.name a:link,.name a:visited,.name a:hover,.name a:active{color:#555}.connect{display:flex;align-items:center;background:none;color:var(--primary-color-500);border:1px solid var(--primary-color-500);border-radius:16px;height:32px;padding:0 10px}.connect .icon{height:18px;width:18px;margin-right:6px}a{text-decoration: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$1.PoweredByAztrixComponent, selector: "ax-powered-by-aztrix", inputs: ["bigLogo", "legal", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i5.PropertyDisplayValuePipe, name: "propertyDisplayValue" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProfileComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-profile', template: "<img class=\"qr\" #qrCode />\n<div class=\"info\">\n  <div class=\"name\">\n    <a *ngIf=\"profileLink$ | async\" [href]=\"profileLink$ | async\" target=\"_blank\">\n      {{ nameProperties | propertyDisplayValue }}\n    </a>\n    <p *ngIf=\"(profileLink$ | async) === null\">\n      {{ nameProperties | propertyDisplayValue }}\n    </p>\n  </div>\n  <a class=\"connect\" *ngIf=\"profileLink$ | async\" [href]=\"profileLink$ | async\" target=\"_blank\">\n    <ax-icon class=\"icon\" name=\"bookmark-outline\" class=\"icon\"></ax-icon>\n    {{ 'label.connect' | translate | uppercase }}\n  </a>\n</div>\n<ax-powered-by-aztrix [legal]=\"false\"></ax-powered-by-aztrix>\n", styles: [":host{display:grid;grid-template-columns:auto 1fr;grid-template-rows:80px auto;margin:16px 16px 0;min-height:0}.qr{min-height:0;width:80px;height:80px}.qr svg{color:#000;height:100%}.info{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;margin-left:12px;grid-column-start:2;grid-row-start:1;grid-row-end:3;padding-bottom:8px}.name{font-size:18px;max-height:50px;overflow:hidden;color:#555}.name a:link,.name a:visited,.name a:hover,.name a:active{color:#555}.connect{display:flex;align-items:center;background:none;color:var(--primary-color-500);border:1px solid var(--primary-color-500);border-radius:16px;height:32px;padding:0 10px}.connect .icon{height:18px;width:18px;margin-right:6px}a{text-decoration:none}\n"] }]
        }], ctorParameters: () => [{ type: i1.VcardsService }, { type: i6.BehaviorSubject, decorators: [{
                    type: Inject,
                    args: [BACKEND_URL]
                }] }], propDecorators: { profile: [{
                type: Input
            }], qrImage: [{
                type: ViewChild,
                args: ['qrCode', { static: true }]
            }] } });

class ContactCardComponent {
    constructor(_profiles) {
        this._profiles = _profiles;
        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._profiles.getProfile(profileId);
        }), catchError((err) => {
            this.error$.next(true);
            throw err;
        }), shareReplay(1));
        this.profileContext$ = this.profile$.pipe(map$1((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);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContactCardComponent, deps: [{ token: i1.ProfilesService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 = false\"\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=\"brands: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=\"brands: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=\"brands: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: CommunicationComponent, selector: "ax-communication", inputs: ["profile", "communicationType"] }, { kind: "component", type: CommunicationIconComponent, selector: "ax-communication-icon", inputs: ["type"], outputs: ["clicked"] }, { kind: "component", type: ProfileComponent, selector: "ax-profile", inputs: ["profile"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.ProfilePropertyValuePipe, name: "profilePropertyValue" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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 = false\"\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=\"brands: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=\"brands: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=\"brands: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: () => [{ type: i1.ProfilesService }], propDecorators: { profileId: [{
                type: Input
            }] } });

class CommunicationIconModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommunicationIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CommunicationIconModule, declarations: [CommunicationIconComponent], imports: [CommonModule, IconsModule, HelperPipesModule], exports: [CommunicationIconComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommunicationIconModule, imports: [CommonModule, IconsModule, HelperPipesModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommunicationIconModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, IconsModule, HelperPipesModule],
                    declarations: [CommunicationIconComponent],
                    exports: [CommunicationIconComponent],
                }]
        }] });

class CommunicationModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommunicationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CommunicationModule, declarations: [CommunicationComponent], imports: [CommonModule,
            CommunicationIconModule,
            HelperPipesModule,
            PropertyViewModule,
            CdkStepperModule,
            ContentStepperModule], exports: [CommunicationComponent, CommunicationIconModule] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommunicationModule, imports: [CommonModule,
            CommunicationIconModule,
            HelperPipesModule,
            PropertyViewModule,
            CdkStepperModule,
            ContentStepperModule, CommunicationIconModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommunicationModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [CommunicationComponent],
                    imports: [
                        CommonModule,
                        CommunicationIconModule,
                        HelperPipesModule,
                        PropertyViewModule,
                        CdkStepperModule,
                        ContentStepperModule,
                    ],
                    exports: [CommunicationComponent, CommunicationIconModule],
                }]
        }] });

class ContactCardModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContactCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ContactCardModule, declarations: [ContactCardComponent, ProfileComponent], imports: [CommonModule,
            IconsModule,
            CommunicationModule,
            HelperPipesModule,
            PoweredByAztrixModule], exports: [ContactCardComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContactCardModule, imports: [CommonModule,
            IconsModule,
            CommunicationModule,
            HelperPipesModule,
            PoweredByAztrixModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContactCardModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [ContactCardComponent, ProfileComponent],
                    imports: [
                        CommonModule,
                        IconsModule,
                        CommunicationModule,
                        HelperPipesModule,
                        PoweredByAztrixModule,
                    ],
                    exports: [ContactCardComponent],
                }]
        }] });

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

export { ContactCardComponent, ContactCardModule };
//# sourceMappingURL=aztrix-components-contact-card.mjs.map
