@colijnit/corecomponents_v12 12.2.13 → 12.2.15

package/lib/components/base/dialog-base.component.d.ts

@@ -0,0 +1,4 @@
+import { AppPopupButtonType } from '../../model/enum/app-button-type.enum';
+export declare abstract class DialogBaseComponent {
+    onClose(eventType: AppPopupButtonType, output?: any, rememberChoice?: boolean): void;
+}

package/lib/components/core-dialog/confirmation-dialog/confirmation-dialog.component.d.ts

@@ -0,0 +1,20 @@
+import { IconCacheService } from '../../icon/icon-cache.service';
+import { CoreComponentsIcon } from '../../../core/enum/core-components-icon.enum';
+import { AppPopupType } from '../../../model/enum/app-popup-type.enum';
+import { DialogBaseComponent } from '../../base/dialog-base.component';
+export declare class ConfirmationDialogComponent extends DialogBaseComponent {
+    iconCacheService: IconCacheService;
+    readonly icons: typeof CoreComponentsIcon;
+    readonly ptype: typeof AppPopupType;
+    title: string;
+    text: string;
+    details: string;
+    type: AppPopupType;
+    showRememberCheckbox: boolean;
+    showClass(): boolean;
+    rememberChoice: boolean;
+    constructor(iconCacheService: IconCacheService);
+    handleYesClick(event: MouseEvent): void;
+    handleNoClick(event: MouseEvent): void;
+    handleOkClick(event: MouseEvent): void;
+}

package/lib/components/core-dialog/confirmation-dialog/style/_layout.scss

@@ -0,0 +1,30 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-confirmation-dialog-layout') {
+  .co-confirmation-dialog {
+    .confirmation-dialog-wrapper {
+      font-family: $co-confirmation-dialog-font-family;
+      font-size: $co-confirmation-dialog-font-size;
+      display: flex;
+      flex-direction: column;
+      row-gap: 20px;
+    }
+    .title {
+    }
+    .button-wrapper {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      column-gap: 5px;
+    }
+    .dialog-error-wrapper {
+      padding: 10px 0;
+    }
+    .dialog-error-collapseable-label {
+      margin-top: 20px;
+      .dialog-error-collapseable-content {
+        height: 0;
+      }
+    }
+  }
+}

package/lib/components/core-dialog/confirmation-dialog/style/_material-definition.scss

@@ -0,0 +1,2 @@
+$co-confirmation-dialog-font-family: $co-font-family !default;
+$co-confirmation-dialog-font-size: $co-font-size !default;

package/lib/components/core-dialog/confirmation-dialog/style/_theme.scss

@@ -0,0 +1,6 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-confirmation-dialog-theme') {
+  .co-confirmation-dialog {
+  }
+}

package/lib/components/core-dialog/confirmation-dialog/style/material.scss

@@ -0,0 +1,4 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../../co-dialog/style/material";

package/lib/components/core-dialog/core-dialog.module.d.ts

@@ -0,0 +1,4 @@
+import { ModuleWithProviders } from '@angular/core';
+export declare class CoreDialogModule {
+    static forRoot(): ModuleWithProviders<CoreDialogModule>;
+}

package/lib/components/core-dialog/core-dialog.service.d.ts

@@ -0,0 +1,15 @@
+import { ApplicationRef, ComponentFactoryResolver, Injector } from '@angular/core';
+import { CoreDynamicComponentService } from './core-dynamic-component.service';
+import { DialogResponseInterface } from '../../interfaces/dialog-response.interface';
+export declare class CoreDialogService {
+    private _compFactoryResolver;
+    private appRef;
+    private injector;
+    private dynamicComponentService;
+    private _componentRefs;
+    constructor(_compFactoryResolver: ComponentFactoryResolver, appRef: ApplicationRef, injector: Injector, dynamicComponentService: CoreDynamicComponentService);
+    showYesNo(title: string, text: string, showRememberChoice?: boolean): Promise<DialogResponseInterface>;
+    showError(message: string, details?: string): Promise<any>;
+    showInformation(message: string): Promise<any>;
+    showWarning(message: string): Promise<any>;
+}

package/lib/components/core-dialog/core-dynamic-component.service.d.ts

@@ -0,0 +1,12 @@
+import { ApplicationRef, ComponentFactoryResolver, ComponentRef, Injector, StaticProvider } from "@angular/core";
+import { DialogResponseInterface } from '../../interfaces/dialog-response.interface';
+export declare class CoreDynamicComponentService {
+    private _compFactoryResolver;
+    private appRef;
+    private injector;
+    private _componentRefs;
+    constructor(_compFactoryResolver: ComponentFactoryResolver, appRef: ApplicationRef, injector: Injector);
+    getComponentRefs(): ComponentRef<any>[];
+    createAndReturnComponentRef(componentClass: any, inputs?: any): Promise<any>;
+    createComponent(componentClass: any, inputs?: any, outputs?: any, providers?: StaticProvider[]): Promise<DialogResponseInterface>;
+}

package/lib/components/core-dialog/style/_layout.scss

@@ -0,0 +1,6 @@
+@import "../../../style/mixin";
+
+@include export-module('co-core-dialog-layout') {
+  .co-core-dialog {
+  }
+}

package/lib/components/core-dialog/style/_theme.scss

@@ -0,0 +1,6 @@
+@import "../../../style/mixin";
+
+@include export-module('co-core-dialog-theme') {
+  .co-core-dialog {
+  }
+}

package/lib/components/core-dialog/style/material.scss

@@ -0,0 +1,4 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../confirmation-dialog/style/material";

package/lib/components/input-scanner/bar-code-scanner.d.ts

@@ -0,0 +1,7 @@
+export declare class BarCodeScanner {
+    private _buffer;
+    constructor();
+    close(): void;
+    private _keyPress;
+    private _createScanEvent;
+}

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

@@ -0,0 +1,23 @@
+import { EventEmitter } from '@angular/core';
+import { ScannerService } from './scanner.service';
+import { ScannerInput } from '../../interfaces/scanner-input.interface';
+import { SafeHtml } from '@angular/platform-browser';
+export declare class InputScannerComponent implements ScannerInput {
+    private _scannerService;
+    model: string;
+    placeholder: string;
+    centerLabel: boolean;
+    useLeftIcon: boolean;
+    useRightIcon: boolean;
+    leftIconData: SafeHtml | undefined;
+    rightIconData: SafeHtml | undefined;
+    customCssClass: string;
+    modelChange: EventEmitter<string>;
+    leftIconClick: EventEmitter<MouseEvent>;
+    rightIconClick: EventEmitter<MouseEvent>;
+    search: EventEmitter<string>;
+    barCodeScanned: EventEmitter<string>;
+    showClass(): boolean;
+    constructor(_scannerService: ScannerService);
+    triggerCodeScanned(code?: string): void;
+}

package/lib/components/input-scanner/input-scanner.module.d.ts

@@ -0,0 +1,2 @@
+export declare class InputScannerModule {
+}

package/lib/components/input-scanner/scanner.service.d.ts

@@ -0,0 +1,11 @@
+import { NgZone, OnDestroy } from '@angular/core';
+import { ScannerInput } from '../../interfaces/scanner-input.interface';
+export declare class ScannerService implements OnDestroy {
+    private _ngZone;
+    private _activeInput;
+    private barCodeScanner;
+    constructor(_ngZone: NgZone);
+    ngOnDestroy(): void;
+    registerInput(input: ScannerInput): void;
+    private _barCodeScanned;
+}

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

@@ -0,0 +1,4 @@
+@include export-module('co-input-scanner-layout') {
+  .co-input-scanner {
+  }
+}

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

@@ -0,0 +1,4 @@
+@include export-module('co-input-scanner-theme') {
+  .co-input-scanner {
+  }
+}

package/lib/components/input-scanner/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/lib/components/loader/loader.component.d.ts

@@ -0,0 +1,3 @@
+export declare class LoaderComponent {
+    showClass(): boolean;
+}

package/lib/components/loader/loader.module.d.ts

@@ -0,0 +1,2 @@
+export declare class LoaderModule {
+}

package/lib/components/loader/style/_layout.scss

@@ -0,0 +1,65 @@
+@include export-module('co-loader-layout') {
+  .co-loader {
+    display: block;
+    height: $cc-co-loader-size;
+    width: auto;
+    aspect-ratio: 1;
+    .circle {
+      fill: none;
+    }
+    .main-color {
+      fill: $cc-co-loader-main-color;
+    }
+
+    .second-color {
+      fill: $cc-co-loader-second-color;
+    }
+    #ring {
+      stroke-width: $cc-co-loader-ring-width;
+      fill: $cc-co-loader-background-color;
+      stroke: $cc-co-loader-main-color;
+      transform-origin: center;
+      animation: spin $cc-co-loader-ring-animation-duration linear infinite;
+      stroke-linecap: round;
+      stroke-dasharray: 270 50;
+    }
+    .spinner-gradient-stop {
+      stop-color: $cc-co-loader-main-color;
+    }
+    #i, #o, #n, #e {
+      transform-origin: center;
+      animation: morphingLetters $cc-co-loader-letter-animation-duration ease-in-out infinite;
+      animation-direction: alternate;
+    }
+    #o {
+      animation-delay: .2s;
+    }
+    #n {
+      animation-delay: .4s;
+    }
+    #e {
+      animation-delay: .6s;
+    }
+  }
+}
+
+@keyframes morphingLetters {
+  0% {
+    transform: scale(0);
+  }
+  20% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/lib/components/loader/style/_material-definition.scss

@@ -0,0 +1,7 @@
+$cc-co-loader-size: 100px !default;
+$cc-co-loader-background-color: #171721 !default;
+$cc-co-loader-main-color: #3EE2BE !default;
+$cc-co-loader-second-color: white !default;
+$cc-co-loader-ring-width: 6px !default;
+$cc-co-loader-ring-animation-duration: 2s !default;
+$cc-co-loader-letter-animation-duration: 2s !default;

package/lib/components/loader/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('co-loader-theme') {
+  .co-loader {
+  }
+}

package/lib/components/loader/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

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

@@ -2,16 +2,18 @@ import { ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { ColumnAlign, SimpleGridColumnDirective } from "./simple-grid-column.directive";
 export declare class SimpleGridCellComponent {
     private _changeDetector;
+    get editMode(): boolean;
+    set editMode(value: boolean);
     readonly defaultTextAlign: ColumnAlign;
     set editTemplateContent(template: any);
     set noEditTemplateContent(template: any);
     set noTemplateContent(template: any);
     column: SimpleGridColumnDirective;
     row: {};
-    editMode: boolean;
+    private _editMode;
     set fieldEditMode(value: boolean);
     get fieldEditMode(): boolean;
-    cellClick: EventEmitter<void>;
+    cellClick: EventEmitter<MouseEvent>;
     showClass(): boolean;
     handleClick(event: MouseEvent): void;
     private _fieldEditMode;

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

@@ -23,18 +23,19 @@ export declare class SimpleGridComponent extends BaseSimpleGridComponent {
     private _doubleClicked;
     private _newRow;
     constructor(_changeDetection: ChangeDetectorRef, _formMaster: FormMasterService);
+    handleClickOutsideRow(): void;
     isRowDisabled(row: any): boolean;
     isSingleColumn(column: any): boolean;
     rowContainsSingleColumn(row: any, columns: any): boolean;
-    addNewRow(): void;
+    addNewRow(): Promise<void>;
     validateAndSave(stopediting?: boolean): boolean;
     cancelEditRow(): void;
     removeRow(): void;
     handleClickRow(event: MouseEvent, index: number, row: any): void;
     selectTheRow(index: number, emit?: boolean): void;
     handleDblClickRow(event: MouseEvent, index: number, row: any): void;
-    editRow(event: MouseEvent): void;
-    handleCellClick(index: number): void;
+    editRow(event: MouseEvent, selectCell?: boolean): void;
+    handleCellClick(event: MouseEvent, row: any, rowIndex: number, cellIndex: number): void;
     private _resetDblClick;
     /**
      *
@@ -52,4 +53,5 @@ export declare class SimpleGridComponent extends BaseSimpleGridComponent {
     goToNextPage(): void;
     setCurrentPage(page: number): void;
     private _detectChanges;
+    private _resetEdit;
 }

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

@@ -18,6 +18,7 @@
     }
   }
   .simple-grid-table {
+    height: 1px; // fix for 100% height of cells
     table-layout: fixed;
     width: 100%;
     border-collapse: collapse;
@@ -55,10 +56,10 @@
     width: 100%;
   }
   .simple-grid-column-cell {
-    padding: $cc-simple-grid-cell-padding;
+    //padding: $cc-simple-grid-cell-padding;
     align-items: $cc-simple-grid-row-align-items;
     vertical-align: $cc-simple-grid-row-vertical-align-items;
-    height: $cc-simple-grid-row-height;
+    //height: $cc-simple-grid-row-height;
   }
   .co-simple-grid-cell {
     width: 100%;
@@ -75,10 +76,26 @@
     }
   }
   .simple-grid-column-cell-value {
-    //height: 100%;
+    height: 100%;
     width: 100%;
     > * {
-      //height: 100%;
+      height: 100%;
+      width: 100%;
+    }
+  }
+  .simple-grid-column-cell-field {
+    display: flex;
+    align-items: $cc-simple-grid-cell-field-align-items;
+    border-style: $cc-simple-grid-cell-field-border-style;
+    border-width: $cc-simple-grid-cell-field-border-width;
+    padding: $cc-simple-grid-cell-field-padding;
+    border-radius: $cc-simple-grid-cell-field-radius;
+    span {
+      white-space: normal;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+    .form-input {
       width: 100%;
     }
   }
@@ -101,6 +118,7 @@
     width: 5px;
   }
   .simple-grid-row {
+    height: $cc-simple-grid-row-height;
     font-family: $cc-simple-grid-font-familiy;
     font-size: $cc-simple-grid-font-size;
     //display: flex;
@@ -113,6 +131,14 @@
       opacity: $cc-simple-grid-row-disabled-opacity;
       background: $cc-simple-grid-row-disabled-background-color;
     }
+    &.editing {
+      .form-input {
+        &:before, &:hover, &:hover:before, &.cc-input-focused, &.cc-input-focused:before {
+          border: none !important; // nasty hack, fix asap
+          box-shadow: none !important; // nasty hack, fix asap
+        }
+      }
+    }
   }
   .right-align {
     text-align: right;

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

@@ -18,7 +18,7 @@ $cc-simple-grid-row-vertical-align-items: middle !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-edit-input-background-color: transparent !default;
 $cc-simple-grid-row-hover-background-color: $cc-color-grid-row-hover-background !default;
 $cc-simple-grid-row-hover-background-transparent: transparent !default;
 $cc-simple-grid-row-border: none !default;
@@ -27,9 +27,16 @@ $cc-simple-grid-row-disabled-opacity: 0.5 !default;
 $cc-simple-grid-row-disabled-background-color: white !default;
 $cc-simple-grid-row-border-width: 10px 0 0 0 !default;
 $cc-simple-grid-cell-padding: 15px 5px !default;
-$cc-simple-grid-row-height: auto !default;
+$cc-simple-grid-row-height: 75px !default;
 $cc-simple-grid-row-even-background: #F5F5FC !default;
+
 $cc-simple-grid-cell-icon-size: 20px !default;
+$cc-simple-grid-cell-field-border-style: solid !default;
+$cc-simple-grid-cell-field-border-color: $cc-color-border !default;
+$cc-simple-grid-cell-field-border-width: 1px !default;
+$cc-simple-grid-cell-field-padding: 10px !default;
+$cc-simple-grid-cell-field-radius: 5px !default;
+$cc-simple-grid-cell-field-align-items: center !default;
 
 $cc-simple-grid-pagination-background-color: white !default;
 $cc-simple-grid-pagination-bar-margin: 10px 0 0 0 !default;

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

@@ -12,6 +12,9 @@
       background-color: $cc-simple-grid-header-background-color;
     }
   }
+  .simple-grid-column-cell-field {
+    border-color: $cc-simple-grid-cell-field-border-color;
+  }
   // styling outside of grid because of drag and drop functionality
   .simple-grid-row {
     background-color: $cc-simple-grid-row-background-color;

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

@@ -48,6 +48,7 @@ export declare enum CoreComponentsIcon {
     CashRegisterSimple = "cash_register_simple",
     ChangeLocation = "change_location",
     Check = "check",
+    CheckDuotone = "check_duotone",
     CheckRound = "check_round",
     CheckRoundOpen = "check_round_open",
     CheckSimple = "check_simple",

package/lib/interfaces/dialog-response.interface.d.ts

@@ -0,0 +1,6 @@
+import { AppPopupButtonType } from '../model/enum/app-button-type.enum';
+export interface DialogResponseInterface {
+    button: AppPopupButtonType;
+    output?: any;
+    rememberChoice?: boolean;
+}

package/lib/interfaces/scanner-input.interface.d.ts

@@ -0,0 +1,3 @@
+export interface ScannerInput {
+    triggerCodeScanned(code?: string): void;
+}

package/lib/model/enum/app-button-type.enum.d.ts

@@ -0,0 +1,9 @@
+export declare enum AppPopupButtonType {
+    Ok = 0,
+    Open = 1,
+    Save = 2,
+    Cancel = 3,
+    Yes = 4,
+    No = 5,
+    NoButton = 6
+}

package/lib/model/enum/app-popup-type.enum.d.ts

@@ -0,0 +1,6 @@
+export declare enum AppPopupType {
+    Error = 0,
+    Warning = 1,
+    Information = 2,
+    Confirmation = 3
+}

package/package.json

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

package/public-api.d.ts

@@ -77,7 +77,22 @@ export * from './lib/components/list-of-values/list-of-values.module';
 export * from './lib/components/responsive-text/responsive-text.component';
 export * from './lib/components/responsive-text/responsive-text.module';
 export * from './lib/components/color-picker/color-picker.component';
-export * from './lib/components//color-picker/color-picker.module';
+export * from './lib/components/color-picker/color-picker.module';
+export * from './lib/components/core-dialog/core-dialog.module';
+export * from './lib/components/core-dialog/core-dialog.service';
+export * from './lib/components/filter-item/filter-item.component';
+export * from './lib/components/filter-item/filter-item.module';
+export * from './lib/components/pagination/pagination.component';
+export * from './lib/components/pagination/pagination.module';
+export * from './lib/components/pagination-bar/pagination-bar.component';
+export * from './lib/components/pagination-bar/pagination-bar.module';
+export * from './lib/components/checkmark-overlay/checkmark-overlay.module';
+export * from './lib/components/filter-item/filter-item-viewmodel';
+export * from './lib/components/filter-item/filter-viewmodel';
+export * from './lib/components/input-scanner/input-scanner.component';
+export * from './lib/components/input-scanner/input-scanner.module';
+export * from './lib/components/loader/loader.module';
+export * from './lib/components/loader/loader.component';
 export * from './lib/pipes/price-display.pipe';
 export * from './lib/pipes/price-display-pipe.module';
 export * from './lib/pipes/filter.pipe';
@@ -90,23 +105,15 @@ export * from './lib/core/validator/precision-scale.validator';
 export * from './lib/core/validator/max-string-length.validator';
 export * from "./lib/core/service/form-input-user-change-listener.service";
 export * from "./lib/core/service/ng-zone-wrapper.service";
-export * from './lib/components/filter-item/filter-item.component';
-export * from './lib/components/filter-item/filter-item.module';
 export * from './lib/directives/clickoutside/clickoutside.module';
 export * from './lib/directives/observe-visibility/observe-visibility.module';
 export * from './lib/directives/overlay/overlay.module';
 export * from './lib/directives/tooltip/tooltip-directive.module';
-export * from './lib/components/pagination/pagination.component';
-export * from './lib/components/pagination/pagination.module';
-export * from './lib/components/pagination-bar/pagination-bar.component';
-export * from './lib/components/pagination-bar/pagination-bar.module';
-export * from './lib/components/checkmark-overlay/checkmark-overlay.module';
 export * from './lib/directives/screen-configuration/screen-configuration.module';
 export * from './lib/directives/screen-configuration/screen-configuration.directive';
 export * from './lib/interfaces/screen-config-adapter-component-interface-name';
 export * from './lib/interfaces/screen-config-adapter.component.interface';
-export * from './lib/components/filter-item/filter-item-viewmodel';
-export * from './lib/components/filter-item/filter-viewmodel';
+export * from './lib/interfaces/dialog-response.interface';
 export * from './lib/service/color-sequence.service';
 export * from './lib/service/overlay.service';
 export * from './lib/service/base-module-screen-config.service';