@acorex/components 16.19.36 → 16.19.38

package/fesm2022/acorex-components.mjs

@@ -5749,11 +5749,11 @@ class AXToastMessageComponent {
         this.elRef.nativeElement.parentElement.removeChild(this.elRef.nativeElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXToastMessageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXToastMessageComponent, isStandalone: false, selector: "ng-component", inputs: { title: "title", message: "message", timeOut: "timeOut", closeable: "closeable", type: "type" }, viewQueries: [{ propertyName: "progressBar", first: true, predicate: ["progressBar"], descendants: true }], ngImport: i0, template: "<div class=\"toast-container\">\n  @if (title) {\n  <header class=\"ax toast {{ style }}\">\n    <div><i class=\"{{ icon }}\"></i>&nbsp; {{ title }}</div>\n    @if (closeable) {\n    <div (click)=\"close()\" class=\"toast-close\">\n      <i class=\"far fa-times\"></i>\n    </div>\n    }\n  </header>\n  }\n  <div class=\"content ax toast {{ style }}\">\n    {{ message }}\n    @if (!title && closeable) {\n    <div (click)=\"close()\" class=\"toast-close\">\n      <i class=\"far fa-times\"></i>\n    </div>\n    }\n    <div\n      #progressBar\n      class=\"toast-progress\"\n      [style.animation-duration.ms]=\"timeOut\"\n    ></div>\n  </div>\n</div>\n", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8rem 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer;font-size:1rem}.toast-container .toast-progress{position:absolute;background:#00000080;width:100%;bottom:0;left:0;height:6px;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXToastMessageComponent, isStandalone: false, selector: "ng-component", inputs: { title: "title", message: "message", timeOut: "timeOut", closeable: "closeable", type: "type" }, viewQueries: [{ propertyName: "progressBar", first: true, predicate: ["progressBar"], descendants: true }], ngImport: i0, template: "<div class=\"toast-container\">\n  @if (title) {\n  <header class=\"ax toast {{ style }}\">\n    <div><i class=\"{{ icon }}\"></i>&nbsp; {{ title }}</div>\n    @if (closeable) {\n    <div (click)=\"close()\" class=\"toast-close\">\n      <i class=\"far fa-times\"></i>\n    </div>\n    }\n  </header>\n  }\n  <div class=\"content ax toast {{ style }}\">\n    {{ message }}\n    @if (!title && closeable) {\n    <div (click)=\"close()\" class=\"toast-close\">\n      <i class=\"far fa-times\"></i>\n    </div>\n    } @if (timeOut) {\n    <div\n      #progressBar\n      class=\"toast-progress\"\n      [style.animation-duration.ms]=\"timeOut\"\n    ></div>\n    }\n  </div>\n</div>\n", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8rem 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer;font-size:1rem}.toast-container .toast-progress{position:absolute;background:#00000080;width:100%;bottom:0;left:0;height:6px;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXToastMessageComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"toast-container\">\n  @if (title) {\n  <header class=\"ax toast {{ style }}\">\n    <div><i class=\"{{ icon }}\"></i>&nbsp; {{ title }}</div>\n    @if (closeable) {\n    <div (click)=\"close()\" class=\"toast-close\">\n      <i class=\"far fa-times\"></i>\n    </div>\n    }\n  </header>\n  }\n  <div class=\"content ax toast {{ style }}\">\n    {{ message }}\n    @if (!title && closeable) {\n    <div (click)=\"close()\" class=\"toast-close\">\n      <i class=\"far fa-times\"></i>\n    </div>\n    }\n    <div\n      #progressBar\n      class=\"toast-progress\"\n      [style.animation-duration.ms]=\"timeOut\"\n    ></div>\n  </div>\n</div>\n", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8rem 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer;font-size:1rem}.toast-container .toast-progress{position:absolute;background:#00000080;width:100%;bottom:0;left:0;height:6px;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
+            args: [{ encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"toast-container\">\n  @if (title) {\n  <header class=\"ax toast {{ style }}\">\n    <div><i class=\"{{ icon }}\"></i>&nbsp; {{ title }}</div>\n    @if (closeable) {\n    <div (click)=\"close()\" class=\"toast-close\">\n      <i class=\"far fa-times\"></i>\n    </div>\n    }\n  </header>\n  }\n  <div class=\"content ax toast {{ style }}\">\n    {{ message }}\n    @if (!title && closeable) {\n    <div (click)=\"close()\" class=\"toast-close\">\n      <i class=\"far fa-times\"></i>\n    </div>\n    } @if (timeOut) {\n    <div\n      #progressBar\n      class=\"toast-progress\"\n      [style.animation-duration.ms]=\"timeOut\"\n    ></div>\n    }\n  </div>\n</div>\n", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8rem 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer;font-size:1rem}.toast-container .toast-progress{position:absolute;background:#00000080;width:100%;bottom:0;left:0;height:6px;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { progressBar: [{
                 type: ViewChild,
                 args: ['progressBar', { static: false }]
@@ -8449,12 +8449,12 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
         else {
             number = Number(text);
         }
-        if (!!this.min) {
+        if (this.min != null) {
             if (number < this.min) {
                 this.value = '';
             }
         }
-        if (!!this.max) {
+        if (this.max != null) {
             if (number > this.max) {
                 this.value = '';
             }
@@ -12258,11 +12258,11 @@ class AXSearchBarComponent {
         this.searchPopover.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXSearchBarComponent, isStandalone: false, selector: "ax-search-bar", inputs: { sizeButton: "sizeButton", size: "size", disabled: "disabled", fitParent: "fitParent", popoverWidth: "popoverWidth", rtl: "rtl", loadOnInit: "loadOnInit", caption: "caption", block: "block", items: "items" }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue", onClose: "onClose" }, viewQueries: [{ propertyName: "searchPopover", first: true, predicate: ["searchPop"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<ax-button\n  [block]=\"block\"\n  end\n  icon=\"far fa-sliders-h icon\"\n  [selected]=\"_searchCount ? true : false\"\n  [type]=\"_searchCount ? 'primary' : 'primary outline'\"\n  [disabled]=\"disabled\"\n  [size]=\"sizeButton\"\n  [tabIndex]=\"-1\"\n  (click)=\"handleButtonClick()\"\n>\n  {{ caption ? caption : ('common.search' | trans) }}\n  <span *ngIf=\"_searchCount\" class=\"search-count\">{{\n    _searchCount\n  }}</span></ax-button\n>\n\n<ax-popover\n  #searchPop\n  [target]=\"ref\"\n  [rtl]=\"rtl\"\n  [position]=\"{\n    originX: 'end',\n    originY: 'bottom',\n    overlayX: 'end',\n    overlayY: 'top',\n    offsetY: 10\n  }\"\n>\n  <div class=\"panel-box ax-dropdown-container-bordered {{ size }}\">\n    <ax-validation-form #form>\n      @for (item of _items; track $index) { @if (item.groupId) {\n      <ax-fieldset [caption]=\"item?.groupTitle\">\n        <ng-container\n          *ngTemplateOutlet=\"propertyRenderer; context: { item: item }\"\n        ></ng-container>\n      </ax-fieldset>\n      }@else {\n      <ng-container\n        *ngTemplateOutlet=\"propertyRenderer; context: { item: item }\"\n      ></ng-container>\n      } }\n      <div class=\"footer-button\">\n        <ax-button (click)=\"search()\">{{ 'common.search' | trans }}</ax-button>\n        <ax-button type=\"blank danger\" (click)=\"clear()\">{{\n          'common.reset' | trans\n        }}</ax-button>\n      </div>\n    </ax-validation-form>\n  </div>\n</ax-popover>\n\n<ng-template #propertyRenderer let-item=\"item\">\n  <div class=\"row\">\n    @for (row of item.rows; track $index) { @for (prop of row.items; track\n    $index) { @if (prop.property.visible != false) {\n    <div class=\"{{ renderCol(prop.property.col) }}\">\n      <div\n        [class.ax-search-bar-required-state]=\"\n          prop.property.editorOptions?.validation?.rules?.length\n        \"\n      >\n        <ax-label>{{ prop.property.title }}</ax-label>\n        <ng-container\n          ax-property-editor-renderer\n          [validationForm]=\"form\"\n          [property]=\"prop\"\n          [context]=\"_context\"\n          (onValueChange)=\"handleValueChange($event)\"\n        ></ng-container>\n      </div>\n    </div>\n    } } }\n  </div>\n</ng-template>\n", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "visible"], outputs: ["onOutSideClick"] }, { kind: "component", type: AXFieldsetComponent, selector: "ax-fieldset", inputs: ["size", "caption", "allowCollapse"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXSearchBarComponent, isStandalone: false, selector: "ax-search-bar", inputs: { sizeButton: "sizeButton", size: "size", disabled: "disabled", fitParent: "fitParent", popoverWidth: "popoverWidth", rtl: "rtl", loadOnInit: "loadOnInit", caption: "caption", block: "block", items: "items" }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue", onClose: "onClose" }, viewQueries: [{ propertyName: "searchPopover", first: true, predicate: ["searchPop"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<ax-button\n  [block]=\"block\"\n  end\n  icon=\"far fa-sliders-h icon\"\n  [selected]=\"_searchCount ? true : false\"\n  [type]=\"_searchCount ? 'primary' : 'primary outline'\"\n  [disabled]=\"disabled\"\n  [size]=\"sizeButton\"\n  [tabIndex]=\"-1\"\n  (click)=\"handleButtonClick()\"\n>\n  {{ caption ? caption : ('common.search' | trans) }}\n  <span *ngIf=\"_searchCount\" class=\"search-count\">{{\n    _searchCount\n  }}</span></ax-button\n>\n\n<ax-popover\n  #searchPop\n  [target]=\"ref\"\n  [rtl]=\"rtl\"\n  [position]=\"{\n    originX: 'end',\n    originY: 'bottom',\n    overlayX: 'end',\n    overlayY: 'top',\n    offsetY: 10\n  }\"\n>\n  <div class=\"panel-box ax-dropdown-container-bordered {{ size }}\">\n    <ax-validation-form #form>\n      @for (item of _items; track $index) { @if (item.groupId) {\n      <ax-fieldset [caption]=\"item?.groupTitle\">\n        <ng-container\n          *ngTemplateOutlet=\"propertyRenderer; context: { item: item }\"\n        ></ng-container>\n      </ax-fieldset>\n      }@else {\n      <ng-container\n        *ngTemplateOutlet=\"propertyRenderer; context: { item: item }\"\n      ></ng-container>\n      } }\n      <div class=\"footer-button\">\n        <ax-button (click)=\"search()\">{{ 'common.search' | trans }}</ax-button>\n        <ax-button type=\"blank danger\" (click)=\"clear()\">{{\n          'common.reset' | trans\n        }}</ax-button>\n      </div>\n    </ax-validation-form>\n  </div>\n</ax-popover>\n\n<ng-template #propertyRenderer let-item=\"item\">\n  @for (row of item.rows; track $index) {\n  <div class=\"row\">\n    @for (prop of row.items; track $index) { @if (prop.property.visible !=\n    false) {\n    <div class=\"{{ renderCol(prop.property.col) }}\">\n      <div\n        [class.ax-search-bar-required-state]=\"\n          prop.property.editorOptions?.validation?.rules?.length\n        \"\n      >\n        <ax-label>{{ prop.property.title }}</ax-label>\n        <ng-container\n          ax-property-editor-renderer\n          [validationForm]=\"form\"\n          [property]=\"prop\"\n          [context]=\"_context\"\n          (onValueChange)=\"handleValueChange($event)\"\n        ></ng-container>\n      </div>\n    </div>\n    } }\n  </div>\n  }\n</ng-template>\n", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "visible"], outputs: ["onOutSideClick"] }, { kind: "component", type: AXFieldsetComponent, selector: "ax-fieldset", inputs: ["size", "caption", "allowCollapse"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSearchBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-search-bar', standalone: false, template: "<ax-button\n  [block]=\"block\"\n  end\n  icon=\"far fa-sliders-h icon\"\n  [selected]=\"_searchCount ? true : false\"\n  [type]=\"_searchCount ? 'primary' : 'primary outline'\"\n  [disabled]=\"disabled\"\n  [size]=\"sizeButton\"\n  [tabIndex]=\"-1\"\n  (click)=\"handleButtonClick()\"\n>\n  {{ caption ? caption : ('common.search' | trans) }}\n  <span *ngIf=\"_searchCount\" class=\"search-count\">{{\n    _searchCount\n  }}</span></ax-button\n>\n\n<ax-popover\n  #searchPop\n  [target]=\"ref\"\n  [rtl]=\"rtl\"\n  [position]=\"{\n    originX: 'end',\n    originY: 'bottom',\n    overlayX: 'end',\n    overlayY: 'top',\n    offsetY: 10\n  }\"\n>\n  <div class=\"panel-box ax-dropdown-container-bordered {{ size }}\">\n    <ax-validation-form #form>\n      @for (item of _items; track $index) { @if (item.groupId) {\n      <ax-fieldset [caption]=\"item?.groupTitle\">\n        <ng-container\n          *ngTemplateOutlet=\"propertyRenderer; context: { item: item }\"\n        ></ng-container>\n      </ax-fieldset>\n      }@else {\n      <ng-container\n        *ngTemplateOutlet=\"propertyRenderer; context: { item: item }\"\n      ></ng-container>\n      } }\n      <div class=\"footer-button\">\n        <ax-button (click)=\"search()\">{{ 'common.search' | trans }}</ax-button>\n        <ax-button type=\"blank danger\" (click)=\"clear()\">{{\n          'common.reset' | trans\n        }}</ax-button>\n      </div>\n    </ax-validation-form>\n  </div>\n</ax-popover>\n\n<ng-template #propertyRenderer let-item=\"item\">\n  <div class=\"row\">\n    @for (row of item.rows; track $index) { @for (prop of row.items; track\n    $index) { @if (prop.property.visible != false) {\n    <div class=\"{{ renderCol(prop.property.col) }}\">\n      <div\n        [class.ax-search-bar-required-state]=\"\n          prop.property.editorOptions?.validation?.rules?.length\n        \"\n      >\n        <ax-label>{{ prop.property.title }}</ax-label>\n        <ng-container\n          ax-property-editor-renderer\n          [validationForm]=\"form\"\n          [property]=\"prop\"\n          [context]=\"_context\"\n          (onValueChange)=\"handleValueChange($event)\"\n        ></ng-container>\n      </div>\n    </div>\n    } } }\n  </div>\n</ng-template>\n", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}\n"] }]
+            args: [{ selector: 'ax-search-bar', standalone: false, template: "<ax-button\n  [block]=\"block\"\n  end\n  icon=\"far fa-sliders-h icon\"\n  [selected]=\"_searchCount ? true : false\"\n  [type]=\"_searchCount ? 'primary' : 'primary outline'\"\n  [disabled]=\"disabled\"\n  [size]=\"sizeButton\"\n  [tabIndex]=\"-1\"\n  (click)=\"handleButtonClick()\"\n>\n  {{ caption ? caption : ('common.search' | trans) }}\n  <span *ngIf=\"_searchCount\" class=\"search-count\">{{\n    _searchCount\n  }}</span></ax-button\n>\n\n<ax-popover\n  #searchPop\n  [target]=\"ref\"\n  [rtl]=\"rtl\"\n  [position]=\"{\n    originX: 'end',\n    originY: 'bottom',\n    overlayX: 'end',\n    overlayY: 'top',\n    offsetY: 10\n  }\"\n>\n  <div class=\"panel-box ax-dropdown-container-bordered {{ size }}\">\n    <ax-validation-form #form>\n      @for (item of _items; track $index) { @if (item.groupId) {\n      <ax-fieldset [caption]=\"item?.groupTitle\">\n        <ng-container\n          *ngTemplateOutlet=\"propertyRenderer; context: { item: item }\"\n        ></ng-container>\n      </ax-fieldset>\n      }@else {\n      <ng-container\n        *ngTemplateOutlet=\"propertyRenderer; context: { item: item }\"\n      ></ng-container>\n      } }\n      <div class=\"footer-button\">\n        <ax-button (click)=\"search()\">{{ 'common.search' | trans }}</ax-button>\n        <ax-button type=\"blank danger\" (click)=\"clear()\">{{\n          'common.reset' | trans\n        }}</ax-button>\n      </div>\n    </ax-validation-form>\n  </div>\n</ax-popover>\n\n<ng-template #propertyRenderer let-item=\"item\">\n  @for (row of item.rows; track $index) {\n  <div class=\"row\">\n    @for (prop of row.items; track $index) { @if (prop.property.visible !=\n    false) {\n    <div class=\"{{ renderCol(prop.property.col) }}\">\n      <div\n        [class.ax-search-bar-required-state]=\"\n          prop.property.editorOptions?.validation?.rules?.length\n        \"\n      >\n        <ax-label>{{ prop.property.title }}</ax-label>\n        <ng-container\n          ax-property-editor-renderer\n          [validationForm]=\"form\"\n          [property]=\"prop\"\n          [context]=\"_context\"\n          (onValueChange)=\"handleValueChange($event)\"\n        ></ng-container>\n      </div>\n    </div>\n    } }\n  </div>\n  }\n</ng-template>\n", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { searchPopover: [{
                 type: ViewChild,
                 args: ['searchPop']