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

package/src/lib/tables/w-table/w-table.component.scss

@@ -1,507 +0,0 @@
-@import '../../../styles/_variables.scss';
-
-.table-container {
-    padding: $spacingM $spacingL $spacingL $spacingL;
-    background-color: $white;
-    border-radius: $defaultBorderRadius;
-    box-shadow: $defaultShadow;
-}
-
-:host ::ng-deep .w-table-styles .p-datatable .p-datatable-header {
-    background: $white;
-    border-width: $spacingZero;
-    padding: $spacingZero $spacingZero $spacingM $spacingZero !important;
-    font-weight: map-get($caption, font-weight);
-}
-
-:host ::ng-deep .p-datatable-thead > tr > th.p-datatable-column-sorted {
-    background: $white;
-    color: $textMainColor;
-}
-
-.w-table-selectable-row {
-    cursor: pointer;
-}
-
-.showing-per-page {
-    color: $textSofterColor;
-    font-weight: map-get($caption, font-weight); 
-
-    .p-inputnumber-input {
-        justify-items: center;
-    }
-}
-
-::ng-deep .row-hover:hover {
-    background-color: $textSoftestColor !important;
-}
-
-::ng-deep .w-table-styles .p-paginator-bottom > span:first-child {
-    margin-right: auto;
-}
-
-::ng-deep .w-table-styles .p-paginator .p-paginator-pages .p-paginator-page {
-    color: $textSofterColor;
-    border-radius: $defaultBorderRadius;
-    height: $spacingXXXL;
-    width: $spacingXXXL;
-    max-width: $spacingXXXL;
-    min-width: $spacingXXXL;
-    font-size: inherit !important;
-}
-
-::ng-deep .w-table-styles .p-paginator {
-	border-width: 0;
-    padding: $spacingM $spacingL $spacingZero $spacingL;
-}
-
-::ng-deep .w-table-styles .p-paginator .p-paginator-pages .p-paginator-page-selected {
-    background-color: $primaryLightColor;
-    color: $black846;
-    height: $spacingXXXL;
-    width: $spacingXXXL;
-    max-width: $spacingXXXL;
-    min-width: $spacingXXXL;
-}
-
-::ng-deep .w-table-styles .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
-    background: $paginatorBackgroundHoverColor; //ToDo actualizar por variable paginator-background-footer
-    border-color: transparent;
-    color: $black846;
-    height: $spacingXXXL;
-    width: $spacingXXXL;
-    max-width: $spacingXXXL;
-    min-width: $spacingXXXL;
-}
-
-::ng-deep .w-table-styles .p-paginator .p-paginator-current {
-    color: $textSofterColor;
-    padding: 0px;
-    margin-right: auto;
-    align-content: center;
-}
-
-::ng-deep .w-table-styles .p-datatable .p-sortable-column .p-sortable-column-icon {
-    color: $textMainColor;
-    margin-left: 0.5rem;
-    @include table-global-icon();
-}
-
-
-::ng-deep .w-table-styles .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon {
-	color: $black800;
-}
-
-::ng-deep .w-table-styles .p-datatable .p-sortable-column:focus {
-	box-shadow: inset 0 0 0 0;
-	outline: 0 none;
-}
-
-::ng-deep .w-table-styles .p-datatable-table-container .p-datatable-table .p-datatable-thead > tr > th{
-    @extend .w-table-th-text;
-    background: $white;
-}
-
-:host ::ng-deep .w-table-styles .p-datatable-table-container .p-datatable-table .p-datatable-thead > tr > th:hover {
-	color: $black800;
-	background: $white;
-}
-
-::ng-deep .w-table-styles .p-paginator {
-    justify-content: normal !important;
-}
-
-::ng-deep .w-table-styles .p-datatable .p-paginator-bottom > button {
-    color: $textSofterColor;
-}
-
-:host ::ng-deep .p-datatable .p-datatable-header {
-    background: $white;
-    border-width: $spacingZero;
-    padding: $spacingZero $spacingZero $spacingM $spacingZero !important;
-    font-weight: map-get($caption, font-weight);
-}
-
-::ng-deep .w-table-styles p-inputnumber, .p-inputnumber {
-    height: $spacingXXXL;
-}
-
-::ng-deep .w-table-styles .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {
-    width: $spacingXXXL;
-}
-
-::ng-deep .w-table-styles .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {
-    width: $spacingXXXL;
-}
-
-:host ::ng-deep .w-table-styles .p-inputnumber-horizontal .p-inputnumber-increment-button {
-    border-radius: $defaultBorderRadius;
-    border-top-left-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
-    border-top-right-radius: $defaultBorderRadius;
-    border-bottom-right-radius: $defaultBorderRadius;
-}
-
-:host ::ng-deep .w-table-styles .p-inputnumber-horizontal .p-inputnumber-decrement-button {
-    border-radius: $defaultBorderRadius;
-    border-top-right-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-    border-top-left-radius: $defaultBorderRadius;
-    border-bottom-left-radius: $defaultBorderRadius;
-}
-
-::ng-deep .w-table-styles .p-inputnumber-buttons-horizontal .p-inputnumber-input {
-    border-width: $defaultBorderWidth 0px $defaultBorderWidth 0px;
-    border-color: $black200;
-    color: $black200;
-    text-align: center;
-}
-
-:host ::ng-deep .p-inputnumber-horizontal .p-inputnumber-button {
-    color: $black200;
-    border-width: $defaultBorderWidth;
-    border-color: $black200;
-    background-color: transparent;
-}
-
-::ng-deep .p-datatable .p-datatable-tbody > tr > td {
-    @extend .w-table-td-text;
-	border: $defaultBorderWidth solid #e2e8f0;
-	border-width: $tableBorderWidth;
-	@extend .w-table-height;
-}
-
-:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(2n+1) {
-    background: $white;
-}
-
-:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(2n) {
-    background: $black50;
-    border-color: $black200;
-}
-
-::ng-deep .w-table-no-buttons {
-    .p-datatable-table-container {
-        .p-datatable-table {
-            .p-datatable-tbody > tr > td {
-                @extend .w-table-no-buttons-height;
-            }
-        }
-    }
-}
-
-::ng-deep .w-table-styles .p-datatable .p-datatable-tbody > tr > td:empty {
-    padding-top: $spacingL + 2px !important;
-    padding-bottom: calc($spacingL + 2px - $tableBorder) !important;
-}
-
-::ng-deep .w-table-styles{
-    .p-checkbox {
-        height: 16px;
-        width: 16px;
-        border-width: $defaultBorderWidth;
-
-        .p-checkbox-box {
-            height: 16px;
-            width: 16px;
-            border-radius: $checkboxBorderRadius;
-            border: $defaultBorderWidth solid $black300;
-
-            .p-checkbox-icon{
-                @extend .w-control-button-small-icon-text;
-            }
-
-            &.p-highlight {
-                border-color: $secondary400;
-                background: $secondary400;
-            }
-        }
-
-        &:not(.p-checkbox-disabled) {
-            .p-checkbox-box {
-                &:hover {
-                    background-color: $black300;
-                    border: $defaultBorderWidth solid $black300;
-                }
-
-                &.p-focus {
-                    background-color: $secondary400;
-                    @extend .focusedInput;
-                    border: $defaultBorderWidth solid $secondary50;
-                }
-
-                &:not(.p-highlight).p-focus {
-                    background-color: $black300;
-                    border: $defaultBorderWidth solid $black300;
-                }
-
-                &.p-highlight:hover {
-                    border-color: $secondary400;
-                    background: $secondary400;
-                }
-            }
-        }
-    }
-}
-
-::ng-deep .w-table-styles{
-    .p-radiobutton {
-        width: 16px;
-        height: 16px;
-        border-width: $defaultBorderWidth;
-
-        .p-radiobutton-box {
-            width: 16px;
-            height: 16px; 
-            background-color: #ffffff;
-            border-radius: $checkboxBorderRadius;
-            border: $defaultBorderWidth solid $black300;
-        }
-
-        &.p-radiobutton-checked {
-            .p-radiobutton-box {
-                .p-radiobutton-icon { 
-                    background: none;
-                    @extend .w-control-button-small-icon-text;
-                    color: $textInverseColor;
-
-                    &::before {
-                        font-family: "PrimeIcons";
-                        content: "\e909";
-                    }
-                }
-            }
-
-            &:not(.p-disabled){
-                .p-radiobutton-box {
-                    background-color: $primary700; 
-                }
-
-                &:has(.p-radiobutton-input:hover) .p-radiobutton-box { 
-                    background-color: $primary700; 
-                    border-color: $primary700;
-                    border-radius: $checkboxBorderRadius;
-
-                    .p-radiobutton-icon { 
-                        background: none;
-                        @extend .w-control-button-small-icon-text;
-                        color: $textInverseColor;
-
-                        &::before {
-                            font-family: "PrimeIcons";
-                            content: "\e909";
-                        }
-                    }
-                }
-            }
-
-            &.p-disabled .p-radiobutton-box .p-radiobutton-icon {
-                color: $textSoftColor;
-            }
-        }
-    }
-}
-
-:host ::ng-deep .w-table-styles .p-inputtext {
-    color: $black200;
-    border-color: $black200;
-}
-
-::ng-deep .w-table-styles .p-inputtext:enabled:focus {
-	outline: 0 none;
-	outline-offset: 0;
-	box-shadow: 0 0 0 0 $black;
-    background-color: $black100;
-	border-color: $black100;
-    color: $black;
-}
-
-::ng-deep .w-table-styles .p-inputtext:enabled:hover {
-    border-color: $black200;
-}
-
-::ng-deep .w-table-styles .p-button-outlined:not(:disabled):hover {
-    color: $black200;
-    border: $defaultBorderWidth solid;
-    background-color: $black100;
-}
-
-::ng-deep .w-table-styles .p-button-outlined:not(:disabled):hover > .p-button-icon {
-    color: $textMainColor;
-}
-
-::ng-deep .w-table-styles .darkBlue1.p-button.p-button-icon-only > .p-button-icon {
-    color: $darkBlue1 !important;
-}
-
-::ng-deep .w-table-styles .darkBlue2.p-button.p-button-icon-only > .p-button-icon {
-    color: $darkBlue2 !important;
-}
-
-::ng-deep .w-table-styles .darkBlue3.p-button.p-button-icon-only > .p-button-icon {
-    color: $darkBlue3 !important;
-}
-
-::ng-deep .w-table-styles .purple1.p-button.p-button-icon-only > .p-button-icon {
-    color: $purple1 !important;
-}
-
-::ng-deep .w-table-styles .purple2.p-button.p-button-icon-only > .p-button-icon {
-    color: $purple2 !important;
-}
-
-::ng-deep .w-table-styles .purple3.p-button.p-button-icon-only > .p-button-icon {
-    color: $purple3 !important;
-}
-
-::ng-deep .w-table-styles .pink1.p-button.p-button-icon-only > .p-button-icon {
-    color: $pink1 !important;
-}
-
-::ng-deep .w-table-styles .pink2.p-button.p-button-icon-only > .p-button-icon {
-    color: $pink2 !important;
-}
-
-::ng-deep .w-table-styles .pink3.p-button.p-button-icon-only > .p-button-icon {
-    color: $pink3 !important;
-}
-
-::ng-deep .w-table-styles .green1.p-button.p-button-icon-only > .p-button-icon {
-    color: $green1 !important;
-}
-
-::ng-deep .w-table-styles .green2.p-button.p-button-icon-only > .p-button-icon {
-    color: $green2 !important;
-}
-
-::ng-deep .w-table-styles .green3.p-button.p-button-icon-only > .p-button-icon {
-    color: $green3 !important;
-}
-
-::ng-deep .w-table-styles .error1.p-button.p-button-icon-only > .p-button-icon {
-    color: $iconDeleteColor !important;
-}
-
-::ng-deep .w-table-styles .error2.p-button.p-button-icon-only > .p-button-icon {
-    color: $statusError2 !important;
-}
-
-::ng-deep .w-table-styles .p-button.p-button-outlined > .pi {
-	font-size: 0.7rem;
-    font-weight: bolder;
-}
-
-.element-image-width {
-    max-height: 32px;
-    width: auto;
-    vertical-align: middle;
-}
-
-.height-input {
-    height: $spacingXXXL;
-}
-
-.w-input {
-    @extend .w-input-small-placeholder-text;
-    border-radius: $defaultBorderRadius;
-    border-width: $defaultBorderWidth;
-    border-color: $black200;
-    gap: 16px;
-}
-::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-    color: $textSoftColor;
-}
-::-moz-placeholder { /* Firefox 19+ */
-    color: $textSoftColor;
-}
-:-ms-input-placeholder { /* IE 10+ */
-    color: $textSoftColor;
-}
-:-moz-placeholder { /* Firefox 18- */
-    color: $textSoftColor;
-}
-.w-input:hover {//.hoveredInput
-    border-radius: $defaultBorderRadius !important;
-    border: 1px solid rgba($secondaryColor, 0.5) !important;
-}
-.w-input:focus {//.focusedInput
-    border: 1px solid rgba($infoMainColor, 0.25) !important;
-    box-shadow: 0px 0px 10px 0px rgba($secondaryColor, 0.25) !important;
-    background-color: transparent !important;
-}
-.pi-search {
-	left: calc($spacingS - $defaultBorderWidth);
-	color: $textSoftColor !important;
-}
-
-.image-header{
-    text-align: center !important;
-}
-
-::ng-deep .w-table-styles .p-avatar img {
-	width: $spacingXXXL !important;
-	height: $spacingXXXL !important;
-}
-
-:host ::ng-deep .w-table-styles .p-avatar {
-    border: 1px solid $black200;
-}
-
-::ng-deep .p-datatable .p-datatable-thead > tr > th {
-    padding: $spacingM $spacingXS;
-    border: $defaultBorderWidth solid $black200;
-    border-width: $spacingZero $spacingZero $defaultBorderWidth $spacingZero;
-    font-weight: 700;
-    color: $black;
-    background: $white;
-    transition: box-shadow 0.2s;
-  }
-
-::ng-deep .p-datatable {
-    .p-datatable-tbody {
-        > tr {
-            color: $textSofterColor;
-        }
-    }
-}
-
-::ng-deep .p-sortable-column {
-    &:not(.p-highlight):hover {
-        .p-sortable-column-icon {
-            color: $black800;
-
-        }
-    }
-}
-
-::ng-deep .p-datatable .p-datatable-tbody > tr.w-table-lazy-empty-message-padding > td {
-	padding-left: $spacingS !important;
-	padding-right: $spacingS !important;
-    padding-top: $spacingM !important;
-    padding-bottom: calc($spacingM - $tableBorder) !important;
-}
-
-::ng-deep .w-table-styles .p-disabled, .p-component:disabled {
-	opacity: 0.3;
-    box-shadow: none !important;
-}
-
-.w-table-buttons {
-    gap: $tableButtonGap;
-}
-
-::ng-deep .p-confirmpopup {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-    
-    .p-confirmpopup-content {
-        padding: $spacingM !important;
-    } 
-
-    .p-confirmpopup-footer {
-        padding: $spacingXS $spacingM !important;
-    }
-}
-
-::ng-deep .w-table-styles .p-button-text:not(:disabled):hover {
-  background: transparent !important;
-}

package/src/lib/tables/w-table/w-table.component.spec.ts

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