@colijnit/corecomponents_v12 12.0.58 → 12.0.60

package/lib/components/icon-collapse-handle/icon-collapse-handle.component.d.ts

@@ -0,0 +1,21 @@
+import { CoDirection } from "../../core/enum/co-direction";
+import { CoOrientation } from "../../core/enum/co-orientation";
+import { CoreComponentsIcon } from "../../core/enum/core-components-icon.enum";
+export declare class IconCollapseHandleComponent {
+    showClass(): boolean;
+    orientation: CoOrientation;
+    set arrowDirection(arrowDirection: CoDirection);
+    get arrowDirection(): CoDirection;
+    twoArrows: boolean;
+    get isVertical(): boolean;
+    get arrowsOrientatedHorizontally(): boolean;
+    get oppositeArrowDirection(): CoDirection;
+    readonly iconColorClass: string;
+    hidden: boolean;
+    required: boolean;
+    readonly: boolean;
+    readonly Icons: typeof CoreComponentsIcon;
+    private _arrowDirection;
+    private _oppositeArrowDirection;
+    constructor();
+}

package/lib/components/icon-collapse-handle/icon-collapse-handle.module.d.ts

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

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

@@ -0,0 +1,95 @@
+@include export-module('cc-icon-collapse-handle-layout') {
+  .co-icon-collapse-handle {
+
+      @include button-small-semi-round($cc-color-light, 25px, 35px);
+      display: flex;
+      align-items: center !important;
+      justify-content: center !important;
+      border: 1px solid $cc-color-light-accent;
+      cursor: pointer;
+      flex-shrink: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      overflow: hidden;
+
+      &.two-arrows {
+        co-icon { // smaller icons
+          position: relative;
+          width: 25px;
+          height: 25px;
+        }
+        co-icon.first { // reposition icons
+          top: 10px;
+        }
+        co-icon.second {
+          bottom: 10px;
+        }
+
+        &.arrows-orientated-horizontally {
+          div.wrap {
+            display: flex;
+            flex-direction: row;
+          }
+          co-icon.first { // reposition icons
+            left: 10px;
+          }
+          co-icon.second {
+            right: 10px;
+          }
+        }
+      }
+
+      &.vertical {
+        transform: rotate(90deg);
+        co-icon {
+          &.right {
+            transform: rotate(0);
+          }
+          &.bottom {
+            transform: rotate(90deg);
+          }
+          &.left {
+            transform: rotate(180deg);
+          }
+          &.top{
+            transform: rotate(270deg);
+          }
+        }
+      }
+
+      &:hover {
+        background: $cc-color-action;
+        co-icon ::ng-deep {
+          [fill] {
+            fill: $cc-color-light;
+          }
+        }
+      }
+
+      co-icon {
+        width: 35px;
+        height: 35px;
+        transition: transform 0.2s;
+        ::ng-deep [fill] {
+          fill : red;
+        }
+        &.up {
+          transform: rotate(0);
+        }
+        &.right {
+          transform: rotate(90deg);
+        }
+        &.bottom {
+          transform: rotate(180deg);
+        }
+        &.left{
+          transform: rotate(270deg);
+        }
+      }
+
+    div.wrap {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}

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

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

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

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

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

@@ -8,6 +8,7 @@ export declare class InputSearchComponent extends BaseInputComponent<string> imp
     useLeftIcon: boolean;
     useRightIcon: boolean;
     noIcon: boolean;
+    isSmall: boolean;
     showClass(): boolean;
     handleKeyDown(event: KeyboardEvent): void;
 }

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

@@ -1,5 +1,25 @@
 @include export-module('cc-input-search-layout') {
   .co-input-search {
+    &.is-small {
+      height: 2rem;
+      .co-input-text {
+        height: inherit;
+        label {
+          left: 0.5rem;
+          top: 16px
+        }
+        input {
+          height: 1rem;
+          margin-left: 0.5rem;
+          margin-top: 0.5rem;
+        }
+
+        .co-icon {
+          height: 30px;
+          width: 30px;
+        }
+      }
+    }
     .co-input-text {
       border-radius: $cc-co-input-search-border-radius;
       label {

package/lib/core/enum/co-direction.d.ts

@@ -0,0 +1,6 @@
+export declare enum CoDirection {
+    Right = "right",
+    Left = "left",
+    Up = "top",
+    Down = "bottom"
+}

package/lib/core/enum/co-orientation.d.ts

@@ -0,0 +1,6 @@
+import { CoDirection } from "./co-direction";
+export declare enum CoOrientation {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+export declare function OrientationOfDirection(direction: CoDirection): CoOrientation;

package/lib/core/utils/direction-enum-utils.d.ts

@@ -0,0 +1,5 @@
+import { CoDirection } from "../enum/co-direction";
+export declare class DirectionEnumUtils {
+    private static readonly _OppositeDirections;
+    static OppositeOf(direction: CoDirection): CoDirection;
+}

package/lib/style/_mixin.scss

@@ -7,3 +7,10 @@ $imported-modules: () !default;
     @content;
   }
 }
+
+@mixin button-small-semi-round($background: $cc-color-light, $height: $cc-action-size-small, $width: $cc-action-size) {
+  background: $background;
+  height: $height;
+  width: $width;
+  border-radius: 15px;
+}

package/lib/style/_variables.scss

@@ -74,8 +74,9 @@ $cc-scrollbar-size: 15px !default;
 $cc-shadow-size: 10px !default;
 $cc-shadow-size-small: 5px !default;
 
-$cc-item-size-very-small: 20px !default;
 $cc-action-size: 40px !default;
+$cc-action-size-small: 30px !default;
+$cc-item-size-very-small: 20px !default;
 
 $cc-font-size-input-label: 12px !default;
 $cc-font-size-small: 13px !default;

package/package.json

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

package/public-api.d.ts

@@ -39,6 +39,10 @@ export * from './lib/components/grid-toolbar-button/grid-toolbar-button.componen
 export * from './lib/components/grid-toolbar-button/grid-toolbar-button.module';
 export * from './lib/components/icon/icon.module';
 export * from './lib/components/icon/icon.component';
+export * from './lib/components/icon-collapse-handle/icon-collapse-handle.module';
+export * from './lib/components/icon-collapse-handle/icon-collapse-handle.component';
+export * from './lib/core/enum/co-direction';
+export * from './lib/core/enum/co-orientation';
 export * from './lib/components/image/image.module';
 export * from './lib/components/image/image.component';
 export * from './lib/components/input-checkbox/input-checkbox.module';