btv-base-controls 0.1.23 → 0.1.24

package/src/assets/theme/wmGlobals.scss

@@ -1,181 +0,0 @@
-/** GLobal Colors **/
-
-// page width
-$smWidth: 640px;
-$smallWidth: 1024px;
-$standardWidth: 1440px;
-$a4: 794px;
-
-// A4 sizes
-$paper-a4-portrait-x: 210mm;
-$paper-a4-portrait-y: 297mm;
-
-// wizard windows (inner content)
-$wizardMediumWidth: 720px;
-$wizardMediumHeight: 420px;
-
-// box-shadow
-$boxShadow: 0 0 1px 0 rgba(5, 29, 57, 0.07),
-0 6px 6px -1px rgba(5, 29, 57, 0.10);
-
-// border-radius
-$standardBorderRadius: 4px;
-
-// font-weight FontWeight
-$regularFontWeight: 400;
-$semiBoldFontWeight: 600;
-$boldFontWeight: 700;
-
-// Font style
-$fontSizeHeader: 24px;
-$lineHeightHeader: 32px;
-$fontSize: 14px;
-$lineHeight: 24px;
-$fontSizeList: 12px;
-$lineHeightListPX: 20px;
-$lineHeightList: 2.74em;
-$fontFamily: Inter,
-Verdana,
-Geneva,
-Tahoma,
-sans-serif;
-//color for text
-//-------------------------
-////detail grid header, row
-// -----------
-$GreenishColor: #879992;
-// color for dropdown, input
-$color6F777A: #6F777A;
-// background color for splitter splitbar
-$color71807A: #71807A;
-//background-color and border-color for list
-$color424651: #424651;
-
-// border for list in kendo popup
-$colorF1F2F4: #F1F2F4;
-
-
-@mixin flexJA($just, $align) {
-    justify-content: $just;
-    align-items: $align;
-}
-
-@mixin flex($display, $direction, $justify, $align) {
-    display: $display;
-    flex-direction: $direction;
-    justify-content: $justify;
-    align-items: $align;
-}
-
-@mixin arrow($wid, $hei, $bLeft, $bRight, $bBot, $bTop, $float) {
-    width: $wid;
-    height: $hei;
-    border-left: $bLeft;
-    border-right: $bRight;
-    border-bottom: $bBot;
-    border-top: $bTop;
-    float: $float;
-}
-
-@mixin chrome {
-    @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
-        @content;
-    }
-}
-
-/*----------Mixin for adaptive and responce designe-----------*/
-
-$tablet-width: 799px;
-$tablet-height: 599px;
-@mixin tablet {
-
-    @media all and (max-width: #{$tablet-width}) and (max-height: #{$tablet-height}),
-    all and (max-width: #{$tablet-width}),
-    all and (max-height: #{$tablet-height}) {
-        @content;
-    }
-}
-@mixin customSize($customWidth, $customHeight) {
-    @media all and (max-width: #{$customWidth}) and (max-height: #{$customHeight}) {
-        @content;
-    }
-}
-
-@mixin customMaxWidth($customWidth) {
-    @media all and (max-width: #{$customWidth}) {
-        @content;
-    }
-}
-
-@mixin customMinWidth($customMinWidth) {
-    @media all and (min-width: #{$customMinWidth}) {
-        @content;
-    }
-}
-
-@mixin customMaxHeight($customHeight) {
-    @media all and (max-height: #{$customHeight}) {
-        @content;
-    }
-}
-
-@mixin customMinHeight($customMinHeight) {
-    @media all and (min-height: #{$customMinHeight}) {
-        @content;
-    }
-}
-
-/*----------------------THEMES----------------------------*/
-
-@mixin safeMask($icon, $size: 24px, $color: var(--brandColor), $hoverColor: var(--onBrandHoverColor)) {
-    @supports (mask: url('')) and (mask-image: url('')) {
-        -webkit-mask-position: center;
-        -webkit-mask-repeat: no-repeat;
-        -webkit-mask-size: $size;
-        -webkit-mask-image: url('assets/icon/svg/#{$icon}.svg');
-        mask-image: url('assets/icon/svg/#{$icon}.svg');
-        mask-size: $size !important;
-        background-image: none !important;
-        background-color: $color !important;
-
-        &:hover {
-            background-color: $hoverColor !important;
-        }
-    }
-
-    @supports not ((mask: url('')) or (mask-image: url(''))) {
-        background-image: url('assets/icon/svg/#{$icon}.svg') !important;
-        background-size: contain !important;
-        background-repeat: no-repeat !important;
-        opacity: 0.8 !important;
-
-        &:hover {
-            opacity: 1 !important;
-        }
-    }
-}
-
-/*----------------------PRINTING----------------------------*/
-
-@media print {
-    body {
-        all: unset !important;
-    }
-
-    .wm-page {
-        margin: 0px !important;
-        display: block !important;
-    }
-
-    .not-printable {
-        display: none !important;
-    }
-
-    * {
-        visibility: hidden;
-    }
-
-    .printable, .printable * {
-        visibility: visible !important;
-    }
-}

package/src/lib/basic.module.ts

@@ -1,48 +0,0 @@
-import { ToolTipRendererDirective } from './custom-tool-tip/tool-tip-renderer.directive';
-import { CustomToolTipComponent } from './custom-tool-tip/custom-tool-tip.component';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { AvatarComponent } from './wm-avatar/avatar.component';
-import { BlinkMessageComponent } from './blink-message/blink-message.component';
-import { BtvIconButtonComponent } from './btv-icon-button/btv-icon-button.component';
-import { BtvProgressComponent } from './btv-progress/btv-progress.component';
-import { BtvSearch } from './btv-search/btv-search.component';
-import { BusyIndicatorComponent } from './busy-indicator/busy-indicator.component';
-import { IllustrationComponent } from './illustration/illustration.component';
-import { WmBackBtnComponent } from './wm-back-btn/wm-back-btn.component';
-import { WmBetaTextComponent } from './wm-beta-text/wm-beta-text.component';
-import { InfoCardComponent } from './wm-info-card/wm-info-card.component';
-import { WmInfoComponent } from './wm-info/wm-info.component';
-import { WmNoContentComponent } from './wm-no-content/wm-no-content.component';
-import { WmPanelBarComponent } from './wm-panel-bar/wm-panel-bar.component';
-import { ScalableDivComponent } from './wm-scalable-div/scalable-div.component';
-import { SpinnerComponent } from './wm-spinner/wm-spinner.component';
-import { WmStateIconComponent } from './wm-state-icon/wm-state-icon.component';
-import { WmTagComponent } from './wm-tag/wm-tag.component';
-import { WmTemplateImageComponent } from './wm-tamplate-image/wm-template-image.component';
-import { WmToggleComponent } from './wm-toggle/wm-toggle.component';
-import { BtvCounterButtonComponent } from './btv-icon-button/btv-counter-button';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { OverlayModule } from '@angular/cdk/overlay';
-
-
-@NgModule({
-    imports: [CommonModule, MatButtonToggleModule, MatTooltipModule, OverlayModule],
-    declarations: [BtvSearch, WmBackBtnComponent, BtvIconButtonComponent, WmNoContentComponent,
-        BtvCounterButtonComponent, WmStateIconComponent, BlinkMessageComponent,  BusyIndicatorComponent,
-        ScalableDivComponent,
-        BtvProgressComponent, WmBetaTextComponent, WmTemplateImageComponent, IllustrationComponent,
-        AvatarComponent, WmToggleComponent, WmTagComponent, WmPanelBarComponent, InfoCardComponent,
-        CustomToolTipComponent, ToolTipRendererDirective, WmInfoComponent,SpinnerComponent],
-    exports: [BtvSearch, WmBackBtnComponent, BtvIconButtonComponent, WmNoContentComponent,
-        BtvCounterButtonComponent, WmStateIconComponent, BlinkMessageComponent,  BusyIndicatorComponent,
-        ScalableDivComponent,
-        BtvProgressComponent, WmBetaTextComponent, WmTemplateImageComponent, IllustrationComponent,
-        AvatarComponent, WmToggleComponent, WmTagComponent, WmPanelBarComponent, InfoCardComponent,
-         WmInfoComponent,SpinnerComponent, ToolTipRendererDirective, CustomToolTipComponent],
-    providers: []
-})
-export class WmBaseControlsModule {
-    constructor() { }
-}

package/src/lib/blink-message/blink-message.component.html

@@ -1 +0,0 @@
-<span class="copy-label" *ngIf="show"> {{ message }} </span>

package/src/lib/blink-message/blink-message.component.scss

@@ -1,4 +0,0 @@
-.copy-label {
-    color: var(--brandColor);
-    margin-right: 10px;
-}

package/src/lib/blink-message/blink-message.component.ts

@@ -1,54 +0,0 @@
-import { interval, Subscription } from 'rxjs';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
-import { Guid } from '../../models/guidExtension';
-
-@Component({
-    selector: 'wm-blink-message',
-    templateUrl: './blink-message.component.html',
-    styleUrls: ['./blink-message.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class BlinkMessageComponent {
-
-    private _subscription: Subscription;
-
-    @Input() public message: string = 'Copied';
-
-    private _intervalNumber: number = 1;
-    public get intervalNumber() { return this._intervalNumber; }
-    @Input() public set intervalNumber(value: number) {
-        if (this._intervalNumber === value) return;
-        if (!value) return;
-        this._intervalNumber = value;
-        this._duration = interval(this.intervalNumber * 1000);
-    }
-
-    private _duration = interval(this.intervalNumber * 1000);
-
-    private _actionId: Guid;
-    public get actionId() { return this._actionId; }
-    @Input() public set actionId(value: Guid) {
-        if (this._actionId === value) return;
-        if (!value) return;
-        this.show = true;
-        this.selectScript();
-    }
-
-    public show: boolean = false;
-
-    constructor(private change: ChangeDetectorRef) {
-    }
-
-    public selectScript() {
-        if (this._subscription) this._subscription.unsubscribe();
-        this._subscription = this._duration.subscribe(() => {
-            this.show = false;
-            this.change.detectChanges();
-            this._subscription.unsubscribe();
-            this._subscription = undefined;
-        });
-    }
-
-
-
-}

package/src/lib/btv-icon-button/btv-counter-button.html

@@ -1,18 +0,0 @@
-<button class="icon flex-row {{buttonClasses}}" (click)="onClick($event)" type="button" #button
-  [tabindex]="(!isTabStop || disabled) ? -1 : undefined" [showToolTip]="!!titleText" customToolTip [contentTemplate]="template">
-
-  <wm-template-image [icon]="icon" [size]="floor(iconSize * (isHover ? 1.1: 1)) + 'px'" [active]="!disabled && changed"
-    [light]="light">
-  </wm-template-image>
-
-  <ng-content></ng-content>
-
-  <span class="wm-counter" [title]="counter" *ngIf="counter > 0">{{counterLabel}}</span>
-
-</button>
-
-
-<ng-template #template>
-  <span class="tooltip-text"> {{titleText}} </span>
-  <span *ngIf="disabled" class="tooltip-disabled"> - {{unavailableText}} </span>
-</ng-template>

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

@@ -1,34 +0,0 @@
-import { BtvIconButtonComponent } from './btv-icon-button.component';
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
-
-@Component({
-    selector: 'btv-counter-button',
-    styleUrls: ['./btv-icon-button.scss'],
-    templateUrl: './btv-counter-button.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-
-export class BtvCounterButtonComponent extends BtvIconButtonComponent {
-    private _counter: number = 0;
-    public counterLabel: string = '';
-    @Input() set counter(val) {
-        this._counter = val;
-        this.counterLabel = this.toShortLabel(val);
-    }
-    get counter() {
-        return this._counter;
-    }
-
-    public toShortLabel(value: number): string {
-        if (!value && value !== 0) return '';
-        if (value <= 999) return value.toString();
-        let num = Math.trunc(value / 100) / 10;
-        if (num >= 100) num = Math.trunc(value / 1000);
-        if (num <= 999) return num + 'K';
-        num = Math.trunc(num / 1000);
-        if (num <= 999) return num + 'M';
-        return 'A lot';
-    }
-
-    @Input() public override unavailableText: string = '';
-}

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

@@ -1,62 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
-
-export type ButtonSize = 'small' | 'medium' | 'large';
-
-@Component({
-  selector: 'btv-icon-button',
-  styleUrls: ['./btv-icon-button.scss'],
-  templateUrl: './btv-icon-button.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-
-export class BtvIconButtonComponent {
-
-  @HostBinding('class.disabled') get getIsDisabled() { return this.disabled; }
-  @HostBinding('class.small') get getIsSmall() { return this.size === 'small'; }
-  @HostBinding('class.medium') get getIsMedium() { return this.size === 'medium'; }
-  @HostBinding('class.danger') get getIsDanger() { return this.danger; }
-
-
-  @Input() titleText: string = '';
-  @Input() disabled: boolean = false;
-  @Input() size: ButtonSize = 'large';
-  @Input() icon: string = '';
-  @Input() changed: boolean = false;
-  @Input() isTabStop: boolean = false;
-  @Input() light: boolean = false;
-  @Input() buttonClasses = '';
-  @Input() imageClasses = 'icon-svg';
-  @Input() danger: boolean = false;
-  @Input() unavailableText: string = "Unavailable";
-  public isHover = false;
-
-  floor = Math.floor;
-
-  isInFullScreen: boolean = false;
-
-  public get iconSize() {
-    switch (this.size) {
-      case 'small': return 16;
-      case 'medium': return 20;
-      default: return 24;
-    }
-  }
-
-  public get animate(): any {
-    return {
-      type: 'zoom',
-      duration: 200
-    };
-  }
-
-  @Output() iClick: EventEmitter<any> = new EventEmitter<any>();
-
-  constructor() {
-  }
-
-  onClick($event: any) {
-    if (this.disabled) return;
-    this.iClick.emit($event);
-  }
-
-}

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

@@ -1,14 +0,0 @@
-<button class="icon flex-row {{buttonClasses}}" (click)="onClick($event)" type="button" #button
-  [tabindex]="(!isTabStop || disabled) ? -1 : undefined" [showToolTip]="!!titleText" customToolTip [contentTemplate]="template">
-
-  <wm-template-image [icon]="icon" [size]="floor(iconSize * (isHover ? 1.1: 1)) + 'px'" [active]="!disabled && changed"
-    [light]="light" [classes]="imageClasses">
-  </wm-template-image>
-  <ng-content></ng-content>
-
-</button>
-
-<ng-template #template>
-  <span class="tooltip-text"> {{titleText}} </span>
-  <span *ngIf="disabled" class="tooltip-text"> - {{unavailableText}} </span>
-</ng-template>

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

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

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

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

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

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

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