import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { MatomoService } from '@aztrix/helpers';
import { CommunicationType } from '@aztrix/models';
import { AbstractPropertyValueViewComponent } from '../abstract-property-value-view.component';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/helpers";
import * as i2 from "@angular/common";
import * as i3 from "@angular/material/legacy-tooltip";
import * as i4 from "@aztrix/icons";
import * as i5 from "../value-verified-view/value-verified-view.component";
export class SocialValueViewComponent extends AbstractPropertyValueViewComponent {
    constructor(_matomo) {
        super();
        this._matomo = _matomo;
        this.CommunicationType = CommunicationType;
    }
    click(event) {
        if (!this.clickable) {
            event.preventDefault();
        }
        this._matomo.trackEvent('Social value', 'click', this.property.type.toLowerCase());
    }
}
SocialValueViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: SocialValueViewComponent, deps: [{ token: i1.MatomoService }], target: i0.ɵɵFactoryTarget.Component });
SocialValueViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: SocialValueViewComponent, selector: "ax-social-value-view", inputs: { label: "label" }, usesInheritance: true, ngImport: i0, template: "<div class=\"social-wrapper\">\n  <ax-icon\n    [inline]=\"true\"\n    *ngIf=\"property | propertyIsVerified\"\n    [ngClass]=\"verificationColor()\"\n    class=\"icon c-card__property-icon\"\n    name=\"custom:verified\"\n    [matTooltip]=\"property | propertyVerificationLabel\"\n  ></ax-icon>\n</div>\n\n<div class=\"c-card__property\" [ngClass]=\"{'has-verify-icon': showVerificationLabel}\">\n  <ng-content></ng-content>\n  <ax-value-verified-view [property]=\"property\" [showVerificationLabel]=\"showVerificationLabel\">\n    <a\n      class=\"social\"\n      [ngClass]=\"property?.type | propertyIcon\"\n      [href]=\"property | propertyCommunicationHref: CommunicationType.URL:params\"\n      target=\"_blank\"\n      (click)=\"click($event)\"\n    >\n      <ax-icon class=\"icon social__logo\" [name]=\"property?.type | propertyIcon\"></ax-icon>\n      <span class=\"social__name\">{{ label || (property | propertySocialName) }}</span>\n    </a>\n  </ax-value-verified-view>\n  <ax-icon\n    [inline]=\"true\"\n    *ngIf=\"showVerificationLabel\"\n    [ngClass]=\"verificationColor()\"\n    class=\"c-card__property-icon\"\n    name=\"custom:verified\"\n    [matTooltip]=\"parentProperty || property | propertyVerificationLabel\"\n  ></ax-icon>\n</div>\n", styles: [".property-value{font-size:16px;font-weight:700}\n", ".social-wrapper .icon.c-card__property-icon{width:1rem;height:1rem}.social{border:1px solid #2b323a;text-decoration:none;cursor:pointer;display:grid;grid-template-columns:24px 1fr;align-items:center;max-width:100%;background-color:#fff;padding:.25rem .75rem;border-radius:50px;line-height:1;margin-right:.25rem;transition:background-color .3s ease,color .3s ease}.social,.social:visited,.social:hover{color:#555}.social:active,.social:focus{color:#555}.social .icon{width:1em;height:1em}.social .social__logo{color:#2b323a}.social:hover{background-color:#2b323a;color:#fff;text-decoration:none}.social:hover .social__logo{color:#fff}.social.facebook{border:1px solid #1877f2}.social.facebook .social__logo{color:#1877f2}.social.facebook:hover{background-color:#1877f2}.social.facebook:hover .social__logo{color:#fff}.social.twitter{border:1px solid #000}.social.twitter .social__logo{color:#000}.social.twitter:hover{background-color:#000}.social.twitter:hover .social__logo{color:#fff}.social.yahoo{border:1px solid #9871d8}.social.yahoo .social__logo{color:#9871d8}.social.yahoo:hover{background-color:#9871d8}.social.yahoo:hover .social__logo{color:#fff}.social.google{border:1px solid #5789ee}.social.google .social__logo{color:#5789ee}.social.google:hover{background-color:#5789ee}.social.google:hover .social__logo{color:#fff}.social.instagram{border:1px solid #fd5949}.social.instagram:hover{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}.social.instagram:hover .social__logo{color:#fff}.social.deliveroo .social__logo{color:#00ccbc}.social__name{max-width:100%;overflow:hidden;line-height:1.5;text-overflow:ellipsis;white-space:nowrap}.social__logo{text-decoration:none;width:24px;height:20px;font-size:1.125rem;line-height:1;margin-right:.5rem}.social__avatar{width:24px;height:24px;display:block;margin-right:.5rem}.social__avatar ::ng-deep img{max-width:24px}.social__verified{width:1em;height:1em}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: i5.ValueVerifiedViewComponent, selector: "ax-value-verified-view" }, { kind: "pipe", type: i1.PropertyCommunicationHrefPipe, name: "propertyCommunicationHref" }, { kind: "pipe", type: i1.PropertyVerificationLabelPipe, name: "propertyVerificationLabel" }, { kind: "pipe", type: i1.PropertyIsVerifiedPipe, name: "propertyIsVerified" }, { kind: "pipe", type: i1.PropertyIconPipe, name: "propertyIcon" }, { kind: "pipe", type: i1.PropertySocialNamePipe, name: "propertySocialName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: SocialValueViewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-social-value-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"social-wrapper\">\n  <ax-icon\n    [inline]=\"true\"\n    *ngIf=\"property | propertyIsVerified\"\n    [ngClass]=\"verificationColor()\"\n    class=\"icon c-card__property-icon\"\n    name=\"custom:verified\"\n    [matTooltip]=\"property | propertyVerificationLabel\"\n  ></ax-icon>\n</div>\n\n<div class=\"c-card__property\" [ngClass]=\"{'has-verify-icon': showVerificationLabel}\">\n  <ng-content></ng-content>\n  <ax-value-verified-view [property]=\"property\" [showVerificationLabel]=\"showVerificationLabel\">\n    <a\n      class=\"social\"\n      [ngClass]=\"property?.type | propertyIcon\"\n      [href]=\"property | propertyCommunicationHref: CommunicationType.URL:params\"\n      target=\"_blank\"\n      (click)=\"click($event)\"\n    >\n      <ax-icon class=\"icon social__logo\" [name]=\"property?.type | propertyIcon\"></ax-icon>\n      <span class=\"social__name\">{{ label || (property | propertySocialName) }}</span>\n    </a>\n  </ax-value-verified-view>\n  <ax-icon\n    [inline]=\"true\"\n    *ngIf=\"showVerificationLabel\"\n    [ngClass]=\"verificationColor()\"\n    class=\"c-card__property-icon\"\n    name=\"custom:verified\"\n    [matTooltip]=\"parentProperty || property | propertyVerificationLabel\"\n  ></ax-icon>\n</div>\n", styles: [".property-value{font-size:16px;font-weight:700}\n", ".social-wrapper .icon.c-card__property-icon{width:1rem;height:1rem}.social{border:1px solid #2b323a;text-decoration:none;cursor:pointer;display:grid;grid-template-columns:24px 1fr;align-items:center;max-width:100%;background-color:#fff;padding:.25rem .75rem;border-radius:50px;line-height:1;margin-right:.25rem;transition:background-color .3s ease,color .3s ease}.social,.social:visited,.social:hover{color:#555}.social:active,.social:focus{color:#555}.social .icon{width:1em;height:1em}.social .social__logo{color:#2b323a}.social:hover{background-color:#2b323a;color:#fff;text-decoration:none}.social:hover .social__logo{color:#fff}.social.facebook{border:1px solid #1877f2}.social.facebook .social__logo{color:#1877f2}.social.facebook:hover{background-color:#1877f2}.social.facebook:hover .social__logo{color:#fff}.social.twitter{border:1px solid #000}.social.twitter .social__logo{color:#000}.social.twitter:hover{background-color:#000}.social.twitter:hover .social__logo{color:#fff}.social.yahoo{border:1px solid #9871d8}.social.yahoo .social__logo{color:#9871d8}.social.yahoo:hover{background-color:#9871d8}.social.yahoo:hover .social__logo{color:#fff}.social.google{border:1px solid #5789ee}.social.google .social__logo{color:#5789ee}.social.google:hover{background-color:#5789ee}.social.google:hover .social__logo{color:#fff}.social.instagram{border:1px solid #fd5949}.social.instagram:hover{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}.social.instagram:hover .social__logo{color:#fff}.social.deliveroo .social__logo{color:#00ccbc}.social__name{max-width:100%;overflow:hidden;line-height:1.5;text-overflow:ellipsis;white-space:nowrap}.social__logo{text-decoration:none;width:24px;height:20px;font-size:1.125rem;line-height:1;margin-right:.5rem}.social__avatar{width:24px;height:24px;display:block;margin-right:.5rem}.social__avatar ::ng-deep img{max-width:24px}.social__verified{width:1em;height:1em}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.MatomoService }]; }, propDecorators: { label: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 