@seniorsistemas/angular-components 19.7.3 → 19.7.4-fix-sds-577-afa523ed

package/fesm2022/seniorsistemas-angular-components-kanban.mjs

@@ -1,22 +1,16 @@
-import * as i2$2 from '@angular/cdk/drag-drop';
-import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
+import { moveItemInArray, transferArrayItem, CdkDropList, CdkDrag, CdkDragPreview, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
 import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, inject, Component, Input, Output, ContentChildren, NgModule } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { TemplateDirective, TemplateModule } from '@seniorsistemas/angular-components/template';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
+import { NgTemplateOutlet, NgClass } from '@angular/common';
+import * as i1 from '@angular/forms';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3 from '@seniorsistemas/angular-components/tiered-menu';
-import { TieredMenuModule } from '@seniorsistemas/angular-components/tiered-menu';
-import * as i3$1 from '@seniorsistemas/angular-components/button';
-import { ButtonModule } from '@seniorsistemas/angular-components/button';
-import * as i2$1 from '@seniorsistemas/angular-components/badge';
-import { BadgeModule } from '@seniorsistemas/angular-components/badge';
-import * as i3$2 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
+import { ButtonComponent } from '@seniorsistemas/angular-components/button';
+import { BadgeComponent } from '@seniorsistemas/angular-components/badge';
+import { TranslatePipe } from '@ngx-translate/core';
+import { TieredMenuDirective } from '@seniorsistemas/angular-components/tiered-menu';
 
 class KanbanEventService {
     selectAllColumnItemsEvent = new EventEmitter();
@@ -42,59 +36,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Injectable
         }] });
 
-class KanbanItemComponent {
-    _kanbanEventService = inject(KanbanEventService);
-    item;
-    selected = false;
-    showCheckbox = true;
-    headerTemplate = null;
-    bodyTemplate = null;
-    footerTemplate = null;
-    kanbanItemOptions = [];
-    ngOnInit() {
-        this._convertToTieredMenuItemData();
-    }
-    onSelectedChange(value) {
-        if (value) {
-            this._kanbanEventService.emitSelectItemEvent(this.item);
-        }
-        else {
-            this._kanbanEventService.emitUnselectItemEvent(this.item);
-        }
-    }
-    _convertToTieredMenuItemData() {
-        if (!this.item.options)
-            return;
-        const options = [];
-        this.item.options.forEach((option) => {
-            options.push({
-                ...option,
-                command: () => option.command(this.item),
-            });
-        });
-        this.kanbanItemOptions = options;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KanbanItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: KanbanItemComponent, selector: "s-kanban-item", inputs: { item: "item", selected: "selected", showCheckbox: "showCheckbox", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", footerTemplate: "footerTemplate" }, ngImport: i0, template: "<div\n    class=\"kanban-item\"\n    [ngClass]=\"{\n        'kanban-item--selected': selected && !item.disabled,\n        'kanban-item--disabled': item.disabled,\n        'kanban-item--frozen': !item.disabled && item.frozen\n    }\">\n    <div class=\"kanban-item__header\">\n        <div class=\"content\">\n            <form>\n                <input\n                    *ngIf=\"showCheckbox && !item.disabled && !item.frozen\"\n                    type=\"checkbox\"\n                    name=\"checkbox\"\n                    [(ngModel)]=\"selected\"\n                    (ngModelChange)=\"onSelectedChange($event)\"\n                    (click)=\"$event.stopPropagation()\">\n            </form>\n            <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: item }\"></ng-container>\n        </div>\n        <button\n            *ngIf=\"item.options && !item.disabled\"\n            class=\"options-button\"\n            (click)=\"$event.stopPropagation();\"\n            sTieredMenu\n            [items]=\"kanbanItemOptions\">\n            <i class=\"fas fa-ellipsis-v\"></i>\n        </button>\n    </div>\n    <div class=\"kanban-item__body\">\n        <ng-container *ngTemplateOutlet=\"bodyTemplate; context: { $implicit: item }\"></ng-container>\n    </div>\n    <div *ngIf=\"footerTemplate\" class=\"kanban-item__footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: item }\"></ng-container>     \n    </div>\n</div>\n", styles: [".kanban-item{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px #00000040;cursor:pointer;display:flex;flex-direction:column;margin:16px;min-width:260px;padding:16px;-webkit-user-select:none;user-select:none}.kanban-item .kanban-item__header{display:flex;justify-content:space-between}.kanban-item .kanban-item__header .content{display:flex;gap:16px}.kanban-item .kanban-item__header .options-button{background-color:transparent;border:none;cursor:pointer;margin-right:-8px;padding:0 8px}.kanban-item .kanban-item__body{margin:16px 0}.kanban-item .kanban-item__footer{border-top:1px solid #dedce5;display:flex;justify-content:space-between}.kanban-item .kanban-item__footer .date-info{align-items:center;color:#6e7280;display:flex;font-family:\"Open Sans\" sans-serif;font-size:12px;gap:4px;line-height:150%}.kanban-item--selected{border:1px solid #428BCA}.kanban-item--disabled{opacity:50%}.kanban-item--frozen{box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.TieredMenuDirective, selector: "[sTieredMenu]", inputs: ["items", "focusedItem", "triggerEvent", "ariaLabel"], outputs: ["tieredMenuOpened", "tieredMenuClosed"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KanbanItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "s-kanban-item", template: "<div\n    class=\"kanban-item\"\n    [ngClass]=\"{\n        'kanban-item--selected': selected && !item.disabled,\n        'kanban-item--disabled': item.disabled,\n        'kanban-item--frozen': !item.disabled && item.frozen\n    }\">\n    <div class=\"kanban-item__header\">\n        <div class=\"content\">\n            <form>\n                <input\n                    *ngIf=\"showCheckbox && !item.disabled && !item.frozen\"\n                    type=\"checkbox\"\n                    name=\"checkbox\"\n                    [(ngModel)]=\"selected\"\n                    (ngModelChange)=\"onSelectedChange($event)\"\n                    (click)=\"$event.stopPropagation()\">\n            </form>\n            <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: item }\"></ng-container>\n        </div>\n        <button\n            *ngIf=\"item.options && !item.disabled\"\n            class=\"options-button\"\n            (click)=\"$event.stopPropagation();\"\n            sTieredMenu\n            [items]=\"kanbanItemOptions\">\n            <i class=\"fas fa-ellipsis-v\"></i>\n        </button>\n    </div>\n    <div class=\"kanban-item__body\">\n        <ng-container *ngTemplateOutlet=\"bodyTemplate; context: { $implicit: item }\"></ng-container>\n    </div>\n    <div *ngIf=\"footerTemplate\" class=\"kanban-item__footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: item }\"></ng-container>     \n    </div>\n</div>\n", styles: [".kanban-item{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px #00000040;cursor:pointer;display:flex;flex-direction:column;margin:16px;min-width:260px;padding:16px;-webkit-user-select:none;user-select:none}.kanban-item .kanban-item__header{display:flex;justify-content:space-between}.kanban-item .kanban-item__header .content{display:flex;gap:16px}.kanban-item .kanban-item__header .options-button{background-color:transparent;border:none;cursor:pointer;margin-right:-8px;padding:0 8px}.kanban-item .kanban-item__body{margin:16px 0}.kanban-item .kanban-item__footer{border-top:1px solid #dedce5;display:flex;justify-content:space-between}.kanban-item .kanban-item__footer .date-info{align-items:center;color:#6e7280;display:flex;font-family:\"Open Sans\" sans-serif;font-size:12px;gap:4px;line-height:150%}.kanban-item--selected{border:1px solid #428BCA}.kanban-item--disabled{opacity:50%}.kanban-item--frozen{box-shadow:none}\n"] }]
-        }], propDecorators: { item: [{
-                type: Input,
-                args: [{ required: true }]
-            }], selected: [{
-                type: Input
-            }], showCheckbox: [{
-                type: Input
-            }], headerTemplate: [{
-                type: Input
-            }], bodyTemplate: [{
-                type: Input
-            }], footerTemplate: [{
-                type: Input
-            }] } });
-
 class KanbanColumnComponent {
     kanbanEventService = inject(KanbanEventService);
     data;
@@ -120,15 +61,15 @@ class KanbanColumnComponent {
         this.data.options.forEach((option) => {
             options.push({
                 ...option,
-                command: () => { option.command(this.data); },
+                command: () => {
+                    option.command(this.data);
+                },
             });
         });
         this.data.options = options;
     }
     _subscriveEvents() {
-        this.selectionControl.valueChanges
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe((value) => {
+        this.selectionControl.valueChanges.pipe(takeUntil(this._unsubscribe$)).subscribe((value) => {
             if (value) {
                 this.kanbanEventService.emitSelectAllColumnItemsEvent(this.data);
             }
@@ -136,14 +77,10 @@ class KanbanColumnComponent {
                 this.kanbanEventService.emitUnselectAllColumnItemsEvent(this.data);
             }
         });
-        this.kanbanEventService.unselectItemEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe((_) => {
+        this.kanbanEventService.unselectItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe((_) => {
             this.selectionControl.setValue(false, { emitEvent: false });
         });
-        this.kanbanEventService.selectItemEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe((item) => {
+        this.kanbanEventService.selectItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe((item) => {
             if (!this.data.items.includes(item)) {
                 this.selectionControl.setValue(false, { emitEvent: false });
             }
@@ -165,15 +102,15 @@ class KanbanColumnComponent {
     }
     _validateInputs() {
         if (!this.data) {
-            throw new Error("data parameter is required");
+            throw new Error('data parameter is required');
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KanbanColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KanbanColumnComponent, selector: "s-kanban-column", inputs: { data: "data", showCheckbox: "showCheckbox", headerTemplate: "headerTemplate" }, ngImport: i0, template: "<div class=\"kanban-column\">\n    <div class=\"kanban-column__header\">\n        <div class=\"content\">\n            <form>\n                @if (showCheckbox) {\n                    <input\n                        type=\"checkbox\"\n                        name=\"checkbox\"\n                        [formControl]=\"selectionControl\"\n                    />\n                }\n            </form>\n\n            @if (!headerTemplate) {\n                <div class=\"header\">\n                    <span class=\"title\">{{ data.title }} ({{ data.items.length }})</span>\n                </div>\n            } @else {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: data }\"></ng-container>\n            }\n        </div>\n        @if (data.options) {\n            <s-button\n                priority=\"default\"\n                [disabled]=\"false\"\n                [auxiliary]=\"true\"\n                size=\"small\"\n                [menuOptions]=\"tieredMenuOptions\"\n            >\n            </s-button>\n        }\n    </div>\n    <div class=\"kanban-column__body\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".kanban-column{align-items:center;background-color:#fbfafc;border:1px solid #dedce5;display:flex;flex-direction:column;height:100%;min-height:120px;-webkit-user-select:none;user-select:none;width:100%}.kanban-column .kanban-column__header{align-items:center;border-bottom:1px solid #dedce5;display:flex;justify-content:space-between;padding:16px 16px 8px;width:100%}.kanban-column .kanban-column__header .content{display:flex;gap:16px}.kanban-column .kanban-column__header .content .teste{display:flex;flex-direction:column;font-family:\"Open Sans\" sans-serif}.kanban-column .kanban-column__header .content .teste .title{font-size:14px;font-weight:800}.kanban-column .kanban-column__header .content .teste .description{font-size:12px}.kanban-column .kanban-column__body{display:flex;height:100%;justify-content:center;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KanbanColumnComponent, isStandalone: true, selector: "s-kanban-column", inputs: { data: "data", showCheckbox: "showCheckbox", headerTemplate: "headerTemplate" }, ngImport: i0, template: "<div class=\"kanban-column\">\n    <div class=\"kanban-column__header\">\n        <div class=\"content\">\n            <form>\n                @if (showCheckbox) {\n                    <input\n                        type=\"checkbox\"\n                        name=\"checkbox\"\n                        [formControl]=\"selectionControl\"\n                    />\n                }\n            </form>\n\n            @if (!headerTemplate) {\n                <div class=\"header\">\n                    <span class=\"title\">{{ data.title }} ({{ data.items.length }})</span>\n                </div>\n            } @else {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: data }\"></ng-container>\n            }\n        </div>\n        @if (data.options) {\n            <s-button\n                priority=\"default\"\n                [disabled]=\"false\"\n                [auxiliary]=\"true\"\n                size=\"small\"\n                [menuOptions]=\"tieredMenuOptions\"\n            >\n            </s-button>\n        }\n    </div>\n    <div class=\"kanban-column__body\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".kanban-column{align-items:center;background-color:#fbfafc;border:1px solid #dedce5;display:flex;flex-direction:column;height:100%;min-height:120px;-webkit-user-select:none;user-select:none;width:100%}.kanban-column .kanban-column__header{align-items:center;border-bottom:1px solid #dedce5;display:flex;justify-content:space-between;padding:16px 16px 8px;width:100%}.kanban-column .kanban-column__header .content{display:flex;gap:16px}.kanban-column .kanban-column__header .content .teste{display:flex;flex-direction:column;font-family:\"Open Sans\" sans-serif}.kanban-column .kanban-column__header .content .teste .title{font-size:14px;font-weight:800}.kanban-column .kanban-column__header .content .teste .description{font-size:12px}.kanban-column .kanban-column__body{display:flex;height:100%;justify-content:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KanbanColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: "s-kanban-column", template: "<div class=\"kanban-column\">\n    <div class=\"kanban-column__header\">\n        <div class=\"content\">\n            <form>\n                @if (showCheckbox) {\n                    <input\n                        type=\"checkbox\"\n                        name=\"checkbox\"\n                        [formControl]=\"selectionControl\"\n                    />\n                }\n            </form>\n\n            @if (!headerTemplate) {\n                <div class=\"header\">\n                    <span class=\"title\">{{ data.title }} ({{ data.items.length }})</span>\n                </div>\n            } @else {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: data }\"></ng-container>\n            }\n        </div>\n        @if (data.options) {\n            <s-button\n                priority=\"default\"\n                [disabled]=\"false\"\n                [auxiliary]=\"true\"\n                size=\"small\"\n                [menuOptions]=\"tieredMenuOptions\"\n            >\n            </s-button>\n        }\n    </div>\n    <div class=\"kanban-column__body\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".kanban-column{align-items:center;background-color:#fbfafc;border:1px solid #dedce5;display:flex;flex-direction:column;height:100%;min-height:120px;-webkit-user-select:none;user-select:none;width:100%}.kanban-column .kanban-column__header{align-items:center;border-bottom:1px solid #dedce5;display:flex;justify-content:space-between;padding:16px 16px 8px;width:100%}.kanban-column .kanban-column__header .content{display:flex;gap:16px}.kanban-column .kanban-column__header .content .teste{display:flex;flex-direction:column;font-family:\"Open Sans\" sans-serif}.kanban-column .kanban-column__header .content .teste .title{font-size:14px;font-weight:800}.kanban-column .kanban-column__header .content .teste .description{font-size:12px}.kanban-column .kanban-column__body{display:flex;height:100%;justify-content:center;width:100%}\n"] }]
+            args: [{ selector: 's-kanban-column', standalone: true, imports: [FormsModule, ReactiveFormsModule, NgTemplateOutlet, ButtonComponent], template: "<div class=\"kanban-column\">\n    <div class=\"kanban-column__header\">\n        <div class=\"content\">\n            <form>\n                @if (showCheckbox) {\n                    <input\n                        type=\"checkbox\"\n                        name=\"checkbox\"\n                        [formControl]=\"selectionControl\"\n                    />\n                }\n            </form>\n\n            @if (!headerTemplate) {\n                <div class=\"header\">\n                    <span class=\"title\">{{ data.title }} ({{ data.items.length }})</span>\n                </div>\n            } @else {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: data }\"></ng-container>\n            }\n        </div>\n        @if (data.options) {\n            <s-button\n                priority=\"default\"\n                [disabled]=\"false\"\n                [auxiliary]=\"true\"\n                size=\"small\"\n                [menuOptions]=\"tieredMenuOptions\"\n            >\n            </s-button>\n        }\n    </div>\n    <div class=\"kanban-column__body\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".kanban-column{align-items:center;background-color:#fbfafc;border:1px solid #dedce5;display:flex;flex-direction:column;height:100%;min-height:120px;-webkit-user-select:none;user-select:none;width:100%}.kanban-column .kanban-column__header{align-items:center;border-bottom:1px solid #dedce5;display:flex;justify-content:space-between;padding:16px 16px 8px;width:100%}.kanban-column .kanban-column__header .content{display:flex;gap:16px}.kanban-column .kanban-column__header .content .teste{display:flex;flex-direction:column;font-family:\"Open Sans\" sans-serif}.kanban-column .kanban-column__header .content .teste .title{font-size:14px;font-weight:800}.kanban-column .kanban-column__header .content .teste .description{font-size:12px}.kanban-column .kanban-column__body{display:flex;height:100%;justify-content:center;width:100%}\n"] }]
         }], propDecorators: { data: [{
                 type: Input,
                 args: [{ required: true }]
@@ -186,15 +123,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class KanbanItemDraggingComponent {
     quantityItems = 0;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KanbanItemDraggingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: KanbanItemDraggingComponent, selector: "s-kanban-item-dragging", inputs: { quantityItems: "quantityItems" }, ngImport: i0, template: "<div class=\"kanban-item-dragging-container\">\n    <div\n        *ngIf=\"quantityItems\"\n        class=\"kanban-item-dragging\">\n    </div>\n\n    <div\n        class=\"kanban-item-dragging\"\n        [ngClass]=\"{ 'kanban-item-dragging--over': quantityItems }\">\n        <div class=\"content\">\n            <input type=\"checkbox\" checked />\n            <s-badge\n                [text]=\"'platform.angular_components.count_items_selected' | translate:{ count: quantityItems }\"\n                color=\"blue\">\n            </s-badge>\n        </div>\n    </div>\n\n</div>\n", styles: [".kanban-item-dragging-container:has(.kanban-item-dragging--over){padding-top:12px}.kanban-item-dragging{background-color:#fff;border:1px solid #428bca;border-radius:4px;box-shadow:0 1px 5px #00000040;height:52px;padding:16px;width:260px}.kanban-item-dragging .content{display:flex;gap:16px}.kanban-item-dragging--over{left:12px;position:relative;top:-64px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.BadgeComponent, selector: "s-badge", inputs: ["type", "color", "title", "text", "selectable", "iconClass", "iconPosition", "infoSign", "enableTruncateText"], outputs: ["selected"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KanbanItemDraggingComponent, isStandalone: true, selector: "s-kanban-item-dragging", inputs: { quantityItems: "quantityItems" }, ngImport: i0, template: "<div class=\"kanban-item-dragging-container\">\r\n    @if (quantityItems) {\r\n        <div class=\"kanban-item-dragging\"></div>\r\n    }\r\n\r\n    <div\r\n        class=\"kanban-item-dragging\"\r\n        [ngClass]=\"{ 'kanban-item-dragging--over': quantityItems }\"\r\n    >\r\n        <div class=\"content\">\r\n            <input\r\n                type=\"checkbox\"\r\n                checked\r\n            />\r\n            <s-badge\r\n                [text]=\"'platform.angular_components.count_items_selected' | translate: { count: quantityItems }\"\r\n                color=\"blue\"\r\n            >\r\n            </s-badge>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".kanban-item-dragging-container:has(.kanban-item-dragging--over){padding-top:12px}.kanban-item-dragging{background-color:#fff;border:1px solid #428bca;border-radius:4px;box-shadow:0 1px 5px #00000040;height:52px;padding:16px;width:260px}.kanban-item-dragging .content{display:flex;gap:16px}.kanban-item-dragging--over{left:12px;position:relative;top:-64px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BadgeComponent, selector: "s-badge", inputs: ["type", "color", "title", "text", "selectable", "iconClass", "iconPosition", "infoSign", "enableTruncateText"], outputs: ["selected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KanbanItemDraggingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-kanban-item-dragging', template: "<div class=\"kanban-item-dragging-container\">\n    <div\n        *ngIf=\"quantityItems\"\n        class=\"kanban-item-dragging\">\n    </div>\n\n    <div\n        class=\"kanban-item-dragging\"\n        [ngClass]=\"{ 'kanban-item-dragging--over': quantityItems }\">\n        <div class=\"content\">\n            <input type=\"checkbox\" checked />\n            <s-badge\n                [text]=\"'platform.angular_components.count_items_selected' | translate:{ count: quantityItems }\"\n                color=\"blue\">\n            </s-badge>\n        </div>\n    </div>\n\n</div>\n", styles: [".kanban-item-dragging-container:has(.kanban-item-dragging--over){padding-top:12px}.kanban-item-dragging{background-color:#fff;border:1px solid #428bca;border-radius:4px;box-shadow:0 1px 5px #00000040;height:52px;padding:16px;width:260px}.kanban-item-dragging .content{display:flex;gap:16px}.kanban-item-dragging--over{left:12px;position:relative;top:-64px}\n"] }]
+            args: [{ selector: 's-kanban-item-dragging', standalone: true, imports: [NgClass, BadgeComponent, TranslatePipe], template: "<div class=\"kanban-item-dragging-container\">\r\n    @if (quantityItems) {\r\n        <div class=\"kanban-item-dragging\"></div>\r\n    }\r\n\r\n    <div\r\n        class=\"kanban-item-dragging\"\r\n        [ngClass]=\"{ 'kanban-item-dragging--over': quantityItems }\"\r\n    >\r\n        <div class=\"content\">\r\n            <input\r\n                type=\"checkbox\"\r\n                checked\r\n            />\r\n            <s-badge\r\n                [text]=\"'platform.angular_components.count_items_selected' | translate: { count: quantityItems }\"\r\n                color=\"blue\"\r\n            >\r\n            </s-badge>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".kanban-item-dragging-container:has(.kanban-item-dragging--over){padding-top:12px}.kanban-item-dragging{background-color:#fff;border:1px solid #428bca;border-radius:4px;box-shadow:0 1px 5px #00000040;height:52px;padding:16px;width:260px}.kanban-item-dragging .content{display:flex;gap:16px}.kanban-item-dragging--over{left:12px;position:relative;top:-64px}\n"] }]
         }], propDecorators: { quantityItems: [{
                 type: Input
             }] } });
 
+class KanbanItemComponent {
+    _kanbanEventService = inject(KanbanEventService);
+    item;
+    selected = false;
+    showCheckbox = true;
+    headerTemplate = null;
+    bodyTemplate = null;
+    footerTemplate = null;
+    kanbanItemOptions = [];
+    ngOnInit() {
+        this._convertToTieredMenuItemData();
+    }
+    onSelectedChange(value) {
+        if (value) {
+            this._kanbanEventService.emitSelectItemEvent(this.item);
+        }
+        else {
+            this._kanbanEventService.emitUnselectItemEvent(this.item);
+        }
+    }
+    _convertToTieredMenuItemData() {
+        if (!this.item.options)
+            return;
+        const options = [];
+        this.item.options.forEach((option) => {
+            options.push({
+                ...option,
+                command: () => option.command(this.item),
+            });
+        });
+        this.kanbanItemOptions = options;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KanbanItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KanbanItemComponent, isStandalone: true, selector: "s-kanban-item", inputs: { item: "item", selected: "selected", showCheckbox: "showCheckbox", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", footerTemplate: "footerTemplate" }, ngImport: i0, template: "<div\r\n    class=\"kanban-item\"\r\n    [ngClass]=\"{\r\n        'kanban-item--selected': selected && !item.disabled,\r\n        'kanban-item--disabled': item.disabled,\r\n        'kanban-item--frozen': !item.disabled && item.frozen,\r\n    }\"\r\n>\r\n    <div class=\"kanban-item__header\">\r\n        <div class=\"content\">\r\n            <form>\r\n                @if (showCheckbox && !item.disabled && !item.frozen) {\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        name=\"checkbox\"\r\n                        [(ngModel)]=\"selected\"\r\n                        (ngModelChange)=\"onSelectedChange($event)\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                    />\r\n                }\r\n            </form>\r\n            <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: item }\"></ng-container>\r\n        </div>\r\n        @if (item.options && !item.disabled) {\r\n            <button\r\n                class=\"options-button\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                sTieredMenu\r\n                [items]=\"kanbanItemOptions\"\r\n            >\r\n                <i class=\"fas fa-ellipsis-v\"></i>\r\n            </button>\r\n        }\r\n    </div>\r\n    <div class=\"kanban-item__body\">\r\n        <ng-container *ngTemplateOutlet=\"bodyTemplate; context: { $implicit: item }\"></ng-container>\r\n    </div>\r\n    @if (footerTemplate) {\r\n        <div class=\"kanban-item__footer\">\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: item }\"></ng-container>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".kanban-item{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px #00000040;cursor:pointer;display:flex;flex-direction:column;margin:16px;min-width:260px;padding:16px;-webkit-user-select:none;user-select:none}.kanban-item .kanban-item__header{display:flex;justify-content:space-between}.kanban-item .kanban-item__header .content{display:flex;gap:16px}.kanban-item .kanban-item__header .options-button{background-color:transparent;border:none;cursor:pointer;margin-right:-8px;padding:0 8px}.kanban-item .kanban-item__body{margin:16px 0}.kanban-item .kanban-item__footer{border-top:1px solid #dedce5;display:flex;justify-content:space-between}.kanban-item .kanban-item__footer .date-info{align-items:center;color:#6e7280;display:flex;font-family:\"Open Sans\" sans-serif;font-size:12px;gap:4px;line-height:150%}.kanban-item--selected{border:1px solid #428BCA}.kanban-item--disabled{opacity:50%}.kanban-item--frozen{box-shadow:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TieredMenuDirective, selector: "[sTieredMenu]", inputs: ["items", "focusedItem", "triggerEvent", "ariaLabel"], outputs: ["tieredMenuOpened", "tieredMenuClosed"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KanbanItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's-kanban-item', standalone: true, imports: [NgClass, FormsModule, NgTemplateOutlet, TieredMenuDirective], template: "<div\r\n    class=\"kanban-item\"\r\n    [ngClass]=\"{\r\n        'kanban-item--selected': selected && !item.disabled,\r\n        'kanban-item--disabled': item.disabled,\r\n        'kanban-item--frozen': !item.disabled && item.frozen,\r\n    }\"\r\n>\r\n    <div class=\"kanban-item__header\">\r\n        <div class=\"content\">\r\n            <form>\r\n                @if (showCheckbox && !item.disabled && !item.frozen) {\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        name=\"checkbox\"\r\n                        [(ngModel)]=\"selected\"\r\n                        (ngModelChange)=\"onSelectedChange($event)\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                    />\r\n                }\r\n            </form>\r\n            <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: item }\"></ng-container>\r\n        </div>\r\n        @if (item.options && !item.disabled) {\r\n            <button\r\n                class=\"options-button\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                sTieredMenu\r\n                [items]=\"kanbanItemOptions\"\r\n            >\r\n                <i class=\"fas fa-ellipsis-v\"></i>\r\n            </button>\r\n        }\r\n    </div>\r\n    <div class=\"kanban-item__body\">\r\n        <ng-container *ngTemplateOutlet=\"bodyTemplate; context: { $implicit: item }\"></ng-container>\r\n    </div>\r\n    @if (footerTemplate) {\r\n        <div class=\"kanban-item__footer\">\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: item }\"></ng-container>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".kanban-item{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px #00000040;cursor:pointer;display:flex;flex-direction:column;margin:16px;min-width:260px;padding:16px;-webkit-user-select:none;user-select:none}.kanban-item .kanban-item__header{display:flex;justify-content:space-between}.kanban-item .kanban-item__header .content{display:flex;gap:16px}.kanban-item .kanban-item__header .options-button{background-color:transparent;border:none;cursor:pointer;margin-right:-8px;padding:0 8px}.kanban-item .kanban-item__body{margin:16px 0}.kanban-item .kanban-item__footer{border-top:1px solid #dedce5;display:flex;justify-content:space-between}.kanban-item .kanban-item__footer .date-info{align-items:center;color:#6e7280;display:flex;font-family:\"Open Sans\" sans-serif;font-size:12px;gap:4px;line-height:150%}.kanban-item--selected{border:1px solid #428BCA}.kanban-item--disabled{opacity:50%}.kanban-item--frozen{box-shadow:none}\n"] }]
+        }], propDecorators: { item: [{
+                type: Input,
+                args: [{ required: true }]
+            }], selected: [{
+                type: Input
+            }], showCheckbox: [{
+                type: Input
+            }], headerTemplate: [{
+                type: Input
+            }], bodyTemplate: [{
+                type: Input
+            }], footerTemplate: [{
+                type: Input
+            }] } });
+
 /**
  * @description Componente de quadro Kanban com suporte a arrastar e soltar colunas e itens.
  * Permite seleção via checkboxes, templates customizáveis para cabeçalho, corpo e rodapé
@@ -402,11 +392,21 @@ class KanbanComponent {
         this.itemFooterTemplate = this.getItemFooterTemplate();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KanbanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KanbanComponent, selector: "s-kanban", inputs: { data: "data", showItemCheckboxes: "showItemCheckboxes", showColumnCheckboxes: "showColumnCheckboxes" }, outputs: { itemsMoved: "itemsMoved", dataUpdated: "dataUpdated", itemsSelected: "itemsSelected" }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], ngImport: i0, template: "<div class=\"kanban\">\n    <s-kanban-column\n        *ngFor=\"let column of data.columns\"\n        [data]=\"column\"\n        [showCheckbox]=\"showColumnCheckboxes\"\n        [headerTemplate]=\"columnHeaderTemplate\"\n    >\n        <div\n            [id]=\"column.id + ''\"\n            style=\"height: 100%; width: 100%\"\n            cdkDropList\n            #dynamicList=\"cdkDropList\"\n            [cdkDropListData]=\"column.items\"\n            [cdkDropListConnectedTo]=\"getLinkedColumns(column)\"\n            (cdkDropListDropped)=\"drop($event)\"\n        >\n            @if (column.items.length === 0) {\n                @if (!columnEmptyMessageTemplate) {\n                    <div class=\"empty-message\">\n                        <p class=\"text\">\n                            <span class=\"fas fa-clock\"></span>&nbsp;\n                            <span>{{\n                                'platform.angular_components.count_items_in_target'\n                                    | translate: { count: column.items.length, target: column.title }\n                            }}</span>\n                        </p>\n                    </div>\n                } @else {\n                    <ng-container\n                        *ngTemplateOutlet=\"columnEmptyMessageTemplate; context: { $implicit: column }\"\n                    ></ng-container>\n                }\n            }\n\n            <div\n                *ngFor=\"let item of column.items\"\n                cdkDrag\n                [cdkDragData]=\"item\"\n                [cdkDragDisabled]=\"item.disabled || item.frozen\"\n                (cdkDragStarted)=\"dragStarted()\"\n                (cdkDragReleased)=\"dragReleased()\"\n                (click)=\"selectItem($event, item, column)\"\n            >\n                <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n\n                <ng-container *cdkDragPreview>\n                    @if (selectedItems.size > 1) {\n                        <s-kanban-item-dragging [quantityItems]=\"selectedItems.size\"></s-kanban-item-dragging>\n                    } @else {\n                        <div class=\"max-w-96\">\n                            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n                        </div>\n                    }\n                </ng-container>\n\n                <ng-template #itemTemplate>\n                    <s-kanban-item\n                        [item]=\"item\"\n                        [selected]=\"selectedItems.has(item)\"\n                        [showCheckbox]=\"showItemCheckboxes\"\n                        [headerTemplate]=\"itemHeaderTemplate\"\n                        [bodyTemplate]=\"itemBodyTemplate\"\n                        [footerTemplate]=\"itemFooterTemplate\"\n                    >\n                    </s-kanban-item>\n                </ng-template>\n\n                <div *cdkDragPlaceholder>\n                    <div class=\"placeholder\">\n                        <div class=\"placeholder-line\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </s-kanban-column>\n</div>\n\n", styles: [".kanban{display:flex;gap:16px;overflow:auto;width:100%}.kanban .empty-message{display:flex;justify-content:center;margin:16px}.kanban .empty-message .text{overflow:hidden;text-align:center;text-overflow:ellipsis;width:100%;white-space:nowrap}@media screen and (max-width: 600px){.kanban{flex-direction:column}}s-kanban-column{display:flex;flex-grow:1;min-width:292px}.placeholder{display:flex;justify-content:center}.placeholder .placeholder-line{background-color:#a5a5b2;height:1px;margin:6px 0;width:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.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$2.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$2.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i2$2.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: KanbanItemComponent, selector: "s-kanban-item", inputs: ["item", "selected", "showCheckbox", "headerTemplate", "bodyTemplate", "footerTemplate"] }, { kind: "component", type: KanbanColumnComponent, selector: "s-kanban-column", inputs: ["data", "showCheckbox", "headerTemplate"] }, { kind: "component", type: KanbanItemDraggingComponent, selector: "s-kanban-item-dragging", inputs: ["quantityItems"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KanbanComponent, isStandalone: true, selector: "s-kanban", inputs: { data: "data", showItemCheckboxes: "showItemCheckboxes", showColumnCheckboxes: "showColumnCheckboxes" }, outputs: { itemsMoved: "itemsMoved", dataUpdated: "dataUpdated", itemsSelected: "itemsSelected" }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], ngImport: i0, template: "<div class=\"kanban\">\r\n    @for (column of data.columns; track column) {\r\n        <s-kanban-column\r\n            [data]=\"column\"\r\n            [showCheckbox]=\"showColumnCheckboxes\"\r\n            [headerTemplate]=\"columnHeaderTemplate\"\r\n        >\r\n            <div\r\n                [id]=\"column.id + ''\"\r\n                style=\"height: 100%; width: 100%\"\r\n                cdkDropList\r\n                #dynamicList=\"cdkDropList\"\r\n                [cdkDropListData]=\"column.items\"\r\n                [cdkDropListConnectedTo]=\"getLinkedColumns(column)\"\r\n                (cdkDropListDropped)=\"drop($event)\"\r\n            >\r\n                @if (column.items.length === 0) {\r\n                    @if (!columnEmptyMessageTemplate) {\r\n                        <div class=\"empty-message\">\r\n                            <p class=\"text\">\r\n                                <span class=\"fas fa-clock\"></span>&nbsp;\r\n                                <span>{{\r\n                                    'platform.angular_components.count_items_in_target'\r\n                                        | translate: { count: column.items.length, target: column.title }\r\n                                }}</span>\r\n                            </p>\r\n                        </div>\r\n                    } @else {\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"columnEmptyMessageTemplate; context: { $implicit: column }\"\r\n                        ></ng-container>\r\n                    }\r\n                }\r\n                @for (item of column.items; track item) {\r\n                    <div\r\n                        cdkDrag\r\n                        [cdkDragData]=\"item\"\r\n                        [cdkDragDisabled]=\"item.disabled || item.frozen\"\r\n                        (cdkDragStarted)=\"dragStarted()\"\r\n                        (cdkDragReleased)=\"dragReleased()\"\r\n                        (click)=\"selectItem($event, item, column)\"\r\n                    >\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n                        <ng-container *cdkDragPreview>\r\n                            @if (selectedItems.size > 1) {\r\n                                <s-kanban-item-dragging [quantityItems]=\"selectedItems.size\"></s-kanban-item-dragging>\r\n                            } @else {\r\n                                <div class=\"max-w-96\">\r\n                                    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n                                </div>\r\n                            }\r\n                        </ng-container>\r\n                        <ng-template #itemTemplate>\r\n                            <s-kanban-item\r\n                                [item]=\"item\"\r\n                                [selected]=\"selectedItems.has(item)\"\r\n                                [showCheckbox]=\"showItemCheckboxes\"\r\n                                [headerTemplate]=\"itemHeaderTemplate\"\r\n                                [bodyTemplate]=\"itemBodyTemplate\"\r\n                                [footerTemplate]=\"itemFooterTemplate\"\r\n                            >\r\n                            </s-kanban-item>\r\n                        </ng-template>\r\n                        <div *cdkDragPlaceholder>\r\n                            <div class=\"placeholder\">\r\n                                <div class=\"placeholder-line\"></div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </s-kanban-column>\r\n    }\r\n</div>\r\n", styles: [".kanban{display:flex;gap:16px;overflow:auto;width:100%}.kanban .empty-message{display:flex;justify-content:center;margin:16px}.kanban .empty-message .text{overflow:hidden;text-align:center;text-overflow:ellipsis;width:100%;white-space:nowrap}@media screen and (max-width: 600px){.kanban{flex-direction:column}}s-kanban-column{display:flex;flex-grow:1;min-width:292px}.placeholder{display:flex;justify-content:center}.placeholder .placeholder-line{background-color:#a5a5b2;height:1px;margin:6px 0;width:50%}\n"], dependencies: [{ kind: "component", type: KanbanColumnComponent, selector: "s-kanban-column", inputs: ["data", "showCheckbox", "headerTemplate"] }, { kind: "directive", type: 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 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: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: KanbanItemDraggingComponent, selector: "s-kanban-item-dragging", inputs: ["quantityItems"] }, { kind: "component", type: KanbanItemComponent, selector: "s-kanban-item", inputs: ["item", "selected", "showCheckbox", "headerTemplate", "bodyTemplate", "footerTemplate"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KanbanComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-kanban', template: "<div class=\"kanban\">\n    <s-kanban-column\n        *ngFor=\"let column of data.columns\"\n        [data]=\"column\"\n        [showCheckbox]=\"showColumnCheckboxes\"\n        [headerTemplate]=\"columnHeaderTemplate\"\n    >\n        <div\n            [id]=\"column.id + ''\"\n            style=\"height: 100%; width: 100%\"\n            cdkDropList\n            #dynamicList=\"cdkDropList\"\n            [cdkDropListData]=\"column.items\"\n            [cdkDropListConnectedTo]=\"getLinkedColumns(column)\"\n            (cdkDropListDropped)=\"drop($event)\"\n        >\n            @if (column.items.length === 0) {\n                @if (!columnEmptyMessageTemplate) {\n                    <div class=\"empty-message\">\n                        <p class=\"text\">\n                            <span class=\"fas fa-clock\"></span>&nbsp;\n                            <span>{{\n                                'platform.angular_components.count_items_in_target'\n                                    | translate: { count: column.items.length, target: column.title }\n                            }}</span>\n                        </p>\n                    </div>\n                } @else {\n                    <ng-container\n                        *ngTemplateOutlet=\"columnEmptyMessageTemplate; context: { $implicit: column }\"\n                    ></ng-container>\n                }\n            }\n\n            <div\n                *ngFor=\"let item of column.items\"\n                cdkDrag\n                [cdkDragData]=\"item\"\n                [cdkDragDisabled]=\"item.disabled || item.frozen\"\n                (cdkDragStarted)=\"dragStarted()\"\n                (cdkDragReleased)=\"dragReleased()\"\n                (click)=\"selectItem($event, item, column)\"\n            >\n                <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n\n                <ng-container *cdkDragPreview>\n                    @if (selectedItems.size > 1) {\n                        <s-kanban-item-dragging [quantityItems]=\"selectedItems.size\"></s-kanban-item-dragging>\n                    } @else {\n                        <div class=\"max-w-96\">\n                            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n                        </div>\n                    }\n                </ng-container>\n\n                <ng-template #itemTemplate>\n                    <s-kanban-item\n                        [item]=\"item\"\n                        [selected]=\"selectedItems.has(item)\"\n                        [showCheckbox]=\"showItemCheckboxes\"\n                        [headerTemplate]=\"itemHeaderTemplate\"\n                        [bodyTemplate]=\"itemBodyTemplate\"\n                        [footerTemplate]=\"itemFooterTemplate\"\n                    >\n                    </s-kanban-item>\n                </ng-template>\n\n                <div *cdkDragPlaceholder>\n                    <div class=\"placeholder\">\n                        <div class=\"placeholder-line\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </s-kanban-column>\n</div>\n\n", styles: [".kanban{display:flex;gap:16px;overflow:auto;width:100%}.kanban .empty-message{display:flex;justify-content:center;margin:16px}.kanban .empty-message .text{overflow:hidden;text-align:center;text-overflow:ellipsis;width:100%;white-space:nowrap}@media screen and (max-width: 600px){.kanban{flex-direction:column}}s-kanban-column{display:flex;flex-grow:1;min-width:292px}.placeholder{display:flex;justify-content:center}.placeholder .placeholder-line{background-color:#a5a5b2;height:1px;margin:6px 0;width:50%}\n"] }]
+            args: [{ selector: 's-kanban', standalone: true, imports: [
+                        KanbanColumnComponent,
+                        CdkDropList,
+                        NgTemplateOutlet,
+                        CdkDrag,
+                        CdkDragPreview,
+                        KanbanItemDraggingComponent,
+                        KanbanItemComponent,
+                        CdkDragPlaceholder,
+                        TranslatePipe,
+                    ], template: "<div class=\"kanban\">\r\n    @for (column of data.columns; track column) {\r\n        <s-kanban-column\r\n            [data]=\"column\"\r\n            [showCheckbox]=\"showColumnCheckboxes\"\r\n            [headerTemplate]=\"columnHeaderTemplate\"\r\n        >\r\n            <div\r\n                [id]=\"column.id + ''\"\r\n                style=\"height: 100%; width: 100%\"\r\n                cdkDropList\r\n                #dynamicList=\"cdkDropList\"\r\n                [cdkDropListData]=\"column.items\"\r\n                [cdkDropListConnectedTo]=\"getLinkedColumns(column)\"\r\n                (cdkDropListDropped)=\"drop($event)\"\r\n            >\r\n                @if (column.items.length === 0) {\r\n                    @if (!columnEmptyMessageTemplate) {\r\n                        <div class=\"empty-message\">\r\n                            <p class=\"text\">\r\n                                <span class=\"fas fa-clock\"></span>&nbsp;\r\n                                <span>{{\r\n                                    'platform.angular_components.count_items_in_target'\r\n                                        | translate: { count: column.items.length, target: column.title }\r\n                                }}</span>\r\n                            </p>\r\n                        </div>\r\n                    } @else {\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"columnEmptyMessageTemplate; context: { $implicit: column }\"\r\n                        ></ng-container>\r\n                    }\r\n                }\r\n                @for (item of column.items; track item) {\r\n                    <div\r\n                        cdkDrag\r\n                        [cdkDragData]=\"item\"\r\n                        [cdkDragDisabled]=\"item.disabled || item.frozen\"\r\n                        (cdkDragStarted)=\"dragStarted()\"\r\n                        (cdkDragReleased)=\"dragReleased()\"\r\n                        (click)=\"selectItem($event, item, column)\"\r\n                    >\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n                        <ng-container *cdkDragPreview>\r\n                            @if (selectedItems.size > 1) {\r\n                                <s-kanban-item-dragging [quantityItems]=\"selectedItems.size\"></s-kanban-item-dragging>\r\n                            } @else {\r\n                                <div class=\"max-w-96\">\r\n                                    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n                                </div>\r\n                            }\r\n                        </ng-container>\r\n                        <ng-template #itemTemplate>\r\n                            <s-kanban-item\r\n                                [item]=\"item\"\r\n                                [selected]=\"selectedItems.has(item)\"\r\n                                [showCheckbox]=\"showItemCheckboxes\"\r\n                                [headerTemplate]=\"itemHeaderTemplate\"\r\n                                [bodyTemplate]=\"itemBodyTemplate\"\r\n                                [footerTemplate]=\"itemFooterTemplate\"\r\n                            >\r\n                            </s-kanban-item>\r\n                        </ng-template>\r\n                        <div *cdkDragPlaceholder>\r\n                            <div class=\"placeholder\">\r\n                                <div class=\"placeholder-line\"></div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </s-kanban-column>\r\n    }\r\n</div>\r\n", styles: [".kanban{display:flex;gap:16px;overflow:auto;width:100%}.kanban .empty-message{display:flex;justify-content:center;margin:16px}.kanban .empty-message .text{overflow:hidden;text-align:center;text-overflow:ellipsis;width:100%;white-space:nowrap}@media screen and (max-width: 600px){.kanban{flex-direction:column}}s-kanban-column{display:flex;flex-grow:1;min-width:292px}.placeholder{display:flex;justify-content:center}.placeholder .placeholder-line{background-color:#a5a5b2;height:1px;margin:6px 0;width:50%}\n"] }]
         }], propDecorators: { data: [{
                 type: Input,
                 args: [{ required: true }]
@@ -427,40 +427,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class KanbanModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KanbanModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: KanbanModule, declarations: [KanbanComponent, KanbanItemComponent, KanbanColumnComponent, KanbanItemDraggingComponent], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            TranslateModule,
-            DragDropModule,
-            BadgeModule,
-            ButtonModule,
-            TieredMenuModule,
-            TemplateModule], exports: [KanbanComponent, TemplateModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KanbanModule, providers: [KanbanEventService], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            TranslateModule,
-            DragDropModule,
-            BadgeModule,
-            ButtonModule,
-            TieredMenuModule,
-            TemplateModule, TemplateModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: KanbanModule, imports: [TemplateModule, KanbanComponent], exports: [KanbanComponent, TemplateModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KanbanModule, providers: [KanbanEventService], imports: [TemplateModule, KanbanComponent, TemplateModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KanbanModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        TranslateModule,
-                        DragDropModule,
-                        BadgeModule,
-                        ButtonModule,
-                        TieredMenuModule,
-                        TemplateModule,
-                    ],
-                    declarations: [KanbanComponent, KanbanItemComponent, KanbanColumnComponent, KanbanItemDraggingComponent],
+                    imports: [TemplateModule, KanbanComponent],
                     exports: [KanbanComponent, TemplateModule],
                     providers: [KanbanEventService],
                 }]