@colijnit/corecomponents_v12 12.0.43 → 12.0.46

package/lib/components/co-dialog/style/_material-definition.scss

@@ -3,7 +3,7 @@ $cc-co-dialog-font-size: $cc-font-size-default !default;
 $cc-co-dialog-header-font-family: $cc-font-family !default;
 $cc-co-dialog-header-font-size: $cc-font-size-default !default;
 $cc-co-dialog-header-text-color: $cc-color-dark !default;
-$cc-co-dialog-header-background-color: $cc-color-light-accent !default;
+$cc-co-dialog-header-background-color: white !default;
 $cc-co-dialog-header-padding: 10px !default;
 $cc-co-dialog-min-width: 250px !default;
 $cc-co-dialog-background-color: $cc-color-light !default;

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

@@ -1,13 +1,18 @@
-import { EventEmitter } from "@angular/core";
+import { EventEmitter } from '@angular/core';
 import { CoreComponentsIcon } from "../../core/enum/core-components-icon.enum";
 import { IconCacheService } from "../icon/icon-cache.service";
 export declare class GridToolbarComponent {
     iconsService: IconCacheService;
     readonly icons: typeof CoreComponentsIcon;
+    showEdit: boolean;
+    showAdd: boolean;
+    showDelete: boolean;
+    deleteEnabled: boolean;
     editClick: EventEmitter<MouseEvent>;
     cancelClick: EventEmitter<void>;
     saveClick: EventEmitter<void>;
     addClick: EventEmitter<void>;
+    deleteClick: EventEmitter<void>;
     showClass(): boolean;
     constructor(iconsService: IconCacheService);
 }

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

@@ -1,10 +1,38 @@
 @include export-module('cc-grid-toolbar-layout') {
 
   .co-grid-toolbar {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin: $cc-grid-toolbar-margin;
+    padding: $cc-grid-toolbar-padding;
+    border-style: $cc-grid-toolbar-border-style;
+    border-width: $cc-grid-toolbar-border-width;
+    border-radius: $cc-grid-toolbar-border-radius;
     .grid-toolbar-wrapper {
       display: flex;
       flex-direction: row;
       column-gap: 5px;
     }
+    .co-icon {
+      width: $cc-grid-toolbar-button-size;
+      height: $cc-grid-toolbar-button-size;
+      border-style: $cc-grid-toolbar-button-border-style;
+      border-width: $cc-grid-toolbar-button-border-width;
+      border-radius: $cc-grid-toolbar-button-border-radius;
+      opacity: 1;
+      cursor: pointer;
+      &.disabled {
+        cursor: default;
+        opacity: 0.5;
+      }
+      svg { // for fontawesome icons
+        height: 60%;
+        width: 60%;
+      }
+    }
+    &.right {
+      justify-content: flex-end;
+    }
   }
 }

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

@@ -0,0 +1,15 @@
+$cc-grid-toolbar-background-color: transparent !default;
+$cc-grid-toolbar-border-style: solid !default;
+$cc-grid-toolbar-border-color: black !default;
+$cc-grid-toolbar-border-width: 0 !default;
+$cc-grid-toolbar-border-radius: 5px !default;
+$cc-grid-toolbar-margin: 0 0 10px 0 !default;
+$cc-grid-toolbar-padding: 0 !default;
+
+$cc-grid-toolbar-button-size: 30px !default;
+$cc-grid-toolbar-button-background-color: white !default;
+$cc-grid-toolbar-button-color: black !default;
+$cc-grid-toolbar-button-border-style: solid !default;
+$cc-grid-toolbar-button-border-color: black !default;
+$cc-grid-toolbar-button-border-width: 1px !default;
+$cc-grid-toolbar-button-border-radius: 5px !default;

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

@@ -1,5 +1,17 @@
 @include export-module('cc-grid-toolbar-theme') {
 
   .co-grid-toolbar {
+    background-color: $cc-grid-toolbar-background-color;
+    border-color: $cc-grid-toolbar-border-color;
+    .co-icon {
+      background-color: $cc-grid-toolbar-button-background-color;
+      border-color: $cc-grid-toolbar-button-border-color;
+      svg { // for fontawesome icons
+        fill: $cc-grid-toolbar-button-color;
+      }
+      & [fill] { // for own icons
+        fill: $cc-grid-toolbar-button-color;
+      }
+    }
   }
 }

package/lib/components/input-date-range-picker/input-date-range-picker.component.d.ts

@@ -10,6 +10,7 @@ export declare class InputDateRangePickerComponent extends BaseInputComponent<Da
     dateRangeChange: EventEmitter<Date[]>;
     close: EventEmitter<{}>;
     select: EventEmitter<{}>;
+    cleared: EventEmitter<{}>;
     showClass(): boolean;
     rangeChange(): void;
 }

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

@@ -2,7 +2,7 @@ import { EventEmitter, QueryList } from "@angular/core";
 import { SimpleGridColumnDirective } from "./simple-grid-column.directive";
 import { CdkDrag, CdkDragDrop, CdkDropList } from "@angular/cdk/drag-drop";
 export declare abstract class BaseSimpleGridComponent {
-    private readonly MIN_COLUMN_WIDTH;
+    readonly MIN_COLUMN_WIDTH: number;
     set content(columnComponents: QueryList<SimpleGridColumnDirective>);
     set data(value: Object[]);
     get data(): Object[];
@@ -24,6 +24,8 @@ export declare abstract class BaseSimpleGridComponent {
     selectRow: EventEmitter<{}>;
     dblClickRow: EventEmitter<{}>;
     saveRow: EventEmitter<{}>;
+    deleteRow: EventEmitter<{}>;
+    addRow: EventEmitter<void>;
     rowVisible: EventEmitter<{}>;
     handleMouseMove(event: MouseEvent): void;
     handleMouseUp(event: MouseEvent): void;
@@ -40,5 +42,6 @@ export declare abstract class BaseSimpleGridComponent {
     singleColumnIndex(row: Object): number;
     private _setColumns;
     private _prepareData;
+    private _resizeColumnsToFit;
     private _setWidthOfAllColumns;
 }

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

@@ -1,6 +1,6 @@
-import { ChangeDetectorRef, EventEmitter } from "@angular/core";
+import { ChangeDetectorRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { ColumnAlign, SimpleGridColumnDirective } from "./simple-grid-column.directive";
-export declare class SimpleGridCellComponent {
+export declare class SimpleGridCellComponent implements OnChanges {
     private _changeDetector;
     readonly defaultTextAlign: ColumnAlign;
     set editTemplateContent(template: any);
@@ -20,6 +20,7 @@ export declare class SimpleGridCellComponent {
     private _template;
     private _inputTemplate;
     constructor(_changeDetector: ChangeDetectorRef);
+    ngOnChanges(changes: SimpleChanges): void;
     private _setFocusComponent;
     private _getFirstFormInput;
     private _createNewEvent;

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

@@ -21,12 +21,16 @@ export declare class SimpleGridColumnDirective implements OnInit, OnDestroy {
     format: string;
     resizable: boolean;
     required: boolean;
-    width: number;
+    autoFit: boolean;
+    set width(value: number | string);
+    get width(): number | string;
     readonly: boolean;
     collection: {}[];
     order: number;
     singleColumn: boolean;
-    originalWidth: number;
+    originalWidth: number | string;
+    widthPercentage: string;
+    private _width;
     constructor(elementRef: ElementRef);
     ngOnInit(): void;
     ngOnDestroy(): void;

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

@@ -1,12 +1,15 @@
 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";
+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 headerCells(cells: any);
+    showAdd: boolean;
+    showDelete: boolean;
+    rightToolbar: boolean;
     showClass(): boolean;
     handleKeyDown(event: KeyboardEvent): void;
     editing: boolean;
@@ -19,9 +22,10 @@ export declare class SimpleGridComponent extends BaseSimpleGridComponent {
     constructor(_changeDetection: ChangeDetectorRef, _formMaster: FormMasterService);
     isSingleColumn(column: any): boolean;
     rowContainsSingleColumn(row: any, columns: any): boolean;
-    addRow(): void;
+    addNewRow(): void;
     validateAndSave(stopediting?: boolean): boolean;
     cancelEditRow(): void;
+    removeRow(): void;
     handleClickRow(event: MouseEvent, index: number): void;
     selectTheRow(index: number, emit?: boolean): void;
     handleDblClickRow(event: MouseEvent, index: number): void;

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

@@ -10,6 +10,10 @@
     border-collapse: collapse;
   }
   // styling outside of grid because of drag and drop functionality
+  .simple-grid-column-auto-fit {
+    white-space: nowrap;
+    width: 1%;
+  }
   .simple-grid-column-header-wrapper {
     font-family: $cc-simple-grid-header-font-familiy;
     font-size: $cc-simple-grid-header-font-size;
@@ -39,7 +43,7 @@
   .simple-grid-column-cell {
     padding: $cc-simple-grid-cell-padding;
     align-items: $cc-simple-grid-row-align-items;
-    vertical-align: middle;
+    //vertical-align: middle;
   }
   .co-simple-grid-cell {
     width: 100%;

package/lib/core/enum/core-components-icon.enum.d.ts

@@ -102,6 +102,7 @@ export declare enum CoreComponentsIcon {
     Finish = "finish",
     FixedOptionValueTree = "fixed_option_value_tree",
     FixedTreeOptionValue = "fixed_tree_option_value",
+    FloppyDiskSolid = "floppy_disk_solid",
     FolderArrow = "FolderArrow",
     FolderArrowIn = "folder_arrow_in",
     Formula = "formula",
@@ -177,6 +178,7 @@ export declare enum CoreComponentsIcon {
     OverBooking = "over_booking",
     PauseCircle = "pause_circle",
     PencilRoundOpen = "pencil_round_open",
+    PenToSquareSolid = "pen_to_square_solid",
     Phone = "phone",
     PhoneRoundOpen = "phone_round_open",
     Piechart = "piechart",
@@ -187,6 +189,7 @@ export declare enum CoreComponentsIcon {
     PlusRoundOpen = "plus_round_open",
     PlusSimple = "plus_simple",
     PlusSkinny = "plus_skinny",
+    PlusSolid = "plus_solid",
     PlusStars = "plus_stars",
     Pointer = "pointer",
     Pointer3d = "pointer_3d",
@@ -214,6 +217,7 @@ export declare enum CoreComponentsIcon {
     ResizeUp = "resize_up",
     Returns = "returns",
     ReturnGoods = "return_goods",
+    RotateLeftSolid = "rotate_left_solid",
     SaveDisk = "save_disk",
     SaveSkinny = "save_skinny",
     ScaleBalanced = "scale_balanced",
@@ -264,6 +268,7 @@ export declare enum CoreComponentsIcon {
     Transactions = "transactions",
     TransactionDetail = "transaction_detail",
     TrashBin = "TrashBin",
+    TrashCanSolid = "trash_can_solid",
     TriangleDown = "triangle_down",
     TriangleLarge = "triangle_large",
     TriangleLeft = "triangle_left",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/corecomponents_v12",
-  "version": "12.0.43",
+  "version": "12.0.46",
   "description": "Colijn IT core components for Angular 12",
   "private": false,
   "peerDependencies": {