@colijnit/corecomponents_v12 12.0.65 → 12.0.67

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

@@ -0,0 +1,23 @@
+import { ElementRef, OnDestroy } from '@angular/core';
+import 'hammerjs';
+export declare class CarouselComponent implements OnDestroy {
+    set containerChild(child: any);
+    set contentChildren(content: any);
+    showClass(): boolean;
+    carouselItems: ElementRef[];
+    canNavigateLeft: boolean;
+    canNavigateRight: boolean;
+    container: ElementRef;
+    activeIndex: number;
+    ro: ResizeObserver;
+    private _disableButtons;
+    ngOnDestroy(): void;
+    handlePress(event: any): void;
+    handleSwipe(event: any): void;
+    handleButtonLeftClick(): Promise<void>;
+    handleButtonRightClick(): Promise<void>;
+    private _navigate;
+    private _checkNavigationButtons;
+    private _getLeftPositionFromActiveItem;
+    private _scrollWrapper;
+}

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

@@ -0,0 +1,6 @@
+import { HammerGestureConfig } from '@angular/platform-browser';
+export declare class CarouselHammerConfig extends HammerGestureConfig {
+    overrides: any;
+}
+export declare class CarouselModule {
+}

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

@@ -0,0 +1,52 @@
+@include export-module('cc-carousel-layout') {
+  .co-carousel {
+    position: relative;
+    .carousel-wrapper {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      overflow: hidden;
+      scroll-behavior: smooth;
+      > * {
+        flex-shrink: 0;
+      }
+    }
+    .carousel-navigate-button {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      align-items: center;
+      height: 100%;
+      overflow: hidden;
+      z-index: 1;
+      padding: 0 10px;
+      &.right {
+        right: 0;
+      }
+      .carousel-navigate-button-wrapper {
+        height: $cc-co-carousel-navigate-button-width;
+        width: $cc-co-carousel-navigate-button-width;
+        background: $cc-co-carousel-navigate-button-background-color;
+        box-shadow: $cc-co-carousel-navigate-button-box-shadow;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: $cc-co-carousel-navigate-button-border-radius;
+        opacity: $cc-co-carousel-navigate-button-border-opacity;
+        pointer-events: all;
+        svg {
+          width: 75%;
+          height: 75%;
+          vertical-align: middle;
+          fill: grey;
+        }
+      }
+      &:hover {
+        .carousel-navigate-button-wrapper {
+          opacity: $cc-co-carousel-navigate-button-border-opacity-hover;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+$cc-co-carousel-navigate-button-width: 50px !default;
+$cc-co-carousel-navigate-button-background-color: white !default;
+$cc-co-carousel-navigate-button-box-shadow: 0px 0px 8px 2px rgb(0 0 0 / 20%) !default;
+$cc-co-carousel-navigate-button-border-radius: 50% !default;
+$cc-co-carousel-navigate-button-border-opacity: 0.5 !default;
+$cc-co-carousel-navigate-button-border-opacity-hover: 1 !default;

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

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

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

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

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

@@ -23,6 +23,7 @@ export declare class InputDatePickerComponent extends BaseInputComponent<Date> i
     width: string | number;
     readonly blur: EventEmitter<Event>;
     showClass(): boolean;
+    isMinimal: boolean;
     constructor(formComponent: FormComponent, iconCacheService: IconCacheService, changeDetector: ChangeDetectorRef, componentFactoryResolver: ComponentFactoryResolver, formUserChangeListener?: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);
     ngOnDestroy(): void;
     ngOnInit(): void;

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

@@ -3,5 +3,29 @@
     @include input;
     font-family: $cc-co-input-date-font-family;
     font-size: $cc-co-input-date-font-size;
+
+    &.is-minimal {
+      display: flex;
+      background-color: transparent;
+      border: none;
+      div.required-indicator {
+        display: none!important;
+      }
+
+        ejs-datepicker {
+        label {
+          display: none;
+        }
+
+          input {
+            font-size: 14px;
+            font-weight: bold;
+          }
+
+        span.e-clear-icon {
+          display: none!important;
+        }
+      }
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/corecomponents_v12",
-  "version": "12.0.65",
+  "version": "12.0.67",
   "description": "Colijn IT core components for Angular 12",
   "private": false,
   "peerDependencies": {
@@ -21,8 +21,10 @@
     "@syncfusion/ej2-angular-richtexteditor": "~19.3.45",
     "@syncfusion/ej2-base": "~19.3.43",
     "@syncfusion/ej2-popups": "~19.3.43",
+    "@types/hammerjs": "2.0.35",
     "@types/three": ">=0.125.0",
     "@tweenjs/tween.js": ">=17.2.0",
+    "hammerjs": "^2.0.8",
     "three": ">=0.125.0"
   },
   "dependencies": {

package/public-api.d.ts

@@ -8,6 +8,8 @@ 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/carousel/carousel.component';
+export * from './lib/components/carousel/carousel.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';