barsa-kanban 0.0.2 → 1.0.248
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/Models/drop-info.mjs +1 -1
- package/esm2020/lib/Models/kanban-view-setting.interface.mjs +1 -1
- package/esm2020/lib/avatar-group/barsa-avatar-group.component.mjs +3 -3
- package/esm2020/lib/barsa-kanban.module.mjs +1 -1
- package/esm2020/lib/kanban-base/kanban-base.component.mjs +1 -1
- package/esm2020/lib/kanban-card/kanban-card.component.mjs +3 -3
- package/esm2020/lib/kanban-tags/kanban-tags.component.mjs +3 -3
- package/esm2020/lib/kanban-view/kanban-view.component.mjs +3 -3
- package/esm2020/public-api.mjs +1 -1
- package/fesm2015/barsa-kanban.mjs +8 -8
- package/fesm2015/barsa-kanban.mjs.map +1 -1
- package/fesm2020/barsa-kanban.mjs +8 -8
- package/fesm2020/barsa-kanban.mjs.map +1 -1
- package/package.json +4 -4
|
@@ -75,10 +75,10 @@ class KanbanTagsComponent extends KanbanBaseComponent {
|
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
KanbanTagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: KanbanTagsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
78
|
-
KanbanTagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: KanbanTagsComponent, selector: "bk-kanban-tags", inputs: { tags: "tags", viewSetting: "viewSetting" }, usesInheritance: true, ngImport: i0, template: "<div class=\"row tags-container\">\n <ng-container *ngFor=\"let tag of tags; let i = index\">\n <fd-popover placement=\"bottom\" [closeOnOutsideClick]=\"true\">\n <fd-popover-control>\n <div class=\"tag\">\n <fd-info-label\n [label]=\"tag[viewSetting.TagName]\"\n [color]=\"tag[viewSetting.TagColor]\"\n [title]=\"tag[viewSetting.TagName]\"\n ></fd-info-label>\n </div>\n </fd-popover-control>\n <fd-popover-body>\n <div class=\"tag-delete\">\n <button fd-button (click)=\"deleteTag(i)\" [label]=\"'Delete' | bbbTranslate\" glyph=\"decline\"></button>\n </div>\n </fd-popover-body>\n </fd-popover>\n </ng-container>\n\n <fd-popover\n #tagPopover\n [triggers]=\"[]\"\n [focusTrapped]=\"false\"\n [closeOnOutsideClick]=\"true\"\n [noArrow]=\"false\"\n placement=\"bottom\"\n [focusAutoCapture]=\"true\"\n >\n <fd-popover-control>\n <div>\n <button\n fd-button\n (click)=\"openPopover($event, tagPopover)\"\n fdType=\"transparent\"\n glyph=\"sys-add\"\n ></button>\n </div>\n </fd-popover-control>\n <fd-popover-body>\n <div class=\"new-tag\" (keydown.enter)=\"addTag()\">\n <div fd-form-item class=\"row\">\n <input fd-form-control type=\"text\" [(ngModel)]=\"currentTagLabel\" id=\"input-1\" placeholder=\" \u0646\u0627\u0645\" />\n </div>\n <div class=\"colors-colection row\">\n <div\n *ngFor=\"let color of colorList\"\n (click)=\"colorClick(color)\"\n [ngClass]=\"'fd-info-label--accent-color-' + color\"\n [class.selected-color]=\"selectedColor === color\"\n class=\"color\"\n ></div>\n </div>\n <div class=\"ok-cancel-btns row\">\n <button fd-button [label]=\"'Ok' | bbbTranslate\" [fdType]=\"'emphasized'\" (click)=\"addTag()\"></button>\n <button\n fd-button\n [label]=\"'Cancel' | bbbTranslate\"\n [fdType]=\"'transparent'\"\n (click)=\"closePopover(tagPopover)\"\n ></button>\n </div>\n </div>\n </fd-popover-body>\n </fd-popover>\n</div>\n", styles: [":host ::ng-deep .fd-info-label__text{height:auto!important}.row,.new-tag .colors-colection{display:flex;align-items:center}.tags-container{column-gap:10px;flex-wrap:wrap}.new-tag{padding:15px;max-width:200px;row-gap:15px;display:flex;flex-direction:column;justify-content:center;align-items:center}.new-tag .row,.new-tag .colors-colection{column-gap:15px;width:100%}.new-tag .colors-colection{flex-wrap:wrap;row-gap:10px}.new-tag .colors-colection .color{width:40px;height:24px;border-radius:10px;border:1px solid var(--sapBackgroundColor, #f7f7f7)}.new-tag .colors-colection .selected-color{border-color:var(--sapList_SelectionBorderColor, #0854a0)}.ok-cancel-btns{justify-content:flex-end}.tag-delete{display:flex;align-items:center;justify-content:center;width:100px;height:80px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class"] }, { kind: "directive", type: i6.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i6.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i4.InfoLabelComponent, selector: "fd-info-label", inputs: ["class", "type", "glyph", "font", "color", "label", "title", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i7.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i6$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
78
|
+
KanbanTagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: KanbanTagsComponent, selector: "bk-kanban-tags", inputs: { tags: "tags", viewSetting: "viewSetting" }, usesInheritance: true, ngImport: i0, template: "<div class=\"row tags-container\">\r\n <ng-container *ngFor=\"let tag of tags; 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 </ng-container>\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 <div\r\n *ngFor=\"let color of colorList\"\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 </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: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class"] }, { kind: "directive", type: i6.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i6.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i4.InfoLabelComponent, selector: "fd-info-label", inputs: ["class", "type", "glyph", "font", "color", "label", "title", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: i7.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i6$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
79
79
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: KanbanTagsComponent, decorators: [{
|
|
80
80
|
type: Component,
|
|
81
|
-
args: [{ selector: 'bk-kanban-tags', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row tags-container\">\n <ng-container *ngFor=\"let tag of tags; let i = index\">\n <fd-popover placement=\"bottom\" [closeOnOutsideClick]=\"true\">\n <fd-popover-control>\n <div class=\"tag\">\n <fd-info-label\n [label]=\"tag[viewSetting.TagName]\"\n [color]=\"tag[viewSetting.TagColor]\"\n [title]=\"tag[viewSetting.TagName]\"\n ></fd-info-label>\n </div>\n </fd-popover-control>\n <fd-popover-body>\n <div class=\"tag-delete\">\n <button fd-button (click)=\"deleteTag(i)\" [label]=\"'Delete' | bbbTranslate\" glyph=\"decline\"></button>\n </div>\n </fd-popover-body>\n </fd-popover>\n </ng-container>\n\n <fd-popover\n #tagPopover\n [triggers]=\"[]\"\n [focusTrapped]=\"false\"\n [closeOnOutsideClick]=\"true\"\n [noArrow]=\"false\"\n placement=\"bottom\"\n [focusAutoCapture]=\"true\"\n >\n <fd-popover-control>\n <div>\n <button\n fd-button\n (click)=\"openPopover($event, tagPopover)\"\n fdType=\"transparent\"\n glyph=\"sys-add\"\n ></button>\n </div>\n </fd-popover-control>\n <fd-popover-body>\n <div class=\"new-tag\" (keydown.enter)=\"addTag()\">\n <div fd-form-item class=\"row\">\n <input fd-form-control type=\"text\" [(ngModel)]=\"currentTagLabel\" id=\"input-1\" placeholder=\" \u0646\u0627\u0645\" />\n </div>\n <div class=\"colors-colection row\">\n <div\n *ngFor=\"let color of colorList\"\n (click)=\"colorClick(color)\"\n [ngClass]=\"'fd-info-label--accent-color-' + color\"\n [class.selected-color]=\"selectedColor === color\"\n class=\"color\"\n ></div>\n </div>\n <div class=\"ok-cancel-btns row\">\n <button fd-button [label]=\"'Ok' | bbbTranslate\" [fdType]=\"'emphasized'\" (click)=\"addTag()\"></button>\n <button\n fd-button\n [label]=\"'Cancel' | bbbTranslate\"\n [fdType]=\"'transparent'\"\n (click)=\"closePopover(tagPopover)\"\n ></button>\n </div>\n </div>\n </fd-popover-body>\n </fd-popover>\n</div>\n", styles: [":host ::ng-deep .fd-info-label__text{height:auto!important}.row,.new-tag .colors-colection{display:flex;align-items:center}.tags-container{column-gap:10px;flex-wrap:wrap}.new-tag{padding:15px;max-width:200px;row-gap:15px;display:flex;flex-direction:column;justify-content:center;align-items:center}.new-tag .row,.new-tag .colors-colection{column-gap:15px;width:100%}.new-tag .colors-colection{flex-wrap:wrap;row-gap:10px}.new-tag .colors-colection .color{width:40px;height:24px;border-radius:10px;border:1px solid var(--sapBackgroundColor, #f7f7f7)}.new-tag .colors-colection .selected-color{border-color:var(--sapList_SelectionBorderColor, #0854a0)}.ok-cancel-btns{justify-content:flex-end}.tag-delete{display:flex;align-items:center;justify-content:center;width:100px;height:80px}\n"] }]
|
|
81
|
+
args: [{ selector: 'bk-kanban-tags', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row tags-container\">\r\n <ng-container *ngFor=\"let tag of tags; 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 </ng-container>\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 <div\r\n *ngFor=\"let color of colorList\"\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 </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"] }]
|
|
82
82
|
}], propDecorators: { tags: [{
|
|
83
83
|
type: Input
|
|
84
84
|
}], viewSetting: [{
|
|
@@ -97,10 +97,10 @@ class KanbanCardComponent extends BaseViewItemPropsComponent {
|
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
99
|
KanbanCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: KanbanCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
100
|
-
KanbanCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: KanbanCardComponent, selector: "bk-kanban-card", inputs: { index: "index", mo: "mo", viewSetting: "viewSetting", allAvailableAssignees: "allAvailableAssignees" }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<fd-card cardType=\"quickView\" class=\"docs-flex-item-margin\" style=\"background: transparent\" ellipsify>\n <div class=\"row task-cover\">\n <img\n [src]=\"\n viewSetting.Cover\n ? (mo[viewSetting.Cover]?.FileId\n | picFieldSrc: 'ID':viewSetting[viewSetting.Cover + 'Column']?.FieldDefId)\n : ''\n \"\n />\n </div>\n <fdp-action-button-group class=\"card-menu\">\n <fdp-button\n contentDensity=\"compact\"\n glyph=\"overflow\"\n buttonType=\"transparent\"\n [fdpMenuTriggerFor]=\"basicMenu\"\n ></fdp-button>\n <fdp-menu #basicMenu id=\"basic-menu\" [xPosition]=\"'before'\">\n <fdp-menu-item>{{ 'Edit' | bbbTranslate }}</fdp-menu-item>\n <fdp-menu-item>{{ 'Delete' | bbbTranslate }}</fdp-menu-item>\n </fdp-menu>\n </fdp-action-button-group>\n <fd-card-content>\n <bsu-ly-layout-container-of-root\n *ngIf=\"layout$ | async as layout94\"\n [config]=\"layout94\"\n [isPanel]=\"false\"\n [isRoot]=\"true\"\n ></bsu-ly-layout-container-of-root>\n </fd-card-content>\n <fd-card-footer>\n <div class=\"kanban-footer row\">\n <div class=\"comment row\">\n <fd-icon glyph=\"post\"></fd-icon>\n {{ mo[viewSetting.CommentsCount] }}\n </div>\n <div class=\"attachment row\">\n <fd-icon glyph=\"attachment\"></fd-icon>\n {{ mo[viewSetting.AttachesCount] }}\n </div>\n\n <div class=\"task row\">\n {{ mo[viewSetting.ProgressLabel] }}\n <div class=\"circle-icon\">\n <fd-icon glyph=\"accept\"></fd-icon>\n </div>\n </div>\n </div>\n </fd-card-footer>\n</fd-card>\n", styles: [":host{position:relative}:host.selected{background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}:host.selected fd-card{border-color:var(--sapList_SelectionBorderColor, #0854a0)}:host.selected fd-card,:host.selected fd-card-header,:host.selected .fd-bar--footer,:host.selected fd-quick-view-subheader .fd-bar{background-color:inherit!important}.row{display:flex;align-items:center}.fd-card{background:var(--sapBackgroundColor, #f7f7f7)!important;box-shadow:none}.fd-card:hover .card-menu fdp-button{display:block}.fd-card .card-menu{position:absolute;right:1rem;top:1rem;background-color:#fff}.fd-card .card-menu fdp-button{display:none}.fd-card .card-menu [aria-controls=fdp-menu-basic-menu]{display:block}.fd-card .task-cover{width:100%;height:150px;justify-content:center}.fd-card .task-cover img{object-fit:cover;width:100%;height:100%}.fd-card fd-card-content{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;row-gap:20px;padding:1rem}.fd-card fd-card-content .progress-indicator{flex:1}.fd-card fd-card-content .progress-indicator ::ng-deep .fd-progress-indicator__remaining{display:flex;align-items:center}.fd-card ::ng-deep fd-info-label .fd-info-label__text{display:inline-flex!important}.kanban-footer{padding:1rem;column-gap:10px}.kanban-footer .comment,.kanban-footer .attachment,.kanban-footer .task{column-gap:2px}.kanban-footer .task{margin-right:auto}.kanban-footer .task .circle-icon{width:calc(var(--sapFontSize, .875rem) + 6px);height:calc(var(--sapFontSize, .875rem) + 6px);border-radius:calc(var(--sapFontSize, .875rem) + 6px);border:1px solid var(--sapButton_BorderColor, #0854a0);display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "component", type: i4$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i4$1.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i4$1.CardFooterComponent, selector: "fd-card-footer" }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i5$1.PlatformContentDensityDeprecationDirective, selector: " fdp-action-bar[contentDensity], fdp-button[contentDensity], fdp-object-list-item[contentDensity], fdp-standard-list-item[contentDensity], fdp-menu[contentDensity], fdp-menu-button[contentDensity], fdp-panel[contentDensity], fdp-search-field[contentDensity], fdp-split-menu-button[contentDensity], fdp-file-uploader[contentDensity], fdp-upload-collection[contentDensity], fdp-table[contentDensity], fdp-multi-input[contentDensity], fdp-list[contentDensity], fdp-slider[contentDensity], fdp-time-picker[contentDensity], fdp-textarea[contentDensity], fdp-switch[contentDensity], fdp-number-step-input[contentDensity], fdp-select[contentDensity], fdp-date-picker[contentDensity], fdp-checkbox[contentDensity], fdp-checkbox-group[contentDensity], fdp-combobox[contentDensity], fdp-datetime-picker[contentDensity], fdp-input[contentDensity], fdp-radio-group[contentDensity], fdp-radio-button[contentDensity], fdp-multi-combobox[contentDensity], fdp-input-group-addon-body[contentDensity], fdp-input-group[contentDensity], fdp-value-help-dialog[contentDensity], fdp-filter-single-select[contentDensity], fdp-filter-multi-select[contentDensity], fdp-filter-custom[contentDensity] " }, { kind: "component", type: i6$2.ActionButtonGroupComponent, selector: "fdp-action-button-group" }, { kind: "component", type: i7$1.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: i8.MenuComponent, selector: "fdp-menu", inputs: ["id", "openByArrowKeys", "xPosition"], outputs: ["close"] }, { kind: "component", type: i8.MenuItemComponent, selector: "fdp-menu-item", inputs: ["disabled", "cascadeDirection"], outputs: ["itemSelect"] }, { kind: "directive", type: i8.MenuTriggerDirective, selector: "[fdpMenuTriggerFor]", inputs: ["fdpMenuTriggerFor"] }, { kind: "component", type: i9.LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
100
|
+
KanbanCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: KanbanCardComponent, selector: "bk-kanban-card", inputs: { index: "index", mo: "mo", viewSetting: "viewSetting", allAvailableAssignees: "allAvailableAssignees" }, providers: [FormPanelService], usesInheritance: true, ngImport: i0, template: "<fd-card cardType=\"quickView\" class=\"docs-flex-item-margin\" style=\"background: transparent\" ellipsify>\r\n <div class=\"row task-cover\">\r\n <img\r\n [src]=\"\r\n viewSetting.Cover\r\n ? (mo[viewSetting.Cover]?.FileId\r\n | picFieldSrc: 'ID':viewSetting[viewSetting.Cover + 'Column']?.FieldDefId)\r\n : ''\r\n \"\r\n />\r\n </div>\r\n <fdp-action-button-group class=\"card-menu\">\r\n <fdp-button\r\n contentDensity=\"compact\"\r\n glyph=\"overflow\"\r\n buttonType=\"transparent\"\r\n [fdpMenuTriggerFor]=\"basicMenu\"\r\n ></fdp-button>\r\n <fdp-menu #basicMenu id=\"basic-menu\" [xPosition]=\"'before'\">\r\n <fdp-menu-item>{{ 'Edit' | bbbTranslate }}</fdp-menu-item>\r\n <fdp-menu-item>{{ 'Delete' | bbbTranslate }}</fdp-menu-item>\r\n </fdp-menu>\r\n </fdp-action-button-group>\r\n <fd-card-content>\r\n <bsu-ly-layout-container-of-root\r\n *ngIf=\"layout$ | async as layout94\"\r\n [config]=\"layout94\"\r\n [isPanel]=\"false\"\r\n [isRoot]=\"true\"\r\n ></bsu-ly-layout-container-of-root>\r\n </fd-card-content>\r\n <fd-card-footer>\r\n <div class=\"kanban-footer row\">\r\n <div class=\"comment row\">\r\n <fd-icon glyph=\"post\"></fd-icon>\r\n {{ mo[viewSetting.CommentsCount] }}\r\n </div>\r\n <div class=\"attachment row\">\r\n <fd-icon glyph=\"attachment\"></fd-icon>\r\n {{ mo[viewSetting.AttachesCount] }}\r\n </div>\r\n\r\n <div class=\"task row\">\r\n {{ mo[viewSetting.ProgressLabel] }}\r\n <div class=\"circle-icon\">\r\n <fd-icon glyph=\"accept\"></fd-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </fd-card-footer>\r\n</fd-card>\r\n", styles: [":host{position:relative}:host.selected{background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}:host.selected fd-card{border-color:var(--sapList_SelectionBorderColor, #0854a0)}:host.selected fd-card,:host.selected fd-card-header,:host.selected .fd-bar--footer,:host.selected fd-quick-view-subheader .fd-bar{background-color:inherit!important}.row{display:flex;align-items:center}.fd-card{background:var(--sapBackgroundColor, #f7f7f7)!important;box-shadow:none}.fd-card:hover .card-menu fdp-button{display:block}.fd-card .card-menu{position:absolute;right:1rem;top:1rem;background-color:#fff}.fd-card .card-menu fdp-button{display:none}.fd-card .card-menu [aria-controls=fdp-menu-basic-menu]{display:block}.fd-card .task-cover{width:100%;height:150px;justify-content:center}.fd-card .task-cover img{object-fit:cover;width:100%;height:100%}.fd-card fd-card-content{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;row-gap:20px;padding:1rem}.fd-card fd-card-content .progress-indicator{flex:1}.fd-card fd-card-content .progress-indicator ::ng-deep .fd-progress-indicator__remaining{display:flex;align-items:center}.fd-card ::ng-deep fd-info-label .fd-info-label__text{display:inline-flex!important}.kanban-footer{padding:1rem;column-gap:10px}.kanban-footer .comment,.kanban-footer .attachment,.kanban-footer .task{column-gap:2px}.kanban-footer .task{margin-right:auto}.kanban-footer .task .circle-icon{width:calc(var(--sapFontSize, .875rem) + 6px);height:calc(var(--sapFontSize, .875rem) + 6px);border-radius:calc(var(--sapFontSize, .875rem) + 6px);border:1px solid var(--sapButton_BorderColor, #0854a0);display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "component", type: i4$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i4$1.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i4$1.CardFooterComponent, selector: "fd-card-footer" }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i5$1.PlatformContentDensityDeprecationDirective, selector: " fdp-action-bar[contentDensity], fdp-button[contentDensity], fdp-object-list-item[contentDensity], fdp-standard-list-item[contentDensity], fdp-menu[contentDensity], fdp-menu-button[contentDensity], fdp-panel[contentDensity], fdp-search-field[contentDensity], fdp-split-menu-button[contentDensity], fdp-file-uploader[contentDensity], fdp-upload-collection[contentDensity], fdp-table[contentDensity], fdp-multi-input[contentDensity], fdp-list[contentDensity], fdp-slider[contentDensity], fdp-time-picker[contentDensity], fdp-textarea[contentDensity], fdp-switch[contentDensity], fdp-number-step-input[contentDensity], fdp-select[contentDensity], fdp-date-picker[contentDensity], fdp-checkbox[contentDensity], fdp-checkbox-group[contentDensity], fdp-combobox[contentDensity], fdp-datetime-picker[contentDensity], fdp-input[contentDensity], fdp-radio-group[contentDensity], fdp-radio-button[contentDensity], fdp-multi-combobox[contentDensity], fdp-input-group-addon-body[contentDensity], fdp-input-group[contentDensity], fdp-value-help-dialog[contentDensity], fdp-filter-single-select[contentDensity], fdp-filter-multi-select[contentDensity], fdp-filter-custom[contentDensity] " }, { kind: "component", type: i6$2.ActionButtonGroupComponent, selector: "fdp-action-button-group" }, { kind: "component", type: i7$1.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: i8.MenuComponent, selector: "fdp-menu", inputs: ["id", "openByArrowKeys", "xPosition"], outputs: ["close"] }, { kind: "component", type: i8.MenuItemComponent, selector: "fdp-menu-item", inputs: ["disabled", "cascadeDirection"], outputs: ["itemSelect"] }, { kind: "directive", type: i8.MenuTriggerDirective, selector: "[fdpMenuTriggerFor]", inputs: ["fdpMenuTriggerFor"] }, { kind: "component", type: i9.LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
101
101
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: KanbanCardComponent, decorators: [{
|
|
102
102
|
type: Component,
|
|
103
|
-
args: [{ selector: 'bk-kanban-card', providers: [FormPanelService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-card cardType=\"quickView\" class=\"docs-flex-item-margin\" style=\"background: transparent\" ellipsify>\n <div class=\"row task-cover\">\n <img\n [src]=\"\n viewSetting.Cover\n ? (mo[viewSetting.Cover]?.FileId\n | picFieldSrc: 'ID':viewSetting[viewSetting.Cover + 'Column']?.FieldDefId)\n : ''\n \"\n />\n </div>\n <fdp-action-button-group class=\"card-menu\">\n <fdp-button\n contentDensity=\"compact\"\n glyph=\"overflow\"\n buttonType=\"transparent\"\n [fdpMenuTriggerFor]=\"basicMenu\"\n ></fdp-button>\n <fdp-menu #basicMenu id=\"basic-menu\" [xPosition]=\"'before'\">\n <fdp-menu-item>{{ 'Edit' | bbbTranslate }}</fdp-menu-item>\n <fdp-menu-item>{{ 'Delete' | bbbTranslate }}</fdp-menu-item>\n </fdp-menu>\n </fdp-action-button-group>\n <fd-card-content>\n <bsu-ly-layout-container-of-root\n *ngIf=\"layout$ | async as layout94\"\n [config]=\"layout94\"\n [isPanel]=\"false\"\n [isRoot]=\"true\"\n ></bsu-ly-layout-container-of-root>\n </fd-card-content>\n <fd-card-footer>\n <div class=\"kanban-footer row\">\n <div class=\"comment row\">\n <fd-icon glyph=\"post\"></fd-icon>\n {{ mo[viewSetting.CommentsCount] }}\n </div>\n <div class=\"attachment row\">\n <fd-icon glyph=\"attachment\"></fd-icon>\n {{ mo[viewSetting.AttachesCount] }}\n </div>\n\n <div class=\"task row\">\n {{ mo[viewSetting.ProgressLabel] }}\n <div class=\"circle-icon\">\n <fd-icon glyph=\"accept\"></fd-icon>\n </div>\n </div>\n </div>\n </fd-card-footer>\n</fd-card>\n", styles: [":host{position:relative}:host.selected{background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}:host.selected fd-card{border-color:var(--sapList_SelectionBorderColor, #0854a0)}:host.selected fd-card,:host.selected fd-card-header,:host.selected .fd-bar--footer,:host.selected fd-quick-view-subheader .fd-bar{background-color:inherit!important}.row{display:flex;align-items:center}.fd-card{background:var(--sapBackgroundColor, #f7f7f7)!important;box-shadow:none}.fd-card:hover .card-menu fdp-button{display:block}.fd-card .card-menu{position:absolute;right:1rem;top:1rem;background-color:#fff}.fd-card .card-menu fdp-button{display:none}.fd-card .card-menu [aria-controls=fdp-menu-basic-menu]{display:block}.fd-card .task-cover{width:100%;height:150px;justify-content:center}.fd-card .task-cover img{object-fit:cover;width:100%;height:100%}.fd-card fd-card-content{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;row-gap:20px;padding:1rem}.fd-card fd-card-content .progress-indicator{flex:1}.fd-card fd-card-content .progress-indicator ::ng-deep .fd-progress-indicator__remaining{display:flex;align-items:center}.fd-card ::ng-deep fd-info-label .fd-info-label__text{display:inline-flex!important}.kanban-footer{padding:1rem;column-gap:10px}.kanban-footer .comment,.kanban-footer .attachment,.kanban-footer .task{column-gap:2px}.kanban-footer .task{margin-right:auto}.kanban-footer .task .circle-icon{width:calc(var(--sapFontSize, .875rem) + 6px);height:calc(var(--sapFontSize, .875rem) + 6px);border-radius:calc(var(--sapFontSize, .875rem) + 6px);border:1px solid var(--sapButton_BorderColor, #0854a0);display:flex;align-items:center;justify-content:center}\n"] }]
|
|
103
|
+
args: [{ selector: 'bk-kanban-card', providers: [FormPanelService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-card cardType=\"quickView\" class=\"docs-flex-item-margin\" style=\"background: transparent\" ellipsify>\r\n <div class=\"row task-cover\">\r\n <img\r\n [src]=\"\r\n viewSetting.Cover\r\n ? (mo[viewSetting.Cover]?.FileId\r\n | picFieldSrc: 'ID':viewSetting[viewSetting.Cover + 'Column']?.FieldDefId)\r\n : ''\r\n \"\r\n />\r\n </div>\r\n <fdp-action-button-group class=\"card-menu\">\r\n <fdp-button\r\n contentDensity=\"compact\"\r\n glyph=\"overflow\"\r\n buttonType=\"transparent\"\r\n [fdpMenuTriggerFor]=\"basicMenu\"\r\n ></fdp-button>\r\n <fdp-menu #basicMenu id=\"basic-menu\" [xPosition]=\"'before'\">\r\n <fdp-menu-item>{{ 'Edit' | bbbTranslate }}</fdp-menu-item>\r\n <fdp-menu-item>{{ 'Delete' | bbbTranslate }}</fdp-menu-item>\r\n </fdp-menu>\r\n </fdp-action-button-group>\r\n <fd-card-content>\r\n <bsu-ly-layout-container-of-root\r\n *ngIf=\"layout$ | async as layout94\"\r\n [config]=\"layout94\"\r\n [isPanel]=\"false\"\r\n [isRoot]=\"true\"\r\n ></bsu-ly-layout-container-of-root>\r\n </fd-card-content>\r\n <fd-card-footer>\r\n <div class=\"kanban-footer row\">\r\n <div class=\"comment row\">\r\n <fd-icon glyph=\"post\"></fd-icon>\r\n {{ mo[viewSetting.CommentsCount] }}\r\n </div>\r\n <div class=\"attachment row\">\r\n <fd-icon glyph=\"attachment\"></fd-icon>\r\n {{ mo[viewSetting.AttachesCount] }}\r\n </div>\r\n\r\n <div class=\"task row\">\r\n {{ mo[viewSetting.ProgressLabel] }}\r\n <div class=\"circle-icon\">\r\n <fd-icon glyph=\"accept\"></fd-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </fd-card-footer>\r\n</fd-card>\r\n", styles: [":host{position:relative}:host.selected{background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}:host.selected fd-card{border-color:var(--sapList_SelectionBorderColor, #0854a0)}:host.selected fd-card,:host.selected fd-card-header,:host.selected .fd-bar--footer,:host.selected fd-quick-view-subheader .fd-bar{background-color:inherit!important}.row{display:flex;align-items:center}.fd-card{background:var(--sapBackgroundColor, #f7f7f7)!important;box-shadow:none}.fd-card:hover .card-menu fdp-button{display:block}.fd-card .card-menu{position:absolute;right:1rem;top:1rem;background-color:#fff}.fd-card .card-menu fdp-button{display:none}.fd-card .card-menu [aria-controls=fdp-menu-basic-menu]{display:block}.fd-card .task-cover{width:100%;height:150px;justify-content:center}.fd-card .task-cover img{object-fit:cover;width:100%;height:100%}.fd-card fd-card-content{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;row-gap:20px;padding:1rem}.fd-card fd-card-content .progress-indicator{flex:1}.fd-card fd-card-content .progress-indicator ::ng-deep .fd-progress-indicator__remaining{display:flex;align-items:center}.fd-card ::ng-deep fd-info-label .fd-info-label__text{display:inline-flex!important}.kanban-footer{padding:1rem;column-gap:10px}.kanban-footer .comment,.kanban-footer .attachment,.kanban-footer .task{column-gap:2px}.kanban-footer .task{margin-right:auto}.kanban-footer .task .circle-icon{width:calc(var(--sapFontSize, .875rem) + 6px);height:calc(var(--sapFontSize, .875rem) + 6px);border-radius:calc(var(--sapFontSize, .875rem) + 6px);border:1px solid var(--sapButton_BorderColor, #0854a0);display:flex;align-items:center;justify-content:center}\n"] }]
|
|
104
104
|
}], propDecorators: { index: [{
|
|
105
105
|
type: Input
|
|
106
106
|
}], mo: [{
|
|
@@ -157,10 +157,10 @@ class BarsaAvatarGroupComponent extends KanbanBaseComponent {
|
|
|
157
157
|
}
|
|
158
158
|
}
|
|
159
159
|
BarsaAvatarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaAvatarGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
160
|
-
BarsaAvatarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaAvatarGroupComponent, selector: "bk-avatar-group", inputs: { existedItems: "existedItems", availableItems: "availableItems", viewSetting: "viewSetting", visibleFields: "visibleFields", addItem: "addItem", size: "size" }, viewQueries: [{ propertyName: "popoverBodyComponent", first: true, predicate: ["overflowPopoverBody"], descendants: true }, { propertyName: "avatarGroupCom", first: true, predicate: AvatarGroupComponent, descendants: true, read: AvatarGroupComponent, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-avatar-group #avatarGroupCom type=\"group\" [size]=\"size\">\n <fd-popover\n [noArrow]=\"false\"\n [focusTrapped]=\"true\"\n [focusAutoCapture]=\"true\"\n [triggers]=\"[]\"\n [closeOnOutsideClick]=\"true\"\n [closeOnEscapeKey]=\"true\"\n (isOpenChange)=\"isOpenChanged($event)\"\n placement=\"bottom\"\n [maxWidth]=\"312\"\n #overflowPopover\n >\n <fd-popover-control\n fd-avatar-group-popover-control\n [attr.aria-label]=\"\n 'Has popup type dialog Conjoined avatars, ' +\n ' avatars displayed, ' +\n avatarGroupCom?.overflowItemsCount +\n ' avatars hidden, activate for complete list'\n \"\n (click)=\"handleControlClick($event, overflowPopover)\"\n (keydown)=\"handleControlKeydown($event, overflowPopover)\"\n >\n <div *ngFor=\"let person of existedItems\" fd-avatar-group-item>\n <fd-avatar\n *ngIf=\"!person[viewSetting.AssigneeImage]\"\n [label]=\"person[viewSetting.AssigneeName]\"\n [title]=\"person[viewSetting.AssigneeName]\"\n [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\n role=\"img\"\n [circle]=\"true\"\n [border]=\"true\"\n [size]=\"size\"\n ></fd-avatar>\n\n <fd-avatar\n *ngIf=\"person[viewSetting.AssigneeImage] as avatar\"\n role=\"img\"\n [title]=\"person[viewSetting.AssigneeName]\"\n [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\n [circle]=\"true\"\n [border]=\"true\"\n [size]=\"size\"\n [image]=\"(avatar.FileId | picFieldSrc: 'ID':person.Id) || ''\"\n >\n </fd-avatar>\n </div>\n <button\n *ngIf=\"avatarGroupCom.overflowItemsCount && avatarGroupCom.overflowItemsCount > 0\"\n fd-button\n fd-avatar-group-overflow-button\n tabindex=\"-1\"\n [compact]=\"false\"\n [size]=\"size\"\n >\n <bdi fd-avatar-group-overflow-button-text> +{{ avatarGroupCom.overflowItemsCount }} </bdi>\n </button>\n </fd-popover-control>\n <fd-popover-body #overflowPopoverBody aria-labelledby=\"avatar-group-1-popover-header\" role=\"tooltip\">\n <div class=\"fd-popover__wrapper\">\n <div fd-popover-body-header>\n <div fd-bar barDesign=\"header\">\n <div fd-bar-left>\n <fd-button-bar\n *ngIf=\"isDetailStage\"\n (click)=\"openOverflowMain()\"\n glyph=\"navigation-left-arrow\"\n fdType=\"transparent\"\n aria-label=\"Back\"\n title=\"Back\"\n ></fd-button-bar>\n <fd-bar-element id=\"avatar-group-1-popover-header\">\n {{ isDetailStage ? 'Business Card' : 'Team Members (' + existedItems?.length + ')' }}\n </fd-bar-element>\n <fd-bar-element *ngIf=\"isDetailStage\"> </fd-bar-element>\n </div>\n </div>\n </div>\n\n <div\n fd-avatar-group-overflow-body\n [noPadding]=\"isDetailStage\"\n [noHorizontalScroll]=\"isDetailStage\"\n [noVerticalScroll]=\"false\"\n >\n <ng-container *ngIf=\"overflowPopoverStage === 'main'\">\n <ng-container *ngFor=\"let person of existedItems; let idx = index\">\n <div fd-avatar-group-overflow-item>\n <fd-popover [triggers]=\"['click']\">\n <fd-popover-control>\n <fd-avatar\n *ngIf=\"!person[viewSetting.AssigneeImage]\"\n fd-avatar-group-focusable-avatar\n [circle]=\"true\"\n size=\"s\"\n [label]=\"person[viewSetting.AssigneeName]\"\n [title]=\"person[viewSetting.AssigneeName]\"\n [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\n role=\"img\"\n ></fd-avatar>\n <fd-avatar\n *ngIf=\"person[viewSetting.AssigneeImage] as avatar\"\n fd-avatar-group-focusable-avatar\n role=\"img\"\n [title]=\"person[viewSetting.AssigneeName]\"\n [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\n [circle]=\"true\"\n size=\"s\"\n [image]=\"(avatar.FileId | picFieldSrc: 'ID':person.Id) || ''\"\n ></fd-avatar>\n </fd-popover-control>\n <fd-popover-body>\n <div class=\"avatar-actions\">\n <button\n fd-button\n (click)=\"deleteAvatar(idx)\"\n [label]=\"'Delete' | bbbTranslate\"\n glyph=\"decline\"\n ></button>\n <button\n fd-button\n [label]=\"'Show' | bbbTranslate\"\n glyph=\"detail-view\"\n ></button>\n </div>\n </fd-popover-body>\n </fd-popover>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </fd-popover-body>\n </fd-popover>\n</fd-avatar-group>\n\n<fd-popover\n #peoplePopover\n *ngIf=\"addItem\"\n [triggers]=\"[]\"\n [focusTrapped]=\"false\"\n [closeOnOutsideClick]=\"true\"\n [noArrow]=\"false\"\n placement=\"bottom\"\n [focusAutoCapture]=\"true\"\n>\n <fd-popover-control>\n <div>\n <button\n fd-button\n (click)=\"openPopover($event, peoplePopover)\"\n fdType=\"transparent\"\n glyph=\"sys-add\"\n ></button>\n </div>\n </fd-popover-control>\n <fd-popover-body>\n <ul fd-list>\n <li fd-list-item *ngFor=\"let item of availableItems\" (click)=\"newItem(item)\">\n <ng-container *ngIf=\"visibleFields.length > 0; else default\">\n <ng-container *ngFor=\"let field of visibleFields\">\n {{ item[field] }}\n </ng-container>\n </ng-container>\n <ng-template #default>\n {{ item }}\n </ng-template>\n </li>\n </ul>\n </fd-popover-body>\n</fd-popover>\n", styles: [":host{display:flex;align-items:center;column-gap:2px;width:130px}.avatar-actions{display:flex;padding:10px;flex-direction:column;justify-content:center;row-gap:15px;width:100px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3.AvatarGroupComponent, selector: "fd-avatar-group", inputs: ["id", "class", "size", "type", "ariaLabel"] }, { kind: "directive", type: i3.AvatarGroupItemDirective, selector: "[fd-avatar-group-item]" }, { kind: "directive", type: i3.AvatarGroupFocusableAvatarDirective, selector: "[fd-avatar-group-focusable-avatar]", inputs: ["tabindex"] }, { kind: "directive", type: i3.AvatarGroupPopoverControlDirective, selector: "[fd-avatar-group-popover-control]", inputs: ["tabindex", "role"] }, { kind: "directive", type: i3.AvatarGroupOverflowBodyDirective, selector: "[fd-avatar-group-overflow-body]", inputs: ["noPadding", "noHorizontalScroll", "noVerticalScroll"] }, { kind: "directive", type: i3.AvatarGroupOverflowItemDirective, selector: "[fd-avatar-group-overflow-item]" }, { kind: "directive", type: i3.AvatarGroupOverflowButtonDirective, selector: "[fd-avatar-group-overflow-button]", inputs: ["class", "size", "color"] }, { kind: "directive", type: i3.AvatarGroupOverflowButtonTextDirective, selector: "[fd-avatar-group-overflow-button-text]" }, { kind: "component", type: i4$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4$3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i4$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i5.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i6$3.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$3.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "component", type: i7.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i7.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "component", type: i7.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
160
|
+
BarsaAvatarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaAvatarGroupComponent, selector: "bk-avatar-group", inputs: { existedItems: "existedItems", availableItems: "availableItems", viewSetting: "viewSetting", visibleFields: "visibleFields", addItem: "addItem", size: "size" }, viewQueries: [{ propertyName: "popoverBodyComponent", first: true, predicate: ["overflowPopoverBody"], descendants: true }, { propertyName: "avatarGroupCom", first: true, predicate: AvatarGroupComponent, descendants: true, read: AvatarGroupComponent, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-avatar-group #avatarGroupCom type=\"group\" [size]=\"size\">\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 avatarGroupCom?.overflowItemsCount +\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 <div *ngFor=\"let person of existedItems\" fd-avatar-group-item>\r\n <fd-avatar\r\n *ngIf=\"!person[viewSetting.AssigneeImage]\"\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\r\n <fd-avatar\r\n *ngIf=\"person[viewSetting.AssigneeImage] as 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 </div>\r\n <button\r\n *ngIf=\"avatarGroupCom.overflowItemsCount && avatarGroupCom.overflowItemsCount > 0\"\r\n fd-button\r\n fd-avatar-group-overflow-button\r\n tabindex=\"-1\"\r\n [compact]=\"false\"\r\n [size]=\"size\"\r\n >\r\n <bdi fd-avatar-group-overflow-button-text> +{{ avatarGroupCom.overflowItemsCount }} </bdi>\r\n </button>\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 <fd-button-bar\r\n *ngIf=\"isDetailStage\"\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 <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 <fd-bar-element *ngIf=\"isDetailStage\"> </fd-bar-element>\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 <ng-container *ngIf=\"overflowPopoverStage === 'main'\">\r\n <ng-container *ngFor=\"let person of existedItems; let idx = index\">\r\n <div fd-avatar-group-overflow-item>\r\n <fd-popover [triggers]=\"['click']\">\r\n <fd-popover-control>\r\n <fd-avatar\r\n *ngIf=\"!person[viewSetting.AssigneeImage]\"\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 <fd-avatar\r\n *ngIf=\"person[viewSetting.AssigneeImage] as 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 </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\r\n fd-button\r\n [label]=\"'Show' | bbbTranslate\"\r\n glyph=\"detail-view\"\r\n ></button>\r\n </div>\r\n </fd-popover-body>\r\n </fd-popover>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </fd-popover-body>\r\n </fd-popover>\r\n</fd-avatar-group>\r\n\r\n<fd-popover\r\n #peoplePopover\r\n *ngIf=\"addItem\"\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 <li fd-list-item *ngFor=\"let item of availableItems\" (click)=\"newItem(item)\">\r\n <ng-container *ngIf=\"visibleFields.length > 0; else default\">\r\n <ng-container *ngFor=\"let field of visibleFields\">\r\n {{ item[field] }}\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #default>\r\n {{ item }}\r\n </ng-template>\r\n </li>\r\n </ul>\r\n </fd-popover-body>\r\n</fd-popover>\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: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3.AvatarGroupComponent, selector: "fd-avatar-group", inputs: ["id", "class", "size", "type", "ariaLabel"] }, { kind: "directive", type: i3.AvatarGroupItemDirective, selector: "[fd-avatar-group-item]" }, { kind: "directive", type: i3.AvatarGroupFocusableAvatarDirective, selector: "[fd-avatar-group-focusable-avatar]", inputs: ["tabindex"] }, { kind: "directive", type: i3.AvatarGroupPopoverControlDirective, selector: "[fd-avatar-group-popover-control]", inputs: ["tabindex", "role"] }, { kind: "directive", type: i3.AvatarGroupOverflowBodyDirective, selector: "[fd-avatar-group-overflow-body]", inputs: ["noPadding", "noHorizontalScroll", "noVerticalScroll"] }, { kind: "directive", type: i3.AvatarGroupOverflowItemDirective, selector: "[fd-avatar-group-overflow-item]" }, { kind: "directive", type: i3.AvatarGroupOverflowButtonDirective, selector: "[fd-avatar-group-overflow-button]", inputs: ["class", "size", "color"] }, { kind: "directive", type: i3.AvatarGroupOverflowButtonTextDirective, selector: "[fd-avatar-group-overflow-button-text]" }, { kind: "component", type: i4$3.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4$3.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4$3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i4$3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i5.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i6$3.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$3.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "component", type: i7.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i7.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "component", type: i7.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
161
161
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaAvatarGroupComponent, decorators: [{
|
|
162
162
|
type: Component,
|
|
163
|
-
args: [{ selector: 'bk-avatar-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-avatar-group #avatarGroupCom type=\"group\" [size]=\"size\">\n <fd-popover\n [noArrow]=\"false\"\n [focusTrapped]=\"true\"\n [focusAutoCapture]=\"true\"\n [triggers]=\"[]\"\n [closeOnOutsideClick]=\"true\"\n [closeOnEscapeKey]=\"true\"\n (isOpenChange)=\"isOpenChanged($event)\"\n placement=\"bottom\"\n [maxWidth]=\"312\"\n #overflowPopover\n >\n <fd-popover-control\n fd-avatar-group-popover-control\n [attr.aria-label]=\"\n 'Has popup type dialog Conjoined avatars, ' +\n ' avatars displayed, ' +\n avatarGroupCom?.overflowItemsCount +\n ' avatars hidden, activate for complete list'\n \"\n (click)=\"handleControlClick($event, overflowPopover)\"\n (keydown)=\"handleControlKeydown($event, overflowPopover)\"\n >\n <div *ngFor=\"let person of existedItems\" fd-avatar-group-item>\n <fd-avatar\n *ngIf=\"!person[viewSetting.AssigneeImage]\"\n [label]=\"person[viewSetting.AssigneeName]\"\n [title]=\"person[viewSetting.AssigneeName]\"\n [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\n role=\"img\"\n [circle]=\"true\"\n [border]=\"true\"\n [size]=\"size\"\n ></fd-avatar>\n\n <fd-avatar\n *ngIf=\"person[viewSetting.AssigneeImage] as avatar\"\n role=\"img\"\n [title]=\"person[viewSetting.AssigneeName]\"\n [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\n [circle]=\"true\"\n [border]=\"true\"\n [size]=\"size\"\n [image]=\"(avatar.FileId | picFieldSrc: 'ID':person.Id) || ''\"\n >\n </fd-avatar>\n </div>\n <button\n *ngIf=\"avatarGroupCom.overflowItemsCount && avatarGroupCom.overflowItemsCount > 0\"\n fd-button\n fd-avatar-group-overflow-button\n tabindex=\"-1\"\n [compact]=\"false\"\n [size]=\"size\"\n >\n <bdi fd-avatar-group-overflow-button-text> +{{ avatarGroupCom.overflowItemsCount }} </bdi>\n </button>\n </fd-popover-control>\n <fd-popover-body #overflowPopoverBody aria-labelledby=\"avatar-group-1-popover-header\" role=\"tooltip\">\n <div class=\"fd-popover__wrapper\">\n <div fd-popover-body-header>\n <div fd-bar barDesign=\"header\">\n <div fd-bar-left>\n <fd-button-bar\n *ngIf=\"isDetailStage\"\n (click)=\"openOverflowMain()\"\n glyph=\"navigation-left-arrow\"\n fdType=\"transparent\"\n aria-label=\"Back\"\n title=\"Back\"\n ></fd-button-bar>\n <fd-bar-element id=\"avatar-group-1-popover-header\">\n {{ isDetailStage ? 'Business Card' : 'Team Members (' + existedItems?.length + ')' }}\n </fd-bar-element>\n <fd-bar-element *ngIf=\"isDetailStage\"> </fd-bar-element>\n </div>\n </div>\n </div>\n\n <div\n fd-avatar-group-overflow-body\n [noPadding]=\"isDetailStage\"\n [noHorizontalScroll]=\"isDetailStage\"\n [noVerticalScroll]=\"false\"\n >\n <ng-container *ngIf=\"overflowPopoverStage === 'main'\">\n <ng-container *ngFor=\"let person of existedItems; let idx = index\">\n <div fd-avatar-group-overflow-item>\n <fd-popover [triggers]=\"['click']\">\n <fd-popover-control>\n <fd-avatar\n *ngIf=\"!person[viewSetting.AssigneeImage]\"\n fd-avatar-group-focusable-avatar\n [circle]=\"true\"\n size=\"s\"\n [label]=\"person[viewSetting.AssigneeName]\"\n [title]=\"person[viewSetting.AssigneeName]\"\n [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\n role=\"img\"\n ></fd-avatar>\n <fd-avatar\n *ngIf=\"person[viewSetting.AssigneeImage] as avatar\"\n fd-avatar-group-focusable-avatar\n role=\"img\"\n [title]=\"person[viewSetting.AssigneeName]\"\n [ariaLabel]=\"person[viewSetting.AssigneeName] + ' avatar'\"\n [circle]=\"true\"\n size=\"s\"\n [image]=\"(avatar.FileId | picFieldSrc: 'ID':person.Id) || ''\"\n ></fd-avatar>\n </fd-popover-control>\n <fd-popover-body>\n <div class=\"avatar-actions\">\n <button\n fd-button\n (click)=\"deleteAvatar(idx)\"\n [label]=\"'Delete' | bbbTranslate\"\n glyph=\"decline\"\n ></button>\n <button\n fd-button\n [label]=\"'Show' | bbbTranslate\"\n glyph=\"detail-view\"\n ></button>\n </div>\n </fd-popover-body>\n </fd-popover>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </fd-popover-body>\n </fd-popover>\n</fd-avatar-group>\n\n<fd-popover\n #peoplePopover\n *ngIf=\"addItem\"\n [triggers]=\"[]\"\n [focusTrapped]=\"false\"\n [closeOnOutsideClick]=\"true\"\n [noArrow]=\"false\"\n placement=\"bottom\"\n [focusAutoCapture]=\"true\"\n>\n <fd-popover-control>\n <div>\n <button\n fd-button\n (click)=\"openPopover($event, peoplePopover)\"\n fdType=\"transparent\"\n glyph=\"sys-add\"\n ></button>\n </div>\n </fd-popover-control>\n <fd-popover-body>\n <ul fd-list>\n <li fd-list-item *ngFor=\"let item of availableItems\" (click)=\"newItem(item)\">\n <ng-container *ngIf=\"visibleFields.length > 0; else default\">\n <ng-container *ngFor=\"let field of visibleFields\">\n {{ item[field] }}\n </ng-container>\n </ng-container>\n <ng-template #default>\n {{ item }}\n </ng-template>\n </li>\n </ul>\n </fd-popover-body>\n</fd-popover>\n", styles: [":host{display:flex;align-items:center;column-gap:2px;width:130px}.avatar-actions{display:flex;padding:10px;flex-direction:column;justify-content:center;row-gap:15px;width:100px}\n"] }]
|
|
163
|
+
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 avatarGroupCom?.overflowItemsCount +\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 <div *ngFor=\"let person of existedItems\" fd-avatar-group-item>\r\n <fd-avatar\r\n *ngIf=\"!person[viewSetting.AssigneeImage]\"\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\r\n <fd-avatar\r\n *ngIf=\"person[viewSetting.AssigneeImage] as 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 </div>\r\n <button\r\n *ngIf=\"avatarGroupCom.overflowItemsCount && avatarGroupCom.overflowItemsCount > 0\"\r\n fd-button\r\n fd-avatar-group-overflow-button\r\n tabindex=\"-1\"\r\n [compact]=\"false\"\r\n [size]=\"size\"\r\n >\r\n <bdi fd-avatar-group-overflow-button-text> +{{ avatarGroupCom.overflowItemsCount }} </bdi>\r\n </button>\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 <fd-button-bar\r\n *ngIf=\"isDetailStage\"\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 <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 <fd-bar-element *ngIf=\"isDetailStage\"> </fd-bar-element>\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 <ng-container *ngIf=\"overflowPopoverStage === 'main'\">\r\n <ng-container *ngFor=\"let person of existedItems; let idx = index\">\r\n <div fd-avatar-group-overflow-item>\r\n <fd-popover [triggers]=\"['click']\">\r\n <fd-popover-control>\r\n <fd-avatar\r\n *ngIf=\"!person[viewSetting.AssigneeImage]\"\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 <fd-avatar\r\n *ngIf=\"person[viewSetting.AssigneeImage] as 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 </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\r\n fd-button\r\n [label]=\"'Show' | bbbTranslate\"\r\n glyph=\"detail-view\"\r\n ></button>\r\n </div>\r\n </fd-popover-body>\r\n </fd-popover>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </fd-popover-body>\r\n </fd-popover>\r\n</fd-avatar-group>\r\n\r\n<fd-popover\r\n #peoplePopover\r\n *ngIf=\"addItem\"\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 <li fd-list-item *ngFor=\"let item of availableItems\" (click)=\"newItem(item)\">\r\n <ng-container *ngIf=\"visibleFields.length > 0; else default\">\r\n <ng-container *ngFor=\"let field of visibleFields\">\r\n {{ item[field] }}\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #default>\r\n {{ item }}\r\n </ng-template>\r\n </li>\r\n </ul>\r\n </fd-popover-body>\r\n</fd-popover>\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"] }]
|
|
164
164
|
}], propDecorators: { popoverBodyComponent: [{
|
|
165
165
|
type: ViewChild,
|
|
166
166
|
args: ['overflowPopoverBody']
|
|
@@ -394,10 +394,10 @@ class KanbanViewComponent extends ReportViewBaseComponent {
|
|
|
394
394
|
}
|
|
395
395
|
}
|
|
396
396
|
KanbanViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: KanbanViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
397
|
-
KanbanViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: KanbanViewComponent, selector: "bk-kanban-view", inputs: { kanbanColumns: "kanbanColumns", groupbyProperty: "groupbyProperty" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<fd-layout-panel>\n <fd-layout-panel-body [bleed]=\"true\">\n <table fd-table *ngIf=\"isCheckList\">\n <thead fd-table-header>\n <tr fd-table-row>\n <th fd-table-cell>\n <fd-checkbox\n name=\"allCheckbox\"\n [ngModel]=\"allChecked\"\n (ngModelChange)=\"onAllCheckbox($event)\"\n >{{ 'All' | bbbTranslate }}</fd-checkbox\n >\n </th>\n </tr>\n </thead>\n </table>\n </fd-layout-panel-body>\n</fd-layout-panel>\n\n<fd-layout-grid\n *ngIf=\"moDataList?.length; else noData\"\n class=\"columns\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"kanbanColumns\"\n [id]=\"'$Root'\"\n (cdkDropListDropped)=\"onDrop($event, true)\"\n>\n <div\n *ngFor=\"let column of kanbanColumns; let columnIndex = index\"\n [fdLayoutGridCol]=\"12\"\n [colMd]=\"6\"\n [colLg]=\"4\"\n [colXl]=\"3\"\n class=\"column\"\n [id]=\"column.Id\"\n [attr.state]=\"column.$Caption\"\n cdkDrag\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnCard;\n context: {\n column: column,\n columnIndex: columnIndex\n }\n \"\n ></ng-container>\n </div>\n <div\n [fdLayoutGridCol]=\"12\"\n [colMd]=\"6\"\n [colLg]=\"4\"\n [colXl]=\"3\"\n class=\"newColumn\"\n (click)=\"onActiveNewColumnMode()\"\n *ngIf=\"!isNewColumnMode; else newColumnInput\"\n >\n <ng-container>\n <span>\u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F</span>\n </ng-container>\n </div>\n <ng-template #newColumnInput>\n <div [fdLayoutGridCol]=\"12\" [colMd]=\"6\" [colLg]=\"4\" [colXl]=\"3\">\n <input\n #inputEl\n fd-form-control\n type=\"text\"\n autofocus\n (focusout)=\"onCancelNewColumn()\"\n [(ngModel)]=\"newColumn.$Caption\"\n (keydown.enter)=\"onAddNewColumn()\"\n id=\"new-column-name\"\n placeholder=\" \u0646\u0627\u0645\"\n />\n </div>\n </ng-template>\n</fd-layout-grid>\n\n<!--noData-->\n<ng-template #noData>\n <bsu-no-data></bsu-no-data>\n</ng-template>\n\n<!--column card-->\n<ng-template #columnCard let-column=\"column\" let-columnIndex=\"columnIndex\">\n <fd-card cardType=\"quickView\" class=\"docs-flex-item-margin\" ellipsify>\n <fd-card-header>\n <span fd-card-title>{{ column.$Caption }}</span>\n </fd-card-header>\n <fd-card-content\n cdkDropList\n (cdkDropListDropped)=\"onDrop($event)\"\n [cdkDropListSortingDisabled]=\"true\"\n [cdkDropListData]=\"moDataList\"\n >\n <ng-container *ngFor=\"let mo of moDataList; let index = index\">\n <bk-kanban-card\n [mo]=\"mo\"\n [viewSetting]=\"viewSetting\"\n [formSetting]=\"formSetting\"\n [allAvailableAssignees]=\"allAvailableAssignees\"\n [index]=\"index\"\n *ngIf=\"mo[viewSetting.State].$Caption === column.$Caption\"\n [attr.id]=\"mo.Id\"\n [inlineEditMode]=\"true\"\n [isChecked]=\"true\"\n [attr.state]=\"column.$Caption\"\n [attr.index]=\"index\"\n [class.selected]=\"mo.$IsChecked\"\n (cdkDragMoved)=\"onDragMove($event, mo, index, column)\"\n (click)=\"onRowCheck({mo, index})\"\n (dblclick)=\"onRowClick({mo, index})\"\n cdkDrag\n >\n </bk-kanban-card>\n </ng-container>\n </fd-card-content>\n <fd-card-footer class=\"column-footer\">\n <div class=\"new-card\" *ngIf=\"newCard[groupbyProperty] === column.$Caption; else addNewCard\">\n <fd-card>\n <div fd-form-item>\n <textarea\n fd-form-control\n [autofocus]=\"true\"\n [(ngModel)]=\"newCard.$Caption\"\n (keydown.enter)=\"onAddNewCard($event)\"\n (focusout)=\"onNewCardInputFocusout()\"\n [placeholder]=\"'Title' | bbbTranslate\"\n ></textarea>\n </div>\n </fd-card>\n <div class=\"new-card-actions\">\n <button\n fd-button\n (click)=\"onAddNewCard($event)\"\n fdType=\"emphasized\"\n class=\"add-card-btn\"\n [label]=\"'\u0627\u0641\u0632\u0648\u062F\u0646'\"\n ></button>\n <fd-icon (mousedown)=\"onCancelNewCard($event)\" glyph=\"decline\"></fd-icon>\n </div>\n </div>\n\n <ng-template #addNewCard>\n <div class=\"add-new-card\" (click)=\"onInitNewCard(column.$Caption)\">\n <span>\n <fd-icon glyph=\"add\"></fd-icon>\n \u06A9\u0627\u0631\u062A \u062C\u062F\u06CC\u062F\n </span>\n </div>\n </ng-template>\n </fd-card-footer>\n </fd-card>\n</ng-template>\n", styles: [":host{display:flex;column-gap:20px;row-gap:20px;flex-wrap:wrap;overflow:auto;padding-bottom:1rem;height:calc(100% - 38.5px)}::-webkit-scrollbar{height:7px;width:7px}::-webkit-scrollbar-track{box-shadow:inset 0 0 2px #d0cece;border-radius:10px}::-webkit-scrollbar-thumb{background:#c8cacb;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#adb0b2}.columns{height:inherit;width:100%;column-gap:15px;flex-wrap:nowrap!important}.column{height:100%;background-color:var(--sapList_Background, #fff)!important}.column.cdk-drag-placeholder{opacity:0}.column>fd-card{overflow-y:hidden;height:100%;box-shadow:none}.column>fd-card fd-card-header{border:none;background:none;padding:1rem 2rem!important}.column>fd-card fd-card-content{flex:1;overflow-y:auto;padding:0 1rem;margin:0;display:flex;flex-direction:column;row-gap:20px}.column>fd-card .column-footer{padding:1rem 1rem 1rem 1.5rem;position:sticky}.column>fd-card .column-footer .new-card{display:flex;flex-direction:column;justify-content:center;row-gap:1rem}.column>fd-card .column-footer .new-card fd-card{padding:0 1rem;background:var(--sapBackgroundColor, #f7f7f7)!important}.column>fd-card .column-footer .new-card textarea{background:var(--sapBackgroundColor, #f7f7f7)!important;border:none}.column>fd-card .column-footer .new-card span{height:auto!important}.column>fd-card .column-footer .new-card .new-card-actions{display:flex;align-items:center;column-gap:10px}.column>fd-card .column-footer .new-card .new-card-actions fd-icon{font-size:1rem}.column>fd-card .column-footer .add-new-card{padding:0 1rem}.column>fd-card .column-footer .add-new-card span{display:flex;column-gap:4px}.newColumn{background-color:var(--sapList_Background, #fff)!important;border-radius:var(--sapElement_BorderCornerRadius, .25rem);align-self:flex-start;height:100px;opacity:.5;display:flex;align-items:center;justify-content:center;border:1px dashed;position:relative;cursor:pointer}.newColumn span{position:absolute}.newColumn .new-column-popover{width:100%}.newColumn .new-column-popover fd-popover-control{width:100%;height:1px}.new-column-popover-body input{border:none}.row{display:flex;align-items:center}.drop-inside{border:1px solid #00f}.drop-inside ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-before{border-top:2px solid #00f}.drop-before ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-after{border-bottom:2px solid #00f}.drop-after ::ng-deep .fd-list__item{background-color:#dce9f6!important}.columns.cdk-drop-list-dragging .column:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i4$1.CardHeaderComponent, selector: "fd-card-header", inputs: ["interactive", "tabindex"] }, { kind: "component", type: i4$1.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i4$1.CardTitleDirective, selector: "[fd-card-title]" }, { kind: "component", type: i4$1.CardFooterComponent, selector: "fd-card-footer" }, { kind: "component", type: i5$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i6.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class"] }, { kind: "directive", type: i6.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "directive", type: i6.TextareaFormControlDirective, selector: "textarea[fd-form-control]" }, { kind: "component", type: i6.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i8$1.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i8$1.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "component", type: i9$1.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i9$1.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i10.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i10.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i10.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i10.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "component", type: i9.NoDataComponent, selector: "bsu-no-data" }, { kind: "directive", type: i6$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i13.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i13.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: KanbanCardComponent, selector: "bk-kanban-card", inputs: ["index", "mo", "viewSetting", "allAvailableAssignees"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
397
|
+
KanbanViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: KanbanViewComponent, selector: "bk-kanban-view", inputs: { kanbanColumns: "kanbanColumns", groupbyProperty: "groupbyProperty" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<fd-layout-panel>\r\n <fd-layout-panel-body [bleed]=\"true\">\r\n <table fd-table *ngIf=\"isCheckList\">\r\n <thead fd-table-header>\r\n <tr fd-table-row>\r\n <th fd-table-cell>\r\n <fd-checkbox\r\n name=\"allCheckbox\"\r\n [ngModel]=\"allChecked\"\r\n (ngModelChange)=\"onAllCheckbox($event)\"\r\n >{{ 'All' | bbbTranslate }}</fd-checkbox\r\n >\r\n </th>\r\n </tr>\r\n </thead>\r\n </table>\r\n </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n<fd-layout-grid\r\n *ngIf=\"moDataList?.length; else noData\"\r\n class=\"columns\"\r\n cdkDropList\r\n cdkDropListOrientation=\"horizontal\"\r\n [cdkDropListData]=\"kanbanColumns\"\r\n [id]=\"'$Root'\"\r\n (cdkDropListDropped)=\"onDrop($event, true)\"\r\n>\r\n <div\r\n *ngFor=\"let column of kanbanColumns; let columnIndex = index\"\r\n [fdLayoutGridCol]=\"12\"\r\n [colMd]=\"6\"\r\n [colLg]=\"4\"\r\n [colXl]=\"3\"\r\n class=\"column\"\r\n [id]=\"column.Id\"\r\n [attr.state]=\"column.$Caption\"\r\n cdkDrag\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n columnCard;\r\n context: {\r\n column: column,\r\n columnIndex: columnIndex\r\n }\r\n \"\r\n ></ng-container>\r\n </div>\r\n <div\r\n [fdLayoutGridCol]=\"12\"\r\n [colMd]=\"6\"\r\n [colLg]=\"4\"\r\n [colXl]=\"3\"\r\n class=\"newColumn\"\r\n (click)=\"onActiveNewColumnMode()\"\r\n *ngIf=\"!isNewColumnMode; else newColumnInput\"\r\n >\r\n <ng-container>\r\n <span>\u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F</span>\r\n </ng-container>\r\n </div>\r\n <ng-template #newColumnInput>\r\n <div [fdLayoutGridCol]=\"12\" [colMd]=\"6\" [colLg]=\"4\" [colXl]=\"3\">\r\n <input\r\n #inputEl\r\n fd-form-control\r\n type=\"text\"\r\n autofocus\r\n (focusout)=\"onCancelNewColumn()\"\r\n [(ngModel)]=\"newColumn.$Caption\"\r\n (keydown.enter)=\"onAddNewColumn()\"\r\n id=\"new-column-name\"\r\n placeholder=\" \u0646\u0627\u0645\"\r\n />\r\n </div>\r\n </ng-template>\r\n</fd-layout-grid>\r\n\r\n<!--noData-->\r\n<ng-template #noData>\r\n <bsu-no-data></bsu-no-data>\r\n</ng-template>\r\n\r\n<!--column card-->\r\n<ng-template #columnCard let-column=\"column\" let-columnIndex=\"columnIndex\">\r\n <fd-card cardType=\"quickView\" class=\"docs-flex-item-margin\" ellipsify>\r\n <fd-card-header>\r\n <span fd-card-title>{{ column.$Caption }}</span>\r\n </fd-card-header>\r\n <fd-card-content\r\n cdkDropList\r\n (cdkDropListDropped)=\"onDrop($event)\"\r\n [cdkDropListSortingDisabled]=\"true\"\r\n [cdkDropListData]=\"moDataList\"\r\n >\r\n <ng-container *ngFor=\"let mo of moDataList; let index = index\">\r\n <bk-kanban-card\r\n [mo]=\"mo\"\r\n [viewSetting]=\"viewSetting\"\r\n [formSetting]=\"formSetting\"\r\n [allAvailableAssignees]=\"allAvailableAssignees\"\r\n [index]=\"index\"\r\n *ngIf=\"mo[viewSetting.State].$Caption === column.$Caption\"\r\n [attr.id]=\"mo.Id\"\r\n [inlineEditMode]=\"true\"\r\n [isChecked]=\"true\"\r\n [attr.state]=\"column.$Caption\"\r\n [attr.index]=\"index\"\r\n [class.selected]=\"mo.$IsChecked\"\r\n (cdkDragMoved)=\"onDragMove($event, mo, index, column)\"\r\n (click)=\"onRowCheck({mo, index})\"\r\n (dblclick)=\"onRowClick({mo, index})\"\r\n cdkDrag\r\n >\r\n </bk-kanban-card>\r\n </ng-container>\r\n </fd-card-content>\r\n <fd-card-footer class=\"column-footer\">\r\n <div class=\"new-card\" *ngIf=\"newCard[groupbyProperty] === column.$Caption; else addNewCard\">\r\n <fd-card>\r\n <div fd-form-item>\r\n <textarea\r\n fd-form-control\r\n [autofocus]=\"true\"\r\n [(ngModel)]=\"newCard.$Caption\"\r\n (keydown.enter)=\"onAddNewCard($event)\"\r\n (focusout)=\"onNewCardInputFocusout()\"\r\n [placeholder]=\"'Title' | bbbTranslate\"\r\n ></textarea>\r\n </div>\r\n </fd-card>\r\n <div class=\"new-card-actions\">\r\n <button\r\n fd-button\r\n (click)=\"onAddNewCard($event)\"\r\n fdType=\"emphasized\"\r\n class=\"add-card-btn\"\r\n [label]=\"'\u0627\u0641\u0632\u0648\u062F\u0646'\"\r\n ></button>\r\n <fd-icon (mousedown)=\"onCancelNewCard($event)\" glyph=\"decline\"></fd-icon>\r\n </div>\r\n </div>\r\n\r\n <ng-template #addNewCard>\r\n <div class=\"add-new-card\" (click)=\"onInitNewCard(column.$Caption)\">\r\n <span>\r\n <fd-icon glyph=\"add\"></fd-icon>\r\n \u06A9\u0627\u0631\u062A \u062C\u062F\u06CC\u062F\r\n </span>\r\n </div>\r\n </ng-template>\r\n </fd-card-footer>\r\n </fd-card>\r\n</ng-template>\r\n", styles: [":host{display:flex;column-gap:20px;row-gap:20px;flex-wrap:wrap;overflow:auto;padding-bottom:1rem;height:calc(100% - 38.5px)}::-webkit-scrollbar{height:7px;width:7px}::-webkit-scrollbar-track{box-shadow:inset 0 0 2px #d0cece;border-radius:10px}::-webkit-scrollbar-thumb{background:#c8cacb;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#adb0b2}.columns{height:inherit;width:100%;column-gap:15px;flex-wrap:nowrap!important}.column{height:100%;background-color:var(--sapList_Background, #fff)!important}.column.cdk-drag-placeholder{opacity:0}.column>fd-card{overflow-y:hidden;height:100%;box-shadow:none}.column>fd-card fd-card-header{border:none;background:none;padding:1rem 2rem!important}.column>fd-card fd-card-content{flex:1;overflow-y:auto;padding:0 1rem;margin:0;display:flex;flex-direction:column;row-gap:20px}.column>fd-card .column-footer{padding:1rem 1rem 1rem 1.5rem;position:sticky}.column>fd-card .column-footer .new-card{display:flex;flex-direction:column;justify-content:center;row-gap:1rem}.column>fd-card .column-footer .new-card fd-card{padding:0 1rem;background:var(--sapBackgroundColor, #f7f7f7)!important}.column>fd-card .column-footer .new-card textarea{background:var(--sapBackgroundColor, #f7f7f7)!important;border:none}.column>fd-card .column-footer .new-card span{height:auto!important}.column>fd-card .column-footer .new-card .new-card-actions{display:flex;align-items:center;column-gap:10px}.column>fd-card .column-footer .new-card .new-card-actions fd-icon{font-size:1rem}.column>fd-card .column-footer .add-new-card{padding:0 1rem}.column>fd-card .column-footer .add-new-card span{display:flex;column-gap:4px}.newColumn{background-color:var(--sapList_Background, #fff)!important;border-radius:var(--sapElement_BorderCornerRadius, .25rem);align-self:flex-start;height:100px;opacity:.5;display:flex;align-items:center;justify-content:center;border:1px dashed;position:relative;cursor:pointer}.newColumn span{position:absolute}.newColumn .new-column-popover{width:100%}.newColumn .new-column-popover fd-popover-control{width:100%;height:1px}.new-column-popover-body input{border:none}.row{display:flex;align-items:center}.drop-inside{border:1px solid #00f}.drop-inside ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-before{border-top:2px solid #00f}.drop-before ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-after{border-bottom:2px solid #00f}.drop-after ::ng-deep .fd-list__item{background-color:#dce9f6!important}.columns.cdk-drop-list-dragging .column:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4$1.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i4$1.CardHeaderComponent, selector: "fd-card-header", inputs: ["interactive", "tabindex"] }, { kind: "component", type: i4$1.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i4$1.CardTitleDirective, selector: "[fd-card-title]" }, { kind: "component", type: i4$1.CardFooterComponent, selector: "fd-card-footer" }, { kind: "component", type: i5$2.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i6.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class"] }, { kind: "directive", type: i6.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "directive", type: i6.TextareaFormControlDirective, selector: "textarea[fd-form-control]" }, { kind: "component", type: i6.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i4$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i8$1.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i8$1.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "component", type: i9$1.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i9$1.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i10.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i10.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i10.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i10.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "component", type: i9.NoDataComponent, selector: "bsu-no-data" }, { kind: "directive", type: i6$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i13.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i13.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: KanbanCardComponent, selector: "bk-kanban-card", inputs: ["index", "mo", "viewSetting", "allAvailableAssignees"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
398
398
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: KanbanViewComponent, decorators: [{
|
|
399
399
|
type: Component,
|
|
400
|
-
args: [{ selector: 'bk-kanban-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-layout-panel>\n <fd-layout-panel-body [bleed]=\"true\">\n <table fd-table *ngIf=\"isCheckList\">\n <thead fd-table-header>\n <tr fd-table-row>\n <th fd-table-cell>\n <fd-checkbox\n name=\"allCheckbox\"\n [ngModel]=\"allChecked\"\n (ngModelChange)=\"onAllCheckbox($event)\"\n >{{ 'All' | bbbTranslate }}</fd-checkbox\n >\n </th>\n </tr>\n </thead>\n </table>\n </fd-layout-panel-body>\n</fd-layout-panel>\n\n<fd-layout-grid\n *ngIf=\"moDataList?.length; else noData\"\n class=\"columns\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"kanbanColumns\"\n [id]=\"'$Root'\"\n (cdkDropListDropped)=\"onDrop($event, true)\"\n>\n <div\n *ngFor=\"let column of kanbanColumns; let columnIndex = index\"\n [fdLayoutGridCol]=\"12\"\n [colMd]=\"6\"\n [colLg]=\"4\"\n [colXl]=\"3\"\n class=\"column\"\n [id]=\"column.Id\"\n [attr.state]=\"column.$Caption\"\n cdkDrag\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnCard;\n context: {\n column: column,\n columnIndex: columnIndex\n }\n \"\n ></ng-container>\n </div>\n <div\n [fdLayoutGridCol]=\"12\"\n [colMd]=\"6\"\n [colLg]=\"4\"\n [colXl]=\"3\"\n class=\"newColumn\"\n (click)=\"onActiveNewColumnMode()\"\n *ngIf=\"!isNewColumnMode; else newColumnInput\"\n >\n <ng-container>\n <span>\u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F</span>\n </ng-container>\n </div>\n <ng-template #newColumnInput>\n <div [fdLayoutGridCol]=\"12\" [colMd]=\"6\" [colLg]=\"4\" [colXl]=\"3\">\n <input\n #inputEl\n fd-form-control\n type=\"text\"\n autofocus\n (focusout)=\"onCancelNewColumn()\"\n [(ngModel)]=\"newColumn.$Caption\"\n (keydown.enter)=\"onAddNewColumn()\"\n id=\"new-column-name\"\n placeholder=\" \u0646\u0627\u0645\"\n />\n </div>\n </ng-template>\n</fd-layout-grid>\n\n<!--noData-->\n<ng-template #noData>\n <bsu-no-data></bsu-no-data>\n</ng-template>\n\n<!--column card-->\n<ng-template #columnCard let-column=\"column\" let-columnIndex=\"columnIndex\">\n <fd-card cardType=\"quickView\" class=\"docs-flex-item-margin\" ellipsify>\n <fd-card-header>\n <span fd-card-title>{{ column.$Caption }}</span>\n </fd-card-header>\n <fd-card-content\n cdkDropList\n (cdkDropListDropped)=\"onDrop($event)\"\n [cdkDropListSortingDisabled]=\"true\"\n [cdkDropListData]=\"moDataList\"\n >\n <ng-container *ngFor=\"let mo of moDataList; let index = index\">\n <bk-kanban-card\n [mo]=\"mo\"\n [viewSetting]=\"viewSetting\"\n [formSetting]=\"formSetting\"\n [allAvailableAssignees]=\"allAvailableAssignees\"\n [index]=\"index\"\n *ngIf=\"mo[viewSetting.State].$Caption === column.$Caption\"\n [attr.id]=\"mo.Id\"\n [inlineEditMode]=\"true\"\n [isChecked]=\"true\"\n [attr.state]=\"column.$Caption\"\n [attr.index]=\"index\"\n [class.selected]=\"mo.$IsChecked\"\n (cdkDragMoved)=\"onDragMove($event, mo, index, column)\"\n (click)=\"onRowCheck({mo, index})\"\n (dblclick)=\"onRowClick({mo, index})\"\n cdkDrag\n >\n </bk-kanban-card>\n </ng-container>\n </fd-card-content>\n <fd-card-footer class=\"column-footer\">\n <div class=\"new-card\" *ngIf=\"newCard[groupbyProperty] === column.$Caption; else addNewCard\">\n <fd-card>\n <div fd-form-item>\n <textarea\n fd-form-control\n [autofocus]=\"true\"\n [(ngModel)]=\"newCard.$Caption\"\n (keydown.enter)=\"onAddNewCard($event)\"\n (focusout)=\"onNewCardInputFocusout()\"\n [placeholder]=\"'Title' | bbbTranslate\"\n ></textarea>\n </div>\n </fd-card>\n <div class=\"new-card-actions\">\n <button\n fd-button\n (click)=\"onAddNewCard($event)\"\n fdType=\"emphasized\"\n class=\"add-card-btn\"\n [label]=\"'\u0627\u0641\u0632\u0648\u062F\u0646'\"\n ></button>\n <fd-icon (mousedown)=\"onCancelNewCard($event)\" glyph=\"decline\"></fd-icon>\n </div>\n </div>\n\n <ng-template #addNewCard>\n <div class=\"add-new-card\" (click)=\"onInitNewCard(column.$Caption)\">\n <span>\n <fd-icon glyph=\"add\"></fd-icon>\n \u06A9\u0627\u0631\u062A \u062C\u062F\u06CC\u062F\n </span>\n </div>\n </ng-template>\n </fd-card-footer>\n </fd-card>\n</ng-template>\n", styles: [":host{display:flex;column-gap:20px;row-gap:20px;flex-wrap:wrap;overflow:auto;padding-bottom:1rem;height:calc(100% - 38.5px)}::-webkit-scrollbar{height:7px;width:7px}::-webkit-scrollbar-track{box-shadow:inset 0 0 2px #d0cece;border-radius:10px}::-webkit-scrollbar-thumb{background:#c8cacb;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#adb0b2}.columns{height:inherit;width:100%;column-gap:15px;flex-wrap:nowrap!important}.column{height:100%;background-color:var(--sapList_Background, #fff)!important}.column.cdk-drag-placeholder{opacity:0}.column>fd-card{overflow-y:hidden;height:100%;box-shadow:none}.column>fd-card fd-card-header{border:none;background:none;padding:1rem 2rem!important}.column>fd-card fd-card-content{flex:1;overflow-y:auto;padding:0 1rem;margin:0;display:flex;flex-direction:column;row-gap:20px}.column>fd-card .column-footer{padding:1rem 1rem 1rem 1.5rem;position:sticky}.column>fd-card .column-footer .new-card{display:flex;flex-direction:column;justify-content:center;row-gap:1rem}.column>fd-card .column-footer .new-card fd-card{padding:0 1rem;background:var(--sapBackgroundColor, #f7f7f7)!important}.column>fd-card .column-footer .new-card textarea{background:var(--sapBackgroundColor, #f7f7f7)!important;border:none}.column>fd-card .column-footer .new-card span{height:auto!important}.column>fd-card .column-footer .new-card .new-card-actions{display:flex;align-items:center;column-gap:10px}.column>fd-card .column-footer .new-card .new-card-actions fd-icon{font-size:1rem}.column>fd-card .column-footer .add-new-card{padding:0 1rem}.column>fd-card .column-footer .add-new-card span{display:flex;column-gap:4px}.newColumn{background-color:var(--sapList_Background, #fff)!important;border-radius:var(--sapElement_BorderCornerRadius, .25rem);align-self:flex-start;height:100px;opacity:.5;display:flex;align-items:center;justify-content:center;border:1px dashed;position:relative;cursor:pointer}.newColumn span{position:absolute}.newColumn .new-column-popover{width:100%}.newColumn .new-column-popover fd-popover-control{width:100%;height:1px}.new-column-popover-body input{border:none}.row{display:flex;align-items:center}.drop-inside{border:1px solid #00f}.drop-inside ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-before{border-top:2px solid #00f}.drop-before ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-after{border-bottom:2px solid #00f}.drop-after ::ng-deep .fd-list__item{background-color:#dce9f6!important}.columns.cdk-drop-list-dragging .column:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
400
|
+
args: [{ selector: 'bk-kanban-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-layout-panel>\r\n <fd-layout-panel-body [bleed]=\"true\">\r\n <table fd-table *ngIf=\"isCheckList\">\r\n <thead fd-table-header>\r\n <tr fd-table-row>\r\n <th fd-table-cell>\r\n <fd-checkbox\r\n name=\"allCheckbox\"\r\n [ngModel]=\"allChecked\"\r\n (ngModelChange)=\"onAllCheckbox($event)\"\r\n >{{ 'All' | bbbTranslate }}</fd-checkbox\r\n >\r\n </th>\r\n </tr>\r\n </thead>\r\n </table>\r\n </fd-layout-panel-body>\r\n</fd-layout-panel>\r\n\r\n<fd-layout-grid\r\n *ngIf=\"moDataList?.length; else noData\"\r\n class=\"columns\"\r\n cdkDropList\r\n cdkDropListOrientation=\"horizontal\"\r\n [cdkDropListData]=\"kanbanColumns\"\r\n [id]=\"'$Root'\"\r\n (cdkDropListDropped)=\"onDrop($event, true)\"\r\n>\r\n <div\r\n *ngFor=\"let column of kanbanColumns; let columnIndex = index\"\r\n [fdLayoutGridCol]=\"12\"\r\n [colMd]=\"6\"\r\n [colLg]=\"4\"\r\n [colXl]=\"3\"\r\n class=\"column\"\r\n [id]=\"column.Id\"\r\n [attr.state]=\"column.$Caption\"\r\n cdkDrag\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n columnCard;\r\n context: {\r\n column: column,\r\n columnIndex: columnIndex\r\n }\r\n \"\r\n ></ng-container>\r\n </div>\r\n <div\r\n [fdLayoutGridCol]=\"12\"\r\n [colMd]=\"6\"\r\n [colLg]=\"4\"\r\n [colXl]=\"3\"\r\n class=\"newColumn\"\r\n (click)=\"onActiveNewColumnMode()\"\r\n *ngIf=\"!isNewColumnMode; else newColumnInput\"\r\n >\r\n <ng-container>\r\n <span>\u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F</span>\r\n </ng-container>\r\n </div>\r\n <ng-template #newColumnInput>\r\n <div [fdLayoutGridCol]=\"12\" [colMd]=\"6\" [colLg]=\"4\" [colXl]=\"3\">\r\n <input\r\n #inputEl\r\n fd-form-control\r\n type=\"text\"\r\n autofocus\r\n (focusout)=\"onCancelNewColumn()\"\r\n [(ngModel)]=\"newColumn.$Caption\"\r\n (keydown.enter)=\"onAddNewColumn()\"\r\n id=\"new-column-name\"\r\n placeholder=\" \u0646\u0627\u0645\"\r\n />\r\n </div>\r\n </ng-template>\r\n</fd-layout-grid>\r\n\r\n<!--noData-->\r\n<ng-template #noData>\r\n <bsu-no-data></bsu-no-data>\r\n</ng-template>\r\n\r\n<!--column card-->\r\n<ng-template #columnCard let-column=\"column\" let-columnIndex=\"columnIndex\">\r\n <fd-card cardType=\"quickView\" class=\"docs-flex-item-margin\" ellipsify>\r\n <fd-card-header>\r\n <span fd-card-title>{{ column.$Caption }}</span>\r\n </fd-card-header>\r\n <fd-card-content\r\n cdkDropList\r\n (cdkDropListDropped)=\"onDrop($event)\"\r\n [cdkDropListSortingDisabled]=\"true\"\r\n [cdkDropListData]=\"moDataList\"\r\n >\r\n <ng-container *ngFor=\"let mo of moDataList; let index = index\">\r\n <bk-kanban-card\r\n [mo]=\"mo\"\r\n [viewSetting]=\"viewSetting\"\r\n [formSetting]=\"formSetting\"\r\n [allAvailableAssignees]=\"allAvailableAssignees\"\r\n [index]=\"index\"\r\n *ngIf=\"mo[viewSetting.State].$Caption === column.$Caption\"\r\n [attr.id]=\"mo.Id\"\r\n [inlineEditMode]=\"true\"\r\n [isChecked]=\"true\"\r\n [attr.state]=\"column.$Caption\"\r\n [attr.index]=\"index\"\r\n [class.selected]=\"mo.$IsChecked\"\r\n (cdkDragMoved)=\"onDragMove($event, mo, index, column)\"\r\n (click)=\"onRowCheck({mo, index})\"\r\n (dblclick)=\"onRowClick({mo, index})\"\r\n cdkDrag\r\n >\r\n </bk-kanban-card>\r\n </ng-container>\r\n </fd-card-content>\r\n <fd-card-footer class=\"column-footer\">\r\n <div class=\"new-card\" *ngIf=\"newCard[groupbyProperty] === column.$Caption; else addNewCard\">\r\n <fd-card>\r\n <div fd-form-item>\r\n <textarea\r\n fd-form-control\r\n [autofocus]=\"true\"\r\n [(ngModel)]=\"newCard.$Caption\"\r\n (keydown.enter)=\"onAddNewCard($event)\"\r\n (focusout)=\"onNewCardInputFocusout()\"\r\n [placeholder]=\"'Title' | bbbTranslate\"\r\n ></textarea>\r\n </div>\r\n </fd-card>\r\n <div class=\"new-card-actions\">\r\n <button\r\n fd-button\r\n (click)=\"onAddNewCard($event)\"\r\n fdType=\"emphasized\"\r\n class=\"add-card-btn\"\r\n [label]=\"'\u0627\u0641\u0632\u0648\u062F\u0646'\"\r\n ></button>\r\n <fd-icon (mousedown)=\"onCancelNewCard($event)\" glyph=\"decline\"></fd-icon>\r\n </div>\r\n </div>\r\n\r\n <ng-template #addNewCard>\r\n <div class=\"add-new-card\" (click)=\"onInitNewCard(column.$Caption)\">\r\n <span>\r\n <fd-icon glyph=\"add\"></fd-icon>\r\n \u06A9\u0627\u0631\u062A \u062C\u062F\u06CC\u062F\r\n </span>\r\n </div>\r\n </ng-template>\r\n </fd-card-footer>\r\n </fd-card>\r\n</ng-template>\r\n", styles: [":host{display:flex;column-gap:20px;row-gap:20px;flex-wrap:wrap;overflow:auto;padding-bottom:1rem;height:calc(100% - 38.5px)}::-webkit-scrollbar{height:7px;width:7px}::-webkit-scrollbar-track{box-shadow:inset 0 0 2px #d0cece;border-radius:10px}::-webkit-scrollbar-thumb{background:#c8cacb;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#adb0b2}.columns{height:inherit;width:100%;column-gap:15px;flex-wrap:nowrap!important}.column{height:100%;background-color:var(--sapList_Background, #fff)!important}.column.cdk-drag-placeholder{opacity:0}.column>fd-card{overflow-y:hidden;height:100%;box-shadow:none}.column>fd-card fd-card-header{border:none;background:none;padding:1rem 2rem!important}.column>fd-card fd-card-content{flex:1;overflow-y:auto;padding:0 1rem;margin:0;display:flex;flex-direction:column;row-gap:20px}.column>fd-card .column-footer{padding:1rem 1rem 1rem 1.5rem;position:sticky}.column>fd-card .column-footer .new-card{display:flex;flex-direction:column;justify-content:center;row-gap:1rem}.column>fd-card .column-footer .new-card fd-card{padding:0 1rem;background:var(--sapBackgroundColor, #f7f7f7)!important}.column>fd-card .column-footer .new-card textarea{background:var(--sapBackgroundColor, #f7f7f7)!important;border:none}.column>fd-card .column-footer .new-card span{height:auto!important}.column>fd-card .column-footer .new-card .new-card-actions{display:flex;align-items:center;column-gap:10px}.column>fd-card .column-footer .new-card .new-card-actions fd-icon{font-size:1rem}.column>fd-card .column-footer .add-new-card{padding:0 1rem}.column>fd-card .column-footer .add-new-card span{display:flex;column-gap:4px}.newColumn{background-color:var(--sapList_Background, #fff)!important;border-radius:var(--sapElement_BorderCornerRadius, .25rem);align-self:flex-start;height:100px;opacity:.5;display:flex;align-items:center;justify-content:center;border:1px dashed;position:relative;cursor:pointer}.newColumn span{position:absolute}.newColumn .new-column-popover{width:100%}.newColumn .new-column-popover fd-popover-control{width:100%;height:1px}.new-column-popover-body input{border:none}.row{display:flex;align-items:center}.drop-inside{border:1px solid #00f}.drop-inside ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-before{border-top:2px solid #00f}.drop-before ::ng-deep .fd-list__item{background-color:#dce9f6!important}.drop-after{border-bottom:2px solid #00f}.drop-after ::ng-deep .fd-list__item{background-color:#dce9f6!important}.columns.cdk-drop-list-dragging .column:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
401
401
|
}], propDecorators: { inputEl: [{
|
|
402
402
|
type: ViewChild,
|
|
403
403
|
args: ['inputEl', { read: ElementRef }]
|