@colijnit/corecomponents_v12 12.2.17 → 12.2.19

package/projects/corecomponents/src/lib/components/carousel/style/material.scss

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

package/projects/corecomponents/src/lib/components/carousel-3d/carousel-3d.component.ts

@@ -0,0 +1,392 @@
+import {
+  AfterViewInit,
+  Component,
+  ContentChildren,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnDestroy,
+  Output,
+  ViewChild,
+  ViewEncapsulation
+} from "@angular/core";
+import {
+  AmbientLight,
+  Box3,
+  Color,
+  Fog,
+  Mesh,
+  MeshPhongMaterial,
+  PerspectiveCamera,
+  PlaneGeometry,
+  Scene,
+  SpotLight,
+  Vector2,
+  Vector3,
+  WebGLRenderer
+} from "three";
+import {CarouselItem} from "./carouselItem";
+import {CSS3DObject, CSS3DRenderer} from "three/examples/jsm/renderers/CSS3DRenderer";
+import * as TWEEN from "@tweenjs/tween.js";
+
+@Component({
+  selector: "co-carousel-3d",
+  template: `
+    <div class="carousel-3d-canvas-wrapper" #canvasContainer>
+      <div class="carousel-wrapper" #carouselWrapper>
+        <div class="carousel-navigate-button left">
+          <div class="carousel-navigate-button-wrapper" *ngIf="canNavigateLeft" (click)="handleButtonLeftClick()">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
+              <path
+                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="carousel-navigate-button right">
+          <div class="carousel-navigate-button-wrapper" *ngIf="canNavigateRight" (click)="handleButtonRightClick()">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
+              <path
+                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class Carousel3dComponent implements AfterViewInit, OnDestroy {
+  @ViewChild("canvasContainer", {read: ElementRef})
+  public canvasContainer: ElementRef;
+
+  @ViewChild("carouselWrapper", {read: ElementRef})
+  public carouselWrapper: ElementRef;
+
+  @ContentChildren("carouselItem", {read: ElementRef, descendants: true}) set children(children) {
+    this._elementsCreated = false;
+    this._tileElements = children.toArray();
+    this._buildCarousel();
+  }
+
+  @Input()
+  public tileWidth: number;
+
+  @Input()
+  public tileHeight: number;
+
+  @Input()
+  public cameraHeight: number = 50;
+
+  @Input()
+  public shadow: boolean = false;
+
+  @Input()
+  public selectedIndex: number = 0;
+
+  @Output()
+  public indexSelected: EventEmitter<number> = new EventEmitter<number>();
+
+  @HostBinding("class.co-carousel-3d")
+  public showClass(): boolean {
+    return true;
+  }
+
+  private _camera: PerspectiveCamera;
+  private _cameraZoom: number = 0;
+  private _backgroundColor = 0xffffff;
+  private _sceneCss: Scene;
+  private _scene: Scene;
+  private _rendererCss: CSS3DRenderer;
+  private _renderer: WebGLRenderer;
+  private _ambientLight: boolean = true;
+  private _tileSize: Vector2 = new Vector2();
+  private _tileMargin: number = 20;
+  private _targetPositions = [];
+  private _tileElements: ElementRef[] = [];
+  private _tileOffset = 0;
+  private _tiles3D: CarouselItem[] = [];
+  private _planeColor = 0xffffff;
+  private _planeHeight = -46;
+  private _spotLightPosition: Vector3 = new Vector3(0, 250, -200);
+  private _fullCircle: boolean = false;
+  private _initialized: boolean = false;
+  private _elementsCreated: boolean = false;
+
+  public canNavigateLeft: boolean = false;
+  public canNavigateRight: boolean = false;
+
+  ngAfterViewInit(): void {
+      this._buildCarousel();
+  }
+
+  ngOnDestroy(): void {
+    this.canvasContainer = undefined;
+    this.carouselWrapper = undefined;
+    this._clearScenes();
+  }
+
+  public handleButtonLeftClick(): void {
+    this._tileOffset -= 1;
+    this._rotate(400);
+  }
+
+  public handleButtonRightClick(): void {
+    this._tileOffset += 1;
+    this._rotate(400);
+  }
+
+  private _buildCarousel(): void {
+    if (!this._initialized) {
+      this._init();
+    }
+    if (this._initialized && !this._elementsCreated) {
+      this._createTiles();
+    }
+    this._checkNavigationButtons();
+    this._resizeCanvasToDisplaySize();
+  }
+
+  private _init(): void {
+    if (!this.canvasContainer || !this.canvasContainer.nativeElement) {
+      return;
+    }
+
+    this._initCamera();
+    this._initScene();
+    this._initRenderer();
+
+    if (this.shadow) {
+      const geometry = new PlaneGeometry(10000, 10000);
+      const material = new MeshPhongMaterial({color: this._planeColor, shininess: 100});
+      const plane = new Mesh(geometry, material);
+      plane.receiveShadow = true;
+      plane.rotation.x = -Math.PI / 2;
+      plane.position.y = this._planeHeight;
+      this._scene.add(plane);
+
+      const spotLight = new SpotLight(0xffffff, 0.5);
+      spotLight.position.copy(this._spotLightPosition);
+      spotLight.castShadow = true;
+      spotLight.shadow.mapSize.width = 512;
+      spotLight.shadow.mapSize.height = 512;
+      spotLight.shadow.camera.near = 50;
+      spotLight.shadow.camera.far = 1200;
+      spotLight.shadow.camera.fov = 30;
+      spotLight.penumbra = 1;
+      this._scene.add(spotLight);
+    }
+
+    this.carouselWrapper.nativeElement.appendChild(this._rendererCss.domElement);
+    this.canvasContainer.nativeElement.appendChild(this.carouselWrapper.nativeElement);
+    this.canvasContainer.nativeElement.appendChild(this._renderer.domElement);
+
+    this._render();
+    this._animate();
+
+    window.addEventListener("resize", () => {
+      this._resizeCanvasToDisplaySize();
+    }, false);
+
+    this._initialized = true;
+  }
+
+  private _initCamera(): void {
+    this._camera = new PerspectiveCamera(50, this.canvasContainer.nativeElement.clientWidth / this.canvasContainer.nativeElement.clientHeight, 1, 10000);
+    this._camera.position.z = 600 - this._cameraZoom;
+    this._camera.position.y = this.cameraHeight;
+    this._camera.lookAt(new Vector3());
+  }
+
+  private _initScene(): void {
+    this._sceneCss = new Scene();
+    this._scene = new Scene();
+    this._scene.background = new Color(this._backgroundColor);
+
+    if (this._ambientLight) {
+      const light = new AmbientLight(0xaaaaaa); // soft white light
+      this._scene.add(light);
+
+      this._scene.fog = new Fog(this._backgroundColor, 70, 2500);
+    }
+  }
+
+  private _initRenderer(): void {
+    this._rendererCss = new CSS3DRenderer();
+    this._rendererCss.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
+    this._rendererCss.domElement.style.position = "absolute";
+
+    this._renderer = new WebGLRenderer({antialias: true});
+    this._renderer.setPixelRatio(window.devicePixelRatio);
+    this._renderer.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
+    this._renderer.shadowMap.enabled = true;
+  }
+
+  private _disposeObject(obj: Mesh | CSS3DObject): void {
+    if (obj instanceof Mesh) {
+      if (obj.geometry) {
+        obj.geometry.dispose();
+      }
+      if (obj.material) {
+        Array.isArray(obj.material)? obj.material.map(m => m.dispose()) : obj.material.dispose();
+      }
+      obj = undefined;
+    } else {
+      obj.element = undefined;
+      obj = undefined;
+    }
+  }
+
+  private _clearScenes(): void {
+    const meshes: Mesh[] = this._tiles3D.map(t => t.mesh);
+    const cssObjs: CSS3DObject[] = this._tiles3D.map(t => t.object);
+    this._scene.remove(...meshes);
+    meshes.map(m => this._disposeObject(m));
+    meshes.length = 0;
+    this._sceneCss.remove(...cssObjs);
+    cssObjs.map(o => this._disposeObject(o));
+    cssObjs.length = 0;
+    this._tiles3D.length = 0;
+    this._targetPositions.length = 0;
+  }
+
+  private _createTiles(): void {
+    this._clearScenes();
+    this._tileSize.x = this.tileWidth;
+    this._tileSize.y = this.tileHeight;
+    const tileWidth = this._tileSize.x + this._tileMargin;
+    const numItems: number = Math.max(this._tileElements.length, 20);
+    this._fullCircle = this._tileElements.length >= 20;
+    let angleTileDeg: number = 360 / numItems;
+    const circumference: number = numItems * tileWidth;
+    const radius: number = circumference / (Math.PI * 2);
+    const y = this.shadow ? 75 : 45;
+
+    const len: number = numItems;
+    let angleDeg: number = 90;
+    const position: Vector3 = new Vector3();
+    for (var i = 0; i < len; i++) {
+      const angle = angleDeg * ( Math.PI / 180 ); // Radians
+      const x = radius * Math.cos(angle);
+      const z = -radius + radius * Math.sin(angle);
+      position.set(x, y, z);
+      this._targetPositions.push(position.clone());
+      if (i < this._tileElements.length) {
+        const tile: CarouselItem = new CarouselItem({tileSize: this._tileSize}, i, (idx: number) => this._rotateTo(idx));
+        tile.setPosition(position);
+        tile.setContent(this._tileElements[i].nativeElement);
+        this._scene.add(tile.mesh);
+        this._sceneCss.add(tile.object);
+        this._tiles3D.push(tile);
+      }
+      angleDeg = angleDeg - angleTileDeg; // CW instead of CCW
+    }
+    this._adjustCameraZoom();
+    this._tileOffset = this.selectedIndex;
+    this._rotate(0);
+    this._render();
+  }
+
+  private _adjustCameraZoom(): void {
+    if (this._tiles3D.length === 0) {
+      return;
+    }
+    const object = this._tiles3D[0].mesh;
+    // offset = offset || 1.15;
+
+    // get bounding box of object - this will be used to setup controls and camera
+    const boundingBox = new Box3();
+    boundingBox.setFromObject(object);
+    const center: Vector3 = new Vector3();
+    boundingBox.getCenter(center);
+    const size: Vector3 = new Vector3();
+    boundingBox.getSize(size);
+
+    // get the max side of the bounding box (fits to width OR height as needed )
+    const maxDim = Math.max(size.x, size.y, size.z);
+    this._camera.position.z = Math.abs((maxDim / 2) * Math.atan(this._camera.fov / 2));
+    this._camera.lookAt(center);
+  }
+
+  private _checkNavigationButtons(): void {
+    const currentIdx: number = this._getSelectedIndex();
+    this.canNavigateLeft = (currentIdx > 0) || this._fullCircle;
+    this.canNavigateRight = (currentIdx < this._tileElements.length - 1) || this._fullCircle;
+  }
+
+  private _animate() {
+    TWEEN.update();
+    setTimeout(() => {
+      this._renderer.setAnimationLoop(() => this._animate());
+    }, 200);
+  }
+
+  private _getSelectedIndex() {
+    return Math.max(0, Math.min(this.selectedIndex, this._tileElements.length - 1));
+  }
+
+  private _rotate(duration) {
+    TWEEN.removeAll();
+
+    for (let i: number = 0; i < this._tiles3D.length; i++) {
+      const tile = this._tiles3D[i];
+
+      if (Math.abs(this._tileOffset) > this._targetPositions.length) { // full circle
+        this._tileOffset = this._tileOffset > 0 ? 1 : -1;
+      }
+
+      let positionIdx: number = i - this._tileOffset;
+      if (positionIdx > this._targetPositions.length - 1) {
+        positionIdx = positionIdx - this._targetPositions.length;
+      } else if (positionIdx < 0) {
+        positionIdx = this._targetPositions.length + positionIdx;
+      }
+      const target = this._targetPositions[positionIdx];
+
+      new TWEEN.Tween(tile.object.position)
+        .to(target, duration)
+        .easing(TWEEN.Easing.Quartic.Out)
+        .start();
+      new TWEEN.Tween(tile.mesh.position)
+        .to(target, duration)
+        .easing(TWEEN.Easing.Quartic.Out)
+        .start();
+    }
+
+    new TWEEN.Tween()
+      .to({}, duration * 2)
+      .onUpdate(() => {
+        this._render();
+      })
+      .start();
+
+    this.selectedIndex = this._tileOffset;
+    this._checkNavigationButtons();
+    this.indexSelected.next(this._getSelectedIndex());
+  }
+
+  private _rotateTo(index: number) {
+    const current = this._getSelectedIndex();
+    this._tileOffset += index - current;
+    this._rotate(800);
+  }
+
+  private _resizeCanvasToDisplaySize() {
+    setTimeout(() => {
+      if (!this.canvasContainer || !this.canvasContainer.nativeElement) {
+        return;
+      }
+      this._camera.aspect = this.canvasContainer.nativeElement.clientWidth / this.canvasContainer.nativeElement.clientHeight;
+      this._camera.updateProjectionMatrix();
+      this._rendererCss.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
+      this._renderer.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
+      this._render();
+    });
+  }
+
+  private _render() {
+    this._rendererCss.render(this._sceneCss, this._camera);
+    this._renderer.render(this._scene, this._camera);
+  }
+
+}

package/projects/corecomponents/src/lib/components/carousel-3d/carousel-3d.module.ts

@@ -0,0 +1,17 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {Carousel3dComponent} from "./carousel-3d.component";
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    Carousel3dComponent
+  ],
+  exports: [
+    Carousel3dComponent
+  ]
+})
+export class Carousel3dModule {
+}

package/projects/corecomponents/src/lib/components/carousel-3d/carouselItem.ts

@@ -0,0 +1,77 @@
+import {CSS3DObject} from "three/examples/jsm/renderers/CSS3DRenderer";
+import {Mesh, PlaneBufferGeometry, Vector2, Vector3} from "three";
+
+export class CarouselItem {
+
+  public object: CSS3DObject;
+  public mesh: Mesh;
+  public index: number;
+
+  private _options: {
+    tileSize: Vector2,
+    tileBackgroundColor: any,
+    textSelectable: boolean,
+    tileBorderColor: any
+  };
+  private _element: HTMLDivElement;
+
+  constructor(options, index, onClick) {
+    this._options = options || {};
+    this.index = index;
+
+    const width = this._options.tileSize?.x || 0;
+    const height = this._options.tileSize?.y || 0;
+
+    this._element = document.createElement('div');
+    // this._element.style.backgroundColor = this._options.tileBackgroundColor;
+    this._element.style.width = width + "px";
+    this._element.style.height = height + "px";
+
+    this._element.addEventListener("click", () => {
+      if (onClick) {
+        onClick(this.index);
+      }
+    }, false);
+
+    this.object = new CSS3DObject(this._element);
+
+    const geometry = new PlaneBufferGeometry(width, height);
+    this.mesh = new Mesh(geometry, options.tileMaterial);
+    this.mesh.castShadow = true;
+  }
+
+  public setPosition(position: Vector3): void {
+    if (this.mesh) {
+      this.mesh.position.copy(position);
+    }
+    if (this.object) {
+      this.object.position.copy(position);
+    }
+  }
+
+  public setContent(content): void {
+    if (this._element) {
+
+      // remove any exising tile content before setting new content
+      while (this._element.lastElementChild) {
+        this._element.removeChild(this._element.lastElementChild);
+      }
+
+      try {
+        this._element.appendChild(content);
+      }
+      catch (err) {
+      }
+    }
+  }
+
+  public setVisible(visible: boolean): void {
+    if (this.mesh) {
+      this.mesh.visible = visible;
+    }
+
+    if (this.object) {
+      this.object.visible = visible;
+    }
+  }
+}

package/projects/corecomponents/src/lib/components/carousel-3d/style/_layout.scss

@@ -0,0 +1,62 @@
+@include export-module('cc-carousel-3d-layout') {
+  .co-carousel-3d {
+    display: block;
+    width: 100%;
+    height: 100%;
+    .carousel-3d-canvas-wrapper {
+      position: relative;
+      height: 100%;
+      width: 100%;
+    }
+    .carousel-wrapper {
+      position: absolute;
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      pointer-events: none;
+      -webkit-touch-callout: none; /* iOS Safari */
+      -webkit-user-select: none; /* Safari */
+      -khtml-user-select: none; /* Konqueror HTML */
+      -moz-user-select: none; /* Firefox */
+      -ms-user-select: none; /* Internet Explorer/Edge */
+      user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+    }
+    .carousel-navigate-button {
+      position: absolute;
+      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-3d-navigate-button-width;
+        width: $cc-co-carousel-3d-navigate-button-width;
+        background: $cc-co-carousel-3d-navigate-button-background-color;
+        box-shadow: $cc-co-carousel-3d-navigate-button-box-shadow;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: $cc-co-carousel-3d-navigate-button-border-radius;
+        opacity: $cc-co-carousel-3d-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-3d-navigate-button-border-opacity-hover;
+        }
+      }
+    }
+  }
+}

package/projects/corecomponents/src/lib/components/carousel-3d/style/_material-definition.scss

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

package/projects/corecomponents/src/lib/components/carousel-3d/style/_theme.scss

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

package/projects/corecomponents/src/lib/components/carousel-3d/style/material.scss

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

package/projects/corecomponents/src/lib/components/checkmark-overlay/checkmark-overlay.component.ts

@@ -0,0 +1,99 @@
+import {
+  Component,
+  ElementRef,
+  HostBinding,
+  Input,
+  QueryList, Renderer2,
+  ViewChildren,
+  ViewEncapsulation
+} from "@angular/core";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+
+
+@Component({
+  selector: "co-checkmark-overlay",
+  template: `
+    <div *ngIf="showOverlay">
+      <div class="checkmark-overlay-wrapper" *ngIf="showWrapper" @showHideSaveCancel>
+        <div class="checkmark-buttons-button save" [class.finished]="!visible">
+          <div class="save-button-spinner">
+            <div #animatediv></div>
+            <div #animatediv></div>
+            <div #animatediv></div>
+            <div #animatediv></div>
+          </div>
+          <div class="spinner-checkmark" *ngIf="!visible && successful"></div>
+        </div>
+      </div>
+    </div>
+  `,
+  animations: [
+    trigger('showHideSaveCancel', [
+      state('*', style({transform: 'scaleY(1)', opacity: 1})),
+      state('void', style({transform: 'scaleY(0)', opacity: 0})),
+      transition('void <=> *', animate(200))
+    ]),
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class CheckmarkOverlayComponent {
+  @ViewChildren('animatediv', { read: ElementRef }) set content(children) {
+    this.animateDivs = children.toArray();
+    this._checkAnimation();
+  }
+  public animateDivs: QueryList<ElementRef>;
+
+  @Input()
+  public set visible(value: boolean) {
+    if (value) {
+      this.showOverlay = true;
+      this.showWrapper = true;
+    } else {
+      setTimeout(() => this.showOverlay = false, 800);
+      setTimeout(() => this.showWrapper = false, 600);
+    }
+    this._visible = value;
+    this._checkAnimation();
+    this._checkAnimationFinished();
+  }
+
+  public get visible(): boolean {
+    return this._visible;
+  }
+
+  @Input()
+  public successful: boolean;
+
+  @HostBinding("class.co-checkmark-overlay")
+  public showClass() {
+    return true;
+  }
+
+  public showOverlay: boolean = false;
+  public showWrapper: boolean = false;
+
+  private _visible: boolean = false;
+
+  constructor(
+    private _renderer: Renderer2
+  ) { }
+
+  private _checkAnimation(): void {
+    if (this.visible && this.animateDivs) {
+      this.animateDivs.forEach(a => this._renderer.addClass(a.nativeElement, 'animate'));
+    }
+  }
+
+  private _checkAnimationFinished(): void {
+    if (!this.visible && this.animateDivs) {
+      this.animateDivs.forEach(a => {
+        a.nativeElement.addEventListener('animationiteration', this._handleAnimationIteration);
+      });
+    }
+  }
+
+  private _handleAnimationIteration = (event: AnimationEvent) => {
+    this.animateDivs.forEach(a => this._renderer.removeClass(a.nativeElement, 'animate'));
+    event.currentTarget.removeEventListener('animationiteration', this._handleAnimationIteration);
+  }
+}

package/projects/corecomponents/src/lib/components/checkmark-overlay/checkmark-overlay.module.ts

@@ -0,0 +1,18 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {CheckmarkOverlayComponent} from "./checkmark-overlay.component";
+
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    CheckmarkOverlayComponent
+  ],
+  exports: [
+    CheckmarkOverlayComponent
+  ]
+})
+export class CheckmarkOverlayModule {
+}