@posiwise/user-module 0.0.122 → 0.0.123

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/esm2022/lib/account/subscriptions/user-subscriptions-list/user-subscriptions-list.component.mjs +3 -3
  2. package/fesm2022/posiwise-user-module.mjs +31 -31
  3. package/fesm2022/posiwise-user-module.mjs.map +1 -1
  4. package/package.json +1 -1
package/fesm2022/posiwise-user-module.mjs CHANGED
@@ -1,16 +1,16 @@
1
- import * as i3 from '@angular/common';
1
+ import * as i6 from '@angular/common';
2
2
  import { CommonModule } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
4
  import { Component, ViewChild, EventEmitter, Input, Output, NgModule } from '@angular/core';
5
5
  import * as i2 from '@angular/forms';
6
6
  import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
7
- import * as i6 from '@angular-magic/ngx-gp-autocomplete';
7
+ import * as i6$1 from '@angular-magic/ngx-gp-autocomplete';
8
8
  import { NgxGpAutocompleteModule } from '@angular-magic/ngx-gp-autocomplete';
9
9
  import { AppConfigService } from '@posiwise/app-config-service';
10
10
  import { CoreTranslocoModule } from '@posiwise/core-transloco';
11
11
  import * as i4 from '@posiwise/directives';
12
12
  import { DirectivesModule } from '@posiwise/directives';
13
- import * as i6$1 from '@posiwise/pipes';
13
+ import * as i6$2 from '@posiwise/pipes';
14
14
  import { PipesModule } from '@posiwise/pipes';
15
15
  import * as i7 from '@posiwise/shared-components';
16
16
  import { SharedComponentsModule } from '@posiwise/shared-components';
@@ -18,9 +18,9 @@ import * as i7$3 from 'ngx-captcha';
18
18
  import { NgxCaptchaModule } from 'ngx-captcha';
19
19
  import * as i11$1 from 'ngx-ui-switch';
20
20
  import { UiSwitchModule } from 'ngx-ui-switch';
21
- import * as i3$1 from 'primeng/accordion';
21
+ import * as i3 from 'primeng/accordion';
22
22
  import { AccordionModule } from 'primeng/accordion';
23
- import * as i6$2 from 'primeng/calendar';
23
+ import * as i6$3 from 'primeng/calendar';
24
24
  import { CalendarModule } from 'primeng/calendar';
25
25
  import * as i7$1 from 'primeng/dropdown';
26
26
  import { DropdownModule } from 'primeng/dropdown';
@@ -31,7 +31,7 @@ import { InputTextModule } from 'primeng/inputtext';
31
31
  import { MultiSelectModule } from 'primeng/multiselect';
32
32
  import * as i5 from 'primeng/progressspinner';
33
33
  import { ProgressSpinnerModule } from 'primeng/progressspinner';
34
- import * as i6$3 from 'primeng/rating';
34
+ import * as i6$4 from 'primeng/rating';
35
35
  import { RatingModule } from 'primeng/rating';
36
36
  import * as i9 from 'primeng/selectbutton';
37
37
  import { SelectButtonModule } from 'primeng/selectbutton';
@@ -64,7 +64,7 @@ import * as i5$2 from 'primeng/api';
64
64
  import * as i7$2 from 'primeng/table';
65
65
  import moment from 'moment';
66
66
  import * as i4$2 from 'primeng/autocomplete';
67
- import * as i6$4 from 'primeng/tabmenu';
67
+ import * as i6$5 from 'primeng/tabmenu';
68
68
 
69
69
  class AccountComponent {
70
70
  constructor(router) {
@@ -378,7 +378,7 @@ class AccountDetailsComponent extends AppBaseComponent {
378
378
  }
379
379
  }
380
380
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AccountDetailsComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: i1$1.NgbModal }, { token: i1$2.AuthService }, { token: i1$2.GeoService }, { token: i1$2.ProfileService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
381
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: AccountDetailsComponent, selector: "pw-account-details", viewQueries: [{ propertyName: "placesRef", first: true, predicate: ["ngxPlaces"], descendants: true }, { propertyName: "passwordRef", first: true, predicate: ["password"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center\">\n <ng-template [ngIf]=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n</div>\n<div class=\"row d-flex flex-row\">\n <div class=\"col-md-8 order-md-first order-sm-last\">\n <section id=\"email-section\">\n <div class=\"row\">\n <div class=\"col-sm-12 col-md-8 col-lg-8\">\n <h2>{{ 'User.Account.RegisteredEmail' | transloco }}</h2>\n <!-- Email Form -->\n <section id=\"email-form\">\n <form [formGroup]=\"emailForm\"\n (ngSubmit)=\"onEmailFormSubmit()\">\n <!-- Email Address -->\n <div class=\"mt-0\">\n <label class=\"me-3\" for=\"Primary Email\">{{ 'User.Account.PrimaryEmail' | transloco }}:\n </label>\n <strong>{{ validatedEmail }}</strong>\n <div class=\"mt-1\">\n <ng-container *ngIf=\"!toggleEmail\">\n <a class=\"btn btn-raised btn-outline-primary\"\n aria-label=\"Navigate to Target\"\n (click)=\"shouldUserChangeEmail()\">\n {{ 'User.Account.ChangeEmail' | transloco }}</a>\n </ng-container>\n <ng-container *ngIf=\"toggleEmail\">\n <div class=\"row\">\n <div class=\"clearfix\"></div>\n <div class=\"col-12 mb-3\">\n <input type=\"password\"\n class=\"form-control\"\n id=\"pwd\"\n #password\n *ngIf=\"!passwordVerified\"\n placeholder=\"Current Password\"\n (keyup)=\"checkValidity()\" />\n <input type=\"text\"\n class=\"form-control\"\n id=\"email\"\n *ngIf=\"passwordVerified\"\n placeholder=\"New Email\"\n formControlName=\"email\" />\n </div>\n <div class=\"col-12\">\n <a *ngIf=\"toggleEmail\"\n class=\"btn btn-raised btn-outline-default my-2 me-2\"\n aria-label=\"Navigate to Target\"\n (click)=\"onToggleEmail()\">{{ 'Button.Cancel' | transloco }}</a>\n <button class=\"btn btn-raised btn-primary\"\n type=\"submit\"\n [buttonBusy]=\"validatePasswordBusyButton\"\n (click)=\"validatePassword()\"\n *ngIf=\"!passwordVerified\"\n [disabled]=\"isCurrentPasswordValid\">\n {{ 'User.Account.Validate' | transloco }}\n </button>\n <button type=\"submit\"\n class=\"btn btn-raised btn-primary\"\n [buttonBusy]=\"emailBusyButton\"\n *ngIf=\"passwordVerified\">\n {{\n 'User.Account.SendVerification' | transloco\n }}\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <section id=\"slug\"\n class=\"mb-2 mt-3\">\n <div>\n <label class=\"me-3\" for=\"User Account\">{{ 'User.Account.NickName' | transloco }}:\n </label>\n <strong>{{ slug }}</strong>\n <div>\n <ng-container *ngIf=\"!toggleNickName\">\n <a class=\"btn btn-raised btn-outline-primary me-2\"\n aria-label=\"Navigate to Target\"\n (click)=\"toggleNickName = true\">\n {{ 'User.Account.ChangeNickname' | transloco }}</a>\n </ng-container>\n <ng-container *ngIf=\"toggleNickName\">\n <div class=\"mb-3\">\n <input type=\"text\"\n class=\"form-control slug-input\"\n [(ngModel)]=\"slug\"\n [ngModelOptions]=\"{ standalone: true }\" />\n </div>\n <div>\n <button type=\"button\"\n class=\"btn btn-raised btn-outline-default\"\n (click)=\"toggleNickName = false\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"button\"\n class=\"btn btn-raised btn-primary ms-2\"\n [buttonBusy]=\"slugBusyButton\"\n [disabled]=\"slug?.length < 2\"\n (click)=\"onUpdateSlug()\">\n {{ 'User.Account.UpdateNickname' | transloco }}\n </button>\n </div>\n </ng-container>\n </div>\n </div>\n </section>\n </form>\n </section>\n </div>\n </div>\n <section id=\"password-change\"\n class=\"mt-1\">\n <form [formGroup]=\"passwordForm\"\n (ngSubmit)=\"onPasswordFormSubmit()\">\n <div class=\"row\">\n <div class=\"col-sm-12 col-md-8 col-lg-8 mt-4\">\n <h2>{{ 'User.Account.ChangePassword' | transloco }}</h2>\n </div>\n <ng-container *ngIf=\"!user?.has_password\">\n <div class=\"text-danger mx-3 my-2\">\n <div>\n You don't have a password set, click on\n <em>{{ 'User.Account.ChangePassword' | transloco }}</em>.\n </div>\n <div>{{ 'User.Profile.PictureMessage' | transloco }}</div>\n </div>\n </ng-container>\n <div class=\"col-sm-12 col-md-8 col-lg-8\"\n *ngIf=\"user?.has_password\">\n <ng-container *ngIf=\"togglePassword\">\n <div class=\"mb-3\">\n <label for=\"account\">{{ 'User.Account.CurrentPassword' | transloco }}</label>\n <input type=\"password\"\n class=\"form-control\"\n formControlName=\"currentPassword\" />\n <small class=\"form-text text-muted danger\"\n *ngIf=\"\n !passwordForm.get('currentPassword').valid &&\n (passwordForm.get('currentPassword').dirty ||\n passwordForm.get('currentPassword').touched)\n \">\n {{ 'User.Account.Required' | transloco }}\n </small>\n </div>\n <div class=\"mb-3\">\n <label for=\"password\">{{ 'User.Account.NewPassword' | transloco }}</label>\n <input type=\"password\"\n class=\"form-control\"\n formControlName=\"newPassword\" />\n <small class=\"form-text text-muted danger\"\n *ngIf=\"\n !passwordForm.get('newPassword').valid &&\n (passwordForm.get('newPassword').dirty ||\n passwordForm.get('newPassword').touched)\n \">{{ 'User.Account.Validation.StrongPassword' | transloco }}\n </small>\n </div>\n <div class=\"mb-3\">\n <label for=\"password\">{{\n 'User.Account.ConfirmPassword' | transloco\n }}</label>\n <input type=\"password\"\n class=\"form-control\"\n formControlName=\"confirmPassword\" />\n <div class=\"text-danger\"\n *ngIf=\"\n passwordForm.get('confirmPassword').touched &&\n passwordForm.get('confirmPassword').errors\n ?.MatchPassword\n \">\n {{ 'User.Account.Validation.PasswordsMatch' | transloco }}\n </div>\n </div>\n <div class=\"mb-3\">\n <a class=\"btn btn-raised btn-outline-default\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n *ngIf=\"togglePassword\"\n (click)=\"onTogglePassword()\">\n {{ 'Button.Cancel' | transloco }}</a>\n <button class=\"btn btn-raised btn-primary ms-2\"\n [buttonBusy]=\"passwordBusyButton\"\n [disabled]=\"!passwordForm.valid\">\n {{ 'User.Account.UpdatePassword' | transloco }}\n </button>\n </div>\n </ng-container>\n <div>\n <a class=\"btn btn-raised btn-outline-primary\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n *ngIf=\"!togglePassword\"\n (click)=\"togglePassword = !togglePassword\">\n {{ 'User.Account.ChangePassword' | transloco }}</a>\n </div>\n </div>\n <div class=\"col-sm-12 col-md-8 col-lg-8\"\n *ngIf=\"!user?.has_password\">\n <a class=\"btn btn-raised btn-primary me-2\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n (click)=\"sendMailToResetPassword()\">\n {{ 'User.Account.ChangePassword' | transloco }}</a>\n </div>\n </div>\n </form>\n </section>\n </section>\n </div>\n <!-- Avatar -->\n <div class=\"mt-4 mt-sm-0 col-md-4 text-center order-md-last order-sm-first\">\n <h2>{{ 'User.Profile.Avatar' | transloco }}</h2>\n <div class=\"text-center mt-1\">\n <div class=\"image-container\">\n <img [src]=\"image\"\n width=\"150\"\n height=\"150\"\n class=\"image rounded-circle\"\n alt=\"User Male\"\n (error)=\"handleImageError($event, 'assets/img/icons/male.png')\" />\n <div class=\"overlay\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">\n <div class=\"overlay-text\">{{ 'User.Profile.Change' | transloco }}</div>\n </div>\n </div>\n <h4 class=\"mt-2\">{{ user?.first_name }} {{ user?.last_name }}</h4>\n <a aria-label=\"Navigate to Target\"\n class=\"d-inline-block mb-2\"\n (click)=\"openModal(content)\">\n {{ 'User.Profile.EditAvatar' | transloco }}</a>\n <br />\n </div>\n </div>\n</div>\n<br />\n<section id=\"user-profile\"\n class=\"mt-2\">\n <div class=\"row\">\n <div class=\"col-12\">\n <form [formGroup]=\"profileForm\"\n (ngSubmit)=\"onProfileFormSubmit()\">\n <h2>{{ 'User.Profile.UserProfile' | transloco }}</h2>\n <div class=\"row mt-3\">\n <div class=\"col-sm-12 col-md-6 col-lg-6\">\n <pw-input-container label=\"First Name\"\n name=\"first_name\"\n errorMsg=\"Please enter first Name\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"first_name\"\n id=\"first_name\" />\n </pw-input-container>\n <pw-input-container label=\"Preferred name\"\n name=\"preferred_name\"\n errorMsg=\"Please enter preferred Name\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"preferred_name\"\n id=\"preferred_name\" />\n </pw-input-container>\n <ng-container *ngIf=\"countries$ | async as countries\">\n <pw-input-container label=\"Country\"\n name=\"country\"\n errorMsg=\"Please select a country\">\n <p-dropdown\n id=\"country\"\n [options]=\"countries\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"country\"\n (onChange)=\"getRegion($event.value)\"\n placeholder=\"{{ 'User.Profile.SelectCountry' | transloco }}\">\n </p-dropdown>\n </pw-input-container>\n </ng-container>\n <pw-input-container label=\"Province\"\n name=\"province\"\n errorMsg=\"Please enter province\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"province\" />\n </pw-input-container>\n <pw-input-container label=\"Website Url\"\n name=\"website_url\"\n errorMsg=\"Please enter Website\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"website_url\" />\n </pw-input-container>\n </div>\n <div class=\"col-sm-12 col-md-6 col-lg-6\">\n <pw-input-container label=\"Last Name\"\n name=\"last_name\"\n errorMsg=\"Please enter last Name\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"last_name\"\n id=\"last_name\" />\n </pw-input-container>\n <pw-input-container label=\"Date of Birth\"\n name=\"dob\"\n errorMsg=\"Please enter date of birth\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"dob\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n [maxDate]=\"{ day: 31, month: 12, year: 2018 }\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n (click)=\"d.toggle()\"\n type=\"button\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </pw-input-container>\n <pw-input-container label=\"State\"\n name=\"state\"\n errorMsg=\"Please select a state\">\n <p-dropdown\n id=\"state\"\n [options]=\"states\"\n [(ngModel)]=\"selectedState\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"state\"\n [placeholder]=\"'User.Profile.SelectState' | transloco\">\n </p-dropdown>\n\n </pw-input-container>\n <!-- Location -->\n <pw-input-container label=\"Location\"\n name=\"location\">\n <input ngx-gp-autocomplete\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </pw-input-container>\n <pw-input-container label=\"Phone Number\"\n name=\"phone_number\"\n errorMsg=\"Please enter phone number\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"phone_number\"\n id=\"phone_number\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 text-end\">\n <div class=\"mb-3\">\n <button class=\"btn btn-raised btn-primary\" [buttonBusy]=\"profileBusyButton\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n </div>\n</section>\n<ng-template #content\n let-modal>\n <div class=\"card m-0\">\n <div class=\"card-content\">\n <div class=\"card-title\">\n <h3 class=\"modal-title\">{{ 'User.Profile.ProfilePicture' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"card-header\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".overlay{left:50%;opacity:0;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);transition:.5s ease}.image-container{position:relative}.image-container:hover .image{opacity:.3}.image-container:hover .overlay{opacity:0}.overlay-text{background:#f0efef80;border-radius:50%;color:#000;font-size:16px;height:150px;line-height:150px;text-align:center;vertical-align:middle;width:150px}@media screen and (max-width: 767px){.card-body{padding:20px!important}}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i7.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
381
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: AccountDetailsComponent, selector: "pw-account-details", viewQueries: [{ propertyName: "placesRef", first: true, predicate: ["ngxPlaces"], descendants: true }, { propertyName: "passwordRef", first: true, predicate: ["password"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center\">\n <ng-template [ngIf]=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n</div>\n<div class=\"row d-flex flex-row\">\n <div class=\"col-md-8 order-md-first order-sm-last\">\n <section id=\"email-section\">\n <div class=\"row\">\n <div class=\"col-sm-12 col-md-8 col-lg-8\">\n <h2>{{ 'User.Account.RegisteredEmail' | transloco }}</h2>\n <!-- Email Form -->\n <section id=\"email-form\">\n <form [formGroup]=\"emailForm\"\n (ngSubmit)=\"onEmailFormSubmit()\">\n <!-- Email Address -->\n <div class=\"mt-0\">\n <label class=\"me-3\" for=\"Primary Email\">{{ 'User.Account.PrimaryEmail' | transloco }}:\n </label>\n <strong>{{ validatedEmail }}</strong>\n <div class=\"mt-1\">\n <ng-container *ngIf=\"!toggleEmail\">\n <a class=\"btn btn-raised btn-outline-primary\"\n aria-label=\"Navigate to Target\"\n (click)=\"shouldUserChangeEmail()\">\n {{ 'User.Account.ChangeEmail' | transloco }}</a>\n </ng-container>\n <ng-container *ngIf=\"toggleEmail\">\n <div class=\"row\">\n <div class=\"clearfix\"></div>\n <div class=\"col-12 mb-3\">\n <input type=\"password\"\n class=\"form-control\"\n id=\"pwd\"\n #password\n *ngIf=\"!passwordVerified\"\n placeholder=\"Current Password\"\n (keyup)=\"checkValidity()\" />\n <input type=\"text\"\n class=\"form-control\"\n id=\"email\"\n *ngIf=\"passwordVerified\"\n placeholder=\"New Email\"\n formControlName=\"email\" />\n </div>\n <div class=\"col-12\">\n <a *ngIf=\"toggleEmail\"\n class=\"btn btn-raised btn-outline-default my-2 me-2\"\n aria-label=\"Navigate to Target\"\n (click)=\"onToggleEmail()\">{{ 'Button.Cancel' | transloco }}</a>\n <button class=\"btn btn-raised btn-primary\"\n type=\"submit\"\n [buttonBusy]=\"validatePasswordBusyButton\"\n (click)=\"validatePassword()\"\n *ngIf=\"!passwordVerified\"\n [disabled]=\"isCurrentPasswordValid\">\n {{ 'User.Account.Validate' | transloco }}\n </button>\n <button type=\"submit\"\n class=\"btn btn-raised btn-primary\"\n [buttonBusy]=\"emailBusyButton\"\n *ngIf=\"passwordVerified\">\n {{\n 'User.Account.SendVerification' | transloco\n }}\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <section id=\"slug\"\n class=\"mb-2 mt-3\">\n <div>\n <label class=\"me-3\" for=\"User Account\">{{ 'User.Account.NickName' | transloco }}:\n </label>\n <strong>{{ slug }}</strong>\n <div>\n <ng-container *ngIf=\"!toggleNickName\">\n <a class=\"btn btn-raised btn-outline-primary me-2\"\n aria-label=\"Navigate to Target\"\n (click)=\"toggleNickName = true\">\n {{ 'User.Account.ChangeNickname' | transloco }}</a>\n </ng-container>\n <ng-container *ngIf=\"toggleNickName\">\n <div class=\"mb-3\">\n <input type=\"text\"\n class=\"form-control slug-input\"\n [(ngModel)]=\"slug\"\n [ngModelOptions]=\"{ standalone: true }\" />\n </div>\n <div>\n <button type=\"button\"\n class=\"btn btn-raised btn-outline-default\"\n (click)=\"toggleNickName = false\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"button\"\n class=\"btn btn-raised btn-primary ms-2\"\n [buttonBusy]=\"slugBusyButton\"\n [disabled]=\"slug?.length < 2\"\n (click)=\"onUpdateSlug()\">\n {{ 'User.Account.UpdateNickname' | transloco }}\n </button>\n </div>\n </ng-container>\n </div>\n </div>\n </section>\n </form>\n </section>\n </div>\n </div>\n <section id=\"password-change\"\n class=\"mt-1\">\n <form [formGroup]=\"passwordForm\"\n (ngSubmit)=\"onPasswordFormSubmit()\">\n <div class=\"row\">\n <div class=\"col-sm-12 col-md-8 col-lg-8 mt-4\">\n <h2>{{ 'User.Account.ChangePassword' | transloco }}</h2>\n </div>\n <ng-container *ngIf=\"!user?.has_password\">\n <div class=\"text-danger mx-3 my-2\">\n <div>\n You don't have a password set, click on\n <em>{{ 'User.Account.ChangePassword' | transloco }}</em>.\n </div>\n <div>{{ 'User.Profile.PictureMessage' | transloco }}</div>\n </div>\n </ng-container>\n <div class=\"col-sm-12 col-md-8 col-lg-8\"\n *ngIf=\"user?.has_password\">\n <ng-container *ngIf=\"togglePassword\">\n <div class=\"mb-3\">\n <label for=\"account\">{{ 'User.Account.CurrentPassword' | transloco }}</label>\n <input type=\"password\"\n class=\"form-control\"\n formControlName=\"currentPassword\" />\n <small class=\"form-text text-muted danger\"\n *ngIf=\"\n !passwordForm.get('currentPassword').valid &&\n (passwordForm.get('currentPassword').dirty ||\n passwordForm.get('currentPassword').touched)\n \">\n {{ 'User.Account.Required' | transloco }}\n </small>\n </div>\n <div class=\"mb-3\">\n <label for=\"password\">{{ 'User.Account.NewPassword' | transloco }}</label>\n <input type=\"password\"\n class=\"form-control\"\n formControlName=\"newPassword\" />\n <small class=\"form-text text-muted danger\"\n *ngIf=\"\n !passwordForm.get('newPassword').valid &&\n (passwordForm.get('newPassword').dirty ||\n passwordForm.get('newPassword').touched)\n \">{{ 'User.Account.Validation.StrongPassword' | transloco }}\n </small>\n </div>\n <div class=\"mb-3\">\n <label for=\"password\">{{\n 'User.Account.ConfirmPassword' | transloco\n }}</label>\n <input type=\"password\"\n class=\"form-control\"\n formControlName=\"confirmPassword\" />\n <div class=\"text-danger\"\n *ngIf=\"\n passwordForm.get('confirmPassword').touched &&\n passwordForm.get('confirmPassword').errors\n ?.MatchPassword\n \">\n {{ 'User.Account.Validation.PasswordsMatch' | transloco }}\n </div>\n </div>\n <div class=\"mb-3\">\n <a class=\"btn btn-raised btn-outline-default\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n *ngIf=\"togglePassword\"\n (click)=\"onTogglePassword()\">\n {{ 'Button.Cancel' | transloco }}</a>\n <button class=\"btn btn-raised btn-primary ms-2\"\n [buttonBusy]=\"passwordBusyButton\"\n [disabled]=\"!passwordForm.valid\">\n {{ 'User.Account.UpdatePassword' | transloco }}\n </button>\n </div>\n </ng-container>\n <div>\n <a class=\"btn btn-raised btn-outline-primary\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n *ngIf=\"!togglePassword\"\n (click)=\"togglePassword = !togglePassword\">\n {{ 'User.Account.ChangePassword' | transloco }}</a>\n </div>\n </div>\n <div class=\"col-sm-12 col-md-8 col-lg-8\"\n *ngIf=\"!user?.has_password\">\n <a class=\"btn btn-raised btn-primary me-2\"\n aria-label=\"Navigate to Target\"\n data-bs-target=\"\"\n (click)=\"sendMailToResetPassword()\">\n {{ 'User.Account.ChangePassword' | transloco }}</a>\n </div>\n </div>\n </form>\n </section>\n </section>\n </div>\n <!-- Avatar -->\n <div class=\"mt-4 mt-sm-0 col-md-4 text-center order-md-last order-sm-first\">\n <h2>{{ 'User.Profile.Avatar' | transloco }}</h2>\n <div class=\"text-center mt-1\">\n <div class=\"image-container\">\n <img [src]=\"image\"\n width=\"150\"\n height=\"150\"\n class=\"image rounded-circle\"\n alt=\"User Male\"\n (error)=\"handleImageError($event, 'assets/img/icons/male.png')\" />\n <div class=\"overlay\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">\n <div class=\"overlay-text\">{{ 'User.Profile.Change' | transloco }}</div>\n </div>\n </div>\n <h4 class=\"mt-2\">{{ user?.first_name }} {{ user?.last_name }}</h4>\n <a aria-label=\"Navigate to Target\"\n class=\"d-inline-block mb-2\"\n (click)=\"openModal(content)\">\n {{ 'User.Profile.EditAvatar' | transloco }}</a>\n <br />\n </div>\n </div>\n</div>\n<br />\n<section id=\"user-profile\"\n class=\"mt-2\">\n <div class=\"row\">\n <div class=\"col-12\">\n <form [formGroup]=\"profileForm\"\n (ngSubmit)=\"onProfileFormSubmit()\">\n <h2>{{ 'User.Profile.UserProfile' | transloco }}</h2>\n <div class=\"row mt-3\">\n <div class=\"col-sm-12 col-md-6 col-lg-6\">\n <pw-input-container label=\"First Name\"\n name=\"first_name\"\n errorMsg=\"Please enter first Name\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"first_name\"\n id=\"first_name\" />\n </pw-input-container>\n <pw-input-container label=\"Preferred name\"\n name=\"preferred_name\"\n errorMsg=\"Please enter preferred Name\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"preferred_name\"\n id=\"preferred_name\" />\n </pw-input-container>\n <ng-container *ngIf=\"countries$ | async as countries\">\n <pw-input-container label=\"Country\"\n name=\"country\"\n errorMsg=\"Please select a country\">\n <p-dropdown\n id=\"country\"\n [options]=\"countries\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"country\"\n (onChange)=\"getRegion($event.value)\"\n placeholder=\"{{ 'User.Profile.SelectCountry' | transloco }}\">\n </p-dropdown>\n </pw-input-container>\n </ng-container>\n <pw-input-container label=\"Province\"\n name=\"province\"\n errorMsg=\"Please enter province\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"province\" />\n </pw-input-container>\n <pw-input-container label=\"Website Url\"\n name=\"website_url\"\n errorMsg=\"Please enter Website\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"website_url\" />\n </pw-input-container>\n </div>\n <div class=\"col-sm-12 col-md-6 col-lg-6\">\n <pw-input-container label=\"Last Name\"\n name=\"last_name\"\n errorMsg=\"Please enter last Name\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"last_name\"\n id=\"last_name\" />\n </pw-input-container>\n <pw-input-container label=\"Date of Birth\"\n name=\"dob\"\n errorMsg=\"Please enter date of birth\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"dob\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n [maxDate]=\"{ day: 31, month: 12, year: 2018 }\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n (click)=\"d.toggle()\"\n type=\"button\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </pw-input-container>\n <pw-input-container label=\"State\"\n name=\"state\"\n errorMsg=\"Please select a state\">\n <p-dropdown\n id=\"state\"\n [options]=\"states\"\n [(ngModel)]=\"selectedState\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"state\"\n [placeholder]=\"'User.Profile.SelectState' | transloco\">\n </p-dropdown>\n\n </pw-input-container>\n <!-- Location -->\n <pw-input-container label=\"Location\"\n name=\"location\">\n <input ngx-gp-autocomplete\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </pw-input-container>\n <pw-input-container label=\"Phone Number\"\n name=\"phone_number\"\n errorMsg=\"Please enter phone number\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"phone_number\"\n id=\"phone_number\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 text-end\">\n <div class=\"mb-3\">\n <button class=\"btn btn-raised btn-primary\" [buttonBusy]=\"profileBusyButton\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n </div>\n</section>\n<ng-template #content\n let-modal>\n <div class=\"card m-0\">\n <div class=\"card-content\">\n <div class=\"card-title\">\n <h3 class=\"modal-title\">{{ 'User.Profile.ProfilePicture' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"card-header\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".overlay{left:50%;opacity:0;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);transition:.5s ease}.image-container{position:relative}.image-container:hover .image{opacity:.3}.image-container:hover .overlay{opacity:0}.overlay-text{background:#f0efef80;border-radius:50%;color:#000;font-size:16px;height:150px;line-height:150px;text-align:center;vertical-align:middle;width:150px}@media screen and (max-width: 767px){.card-body{padding:20px!important}}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i7.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
382
382
  }
383
383
  __decorate([
384
384
  ValidateForm('profileForm'),
@@ -466,7 +466,7 @@ class AddSubscriptionComponent extends AppBaseComponent {
466
466
  super.ngOnDestroy();
467
467
  }
468
468
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AddSubscriptionComponent, deps: [{ token: i1$2.ProductService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
469
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: AddSubscriptionComponent, selector: "pw-add-subscription", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"isLoaded && !selectedProduct\"\n class=\"mt-4\">\n <a aria-label=\"Navigate to Target\"\n [routerLink]=\"['/account/subscriptions']\"\n class=\"previous float-start\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n </a>\n\n <div class=\"d-flex flex-wrap justify-content-center\">\n <div class=\"toggle\"\n *ngFor=\"let item of subscribedPermissionKeys; let i = index\">\n <input type=\"radio\"\n name=\"sizeBy\"\n value=\"option{{ i + 1 }}\"\n id=\"option{{ i + 1 }}\"\n (change)=\"onChangeCategory(item)\"\n [checked]=\"i === 0\" />\n <label for=\"option{{ i + 1 }}\">{{ item }}</label>\n </div>\n </div>\n\n <ul class=\"row animated fadeIn d-flex\">\n <li *ngFor=\"let product of availableProducts; trackBy: trackByProduct\"\n class=\"col-sm-12 col-md-6 col-xl-4 my-3 mt-sm-2\">\n <div class=\"card\">\n <div class=\"card-content\">\n <div class=\"card-header\">\n <h4 class=\"text-bold-500 primary mb-3\">{{ product.name }}</h4>\n <ng-template [ngIf]=\"product.price_per_unit\"\n [ngIfElse]=\"freeProductRef\">\n <h5 *ngIf=\"product?.purchased_units\"\n class=\"my-3 branding-color-1\">\n Currently {{ product.currency | currencySymbol\n }}{{\n (\n (product.purchased_units * product.price_per_unit) /\n 100\n ).toFixed(2)\n }}&nbsp;/&nbsp;{{ product.billing_frequency }}\n </h5>\n <h5 class=\"my-3\">\n Min\n {{product.min_units &gt; 1 ? (product.min_units + ' Seats'): (product.min_units + ' Seat')}}\n - {{ product.currency | currencySymbol\n }}{{\n ((product.min_units * product.price_per_unit) / 100).toFixed(2)\n }}&nbsp;/&nbsp;{{ product.billing_frequency }}\n </h5>\n <h5 class=\"d-inline-block text-bold-600 mb-2\">\n {{ product.currency | currencySymbol\n }}{{ (product.price_per_unit / 100).toFixed(2) }}&nbsp;/&nbsp;{{\n product.billing_frequency\n }}&nbsp;/&nbsp;seat\n </h5>\n </ng-template>\n <ng-template #freeProductRef>\n <div class=\"d-inline-block text-bold-600 mb-2\">Free</div>\n </ng-template>\n <p class=\"mb-2\"\n [innerHTML]=\"product?.description\"></p>\n </div>\n <div class=\"card-footer px-3\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"onSelection(product)\"\n *ngIf=\"\n !product.is_subscribed &&\n !product.trial_subscription &&\n product.stripe_plan_id\n \"\n class=\"card-btn btn btn-raised me-1 btn-primary btn-sm\">\n {{ 'User.Subscriptions.Subscribe' | transloco }}\n </a>\n\n <div class=\"mt-3\"\n *ngIf=\"\n !product.is_subscribed &&\n product.trial_subscription &&\n product.stripe_plan_id\n \">\n <a aria-label=\"Navigate to Target\"\n (click)=\"onSelection(product)\"\n class=\"card-btn btn btn-raised me-1 btn-primary btn-sm\">\n {{ 'Button.Upgrade' | transloco }}\n </a>\n <span class=\"badge bg-secondary position-absolute trial-badge\">{{ 'User.Subscriptions.Trial' | transloco }}\n </span>\n </div>\n\n <span *ngIf=\"\n product.is_subscribed &&\n !product.trial_subscription &&\n !product.is_deleted\n \"\n class=\"card-btn badge bg-default text-white\">\n {{ 'User.Subscriptions.Subscribed' | transloco }}\n </span>\n\n <span *ngIf=\"\n product.is_subscribed &&\n product.trial_subscription &&\n product.price_per_unit === 0 &&\n !product.is_deleted &&\n !product.stripe_plan_id\n \"\n class=\"card-btn badge bg-default text-white\">\n Free\n </span>\n\n <span *ngIf=\"product.is_deleted\"\n class=\"card-btn badge bg-default text-white\">\n {{ 'User.Subscriptions.UnsubscribedButActive' | transloco }}\n </span>\n </div>\n </div>\n </div>\n </li>\n </ul>\n <div class=\"row\">\n <div class=\"col-12\">\n <pw-no-data [withImage]=\"true\" message=\"No products available under this category.\"\n *ngIf=\"availableProducts && availableProducts.length === 0\">\n </pw-no-data>\n </div>\n </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.card .card-body{position:relative}.card .card-body .bottom-text{bottom:15px;left:20px;position:absolute}.card .card-body .card-btn{bottom:15px;position:absolute}.card.shadow-md{height:100%}.card .primary{text-transform:uppercase}.trial-badge{bottom:15px;left:20px}.toggle{align-items:stretch;box-sizing:border-box;display:flex;flex-flow:row nowrap;font-size:0;justify-content:flex-start;margin:0}.toggle input{height:0;left:-9999px;position:absolute;width:0}.toggle input+label{background-color:#fff;border:solid 1px rgb(221,221,221);box-shadow:0 0 #fff0;box-sizing:border-box;display:inline-block;font-size:1rem;font-weight:600;line-height:140%;margin:0;padding:.75rem 2rem;position:relative;text-align:center;transition:border-color .15s ease-out,color .25s ease-out,background-color .15s ease-out,box-shadow .15s ease-out}.toggle input:hover+label{border-color:#213140}.toggle input:checked+label{background-color:var(--tabs_bg);border-color:var(--tabs_bg);box-shadow:0 0 10px #66b3fb80;color:var(--tabs_text);z-index:1}.shadow-md{height:100%;padding-bottom:50px!important}.fadeIn{animation-name:fadeIn}.animated{animation-duration:2s;animation-fill-mode:both}.card-btn{bottom:15px;position:absolute;right:20px}.card-footer{height:60px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 800px){.toggle{justify-content:center}.toggle input+label{align-items:center;display:flex;flex:0 0 70%;justify-content:center;padding:.75rem .25rem}}.branding-color-1{color:var(--first)!important}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i6$1.CurrencySymbolPipe, name: "currencySymbol" }] }); }
469
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: AddSubscriptionComponent, selector: "pw-add-subscription", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"isLoaded && !selectedProduct\"\n class=\"mt-4\">\n <a aria-label=\"Navigate to Target\"\n [routerLink]=\"['/account/subscriptions']\"\n class=\"previous float-start\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n </a>\n\n <div class=\"d-flex flex-wrap justify-content-center\">\n <div class=\"toggle\"\n *ngFor=\"let item of subscribedPermissionKeys; let i = index\">\n <input type=\"radio\"\n name=\"sizeBy\"\n value=\"option{{ i + 1 }}\"\n id=\"option{{ i + 1 }}\"\n (change)=\"onChangeCategory(item)\"\n [checked]=\"i === 0\" />\n <label for=\"option{{ i + 1 }}\">{{ item }}</label>\n </div>\n </div>\n\n <ul class=\"row animated fadeIn d-flex\">\n <li *ngFor=\"let product of availableProducts; trackBy: trackByProduct\"\n class=\"col-sm-12 col-md-6 col-xl-4 my-3 mt-sm-2\">\n <div class=\"card\">\n <div class=\"card-content\">\n <div class=\"card-header\">\n <h4 class=\"text-bold-500 primary mb-3\">{{ product.name }}</h4>\n <ng-template [ngIf]=\"product.price_per_unit\"\n [ngIfElse]=\"freeProductRef\">\n <h5 *ngIf=\"product?.purchased_units\"\n class=\"my-3 branding-color-1\">\n Currently {{ product.currency | currencySymbol\n }}{{\n (\n (product.purchased_units * product.price_per_unit) /\n 100\n ).toFixed(2)\n }}&nbsp;/&nbsp;{{ product.billing_frequency }}\n </h5>\n <h5 class=\"my-3\">\n Min\n {{product.min_units &gt; 1 ? (product.min_units + ' Seats'): (product.min_units + ' Seat')}}\n - {{ product.currency | currencySymbol\n }}{{\n ((product.min_units * product.price_per_unit) / 100).toFixed(2)\n }}&nbsp;/&nbsp;{{ product.billing_frequency }}\n </h5>\n <h5 class=\"d-inline-block text-bold-600 mb-2\">\n {{ product.currency | currencySymbol\n }}{{ (product.price_per_unit / 100).toFixed(2) }}&nbsp;/&nbsp;{{\n product.billing_frequency\n }}&nbsp;/&nbsp;seat\n </h5>\n </ng-template>\n <ng-template #freeProductRef>\n <div class=\"d-inline-block text-bold-600 mb-2\">Free</div>\n </ng-template>\n <p class=\"mb-2\"\n [innerHTML]=\"product?.description\"></p>\n </div>\n <div class=\"card-footer px-3\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"onSelection(product)\"\n *ngIf=\"\n !product.is_subscribed &&\n !product.trial_subscription &&\n product.stripe_plan_id\n \"\n class=\"card-btn btn btn-raised me-1 btn-primary btn-sm\">\n {{ 'User.Subscriptions.Subscribe' | transloco }}\n </a>\n\n <div class=\"mt-3\"\n *ngIf=\"\n !product.is_subscribed &&\n product.trial_subscription &&\n product.stripe_plan_id\n \">\n <a aria-label=\"Navigate to Target\"\n (click)=\"onSelection(product)\"\n class=\"card-btn btn btn-raised me-1 btn-primary btn-sm\">\n {{ 'Button.Upgrade' | transloco }}\n </a>\n <span class=\"badge bg-secondary position-absolute trial-badge\">{{ 'User.Subscriptions.Trial' | transloco }}\n </span>\n </div>\n\n <span *ngIf=\"\n product.is_subscribed &&\n !product.trial_subscription &&\n !product.is_deleted\n \"\n class=\"card-btn badge bg-default text-white\">\n {{ 'User.Subscriptions.Subscribed' | transloco }}\n </span>\n\n <span *ngIf=\"\n product.is_subscribed &&\n product.trial_subscription &&\n product.price_per_unit === 0 &&\n !product.is_deleted &&\n !product.stripe_plan_id\n \"\n class=\"card-btn badge bg-default text-white\">\n Free\n </span>\n\n <span *ngIf=\"product.is_deleted\"\n class=\"card-btn badge bg-default text-white\">\n {{ 'User.Subscriptions.UnsubscribedButActive' | transloco }}\n </span>\n </div>\n </div>\n </div>\n </li>\n </ul>\n <div class=\"row\">\n <div class=\"col-12\">\n <pw-no-data [withImage]=\"true\" message=\"No products available under this category.\"\n *ngIf=\"availableProducts && availableProducts.length === 0\">\n </pw-no-data>\n </div>\n </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.card .card-body{position:relative}.card .card-body .bottom-text{bottom:15px;left:20px;position:absolute}.card .card-body .card-btn{bottom:15px;position:absolute}.card.shadow-md{height:100%}.card .primary{text-transform:uppercase}.trial-badge{bottom:15px;left:20px}.toggle{align-items:stretch;box-sizing:border-box;display:flex;flex-flow:row nowrap;font-size:0;justify-content:flex-start;margin:0}.toggle input{height:0;left:-9999px;position:absolute;width:0}.toggle input+label{background-color:#fff;border:solid 1px rgb(221,221,221);box-shadow:0 0 #fff0;box-sizing:border-box;display:inline-block;font-size:1rem;font-weight:600;line-height:140%;margin:0;padding:.75rem 2rem;position:relative;text-align:center;transition:border-color .15s ease-out,color .25s ease-out,background-color .15s ease-out,box-shadow .15s ease-out}.toggle input:hover+label{border-color:#213140}.toggle input:checked+label{background-color:var(--tabs_bg);border-color:var(--tabs_bg);box-shadow:0 0 10px #66b3fb80;color:var(--tabs_text);z-index:1}.shadow-md{height:100%;padding-bottom:50px!important}.fadeIn{animation-name:fadeIn}.animated{animation-duration:2s;animation-fill-mode:both}.card-btn{bottom:15px;position:absolute;right:20px}.card-footer{height:60px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 800px){.toggle{justify-content:center}.toggle input+label{align-items:center;display:flex;flex:0 0 70%;justify-content:center;padding:.75rem .25rem}}.branding-color-1{color:var(--first)!important}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i6$2.CurrencySymbolPipe, name: "currencySymbol" }] }); }
470
470
  }
471
471
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AddSubscriptionComponent, decorators: [{
472
472
  type: Component,
@@ -491,7 +491,7 @@ class SavedCardDetailsComponent {
491
491
  this.changeEvent.emit(value);
492
492
  }
493
493
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SavedCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
494
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SavedCardDetailsComponent, selector: "pw-saved-card-details", inputs: { data: "data", isChangePayment: "isChangePayment", showNewCard: "showNewCard" }, outputs: { changeEvent: "changeEvent" }, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12\"\n *ngIf=\"!showNewCard\">\n <h4 class=\"title\">Saved Card</h4>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">Type:</div>\n <div class=\"summary-right\">{{ data?.brand }}</div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">Expiry:</div>\n <div class=\"summary-right\">{{ data.exp_month }} / {{ data.exp_year }}</div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">Card Number:</div>\n <div class=\"summary-right\">{{ data?.card_number }}</div>\n </div>\n </div>\n\n <div class=\"col-12 mt-3\"\n *ngIf=\"!showNewCard\">\n <button type=\"button\"\n class=\"btn btn-outline-primary btn-sm\"\n aria-label=\"Change Payment Option\"\n (click)=\"OnPaymentChange(true)\">\n Change Payment Option\n </button>\n </div>\n</div>\n", styles: [".summary-row{padding-left:10px;padding-right:10px}.summary-row.total{border-top:1px solid rgb(204,204,204);font-weight:500}.summary-left{-webkit-box-flex:1;color:#555;flex-grow:1;-ms-flex-positive:1;font-weight:600;text-align:left}.summary-left.plan{color:#c93f00;font-size:14px;margin:5px 0}.summary-right{-webkit-box-flex:1;-webkit-box-pack:end;color:#000;flex-grow:1;-ms-flex-pack:end;-ms-flex-positive:1;justify-content:flex-end;text-align:right}h4{border-bottom:1px solid rgb(0,0,0);font-size:1rem;font-weight:600;margin:0 0 20px;padding:0 0 5px;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
494
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SavedCardDetailsComponent, selector: "pw-saved-card-details", inputs: { data: "data", isChangePayment: "isChangePayment", showNewCard: "showNewCard" }, outputs: { changeEvent: "changeEvent" }, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12\"\n *ngIf=\"!showNewCard\">\n <h4 class=\"title\">Saved Card</h4>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">Type:</div>\n <div class=\"summary-right\">{{ data?.brand }}</div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">Expiry:</div>\n <div class=\"summary-right\">{{ data.exp_month }} / {{ data.exp_year }}</div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">Card Number:</div>\n <div class=\"summary-right\">{{ data?.card_number }}</div>\n </div>\n </div>\n\n <div class=\"col-12 mt-3\"\n *ngIf=\"!showNewCard\">\n <button type=\"button\"\n class=\"btn btn-outline-primary btn-sm\"\n aria-label=\"Change Payment Option\"\n (click)=\"OnPaymentChange(true)\">\n Change Payment Option\n </button>\n </div>\n</div>\n", styles: [".summary-row{padding-left:10px;padding-right:10px}.summary-row.total{border-top:1px solid rgb(204,204,204);font-weight:500}.summary-left{-webkit-box-flex:1;color:#555;flex-grow:1;-ms-flex-positive:1;font-weight:600;text-align:left}.summary-left.plan{color:#c93f00;font-size:14px;margin:5px 0}.summary-right{-webkit-box-flex:1;-webkit-box-pack:end;color:#000;flex-grow:1;-ms-flex-pack:end;-ms-flex-positive:1;justify-content:flex-end;text-align:right}h4{border-bottom:1px solid rgb(0,0,0);font-size:1rem;font-weight:600;margin:0 0 20px;padding:0 0 5px;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
495
495
  }
496
496
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SavedCardDetailsComponent, decorators: [{
497
497
  type: Component,
@@ -682,7 +682,7 @@ class SubscriptionCredentialComponent extends AppBaseComponent {
682
682
  super.ngOnDestroy();
683
683
  }
684
684
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionCredentialComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: i1$2.SubscriptionService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
685
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionCredentialComponent, selector: "pw-subscription-credential", viewQueries: [{ propertyName: "passwordValidationModalForRevealCredential", first: true, predicate: ["passwordValidationModalForRevealCredential"], descendants: true }, { propertyName: "passwordValidationModalForEditCredential", first: true, predicate: ["passwordValidationModalForEditCredential"], descendants: true }, { propertyName: "passwordValidationModalForAddCredential", first: true, predicate: ["passwordValidationModalForAddCredential"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\"\n *ngIf=\"showForm\">\n <div class=\"col-12 d-flex\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"onCancel()\"\n (keydown.enter)=\"onCancel()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>{{ data.length ? 'Edit' : 'Create new' }} Credential</span>\n </h3>\n </div>\n</div>\n<ng-container *ngIf=\"showForm\">\n <div class=\"container-fluid pw-tab\">\n <div class=\"p-2 mt-3\">\n <form>\n <div class=\"row mb-3\">\n <div class=\"col-12 col-md-4\"\n *ngIf=\"!isEdit && showForm\">\n <div class=\"mb-3\">\n <label for=\"credential\">Credential <span class=\"text-danger required-icon\">*</span> </label>\n <p-dropdown\n [options]=\"uniqueCredential\"\n [placeholder]=\"'Select credential'\"\n optionLabel=\"name\"\n optionValue=\"name\"\n (onChange)=\"selectedOption($event)\">\n </p-dropdown>\n </div>\n </div>\n\n <div class=\"col-12 col-md-4\"\n *ngIf=\"credentialsSelect?.length\">\n <div class=\"card pb-2 pt-2 overflow-visible\">\n <div class=\"card-content\">\n <div class=\"card-header\">\n <form [formGroup]=\"form\"\n novalidate\n (ngSubmit)=\"saveCredentials()\">\n <div formArrayName=\"credentials\">\n <div *ngFor=\"\n let credential of credentialsGroup.controls;\n let i = index\n \">\n <div [formGroupName]=\"i\">\n <div class=\"mb-3\">\n <pw-input-container label=\"{{\n credential.get('field').value\n }}\"\n [class.info-circle]=\"\n credential.get('description').value\n \"\n name=\"value\"\n errorMsg=\"Please enter value\">\n <span *ngIf=\"\n credential.get('description')\n .value\n \"\n class=\"tooltiptext gradient-custom-branding\">{{\n credential.get('description')\n .value\n }}</span>\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"value\"\n [ngClass]=\"{\n 'is-invalid':\n submitted &&\n credential.get('value')\n .invalid\n }\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n </div>\n <div class=\"text-end mt-3\">\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"onCancel()\"\n (keydown.enter)=\"onCancel()\" >\n {{ 'Button.Back' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"!showForm\">\n <div class=\"row\">\n <div class=\"col-12 d-flex\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h2 class=\"mt-3\">Credentials</h2>\n </div>\n <div class=\"col-12 col-md-12 text-end\">\n <button class=\"btn btn-sm btn-outline-primary\"\n (click)=\"openCredentialsForAdd()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add Credential' }}\n </button>\n </div>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"row my-4\">\n <div class=\"col-12 col-md-6 col-xl-4 mt-3 credential-cards\"\n *ngFor=\"let credential of credentials\">\n <div class=\"card\">\n <h2 class=\"credential-field mt-3\">{{ credential.credential_name }}</h2>\n <div class=\"card-content\"\n *ngFor=\"let subscriptionCredential of credential.credentials\">\n <div class=\"card-header\">\n <div>\n <strong class=\"d-block\">{{ subscriptionCredential.field }}:</strong>\n <input class=\"credential-value\"\n [type]=\"\n credentialName === credential.credential_name\n ? 'text'\n : 'password'\n \"\n readonly\n #input\n [value]=\"subscriptionCredential?.value\" />\n </div>\n </div>\n <div class=\"card-footer\">\n <div class=\"float-end px-2\">\n <button class=\"btn btn-outline-primary me-2\"\n *ngIf=\"credentialName !== credential.credential_name\"\n (click)=\"revealCredentials(credential)\">\n {{\n 'User.Subscriptions.SubscriptionCredentials.RevealCredential'\n | transloco\n }}\n </button>\n <button class=\"btn btn-outline-primary me-2\"\n *ngIf=\"credentialName === credential.credential_name\"\n (click)=\"hideCredentials()\">\n {{\n 'User.Subscriptions.SubscriptionCredentials.HideCredential'\n | transloco\n }}\n </button>\n <a class=\"me-2 my-1\"\n aria-label=\"Edit Credential\"\n (click)=\"openCredentialsForEdit(credential.credential_name)\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"allSubscriptionCredentials?.length === 0 && isLoaded\"\n class=\"clearboth\">\n <pw-no-data [withImage]=\"true\" [message]=\"'User.Subscriptions.SubscriptionCredentials.NoDataMessage' | transloco\">\n </pw-no-data>\n </div>\n</ng-container>\n<!-- password validation modal for reveal Credential -->\n<pw-password-validation #passwordValidationModalForRevealCredential\n (successEvent)=\"showCredentials()\">\n</pw-password-validation>\n<!-- password validation modal for Edit Credential -->\n<pw-password-validation #passwordValidationModalForEditCredential\n (successEvent)=\"editCredentials()\">\n</pw-password-validation>\n<!-- password validation modal for Add Credential -->\n<pw-password-validation #passwordValidationModalForAddCredential\n (successEvent)=\"showEditForm()\">\n</pw-password-validation>\n", styles: [".credential-field{text-align:center}.card .card-header{padding:0 24px}.credentials-field{border:0}.credential-value{border:0;width:100%}.overflow-visible{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i7.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
685
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionCredentialComponent, selector: "pw-subscription-credential", viewQueries: [{ propertyName: "passwordValidationModalForRevealCredential", first: true, predicate: ["passwordValidationModalForRevealCredential"], descendants: true }, { propertyName: "passwordValidationModalForEditCredential", first: true, predicate: ["passwordValidationModalForEditCredential"], descendants: true }, { propertyName: "passwordValidationModalForAddCredential", first: true, predicate: ["passwordValidationModalForAddCredential"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\"\n *ngIf=\"showForm\">\n <div class=\"col-12 d-flex\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"onCancel()\"\n (keydown.enter)=\"onCancel()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>{{ data.length ? 'Edit' : 'Create new' }} Credential</span>\n </h3>\n </div>\n</div>\n<ng-container *ngIf=\"showForm\">\n <div class=\"container-fluid pw-tab\">\n <div class=\"p-2 mt-3\">\n <form>\n <div class=\"row mb-3\">\n <div class=\"col-12 col-md-4\"\n *ngIf=\"!isEdit && showForm\">\n <div class=\"mb-3\">\n <label for=\"credential\">Credential <span class=\"text-danger required-icon\">*</span> </label>\n <p-dropdown\n [options]=\"uniqueCredential\"\n [placeholder]=\"'Select credential'\"\n optionLabel=\"name\"\n optionValue=\"name\"\n (onChange)=\"selectedOption($event)\">\n </p-dropdown>\n </div>\n </div>\n\n <div class=\"col-12 col-md-4\"\n *ngIf=\"credentialsSelect?.length\">\n <div class=\"card pb-2 pt-2 overflow-visible\">\n <div class=\"card-content\">\n <div class=\"card-header\">\n <form [formGroup]=\"form\"\n novalidate\n (ngSubmit)=\"saveCredentials()\">\n <div formArrayName=\"credentials\">\n <div *ngFor=\"\n let credential of credentialsGroup.controls;\n let i = index\n \">\n <div [formGroupName]=\"i\">\n <div class=\"mb-3\">\n <pw-input-container label=\"{{\n credential.get('field').value\n }}\"\n [class.info-circle]=\"\n credential.get('description').value\n \"\n name=\"value\"\n errorMsg=\"Please enter value\">\n <span *ngIf=\"\n credential.get('description')\n .value\n \"\n class=\"tooltiptext gradient-custom-branding\">{{\n credential.get('description')\n .value\n }}</span>\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"value\"\n [ngClass]=\"{\n 'is-invalid':\n submitted &&\n credential.get('value')\n .invalid\n }\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n </div>\n <div class=\"text-end mt-3\">\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"onCancel()\"\n (keydown.enter)=\"onCancel()\" >\n {{ 'Button.Back' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"!showForm\">\n <div class=\"row\">\n <div class=\"col-12 d-flex\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h2 class=\"mt-3\">Credentials</h2>\n </div>\n <div class=\"col-12 col-md-12 text-end\">\n <button class=\"btn btn-sm btn-outline-primary\"\n (click)=\"openCredentialsForAdd()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add Credential' }}\n </button>\n </div>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"row my-4\">\n <div class=\"col-12 col-md-6 col-xl-4 mt-3 credential-cards\"\n *ngFor=\"let credential of credentials\">\n <div class=\"card\">\n <h2 class=\"credential-field mt-3\">{{ credential.credential_name }}</h2>\n <div class=\"card-content\"\n *ngFor=\"let subscriptionCredential of credential.credentials\">\n <div class=\"card-header\">\n <div>\n <strong class=\"d-block\">{{ subscriptionCredential.field }}:</strong>\n <input class=\"credential-value\"\n [type]=\"\n credentialName === credential.credential_name\n ? 'text'\n : 'password'\n \"\n readonly\n #input\n [value]=\"subscriptionCredential?.value\" />\n </div>\n </div>\n <div class=\"card-footer\">\n <div class=\"float-end px-2\">\n <button class=\"btn btn-outline-primary me-2\"\n *ngIf=\"credentialName !== credential.credential_name\"\n (click)=\"revealCredentials(credential)\">\n {{\n 'User.Subscriptions.SubscriptionCredentials.RevealCredential'\n | transloco\n }}\n </button>\n <button class=\"btn btn-outline-primary me-2\"\n *ngIf=\"credentialName === credential.credential_name\"\n (click)=\"hideCredentials()\">\n {{\n 'User.Subscriptions.SubscriptionCredentials.HideCredential'\n | transloco\n }}\n </button>\n <a class=\"me-2 my-1\"\n aria-label=\"Edit Credential\"\n (click)=\"openCredentialsForEdit(credential.credential_name)\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"allSubscriptionCredentials?.length === 0 && isLoaded\"\n class=\"clearboth\">\n <pw-no-data [withImage]=\"true\" [message]=\"'User.Subscriptions.SubscriptionCredentials.NoDataMessage' | transloco\">\n </pw-no-data>\n </div>\n</ng-container>\n<!-- password validation modal for reveal Credential -->\n<pw-password-validation #passwordValidationModalForRevealCredential\n (successEvent)=\"showCredentials()\">\n</pw-password-validation>\n<!-- password validation modal for Edit Credential -->\n<pw-password-validation #passwordValidationModalForEditCredential\n (successEvent)=\"editCredentials()\">\n</pw-password-validation>\n<!-- password validation modal for Add Credential -->\n<pw-password-validation #passwordValidationModalForAddCredential\n (successEvent)=\"showEditForm()\">\n</pw-password-validation>\n", styles: [".credential-field{text-align:center}.card .card-header{padding:0 24px}.credentials-field{border:0}.credential-value{border:0;width:100%}.overflow-visible{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i7.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
686
686
  }
687
687
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionCredentialComponent, decorators: [{
688
688
  type: Component,
@@ -786,7 +786,7 @@ class UpdatePaymentDetailsComponent extends AppBaseComponent {
786
786
  this.isChangePayment = value;
787
787
  }
788
788
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UpdatePaymentDetailsComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: i1$2.ScriptLoaderService }, { token: i1$2.ProductService }, { token: i1$2.SubscriptionService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
789
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UpdatePaymentDetailsComponent, selector: "pw-update-payment-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid\">\n <div class=\"card-block\">\n <div class=\"row\">\n <div class=\"col-lg-12 ps-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous float-start\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h4 class=\"form-section my-3\">\n <i class=\"ft-edit\" aria-hidden=\"true\"></i>\n Update Card Details\n </h4>\n </div>\n <div class=\"col-12 col-lg-6 mt-3 payment-left p-3 card\">\n <div class=\"card-body\">\n <div class=\"alert alert-danger\"\n *ngIf=\"errorMsg\">{{ errorMsg }}</div>\n <ng-template [ngIf]=\"!isChangePayment && cardDetails\">\n <pw-saved-card-details [data]=\"cardDetails\"\n (changeEvent)=\"onChange($event)\">\n </pw-saved-card-details>\n </ng-template>\n\n <ng-template [ngIf]=\"loading\">\n <div class=\"text-center\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n </ng-template>\n\n <ng-container *ngIf=\"(!cardDetails && !loading) || isChangePayment\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <h4 class=\"title\">New card?</h4>\n <div class=\"row\">\n <div class=\"col-md-9\">\n <div class=\"mb-3\">\n <label for=\"catdNumber\">Card Number</label>\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"card_number\"\n placeholder=\"Card Number\"\n name=\"card_number\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('card_number').touched &&\n form.get('card_number').errors?.required\n \">\n <span> Please enter card number. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-3\">\n <div class=\"mb-3\">\n <label for=\"cvc\">CVC</label>\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"cvc\"\n placeholder=\"CVC\"\n name=\"cvc\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('cvc').touched &&\n form.get('cvc').errors?.required\n \">\n <span> Please enter cvc number. </span>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <label class=\"sr-only\" for=\"Month\">Exp. Month</label>\n <p-dropdown\n [options]=\"months\"\n [appendTo]=\"'body'\"\n formControlName=\"exp_month\"\n [placeholder]=\"'Exp. Month'\"\n optionValue=\"value\"\n optionLabel=\"value\">\n </p-dropdown>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_month').touched &&\n form.get('exp_month').errors?.required\n \">\n <span> Please enter expiry month. </span>\n </div>\n </div>\n </div>\n\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <label class=\"sr-only\" for=\"Year\">Exp. Year</label>\n <p-dropdown\n [options]=\"years\"\n formControlName=\"exp_year\"\n [placeholder]=\"'Exp. Year'\"\n optionValue=\"value\"\n [appendTo]=\"'body'\"\n optionLabel=\"value\">\n </p-dropdown>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_year')?.touched &&\n form.get('exp_year')?.errors?.['required']\n \">\n <span> Please enter expiry year. </span>\n </div>\n </div>\n </div>\n\n <div class=\"col-12 text-center mt-4\">\n <img src=\"/assets/img/icons/powered_by_stripe_v2.png\"\n class=\"payment-provider\"\n alt=\"\" />\n </div>\n\n <div class=\"col-12 mt-4 text-end\">\n <button type=\"button\"\n (click)=\"cancel()\"\n class=\"btn btn-outline-default me-2\">\n Cancel\n </button>\n <button type=\"submit\"\n class=\"btn btn-primary\"\n [buttonBusy]=\"busy\">\n Submit\n </button>\n </div>\n </div>\n </form>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".card-block .payment-left{border:1px solid rgb(204,204,204);height:100%}.card-block .payment-left h4{border-bottom:1px solid rgb(0,0,0);font-size:1rem;font-weight:600;margin:0 0 20px;padding:0 0 5px;text-transform:uppercase}.payment-provider{width:30%}@media (max-width: 800px){.payment-provider{width:60%}}.card{width:50%}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: SavedCardDetailsComponent, selector: "pw-saved-card-details", inputs: ["data", "isChangePayment", "showNewCard"], outputs: ["changeEvent"] }] }); }
789
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UpdatePaymentDetailsComponent, selector: "pw-update-payment-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid\">\n <div class=\"card-block\">\n <div class=\"row\">\n <div class=\"col-lg-12 ps-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous float-start\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h4 class=\"form-section my-3\">\n <i class=\"ft-edit\" aria-hidden=\"true\"></i>\n Update Card Details\n </h4>\n </div>\n <div class=\"col-12 col-lg-6 mt-3 payment-left p-3 card\">\n <div class=\"card-body\">\n <div class=\"alert alert-danger\"\n *ngIf=\"errorMsg\">{{ errorMsg }}</div>\n <ng-template [ngIf]=\"!isChangePayment && cardDetails\">\n <pw-saved-card-details [data]=\"cardDetails\"\n (changeEvent)=\"onChange($event)\">\n </pw-saved-card-details>\n </ng-template>\n\n <ng-template [ngIf]=\"loading\">\n <div class=\"text-center\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n </ng-template>\n\n <ng-container *ngIf=\"(!cardDetails && !loading) || isChangePayment\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <h4 class=\"title\">New card?</h4>\n <div class=\"row\">\n <div class=\"col-md-9\">\n <div class=\"mb-3\">\n <label for=\"catdNumber\">Card Number</label>\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"card_number\"\n placeholder=\"Card Number\"\n name=\"card_number\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('card_number').touched &&\n form.get('card_number').errors?.required\n \">\n <span> Please enter card number. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-3\">\n <div class=\"mb-3\">\n <label for=\"cvc\">CVC</label>\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"cvc\"\n placeholder=\"CVC\"\n name=\"cvc\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('cvc').touched &&\n form.get('cvc').errors?.required\n \">\n <span> Please enter cvc number. </span>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <label class=\"sr-only\" for=\"Month\">Exp. Month</label>\n <p-dropdown\n [options]=\"months\"\n [appendTo]=\"'body'\"\n formControlName=\"exp_month\"\n [placeholder]=\"'Exp. Month'\"\n optionValue=\"value\"\n optionLabel=\"value\">\n </p-dropdown>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_month').touched &&\n form.get('exp_month').errors?.required\n \">\n <span> Please enter expiry month. </span>\n </div>\n </div>\n </div>\n\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <label class=\"sr-only\" for=\"Year\">Exp. Year</label>\n <p-dropdown\n [options]=\"years\"\n formControlName=\"exp_year\"\n [placeholder]=\"'Exp. Year'\"\n optionValue=\"value\"\n [appendTo]=\"'body'\"\n optionLabel=\"value\">\n </p-dropdown>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_year')?.touched &&\n form.get('exp_year')?.errors?.['required']\n \">\n <span> Please enter expiry year. </span>\n </div>\n </div>\n </div>\n\n <div class=\"col-12 text-center mt-4\">\n <img src=\"/assets/img/icons/powered_by_stripe_v2.png\"\n class=\"payment-provider\"\n alt=\"\" />\n </div>\n\n <div class=\"col-12 mt-4 text-end\">\n <button type=\"button\"\n (click)=\"cancel()\"\n class=\"btn btn-outline-default me-2\">\n Cancel\n </button>\n <button type=\"submit\"\n class=\"btn btn-primary\"\n [buttonBusy]=\"busy\">\n Submit\n </button>\n </div>\n </div>\n </form>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".card-block .payment-left{border:1px solid rgb(204,204,204);height:100%}.card-block .payment-left h4{border-bottom:1px solid rgb(0,0,0);font-size:1rem;font-weight:600;margin:0 0 20px;padding:0 0 5px;text-transform:uppercase}.payment-provider{width:30%}@media (max-width: 800px){.payment-provider{width:60%}}.card{width:50%}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: SavedCardDetailsComponent, selector: "pw-saved-card-details", inputs: ["data", "isChangePayment", "showNewCard"], outputs: ["changeEvent"] }] }); }
790
790
  }
791
791
  __decorate([
792
792
  ValidateForm('form'),
@@ -1051,7 +1051,7 @@ class UpgradeSubscriptionComponent extends AppBaseComponent {
1051
1051
  super.ngOnDestroy();
1052
1052
  }
1053
1053
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UpgradeSubscriptionComponent, deps: [{ token: i0.Injector }, { token: i1$2.ProductService }, { token: i2.UntypedFormBuilder }, { token: i1$1.NgbModal }, { token: i1$2.SubscriptionService }, { token: i4$1.Store }, { token: i1$2.ScriptLoaderService }], target: i0.ɵɵFactoryTarget.Component }); }
1054
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UpgradeSubscriptionComponent, selector: "pw-upgrade-subscription", viewQueries: [{ propertyName: "passwordValidationModal", first: true, predicate: ["passwordValidationModal"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<h4 class=\"form-section m-3\">\n <i class=\"ft-check-circle\" aria-hidden=\"true\"></i> {{ 'Button.Payment' | transloco }}\n</h4>\n<div class=\"card-block\">\n <!-- Show Payment Page when there is user.has_stripe_account===false -->\n <ng-container>\n <form class=\"form\"\n (ngSubmit)=\"attemptPurchase()\"\n [formGroup]=\"form\">\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"form-body p-3 payment-left card pb-0\">\n <div class=\"card-body\">\n <div class=\"row\"\n *ngIf=\"product?.max_units > 1\">\n <div class=\"col-12\">\n <div class=\"mb-3\">\n <h4 class=\"title\">\n {{ 'User.Subscriptions.LicensesRequired' | transloco }}\n </h4>\n <div class=\"row btns-row\">\n <div class=\"col-md-4 col-8\">\n <pw-number-picker name=\"number-picker\"\n [(value)]=\"units\"\n [min]=\"subscription.min_units || product.min_units\"\n [max]=\"product.max_units\"\n step=\"1\"\n postfix=\"Units\"\n placeholder=\"Total Licenses\"\n [inputReadOnly]=\"false\"\n size=\"small\"\n pickStartAfter=\"500\"\n pickTimer=\"100\"\n [arrowKeys]=\"true\"\n (minReached)=\"onMinReached($event)\"\n (maxReached)=\"onMaxReached($event)\"\n (valueChange)=\"onUnitChange($event)\">\n </pw-number-picker>\n </div>\n </div>\n <div class=\"text-center\">\n <small class=\"form-text text-muted danger\">\n {{ unitError }}\n </small>\n </div>\n </div>\n <p>\n If you proceed, your credit card will be charged\n <strong>{{ product.currency }}\n {{ totalAmount.toFixed(2) }}</strong>\n </p>\n </div>\n </div>\n <!-- Shows Saved Card: Shows when user has card details and not trying to update the card details -->\n <ng-template [ngIf]=\"cardDetails\">\n <pw-saved-card-details [data]=\"cardDetails\"\n (changeEvent)=\"showNewCard = $event\"\n [showNewCard]=\"showNewCard\">\n </pw-saved-card-details>\n </ng-template>\n <!-- Add New Payment Starts, opens up when user doesn't have stripe account or tries to change the\n card details -->\n <ng-template [ngIf]=\"(user && !cardDetails) || (cardDetails && showNewCard)\">\n <h4 class=\"title\">\n {{ 'User.Subscriptions.NewCard' | transloco }}?\n </h4>\n <div class=\"row\">\n <div class=\"col-md-9\">\n <div class=\"mb-3\">\n <label for=\"cardNumber\">{{\n 'User.Subscriptions.CardNumber' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"card_number\"\n placeholder=\"Card Number\"\n name=\"card_number\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('card_number').touched &&\n form.get('card_number').errors?.required\n \">\n <span> Please enter card number. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-3\">\n <div class=\"mb-3\">\n <label for=\"cvc\">{{\n 'User.Subscriptions.CVC' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"cvc\"\n placeholder=\"CVC\"\n name=\"cvc\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('cvc').touched &&\n form.get('cvc').errors?.required\n \">\n <span> Please enter cvc. </span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <label class=\"sr-only\" for=\"Month\">Exp. Month</label>\n <p-dropdown\n [options]=\"months\"\n formControlName=\"exp_month\"\n [placeholder]=\"'Exp. Month'\"\n optionValue=\"value\"\n [appendTo]=\"'body'\"\n optionLabel=\"value\">\n </p-dropdown>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_month').touched &&\n form.get('exp_month').errors?.required\n \">\n <span> Please enter expiry month. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <label class=\"sr-only\" for=\"Year\">Exp. Year</label>\n <p-dropdown\n [options]=\"years\"\n formControlName=\"exp_year\"\n [placeholder]=\"'Exp. Year'\"\n [appendTo]=\"'body'\"\n optionValue=\"value\"\n optionLabel=\"value\">\n </p-dropdown>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_year').touched &&\n form.get('exp_year').errors?.required\n \">\n <span> Please enter expiry year. </span>\n </div>\n </div>\n </div>\n <div class=\"col-12 mt-2\"\n *ngIf=\"cardDetails\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"showNewCard = false; onDiscardToggle()\">Disregard and pay with current registered card</a>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n <!-- Purchase Summary -->\n <div class=\"col-md-6\"\n *ngIf=\"product\">\n <div class=\"purchase-summary card p-3 payment-right\">\n <div class=\"card-body\">\n <h4 class=\"title\">{{ 'Label.PurchaseSummary' | transloco }}</h4>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Plan' | transloco }}:</div>\n <div class=\"summary-right\">{{ product.name }}</div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Price' | transloco }}:</div>\n <div class=\"summary-right\">\n {{ product.currency }}\n {{ (product.price_per_unit / 100).toFixed(2) }}\n </div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Seats' | transloco }}:</div>\n <div class=\"summary-right\">{{ form.get('units').value }}</div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Total' | transloco }}:</div>\n <div class=\"summary-right\">\n {{ product.currency }} {{ totalAmount.toFixed(2) }}\n </div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">\n {{ 'Label.Recurrency' | transloco }}:\n </div>\n <div class=\"summary-right\">{{ product.billing_frequency }}</div>\n </div>\n </div>\n <div class=\"text-center\">\n <hr />\n <p>\n By subscribing you acknowledge and accept our terms of service and\n privacy policy\n </p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 text-center mt-3\">\n <img src=\"/assets/img/icons/powered_by_stripe_v2.png\"\n class=\"payment-provider\"\n alt=\"\" />\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"form-actions text-end\">\n <button type=\"button\"\n class=\"btn btn-raised btn-outline-default me-1\"\n [disabled]=\"isPurchaseAttempted\"\n routerLink=\"/account/subscriptions\">\n <i class=\"ft-x\" aria-hidden=\"true\"></i>{{ 'Button.Back' | transloco }}\n </button>\n <button type=\"submit\"\n class=\"btn btn-raised btn-primary\"\n [disabled]=\"isPurchaseAttempted\"\n [buttonBusy]=\"busy\">\n <i class=\"ft-check\" aria-hidden=\"true\"></i>\n {{ 'Button.Purchase' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </form>\n </ng-container>\n</div>\n\n<pw-password-validation #passwordValidationModal\n (successEvent)=\"onValidatePassword($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p>\n If you proceed, your credit card will be charged\n <strong *ngIf=\"totalAmount\">{{ product.currency }} {{ totalAmount.toFixed(2) }}</strong>\n </p>\n </div>\n </div>\n</pw-password-validation>\n", styles: [".payment-left,.payment-right{border:1px solid rgb(204,204,204);height:100%}.payment-left h4,.payment-right h4{border-bottom:1px solid rgb(0,0,0);font-size:1rem;font-weight:600;margin:0 0 20px;padding:0 0 5px;text-transform:uppercase}.payment-left .summary-row.total,.payment-right .summary-row.total{padding:10px 0 0 10px}.payment-left .summary-row .summary-left,.payment-right .summary-row .summary-left{font-weight:600}.payment-provider{width:20%}@media (max-width: 800px){.payment-provider{width:60%}}.summary-left{-webkit-box-flex:1;color:#555;flex-grow:1;-ms-flex-positive:1;font-weight:200;text-align:left}.summary-left.plan{color:#c93f00;font-size:14px;margin:5px 0}.summary-right{-webkit-box-flex:1;-webkit-box-pack:end;color:#000;flex-grow:1;-ms-flex-pack:end;-ms-flex-positive:1;justify-content:flex-end;text-align:right}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7.NumberPickerComponent, selector: "pw-number-picker", inputs: ["min", "showTooltip", "tooltipText", "max", "step", "value", "pickStartAfter", "pickTimer", "prefix", "postfix", "placeholder", "buttonsOrientation", "size", "customClass", "mouseWheel", "arrowKeys", "inputReadOnly", "showUpButton", "showDownButton"], outputs: ["valueChange", "minReached", "maxReached", "pickStarted", "pickStopped", "pickUpStarted", "pickUpStopped", "pickDownStarted", "pickDownStopped"] }, { kind: "component", type: i7$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: SavedCardDetailsComponent, selector: "pw-saved-card-details", inputs: ["data", "isChangePayment", "showNewCard"], outputs: ["changeEvent"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
1054
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UpgradeSubscriptionComponent, selector: "pw-upgrade-subscription", viewQueries: [{ propertyName: "passwordValidationModal", first: true, predicate: ["passwordValidationModal"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<h4 class=\"form-section m-3\">\n <i class=\"ft-check-circle\" aria-hidden=\"true\"></i> {{ 'Button.Payment' | transloco }}\n</h4>\n<div class=\"card-block\">\n <!-- Show Payment Page when there is user.has_stripe_account===false -->\n <ng-container>\n <form class=\"form\"\n (ngSubmit)=\"attemptPurchase()\"\n [formGroup]=\"form\">\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"form-body p-3 payment-left card pb-0\">\n <div class=\"card-body\">\n <div class=\"row\"\n *ngIf=\"product?.max_units > 1\">\n <div class=\"col-12\">\n <div class=\"mb-3\">\n <h4 class=\"title\">\n {{ 'User.Subscriptions.LicensesRequired' | transloco }}\n </h4>\n <div class=\"row btns-row\">\n <div class=\"col-md-4 col-8\">\n <pw-number-picker name=\"number-picker\"\n [(value)]=\"units\"\n [min]=\"subscription.min_units || product.min_units\"\n [max]=\"product.max_units\"\n step=\"1\"\n postfix=\"Units\"\n placeholder=\"Total Licenses\"\n [inputReadOnly]=\"false\"\n size=\"small\"\n pickStartAfter=\"500\"\n pickTimer=\"100\"\n [arrowKeys]=\"true\"\n (minReached)=\"onMinReached($event)\"\n (maxReached)=\"onMaxReached($event)\"\n (valueChange)=\"onUnitChange($event)\">\n </pw-number-picker>\n </div>\n </div>\n <div class=\"text-center\">\n <small class=\"form-text text-muted danger\">\n {{ unitError }}\n </small>\n </div>\n </div>\n <p>\n If you proceed, your credit card will be charged\n <strong>{{ product.currency }}\n {{ totalAmount.toFixed(2) }}</strong>\n </p>\n </div>\n </div>\n <!-- Shows Saved Card: Shows when user has card details and not trying to update the card details -->\n <ng-template [ngIf]=\"cardDetails\">\n <pw-saved-card-details [data]=\"cardDetails\"\n (changeEvent)=\"showNewCard = $event\"\n [showNewCard]=\"showNewCard\">\n </pw-saved-card-details>\n </ng-template>\n <!-- Add New Payment Starts, opens up when user doesn't have stripe account or tries to change the\n card details -->\n <ng-template [ngIf]=\"(user && !cardDetails) || (cardDetails && showNewCard)\">\n <h4 class=\"title\">\n {{ 'User.Subscriptions.NewCard' | transloco }}?\n </h4>\n <div class=\"row\">\n <div class=\"col-md-9\">\n <div class=\"mb-3\">\n <label for=\"cardNumber\">{{\n 'User.Subscriptions.CardNumber' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"card_number\"\n placeholder=\"Card Number\"\n name=\"card_number\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('card_number').touched &&\n form.get('card_number').errors?.required\n \">\n <span> Please enter card number. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-3\">\n <div class=\"mb-3\">\n <label for=\"cvc\">{{\n 'User.Subscriptions.CVC' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"cvc\"\n placeholder=\"CVC\"\n name=\"cvc\" />\n <div class=\"danger\"\n *ngIf=\"\n form.get('cvc').touched &&\n form.get('cvc').errors?.required\n \">\n <span> Please enter cvc. </span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <label class=\"sr-only\" for=\"Month\">Exp. Month</label>\n <p-dropdown\n [options]=\"months\"\n formControlName=\"exp_month\"\n [placeholder]=\"'Exp. Month'\"\n optionValue=\"value\"\n [appendTo]=\"'body'\"\n optionLabel=\"value\">\n </p-dropdown>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_month').touched &&\n form.get('exp_month').errors?.required\n \">\n <span> Please enter expiry month. </span>\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"mb-3\">\n <label class=\"sr-only\" for=\"Year\">Exp. Year</label>\n <p-dropdown\n [options]=\"years\"\n formControlName=\"exp_year\"\n [placeholder]=\"'Exp. Year'\"\n [appendTo]=\"'body'\"\n optionValue=\"value\"\n optionLabel=\"value\">\n </p-dropdown>\n <div class=\"danger\"\n *ngIf=\"\n form.get('exp_year').touched &&\n form.get('exp_year').errors?.required\n \">\n <span> Please enter expiry year. </span>\n </div>\n </div>\n </div>\n <div class=\"col-12 mt-2\"\n *ngIf=\"cardDetails\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"showNewCard = false; onDiscardToggle()\">Disregard and pay with current registered card</a>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n <!-- Purchase Summary -->\n <div class=\"col-md-6\"\n *ngIf=\"product\">\n <div class=\"purchase-summary card p-3 payment-right\">\n <div class=\"card-body\">\n <h4 class=\"title\">{{ 'Label.PurchaseSummary' | transloco }}</h4>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Plan' | transloco }}:</div>\n <div class=\"summary-right\">{{ product.name }}</div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Price' | transloco }}:</div>\n <div class=\"summary-right\">\n {{ product.currency }}\n {{ (product.price_per_unit / 100).toFixed(2) }}\n </div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Seats' | transloco }}:</div>\n <div class=\"summary-right\">{{ form.get('units').value }}</div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">{{ 'Label.Total' | transloco }}:</div>\n <div class=\"summary-right\">\n {{ product.currency }} {{ totalAmount.toFixed(2) }}\n </div>\n </div>\n <div class=\"summary-row d-flex mb-2\">\n <div class=\"summary-left\">\n {{ 'Label.Recurrency' | transloco }}:\n </div>\n <div class=\"summary-right\">{{ product.billing_frequency }}</div>\n </div>\n </div>\n <div class=\"text-center\">\n <hr />\n <p>\n By subscribing you acknowledge and accept our terms of service and\n privacy policy\n </p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 text-center mt-3\">\n <img src=\"/assets/img/icons/powered_by_stripe_v2.png\"\n class=\"payment-provider\"\n alt=\"\" />\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"form-actions text-end\">\n <button type=\"button\"\n class=\"btn btn-raised btn-outline-default me-1\"\n [disabled]=\"isPurchaseAttempted\"\n routerLink=\"/account/subscriptions\">\n <i class=\"ft-x\" aria-hidden=\"true\"></i>{{ 'Button.Back' | transloco }}\n </button>\n <button type=\"submit\"\n class=\"btn btn-raised btn-primary\"\n [disabled]=\"isPurchaseAttempted\"\n [buttonBusy]=\"busy\">\n <i class=\"ft-check\" aria-hidden=\"true\"></i>\n {{ 'Button.Purchase' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </form>\n </ng-container>\n</div>\n\n<pw-password-validation #passwordValidationModal\n (successEvent)=\"onValidatePassword($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p>\n If you proceed, your credit card will be charged\n <strong *ngIf=\"totalAmount\">{{ product.currency }} {{ totalAmount.toFixed(2) }}</strong>\n </p>\n </div>\n </div>\n</pw-password-validation>\n", styles: [".payment-left,.payment-right{border:1px solid rgb(204,204,204);height:100%}.payment-left h4,.payment-right h4{border-bottom:1px solid rgb(0,0,0);font-size:1rem;font-weight:600;margin:0 0 20px;padding:0 0 5px;text-transform:uppercase}.payment-left .summary-row.total,.payment-right .summary-row.total{padding:10px 0 0 10px}.payment-left .summary-row .summary-left,.payment-right .summary-row .summary-left{font-weight:600}.payment-provider{width:20%}@media (max-width: 800px){.payment-provider{width:60%}}.summary-left{-webkit-box-flex:1;color:#555;flex-grow:1;-ms-flex-positive:1;font-weight:200;text-align:left}.summary-left.plan{color:#c93f00;font-size:14px;margin:5px 0}.summary-right{-webkit-box-flex:1;-webkit-box-pack:end;color:#000;flex-grow:1;-ms-flex-pack:end;-ms-flex-positive:1;justify-content:flex-end;text-align:right}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7.NumberPickerComponent, selector: "pw-number-picker", inputs: ["min", "showTooltip", "tooltipText", "max", "step", "value", "pickStartAfter", "pickTimer", "prefix", "postfix", "placeholder", "buttonsOrientation", "size", "customClass", "mouseWheel", "arrowKeys", "inputReadOnly", "showUpButton", "showDownButton"], outputs: ["valueChange", "minReached", "maxReached", "pickStarted", "pickStopped", "pickUpStarted", "pickUpStopped", "pickDownStarted", "pickDownStopped"] }, { kind: "component", type: i7$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: SavedCardDetailsComponent, selector: "pw-saved-card-details", inputs: ["data", "isChangePayment", "showNewCard"], outputs: ["changeEvent"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
1055
1055
  }
1056
1056
  __decorate([
1057
1057
  ValidateForm('form'),
@@ -1272,7 +1272,7 @@ class UserSubscriptionDetailsComponent extends AppBaseComponent {
1272
1272
  this.allowUpdate = false;
1273
1273
  }
1274
1274
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UserSubscriptionDetailsComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: i1$2.GeoService }, { token: i1$1.NgbModal }, { token: i1$2.SubscriptionService }, { token: i4$1.Store }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
1275
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UserSubscriptionDetailsComponent, selector: "ng-component", viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- edit Subscription details page -->\n<div class=\"row\">\n <div class=\"col-12\">\n <h3 class=\"my-3\">{{ subscription?.organisation || subscription?.contact_name }}</h3>\n </div>\n</div>\n\n<div class=\"row\"\n *ngIf=\"subscription\">\n <div class=\"col-md-6\">\n <div class=\"text-center mt-5\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\">Full Logo\n <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\"\n [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"fas fa-info-circle\"></i>\n </span>\n </h4>\n <img [src]=\"fullLogo\"\n alt=\"full logo\"\n width=\"100%\"\n class=\"image full-logo\"\n height=\"100%\"\n role=\"presentation\"\n onerror=\"this.onerror=null;this.src='assets/img/icons/dummy-logo.jpg';\" />\n <div class=\"overlay mt-2\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"text-center mt-5\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\">Squared Logo\n <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\"\n [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"fas fa-info-circle\"></i>\n </span>\n </h4>\n <img [src]=\"squaredLogo\"\n alt=\"Squared Presentation\"\n width=\"150\"\n class=\"squared_logo\"\n [height]=\"'150'\"\n role=\"presentation\"\n onerror=\"this.onerror=null;this.src='assets/img/icons/dummy-icon.jpg';\" />\n <div class=\"overlay mt-2\"\n (keydown.enter)=\"openModal(squaredLogoContent)\"\n (click)=\"openModal(squaredLogoContent)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n<div class=\"row\">\n <div class=\"col-12\">\n <small *ngIf=\"subscription?.trial_subscription && subscription?.calculated_price\"\n class=\"text-danger\">Upgrade to be able to update your purchased seats</small>\n </div>\n</div>\n<div class=\"row btns-row align-items-center\">\n <div class=\"col-md-3 col-8\"\n *ngIf=\"subscription\">\n <pw-number-picker [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.Seats'|transloco\"\n name=\"number-picker\"\n [(value)]=\"units\"\n [min]=\"subscription?.min_units||subscription?.products[0].min_units\"\n [max]=\"subscription?.products[0].max_units\"\n step=\"1\"\n postfix=\"seats\"\n placeholder=\"Total Licences\"\n [inputReadOnly]=\"subscription?.products[0].trial_subscription\"\n [showUpButton]=\"!subscription?.products[0].trial_subscription\"\n [showDownButton]=\"!subscription?.products[0].trial_subscription\"\n size=\"small\"\n pickStartAfter=\"500\"\n pickTimer=\"100\"\n [arrowKeys]=\"true\"\n (minReached)=\"onMinReached($event)\"\n (maxReached)=\"onMaxReached($event)\"\n (valueChange)=\"onUnitChange($event)\">\n </pw-number-picker>\n </div>\n\n <div class=\"col-md-3 col-4 p-1\"\n *ngIf=\"subscription\">\n\n <ng-template [ngIf]=\"!subscription?.products[0].trial_subscription && allowUpdate\"\n [ngIfElse]=\"nonPaidRef\">\n <button class=\"btn btn-primary\"\n (click)=\"updateUnits()\">\n {{ 'User.Subscriptions.UpdateUnits' | transloco }}\n </button>\n </ng-template>\n <ng-template #nonPaidRef>\n <div>\n <small class=\"danger\"\n *ngIf=\"subscription?.products[0].trial_subscription\">Update seats is available only to paid subscriptions</small>\n </div>\n </ng-template>\n </div>\n\n <div class=\"col-12 col-md-6\"\n *ngIf=\"hasUnitChanged\">\n <table class=\"table table-borderless table-sm\"\n aria-describedby=\"Product details\">\n <thead>\n <tr>\n <th scope=\"true\">Product</th>\n <th scope=\"true\">Price per seat <span>({{subscription?.products[0]?.currency|currencySymbol}})</span></th>\n <th scope=\"true\">Seats</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let product of subscription.products; trackBy: trackByProduct\">\n <td>{{ product.name }}</td>\n <td>{{ product.price_per_unit / 100 }}</td>\n <td>{{ units }}</td>\n </tr>\n </tbody>\n </table>\n <p>\n If you proceed, the new cost for your subscription will be\n <strong>{{ totalAmount()| currency: subscription?.products[0]?.currency:'symbol-narrow'}}</strong>\n </p>\n </div>\n</div>\n<form [formGroup]=\"form\"\n (ngSubmit)=\"onSaveDetails()\"\n class=\"row mt-4\"\n *ngIf=\"subscription\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.ContactName' | transloco\"\n class=\"col-md-6\"\n label=\"Contact Name\"\n name=\"contact_name\"\n errorMsg=\"Please enter Contact Name\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"contact_name\" />\n </pw-input-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.ContactEmail' | transloco\"\n class=\"col-md-6\"\n label=\"Contact Email\"\n name=\"contact_email\"\n errorMsg=\"Please enter Contact Email\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"contact_email\" />\n </pw-input-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.Organization' | transloco\"\n class=\"col-md-6\"\n label=\"Organisation\"\n name=\"organisation\"\n errorMsg=\"Please enter organisation\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"organisation\" />\n </pw-input-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.Phone' | transloco\"\n class=\"col-md-6\"\n label=\"Contact Tel\"\n name=\"contact_tel\"\n errorMsg=\"Please enter Contact Telephone Number\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"contact_tel\" />\n </pw-input-container>\n <ng-container *ngIf=\"countries$ | async as countries\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.Country' | transloco\"\n class=\"col-md-6\"\n label=\"Country\"\n name=\"country_code\"\n [isLeftTooltip]=\"true\"\n errorMsg=\"Please select a country\">\n <p-dropdown\n id=\"country\"\n [options]=\"countries\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"country_code\"\n placeholder=\"Select Country\">\n </p-dropdown>\n </pw-input-container>\n </ng-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.Address' | transloco\"\n class=\"col-md-6\"\n label=\"Address\"\n name=\"address\"\n errorMsg=\"Please enter address\">\n <input ngx-gp-autocomplete\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"address\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </pw-input-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.VatNumber' | transloco\"\n class=\"col-md-6\"\n label=\"GST/VAT Number\"\n name=\"tax_id\"\n errorMsg=\"Please enter GST/VAT Number\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"tax_id\" />\n </pw-input-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n class=\"col-md-6\"\n label=\"Company URL\"\n name=\"company_url\"\n errorMsg=\"Please enter company url\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"company_url\" />\n </pw-input-container>\n\n <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <div class=\"col-12\">\n <h3>Social Media</h3>\n <p>\n Any of the social media handles that you set here will appear in the footer of emails going out to your child subscriptions.\n </p>\n </div>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.FacebookHandle' | transloco\"\n class=\"col-md-6\"\n label=\"Facebook handle\"\n name=\"facebook_handle\"\n errorMsg=\"Please enter facebook id\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"facebook_handle\" />\n </pw-input-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.TwitterHandle' | transloco\"\n class=\"col-md-6\"\n label=\"Twitter handle\"\n name=\"twitter_handle\"\n errorMsg=\"Please enter twitter id\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"twitter_handle\" />\n </pw-input-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.LinkedinHandle' | transloco\"\n class=\"col-md-6\"\n label=\"Linkedin handle\"\n name=\"linkedin_handle\"\n errorMsg=\"Please enter linkedin id\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"linkedin_handle\" />\n </pw-input-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.RedditHandle' | transloco\"\n class=\"col-md-6\"\n label=\"Reddit handle\"\n name=\"reddit_handle\"\n errorMsg=\"Please enter reddit id\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"reddit_handle\" />\n </pw-input-container>\n </ng-container>\n\n <ng-container *ngIf=\"subscription?.api_hits_max > 0\">\n <div class=\"col-12\">\n <h3>{{ 'User.Subscriptions.APICredentials.Title' | transloco }}</h3>\n <p>\n Manage your {{appConfig?.company?.name}} API credentials. These tokens are used to authenticate API requests.\n </p>\n </div>\n <div class=\"col-md-6\">\n <div class=\"form-group\">\n <label class=\"form-label\">{{ 'User.Subscriptions.APICredentials.AccessToken' | transloco }}</label>\n <div class=\"input-group\">\n <input type=\"text\"\n class=\"form-control\"\n [value]=\"showApiToken ? subscription?.api_access_token || ('User.Subscriptions.APICredentials.NoTokenAvailable' | transloco) : '*************************'\"\n readonly />\n <button type=\"button\"\n class=\"btn btn-outline-secondary\"\n (click)=\"toggleApiTokenVisibility()\">\n {{ showApiToken ? ('User.Subscriptions.APICredentials.Hide' | transloco) : ('User.Subscriptions.APICredentials.View' | transloco) }}\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"form-group\">\n <label class=\"form-label\">{{ 'User.Subscriptions.APICredentials.ClientId' | transloco }}</label>\n <div class=\"input-group\">\n <input type=\"text\"\n class=\"form-control\"\n [value]=\"showApiClientId ? subscription?.api_client_id || ('User.Subscriptions.APICredentials.NoClientIdAvailable' | transloco) : '*************************'\"\n readonly />\n <button type=\"button\"\n class=\"btn btn-outline-secondary\"\n (click)=\"toggleApiClientIdVisibility()\">\n {{ showApiClientId ? ('User.Subscriptions.APICredentials.Hide' | transloco) : ('User.Subscriptions.APICredentials.View' | transloco) }}\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-12 mt-3\">\n <div class=\"d-flex align-items-center gap-3\">\n <button type=\"button\"\n class=\"btn btn-warning\"\n (click)=\"refreshApiTokens()\"\n [disabled]=\"refreshingTokens\">\n <i class=\"fas fa-sync-alt me-2\" [class.fa-spin]=\"refreshingTokens\"></i>\n {{ refreshingTokens ? ('User.Subscriptions.APICredentials.Refreshing' | transloco) : ('User.Subscriptions.APICredentials.RefreshTokens' | transloco) }}\n </button>\n\n <div class=\"d-flex align-items-center gap-2\">\n <ng-container *ngIf=\"subscription?.api_hits !== null\">\n <span class=\"text-muted\">{{ 'User.Subscriptions.APICredentials.ApiHits' | transloco }}:</span>\n <span class=\"fw-bold\">{{ subscription.api_hits | number }}</span>\n </ng-container>\n\n <ng-container *ngIf=\"subscription?.api_hits_max !== null\">\n <span class=\"text-muted\">{{ 'User.Subscriptions.APICredentials.ApiHitsMax' | transloco }}:</span>\n <span class=\"fw-bold\">{{ subscription.api_hits_max | number }}</span>\n </ng-container>\n\n <!-- Show utilization percentage when both values exist -->\n <ng-container *ngIf=\"subscription?.api_hits !== null || subscription?.api_hits_max !== null\">\n <span class=\"text-muted ms-2\">(</span>\n <span class=\"fw-bold\" [ngClass]=\"{\n 'text-success': (subscription.api_hits / subscription.api_hits_max) <= 0.8,\n 'text-warning': (subscription.api_hits / subscription.api_hits_max) > 0.8 && (subscription.api_hits / subscription.api_hits_max) <= 0.9,\n 'text-danger': (subscription.api_hits / subscription.api_hits_max) > 0.9\n }\">\n {{ (subscription.api_hits / subscription.api_hits_max * 100) | number:'1.0-0' }}% consumed\n </span>\n <span class=\"text-muted\">)</span>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"col-12 mt-5\">\n <h3>Security</h3>\n <p>\n While we'll add more security options in the future, please start by enforcing 2FA for all your subscription members.\n </p>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container label=\"Enforce 2FA\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.Enforce2fa' | transloco\"\n name=\"enforce_2fa\">\n <ui-switch formControlName=\"enforce_2fa\"\n name=\"enforce_2fa\"> </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n routerLink=\"/account/subscriptions\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button name=\"submit\"\n type=\"submit\"\n [buttonBusy]=\"busyButton\"\n class=\"btn btn-primary\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n</form>\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile\n (imageSelectionEvent)=\"onImageSelection($event)\"\n aspectRatio=\"fullLogo\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n<ng-template #squaredLogoContent\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile\n (imageSelectionEvent)=\"uploadSquaredLogo($event)\"\n aspectRatio=\"auto\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n<pw-password-validation #modal\n (successEvent)=\"onPasswordValidation($event)\"> </pw-password-validation>\n", styles: [".sub-header{color:gray;font-size:20px;font-weight:600}.full-logo{object-fit:cover;width:280px}@media only screen and (max-width: 767px){.btns-row .btn-primary{font-size:.8rem;margin-top:5px;padding:.375rem .5rem}}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i4.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i7.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "component", type: i7.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i7.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i7.NumberPickerComponent, selector: "pw-number-picker", inputs: ["min", "showTooltip", "tooltipText", "max", "step", "value", "pickStartAfter", "pickTimer", "prefix", "postfix", "placeholder", "buttonsOrientation", "size", "customClass", "mouseWheel", "arrowKeys", "inputReadOnly", "showUpButton", "showDownButton"], outputs: ["valueChange", "minReached", "maxReached", "pickStarted", "pickStopped", "pickUpStarted", "pickUpStopped", "pickDownStarted", "pickDownStopped"] }, { kind: "component", type: i11$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i7$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i6$1.CurrencySymbolPipe, name: "currencySymbol" }] }); }
1275
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UserSubscriptionDetailsComponent, selector: "ng-component", viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- edit Subscription details page -->\n<div class=\"row\">\n <div class=\"col-12\">\n <h3 class=\"my-3\">{{ subscription?.organisation || subscription?.contact_name }}</h3>\n </div>\n</div>\n\n<div class=\"row\"\n *ngIf=\"subscription\">\n <div class=\"col-md-6\">\n <div class=\"text-center mt-5\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\">Full Logo\n <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\"\n [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"fas fa-info-circle\"></i>\n </span>\n </h4>\n <img [src]=\"fullLogo\"\n alt=\"full logo\"\n width=\"100%\"\n class=\"image full-logo\"\n height=\"100%\"\n role=\"presentation\"\n onerror=\"this.onerror=null;this.src='assets/img/icons/dummy-logo.jpg';\" />\n <div class=\"overlay mt-2\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"text-center mt-5\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\">Squared Logo\n <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\"\n [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"fas fa-info-circle\"></i>\n </span>\n </h4>\n <img [src]=\"squaredLogo\"\n alt=\"Squared Presentation\"\n width=\"150\"\n class=\"squared_logo\"\n [height]=\"'150'\"\n role=\"presentation\"\n onerror=\"this.onerror=null;this.src='assets/img/icons/dummy-icon.jpg';\" />\n <div class=\"overlay mt-2\"\n (keydown.enter)=\"openModal(squaredLogoContent)\"\n (click)=\"openModal(squaredLogoContent)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n<div class=\"row\">\n <div class=\"col-12\">\n <small *ngIf=\"subscription?.trial_subscription && subscription?.calculated_price\"\n class=\"text-danger\">Upgrade to be able to update your purchased seats</small>\n </div>\n</div>\n<div class=\"row btns-row align-items-center\">\n <div class=\"col-md-3 col-8\"\n *ngIf=\"subscription\">\n <pw-number-picker [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.Seats'|transloco\"\n name=\"number-picker\"\n [(value)]=\"units\"\n [min]=\"subscription?.min_units||subscription?.products[0].min_units\"\n [max]=\"subscription?.products[0].max_units\"\n step=\"1\"\n postfix=\"seats\"\n placeholder=\"Total Licences\"\n [inputReadOnly]=\"subscription?.products[0].trial_subscription\"\n [showUpButton]=\"!subscription?.products[0].trial_subscription\"\n [showDownButton]=\"!subscription?.products[0].trial_subscription\"\n size=\"small\"\n pickStartAfter=\"500\"\n pickTimer=\"100\"\n [arrowKeys]=\"true\"\n (minReached)=\"onMinReached($event)\"\n (maxReached)=\"onMaxReached($event)\"\n (valueChange)=\"onUnitChange($event)\">\n </pw-number-picker>\n </div>\n\n <div class=\"col-md-3 col-4 p-1\"\n *ngIf=\"subscription\">\n\n <ng-template [ngIf]=\"!subscription?.products[0].trial_subscription && allowUpdate\"\n [ngIfElse]=\"nonPaidRef\">\n <button class=\"btn btn-primary\"\n (click)=\"updateUnits()\">\n {{ 'User.Subscriptions.UpdateUnits' | transloco }}\n </button>\n </ng-template>\n <ng-template #nonPaidRef>\n <div>\n <small class=\"danger\"\n *ngIf=\"subscription?.products[0].trial_subscription\">Update seats is available only to paid subscriptions</small>\n </div>\n </ng-template>\n </div>\n\n <div class=\"col-12 col-md-6\"\n *ngIf=\"hasUnitChanged\">\n <table class=\"table table-borderless table-sm\"\n aria-describedby=\"Product details\">\n <thead>\n <tr>\n <th scope=\"true\">Product</th>\n <th scope=\"true\">Price per seat <span>({{subscription?.products[0]?.currency|currencySymbol}})</span></th>\n <th scope=\"true\">Seats</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let product of subscription.products; trackBy: trackByProduct\">\n <td>{{ product.name }}</td>\n <td>{{ product.price_per_unit / 100 }}</td>\n <td>{{ units }}</td>\n </tr>\n </tbody>\n </table>\n <p>\n If you proceed, the new cost for your subscription will be\n <strong>{{ totalAmount()| currency: subscription?.products[0]?.currency:'symbol-narrow'}}</strong>\n </p>\n </div>\n</div>\n<form [formGroup]=\"form\"\n (ngSubmit)=\"onSaveDetails()\"\n class=\"row mt-4\"\n *ngIf=\"subscription\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.ContactName' | transloco\"\n class=\"col-md-6\"\n label=\"Contact Name\"\n name=\"contact_name\"\n errorMsg=\"Please enter Contact Name\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"contact_name\" />\n </pw-input-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.ContactEmail' | transloco\"\n class=\"col-md-6\"\n label=\"Contact Email\"\n name=\"contact_email\"\n errorMsg=\"Please enter Contact Email\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"contact_email\" />\n </pw-input-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.Organization' | transloco\"\n class=\"col-md-6\"\n label=\"Organisation\"\n name=\"organisation\"\n errorMsg=\"Please enter organisation\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"organisation\" />\n </pw-input-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.Phone' | transloco\"\n class=\"col-md-6\"\n label=\"Contact Tel\"\n name=\"contact_tel\"\n errorMsg=\"Please enter Contact Telephone Number\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"contact_tel\" />\n </pw-input-container>\n <ng-container *ngIf=\"countries$ | async as countries\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.Country' | transloco\"\n class=\"col-md-6\"\n label=\"Country\"\n name=\"country_code\"\n [isLeftTooltip]=\"true\"\n errorMsg=\"Please select a country\">\n <p-dropdown\n id=\"country\"\n [options]=\"countries\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"country_code\"\n placeholder=\"Select Country\">\n </p-dropdown>\n </pw-input-container>\n </ng-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.Address' | transloco\"\n class=\"col-md-6\"\n label=\"Address\"\n name=\"address\"\n errorMsg=\"Please enter address\">\n <input ngx-gp-autocomplete\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"address\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </pw-input-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.VatNumber' | transloco\"\n class=\"col-md-6\"\n label=\"GST/VAT Number\"\n name=\"tax_id\"\n errorMsg=\"Please enter GST/VAT Number\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"tax_id\" />\n </pw-input-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n class=\"col-md-6\"\n label=\"Company URL\"\n name=\"company_url\"\n errorMsg=\"Please enter company url\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"company_url\" />\n </pw-input-container>\n\n <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <div class=\"col-12\">\n <h3>Social Media</h3>\n <p>\n Any of the social media handles that you set here will appear in the footer of emails going out to your child subscriptions.\n </p>\n </div>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.FacebookHandle' | transloco\"\n class=\"col-md-6\"\n label=\"Facebook handle\"\n name=\"facebook_handle\"\n errorMsg=\"Please enter facebook id\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"facebook_handle\" />\n </pw-input-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.TwitterHandle' | transloco\"\n class=\"col-md-6\"\n label=\"Twitter handle\"\n name=\"twitter_handle\"\n errorMsg=\"Please enter twitter id\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"twitter_handle\" />\n </pw-input-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.LinkedinHandle' | transloco\"\n class=\"col-md-6\"\n label=\"Linkedin handle\"\n name=\"linkedin_handle\"\n errorMsg=\"Please enter linkedin id\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"linkedin_handle\" />\n </pw-input-container>\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.RedditHandle' | transloco\"\n class=\"col-md-6\"\n label=\"Reddit handle\"\n name=\"reddit_handle\"\n errorMsg=\"Please enter reddit id\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"reddit_handle\" />\n </pw-input-container>\n </ng-container>\n\n <ng-container *ngIf=\"subscription?.api_hits_max > 0\">\n <div class=\"col-12\">\n <h3>{{ 'User.Subscriptions.APICredentials.Title' | transloco }}</h3>\n <p>\n Manage your {{appConfig?.company?.name}} API credentials. These tokens are used to authenticate API requests.\n </p>\n </div>\n <div class=\"col-md-6\">\n <div class=\"form-group\">\n <label class=\"form-label\">{{ 'User.Subscriptions.APICredentials.AccessToken' | transloco }}</label>\n <div class=\"input-group\">\n <input type=\"text\"\n class=\"form-control\"\n [value]=\"showApiToken ? subscription?.api_access_token || ('User.Subscriptions.APICredentials.NoTokenAvailable' | transloco) : '*************************'\"\n readonly />\n <button type=\"button\"\n class=\"btn btn-outline-secondary\"\n (click)=\"toggleApiTokenVisibility()\">\n {{ showApiToken ? ('User.Subscriptions.APICredentials.Hide' | transloco) : ('User.Subscriptions.APICredentials.View' | transloco) }}\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"form-group\">\n <label class=\"form-label\">{{ 'User.Subscriptions.APICredentials.ClientId' | transloco }}</label>\n <div class=\"input-group\">\n <input type=\"text\"\n class=\"form-control\"\n [value]=\"showApiClientId ? subscription?.api_client_id || ('User.Subscriptions.APICredentials.NoClientIdAvailable' | transloco) : '*************************'\"\n readonly />\n <button type=\"button\"\n class=\"btn btn-outline-secondary\"\n (click)=\"toggleApiClientIdVisibility()\">\n {{ showApiClientId ? ('User.Subscriptions.APICredentials.Hide' | transloco) : ('User.Subscriptions.APICredentials.View' | transloco) }}\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-12 mt-3\">\n <div class=\"d-flex align-items-center gap-3\">\n <button type=\"button\"\n class=\"btn btn-warning\"\n (click)=\"refreshApiTokens()\"\n [disabled]=\"refreshingTokens\">\n <i class=\"fas fa-sync-alt me-2\" [class.fa-spin]=\"refreshingTokens\"></i>\n {{ refreshingTokens ? ('User.Subscriptions.APICredentials.Refreshing' | transloco) : ('User.Subscriptions.APICredentials.RefreshTokens' | transloco) }}\n </button>\n\n <div class=\"d-flex align-items-center gap-2\">\n <ng-container *ngIf=\"subscription?.api_hits !== null\">\n <span class=\"text-muted\">{{ 'User.Subscriptions.APICredentials.ApiHits' | transloco }}:</span>\n <span class=\"fw-bold\">{{ subscription.api_hits | number }}</span>\n </ng-container>\n\n <ng-container *ngIf=\"subscription?.api_hits_max !== null\">\n <span class=\"text-muted\">{{ 'User.Subscriptions.APICredentials.ApiHitsMax' | transloco }}:</span>\n <span class=\"fw-bold\">{{ subscription.api_hits_max | number }}</span>\n </ng-container>\n\n <!-- Show utilization percentage when both values exist -->\n <ng-container *ngIf=\"subscription?.api_hits !== null || subscription?.api_hits_max !== null\">\n <span class=\"text-muted ms-2\">(</span>\n <span class=\"fw-bold\" [ngClass]=\"{\n 'text-success': (subscription.api_hits / subscription.api_hits_max) <= 0.8,\n 'text-warning': (subscription.api_hits / subscription.api_hits_max) > 0.8 && (subscription.api_hits / subscription.api_hits_max) <= 0.9,\n 'text-danger': (subscription.api_hits / subscription.api_hits_max) > 0.9\n }\">\n {{ (subscription.api_hits / subscription.api_hits_max * 100) | number:'1.0-0' }}% consumed\n </span>\n <span class=\"text-muted\">)</span>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"col-12 mt-5\">\n <h3>Security</h3>\n <p>\n While we'll add more security options in the future, please start by enforcing 2FA for all your subscription members.\n </p>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container label=\"Enforce 2FA\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'User.Subscriptions.Tooltip.Enforce2fa' | transloco\"\n name=\"enforce_2fa\">\n <ui-switch formControlName=\"enforce_2fa\"\n name=\"enforce_2fa\"> </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n routerLink=\"/account/subscriptions\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button name=\"submit\"\n type=\"submit\"\n [buttonBusy]=\"busyButton\"\n class=\"btn btn-primary\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n</form>\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile\n (imageSelectionEvent)=\"onImageSelection($event)\"\n aspectRatio=\"fullLogo\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n<ng-template #squaredLogoContent\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile\n (imageSelectionEvent)=\"uploadSquaredLogo($event)\"\n aspectRatio=\"auto\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n<pw-password-validation #modal\n (successEvent)=\"onPasswordValidation($event)\"> </pw-password-validation>\n", styles: [".sub-header{color:gray;font-size:20px;font-weight:600}.full-logo{object-fit:cover;width:280px}@media only screen and (max-width: 767px){.btns-row .btn-primary{font-size:.8rem;margin-top:5px;padding:.375rem .5rem}}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i4.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i7.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "component", type: i7.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i7.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i7.NumberPickerComponent, selector: "pw-number-picker", inputs: ["min", "showTooltip", "tooltipText", "max", "step", "value", "pickStartAfter", "pickTimer", "prefix", "postfix", "placeholder", "buttonsOrientation", "size", "customClass", "mouseWheel", "arrowKeys", "inputReadOnly", "showUpButton", "showDownButton"], outputs: ["valueChange", "minReached", "maxReached", "pickStarted", "pickStopped", "pickUpStarted", "pickUpStopped", "pickDownStarted", "pickDownStopped"] }, { kind: "component", type: i11$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i7$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.DecimalPipe, name: "number" }, { kind: "pipe", type: i6.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i6$2.CurrencySymbolPipe, name: "currencySymbol" }] }); }
1276
1276
  }
1277
1277
  __decorate([
1278
1278
  ValidateForm('form'),
@@ -1460,11 +1460,11 @@ class UserSubscriptionListComponent extends AppBaseComponent {
1460
1460
  super.ngOnDestroy();
1461
1461
  }
1462
1462
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UserSubscriptionListComponent, deps: [{ token: i1$2.SubscriptionService }, { token: i2$1.AdminService }, { token: i1$1.NgbModal }, { token: i4$1.Store }, { token: i5$1.Clipboard }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
1463
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UserSubscriptionListComponent, selector: "pw-user-subscriptions-list", viewQueries: [{ propertyName: "menu", first: true, predicate: ["menuItems"], descendants: true }, { propertyName: "changeSubscriptionRef", first: true, predicate: AddSubscriptionComponent, descendants: true }, { propertyName: "passwordValidationModalForAccountDelete", first: true, predicate: ["passwordValidationModalForAccountDelete"], descendants: true }, { propertyName: "passwordValidationModalForKey", first: true, predicate: ["passwordValidationModalForKey"], descendants: true }, { propertyName: "passwordValidationForUnsubscribe", first: true, predicate: ["passwordValidationForUnsubscribe"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!showTos\">\n <!-- Subscriptions Tab Content -->\n <div class=\"row\"\n *ngIf=\"!editing && !isAddNew\">\n <div class=\"col-12\">\n <h2>Your Subscriptions</h2>\n <p class=\"float-start\">You'll find in this section the summary of your subscriptions.</p>\n <div class=\"text-end\">\n <!-- Delete Account -->\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-danger px-3 mt-2 me-2 me-sm-2\"\n (click)=\"showModalForAccountDeletion()\"\n [pTooltip]=\"'User.Account.Tooltip.DeleteAccount' | transloco\"\n tooltipPosition=\"bottom\">\n {{ 'User.Account.DeleteAccount' | transloco }}\n </button>\n </div>\n </div>\n </div>\n <!-- Subscribed Product Cards -->\n\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n\n <div class=\"row\"\n *ngIf=\"\n !editing && !isAddNew && !isUpdatePayment && isLoaded && subscribedSubscriptions.length\n \">\n <div class=\"col-12 col-md-6 my-4\"\n *ngFor=\"let subscription of subscribedSubscriptions; trackBy: trackBySubscription\">\n <div class=\"subscription-details mb-4\">\n <div class=\"float-start\">\n <div>\n <strong>Organisation:</strong>\n {{\n subscription.organisation\n ? subscription.organisation\n : subscription.contact_name\n }}\n </div>\n <div>\n <strong>{{ 'User.Subscriptions.TotalPriceExclTax' | transloco }}:</strong>\n <ng-template [ngIf]=\"subscription.calculated_price\"\n [ngIfElse]=\"freeProductRef\">\n {{\n subscription.calculated_price / 100\n | currency: subscription.products[0]?.currency:'symbol-narrow'\n }}\n {{ subscription.products[0].trial_subscription ? '(After Trial)' : '' }}\n </ng-template>\n <ng-template #freeProductRef> Free </ng-template>\n </div>\n <div>\n <strong>{{ 'User.Subscriptions.TotalPurchasedSeats' | transloco }}:</strong>\n {{ subscription.purchased_units }}\n </div>\n <div>\n <div>\n <strong>{{ 'User.Subscriptions.SeatsInUse' | transloco }}:</strong>\n {{ subscription.units_in_use || 1 }}\n </div>\n </div>\n </div>\n\n <!-- Products list -->\n <div *ngFor=\"\n let product of subscription.products;\n let first = first;\n trackBy: trackByProduct\n \">\n <ng-container *ngIf=\"first\">\n <!-- Edit -->\n <div *ngIf=\"\n !product.deleted &&\n (subscription.is_subscription_owner ||\n subscription.is_subscription_admin) &&\n !product.dependency_products?.length\n \"\n class=\"float-end m-2 m-sm-2\">\n <a class=\"btn btn-outline-primary btn-sm mx-1\"\n aria-label=\"Navigate to Target\"\n [routerLink]=\"['../subscriptions', subscription.id]\">\n {{ 'Button.Edit' | transloco }}\n </a>\n <button [routerLink]=\"['../subscriptions', subscription.id, 'credential']\"\n *ngIf=\"\n !product.expired &&\n !product.deleted &&\n !product.trial_subscription\n \"\n class=\"btn btn-dark btn-sm float-end mx-1\">\n {{ 'User.Subscriptions.Credentials' | transloco }}\n </button>\n <!-- Update Card Details -->\n <a class=\"btn btn-sm btn-outline-primary mx-1 me-sm-2\"\n *ngIf=\"!isUpdatePayment && subscription.stripe_customer_id\"\n [routerLink]=\"[\n '../subscriptions',\n subscription.id,\n 'product',\n product.id,\n 'update-payment'\n ]\">\n <i class=\"fa fa-edit\" aria-hidden=\"true\"></i>\n {{ 'User.Subscriptions.UpdateCardDetails' | transloco }}</a>\n </div>\n <!-- Add New Subscription -->\n <div class=\"float-end m-2 m-sm-2\"\n *ngIf=\"\n !product.deleted &&\n (subscription.is_subscription_owner ||\n subscription.is_subscription_admin) &&\n !product.dependency_products?.length\n \">\n <button class=\"btn btn-sm btn-primary\"\n [routerLink]=\"'/account/subscriptions/add-new'\"\n [queryParams]=\"{ subscription_id: subscription.id }\"\n [pTooltip]=\"\n 'User.Subscriptions.Tooltip.ManageAllProducts' | transloco\n \"\n tooltipPosition=\"bottom\">\n <i class=\"fa fa-plus-circle\"></i>\n {{ 'User.Subscriptions.SeeAllProducts' | transloco }}\n </button>\n </div>\n </ng-container>\n <div class=\"card subscription-products-cards\">\n <div class=\"card-content\">\n <div class=\"card-header\">\n <div>\n <h4 class=\"mb-3 text-bold-500 primary\">{{ product?.name }}</h4>\n <!-- Frequency -->\n <div>\n <div>\n <strong class=\"d-inline-block w-50\">{{\n 'User.Subscriptions.Frequency' | transloco\n }}:</strong>\n {{ product?.billing_frequency | uppercase }}\n </div>\n </div>\n <!-- Expiration -->\n <div [ngClass]=\"{ 'text-danger': product.expired }\">\n <strong class=\"d-inline-block w-50\">{{\n product.expired ? 'Expired' : 'Expiry Date'\n }}:</strong>\n {{ product.expires_at | dateFormat }}\n </div>\n <!-- Estimated Price -->\n <div [ngClass]=\"{ 'text-danger': product.expired }\">\n <strong class=\"d-inline-block w-50\">{{\n 'User.Subscriptions.PriceExclTax' | transloco\n }}:</strong>\n {{ product.currency }}\n {{ (product.calculated_price / 100).toFixed(2) }}\n </div>\n <!-- API Key -->\n <ng-template [ngIf]=\"\n (product.stripe_plan_id && product.max_hits > 0) ||\n product.max_hits_trial > 0\n \">\n <div class=\"d-inline\">\n <strong class=\"d-inline-block w-50\">{{\n 'User.Subscriptions.ApiKey' | transloco\n }}:</strong>\n <code class=\"d-inline me-2\">{{ product.masked }}</code>\n </div>\n <div class=\"float-end\">\n <!-- Show Access Key -->\n <button class=\"btn\"\n ngbTooltip=\"Show Access Key\"\n (click)=\"showKey(product)\">\n <i class=\"fas fa-eye\" aria-hidden=\"true\"></i>\n </button>\n <!-- Copy To Clipboard -->\n <button class=\"btn\"\n ngbTooltip=\"Copy Key\">\n <i\n class=\"fal fa-copy\"\n aria-hidden=\"true\"\n (click)=\"\n onClipboardCopy(product.api_access_token)\n \"\n (keydown.enter)=\"onClipboardCopy(product.api_access_token)\"\n ></i>\n </button>\n <!-- Update API Key -->\n <button class=\"btn\"\n ngbTooltip=\"Change Key\"\n *ngIf=\"!product.expired && !product.deleted\"\n (click)=\"updateApiKey(product)\">\n <i class=\"fal fa-sync-alt\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </ng-template>\n <div class=\"clearfix\"></div>\n </div>\n </div>\n <div class=\"card-footer px-3\">\n <div class=\"float-start\">\n <div *ngIf=\"product.deleted && !product.expired\">\n <i class=\"fa fa-info-circle me-2\" aria-hidden=\"true\"></i>{{ 'User.Subscriptions.OutdatedMessage' | transloco }}\n </div>\n <div>\n <span *ngIf=\"product.deleted\"\n class=\"badge bg-danger me-2\">Deleted</span>\n <span class=\"badge bg-warning me-2\"\n *ngIf=\"\n product.trial_subscription &&\n product.calculated_price\n \">\n Trial</span>\n <span class=\"badge bg-grey me-2\"\n *ngIf=\"product?.pause_collection && objectKeys(product?.pause_collection)?.length\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.PausedCollection'|transloco\"\n tooltipPosition=\"top\">\n Paused collection\n </span>\n <span class=\"badge bg-success me-2\"\n *ngIf=\"!product.calculated_price\">\n Free\n </span>\n </div>\n </div>\n <ng-template [ngIf]=\"\n subscription.is_subscription_owner ||\n subscription.is_subscription_admin\n \">\n <!-- Unsubscribe -->\n <button class=\"btn btn-outline-danger btn-sm float-end me-2\"\n *ngIf=\"\n subscription?.stripe_customer_id&&\n !product?.deleted &&\n !product?.trial_subscription\n \"\n (click)=\"attemptUnsubscribe(subscription, product.id)\">\n {{ 'User.Subscriptions.Unsubscribe' | transloco }}\n </button>\n <button class=\"badge bg-dark me-2 float-end\"\n *ngIf=\"product?.product_privacy_service_id\"\n (click)=\"showPrivacyAndTos(product)\">\n {{\n 'User.Subscriptions.PrivacyAndTermsOfService'\n | transloco\n }}\n </button>\n\n <ng-template [ngIf]=\"product.stripe_plan_id && product.active\">\n <!-- Upgrade -->\n <button class=\"btn btn-primary btn-sm me-2 float-end\"\n *ngIf=\"product.trial_subscription && !product.deleted\"\n (click)=\"attemptUpgrade(subscription, product)\">\n {{ 'Button.Upgrade' | transloco }}\n </button>\n <!-- Subscribe -->\n <button class=\"btn btn-primary btn-sm float-start\"\n *ngIf=\"subscription.expired && product.stripe_plan_id\"\n [routerLink]=\"'/account/subscriptions/add-new'\">\n {{ 'User.Subscriptions.Subscribe' | transloco }}\n </button>\n </ng-template>\n </ng-template>\n <div *ngIf=\"!product?.deleted && !subscription.is_subscription_owner\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i> Invited to\n use this product\n <span *ngIf=\"subscription.is_subscription_admin\"\n class=\"fw-bold\">as an admin</span>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"subscription.products.length === 0\">\n <div class=\"card\">\n <div class=\"card-content\">\n <div class=\"card-header\">\n <p class=\"text-center\">\n No product available for this subscription\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-12\"\n *ngIf=\"!editing && !isAddNew && !isUpdatePayment\">\n <pw-no-data [withImage]=\"true\" message=\"You don't have any subscription.\"\n *ngIf=\"subscribedSubscriptions.length === 0\">\n </pw-no-data>\n </div>\n </div>\n </div>\n </div>\n\n <!--\n Add New Subscription\n -->\n <!-- <ng-template [ngIf]=\"isAddNew && !isUpdatePayment\">\n <pw-subscription-details></pw-subscription-details>\n </ng-template> -->\n <!--\n Validate Password For Account Delete\n -->\n <pw-password-validation #passwordValidationModalForAccountDelete\n (successEvent)=\"deleteUser($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p>{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}</p>\n <p>{{ 'User.Account.Message.ConfirmPassword' | transloco }}</p>\n </div>\n </div>\n </pw-password-validation>\n <!--\n Validate Password For Display Key\n -->\n <pw-password-validation #passwordValidationModalForKey\n (successEvent)=\"displayApiKey()\">\n </pw-password-validation>\n <!--\n Validate Password For Unsubscribe\n -->\n <pw-password-validation #passwordValidationForUnsubscribe\n (successEvent)=\"onValidatePassword($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p>{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}</p>\n <p>{{ 'User.Account.Message.ConfirmPassword' | transloco }}</p>\n </div>\n </div>\n </pw-password-validation>\n</ng-container>\n\n<ng-container *ngIf=\"showTos\">\n <pw-privacy-and-tos [productId]=\"productId\"></pw-privacy-and-tos>\n</ng-container>\n\n<router-outlet></router-outlet>\n", styles: [".btn-list{bottom:24px;left:0;padding:0 38px;right:0}.shadow-md{padding-bottom:70px!important}.bg-dark{border:0}.subscription-products-cards{padding-bottom:0!important}.subscription-products-cards .card-footer{position:static!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.PrivacyAndTosComponent, selector: "pw-privacy-and-tos", inputs: ["productId"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i6$1.DateFormatPipe, name: "dateFormat" }] }); }
1463
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UserSubscriptionListComponent, selector: "pw-user-subscriptions-list", viewQueries: [{ propertyName: "menu", first: true, predicate: ["menuItems"], descendants: true }, { propertyName: "changeSubscriptionRef", first: true, predicate: AddSubscriptionComponent, descendants: true }, { propertyName: "passwordValidationModalForAccountDelete", first: true, predicate: ["passwordValidationModalForAccountDelete"], descendants: true }, { propertyName: "passwordValidationModalForKey", first: true, predicate: ["passwordValidationModalForKey"], descendants: true }, { propertyName: "passwordValidationForUnsubscribe", first: true, predicate: ["passwordValidationForUnsubscribe"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!showTos\">\n <!-- Subscriptions Tab Content -->\n <div class=\"row\"\n *ngIf=\"!editing && !isAddNew\">\n <div class=\"col-12\">\n <h2>Your Subscriptions</h2>\n <p class=\"float-start\">You'll find in this section the summary of your subscriptions.</p>\n <div class=\"text-end\">\n <!-- Delete Account -->\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-danger px-3 mt-2 me-2 me-sm-2\"\n (click)=\"showModalForAccountDeletion()\"\n [pTooltip]=\"'User.Account.Tooltip.DeleteAccount' | transloco\"\n tooltipPosition=\"bottom\">\n {{ 'User.Account.DeleteAccount' | transloco }}\n </button>\n </div>\n </div>\n </div>\n <!-- Subscribed Product Cards -->\n\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n\n <div class=\"row\"\n *ngIf=\"\n !editing && !isAddNew && !isUpdatePayment && isLoaded && subscribedSubscriptions.length\n \">\n <div class=\"col-12 col-md-6 my-4\"\n *ngFor=\"let subscription of subscribedSubscriptions; trackBy: trackBySubscription\">\n <div class=\"subscription-details mb-4\">\n <div class=\"float-start\">\n <div>\n <strong>Organisation:</strong>\n {{\n subscription.organisation\n ? subscription.organisation\n : subscription.contact_name\n }}\n </div>\n <div>\n <strong>{{ 'User.Subscriptions.TotalPriceExclTax' | transloco }}:</strong>\n <ng-template [ngIf]=\"subscription.calculated_price\"\n [ngIfElse]=\"freeProductRef\">\n {{\n subscription.calculated_price / 100\n | currency: subscription.products[0]?.currency:'symbol-narrow'\n }}\n {{ subscription.products[0].trial_subscription ? '(After Trial)' : '' }}\n </ng-template>\n <ng-template #freeProductRef> Free </ng-template>\n </div>\n <div>\n <strong>{{ 'User.Subscriptions.TotalPurchasedSeats' | transloco }}:</strong>\n {{ subscription.purchased_units }}\n </div>\n <div>\n <div>\n <strong>{{ 'User.Subscriptions.SeatsInUse' | transloco }}:</strong>\n {{ subscription.units_in_use || 1 }}\n </div>\n </div>\n </div>\n\n <!-- Products list -->\n <div *ngFor=\"\n let product of subscription.products;\n let first = first;\n trackBy: trackByProduct\n \">\n <ng-container *ngIf=\"first\">\n <!-- Edit -->\n <div *ngIf=\"\n !product.deleted &&\n (subscription.is_subscription_owner ||\n subscription.is_subscription_admin) &&\n !product.dependency_products?.length\n \"\n class=\"float-end m-2 m-sm-2\">\n <a class=\"btn btn-outline-primary btn-sm mx-1\"\n aria-label=\"Navigate to Target\"\n [routerLink]=\"['../subscriptions', subscription.id]\">\n {{ 'Button.Edit' | transloco }}\n </a>\n <button [routerLink]=\"['../subscriptions', subscription.id, 'credential']\"\n *ngIf=\"\n !product.expired &&\n !product.deleted &&\n !product.trial_subscription\n \"\n class=\"btn btn-dark btn-sm float-end mx-1\">\n {{ 'User.Subscriptions.Credentials' | transloco }}\n </button>\n <!-- Update Card Details -->\n <a class=\"btn btn-sm btn-outline-primary mx-1 me-sm-2\"\n *ngIf=\"!isUpdatePayment && subscription.stripe_customer_id\"\n [routerLink]=\"[\n '../subscriptions',\n subscription.id,\n 'product',\n product.id,\n 'update-payment'\n ]\">\n <i class=\"fa fa-edit\" aria-hidden=\"true\"></i>\n {{ 'User.Subscriptions.UpdateCardDetails' | transloco }}</a>\n </div>\n <!-- Add New Subscription -->\n <div class=\"float-end m-2 m-sm-2\"\n *ngIf=\"\n !product.deleted &&\n (subscription.is_subscription_owner ||\n subscription.is_subscription_admin) &&\n !product.dependency_products?.length\n \">\n <button class=\"btn btn-sm btn-primary\"\n [routerLink]=\"'/account/subscriptions/add-new'\"\n [queryParams]=\"{ subscription_id: subscription.id }\"\n [pTooltip]=\"\n 'User.Subscriptions.Tooltip.ManageAllProducts' | transloco\n \"\n tooltipPosition=\"bottom\">\n <i class=\"fa fa-plus-circle\"></i>\n {{ 'User.Subscriptions.SeeAllProducts' | transloco }}\n </button>\n </div>\n </ng-container>\n <div class=\"card subscription-products-cards\">\n <div class=\"card-content\">\n <div class=\"card-header\">\n <div>\n <h4 class=\"mb-3 text-bold-500 primary\">{{ product?.name }}</h4>\n <!-- Frequency -->\n <div>\n <div>\n <strong class=\"d-inline-block w-50\">{{\n 'User.Subscriptions.Frequency' | transloco\n }}:</strong>\n {{ product?.billing_frequency | uppercase }}\n </div>\n </div>\n <!-- Expiration -->\n <div [ngClass]=\"{ 'text-danger': product.expired }\">\n <strong class=\"d-inline-block w-50\">{{\n product.expired ? 'Expired' : 'Expiry Date'\n }}:</strong>\n {{ product.expires_at | dateFormat }}\n </div>\n <!-- Estimated Price -->\n <div [ngClass]=\"{ 'text-danger': product.expired }\">\n <strong class=\"d-inline-block w-50\">{{\n 'User.Subscriptions.PriceExclTax' | transloco\n }}:</strong>\n {{ product.currency }}\n {{ (product.calculated_price / 100) | number:'1.2-2' }}\n </div>\n <!-- API Key -->\n <ng-template [ngIf]=\"\n (product.stripe_plan_id && product.max_hits > 0) ||\n product.max_hits_trial > 0\n \">\n <div class=\"d-inline\">\n <strong class=\"d-inline-block w-50\">{{\n 'User.Subscriptions.ApiKey' | transloco\n }}:</strong>\n <code class=\"d-inline me-2\">{{ product.masked }}</code>\n </div>\n <div class=\"float-end\">\n <!-- Show Access Key -->\n <button class=\"btn\"\n ngbTooltip=\"Show Access Key\"\n (click)=\"showKey(product)\">\n <i class=\"fas fa-eye\" aria-hidden=\"true\"></i>\n </button>\n <!-- Copy To Clipboard -->\n <button class=\"btn\"\n ngbTooltip=\"Copy Key\">\n <i\n class=\"fal fa-copy\"\n aria-hidden=\"true\"\n (click)=\"\n onClipboardCopy(product.api_access_token)\n \"\n (keydown.enter)=\"onClipboardCopy(product.api_access_token)\"\n ></i>\n </button>\n <!-- Update API Key -->\n <button class=\"btn\"\n ngbTooltip=\"Change Key\"\n *ngIf=\"!product.expired && !product.deleted\"\n (click)=\"updateApiKey(product)\">\n <i class=\"fal fa-sync-alt\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </ng-template>\n <div class=\"clearfix\"></div>\n </div>\n </div>\n <div class=\"card-footer px-3\">\n <div class=\"float-start\">\n <div *ngIf=\"product.deleted && !product.expired\">\n <i class=\"fa fa-info-circle me-2\" aria-hidden=\"true\"></i>{{ 'User.Subscriptions.OutdatedMessage' | transloco }}\n </div>\n <div>\n <span *ngIf=\"product.deleted\"\n class=\"badge bg-danger me-2\">Deleted</span>\n <span class=\"badge bg-warning me-2\"\n *ngIf=\"\n product.trial_subscription &&\n product.calculated_price\n \">\n Trial</span>\n <span class=\"badge bg-grey me-2\"\n *ngIf=\"product?.pause_collection && objectKeys(product?.pause_collection)?.length\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.PausedCollection'|transloco\"\n tooltipPosition=\"top\">\n Paused collection\n </span>\n <span class=\"badge bg-success me-2\"\n *ngIf=\"!product.calculated_price\">\n Free\n </span>\n </div>\n </div>\n <ng-template [ngIf]=\"\n subscription.is_subscription_owner ||\n subscription.is_subscription_admin\n \">\n <!-- Unsubscribe -->\n <button class=\"btn btn-outline-danger btn-sm float-end me-2\"\n *ngIf=\"\n subscription?.stripe_customer_id&&\n !product?.deleted &&\n !product?.trial_subscription\n \"\n (click)=\"attemptUnsubscribe(subscription, product.id)\">\n {{ 'User.Subscriptions.Unsubscribe' | transloco }}\n </button>\n <button class=\"badge bg-dark me-2 float-end\"\n *ngIf=\"product?.product_privacy_service_id\"\n (click)=\"showPrivacyAndTos(product)\">\n {{\n 'User.Subscriptions.PrivacyAndTermsOfService'\n | transloco\n }}\n </button>\n\n <ng-template [ngIf]=\"product.stripe_plan_id && product.active\">\n <!-- Upgrade -->\n <button class=\"btn btn-primary btn-sm me-2 float-end\"\n *ngIf=\"product.trial_subscription && !product.deleted\"\n (click)=\"attemptUpgrade(subscription, product)\">\n {{ 'Button.Upgrade' | transloco }}\n </button>\n <!-- Subscribe -->\n <button class=\"btn btn-primary btn-sm float-start\"\n *ngIf=\"subscription.expired && product.stripe_plan_id\"\n [routerLink]=\"'/account/subscriptions/add-new'\">\n {{ 'User.Subscriptions.Subscribe' | transloco }}\n </button>\n </ng-template>\n </ng-template>\n <div *ngIf=\"!product?.deleted && !subscription.is_subscription_owner\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i> Invited to\n use this product\n <span *ngIf=\"subscription.is_subscription_admin\"\n class=\"fw-bold\">as an admin</span>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"subscription.products.length === 0\">\n <div class=\"card\">\n <div class=\"card-content\">\n <div class=\"card-header\">\n <p class=\"text-center\">\n No product available for this subscription\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-12\"\n *ngIf=\"!editing && !isAddNew && !isUpdatePayment\">\n <pw-no-data [withImage]=\"true\" message=\"You don't have any subscription.\"\n *ngIf=\"subscribedSubscriptions.length === 0\">\n </pw-no-data>\n </div>\n </div>\n </div>\n </div>\n\n <!--\n Add New Subscription\n -->\n <!-- <ng-template [ngIf]=\"isAddNew && !isUpdatePayment\">\n <pw-subscription-details></pw-subscription-details>\n </ng-template> -->\n <!--\n Validate Password For Account Delete\n -->\n <pw-password-validation #passwordValidationModalForAccountDelete\n (successEvent)=\"deleteUser($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p>{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}</p>\n <p>{{ 'User.Account.Message.ConfirmPassword' | transloco }}</p>\n </div>\n </div>\n </pw-password-validation>\n <!--\n Validate Password For Display Key\n -->\n <pw-password-validation #passwordValidationModalForKey\n (successEvent)=\"displayApiKey()\">\n </pw-password-validation>\n <!--\n Validate Password For Unsubscribe\n -->\n <pw-password-validation #passwordValidationForUnsubscribe\n (successEvent)=\"onValidatePassword($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p>{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}</p>\n <p>{{ 'User.Account.Message.ConfirmPassword' | transloco }}</p>\n </div>\n </div>\n </pw-password-validation>\n</ng-container>\n\n<ng-container *ngIf=\"showTos\">\n <pw-privacy-and-tos [productId]=\"productId\"></pw-privacy-and-tos>\n</ng-container>\n\n<router-outlet></router-outlet>\n", styles: [".btn-list{bottom:24px;left:0;padding:0 38px;right:0}.shadow-md{padding-bottom:70px!important}.bg-dark{border:0}.subscription-products-cards{padding-bottom:0!important}.subscription-products-cards .card-footer{position:static!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.PrivacyAndTosComponent, selector: "pw-privacy-and-tos", inputs: ["productId"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i6.DecimalPipe, name: "number" }, { kind: "pipe", type: i6.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i6$2.DateFormatPipe, name: "dateFormat" }] }); }
1464
1464
  }
1465
1465
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UserSubscriptionListComponent, decorators: [{
1466
1466
  type: Component,
1467
- args: [{ selector: 'pw-user-subscriptions-list', template: "<ng-container *ngIf=\"!showTos\">\n <!-- Subscriptions Tab Content -->\n <div class=\"row\"\n *ngIf=\"!editing && !isAddNew\">\n <div class=\"col-12\">\n <h2>Your Subscriptions</h2>\n <p class=\"float-start\">You'll find in this section the summary of your subscriptions.</p>\n <div class=\"text-end\">\n <!-- Delete Account -->\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-danger px-3 mt-2 me-2 me-sm-2\"\n (click)=\"showModalForAccountDeletion()\"\n [pTooltip]=\"'User.Account.Tooltip.DeleteAccount' | transloco\"\n tooltipPosition=\"bottom\">\n {{ 'User.Account.DeleteAccount' | transloco }}\n </button>\n </div>\n </div>\n </div>\n <!-- Subscribed Product Cards -->\n\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n\n <div class=\"row\"\n *ngIf=\"\n !editing && !isAddNew && !isUpdatePayment && isLoaded && subscribedSubscriptions.length\n \">\n <div class=\"col-12 col-md-6 my-4\"\n *ngFor=\"let subscription of subscribedSubscriptions; trackBy: trackBySubscription\">\n <div class=\"subscription-details mb-4\">\n <div class=\"float-start\">\n <div>\n <strong>Organisation:</strong>\n {{\n subscription.organisation\n ? subscription.organisation\n : subscription.contact_name\n }}\n </div>\n <div>\n <strong>{{ 'User.Subscriptions.TotalPriceExclTax' | transloco }}:</strong>\n <ng-template [ngIf]=\"subscription.calculated_price\"\n [ngIfElse]=\"freeProductRef\">\n {{\n subscription.calculated_price / 100\n | currency: subscription.products[0]?.currency:'symbol-narrow'\n }}\n {{ subscription.products[0].trial_subscription ? '(After Trial)' : '' }}\n </ng-template>\n <ng-template #freeProductRef> Free </ng-template>\n </div>\n <div>\n <strong>{{ 'User.Subscriptions.TotalPurchasedSeats' | transloco }}:</strong>\n {{ subscription.purchased_units }}\n </div>\n <div>\n <div>\n <strong>{{ 'User.Subscriptions.SeatsInUse' | transloco }}:</strong>\n {{ subscription.units_in_use || 1 }}\n </div>\n </div>\n </div>\n\n <!-- Products list -->\n <div *ngFor=\"\n let product of subscription.products;\n let first = first;\n trackBy: trackByProduct\n \">\n <ng-container *ngIf=\"first\">\n <!-- Edit -->\n <div *ngIf=\"\n !product.deleted &&\n (subscription.is_subscription_owner ||\n subscription.is_subscription_admin) &&\n !product.dependency_products?.length\n \"\n class=\"float-end m-2 m-sm-2\">\n <a class=\"btn btn-outline-primary btn-sm mx-1\"\n aria-label=\"Navigate to Target\"\n [routerLink]=\"['../subscriptions', subscription.id]\">\n {{ 'Button.Edit' | transloco }}\n </a>\n <button [routerLink]=\"['../subscriptions', subscription.id, 'credential']\"\n *ngIf=\"\n !product.expired &&\n !product.deleted &&\n !product.trial_subscription\n \"\n class=\"btn btn-dark btn-sm float-end mx-1\">\n {{ 'User.Subscriptions.Credentials' | transloco }}\n </button>\n <!-- Update Card Details -->\n <a class=\"btn btn-sm btn-outline-primary mx-1 me-sm-2\"\n *ngIf=\"!isUpdatePayment && subscription.stripe_customer_id\"\n [routerLink]=\"[\n '../subscriptions',\n subscription.id,\n 'product',\n product.id,\n 'update-payment'\n ]\">\n <i class=\"fa fa-edit\" aria-hidden=\"true\"></i>\n {{ 'User.Subscriptions.UpdateCardDetails' | transloco }}</a>\n </div>\n <!-- Add New Subscription -->\n <div class=\"float-end m-2 m-sm-2\"\n *ngIf=\"\n !product.deleted &&\n (subscription.is_subscription_owner ||\n subscription.is_subscription_admin) &&\n !product.dependency_products?.length\n \">\n <button class=\"btn btn-sm btn-primary\"\n [routerLink]=\"'/account/subscriptions/add-new'\"\n [queryParams]=\"{ subscription_id: subscription.id }\"\n [pTooltip]=\"\n 'User.Subscriptions.Tooltip.ManageAllProducts' | transloco\n \"\n tooltipPosition=\"bottom\">\n <i class=\"fa fa-plus-circle\"></i>\n {{ 'User.Subscriptions.SeeAllProducts' | transloco }}\n </button>\n </div>\n </ng-container>\n <div class=\"card subscription-products-cards\">\n <div class=\"card-content\">\n <div class=\"card-header\">\n <div>\n <h4 class=\"mb-3 text-bold-500 primary\">{{ product?.name }}</h4>\n <!-- Frequency -->\n <div>\n <div>\n <strong class=\"d-inline-block w-50\">{{\n 'User.Subscriptions.Frequency' | transloco\n }}:</strong>\n {{ product?.billing_frequency | uppercase }}\n </div>\n </div>\n <!-- Expiration -->\n <div [ngClass]=\"{ 'text-danger': product.expired }\">\n <strong class=\"d-inline-block w-50\">{{\n product.expired ? 'Expired' : 'Expiry Date'\n }}:</strong>\n {{ product.expires_at | dateFormat }}\n </div>\n <!-- Estimated Price -->\n <div [ngClass]=\"{ 'text-danger': product.expired }\">\n <strong class=\"d-inline-block w-50\">{{\n 'User.Subscriptions.PriceExclTax' | transloco\n }}:</strong>\n {{ product.currency }}\n {{ (product.calculated_price / 100).toFixed(2) }}\n </div>\n <!-- API Key -->\n <ng-template [ngIf]=\"\n (product.stripe_plan_id && product.max_hits > 0) ||\n product.max_hits_trial > 0\n \">\n <div class=\"d-inline\">\n <strong class=\"d-inline-block w-50\">{{\n 'User.Subscriptions.ApiKey' | transloco\n }}:</strong>\n <code class=\"d-inline me-2\">{{ product.masked }}</code>\n </div>\n <div class=\"float-end\">\n <!-- Show Access Key -->\n <button class=\"btn\"\n ngbTooltip=\"Show Access Key\"\n (click)=\"showKey(product)\">\n <i class=\"fas fa-eye\" aria-hidden=\"true\"></i>\n </button>\n <!-- Copy To Clipboard -->\n <button class=\"btn\"\n ngbTooltip=\"Copy Key\">\n <i\n class=\"fal fa-copy\"\n aria-hidden=\"true\"\n (click)=\"\n onClipboardCopy(product.api_access_token)\n \"\n (keydown.enter)=\"onClipboardCopy(product.api_access_token)\"\n ></i>\n </button>\n <!-- Update API Key -->\n <button class=\"btn\"\n ngbTooltip=\"Change Key\"\n *ngIf=\"!product.expired && !product.deleted\"\n (click)=\"updateApiKey(product)\">\n <i class=\"fal fa-sync-alt\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </ng-template>\n <div class=\"clearfix\"></div>\n </div>\n </div>\n <div class=\"card-footer px-3\">\n <div class=\"float-start\">\n <div *ngIf=\"product.deleted && !product.expired\">\n <i class=\"fa fa-info-circle me-2\" aria-hidden=\"true\"></i>{{ 'User.Subscriptions.OutdatedMessage' | transloco }}\n </div>\n <div>\n <span *ngIf=\"product.deleted\"\n class=\"badge bg-danger me-2\">Deleted</span>\n <span class=\"badge bg-warning me-2\"\n *ngIf=\"\n product.trial_subscription &&\n product.calculated_price\n \">\n Trial</span>\n <span class=\"badge bg-grey me-2\"\n *ngIf=\"product?.pause_collection && objectKeys(product?.pause_collection)?.length\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.PausedCollection'|transloco\"\n tooltipPosition=\"top\">\n Paused collection\n </span>\n <span class=\"badge bg-success me-2\"\n *ngIf=\"!product.calculated_price\">\n Free\n </span>\n </div>\n </div>\n <ng-template [ngIf]=\"\n subscription.is_subscription_owner ||\n subscription.is_subscription_admin\n \">\n <!-- Unsubscribe -->\n <button class=\"btn btn-outline-danger btn-sm float-end me-2\"\n *ngIf=\"\n subscription?.stripe_customer_id&&\n !product?.deleted &&\n !product?.trial_subscription\n \"\n (click)=\"attemptUnsubscribe(subscription, product.id)\">\n {{ 'User.Subscriptions.Unsubscribe' | transloco }}\n </button>\n <button class=\"badge bg-dark me-2 float-end\"\n *ngIf=\"product?.product_privacy_service_id\"\n (click)=\"showPrivacyAndTos(product)\">\n {{\n 'User.Subscriptions.PrivacyAndTermsOfService'\n | transloco\n }}\n </button>\n\n <ng-template [ngIf]=\"product.stripe_plan_id && product.active\">\n <!-- Upgrade -->\n <button class=\"btn btn-primary btn-sm me-2 float-end\"\n *ngIf=\"product.trial_subscription && !product.deleted\"\n (click)=\"attemptUpgrade(subscription, product)\">\n {{ 'Button.Upgrade' | transloco }}\n </button>\n <!-- Subscribe -->\n <button class=\"btn btn-primary btn-sm float-start\"\n *ngIf=\"subscription.expired && product.stripe_plan_id\"\n [routerLink]=\"'/account/subscriptions/add-new'\">\n {{ 'User.Subscriptions.Subscribe' | transloco }}\n </button>\n </ng-template>\n </ng-template>\n <div *ngIf=\"!product?.deleted && !subscription.is_subscription_owner\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i> Invited to\n use this product\n <span *ngIf=\"subscription.is_subscription_admin\"\n class=\"fw-bold\">as an admin</span>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"subscription.products.length === 0\">\n <div class=\"card\">\n <div class=\"card-content\">\n <div class=\"card-header\">\n <p class=\"text-center\">\n No product available for this subscription\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-12\"\n *ngIf=\"!editing && !isAddNew && !isUpdatePayment\">\n <pw-no-data [withImage]=\"true\" message=\"You don't have any subscription.\"\n *ngIf=\"subscribedSubscriptions.length === 0\">\n </pw-no-data>\n </div>\n </div>\n </div>\n </div>\n\n <!--\n Add New Subscription\n -->\n <!-- <ng-template [ngIf]=\"isAddNew && !isUpdatePayment\">\n <pw-subscription-details></pw-subscription-details>\n </ng-template> -->\n <!--\n Validate Password For Account Delete\n -->\n <pw-password-validation #passwordValidationModalForAccountDelete\n (successEvent)=\"deleteUser($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p>{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}</p>\n <p>{{ 'User.Account.Message.ConfirmPassword' | transloco }}</p>\n </div>\n </div>\n </pw-password-validation>\n <!--\n Validate Password For Display Key\n -->\n <pw-password-validation #passwordValidationModalForKey\n (successEvent)=\"displayApiKey()\">\n </pw-password-validation>\n <!--\n Validate Password For Unsubscribe\n -->\n <pw-password-validation #passwordValidationForUnsubscribe\n (successEvent)=\"onValidatePassword($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p>{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}</p>\n <p>{{ 'User.Account.Message.ConfirmPassword' | transloco }}</p>\n </div>\n </div>\n </pw-password-validation>\n</ng-container>\n\n<ng-container *ngIf=\"showTos\">\n <pw-privacy-and-tos [productId]=\"productId\"></pw-privacy-and-tos>\n</ng-container>\n\n<router-outlet></router-outlet>\n", styles: [".btn-list{bottom:24px;left:0;padding:0 38px;right:0}.shadow-md{padding-bottom:70px!important}.bg-dark{border:0}.subscription-products-cards{padding-bottom:0!important}.subscription-products-cards .card-footer{position:static!important}\n"] }]
1467
+ args: [{ selector: 'pw-user-subscriptions-list', template: "<ng-container *ngIf=\"!showTos\">\n <!-- Subscriptions Tab Content -->\n <div class=\"row\"\n *ngIf=\"!editing && !isAddNew\">\n <div class=\"col-12\">\n <h2>Your Subscriptions</h2>\n <p class=\"float-start\">You'll find in this section the summary of your subscriptions.</p>\n <div class=\"text-end\">\n <!-- Delete Account -->\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-danger px-3 mt-2 me-2 me-sm-2\"\n (click)=\"showModalForAccountDeletion()\"\n [pTooltip]=\"'User.Account.Tooltip.DeleteAccount' | transloco\"\n tooltipPosition=\"bottom\">\n {{ 'User.Account.DeleteAccount' | transloco }}\n </button>\n </div>\n </div>\n </div>\n <!-- Subscribed Product Cards -->\n\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n\n <div class=\"row\"\n *ngIf=\"\n !editing && !isAddNew && !isUpdatePayment && isLoaded && subscribedSubscriptions.length\n \">\n <div class=\"col-12 col-md-6 my-4\"\n *ngFor=\"let subscription of subscribedSubscriptions; trackBy: trackBySubscription\">\n <div class=\"subscription-details mb-4\">\n <div class=\"float-start\">\n <div>\n <strong>Organisation:</strong>\n {{\n subscription.organisation\n ? subscription.organisation\n : subscription.contact_name\n }}\n </div>\n <div>\n <strong>{{ 'User.Subscriptions.TotalPriceExclTax' | transloco }}:</strong>\n <ng-template [ngIf]=\"subscription.calculated_price\"\n [ngIfElse]=\"freeProductRef\">\n {{\n subscription.calculated_price / 100\n | currency: subscription.products[0]?.currency:'symbol-narrow'\n }}\n {{ subscription.products[0].trial_subscription ? '(After Trial)' : '' }}\n </ng-template>\n <ng-template #freeProductRef> Free </ng-template>\n </div>\n <div>\n <strong>{{ 'User.Subscriptions.TotalPurchasedSeats' | transloco }}:</strong>\n {{ subscription.purchased_units }}\n </div>\n <div>\n <div>\n <strong>{{ 'User.Subscriptions.SeatsInUse' | transloco }}:</strong>\n {{ subscription.units_in_use || 1 }}\n </div>\n </div>\n </div>\n\n <!-- Products list -->\n <div *ngFor=\"\n let product of subscription.products;\n let first = first;\n trackBy: trackByProduct\n \">\n <ng-container *ngIf=\"first\">\n <!-- Edit -->\n <div *ngIf=\"\n !product.deleted &&\n (subscription.is_subscription_owner ||\n subscription.is_subscription_admin) &&\n !product.dependency_products?.length\n \"\n class=\"float-end m-2 m-sm-2\">\n <a class=\"btn btn-outline-primary btn-sm mx-1\"\n aria-label=\"Navigate to Target\"\n [routerLink]=\"['../subscriptions', subscription.id]\">\n {{ 'Button.Edit' | transloco }}\n </a>\n <button [routerLink]=\"['../subscriptions', subscription.id, 'credential']\"\n *ngIf=\"\n !product.expired &&\n !product.deleted &&\n !product.trial_subscription\n \"\n class=\"btn btn-dark btn-sm float-end mx-1\">\n {{ 'User.Subscriptions.Credentials' | transloco }}\n </button>\n <!-- Update Card Details -->\n <a class=\"btn btn-sm btn-outline-primary mx-1 me-sm-2\"\n *ngIf=\"!isUpdatePayment && subscription.stripe_customer_id\"\n [routerLink]=\"[\n '../subscriptions',\n subscription.id,\n 'product',\n product.id,\n 'update-payment'\n ]\">\n <i class=\"fa fa-edit\" aria-hidden=\"true\"></i>\n {{ 'User.Subscriptions.UpdateCardDetails' | transloco }}</a>\n </div>\n <!-- Add New Subscription -->\n <div class=\"float-end m-2 m-sm-2\"\n *ngIf=\"\n !product.deleted &&\n (subscription.is_subscription_owner ||\n subscription.is_subscription_admin) &&\n !product.dependency_products?.length\n \">\n <button class=\"btn btn-sm btn-primary\"\n [routerLink]=\"'/account/subscriptions/add-new'\"\n [queryParams]=\"{ subscription_id: subscription.id }\"\n [pTooltip]=\"\n 'User.Subscriptions.Tooltip.ManageAllProducts' | transloco\n \"\n tooltipPosition=\"bottom\">\n <i class=\"fa fa-plus-circle\"></i>\n {{ 'User.Subscriptions.SeeAllProducts' | transloco }}\n </button>\n </div>\n </ng-container>\n <div class=\"card subscription-products-cards\">\n <div class=\"card-content\">\n <div class=\"card-header\">\n <div>\n <h4 class=\"mb-3 text-bold-500 primary\">{{ product?.name }}</h4>\n <!-- Frequency -->\n <div>\n <div>\n <strong class=\"d-inline-block w-50\">{{\n 'User.Subscriptions.Frequency' | transloco\n }}:</strong>\n {{ product?.billing_frequency | uppercase }}\n </div>\n </div>\n <!-- Expiration -->\n <div [ngClass]=\"{ 'text-danger': product.expired }\">\n <strong class=\"d-inline-block w-50\">{{\n product.expired ? 'Expired' : 'Expiry Date'\n }}:</strong>\n {{ product.expires_at | dateFormat }}\n </div>\n <!-- Estimated Price -->\n <div [ngClass]=\"{ 'text-danger': product.expired }\">\n <strong class=\"d-inline-block w-50\">{{\n 'User.Subscriptions.PriceExclTax' | transloco\n }}:</strong>\n {{ product.currency }}\n {{ (product.calculated_price / 100) | number:'1.2-2' }}\n </div>\n <!-- API Key -->\n <ng-template [ngIf]=\"\n (product.stripe_plan_id && product.max_hits > 0) ||\n product.max_hits_trial > 0\n \">\n <div class=\"d-inline\">\n <strong class=\"d-inline-block w-50\">{{\n 'User.Subscriptions.ApiKey' | transloco\n }}:</strong>\n <code class=\"d-inline me-2\">{{ product.masked }}</code>\n </div>\n <div class=\"float-end\">\n <!-- Show Access Key -->\n <button class=\"btn\"\n ngbTooltip=\"Show Access Key\"\n (click)=\"showKey(product)\">\n <i class=\"fas fa-eye\" aria-hidden=\"true\"></i>\n </button>\n <!-- Copy To Clipboard -->\n <button class=\"btn\"\n ngbTooltip=\"Copy Key\">\n <i\n class=\"fal fa-copy\"\n aria-hidden=\"true\"\n (click)=\"\n onClipboardCopy(product.api_access_token)\n \"\n (keydown.enter)=\"onClipboardCopy(product.api_access_token)\"\n ></i>\n </button>\n <!-- Update API Key -->\n <button class=\"btn\"\n ngbTooltip=\"Change Key\"\n *ngIf=\"!product.expired && !product.deleted\"\n (click)=\"updateApiKey(product)\">\n <i class=\"fal fa-sync-alt\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </ng-template>\n <div class=\"clearfix\"></div>\n </div>\n </div>\n <div class=\"card-footer px-3\">\n <div class=\"float-start\">\n <div *ngIf=\"product.deleted && !product.expired\">\n <i class=\"fa fa-info-circle me-2\" aria-hidden=\"true\"></i>{{ 'User.Subscriptions.OutdatedMessage' | transloco }}\n </div>\n <div>\n <span *ngIf=\"product.deleted\"\n class=\"badge bg-danger me-2\">Deleted</span>\n <span class=\"badge bg-warning me-2\"\n *ngIf=\"\n product.trial_subscription &&\n product.calculated_price\n \">\n Trial</span>\n <span class=\"badge bg-grey me-2\"\n *ngIf=\"product?.pause_collection && objectKeys(product?.pause_collection)?.length\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.PausedCollection'|transloco\"\n tooltipPosition=\"top\">\n Paused collection\n </span>\n <span class=\"badge bg-success me-2\"\n *ngIf=\"!product.calculated_price\">\n Free\n </span>\n </div>\n </div>\n <ng-template [ngIf]=\"\n subscription.is_subscription_owner ||\n subscription.is_subscription_admin\n \">\n <!-- Unsubscribe -->\n <button class=\"btn btn-outline-danger btn-sm float-end me-2\"\n *ngIf=\"\n subscription?.stripe_customer_id&&\n !product?.deleted &&\n !product?.trial_subscription\n \"\n (click)=\"attemptUnsubscribe(subscription, product.id)\">\n {{ 'User.Subscriptions.Unsubscribe' | transloco }}\n </button>\n <button class=\"badge bg-dark me-2 float-end\"\n *ngIf=\"product?.product_privacy_service_id\"\n (click)=\"showPrivacyAndTos(product)\">\n {{\n 'User.Subscriptions.PrivacyAndTermsOfService'\n | transloco\n }}\n </button>\n\n <ng-template [ngIf]=\"product.stripe_plan_id && product.active\">\n <!-- Upgrade -->\n <button class=\"btn btn-primary btn-sm me-2 float-end\"\n *ngIf=\"product.trial_subscription && !product.deleted\"\n (click)=\"attemptUpgrade(subscription, product)\">\n {{ 'Button.Upgrade' | transloco }}\n </button>\n <!-- Subscribe -->\n <button class=\"btn btn-primary btn-sm float-start\"\n *ngIf=\"subscription.expired && product.stripe_plan_id\"\n [routerLink]=\"'/account/subscriptions/add-new'\">\n {{ 'User.Subscriptions.Subscribe' | transloco }}\n </button>\n </ng-template>\n </ng-template>\n <div *ngIf=\"!product?.deleted && !subscription.is_subscription_owner\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i> Invited to\n use this product\n <span *ngIf=\"subscription.is_subscription_admin\"\n class=\"fw-bold\">as an admin</span>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"subscription.products.length === 0\">\n <div class=\"card\">\n <div class=\"card-content\">\n <div class=\"card-header\">\n <p class=\"text-center\">\n No product available for this subscription\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-12\"\n *ngIf=\"!editing && !isAddNew && !isUpdatePayment\">\n <pw-no-data [withImage]=\"true\" message=\"You don't have any subscription.\"\n *ngIf=\"subscribedSubscriptions.length === 0\">\n </pw-no-data>\n </div>\n </div>\n </div>\n </div>\n\n <!--\n Add New Subscription\n -->\n <!-- <ng-template [ngIf]=\"isAddNew && !isUpdatePayment\">\n <pw-subscription-details></pw-subscription-details>\n </ng-template> -->\n <!--\n Validate Password For Account Delete\n -->\n <pw-password-validation #passwordValidationModalForAccountDelete\n (successEvent)=\"deleteUser($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p>{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}</p>\n <p>{{ 'User.Account.Message.ConfirmPassword' | transloco }}</p>\n </div>\n </div>\n </pw-password-validation>\n <!--\n Validate Password For Display Key\n -->\n <pw-password-validation #passwordValidationModalForKey\n (successEvent)=\"displayApiKey()\">\n </pw-password-validation>\n <!--\n Validate Password For Unsubscribe\n -->\n <pw-password-validation #passwordValidationForUnsubscribe\n (successEvent)=\"onValidatePassword($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <p>{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}</p>\n <p>{{ 'User.Account.Message.ConfirmPassword' | transloco }}</p>\n </div>\n </div>\n </pw-password-validation>\n</ng-container>\n\n<ng-container *ngIf=\"showTos\">\n <pw-privacy-and-tos [productId]=\"productId\"></pw-privacy-and-tos>\n</ng-container>\n\n<router-outlet></router-outlet>\n", styles: [".btn-list{bottom:24px;left:0;padding:0 38px;right:0}.shadow-md{padding-bottom:70px!important}.bg-dark{border:0}.subscription-products-cards{padding-bottom:0!important}.subscription-products-cards .card-footer{position:static!important}\n"] }]
1468
1468
  }], ctorParameters: () => [{ type: i1$2.SubscriptionService }, { type: i2$1.AdminService }, { type: i1$1.NgbModal }, { type: i4$1.Store }, { type: i5$1.Clipboard }, { type: i0.Injector }], propDecorators: { menu: [{
1469
1469
  type: ViewChild,
1470
1470
  args: ['menuItems', { static: false }]
@@ -1535,7 +1535,7 @@ class UserInvoiceComponent extends AppBaseComponent {
1535
1535
  }
1536
1536
  }
1537
1537
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UserInvoiceComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
1538
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UserInvoiceComponent, selector: "pw-user-invoice", usesInheritance: true, ngImport: i0, template: "<div class=\"row\" [class.custom-disable-wrapper]=\"buttonBusy\">\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Your Invoices</h2>\n </div>\n</div>\n\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n</div>\n<div class=\"row primeng-datatable-container mt-0\" [class.custom-disable-wrapper]=\"buttonBusy\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <div class=\"col-12 px-0\">\n <p-table #tt\n [value]=\"invoices\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n >\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter justify-content-end\">\n <div class=\"text-end\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input [(ngModel)]=\"searchText\"\n (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n type=\"text\"\n pInputText\n size=\"50\"\n placeholder=\"Search Invoices...\"\n data-cy=\"incident-search\"\n class=\"wd-90\">\n </div>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"col\" pSortableColumn=\"date\">Invoice Date <p-sortIcon field=\"date\"></p-sortIcon></th>\n <th scope=\"col\" pSortableColumn=\"frequency\">Frequency <p-sortIcon field=\"frequency\"></p-sortIcon></th>\n <th scope=\"col\" pSortableColumn=\"seatsPurchased\">Seats Purchased <p-sortIcon field=\"seatsPurchased\"></p-sortIcon></th>\n <th scope=\"col\" pSortableColumn=\"subtotal\">Subtotal <p-sortIcon field=\"subtotal\"></p-sortIcon></th>\n <th scope=\"col\" pSortableColumn=\"total\">Total (incl. tax) <p-sortIcon field=\"total\"></p-sortIcon></th>\n <th scope=\"col\">Action</th>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"body\" let-invoice>\n <tr>\n <td>{{ invoice.date | date:'dd-MMM-YYYY' }}</td>\n <td>\n <span class=\"badge\"\n [appDynamicBadge]=\"{\n itemsArray: invoiceFrequency,\n item: invoice.product.billing_frequency\n }\"\n color=\"blue-grey\">{{ invoice.product.billing_frequency }}</span>\n </td>\n <td>{{ invoice?.subscription_product?.purchased_units }}</td>\n <td>{{ (invoice.subtotal_in_cents / 100) | currency:invoice?.product?.currency }}</td>\n <td class=\"td-total\">{{ (invoice.total_in_cents / 100) | currency:invoice?.product?.currency }}</td>\n <td>\n <a *ngIf=\"invoice?.file?.url; else noFileUrl\" class=\"btn btn-sm btn-primary\" [attr.href]=\"invoice.file.url\" target=\"_blank\" title=\"Download\">\n <i class=\"fa fa-download\">&nbsp;Download</i>\n </a>\n <ng-template #noFileUrl>\n <a class=\"btn btn-sm btn-primary\" [attr.href]=\"invoice?.stripe_invoice_pdf\" target=\"_blank\" title=\"Download\">\n <i class=\"fa fa-download\">&nbsp;Download</i>\n </a>\n </ng-template>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n\n <span *ngIf=\"totalRecords !== 0\" class=\"total-records-count\">Total: {{ totalRecords }}</span>\n\n </div>\n</div>\n<pw-no-data [withImage]=\"true\" message=\"You don't have any invoice yet.\" *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n</pw-no-data>\n\n", styles: [".page-heading{background:#fcfcfc;border-bottom:1px solid rgba(0,0,0,.1);position:relative;width:100%}.page-heading:after{clear:both;content:\"\";display:table}.page-heading .page-heading__container{padding:15px 20px;position:relative}.page-heading .page-heading__container .title{color:#242437;font-size:15px;font-weight:500;line-height:20px;margin:3px 0 0;overflow:hidden;padding:0;text-overflow:ellipsis;width:95%}.card .card-container{position:absolute;right:20px;top:25px;z-index:1}.td-total{font-weight:700}.card-inner-container{background:#0000000d;border:1px dashed rgba(0,0,0,.1);border-radius:3px;margin-bottom:20px;padding:20px}.invoice-text{display:flex;font-size:13px;justify-content:space-between;margin:10px 0}.invoice-template{min-height:calc(100vh - 190px)}\n"], dependencies: [{ kind: "directive", type: i1$3.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i4.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i7$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i7$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
1538
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UserInvoiceComponent, selector: "pw-user-invoice", usesInheritance: true, ngImport: i0, template: "<div class=\"row\" [class.custom-disable-wrapper]=\"buttonBusy\">\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Your Invoices</h2>\n </div>\n</div>\n\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n</div>\n<div class=\"row primeng-datatable-container mt-0\" [class.custom-disable-wrapper]=\"buttonBusy\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <div class=\"col-12 px-0\">\n <p-table #tt\n [value]=\"invoices\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n >\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter justify-content-end\">\n <div class=\"text-end\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input [(ngModel)]=\"searchText\"\n (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n type=\"text\"\n pInputText\n size=\"50\"\n placeholder=\"Search Invoices...\"\n data-cy=\"incident-search\"\n class=\"wd-90\">\n </div>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"col\" pSortableColumn=\"date\">Invoice Date <p-sortIcon field=\"date\"></p-sortIcon></th>\n <th scope=\"col\" pSortableColumn=\"frequency\">Frequency <p-sortIcon field=\"frequency\"></p-sortIcon></th>\n <th scope=\"col\" pSortableColumn=\"seatsPurchased\">Seats Purchased <p-sortIcon field=\"seatsPurchased\"></p-sortIcon></th>\n <th scope=\"col\" pSortableColumn=\"subtotal\">Subtotal <p-sortIcon field=\"subtotal\"></p-sortIcon></th>\n <th scope=\"col\" pSortableColumn=\"total\">Total (incl. tax) <p-sortIcon field=\"total\"></p-sortIcon></th>\n <th scope=\"col\">Action</th>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"body\" let-invoice>\n <tr>\n <td>{{ invoice.date | date:'dd-MMM-YYYY' }}</td>\n <td>\n <span class=\"badge\"\n [appDynamicBadge]=\"{\n itemsArray: invoiceFrequency,\n item: invoice.product.billing_frequency\n }\"\n color=\"blue-grey\">{{ invoice.product.billing_frequency }}</span>\n </td>\n <td>{{ invoice?.subscription_product?.purchased_units }}</td>\n <td>{{ (invoice.subtotal_in_cents / 100) | currency:invoice?.product?.currency }}</td>\n <td class=\"td-total\">{{ (invoice.total_in_cents / 100) | currency:invoice?.product?.currency }}</td>\n <td>\n <a *ngIf=\"invoice?.file?.url; else noFileUrl\" class=\"btn btn-sm btn-primary\" [attr.href]=\"invoice.file.url\" target=\"_blank\" title=\"Download\">\n <i class=\"fa fa-download\">&nbsp;Download</i>\n </a>\n <ng-template #noFileUrl>\n <a class=\"btn btn-sm btn-primary\" [attr.href]=\"invoice?.stripe_invoice_pdf\" target=\"_blank\" title=\"Download\">\n <i class=\"fa fa-download\">&nbsp;Download</i>\n </a>\n </ng-template>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n\n <span *ngIf=\"totalRecords !== 0\" class=\"total-records-count\">Total: {{ totalRecords }}</span>\n\n </div>\n</div>\n<pw-no-data [withImage]=\"true\" message=\"You don't have any invoice yet.\" *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n</pw-no-data>\n\n", styles: [".page-heading{background:#fcfcfc;border-bottom:1px solid rgba(0,0,0,.1);position:relative;width:100%}.page-heading:after{clear:both;content:\"\";display:table}.page-heading .page-heading__container{padding:15px 20px;position:relative}.page-heading .page-heading__container .title{color:#242437;font-size:15px;font-weight:500;line-height:20px;margin:3px 0 0;overflow:hidden;padding:0;text-overflow:ellipsis;width:95%}.card .card-container{position:absolute;right:20px;top:25px;z-index:1}.td-total{font-weight:700}.card-inner-container{background:#0000000d;border:1px dashed rgba(0,0,0,.1);border-radius:3px;margin-bottom:20px;padding:20px}.invoice-text{display:flex;font-size:13px;justify-content:space-between;margin:10px 0}.invoice-template{min-height:calc(100vh - 190px)}\n"], dependencies: [{ kind: "directive", type: i1$3.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i4.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i7$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i7$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i6.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i6.DatePipe, name: "date" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
1539
1539
  }
1540
1540
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UserInvoiceComponent, decorators: [{
1541
1541
  type: Component,
@@ -1609,7 +1609,7 @@ class CommunicationTabComponent extends AppBaseComponent {
1609
1609
  // });
1610
1610
  }
1611
1611
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CommunicationTabComponent, deps: [{ token: i1$2.CommonService }, { token: i1$2.ProfileService }, { token: i4$1.Store }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
1612
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: CommunicationTabComponent, selector: "pw-communication-tab", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Communication preferences</h2>\n\n <p>\n Although sometimes we do need to communicate with you - for example if you contact\n Support, or if we need to send you a receipt or invoice - we make a clear distinction\n between transactional and non-transactional communications.\n </p>\n\n <p>\n You will always receive the transactional communications but you can decide to opt out\n from all the not transactional ones. To do so, you\u2019ll just need to turn the switch off\n in the list of available communication provided below.\n </p>\n </div>\n\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n</div>\n\n<div class=\"row mt-4 pt-1\"\n *ngIf=\"isLoaded\">\n <div class=\"col-md-6 col-sm-6\">\n <ng-container *ngFor=\"let item of subscriptions; let idx = index\">\n <div class=\"mb-3\"\n *ngIf=\"item.visible || item.enabled\">\n <div class=\"row\">\n <div class=\"col-md-10 col-sm-6\">\n <label for=\"name\">{{ item.name }}</label>\n </div>\n <div class=\"col-md-2 col-sm-6\">\n <ui-switch [checked]=\"item.enabled\"\n checkedLabel=\"on\"\n uncheckedLabel=\"off\"\n (valueChange)=\"onValueChange(item, $event)\">\n </ui-switch>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n\n\n<pw-no-data [withImage]=\"true\" message=\"You don't have any communication preferences yet.\" *ngIf=\"subscriptions.length === 0 && isLoaded\">\n</pw-no-data>\n", styles: ["label{font-size:15px!important}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i11$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }] }); }
1612
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: CommunicationTabComponent, selector: "pw-communication-tab", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Communication preferences</h2>\n\n <p>\n Although sometimes we do need to communicate with you - for example if you contact\n Support, or if we need to send you a receipt or invoice - we make a clear distinction\n between transactional and non-transactional communications.\n </p>\n\n <p>\n You will always receive the transactional communications but you can decide to opt out\n from all the not transactional ones. To do so, you\u2019ll just need to turn the switch off\n in the list of available communication provided below.\n </p>\n </div>\n\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n</div>\n\n<div class=\"row mt-4 pt-1\"\n *ngIf=\"isLoaded\">\n <div class=\"col-md-6 col-sm-6\">\n <ng-container *ngFor=\"let item of subscriptions; let idx = index\">\n <div class=\"mb-3\"\n *ngIf=\"item.visible || item.enabled\">\n <div class=\"row\">\n <div class=\"col-md-10 col-sm-6\">\n <label for=\"name\">{{ item.name }}</label>\n </div>\n <div class=\"col-md-2 col-sm-6\">\n <ui-switch [checked]=\"item.enabled\"\n checkedLabel=\"on\"\n uncheckedLabel=\"off\"\n (valueChange)=\"onValueChange(item, $event)\">\n </ui-switch>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n\n\n<pw-no-data [withImage]=\"true\" message=\"You don't have any communication preferences yet.\" *ngIf=\"subscriptions.length === 0 && isLoaded\">\n</pw-no-data>\n", styles: ["label{font-size:15px!important}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i11$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }] }); }
1613
1613
  }
1614
1614
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CommunicationTabComponent, decorators: [{
1615
1615
  type: Component,
@@ -1672,7 +1672,7 @@ class OthersTabComponent extends AppBaseComponent {
1672
1672
  super.ngOnDestroy();
1673
1673
  }
1674
1674
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: OthersTabComponent, deps: [{ token: i1$2.CommonService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
1675
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: OthersTabComponent, selector: "pw-others-tab", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Other</h2>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"row mt-4 pt-1\"\n *ngIf=\"isLoaded && globalConfigs?.length\">\n <div class=\"col-md-6 col-sm-6\">\n <ng-container *ngFor=\"let item of globalConfigs; let idx = index\">\n <div class=\"mb-3\">\n <div class=\"row\">\n <div class=\"col-md-10 col-sm-6\">\n <label for=\"name\"> {{ item?.name }} </label>\n </div>\n <div class=\"col-md-2 col-sm-6\">\n <ui-switch [checked]=\"item.value === 'true'\"\n checkedLabel=\"on\"\n uncheckedLabel=\"off\"\n (valueChange)=\"onValueChange(item, $event)\">\n </ui-switch>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n\n<div *ngIf=\"isLoaded && !globalConfigs?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'User.OtherSettings.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i11$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
1675
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: OthersTabComponent, selector: "pw-others-tab", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Other</h2>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"row mt-4 pt-1\"\n *ngIf=\"isLoaded && globalConfigs?.length\">\n <div class=\"col-md-6 col-sm-6\">\n <ng-container *ngFor=\"let item of globalConfigs; let idx = index\">\n <div class=\"mb-3\">\n <div class=\"row\">\n <div class=\"col-md-10 col-sm-6\">\n <label for=\"name\"> {{ item?.name }} </label>\n </div>\n <div class=\"col-md-2 col-sm-6\">\n <ui-switch [checked]=\"item.value === 'true'\"\n checkedLabel=\"on\"\n uncheckedLabel=\"off\"\n (valueChange)=\"onValueChange(item, $event)\">\n </ui-switch>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n\n<div *ngIf=\"isLoaded && !globalConfigs?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'User.OtherSettings.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n", dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i11$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
1676
1676
  }
1677
1677
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: OthersTabComponent, decorators: [{
1678
1678
  type: Component,
@@ -1800,7 +1800,7 @@ class SecurityTabComponent extends AppBaseComponent {
1800
1800
  }
1801
1801
  }
1802
1802
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SecurityTabComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
1803
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SecurityTabComponent, selector: "pw-security-tab", viewQueries: [{ propertyName: "passwordRef", first: true, predicate: ["password"], descendants: true }, { propertyName: "verificationCode", first: true, predicate: ["verificationCode"], descendants: true }, { propertyName: "ssoPasswordRef", first: true, predicate: ["ssoPassword"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Security settings</h2>\n </div>\n</div>\n<p-accordion>\n <p-accordionTab header=\"Two Factor Authentication (2FA)\">\n <div class=\"row mt-2\">\n <div class=\"col-12\">\n <div class=\"d-flex\">\n <p class=\"small text-muted\"> Add an extra layer of security to your user account by asking to verify their\n identity when they enter a username and password </p>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <!-- Disable 2FA -->\n <button class=\"btn btn-danger\" *ngIf=\"user?.enable_two_factor_authenticator\" (click)=\"show2FA = true\"> Disable\n </button>\n <!-- Enable 2FA -->\n <button class=\"btn btn-primary\" *ngIf=\"!user?.enable_two_factor_authenticator\"\n [disabled]=\"created2faDetails?.code\" (click)=\"show2FA = true\"> Enable </button>\n </div>\n </div>\n <div class=\"row\" *ngIf=\"show2FA\">\n <div class=\"col-12 col-md-6 col-lg-4 mt-2\">\n <div class=\"mb-3\">\n <input type=\"password\" class=\"form-control\" #password *ngIf=\"!passwordVerified\" placeholder=\"Current Password\"\n (keyup)=\"checkValidity()\" />\n </div>\n </div>\n <div *ngIf=\"created2faDetails?.code\" class=\"col-12\">\n <p class=\"small\"> Scan the QR code below or use secret manually with the Google authenticator app on your mobile\n device, after that fill in the field below with the code generated in the app </p>\n <img [src]=\"created2faDetails?.qr_uri\" alt=\"loading QR code...\" class=\"qr-code img-thumbnail img-responsive\" />\n <strong> Secret Key: {{ created2faDetails?.code }}</strong>\n <p class=\"small\">Auth Type: Time Based OTP</p>\n </div>\n </div>\n <div class=\"row\" *ngIf=\"show2FA\">\n <div class=\"col-4\">\n <div class=\"mb-3 mt-2\">\n <input type=\"text\" #verificationCode class=\"form-control\" *ngIf=\"passwordVerified\"\n placeholder=\"Provide passcode from authenticator app\" />\n </div>\n </div>\n <div class=\"col-12\" *ngIf=\"show2FA\">\n <div class=\"d-flex mt-2\">\n <button class=\"btn btn-raised btn-outline-default me-2\" (click)=\"reset()\"> Cancel </button>\n <button class=\"btn btn-raised btn-primary\" *ngIf=\"!passwordVerified\" (click)=\"validatePassword()\"\n [disabled]=\"isCurrentPasswordValid\"> Validate </button>\n <button class=\"btn btn-raised btn-primary\" *ngIf=\"passwordVerified\" (click)=\"verify2FA()\"> Confirm </button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n</p-accordion>\n<p-accordion>\n <p-accordionTab header=\"Single Sign On (SSO) - AWS Cognito\">\n <div class=\"row mt-2\">\n <div class=\"col-12\">\n <p class=\"small text-muted\"> {{ user?.cognito_sso_activated ? 'You have already activated AWS Cognito SSO, if you click on \u2018Resend activation email\u2018 you\u2018ll receive an email with instructions to reset your SSO\n password.' : 'Once you click \u2018Enable\u2019, you\u2019ll receive an email with instructions to activate your AWS Cognito\n SSO. This will enable you to access all our systems using a single password.' }} </p>\n </div>\n </div>\n <!-- Enable or Resend Button -->\n <div class=\"row\" *ngIf=\"!showSSOSection\">\n <div class=\"col-12\">\n <button class=\"btn btn-primary\" (click)=\"showSSOSection = true\"> {{ user?.cognito_sso_activated ? 'Resend\n activation email' : 'Enable' }} </button>\n </div>\n </div>\n <!-- Password Validation -->\n <div class=\"row\" *ngIf=\"showSSOSection\">\n <div class=\"col-12 col-md-6 col-lg-4 mt-2\" *ngIf=\"!ssoPasswordVerified\">\n <div class=\"mb-3\">\n <input type=\"password\" class=\"form-control\" #ssoPassword placeholder=\"Current Password\"\n (keyup)=\"checkSSOPasswordValidity()\" />\n </div>\n </div>\n <div class=\"col-12\">\n <div class=\"d-flex mt-2\">\n <button class=\"btn btn-raised btn-outline-default me-2\" (click)=\"resetSSO()\"> Cancel </button>\n <button class=\"btn btn-raised btn-primary\" *ngIf=\"!ssoPasswordVerified\" (click)=\"validateSSOPassword()\"\n [disabled]=\"isSSOPasswordInvalid\"> Validate </button>\n <button class=\"btn btn-primary\" *ngIf=\"ssoPasswordVerified\" (click)=\"triggerSSO()\"> Confirm </button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n</p-accordion>\n", styles: [".qr-code{margin:10px;max-width:200px}.text-muted{font-size:15px!important}\n"], dependencies: [{ kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i3$1.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }] }); }
1803
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SecurityTabComponent, selector: "pw-security-tab", viewQueries: [{ propertyName: "passwordRef", first: true, predicate: ["password"], descendants: true }, { propertyName: "verificationCode", first: true, predicate: ["verificationCode"], descendants: true }, { propertyName: "ssoPasswordRef", first: true, predicate: ["ssoPassword"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Security settings</h2>\n </div>\n</div>\n<p-accordion>\n <p-accordionTab header=\"Two Factor Authentication (2FA)\">\n <div class=\"row mt-2\">\n <div class=\"col-12\">\n <div class=\"d-flex\">\n <p class=\"small text-muted\"> Add an extra layer of security to your user account by asking to verify their\n identity when they enter a username and password </p>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <!-- Disable 2FA -->\n <button class=\"btn btn-danger\" *ngIf=\"user?.enable_two_factor_authenticator\" (click)=\"show2FA = true\"> Disable\n </button>\n <!-- Enable 2FA -->\n <button class=\"btn btn-primary\" *ngIf=\"!user?.enable_two_factor_authenticator\"\n [disabled]=\"created2faDetails?.code\" (click)=\"show2FA = true\"> Enable </button>\n </div>\n </div>\n <div class=\"row\" *ngIf=\"show2FA\">\n <div class=\"col-12 col-md-6 col-lg-4 mt-2\">\n <div class=\"mb-3\">\n <input type=\"password\" class=\"form-control\" #password *ngIf=\"!passwordVerified\" placeholder=\"Current Password\"\n (keyup)=\"checkValidity()\" />\n </div>\n </div>\n <div *ngIf=\"created2faDetails?.code\" class=\"col-12\">\n <p class=\"small\"> Scan the QR code below or use secret manually with the Google authenticator app on your mobile\n device, after that fill in the field below with the code generated in the app </p>\n <img [src]=\"created2faDetails?.qr_uri\" alt=\"loading QR code...\" class=\"qr-code img-thumbnail img-responsive\" />\n <strong> Secret Key: {{ created2faDetails?.code }}</strong>\n <p class=\"small\">Auth Type: Time Based OTP</p>\n </div>\n </div>\n <div class=\"row\" *ngIf=\"show2FA\">\n <div class=\"col-4\">\n <div class=\"mb-3 mt-2\">\n <input type=\"text\" #verificationCode class=\"form-control\" *ngIf=\"passwordVerified\"\n placeholder=\"Provide passcode from authenticator app\" />\n </div>\n </div>\n <div class=\"col-12\" *ngIf=\"show2FA\">\n <div class=\"d-flex mt-2\">\n <button class=\"btn btn-raised btn-outline-default me-2\" (click)=\"reset()\"> Cancel </button>\n <button class=\"btn btn-raised btn-primary\" *ngIf=\"!passwordVerified\" (click)=\"validatePassword()\"\n [disabled]=\"isCurrentPasswordValid\"> Validate </button>\n <button class=\"btn btn-raised btn-primary\" *ngIf=\"passwordVerified\" (click)=\"verify2FA()\"> Confirm </button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n</p-accordion>\n<p-accordion>\n <p-accordionTab header=\"Single Sign On (SSO) - AWS Cognito\">\n <div class=\"row mt-2\">\n <div class=\"col-12\">\n <p class=\"small text-muted\"> {{ user?.cognito_sso_activated ? 'You have already activated AWS Cognito SSO, if you click on \u2018Resend activation email\u2018 you\u2018ll receive an email with instructions to reset your SSO\n password.' : 'Once you click \u2018Enable\u2019, you\u2019ll receive an email with instructions to activate your AWS Cognito\n SSO. This will enable you to access all our systems using a single password.' }} </p>\n </div>\n </div>\n <!-- Enable or Resend Button -->\n <div class=\"row\" *ngIf=\"!showSSOSection\">\n <div class=\"col-12\">\n <button class=\"btn btn-primary\" (click)=\"showSSOSection = true\"> {{ user?.cognito_sso_activated ? 'Resend\n activation email' : 'Enable' }} </button>\n </div>\n </div>\n <!-- Password Validation -->\n <div class=\"row\" *ngIf=\"showSSOSection\">\n <div class=\"col-12 col-md-6 col-lg-4 mt-2\" *ngIf=\"!ssoPasswordVerified\">\n <div class=\"mb-3\">\n <input type=\"password\" class=\"form-control\" #ssoPassword placeholder=\"Current Password\"\n (keyup)=\"checkSSOPasswordValidity()\" />\n </div>\n </div>\n <div class=\"col-12\">\n <div class=\"d-flex mt-2\">\n <button class=\"btn btn-raised btn-outline-default me-2\" (click)=\"resetSSO()\"> Cancel </button>\n <button class=\"btn btn-raised btn-primary\" *ngIf=\"!ssoPasswordVerified\" (click)=\"validateSSOPassword()\"\n [disabled]=\"isSSOPasswordInvalid\"> Validate </button>\n <button class=\"btn btn-primary\" *ngIf=\"ssoPasswordVerified\" (click)=\"triggerSSO()\"> Confirm </button>\n </div>\n </div>\n </div>\n </p-accordionTab>\n</p-accordion>\n", styles: [".qr-code{margin:10px;max-width:200px}.text-muted{font-size:15px!important}\n"], dependencies: [{ kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i3.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }] }); }
1804
1804
  }
1805
1805
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SecurityTabComponent, decorators: [{
1806
1806
  type: Component,
@@ -1881,7 +1881,7 @@ class SupportComponent extends AppBaseComponent {
1881
1881
  });
1882
1882
  }
1883
1883
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SupportComponent, deps: [{ token: i0.Injector }, { token: i1$2.CommonService }], target: i0.ɵɵFactoryTarget.Component }); }
1884
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SupportComponent, selector: "pw-support", usesInheritance: true, ngImport: i0, template: "<div class=\"row m-3\">\n <div class=\"col-12 mb-3\">\n <div\n\t\tclass=\"col-12 d-flex flex-wrap justify-content-between align-items-center mt-4\">\n\t\t<h2 class=\"card-title p-0 float-start\">Support Center</h2>\n\t\t<a routerLink=\"/support-details/add\"\n\t\t\taria-label=\"Navigate to Target\"\n\t\t\tclass=\"btn btn-sm btn-outline-primary float-end\"\n tabindex=\"0\"\n (keydown)=\"$event.key === 'Enter' && $event.target.click()\"\n\t\t\taria-expanded=\"false\">\n\t\t\t<i class=\"fa fa-plus-circle\"\n\t\t\t\taria-hidden=\"true\"></i>\n Create new support request\n\t\t</a>\n\t</div>\n </div>\n <div class=\"col-12 my-3\">\n <h3>Previous support requests</h3>\n <p>Please note that responses to your support requests are sent directly to your email. You can simply reply to those\n emails for further assistance.</p>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"col-12 mb-3\">\n <p-accordion>\n <p-accordionTab *ngFor=\"let item of supports\"\n header=\"{{ item?.created_at | dateFormat }} ({{ item?.user_name }}) {{ item?.title }}\">\n <p>{{ item?.description }}</p>\n <a [href]=\"item?.attachment?.version_200x200?.url\"\n target=\"_blank\">\n <img alt=\"version_200x200\"\n *ngIf=\"item?.attachment?.version_200x200?.url\"\n [src]=\"item?.attachment?.version_200x200?.url\"\n class=\"img-fluid\" /></a>\n </p-accordionTab>\n </p-accordion>\n </div>\n <div class=\"col-12\"\n *ngIf=\"!supports?.length && isLoaded\">\n <pw-no-data [withImage]=\"true\" message=\"No support requests found\"> </pw-no-data>\n </div>\n</div>\n", styles: [".contact-support{font-size:24px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$1.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i3$1.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "pipe", type: i6$1.DateFormatPipe, name: "dateFormat" }] }); }
1884
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SupportComponent, selector: "pw-support", usesInheritance: true, ngImport: i0, template: "<div class=\"row m-3\">\n <div class=\"col-12 mb-3\">\n <div\n\t\tclass=\"col-12 d-flex flex-wrap justify-content-between align-items-center mt-4\">\n\t\t<h2 class=\"card-title p-0 float-start\">Support Center</h2>\n\t\t<a routerLink=\"/support-details/add\"\n\t\t\taria-label=\"Navigate to Target\"\n\t\t\tclass=\"btn btn-sm btn-outline-primary float-end\"\n tabindex=\"0\"\n (keydown)=\"$event.key === 'Enter' && $event.target.click()\"\n\t\t\taria-expanded=\"false\">\n\t\t\t<i class=\"fa fa-plus-circle\"\n\t\t\t\taria-hidden=\"true\"></i>\n Create new support request\n\t\t</a>\n\t</div>\n </div>\n <div class=\"col-12 my-3\">\n <h3>Previous support requests</h3>\n <p>Please note that responses to your support requests are sent directly to your email. You can simply reply to those\n emails for further assistance.</p>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"col-12 mb-3\">\n <p-accordion>\n <p-accordionTab *ngFor=\"let item of supports\"\n header=\"{{ item?.created_at | dateFormat }} ({{ item?.user_name }}) {{ item?.title }}\">\n <p>{{ item?.description }}</p>\n <a [href]=\"item?.attachment?.version_200x200?.url\"\n target=\"_blank\">\n <img alt=\"version_200x200\"\n *ngIf=\"item?.attachment?.version_200x200?.url\"\n [src]=\"item?.attachment?.version_200x200?.url\"\n class=\"img-fluid\" /></a>\n </p-accordionTab>\n </p-accordion>\n </div>\n <div class=\"col-12\"\n *ngIf=\"!supports?.length && isLoaded\">\n <pw-no-data [withImage]=\"true\" message=\"No support requests found\"> </pw-no-data>\n </div>\n</div>\n", styles: [".contact-support{font-size:24px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i3.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "pipe", type: i6$2.DateFormatPipe, name: "dateFormat" }] }); }
1885
1885
  }
1886
1886
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SupportComponent, decorators: [{
1887
1887
  type: Component,
@@ -1977,7 +1977,7 @@ class SupportDetailsComponent extends AppBaseComponent {
1977
1977
  HelperService.onUploadError(event, this.toast);
1978
1978
  }
1979
1979
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SupportDetailsComponent, deps: [{ token: i0.Injector }, { token: i1$2.CommonService }, { token: i1$2.AuthService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
1980
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SupportDetailsComponent, selector: "pw-support-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i\n class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"mt-3\">{{ 'Label.NewSupport' | transloco }}</h3>\n </div>\n <div class=\"p-2 m-1 mt-3\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12\">\n <pw-input-container label=\"title\"\n name=\"title\"\n errorMsg=\"Title is required\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"title\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-12\">\n <pw-input-container label=\"Description\"\n errorMsg=\"description is required\"\n name=\"description\">\n <textarea rows=\"3\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"></textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <h4 class=\"mt-4\">You can add a picture here</h4>\n <div class=\"mb-3 file-upload-support-details\">\n <label for=\"file\">Upload Picture</label>\n <p-fileUpload #forms\n name=\"myfile[]\"\n [customUpload]=\"true\"\n [showUploadButton]=\"false\"\n accept=\"image/*\"\n [disabled]=\"uploadedFiles && uploadedFiles.length > 0\"\n (onSelect)=\"onSelect($event)\"\n (onRemove)=\"onRemove($event)\"\n (onError)=\"onUploadError($event)\">\n <ng-template pTemplate=\"content\"\n [ngIf]=\"uploadedFiles?.length\">\n <div class=\"drag-drop-text\" *ngIf=\"!filesUploaded && (!uploadedFiles || uploadedFiles.length === 0)\">\n <p>You can drag and drop your file here</p>\n </div>\n </ng-template>\n </p-fileUpload>\n </div>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"col-12 text-end mt-3\">\n <ng-container *ngIf=\"isSubmitClicked\">\n <div class=\"support-details-captcha\">\n <ngx-recaptcha2 [ngModelOptions]=\"{ standalone: true }\"\n [siteKey]=\"siteKey\"\n size=\"normal\"\n [(ngModel)]=\"recaptcha\"\n (success)=\"handleSuccess($event)\">\n </ngx-recaptcha2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isSubmitClicked\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n class=\"btn btn-primary\" [disabled]=\"invalidFile\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </ng-container>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n</div>\n", styles: ["::ng-deep .file-upload-support-details .p-fileupload .p-fileupload-content{padding:4rem 1rem}::ng-deep .file-upload-support-details .p-fileupload-content .p-fileupload-files .p-fileupload-row>:first-child{display:none}.support-details-captcha{text-align:-webkit-right}.drag-drop-text{padding:20px;border:2px dashed #ccc;text-align:center;color:#aaa;margin-top:10px}::ng-deep .file-upload-support-details .p-fileupload .p-fileupload-content{padding:1rem}::ng-deep .file-upload-support-details .p-fileupload-content .p-fileupload-files .p-fileupload-row>:first-child{display:flex}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$3.ReCaptcha2Component, selector: "ngx-recaptcha2", inputs: ["theme", "size"] }, { kind: "component", type: i8.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
1980
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SupportDetailsComponent, selector: "pw-support-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i\n class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"mt-3\">{{ 'Label.NewSupport' | transloco }}</h3>\n </div>\n <div class=\"p-2 m-1 mt-3\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12\">\n <pw-input-container label=\"title\"\n name=\"title\"\n errorMsg=\"Title is required\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"title\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-12\">\n <pw-input-container label=\"Description\"\n errorMsg=\"description is required\"\n name=\"description\">\n <textarea rows=\"3\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"></textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <h4 class=\"mt-4\">You can add a picture here</h4>\n <div class=\"mb-3 file-upload-support-details\">\n <label for=\"file\">Upload Picture</label>\n <p-fileUpload #forms\n name=\"myfile[]\"\n [customUpload]=\"true\"\n [showUploadButton]=\"false\"\n accept=\"image/*\"\n [disabled]=\"uploadedFiles && uploadedFiles.length > 0\"\n (onSelect)=\"onSelect($event)\"\n (onRemove)=\"onRemove($event)\"\n (onError)=\"onUploadError($event)\">\n <ng-template pTemplate=\"content\"\n [ngIf]=\"uploadedFiles?.length\">\n <div class=\"drag-drop-text\" *ngIf=\"!filesUploaded && (!uploadedFiles || uploadedFiles.length === 0)\">\n <p>You can drag and drop your file here</p>\n </div>\n </ng-template>\n </p-fileUpload>\n </div>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"col-12 text-end mt-3\">\n <ng-container *ngIf=\"isSubmitClicked\">\n <div class=\"support-details-captcha\">\n <ngx-recaptcha2 [ngModelOptions]=\"{ standalone: true }\"\n [siteKey]=\"siteKey\"\n size=\"normal\"\n [(ngModel)]=\"recaptcha\"\n (success)=\"handleSuccess($event)\">\n </ngx-recaptcha2>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isSubmitClicked\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n class=\"btn btn-primary\" [disabled]=\"invalidFile\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </ng-container>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n</div>\n", styles: ["::ng-deep .file-upload-support-details .p-fileupload .p-fileupload-content{padding:4rem 1rem}::ng-deep .file-upload-support-details .p-fileupload-content .p-fileupload-files .p-fileupload-row>:first-child{display:none}.support-details-captcha{text-align:-webkit-right}.drag-drop-text{padding:20px;border:2px dashed #ccc;text-align:center;color:#aaa;margin-top:10px}::ng-deep .file-upload-support-details .p-fileupload .p-fileupload-content{padding:1rem}::ng-deep .file-upload-support-details .p-fileupload-content .p-fileupload-files .p-fileupload-row>:first-child{display:flex}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$3.ReCaptcha2Component, selector: "ngx-recaptcha2", inputs: ["theme", "size"] }, { kind: "component", type: i8.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
1981
1981
  }
1982
1982
  __decorate([
1983
1983
  ValidateForm('form'),
@@ -2071,7 +2071,7 @@ class EditPortfoliosComponent {
2071
2071
  HelperService.onUploadError(event);
2072
2072
  }
2073
2073
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EditPortfoliosComponent, deps: [{ token: i1$1.NgbModal }, { token: i1$2.ProfileService }], target: i0.ɵɵFactoryTarget.Component }); }
2074
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EditPortfoliosComponent, selector: "pw-edit-portfolios", inputs: { id: "id", slug: "slug" }, outputs: { successEvent: "successEvent" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "uploader", first: true, predicate: ["form"], descendants: true }], ngImport: i0, template: "<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\"\n id=\"modal-basic-title\">Add/Edit Portfolio Item</h4>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n Add a cover image or a downloadable file for your portfolio item\n <p-fileUpload #form\n name=\"myfile[]\"\n [customUpload]=\"true\"\n [showUploadButton]=\"false\"\n accept=\"\"\n [disabled]=\"uploadedFiles && uploadedFiles.length > 0\"\n (onSelect)=\"onSelect($event)\"\n (onRemove)=\"onRemove($event)\"\n (onError)=\"onUploadError($event)\">\n <ng-template pTemplate=\"content\"\n [ngIf]=\"uploadedFiles?.length\">\n <div class=\"drag-drop-text\" *ngIf=\"!filesUploaded && (!uploadedFiles || uploadedFiles.length === 0)\">\n <p>You can drag and drop your file here</p>\n </div>\n </ng-template>\n </p-fileUpload>\n <div class=\"ui-fileupload-content ui-widget-content ui-corner-bottom\">\n <div class=\"ui-fileupload-files\">\n <div class=\"\">\n <h5>Uploaded Pictures</h5>\n <div *ngFor=\"let image of projectPictures; trackBy: trackByImage\"\n class=\"ui-fileupload-row d-inline-block\">\n <div>\n <img [src]=\"image?.picture?.version_50x50?.url\"\n alt=\"\"\n width=\"50\" />\n </div>\n <div class=\"pt-1 ps-1\">\n <button icon=\"pi pi-times\"\n type=\"button\"\n (click)=\"deleteProjectPicture(image.id)\"\n class=\"ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only\">\n <span class=\"ui-button-icon-left ui-clickable pi pi-times\"></span>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\"\n class=\"btn btn-outline-default\"\n (click)=\"modal.close()\">\n Cancel\n </button>\n <button type=\"button\"\n class=\"btn btn-primary\"\n [buttonBusy]=\"busy\"\n (click)=\"onSave(form)\">\n Save\n </button>\n </div>\n</ng-template>\n", styles: [".drag-drop-text{padding:20px;border:2px dashed #ccc;text-align:center;color:#aaa;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i8.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }] }); }
2074
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EditPortfoliosComponent, selector: "pw-edit-portfolios", inputs: { id: "id", slug: "slug" }, outputs: { successEvent: "successEvent" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "uploader", first: true, predicate: ["form"], descendants: true }], ngImport: i0, template: "<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\"\n id=\"modal-basic-title\">Add/Edit Portfolio Item</h4>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n Add a cover image or a downloadable file for your portfolio item\n <p-fileUpload #form\n name=\"myfile[]\"\n [customUpload]=\"true\"\n [showUploadButton]=\"false\"\n accept=\"\"\n [disabled]=\"uploadedFiles && uploadedFiles.length > 0\"\n (onSelect)=\"onSelect($event)\"\n (onRemove)=\"onRemove($event)\"\n (onError)=\"onUploadError($event)\">\n <ng-template pTemplate=\"content\"\n [ngIf]=\"uploadedFiles?.length\">\n <div class=\"drag-drop-text\" *ngIf=\"!filesUploaded && (!uploadedFiles || uploadedFiles.length === 0)\">\n <p>You can drag and drop your file here</p>\n </div>\n </ng-template>\n </p-fileUpload>\n <div class=\"ui-fileupload-content ui-widget-content ui-corner-bottom\">\n <div class=\"ui-fileupload-files\">\n <div class=\"\">\n <h5>Uploaded Pictures</h5>\n <div *ngFor=\"let image of projectPictures; trackBy: trackByImage\"\n class=\"ui-fileupload-row d-inline-block\">\n <div>\n <img [src]=\"image?.picture?.version_50x50?.url\"\n alt=\"\"\n width=\"50\" />\n </div>\n <div class=\"pt-1 ps-1\">\n <button icon=\"pi pi-times\"\n type=\"button\"\n (click)=\"deleteProjectPicture(image.id)\"\n class=\"ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only\">\n <span class=\"ui-button-icon-left ui-clickable pi pi-times\"></span>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\"\n class=\"btn btn-outline-default\"\n (click)=\"modal.close()\">\n Cancel\n </button>\n <button type=\"button\"\n class=\"btn btn-primary\"\n [buttonBusy]=\"busy\"\n (click)=\"onSave(form)\">\n Save\n </button>\n </div>\n</ng-template>\n", styles: [".drag-drop-text{padding:20px;border:2px dashed #ccc;text-align:center;color:#aaa;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i8.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }] }); }
2075
2075
  }
2076
2076
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EditPortfoliosComponent, decorators: [{
2077
2077
  type: Component,
@@ -2205,7 +2205,7 @@ class EditProjectModalComponent extends AppBaseComponent {
2205
2205
  });
2206
2206
  }
2207
2207
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EditProjectModalComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.UntypedFormBuilder }, { token: i1$2.ProfileService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
2208
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EditProjectModalComponent, selector: "pw-edit-project-modal", outputs: { cancelEvent: "cancelEvent", saveEvent: "saveEvent" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\"\n id=\"modal-basic-title\">{{ title }}</h4>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <form [formGroup]=\"form\">\n <div class=\"row p-2\">\n <!-- Title -->\n <pw-input-container class=\"col-12\"\n label=\"Title\"\n name=\"title\"\n errorMsg=\"This field is required.\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"title\"\n [ngClass]=\"{ 'is-invalid': submitted && f.title.errors }\" />\n </pw-input-container>\n <!-- Client Name -->\n <pw-input-container class=\"col-12\"\n label=\"Client Name\"\n name=\"client_name\"\n errorMsg=\"This field is required.\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"client_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f.client_name.errors }\" />\n </pw-input-container>\n <!-- Project Start Year -->\n <pw-input-container class=\"col-4\"\n label=\"Start\"\n name=\"start_year\"\n errorMsg=\"YYYY format date is required\">\n <p-dropdown\n (onShow)=\"getStartYear()\"\n formControlName=\"start_year\"\n [options]=\"startYears\"\n [placeholder]=\"'Select Start Year'\"\n (onChange)=\"getEndYears($event.value)\"\n [ngClass]=\"{ 'is-invalid': submitted && f.start_year.errors }\">\n </p-dropdown>\n </pw-input-container>\n <!-- Project End Year -->\n <pw-input-container class=\"col-4\"\n label=\"End\"\n name=\"end_year\"\n errorMsg=\"YYYY format date is required\">\n <p-dropdown\n formControlName=\"end_year\"\n [options]=\"endYears\"\n [placeholder]=\"'Select End Year'\"\n (onChange)=\"getEndYears($event.value)\"\n [ngClass]=\"{ 'is-invalid': submitted && f.end_year.errors }\">\n </p-dropdown>\n </pw-input-container>\n <!-- Total Weeks Worked -->\n <pw-input-container class=\"col-4\"\n label=\"Weeks worked\"\n name=\"length\"\n errorMsg=\"This field is required. (0-5000)\">\n <input type=\"number\"\n formControlName=\"length\"\n class=\"form-control\"\n placeholder=\"weeks\"\n [ngClass]=\"{ 'is-invalid': submitted && f.length.errors }\" />\n </pw-input-container>\n <!-- Description -->\n <pw-input-container class=\"col-12\"\n label=\"Description\"\n name=\"description\"\n errorMsg=\"This field is required.\">\n <textarea type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n required\n [ngClass]=\"{ 'is-invalid': submitted && f.description.errors }\"></textarea>\n </pw-input-container>\n </div>\n </form>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\"\n class=\"btn btn-outline-default\"\n (click)=\"modal.close()\">\n Cancel\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\"\n (click)=\"onSaveDetail()\">Save</button>\n </div>\n</ng-template>\n", styles: [".ng-valid.is-invalid{background-image:none;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i7$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
2208
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EditProjectModalComponent, selector: "pw-edit-project-modal", outputs: { cancelEvent: "cancelEvent", saveEvent: "saveEvent" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\"\n id=\"modal-basic-title\">{{ title }}</h4>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <form [formGroup]=\"form\">\n <div class=\"row p-2\">\n <!-- Title -->\n <pw-input-container class=\"col-12\"\n label=\"Title\"\n name=\"title\"\n errorMsg=\"This field is required.\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"title\"\n [ngClass]=\"{ 'is-invalid': submitted && f.title.errors }\" />\n </pw-input-container>\n <!-- Client Name -->\n <pw-input-container class=\"col-12\"\n label=\"Client Name\"\n name=\"client_name\"\n errorMsg=\"This field is required.\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"client_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f.client_name.errors }\" />\n </pw-input-container>\n <!-- Project Start Year -->\n <pw-input-container class=\"col-4\"\n label=\"Start\"\n name=\"start_year\"\n errorMsg=\"YYYY format date is required\">\n <p-dropdown\n (onShow)=\"getStartYear()\"\n formControlName=\"start_year\"\n [options]=\"startYears\"\n [placeholder]=\"'Select Start Year'\"\n (onChange)=\"getEndYears($event.value)\"\n [ngClass]=\"{ 'is-invalid': submitted && f.start_year.errors }\">\n </p-dropdown>\n </pw-input-container>\n <!-- Project End Year -->\n <pw-input-container class=\"col-4\"\n label=\"End\"\n name=\"end_year\"\n errorMsg=\"YYYY format date is required\">\n <p-dropdown\n formControlName=\"end_year\"\n [options]=\"endYears\"\n [placeholder]=\"'Select End Year'\"\n (onChange)=\"getEndYears($event.value)\"\n [ngClass]=\"{ 'is-invalid': submitted && f.end_year.errors }\">\n </p-dropdown>\n </pw-input-container>\n <!-- Total Weeks Worked -->\n <pw-input-container class=\"col-4\"\n label=\"Weeks worked\"\n name=\"length\"\n errorMsg=\"This field is required. (0-5000)\">\n <input type=\"number\"\n formControlName=\"length\"\n class=\"form-control\"\n placeholder=\"weeks\"\n [ngClass]=\"{ 'is-invalid': submitted && f.length.errors }\" />\n </pw-input-container>\n <!-- Description -->\n <pw-input-container class=\"col-12\"\n label=\"Description\"\n name=\"description\"\n errorMsg=\"This field is required.\">\n <textarea type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n required\n [ngClass]=\"{ 'is-invalid': submitted && f.description.errors }\"></textarea>\n </pw-input-container>\n </div>\n </form>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\"\n class=\"btn btn-outline-default\"\n (click)=\"modal.close()\">\n Cancel\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\"\n (click)=\"onSaveDetail()\">Save</button>\n </div>\n</ng-template>\n", styles: [".ng-valid.is-invalid{background-image:none;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i7$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
2209
2209
  }
2210
2210
  __decorate([
2211
2211
  ValidateForm('form'),
@@ -2309,7 +2309,7 @@ class EditQualificationsModalComponent extends AppBaseComponent {
2309
2309
  });
2310
2310
  }
2311
2311
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EditQualificationsModalComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.UntypedFormBuilder }, { token: i1$2.QualificationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
2312
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EditQualificationsModalComponent, selector: "pw-edit-qualifications-modal", outputs: { saveEvent: "saveEvent" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\"\n id=\"modal-basic-title\">{{ title }}</h4>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <form [formGroup]=\"form\">\n <div class=\"row p-2\">\n <pw-input-container class=\"col-12\"\n label=\"School\"\n name=\"school\"\n errorMsg=\"This field is required.\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"school\" />\n </pw-input-container>\n\n <pw-input-container class=\"col-6\"\n label=\"Dates Attended\"\n name=\"started_on\"\n errorMsg=\"This field is required.\">\n <div class=\"ui-fluid\">\n <p-calendar formControlName=\"started_on\"\n [monthNavigator]=\"true\"\n [yearNavigator]=\"true\"\n yearRange=\"1950:2020\"\n (onSelect)=\"onDateChange()\"\n [showIcon]=\"true\"\n dateFormat=\"yy-mm-dd\">\n </p-calendar>\n </div>\n </pw-input-container>\n\n <pw-input-container class=\"col-6\"\n label=\"Dates Completed\"\n name=\"ended_on\"\n errorMsg=\"This field is required.\">\n <div class=\"ui-fluid\">\n <p-calendar formControlName=\"ended_on\"\n [monthNavigator]=\"true\"\n [yearNavigator]=\"true\"\n [showIcon]=\"true\"\n (onSelect)=\"onDateChange()\"\n [minDate]=\"minToDate\"\n dateFormat=\"yy-mm-dd\"\n yearRange=\"1950:2025\"></p-calendar>\n </div>\n </pw-input-container>\n\n <pw-input-container class=\"col-12\"\n label=\"Degree\"\n name=\"points\"\n errorMsg=\"This field is required.\">\n <p-dropdown [options]=\"qualifications\"\n placeholder=\"Select\"\n formControlName=\"points\"></p-dropdown>\n </pw-input-container>\n\n <pw-input-container class=\"col-12\"\n label=\"Course\"\n name=\"course\"\n errorMsg=\"This field is required.\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"course\" />\n </pw-input-container>\n\n <pw-input-container class=\"col-12\"\n label=\"Description\"\n name=\"description\">\n <textarea type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n </form>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\"\n class=\"btn btn-outline-default\"\n (click)=\"modal.close()\">\n Cancel\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\"\n (click)=\"onSaveDetail()\">Save</button>\n </div>\n</ng-template>\n\n<i\n class=\"fa fa-lg pi pi-plus-circle float-end mt-2 pt-1 pt-md-0 profile-icons\"\n data-cy=\"add-qualification\"\n (keydown.enter)=\"onOpen()\"\n aria-label=\"Add Qualification\"\n (click)=\"onOpen()\"\n aria-hidden=\"true\"\n></i>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.btn-add{cursor:pointer;font-size:24px}.profile-icons{color:var(--first)}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i6$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i7$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
2312
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EditQualificationsModalComponent, selector: "pw-edit-qualifications-modal", outputs: { saveEvent: "saveEvent" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\"\n id=\"modal-basic-title\">{{ title }}</h4>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <form [formGroup]=\"form\">\n <div class=\"row p-2\">\n <pw-input-container class=\"col-12\"\n label=\"School\"\n name=\"school\"\n errorMsg=\"This field is required.\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"school\" />\n </pw-input-container>\n\n <pw-input-container class=\"col-6\"\n label=\"Dates Attended\"\n name=\"started_on\"\n errorMsg=\"This field is required.\">\n <div class=\"ui-fluid\">\n <p-calendar formControlName=\"started_on\"\n [monthNavigator]=\"true\"\n [yearNavigator]=\"true\"\n yearRange=\"1950:2020\"\n (onSelect)=\"onDateChange()\"\n [showIcon]=\"true\"\n dateFormat=\"yy-mm-dd\">\n </p-calendar>\n </div>\n </pw-input-container>\n\n <pw-input-container class=\"col-6\"\n label=\"Dates Completed\"\n name=\"ended_on\"\n errorMsg=\"This field is required.\">\n <div class=\"ui-fluid\">\n <p-calendar formControlName=\"ended_on\"\n [monthNavigator]=\"true\"\n [yearNavigator]=\"true\"\n [showIcon]=\"true\"\n (onSelect)=\"onDateChange()\"\n [minDate]=\"minToDate\"\n dateFormat=\"yy-mm-dd\"\n yearRange=\"1950:2025\"></p-calendar>\n </div>\n </pw-input-container>\n\n <pw-input-container class=\"col-12\"\n label=\"Degree\"\n name=\"points\"\n errorMsg=\"This field is required.\">\n <p-dropdown [options]=\"qualifications\"\n placeholder=\"Select\"\n formControlName=\"points\"></p-dropdown>\n </pw-input-container>\n\n <pw-input-container class=\"col-12\"\n label=\"Course\"\n name=\"course\"\n errorMsg=\"This field is required.\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"course\" />\n </pw-input-container>\n\n <pw-input-container class=\"col-12\"\n label=\"Description\"\n name=\"description\">\n <textarea type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n </form>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\"\n class=\"btn btn-outline-default\"\n (click)=\"modal.close()\">\n Cancel\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\"\n (click)=\"onSaveDetail()\">Save</button>\n </div>\n</ng-template>\n\n<i\n class=\"fa fa-lg pi pi-plus-circle float-end mt-2 pt-1 pt-md-0 profile-icons\"\n data-cy=\"add-qualification\"\n (keydown.enter)=\"onOpen()\"\n aria-label=\"Add Qualification\"\n (click)=\"onOpen()\"\n aria-hidden=\"true\"\n></i>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.btn-add{cursor:pointer;font-size:24px}.profile-icons{color:var(--first)}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i6$3.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i7$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
2313
2313
  }
2314
2314
  __decorate([
2315
2315
  ValidateForm('form'),
@@ -2374,7 +2374,7 @@ class EditRecommendationModalComponent {
2374
2374
  });
2375
2375
  }
2376
2376
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EditRecommendationModalComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.UntypedFormBuilder }, { token: i1$2.ProfileService }], target: i0.ɵɵFactoryTarget.Component }); }
2377
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EditRecommendationModalComponent, selector: "pw-edit-recommendation-modal", inputs: { user: "user" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\"\n id=\"modal-basic-title\">{{ title }}</h4>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <form [formGroup]=\"form\">\n <div class=\"row p-2\">\n <pw-input-container class=\"col-12 col-md-4\"\n label=\"Quality\"\n name=\"quality\"\n errorMsg=\"This field is required.\">\n <p-rating formControlName=\"quality\"\n [cancel]=\"false\"></p-rating>\n </pw-input-container>\n\n <pw-input-container class=\"col-12 col-md-4\"\n label=\"Communication\"\n name=\"communication\"\n errorMsg=\"This field is required.\">\n <p-rating formControlName=\"communication\"\n [cancel]=\"false\"></p-rating>\n </pw-input-container>\n\n <pw-input-container class=\"col-12 col-md-4\"\n label=\"Time\"\n name=\"time\"\n errorMsg=\"This field is required.\">\n <p-rating formControlName=\"time\"\n [cancel]=\"false\"></p-rating>\n </pw-input-container>\n\n <pw-input-container class=\"col-12\"\n label=\"Description\"\n name=\"description\"\n errorMsg=\"This field is required.\">\n <textarea type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n </form>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\"\n class=\"btn btn-outline-default\"\n (click)=\"modal.close()\">\n Cancel\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\"\n (click)=\"onSaveDetail()\">Save</button>\n </div>\n</ng-template>\n\n<!-- <i class=\"fal fa-plus-circle fa-2x btn-link float-end btn-add\" (click)=\"onOpen()\" aria-hidden=\"true\"></i> -->\n", dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i6$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }] }); }
2377
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EditRecommendationModalComponent, selector: "pw-edit-recommendation-modal", inputs: { user: "user" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\"\n id=\"modal-basic-title\">{{ title }}</h4>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <form [formGroup]=\"form\">\n <div class=\"row p-2\">\n <pw-input-container class=\"col-12 col-md-4\"\n label=\"Quality\"\n name=\"quality\"\n errorMsg=\"This field is required.\">\n <p-rating formControlName=\"quality\"\n [cancel]=\"false\"></p-rating>\n </pw-input-container>\n\n <pw-input-container class=\"col-12 col-md-4\"\n label=\"Communication\"\n name=\"communication\"\n errorMsg=\"This field is required.\">\n <p-rating formControlName=\"communication\"\n [cancel]=\"false\"></p-rating>\n </pw-input-container>\n\n <pw-input-container class=\"col-12 col-md-4\"\n label=\"Time\"\n name=\"time\"\n errorMsg=\"This field is required.\">\n <p-rating formControlName=\"time\"\n [cancel]=\"false\"></p-rating>\n </pw-input-container>\n\n <pw-input-container class=\"col-12\"\n label=\"Description\"\n name=\"description\"\n errorMsg=\"This field is required.\">\n <textarea type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n </form>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\"\n class=\"btn btn-outline-default\"\n (click)=\"modal.close()\">\n Cancel\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\"\n (click)=\"onSaveDetail()\">Save</button>\n </div>\n</ng-template>\n\n<!-- <i class=\"fal fa-plus-circle fa-2x btn-link float-end btn-add\" (click)=\"onOpen()\" aria-hidden=\"true\"></i> -->\n", dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i6$4.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }] }); }
2378
2378
  }
2379
2379
  __decorate([
2380
2380
  ValidateForm('form'),
@@ -2681,7 +2681,7 @@ class EditUserProfileModalComponent extends AppBaseComponent {
2681
2681
  });
2682
2682
  }
2683
2683
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EditUserProfileModalComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.UntypedFormBuilder }, { token: i1$2.ProfileService }, { token: i1$2.GeoService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
2684
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EditUserProfileModalComponent, selector: "pw-edit-user-profile-modal", inputs: { slug: "slug", user: "user" }, outputs: { saveEvent: "saveEvent" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "placesRef", first: true, predicate: ["ngxPlaces"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\"\n id=\"modal-basic-title\">Edit Intro</h4>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSaveDetail()\">\n <div class=\"row\">\n <pw-input-container class=\"col-6\"\n label=\"First Name\"\n name=\"first_name\"\n errorMsg=\"Please enter first Name\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"first_name\"\n id=\"first_name\" />\n </pw-input-container>\n\n <pw-input-container class=\"col-6\"\n label=\"Last Name\"\n name=\"last_name\"\n errorMsg=\"Please enter last Name\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"last_name\"\n id=\"last_name\" />\n </pw-input-container>\n\n <pw-input-container class=\"col-12\"\n label=\"Headline\"\n name=\"headline\"\n errorMsg=\"Please enter headline\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"headline\"\n id=\"headline\" />\n </pw-input-container>\n\n <pw-input-container class=\"col-12\"\n label=\"About me\"\n name=\"description\"\n errorMsg=\"Please enter description\">\n <textarea class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"></textarea>\n </pw-input-container>\n\n <pw-input-container class=\"col-6\"\n label=\"Gender\"\n name=\"gender\"\n errorMsg=\"Please enter Gender\">\n <p-selectButton [options]=\"[\n { label: 'Male', value: 'M' },\n { label: 'Female', value: 'F' }\n ]\"\n formControlName=\"gender\"></p-selectButton>\n </pw-input-container>\n\n <pw-input-container class=\"col-6\"\n label=\"Date of Birth\"\n name=\"dob\"\n errorMsg=\"Please enter date of birth\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"yyyy-mm-dd\"\n formControlName=\"dob\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n [minDate]=\"{ year: 1950, month: 1, day: 1 }\"\n [maxDate]=\"{ year: 2018, month: 12, day: 31 }\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n (click)=\"d.toggle()\"\n type=\"button\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </pw-input-container>\n\n <pw-input-container class=\"col-6\"\n label=\"Phone\"\n name=\"phone_number\"\n errorMsg=\"Please enter phone\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"phone_number\" />\n </pw-input-container>\n\n <pw-input-container class=\"col-6\"\n label=\"Postcode\"\n name=\"postcode\"\n errorMsg=\"Please enter postcode\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"postcode\" />\n </pw-input-container>\n\n <ng-container *ngIf=\"countries$ | async as countries\">\n <pw-input-container class=\"col-12 col-sm-6\"\n label=\"Country\"\n name=\"country\"\n errorMsg=\"Please select a country\">\n\n <p-dropdown\n id=\"country\"\n [options]=\"countries\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"country\"\n (onChange)=\"getRegion($event.value)\"\n placeholder=\"{{ 'User.Profile.SelectCountry' | transloco }}\">\n </p-dropdown>\n\n </pw-input-container>\n </ng-container>\n\n <pw-input-container class=\"col-12 col-sm-6\"\n label=\"State\"\n name=\"state\"\n errorMsg=\"Please select a state\">\n <p-dropdown\n id=\"state\"\n [options]=\"states\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"state\"\n [placeholder]=\"'User.Profile.SelectState' | transloco\">\n </p-dropdown>\n </pw-input-container>\n\n <!-- Location -->\n <pw-input-container label=\"Location\"\n class=\"col-12 col-md-6\"\n name=\"location\">\n <input ngx-gp-autocomplete\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </pw-input-container>\n\n <pw-input-container class=\"col-12 col-sm-6\"\n label=\"Website\"\n name=\"website_url\"\n errorMsg=\"Please enter Website\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"website_url\" />\n </pw-input-container>\n </div>\n <div class=\"modal-footer\">\n <input type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"modal.close()\"\n value=\"Cancel\" />\n <input type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\"\n value=\"Save Changes\" />\n </div>\n </form>\n </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}::ng-deep .p-selectbutton .p-button{margin-right:1rem}::ng-deep body .p-selectbutton .p-button.p-highlight{background-color:var(--first)!important}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i7.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i7$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i1$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
2684
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EditUserProfileModalComponent, selector: "pw-edit-user-profile-modal", inputs: { slug: "slug", user: "user" }, outputs: { saveEvent: "saveEvent" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "placesRef", first: true, predicate: ["ngxPlaces"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\"\n id=\"modal-basic-title\">Edit Intro</h4>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSaveDetail()\">\n <div class=\"row\">\n <pw-input-container class=\"col-6\"\n label=\"First Name\"\n name=\"first_name\"\n errorMsg=\"Please enter first Name\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"first_name\"\n id=\"first_name\" />\n </pw-input-container>\n\n <pw-input-container class=\"col-6\"\n label=\"Last Name\"\n name=\"last_name\"\n errorMsg=\"Please enter last Name\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"last_name\"\n id=\"last_name\" />\n </pw-input-container>\n\n <pw-input-container class=\"col-12\"\n label=\"Headline\"\n name=\"headline\"\n errorMsg=\"Please enter headline\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"headline\"\n id=\"headline\" />\n </pw-input-container>\n\n <pw-input-container class=\"col-12\"\n label=\"About me\"\n name=\"description\"\n errorMsg=\"Please enter description\">\n <textarea class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"></textarea>\n </pw-input-container>\n\n <pw-input-container class=\"col-6\"\n label=\"Gender\"\n name=\"gender\"\n errorMsg=\"Please enter Gender\">\n <p-selectButton [options]=\"[\n { label: 'Male', value: 'M' },\n { label: 'Female', value: 'F' }\n ]\"\n formControlName=\"gender\"></p-selectButton>\n </pw-input-container>\n\n <pw-input-container class=\"col-6\"\n label=\"Date of Birth\"\n name=\"dob\"\n errorMsg=\"Please enter date of birth\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"yyyy-mm-dd\"\n formControlName=\"dob\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n [minDate]=\"{ year: 1950, month: 1, day: 1 }\"\n [maxDate]=\"{ year: 2018, month: 12, day: 31 }\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n (click)=\"d.toggle()\"\n type=\"button\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </pw-input-container>\n\n <pw-input-container class=\"col-6\"\n label=\"Phone\"\n name=\"phone_number\"\n errorMsg=\"Please enter phone\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"phone_number\" />\n </pw-input-container>\n\n <pw-input-container class=\"col-6\"\n label=\"Postcode\"\n name=\"postcode\"\n errorMsg=\"Please enter postcode\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"postcode\" />\n </pw-input-container>\n\n <ng-container *ngIf=\"countries$ | async as countries\">\n <pw-input-container class=\"col-12 col-sm-6\"\n label=\"Country\"\n name=\"country\"\n errorMsg=\"Please select a country\">\n\n <p-dropdown\n id=\"country\"\n [options]=\"countries\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"country\"\n (onChange)=\"getRegion($event.value)\"\n placeholder=\"{{ 'User.Profile.SelectCountry' | transloco }}\">\n </p-dropdown>\n\n </pw-input-container>\n </ng-container>\n\n <pw-input-container class=\"col-12 col-sm-6\"\n label=\"State\"\n name=\"state\"\n errorMsg=\"Please select a state\">\n <p-dropdown\n id=\"state\"\n [options]=\"states\"\n optionLabel=\"name\"\n optionValue=\"code\"\n formControlName=\"state\"\n [placeholder]=\"'User.Profile.SelectState' | transloco\">\n </p-dropdown>\n </pw-input-container>\n\n <!-- Location -->\n <pw-input-container label=\"Location\"\n class=\"col-12 col-md-6\"\n name=\"location\">\n <input ngx-gp-autocomplete\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </pw-input-container>\n\n <pw-input-container class=\"col-12 col-sm-6\"\n label=\"Website\"\n name=\"website_url\"\n errorMsg=\"Please enter Website\">\n <input type=\"text\"\n class=\"form-control\"\n formControlName=\"website_url\" />\n </pw-input-container>\n </div>\n <div class=\"modal-footer\">\n <input type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"modal.close()\"\n value=\"Cancel\" />\n <input type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\"\n value=\"Save Changes\" />\n </div>\n </form>\n </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}::ng-deep .p-selectbutton .p-button{margin-right:1rem}::ng-deep body .p-selectbutton .p-button.p-highlight{background-color:var(--first)!important}\n"], dependencies: [{ kind: "directive", type: i4.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i7.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i7$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i1$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
2685
2685
  }
2686
2686
  __decorate([
2687
2687
  ValidateForm('form'),
@@ -2808,7 +2808,7 @@ class UserAboutComponent extends AppBaseComponent {
2808
2808
  }
2809
2809
  }
2810
2810
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UserAboutComponent, deps: [{ token: i1$2.ProfileService }, { token: i1$2.QualificationService }, { token: i1$2.TagService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
2811
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UserAboutComponent, selector: "pw-user-about", inputs: { user: "user", isEdit: "isEdit" }, outputs: { saveEvent: "saveEvent" }, viewQueries: [{ propertyName: "modal", first: true, predicate: EditUserProfileModalComponent, descendants: true }, { propertyName: "qualificationModal", first: true, predicate: EditQualificationsModalComponent, descendants: true }, { propertyName: "skillsModal", first: true, predicate: EditSkillsModalComponent, descendants: true }, { propertyName: "socialModal", first: true, predicate: EditSocialLinksComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-sm-12 mt-2\">\n <div data-cy=\"personal-info\">\n <h2 class=\"\">Personal Information</h2>\n <ng-container *ngIf=\"user && isEdit\">\n <i\n class=\"profile-icons fa fa-lg fa-user-edit float-end mt-3 pt-1 pt-md-0\"\n (click)=\"onProfileOpen()\"\n (keydown.enter)=\"onProfileOpen()\"\n aria-label=\"Open Profile\"\n aria-hidden=\"true\"\n ></i>\n <pw-edit-user-profile-modal [user]=\"user\"\n (saveEvent)=\"onProfileSaved($event)\"\n [slug]=\"user?.slug\">\n </pw-edit-user-profile-modal>\n </ng-container>\n </div>\n <div>\n <div class=\"my-3\">\n <span class=\"profile-label\">About Me:</span>\n <span class=\"display-block overflow-hidden\">{{ user_profile?.description || 'No description has been added yet.' }}\n </span>\n </div>\n <hr />\n <div class=\"row mt-0 my-0\">\n <div class=\"col-6 col-sm-6 col-lg-4\">\n <ul class=\"no-list-style personal-info\">\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"icon-present font-small-3\" aria-hidden=\"true\"></i>\n Birthday:</span>\n <span class=\"display-block overflow-hidden pt-2\">{{\n user_profile?.dob | dateFormat\n }}</span>\n </li>\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-globe font-small-3\" aria-hidden=\"true\"></i> Lives\n in:</span>\n <span class=\"display-block overflow-hidden pt-2\">{{\n user_profile?.country\n }}</span>\n </li>\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-monitor font-small-3\" aria-hidden=\"true\"></i>\n Website:</span>\n <a class=\"display-block overflow-hidden pt-2\">{{\n user_profile?.website_url\n }}</a>\n </li>\n </ul>\n </div>\n <div class=\"col-6 col-sm-6 col-lg-4\">\n <ul class=\"no-list-style personal-info\">\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-user font-small-3\" aria-hidden=\"true\"></i>\n Gender:</span>\n <span class=\"display-block overflow-hidden pt-2\">\n {{\n user_profile?.gender === 'M'\n ? 'Male'\n : user_profile?.gender === 'F'\n ? 'Female'\n : ''\n }}\n </span>\n </li>\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-mail font-small-3\" aria-hidden=\"true\"></i>\n Email:</span>\n <a class=\"display-block overflow-hidden pt-2\">{{ user?.email }}</a>\n </li>\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-smartphone font-small-3\" aria-hidden=\"true\"></i> Phone\n Number:</span>\n <span class=\"display-block overflow-hidden pt-2\">{{\n user_profile?.phone_number\n }}</span>\n </li>\n </ul>\n </div>\n <div class=\"col-6 col-md-6 col-lg-4\">\n <ul class=\"no-list-style personal-info\">\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-book font-small-3\" aria-hidden=\"true\"></i>\n Joined:</span>\n <span class=\"display-block overflow-hidden pt-2\">{{\n user?.joined_at | dateFormat\n }}</span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n <hr />\n <div data-cy=\"skills-info\"\n class=\"mt-4\">\n <h2 class=\"\">Skills</h2>\n <div class=\"float-end\"\n *ngIf=\"isEdit\">\n <i\n class=\"profile-icons fa fa-lg fa-edit float-end mt-3 pt-1 pt-md-0\"\n (click)=\"openSkills()\"\n (keydown.enter)=\"openSkills()\"\n aria-label=\"Open Skills\"\n aria-hidden=\"true\"\n ></i>\n <pw-edit-skills-modal [userId]=\"user?.id\"\n [slug]=\"user?.slug\"\n (saveEvent)=\"getUserDetails()\">\n </pw-edit-skills-modal>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"mb-4\"\n *ngIf=\"selectedSkills?.length === 0\">\n {{\n isEdit\n ? \"You haven't selected any skills yet. Please add some.\"\n : 'No skills added.'\n }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"ui-fluid\">\n <span class=\"\"\n *ngFor=\"let skill of selectedSkills\">\n <span class=\"my-2 me-3\">{{ skill.category_name }}</span>\n <span *ngFor=\"let item of skill.tags\"\n class=\"badge bg-success me-2 mb-2\">{{ item.name }}\n </span>\n <br />\n </span>\n </div>\n <hr />\n <div data-cy=\"educational-info\">\n <div class=\"\">\n <h2 class=\"\">Educational Information</h2>\n <div class=\"float-end\"\n *ngIf=\"isEdit\">\n <pw-edit-qualifications-modal (saveEvent)=\"getUserDetails()\">\n </pw-edit-qualifications-modal>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-lg-6 col-12 mb-4\"\n [ngClass]=\"{ editable: isEdit }\"\n *ngFor=\"let item of qualifications; trackBy: trackByQualification\">\n <div class=\"mb-2\">\n <div class=\"float-start\">\n <h4>{{ item?.school }}</h4>\n <ul class=\"no-list-style\">\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-clock font-small-3\" aria-hidden=\"true\"></i>\n Period:</span>\n <span class=\"display-block overflow-hidden pt-2\">\n {{ item?.started_on }} - {{ item?.ended_on }}\n </span>\n </li>\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-feather font-small-3\" aria-hidden=\"true\"></i>\n Degree:</span>\n <span class=\"display-block overflow-hidden pt-2\">\n {{ item?.degree }}\n </span>\n </li>\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-octagon font-small-3\" aria-hidden=\"true\"></i>\n Course:</span>\n <span class=\"display-block overflow-hidden pt-2\">\n {{ item?.course }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"float-end action\"\n *ngIf=\"isEdit\">\n <span class=\"fa-stack\">\n <i\n class=\"fa fa-lg fa-edit fa-stack-1x me-3 profile-icons\"\n title=\"Edit\"\n (keydown.enter)=\"editQualification(item)\"\n aria-label=\"Edit Qualification\"\n (click)=\"editQualification(item)\"\n aria-hidden=\"true\"\n ></i>\n </span>\n <span class=\"fa-stack\">\n <i\n class=\"fa fa-lg fa-trash fa-stack-1x delete-icon\"\n data-cy=\"delete-qualification\"\n title=\"Delete\"\n aria-label=\"Delete Qualification\"\n (keydown.enter)=\"deleteQualification(item)\"\n (click)=\"deleteQualification(item)\"\n aria-hidden=\"true\"\n ></i>\n </span>\n </div>\n </div>\n </div>\n <div class=\"col-lg-6 col-12 mb-4\"\n *ngIf=\"qualifications && qualifications.length === 0\">\n {{\n isEdit\n ? ' No qualification yet. Please add some.'\n : 'No qualifications added.'\n }}\n </div>\n </div>\n </div>\n <hr />\n <!-- External Portfolio -->\n <div data-cy=\"portfolio-info\"\n class=\"mt-4\">\n <div class=\"\">\n <h2 class=\"\">External Portfolio</h2>\n <i\n class=\"fa fa-lg fa-edit profile-icons float-end mt-3 pt-1 pt-md-0\"\n *ngIf=\"isEdit\"\n (click)=\"onOpenSocial()\"\n aria-label=\"Edit external portfolio\"\n (keydown)=\"($event.key === 'Enter' ? onOpenSocial() : null)\"\n title=\"Edit External Portfolio\"\n ></i>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6 col-12 mb-4\">\n <div *ngIf=\"userLinks\">\n <ng-container *ngFor=\"let link of objectKeys(userLinks)\">\n <a target=\"_blank\"\n rel=\"noopener noreferrer\"\n [href]=\"userLinks[link]\"\n *ngIf=\"userLinks[link]\">\n <img src=\"assets/img/icons/social/{{ link }}.svg\"\n class=\"me-2\"\n width=\"40\"\n alt=\"\" />\n </a>\n </ng-container>\n </div>\n <div class=\"row\">\n <ng-container *ngIf=\"user\">\n <pw-edit-social-links [userId]=\"user.id\"\n [links]=\"userLinks\"\n (saveEvent)=\"onSaveUserLinks()\">\n </pw-edit-social-links>\n </ng-container>\n <div class=\"col-12 mb-4\"\n *ngIf=\"!noUserLinks\">\n {{\n isEdit\n ? 'No external portfolio yet. Please add some.'\n : 'No portfolio added.'\n }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"loading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.edu-card .action{display:none}.edu-card:hover .action{display:block}.profile-label{color:var(--first);font-weight:700;margin-right:15px}.profile-icons{color:var(--first)}.personal-info{margin-left:6%}@media only screen and (max-width: 1024px){#about{font-size:.7rem}}\n"], dependencies: [{ kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: EditQualificationsModalComponent, selector: "pw-edit-qualifications-modal", outputs: ["saveEvent"] }, { kind: "component", type: EditSkillsModalComponent, selector: "pw-edit-skills-modal", inputs: ["userId", "slug", "entityType", "entityEntity"], outputs: ["saveEvent"] }, { kind: "component", type: EditSocialLinksComponent, selector: "pw-edit-social-links", inputs: ["links", "userId"], outputs: ["saveEvent"] }, { kind: "component", type: EditUserProfileModalComponent, selector: "pw-edit-user-profile-modal", inputs: ["slug", "user"], outputs: ["saveEvent"] }, { kind: "pipe", type: i6$1.DateFormatPipe, name: "dateFormat" }] }); }
2811
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UserAboutComponent, selector: "pw-user-about", inputs: { user: "user", isEdit: "isEdit" }, outputs: { saveEvent: "saveEvent" }, viewQueries: [{ propertyName: "modal", first: true, predicate: EditUserProfileModalComponent, descendants: true }, { propertyName: "qualificationModal", first: true, predicate: EditQualificationsModalComponent, descendants: true }, { propertyName: "skillsModal", first: true, predicate: EditSkillsModalComponent, descendants: true }, { propertyName: "socialModal", first: true, predicate: EditSocialLinksComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-sm-12 mt-2\">\n <div data-cy=\"personal-info\">\n <h2 class=\"\">Personal Information</h2>\n <ng-container *ngIf=\"user && isEdit\">\n <i\n class=\"profile-icons fa fa-lg fa-user-edit float-end mt-3 pt-1 pt-md-0\"\n (click)=\"onProfileOpen()\"\n (keydown.enter)=\"onProfileOpen()\"\n aria-label=\"Open Profile\"\n aria-hidden=\"true\"\n ></i>\n <pw-edit-user-profile-modal [user]=\"user\"\n (saveEvent)=\"onProfileSaved($event)\"\n [slug]=\"user?.slug\">\n </pw-edit-user-profile-modal>\n </ng-container>\n </div>\n <div>\n <div class=\"my-3\">\n <span class=\"profile-label\">About Me:</span>\n <span class=\"display-block overflow-hidden\">{{ user_profile?.description || 'No description has been added yet.' }}\n </span>\n </div>\n <hr />\n <div class=\"row mt-0 my-0\">\n <div class=\"col-6 col-sm-6 col-lg-4\">\n <ul class=\"no-list-style personal-info\">\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"icon-present font-small-3\" aria-hidden=\"true\"></i>\n Birthday:</span>\n <span class=\"display-block overflow-hidden pt-2\">{{\n user_profile?.dob | dateFormat\n }}</span>\n </li>\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-globe font-small-3\" aria-hidden=\"true\"></i> Lives\n in:</span>\n <span class=\"display-block overflow-hidden pt-2\">{{\n user_profile?.country\n }}</span>\n </li>\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-monitor font-small-3\" aria-hidden=\"true\"></i>\n Website:</span>\n <a class=\"display-block overflow-hidden pt-2\">{{\n user_profile?.website_url\n }}</a>\n </li>\n </ul>\n </div>\n <div class=\"col-6 col-sm-6 col-lg-4\">\n <ul class=\"no-list-style personal-info\">\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-user font-small-3\" aria-hidden=\"true\"></i>\n Gender:</span>\n <span class=\"display-block overflow-hidden pt-2\">\n {{\n user_profile?.gender === 'M'\n ? 'Male'\n : user_profile?.gender === 'F'\n ? 'Female'\n : ''\n }}\n </span>\n </li>\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-mail font-small-3\" aria-hidden=\"true\"></i>\n Email:</span>\n <a class=\"display-block overflow-hidden pt-2\">{{ user?.email }}</a>\n </li>\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-smartphone font-small-3\" aria-hidden=\"true\"></i> Phone\n Number:</span>\n <span class=\"display-block overflow-hidden pt-2\">{{\n user_profile?.phone_number\n }}</span>\n </li>\n </ul>\n </div>\n <div class=\"col-6 col-md-6 col-lg-4\">\n <ul class=\"no-list-style personal-info\">\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-book font-small-3\" aria-hidden=\"true\"></i>\n Joined:</span>\n <span class=\"display-block overflow-hidden pt-2\">{{\n user?.joined_at | dateFormat\n }}</span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n <hr />\n <div data-cy=\"skills-info\"\n class=\"mt-4\">\n <h2 class=\"\">Skills</h2>\n <div class=\"float-end\"\n *ngIf=\"isEdit\">\n <i\n class=\"profile-icons fa fa-lg fa-edit float-end mt-3 pt-1 pt-md-0\"\n (click)=\"openSkills()\"\n (keydown.enter)=\"openSkills()\"\n aria-label=\"Open Skills\"\n aria-hidden=\"true\"\n ></i>\n <pw-edit-skills-modal [userId]=\"user?.id\"\n [slug]=\"user?.slug\"\n (saveEvent)=\"getUserDetails()\">\n </pw-edit-skills-modal>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"mb-4\"\n *ngIf=\"selectedSkills?.length === 0\">\n {{\n isEdit\n ? \"You haven't selected any skills yet. Please add some.\"\n : 'No skills added.'\n }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"ui-fluid\">\n <span class=\"\"\n *ngFor=\"let skill of selectedSkills\">\n <span class=\"my-2 me-3\">{{ skill.category_name }}</span>\n <span *ngFor=\"let item of skill.tags\"\n class=\"badge bg-success me-2 mb-2\">{{ item.name }}\n </span>\n <br />\n </span>\n </div>\n <hr />\n <div data-cy=\"educational-info\">\n <div class=\"\">\n <h2 class=\"\">Educational Information</h2>\n <div class=\"float-end\"\n *ngIf=\"isEdit\">\n <pw-edit-qualifications-modal (saveEvent)=\"getUserDetails()\">\n </pw-edit-qualifications-modal>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-lg-6 col-12 mb-4\"\n [ngClass]=\"{ editable: isEdit }\"\n *ngFor=\"let item of qualifications; trackBy: trackByQualification\">\n <div class=\"mb-2\">\n <div class=\"float-start\">\n <h4>{{ item?.school }}</h4>\n <ul class=\"no-list-style\">\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-clock font-small-3\" aria-hidden=\"true\"></i>\n Period:</span>\n <span class=\"display-block overflow-hidden pt-2\">\n {{ item?.started_on }} - {{ item?.ended_on }}\n </span>\n </li>\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-feather font-small-3\" aria-hidden=\"true\"></i>\n Degree:</span>\n <span class=\"display-block overflow-hidden pt-2\">\n {{ item?.degree }}\n </span>\n </li>\n <li class=\"mb-4\">\n <span class=\"profile-label\"><i class=\"ft-octagon font-small-3\" aria-hidden=\"true\"></i>\n Course:</span>\n <span class=\"display-block overflow-hidden pt-2\">\n {{ item?.course }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"float-end action\"\n *ngIf=\"isEdit\">\n <span class=\"fa-stack\">\n <i\n class=\"fa fa-lg fa-edit fa-stack-1x me-3 profile-icons\"\n title=\"Edit\"\n (keydown.enter)=\"editQualification(item)\"\n aria-label=\"Edit Qualification\"\n (click)=\"editQualification(item)\"\n aria-hidden=\"true\"\n ></i>\n </span>\n <span class=\"fa-stack\">\n <i\n class=\"fa fa-lg fa-trash fa-stack-1x delete-icon\"\n data-cy=\"delete-qualification\"\n title=\"Delete\"\n aria-label=\"Delete Qualification\"\n (keydown.enter)=\"deleteQualification(item)\"\n (click)=\"deleteQualification(item)\"\n aria-hidden=\"true\"\n ></i>\n </span>\n </div>\n </div>\n </div>\n <div class=\"col-lg-6 col-12 mb-4\"\n *ngIf=\"qualifications && qualifications.length === 0\">\n {{\n isEdit\n ? ' No qualification yet. Please add some.'\n : 'No qualifications added.'\n }}\n </div>\n </div>\n </div>\n <hr />\n <!-- External Portfolio -->\n <div data-cy=\"portfolio-info\"\n class=\"mt-4\">\n <div class=\"\">\n <h2 class=\"\">External Portfolio</h2>\n <i\n class=\"fa fa-lg fa-edit profile-icons float-end mt-3 pt-1 pt-md-0\"\n *ngIf=\"isEdit\"\n (click)=\"onOpenSocial()\"\n aria-label=\"Edit external portfolio\"\n (keydown)=\"($event.key === 'Enter' ? onOpenSocial() : null)\"\n title=\"Edit External Portfolio\"\n ></i>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6 col-12 mb-4\">\n <div *ngIf=\"userLinks\">\n <ng-container *ngFor=\"let link of objectKeys(userLinks)\">\n <a target=\"_blank\"\n rel=\"noopener noreferrer\"\n [href]=\"userLinks[link]\"\n *ngIf=\"userLinks[link]\">\n <img src=\"assets/img/icons/social/{{ link }}.svg\"\n class=\"me-2\"\n width=\"40\"\n alt=\"\" />\n </a>\n </ng-container>\n </div>\n <div class=\"row\">\n <ng-container *ngIf=\"user\">\n <pw-edit-social-links [userId]=\"user.id\"\n [links]=\"userLinks\"\n (saveEvent)=\"onSaveUserLinks()\">\n </pw-edit-social-links>\n </ng-container>\n <div class=\"col-12 mb-4\"\n *ngIf=\"!noUserLinks\">\n {{\n isEdit\n ? 'No external portfolio yet. Please add some.'\n : 'No portfolio added.'\n }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"loading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.edu-card .action{display:none}.edu-card:hover .action{display:block}.profile-label{color:var(--first);font-weight:700;margin-right:15px}.profile-icons{color:var(--first)}.personal-info{margin-left:6%}@media only screen and (max-width: 1024px){#about{font-size:.7rem}}\n"], dependencies: [{ kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: EditQualificationsModalComponent, selector: "pw-edit-qualifications-modal", outputs: ["saveEvent"] }, { kind: "component", type: EditSkillsModalComponent, selector: "pw-edit-skills-modal", inputs: ["userId", "slug", "entityType", "entityEntity"], outputs: ["saveEvent"] }, { kind: "component", type: EditSocialLinksComponent, selector: "pw-edit-social-links", inputs: ["links", "userId"], outputs: ["saveEvent"] }, { kind: "component", type: EditUserProfileModalComponent, selector: "pw-edit-user-profile-modal", inputs: ["slug", "user"], outputs: ["saveEvent"] }, { kind: "pipe", type: i6$2.DateFormatPipe, name: "dateFormat" }] }); }
2812
2812
  }
2813
2813
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UserAboutComponent, decorators: [{
2814
2814
  type: Component,
@@ -2875,7 +2875,7 @@ class PortfoliosComponent {
2875
2875
  }
2876
2876
  }
2877
2877
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PortfoliosComponent, deps: [{ token: i1$2.ProfileService }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
2878
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PortfoliosComponent, selector: "pw-portfolios", inputs: { user: "user", isEdit: "isEdit" }, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-sm-12 mt-2\">\n <h2>User's Portfolio</h2>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <pw-no-data [withImage]=\"true\" message=\"No portfolio listed yet - please consider adding some.\"\n *ngIf=\"projectPictures.length === 0 && isLoaded\"></pw-no-data>\n <div class=\"card-body\">\n <div class=\"card-block\"\n *ngIf=\"projectPictures.length\">\n <div class=\"grid-hover\">\n <div class=\"row\">\n <div class=\"col-md-4 col-12 mb-2\"\n *ngFor=\"let picture of projectPictures; trackBy: trackByImage\">\n <figure class=\"effect-marley\"\n (keydown.enter)=\"showFullImage(picture, content, $event)\"\n (click)=\"showFullImage(picture, content, $event)\">\n <img [src]=\"picture.picture.url\"\n alt=\"project pic\" />\n <figcaption>\n <h2>\n <span class=\"portfolio-header-text\">{{ picture.project_title }}</span>\n </h2>\n <i\n class=\"fal fa-2x fa-times white\"\n id=\"delete-icon\"\n (click)=\"deletePicture(picture.id)\"\n (keydown.enter)=\"deletePicture(picture.id)\"\n *ngIf=\"isEdit\"\n aria-hidden=\"true\"\n ></i>\n <p class=\"thumb-description\">\n {{ picture?.project_description }}\n </p>\n </figcaption>\n </figure>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n<ng-template #content\n let-modal>\n <div class=\"modal-img-popup\">\n <img alt=\"Selected Url\"\n [src]=\"selectedPicURL\"\n class=\"img-fluid\" />\n <button type=\"button\"\n class=\"close close-img\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss('Cross click')\">\n <span class=\"btn\">&times;</span>\n </button>\n </div>\n</ng-template>\n", styles: [".grid-hover figure{height:100%}.grid-hover figure figcaption:hover{background-color:#343a4066}.grid-hover figure figcaption h2{color:#fff}.thumb-description{color:#fff!important;height:154px;overflow:hidden;text-overflow:ellipsis;top:91px}.demo .modal-dialog{max-width:800px}.close-img{position:absolute}.close-img span{background-color:#4a4a4a;border:1px solid rgb(255,255,255);border-radius:50px;color:#fff;cursor:pointer;display:inline-block;font-size:1rem;height:40px;position:absolute;right:-30px;text-align:center;top:-30px;width:40px}@media screen and (max-width: 767px){.grid-hover figure{max-width:100%;min-width:100%}}@media screen and (min-device-width: 768px) and (max-device-width: 1200px){.grid-hover figure{min-width:fit-content}}.portfolio-header-text{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }] }); }
2878
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PortfoliosComponent, selector: "pw-portfolios", inputs: { user: "user", isEdit: "isEdit" }, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-sm-12 mt-2\">\n <h2>User's Portfolio</h2>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <pw-no-data [withImage]=\"true\" message=\"No portfolio listed yet - please consider adding some.\"\n *ngIf=\"projectPictures.length === 0 && isLoaded\"></pw-no-data>\n <div class=\"card-body\">\n <div class=\"card-block\"\n *ngIf=\"projectPictures.length\">\n <div class=\"grid-hover\">\n <div class=\"row\">\n <div class=\"col-md-4 col-12 mb-2\"\n *ngFor=\"let picture of projectPictures; trackBy: trackByImage\">\n <figure class=\"effect-marley\"\n (keydown.enter)=\"showFullImage(picture, content, $event)\"\n (click)=\"showFullImage(picture, content, $event)\">\n <img [src]=\"picture.picture.url\"\n alt=\"project pic\" />\n <figcaption>\n <h2>\n <span class=\"portfolio-header-text\">{{ picture.project_title }}</span>\n </h2>\n <i\n class=\"fal fa-2x fa-times white\"\n id=\"delete-icon\"\n (click)=\"deletePicture(picture.id)\"\n (keydown.enter)=\"deletePicture(picture.id)\"\n *ngIf=\"isEdit\"\n aria-hidden=\"true\"\n ></i>\n <p class=\"thumb-description\">\n {{ picture?.project_description }}\n </p>\n </figcaption>\n </figure>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n<ng-template #content\n let-modal>\n <div class=\"modal-img-popup\">\n <img alt=\"Selected Url\"\n [src]=\"selectedPicURL\"\n class=\"img-fluid\" />\n <button type=\"button\"\n class=\"close close-img\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss('Cross click')\">\n <span class=\"btn\">&times;</span>\n </button>\n </div>\n</ng-template>\n", styles: [".grid-hover figure{height:100%}.grid-hover figure figcaption:hover{background-color:#343a4066}.grid-hover figure figcaption h2{color:#fff}.thumb-description{color:#fff!important;height:154px;overflow:hidden;text-overflow:ellipsis;top:91px}.demo .modal-dialog{max-width:800px}.close-img{position:absolute}.close-img span{background-color:#4a4a4a;border:1px solid rgb(255,255,255);border-radius:50px;color:#fff;cursor:pointer;display:inline-block;font-size:1rem;height:40px;position:absolute;right:-30px;text-align:center;top:-30px;width:40px}@media screen and (max-width: 767px){.grid-hover figure{max-width:100%;min-width:100%}}@media screen and (min-device-width: 768px) and (max-device-width: 1200px){.grid-hover figure{min-width:fit-content}}.portfolio-header-text{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }] }); }
2879
2879
  }
2880
2880
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PortfoliosComponent, decorators: [{
2881
2881
  type: Component,
@@ -2947,7 +2947,7 @@ class UserProjectsComponent extends AppBaseComponent {
2947
2947
  });
2948
2948
  }
2949
2949
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UserProjectsComponent, deps: [{ token: i1$2.ProfileService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
2950
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UserProjectsComponent, selector: "pw-user-projects", inputs: { user: "user", isEdit: "isEdit" }, viewQueries: [{ propertyName: "projectModal", first: true, predicate: EditProjectModalComponent, descendants: true, static: true }, { propertyName: "skillModal", first: true, predicate: EditSkillsModalComponent, descendants: true }, { propertyName: "recommendationModal", first: true, predicate: EditRecommendationModalComponent, descendants: true, static: true }, { propertyName: "portfolios", first: true, predicate: EditPortfoliosComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-sm-12 mt-2\">\n <h2>User's Projects</h2>\n <div class=\"row\"\n *ngIf=\"isEdit\">\n <div class=\"col-12\">\n <div class=\"content-header\">\n <button class=\"btn btn-primary float-end\"\n (click)=\"onEditProject(null)\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{'Create Project' | transloco}}\n </button>\n </div>\n </div>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div id=\"timeline\"\n class=\"timeline-center timeline-wrapper\"\n *ngIf=\"projects?.length\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd }\"\n *ngFor=\"\n let project of projects;\n let i = index;\n let odd = odd;\n let even = even;\n trackBy: trackByProject\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\"\n data-bs-toggle=\"tooltip\"\n data-placement=\"right\"\n title=\"Portfolio project work\">\n <span class=\"timeline-year\"> {{ project.start_year }} </span>\n </span>\n </div>\n <div class=\"timeline-card card shadow rounded border-grey border-lighten-2 pb-0\">\n <div class=\"card-header\">\n <h4 class=\"mb-0 card-title\">\n <a>{{ project.title }}</a>\n </h4>\n <div class=\"card-subtitle text-muted mt-0\">\n <span class=\"font-small-3\">\n {{ project.start_year }} - {{ project.end_year }}</span>\n </div>\n </div>\n <div class=\"card-body project-card\">\n <ng-container *ngIf=\"project.project_pictures?.length\">\n <i\n class=\"fal fa-times\"\n (click)=\"deletePicture(project)\"\n (keydown.enter)=\"deletePicture(project)\"\n aria-hidden=\"true\"\n ></i>\n <img class=\"img-fluid project-picture\"\n [src]=\"project.project_pictures[0].picture.url\"\n alt=\"Project Cover\" />\n </ng-container>\n <div class=\"card-body\">\n <div class=\"\">\n <p class=\"card-text\">{{ project.description }}</p>\n <div class=\"list-inline mb-1\">\n <!-- Skills -->\n <div *ngIf=\"project.tags?.length\">\n <div class=\"my-2\">\n <i class=\"fa fa-user-tag\" aria-hidden=\"true\"></i>\n Skills\n </div>\n <ng-container *ngFor=\"let tag of project.tags\">\n <span class=\"badge bg-success me-2\">{{\n tag.name\n }}</span>\n </ng-container>\n </div>\n <div class=\"mt-2\"\n *ngIf=\"project.project_recommendations?.length\">\n <div class=\"my-2\">\n <i\n class=\"fa fa-clipboard-check me-2\"\n aria-hidden=\"true\"\n ></i>\n Recommendations\n </div>\n <section class=\"mb-2\"\n *ngFor=\"\n let recommendation of project.project_recommendations\n \">\n <div class=\"me-2\">\n Client: {{ recommendation?.client_name }}\n </div>\n <div class=\"me-2\">\n Message: {{ recommendation?.description }}\n </div>\n <div class=\"row recommendation\">\n <div class=\"col-4\">\n <span>Communication</span>\n <p-rating [(ngModel)]=\"\n recommendation.communication\n \"\n [cancel]=\"false\"\n [readonly]=\"true\">\n </p-rating>\n </div>\n <div class=\"col-4\">\n <span>Quality</span>\n <p-rating [(ngModel)]=\"recommendation.quality\"\n [cancel]=\"false\"\n [readonly]=\"true\">\n </p-rating>\n </div>\n <div class=\"col-4\">\n <span>Time</span>\n <p-rating [(ngModel)]=\"recommendation.time\"\n [cancel]=\"false\"\n [readonly]=\"true\">\n </p-rating>\n </div>\n </div>\n </section>\n </div>\n <div class=\"text-end mt-3 d-flex justify-content-end project-actions\"\n *ngIf=\"isEdit\">\n <!-- Project Edit -->\n <span class=\"btn btn-link pb-0 actions\"\n (keydown.enter)=\"onEditProject(project)\"\n (click)=\"onEditProject(project)\">\n Edit\n </span>\n <button class=\"btn btn-link pb-0 actions\"\n (click)=\"openSkills(project)\">\n Skills\n </button>\n <pw-edit-skills-modal [userId]=\"user?.id\"\n entityEntity=\"Project\"\n entityType=\"skills\"\n (saveEvent)=\"onSkillsSave()\"\n [slug]=\"project?.slug\">\n </pw-edit-skills-modal>\n <!-- Portfolios -->\n <button class=\"btn btn-link pb-0 actions\"\n (click)=\"openPortfolios(project.id)\">\n Photos\n </button>\n <pw-edit-portfolios [slug]=\"user?.slug\"\n [id]=\"project.id\"\n (successEvent)=\"getProjects()\">\n </pw-edit-portfolios>\n <span class=\"btn btn-link pb-0 delete-project actions\"\n (keydown.enter)=\"onDeleteProject(project)\"\n (click)=\"onDeleteProject(project)\">\n Delete\n </span>\n </div>\n <!-- Recommendation -->\n <span class=\"pe-1 mt-3\"\n (click)=\"editRecommendation(project)\"\n (keydown.enter)=\"editRecommendation(project)\"\n *ngIf=\"!isEdit\">\n <a class=\"primary\"><span class=\"fa fa-commenting-o\"></span> Endorse\n </a></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n <pw-no-data [withImage]=\"true\" [message]=\"\n isEdit\n ? ('User.Profile.Projects.NoProjects' | transloco)\n : ('User.Profile.Projects.NoUserProjects' | transloco)\n \"\n *ngIf=\"projects?.length === 0 && isLoaded\">\n </pw-no-data>\n </div>\n</div>\n<pw-edit-project-modal (saveEvent)=\"onSaveProject($event)\"></pw-edit-project-modal>\n<pw-edit-recommendation-modal [user]=\"user\"></pw-edit-recommendation-modal>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.project-card{position:relative}.project-card i.fa-times{color:#fff;display:none;font-size:20px;position:absolute;right:39px;top:14px}.project-card:hover i.fa-times{display:inline}.timeline-card.card{min-height:auto}.timeline-card.card .card-header{padding:1.5rem 1.5rem 0}.timeline-card.card .card-body.project-card{padding:0 20px 1rem}.timeline-card.card .card-body.project-card .card-body{padding:20px 0 0}@media only screen and (max-width: 767px){.timeline-center{margin-top:30px}.timeline-center .project-actions .btn{padding:.375rem .5rem}}.actions{color:var(--first)!important}\n"], dependencies: [{ kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "component", type: EditPortfoliosComponent, selector: "pw-edit-portfolios", inputs: ["id", "slug"], outputs: ["successEvent"] }, { kind: "component", type: EditProjectModalComponent, selector: "pw-edit-project-modal", outputs: ["cancelEvent", "saveEvent"] }, { kind: "component", type: EditRecommendationModalComponent, selector: "pw-edit-recommendation-modal", inputs: ["user"] }, { kind: "component", type: EditSkillsModalComponent, selector: "pw-edit-skills-modal", inputs: ["userId", "slug", "entityType", "entityEntity"], outputs: ["saveEvent"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
2950
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UserProjectsComponent, selector: "pw-user-projects", inputs: { user: "user", isEdit: "isEdit" }, viewQueries: [{ propertyName: "projectModal", first: true, predicate: EditProjectModalComponent, descendants: true, static: true }, { propertyName: "skillModal", first: true, predicate: EditSkillsModalComponent, descendants: true }, { propertyName: "recommendationModal", first: true, predicate: EditRecommendationModalComponent, descendants: true, static: true }, { propertyName: "portfolios", first: true, predicate: EditPortfoliosComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-sm-12 mt-2\">\n <h2>User's Projects</h2>\n <div class=\"row\"\n *ngIf=\"isEdit\">\n <div class=\"col-12\">\n <div class=\"content-header\">\n <button class=\"btn btn-primary float-end\"\n (click)=\"onEditProject(null)\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{'Create Project' | transloco}}\n </button>\n </div>\n </div>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div id=\"timeline\"\n class=\"timeline-center timeline-wrapper\"\n *ngIf=\"projects?.length\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd }\"\n *ngFor=\"\n let project of projects;\n let i = index;\n let odd = odd;\n let even = even;\n trackBy: trackByProject\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\"\n data-bs-toggle=\"tooltip\"\n data-placement=\"right\"\n title=\"Portfolio project work\">\n <span class=\"timeline-year\"> {{ project.start_year }} </span>\n </span>\n </div>\n <div class=\"timeline-card card shadow rounded border-grey border-lighten-2 pb-0\">\n <div class=\"card-header\">\n <h4 class=\"mb-0 card-title\">\n <a>{{ project.title }}</a>\n </h4>\n <div class=\"card-subtitle text-muted mt-0\">\n <span class=\"font-small-3\">\n {{ project.start_year }} - {{ project.end_year }}</span>\n </div>\n </div>\n <div class=\"card-body project-card\">\n <ng-container *ngIf=\"project.project_pictures?.length\">\n <i\n class=\"fal fa-times\"\n (click)=\"deletePicture(project)\"\n (keydown.enter)=\"deletePicture(project)\"\n aria-hidden=\"true\"\n ></i>\n <img class=\"img-fluid project-picture\"\n [src]=\"project.project_pictures[0].picture.url\"\n alt=\"Project Cover\" />\n </ng-container>\n <div class=\"card-body\">\n <div class=\"\">\n <p class=\"card-text\">{{ project.description }}</p>\n <div class=\"list-inline mb-1\">\n <!-- Skills -->\n <div *ngIf=\"project.tags?.length\">\n <div class=\"my-2\">\n <i class=\"fa fa-user-tag\" aria-hidden=\"true\"></i>\n Skills\n </div>\n <ng-container *ngFor=\"let tag of project.tags\">\n <span class=\"badge bg-success me-2\">{{\n tag.name\n }}</span>\n </ng-container>\n </div>\n <div class=\"mt-2\"\n *ngIf=\"project.project_recommendations?.length\">\n <div class=\"my-2\">\n <i\n class=\"fa fa-clipboard-check me-2\"\n aria-hidden=\"true\"\n ></i>\n Recommendations\n </div>\n <section class=\"mb-2\"\n *ngFor=\"\n let recommendation of project.project_recommendations\n \">\n <div class=\"me-2\">\n Client: {{ recommendation?.client_name }}\n </div>\n <div class=\"me-2\">\n Message: {{ recommendation?.description }}\n </div>\n <div class=\"row recommendation\">\n <div class=\"col-4\">\n <span>Communication</span>\n <p-rating [(ngModel)]=\"\n recommendation.communication\n \"\n [cancel]=\"false\"\n [readonly]=\"true\">\n </p-rating>\n </div>\n <div class=\"col-4\">\n <span>Quality</span>\n <p-rating [(ngModel)]=\"recommendation.quality\"\n [cancel]=\"false\"\n [readonly]=\"true\">\n </p-rating>\n </div>\n <div class=\"col-4\">\n <span>Time</span>\n <p-rating [(ngModel)]=\"recommendation.time\"\n [cancel]=\"false\"\n [readonly]=\"true\">\n </p-rating>\n </div>\n </div>\n </section>\n </div>\n <div class=\"text-end mt-3 d-flex justify-content-end project-actions\"\n *ngIf=\"isEdit\">\n <!-- Project Edit -->\n <span class=\"btn btn-link pb-0 actions\"\n (keydown.enter)=\"onEditProject(project)\"\n (click)=\"onEditProject(project)\">\n Edit\n </span>\n <button class=\"btn btn-link pb-0 actions\"\n (click)=\"openSkills(project)\">\n Skills\n </button>\n <pw-edit-skills-modal [userId]=\"user?.id\"\n entityEntity=\"Project\"\n entityType=\"skills\"\n (saveEvent)=\"onSkillsSave()\"\n [slug]=\"project?.slug\">\n </pw-edit-skills-modal>\n <!-- Portfolios -->\n <button class=\"btn btn-link pb-0 actions\"\n (click)=\"openPortfolios(project.id)\">\n Photos\n </button>\n <pw-edit-portfolios [slug]=\"user?.slug\"\n [id]=\"project.id\"\n (successEvent)=\"getProjects()\">\n </pw-edit-portfolios>\n <span class=\"btn btn-link pb-0 delete-project actions\"\n (keydown.enter)=\"onDeleteProject(project)\"\n (click)=\"onDeleteProject(project)\">\n Delete\n </span>\n </div>\n <!-- Recommendation -->\n <span class=\"pe-1 mt-3\"\n (click)=\"editRecommendation(project)\"\n (keydown.enter)=\"editRecommendation(project)\"\n *ngIf=\"!isEdit\">\n <a class=\"primary\"><span class=\"fa fa-commenting-o\"></span> Endorse\n </a></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n <pw-no-data [withImage]=\"true\" [message]=\"\n isEdit\n ? ('User.Profile.Projects.NoProjects' | transloco)\n : ('User.Profile.Projects.NoUserProjects' | transloco)\n \"\n *ngIf=\"projects?.length === 0 && isLoaded\">\n </pw-no-data>\n </div>\n</div>\n<pw-edit-project-modal (saveEvent)=\"onSaveProject($event)\"></pw-edit-project-modal>\n<pw-edit-recommendation-modal [user]=\"user\"></pw-edit-recommendation-modal>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.project-card{position:relative}.project-card i.fa-times{color:#fff;display:none;font-size:20px;position:absolute;right:39px;top:14px}.project-card:hover i.fa-times{display:inline}.timeline-card.card{min-height:auto}.timeline-card.card .card-header{padding:1.5rem 1.5rem 0}.timeline-card.card .card-body.project-card{padding:0 20px 1rem}.timeline-card.card .card-body.project-card .card-body{padding:20px 0 0}@media only screen and (max-width: 767px){.timeline-center{margin-top:30px}.timeline-center .project-actions .btn{padding:.375rem .5rem}}.actions{color:var(--first)!important}\n"], dependencies: [{ kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$4.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "component", type: EditPortfoliosComponent, selector: "pw-edit-portfolios", inputs: ["id", "slug"], outputs: ["successEvent"] }, { kind: "component", type: EditProjectModalComponent, selector: "pw-edit-project-modal", outputs: ["cancelEvent", "saveEvent"] }, { kind: "component", type: EditRecommendationModalComponent, selector: "pw-edit-recommendation-modal", inputs: ["user"] }, { kind: "component", type: EditSkillsModalComponent, selector: "pw-edit-skills-modal", inputs: ["userId", "slug", "entityType", "entityEntity"], outputs: ["saveEvent"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
2951
2951
  }
2952
2952
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UserProjectsComponent, decorators: [{
2953
2953
  type: Component,
@@ -3104,7 +3104,7 @@ class UserProfilePageComponent extends AppBaseComponent {
3104
3104
  super.ngOnDestroy();
3105
3105
  }
3106
3106
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UserProfilePageComponent, deps: [{ token: i0.Injector }, { token: i1$2.ProfileService }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
3107
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UserProfilePageComponent, selector: "pw-user-profile-page", viewQueries: [{ propertyName: "menu", first: true, predicate: ["menuItems"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- User Profile Starts -->\n<!-- Basic User Details Starts -->\n<section id=\"user-profile\"\n *ngIf=\"user\">\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"dashboard\">\n <div class=\"media row py-3 align-items-center\">\n <div class=\"col-3 col-sm-2\">\n <div class=\"align-self-center halfway-fab text-center\">\n <!-- User Avatar -->\n <a class=\"profile-image\">\n <img [src]=\"image\"\n width=\"100\"\n height=\"100\"\n class=\"rounded-circle img-border width-100\"\n alt=\"User Male\"\n (error)=\"handleImageError($event, 'assets/img/icons/male.png')\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\" />\n <div class=\"ms-4 ps-3 ms-sm-0 ps-sm-0 overlay\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\"\n *ngIf=\"allowEdit\">\n <div class=\"overlay-text\">\n <!-- Change Profile Pic -->\n <a aria-label=\"Navigate to Target\">\n {{ 'User.Profile.Change' | transloco }}\n </a>\n </div>\n </div>\n </a>\n </div>\n </div>\n <div class=\"col-9 col-sm-5\">\n <div class=\"align-self-start halfway-fab ps-3 pt-2\">\n <div>\n <strong class=\"font-medium-2 text-uppercase\"\n *ngIf=\"user?.last_name\">\n {{\n user?.first_name\n ? user?.first_name + ' ' + user?.last_name\n : 'Update Profile'\n }}\n </strong>\n <strong class=\"font-medium-2 text-uppercase\"\n *ngIf=\"!user?.last_name\">\n {{ user?.first_name ? user?.first_name : 'Update Profile' }}\n </strong>\n <p class=\"font-small-4\">{{ userProfile?.headline }}</p>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-sm-5\">\n <div class=\"profile-cover-buttons\"\n *ngIf=\"!allowEdit\">\n <div class=\"d-flex halfway-fab align-self-end\">\n <div class=\"text-end d-none d-sm-none d-md-none d-lg-block\">\n <button type=\"button\"\n (click)=\"followUser()\"\n class=\"btn btn-outline-primary btn-raised me-2\">\n <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\n {{ isFollowing ? 'Following' : 'Follow' }}\n </button>\n <button type=\"button\"\n class=\"btn btn-primary btn-raised me-3\"\n (click)=\"sendMessageSlug()\">\n <i class=\"fa fa-mail-bulk\" aria-hidden=\"true\"></i> Message\n </button>\n </div>\n <div class=\"text-end d-block d-sm-block d-md-block d-lg-none\">\n <button type=\"button\"\n class=\"btn btn-primary btn-raised me-2\">\n <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\"\n class=\"btn btn-primary btn-raised me-3\">\n <i class=\"fa fa-mail-bulk\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n<!-- Basic User Details Ends -->\n<section>\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <p-tabMenu #menuItems\n [model]=\"items\"\n [activeItem]=\"activeItem\"\n (keydown.enter)=\"activateMenu()\"\n (click)=\"activateMenu()\">\n </p-tabMenu>\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <ng-template [ngIf]=\"user && activeItem.id === 'about'\">\n <pw-user-about [user]=\"user\"\n [isEdit]=\"allowEdit\"\n (saveEvent)=\"getUserBySlug()\">\n </pw-user-about>\n </ng-template>\n <ng-template [ngIf]=\"activeItem.id === 'projects'\">\n <pw-user-projects [user]=\"user\"\n [isEdit]=\"allowEdit\"></pw-user-projects>\n </ng-template>\n <ng-template [ngIf]=\"activeItem.id === 'portfolio'\">\n <pw-portfolios [user]=\"user\"\n [isEdit]=\"allowEdit\"></pw-portfolios>\n </ng-template>\n </div>\n </div>\n </div>\n</section>\n<ng-template #content\n let-modal>\n <div class=\"card m-0\">\n <div class=\"card-content\">\n <div class=\"card-title\">\n <h3 class=\"modal-title\">{{ 'User.Profile.ProfilePicture' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"card-header\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile\n aspectRatio=\"auto\"\n [userAvatar]=\"image\"\n (imageSelectionEvent)=\"onImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.card-body{padding:10px!important}.py-3{padding-top:4rem!important;padding-bottom:0rem!important}.overlay-text{margin-left:-19px;margin-top:5px;text-align:center}::ng-deep .pw-tab .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link{background-color:#1769e1!important;box-shadow:none!important;color:#fff!important}::ng-deep .pw-tab .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link:hover{background-color:#1769e1!important;color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i6$4.TabMenu, selector: "p-tabMenu", inputs: ["model", "activeItem", "scrollable", "popup", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["activeItemChange"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: UserAboutComponent, selector: "pw-user-about", inputs: ["user", "isEdit"], outputs: ["saveEvent"] }, { kind: "component", type: PortfoliosComponent, selector: "pw-portfolios", inputs: ["user", "isEdit"] }, { kind: "component", type: UserProjectsComponent, selector: "pw-user-projects", inputs: ["user", "isEdit"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
3107
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UserProfilePageComponent, selector: "pw-user-profile-page", viewQueries: [{ propertyName: "menu", first: true, predicate: ["menuItems"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- User Profile Starts -->\n<!-- Basic User Details Starts -->\n<section id=\"user-profile\"\n *ngIf=\"user\">\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"dashboard\">\n <div class=\"media row py-3 align-items-center\">\n <div class=\"col-3 col-sm-2\">\n <div class=\"align-self-center halfway-fab text-center\">\n <!-- User Avatar -->\n <a class=\"profile-image\">\n <img [src]=\"image\"\n width=\"100\"\n height=\"100\"\n class=\"rounded-circle img-border width-100\"\n alt=\"User Male\"\n (error)=\"handleImageError($event, 'assets/img/icons/male.png')\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\" />\n <div class=\"ms-4 ps-3 ms-sm-0 ps-sm-0 overlay\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\"\n *ngIf=\"allowEdit\">\n <div class=\"overlay-text\">\n <!-- Change Profile Pic -->\n <a aria-label=\"Navigate to Target\">\n {{ 'User.Profile.Change' | transloco }}\n </a>\n </div>\n </div>\n </a>\n </div>\n </div>\n <div class=\"col-9 col-sm-5\">\n <div class=\"align-self-start halfway-fab ps-3 pt-2\">\n <div>\n <strong class=\"font-medium-2 text-uppercase\"\n *ngIf=\"user?.last_name\">\n {{\n user?.first_name\n ? user?.first_name + ' ' + user?.last_name\n : 'Update Profile'\n }}\n </strong>\n <strong class=\"font-medium-2 text-uppercase\"\n *ngIf=\"!user?.last_name\">\n {{ user?.first_name ? user?.first_name : 'Update Profile' }}\n </strong>\n <p class=\"font-small-4\">{{ userProfile?.headline }}</p>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-sm-5\">\n <div class=\"profile-cover-buttons\"\n *ngIf=\"!allowEdit\">\n <div class=\"d-flex halfway-fab align-self-end\">\n <div class=\"text-end d-none d-sm-none d-md-none d-lg-block\">\n <button type=\"button\"\n (click)=\"followUser()\"\n class=\"btn btn-outline-primary btn-raised me-2\">\n <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\n {{ isFollowing ? 'Following' : 'Follow' }}\n </button>\n <button type=\"button\"\n class=\"btn btn-primary btn-raised me-3\"\n (click)=\"sendMessageSlug()\">\n <i class=\"fa fa-mail-bulk\" aria-hidden=\"true\"></i> Message\n </button>\n </div>\n <div class=\"text-end d-block d-sm-block d-md-block d-lg-none\">\n <button type=\"button\"\n class=\"btn btn-primary btn-raised me-2\">\n <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\n </button>\n <button type=\"button\"\n class=\"btn btn-primary btn-raised me-3\">\n <i class=\"fa fa-mail-bulk\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n<!-- Basic User Details Ends -->\n<section>\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <p-tabMenu #menuItems\n [model]=\"items\"\n [activeItem]=\"activeItem\"\n (keydown.enter)=\"activateMenu()\"\n (click)=\"activateMenu()\">\n </p-tabMenu>\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <ng-template [ngIf]=\"user && activeItem.id === 'about'\">\n <pw-user-about [user]=\"user\"\n [isEdit]=\"allowEdit\"\n (saveEvent)=\"getUserBySlug()\">\n </pw-user-about>\n </ng-template>\n <ng-template [ngIf]=\"activeItem.id === 'projects'\">\n <pw-user-projects [user]=\"user\"\n [isEdit]=\"allowEdit\"></pw-user-projects>\n </ng-template>\n <ng-template [ngIf]=\"activeItem.id === 'portfolio'\">\n <pw-portfolios [user]=\"user\"\n [isEdit]=\"allowEdit\"></pw-portfolios>\n </ng-template>\n </div>\n </div>\n </div>\n</section>\n<ng-template #content\n let-modal>\n <div class=\"card m-0\">\n <div class=\"card-content\">\n <div class=\"card-title\">\n <h3 class=\"modal-title\">{{ 'User.Profile.ProfilePicture' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"card-header\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile\n aspectRatio=\"auto\"\n [userAvatar]=\"image\"\n (imageSelectionEvent)=\"onImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.card-body{padding:10px!important}.py-3{padding-top:4rem!important;padding-bottom:0rem!important}.overlay-text{margin-left:-19px;margin-top:5px;text-align:center}::ng-deep .pw-tab .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link{background-color:#1769e1!important;box-shadow:none!important;color:#fff!important}::ng-deep .pw-tab .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link:hover{background-color:#1769e1!important;color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i6$5.TabMenu, selector: "p-tabMenu", inputs: ["model", "activeItem", "scrollable", "popup", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["activeItemChange"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: UserAboutComponent, selector: "pw-user-about", inputs: ["user", "isEdit"], outputs: ["saveEvent"] }, { kind: "component", type: PortfoliosComponent, selector: "pw-portfolios", inputs: ["user", "isEdit"] }, { kind: "component", type: UserProjectsComponent, selector: "pw-user-projects", inputs: ["user", "isEdit"] }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
3108
3108
  }
3109
3109
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UserProfilePageComponent, decorators: [{
3110
3110
  type: Component,