kwikid-agent-dashboard
Version:
KwikID's EKYC Agent Map View Module.
624 lines (613 loc) • 235 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewChild, Inject, HostListener, Injectable, ViewChildren, Pipe, NgModule } from '@angular/core';
import { __awaiter, __decorate } from 'tslib';
import * as i1 from 'kwikui';
import { KwikUIButtonModule, KwikUIInputModule, KwikUIInputDateModule, KwikUIInputDateRangeModule, KwikUIInputSelectModule, KwikUILabelValuePairModule, KwikUITableModule, KwikUITablePaginationModule, KwikUIModule, KwikUILoaderModule } from 'kwikui';
import * as i2 from '@taiga-ui/cdk';
import { ALWAYS_FALSE_HANDLER, TuiDay, TuiDayRange, TuiActiveZoneModule } from '@taiga-ui/cdk';
import * as i3 from '@taiga-ui/core';
import { TuiDialogService, TuiRootModule, TuiDialogModule, TuiDropdownModule, TuiGroupModule, TuiSvgModule, TuiHostedDropdownModule, TuiDataListModule, TuiButtonModule } from '@taiga-ui/core';
import { trigger, transition, style, animate } from '@angular/animations';
import * as i8 from '@taiga-ui/addon-preview';
import { TuiPreviewDialogService, TuiPreviewActionModule, TuiPreviewModule } from '@taiga-ui/addon-preview';
import { logMethod, checkObjectPathExists, checkObjectKeyExists, convertSnakeCaseToNormalText, isNotEmptyValue, getObjectValueFromPath, isNotEmptyArray, RuleEngine, getObjectDeepCopy } from 'kwikid-toolkit';
import * as i1$1 from '@taiga-ui/kit';
import { TuiItemsWithMoreModule, TuiBadgeModule, TuiAccordionModule, TuiPaginationModule } from '@taiga-ui/kit';
import * as i7 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i6 from '@taiga-ui/core/directives/dropdown';
import * as i3$1 from 'kwikid-forms';
import { KwikIDFormViewModule, KwikIDFormsModule } from 'kwikid-forms';
import * as i2$1 from '@angular/forms';
import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i2$2 from '@angular/google-maps';
import { MapInfoWindow, GoogleMapsModule } from '@angular/google-maps';
import { map, catchError } from 'rxjs/operators';
import { of } from 'rxjs';
import * as i3$2 from '@angular/common/http';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import * as L from 'leaflet';
import 'leaflet-routing-machine';
import * as i5 from '@angular/cdk/scrolling';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { TuiSidebarModule } from '@taiga-ui/addon-mobile';
class LayoutHeaderComponent {
constructor() {
this.config = {};
this.agentInfo = {};
this.onGetTaskList = new EventEmitter();
this.onClickPerformAction = new EventEmitter();
this.open = false;
}
ngOnInit() {
return __awaiter(this, void 0, void 0, function* () { });
}
refreshPage() {
this.handleOnGetTaskList({});
}
onClick() {
this.open = !this.open;
}
onObscured(obscured) {
if (obscured) {
this.open = false;
}
}
onActiveZone(active) {
this.open = active && this.open;
}
logout() {
this.handleOnClickPerformAction({ action: { type: "logout" } });
}
handleOnGetTaskList(event) {
this.onGetTaskList.emit(event);
}
handleOnClickPerformAction(event) {
this.onClickPerformAction.emit(event);
}
}
/** @nocollapse */ LayoutHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ LayoutHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LayoutHeaderComponent, selector: "layout-header", inputs: { config: "config", agentInfo: "agentInfo" }, outputs: { onGetTaskList: "onGetTaskList", onClickPerformAction: "onClickPerformAction" }, ngImport: i0, template: "<div id=\"header-container\">\n <div id=\"client-information-wrapper\">\n <img\n id=\"client-logo\"\n [src]=\"config?.theme?.clientLogo\"\n />\n </div>\n <div id=\"actions-wrapper\">\n <span (tuiActiveZoneChange)=\"onActiveZone($event)\">\n <kwikui-button\n [icon]=\"'tuiIconSettingsLarge'\"\n (onClick)=\"onClick()\"\n appearance=\"mono\"\n size=\"l\"\n [tuiDropdown]=\"dropdownContent\"\n [tuiDropdownManual]=\"open\"\n (tuiObscured)=\"onObscured($event)\"\n ></kwikui-button>\n <ng-template #dropdownContent>\n <div class=\"menu-dropdown\">\n <div class=\"menu-dropdown-header\">\n <div class=\"menu-dropdown-header-agent-name\">\n {{ agentInfo?.agent_name ?? \"Welcome\" }}\n </div>\n <div class=\"menu-dropdown-header-agent-id\">\n Agent ID:\n {{ agentInfo?.agent_id }}\n </div>\n </div>\n <hr />\n <div\n class=\"menu-dropdown-body\"\n tuiGroup\n [collapsed]=\"true\"\n [rounded]=\"false\"\n [orientation]=\"'vertical'\"\n [size]=\"'m'\"\n >\n <kwikui-button\n appearance=\"mono\"\n class=\"menu-dropdown-buttons\"\n label=\"Refresh\"\n [icon]=\"'tuiIconRefreshCw'\"\n size=\"m\"\n type=\"button\"\n (onClick)=\"refreshPage()\"\n ></kwikui-button>\n </div>\n <hr />\n <div class=\"menu-dropdown-footer\">\n <kwikui-button\n id=\"\"\n label=\"Logout\"\n styles=\"\"\n class=\"menu-dropdown-buttons\"\n type=\"button\"\n appearance=\"mono\"\n [icon]=\"'tuiIconLogOut'\"\n iconRight=\"\"\n [shape]=\"null\"\n size=\"m\"\n (onClick)=\"logout()\"\n ></kwikui-button>\n </div>\n </div>\n </ng-template>\n </span>\n </div>\n</div>\n", styles: ["#header-container{display:flex;align-items:center;justify-content:space-between;height:100%;width:100%;padding:1rem}#header-container #client-information-wrapper{height:100%;width:100%}#header-container #client-information-wrapper #client-logo{height:100%}#header-container #client-information-wrapper #client-name{height:100%;width:100%;font-size:1.25rem;font-weight:600}#header-container #actions-wrapper{display:flex;flex-direction:row;align-items:center}#header-container #actions-wrapper>*{margin-right:.5rem}.menu-dropdown{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;grid-gap:.5rem;gap:.5rem;padding:1rem 1.5rem}.menu-dropdown .menu-dropdown-header{display:flex;flex-direction:column;align-content:flex-start;justify-content:space-between;align-items:flex-start;grid-gap:.5rem;gap:.5rem}.menu-dropdown .menu-dropdown-header .menu-dropdown-header-agent-name{font-size:1.2rem;font-weight:600}.menu-dropdown .menu-dropdown-header .menu-dropdown-header-agent-id{font-size:.8rem;font-weight:600}.menu-dropdown .menu-dropdown-buttons ::ng-deep .t-wrapper{padding:0!important}\n"], components: [{ type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }], directives: [{ type: i2.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i3.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { type: i3.TuiDropdownDriverDirective, selector: "[tuiDropdown]" }, { type: i3.TuiDropdownPositionDirective, selector: "[tuiDropdown]" }, { type: i3.TuiDropdownManualDirective, selector: "[tuiDropdown][tuiDropdownManual]", inputs: ["tuiDropdownManual"] }, { type: i3.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutHeaderComponent, decorators: [{
type: Component,
args: [{
selector: "layout-header",
templateUrl: "./layout-header.component.html",
styleUrls: ["./layout-header.component.scss"]
}]
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
type: Input
}], agentInfo: [{
type: Input
}], onGetTaskList: [{
type: Output
}], onClickPerformAction: [{
type: Output
}] } });
class PrimaryActionsComponent {
constructor() {
this.primaryActionsConfig = [];
this.onClickPrimaryAction = new EventEmitter();
}
ngOnInit() {
return __awaiter(this, void 0, void 0, function* () { });
}
ngOnChanges(changes) {
const verifyChange = (key) => {
return changes.hasOwnProperty(key) && !changes[key].firstChange;
};
for (const change of Object.entries(changes)) {
const key = change[0];
const value = change[1].currentValue;
}
if (verifyChange("primaryActionsConfig")) {
this.primaryActionsConfig = changes.primaryActionsConfig.currentValue;
this.primaryActionsConfig.map(ALWAYS_FALSE_HANDLER);
}
}
handleOnInitPrimaryActionsConfig() {
this.primaryActionsConfig = this.primaryActionsConfig;
this.primaryActionsConfig.map(ALWAYS_FALSE_HANDLER);
}
handleOnClickPrimaryAction(event) {
this.onClickPrimaryAction.emit(event);
}
trackByFn(index, item) {
return index; // or unique identifier if available
}
}
/** @nocollapse */ PrimaryActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PrimaryActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ PrimaryActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PrimaryActionsComponent, selector: "primary-actions", inputs: { primaryActionsConfig: "primaryActionsConfig" }, outputs: { onClickPrimaryAction: "onClickPrimaryAction" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"primary-actions-container\">\n <tui-items-with-more\n tuiGroup\n [itemsLimit]=\"1\"\n >\n <ng-container *ngFor=\"let item of primaryActionsConfig; let index = index\">\n <kwikui-button\n *tuiItem\n [label]=\"item.label\"\n appearance=\"primary\"\n shape=\"rounded\"\n size=\"m\"\n styles=\"width: max-content; margin-right: 1rem; box-shadow: #32325d40 0 13px 27px -5px, #0000004d 0 8px 16px -8px;\"\n [icon]=\"item.props.iconLeft || ''\"\n [iconRight]=\"item.props.iconRight || ''\"\n (onClick)=\"handleOnClickPrimaryAction(item)\"\n ></kwikui-button>\n </ng-container>\n <ng-template\n let-lastIndex\n tuiMore\n >\n <tui-hosted-dropdown\n tuiDropdownAlign=\"right\"\n class=\"item\"\n [content]=\"dropdown\"\n >\n <kwikui-button\n appearance=\"primary\"\n shape=\"rounded\"\n size=\"m\"\n icon=\"tuiIconMoreVertical\"\n styles=\"\n box-shadow: #32325d40 0 13px 27px -5px, #0000004d 0 8px 16px -8px;\n \"\n ></kwikui-button>\n <ng-template #dropdown>\n <tui-data-list size=\"l\">\n <ng-container\n *ngFor=\"let item of primaryActionsConfig; let index = index\"\n >\n <kwikui-button\n *ngIf=\"index > lastIndex\"\n tuiOption\n [label]=\"item.label\"\n appearance=\"primary\"\n shape=\"rounded\"\n size=\"m\"\n styles=\"width: calc(100% - 1rem); margin: 0.5rem;\"\n [icon]=\"item.props.iconLeft || ''\"\n [iconRight]=\"item.props.iconRight || ''\"\n (onClick)=\"handleOnClickPrimaryAction(item)\"\n ></kwikui-button>\n </ng-container>\n </tui-data-list>\n </ng-template>\n </tui-hosted-dropdown>\n </ng-template>\n </tui-items-with-more>\n</div>\n", styles: ["::-webkit-scrollbar{width:8px!important}::-webkit-scrollbar-track{border-radius:8px!important}::-webkit-scrollbar-thumb{background:lightgray!important;border-radius:8px!important}::-webkit-scrollbar-thumb:hover{background:gray!important}#primary-actions-container{width:-moz-fit-content;width:fit-content;margin-left:auto}@media only screen and (max-width: 600px){#primary-actions-container{display:flex;flex-direction:row;flex-wrap:nowrap;grid-gap:1.5rem;gap:1.5rem;align-items:flex-start;justify-content:flex-start}}::ng-deep .t-empty{display:none!important}\n"], components: [{ type: i1$1.TuiItemsWithMoreComponent, selector: "tui-items-with-more" }, { type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: i3.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "sided", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i3.TuiDataListComponent, selector: "tui-data-list", inputs: ["role", "emptyContent", "size"] }], directives: [{ type: i1$1.TuiItemsWithMoreDirective, selector: "tui-items-with-more", inputs: ["itemsLimit", "required"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.TuiItemDirective, selector: "[tuiItem]" }, { type: i1$1.TuiMoreDirective, selector: "[tuiMore]" }, { type: i6.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
__decorate([
logMethod
], PrimaryActionsComponent.prototype, "handleOnInitPrimaryActionsConfig", null);
__decorate([
logMethod
], PrimaryActionsComponent.prototype, "handleOnClickPrimaryAction", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PrimaryActionsComponent, decorators: [{
type: Component,
args: [{
selector: "primary-actions",
templateUrl: "./primary-actions.component.html",
styleUrls: ["./primary-actions.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: function () { return []; }, propDecorators: { primaryActionsConfig: [{
type: Input
}], onClickPrimaryAction: [{
type: Output
}], handleOnInitPrimaryActionsConfig: [], handleOnClickPrimaryAction: [] } });
class MapViewComponent {
constructor() {
this.mapConfig = {
isMapHidden: true
};
}
ngOnInit() {
return __awaiter(this, void 0, void 0, function* () { });
}
ngOnChanges(changes) {
const verifyChange = (key) => {
return changes.hasOwnProperty(key) && !changes[key].firstChange;
};
for (const change of Object.entries(changes)) {
const key = change[0];
const value = change[1].currentValue;
}
if (verifyChange("mapConfig")) {
this.mapConfig = changes.mapConfig.currentValue;
}
}
}
/** @nocollapse */ MapViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ MapViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MapViewComponent, selector: "map-view", inputs: { mapConfig: "mapConfig" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"map-view-container\">\n <iframe\n *ngIf=\"!mapConfig?.isMapHidden\"\n src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d942.4620332111369!2d72.89243374854026!3d19.114317185214237!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c90062467355%3A0xbc5e9528a3783c2b!2sBoomerang!5e0!3m2!1sen!2sin!4v1708350741641!5m2!1sen!2sin\"\n width=\"600\"\n height=\"450\"\n style=\"border: 0\"\n allowfullscreen=\"\"\n loading=\"lazy\"\n referrerpolicy=\"no-referrer-when-downgrade\"\n ></iframe>\n</div>\n", styles: [".map-view-container{width:100%;height:100%}.map-view-container iframe{width:100%!important;height:100%!important;position:relative}\n"], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapViewComponent, decorators: [{
type: Component,
args: [{
selector: "map-view",
templateUrl: "./map-view.component.html",
styleUrls: ["./map-view.component.scss"]
}]
}], ctorParameters: function () { return []; }, propDecorators: { mapConfig: [{
type: Input
}] } });
class TaskItemStatusComponent {
constructor() {
this.styles = {};
this.value = "";
}
ngOnInit() {
return __awaiter(this, void 0, void 0, function* () {
this.setupStatus();
});
}
ngOnChanges(changes) {
const verifyChange = (key) => {
return changes.hasOwnProperty(key) && !changes[key].firstChange;
};
if (verifyChange("config")) {
this.config = changes.config.currentValue;
}
if (verifyChange("status")) {
this.status = changes.status.currentValue;
this.setupStatus();
}
}
setupStatus() {
var _a, _b;
if (checkObjectPathExists(this.config, "mapping") &&
checkObjectKeyExists(this.config.mapping, this.status)) {
this.styles = this.config.mapping[this.status];
this.value =
(_b = (_a = this.config.mapping[this.status]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : convertSnakeCaseToNormalText(this.status);
}
}
}
/** @nocollapse */ TaskItemStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskItemStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ TaskItemStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TaskItemStatusComponent, selector: "task-item-status", inputs: { config: "config", status: "status" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"task-iem-status-container\"\n [style]=\"styles\"\n>\n {{ value }}\n</div>\n", styles: [".task-iem-status-container{width:-moz-fit-content;width:fit-content;padding:0 .4rem;font-size:.7rem;border-radius:1rem}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskItemStatusComponent, decorators: [{
type: Component,
args: [{
selector: "task-item-status",
templateUrl: "./task-item-status.component.html",
styleUrls: ["./task-item-status.component.scss"]
}]
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
type: Input
}], status: [{
type: Input
}] } });
class TaskDetailComponent {
constructor() {
this.config = {};
this.taskDetail = {};
this.data = [];
this.title = undefined;
this.taskId = undefined;
this.status = undefined;
this.labelValuePairConfig = {};
this.labelValuePairData = [];
this.onClickCloseTaskDetail = new EventEmitter();
}
ngOnInit() {
return __awaiter(this, void 0, void 0, function* () {
this.parseData();
this.parseTaskId();
this.parseSessionStatus();
});
}
ngOnChanges(changes) { }
parseData() {
var _a, _b, _c, _d, _e, _f, _g, _h;
if (checkObjectPathExists(this.config, "taskUI.details.data") &&
isNotEmptyValue(this.config.taskUI.details.data) &&
Array.isArray(this.config.taskUI.details.data) &&
this.config.taskUI.details.data.length > 0) {
const data = [];
this.config.taskUI.details.data.map((field) => {
const value = getObjectValueFromPath(this.taskDetail.data, field.path);
data.push({ label: field.label, value });
});
this.labelValuePairData = data;
this.labelValuePairConfig = (_d = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.taskUI) === null || _b === void 0 ? void 0 : _b.details) === null || _c === void 0 ? void 0 : _c.config) !== null && _d !== void 0 ? _d : {};
this.title = (_h = (_g = (_f = (_e = this.config) === null || _e === void 0 ? void 0 : _e.taskUI) === null || _f === void 0 ? void 0 : _f.details) === null || _g === void 0 ? void 0 : _g.header) === null || _h === void 0 ? void 0 : _h.title;
}
}
parseSessionStatus() {
var _a, _b, _c, _d, _e, _f, _g;
if (((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.utilityFlags) === null || _b === void 0 ? void 0 : _b.isShowTaskStatus) &&
checkObjectPathExists(this.config, "taskUI.details.header.taskStatus.path") &&
isNotEmptyValue(this.config.taskUI.details.header.taskStatus.path)) {
this.status = getObjectValueFromPath(this.taskDetail.data, (_g = (_f = (_e = (_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.taskUI) === null || _d === void 0 ? void 0 : _d.details) === null || _e === void 0 ? void 0 : _e.header) === null || _f === void 0 ? void 0 : _f.taskStatus) === null || _g === void 0 ? void 0 : _g.path);
}
}
parseTaskId() {
var _a, _b, _c, _d, _e;
if (checkObjectPathExists(this.config, "taskUI.details.header.taskId.path") &&
isNotEmptyValue(this.config.taskUI.details.header.taskId.path)) {
this.taskId = getObjectValueFromPath(this.taskDetail.data, (_e = (_d = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.taskUI) === null || _b === void 0 ? void 0 : _b.details) === null || _c === void 0 ? void 0 : _c.header) === null || _d === void 0 ? void 0 : _d.taskId) === null || _e === void 0 ? void 0 : _e.path);
}
}
handleOnClickClose(e) {
this.onClickCloseTaskDetail.emit(e);
}
handleOnClickPerformAction(e) {
alert(`${e.id}, Action yet to be added`);
}
}
/** @nocollapse */ TaskDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ TaskDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TaskDetailComponent, selector: "task-detail", inputs: { config: "config", taskDetail: "taskDetail" }, outputs: { onClickCloseTaskDetail: "onClickCloseTaskDetail" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"task-detail-container\">\n <kwikui-button\n appearance=\"primary\"\n icon=\"tuiIconChevronLeft\"\n label=\"Back\"\n size=\"s\"\n shape=\"rounded\"\n (onClick)=\"handleOnClickClose($event)\"\n ></kwikui-button>\n\n <div id=\"task-details-title\">{{ title }}</div>\n <div id=\"task-detail-header\">\n <div>{{ taskId }}</div>\n <task-item-status\n *ngIf=\"status\"\n [config]=\"config?.taskUI?.details?.header?.taskStatus\"\n [status]=\"status\"\n ></task-item-status>\n </div>\n\n <div id=\"task-details-container\">\n <kwikui-label-value-pair\n [config]=\"labelValuePairConfig\"\n [data]=\"labelValuePairData\"\n ></kwikui-label-value-pair>\n </div>\n\n <div\n id=\"task-detail-footer\"\n *ngIf=\"\n config?.taskUI?.details?.action &&\n config?.taskUI?.details?.action?.length > 0\n \"\n >\n <ng-container *ngFor=\"let action of config?.taskUI?.details?.action\">\n <kwikui-button\n [label]=\"action.label\"\n appearance=\"primary\"\n size=\"s\"\n shape=\"rounded\"\n (onClick)=\"handleOnClickPerformAction(action)\"\n ></kwikui-button>\n </ng-container>\n </div>\n</div>\n", styles: ["#task-detail-container{padding:1rem;font-size:1rem;display:flex;flex-direction:column;grid-gap:.5rem;gap:.5rem}#task-details-title{font-weight:600;font-size:1.5rem;margin:.5rem 0}#task-detail-header{display:flex;flex-direction:row;grid-gap:.5rem;gap:.5rem}#task-detail-footer{display:flex;flex-direction:row;grid-gap:.5rem;gap:.5rem}\n"], components: [{ type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: TaskItemStatusComponent, selector: "task-item-status", inputs: ["config", "status"] }, { type: i1.KwikUILabelValuePairComponent, selector: "kwikui-label-value-pair", inputs: ["config", "data", "id"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskDetailComponent, decorators: [{
type: Component,
args: [{
selector: "task-detail",
templateUrl: "./task-detail.component.html",
styleUrls: ["./task-detail.component.scss"]
}]
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
type: Input
}], taskDetail: [{
type: Input
}], onClickCloseTaskDetail: [{
type: Output
}] } });
class BottomSheetComponent {
constructor() {
this.isSwipeActive = false;
this.swipeDirection = null;
this.height = 320; // Initial height of the bottom sheet
this.minHeight = 54; // Initial height of the bottom sheet
}
ngOnInit() {
return __awaiter(this, void 0, void 0, function* () { });
}
onMouseStart(event) {
event.preventDefault();
this.isSwipeActive = true;
this.startY = event.clientY;
this.startHeight = this.parentElement.nativeElement.clientHeight;
}
onMouseMove(event) {
if (this.isSwipeActive) {
this.resize(event.clientY);
}
}
onMouseEnd(event) {
this.isSwipeActive = false;
}
onTouchStart(event) {
event.preventDefault();
this.isSwipeActive = true;
this.startY = event.touches[0].clientY;
this.startHeight = this.parentElement.nativeElement.clientHeight;
}
onTouchMove(event) {
event.preventDefault(); // Prevent scrolling while dragging
if (this.isSwipeActive) {
this.resize(event.touches[0].clientY);
}
}
onTouchEnd(event) {
this.isSwipeActive = false;
}
resize(clientY) {
const deltaY = clientY - this.startY;
const newHeight = this.startHeight - deltaY;
if (newHeight > this.startHeight) {
this.swipeDirection = "UP";
}
if (newHeight < this.startHeight) {
this.swipeDirection = "DOWN";
}
const maxHeight = window.innerHeight - 180;
if (newHeight >= this.minHeight && newHeight <= maxHeight) {
// this.height = newHeight;
this.parentElement.nativeElement.style.height = `${newHeight}px`;
}
else if (newHeight < this.minHeight) {
this.parentElement.nativeElement.style.height = `${this.minHeight}px`;
}
else if (newHeight > maxHeight) {
this.parentElement.nativeElement.style.height = `${maxHeight}px`;
}
}
preventMouseOrTouchEvents(event) {
event.stopPropagation();
return undefined;
}
removeEventListeners() {
document.removeEventListener("mousedown", this.onMouseStart.bind(this));
document.removeEventListener("mousemove", this.onMouseMove.bind(this));
document.removeEventListener("mouseup", this.onMouseEnd.bind(this));
document.removeEventListener("touchend", this.onTouchMove.bind(this));
document.removeEventListener("touchmove", this.onTouchEnd.bind(this));
document.removeEventListener("touchstart", this.onTouchEnd.bind(this));
}
}
/** @nocollapse */ BottomSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ BottomSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BottomSheetComponent, selector: "bottom-sheet", viewQueries: [{ propertyName: "parentElement", first: true, predicate: ["parentElement"], descendants: true, static: true }], ngImport: i0, template: "<div\n #parentElement\n class=\"bottom-sheet\"\n [style.height.px]=\"height\"\n>\n <div\n class=\"top-holder\"\n (mousedown)=\"onMouseStart($event)\"\n (mousemove)=\"onMouseMove($event)\"\n (mouseup)=\"onMouseEnd($event)\"\n (touchend)=\"onTouchEnd($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchstart)=\"onTouchStart($event)\"\n >\n <tui-svg\n *ngIf=\"isSwipeActive && swipeDirection == 'UP'\"\n src=\"tuiIconChevronUpLarge\"\n ></tui-svg>\n <tui-svg\n *ngIf=\"isSwipeActive && swipeDirection == 'DOWN'\"\n src=\"tuiIconChevronDownLarge\"\n ></tui-svg>\n <tui-svg\n *ngIf=\"!isSwipeActive\"\n src=\"tuiIconHrLarge\"\n ></tui-svg>\n </div>\n <!-- Use ng-content to project content into the component -->\n <div class=\"bottom-sheet-content-container\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".bottom-sheet{position:absolute;bottom:0;left:0;width:100%;background-color:#fff;box-shadow:0 -2px 6px #0000001a;overflow:auto;resize:vertical;border-top-right-radius:1rem;border-top-left-radius:1rem;display:flex;flex-direction:column;z-index:5;padding-top:1rem}.top-holder{width:100%;height:40px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;cursor:grab;z-index:1}.top-holder:focus,.top-holder:focus-within,.top-holder:active{cursor:grabbing}.resize-handle{position:absolute;bottom:0;left:0;width:100%;height:10px;cursor:ns-resize;background-color:transparent}.bottom-sheet-content-container{width:100%;height:100%;position:relative;z-index:1;overflow:auto}\n"], components: [{ type: i3.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
__decorate([
logMethod
], BottomSheetComponent.prototype, "onMouseStart", null);
__decorate([
logMethod
], BottomSheetComponent.prototype, "onMouseEnd", null);
__decorate([
logMethod
], BottomSheetComponent.prototype, "onTouchStart", null);
__decorate([
logMethod
], BottomSheetComponent.prototype, "onTouchMove", null);
__decorate([
logMethod
], BottomSheetComponent.prototype, "onTouchEnd", null);
__decorate([
logMethod
], BottomSheetComponent.prototype, "preventMouseOrTouchEvents", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BottomSheetComponent, decorators: [{
type: Component,
args: [{
selector: "bottom-sheet",
templateUrl: "./bottom-sheet.component.html",
styleUrls: ["./bottom-sheet.component.scss"]
}]
}], ctorParameters: function () { return []; }, propDecorators: { parentElement: [{
type: ViewChild,
args: ["parentElement", { static: true }]
}], onMouseStart: [], onMouseEnd: [], onTouchStart: [], onTouchMove: [], onTouchEnd: [], preventMouseOrTouchEvents: [] } });
const padZeroValuesInStart = (value, digits = 2) => {
return String(value).padStart(digits, "0");
};
const convertKwikUIDateToStringFormat = (event) => {
const { year } = event;
const month = padZeroValuesInStart(event.month + 1, 2);
const day = padZeroValuesInStart(event.day);
return `${year}-${month}-${day}`;
};
const convertNormalDateToStringFormat = (value) => {
const date = value ? new Date(value) : new Date();
const year = date.getFullYear();
const month = padZeroValuesInStart(date.getMonth() + 1);
const day = padZeroValuesInStart(date.getDate());
return `${year}-${month}-${day}`;
};
const sortItems = (data, key, sortInAscendingOrder) => {
if (!data || data.length === 0) {
return data; // Skip sorting if no items are available
}
const sortedData = sortInAscendingOrder
? data.sort((a, b) => (a[key] > b[key] ? 1 : b[key] > a[key] ? -1 : 0))
: data.sort((b, a) => (a[key] > b[key] ? 1 : b[key] > a[key] ? -1 : 0));
return sortedData;
};
class TaskListSearchComponent {
constructor() {
// Search Text
this.searchText = "";
this.formGroup = new FormGroup({});
this.sortInAscendingOrder = true;
// Date Range Values
this.start_time = undefined;
this.end_time = undefined;
this.max = new TuiDay(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
// Sorting Variables
this.sortFilterOptions = ["name", "session_status", "mobile_number"];
this.activeSearchAction = undefined;
this.onFilterTasksByText = new EventEmitter();
this.onFilterTasksByDate = new EventEmitter();
this.onChangeSortFilter = new EventEmitter();
}
ngOnInit() {
this.handleSearchAndSortFormControls();
this.handleInitialDateRange();
}
handleOnClickSearchType(type) {
if (this.activeSearchAction !== type) {
this.activeSearchAction = type;
}
else {
this.activeSearchAction = undefined;
}
}
handleInitialDateRange() {
var _a, _b, _c, _d, _e, _f;
const searchFilterStartPoint = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.extendedFlags) === null || _b === void 0 ? void 0 : _b.searchFilterStartPoint) !== null && _c !== void 0 ? _c : {
day: 0,
month: 0,
year: 0
};
const currentDate = new Date();
const startDate = new Date((_d = currentDate.getFullYear() - (searchFilterStartPoint === null || searchFilterStartPoint === void 0 ? void 0 : searchFilterStartPoint.year)) !== null && _d !== void 0 ? _d : 0, (_e = currentDate.getMonth() - (searchFilterStartPoint === null || searchFilterStartPoint === void 0 ? void 0 : searchFilterStartPoint.month)) !== null && _e !== void 0 ? _e : 0, (_f = currentDate.getDate() - (searchFilterStartPoint === null || searchFilterStartPoint === void 0 ? void 0 : searchFilterStartPoint.day)) !== null && _f !== void 0 ? _f : 0);
this.searchDateFormControl = new FormControl({
value: new TuiDayRange(new TuiDay(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()), this.max),
disabled: false
});
this.formGroup.addControl("search-date", this.searchDateFormControl);
this.start_time = convertNormalDateToStringFormat(startDate);
this.end_time = convertNormalDateToStringFormat(null);
// To get Tasks for First Time
this.onFilterTasksByDate.emit({
start_time: this.start_time,
end_time: this.end_time
});
}
handleSearchAndSortFormControls() {
var _a, _b, _c;
this.searchTextFormControl = new FormControl("");
this.formGroup.addControl("search-text", this.searchTextFormControl);
this.sortFilterKeyFormControl = new FormControl("");
this.formGroup.addControl("sort-filter", this.sortFilterKeyFormControl);
this.sortFilterOptions =
(_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.extendedFlags) === null || _b === void 0 ? void 0 : _b.sortFilterKeys) !== null && _c !== void 0 ? _c : this.sortFilterOptions;
}
handleOnChangeSearchText(event) {
this.onFilterTasksByText.emit({ text: event.value });
}
handleOnChangeDateRange(event) {
this.handleChangeDateRangeFormat(event);
this.onFilterTasksByDate.emit({
start_time: this.start_time,
end_time: this.end_time
});
}
handleOnChangeSortFilter(event) {
this.onChangeSortFilter.emit({
sortFilterKey: this.sortFilterKeyFormControl.value,
sortFilterOrder: this.sortInAscendingOrder
});
}
handleOnClickChangeSortOrder() {
this.sortInAscendingOrder = !this.sortInAscendingOrder;
this.handleOnChangeSortFilter(false);
}
handleChangeDateRangeFormat(event) {
this.start_time = convertKwikUIDateToStringFormat(event.value.from);
this.end_time = convertKwikUIDateToStringFormat(event.value.to);
}
}
/** @nocollapse */ TaskListSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskListSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ TaskListSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TaskListSearchComponent, selector: "task-list-search", inputs: { config: "config" }, outputs: { onFilterTasksByText: "onFilterTasksByText", onFilterTasksByDate: "onFilterTasksByDate", onChangeSortFilter: "onChangeSortFilter" }, ngImport: i0, template: "<div\n class=\"task-list-search-container\"\n [formGroup]=\"formGroup\"\n>\n <div class=\"task-list-search-icons\">\n <kwikui-button\n appearance=\"mono\"\n icon=\"tuiIconSearchLarge\"\n size=\"s\"\n type=\"button\"\n (onClick)=\"handleOnClickSearchType('search-text')\"\n ></kwikui-button>\n <kwikui-button\n appearance=\"mono\"\n icon=\"tuiIconCalendarLarge\"\n size=\"s\"\n type=\"button\"\n (onClick)=\"handleOnClickSearchType('search-date')\"\n ></kwikui-button>\n <kwikui-button\n *ngIf=\"config?.utilityFlags?.isAllowSortTasks\"\n appearance=\"mono\"\n icon=\"tuiIconFilterLarge\"\n size=\"s\"\n type=\"button\"\n (onClick)=\"handleOnClickSearchType('sort-filter')\"\n ></kwikui-button>\n </div>\n\n <div\n class=\"task-list-search-action\"\n *ngIf=\"activeSearchAction\"\n >\n <kwikui-input-date-range\n *ngIf=\"activeSearchAction == 'search-date'\"\n class=\"task-list-date-box\"\n label=\"Search by Date Range\"\n id=\"dateRange\"\n size=\"m\"\n [max]=\"max\"\n [maxLength]=\"maxLength\"\n formControlName=\"search-date\"\n [formControl]=\"searchDateFormControl\"\n (getKeyValue)=\"handleOnChangeDateRange($event)\"\n ></kwikui-input-date-range>\n\n <kwikui-input\n *ngIf=\"activeSearchAction == 'search-text'\"\n label=\"Search\"\n id=\"search\"\n icon=\"tuiIconSearch\"\n placeholder=\"Search any task from here\"\n size=\"m\"\n [formControl]=\"searchTextFormControl\"\n formControlName=\"search-text\"\n (getKeyValue)=\"handleOnChangeSearchText($event)\"\n ></kwikui-input>\n\n <div\n *ngIf=\"activeSearchAction == 'sort-filter'\"\n class=\"task-list-sort-action\"\n >\n <kwikui-button\n appearance=\"outline\"\n [icon]=\"\n sortInAscendingOrder\n ? 'tuiIconChevronsUpLarge'\n : 'tuiIconChevronsDownLarge'\n \"\n size=\"m\"\n type=\"button\"\n (onClick)=\"handleOnClickChangeSortOrder()\"\n ></kwikui-button>\n <kwikui-input-select\n class=\"task-list-sort-key\"\n formControlName=\"sort-filter\"\n label=\"Sort By Key\"\n size=\"m\"\n [formControl]=\"sortFilterKeyFormControl\"\n [options]=\"sortFilterOptions\"\n [searchable]=\"false\"\n (getKeyValue)=\"handleOnChangeSortFilter($event)\"\n ></kwikui-input-select>\n </div>\n </div>\n</div>\n", styles: [".task-list-search-container{width:100%}.task-list-search-container .task-list-search-icons{display:flex;justify-content:flex-end;align-items:center;flex-direction:row;grid-gap:.5rem;gap:.5rem}.task-list-search-container .task-list-search-action{margin-top:.5rem}.task-list-search-container .task-list-search-action .task-list-sort-action{display:flex;flex-direction:row;grid-gap:.5rem;gap:.5rem}.task-list-search-container .task-list-search-action .task-list-sort-action .task-list-sort-key{flex:1}\n"], components: [{ type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: i1.KwikUIInputDateRangeComponent, selector: "kwikui-input-date-range", inputs: ["disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "max", "maxLength", "min", "minLength", "placeholder", "postfix", "prefix", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["case", "disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "placeholder", "postfix", "prefix", "properties", "size", "type", "validators"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputSelectComponent, selector: "kwikui-input-select", inputs: ["disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "options", "placeholder", "properties", "searchable", "size", "validators"], outputs: ["getKeyValue"] }], directives: [{ type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
__decorate([
logMethod
], TaskListSearchComponent.prototype, "handleOnChangeSearchText", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskListSearchComponent, decorators: [{
type: Component,
args: [{
selector: "task-list-search",
templateUrl: "./task-list-search.component.html",
styleUrls: ["./task-list-search.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
type: Input
}], onFilterTasksByText: [{
type: Output
}], onFilterTasksByDate: [{
type: Output
}], onChangeSortFilter: [{
type: Output
}], handleOnChangeSearchText: [] } });
const PREVIEW_DATA_DEFAULT_CONFIG = {
separator: ":",
orientation: "horizontal",
placeholder: "-",
customStyles: {
label: {},
value: {},
placeholder: {},
container: {}
}
};
class TaskItemComponent {
constructor() {
this.config = {};
this.data = {};
this.header = "";
this.status = "";
this.previewConfig = {};
this.previewData = [];
this.onClickTaskItem = new EventEmitter();
this.onClickTaskItemViewDetail = new EventEmitter();
this.onClickPerformAction = new EventEmitter();
}
ngOnInit() {
return __awaiter(this, void 0, void 0, function* () {
this.parseHeader();
this.parseSessionStatus();
this.parsePreviewData();
});
}
parseHeader() {
var _a, _b, _c, _d;
if (checkObjectPathExists(this.config, "taskUI.header.taskId.path") &&
isNotEmptyValue(this.config.taskUI.header.taskId.path)) {
this.header = getObjectValueFromPath(this.data, (_d = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.taskUI) === null || _b === void 0 ? void 0 : _b.header) === null || _c === void 0 ? void 0 : _c.taskId) === null || _d === void 0 ? void 0 : _d.path);
}
if (checkObjectPathExists(this.config, "taskUI.header.taskId.maxLengthToShow") &&
isNotEmptyValue(this.config.taskUI.header.taskId.maxLengthToShow) &&
this.header.length > this.config.taskUI.header.taskId.maxLengthToShow) {
this.header = `${this.header.slice(0, this.config.taskUI.header.taskId.maxLengthToShow)}...`;
}
}
parseSessionStatus() {
var _a, _b, _c, _d, _e, _f;
if (((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.utilityFlags) === null || _b === void 0 ? void 0 : _b.isShowTaskStatus) &&
checkObjectPathExists(this.config, "taskUI.header.taskStatus.path") &&
isNotEmptyValue(this.config.taskUI.header.taskStatus.path)) {
this.status = getObjectValueFromPath(this.data, (_f = (_e = (_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.taskUI) === null || _d === void 0 ? void 0 : _d.header) === null || _e === void 0 ? void 0 : _e.taskStatus) === null || _f === void 0 ? void 0 : _f.path);
}
}
parsePreviewData() {
var _a, _b, _c, _d;
if (checkObjectPathExists(this.config, "taskUI.preview.data") &&
isNotEmptyValue(this.config.taskUI.preview.data) &&
Array.isArray(this.config.taskUI.preview.data) &&
this.config.taskUI.preview.data.length > 0) {
const previewData = [];
this.config.taskUI.preview.data.map((field) => {
const value = getObjectValueFromPath(this.data, field.path);
previewData.push({ label: field.label, value });
});
this.previewData = previewData;
this.previewConfig =
(_d = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.taskUI) === null || _b === void 0 ? void 0 : _b.preview) === null || _c === void 0 ? void 0 : _c.config) !== null && _d !== void 0 ? _d : PREVIEW_DATA_DEFAULT_CONFIG;
}
}
handleOnClickTaskItem(e, taskItemData) {
this.onClickTaskItem.emit({
data: taskItemData
});
}
handleOnClickTaskItemViewDetail(e, taskItemData) {
this.onClickTaskItemViewDetail.emit({
data: taskItemData
});
}
handleOnClickPerformAction(e, action) {
this.onClickPerformAction.emit({
action
});
}
}
/** @nocollapse */ TaskItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ TaskItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TaskItemComponent, selector: "task-item", inputs: { config: "config", data: "data" }, outputs: { onClickTaskItem: "onClickTaskItem", onClickTaskItemViewDetail: "onClickTaskItemViewDetail", onClickPerformAction: "onClickPerformAction" }, ngImport: i0, template: "<tui-accordion\n class=\"task-item-container\"\n (click)=\"handleOnClickTaskItem($event, data)\"\n>\n <tui-accordion-item>\n <div class=\"task-item-header\">\n <div class=\"task-item-id\">{{ header }}</div>\n <task-item-status\n *ngIf=\"status\"\n [config]=\"config?.taskUI?.header?.taskStatus\"\n [status]=\"status\"\n ></task-item-status>\n </div>\n <ng-template tuiAccordionItemContent>\n <div class=\"task-item-preview\">\n <kwikui-label-value-pair\n [config]=\"previewConfig\"\n [data]=\"previewData\"\n ></kwikui-label-value-pair>\n </div>\n <div class=\"task-item-footer\">\n <kwikui-button\n appearance=\"primary\"\n label=\"View Detail\"\n shape=\"rounded\"\n