btv-base-controls 0.1.27 → 0.1.29

package/src/lib/btv-progress/btv-progress.component.ts

@@ -0,0 +1,65 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'btv-progress',
+  styleUrls: ['./btv-progress.scss'],
+  templateUrl: './btv-progress.html'
+})
+export class BtvProgressComponent {
+
+  relativeValue: number = 0;
+
+  private _val: number = 0;
+
+  @Input() height: number = 8;
+  get val() {
+    return this._val;
+  }
+
+  @Input() set val(val: number) {
+    this._val = val;
+    this.relativeValue = this.calcRelativeValue(val, this.max);
+  }
+
+  private _max: number = 0;
+  get max() {
+    return this._max;
+  }
+
+  @Input() set max(m: number) {
+    this._max = m;
+    this.relativeValue = this.calcRelativeValue(this._val, m);
+  }
+
+
+  @Input() color: string = '#ffffff';
+
+  public _backColor: string = '#4e5a6b';
+
+  @Input() set backColor(value: string) {
+    if (value) {
+      this._backColor = value;
+    } else {
+      this._backColor = '#4e5a6b';
+    }
+  }
+
+  get backColor() {
+    return this._backColor;
+  }
+
+  @Input() showFlag: boolean = false;
+
+  getFlagPosition(): string {
+    const max = this.max;
+    const val = this.val;
+    if (!max) return '0';
+    const percent = val / max * 100;
+    return percent + '%';
+  }
+
+  calcRelativeValue(value, max) {
+    if (!max) return 100;
+    return (value / max) * 100;
+  }
+}

package/src/lib/btv-progress/btv-progress.html

@@ -0,0 +1,11 @@
+<div class="progress-wrap" [ngStyle]="{'height': height + 'px'}">
+    <div class="progress" [ngStyle]="{'background-color': backColor}">
+        <div class="progress-fill" [ngStyle]="{'width': relativeValue + '%', 'background-color': color}"></div>
+        <!--workaround for css image resolve plugin-->
+        <div *ngIf="showFlag" class="flag" [ngStyle]="{
+            'margin-left': getFlagPosition(),
+            'background-image': 'url(./assets/img/flag.png)' 
+            }">
+        </div>
+    </div>
+</div>

package/src/lib/btv-progress/btv-progress.scss

@@ -0,0 +1,24 @@
+@import './../../assets/theme/wmGlobals.scss';
+.progress-wrap {
+    display: block;
+    width: 100%;
+    height: 8px;
+}
+.progress {
+    width: 100%; 
+    height: 100%;
+    position: relative;
+}
+.progress-fill {
+    position: absolute;
+    height: 100%;
+}
+.flag {
+    position: absolute;
+    height: 14px;
+    width: 8px;
+    margin-top: -4px;
+    position: absolute;
+    background-repeat: no-repeat;
+    transform: scale(1, 0.7);
+}

package/src/lib/btv-search/btv-search.component.ts

@@ -0,0 +1,78 @@
+import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { fromEvent, Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
+
+export class ViewState {
+  get isLaptop() { return window.innerWidth <= 1440; }
+  get isMobile() { return window.innerWidth <= 1024; }
+  get isPhone() { return window.innerWidth <= 767; }
+  public isWidthLessOrEqualTo(width: number) { return window.innerWidth <= width; }
+}
+
+@Component({
+  selector: 'btv-search',
+  styleUrls: ['./btv-search.scss'],
+  templateUrl: './btv-search.html'
+})
+
+export class BtvSearch implements OnInit, OnDestroy {
+  @Input() widthAuto: boolean = false;
+  @Input() isSmall: boolean = false;
+  @Input() searchRight: string;
+  @Input() placeholder: string = 'Search';
+  @Input() keepExpanded: boolean = false;
+  searchFocus: boolean = false;
+  view: ViewState = new ViewState();
+  @ViewChild('searchBox', { static: true }) box: ElementRef;
+  @Output() searchTextChange: EventEmitter<string> = new EventEmitter<string>();
+  public expanded: boolean;
+  private _searchSubscription: Subscription;
+
+  private _searchText: string;
+
+  @Input() set searchText(value: string) {
+    if (value === this._searchText) return;
+    this._searchText = value;
+    if (value) {
+      this.expanded = true;
+    }
+  }
+
+  get searchText(): string {
+    return this._searchText || '';
+  }
+
+  constructor() {
+    this.expanded = false;
+  }
+
+  ngOnInit() {
+    let box = this.box.nativeElement;
+    let observable = fromEvent(box, 'keyup').pipe(
+      debounceTime(400),
+      distinctUntilChanged(),
+      map(x => <string>(<any>x).target.value)
+    );
+    this._searchSubscription = observable.subscribe(it => {
+      this.searchTextChange.emit(it);
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (this._searchSubscription) this._searchSubscription.unsubscribe();
+  }
+  toggleSearch() {
+    this.expanded = !this.expanded;
+    if (this.box && this.expanded) {
+      this.box.nativeElement.focus();
+    }
+  }
+
+  onFocusOut() {
+    if (!this.box.nativeElement.value && this.expanded && !this.keepExpanded) {
+      this.expanded = false;
+    }
+    this.searchFocus = false;
+  }
+
+}

package/src/lib/btv-search/btv-search.html

@@ -0,0 +1,15 @@
+<div class="wm-search flex-row" [ngClass]="{'search-reverse': searchRight == 'right', 'always-opened': keepExpanded, 'small': isSmall}">
+	<div class="search-icon inline-col" [ngClass]="{'search-toggle-disabled': keepExpanded || !searchFocus}"
+		(click)="toggleSearch()">
+		<wm-template-image class="marginXA" icon="search" [light]="(!expanded && !searchFocus) || keepExpanded">
+		</wm-template-image>
+	</div>
+	<div class="search-wrap flex-col"
+		[ngClass]="{'search-open': keepExpanded || expanded, 'search-focused': (expanded && searchFocus) || (keepExpanded && searchFocus),
+	'width-auto': widthAuto}">
+		<input class="search-field" #searchBox 
+			[value]="searchText" 
+			[placeholder]="placeholder"
+			(focus)="searchFocus = true" (focusout)="onFocusOut()">
+	</div>
+</div>

package/src/lib/btv-search/btv-search.scss

@@ -0,0 +1,97 @@
+@import './../../assets/theme/wmGlobals.scss';
+
+.wm-search,
+.search-wrap,
+.search-field {
+    box-sizing: border-box;
+}
+
+.wm-search {
+    &:hover {
+        border-color: var(--brandColor);
+    }
+}
+
+.wm-search {
+    background: var(--pageBackgroundColor);
+    height: 36px;
+    max-width: 280px;
+    border-radius: 4px;
+    align-items: center;
+    flex: 1 0 100%;
+    flex-shrink: 0;
+    border: 1px solid var(--secondaryHover);
+
+    &.small {
+        max-width: 140px;
+        .search-open {
+            width:auto;
+        }
+    }
+}
+
+.search-icon {
+    width: 36px;
+    height: 100%;
+    flex-shrink: 0;
+    cursor: pointer;
+
+    &.search-toggle-disabled {
+        cursor: text;
+    }
+}
+
+.search-wrap {
+    width: 0px;
+    height: 100%;
+    color: var(--mediumFontColor);
+    direction: ltr;
+}
+
+.search-open {
+    width: 280px;
+    max-width: 100%;
+    flex-grow: 1;
+    flex-shrink: 1;
+    &.width-auto {
+        width: auto;
+    }
+}
+
+.search-open:hover,
+.search-focused {
+    color: var(--strongFontColor);
+}
+
+
+.search-field {
+    width: 100%;
+    height: 100%;
+    color: inherit;
+    text-indent: 0.1em;
+    font-size: $fontSize + 2;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    padding: 0px 8px 0 0;
+
+    &::placeholder {
+        color: var(--disabledTextColor);
+    }
+
+}
+
+.search-reverse {
+    display: flex;
+    flex-direction: row-reverse;
+
+    .search-wrap {
+        direction: rtl;
+    }
+
+    .search-field {
+        direction: ltr;
+        padding: 0px 8px;
+    }
+}

package/{lib/btv-search/index.d.ts → src/lib/btv-search/index.ts}

@@ -1 +1 @@
-export * from './btv-search.component';
+export * from './btv-search.component';

package/src/lib/busy-indicator/busy-indicator.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'wm-busy-indicator',
+  styleUrls: ['./busy-indicator.scss'],
+  templateUrl: './busy-indicator.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BusyIndicatorComponent {
+
+  @Input() public busy: boolean;
+  @Input() public long: boolean;
+}

package/src/lib/busy-indicator/busy-indicator.html

@@ -0,0 +1,6 @@
+<div class="load-snake-wrap" *ngIf="busy" [ngClass]="{'long-snake-wrap': long}">
+    <span class="snake-field" ></span>
+    <span class="snake" [ngClass]="{'longSnake': long}">
+        <span class="snake-shadow" [ngClass]="{'longRotate': long}"></span>
+    </span>
+</div>

package/src/lib/busy-indicator/busy-indicator.scss

@@ -0,0 +1,86 @@
+@import './../../assets/theme/wmGlobals.scss';
+.load-snake-wrap {
+    width: 120px;
+    height: 12px;
+    overflow: hidden;
+    align-self: flex-end;
+}
+
+.snake-field {
+    display: block;
+    width: 100%;
+    height: 2px;
+    background: #22252C;
+    top: 5px;
+    position: relative;
+}
+
+.snake {
+    display: inline-block;
+    width: 80px;
+    height: 2px;
+    background: #7F868C;
+    animation-play-state: running;
+    position: relative;
+    top: -9px;
+    animation: snakeMove 2s linear 0s infinite;
+}
+
+.snake-shadow {
+    display: inline-block;
+    width: 40px; 
+    height: 8px;
+    position: absolute;
+    margin-top: -3px;
+    animation: rotate 2s linear 0s infinite;
+    animation-play-state: running;
+    border-radius: 25%;
+}
+
+.long-snake-wrap {
+    width: 400px;
+}
+
+.longSnake {
+    animation: snakeLongMove 3s linear 0s infinite;
+}
+
+.longRotate {
+    animation: rotate 3s linear 0s infinite;
+}
+
+@keyframes snakeMove {
+    0% {
+        left: -80px;
+    }
+    50% {
+        left: 200px;
+    }
+    100% {
+        left: -200px;
+    }
+}
+
+@keyframes snakeLongMove {
+    0% {
+        left: -80px;
+    }
+    50% {
+        left: 440px;
+    }
+    100% {
+        left: -200px;
+    }
+}
+
+@keyframes rotate {
+    0% {
+        background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(152, 141, 103, 0.4) 100%);
+        right: 0px;
+    }
+    100% {
+        background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(152, 141, 103, 0.4) 100%);
+        left: 0px;
+        right: unset;
+    }
+}

package/src/lib/custom-tool-tip/custom-tool-tip.component.html

@@ -0,0 +1,9 @@
+<div class="tooltip-container">
+    <div class="mat-tooltip">
+      <ng-template #simpleText >
+        {{text}}
+      </ng-template>
+      <ng-container *ngTemplateOutlet="contentTemplate || simpleText">
+      </ng-container>
+    </div>
+  </div>

package/src/lib/custom-tool-tip/custom-tool-tip.component.scss

@@ -0,0 +1,47 @@
+@import './../../assets/theme/wmGlobals.scss';
+
+.tooltip-container {
+    position: relative;
+    box-sizing: border-box;
+    box-shadow: 0px 16px 16px -1px rgb(5 29 57 / 10%);
+    border-radius: 4px;
+    -webkit-appearance: none;
+
+    &:before {
+        content: '';
+        display: block;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 6px;
+        border-color: transparent;
+        left: 50%;
+        bottom: -12px;
+        margin-left: -6.0625px;
+        border-top-color: var(--pageBackgroundColor);
+        position: absolute;
+    }
+}
+
+.mat-tooltip {
+    font-family: $fontFamily;
+    margin: 0;
+    transform-origin: center top;
+    box-shadow: none;
+    background: var(--pageBackgroundColor);
+    color: var(--strongFontColor);
+    border-radius: 2px;
+    z-index: 1001;
+    border-style: solid;
+    border-width: 0;
+    padding: 5px 5px 5px 6px;
+    background-repeat: repeat-x;
+    min-width: 20px;
+    text-align: center;
+    font-size: 14px;
+    transform: scale(1)!important;
+    
+    &.mat-tooltip-show {
+       animation:none
+    }
+}

package/src/lib/custom-tool-tip/custom-tool-tip.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit, Input, TemplateRef } from '@angular/core';
+
+/**
+ * This component will be used to show custom tooltip
+ * 
+ * This component will be rendered using OverlayModule of angular material
+ * This component will be rendered by directive on an Overlay
+ * 
+ * CONSUMER will not be using this component directly
+ * This component will be hosted in an overlay by ToolTipRenderer directive
+ * This component exposes two properties. These two properties will be filled by ToolTipRenderer directive
+ * 1. text - This is a simple string which is to be shown in the tooltip; This will be injected in the ToolTipRenderer directive
+ *    by the consumer
+ * 2. contentTemplate - This gives finer control on the content to be shown in the tooltip
+ * 
+ * NOTE - ONLY one should be specified; If BOTH are specified then "template" will be rendered and "text" will be ignored
+ */
+@Component({
+  selector: 'app-custom-tool-tip',
+  templateUrl: './custom-tool-tip.component.html',
+  styleUrls: ['./custom-tool-tip.component.scss']
+})
+export class CustomToolTipComponent implements OnInit {
+
+  /**
+   * This is simple text which is to be shown in the tooltip
+   */
+  @Input() text: string;
+
+  /**
+   * This provides finer control on the content to be visible on the tooltip
+   * This template will be injected in McToolTipRenderer directive in the consumer template
+   * <ng-template #template>
+   *  content.....
+   * </ng-template>
+   */
+  @Input() contentTemplate: TemplateRef<any>;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

package/src/lib/custom-tool-tip/tool-tip-renderer.directive.ts

@@ -0,0 +1,111 @@
+import { Directive, Input, TemplateRef, ElementRef, OnInit, HostListener, ComponentRef } from '@angular/core';
+import { ConnectionPositionPair, Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { CustomToolTipComponent } from './custom-tool-tip.component';
+import { ComponentPortal } from '@angular/cdk/portal';
+
+@Directive({
+    selector: '[customToolTip]'
+})
+
+export class ToolTipRendererDirective implements OnInit {
+    /**
+    * This will be used to show tooltip or not
+    * This can be used to show the tooltip conditionally
+    */
+    @Input() showToolTip: boolean = true;
+
+    //If this is specified then specified text will be shown in the tooltip
+    @Input(`customToolTip`) text: string;
+
+    //If this is specified then specified template will be rendered in the tooltip
+    @Input() contentTemplate: TemplateRef<any>;
+    private _overlayRef: OverlayRef;
+    @Input() customAnchor?: any;
+    @Input() useCustom?: boolean = false;
+
+    constructor(private _overlay: Overlay,
+        private _elementRef: ElementRef) { }
+
+    /**
+     * Init life cycle event handler
+     */
+    ngOnInit() { }
+
+    get refElement() {
+        if (this.useCustom || this.customAnchor) return this.customAnchor;
+        return this._elementRef;
+    }
+    /**
+     * This method will be called whenever mouse enters in the Host element
+     * i.e. where this directive is applied
+     * This method will show the tooltip by instantiating the McToolTipComponent and attaching to the overlay
+     */
+    @HostListener('mousemove', ['$event'])
+    show() {
+        if (this.refElement) this.closeToolTip();
+        if (!this.showToolTip || (this.useCustom && !this.customAnchor)) {
+            return;
+        }
+
+        const positionPairs: ConnectionPositionPair[] = [
+            new ConnectionPositionPair(
+                { originX: 'center', originY: 'top' },
+                { overlayX: 'center', overlayY: 'bottom' }, 0, 0,
+                'mat-tooltip-panel-above'),
+            new ConnectionPositionPair(
+                { originX: 'center', originY: 'bottom' },
+                { overlayX: 'center', overlayY: 'top' }, 0, 0,
+                'mat-tooltip-panel-below')
+
+        ];
+        const positionStrategy = this._overlay.position()
+            .flexibleConnectedTo(this.refElement)
+            .withPositions(positionPairs)
+            .withFlexibleDimensions(true)
+            .withPush(true);
+
+        this._overlayRef = this._overlay.create({
+            panelClass: 'mat-tooltip-panel',
+            scrollStrategy: this._overlay.scrollStrategies.close(),
+            positionStrategy
+        });
+        // attach the component if it has not already attached to the overlay
+        if (this._overlayRef && !this._overlayRef.hasAttached()) {
+            const content = new ComponentPortal(CustomToolTipComponent);
+            // todo check this
+            const tooltipRef: ComponentRef<CustomToolTipComponent> = this._overlayRef.attach(content) as any;
+            tooltipRef.instance.text = this.text;
+            tooltipRef.instance.contentTemplate = this.contentTemplate;
+        }
+    }
+
+    /**
+     * This method will be called when mouse goes out of the host element
+     * i.e. where this directive is applied
+     * This method will close the tooltip by detaching the overlay from the view
+     */
+    @HostListener('mouseleave')
+    hide() {
+        this.closeToolTip();
+    }
+
+    /**
+     * Destroy lifecycle event handler
+     * This method will make sure to close the tooltip
+     * It will be needed in case when app is navigating to different page
+     * and user is still seeing the tooltip; In that case we do not want to hang around the
+     * tooltip after the page [on which tooltip visible] is destroyed
+     */
+    ngOnDestroy() {
+        this.closeToolTip();
+    }
+
+    /**
+     * This method will close the tooltip by detaching the component from the overlay
+     */
+    private closeToolTip() {
+        if (this._overlayRef) {
+            this._overlayRef.detach();
+        }
+    }
+}