AnteaterKit

{
  "data": [
    { "article": "1", "colorCode": "Windstorm", "materialCode": "23" }
  ]
}

AnteaterKit

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appAsFileDrop]'
})
export class AsFileDropDirective {
  private element: HTMLElement;
  constructor(private elementRef: ElementRef) {
    this.element = elementRef.nativeElement;
  }

AnteaterKit

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appAsFileDrop]'
})
export class AsFileDropDirective {
  private element: HTMLElement;
  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    this.element = elementRef.nativeElement;
  }

AnteaterKit

<button shButton>Simple</button>
<button shButton id='add-enabled' color="primary">Primary</button>
<button shButton color="accent">Accent</button>
<button shButton color="warn">Warn</button>
<button shButton id='add-disabled' color="primary" disabled="true">Disabled</button>

<button flatButton>Simple Flat</button>
<button flatButton color="primary">Primary Flat</button>
<button flatButton color="accent">Accent Flat</button>
<button flatButton color="warn">Warn Flat</button>

AnteaterKit

@Component({
  selector: 'uikit-checkbox',
  exportAs: 'uiKitCheckbox',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <span
      class="checkbox"
      [class.checkbox-checked]="checked"
    >

AnteaterKit

export class CheckboxComponent implements OnInit , ControlValueAccessor, OnDestroy, AfterViewInit {
  constructor(private cdr: ChangeDetectorRef) { }
  checked = false;
  disabled = false;
  @Output() readonly сheckedChange = new EventEmitter<boolean>();
  onChange = (e) => {};
  onTouched = () => {};

  ngAfterViewInit(): void {
    throw new Error('Method not implemented.');

AnteaterKit

@Component({
  selector: 'uikit-checkbox',
  exportAs: 'uiKitCheckbox',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <span
      class="checkbox"
      [class.checkbox-checked]="checked"
    >

AnteaterKit

.checkbox {
  position: relative;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.checkbox input {
  margin: 0px;
  background: none;

AnteaterKit

@import '../../core/theme/theming.scss';

@mixin checkbox-color($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $foreground: map-get($theme, foreground);
  $color:  get-color($primary);

AnteaterKit

@Component({
  selector: 'uikit-card',
  exportAs: 'uiKitCard',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
  <div class='ui-card'>
    <div class='ui-card-title'>
      <div class='ui-card-title-text'>