@colijnit/corecomponents_v12 12.0.21 → 12.0.24

package/lib/components/simple-grid/simple-grid-cell.component.d.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectorRef, EventEmitter } from "@angular/core";
+import { ColumnAlign, SimpleGridColumnDirective } from "./simple-grid-column.directive";
+export declare class SimpleGridCellComponent {
+    private _changeDetector;
+    readonly defaultTextAlign: ColumnAlign;
+    set editTemplateContent(template: any);
+    set noEditTemplateContent(template: any);
+    set noTemplateContent(template: any);
+    column: SimpleGridColumnDirective;
+    row: {};
+    editMode: boolean;
+    set fieldEditMode(value: boolean);
+    get fieldEditMode(): boolean;
+    cellClick: EventEmitter<void>;
+    showClass(): boolean;
+    handleClick(event: MouseEvent): void;
+    private _fieldEditMode;
+    private _focused;
+    private _editTemplate;
+    private _template;
+    private _inputTemplate;
+    constructor(_changeDetector: ChangeDetectorRef);
+    private _setFocusComponent;
+    private _getFirstFormInput;
+    private _createNewEvent;
+    private _getElement;
+    private _detectChanges;
+}

package/lib/components/simple-grid/simple-grid-column.directive.d.ts

@@ -1,18 +1,31 @@
-import { TemplateRef } from "@angular/core";
+import { OnInit, TemplateRef } from "@angular/core";
 export declare enum ColumnAlign {
     Left = "left-align",
     Center = "center-align",
     Right = "right-align"
 }
-export declare class SimpleGridColumnDirective {
+export declare class SimpleGridColumnDirective implements OnInit {
     private static _MinManualResizeWidthPx;
     set template(template: TemplateRef<any>);
     get template(): TemplateRef<any>;
+    set editTemplate(template: TemplateRef<any>);
+    get editTemplate(): TemplateRef<any>;
     headerText: string;
     field: string;
+    codeField: string;
+    displayField: string;
     textAlign: ColumnAlign;
     format: string;
     resizable: boolean;
+    required: boolean;
     width: number;
+    readonly: boolean;
+    collection: {}[];
+    order: number;
+    singleColumn: boolean;
+    ngOnInit(): void;
+    getFieldValue(value: any): string;
     private _template;
+    private _editTemplate;
+    private _setSingleColumnProps;
 }

package/lib/components/simple-grid/simple-grid.component.d.ts

@@ -1,26 +1,43 @@
-import { EventEmitter, QueryList } from "@angular/core";
-import { CdkDrag, CdkDragDrop, CdkDropList } from "@angular/cdk/drag-drop";
-import { ColumnAlign, SimpleGridColumnDirective } from "./simple-grid-column.directive";
-export declare class SimpleGridComponent {
+import { ChangeDetectorRef } from "@angular/core";
+import { FormMasterService } from "../../core/service/form-master.service";
+import { BaseSimpleGridComponent } from "./base-simple-grid.component";
+import { ColumnAlign } from "./simple-grid-column.directive";
+export declare class SimpleGridComponent extends BaseSimpleGridComponent {
+    private _changeDetection;
+    private _formMaster;
     readonly defaultTextAlign: ColumnAlign;
-    set content(columnComponents: QueryList<SimpleGridColumnDirective>);
-    data: Object[];
-    dragDropEnabled: boolean;
+    showClass(): boolean;
+    handleKeyDown(event: KeyboardEvent): void;
+    editting: boolean;
+    editRowIndex: number;
+    editCellIndex: number;
+    selectedRowIndex: number;
+    rowToEdit: any;
+    private _doubleClicked;
+    private _newRow;
+    constructor(_changeDetection: ChangeDetectorRef, _formMaster: FormMasterService);
+    isSingleColumn(column: any): boolean;
+    rowContainsSingleColumn(row: any, columns: any): boolean;
+    addRow(): void;
+    validateAndSave(stopEditting?: boolean): boolean;
+    cancelEditRow(): void;
+    handleClickRow(event: MouseEvent, index: number): void;
+    selectTheRow(index: number, emit?: boolean): void;
+    handleDblClickRow(event: MouseEvent, index: number): void;
+    editRow(event: MouseEvent): void;
+    handleCellClick(index: number): void;
+    private _resetDblClick;
     /**
-     * Should component emit drag and drop actions instead of handle
-     * (update collection) by itself
+     *
+     * @param next; Move to next or previous cell
+     * @param start; Start from cellindex
+     * @private
      */
-    emitDragDrop: boolean;
-    onDrop: EventEmitter<{
-        from: number;
-        to: number;
-    }>;
-    showClass(): boolean;
-    handleMouseMove(event: MouseEvent): void;
-    handleMouseUp(event: MouseEvent): void;
-    columns: SimpleGridColumnDirective[];
-    private _columnForResize;
-    handleSizerMouseDown(event: MouseEvent, column: SimpleGridColumnDirective): void;
-    handleCanDragDrop(drag: CdkDrag, drop: CdkDropList): boolean;
-    handleDrop(event: CdkDragDrop<Object[]>): void;
+    private _nextAvailableCellToEdit;
+    private _getNextEditCellIndex;
+    private _getPreviousEditCellIndex;
+    private _getNextEditRowIndex;
+    private _getPreviousEditRowIndex;
+    private _saveRow;
+    private _detectChanges;
 }

package/lib/components/simple-grid/style/_layout.scss

@@ -7,9 +7,15 @@
   .simple-grid-column-header-wrapper {
     font-family: $cc-simple-grid-header-font-familiy;
     font-size: $cc-simple-grid-header-font-size;
+    font-weight: $cc-simple-grid-header-font-weight;
+    text-transform: $cc-simple-grid-header-text-transform;
     display: flex;
     flex-direction: row;
   }
+  .co-form.simple-grid-row-form {
+    display: flex;
+    width: 100%;
+  }
   .simple-grid-column-header, .simple-grid-column-cell {
     display: flex;
     flex-direction: row;
@@ -18,10 +24,27 @@
   }
   .simple-grid-column-header {
     justify-content: space-between;
+    border-style: $cc-simple-grid-header-border-style;
+    border-width: $cc-simple-grid-header-border-width;
   }
   .simple-grid-column-cell {
     padding-top: $cc-simple-grid-cell-padding-top;
     padding-bottom: $cc-simple-grid-cell-padding-bottom;
+    align-items: $cc-simple-grid-row-align-items;
+  }
+  .co-simple-grid-cell {
+    width: 100%;
+  }
+  .simple-grid-column-cell-value {
+    //height: 100%;
+    width: 100%;
+    > * {
+      //height: 100%;
+      width: 100%;
+    }
+    .e-float-input.e-no-float-label {
+      margin-top: $input-margin-top;
+    }
   }
   .simple-grid-column-header-label {
     user-select: none;

package/lib/components/simple-grid/style/_material-definition.scss

@@ -3,13 +3,22 @@ $cc-simple-grid-font-size: $cc-font-size-default !default;
 
 $cc-simple-grid-header-font-familiy: $cc-font-family !default;
 $cc-simple-grid-header-font-size: $cc-font-size-default !default;
-$cc-simple-grid-header-text-transform: normal !default;
-$cc-simple-grid-header-background-color: $cc-color-light-accent !default;
+$cc-simple-grid-header-font-weight: bold !default;
+$cc-simple-grid-header-text-transform: uppercase !default;
+$cc-simple-grid-header-background-color: white !default;
 $cc-simple-grid-header-padding: 10px 0 !default;
+$cc-simple-grid-header-border-style: solid !default;
+$cc-simple-grid-header-border-width: 0 0 1px 0 !default;
+$cc-simple-grid-header-border-color: $cc-color-action !default;
 $cc-simple-grid-header-sizer-background-color: white !default;
 
-$cc-simple-grid-row-background-color: white !default;
-$cc-simple-grid-row-border: 1px solid !default;
+$cc-simple-grid-row-align-items: center !default;
+$cc-simple-grid-row-background-color: $cc-color-grid-row-background !default;
+$cc-simple-grid-row-odd-background-color: $cc-color-grid-row-odd-background !default;
+$cc-simple-grid-row-selected-background-color: $cc-color-grid-row-selected-background !default;
+$cc-simple-grid-row-edit-input-background-color: white !default;
+$cc-simple-grid-row-hover-background-color: $cc-color-grid-row-hover-background !default;
+$cc-simple-grid-row-border: none !default;
 $cc-simple-grid-row-border-color: $cc-color-border !default;
 $cc-simple-grid-row-border-width: 1px 1px 1px 1px !default;
 $cc-simple-grid-cell-padding-top: 10px !default;

package/lib/components/simple-grid/style/_theme.scss

@@ -3,6 +3,9 @@
     .simple-grid-column-sizer {
       background-color: $cc-simple-grid-header-sizer-background-color;
     }
+    .simple-grid-column-header {
+      border-color: $cc-simple-grid-header-border-color;
+    }
   }
   // styling outside of grid because of drag and drop functionality
   .simple-grid-column-header-wrapper {
@@ -11,5 +14,19 @@
   .simple-grid-row {
     background-color: $cc-simple-grid-row-background-color;
     border-color: $cc-simple-grid-row-border-color;
+    &.selected {
+      background-color: $cc-simple-grid-row-selected-background-color;
+    }
+    &:hover:not(.selected) {
+      background-color: $cc-simple-grid-row-hover-background-color;
+    }
+    &.editting {
+      .form-input {
+        background-color: $cc-simple-grid-row-edit-input-background-color;
+      }
+    }
+  }
+  .simple-grid-row:nth-child(odd):not(.selected) {
+    background-color: $cc-simple-grid-row-odd-background-color;
   }
 }

package/lib/components/simple-grid/style/material.scss

@@ -3,3 +3,4 @@
 @import "./material-definition";
 @import "./layout";
 @import "./theme";
+@import "../../grid-toolbar/style/material";

package/lib/style/_input.mixins.scss

@@ -22,7 +22,7 @@
     }
   }
   &:not(.custom-height) {
-    height: $cc-item-size - 10px;
+    height: $cc-item-size;
     padding-bottom: 7px;
     border-bottom: 1px solid;
     border-color: $cc-color-border;

package/lib/style/_variables.scss

@@ -26,7 +26,6 @@ $cc-input-width: 300px !default;
 $cc-item-size: 50px !default;
 $cc-icon-size: 40px !default;
 $cc-icon-size-small: 30px !default;
-$cc-item-height: 40px !default;
 $cc-default-border-radius: 3px !default;
 
 $cc-color-action: #2b60a7 !default;
@@ -70,6 +69,11 @@ $cc-color-box-shadow: rgba(72,79,96,.25) !default;
 $cc-color-scrollbar-thumb: #484f60 !default;
 $cc-color-scrollbar-background: #e8eceb !default;
 
+$cc-color-grid-row-background: white !default;
+$cc-color-grid-row-odd-background: #fafafa !default;
+$cc-color-grid-row-hover-background: #efeeee !default;
+$cc-color-grid-row-selected-background: #e5e5e5 !default;
+
 $cc-distance-very-small: 2px !default;
 $cc-distance-small: 5px !default;
 $cc-distance-medium: 10px !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/corecomponents_v12",
-  "version": "12.0.21",
+  "version": "12.0.24",
   "description": "Colijn IT core components for Angular 12",
   "private": false,
   "peerDependencies": {
@@ -36,4 +36,4 @@
   "typings": "colijnit-corecomponents_v12.d.ts",
   "metadata": "colijnit-corecomponents_v12.metadata.json",
   "sideEffects": false
-}
+}

package/public-api.d.ts

@@ -8,6 +8,8 @@ export * from './lib/components/co-dialog/co-dialog.module';
 export * from './lib/components/co-dialog/co-dialog.component';
 export * from './lib/components/co-dialog-prompt/co-dialog-prompt.module';
 export * from './lib/components/co-dialog-prompt/co-dialog-prompt.component';
+export * from './lib/components/co-dialog-wizard/co-dialog-wizard.module';
+export * from './lib/components/co-dialog-wizard/co-dialog-wizard.component';
 export * from './lib/components/co-kanban/co-kanban.module';
 export * from './lib/components/co-kanban/co-kanban.component';
 export * from './lib/components/co-schedule/co-schedule.module';