@seniorsistemas/components-ai 2.5.0 → 2.5.1
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.
|
@@ -3191,6 +3191,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
3191
3191
|
|
|
3192
3192
|
class KanbanBoardComponent {
|
|
3193
3193
|
ngZone;
|
|
3194
|
+
elRef;
|
|
3195
|
+
cdr;
|
|
3194
3196
|
columns = [];
|
|
3195
3197
|
allowReorder = true;
|
|
3196
3198
|
allowDrag = true;
|
|
@@ -3224,6 +3226,8 @@ class KanbanBoardComponent {
|
|
|
3224
3226
|
// Scroll state
|
|
3225
3227
|
hasHorizontalScroll = false;
|
|
3226
3228
|
scrollPosition = 'start';
|
|
3229
|
+
/** Dynamic top offset (in px) for scroll hint buttons so they follow vertical scroll. */
|
|
3230
|
+
scrollHintTopOffset = null;
|
|
3227
3231
|
// Selection state
|
|
3228
3232
|
selectedIds = new Set();
|
|
3229
3233
|
// Auto-scroll during drag
|
|
@@ -3231,8 +3235,10 @@ class KanbanBoardComponent {
|
|
|
3231
3235
|
autoScrollSpeed = 0;
|
|
3232
3236
|
autoScrollRaf = null;
|
|
3233
3237
|
resizeObserver;
|
|
3234
|
-
constructor(ngZone) {
|
|
3238
|
+
constructor(ngZone, elRef, cdr) {
|
|
3235
3239
|
this.ngZone = ngZone;
|
|
3240
|
+
this.elRef = elRef;
|
|
3241
|
+
this.cdr = cdr;
|
|
3236
3242
|
}
|
|
3237
3243
|
ngOnInit() {
|
|
3238
3244
|
this.updateColumnIds();
|
|
@@ -3240,9 +3246,13 @@ class KanbanBoardComponent {
|
|
|
3240
3246
|
ngAfterViewInit() {
|
|
3241
3247
|
if (this.showScrollHints) {
|
|
3242
3248
|
this.checkScroll();
|
|
3249
|
+
this.updateScrollHintPosition();
|
|
3243
3250
|
this.ngZone.runOutsideAngular(() => {
|
|
3244
3251
|
this.resizeObserver = new ResizeObserver(() => {
|
|
3245
|
-
this.ngZone.run(() =>
|
|
3252
|
+
this.ngZone.run(() => {
|
|
3253
|
+
this.checkScroll();
|
|
3254
|
+
this.updateScrollHintPosition();
|
|
3255
|
+
});
|
|
3246
3256
|
});
|
|
3247
3257
|
if (this.scrollContainer?.nativeElement) {
|
|
3248
3258
|
this.resizeObserver.observe(this.scrollContainer.nativeElement);
|
|
@@ -3254,6 +3264,43 @@ class KanbanBoardComponent {
|
|
|
3254
3264
|
this.resizeObserver?.disconnect();
|
|
3255
3265
|
this.stopAutoScroll();
|
|
3256
3266
|
}
|
|
3267
|
+
onWindowScroll() {
|
|
3268
|
+
this.updateScrollHintPosition();
|
|
3269
|
+
}
|
|
3270
|
+
onWindowResize() {
|
|
3271
|
+
this.updateScrollHintPosition();
|
|
3272
|
+
}
|
|
3273
|
+
/**
|
|
3274
|
+
* Calculates the top offset for the scroll hint buttons so they stay visible
|
|
3275
|
+
* as the user scrolls vertically. Uses the board's bounding rect relative to
|
|
3276
|
+
* the viewport to determine the ideal vertical center within the visible area.
|
|
3277
|
+
*/
|
|
3278
|
+
updateScrollHintPosition() {
|
|
3279
|
+
if (!this.showScrollHints || !this.hasHorizontalScroll)
|
|
3280
|
+
return;
|
|
3281
|
+
const boardEl = this.elRef.nativeElement.querySelector('.kanban-board');
|
|
3282
|
+
if (!boardEl)
|
|
3283
|
+
return;
|
|
3284
|
+
const rect = boardEl.getBoundingClientRect();
|
|
3285
|
+
const viewportHeight = window.innerHeight;
|
|
3286
|
+
// Visible portion of the board within the viewport
|
|
3287
|
+
const visibleTop = Math.max(rect.top, 0);
|
|
3288
|
+
const visibleBottom = Math.min(rect.bottom, viewportHeight);
|
|
3289
|
+
const visibleHeight = visibleBottom - visibleTop;
|
|
3290
|
+
if (visibleHeight <= 0) {
|
|
3291
|
+
// Board not visible, no need to update
|
|
3292
|
+
return;
|
|
3293
|
+
}
|
|
3294
|
+
// Center of the visible portion relative to the board's top
|
|
3295
|
+
const visibleCenterInViewport = visibleTop + visibleHeight / 2;
|
|
3296
|
+
const topOffset = visibleCenterInViewport - rect.top;
|
|
3297
|
+
// Apply minimum distance from the board top (e.g., 120px)
|
|
3298
|
+
const minTop = 120;
|
|
3299
|
+
const maxTop = rect.height - 60;
|
|
3300
|
+
const clampedOffset = Math.max(minTop, Math.min(topOffset, maxTop));
|
|
3301
|
+
this.scrollHintTopOffset = clampedOffset;
|
|
3302
|
+
this.cdr.detectChanges();
|
|
3303
|
+
}
|
|
3257
3304
|
ngOnChanges() {
|
|
3258
3305
|
this.updateColumnIds();
|
|
3259
3306
|
setTimeout(() => this.checkScroll(), 50);
|
|
@@ -3435,8 +3482,8 @@ class KanbanBoardComponent {
|
|
|
3435
3482
|
'border-top': column.color ? `3px solid ${column.color}` : '3px solid #dee2e6'
|
|
3436
3483
|
};
|
|
3437
3484
|
}
|
|
3438
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KanbanBoardComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
3439
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: KanbanBoardComponent, isStandalone: true, selector: "sia-kanban-board", inputs: { columns: "columns", allowReorder: "allowReorder", allowDrag: "allowDrag", showAddButton: "showAddButton", showEditButton: "showEditButton", showDeleteButton: "showDeleteButton", canDeleteColumn: "canDeleteColumn", emptyMessage: "emptyMessage", minColumnWidth: "minColumnWidth", maxColumnWidth: "maxColumnWidth", showScrollHints: "showScrollHints", selectable: "selectable" }, outputs: { itemMoved: "itemMoved", itemClicked: "itemClicked", addItem: "addItem", editColumn: "editColumn", deleteColumn: "deleteColumn", selectionChange: "selectionChange" }, queries: [{ propertyName: "columnHeaderTemplate", first: true, predicate: ["columnHeaderTemplate"], descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kanban-board\">\n <!-- Scroll hint arrows -->\n <div class=\"kanban-scroll-controls\" *ngIf=\"showScrollHints && hasHorizontalScroll\">\n <button\n *ngIf=\"scrollPosition !== 'start'\"\n pButton\n type=\"button\"\n icon=\"pi pi-chevron-left\"\n [rounded]=\"true\"\n class=\"scroll-hint scroll-hint-left\"\n (click)=\"scrollLeft()\">\n </button>\n <button\n *ngIf=\"scrollPosition !== 'end'\"\n pButton\n type=\"button\"\n icon=\"pi pi-chevron-right\"\n [rounded]=\"true\"\n class=\"scroll-hint scroll-hint-right\"\n (click)=\"scrollRight()\">\n </button>\n </div>\n\n <!-- Scrollable columns container -->\n <div class=\"kanban-columns\" #scrollContainer (scroll)=\"onScroll()\">\n <div \n *ngFor=\"let column of columns\" \n class=\"kanban-column\"\n [style]=\"getColumnStyle(column)\">\n \n <!-- Column Header -->\n <div class=\"column-header\">\n <!-- Custom header template -->\n <ng-container *ngIf=\"columnHeaderTemplate; else defaultColumnHeader\"\n [ngTemplateOutlet]=\"columnHeaderTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: column }\">\n </ng-container>\n\n <ng-template #defaultColumnHeader>\n <div class=\"column-title\">\n <i *ngIf=\"column.icon\" [class]=\"'pi ' + column.icon\"></i>\n <span>{{ column.title }}</span>\n <span class=\"item-count\">{{ column.items.length }}</span>\n </div>\n <div class=\"column-actions\">\n <button \n *ngIf=\"showAddButton\"\n pButton \n type=\"button\" \n icon=\"pi pi-plus\" \n class=\"p-button-text p-button-sm p-button-rounded\"\n (click)=\"onAddItem(column)\"\n [pTooltip]=\"'Add item'\"\n tooltipPosition=\"top\">\n </button>\n <button \n *ngIf=\"showEditButton\"\n pButton \n type=\"button\" \n icon=\"pi pi-pencil\" \n class=\"p-button-text p-button-sm p-button-rounded\"\n (click)=\"onEditColumn(column)\"\n [pTooltip]=\"'Edit column'\"\n tooltipPosition=\"top\">\n </button>\n <button \n *ngIf=\"canShowDeleteButton(column)\"\n pButton \n type=\"button\" \n icon=\"pi pi-trash\" \n class=\"p-button-text p-button-sm p-button-rounded p-button-danger\"\n (click)=\"onDeleteColumn(column)\"\n [pTooltip]=\"'Delete column'\"\n tooltipPosition=\"top\">\n </button>\n </div>\n </ng-template>\n </div>\n\n <!-- Column Content -->\n <div \n class=\"column-content\"\n cdkDropList\n [id]=\"column.id\"\n [cdkDropListData]=\"column.items\"\n [cdkDropListConnectedTo]=\"columnIds\"\n (cdkDropListDropped)=\"onDrop($event, column)\">\n \n <!-- Items -->\n <div \n *ngFor=\"let item of column.items\"\n class=\"kanban-item\"\n [class.kanban-item--selected]=\"selectable && isSelected(item)\"\n cdkDrag\n [cdkDragDisabled]=\"!allowDrag\"\n (cdkDragMoved)=\"onDragMoved($event)\"\n (cdkDragEnded)=\"onDragEnded()\"\n (click)=\"onItemClick(item)\">\n \n <!-- Custom item template with selection context -->\n <ng-container *ngIf=\"itemTemplate; else defaultItem\"\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"getItemContext(item, column)\">\n </ng-container>\n\n <ng-template #defaultItem>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ item.title }}</div>\n <div *ngIf=\"item.description\" class=\"item-description\">\n {{ item.description }}\n </div>\n <div *ngIf=\"item.tags && item.tags.length > 0\" class=\"item-tags\">\n <p-tag \n *ngFor=\"let tag of item.tags\"\n [value]=\"tag.label\"\n [severity]=\"tag.severity || 'secondary'\"\n styleClass=\"item-tag\">\n </p-tag>\n </div>\n </div>\n </ng-template>\n\n <!-- Drag Placeholder -->\n <div class=\"item-placeholder\" *cdkDragPlaceholder></div>\n </div>\n\n <!-- Empty State -->\n <div *ngIf=\"column.items.length === 0\" class=\"empty-column\">\n <i class=\"pi pi-inbox\"></i>\n <p>{{ emptyMessage }}</p>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".kanban-board{position:relative;width:100%;height:100%;padding:1rem}.kanban-board .kanban-scroll-controls{position:absolute;inset:0;pointer-events:none;z-index:10}.kanban-board .kanban-scroll-controls .scroll-hint{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;box-shadow:0 4px 12px #00000026;transition:all .3s ease}.kanban-board .kanban-scroll-controls .scroll-hint:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 6px 16px #0003}.kanban-board .kanban-scroll-controls .scroll-hint.scroll-hint-left{left:.5rem}.kanban-board .kanban-scroll-controls .scroll-hint.scroll-hint-right{right:.5rem}.kanban-board .kanban-columns{display:flex;gap:1rem;min-height:500px;padding-bottom:1rem;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.kanban-board .kanban-columns::-webkit-scrollbar{height:6px}.kanban-board .kanban-columns::-webkit-scrollbar-track{background:transparent}.kanban-board .kanban-columns::-webkit-scrollbar-thumb{background:#94a3b84d;border-radius:3px}.kanban-board .kanban-columns::-webkit-scrollbar-thumb:hover{background:#94a3b880}.kanban-board .kanban-column{flex-shrink:0;display:flex;flex-direction:column;background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a}.kanban-board .kanban-column .column-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e9ecef;background:#fafbfc;border-radius:8px 8px 0 0}.kanban-board .kanban-column .column-header .column-title{display:flex;align-items:center;gap:.5rem;font-weight:600;color:#2c3e50;font-size:.95rem}.kanban-board .kanban-column .column-header .column-title .pi{font-size:.875rem;color:#6c757d}.kanban-board .kanban-column .column-header .column-title .item-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 .5rem;background:#e9ecef;border-radius:12px;font-size:.75rem;font-weight:600;color:#495057}.kanban-board .kanban-column .column-header .column-actions{display:flex;gap:.25rem}.kanban-board .kanban-column .column-content{flex:1;padding:.75rem;overflow-y:auto;min-height:200px}.kanban-board .kanban-column .column-content .kanban-item{background:#fff;border:1px solid #e9ecef;border-radius:6px;padding:.875rem;margin-bottom:.75rem;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.kanban-board .kanban-column .column-content .kanban-item:hover{border-color:#007bff;box-shadow:0 2px 8px #007bff26;transform:translateY(-1px)}.kanban-board .kanban-column .column-content .kanban-item:last-child{margin-bottom:0}.kanban-board .kanban-column .column-content .kanban-item.kanban-item--selected{border-left:3px solid #007bff;background:#f0f7ff}.kanban-board .kanban-column .column-content .kanban-item .item-content .item-title{font-weight:500;color:#2c3e50;font-size:.875rem;margin-bottom:.5rem;line-height:1.4}.kanban-board .kanban-column .column-content .kanban-item .item-content .item-description{font-size:.8rem;color:#6c757d;margin-bottom:.5rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.kanban-board .kanban-column .column-content .kanban-item .item-content .item-tags{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.kanban-board .kanban-column .column-content .kanban-item .item-content .item-tags ::ng-deep .item-tag{font-size:.7rem;padding:.25rem .5rem}.kanban-board .kanban-column .column-content .kanban-item .item-placeholder{background:#e9ecef;border:2px dashed #adb5bd;border-radius:6px;min-height:80px}.kanban-board .kanban-column .column-content .empty-column{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;color:#adb5bd;text-align:center}.kanban-board .kanban-column .column-content .empty-column .pi{font-size:2.5rem;margin-bottom:.5rem;opacity:.5}.kanban-board .kanban-column .column-content .empty-column p{font-size:.875rem;margin:0}::ng-deep .cdk-drag-preview{background:#fff;border:1px solid #007bff;border-radius:6px;padding:.875rem;box-shadow:0 4px 12px #007bff4d;opacity:.9;cursor:grabbing}::ng-deep .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .cdk-drop-list-dragging .kanban-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}@media (max-width: 768px){.kanban-board .kanban-columns{flex-direction:column}.kanban-board .kanban-column{min-width:100%!important;max-width:100%!important}.kanban-board .kanban-scroll-controls{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i6.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
|
|
3485
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KanbanBoardComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3486
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: KanbanBoardComponent, isStandalone: true, selector: "sia-kanban-board", inputs: { columns: "columns", allowReorder: "allowReorder", allowDrag: "allowDrag", showAddButton: "showAddButton", showEditButton: "showEditButton", showDeleteButton: "showDeleteButton", canDeleteColumn: "canDeleteColumn", emptyMessage: "emptyMessage", minColumnWidth: "minColumnWidth", maxColumnWidth: "maxColumnWidth", showScrollHints: "showScrollHints", selectable: "selectable" }, outputs: { itemMoved: "itemMoved", itemClicked: "itemClicked", addItem: "addItem", editColumn: "editColumn", deleteColumn: "deleteColumn", selectionChange: "selectionChange" }, host: { listeners: { "window:scroll": "onWindowScroll()", "window:resize": "onWindowResize()" } }, queries: [{ propertyName: "columnHeaderTemplate", first: true, predicate: ["columnHeaderTemplate"], descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kanban-board\">\n <!-- Scroll hint arrows -->\n <div class=\"kanban-scroll-controls\" *ngIf=\"showScrollHints && hasHorizontalScroll\">\n <button\n *ngIf=\"scrollPosition !== 'start'\"\n pButton\n type=\"button\"\n icon=\"pi pi-chevron-left\"\n [rounded]=\"true\"\n class=\"scroll-hint scroll-hint-left\"\n [style.top.px]=\"scrollHintTopOffset\"\n (click)=\"scrollLeft()\">\n </button>\n <button\n *ngIf=\"scrollPosition !== 'end'\"\n pButton\n type=\"button\"\n icon=\"pi pi-chevron-right\"\n [rounded]=\"true\"\n class=\"scroll-hint scroll-hint-right\"\n [style.top.px]=\"scrollHintTopOffset\"\n (click)=\"scrollRight()\">\n </button>\n </div>\n\n <!-- Scrollable columns container -->\n <div class=\"kanban-columns\" #scrollContainer (scroll)=\"onScroll()\">\n <div \n *ngFor=\"let column of columns\" \n class=\"kanban-column\"\n [style]=\"getColumnStyle(column)\">\n \n <!-- Column Header -->\n <div class=\"column-header\">\n <!-- Custom header template -->\n <ng-container *ngIf=\"columnHeaderTemplate; else defaultColumnHeader\"\n [ngTemplateOutlet]=\"columnHeaderTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: column }\">\n </ng-container>\n\n <ng-template #defaultColumnHeader>\n <div class=\"column-title\">\n <i *ngIf=\"column.icon\" [class]=\"'pi ' + column.icon\"></i>\n <span>{{ column.title }}</span>\n <span class=\"item-count\">{{ column.items.length }}</span>\n </div>\n <div class=\"column-actions\">\n <button \n *ngIf=\"showAddButton\"\n pButton \n type=\"button\" \n icon=\"pi pi-plus\" \n class=\"p-button-text p-button-sm p-button-rounded\"\n (click)=\"onAddItem(column)\"\n [pTooltip]=\"'Add item'\"\n tooltipPosition=\"top\">\n </button>\n <button \n *ngIf=\"showEditButton\"\n pButton \n type=\"button\" \n icon=\"pi pi-pencil\" \n class=\"p-button-text p-button-sm p-button-rounded\"\n (click)=\"onEditColumn(column)\"\n [pTooltip]=\"'Edit column'\"\n tooltipPosition=\"top\">\n </button>\n <button \n *ngIf=\"canShowDeleteButton(column)\"\n pButton \n type=\"button\" \n icon=\"pi pi-trash\" \n class=\"p-button-text p-button-sm p-button-rounded p-button-danger\"\n (click)=\"onDeleteColumn(column)\"\n [pTooltip]=\"'Delete column'\"\n tooltipPosition=\"top\">\n </button>\n </div>\n </ng-template>\n </div>\n\n <!-- Column Content -->\n <div \n class=\"column-content\"\n cdkDropList\n [id]=\"column.id\"\n [cdkDropListData]=\"column.items\"\n [cdkDropListConnectedTo]=\"columnIds\"\n (cdkDropListDropped)=\"onDrop($event, column)\">\n \n <!-- Items -->\n <div \n *ngFor=\"let item of column.items\"\n class=\"kanban-item\"\n [class.kanban-item--selected]=\"selectable && isSelected(item)\"\n cdkDrag\n [cdkDragDisabled]=\"!allowDrag\"\n (cdkDragMoved)=\"onDragMoved($event)\"\n (cdkDragEnded)=\"onDragEnded()\"\n (click)=\"onItemClick(item)\">\n \n <!-- Custom item template with selection context -->\n <ng-container *ngIf=\"itemTemplate; else defaultItem\"\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"getItemContext(item, column)\">\n </ng-container>\n\n <ng-template #defaultItem>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ item.title }}</div>\n <div *ngIf=\"item.description\" class=\"item-description\">\n {{ item.description }}\n </div>\n <div *ngIf=\"item.tags && item.tags.length > 0\" class=\"item-tags\">\n <p-tag \n *ngFor=\"let tag of item.tags\"\n [value]=\"tag.label\"\n [severity]=\"tag.severity || 'secondary'\"\n styleClass=\"item-tag\">\n </p-tag>\n </div>\n </div>\n </ng-template>\n\n <!-- Drag Placeholder -->\n <div class=\"item-placeholder\" *cdkDragPlaceholder></div>\n </div>\n\n <!-- Empty State -->\n <div *ngIf=\"column.items.length === 0\" class=\"empty-column\">\n <i class=\"pi pi-inbox\"></i>\n <p>{{ emptyMessage }}</p>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".kanban-board{position:relative;width:100%;height:100%;padding:1rem}.kanban-board .kanban-scroll-controls{position:absolute;inset:0;pointer-events:none;z-index:10}.kanban-board .kanban-scroll-controls .scroll-hint{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;box-shadow:0 4px 12px #00000026;transition:box-shadow .3s ease,transform .15s ease}.kanban-board .kanban-scroll-controls .scroll-hint:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 6px 16px #0003}.kanban-board .kanban-scroll-controls .scroll-hint.scroll-hint-left{left:.5rem}.kanban-board .kanban-scroll-controls .scroll-hint.scroll-hint-right{right:.5rem}.kanban-board .kanban-columns{display:flex;gap:1rem;min-height:500px;padding-bottom:1rem;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.kanban-board .kanban-columns::-webkit-scrollbar{height:6px}.kanban-board .kanban-columns::-webkit-scrollbar-track{background:transparent}.kanban-board .kanban-columns::-webkit-scrollbar-thumb{background:#94a3b84d;border-radius:3px}.kanban-board .kanban-columns::-webkit-scrollbar-thumb:hover{background:#94a3b880}.kanban-board .kanban-column{flex-shrink:0;display:flex;flex-direction:column;background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a}.kanban-board .kanban-column .column-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e9ecef;background:#fafbfc;border-radius:8px 8px 0 0}.kanban-board .kanban-column .column-header .column-title{display:flex;align-items:center;gap:.5rem;font-weight:600;color:#2c3e50;font-size:.95rem}.kanban-board .kanban-column .column-header .column-title .pi{font-size:.875rem;color:#6c757d}.kanban-board .kanban-column .column-header .column-title .item-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 .5rem;background:#e9ecef;border-radius:12px;font-size:.75rem;font-weight:600;color:#495057}.kanban-board .kanban-column .column-header .column-actions{display:flex;gap:.25rem}.kanban-board .kanban-column .column-content{flex:1;padding:.75rem;overflow-y:auto;min-height:200px}.kanban-board .kanban-column .column-content .kanban-item{background:#fff;border:1px solid #e9ecef;border-radius:6px;padding:.875rem;margin-bottom:.75rem;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.kanban-board .kanban-column .column-content .kanban-item:hover{border-color:#007bff;box-shadow:0 2px 8px #007bff26;transform:translateY(-1px)}.kanban-board .kanban-column .column-content .kanban-item:last-child{margin-bottom:0}.kanban-board .kanban-column .column-content .kanban-item.kanban-item--selected{border-left:3px solid #007bff;background:#f0f7ff}.kanban-board .kanban-column .column-content .kanban-item .item-content .item-title{font-weight:500;color:#2c3e50;font-size:.875rem;margin-bottom:.5rem;line-height:1.4}.kanban-board .kanban-column .column-content .kanban-item .item-content .item-description{font-size:.8rem;color:#6c757d;margin-bottom:.5rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.kanban-board .kanban-column .column-content .kanban-item .item-content .item-tags{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.kanban-board .kanban-column .column-content .kanban-item .item-content .item-tags ::ng-deep .item-tag{font-size:.7rem;padding:.25rem .5rem}.kanban-board .kanban-column .column-content .kanban-item .item-placeholder{background:#e9ecef;border:2px dashed #adb5bd;border-radius:6px;min-height:80px}.kanban-board .kanban-column .column-content .empty-column{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;color:#adb5bd;text-align:center}.kanban-board .kanban-column .column-content .empty-column .pi{font-size:2.5rem;margin-bottom:.5rem;opacity:.5}.kanban-board .kanban-column .column-content .empty-column p{font-size:.875rem;margin:0}::ng-deep .cdk-drag-preview{background:#fff;border:1px solid #007bff;border-radius:6px;padding:.875rem;box-shadow:0 4px 12px #007bff4d;opacity:.9;cursor:grabbing}::ng-deep .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .cdk-drop-list-dragging .kanban-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}@media (max-width: 768px){.kanban-board .kanban-columns{flex-direction:column}.kanban-board .kanban-column{min-width:100%!important;max-width:100%!important}.kanban-board .kanban-scroll-controls{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i6.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
|
|
3440
3487
|
}
|
|
3441
3488
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KanbanBoardComponent, decorators: [{
|
|
3442
3489
|
type: Component,
|
|
@@ -3447,8 +3494,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
3447
3494
|
CardModule,
|
|
3448
3495
|
TagModule,
|
|
3449
3496
|
TooltipModule
|
|
3450
|
-
], template: "<div class=\"kanban-board\">\n <!-- Scroll hint arrows -->\n <div class=\"kanban-scroll-controls\" *ngIf=\"showScrollHints && hasHorizontalScroll\">\n <button\n *ngIf=\"scrollPosition !== 'start'\"\n pButton\n type=\"button\"\n icon=\"pi pi-chevron-left\"\n [rounded]=\"true\"\n class=\"scroll-hint scroll-hint-left\"\n (click)=\"scrollLeft()\">\n </button>\n <button\n *ngIf=\"scrollPosition !== 'end'\"\n pButton\n type=\"button\"\n icon=\"pi pi-chevron-right\"\n [rounded]=\"true\"\n class=\"scroll-hint scroll-hint-right\"\n (click)=\"scrollRight()\">\n </button>\n </div>\n\n <!-- Scrollable columns container -->\n <div class=\"kanban-columns\" #scrollContainer (scroll)=\"onScroll()\">\n <div \n *ngFor=\"let column of columns\" \n class=\"kanban-column\"\n [style]=\"getColumnStyle(column)\">\n \n <!-- Column Header -->\n <div class=\"column-header\">\n <!-- Custom header template -->\n <ng-container *ngIf=\"columnHeaderTemplate; else defaultColumnHeader\"\n [ngTemplateOutlet]=\"columnHeaderTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: column }\">\n </ng-container>\n\n <ng-template #defaultColumnHeader>\n <div class=\"column-title\">\n <i *ngIf=\"column.icon\" [class]=\"'pi ' + column.icon\"></i>\n <span>{{ column.title }}</span>\n <span class=\"item-count\">{{ column.items.length }}</span>\n </div>\n <div class=\"column-actions\">\n <button \n *ngIf=\"showAddButton\"\n pButton \n type=\"button\" \n icon=\"pi pi-plus\" \n class=\"p-button-text p-button-sm p-button-rounded\"\n (click)=\"onAddItem(column)\"\n [pTooltip]=\"'Add item'\"\n tooltipPosition=\"top\">\n </button>\n <button \n *ngIf=\"showEditButton\"\n pButton \n type=\"button\" \n icon=\"pi pi-pencil\" \n class=\"p-button-text p-button-sm p-button-rounded\"\n (click)=\"onEditColumn(column)\"\n [pTooltip]=\"'Edit column'\"\n tooltipPosition=\"top\">\n </button>\n <button \n *ngIf=\"canShowDeleteButton(column)\"\n pButton \n type=\"button\" \n icon=\"pi pi-trash\" \n class=\"p-button-text p-button-sm p-button-rounded p-button-danger\"\n (click)=\"onDeleteColumn(column)\"\n [pTooltip]=\"'Delete column'\"\n tooltipPosition=\"top\">\n </button>\n </div>\n </ng-template>\n </div>\n\n <!-- Column Content -->\n <div \n class=\"column-content\"\n cdkDropList\n [id]=\"column.id\"\n [cdkDropListData]=\"column.items\"\n [cdkDropListConnectedTo]=\"columnIds\"\n (cdkDropListDropped)=\"onDrop($event, column)\">\n \n <!-- Items -->\n <div \n *ngFor=\"let item of column.items\"\n class=\"kanban-item\"\n [class.kanban-item--selected]=\"selectable && isSelected(item)\"\n cdkDrag\n [cdkDragDisabled]=\"!allowDrag\"\n (cdkDragMoved)=\"onDragMoved($event)\"\n (cdkDragEnded)=\"onDragEnded()\"\n (click)=\"onItemClick(item)\">\n \n <!-- Custom item template with selection context -->\n <ng-container *ngIf=\"itemTemplate; else defaultItem\"\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"getItemContext(item, column)\">\n </ng-container>\n\n <ng-template #defaultItem>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ item.title }}</div>\n <div *ngIf=\"item.description\" class=\"item-description\">\n {{ item.description }}\n </div>\n <div *ngIf=\"item.tags && item.tags.length > 0\" class=\"item-tags\">\n <p-tag \n *ngFor=\"let tag of item.tags\"\n [value]=\"tag.label\"\n [severity]=\"tag.severity || 'secondary'\"\n styleClass=\"item-tag\">\n </p-tag>\n </div>\n </div>\n </ng-template>\n\n <!-- Drag Placeholder -->\n <div class=\"item-placeholder\" *cdkDragPlaceholder></div>\n </div>\n\n <!-- Empty State -->\n <div *ngIf=\"column.items.length === 0\" class=\"empty-column\">\n <i class=\"pi pi-inbox\"></i>\n <p>{{ emptyMessage }}</p>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".kanban-board{position:relative;width:100%;height:100%;padding:1rem}.kanban-board .kanban-scroll-controls{position:absolute;inset:0;pointer-events:none;z-index:10}.kanban-board .kanban-scroll-controls .scroll-hint{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;box-shadow:0 4px 12px #00000026;transition:
|
|
3451
|
-
}], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { columns: [{
|
|
3497
|
+
], template: "<div class=\"kanban-board\">\n <!-- Scroll hint arrows -->\n <div class=\"kanban-scroll-controls\" *ngIf=\"showScrollHints && hasHorizontalScroll\">\n <button\n *ngIf=\"scrollPosition !== 'start'\"\n pButton\n type=\"button\"\n icon=\"pi pi-chevron-left\"\n [rounded]=\"true\"\n class=\"scroll-hint scroll-hint-left\"\n [style.top.px]=\"scrollHintTopOffset\"\n (click)=\"scrollLeft()\">\n </button>\n <button\n *ngIf=\"scrollPosition !== 'end'\"\n pButton\n type=\"button\"\n icon=\"pi pi-chevron-right\"\n [rounded]=\"true\"\n class=\"scroll-hint scroll-hint-right\"\n [style.top.px]=\"scrollHintTopOffset\"\n (click)=\"scrollRight()\">\n </button>\n </div>\n\n <!-- Scrollable columns container -->\n <div class=\"kanban-columns\" #scrollContainer (scroll)=\"onScroll()\">\n <div \n *ngFor=\"let column of columns\" \n class=\"kanban-column\"\n [style]=\"getColumnStyle(column)\">\n \n <!-- Column Header -->\n <div class=\"column-header\">\n <!-- Custom header template -->\n <ng-container *ngIf=\"columnHeaderTemplate; else defaultColumnHeader\"\n [ngTemplateOutlet]=\"columnHeaderTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: column }\">\n </ng-container>\n\n <ng-template #defaultColumnHeader>\n <div class=\"column-title\">\n <i *ngIf=\"column.icon\" [class]=\"'pi ' + column.icon\"></i>\n <span>{{ column.title }}</span>\n <span class=\"item-count\">{{ column.items.length }}</span>\n </div>\n <div class=\"column-actions\">\n <button \n *ngIf=\"showAddButton\"\n pButton \n type=\"button\" \n icon=\"pi pi-plus\" \n class=\"p-button-text p-button-sm p-button-rounded\"\n (click)=\"onAddItem(column)\"\n [pTooltip]=\"'Add item'\"\n tooltipPosition=\"top\">\n </button>\n <button \n *ngIf=\"showEditButton\"\n pButton \n type=\"button\" \n icon=\"pi pi-pencil\" \n class=\"p-button-text p-button-sm p-button-rounded\"\n (click)=\"onEditColumn(column)\"\n [pTooltip]=\"'Edit column'\"\n tooltipPosition=\"top\">\n </button>\n <button \n *ngIf=\"canShowDeleteButton(column)\"\n pButton \n type=\"button\" \n icon=\"pi pi-trash\" \n class=\"p-button-text p-button-sm p-button-rounded p-button-danger\"\n (click)=\"onDeleteColumn(column)\"\n [pTooltip]=\"'Delete column'\"\n tooltipPosition=\"top\">\n </button>\n </div>\n </ng-template>\n </div>\n\n <!-- Column Content -->\n <div \n class=\"column-content\"\n cdkDropList\n [id]=\"column.id\"\n [cdkDropListData]=\"column.items\"\n [cdkDropListConnectedTo]=\"columnIds\"\n (cdkDropListDropped)=\"onDrop($event, column)\">\n \n <!-- Items -->\n <div \n *ngFor=\"let item of column.items\"\n class=\"kanban-item\"\n [class.kanban-item--selected]=\"selectable && isSelected(item)\"\n cdkDrag\n [cdkDragDisabled]=\"!allowDrag\"\n (cdkDragMoved)=\"onDragMoved($event)\"\n (cdkDragEnded)=\"onDragEnded()\"\n (click)=\"onItemClick(item)\">\n \n <!-- Custom item template with selection context -->\n <ng-container *ngIf=\"itemTemplate; else defaultItem\"\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"getItemContext(item, column)\">\n </ng-container>\n\n <ng-template #defaultItem>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ item.title }}</div>\n <div *ngIf=\"item.description\" class=\"item-description\">\n {{ item.description }}\n </div>\n <div *ngIf=\"item.tags && item.tags.length > 0\" class=\"item-tags\">\n <p-tag \n *ngFor=\"let tag of item.tags\"\n [value]=\"tag.label\"\n [severity]=\"tag.severity || 'secondary'\"\n styleClass=\"item-tag\">\n </p-tag>\n </div>\n </div>\n </ng-template>\n\n <!-- Drag Placeholder -->\n <div class=\"item-placeholder\" *cdkDragPlaceholder></div>\n </div>\n\n <!-- Empty State -->\n <div *ngIf=\"column.items.length === 0\" class=\"empty-column\">\n <i class=\"pi pi-inbox\"></i>\n <p>{{ emptyMessage }}</p>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".kanban-board{position:relative;width:100%;height:100%;padding:1rem}.kanban-board .kanban-scroll-controls{position:absolute;inset:0;pointer-events:none;z-index:10}.kanban-board .kanban-scroll-controls .scroll-hint{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;box-shadow:0 4px 12px #00000026;transition:box-shadow .3s ease,transform .15s ease}.kanban-board .kanban-scroll-controls .scroll-hint:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 6px 16px #0003}.kanban-board .kanban-scroll-controls .scroll-hint.scroll-hint-left{left:.5rem}.kanban-board .kanban-scroll-controls .scroll-hint.scroll-hint-right{right:.5rem}.kanban-board .kanban-columns{display:flex;gap:1rem;min-height:500px;padding-bottom:1rem;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.kanban-board .kanban-columns::-webkit-scrollbar{height:6px}.kanban-board .kanban-columns::-webkit-scrollbar-track{background:transparent}.kanban-board .kanban-columns::-webkit-scrollbar-thumb{background:#94a3b84d;border-radius:3px}.kanban-board .kanban-columns::-webkit-scrollbar-thumb:hover{background:#94a3b880}.kanban-board .kanban-column{flex-shrink:0;display:flex;flex-direction:column;background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a}.kanban-board .kanban-column .column-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e9ecef;background:#fafbfc;border-radius:8px 8px 0 0}.kanban-board .kanban-column .column-header .column-title{display:flex;align-items:center;gap:.5rem;font-weight:600;color:#2c3e50;font-size:.95rem}.kanban-board .kanban-column .column-header .column-title .pi{font-size:.875rem;color:#6c757d}.kanban-board .kanban-column .column-header .column-title .item-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 .5rem;background:#e9ecef;border-radius:12px;font-size:.75rem;font-weight:600;color:#495057}.kanban-board .kanban-column .column-header .column-actions{display:flex;gap:.25rem}.kanban-board .kanban-column .column-content{flex:1;padding:.75rem;overflow-y:auto;min-height:200px}.kanban-board .kanban-column .column-content .kanban-item{background:#fff;border:1px solid #e9ecef;border-radius:6px;padding:.875rem;margin-bottom:.75rem;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.kanban-board .kanban-column .column-content .kanban-item:hover{border-color:#007bff;box-shadow:0 2px 8px #007bff26;transform:translateY(-1px)}.kanban-board .kanban-column .column-content .kanban-item:last-child{margin-bottom:0}.kanban-board .kanban-column .column-content .kanban-item.kanban-item--selected{border-left:3px solid #007bff;background:#f0f7ff}.kanban-board .kanban-column .column-content .kanban-item .item-content .item-title{font-weight:500;color:#2c3e50;font-size:.875rem;margin-bottom:.5rem;line-height:1.4}.kanban-board .kanban-column .column-content .kanban-item .item-content .item-description{font-size:.8rem;color:#6c757d;margin-bottom:.5rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.kanban-board .kanban-column .column-content .kanban-item .item-content .item-tags{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.kanban-board .kanban-column .column-content .kanban-item .item-content .item-tags ::ng-deep .item-tag{font-size:.7rem;padding:.25rem .5rem}.kanban-board .kanban-column .column-content .kanban-item .item-placeholder{background:#e9ecef;border:2px dashed #adb5bd;border-radius:6px;min-height:80px}.kanban-board .kanban-column .column-content .empty-column{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;color:#adb5bd;text-align:center}.kanban-board .kanban-column .column-content .empty-column .pi{font-size:2.5rem;margin-bottom:.5rem;opacity:.5}.kanban-board .kanban-column .column-content .empty-column p{font-size:.875rem;margin:0}::ng-deep .cdk-drag-preview{background:#fff;border:1px solid #007bff;border-radius:6px;padding:.875rem;box-shadow:0 4px 12px #007bff4d;opacity:.9;cursor:grabbing}::ng-deep .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .cdk-drop-list-dragging .kanban-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}@media (max-width: 768px){.kanban-board .kanban-columns{flex-direction:column}.kanban-board .kanban-column{min-width:100%!important;max-width:100%!important}.kanban-board .kanban-scroll-controls{display:none}}\n"] }]
|
|
3498
|
+
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
|
|
3452
3499
|
type: Input
|
|
3453
3500
|
}], allowReorder: [{
|
|
3454
3501
|
type: Input
|
|
@@ -3493,6 +3540,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
3493
3540
|
}], scrollContainer: [{
|
|
3494
3541
|
type: ViewChild,
|
|
3495
3542
|
args: ['scrollContainer', { static: false }]
|
|
3543
|
+
}], onWindowScroll: [{
|
|
3544
|
+
type: HostListener,
|
|
3545
|
+
args: ['window:scroll']
|
|
3546
|
+
}], onWindowResize: [{
|
|
3547
|
+
type: HostListener,
|
|
3548
|
+
args: ['window:resize']
|
|
3496
3549
|
}] } });
|
|
3497
3550
|
|
|
3498
3551
|
class StepsComponent {
|