@colijnit/corecomponents_v12 12.2.2 → 12.2.4
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/colijnit-corecomponents_v12.umd.js +31 -6
- package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
- package/colijnit-corecomponents_v12.metadata.json +1 -1
- package/esm2015/lib/components/co-dialog/co-dialog.component.js +2 -2
- package/esm2015/lib/components/grid-toolbar/grid-toolbar.component.js +7 -2
- package/esm2015/lib/components/input-date-picker/input-date-picker.component.js +5 -1
- package/esm2015/lib/components/simple-grid/simple-grid.component.js +22 -4
- package/fesm2015/colijnit-corecomponents_v12.js +32 -5
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/button/style/_layout.scss +17 -0
- package/lib/components/grid-toolbar/grid-toolbar.component.d.ts +1 -0
- package/lib/components/input-date-picker/input-date-picker.component.d.ts +1 -0
- package/lib/components/simple-grid/simple-grid.component.d.ts +4 -2
- package/lib/components/simple-grid/style/_layout.scss +4 -0
- package/lib/components/simple-grid/style/_material-definition.scss +2 -0
- package/lib/components/simple-grid/style/_theme.scss +1 -1
- package/package.json +1 -1
|
@@ -4930,7 +4930,7 @@
|
|
|
4930
4930
|
CoDialogComponent.decorators = [
|
|
4931
4931
|
{ type: i0.Component, args: [{
|
|
4932
4932
|
selector: 'co-dialog',
|
|
4933
|
-
template: "\n <div class=\"co-dialog-overlay\" (click)=\"handleOverlayClick($event)\"></div>\n <div class=\"co-dialog-wrapper\" [ngClass]=\"customCssClass ? customCssClass : undefined\" @showHideDialog>\n <div class=\"dialog-header\" *ngIf=\"!borderless\">\n <div class=\"dialog-header-caption\" *ngIf=\"headerTemplate\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\n </div>\n <div class=\"dialog-close-button\" *ngIf=\"showCloseIcon\" (click)=\"handleCloseDialog($event)\">\n <co-icon [icon]=\"icons.CrossSkinny\"></co-icon>\n </div>\n </div>\n <div class=\"dialog-content\" [ngClass]=\"customCssClass ? customCssClass : undefined\">\n <ng-content></ng-content>\n </div>\n <div class=\"dialog-footer\" *ngIf=\"footerTemplate\">\n <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\n </div>\n </div>\n ",
|
|
4933
|
+
template: "\n <div class=\"co-dialog-overlay\" (click)=\"handleOverlayClick($event)\"></div>\n <div class=\"co-dialog-wrapper\" [ngClass]=\"customCssClass ? customCssClass : undefined\" @showHideDialog>\n <div class=\"dialog-header\" *ngIf=\"!borderless\">\n <div class=\"dialog-header-caption\" *ngIf=\"headerTemplate\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\n </div>\n <div class=\"dialog-close-button\" *ngIf=\"showCloseIcon\" (click)=\"handleCloseDialog($event)\">\n <co-icon [icon]=\"icons.CrossSkinny\"></co-icon>\n </div>\n </div>\n <div class=\"dialog-content co-small-scrollbar\" [ngClass]=\"customCssClass ? customCssClass : undefined\">\n <ng-content></ng-content>\n </div>\n <div class=\"dialog-footer\" *ngIf=\"footerTemplate\">\n <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\n </div>\n </div>\n ",
|
|
4934
4934
|
animations: [
|
|
4935
4935
|
animations.trigger('showHideCoDialog', [
|
|
4936
4936
|
animations.transition('void => *', [
|
|
@@ -5442,12 +5442,17 @@
|
|
|
5442
5442
|
GridToolbarComponent.prototype.showClass = function () {
|
|
5443
5443
|
return true;
|
|
5444
5444
|
};
|
|
5445
|
+
GridToolbarComponent.prototype.handleDeleteClick = function () {
|
|
5446
|
+
if (this.deleteEnabled) {
|
|
5447
|
+
this.deleteClick.next();
|
|
5448
|
+
}
|
|
5449
|
+
};
|
|
5445
5450
|
return GridToolbarComponent;
|
|
5446
5451
|
}());
|
|
5447
5452
|
GridToolbarComponent.decorators = [
|
|
5448
5453
|
{ type: i0.Component, args: [{
|
|
5449
5454
|
selector: "co-grid-toolbar",
|
|
5450
|
-
template: "\n <div class=\"grid-toolbar-wrapper\">\n <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.PenToSquareSolid)\" [title]=\"'edit'\" (click)=\"editClick.emit($event)\"></co-icon>\n <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.RotateLeftSolid)\" [title]=\"'cancel'\" (click)=\"cancelClick.emit()\"></co-icon>\n <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.FloppyDiskSolid)\" [title]=\"'save'\" (click)=\"saveClick.emit()\"></co-icon>\n <co-icon *ngIf=\"showAdd || showEdit\" [iconData]=\"iconsService.getIcon(icons.PlusSolid)\" [title]=\"'add'\" (click)=\"addClick.emit()\"></co-icon>\n <co-icon *ngIf=\"showDelete\" [iconData]=\"iconsService.getIcon(icons.TrashCanSolid)\" [title]=\"'delete'\" [class.disabled]=\"!deleteEnabled\" (click)=\"
|
|
5455
|
+
template: "\n <div class=\"grid-toolbar-wrapper\">\n <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.PenToSquareSolid)\" [title]=\"'edit'\" (click)=\"editClick.emit($event)\"></co-icon>\n <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.RotateLeftSolid)\" [title]=\"'cancel'\" (click)=\"cancelClick.emit()\"></co-icon>\n <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.FloppyDiskSolid)\" [title]=\"'save'\" (click)=\"saveClick.emit()\"></co-icon>\n <co-icon *ngIf=\"showAdd || showEdit\" [iconData]=\"iconsService.getIcon(icons.PlusSolid)\" [title]=\"'add'\" (click)=\"addClick.emit()\"></co-icon>\n <co-icon *ngIf=\"showDelete\" [iconData]=\"iconsService.getIcon(icons.TrashCanSolid)\" [title]=\"'delete'\" [class.disabled]=\"!deleteEnabled\" (click)=\"handleDeleteClick()\"></co-icon>\n </div>\n ",
|
|
5451
5456
|
encapsulation: i0.ViewEncapsulation.None
|
|
5452
5457
|
},] }
|
|
5453
5458
|
];
|
|
@@ -5915,12 +5920,15 @@
|
|
|
5915
5920
|
this.modelAsString = null;
|
|
5916
5921
|
}
|
|
5917
5922
|
};
|
|
5923
|
+
InputDatePickerComponent.prototype.handleClearIconClicked = function () {
|
|
5924
|
+
this.setModel(undefined);
|
|
5925
|
+
};
|
|
5918
5926
|
return InputDatePickerComponent;
|
|
5919
5927
|
}(BaseInputDatePickerDirective));
|
|
5920
5928
|
InputDatePickerComponent.decorators = [
|
|
5921
5929
|
{ type: i0.Component, args: [{
|
|
5922
5930
|
selector: 'co-input-date',
|
|
5923
|
-
template: "\n <co-input-text (clickOutside)=\"toggleCalendar(false)\" overlayParent #parentForOverlay=\"overlayParent\"\n [(model)]=\"modelAsString\"\n [rightIcon]=\"rightIcon\"\n [leftIcon]=\"leftIcon\"\n [leftIconData]=\"leftIconData\"\n [pattern]=\"'yyyy-MM-dd'\"\n [type]=\"'date'\"\n [placeholder]=\"placeholder\"\n (rightIconClick)=\"toggleCalendar(true)\"\n (blur)=\"handleDateChange(modelAsString)\"\n ></co-input-text>\n ",
|
|
5931
|
+
template: "\n <co-input-text (clickOutside)=\"toggleCalendar(false)\" overlayParent #parentForOverlay=\"overlayParent\"\n [(model)]=\"modelAsString\"\n [rightIcon]=\"rightIcon\"\n [leftIcon]=\"leftIcon\"\n [leftIconData]=\"leftIconData\"\n [pattern]=\"'yyyy-MM-dd'\"\n [type]=\"'date'\"\n [placeholder]=\"placeholder\"\n (rightIconClick)=\"toggleCalendar(true)\"\n (blur)=\"handleDateChange(modelAsString)\"\n (clearIconClick)=\"handleClearIconClicked()\"\n ></co-input-text>\n ",
|
|
5924
5932
|
providers: [
|
|
5925
5933
|
OverlayService, {
|
|
5926
5934
|
provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputDatePickerComponent; })
|
|
@@ -9811,6 +9819,14 @@
|
|
|
9811
9819
|
this.validateAndSave();
|
|
9812
9820
|
}
|
|
9813
9821
|
};
|
|
9822
|
+
SimpleGridComponent.prototype.isRowDisabled = function (row) {
|
|
9823
|
+
if (this.rowDisabledFn && (typeof this.rowDisabledFn === 'function')) {
|
|
9824
|
+
return this.rowDisabledFn.call(this, row);
|
|
9825
|
+
}
|
|
9826
|
+
else {
|
|
9827
|
+
return false;
|
|
9828
|
+
}
|
|
9829
|
+
};
|
|
9814
9830
|
SimpleGridComponent.prototype.isSingleColumn = function (column) {
|
|
9815
9831
|
return column.singleColumn;
|
|
9816
9832
|
};
|
|
@@ -9871,8 +9887,12 @@
|
|
|
9871
9887
|
SimpleGridComponent.prototype.removeRow = function () {
|
|
9872
9888
|
this.deleteRow.next(this.data[this.selectedRowIndex]);
|
|
9873
9889
|
};
|
|
9874
|
-
SimpleGridComponent.prototype.handleClickRow = function (event, index) {
|
|
9890
|
+
SimpleGridComponent.prototype.handleClickRow = function (event, index, row) {
|
|
9875
9891
|
var _this = this;
|
|
9892
|
+
if (this.isRowDisabled(row)) {
|
|
9893
|
+
this.selectedRowIndex = -1;
|
|
9894
|
+
return;
|
|
9895
|
+
}
|
|
9876
9896
|
setTimeout(function () {
|
|
9877
9897
|
if (_this._doubleClicked) {
|
|
9878
9898
|
return;
|
|
@@ -9890,7 +9910,11 @@
|
|
|
9890
9910
|
}
|
|
9891
9911
|
this._detectChanges();
|
|
9892
9912
|
};
|
|
9893
|
-
SimpleGridComponent.prototype.handleDblClickRow = function (event, index) {
|
|
9913
|
+
SimpleGridComponent.prototype.handleDblClickRow = function (event, index, row) {
|
|
9914
|
+
if (this.isRowDisabled(row)) {
|
|
9915
|
+
this.selectedRowIndex = -1;
|
|
9916
|
+
return;
|
|
9917
|
+
}
|
|
9894
9918
|
this._doubleClicked = true;
|
|
9895
9919
|
this.dblClickRow.next(this.data[index]);
|
|
9896
9920
|
this.selectTheRow(index, false);
|
|
@@ -10056,7 +10080,7 @@
|
|
|
10056
10080
|
SimpleGridComponent.decorators = [
|
|
10057
10081
|
{ type: i0.Component, args: [{
|
|
10058
10082
|
selector: 'co-simple-grid',
|
|
10059
|
-
template: "\n <co-grid-toolbar *ngIf=\"showToolbar\" [class.right]=\"rightToolbar\"\n [showEdit]=\"showEdit\"\n [showAdd]=\"showAdd\"\n [showDelete]=\"showDelete\"\n [deleteEnabled]=\"selectedRowIndex > -1\"\n (addClick)=\"addNewRow()\"\n (editClick)=\"editRow($event)\"\n (saveClick)=\"validateAndSave()\"\n (cancelClick)=\"cancelEditRow()\"\n (deleteClick)=\"removeRow()\"\n ></co-grid-toolbar>\n <table class=\"simple-grid-table\">\n <colgroup>\n <col *ngFor=\"let column of headerColumns; let index = index\"\n [class.simple-grid-column-auto-fit]=\"column.autoFit\"\n [style.width.px]=\"column.width\"\n [style.min-width.px]=\"MIN_COLUMN_WIDTH\">\n </colgroup>\n <thead>\n <tr>\n <th scope=\"col\" #headerCell class=\"simple-grid-column-header\" *ngFor=\"let column of headerColumns; let index = index\">\n <div class=\"simple-grid-column-header-wrapper\" [class.resizable]=\"resizable\"\n [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n <ng-container *ngIf=\"column.headerTemplate; else noHeaderTemplate\">\n <ng-container [ngTemplateOutlet]=\"column.headerTemplate\"></ng-container>\n </ng-container>\n <ng-template #noHeaderTemplate>\n <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n [textContent]=\"column.headerText || ' '\"\n ></div>\n </ng-template>\n <div *ngIf=\"resizable && column.resizable\" class=\"simple-grid-column-sizer\"\n (mousedown)=\"handleSizerMouseDown($event, column)\"\n ></div>\n </div>\n </th>\n </tr>\n </thead>\n <tbody #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n class=\"simple-grid-drag-drop-list\"\n [cdkDropListDisabled]=\"!dragDropEnabled\"\n [cdkDropListData]=\"data\"\n [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n (cdkDropListDropped)=\"handleDrop($event)\">\n <tr class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n [class.editing]=\"rowIndex === editRowIndex\" *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\" cdkDrag\n (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex)\" (
|
|
10083
|
+
template: "\n <co-grid-toolbar *ngIf=\"showToolbar\" [class.right]=\"rightToolbar\"\n [showEdit]=\"showEdit\"\n [showAdd]=\"showAdd\"\n [showDelete]=\"showDelete\"\n [deleteEnabled]=\"selectedRowIndex > -1\"\n (addClick)=\"addNewRow()\"\n (editClick)=\"editRow($event)\"\n (saveClick)=\"validateAndSave()\"\n (cancelClick)=\"cancelEditRow()\"\n (deleteClick)=\"removeRow()\"\n ></co-grid-toolbar>\n <table class=\"simple-grid-table\">\n <colgroup>\n <col *ngFor=\"let column of headerColumns; let index = index\"\n [class.simple-grid-column-auto-fit]=\"column.autoFit\"\n [style.width.px]=\"column.width\"\n [style.min-width.px]=\"MIN_COLUMN_WIDTH\">\n </colgroup>\n <thead>\n <tr>\n <th scope=\"col\" #headerCell class=\"simple-grid-column-header\" *ngFor=\"let column of headerColumns; let index = index\">\n <div class=\"simple-grid-column-header-wrapper\" [class.resizable]=\"resizable\"\n [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n <ng-container *ngIf=\"column.headerTemplate; else noHeaderTemplate\">\n <ng-container [ngTemplateOutlet]=\"column.headerTemplate\"></ng-container>\n </ng-container>\n <ng-template #noHeaderTemplate>\n <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n [textContent]=\"column.headerText || ' '\"\n ></div>\n </ng-template>\n <div *ngIf=\"resizable && column.resizable\" class=\"simple-grid-column-sizer\"\n (mousedown)=\"handleSizerMouseDown($event, column)\"\n ></div>\n </div>\n </th>\n </tr>\n </thead>\n <tbody #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n class=\"simple-grid-drag-drop-list\"\n [cdkDropListDisabled]=\"!dragDropEnabled\"\n [cdkDropListData]=\"data\"\n [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n (cdkDropListDropped)=\"handleDrop($event)\">\n <tr class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n [class.disabled]=\"isRowDisabled(row)\"\n [class.editing]=\"rowIndex === editRowIndex\" *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\" cdkDrag\n (click)=\"handleClickRow($event, rowIndex, row)\" (dblclick)=\"handleDblClickRow($event, rowIndex, row)\" (visibilityChange)=\"rowVisible.next(row)\">\n <co-form class=\"simple-grid-row-form\">\n <ng-container *ngIf=\"isSingleColumnRow(row)\">\n <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumns.length\">\n <co-simple-grid-cell\n [column]=\"columns[singleColumnIndex(row)]\"\n [row]=\"row\"\n [editMode]=\"false\"\n ></co-simple-grid-cell>\n </td>\n </ng-container>\n <ng-container *ngIf=\"!isSingleColumnRow(row)\">\n <ng-container *ngFor=\"let column of headerColumns; let columnIndex = index\">\n <td class=\"simple-grid-column-cell\" *ngIf=\"columnIndex !== singleColumnIndex(row)\">\n <co-simple-grid-cell\n [column]=\"column\"\n [row]=\"row\"\n [editMode]=\"inlineEdit && editing && rowIndex === editRowIndex\"\n [fieldEditMode]=\"editCellIndex === columnIndex\"\n (cellClick)=\"handleCellClick(columnIndex)\"\n ></co-simple-grid-cell>\n <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n </td>\n </ng-container>\n </ng-container>\n </co-form>\n </tr>\n </tbody>\n </table>\n <co-pagination-bar *ngIf=\"data?.length > rowsPerPage\" class=\"pagination-bar\"\n [itemsPerPage]=\"rowsPerPage\"\n [currentPage]=\"currentPage\"\n [totalItems]=\"data.length\"\n [autoHide]=\"true\"\n (previousClick)=\"goToPreviousPage()\"\n (nextClick)=\"goToNextPage()\"\n (pageClick)=\"setCurrentPage($event)\"\n ></co-pagination-bar>\n ",
|
|
10060
10084
|
providers: [
|
|
10061
10085
|
FormMasterService
|
|
10062
10086
|
],
|
|
@@ -10074,6 +10098,7 @@
|
|
|
10074
10098
|
showDelete: [{ type: i0.Input }],
|
|
10075
10099
|
rightToolbar: [{ type: i0.Input }],
|
|
10076
10100
|
rowsPerPage: [{ type: i0.Input }],
|
|
10101
|
+
rowDisabledFn: [{ type: i0.Input }],
|
|
10077
10102
|
showClass: [{ type: i0.HostBinding, args: ['class.co-simple-grid',] }],
|
|
10078
10103
|
handleKeyDown: [{ type: i0.HostListener, args: ['keydown', ['$event'],] }]
|
|
10079
10104
|
};
|