btv-base-controls 0.1.29 → 0.1.30

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

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

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

@@ -1,97 +0,0 @@
-@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/src/lib/busy-indicator/busy-indicator.component.ts

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

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

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

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

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

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

@@ -1,111 +0,0 @@
-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();
-        }
-    }
-}