kanban-view-lib
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.
109 lines (101 loc) • 9.82 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/cdk/drag-drop';
import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
class KanbanViewLibService {
constructor() { }
}
KanbanViewLibService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KanbanViewLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
KanbanViewLibService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KanbanViewLibService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KanbanViewLibService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
class KanbanViewLibComponent {
}
KanbanViewLibComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KanbanViewLibComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
KanbanViewLibComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: KanbanViewLibComponent, selector: "lib-kanban-view-lib", ngImport: i0, template: `
<p>
kanban-view-lib works!
</p>
`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KanbanViewLibComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-kanban-view-lib', template: `
<p>
kanban-view-lib works!
</p>
` }]
}] });
class KanbanViewComponent {
drop(event) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
}
else {
transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
}
}
getTaskBorderClass(task) {
if (task.tags.includes('Bug')) {
return 'border-bug';
}
else if (task.tags.includes('Feature')) {
return 'border-feature';
}
else if (task.tags.includes('Story')) {
return 'border-story';
}
return 'border-default'; // Default color
}
}
KanbanViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KanbanViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
KanbanViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: KanbanViewComponent, selector: "lib-kanban-view", inputs: { items: "items" }, ngImport: i0, template: "<div cdkDropListGroup class=\"kanban-board\">\n <div class=\"kanban-column\" *ngFor=\"let list of items\">\n <h2 class=\"column-header\"> {{ list.name }}</h2>\n \n <div\n cdkDropList\n [cdkDropListData]=\"list.tasks\"\n class=\"task-list\"\n (cdkDropListDropped)=\"drop($event)\">\n \n <div class=\"task-card\" [ngClass]=\"getTaskBorderClass(task)\" *ngFor=\"let task of list.tasks\" cdkDrag>\n <h3>Task - {{ task.id }}</h3>\n <p>{{ task.title }}</p>\n <div class=\"task-tags\">\n <span *ngFor=\"let tag of task.tags\" class=\"tag\">{{ tag }}</span>\n </div>\n <div class=\"assignee\">\n <span class=\"avatar\">{{ task.assignee }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n ", styles: [".kanban-board{display:flex;gap:15px;overflow-x:auto}.kanban-column{background:#f4f4f4;border-radius:8px;padding:10px;width:250px;min-width:250px}.column-header{background:#ddd;padding:10px;border-radius:5px;text-align:center}.task-list{min-height:100px}.task-card{background:white;padding:10px;border-radius:5px;margin-bottom:10px;box-shadow:0 2px 4px #0000001a;border-left:5px solid #ddd}.task-tags{display:flex;gap:5px;margin-top:5px}.tag{background:lightgray;padding:3px 8px;border-radius:4px;font-size:12px}.assignee{display:flex;justify-content:flex-end;margin-top:10px}.avatar{background:#ccc;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%}.border-bug{border-left-color:red}.border-feature{border-left-color:#00f}.border-story{border-left-color:green}.border-default{border-left-color:gray}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i1.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: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KanbanViewComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-kanban-view', template: "<div cdkDropListGroup class=\"kanban-board\">\n <div class=\"kanban-column\" *ngFor=\"let list of items\">\n <h2 class=\"column-header\"> {{ list.name }}</h2>\n \n <div\n cdkDropList\n [cdkDropListData]=\"list.tasks\"\n class=\"task-list\"\n (cdkDropListDropped)=\"drop($event)\">\n \n <div class=\"task-card\" [ngClass]=\"getTaskBorderClass(task)\" *ngFor=\"let task of list.tasks\" cdkDrag>\n <h3>Task - {{ task.id }}</h3>\n <p>{{ task.title }}</p>\n <div class=\"task-tags\">\n <span *ngFor=\"let tag of task.tags\" class=\"tag\">{{ tag }}</span>\n </div>\n <div class=\"assignee\">\n <span class=\"avatar\">{{ task.assignee }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n ", styles: [".kanban-board{display:flex;gap:15px;overflow-x:auto}.kanban-column{background:#f4f4f4;border-radius:8px;padding:10px;width:250px;min-width:250px}.column-header{background:#ddd;padding:10px;border-radius:5px;text-align:center}.task-list{min-height:100px}.task-card{background:white;padding:10px;border-radius:5px;margin-bottom:10px;box-shadow:0 2px 4px #0000001a;border-left:5px solid #ddd}.task-tags{display:flex;gap:5px;margin-top:5px}.tag{background:lightgray;padding:3px 8px;border-radius:4px;font-size:12px}.assignee{display:flex;justify-content:flex-end;margin-top:10px}.avatar{background:#ccc;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%}.border-bug{border-left-color:red}.border-feature{border-left-color:#00f}.border-story{border-left-color:green}.border-default{border-left-color:gray}\n"] }]
}], propDecorators: { items: [{
type: Input
}] } });
class KanbanViewLibModule {
}
KanbanViewLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KanbanViewLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
KanbanViewLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: KanbanViewLibModule, declarations: [KanbanViewLibComponent,
KanbanViewComponent], imports: [DragDropModule,
MatIconModule,
CommonModule], exports: [KanbanViewLibComponent,
KanbanViewComponent] });
KanbanViewLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KanbanViewLibModule, imports: [DragDropModule,
MatIconModule,
CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KanbanViewLibModule, decorators: [{
type: NgModule,
args: [{
declarations: [
KanbanViewLibComponent,
KanbanViewComponent
],
imports: [
DragDropModule,
MatIconModule,
CommonModule
],
exports: [
KanbanViewLibComponent,
KanbanViewComponent
]
}]
}] });
/*
* Public API Surface of kanban-view-lib
*/
/**
* Generated bundle index. Do not edit.
*/
export { KanbanViewComponent, KanbanViewLibComponent, KanbanViewLibModule, KanbanViewLibService };
//# sourceMappingURL=kanban-view-lib.mjs.map