ngx-wapp-components 1.8.2 → 1.8.4

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

@@ -0,0 +1,312 @@
+<!-- TODO: Intentar otra vez pasar los componentes a los de w- porque no se alinena y el w-edit-select no va bien en field. 
+  Ahora se conservan los de p-w con estilos. -->
+<div *ngIf="queryConfigReady" class="w-filter-panel-styles">
+    <div *ngIf="!filterPanelObject.allowAdvancedSearch; else baiscAndAdvanced">
+      <div [ngClass]="{ 'w-filter-panel-container-advanced' : isAdvancedSearch, 'w-filter-panel-container-basic' : !isAdvancedSearch }">
+        <ng-container *ngTemplateOutlet="basic"></ng-container>
+        <div class="flex justify-content-end button-gap">
+          <w-button [label]="translationsObject.clearButtonLabel" type="tertiary" size="small" (onClick)="onClearClicked()"></w-button>
+          <w-button [label]="translationsObject.searchButtonLabel" size="small" (onClick)="onSearchClicked()"></w-button>
+        </div>
+      </div>
+    </div>
+
+    <ng-template #baiscAndAdvanced>
+      <div [ngClass]="{ 'w-filter-panel-container-advanced' : isAdvancedSearch, 'w-filter-panel-container-basic' : !isAdvancedSearch }">
+          <div *ngIf="!isAdvancedSearch; else advancedView">
+            <ng-container *ngTemplateOutlet="basic"></ng-container>
+          </div>
+          <ng-template #advancedView>
+            <ng-container *ngTemplateOutlet="advanced"></ng-container>
+          </ng-template>
+
+          <div class="flex justify-content-end button-gap" [class.pt-3]="isAdvancedSearch">
+            <w-button [label]="translationsObject.clearButtonLabel" type="tertiary" size="small" (onClick)="onClearClicked()"></w-button>
+            <w-button [label]="translationsObject.searchButtonLabel" size="small" (onClick)="onSearchClicked()" [loading]="dataIsLoadingSearchButton"></w-button>
+          </div>
+      </div>
+    </ng-template>
+  </div>
+
+  <ng-template #basic>
+    <div *ngIf="filterPanelObject.allowAdvancedSearch" class="flex justify-content-end flex-wrap">
+      <w-button [label]="translationsObject.advancedSearchTabLabel" type="text" (onClick)="updateSearchType()"></w-button>
+    </div>
+    <div class="w-filter-panel-basic query-builder-style fadein animation-duration-500">
+      <query-builder [formControl]='queryCtrl' [config]='basicQueryConfig' [allowRuleset]='filterPanelObject.allowRuleSet' [allowRuleset]="filterPanelObject.allowRuleSet" [persistValueOnFieldChange]='persistValueOnFieldChange'>
+        <ng-container *queryButtonGroup="let ruleset;">
+        </ng-container>
+
+        <ng-container *queryRemoveButton="let rule; let removeRule=removeRule">
+        </ng-container>
+
+        <ng-container *querySwitchGroup="let ruleset; let onChange=onChange">
+        </ng-container>
+
+        <ng-container *queryEntity="let rule; let entities=entities; let onChange=onChange">
+          <p-dropdown [disabled]="true" class=" w-edit-select-small" *ngIf="false" appendTo="body" [options]="entities" [(ngModel)]="rule.entity" optionLabel="name" optionValue="value" (ngModelChange)="onChange($event, rule)"></p-dropdown>
+        </ng-container>
+
+        <ng-container *queryField="let rule; let fields=fields; let onChange=onChange; let getFields = getFields; let value=value; let name=name; let index=index">
+              <span appendTo="body" class="w-4 text-left w-filter-panel-input-text-label" [class.w-filter-panel-boolean-label-width]="fieldIsBoolean(rule.field, getFields(rule.entity))" optionLabel="name" optionValue="value">{{ getQueryFieldName(rule.field, getFields(rule.entity))}}</span>
+        </ng-container>
+
+        <ng-container *queryOperator="let rule; let operators=operators; let onChange=onChange">
+            <span class="query-builder-operator-width">
+              <p-dropdown class=" w-edit-select-small" *ngIf="isAdvancedSearch" appendTo="body" [(ngModel)]="rule.operator" [options]="operators" (ngModelChange)="onChange(rule)"></p-dropdown>
+            </span>
+        </ng-container>
+
+        <ng-container *queryInput="let rule; type: qbDataTypeEnum.Boolean.toString(); let onChange=onChange">
+          <span class="query-builder-operator-width">
+            <w-toggle-button size="small" [(ngModel)]="rule.value" onLabel="True" offLabel="False" (ngModelChange)="onChange()"></w-toggle-button>
+          </span>
+        </ng-container>
+
+        <ng-container *queryInput="let rule; type: qbDataTypeEnum.Datetime.toString(); let onChange=onChange">
+            <span class="w-edit-calendar" style="width: 100%;">
+              <w-edit-calendar appendTo="body" size="small" [showIcon]="false" [(ngModel)]="rule.value" (onChange)="onChange()" [showTime]="true" [showSeconds]="true" [placeholder]="translationsObject.fieldsPlaceholders.datetime" [displayInlineBlock]="true"></w-edit-calendar>
+            </span>
+        </ng-container>
+
+        <ng-container *queryInput="let rule; let field=field; type: qbDataTypeEnum.Decimal.toString(); let onChange=onChange">
+            <span class="w-filter-panel-basic-query-builder-input-width">
+              <p-inputNumber inputStyleClass="flex flex-1" styleClass="flex flex-1" class=" w-filter-panel-basic-query-builder-input-width w-edit-input-number-small w-edit-input-number-small-height" [(ngModel)]="rule.value" inputId="minmax" inputId="minmax" mode="decimal" [minFractionDigits]="2" [maxFractionDigits]="5" [min]="0" [max]="100" (ngModelChange)="onChange()" [placeholder]="translationsObject.fieldsPlaceholders.decimal"> </p-inputNumber>
+            </span>
+        </ng-container>
+
+        <ng-container *queryInput="let rule; let options=options; type: qbDataTypeEnum.List.toString(); let onChange=onChange">
+            <span class="w-filter-panel-basic-query-builder-input-width">
+              <p-dropdown class=" w-edit-select-small" appendTo="body" [options]="options" [(ngModel)]="rule.value" (ngModelChange)="onChange()" optionLabel="name" optionValue="value" [placeholder]="translationsObject.fieldsPlaceholders.list"></p-dropdown>
+            </span>
+        </ng-container>
+
+        <ng-container *queryInput="let rule; let field=field; type: qbDataTypeEnum.Number.toString(); let onChange=onChange">
+              <p-inputNumber [useGrouping]="false" inputStyleClass="flex flex-1" styleClass="flex flex-1" class=" w-filter-panel-basic-query-builder-input-width w-edit-input-number-small w-edit-input-number-small-height" [(ngModel)]="rule.value" inputId="minmax" inputId="minmax" [min]="0" (ngModelChange)="onChange()" [placeholder]="translationsObject.fieldsPlaceholders.number"> </p-inputNumber>
+        </ng-container>
+
+        <ng-container *queryInput="let rule; let field=field; type: qbDataTypeEnum.Text.toString(); let onChange=onChange">
+          <input class=" w-filter-panel-basic-query-builder-input-width w-edit-input-text-small-height w-edit-input-text-small" type="text" pInputText [(ngModel)]="rule.value" (ngModelChange)="onChange()" [placeholder]="translationsObject.fieldsPlaceholders.text"/>
+        </ng-container>
+
+        <ng-container *queryInput="let rule; let options=options; type: qbDataTypeEnum.List.toString(); let onChange=onChange">
+            <span class="w-filter-panel-basic-query-builder-input-width">
+              <p-multiSelect [appendTo]="'body'" [options]="options" [(ngModel)]="rule.value" (ngModelChange)="onChange()" optionLabel="name" optionValue="value" display="chip" [placeholder]="translationsObject.fieldsPlaceholders.list"></p-multiSelect>
+            </span>
+        </ng-container>
+        <ng-container *queryInput="let rule; let options=options; type: qbDataTypeEnum.Address.toString(); let onChange=onChange">
+          <w-address-field [(ngModel)]="rule.value" (ngModelChange)="onChange()" [operator]="rule.operator" [segmentationApiUrl]="segmentationApiUrl" [segmentationApiToken]="segmentationToken"></w-address-field>
+        </ng-container>
+      </query-builder>
+    </div>
+
+    <ng-container *ngIf="!isAdvancedSearch && basicQuery.rules.length==0" >
+      <ng-container *ngTemplateOutlet="noQueryData"></ng-container>
+    </ng-container>
+
+  </ng-template>
+
+  <ng-template #advanced>
+    <div [class.query-builder-style]="!filterPanelObject.allowRuleSet" class="w-filter-panel-container fadein animation-duration-500">
+      <div *ngIf="filterPanelObject.allowRuleSet" class="flex justify-content-end flex-wrap">
+        <w-button class="mb-2" [label]="translationsObject.basicSearchTabLabel" type="text" (onClick)="updateSearchType()"></w-button>
+      </div>
+      <query-builder [formControl]='advancedQueryCtrl' [config]='advancedQueryConfig' [allowRuleset]='filterPanelObject.allowRuleSet' [allowCollapse]='filterPanelObject.allowColapse' [allowRuleset]="filterPanelObject.allowRuleSet" [persistValueOnFieldChange]='persistValueOnFieldChange'>
+          <div *ngIf="filterPanelObject.allowRuleSet; else noRuleSet">
+            <ng-container *queryButtonGroup="let ruleset; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet">
+                <w-button class="mr-2" [label]="translationsObject.advancedSearch.addRuleButtonLabel" type="secondary" size="small" (onClick)="addRule()"></w-button>
+                <w-button class="mr-2" [label]="translationsObject.advancedSearch.addRuleSetButtonLabel" type="secondary" icon="pi pi-plus" size="small" *ngIf="addRuleSet" (onClick)="addRuleSet()"></w-button>
+                <w-button class="mr-2" [label]="translationsObject.advancedSearch.removeRuleSetButtonLabel" type="tertiary" icon="pi pi-minus" size="small" *ngIf="removeRuleSet" (onClick)="removeRuleSet()"></w-button>
+            </ng-container>
+          </div>
+
+          <ng-template #noRuleSet>
+            <ng-container *queryButtonGroup="let ruleset; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet">
+              <div class="flex justify-content-end flex-wrap">
+                <w-button [label]="translationsObject.basicSearchTabLabel" type="text" (onClick)="updateSearchType()"></w-button>
+              </div>
+              <span class="advanced-query-button-group gap-3">
+                <w-button [label]="translationsObject.advancedSearch.addRuleButtonLabel" type="secondary" size="small" (onClick)="addRule()"></w-button>
+                <w-button [label]="translationsObject.advancedSearch.addRuleSetButtonLabel" type="secondary" icon="pi pi-plus" size="small" *ngIf="addRuleSet" (onClick)="addRuleSet()"></w-button>
+                <w-button [label]="translationsObject.advancedSearch.removeRuleSetButtonLabel" type="tertiary" icon="pi pi-minus" size="small" *ngIf="removeRuleSet" (onClick)="removeRuleSet()"></w-button>
+              </span>
+            </ng-container>
+          </ng-template>
+          <ng-container *queryArrowIcon>
+            <button pButton pRipple type="button" icon="pi pi-angle-right" class="p-button-rounded p-button-text"></button>
+          </ng-container>
+
+          <ng-container *queryRemoveButton="let rule; let removeRule=removeRule">
+            <w-button class="" label="" size="small" type="tertiary" icon="pi pi-times" (onClick)="removeRule(rule)"></w-button>
+          </ng-container>
+
+          <ng-container *querySwitchGroup="let ruleset; let onChange=onChange">
+            <div *ngIf="ruleset" class="w-filter-panel-switch-group-padding">
+              <w-select-button *ngIf="filterPanelObject.allowLogicalRule" [stateOptions]="[{label: 'And', value: 'and'}, {label: 'Or', value: 'or'}]"
+                               [(ngModel)]="ruleset.condition"
+                               [size]="'small'"
+                               (value)="ruleset.condition = $event">
+              </w-select-button>
+            </div>
+          </ng-container>
+
+          <ng-container *queryEntity="let rule; let entities=entities; let onChange=onChange">
+            <p-dropdown *ngIf="filterPanelObject.enityMode" class="field-gap w-edit-select-small w-entity-dropdown" appendTo="body" [options]="entities" [(ngModel)]="rule.entity" optionLabel="name" optionValue="value" (ngModelChange)="onChange($event, rule)"></p-dropdown>
+          </ng-container>
+
+          <ng-container *queryField="let rule; let fields=fields; let onChange=onChange; let getFields = getFields">
+            <span class="query-builder-field-width">
+              <p-dropdown class="field-gap w-edit-select-small" appendTo="body" [options]="getFields(rule.entity)" [(ngModel)]="rule.field" optionLabel="name" optionValue="value" (ngModelChange)="onChange($event, rule)"></p-dropdown>
+            </span>
+          </ng-container>
+
+          <ng-container *queryOperator="let rule; let operators=operators; let onChange=onChange">
+            <span class="query-builder-operator-width">
+              <p-dropdown class="field-gap w-edit-select-small" appendTo="body" [(ngModel)]="rule.operator" [options]="operators" (ngModelChange)="onChange(rule)"></p-dropdown>
+            </span>
+          </ng-container>
+
+          <ng-container *queryInput="let rule; type: qbDataTypeEnum.Boolean.toString(); let onChange=onChange">
+            <w-toggle-button class="field-gap toggle-button-align" size="small" [(ngModel)]="rule.value" onLabel="True" offLabel="False" (ngModelChange)="onChange()"></w-toggle-button>
+          </ng-container>
+
+          <ng-container *queryInput="let rule; type: qbDataTypeEnum.Datetime.toString(); let onChange=onChange">
+            <span class="query-builder-input-width">
+              <w-edit-calendar class="field-gap" appendTo="body" size="small" [showIcon]="false" [(ngModel)]="rule.value" (onChange)="onChange()" [showTime]="true" [showSeconds]="true" [placeholder]="translationsObject.fieldsPlaceholders.datetime" [displayInlineBlock]="true"></w-edit-calendar>
+            </span>
+          </ng-container>
+
+          <ng-container *queryInput="let rule; let field=field; type: qbDataTypeEnum.Decimal.toString(); let onChange=onChange">
+            <span class="query-builder-input-width">
+              <p-inputNumber inputStyleClass="flex flex-1" styleClass="flex flex-1" class="field-gap w-edit-input-number-small w-edit-input-number-small-height" [(ngModel)]="rule.value" inputId="minmax" inputId="minmax" mode="decimal" [minFractionDigits]="2" [maxFractionDigits]="5" [min]="0" [max]="100" (ngModelChange)="onChange()" [placeholder]="translationsObject.fieldsPlaceholders.decimal"> </p-inputNumber>
+            </span>
+          </ng-container>
+
+          <ng-container *queryInput="let rule; let options=options; type: qbDataTypeEnum.List.toString(); let onChange=onChange">
+            <span class="query-builder-input-width">
+              <p-dropdown class="field-gap w-edit-select-small" appendTo="body" [options]="options" [(ngModel)]="rule.value" (ngModelChange)="onChange()" optionLabel="name" optionValue="value" [placeholder]="translationsObject.fieldsPlaceholders.list"></p-dropdown>
+            </span>
+          </ng-container>
+
+          <ng-container *queryInput="let rule; let options=options; type: qbDataTypeEnum.List.toString(); let onChange=onChange">
+            <span class="query-builder-input-width field-gap">
+              <w-list-field [options]="options" [(ngModel)]="rule.value" [operator]="rule.operator" (ngModelChange)="onChange()" [placeholder]="translationsObject.fieldsPlaceholders.list"></w-list-field>
+            </span>
+          </ng-container>
+
+          <ng-container *queryInput="let rule; let field=field; type: qbDataTypeEnum.Number.toString(); let onChange=onChange">
+            <span class="query-builder-input-width">
+              <p-inputNumber [useGrouping]="false" inputStyleClass="flex flex-1" styleClass="flex flex-1" class="field-gap w-edit-input-number-small w-edit-input-number-small-height" [(ngModel)]="rule.value" inputId="minmax" inputId="minmax" [min]="0" (ngModelChange)="onChange()" [placeholder]="translationsObject.fieldsPlaceholders.number"> </p-inputNumber>
+            </span>
+          </ng-container>
+
+          <ng-container *queryInput="let rule; let field=field; type: qbDataTypeEnum.Text.toString(); let onChange=onChange">
+            <input class="field-gap query-builder-input-width w-edit-input-text-small-height w-edit-input-text-small" type="text" pInputText [(ngModel)]="rule.value" (ngModelChange)="onChange()" [placeholder]="translationsObject.fieldsPlaceholders.text"/>
+          </ng-container>
+
+          <ng-container *queryInput="let rule; let options=options; type: qbDataTypeEnum.Address.toString(); let onChange=onChange">
+            <w-address-field [(ngModel)]="rule.value" (ngModelChange)="onChange()" [operator]="rule.operator" [segmentationApiUrl]="segmentationApiUrl" [segmentationApiToken]="segmentationToken" [selectPlaceholder]="translationsObject.fieldsPlaceholders.list"></w-address-field>
+          </ng-container>
+      </query-builder>
+
+      <ng-container *ngIf="isAdvancedSearch && advancedQuery.rules.length==0" >
+        <ng-container *ngTemplateOutlet="noQueryData"></ng-container>
+      </ng-container>
+
+      <!-- Grouped filter -->
+      <div *ngIf="filterPanelObject.allowGrouped">
+        <div class="py-5">
+          <w-view-card-title-text [cardTitle]="translationsObject.groupedFilterTitle"></w-view-card-title-text>
+        </div>
+
+        <query-builder [formControl]='groupedQueryCtrl' [config]='advancedQueryConfig' [allowRuleset]='filterPanelObject.allowRuleSet' [allowCollapse]='filterPanelObject.allowColapse' [allowRuleset]="filterPanelObject.allowRuleSet" [persistValueOnFieldChange]='persistValueOnFieldChange'>
+          <ng-container *queryButtonGroup="let ruleset; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet">
+            <div class="flex gap-3 mb-3">
+              <w-button [label]="translationsObject.advancedSearch.addRuleButtonLabel" type="secondary" size="small" (onClick)="addRule()"></w-button>
+              <w-button [label]="translationsObject.advancedSearch.addRuleSetButtonLabel" type="secondary" icon="pi pi-plus" size="small" *ngIf="addRuleSet" (onClick)="addRuleSet()"></w-button>
+              <w-button [label]="translationsObject.advancedSearch.removeRuleSetButtonLabel" type="tertiary" icon="pi pi-minus" size="small" *ngIf="removeRuleSet" (onClick)="removeRuleSet()"></w-button>
+            </div>
+          </ng-container>
+
+          <ng-container *queryArrowIcon>
+            <button pButton pRipple type="button" icon="pi pi-angle-right" class="p-button-rounded p-button-text"></button>
+          </ng-container>
+
+          <ng-container *queryRemoveButton="let rule; let removeRule=removeRule">
+            <w-button class="" label="" size="small" type="tertiary" icon="pi pi-times" (onClick)="removeRule(rule)"></w-button>
+          </ng-container>
+
+          <ng-container *querySwitchGroup="let ruleset; let onChange=onChange">
+            <div *ngIf="ruleset">
+              <w-select-button *ngIf="filterPanelObject.allowLogicalRule" [stateOptions]="[{label: 'And', value: 'and'}, {label: 'Or', value: 'or'}]"
+                               [(ngModel)]="ruleset.condition"
+                               [size]="'small'"
+                               (value)="ruleset.condition = $event">
+              </w-select-button>
+            </div>
+          </ng-container>
+
+          <ng-container *queryEntity="let rule; let entities=entities; let onChange=onChange">
+            <p-dropdown class="mr-3 w-edit-select-small" *ngIf="filterPanelObject.enityMode" appendTo="body" [options]="entities" [(ngModel)]="rule.entity" optionLabel="name" optionValue="value" (ngModelChange)="onChange($event, rule)"></p-dropdown>
+          </ng-container>
+
+          <ng-container *queryField="let rule; let fields=fields; let onChange=onChange; let getFields = getFields">
+            <span class="query-builder-field-width">
+              <p-dropdown class="mr-3 w-edit-select-small" appendTo="body" [options]="getFields(rule.entity)" [(ngModel)]="rule.field" optionLabel="name" optionValue="value" (ngModelChange)="onChange($event, rule)"></p-dropdown>
+            </span>
+          </ng-container>
+
+          <ng-container *queryOperator="let rule; let operators=operators; let onChange=onChange">
+            <span class="query-builder-operator-width">
+              <p-dropdown class="mr-3 w-edit-select-small" appendTo="body" [(ngModel)]="rule.operator" [options]="operators" (ngModelChange)="onChange(rule)"></p-dropdown>
+            </span>
+          </ng-container>
+
+          <ng-container *queryInput="let rule; type: qbDataTypeEnum.Boolean.toString(); let onChange=onChange">
+            <w-toggle-button class="mr-3" size="small" [(ngModel)]="rule.value" onLabel="True" offLabel="False" (ngModelChange)="onChange()"></w-toggle-button>
+          </ng-container>
+
+          <ng-container *queryInput="let rule; type: qbDataTypeEnum.Datetime.toString(); let onChange=onChange">
+            <span class="query-builder-input-width">
+              <w-edit-calendar class="field-gap" appendTo="body" size="small" [showIcon]="false" [(ngModel)]="rule.value" (onChange)="onChange()" [showTime]="true" [showSeconds]="true" [placeholder]="translationsObject.fieldsPlaceholders.datetime" [displayInlineBlock]="true"></w-edit-calendar>
+            </span>
+          </ng-container>
+
+          <ng-container *queryInput="let rule; let field=field; type: qbDataTypeEnum.Decimal.toString(); let onChange=onChange">
+            <span class="query-builder-input-width">
+              <p-inputNumber class="mr-3" [(ngModel)]="rule.value" inputId="minmax" inputId="minmax" mode="decimal" [minFractionDigits]="2" [maxFractionDigits]="5" [min]="0" [max]="100" (ngModelChange)="onChange()" [placeholder]="translationsObject.fieldsPlaceholders.decimal"> </p-inputNumber>
+            </span>
+          </ng-container>
+
+          <ng-container *queryInput="let rule; let options=options; type: qbDataTypeEnum.List.toString(); let onChange=onChange">
+            <span class="query-builder-input-width">
+              <w-list-field [options]="options" [(ngModel)]="rule.value" [operator]="rule.operator" (ngModelChange)="onChange()" [placeholder]="translationsObject.fieldsPlaceholders.list"></w-list-field>
+            </span>
+          </ng-container>
+
+          <ng-container *queryInput="let rule; let field=field; type: qbDataTypeEnum.Number.toString(); let onChange=onChange">
+            <span class="query-builder-input-width">
+              <p-inputNumber [useGrouping]="false" inputStyleClass="flex flex-1" styleClass="flex flex-1" class="field-gap w-edit-input-number-small w-edit-input-number-small-height" [(ngModel)]="rule.value" inputId="minmax" inputId="minmax" [min]="0" (ngModelChange)="onChange()" [placeholder]="translationsObject.fieldsPlaceholders.number"> </p-inputNumber>
+            </span>
+          </ng-container>
+
+          <ng-container *queryInput="let rule; let field=field; type: qbDataTypeEnum.Text.toString(); let onChange=onChange">
+            <input class="mr-3 query-builder-input-width w-edit-input-text-small-height wapp-input" type="text" pInputText [(ngModel)]="rule.value" (ngModelChange)="onChange()" [placeholder]="translationsObject.fieldsPlaceholders.text"/>
+          </ng-container>
+
+        </query-builder>
+
+        <ng-container *ngIf="isAdvancedSearch && groupedQuery.rules.length==0" >
+          <ng-container *ngTemplateOutlet="noQueryData"></ng-container>
+        </ng-container>
+      </div>
+    </div>
+  </ng-template>
+
+  <ng-template #noQueryData>
+    <div class="flex justify-content-center flex-wrap card-container surface-50 mb-3">
+      <div class="flex align-items-center justify-content-center w-full h-4rem text-gray-900 border-round m-2">
+        {{translationsObject.noRulesLabel}}
+      </div>
+    </div>
+  </ng-template>

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

@@ -0,0 +1,356 @@
+@import '../../../styles/_variables.scss';
+ 
+.w-filter-panel-container-basic {
+    padding: $spacingM $spacingL $spacingL $spacingL;
+    background-color: $white;
+    border-radius: $spacingXS;
+    box-shadow: $boxShadowContainer;
+    margin-bottom: $spacingZero;
+}
+
+.w-filter-panel-container-advanced {
+    padding: $spacingM $spacingL $spacingL $spacingL;
+    background-color: $white;
+    border-radius: $spacingXS;
+    box-shadow: $boxShadowContainer;
+    margin-bottom: $spacingZero;
+}
+
+::ng-deep .w-filter-panel-basic .q-row {
+    padding: $spacingZero !important;
+    margin-top: $spacingXSM !important;
+    margin-bottom: $spacingXSM !important;
+    // padding-right: $spacingXXXL !important;
+    padding-left: $spacingXSM !important;
+}
+
+// ::ng-deep .w-filter-panel-basic .q-row:nth-child(3n) {
+//     padding-right: $spacingZero !important;
+// }
+
+::ng-deep .w-filter-panel-container-advanced .q-row {
+    padding: $spacingZero !important;
+    margin-bottom: $spacingXS !important;
+}
+
+.field-gap {
+    margin-right: $spacingXS;
+}
+
+.button-gap {
+    gap: $spacingM;
+}
+
+.w-filter-panel-switch-group-padding {
+    padding-bottom: $spacingM;
+}
+
+::ng-deep .query-builder-style ul li {
+    border: $borderNone !important;
+    background: transparent !important;
+    padding-left: $spacingZero !important;
+}
+
+/* Query Builder Horizontal START*/
+::ng-deep .query-builder-style .q-connector::before {
+    content: none !important;
+}
+
+::ng-deep .query-builder-style .q-connector::after {
+    border-width: $spacingZero !important;
+}
+
+::ng-deep .query-builder-style .q-tree {
+    padding: $spacingZero !important;
+}
+/* Query Builder Horizontal END */
+ 
+/* Query Builder Advanced fields width START */
+::ng-deep .query-builder-field-width .p-dropdown {
+    width: 20%;
+}
+
+::ng-deep .query-builder-operator-width .p-dropdown {
+    width: 10%;
+}
+
+.query-builder-input-width {
+    width: 40%;
+}
+
+::ng-deep .query-builder-input-width .p-dropdown {
+    width: 40%;
+}
+
+::ng-deep .query-builder-input-width .p-calendar {
+    width: 40%;
+}
+
+::ng-deep .query-builder-input-width .w-edit-calendar-medium-display-block {
+    width: 40%;
+}
+
+::ng-deep .w-edit-calendar .w-edit-calendar-styles {
+    width: 100% !important;
+}
+
+/* ToDo No se aplica con .p-inputnumber */
+/* :host ::ng-deep .inputnumber .p-inputtext {
+    width: 40%;
+} */
+ 
+/* Query Builder Advanced fields width END */
+.w-filter-panel-container.query-builder-style {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: relative;
+}
+.advanced-query-button-group {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    margin-bottom: -46px;
+}
+ 
+//Fields
+.w-edit-input-text-small-height {
+    height: $spacingXXXL;
+}
+ 
+::ng-deep .w-edit-input-text-small.p-inputtext {
+    @extend .w-input-small-placeholder-text;
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+    padding: calc($spacingXS - $borderWidth) calc($spacingS - $borderWidth);
+    border: $borderWidth solid $black200;
+}
+ 
+::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    color: $text700;
+}
+
+::-moz-placeholder { /* Firefox 19+ */
+    color: $text700;
+}
+
+:-ms-input-placeholder { /* IE 10+ */
+    color: $text700;
+}
+
+:-moz-placeholder { /* Firefox 18- */
+    color: $text700;
+}
+
+.w-edit-input-text-small:hover {
+    @extend .hover;
+}
+
+.w-edit-input-text-small:focus {
+    @extend .focus;
+    border-radius: $borderRadius;
+    border: $borderWidth solid $secondary50;
+    padding-left: calc($spacingS - $borderWidth);
+}
+ 
+//Calendar
+:host ::ng-deep .w-edit-calendar-display-blok{
+    width: 40%;
+}
+ 
+//Dropdown
+:host ::ng-deep .w-edit-select-small .p-dropdown{
+    height: 32px;
+    border-width: $borderWidth;
+    border-radius: $borderRadius;
+    border-color: $black200;
+}
+ 
+:host ::ng-deep .w-edit-select-small .p-inputtext{
+    @extend .w-input-small-placeholder-text;
+    padding: $spacingZero $spacingZero $spacingZero $spacingS;
+    align-self: center;  
+}
+ 
+:host ::ng-deep .w-edit-select-small .p-dropdown:not(.p-disabled):hover{
+    border: $borderWidth solid $secondary400;
+}
+ 
+:host ::ng-deep .w-edit-select-small .p-dropdown:not(.p-disabled).p-focus {
+    @extend .focus;
+    border: $borderWidth solid $secondary50;
+}
+ 
+:host ::ng-deep .w-edit-select-small .p-dropdown .p-placeholder {
+    @extend .w-input-small-placeholder-text-only-color;
+}
+ 
+:host ::ng-deep .w-edit-select-small .p-dropdown .p-dropdown-trigger{
+    width: auto;
+    height: 28px;
+    padding-right: $spacingS;
+}
+ 
+:host ::ng-deep .w-entity-dropdown .p-dropdown .p-dropdown-trigger{
+    width: auto;
+    height: 28px;
+    padding-right: $spacingS;
+    padding-left: $spacingS;
+}
+ 
+:host ::ng-deep .w-edit-select-small .p-dropdown-panel{
+    padding: $spacingXS;
+}
+ 
+:host ::ng-deep .w-edit-select-small .p-dropdown-panel .p-dropdown-items{
+    padding: $spacingZero;
+}
+ 
+:host ::ng-deep .w-edit-select-small .p-dropdown-panel .p-dropdown-items .p-dropdown-item{
+    @extend .w-input-medium-select-options-text;
+    padding: $spacingXS;
+    margin-bottom: $spacingXXS;
+}
+ 
+:host ::ng-deep .w-edit-select-small .p-dropdown-panel .p-dropdown-items .p-dropdown-item:hover{
+    background: $primary50;
+    border-radius: $borderRadius;
+}
+ 
+:host ::ng-deep .w-edit-select-small .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight{
+    background: $primary50;
+    border-radius: $borderRadius;
+    color: $black;
+}
+ 
+:host ::ng-deep .w-edit-select-small .p-disabled{
+    @extend .w-input-disabled;
+}
+ 
+:host ::ng-deep .w-edit-select-small .p-disabled .p-inputtext{
+    @extend .w-input-small-placeholder-text-disabled-only-color;
+}
+
+::ng-deep .select-disabled .p-dropdown .p-dropdown-trigger {
+    display: none;
+} 
+ 
+//InputNumber
+:host ::ng-deep .w-edit-input-number-small-height .p-inputnumber .p-inputnumber-input {
+    height: $spacingXXXL !important;
+}
+ 
+.w-filter-panel-container-advanced .w-edit-input-number-small {
+    width: 40% !important;
+}
+ 
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input{
+    @extend .w-input-small-placeholder-text;
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+    padding: calc($spacingXS - $borderWidth) calc($spacingS - $borderWidth) !important;
+    width: 100%;
+    border: $borderWidth solid $black200;
+}
+ 
+::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    color: $text700;
+}
+ 
+::-moz-placeholder { /* Firefox 19+ */
+    color: $text700;
+}
+ 
+:-ms-input-placeholder { /* IE 10+ */
+    color: $text700;
+}
+ 
+:-moz-placeholder { /* Firefox 18- */
+    color: $text700;
+}
+ 
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input:hover { 
+    @extend .hover;
+}
+ 
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input:focus {
+    @extend .focus;
+    border-radius: $borderRadius;
+    border: $borderWidth solid $secondary50;
+    padding-left: calc($spacingS - $borderWidth);
+}
+ 
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input::-moz-placeholder { 
+    color: $text700; 
+}
+
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input::-webkit-input-placeholder { 
+    color: $text700; 
+}
+
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input:-ms-input-placeholder { 
+    color: $text700; 
+}
+
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input:-moz-placeholder { 
+    color: $text700; 
+}
+ 
+:host ::ng-deep .w-edit-input-number-small .p-inputnumber .p-inputnumber-input:disabled { 
+    background-color: $black100;
+    border-color: $black200;
+    color: $black700;
+    opacity: 1;
+}
+   
+/*Labels styles START*/
+ 
+.w-filter-panel-input-text-label {
+    @extend .w-input-small-label-text;
+    padding: $spacingXS $spacingXSM $spacingS $spacingXSM;
+    margin: $spacingZero;
+}
+ 
+/*Labels styles END*/
+ 
+/* Basic filter START */
+ 
+.w-filter-panel-basic-query-builder-input-width {
+    width: 100% !important;
+}
+ 
+::ng-deep .w-filter-panel-basic-query-builder-input-width .p-dropdown {
+    width: 100% !important;
+}
+ 
+::ng-deep .w-filter-panel-basic .q-tree-container {
+    margin: $spacingXS $spacingZero $spacingM $spacingZero;
+}
+ 
+::ng-deep .w-filter-panel-basic .q-row:not(:nth-child(3n)) {
+    display: flex !important;
+    width: 33.3333%;
+    padding-right: $spacingXXXL*2 !important;
+}
+
+::ng-deep .w-filter-panel-basic .q-row:nth-child(3n) {
+    display: flex !important;
+    width: 33.3333%;
+    padding-right: $spacingZero !important;
+}
+ 
+::ng-deep .w-filter-panel-basic .q-tree {
+    margin: $spacingZero !important;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+}
+
+.w-filter-panel-boolean-label-width {
+    width: 25.5% !important;
+}
+/* Basic filter END */
+
+::ng-deep .q-rule {
+    border: none !important;
+}