barsa-kanban 0.0.2

package/fesm2015/barsa-kanban.mjs

@@ -0,0 +1,476 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, ViewChild, ElementRef, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import * as i2 from 'barsa-novin-ray-core';
+import { BaseComponent, BaseViewItemPropsComponent, FormPanelService, ReportViewBaseComponent, BaseModule, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5 from '@fundamental-ngx/core/button';
+import * as i6 from '@fundamental-ngx/core/form';
+import * as i4 from '@fundamental-ngx/core/info-label';
+import * as i7 from '@fundamental-ngx/core/popover';
+import * as i6$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i4$1 from '@fundamental-ngx/core/card';
+import * as i4$2 from '@fundamental-ngx/core/icon';
+import * as i5$1 from '@fundamental-ngx/platform/shared';
+import * as i6$2 from '@fundamental-ngx/platform/action-button-group';
+import * as i7$1 from '@fundamental-ngx/platform/button';
+import * as i8 from '@fundamental-ngx/platform/menu';
+import * as i9 from 'barsa-sap-ui';
+import { BarsaSapUiModule } from 'barsa-sap-ui';
+import { ESCAPE, TAB, SPACE, ENTER } from '@angular/cdk/keycodes';
+import { KeyUtil } from '@fundamental-ngx/core/utils';
+import { AvatarGroupComponent, FundamentalNgxCoreModule } from '@fundamental-ngx/core';
+import * as i2$1 from '@fundamental-ngx/core/avatar';
+import * as i3 from '@fundamental-ngx/core/avatar-group';
+import * as i4$3 from '@fundamental-ngx/core/bar';
+import * as i6$3 from '@fundamental-ngx/core/list';
+import * as i13 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i5$2 from '@fundamental-ngx/core/checkbox';
+import * as i8$1 from '@fundamental-ngx/core/layout-grid';
+import * as i9$1 from '@fundamental-ngx/core/layout-panel';
+import * as i10 from '@fundamental-ngx/core/table';
+import { FundamentalNgxPlatformModule } from '@fundamental-ngx/platform';
+import { BarsaEchartsModule } from 'barsa-echarts';
+import { HttpClientModule } from '@angular/common/http';
+
+class KanbanBaseComponent extends BaseComponent {
+    openPopover(e, popover) {
+        e.stopPropagation();
+        e.preventDefault();
+        popover.toggle();
+    }
+    closePopover(popover) {
+        popover.close();
+    }
+}
+KanbanBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: KanbanBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KanbanBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: KanbanBaseComponent, selector: "bk-kanban-base", usesInheritance: true, ngImport: i0, template: "<p>kanban-base works!</p>\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: KanbanBaseComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-kanban-base', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>kanban-base works!</p>\r\n" }]
+        }] });
+
+class KanbanTagsComponent extends KanbanBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.colorList = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
+        this.currentTagLabel = '';
+        this.selectedColor = '';
+    }
+    colorClick(color) {
+        this.selectedColor = color;
+    }
+    addTag() {
+        const newTag = { Id: '', $Caption: '' };
+        newTag[this.viewSetting.TagColor] = this.selectedColor;
+        newTag[this.viewSetting.TagName] = this.currentTagLabel;
+        this.tags.push(newTag);
+        this.currentTagLabel = '';
+        this.selectedColor = '';
+    }
+    deleteTag(index) {
+        this.tags.splice(index, 1);
+    }
+}
+KanbanTagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: KanbanTagsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KanbanTagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: KanbanTagsComponent, selector: "bk-kanban-tags", inputs: { tags: "tags", viewSetting: "viewSetting" }, usesInheritance: true, ngImport: i0, template: "<div class=\"row tags-container\">\n    <ng-container *ngFor=\"let tag of tags; let i = index\">\n        <fd-popover placement=\"bottom\" [closeOnOutsideClick]=\"true\">\n            <fd-popover-control>\n                <div class=\"tag\">\n                    <fd-info-label\n                        [label]=\"tag[viewSetting.TagName]\"\n                        [color]=\"tag[viewSetting.TagColor]\"\n                        [title]=\"tag[viewSetting.TagName]\"\n                    ></fd-info-label>\n                </div>\n            </fd-popover-control>\n            <fd-popover-body>\n                <div class=\"tag-delete\">\n                    <button fd-button (click)=\"deleteTag(i)\" [label]=\"'Delete' | bbbTranslate\" glyph=\"decline\"></button>\n                </div>\n            </fd-popover-body>\n        </fd-popover>\n    </ng-container>\n\n    <fd-popover\n        #tagPopover\n        [triggers]=\"[]\"\n        [focusTrapped]=\"false\"\n        [closeOnOutsideClick]=\"true\"\n        [noArrow]=\"false\"\n        placement=\"bottom\"\n        [focusAutoCapture]=\"true\"\n    >\n        <fd-popover-control>\n            <div>\n                <button\n                    fd-button\n                    (click)=\"openPopover($event, tagPopover)\"\n                    fdType=\"transparent\"\n                    glyph=\"sys-add\"\n                ></button>\n            </div>\n        </fd-popover-control>\n        <fd-popover-body>\n            <div class=\"new-tag\" (keydown.enter)=\"addTag()\">\n                <div fd-form-item class=\"row\">\n                    <input fd-form-control type=\"text\" [(ngModel)]=\"currentTagLabel\" id=\"input-1\" placeholder=\" \u0646\u0627\u0645\" />\n                </div>\n                <div class=\"colors-colection row\">\n                    <div\n                        *ngFor=\"let color of colorList\"\n                        (click)=\"colorClick(color)\"\n                        [ngClass]=\"'fd-info-label--accent-color-' + color\"\n                        [class.selected-color]=\"selectedColor === color\"\n                        class=\"color\"\n                    ></div>\n                </div>\n                <div class=\"ok-cancel-btns row\">\n                    <button fd-button [label]=\"'Ok' | bbbTranslate\" [fdType]=\"'emphasized'\" (click)=\"addTag()\"></button>\n                    <button\n                        fd-button\n                        [label]=\"'Cancel' | bbbTranslate\"\n                        [fdType]=\"'transparent'\"\n                        (click)=\"closePopover(tagPopover)\"\n                    ></button>\n                </div>\n            </div>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n", styles: [":host ::ng-deep .fd-info-label__text{height:auto!important}.row,.new-tag .colors-colection{display:flex;align-items:center}.tags-container{column-gap:10px;flex-wrap:wrap}.new-tag{padding:15px;max-width:200px;row-gap:15px;display:flex;flex-direction:column;justify-content:center;align-items:center}.new-tag .row,.new-tag .colors-colection{column-gap:15px;width:100%}.new-tag .colors-colection{flex-wrap:wrap;row-gap:10px}.new-tag .colors-colection .color{width:40px;height:24px;border-radius:10px;border:1px solid var(--sapBackgroundColor, #f7f7f7)}.new-tag .colors-colection .selected-color{border-color:var(--sapList_SelectionBorderColor, #0854a0)}.ok-cancel-btns{justify-content:flex-end}.tag-delete{display:flex;align-items:center;justify-content:center;width:100px;height:80px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class"] }, { kind: "directive", type: i6.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i6.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i4.InfoLabelComponent, selector: "fd-info-label", inputs: ["class", "type", "glyph", "font", "color", "label", "title", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i7.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i6$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: KanbanTagsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-kanban-tags', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row tags-container\">\n    <ng-container *ngFor=\"let tag of tags; let i = index\">\n        <fd-popover placement=\"bottom\" [closeOnOutsideClick]=\"true\">\n            <fd-popover-control>\n                <div class=\"tag\">\n                    <fd-info-label\n                        [label]=\"tag[viewSetting.TagName]\"\n                        [color]=\"tag[viewSetting.TagColor]\"\n                        [title]=\"tag[viewSetting.TagName]\"\n                    ></fd-info-label>\n                </div>\n            </fd-popover-control>\n            <fd-popover-body>\n                <div class=\"tag-delete\">\n                    <button fd-button (click)=\"deleteTag(i)\" [label]=\"'Delete' | bbbTranslate\" glyph=\"decline\"></button>\n                </div>\n            </fd-popover-body>\n        </fd-popover>\n    </ng-container>\n\n    <fd-popover\n        #tagPopover\n        [triggers]=\"[]\"\n        [focusTrapped]=\"false\"\n        [closeOnOutsideClick]=\"true\"\n        [noArrow]=\"false\"\n        placement=\"bottom\"\n        [focusAutoCapture]=\"true\"\n    >\n        <fd-popover-control>\n            <div>\n                <button\n                    fd-button\n                    (click)=\"openPopover($event, tagPopover)\"\n                    fdType=\"transparent\"\n                    glyph=\"sys-add\"\n                ></button>\n            </div>\n        </fd-popover-control>\n        <fd-popover-body>\n            <div class=\"new-tag\" (keydown.enter)=\"addTag()\">\n                <div fd-form-item class=\"row\">\n                    <input fd-form-control type=\"text\" [(ngModel)]=\"currentTagLabel\" id=\"input-1\" placeholder=\" \u0646\u0627\u0645\" />\n                </div>\n                <div class=\"colors-colection row\">\n                    <div\n                        *ngFor=\"let color of colorList\"\n                        (click)=\"colorClick(color)\"\n                        [ngClass]=\"'fd-info-label--accent-color-' + color\"\n                        [class.selected-color]=\"selectedColor === color\"\n                        class=\"color\"\n                    ></div>\n                </div>\n                <div class=\"ok-cancel-btns row\">\n                    <button fd-button [label]=\"'Ok' | bbbTranslate\" [fdType]=\"'emphasized'\" (click)=\"addTag()\"></button>\n                    <button\n                        fd-button\n                        [label]=\"'Cancel' | bbbTranslate\"\n                        [fdType]=\"'transparent'\"\n                        (click)=\"closePopover(tagPopover)\"\n                    ></button>\n                </div>\n            </div>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n", styles: [":host ::ng-deep .fd-info-label__text{height:auto!important}.row,.new-tag .colors-colection{display:flex;align-items:center}.tags-container{column-gap:10px;flex-wrap:wrap}.new-tag{padding:15px;max-width:200px;row-gap:15px;display:flex;flex-direction:column;justify-content:center;align-items:center}.new-tag .row,.new-tag .colors-colection{column-gap:15px;width:100%}.new-tag .colors-colection{flex-wrap:wrap;row-gap:10px}.new-tag .colors-colection .color{width:40px;height:24px;border-radius:10px;border:1px solid var(--sapBackgroundColor, #f7f7f7)}.new-tag .colors-colection .selected-color{border-color:var(--sapList_SelectionBorderColor, #0854a0)}.ok-cancel-btns{justify-content:flex-end}.tag-delete{display:flex;align-items:center;justify-content:center;width:100px;height:80px}\n"] }]
+        }], propDecorators: { tags: [{
+                type: Input
+            }], viewSetting: [{
+                type: Input
+            }] } });
+
+class KanbanCardComponent extends BaseViewItemPropsComponent {
+    constructor() {
+        super(...arguments);
+        this.moTasksCount = 4;
+        this.moFinishedTasksCount = 2;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.moTaskPercentage = Math.floor((this.moFinishedTasksCount / this.moTasksCount) * 100);
+    }
+}
+KanbanCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: KanbanCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KanbanCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: KanbanCardComponent, selector: "bk-kanban-card", inputs: { index: "index", mo: "mo", viewSetting: "viewSetting", allAvailableAssignees: "allAvailableAssignees" }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<fd-card cardType=\"quickView\" class=\"docs-flex-item-margin\" style=\"background: transparent\" ellipsify>\n    <div class=\"row task-cover\">\n        <img\n            [src]=\"\n                viewSetting.Cover\n                    ? (mo[viewSetting.Cover]?.FileId\n                      | picFieldSrc: 'ID':viewSetting[viewSetting.Cover + 'Column']?.FieldDefId)\n                    : ''\n            \"\n        />\n    </div>\n    <fdp-action-button-group class=\"card-menu\">\n        <fdp-button\n            contentDensity=\"compact\"\n            glyph=\"overflow\"\n            buttonType=\"transparent\"\n            [fdpMenuTriggerFor]=\"basicMenu\"\n        ></fdp-button>\n        <fdp-menu #basicMenu id=\"basic-menu\" [xPosition]=\"'before'\">\n            <fdp-menu-item>{{ 'Edit' | bbbTranslate }}</fdp-menu-item>\n            <fdp-menu-item>{{ 'Delete' | bbbTranslate }}</fdp-menu-item>\n        </fdp-menu>\n    </fdp-action-button-group>\n    <fd-card-content>\n        <bsu-ly-layout-container-of-root\n            *ngIf=\"layout$ | async as layout94\"\n            [config]=\"layout94\"\n            [isPanel]=\"false\"\n            [isRoot]=\"true\"\n        ></bsu-ly-layout-container-of-root>\n    </fd-card-content>\n    <fd-card-footer>\n        <div class=\"kanban-footer row\">\n            <div class=\"comment row\">\n                <fd-icon glyph=\"post\"></fd-icon>\n                {{ mo[viewSetting.CommentsCount] }}\n            </div>\n            <div class=\"attachment row\">\n                <fd-icon glyph=\"attachment\"></fd-icon>\n                {{ mo[viewSetting.AttachesCount] }}\n            </div>\n\n            <div class=\"task row\">\n                {{ mo[viewSetting.ProgressLabel] }}\n                <div class=\"circle-icon\">\n                    <fd-icon glyph=\"accept\"></fd-icon>\n                </div>\n            </div>\n        </div>\n    </fd-card-footer>\n</fd-card>\n", styles: [":host{position:relative}:host.selected{background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}:host.selected fd-card{border-color:var(--sapList_SelectionBorderColor, #0854a0)}:host.selected fd-card,:host.selected fd-card-header,:host.selected .fd-bar--footer,:host.selected fd-quick-view-subheader .fd-bar{background-color:inherit!important}.row{display:flex;align-items:center}.fd-card{background:var(--sapBackgroundColor, #f7f7f7)!important;box-shadow:none}.fd-card:hover .card-menu fdp-button{display:block}.fd-card .card-menu{position:absolute;right:1rem;top:1rem;background-color:#fff}.fd-card .card-menu fdp-button{display:none}.fd-card .card-menu [aria-controls=fdp-menu-basic-menu]{display:block}.fd-card .task-cover{width:100%;height:150px;justify-content:center}.fd-card .task-cover img{object-fit:cover;width:100%;height:100%}.fd-card fd-card-content{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;row-gap:20px;padding:1rem}.fd-card fd-card-content .progress-indicator{flex:1}.fd-card fd-card-content .progress-indicator ::ng-deep .fd-progress-indicator__remaining{display:flex;align-items:center}.fd-card ::ng-deep fd-info-label .fd-info-label__text{display:inline-flex!important}.kanban-footer{padding:1rem;column-gap:10px}.kanban-footer .comment,.kanban-footer .attachment,.kanban-footer .task{column-gap:2px}.kanban-footer .task{margin-right:auto}.kanban-footer .task .circle-icon{width:calc(var(--sapFontSize, .875rem) + 6px);height:calc(var(--sapFontSize, .875rem) + 6px);border-radius:calc(var(--sapFontSize, .875rem) + 6px);border:1px solid var(--sapButton_BorderColor, #0854a0);display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "component", type: i4$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i4$1.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i4$1.CardFooterComponent, selector: "fd-card-footer" }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i5$1.PlatformContentDensityDeprecationDirective, selector: "        fdp-action-bar[contentDensity],        fdp-button[contentDensity],        fdp-object-list-item[contentDensity],        fdp-standard-list-item[contentDensity],        fdp-menu[contentDensity],        fdp-menu-button[contentDensity],        fdp-panel[contentDensity],        fdp-search-field[contentDensity],        fdp-split-menu-button[contentDensity],        fdp-file-uploader[contentDensity],        fdp-upload-collection[contentDensity],        fdp-table[contentDensity],        fdp-multi-input[contentDensity],        fdp-list[contentDensity],        fdp-slider[contentDensity],        fdp-time-picker[contentDensity],        fdp-textarea[contentDensity],        fdp-switch[contentDensity],        fdp-number-step-input[contentDensity],        fdp-select[contentDensity],        fdp-date-picker[contentDensity],        fdp-checkbox[contentDensity],        fdp-checkbox-group[contentDensity],        fdp-combobox[contentDensity],        fdp-datetime-picker[contentDensity],        fdp-input[contentDensity],        fdp-radio-group[contentDensity],        fdp-radio-button[contentDensity],        fdp-multi-combobox[contentDensity],        fdp-input-group-addon-body[contentDensity],        fdp-input-group[contentDensity],        fdp-value-help-dialog[contentDensity],        fdp-filter-single-select[contentDensity],        fdp-filter-multi-select[contentDensity],        fdp-filter-custom[contentDensity]    " }, { kind: "component", type: i6$2.ActionButtonGroupComponent, selector: "fdp-action-button-group" }, { kind: "component", type: i7$1.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: i8.MenuComponent, selector: "fdp-menu", inputs: ["id", "openByArrowKeys", "xPosition"], outputs: ["close"] }, { kind: "component", type: i8.MenuItemComponent, selector: "fdp-menu-item", inputs: ["disabled", "cascadeDirection"], outputs: ["itemSelect"] }, { kind: "directive", type: i8.MenuTriggerDirective, selector: "[fdpMenuTriggerFor]", inputs: ["fdpMenuTriggerFor"] }, { kind: "component", type: i9.LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: KanbanCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-kanban-card', providers: [FormPanelService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-card cardType=\"quickView\" class=\"docs-flex-item-margin\" style=\"background: transparent\" ellipsify>\n    <div class=\"row task-cover\">\n        <img\n            [src]=\"\n                viewSetting.Cover\n                    ? (mo[viewSetting.Cover]?.FileId\n                      | picFieldSrc: 'ID':viewSetting[viewSetting.Cover + 'Column']?.FieldDefId)\n                    : ''\n            \"\n        />\n    </div>\n    <fdp-action-button-group class=\"card-menu\">\n        <fdp-button\n            contentDensity=\"compact\"\n            glyph=\"overflow\"\n            buttonType=\"transparent\"\n            [fdpMenuTriggerFor]=\"basicMenu\"\n        ></fdp-button>\n        <fdp-menu #basicMenu id=\"basic-menu\" [xPosition]=\"'before'\">\n            <fdp-menu-item>{{ 'Edit' | bbbTranslate }}</fdp-menu-item>\n            <fdp-menu-item>{{ 'Delete' | bbbTranslate }}</fdp-menu-item>\n        </fdp-menu>\n    </fdp-action-button-group>\n    <fd-card-content>\n        <bsu-ly-layout-container-of-root\n            *ngIf=\"layout$ | async as layout94\"\n            [config]=\"layout94\"\n            [isPanel]=\"false\"\n            [isRoot]=\"true\"\n        ></bsu-ly-layout-container-of-root>\n    </fd-card-content>\n    <fd-card-footer>\n        <div class=\"kanban-footer row\">\n            <div class=\"comment row\">\n                <fd-icon glyph=\"post\"></fd-icon>\n                {{ mo[viewSetting.CommentsCount] }}\n            </div>\n            <div class=\"attachment row\">\n                <fd-icon glyph=\"attachment\"></fd-icon>\n                {{ mo[viewSetting.AttachesCount] }}\n            </div>\n\n            <div class=\"task row\">\n                {{ mo[viewSetting.ProgressLabel] }}\n                <div class=\"circle-icon\">\n                    <fd-icon glyph=\"accept\"></fd-icon>\n                </div>\n            </div>\n        </div>\n    </fd-card-footer>\n</fd-card>\n", styles: [":host{position:relative}:host.selected{background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}:host.selected fd-card{border-color:var(--sapList_SelectionBorderColor, #0854a0)}:host.selected fd-card,:host.selected fd-card-header,:host.selected .fd-bar--footer,:host.selected fd-quick-view-subheader .fd-bar{background-color:inherit!important}.row{display:flex;align-items:center}.fd-card{background:var(--sapBackgroundColor, #f7f7f7)!important;box-shadow:none}.fd-card:hover .card-menu fdp-button{display:block}.fd-card .card-menu{position:absolute;right:1rem;top:1rem;background-color:#fff}.fd-card .card-menu fdp-button{display:none}.fd-card .card-menu [aria-controls=fdp-menu-basic-menu]{display:block}.fd-card .task-cover{width:100%;height:150px;justify-content:center}.fd-card .task-cover img{object-fit:cover;width:100%;height:100%}.fd-card fd-card-content{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;row-gap:20px;padding:1rem}.fd-card fd-card-content .progress-indicator{flex:1}.fd-card fd-card-content .progress-indicator ::ng-deep .fd-progress-indicator__remaining{display:flex;align-items:center}.fd-card ::ng-deep fd-info-label .fd-info-label__text{display:inline-flex!important}.kanban-footer{padding:1rem;column-gap:10px}.kanban-footer .comment,.kanban-footer .attachment,.kanban-footer .task{column-gap:2px}.kanban-footer .task{margin-right:auto}.kanban-footer .task .circle-icon{width:calc(var(--sapFontSize, .875rem) + 6px);height:calc(var(--sapFontSize, .875rem) + 6px);border-radius:calc(var(--sapFontSize, .875rem) + 6px);border:1px solid var(--sapButton_BorderColor, #0854a0);display:flex;align-items:center;justify-content:center}\n"] }]
+        }], propDecorators: { index: [{
+                type: Input
+            }], mo: [{
+                type: Input
+            }], viewSetting: [{
+                type: Input
+            }], allAvailableAssignees: [{
+                type: Input
+            }] } });
+
+class BarsaAvatarGroupComponent extends KanbanBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.visibleFields = [];
+        this.size = 'l';
+        this.personDetails = null;
+        this.overflowPopoverStage = 'main';
+    }
+    get isDetailStage() {
+        return this.overflowPopoverStage === 'detail';
+    }
+    isOpenChanged(isOpened) {
+        if (isOpened) {
+            this.openOverflowMain();
+        }
+    }
+    newItem(newItem) {
+        const exist = this.existedItems.find((item) => item.Id === newItem.Id);
+        if (!exist) {
+            this.existedItems.push(newItem);
+        }
+    }
+    deleteAvatar(idx) {
+        this.existedItems.splice(idx, 1);
+    }
+    openOverflowMain() {
+        this.personDetails = null;
+        this.overflowPopoverStage = 'main';
+        setTimeout(() => { var _a; return (_a = this.popoverBodyComponent) === null || _a === void 0 ? void 0 : _a._focusFirstTabbableElement(); }, 0);
+    }
+    handleControlClick(event, popover) {
+        popover.open();
+    }
+    handleControlKeydown(event, popover) {
+        if (!KeyUtil.isKeyCode(event, [ESCAPE, TAB, SPACE, ENTER])) {
+            return;
+        }
+        if (KeyUtil.isKeyCode(event, [ESCAPE, TAB])) {
+            popover.close();
+        }
+        if (KeyUtil.isKeyCode(event, [SPACE, ENTER])) {
+            popover.open();
+        }
+    }
+}
+BarsaAvatarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaAvatarGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+BarsaAvatarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaAvatarGroupComponent, selector: "bk-avatar-group", inputs: { existedItems: "existedItems", availableItems: "availableItems", viewSetting: "viewSetting", visibleFields: "visibleFields", addItem: "addItem", size: "size" }, viewQueries: [{ propertyName: "popoverBodyComponent", first: true, predicate: ["overflowPopoverBody"], descendants: true }, { propertyName: "avatarGroupCom", first: true, predicate: AvatarGroupComponent, descendants: true, read: AvatarGroupComponent, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-avatar-group #avatarGroupCom type=\"group\" [size]=\"size\">\n    <fd-popover\n        [noArrow]=\"false\"\n        [focusTrapped]=\"true\"\n        [focusAutoCapture]=\"true\"\n        [triggers]=\"[]\"\n        [closeOnOutsideClick]=\"true\"\n        [closeOnEscapeKey]=\"true\"\n        (isOpenChange)=\"isOpenChanged($event)\"\n        placement=\"bottom\"\n        [maxWidth]=\"312\"\n        #overflowPopover\n    >\n        <fd-popover-control\n            fd-avatar-group-popover-control\n            [attr.aria-label]=\"\n                'Has popup type dialog Conjoined avatars, ' +\n                ' avatars displayed, ' +\n                avatarGroupCom?.overflowItemsCount +\n                ' avatars hidden, activate for complete list'\n            \"\n            (click)=\"handleControlClick($event, overflowPopover)\"\n            (keydown)=\"handleControlKeydown($event, overflowPopover)\"\n        >\n            <div *ngFor=\"let person of existedItems\" fd-avatar-group-item>\n                <fd-avatar\n                    *ngIf=\"!person[viewSetting.AssigneeImage]\"\n                    [label]=\"person[viewSetting.AssigneeName]\"\n                    [title]=\"person[viewSetting.AssigneeName]\"\n                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\n                    role=\"img\"\n                    [circle]=\"true\"\n                    [border]=\"true\"\n                    [size]=\"size\"\n                ></fd-avatar>\n\n                <fd-avatar\n                    *ngIf=\"person[viewSetting.AssigneeImage] as avatar\"\n                    role=\"img\"\n                    [title]=\"person[viewSetting.AssigneeName]\"\n                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\n                    [circle]=\"true\"\n                    [border]=\"true\"\n                    [size]=\"size\"\n                    [image]=\"(avatar.FileId | picFieldSrc: 'ID':person.Id) || ''\"\n                >\n                </fd-avatar>\n            </div>\n            <button\n                *ngIf=\"avatarGroupCom.overflowItemsCount && avatarGroupCom.overflowItemsCount > 0\"\n                fd-button\n                fd-avatar-group-overflow-button\n                tabindex=\"-1\"\n                [compact]=\"false\"\n                [size]=\"size\"\n            >\n                <bdi fd-avatar-group-overflow-button-text> +{{ avatarGroupCom.overflowItemsCount }} </bdi>\n            </button>\n        </fd-popover-control>\n        <fd-popover-body #overflowPopoverBody aria-labelledby=\"avatar-group-1-popover-header\" role=\"tooltip\">\n            <div class=\"fd-popover__wrapper\">\n                <div fd-popover-body-header>\n                    <div fd-bar barDesign=\"header\">\n                        <div fd-bar-left>\n                            <fd-button-bar\n                                *ngIf=\"isDetailStage\"\n                                (click)=\"openOverflowMain()\"\n                                glyph=\"navigation-left-arrow\"\n                                fdType=\"transparent\"\n                                aria-label=\"Back\"\n                                title=\"Back\"\n                            ></fd-button-bar>\n                            <fd-bar-element id=\"avatar-group-1-popover-header\">\n                                {{ isDetailStage ? 'Business Card' : 'Team Members (' + existedItems?.length + ')' }}\n                            </fd-bar-element>\n                            <fd-bar-element *ngIf=\"isDetailStage\">&nbsp;</fd-bar-element>\n                        </div>\n                    </div>\n                </div>\n\n                <div\n                    fd-avatar-group-overflow-body\n                    [noPadding]=\"isDetailStage\"\n                    [noHorizontalScroll]=\"isDetailStage\"\n                    [noVerticalScroll]=\"false\"\n                >\n                    <ng-container *ngIf=\"overflowPopoverStage === 'main'\">\n                        <ng-container *ngFor=\"let person of existedItems; let idx = index\">\n                            <div fd-avatar-group-overflow-item>\n                                <fd-popover [triggers]=\"['click']\">\n                                    <fd-popover-control>\n                                        <fd-avatar\n                                            *ngIf=\"!person[viewSetting.AssigneeImage]\"\n                                            fd-avatar-group-focusable-avatar\n                                            [circle]=\"true\"\n                                            size=\"s\"\n                                            [label]=\"person[viewSetting.AssigneeName]\"\n                                            [title]=\"person[viewSetting.AssigneeName]\"\n                                            [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\n                                            role=\"img\"\n                                        ></fd-avatar>\n                                        <fd-avatar\n                                            *ngIf=\"person[viewSetting.AssigneeImage] as avatar\"\n                                            fd-avatar-group-focusable-avatar\n                                            role=\"img\"\n                                            [title]=\"person[viewSetting.AssigneeName]\"\n                                            [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\n                                            [circle]=\"true\"\n                                            size=\"s\"\n                                            [image]=\"(avatar.FileId | picFieldSrc: 'ID':person.Id) || ''\"\n                                        ></fd-avatar>\n                                    </fd-popover-control>\n                                    <fd-popover-body>\n                                        <div class=\"avatar-actions\">\n                                            <button\n                                                fd-button\n                                                (click)=\"deleteAvatar(idx)\"\n                                                [label]=\"'Delete' | bbbTranslate\"\n                                                glyph=\"decline\"\n                                            ></button>\n                                            <button\n                                                fd-button\n                                                [label]=\"'Show' | bbbTranslate\"\n                                                glyph=\"detail-view\"\n                                            ></button>\n                                        </div>\n                                    </fd-popover-body>\n                                </fd-popover>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </div>\n        </fd-popover-body>\n    </fd-popover>\n</fd-avatar-group>\n\n<fd-popover\n    #peoplePopover\n    *ngIf=\"addItem\"\n    [triggers]=\"[]\"\n    [focusTrapped]=\"false\"\n    [closeOnOutsideClick]=\"true\"\n    [noArrow]=\"false\"\n    placement=\"bottom\"\n    [focusAutoCapture]=\"true\"\n>\n    <fd-popover-control>\n        <div>\n            <button\n                fd-button\n                (click)=\"openPopover($event, peoplePopover)\"\n                fdType=\"transparent\"\n                glyph=\"sys-add\"\n            ></button>\n        </div>\n    </fd-popover-control>\n    <fd-popover-body>\n        <ul fd-list>\n            <li fd-list-item *ngFor=\"let item of availableItems\" (click)=\"newItem(item)\">\n                <ng-container *ngIf=\"visibleFields.length > 0; else default\">\n                    <ng-container *ngFor=\"let field of visibleFields\">\n                        {{ item[field] }}\n                    </ng-container>\n                </ng-container>\n                <ng-template #default>\n                    {{ item }}\n                </ng-template>\n            </li>\n        </ul>\n    </fd-popover-body>\n</fd-popover>\n", styles: [":host{display:flex;align-items:center;column-gap:2px;width:130px}.avatar-actions{display:flex;padding:10px;flex-direction:column;justify-content:center;row-gap:15px;width:100px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3.AvatarGroupComponent, selector: "fd-avatar-group", inputs: ["id", "class", "size", "type", "ariaLabel"] }, { kind: "directive", type: i3.AvatarGroupItemDirective, selector: "[fd-avatar-group-item]" }, { kind: "directive", type: i3.AvatarGroupFocusableAvatarDirective, selector: "[fd-avatar-group-focusable-avatar]", inputs: ["tabindex"] }, { kind: "directive", type: i3.AvatarGroupPopoverControlDirective, selector: "[fd-avatar-group-popover-control]", inputs: ["tabindex", "role"] }, { kind: "directive", type: i3.AvatarGroupOverflowBodyDirective, selector: "[fd-avatar-group-overflow-body]", inputs: ["noPadding", "noHorizontalScroll", "noVerticalScroll"] }, { kind: "directive", type: i3.AvatarGroupOverflowItemDirective, selector: "[fd-avatar-group-overflow-item]" }, { kind: "directive", type: i3.AvatarGroupOverflowButtonDirective, selector: "[fd-avatar-group-overflow-button]", inputs: ["class", "size", "color"] }, { kind: "directive", type: i3.AvatarGroupOverflowButtonTextDirective, selector: "[fd-avatar-group-overflow-button-text]" }, { kind: "component", type: i4$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4$3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i4$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i5.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i6$3.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$3.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "component", type: i7.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i7.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "component", type: i7.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaAvatarGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-avatar-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-avatar-group #avatarGroupCom type=\"group\" [size]=\"size\">\n    <fd-popover\n        [noArrow]=\"false\"\n        [focusTrapped]=\"true\"\n        [focusAutoCapture]=\"true\"\n        [triggers]=\"[]\"\n        [closeOnOutsideClick]=\"true\"\n        [closeOnEscapeKey]=\"true\"\n        (isOpenChange)=\"isOpenChanged($event)\"\n        placement=\"bottom\"\n        [maxWidth]=\"312\"\n        #overflowPopover\n    >\n        <fd-popover-control\n            fd-avatar-group-popover-control\n            [attr.aria-label]=\"\n                'Has popup type dialog Conjoined avatars, ' +\n                ' avatars displayed, ' +\n                avatarGroupCom?.overflowItemsCount +\n                ' avatars hidden, activate for complete list'\n            \"\n            (click)=\"handleControlClick($event, overflowPopover)\"\n            (keydown)=\"handleControlKeydown($event, overflowPopover)\"\n        >\n            <div *ngFor=\"let person of existedItems\" fd-avatar-group-item>\n                <fd-avatar\n                    *ngIf=\"!person[viewSetting.AssigneeImage]\"\n                    [label]=\"person[viewSetting.AssigneeName]\"\n                    [title]=\"person[viewSetting.AssigneeName]\"\n                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\n                    role=\"img\"\n                    [circle]=\"true\"\n                    [border]=\"true\"\n                    [size]=\"size\"\n                ></fd-avatar>\n\n                <fd-avatar\n                    *ngIf=\"person[viewSetting.AssigneeImage] as avatar\"\n                    role=\"img\"\n                    [title]=\"person[viewSetting.AssigneeName]\"\n                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\n                    [circle]=\"true\"\n                    [border]=\"true\"\n                    [size]=\"size\"\n                    [image]=\"(avatar.FileId | picFieldSrc: 'ID':person.Id) || ''\"\n                >\n                </fd-avatar>\n            </div>\n            <button\n                *ngIf=\"avatarGroupCom.overflowItemsCount && avatarGroupCom.overflowItemsCount > 0\"\n                fd-button\n                fd-avatar-group-overflow-button\n                tabindex=\"-1\"\n                [compact]=\"false\"\n                [size]=\"size\"\n            >\n                <bdi fd-avatar-group-overflow-button-text> +{{ avatarGroupCom.overflowItemsCount }} </bdi>\n            </button>\n        </fd-popover-control>\n        <fd-popover-body #overflowPopoverBody aria-labelledby=\"avatar-group-1-popover-header\" role=\"tooltip\">\n            <div class=\"fd-popover__wrapper\">\n                <div fd-popover-body-header>\n                    <div fd-bar barDesign=\"header\">\n                        <div fd-bar-left>\n                            <fd-button-bar\n                                *ngIf=\"isDetailStage\"\n                                (click)=\"openOverflowMain()\"\n                                glyph=\"navigation-left-arrow\"\n                                fdType=\"transparent\"\n                                aria-label=\"Back\"\n                                title=\"Back\"\n                            ></fd-button-bar>\n                            <fd-bar-element id=\"avatar-group-1-popover-header\">\n                                {{ isDetailStage ? 'Business Card' : 'Team Members (' + existedItems?.length + ')' }}\n                            </fd-bar-element>\n                            <fd-bar-element *ngIf=\"isDetailStage\">&nbsp;</fd-bar-element>\n                        </div>\n                    </div>\n                </div>\n\n                <div\n                    fd-avatar-group-overflow-body\n                    [noPadding]=\"isDetailStage\"\n                    [noHorizontalScroll]=\"isDetailStage\"\n                    [noVerticalScroll]=\"false\"\n                >\n                    <ng-container *ngIf=\"overflowPopoverStage === 'main'\">\n                        <ng-container *ngFor=\"let person of existedItems; let idx = index\">\n                            <div fd-avatar-group-overflow-item>\n                                <fd-popover [triggers]=\"['click']\">\n                                    <fd-popover-control>\n                                        <fd-avatar\n                                            *ngIf=\"!person[viewSetting.AssigneeImage]\"\n                                            fd-avatar-group-focusable-avatar\n                                            [circle]=\"true\"\n                                            size=\"s\"\n                                            [label]=\"person[viewSetting.AssigneeName]\"\n                                            [title]=\"person[viewSetting.AssigneeName]\"\n                                            [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\n                                            role=\"img\"\n                                        ></fd-avatar>\n                                        <fd-avatar\n                                            *ngIf=\"person[viewSetting.AssigneeImage] as avatar\"\n                                            fd-avatar-group-focusable-avatar\n                                            role=\"img\"\n                                            [title]=\"person[viewSetting.AssigneeName]\"\n                                            [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\n                                            [circle]=\"true\"\n                                            size=\"s\"\n                                            [image]=\"(avatar.FileId | picFieldSrc: 'ID':person.Id) || ''\"\n                                        ></fd-avatar>\n                                    </fd-popover-control>\n                                    <fd-popover-body>\n                                        <div class=\"avatar-actions\">\n                                            <button\n                                                fd-button\n                                                (click)=\"deleteAvatar(idx)\"\n                                                [label]=\"'Delete' | bbbTranslate\"\n                                                glyph=\"decline\"\n                                            ></button>\n                                            <button\n                                                fd-button\n                                                [label]=\"'Show' | bbbTranslate\"\n                                                glyph=\"detail-view\"\n                                            ></button>\n                                        </div>\n                                    </fd-popover-body>\n                                </fd-popover>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </div>\n        </fd-popover-body>\n    </fd-popover>\n</fd-avatar-group>\n\n<fd-popover\n    #peoplePopover\n    *ngIf=\"addItem\"\n    [triggers]=\"[]\"\n    [focusTrapped]=\"false\"\n    [closeOnOutsideClick]=\"true\"\n    [noArrow]=\"false\"\n    placement=\"bottom\"\n    [focusAutoCapture]=\"true\"\n>\n    <fd-popover-control>\n        <div>\n            <button\n                fd-button\n                (click)=\"openPopover($event, peoplePopover)\"\n                fdType=\"transparent\"\n                glyph=\"sys-add\"\n            ></button>\n        </div>\n    </fd-popover-control>\n    <fd-popover-body>\n        <ul fd-list>\n            <li fd-list-item *ngFor=\"let item of availableItems\" (click)=\"newItem(item)\">\n                <ng-container *ngIf=\"visibleFields.length > 0; else default\">\n                    <ng-container *ngFor=\"let field of visibleFields\">\n                        {{ item[field] }}\n                    </ng-container>\n                </ng-container>\n                <ng-template #default>\n                    {{ item }}\n                </ng-template>\n            </li>\n        </ul>\n    </fd-popover-body>\n</fd-popover>\n", styles: [":host{display:flex;align-items:center;column-gap:2px;width:130px}.avatar-actions{display:flex;padding:10px;flex-direction:column;justify-content:center;row-gap:15px;width:100px}\n"] }]
+        }], propDecorators: { popoverBodyComponent: [{
+                type: ViewChild,
+                args: ['overflowPopoverBody']
+            }], avatarGroupCom: [{
+                type: ViewChild,
+                args: [AvatarGroupComponent, { static: true, read: AvatarGroupComponent }]
+            }], existedItems: [{
+                type: Input
+            }], availableItems: [{
+                type: Input
+            }], viewSetting: [{
+                type: Input
+            }], visibleFields: [{
+                type: Input
+            }], addItem: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class KanbanViewComponent extends ReportViewBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.groupbyProperty = 'State';
+        this.isNewColumnMode = false;
+        this.newCard = { Id: null, $Caption: null };
+        this.newColumn = { Id: null, $Caption: null };
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const columnsReport = this.viewSetting.ColumnsReport.$Caption;
+        this._portalService.ReportExecute(columnsReport).subscribe((report) => {
+            this.kanbanColumns = report.MoDataList;
+            this._changeDetect();
+        });
+        this.formSetting.View.ControlInfo.forEach((c) => (c.InlineEditMode = true));
+        const assigneesReport = this.viewSetting.AssigneesReport.$Caption;
+        this._portalService.ReportExecute(assigneesReport).subscribe((report) => {
+            this.allAvailableAssignees = report.MoDataList;
+            this._changeDetect();
+        });
+        this.viewSetting = Object.assign(Object.assign({}, this.viewSetting), this._findColumn(this.allColumns, [
+            this.viewSetting.Cover,
+            this.viewSetting.State,
+            this.viewSetting.Caption
+        ]));
+    }
+    onAddNewColumn() {
+        this.kanbanColumns.push(this.newColumn);
+        this._cdr.detectChanges();
+        this._resetNewColumn();
+        this._scrollInputIntoView();
+    }
+    onActiveNewColumnMode() {
+        this._changeNewColumnMode(true);
+    }
+    onCancelNewColumn() {
+        this._changeNewColumnMode(false);
+        this._resetNewColumn();
+    }
+    onInitNewCard(groupby) {
+        this._resetNewCard();
+        this.newCard[this.groupbyProperty] = groupby;
+    }
+    onAddNewCard(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this._addNewCard();
+    }
+    onNewCardInputFocusout() {
+        if (this.newCard.$Caption) {
+            this._addNewCard();
+        }
+        else {
+            this._cancelNewCard();
+        }
+    }
+    onCancelNewCard(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this._cancelNewCard();
+    }
+    onDrop(event, isColumn) {
+        let previousIndex;
+        let currentIndex;
+        const array = event.container.data;
+        if (isColumn) {
+            previousIndex = event.previousIndex;
+            currentIndex = event.currentIndex;
+        }
+        else {
+            const draggedItemId = this.dropActionTodo.draggedId;
+            if (!draggedItemId) {
+                return;
+            }
+            const draggedItem = this._getMoById(draggedItemId);
+            const targetState = this.dropActionTodo.targetState;
+            previousIndex = array.indexOf(draggedItem);
+            currentIndex = this.dropActionTodo.targetIndex;
+            draggedItem.State = targetState;
+            this._stopDragging();
+        }
+        moveItemInArray(array, previousIndex, currentIndex);
+    }
+    onDragMove(event, draggedMo, draggedIndex, targetState) {
+        var _a, _b;
+        const elementFromPoint = document.elementFromPoint(event.pointerPosition.x, event.pointerPosition.y);
+        if (targetState) {
+        }
+        if (!elementFromPoint) {
+            this._stopDragging();
+            return;
+        }
+        const targetNodeElement = elementFromPoint.closest('[state]');
+        if (!targetNodeElement) {
+            this._stopDragging();
+            return;
+        }
+        this.dropActionTodo = {
+            draggedId: draggedMo.Id,
+            targetId: targetNodeElement.getAttribute('id'),
+            targetState: null,
+            targetIndex: Number(targetNodeElement.getAttribute('index'))
+        };
+        const targetRect = targetNodeElement.getBoundingClientRect();
+        const oneThird = targetRect.height / 3;
+        const isCardTarget = !targetNodeElement.classList.contains('column');
+        const isBefore = event.pointerPosition.y - targetRect.top < oneThird && isCardTarget;
+        const isAfter = event.pointerPosition.y - targetRect.top > 2 * oneThird && isCardTarget;
+        const isInside = !isCardTarget;
+        const targetIndex = (_a = this.dropActionTodo.targetIndex) !== null && _a !== void 0 ? _a : -1;
+        const targetMo = this.moDataList[targetIndex];
+        if (isCardTarget) {
+            this.dropActionTodo.targetState = targetMo[this.viewSetting.State];
+        }
+        else {
+            this.dropActionTodo.targetState = {
+                $Caption: targetNodeElement.getAttribute('state'),
+                Id: targetNodeElement.getAttribute('id'),
+                $TypeDefId: (_b = draggedMo[this.viewSetting.State]) === null || _b === void 0 ? void 0 : _b.$TypeDefId
+            };
+        }
+        if (isBefore) {
+            this.dropActionTodo.action = 'before';
+            this.dropActionTodo.targetIndex = draggedIndex > targetIndex ? targetIndex : targetIndex - 1;
+        }
+        else if (isAfter) {
+            this.dropActionTodo.action = 'after';
+            this.dropActionTodo.targetIndex = draggedIndex < targetIndex ? targetIndex : targetIndex + 1;
+        }
+        else if (isInside) {
+            this.dropActionTodo.action = 'inside';
+            this.dropActionTodo.targetIndex = 0;
+        }
+        console.log(this.dropActionTodo.targetState);
+        this._showDragInfo();
+    }
+    _changeDetect() {
+        this._cdr.detectChanges();
+    }
+    _stopDragging() {
+        this._clearDragInfo();
+        this._resetDropActionTodo();
+    }
+    _changeNewColumnMode(mode) {
+        this.isNewColumnMode = mode;
+    }
+    _resetDropActionTodo() {
+        this.dropActionTodo = {
+            targetId: null,
+            draggedId: null,
+            targetState: null,
+            targetIndex: null,
+            action: null
+        };
+    }
+    _scrollInputIntoView() {
+        const inputEl = this.inputEl.nativeElement;
+        inputEl.focus();
+        inputEl.scrollIntoView({ inline: 'end' });
+    }
+    _resetNewColumn() {
+        this.newColumn = { Id: '', $Caption: '' };
+    }
+    _clearDragInfo(dropped = false) {
+        if (dropped) {
+            this._resetDropActionTodo();
+        }
+        const elDom = this._el.nativeElement;
+        elDom
+            .querySelectorAll('.drop-before')
+            .forEach((element) => this._renderer2.removeClass(element, 'drop-before'));
+        elDom.querySelectorAll('.drop-after').forEach((element) => this._renderer2.removeClass(element, 'drop-after'));
+        elDom
+            .querySelectorAll('.drop-inside')
+            .forEach((element) => this._renderer2.removeClass(element, 'drop-inside'));
+    }
+    _showDragInfo() {
+        var _a;
+        this._clearDragInfo();
+        if (this.dropActionTodo.targetId) {
+            const targetNodeElement = this._el.nativeElement.querySelector('#' + this.dropActionTodo.targetId);
+            if (!targetNodeElement) {
+                this._resetDropActionTodo();
+                return;
+            }
+            this._renderer2.addClass(targetNodeElement, 'drop-' + ((_a = this.dropActionTodo) === null || _a === void 0 ? void 0 : _a.action));
+        }
+    }
+    _addNewCard() {
+        this.moDataList.push(this.newCard);
+        const currentGroupby = this.newCard[this.groupbyProperty];
+        this.onInitNewCard(currentGroupby);
+    }
+    _resetNewCard() {
+        this.newCard = { Id: null, $Caption: null };
+    }
+    _cancelNewCard() {
+        this._resetNewCard();
+    }
+    _getMoById(id) {
+        return this.moDataList.find((c) => c.Id === id);
+    }
+    _findColumn(allColumns, columnsName) {
+        const columns = {};
+        columnsName.forEach((name) => {
+            columns[name + 'Column'] = this._findColumnByDbName.transform(this.allColumns, name);
+        });
+        return columns;
+    }
+}
+KanbanViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: KanbanViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KanbanViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: KanbanViewComponent, selector: "bk-kanban-view", inputs: { kanbanColumns: "kanbanColumns", groupbyProperty: "groupbyProperty" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<fd-layout-panel>\n    <fd-layout-panel-body [bleed]=\"true\">\n        <table fd-table *ngIf=\"isCheckList\">\n            <thead fd-table-header>\n                <tr fd-table-row>\n                    <th fd-table-cell>\n                        <fd-checkbox\n                            name=\"allCheckbox\"\n                            [ngModel]=\"allChecked\"\n                            (ngModelChange)=\"onAllCheckbox($event)\"\n                            >{{ 'All' | bbbTranslate }}</fd-checkbox\n                        >\n                    </th>\n                </tr>\n            </thead>\n        </table>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<fd-layout-grid\n    *ngIf=\"moDataList?.length; else noData\"\n    class=\"columns\"\n    cdkDropList\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListData]=\"kanbanColumns\"\n    [id]=\"'$Root'\"\n    (cdkDropListDropped)=\"onDrop($event, true)\"\n>\n    <div\n        *ngFor=\"let column of kanbanColumns; let columnIndex = index\"\n        [fdLayoutGridCol]=\"12\"\n        [colMd]=\"6\"\n        [colLg]=\"4\"\n        [colXl]=\"3\"\n        class=\"column\"\n        [id]=\"column.Id\"\n        [attr.state]=\"column.$Caption\"\n        cdkDrag\n    >\n        <ng-container\n            *ngTemplateOutlet=\"\n                columnCard;\n                context: {\n                    column: column,\n                    columnIndex: columnIndex\n                }\n            \"\n        ></ng-container>\n    </div>\n    <div\n        [fdLayoutGridCol]=\"12\"\n        [colMd]=\"6\"\n        [colLg]=\"4\"\n        [colXl]=\"3\"\n        class=\"newColumn\"\n        (click)=\"onActiveNewColumnMode()\"\n        *ngIf=\"!isNewColumnMode; else newColumnInput\"\n    >\n        <ng-container>\n            <span>\u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F</span>\n        </ng-container>\n    </div>\n    <ng-template #newColumnInput>\n        <div [fdLayoutGridCol]=\"12\" [colMd]=\"6\" [colLg]=\"4\" [colXl]=\"3\">\n            <input\n                #inputEl\n                fd-form-control\n                type=\"text\"\n                autofocus\n                (focusout)=\"onCancelNewColumn()\"\n                [(ngModel)]=\"newColumn.$Caption\"\n                (keydown.enter)=\"onAddNewColumn()\"\n                id=\"new-column-name\"\n                placeholder=\" \u0646\u0627\u0645\"\n            />\n        </div>\n    </ng-template>\n</fd-layout-grid>\n\n<!--noData-->\n<ng-template #noData>\n    <bsu-no-data></bsu-no-data>\n</ng-template>\n\n<!--column card-->\n<ng-template #columnCard let-column=\"column\" let-columnIndex=\"columnIndex\">\n    <fd-card cardType=\"quickView\" class=\"docs-flex-item-margin\" ellipsify>\n        <fd-card-header>\n            <span fd-card-title>{{ column.$Caption }}</span>\n        </fd-card-header>\n        <fd-card-content\n            cdkDropList\n            (cdkDropListDropped)=\"onDrop($event)\"\n            [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"moDataList\"\n        >\n            <ng-container *ngFor=\"let mo of moDataList; let index = index\">\n                <bk-kanban-card\n                    [mo]=\"mo\"\n                    [viewSetting]=\"viewSetting\"\n                    [formSetting]=\"formSetting\"\n                    [allAvailableAssignees]=\"allAvailableAssignees\"\n                    [index]=\"index\"\n                    *ngIf=\"mo[viewSetting.State].$Caption === column.$Caption\"\n                    [attr.id]=\"mo.Id\"\n                    [inlineEditMode]=\"true\"\n                    [isChecked]=\"true\"\n                    [attr.state]=\"column.$Caption\"\n                    [attr.index]=\"index\"\n                    [class.selected]=\"mo.$IsChecked\"\n                    (cdkDragMoved)=\"onDragMove($event, mo, index, column)\"\n                    (click)=\"onRowCheck({mo, index})\"\n                    (dblclick)=\"onRowClick({mo, index})\"\n                    cdkDrag\n                >\n                </bk-kanban-card>\n            </ng-container>\n        </fd-card-content>\n        <fd-card-footer class=\"column-footer\">\n            <div class=\"new-card\" *ngIf=\"newCard[groupbyProperty] === column.$Caption; else addNewCard\">\n                <fd-card>\n                    <div fd-form-item>\n                        <textarea\n                            fd-form-control\n                            [autofocus]=\"true\"\n                            [(ngModel)]=\"newCard.$Caption\"\n                            (keydown.enter)=\"onAddNewCard($event)\"\n                            (focusout)=\"onNewCardInputFocusout()\"\n                            [placeholder]=\"'Title' | bbbTranslate\"\n                        ></textarea>\n                    </div>\n                </fd-card>\n                <div class=\"new-card-actions\">\n                    <button\n                        fd-button\n                        (click)=\"onAddNewCard($event)\"\n                        fdType=\"emphasized\"\n                        class=\"add-card-btn\"\n                        [label]=\"'\u0627\u0641\u0632\u0648\u062F\u0646'\"\n                    ></button>\n                    <fd-icon (mousedown)=\"onCancelNewCard($event)\" glyph=\"decline\"></fd-icon>\n                </div>\n            </div>\n\n            <ng-template #addNewCard>\n                <div class=\"add-new-card\" (click)=\"onInitNewCard(column.$Caption)\">\n                    <span>\n                        <fd-icon glyph=\"add\"></fd-icon>\n                        \u06A9\u0627\u0631\u062A \u062C\u062F\u06CC\u062F\n                    </span>\n                </div>\n            </ng-template>\n        </fd-card-footer>\n    </fd-card>\n</ng-template>\n", styles: [":host{display:flex;column-gap:20px;row-gap:20px;flex-wrap:wrap;overflow:auto;padding-bottom:1rem;height:calc(100% - 38.5px)}::-webkit-scrollbar{height:7px;width:7px}::-webkit-scrollbar-track{box-shadow:inset 0 0 2px #d0cece;border-radius:10px}::-webkit-scrollbar-thumb{background:#c8cacb;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#adb0b2}.columns{height:inherit;width:100%;column-gap:15px;flex-wrap:nowrap!important}.column{height:100%;background-color:var(--sapList_Background, #fff)!important}.column.cdk-drag-placeholder{opacity:0}.column>fd-card{overflow-y:hidden;height:100%;box-shadow:none}.column>fd-card fd-card-header{border:none;background:none;padding:1rem 2rem!important}.column>fd-card fd-card-content{flex:1;overflow-y:auto;padding:0 1rem;margin:0;display:flex;flex-direction:column;row-gap:20px}.column>fd-card .column-footer{padding:1rem 1rem 1rem 1.5rem;position:sticky}.column>fd-card .column-footer .new-card{display:flex;flex-direction:column;justify-content:center;row-gap:1rem}.column>fd-card .column-footer .new-card fd-card{padding:0 1rem;background:var(--sapBackgroundColor, #f7f7f7)!important}.column>fd-card .column-footer .new-card textarea{background:var(--sapBackgroundColor, #f7f7f7)!important;border:none}.column>fd-card .column-footer .new-card span{height:auto!important}.column>fd-card .column-footer .new-card .new-card-actions{display:flex;align-items:center;column-gap:10px}.column>fd-card .column-footer .new-card .new-card-actions fd-icon{font-size:1rem}.column>fd-card .column-footer .add-new-card{padding:0 1rem}.column>fd-card .column-footer .add-new-card span{display:flex;column-gap:4px}.newColumn{background-color:var(--sapList_Background, #fff)!important;border-radius:var(--sapElement_BorderCornerRadius, .25rem);align-self:flex-start;height:100px;opacity:.5;display:flex;align-items:center;justify-content:center;border:1px dashed;position:relative;cursor:pointer}.newColumn span{position:absolute}.newColumn .new-column-popover{width:100%}.newColumn .new-column-popover fd-popover-control{width:100%;height:1px}.new-column-popover-body input{border:none}.row{display:flex;align-items:center}.drop-inside{border:1px solid #00f}.drop-inside ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-before{border-top:2px solid #00f}.drop-before ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-after{border-bottom:2px solid #00f}.drop-after ::ng-deep .fd-list__item{background-color:#dce9f6!important}.columns.cdk-drop-list-dragging .column:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i4$1.CardHeaderComponent, selector: "fd-card-header", inputs: ["interactive", "tabindex"] }, { kind: "component", type: i4$1.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i4$1.CardTitleDirective, selector: "[fd-card-title]" }, { kind: "component", type: i4$1.CardFooterComponent, selector: "fd-card-footer" }, { kind: "component", type: i5$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i6.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class"] }, { kind: "directive", type: i6.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "directive", type: i6.TextareaFormControlDirective, selector: "textarea[fd-form-control]" }, { kind: "component", type: i6.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i8$1.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i8$1.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "component", type: i9$1.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i9$1.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i10.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i10.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i10.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i10.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "component", type: i9.NoDataComponent, selector: "bsu-no-data" }, { kind: "directive", type: i6$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i13.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i13.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: KanbanCardComponent, selector: "bk-kanban-card", inputs: ["index", "mo", "viewSetting", "allAvailableAssignees"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: KanbanViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-kanban-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-layout-panel>\n    <fd-layout-panel-body [bleed]=\"true\">\n        <table fd-table *ngIf=\"isCheckList\">\n            <thead fd-table-header>\n                <tr fd-table-row>\n                    <th fd-table-cell>\n                        <fd-checkbox\n                            name=\"allCheckbox\"\n                            [ngModel]=\"allChecked\"\n                            (ngModelChange)=\"onAllCheckbox($event)\"\n                            >{{ 'All' | bbbTranslate }}</fd-checkbox\n                        >\n                    </th>\n                </tr>\n            </thead>\n        </table>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<fd-layout-grid\n    *ngIf=\"moDataList?.length; else noData\"\n    class=\"columns\"\n    cdkDropList\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListData]=\"kanbanColumns\"\n    [id]=\"'$Root'\"\n    (cdkDropListDropped)=\"onDrop($event, true)\"\n>\n    <div\n        *ngFor=\"let column of kanbanColumns; let columnIndex = index\"\n        [fdLayoutGridCol]=\"12\"\n        [colMd]=\"6\"\n        [colLg]=\"4\"\n        [colXl]=\"3\"\n        class=\"column\"\n        [id]=\"column.Id\"\n        [attr.state]=\"column.$Caption\"\n        cdkDrag\n    >\n        <ng-container\n            *ngTemplateOutlet=\"\n                columnCard;\n                context: {\n                    column: column,\n                    columnIndex: columnIndex\n                }\n            \"\n        ></ng-container>\n    </div>\n    <div\n        [fdLayoutGridCol]=\"12\"\n        [colMd]=\"6\"\n        [colLg]=\"4\"\n        [colXl]=\"3\"\n        class=\"newColumn\"\n        (click)=\"onActiveNewColumnMode()\"\n        *ngIf=\"!isNewColumnMode; else newColumnInput\"\n    >\n        <ng-container>\n            <span>\u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F</span>\n        </ng-container>\n    </div>\n    <ng-template #newColumnInput>\n        <div [fdLayoutGridCol]=\"12\" [colMd]=\"6\" [colLg]=\"4\" [colXl]=\"3\">\n            <input\n                #inputEl\n                fd-form-control\n                type=\"text\"\n                autofocus\n                (focusout)=\"onCancelNewColumn()\"\n                [(ngModel)]=\"newColumn.$Caption\"\n                (keydown.enter)=\"onAddNewColumn()\"\n                id=\"new-column-name\"\n                placeholder=\" \u0646\u0627\u0645\"\n            />\n        </div>\n    </ng-template>\n</fd-layout-grid>\n\n<!--noData-->\n<ng-template #noData>\n    <bsu-no-data></bsu-no-data>\n</ng-template>\n\n<!--column card-->\n<ng-template #columnCard let-column=\"column\" let-columnIndex=\"columnIndex\">\n    <fd-card cardType=\"quickView\" class=\"docs-flex-item-margin\" ellipsify>\n        <fd-card-header>\n            <span fd-card-title>{{ column.$Caption }}</span>\n        </fd-card-header>\n        <fd-card-content\n            cdkDropList\n            (cdkDropListDropped)=\"onDrop($event)\"\n            [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"moDataList\"\n        >\n            <ng-container *ngFor=\"let mo of moDataList; let index = index\">\n                <bk-kanban-card\n                    [mo]=\"mo\"\n                    [viewSetting]=\"viewSetting\"\n                    [formSetting]=\"formSetting\"\n                    [allAvailableAssignees]=\"allAvailableAssignees\"\n                    [index]=\"index\"\n                    *ngIf=\"mo[viewSetting.State].$Caption === column.$Caption\"\n                    [attr.id]=\"mo.Id\"\n                    [inlineEditMode]=\"true\"\n                    [isChecked]=\"true\"\n                    [attr.state]=\"column.$Caption\"\n                    [attr.index]=\"index\"\n                    [class.selected]=\"mo.$IsChecked\"\n                    (cdkDragMoved)=\"onDragMove($event, mo, index, column)\"\n                    (click)=\"onRowCheck({mo, index})\"\n                    (dblclick)=\"onRowClick({mo, index})\"\n                    cdkDrag\n                >\n                </bk-kanban-card>\n            </ng-container>\n        </fd-card-content>\n        <fd-card-footer class=\"column-footer\">\n            <div class=\"new-card\" *ngIf=\"newCard[groupbyProperty] === column.$Caption; else addNewCard\">\n                <fd-card>\n                    <div fd-form-item>\n                        <textarea\n                            fd-form-control\n                            [autofocus]=\"true\"\n                            [(ngModel)]=\"newCard.$Caption\"\n                            (keydown.enter)=\"onAddNewCard($event)\"\n                            (focusout)=\"onNewCardInputFocusout()\"\n                            [placeholder]=\"'Title' | bbbTranslate\"\n                        ></textarea>\n                    </div>\n                </fd-card>\n                <div class=\"new-card-actions\">\n                    <button\n                        fd-button\n                        (click)=\"onAddNewCard($event)\"\n                        fdType=\"emphasized\"\n                        class=\"add-card-btn\"\n                        [label]=\"'\u0627\u0641\u0632\u0648\u062F\u0646'\"\n                    ></button>\n                    <fd-icon (mousedown)=\"onCancelNewCard($event)\" glyph=\"decline\"></fd-icon>\n                </div>\n            </div>\n\n            <ng-template #addNewCard>\n                <div class=\"add-new-card\" (click)=\"onInitNewCard(column.$Caption)\">\n                    <span>\n                        <fd-icon glyph=\"add\"></fd-icon>\n                        \u06A9\u0627\u0631\u062A \u062C\u062F\u06CC\u062F\n                    </span>\n                </div>\n            </ng-template>\n        </fd-card-footer>\n    </fd-card>\n</ng-template>\n", styles: [":host{display:flex;column-gap:20px;row-gap:20px;flex-wrap:wrap;overflow:auto;padding-bottom:1rem;height:calc(100% - 38.5px)}::-webkit-scrollbar{height:7px;width:7px}::-webkit-scrollbar-track{box-shadow:inset 0 0 2px #d0cece;border-radius:10px}::-webkit-scrollbar-thumb{background:#c8cacb;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#adb0b2}.columns{height:inherit;width:100%;column-gap:15px;flex-wrap:nowrap!important}.column{height:100%;background-color:var(--sapList_Background, #fff)!important}.column.cdk-drag-placeholder{opacity:0}.column>fd-card{overflow-y:hidden;height:100%;box-shadow:none}.column>fd-card fd-card-header{border:none;background:none;padding:1rem 2rem!important}.column>fd-card fd-card-content{flex:1;overflow-y:auto;padding:0 1rem;margin:0;display:flex;flex-direction:column;row-gap:20px}.column>fd-card .column-footer{padding:1rem 1rem 1rem 1.5rem;position:sticky}.column>fd-card .column-footer .new-card{display:flex;flex-direction:column;justify-content:center;row-gap:1rem}.column>fd-card .column-footer .new-card fd-card{padding:0 1rem;background:var(--sapBackgroundColor, #f7f7f7)!important}.column>fd-card .column-footer .new-card textarea{background:var(--sapBackgroundColor, #f7f7f7)!important;border:none}.column>fd-card .column-footer .new-card span{height:auto!important}.column>fd-card .column-footer .new-card .new-card-actions{display:flex;align-items:center;column-gap:10px}.column>fd-card .column-footer .new-card .new-card-actions fd-icon{font-size:1rem}.column>fd-card .column-footer .add-new-card{padding:0 1rem}.column>fd-card .column-footer .add-new-card span{display:flex;column-gap:4px}.newColumn{background-color:var(--sapList_Background, #fff)!important;border-radius:var(--sapElement_BorderCornerRadius, .25rem);align-self:flex-start;height:100px;opacity:.5;display:flex;align-items:center;justify-content:center;border:1px dashed;position:relative;cursor:pointer}.newColumn span{position:absolute}.newColumn .new-column-popover{width:100%}.newColumn .new-column-popover fd-popover-control{width:100%;height:1px}.new-column-popover-body input{border:none}.row{display:flex;align-items:center}.drop-inside{border:1px solid #00f}.drop-inside ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-before{border-top:2px solid #00f}.drop-before ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-after{border-bottom:2px solid #00f}.drop-after ::ng-deep .fd-list__item{background-color:#dce9f6!important}.columns.cdk-drop-list-dragging .column:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], propDecorators: { inputEl: [{
+                type: ViewChild,
+                args: ['inputEl', { read: ElementRef }]
+            }], kanbanColumns: [{
+                type: Input
+            }], groupbyProperty: [{
+                type: Input
+            }] } });
+
+const components = [
+    KanbanViewComponent,
+    BarsaAvatarGroupComponent,
+    KanbanCardComponent,
+    KanbanTagsComponent,
+    KanbanBaseComponent
+];
+class BarsaKanbanModule extends BaseModule {
+    constructor(dcm, componentFactoryResolver) {
+        super(dcm, componentFactoryResolver, 'BarsaKanbanModule');
+        this.dcm = dcm;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.dynamicComponents = [...components];
+    }
+}
+BarsaKanbanModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaKanbanModule, deps: [{ token: i2.DynamicComponentService }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.NgModule });
+BarsaKanbanModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: BarsaKanbanModule, declarations: [KanbanViewComponent,
+        BarsaAvatarGroupComponent,
+        KanbanCardComponent,
+        KanbanTagsComponent,
+        KanbanBaseComponent], imports: [CommonModule,
+        BarsaNovinRayCoreModule,
+        FundamentalNgxCoreModule,
+        FundamentalNgxPlatformModule,
+        BarsaEchartsModule,
+        BarsaSapUiModule,
+        FormsModule,
+        DragDropModule,
+        HttpClientModule], exports: [KanbanViewComponent,
+        BarsaAvatarGroupComponent,
+        KanbanCardComponent,
+        KanbanTagsComponent,
+        KanbanBaseComponent] });
+BarsaKanbanModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaKanbanModule, imports: [CommonModule,
+        BarsaNovinRayCoreModule,
+        FundamentalNgxCoreModule,
+        FundamentalNgxPlatformModule,
+        BarsaEchartsModule,
+        BarsaSapUiModule,
+        FormsModule,
+        DragDropModule,
+        HttpClientModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaKanbanModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...components],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    imports: [
+                        CommonModule,
+                        BarsaNovinRayCoreModule,
+                        FundamentalNgxCoreModule,
+                        FundamentalNgxPlatformModule,
+                        BarsaEchartsModule,
+                        BarsaSapUiModule,
+                        FormsModule,
+                        DragDropModule,
+                        HttpClientModule
+                    ],
+                    exports: [...components]
+                }]
+        }], ctorParameters: function () { return [{ type: i2.DynamicComponentService }, { type: i0.ComponentFactoryResolver }]; } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BarsaAvatarGroupComponent, BarsaKanbanModule, KanbanBaseComponent, KanbanCardComponent, KanbanTagsComponent, KanbanViewComponent };
+//# sourceMappingURL=barsa-kanban.mjs.map