@pepperi-addons/ngx-lib 0.2.61 → 0.3.2

package/quantity-selector/quantity-selector.component.theme.scss

@@ -1,77 +1,77 @@
-// ******************************************************************************
-//                       QS styles declerations
-// ******************************************************************************
-@mixin pep-qs-action-state-button($pepperi-theme, $style, $color-name: color-qs) {
-    @include pep-button-states($pepperi-theme, $style, $color-name);
+@use '../src/core/style/abstracts/variables';
+@use '../src/core/style/abstracts/mixins';
+@use '../src/core/style/abstracts/functions';
+
+@mixin pep-qs-action-state-button($style, $color-name: color-qs) {
+    @include mixins.pep-button-states($style, $color-name);
 
     &.qs-action {
-        @include pep-button-states($pepperi-theme, weak, $color-name);
+        @include mixins.pep-button-states(weak, $color-name);
         box-shadow: unset;
         border: unset;
-        @include fix-inline-z-index();
+        @include mixins.fix-inline-z-index();
     }
 }
 
-@mixin pep-qs-states($pepperi-theme, $style) {
+@mixin pep-qs-states($style) {
     .mat-form-field {
-        @include pep-form-field-states($pepperi-theme, $style, color-qs);
+        @include mixins.pep-form-field-states($style, color-qs);
     }
 
     // .pepperi-button:not(.qs-action), .pep-button:not(.qs-action) {
     .pepperi-button, .pep-button {
-        @include pep-qs-action-state-button($pepperi-theme, $style);
+        @include pep-qs-action-state-button($style);
     }
 
     &.caution {
         .mat-form-field {
-            @include pep-form-field-states($pepperi-theme, $style, color-system-caution);
+            @include mixins.pep-form-field-states($style, color-system-caution);
         }
 
         .pepperi-button, .pep-button {
-            @include pep-qs-action-state-button($pepperi-theme, $style, color-system-caution);
+            @include pep-qs-action-state-button($style, color-system-caution);
         }
     }
 }
 
-@mixin pep-quantity-selector-component-theme($pepperi-theme) {
+::ng-deep {
     .pepperi-quantity-selector-container, .pep-quantity-selector-container {
         &:not(.strong) {
             .mat-form-field {
                 .mat-input-element {
-                    color: get-pep-color($pepperi-theme, color-text, color-main);
+                    color: functions.get-pep-color(color-text, color-main);
                 }
             }
 
             &.zero-quantity {
                 .mat-form-field {
                     .mat-input-element {
-                        color: get-pep-color($pepperi-theme, color-text, color-dimmed);
+                        color: functions.get-pep-color(color-text, color-dimmed);
                     }
                 }
 
                 button {
-                    color: get-pep-color($pepperi-theme, color-text, color-dimmed);
+                    color: functions.get-pep-color(color-text, color-dimmed);
                 }
             }
         }
 
         &.weak {
-            @include pep-qs-states($pepperi-theme, weak);
+            @include pep-qs-states(weak);
         }
 
         &.regular {
-            @include pep-qs-states($pepperi-theme, regular);
+            @include pep-qs-states(regular);
         }
 
         &.strong {
-            @include pep-qs-states($pepperi-theme, strong);
+            @include pep-qs-states(strong);
         }
 
         &.matrix-qs {
             .additional-value {
-                @include pep-badge($pepperi-theme);
+                @include mixins.pep-badge();
             }
         }
-
     }
 }

package/query-builder/common/model/field.d.ts

@@ -0,0 +1,8 @@
+import { PepSmartFilterBaseField } from '@pepperi-addons/ngx-lib/smart-filters';
+export interface IPepQueryBuilderFieldContainer {
+    smart: PepSmartFilterBaseField;
+    query: IPepQueryBuilderFieldType;
+}
+export interface IPepQueryBuilderFieldType {
+    fieldType: string;
+}

package/query-builder/common/model/filter.d.ts

@@ -0,0 +1,6 @@
+import { IPepSmartFilterOperatorUnit } from '@pepperi-addons/ngx-lib/smart-filters';
+export interface IPepQueryBuilderValues {
+    first: any;
+    second: any;
+    operationUnit: IPepSmartFilterOperatorUnit;
+}

package/query-builder/common/model/legacy.d.ts

@@ -0,0 +1,29 @@
+import { KeyValuePair } from '@pepperi-addons/ngx-lib';
+import { PepOperatorTypes } from './type';
+import { PepSmartFilterBaseField } from '@pepperi-addons/ngx-lib/smart-filters';
+export interface IPepQueryBuilderFieldContainer {
+    smart: PepSmartFilterBaseField;
+    query: IPepQueryBuilderFieldType;
+}
+export interface IPepQueryBuilderFieldType {
+    fieldType: string;
+}
+export interface IPepQueryBuilderField {
+    FieldID: string;
+    FieldType: string;
+    Title: string;
+    OptionalValues: Array<KeyValuePair<string>>;
+}
+export interface IPepQuerySection {
+    ComplexId: string;
+    Operation: PepOperatorTypes;
+    LeftNode?: IPepQuerySection | IPepQueryItem;
+    RightNode?: IPepQuerySection | IPepQueryItem;
+}
+export interface IPepQueryItem {
+    ExpressionId: string;
+    ApiName: string;
+    FieldType: string;
+    Operation: string;
+    Values: any[];
+}

package/query-builder/common/model/operator-unit.d.ts

@@ -0,0 +1,13 @@
+import { IPepSmartFilterOperatorUnit } from '@pepperi-addons/ngx-lib/smart-filters';
+/**
+ * gets a smart filter operation unit item
+ * @param operationUnit legacy operation unit
+ * @returns smart filter operation unit item
+ */
+export declare function getSmartBuilderOperationUnit(operationUnit: string): IPepSmartFilterOperatorUnit | null;
+/**
+ * gets a legacy operation unit value
+ * @param operationUnit smart filter operation unit item
+ * @returns legacy operation unit value
+ */
+export declare function getLegacyOperationUnit(operationUnit: IPepSmartFilterOperatorUnit): string | null;

package/query-builder/common/model/operator.d.ts

@@ -0,0 +1,21 @@
+import { IPepSmartFilterOperator } from '@pepperi-addons/ngx-lib/smart-filters';
+import { PepSmartFilterType } from '@pepperi-addons/ngx-lib/smart-filters';
+export interface IPepQueryBuilderOperator {
+    legacy: string;
+    smartFilter: IPepSmartFilterOperator;
+    type: PepSmartFilterType[] | null;
+}
+/**
+ * gets a smart filter operator item
+ * @param operator legacy operator
+ * @param type smart filter's type
+ * @returns smart filter operator item
+ */
+export declare function getSmartBuilderOperator(operator: string, type: PepSmartFilterType): IPepSmartFilterOperator | null;
+/**
+ * gets a legacy operator value
+ * @param operator smart filter operator item
+ * @param type smart filter's type
+ * @returns legacy operator value
+ */
+export declare function getLegacyOperator(operator: IPepSmartFilterOperator, type: PepSmartFilterType): string | null;

package/query-builder/common/model/structure.d.ts

@@ -0,0 +1,4 @@
+export interface IPepQueryDepth {
+    current: number;
+    max: number;
+}

package/query-builder/common/model/type-map.d.ts

@@ -0,0 +1,12 @@
+import { PepSmartFilterType } from '@pepperi-addons/ngx-lib/smart-filters';
+export declare class PepQueryBuilderTypeMap {
+    private map;
+    constructor();
+    private loadTypes;
+    /**
+     * Converts legacy field type to smart builder type
+     * @param type legacy type
+     * @returns smart builder field type
+     */
+    getSmartBuilderType(key: string): PepSmartFilterType | null;
+}

package/query-builder/common/model/type.d.ts

@@ -0,0 +1,4 @@
+export declare enum PepOperatorTypes {
+    And = "AND",
+    Or = "OR"
+}

package/query-builder/common/services/output-query.service.d.ts

@@ -0,0 +1,44 @@
+import { IPepQuerySection, IPepQueryItem } from '../model/legacy';
+export declare class PepOutputQueryService {
+    private _complexIdCounter;
+    private _expressionIdCounter;
+    constructor();
+    /**
+     * generates a legacy query structure
+     * @param filters UI smart filters structure
+     * @returns legacy query
+     */
+    generateQuery(filters: any): IPepQuerySection | IPepQueryItem;
+    /**
+     * init params
+     */
+    private initParams;
+    /**
+     * a recursive function dynamically builds legacy query structure
+     * @param current UI object represents either a section or filter component
+     * @returns section query data
+     */
+    private sectionWalk;
+    /**
+     * adds a legacy filter object to the current query structure
+     * @param section section query data
+     * @param item filter item
+     * @param operator query operator
+     * @returns
+     */
+    private addToSection;
+    /**
+     * creates a legacy complex object
+     * @param left LeftNode object
+     * @param right RightNode object
+     * @param operator query operator
+     * @returns legacy complex object
+     */
+    private createSection;
+    /**
+     * gets legacy filter values object
+     * @param current UI filter object's values
+     * @returns an array represents legacy values
+     */
+    private getItemValues;
+}

package/query-builder/common/services/type-convertor.service.d.ts

@@ -0,0 +1,10 @@
+import { IPepOption } from '@pepperi-addons/ngx-lib';
+export declare class PepTypeConvertorService {
+    private readonly _operators;
+    private readonly _booleans;
+    get operators(): IPepOption[];
+    get booleans(): IPepOption[];
+    constructor();
+    private initOperators;
+    private initBooleans;
+}

package/query-builder/package.json

@@ -0,0 +1,14 @@
+{
+  "peerDependencies": {
+    "@ngx-translate/core": "^13.0.0"
+  },
+  "main": "../bundles/pepperi-addons-ngx-lib-query-builder.umd.js",
+  "module": "../fesm2015/pepperi-addons-ngx-lib-query-builder.js",
+  "es2015": "../fesm2015/pepperi-addons-ngx-lib-query-builder.js",
+  "esm2015": "../esm2015/query-builder/pepperi-addons-ngx-lib-query-builder.js",
+  "fesm2015": "../fesm2015/pepperi-addons-ngx-lib-query-builder.js",
+  "typings": "pepperi-addons-ngx-lib-query-builder.d.ts",
+  "metadata": "pepperi-addons-ngx-lib-query-builder.metadata.json",
+  "sideEffects": false,
+  "name": "@pepperi-addons/ngx-lib/query-builder"
+}

package/query-builder/pepperi-addons-ngx-lib-query-builder.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+export { PepOutputQueryService as ɵa } from './common/services/output-query.service';
+export { PepTypeConvertorService as ɵb } from './common/services/type-convertor.service';
+export { PepQueryBuilderItemComponent as ɵd } from './query-builder-item/query-builder-item.component';
+export { PepQueryBuilderSectionComponent as ɵc } from './query-builder-section/query-builder-section.component';

package/query-builder/pepperi-addons-ngx-lib-query-builder.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"PepQueryBuilderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":14,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":17,"character":8},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":18,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/select","name":"PepSelectModule","line":19,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/button","name":"PepButtonModule","line":20,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/group-buttons","name":"PepGroupButtonsModule","line":21,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/smart-filters","name":"PepSmartFiltersModule","line":22,"character":8}],"exports":[{"__symbolic":"reference","name":"PepQueryBuilderComponent"}],"declarations":[{"__symbolic":"reference","name":"PepQueryBuilderComponent"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"}]}]}],"members":{}},"PepQueryBuilderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"pep-query-builder","providers":[{"__symbolic":"reference","name":"PepQueryBuilderService"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵa"}],"template":"<pep-query-builder-section #rootContainer [form]=\"queryBuilderService.form\" [depth]=\"depth\" [hasFields]=\"hasFields\"\n    (createSection)=\"onCreateSection()\" (createItem)=\"onCreateItem()\" (operatorChange)=\"onOperatorChange()\">\n</pep-query-builder-section>","styles":[""]}]}],"members":{"query":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"fields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"maxDepth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"queryChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":5}}]}],"formValidationChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":5}}]}],"root":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":48,"character":5},"arguments":["rootContainer",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":57,"character":21},{"__symbolic":"reference","name":"PepQueryBuilderService"}]}],"ngOnInit":[{"__symbolic":"method"}],"setupForm":[{"__symbolic":"method"}],"initDepth":[{"__symbolic":"method"}],"loadQuery":[{"__symbolic":"method"}],"onCreateSection":[{"__symbolic":"method"}],"onCreateItem":[{"__symbolic":"method"}],"onOperatorChange":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"PepQueryBuilderService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":27,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":37,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":37,"character":61},{"__symbolic":"reference","name":"ɵa"}]}],"buildQueryStructure":[{"__symbolic":"method"}],"hasProperty":[{"__symbolic":"method"}],"flatten":[{"__symbolic":"method"}],"createSection":[{"__symbolic":"method"}],"createItem":[{"__symbolic":"method"}],"getFilter":[{"__symbolic":"method"}],"getSelectedField":[{"__symbolic":"method"}],"getFilterValues":[{"__symbolic":"method"}],"convertToSmartFilterFields":[{"__symbolic":"method"}],"createOutputQuery":[{"__symbolic":"method"}]}},"IPepQueryBuilderFieldContainer":{"__symbolic":"interface"},"IPepQueryBuilderFieldType":{"__symbolic":"interface"},"IPepQueryBuilderField":{"__symbolic":"interface"},"IPepQuerySection":{"__symbolic":"interface"},"IPepQueryItem":{"__symbolic":"interface"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":8,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"generateQuery":[{"__symbolic":"method"}],"initParams":[{"__symbolic":"method"}],"sectionWalk":[{"__symbolic":"method"}],"addToSection":[{"__symbolic":"method"}],"createSection":[{"__symbolic":"method"}],"getItemValues":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"initOperators":[{"__symbolic":"method"}],"initBooleans":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"pep-query-builder-section","template":"<div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n    <div class=\"query-section-container\" fxLayout=\"column\" fxLayoutGap=\".5rem\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between\">\n            <pep-group-buttons [buttons]=\"toggleButtons\" [selectedButtonKey]=\"f.operator?.value || ''\" styleType=\"weak\"\n                sizeType=\"sm\" [viewType]=\"'toggle'\" [buttonsDisabled]=\"!hasFields\">\n            </pep-group-buttons>\n            <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n                <pep-button value=\"Add Filter\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"sm\" classNames=\"\"\n                    [disabled]=\"!hasFields\" iconName=\"number_plus\" iconPosition=\"end\" [visible]=\"true\"\n                    (buttonClick)=\"onAddRuleClicked()\"></pep-button>\n                <ng-container *ngIf=\"depth.current < depth.max-1\">\n                    <pep-button value=\"Add Filter Group\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"sm\"\n                        classNames=\"\" [disabled]=\"!hasFields\" iconName=\"number_plus\" iconPosition=\"end\" [visible]=\"true\"\n                        (buttonClick)=\"onAddRuleSetClicked()\"></pep-button>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container #sectionContainer></ng-container>\n    </div>\n    <pep-button *ngIf=\"depth.current > 0\" styleType=\"weak\" styleStateType=\"system_bin\" sizeType=\"md\" classNames=\"\"\n        [disabled]=\"false\" iconName=\"system_bin\" iconPosition=\"end\" [visible]=\"true\"\n        (buttonClick)=\"onDeleteSectionClicked()\">\n    </pep-button>\n</div>","styles":[".query-section-container{border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding:.5rem;width:100%}",".query-section-container{box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid rgba(26,26,26,.24);border:1px solid hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.24)}"]}]}],"members":{"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"depth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"hasFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"createSection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":5}}]}],"createItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"character":5}}]}],"remove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":31,"character":5}}]}],"operatorChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":33,"character":5}}]}],"sectionContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":36,"character":5},"arguments":["sectionContainer",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":36,"character":43},"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"initOperators":[{"__symbolic":"method"}],"onOperatorChanged":[{"__symbolic":"method"}],"onAddRuleClicked":[{"__symbolic":"method"}],"onAddRuleSetClicked":[{"__symbolic":"method"}],"onDeleteSectionClicked":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"pep-query-builder-item","template":"<div fxLayout=\"column\" fxLayoutGap=\".5rem\">\n    <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n        <pep-select fxFlex=\"25%\" [value]=\"_selectedField?.id\" xAlignment=\"left\" [options]=\"_options\"\n            [renderTitle]=\"false\" (valueChange)=\"onFieldChanged($event)\"></pep-select>\n        <ng-container *ngIf=\"_selectedField?.componentType\">\n            <ng-container [ngSwitch]=\"_selectedField.componentType\">\n                <ng-container *ngSwitchCase=\"'text'\">\n                    <pep-text-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\n                        [filter]=\"_filter\" [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-text-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'boolean'\">\n                    <pep-boolean-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\n                        [filter]=\"_filter\" [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [options]=\"typeConvertorService.booleans\" [renderTitle]=\"false\"\n                        (filterChange)=\"onFilterChanged()\">\n                    </pep-boolean-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'date'\">\n                    <pep-date-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\n                        [filter]=\"_filter\" [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-date-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'multi-select'\">\n                    <pep-multi-select-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\n                        [filter]=\"_filter\" [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-multi-select-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'number'\">\n                    <pep-number-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\n                        [filter]=\"_filter\" [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-number-filter>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n        <pep-button styleType=\"weak\" styleStateType=\"system_bin\" sizeType=\"md\" classNames=\"\" [disabled]=\"false\"\n            iconName=\"system_bin\" iconPosition=\"end\" [visible]=\"true\" (buttonClick)=\"onDeleteItemClicked()\">\n        </pep-button>\n    </div>\n</div>","styles":["::ng-deep .pep-field-no-spacing{min-height:0!important;margin-bottom:0!important}"]}]}],"members":{"formKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":5}}]}],"fields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"parentForm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"filterChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":53,"character":5}}]}],"remove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":61,"character":21},{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"setupForm":[{"__symbolic":"method"}],"addToParentForm":[{"__symbolic":"method"}],"onFieldChanged":[{"__symbolic":"method"}],"onFilterChanged":[{"__symbolic":"method"}],"onDeleteItemClicked":[{"__symbolic":"method"}]}}},"origins":{"PepQueryBuilderModule":"./query-builder.module","PepQueryBuilderComponent":"./query-builder.component","PepQueryBuilderService":"./query-builder.service","IPepQueryBuilderFieldContainer":"./common/model/legacy","IPepQueryBuilderFieldType":"./common/model/legacy","IPepQueryBuilderField":"./common/model/legacy","IPepQuerySection":"./common/model/legacy","IPepQueryItem":"./common/model/legacy","ɵa":"./common/services/output-query.service","ɵb":"./common/services/type-convertor.service","ɵc":"./query-builder-section/query-builder-section.component","ɵd":"./query-builder-item/query-builder-item.component"},"importAs":"@pepperi-addons/ngx-lib/query-builder"}

package/query-builder/public-api.d.ts

@@ -0,0 +1,4 @@
+export * from './query-builder.module';
+export * from './query-builder.component';
+export * from './query-builder.service';
+export * from './common/model/legacy';

package/query-builder/query-builder-item/query-builder-item.component.d.ts

@@ -0,0 +1,37 @@
+import { EventEmitter } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { PepSmartFilterBaseField } from '@pepperi-addons/ngx-lib/smart-filters';
+import { IPepSmartFilterData } from '@pepperi-addons/ngx-lib/smart-filters';
+import { IPepOption } from '@pepperi-addons/ngx-lib';
+import { PepTypeConvertorService } from '../common/services/type-convertor.service';
+import { IPepQueryBuilderFieldContainer } from '../common/model/field';
+export declare class PepQueryBuilderItemComponent {
+    private _fb;
+    typeConvertorService: PepTypeConvertorService;
+    formKey: string;
+    _fields: Array<IPepQueryBuilderFieldContainer>;
+    _options: IPepOption[];
+    set fields(list: Array<IPepQueryBuilderFieldContainer>);
+    _selectedField: PepSmartFilterBaseField;
+    set selected(value: IPepQueryBuilderFieldContainer);
+    _filter: IPepSmartFilterData;
+    set filter(value: IPepSmartFilterData);
+    _parentForm: FormGroup;
+    set parentForm(value: FormGroup);
+    filterChange: EventEmitter<any>;
+    remove: EventEmitter<any>;
+    form: FormGroup;
+    constructor(_fb: FormBuilder, typeConvertorService: PepTypeConvertorService);
+    ngOnInit(): void;
+    get f(): {
+        [key: string]: import("@angular/forms").AbstractControl;
+    };
+    get queryForm(): {
+        [key: string]: import("@angular/forms").AbstractControl;
+    };
+    setupForm(): void;
+    addToParentForm(): void;
+    onFieldChanged(key: any): void;
+    onFilterChanged(): void;
+    onDeleteItemClicked(): void;
+}

package/query-builder/query-builder-section/query-builder-section.component.d.ts

@@ -0,0 +1,27 @@
+import { EventEmitter, ViewContainerRef } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { PepButton } from '@pepperi-addons/ngx-lib/button';
+import { PepTypeConvertorService } from '../common/services/type-convertor.service';
+import { IPepQueryDepth } from '../common/model/structure';
+export declare class PepQueryBuilderSectionComponent {
+    private _typeConvertorService;
+    form: FormGroup;
+    depth: IPepQueryDepth;
+    hasFields: boolean;
+    createSection: EventEmitter<any>;
+    createItem: EventEmitter<any>;
+    remove: EventEmitter<any>;
+    operatorChange: EventEmitter<any>;
+    sectionContainer: ViewContainerRef;
+    toggleButtons: Array<PepButton>;
+    constructor(_typeConvertorService: PepTypeConvertorService);
+    ngOnInit(): void;
+    get f(): {
+        [key: string]: import("@angular/forms").AbstractControl;
+    };
+    initOperators(): void;
+    onOperatorChanged(event: any): void;
+    onAddRuleClicked(): void;
+    onAddRuleSetClicked(): void;
+    onDeleteSectionClicked(): void;
+}

package/query-builder/query-builder-section/query-builder-section.component.theme.scss

@@ -0,0 +1,7 @@
+@use '../../src/core/style/abstracts/mixins';
+@use '../../src/core/style/abstracts/functions';
+
+.query-section-container {
+    box-shadow: functions.get-pep-shadow(shadow-sm, soft);       
+    @include mixins.border(border, 1px, solid, functions.get-pep-color(color-system-primary, color-tran-50)); 
+}

package/query-builder/query-builder.component.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { PepQueryBuilderSectionComponent } from './query-builder-section/query-builder-section.component';
+import { IPepQueryBuilderField, IPepQuerySection, IPepQueryItem } from './common/model/legacy';
+import { PepQueryBuilderService } from './query-builder.service';
+import { IPepQueryDepth } from './common/model/structure';
+import { Subscription } from 'rxjs';
+export declare class PepQueryBuilderComponent implements OnInit, OnDestroy {
+    private _fb;
+    queryBuilderService: PepQueryBuilderService;
+    _query: IPepQuerySection | IPepQueryItem;
+    set query(object: IPepQuerySection | IPepQueryItem);
+    set fields(list: Array<IPepQueryBuilderField>);
+    set maxDepth(value: number);
+    queryChange: EventEmitter<IPepQuerySection | IPepQueryItem>;
+    formValidationChange: EventEmitter<boolean>;
+    root: PepQueryBuilderSectionComponent;
+    _formSubscription$: Subscription;
+    _outputQuerySubscription$: Subscription;
+    _lastFormValidStatus: boolean;
+    depth: IPepQueryDepth;
+    hasFields: boolean;
+    constructor(_fb: FormBuilder, queryBuilderService: PepQueryBuilderService);
+    ngOnInit(): void;
+    setupForm(): void;
+    initDepth(): void;
+    /**
+     * builds UI query structure as soon as both the fields and query loads
+     */
+    loadQuery(): void;
+    onCreateSection(): void;
+    onCreateItem(): void;
+    onOperatorChange(): void;
+    ngOnDestroy(): void;
+}

package/query-builder/query-builder.module.d.ts

@@ -0,0 +1,2 @@
+export declare class PepQueryBuilderModule {
+}

package/query-builder/query-builder.service.d.ts

@@ -0,0 +1,94 @@
+import { ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { IPepQueryBuilderField, IPepQuerySection, IPepQueryItem } from './common/model/legacy';
+import { PepOutputQueryService } from './common/services/output-query.service';
+import { PepOperatorTypes } from './common/model/type';
+export declare class PepQueryBuilderService {
+    private _fb;
+    private _resolver;
+    private _outputQueryService;
+    private _outputQuery$;
+    private _smartFilterFields;
+    private _form;
+    private _maxStructureDepth;
+    outputQuery$: import("rxjs").Observable<IPepQuerySection | IPepQueryItem>;
+    constructor(_fb: FormBuilder, _resolver: ComponentFactoryResolver, _outputQueryService: PepOutputQueryService);
+    set maxDepth(value: number);
+    get maxDepth(): number;
+    set fields(list: Array<IPepQueryBuilderField>);
+    get hasFields(): boolean;
+    set form(value: FormGroup);
+    get form(): FormGroup;
+    /**
+     * builds a dynamic UI query structure
+     * might has a different structure than the query's due to parent-child elements merge
+     * @param query legacy query
+     * @param containerRef reference to root element
+     */
+    buildQueryStructure(query: IPepQuerySection | IPepQueryItem, containerRef: ViewContainerRef): void;
+    /**
+    * checks if the object contains property
+    * @param obj object
+    * @param prop property name
+    * @returns true if contains, false otherwise
+    */
+    private hasProperty;
+    /**
+     * a recursive function dynamically builds UI filters structure
+     * @param parentOperator parent legacy complex operator
+     * @param current child legacy object (either another complex or expression type)
+     * @param containerRef parent element
+     * @param parentForm parent form
+     */
+    private flatten;
+    /**
+     * creates a container object of two or more child filter items
+     * @param operator AND/OR operator
+     * @param containerRef parent element
+     * @param parentForm parent form
+     * @param depth
+     * @returns an object containing the current element and current form
+     */
+    createSection(operator: PepOperatorTypes, containerRef: ViewContainerRef, parentForm: FormGroup, depth: number): {
+        containerRef: ViewContainerRef;
+        parentForm: FormGroup;
+    };
+    /**
+     * creates a component represents filter item (leaf element - has no childs)
+     * @param current filter legacy element
+     * @param containerRef parent element
+     * @param parentForm parent form
+     */
+    createItem(current: IPepQueryItem, containerRef: ViewContainerRef, parentForm: FormGroup): void;
+    /**
+     * creates a smart filter object
+     * @param current filter legacy element
+     * @param field filter's selected field
+     * @returns smart filter object
+     */
+    private getFilter;
+    /**
+     * get smart filter field
+     * @param current filter legacy element
+     * @returns smart filter field, if not found returns the first field
+     */
+    private getSelectedField;
+    /**
+     * gets smart filter's values data
+     * @param current filter legacy element
+     * @param operator smart filter operator
+     * @param field filter's selected field
+     * @returns object contains the filter values data
+     */
+    private getFilterValues;
+    /**
+     * converts legacy fields to smart filter fields
+     * @param fields legacy fields array
+     * @returns smart filter fields array
+     */
+    private convertToSmartFilterFields;
+    /**
+     * creates a legacy output query
+     */
+    createOutputQuery(): void;
+}