@colijnit/corecomponents_v12 12.0.22 → 12.0.25

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

@@ -95,6 +95,8 @@ export declare abstract class BaseInputComponent<T> implements OnInit, OnDestroy
     keepFocus: boolean;
     canSaveOrCancel: boolean;
     objectConfigName: string;
+    committing: boolean;
+    commitFinished: boolean;
     protected _markedAsUserTouched: boolean;
     protected _destroyed: boolean;
     protected _hasOnPushCdStrategy: boolean;
@@ -121,7 +123,7 @@ export declare abstract class BaseInputComponent<T> implements OnInit, OnDestroy
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     commit: (model: any) => Promise<boolean>;
-    commitClick(event?: MouseEvent): Promise<void>;
+    commitClick(event?: MouseEvent): Promise<boolean>;
     cancelClick(event?: MouseEvent): void;
     showValidationError(error: string): void;
     /**
@@ -148,6 +150,7 @@ export declare abstract class BaseInputComponent<T> implements OnInit, OnDestroy
     protected _markAsOnPush(): void;
     protected _checkState(): boolean;
     protected _updateControlValidatorsAndOwnFlags(): void;
+    private _commitFinished;
     private _clearErrorComponent;
     private _controlExists;
     private _controlIsValid;

package/lib/components/base/commit-buttons/commit-buttons.component.d.ts

@@ -0,0 +1,19 @@
+import { ElementRef, EventEmitter, QueryList, Renderer2 } from "@angular/core";
+export declare class CommitButtonsComponent {
+    private _renderer;
+    set content(children: any);
+    animateDivs: QueryList<ElementRef>;
+    set committing(value: boolean);
+    get committing(): boolean;
+    set commitFinished(value: boolean);
+    get commitFinished(): boolean;
+    cancelClick: EventEmitter<MouseEvent>;
+    commitClick: EventEmitter<MouseEvent>;
+    showClass(): boolean;
+    private _committing;
+    private _commitFinished;
+    constructor(_renderer: Renderer2);
+    private _checkAnimation;
+    private _checkAnimationFinished;
+    private _handleAnimationIteration;
+}

package/lib/components/base/commit-buttons/commit-buttons.module.d.ts

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

package/lib/components/base/commit-buttons/style/_layout.scss

@@ -0,0 +1,127 @@
+@import "../../../../style/mixin";
+
+$checkMarkWidth: calc(0.3 * #{$cc-co-commit-buttons-button-size});
+$checkMarkHeight: calc(0.5 * #{$cc-co-commit-buttons-button-size});
+$checkMarkThickness: 3px;
+
+$spinnerSize: $cc-co-commit-buttons-button-size;
+$spinnerDivSize: calc(#{$cc-co-commit-buttons-button-size} - (.2 * #{$cc-co-commit-buttons-button-size}));
+$spinnerPadding: calc((#{$spinnerSize} - #{$spinnerDivSize}) / 2);
+
+@include export-module('cc-commit-buttons-layout') {
+  .co-commit-buttons {
+    .commit-buttons-wrapper {
+      position: absolute;
+      @if ($cc-co-input-text-button-position == 'top') {
+        top: -36px;
+        transform-origin: center bottom;
+        padding: 5px 0 0 5px;
+      } @else {
+        top: $cc-item-size;
+        transform-origin: center top;
+        padding: 0 5px 5px 0;
+      }
+      right: 0;
+      display: flex;
+      column-gap: 2px;
+      z-index: 10;
+      .commit-buttons-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        height: $cc-co-commit-buttons-button-size;
+        width: $cc-co-commit-buttons-button-size;
+        &.save {
+          .save-button-spinner .animate {
+            animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+          }
+          &.finished {
+            .spinner-checkmark {
+              animation-duration: 800ms;
+              animation-timing-function: ease;
+              animation-name: checkmark;
+              //animation-delay: 2.2s;
+            }
+          }
+          .save-button-spinner {
+            display: inline-block;
+            position: relative;
+            width: $spinnerSize;
+            height: $spinnerSize;
+            padding: $spinnerPadding;
+            div {
+              position: absolute;
+              display: block;
+              box-sizing: border-box;
+              height: $spinnerDivSize;
+              width: $spinnerDivSize;
+              border-width: 2px;
+              border-style: solid;
+              border-radius: 50%;
+            }
+            //border-color: $cc-co-commit-buttons-commit-color;
+            div:nth-child(1) {
+              animation-delay: -0.45s;
+            }
+            div:nth-child(2) {
+              animation-delay: -0.3s;
+            }
+            div:nth-child(3) {
+              animation-delay: -0.15s;
+            }
+          }
+          .spinner-checkmark {
+            position: absolute;
+            opacity: 1;
+            transform: scaleX(-1) translate(85%, -5%) rotate(135deg);
+            height: $checkMarkHeight;
+            width: $checkMarkWidth;
+            transform-origin: left top;
+            content: '';
+            left: 50%;
+            top: 50%;
+          }
+        }
+        &.cancel {
+          .cancel-button {
+            position: relative;
+            display: inline-block;
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+    @keyframes spinner {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+    @keyframes checkmark {
+      0% {
+        height: 0;
+        width: 0;
+        opacity: 1;
+      }
+      20% {
+        height: 0;
+        width: $checkMarkWidth;
+        opacity: 1;
+      }
+      40% {
+        height: $checkMarkHeight;
+        width: $checkMarkWidth;
+        opacity: 1;
+      }
+      100% {
+        height: $checkMarkHeight;
+        width: $checkMarkWidth;
+        opacity: 1;
+      }
+    }
+  }
+}

package/lib/components/base/commit-buttons/style/_material-definition.scss

@@ -0,0 +1,5 @@
+$cc-co-commit-buttons-button-background: $cc-color-form-input-border !default;
+$cc-co-commit-buttons-button-size: 30px !default;
+$cc-co-commit-buttons-commit-color: green !default;
+$cc-co-commit-buttons-cancel-color: red !default;
+$cc-co-input-text-button-position: 'bottom' !default;

package/lib/components/base/commit-buttons/style/_theme.scss

@@ -0,0 +1,34 @@
+@import "../../../../style/mixin";
+@import "./material-definition";
+
+@include export-module('cc-commit-buttons-theme') {
+  .co-commit-buttons {
+    .commit-buttons-wrapper {
+      .commit-buttons-button {
+        &.save {
+          background: $cc-co-commit-buttons-button-background;
+          .save-button-spinner .animate {
+            border-color: $cc-co-commit-buttons-commit-color transparent transparent transparent;
+          }
+          .save-button-spinner {
+            div {
+              border-color: $cc-co-commit-buttons-commit-color;
+            }
+          }
+          .spinner-checkmark {
+            border-right: $checkMarkThickness solid $cc-co-commit-buttons-commit-color;
+            border-top: $checkMarkThickness solid $cc-co-commit-buttons-commit-color;
+          }
+        }
+        &.cancel {
+          .cancel-button {
+            border: 7px solid #DAD9D9;
+            background:
+              linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,$cc-co-commit-buttons-cancel-color 45%,$cc-co-commit-buttons-cancel-color 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
+              linear-gradient(135deg, #DAD9D9 0%,#DAD9D9 43%,$cc-co-commit-buttons-cancel-color 45%,$cc-co-commit-buttons-cancel-color 55%,#DAD9D9 57%,#DAD9D9 100%);
+          }
+        }
+      }
+    }
+  }
+}

package/lib/components/base/commit-buttons/style/material.scss

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

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

@@ -0,0 +1,22 @@
+import { ChangeDetectorRef, EventEmitter } from '@angular/core';
+import { IconCacheService } from "../icon/icon-cache.service";
+import { LevelIndicatorLevel } from "../level-indicator/level-indicator-level.enum";
+export declare class CardComponent {
+    icons: IconCacheService;
+    private _changeDetector;
+    imageData: string;
+    description: string;
+    price: number | string;
+    level: LevelIndicatorLevel;
+    isSelected: boolean;
+    isSmallModus: boolean;
+    hasMagnifierButton: boolean;
+    hasInfoButton: boolean;
+    readonly contentClick: EventEmitter<MouseEvent>;
+    readonly infoButtonClick: EventEmitter<MouseEvent>;
+    readonly magnifierButtonClick: EventEmitter<MouseEvent>;
+    readonly Icons: any;
+    heightCard: number;
+    onHostClick(event: MouseEvent): void;
+    constructor(icons: IconCacheService, _changeDetector: ChangeDetectorRef);
+}

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

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

package/lib/components/input-combo-box/input-combo-box.component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, ComponentFactoryResolver, ElementRef } from "@angular/core";
+import { ChangeDetectorRef, ComponentFactoryResolver, ElementRef, EventEmitter } from "@angular/core";
 import { BaseInputComponent } from "../base/base-input.component";
 import { FormInputUserModelChangeListenerService } from "../../core/service/form-input-user-change-listener.service";
 import { NgZoneWrapperService } from "../../core/service/ng-zone-wrapper.service";
@@ -17,6 +17,7 @@ export declare class InputComboBoxComponent extends BaseInputComponent<any> {
     selected: number | string | boolean;
     placeholder: string;
     shopPopup: boolean;
+    valueChange: EventEmitter<any>;
     showClass(): boolean;
     constructor(formComponent: FormComponent, changeDetector: ChangeDetectorRef, componentFactoryResolver: ComponentFactoryResolver, formUserChangeListener?: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);
     onFocus(): void;

package/lib/components/input-number-picker/input-number-picker.component.d.ts

@@ -2,7 +2,6 @@ import { ChangeDetectorRef, ComponentFactoryResolver, EventEmitter, NgZone, OnDe
 import { BaseInputComponent } from "../base/base-input.component";
 import { BoundsConstrainedNumberValue } from "../../core/model/bounds-constrained-number-value";
 import { KeyboardCode } from "../../core/enum/keyboard-code.enum";
-import { InputTextComponent } from "../input-text/input-text.component";
 import { FormInputUserModelChangeListenerService } from "../../core/service/form-input-user-change-listener.service";
 import { InputNumberPickerButtonShowMode } from "../../core/enum/input-number-picker-show-mode.enum";
 import { IconCacheService } from "../icon/icon-cache.service";
@@ -13,8 +12,6 @@ export declare class InputNumberPickerComponent extends BaseInputComponent<numbe
     iconCacheService: IconCacheService;
     private _ngZone;
     protected componentFactoryResolver: ComponentFactoryResolver;
-    set model(model: number);
-    get model(): number;
     set min(min: number);
     set step(step: number);
     set max(max: number);
@@ -25,7 +22,6 @@ export declare class InputNumberPickerComponent extends BaseInputComponent<numbe
     noValidation: boolean;
     set decimals(decimals: number);
     readonly modelChange: EventEmitter<number>;
-    inputTextComp: InputTextComponent;
     get showButtonsOnFocusOnly(): boolean;
     get hasLabel(): boolean;
     showClass(): boolean;
@@ -50,6 +46,7 @@ export declare class InputNumberPickerComponent extends BaseInputComponent<numbe
     ngOnDestroy(): void;
     doIncrementAuto(): void;
     handleKeyDown(event: KeyboardEvent): boolean;
+    handleChangeModel(value: number): void;
     doDecrementAuto(): void;
     stopAutoCounting(): void;
     setValue(newValue: number, silent?: boolean): void;
@@ -57,8 +54,6 @@ export declare class InputNumberPickerComponent extends BaseInputComponent<numbe
     decrement(steps?: number): void;
     onPlusMouseDown(event: Event): void;
     onMinusMouseDown(event: Event): void;
-    onNumberInputFocus(): void;
-    onNumberInputBlur(): void;
     private _doIncreaseStepFactor;
     private _getNextStepFactorMouseDown;
     private _updateButtonsShowState;

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

@@ -0,0 +1,11 @@
+import { ElementRef, OnDestroy } from "@angular/core";
+import { CoreComponentsIcon } from "../../core/enum/core-components-icon.enum";
+export declare class InputSearchComponent implements OnDestroy {
+    private _elementRef;
+    readonly searchIcon: CoreComponentsIcon;
+    placeHolderText: string;
+    showClass(): boolean;
+    constructor(_elementRef: ElementRef);
+    ngOnDestroy(): void;
+    focus(): void;
+}

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

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

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

@@ -12,44 +12,5 @@
       margin: ($cc-item-size - 8px) / 2 0 0;
       outline: none;
     }
-    .input-save-cancel-button-wrapper {
-      position: absolute;
-      @if ($cc-co-input-text-button-position == 'top') {
-        top: -36px;
-        transform-origin: center bottom;
-        padding: 5px 0 0 5px;
-      } @else {
-        top: $cc-item-size;
-        transform-origin: center top;
-        padding: 0 5px 5px 0;
-      }
-      right: 0;
-      display: flex;
-      column-gap: 2px;
-      z-index: 10;
-      .input-save-cancel-button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 30px;
-        width: 30px;
-        &.save {
-          background: $cc-co-input-text-button-background;
-          &:before {
-            content: "\2713";
-            font-size: 20px;
-            color: $cc-co-input-text-commit-color;
-          }
-        }
-        &.cancel {
-          background: #DAD9D9;
-          &:before {
-            content: "x";
-            font-size: 20px;
-            color: $cc-co-input-text-cancel-color;
-          }
-        }
-      }
-    }
   }
 }

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

@@ -2,7 +2,3 @@ $cc-co-input-text-font-family: $cc-font-family !default;
 $cc-co-input-text-font-size: $cc-font-size-default !default;
 $cc-co-input-text-font-color: $cc-color-dark !default;
 $cc-co-input-text-border-color: $cc-color-border !default;
-$cc-co-input-text-button-background: $cc-color-form-input-border !default;
-$cc-co-input-text-button-position: 'bottom' !default;
-$cc-co-input-text-commit-color: green !default;
-$cc-co-input-text-cancel-color: red !default;

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

@@ -3,21 +3,5 @@
     input {
       background: transparent;
     }
-    .input-save-cancel-button-wrapper {
-      .input-save-cancel-button {
-        &.save {
-          background: $cc-co-input-text-button-background;
-          &:before {
-            color: $cc-co-input-text-commit-color;
-          }
-        }
-        &.cancel {
-          background: $cc-co-input-text-button-background;
-          &:before {
-            color: $cc-co-input-text-cancel-color;
-          }
-        }
-      }
-    }
   }
 }

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

@@ -5,3 +5,4 @@
 @import "./layout";
 @import "./theme";
 @import "../../validation-error/style/material";
+@import "../../base/commit-buttons/style/material";

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

@@ -12,6 +12,7 @@ export declare abstract class BaseSimpleGridComponent {
      * (update collection) by itself
      */
     emitDragDrop: boolean;
+    set extraColumns(value: SimpleGridColumnDirective[]);
     onDrop: EventEmitter<{
         from: number;
         to: number;
@@ -26,4 +27,5 @@ export declare abstract class BaseSimpleGridComponent {
     handleSizerMouseDown(event: MouseEvent, column: SimpleGridColumnDirective): void;
     handleCanDragDrop(drag: CdkDrag, drop: CdkDropList): boolean;
     handleDrop(event: CdkDragDrop<Object[]>): void;
+    private _setColumns;
 }

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

@@ -1,10 +1,10 @@
-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>;
@@ -21,7 +21,11 @@ export declare class SimpleGridColumnDirective {
     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,7 +1,7 @@
 import { ChangeDetectorRef } from "@angular/core";
-import { ColumnAlign } from "./simple-grid-column.directive";
-import { BaseSimpleGridComponent } from "./base-simple-grid.component";
 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;
@@ -16,6 +16,8 @@ export declare class SimpleGridComponent extends BaseSimpleGridComponent {
     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;

package/package.json

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

package/public-api.d.ts

@@ -4,6 +4,10 @@ export * from './lib/components/button/button.module';
 export * from './lib/components/button/button.component';
 export * from './lib/components/button-drop-down/button-drop-down.module';
 export * from './lib/components/button-drop-down/button-drop-down.component';
+export * from './lib/components/card/card.component';
+export * from './lib/components/card/card.module';
+export * from './lib/components/carousel-3d/carousel-3d.component';
+export * from './lib/components/carousel-3d/carousel-3d.module';
 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';
@@ -12,6 +16,8 @@ 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-rich-text-editor/co-rich-text-editor.component';
+export * from './lib/components/co-rich-text-editor/co-rich-text-editor.module';
 export * from './lib/components/co-schedule/co-schedule.module';
 export * from './lib/components/co-schedule/co-schedule.component';
 export * from './lib/components/co-sidebar/co-sidebar.module';
@@ -27,6 +33,8 @@ export * from './lib/components/form/form.component';
 export * from './lib/core/service/form-master.service';
 export * from './lib/components/grid/co-grid.module';
 export * from './lib/components/grid/co-grid.component';
+export * from './lib/components/grid-toolbar/grid-toolbar.component';
+export * from './lib/components/grid-toolbar/grid-toolbar.module';
 export * from './lib/components/icon/icon.module';
 export * from './lib/components/icon/icon.component';
 export * from './lib/components/image/image.module';
@@ -39,10 +47,14 @@ export * from './lib/components/input-combo-box/input-combo-box.module';
 export * from './lib/components/input-combo-box/input-combo-box.component';
 export * from './lib/components/input-date-picker/input-date-picker.module';
 export * from './lib/components/input-date-picker/input-date-picker.component';
+export * from './lib/components/input-listbox/input-listbox.component';
+export * from './lib/components/input-listbox/input-listbox.module';
 export * from './lib/components/input-number-picker/input-number-picker.module';
 export * from './lib/components/input-number-picker/input-number-picker.component';
 export * from './lib/components/input-radio-button/input-radio-button.module';
 export * from './lib/components/input-radio-button/input-radio-button.component';
+export * from './lib/components/input-search/input-search.component';
+export * from './lib/components/input-search/input-search.module';
 export * from './lib/components/input-text/input-text.module';
 export * from './lib/components/input-text/input-text.component';
 export * from './lib/components/input-textarea/input-textarea.module';
@@ -58,20 +70,15 @@ export * from './lib/components/popup/text-input-popup.component';
 export * from './lib/components/popup/popup-window-shell.component';
 export * from './lib/components/popup/popup-message-display.component';
 export * from './lib/components/popup/popup-buttons.component';
+export * from './lib/components/popup/service/prompt.service';
+export * from './lib/components/popup/popup-buttons.component';
+export * from './lib/components/simple-grid/simple-grid-column.directive';
+export * from './lib/components/simple-grid/simple-grid.component';
+export * from './lib/components/simple-grid/simple-grid.module';
 export * from './lib/components/tile/tile.module';
 export * from './lib/components/tile/tile.component';
 export * from './lib/core/enum/core-components-icon.enum';
-export * from './lib/components/popup/service/prompt.service';
 export * from './lib/components/icon/icon-cache.service';
 export * from './lib/components/base/component-interface-name';
-export * from './lib/components/co-rich-text-editor/co-rich-text-editor.module';
-export * from './lib/components/co-rich-text-editor/co-rich-text-editor.component';
-export * from './lib/components/input-listbox/input-listbox.module';
-export * from './lib/components/input-listbox/input-listbox.component';
-export * from './lib/components/simple-grid/simple-grid-column.directive';
-export * from './lib/components/simple-grid/simple-grid.component';
-export * from './lib/components/simple-grid/simple-grid.module';
-export * from './lib/components/carousel-3d/carousel-3d.component';
-export * from './lib/components/carousel-3d/carousel-3d.module';
 export * from './lib/pipes/price-display.pipe';
 export * from './lib/pipes/price-display-pipe.module';