import { Component, ElementRef, Input, ViewChild } from '@angular/core';
import { OverlayService } from '@aztrix/components/overlay';
import { AvatarCropperModalComponent } from '../avatar-cropper-modal/avatar-cropper-modal.component';
import { AvatarType } from '../avatar-type';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/components/overlay";
import * as i2 from "@angular/common";
import * as i3 from "@aztrix/components/snackbar";
import * as i4 from "@aztrix/components/button";
import * as i5 from "../avatar/avatar.component";
import * as i6 from "@aztrix/helpers";
export class AvatarEditComponent {
    constructor(_overlay, _elementRef) {
        this._overlay = _overlay;
        this._elementRef = _elementRef;
        this.canDelete = false;
        this.readonly = 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(this._elementRef, 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 || undefined);
                        this.fileInputElement.nativeElement.value = '';
                    };
                },
            });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarEditComponent, deps: [{ token: i1.OverlayService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AvatarEditComponent, selector: "ax-avatar-edit", inputs: { name: "name", avatarURL: "avatarURL", canDelete: "canDelete", delete: "delete", type: "type", update: "update", readonly: "readonly" }, 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    [round]=\"type === AvatarType.INDIVIDUAL || type === AvatarType.ALIST\"\n    [rounded]=\"type === AvatarType.GROUP\"\n  ></ax-avatar>\n</div>\n@if (!readonly) {\n  <div class=\"h-button-wrapper h-button-wrapper--center\">\n    @if (canDelete) {\n      <button axButton (click)=\"delete()\" color=\"danger\" outline>\n        {{ 'label.delete' | translate }}\n      </button>\n    }\n    <label class=\"file-button\" [ngClass]=\"{'is-disabled': readonly}\" 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}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.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: i5.AvatarComponent, selector: "ax-avatar", inputs: ["source", "type", "icon", "iconColor", "badge", "badgeColor", "border", "round", "rounded"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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    [round]=\"type === AvatarType.INDIVIDUAL || type === AvatarType.ALIST\"\n    [rounded]=\"type === AvatarType.GROUP\"\n  ></ax-avatar>\n</div>\n@if (!readonly) {\n  <div class=\"h-button-wrapper h-button-wrapper--center\">\n    @if (canDelete) {\n      <button axButton (click)=\"delete()\" color=\"danger\" outline>\n        {{ 'label.delete' | translate }}\n      </button>\n    }\n    <label class=\"file-button\" [ngClass]=\"{'is-disabled': readonly}\" 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}\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: () => [{ 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
            }], readonly: [{
                type: Input
            }], fileInputElement: [{
                type: ViewChild,
                args: ['fileInput']
            }] } });
//# sourceMappingURL=data:application/json;base64, 