@seniorsistemas/angular-components 17.9.1 → 17.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/seniorsistemas-angular-components.umd.js +50 -14
- package/bundles/seniorsistemas-angular-components.umd.js.map +1 -1
- package/bundles/seniorsistemas-angular-components.umd.min.js +1 -1
- package/bundles/seniorsistemas-angular-components.umd.min.js.map +1 -1
- package/components/kanban/components/kanban-column/kanban-column.component.d.ts +2 -0
- package/components/kanban/components/kanban-item/kanban-item.component.d.ts +7 -4
- package/components/kanban/kanban.component.d.ts +7 -5
- package/components/kanban/models/index.d.ts +1 -1
- package/components/kanban/models/kanban-data.d.ts +9 -2
- package/esm2015/components/kanban/components/kanban-column/kanban-column.component.js +14 -2
- package/esm2015/components/kanban/components/kanban-item/kanban-item.component.js +20 -6
- package/esm2015/components/kanban/kanban.component.js +26 -18
- package/esm2015/components/kanban/models/index.js +1 -1
- package/esm2015/components/kanban/models/kanban-data.js +1 -1
- package/esm5/components/kanban/components/kanban-column/kanban-column.component.js +16 -3
- package/esm5/components/kanban/components/kanban-item/kanban-item.component.js +22 -7
- package/esm5/components/kanban/kanban.component.js +26 -18
- package/esm5/components/kanban/models/index.js +1 -1
- package/esm5/components/kanban/models/kanban-data.js +1 -1
- package/fesm2015/seniorsistemas-angular-components.js +48 -14
- package/fesm2015/seniorsistemas-angular-components.js.map +1 -1
- package/fesm5/seniorsistemas-angular-components.js +50 -14
- package/fesm5/seniorsistemas-angular-components.js.map +1 -1
- package/package.json +1 -1
- package/seniorsistemas-angular-components.metadata.json +1 -1
|
@@ -14618,6 +14618,8 @@
|
|
|
14618
14618
|
var KanbanComponent = /** @class */ (function () {
|
|
14619
14619
|
function KanbanComponent(kanbanEventService) {
|
|
14620
14620
|
this.kanbanEventService = kanbanEventService;
|
|
14621
|
+
this.showItemCheckboxes = true;
|
|
14622
|
+
this.showColumnCheckboxes = true;
|
|
14621
14623
|
this.itemsMoved = new core.EventEmitter();
|
|
14622
14624
|
this.dataUpdated = new core.EventEmitter();
|
|
14623
14625
|
this.itemsSelected = new core.EventEmitter();
|
|
@@ -14677,6 +14679,8 @@
|
|
|
14677
14679
|
this.selectedItems.clear();
|
|
14678
14680
|
};
|
|
14679
14681
|
KanbanComponent.prototype.selectItem = function (event, item, column) {
|
|
14682
|
+
if (item.disabled || item.frozen)
|
|
14683
|
+
return;
|
|
14680
14684
|
if (event.ctrlKey) {
|
|
14681
14685
|
if (this.selectedItems.delete(item)) {
|
|
14682
14686
|
this.kanbanEventService.emitUnselectItemEvent(item);
|
|
@@ -14691,6 +14695,8 @@
|
|
|
14691
14695
|
}
|
|
14692
14696
|
}
|
|
14693
14697
|
else {
|
|
14698
|
+
if (this.selectedItems.delete(item))
|
|
14699
|
+
return;
|
|
14694
14700
|
this.selectedItems.clear();
|
|
14695
14701
|
this.selectedItems.add(item);
|
|
14696
14702
|
this.selectedColumn = column;
|
|
@@ -14707,9 +14713,7 @@
|
|
|
14707
14713
|
this.draggingItems.clear();
|
|
14708
14714
|
};
|
|
14709
14715
|
KanbanComponent.prototype.getLinkedColumns = function (currentColumn) {
|
|
14710
|
-
return this.data.columns
|
|
14711
|
-
.filter(function (column) { return column != currentColumn; })
|
|
14712
|
-
.map(function (column) { return column.id; });
|
|
14716
|
+
return this.data.columns.filter(function (column) { return column != currentColumn; }).map(function (column) { return column.id; });
|
|
14713
14717
|
};
|
|
14714
14718
|
KanbanComponent.prototype.getColumnHeaderTemplate = function () {
|
|
14715
14719
|
return this._getCustomTemplate(exports.KanbanTemplateTypes.ColumnHeader);
|
|
@@ -14736,7 +14740,7 @@
|
|
|
14736
14740
|
.pipe(operators.takeUntil(this._unsubscribe$))
|
|
14737
14741
|
.subscribe(function (column) {
|
|
14738
14742
|
column.items
|
|
14739
|
-
.filter(function (item) { return !item.disabled; })
|
|
14743
|
+
.filter(function (item) { return !item.disabled && !item.frozen; })
|
|
14740
14744
|
.forEach(function (item) {
|
|
14741
14745
|
_this.selectedItems.add(item);
|
|
14742
14746
|
});
|
|
@@ -14766,9 +14770,7 @@
|
|
|
14766
14770
|
});
|
|
14767
14771
|
});
|
|
14768
14772
|
});
|
|
14769
|
-
this.kanbanEventService.unselectItemEvent
|
|
14770
|
-
.pipe(operators.takeUntil(this._unsubscribe$))
|
|
14771
|
-
.subscribe(function (item) {
|
|
14773
|
+
this.kanbanEventService.unselectItemEvent.pipe(operators.takeUntil(this._unsubscribe$)).subscribe(function (item) {
|
|
14772
14774
|
_this.selectedItems.delete(item);
|
|
14773
14775
|
});
|
|
14774
14776
|
};
|
|
@@ -14797,6 +14799,12 @@
|
|
|
14797
14799
|
__decorate([
|
|
14798
14800
|
core.Input()
|
|
14799
14801
|
], KanbanComponent.prototype, "data", void 0);
|
|
14802
|
+
__decorate([
|
|
14803
|
+
core.Input()
|
|
14804
|
+
], KanbanComponent.prototype, "showItemCheckboxes", void 0);
|
|
14805
|
+
__decorate([
|
|
14806
|
+
core.Input()
|
|
14807
|
+
], KanbanComponent.prototype, "showColumnCheckboxes", void 0);
|
|
14800
14808
|
__decorate([
|
|
14801
14809
|
core.Output()
|
|
14802
14810
|
], KanbanComponent.prototype, "itemsMoved", void 0);
|
|
@@ -14811,9 +14819,9 @@
|
|
|
14811
14819
|
], KanbanComponent.prototype, "templates", void 0);
|
|
14812
14820
|
KanbanComponent = __decorate([
|
|
14813
14821
|
core.Component({
|
|
14814
|
-
selector:
|
|
14815
|
-
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> \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",
|
|
14816
|
-
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%}"]
|
|
14822
|
+
selector: "s-kanban",
|
|
14823
|
+
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> \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",
|
|
14824
|
+
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%}"]
|
|
14817
14825
|
})
|
|
14818
14826
|
], KanbanComponent);
|
|
14819
14827
|
return KanbanComponent;
|
|
@@ -14822,17 +14830,27 @@
|
|
|
14822
14830
|
var KanbanColumnComponent = /** @class */ (function () {
|
|
14823
14831
|
function KanbanColumnComponent(kanbanEventService) {
|
|
14824
14832
|
this.kanbanEventService = kanbanEventService;
|
|
14833
|
+
this.showCheckbox = true;
|
|
14825
14834
|
this.selectionControl = new forms.FormControl(false);
|
|
14826
14835
|
this._unsubscribe$ = new rxjs.Subject();
|
|
14827
14836
|
}
|
|
14828
14837
|
KanbanColumnComponent.prototype.ngOnInit = function () {
|
|
14829
14838
|
this._validateInputs();
|
|
14830
14839
|
this._subscriveEvents();
|
|
14840
|
+
this._createTieredOptions();
|
|
14831
14841
|
};
|
|
14832
14842
|
KanbanColumnComponent.prototype.ngOnDestroy = function () {
|
|
14833
14843
|
this._unsubscribe$.next();
|
|
14834
14844
|
this._unsubscribe$.complete();
|
|
14835
14845
|
};
|
|
14846
|
+
KanbanColumnComponent.prototype._createTieredOptions = function () {
|
|
14847
|
+
var _this = this;
|
|
14848
|
+
var options = [];
|
|
14849
|
+
this.data.options.forEach(function (option) {
|
|
14850
|
+
options.push(__assign(__assign({}, option), { command: function () { option.command(_this.data); } }));
|
|
14851
|
+
});
|
|
14852
|
+
this.data.options = options;
|
|
14853
|
+
};
|
|
14836
14854
|
KanbanColumnComponent.prototype._subscriveEvents = function () {
|
|
14837
14855
|
var _this = this;
|
|
14838
14856
|
this.selectionControl.valueChanges
|
|
@@ -14883,13 +14901,16 @@
|
|
|
14883
14901
|
__decorate([
|
|
14884
14902
|
core.Input()
|
|
14885
14903
|
], KanbanColumnComponent.prototype, "data", void 0);
|
|
14904
|
+
__decorate([
|
|
14905
|
+
core.Input()
|
|
14906
|
+
], KanbanColumnComponent.prototype, "showCheckbox", void 0);
|
|
14886
14907
|
__decorate([
|
|
14887
14908
|
core.Input()
|
|
14888
14909
|
], KanbanColumnComponent.prototype, "headerTemplate", void 0);
|
|
14889
14910
|
KanbanColumnComponent = __decorate([
|
|
14890
14911
|
core.Component({
|
|
14891
14912
|
selector: "s-kanban-column",
|
|
14892
|
-
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>",
|
|
14913
|
+
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>",
|
|
14893
14914
|
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%}"]
|
|
14894
14915
|
})
|
|
14895
14916
|
], KanbanColumnComponent);
|
|
@@ -14917,7 +14938,11 @@
|
|
|
14917
14938
|
function KanbanItemComponent(_kanbanEventService) {
|
|
14918
14939
|
this._kanbanEventService = _kanbanEventService;
|
|
14919
14940
|
this.selected = false;
|
|
14941
|
+
this.showCheckbox = true;
|
|
14920
14942
|
}
|
|
14943
|
+
KanbanItemComponent.prototype.ngOnInit = function () {
|
|
14944
|
+
this._createTieredOptions();
|
|
14945
|
+
};
|
|
14921
14946
|
KanbanItemComponent.prototype.onSelectedChange = function (value) {
|
|
14922
14947
|
if (value) {
|
|
14923
14948
|
this._kanbanEventService.emitSelectItemEvent(this.item);
|
|
@@ -14926,6 +14951,14 @@
|
|
|
14926
14951
|
this._kanbanEventService.emitUnselectItemEvent(this.item);
|
|
14927
14952
|
}
|
|
14928
14953
|
};
|
|
14954
|
+
KanbanItemComponent.prototype._createTieredOptions = function () {
|
|
14955
|
+
var _this = this;
|
|
14956
|
+
var options = [];
|
|
14957
|
+
this.item.options.forEach(function (option) {
|
|
14958
|
+
options.push(__assign(__assign({}, option), { command: function () { option.command(_this.item); } }));
|
|
14959
|
+
});
|
|
14960
|
+
this.item.options = options;
|
|
14961
|
+
};
|
|
14929
14962
|
KanbanItemComponent.ctorParameters = function () { return [
|
|
14930
14963
|
{ type: KanbanEventService }
|
|
14931
14964
|
]; };
|
|
@@ -14935,6 +14968,9 @@
|
|
|
14935
14968
|
__decorate([
|
|
14936
14969
|
core.Input()
|
|
14937
14970
|
], KanbanItemComponent.prototype, "selected", void 0);
|
|
14971
|
+
__decorate([
|
|
14972
|
+
core.Input()
|
|
14973
|
+
], KanbanItemComponent.prototype, "showCheckbox", void 0);
|
|
14938
14974
|
__decorate([
|
|
14939
14975
|
core.Input()
|
|
14940
14976
|
], KanbanItemComponent.prototype, "headerTemplate", void 0);
|
|
@@ -14946,9 +14982,9 @@
|
|
|
14946
14982
|
], KanbanItemComponent.prototype, "footerTemplate", void 0);
|
|
14947
14983
|
KanbanItemComponent = __decorate([
|
|
14948
14984
|
core.Component({
|
|
14949
|
-
selector:
|
|
14950
|
-
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>",
|
|
14951
|
-
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%}"]
|
|
14985
|
+
selector: "s-kanban-item",
|
|
14986
|
+
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>",
|
|
14987
|
+
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}"]
|
|
14952
14988
|
})
|
|
14953
14989
|
], KanbanItemComponent);
|
|
14954
14990
|
return KanbanItemComponent;
|