@unipin/angular-applet 17.0.3 → 17.0.4
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.
- package/esm2022/lib/components/filter/filter.component.mjs +2 -2
- package/esm2022/lib/components/forms/searchable-select/form-searchable-select.component.mjs +7 -4
- package/esm2022/lib/components/forms/select/form-select.component.mjs +7 -4
- package/fesm2022/unipin-angular-applet.mjs +13 -7
- package/fesm2022/unipin-angular-applet.mjs.map +1 -1
- package/lib/components/forms/searchable-select/form-searchable-select.component.d.ts +2 -1
- package/lib/components/forms/select/form-select.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -841,6 +841,7 @@ class FormSearchableSelectComponent {
|
|
|
841
841
|
constructor(placeholder, ch) {
|
|
842
842
|
this.placeholder = placeholder;
|
|
843
843
|
this.ch = ch;
|
|
844
|
+
this.clearable = true;
|
|
844
845
|
this.label = '';
|
|
845
846
|
this.initialItems = [];
|
|
846
847
|
this.required = false;
|
|
@@ -894,7 +895,7 @@ class FormSearchableSelectComponent {
|
|
|
894
895
|
}
|
|
895
896
|
}
|
|
896
897
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FormSearchableSelectComponent, deps: [{ token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
897
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: FormSearchableSelectComponent, isStandalone: true, selector: "up-searchable-select", inputs: { queryFunc: "queryFunc", label: "label", initialItems: "initialItems", required: "required", addTag: "addTag", disabled: "disabled", multiple: "multiple", bindLabel: "bindLabel", bindValue: "bindValue" }, outputs: { onChange: "onChange" }, host: { classAttribute: "d-block" }, providers: [
|
|
898
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: FormSearchableSelectComponent, isStandalone: true, selector: "up-searchable-select", inputs: { queryFunc: "queryFunc", clearable: "clearable", label: "label", initialItems: "initialItems", required: "required", addTag: "addTag", disabled: "disabled", multiple: "multiple", bindLabel: "bindLabel", bindValue: "bindValue" }, outputs: { onChange: "onChange" }, host: { classAttribute: "d-block" }, providers: [
|
|
898
899
|
{
|
|
899
900
|
multi: true,
|
|
900
901
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -905,7 +906,7 @@ class FormSearchableSelectComponent {
|
|
|
905
906
|
provide: NG_VALIDATORS,
|
|
906
907
|
useExisting: FormSearchableSelectComponent
|
|
907
908
|
}
|
|
908
|
-
], usesOnChanges: true, ngImport: i0, template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\n<ng-select \n appendTo=\"body\"\n typeToSearchText=\"Please enter 3 or more characters\"\n bindLabel=\"{{ bindLabel }}\"\n bindValue=\"{{ bindValue }}\"\n placeholder=\"{{ placeholder }}\" \n [minTermLength]=\"3\"\n [virtualScroll]=\"true\"\n [editableSearchTerm]=\"true\"\n [ngModel]=\"value\" \n [addTag]=\"addTag\"\n [multiple]=\"multiple\"\n [readonly]=\"disabled\" \n [loading]=\"isLoading\"\n [typeahead]=\"typeahead\"\n [items]=\"items$ | async\"\n (change)=\"change($event);\"\n/>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
909
|
+
], usesOnChanges: true, ngImport: i0, template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\n<ng-select \n appendTo=\"body\"\n typeToSearchText=\"Please enter 3 or more characters\"\n bindLabel=\"{{ bindLabel }}\"\n bindValue=\"{{ bindValue }}\"\n placeholder=\"{{ placeholder }}\" \n [minTermLength]=\"3\"\n [virtualScroll]=\"true\"\n [editableSearchTerm]=\"true\"\n [ngModel]=\"value\" \n [addTag]=\"addTag\"\n [multiple]=\"multiple\"\n [readonly]=\"disabled\" \n [loading]=\"isLoading\"\n [clearable]=\"clearable\"\n [typeahead]=\"typeahead\"\n [items]=\"items$ | async\"\n (change)=\"change($event);\"\n/>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
909
910
|
}
|
|
910
911
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FormSearchableSelectComponent, decorators: [{
|
|
911
912
|
type: Component,
|
|
@@ -926,13 +927,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
926
927
|
provide: NG_VALIDATORS,
|
|
927
928
|
useExisting: FormSearchableSelectComponent
|
|
928
929
|
}
|
|
929
|
-
], template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\n<ng-select \n appendTo=\"body\"\n typeToSearchText=\"Please enter 3 or more characters\"\n bindLabel=\"{{ bindLabel }}\"\n bindValue=\"{{ bindValue }}\"\n placeholder=\"{{ placeholder }}\" \n [minTermLength]=\"3\"\n [virtualScroll]=\"true\"\n [editableSearchTerm]=\"true\"\n [ngModel]=\"value\" \n [addTag]=\"addTag\"\n [multiple]=\"multiple\"\n [readonly]=\"disabled\" \n [loading]=\"isLoading\"\n [typeahead]=\"typeahead\"\n [items]=\"items$ | async\"\n (change)=\"change($event);\"\n/>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n" }]
|
|
930
|
+
], template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\n<ng-select \n appendTo=\"body\"\n typeToSearchText=\"Please enter 3 or more characters\"\n bindLabel=\"{{ bindLabel }}\"\n bindValue=\"{{ bindValue }}\"\n placeholder=\"{{ placeholder }}\" \n [minTermLength]=\"3\"\n [virtualScroll]=\"true\"\n [editableSearchTerm]=\"true\"\n [ngModel]=\"value\" \n [addTag]=\"addTag\"\n [multiple]=\"multiple\"\n [readonly]=\"disabled\" \n [loading]=\"isLoading\"\n [clearable]=\"clearable\"\n [typeahead]=\"typeahead\"\n [items]=\"items$ | async\"\n (change)=\"change($event);\"\n/>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n" }]
|
|
930
931
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
931
932
|
type: Attribute,
|
|
932
933
|
args: ['placeholder']
|
|
933
934
|
}] }, { type: i0.ChangeDetectorRef }], propDecorators: { queryFunc: [{
|
|
934
935
|
type: Input,
|
|
935
936
|
args: [{ required: true }]
|
|
937
|
+
}], clearable: [{
|
|
938
|
+
type: Input
|
|
936
939
|
}], label: [{
|
|
937
940
|
type: Input
|
|
938
941
|
}], initialItems: [{
|
|
@@ -957,6 +960,7 @@ class FormSelectComponent {
|
|
|
957
960
|
constructor(placeholder, ch) {
|
|
958
961
|
this.placeholder = placeholder;
|
|
959
962
|
this.ch = ch;
|
|
963
|
+
this.clearable = true;
|
|
960
964
|
this.label = '';
|
|
961
965
|
this.multiple = false;
|
|
962
966
|
this.required = false;
|
|
@@ -999,7 +1003,7 @@ class FormSelectComponent {
|
|
|
999
1003
|
}
|
|
1000
1004
|
}
|
|
1001
1005
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FormSelectComponent, deps: [{ token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1002
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: FormSelectComponent, isStandalone: true, selector: "up-select", inputs: { items: "items", label: "label", multiple: "multiple", required: "required", disabled: "disabled", searchable: "searchable", bindLabel: "bindLabel", bindValue: "bindValue" }, host: { classAttribute: "d-block" }, providers: [
|
|
1006
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: FormSelectComponent, isStandalone: true, selector: "up-select", inputs: { items: "items", clearable: "clearable", label: "label", multiple: "multiple", required: "required", disabled: "disabled", searchable: "searchable", bindLabel: "bindLabel", bindValue: "bindValue" }, host: { classAttribute: "d-block" }, providers: [
|
|
1003
1007
|
{
|
|
1004
1008
|
multi: true,
|
|
1005
1009
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1010,7 +1014,7 @@ class FormSelectComponent {
|
|
|
1010
1014
|
provide: NG_VALIDATORS,
|
|
1011
1015
|
useExisting: FormSelectComponent
|
|
1012
1016
|
}
|
|
1013
|
-
], ngImport: i0, template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\n<ng-select\n appendTo=\"body\"\n bindLabel=\"{{ bindLabel }}\"\n bindValue=\"{{ bindValue }}\"\n placeholder=\"{{ placeholder }}\"\n [virtualScroll]=\"true\"\n [items]=\"items\"\n [ngModel]=\"value\"\n [multiple]=\"multiple\"\n [readonly]=\"disabled\"\n [searchable]=\"searchable\"\n (change)=\"change($event);\"\n/>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: [".ng-select.ng-select-opened>.ng-select-container{background:#ffffff}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #616161;border-width:0 5px 5px}.ng-select.ng-select-disabled>.ng-select-container{background-color:#888}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#424242;background-color:#fff;border-radius:4px;border:2px solid #e0e0e0;min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#a8a8a8}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input input{color:#424242}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#888;border:1px solid #fafafa}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:#ed6b26;background-color:#fef3ee;border-radius:2px;margin-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#888}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#fde2d6}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #fbd1be}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #fbd1be}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#424242}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:5px;padding-left:3px}.ng-select .ng-clear-wrapper{color:#adadad}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#ff3b30}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#616161 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:2px solid #e0e0e0;box-shadow:0 1px #0000000f;left:0;z-index:20100!important;border-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;margin-bottom:2px}.ng-dropdown-panel.ng-select-bottom{top:100%;margin-top:2px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #e0e0e0;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #e0e0e0;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#fef3ee}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{color:#0000008a;background-color:#fef3ee;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#ed6b26;background-color:#fef3ee}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#fef3ee;color:#424242}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#888}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1017
|
+
], ngImport: i0, template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\n<ng-select\n appendTo=\"body\"\n bindLabel=\"{{ bindLabel }}\"\n bindValue=\"{{ bindValue }}\"\n placeholder=\"{{ placeholder }}\"\n [virtualScroll]=\"true\"\n [items]=\"items\"\n [ngModel]=\"value\"\n [multiple]=\"multiple\"\n [readonly]=\"disabled\"\n [clearable]=\"clearable\"\n [searchable]=\"searchable\"\n (change)=\"change($event);\"\n/>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: [".ng-select.ng-select-opened>.ng-select-container{background:#ffffff}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #616161;border-width:0 5px 5px}.ng-select.ng-select-disabled>.ng-select-container{background-color:#888}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#424242;background-color:#fff;border-radius:4px;border:2px solid #e0e0e0;min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#a8a8a8}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input input{color:#424242}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#888;border:1px solid #fafafa}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:#ed6b26;background-color:#fef3ee;border-radius:2px;margin-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#888}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#fde2d6}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #fbd1be}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #fbd1be}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#424242}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:5px;padding-left:3px}.ng-select .ng-clear-wrapper{color:#adadad}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#ff3b30}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#616161 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:2px solid #e0e0e0;box-shadow:0 1px #0000000f;left:0;z-index:20100!important;border-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;margin-bottom:2px}.ng-dropdown-panel.ng-select-bottom{top:100%;margin-top:2px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #e0e0e0;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #e0e0e0;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#fef3ee}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{color:#0000008a;background-color:#fef3ee;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#ed6b26;background-color:#fef3ee}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#fef3ee;color:#424242}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#888}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1014
1018
|
}
|
|
1015
1019
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FormSelectComponent, decorators: [{
|
|
1016
1020
|
type: Component,
|
|
@@ -1031,13 +1035,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
1031
1035
|
provide: NG_VALIDATORS,
|
|
1032
1036
|
useExisting: FormSelectComponent
|
|
1033
1037
|
}
|
|
1034
|
-
], template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\n<ng-select\n appendTo=\"body\"\n bindLabel=\"{{ bindLabel }}\"\n bindValue=\"{{ bindValue }}\"\n placeholder=\"{{ placeholder }}\"\n [virtualScroll]=\"true\"\n [items]=\"items\"\n [ngModel]=\"value\"\n [multiple]=\"multiple\"\n [readonly]=\"disabled\"\n [searchable]=\"searchable\"\n (change)=\"change($event);\"\n/>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: [".ng-select.ng-select-opened>.ng-select-container{background:#ffffff}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #616161;border-width:0 5px 5px}.ng-select.ng-select-disabled>.ng-select-container{background-color:#888}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#424242;background-color:#fff;border-radius:4px;border:2px solid #e0e0e0;min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#a8a8a8}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input input{color:#424242}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#888;border:1px solid #fafafa}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:#ed6b26;background-color:#fef3ee;border-radius:2px;margin-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#888}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#fde2d6}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #fbd1be}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #fbd1be}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#424242}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:5px;padding-left:3px}.ng-select .ng-clear-wrapper{color:#adadad}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#ff3b30}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#616161 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:2px solid #e0e0e0;box-shadow:0 1px #0000000f;left:0;z-index:20100!important;border-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;margin-bottom:2px}.ng-dropdown-panel.ng-select-bottom{top:100%;margin-top:2px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #e0e0e0;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #e0e0e0;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#fef3ee}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{color:#0000008a;background-color:#fef3ee;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#ed6b26;background-color:#fef3ee}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#fef3ee;color:#424242}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#888}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}\n"] }]
|
|
1038
|
+
], template: "<label class=\"form-label\" [class.required]=\"required\">{{ label }}</label>\n<ng-select\n appendTo=\"body\"\n bindLabel=\"{{ bindLabel }}\"\n bindValue=\"{{ bindValue }}\"\n placeholder=\"{{ placeholder }}\"\n [virtualScroll]=\"true\"\n [items]=\"items\"\n [ngModel]=\"value\"\n [multiple]=\"multiple\"\n [readonly]=\"disabled\"\n [clearable]=\"clearable\"\n [searchable]=\"searchable\"\n (change)=\"change($event);\"\n/>\n<label *ngIf=\"errorMsg\" class=\"is-invalid\">{{ errorMsg }}</label>\n", styles: [".ng-select.ng-select-opened>.ng-select-container{background:#ffffff}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #616161;border-width:0 5px 5px}.ng-select.ng-select-disabled>.ng-select-container{background-color:#888}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#424242;background-color:#fff;border-radius:4px;border:2px solid #e0e0e0;min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#a8a8a8}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input input{color:#424242}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#888;border:1px solid #fafafa}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:#ed6b26;background-color:#fef3ee;border-radius:2px;margin-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#888}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#fde2d6}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #fbd1be}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #fbd1be}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#424242}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:5px;padding-left:3px}.ng-select .ng-clear-wrapper{color:#adadad}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#ff3b30}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#616161 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:2px solid #e0e0e0;box-shadow:0 1px #0000000f;left:0;z-index:20100!important;border-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;margin-bottom:2px}.ng-dropdown-panel.ng-select-bottom{top:100%;margin-top:2px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #e0e0e0;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #e0e0e0;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#fef3ee}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{color:#0000008a;background-color:#fef3ee;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#ed6b26;background-color:#fef3ee}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#fef3ee;color:#424242}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#888}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}\n"] }]
|
|
1035
1039
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1036
1040
|
type: Attribute,
|
|
1037
1041
|
args: ['placeholder']
|
|
1038
1042
|
}] }, { type: i0.ChangeDetectorRef }], propDecorators: { items: [{
|
|
1039
1043
|
type: Input,
|
|
1040
1044
|
args: [{ required: true }]
|
|
1045
|
+
}], clearable: [{
|
|
1046
|
+
type: Input
|
|
1041
1047
|
}], label: [{
|
|
1042
1048
|
type: Input
|
|
1043
1049
|
}], multiple: [{
|
|
@@ -1213,7 +1219,7 @@ class FilterComponent {
|
|
|
1213
1219
|
this.onSearch.emit({ mode: this.config.mode, data: flag ? data : null });
|
|
1214
1220
|
}
|
|
1215
1221
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FilterComponent, deps: [{ token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }, { token: i1.PopoverController }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1216
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: FilterComponent, isStandalone: true, selector: "up-filter", inputs: { id: "id", config: "config" }, outputs: { onSearch: "onSearch" }, host: { classAttribute: "d-block position-relative" }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], ngImport: i0, template: "<ion-icon name=\"search\" class=\"fs-4 position-absolute\" />\n\n<div class=\"d-flex align-items-center form-control ps-5 py-0 pe-0 gap-3\">\n <div *ngIf=\"activeFilter.length > 0\" class=\"d-flex flex-grow-1 flex-shrink-0 tag-container gap-2 text-nowrap overflow-auto\">\n <div class=\"tag-item p-1 rounded d-flex align-items-center user-select-none\" *ngFor=\"let item of activeFilter; index as i\">\n <ion-icon name=\"close\" class=\"pe-1 me-1 cursor-pointer text-primary\" (click)=\"removeFilter(i);\" />\n {{ item.label }}\n </div>\n </div>\n\n <input #searchBox type=\"search\" placeholder=\"{{ placeholder }}\" class=\"flex-shrink-1 border-0 form-control ps-0 py-2\" [class.adv]=\"config.mode === 'advanced'\" (keyup.enter)=\"add();\" />\n</div>\n\n<ng-container *ngIf=\"config.mode === 'advanced'\">\n <ion-icon name=\"filter\" class=\"position-absolute fs-4 cursor-pointer\" id=\"filter-{{ id }}\" />\n <ion-icon name=\"close\" class=\"position-absolute fs-4 cursor-pointer\" (click)=\"clear();\" />\n\n <ion-popover trigger=\"filter-{{ id }}\" triggerAction=\"click\">\n <ng-template>\n <div class=\"d-flex flex-column filter\">\n <div class=\"flex-shrink-0 border-bottom p-1 pe-4 d-flex align-items-center\">\n <ion-buttons>\n <ion-button size=\"small\" (click)=\"close()\">\n <ion-icon slot=\"icon-only\" name=\"close\" />\n </ion-button>\n </ion-buttons>\n \n <div class=\"fs-5 fw-medium\">Advanced Filter</div>\n </div>\n \n <form class=\"flex-grow-1 overflow-auto px-4\" [formGroup]=\"form\">\n <ng-container *ngFor=\"let c of config.fields\">\n <ng-container [ngSwitch]=\"c.type\">\n <up-input type=\"number\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" *ngSwitchCase=\"'number'\" />\n \n <div class=\"my-4\" *ngSwitchCase=\"'checkbox'\">\n <ion-checkbox labelPlacement=\"end\" formControlName=\"{{ c.key }}\">{{ c.label }}</ion-checkbox>\n </div>\n \n <div class=\"d-flex gap-3 my-4\" *ngSwitchCase=\"'date-range'\">\n <up-date class=\"flex-grow-1\" name=\"filter-from\" label=\"{{ c.label[0] }}\" formControlName=\"{{ c.key[0] }}\" />\n <up-date class=\"flex-grow-1\" name=\"filter-to\" label=\"{{ c.label[1] }}\" formControlName=\"{{ c.key[1] }}\" />\n </div>\n \n <up-select class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" [items]=\"c.options!\" *ngSwitchCase=\"'select'\" />\n <up-searchable-select class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" [queryFunc]=\"c.getOptions!\" [initialItems]=\"c.options!\" *ngSwitchCase=\"'searchable-select'\" />\n \n <up-input type=\"text\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" *ngSwitchDefault />\n </ng-container>\n </ng-container>\n </form>\n \n <div class=\"flex-shrink-0 py-3 px-4 border-top d-flex gap-3\">\n <ion-button class=\"flex-grow-1\" color=\"secondary\" (click)=\"form.reset();\">Reset</ion-button>\n <ion-button class=\"flex-grow-1\" color=\"primary\" (click)=\"search();\">Search</ion-button>\n </div>\n </div>\n </ng-template>\n </ion-popover> \n</ng-container>\n", styles: ["ion-icon{top:7px}ion-icon[name=close]{right:16px}ion-icon[name=search]{left:14px}ion-icon[name=filter]{right:48px}ion-popover{--width: 80%;--max-width: 450px}.adv{padding-right:60px}.fs-5,ion-icon{color:#616161}.tag-container{max-width:47%}.tag-container::-webkit-scrollbar{height:0px}.tag-item{color:#ed6b26;background-color:#fef3ee}.tag-item ion-icon{border-right:1px solid #fbd1be}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: FormDateComponent, selector: "up-date", inputs: ["label", "required", "disabled"] }, { kind: "component", type: FormInputComponent, selector: "up-input", inputs: ["label", "required", "disabled"], outputs: ["onInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormSelectComponent, selector: "up-select", inputs: ["items", "label", "multiple", "required", "disabled", "searchable", "bindLabel", "bindValue"] }, { kind: "component", type: FormSearchableSelectComponent, selector: "up-searchable-select", inputs: ["queryFunc", "label", "initialItems", "required", "addTag", "disabled", "multiple", "bindLabel", "bindValue"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1222
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: FilterComponent, isStandalone: true, selector: "up-filter", inputs: { id: "id", config: "config" }, outputs: { onSearch: "onSearch" }, host: { classAttribute: "d-block position-relative" }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], ngImport: i0, template: "<ion-icon name=\"search\" class=\"fs-4 position-absolute\" />\n\n<div class=\"d-flex align-items-center form-control ps-5 py-0 pe-0 gap-3\">\n <div *ngIf=\"activeFilter.length > 0\" class=\"d-flex flex-grow-1 flex-shrink-0 tag-container gap-2 text-nowrap overflow-auto\">\n <div class=\"tag-item p-1 rounded d-flex align-items-center user-select-none\" *ngFor=\"let item of activeFilter; index as i\">\n <ion-icon name=\"close\" class=\"pe-1 me-1 cursor-pointer text-primary\" (click)=\"removeFilter(i);\" />\n {{ item.label }}\n </div>\n </div>\n\n <input #searchBox type=\"search\" placeholder=\"{{ placeholder }}\" class=\"flex-shrink-1 border-0 form-control ps-0 py-2\" [class.adv]=\"config.mode === 'advanced'\" (keyup.enter)=\"add();\" />\n</div>\n\n<ng-container *ngIf=\"config.mode === 'advanced'\">\n <ion-icon name=\"filter\" class=\"position-absolute fs-4 cursor-pointer\" id=\"filter-{{ id }}\" />\n <ion-icon name=\"close\" class=\"position-absolute fs-4 cursor-pointer\" (click)=\"clear();\" />\n\n <ion-popover trigger=\"filter-{{ id }}\" triggerAction=\"click\">\n <ng-template>\n <div class=\"d-flex flex-column filter\">\n <div class=\"flex-shrink-0 border-bottom p-1 pe-4 d-flex align-items-center\">\n <ion-buttons>\n <ion-button size=\"small\" (click)=\"close()\">\n <ion-icon slot=\"icon-only\" name=\"close\" />\n </ion-button>\n </ion-buttons>\n \n <div class=\"fs-5 fw-medium\">Advanced Filter</div>\n </div>\n \n <form class=\"flex-grow-1 overflow-auto px-4\" [formGroup]=\"form\">\n <ng-container *ngFor=\"let c of config.fields\">\n <ng-container [ngSwitch]=\"c.type\">\n <up-input type=\"number\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" *ngSwitchCase=\"'number'\" />\n \n <div class=\"my-4\" *ngSwitchCase=\"'checkbox'\">\n <ion-checkbox labelPlacement=\"end\" formControlName=\"{{ c.key }}\">{{ c.label }}</ion-checkbox>\n </div>\n \n <div class=\"d-flex gap-3 my-4\" *ngSwitchCase=\"'date-range'\">\n <up-date class=\"flex-grow-1\" name=\"filter-from\" label=\"{{ c.label[0] }}\" formControlName=\"{{ c.key[0] }}\" />\n <up-date class=\"flex-grow-1\" name=\"filter-to\" label=\"{{ c.label[1] }}\" formControlName=\"{{ c.key[1] }}\" />\n </div>\n \n <up-select class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" [items]=\"c.options!\" *ngSwitchCase=\"'select'\" />\n <up-searchable-select class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" [queryFunc]=\"c.getOptions!\" [initialItems]=\"c.options!\" *ngSwitchCase=\"'searchable-select'\" />\n \n <up-input type=\"text\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" *ngSwitchDefault />\n </ng-container>\n </ng-container>\n </form>\n \n <div class=\"flex-shrink-0 py-3 px-4 border-top d-flex gap-3\">\n <ion-button class=\"flex-grow-1\" color=\"secondary\" (click)=\"form.reset();\">Reset</ion-button>\n <ion-button class=\"flex-grow-1\" color=\"primary\" (click)=\"search();\">Search</ion-button>\n </div>\n </div>\n </ng-template>\n </ion-popover> \n</ng-container>\n", styles: ["ion-icon{top:7px}ion-icon[name=close]{right:16px}ion-icon[name=search]{left:14px}ion-icon[name=filter]{right:48px}ion-popover{--width: 80%;--max-width: 450px}.adv{padding-right:60px}.fs-5,ion-icon{color:#616161}.tag-container{max-width:47%}.tag-container::-webkit-scrollbar{height:0px}.tag-item{color:#ed6b26;background-color:#fef3ee}.tag-item ion-icon{border-right:1px solid #fbd1be}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: FormDateComponent, selector: "up-date", inputs: ["label", "required", "disabled"] }, { kind: "component", type: FormInputComponent, selector: "up-input", inputs: ["label", "required", "disabled"], outputs: ["onInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormSelectComponent, selector: "up-select", inputs: ["items", "clearable", "label", "multiple", "required", "disabled", "searchable", "bindLabel", "bindValue"] }, { kind: "component", type: FormSearchableSelectComponent, selector: "up-searchable-select", inputs: ["queryFunc", "clearable", "label", "initialItems", "required", "addTag", "disabled", "multiple", "bindLabel", "bindValue"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1217
1223
|
}
|
|
1218
1224
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FilterComponent, decorators: [{
|
|
1219
1225
|
type: Component,
|