@seniorsistemas/angular-components 17.9.0 → 17.9.2

package/fesm2015/seniorsistemas-angular-components.js

@@ -1,5 +1,5 @@
 import { __decorate, __awaiter, __param, __rest } from 'tslib';
-import { EventEmitter, Input, Output, Component, ContentChildren, ViewChild, HostListener, forwardRef, NgModule, ɵɵdefineInjectable, Injectable, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, Directive, KeyValueDiffers, HostBinding, Renderer2, TemplateRef, InjectionToken, Inject, ViewEncapsulation, ViewContainerRef, ChangeDetectorRef, Pipe, ɵɵinject, ContentChild, Optional, ViewChildren } from '@angular/core';
+import { EventEmitter, Input, Output, Component, ContentChildren, ViewChild, HostListener, forwardRef, NgModule, ɵɵdefineInjectable, Injectable, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, Renderer2, Directive, KeyValueDiffers, HostBinding, TemplateRef, InjectionToken, Inject, ViewEncapsulation, ViewContainerRef, ChangeDetectorRef, Pipe, ɵɵinject, ContentChild, Optional, ViewChildren } from '@angular/core';
 import { trigger, transition, style as style$7, animate, state, group, query, animateChild } from '@angular/animations';
 import { Subject, of, from, ReplaySubject, throwError, forkJoin } from 'rxjs';
 import { takeUntil, tap, map, switchMap, catchError, first, filter, take, delay, debounceTime, repeat, finalize } from 'rxjs/operators';
@@ -415,12 +415,13 @@ var TooltipEvent;
 })(TooltipEvent || (TooltipEvent = {}));
 
 let TooltipDirective = class TooltipDirective {
-    constructor(elementRef, appRef, componentFactoryResolver, injector, debounceUtils) {
+    constructor(elementRef, appRef, componentFactoryResolver, injector, debounceUtils, renderer) {
         this.elementRef = elementRef;
         this.appRef = appRef;
         this.componentFactoryResolver = componentFactoryResolver;
         this.injector = injector;
         this.debounceUtils = debounceUtils;
+        this.renderer = renderer;
         this.position = TooltipPosition.Top;
         this.showDelay = 500;
         this.tooltipEvent = TooltipEvent.Hover;
@@ -433,6 +434,7 @@ let TooltipDirective = class TooltipDirective {
     }
     ngOnInit() {
         this.validatePosition();
+        this.updateTooltipVisibilityWhenFocusOnInput();
     }
     ngOnDestroy() {
         this.destroy();
@@ -456,6 +458,58 @@ let TooltipDirective = class TooltipDirective {
     isMousePositionOutsideOfElement(mouseX, mouseY, elementArea) {
         return mouseX < elementArea.left || mouseX >= elementArea.right || mouseY < elementArea.top || mouseY >= elementArea.bottom;
     }
+    /**
+     * Manipula a visibilidade do tooltip quando houver uma referência de input.
+     */
+    updateTooltipVisibilityWhenFocusOnInput() {
+        if (this.focusedInputRef) {
+            const inputFocus = this.focusedInputRef;
+            const icon = this.getIconFromFocusedInput(inputFocus);
+            this.renderer.listen(inputFocus, 'focus', () => {
+                if (icon && this.isMatchingTooltip(icon)) {
+                    this.createTootipByFocus(icon);
+                }
+            });
+            this.renderer.listen(inputFocus, 'blur', () => {
+                if (icon && this.isMatchingTooltip(icon)) {
+                    this.removeTooltip(icon);
+                    this.destroy();
+                }
+            });
+        }
+    }
+    /**
+     * Obtém o elemento do ícone associado ao label do input em focus.
+     * @param focusedInput O input em focus.
+     * @returns O ícone do input em focus ou null.
+     */
+    getIconFromFocusedInput(focusedInput) {
+        const label = document.querySelector(`label[for='${focusedInput.id}']`);
+        if (label) {
+            const icon = label.nextElementSibling;
+            return (icon === null || icon === void 0 ? void 0 : icon.classList.contains('info-sign__icon')) ? icon : null;
+        }
+        return null;
+    }
+    /**
+     * Verifica se o ícone tem o tooltip correspondente ao atual.
+     * @param icon O ícone do input em focus.
+     * @returns true se o tooltip corresponde; caso contrário, false.
+     */
+    isMatchingTooltip(icon) {
+        const tooltipText = icon.getAttribute('ng-reflect-tooltip');
+        return this.tooltip === tooltipText;
+    }
+    /**
+     * Remove o tooltip associado ao ícone do input em focus.
+     * @param icon O ícone do input em focus.
+     */
+    removeTooltip(icon) {
+        const tooltip = icon.querySelector('.tooltip');
+        if (tooltip) {
+            tooltip.remove();
+        }
+    }
     // whenever the component with the tooltip is clicked I destroy the tooltip.
     // whenever a key is pressed on the component with the tooltip I destroy the tooltip.
     onClick() {
@@ -520,10 +574,7 @@ let TooltipDirective = class TooltipDirective {
     createTootip() {
         var _a;
         if (this.componentRef === null && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.length)) {
-            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(TooltipComponent);
-            this.componentRef = componentFactory.create(this.injector);
-            this.appRef.attachView(this.componentRef.hostView);
-            const domElem = this.componentRef.hostView.rootNodes[0];
+            const domElem = this.getDomElement();
             document.body.appendChild(domElem);
             this.setTooltipComponentProperties();
             this.showTimeout = window.setTimeout(this.showTooltip.bind(this), this.showDelay);
@@ -533,6 +584,27 @@ let TooltipDirective = class TooltipDirective {
             }
         }
     }
+    getDomElement() {
+        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(TooltipComponent);
+        this.componentRef = componentFactory.create(this.injector);
+        this.appRef.attachView(this.componentRef.hostView);
+        return this.componentRef.hostView.rootNodes[0];
+    }
+    /**
+     * Cria um tooltip para o icone do input em focus.
+     *
+     * @param icon O ícone do input em focus.
+     */
+    createTootipByFocus(icon) {
+        var _a;
+        if (this.componentRef === null && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.length)) {
+            const domElem = this.getDomElement();
+            const tooltip = domElem.querySelector('.tooltip');
+            icon.appendChild(tooltip);
+            this.setTooltipComponentProperties();
+            setTimeout(() => tooltip.classList.add("tooltip--visible"), 0);
+        }
+    }
     showTooltip() {
         if (this.componentRef !== null) {
             this.componentRef.instance.visible = this.visible;
@@ -651,7 +723,8 @@ TooltipDirective.ctorParameters = () => [
     { type: ApplicationRef },
     { type: ComponentFactoryResolver },
     { type: Injector },
-    { type: DebounceUtils }
+    { type: DebounceUtils },
+    { type: Renderer2 }
 ];
 __decorate([
     Input("sTooltip")
@@ -677,6 +750,9 @@ __decorate([
 __decorate([
     Input()
 ], TooltipDirective.prototype, "mobileBehavior", void 0);
+__decorate([
+    Input()
+], TooltipDirective.prototype, "focusedInputRef", void 0);
 __decorate([
     HostListener("click"),
     HostListener("keydown")
@@ -6174,7 +6250,7 @@ let InfoSignComponent = class InfoSignComponent {
 InfoSignComponent = __decorate([
     Component({
         selector: "s-info-sign-component",
-        template: "<span class=\"info-sign\">\n    <span *ngTemplateOutlet=\"templateRef\"></span>\n    <i\n        class=\"info-sign__icon fa fa-info-circle\"\n        aria-hidden=\"true\"\n        [sTooltip]=\"tooltip\"\n        [escape]=\"false\"\n        tooltipPosition=\"top\"\n        [displayTime]=\"displayTime\"\n        mobileBehavior=\"tap\"\n        showDelay=\"0\">\n    </i>\n</span>",
+        template: "<span class=\"info-sign\">\n    <span *ngTemplateOutlet=\"templateRef\"></span>\n    <i\n        class=\"info-sign__icon fa fa-info-circle\"\n        aria-hidden=\"true\"\n        [sTooltip]=\"tooltip\"\n        [escape]=\"false\"\n        tooltipPosition=\"top\"\n        [displayTime]=\"displayTime\"\n        mobileBehavior=\"tap\"\n        showDelay=\"0\"\n        [focusedInputRef]=\"focusedInputRef\">\n    </i>\n</span>\n",
         styles: [".info-sign{-ms-flex-align:baseline;align-items:baseline;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:start;justify-content:flex-start}.info-sign .info-sign__icon{padding:0 12px}"]
     })
 ], InfoSignComponent);
@@ -6194,6 +6270,7 @@ let InfoSignDirective = class InfoSignDirective {
             this.componentRef.instance.templateRef = this.templateRef;
             this.componentRef.instance.tooltip = this.sInfoSign;
             this.componentRef.instance.displayTime = this.displayTime;
+            this.componentRef.instance.focusedInputRef = this.focusedInputRef;
         }
         else if (this.componentRef && this.sInfoSign) {
             this.componentRef.instance.tooltip = this.sInfoSign;
@@ -6220,6 +6297,9 @@ __decorate([
 __decorate([
     Input('sInfoSignDisplayTime')
 ], InfoSignDirective.prototype, "displayTime", void 0);
+__decorate([
+    Input('sInfoSignFocusedInputRef')
+], InfoSignDirective.prototype, "focusedInputRef", void 0);
 InfoSignDirective = __decorate([
     Directive({
         selector: "[sInfoSign]",
@@ -13467,6 +13547,8 @@ var KanbanTemplateTypes;
 let KanbanComponent = class KanbanComponent {
     constructor(kanbanEventService) {
         this.kanbanEventService = kanbanEventService;
+        this.showItemCheckboxes = true;
+        this.showColumnCheckboxes = true;
         this.itemsMoved = new EventEmitter();
         this.dataUpdated = new EventEmitter();
         this.itemsSelected = new EventEmitter();
@@ -13525,6 +13607,8 @@ let KanbanComponent = class KanbanComponent {
         this.selectedItems.clear();
     }
     selectItem(event, item, column) {
+        if (item.disabled || item.frozen)
+            return;
         if (event.ctrlKey) {
             if (this.selectedItems.delete(item)) {
                 this.kanbanEventService.emitUnselectItemEvent(item);
@@ -13539,6 +13623,8 @@ let KanbanComponent = class KanbanComponent {
             }
         }
         else {
+            if (this.selectedItems.delete(item))
+                return;
             this.selectedItems.clear();
             this.selectedItems.add(item);
             this.selectedColumn = column;
@@ -13554,9 +13640,7 @@ let KanbanComponent = class KanbanComponent {
         this.draggingItems.clear();
     }
     getLinkedColumns(currentColumn) {
-        return this.data.columns
-            .filter((column) => column != currentColumn)
-            .map((column) => column.id);
+        return this.data.columns.filter((column) => column != currentColumn).map((column) => column.id);
     }
     getColumnHeaderTemplate() {
         return this._getCustomTemplate(KanbanTemplateTypes.ColumnHeader);
@@ -13582,7 +13666,7 @@ let KanbanComponent = class KanbanComponent {
             .pipe(takeUntil(this._unsubscribe$))
             .subscribe((column) => {
             column.items
-                .filter((item) => !item.disabled)
+                .filter((item) => !item.disabled && !item.frozen)
                 .forEach((item) => {
                 this.selectedItems.add(item);
             });
@@ -13612,9 +13696,7 @@ let KanbanComponent = class KanbanComponent {
                 });
             });
         });
-        this.kanbanEventService.unselectItemEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe((item) => {
+        this.kanbanEventService.unselectItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe((item) => {
             this.selectedItems.delete(item);
         });
     }
@@ -13644,6 +13726,12 @@ KanbanComponent.ctorParameters = () => [
 __decorate([
     Input()
 ], KanbanComponent.prototype, "data", void 0);
+__decorate([
+    Input()
+], KanbanComponent.prototype, "showItemCheckboxes", void 0);
+__decorate([
+    Input()
+], KanbanComponent.prototype, "showColumnCheckboxes", void 0);
 __decorate([
     Output()
 ], KanbanComponent.prototype, "itemsMoved", void 0);
@@ -13658,26 +13746,35 @@ __decorate([
 ], KanbanComponent.prototype, "templates", void 0);
 KanbanComponent = __decorate([
     Component({
-        selector: 's-kanban',
-        template: "<div class=\"kanban\">\n  <s-kanban-column\n    *ngFor=\"let column of data.columns\"\n    [data]=\"column\"\n    [headerTemplate]=\"columnHeaderTemplate\">\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      <ng-container *ngIf=\"!columnEmptyMessageTemplate; then defaultEmptyMessageTemplate else customEmptyMessageTemplate\"></ng-container>\n\n      <ng-template #defaultEmptyMessageTemplate>\n        <div *ngIf=\"!column.items.length\" class=\"empty-message\">\n          <p class=\"text\">\n            <span class=\"fas fa-clock\"></span>&nbsp;\n            <span>{{ \"platform.angular_components.count_items_in_target\" | translate:{ count: column.items.length, target: column.title } }}</span>\n          </p>\n        </div>\n      </ng-template>\n\n      <ng-template #customEmptyMessageTemplate>\n        <ng-container *ngTemplateOutlet=\"columnEmptyMessageTemplate; context: { $implicit: column }\"></ng-container>\n      </ng-template>\n\n      <div\n        *ngFor=\"let item of column.items\"\n        cdkDrag\n        [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"item.disabled\"\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          <ng-container *ngIf=\"selectedItems.size > 1; then itemDraggingTemplate else itemTemplate\"></ng-container>\n        </ng-container>\n\n        <ng-template #itemTemplate>\n          <s-kanban-item\n              [item]=\"item\"\n              [selected]=\"selectedItems.has(item)\"\n              [headerTemplate]=\"itemHeaderTemplate\"\n              [bodyTemplate]=\"itemBodyTemplate\"\n              [footerTemplate]=\"itemFooterTemplate\">\n            </s-kanban-item>\n        </ng-template>\n\n        <ng-template #itemDraggingTemplate>\n          <s-kanban-item-dragging [quantityItems]=\"selectedItems.size\"></s-kanban-item-dragging>\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:-ms-flexbox;display:flex;gap:16px;width:100%}.kanban .empty-message{display:-ms-flexbox;display:flex;-ms-flex-pack:center;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{-ms-flex-direction:column;flex-direction:column}}s-kanban-column{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;min-width:292px}.placeholder{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.placeholder .placeholder-line{background-color:#a5a5b2;height:1px;margin:6px 0;width:50%}"]
+        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    <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      <ng-container *ngIf=\"!columnEmptyMessageTemplate; then defaultEmptyMessageTemplate else customEmptyMessageTemplate\"></ng-container>\n\n      <ng-template #defaultEmptyMessageTemplate>\n        <div *ngIf=\"!column.items.length\" class=\"empty-message\">\n          <p class=\"text\">\n            <span class=\"fas fa-clock\"></span>&nbsp;\n            <span>{{ \"platform.angular_components.count_items_in_target\" | translate:{ count: column.items.length, target: column.title } }}</span>\n          </p>\n        </div>\n      </ng-template>\n\n      <ng-template #customEmptyMessageTemplate>\n        <ng-container *ngTemplateOutlet=\"columnEmptyMessageTemplate; context: { $implicit: column }\"></ng-container>\n      </ng-template>\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          <ng-container *ngIf=\"selectedItems.size > 1; then itemDraggingTemplate else itemTemplate\"></ng-container>\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            </s-kanban-item>\n        </ng-template>\n\n        <ng-template #itemDraggingTemplate>\n          <s-kanban-item-dragging [quantityItems]=\"selectedItems.size\"></s-kanban-item-dragging>\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:-ms-flexbox;display:flex;gap:16px;overflow:auto;width:100%}.kanban .empty-message{display:-ms-flexbox;display:flex;-ms-flex-pack:center;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{-ms-flex-direction:column;flex-direction:column}}s-kanban-column{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;min-width:292px}.placeholder{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.placeholder .placeholder-line{background-color:#a5a5b2;height:1px;margin:6px 0;width:50%}"]
     })
 ], KanbanComponent);
 
 let KanbanColumnComponent = class KanbanColumnComponent {
     constructor(kanbanEventService) {
         this.kanbanEventService = kanbanEventService;
+        this.showCheckbox = true;
         this.selectionControl = new FormControl(false);
         this._unsubscribe$ = new Subject();
     }
     ngOnInit() {
         this._validateInputs();
         this._subscriveEvents();
+        this._createTieredOptions();
     }
     ngOnDestroy() {
         this._unsubscribe$.next();
         this._unsubscribe$.complete();
     }
+    _createTieredOptions() {
+        const options = [];
+        this.data.options.forEach((option) => {
+            options.push(Object.assign(Object.assign({}, option), { command: () => { option.command(this.data); } }));
+        });
+        this.data.options = options;
+    }
     _subscriveEvents() {
         this.selectionControl.valueChanges
             .pipe(takeUntil(this._unsubscribe$))
@@ -13728,13 +13825,16 @@ KanbanColumnComponent.ctorParameters = () => [
 __decorate([
     Input()
 ], KanbanColumnComponent.prototype, "data", void 0);
+__decorate([
+    Input()
+], KanbanColumnComponent.prototype, "showCheckbox", void 0);
 __decorate([
     Input()
 ], KanbanColumnComponent.prototype, "headerTemplate", void 0);
 KanbanColumnComponent = __decorate([
     Component({
         selector: "s-kanban-column",
-        template: "<div class=\"kanban-column\">\n    <div class=\"kanban-column__header\">\n        <div class=\"content\">\n            <form>\n                <input\n                    type=\"checkbox\"\n                    name=\"checkbox\"\n                    [formControl]=\"selectionControl\">\n            </form>\n\n            <ng-container *ngIf=\"!headerTemplate; then defaultHeaderTemplate else customHeaderTemplate\"></ng-container>\n            \n            <ng-template #defaultHeaderTemplate>\n                <div class=\"header\">\n                    <span class=\"title\">{{ data.title }} ({{ data.items.length }})</span>\n                </div>\n            </ng-template>\n            \n            <ng-template #customHeaderTemplate>\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: data }\"></ng-container>\n            </ng-template>\n        </div>\n        <s-button\n            *ngIf=\"data.options\"\n            priority=\"default\"\n            [disabled]=\"false\"\n            [auxiliary]=\"true\"\n            size=\"small\"\n            [model]=\"data.options\">\n        </s-button>\n    </div>\n    <div class=\"kanban-column__body\">\n        <ng-content></ng-content>\n    </div>\n</div>",
+        template: "<div class=\"kanban-column\">\n    <div class=\"kanban-column__header\">\n        <div class=\"content\">\n            <form>\n                <input\n                    *ngIf=\"showCheckbox\"\n                    type=\"checkbox\"\n                    name=\"checkbox\"\n                    [formControl]=\"selectionControl\">\n            </form>\n\n            <ng-container *ngIf=\"!headerTemplate; then defaultHeaderTemplate else customHeaderTemplate\"></ng-container>\n            \n            <ng-template #defaultHeaderTemplate>\n                <div class=\"header\">\n                    <span class=\"title\">{{ data.title }} ({{ data.items.length }})</span>\n                </div>\n            </ng-template>\n            \n            <ng-template #customHeaderTemplate>\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: data }\"></ng-container>\n            </ng-template>\n        </div>\n        <s-button\n            *ngIf=\"data.options\"\n            priority=\"default\"\n            [disabled]=\"false\"\n            [auxiliary]=\"true\"\n            size=\"small\"\n            [model]=\"data.options\">\n        </s-button>\n    </div>\n    <div class=\"kanban-column__body\">\n        <ng-content></ng-content>\n    </div>\n</div>",
         styles: [".kanban-column{-ms-flex-align:center;align-items:center;background-color:#fbfafc;border:1px solid #dedce5;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;min-height:120px;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%}.kanban-column .kanban-column__header{-ms-flex-align:center;align-items:center;border-bottom:1px solid #dedce5;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:16px 16px 8px;width:100%}.kanban-column .kanban-column__header .content{display:-ms-flexbox;display:flex;gap:16px}.kanban-column .kanban-column__header .content .teste{display:-ms-flexbox;display:flex;-ms-flex-direction:column;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:-ms-flexbox;display:flex;height:100%;-ms-flex-pack:center;justify-content:center;width:100%}"]
     })
 ], KanbanColumnComponent);
@@ -13759,6 +13859,10 @@ let KanbanItemComponent = class KanbanItemComponent {
     constructor(_kanbanEventService) {
         this._kanbanEventService = _kanbanEventService;
         this.selected = false;
+        this.showCheckbox = true;
+    }
+    ngOnInit() {
+        this._createTieredOptions();
     }
     onSelectedChange(value) {
         if (value) {
@@ -13768,6 +13872,13 @@ let KanbanItemComponent = class KanbanItemComponent {
             this._kanbanEventService.emitUnselectItemEvent(this.item);
         }
     }
+    _createTieredOptions() {
+        const options = [];
+        this.item.options.forEach((option) => {
+            options.push(Object.assign(Object.assign({}, option), { command: () => { option.command(this.item); } }));
+        });
+        this.item.options = options;
+    }
 };
 KanbanItemComponent.ctorParameters = () => [
     { type: KanbanEventService }
@@ -13778,6 +13889,9 @@ __decorate([
 __decorate([
     Input()
 ], KanbanItemComponent.prototype, "selected", void 0);
+__decorate([
+    Input()
+], KanbanItemComponent.prototype, "showCheckbox", void 0);
 __decorate([
     Input()
 ], KanbanItemComponent.prototype, "headerTemplate", void 0);
@@ -13789,9 +13903,9 @@ __decorate([
 ], KanbanItemComponent.prototype, "footerTemplate", void 0);
 KanbanItemComponent = __decorate([
     Component({
-        selector: 's-kanban-item',
-        template: "<p-tieredMenu\n    #optionsMenu\n    [popup]=\"true\"\n    appendTo=\"body\"\n    [baseZIndex]=\"9999\"\n    [model]=\"item.options\">\n</p-tieredMenu>\n\n<div\n    class=\"kanban-item\"\n    [ngClass]=\"{\n        'kanban-item--selected': selected && !item.disabled,\n        'kanban-item--disabled': item.disabled\n    }\">\n    <div class=\"kanban-item__header\">\n        <div class=\"content\">\n            <form>\n                <input\n                    *ngIf=\"!item.disabled\"\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)=\"optionsMenu.toggle($event); $event.stopPropagation();\">\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>",
-        styles: [".kanban-item{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px 0 rgba(0,0,0,.25);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:16px;min-width:260px;padding:16px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.kanban-item .kanban-item__header{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.kanban-item .kanban-item__header .content{display:-ms-flexbox;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:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.kanban-item .kanban-item__footer .date-info{-ms-flex-align:center;align-items:center;color:#6e7280;display:-ms-flexbox;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%}"]
+        selector: "s-kanban-item",
+        template: "<p-tieredMenu\n    #optionsMenu\n    [popup]=\"true\"\n    appendTo=\"body\"\n    [baseZIndex]=\"9999\"\n    [model]=\"item.options\">\n</p-tieredMenu>\n\n<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)=\"optionsMenu.toggle($event); $event.stopPropagation();\">\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>",
+        styles: [".kanban-item{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px 0 rgba(0,0,0,.25);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:16px;min-width:260px;padding:16px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.kanban-item .kanban-item__header{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.kanban-item .kanban-item__header .content{display:-ms-flexbox;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:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.kanban-item .kanban-item__footer .date-info{-ms-flex-align:center;align-items:center;color:#6e7280;display:-ms-flexbox;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}"]
     })
 ], KanbanItemComponent);