btv-base-controls 0.1.21 → 0.1.23

package/src/lib/wm-info-card/wm-info-card.html

@@ -0,0 +1,13 @@
+<div class="wm-info-card flex-row">
+    <div class="info-icon" *ngIf="!useCustomIcon">
+        <div class="icon-bg"></div>
+        <img class="info-svg" src="{{'./assets/icon/svg/' + icon + '.svg'}}" alt="type" />
+    </div>
+    <div class="info-icon" *ngIf="useCustomIcon">
+        <ng-content select="[wmCustomIcon]"></ng-content>
+    </div>
+    <div class="flex-col info-content">
+        <div class="info-card-value text-hidden" title="{{value}}">{{value}}</div>
+        <div class="info-card-label text-hidden" title="{{label}}">{{label}}</div>
+    </div>
+</div>

package/src/lib/wm-info-card/wm-info-card.scss

@@ -0,0 +1,56 @@
+@import './../../assets/theme/wmGlobals.scss';
+.wm-info-card {
+    background: var(--pageBackgroundColor);
+    width: 100%;
+    height: 100px;
+    margin-right: 18px;
+    padding: 25px;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+.info-icon {
+    display: inline-flex;
+    width: 48px;
+    height: 48px;
+    border: 1px solid transparent;
+    border-radius: 50%;
+    margin: auto 18px auto 0;
+    flex-shrink: 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.icon-bg {
+    width: 100%; 
+    height: 100%;
+    position: absolute;
+    background-color: var(--strongFontColor);
+    opacity: 0.05;
+}
+.info-svg {
+    margin: auto;
+    width: 24px; 
+    height: 24px;
+    z-index: 1;
+}
+
+.info-content {
+    justify-content: center;
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: hidden;
+}
+
+.info-card-value {
+    color: var(--strongFontColor);
+    line-height: 20px;
+    font-size: 22px;
+    width: 100%; 
+    height: 20px;
+    margin-bottom: 2px;
+}
+
+.info-card-label {
+    color: var(--disabledTextColor);
+    font-size: 14px;
+}

package/src/lib/wm-no-content/wm-no-content.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { IIllustrationId } from '../illustration/illustration.component';
+
+@Component({
+  selector: 'wm-no-content',
+  styleUrls: ['./wm-no-content.scss'],
+  templateUrl: './wm-no-content.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class WmNoContentComponent {
+  @Input() icon: IIllustrationId = '';
+  @Input() label: string = '';
+  @Input() description: string = '';
+  @Input() useFooter: boolean = true;
+  @Input() additionContent: boolean = false;
+}

package/src/lib/wm-no-content/wm-no-content.html

@@ -0,0 +1,13 @@
+<div>
+    <wm-illustration [illustrationId]="icon" class="illustration">
+    </wm-illustration>
+    <div class="no-content-body" *ngIf="(label || description)">
+        <div class="no-content-label" *ngIf="label" [innerHTML]="label"></div>
+        <div class="no-content-desc" *ngIf="description"> {{description}}</div>
+        <div class="no-content-desc" *ngIf="additionContent">
+            <ng-content select="[additionContent]"></ng-content>
+        </div>
+    </div>
+    <div class="no-foot" *ngIf="useFooter">
+        <ng-content></ng-content>
+    </div>

package/src/lib/wm-no-content/wm-no-content.scss

@@ -0,0 +1,60 @@
+@import './../../assets/theme/wmGlobals.scss';
+
+:host {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+
+    margin: auto;
+    text-align: center;
+    box-sizing: border-box;
+    padding: 0px 10px;
+    justify-content: center;
+}
+
+.illustration {
+    min-width: 260px;
+    max-width: 520px;
+    margin: auto;
+}
+
+.no-content-wrap * {
+    box-sizing: inherit;
+}
+
+.img-wrap {
+    width: 120px;
+    height: 120px;
+    margin: 0px auto;
+    background-repeat: no-repeat;
+    cursor: default;
+}
+
+.no-content-body {
+    width: 100%;
+    padding: 12px 0px;
+    overflow-y: hidden;
+    cursor: default;
+}
+
+.no-content-label {
+    color: var(--disabledFontColor);
+    font-size: $fontSize + 4;
+    padding-top: 12px;
+}
+
+.no-content-desc {
+    color: var(--mediumFontColor);
+    font-size: $fontSize + 2;
+    word-break: break-word;
+    padding-top: 12px;
+}
+
+.no-foot {
+    width: 100%;
+    height: 64px;
+    display: flex;
+    justify-content: center;
+    padding: 12px 0px;
+}

package/src/lib/wm-panel-bar/wm-panel-bar.component.ts

@@ -0,0 +1,59 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'wm-panel-bar',
+  styleUrls: ['wm-panel-bar.scss'],
+  templateUrl: './wm-panel-bar.html'
+})
+export class WmPanelBarComponent {
+  @Input() label: string;
+  @Input() labelClasses: 'pb-label' | 'brand-label' = 'pb-label';
+  @Input() openedLabel: string;
+
+  @Input() width: string;
+  @Input() height: string;
+  @Input() maxHeight: string = 'unset';
+  @Input() maxWidth: string = 'unset';
+
+  
+  private _open: boolean= false;
+
+  @Input() set open(value: boolean) {
+    if (value === this._open) return;
+    this._open = value;
+  }
+
+  get open(): boolean {
+    return this._open;
+  }
+  @Input() collapseText: string = 'Collapse';
+  @Input() expandText: string = 'Expand';
+  @Output() openChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+  directionBottom: boolean = true;
+  directionLeft: boolean = false;
+
+  private _direction: 'bottom' | 'left' = 'bottom';
+  get direction() { return this._direction; }
+  @Input() set direction(val) {
+    if (val !== 'bottom' && val !== 'left') {
+      val = 'bottom';
+    }
+    this._direction = val;
+    switch (val) {
+      case 'left':
+        this.directionLeft = true;
+        this.directionBottom = false;
+        break;
+      default:
+        this.directionBottom = true;
+        this.directionLeft = false;
+        break;
+    }
+  }
+
+
+  onClick() {
+    this.open = !this.open;
+    this.openChange.emit(this.open);
+  }
+}

package/src/lib/wm-panel-bar/wm-panel-bar.html

@@ -0,0 +1,37 @@
+<div *ngIf="directionBottom" class="wm-panel-bar drb flex-col"
+    [ngStyle]="{'max-width': maxWidth, 'max-height': maxHeight}">
+    <div class="pb-header align-center flex-row">
+        <div class={{labelClasses}} *ngIf="label">{{label}}</div>
+        <ng-content select="[headerLabel]"></ng-content>
+        <div class="pb-header-content flex-row">
+            <ng-content select="[headerContent]"></ng-content>
+            <div class="ex-button" (click)="onClick()">
+                <span>{{ (open ? collapseText : expandText)}}</span>
+                <wm-template-image class="bar-arrow" [ngClass]="{'bar-open-bottom': open}" icon="arrow-down">
+                </wm-template-image>
+            </div>
+        </div>
+    </div>
+    <div class="flex-row pb-content pb-vertical" [ngStyle]="{'height': !open ? '0px': ''}"
+        [ngClass]="{'pb-vertical-visible': open}">
+        <ng-container *ngTemplateOutlet="body"></ng-container>
+    </div>
+</div>
+
+<div *ngIf="!directionBottom" class="wm-panel-bar flex-col drl" [ngClass]="{'pb-drl-open': open}"
+    [ngStyle]="{'max-width': maxWidth, 'max-height': maxHeight}">
+    <div class="ex-panel flex-row ex-panel-drl" (click)="onClick()">
+        <wm-template-image class="bar-arrow arrow-left" [ngClass]="{'bar-open-left': open}" icon="arrow-left">
+        </wm-template-image>
+        <div class="preview-label" *ngIf="!open">{{label}}</div>
+        <div class="preview-label" *ngIf="open">{{openedLabel || label}}</div>
+
+    </div>
+    <div class="flex-col pb-content pb-horizontal-visible" *ngIf="open">
+        <ng-container *ngTemplateOutlet="body"></ng-container>
+    </div>
+</div>
+
+<ng-template #body>
+    <ng-content></ng-content>
+</ng-template>

package/src/lib/wm-panel-bar/wm-panel-bar.scss

@@ -0,0 +1,114 @@
+@import './../../assets/theme/wmGlobals.scss';
+
+.wm-panel-bar {
+    border-radius: 4px;
+    background: var(--pageBackgroundColor);
+    flex-shrink: 0;
+    overflow: hidden;
+    direction: ltr;
+}
+
+
+
+.ex-button {
+    display: inline-flex;
+    color: var(--mediumFontColor);
+    letter-spacing: 0;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    @include flexJA(flex-end, center);
+    width: 86px;
+    margin-left: 8px;
+}
+
+.pb-header {
+    width: 100%;
+    flex-shrink: 0;
+    min-height: 48px;
+    font-size: $fontSize;
+    box-sizing: border-box;
+    padding: 4px 16px;
+}
+
+.pb-label {
+    font-weight: bold;
+    color: var(--strongFontColor);
+    letter-spacing: 1.2px;
+    line-height: 16px;
+    margin-right: 12px;
+    flex-shrink: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.brand-label {
+    @extend .pb-label;
+    color: var(--brandColor);
+}
+
+.pb-header-content {
+    align-items: center;
+    margin-left: auto;
+}
+
+.bar-open-left,
+.bar-open-right {
+    transform: rotate3d(0, 1, 0, -180deg);
+}
+
+.drb {
+    box-shadow: 0 0 1px 0 rgba(10, 22, 70, 0.06), 0 1px 1px 0 rgba(10, 22, 70, 0.10);
+}
+
+.drr {
+    flex-direction: row-reverse;
+}
+
+.pb-drl-open {
+    width: 100%;
+}
+
+.pb-vertical {
+    height: 0;
+}
+
+.pb-content {
+    direction: ltr;
+    visibility: hidden;
+    overflow: auto;
+}
+
+.pb-vertical-visible {
+    visibility: visible;
+    height: 100%;
+    max-height: calc(100% - 48px);
+}
+
+.pb-horizontal-visible {
+    visibility: visible;
+    width: 100%;
+}
+
+.ex-panel {
+    height: 40px;
+    width: auto;;
+    min-width: 1px;
+    max-width: 100%;
+    flex-shrink: 0;
+    cursor: pointer;
+    background: transparent;
+    border-radius: 4px;
+    box-shadow: 1px 1px 2px 2px rgba(10, 22, 70, 0.06);
+    justify-content: flex-start;
+}
+
+.arrow-left {
+    margin: auto 0px;
+}
+
+.preview-label {
+    align-items: center;
+    margin: auto 4px;
+}

package/src/lib/wm-scalable-div/scalable-div.component.ts

@@ -0,0 +1,106 @@
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, ViewChild, OnDestroy, NgZone, ChangeDetectorRef } from '@angular/core';
+import { interval, Subscription } from 'rxjs';
+
+@Component({
+    selector: 'wm-scalable-div',
+    styleUrls: ['./scalable-div.scss'],
+    templateUrl: './scalable-div.html'
+})
+export class ScalableDivComponent implements AfterViewInit, OnDestroy {
+
+    @Input() divClass: string;
+    @ViewChild('divEl', { static: true }) divEl: ElementRef;
+    isCalculated: boolean = false;
+    firstObservable: Subscription;
+
+    private _text: string | number;
+    public get text(): string | number { return this._text; }
+    @Input() public set text(value: string | number) {
+        this._text = value;
+        this.recalculateWidth();
+    }
+
+    constructor(private _zone: NgZone, private _change: ChangeDetectorRef) {
+
+    }
+
+    public ngAfterViewInit() {
+        this._zone.runOutsideAngular(() => {
+            this.firstObservable = interval(500).subscribe(it => {
+                if (this.isCalculated) {
+                    this.firstObservable.unsubscribe();
+                    return;
+                }
+                this.recalculateWidth();
+                this._change.detectChanges();
+            });
+        });
+    }
+
+    ngOnDestroy(): void {
+        if (!this.firstObservable) return;
+        this.firstObservable.unsubscribe();
+        this.firstObservable = undefined;
+    }
+
+    private getNumberFromFontSize(fontSize: string): number {
+        const numberSize = Number(fontSize.substr(0, fontSize.length - 2));
+        return numberSize;
+    }
+
+    private getFontSizeDim(fontSize: string): string {
+        let num: number;
+        let dimLength: number = 0;
+        while (!num) {
+            dimLength = dimLength + 1;
+            num = Number(fontSize.substr(0, fontSize.length - dimLength));
+        }
+        return fontSize.substr(fontSize.length - dimLength, dimLength);
+    }
+
+    private divWidth(text: string, font: string, padding: string) {
+        const f = font || '12px arial';
+        const o = document.createElement('div');
+        o.innerHTML = text;
+        o.style.position = 'absolute';
+        o.style.visibility = 'hidden';
+        o.style['text-align'] = 'center';
+        o.style.font = f;
+        o.style.padding = padding;
+        document.body.appendChild(o);
+        const w = o.clientWidth;
+        document.body.removeChild(o);
+        return w;
+    }
+
+    public recalculateWidth() {
+        if (!this.divEl) return;
+        const divTag = this.divEl.nativeElement;
+        if ((<any>divTag).clientWidth === 0) return;
+        this.isCalculated = true;
+        this.doRecalculateWidth(divTag);
+    }
+
+    private doRecalculateWidth(divTag: HTMLElement) {
+        divTag.style.fontSize = '';
+        const style = window.getComputedStyle(divTag);
+        const availableWidth = divTag.offsetParent.clientWidth;
+        const sizeDim = this.getFontSizeDim(style.fontSize);
+        const text = divTag.textContent;
+        let font = style.font;
+        let textWidth = this.divWidth(text, font, style.padding);
+        const needChange: boolean = availableWidth < textWidth;
+        let numberSize = this.getNumberFromFontSize(style.fontSize);
+        let stringSize = numberSize.toString() + sizeDim;
+        while (textWidth - availableWidth > 1) {
+            numberSize = numberSize - 1;
+            const oldString = stringSize;
+            stringSize = numberSize.toString() + sizeDim;
+            font = font.replace(oldString, stringSize);
+            textWidth = this.divWidth(text, font, style.padding);
+        }
+        if (needChange) divTag.style.fontSize = stringSize;
+    }
+
+
+}

package/src/lib/wm-scalable-div/scalable-div.html

@@ -0,0 +1 @@
+<div #divEl [ngClass]="divClass">{{text}}<div>

package/src/lib/wm-scalable-div/scalable-div.scss

@@ -0,0 +1,11 @@
+@import './../../assets/theme/wmGlobals.scss';
+
+:host {
+    font-size: $fontSize * 3;
+    color: var(--strongFontColor);
+    font-family: $fontFamily;
+    font-weight: bold;
+    padding: 0px 8px;
+    text-align: center;
+    margin: auto;
+}

package/src/lib/wm-spinner/wm-spinner.component.ts

@@ -0,0 +1,129 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { Subscription, timer } from 'rxjs';
+import { Guid } from '../../models/guidExtension';
+import { InfoType } from '../wm-info/info-models';
+
+@Component({
+  selector: 'wm-spinner',
+  styleUrls: ['./wm-spinner.scss'],
+  templateUrl: './wm-spinner.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SpinnerComponent implements OnInit, OnDestroy {
+
+  private uid = Guid.newGuid();
+
+  private _longMessageTimeSubscription: Subscription;
+  private _showOverlayTimerSubscription: Subscription;
+  private _startDate;
+  private _initialized = false;
+  public isOverlayVisible = false;
+  public isOverlayContrast = false;
+  public minTimeOfVisibilityMs = 500;
+  public showDelay = 250;
+
+  @Input() public delay = false;
+  @Input() public longMessageDelay = 12500;
+  @Input() public message: string = 'Waiting for data from server';
+  @Input() public messageTakesLong = 'Request is taking a bit longer than expected';
+  @Input() public messageBottomWait: string = 'Please Wait';
+  @Input() public detailInfoMessage: string;
+  @Input() public infoType: InfoType = InfoType.Error;
+
+  private _showSpinner: boolean;
+  public get showSpinner() { return this._showSpinner; }
+  @Input() public set showSpinner(value: boolean) {
+    // tslint:disable-next-line:triple-equals we should treat bool false and bool undefined as same. The same for all other cases.
+    if (this._showSpinner == value) return;
+    this._showSpinner = value;
+    this.unsubscribeTimers();
+
+    if (value) {
+      console.log('spinner started', this.uid);
+      // block UI, keep it light
+      this.isOverlayVisible = true;
+      this.subscribeTimers();
+      this.detectChanges();
+    } else {
+      this.stopShowingProgress();
+    }
+  }
+
+  constructor(private zone: NgZone, private change: ChangeDetectorRef) {
+  }
+
+  ngOnInit(): void {
+    this._initialized = true;
+  }
+
+  ngOnDestroy(): void {
+    console.log('destroy');
+    this.unsubscribeTimers();
+  }
+
+  private subscribeTimers() {
+    this.zone.runOutsideAngular(() => {
+      // show long wait message after few configured seconds
+      const longMessageTimer = timer(this.longMessageDelay);
+      this._longMessageTimeSubscription = longMessageTimer.subscribe(t => {
+        this.message = this.messageTakesLong;
+        this.change.detectChanges();
+        this._longMessageTimeSubscription.unsubscribe();
+      });
+
+      // draw overlay message after few configured seconds
+      if (!this.delay) {
+        this.startShowingProgress();
+        return;
+      }
+      const showAfterDelayTimer = timer(this.showDelay);
+      this._showOverlayTimerSubscription = showAfterDelayTimer.subscribe(t => {
+        if (this.showSpinner) this.startShowingProgress();
+        this.change.detectChanges();
+        this._showOverlayTimerSubscription.unsubscribe();
+      });
+    });
+  }
+
+  private unsubscribeTimers() {
+    if (this._longMessageTimeSubscription) this._longMessageTimeSubscription.unsubscribe();
+    if (this._showOverlayTimerSubscription) this._showOverlayTimerSubscription.unsubscribe();
+  }
+
+  private stopShowingProgress() {
+    if (this._startDate) {
+      const now = new Date().getTime();
+      const duration = (now - this._startDate.getTime()); // ms
+      if (duration < this.minTimeOfVisibilityMs) {
+        this.zone.runOutsideAngular(() => {
+          // let it be at least one second.
+          console.log('remains', this.minTimeOfVisibilityMs - duration);
+          setTimeout(() => this.doStopProgress(), this.minTimeOfVisibilityMs - duration);
+        });
+        return;
+      }
+    }
+    this.doStopProgress();
+  }
+
+  private startShowingProgress() {
+    console.log('contrast spinner', this.uid);
+    this._startDate = new Date();
+    this.isOverlayContrast = true;
+    this.detectChanges();
+  }
+
+  private doStopProgress() {
+    console.log('spinner ended', this.uid);
+    this.isOverlayContrast = false;
+    this.isOverlayVisible = false;
+    this._startDate = undefined;
+    this.detectChanges();
+  }
+
+  private detectChanges() {
+    if (!this._initialized) return;
+    this.change.detectChanges();
+  }
+
+}

package/src/lib/wm-spinner/wm-spinner.html

@@ -0,0 +1,37 @@
+<div class="spinner-wrap flex-col wh-100" *ngIf="isOverlayVisible">
+    <div class="spinner-bg wh-100" [ngClass]="{'invisible': !isOverlayContrast }"></div>
+    <div class="spinner-content inline-col marginXA align-center" [ngClass]="{'invisible': !isOverlayContrast }">
+        <div class="msg-wrap marginBottomX8">
+            <div style="display: flex">
+                    <div class="msg">{{message}}</div>
+                    <wm-info class="info" [type]="infoType" popupPosition="top-center" 
+                    [iconAsTemplate]="infoType===2" [useThemeForIconTemplate]="infoType===2"
+                    *ngIf="detailInfoMessage" [header]="detailInfoMessage" style="margin-left: 4px"></wm-info>
+            </div>
+            
+            <div class="msg">{{messageBottomWait}}</div>
+        </div>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 168 168" id="loader">
+            <defs>
+                <linearGradient id="a" x1="38.078%" x2="4.941%" y1="8.411%" y2="16.987%">
+                    <stop offset="0%" stop-color="var(--brandColor)" stop-opacity="0.1" />
+                    <stop offset="61.554%" stop-color="var(--brandColor)" stop-opacity="0.4" />
+                    <stop offset="100%" stop-color="var(--brandColor)" stop-opacity="0.5" />
+                </linearGradient>
+                <radialGradient id="b" cy="43.835%" r="54.9%" fx="50%" fy="43.835%"
+                    gradientTransform="matrix(-.77913 .62687 -.6485 -.80602 1.174 .478)">
+                    <stop offset="0%" stop-color="#FFF" />
+                    <stop offset="100%" stop-color="var(--brandColor)" stop-opacity="0.5" />
+                </radialGradient>
+            </defs>
+            <g fill="none" fill-rule="evenodd">
+                <g transform="translate(10 10)">
+                    <path stroke="url(#a)" stroke-linecap="round" stroke-width="19"
+                        d="M16.198 27.79C6.062 40.453 0 56.518 0 74c0 40.87 33.13 74 74 74s74-33.13 74-74c0-24.611-12.014-46.416-30.498-59.87C105.292 5.244 90.258 0 74 0" />
+                    <circle cx="16.5" cy="27.5" r="9.5" fill="url(#b)" />
+                </g>
+            </g>
+        </svg>
+    </div>
+
+</div>