btv-base-controls 0.1.22 → 0.1.23

package/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/btv-base-controls'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/btv-base-controls",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,31 +1,11 @@
-{
-  "name": "btv-base-controls",
-  "version": "0.1.22",
-  "peerDependencies": {
-    "@angular/common": "^18.0.1",
-    "@angular/core": "^18.0.1"
-  },
-  "dependencies": {
-    "tslib": "^2.4.0"
-  },
-  "module": "fesm2015/btv-base-controls.mjs",
-  "es2020": "fesm2020/btv-base-controls.mjs",
-  "esm2020": "esm2020/btv-base-controls.mjs",
-  "fesm2020": "fesm2020/btv-base-controls.mjs",
-  "fesm2015": "fesm2015/btv-base-controls.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/btv-base-controls.mjs",
-      "es2020": "./fesm2020/btv-base-controls.mjs",
-      "es2015": "./fesm2015/btv-base-controls.mjs",
-      "node": "./fesm2015/btv-base-controls.mjs",
-      "default": "./fesm2020/btv-base-controls.mjs"
-    }
-  },
-  "sideEffects": false
+{
+  "name": "btv-base-controls",
+  "version": "0.1.23",
+  "peerDependencies": {
+    "@angular/common": "^18.0.1",
+    "@angular/core": "^18.0.1"
+  },
+  "dependencies": {
+    "tslib": "^2.4.0"
+  }
 }

package/src/assets/theme/wmGlobals.scss

@@ -0,0 +1,181 @@
+/** 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

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

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

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

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

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

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

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

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

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

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

@@ -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';