@adlfe/campaign-management-library 2.11.1 → 2.11.4

package/bundles/adlfe-campaign-management-library.umd.js

@@ -343,6 +343,142 @@
         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: forms.ControlContainer }
+        ]; };
+        __decorate([
+            core.Input()
+        ], InputNumericComponent.prototype, "formControlName", void 0);
+        __decorate([
+            core.Input()
+        ], InputNumericComponent.prototype, "formControl", void 0);
+        __decorate([
+            core.Input()
+        ], InputNumericComponent.prototype, "trimLeadingZeros", void 0);
+        __decorate([
+            core.Input()
+        ], InputNumericComponent.prototype, "disallowLeadingZero", void 0);
+        __decorate([
+            core.Input()
+        ], InputNumericComponent.prototype, "allowDecimal", void 0);
+        __decorate([
+            core.Input()
+        ], InputNumericComponent.prototype, "identifier", void 0);
+        __decorate([
+            core.Input()
+        ], InputNumericComponent.prototype, "placeholder", void 0);
+        __decorate([
+            core.Input()
+        ], InputNumericComponent.prototype, "label", void 0);
+        __decorate([
+            core.Input()
+        ], InputNumericComponent.prototype, "maxLength", void 0);
+        __decorate([
+            core.ContentChild('suffix')
+        ], InputNumericComponent.prototype, "suffixTmpl", void 0);
+        InputNumericComponent = InputNumericComponent_1 = __decorate([
+            core.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: forms.NG_VALUE_ACCESSOR,
+                        useExisting: core.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([
+            core.NgModule({
+                imports: [formField.MatFormFieldModule, input.MatInputModule, forms.ReactiveFormsModule, common.CommonModule],
+                declarations: [InputNumericComponent],
+                exports: [InputNumericComponent],
+            })
+        ], InputNumericModule);
+        return InputNumericModule;
+    }());
+
     var MatSelectInfiniteScrollDirective = /** @class */ (function () {
         function MatSelectInfiniteScrollDirective(matSelect, ngZone) {
             this.matSelect = matSelect;
@@ -850,11 +986,11 @@
     }
     // 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,
@@ -1269,6 +1405,10 @@
             name: 'Template',
             code: 'TEMPLATE',
         },
+        {
+            name: 'Text - Utility',
+            code: 'utility',
+        },
     ];
     var MsgTypeEmailOptionConst = [
         {
@@ -1350,11 +1490,7 @@
             { 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',
@@ -1466,7 +1602,10 @@
     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' }],
@@ -1767,7 +1906,7 @@
             core.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}"]
             }),
             core.Injectable({
                 providedIn: 'root',
@@ -1861,7 +2000,7 @@
             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 = {
@@ -1869,61 +2008,65 @@
                     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;
@@ -2536,7 +2679,7 @@
         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' ||
@@ -2600,6 +2743,16 @@
                 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 () {
@@ -2725,7 +2878,7 @@
             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 = {
@@ -2733,64 +2886,68 @@
                     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 () {
@@ -4026,6 +4183,49 @@
         EnumData["SCHEDULER_TYPE_MULTIPLE"] = "MULTIPLE";
     })(EnumData || (EnumData = {}));
 
+    var maxValidator = function (max, message) {
+        return function (AC) {
+            var isError = forms.Validators.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 = forms.Validators.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 = forms.Validators.required(ac);
+            if (isError)
+                return { message: message };
+            return null;
+        };
+    };
+
+    var Validators = {
+        compose: forms.Validators.compose,
+        composeAync: forms.Validators.composeAsync,
+        max: maxValidator,
+        min: minValidator,
+        required: requiredValidator,
+    };
+
     var GeneralInformationWAComponent = /** @class */ (function () {
         function GeneralInformationWAComponent(ngZone, mapsAPILoader, apiAdapterService, toastr) {
             this.ngZone = ngZone;
@@ -4046,6 +4246,10 @@
             this.pageNoAccountOption = 1;
             this.pageNoTemplateOption = 1;
             this.subscribers = [];
+            this.templates = [
+                { label: 'Create New', value: false },
+                { label: 'Use existing template', value: true },
+            ];
             this.updateGeneralInformationForm = new core.EventEmitter();
         }
         Object.defineProperty(GeneralInformationWAComponent.prototype, "isTouchedForm", {
@@ -4115,6 +4319,9 @@
                 product: new forms.FormControl(null),
                 catalogue: new forms.FormControl(null),
                 body: new forms.FormControl(null),
+                isUseExistingTemplate: new forms.FormControl(false),
+                isNeedSave: new forms.FormControl(false),
+                ttl: new forms.FormControl(null),
             });
             this.form.valueChanges.subscribe(function () {
                 setTimeout(function () {
@@ -4129,7 +4336,7 @@
             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;
@@ -4155,8 +4362,15 @@
             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) {
@@ -4202,6 +4416,19 @@
                 this.form.get('product').updateValueAndValidity();
                 this.form.get('body').updateValueAndValidity();
             }
+            else if (this.getIsUtility) {
+                this.form.get('from').setValidators(forms.Validators.required);
+                this.form.get('text').setValidators([forms.Validators.required, forms.Validators.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(forms.Validators.required);
                 this.form.get('text').setValidators(forms.Validators.required);
@@ -4272,7 +4499,7 @@
             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'),
@@ -4285,6 +4512,10 @@
             ];
             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) {
@@ -4393,6 +4624,15 @@
             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;
@@ -4629,6 +4869,28 @@
             }
             this.updateTemplate(this.form.get('template').value);
         };
+        GeneralInformationWAComponent.prototype.handleChangeTemplate = function (useExisting) {
+            if (useExisting) {
+                this.form.get('template').setValidators(forms.Validators.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([forms.Validators.required, forms.Validators.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(); });
         };
@@ -4653,7 +4915,7 @@
         GeneralInformationWAComponent = __decorate([
             core.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);
@@ -5246,8 +5508,8 @@
         GeneralInformationComponent = __decorate([
             core.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;
@@ -5811,6 +6073,7 @@
                     slideToggle.MatSlideToggleModule,
                     dragDrop.DragDropModule,
                     CampaignIndexModule,
+                    InputNumericModule,
                 ],
                 exports: [CampaignManagementComponent, SummaryComponent],
                 entryComponents: [PendingApprovalDialogViewComponent],
@@ -5860,18 +6123,13 @@
 
     exports.AdlCampaignManagementLibraryInternalComponent = AdlCampaignManagementLibraryInternalComponent;
     exports.AdlCampaignManagementLibraryInternalModule = AdlCampaignManagementLibraryInternalModule;
-    exports.CampaignIndexComponent = CampaignIndexComponent;
     exports.CampaignIndexModule = CampaignIndexModule;
     exports.CampaignManagementComponent = CampaignManagementComponent;
     exports.CampaignManagementModule = CampaignManagementModule;
     exports.ConfirmationComponent = ConfirmationComponent;
     exports.ConfirmationModule = ConfirmationModule;
-    exports.DashboardComponent = DashboardComponent;
     exports.DashboardModule = DashboardModule;
-    exports.MatSelectInfiniteScrollDirective = MatSelectInfiniteScrollDirective;
-    exports.SearchComponent = SearchComponent;
     exports.SearchModule = SearchModule;
-    exports.SummaryComponent = SummaryComponent;
     exports.ɵa = WizardComponent;
     exports.ɵb = NewCampaignComponent;
     exports.ɵc = GeneralInformationComponent;
@@ -5884,15 +6142,20 @@
     exports.ɵj = GeneralInformationEmailComponent;
     exports.ɵk = PendingApprovalDialogViewComponent;
     exports.ɵl = FailoverMechanismComponent;
-    exports.ɵm = ApiAdapterServiceService;
-    exports.ɵn = ViewingListOfCampaignTableComponent;
-    exports.ɵo = FilterInListOfCampaignComponent;
-    exports.ɵp = ApiAdapterServiceService;
-    exports.ɵq = MatSelectInfiniteScrollDirective;
-    exports.ɵr = CustomPaginator;
-    exports.ɵs = ConfirmationComponent;
-    exports.ɵt = ConfirmationModel;
-    exports.ɵu = SharedServicesService;
+    exports.ɵm = DashboardComponent;
+    exports.ɵn = ApiAdapterServiceService;
+    exports.ɵo = SearchComponent;
+    exports.ɵp = ViewingListOfCampaignTableComponent;
+    exports.ɵq = FilterInListOfCampaignComponent;
+    exports.ɵr = CampaignIndexComponent;
+    exports.ɵs = ApiAdapterServiceService;
+    exports.ɵt = MatSelectInfiniteScrollDirective;
+    exports.ɵu = InputNumericModule;
+    exports.ɵv = InputNumericComponent;
+    exports.ɵw = CustomPaginator;
+    exports.ɵx = ConfirmationComponent;
+    exports.ɵy = ConfirmationModel;
+    exports.ɵz = SharedServicesService;
 
     Object.defineProperty(exports, '__esModule', { value: true });