@colijnit/corecomponents_v12 12.2.17 → 12.2.19

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

@@ -0,0 +1,53 @@
+$cc-simple-grid-font-familiy: $cc-font-family !default;
+$cc-simple-grid-font-size: $cc-font-size-default !default;
+$cc-simple-grid-text-color: #172121 !default;
+
+$cc-simple-grid-header-font-familiy: $cc-font-family !default;
+$cc-simple-grid-header-font-size: 10px !default;
+$cc-simple-grid-header-font-weight: normal !default;
+$cc-simple-grid-header-text-transform: uppercase !default;
+$cc-simple-grid-header-background-color: white !default;
+$cc-simple-grid-header-padding: 10px 5px !default;
+$cc-simple-grid-header-border-style: solid !default;
+$cc-simple-grid-header-border-width: 0 0 1px 0 !default;
+$cc-simple-grid-header-border-color: $cc-color-action !default;
+$cc-simple-grid-header-sizer-background-color: white !default;
+
+$cc-simple-grid-row-align-items: center !default;
+$cc-simple-grid-row-vertical-align-items: middle !default;
+$cc-simple-grid-row-background-color: $cc-color-grid-row-background !default;
+$cc-simple-grid-row-odd-background-color: $cc-color-grid-row-odd-background !default;
+$cc-simple-grid-row-selected-background-color: $cc-color-grid-row-selected-background !default;
+$cc-simple-grid-row-edit-input-background-color: transparent !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: #F5F5FC !default;
+$cc-simple-grid-row-disabled-opacity: 0.5 !default;
+$cc-simple-grid-row-disabled-background-color: white !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: 75px !default;
+$cc-simple-grid-row-even-background: #F5F5FC !default;
+
+$cc-simple-grid-cell-icon-size: 20px !default;
+$cc-simple-grid-cell-field-border-style: solid !default;
+$cc-simple-grid-cell-field-border-color: $cc-color-border !default;
+$cc-simple-grid-cell-field-border-width: 1px !default;
+$cc-simple-grid-cell-field-padding: 10px !default;
+$cc-simple-grid-cell-field-radius: 5px !default;
+$cc-simple-grid-cell-field-align-items: center !default;
+
+$cc-simple-grid-pagination-background-color: white !default;
+$cc-simple-grid-pagination-bar-margin: 10px 0 0 0 !default;
+
+$cc-simple-grid-button-background-color: #FFFFFF !default;
+
+$cc-simple-grid-input-checkbox-height: 18px !default;
+$cc-simple-grid-input-checkbox-color: #F5F5FC;
+$cc-simple-grid-input-checkbox-checked-color: #1a73e8;
+$cc-simple-grid-input-checkbox-check-mark-width: $cc-simple-grid-input-checkbox-height * .35 !default;
+$cc-simple-grid-input-checkbox-check-mark-height: $cc-simple-grid-input-checkbox-height * .55 !default;
+$cc-simple-grid-input-checkbox-check-mark-color: white !default;
+$cc-simple-grid-input-checkbox-check-mark-thickness: 2px !default;
+$cc-simple-grid-input-checkbox-border-radius: 0 !default;

package/projects/corecomponents/src/lib/components/simple-grid/style/_theme.scss

@@ -0,0 +1,38 @@
+@include export-module('cc-simple-grid-theme') {
+  .co-simple-grid {
+    color: $cc-color-font;
+    .simple-grid-column-sizer {
+      background-color: $cc-simple-grid-header-sizer-background-color;
+    }
+    .simple-grid-column-header {
+      border-color: $cc-simple-grid-header-border-color;
+      color: $cc-color-label;
+    }
+    .simple-grid-column-header {
+      background-color: $cc-simple-grid-header-background-color;
+    }
+  }
+  .simple-grid-column-cell-field {
+    border-color: $cc-simple-grid-cell-field-border-color;
+  }
+  // styling outside of grid because of drag and drop functionality
+  .simple-grid-row {
+    background-color: $cc-simple-grid-row-background-color;
+    border-color: $cc-simple-grid-row-border-color;
+    &.selected {
+      background-color: $cc-simple-grid-row-selected-background-color;
+    }
+    &:hover:not(.selected):not(.disabled) {
+      background-color: $cc-simple-grid-row-hover-background-transparent;
+    }
+    &.editing {
+      .form-input {
+        background-color: $cc-simple-grid-row-edit-input-background-color;
+      }
+    }
+  }
+}
+
+co-pagination {
+  background-color: $cc-simple-grid-pagination-background-color;
+}

package/projects/corecomponents/src/lib/components/simple-grid/style/material.scss

@@ -0,0 +1,6 @@
+@import "../../../style/mixin";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../grid-toolbar/style/material";
+@import "../../pagination/style/material";

package/projects/corecomponents/src/lib/components/tile/style/_layout.scss

@@ -0,0 +1,54 @@
+@include export-module('co-tile-layout') {
+  .co-tile {
+    display: flex;
+    flex-direction: column;
+    /*align-items: center;*/
+    position: relative;
+    flex-shrink: 1;
+    flex-grow: 1;
+    min-width: 300px;
+    max-width: 368px;
+    transition: all 0.14s ease-out;
+    &:hover {
+      .open-icon {
+        opacity: 1;
+        transition: all .2s ease;
+      }
+      .extended-shadow-wrapper {
+        display: grid;
+      }
+      //z-index: 1;
+      box-shadow: 0px 0px 13px -2px rgba(0, 0, 0, 0.2);
+    }
+    &.small {
+      min-width: 150px;
+      max-width: 150px;
+      .tile-top, .tile-bottom {
+        height: 25px;
+      }
+      .tile-extra-bottom {
+        min-height: 20px;
+        padding: 10px 0;
+        .main {
+          font-size: 13px;
+          padding: 0 10px;
+        }
+      }
+      .tile-wrapper {
+        padding: 15px;
+      }
+      .image {
+        height: 70px;
+      }
+      .no-image-wrapper {
+        .no-image {
+          height: 60px;
+          width: 60px;
+        }
+        span {
+          font-size: 10px;
+        }
+      }
+    }
+  }
+}

package/projects/corecomponents/src/lib/components/tile/style/_theme.scss

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

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

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

package/projects/corecomponents/src/lib/components/tile/tile.component.ts

@@ -0,0 +1,71 @@
+import {Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from '@angular/core';
+import {IconCacheService} from '../icon/icon-cache.service';
+import {CoreComponentsIcon} from '../../core/enum/core-components-icon.enum';
+import {SafeHtml} from '@angular/platform-browser';
+import {InputBoolean} from '../../core/decorator/input-boolean.decorator';
+
+@Component({
+  selector: 'co-tile',
+  template: `
+    <div class="tile-wrapper">
+      <div class="tile-top">
+        <ng-content select="[tile-top-content]"></ng-content>
+      </div>
+      <div class="image" (click)="onImageClick.emit()">
+        <co-image *ngIf="image" [source]="image"></co-image>
+        <div class="no-image-wrapper" *ngIf="!image && !noImagePlaceholder">
+          <co-icon class="no-image" [iconData]="imagePlaceHolder"></co-icon>
+          <span [textContent]="'Geen afbeelding'"></span>
+        </div>
+        <ng-content select="[tile-over-image]"></ng-content>
+      </div>
+      <div class="tile-bottom">
+        <ng-content select="[tile-bottom-content]"></ng-content>
+      </div>
+    </div>
+    <div class="tile-extra-bottom">
+      <div class="main">
+        <ng-content select="[tile-extra-bottom-content]"></ng-content>
+      </div>
+    </div>
+    <div class="tile-extended-shadow-wrapper" *ngIf="mouseOverExtended">
+      <div class="shodow-masque"></div>
+      <div class="extended">
+        <ng-content select="[tile-extended-content]"></ng-content>
+      </div>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class TileComponent {
+
+  public readonly icon: typeof CoreComponentsIcon = CoreComponentsIcon;
+
+  @Input()
+  public image: string;
+
+  @Input()
+  @InputBoolean()
+  public mouseOverExtended: boolean = false;
+
+  @HostBinding('class.small')
+  @Input()
+  @InputBoolean()
+  public small: boolean = false;
+
+  @Input()
+  @InputBoolean()
+  public noImagePlaceholder: boolean = false;
+
+  @Output()
+  public onImageClick: EventEmitter<void> = new EventEmitter<void>();
+
+  @HostBinding('class.co-tile')
+  public showClass: boolean = true;
+
+  public imagePlaceHolder: null | SafeHtml;
+
+  constructor(private _iconCache: IconCacheService) {
+    this.imagePlaceHolder = this._iconCache.getIcon(this.icon.Camera);
+  }
+}

package/projects/corecomponents/src/lib/components/tile/tile.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TileComponent } from './tile.component';
+import { IconModule } from '../icon/icon.module';
+import { IconCacheService } from '../icon/icon-cache.service';
+import { ImageModule } from '../image/image.module';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        IconModule,
+        ImageModule
+    ],
+    declarations: [TileComponent],
+    providers: [
+        IconCacheService
+    ],
+    exports: [TileComponent]
+})
+export class TileModule {
+}

package/projects/corecomponents/src/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/projects/corecomponents/src/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/projects/corecomponents/src/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/projects/corecomponents/src/lib/components/tile-select/style/material.scss

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

package/projects/corecomponents/src/lib/components/tile-select/tile-select.component.ts

@@ -0,0 +1,36 @@
+import {Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  selector: 'co-tile-select',
+  template: `
+      <div class="co-tile-wrapper" (click)="selectedChange.emit(selected)">
+          <div class="co-tile-select-wrapper" *ngIf="showRadioButton">
+              <co-input-radio-button [model]="selected" [readonly]="selected || readonly" (modelChange)="selectedChange.emit($event)"></co-input-radio-button>
+          </div>
+          <div class="co-tile-content-wrapper">
+              <ng-content></ng-content>
+          </div>
+      </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class TileSelectComponent {
+  @HostBinding('class.selected')
+  @Input()
+  public selected: boolean = false;
+
+  @Input()
+  public readonly: boolean = false;
+
+  @Input()
+  public showRadioButton: boolean = true;
+
+  @Output()
+  public selectedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  @HostBinding('class.co-tile-select')
+  public showClass() {
+    return true;
+  }
+
+} 

package/projects/corecomponents/src/lib/components/tile-select/tile-select.module.ts

@@ -0,0 +1,19 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {TileSelectComponent} from './tile-select.component';
+import {InputRadioButtonModule} from '../input-radio-button/input-radio-button.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    InputRadioButtonModule
+  ],
+  declarations: [
+    TileSelectComponent
+  ],
+  exports: [
+    TileSelectComponent
+  ]
+})
+export class TileSelectModule {
+}

package/projects/corecomponents/src/lib/components/tooltip/style/_layout.scss

@@ -0,0 +1,52 @@
+@include export-module('co-tooltip-layout') {
+  .co-tooltip {
+    font-family: $co-tooltip-font-family;
+    font-size: $co-tooltip-font-size;
+    position: fixed;
+    min-height: 20px;
+    min-width: 200px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 10px;
+    padding: $co-tooltip-padding;
+    z-index: 999999;
+    border-radius: $co-tooltip-border-radius;
+    border: $co-tooltip-border;
+
+    &::after,
+    &::before {
+      border: solid transparent;
+      content: " ";
+      display: block;
+      height: 0;
+      pointer-events: none;
+      position: absolute;
+      width: 0;
+      bottom: -20px;
+    }
+
+    &::after {
+      left: 20px;
+      border-width: 10px;
+    }
+
+    &::before {
+      margin-left: 12px;
+      border-width: 8px;
+      z-index: 1;
+      bottom: -16px;
+    }
+    &.bottom {
+      &::after,
+      &::before {
+        bottom: 100%;
+      }
+    }
+  }
+  //.validation-error-content {
+  //  display: flex;
+  //  flex-direction: row;
+  //  align-items: center;
+  //}
+}

package/projects/corecomponents/src/lib/components/tooltip/style/_material-definition.scss

@@ -0,0 +1,8 @@
+$co-tooltip-font-family: $cc-font-family !default;
+$co-tooltip-font-size: $cc-font-size-default !default;
+$co-tooltip-padding: 10px !default;
+$co-tooltip-background-color: $cc-color-form-input-background-focus !default;
+$co-tooltip-color: $cc-color-font !default;
+$co-tooltip-border: 2px solid !default;
+$co-tooltip-border-color: black !default;
+$co-tooltip-border-radius: 5px !default;

package/projects/corecomponents/src/lib/components/tooltip/style/_theme.scss

@@ -0,0 +1,33 @@
+@include export-module('co-tooltip-theme') {
+  .co-tooltip {
+    background-color: $co-tooltip-background-color;
+    color: $co-tooltip-color;
+    border-color: $co-tooltip-border-color;
+
+    &::after {
+      border-bottom-color: transparent;
+      border-top-color: $co-tooltip-border-color;
+    }
+
+    &::before {
+      border-bottom-color: transparent;
+      border-top-color: $co-tooltip-background-color;
+    }
+
+    @if $co-tooltip-border == "none" {
+      &::after {
+        display: none;
+      }
+    }
+    &.bottom {
+      &::after {
+        border-top-color: transparent;
+        border-bottom-color: $co-tooltip-border-color;
+      }
+      &::before {
+        border-top-color: transparent;
+        border-bottom-color: $co-tooltip-background-color;
+      }
+    }
+  }
+}

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

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

package/projects/corecomponents/src/lib/components/tooltip/tooltip.component.ts

@@ -0,0 +1,96 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  HostBinding,
+  Input,
+  ViewEncapsulation
+} from '@angular/core';
+import {SafeHtml} from '@angular/platform-browser';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+
+@Component({
+  selector: 'co-tooltip',
+  template: `
+    <div class="tooltip" [innerHTML]="toolTip"></div>
+  `,
+  animations: [
+    trigger("showHide", [
+      state("void", style({opacity: 0})),
+      state("*", style({opacity: 1})),
+      transition("void <=> *", animate("200ms ease-in-out")),
+    ])
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class TooltipComponent implements AfterViewInit {
+
+  @Input()
+  public set hostElement(value: HTMLElement) {
+    this._hostElement = value;
+    // this._positionTooltip();
+  }
+
+  public get hostElement(): HTMLElement {
+    return this._hostElement;
+  }
+
+  @Input()
+  public toolTip: SafeHtml | string;
+
+  @HostBinding('class.co-tooltip')
+  public showClass() {
+    return true;
+  }
+
+  @HostBinding("style.top.px")
+  public top: number = -100;
+
+  @HostBinding("style.left.px")
+  public left: number = -100;
+
+  @HostBinding("class.bottom")
+  public bottom: boolean = false;
+
+  @HostBinding('@showHide')
+  public animate: boolean = true;
+
+  private _hostElement: HTMLElement;
+
+  constructor(
+    private _elementRef: ElementRef,
+    private _changeDetector: ChangeDetectorRef
+  ) {
+  }
+
+  ngAfterViewInit(): void {
+    setTimeout(() => {
+      this._positionTooltip();
+    });
+  }
+
+  private _positionTooltip(): void {
+    if (this.hostElement && this._elementRef && this._elementRef.nativeElement) {
+      const rect: ClientRect = this.hostElement.getBoundingClientRect();
+      const ownRect: ClientRect = this._elementRef.nativeElement.getBoundingClientRect();
+      let wantedLeft: number = rect.left;
+      let wantedTop: number = rect.top - ownRect.height;
+
+      if (wantedTop < 0) { // out of view, move to bottom
+        this.bottom = true;
+        wantedTop = rect.bottom;
+      } else {
+        this.bottom = false;
+      }
+
+      this.left = wantedLeft;
+      this.top = wantedTop;
+
+      this._changeDetector.markForCheck();
+      this._changeDetector.detectChanges();
+    }
+  }
+}

package/projects/corecomponents/src/lib/components/tooltip/tooltip.module.ts

@@ -0,0 +1,17 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {TooltipComponent} from "./tooltip.component";
+
+@NgModule({
+    imports: [
+        CommonModule
+    ],
+    declarations: [
+        TooltipComponent
+    ],
+    exports: [
+        TooltipComponent
+    ]
+})
+export class TooltipModule {
+}