ngx-wapp-components 3.2.11-alpha.9 → 3.2.11

package/src/lib/button/w-radio-button/w-radio-button.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { WRadioButtonComponent } from './w-radio-button.component';
-
-describe('WRadioButtonComponent', () => {
-  let component: WRadioButtonComponent;
-  let fixture: ComponentFixture<WRadioButtonComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ WRadioButtonComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(WRadioButtonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/button/w-radio-button/w-radio-button.component.ts

@@ -1,74 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Optional, Output, Self, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { SizeType } from '../../shared/enums/enum';
-
-@Component({
-    selector: 'w-radio-button',
-    templateUrl: './w-radio-button.component.html',
-    styleUrls: ['./w-radio-button.component.scss'],
-    providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => WRadioButtonComponent),
-            multi: true
-        }
-    ],
-    standalone: false
-})
-export class WRadioButtonComponent implements OnInit, ControlValueAccessor {
-  selectedOption: any;
-  selectedIndex = 0;
-  isDisabled: boolean = false;
-  isTouched : boolean = false;
-
-  @Input('radioGroupElements') radioGroupElements: any[] = [];
-  @Input('required') required: boolean = false;
-  @Input('disabled') disabled: boolean = false;
-  @Input('requiredErrorDescription') requiredErrorDescription: string = "Default required error description";
-  @Input('size') size: string = "medium";
-  
-  @Output('onChange') onChangeEvent: EventEmitter<any> = new EventEmitter();
-
-  formControl: any;
-  ngModelValue: any;
-
-  onChange: any = () => {};
-  onTouch: any = () => {};
-  
-  sizeType: typeof SizeType = SizeType;
-
-  ngOnInit(): void { }
-
-  writeValue(value: any): void {
-    this.ngModelValue = value;
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouch = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.isDisabled = isDisabled;
-  }
-
-  onChanged(){
-    this.onChange(this.ngModelValue);
-    this.onTouch();
-
-    this.onChangeEvent.emit(this.ngModelValue);
-  }
-
-  onChangedForm(value: any){
-    this.onChange(value);
-    this.onTouch();
-    this.onChangeEvent.emit(value);
-  }
-
-  getSizeName(value: number): string {
-    return SizeType[value];
-  }
-}

package/src/lib/button/w-select-button/w-select-button.component.html

@@ -1,45 +0,0 @@
-@if (formControl) {
-    <p-selectbutton #wSelectButton [ngClass]="{'w-button-small' : size == getSizeName(sizeType.small), 
-                                'w-button-medium' : size == getSizeName(sizeType.medium),
-                                'w-button-large' : size == getSizeName(sizeType.large)}"
-    [options]="stateOptions"
-    [formControl]="formControl"
-    [disabled]="disabled"
-    optionLabel="label"
-    optionValue="value"
-    [pTooltip]="tooltip"
-    [tooltipPosition]="tooltipPosition"
-    (onChange)="onButtonChangedForm($event)" 
-    [allowEmpty]="allowEmpty">
-    <ng-template let-item pTemplate>
-      @if (item.label) {
-        <div class="flex">
-          <span [class]="item.icon"></span>
-          <span>{{item.label}}</span>
-        </div>
-      }
-    </ng-template>
-  </p-selectbutton>
-} @else {
-    <p-selectbutton #wSelectButton [ngClass]="{'w-button-small' : size == getSizeName(sizeType.small), 
-                                'w-button-medium' : size == getSizeName(sizeType.medium),
-                                'w-button-large' : size == getSizeName(sizeType.large)}"
-    [options]="stateOptions"
-    [(ngModel)]="ngModelValue"
-    [disabled]="disabled"
-    optionLabel="label"
-    optionValue="value"
-    [pTooltip]="tooltip"
-    [tooltipPosition]="tooltipPosition"
-    (ngModelChange)="onButtonChanged()" 
-    [allowEmpty]="allowEmpty">
-    <ng-template let-item pTemplate>
-      @if (item.label) {
-        <div class="flex">
-          <span [class]="item.icon"></span>
-          <span>{{item.label}}</span>
-        </div>
-      }
-    </ng-template>
-  </p-selectbutton>
-}

package/src/lib/button/w-select-button/w-select-button.component.scss

@@ -1,71 +0,0 @@
-@import '../../../styles/_variables.scss';
-
-:host ::ng-deep .p-togglebutton.p-togglebutton-checked {
-    background-color: $primary700;
-    border-color: $primary700;
-    color: $textInverseColor;
-}
-
-:host ::ng-deep .p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
-    border-color: $secondary400;
-    background: transparent;
-    color: $secondary400;
-}
-
-:host ::ng-deep .w-button-small 
-.p-togglebutton{
-    height: 32px;
-    padding: calc($spacingXS - $defaultBorderWidth) calc($spacingM - $defaultBorderWidth);
-    border: $defaultBorderWidth solid rgba($primary700, 0.25);
-    box-shadow: $buttonShadow;
-    gap: $spacingXS;
-    
-        @extend .w-button-small-label-text-typography;
-
-    .p-button-icon{
-        margin-right: $spacingZero;
-        @extend .w-button-small-icon-text;
-    }
-
-    &:not(.p-disabled):not(.p-highlight):hover{
-        border-color: $secondary400;
-
-        .p-button-icon {
-            color: $secondary400 !important;
-        }
-    }
-}
-
-:host ::ng-deep .w-button-medium .p-button {
-	height: 40px;
-    padding: calc($spacingS - $defaultBorderWidth) calc($spacingL - $defaultBorderWidth);
-    border: $defaultBorderWidth solid rgba($primary700, 0.25);
-    box-shadow: $buttonShadow;
-
-    .p-button-label{
-        @extend .w-button-medium-label-text-typography;
-    }
-}
-
-:host ::ng-deep .w-button-large .p-button {
-	height: 56px;
-    padding: calc($spacingM - $defaultBorderWidth) calc($spacingXXL - $defaultBorderWidth);
-    border: $defaultBorderWidth solid rgba($primary700, 0.25);
-    box-shadow: $buttonShadow;
-
-    .p-button-label{
-        @extend .w-button-large-label-text-typography;
-    }
-}
-
-::ng-deep .p-togglebutton {
-	border: $defaultBorderWidth solid $black200;
-    color: $textMainColor;
-	transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
-}
-
-:host ::ng-deep .w-button-small .p-togglebutton:focus,
-:host ::ng-deep .w-button-medium .p-togglebutton:focus,
-:host ::ng-deep .w-button-large .p-togglebutton:focus {
-	box-shadow: $spacingZero $spacingZero 3px 3px #00A6E940 !important;
-}

package/src/lib/button/w-select-button/w-select-button.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { WSelectButtonComponent } from './w-select-button.component';
-
-describe('WSelectButtonComponent', () => {
-  let component: WSelectButtonComponent;
-  let fixture: ComponentFixture<WSelectButtonComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ WSelectButtonComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(WSelectButtonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/button/w-select-button/w-select-button.component.ts

@@ -1,95 +0,0 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild, forwardRef } from '@angular/core';
-import { SizeType } from '../../shared/enums/enum';
-import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { WSelectButtonState } from '../../shared/models/w-select-button-state.model';
-
-@Component({
-    selector: 'w-select-button',
-    templateUrl: './w-select-button.component.html',
-    styleUrls: ['./w-select-button.component.scss'],
-    providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => WSelectButtonComponent),
-            multi: true
-        }
-    ],
-    standalone: false
-})
-export class WSelectButtonComponent implements AfterViewInit {
-  @Input('stateOptions') stateOptions: WSelectButtonState[] = [{label: 'Off', value: 'off'}, {label: 'On', value: 'on'}];
-  @Input('size') size: string = "small";
- 
-  @Input('tooltipPosition') tooltipPosition: string = "bottom";
-  @Input('tooltip') tooltip: string = "";
-  @Input('disabled') disabled: boolean = false;
-  @Input('formControl') formControl!: FormControl | null;
-  @Input('stateClass') stateClass!: string;
-  @Input('allowEmpty') allowEmpty: boolean = false;
-
-  @Output('onChange') onChangeEvent: EventEmitter<any> = new EventEmitter();
-
-  sizeType: typeof SizeType = SizeType;
-  @ViewChild('wSelectButton', { read: ElementRef }) viewSelectorEl!: ElementRef;
-
-  onChange: any = () => {};
-  onTouch: any = () => {};
-  ngModelValue: any;
-
-  constructor(private renderer: Renderer2){}
-
-  ngAfterViewInit(): void {
-    if(this.stateOptions.every(opt => opt?.class)){
-      const root = this.viewSelectorEl.nativeElement as HTMLElement;
-        const spans = root.querySelectorAll('.p-selectbutton .p-togglebutton');
-        spans.forEach((toggle, i) => {
-        this.renderer.addClass(toggle, this.stateOptions[i].class! ?? '');
-      });
-    }
-  }
-
-  getSizeName(value: number): string {
-    return SizeType[value];
-  }
-
-  writeValue(value: any): void {
-    this.ngModelValue = value;
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouch = fn;
-  }
-  
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  onButtonChanged(){
-    this.onChange(this.ngModelValue);
-    this.onTouch();
-
-    const root = this.viewSelectorEl.nativeElement as HTMLElement;
-    const toggles = root.querySelectorAll('.p-selectbutton .p-togglebutton');
-
-    toggles.forEach((toggle) => {
-      const span = toggle.querySelector('span');
-      if (!span) return;
-      const isChecked = toggle.classList.contains('p-togglebutton-checked');
-      if (!isChecked) {
-        this.renderer.addClass(toggle, 'active');
-      } else {
-        this.renderer.removeClass(toggle, 'active');
-      }
-    });
-
-    this.onChangeEvent.emit(this.ngModelValue);
-  }
-
-  onButtonChangedForm(value: any){
-    this.onChangeEvent.emit(value.checked);
-  }
-}

package/src/lib/button/w-toggle-button/w-toggle-button.component.html

@@ -1,35 +0,0 @@
-@if (formControl) {
-  <p-togglebutton #wToggleButton
-    [class]="'w-togglebutton-small ' + (buttonClass ? buttonClass : '')" 
-    [ngClass]="{'empty-onlabel': isEmpty(onLabel), 'empty-offlabel': isEmpty(offLabel),
-                'only-icon-onlabel': hasOnlyIcon(onIcon, onLabel), 'only-icon-offlabel': hasOnlyIcon(offIcon, offLabel)}"
-    [onLabel]="onLabel"
-    [offLabel]="offLabel"
-    iconPos="left"
-    [onIcon]="onIcon"
-    [offIcon]="offIcon" 
-    [allowEmpty]="allowEmpty"
-    [pTooltip]="tooltip"
-    [tooltipPosition]="tooltipPosition"
-    [formControl]="formControl"
-    (onChange)="onButtonChangedForm($event)">
-  </p-togglebutton>
-} @else {
-  <p-togglebutton #wToggleButton
-    [class]="'w-togglebutton-small ' + (buttonClass ? buttonClass : '')" 
-    [ngClass]="{'empty-onlabel': isEmpty(onLabel), 'empty-offlabel': isEmpty(offLabel),
-                'only-icon-onlabel': hasOnlyIcon(onIcon, onLabel), 'only-icon-offlabel': hasOnlyIcon(offIcon, offLabel), 
-                'active': this.ngModelValue}"
-    [(ngModel)]="ngModelValue"
-    (ngModelChange)="onButtonChanged()"
-    [disabled]="disabled"
-    [onLabel]="onLabel"
-    [offLabel]="offLabel" 
-    iconPos="left"
-    [onIcon]="onIcon"
-    [offIcon]="offIcon"
-    [allowEmpty]="allowEmpty"
-    [pTooltip]="tooltip"
-    [tooltipPosition]="tooltipPosition">
-  </p-togglebutton>
-}

package/src/lib/button/w-toggle-button/w-toggle-button.component.scss

@@ -1,101 +0,0 @@
-@import '../../../styles/_variables.scss';
-
-:host ::ng-deep .w-togglebutton-small.p-togglebutton {
-    height: 32px;
-    padding: calc($spacingXS - $defaultBorderWidth) calc($spacingM - $defaultBorderWidth);
-    border-radius: $defaultBorderRadius;
-    border-width: $defaultBorderWidth; 
-    color: $textMainColor;
-    box-shadow: $buttonShadow;
-    gap: $spacingXS;
-
-    &.p-togglebutton-checked {
-        border: $defaultBorderWidth solid $primary700;
-        background-color: $primary700;
-        color: $textInverseColor;
-
-        .p-togglebutton-content {
-            .p-togglebutton-icon {
-                color: $textInverseColor;
-            }
-        }
-
-        &:not(:disabled){
-            &:hover{
-                background-color: $secondary400;
-                border-color: $secondary400;
-            }
-        }
-
-        &.empty-onlabel {
-            .p-togglebutton-content {
-                .p-togglebutton-label {
-                    display: none;
-                }
-            }
-        }
-
-        &.only-icon-onlabel {
-            width: 32px; 
-            padding: 0px;
-        }
-
-        &.p-disabled {
-            background: $black200;
-            border-color: $black200;
-            color: $black400;
-
-            .p-togglebutton-content {
-                .p-togglebutton-icon {
-                    color: $black400;
-                }
-            }
-        }
-    }
-
-    &:not(.p-togglebutton-checked) {
-        border: $defaultBorderWidth solid rgba($primary700, 0.25);
-
-        &:not(:disabled){
-            &:hover{
-                border-color: $secondary400;
-                color: $secondary400;
-
-                .p-togglebutton-content {
-                    .p-togglebutton-icon {
-                        color: $secondary400;
-                    }
-                }
-            }
-        }
-
-        &.empty-offlabel {
-            .p-togglebutton-content {
-                .p-togglebutton-label {
-                    display: none;
-                }
-            }
-        } 
-
-        &.only-icon-offlabel {
-            width: 32px; 
-            padding: 0px;
-        }
-
-        &.p-disabled {
-            background-color: #fff;
-            color: #bdc1c6;
-            border-color: #e8ebee;
-        }
-    }
-
-    .p-togglebutton-content{
-        .p-button-label{
-            @extend .w-button-small-label-text-typography;
-        }
-        
-        .p-button-icon{
-            @extend .w-button-medium-icon-text;
-        }
-    }
-}

package/src/lib/button/w-toggle-button/w-toggle-button.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { WToggleButtonComponent } from './w-toggle-button.component';
-
-describe('WToggleButtonComponent', () => {
-  let component: WToggleButtonComponent;
-  let fixture: ComponentFixture<WToggleButtonComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ WToggleButtonComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(WToggleButtonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/button/w-toggle-button/w-toggle-button.component.ts

@@ -1,96 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild, forwardRef } from '@angular/core';
-import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { SizeType, ButtonType } from '../../shared/enums/enum';
-
-@Component({
-    selector: 'w-toggle-button',
-    templateUrl: './w-toggle-button.component.html',
-    styleUrls: ['./w-toggle-button.component.scss'],
-    providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => WToggleButtonComponent),
-            multi: true
-        }
-    ],
-    standalone: false
-})
-export class WToggleButtonComponent implements OnInit, ControlValueAccessor {
-  @Input('onLabel') onLabel!: string;
-  @Input('offLabel') offLabel!: string;
-  @Input('size') size: string = "small";
-  @Input('onIcon') onIcon: string = "";
-  @Input('offIcon') offIcon: string = "";
-  @Input('tooltipPosition') tooltipPosition: string = "bottom";
-  @Input('tooltip') tooltip: string = "";
-  @Input('disabled') disabled: boolean = false;
-  @Input('formControl') formControl!: FormControl | null;
-  @Input('allowEmpty') allowEmpty: boolean = true;
-  @Input('buttonClass') buttonClass!: string;
-
-  @Output('onChange') onChangeEvent: EventEmitter<any> = new EventEmitter();
-  @ViewChild('wToggleButton', { read: ElementRef }) viewSelectorEl!: ElementRef;
-
-
-  sizeType: typeof SizeType = SizeType;
-  buttonType: typeof ButtonType = ButtonType;
-
-  onChange: any = () => {};
-  onTouch: any = () => {};
-
-  ngModelValue: any;
-
-  constructor(private renderer: Renderer2){}
-
-  ngOnInit(): void {
-  }
-
-  writeValue(value: any): void {
-    this.ngModelValue = value;
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouch = fn;
-  }
-  
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  onButtonChanged(){
-    this.onChange(this.ngModelValue);
-    this.onTouch();
-
-    this.onChangeEvent.emit(this.ngModelValue);
-  }
-
-  onButtonChangedForm(value: any){
-    this.onChangeEvent.emit(value.checked);
-  }
-
-  getSizeName(value: number): string {
-    return SizeType[value];
-  }
-
-  getButtonTypeName(value: number): string{
-    return ButtonType[value];
-  }
-
-  isEmpty(label: string){
-    if(label == '' || label == undefined || label == null){
-      return true;
-    }
-    return false;
-  }
-
-  hasOnlyIcon(icon: string, label: string){
-    if(!this.isEmpty(icon) && this.isEmpty(label)){
-      return true;
-    }
-    return false;
-  }
-}

package/src/lib/card/w-card/w-card.component.html

@@ -1,75 +0,0 @@
-@if(imagePosition === 'top') {
-    <p-card class="w-card-top-image"
-            [header]="header"
-            [subheader]="subheader"
-            [style]="{ width: width, cursor: 'pointer' }"
-            (click)="onCardClick()">
-        <ng-template pTemplate="header">
-            <div class="w-card-image-container">
-                @if (image && isPath(image)){
-                    <img class="w-full w-card-image" [src]="image"/>
-                }@else {
-                    <div class="w-full" style="position: relative;">
-                        <img class="w-full h-full w-card-image" [src]="'assets/images/analytics-background.png'">
-                        <span [class]="'w-icon-card-image w-icon '+defaultImageIcon"></span>
-                    </div>
-                }
-                @if(icon) {
-                    <div class="w-card-image-icon">
-                        <w-icons [name]="icon"
-                                 [color]="iconColor"
-                                 [height]="15"
-                                 [width]="15">
-                        </w-icons>
-                    </div>
-                }
-            </div>
-        </ng-template>
-        <ng-content select=".content"></ng-content>
-        <ng-template pTemplate="footer">
-            <div (click)="$event.stopPropagation()"
-                 (keydown)="$event.stopPropagation()">
-                <ng-content></ng-content>
-            </div>
-        </ng-template>
-    </p-card>
-} @else {
-    <div class="inline-flex">
-        <div class="flex w-card-left-image-container">
-            @if (image && isPath(image)){
-                <img class="w-card-left-image" [src]="image" (click)="onCardClick()"/>
-            }@else {
-                <div class="w-full" style="position: relative;">
-                    <img class="w-full h-full w-card-left-image" [src]="'assets/images/analytics-background.png'">
-                    <span [class]="'w-icon-card-image w-icon '+defaultImageIcon"></span>
-                </div>
-            }
-
-            @if(icon) {
-                <div class="w-card-image-icon w-card-left-image-icon">
-                    <w-icons [name]="icon"
-                             [color]="iconColor"
-                             [height]="15"
-                             [width]="15">
-                    </w-icons>
-                </div>
-            }
-        </div>
-        <div class="flex">
-            <p-card class="flex w-card-left-image-card"
-                    [header]="header"
-                    [subheader]="subheader"
-                    [style]="{ width: width, cursor: 'pointer' }"
-                    (click)="onCardClick()">
-                <ng-content select=".left-image-content"></ng-content>
-                <ng-template pTemplate="footer">
-                    <div class="w-card-left-image-footer"
-                         (click)="$event.stopPropagation()"
-                         (keydown)="$event.stopPropagation()">
-                        <ng-content select=".left-image-card-footer"></ng-content>
-                    </div>
-                </ng-template>
-            </p-card>
-        </div>
-    </div>
-}