@acorex/components 16.20.6 → 16.20.8
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.
|
@@ -8063,6 +8063,7 @@ class AXAutoCompleteComponent extends AXBaseComponent {
|
|
|
8063
8063
|
this.el = el;
|
|
8064
8064
|
}
|
|
8065
8065
|
listContainer;
|
|
8066
|
+
rowTemplate;
|
|
8066
8067
|
#effct = effect(() => {
|
|
8067
8068
|
this.localShowDropdownWhenClick.set(this.showDropdownWhenClick());
|
|
8068
8069
|
}, ...(ngDevMode ? [{ debugName: "#effct" }] : []));
|
|
@@ -8391,7 +8392,7 @@ class AXAutoCompleteComponent extends AXBaseComponent {
|
|
|
8391
8392
|
}
|
|
8392
8393
|
}
|
|
8393
8394
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAutoCompleteComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8394
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXAutoCompleteComponent, isStandalone: false, selector: "ax-auto-complete", inputs: { showDropdownWhenClick: { classPropertyName: "showDropdownWhenClick", publicName: "showDropdownWhenClick", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, remoteOperation: { classPropertyName: "remoteOperation", publicName: "remoteOperation", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, showDropDownButton: { classPropertyName: "showDropDownButton", publicName: "showDropDownButton", isSignal: true, isRequired: false, transformFunction: null }, onDemandTranslate: { classPropertyName: "onDemandTranslate", publicName: "onDemandTranslate", isSignal: true, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiLine: { classPropertyName: "multiLine", publicName: "multiLine", isSignal: true, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showCheckBox: { classPropertyName: "showCheckBox", publicName: "showCheckBox", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: true, isRequired: false, transformFunction: null }, disabledCallback: { classPropertyName: "disabledCallback", publicName: "disabledCallback", isSignal: false, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectedItems: "selectedItemsChange", onValueChanged: "onValueChanged", onItemClick: "onItemClick", onFocus: "onFocus", onBlur: "onBlur" }, queries: [{ propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down\n #d\n [readonly]=\"readonly()\"\n [fitParent]=\"fitParent()\"\n [disabled]=\"disabled()\"\n [size]=\"size()\"\n [showDropDownButton]=\"showDropDownButton()\"\n (dropdownToggle)=\"dropdownToggleSelecBox()\"\n>\n <ng-container start>\n <ng-content select=\"[start]\"> </ng-content>\n </ng-container>\n <ng-container header>\n <ax-text-box\n #input\n [textAlign]=\"textAlign()\"\n [(value)]=\"value\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n [size]=\"size()\"\n (onkey)=\"handleKeyPress($event)\"\n (click)=\"handleClick()\"\n (onValueChanged)=\"textChange($event)\"\n (onFocus)=\"handleFocus($event)\"\n (onBlur)=\"handleBlur($event)\"\n ></ax-text-box>\n </ng-container>\n <ng-container panel>\n <div class=\"ax list-container\">\n <div\n #listContainer\n class=\"list-container-items\"\n (scroll)=\"scrolled($event)\"\n >\n @if(resolvedItems().length > 0){ @for (item of resolvedItems(); track\n $index) {\n <div\n class=\"list-item\"\n [class.focused]=\"$index == currentfocusedIndex()\"\n [class.selected]=\"isItemSelected(item)\"\n (click)=\"handleItemClick($event, item)\"\n (dblclick)=\"handleItemDbClick($event, item)\"\n >\n <div style=\"display: flex\">\n @if (showCheckBox()) {\n <ax-check-box\n [size]=\"size()\"\n [value]=\"isItemSelected(item)\"\n (onClick)=\"handleItemClick($event, item)\"\n >\n </ax-check-box>\n } @if (rowTemplate) {\n <div\n style=\"\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n flex: 1;\n \"\n [title]=\"item[textField()]\"\n [ngStyle]=\"\n showCheckBox() ? { 'padding-inline-start': '0.5rem' } : ''\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"rowTemplate; context: { $implicit: item }\"\n >\n </ng-container>\n </div>\n }@else {\n <div\n style=\"\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n flex: 1;\n \"\n [title]=\"item[textField()]\"\n [ngStyle]=\"\n showCheckBox() ? { 'padding-inline-start': '0.5rem' } : ''\n \"\n >\n {{ item[textField()] }}\n </div>\n }\n </div>\n </div>\n } }@else { @if(showLoading() == true){\n <div class=\"list-item\">\n {{ 'common.search' | trans }}\n </div>\n }@else {\n <div class=\"list-item\">\n {{ 'common.noDataFound' | trans }}\n </div>\n } } @if (showLoading()) {\n <div class=\"ax-pad-sm\" style=\"text-align: center\">\n <i\n class=\"far fa-spinner-third fa-pulse fa-2x\"\n style=\"color: var(--ax-primary-color)\"\n ></i>\n </div>\n }\n </div>\n </div></ng-container\n >\n <ng-container end>\n <ng-content select=\"[end]\"> </ng-content>\n </ng-container>\n</ax-drop-down>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], encapsulation: i0.ViewEncapsulation.None });
|
|
8395
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXAutoCompleteComponent, isStandalone: false, selector: "ax-auto-complete", inputs: { showDropdownWhenClick: { classPropertyName: "showDropdownWhenClick", publicName: "showDropdownWhenClick", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, remoteOperation: { classPropertyName: "remoteOperation", publicName: "remoteOperation", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, showDropDownButton: { classPropertyName: "showDropDownButton", publicName: "showDropDownButton", isSignal: true, isRequired: false, transformFunction: null }, onDemandTranslate: { classPropertyName: "onDemandTranslate", publicName: "onDemandTranslate", isSignal: true, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiLine: { classPropertyName: "multiLine", publicName: "multiLine", isSignal: true, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showCheckBox: { classPropertyName: "showCheckBox", publicName: "showCheckBox", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: true, isRequired: false, transformFunction: null }, disabledCallback: { classPropertyName: "disabledCallback", publicName: "disabledCallback", isSignal: false, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectedItems: "selectedItemsChange", onValueChanged: "onValueChanged", onItemClick: "onItemClick", onFocus: "onFocus", onBlur: "onBlur" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down\n #d\n [readonly]=\"readonly()\"\n [fitParent]=\"fitParent()\"\n [disabled]=\"disabled()\"\n [size]=\"size()\"\n [showDropDownButton]=\"showDropDownButton()\"\n (dropdownToggle)=\"dropdownToggleSelecBox()\"\n>\n <ng-container start>\n <ng-content select=\"[start]\"> </ng-content>\n </ng-container>\n <ng-container header>\n <ax-text-box\n #input\n [textAlign]=\"textAlign()\"\n [(value)]=\"value\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n [size]=\"size()\"\n (onkey)=\"handleKeyPress($event)\"\n (click)=\"handleClick()\"\n (onValueChanged)=\"textChange($event)\"\n (onFocus)=\"handleFocus($event)\"\n (onBlur)=\"handleBlur($event)\"\n ></ax-text-box>\n </ng-container>\n <ng-container panel>\n <div class=\"ax list-container\">\n <div\n #listContainer\n class=\"list-container-items\"\n (scroll)=\"scrolled($event)\"\n >\n @if(resolvedItems().length > 0){ @for (item of resolvedItems(); track\n $index) {\n <div\n class=\"list-item\"\n [class.focused]=\"$index == currentfocusedIndex()\"\n [class.selected]=\"isItemSelected(item)\"\n (click)=\"handleItemClick($event, item)\"\n (dblclick)=\"handleItemDbClick($event, item)\"\n >\n <div style=\"display: flex\">\n @if (showCheckBox()) {\n <ax-check-box\n [size]=\"size()\"\n [value]=\"isItemSelected(item)\"\n (onClick)=\"handleItemClick($event, item)\"\n >\n </ax-check-box>\n } @if (rowTemplate) {\n <div\n style=\"\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n flex: 1;\n \"\n [title]=\"item[textField()]\"\n [ngStyle]=\"\n showCheckBox() ? { 'padding-inline-start': '0.5rem' } : ''\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"rowTemplate; context: { $implicit: item }\"\n >\n </ng-container>\n </div>\n }@else {\n <div\n style=\"\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n flex: 1;\n \"\n [title]=\"item[textField()]\"\n [ngStyle]=\"\n showCheckBox() ? { 'padding-inline-start': '0.5rem' } : ''\n \"\n >\n {{ item[textField()] }}\n </div>\n }\n </div>\n </div>\n } }@else { @if(showLoading() == true){\n <div class=\"list-item\">\n {{ 'common.search' | trans }}\n </div>\n }@else {\n <div class=\"list-item\">\n {{ 'common.noDataFound' | trans }}\n </div>\n } } @if (showLoading()) {\n <div class=\"ax-pad-sm\" style=\"text-align: center\">\n <i\n class=\"far fa-spinner-third fa-pulse fa-2x\"\n style=\"color: var(--ax-primary-color)\"\n ></i>\n </div>\n }\n </div>\n </div></ng-container\n >\n <ng-container end>\n <ng-content select=\"[end]\"> </ng-content>\n </ng-container>\n</ax-drop-down>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], encapsulation: i0.ViewEncapsulation.None });
|
|
8395
8396
|
}
|
|
8396
8397
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAutoCompleteComponent, decorators: [{
|
|
8397
8398
|
type: Component,
|
|
@@ -8399,6 +8400,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
8399
8400
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { listContainer: [{
|
|
8400
8401
|
type: ViewChild,
|
|
8401
8402
|
args: ['listContainer']
|
|
8403
|
+
}], rowTemplate: [{
|
|
8404
|
+
type: ContentChild,
|
|
8405
|
+
args: ['rowTemplate', { static: false }]
|
|
8402
8406
|
}], dropdown: [{
|
|
8403
8407
|
type: ViewChild,
|
|
8404
8408
|
args: ['d', { static: true }]
|
|
@@ -12455,8 +12459,6 @@ class AXSearchBarComponent {
|
|
|
12455
12459
|
this.cdr = cdr;
|
|
12456
12460
|
this.ref = ref;
|
|
12457
12461
|
}
|
|
12458
|
-
_platform = inject(AXPlatform);
|
|
12459
|
-
isRtl = signal(this._platform.isRtl(), ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
|
|
12460
12462
|
searchPopover;
|
|
12461
12463
|
_editors;
|
|
12462
12464
|
form;
|
|
@@ -12758,11 +12760,11 @@ class AXSearchBarComponent {
|
|
|
12758
12760
|
this.searchPopover.close();
|
|
12759
12761
|
}
|
|
12760
12762
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
12761
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSearchBarComponent, isStandalone: false, selector: "ax-search-bar", inputs: { showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, sizeButton: { classPropertyName: "sizeButton", publicName: "sizeButton", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: false, isRequired: false, transformFunction: null }, popoverWidth: { classPropertyName: "popoverWidth", publicName: "popoverWidth", isSignal: false, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: null }, loadOnInit: { classPropertyName: "loadOnInit", publicName: "loadOnInit", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null } }, 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: "@if (showBadge()) {\n\n<div class=\"ax-search-bar-badge-container\">\n <ax-button\n [block]=\"block\"\n end\n icon=\"far fa-sliders-h icon\"\n [type]=\"'primary outline'\"\n [disabled]=\"disabled\"\n [size]=\"sizeButton\"\n [tabIndex]=\"-1\"\n (click)=\"handleButtonClick()\"\n >\n </ax-button>\n\n @if (_searchCount) {\n\n <span class=\"search-count\">\n {{ _searchCount }}\n </span>\n }\n</div>\n\n}@else {\n<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 @if (_searchCount) {\n <span class=\"search-count\">{{ _searchCount }}</span>\n }</ax-button\n>\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 item) { @if (item?.groupTitle) {\n <ax-fieldset [caption]=\"item?.groupTitle\">\n @for (item of item.rows; track item) {\n <div class=\"row\">\n @for (prop of item.items; track prop) { @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 </ax-fieldset>\n }@else { @for (item of item.rows; track item) {\n <div class=\"row\">\n @for (prop of item.items; track prop) { @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 <div
|
|
12763
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSearchBarComponent, isStandalone: false, selector: "ax-search-bar", inputs: { showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, sizeButton: { classPropertyName: "sizeButton", publicName: "sizeButton", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: false, isRequired: false, transformFunction: null }, popoverWidth: { classPropertyName: "popoverWidth", publicName: "popoverWidth", isSignal: false, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: null }, loadOnInit: { classPropertyName: "loadOnInit", publicName: "loadOnInit", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null } }, 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: "@if (showBadge()) {\n\n<div class=\"ax-search-bar-badge-container\">\n <ax-button\n [block]=\"block\"\n end\n icon=\"far fa-sliders-h icon\"\n [type]=\"'primary outline'\"\n [disabled]=\"disabled\"\n [size]=\"sizeButton\"\n [tabIndex]=\"-1\"\n (click)=\"handleButtonClick()\"\n >\n </ax-button>\n\n @if (_searchCount) {\n\n <span class=\"search-count\">\n {{ _searchCount }}\n </span>\n }\n</div>\n\n}@else {\n<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 @if (_searchCount) {\n <span class=\"search-count\">{{ _searchCount }}</span>\n }</ax-button\n>\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 item) { @if (item?.groupTitle) {\n <ax-fieldset [caption]=\"item?.groupTitle\">\n @for (item of item.rows; track item) {\n <div class=\"row\">\n @for (prop of item.items; track prop) { @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 </ax-fieldset>\n }@else { @for (item of item.rows; track item) {\n <div class=\"row\">\n @for (prop of item.items; track prop) { @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 <div class=\"footer-button\">\n <ax-button type=\"blank danger\" (click)=\"clear()\">{{\n 'common.reset' | trans\n }}</ax-button>\n <ax-button (click)=\"search()\">{{ 'common.search' | trans }}</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;flex-direction:row-reverse}.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}.ax-search-bar-badge-container{position:relative;display:inline-block}.ax-search-bar-badge-container .search-count{background-color:var(--ax-primary-color);color:#fff;border-radius:50%;height:25px;width:25px;position:absolute;left:0;top:0;transform:translate(-30%,-30%)}\n"], dependencies: [{ 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" }] });
|
|
12762
12764
|
}
|
|
12763
12765
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSearchBarComponent, decorators: [{
|
|
12764
12766
|
type: Component,
|
|
12765
|
-
args: [{ selector: 'ax-search-bar', standalone: false, template: "@if (showBadge()) {\n\n<div class=\"ax-search-bar-badge-container\">\n <ax-button\n [block]=\"block\"\n end\n icon=\"far fa-sliders-h icon\"\n [type]=\"'primary outline'\"\n [disabled]=\"disabled\"\n [size]=\"sizeButton\"\n [tabIndex]=\"-1\"\n (click)=\"handleButtonClick()\"\n >\n </ax-button>\n\n @if (_searchCount) {\n\n <span class=\"search-count\">\n {{ _searchCount }}\n </span>\n }\n</div>\n\n}@else {\n<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 @if (_searchCount) {\n <span class=\"search-count\">{{ _searchCount }}</span>\n }</ax-button\n>\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 item) { @if (item?.groupTitle) {\n <ax-fieldset [caption]=\"item?.groupTitle\">\n @for (item of item.rows; track item) {\n <div class=\"row\">\n @for (prop of item.items; track prop) { @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 </ax-fieldset>\n }@else { @for (item of item.rows; track item) {\n <div class=\"row\">\n @for (prop of item.items; track prop) { @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 <div
|
|
12767
|
+
args: [{ selector: 'ax-search-bar', standalone: false, template: "@if (showBadge()) {\n\n<div class=\"ax-search-bar-badge-container\">\n <ax-button\n [block]=\"block\"\n end\n icon=\"far fa-sliders-h icon\"\n [type]=\"'primary outline'\"\n [disabled]=\"disabled\"\n [size]=\"sizeButton\"\n [tabIndex]=\"-1\"\n (click)=\"handleButtonClick()\"\n >\n </ax-button>\n\n @if (_searchCount) {\n\n <span class=\"search-count\">\n {{ _searchCount }}\n </span>\n }\n</div>\n\n}@else {\n<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 @if (_searchCount) {\n <span class=\"search-count\">{{ _searchCount }}</span>\n }</ax-button\n>\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 item) { @if (item?.groupTitle) {\n <ax-fieldset [caption]=\"item?.groupTitle\">\n @for (item of item.rows; track item) {\n <div class=\"row\">\n @for (prop of item.items; track prop) { @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 </ax-fieldset>\n }@else { @for (item of item.rows; track item) {\n <div class=\"row\">\n @for (prop of item.items; track prop) { @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 <div class=\"footer-button\">\n <ax-button type=\"blank danger\" (click)=\"clear()\">{{\n 'common.reset' | trans\n }}</ax-button>\n <ax-button (click)=\"search()\">{{ 'common.search' | trans }}</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;flex-direction:row-reverse}.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}.ax-search-bar-badge-container{position:relative;display:inline-block}.ax-search-bar-badge-container .search-count{background-color:var(--ax-primary-color);color:#fff;border-radius:50%;height:25px;width:25px;position:absolute;left:0;top:0;transform:translate(-30%,-30%)}\n"] }]
|
|
12766
12768
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { searchPopover: [{
|
|
12767
12769
|
type: ViewChild,
|
|
12768
12770
|
args: ['searchPop']
|