@adlfe/campaign-management-library 2.15.9 → 2.15.11
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.
- package/adlfe-campaign-management-library.d.ts +12 -11
- package/adlfe-campaign-management-library.metadata.json +1 -1
- package/bundles/adlfe-campaign-management-library.umd.js +56 -28
- package/bundles/adlfe-campaign-management-library.umd.js.map +1 -1
- package/bundles/adlfe-campaign-management-library.umd.min.js +1 -1
- package/bundles/adlfe-campaign-management-library.umd.min.js.map +1 -1
- package/esm2015/adlfe-campaign-management-library.js +13 -12
- package/esm2015/lib/campaign-management/campaign-management.module.js +9 -2
- package/esm2015/lib/campaign-management/modules/new-campaign/components/wa-media-preview/index.js +2 -0
- package/esm2015/lib/campaign-management/modules/new-campaign/components/wa-media-preview/wa-media-preview.component.js +37 -0
- package/esm2015/lib/campaign-management/modules/new-campaign/general-information/general-information.component.js +3 -17
- package/esm5/adlfe-campaign-management-library.js +13 -12
- package/esm5/lib/campaign-management/campaign-management.module.js +9 -2
- package/esm5/lib/campaign-management/modules/new-campaign/components/wa-media-preview/index.js +2 -0
- package/esm5/lib/campaign-management/modules/new-campaign/components/wa-media-preview/wa-media-preview.component.js +38 -0
- package/esm5/lib/campaign-management/modules/new-campaign/general-information/general-information.component.js +3 -17
- package/fesm2015/adlfe-campaign-management-library.js +44 -18
- package/fesm2015/adlfe-campaign-management-library.js.map +1 -1
- package/fesm5/adlfe-campaign-management-library.js +45 -18
- package/fesm5/adlfe-campaign-management-library.js.map +1 -1
- package/lib/campaign-management/modules/new-campaign/components/wa-media-preview/index.d.ts +1 -0
- package/lib/campaign-management/modules/new-campaign/components/wa-media-preview/wa-media-preview.component.d.ts +9 -0
- package/lib/campaign-management/modules/new-campaign/general-information/general-information.component.d.ts +0 -4
- package/package.json +1 -1
|
@@ -5606,8 +5606,6 @@ var GeneralInformationComponent = /** @class */ (function () {
|
|
|
5606
5606
|
this.isTouchedSMSForm = false;
|
|
5607
5607
|
this.isTouchedEmailForm = false;
|
|
5608
5608
|
this.isShowMore = false;
|
|
5609
|
-
this.showVideoModal = false;
|
|
5610
|
-
this.currentVideoUrl = '';
|
|
5611
5609
|
this.twilioResultCounter = {
|
|
5612
5610
|
segments: 0,
|
|
5613
5611
|
characters: 0,
|
|
@@ -5696,18 +5694,6 @@ var GeneralInformationComponent = /** @class */ (function () {
|
|
|
5696
5694
|
}
|
|
5697
5695
|
this.form.disable();
|
|
5698
5696
|
};
|
|
5699
|
-
GeneralInformationComponent.prototype.openVideo = function (url) {
|
|
5700
|
-
if (!url)
|
|
5701
|
-
return;
|
|
5702
|
-
this.currentVideoUrl = url;
|
|
5703
|
-
this.showVideoModal = true;
|
|
5704
|
-
document.body.style.overflow = 'hidden';
|
|
5705
|
-
};
|
|
5706
|
-
GeneralInformationComponent.prototype.closeVideo = function () {
|
|
5707
|
-
this.showVideoModal = false;
|
|
5708
|
-
this.currentVideoUrl = '';
|
|
5709
|
-
document.body.style.overflow = '';
|
|
5710
|
-
};
|
|
5711
5697
|
GeneralInformationComponent.prototype.updateGeneralInformationForm = function (form) {
|
|
5712
5698
|
this.generalInformationForm = form;
|
|
5713
5699
|
this.isShowMore = false;
|
|
@@ -5830,8 +5816,8 @@ var GeneralInformationComponent = /** @class */ (function () {
|
|
|
5830
5816
|
GeneralInformationComponent = __decorate([
|
|
5831
5817
|
Component({
|
|
5832
5818
|
selector: 'lib-new-campaign-general-information',
|
|
5833
|
-
template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n <div class=\"campaign-info\">\r\n <div class=\"campaign-info-child\">\r\n <mat-card>\r\n <mat-card-content>\r\n <h3 class=\"font-22px font-PoppinsBold mb-4\">General Information</h3>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Broadcast Name</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"campaignName\"\r\n placeholder=\"Enter Broadcast name\"\r\n />\r\n </mat-form-field>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <mat-hint align=\"start\">\r\n {{ form.get('campaignName').value?.length || 0 }}/100\r\n </mat-hint>\r\n\r\n <div>\r\n <mat-error\r\n align=\"end\"\r\n *ngFor=\"let validation of validationMessages.campaignName\"\r\n >\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('campaignName').touched &&\r\n form.get('campaignName').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Channel</mat-label>\r\n\r\n <mat-select placeholder=\"Select channel\" formControlName=\"medium\">\r\n <mat-option\r\n *ngFor=\"let option of channelOption\"\r\n [value]=\"option.value\"\r\n >\r\n {{ option.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.medium\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('medium').touched &&\r\n form.get('medium').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'WA'\">\r\n <lib-general-information-wa\r\n [isTouchedForm]=\"isTouchedWAForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-wa>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'LINE'\">\r\n <lib-general-information-line\r\n [isTouchedForm]=\"isTouchedSMSForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-line>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'SMS'\">\r\n <lib-general-information-sms\r\n [isTouchedForm]=\"isTouchedSMSForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-sms>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'EMAIL'\">\r\n <lib-general-information-email\r\n [isTouchedForm]=\"isTouchedEmailForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-email>\r\n </ng-container>\r\n </mat-card-content>\r\n </mat-card>\r\n </div>\r\n\r\n <div class=\"campaign-info-child pl-20px\">\r\n <h3 class=\"font-22px font-PoppinsBold\">Broadcast Content</h3>\r\n\r\n <div\r\n [ngClass]=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n ? 'campaign-border-preview'\r\n : 'campaign-preview'\r\n \"\r\n >\r\n <section\r\n *ngIf=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n \"\r\n >\r\n <p\r\n *ngIf=\"getBody\"\r\n class=\"body my-2\"\r\n style=\"max-width: 500px; word-wrap: break-word\"\r\n [innerHTML]=\"getBody\"\r\n ></p>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'WA'\" class=\"campaign-preview__wa\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <section *ngIf=\"getBody || getMedia || displayFile\">\r\n <div\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplate?.buttons?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"\r\n (getMedia === 'IMAGE' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'image') &&\r\n displayFile\r\n \"\r\n style=\"max-width: 100%\"\r\n alt=\"image\"\r\n [src]=\"displayFile\"\r\n />\r\n\r\n <video\r\n *ngIf=\"\r\n (getMedia === 'VIDEO' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'video') &&\r\n displayFile\r\n \"\r\n id=\"video\"\r\n style=\"width: 100%\"\r\n [src]=\"displayFile\"\r\n controls\r\n ></video>\r\n\r\n <div *ngIf=\"getMedia === 'DOCUMENT'\" style=\"display: flex\">\r\n <img\r\n style=\"width: 13px; height: 18px\"\r\n alt=\"document\"\r\n src=\"../../../../../assets/images/icon-file.png\"\r\n />\r\n\r\n <span style=\"margin-left: 10px\">Document</span>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getMedia === 'LOCATION'\">\r\n <agm-map\r\n style=\"width: 100%; height: 200px\"\r\n [disableDefaultUI]=\"true\"\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [zoom]=\"maps.zoom\"\r\n >\r\n <agm-marker\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [markerDraggable]=\"false\"\r\n ></agm-marker>\r\n </agm-map>\r\n <a\r\n [href]=\"\r\n 'https://www.google.com/maps/search/?api=1&query=' +\r\n maps.latitude +\r\n ',' +\r\n maps.longitude\r\n \"\r\n >\r\n https://www.google.com/maps/search/?api=1&query={{\r\n maps.latitude\r\n }},{{ maps.longitude }}\r\n </a>\r\n </ng-container>\r\n\r\n <p *ngIf=\"getBody\" class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n\r\n <p\r\n *ngIf=\"getTemplate?.footer\"\r\n class=\"mb-2\"\r\n style=\"color: rgb(160, 160, 160)\"\r\n >\r\n {{ getTemplate.footer }}\r\n </p>\r\n </div>\r\n </section>\r\n <section *ngIf=\"getTemplate?.buttons?.length > 0\">\r\n <div\r\n *ngFor=\"let button of getTemplateButton\"\r\n class=\"params-btn pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text || button?.type }}\r\n </p>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"getTemplate?.buttons?.length > 3\"\r\n class=\"params-btn pb-0 pointer\"\r\n (click)=\"isShowMore = !isShowMore\"\r\n >\r\n <p class=\"mb-0\"><mat-icon>list</mat-icon> See all options</p>\r\n </div>\r\n </section>\r\n <!-- ========================================== -->\r\n <!-- WA CAROUSEL PREVIEW -->\r\n <!-- ========================================== -->\r\n <div\r\n *ngIf=\"getTemplate?.carousel?.length > 0\"\r\n class=\"wa-carousel-container\"\r\n >\r\n <div class=\"d-flex gap-2 mt-2 pb-2 wa-carousel-scroll\">\r\n <div\r\n *ngFor=\"let card of getTemplate?.carousel\"\r\n class=\"wa-carousel-card\"\r\n >\r\n <ng-container *ngIf=\"card.header?.url || card.headerURL\">\r\n <div\r\n *ngIf=\"card.header?.type === 'VIDEO'\"\r\n class=\"wa-carousel-video-thumbnail\"\r\n (click)=\"openVideo(card.header?.url || card.headerURL)\"\r\n style=\"\r\n position: relative;\r\n width: 100%;\r\n height: 160px;\r\n background-color: #e4e6e7;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n border-top-left-radius: inherit;\r\n border-top-right-radius: inherit;\r\n \"\r\n >\r\n <ng-container\r\n *ngIf=\"\r\n card.header?.url || card.headerURL\r\n | videoPoster\r\n | async as posterUrl;\r\n else loadingVideo\r\n \"\r\n >\r\n <img\r\n [src]=\"posterUrl\"\r\n style=\"\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n \"\r\n alt=\"Video Thumbnail\"\r\n />\r\n </ng-container>\r\n <ng-template #loadingVideo>\r\n <span\r\n style=\"\r\n color: #8696a0;\r\n font-size: 12px;\r\n z-index: 1;\r\n \"\r\n >Load Video...</span\r\n >\r\n </ng-template>\r\n <div class=\"play-overlay\">\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"white\"\r\n width=\"24\"\r\n height=\"24\"\r\n >\r\n <path d=\"M8 5v14l11-7z\"></path>\r\n </svg>\r\n </div>\r\n </div>\r\n <img\r\n *ngIf=\"card.header?.type !== 'VIDEO'\"\r\n class=\"card-header-image\"\r\n [src]=\"card.header?.url || card.headerURL\"\r\n alt=\"Carousel Header Media\"\r\n />\r\n </ng-container>\r\n\r\n <div class=\"card-body-content\">\r\n <p\r\n *ngIf=\"card.body?.text || card.bodyText\"\r\n class=\"card-text\"\r\n >\r\n {{ card.body?.text || card.bodyText }}\r\n </p>\r\n </div>\r\n\r\n <section\r\n *ngIf=\"card.buttons?.length > 0 || card.button?.length > 0\"\r\n class=\"card-buttons-wrapper\"\r\n >\r\n <div\r\n *ngFor=\"let btn of card.buttons || card.button\"\r\n class=\"card-button\"\r\n >\r\n <ng-container\r\n [ngSwitch]=\"\r\n btn?.type || btn?.actionType || 'QUICK_REPLY'\r\n \"\r\n >\r\n <svg\r\n *ngSwitchCase=\"'QUICK_REPLY'\"\r\n width=\"15\"\r\n height=\"15\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#00a884\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M9 14 4 9l5-5\" />\r\n <path d=\"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v3.5\" />\r\n </svg>\r\n <svg\r\n *ngSwitchCase=\"'URL'\"\r\n width=\"15\"\r\n height=\"15\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#00a884\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path\r\n d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\r\n ></path>\r\n <polyline points=\"15 3 21 3 21 9\"></polyline>\r\n <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line>\r\n </svg>\r\n <svg\r\n *ngSwitchDefault\r\n width=\"15\"\r\n height=\"15\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#00a884\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M9 14 4 9l5-5\" />\r\n <path d=\"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v3.5\" />\r\n </svg>\r\n </ng-container>\r\n\r\n <p class=\"text-center btn-text\">\r\n {{ btn?.text || btn?.type || 'Button' }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n <!-- Dot Indicators -->\r\n <div\r\n *ngIf=\"getTemplate?.carousel?.length > 1\"\r\n class=\"wa-carousel-indicators\"\r\n >\r\n <div\r\n *ngFor=\"let card of getTemplate?.carousel; let i = index\"\r\n class=\"dot\"\r\n [style.background-color]=\"i === 0 ? '#8696a0' : '#d1d7db'\"\r\n ></div>\r\n </div>\r\n </div>\r\n <!-- Modal Video Custom -->\r\n <div\r\n class=\"custom-video-modal\"\r\n *ngIf=\"showVideoModal\"\r\n (click)=\"closeVideo()\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"close-btn\"\r\n (click)=\"closeVideo()\"\r\n aria-label=\"Close modal\"\r\n >\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n width=\"28\"\r\n height=\"28\"\r\n >\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n </button>\r\n <div class=\"modal-content-wrapper\" (click)=\"$event.stopPropagation()\">\r\n <video\r\n [src]=\"currentVideoUrl\"\r\n controls\r\n autoplay\r\n playsinline\r\n ></video>\r\n </div>\r\n </div>\r\n <!-- ========================================== -->\r\n </div>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'LINE'\" class=\"campaign-preview__line\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <section *ngIf=\"isText || !isJSON\" class=\"chat\">\r\n <p class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n </section>\r\n\r\n <section\r\n *ngIf=\"['buttons', 'confirm'].includes(getTemplateLine?.type)\"\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplateLine?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"getTemplateLine?.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"getTemplateLine?.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"getTemplateLine?.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"getTemplateLine?.text\"\r\n ></p>\r\n </section>\r\n <div\r\n *ngIf=\"['carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <section\r\n class=\"chat w-100\"\r\n [ngClass]=\"{ 'no-bottom-border': column?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"column.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"column.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"column.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"column.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"column.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"column.text\"\r\n ></p>\r\n </section>\r\n <section *ngIf=\"column?.actions?.length > 0\">\r\n <div\r\n *ngFor=\"let button of column?.actions\"\r\n class=\"params-btn mw-100 pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"['image_carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <div class=\"image-container\">\r\n <img [src]=\"column.imageUrl\" alt=\"image\" />\r\n\r\n <div class=\"d-flex justify-content-center\">\r\n <p class=\"font-13px overlay-text\">\r\n {{ column.action.label }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type !== 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type === 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n class=\"d-flex justify-content-around mw-70 bg-white\"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn flex pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div class=\"d-flex\" style=\"flex-direction: column\">\r\n <span\r\n *ngIf=\"form.get('medium').value === 'SMS'\"\r\n style=\"text-align: right; width: 100%\"\r\n >\r\n {{ twilioResultCounter.fulltext }}\r\n </span>\r\n <span\r\n style=\"text-align: right; width: 100%; color: red\"\r\n *ngIf=\"twilioResultCounter.segments > 10 && form.get('medium').value === 'SMS'\"\r\n >\r\n Maximum Segment is 10\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<ng-template #isSpinner>\r\n <div class=\"text-center my-auto\">\r\n <img src=\"../../../../../assets/images/spinner.svg\" />\r\n </div>\r\n</ng-template>\r\n",
|
|
5834
|
-
styles: [".campaign-info{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}.campaign-info-child{flex:1;min-width:49%}.campaign-info-child mat-card{width:100%}.campaign-info .asterix--after:after{content:\"*\";color:red}.campaign-info .pl-20px{padding-left:20px}.campaign-info .mw-70{max-width:70%}.campaign-info .campaign-preview{width:100%;max-width:550px;flex-shrink:0}.campaign-info .campaign-preview .header-preview{padding:15px;min-height:60px;border-radius:10px 10px 0 0}.campaign-info .campaign-preview .header-preview .heading{width:100%;color:#e0e0e0;margin-left:5px;font-size:20px}.campaign-info .campaign-preview .body-preview{padding:15px;min-height:470px}.campaign-info .campaign-preview .body-preview .chat{width:90%;padding:11px;font-size:14px;line-height:22px;color:#494949;border-radius:8px;background:#fff;overflow-wrap:break-word;white-space:pre-line;box-shadow:12px 12px 20px rgba(44,59,113,.04)
|
|
5819
|
+
template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n <div class=\"campaign-info\">\r\n <div class=\"campaign-info-child\">\r\n <mat-card>\r\n <mat-card-content>\r\n <h3 class=\"font-22px font-PoppinsBold mb-4\">General Information</h3>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Broadcast Name</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"campaignName\"\r\n placeholder=\"Enter Broadcast name\"\r\n />\r\n </mat-form-field>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <mat-hint align=\"start\">\r\n {{ form.get('campaignName').value?.length || 0 }}/100\r\n </mat-hint>\r\n\r\n <div>\r\n <mat-error\r\n align=\"end\"\r\n *ngFor=\"let validation of validationMessages.campaignName\"\r\n >\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('campaignName').touched &&\r\n form.get('campaignName').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Channel</mat-label>\r\n\r\n <mat-select placeholder=\"Select channel\" formControlName=\"medium\">\r\n <mat-option\r\n *ngFor=\"let option of channelOption\"\r\n [value]=\"option.value\"\r\n >\r\n {{ option.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.medium\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('medium').touched &&\r\n form.get('medium').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'WA'\">\r\n <lib-general-information-wa\r\n [isTouchedForm]=\"isTouchedWAForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-wa>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'LINE'\">\r\n <lib-general-information-line\r\n [isTouchedForm]=\"isTouchedSMSForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-line>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'SMS'\">\r\n <lib-general-information-sms\r\n [isTouchedForm]=\"isTouchedSMSForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-sms>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'EMAIL'\">\r\n <lib-general-information-email\r\n [isTouchedForm]=\"isTouchedEmailForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-email>\r\n </ng-container>\r\n </mat-card-content>\r\n </mat-card>\r\n </div>\r\n\r\n <div class=\"campaign-info-child pl-20px\">\r\n <h3 class=\"font-22px font-PoppinsBold\">Broadcast Content</h3>\r\n\r\n <div\r\n [ngClass]=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n ? 'campaign-border-preview'\r\n : 'campaign-preview'\r\n \"\r\n >\r\n <section\r\n *ngIf=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n \"\r\n >\r\n <p\r\n *ngIf=\"getBody\"\r\n class=\"body my-2\"\r\n style=\"max-width: 500px; word-wrap: break-word\"\r\n [innerHTML]=\"getBody\"\r\n ></p>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'WA'\" class=\"campaign-preview__wa\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <section *ngIf=\"getBody || getMedia || displayFile\">\r\n <div\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplate?.buttons?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"\r\n (getMedia === 'IMAGE' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'image') &&\r\n displayFile\r\n \"\r\n style=\"max-width: 100%\"\r\n alt=\"image\"\r\n [src]=\"displayFile\"\r\n />\r\n\r\n <video\r\n *ngIf=\"\r\n (getMedia === 'VIDEO' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'video') &&\r\n displayFile\r\n \"\r\n id=\"video\"\r\n style=\"width: 100%\"\r\n [src]=\"displayFile\"\r\n controls\r\n ></video>\r\n\r\n <div *ngIf=\"getMedia === 'DOCUMENT'\" style=\"display: flex\">\r\n <img\r\n style=\"width: 13px; height: 18px\"\r\n alt=\"document\"\r\n src=\"../../../../../assets/images/icon-file.png\"\r\n />\r\n\r\n <span style=\"margin-left: 10px\">Document</span>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getMedia === 'LOCATION'\">\r\n <agm-map\r\n style=\"width: 100%; height: 200px\"\r\n [disableDefaultUI]=\"true\"\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [zoom]=\"maps.zoom\"\r\n >\r\n <agm-marker\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [markerDraggable]=\"false\"\r\n ></agm-marker>\r\n </agm-map>\r\n <a\r\n [href]=\"\r\n 'https://www.google.com/maps/search/?api=1&query=' +\r\n maps.latitude +\r\n ',' +\r\n maps.longitude\r\n \"\r\n >\r\n https://www.google.com/maps/search/?api=1&query={{\r\n maps.latitude\r\n }},{{ maps.longitude }}\r\n </a>\r\n </ng-container>\r\n\r\n <p *ngIf=\"getBody\" class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n\r\n <p\r\n *ngIf=\"getTemplate?.footer\"\r\n class=\"mb-2\"\r\n style=\"color: rgb(160, 160, 160)\"\r\n >\r\n {{ getTemplate.footer }}\r\n </p>\r\n </div>\r\n </section>\r\n <section *ngIf=\"getTemplate?.buttons?.length > 0\">\r\n <div\r\n *ngFor=\"let button of getTemplateButton\"\r\n class=\"params-btn pb-2 pointer\"\r\n >\r\n <svg\r\n class=\"reply-icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <polyline points=\"9 17 4 12 9 7\"></polyline>\r\n <path d=\"M20 18v-2a4 4 0 0 0-4-4H4\"></path>\r\n </svg>\r\n <p class=\"mb-0\">\r\n {{ button?.text || button?.type }}\r\n </p>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"getTemplate?.buttons?.length > 3\"\r\n class=\"params-btn pb-0 pointer\"\r\n (click)=\"isShowMore = !isShowMore\"\r\n >\r\n <p class=\"mb-0\"><mat-icon>list</mat-icon> See all options</p>\r\n </div>\r\n </section>\r\n <!-- ========================================== -->\r\n <!-- WA CAROUSEL PREVIEW -->\r\n <!-- ========================================== -->\r\n <div\r\n *ngIf=\"getTemplate?.carousel?.length > 0\"\r\n class=\"wa-carousel-container\"\r\n >\r\n <div class=\"d-flex gap-2 mt-2 pb-2 wa-carousel-scroll\">\r\n <div\r\n *ngFor=\"let card of getTemplate?.carousel\"\r\n class=\"wa-carousel-card\"\r\n >\r\n <ng-container *ngIf=\"card.header?.url || card.headerURL\">\r\n <lib-wa-media-preview\r\n [url]=\"card.header?.url || card.headerURL\"\r\n [type]=\"card.header?.type\"\r\n ></lib-wa-media-preview>\r\n </ng-container>\r\n\r\n <div class=\"card-body-content\">\r\n <p\r\n *ngIf=\"card.body?.text || card.bodyText\"\r\n class=\"card-text\"\r\n >\r\n {{ card.body?.text || card.bodyText }}\r\n </p>\r\n </div>\r\n\r\n <section\r\n *ngIf=\"card.buttons?.length > 0 || card.button?.length > 0\"\r\n class=\"card-buttons-wrapper\"\r\n >\r\n <div\r\n *ngFor=\"let btn of card.buttons || card.button\"\r\n class=\"card-button\"\r\n >\r\n <ng-container\r\n [ngSwitch]=\"\r\n btn?.type || btn?.actionType || 'QUICK_REPLY'\r\n \"\r\n >\r\n <svg\r\n *ngSwitchCase=\"'QUICK_REPLY'\"\r\n width=\"15\"\r\n height=\"15\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#00a884\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M9 14 4 9l5-5\" />\r\n <path d=\"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v3.5\" />\r\n </svg>\r\n <svg\r\n *ngSwitchCase=\"'URL'\"\r\n width=\"15\"\r\n height=\"15\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#00a884\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path\r\n d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\r\n ></path>\r\n <polyline points=\"15 3 21 3 21 9\"></polyline>\r\n <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line>\r\n </svg>\r\n <svg\r\n *ngSwitchDefault\r\n width=\"15\"\r\n height=\"15\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#00a884\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M9 14 4 9l5-5\" />\r\n <path d=\"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v3.5\" />\r\n </svg>\r\n </ng-container>\r\n\r\n <p class=\"text-center btn-text\">\r\n {{ btn?.text || btn?.type || 'Button' }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n <!-- Dot Indicators -->\r\n <div\r\n *ngIf=\"getTemplate?.carousel?.length > 1\"\r\n class=\"wa-carousel-indicators\"\r\n >\r\n <div\r\n *ngFor=\"let card of getTemplate?.carousel; let i = index\"\r\n class=\"dot\"\r\n [style.background-color]=\"i === 0 ? '#8696a0' : '#d1d7db'\"\r\n ></div>\r\n </div>\r\n </div>\r\n <!-- ========================================== -->\r\n </div>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'LINE'\" class=\"campaign-preview__line\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <section *ngIf=\"isText || !isJSON\" class=\"chat\">\r\n <p class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n </section>\r\n\r\n <section\r\n *ngIf=\"['buttons', 'confirm'].includes(getTemplateLine?.type)\"\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplateLine?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"getTemplateLine?.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"getTemplateLine?.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"getTemplateLine?.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"getTemplateLine?.text\"\r\n ></p>\r\n </section>\r\n <div\r\n *ngIf=\"['carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <section\r\n class=\"chat w-100\"\r\n [ngClass]=\"{ 'no-bottom-border': column?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"column.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"column.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"column.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"column.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"column.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"column.text\"\r\n ></p>\r\n </section>\r\n <section *ngIf=\"column?.actions?.length > 0\">\r\n <div\r\n *ngFor=\"let button of column?.actions\"\r\n class=\"params-btn mw-100 pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"['image_carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <div class=\"image-container\">\r\n <img [src]=\"column.imageUrl\" alt=\"image\" />\r\n\r\n <div class=\"d-flex justify-content-center\">\r\n <p class=\"font-13px overlay-text\">\r\n {{ column.action.label }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type !== 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type === 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n class=\"d-flex justify-content-around mw-70 bg-white\"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn flex pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div class=\"d-flex\" style=\"flex-direction: column\">\r\n <span\r\n *ngIf=\"form.get('medium').value === 'SMS'\"\r\n style=\"text-align: right; width: 100%\"\r\n >\r\n {{ twilioResultCounter.fulltext }}\r\n </span>\r\n <span\r\n style=\"text-align: right; width: 100%; color: red\"\r\n *ngIf=\"twilioResultCounter.segments > 10 && form.get('medium').value === 'SMS'\"\r\n >\r\n Maximum Segment is 10\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<ng-template #isSpinner>\r\n <div class=\"text-center my-auto\">\r\n <img src=\"../../../../../assets/images/spinner.svg\" />\r\n </div>\r\n</ng-template>\r\n",
|
|
5820
|
+
styles: [".campaign-info{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}.campaign-info-child{flex:1;min-width:49%}.campaign-info-child mat-card{width:100%}.campaign-info .asterix--after:after{content:\"*\";color:red}.campaign-info .pl-20px{padding-left:20px}.campaign-info .mw-70{max-width:70%}.campaign-info .campaign-preview{width:100%;max-width:550px;flex-shrink:0}.campaign-info .campaign-preview .header-preview{padding:15px;min-height:60px;border-radius:10px 10px 0 0}.campaign-info .campaign-preview .header-preview .heading{width:100%;color:#e0e0e0;margin-left:5px;font-size:20px}.campaign-info .campaign-preview .body-preview{padding:15px;min-height:470px}.campaign-info .campaign-preview .body-preview .chat{width:90%;padding:11px;font-size:14px;line-height:22px;color:#494949;border-radius:8px;background:#fff;overflow-wrap:break-word;white-space:pre-line;box-shadow:12px 12px 20px rgba(44,59,113,.04)}.campaign-info .campaign-preview .body-preview .chat .body{max-height:400px;overflow-y:auto;overscroll-behavior-y:contain}.campaign-info .campaign-preview .body-preview .chat.no-bottom-border{border-bottom-left-radius:0;border-bottom-right-radius:0}.campaign-info .campaign-preview__wa .header-preview{background:#065f54}.campaign-info .campaign-preview__wa .body-preview{border-bottom-left-radius:8px;border-bottom-right-radius:8px;background-image:url(../../../../assets/svg/whatsapp-bg.svg);background-position:center;background-repeat:no-repeat;background-size:cover}.campaign-info .campaign-preview__wa .body-preview .params-btn{width:90%;max-width:100%;background:#fff;color:#00a884;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;padding:12px 16px;line-height:normal;border-top:1px solid #f0f2f5;border-radius:0;box-shadow:12px 12px 20px rgba(44,59,113,.04)}.campaign-info .campaign-preview__wa .body-preview .params-btn:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.campaign-info .campaign-preview__wa .body-preview .params-btn .reply-icon{width:16px;height:16px;color:#00a884}.campaign-info .campaign-preview__wa .body-preview .params-btn b{font-family:PoppinsBold}.campaign-info .campaign-preview__line .header-preview{background:#273046}.campaign-info .campaign-preview__line .body-preview{background:#7692bf;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.campaign-info .campaign-preview__line .body-preview .params-btn{width:auto;max-width:70%;color:#34b7f1;background:#fff;box-shadow:12px 12px 20px rgba(44,59,113,.04);border-radius:0;font-size:16px;line-height:43px;padding:0;text-align:center;font-family:Poppins;overflow-wrap:break-word}.campaign-info .campaign-preview__line .body-preview .params-btn b{font-family:PoppinsBold}.campaign-info .campaign-preview__line .body-preview .image-container{position:relative;width:200px;height:200px}.campaign-info .campaign-preview__line .body-preview .image-container img{display:block;width:100%;height:100%}.campaign-info .campaign-preview__line .body-preview .image-container .overlay-text{top:170px;position:absolute;padding:2px 5px;color:#fff;background-color:rgba(49,57,60,.62);border-radius:10px}.campaign-info .campaign-border-preview{width:100%;min-height:100px;padding:32px;border:1px solid #e2e2e2;border-radius:8px}.wa-carousel-container{width:100%}.wa-carousel-container .wa-carousel-scroll{width:100%;padding-right:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none}.wa-carousel-container .wa-carousel-scroll::-webkit-scrollbar{display:none}.wa-carousel-container .wa-carousel-card{min-width:220px;flex-shrink:0;padding:0;overflow:hidden;background:#fff;border-radius:12px;border:1px solid #d1d7db;display:flex;flex-direction:column;scroll-snap-align:start}.wa-carousel-container .wa-carousel-card .card-header-image{width:100%;height:130px;-o-object-fit:cover;object-fit:cover;background:#e0e0e0}.wa-carousel-container .wa-carousel-card .card-body-content{padding:12px;flex-grow:1}.wa-carousel-container .wa-carousel-card .card-body-content .card-text{white-space:pre-wrap;font-size:12px;color:#111b21;margin:0}.wa-carousel-container .wa-carousel-card .card-buttons-wrapper{width:100%}.wa-carousel-container .wa-carousel-card .card-buttons-wrapper .card-button{border-top:1px solid #f0f2f5;width:100%;padding:8px 0;background:#fff;display:flex;justify-content:center;align-items:center;gap:8px;cursor:pointer}.wa-carousel-container .wa-carousel-card .card-buttons-wrapper .card-button .btn-text{color:#00a884;font-size:12px;font-weight:500;margin-bottom:0}.wa-carousel-container .wa-carousel-indicators{display:flex;justify-content:center;gap:6px;padding:10px 0}.wa-carousel-container .wa-carousel-indicators .dot{width:6px;height:6px;border-radius:50%;transition:background-color .3s}"]
|
|
5835
5821
|
})
|
|
5836
5822
|
], GeneralInformationComponent);
|
|
5837
5823
|
return GeneralInformationComponent;
|
|
@@ -6416,6 +6402,41 @@ var VideoPosterPipe = /** @class */ (function () {
|
|
|
6416
6402
|
return VideoPosterPipe;
|
|
6417
6403
|
}());
|
|
6418
6404
|
|
|
6405
|
+
var WaMediaPreviewComponent = /** @class */ (function () {
|
|
6406
|
+
function WaMediaPreviewComponent() {
|
|
6407
|
+
this.type = '';
|
|
6408
|
+
this.url = '';
|
|
6409
|
+
this.showVideoModal = false;
|
|
6410
|
+
this.currentVideoUrl = '';
|
|
6411
|
+
}
|
|
6412
|
+
WaMediaPreviewComponent.prototype.openVideo = function (url) {
|
|
6413
|
+
if (!url)
|
|
6414
|
+
return;
|
|
6415
|
+
this.currentVideoUrl = url;
|
|
6416
|
+
this.showVideoModal = true;
|
|
6417
|
+
document.body.style.overflow = 'hidden';
|
|
6418
|
+
};
|
|
6419
|
+
WaMediaPreviewComponent.prototype.closeVideo = function () {
|
|
6420
|
+
this.showVideoModal = false;
|
|
6421
|
+
this.currentVideoUrl = '';
|
|
6422
|
+
document.body.style.overflow = '';
|
|
6423
|
+
};
|
|
6424
|
+
__decorate([
|
|
6425
|
+
Input()
|
|
6426
|
+
], WaMediaPreviewComponent.prototype, "type", void 0);
|
|
6427
|
+
__decorate([
|
|
6428
|
+
Input()
|
|
6429
|
+
], WaMediaPreviewComponent.prototype, "url", void 0);
|
|
6430
|
+
WaMediaPreviewComponent = __decorate([
|
|
6431
|
+
Component({
|
|
6432
|
+
selector: 'lib-wa-media-preview',
|
|
6433
|
+
template: "<div *ngIf=\"type === 'VIDEO'\" class=\"wa-carousel-video-thumbnail\" (click)=\"openVideo(url)\">\n <ng-container *ngIf=\"url | videoPoster | async as posterUrl; else loadingVideo\">\n <img\n [src]=\"posterUrl\"\n style=\"\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n \"\n alt=\"Video Thumbnail\"\n />\n </ng-container>\n <ng-template #loadingVideo>\n <span style=\"color: #8696a0; font-size: 12px; z-index: 1\">Load Video...</span>\n </ng-template>\n <div class=\"play-overlay\">\n <svg viewBox=\"0 0 24 24\" fill=\"white\" width=\"24\" height=\"24\">\n <path d=\"M8 5v14l11-7z\"></path>\n </svg>\n </div>\n</div>\n<img *ngIf=\"type !== 'VIDEO'\" class=\"card-header-image\" [src]=\"url\" alt=\"Carousel Header Media\" />\n<!-- Modal Video Custom -->\n<div class=\"custom-video-modal\" *ngIf=\"showVideoModal\" (click)=\"closeVideo()\">\n <button type=\"button\" class=\"close-btn\" (click)=\"closeVideo()\" aria-label=\"Close modal\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" width=\"28\" height=\"28\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n <div class=\"modal-content-wrapper\" (click)=\"$event.stopPropagation()\">\n <video [src]=\"currentVideoUrl\" controls autoplay playsinline></video>\n </div>\n</div>\n",
|
|
6434
|
+
styles: [".wa-carousel-video-thumbnail{position:relative;width:100%;height:160px;background-color:#e4e6e7;display:flex;align-items:center;justify-content:center;overflow:hidden;border-top-left-radius:inherit;border-top-right-radius:inherit}.wa-carousel-video-thumbnail .poster-image{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.wa-carousel-video-thumbnail .loading-text{color:#8696a0;font-size:12px;z-index:1}.wa-carousel-video-thumbnail .play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:48px;height:48px;background-color:rgba(0,0,0,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s ease-in-out}.wa-carousel-video-thumbnail .play-overlay svg{margin-left:2px}.wa-carousel-video-thumbnail .play-overlay:hover{background-color:rgba(0,0,0,.8);transform:translate(-50%,-50%) scale(1.1)}.wa-carousel-video-thumbnail .play-overlay:active{transform:translate(-50%,-50%) scale(.95)}img{width:100%;height:160px;-o-object-fit:cover;object-fit:cover;display:block;border-top-left-radius:8px;border-top-right-radius:8px}.custom-video-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.9);z-index:99999;display:flex;align-items:center;justify-content:center}.custom-video-modal .close-btn{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.2);border:none;border-radius:50%;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .2s}.custom-video-modal .close-btn:hover{background:rgba(255,255,255,.4)}.custom-video-modal .modal-content-wrapper{max-width:90%;max-height:90%;display:flex;align-items:center;justify-content:center}.custom-video-modal .modal-content-wrapper video{max-width:100%;max-height:85vh;outline:0;box-shadow:0 4px 20px rgba(0,0,0,.5);border-radius:8px;background-color:#000}"]
|
|
6435
|
+
})
|
|
6436
|
+
], WaMediaPreviewComponent);
|
|
6437
|
+
return WaMediaPreviewComponent;
|
|
6438
|
+
}());
|
|
6439
|
+
|
|
6419
6440
|
var CampaignManagementModule = /** @class */ (function () {
|
|
6420
6441
|
function CampaignManagementModule() {
|
|
6421
6442
|
}
|
|
@@ -6436,6 +6457,7 @@ var CampaignManagementModule = /** @class */ (function () {
|
|
|
6436
6457
|
PendingApprovalDialogViewComponent,
|
|
6437
6458
|
FailoverMechanismComponent,
|
|
6438
6459
|
VideoPosterPipe,
|
|
6460
|
+
WaMediaPreviewComponent,
|
|
6439
6461
|
],
|
|
6440
6462
|
imports: [
|
|
6441
6463
|
CommonModule,
|
|
@@ -6479,7 +6501,12 @@ var CampaignManagementModule = /** @class */ (function () {
|
|
|
6479
6501
|
CampaignIndexModule,
|
|
6480
6502
|
InputNumericModule,
|
|
6481
6503
|
],
|
|
6482
|
-
exports: [
|
|
6504
|
+
exports: [
|
|
6505
|
+
CampaignManagementComponent,
|
|
6506
|
+
SummaryComponent,
|
|
6507
|
+
VideoPosterPipe,
|
|
6508
|
+
WaMediaPreviewComponent,
|
|
6509
|
+
],
|
|
6483
6510
|
entryComponents: [PendingApprovalDialogViewComponent],
|
|
6484
6511
|
providers: [DatePipe],
|
|
6485
6512
|
})
|
|
@@ -6533,5 +6560,5 @@ var ConfirmationModule = /** @class */ (function () {
|
|
|
6533
6560
|
* Generated bundle index. Do not edit.
|
|
6534
6561
|
*/
|
|
6535
6562
|
|
|
6536
|
-
export { AdlCampaignManagementLibraryInternalComponent, AdlCampaignManagementLibraryInternalModule, CampaignIndexComponent, CampaignIndexModule, CampaignManagementComponent, CampaignManagementModule, ConfirmationComponent, ConfirmationModule, DashboardComponent, DashboardModule, MatSelectInfiniteScrollDirective, SearchComponent, SearchModule, SummaryComponent, WizardComponent as ɵa, NewCampaignComponent as ɵb, GeneralInformationComponent as ɵc, SchedulerComponent as ɵd, SummaryComponent as ɵe, NewNumberBasesComponent as ɵf, GeneralInformationLineComponent as ɵg, GeneralInformationWAComponent as ɵh, GeneralInformationSMSComponent as ɵi, GeneralInformationEmailComponent as ɵj, PendingApprovalDialogViewComponent as ɵk, FailoverMechanismComponent as ɵl, VideoPosterPipe as ɵm,
|
|
6563
|
+
export { AdlCampaignManagementLibraryInternalComponent, AdlCampaignManagementLibraryInternalModule, CampaignIndexComponent, CampaignIndexModule, CampaignManagementComponent, CampaignManagementModule, ConfirmationComponent, ConfirmationModule, DashboardComponent, DashboardModule, MatSelectInfiniteScrollDirective, SearchComponent, SearchModule, SummaryComponent, WizardComponent as ɵa, NewCampaignComponent as ɵb, GeneralInformationComponent as ɵc, SchedulerComponent as ɵd, SummaryComponent as ɵe, NewNumberBasesComponent as ɵf, GeneralInformationLineComponent as ɵg, GeneralInformationWAComponent as ɵh, GeneralInformationSMSComponent as ɵi, GeneralInformationEmailComponent as ɵj, PendingApprovalDialogViewComponent as ɵk, FailoverMechanismComponent as ɵl, VideoPosterPipe as ɵm, WaMediaPreviewComponent as ɵn, ApiAdapterServiceService as ɵo, ViewingListOfCampaignTableComponent as ɵp, FilterInListOfCampaignComponent as ɵq, ApiAdapterServiceService as ɵr, MatSelectInfiniteScrollDirective as ɵs, InputNumericModule as ɵt, InputNumericComponent as ɵu, CustomPaginator as ɵv, ConfirmationComponent as ɵw, ConfirmationModel as ɵx, SharedServicesService as ɵy };
|
|
6537
6564
|
//# sourceMappingURL=adlfe-campaign-management-library.js.map
|