@seniorsistemas/angular-components 17.2.20 → 17.3.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/animations'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@angular/forms'), require('@angular/router'), require('primeng/breadcrumb'), require('primeng/tieredmenu'), require('primeng/tooltip'), require('primeng/dom'), require('primeng/calendar'), require('@ngx-translate/core'), require('ngx-mask'), require('@angular/common/http'), require('angular2-hotkeys'), require('bignumber.js'), require('primeng/autocomplete'), require('primeng/dialog'), require('primeng/table'), require('@seniorsistemas/ng2-currency-mask'), require('@seniorsistemas/senior-platform-data'), require('moment'), require('ngx-cookie-service'), require('ng2-currency-mask'), require('primeng/button'), require('primeng/checkbox'), require('primeng/chips'), require('primeng/dropdown'), require('primeng/fieldset'), require('primeng/inputmask'), require('primeng/inputtext'), require('primeng/inputtextarea'), require('primeng/keyfilter'), require('primeng/multiselect'), require('primeng/panel'), require('primeng/radiobutton'), require('primeng/slider'), require('primeng/api'), require('primeng/progressbar'), require('@angular/platform-browser'), require('@angular/cdk/clipboard'), require('cropperjs'), require('element-resize-detector'), require('@angular/cdk/a11y'), require('primeng/scrollpanel'), require('primeng/sidebar'), require('primeng/confirmdialog'), require('@codemirror/view'), require('@codemirror/state'), require('@codemirror/lint'), require('@codemirror/language'), require('@lezer/generator'), require('@codemirror/highlight'), require('@codemirror/autocomplete'), require('@codemirror/tooltip'), require('@codemirror/gutter')) :
-    typeof define === 'function' && define.amd ? define('@seniorsistemas/angular-components', ['exports', '@angular/core', '@angular/animations', 'rxjs', 'rxjs/operators', '@angular/common', '@angular/forms', '@angular/router', 'primeng/breadcrumb', 'primeng/tieredmenu', 'primeng/tooltip', 'primeng/dom', 'primeng/calendar', '@ngx-translate/core', 'ngx-mask', '@angular/common/http', 'angular2-hotkeys', 'bignumber.js', 'primeng/autocomplete', 'primeng/dialog', 'primeng/table', '@seniorsistemas/ng2-currency-mask', '@seniorsistemas/senior-platform-data', 'moment', 'ngx-cookie-service', 'ng2-currency-mask', 'primeng/button', 'primeng/checkbox', 'primeng/chips', 'primeng/dropdown', 'primeng/fieldset', 'primeng/inputmask', 'primeng/inputtext', 'primeng/inputtextarea', 'primeng/keyfilter', 'primeng/multiselect', 'primeng/panel', 'primeng/radiobutton', 'primeng/slider', 'primeng/api', 'primeng/progressbar', '@angular/platform-browser', '@angular/cdk/clipboard', 'cropperjs', 'element-resize-detector', '@angular/cdk/a11y', 'primeng/scrollpanel', 'primeng/sidebar', 'primeng/confirmdialog', '@codemirror/view', '@codemirror/state', '@codemirror/lint', '@codemirror/language', '@lezer/generator', '@codemirror/highlight', '@codemirror/autocomplete', '@codemirror/tooltip', '@codemirror/gutter'], factory) :
-    (global = global || self, factory((global.seniorsistemas = global.seniorsistemas || {}, global.seniorsistemas['angular-components'] = {}), global.ng.core, global.ng.animations, global.rxjs, global.rxjs.operators, global.ng.common, global.ng.forms, global.ng.router, global.breadcrumb, global.tieredmenu, global.tooltip, global.dom, global.calendar, global.core$1, global.ngxMask, global.ng.common.http, global.angular2Hotkeys, global.BigNumber, global.autocomplete$1, global.dialog, global.table, global.ng2CurrencyMask, global.seniorPlatformData, global.moment_, global.ngxCookieService, global.ng2CurrencyMask$1, global.button, global.checkbox, global.chips, global.dropdown, global.fieldset, global.inputmask, global.inputtext, global.inputtextarea, global.keyfilter, global.multiselect, global.panel, global.radiobutton, global.slider, global.api, global.progressbar, global.ng.platformBrowser, global.ng.cdk.clipboard, global.Cropper, global.elementResizeDetectorMaker_, global.ng.cdk.a11y, global.scrollpanel, global.sidebar, global.confirmdialog, global.view, global.state, global.lint, global.language, global.generator, global.highlight, global.autocomplete$2, global.tooltip$1, global.gutter));
-}(this, (function (exports, core, animations, rxjs, operators, common, forms, router, breadcrumb, tieredmenu, tooltip, dom, calendar, core$1, ngxMask, http, angular2Hotkeys, BigNumber, autocomplete$1, dialog, table, ng2CurrencyMask, seniorPlatformData, moment_, ngxCookieService, ng2CurrencyMask$1, button, checkbox, chips, dropdown, fieldset, inputmask, inputtext, inputtextarea, keyfilter, multiselect, panel, radiobutton, slider, api, progressbar, platformBrowser, clipboard, Cropper, elementResizeDetectorMaker_, a11y, scrollpanel, sidebar, confirmdialog, view, state, lint, language, generator, highlight, autocomplete$2, tooltip$1, gutter) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/animations'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@angular/forms'), require('@angular/router'), require('primeng/breadcrumb'), require('primeng/tieredmenu'), require('primeng/tooltip'), require('primeng/dom'), require('primeng/calendar'), require('@ngx-translate/core'), require('ngx-mask'), require('@angular/common/http'), require('angular2-hotkeys'), require('bignumber.js'), require('primeng/autocomplete'), require('primeng/dialog'), require('primeng/table'), require('@seniorsistemas/ng2-currency-mask'), require('@seniorsistemas/senior-platform-data'), require('moment'), require('ngx-cookie-service'), require('ng2-currency-mask'), require('primeng/button'), require('primeng/checkbox'), require('primeng/chips'), require('primeng/dropdown'), require('primeng/fieldset'), require('primeng/inputmask'), require('primeng/inputtext'), require('primeng/inputtextarea'), require('primeng/keyfilter'), require('primeng/multiselect'), require('primeng/panel'), require('primeng/radiobutton'), require('primeng/slider'), require('primeng/api'), require('primeng/progressbar'), require('@angular/platform-browser'), require('@angular/cdk/clipboard'), require('cropperjs'), require('element-resize-detector'), require('@angular/cdk/a11y'), require('primeng/scrollpanel'), require('primeng/sidebar'), require('primeng/confirmdialog'), require('@codemirror/view'), require('@codemirror/state'), require('@codemirror/lint'), require('@codemirror/language'), require('@lezer/generator'), require('@codemirror/highlight'), require('@codemirror/autocomplete'), require('@codemirror/tooltip'), require('@codemirror/gutter'), require('@angular/cdk/drag-drop')) :
+    typeof define === 'function' && define.amd ? define('@seniorsistemas/angular-components', ['exports', '@angular/core', '@angular/animations', 'rxjs', 'rxjs/operators', '@angular/common', '@angular/forms', '@angular/router', 'primeng/breadcrumb', 'primeng/tieredmenu', 'primeng/tooltip', 'primeng/dom', 'primeng/calendar', '@ngx-translate/core', 'ngx-mask', '@angular/common/http', 'angular2-hotkeys', 'bignumber.js', 'primeng/autocomplete', 'primeng/dialog', 'primeng/table', '@seniorsistemas/ng2-currency-mask', '@seniorsistemas/senior-platform-data', 'moment', 'ngx-cookie-service', 'ng2-currency-mask', 'primeng/button', 'primeng/checkbox', 'primeng/chips', 'primeng/dropdown', 'primeng/fieldset', 'primeng/inputmask', 'primeng/inputtext', 'primeng/inputtextarea', 'primeng/keyfilter', 'primeng/multiselect', 'primeng/panel', 'primeng/radiobutton', 'primeng/slider', 'primeng/api', 'primeng/progressbar', '@angular/platform-browser', '@angular/cdk/clipboard', 'cropperjs', 'element-resize-detector', '@angular/cdk/a11y', 'primeng/scrollpanel', 'primeng/sidebar', 'primeng/confirmdialog', '@codemirror/view', '@codemirror/state', '@codemirror/lint', '@codemirror/language', '@lezer/generator', '@codemirror/highlight', '@codemirror/autocomplete', '@codemirror/tooltip', '@codemirror/gutter', '@angular/cdk/drag-drop'], factory) :
+    (global = global || self, factory((global.seniorsistemas = global.seniorsistemas || {}, global.seniorsistemas['angular-components'] = {}), global.ng.core, global.ng.animations, global.rxjs, global.rxjs.operators, global.ng.common, global.ng.forms, global.ng.router, global.breadcrumb, global.tieredmenu, global.tooltip, global.dom, global.calendar, global.core$1, global.ngxMask, global.ng.common.http, global.angular2Hotkeys, global.BigNumber, global.autocomplete$1, global.dialog, global.table, global.ng2CurrencyMask, global.seniorPlatformData, global.moment_, global.ngxCookieService, global.ng2CurrencyMask$1, global.button, global.checkbox, global.chips, global.dropdown, global.fieldset, global.inputmask, global.inputtext, global.inputtextarea, global.keyfilter, global.multiselect, global.panel, global.radiobutton, global.slider, global.api, global.progressbar, global.ng.platformBrowser, global.ng.cdk.clipboard, global.Cropper, global.elementResizeDetectorMaker_, global.ng.cdk.a11y, global.scrollpanel, global.sidebar, global.confirmdialog, global.view, global.state, global.lint, global.language, global.generator, global.highlight, global.autocomplete$2, global.tooltip$1, global.gutter, global.ng.cdk['drag-drop']));
+}(this, (function (exports, core, animations, rxjs, operators, common, forms, router, breadcrumb, tieredmenu, tooltip, dom, calendar, core$1, ngxMask, http, angular2Hotkeys, BigNumber, autocomplete$1, dialog, table, ng2CurrencyMask, seniorPlatformData, moment_, ngxCookieService, ng2CurrencyMask$1, button, checkbox, chips, dropdown, fieldset, inputmask, inputtext, inputtextarea, keyfilter, multiselect, panel, radiobutton, slider, api, progressbar, platformBrowser, clipboard, Cropper, elementResizeDetectorMaker_, a11y, scrollpanel, sidebar, confirmdialog, view, state, lint, language, generator, highlight, autocomplete$2, tooltip$1, gutter, dragDrop) { 'use strict';
 
     var BigNumber__default = 'default' in BigNumber ? BigNumber['default'] : BigNumber;
     Cropper = Cropper && Cropper.hasOwnProperty('default') ? Cropper['default'] : Cropper;
@@ -15639,7 +15639,7 @@
             core.Component({
                 selector: "s-progressbar-determinate",
                 template: "<div class=\"progressbar-determinate\">\n    <div class=\"progressbar-container\">\n       <div\n          class=\"progressbar-active\"\n          [ngClass]=\"{\n             'progressbar-active--blue' : activeColor === 'blue',\n             'progressbar-active--green': activeColor === 'green',\n             'progressbar-active--red': activeColor === 'red',\n             'progressbar-active--yellow': activeColor === 'yellow'\n          }\"\n          [ngStyle]=\"{ 'width': value + '%' }\">\n          {{ showValue && value ? value + '%' : '' }}\n       </div>\n    </div>\n    <div\n       *ngIf=\"targetValue\"\n       class=\"target\"\n       [ngStyle]=\"{\n          'left': targetValue <= 50 ? targetValue + '%' : 'unset',\n          'right': targetValue > 50 ? 100 - targetValue + '%' : 'unset',\n          'align-items': targetValue > 50 ? 'flex-end' : 'flex-start'\n       }\">\n       <span class=\"target-line\"></span>\n       <span class=\"target-label\">\n           {{ targetLabel || value + '%' }}\n       </span>\n    </div>\n </div>\n ",
-                styles: [".progressbar-determinate{position:relative}.progressbar-determinate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progressbar-determinate .progressbar-container .progressbar-active{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:14px;height:100%;-ms-flex-pack:center;justify-content:center;line-height:150%;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:80%}.progressbar-determinate .progressbar-container .progressbar-active--blue{background-color:#428bca}.progressbar-determinate .progressbar-container .progressbar-active--green{background-color:#0c9348}.progressbar-determinate .progressbar-container .progressbar-active--red{background-color:#c13018}.progressbar-determinate .progressbar-container .progressbar-active--yellow{background-color:#fcbf10}.progressbar-determinate .target{-ms-flex-align:start;align-items:flex-start;bottom:-38px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute}.progressbar-determinate .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progressbar-determinate .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:\"Open Sans\",sans-serif;font-size:12px;line-height:150%;padding:2px 12px}"]
+                styles: [".progressbar-determinate{position:relative}.progressbar-determinate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progressbar-determinate .progressbar-container .progressbar-active{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:14px;height:100%;-ms-flex-pack:center;justify-content:center;line-height:150%;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:80%}.progressbar-determinate .progressbar-container .progressbar-active--blue{background-color:#428bca}.progressbar-determinate .progressbar-container .progressbar-active--green{background-color:#0c9348}.progressbar-determinate .progressbar-container .progressbar-active--red{background-color:#c13018}.progressbar-determinate .progressbar-container .progressbar-active--yellow{background-color:#fcbf10;color:#212533}.progressbar-determinate .target{-ms-flex-align:start;align-items:flex-start;bottom:-38px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute}.progressbar-determinate .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progressbar-determinate .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:\"Open Sans\",sans-serif;font-size:12px;line-height:150%;padding:2px 12px}"]
             })
         ], ProgressBarDeterminateComponent);
         return ProgressBarDeterminateComponent;
@@ -15898,6 +15898,8 @@
     }());
 
     var fallback = {
+        "platform.angular_components.count_items_in_target": "{{ count }} itens em {{ target }}",
+        "platform.angular_components.count_items_selected": "{{ count }} itens selecionados",
         "platform.angular_components.january": "Janeiro",
         "platform.angular_components.february": "Fevereiro",
         "platform.angular_components.march": "Março",
@@ -16194,6 +16196,429 @@
         "platform.angular_components.date_modified_custom_blob": "Enviado às {{hour}}:{{minutes}} de {{day}}/{{month}}/{{fullYear}}"
     };
 
+
+    (function (KanbanTemplateTypes) {
+        KanbanTemplateTypes["ColumnHeader"] = "column-header";
+        KanbanTemplateTypes["ColumnEmptyMessage"] = "column-empty-message";
+        KanbanTemplateTypes["ItemHeader"] = "item-header";
+        KanbanTemplateTypes["ItemBody"] = "item-body";
+        KanbanTemplateTypes["ItemFooter"] = "item-footer";
+    })(exports.KanbanTemplateTypes || (exports.KanbanTemplateTypes = {}));
+
+    var TemplateDirective = /** @class */ (function () {
+        function TemplateDirective(template) {
+            this.template = template;
+        }
+        TemplateDirective.ctorParameters = function () { return [
+            { type: core.TemplateRef }
+        ]; };
+        __decorate([
+            core.Input("sTemplate")
+        ], TemplateDirective.prototype, "type", void 0);
+        TemplateDirective = __decorate([
+            core.Directive({
+                selector: "[sTemplate]",
+            })
+        ], TemplateDirective);
+        return TemplateDirective;
+    }());
+
+    var KanbanEventService = /** @class */ (function () {
+        function KanbanEventService() {
+            this.selectAllColumnItemsEvent = new core.EventEmitter();
+            this.unselectAllColumnItemsEvent = new core.EventEmitter();
+            this.selectItemEvent = new core.EventEmitter();
+            this.unselectItemEvent = new core.EventEmitter();
+        }
+        KanbanEventService.prototype.emitSelectAllColumnItemsEvent = function (column) {
+            this.selectAllColumnItemsEvent.emit(column);
+        };
+        KanbanEventService.prototype.emitUnselectAllColumnItemsEvent = function (column) {
+            this.unselectAllColumnItemsEvent.emit(column);
+        };
+        KanbanEventService.prototype.emitSelectItemEvent = function (item) {
+            this.selectItemEvent.emit(item);
+        };
+        KanbanEventService.prototype.emitUnselectItemEvent = function (item) {
+            this.unselectItemEvent.emit(item);
+        };
+        KanbanEventService = __decorate([
+            core.Injectable()
+        ], KanbanEventService);
+        return KanbanEventService;
+    }());
+
+    var KanbanComponent = /** @class */ (function () {
+        function KanbanComponent(kanbanEventService) {
+            this.kanbanEventService = kanbanEventService;
+            this.itemsMoved = new core.EventEmitter();
+            this.dataUpdated = new core.EventEmitter();
+            this.itemsSelected = new core.EventEmitter();
+            this.selectedItems = new Set();
+            this.draggingItems = new Set();
+            this._unsubscribe$ = new rxjs.Subject();
+        }
+        KanbanComponent.prototype.ngOnInit = function () {
+            this._subscribeEvents();
+            this._normalizeData();
+            this._validateInputs();
+        };
+        KanbanComponent.prototype.ngAfterContentInit = function () {
+            this._getTemplates();
+        };
+        KanbanComponent.prototype.ngOnDestroy = function () {
+            this._unsubscribe$.next();
+            this._unsubscribe$.complete();
+        };
+        KanbanComponent.prototype.drop = function (event) {
+            var _this = this;
+            var _a;
+            var previousColumn = this.data.columns.find(function (column) { return column.id === event.previousContainer.id; });
+            var targetColumn = this.data.columns.find(function (column) { return column.id === event.container.id; });
+            if (!previousColumn || !targetColumn) {
+                throw new Error("Unable to obtain information about columns when performing drag and drop");
+            }
+            if (event.previousContainer === event.container) {
+                dragDrop.moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+            }
+            else {
+                dragDrop.transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+            }
+            this.selectedItems.forEach(function (item) {
+                var previousIndex = event.previousContainer.data.indexOf(item);
+                if (previousIndex !== -1 && item !== event.item.data) {
+                    if (event.previousContainer === event.container) {
+                        dragDrop.moveItemInArray(event.container.data, previousIndex, event.currentIndex);
+                    }
+                    else {
+                        dragDrop.transferArrayItem(event.previousContainer.data, event.container.data, previousIndex, event.currentIndex);
+                    }
+                }
+            });
+            this.selectedItems.add(event.item.data);
+            this.itemsMoved.emit({
+                items: __spread(this.selectedItems),
+                previousColumn: previousColumn,
+                targetColumn: targetColumn,
+            });
+            if ((_a = this.dataUpdated.observers) === null || _a === void 0 ? void 0 : _a.length) {
+                this.dataUpdated.emit(__assign({}, this.data));
+            }
+            this.data.columns.forEach(function (column) {
+                _this.kanbanEventService.emitUnselectAllColumnItemsEvent(column);
+            });
+            this.selectedItems.clear();
+        };
+        KanbanComponent.prototype.selectItem = function (event, item, column) {
+            if (event.ctrlKey) {
+                if (this.selectedItems.delete(item)) {
+                    this.kanbanEventService.emitUnselectItemEvent(item);
+                }
+                else {
+                    if (this.selectedColumn && !this.selectedColumn.items.includes(item)) {
+                        this.selectedItems.clear();
+                    }
+                    this.selectedItems.add(item);
+                    this.selectedColumn = column;
+                    this.kanbanEventService.emitSelectItemEvent(item);
+                }
+            }
+            else {
+                this.selectedItems.clear();
+                this.selectedItems.add(item);
+                this.selectedColumn = column;
+                this.kanbanEventService.emitSelectItemEvent(item);
+            }
+        };
+        KanbanComponent.prototype.dragStarted = function () {
+            var _this = this;
+            this.selectedItems.forEach(function (item) {
+                _this.draggingItems.add(item);
+            });
+        };
+        KanbanComponent.prototype.dragReleased = function () {
+            this.draggingItems.clear();
+        };
+        KanbanComponent.prototype.getLinkedColumns = function (currentColumn) {
+            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);
+        };
+        KanbanComponent.prototype.getColumnEmptyMessageTemplate = function () {
+            return this._getCustomTemplate(exports.KanbanTemplateTypes.ColumnEmptyMessage);
+        };
+        KanbanComponent.prototype.getItemHeaderTemplate = function () {
+            return this._getCustomTemplate(exports.KanbanTemplateTypes.ItemHeader);
+        };
+        KanbanComponent.prototype.getItemBodyTemplate = function () {
+            return this._getCustomTemplate(exports.KanbanTemplateTypes.ItemBody);
+        };
+        KanbanComponent.prototype.getItemFooterTemplate = function () {
+            return this._getCustomTemplate(exports.KanbanTemplateTypes.ItemFooter);
+        };
+        KanbanComponent.prototype._getCustomTemplate = function (type) {
+            var _a;
+            return (_a = this.templates.find(function (template) { return template.type === type; })) === null || _a === void 0 ? void 0 : _a.template;
+        };
+        KanbanComponent.prototype._subscribeEvents = function () {
+            var _this = this;
+            this.kanbanEventService.selectAllColumnItemsEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function (column) {
+                column.items
+                    .filter(function (item) { return !item.disabled; })
+                    .forEach(function (item) {
+                    _this.selectedItems.add(item);
+                });
+                _this.selectedColumn = column;
+                _this.itemsSelected.emit(__spread(_this.selectedItems));
+            });
+            this.kanbanEventService.unselectAllColumnItemsEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function (_) {
+                _this.selectedItems.clear();
+            });
+            this.kanbanEventService.selectItemEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function (item) {
+                if (_this.selectedColumn && !_this.selectedColumn.items.includes(item)) {
+                    _this.selectedItems.clear();
+                }
+                _this.selectedItems.add(item);
+                _this.itemsSelected.emit(__spread(_this.selectedItems));
+                // Finding the item column and setting selectedColumn.
+                _this.data.columns.forEach(function (column) {
+                    column.items.forEach(function (currentItem) {
+                        if (currentItem === item) {
+                            _this.selectedColumn = column;
+                            return;
+                        }
+                    });
+                });
+            });
+            this.kanbanEventService.unselectItemEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function (item) {
+                _this.selectedItems.delete(item);
+            });
+        };
+        KanbanComponent.prototype._normalizeData = function () {
+            this.data.columns.forEach(function (column) {
+                column.id = column.id || "id-" + Math.random().toString(36).substring(2, 9) + "-" + Date.now().toString(36);
+            });
+        };
+        KanbanComponent.prototype._validateInputs = function () {
+            var columns = this.data.columns;
+            var columnIds = this.data.columns.map(function (column) { return column.id; });
+            if (new Set(columnIds).size !== columns.length) {
+                throw new Error("Repeated IDs are not accepted.");
+            }
+        };
+        KanbanComponent.prototype._getTemplates = function () {
+            this.columnHeaderTemplate = this.getColumnHeaderTemplate();
+            this.columnEmptyMessageTemplate = this.getColumnEmptyMessageTemplate();
+            this.itemHeaderTemplate = this.getItemHeaderTemplate();
+            this.itemBodyTemplate = this.getItemBodyTemplate();
+            this.itemFooterTemplate = this.getItemFooterTemplate();
+        };
+        KanbanComponent.ctorParameters = function () { return [
+            { type: KanbanEventService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], KanbanComponent.prototype, "data", void 0);
+        __decorate([
+            core.Output()
+        ], KanbanComponent.prototype, "itemsMoved", void 0);
+        __decorate([
+            core.Output()
+        ], KanbanComponent.prototype, "dataUpdated", void 0);
+        __decorate([
+            core.Output()
+        ], KanbanComponent.prototype, "itemsSelected", void 0);
+        __decorate([
+            core.ContentChildren(TemplateDirective)
+        ], 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%}"]
+            })
+        ], KanbanComponent);
+        return KanbanComponent;
+    }());
+
+    var KanbanItemComponent = /** @class */ (function () {
+        function KanbanItemComponent(_kanbanEventService) {
+            this._kanbanEventService = _kanbanEventService;
+            this.selected = false;
+        }
+        KanbanItemComponent.prototype.onSelectedChange = function (value) {
+            if (value) {
+                this._kanbanEventService.emitSelectItemEvent(this.item);
+            }
+            else {
+                this._kanbanEventService.emitUnselectItemEvent(this.item);
+            }
+        };
+        KanbanItemComponent.ctorParameters = function () { return [
+            { type: KanbanEventService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], KanbanItemComponent.prototype, "item", void 0);
+        __decorate([
+            core.Input()
+        ], KanbanItemComponent.prototype, "selected", void 0);
+        __decorate([
+            core.Input()
+        ], KanbanItemComponent.prototype, "headerTemplate", void 0);
+        __decorate([
+            core.Input()
+        ], KanbanItemComponent.prototype, "bodyTemplate", void 0);
+        __decorate([
+            core.Input()
+        ], 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%}"]
+            })
+        ], KanbanItemComponent);
+        return KanbanItemComponent;
+    }());
+
+    var KanbanColumnComponent = /** @class */ (function () {
+        function KanbanColumnComponent(kanbanEventService) {
+            this.kanbanEventService = kanbanEventService;
+            this.selectionControl = new forms.FormControl(false);
+            this._unsubscribe$ = new rxjs.Subject();
+        }
+        KanbanColumnComponent.prototype.ngOnInit = function () {
+            this._validateInputs();
+            this._subscriveEvents();
+        };
+        KanbanColumnComponent.prototype.ngOnDestroy = function () {
+            this._unsubscribe$.next();
+            this._unsubscribe$.complete();
+        };
+        KanbanColumnComponent.prototype._subscriveEvents = function () {
+            var _this = this;
+            this.selectionControl.valueChanges
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function (value) {
+                if (value) {
+                    _this.kanbanEventService.emitSelectAllColumnItemsEvent(_this.data);
+                }
+                else {
+                    _this.kanbanEventService.emitUnselectAllColumnItemsEvent(_this.data);
+                }
+            });
+            this.kanbanEventService.unselectItemEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function (_) {
+                _this.selectionControl.setValue(false, { emitEvent: false });
+            });
+            this.kanbanEventService.selectItemEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function (item) {
+                if (!_this.data.items.includes(item)) {
+                    _this.selectionControl.setValue(false, { emitEvent: false });
+                }
+            });
+            this.kanbanEventService.selectAllColumnItemsEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function (column) {
+                if (_this.data !== column) {
+                    _this.selectionControl.setValue(false, { emitEvent: false });
+                }
+            });
+            this.kanbanEventService.unselectAllColumnItemsEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function (column) {
+                if (_this.data !== column) {
+                    _this.selectionControl.setValue(false, { emitEvent: false });
+                }
+            });
+        };
+        KanbanColumnComponent.prototype._validateInputs = function () {
+            if (!this.data) {
+                throw new Error("data parameter is required");
+            }
+        };
+        KanbanColumnComponent.ctorParameters = function () { return [
+            { type: KanbanEventService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], KanbanColumnComponent.prototype, "data", 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>",
+                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);
+        return KanbanColumnComponent;
+    }());
+
+    var KanbanItemDraggingComponent = /** @class */ (function () {
+        function KanbanItemDraggingComponent() {
+            this.quantityItems = 0;
+        }
+        __decorate([
+            core.Input()
+        ], KanbanItemDraggingComponent.prototype, "quantityItems", void 0);
+        KanbanItemDraggingComponent = __decorate([
+            core.Component({
+                selector: "s-kanban-item-dragging",
+                template: "<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>",
+                styles: [".kanban-item-dragging{background-color:#fff;border:1px solid #428bca;border-radius:4px;box-shadow:0 1px 5px 0 rgba(0,0,0,.25);height:52px;padding:16px;width:260px}.kanban-item-dragging .content{display:-ms-flexbox;display:flex;gap:16px}.kanban-item-dragging--over{left:12px;position:relative;top:-64px}"]
+            })
+        ], KanbanItemDraggingComponent);
+        return KanbanItemDraggingComponent;
+    }());
+
+    var KanbanModule = /** @class */ (function () {
+        function KanbanModule() {
+        }
+        KanbanModule = __decorate([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    forms.FormsModule,
+                    forms.ReactiveFormsModule,
+                    core$1.TranslateModule,
+                    dragDrop.DragDropModule,
+                    BadgeModule,
+                    ButtonModule,
+                    tieredmenu.TieredMenuModule,
+                ],
+                declarations: [
+                    KanbanComponent,
+                    KanbanItemComponent,
+                    KanbanColumnComponent,
+                    KanbanItemDraggingComponent,
+                    TemplateDirective,
+                ],
+                exports: [
+                    KanbanComponent,
+                    TemplateDirective,
+                ],
+                providers: [KanbanEventService],
+            })
+        ], KanbanModule);
+        return KanbanModule;
+    }());
+
     exports.AccordionComponent = AccordionComponent;
     exports.AccordionModule = AccordionModule;
     exports.AccordionPanelComponent = AccordionPanelComponent;
@@ -16257,6 +16682,8 @@
     exports.ImageCropperService = ImageCropperService;
     exports.InfoSignDirective = InfoSignDirective;
     exports.InfoSignModule = InfoSignModule;
+    exports.KanbanComponent = KanbanComponent;
+    exports.KanbanModule = KanbanModule;
     exports.LoadingStateComponent = LoadingStateComponent;
     exports.LoadingStateDirective = LoadingStateDirective;
     exports.LoadingStateModule = LoadingStateModule;
@@ -16326,6 +16753,7 @@
     exports.TableHeaderCheckboxModule = TableHeaderCheckboxModule;
     exports.TableModule = TableModule;
     exports.TaxCalculationLanguageConfigs = TaxCalculationLanguageConfigs;
+    exports.TemplateDirective = TemplateDirective;
     exports.TextAreaField = TextAreaField;
     exports.TextField = TextField;
     exports.ThumbnailComponent = ThumbnailComponent;
@@ -16390,6 +16818,10 @@
     exports.ɵcp = TieredMenuDividerComponent;
     exports.ɵcq = ProgressBarDeterminateComponent;
     exports.ɵcr = ProgressBarIndeterminateComponent;
+    exports.ɵcs = KanbanEventService;
+    exports.ɵct = KanbanItemComponent;
+    exports.ɵcu = KanbanColumnComponent;
+    exports.ɵcv = KanbanItemDraggingComponent;
     exports.ɵd = LocalizedCurrencyImpurePipe;
     exports.ɵe = LocalizedBignumberPipe;
     exports.ɵf = LocalizedBignumberImpurePipe;