@colijnit/corecomponents_v12 12.0.27 → 12.0.30

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

@@ -1,7 +1,12 @@
+import { EventEmitter } from "@angular/core";
 import { BaseInputComponent } from "../base/base-input.component";
-import { DateRange } from "@syncfusion/ej2-angular-calendars";
-export declare class InputDateRangePickerComponent extends BaseInputComponent<DateRange> {
+export declare class InputDateRangePickerComponent extends BaseInputComponent<Date> {
     dateFormat: string;
     placeholder: string;
+    startDate: Date;
+    endDate: Date;
+    startDateChange: EventEmitter<Date>;
+    endDateChange: EventEmitter<Date>;
     showClass(): boolean;
+    dateRangeChange(): void;
 }

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

@@ -1,11 +1,10 @@
-import { ElementRef, OnDestroy } from "@angular/core";
-import { CoreComponentsIcon } from "../../core/enum/core-components-icon.enum";
-export declare class InputSearchComponent implements OnDestroy {
-    private _elementRef;
+import { EventEmitter, OnDestroy } from '@angular/core';
+import { CoreComponentsIcon } from '../../core/enum/core-components-icon.enum';
+import { BaseInputComponent } from '../base/base-input.component';
+export declare class InputSearchComponent extends BaseInputComponent<string> implements OnDestroy {
     readonly searchIcon: CoreComponentsIcon;
-    placeHolderText: string;
+    placeholder: string;
+    search: EventEmitter<string>;
     showClass(): boolean;
-    constructor(_elementRef: ElementRef);
-    ngOnDestroy(): void;
-    focus(): void;
+    handleKeyDown(event: KeyboardEvent): void;
 }

package/lib/components/input-search/style/_layout.scss

@@ -1,39 +1,4 @@
 @include export-module('cc-input-search-layout') {
   .co-input-search {
-    position: relative;
-    display: flex;
-    flex-shrink: 0;
-    flex-grow: 0;
-    outline: none;
-    overflow: hidden;
-    width: $cc-input-search-width;
-    min-height: $cc-input-search-min-height;
-    border-radius: 3px;
-
-    .input {
-      min-height: $cc-input-search-min-height;
-      width: 100%;
-      background: $cc-input-search-color;
-      font-family: $cc-input-search-font-family;
-      font-size: $cc-input-search-font-size;
-      color: $cc-input-search-text-color;
-      border: none;
-      border-radius: 3px;
-    }
-
-    .input:focus {
-      outline: none;
-      border: none;
-    }
-
-    .input-search-content {
-      overflow: hidden;
-    }
-
-    .search-icon {
-      align-self: center;
-      padding-right: 5px;
-      padding-left: 5px;
-    }
   }
 }

package/lib/components/input-search/style/_material-definition.scss

@@ -1,6 +0,0 @@
-$cc-input-search-font-family: $cc-font-family !default;
-$cc-input-search-font-size: $cc-font-size-default !default;
-$cc-input-search-color: #e0e0e0 !default;
-$cc-input-search-text-color: #252525 !default;
-$cc-input-search-min-height: 35px !default;
-$cc-input-search-width: 320px !default;

package/lib/components/input-search/style/_theme.scss

@@ -1,6 +1,4 @@
 @include export-module('cc-input-search-theme') {
   .co-input-search {
-    color: $cc-input-search-text-color;
-    background-color: $cc-input-search-color;
   }
 }

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

@@ -12,12 +12,19 @@ export declare class InputTextComponent extends BaseInputComponent<any> implemen
     protected formUserChangeListener?: FormInputUserModelChangeListenerService;
     protected ngZoneWrapper?: NgZoneWrapperService;
     elementRef?: ElementRef;
-    readonly Icons: typeof CoreComponentsIcon;
     placeholder: string;
     type: string;
+    min: number;
+    max: number;
     showClearButton: boolean;
     keyDownWhiteList: KeyboardCode[];
+    showPlaceholderOnFocus: boolean;
+    leftIcon: CoreComponentsIcon;
+    set model(value: any);
+    get model(): any;
     showClass(): boolean;
+    get hasLeftIcon(): boolean;
     hasOwnLabel: boolean;
+    hideArrowButtons: boolean;
     constructor(formComponent: FormComponent, changeDetector: ChangeDetectorRef, componentFactoryResolver: ComponentFactoryResolver, formUserChangeListener?: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);
 }

package/lib/components/input-text/style/_layout.scss

@@ -12,5 +12,27 @@
       margin: ($cc-item-size - 8px) / 2 0 0;
       outline: none;
     }
+    &.has-left-icon {
+      .input-text-left-icon {
+        position: absolute;
+        height: $cc-item-size;
+        width: $cc-item-size;
+      }
+      input, label {
+        margin-left: $cc-item-size;
+        width: calc(100% - #{$cc-item-size});
+      }
+    }
+    &.hideArrows {
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+      input[type=number] {
+        -moz-appearance: textfield;
+      }
+    }
   }
 }
+

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

@@ -2,9 +2,12 @@ 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;
     set content(columnComponents: QueryList<SimpleGridColumnDirective>);
-    data: Object[];
+    set data(value: Object[]);
+    get data(): Object[];
     dragDropEnabled: boolean;
+    resizable: boolean;
     inlineEdit: boolean;
     showToolbar: boolean;
     /**
@@ -23,9 +26,17 @@ export declare abstract class BaseSimpleGridComponent {
     handleMouseMove(event: MouseEvent): void;
     handleMouseUp(event: MouseEvent): void;
     columns: SimpleGridColumnDirective[];
+    headerColumns: SimpleGridColumnDirective[];
+    protected _data: Object[];
     private _columnForResize;
+    private _prepared;
+    private _startMousePositionX;
     handleSizerMouseDown(event: MouseEvent, column: SimpleGridColumnDirective): void;
     handleCanDragDrop(drag: CdkDrag, drop: CdkDropList): boolean;
     handleDrop(event: CdkDragDrop<Object[]>): void;
+    isSingleColumnRow(row: Object): boolean;
+    singleColumnIndex(row: Object): number;
     private _setColumns;
+    private _prepareData;
+    private _setWidthOfAllColumns;
 }

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

@@ -1,10 +1,11 @@
-import { OnInit, TemplateRef } from "@angular/core";
+import { ElementRef, OnInit, TemplateRef } from '@angular/core';
 export declare enum ColumnAlign {
     Left = "left-align",
     Center = "center-align",
     Right = "right-align"
 }
 export declare class SimpleGridColumnDirective implements OnInit {
+    elementRef: ElementRef;
     private static _MinManualResizeWidthPx;
     set template(template: TemplateRef<any>);
     get template(): TemplateRef<any>;
@@ -23,6 +24,8 @@ export declare class SimpleGridColumnDirective implements OnInit {
     collection: {}[];
     order: number;
     singleColumn: boolean;
+    originalWidth: number;
+    constructor(elementRef: ElementRef);
     ngOnInit(): void;
     getFieldValue(value: any): string;
     private _template;

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

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef } from "@angular/core";
+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";
@@ -6,6 +6,7 @@ export declare class SimpleGridComponent extends BaseSimpleGridComponent {
     private _changeDetection;
     private _formMaster;
     readonly defaultTextAlign: ColumnAlign;
+    set headerCells(cells: any);
     showClass(): boolean;
     handleKeyDown(event: KeyboardEvent): void;
     editting: boolean;

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

@@ -1,8 +1,14 @@
 @include export-module('cc-simple-grid-layout') {
   .co-simple-grid {
+    display: block;
     font-family: $cc-simple-grid-font-familiy;
     font-size: $cc-simple-grid-font-size;
   }
+  .simple-grid-table {
+    table-layout: fixed;
+    width: 100%;
+    border-collapse: collapse;
+  }
   // styling outside of grid because of drag and drop functionality
   .simple-grid-column-header-wrapper {
     font-family: $cc-simple-grid-header-font-familiy;
@@ -13,20 +19,23 @@
     flex-direction: row;
   }
   .co-form.simple-grid-row-form {
-    display: flex;
+    display: contents;
     width: 100%;
   }
   .simple-grid-column-header, .simple-grid-column-cell {
-    display: flex;
-    flex-direction: row;
-    padding-right: 5px;
-    flex-basis: 100%;
+    //display: flex;
+    //flex-direction: row;
+    //padding-right: 5px;
+    //flex-basis: 100%;
   }
   .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-single-column-cell {
+    width: 100%;
+  }
   .simple-grid-column-cell {
     padding-top: $cc-simple-grid-cell-padding-top;
     padding-bottom: $cc-simple-grid-cell-padding-bottom;
@@ -50,21 +59,22 @@
     user-select: none;
     padding: $cc-simple-grid-header-padding;
     width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   .simple-grid-column-sizer {
     cursor: col-resize;
     width: 5px;
-    height: 100%;
   }
   .simple-grid-column-sizer-placeholder {
     width: 5px;
-    height: 100%;
   }
   .simple-grid-row {
     font-family: $cc-simple-grid-font-familiy;
     font-size: $cc-simple-grid-font-size;
-    display: flex;
-    flex-direction: row;
+    //display: flex;
+    //flex-direction: row;
     border: $cc-simple-grid-row-border;
     border-width: $cc-simple-grid-row-border-width;
   }
@@ -84,6 +94,13 @@
     box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
     0 8px 10px 1px rgba(0, 0, 0, 0.14),
     0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    display: table;
+    td {
+      flex-grow: 2;
+      font-size: 14px;
+      padding: 4px;
+      vertical-align: middle;
+    }
   }
 
   .simple-grid-row.cdk-drag-placeholder {

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

@@ -6,7 +6,7 @@ $cc-simple-grid-header-font-size: $cc-font-size-default !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-padding: 10px 5px !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;

package/lib/style/_variables.scss

@@ -88,8 +88,8 @@ $cc-action-size: 40px !default;
 
 $cc-font-size-input-label: 13px !default;
 $cc-font-size-small: 13px !default;
-$cc-font-size-default: 15px !default;
-$cc-font-size-medium: 12px !default;
+$cc-font-size-default: 12px !default;
+$cc-font-size-medium: 10px !default;
 
 $cc-input-margin-top: 16px !default;
 

package/package.json

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