btv-base-controls 0.1.23 → 0.1.25

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

@@ -1,13 +0,0 @@
-<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

@@ -1,56 +0,0 @@
-@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

@@ -1,17 +0,0 @@
-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

@@ -1,13 +0,0 @@
-<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

@@ -1,60 +0,0 @@
-@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

@@ -1,59 +0,0 @@
-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

@@ -1,37 +0,0 @@
-<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

@@ -1,114 +0,0 @@
-@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

@@ -1,106 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-@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

@@ -1,129 +0,0 @@
-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

@@ -1,37 +0,0 @@
-<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>