AnteaterKit

.ui-card {
  border: 1px solid;
  border-radius: 2px;
  background-color: white;
}
.ui-card-title {
  border-bottom: 1px solid;
  min-height: 48px;
  display: flex;
  align-items: center;

AnteaterKit

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

@mixin card-color($theme) {
  $background: map-get($theme, background);
  $card-border-color: map-get($background, card-border);

  .ui-card {
    border: 1px solid $card-border-color;
  }

AnteaterKit

  <div style="margin-left: 20px;width: 300px;">
    <uikit-card title='Title' [actions]="[action]">
      <div>
        Content card
      </div>
    </uikit-card>
  </div>

  <ng-template #action>
    <div style="display: flex;  justify-content: space-evenly;">

AnteaterKit

@Component({
  selector: 'uikit-tooltip',
  exportAs: 'uikitTooltip',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
  <ng-template
      #overlay='cdkConnectedOverlay'
      cdkConnectedOverlay

AnteaterKit

@Directive ({
  selector: '[ui-tooltip]',
  exportAs: 'uiTooltip'
})
export class TooltipDirective implements OnInit, OnDestroy, AfterViewInit {
  @Input()
  content: string;
  component: TooltipComponent;
  componentFactory: ComponentFactory<TooltipComponent>  = this.resolver.resolveComponentFactory(TooltipComponent);
  protected readonly disposables: Array<() => void> = [];

AnteaterKit

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

.tooltip-body {
  padding: 16px 8px;
  background-color: #c7c7c7;
  border-radius: 4px;
  font-size: 14px;
}

AnteaterKit

import { DOCUMENT } from '@angular/common';
import { Directive, ElementRef, Inject, Output } from '@angular/core';
import { fromEvent } from 'rxjs';
import { distinctUntilChanged, map, switchMap, takeUntil, tap } from 'rxjs/operators';

export interface ResizeData {
  width: number;
  height: number;
}

AnteaterKit

mport { Component, HostBinding, Input } from '@angular/core';
import { ResizeData } from './resizable.directive';

export type ResizeDirection = 'vertical' | 'horizontal';

@Component({
  selector: 'span[resizable]',
  templateUrl: './resizable.template.html',
  styleUrls: ['./resizable.style.scss'],
})

AnteaterKit

<div class="resizable">
    <div class="resizable__vertical">
        <div class="resizable__vertical__horisontal">
            {{width}}
            <div class="resizable__vertical__horisontal__content">
                <ng-content></ng-content>
            </div>
            <div *ngIf='resizeDirection === "horizontal"' class="bar resizable__vertical__horisontal__barRight" (resizable)="onResize($event)"></div>
        </div>
        <div *ngIf='resizeDirection === "vertical"'  id='bar-vertical' class="bar resizable__vertical__barBotton" (resizable)="onResize($event)"></div>

AnteaterKit

bar {
    position: absolute;
    background-clip: content-box;
    cursor: ew-resize;
}

.resizable {
    width: 100%;
    height: 100%;
    &__vertical {