npm - @pepperi-addons/ngx-lib - Versions diffs - 0.3.15-beta.20 → 0.3.15-beta.21 - Mend

@pepperi-addons/ngx-lib 0.3.15-beta.20 → 0.3.15-beta.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/fesm2015/pepperi-addons-ngx-lib-smart-filters.js CHANGED Viewed

@@ -134,7 +134,7 @@ class PepSmartFiltersComponent {
 PepSmartFiltersComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-smart-filters',
-                template: "<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n    <div *ngIf=\"fields?.length > 0\" class=\"title\">\n        <span class=\"body-md bold\">{{ title?.length > 0 ? title : (\"SMART_FILTERS.TITLE\" | translate)}}</span>\n        <mat-chip *ngIf=\"filtersDataMap.size > 0\" [selectable]=\"false\" [removable]=\"true\" (click)=\"onFiltersClear()\"\n            class=\"clear-filter pep-button chip xs weak\">\n            <span class=\"body-xs ellipsis \">\n                {{ \"ACTIONS.CLEAR\" | translate}}\n            </span>\n        </mat-chip>\n    </div>\n\n    <mat-accordion [displayMode]=\"'flat'\" [multi]=\"true\" class=\"pep-accordion2\">\n        <mat-expansion-panel *ngFor=\"let field of fields; let i = index\" hideToggle=\"true\" [expanded]=\"field.isOpen\"\n            (opened)=\"toggleField(i, true)\" (closed)=\"toggleField(i, false)\">\n            <mat-expansion-panel-header [collapsedHeight]=\"expansionPanelHeaderHeight\"\n                [expandedHeight]=\"expansionPanelHeaderHeight\">\n                <mat-panel-title class=\"pep-spacing-element-negative\">\n                    <div class=\"smart-filter-title-container\">\n                        <mat-icon class=\"pep-spacing-element\">\n                            <pep-icon [name]=\"field.isOpen ? 'number_minus' : 'number_plus'\"></pep-icon>\n                        </mat-icon>\n                        <span class=\"body-sm ellipsis\" [title]=\"field.name\">\n                            {{ field.name }}\n                        </span>\n                        <mat-chip *ngIf=\"filtersDataMap.get(field.id)\" [selectable]=\"false\" [removable]=\"true\"\n                            (click)=\"onFilterClear(field)\" class=\"clear-filter pep-button chip xs weak\">\n                            <span *ngIf=\"field.componentType === 'multi-select'\" class=\"body-xs pep-spacing-element\">\n                                {{ filtersDataMap.get(field.id).value?.first?.length }}\n                                <!-- {{ field.componentType === 'multi-select' ?\n                                filtersDataMap.get(field.id).value?.first?.length : 1 }} -->\n                            </span>\n                            <mat-icon>\n                                <pep-icon name=\"system_close\"></pep-icon>\n                            </mat-icon>\n                        </mat-chip>\n                    </div>\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-content smart-filter-content\">\n                <ng-container [ngSwitch]=\"field.componentType\">\n                    <ng-container *ngSwitchCase=\"'boolean'\">\n                        <pep-boolean-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-boolean-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'date'\">\n                        <pep-date-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-date-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'multi-select'\">\n                        <pep-multi-select-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-multi-select-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'number'\">\n                        <pep-number-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-number-filter>\n                    </ng-container>\n                    <!-- <div *ngSwitchDefault>\n                    </div> -->\n                </ng-container>\n            </div>\n        </mat-expansion-panel>\n    </mat-accordion>\n</div>",
+                template: "<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n    <div *ngIf=\"fields?.length > 0\" class=\"title\">\n        <span class=\"body-md bold\">{{ title?.length > 0 ? title : (\"SMART_FILTERS.TITLE\" | translate)}}</span>\n        <mat-chip *ngIf=\"filtersDataMap.size > 0\" [selectable]=\"false\" [removable]=\"true\" (click)=\"onFiltersClear()\"\n            class=\"clear-filter pep-button chip xs weak\">\n            <span class=\"body-xs ellipsis \">\n                {{ \"ACTIONS.CLEAR\" | translate}}\n            </span>\n        </mat-chip>\n    </div>\n\n    <mat-accordion [displayMode]=\"'flat'\" [multi]=\"true\" class=\"pep-accordion2\">\n        <mat-expansion-panel *ngFor=\"let field of fields; let i = index\" hideToggle=\"true\" [expanded]=\"field.isOpen\"\n            (opened)=\"toggleField(i, true)\" (closed)=\"toggleField(i, false)\">\n            <mat-expansion-panel-header [collapsedHeight]=\"expansionPanelHeaderHeight\"\n                [expandedHeight]=\"expansionPanelHeaderHeight\">\n                <mat-panel-title class=\"pep-spacing-element-negative\">\n                    <div class=\"smart-filter-title-container\">\n                        <mat-icon class=\"pep-spacing-element\">\n                            <pep-icon [name]=\"field.isOpen ? 'number_minus' : 'number_plus'\"></pep-icon>\n                        </mat-icon>\n                        <span class=\"body-sm ellipsis\" [title]=\"field.name\">\n                            {{ field.name }}\n                        </span>\n                        <mat-chip *ngIf=\"filtersDataMap.get(field.id)\" [selectable]=\"false\" [removable]=\"true\"\n                            (click)=\"onFilterClear(field)\" class=\"clear-filter pep-button chip xs weak\">\n                            <span *ngIf=\"field.componentType === 'multi-select'\" class=\"body-xs pep-spacing-element\">\n                                {{ filtersDataMap.get(field.id).value?.first?.length }}\n                                <!-- {{ field.componentType === 'multi-select' ?\n                                filtersDataMap.get(field.id).value?.first?.length : 1 }} -->\n                            </span>\n                            <mat-icon>\n                                <pep-icon name=\"system_close\"></pep-icon>\n                            </mat-icon>\n                        </mat-chip>\n                    </div>\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-content smart-filter-content\">\n                <ng-container [ngSwitch]=\"field.componentType\">\n                    <ng-container *ngSwitchCase=\"'boolean'\">\n                        <pep-boolean-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-boolean-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'date'\">\n                        <pep-date-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-date-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'multi-select'\">\n                        <pep-multi-select-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-multi-select-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'number'\">\n                        <pep-number-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-number-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'text'\">\n                        <pep-text-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-text-filter>\n                    </ng-container>\n                    <!-- <div *ngSwitchDefault>\n                    </div> -->\n                </ng-container>\n            </div>\n        </mat-expansion-panel>\n    </mat-accordion>\n</div>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".smart-filters-container .title{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center;justify-content:space-between}.smart-filters-container .title .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem);padding:0 .75rem;padding:0 var(--pep-spacing-md,.75rem)}.smart-filters-container .title .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container{display:grid;grid-auto-flow:column;grid-template-columns:auto 1fr auto;width:100%}.smart-filters-container .smart-filter-title-container>*{align-self:center}.smart-filters-container .smart-filter-title-container .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;-webkit-margin-end:.5rem;margin-inline-end:.5rem;-webkit-margin-end:var(--pep-spacing-sm,.5rem);margin-inline-end:var(--pep-spacing-sm,.5rem)}.smart-filters-container .smart-filter-title-container .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container .mat-icon pep-icon{height:.75rem;width:.75rem}", ".smart-filters-container .clear-filter.weak{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}.smart-filters-container .clear-filter.weak:hover{background:rgba(26,26,26,.16);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.16)}.smart-filters-container .clear-filter.weak:focus{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative;box-shadow:0 0 0 .25rem rgba(23,102,166,.5);box-shadow:0 0 0 var(--pep-spacing-xs,.25rem) hsla(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%),.5)}.smart-filters-container .clear-filter.weak:focus:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}.smart-filters-container .clear-filter.weak:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}.smart-filters-container .clear-filter.weak:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}.smart-filters-container .clear-filter.weak:active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}.smart-filters-container .clear-filter.weak:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:rgba(26,26,26,.04)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.04)!important}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled):after{border:unset}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled) .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}"]
             },] }
@@ -185,10 +185,10 @@ const Equals = {
     short: '=',
     componentType: [
         'number',
-        'boolean'
+        'boolean',
         // 'multi-select',
         // 'date',
-        // 'text',
+        'text',
         // 'auto-complete',
         // 'select',
     ],
@@ -201,7 +201,7 @@ const NotEqual = {
         'number',
         // 'multi-select',
         // 'date',
-        // 'text',
+        'text',
         // 'auto-complete',
         // 'select',
     ],
@@ -242,18 +242,18 @@ const Contains = {
     short: 'Contains',
     componentType: ['text'],
 };
-// const BeginsWith: Operator = {
-//     id: 'beginsWith',
-//     name: 'Begins With',
-//     short: 'Begins With',
-//     type: ['text'],
-// };
-// const EndsWith: Operator = {
-//     id: 'endsWith',
-//     name: 'Ends With',
-//     short: 'End With',
-//     type: ['text'],
-// };
+const BeginsWith = {
+    id: 'beginsWith',
+    name: 'BEGINS_WITH',
+    short: 'Begins With',
+    componentType: ['text'],
+};
+const EndsWith = {
+    id: 'endsWith',
+    name: 'ENDS_WITH',
+    short: 'End With',
+    componentType: ['text'],
+};
 // const After: Operator = {
 //     id: 'after',
 //     name: 'After',
@@ -347,8 +347,8 @@ const PepSmartFilterOperators = {
     // GreaterThanOrEquals: GreaterThanOrEquals,
     NumberRange: NumberRange,
     Contains: Contains,
-    // BeginsWith: BeginsWith,
-    // EndsWith: EndsWith,
+    BeginsWith: BeginsWith,
+    EndsWith: EndsWith,
     // After: After,
     // Before: Before,
     InTheLast: InTheLast,
@@ -386,17 +386,13 @@ const EqualsToVariable = {
     id: 'eqv',
     name: 'EQUAL_TO_VARIABLE',
     short: '=',
-    componentType: [
-        'text',
-        'number',
-        'boolean'
-    ]
+    componentType: ['text', 'number', 'boolean', 'multi-select']
 };
 const NotEqualsToVariable = {
     id: 'neqv',
     name: 'NOT_EQUAL_TO_VARIABLE',
     short: '<>',
-    componentType: ['boolean']
+    componentType: ['boolean', 'multi-select']
 };
 const LessThanVariable = {
     id: 'ltv',
@@ -410,12 +406,6 @@ const GreaterThanVariable = {
     short: '>',
     componentType: ['number'],
 };
-const InTheLastVariable = {
-    id: 'inTheLastVariable',
-    name: 'IN_THE_LAST_VARIABLE',
-    short: 'In the last Variable',
-    componentType: ['date'],
-};
 const DateRangeVariable = {
     id: 'dateRangeVariable',
     name: 'DATE_RANGE_VARIABLE',
@@ -427,8 +417,7 @@ const PepSmartFilterVariableOperators = {
     NotEqualsToVariable: NotEqualsToVariable,
     LessThanVariable: LessThanVariable,
     GreaterThanVariable: GreaterThanVariable,
-    DateRangeVariable: DateRangeVariable,
-    InTheLastVariable: InTheLastVariable
+    DateRangeVariable: DateRangeVariable
 };
 class IPepSmartFilterOperatorUnit {
 }
@@ -819,7 +808,7 @@ class PepTextFilterComponent extends BaseFilterComponent {
 PepTextFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-text-filter',
-                template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n        [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n        [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n    </pep-select>\n    <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable\">\n        <pep-textbox [fxFlex]=\"inline ? firstControlWidth : null\" [form]=\"form\" [key]=\"firstControlKey\"\n            [label]=\"'SMART_FILTERS.AMOUNT' | translate\" [renderError]=\"false\" [renderTitle]=\"renderTitle\"\n            [type]=\"field.type\" [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onValueChanged()\">\n        </pep-textbox>\n    </ng-container>\n    <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable\">\n        <pep-select [fxFlex]=\"inline ? firstControlWidth : null\" [key]=\"firstControlKey\"\n            [value]=\"firstControl?.value || ''\" [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\"\n            [emptyOption]=\"false\" [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\">\n        </pep-select>\n    </ng-container>\n</div>",
+                template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n        [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n        [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n    </pep-select>\n    <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable\">\n        <pep-textbox [fxFlex]=\"inline ? firstControlWidth : null\" [form]=\"form\" [key]=\"firstControlKey\"\n            [label]=\"'SMART_FILTERS.VALUE' | translate\" [renderError]=\"false\" [renderTitle]=\"renderTitle\"\n            [type]=\"field.type\" [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onValueChanged()\">\n        </pep-textbox>\n    </ng-container>\n    <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable\">\n        <pep-select [fxFlex]=\"inline ? firstControlWidth : null\" [key]=\"firstControlKey\"\n            [value]=\"firstControl?.value || ''\" [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\"\n            [emptyOption]=\"false\" [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\">\n        </pep-select>\n    </ng-container>\n</div>",
                 styles: [""]
             },] }
 ];
@@ -929,7 +918,8 @@ class PepDateFilterComponent extends BaseFilterComponent {
         const filterValue = {
             first: this.firstControl.value,
         };
-        if (this.operator === PepSmartFilterOperators.DateRange) {
+        if (this.operator === PepSmartFilterOperators.DateRange ||
+            PepSmartFilterVariableOperators.DateRangeVariable) {
             filterValue['second'] = this.secondControl.value;
         }
         return filterValue;
@@ -952,7 +942,8 @@ class PepDateFilterComponent extends BaseFilterComponent {
     // Override
     setFieldsStateAndValidators() {
         this.firstControl.enable();
-        if (this.operator === PepSmartFilterOperators.DateRange) {
+        if (this.operator === PepSmartFilterOperators.DateRange ||
+            PepSmartFilterVariableOperators.DateRangeVariable) {
             this.firstControl.setValidators(Validators.required);
             this.secondControl.enable();
             this.secondControl.setValidators(Validators.required);
@@ -1030,6 +1021,12 @@ class PepDateFilterComponent extends BaseFilterComponent {
             this.applyFilter();
         }
     }
+    onSecondVariableChanged(value) {
+        this.secondControl.setValue(value);
+        if (this.emitOnChange) {
+            this.applyFilter();
+        }
+    }
     onDateValueChanged() {
         if (this.emitOnChange) {
             this.applyFilter();
@@ -1039,7 +1036,7 @@ class PepDateFilterComponent extends BaseFilterComponent {
 PepDateFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-date-filter',
-                template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <ng-container>\n        <pep-select [key]=\"'timeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.CHOOSE_TIME' | translate\"\n            [renderTitle]=\"renderTitle\" [emptyOption]=\"false\" [options]=\"chooseTimeOptions\"\n            [fxFlex]=\"inline ? operatorWidth : null\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <div *ngIf=\"operator === PepSmartFilterOperators.InTheLast ||\n                operator === PepSmartFilterAdditionalOperators.InTheLastCalendar || \n                operator === PepSmartFilterOperators.NotInTheLast ||\n                operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar || \n                operator === PepSmartFilterOperators.DueIn ||\n                operator === PepSmartFilterOperators.NotDueIn\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n        <!-- Amount -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\" [type]=\"'int'\"\n            [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onDateValueChanged()\">\n        </pep-textbox>\n        <!-- Time unit -->\n        <pep-select [form]=\"form\" [key]=\"'timeUnit'\" [value]=\"operatorUnit?.id\"\n            [label]=\"'SMART_FILTERS.TIME_UNIT' | translate\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [emptyOption]=\"false\" [options]=\"chooseTimeUnitOptions\" (valueChange)=\"onTimeUnitChanged($event)\">\n        </pep-select>\n    </div>\n    <div pepRtlDirection *ngIf=\"operator === PepSmartFilterOperators.DateRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n        <!-- Start date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.START_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"firstControl?.value || ''\"\n            [maxDateValue]=\"secondControl?.value\" (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n        <!-- End date -->\n        <pep-date [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.END_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"secondControl?.value || ''\"\n            [minDateValue]=\"firstControl?.value\" (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n    </div>\n    <ng-container *ngIf=\"operator === PepSmartFilterOperators.On\">\n        <!-- Choose a date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.CHOOSE_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\n            [fxFlex]=\"inline ? fieldsWidth : null\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n    </ng-container>\n    <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.DateRangeVariable ||\n        operator === PepSmartFilterVariableOperators.InTheLastVariable\">\n        <pep-select [fxFlex]=\"inline ? fieldsWidth : null\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\"></pep-select>\n    </ng-container>\n</div>",
+                template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <ng-container>\n        <pep-select [key]=\"'timeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.CHOOSE_TIME' | translate\"\n            [renderTitle]=\"renderTitle\" [emptyOption]=\"false\" [options]=\"chooseTimeOptions\"\n            [fxFlex]=\"inline ? operatorWidth : null\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <div *ngIf=\"operator === PepSmartFilterOperators.InTheLast ||\n                operator === PepSmartFilterAdditionalOperators.InTheLastCalendar || \n                operator === PepSmartFilterOperators.NotInTheLast ||\n                operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar || \n                operator === PepSmartFilterOperators.DueIn ||\n                operator === PepSmartFilterOperators.NotDueIn\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n        <!-- Amount -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\" [type]=\"'int'\"\n            [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onDateValueChanged()\">\n        </pep-textbox>\n        <!-- Time unit -->\n        <pep-select [form]=\"form\" [key]=\"'timeUnit'\" [value]=\"operatorUnit?.id\"\n            [label]=\"'SMART_FILTERS.TIME_UNIT' | translate\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [emptyOption]=\"false\" [options]=\"chooseTimeUnitOptions\" (valueChange)=\"onTimeUnitChanged($event)\">\n        </pep-select>\n    </div>\n    <div pepRtlDirection *ngIf=\"operator === PepSmartFilterOperators.DateRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n        <!-- Start date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.START_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"firstControl?.value || ''\"\n            [maxDateValue]=\"secondControl?.value\" (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n        <!-- End date -->\n        <pep-date [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.END_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"secondControl?.value || ''\"\n            [minDateValue]=\"firstControl?.value\" (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n    </div>\n    <ng-container *ngIf=\"operator === PepSmartFilterOperators.On\">\n        <!-- Choose a date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.CHOOSE_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\n            [fxFlex]=\"inline ? fieldsWidth : null\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n    </ng-container>\n    <div pepRtlDirection *ngIf=\"operator === PepSmartFilterVariableOperators.DateRangeVariable\" fxLayout=\"row\"\n        fxLayout.xs=\"column\" fxLayoutGap=\".5rem\" fxFlex=\"fieldsWidth\">\n        <pep-select fxFlex=\"50%\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\"></pep-select>\n        <pep-select fxFlex=\"50%\" [key]=\"secondControlKey\" [value]=\"secondControl?.value || ''\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"variableFieldOptions\" (valueChange)=\"onSecondVariableChanged($event)\"></pep-select>\n    </div>\n</div>\n",
                 styles: [""]
             },] }
 ];
@@ -1052,7 +1049,9 @@ class PepMultiSelectFilterOption {
 class PepMultiSelectFilterComponent extends BaseFilterComponent {
     constructor() {
         super(...arguments);
+        this.PepSmartFilterVariableOperators = PepSmartFilterVariableOperators;
         this.options = [];
+        this.chooseTypeOptions = [];
         this.searchControl = new FormControl();
         //inline props
         this.selected = '';
@@ -1064,6 +1063,7 @@ class PepMultiSelectFilterComponent extends BaseFilterComponent {
         super.ngOnInit;
         if (this.inline) {
             this.inlineControlInit();
+            this.setControlsWidth();
         }
         else {
             this.noneInlineControlInit();
@@ -1074,11 +1074,11 @@ class PepMultiSelectFilterComponent extends BaseFilterComponent {
         this.calcOptionsHeight(this.options.length);
     }
     inlineControlInit() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         //load options from field
         this.inlineOptions = ((_b = (_a = this.field) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length) > 0 ? this.field.options : [];
-        // Init the selected values from first value.
-        if (((_d = (_c = this.firstControl) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.length) > 0) {
+        // init the selected values from first value.
+        if (((_c = this.firstControl) === null || _c === void 0 ? void 0 : _c.value) && Array.isArray(this.firstControl.value)) {
             this.selected = this.firstControl.value.join(';');
         }
     }
@@ -1157,6 +1157,35 @@ class PepMultiSelectFilterComponent extends BaseFilterComponent {
         }
     }
     // Override
+    loadOperatorsOptions() {
+        this.chooseTypeOptions = this.operators.map((operator) => {
+            return {
+                key: operator.id,
+                value: this.translate.instant(`${this.OPERATORS_TRANSLATION_PREFIX}.${operator.name}`),
+            };
+        });
+    }
+    setControlsWidth() {
+        var _a;
+        if ((_a = this.variableFieldOptions) === null || _a === void 0 ? void 0 : _a.length) {
+            this.operatorWidth = '38%';
+            this.valueWidth = '62%';
+        }
+        else {
+            this.valueWidth = '100%';
+        }
+    }
+    onOperatorChanged(value) {
+        const operator = Object.values(this.operators).find((operator) => operator.id === value);
+        this.operator = operator;
+        if (this._parentForm) {
+            this.updateParentForm();
+        }
+        if (this.emitOnChange) {
+            this.applyFilter();
+        }
+    }
+    // Override
     initFilter() {
         this.options.forEach((opt) => (opt.selected = false));
         this.searchControl.setValue('');
@@ -1177,11 +1206,17 @@ class PepMultiSelectFilterComponent extends BaseFilterComponent {
             this.applyFilter();
         }
     }
+    onValueChanged(value) {
+        this.firstControl.setValue(value);
+        if (this.emitOnChange) {
+            this.applyFilter();
+        }
+    }
 }
 PepMultiSelectFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-multi-select-filter',
-                template: "<ng-container *ngIf=\"inline\">\n    <pep-select [key]=\"'multi1'\" [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\" [value]=\"selected\"\n        [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n        (valueChange)=\"onMultiSelectChanged($event)\">\n    </pep-select>\n</ng-container>\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\n    <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\n        [triggerOn]=\"'keydown'\" shrink=\"never\"></pep-search>\n    <div pepRtlClass class=\"multi-select-options pep-border-top pep-border-bottom\"\n        [ngClass]=\"{'with-no-search': options?.length <= numberOptionsToShowSearch}\">\n        <div #optionsContainer class=\"flip-scroll\" pepRtlClass>\n            <virtual-scroller #scroll [items]=\"filteredOptions$ | async\" [parentScroll]=\"optionsContainer\">\n                <mat-checkbox *ngFor=\"let opt of scroll.viewPortItems\"\n                    class=\"pep-checkbox-container pep-input no-default-background md\" [title]=\"opt.value\"\n                    [checked]=\"opt.selected\" (change)=\"onOptionChange(opt, $event)\">\n                    <div class=\"title\">\n                        <span class=\"body-sm ellipsis\">{{ opt.value }}</span>\n                        <span *ngIf=\"opt.count\" class=\"color-dimmed body-xs ellipsis\">({{opt.count}})</span>\n                    </div>\n                </mat-checkbox>\n                <ng-container *ngIf=\"scroll.viewPortItems?.length === 0\">\n                    <span class=\"no-options body-sm ellipsis\" [title]=\"field.name\">\n                        {{ ( options.length > 0 ? \"SMART_FILTERS.NO_SEARCH_RESULTS\" : \"SMART_FILTERS.NO_OPTIONS\") |\n                        translate }}\n                    </span>\n                </ng-container>\n            </virtual-scroller>\n        </div>\n    </div>\n</div>",
+                template: "<ng-container *ngIf=\"inline\">\n    <ng-container *ngIf=\"variableFieldOptions?.length\">\n        <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n            <pep-select [fxFlex]=\"operatorWidth\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n                [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n            </pep-select>\n            <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable || \n                operator === PepSmartFilterVariableOperators.NotEqualsToVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n                    [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                    [options]=\"variableFieldOptions\" (valueChange)=\"onValueChanged($event)\">\n                </pep-select>\n            </ng-container>\n            <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n                operator !== PepSmartFilterVariableOperators.NotEqualsToVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\"\n                    [value]=\"selected\" [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n                    (valueChange)=\"onMultiSelectChanged($event)\">\n                </pep-select>\n            </ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"!variableFieldOptions || !variableFieldOptions.length\">\n        <pep-select [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\" [value]=\"selected\"\n            [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n            (valueChange)=\"onMultiSelectChanged($event)\">\n        </pep-select>\n    </ng-container>\n</ng-container>\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\n    <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\n        [triggerOn]=\"'keydown'\" shrink=\"never\"></pep-search>\n    <div pepRtlClass class=\"multi-select-options pep-border-top pep-border-bottom\"\n        [ngClass]=\"{'with-no-search': options?.length <= numberOptionsToShowSearch}\">\n        <div #optionsContainer class=\"flip-scroll\" pepRtlClass>\n            <virtual-scroller #scroll [items]=\"filteredOptions$ | async\" [parentScroll]=\"optionsContainer\">\n                <mat-checkbox *ngFor=\"let opt of scroll.viewPortItems\"\n                    class=\"pep-checkbox-container pep-input no-default-background md\" [title]=\"opt.value\"\n                    [checked]=\"opt.selected\" (change)=\"onOptionChange(opt, $event)\">\n                    <div class=\"title\">\n                        <span class=\"body-sm ellipsis\">{{ opt.value }}</span>\n                        <span *ngIf=\"opt.count\" class=\"color-dimmed body-xs ellipsis\">({{opt.count}})</span>\n                    </div>\n                </mat-checkbox>\n                <ng-container *ngIf=\"scroll.viewPortItems?.length === 0\">\n                    <span class=\"no-options body-sm ellipsis\" [title]=\"field.name\">\n                        {{ ( options.length > 0 ? \"SMART_FILTERS.NO_SEARCH_RESULTS\" : \"SMART_FILTERS.NO_OPTIONS\") |\n                        translate }}\n                    </span>\n                </ng-container>\n            </virtual-scroller>\n        </div>\n    </div>\n</div>",
                 styles: [".multi-select-options{margin:.5rem calc(.25rem * -1) 0;margin:var(--pep-spacing-sm,.5rem) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options.with-no-search{margin:calc(.5rem * -1) calc(.25rem * -1) 0;margin:calc(var(--pep-spacing-sm, .5rem) * -1) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options .no-options{display:flex;padding:.5rem .75rem;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-md,.75rem)}.multi-select-options .flip-scroll{padding:.5rem .25rem;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-xs,.25rem);min-height:3.25rem;max-height:34.75rem;direction:rtl}.multi-select-options .flip-scroll.rtl,.multi-select-options .flip-scroll virtual-scroller{direction:ltr}.multi-select-options .flip-scroll.rtl virtual-scroller{direction:rtl}.multi-select-options .pep-checkbox-container{height:2.25rem;-webkit-padding-end:0;padding-inline-end:0}.multi-select-options .pep-checkbox-container ::ng-deep.mat-checkbox-layout{width:100%;height:100%;grid-template-columns:auto 1fr}.multi-select-options .pep-checkbox-container ::ng-deep.mat-checkbox-layout .mat-checkbox-label{align-self:center}.multi-select-options .pep-checkbox-container .title{display:grid;grid-auto-flow:column;justify-content:space-between;align-items:center;margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem)}"]
             },] }
 ];