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

package/src/lib/misc/w-filter-panel/w-filter-panel.component.scss

@@ -1,486 +0,0 @@
-@import './../../../styles/variables';
-@import 'primeflex/primeflex.scss';
-
-// Estilo de la card que contiene todo
-:host ::ng-deep .w-filter-panel-no-style-card.p-card {
-    background-color: $primaryBgColor;
-    border-radius: $defaultBorderRadius;
-    box-shadow: $defaultShadow;
-
-    .p-card-body {
-        padding: $spacingZero !important; 
-        
-        .p-card-content {
-            padding: $spacingZero !important;
-        }
-    }
-
-    .change-filter-button {
-        padding: 0 !important;
-        height: auto !important;
-        overflow: visible !important;
-
-        .p-button-icon {
-            font-size: 9px !important;
-            transform: translatey(1px) translatex(2px) !important;
-            color: $textSoftColor;
-        }
-
-        >.p-button-label {
-            color: $textSoftColor;
-        }
-
-        &:hover {
-            >.p-button-label {
-                color: $textMainColor;
-            }
-
-            .p-button-icon {
-                color: $textMainColor;
-            }
-        }
-    }
-}
-
-// Estilo de los botones en el panel
-:host ::ng-deep .w-filter-panel-buttons {
-    display: flex;
-    padding: 0 !important;
-    @include styleclass('justify-content-end button-gap align-items-end');
-    margin-top: $spacingS;
-
-    &:has(button) {
-        flex-grow: 10 !important;
-        flex-shrink: 10 !important;
-        max-width: none !important;
-        flex-basis: 100% !important;
-        gap: $spacingS !important;
-
-    }
-
-    & button {
-        gap: $spacingXS;
-        height: $spacingXL !important;
-        padding-left: $spacingS !important;
-        padding-right: $spacingS !important;
-
-        &>.p-button-label {
-            font-size: 11px !important;
-            font-weight: bold !important;
-        }
-
-        &.cancel-filter-button .p-button-icon.p-button-icon-left {
-            font-size: 12px;
-        }
-
-        &.set-filter-button .p-button-icon.p-button-icon-left {
-            font-size: 9px;
-        }
-    }
-}
-
-.w-filter-panel-container-basic,
-.w-filter-panel-container-advanced {
-    padding: $spacingL $spacingXL !important;
-    display: grid;
-    gap: $spacingS;
-}
-
-::ng-deep .query-builder-style ul li:not(.p-select-option, .p-multiselect-option) {
-    border: $borderNone !important;
-    background: transparent !important;
-    padding-left: $spacingZero !important;
-}
-
-/* Basic filter START */
-::ng-deep .w-filter-panel-basic {
-    .q-tree-container {
-        margin: $spacingZero;
-        overflow: visible !important;
-
-        .q-tree {
-            margin: $spacingZero !important;
-            padding: $spacingZero !important;
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: flex-start;
-            gap: $spacingL $spacingXL;
-
-            .q-row {
-                padding: $spacingZero;
-                margin: $spacingZero;
-                width: 0;
-
-                &:not(:nth-child(3n)) {
-                    display: flex !important;
-                    flex-direction: column;
-                    flex-basis: calc(100% * 2 / 12 - 24px * (1 - 2 / 12)) !important;
-                }
-
-                &:nth-child(3n) {
-                    display: flex !important;
-                    flex-direction: column;
-                    flex-basis: calc(100% * 2 / 12 - 24px * (1 - 2 / 12)) !important;
-                }
-                
-                &:has(.w-filter-panel-notifications-event-field) {
-                    display: flex !important;
-                    flex-direction: column;
-                    flex-basis: calc(100% * 4 / 12 - 24px * (1 - 4 / 12)) !important;
-                }
-                &:has(.w-filter-panel-period-select-field) {
-                    display: flex !important;
-                    flex-direction: column;
-                    flex-basis: calc(100% * 6 / 12 - 24px * (1 - 6 / 12)) !important;
-                }
-                
-                &.q-connector {
-                    &::before {
-                        content: none !important;
-                    }
-
-                    &::after {
-                        border-width: $spacingZero !important;
-                    }
-                }
-
-                .w-filter-panel-input-text-label {
-                    font-size: 11px;
-                    font-weight: 600;
-                    color: $textMainColor;
-                    margin-bottom: $spacingXSM;
-                    width: 100%;
-                }
-
-                .w-filter-panel-basic-query-builder-input-width {
-                    flex-basis: calc(100% * 2 / 12 - 24px * (1 - 2 / 12)) !important;
-
-                    &.notifications-event-field-width{
-                        flex-basis: calc(100% * 6 / 12 - 24px * (1 - 6 / 12)) !important;
-                    }
-                    &.period-select-field-width{
-                        flex-basis: calc(100% * 4 / 12 - 24px * (1 - 4 / 12)) !important;
-                    }
-
-                    &.w-tree-field-width {
-                        width: 100%;
-                    }
-
-                    .w-edit-treeselect-field {
-                        width: 100%;
-
-                        .w-edit-treeselect-small .p-treeselect{
-                            margin-top: 0px !important;
-                        }
-                    }
-
-                    &.w-notifications-event-field .w-edit-select-field, 
-                    &.w-filter-panel-period-select-field .w-edit-calendar-styles,
-                    .w-edit-input-text-small.p-inputtext,
-                    .w-edit-input-number-small .p-inputtext,
-                    .w-edit-select-small.p-select, 
-                    .w-edit-treeselect-field .w-edit-treeselect-small.p-treeselect, 
-                    .w-edit-multiselect-small.p-multiselect,
-                    .w-edit-calendar-small .p-inputtext,
-                    .w-edit-toggle-small .p-inputswitch {
-                        width: 100%;
-                        background-color: $primaryBgColor;
-                        height: $spacingXL !important;
-                        font-size: 10.5px !important;
-
-                        &>span {
-                            padding-top: $spacingXXS !important;
-                            padding-left: $spacingXS !important;
-                            width: 50px !important;
-                        }
-
-                        & .pi {
-                            line-height: 14px;
-                        }
-
-                        & .p-dropdown-trigger {
-                            margin-right: $spacingXXS !important;
-                            padding-bottom: 2px;
-                        }
-                    }
-
-                    .w-edit-input-text-small.p-inputtext,
-                    .w-edit-input-number-small,
-                    .p-multiselect {
-                        width: 100%;
-                    }
-
-                    .w-edit-multiselect-small.p-multiselect .p-multiselect-label-container .p-multiselect-label {
-                        height: $spacingXL;
-                    }
-                }
-            }
-        }
-    }
-}
-
-/* Advanced filter START */
-$buttonShadow: 0px 0px 1px 0px rgba ($black, 0.10) inset,
-    1px 1px 5px rgba ($black, 0.06), 1px 1px 1px rgba ($black, 0.08);
-$iconDeleteColor: #fb7c7c;
-
-::ng-deep .w-filter-panel-advanced,
-::ng-deep .w-filter-panel-grouped {
-    div {
-        .q-button-group {
-            width: auto !important;
-            @extend .q-inline-block-display;
-            overflow: visible !important;
-            margin: $spacingXS;
-
-            button {
-                height: $spacingXL !important;
-            }
-
-            &.q-right-align {
-                margin-right: $spacingZero;
-            }
-        }
-
-        .w-filter-panel-switch-group-padding {
-            w-select-button .w-button-small .p-selectbutton .p-button {
-                height: $spacingXL;
-            }
-        }
-
-        .q-inline-block-display {
-            margin: $spacingXS;
-        }
-    }
-
-    .q-tree-container {
-        margin: $spacingZero;
-        padding: $spacingZero;
-        overflow: visible !important;
-
-        .q-tree {
-            .q-ruleset {
-                border: none !important;
-                padding: 6px 0 !important;
-                margin: 12px 0 !important;
-                border-radius: 8px;
-                background-color: rgba($primaryColor, 0.03) !important;
-                box-shadow: 0px 0px 1px 0px rgba($black, 0.1) inset,
-                    0px 4px 8px rgba($primaryColor, 0.05),
-                    0px 1px 3px rgba($primaryColor, 0.1);
-            }
-
-            .q-rule {
-                background: none !important;
-                border: none !important;
-
-                .q-button-group {
-                    @extend .q-inline-block-display;
-                    overflow: visible !important;
-                    margin: $spacingXS;
-
-                    .p-button span:not(*:hover) {
-                        color: $textMainColor;
-                    }
-
-                    .p-button {
-                        box-shadow: $buttonShadow;
-                        height: $spacingXL;
-                        width: $spacingXL;
-                        border: 1px solid $textSoftestColor !important;
-                        border: none !important;
-                        padding: 0;
-
-                        span {
-                            margin-left: $spacingXS !important;
-                        }
-                    }
-
-                    &.q-right-align {
-                        margin-right: $spacingZero;
-                    }
-                }
-            }
-
-            .q-row {
-                padding: $spacingZero;
-                margin-top: $spacingZero;
-
-                .q-inline-block-display {
-                    vertical-align: middle !important;
-                    margin: $spacingXS;
-                }
-
-                .w-filter-panel-advanced-query-builder-input-width {
-                    display: inline-flex;
-                    vertical-align: middle !important;
-                    width: 200px;
-
-                    &.w-no-entity-mode {
-                        width: $spacingZero;
-                        padding: $spacingZero;
-                    }
-
-                    &.w-entity-nullable {
-                        padding: $spacingZero;
-                    }
-
-                    &.q-operators {
-                        width: 100px;
-
-                        &.w-field-nullable {
-                            width: $spacingZero;
-                            padding: $spacingZero;
-                            margin: 0px;
-                        }
-                    }
-
-                    .w-edit-treeselect-field {
-                        width: 100%;
-                        .w-edit-treeselect-small .p-treeselect{
-                            margin-top: 0px !important;
-                        }
-                    }
-
-                    .w-edit-input-text-small.p-inputtext,
-                    .w-edit-input-number-small .p-inputtext,
-                    .w-edit-select-small.p-select,
-                    .w-edit-multiselect-small.p-multiselect, 
-                    .w-address-field-width .w-edit-select-field .w-edit-select-small.p-select, 
-                    .w-address-field-width .w-edit-multiselect-field .w-edit-multiselect-small.p-multiselect, 
-                    .w-edit-treeselect-field .w-edit-treeselect-small.p-treeselect, 
-                    .w-edit-calendar-small.p-datepicker,
-                    .w-edit-toggle-small .p-inputswitch {
-                        width: 100%;
-                        background-color: $primaryBgColor;
-                        height: $spacingXL !important;
-                        font-size: 10.5px !important;
-
-                        &>span {
-                            padding-top: $spacingXXS !important;
-                            padding-left: $spacingXS !important;
-                            width: 50px !important;
-                        }
-
-                        & .pi {
-                            line-height: 14px;
-                        }
-
-                        & .p-dropdown-trigger {
-                            margin-right: $spacingXXS !important;
-                            padding-bottom: 2px;
-                        }
-                    }
-
-                    w-edit-input-text, 
-                    w-edit-input-number, 
-                    w-edit-multiselect, .w-edit-multiselect-field,  
-                    w-edit-select, .w-edit-select-field, 
-                    .w-edit-input-number-small,
-                    .w-edit-select-small,
-                    .p-dropdown,
-                    w-list-field,
-                    w-edit-calendar {
-                        width: 100%;
-                    }
-
-                    .w-edit-calendar-small.p-datepicker .p-datepicker-input {
-                        height: $spacingXL;
-                    }
-
-                    .w-edit-multiselect-small.p-multiselect .p-multiselect-label-container .p-multiselect-label {
-                        height: 22px;
-                    }
-                }
-            }
-
-            .q-button-group {
-                overflow: visible !important;
-
-                button {
-                    box-shadow: $buttonShadow !important;
-                    background: rgba(white, 1) !important;
-                }
-            }
-        }
-    }
-}
-
-.advanced-query-button-group {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    margin-bottom: -46px;
-}
-
-.w-filter-panel-container {
-    position: relative;
-}
-
-::ng-deep .w-filter-panel-blockui.p-blockui {
-    opacity: 0 !important;
-}
-
-/* FIELDS */
-::ng-deep .w-filter-panel-basic-query-builder-input-width {
-    p-dropdown .p-dropdown {
-        width: 100%;
-    }
-
-    input .p-inputtext {
-        width: 100%;
-    }
-}
-
-//Input text and numeric
-::ng-deep .w-edit-input-number-small .p-inputtext {
-    border: $defaultBorderWidth solid $textSoftestColor;
-    border-radius: $defaultBorderRadius;
-    padding: $defaultBorderRadius;
-    width: 100%;
-
-    &:hover {
-        @extend .hoveredInput;
-    }
-
-    &:focus {
-        @extend .focusedInput;
-        border-radius: $defaultBorderRadius;
-    }
-
-    &:disabled {
-        @extend .w-input-disabled;
-    }
-
-    &::-webkit-input-placeholder {
-        color: $textSofterColor !important;
-    }
-
-    &::-moz-placeholder {
-        color: $textSofterColor !important;
-    }
-
-    &:focus:-ms-input-placeholder {
-        color: $textSofterColor !important;
-    }
-
-    &:focus:-moz-placeholder {
-        color: $textSofterColor !important;
-    }
-}
-
-.w-filter-panel-notifications-event-field{
-    display: flex; 
-    gap: $spacingL $spacingXL;
-}
-
-.w-filter-panel-period-select-field {
-    display: flex; 
-    gap: $spacingL $spacingXL;
-}
-
-.w-filter-panel-input-text-label.extra-label {
-    position: absolute; 
-    left: 50%; 
-    margin-left: $spacingS;
-}

package/src/lib/misc/w-filter-panel/w-filter-panel.component.spec.ts

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