@colijnit/corecomponents_v12 12.2.27 → 12.2.29

package/lib/components/input-text/input-text.component.d.ts

@@ -31,6 +31,7 @@ export declare class InputTextComponent extends BaseInputComponent<any> implemen
     rightIcon: CoreComponentsIcon;
     leftIconData: SafeHtml | undefined;
     rightIconData: SafeHtml | undefined;
+    selectOnFocus: boolean;
     noStyle: boolean;
     hideArrowButtons: boolean;
     get isDate(): boolean;

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

@@ -34,6 +34,7 @@ export declare abstract class BaseSimpleGridComponent {
     handleMouseUp(event: MouseEvent): void;
     columns: SimpleGridColumnDirective[];
     headerColumns: SimpleGridColumnDirective[];
+    headerColumnsCopy: SimpleGridColumnDirective[];
     protected _data: Object[];
     protected disabledRows: number[];
     private _columnForResize;

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

@@ -22,6 +22,7 @@ export declare class SimpleGridColumnDirective implements OnInit, OnDestroy {
     resizable: boolean;
     required: boolean;
     autoFit: boolean;
+    isSelected: boolean;
     set width(value: number | string);
     get width(): number | string;
     readonly: boolean;

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

@@ -2,7 +2,10 @@ 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 { CoreComponentsIcon } from "../../core/enum/core-components-icon.enum";
+import { IconCacheService } from "../icon/icon-cache.service";
 export declare class SimpleGridComponent extends BaseSimpleGridComponent {
+    icons: IconCacheService;
     private _changeDetection;
     private _formMaster;
     readonly defaultTextAlign: ColumnAlign;
@@ -11,6 +14,7 @@ export declare class SimpleGridComponent extends BaseSimpleGridComponent {
     showDelete: boolean;
     editOnCellClick: boolean;
     rightToolbar: boolean;
+    showGridSettings: boolean;
     rowsPerPage: number;
     rowDisabledFn: Function;
     /**
@@ -20,14 +24,18 @@ export declare class SimpleGridComponent extends BaseSimpleGridComponent {
     showClass(): boolean;
     handleKeyDown(event: KeyboardEvent): void;
     editing: boolean;
+    isSettingsMenuOpen: boolean;
     editRowIndex: number;
     editCellIndex: number;
     selectedRowIndex: number;
     rowToEdit: any;
     currentPage: number;
+    sortColumnValue: string;
+    sortDirection: 'asc' | 'desc';
+    readonly Icons: typeof CoreComponentsIcon;
     private _doubleClicked;
     private _newRow;
-    constructor(_changeDetection: ChangeDetectorRef, _formMaster: FormMasterService);
+    constructor(icons: IconCacheService, _changeDetection: ChangeDetectorRef, _formMaster: FormMasterService);
     handleClickOutsideRow(): void;
     getIsRowDisabled(idx: number): boolean;
     isRowDisabled(row: any, index: number): Promise<boolean>;
@@ -42,6 +50,12 @@ export declare class SimpleGridComponent extends BaseSimpleGridComponent {
     handleDblClickRow(event: MouseEvent, index: number, row: any): Promise<void>;
     editRow(event: MouseEvent, selectCell?: boolean): void;
     handleCellClick(event: MouseEvent, row: any, rowIndex: number, cellIndex: number): Promise<void>;
+    toggleSettingsMenu(): void;
+    toggleColumnMenu(col: any): void;
+    hideColumn(col: any): void;
+    private _sortData;
+    showAllColumns(): void;
+    exportToExcel(): void;
     protected prepareDataRow(row: any, index: number): void;
     private _resetDblClick;
     /**

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

@@ -35,6 +35,11 @@
     text-transform: $cc-simple-grid-header-text-transform;
     display: flex;
     flex-direction: row;
+    position: relative;
+
+    &.selected {
+      background-color: $cc-color-light-accent;
+    }
   }
   .co-form.simple-grid-row-form {
     display: contents;
@@ -109,6 +114,9 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     border-bottom: 2px solid $cc-color-grid-row-hover-background;
+    &.with-menu {
+      cursor: pointer;
+    }
   }
   .simple-grid-column-sizer {
     cursor: col-resize;
@@ -152,7 +160,23 @@
     text-align: left;
     justify-content: flex-start;
   }
+  .grid-settings {
+    display: flex;
+    justify-content: flex-end;
+    position: relative;
+    padding-bottom: 4px;
+    box-shadow: inset 0 -2px $cc-color-grid-row-hover-background;
+    border: none;
+
+    co-button {
+      margin-top: -4px;
+      cursor: pointer;
 
+      &.selected {
+        filter: brightness(75%);
+      }
+    }
+  }
   .simple-grid-row.cdk-drag-preview {
     box-sizing: border-box;
     border-radius: 4px;
@@ -181,5 +205,49 @@
       margin: $cc-simple-grid-pagination-bar-margin;
     }
   }
+
+  .settings-menu,
+  .column-menu {
+    position: absolute;
+    top: 42px;
+    right: 4px;
+    width: 250px;
+    padding: 0 8px 8px;
+    border-radius: 5px;
+    color: $cc-color-font;
+    box-shadow: 0 0 8px 0 $cc-color-box-shadow;
+    background-color: $cc-color-grey;
+    z-index: 1;
+
+    h3 {
+      text-align: left;
+    }
+
+    ul {
+      list-style-type: none;
+      border-top: 1px solid $cc-color-light-accent;
+      text-align: left;
+      font-size: $cc-font-size-default;
+
+      li {
+        margin-top: 4px;
+        padding: 8px;
+        border-radius: 5px;
+        text-transform: capitalize;
+        font-weight: normal;
+        background-color: $cc-color-grey;
+        cursor: pointer;
+
+        &:hover {
+          filter: brightness(95%);
+        }
+      }
+    }
+  }
+
+  .column-menu {
+    right: auto;
+    left: 0;
+  }
 }
 

package/package.json

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