btv-base-controls 0.1.27 → 0.1.29

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

@@ -0,0 +1,179 @@
+import { DomSanitizer } from "@angular/platform-browser";
+
+import {
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  SecurityContext
+} from '@angular/core';
+
+type Style = Partial<CSSStyleDeclaration>;
+
+/**
+ * list of default colors
+ */
+export const defaultColors = [
+  '#1abc9c',
+  '#3498db',
+  '#f1c40f',
+  '#8e44ad',
+  '#e74c3c',
+  '#d35400',
+  '#2c3e50',
+  '#7f8c8d'
+];
+
+
+@Component({
+  selector: 'wm-avatar',
+  styleUrls: ['./avatar.scss'],
+  templateUrl: './avatar.html'
+})
+export class AvatarComponent implements OnChanges {
+
+  private _name: string | null;
+  public avatarText: string | null = null;
+  public get name() { return this._name; }
+  @Input() public set name(value: string | null) {
+    this._name = value;
+    this.avatarText = this.formTextAvatar(value);
+  };
+  @Input() public size: string | number = 50;;
+
+  public avatarSrc: string | null = null;
+  private _src: string | null;
+  public get src() { return this._src };
+  @Input() public set src(value: string | null) {
+    this._src = value;
+    this.avatarSrc = this.transformSrc(value);
+  }
+  @Input() public value: string | null;
+  @Input() public round: boolean = true;
+  @Input() public cornerRadius: string | number = 0;
+  @Input() public textSizeRatio = 3;
+  @Input() public bgColor: string | undefined;
+  @Input() public fgColor = '#FFF';
+  @Input() public borderColor: string | undefined;
+  @Input() public style: Style = {};
+
+  public avatarColors: string[] = defaultColors;
+
+  constructor(private sanitizer: DomSanitizer) { }
+
+  public transformSrc(stringInBase64: string): string {
+    if (!stringInBase64) return null;
+    return this.sanitizer.sanitize(SecurityContext.RESOURCE_URL, this.sanitizer.bypassSecurityTrustResourceUrl(stringInBase64));
+
+  }
+
+  public formTextAvatar(val: string) {
+    if (!val) return '?';
+
+    const name = val.trim();
+    const splitted = name.split(' ');
+
+    if (splitted.length === 1) {
+      if (name.length === 1) {
+        return name[0];
+      }
+      return name[0] + name[1];
+    }
+    
+    const length = Math.min(splitted.length, 3);
+
+    splitted.length = length; // leave first 3 words top
+    return splitted.map(it => it[0]).join('');
+  }
+
+  public avatarStyle: Style = {};
+  public hostStyle: Style = {};
+
+  /**
+   * Detect inputs change
+   *
+   * param {{ [propKey: string]: SimpleChange }} changes
+   *
+   * memberof AvatarComponent
+   */
+  public ngOnChanges(changes: SimpleChanges): void {
+    // reinitialize the avatar component when a source property value has changed
+    // the fallback system must be re-invoked with the new values.
+    this.initializeAvatar();
+  }
+
+  public getStyles(): void {
+
+    if (!this.src) {
+      this.avatarStyle = this.getInitialsStyle(this.avatarText);
+    } else {
+      this.avatarStyle = this.getImageStyle();
+    }
+  }
+
+  /**
+   * Initialize the avatar component and its fallback system
+   */
+  private initializeAvatar(): void {
+    if (!this.src && !this.name) return
+    this.getStyles();
+    this.hostStyle = {
+      width: this.size + 'px',
+      height: this.size + 'px'
+    };
+  }
+
+  /**
+   *
+   * returns initials style
+   *
+   */
+  private getInitialsStyle(avatarValue: string): Style {
+    return {
+      textAlign: 'center',
+      borderRadius: this.round ? '100%' : this.cornerRadius + 'px',
+      border: this.borderColor ? '1px solid ' + this.borderColor : '',
+      textTransform: 'uppercase',
+      color: this.fgColor,
+      backgroundColor: this.bgColor
+        ? this.bgColor
+        : this.getRandomColor(avatarValue),
+      font:
+        Math.floor(+this.size / this.textSizeRatio) +
+        'px Helvetica, Arial, sans-serif',
+      lineHeight: this.size + 'px',
+      ...this.style
+    };
+  }
+
+  /**
+   *
+   * returns image style
+   */
+  private getImageStyle(): Style {
+    return {
+      maxWidth: '100%',
+      borderRadius: this.round ? '50%' : this.cornerRadius + 'px',
+      border: this.borderColor ? '1px solid ' + this.borderColor : '',
+      width: this.size + 'px',
+      height: this.size + 'px',
+      ...this.style,
+    };
+  }
+
+  private getRandomColor(avatarText: string): string {
+    if (!avatarText) {
+      return 'transparent';
+    }
+    const asciiCodeSum = this.calculateAsciiCode(avatarText);
+    return this.avatarColors[asciiCodeSum % this.avatarColors.length];
+  }
+
+  private calculateAsciiCode(value: string): number {
+    return value
+      .split('')
+      .map(letter => letter.charCodeAt(0))
+      .reduce((previous, current) => previous + current);
+  }
+
+}

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

@@ -0,0 +1,13 @@
+<div class="avatar-container" [ngStyle]="hostStyle">
+    <img *ngIf="avatarSrc; else textAvatar" 
+        [src]="avatarSrc" 
+        [width]="size" 
+        [height]="size" 
+        [ngStyle]="avatarStyle"
+        class="avatar-content" loading="lazy" />
+    <ng-template #textAvatar>
+        <div *ngIf="avatarText" class="avatar-content" [ngStyle]="avatarStyle">
+            {{ avatarText }}
+        </div>
+    </ng-template>
+</div>

package/src/lib/wm-avatar/avatar.scss

@@ -0,0 +1,3 @@
+:host {
+  border-radius: 50%;
+}

package/src/lib/wm-back-btn/wm-back-btn.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'wm-back-btn',
+    styleUrls: ['./wm-back-btn.scss'],
+    templateUrl: './wm-back-btn.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class WmBackBtnComponent {
+
+    @Input() public icon: string = 'arrow-long-left';
+    @Input() public disabled: boolean = false;
+
+    @Output() public iClick: EventEmitter<any> = new EventEmitter<any>();
+
+    public onClick(event) {
+        this.iClick.emit(event);
+    }
+}

package/src/lib/wm-back-btn/wm-back-btn.html

@@ -0,0 +1,7 @@
+<button class="wm-btn-button-wrap" (click)="onClick($event)" type="button">
+  <div class="icon-svg" [ngClass]="{'disabled': disabled}" [ngStyle]="{
+            'mask': 'url(./assets/icon/svg/'+ icon+ '.svg) no-repeat center', 
+            '-webkit-mask':'url(./assets/icon/svg/'+icon+'.svg) no-repeat center'
+          }">
+  </div>
+</button>

package/src/lib/wm-back-btn/wm-back-btn.scss

@@ -0,0 +1,51 @@
+@import './../../assets/theme/wmGlobals.scss';
+
+:host {
+    display: flex;
+    align-self: center;
+}
+
+.wm-btn-button-wrap {
+    background-color: transparent;
+    color: var(--mediumFontColor);
+    border: none;
+    border-radius: 0px;
+    font-size: 14px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    align-content: center;
+    outline: 0;
+    cursor: pointer;
+    height: 30px;
+
+
+    &:hover {
+        color: var(--strongFontColor);
+
+        .icon-svg {
+            background-color: var(--strongFontColor);
+        }
+    }
+}
+
+// back btn icon
+
+.icon-svg {
+    @include flexJA(center, center);
+    background-color: var(--mediumFontColor);
+    width: 24px;
+    height: 24px;
+}
+
+.disabled {
+    background-color: var(--disabledColor);
+    border-color: var(--disabledColor);
+    color: var(--lightFontColor);
+    cursor: default;
+
+    &:hover {
+        background-color: var(--disabledColor);
+        border-color: var(--disabledColor);
+    }
+}

package/src/lib/wm-beta-text/wm-beta-text.component.html

@@ -0,0 +1 @@
+<span class="text-title {{wrapClass}}">{{text}}</span>

package/src/lib/wm-beta-text/wm-beta-text.component.scss

@@ -0,0 +1,44 @@
+@import './../../assets/theme/wmGlobals.scss';
+
+.text-title {
+    color: var(--strongFontColor);
+    display: block;
+    margin-right: 10px;
+    text-align: right;
+    transform-origin: center center;
+    -webkit-transform: rotate(-6deg);
+    -moz-transform: rotate(-6deg);
+    -ms-transform: rotate(-6deg);
+    -o-transform: rotate(-6deg);
+    transform: rotate(-6deg);
+    font-family: $fontFamily;
+    font-weight: 500;
+    font-size: 16px;
+    min-width: 50px;
+    border-radius: 5px;
+    padding: 4px;
+    margin: auto 12px auto 28px;
+    text-align: center;
+}
+
+.text-position {
+    position: absolute;
+    right: 10px;
+    height: 23px;
+}
+
+.center-position {
+    line-height: 22px;
+    height: 22px;
+    margin-top: 8px;   
+}
+
+.red-wrapper {
+    background-color: var(--dangerColor); 
+    color: var(--onBrandTextColor);
+}
+
+.warning-wrapper {
+    background-color: var(--warningColor);
+    color: var(--onBrandTextColor);
+}

package/src/lib/wm-beta-text/wm-beta-text.component.ts

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'wm-beta-text',
+  templateUrl: './wm-beta-text.component.html',
+  styleUrls: ['./wm-beta-text.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WmBetaTextComponent {
+
+  @Input() public text: string = '';
+  @Input() public wrapClass: string = '';
+
+}

package/src/lib/wm-info/info-models.ts

@@ -0,0 +1,22 @@
+import { OriginConnectionPosition, OverlayConnectionPosition } from "@angular/cdk/overlay";
+
+export enum InfoType {
+  Error = 0,
+  Warning = 1,
+  InfoMessage = 2,
+  TabError = 3,
+  TabWarning = 4,
+  InfoSmall = 5,
+  Filtered = 6,
+  InlineDetails = 7,
+  SubNavPanel = 8,
+  InfoGold = 9
+}
+export interface IWmInfoPositionPopup {
+  origin: OriginConnectionPosition;
+  overlay: OverlayConnectionPosition;
+  arrow: {
+    bottom: boolean;
+    left: boolean;
+  };
+}

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

@@ -0,0 +1,238 @@
+import { ConnectionPositionPair, Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { Component, Input, OnInit, ChangeDetectionStrategy, TemplateRef, ElementRef, OnDestroy, ViewContainerRef } from '@angular/core';
+import { InfoType, IWmInfoPositionPopup } from './info-models';
+
+const DEFAULT_TOOLTIP_POSITIONS = ['bottom-right', 'bottom-center', 'bottom-left', 'top-right', 'top-center', 'top-left'];
+
+@Component({
+  selector: 'wm-info',
+  styleUrls: ['./wm-info.scss'],
+  templateUrl: './wm-info.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class WmInfoComponent implements OnInit, OnDestroy {
+
+  @Input() preText: string = '';
+  @Input() postText: string = '';
+  @Input() header: string;
+  @Input() type: InfoType = InfoType.Error;
+  @Input() popupPosition: string = 'bottom-right';
+  @Input() iconAsTemplate: boolean;
+  @Input() useThemeForIconTemplate: boolean = false;
+  @Input() smallIcon: boolean;
+  defaultIconSize = 24;
+  smallIconSize = 16;
+  positionBottom: boolean = true;
+  positionLeft: boolean = true;
+  currentPositions: string[] = DEFAULT_TOOLTIP_POSITIONS;
+
+  get imageSize() {
+    return (this.smallIcon ? this.smallIconSize : this.defaultIconSize) + 'px';
+  }
+
+  private _overlayRef: OverlayRef;
+
+  constructor(private _overlay: Overlay,
+    private _elementRef: ElementRef, private viewContainerRef: ViewContainerRef) {
+
+  }
+
+  public togglePopup(template: TemplateRef<any>) {
+    if (this._overlayRef) {
+      this.closePopup();
+    } else {
+      this.openPopup(template);
+    }
+  }
+
+  private openPopup(template: TemplateRef<any>) {
+    this.closePopup(); // close any old ones.
+
+    const positionPairs: ConnectionPositionPair[] = this.currentPositions.map(position => {
+      const data: IWmInfoPositionPopup = this.checkPopupPosition(position);
+      const vertClass = data.arrow.bottom ? 'info-bottom' : 'info-top';
+      const horClass = data.arrow.left ? 'info-left' : 'info-right';
+      return new ConnectionPositionPair(
+        { originX: data.origin.originX, originY: data.origin.originY },
+        { overlayX: data.overlay.overlayX, overlayY: data.overlay.overlayY }, 0, 0,
+        ['info-popup-wrapper', vertClass, horClass]
+      );
+    });
+    const positionStrategy = this._overlay.position()
+      .flexibleConnectedTo(this._elementRef)
+      .withPositions(positionPairs)
+      .withFlexibleDimensions(true)
+      .withPush(true);
+
+    this._overlayRef = this._overlay.create({
+      panelClass: ['mat-tooltip-panel', 'modal', 'is-active'],
+      hasBackdrop: true,
+      backdropClass: 'modal-background',
+      scrollStrategy: this._overlay.scrollStrategies.reposition(),
+      positionStrategy
+    });
+    if (this._overlayRef && !this._overlayRef.hasAttached()) {
+      this._overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));
+      this._overlayRef.backdropClick().subscribe(() => this.closePopup());
+    }
+  }
+
+  private closePopup() {
+    if (this._overlayRef) {
+      this._overlayRef.detach();
+      this._overlayRef = undefined;
+    }
+  }
+
+  ngOnInit() {
+    if (this.popupPosition !== DEFAULT_TOOLTIP_POSITIONS[0]) {
+      const otherPositions = [];
+      const filteredByFirstPosition = DEFAULT_TOOLTIP_POSITIONS
+        .filter((item) => {
+          if (item === this.popupPosition) return false;
+          if (item.startsWith(this.popupPosition.split('-')[0])) {
+            return true;
+          } else {
+            otherPositions.push(item);
+            return false;
+          }
+        });
+      this.currentPositions = [this.popupPosition].concat(filteredByFirstPosition).concat(otherPositions);
+    }
+  }
+
+  public getIconName() {
+    switch (this.type) {
+      case InfoType.Error:
+        return 'error';
+      case InfoType.Warning:
+        return 'warning';
+      case InfoType.TabError:
+        return 'bo-error';
+      case InfoType.TabWarning:
+        return 'bo-warning';
+      case InfoType.InfoSmall:
+        return 'info-s';
+      case InfoType.Filtered:
+        return 'filter';
+      case InfoType.InlineDetails:
+        return 'eye-pick';
+      case InfoType.SubNavPanel:
+        this.smallIcon = true;
+        return 'sub-nav-warning';
+      case InfoType.InfoGold:
+        return 'info-gold';
+      default:
+        return 'info';
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.closePopup();
+  }
+
+  checkPopupPosition(value: string): IWmInfoPositionPopup {
+    let currentPosition: IWmInfoPositionPopup;
+    switch (value) {
+      case 'bottom-left':
+        currentPosition = {
+          origin: {
+            originX: 'end',
+            originY: 'bottom'
+          },
+          overlay: {
+            overlayX: 'end',
+            overlayY: 'top'
+          },
+          arrow: {
+            bottom: true,
+            left: true,
+          }
+        };
+        break;
+      case 'top-right':
+        currentPosition = {
+          origin: {
+            originX: 'start',
+            originY: 'top',
+          },
+          overlay: {
+            overlayX: 'start',
+            overlayY: 'bottom',
+          },
+          arrow: {
+            bottom: false,
+            left: true,
+          }
+        };
+        break;
+      case 'top-left':
+        currentPosition = {
+          origin: {
+            originX: 'end',
+            originY: 'top',
+          },
+          overlay: {
+            overlayX: 'end',
+            overlayY: 'bottom',
+          },
+          arrow: {
+            bottom: false,
+            left: false,
+          }
+        };
+        break;
+      case 'top-center':
+        currentPosition = {
+          origin: {
+            originX: 'center',
+            originY: 'top',
+          },
+          overlay: {
+            overlayX: 'center',
+            overlayY: 'bottom',
+          },
+          arrow: {
+            bottom: false,
+            left: true,
+          }
+        };
+        break;
+      case 'bottom-center':
+        currentPosition = {
+          origin: {
+            originX: 'center',
+            originY: 'bottom',
+          },
+          overlay: {
+            overlayX: 'center',
+            overlayY: 'top',
+          },
+          arrow: {
+            bottom: true,
+            left: true,
+          }
+        };
+        break;
+      case 'bottom-right':
+      default:
+        currentPosition = {
+          origin: {
+            originX: 'start',
+            originY: 'bottom',
+          },
+          overlay: {
+            overlayX: 'start',
+            overlayY: 'top',
+          },
+          arrow: {
+            bottom: true,
+            left: false,
+          }
+        };
+    }
+    return currentPosition;
+  }
+}

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

@@ -0,0 +1,19 @@
+<ng-template #popupTemplate>
+  <div class="u-arrow">
+  </div>
+  <div class="u-info-content" [ngClass]="{'p-error': type === 0, 'p-warning': type === 1, 'p-info': type === 2}">
+    <span *ngIf="header" [innerHTML]="header"></span>
+    <ng-content></ng-content>
+  </div>
+</ng-template>
+ <div class="info-wrap flex-row" [ngClass]="{'p-error': type === 0, 'p-warning': type === 1, 'p-info': type === 2}">
+    <span class="info-label" *ngIf="preText">{{preText}}</span>
+    <span class="info-icon" (click)="togglePopup(popupTemplate)">
+      <wm-template-image *ngIf="iconAsTemplate" [icon]="getIconName()" [size]="imageSize"
+        [active]="useThemeForIconTemplate">
+      </wm-template-image>
+      <img *ngIf="!iconAsTemplate" [attr.width]="imageSize" [attr.height]="imageSize"
+        src="{{'./assets/icon/svg/' + getIconName() + '.svg'}}" alt="{{getIconName()}}" />
+    </span>
+    <span class="info-label" *ngIf="postText">{{postText}}</span>
+  </div> 

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

@@ -0,0 +1,64 @@
+@import './../../assets/theme/wmGlobals.scss';
+.info-wrap {
+    @include flexJA(flex-start, center);
+    height: 100%;
+    text-align: center;
+}
+
+.info-label {
+    display: inline-block;
+    color: inherit;
+    font-size: $fontSize;
+}
+
+.info-icon {
+    cursor: pointer;
+}
+
+.info-left {
+    margin-left: -10px;
+    align-items: flex-start;
+}
+
+.info-right {
+    align-items: flex-end;
+}
+
+.u-arrow {
+    margin-left: 4px;
+    margin-right: 4px;
+}
+
+.u-info-content {
+    color: var(--infoColor);
+    text-align: left;
+    font-size: $fontSize;
+    font-weight: 400;
+    max-width: 50vw;
+    white-space: normal;
+    word-wrap: break-word;
+    word-break: break-word;
+    background: var(--pageBackgroundColor);
+    overflow-x: hidden;
+    overflow-y: auto;
+    border-color: var(--secondaryHover);
+    border-radius: 4px;
+    padding: 16px;
+    box-shadow: 0 16px 16px -1px #051d391a;
+
+    &::-webkit-scrollbar {
+        width: 4px;
+    }
+}
+
+.p-error {
+    color: var(--dangerColor);
+}
+
+.p-warning {
+    color: var(--warningColor);
+}
+
+.p-info {
+    color: var(--brandColor);
+}

package/src/lib/wm-info-card/wm-info-card.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'wm-info-card',
+    styleUrls: ['./wm-info-card.scss'],
+    templateUrl: './wm-info-card.html'
+})
+
+export class InfoCardComponent {
+    @Input() label: string;
+    @Input() value: number | string;
+    @Input() icon: string;
+    @Input() useCustomIcon: boolean = false;
+}