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

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

@@ -1,176 +0,0 @@
-<p-tabs [value]="activeIndex" class="w-button-tabview" (valueChange)="activeIndexChange($event)" [scrollable]="true">
-    <p-tablist>
-        @if (headers.length > 0) {
-            <p-tab [value]="0" [disabled]="disabledTabs[0]">
-                @if(icons && icons[0]){
-                    <i [class]="'pi '+icons[0]"></i>
-                }
-                @if(headers[0]){
-                    <span class="p-tabview-title">{{headers[0]}}</span>
-                }
-            </p-tab>
-        }
-        @if (headers.length > 1) {
-            <p-tab [value]="1" [disabled]="disabledTabs[1]">
-                @if(icons && icons[1]){
-                    <i [class]="'pi '+icons[1]"></i>
-                }
-                @if(headers[1]){
-                    <span class="p-tabview-title">{{headers[1]}}</span>
-                }
-            </p-tab>
-        }
-        @if (headers.length > 2) {
-            <p-tab [value]="2" [disabled]="disabledTabs[2]">
-                @if(icons && icons[2]){
-                    <i [class]="'pi '+icons[2]"></i>
-                }
-                @if(headers[2]){
-                    <span class="p-tabview-title">{{headers[2]}}</span>
-                }
-            </p-tab>
-        }
-        @if (headers.length > 3) {
-            <p-tab [value]="3" [disabled]="disabledTabs[3]">
-                @if(icons && icons[3]){
-                    <i [class]="'pi '+icons[3]"></i>
-                }
-                @if(headers[3]){
-                    <span class="p-tabview-title">{{headers[3]}}</span>
-                }
-            </p-tab>
-        }
-        @if (headers.length > 4) {
-            <p-tab [value]="4" [disabled]="disabledTabs[4]">
-                @if(icons && icons[4]){
-                    <i [class]="'pi '+icons[4]"></i>
-                }
-                @if(headers[4]){
-                    <span class="p-tabview-title">{{headers[4]}}</span>
-                }
-            </p-tab>
-        }
-        @if (headers.length > 5) {
-            <p-tab [value]="5" [disabled]="disabledTabs[5]">
-                @if(icons && icons[5]){
-                    <i [class]="'pi '+icons[5]"></i>
-                }
-                @if(headers[5]){
-                    <span class="p-tabview-title">{{headers[5]}}</span>
-                }
-            </p-tab>
-        }
-        @if (headers.length > 6) {
-            <p-tab [value]="6" [disabled]="disabledTabs[6]">
-                @if(icons && icons[6]){
-                    <i [class]="'pi '+icons[6]"></i>
-                }
-                @if(headers[6]){
-                    <span class="p-tabview-title">{{headers[6]}}</span>
-                }
-            </p-tab>
-        }
-        @if (headers.length > 7) {
-            <p-tab [value]="7" [disabled]="disabledTabs[7]">
-                @if(icons && icons[7]){
-                    <i [class]="'pi '+icons[7]"></i>
-                }
-                @if(headers[7]){
-                    <span class="p-tabview-title">{{headers[7]}}</span>
-                }
-            </p-tab>
-        }
-        @if (headers.length > 8) {
-            <p-tab [value]="8" [disabled]="disabledTabs[8]">
-                @if(icons && icons[8]){
-                    <i [class]="'pi '+icons[8]"></i>
-                }
-                @if(headers[8]){
-                    <span class="p-tabview-title">{{headers[8]}}</span>
-                }
-            </p-tab>
-        }
-        @if (headers.length > 9) {
-            <p-tab [value]="9" [disabled]="disabledTabs[9]">
-                @if(icons && icons[9]){
-                    <i [class]="'pi '+icons[9]"></i>
-                }
-                @if(headers[9]){
-                    <span class="p-tabview-title">{{headers[9]}}</span>
-                }
-            </p-tab>
-        }
-    </p-tablist>
-    <p-tabpanels>
-    @if (headers.length > 0 ) {
-      <p-tabpanel [value]="0">
-        @if (activeIndex == 0) {
-          <ng-content select=".panel-1"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 1) {
-      <p-tabpanel [value]="1">
-        @if (activeIndex == 1) {
-          <ng-content select=".panel-2"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 2 ) {
-      <p-tabpanel [value]="2">
-        @if (activeIndex == 2) {
-          <ng-content select=".panel-3"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 3) {
-      <p-tabpanel [value]="3">
-        @if (activeIndex == 3) {
-          <ng-content select=".panel-4"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 4) {
-      <p-tabpanel [value]="4">
-        @if (activeIndex == 4) {
-          <ng-content select=".panel-5"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 5) {
-      <p-tabpanel [value]="5">
-        @if (activeIndex == 5) {
-          <ng-content select=".panel-6"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 6) {
-      <p-tabpanel [value]="6">
-        @if (activeIndex == 6) {
-          <ng-content select=".panel-7"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 7) {
-      <p-tabpanel [value]="7">
-        @if (activeIndex == 7) {
-          <ng-content select=".panel-8"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 8) {
-      <p-tabpanel [value]="8">
-        @if (activeIndex == 8) {
-          <ng-content select=".panel-9"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 9) {
-      <p-tabpanel [value]="9">
-        @if (activeIndex == 9) {
-          <ng-content select=".panel-10"></ng-content>
-        }
-      </p-tabpanel>
-    }
-  </p-tabpanels>
-</p-tabs>

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

@@ -1,37 +0,0 @@
-@import '../../../styles/_variables.scss';
-
-::ng-deep .w-button-tabview.p-tabs {
-    gap: $spacingL;
-    
-    .p-tablist {
-        .p-tablist-content {
-            .p-tablist-tab-list {
-                gap: $spacingS; 
-                border: none;
-
-                .p-tab {
-                    gap: $spacingXS; 
-                    border: 1px solid $textSofterColor !important;
-                    border-radius: $spacingXS;
-                    font-size: 12px !important;
-                    font-weight: 700 !important;
-                    box-shadow: $buttonShadow;
-                    transition: 0.2s;
-                    height: $spacingXXXL;
-                    padding: $spacingZero $spacingS !important; 
-                    display: flex;
-                    align-items: center;
-
-                    &.p-tab-active {
-                        background-color: $textMainColor;
-                        color: $primaryBgColor;
-                    }
-                }
-
-                .p-tablist-active-bar {
-                    visibility: hidden !important;
-                }
-            }
-        }
-    }
-}

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

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

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

@@ -1,28 +0,0 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
-
-@Component({
-    selector: 'w-button-tabview',
-    templateUrl: './w-button-tabview.component.html',
-    styleUrls: ['./w-button-tabview.component.scss'],
-    standalone: false, 
-    encapsulation: ViewEncapsulation.Emulated
-})
-export class WButtonTabviewComponent implements OnInit{
-  
-  @Input('headers') headers: string[] = ['Header 1', 'Header 2', 'Header 3']; 
-  @Input('disabledTabs') disabledTabs: boolean[] = [false, false, false];
-  @Input('icons') icons!: string[];
-  @Input('activeIndex') activeIndex: number = 0;
-  @Output('outActiveIndex') outActiveIndex: EventEmitter<number> = new EventEmitter<number>();
-  
-  constructor(private cdref: ChangeDetectorRef){}
-
-  ngOnInit(): void {
-    this.cdref.detectChanges();
-  }
-
-  activeIndexChange(index: any) {
-    this.activeIndex = index;
-    this.outActiveIndex.emit(index)
-  }
-}

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

@@ -1,228 +0,0 @@
-<!-- ToDo revisar tabs con iconos -->
-<p-tabs [value]="activeIndex" [class]="type == 'regular' ? 'w-tabview-regular' : 'w-tabview-secondary'"
-  (valueChange)="activeIndexChange($event)" [scrollable]="isScrollable" [ngClass]="{'title-tabActive': titleTabActive}" [scrollable]="true" [lazy]="lazy">
-  <p-tablist>
-    @if (headers.length > 0) {
-      <p-tab [value]="0" [disabled]="disabledTabs[0]" [ngClass]="{'flex items-center !gap-2 text-inherit': (icons && icons[0])}">
-        @if (icons && icons[0]) {
-          <i [class]="'pi '+icons[0]"></i>
-        }
-        <div>
-          @if (headers[0]) {
-            <span class="p-tabview-title">{{headers[0]}}</span>
-          }
-          @if (requiredTabs[0] && !disabledTabs[0]) {
-            <span class="p-tabview-asterisk" [ngClass]="{'not-validated': applyValidationStyle && !validatedTabs[0]}">*</span>
-          }
-        </div>
-      </p-tab>
-    }
-    @if (headers.length > 1) {
-      <p-tab [value]="1" [disabled]="disabledTabs[1]" [ngClass]="{'flex items-center !gap-2 text-inherit': (icons && icons[0])}">
-        @if (icons && icons[1]) {
-          <i [class]="'pi '+icons[1]"></i>
-        }
-        <div>
-          @if (headers[1]) {
-            <span class="p-tabview-title">{{headers[1]}}</span>
-          }
-          @if (requiredTabs[1] && !disabledTabs[1]) {
-            <span class="p-tabview-asterisk" [ngClass]="{'not-validated': applyValidationStyle && !validatedTabs[1]}">*</span>
-          }
-        </div>
-      </p-tab>
-    }
-    @if (headers.length > 2 ) {
-      <p-tab [value]="2" [disabled]="disabledTabs[2]" [ngClass]="{'flex items-center !gap-2 text-inherit': (icons && icons[0])}">
-        @if (icons && icons[2]) {
-          <i [class]="'pi '+icons[2]"></i>
-        }
-        <div>
-          @if (headers[2]) {
-            <span class="p-tabview-title">{{headers[2]}}</span>
-          }
-          @if (requiredTabs[2] && !disabledTabs[2]) {
-            <span class="p-tabview-asterisk" [ngClass]="{'not-validated': applyValidationStyle && !validatedTabs[2]}">*</span>
-          }
-        </div>
-      </p-tab>
-    }
-    @if (headers.length > 3) {
-      <p-tab [value]="3" [disabled]="disabledTabs[3]" [ngClass]="{'flex items-center !gap-2 text-inherit': (icons && icons[0])}">
-        @if (icons && icons[3]) {
-          <i [class]="'pi '+icons[3]"></i>
-        }
-        <div>
-          @if (headers[3]) {
-            <span class="p-tabview-title">{{headers[3]}}</span>
-          }
-          @if (requiredTabs[3] && !disabledTabs[3]) {
-            <span class="p-tabview-asterisk" [ngClass]="{'not-validated': applyValidationStyle && !validatedTabs[3]}">*</span>
-          }
-        </div>
-      </p-tab>
-    }
-    @if (headers.length > 4) {
-      <p-tab [value]="4" [disabled]="disabledTabs[4]" [ngClass]="{'flex items-center !gap-2 text-inherit': (icons && icons[0])}">
-        @if (icons && icons[4]) {
-          <i [class]="'pi '+icons[4]"></i>
-        }
-        <div>
-          @if (headers[4]) {
-            <span class="p-tabview-title">{{headers[4]}}</span>
-          }
-          @if (requiredTabs[4] && !disabledTabs[4]) {
-            <span class="p-tabview-asterisk" [ngClass]="{'not-validated': applyValidationStyle && !validatedTabs[4]}">*</span>
-          }
-        </div>
-      </p-tab>
-    }
-    @if (headers.length > 5) {
-      <p-tab [value]="5" [disabled]="disabledTabs[5]" [ngClass]="{'flex items-center !gap-2 text-inherit': (icons && icons[0])}">
-        @if (icons && icons[5]) {
-          <i [class]="'pi '+icons[5]"></i>
-        }
-        <div>
-          @if (headers[5]) {
-            <span class="p-tabview-title">{{headers[5]}}</span>
-          }
-          @if (requiredTabs[5] && !disabledTabs[5]) {
-            <span class="p-tabview-asterisk" [ngClass]="{'not-validated': applyValidationStyle && !validatedTabs[5]}">*</span>
-          }
-        </div>
-      </p-tab>
-    }
-    @if (headers.length > 6) {
-      <p-tab [value]="6" [disabled]="disabledTabs[6]" [ngClass]="{'flex items-center !gap-2 text-inherit': (icons && icons[0])}">
-        @if (icons && icons[6]) {
-          <i [class]="'pi '+icons[6]"></i>
-        }
-        <div>
-          @if (headers[6]) {
-            <span class="p-tabview-title">{{headers[6]}}</span>
-          }
-          @if (requiredTabs[6] && !disabledTabs[6]) {
-            <span class="p-tabview-asterisk" [ngClass]="{'not-validated': applyValidationStyle && !validatedTabs[6]}">*</span>
-          }
-        </div>
-      </p-tab>
-    }
-    @if (headers.length > 7) {
-      <p-tab [value]="7" [disabled]="disabledTabs[7]" [ngClass]="{'flex items-center !gap-2 text-inherit': (icons && icons[0])}">
-        @if (icons && icons[7]) {
-          <i [class]="'pi '+icons[7]"></i>
-        }
-        <div>
-          @if (headers[7]) {
-            <span class="p-tabview-title">{{headers[7]}}</span>
-          }
-          @if (requiredTabs[7] && !disabledTabs[7]) {
-            <span class="p-tabview-asterisk" [ngClass]="{'not-validated': applyValidationStyle && !validatedTabs[7]}">*</span>
-          }
-        </div>
-      </p-tab>
-    }
-    @if (headers.length > 8) {
-      <p-tab [value]="8" [disabled]="disabledTabs[8]" [ngClass]="{'flex items-center !gap-2 text-inherit': (icons && icons[0])}">
-        @if (icons && icons[8]) {
-          <i [class]="'pi '+icons[8]"></i>
-        }
-        <div>
-          @if (headers[8]) {
-            <span class="p-tabview-title">{{headers[8]}}</span>
-          }
-          @if (requiredTabs[8] && !disabledTabs[8]) {
-            <span class="p-tabview-asterisk" [ngClass]="{'not-validated': applyValidationStyle && !validatedTabs[8]}">*</span>
-          }
-        </div>
-      </p-tab>
-    }
-    @if (headers.length > 9) {
-      <p-tab [value]="9" [disabled]="disabledTabs[9]" [ngClass]="{'flex items-center !gap-2 text-inherit': (icons && icons[0])}">
-        @if (icons && icons[9]) {
-          <i [class]="'pi '+icons[9]"></i>
-        }
-        <div>
-          @if (headers[9]) {
-            <span class="p-tabview-title">{{headers[9]}}</span>
-          }
-          @if (requiredTabs[9] && !disabledTabs[9]) {
-            <span class="p-tabview-asterisk" [ngClass]="{'not-validated': applyValidationStyle && !validatedTabs[9]}">*</span>
-          }
-        </div>
-      </p-tab>
-    }
-  </p-tablist>
-  <p-tabpanels>
-    @if (headers.length > 0 ) {
-      <p-tabpanel [value]="0">
-        @if (keepTabsVisible == true ? true : activeIndex == 0) {
-          <ng-content select=".panel-1"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 1) {
-      <p-tabpanel [value]="1">
-        @if (keepTabsVisible == true ? true : activeIndex == 1) {
-          <ng-content select=".panel-2"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 2 ) {
-      <p-tabpanel [value]="2">
-        @if (keepTabsVisible == true ? true : activeIndex == 2) {
-          <ng-content select=".panel-3"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 3) {
-      <p-tabpanel [value]="3">
-        @if (keepTabsVisible == true ? true : activeIndex == 3) {
-          <ng-content select=".panel-4"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 4) {
-      <p-tabpanel [value]="4">
-        @if (keepTabsVisible == true ? true : activeIndex == 4) {
-          <ng-content select=".panel-5"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 5) {
-      <p-tabpanel [value]="5">
-        @if (keepTabsVisible == true ? true : activeIndex == 5) {
-          <ng-content select=".panel-6"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 6) {
-      <p-tabpanel [value]="6">
-        @if (keepTabsVisible == true ? true : activeIndex == 6) {
-          <ng-content select=".panel-7"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 7) {
-      <p-tabpanel [value]="7">
-        @if (keepTabsVisible == true ? true : activeIndex == 7) {
-          <ng-content select=".panel-8"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 8) {
-      <p-tabpanel [value]="8">
-        @if (keepTabsVisible == true ? true : activeIndex == 8) {
-          <ng-content select=".panel-9"></ng-content>
-        }
-      </p-tabpanel>
-    }
-    @if (headers.length > 9) {
-      <p-tabpanel [value]="9">
-        @if (keepTabsVisible == true ? true : activeIndex == 9) {
-          <ng-content select=".panel-10"></ng-content>
-        }
-      </p-tabpanel>
-    }
-  </p-tabpanels>
-</p-tabs>

package/src/lib/tabview/w-tabview/w-tabview.component.scss

@@ -1,85 +0,0 @@
-@import './../../../styles/variables';
-
-:host ::ng-deep .w-tabview-regular.p-tabs, 
-:host ::ng-deep .w-tabview-secondary.p-tabs {
-    .p-tablist {
-        .p-tablist-content {
-            .p-tablist-tab-list {
-                position: inherit;
-                border-width: 0 0 2px 0;
-                border-color: $black200;
-
-                .p-tab { 
-                    @extend .w-tab-text;
-                    font-weight: 400;
-                    padding: $spacingS;
-                    gap: $spacingXS;
-                    background-color: transparent;
-                    border: none;
-
-                    &.p-tab-active {
-                        font-weight: 700;
-                        border: none;
-                    }
-
-                    div {
-                        .p-tabview-asterisk{
-                            &.not-validated{
-                                color: $errorMainColor;
-                            }
-                        }
-                    }
-                }
-
-                .p-tablist-active-bar {
-                    height: 2px; 
-                    background-color: $black; 
-                    bottom: 0;
-                    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1) !important;
-                }
-            }
-        }
-    }
-
-    .p-tabpanels {
-        background: none !important;
-        padding: 0 !important;
-        margin-top: 8px !important;
-    }
-}
-
-::ng-deep .w-tabview-regular.p-tabs {
-    .p-tablist {
-        background: transparent;
-    }
-}
-
-::ng-deep .w-tabview-secondary.p-tabs {
-    .p-tablist {
-        background: $white;
-        box-shadow: $defaultShadow;
-        border-radius: $defaultBorderRadius;
-        
-        .p-tablist-content { 
-            .p-tablist-tab-list {
-                .p-tab { 
-                    color: $textStrongColor;
-                    padding: 0 $spacingXXXL !important;
-                    height: 52px !important;
-                    align-content: center;
-                }
-            }
-        }
-    }
-}
-
-::ng-deep .title-tabActive{
-    &.p-tabs {
-        margin-top: calc($spacingS + $spacingL) !important;
-    }; 
-
-    .p-tabview-title{
-        @extend .heading5;
-        color: $textMainColor;
-    }
-}

package/src/lib/tabview/w-tabview/w-tabview.component.spec.ts

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

package/src/lib/tabview/w-tabview/w-tabview.component.ts

@@ -1,62 +0,0 @@
-import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { Tabs } from 'primeng/tabs';
-
-@Component({
-    selector: 'w-tabview',
-    templateUrl: './w-tabview.component.html',
-    styleUrls: ['./w-tabview.component.scss'],
-    standalone: false
-})
-export class WTabviewComponent implements OnInit{
-
-  @Input('headers') headers: string[] = ['Header 1', 'Header 2', 'Header 3'];
-  @Input('disabledTabs') disabledTabs: boolean[] = [false, false, false];
-  @Input('requiredTabs') requiredTabs: boolean[] = [false, false, false];
-  @Input('validatedTabs') validatedTabs: boolean[] = [false, false, false];
-  @Input('applyValidationStyle') applyValidationStyle: boolean = false;
-  @Input('icons') icons!: string[];
-  @Input('activeIndex') activeIndex: number = 0;
-  @Input('type') type: string = "regular";
-  @Input('titleTabActive') titleTabActive: boolean = false; 
-  @Input('keepTabsVisible') keepTabsVisible: boolean = false; 
-  @Input('lazy') lazy: boolean = true;
-  @Output('outActiveIndex') outActiveIndex: EventEmitter<number> = new EventEmitter<number>();
-  @ViewChild(Tabs) tabView!: Tabs;
-
-  isScrollable: boolean = false;
-
-  constructor(private cdref: ChangeDetectorRef){}
-
-  ngOnInit(): void {
-    this.cdref.detectChanges();
-  }
-
-  ngAfterViewInit(): void {
-    setTimeout(() => {
-      this.checkTabsOverflow();
-    }, 0);
-
-    window.addEventListener('resize', () => {
-      this.checkTabsOverflow();
-    });
-  }
-
-  activeIndexChange(index: any) {
-    this.activeIndex = index;
-    this.outActiveIndex.emit(index)
-  }
-
-  checkTabsOverflow(): void {
-    if (!this.tabView) {
-      return;
-    }
-
-    const container = this.tabView.el.nativeElement.querySelector('.p-tabview-nav');
-
-    if (container) {
-      const isOverflowing = container.scrollWidth > container.clientWidth;
-      this.isScrollable = isOverflowing;
-    }
-  }
-
-}

package/src/lib/theme/theme.component.html

@@ -1 +0,0 @@
-<p>theme works!</p>