verben-ng-ui 1.2.11 → 1.2.13

package/fesm2022/verben-ng-ui.mjs

@@ -9,7 +9,7 @@ import * as i2$1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl, FormGroup, Validators, ReactiveFormsModule, FormArray } from '@angular/forms';
 import { isEqual, cloneDeep } from 'lodash';
 import { Subject, debounceTime, BehaviorSubject, Subscription, of } from 'rxjs';
-import * as i3 from '@angular/cdk/overlay';
+import * as i1$2 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { debounceTime as debounceTime$1, catchError } from 'rxjs/operators';
 import * as i2$2 from '@angular/cdk/scrolling';
@@ -1527,7 +1527,7 @@ class DropDownComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DropDownComponent, deps: [{ token: i2$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: DropDownComponent, isStandalone: true, selector: "verben-drop-down", inputs: { options: "options", width: "width", showHorizontalLine: "showHorizontalLine", horizontalLineColor: "horizontalLineColor", optionLabel: "optionLabel", optionSubLabel: "optionSubLabel", optionValue: "optionValue", placeholder: "placeholder", invalidMessage: "invalidMessage", errorPosition: "errorPosition", loadMoreCaption: "loadMoreCaption", display: "display", showClear: "showClear", lazyLoad: "lazyLoad", selectKey: "selectKey", styleClass: "styleClass", group: "group", multiselect: "multiselect", filter: "filter", avoidDuplication: "avoidDuplication", filterBy: "filterBy", debounceTime: "debounceTime", minChar: "minChar", disabled: "disabled", required: "required", load: "load", asyncLabel: "asyncLabel", search: "search" }, outputs: { optionsChange: "optionsChange", onChange: "onChange", onClick: "onClick", onClear: "onClear" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "document:click": "onClickOutside($event)" }, properties: { "class.focused": "this.isFocused" } }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, static: true }, { propertyName: "dropdownExpansion", first: true, predicate: ["dropdownExpansion"], descendants: true }], ngImport: i0, template: "<div #dropdownContainer [ngClass]=\"styleClass\" [style.width]=\"width\" class=\"drop-down\">\n  <div\n    [ngClass]=\"{'right-error': errorPosition == 'right', 'left-error': errorPosition == 'left', 'top-error': errorPosition == 'top'}\"\n    class=\"drop-down-input-wrapper\">\n    <div (click)=\"onDropdownClick($event)\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" [class.focused]=\"isFocused\"\n      [ngClass]=\"{'ng-invalid': isInvalid, 'disabled': disabled}\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" tabindex=\"0\"\n      class=\"drop-down-input verben-input flex\">\n      <div class=\"drop-down-main-content\">\n        <ng-container\n          *ngIf=\"(selectedItemTemplate && selectedOption) || (selectedItemTemplate && selectedOptions.length > 0); else defaultItem\">\n          <div *ngIf=\"!multiselect\">\n            <ng-container\n              *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: selectedOption }\"></ng-container>\n          </div>\n          <div *ngIf=\"multiselect\">\n            <ng-container\n              *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: selectedOptions }\"></ng-container>\n          </div>\n        </ng-container>\n\n        <ng-template #defaultItem>\n          <div *ngIf=\"!multiselect\" class=\"default-item flex\">\n            <div class=\"dropdown-label place-holder\" *ngIf=\"!this.selectedOption\">{{placeholder}}</div>\n            <div *ngIf=\"this.selectedOption\" class=\"item-label dropdown-label\">\n              {{this.selectedOptionLabel}}</div>\n          </div>\n          <div *ngIf=\"multiselect\" class=\"default-item multi-select flex\">\n            <div class=\"dropdown-label place-holder\" *ngIf=\"this.selectedOptions.length == 0\">{{placeholder}}</div>\n            <verben-tooltip customClass=\"custom-tooltip-width\" border=\"1px solid #334155\" backgroundColor=\"white\"\n              [tooltipContent]=\"multiselectTooltip\">\n              <div *ngIf=\"this.selectedOptions.length > 0\" class=\"item-label dropdown-label\">\n                <div *ngIf=\"display == 'chip'\" class=\"multiselect-items-container-two chip\">\n                  <span *ngFor=\"let item of selectedOptionLabels; index as i\"\n                    class=\"multiselect-item-chip multi-select flex\">\n                    <span>{{item}}</span>\n                    <verben-svg (click)=\"onMultiselectItemClosed(i, $event); $event.stopPropagation();\"\n                      icon=\"close-circle-full\" [width]=\"15\" [height]=\"15\"></verben-svg>\n                    <!-- <svg (click)=\"onMultiselectItemClosed(i, $event); $event.stopPropagation();\" width=\"10\" height=\"10\"\n                      viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M5.00065 9.33333C7.30184 9.33333 9.16732 7.46785 9.16732 5.16667C9.16732 2.86548 7.30184 1 5.00065 1C2.69946 1 0.833984 2.86548 0.833984 5.16667C0.833984 7.46785 2.69946 9.33333 5.00065 9.33333Z\"\n                        stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path d=\"M6.25 3.91797L3.75 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                      <path d=\"M3.75 3.91797L6.25 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                    </svg> -->\n                  </span>\n                </div>\n                <div *ngIf=\"display != 'chip'\" class=\"multiselect-items-container-two normal\">\n                  <span *ngFor=\"let item of selectedOptionLabels; index as i\" class=\"multiselect-item\">\n                    {{i !== selectedOptionLabels.length - 1? item + ', ':item}}\n                  </span>\n                </div>\n              </div>\n            </verben-tooltip>\n            <ng-template #multiselectTooltip>\n              <div class=\"multi-select-full-view\">\n                <div *ngIf=\"this.selectedOptions.length > 0\" class=\"item-label dropdown-label\">\n                  <div *ngIf=\"display == 'chip'\" class=\"multiselect-items-container-two-tooltip chip\">\n                    <span *ngFor=\"let item of selectedOptionLabels; index as i\"\n                      class=\"multiselect-item-chip multi-select flex\">\n                      <span>{{item}}</span>\n                      <verben-svg (click)=\"onMultiselectItemClosed(i, $event); $event.stopPropagation();\"\n                        icon=\"close-circle-full\" [width]=\"15\" [height]=\"15\"></verben-svg>\n                      <!-- <svg (click)=\"onMultiselectItemClosed(i, $event); $event.stopPropagation();\" width=\"10\" height=\"10\"\n                        viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path\n                          d=\"M5.00065 9.33333C7.30184 9.33333 9.16732 7.46785 9.16732 5.16667C9.16732 2.86548 7.30184 1 5.00065 1C2.69946 1 0.833984 2.86548 0.833984 5.16667C0.833984 7.46785 2.69946 9.33333 5.00065 9.33333Z\"\n                          stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M6.25 3.91797L3.75 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\" />\n                        <path d=\"M3.75 3.91797L6.25 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\" />\n                      </svg> -->\n                    </span>\n                  </div>\n                  <div *ngIf=\"display != 'chip'\" class=\"multiselect-items-container-two-tooltip-normal\">\n                    <span *ngFor=\"let item of selectedOptionLabels; index as i\" class=\"multiselect-item\">\n                      {{i !== selectedOptionLabels.length - 1? item + ', ':item}}\n                    </span>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </div>\n        </ng-template>\n      </div>\n      <span\n        *ngIf=\"(showClear && this.selectedOption && !multiselect) || (showClear && this.selectedOptions.length > 0 && multiselect)\"\n        (click)=\"this.clearSelection($event); $event.stopPropagation()\"\n        class=\"drop-down-icon-item drop-down-clear-button\">\n        <verben-svg icon=\"close-no-circle\" stroke=\"#94a3b8\" [width]=\"13\" [height]=\"13\"></verben-svg>\n        <!-- <svg width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M0.84375 0.84375L8.15625 8.15625\" stroke=\"currentColor\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M0.84375 8.15625L8.15625 0.84375\" stroke=\"currentColor\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg> -->\n      </span>\n      <span class=\"drop-down-icon-item drop-down-expand-button\">\n        <verben-svg icon=\"chevron-down\" fill=\"#94a3b8\" [width]=\"15\" [height]=\"8\"></verben-svg>\n        <!-- <svg width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6.00507 4.88027C6.20205 4.62775 6.30683 4.4622 6.44095 4.32704C7.74334 3.01731 9.05202 1.71387 10.3576 0.406242C10.5713 0.192495 10.7882 0.00913367 11.1193 0.0101814C11.4692 0.0112292 11.7228 0.15792 11.8884 0.456537C12.057 0.760394 12.0309 1.06111 11.8349 1.34296C11.7658 1.4425 11.6767 1.52737 11.5908 1.61433C9.98873 3.21639 8.37305 4.80483 6.793 6.42784C6.29111 6.94335 5.68759 6.92344 5.21399 6.43832C3.63184 4.8174 2.01826 3.22687 0.414109 1.62691C0.116539 1.32934 -0.116067 1.0192 0.0620561 0.565507C0.271612 0.031139 0.883519 -0.167941 1.35502 0.157919C1.49647 0.255363 1.61592 0.387385 1.73955 0.509975C3.02204 1.79036 4.30452 3.07075 5.58386 4.35533C5.70645 4.47792 5.80284 4.62671 6.00611 4.88132L6.00507 4.88027Z\"\n            fill=\"currentColor\" />\n        </svg> -->\n      </span>\n    </div>\n    <div *ngIf=\"this.isInvalid && this.invalidMessage\" class=\"verben-error-message error-message\">{{invalidMessage}}\n    </div>\n  </div>\n  <ng-template cdkConnectedOverlay [cdkConnectedOverlayWidth]=\"dropdownContainer.offsetWidth\"\n    [cdkConnectedOverlayLockPosition]=\"false\" [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayPositions]=\"[\n    {\n      originX: 'start',\n      originY: 'bottom',\n      overlayX: 'start',\n      overlayY: 'top'\n    },\n    {\n      originX: 'start',\n      originY: 'top',\n      overlayX: 'start',\n      overlayY: 'bottom'\n    }\n  ]\" [cdkConnectedOverlayOpen]=\"isExpanded\" (detach)=\"isExpanded = false\">\n    <div #dropdownExpansion class=\"drop-down-menu-item-wrapper\">\n      <div *ngIf=\"multiselect && this.selectedOptions.length > 0\">\n        <div *ngIf=\"display == 'chip'\" class=\"multiselect-items-container chip flex\">\n          <span *ngFor=\"let item of selectedOptionLabels; index as i\" class=\"multiselect-item-chip flex\">\n            <span>{{item}}</span>\n            <verben-svg (click)=\"onMultiselectItemClosed(i, $event)\" icon=\"close-circle-full\" [width]=\"15\"\n              [height]=\"15\"></verben-svg>\n            <!-- <svg (click)=\"onMultiselectItemClosed(i, $event)\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M5.00065 9.33333C7.30184 9.33333 9.16732 7.46785 9.16732 5.16667C9.16732 2.86548 7.30184 1 5.00065 1C2.69946 1 0.833984 2.86548 0.833984 5.16667C0.833984 7.46785 2.69946 9.33333 5.00065 9.33333Z\"\n                stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M6.25 3.91797L3.75 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M3.75 3.91797L6.25 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg> -->\n          </span>\n        </div>\n        <div *ngIf=\"display != 'chip'\" class=\"multiselect-items-container normal\">\n          <span *ngFor=\"let item of selectedOptionLabels; index as i\" class=\"multiselect-item\">\n            {{i !== selectedOptionLabels.length - 1? item + ', ':item}}\n          </span>\n        </div>\n      </div>\n      <div *ngIf=\"allowSelectAll || filter\" class=\"actions-section flex\">\n        <input *ngIf=\"allowSelectAll\" (click)=\"onSelectAll($event)\" type=\"checkbox\" [(ngModel)]=\"selectedAll\"\n          class=\"custom-checkbox\" />\n        <span class=\"select-all-caption\" *ngIf=\"allowSelectAll && !filter\">Select All</span>\n        <div *ngIf=\"filter\" [ngClass]=\"{'focused': isInputFocused}\" tabindex=\"0\" (focus)=\"onSearchFocus()\"\n          (blur)=\"onSearchBlur()\" class=\"search-section flex\">\n          <span class=\"search-icon flex\">\n            <verben-svg icon=\"search\" stroke=\"#64748b\" [width]=\"15\" [height]=\"15\"></verben-svg>\n            <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n              <circle cx=\"9\" cy=\"9\" r=\"8\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"></circle>\n              <line x1=\"14\" y1=\"14\" x2=\"19\" y2=\"19\" stroke=\"currentColor\" stroke-width=\"2\"></line>\n            </svg> -->\n          </span>\n          <span *ngIf=\"this.selectedContexts[this.selectedContexts.length - 1]\" class=\"search-context\">\n            {{this.getOptionLabel(this.selectedContexts[this.selectedContexts.length - 1])}}\n          </span>\n          <div class=\"search-input-container\">\n            <input (input)=\"onSearch($event)\" [(ngModel)]=\"searchContext\" (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur()\" placeholder=\"Search...\" class=\"search-input\" />\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"showHorizontalLine\" class=\"colored-underline-section\">\n        <hr [style.background-color]=\"horizontalLineColor\" class=\"colored-underline\" />\n      </div>\n      <div class=\"drop-down-menu-item\">\n        <drop-down-item [itemTemplate]=\"itemTemplate\" [groupTemplate]=\"groupTemplate\" [activeItem]=\"selectedOption\"\n          [activeItems]=\"selectedOptions\" [multiselect]=\"multiselect\" [optionValue]=\"optionValue\"\n          [optionLabel]=\"optionLabel\" [optionSubLabel]=\"optionSubLabel\" [selectKey]=\"selectKey\"\n          [loadMoreCaption]=\"loadMoreCaption\" [options]=\"options\" [group]=\"group\" [onExpand]=\"expandMenu.bind(this)\"\n          [onLoadMore]=\"loadMoreMenuItems.bind(this)\" [onSelect]=\"onSelect.bind(this)\"></drop-down-item>\n        <div *ngIf=\"lazyLoad\">\n          <div class=\"see-more-container flex justify-end\">\n            <span class=\"see-more-caption\" (click)=\"loadMore()\">{{loadMoreCaption}}</span>\n          </div>\n        </div>\n        <div *ngIf=\"isLoading\" class=\"loading-overlay\">\n          <div class=\"loader\"></div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: ["*{font-family:sans-serif;font-size:.9rem}.w-100{width:100%}.h-100{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.error-message{position:absolute;z-index:1;left:0;right:0;bottom:-20px}.top-error .error-message{top:-20px!important;bottom:initial!important}.left-error .error-message{bottom:50%!important;right:calc(100% + 10px)!important;width:max-content;left:initial!important;transform:translateY(50%)}.right-error .error-message{bottom:50%!important;left:calc(100% + 10px)!important;width:max-content;right:initial!important;transform:translateY(50%)}.drop-down{position:relative;cursor:pointer}.drop-down-menu-item-wrapper{min-width:calc(100% - 4px);margin-top:3px;background:#fff;color:#334155;border:1px solid #e2e8f0;border-radius:5px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.drop-down-menu-item{max-height:200px;overflow-y:auto;padding:4px;box-sizing:content-box}.drop-down-input-wrapper{position:relative}.drop-down-input{align-items:center;min-height:39px}.drop-down-input.disabled .dropdown-label{color:#64748b}.drop-down-main-content{flex:1 1 0;padding:8px;min-width:0}.drop-down-icon-item.drop-down-clear-button{padding:8px 5px}.drop-down-icon-item>svg{width:.8rem;height:.8rem;display:flex}.drop-down-icon-item.drop-down-clear-button>svg{color:#94a3b8}.drop-down-icon-item.drop-down-expand-button{padding:8px 8px 8px 5px}.drop-down-icon-item.drop-down-expand-button>svg{color:#94a3b8}.drop-down-input.disabled .drop-down-icon-item>svg{color:#64748b}.dropdown-label{color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-label.place-holder{color:#64748b}.default-item{align-items:center}.default-item>div{flex:1 1 0;width:100%}.see-more-container{padding:5px}.see-more-caption{font-size:12px;color:#3b82f6}.actions-section{gap:5px;margin:10px;align-items:center}.select-all-caption{font-weight:600}.search-section{flex:1 1 0;border:1px solid transparent;padding:2px 10px;border-radius:24px;gap:3px;background-color:#d9d9d940;align-items:center}.search-section.focused{border-color:#3b82f6;outline:none}.search-icon>svg{color:#64748b;width:.8rem;height:.8rem}.search-input-container{flex:1 1 0}.search-input{width:100%;border:none;outline:none;background-color:transparent}.search-context{max-width:45px;border-radius:5px;padding:3px 5px;background-color:#3479e980;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.colored-underline{height:4px;border:none}.multiselect-items-container{padding:10px}.multiselect-items-container.normal{max-width:100%;overflow-x:auto;white-space:nowrap}.multiselect-items-container.chip{max-width:100%;overflow-x:auto;white-space:nowrap;gap:5px}.multiselect-items-container-two.normal{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multiselect-items-container-two.chip{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;gap:5px}.multiselect-items-container-two-tooltip{display:grid;flex-wrap:wrap;gap:10px 5px;grid-template-columns:repeat(2,1fr)}.multiselect-items-container-two-tooltip-normal{display:flex;flex-wrap:wrap}.multiselect-items-container-two-tooltip .multiselect-item-chip{justify-content:space-between}.multiselect-item-chip{align-items:center;gap:5px;border-radius:5px;padding:1px 5px;background-color:#3479e980}.multiselect-item-chip.multi-select{margin-right:5px;display:inline-flex!important}.multiselect-item-chip>span{max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multiselect-item-chip>svg{width:12px;height:12px}verben-tooltip{width:100%}::ng-deep .custom-tooltip-width{max-width:300px;max-height:500px;overflow-y:auto}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#4d4b4b80;z-index:10;display:flex;justify-content:center;align-items:center;pointer-events:none}.loader{width:50px;padding:8px;aspect-ratio:1;border-radius:50%;background:#3b82f6;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}@keyframes l3{to{transform:rotate(1turn)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropDownItemComponent, selector: "drop-down-item", inputs: ["itemTemplate", "groupTemplate", "activeItem", "activeItems", "selectKey", "optionValue", "optionLabel", "optionSubLabel", "loadMoreCaption", "multiselect", "options", "group", "onExpand", "onLoadMore", "onSelect"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SvgModule }, { kind: "component", type: SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: TooltipComponent, selector: "verben-tooltip", inputs: ["tooltipContent", "customClass", "backgroundColor", "textColor", "padding", "borderRadius", "zIndex", "border", "width", "top", "bottom", "left", "right"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: DropDownComponent, isStandalone: true, selector: "verben-drop-down", inputs: { options: "options", width: "width", showHorizontalLine: "showHorizontalLine", horizontalLineColor: "horizontalLineColor", optionLabel: "optionLabel", optionSubLabel: "optionSubLabel", optionValue: "optionValue", placeholder: "placeholder", invalidMessage: "invalidMessage", errorPosition: "errorPosition", loadMoreCaption: "loadMoreCaption", display: "display", showClear: "showClear", lazyLoad: "lazyLoad", selectKey: "selectKey", styleClass: "styleClass", group: "group", multiselect: "multiselect", filter: "filter", avoidDuplication: "avoidDuplication", filterBy: "filterBy", debounceTime: "debounceTime", minChar: "minChar", disabled: "disabled", required: "required", load: "load", asyncLabel: "asyncLabel", search: "search" }, outputs: { optionsChange: "optionsChange", onChange: "onChange", onClick: "onClick", onClear: "onClear" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "document:click": "onClickOutside($event)" }, properties: { "class.focused": "this.isFocused" } }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, static: true }, { propertyName: "dropdownExpansion", first: true, predicate: ["dropdownExpansion"], descendants: true }], ngImport: i0, template: "<div #dropdownContainer [ngClass]=\"styleClass\" [style.width]=\"width\" class=\"drop-down\">\n  <div\n    [ngClass]=\"{'right-error': errorPosition == 'right', 'left-error': errorPosition == 'left', 'top-error': errorPosition == 'top'}\"\n    class=\"drop-down-input-wrapper\">\n    <div (click)=\"onDropdownClick($event)\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" [class.focused]=\"isFocused\"\n      [ngClass]=\"{'ng-invalid': isInvalid, 'disabled': disabled}\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" tabindex=\"0\"\n      class=\"drop-down-input verben-input flex\">\n      <div class=\"drop-down-main-content\">\n        <ng-container\n          *ngIf=\"(selectedItemTemplate && selectedOption) || (selectedItemTemplate && selectedOptions.length > 0); else defaultItem\">\n          <div *ngIf=\"!multiselect\">\n            <ng-container\n              *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: selectedOption }\"></ng-container>\n          </div>\n          <div *ngIf=\"multiselect\">\n            <ng-container\n              *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: selectedOptions }\"></ng-container>\n          </div>\n        </ng-container>\n\n        <ng-template #defaultItem>\n          <div *ngIf=\"!multiselect\" class=\"default-item flex\">\n            <div class=\"dropdown-label place-holder\" *ngIf=\"!this.selectedOption\">{{placeholder}}</div>\n            <div *ngIf=\"this.selectedOption\" class=\"item-label dropdown-label\">\n              {{this.selectedOptionLabel}}</div>\n          </div>\n          <div *ngIf=\"multiselect\" class=\"default-item multi-select flex\">\n            <div class=\"dropdown-label place-holder\" *ngIf=\"this.selectedOptions.length == 0\">{{placeholder}}</div>\n            <verben-tooltip customClass=\"custom-tooltip-width\" border=\"1px solid #334155\" backgroundColor=\"white\"\n              [tooltipContent]=\"multiselectTooltip\">\n              <div *ngIf=\"this.selectedOptions.length > 0\" class=\"item-label dropdown-label\">\n                <div *ngIf=\"display == 'chip'\" class=\"multiselect-items-container-two chip\">\n                  <span *ngFor=\"let item of selectedOptionLabels; index as i\"\n                    class=\"multiselect-item-chip multi-select flex\">\n                    <span>{{item}}</span>\n                    <verben-svg (click)=\"onMultiselectItemClosed(i, $event); $event.stopPropagation();\"\n                      icon=\"close-circle-full\" [width]=\"15\" [height]=\"15\"></verben-svg>\n                    <!-- <svg (click)=\"onMultiselectItemClosed(i, $event); $event.stopPropagation();\" width=\"10\" height=\"10\"\n                      viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M5.00065 9.33333C7.30184 9.33333 9.16732 7.46785 9.16732 5.16667C9.16732 2.86548 7.30184 1 5.00065 1C2.69946 1 0.833984 2.86548 0.833984 5.16667C0.833984 7.46785 2.69946 9.33333 5.00065 9.33333Z\"\n                        stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path d=\"M6.25 3.91797L3.75 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                      <path d=\"M3.75 3.91797L6.25 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                    </svg> -->\n                  </span>\n                </div>\n                <div *ngIf=\"display != 'chip'\" class=\"multiselect-items-container-two normal\">\n                  <span *ngFor=\"let item of selectedOptionLabels; index as i\" class=\"multiselect-item\">\n                    {{i !== selectedOptionLabels.length - 1? item + ', ':item}}\n                  </span>\n                </div>\n              </div>\n            </verben-tooltip>\n            <ng-template #multiselectTooltip>\n              <div class=\"multi-select-full-view\">\n                <div *ngIf=\"this.selectedOptions.length > 0\" class=\"item-label dropdown-label\">\n                  <div *ngIf=\"display == 'chip'\" class=\"multiselect-items-container-two-tooltip chip\">\n                    <span *ngFor=\"let item of selectedOptionLabels; index as i\"\n                      class=\"multiselect-item-chip multi-select flex\">\n                      <span>{{item}}</span>\n                      <verben-svg (click)=\"onMultiselectItemClosed(i, $event); $event.stopPropagation();\"\n                        icon=\"close-circle-full\" [width]=\"15\" [height]=\"15\"></verben-svg>\n                      <!-- <svg (click)=\"onMultiselectItemClosed(i, $event); $event.stopPropagation();\" width=\"10\" height=\"10\"\n                        viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path\n                          d=\"M5.00065 9.33333C7.30184 9.33333 9.16732 7.46785 9.16732 5.16667C9.16732 2.86548 7.30184 1 5.00065 1C2.69946 1 0.833984 2.86548 0.833984 5.16667C0.833984 7.46785 2.69946 9.33333 5.00065 9.33333Z\"\n                          stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M6.25 3.91797L3.75 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\" />\n                        <path d=\"M3.75 3.91797L6.25 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\" />\n                      </svg> -->\n                    </span>\n                  </div>\n                  <div *ngIf=\"display != 'chip'\" class=\"multiselect-items-container-two-tooltip-normal\">\n                    <span *ngFor=\"let item of selectedOptionLabels; index as i\" class=\"multiselect-item\">\n                      {{i !== selectedOptionLabels.length - 1? item + ', ':item}}\n                    </span>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </div>\n        </ng-template>\n      </div>\n      <span\n        *ngIf=\"(showClear && this.selectedOption && !multiselect) || (showClear && this.selectedOptions.length > 0 && multiselect)\"\n        (click)=\"this.clearSelection($event); $event.stopPropagation()\"\n        class=\"drop-down-icon-item drop-down-clear-button\">\n        <verben-svg icon=\"close-no-circle\" stroke=\"#94a3b8\" [width]=\"13\" [height]=\"13\"></verben-svg>\n        <!-- <svg width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M0.84375 0.84375L8.15625 8.15625\" stroke=\"currentColor\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M0.84375 8.15625L8.15625 0.84375\" stroke=\"currentColor\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg> -->\n      </span>\n      <span class=\"drop-down-icon-item drop-down-expand-button\">\n        <verben-svg icon=\"chevron-down\" fill=\"#94a3b8\" [width]=\"15\" [height]=\"8\"></verben-svg>\n        <!-- <svg width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6.00507 4.88027C6.20205 4.62775 6.30683 4.4622 6.44095 4.32704C7.74334 3.01731 9.05202 1.71387 10.3576 0.406242C10.5713 0.192495 10.7882 0.00913367 11.1193 0.0101814C11.4692 0.0112292 11.7228 0.15792 11.8884 0.456537C12.057 0.760394 12.0309 1.06111 11.8349 1.34296C11.7658 1.4425 11.6767 1.52737 11.5908 1.61433C9.98873 3.21639 8.37305 4.80483 6.793 6.42784C6.29111 6.94335 5.68759 6.92344 5.21399 6.43832C3.63184 4.8174 2.01826 3.22687 0.414109 1.62691C0.116539 1.32934 -0.116067 1.0192 0.0620561 0.565507C0.271612 0.031139 0.883519 -0.167941 1.35502 0.157919C1.49647 0.255363 1.61592 0.387385 1.73955 0.509975C3.02204 1.79036 4.30452 3.07075 5.58386 4.35533C5.70645 4.47792 5.80284 4.62671 6.00611 4.88132L6.00507 4.88027Z\"\n            fill=\"currentColor\" />\n        </svg> -->\n      </span>\n    </div>\n    <div *ngIf=\"this.isInvalid && this.invalidMessage\" class=\"verben-error-message error-message\">{{invalidMessage}}\n    </div>\n  </div>\n  <ng-template cdkConnectedOverlay [cdkConnectedOverlayWidth]=\"dropdownContainer.offsetWidth\"\n    [cdkConnectedOverlayLockPosition]=\"false\" [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayPositions]=\"[\n    {\n      originX: 'start',\n      originY: 'bottom',\n      overlayX: 'start',\n      overlayY: 'top'\n    },\n    {\n      originX: 'start',\n      originY: 'top',\n      overlayX: 'start',\n      overlayY: 'bottom'\n    }\n  ]\" [cdkConnectedOverlayOpen]=\"isExpanded\" (detach)=\"isExpanded = false\">\n    <div #dropdownExpansion class=\"drop-down-menu-item-wrapper\">\n      <div *ngIf=\"multiselect && this.selectedOptions.length > 0\">\n        <div *ngIf=\"display == 'chip'\" class=\"multiselect-items-container chip flex\">\n          <span *ngFor=\"let item of selectedOptionLabels; index as i\" class=\"multiselect-item-chip flex\">\n            <span>{{item}}</span>\n            <verben-svg (click)=\"onMultiselectItemClosed(i, $event)\" icon=\"close-circle-full\" [width]=\"15\"\n              [height]=\"15\"></verben-svg>\n            <!-- <svg (click)=\"onMultiselectItemClosed(i, $event)\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M5.00065 9.33333C7.30184 9.33333 9.16732 7.46785 9.16732 5.16667C9.16732 2.86548 7.30184 1 5.00065 1C2.69946 1 0.833984 2.86548 0.833984 5.16667C0.833984 7.46785 2.69946 9.33333 5.00065 9.33333Z\"\n                stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M6.25 3.91797L3.75 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M3.75 3.91797L6.25 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg> -->\n          </span>\n        </div>\n        <div *ngIf=\"display != 'chip'\" class=\"multiselect-items-container normal\">\n          <span *ngFor=\"let item of selectedOptionLabels; index as i\" class=\"multiselect-item\">\n            {{i !== selectedOptionLabels.length - 1? item + ', ':item}}\n          </span>\n        </div>\n      </div>\n      <div *ngIf=\"allowSelectAll || filter\" class=\"actions-section flex\">\n        <input *ngIf=\"allowSelectAll\" (click)=\"onSelectAll($event)\" type=\"checkbox\" [(ngModel)]=\"selectedAll\"\n          class=\"custom-checkbox\" />\n        <span class=\"select-all-caption\" *ngIf=\"allowSelectAll && !filter\">Select All</span>\n        <div *ngIf=\"filter\" [ngClass]=\"{'focused': isInputFocused}\" tabindex=\"0\" (focus)=\"onSearchFocus()\"\n          (blur)=\"onSearchBlur()\" class=\"search-section flex\">\n          <span class=\"search-icon flex\">\n            <verben-svg icon=\"search\" stroke=\"#64748b\" [width]=\"15\" [height]=\"15\"></verben-svg>\n            <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n              <circle cx=\"9\" cy=\"9\" r=\"8\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"></circle>\n              <line x1=\"14\" y1=\"14\" x2=\"19\" y2=\"19\" stroke=\"currentColor\" stroke-width=\"2\"></line>\n            </svg> -->\n          </span>\n          <span *ngIf=\"this.selectedContexts[this.selectedContexts.length - 1]\" class=\"search-context\">\n            {{this.getOptionLabel(this.selectedContexts[this.selectedContexts.length - 1])}}\n          </span>\n          <div class=\"search-input-container\">\n            <input (input)=\"onSearch($event)\" [(ngModel)]=\"searchContext\" (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur()\" placeholder=\"Search...\" class=\"search-input\" />\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"showHorizontalLine\" class=\"colored-underline-section\">\n        <hr [style.background-color]=\"horizontalLineColor\" class=\"colored-underline\" />\n      </div>\n      <div class=\"drop-down-menu-item\">\n        <drop-down-item [itemTemplate]=\"itemTemplate\" [groupTemplate]=\"groupTemplate\" [activeItem]=\"selectedOption\"\n          [activeItems]=\"selectedOptions\" [multiselect]=\"multiselect\" [optionValue]=\"optionValue\"\n          [optionLabel]=\"optionLabel\" [optionSubLabel]=\"optionSubLabel\" [selectKey]=\"selectKey\"\n          [loadMoreCaption]=\"loadMoreCaption\" [options]=\"options\" [group]=\"group\" [onExpand]=\"expandMenu.bind(this)\"\n          [onLoadMore]=\"loadMoreMenuItems.bind(this)\" [onSelect]=\"onSelect.bind(this)\"></drop-down-item>\n        <div *ngIf=\"lazyLoad\">\n          <div class=\"see-more-container flex justify-end\">\n            <span class=\"see-more-caption\" (click)=\"loadMore()\">{{loadMoreCaption}}</span>\n          </div>\n        </div>\n        <div *ngIf=\"isLoading\" class=\"loading-overlay\">\n          <div class=\"loader\"></div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: ["*{font-family:sans-serif;font-size:.9rem}.w-100{width:100%}.h-100{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.error-message{position:absolute;z-index:1;left:0;right:0;bottom:-20px}.top-error .error-message{top:-20px!important;bottom:initial!important}.left-error .error-message{bottom:50%!important;right:calc(100% + 10px)!important;width:max-content;left:initial!important;transform:translateY(50%)}.right-error .error-message{bottom:50%!important;left:calc(100% + 10px)!important;width:max-content;right:initial!important;transform:translateY(50%)}.drop-down{position:relative;cursor:pointer}.drop-down-menu-item-wrapper{min-width:calc(100% - 4px);margin-top:3px;background:#fff;color:#334155;border:1px solid #e2e8f0;border-radius:5px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.drop-down-menu-item{max-height:200px;overflow-y:auto;padding:4px;box-sizing:content-box}.drop-down-input-wrapper{position:relative}.drop-down-input{align-items:center;min-height:39px}.drop-down-input.disabled .dropdown-label{color:#64748b}.drop-down-main-content{flex:1 1 0;padding:8px;min-width:0}.drop-down-icon-item.drop-down-clear-button{padding:8px 5px}.drop-down-icon-item>svg{width:.8rem;height:.8rem;display:flex}.drop-down-icon-item.drop-down-clear-button>svg{color:#94a3b8}.drop-down-icon-item.drop-down-expand-button{padding:8px 8px 8px 5px}.drop-down-icon-item.drop-down-expand-button>svg{color:#94a3b8}.drop-down-input.disabled .drop-down-icon-item>svg{color:#64748b}.dropdown-label{color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-label.place-holder{color:#64748b}.default-item{align-items:center}.default-item>div{flex:1 1 0;width:100%}.see-more-container{padding:5px}.see-more-caption{font-size:12px;color:#3b82f6}.actions-section{gap:5px;margin:10px;align-items:center}.select-all-caption{font-weight:600}.search-section{flex:1 1 0;border:1px solid transparent;padding:2px 10px;border-radius:24px;gap:3px;background-color:#d9d9d940;align-items:center}.search-section.focused{border-color:#3b82f6;outline:none}.search-icon>svg{color:#64748b;width:.8rem;height:.8rem}.search-input-container{flex:1 1 0}.search-input{width:100%;border:none;outline:none;background-color:transparent}.search-context{max-width:45px;border-radius:5px;padding:3px 5px;background-color:#3479e980;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.colored-underline{height:4px;border:none}.multiselect-items-container{padding:10px}.multiselect-items-container.normal{max-width:100%;overflow-x:auto;white-space:nowrap}.multiselect-items-container.chip{max-width:100%;overflow-x:auto;white-space:nowrap;gap:5px}.multiselect-items-container-two.normal{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multiselect-items-container-two.chip{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;gap:5px}.multiselect-items-container-two-tooltip{display:grid;flex-wrap:wrap;gap:10px 5px;grid-template-columns:repeat(2,1fr)}.multiselect-items-container-two-tooltip-normal{display:flex;flex-wrap:wrap}.multiselect-items-container-two-tooltip .multiselect-item-chip{justify-content:space-between}.multiselect-item-chip{align-items:center;gap:5px;border-radius:5px;padding:1px 5px;background-color:#3479e980}.multiselect-item-chip.multi-select{margin-right:5px;display:inline-flex!important}.multiselect-item-chip>span{max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multiselect-item-chip>svg{width:12px;height:12px}verben-tooltip{width:100%}::ng-deep .custom-tooltip-width{max-width:300px;max-height:500px;overflow-y:auto}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#4d4b4b80;z-index:10;display:flex;justify-content:center;align-items:center;pointer-events:none}.loader{width:50px;padding:8px;aspect-ratio:1;border-radius:50%;background:#3b82f6;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}@keyframes l3{to{transform:rotate(1turn)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropDownItemComponent, selector: "drop-down-item", inputs: ["itemTemplate", "groupTemplate", "activeItem", "activeItems", "selectKey", "optionValue", "optionLabel", "optionSubLabel", "loadMoreCaption", "multiselect", "options", "group", "onExpand", "onLoadMore", "onSelect"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SvgModule }, { kind: "component", type: SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: TooltipComponent, selector: "verben-tooltip", inputs: ["tooltipContent", "customClass", "backgroundColor", "textColor", "padding", "borderRadius", "zIndex", "border", "width", "top", "bottom", "left", "right"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DropDownComponent, decorators: [{
             type: Component,
@@ -2592,13 +2592,14 @@ class TableFilterComponent {
         this.configInstance = new Config();
     }
     ngOnInit() {
-        this.filterArray = this.filterOptions.map(item => item.name);
+        this.filterArray = this.filterOptions.map((item) => item.name);
     }
     onFilterNameChange(selectedFilterValue) {
-        const selectedFilter = this.filterOptions.find(option => option.name === selectedFilterValue);
+        const selectedFilter = this.filterOptions.find((option) => option.name === selectedFilterValue);
         if (selectedFilter) {
             this.selectedFilterType = selectedFilter.type;
-            this.conditionOptions = this.configInstance.getConditionOptions(this.selectedFilterType) || [];
+            this.conditionOptions =
+                this.configInstance.getConditionOptions(this.selectedFilterType) || [];
             this.selectedCondition = '';
         }
     }
@@ -2613,54 +2614,97 @@ class TableFilterComponent {
         this.disableApplyFilterBtn = true;
         this.duplicateMessage = '';
         localStorage.removeItem(this.storageKey);
-        this.filterCount = this.savedFilters.filter(item => item.checked === true).length;
+        this.filterCount = this.savedFilters.filter((item) => item.checked === true).length;
         this.resetSortData.emit();
     }
     addFilter() {
-        if (!this.selectedFilterValue || !this.selectedCondition || !this.inputValue) {
+        if (!this.selectedFilterValue ||
+            !this.selectedCondition ||
+            !this.inputValue) {
             return;
         }
         if (this.editIndex === null && this.isDuplicateFilter) {
             return;
         }
-        const newFilter = {
-            name: this.selectedFilterValue,
-            type: this.selectedFilterType,
-            condition: this.selectedCondition,
-            value: this.inputValue,
-            checked: true
-        };
-        if (this.editIndex !== null) {
-            const isDuplicate = this.savedFilters.some((filter, index) => filter.name === newFilter.name &&
-                filter.condition === newFilter.condition &&
-                index !== this.editIndex);
-            if (isDuplicate) {
-                return;
+        // 00:00 23:59
+        if (this.selectedFilterType == DataFilterType.Date &&
+            this.selectedCondition == 'On') {
+            const leftFilter = {
+                name: this.selectedFilterValue,
+                type: this.selectedFilterType,
+                condition: 'After',
+                value: this.inputValue.concat(' 00:00'),
+                checked: true,
+            };
+            const rightFilter = {
+                name: this.selectedFilterValue,
+                type: this.selectedFilterType,
+                condition: 'Before',
+                value: this.inputValue.concat(' 23:59'),
+                checked: true,
+            };
+            const filters = [leftFilter, rightFilter];
+            for (let newFilter of filters) {
+                if (this.editIndex !== null) {
+                    const isDuplicate = this.savedFilters.some((filter, index) => filter.name === newFilter.name &&
+                        filter.condition === newFilter.condition &&
+                        index !== this.editIndex);
+                    if (isDuplicate) {
+                        continue;
+                    }
+                    this.savedFilters[this.editIndex] = newFilter;
+                    this.editIndex = null;
+                }
+                else {
+                    if (this.savedFilters.some((filter) => filter.name === newFilter.name &&
+                        filter.condition === newFilter.condition)) {
+                        continue;
+                    }
+                    this.savedFilters.push(newFilter);
+                    this.filterCount = this.savedFilters.filter((item) => item.checked === true).length;
+                }
             }
-            this.savedFilters[this.editIndex] = newFilter;
-            this.editIndex = null;
         }
         else {
-            if (this.savedFilters.some(filter => filter.name === newFilter.name &&
-                filter.condition === newFilter.condition)) {
-                return;
+            const newFilter = {
+                name: this.selectedFilterValue,
+                type: this.selectedFilterType,
+                condition: this.selectedCondition,
+                value: this.inputValue,
+                checked: true,
+            };
+            if (this.editIndex !== null) {
+                const isDuplicate = this.savedFilters.some((filter, index) => filter.name === newFilter.name &&
+                    filter.condition === newFilter.condition &&
+                    index !== this.editIndex);
+                if (isDuplicate) {
+                    return;
+                }
+                this.savedFilters[this.editIndex] = newFilter;
+                this.editIndex = null;
+            }
+            else {
+                if (this.savedFilters.some((filter) => filter.name === newFilter.name &&
+                    filter.condition === newFilter.condition)) {
+                    return;
+                }
+                this.savedFilters.push(newFilter);
+                this.filterCount = this.savedFilters.filter((item) => item.checked === true).length;
             }
-            this.savedFilters.push(newFilter);
-            this.filterCount = this.savedFilters.filter(item => item.checked === true).length;
         }
         this.clearOperationSection();
         this.checkFilterButton();
     }
     toggleCheckbox(index) {
         this.savedFilters[index].checked = !this.savedFilters[index].checked;
-        this.checkAll = this.savedFilters.every(item => item.checked);
-        this.filterCount = this.savedFilters.filter(item => item.checked === true).length;
+        this.checkAll = this.savedFilters.every((item) => item.checked);
+        this.filterCount = this.savedFilters.filter((item) => item.checked === true).length;
     }
     deleteFilter(index) {
         this.savedFilters.splice(index, 1);
         this.checkDuplicateFilter();
         this.checkFilterButton();
-        this.filterCount = this.savedFilters.filter(item => item.checked === true).length;
+        this.filterCount = this.savedFilters.filter((item) => item.checked === true).length;
         if (this.savedFilters.length === 0) {
             this.checkAll = false;
         }
@@ -2675,7 +2719,7 @@ class TableFilterComponent {
         this.editIndex = index;
     }
     applyFilters() {
-        this.selectedFilters = this.savedFilters.filter(filter => filter.checked);
+        this.selectedFilters = this.savedFilters.filter((filter) => filter.checked);
         this.filtersApplied.emit(this.selectedFilters);
         this.filtersApplied.emit(this.storageKey);
     }
@@ -2697,8 +2741,8 @@ class TableFilterComponent {
     }
     toggleSelectAll() {
         this.checkAll = !this.checkAll;
-        this.savedFilters.forEach(filter => filter.checked = this.checkAll);
-        this.filterCount = this.savedFilters.filter(item => item.checked === true).length;
+        this.savedFilters.forEach((filter) => (filter.checked = this.checkAll));
+        this.filterCount = this.savedFilters.filter((item) => item.checked === true).length;
     }
     checkDuplicateFilter() {
         if (this.editIndex !== null) {
@@ -2707,14 +2751,18 @@ class TableFilterComponent {
                 index !== this.editIndex);
             this.disableAddFilterBtn = exists;
             this.isDuplicateFilter = exists;
-            this.duplicateMessage = exists ? 'This entry is a duplicate and cannot be added.' : '';
+            this.duplicateMessage = exists
+                ? 'This entry is a duplicate and cannot be added.'
+                : '';
         }
         else {
             const exists = this.savedFilters.some((filter) => filter.name === this.selectedFilterValue &&
                 filter.condition === this.selectedCondition);
             this.disableAddFilterBtn = exists;
             this.isDuplicateFilter = exists;
-            this.duplicateMessage = exists ? 'This entry is a duplicate and cannot be added.' : '';
+            this.duplicateMessage = exists
+                ? 'This entry is a duplicate and cannot be added.'
+                : '';
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: TableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -4751,6 +4799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImpo
 class VerbenPopUpComponent {
     elementRef;
     renderer;
+    overlay;
     dropdownOpen = false;
     dropdownOpenChange = new EventEmitter();
     dropdownWidth = '';
@@ -4763,9 +4812,38 @@ class VerbenPopUpComponent {
     cdkPosition = null;
     close = new EventEmitter();
     expansion;
-    constructor(elementRef, renderer) {
+    scrollStrategy;
+    defaultPositions = [
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+        },
+        {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+        },
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+        },
+        {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+        },
+    ];
+    constructor(elementRef, renderer, overlay) {
         this.elementRef = elementRef;
         this.renderer = renderer;
+        this.overlay = overlay;
+        this.scrollStrategy = this.overlay.scrollStrategies.reposition();
     }
     toggleDropdown() {
         this.dropdownOpen = !this.dropdownOpen;
@@ -4892,13 +4970,13 @@ class VerbenPopUpComponent {
             this.renderer.setStyle(dropdown, 'right', 'auto');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: VerbenPopUpComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: VerbenPopUpComponent, selector: "verben-pop-Up", inputs: { dropdownOpen: "dropdownOpen", dropdownWidth: "dropdownWidth", color: "color", customStyles: "customStyles", popUpClass: "popUpClass", border: "border", borderRadius: "borderRadius", enableMouseLeave: "enableMouseLeave", cdkPosition: "cdkPosition" }, outputs: { dropdownOpenChange: "dropdownOpenChange", close: "close" }, host: { listeners: { "document:click": "onClickOutside($event.target)" } }, viewQueries: [{ propertyName: "expansion", first: true, predicate: ["expansion"], descendants: true }], ngImport: i0, template: "<span class=\"relative dropdown-container\" [ngStyle]=\"dropdownStyles\">\n  <span (click)=\"toggleDropdown()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" class=\"dropdown-menu\">\n    <ng-content select=\"[dropdown-trigger]\"></ng-content>\n  </span>\n\n  <ng-template cdkConnectedOverlay [cdkConnectedOverlayLockPosition]=\"false\" [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayPositions]=\"cdkPosition? cdkPosition:[\n  {\n    originX: 'start',\n    originY: 'bottom',\n    overlayX: 'start',\n    overlayY: 'top'\n  },\n  {\n    originX: 'end',\n    originY: 'bottom',\n    overlayX: 'end',\n    overlayY: 'top'\n  },\n  {\n    originX: 'start',\n    originY: 'top',\n    overlayX: 'start',\n    overlayY: 'bottom'\n  },\n  {\n    originX: 'end',\n    originY: 'top',\n    overlayX: 'end',\n    overlayY: 'bottom'\n  }\n]\" [cdkConnectedOverlayOpen]=\"dropdownOpen\" (detach)=\"dropdownOpen = false\">\n    <div #expansion (mouseleave)=\"onMouseOut()\" [attr.aria-hidden]=\"!dropdownOpen\" class=\"{{popUpClass}}\"\n      [ngStyle]=\"yourStyles\">\n      <ng-content select=\"[dropdown-content]\"></ng-content>\n    </div>\n  </ng-template>\n</span>\n", styles: [".boxShadow{box-shadow:4px 4px 4px #00000040}.dropdown-content{transition:transform .2s ease-in-out,opacity .2s ease-in-out;transform:scale(.95);opacity:0;width:max-content}.dropdown-content.open{transform:scale(1);opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: VerbenPopUpComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: VerbenPopUpComponent, selector: "verben-pop-Up", inputs: { dropdownOpen: "dropdownOpen", dropdownWidth: "dropdownWidth", color: "color", customStyles: "customStyles", popUpClass: "popUpClass", border: "border", borderRadius: "borderRadius", enableMouseLeave: "enableMouseLeave", cdkPosition: "cdkPosition" }, outputs: { dropdownOpenChange: "dropdownOpenChange", close: "close" }, host: { listeners: { "document:click": "onClickOutside($event.target)" } }, viewQueries: [{ propertyName: "expansion", first: true, predicate: ["expansion"], descendants: true }], ngImport: i0, template: "<span class=\"relative dropdown-container\" [ngStyle]=\"dropdownStyles\">\n  <span\n    (click)=\"toggleDropdown()\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"dropdown-menu\"\n  >\n    <ng-content select=\"[dropdown-trigger]\"></ng-content>\n  </span>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayLockPosition]=\"false\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayPositions]=\"\n      cdkPosition ? cdkPosition : defaultPositions\n    \"\n    [cdkConnectedOverlayOpen]=\"dropdownOpen\"\n    (detach)=\"dropdownOpen = false\"\n  >\n    <div\n      #expansion\n      (mouseleave)=\"onMouseOut()\"\n      [attr.aria-hidden]=\"!dropdownOpen\"\n      class=\"{{ popUpClass }}\"\n      [ngStyle]=\"yourStyles\"\n    >\n      <ng-content select=\"[dropdown-content]\"></ng-content>\n    </div>\n  </ng-template>\n</span>\n", styles: [".boxShadow{box-shadow:4px 4px 4px #00000040}.dropdown-content{transition:transform .2s ease-in-out,opacity .2s ease-in-out;transform:scale(.95);opacity:0;width:max-content}.dropdown-content.open{transform:scale(1);opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: VerbenPopUpComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'verben-pop-Up', template: "<span class=\"relative dropdown-container\" [ngStyle]=\"dropdownStyles\">\n  <span (click)=\"toggleDropdown()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" class=\"dropdown-menu\">\n    <ng-content select=\"[dropdown-trigger]\"></ng-content>\n  </span>\n\n  <ng-template cdkConnectedOverlay [cdkConnectedOverlayLockPosition]=\"false\" [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayPositions]=\"cdkPosition? cdkPosition:[\n  {\n    originX: 'start',\n    originY: 'bottom',\n    overlayX: 'start',\n    overlayY: 'top'\n  },\n  {\n    originX: 'end',\n    originY: 'bottom',\n    overlayX: 'end',\n    overlayY: 'top'\n  },\n  {\n    originX: 'start',\n    originY: 'top',\n    overlayX: 'start',\n    overlayY: 'bottom'\n  },\n  {\n    originX: 'end',\n    originY: 'top',\n    overlayX: 'end',\n    overlayY: 'bottom'\n  }\n]\" [cdkConnectedOverlayOpen]=\"dropdownOpen\" (detach)=\"dropdownOpen = false\">\n    <div #expansion (mouseleave)=\"onMouseOut()\" [attr.aria-hidden]=\"!dropdownOpen\" class=\"{{popUpClass}}\"\n      [ngStyle]=\"yourStyles\">\n      <ng-content select=\"[dropdown-content]\"></ng-content>\n    </div>\n  </ng-template>\n</span>\n", styles: [".boxShadow{box-shadow:4px 4px 4px #00000040}.dropdown-content{transition:transform .2s ease-in-out,opacity .2s ease-in-out;transform:scale(.95);opacity:0;width:max-content}.dropdown-content.open{transform:scale(1);opacity:1}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { dropdownOpen: [{
+            args: [{ selector: 'verben-pop-Up', template: "<span class=\"relative dropdown-container\" [ngStyle]=\"dropdownStyles\">\n  <span\n    (click)=\"toggleDropdown()\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"dropdown-menu\"\n  >\n    <ng-content select=\"[dropdown-trigger]\"></ng-content>\n  </span>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayLockPosition]=\"false\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayPositions]=\"\n      cdkPosition ? cdkPosition : defaultPositions\n    \"\n    [cdkConnectedOverlayOpen]=\"dropdownOpen\"\n    (detach)=\"dropdownOpen = false\"\n  >\n    <div\n      #expansion\n      (mouseleave)=\"onMouseOut()\"\n      [attr.aria-hidden]=\"!dropdownOpen\"\n      class=\"{{ popUpClass }}\"\n      [ngStyle]=\"yourStyles\"\n    >\n      <ng-content select=\"[dropdown-content]\"></ng-content>\n    </div>\n  </ng-template>\n</span>\n", styles: [".boxShadow{box-shadow:4px 4px 4px #00000040}.dropdown-content{transition:transform .2s ease-in-out,opacity .2s ease-in-out;transform:scale(.95);opacity:0;width:max-content}.dropdown-content.open{transform:scale(1);opacity:1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$2.Overlay }], propDecorators: { dropdownOpen: [{
                 type: Input
             }], dropdownOpenChange: [{
                 type: Output
@@ -5791,7 +5869,7 @@ class DataImportService {
             //   cellFormula: false,
             //   cellNF: false,
             // });
-            console.time('Begin');
+            // console.time('Begin');
             let imported = [];
             const wb = read(event.target.result, { raw: true });
             const sheets = wb.SheetNames;
@@ -5802,18 +5880,16 @@ class DataImportService {
                     // rawNumbers: true,
                     // dateNF: 'dd/mm/yyyy',
                 });
+                imported = this.transformImportData(rows, columnDefinitions);
                 if (parseImport) {
                     imported = parseImport(rows);
                 }
-                else {
-                    imported = rows;
-                }
                 // previewer(imported);
             }
             // console.log('Imported data:', JSON.stringify(imported, null, 2));
             // console.time('Start Process');
-            this.importedData.set(this.transformImportData(imported, columnDefinitions));
-            console.timeEnd('Begin');
+            this.importedData.set(imported);
+            // console.timeEnd('Begin');
             return imported;
         };
         return reader.readAsArrayBuffer(file);