@adlfe/campaign-management-library 2.11.1 → 2.11.4

package/fesm5/adlfe-campaign-management-library.js

@@ -1,5 +1,5 @@
 import { __decorate, __extends, __assign, __spread, __param, __values } from 'tslib';
-import { Component, EventEmitter, Output, Input, NgModule, NgZone, Directive, ɵɵdefineInjectable, ɵɵinject, Injectable, Inject, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Output, Input, NgModule, ContentChild, forwardRef, NgZone, Directive, ɵɵdefineInjectable, ɵɵinject, Injectable, Inject, ViewChild } from '@angular/core';
 import { MapsAPILoader, AgmCoreModule } from '@agm/core';
 import { CommonModule, DatePipe } from '@angular/common';
 import { HttpHeaders, HttpClient, HttpParams, HttpClientModule } from '@angular/common/http';
@@ -8,7 +8,7 @@ import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginato
 import { NgxEchartsModule } from 'ngx-echarts';
 import { ToastrService, ToastrModule } from 'ngx-toastr';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import { FormControl, FormsModule, ReactiveFormsModule, FormGroup, Validators, FormArray } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule, ControlContainer, NG_VALUE_ACCESSOR, FormGroup, Validators as Validators$1, FormArray } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
@@ -164,6 +164,142 @@ var CampaignManagementComponent = /** @class */ (function () {
     return CampaignManagementComponent;
 }());
 
+var InputNumericComponent = /** @class */ (function () {
+    function InputNumericComponent(controlContainer) {
+        this.controlContainer = controlContainer;
+        this.allowDecimal = true;
+    }
+    InputNumericComponent_1 = InputNumericComponent;
+    InputNumericComponent.prototype.handleInput = function (event) {
+        var inputElement = event.target;
+        var value = inputElement.value || '';
+        var numeric = this.allowDecimal ? value.replace(/[^0-9.]/g, '') : value.replace(/\D/g, '');
+        if (this.allowDecimal) {
+            var parts = numeric.split('.');
+            if (parts.length > 2) {
+                numeric = parts[0] + '.' + parts.slice(1).join('');
+            }
+        }
+        if (this.disallowLeadingZero &&
+            numeric.startsWith('0') &&
+            numeric.length > 1 &&
+            numeric[1] !== '.') {
+            numeric = numeric.replace(/^0+/, '');
+        }
+        var finalValue = numeric;
+        if (this.trimLeadingZeros && numeric !== '' && !numeric.includes('.')) {
+            finalValue = +numeric;
+        }
+        this.formControl.patchValue(finalValue, { emitEvent: false });
+    };
+    InputNumericComponent.prototype.ngOnInit = function () {
+        this.setBaseStateInitialization();
+    };
+    InputNumericComponent.prototype.setBaseStateInitialization = function () {
+        if (!this.formControlName)
+            return;
+        var formGroup = this.controlContainer.control;
+        this.formControl = formGroup.get(this.formControlName);
+    };
+    Object.defineProperty(InputNumericComponent.prototype, "isValid", {
+        get: function () {
+            var _a, _b;
+            return !!(((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.touched) && ((_b = this.formControl) === null || _b === void 0 ? void 0 : _b.valid));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(InputNumericComponent.prototype, "isInvalid", {
+        get: function () {
+            var _a, _b;
+            return !!(((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.touched) && ((_b = this.formControl) === null || _b === void 0 ? void 0 : _b.invalid));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(InputNumericComponent.prototype, "errors", {
+        get: function () {
+            return this.formControl.errors;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    InputNumericComponent.prototype.writeValue = function (value) {
+        this._value = value;
+    };
+    InputNumericComponent.prototype.registerOnChange = function (fn) {
+        this._onBaseChange = fn;
+    };
+    InputNumericComponent.prototype.registerOnTouched = function (fn) {
+        this._onBaseTouched = fn;
+    };
+    InputNumericComponent.prototype.setDisabledState = function (isDisabled) {
+        this._isDisabled = isDisabled;
+    };
+    var InputNumericComponent_1;
+    InputNumericComponent.ctorParameters = function () { return [
+        { type: ControlContainer }
+    ]; };
+    __decorate([
+        Input()
+    ], InputNumericComponent.prototype, "formControlName", void 0);
+    __decorate([
+        Input()
+    ], InputNumericComponent.prototype, "formControl", void 0);
+    __decorate([
+        Input()
+    ], InputNumericComponent.prototype, "trimLeadingZeros", void 0);
+    __decorate([
+        Input()
+    ], InputNumericComponent.prototype, "disallowLeadingZero", void 0);
+    __decorate([
+        Input()
+    ], InputNumericComponent.prototype, "allowDecimal", void 0);
+    __decorate([
+        Input()
+    ], InputNumericComponent.prototype, "identifier", void 0);
+    __decorate([
+        Input()
+    ], InputNumericComponent.prototype, "placeholder", void 0);
+    __decorate([
+        Input()
+    ], InputNumericComponent.prototype, "label", void 0);
+    __decorate([
+        Input()
+    ], InputNumericComponent.prototype, "maxLength", void 0);
+    __decorate([
+        ContentChild('suffix')
+    ], InputNumericComponent.prototype, "suffixTmpl", void 0);
+    InputNumericComponent = InputNumericComponent_1 = __decorate([
+        Component({
+            selector: 'app-input[type=numeric]',
+            template: "<div class=\"grid\">\r\n    <mat-form-field class=\"w-full\" appearance=\"outline\" floatLabel=\"always\">\r\n        <mat-label *ngIf=\"label\">\r\n            <span>{{ label }}</span>\r\n        </mat-label>\r\n        <input\r\n            type=\"text\"\r\n            [id]=\"identifier\"\r\n            [attr.data-testid]=\"identifier\"\r\n            matInput\r\n            [placeholder]=\"placeholder\"\r\n            [formControl]=\"formControl\"\r\n            (input)=\"handleInput($event)\"\r\n            [attr.maxlength]=\"maxLength\"\r\n        />\r\n        <span *ngIf=\"suffixTmpl\" matSuffix>\r\n            <ng-container *ngTemplateOutlet=\"suffixTmpl\"></ng-container>\r\n        </span>\r\n    </mat-form-field>\r\n    <mat-error align=\"end\" class=\"leading-zero\" *ngIf=\"isInvalid\">\r\n        <small class=\"text-xs\">\r\n            {{ errors?.message }}\r\n        </small>\r\n    </mat-error>\r\n</div>\r\n",
+            providers: [
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(function () { return InputNumericComponent_1; }),
+                    multi: true,
+                },
+            ],
+            styles: [":host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-prefix,:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-suffix{top:0}"]
+        })
+    ], InputNumericComponent);
+    return InputNumericComponent;
+}());
+
+var InputNumericModule = /** @class */ (function () {
+    function InputNumericModule() {
+    }
+    InputNumericModule = __decorate([
+        NgModule({
+            imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule, CommonModule],
+            declarations: [InputNumericComponent],
+            exports: [InputNumericComponent],
+        })
+    ], InputNumericModule);
+    return InputNumericModule;
+}());
+
 var MatSelectInfiniteScrollDirective = /** @class */ (function () {
     function MatSelectInfiniteScrollDirective(matSelect, ngZone) {
         this.matSelect = matSelect;
@@ -671,11 +807,11 @@ else if (origin.includes('dashboard-qa')) {
 }
 // 4. Cek Demo Dev secara spesifik
 else if (origin.includes('demo-dev')) {
-    API_CONST = 'https://api-staging.neuapix.com';
+    API_CONST = 'https://apibsp-dev.adlsandbox.net';
 }
 // 5. Default (Localhost atau lainnya)
 else {
-    API_CONST = 'https://api-staging.neuapix.com';
+    API_CONST = 'https://apibsp-dev.adlsandbox.net';
 }
 var environment = {
     production: false,
@@ -1090,6 +1226,10 @@ var MsgTypeWAOptionConst = [
         name: 'Template',
         code: 'TEMPLATE',
     },
+    {
+        name: 'Text - Utility',
+        code: 'utility',
+    },
 ];
 var MsgTypeEmailOptionConst = [
     {
@@ -1171,11 +1311,7 @@ var CampaignPerformanceChartConfig = {
         { type: 'bar', color: '#35CDF3' },
     ],
 };
-var ɵ0 = [
-    'Delivery Rate of Campaigns',
-    'Total Number of Campaigns',
-    'Cost Distribution',
-], ɵ1 = [], ɵ2 = [], ɵ3 = [], ɵ4 = [];
+var ɵ0 = ['Delivery Rate of Campaigns', 'Total Number of Campaigns', 'Cost Distribution'], ɵ1 = [], ɵ2 = [], ɵ3 = [], ɵ4 = [];
 var ConversationInsightsChartConfig = {
     tooltip: {
         trigger: 'axis',
@@ -1287,7 +1423,10 @@ var GeneralInformationMessageValidationConst = {
 var GeneralInformationWAMessageValidationConst = {
     channel: [{ type: 'required', message: 'Message Type is required' }],
     from: [{ type: 'required', message: 'From is required' }],
-    text: [{ type: 'required', message: 'Text is required' }],
+    text: [
+        { type: 'required', message: 'Text is required' },
+        { type: 'maxlength', message: 'Maximum character 1024' },
+    ],
     media: [{ type: 'required', message: 'Media Type is required' }],
     fileName: [{ type: 'required', message: 'File is required' }],
     template: [{ type: 'required', message: 'Template is required' }],
@@ -1588,7 +1727,7 @@ var FilterInListOfCampaignComponent = /** @class */ (function () {
         Component({
             selector: 'lib-filter-in-list-of-campaign',
             template: "<p class=\"font-16px font-bold\">Filter</p>\r\n\r\n<form [formGroup]=\"form\" class=\"contact-filter\">\r\n    <div class=\"row\">\r\n        <div class=\"col-md-12 col-12\">\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-70\">\r\n                    <mat-label>Business Name</mat-label>\r\n                    <mat-select placeholder=\"Select Business Name\" formControlName=\"businessName\">\r\n                        <div class=\"select-search\">\r\n                            <lib-search\r\n                                [placeholder]=\"'Search'\"\r\n                                (searchRes)=\"businessNameSearch($event)\"\r\n                            ></lib-search>\r\n                        </div>\r\n\r\n                        <mat-option value=\"\"> --- select none --- </mat-option>\r\n                        <mat-option\r\n                            *ngFor=\"let option of filteredBusinessNameOption\"\r\n                            [value]=\"option.id\"\r\n                        >\r\n                            {{ option.name }}\r\n                        </mat-option>\r\n                        <mat-option *ngIf=\"!filteredBusinessNameOption.length\" disabled>\r\n                            No data found\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"col-md-12 col-12\">\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-70\">\r\n                    <mat-label>Channel</mat-label>\r\n\r\n                    <mat-select placeholder=\"Select the Channel\" formControlName=\"medium\">\r\n                        <mat-option value=\"\"> --- select none --- </mat-option>\r\n                        <mat-option\r\n                            *ngFor=\"let option of filteredChannelOption\"\r\n                            [value]=\"option.value\"\r\n                            (click)=\"getTemplateOptionService()\"\r\n                        >\r\n                            {{ option.label }}\r\n                        </mat-option>\r\n                        <mat-option *ngIf=\"!filteredChannelOption.length\" disabled>\r\n                            No data found\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"col-md-12 col-12\">\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\">Template Name</mat-label>\r\n\r\n                    <mat-select\r\n                        matSelectInfiniteScroll\r\n                        formControlName=\"templateName\"\r\n                        placeholder=\"Select template\"\r\n                        [complete]=\"isHaveNextTemplateOption === false\"\r\n                        [compareWith]=\"templateSelectedDisplay\"\r\n                        (infiniteScroll)=\"getNextTemplateBatch()\"\r\n                    >\r\n                        <div style=\"margin: 20px\">\r\n                            <lib-search\r\n                                [placeholder]=\"'Search'\"\r\n                                [currentValue]=\"form?.get('templateName').value?.name\"\r\n                                (searchRes)=\"templateSearch($event)\"\r\n                            ></lib-search>\r\n                        </div>\r\n\r\n                        <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n                            {{ option.name }}\r\n                        </mat-option>\r\n                        <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"col-md-12 col-12\">\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-70\">\r\n                    <mat-label>Status</mat-label>\r\n\r\n                    <mat-select placeholder=\"Select the Status\" formControlName=\"status\">\r\n                        <div class=\"select-search\">\r\n                            <lib-search\r\n                                [placeholder]=\"'Search'\"\r\n                                (searchRes)=\"statusSearch($event)\"\r\n                            ></lib-search>\r\n                        </div>\r\n\r\n                        <mat-option value=\"\"> --- select none --- </mat-option>\r\n                        <mat-option\r\n                            *ngFor=\"let option of filteredStatusOption\"\r\n                            [value]=\"option.value\"\r\n                        >\r\n                            {{ option.label }}\r\n                        </mat-option>\r\n                        <mat-option *ngIf=\"!filteredStatusOption.length\" disabled>\r\n                            No data found\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"col-md-12 col-12\">\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                    <mat-label> Start Date </mat-label>\r\n                    <input\r\n                        matInput\r\n                        [matDatepicker]=\"startDatePicker\"\r\n                        formControlName=\"startDate\"\r\n                        class=\"mat-datepicker-input\"\r\n                        (dateChange)=\"validateBackDate()\"\r\n                    />\r\n\r\n                    <mat-datepicker-toggle matSuffix [for]=\"startDatePicker\">\r\n                    </mat-datepicker-toggle>\r\n                    <mat-icon\r\n                        *ngIf=\"form.get('startDate').value\"\r\n                        matDatepickerToggleIcon\r\n                        (click)=\"clearDate()\"\r\n                        >clear</mat-icon\r\n                    >\r\n                    <mat-datepicker #startDatePicker></mat-datepicker>\r\n                </mat-form-field>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"col-md-12 col-12\">\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                    <mat-label> End Date </mat-label>\r\n                    <input\r\n                        matInput\r\n                        [min]=\"form.get('startDate').value\"\r\n                        [matDatepicker]=\"endDatePicker\"\r\n                        formControlName=\"endDate\"\r\n                        class=\"mat-datepicker-input\"\r\n                        (dateChange)=\"validateBackDate()\"\r\n                    />\r\n\r\n                    <mat-datepicker-toggle matSuffix [for]=\"endDatePicker\"> </mat-datepicker-toggle>\r\n                    <mat-icon\r\n                        *ngIf=\"form.get('endDate').value\"\r\n                        matDatepickerToggleIcon\r\n                        (click)=\"clearDate()\"\r\n                        >clear</mat-icon\r\n                    >\r\n                    <mat-datepicker #endDatePicker></mat-datepicker>\r\n                </mat-form-field>\r\n            </div>\r\n        </div>\r\n\r\n        <div style=\"display: flex; flex: 1; width: 100%\">\r\n            <button\r\n                mat-stroked-button\r\n                color=\"primary-telin\"\r\n                class=\"telin-font-color w-48\"\r\n                style=\"width: 100%; margin-bottom: 10px\"\r\n                (click)=\"onReset()\"\r\n            >\r\n                Reset\r\n            </button>\r\n        </div>\r\n        <div class=\"d-flex justify-content-between\">\r\n            <button mat-stroked-button color=\"secondary-telin\" class=\"w-48\" (click)=\"onCancel()\">\r\n                Cancel\r\n            </button>\r\n\r\n            <button mat-flat-button color=\"primary-telin-blue2\" class=\"w-48\" (click)=\"onApply()\">\r\n                Apply\r\n            </button>\r\n        </div>\r\n    </div>\r\n</form>\r\n",
-            styles: [".contact-filter .platform{display:grid;grid-gap:5px;grid-template-columns:auto 1fr auto}.button-row{margin:8px 8px 8px 0}.mat-datepicker-input{width:85%}.mat-icon{position:relative;float:right;top:-7px;cursor:pointer;color:rgba(0,0,0,.54)}.select-search{margin:20px}"]
+            styles: [".contact-filter .platform{display:-ms-grid;display:grid;grid-gap:5px;-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto}.button-row{margin:8px 8px 8px 0}.mat-datepicker-input{width:85%}.mat-icon{position:relative;float:right;top:-7px;cursor:pointer;color:rgba(0,0,0,.54)}.select-search{margin:20px}"]
         }),
         Injectable({
             providedIn: 'root',
@@ -1682,7 +1821,7 @@ var PendingApprovalDialogViewComponent = /** @class */ (function () {
         var subs = this.apiAdapterService
             .executeApiRequest([], "/campaign/" + ((_d = (_c = this.getCampaignStorage) === null || _c === void 0 ? void 0 : _c.generalInformation) === null || _d === void 0 ? void 0 : _d.id), 'GET')
             .subscribe(function (resp) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67;
             if (!resp)
                 return;
             var generalInformation = {
@@ -1690,61 +1829,65 @@ var PendingApprovalDialogViewComponent = /** @class */ (function () {
                 medium: (_b = resp.data) === null || _b === void 0 ? void 0 : _b.platform,
                 channel: ['image', 'video', 'document'].includes((_c = resp.data) === null || _c === void 0 ? void 0 : _c.type)
                     ? 'MEDIA'
-                    : (_e = (_d = resp.data) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.toUpperCase(),
-                media: (_g = (_f = resp.data) === null || _f === void 0 ? void 0 : _f.type) === null || _g === void 0 ? void 0 : _g.toUpperCase(),
+                    : ((_d = resp.data) === null || _d === void 0 ? void 0 : _d.isDirectSend) ? 'utility'
+                        : (_f = (_e = resp.data) === null || _e === void 0 ? void 0 : _e.type) === null || _f === void 0 ? void 0 : _f.toUpperCase(),
+                media: (_h = (_g = resp.data) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.toUpperCase(),
+                isPrevTemplate: (_k = (_j = resp) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.isPrevTemplate,
+                templateName: (_m = (_l = resp) === null || _l === void 0 ? void 0 : _l.data) === null || _m === void 0 ? void 0 : _m.templateName,
+                ttl: (_p = (_o = resp) === null || _o === void 0 ? void 0 : _o.data) === null || _p === void 0 ? void 0 : _p.ttlSeconds,
                 from: {
-                    id: (_h = resp.data) === null || _h === void 0 ? void 0 : _h.accountId,
-                    name: (_j = resp.data) === null || _j === void 0 ? void 0 : _j.accountName,
-                    platform: (_k = resp.data) === null || _k === void 0 ? void 0 : _k.platform,
-                    clientId: (_l = resp.data) === null || _l === void 0 ? void 0 : _l.clientId,
-                    clientName: (_m = resp.data) === null || _m === void 0 ? void 0 : _m.clientName,
-                    accountNo: (_o = resp.data) === null || _o === void 0 ? void 0 : _o.accountNo,
-                    wabaId: (_q = (_p = resp.data) === null || _p === void 0 ? void 0 : _p.wabaId, (_q !== null && _q !== void 0 ? _q : '')),
+                    id: (_q = resp.data) === null || _q === void 0 ? void 0 : _q.accountId,
+                    name: (_r = resp.data) === null || _r === void 0 ? void 0 : _r.accountName,
+                    platform: (_s = resp.data) === null || _s === void 0 ? void 0 : _s.platform,
+                    clientId: (_t = resp.data) === null || _t === void 0 ? void 0 : _t.clientId,
+                    clientName: (_u = resp.data) === null || _u === void 0 ? void 0 : _u.clientName,
+                    accountNo: (_v = resp.data) === null || _v === void 0 ? void 0 : _v.accountNo,
+                    wabaId: (_x = (_w = resp.data) === null || _w === void 0 ? void 0 : _w.wabaId, (_x !== null && _x !== void 0 ? _x : '')),
                 },
-                text: (_s = (_r = resp.data) === null || _r === void 0 ? void 0 : _r.details) === null || _s === void 0 ? void 0 : _s.text,
-                targetURL: (_4 = (_0 = (_w = (_v = (_u = (_t = resp.data) === null || _t === void 0 ? void 0 : _t.details) === null || _u === void 0 ? void 0 : _u.image) === null || _v === void 0 ? void 0 : _v.url, (_w !== null && _w !== void 0 ? _w : (_z = (_y = (_x = resp.data) === null || _x === void 0 ? void 0 : _x.details) === null || _y === void 0 ? void 0 : _y.document) === null || _z === void 0 ? void 0 : _z.url)), (_0 !== null && _0 !== void 0 ? _0 : (_3 = (_2 = (_1 = resp.data) === null || _1 === void 0 ? void 0 : _1.details) === null || _2 === void 0 ? void 0 : _2.video) === null || _3 === void 0 ? void 0 : _3.url)), (_4 !== null && _4 !== void 0 ? _4 : (_7 = (_6 = (_5 = resp.data) === null || _5 === void 0 ? void 0 : _5.details) === null || _6 === void 0 ? void 0 : _6.template) === null || _7 === void 0 ? void 0 : _7.headerURL)),
-                paramHeader: (_10 = (_9 = (_8 = resp.data) === null || _8 === void 0 ? void 0 : _8.details) === null || _9 === void 0 ? void 0 : _9.template) === null || _10 === void 0 ? void 0 : _10.header,
-                paramBody: (_13 = (_12 = (_11 = resp.data) === null || _11 === void 0 ? void 0 : _11.details) === null || _12 === void 0 ? void 0 : _12.template) === null || _13 === void 0 ? void 0 : _13.data,
-                paramButton: (_16 = (_15 = (_14 = resp.data) === null || _14 === void 0 ? void 0 : _14.details) === null || _15 === void 0 ? void 0 : _15.template) === null || _16 === void 0 ? void 0 : _16.button,
-                otpValue: (_21 = __spread((_20 = (_19 = (_18 = (_17 = resp.data) === null || _17 === void 0 ? void 0 : _17.details) === null || _18 === void 0 ? void 0 : _18.template) === null || _19 === void 0 ? void 0 : _19.data, (_20 !== null && _20 !== void 0 ? _20 : [])))) === null || _21 === void 0 ? void 0 : _21.pop(),
+                text: (_z = (_y = resp.data) === null || _y === void 0 ? void 0 : _y.details) === null || _z === void 0 ? void 0 : _z.text,
+                targetURL: (_11 = (_7 = (_3 = (_2 = (_1 = (_0 = resp.data) === null || _0 === void 0 ? void 0 : _0.details) === null || _1 === void 0 ? void 0 : _1.image) === null || _2 === void 0 ? void 0 : _2.url, (_3 !== null && _3 !== void 0 ? _3 : (_6 = (_5 = (_4 = resp.data) === null || _4 === void 0 ? void 0 : _4.details) === null || _5 === void 0 ? void 0 : _5.document) === null || _6 === void 0 ? void 0 : _6.url)), (_7 !== null && _7 !== void 0 ? _7 : (_10 = (_9 = (_8 = resp.data) === null || _8 === void 0 ? void 0 : _8.details) === null || _9 === void 0 ? void 0 : _9.video) === null || _10 === void 0 ? void 0 : _10.url)), (_11 !== null && _11 !== void 0 ? _11 : (_14 = (_13 = (_12 = resp.data) === null || _12 === void 0 ? void 0 : _12.details) === null || _13 === void 0 ? void 0 : _13.template) === null || _14 === void 0 ? void 0 : _14.headerURL)),
+                paramHeader: (_17 = (_16 = (_15 = resp.data) === null || _15 === void 0 ? void 0 : _15.details) === null || _16 === void 0 ? void 0 : _16.template) === null || _17 === void 0 ? void 0 : _17.header,
+                paramBody: (_20 = (_19 = (_18 = resp.data) === null || _18 === void 0 ? void 0 : _18.details) === null || _19 === void 0 ? void 0 : _19.template) === null || _20 === void 0 ? void 0 : _20.data,
+                paramButton: (_23 = (_22 = (_21 = resp.data) === null || _21 === void 0 ? void 0 : _21.details) === null || _22 === void 0 ? void 0 : _22.template) === null || _23 === void 0 ? void 0 : _23.button,
+                otpValue: (_28 = __spread((_27 = (_26 = (_25 = (_24 = resp.data) === null || _24 === void 0 ? void 0 : _24.details) === null || _25 === void 0 ? void 0 : _25.template) === null || _26 === void 0 ? void 0 : _26.data, (_27 !== null && _27 !== void 0 ? _27 : [])))) === null || _28 === void 0 ? void 0 : _28.pop(),
                 template: {
-                    ID: (_24 = (_23 = (_22 = resp.data) === null || _22 === void 0 ? void 0 : _22.details) === null || _23 === void 0 ? void 0 : _23.template) === null || _24 === void 0 ? void 0 : _24.id,
-                    name: (_27 = (_26 = (_25 = resp.data) === null || _25 === void 0 ? void 0 : _25.details) === null || _26 === void 0 ? void 0 : _26.template) === null || _27 === void 0 ? void 0 : _27.name,
-                    lang: (_30 = (_29 = (_28 = resp.data) === null || _28 === void 0 ? void 0 : _28.details) === null || _29 === void 0 ? void 0 : _29.template) === null || _30 === void 0 ? void 0 : _30.lang,
-                    platform: (_31 = resp.data) === null || _31 === void 0 ? void 0 : _31.platform,
-                    headerURL: (_34 = (_33 = (_32 = resp.data) === null || _32 === void 0 ? void 0 : _32.details) === null || _33 === void 0 ? void 0 : _33.template) === null || _34 === void 0 ? void 0 : _34.headerURL,
+                    ID: (_31 = (_30 = (_29 = resp.data) === null || _29 === void 0 ? void 0 : _29.details) === null || _30 === void 0 ? void 0 : _30.template) === null || _31 === void 0 ? void 0 : _31.id,
+                    name: (_34 = (_33 = (_32 = resp.data) === null || _32 === void 0 ? void 0 : _32.details) === null || _33 === void 0 ? void 0 : _33.template) === null || _34 === void 0 ? void 0 : _34.name,
+                    lang: (_37 = (_36 = (_35 = resp.data) === null || _35 === void 0 ? void 0 : _35.details) === null || _36 === void 0 ? void 0 : _36.template) === null || _37 === void 0 ? void 0 : _37.lang,
+                    platform: (_38 = resp.data) === null || _38 === void 0 ? void 0 : _38.platform,
+                    headerURL: (_41 = (_40 = (_39 = resp.data) === null || _39 === void 0 ? void 0 : _39.details) === null || _40 === void 0 ? void 0 : _40.template) === null || _41 === void 0 ? void 0 : _41.headerURL,
                     header: {
-                        examples: (_37 = (_36 = (_35 = resp.data) === null || _35 === void 0 ? void 0 : _35.details) === null || _36 === void 0 ? void 0 : _36.template) === null || _37 === void 0 ? void 0 : _37.header,
+                        examples: (_44 = (_43 = (_42 = resp.data) === null || _42 === void 0 ? void 0 : _42.details) === null || _43 === void 0 ? void 0 : _43.template) === null || _44 === void 0 ? void 0 : _44.header,
                     },
                     body: {
-                        examples: (_40 = (_39 = (_38 = resp.data) === null || _38 === void 0 ? void 0 : _38.details) === null || _39 === void 0 ? void 0 : _39.template) === null || _40 === void 0 ? void 0 : _40.data,
+                        examples: (_47 = (_46 = (_45 = resp.data) === null || _45 === void 0 ? void 0 : _45.details) === null || _46 === void 0 ? void 0 : _46.template) === null || _47 === void 0 ? void 0 : _47.data,
                     },
-                    buttons: (_43 = (_42 = (_41 = resp.data) === null || _41 === void 0 ? void 0 : _41.details) === null || _42 === void 0 ? void 0 : _42.template) === null || _43 === void 0 ? void 0 : _43.button,
-                    ClientId: (_44 = resp.data) === null || _44 === void 0 ? void 0 : _44.clientId,
-                    ClientName: (_45 = resp.data) === null || _45 === void 0 ? void 0 : _45.clientName,
+                    buttons: (_50 = (_49 = (_48 = resp.data) === null || _48 === void 0 ? void 0 : _48.details) === null || _49 === void 0 ? void 0 : _49.template) === null || _50 === void 0 ? void 0 : _50.button,
+                    ClientId: (_51 = resp.data) === null || _51 === void 0 ? void 0 : _51.clientId,
+                    ClientName: (_52 = resp.data) === null || _52 === void 0 ? void 0 : _52.clientName,
                 },
-                isUpload: ((_46 = resp.data) === null || _46 === void 0 ? void 0 : _46.fileId) !== '',
-                fileId: (_47 = resp.data) === null || _47 === void 0 ? void 0 : _47.fileId,
+                isUpload: ((_53 = resp.data) === null || _53 === void 0 ? void 0 : _53.fileId) !== '',
+                fileId: (_54 = resp.data) === null || _54 === void 0 ? void 0 : _54.fileId,
             };
             localStorage.setItem('telin.campaign', JSON.stringify(__assign(__assign({}, _this.getCampaignStorage), {
                 generalInformation: {
-                    id: (_48 = resp.data) === null || _48 === void 0 ? void 0 : _48.id,
+                    id: (_55 = resp.data) === null || _55 === void 0 ? void 0 : _55.id,
                     form: generalInformation,
                 },
-                failover: (_49 = resp.data) === null || _49 === void 0 ? void 0 : _49.failover,
-                targetAudience: (_50 = resp.data) === null || _50 === void 0 ? void 0 : _50.targets,
+                failover: (_56 = resp.data) === null || _56 === void 0 ? void 0 : _56.failover,
+                targetAudience: (_57 = resp.data) === null || _57 === void 0 ? void 0 : _57.targets,
                 targetAudienceFile: {
-                    name: (_51 = resp.data) === null || _51 === void 0 ? void 0 : _51.fileName,
-                    targetURL: (_52 = resp.data) === null || _52 === void 0 ? void 0 : _52.targetURL,
+                    name: (_58 = resp.data) === null || _58 === void 0 ? void 0 : _58.fileName,
+                    targetURL: (_59 = resp.data) === null || _59 === void 0 ? void 0 : _59.targetURL,
                 },
                 scheduler: {
-                    schedulerType: ((_53 = resp.data) === null || _53 === void 0 ? void 0 : _53.scheduleType) === 'MULTI'
+                    schedulerType: ((_60 = resp.data) === null || _60 === void 0 ? void 0 : _60.scheduleType) === 'MULTI'
                         ? 'ONE_TIME'
-                        : (_54 = resp.data) === null || _54 === void 0 ? void 0 : _54.scheduleType,
-                    startDate: (_56 = (_55 = resp.data) === null || _55 === void 0 ? void 0 : _55.startTime) === null || _56 === void 0 ? void 0 : _56.split(' ')[0],
-                    startTime: (_58 = (_57 = resp.data) === null || _57 === void 0 ? void 0 : _57.startTime) === null || _58 === void 0 ? void 0 : _58.split(' ')[1],
-                    isRepeat: ((_59 = resp.data) === null || _59 === void 0 ? void 0 : _59.scheduleType) === 'MULTI',
-                    delivery: (_60 = resp.data) === null || _60 === void 0 ? void 0 : _60.repeat,
+                        : (_61 = resp.data) === null || _61 === void 0 ? void 0 : _61.scheduleType,
+                    startDate: (_63 = (_62 = resp.data) === null || _62 === void 0 ? void 0 : _62.startTime) === null || _63 === void 0 ? void 0 : _63.split(' ')[0],
+                    startTime: (_65 = (_64 = resp.data) === null || _64 === void 0 ? void 0 : _64.startTime) === null || _65 === void 0 ? void 0 : _65.split(' ')[1],
+                    isRepeat: ((_66 = resp.data) === null || _66 === void 0 ? void 0 : _66.scheduleType) === 'MULTI',
+                    delivery: (_67 = resp.data) === null || _67 === void 0 ? void 0 : _67.repeat,
                 },
             })));
             _this.isLoading = false;
@@ -2357,7 +2500,7 @@ var GeneralInformationWAReqModel = /** @class */ (function () {
     function GeneralInformationWAReqModel() {
     }
     GeneralInformationWAReqModel.prototype.clone = function (source) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         /* Source Mapping */
         if (((_a = source) === null || _a === void 0 ? void 0 : _a.media) === 'IMAGE' ||
             ((_b = source) === null || _b === void 0 ? void 0 : _b.media) === 'VIDEO' ||
@@ -2421,6 +2564,16 @@ var GeneralInformationWAReqModel = /** @class */ (function () {
             if (source.template.ID)
                 this.template.id = source.template.ID;
         }
+        if (this.type === 'utility') {
+            this.type = 'template';
+            this.category = 'utility';
+            this.template = ((_l = source) === null || _l === void 0 ? void 0 : _l.isUseExistingTemplate) ? (_m = source) === null || _m === void 0 ? void 0 : _m.template : { name: '', lang: 'id', header: null, button: null, data: [] };
+            this.isNeedSave = source.isNeedSave;
+            this.ttlSeconds = source.ttl;
+            if ((_o = source) === null || _o === void 0 ? void 0 : _o.isUseExistingTemplate) {
+                this.text = (_r = (_q = (_p = source) === null || _p === void 0 ? void 0 : _p.template) === null || _q === void 0 ? void 0 : _q.body) === null || _r === void 0 ? void 0 : _r.text;
+            }
+        }
         return this;
     };
     GeneralInformationWAReqModel.prototype.convert = function () {
@@ -2546,7 +2699,7 @@ var NewCampaignComponent = /** @class */ (function () {
         var subs = this.apiAdapterService
             .executeApiRequest([], "/campaign/" + this.campaignID, 'GET')
             .subscribe(function (resp) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68;
             if (!resp)
                 return;
             var generalInformation = {
@@ -2554,64 +2707,68 @@ var NewCampaignComponent = /** @class */ (function () {
                 medium: (_b = resp.data) === null || _b === void 0 ? void 0 : _b.platform,
                 channel: ['image', 'video', 'document'].includes((_c = resp.data) === null || _c === void 0 ? void 0 : _c.type)
                     ? 'MEDIA'
-                    : (_e = (_d = resp.data) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.toUpperCase(),
-                media: (_g = (_f = resp.data) === null || _f === void 0 ? void 0 : _f.type) === null || _g === void 0 ? void 0 : _g.toUpperCase(),
+                    : ((_d = resp.data) === null || _d === void 0 ? void 0 : _d.isDirectSend) ? 'utility'
+                        : (_f = (_e = resp.data) === null || _e === void 0 ? void 0 : _e.type) === null || _f === void 0 ? void 0 : _f.toUpperCase(),
+                media: (_h = (_g = resp.data) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.toUpperCase(),
+                isPrevTemplate: (_k = (_j = resp) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.isPrevTemplate,
+                templateName: (_m = (_l = resp) === null || _l === void 0 ? void 0 : _l.data) === null || _m === void 0 ? void 0 : _m.templateName,
+                ttl: (_p = (_o = resp) === null || _o === void 0 ? void 0 : _o.data) === null || _p === void 0 ? void 0 : _p.ttlSeconds,
                 from: {
-                    id: (_h = resp.data) === null || _h === void 0 ? void 0 : _h.accountId,
-                    name: (_j = resp.data) === null || _j === void 0 ? void 0 : _j.accountName,
-                    platform: (_k = resp.data) === null || _k === void 0 ? void 0 : _k.platform,
-                    clientId: (_l = resp.data) === null || _l === void 0 ? void 0 : _l.clientId,
-                    clientName: (_m = resp.data) === null || _m === void 0 ? void 0 : _m.clientName,
-                    accountNo: (_o = resp.data) === null || _o === void 0 ? void 0 : _o.accountNo,
-                    wabaId: (_q = (_p = resp.data) === null || _p === void 0 ? void 0 : _p.wabaId, (_q !== null && _q !== void 0 ? _q : '')),
+                    id: (_q = resp.data) === null || _q === void 0 ? void 0 : _q.accountId,
+                    name: (_r = resp.data) === null || _r === void 0 ? void 0 : _r.accountName,
+                    platform: (_s = resp.data) === null || _s === void 0 ? void 0 : _s.platform,
+                    clientId: (_t = resp.data) === null || _t === void 0 ? void 0 : _t.clientId,
+                    clientName: (_u = resp.data) === null || _u === void 0 ? void 0 : _u.clientName,
+                    accountNo: (_v = resp.data) === null || _v === void 0 ? void 0 : _v.accountNo,
+                    wabaId: (_x = (_w = resp.data) === null || _w === void 0 ? void 0 : _w.wabaId, (_x !== null && _x !== void 0 ? _x : '')),
                 },
-                text: (_s = (_r = resp.data) === null || _r === void 0 ? void 0 : _r.details) === null || _s === void 0 ? void 0 : _s.text,
-                targetURL: (_4 = (_0 = (_w = (_v = (_u = (_t = resp.data) === null || _t === void 0 ? void 0 : _t.details) === null || _u === void 0 ? void 0 : _u.image) === null || _v === void 0 ? void 0 : _v.url, (_w !== null && _w !== void 0 ? _w : (_z = (_y = (_x = resp.data) === null || _x === void 0 ? void 0 : _x.details) === null || _y === void 0 ? void 0 : _y.document) === null || _z === void 0 ? void 0 : _z.url)), (_0 !== null && _0 !== void 0 ? _0 : (_3 = (_2 = (_1 = resp.data) === null || _1 === void 0 ? void 0 : _1.details) === null || _2 === void 0 ? void 0 : _2.video) === null || _3 === void 0 ? void 0 : _3.url)), (_4 !== null && _4 !== void 0 ? _4 : (_7 = (_6 = (_5 = resp.data) === null || _5 === void 0 ? void 0 : _5.details) === null || _6 === void 0 ? void 0 : _6.template) === null || _7 === void 0 ? void 0 : _7.headerURL)),
-                paramHeader: (_10 = (_9 = (_8 = resp.data) === null || _8 === void 0 ? void 0 : _8.details) === null || _9 === void 0 ? void 0 : _9.template) === null || _10 === void 0 ? void 0 : _10.header,
-                paramBody: (_13 = (_12 = (_11 = resp.data) === null || _11 === void 0 ? void 0 : _11.details) === null || _12 === void 0 ? void 0 : _12.template) === null || _13 === void 0 ? void 0 : _13.data,
-                paramButton: (_16 = (_15 = (_14 = resp.data) === null || _14 === void 0 ? void 0 : _14.details) === null || _15 === void 0 ? void 0 : _15.template) === null || _16 === void 0 ? void 0 : _16.button,
-                otpValue: (_21 = __spread((_20 = (_19 = (_18 = (_17 = resp.data) === null || _17 === void 0 ? void 0 : _17.details) === null || _18 === void 0 ? void 0 : _18.template) === null || _19 === void 0 ? void 0 : _19.data, (_20 !== null && _20 !== void 0 ? _20 : [])))) === null || _21 === void 0 ? void 0 : _21.pop(),
+                text: (_z = (_y = resp.data) === null || _y === void 0 ? void 0 : _y.details) === null || _z === void 0 ? void 0 : _z.text,
+                targetURL: (_11 = (_7 = (_3 = (_2 = (_1 = (_0 = resp.data) === null || _0 === void 0 ? void 0 : _0.details) === null || _1 === void 0 ? void 0 : _1.image) === null || _2 === void 0 ? void 0 : _2.url, (_3 !== null && _3 !== void 0 ? _3 : (_6 = (_5 = (_4 = resp.data) === null || _4 === void 0 ? void 0 : _4.details) === null || _5 === void 0 ? void 0 : _5.document) === null || _6 === void 0 ? void 0 : _6.url)), (_7 !== null && _7 !== void 0 ? _7 : (_10 = (_9 = (_8 = resp.data) === null || _8 === void 0 ? void 0 : _8.details) === null || _9 === void 0 ? void 0 : _9.video) === null || _10 === void 0 ? void 0 : _10.url)), (_11 !== null && _11 !== void 0 ? _11 : (_14 = (_13 = (_12 = resp.data) === null || _12 === void 0 ? void 0 : _12.details) === null || _13 === void 0 ? void 0 : _13.template) === null || _14 === void 0 ? void 0 : _14.headerURL)),
+                paramHeader: (_17 = (_16 = (_15 = resp.data) === null || _15 === void 0 ? void 0 : _15.details) === null || _16 === void 0 ? void 0 : _16.template) === null || _17 === void 0 ? void 0 : _17.header,
+                paramBody: (_20 = (_19 = (_18 = resp.data) === null || _18 === void 0 ? void 0 : _18.details) === null || _19 === void 0 ? void 0 : _19.template) === null || _20 === void 0 ? void 0 : _20.data,
+                paramButton: (_23 = (_22 = (_21 = resp.data) === null || _21 === void 0 ? void 0 : _21.details) === null || _22 === void 0 ? void 0 : _22.template) === null || _23 === void 0 ? void 0 : _23.button,
+                otpValue: (_28 = __spread((_27 = (_26 = (_25 = (_24 = resp.data) === null || _24 === void 0 ? void 0 : _24.details) === null || _25 === void 0 ? void 0 : _25.template) === null || _26 === void 0 ? void 0 : _26.data, (_27 !== null && _27 !== void 0 ? _27 : [])))) === null || _28 === void 0 ? void 0 : _28.pop(),
                 template: {
-                    ID: (_24 = (_23 = (_22 = resp.data) === null || _22 === void 0 ? void 0 : _22.details) === null || _23 === void 0 ? void 0 : _23.template) === null || _24 === void 0 ? void 0 : _24.id,
-                    name: (_27 = (_26 = (_25 = resp.data) === null || _25 === void 0 ? void 0 : _25.details) === null || _26 === void 0 ? void 0 : _26.template) === null || _27 === void 0 ? void 0 : _27.name,
-                    lang: (_30 = (_29 = (_28 = resp.data) === null || _28 === void 0 ? void 0 : _28.details) === null || _29 === void 0 ? void 0 : _29.template) === null || _30 === void 0 ? void 0 : _30.lang,
-                    platform: (_31 = resp.data) === null || _31 === void 0 ? void 0 : _31.platform,
-                    headerURL: (_34 = (_33 = (_32 = resp.data) === null || _32 === void 0 ? void 0 : _32.details) === null || _33 === void 0 ? void 0 : _33.template) === null || _34 === void 0 ? void 0 : _34.headerURL,
+                    ID: (_31 = (_30 = (_29 = resp.data) === null || _29 === void 0 ? void 0 : _29.details) === null || _30 === void 0 ? void 0 : _30.template) === null || _31 === void 0 ? void 0 : _31.id,
+                    name: (_34 = (_33 = (_32 = resp.data) === null || _32 === void 0 ? void 0 : _32.details) === null || _33 === void 0 ? void 0 : _33.template) === null || _34 === void 0 ? void 0 : _34.name,
+                    lang: (_37 = (_36 = (_35 = resp.data) === null || _35 === void 0 ? void 0 : _35.details) === null || _36 === void 0 ? void 0 : _36.template) === null || _37 === void 0 ? void 0 : _37.lang,
+                    platform: (_38 = resp.data) === null || _38 === void 0 ? void 0 : _38.platform,
+                    headerURL: (_41 = (_40 = (_39 = resp.data) === null || _39 === void 0 ? void 0 : _39.details) === null || _40 === void 0 ? void 0 : _40.template) === null || _41 === void 0 ? void 0 : _41.headerURL,
                     header: {
-                        examples: (_37 = (_36 = (_35 = resp.data) === null || _35 === void 0 ? void 0 : _35.details) === null || _36 === void 0 ? void 0 : _36.template) === null || _37 === void 0 ? void 0 : _37.header,
+                        examples: (_44 = (_43 = (_42 = resp.data) === null || _42 === void 0 ? void 0 : _42.details) === null || _43 === void 0 ? void 0 : _43.template) === null || _44 === void 0 ? void 0 : _44.header,
                     },
                     body: {
-                        examples: (_40 = (_39 = (_38 = resp.data) === null || _38 === void 0 ? void 0 : _38.details) === null || _39 === void 0 ? void 0 : _39.template) === null || _40 === void 0 ? void 0 : _40.data,
+                        examples: (_47 = (_46 = (_45 = resp.data) === null || _45 === void 0 ? void 0 : _45.details) === null || _46 === void 0 ? void 0 : _46.template) === null || _47 === void 0 ? void 0 : _47.data,
                     },
-                    buttons: (_43 = (_42 = (_41 = resp.data) === null || _41 === void 0 ? void 0 : _41.details) === null || _42 === void 0 ? void 0 : _42.template) === null || _43 === void 0 ? void 0 : _43.button,
-                    ClientId: (_44 = resp.data) === null || _44 === void 0 ? void 0 : _44.clientId,
-                    ClientName: (_45 = resp.data) === null || _45 === void 0 ? void 0 : _45.clientName,
+                    buttons: (_50 = (_49 = (_48 = resp.data) === null || _48 === void 0 ? void 0 : _48.details) === null || _49 === void 0 ? void 0 : _49.template) === null || _50 === void 0 ? void 0 : _50.button,
+                    ClientId: (_51 = resp.data) === null || _51 === void 0 ? void 0 : _51.clientId,
+                    ClientName: (_52 = resp.data) === null || _52 === void 0 ? void 0 : _52.clientName,
                 },
-                isUpload: ((_46 = resp.data) === null || _46 === void 0 ? void 0 : _46.fileId) !== '',
-                fileId: (_47 = resp.data) === null || _47 === void 0 ? void 0 : _47.fileId,
+                isUpload: ((_53 = resp.data) === null || _53 === void 0 ? void 0 : _53.fileId) !== '',
+                fileId: (_54 = resp.data) === null || _54 === void 0 ? void 0 : _54.fileId,
             };
             localStorage.setItem('telin.campaign', JSON.stringify(__assign(__assign({}, _this.getCampaignStorage), {
                 generalInformation: {
-                    id: (_48 = resp.data) === null || _48 === void 0 ? void 0 : _48.id,
+                    id: (_55 = resp.data) === null || _55 === void 0 ? void 0 : _55.id,
                     form: generalInformation,
                 },
-                failover: (_49 = resp.data) === null || _49 === void 0 ? void 0 : _49.failover,
-                targetAudience: (_50 = resp.data) === null || _50 === void 0 ? void 0 : _50.targets,
+                failover: (_56 = resp.data) === null || _56 === void 0 ? void 0 : _56.failover,
+                targetAudience: (_57 = resp.data) === null || _57 === void 0 ? void 0 : _57.targets,
                 targetAudienceFile: {
-                    name: (_51 = resp.data) === null || _51 === void 0 ? void 0 : _51.fileName,
-                    targetURL: (_52 = resp.data) === null || _52 === void 0 ? void 0 : _52.targetURL,
+                    name: (_58 = resp.data) === null || _58 === void 0 ? void 0 : _58.fileName,
+                    targetURL: (_59 = resp.data) === null || _59 === void 0 ? void 0 : _59.targetURL,
                 },
                 scheduler: {
-                    schedulerType: ((_53 = resp.data) === null || _53 === void 0 ? void 0 : _53.scheduleType) === 'MULTI'
+                    schedulerType: ((_60 = resp.data) === null || _60 === void 0 ? void 0 : _60.scheduleType) === 'MULTI'
                         ? 'ONE_TIME'
-                        : (_54 = resp.data) === null || _54 === void 0 ? void 0 : _54.scheduleType,
-                    startDate: (_56 = (_55 = resp.data) === null || _55 === void 0 ? void 0 : _55.startTime) === null || _56 === void 0 ? void 0 : _56.split(' ')[0],
-                    startTime: (_58 = (_57 = resp.data) === null || _57 === void 0 ? void 0 : _57.startTime) === null || _58 === void 0 ? void 0 : _58.split(' ')[1],
-                    isRepeat: ((_59 = resp.data) === null || _59 === void 0 ? void 0 : _59.scheduleType) === 'MULTI',
-                    delivery: (_60 = resp.data) === null || _60 === void 0 ? void 0 : _60.repeat,
+                        : (_61 = resp.data) === null || _61 === void 0 ? void 0 : _61.scheduleType,
+                    startDate: (_63 = (_62 = resp.data) === null || _62 === void 0 ? void 0 : _62.startTime) === null || _63 === void 0 ? void 0 : _63.split(' ')[0],
+                    startTime: (_65 = (_64 = resp.data) === null || _64 === void 0 ? void 0 : _64.startTime) === null || _65 === void 0 ? void 0 : _65.split(' ')[1],
+                    isRepeat: ((_66 = resp.data) === null || _66 === void 0 ? void 0 : _66.scheduleType) === 'MULTI',
+                    delivery: (_67 = resp.data) === null || _67 === void 0 ? void 0 : _67.repeat,
                 },
             })));
-            _this.isLine = ((_61 = resp.data) === null || _61 === void 0 ? void 0 : _61.platform) === 'LINE';
+            _this.isLine = ((_68 = resp.data) === null || _68 === void 0 ? void 0 : _68.platform) === 'LINE';
             _this.isLoading = false;
             _this.initWizard();
         }, function () {
@@ -2958,11 +3115,11 @@ var GeneralInformationEmailComponent = /** @class */ (function () {
     GeneralInformationEmailComponent.prototype.initForm = function () {
         var _this = this;
         this.form = new FormGroup({
-            channel: new FormControl(null, Validators.required),
-            from: new FormControl(null, Validators.required),
-            text: new FormControl(null, Validators.required),
-            template: new FormControl(null, Validators.required),
-            paramBody: new FormArray([], Validators.required),
+            channel: new FormControl(null, Validators$1.required),
+            from: new FormControl(null, Validators$1.required),
+            text: new FormControl(null, Validators$1.required),
+            template: new FormControl(null, Validators$1.required),
+            paramBody: new FormArray([], Validators$1.required),
             isUpload: new FormControl(false),
             fileId: new FormControl(''),
         });
@@ -3019,16 +3176,16 @@ var GeneralInformationEmailComponent = /** @class */ (function () {
             this.form.controls[key].clearValidators();
             this.form.controls[key].updateValueAndValidity();
         }
-        this.form.get('channel').setValidators(Validators.required);
-        this.form.get('from').setValidators(Validators.required);
+        this.form.get('channel').setValidators(Validators$1.required);
+        this.form.get('from').setValidators(Validators$1.required);
         if (this.getIsTemplate) {
-            this.form.get('template').setValidators(Validators.required);
+            this.form.get('template').setValidators(Validators$1.required);
             this.form.get('template').updateValueAndValidity();
-            this.form.get('paramBody').setValidators(Validators.required);
+            this.form.get('paramBody').setValidators(Validators$1.required);
             this.form.get('paramBody').updateValueAndValidity();
         }
         else {
-            this.form.get('text').setValidators(Validators.required);
+            this.form.get('text').setValidators(Validators$1.required);
             this.form.get('text').updateValueAndValidity();
         }
     };
@@ -3114,7 +3271,7 @@ var GeneralInformationEmailComponent = /** @class */ (function () {
                 value: value,
                 disabled: this.isReadOnlyMode ||
                     ['UnsubscribeAccount'].includes(value),
-            }, Validators.required),
+            }, Validators$1.required),
         });
         return form;
     };
@@ -3160,7 +3317,7 @@ var GeneralInformationEmailComponent = /** @class */ (function () {
             return;
         this.isHaveTemplateParam = ((_a = template.body.examples) === null || _a === void 0 ? void 0 : _a.length) > 0;
         ((_b = template.body.examples) === null || _b === void 0 ? void 0 : _b.length) > 0
-            ? this.form.get('paramBody').setValidators(Validators.required)
+            ? this.form.get('paramBody').setValidators(Validators$1.required)
             : this.form.get('paramBody').clearValidators();
         this.form.get('paramBody').controls = [];
         this.form.get('paramBody').reset();
@@ -3269,12 +3426,12 @@ var GeneralInformationLineComponent = /** @class */ (function () {
     GeneralInformationLineComponent.prototype.initForm = function () {
         var _this = this;
         this.form = new FormGroup({
-            channel: new FormControl(null, Validators.required),
-            from: new FormControl(null, Validators.required),
+            channel: new FormControl(null, Validators$1.required),
+            from: new FormControl(null, Validators$1.required),
             text: new FormControl(null),
             template: new FormControl(null),
             isJSON: new FormControl(false),
-            paramBody: new FormArray([], Validators.required),
+            paramBody: new FormArray([], Validators$1.required),
         });
         this.form.valueChanges.subscribe(function () {
             setTimeout(function () {
@@ -3312,16 +3469,16 @@ var GeneralInformationLineComponent = /** @class */ (function () {
             this.form.controls[key].clearValidators();
             this.form.controls[key].updateValueAndValidity();
         }
-        this.form.get('channel').setValidators(Validators.required);
-        this.form.get('from').setValidators(Validators.required);
+        this.form.get('channel').setValidators(Validators$1.required);
+        this.form.get('from').setValidators(Validators$1.required);
         if (this.isText) {
-            this.form.get('text').setValidators(Validators.required);
+            this.form.get('text').setValidators(Validators$1.required);
             this.form.get('text').updateValueAndValidity();
             return;
         }
-        this.form.get('template').setValidators(Validators.required);
+        this.form.get('template').setValidators(Validators$1.required);
         this.form.get('template').updateValueAndValidity();
-        this.form.get('paramBody').setValidators(Validators.required);
+        this.form.get('paramBody').setValidators(Validators$1.required);
         this.form.get('paramBody').updateValueAndValidity();
     };
     GeneralInformationLineComponent.prototype.formReset = function () {
@@ -3398,7 +3555,7 @@ var GeneralInformationLineComponent = /** @class */ (function () {
     GeneralInformationLineComponent.prototype.initParameter = function (value) {
         if (value === void 0) { value = ''; }
         var form = new FormGroup({
-            name: new FormControl({ value: value, disabled: this.isReadOnlyMode }, Validators.required),
+            name: new FormControl({ value: value, disabled: this.isReadOnlyMode }, Validators$1.required),
         });
         return form;
     };
@@ -3470,7 +3627,7 @@ var GeneralInformationLineComponent = /** @class */ (function () {
         var findBrackets = (_a = bodyText) === null || _a === void 0 ? void 0 : _a.match(/{{/g);
         var formStorage = (_c = (_b = this.getCampaignStorage) === null || _b === void 0 ? void 0 : _b.generalInformation) === null || _c === void 0 ? void 0 : _c.form;
         ((_d = findBrackets) === null || _d === void 0 ? void 0 : _d.length) > 0
-            ? this.form.get('paramBody').setValidators(Validators.required)
+            ? this.form.get('paramBody').setValidators(Validators$1.required)
             : this.form.get('paramBody').clearValidators();
         (_e = findBrackets) === null || _e === void 0 ? void 0 : _e.forEach(function (_, index) {
             var _a, _b, _c, _d, _e, _f, _g;
@@ -3572,11 +3729,11 @@ var GeneralInformationSMSComponent = /** @class */ (function () {
     GeneralInformationSMSComponent.prototype.initForm = function () {
         var _this = this;
         this.form = new FormGroup({
-            channel: new FormControl(null, Validators.required),
-            from: new FormControl(null, Validators.required),
-            text: new FormControl(null, Validators.required),
-            template: new FormControl(null, Validators.required),
-            paramBody: new FormArray([], Validators.required),
+            channel: new FormControl(null, Validators$1.required),
+            from: new FormControl(null, Validators$1.required),
+            text: new FormControl(null, Validators$1.required),
+            template: new FormControl(null, Validators$1.required),
+            paramBody: new FormArray([], Validators$1.required),
             isUpload: new FormControl(false),
             fileId: new FormControl(''),
         });
@@ -3632,16 +3789,16 @@ var GeneralInformationSMSComponent = /** @class */ (function () {
             this.form.controls[key].clearValidators();
             this.form.controls[key].updateValueAndValidity();
         }
-        this.form.get('channel').setValidators(Validators.required);
-        this.form.get('from').setValidators(Validators.required);
+        this.form.get('channel').setValidators(Validators$1.required);
+        this.form.get('from').setValidators(Validators$1.required);
         if (this.getIsTemplate) {
-            this.form.get('template').setValidators(Validators.required);
-            this.form.get('paramBody').setValidators(Validators.required);
+            this.form.get('template').setValidators(Validators$1.required);
+            this.form.get('paramBody').setValidators(Validators$1.required);
             this.form.get('template').updateValueAndValidity();
             this.form.get('paramBody').updateValueAndValidity();
         }
         else {
-            this.form.get('text').setValidators(Validators.required);
+            this.form.get('text').setValidators(Validators$1.required);
             this.form.get('text').updateValueAndValidity();
         }
     };
@@ -3727,7 +3884,7 @@ var GeneralInformationSMSComponent = /** @class */ (function () {
                 value: value,
                 disabled: this.isReadOnlyMode ||
                     ['UnsubscribeAccount'].includes(value),
-            }, Validators.required),
+            }, Validators$1.required),
         });
         return form;
     };
@@ -3773,7 +3930,7 @@ var GeneralInformationSMSComponent = /** @class */ (function () {
             return;
         this.isHaveTemplateParam = ((_a = template.body.examples) === null || _a === void 0 ? void 0 : _a.length) > 0;
         ((_b = template.body.examples) === null || _b === void 0 ? void 0 : _b.length) > 0
-            ? this.form.get('paramBody').setValidators(Validators.required)
+            ? this.form.get('paramBody').setValidators(Validators$1.required)
             : this.form.get('paramBody').clearValidators();
         this.form.get('paramBody').controls = [];
         this.form.get('paramBody').reset();
@@ -3847,6 +4004,49 @@ var EnumData;
     EnumData["SCHEDULER_TYPE_MULTIPLE"] = "MULTIPLE";
 })(EnumData || (EnumData = {}));
 
+var maxValidator = function (max, message) {
+    return function (AC) {
+        var isError = Validators$1.max(max)(AC);
+        if (isError)
+            return {
+                max: max,
+                actual: AC.value,
+                message: message || "Max Value equals to " + max,
+            };
+        return null;
+    };
+};
+
+var minValidator = function (min, message) {
+    return function (AC) {
+        var isError = Validators$1.min(min)(AC);
+        if (isError)
+            return {
+                min: min,
+                actual: AC.value,
+                message: message || "Min Value equals to " + min,
+            };
+        return null;
+    };
+};
+
+var requiredValidator = function (message) {
+    return function (ac) {
+        var isError = Validators$1.required(ac);
+        if (isError)
+            return { message: message };
+        return null;
+    };
+};
+
+var Validators = {
+    compose: Validators$1.compose,
+    composeAync: Validators$1.composeAsync,
+    max: maxValidator,
+    min: minValidator,
+    required: requiredValidator,
+};
+
 var GeneralInformationWAComponent = /** @class */ (function () {
     function GeneralInformationWAComponent(ngZone, mapsAPILoader, apiAdapterService, toastr) {
         this.ngZone = ngZone;
@@ -3867,6 +4067,10 @@ var GeneralInformationWAComponent = /** @class */ (function () {
         this.pageNoAccountOption = 1;
         this.pageNoTemplateOption = 1;
         this.subscribers = [];
+        this.templates = [
+            { label: 'Create New', value: false },
+            { label: 'Use existing template', value: true },
+        ];
         this.updateGeneralInformationForm = new EventEmitter();
     }
     Object.defineProperty(GeneralInformationWAComponent.prototype, "isTouchedForm", {
@@ -3915,7 +4119,7 @@ var GeneralInformationWAComponent = /** @class */ (function () {
     GeneralInformationWAComponent.prototype.initForm = function () {
         var _this = this;
         this.form = new FormGroup({
-            channel: new FormControl(null, Validators.required),
+            channel: new FormControl(null, Validators$1.required),
             media: new FormControl(null),
             from: new FormControl(null),
             text: new FormControl(null),
@@ -3926,9 +4130,9 @@ var GeneralInformationWAComponent = /** @class */ (function () {
             latitude: new FormControl(null),
             longitude: new FormControl(null),
             template: new FormControl(null),
-            paramHeader: new FormArray([], Validators.required),
-            paramBody: new FormArray([], Validators.required),
-            paramButton: new FormArray([], Validators.required),
+            paramHeader: new FormArray([], Validators$1.required),
+            paramBody: new FormArray([], Validators$1.required),
+            paramButton: new FormArray([], Validators$1.required),
             otpValue: new FormControl(''),
             isUpload: new FormControl(false),
             fileId: new FormControl(''),
@@ -3936,6 +4140,9 @@ var GeneralInformationWAComponent = /** @class */ (function () {
             product: new FormControl(null),
             catalogue: new FormControl(null),
             body: new FormControl(null),
+            isUseExistingTemplate: new FormControl(false),
+            isNeedSave: new FormControl(false),
+            ttl: new FormControl(null),
         });
         this.form.valueChanges.subscribe(function () {
             setTimeout(function () {
@@ -3950,7 +4157,7 @@ var GeneralInformationWAComponent = /** @class */ (function () {
         this.form.disable();
     };
     GeneralInformationWAComponent.prototype.initEdit = function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
         if (Object.entries(this.getCampaignStorage).length === 0 ||
             ((_c = (_b = (_a = this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.generalInformation) === null || _b === void 0 ? void 0 : _b.form) === null || _c === void 0 ? void 0 : _c.medium) !== 'WA')
             return;
@@ -3976,35 +4183,42 @@ var GeneralInformationWAComponent = /** @class */ (function () {
         this.form
             .get('otpValue')
             .setValue((_z = (_y = this.getCampaignStorage) === null || _y === void 0 ? void 0 : _y.generalInformation) === null || _z === void 0 ? void 0 : _z.form.otpValue);
+        this.form
+            .get('isUseExistingTemplate')
+            .setValue(!!((_2 = (_1 = (_0 = this.getCampaignStorage) === null || _0 === void 0 ? void 0 : _0.generalInformation) === null || _1 === void 0 ? void 0 : _1.form) === null || _2 === void 0 ? void 0 : _2.templateName));
+        this.form
+            .get('isNeedSave')
+            .setValue(!!((_5 = (_4 = (_3 = this.getCampaignStorage) === null || _3 === void 0 ? void 0 : _3.generalInformation) === null || _4 === void 0 ? void 0 : _4.form) === null || _5 === void 0 ? void 0 : _5.isNeedSave));
+        this.form.get('ttl').setValue((_8 = (_7 = (_6 = this.getCampaignStorage) === null || _6 === void 0 ? void 0 : _6.generalInformation) === null || _7 === void 0 ? void 0 : _7.form) === null || _8 === void 0 ? void 0 : _8.ttl);
         this.isHaveTemplateParam = this.form.get('isUpload').value;
-        this.getTemplateOptionService(null, (_0 = this.form.get('template').value) === null || _0 === void 0 ? void 0 : _0.name);
+        this.getTemplateOptionService(null, (_9 = this.form.get('template').value) === null || _9 === void 0 ? void 0 : _9.name);
     };
     GeneralInformationWAComponent.prototype.initValidation = function () {
         for (var key in this.form.controls) {
             this.form.controls[key].clearValidators();
             this.form.controls[key].updateValueAndValidity();
         }
-        this.form.get('channel').setValidators(Validators.required);
+        this.form.get('channel').setValidators(Validators$1.required);
         if (this.getIsText) {
-            this.form.get('from').setValidators(Validators.required);
-            this.form.get('text').setValidators(Validators.required);
+            this.form.get('from').setValidators(Validators$1.required);
+            this.form.get('text').setValidators(Validators$1.required);
             this.form.get('from').updateValueAndValidity();
             this.form.get('text').updateValueAndValidity();
         }
         else if (this.getIsMedia) {
-            this.form.get('media').setValidators(Validators.required);
-            this.form.get('from').setValidators(Validators.required);
-            this.form.get('fileName').setValidators(Validators.required);
+            this.form.get('media').setValidators(Validators$1.required);
+            this.form.get('from').setValidators(Validators$1.required);
+            this.form.get('fileName').setValidators(Validators$1.required);
             this.form.get('media').updateValueAndValidity();
             this.form.get('from').updateValueAndValidity();
             this.form.get('fileName').updateValueAndValidity();
         }
         else if (this.getIsTemplate) {
-            this.form.get('from').setValidators(Validators.required);
-            this.form.get('template').setValidators(Validators.required);
-            this.form.get('paramHeader').setValidators(Validators.required);
-            this.form.get('paramBody').setValidators(Validators.required);
-            this.form.get('paramButton').setValidators(Validators.required);
+            this.form.get('from').setValidators(Validators$1.required);
+            this.form.get('template').setValidators(Validators$1.required);
+            this.form.get('paramHeader').setValidators(Validators$1.required);
+            this.form.get('paramBody').setValidators(Validators$1.required);
+            this.form.get('paramButton').setValidators(Validators$1.required);
             this.form.get('from').updateValueAndValidity();
             this.form.get('template').updateValueAndValidity();
             this.form.get('paramHeader').updateValueAndValidity();
@@ -4012,20 +4226,33 @@ var GeneralInformationWAComponent = /** @class */ (function () {
             this.form.get('paramButton').updateValueAndValidity();
         }
         else if (this.getIsCatalogue) {
-            this.form.get('from').setValidators(Validators.required);
-            this.form.get('category').setValidators(Validators.required);
-            this.form.get('catalogue').setValidators(Validators.required);
-            this.form.get('product').setValidators(Validators.required);
-            this.form.get('body').setValidators(Validators.maxLength(100));
+            this.form.get('from').setValidators(Validators$1.required);
+            this.form.get('category').setValidators(Validators$1.required);
+            this.form.get('catalogue').setValidators(Validators$1.required);
+            this.form.get('product').setValidators(Validators$1.required);
+            this.form.get('body').setValidators(Validators$1.maxLength(100));
             this.form.get('from').updateValueAndValidity();
             this.form.get('category').updateValueAndValidity();
             this.form.get('catalogue').updateValueAndValidity();
             this.form.get('product').updateValueAndValidity();
             this.form.get('body').updateValueAndValidity();
         }
+        else if (this.getIsUtility) {
+            this.form.get('from').setValidators(Validators$1.required);
+            this.form.get('text').setValidators([Validators$1.required, Validators$1.maxLength(1024)]);
+            this.form
+                .get('ttl')
+                .setValidators([
+                Validators.min(30, 'Minimum TTL 30'),
+                Validators.max(43200, 'Maximum TTL 43200'),
+            ]);
+            this.form.get('from').updateValueAndValidity();
+            this.form.get('text').updateValueAndValidity();
+            this.form.get('ttl').updateValueAndValidity();
+        }
         else {
-            this.form.get('from').setValidators(Validators.required);
-            this.form.get('text').setValidators(Validators.required);
+            this.form.get('from').setValidators(Validators$1.required);
+            this.form.get('text').setValidators(Validators$1.required);
             this.form.get('from').updateValueAndValidity();
             this.form.get('text').updateValueAndValidity();
         }
@@ -4093,7 +4320,7 @@ var GeneralInformationWAComponent = /** @class */ (function () {
         if (event === void 0) { event = null; }
         if (filter === void 0) { filter = ''; }
         if (isInfinite === void 0) { isInfinite = false; }
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this.isLoadingTemplateOption = true;
         var parameterList = [
             this.initParam('pageNo', this.pageNoTemplateOption, 'number'),
@@ -4106,6 +4333,10 @@ var GeneralInformationWAComponent = /** @class */ (function () {
         ];
         if (this.isReadOnlyMode)
             parameterList.push(this.initParam('summary', true, 'string'));
+        var messageType = (_d = this.form.value) === null || _d === void 0 ? void 0 : _d.channel;
+        if (messageType === 'utility') {
+            parameterList.push(this.initParam('isDirectSend', true, 'string'));
+        }
         var subs = this.apiAdapterService
             .executeApiRequest(parameterList, '/message/template', 'GET')
             .subscribe(function (resp) {
@@ -4129,13 +4360,13 @@ var GeneralInformationWAComponent = /** @class */ (function () {
         if (value === void 0) { value = ''; }
         var form = isButton
             ? new FormGroup({
-                name: new FormArray([], Validators.required),
+                name: new FormArray([], Validators$1.required),
             })
             : new FormGroup({
                 name: new FormControl({
                     value: value,
                     disabled: this.isReadOnlyMode || ['$UnsubscribeAccount'].includes(value),
-                }, Validators.required),
+                }, Validators$1.required),
             });
         return form;
     };
@@ -4214,6 +4445,15 @@ var GeneralInformationWAComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(GeneralInformationWAComponent.prototype, "getIsUtility", {
+        get: function () {
+            var _a;
+            return (this.form.get('channel').value &&
+                ((_a = this.form.get('channel').value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'utility');
+        },
+        enumerable: true,
+        configurable: true
+    });
     GeneralInformationWAComponent.prototype.getNextAccountBatch = function () {
         if (!this.isHaveNextAccountOption)
             return;
@@ -4255,7 +4495,7 @@ var GeneralInformationWAComponent = /** @class */ (function () {
         this.form.get('file').setValue(file[0]);
         this.form.get('fileType').setValue('image');
         this.form.get('fileName').setValue(file[0].name);
-        this.form.get('targetURL').setValidators(Validators.required);
+        this.form.get('targetURL').setValidators(Validators$1.required);
         this.form.get('targetURL').updateValueAndValidity();
         if (file[0].type.indexOf('video') > -1)
             this.form.get('fileType').setValue('video');
@@ -4302,13 +4542,13 @@ var GeneralInformationWAComponent = /** @class */ (function () {
             this.fileTypeChange((_t = (_s = (_r = template) === null || _r === void 0 ? void 0 : _r.header) === null || _s === void 0 ? void 0 : _s.type) === null || _t === void 0 ? void 0 : _t.toLowerCase());
         }
         ((_u = template.header.examples) === null || _u === void 0 ? void 0 : _u.length) > 0
-            ? this.form.get('paramHeader').setValidators(Validators.required)
+            ? this.form.get('paramHeader').setValidators(Validators$1.required)
             : this.form.get('paramHeader').clearValidators();
         ((_v = template.body.examples) === null || _v === void 0 ? void 0 : _v.length) > 0
-            ? this.form.get('paramBody').setValidators(Validators.required)
+            ? this.form.get('paramBody').setValidators(Validators$1.required)
             : this.form.get('paramBody').clearValidators();
         ((_w = template.buttons) === null || _w === void 0 ? void 0 : _w.length) > 0
-            ? this.form.get('paramButton').setValidators(Validators.required)
+            ? this.form.get('paramButton').setValidators(Validators$1.required)
             : this.form.get('paramButton').clearValidators();
         this.form.get('paramHeader').controls = [];
         this.form.get('paramHeader').reset();
@@ -4327,7 +4567,7 @@ var GeneralInformationWAComponent = /** @class */ (function () {
             this.form
                 .get('otpValue')
                 .setValue((_6 = (_0 = (_z = formStorage) === null || _z === void 0 ? void 0 : _z.otpValue, (_0 !== null && _0 !== void 0 ? _0 : (_5 = __spread((_4 = (_3 = (_2 = (_1 = formStorage) === null || _1 === void 0 ? void 0 : _1.template) === null || _2 === void 0 ? void 0 : _2.body) === null || _3 === void 0 ? void 0 : _3.examples, (_4 !== null && _4 !== void 0 ? _4 : [])))) === null || _5 === void 0 ? void 0 : _5.pop())), (_6 !== null && _6 !== void 0 ? _6 : '')));
-            this.form.get('otpValue').setValidators(Validators.required);
+            this.form.get('otpValue').setValidators(Validators$1.required);
             this.form.get('otpValue').updateValueAndValidity();
         }
         (_7 = template.header.examples) === null || _7 === void 0 ? void 0 : _7.forEach(function (each, index) {
@@ -4450,6 +4690,28 @@ var GeneralInformationWAComponent = /** @class */ (function () {
         }
         this.updateTemplate(this.form.get('template').value);
     };
+    GeneralInformationWAComponent.prototype.handleChangeTemplate = function (useExisting) {
+        if (useExisting) {
+            this.form.get('template').setValidators(Validators$1.required);
+            this.form.get('text').reset();
+            this.form.get('text').clearValidators();
+            this.form.get('text').updateValueAndValidity();
+            this.form.get('template').updateValueAndValidity();
+        }
+        else {
+            this.form.get('template').reset();
+            this.form.get('template').clearValidators();
+            this.form.get('text').setValidators([Validators$1.required, Validators$1.max(1024)]);
+            this.form.get('text').updateValueAndValidity();
+            this.form.get('template').updateValueAndValidity();
+        }
+    };
+    GeneralInformationWAComponent.prototype.handleChangeFrom = function (value) {
+        var isUseExistingTemplate = this.form.value.isUseExistingTemplate;
+        if (!isUseExistingTemplate)
+            return;
+        this.getTemplateOptionService(value);
+    };
     GeneralInformationWAComponent.prototype.ngOnDestroy = function () {
         this.subscribers.forEach(function (each) { return each.unsubscribe(); });
     };
@@ -4474,7 +4736,7 @@ var GeneralInformationWAComponent = /** @class */ (function () {
     GeneralInformationWAComponent = __decorate([
         Component({
             selector: 'lib-general-information-wa',
-            template: "<form autocomplete=\"off\"\r\n\t[formGroup]=\"form\">\r\n\t<div class=\"form-group\">\r\n\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\tfloatLabel=\"always\"\r\n\t\t\tclass=\"w-100\">\r\n\t\t\t<mat-label class=\"asterix--after\">Message Type</mat-label>\r\n\r\n\t\t\t<mat-select placeholder=\"Select message type\"\r\n\t\t\t\tformControlName=\"channel\">\r\n\t\t\t\t<mat-option *ngFor=\"let option of msgTypeWAOption\"\r\n\t\t\t\t\t[value]=\"option.code\"\r\n\t\t\t\t\t(click)=\"formReset()\">\r\n\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t</mat-option>\r\n\t\t\t</mat-select>\r\n\t\t</mat-form-field>\r\n\r\n\t\t<mat-error align=\"end\"\r\n\t\t\t*ngFor=\"let validation of validationMessages.channel\">\r\n\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t*ngIf=\"form.get('channel').touched \r\n\t\t\t\t\t&& form.get('channel').hasError(validation.type)\">\r\n\t\t\t\t{{ validation.message }}\r\n\t\t\t</p>\r\n\t\t</mat-error>\r\n\r\n\t\t<div *ngIf=\"!getIsTemplate\"\r\n\t\t\trole=\"alert\"\r\n\t\t\tclass=\"alert alert-warning d-flex align-items-center\"\r\n\t\t\tstyle=\"margin-top: 16px;border:1px solid rgb(243, 124, 44)\">\r\n\t\t\t<mat-icon style=\"margin-right: 10px !important;\">error_outline</mat-icon>\r\n\t\t\t<div>\r\n\t\t\t\tIf you select this channel, keep in mind that the message might not be delivered to\r\n\t\t\t\tall selected customers. This is because the customer must have had a conversation\r\n\t\t\t\tpreviously with BSP.\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<ng-container *ngIf=\"getIsText\">\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n\t\t\t\t<mat-select matSelectInfiniteScroll\r\n\t\t\t\t\tformControlName=\"from\"\r\n\t\t\t\t\tplaceholder=\"Select from\"\r\n\t\t\t\t\t[complete]=\"isHaveNextAccountOption === false\"\r\n\t\t\t\t\t[compareWith]=\"accountSelectedDisplay\"\r\n\t\t\t\t\t(infiniteScroll)=\"getNextAccountBatch()\">\r\n\t\t\t\t\t<div style=\"margin: 20px\">\r\n\t\t\t\t\t\t<lib-search [placeholder]=\"'Search'\"\r\n\t\t\t\t\t\t\t[currentValue]=\"form?.get('from').value?.name\"\r\n\t\t\t\t\t\t\t(searchRes)=\"updateSearchAccount($event)\"></lib-search>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name + ' (' + option.accountNo + ')' }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t<mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.from\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('from').touched \r\n\t\t\t\t\t\t&& form.get('from').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">Text</mat-label>\r\n\r\n\t\t\t\t<textarea matInput\r\n\t\t\t\t\trows=\"6\"\r\n\t\t\t\t\tcols=\"50\"\r\n\t\t\t\t\tcdkTextareaAutosize\r\n\t\t\t\t\tcdkAutosizeMinRows=\"2\"\r\n\t\t\t\t\tcdkAutosizeMaxRows=\"15\"\r\n\t\t\t\t\tformControlName=\"text\"\r\n\t\t\t\t\tplaceholder=\"Enter text\"\r\n\t\t\t\t\t#autosize=\"cdkTextareaAutosize\"></textarea>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.text\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('text').touched \r\n\t\t\t\t\t\t&& form.get('text').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\t</ng-container>\r\n\r\n\t<ng-container *ngIf=\"getIsMedia\">\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">Media Type</mat-label>\r\n\r\n\t\t\t\t<mat-select placeholder=\"Select media type\"\r\n\t\t\t\t\tformControlName=\"media\"\r\n\t\t\t\t\t(selectionChange)=\"updateMediaType($event.value)\">\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of mediaTypeOption\"\r\n\t\t\t\t\t\t[value]=\"option.code\">\r\n\t\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.media\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('media').touched \r\n\t\t\t\t\t\t&& form.get('media').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n\t\t\t\t<mat-select matSelectInfiniteScroll\r\n\t\t\t\t\tformControlName=\"from\"\r\n\t\t\t\t\tplaceholder=\"Select from\"\r\n\t\t\t\t\t[complete]=\"isHaveNextAccountOption === false\"\r\n\t\t\t\t\t[compareWith]=\"accountSelectedDisplay\"\r\n\t\t\t\t\t(infiniteScroll)=\"getNextAccountBatch()\">\r\n\t\t\t\t\t<div style=\"margin: 20px\">\r\n\t\t\t\t\t\t<lib-search [placeholder]=\"'Search'\"\r\n\t\t\t\t\t\t\t[currentValue]=\"form?.get('from').value?.name\"\r\n\t\t\t\t\t\t\t(searchRes)=\"updateSearchAccount($event)\"></lib-search>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name + ' (' + option.accountNo + ')' }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t<mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.from\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('from').touched \r\n\t\t\t\t\t\t&& form.get('from').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<ng-container *ngIf=\"form.get('media').value?.toLowerCase() !== 'location'\">\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tautocomplete=\"off\"\r\n\t\t\t\t\t\t(click)=\"filePicker.click()\"\r\n\t\t\t\t\t\tformControlName=\"fileName\">\r\n\r\n\t\t\t\t\t<button mat-button\r\n\t\t\t\t\t\tmatSuffix\r\n\t\t\t\t\t\tmat-icon-button\r\n\t\t\t\t\t\taria-label=\"Choose File\"\r\n\t\t\t\t\t\t(click)=\"filePicker.click()\">\r\n\t\t\t\t\t\t<mat-icon>attach_file</mat-icon>\r\n\t\t\t\t\t</button>\r\n\r\n\t\t\t\t\t<input #filePicker\r\n\t\t\t\t\t\thidden\r\n\t\t\t\t\t\ttype=\"file\"\r\n\t\t\t\t\t\t[accept]=\"extFileAccepted\"\r\n\t\t\t\t\t\t(change)=\"onFileSelected($event)\" />\r\n\t\t\t\t</mat-form-field>\r\n\r\n\t\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t\t*ngFor=\"let validation of validationMessages.fileName\">\r\n\t\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t\t*ngIf=\"form.get('fileName').touched \r\n\t\t\t\t\t\t\t&& form.get('fileName').hasError(validation.type)\">\r\n\t\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t\t</p>\r\n\t\t\t\t</mat-error>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\r\n\t\t<ng-container *ngIf=\"form.get('media').value?.toLowerCase() === 'location'\">\r\n\t\t\t<div class=\"w-100\">\r\n\t\t\t\t<h4 class=\"asterix--after\">Location</h4>\r\n\r\n\t\t\t\t<div class=\"w-100\">\r\n\t\t\t\t\t<agm-map style=\"width:100%; height:400px;\"\r\n\t\t\t\t\t\t[latitude]=\"maps.latitude\"\r\n\t\t\t\t\t\t[longitude]=\"maps.longitude\"\r\n\t\t\t\t\t\t[disableDoubleClickZoom]=\"maps.isDoubleClickZoom\"\r\n\t\t\t\t\t\t[zoom]=\"maps.zoom\">\r\n\t\t\t\t\t\t<agm-marker [latitude]=\"maps.latitude\"\r\n\t\t\t\t\t\t\t[longitude]=\"maps.longitude\"\r\n\t\t\t\t\t\t\t[markerDraggable]=\"maps.isDraggable\"\r\n\t\t\t\t\t\t\t(dragEnd)=\"markerDragEnd($event)\"></agm-marker>\r\n\t\t\t\t\t</agm-map>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t\t<mat-label>Location</mat-label>\r\n\r\n\t\t\t\t\t\t<input #mapSearch\r\n\t\t\t\t\t\t\tmatInput\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\tmaxlength=\"100\"\r\n\t\t\t\t\t\t\tplaceholder=\"Enter location here\">\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\r\n\t<ng-container *ngIf=\"getIsTemplate\">\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n\t\t\t\t<mat-select matSelectInfiniteScroll\r\n\t\t\t\t\tformControlName=\"from\"\r\n\t\t\t\t\tplaceholder=\"Select from\"\r\n\t\t\t\t\t[complete]=\"isHaveNextAccountOption === false\"\r\n\t\t\t\t\t[compareWith]=\"accountSelectedDisplay\"\r\n\t\t\t\t\t(infiniteScroll)=\"getNextAccountBatch()\"\r\n\t\t\t\t\t(selectionChange)=\"getTemplateOptionService($event.value)\">\r\n\t\t\t\t\t<div style=\"margin: 20px\">\r\n\t\t\t\t\t\t<lib-search [placeholder]=\"'Search'\"\r\n\t\t\t\t\t\t\t[currentValue]=\"form?.get('from').value?.name\"\r\n\t\t\t\t\t\t\t(searchRes)=\"updateSearchAccount($event)\"></lib-search>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name + ' (' + option.accountNo + ')' }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t<mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.from\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('from').touched \r\n\t\t\t\t\t\t&& form.get('from').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">Template</mat-label>\r\n\r\n\t\t\t\t<mat-select matSelectInfiniteScroll\r\n\t\t\t\t\tformControlName=\"template\"\r\n\t\t\t\t\tplaceholder=\"Select template\"\r\n\t\t\t\t\t[complete]=\"isHaveNextTemplateOption === false\"\r\n\t\t\t\t\t[compareWith]=\"templateSelectedDisplay\"\r\n\t\t\t\t\t(infiniteScroll)=\"getNextTemplateBatch()\"\r\n\t\t\t\t\t(selectionChange)=\"updateTemplate($event.value)\">\r\n\t\t\t\t\t<div style=\"margin: 20px\">\r\n\t\t\t\t\t\t<lib-search [placeholder]=\"'Search'\"\r\n\t\t\t\t\t\t\t[currentValue]=\"form?.get('template').value?.name\"\r\n\t\t\t\t\t\t\t(searchRes)=\"updateSearch($event)\"></lib-search>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of templateOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t<mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.template\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('template').touched \r\n\t\t\t\t\t\t&& form.get('template').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div *ngIf=\"isHaveTemplateParam\"\r\n\t\t\tclass=\"d-flex justify-content-end\">\r\n\t\t\t<mat-checkbox labelPosition=\"before\"\r\n\t\t\t\tformControlName=\"isUpload\"\r\n\t\t\t\t(change)=\"updateDownloadCSV($event.checked)\">\r\n\t\t\t\tUsing Download XLSX\r\n\t\t\t</mat-checkbox>\r\n\t\t</div>\r\n\r\n\t\t<ng-container *ngIf=\"!form.get('isUpload').value\">\r\n\t\t\t<div *ngIf=\"form.get('template').value?.category === 'AUTHENTICATION'\"\r\n\t\t\t\tclass=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label> OTP Value </mat-label>\r\n\r\n\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tformControlName=\"otpValue\">\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</div>\r\n\r\n\t\t\t<ng-container *ngIf=\"getParamHeader?.length > 0\">\r\n\t\t\t\t<p class=\"font-16px font-PoppinsBold\">Header Parameter</p>\r\n\r\n\t\t\t\t<div *ngFor=\"\r\n\t\t\t\t\tlet param of getParamHeader;\r\n\t\t\t\t\tlet paramHeaderIndex = index\r\n\t\t\t\t\"\r\n\t\t\t\t\tclass=\"form-group\">\r\n\t\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t\t<mat-label>Parameter {{ paramHeaderIndex + 1 }}</mat-label>\r\n\r\n\t\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\t[placeholder]=\"'Parameter ' + (paramHeaderIndex + 1)\"\r\n\t\t\t\t\t\t\t[formControl]=\"param.get('name')\" />\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t</div>\r\n\t\t\t</ng-container>\r\n\r\n\t\t\t<ng-container *ngIf=\"getParamBody?.length > 0\">\r\n\t\t\t\t<p class=\"font-16px font-PoppinsBold mt-3\">Body Parameter</p>\r\n\r\n\t\t\t\t<div *ngFor=\"\r\n\t\t\t\t\t\tlet param of getParamBody;\r\n\t\t\t\t\t\tlet paramBodyIndex = index\r\n\t\t\t\t\t\"\r\n\t\t\t\t\tclass=\"form-group\">\r\n\t\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t\t<mat-label>Parameter {{ paramBodyIndex + 1 }}</mat-label>\r\n\r\n\t\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\t[placeholder]=\"'Parameter ' + (paramBodyIndex + 1)\"\r\n\t\t\t\t\t\t\t[formControl]=\"param.get('name')\" />\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t</div>\r\n\t\t\t</ng-container>\r\n\r\n\t\t\t<ng-container *ngIf=\"isShowParameter\">\r\n\t\t\t\t<p class=\"font-16px font-PoppinsBold mt-3\">Button Parameter</p>\r\n\r\n\t\t\t\t<ng-container *ngFor=\"let button of getButton; let buttonIndex = index\">\r\n\t\t\t\t\t<ng-container *ngIf=\"getParamButton(buttonIndex)?.length > 0\">\r\n\t\t\t\t\t\t<p class=\"font-14px font-PoppinsBold mt-3\">Button {{ buttonIndex + 1 }}</p>\r\n\r\n\t\t\t\t\t\t<div *ngFor=\"let param of getParamButton(buttonIndex); let paramIndex = index\"\r\n\t\t\t\t\t\t\tclass=\"form-group\">\r\n\t\t\t\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t\t\t\t<mat-label>Parameter {{ paramIndex + 1 }}</mat-label>\r\n\r\n\t\t\t\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\t\t\t[placeholder]=\"'Parameter ' + (paramIndex + 1)\"\r\n\t\t\t\t\t\t\t\t\t[formControl]=\"param.get('name')\" />\r\n\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"['image','video','document'].includes(form.get('template').value?.header?.type?.toLowerCase())\">\r\n\t\t\t<p class=\"font-16px font-PoppinsBold mt-3\">File</p>\r\n\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tautocomplete=\"off\"\r\n\t\t\t\t\t\t(click)=\"filePicker.click()\"\r\n\t\t\t\t\t\tformControlName=\"fileName\">\r\n\r\n\t\t\t\t\t<button mat-button\r\n\t\t\t\t\t\tmatSuffix\r\n\t\t\t\t\t\tmat-icon-button\r\n\t\t\t\t\t\taria-label=\"Choose File\"\r\n\t\t\t\t\t\t(click)=\"filePicker.click()\">\r\n\t\t\t\t\t\t<mat-icon>attach_file</mat-icon>\r\n\t\t\t\t\t</button>\r\n\r\n\t\t\t\t\t<input #filePicker\r\n\t\t\t\t\t\thidden\r\n\t\t\t\t\t\ttype=\"file\"\r\n\t\t\t\t\t\t[accept]=\"extFileAccepted\"\r\n\t\t\t\t\t\t(change)=\"onFileSelected($event)\" />\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\r\n\t<ng-container *ngIf=\"getIsCatalogue\">\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n\t\t\t\t<mat-select matSelectInfiniteScroll\r\n\t\t\t\t\tformControlName=\"from\"\r\n\t\t\t\t\tplaceholder=\"Select from\"\r\n\t\t\t\t\t[complete]=\"isHaveNextAccountOption === false\"\r\n\t\t\t\t\t[compareWith]=\"accountSelectedDisplay\"\r\n\t\t\t\t\t(infiniteScroll)=\"getNextAccountBatch()\">\r\n\t\t\t\t\t<div style=\"margin: 20px\">\r\n\t\t\t\t\t\t<lib-search [placeholder]=\"'Search'\"\r\n\t\t\t\t\t\t\t[currentValue]=\"form?.get('from').value?.name\"\r\n\t\t\t\t\t\t\t(searchRes)=\"updateSearchAccount($event)\"></lib-search>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name + ' (' + option.accountNo + ')' }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t<mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.from\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('from').touched \r\n\t\t\t\t\t\t&& form.get('from').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">Category</mat-label>\r\n\r\n\t\t\t\t<mat-select formControlName=\"category\"\r\n\t\t\t\t\tplaceholder=\"Select category\">\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of categoryOption\"\r\n\t\t\t\t\t\t[value]=\"option.value\">\r\n\t\t\t\t\t\t{{ option.label }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.category\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('category').touched \r\n\t\t\t\t\t\t&& form.get('category').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\tclass=\"w-100\"\r\n\t\t\t\tstyle=\"margin-bottom: 20;\">\r\n\t\t\t\t<mat-label class=\"asterix--after\">Catalog</mat-label>\r\n\r\n\t\t\t\t<mat-select formControlName=\"catalogue\"\r\n\t\t\t\t\tplaceholder=\"Select catalog\">\r\n\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t\t</mat-option>\r\n\t\t\t\t</mat-select>\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t*ngFor=\"let validation of validationMessages.catalogue\">\r\n\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t*ngIf=\"form.get('catalogue').touched \r\n\t\t\t\t\t\t&& form.get('catalogue').hasError(validation.type)\">\r\n\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t</p>\r\n\t\t\t</mat-error>\r\n\t\t</div>\r\n\r\n\t\t<div *ngIf=\"form.get('category').value === 'product'\"\r\n\t\t\tstyle=\"padding: 8px;border-radius: 8px;border: 1px solid #6177c4;\">\r\n\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label class=\"asterix--after\">Product</mat-label>\r\n\r\n\t\t\t\t\t<mat-select formControlName=\"product\"\r\n\t\t\t\t\t\tplaceholder=\"Select product\">\r\n\t\t\t\t\t\t<mat-option *ngFor=\"let option of accountOption\"\r\n\t\t\t\t\t\t\t[value]=\"option\">\r\n\t\t\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t</mat-select>\r\n\t\t\t\t</mat-form-field>\r\n\r\n\t\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t\t*ngFor=\"let validation of validationMessages.product\">\r\n\t\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t\t*ngIf=\"form.get('product').touched \r\n\t\t\t\t\t\t\t&& form.get('product').hasError(validation.type)\">\r\n\t\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t\t</p>\r\n\t\t\t\t</mat-error>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t<mat-label>Body</mat-label>\r\n\r\n\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tmaxlength=\"100\"\r\n\t\t\t\t\t\tformControlName=\"body\"\r\n\t\t\t\t\t\tplaceholder=\"Enter body\">\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-container>\r\n</form>\r\n",
+            template: "<form autocomplete=\"off\" [formGroup]=\"form\">\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\">Message Type</mat-label>\r\n\r\n            <mat-select placeholder=\"Select message type\" formControlName=\"channel\">\r\n                <mat-option\r\n                    *ngFor=\"let option of msgTypeWAOption\"\r\n                    [value]=\"option.code\"\r\n                    (click)=\"formReset()\"\r\n                >\r\n                    {{ option.name }}\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.channel\">\r\n            <p\r\n                class=\"font-12px mb-0\"\r\n                *ngIf=\"\r\n                    form.get('channel')?.touched && form.get('channel')?.hasError(validation.type)\r\n                \"\r\n            >\r\n                {{ validation.message }}\r\n            </p>\r\n        </mat-error>\r\n\r\n        <div\r\n            *ngIf=\"!getIsTemplate\"\r\n            role=\"alert\"\r\n            class=\"alert alert-warning d-flex align-items-center\"\r\n            style=\"margin-top: 16px; border: 1px solid rgb(243, 124, 44)\"\r\n        >\r\n            <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n            <div>\r\n                If you select this channel, keep in mind that the message might not be delivered to\r\n                all selected customers. This is because the customer must have had a conversation\r\n                previously with BSP.\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"getIsText\">\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"from\"\r\n                    placeholder=\"Select from\"\r\n                    [complete]=\"isHaveNextAccountOption === false\"\r\n                    [compareWith]=\"accountSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextAccountBatch()\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('from').value?.name\"\r\n                            (searchRes)=\"updateSearchAccount($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name + ' (' + option.accountNo + ')' }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <div class=\"form-group\">\r\n            <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n                <mat-label class=\"asterix--after\">Text</mat-label>\r\n\r\n                <textarea\r\n                    matInput\r\n                    rows=\"6\"\r\n                    cols=\"50\"\r\n                    cdkTextareaAutosize\r\n                    cdkAutosizeMinRows=\"2\"\r\n                    cdkAutosizeMaxRows=\"15\"\r\n                    formControlName=\"text\"\r\n                    placeholder=\"Enter text\"\r\n                    #autosize=\"cdkTextareaAutosize\"\r\n                ></textarea>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('text')?.touched && form.get('text')?.hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"getIsMedia\">\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\">Media Type</mat-label>\r\n\r\n                <mat-select\r\n                    placeholder=\"Select media type\"\r\n                    formControlName=\"media\"\r\n                    (selectionChange)=\"updateMediaType($event.value)\"\r\n                >\r\n                    <mat-option *ngFor=\"let option of mediaTypeOption\" [value]=\"option.code\">\r\n                        {{ option.name }}\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.media\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('media').touched && form.get('media').hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"from\"\r\n                    placeholder=\"Select from\"\r\n                    [complete]=\"isHaveNextAccountOption === false\"\r\n                    [compareWith]=\"accountSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextAccountBatch()\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('from').value?.name\"\r\n                            (searchRes)=\"updateSearchAccount($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name + ' (' + option.accountNo + ')' }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('from').touched && form.get('from').hasError(validation.type)\"\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('media').value?.toLowerCase() !== 'location'\">\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n                    <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n                    <input\r\n                        matInput\r\n                        type=\"text\"\r\n                        autocomplete=\"off\"\r\n                        (click)=\"filePicker.click()\"\r\n                        formControlName=\"fileName\"\r\n                    />\r\n\r\n                    <button\r\n                        mat-button\r\n                        matSuffix\r\n                        mat-icon-button\r\n                        aria-label=\"Choose File\"\r\n                        (click)=\"filePicker.click()\"\r\n                    >\r\n                        <mat-icon>attach_file</mat-icon>\r\n                    </button>\r\n\r\n                    <input\r\n                        #filePicker\r\n                        hidden\r\n                        type=\"file\"\r\n                        [accept]=\"extFileAccepted\"\r\n                        (change)=\"onFileSelected($event)\"\r\n                    />\r\n                </mat-form-field>\r\n\r\n                <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.fileName\">\r\n                    <p\r\n                        class=\"font-12px mb-0\"\r\n                        *ngIf=\"\r\n                            form.get('fileName').touched &&\r\n                            form.get('fileName').hasError(validation.type)\r\n                        \"\r\n                    >\r\n                        {{ validation.message }}\r\n                    </p>\r\n                </mat-error>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"form.get('media').value?.toLowerCase() === 'location'\">\r\n            <div class=\"w-100\">\r\n                <h4 class=\"asterix--after\">Location</h4>\r\n\r\n                <div class=\"w-100\">\r\n                    <agm-map\r\n                        style=\"width: 100%; height: 400px\"\r\n                        [latitude]=\"maps.latitude\"\r\n                        [longitude]=\"maps.longitude\"\r\n                        [disableDoubleClickZoom]=\"maps.isDoubleClickZoom\"\r\n                        [zoom]=\"maps.zoom\"\r\n                    >\r\n                        <agm-marker\r\n                            [latitude]=\"maps.latitude\"\r\n                            [longitude]=\"maps.longitude\"\r\n                            [markerDraggable]=\"maps.isDraggable\"\r\n                            (dragEnd)=\"markerDragEnd($event)\"\r\n                        ></agm-marker>\r\n                    </agm-map>\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>Location</mat-label>\r\n\r\n                        <input\r\n                            #mapSearch\r\n                            matInput\r\n                            type=\"text\"\r\n                            maxlength=\"100\"\r\n                            placeholder=\"Enter location here\"\r\n                        />\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"getIsTemplate\">\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"from\"\r\n                    placeholder=\"Select from\"\r\n                    [complete]=\"isHaveNextAccountOption === false\"\r\n                    [compareWith]=\"accountSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextAccountBatch()\"\r\n                    (selectionChange)=\"getTemplateOptionService($event.value)\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('from').value?.name\"\r\n                            (searchRes)=\"updateSearchAccount($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name + ' (' + option.accountNo + ')' }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\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\">Template</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"template\"\r\n                    placeholder=\"Select template\"\r\n                    [complete]=\"isHaveNextTemplateOption === false\"\r\n                    [compareWith]=\"templateSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextTemplateBatch()\"\r\n                    (selectionChange)=\"updateTemplate($event.value)\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('template').value?.name\"\r\n                            (searchRes)=\"updateSearch($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n                        {{ option.name }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"\r\n                        form.get('template')?.touched &&\r\n                        form.get('template')?.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        <div *ngIf=\"isHaveTemplateParam\" class=\"d-flex justify-content-end\">\r\n            <mat-checkbox\r\n                labelPosition=\"before\"\r\n                formControlName=\"isUpload\"\r\n                (change)=\"updateDownloadCSV($event.checked)\"\r\n            >\r\n                Using Download XLSX\r\n            </mat-checkbox>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!form.get('isUpload')?.value\">\r\n            <div\r\n                *ngIf=\"form.get('template')?.value?.category === 'AUTHENTICATION'\"\r\n                class=\"form-group\"\r\n            >\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                    <mat-label> OTP Value </mat-label>\r\n\r\n                    <input matInput type=\"text\" formControlName=\"otpValue\" />\r\n                </mat-form-field>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"getParamHeader?.length > 0\">\r\n                <p class=\"font-16px font-PoppinsBold\">Header Parameter</p>\r\n\r\n                <div\r\n                    *ngFor=\"let param of getParamHeader; let paramHeaderIndex = index\"\r\n                    class=\"form-group\"\r\n                >\r\n                    <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                        <mat-label>Parameter {{ paramHeaderIndex + 1 }}</mat-label>\r\n\r\n                        <input\r\n                            matInput\r\n                            type=\"text\"\r\n                            [placeholder]=\"'Parameter ' + (paramHeaderIndex + 1)\"\r\n                            [formControl]=\"param.get('name')\"\r\n                        />\r\n                    </mat-form-field>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"getParamBody?.length > 0\">\r\n                <p class=\"font-16px font-PoppinsBold mt-3\">Body Parameter</p>\r\n\r\n                <div\r\n                    *ngFor=\"let param of getParamBody; let paramBodyIndex = index\"\r\n                    class=\"form-group\"\r\n                >\r\n                    <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                        <mat-label>Parameter {{ paramBodyIndex + 1 }}</mat-label>\r\n\r\n                        <input\r\n                            matInput\r\n                            type=\"text\"\r\n                            [placeholder]=\"'Parameter ' + (paramBodyIndex + 1)\"\r\n                            [formControl]=\"param.get('name')\"\r\n                        />\r\n                    </mat-form-field>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"isShowParameter\">\r\n                <p class=\"font-16px font-PoppinsBold mt-3\">Button Parameter</p>\r\n\r\n                <ng-container *ngFor=\"let button of getButton; let buttonIndex = index\">\r\n                    <ng-container *ngIf=\"getParamButton(buttonIndex)?.length > 0\">\r\n                        <p class=\"font-14px font-PoppinsBold mt-3\">Button {{ buttonIndex + 1 }}</p>\r\n\r\n                        <div\r\n                            *ngFor=\"\r\n                                let param of getParamButton(buttonIndex);\r\n                                let paramIndex = index\r\n                            \"\r\n                            class=\"form-group\"\r\n                        >\r\n                            <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                                <mat-label>Parameter {{ paramIndex + 1 }}</mat-label>\r\n\r\n                                <input\r\n                                    matInput\r\n                                    type=\"text\"\r\n                                    [placeholder]=\"'Parameter ' + (paramIndex + 1)\"\r\n                                    [formControl]=\"param.get('name')\"\r\n                                />\r\n                            </mat-form-field>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container\r\n            *ngIf=\"\r\n                ['image', 'video', 'document'].includes(\r\n                    form.get('template')?.value?.header?.type?.toLowerCase()\r\n                )\r\n            \"\r\n        >\r\n            <p class=\"font-16px font-PoppinsBold mt-3\">File</p>\r\n\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n                    <mat-label class=\"asterix--after\">File</mat-label>\r\n\r\n                    <input\r\n                        matInput\r\n                        type=\"text\"\r\n                        autocomplete=\"off\"\r\n                        (click)=\"filePicker.click()\"\r\n                        formControlName=\"fileName\"\r\n                    />\r\n\r\n                    <button\r\n                        mat-button\r\n                        matSuffix\r\n                        mat-icon-button\r\n                        aria-label=\"Choose File\"\r\n                        (click)=\"filePicker.click()\"\r\n                    >\r\n                        <mat-icon>attach_file</mat-icon>\r\n                    </button>\r\n\r\n                    <input\r\n                        #filePicker\r\n                        hidden\r\n                        type=\"file\"\r\n                        [accept]=\"extFileAccepted\"\r\n                        (change)=\"onFileSelected($event)\"\r\n                    />\r\n                </mat-form-field>\r\n            </div>\r\n        </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"getIsCatalogue\">\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"from\"\r\n                    placeholder=\"Select from\"\r\n                    [complete]=\"isHaveNextAccountOption === false\"\r\n                    [compareWith]=\"accountSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextAccountBatch()\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('from').value?.name\"\r\n                            (searchRes)=\"updateSearchAccount($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name + ' (' + option.accountNo + ')' }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\r\n                >\r\n                    {{ validation.message }}\r\n                </p>\r\n            </mat-error>\r\n        </div>\r\n\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">Category</mat-label>\r\n\r\n                <mat-select formControlName=\"category\" placeholder=\"Select category\">\r\n                    <mat-option *ngFor=\"let option of categoryOption\" [value]=\"option.value\">\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.category\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"\r\n                        form.get('category')?.touched &&\r\n                        form.get('category')?.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        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">Catalog</mat-label>\r\n\r\n                <mat-select formControlName=\"catalogue\" placeholder=\"Select catalog\">\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name }}\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.catalogue\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"\r\n                        form.get('catalogue')?.touched &&\r\n                        form.get('catalogue')?.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        <div\r\n            *ngIf=\"form.get('category')?.value === 'product'\"\r\n            style=\"padding: 8px; border-radius: 8px; border: 1px solid #6177c4\"\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\">Product</mat-label>\r\n\r\n                    <mat-select formControlName=\"product\" placeholder=\"Select product\">\r\n                        <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                            {{ option.name }}\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.product\">\r\n                    <p\r\n                        class=\"font-12px mb-0\"\r\n                        *ngIf=\"\r\n                            form.get('product')?.touched &&\r\n                            form.get('product')?.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            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n                    <mat-label>Body</mat-label>\r\n\r\n                    <input\r\n                        matInput\r\n                        type=\"text\"\r\n                        maxlength=\"100\"\r\n                        formControlName=\"body\"\r\n                        placeholder=\"Enter body\"\r\n                    />\r\n                </mat-form-field>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"getIsUtility\">\r\n        <div style=\"display: grid; gap: 0.5rem\">\r\n            <mat-label class=\"asterix--after\">Template</mat-label>\r\n            <mat-radio-group\r\n                style=\"display: flex; gap: 0.5rem; flex-wrap: wrap\"\r\n                formControlName=\"isUseExistingTemplate\"\r\n                (change)=\"handleChangeTemplate($event.value)\"\r\n            >\r\n                <mat-radio-button\r\n                    [value]=\"option.value\"\r\n                    *ngFor=\"let option of templates\"\r\n                    color=\"primary\"\r\n                >\r\n                    {{ option.label }}\r\n                </mat-radio-button>\r\n            </mat-radio-group>\r\n        </div>\r\n\r\n        <div class=\"form-group\">\r\n            <mat-form-field\r\n                appearance=\"outline\"\r\n                floatLabel=\"always\"\r\n                class=\"w-100\"\r\n                style=\"margin-bottom: 20\"\r\n            >\r\n                <mat-label class=\"asterix--after\">From</mat-label>\r\n\r\n                <mat-select\r\n                    matSelectInfiniteScroll\r\n                    formControlName=\"from\"\r\n                    placeholder=\"Select from\"\r\n                    [complete]=\"isHaveNextAccountOption === false\"\r\n                    [compareWith]=\"accountSelectedDisplay\"\r\n                    (infiniteScroll)=\"getNextAccountBatch()\"\r\n                    (selectionChange)=\"handleChangeFrom($event.value)\"\r\n                >\r\n                    <div style=\"margin: 20px\">\r\n                        <lib-search\r\n                            [placeholder]=\"'Search'\"\r\n                            [currentValue]=\"form?.get('from').value?.name\"\r\n                            (searchRes)=\"updateSearchAccount($event)\"\r\n                        ></lib-search>\r\n                    </div>\r\n\r\n                    <mat-option *ngFor=\"let option of accountOption\" [value]=\"option\">\r\n                        {{ option.name + ' (' + option.accountNo + ')' }}\r\n                    </mat-option>\r\n                    <mat-option *ngIf=\"isLoadingAccountOption\">Loading...</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.from\">\r\n                <p\r\n                    class=\"font-12px mb-0\"\r\n                    *ngIf=\"form.get('from')?.touched && form.get('from')?.hasError(validation.type)\"\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('isUseExistingTemplate')?.value; else existingTmpl\">\r\n            <div\r\n                role=\"alert\"\r\n                class=\"alert alert-warning d-flex align-items-center\"\r\n                style=\"margin-top: 8px; border: 1px solid rgb(243, 124, 44)\"\r\n            >\r\n                <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n                <div>\r\n                    Direct Send access restricted for 30 days due to continued misuse. Final warning\r\n                    before permanent revocation.\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"form-group\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n                    <mat-label class=\"asterix--after\">Body</mat-label>\r\n\r\n                    <textarea\r\n                        matInput\r\n                        rows=\"6\"\r\n                        cols=\"50\"\r\n                        cdkTextareaAutosize\r\n                        cdkAutosizeMinRows=\"2\"\r\n                        cdkAutosizeMaxRows=\"15\"\r\n                        formControlName=\"text\"\r\n                        placeholder=\"Enter text\"\r\n                        #autosize=\"cdkTextareaAutosize\"\r\n                    ></textarea>\r\n                </mat-form-field>\r\n\r\n                <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.text\">\r\n                    <p\r\n                        class=\"font-12px mb-0\"\r\n                        *ngIf=\"\r\n                            form.get('text').touched && form.get('text').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            <div class=\"form-group\">\r\n                <app-input\r\n                    type=\"numeric\"\r\n                    formControlName=\"ttl\"\r\n                    label=\"TTL\"\r\n                    placeholder=\"Enter ttl\"\r\n                    [trimLeadingZeros]=\"true\"\r\n                ></app-input>\r\n            </div>\r\n\r\n            <div *ngIf=\"!isReadOnlyMode\">\r\n                <mat-checkbox formControlName=\"isNeedSave\">\r\n                    Save this message as future template\r\n                </mat-checkbox>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-template #existingTmpl>\r\n            <div\r\n                role=\"alert\"\r\n                class=\"alert alert-warning d-flex align-items-center\"\r\n                style=\"margin-top: 8px; border: 1px solid rgb(243, 124, 44)\"\r\n            >\r\n                <mat-icon style=\"margin-right: 10px !important\">error_outline</mat-icon>\r\n                <div>\r\n                    Direct Send access restricted for 30 days due to continued misuse. Final warning\r\n                    before permanent revocation.\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\">Template</mat-label>\r\n\r\n                    <mat-select\r\n                        matSelectInfiniteScroll\r\n                        formControlName=\"template\"\r\n                        placeholder=\"Select template\"\r\n                        [complete]=\"isHaveNextTemplateOption === false\"\r\n                        [compareWith]=\"templateSelectedDisplay\"\r\n                        (infiniteScroll)=\"getNextTemplateBatch()\"\r\n                        (selectionChange)=\"updateTemplate($event.value)\"\r\n                    >\r\n                        <div style=\"margin: 20px\">\r\n                            <lib-search\r\n                                [placeholder]=\"'Search'\"\r\n                                [currentValue]=\"form?.get('template').value?.name\"\r\n                                (searchRes)=\"updateSearch($event)\"\r\n                            ></lib-search>\r\n                        </div>\r\n\r\n                        <mat-option *ngFor=\"let option of templateOption\" [value]=\"option\">\r\n                            {{ option.name }}\r\n                        </mat-option>\r\n                        <mat-option *ngIf=\"isLoadingTemplateOption\">Loading...</mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n\r\n                <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.template\">\r\n                    <p\r\n                        class=\"font-12px mb-0\"\r\n                        *ngIf=\"\r\n                            form.get('template')?.touched &&\r\n                            form.get('template')?.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            <div class=\"form-group\">\r\n                <app-input\r\n                    type=\"numeric\"\r\n                    formControlName=\"ttl\"\r\n                    label=\"TTL\"\r\n                    placeholder=\"Enter ttl\"\r\n                    [trimLeadingZeros]=\"true\"\r\n                ></app-input>\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n</form>\r\n",
             styles: [".asterix--after:after{content:\"*\";color:red}"]
         })
     ], GeneralInformationWAComponent);
@@ -4552,7 +4814,7 @@ var FailoverMechanismComponent = /** @class */ (function () {
     FailoverMechanismComponent.prototype.initForm = function () {
         var _this = this;
         this.form = new FormGroup({
-            active: new FormControl(false, Validators.required),
+            active: new FormControl(false, Validators$1.required),
             type: new FormControl(''),
             interval: new FormControl(null),
             accounts: new FormArray([]),
@@ -4602,7 +4864,7 @@ var FailoverMechanismComponent = /** @class */ (function () {
                     }
                     : (_g = (_f = data) === null || _f === void 0 ? void 0 : _f.accountId, (_g !== null && _g !== void 0 ? _g : '')),
                 disabled: this.isReadOnlyMode,
-            }, Validators.required),
+            }, Validators$1.required),
             accountName: new FormControl((_j = (_h = data) === null || _h === void 0 ? void 0 : _h.accountName, (_j !== null && _j !== void 0 ? _j : ''))),
             subject: new FormControl({
                 value: (_l = (_k = data) === null || _k === void 0 ? void 0 : _k.subject, (_l !== null && _l !== void 0 ? _l : '')),
@@ -4634,7 +4896,7 @@ var FailoverMechanismComponent = /** @class */ (function () {
     };
     FailoverMechanismComponent.prototype.initParameter = function () {
         var form = new FormGroup({
-            name: new FormControl('', Validators.required),
+            name: new FormControl('', Validators$1.required),
         });
         return form;
     };
@@ -4742,7 +5004,7 @@ var FailoverMechanismComponent = /** @class */ (function () {
         this.form
             .get('type')
             .setValue((_c = (_b = (_a = this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.failover) === null || _b === void 0 ? void 0 : _b.type, (_c !== null && _c !== void 0 ? _c : '')));
-        this.form.get('type').setValidators(Validators.required);
+        this.form.get('type').setValidators(Validators$1.required);
         this.form.get('type').updateValueAndValidity();
         if (_active) {
             var accounts_1 = (_f = (_e = (_d = this.getCampaignStorage) === null || _d === void 0 ? void 0 : _d.failover) === null || _e === void 0 ? void 0 : _e.accounts) === null || _f === void 0 ? void 0 : _f.filter(function (t) {
@@ -4780,7 +5042,7 @@ var FailoverMechanismComponent = /** @class */ (function () {
                 .setValue((_c = (_b = (_a = this.getCampaignStorage) === null || _a === void 0 ? void 0 : _a.failover) === null || _b === void 0 ? void 0 : _b.interval, (_c !== null && _c !== void 0 ? _c : null)));
             this.form
                 .get('interval')
-                .setValidators([Validators.required, intervalTimeValidator()]);
+                .setValidators([Validators$1.required, intervalTimeValidator()]);
             this.form.get('interval').updateValueAndValidity();
             return;
         }
@@ -4795,9 +5057,9 @@ var FailoverMechanismComponent = /** @class */ (function () {
         var isChooseAccount = this.getAccount.filter(function (control) { return control.get('accountId').value; });
         this.getAccount.forEach(function (control) {
             var _a;
-            control.get('accountId').setValidators(Validators.required);
-            control.get('subject').setValidators(Validators.required);
-            control.get('template').setValidators(Validators.required);
+            control.get('accountId').setValidators(Validators$1.required);
+            control.get('subject').setValidators(Validators$1.required);
+            control.get('template').setValidators(Validators$1.required);
             if (!control.get('accountId').value &&
                 ((_a = isChooseAccount) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                 control.get('accountId').clearValidators();
@@ -4906,10 +5168,10 @@ var GeneralInformationComponent = /** @class */ (function () {
         this.form = new FormGroup({
             id: new FormControl(null),
             campaignName: new FormControl(null, [
-                Validators.required,
-                Validators.maxLength(100),
+                Validators$1.required,
+                Validators$1.maxLength(100),
             ]),
-            medium: new FormControl(null, [Validators.required]),
+            medium: new FormControl(null, [Validators$1.required]),
         });
         this.form.valueChanges.subscribe(function () {
             _this.isTouchedWAForm = !_this.isTouchedWAForm;
@@ -5067,8 +5329,8 @@ var GeneralInformationComponent = /** @class */ (function () {
     GeneralInformationComponent = __decorate([
         Component({
             selector: 'lib-new-campaign-general-information',
-            template: "<form autocomplete=\"off\"\r\n\t[formGroup]=\"form\">\r\n\t<div class=\"campaign-info\">\r\n\t\t<div class=\"campaign-info-child\">\r\n\t\t\t<mat-card>\r\n\t\t\t\t<mat-card-content>\r\n\t\t\t\t\t<h3 class=\"font-22px font-PoppinsBold mb-4\">General Information</h3>\r\n\r\n\t\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t\t\t<mat-label class=\"asterix--after\">Broadcast Name</mat-label>\r\n\r\n\t\t\t\t\t\t\t<input matInput\r\n\t\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\t\tformControlName=\"campaignName\"\r\n\t\t\t\t\t\t\t\tplaceholder=\"Enter Broadcast name\">\r\n\r\n\t\t\t\t\t\t</mat-form-field>\r\n\r\n\t\t\t\t\t\t<div class=\"d-flex justify-content-between align-items-center w-100\">\r\n\t\t\t\t\t\t\t<mat-hint align=\"start\">\r\n\t\t\t\t\t\t\t\t{{form.get('campaignName').value?.length || 0}}/100\r\n\t\t\t\t\t\t\t</mat-hint>\r\n\r\n\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t\t\t\t\t\t*ngFor=\"let validation of validationMessages.campaignName\">\r\n\t\t\t\t\t\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"form.get('campaignName').touched\r\n\t\t\t\t\t\t\t\t\t\t&& form.get('campaignName').hasError(validation.type)\">\r\n\t\t\t\t\t\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t</mat-error>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t\t<mat-form-field appearance=\"outline\"\r\n\t\t\t\t\t\t\tfloatLabel=\"always\"\r\n\t\t\t\t\t\t\tclass=\"w-100\">\r\n\t\t\t\t\t\t\t<mat-label class=\"asterix--after\">Channel</mat-label>\r\n\r\n\t\t\t\t\t\t\t<mat-select placeholder=\"Select channel\"\r\n\t\t\t\t\t\t\t\tformControlName=\"medium\">\r\n\t\t\t\t\t\t\t\t<mat-option *ngFor=\"let option of channelOption\"\r\n\t\t\t\t\t\t\t\t\t[value]=\"option.value\">\r\n\t\t\t\t\t\t\t\t\t{{ option.label }}\r\n\t\t\t\t\t\t\t\t</mat-option>\r\n\t\t\t\t\t\t\t</mat-select>\r\n\t\t\t\t\t\t</mat-form-field>\r\n\r\n\t\t\t\t\t\t<mat-error align=\"end\"\r\n\t\t\t\t\t\t\t*ngFor=\"let validation of validationMessages.medium\">\r\n\t\t\t\t\t\t\t<p class=\"font-12px mb-0\"\r\n\t\t\t\t\t\t\t\t*ngIf=\"form.get('medium').touched\r\n\t\t\t\t\t\t\t\t\t\t&& form.get('medium').hasError(validation.type)\">\r\n\t\t\t\t\t\t\t\t{{ validation.message }}\r\n\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t</mat-error>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<ng-container *ngIf=\"form.get('medium').value === 'WA'\">\r\n\t\t\t\t\t\t<lib-general-information-wa [isTouchedForm]=\"isTouchedWAForm\"\r\n\t\t\t\t\t\t\t[isReadOnlyMode]=\"isReadOnlyMode\"\r\n\t\t\t\t\t\t\t(updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"></lib-general-information-wa>\r\n\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t<ng-container *ngIf=\"form.get('medium').value === 'LINE'\">\r\n\t\t\t\t\t\t<lib-general-information-line [isTouchedForm]=\"isTouchedSMSForm\"\r\n\t\t\t\t\t\t\t[isReadOnlyMode]=\"isReadOnlyMode\"\r\n\t\t\t\t\t\t\t(updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"></lib-general-information-line>\r\n\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t<ng-container *ngIf=\"form.get('medium').value === 'SMS'\">\r\n\t\t\t\t\t\t<lib-general-information-sms [isTouchedForm]=\"isTouchedSMSForm\"\r\n\t\t\t\t\t\t\t[isReadOnlyMode]=\"isReadOnlyMode\"\r\n\t\t\t\t\t\t\t(updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"></lib-general-information-sms>\r\n\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t<ng-container *ngIf=\"form.get('medium').value === 'EMAIL'\">\r\n\t\t\t\t\t\t<lib-general-information-email [isTouchedForm]=\"isTouchedEmailForm\"\r\n\t\t\t\t\t\t\t[isReadOnlyMode]=\"isReadOnlyMode\"\r\n\t\t\t\t\t\t\t(updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"></lib-general-information-email>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</mat-card-content>\r\n\t\t\t</mat-card>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"campaign-info-child pl-20px\">\r\n\t\t\t<h3 class=\"font-22px font-PoppinsBold\">Broadcast Content</h3>\r\n\r\n\t\t\t<div\r\n\t\t\t\t[ngClass]=\"form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL' ? 'campaign-border-preview' : 'campaign-preview'\">\r\n\t\t\t\t<section *ngIf=\"form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\">\r\n\t\t\t\t\t<p *ngIf=\"getBody\"\r\n\t\t\t\t\t\tclass=\"body my-2\"\r\n\t\t\t\t\t\tstyle=\"max-width: 500px;word-wrap: break-word;\"\r\n\t\t\t\t\t\t[innerHTML]=\"getBody\"></p>\r\n\t\t\t\t</section>\r\n\r\n\t\t\t\t<section *ngIf=\"form.get('medium').value === 'WA'\"\r\n\t\t\t\t\tclass=\"campaign-preview__wa\">\r\n\t\t\t\t\t<div class=\"header-preview\">\r\n\t\t\t\t\t\t<div class=\"heading\">\r\n\t\t\t\t\t\t\t{{ getHeader }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"body-preview\">\r\n\t\t\t\t\t\t<section *ngIf=\"getBody || getMedia || displayFile\">\r\n\t\t\t\t\t\t\t<div class=\"chat\"\r\n\t\t\t\t\t\t\t\t[ngClass]=\"{'no-bottom-border': getTemplate?.buttons?.length > 0}\">\r\n\t\t\t\t\t\t\t\t<img *ngIf=\"(getMedia === 'IMAGE' || getTemplate?.header?.type?.toLowerCase() === 'image') && displayFile\"\r\n\t\t\t\t\t\t\t\t\tstyle=\"max-width: 100%;\"\r\n\t\t\t\t\t\t\t\t\talt=\"image\"\r\n\t\t\t\t\t\t\t\t\t[src]=\"displayFile\" />\r\n\r\n\t\t\t\t\t\t\t\t<video\r\n\t\t\t\t\t\t\t\t\t*ngIf=\"(getMedia === 'VIDEO' || getTemplate?.header?.type?.toLowerCase() === 'video') && displayFile\"\r\n\t\t\t\t\t\t\t\t\tid=\"video\"\r\n\t\t\t\t\t\t\t\t\tstyle=\"width: 100%;\"\r\n\t\t\t\t\t\t\t\t\t[src]=\"displayFile\"\r\n\t\t\t\t\t\t\t\t\tcontrols></video>\r\n\r\n\t\t\t\t\t\t\t\t<div *ngIf=\"getMedia === 'DOCUMENT'\"\r\n\t\t\t\t\t\t\t\t\tstyle=\"display: flex;\">\r\n\t\t\t\t\t\t\t\t\t<img style=\"width: 13px; height: 18px;\"\r\n\t\t\t\t\t\t\t\t\t\talt=\"document\"\r\n\t\t\t\t\t\t\t\t\t\tsrc=\"../../../../../assets/images/icon-file.png\">\r\n\r\n\t\t\t\t\t\t\t\t\t<span style=\"margin-left: 10px;\">Document</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"getMedia === 'LOCATION'\">\r\n\t\t\t\t\t\t\t\t\t<agm-map style=\"width:100%;height:200px;\"\r\n\t\t\t\t\t\t\t\t\t\t[disableDefaultUI]=\"true\"\r\n\t\t\t\t\t\t\t\t\t\t[latitude]=\"maps.latitude\"\r\n\t\t\t\t\t\t\t\t\t\t[longitude]=\"maps.longitude\"\r\n\t\t\t\t\t\t\t\t\t\t[zoom]=\"maps.zoom\">\r\n\t\t\t\t\t\t\t\t\t\t<agm-marker [latitude]=\"maps.latitude\"\r\n\t\t\t\t\t\t\t\t\t\t\t[longitude]=\"maps.longitude\"\r\n\t\t\t\t\t\t\t\t\t\t\t[markerDraggable]=\"false\"></agm-marker>\r\n\t\t\t\t\t\t\t\t\t</agm-map>\r\n\t\t\t\t\t\t\t\t\t<a\r\n\t\t\t\t\t\t\t\t\t\t[href]=\"'https://www.google.com/maps/search/?api=1&query='+ maps.latitude + ',' + maps.longitude\">\r\n\t\t\t\t\t\t\t\t\t\thttps://www.google.com/maps/search/?api=1&query={{maps.latitude}},{{maps.longitude}}\r\n\t\t\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t\t<p *ngIf=\"getBody\"\r\n\t\t\t\t\t\t\t\t\tclass=\"body my-2\"\r\n\t\t\t\t\t\t\t\t\t[innerHTML]=\"getBody\"></p>\r\n\r\n\t\t\t\t\t\t\t\t<p *ngIf=\"getTemplate?.footer\"\r\n\t\t\t\t\t\t\t\t\tclass=\"mb-2\"\r\n\t\t\t\t\t\t\t\t\tstyle=\"color: rgb(160, 160, 160);\">\r\n\t\t\t\t\t\t\t\t\t{{ getTemplate.footer }}\r\n\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</section>\r\n\t\t\t\t\t\t<section *ngIf=\"getTemplate?.buttons?.length > 0\">\r\n\t\t\t\t\t\t\t<div *ngFor=\"let button of getTemplateButton\"\r\n\t\t\t\t\t\t\t\tclass=\"params-btn pb-0 pointer\">\r\n\t\t\t\t\t\t\t\t<p class=\"mb-0\">\r\n\t\t\t\t\t\t\t\t\t{{ button?.text || button?.type }}\r\n\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t\t<div *ngIf=\"getTemplate?.buttons?.length > 3\"\r\n\t\t\t\t\t\t\t\tclass=\"params-btn pb-0 pointer\"\r\n\t\t\t\t\t\t\t\t(click)=\"isShowMore = !isShowMore\">\r\n\t\t\t\t\t\t\t\t<p class=\"mb-0\">\r\n\t\t\t\t\t\t\t\t\t<mat-icon>list</mat-icon> See all options\r\n\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</section>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</section>\r\n\r\n\t\t\t\t<section *ngIf=\"form.get('medium').value === 'LINE'\"\r\n\t\t\t\t\tclass=\"campaign-preview__line\">\r\n\t\t\t\t\t<div class=\"header-preview\">\r\n\t\t\t\t\t\t<div class=\"heading\">\r\n\t\t\t\t\t\t\t{{ getHeader }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"body-preview\">\r\n\t\t\t\t\t\t<!-- Template Line Text -->\r\n\t\t\t\t\t\t<section *ngIf=\"isText || !isJSON\"\r\n\t\t\t\t\t\t\tclass=\"chat\">\r\n\t\t\t\t\t\t\t<p class=\"body my-2\"\r\n\t\t\t\t\t\t\t\t[innerHTML]=\"getBody\"></p>\r\n\t\t\t\t\t\t</section>\r\n\r\n\t\t\t\t\t\t<!-- Template Line Button | Confirmation -->\r\n\t\t\t\t\t\t<section *ngIf=\"['buttons', 'confirm'].includes(getTemplateLine?.type)\"\r\n\t\t\t\t\t\t\tclass=\"chat\"\r\n\t\t\t\t\t\t\t[ngClass]=\"{'no-bottom-border': getTemplateLine?.actions?.length > 0}\">\r\n\t\t\t\t\t\t\t<img *ngIf=\"getTemplateLine?.thumbnailImageUrl\"\r\n\t\t\t\t\t\t\t\tstyle=\"max-width: 100%;\"\r\n\t\t\t\t\t\t\t\tclass=\"mb-1\"\r\n\t\t\t\t\t\t\t\t[src]=\"getTemplateLine?.thumbnailImageUrl\" />\r\n\r\n\t\t\t\t\t\t\t<p *ngIf=\"getTemplateLine?.title\"\r\n\t\t\t\t\t\t\t\tclass=\"font-PoppinsBold mb-1\"\r\n\t\t\t\t\t\t\t\t[innerHTML]=\"getTemplateLine?.title\"> </p>\r\n\r\n\t\t\t\t\t\t\t<p *ngIf=\"getTemplateLine?.text\"\r\n\t\t\t\t\t\t\t\tclass=\"mb-0\"\r\n\t\t\t\t\t\t\t\t[innerHTML]=\"getTemplateLine?.text\"> </p>\r\n\t\t\t\t\t\t</section>\r\n\r\n\t\t\t\t\t\t<!-- Template Line Carousel -->\r\n\t\t\t\t\t\t<div *ngIf=\"['carousel'].includes(getTemplateLine?.type)\"\r\n\t\t\t\t\t\t\tclass=\"d-flex gap-2 overflow-auto\">\r\n\t\t\t\t\t\t\t<div *ngFor=\"let column of getTemplateLine?.columns\">\r\n\t\t\t\t\t\t\t\t<section class=\"chat w-100\"\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"{'no-bottom-border': column?.actions?.length > 0}\">\r\n\t\t\t\t\t\t\t\t\t<img *ngIf=\"column.thumbnailImageUrl\"\r\n\t\t\t\t\t\t\t\t\t\tstyle=\"max-width: 100%;\"\r\n\t\t\t\t\t\t\t\t\t\tclass=\"mb-1\"\r\n\t\t\t\t\t\t\t\t\t\t[src]=\"column.thumbnailImageUrl\" />\r\n\r\n\t\t\t\t\t\t\t\t\t<p *ngIf=\"column.title\"\r\n\t\t\t\t\t\t\t\t\t\tclass=\"font-PoppinsBold mb-1\"\r\n\t\t\t\t\t\t\t\t\t\t[innerHTML]=\"column.title\"> </p>\r\n\r\n\t\t\t\t\t\t\t\t\t<p *ngIf=\"column.text\"\r\n\t\t\t\t\t\t\t\t\t\tclass=\"mb-0\"\r\n\t\t\t\t\t\t\t\t\t\t[innerHTML]=\"column.text\"> </p>\r\n\t\t\t\t\t\t\t\t</section>\r\n\t\t\t\t\t\t\t\t<section *ngIf=\"column?.actions?.length > 0\">\r\n\t\t\t\t\t\t\t\t\t<div *ngFor=\"let button of column?.actions\"\r\n\t\t\t\t\t\t\t\t\t\tclass=\"params-btn mw-100 pb-0 pointer\">\r\n\t\t\t\t\t\t\t\t\t\t<p class=\"mb-0\">\r\n\t\t\t\t\t\t\t\t\t\t\t{{ button?.text }}\r\n\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</section>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t<!-- Template Line Image Carousel -->\r\n\t\t\t\t\t\t<div *ngIf=\"['image_carousel'].includes(getTemplateLine?.type)\"\r\n\t\t\t\t\t\t\tclass=\"d-flex gap-2 overflow-auto\">\r\n\t\t\t\t\t\t\t<div *ngFor=\"let column of getTemplateLine?.columns\">\r\n\t\t\t\t\t\t\t\t<div class=\"image-container\">\r\n\t\t\t\t\t\t\t\t\t<img [src]=\"column.imageUrl\"\r\n\t\t\t\t\t\t\t\t\t\talt=\"image\">\r\n\r\n\t\t\t\t\t\t\t\t\t<div class=\"d-flex justify-content-center\">\r\n\t\t\t\t\t\t\t\t\t\t<p class=\"font-13px overlay-text\">{{ column.action.label }}</p>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t<!-- Button Line -->\r\n\t\t\t\t\t\t<section *ngIf=\"getTemplateLine?.type !== 'confirm' && getTemplateLine?.actions?.length > 0\">\r\n\t\t\t\t\t\t\t<div *ngFor=\"let button of getTemplateLine?.actions\"\r\n\t\t\t\t\t\t\t\tclass=\"params-btn pb-0 pointer\">\r\n\t\t\t\t\t\t\t\t<p class=\"mb-0\">\r\n\t\t\t\t\t\t\t\t\t{{ button?.text }}\r\n\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</section>\r\n\t\t\t\t\t\t<section *ngIf=\"getTemplateLine?.type === 'confirm' && getTemplateLine?.actions?.length > 0\"\r\n\t\t\t\t\t\t\tclass=\"d-flex justify-content-around mw-70 bg-white\">\r\n\t\t\t\t\t\t\t<div *ngFor=\"let button of getTemplateLine?.actions\"\r\n\t\t\t\t\t\t\t\tclass=\"params-btn flex pb-0 pointer\">\r\n\t\t\t\t\t\t\t\t<p class=\"mb-0\">\r\n\t\t\t\t\t\t\t\t\t{{ button?.text }}\r\n\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</section>\r\n\t\t\t\t\t\t<!-- ./ Button Line -->\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</section>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div class=\"d-flex\"\r\n\t\t\t\tstyle=\"flex-direction: column;\">\r\n\t\t\t\t<span *ngIf=\"form.get('medium').value === 'SMS'\"\r\n\t\t\t\t\tstyle=\"text-align: right;width: 100%;\">\r\n\t\t\t\t\t{{ twilioResultCounter.fulltext }}\r\n\t\t\t\t</span>\r\n\t\t\t\t<span style=\"text-align: right;width: 100%;color: red\"\r\n\t\t\t\t\t*ngIf=\"twilioResultCounter.segments > 10 && form.get('medium').value === 'SMS'\">\r\n\t\t\t\t\tMaximum Segment is 10\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</form>\r\n\r\n<ng-template #isSpinner>\r\n\t<div class=\"text-center my-auto\">\r\n\t\t<img src=\"../../../../../assets/images/spinner.svg\">\r\n\t</div>\r\n</ng-template>\r\n",
-            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:75%}.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:70%;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: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__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}"]
+            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                    </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                        <!-- Template Line Text -->\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                        <!-- Template Line Button | Confirmation -->\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\r\n                        <!-- Template Line Carousel -->\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\r\n                        <!-- Template Line Image Carousel -->\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\r\n                        <!-- Button Line -->\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                        <!-- ./ Button Line -->\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",
+            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:75%}.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:70%;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: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__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}"]
         })
     ], GeneralInformationComponent);
     return GeneralInformationComponent;
@@ -5432,7 +5694,7 @@ var SchedulerComponent = /** @class */ (function () {
     SchedulerComponent.prototype.initForm = function () {
         var _this = this;
         this.form = new FormGroup({
-            schedulerType: new FormControl(null, Validators.required),
+            schedulerType: new FormControl(null, Validators$1.required),
             startDate: new FormControl(null),
             startTime: new FormControl(null),
             isRepeat: new FormControl(false),
@@ -5488,9 +5750,9 @@ var SchedulerComponent = /** @class */ (function () {
             this.form.get('isRepeat').setValue(false);
             return;
         }
-        this.form.get('startDate').setValidators(Validators.required);
+        this.form.get('startDate').setValidators(Validators$1.required);
         this.form.get('startDate').updateValueAndValidity();
-        this.form.get('startTime').setValidators(Validators.required);
+        this.form.get('startTime').setValidators(Validators$1.required);
         this.form.get('startTime').updateValueAndValidity();
         this.initEdit(false);
     };
@@ -5506,7 +5768,7 @@ var SchedulerComponent = /** @class */ (function () {
     };
     SchedulerComponent.prototype.updateRepeat = function (isChecked) {
         if (isChecked) {
-            this.form.get('delivery').setValidators(Validators.required);
+            this.form.get('delivery').setValidators(Validators$1.required);
             this.form.get('delivery').updateValueAndValidity();
             return;
         }
@@ -5632,6 +5894,7 @@ var CampaignManagementModule = /** @class */ (function () {
                 MatSlideToggleModule,
                 DragDropModule,
                 CampaignIndexModule,
+                InputNumericModule,
             ],
             exports: [CampaignManagementComponent, SummaryComponent],
             entryComponents: [PendingApprovalDialogViewComponent],
@@ -5687,5 +5950,5 @@ var ConfirmationModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-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, ApiAdapterServiceService as ɵm, ViewingListOfCampaignTableComponent as ɵn, FilterInListOfCampaignComponent as ɵo, ApiAdapterServiceService as ɵp, MatSelectInfiniteScrollDirective as ɵq, CustomPaginator as ɵr, ConfirmationComponent as ɵs, ConfirmationModel as ɵt, SharedServicesService as ɵu };
+export { AdlCampaignManagementLibraryInternalComponent, AdlCampaignManagementLibraryInternalModule, CampaignIndexModule, CampaignManagementComponent, CampaignManagementModule, ConfirmationComponent, ConfirmationModule, DashboardModule, SearchModule, 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, DashboardComponent as ɵm, ApiAdapterServiceService as ɵn, SearchComponent as ɵo, ViewingListOfCampaignTableComponent as ɵp, FilterInListOfCampaignComponent as ɵq, CampaignIndexComponent as ɵr, ApiAdapterServiceService as ɵs, MatSelectInfiniteScrollDirective as ɵt, InputNumericModule as ɵu, InputNumericComponent as ɵv, CustomPaginator as ɵw, ConfirmationComponent as ɵx, ConfirmationModel as ɵy, SharedServicesService as ɵz };
 //# sourceMappingURL=adlfe-campaign-management-library.js.map