@colijnit/corecomponents_v12 12.2.16 → 12.2.17

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

@@ -15,13 +15,15 @@
       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;
+    }
+    #ring-loader {
+      fill: $cc-co-loader-background-color;
+      stroke-width: $cc-co-loader-ring-width;
+      stroke: $cc-co-loader-main-color;
+      animation: dash $cc-co-loader-ring-animation-duration ease-in-out infinite;
       stroke-linecap: round;
-      stroke-dasharray: 270 50;
     }
     .spinner-gradient-stop {
       stop-color: $cc-co-loader-main-color;
@@ -63,3 +65,19 @@
     transform: rotate(360deg);
   }
 }
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 572;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 572, 572;
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dasharray: 572, 572;
+    stroke-dashoffset: -572;
+  }
+}
+

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

@@ -2,6 +2,6 @@ $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-width: 10px !default;
 $cc-co-loader-ring-animation-duration: 2s !default;
 $cc-co-loader-letter-animation-duration: 2s !default;

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

@@ -35,6 +35,7 @@ export declare abstract class BaseSimpleGridComponent {
     columns: SimpleGridColumnDirective[];
     headerColumns: SimpleGridColumnDirective[];
     protected _data: Object[];
+    protected disabledRows: number[];
     private _columnForResize;
     private _prepared;
     private _startMousePositionX;
@@ -43,6 +44,7 @@ export declare abstract class BaseSimpleGridComponent {
     handleDrop(event: CdkDragDrop<Object[]>): void;
     isSingleColumnRow(row: Object): boolean;
     singleColumnIndex(row: Object): number;
+    protected prepareDataRow(row: any, index: number): void;
     private _setColumns;
     private _prepareData;
     private _resizeColumnsToFit;

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

@@ -29,7 +29,8 @@ export declare class SimpleGridComponent extends BaseSimpleGridComponent {
     private _newRow;
     constructor(_changeDetection: ChangeDetectorRef, _formMaster: FormMasterService);
     handleClickOutsideRow(): void;
-    isRowDisabled(row: any): boolean;
+    getIsRowDisabled(idx: number): boolean;
+    isRowDisabled(row: any, index: number): Promise<boolean>;
     isSingleColumn(column: any): boolean;
     rowContainsSingleColumn(row: any, columns: any): boolean;
     addNewRow(): Promise<void>;
@@ -40,7 +41,8 @@ export declare class SimpleGridComponent extends BaseSimpleGridComponent {
     selectTheRow(index: number, emit?: boolean): void;
     handleDblClickRow(event: MouseEvent, index: number, row: any): Promise<void>;
     editRow(event: MouseEvent, selectCell?: boolean): void;
-    handleCellClick(event: MouseEvent, row: any, rowIndex: number, cellIndex: number): void;
+    handleCellClick(event: MouseEvent, row: any, rowIndex: number, cellIndex: number): Promise<void>;
+    protected prepareDataRow(row: any, index: number): void;
     private _resetDblClick;
     /**
      *

package/lib/components/tile-select/style/_layout.scss

@@ -0,0 +1,42 @@
+@include export-module('co-tile-select-layout') {
+  .co-tile-select {
+    font-family: $cc-tile-select-font-family;
+    font-size: $cc-tile-select-font-size;
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    &.selected {
+      transform: scale($cc-tile-select-selected-zoom);
+    }
+    .co-tile-wrapper {
+      display: flex;
+      flex-direction: row;
+      position: relative;
+      column-gap: 10px;
+      border: $cc-tile-select-border;
+      border-radius: $cc-tile-select-border-radius;
+      padding: $cc-tile-select-padding;
+      width: $cc-tile-select-min-width;
+      height: $cc-tile-select-min-height;
+      min-height: $cc-tile-select-min-height;
+    }
+    .co-tile-select-wrapper {
+      display: none;
+      .co-radio-button {
+        border: none;
+        height: $cc-tile-select-icon-width;
+        width: $cc-tile-select-icon-width;
+        padding: 0;
+        align-items: baseline;
+      }
+    }
+    .co-tile-content-wrapper {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+}

package/lib/components/tile-select/style/_material-definition.scss

@@ -0,0 +1,18 @@
+$cc-tile-select-font-family: $cc-font-family !default;
+$cc-tile-select-font-size: $cc-font-size-default !default;
+$cc-tile-select-row-gap: 3px;
+$cc-tile-select-padding: 10px !default;
+$cc-tile-select-border: 2px solid !default;
+$cc-tile-select-border-radius: 5px !default;
+$cc-tile-select-min-width: 150px !default;
+$cc-tile-select-min-height: 100px !default;
+$cc-tile-select-icon-width: 20px !default;
+$cc-tile-select-background-color: $cc-color-light !default;
+$cc-tile-select-hover-background-color: $cc-color-hover !default;
+$cc-tile-select-border-color: $cc-color-border !default;
+$cc-tile-select-selected-background-color: $cc-color-background-selected !default;
+$cc-tile-select-selected-border-color: #0084de !default;
+$cc-tile-select-edit-background-color: $cc-color-border !default;
+$cc-tile-select-edit-icon-color: $cc-color-action !default;
+$cc-tile-select-edit-icon-width: 30px !default;
+$cc-tile-select-selected-zoom: 1 !default;

package/lib/components/tile-select/style/_theme.scss

@@ -0,0 +1,34 @@
+@include export-module('co-tile-select-theme') {
+  .co-tile-select {
+    .co-tile-wrapper {
+      background-color: $cc-tile-select-background-color;
+      border-color: $cc-tile-select-border-color;
+    }
+    .co-tile-select-wrapper {
+      .co-radio-button {
+        label:before {
+          border-color: $cc-tile-select-border-color;
+        }
+      }
+    }
+    &.selected {
+      .co-tile-wrapper {
+        background-color: $cc-tile-select-selected-background-color;
+        border-color: $cc-tile-select-selected-border-color;
+        .co-tile-select-wrapper {
+          .co-radio-button {
+            label:before {
+              border-color: $cc-tile-select-selected-border-color;
+              background-color: $cc-tile-select-selected-border-color;
+            }
+
+            label:after {
+              color: $cc-tile-select-selected-border-color;
+              background-color: white;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/components/tile-select/style/material.scss

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

package/lib/components/tile-select/tile-select.component.d.ts

@@ -0,0 +1,8 @@
+import { EventEmitter } from '@angular/core';
+export declare class TileSelectComponent {
+    selected: boolean;
+    readonly: boolean;
+    showRadioButton: boolean;
+    selectedChange: EventEmitter<boolean>;
+    showClass(): boolean;
+}

package/lib/components/tile-select/tile-select.module.d.ts

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

package/lib/style/_variables.scss

@@ -60,6 +60,7 @@ $cc-color-dark-accent: #475060 !default;
 $cc-color-box-shadow: rgba(72,79,96,.25) !default;
 $cc-color-scrollbar-thumb: #484f60 !default;
 $cc-color-scrollbar-background: #e8eceb !default;
+$cc-color-background-selected: #f1fcff !default;
 
 $cc-color-grid-row-background: white !default;
 $cc-color-grid-row-odd-background: #fafafa !default;

package/package.json

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

package/public-api.d.ts

@@ -93,6 +93,8 @@ 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/components/tile-select/tile-select.module';
+export * from './lib/components/tile-select/tile-select.component';
 export * from './lib/pipes/price-display.pipe';
 export * from './lib/pipes/price-display-pipe.module';
 export * from './lib/pipes/filter.pipe';