@adlfe/campaign-management-library 2.15.7 → 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 +106 -22
- 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/components/general-information-wa/general-information-wa.component.js +11 -7
- 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/components/general-information-wa/general-information-wa.component.js +11 -7
- 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 +93 -13
- package/fesm2015/adlfe-campaign-management-library.js.map +1 -1
- package/fesm5/adlfe-campaign-management-library.js +96 -13
- 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
|
@@ -992,11 +992,11 @@
|
|
|
992
992
|
}
|
|
993
993
|
// 4. Cek Demo Dev secara spesifik
|
|
994
994
|
else if (origin.includes('demo-dev')) {
|
|
995
|
-
API_CONST = 'https://
|
|
995
|
+
API_CONST = 'https://api-staging.neuapix.com';
|
|
996
996
|
}
|
|
997
997
|
// 5. Default (Localhost atau lainnya)
|
|
998
998
|
else {
|
|
999
|
-
API_CONST = 'https://
|
|
999
|
+
API_CONST = 'https://api-staging.neuapix.com';
|
|
1000
1000
|
}
|
|
1001
1001
|
var environment = {
|
|
1002
1002
|
production: false,
|
|
@@ -1762,6 +1762,10 @@
|
|
|
1762
1762
|
return httpParams;
|
|
1763
1763
|
};
|
|
1764
1764
|
|
|
1765
|
+
var getFormControl = function (form, controlName) {
|
|
1766
|
+
return form ? form.get(controlName) : null;
|
|
1767
|
+
};
|
|
1768
|
+
|
|
1765
1769
|
var FilterInListOfCampaignComponent = /** @class */ (function () {
|
|
1766
1770
|
function FilterInListOfCampaignComponent(apiAdapterService) {
|
|
1767
1771
|
this.apiAdapterService = apiAdapterService;
|
|
@@ -5236,7 +5240,7 @@
|
|
|
5236
5240
|
this.updateTemplate((_l = this.getControl('template')) === null || _l === void 0 ? void 0 : _l.value);
|
|
5237
5241
|
};
|
|
5238
5242
|
GeneralInformationWAComponent.prototype.handleChangeTemplate = function (useExisting) {
|
|
5239
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
5243
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
5240
5244
|
(_a = this.getControl('isDownloadVariableXLS')) === null || _a === void 0 ? void 0 : _a.setValue(false);
|
|
5241
5245
|
this.variables.clear();
|
|
5242
5246
|
this.updateVariableDownloadXLS(false);
|
|
@@ -5246,13 +5250,17 @@
|
|
|
5246
5250
|
(_d = this.getControl('text')) === null || _d === void 0 ? void 0 : _d.clearValidators();
|
|
5247
5251
|
(_e = this.getControl('text')) === null || _e === void 0 ? void 0 : _e.updateValueAndValidity();
|
|
5248
5252
|
(_f = this.getControl('template')) === null || _f === void 0 ? void 0 : _f.updateValueAndValidity();
|
|
5253
|
+
var fromValue = (_g = this.getControl('from')) === null || _g === void 0 ? void 0 : _g.value;
|
|
5254
|
+
if (fromValue) {
|
|
5255
|
+
this.getTemplateOptionService(fromValue);
|
|
5256
|
+
}
|
|
5249
5257
|
}
|
|
5250
5258
|
else {
|
|
5251
|
-
(
|
|
5252
|
-
(
|
|
5253
|
-
(
|
|
5254
|
-
(
|
|
5255
|
-
(
|
|
5259
|
+
(_h = this.getControl('template')) === null || _h === void 0 ? void 0 : _h.reset();
|
|
5260
|
+
(_j = this.getControl('template')) === null || _j === void 0 ? void 0 : _j.clearValidators();
|
|
5261
|
+
(_k = this.getControl('text')) === null || _k === void 0 ? void 0 : _k.setValidators([forms.Validators.required, forms.Validators.max(1024)]);
|
|
5262
|
+
(_l = this.getControl('text')) === null || _l === void 0 ? void 0 : _l.updateValueAndValidity();
|
|
5263
|
+
(_m = this.getControl('template')) === null || _m === void 0 ? void 0 : _m.updateValueAndValidity();
|
|
5256
5264
|
}
|
|
5257
5265
|
};
|
|
5258
5266
|
GeneralInformationWAComponent.prototype.handleChangeFrom = function (value) {
|
|
@@ -5777,6 +5785,8 @@
|
|
|
5777
5785
|
this.isTouchedSMSForm = false;
|
|
5778
5786
|
this.isTouchedEmailForm = false;
|
|
5779
5787
|
this.isShowMore = false;
|
|
5788
|
+
this.showVideoModal = false;
|
|
5789
|
+
this.currentVideoUrl = '';
|
|
5780
5790
|
this.twilioResultCounter = {
|
|
5781
5791
|
segments: 0,
|
|
5782
5792
|
characters: 0,
|
|
@@ -5865,6 +5875,18 @@
|
|
|
5865
5875
|
}
|
|
5866
5876
|
this.form.disable();
|
|
5867
5877
|
};
|
|
5878
|
+
GeneralInformationComponent.prototype.openVideo = function (url) {
|
|
5879
|
+
if (!url)
|
|
5880
|
+
return;
|
|
5881
|
+
this.currentVideoUrl = url;
|
|
5882
|
+
this.showVideoModal = true;
|
|
5883
|
+
document.body.style.overflow = 'hidden';
|
|
5884
|
+
};
|
|
5885
|
+
GeneralInformationComponent.prototype.closeVideo = function () {
|
|
5886
|
+
this.showVideoModal = false;
|
|
5887
|
+
this.currentVideoUrl = '';
|
|
5888
|
+
document.body.style.overflow = '';
|
|
5889
|
+
};
|
|
5868
5890
|
GeneralInformationComponent.prototype.updateGeneralInformationForm = function (form) {
|
|
5869
5891
|
this.generalInformationForm = form;
|
|
5870
5892
|
this.isShowMore = false;
|
|
@@ -5987,8 +6009,8 @@
|
|
|
5987
6009
|
GeneralInformationComponent = __decorate([
|
|
5988
6010
|
core.Component({
|
|
5989
6011
|
selector: 'lib-new-campaign-general-information',
|
|
5990
|
-
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",
|
|
5991
|
-
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:
|
|
6012
|
+
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",
|
|
6013
|
+
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}"]
|
|
5992
6014
|
})
|
|
5993
6015
|
], GeneralInformationComponent);
|
|
5994
6016
|
return GeneralInformationComponent;
|
|
@@ -6513,6 +6535,66 @@
|
|
|
6513
6535
|
return WizardComponent;
|
|
6514
6536
|
}());
|
|
6515
6537
|
|
|
6538
|
+
var VideoPosterPipe = /** @class */ (function () {
|
|
6539
|
+
function VideoPosterPipe() {
|
|
6540
|
+
}
|
|
6541
|
+
VideoPosterPipe.prototype.transform = function (videoUrl) {
|
|
6542
|
+
return new Promise(function (resolve) {
|
|
6543
|
+
if (!videoUrl) {
|
|
6544
|
+
resolve('');
|
|
6545
|
+
return;
|
|
6546
|
+
}
|
|
6547
|
+
var video = document.createElement('video');
|
|
6548
|
+
video.crossOrigin = 'anonymous'; // Wajib biar nggak kena error CORS dari BE
|
|
6549
|
+
video.src = videoUrl;
|
|
6550
|
+
video.muted = true;
|
|
6551
|
+
video.setAttribute('playsinline', 'true');
|
|
6552
|
+
video.preload = 'metadata';
|
|
6553
|
+
video.addEventListener('loadedmetadata', function () {
|
|
6554
|
+
video.currentTime = 0.1; // Geser dikit cari frame yang jelas
|
|
6555
|
+
});
|
|
6556
|
+
video.addEventListener('seeked', function () {
|
|
6557
|
+
try {
|
|
6558
|
+
var canvas = document.createElement('canvas');
|
|
6559
|
+
var context = canvas.getContext('2d');
|
|
6560
|
+
// Tentukan lebar maksimal thumbnail biar memori gak jebol
|
|
6561
|
+
var MAX_WIDTH = 320;
|
|
6562
|
+
var width = video.videoWidth;
|
|
6563
|
+
var height = video.videoHeight;
|
|
6564
|
+
// Kalkulasi rasio ukuran baru
|
|
6565
|
+
if (width > MAX_WIDTH) {
|
|
6566
|
+
height = Math.floor(height * (MAX_WIDTH / width));
|
|
6567
|
+
width = MAX_WIDTH;
|
|
6568
|
+
}
|
|
6569
|
+
canvas.width = width;
|
|
6570
|
+
canvas.height = height;
|
|
6571
|
+
if (context) {
|
|
6572
|
+
// Gambar ulang dengan ukuran yang udah di-scale down
|
|
6573
|
+
context.drawImage(video, 0, 0, width, height);
|
|
6574
|
+
// Convert ke Base64 dengan kualitas 70%
|
|
6575
|
+
resolve(canvas.toDataURL('image/jpeg', 0.7));
|
|
6576
|
+
}
|
|
6577
|
+
else {
|
|
6578
|
+
resolve('');
|
|
6579
|
+
}
|
|
6580
|
+
}
|
|
6581
|
+
catch (e) {
|
|
6582
|
+
resolve('');
|
|
6583
|
+
}
|
|
6584
|
+
});
|
|
6585
|
+
video.addEventListener('error', function () {
|
|
6586
|
+
resolve('');
|
|
6587
|
+
});
|
|
6588
|
+
});
|
|
6589
|
+
};
|
|
6590
|
+
VideoPosterPipe = __decorate([
|
|
6591
|
+
core.Pipe({
|
|
6592
|
+
name: 'videoPoster',
|
|
6593
|
+
})
|
|
6594
|
+
], VideoPosterPipe);
|
|
6595
|
+
return VideoPosterPipe;
|
|
6596
|
+
}());
|
|
6597
|
+
|
|
6516
6598
|
var CampaignManagementModule = /** @class */ (function () {
|
|
6517
6599
|
function CampaignManagementModule() {
|
|
6518
6600
|
}
|
|
@@ -6532,6 +6614,7 @@
|
|
|
6532
6614
|
GeneralInformationEmailComponent,
|
|
6533
6615
|
PendingApprovalDialogViewComponent,
|
|
6534
6616
|
FailoverMechanismComponent,
|
|
6617
|
+
VideoPosterPipe,
|
|
6535
6618
|
],
|
|
6536
6619
|
imports: [
|
|
6537
6620
|
common.CommonModule,
|
|
@@ -6575,7 +6658,7 @@
|
|
|
6575
6658
|
CampaignIndexModule,
|
|
6576
6659
|
InputNumericModule,
|
|
6577
6660
|
],
|
|
6578
|
-
exports: [CampaignManagementComponent, SummaryComponent],
|
|
6661
|
+
exports: [CampaignManagementComponent, SummaryComponent, VideoPosterPipe],
|
|
6579
6662
|
entryComponents: [PendingApprovalDialogViewComponent],
|
|
6580
6663
|
providers: [common.DatePipe],
|
|
6581
6664
|
})
|
|
@@ -6647,17 +6730,18 @@
|
|
|
6647
6730
|
exports.ɵj = GeneralInformationEmailComponent;
|
|
6648
6731
|
exports.ɵk = PendingApprovalDialogViewComponent;
|
|
6649
6732
|
exports.ɵl = FailoverMechanismComponent;
|
|
6650
|
-
exports.ɵm =
|
|
6651
|
-
exports.ɵn =
|
|
6652
|
-
exports.ɵo =
|
|
6653
|
-
exports.ɵp =
|
|
6654
|
-
exports.ɵq =
|
|
6655
|
-
exports.ɵr =
|
|
6656
|
-
exports.ɵs =
|
|
6657
|
-
exports.ɵt =
|
|
6658
|
-
exports.ɵu =
|
|
6659
|
-
exports.ɵv =
|
|
6660
|
-
exports.ɵw =
|
|
6733
|
+
exports.ɵm = VideoPosterPipe;
|
|
6734
|
+
exports.ɵn = ApiAdapterServiceService;
|
|
6735
|
+
exports.ɵo = ViewingListOfCampaignTableComponent;
|
|
6736
|
+
exports.ɵp = FilterInListOfCampaignComponent;
|
|
6737
|
+
exports.ɵq = ApiAdapterServiceService;
|
|
6738
|
+
exports.ɵr = MatSelectInfiniteScrollDirective;
|
|
6739
|
+
exports.ɵs = InputNumericModule;
|
|
6740
|
+
exports.ɵt = InputNumericComponent;
|
|
6741
|
+
exports.ɵu = CustomPaginator;
|
|
6742
|
+
exports.ɵv = ConfirmationComponent;
|
|
6743
|
+
exports.ɵw = ConfirmationModel;
|
|
6744
|
+
exports.ɵx = SharedServicesService;
|
|
6661
6745
|
|
|
6662
6746
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
6663
6747
|
|