@acorex/components 16.19.45 → 16.19.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -21,7 +21,7 @@ import { NgxMaskDirective, NgxMaskPipe, provideNgxMask } from 'ngx-mask';
21
21
  import { trigger, state, transition, style, animate } from '@angular/animations';
22
22
  import * as i5 from '@angular/cdk/a11y';
23
23
  import { A11yModule } from '@angular/cdk/a11y';
24
- import { differenceBy, groupBy, cloneDeep } from 'lodash-es';
24
+ import { differenceBy, cloneDeep } from 'lodash-es';
25
25
  import * as i1$4 from '@angular/router';
26
26
  import { RouterModule } from '@angular/router';
27
27
 
@@ -11990,8 +11990,10 @@ class AXSearchBarComponent {
11990
11990
  loadOnInit = false;
11991
11991
  caption;
11992
11992
  block = false;
11993
+ cloneRefreshItems = [];
11993
11994
  set items(v) {
11994
11995
  this._defultValueCount = v.filter((x) => x.value);
11996
+ this.cloneRefreshItems = v;
11995
11997
  v.forEach((el) => {
11996
11998
  el.property.uniqueNumber = Math.random();
11997
11999
  if (el.value != null) {
@@ -12004,25 +12006,35 @@ class AXSearchBarComponent {
12004
12006
  });
12005
12007
  }
12006
12008
  });
12007
- const groupMap = new Map();
12009
+ const groupedByGroupId = {};
12008
12010
  for (const item of v) {
12009
- const groupId = item.property?.groupOptions?.groupId ?? null;
12010
- if (!groupMap.has(groupId)) {
12011
- groupMap.set(groupId, []);
12012
- }
12013
- groupMap.get(groupId).push(item);
12014
- }
12015
- this._items = Array.from(groupMap.entries()).map(([groupId, items]) => {
12016
- const groupTitle = items.find((i) => i.property?.groupOptions?.groupTitle)?.property
12017
- ?.groupOptions?.groupTitle || null;
12018
- const rows = Object.entries(groupBy(items, (x) => x.property?.row)).map(([row, rowItems]) => ({
12019
- row,
12020
- items: rowItems,
12021
- }));
12011
+ const gId = item.property?.groupOptions?.groupId ?? '__no_group__';
12012
+ if (!groupedByGroupId[gId]) {
12013
+ groupedByGroupId[gId] = [];
12014
+ }
12015
+ groupedByGroupId[gId].push(item);
12016
+ }
12017
+ this._items = Object.entries(groupedByGroupId).map(([groupId, groupItems]) => {
12018
+ const rows = {};
12019
+ for (const item of groupItems) {
12020
+ const rowKey = item.property.row;
12021
+ if (!rows[rowKey]) {
12022
+ rows[rowKey] = [];
12023
+ }
12024
+ rows[rowKey].push(item);
12025
+ }
12026
+ const titles = [
12027
+ ...new Set(groupItems
12028
+ .map((x) => x.property?.groupOptions?.groupTitle)
12029
+ .filter((t) => t != null)),
12030
+ ];
12022
12031
  return {
12023
- groupId,
12024
- groupTitle,
12025
- rows,
12032
+ groupId: groupId === '__no_group__' ? null : groupId,
12033
+ groupTitle: titles.length > 0 ? titles.join(' / ') : null,
12034
+ rows: Object.entries(rows).map(([row, items]) => ({
12035
+ row,
12036
+ items,
12037
+ })),
12026
12038
  };
12027
12039
  });
12028
12040
  }
@@ -12065,10 +12077,12 @@ class AXSearchBarComponent {
12065
12077
  this._defultValueCount = [];
12066
12078
  this._filterItems = [];
12067
12079
  this._filterItemsClone = [];
12068
- this.items = this._items.flatMap((group) => group.rows.flatMap((r) => r.items.map((item) => ({
12069
- property: item.property,
12070
- value: item.value,
12071
- }))));
12080
+ this._isEmitted = false;
12081
+ this.items = this.cloneRefreshItems;
12082
+ this.form.widgets = [];
12083
+ this.form.widgetsQuery.forEach((el) => {
12084
+ this.form.widgets.push(el);
12085
+ });
12072
12086
  this.cdr.detectChanges();
12073
12087
  }
12074
12088
  handleButtonClick() {
@@ -12263,11 +12277,11 @@ class AXSearchBarComponent {
12263
12277
  this.searchPopover.close();
12264
12278
  }
12265
12279
  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 });
12266
- 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" }] });
12280
+ 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 <ng-container *ngFor=\"let item of _items\">\n @if (item?.groupTitle) {\n <ax-fieldset [caption]=\"item?.groupTitle\">\n <ng-container *ngFor=\"let item of item.rows\">\n <div class=\"row\">\n <ng-container *ngFor=\"let prop of item.items\">\n <div\n *ngIf=\"prop.property.visible != false\"\n class=\"{{ renderCol(prop.property.col) }}\"\n >\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 </ng-container>\n </div>\n </ng-container>\n </ax-fieldset>\n }@else {\n <ng-container *ngFor=\"let item of item.rows\">\n <div class=\"row\">\n <ng-container *ngFor=\"let prop of item.items\">\n <div\n *ngIf=\"prop.property.visible != false\"\n class=\"{{ renderCol(prop.property.col) }}\"\n >\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 </ng-container>\n </div>\n </ng-container>\n }\n </ng-container>\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", 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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" }] });
12267
12281
  }
12268
12282
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSearchBarComponent, decorators: [{
12269
12283
  type: Component,
12270
- 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"] }]
12284
+ 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 <ng-container *ngFor=\"let item of _items\">\n @if (item?.groupTitle) {\n <ax-fieldset [caption]=\"item?.groupTitle\">\n <ng-container *ngFor=\"let item of item.rows\">\n <div class=\"row\">\n <ng-container *ngFor=\"let prop of item.items\">\n <div\n *ngIf=\"prop.property.visible != false\"\n class=\"{{ renderCol(prop.property.col) }}\"\n >\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 </ng-container>\n </div>\n </ng-container>\n </ax-fieldset>\n }@else {\n <ng-container *ngFor=\"let item of item.rows\">\n <div class=\"row\">\n <ng-container *ngFor=\"let prop of item.items\">\n <div\n *ngIf=\"prop.property.visible != false\"\n class=\"{{ renderCol(prop.property.col) }}\"\n >\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 </ng-container>\n </div>\n </ng-container>\n }\n </ng-container>\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", 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"] }]
12271
12285
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { searchPopover: [{
12272
12286
  type: ViewChild,
12273
12287
  args: ['searchPop']
@@ -16162,21 +16176,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
16162
16176
  class AXTabViewComponent {
16163
16177
  ref;
16164
16178
  _componentFactoryResolver;
16165
- fullWidth;
16166
16179
  dynamicTabs = [];
16167
16180
  tabs;
16168
16181
  dynamicTabPlaceholder;
16169
16182
  onActiveTab = new EventEmitter();
16183
+ fitParent = input(false);
16184
+ tabTemplate;
16170
16185
  /*
16171
16186
  Alternative approach of using an anchor directive
16172
16187
  would be to simply get hold of a template variable
16173
16188
  as follows
16174
16189
  */
16175
16190
  // @ViewChild('container', {read: ViewContainerRef}) dynamicTabPlaceholder;
16176
- constructor(ref, _componentFactoryResolver, fullWidth = false) {
16191
+ constructor(ref, _componentFactoryResolver) {
16177
16192
  this.ref = ref;
16178
16193
  this._componentFactoryResolver = _componentFactoryResolver;
16179
- this.fullWidth = fullWidth;
16180
16194
  }
16181
16195
  // contentChildren are set
16182
16196
  ngAfterContentInit() {
@@ -16216,7 +16230,11 @@ class AXTabViewComponent {
16216
16230
  this.dynamicTabs.forEach((tab) => (tab.active = false));
16217
16231
  // activate the tab the user has clicked on.
16218
16232
  tab.active = true;
16219
- this.onActiveTab.emit({ component: this, data: tab, htmlElement: this.ref.nativeElement });
16233
+ this.onActiveTab.emit({
16234
+ component: this,
16235
+ data: tab,
16236
+ htmlElement: this.ref.nativeElement,
16237
+ });
16220
16238
  }
16221
16239
  closeTab(tab) {
16222
16240
  for (let i = 0; i < this.dynamicTabs.length; i++) {
@@ -16240,16 +16258,13 @@ class AXTabViewComponent {
16240
16258
  this.closeTab(activeTabs[0]);
16241
16259
  }
16242
16260
  }
16243
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXTabViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: 'fullWidth', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
16244
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXTabViewComponent, isStandalone: false, selector: "ax-tab-view", outputs: { onActiveTab: "onActiveTab" }, queries: [{ propertyName: "tabs", predicate: AXTabComponent }], viewQueries: [{ propertyName: "dynamicTabPlaceholder", first: true, predicate: DynamicTabsDirective, descendants: true }], ngImport: i0, template: "<ul class=\"ax nav-tabs\">\n <li\n *ngFor=\"let tab of tabs\"\n (click)=\"selectTab(tab)\"\n [class.active]=\"tab.active\"\n [class.flex-sm-fill]=\"fullWidth\"\n >\n <i class=\"{{ tab.icon }}\"></i>\n <span>{{ tab.caption }}</span>\n </li>\n <!-- dynamic tabs -->\n <li\n *ngFor=\"let tab of dynamicTabs\"\n (click)=\"selectTab(tab)\"\n [class.active]=\"tab.active\"\n [class.flex-sm-fill]=\"fullWidth\"\n >\n <i class=\"{{ tab.icon }}\"></i>\n <span>\n {{ tab.caption }}\n <i\n *ngIf=\"tab.isCloseable\"\n (click)=\"closeTab(tab)\"\n class=\"far fa-times\"\n >\n </i>\n </span>\n </li>\n</ul>\n<div class=\"ax-tab-container\">\n <ng-content></ng-content>\n<ng-template dynamic-tabs #container></ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DynamicTabsDirective, selector: "[dynamic-tabs]" }], encapsulation: i0.ViewEncapsulation.None });
16261
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXTabViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
16262
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXTabViewComponent, isStandalone: false, selector: "ax-tab-view", inputs: { fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: true, isRequired: false, transformFunction: null }, tabTemplate: { classPropertyName: "tabTemplate", publicName: "tabTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onActiveTab: "onActiveTab" }, queries: [{ propertyName: "tabs", predicate: AXTabComponent }], viewQueries: [{ propertyName: "dynamicTabPlaceholder", first: true, predicate: DynamicTabsDirective, descendants: true }], ngImport: i0, template: "<ul class=\"ax nav-tabs\" [class.ax-fit-parent-tab]=\"fitParent()\">\n @for (tab of tabs; track $index) { @if (tabTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"tabTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: tab,\n selectTab: selectTab.bind(this)\n }\"\n >\n </ng-container>\n }@else{\n <li (click)=\"selectTab(tab)\" [class.active]=\"tab.active\">\n <i class=\"{{ tab.icon }}\"></i>\n <span>{{ tab.caption }}</span>\n </li>\n } }\n <!-- dynamic tabs -->\n @for (tab of dynamicTabs; track $index) {\n <li (click)=\"selectTab(tab)\" [class.active]=\"tab.active\">\n <i class=\"{{ tab.icon }}\"></i>\n\n <span>\n {{ tab.caption }}\n @if (tab.isCloseable) {\n\n <i (click)=\"closeTab(tab)\" class=\"far fa-times\"> </i>\n }\n </span>\n </li>\n }\n</ul>\n<div class=\"ax-tab-container\">\n <ng-content></ng-content>\n <ng-template dynamic-tabs #container></ng-template>\n</div>\n", styles: [".ax-fit-parent-tab li{width:100%;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicTabsDirective, selector: "[dynamic-tabs]" }], encapsulation: i0.ViewEncapsulation.None });
16245
16263
  }
16246
16264
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXTabViewComponent, decorators: [{
16247
16265
  type: Component,
16248
- args: [{ selector: 'ax-tab-view', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ul class=\"ax nav-tabs\">\n <li\n *ngFor=\"let tab of tabs\"\n (click)=\"selectTab(tab)\"\n [class.active]=\"tab.active\"\n [class.flex-sm-fill]=\"fullWidth\"\n >\n <i class=\"{{ tab.icon }}\"></i>\n <span>{{ tab.caption }}</span>\n </li>\n <!-- dynamic tabs -->\n <li\n *ngFor=\"let tab of dynamicTabs\"\n (click)=\"selectTab(tab)\"\n [class.active]=\"tab.active\"\n [class.flex-sm-fill]=\"fullWidth\"\n >\n <i class=\"{{ tab.icon }}\"></i>\n <span>\n {{ tab.caption }}\n <i\n *ngIf=\"tab.isCloseable\"\n (click)=\"closeTab(tab)\"\n class=\"far fa-times\"\n >\n </i>\n </span>\n </li>\n</ul>\n<div class=\"ax-tab-container\">\n <ng-content></ng-content>\n<ng-template dynamic-tabs #container></ng-template>\n</div>\n" }]
16249
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: undefined, decorators: [{
16250
- type: Attribute,
16251
- args: ['fullWidth']
16252
- }] }], propDecorators: { tabs: [{
16266
+ args: [{ selector: 'ax-tab-view', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ul class=\"ax nav-tabs\" [class.ax-fit-parent-tab]=\"fitParent()\">\n @for (tab of tabs; track $index) { @if (tabTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"tabTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: tab,\n selectTab: selectTab.bind(this)\n }\"\n >\n </ng-container>\n }@else{\n <li (click)=\"selectTab(tab)\" [class.active]=\"tab.active\">\n <i class=\"{{ tab.icon }}\"></i>\n <span>{{ tab.caption }}</span>\n </li>\n } }\n <!-- dynamic tabs -->\n @for (tab of dynamicTabs; track $index) {\n <li (click)=\"selectTab(tab)\" [class.active]=\"tab.active\">\n <i class=\"{{ tab.icon }}\"></i>\n\n <span>\n {{ tab.caption }}\n @if (tab.isCloseable) {\n\n <i (click)=\"closeTab(tab)\" class=\"far fa-times\"> </i>\n }\n </span>\n </li>\n }\n</ul>\n<div class=\"ax-tab-container\">\n <ng-content></ng-content>\n <ng-template dynamic-tabs #container></ng-template>\n</div>\n", styles: [".ax-fit-parent-tab li{width:100%;text-align:center}\n"] }]
16267
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }], propDecorators: { tabs: [{
16253
16268
  type: ContentChildren,
16254
16269
  args: [AXTabComponent]
16255
16270
  }], dynamicTabPlaceholder: [{
@@ -16257,6 +16272,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
16257
16272
  args: [DynamicTabsDirective]
16258
16273
  }], onActiveTab: [{
16259
16274
  type: Output
16275
+ }], tabTemplate: [{
16276
+ type: Input
16260
16277
  }] } });
16261
16278
 
16262
16279
  class AXTabViewModule {