@seniorsistemas/angular-components 17.9.1 → 17.9.3

package/bundles/seniorsistemas-angular-components.umd.js

@@ -641,14 +641,13 @@
         TooltipDirective.prototype.updateTooltipVisibilityWhenFocusOnInput = function () {
             var _this = this;
             if (this.focusedInputRef) {
-                var inputFocus = this.focusedInputRef;
-                var icon_1 = this.getIconFromFocusedInput(inputFocus);
-                this.renderer.listen(inputFocus, 'focus', function () {
+                var icon_1 = this.getIconFromFocusedInput();
+                this.renderer.listen(this.focusedInputRef, 'focus', function () {
                     if (icon_1 && _this.isMatchingTooltip(icon_1)) {
                         _this.createTootipByFocus(icon_1);
                     }
                 });
-                this.renderer.listen(inputFocus, 'blur', function () {
+                this.renderer.listen(this.focusedInputRef, 'blur', function () {
                     if (icon_1 && _this.isMatchingTooltip(icon_1)) {
                         _this.removeTooltip(icon_1);
                         _this.destroy();
@@ -658,16 +657,10 @@
         };
         /**
          * 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.
+         * @returns O ícone do input em focus.
          */
-        TooltipDirective.prototype.getIconFromFocusedInput = function (focusedInput) {
-            var label = document.querySelector("label[for='" + focusedInput.id + "']");
-            if (label) {
-                var icon = label.nextElementSibling;
-                return (icon === null || icon === void 0 ? void 0 : icon.classList.contains('info-sign__icon')) ? icon : null;
-            }
-            return null;
+        TooltipDirective.prototype.getIconFromFocusedInput = function () {
+            return this.elementRef.nativeElement;
         };
         /**
          * Verifica se o ícone tem o tooltip correspondente ao atual.
@@ -14618,6 +14611,8 @@
     var KanbanComponent = /** @class */ (function () {
         function KanbanComponent(kanbanEventService) {
             this.kanbanEventService = kanbanEventService;
+            this.showItemCheckboxes = true;
+            this.showColumnCheckboxes = true;
             this.itemsMoved = new core.EventEmitter();
             this.dataUpdated = new core.EventEmitter();
             this.itemsSelected = new core.EventEmitter();
@@ -14677,6 +14672,8 @@
             this.selectedItems.clear();
         };
         KanbanComponent.prototype.selectItem = function (event, item, column) {
+            if (item.disabled || item.frozen)
+                return;
             if (event.ctrlKey) {
                 if (this.selectedItems.delete(item)) {
                     this.kanbanEventService.emitUnselectItemEvent(item);
@@ -14691,6 +14688,8 @@
                 }
             }
             else {
+                if (this.selectedItems.delete(item))
+                    return;
                 this.selectedItems.clear();
                 this.selectedItems.add(item);
                 this.selectedColumn = column;
@@ -14707,9 +14706,7 @@
             this.draggingItems.clear();
         };
         KanbanComponent.prototype.getLinkedColumns = function (currentColumn) {
-            return this.data.columns
-                .filter(function (column) { return column != currentColumn; })
-                .map(function (column) { return column.id; });
+            return this.data.columns.filter(function (column) { return column != currentColumn; }).map(function (column) { return column.id; });
         };
         KanbanComponent.prototype.getColumnHeaderTemplate = function () {
             return this._getCustomTemplate(exports.KanbanTemplateTypes.ColumnHeader);
@@ -14736,7 +14733,7 @@
                 .pipe(operators.takeUntil(this._unsubscribe$))
                 .subscribe(function (column) {
                 column.items
-                    .filter(function (item) { return !item.disabled; })
+                    .filter(function (item) { return !item.disabled && !item.frozen; })
                     .forEach(function (item) {
                     _this.selectedItems.add(item);
                 });
@@ -14766,9 +14763,7 @@
                     });
                 });
             });
-            this.kanbanEventService.unselectItemEvent
-                .pipe(operators.takeUntil(this._unsubscribe$))
-                .subscribe(function (item) {
+            this.kanbanEventService.unselectItemEvent.pipe(operators.takeUntil(this._unsubscribe$)).subscribe(function (item) {
                 _this.selectedItems.delete(item);
             });
         };
@@ -14797,6 +14792,12 @@
         __decorate([
             core.Input()
         ], KanbanComponent.prototype, "data", void 0);
+        __decorate([
+            core.Input()
+        ], KanbanComponent.prototype, "showItemCheckboxes", void 0);
+        __decorate([
+            core.Input()
+        ], KanbanComponent.prototype, "showColumnCheckboxes", void 0);
         __decorate([
             core.Output()
         ], KanbanComponent.prototype, "itemsMoved", void 0);
@@ -14811,9 +14812,9 @@
         ], KanbanComponent.prototype, "templates", void 0);
         KanbanComponent = __decorate([
             core.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);
         return KanbanComponent;
@@ -14822,17 +14823,27 @@
     var KanbanColumnComponent = /** @class */ (function () {
         function KanbanColumnComponent(kanbanEventService) {
             this.kanbanEventService = kanbanEventService;
+            this.showCheckbox = true;
             this.selectionControl = new forms.FormControl(false);
             this._unsubscribe$ = new rxjs.Subject();
         }
         KanbanColumnComponent.prototype.ngOnInit = function () {
             this._validateInputs();
             this._subscriveEvents();
+            this._createTieredOptions();
         };
         KanbanColumnComponent.prototype.ngOnDestroy = function () {
             this._unsubscribe$.next();
             this._unsubscribe$.complete();
         };
+        KanbanColumnComponent.prototype._createTieredOptions = function () {
+            var _this = this;
+            var options = [];
+            this.data.options.forEach(function (option) {
+                options.push(__assign(__assign({}, option), { command: function () { option.command(_this.data); } }));
+            });
+            this.data.options = options;
+        };
         KanbanColumnComponent.prototype._subscriveEvents = function () {
             var _this = this;
             this.selectionControl.valueChanges
@@ -14883,13 +14894,16 @@
         __decorate([
             core.Input()
         ], KanbanColumnComponent.prototype, "data", void 0);
+        __decorate([
+            core.Input()
+        ], KanbanColumnComponent.prototype, "showCheckbox", void 0);
         __decorate([
             core.Input()
         ], KanbanColumnComponent.prototype, "headerTemplate", void 0);
         KanbanColumnComponent = __decorate([
             core.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);
@@ -14917,7 +14931,11 @@
         function KanbanItemComponent(_kanbanEventService) {
             this._kanbanEventService = _kanbanEventService;
             this.selected = false;
+            this.showCheckbox = true;
         }
+        KanbanItemComponent.prototype.ngOnInit = function () {
+            this._createTieredOptions();
+        };
         KanbanItemComponent.prototype.onSelectedChange = function (value) {
             if (value) {
                 this._kanbanEventService.emitSelectItemEvent(this.item);
@@ -14926,6 +14944,14 @@
                 this._kanbanEventService.emitUnselectItemEvent(this.item);
             }
         };
+        KanbanItemComponent.prototype._createTieredOptions = function () {
+            var _this = this;
+            var options = [];
+            this.item.options.forEach(function (option) {
+                options.push(__assign(__assign({}, option), { command: function () { option.command(_this.item); } }));
+            });
+            this.item.options = options;
+        };
         KanbanItemComponent.ctorParameters = function () { return [
             { type: KanbanEventService }
         ]; };
@@ -14935,6 +14961,9 @@
         __decorate([
             core.Input()
         ], KanbanItemComponent.prototype, "selected", void 0);
+        __decorate([
+            core.Input()
+        ], KanbanItemComponent.prototype, "showCheckbox", void 0);
         __decorate([
             core.Input()
         ], KanbanItemComponent.prototype, "headerTemplate", void 0);
@@ -14946,9 +14975,9 @@
         ], KanbanItemComponent.prototype, "footerTemplate", void 0);
         KanbanItemComponent = __decorate([
             core.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);
         return KanbanItemComponent;
@@ -15014,6 +15043,10 @@
                 this._value = this.defaultValue;
                 var index = this.steps.findIndex(function (step) { return step.value === _this._value; });
                 this.currentIndex = index !== -1 ? index : 0;
+                this.stepChanged.emit({
+                    previous: undefined,
+                    current: this.steps[this.currentIndex],
+                });
                 this.changeDetectorRef.detectChanges();
             }
         };