@adlfe/campaign-management-library 2.15.8 → 2.15.9
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 +96 -16
- package/bundles/adlfe-campaign-management-library.umd.js.map +1 -1
- package/bundles/adlfe-campaign-management-library.umd.min.js +2 -2
- package/bundles/adlfe-campaign-management-library.umd.min.js.map +1 -1
- package/esm2015/adlfe-campaign-management-library.js +13 -12
- package/esm2015/environments/environment.js +3 -3
- package/esm2015/lib/campaign-management/campaign-management.module.js +4 -2
- package/esm2015/lib/campaign-management/modules/new-campaign/general-information/general-information.component.js +17 -3
- package/esm2015/lib/campaign-management/util/video-poster.pipe.js +60 -0
- package/esm2015/lib/core/util/form-utils.js +4 -0
- package/esm2015/lib/core/util/index.js +2 -1
- package/esm5/adlfe-campaign-management-library.js +13 -12
- package/esm5/environments/environment.js +3 -3
- package/esm5/lib/campaign-management/campaign-management.module.js +4 -2
- package/esm5/lib/campaign-management/modules/new-campaign/general-information/general-information.component.js +17 -3
- package/esm5/lib/campaign-management/util/video-poster.pipe.js +63 -0
- package/esm5/lib/core/util/form-utils.js +4 -0
- package/esm5/lib/core/util/index.js +2 -1
- package/fesm2015/adlfe-campaign-management-library.js +83 -7
- package/fesm2015/adlfe-campaign-management-library.js.map +1 -1
- package/fesm5/adlfe-campaign-management-library.js +86 -7
- package/fesm5/adlfe-campaign-management-library.js.map +1 -1
- package/lib/campaign-management/modules/new-campaign/general-information/general-information.component.d.ts +4 -0
- package/lib/campaign-management/util/video-poster.pipe.d.ts +4 -0
- package/lib/core/util/form-utils.d.ts +2 -0
- package/lib/core/util/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate, __extends, __assign, __spread, __param, __values, __awaiter, __generator } from 'tslib';
|
|
2
|
-
import { Component, EventEmitter, Output, Input, NgModule, ContentChild, forwardRef, NgZone, Directive, ɵɵdefineInjectable, ɵɵinject, Injectable, Inject, ViewChild } from '@angular/core';
|
|
2
|
+
import { Component, EventEmitter, Output, Input, NgModule, ContentChild, forwardRef, NgZone, Directive, ɵɵdefineInjectable, ɵɵinject, Injectable, Inject, ViewChild, Pipe } from '@angular/core';
|
|
3
3
|
import { MapsAPILoader, AgmCoreModule } from '@agm/core';
|
|
4
4
|
import { CommonModule, DatePipe } from '@angular/common';
|
|
5
5
|
import { HttpHeaders, HttpClient, HttpParams, HttpClientModule } from '@angular/common/http';
|
|
@@ -813,11 +813,11 @@ else if (origin.includes('dashboard-qa')) {
|
|
|
813
813
|
}
|
|
814
814
|
// 4. Cek Demo Dev secara spesifik
|
|
815
815
|
else if (origin.includes('demo-dev')) {
|
|
816
|
-
API_CONST = 'https://
|
|
816
|
+
API_CONST = 'https://api-staging.neuapix.com';
|
|
817
817
|
}
|
|
818
818
|
// 5. Default (Localhost atau lainnya)
|
|
819
819
|
else {
|
|
820
|
-
API_CONST = 'https://
|
|
820
|
+
API_CONST = 'https://api-staging.neuapix.com';
|
|
821
821
|
}
|
|
822
822
|
var environment = {
|
|
823
823
|
production: false,
|
|
@@ -1583,6 +1583,10 @@ var generateHttpParams = function (params) {
|
|
|
1583
1583
|
return httpParams;
|
|
1584
1584
|
};
|
|
1585
1585
|
|
|
1586
|
+
var getFormControl = function (form, controlName) {
|
|
1587
|
+
return form ? form.get(controlName) : null;
|
|
1588
|
+
};
|
|
1589
|
+
|
|
1586
1590
|
var FilterInListOfCampaignComponent = /** @class */ (function () {
|
|
1587
1591
|
function FilterInListOfCampaignComponent(apiAdapterService) {
|
|
1588
1592
|
this.apiAdapterService = apiAdapterService;
|
|
@@ -5602,6 +5606,8 @@ var GeneralInformationComponent = /** @class */ (function () {
|
|
|
5602
5606
|
this.isTouchedSMSForm = false;
|
|
5603
5607
|
this.isTouchedEmailForm = false;
|
|
5604
5608
|
this.isShowMore = false;
|
|
5609
|
+
this.showVideoModal = false;
|
|
5610
|
+
this.currentVideoUrl = '';
|
|
5605
5611
|
this.twilioResultCounter = {
|
|
5606
5612
|
segments: 0,
|
|
5607
5613
|
characters: 0,
|
|
@@ -5690,6 +5696,18 @@ var GeneralInformationComponent = /** @class */ (function () {
|
|
|
5690
5696
|
}
|
|
5691
5697
|
this.form.disable();
|
|
5692
5698
|
};
|
|
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
|
+
};
|
|
5693
5711
|
GeneralInformationComponent.prototype.updateGeneralInformationForm = function (form) {
|
|
5694
5712
|
this.generalInformationForm = form;
|
|
5695
5713
|
this.isShowMore = false;
|
|
@@ -5812,8 +5830,8 @@ var GeneralInformationComponent = /** @class */ (function () {
|
|
|
5812
5830
|
GeneralInformationComponent = __decorate([
|
|
5813
5831
|
Component({
|
|
5814
5832
|
selector: 'lib-new-campaign-general-information',
|
|
5815
|
-
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 <img\r\n *ngIf=\"card.header?.url || card.headerURL\"\r\n class=\"card-header-image\"\r\n [src]=\"card.header?.url || card.headerURL\"\r\n alt=\"Carousel Header Image\"\r\n />\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 <!-- Kondisi Dinamis untuk Icon Button -->\r\n <ng-container\r\n [ngSwitch]=\"\r\n btn?.type || btn?.actionType || 'QUICK_REPLY'\r\n \"\r\n >\r\n <!-- ICON: QUICK REPLY (Panah Melengkung) -->\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\r\n <!-- ICON: URL (External Link) -->\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\r\n <!-- ICON: DEFAULT (Fallback ke Quick Reply) -->\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\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",
|
|
5816
|
-
styles: [".campaign-info{display:flex}.campaign-info-child{flex:1}.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:
|
|
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);margin-left:auto}.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:auto;max-width:100%;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__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}.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)}.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}"]
|
|
5817
5835
|
})
|
|
5818
5836
|
], GeneralInformationComponent);
|
|
5819
5837
|
return GeneralInformationComponent;
|
|
@@ -6338,6 +6356,66 @@ var WizardComponent = /** @class */ (function () {
|
|
|
6338
6356
|
return WizardComponent;
|
|
6339
6357
|
}());
|
|
6340
6358
|
|
|
6359
|
+
var VideoPosterPipe = /** @class */ (function () {
|
|
6360
|
+
function VideoPosterPipe() {
|
|
6361
|
+
}
|
|
6362
|
+
VideoPosterPipe.prototype.transform = function (videoUrl) {
|
|
6363
|
+
return new Promise(function (resolve) {
|
|
6364
|
+
if (!videoUrl) {
|
|
6365
|
+
resolve('');
|
|
6366
|
+
return;
|
|
6367
|
+
}
|
|
6368
|
+
var video = document.createElement('video');
|
|
6369
|
+
video.crossOrigin = 'anonymous'; // Wajib biar nggak kena error CORS dari BE
|
|
6370
|
+
video.src = videoUrl;
|
|
6371
|
+
video.muted = true;
|
|
6372
|
+
video.setAttribute('playsinline', 'true');
|
|
6373
|
+
video.preload = 'metadata';
|
|
6374
|
+
video.addEventListener('loadedmetadata', function () {
|
|
6375
|
+
video.currentTime = 0.1; // Geser dikit cari frame yang jelas
|
|
6376
|
+
});
|
|
6377
|
+
video.addEventListener('seeked', function () {
|
|
6378
|
+
try {
|
|
6379
|
+
var canvas = document.createElement('canvas');
|
|
6380
|
+
var context = canvas.getContext('2d');
|
|
6381
|
+
// Tentukan lebar maksimal thumbnail biar memori gak jebol
|
|
6382
|
+
var MAX_WIDTH = 320;
|
|
6383
|
+
var width = video.videoWidth;
|
|
6384
|
+
var height = video.videoHeight;
|
|
6385
|
+
// Kalkulasi rasio ukuran baru
|
|
6386
|
+
if (width > MAX_WIDTH) {
|
|
6387
|
+
height = Math.floor(height * (MAX_WIDTH / width));
|
|
6388
|
+
width = MAX_WIDTH;
|
|
6389
|
+
}
|
|
6390
|
+
canvas.width = width;
|
|
6391
|
+
canvas.height = height;
|
|
6392
|
+
if (context) {
|
|
6393
|
+
// Gambar ulang dengan ukuran yang udah di-scale down
|
|
6394
|
+
context.drawImage(video, 0, 0, width, height);
|
|
6395
|
+
// Convert ke Base64 dengan kualitas 70%
|
|
6396
|
+
resolve(canvas.toDataURL('image/jpeg', 0.7));
|
|
6397
|
+
}
|
|
6398
|
+
else {
|
|
6399
|
+
resolve('');
|
|
6400
|
+
}
|
|
6401
|
+
}
|
|
6402
|
+
catch (e) {
|
|
6403
|
+
resolve('');
|
|
6404
|
+
}
|
|
6405
|
+
});
|
|
6406
|
+
video.addEventListener('error', function () {
|
|
6407
|
+
resolve('');
|
|
6408
|
+
});
|
|
6409
|
+
});
|
|
6410
|
+
};
|
|
6411
|
+
VideoPosterPipe = __decorate([
|
|
6412
|
+
Pipe({
|
|
6413
|
+
name: 'videoPoster',
|
|
6414
|
+
})
|
|
6415
|
+
], VideoPosterPipe);
|
|
6416
|
+
return VideoPosterPipe;
|
|
6417
|
+
}());
|
|
6418
|
+
|
|
6341
6419
|
var CampaignManagementModule = /** @class */ (function () {
|
|
6342
6420
|
function CampaignManagementModule() {
|
|
6343
6421
|
}
|
|
@@ -6357,6 +6435,7 @@ var CampaignManagementModule = /** @class */ (function () {
|
|
|
6357
6435
|
GeneralInformationEmailComponent,
|
|
6358
6436
|
PendingApprovalDialogViewComponent,
|
|
6359
6437
|
FailoverMechanismComponent,
|
|
6438
|
+
VideoPosterPipe,
|
|
6360
6439
|
],
|
|
6361
6440
|
imports: [
|
|
6362
6441
|
CommonModule,
|
|
@@ -6400,7 +6479,7 @@ var CampaignManagementModule = /** @class */ (function () {
|
|
|
6400
6479
|
CampaignIndexModule,
|
|
6401
6480
|
InputNumericModule,
|
|
6402
6481
|
],
|
|
6403
|
-
exports: [CampaignManagementComponent, SummaryComponent],
|
|
6482
|
+
exports: [CampaignManagementComponent, SummaryComponent, VideoPosterPipe],
|
|
6404
6483
|
entryComponents: [PendingApprovalDialogViewComponent],
|
|
6405
6484
|
providers: [DatePipe],
|
|
6406
6485
|
})
|
|
@@ -6454,5 +6533,5 @@ var ConfirmationModule = /** @class */ (function () {
|
|
|
6454
6533
|
* Generated bundle index. Do not edit.
|
|
6455
6534
|
*/
|
|
6456
6535
|
|
|
6457
|
-
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,
|
|
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, ApiAdapterServiceService as ɵn, ViewingListOfCampaignTableComponent as ɵo, FilterInListOfCampaignComponent as ɵp, ApiAdapterServiceService as ɵq, MatSelectInfiniteScrollDirective as ɵr, InputNumericModule as ɵs, InputNumericComponent as ɵt, CustomPaginator as ɵu, ConfirmationComponent as ɵv, ConfirmationModel as ɵw, SharedServicesService as ɵx };
|
|
6458
6537
|
//# sourceMappingURL=adlfe-campaign-management-library.js.map
|