@colijnit/corecomponents_v12 12.0.99 → 12.0.101

package/lib/components/icon-collapse-handle/style/material.scss

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

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

@@ -1,4 +1,20 @@
-export declare class ImageComponent {
+import { OnInit } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+export declare class ImageComponent implements OnInit {
+    private _sanitizer;
+    /**
+     * Source of the image, can be an URL or a base64 data string
+      */
     source: string;
-    constructor();
+    /**
+     * Placeholder svg source to show when there is no image
+     */
+    placeHolder: string;
+    showClass: boolean;
+    error: boolean;
+    innerPlaceHolder: SafeHtml | undefined;
+    private _defaultPlaceholder;
+    constructor(_sanitizer: DomSanitizer);
+    ngOnInit(): void;
+    handleImageError(event: any): void;
 }

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

@@ -0,0 +1,29 @@
+@include export-module('co-image-layout') {
+  .co-image {
+    font-family: $co-image-font-family;
+    font-size: $co-image-font-size;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: $co-image-height;
+    width: $co-image-width;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    .no-image-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      row-gap: $co-image-no-image-row-gap;
+      opacity: $co-image-no-image-opacity;
+      font-size: $co-image-no-image-font-size;
+      .co-icon {
+        height: $co-image-no-image-icon-size;
+        width: $co-image-no-image-icon-size;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+$co-image-font-family: $cc-font-family !default;
+$co-image-font-size: $cc-font-size-default !default;
+$co-image-height: 100px !default;
+$co-image-width: 100px !default;
+$co-image-background: transparent !default;
+$co-image-no-image-row-gap: 10px !default;
+$co-image-no-image-color: black !default;
+$co-image-no-image-opacity: 0.2 !default;
+$co-image-no-image-font-size: $cc-font-size-default !default;
+$co-image-no-image-icon-size: 40% !default;

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

@@ -0,0 +1,14 @@
+@include export-module('co-image-theme') {
+  .co-image {
+    background: $co-image-background;
+    .no-image-wrapper {
+      svg { // for fontawesome icons
+        fill: $co-image-no-image-color;
+      }
+      & [fill] { // for own icons
+        fill: $co-image-no-image-color;
+      }
+      color: $co-image-no-image-color;
+    }
+  }
+}

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

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

package/lib/components/input-number-picker/style/_layout.scss

@@ -7,7 +7,6 @@
     //height: $cc-co-input-number-picker-height;
     width: fit-content;
     border: $cc-co-input-number-picker-border;
-    border-width: $cc-co-input-number-picker-border-width;
     border-radius: $cc-co-input-number-picker-border-radius;
     .button-wrapper {
       padding: $cc-co-input-number-picker-button-padding;

package/lib/components/input-number-picker/style/_material-definition.scss

@@ -1,13 +1,12 @@
 $cc-co-input-number-picker-font-family: $cc-font-family !default;
-$cc-co-input-number-picker-height: 40px !default;
+$cc-co-input-number-picker-height: $cc-item-size !default;
 $cc-co-input-number-picker-width: 125px !default;
 $cc-co-input-number-picker-readonly-opacity: 0.5 !default;
 $cc-co-input-number-picker-text-align: center !default;
-$cc-co-input-number-picker-border: 1px solid !default;
-$cc-co-input-number-picker-border-width: 1px 1px 1px 1px !default;
+$cc-co-input-number-picker-border: $cc-input-border-width solid $cc-input-border-color !default;
 $cc-co-input-number-picker-button-padding: 5px !default;
-$cc-co-input-number-picker-border-color: $cc-color-dark !default;
-$cc-co-input-number-picker-border-radius: 3px !default;
+$cc-co-input-number-picker-border-color: $cc-input-border-color !default;
+$cc-co-input-number-picker-border-radius: $cc-input-border-radius !default;
 $cc-co-input-number-picker-button-height: 25px !default;
 $cc-co-input-number-picker-button-width: 25px !default;
 $cc-co-input-number-picker-button-background-color: transparent !default;

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

@@ -3,7 +3,7 @@ $cc-co-input-search-font-size: $cc-font-size-default !default;
 $cc-co-input-search-height: $cc-item-size !default;
 $cc-co-input-search-background-color: #F5F5FC !default;
 $cc-co-input-search-border-style: $cc-input-border-style !default;
-$cc-co-input-search-border-width: $cc-input-border-width !default;
+$cc-co-input-search-border-width: 0 !default;
 $cc-co-input-search-border-color: $cc-input-border-color !default;
 $cc-co-input-search-border-radius: 10px !default;
 $cc-co-input-search-label-color: $cc-color-label !default;

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

@@ -22,11 +22,11 @@ $cc-simple-grid-row-edit-input-background-color: white !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;
-$cc-simple-grid-row-border-color: #F5F5F5 !default;
+$cc-simple-grid-row-border-color: #F5F5FC !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-even-background: #F5F5F5 !default;
+$cc-simple-grid-row-even-background: #F5F5FC !default;
 
 $cc-simple-grid-pagination-background-color: white !default;
 $cc-simple-grid-pagination-bar-margin: 10px 0 0 0 !default;

package/lib/core/constant/default-upper-bound-for-range-components.d.ts

@@ -1 +1,2 @@
+export declare const DEFAULT_LOWER_BOUND_FOR_RANGE_COMPONENTS: number;
 export declare const DEFAULT_UPPER_BOUND_FOR_RANGE_COMPONENTS: number;

package/lib/style/_input.mixins.scss

@@ -80,7 +80,9 @@
     }
   }
   &:hover {
-    border-color: $cc-input-hover-color;
+    border-style: $cc-input-border-hover-style;
+    border-width: $cc-input-border-hover-width;
+    border-color: $cc-input-border-hover-color;
   }
 }
 

package/lib/style/_variables.scss

@@ -110,11 +110,14 @@ $cc-input-margin-top: 16px !default;
 $cc-input-show-focus-line: true !default;
 $cc-input-focus-line-color: $cc-color-action !default;
 $cc-input-hover-darken: 75% !default;
-$cc-input-hover-color: #2d5fc4 !default;
+$cc-input-hover-color: $cc-color-action !default;
 $cc-input-border-style: solid !default;
-$cc-input-border-width: 2px !default;
+$cc-input-border-width: 1px !default;
 $cc-input-border-color: $cc-color-border !default;
 $cc-input-border-radius: 5px !default;
+$cc-input-border-hover-style: solid !default;
+$cc-input-border-hover-width: 2px !default;
+$cc-input-border-hover-color: $cc-input-hover-color !default;
 
 $cc-input-focused-border-style: solid !default;
 $cc-input-focused-border-width: 2px !default;

package/package.json

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