AnteaterKit

    <div class="tui-row tui-row_adaptive">
      <div class="tui-col_xs-12 tui-col_s-6 tui-col_sm-6 tui-col_md-3 tui-col_lg-3">
        <div class="dummy">
          <tui-island>
            <h3 class="tui-island__title">Total sales</h3>
            <div>
              <app-island-detail>
              </app-island-detail>
            </div>
          </tui-island>

AnteaterKit

import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { ResizableModule } from './resizable.module';

describe('resizable', () => {
    @Component({
        template: `
            <div style='width: 300px; height: 300px;'>
                <span resizable resizeDirection='vertical' >

AnteaterKit

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

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

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

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

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

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

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

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

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

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;">