btv-base-controls 0.1.21 → 0.1.23

package/src/lib/btv-icon-button/btv-icon-button.scss

@@ -0,0 +1,125 @@
+@import './../../assets/theme/wmGlobals.scss';
+
+:host {
+    display: block;
+    background: var(--pageBackgroundColor);
+    border: 1px solid;
+    border-radius: 4px;
+    border-color: var(--secondaryHover);
+    cursor: pointer;
+    box-sizing: border-box;
+    width: 36px;
+    height: 36px;
+    flex-shrink: 0;
+
+    &:focus,
+    &:hover {
+
+        .icon {
+            outline: none;
+            background: var(--secondaryHover);
+        }
+    }
+}
+
+:host(.u-no-border) {
+    border-width: 0px;
+}
+
+:host(.small) {
+    width: 16px; 
+    height: 16px;
+}
+
+:host(.medium) {
+    width: 30px;
+    height: 30px;
+}
+
+:host(.disabled) {
+    background-color: var(--disabledColor);
+    border-color: var(--disabledColor);
+    color: var(--lightFontColor);
+    cursor: default;
+
+    &:hover {
+        background-color: var(--disabledColor);
+        border-color: var(--disabledColor);
+    }
+
+    .icon {
+        cursor: default;
+    }
+}
+
+:host(.danger) {
+    background-color: var(--dangerColor);
+    border-color: var(--warningColor);
+}
+
+.tooltip-text {
+    align-self: center;
+}
+
+.tooltip-disabled {
+    font-size: $fontSize -2;
+    counter-reset: var(--lightFontColor);
+}
+
+.icon {
+    @include flexJA(center, center);
+    width: 100%; 
+    height: 100%;
+    border: 0px;
+    cursor: pointer;
+
+    color: var(--strongFontColor);
+    outline: 0px;
+    padding: 0px;
+    background: transparent;
+    border-radius: inherit;
+}
+
+.wm-counter-button {
+    position: relative;
+}
+
+.wm-counter {
+    display: inline-block;
+    width: 16px; 
+    height: 16px;
+    line-height: 16px;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    border: none;
+    background-color: var(--dangerColor);
+    border-radius: 50%;
+    font-size: $fontSize - 4;
+    font-weight: bold;
+    text-align: center;
+    color: var(--strongFontColor);
+    text-indent: -1px;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.u-btn-validate {
+    border-color: var(--dangerColor);
+    background-color: var(--dangerColor);
+    color: var(--onBrandTextColor);
+
+    &:hover {
+        background-color: var(--dangerColor);
+    }
+}
+
+.u-btn-primary {
+    border-color: var(--brandColor);
+    background-color: var(--brandColor);
+    color: var(--onBrandTextColor);
+
+    &:hover {
+        background-color: var(--onBrandHoverColor);
+    }
+}

package/src/lib/btv-icon-button/index.ts

@@ -0,0 +1 @@
+export * from './btv-icon-button.component';

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/src/lib/btv-search/index.ts

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