barsa-kanban 2.0.135 → 2.1.2

package/fesm2022/barsa-kanban.mjs

@@ -27,7 +27,7 @@ import * as i6$1 from '@fundamental-ngx/core/layout-panel';
 import * as i7 from '@fundamental-ngx/core/title';
 import * as i8 from '@fundamental-ngx/core/table';
 import { BarsaEchartsModule } from 'barsa-echarts';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { PlatformMenuModule } from '@fundamental-ngx/platform';
 
 class KanbanBaseComponent extends BaseComponent {
@@ -39,12 +39,12 @@ class KanbanBaseComponent extends BaseComponent {
     closePopover(popover) {
         popover.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KanbanBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: KanbanBaseComponent, selector: "bk-kanban-base", usesInheritance: true, ngImport: i0, template: "<p>kanban-base works!</p>\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KanbanBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "17.3.5", ngImport: i0, type: KanbanBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KanbanBaseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-kanban-base', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>kanban-base works!</p>\r\n" }]
+            args: [{ selector: 'bk-kanban-base', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<p>kanban-base works!</p>\r\n" }]
         }] });
 
 class KanbanTagsComponent extends KanbanBaseComponent {
@@ -68,12 +68,12 @@ class KanbanTagsComponent extends KanbanBaseComponent {
     deleteTag(index) {
         this.tags.splice(index, 1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KanbanTagsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: KanbanTagsComponent, selector: "bk-kanban-tags", inputs: { tags: "tags", viewSetting: "viewSetting" }, usesInheritance: true, ngImport: i0, template: "<div class=\"row tags-container\">\r\n    @for (tag of tags; track tag; let i = $index) {\r\n    <fd-popover placement=\"bottom\" [closeOnOutsideClick]=\"true\">\r\n        <fd-popover-control>\r\n            <div class=\"tag\">\r\n                <fd-info-label\r\n                    [label]=\"tag[viewSetting.TagName]\"\r\n                    [color]=\"tag[viewSetting.TagColor]\"\r\n                    [title]=\"tag[viewSetting.TagName]\"\r\n                ></fd-info-label>\r\n            </div>\r\n        </fd-popover-control>\r\n        <fd-popover-body>\r\n            <div class=\"tag-delete\">\r\n                <button fd-button (click)=\"deleteTag(i)\" [label]=\"'Delete' | bbbTranslate\" glyph=\"decline\"></button>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n    }\r\n\r\n    <fd-popover\r\n        #tagPopover\r\n        [triggers]=\"[]\"\r\n        [focusTrapped]=\"false\"\r\n        [closeOnOutsideClick]=\"true\"\r\n        [noArrow]=\"false\"\r\n        placement=\"bottom\"\r\n        [focusAutoCapture]=\"true\"\r\n    >\r\n        <fd-popover-control>\r\n            <div>\r\n                <button\r\n                    fd-button\r\n                    (click)=\"openPopover($event, tagPopover)\"\r\n                    fdType=\"transparent\"\r\n                    glyph=\"sys-add\"\r\n                ></button>\r\n            </div>\r\n        </fd-popover-control>\r\n        <fd-popover-body>\r\n            <div class=\"new-tag\" (keydown.enter)=\"addTag()\">\r\n                <div fd-form-item class=\"row\">\r\n                    <input fd-form-control type=\"text\" [(ngModel)]=\"currentTagLabel\" id=\"input-1\" placeholder=\" \u0646\u0627\u0645\" />\r\n                </div>\r\n                <div class=\"colors-colection row\">\r\n                    @for (color of colorList; track color) {\r\n                    <div\r\n                        (click)=\"colorClick(color)\"\r\n                        [ngClass]=\"'fd-info-label--accent-color-' + color\"\r\n                        [class.selected-color]=\"selectedColor === color\"\r\n                        class=\"color\"\r\n                    ></div>\r\n                    }\r\n                </div>\r\n                <div class=\"ok-cancel-btns row\">\r\n                    <button fd-button [label]=\"'Ok' | bbbTranslate\" [fdType]=\"'emphasized'\" (click)=\"addTag()\"></button>\r\n                    <button\r\n                        fd-button\r\n                        [label]=\"'Cancel' | bbbTranslate\"\r\n                        [fdType]=\"'transparent'\"\r\n                        (click)=\"closePopover(tagPopover)\"\r\n                    ></button>\r\n                </div>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</div>\r\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: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i3.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: i5.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "directive", type: i6.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4$1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KanbanTagsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KanbanTagsComponent, selector: "bk-kanban-tags", inputs: { tags: "tags", viewSetting: "viewSetting" }, usesInheritance: true, ngImport: i0, template: "<div class=\"row tags-container\">\r\n    @for (tag of tags; track tag; let i = $index) {\r\n    <fd-popover placement=\"bottom\" [closeOnOutsideClick]=\"true\">\r\n        <fd-popover-control>\r\n            <div class=\"tag\">\r\n                <fd-info-label\r\n                    [label]=\"tag[viewSetting.TagName]\"\r\n                    [color]=\"tag[viewSetting.TagColor]\"\r\n                    [title]=\"tag[viewSetting.TagName]\"\r\n                ></fd-info-label>\r\n            </div>\r\n        </fd-popover-control>\r\n        <fd-popover-body>\r\n            <div class=\"tag-delete\">\r\n                <button fd-button (click)=\"deleteTag(i)\" [label]=\"'Delete' | bbbTranslate\" glyph=\"decline\"></button>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n    }\r\n\r\n    <fd-popover\r\n        #tagPopover\r\n        [triggers]=\"[]\"\r\n        [focusTrapped]=\"false\"\r\n        [closeOnOutsideClick]=\"true\"\r\n        [noArrow]=\"false\"\r\n        placement=\"bottom\"\r\n        [focusAutoCapture]=\"true\"\r\n    >\r\n        <fd-popover-control>\r\n            <div>\r\n                <button\r\n                    fd-button\r\n                    (click)=\"openPopover($event, tagPopover)\"\r\n                    fdType=\"transparent\"\r\n                    glyph=\"sys-add\"\r\n                ></button>\r\n            </div>\r\n        </fd-popover-control>\r\n        <fd-popover-body>\r\n            <div class=\"new-tag\" (keydown.enter)=\"addTag()\">\r\n                <div fd-form-item class=\"row\">\r\n                    <input fd-form-control type=\"text\" [(ngModel)]=\"currentTagLabel\" id=\"input-1\" placeholder=\" \u0646\u0627\u0645\" />\r\n                </div>\r\n                <div class=\"colors-colection row\">\r\n                    @for (color of colorList; track color) {\r\n                    <div\r\n                        (click)=\"colorClick(color)\"\r\n                        [ngClass]=\"'fd-info-label--accent-color-' + color\"\r\n                        [class.selected-color]=\"selectedColor === color\"\r\n                        class=\"color\"\r\n                    ></div>\r\n                    }\r\n                </div>\r\n                <div class=\"ok-cancel-btns row\">\r\n                    <button fd-button [label]=\"'Ok' | bbbTranslate\" [fdType]=\"'emphasized'\" (click)=\"addTag()\"></button>\r\n                    <button\r\n                        fd-button\r\n                        [label]=\"'Cancel' | bbbTranslate\"\r\n                        [fdType]=\"'transparent'\"\r\n                        (click)=\"closePopover(tagPopover)\"\r\n                    ></button>\r\n                </div>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</div>\r\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: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i3.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: i5.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "directive", type: i6.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4$1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KanbanTagsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KanbanTagsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-kanban-tags', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row tags-container\">\r\n    @for (tag of tags; track tag; let i = $index) {\r\n    <fd-popover placement=\"bottom\" [closeOnOutsideClick]=\"true\">\r\n        <fd-popover-control>\r\n            <div class=\"tag\">\r\n                <fd-info-label\r\n                    [label]=\"tag[viewSetting.TagName]\"\r\n                    [color]=\"tag[viewSetting.TagColor]\"\r\n                    [title]=\"tag[viewSetting.TagName]\"\r\n                ></fd-info-label>\r\n            </div>\r\n        </fd-popover-control>\r\n        <fd-popover-body>\r\n            <div class=\"tag-delete\">\r\n                <button fd-button (click)=\"deleteTag(i)\" [label]=\"'Delete' | bbbTranslate\" glyph=\"decline\"></button>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n    }\r\n\r\n    <fd-popover\r\n        #tagPopover\r\n        [triggers]=\"[]\"\r\n        [focusTrapped]=\"false\"\r\n        [closeOnOutsideClick]=\"true\"\r\n        [noArrow]=\"false\"\r\n        placement=\"bottom\"\r\n        [focusAutoCapture]=\"true\"\r\n    >\r\n        <fd-popover-control>\r\n            <div>\r\n                <button\r\n                    fd-button\r\n                    (click)=\"openPopover($event, tagPopover)\"\r\n                    fdType=\"transparent\"\r\n                    glyph=\"sys-add\"\r\n                ></button>\r\n            </div>\r\n        </fd-popover-control>\r\n        <fd-popover-body>\r\n            <div class=\"new-tag\" (keydown.enter)=\"addTag()\">\r\n                <div fd-form-item class=\"row\">\r\n                    <input fd-form-control type=\"text\" [(ngModel)]=\"currentTagLabel\" id=\"input-1\" placeholder=\" \u0646\u0627\u0645\" />\r\n                </div>\r\n                <div class=\"colors-colection row\">\r\n                    @for (color of colorList; track color) {\r\n                    <div\r\n                        (click)=\"colorClick(color)\"\r\n                        [ngClass]=\"'fd-info-label--accent-color-' + color\"\r\n                        [class.selected-color]=\"selectedColor === color\"\r\n                        class=\"color\"\r\n                    ></div>\r\n                    }\r\n                </div>\r\n                <div class=\"ok-cancel-btns row\">\r\n                    <button fd-button [label]=\"'Ok' | bbbTranslate\" [fdType]=\"'emphasized'\" (click)=\"addTag()\"></button>\r\n                    <button\r\n                        fd-button\r\n                        [label]=\"'Cancel' | bbbTranslate\"\r\n                        [fdType]=\"'transparent'\"\r\n                        (click)=\"closePopover(tagPopover)\"\r\n                    ></button>\r\n                </div>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</div>\r\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"] }]
+            args: [{ selector: 'bk-kanban-tags', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"row tags-container\">\r\n    @for (tag of tags; track tag; let i = $index) {\r\n    <fd-popover placement=\"bottom\" [closeOnOutsideClick]=\"true\">\r\n        <fd-popover-control>\r\n            <div class=\"tag\">\r\n                <fd-info-label\r\n                    [label]=\"tag[viewSetting.TagName]\"\r\n                    [color]=\"tag[viewSetting.TagColor]\"\r\n                    [title]=\"tag[viewSetting.TagName]\"\r\n                ></fd-info-label>\r\n            </div>\r\n        </fd-popover-control>\r\n        <fd-popover-body>\r\n            <div class=\"tag-delete\">\r\n                <button fd-button (click)=\"deleteTag(i)\" [label]=\"'Delete' | bbbTranslate\" glyph=\"decline\"></button>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n    }\r\n\r\n    <fd-popover\r\n        #tagPopover\r\n        [triggers]=\"[]\"\r\n        [focusTrapped]=\"false\"\r\n        [closeOnOutsideClick]=\"true\"\r\n        [noArrow]=\"false\"\r\n        placement=\"bottom\"\r\n        [focusAutoCapture]=\"true\"\r\n    >\r\n        <fd-popover-control>\r\n            <div>\r\n                <button\r\n                    fd-button\r\n                    (click)=\"openPopover($event, tagPopover)\"\r\n                    fdType=\"transparent\"\r\n                    glyph=\"sys-add\"\r\n                ></button>\r\n            </div>\r\n        </fd-popover-control>\r\n        <fd-popover-body>\r\n            <div class=\"new-tag\" (keydown.enter)=\"addTag()\">\r\n                <div fd-form-item class=\"row\">\r\n                    <input fd-form-control type=\"text\" [(ngModel)]=\"currentTagLabel\" id=\"input-1\" placeholder=\" \u0646\u0627\u0645\" />\r\n                </div>\r\n                <div class=\"colors-colection row\">\r\n                    @for (color of colorList; track color) {\r\n                    <div\r\n                        (click)=\"colorClick(color)\"\r\n                        [ngClass]=\"'fd-info-label--accent-color-' + color\"\r\n                        [class.selected-color]=\"selectedColor === color\"\r\n                        class=\"color\"\r\n                    ></div>\r\n                    }\r\n                </div>\r\n                <div class=\"ok-cancel-btns row\">\r\n                    <button fd-button [label]=\"'Ok' | bbbTranslate\" [fdType]=\"'emphasized'\" (click)=\"addTag()\"></button>\r\n                    <button\r\n                        fd-button\r\n                        [label]=\"'Cancel' | bbbTranslate\"\r\n                        [fdType]=\"'transparent'\"\r\n                        (click)=\"closePopover(tagPopover)\"\r\n                    ></button>\r\n                </div>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</div>\r\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: [{
@@ -90,12 +90,12 @@ class KanbanCardComponent extends BaseViewItemPropsComponent {
         super.ngOnInit();
         this.moTaskPercentage = Math.floor((this.moFinishedTasksCount / this.moTasksCount) * 100);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KanbanCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: KanbanCardComponent, selector: "bk-kanban-card", inputs: { index: "index", mo: "mo", viewSetting: "viewSetting", allAvailableAssignees: "allAvailableAssignees" }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<div #trEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"trEl\">\n    <fd-card [interactive]=\"true\" role=\"listitem\" (click)=\"onRowCheck()\" [class.selected]=\"isChecked\">\n        <fd-card-header>\n            <fd-card-main-header>\n                @if(viewSetting.PictureField){\n                <fd-avatar\n                    [glyph]=\"'travel-expense'\"\n                    [image]=\"\"\n                    size=\"s\"\n                    ariaLabel=\"avatar image\"\n                    title=\"avatar image\"\n                ></fd-avatar>\n                }\n                <h2\n                    fd-card-title\n                    #hEl\n                    [applyConditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [hostEl]=\"hEl\"\n                    [dbName]=\"(allColumns | findColumnByDbName: viewSetting.TitleField)?.Name\"\n                    [mo]=\"mo\"\n                >\n                    {{ viewSetting.TitleField | rval: mo:allColumns:true }}\n                </h2>\n                @if(viewSetting.SubtitleField){\n                <h3\n                    fd-card-subtitle\n                    #hElSubtitle\n                    [applyConditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [hostEl]=\"hElSubtitle\"\n                    [dbName]=\"(allColumns | findColumnByDbName: viewSetting.SubtitleField)?.Name\"\n                >\n                    {{ viewSetting.SubtitleField | rval: mo:allColumns:true }}\n                </h3>\n                } @if(viewSetting.CounterField){\n                <span\n                    fd-card-counter\n                    #hElCounter\n                    [applyConditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [hostEl]=\"hElCounter\"\n                    [dbName]=\"(allColumns | findColumnByDbName: viewSetting.CounterField)?.Name\"\n                    [mo]=\"mo\"\n                    >{{ viewSetting.CounterField | rval: mo:allColumns:true }}\n                </span>\n                }\n                <!-- <button\n                fd-button\n                fd-card-header-action\n                fdType=\"transparent\"\n                glyph=\"overflow\"\n                ariaLabel=\"More\"\n                title=\"More\"\n            ></button> -->\n            </fd-card-main-header>\n            @if(viewSetting.HeaderRowOneField || viewSetting.HeaderRowTwoField || viewSetting.HeaderRowRightField ){\n            <fd-card-extended-header [align]=\"'bottom'\">\n                <div fd-card-header-column>\n                    @if(viewSetting.HeaderRowOneField){\n                    <div fd-card-header-row>\n                        <span\n                            #hElHeaderRowOneField\n                            [applyConditionalFormats]=\"conditionalFormats\"\n                            [styleIndex]=\"styleIndex\"\n                            [hostEl]=\"hElHeaderRowOneField\"\n                            [dbName]=\"(allColumns | findColumnByDbName: viewSetting.HeaderRowOneField)?.Name\"\n                        >\n                            {{ viewSetting.HeaderRowOneField | rval: mo:allColumns:true }}\n                        </span>\n                    </div>\n                    } @if(viewSetting.HeaderRowTwoField){\n                    <div fd-card-header-row>\n                        <span\n                            #elHeaderRowTwoField\n                            [applyConditionalFormats]=\"conditionalFormats\"\n                            [styleIndex]=\"styleIndex\"\n                            [hostEl]=\"elHeaderRowTwoField\"\n                            [dbName]=\"(allColumns | findColumnByDbName: viewSetting.HeaderRowTwoField)?.Name\"\n                        >\n                            {{ viewSetting.HeaderRowTwoField | rval: mo:allColumns:true }}\n                        </span>\n                    </div>\n                    }\n                </div>\n                <div fd-card-header-column [align]=\"'right'\">\n                    @if(viewSetting.HeaderRowRightField){\n                    <div fd-card-header-row>\n                        <span\n                            #elHeaderRowRightField\n                            [applyConditionalFormats]=\"conditionalFormats\"\n                            [styleIndex]=\"styleIndex\"\n                            [hostEl]=\"elHeaderRowRightField\"\n                            [dbName]=\"(allColumns | findColumnByDbName: viewSetting.HeaderRowRightField)?.Name\"\n                            >{{ viewSetting.HeaderRowRightField | rval: mo:allColumns:true }}</span\n                        >\n                    </div>\n                    }\n                </div>\n            </fd-card-extended-header>\n            }\n        </fd-card-header>\n        <!-- <fd-card-footer>\n        <button *fdCardFooterActionItem fd-button fdType=\"positive\">Approve</button>\n        <button *fdCardFooterActionItem fd-button fdType=\"negative\">Reject</button>\n    </fd-card-footer> -->\n    </fd-card>\n</div>\n<ng-template #columnTemplate let-column let-mo=\"mo\" let-index=\"index\" let-layout94=\"layout94\" let-ischecked=\"ischecked\"\n    >@if (column) {\n    <div\n        #divEl\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [hostEl]=\"divEl\"\n        [dbName]=\"column.Name\"\n    >\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [column]=\"column\"\n            [value]=\"column | columnValue: mo | bbbTranslate\"\n            [icon]=\"column | columnIcon: mo\"\n            [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n            [rtl]=\"rtl\"\n            [isChecked]=\"isChecked\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [controlUi]=\"column.Caption | controlUi: layout94:column.Name\"\n            (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n            (keyup.esc)=\"onEditFormPanelCancel($event)\"\n            (keydown.Tab)=\"onTabKeyDown($event, index)\"\n            [formLayoutShowLabel]=\"true\"\n        ></bsu-column-renderer>\n    </div>\n    }\n</ng-template>\n", styles: [":host{position:relative}:host.selected{background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}:host.selected fd-card{border-color:var(--sapList_SelectionBorderColor, #0854a0)}:host fd-card,:host fd-card-header,:host .fd-bar--footer,:host fd-quick-view-subheader .fd-bar{background-color:inherit!important}:host fd-card ::ng-deep .fd-card__header-main{background-color:transparent}.row{display:flex;align-items:center}.fd-card{box-shadow:0 0 .125rem #22354833,0 .125rem .25rem #22354833}.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}.column-data.first ::ng-deep div.ellapsis{font-weight:700;font-family:IRANYekanDigits}\n"], dependencies: [{ kind: "component", type: i1$1.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$1.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i2$1.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i2$1.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i2$1.CardExtendedHeaderComponent, selector: "fd-card-extended-header", inputs: ["ariaRoleDescription", "align"] }, { kind: "directive", type: i2$1.CardHeaderRowDirective, selector: "[fd-card-header-row]" }, { kind: "directive", type: i2$1.CardHeaderColumnDirective, selector: "[fd-card-header-column]", inputs: ["align"] }, { kind: "directive", type: i2$1.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i2$1.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "directive", type: i2$1.CardCounterDirective, selector: "[fd-card-counter]", inputs: ["status"] }, { kind: "component", type: i3$1.ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "containerDom", "disableEllapsis", "rtl", "isMobile", "fdTextMode", "deviceName", "deviceSize", "value", "icon"] }, { kind: "directive", type: i3$1.ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i4$1.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i4$1.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i4$1.ControlUiPipe, name: "controlUi" }, { kind: "pipe", type: i4$1.FindColumnByDbNamePipe, name: "findColumnByDbName" }, { kind: "pipe", type: i4$1.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i4$1.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KanbanCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KanbanCardComponent, selector: "bk-kanban-card", inputs: { index: "index", mo: "mo", viewSetting: "viewSetting", allAvailableAssignees: "allAvailableAssignees" }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<div #trEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"trEl\">\n    <fd-card [interactive]=\"true\" role=\"listitem\" (click)=\"onRowCheck()\" [class.selected]=\"isChecked\">\n        <fd-card-header>\n            <fd-card-main-header>\n                @if(viewSetting.PictureField){\n                <fd-avatar\n                    [glyph]=\"'travel-expense'\"\n                    [image]=\"\"\n                    size=\"s\"\n                    ariaLabel=\"avatar image\"\n                    title=\"avatar image\"\n                ></fd-avatar>\n                }\n                <h2\n                    fd-card-title\n                    #hEl\n                    [applyConditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [hostEl]=\"hEl\"\n                    [dbName]=\"(allColumns | findColumnByDbName: viewSetting.TitleField)?.Name\"\n                    [mo]=\"mo\"\n                >\n                    {{ viewSetting.TitleField | rval: mo:allColumns:true }}\n                </h2>\n                @if(viewSetting.SubtitleField){\n                <h3\n                    fd-card-subtitle\n                    #hElSubtitle\n                    [applyConditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [hostEl]=\"hElSubtitle\"\n                    [dbName]=\"(allColumns | findColumnByDbName: viewSetting.SubtitleField)?.Name\"\n                >\n                    {{ viewSetting.SubtitleField | rval: mo:allColumns:true }}\n                </h3>\n                } @if(viewSetting.CounterField){\n                <span\n                    fd-card-counter\n                    #hElCounter\n                    [applyConditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [hostEl]=\"hElCounter\"\n                    [dbName]=\"(allColumns | findColumnByDbName: viewSetting.CounterField)?.Name\"\n                    [mo]=\"mo\"\n                    >{{ viewSetting.CounterField | rval: mo:allColumns:true }}\n                </span>\n                }\n                <!-- <button\n                fd-button\n                fd-card-header-action\n                fdType=\"transparent\"\n                glyph=\"overflow\"\n                ariaLabel=\"More\"\n                title=\"More\"\n            ></button> -->\n            </fd-card-main-header>\n            @if(viewSetting.HeaderRowOneField || viewSetting.HeaderRowTwoField || viewSetting.HeaderRowRightField ){\n            <fd-card-extended-header [align]=\"'bottom'\">\n                <div fd-card-header-column>\n                    @if(viewSetting.HeaderRowOneField){\n                    <div fd-card-header-row>\n                        <span\n                            #hElHeaderRowOneField\n                            [applyConditionalFormats]=\"conditionalFormats\"\n                            [styleIndex]=\"styleIndex\"\n                            [hostEl]=\"hElHeaderRowOneField\"\n                            [dbName]=\"(allColumns | findColumnByDbName: viewSetting.HeaderRowOneField)?.Name\"\n                        >\n                            {{ viewSetting.HeaderRowOneField | rval: mo:allColumns:true }}\n                        </span>\n                    </div>\n                    } @if(viewSetting.HeaderRowTwoField){\n                    <div fd-card-header-row>\n                        <span\n                            #elHeaderRowTwoField\n                            [applyConditionalFormats]=\"conditionalFormats\"\n                            [styleIndex]=\"styleIndex\"\n                            [hostEl]=\"elHeaderRowTwoField\"\n                            [dbName]=\"(allColumns | findColumnByDbName: viewSetting.HeaderRowTwoField)?.Name\"\n                        >\n                            {{ viewSetting.HeaderRowTwoField | rval: mo:allColumns:true }}\n                        </span>\n                    </div>\n                    }\n                </div>\n                <div fd-card-header-column [align]=\"'right'\">\n                    @if(viewSetting.HeaderRowRightField){\n                    <div fd-card-header-row>\n                        <span\n                            #elHeaderRowRightField\n                            [applyConditionalFormats]=\"conditionalFormats\"\n                            [styleIndex]=\"styleIndex\"\n                            [hostEl]=\"elHeaderRowRightField\"\n                            [dbName]=\"(allColumns | findColumnByDbName: viewSetting.HeaderRowRightField)?.Name\"\n                            >{{ viewSetting.HeaderRowRightField | rval: mo:allColumns:true }}</span\n                        >\n                    </div>\n                    }\n                </div>\n            </fd-card-extended-header>\n            }\n        </fd-card-header>\n        <!-- <fd-card-footer>\n        <button *fdCardFooterActionItem fd-button fdType=\"positive\">Approve</button>\n        <button *fdCardFooterActionItem fd-button fdType=\"negative\">Reject</button>\n    </fd-card-footer> -->\n    </fd-card>\n</div>\n<ng-template #columnTemplate let-column let-mo=\"mo\" let-index=\"index\" let-layout94=\"layout94\" let-ischecked=\"ischecked\"\n    >@if (column) {\n    <div\n        #divEl\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [hostEl]=\"divEl\"\n        [dbName]=\"column.Name\"\n    >\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [column]=\"column\"\n            [value]=\"column | columnValue: mo | bbbTranslate\"\n            [icon]=\"column | columnIcon: mo\"\n            [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n            [rtl]=\"rtl\"\n            [isChecked]=\"isChecked\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [controlUi]=\"column.Caption | controlUi: layout94:column.Name\"\n            (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n            (keyup.esc)=\"onEditFormPanelCancel($event)\"\n            (keydown.Tab)=\"onTabKeyDown($event, index)\"\n            [formLayoutShowLabel]=\"true\"\n        ></bsu-column-renderer>\n    </div>\n    }\n</ng-template>\n", styles: [":host{position:relative}:host.selected{background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}:host.selected fd-card{border-color:var(--sapList_SelectionBorderColor, #0854a0)}:host fd-card,:host fd-card-header,:host .fd-bar--footer,:host fd-quick-view-subheader .fd-bar{background-color:inherit!important}:host fd-card ::ng-deep .fd-card__header-main{background-color:transparent}.row{display:flex;align-items:center}.fd-card{box-shadow:0 0 .125rem #22354833,0 .125rem .25rem #22354833}.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}.column-data.first ::ng-deep div.ellapsis{font-weight:700;font-family:IRANYekanDigits}\n"], dependencies: [{ kind: "component", type: i1$1.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$1.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i2$1.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i2$1.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i2$1.CardExtendedHeaderComponent, selector: "fd-card-extended-header", inputs: ["ariaRoleDescription", "align"] }, { kind: "directive", type: i2$1.CardHeaderRowDirective, selector: "[fd-card-header-row]" }, { kind: "directive", type: i2$1.CardHeaderColumnDirective, selector: "[fd-card-header-column]", inputs: ["align"] }, { kind: "directive", type: i2$1.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i2$1.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "directive", type: i2$1.CardCounterDirective, selector: "[fd-card-counter]", inputs: ["status"] }, { kind: "component", type: i3$1.ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "containerDom", "disableEllapsis", "rtl", "isMobile", "fdTextMode", "deviceName", "deviceSize", "value", "icon"] }, { kind: "directive", type: i3$1.ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i4$1.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i4$1.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i4$1.ControlUiPipe, name: "controlUi" }, { kind: "pipe", type: i4$1.FindColumnByDbNamePipe, name: "findColumnByDbName" }, { kind: "pipe", type: i4$1.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i4$1.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KanbanCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KanbanCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-kanban-card', providers: [FormPanelService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #trEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"trEl\">\n    <fd-card [interactive]=\"true\" role=\"listitem\" (click)=\"onRowCheck()\" [class.selected]=\"isChecked\">\n        <fd-card-header>\n            <fd-card-main-header>\n                @if(viewSetting.PictureField){\n                <fd-avatar\n                    [glyph]=\"'travel-expense'\"\n                    [image]=\"\"\n                    size=\"s\"\n                    ariaLabel=\"avatar image\"\n                    title=\"avatar image\"\n                ></fd-avatar>\n                }\n                <h2\n                    fd-card-title\n                    #hEl\n                    [applyConditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [hostEl]=\"hEl\"\n                    [dbName]=\"(allColumns | findColumnByDbName: viewSetting.TitleField)?.Name\"\n                    [mo]=\"mo\"\n                >\n                    {{ viewSetting.TitleField | rval: mo:allColumns:true }}\n                </h2>\n                @if(viewSetting.SubtitleField){\n                <h3\n                    fd-card-subtitle\n                    #hElSubtitle\n                    [applyConditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [hostEl]=\"hElSubtitle\"\n                    [dbName]=\"(allColumns | findColumnByDbName: viewSetting.SubtitleField)?.Name\"\n                >\n                    {{ viewSetting.SubtitleField | rval: mo:allColumns:true }}\n                </h3>\n                } @if(viewSetting.CounterField){\n                <span\n                    fd-card-counter\n                    #hElCounter\n                    [applyConditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [hostEl]=\"hElCounter\"\n                    [dbName]=\"(allColumns | findColumnByDbName: viewSetting.CounterField)?.Name\"\n                    [mo]=\"mo\"\n                    >{{ viewSetting.CounterField | rval: mo:allColumns:true }}\n                </span>\n                }\n                <!-- <button\n                fd-button\n                fd-card-header-action\n                fdType=\"transparent\"\n                glyph=\"overflow\"\n                ariaLabel=\"More\"\n                title=\"More\"\n            ></button> -->\n            </fd-card-main-header>\n            @if(viewSetting.HeaderRowOneField || viewSetting.HeaderRowTwoField || viewSetting.HeaderRowRightField ){\n            <fd-card-extended-header [align]=\"'bottom'\">\n                <div fd-card-header-column>\n                    @if(viewSetting.HeaderRowOneField){\n                    <div fd-card-header-row>\n                        <span\n                            #hElHeaderRowOneField\n                            [applyConditionalFormats]=\"conditionalFormats\"\n                            [styleIndex]=\"styleIndex\"\n                            [hostEl]=\"hElHeaderRowOneField\"\n                            [dbName]=\"(allColumns | findColumnByDbName: viewSetting.HeaderRowOneField)?.Name\"\n                        >\n                            {{ viewSetting.HeaderRowOneField | rval: mo:allColumns:true }}\n                        </span>\n                    </div>\n                    } @if(viewSetting.HeaderRowTwoField){\n                    <div fd-card-header-row>\n                        <span\n                            #elHeaderRowTwoField\n                            [applyConditionalFormats]=\"conditionalFormats\"\n                            [styleIndex]=\"styleIndex\"\n                            [hostEl]=\"elHeaderRowTwoField\"\n                            [dbName]=\"(allColumns | findColumnByDbName: viewSetting.HeaderRowTwoField)?.Name\"\n                        >\n                            {{ viewSetting.HeaderRowTwoField | rval: mo:allColumns:true }}\n                        </span>\n                    </div>\n                    }\n                </div>\n                <div fd-card-header-column [align]=\"'right'\">\n                    @if(viewSetting.HeaderRowRightField){\n                    <div fd-card-header-row>\n                        <span\n                            #elHeaderRowRightField\n                            [applyConditionalFormats]=\"conditionalFormats\"\n                            [styleIndex]=\"styleIndex\"\n                            [hostEl]=\"elHeaderRowRightField\"\n                            [dbName]=\"(allColumns | findColumnByDbName: viewSetting.HeaderRowRightField)?.Name\"\n                            >{{ viewSetting.HeaderRowRightField | rval: mo:allColumns:true }}</span\n                        >\n                    </div>\n                    }\n                </div>\n            </fd-card-extended-header>\n            }\n        </fd-card-header>\n        <!-- <fd-card-footer>\n        <button *fdCardFooterActionItem fd-button fdType=\"positive\">Approve</button>\n        <button *fdCardFooterActionItem fd-button fdType=\"negative\">Reject</button>\n    </fd-card-footer> -->\n    </fd-card>\n</div>\n<ng-template #columnTemplate let-column let-mo=\"mo\" let-index=\"index\" let-layout94=\"layout94\" let-ischecked=\"ischecked\"\n    >@if (column) {\n    <div\n        #divEl\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [hostEl]=\"divEl\"\n        [dbName]=\"column.Name\"\n    >\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [column]=\"column\"\n            [value]=\"column | columnValue: mo | bbbTranslate\"\n            [icon]=\"column | columnIcon: mo\"\n            [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n            [rtl]=\"rtl\"\n            [isChecked]=\"isChecked\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [controlUi]=\"column.Caption | controlUi: layout94:column.Name\"\n            (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n            (keyup.esc)=\"onEditFormPanelCancel($event)\"\n            (keydown.Tab)=\"onTabKeyDown($event, index)\"\n            [formLayoutShowLabel]=\"true\"\n        ></bsu-column-renderer>\n    </div>\n    }\n</ng-template>\n", styles: [":host{position:relative}:host.selected{background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}:host.selected fd-card{border-color:var(--sapList_SelectionBorderColor, #0854a0)}:host fd-card,:host fd-card-header,:host .fd-bar--footer,:host fd-quick-view-subheader .fd-bar{background-color:inherit!important}:host fd-card ::ng-deep .fd-card__header-main{background-color:transparent}.row{display:flex;align-items:center}.fd-card{box-shadow:0 0 .125rem #22354833,0 .125rem .25rem #22354833}.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}.column-data.first ::ng-deep div.ellapsis{font-weight:700;font-family:IRANYekanDigits}\n"] }]
+            args: [{ selector: 'bk-kanban-card', providers: [FormPanelService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div #trEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"trEl\">\n    <fd-card [interactive]=\"true\" role=\"listitem\" (click)=\"onRowCheck()\" [class.selected]=\"isChecked\">\n        <fd-card-header>\n            <fd-card-main-header>\n                @if(viewSetting.PictureField){\n                <fd-avatar\n                    [glyph]=\"'travel-expense'\"\n                    [image]=\"\"\n                    size=\"s\"\n                    ariaLabel=\"avatar image\"\n                    title=\"avatar image\"\n                ></fd-avatar>\n                }\n                <h2\n                    fd-card-title\n                    #hEl\n                    [applyConditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [hostEl]=\"hEl\"\n                    [dbName]=\"(allColumns | findColumnByDbName: viewSetting.TitleField)?.Name\"\n                    [mo]=\"mo\"\n                >\n                    {{ viewSetting.TitleField | rval: mo:allColumns:true }}\n                </h2>\n                @if(viewSetting.SubtitleField){\n                <h3\n                    fd-card-subtitle\n                    #hElSubtitle\n                    [applyConditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [hostEl]=\"hElSubtitle\"\n                    [dbName]=\"(allColumns | findColumnByDbName: viewSetting.SubtitleField)?.Name\"\n                >\n                    {{ viewSetting.SubtitleField | rval: mo:allColumns:true }}\n                </h3>\n                } @if(viewSetting.CounterField){\n                <span\n                    fd-card-counter\n                    #hElCounter\n                    [applyConditionalFormats]=\"conditionalFormats\"\n                    [styleIndex]=\"styleIndex\"\n                    [hostEl]=\"hElCounter\"\n                    [dbName]=\"(allColumns | findColumnByDbName: viewSetting.CounterField)?.Name\"\n                    [mo]=\"mo\"\n                    >{{ viewSetting.CounterField | rval: mo:allColumns:true }}\n                </span>\n                }\n                <!-- <button\n                fd-button\n                fd-card-header-action\n                fdType=\"transparent\"\n                glyph=\"overflow\"\n                ariaLabel=\"More\"\n                title=\"More\"\n            ></button> -->\n            </fd-card-main-header>\n            @if(viewSetting.HeaderRowOneField || viewSetting.HeaderRowTwoField || viewSetting.HeaderRowRightField ){\n            <fd-card-extended-header [align]=\"'bottom'\">\n                <div fd-card-header-column>\n                    @if(viewSetting.HeaderRowOneField){\n                    <div fd-card-header-row>\n                        <span\n                            #hElHeaderRowOneField\n                            [applyConditionalFormats]=\"conditionalFormats\"\n                            [styleIndex]=\"styleIndex\"\n                            [hostEl]=\"hElHeaderRowOneField\"\n                            [dbName]=\"(allColumns | findColumnByDbName: viewSetting.HeaderRowOneField)?.Name\"\n                        >\n                            {{ viewSetting.HeaderRowOneField | rval: mo:allColumns:true }}\n                        </span>\n                    </div>\n                    } @if(viewSetting.HeaderRowTwoField){\n                    <div fd-card-header-row>\n                        <span\n                            #elHeaderRowTwoField\n                            [applyConditionalFormats]=\"conditionalFormats\"\n                            [styleIndex]=\"styleIndex\"\n                            [hostEl]=\"elHeaderRowTwoField\"\n                            [dbName]=\"(allColumns | findColumnByDbName: viewSetting.HeaderRowTwoField)?.Name\"\n                        >\n                            {{ viewSetting.HeaderRowTwoField | rval: mo:allColumns:true }}\n                        </span>\n                    </div>\n                    }\n                </div>\n                <div fd-card-header-column [align]=\"'right'\">\n                    @if(viewSetting.HeaderRowRightField){\n                    <div fd-card-header-row>\n                        <span\n                            #elHeaderRowRightField\n                            [applyConditionalFormats]=\"conditionalFormats\"\n                            [styleIndex]=\"styleIndex\"\n                            [hostEl]=\"elHeaderRowRightField\"\n                            [dbName]=\"(allColumns | findColumnByDbName: viewSetting.HeaderRowRightField)?.Name\"\n                            >{{ viewSetting.HeaderRowRightField | rval: mo:allColumns:true }}</span\n                        >\n                    </div>\n                    }\n                </div>\n            </fd-card-extended-header>\n            }\n        </fd-card-header>\n        <!-- <fd-card-footer>\n        <button *fdCardFooterActionItem fd-button fdType=\"positive\">Approve</button>\n        <button *fdCardFooterActionItem fd-button fdType=\"negative\">Reject</button>\n    </fd-card-footer> -->\n    </fd-card>\n</div>\n<ng-template #columnTemplate let-column let-mo=\"mo\" let-index=\"index\" let-layout94=\"layout94\" let-ischecked=\"ischecked\"\n    >@if (column) {\n    <div\n        #divEl\n        [applyConditionalFormats]=\"conditionalFormats\"\n        [styleIndex]=\"styleIndex\"\n        [hostEl]=\"divEl\"\n        [dbName]=\"column.Name\"\n    >\n        <bsu-column-renderer\n            [mo]=\"mo\"\n            [column]=\"column\"\n            [value]=\"column | columnValue: mo | bbbTranslate\"\n            [icon]=\"column | columnIcon: mo\"\n            [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n            [rtl]=\"rtl\"\n            [isChecked]=\"isChecked\"\n            [deviceName]=\"deviceName\"\n            [deviceSize]=\"deviceSize\"\n            [index]=\"index\"\n            [controlUi]=\"column.Caption | controlUi: layout94:column.Name\"\n            (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n            (keyup.esc)=\"onEditFormPanelCancel($event)\"\n            (keydown.Tab)=\"onTabKeyDown($event, index)\"\n            [formLayoutShowLabel]=\"true\"\n        ></bsu-column-renderer>\n    </div>\n    }\n</ng-template>\n", styles: [":host{position:relative}:host.selected{background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}:host.selected fd-card{border-color:var(--sapList_SelectionBorderColor, #0854a0)}:host fd-card,:host fd-card-header,:host .fd-bar--footer,:host fd-quick-view-subheader .fd-bar{background-color:inherit!important}:host fd-card ::ng-deep .fd-card__header-main{background-color:transparent}.row{display:flex;align-items:center}.fd-card{box-shadow:0 0 .125rem #22354833,0 .125rem .25rem #22354833}.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}.column-data.first ::ng-deep div.ellapsis{font-weight:700;font-family:IRANYekanDigits}\n"] }]
         }], propDecorators: { index: [{
                 type: Input
             }], mo: [{
@@ -150,12 +150,12 @@ class BarsaAvatarGroupComponent extends KanbanBaseComponent {
             popover.open();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaAvatarGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", 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\">\r\n    <fd-popover\r\n        [noArrow]=\"false\"\r\n        [focusTrapped]=\"true\"\r\n        [focusAutoCapture]=\"true\"\r\n        [triggers]=\"[]\"\r\n        [closeOnOutsideClick]=\"true\"\r\n        [closeOnEscapeKey]=\"true\"\r\n        (isOpenChange)=\"isOpenChanged($event)\"\r\n        placement=\"bottom\"\r\n        [maxWidth]=\"312\"\r\n        #overflowPopover\r\n    >\r\n        <fd-popover-control\r\n            fd-avatar-group-popover-control\r\n            [attr.aria-label]=\"\r\n                'Has popup type dialog Conjoined avatars, ' +\r\n                ' avatars displayed, ' +\r\n                1 +\r\n                ' avatars hidden, activate for complete list'\r\n            \"\r\n            (click)=\"handleControlClick($event, overflowPopover)\"\r\n            (keydown)=\"handleControlKeydown($event, overflowPopover)\"\r\n        >\r\n            @for (person of existedItems; track person) {\r\n            <div fd-avatar-group-item>\r\n                @if (!person[viewSetting.AssigneeImage]) {\r\n                <fd-avatar\r\n                    [label]=\"person[viewSetting.AssigneeName]\"\r\n                    [title]=\"person[viewSetting.AssigneeName]\"\r\n                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\r\n                    role=\"img\"\r\n                    [circle]=\"true\"\r\n                    [border]=\"true\"\r\n                    [size]=\"size\"\r\n                ></fd-avatar>\r\n                } @if (person[viewSetting.AssigneeImage]; as avatar) {\r\n                <fd-avatar\r\n                    role=\"img\"\r\n                    [title]=\"person[viewSetting.AssigneeName]\"\r\n                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\r\n                    [circle]=\"true\"\r\n                    [border]=\"true\"\r\n                    [size]=\"size\"\r\n                    [image]=\"(avatar.FileId | picFieldSrc: 'ID':person.Id) || ''\"\r\n                >\r\n                </fd-avatar>\r\n                }\r\n            </div>\r\n            } \r\n            <button fd-button fd-avatar-group-overflow-button tabindex=\"-1\" [compact]=\"false\" [size]=\"size\">\r\n                <bdi fd-avatar-group-overflow-button-text> 1 </bdi>\r\n            </button>\r\n            \r\n        </fd-popover-control>\r\n        <fd-popover-body #overflowPopoverBody aria-labelledby=\"avatar-group-1-popover-header\" role=\"tooltip\">\r\n            <div class=\"fd-popover__wrapper\">\r\n                <div fd-popover-body-header>\r\n                    <div fd-bar barDesign=\"header\">\r\n                        <div fd-bar-left>\r\n                            @if (isDetailStage) {\r\n                            <fd-button-bar\r\n                                (click)=\"openOverflowMain()\"\r\n                                glyph=\"navigation-left-arrow\"\r\n                                fdType=\"transparent\"\r\n                                aria-label=\"Back\"\r\n                                title=\"Back\"\r\n                            ></fd-button-bar>\r\n                            }\r\n                            <fd-bar-element id=\"avatar-group-1-popover-header\">\r\n                                {{ isDetailStage ? 'Business Card' : 'Team Members (' + existedItems?.length + ')' }}\r\n                            </fd-bar-element>\r\n                            @if (isDetailStage) {\r\n                            <fd-bar-element>&nbsp;</fd-bar-element>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div\r\n                    fd-avatar-group-overflow-body\r\n                    [noPadding]=\"isDetailStage\"\r\n                    [noHorizontalScroll]=\"isDetailStage\"\r\n                    [noVerticalScroll]=\"false\"\r\n                >\r\n                    @if (overflowPopoverStage === 'main') { @for (person of existedItems; track person; let idx =\r\n                    $index) {\r\n                    <div fd-avatar-group-overflow-item>\r\n                        <fd-popover [triggers]=\"['click']\">\r\n                            <fd-popover-control>\r\n                                @if (!person[viewSetting.AssigneeImage]) {\r\n                                <fd-avatar\r\n                                    fd-avatar-group-focusable-avatar\r\n                                    [circle]=\"true\"\r\n                                    size=\"s\"\r\n                                    [label]=\"person[viewSetting.AssigneeName]\"\r\n                                    [title]=\"person[viewSetting.AssigneeName]\"\r\n                                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\r\n                                    role=\"img\"\r\n                                ></fd-avatar>\r\n                                } @if (person[viewSetting.AssigneeImage]; as avatar) {\r\n                                <fd-avatar\r\n                                    fd-avatar-group-focusable-avatar\r\n                                    role=\"img\"\r\n                                    [title]=\"person[viewSetting.AssigneeName]\"\r\n                                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\r\n                                    [circle]=\"true\"\r\n                                    size=\"s\"\r\n                                    [image]=\"(avatar.FileId | picFieldSrc: 'ID':person.Id) || ''\"\r\n                                ></fd-avatar>\r\n                                }\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <div class=\"avatar-actions\">\r\n                                    <button\r\n                                        fd-button\r\n                                        (click)=\"deleteAvatar(idx)\"\r\n                                        [label]=\"'Delete' | bbbTranslate\"\r\n                                        glyph=\"decline\"\r\n                                    ></button>\r\n                                    <button fd-button [label]=\"'Show' | bbbTranslate\" glyph=\"detail-view\"></button>\r\n                                </div>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                    </div>\r\n                    } }\r\n                </div>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</fd-avatar-group>\r\n\r\n@if (addItem) {\r\n<fd-popover\r\n    #peoplePopover\r\n    [triggers]=\"[]\"\r\n    [focusTrapped]=\"false\"\r\n    [closeOnOutsideClick]=\"true\"\r\n    [noArrow]=\"false\"\r\n    placement=\"bottom\"\r\n    [focusAutoCapture]=\"true\"\r\n>\r\n    <fd-popover-control>\r\n        <div>\r\n            <button\r\n                fd-button\r\n                (click)=\"openPopover($event, peoplePopover)\"\r\n                fdType=\"transparent\"\r\n                glyph=\"sys-add\"\r\n            ></button>\r\n        </div>\r\n    </fd-popover-control>\r\n    <fd-popover-body>\r\n        <ul fd-list>\r\n            @for (item of availableItems; track item) {\r\n            <li fd-list-item (click)=\"newItem(item)\">\r\n                @if (visibleFields.length > 0) { @for (field of visibleFields; track field) {\r\n                {{ item[field] }}\r\n                } } @else {\r\n                {{ item }}\r\n                }\r\n            </li>\r\n            }\r\n        </ul>\r\n    </fd-popover-body>\r\n</fd-popover>\r\n}\r\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: "component", type: i1$1.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i2$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$2.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i4$2.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "component", type: i5.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: i5.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "pipe", type: i4$1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i4$1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaAvatarGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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\">\r\n    <fd-popover\r\n        [noArrow]=\"false\"\r\n        [focusTrapped]=\"true\"\r\n        [focusAutoCapture]=\"true\"\r\n        [triggers]=\"[]\"\r\n        [closeOnOutsideClick]=\"true\"\r\n        [closeOnEscapeKey]=\"true\"\r\n        (isOpenChange)=\"isOpenChanged($event)\"\r\n        placement=\"bottom\"\r\n        [maxWidth]=\"312\"\r\n        #overflowPopover\r\n    >\r\n        <fd-popover-control\r\n            fd-avatar-group-popover-control\r\n            [attr.aria-label]=\"\r\n                'Has popup type dialog Conjoined avatars, ' +\r\n                ' avatars displayed, ' +\r\n                1 +\r\n                ' avatars hidden, activate for complete list'\r\n            \"\r\n            (click)=\"handleControlClick($event, overflowPopover)\"\r\n            (keydown)=\"handleControlKeydown($event, overflowPopover)\"\r\n        >\r\n            @for (person of existedItems; track person) {\r\n            <div fd-avatar-group-item>\r\n                @if (!person[viewSetting.AssigneeImage]) {\r\n                <fd-avatar\r\n                    [label]=\"person[viewSetting.AssigneeName]\"\r\n                    [title]=\"person[viewSetting.AssigneeName]\"\r\n                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\r\n                    role=\"img\"\r\n                    [circle]=\"true\"\r\n                    [border]=\"true\"\r\n                    [size]=\"size\"\r\n                ></fd-avatar>\r\n                } @if (person[viewSetting.AssigneeImage]; as avatar) {\r\n                <fd-avatar\r\n                    role=\"img\"\r\n                    [title]=\"person[viewSetting.AssigneeName]\"\r\n                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\r\n                    [circle]=\"true\"\r\n                    [border]=\"true\"\r\n                    [size]=\"size\"\r\n                    [image]=\"(avatar.FileId | picFieldSrc: 'ID':person.Id) || ''\"\r\n                >\r\n                </fd-avatar>\r\n                }\r\n            </div>\r\n            } \r\n            <button fd-button fd-avatar-group-overflow-button tabindex=\"-1\" [compact]=\"false\" [size]=\"size\">\r\n                <bdi fd-avatar-group-overflow-button-text> 1 </bdi>\r\n            </button>\r\n            \r\n        </fd-popover-control>\r\n        <fd-popover-body #overflowPopoverBody aria-labelledby=\"avatar-group-1-popover-header\" role=\"tooltip\">\r\n            <div class=\"fd-popover__wrapper\">\r\n                <div fd-popover-body-header>\r\n                    <div fd-bar barDesign=\"header\">\r\n                        <div fd-bar-left>\r\n                            @if (isDetailStage) {\r\n                            <fd-button-bar\r\n                                (click)=\"openOverflowMain()\"\r\n                                glyph=\"navigation-left-arrow\"\r\n                                fdType=\"transparent\"\r\n                                aria-label=\"Back\"\r\n                                title=\"Back\"\r\n                            ></fd-button-bar>\r\n                            }\r\n                            <fd-bar-element id=\"avatar-group-1-popover-header\">\r\n                                {{ isDetailStage ? 'Business Card' : 'Team Members (' + existedItems?.length + ')' }}\r\n                            </fd-bar-element>\r\n                            @if (isDetailStage) {\r\n                            <fd-bar-element>&nbsp;</fd-bar-element>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div\r\n                    fd-avatar-group-overflow-body\r\n                    [noPadding]=\"isDetailStage\"\r\n                    [noHorizontalScroll]=\"isDetailStage\"\r\n                    [noVerticalScroll]=\"false\"\r\n                >\r\n                    @if (overflowPopoverStage === 'main') { @for (person of existedItems; track person; let idx =\r\n                    $index) {\r\n                    <div fd-avatar-group-overflow-item>\r\n                        <fd-popover [triggers]=\"['click']\">\r\n                            <fd-popover-control>\r\n                                @if (!person[viewSetting.AssigneeImage]) {\r\n                                <fd-avatar\r\n                                    fd-avatar-group-focusable-avatar\r\n                                    [circle]=\"true\"\r\n                                    size=\"s\"\r\n                                    [label]=\"person[viewSetting.AssigneeName]\"\r\n                                    [title]=\"person[viewSetting.AssigneeName]\"\r\n                                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\r\n                                    role=\"img\"\r\n                                ></fd-avatar>\r\n                                } @if (person[viewSetting.AssigneeImage]; as avatar) {\r\n                                <fd-avatar\r\n                                    fd-avatar-group-focusable-avatar\r\n                                    role=\"img\"\r\n                                    [title]=\"person[viewSetting.AssigneeName]\"\r\n                                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\r\n                                    [circle]=\"true\"\r\n                                    size=\"s\"\r\n                                    [image]=\"(avatar.FileId | picFieldSrc: 'ID':person.Id) || ''\"\r\n                                ></fd-avatar>\r\n                                }\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <div class=\"avatar-actions\">\r\n                                    <button\r\n                                        fd-button\r\n                                        (click)=\"deleteAvatar(idx)\"\r\n                                        [label]=\"'Delete' | bbbTranslate\"\r\n                                        glyph=\"decline\"\r\n                                    ></button>\r\n                                    <button fd-button [label]=\"'Show' | bbbTranslate\" glyph=\"detail-view\"></button>\r\n                                </div>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                    </div>\r\n                    } }\r\n                </div>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</fd-avatar-group>\r\n\r\n@if (addItem) {\r\n<fd-popover\r\n    #peoplePopover\r\n    [triggers]=\"[]\"\r\n    [focusTrapped]=\"false\"\r\n    [closeOnOutsideClick]=\"true\"\r\n    [noArrow]=\"false\"\r\n    placement=\"bottom\"\r\n    [focusAutoCapture]=\"true\"\r\n>\r\n    <fd-popover-control>\r\n        <div>\r\n            <button\r\n                fd-button\r\n                (click)=\"openPopover($event, peoplePopover)\"\r\n                fdType=\"transparent\"\r\n                glyph=\"sys-add\"\r\n            ></button>\r\n        </div>\r\n    </fd-popover-control>\r\n    <fd-popover-body>\r\n        <ul fd-list>\r\n            @for (item of availableItems; track item) {\r\n            <li fd-list-item (click)=\"newItem(item)\">\r\n                @if (visibleFields.length > 0) { @for (field of visibleFields; track field) {\r\n                {{ item[field] }}\r\n                } } @else {\r\n                {{ item }}\r\n                }\r\n            </li>\r\n            }\r\n        </ul>\r\n    </fd-popover-body>\r\n</fd-popover>\r\n}\r\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: "component", type: i1$1.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2$2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i2$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$2.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i4$2.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "component", type: i5.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: i5.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "pipe", type: i4$1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i4$1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaAvatarGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaAvatarGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-avatar-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-avatar-group #avatarGroupCom type=\"group\" [size]=\"size\">\r\n    <fd-popover\r\n        [noArrow]=\"false\"\r\n        [focusTrapped]=\"true\"\r\n        [focusAutoCapture]=\"true\"\r\n        [triggers]=\"[]\"\r\n        [closeOnOutsideClick]=\"true\"\r\n        [closeOnEscapeKey]=\"true\"\r\n        (isOpenChange)=\"isOpenChanged($event)\"\r\n        placement=\"bottom\"\r\n        [maxWidth]=\"312\"\r\n        #overflowPopover\r\n    >\r\n        <fd-popover-control\r\n            fd-avatar-group-popover-control\r\n            [attr.aria-label]=\"\r\n                'Has popup type dialog Conjoined avatars, ' +\r\n                ' avatars displayed, ' +\r\n                1 +\r\n                ' avatars hidden, activate for complete list'\r\n            \"\r\n            (click)=\"handleControlClick($event, overflowPopover)\"\r\n            (keydown)=\"handleControlKeydown($event, overflowPopover)\"\r\n        >\r\n            @for (person of existedItems; track person) {\r\n            <div fd-avatar-group-item>\r\n                @if (!person[viewSetting.AssigneeImage]) {\r\n                <fd-avatar\r\n                    [label]=\"person[viewSetting.AssigneeName]\"\r\n                    [title]=\"person[viewSetting.AssigneeName]\"\r\n                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\r\n                    role=\"img\"\r\n                    [circle]=\"true\"\r\n                    [border]=\"true\"\r\n                    [size]=\"size\"\r\n                ></fd-avatar>\r\n                } @if (person[viewSetting.AssigneeImage]; as avatar) {\r\n                <fd-avatar\r\n                    role=\"img\"\r\n                    [title]=\"person[viewSetting.AssigneeName]\"\r\n                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\r\n                    [circle]=\"true\"\r\n                    [border]=\"true\"\r\n                    [size]=\"size\"\r\n                    [image]=\"(avatar.FileId | picFieldSrc: 'ID':person.Id) || ''\"\r\n                >\r\n                </fd-avatar>\r\n                }\r\n            </div>\r\n            } \r\n            <button fd-button fd-avatar-group-overflow-button tabindex=\"-1\" [compact]=\"false\" [size]=\"size\">\r\n                <bdi fd-avatar-group-overflow-button-text> 1 </bdi>\r\n            </button>\r\n            \r\n        </fd-popover-control>\r\n        <fd-popover-body #overflowPopoverBody aria-labelledby=\"avatar-group-1-popover-header\" role=\"tooltip\">\r\n            <div class=\"fd-popover__wrapper\">\r\n                <div fd-popover-body-header>\r\n                    <div fd-bar barDesign=\"header\">\r\n                        <div fd-bar-left>\r\n                            @if (isDetailStage) {\r\n                            <fd-button-bar\r\n                                (click)=\"openOverflowMain()\"\r\n                                glyph=\"navigation-left-arrow\"\r\n                                fdType=\"transparent\"\r\n                                aria-label=\"Back\"\r\n                                title=\"Back\"\r\n                            ></fd-button-bar>\r\n                            }\r\n                            <fd-bar-element id=\"avatar-group-1-popover-header\">\r\n                                {{ isDetailStage ? 'Business Card' : 'Team Members (' + existedItems?.length + ')' }}\r\n                            </fd-bar-element>\r\n                            @if (isDetailStage) {\r\n                            <fd-bar-element>&nbsp;</fd-bar-element>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div\r\n                    fd-avatar-group-overflow-body\r\n                    [noPadding]=\"isDetailStage\"\r\n                    [noHorizontalScroll]=\"isDetailStage\"\r\n                    [noVerticalScroll]=\"false\"\r\n                >\r\n                    @if (overflowPopoverStage === 'main') { @for (person of existedItems; track person; let idx =\r\n                    $index) {\r\n                    <div fd-avatar-group-overflow-item>\r\n                        <fd-popover [triggers]=\"['click']\">\r\n                            <fd-popover-control>\r\n                                @if (!person[viewSetting.AssigneeImage]) {\r\n                                <fd-avatar\r\n                                    fd-avatar-group-focusable-avatar\r\n                                    [circle]=\"true\"\r\n                                    size=\"s\"\r\n                                    [label]=\"person[viewSetting.AssigneeName]\"\r\n                                    [title]=\"person[viewSetting.AssigneeName]\"\r\n                                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\r\n                                    role=\"img\"\r\n                                ></fd-avatar>\r\n                                } @if (person[viewSetting.AssigneeImage]; as avatar) {\r\n                                <fd-avatar\r\n                                    fd-avatar-group-focusable-avatar\r\n                                    role=\"img\"\r\n                                    [title]=\"person[viewSetting.AssigneeName]\"\r\n                                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\r\n                                    [circle]=\"true\"\r\n                                    size=\"s\"\r\n                                    [image]=\"(avatar.FileId | picFieldSrc: 'ID':person.Id) || ''\"\r\n                                ></fd-avatar>\r\n                                }\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <div class=\"avatar-actions\">\r\n                                    <button\r\n                                        fd-button\r\n                                        (click)=\"deleteAvatar(idx)\"\r\n                                        [label]=\"'Delete' | bbbTranslate\"\r\n                                        glyph=\"decline\"\r\n                                    ></button>\r\n                                    <button fd-button [label]=\"'Show' | bbbTranslate\" glyph=\"detail-view\"></button>\r\n                                </div>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                    </div>\r\n                    } }\r\n                </div>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</fd-avatar-group>\r\n\r\n@if (addItem) {\r\n<fd-popover\r\n    #peoplePopover\r\n    [triggers]=\"[]\"\r\n    [focusTrapped]=\"false\"\r\n    [closeOnOutsideClick]=\"true\"\r\n    [noArrow]=\"false\"\r\n    placement=\"bottom\"\r\n    [focusAutoCapture]=\"true\"\r\n>\r\n    <fd-popover-control>\r\n        <div>\r\n            <button\r\n                fd-button\r\n                (click)=\"openPopover($event, peoplePopover)\"\r\n                fdType=\"transparent\"\r\n                glyph=\"sys-add\"\r\n            ></button>\r\n        </div>\r\n    </fd-popover-control>\r\n    <fd-popover-body>\r\n        <ul fd-list>\r\n            @for (item of availableItems; track item) {\r\n            <li fd-list-item (click)=\"newItem(item)\">\r\n                @if (visibleFields.length > 0) { @for (field of visibleFields; track field) {\r\n                {{ item[field] }}\r\n                } } @else {\r\n                {{ item }}\r\n                }\r\n            </li>\r\n            }\r\n        </ul>\r\n    </fd-popover-body>\r\n</fd-popover>\r\n}\r\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"] }]
+            args: [{ selector: 'bk-avatar-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-avatar-group #avatarGroupCom type=\"group\" [size]=\"size\">\r\n    <fd-popover\r\n        [noArrow]=\"false\"\r\n        [focusTrapped]=\"true\"\r\n        [focusAutoCapture]=\"true\"\r\n        [triggers]=\"[]\"\r\n        [closeOnOutsideClick]=\"true\"\r\n        [closeOnEscapeKey]=\"true\"\r\n        (isOpenChange)=\"isOpenChanged($event)\"\r\n        placement=\"bottom\"\r\n        [maxWidth]=\"312\"\r\n        #overflowPopover\r\n    >\r\n        <fd-popover-control\r\n            fd-avatar-group-popover-control\r\n            [attr.aria-label]=\"\r\n                'Has popup type dialog Conjoined avatars, ' +\r\n                ' avatars displayed, ' +\r\n                1 +\r\n                ' avatars hidden, activate for complete list'\r\n            \"\r\n            (click)=\"handleControlClick($event, overflowPopover)\"\r\n            (keydown)=\"handleControlKeydown($event, overflowPopover)\"\r\n        >\r\n            @for (person of existedItems; track person) {\r\n            <div fd-avatar-group-item>\r\n                @if (!person[viewSetting.AssigneeImage]) {\r\n                <fd-avatar\r\n                    [label]=\"person[viewSetting.AssigneeName]\"\r\n                    [title]=\"person[viewSetting.AssigneeName]\"\r\n                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\r\n                    role=\"img\"\r\n                    [circle]=\"true\"\r\n                    [border]=\"true\"\r\n                    [size]=\"size\"\r\n                ></fd-avatar>\r\n                } @if (person[viewSetting.AssigneeImage]; as avatar) {\r\n                <fd-avatar\r\n                    role=\"img\"\r\n                    [title]=\"person[viewSetting.AssigneeName]\"\r\n                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\r\n                    [circle]=\"true\"\r\n                    [border]=\"true\"\r\n                    [size]=\"size\"\r\n                    [image]=\"(avatar.FileId | picFieldSrc: 'ID':person.Id) || ''\"\r\n                >\r\n                </fd-avatar>\r\n                }\r\n            </div>\r\n            } \r\n            <button fd-button fd-avatar-group-overflow-button tabindex=\"-1\" [compact]=\"false\" [size]=\"size\">\r\n                <bdi fd-avatar-group-overflow-button-text> 1 </bdi>\r\n            </button>\r\n            \r\n        </fd-popover-control>\r\n        <fd-popover-body #overflowPopoverBody aria-labelledby=\"avatar-group-1-popover-header\" role=\"tooltip\">\r\n            <div class=\"fd-popover__wrapper\">\r\n                <div fd-popover-body-header>\r\n                    <div fd-bar barDesign=\"header\">\r\n                        <div fd-bar-left>\r\n                            @if (isDetailStage) {\r\n                            <fd-button-bar\r\n                                (click)=\"openOverflowMain()\"\r\n                                glyph=\"navigation-left-arrow\"\r\n                                fdType=\"transparent\"\r\n                                aria-label=\"Back\"\r\n                                title=\"Back\"\r\n                            ></fd-button-bar>\r\n                            }\r\n                            <fd-bar-element id=\"avatar-group-1-popover-header\">\r\n                                {{ isDetailStage ? 'Business Card' : 'Team Members (' + existedItems?.length + ')' }}\r\n                            </fd-bar-element>\r\n                            @if (isDetailStage) {\r\n                            <fd-bar-element>&nbsp;</fd-bar-element>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div\r\n                    fd-avatar-group-overflow-body\r\n                    [noPadding]=\"isDetailStage\"\r\n                    [noHorizontalScroll]=\"isDetailStage\"\r\n                    [noVerticalScroll]=\"false\"\r\n                >\r\n                    @if (overflowPopoverStage === 'main') { @for (person of existedItems; track person; let idx =\r\n                    $index) {\r\n                    <div fd-avatar-group-overflow-item>\r\n                        <fd-popover [triggers]=\"['click']\">\r\n                            <fd-popover-control>\r\n                                @if (!person[viewSetting.AssigneeImage]) {\r\n                                <fd-avatar\r\n                                    fd-avatar-group-focusable-avatar\r\n                                    [circle]=\"true\"\r\n                                    size=\"s\"\r\n                                    [label]=\"person[viewSetting.AssigneeName]\"\r\n                                    [title]=\"person[viewSetting.AssigneeName]\"\r\n                                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\r\n                                    role=\"img\"\r\n                                ></fd-avatar>\r\n                                } @if (person[viewSetting.AssigneeImage]; as avatar) {\r\n                                <fd-avatar\r\n                                    fd-avatar-group-focusable-avatar\r\n                                    role=\"img\"\r\n                                    [title]=\"person[viewSetting.AssigneeName]\"\r\n                                    [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\r\n                                    [circle]=\"true\"\r\n                                    size=\"s\"\r\n                                    [image]=\"(avatar.FileId | picFieldSrc: 'ID':person.Id) || ''\"\r\n                                ></fd-avatar>\r\n                                }\r\n                            </fd-popover-control>\r\n                            <fd-popover-body>\r\n                                <div class=\"avatar-actions\">\r\n                                    <button\r\n                                        fd-button\r\n                                        (click)=\"deleteAvatar(idx)\"\r\n                                        [label]=\"'Delete' | bbbTranslate\"\r\n                                        glyph=\"decline\"\r\n                                    ></button>\r\n                                    <button fd-button [label]=\"'Show' | bbbTranslate\" glyph=\"detail-view\"></button>\r\n                                </div>\r\n                            </fd-popover-body>\r\n                        </fd-popover>\r\n                    </div>\r\n                    } }\r\n                </div>\r\n            </div>\r\n        </fd-popover-body>\r\n    </fd-popover>\r\n</fd-avatar-group>\r\n\r\n@if (addItem) {\r\n<fd-popover\r\n    #peoplePopover\r\n    [triggers]=\"[]\"\r\n    [focusTrapped]=\"false\"\r\n    [closeOnOutsideClick]=\"true\"\r\n    [noArrow]=\"false\"\r\n    placement=\"bottom\"\r\n    [focusAutoCapture]=\"true\"\r\n>\r\n    <fd-popover-control>\r\n        <div>\r\n            <button\r\n                fd-button\r\n                (click)=\"openPopover($event, peoplePopover)\"\r\n                fdType=\"transparent\"\r\n                glyph=\"sys-add\"\r\n            ></button>\r\n        </div>\r\n    </fd-popover-control>\r\n    <fd-popover-body>\r\n        <ul fd-list>\r\n            @for (item of availableItems; track item) {\r\n            <li fd-list-item (click)=\"newItem(item)\">\r\n                @if (visibleFields.length > 0) { @for (field of visibleFields; track field) {\r\n                {{ item[field] }}\r\n                } } @else {\r\n                {{ item }}\r\n                }\r\n            </li>\r\n            }\r\n        </ul>\r\n    </fd-popover-body>\r\n</fd-popover>\r\n}\r\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']
@@ -198,11 +198,13 @@ class KanbanViewComponent extends ReportViewBaseComponent {
             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();
-        });
+        const assigneesReport = this.viewSetting.AssigneesReport?.$Caption;
+        if (assigneesReport) {
+            this._portalService.ReportExecute(assigneesReport).subscribe((report) => {
+                this.allAvailableAssignees = report.MoDataList;
+                this._changeDetect();
+            });
+        }
         this.viewSetting = {
             ...this.viewSetting,
             ...this._findColumn(this.allColumns, [
@@ -419,12 +421,12 @@ class KanbanViewComponent extends ReportViewBaseComponent {
         });
         return columns;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KanbanViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: KanbanViewComponent, selector: "bk-kanban-view", inputs: { kanbanColumns: "kanbanColumns", groupbyProperty: "groupbyProperty" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fd-layout-panel>\n    <fd-layout-panel-body [bleed]=\"true\">\n        @if (isCheckList) {\n        <table fd-table>\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        }\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<fd-layout-grid\n    class=\"columns\"\n    fillEmptySpace\n    [setMinHeight]=\"true\"\n    [disable]=\"true\"\n    cdkDropList\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListData]=\"kanbanColumns\"\n    [id]=\"'$Root'\"\n    (cdkDropListDropped)=\"onDrop($event, true)\"\n>\n    @for (column of kanbanColumns; track column; let columnIndex = $index) {\n    <div\n        [fdLayoutGridCol]=\"12\"\n        [colMd]=\"4\"\n        [colLg]=\"3\"\n        [colXl]=\"2\"\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    }\n</fd-layout-grid>\n\n<!--noData-->\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            <fd-card-main-header [style.background]=\"column.Color\" [class.hasColumnColor]=\"column.Color\">\n                <h2 fd-card-title>{{ column.$Caption }}</h2>\n            </fd-card-main-header>\n        </fd-card-header>\n        <fd-card-content\n            cdkDropList\n            (cdkDropListDropped)=\"onDrop($event)\"\n            [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"moDataList\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    columnMoList;\n                    context: { $implicit: groupedMoList()[column.$Caption], column: column }\n                \"\n            >\n            </ng-container>\n        </fd-card-content>\n        <!-- <fd-card-footer class=\"column-footer\">\n            @if (newCard[groupbyProperty] === column.$Caption) {\n            <div class=\"new-card\">\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            } @else {\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            }\n        </fd-card-footer> -->\n    </fd-card>\n</ng-template>\n\n<ng-template #columnMoList let-moList let-column=\"column\">\n    @if(moList && moList.length>0){ @for (mo of moList; track mo; let index = $index) {\n    <bk-kanban-card\n        [mo]=\"mo\"\n        [allColumns]=\"columns\"\n        [viewSetting]=\"viewSetting\"\n        [formSetting]=\"formSetting\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [allAvailableAssignees]=\"allAvailableAssignees\"\n        [index]=\"index\"\n        [attr.id]=\"mo.Id\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [isChecked]=\"mo.$IsChecked\"\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    } }@else{\n\n    <h3 fd-title>{{ 'NoData' | bbbTranslate }}</h3>\n    }\n</ng-template>\n", styles: ["fd-card-main-header.hasColumnColor{display:block}fd-card-main-header.hasColumnColor ::ng-deep .fd-card__header-main{background-color:transparent}figure{padding:0!important}figure ::ng-deep svg{margin:0}::-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%}.column.cdk-drag-placeholder{opacity:0}.column>fd-card{overflow-y:hidden;height:100%}.column>fd-card fd-card-content{flex:1;overflow-y:auto;padding:1rem .5rem;margin:0;display:flex;flex-direction:column;row-gap:1rem}.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$1.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "directive", type: i4$1.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: i2$1.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i2$1.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i2$1.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i2$1.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i2$1.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "component", type: i4$3.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i5$1.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i5$1.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "component", type: i6$1.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage", "id", "transparent"] }, { kind: "component", type: i6$1.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i7.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i8.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "noOuterBorder", "topBorder", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i8.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY", "nonInteractive"] }, { kind: "directive", type: i8.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i8.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i10.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: i10.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: i4$1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KanbanViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KanbanViewComponent, selector: "bk-kanban-view", inputs: { kanbanColumns: "kanbanColumns", groupbyProperty: "groupbyProperty" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fd-layout-panel>\n    <fd-layout-panel-body [bleed]=\"true\">\n        @if (isCheckList) {\n        <table fd-table>\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        }\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<fd-layout-grid\n    class=\"columns\"\n    fillEmptySpace\n    [setMinHeight]=\"true\"\n    [disable]=\"true\"\n    cdkDropList\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListData]=\"kanbanColumns\"\n    [id]=\"'$Root'\"\n    (cdkDropListDropped)=\"onDrop($event, true)\"\n>\n    @for (column of kanbanColumns; track column; let columnIndex = $index) {\n    <div\n        [fdLayoutGridCol]=\"12\"\n        [colMd]=\"4\"\n        [colLg]=\"3\"\n        [colXl]=\"2\"\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    }\n</fd-layout-grid>\n\n<!--noData-->\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            <fd-card-main-header [style.background]=\"column.Color\" [class.hasColumnColor]=\"column.Color\">\n                <h2 fd-card-title>{{ column.$Caption }}</h2>\n            </fd-card-main-header>\n        </fd-card-header>\n        <fd-card-content\n            cdkDropList\n            (cdkDropListDropped)=\"onDrop($event)\"\n            [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"moDataList\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    columnMoList;\n                    context: { $implicit: groupedMoList()[column.$Caption], column: column }\n                \"\n            >\n            </ng-container>\n        </fd-card-content>\n        <!-- <fd-card-footer class=\"column-footer\">\n            @if (newCard[groupbyProperty] === column.$Caption) {\n            <div class=\"new-card\">\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            } @else {\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            }\n        </fd-card-footer> -->\n    </fd-card>\n</ng-template>\n\n<ng-template #columnMoList let-moList let-column=\"column\">\n    @if(moList && moList.length>0){ @for (mo of moList; track mo; let index = $index) {\n    <bk-kanban-card\n        [mo]=\"mo\"\n        [allColumns]=\"columns\"\n        [viewSetting]=\"viewSetting\"\n        [formSetting]=\"formSetting\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [allAvailableAssignees]=\"allAvailableAssignees\"\n        [index]=\"index\"\n        [attr.id]=\"mo.Id\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [isChecked]=\"mo.$IsChecked\"\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    } }@else{\n\n    <h3 fd-title>{{ 'NoData' | bbbTranslate }}</h3>\n    }\n</ng-template>\n", styles: ["fd-card-main-header.hasColumnColor{display:block}fd-card-main-header.hasColumnColor ::ng-deep .fd-card__header-main{background-color:transparent}figure{padding:0!important}figure ::ng-deep svg{margin:0}::-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%}.column.cdk-drag-placeholder{opacity:0}.column>fd-card{overflow-y:hidden;height:100%}.column>fd-card fd-card-content{flex:1;overflow-y:auto;padding:1rem .5rem;margin:0;display:flex;flex-direction:column;row-gap:1rem}.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$1.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "directive", type: i4$1.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: i2$1.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i2$1.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i2$1.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "component", type: i2$1.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i2$1.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "component", type: i4$3.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i5$1.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i5$1.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "component", type: i6$1.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage", "id", "transparent"] }, { kind: "component", type: i6$1.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i7.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i8.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "noOuterBorder", "topBorder", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i8.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY", "nonInteractive"] }, { kind: "directive", type: i8.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i8.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "nonInteractive", "key"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], 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: i4$1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KanbanViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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        @if (isCheckList) {\n        <table fd-table>\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        }\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<fd-layout-grid\n    class=\"columns\"\n    fillEmptySpace\n    [setMinHeight]=\"true\"\n    [disable]=\"true\"\n    cdkDropList\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListData]=\"kanbanColumns\"\n    [id]=\"'$Root'\"\n    (cdkDropListDropped)=\"onDrop($event, true)\"\n>\n    @for (column of kanbanColumns; track column; let columnIndex = $index) {\n    <div\n        [fdLayoutGridCol]=\"12\"\n        [colMd]=\"4\"\n        [colLg]=\"3\"\n        [colXl]=\"2\"\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    }\n</fd-layout-grid>\n\n<!--noData-->\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            <fd-card-main-header [style.background]=\"column.Color\" [class.hasColumnColor]=\"column.Color\">\n                <h2 fd-card-title>{{ column.$Caption }}</h2>\n            </fd-card-main-header>\n        </fd-card-header>\n        <fd-card-content\n            cdkDropList\n            (cdkDropListDropped)=\"onDrop($event)\"\n            [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"moDataList\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    columnMoList;\n                    context: { $implicit: groupedMoList()[column.$Caption], column: column }\n                \"\n            >\n            </ng-container>\n        </fd-card-content>\n        <!-- <fd-card-footer class=\"column-footer\">\n            @if (newCard[groupbyProperty] === column.$Caption) {\n            <div class=\"new-card\">\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            } @else {\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            }\n        </fd-card-footer> -->\n    </fd-card>\n</ng-template>\n\n<ng-template #columnMoList let-moList let-column=\"column\">\n    @if(moList && moList.length>0){ @for (mo of moList; track mo; let index = $index) {\n    <bk-kanban-card\n        [mo]=\"mo\"\n        [allColumns]=\"columns\"\n        [viewSetting]=\"viewSetting\"\n        [formSetting]=\"formSetting\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [allAvailableAssignees]=\"allAvailableAssignees\"\n        [index]=\"index\"\n        [attr.id]=\"mo.Id\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [isChecked]=\"mo.$IsChecked\"\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    } }@else{\n\n    <h3 fd-title>{{ 'NoData' | bbbTranslate }}</h3>\n    }\n</ng-template>\n", styles: ["fd-card-main-header.hasColumnColor{display:block}fd-card-main-header.hasColumnColor ::ng-deep .fd-card__header-main{background-color:transparent}figure{padding:0!important}figure ::ng-deep svg{margin:0}::-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%}.column.cdk-drag-placeholder{opacity:0}.column>fd-card{overflow-y:hidden;height:100%}.column>fd-card fd-card-content{flex:1;overflow-y:auto;padding:1rem .5rem;margin:0;display:flex;flex-direction:column;row-gap:1rem}.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"] }]
+            args: [{ selector: 'bk-kanban-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-layout-panel>\n    <fd-layout-panel-body [bleed]=\"true\">\n        @if (isCheckList) {\n        <table fd-table>\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        }\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<fd-layout-grid\n    class=\"columns\"\n    fillEmptySpace\n    [setMinHeight]=\"true\"\n    [disable]=\"true\"\n    cdkDropList\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListData]=\"kanbanColumns\"\n    [id]=\"'$Root'\"\n    (cdkDropListDropped)=\"onDrop($event, true)\"\n>\n    @for (column of kanbanColumns; track column; let columnIndex = $index) {\n    <div\n        [fdLayoutGridCol]=\"12\"\n        [colMd]=\"4\"\n        [colLg]=\"3\"\n        [colXl]=\"2\"\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    }\n</fd-layout-grid>\n\n<!--noData-->\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            <fd-card-main-header [style.background]=\"column.Color\" [class.hasColumnColor]=\"column.Color\">\n                <h2 fd-card-title>{{ column.$Caption }}</h2>\n            </fd-card-main-header>\n        </fd-card-header>\n        <fd-card-content\n            cdkDropList\n            (cdkDropListDropped)=\"onDrop($event)\"\n            [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"moDataList\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    columnMoList;\n                    context: { $implicit: groupedMoList()[column.$Caption], column: column }\n                \"\n            >\n            </ng-container>\n        </fd-card-content>\n        <!-- <fd-card-footer class=\"column-footer\">\n            @if (newCard[groupbyProperty] === column.$Caption) {\n            <div class=\"new-card\">\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            } @else {\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            }\n        </fd-card-footer> -->\n    </fd-card>\n</ng-template>\n\n<ng-template #columnMoList let-moList let-column=\"column\">\n    @if(moList && moList.length>0){ @for (mo of moList; track mo; let index = $index) {\n    <bk-kanban-card\n        [mo]=\"mo\"\n        [allColumns]=\"columns\"\n        [viewSetting]=\"viewSetting\"\n        [formSetting]=\"formSetting\"\n        [styleIndex]=\"mo.$StyleIndex\"\n        [conditionalFormats]=\"conditionalFormats\"\n        [allAvailableAssignees]=\"allAvailableAssignees\"\n        [index]=\"index\"\n        [attr.id]=\"mo.Id\"\n        [inlineEditMode]=\"inlineEditMode\"\n        [isChecked]=\"mo.$IsChecked\"\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    } }@else{\n\n    <h3 fd-title>{{ 'NoData' | bbbTranslate }}</h3>\n    }\n</ng-template>\n", styles: ["fd-card-main-header.hasColumnColor{display:block}fd-card-main-header.hasColumnColor ::ng-deep .fd-card__header-main{background-color:transparent}figure{padding:0!important}figure ::ng-deep svg{margin:0}::-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%}.column.cdk-drag-placeholder{opacity:0}.column>fd-card{overflow-y:hidden;height:100%}.column>fd-card fd-card-content{flex:1;overflow-y:auto;padding:1rem .5rem;margin:0;display:flex;flex-direction:column;row-gap:1rem}.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 }]
@@ -448,8 +450,8 @@ class BarsaKanbanModule extends BaseModule {
         this.componentFactoryResolver = componentFactoryResolver;
         this.dynamicComponents = [...components];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaKanbanModule, deps: [{ token: i4$1.DynamicComponentService }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.5", ngImport: i0, type: BarsaKanbanModule, declarations: [KanbanViewComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaKanbanModule, deps: [{ token: i4$1.DynamicComponentService }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: BarsaKanbanModule, declarations: [KanbanViewComponent,
             BarsaAvatarGroupComponent,
             KanbanCardComponent,
             KanbanTagsComponent,
@@ -460,27 +462,26 @@ class BarsaKanbanModule extends BaseModule {
             BarsaEchartsModule,
             BarsaSapUiModule,
             FormsModule,
-            DragDropModule,
-            HttpClientModule], exports: [KanbanViewComponent,
+            DragDropModule], exports: [KanbanViewComponent,
             BarsaAvatarGroupComponent,
             KanbanCardComponent,
             KanbanTagsComponent,
             KanbanBaseComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaKanbanModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaKanbanModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule,
             BarsaNovinRayCoreModule,
             FundamentalNgxCoreModule,
             PlatformMenuModule,
             BarsaEchartsModule,
             BarsaSapUiModule,
             FormsModule,
-            DragDropModule,
-            HttpClientModule] }); }
+            DragDropModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaKanbanModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaKanbanModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...components],
                     schemas: [NO_ERRORS_SCHEMA],
+                    exports: [...components],
                     imports: [
                         CommonModule,
                         BarsaNovinRayCoreModule,
@@ -489,10 +490,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                         BarsaEchartsModule,
                         BarsaSapUiModule,
                         FormsModule,
-                        DragDropModule,
-                        HttpClientModule
+                        DragDropModule
                     ],
-                    exports: [...components]
+                    providers: [provideHttpClient(withInterceptorsFromDi())]
                 }]
         }], ctorParameters: () => [{ type: i4$1.DynamicComponentService }, { type: i0.ComponentFactoryResolver }] });