@adlfe/campaign-management-library 2.15.10 → 2.15.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/adlfe-campaign-management-library.umd.js +1 -1
- package/bundles/adlfe-campaign-management-library.umd.js.map +1 -1
- package/bundles/adlfe-campaign-management-library.umd.min.js +1 -1
- package/bundles/adlfe-campaign-management-library.umd.min.js.map +1 -1
- package/esm2015/lib/campaign-management/modules/new-campaign/general-information/general-information.component.js +2 -2
- package/esm5/lib/campaign-management/modules/new-campaign/general-information/general-information.component.js +2 -2
- package/fesm2015/adlfe-campaign-management-library.js +1 -1
- package/fesm2015/adlfe-campaign-management-library.js.map +1 -1
- package/fesm5/adlfe-campaign-management-library.js +1 -1
- package/fesm5/adlfe-campaign-management-library.js.map +1 -1
- package/package.json +1 -1
|
@@ -5995,7 +5995,7 @@
|
|
|
5995
5995
|
GeneralInformationComponent = __decorate([
|
|
5996
5996
|
core.Component({
|
|
5997
5997
|
selector: 'lib-new-campaign-general-information',
|
|
5998
|
-
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 Contentss</h3>\r\n\r\n <div\r\n [ngClass]=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n ? 'campaign-border-preview'\r\n : 'campaign-preview'\r\n \"\r\n >\r\n <section\r\n *ngIf=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n \"\r\n >\r\n <p\r\n *ngIf=\"getBody\"\r\n class=\"body my-2\"\r\n style=\"max-width: 500px; word-wrap: break-word\"\r\n [innerHTML]=\"getBody\"\r\n ></p>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'WA'\" class=\"campaign-preview__wa\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <section *ngIf=\"getBody || getMedia || displayFile\">\r\n <div\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplate?.buttons?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"\r\n (getMedia === 'IMAGE' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'image') &&\r\n displayFile\r\n \"\r\n style=\"max-width: 100%\"\r\n alt=\"image\"\r\n [src]=\"displayFile\"\r\n />\r\n\r\n <video\r\n *ngIf=\"\r\n (getMedia === 'VIDEO' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'video') &&\r\n displayFile\r\n \"\r\n id=\"video\"\r\n style=\"width: 100%\"\r\n [src]=\"displayFile\"\r\n controls\r\n ></video>\r\n\r\n <div *ngIf=\"getMedia === 'DOCUMENT'\" style=\"display: flex\">\r\n <img\r\n style=\"width: 13px; height: 18px\"\r\n alt=\"document\"\r\n src=\"../../../../../assets/images/icon-file.png\"\r\n />\r\n\r\n <span style=\"margin-left: 10px\">Document</span>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getMedia === 'LOCATION'\">\r\n <agm-map\r\n style=\"width: 100%; height: 200px\"\r\n [disableDefaultUI]=\"true\"\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [zoom]=\"maps.zoom\"\r\n >\r\n <agm-marker\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [markerDraggable]=\"false\"\r\n ></agm-marker>\r\n </agm-map>\r\n <a\r\n [href]=\"\r\n 'https://www.google.com/maps/search/?api=1&query=' +\r\n maps.latitude +\r\n ',' +\r\n maps.longitude\r\n \"\r\n >\r\n https://www.google.com/maps/search/?api=1&query={{\r\n maps.latitude\r\n }},{{ maps.longitude }}\r\n </a>\r\n </ng-container>\r\n\r\n <p *ngIf=\"getBody\" class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n\r\n <p\r\n *ngIf=\"getTemplate?.footer\"\r\n class=\"mb-2\"\r\n style=\"color: rgb(160, 160, 160)\"\r\n >\r\n {{ getTemplate.footer }}\r\n </p>\r\n </div>\r\n </section>\r\n <section *ngIf=\"getTemplate?.buttons?.length > 0\">\r\n <div\r\n *ngFor=\"let button of getTemplateButton\"\r\n class=\"params-btn pb-2 pointer\"\r\n >\r\n <svg\r\n class=\"reply-icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <polyline points=\"9 17 4 12 9 7\"></polyline>\r\n <path d=\"M20 18v-2a4 4 0 0 0-4-4H4\"></path>\r\n </svg>\r\n <p class=\"mb-0\">\r\n {{ button?.text || button?.type }}\r\n </p>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"getTemplate?.buttons?.length > 3\"\r\n class=\"params-btn pb-0 pointer\"\r\n (click)=\"isShowMore = !isShowMore\"\r\n >\r\n <p class=\"mb-0\"><mat-icon>list</mat-icon> See all options</p>\r\n </div>\r\n </section>\r\n <!-- ========================================== -->\r\n <!-- WA CAROUSEL PREVIEW -->\r\n <!-- ========================================== -->\r\n <div\r\n *ngIf=\"getTemplate?.carousel?.length > 0\"\r\n class=\"wa-carousel-container\"\r\n >\r\n <div class=\"d-flex gap-2 mt-2 pb-2 wa-carousel-scroll\">\r\n <div\r\n *ngFor=\"let card of getTemplate?.carousel\"\r\n class=\"wa-carousel-card\"\r\n >\r\n <ng-container *ngIf=\"card.header?.url || card.headerURL\">\r\n <lib-wa-media-preview\r\n [url]=\"card.header?.url || card.headerURL\"\r\n [type]=\"card.header?.type\"\r\n ></lib-wa-media-preview>\r\n </ng-container>\r\n\r\n <div class=\"card-body-content\">\r\n <p\r\n *ngIf=\"card.body?.text || card.bodyText\"\r\n class=\"card-text\"\r\n >\r\n {{ card.body?.text || card.bodyText }}\r\n </p>\r\n </div>\r\n\r\n <section\r\n *ngIf=\"card.buttons?.length > 0 || card.button?.length > 0\"\r\n class=\"card-buttons-wrapper\"\r\n >\r\n <div\r\n *ngFor=\"let btn of card.buttons || card.button\"\r\n class=\"card-button\"\r\n >\r\n <ng-container\r\n [ngSwitch]=\"\r\n btn?.type || btn?.actionType || 'QUICK_REPLY'\r\n \"\r\n >\r\n <svg\r\n *ngSwitchCase=\"'QUICK_REPLY'\"\r\n width=\"15\"\r\n height=\"15\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#00a884\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M9 14 4 9l5-5\" />\r\n <path d=\"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v3.5\" />\r\n </svg>\r\n <svg\r\n *ngSwitchCase=\"'URL'\"\r\n width=\"15\"\r\n height=\"15\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#00a884\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path\r\n d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\r\n ></path>\r\n <polyline points=\"15 3 21 3 21 9\"></polyline>\r\n <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line>\r\n </svg>\r\n <svg\r\n *ngSwitchDefault\r\n width=\"15\"\r\n height=\"15\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#00a884\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M9 14 4 9l5-5\" />\r\n <path d=\"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v3.5\" />\r\n </svg>\r\n </ng-container>\r\n\r\n <p class=\"text-center btn-text\">\r\n {{ btn?.text || btn?.type || 'Button' }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n <!-- Dot Indicators -->\r\n <div\r\n *ngIf=\"getTemplate?.carousel?.length > 1\"\r\n class=\"wa-carousel-indicators\"\r\n >\r\n <div\r\n *ngFor=\"let card of getTemplate?.carousel; let i = index\"\r\n class=\"dot\"\r\n [style.background-color]=\"i === 0 ? '#8696a0' : '#d1d7db'\"\r\n ></div>\r\n </div>\r\n </div>\r\n <!-- ========================================== -->\r\n </div>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'LINE'\" class=\"campaign-preview__line\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <section *ngIf=\"isText || !isJSON\" class=\"chat\">\r\n <p class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n </section>\r\n\r\n <section\r\n *ngIf=\"['buttons', 'confirm'].includes(getTemplateLine?.type)\"\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplateLine?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"getTemplateLine?.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"getTemplateLine?.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"getTemplateLine?.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"getTemplateLine?.text\"\r\n ></p>\r\n </section>\r\n <div\r\n *ngIf=\"['carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <section\r\n class=\"chat w-100\"\r\n [ngClass]=\"{ 'no-bottom-border': column?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"column.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"column.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"column.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"column.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"column.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"column.text\"\r\n ></p>\r\n </section>\r\n <section *ngIf=\"column?.actions?.length > 0\">\r\n <div\r\n *ngFor=\"let button of column?.actions\"\r\n class=\"params-btn mw-100 pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"['image_carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <div class=\"image-container\">\r\n <img [src]=\"column.imageUrl\" alt=\"image\" />\r\n\r\n <div class=\"d-flex justify-content-center\">\r\n <p class=\"font-13px overlay-text\">\r\n {{ column.action.label }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type !== 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type === 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n class=\"d-flex justify-content-around mw-70 bg-white\"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn flex pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div class=\"d-flex\" style=\"flex-direction: column\">\r\n <span\r\n *ngIf=\"form.get('medium').value === 'SMS'\"\r\n style=\"text-align: right; width: 100%\"\r\n >\r\n {{ twilioResultCounter.fulltext }}\r\n </span>\r\n <span\r\n style=\"text-align: right; width: 100%; color: red\"\r\n *ngIf=\"twilioResultCounter.segments > 10 && form.get('medium').value === 'SMS'\"\r\n >\r\n Maximum Segment is 10\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<ng-template #isSpinner>\r\n <div class=\"text-center my-auto\">\r\n <img src=\"../../../../../assets/images/spinner.svg\" />\r\n </div>\r\n</ng-template>\r\n",
|
|
5998
|
+
template: "<form autocomplete=\"off\" [formGroup]=\"form\">\r\n <div class=\"campaign-info\">\r\n <div class=\"campaign-info-child\">\r\n <mat-card>\r\n <mat-card-content>\r\n <h3 class=\"font-22px font-PoppinsBold mb-4\">General Information</h3>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Broadcast Name</mat-label>\r\n\r\n <input\r\n matInput\r\n type=\"text\"\r\n formControlName=\"campaignName\"\r\n placeholder=\"Enter Broadcast name\"\r\n />\r\n </mat-form-field>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <mat-hint align=\"start\">\r\n {{ form.get('campaignName').value?.length || 0 }}/100\r\n </mat-hint>\r\n\r\n <div>\r\n <mat-error\r\n align=\"end\"\r\n *ngFor=\"let validation of validationMessages.campaignName\"\r\n >\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('campaignName').touched &&\r\n form.get('campaignName').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\" class=\"w-100\">\r\n <mat-label class=\"asterix--after\">Channel</mat-label>\r\n\r\n <mat-select placeholder=\"Select channel\" formControlName=\"medium\">\r\n <mat-option\r\n *ngFor=\"let option of channelOption\"\r\n [value]=\"option.value\"\r\n >\r\n {{ option.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-error align=\"end\" *ngFor=\"let validation of validationMessages.medium\">\r\n <p\r\n class=\"font-12px mb-0\"\r\n *ngIf=\"\r\n form.get('medium').touched &&\r\n form.get('medium').hasError(validation.type)\r\n \"\r\n >\r\n {{ validation.message }}\r\n </p>\r\n </mat-error>\r\n </div>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'WA'\">\r\n <lib-general-information-wa\r\n [isTouchedForm]=\"isTouchedWAForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-wa>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'LINE'\">\r\n <lib-general-information-line\r\n [isTouchedForm]=\"isTouchedSMSForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-line>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'SMS'\">\r\n <lib-general-information-sms\r\n [isTouchedForm]=\"isTouchedSMSForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-sms>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"form.get('medium').value === 'EMAIL'\">\r\n <lib-general-information-email\r\n [isTouchedForm]=\"isTouchedEmailForm\"\r\n [isReadOnlyMode]=\"isReadOnlyMode\"\r\n (updateGeneralInformationForm)=\"updateGeneralInformationForm($event)\"\r\n ></lib-general-information-email>\r\n </ng-container>\r\n </mat-card-content>\r\n </mat-card>\r\n </div>\r\n\r\n <div class=\"campaign-info-child pl-20px\">\r\n <h3 class=\"font-22px font-PoppinsBold\">Broadcast Content</h3>\r\n\r\n <div\r\n [ngClass]=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n ? 'campaign-border-preview'\r\n : 'campaign-preview'\r\n \"\r\n >\r\n <section\r\n *ngIf=\"\r\n form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'\r\n \"\r\n >\r\n <p\r\n *ngIf=\"getBody\"\r\n class=\"body my-2\"\r\n style=\"max-width: 500px; word-wrap: break-word\"\r\n [innerHTML]=\"getBody\"\r\n ></p>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'WA'\" class=\"campaign-preview__wa\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <section *ngIf=\"getBody || getMedia || displayFile\">\r\n <div\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplate?.buttons?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"\r\n (getMedia === 'IMAGE' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'image') &&\r\n displayFile\r\n \"\r\n style=\"max-width: 100%\"\r\n alt=\"image\"\r\n [src]=\"displayFile\"\r\n />\r\n\r\n <video\r\n *ngIf=\"\r\n (getMedia === 'VIDEO' ||\r\n getTemplate?.header?.type?.toLowerCase() === 'video') &&\r\n displayFile\r\n \"\r\n id=\"video\"\r\n style=\"width: 100%\"\r\n [src]=\"displayFile\"\r\n controls\r\n ></video>\r\n\r\n <div *ngIf=\"getMedia === 'DOCUMENT'\" style=\"display: flex\">\r\n <img\r\n style=\"width: 13px; height: 18px\"\r\n alt=\"document\"\r\n src=\"../../../../../assets/images/icon-file.png\"\r\n />\r\n\r\n <span style=\"margin-left: 10px\">Document</span>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getMedia === 'LOCATION'\">\r\n <agm-map\r\n style=\"width: 100%; height: 200px\"\r\n [disableDefaultUI]=\"true\"\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [zoom]=\"maps.zoom\"\r\n >\r\n <agm-marker\r\n [latitude]=\"maps.latitude\"\r\n [longitude]=\"maps.longitude\"\r\n [markerDraggable]=\"false\"\r\n ></agm-marker>\r\n </agm-map>\r\n <a\r\n [href]=\"\r\n 'https://www.google.com/maps/search/?api=1&query=' +\r\n maps.latitude +\r\n ',' +\r\n maps.longitude\r\n \"\r\n >\r\n https://www.google.com/maps/search/?api=1&query={{\r\n maps.latitude\r\n }},{{ maps.longitude }}\r\n </a>\r\n </ng-container>\r\n\r\n <p *ngIf=\"getBody\" class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n\r\n <p\r\n *ngIf=\"getTemplate?.footer\"\r\n class=\"mb-2\"\r\n style=\"color: rgb(160, 160, 160)\"\r\n >\r\n {{ getTemplate.footer }}\r\n </p>\r\n </div>\r\n </section>\r\n <section *ngIf=\"getTemplate?.buttons?.length > 0\">\r\n <div\r\n *ngFor=\"let button of getTemplateButton\"\r\n class=\"params-btn pb-2 pointer\"\r\n >\r\n <svg\r\n class=\"reply-icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <polyline points=\"9 17 4 12 9 7\"></polyline>\r\n <path d=\"M20 18v-2a4 4 0 0 0-4-4H4\"></path>\r\n </svg>\r\n <p class=\"mb-0\">\r\n {{ button?.text || button?.type }}\r\n </p>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"getTemplate?.buttons?.length > 3\"\r\n class=\"params-btn pb-0 pointer\"\r\n (click)=\"isShowMore = !isShowMore\"\r\n >\r\n <p class=\"mb-0\"><mat-icon>list</mat-icon> See all options</p>\r\n </div>\r\n </section>\r\n <!-- ========================================== -->\r\n <!-- WA CAROUSEL PREVIEW -->\r\n <!-- ========================================== -->\r\n <div\r\n *ngIf=\"getTemplate?.carousel?.length > 0\"\r\n class=\"wa-carousel-container\"\r\n >\r\n <div class=\"d-flex gap-2 mt-2 pb-2 wa-carousel-scroll\">\r\n <div\r\n *ngFor=\"let card of getTemplate?.carousel\"\r\n class=\"wa-carousel-card\"\r\n >\r\n <ng-container *ngIf=\"card.header?.url || card.headerURL\">\r\n <lib-wa-media-preview\r\n [url]=\"card.header?.url || card.headerURL\"\r\n [type]=\"card.header?.type\"\r\n ></lib-wa-media-preview>\r\n </ng-container>\r\n\r\n <div class=\"card-body-content\">\r\n <p\r\n *ngIf=\"card.body?.text || card.bodyText\"\r\n class=\"card-text\"\r\n >\r\n {{ card.body?.text || card.bodyText }}\r\n </p>\r\n </div>\r\n\r\n <section\r\n *ngIf=\"card.buttons?.length > 0 || card.button?.length > 0\"\r\n class=\"card-buttons-wrapper\"\r\n >\r\n <div\r\n *ngFor=\"let btn of card.buttons || card.button\"\r\n class=\"card-button\"\r\n >\r\n <ng-container\r\n [ngSwitch]=\"\r\n btn?.type || btn?.actionType || 'QUICK_REPLY'\r\n \"\r\n >\r\n <svg\r\n *ngSwitchCase=\"'QUICK_REPLY'\"\r\n width=\"15\"\r\n height=\"15\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#00a884\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M9 14 4 9l5-5\" />\r\n <path d=\"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v3.5\" />\r\n </svg>\r\n <svg\r\n *ngSwitchCase=\"'URL'\"\r\n width=\"15\"\r\n height=\"15\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#00a884\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path\r\n d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\r\n ></path>\r\n <polyline points=\"15 3 21 3 21 9\"></polyline>\r\n <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line>\r\n </svg>\r\n <svg\r\n *ngSwitchDefault\r\n width=\"15\"\r\n height=\"15\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"#00a884\"\r\n stroke-width=\"2.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path d=\"M9 14 4 9l5-5\" />\r\n <path d=\"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v3.5\" />\r\n </svg>\r\n </ng-container>\r\n\r\n <p class=\"text-center btn-text\">\r\n {{ btn?.text || btn?.type || 'Button' }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n <!-- Dot Indicators -->\r\n <div\r\n *ngIf=\"getTemplate?.carousel?.length > 1\"\r\n class=\"wa-carousel-indicators\"\r\n >\r\n <div\r\n *ngFor=\"let card of getTemplate?.carousel; let i = index\"\r\n class=\"dot\"\r\n [style.background-color]=\"i === 0 ? '#8696a0' : '#d1d7db'\"\r\n ></div>\r\n </div>\r\n </div>\r\n <!-- ========================================== -->\r\n </div>\r\n </section>\r\n\r\n <section *ngIf=\"form.get('medium').value === 'LINE'\" class=\"campaign-preview__line\">\r\n <div class=\"header-preview\">\r\n <div class=\"heading\">\r\n {{ getHeader }}\r\n </div>\r\n </div>\r\n <div class=\"body-preview\">\r\n <section *ngIf=\"isText || !isJSON\" class=\"chat\">\r\n <p class=\"body my-2\" [innerHTML]=\"getBody\"></p>\r\n </section>\r\n\r\n <section\r\n *ngIf=\"['buttons', 'confirm'].includes(getTemplateLine?.type)\"\r\n class=\"chat\"\r\n [ngClass]=\"{ 'no-bottom-border': getTemplateLine?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"getTemplateLine?.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"getTemplateLine?.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"getTemplateLine?.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"getTemplateLine?.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"getTemplateLine?.text\"\r\n ></p>\r\n </section>\r\n <div\r\n *ngIf=\"['carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <section\r\n class=\"chat w-100\"\r\n [ngClass]=\"{ 'no-bottom-border': column?.actions?.length > 0 }\"\r\n >\r\n <img\r\n *ngIf=\"column.thumbnailImageUrl\"\r\n style=\"max-width: 100%\"\r\n class=\"mb-1\"\r\n [src]=\"column.thumbnailImageUrl\"\r\n />\r\n\r\n <p\r\n *ngIf=\"column.title\"\r\n class=\"font-PoppinsBold mb-1\"\r\n [innerHTML]=\"column.title\"\r\n ></p>\r\n\r\n <p\r\n *ngIf=\"column.text\"\r\n class=\"mb-0\"\r\n [innerHTML]=\"column.text\"\r\n ></p>\r\n </section>\r\n <section *ngIf=\"column?.actions?.length > 0\">\r\n <div\r\n *ngFor=\"let button of column?.actions\"\r\n class=\"params-btn mw-100 pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"['image_carousel'].includes(getTemplateLine?.type)\"\r\n class=\"d-flex gap-2 overflow-auto\"\r\n >\r\n <div *ngFor=\"let column of getTemplateLine?.columns\">\r\n <div class=\"image-container\">\r\n <img [src]=\"column.imageUrl\" alt=\"image\" />\r\n\r\n <div class=\"d-flex justify-content-center\">\r\n <p class=\"font-13px overlay-text\">\r\n {{ column.action.label }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type !== 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n <section\r\n *ngIf=\"\r\n getTemplateLine?.type === 'confirm' &&\r\n getTemplateLine?.actions?.length > 0\r\n \"\r\n class=\"d-flex justify-content-around mw-70 bg-white\"\r\n >\r\n <div\r\n *ngFor=\"let button of getTemplateLine?.actions\"\r\n class=\"params-btn flex pb-0 pointer\"\r\n >\r\n <p class=\"mb-0\">\r\n {{ button?.text }}\r\n </p>\r\n </div>\r\n </section>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div class=\"d-flex\" style=\"flex-direction: column\">\r\n <span\r\n *ngIf=\"form.get('medium').value === 'SMS'\"\r\n style=\"text-align: right; width: 100%\"\r\n >\r\n {{ twilioResultCounter.fulltext }}\r\n </span>\r\n <span\r\n style=\"text-align: right; width: 100%; color: red\"\r\n *ngIf=\"twilioResultCounter.segments > 10 && form.get('medium').value === 'SMS'\"\r\n >\r\n Maximum Segment is 10\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<ng-template #isSpinner>\r\n <div class=\"text-center my-auto\">\r\n <img src=\"../../../../../assets/images/spinner.svg\" />\r\n </div>\r\n</ng-template>\r\n",
|
|
5999
5999
|
styles: [".campaign-info{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}.campaign-info-child{flex:1;min-width:49%}.campaign-info-child mat-card{width:100%}.campaign-info .asterix--after:after{content:\"*\";color:red}.campaign-info .pl-20px{padding-left:20px}.campaign-info .mw-70{max-width:70%}.campaign-info .campaign-preview{width:100%;max-width:550px;flex-shrink:0}.campaign-info .campaign-preview .header-preview{padding:15px;min-height:60px;border-radius:10px 10px 0 0}.campaign-info .campaign-preview .header-preview .heading{width:100%;color:#e0e0e0;margin-left:5px;font-size:20px}.campaign-info .campaign-preview .body-preview{padding:15px;min-height:470px}.campaign-info .campaign-preview .body-preview .chat{width:90%;padding:11px;font-size:14px;line-height:22px;color:#494949;border-radius:8px;background:#fff;overflow-wrap:break-word;white-space:pre-line;box-shadow:12px 12px 20px rgba(44,59,113,.04)}.campaign-info .campaign-preview .body-preview .chat .body{max-height:400px;overflow-y:auto;overscroll-behavior-y:contain}.campaign-info .campaign-preview .body-preview .chat.no-bottom-border{border-bottom-left-radius:0;border-bottom-right-radius:0}.campaign-info .campaign-preview__wa .header-preview{background:#065f54}.campaign-info .campaign-preview__wa .body-preview{border-bottom-left-radius:8px;border-bottom-right-radius:8px;background-image:url(../../../../assets/svg/whatsapp-bg.svg);background-position:center;background-repeat:no-repeat;background-size:cover}.campaign-info .campaign-preview__wa .body-preview .params-btn{width:90%;max-width:100%;background:#fff;color:#00a884;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;padding:12px 16px;line-height:normal;border-top:1px solid #f0f2f5;border-radius:0;box-shadow:12px 12px 20px rgba(44,59,113,.04)}.campaign-info .campaign-preview__wa .body-preview .params-btn:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.campaign-info .campaign-preview__wa .body-preview .params-btn .reply-icon{width:16px;height:16px;color:#00a884}.campaign-info .campaign-preview__wa .body-preview .params-btn b{font-family:PoppinsBold}.campaign-info .campaign-preview__line .header-preview{background:#273046}.campaign-info .campaign-preview__line .body-preview{background:#7692bf;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.campaign-info .campaign-preview__line .body-preview .params-btn{width:auto;max-width:70%;color:#34b7f1;background:#fff;box-shadow:12px 12px 20px rgba(44,59,113,.04);border-radius:0;font-size:16px;line-height:43px;padding:0;text-align:center;font-family:Poppins;overflow-wrap:break-word}.campaign-info .campaign-preview__line .body-preview .params-btn b{font-family:PoppinsBold}.campaign-info .campaign-preview__line .body-preview .image-container{position:relative;width:200px;height:200px}.campaign-info .campaign-preview__line .body-preview .image-container img{display:block;width:100%;height:100%}.campaign-info .campaign-preview__line .body-preview .image-container .overlay-text{top:170px;position:absolute;padding:2px 5px;color:#fff;background-color:rgba(49,57,60,.62);border-radius:10px}.campaign-info .campaign-border-preview{width:100%;min-height:100px;padding:32px;border:1px solid #e2e2e2;border-radius:8px}.wa-carousel-container{width:100%}.wa-carousel-container .wa-carousel-scroll{width:100%;padding-right:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none}.wa-carousel-container .wa-carousel-scroll::-webkit-scrollbar{display:none}.wa-carousel-container .wa-carousel-card{min-width:220px;flex-shrink:0;padding:0;overflow:hidden;background:#fff;border-radius:12px;border:1px solid #d1d7db;display:flex;flex-direction:column;scroll-snap-align:start}.wa-carousel-container .wa-carousel-card .card-header-image{width:100%;height:130px;-o-object-fit:cover;object-fit:cover;background:#e0e0e0}.wa-carousel-container .wa-carousel-card .card-body-content{padding:12px;flex-grow:1}.wa-carousel-container .wa-carousel-card .card-body-content .card-text{white-space:pre-wrap;font-size:12px;color:#111b21;margin:0}.wa-carousel-container .wa-carousel-card .card-buttons-wrapper{width:100%}.wa-carousel-container .wa-carousel-card .card-buttons-wrapper .card-button{border-top:1px solid #f0f2f5;width:100%;padding:8px 0;background:#fff;display:flex;justify-content:center;align-items:center;gap:8px;cursor:pointer}.wa-carousel-container .wa-carousel-card .card-buttons-wrapper .card-button .btn-text{color:#00a884;font-size:12px;font-weight:500;margin-bottom:0}.wa-carousel-container .wa-carousel-indicators{display:flex;justify-content:center;gap:6px;padding:10px 0}.wa-carousel-container .wa-carousel-indicators .dot{width:6px;height:6px;border-radius:50%;transition:background-color .3s}"]
|
|
6000
6000
|
})
|
|
6001
6001
|
], GeneralInformationComponent);
|