nira-falcon 1.0.18 → 1.0.21
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/core-multi-select/core-multi-select.component.mjs +12 -5
- package/esm2022/lib/core-select/core-select.component.mjs +10 -3
- package/esm2022/lib/core-select-search/core-select-search.component.mjs +16 -5
- package/fesm2022/nira-falcon.mjs +32 -8
- package/fesm2022/nira-falcon.mjs.map +1 -1
- package/lib/core-select/core-select.component.d.ts +1 -0
- package/lib/core-select-search/core-select-search.component.d.ts +2 -1
- package/package.json +2 -2
package/fesm2022/nira-falcon.mjs
CHANGED
|
@@ -942,6 +942,7 @@ class CoreSelectComponent {
|
|
|
942
942
|
this.onItemSelected = new EventEmitter();
|
|
943
943
|
this.inputFormControl = new FormControl('', []);
|
|
944
944
|
this.currentIndex = 0;
|
|
945
|
+
this.isFocusElement = false;
|
|
945
946
|
}
|
|
946
947
|
init() {
|
|
947
948
|
this.titleKeyObject = this.titleKey;
|
|
@@ -965,12 +966,18 @@ class CoreSelectComponent {
|
|
|
965
966
|
openMenuClick() {
|
|
966
967
|
if (this.disabled)
|
|
967
968
|
return;
|
|
968
|
-
this.
|
|
969
|
+
if (this.isFocusElement) {
|
|
970
|
+
this.isFocusElement = false;
|
|
971
|
+
}
|
|
972
|
+
else {
|
|
973
|
+
this.isOpenMenu = !this.isOpenMenu;
|
|
974
|
+
}
|
|
969
975
|
}
|
|
970
976
|
focus() {
|
|
971
977
|
setTimeout(() => {
|
|
972
978
|
this.selectContainer.toArray()[0].nativeElement.focus();
|
|
973
|
-
this.
|
|
979
|
+
this.isFocusElement = true;
|
|
980
|
+
this.isOpenMenu = !this.isOpenMenu;
|
|
974
981
|
});
|
|
975
982
|
}
|
|
976
983
|
handleKeyBoard(event) {
|
|
@@ -3404,14 +3411,21 @@ class CoreMultiSelectComponent {
|
|
|
3404
3411
|
}
|
|
3405
3412
|
else {
|
|
3406
3413
|
let flag = false;
|
|
3407
|
-
Object.keys(this.selectedItems)
|
|
3414
|
+
const selectedKeys = Object.keys(this.selectedItems);
|
|
3415
|
+
selectedKeys.forEach((item) => {
|
|
3408
3416
|
if (this.singleSelectItems.find((data) => data == item)) {
|
|
3409
3417
|
flag = true;
|
|
3410
3418
|
return;
|
|
3411
3419
|
}
|
|
3412
3420
|
});
|
|
3413
|
-
if (
|
|
3421
|
+
if (selectedKeys.length > 0 &&
|
|
3414
3422
|
this.singleSelectItems.find((data) => data == selectedItem.value)) {
|
|
3423
|
+
this.selectedItems = [];
|
|
3424
|
+
this.selectedItems[selectedItem.value] = selectedItem;
|
|
3425
|
+
}
|
|
3426
|
+
else if (flag) {
|
|
3427
|
+
this.selectedItems = [];
|
|
3428
|
+
this.selectedItems[selectedItem.value] = selectedItem;
|
|
3415
3429
|
}
|
|
3416
3430
|
else if (!flag)
|
|
3417
3431
|
this.selectedItems[selectedItem.value] = selectedItem;
|
|
@@ -3461,11 +3475,11 @@ class CoreMultiSelectComponent {
|
|
|
3461
3475
|
}
|
|
3462
3476
|
}
|
|
3463
3477
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreMultiSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3464
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreMultiSelectComponent, selector: "core-multi-select", inputs: { canAddValueKeyAndTitleKeyInSearchKeys: "canAddValueKeyAndTitleKeyInSearchKeys", inputFormControl: "inputFormControl", singleSelectItems: "singleSelectItems", label: "label", searchKeys: "searchKeys", titleKey: "titleKey", valueKey: "valueKey", items: "items", defaultValue: "defaultValue" }, outputs: { onItemSelected: "onItemSelected" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputSearch"], descendants: true }], ngImport: i0, template: "<div\r\n (keydown)=\"handleKeyBoard($event)\"\r\n tabindex=\"0\"\r\n class=\"dropdown\"\r\n (focusin)=\"setInputFocus()\"\r\n (focusout)=\"focusOut($event)\"\r\n>\r\n <div\r\n class=\"select\"\r\n [ngClass]=\"{\r\n 'select-focus': focused,\r\n 'select-clicked': isOpenMenu,\r\n selectError: inputFormControl.touched && inputFormControl.errors,\r\n }\"\r\n (click)=\"openMenuClick()\"\r\n >\r\n <span class=\"placeholder-top\" *ngIf=\"isSelectedItems || focused\">{{\r\n label\r\n }}</span>\r\n <arrow-down-icon\r\n class=\"caret fill-secondary-text-color h-6\"\r\n [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n ></arrow-down-icon>\r\n\r\n <input\r\n #inputSearch\r\n autocomplete=\"off\"\r\n id=\"inputSearch\"\r\n class=\"input bg-transparent text-sm focus:outline-none\"\r\n [(ngModel)]=\"searchText\"\r\n (keyup)=\"onChangeText($event, true)\"\r\n (focus)=\"focused = true\"\r\n (blur)=\"focused = false\"\r\n />\r\n <!-- (keydown)=\"handleKeyBoard($event)\" -->\r\n <span\r\n class=\"text-content text-right\"\r\n [ngClass]=\"[\r\n label.length > 0 && !isSelectedItems ? 'placeholder' : 'selected',\r\n ]\"\r\n >{{ isSelectedItems || focused ? text : label }}</span\r\n >\r\n </div>\r\n <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n <app-core-multi-select-row\r\n *ngFor=\"let item of filteredItems | async; let i = index\"\r\n [item]=\"item\"\r\n [id]=\"'scroll' + randomId + '-' + i\"\r\n [isSelected]=\"selectedItems[item.value] ? true : false\"\r\n [focusItemId]=\"focusItem?.value\"\r\n (onSelect)=\"onItemSelect(item, true)\"\r\n >\r\n </app-core-multi-select-row>\r\n </ul>\r\n <div class=\"label-error overflow-hidden\">\r\n <span\r\n *ngIf=\"inputFormControl.touched && inputFormControl.errors?.['required']\"\r\n >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n >\r\n </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown:focus{outline:none}.dropdown .select{background:#fff;color:#304050;display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;overflow:hidden;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select .text-content{white-space:nowrap;display:block;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}.dropdown .select .selected{padding-inline:12px;font-size:14px;max-width:90%;color:#000000b3;flex:0 0 auto;overflow:hidden;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline-start:16px;flex:0 0 auto}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;margin-inline:4px;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}.select-focus{background-color:#f2f4f70d!important;border-radius:3px;border:2px solid rgba(19,92,175,.397)!important}.input{flex:1 1 auto;width:100%;min-width:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoreMultiSelectRowComponent, selector: "app-core-multi-select-row", inputs: ["isSelected", "focusItemId", "item"], outputs: ["onSelect"] }, { kind: "component", type: ArrowDownIconComponent, selector: "arrow-down-icon" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
3478
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreMultiSelectComponent, selector: "core-multi-select", inputs: { canAddValueKeyAndTitleKeyInSearchKeys: "canAddValueKeyAndTitleKeyInSearchKeys", inputFormControl: "inputFormControl", singleSelectItems: "singleSelectItems", label: "label", searchKeys: "searchKeys", titleKey: "titleKey", valueKey: "valueKey", items: "items", defaultValue: "defaultValue" }, outputs: { onItemSelected: "onItemSelected" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputSearch"], descendants: true }], ngImport: i0, template: "<div\r\n (keydown)=\"handleKeyBoard($event)\"\r\n tabindex=\"0\"\r\n class=\"dropdown\"\r\n (focusin)=\"setInputFocus()\"\r\n (focusout)=\"focusOut($event)\"\r\n>\r\n <div\r\n class=\"select\"\r\n [ngClass]=\"{\r\n 'select-focus': focused,\r\n 'select-clicked': isOpenMenu,\r\n selectError: inputFormControl.touched && inputFormControl.errors,\r\n }\"\r\n (click)=\"openMenuClick()\"\r\n >\r\n <span class=\"placeholder-top\" *ngIf=\"isSelectedItems || focused\">{{\r\n label\r\n }}</span>\r\n <arrow-down-icon\r\n class=\"caret fill-secondary-text-color h-6\"\r\n [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n ></arrow-down-icon>\r\n\r\n <input\r\n #inputSearch\r\n autocomplete=\"off\"\r\n id=\"inputSearch\"\r\n class=\"input bg-transparent text-sm focus:outline-none\"\r\n [(ngModel)]=\"searchText\"\r\n (keyup)=\"onChangeText($event, true)\"\r\n (focus)=\"focused = true\"\r\n (blur)=\"focused = false\"\r\n />\r\n <!-- (keydown)=\"handleKeyBoard($event)\" -->\r\n <span\r\n class=\"text-content text-right\"\r\n [ngClass]=\"[\r\n label.length > 0 && !isSelectedItems ? 'placeholder' : 'selected',\r\n ]\"\r\n >{{ isSelectedItems || focused ? text : label }}</span\r\n >\r\n </div>\r\n <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n <app-core-multi-select-row\r\n *ngFor=\"let item of filteredItems | async; let i = index\"\r\n [item]=\"item\"\r\n [id]=\"'scroll' + randomId + '-' + i\"\r\n [isSelected]=\"selectedItems[item.value] ? true : false\"\r\n [focusItemId]=\"focusItem?.value\"\r\n (onSelect)=\"onItemSelect(item, true)\"\r\n >\r\n </app-core-multi-select-row>\r\n </ul>\r\n <div class=\"label-error overflow-hidden\">\r\n <span\r\n *ngIf=\"inputFormControl.touched && inputFormControl.errors?.['required']\"\r\n >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n >\r\n </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown:focus{outline:none}.dropdown .select{background:#fff;color:#304050;display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;overflow:hidden;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select .text-content{white-space:nowrap;display:block;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}.dropdown .select .selected{padding-inline-start:12px;padding-inline-end:6px;font-size:14px;max-width:90%;color:#000000b3;flex:0 0 auto;overflow:hidden;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline-start:16px;flex:0 0 auto}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;margin-inline:4px;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}.select-focus{background-color:#f2f4f70d!important;border-radius:3px;border:2px solid rgba(19,92,175,.397)!important}.input{flex:1 1 auto;width:100%;min-width:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoreMultiSelectRowComponent, selector: "app-core-multi-select-row", inputs: ["isSelected", "focusItemId", "item"], outputs: ["onSelect"] }, { kind: "component", type: ArrowDownIconComponent, selector: "arrow-down-icon" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
3465
3479
|
}
|
|
3466
3480
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreMultiSelectComponent, decorators: [{
|
|
3467
3481
|
type: Component,
|
|
3468
|
-
args: [{ selector: 'core-multi-select', template: "<div\r\n (keydown)=\"handleKeyBoard($event)\"\r\n tabindex=\"0\"\r\n class=\"dropdown\"\r\n (focusin)=\"setInputFocus()\"\r\n (focusout)=\"focusOut($event)\"\r\n>\r\n <div\r\n class=\"select\"\r\n [ngClass]=\"{\r\n 'select-focus': focused,\r\n 'select-clicked': isOpenMenu,\r\n selectError: inputFormControl.touched && inputFormControl.errors,\r\n }\"\r\n (click)=\"openMenuClick()\"\r\n >\r\n <span class=\"placeholder-top\" *ngIf=\"isSelectedItems || focused\">{{\r\n label\r\n }}</span>\r\n <arrow-down-icon\r\n class=\"caret fill-secondary-text-color h-6\"\r\n [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n ></arrow-down-icon>\r\n\r\n <input\r\n #inputSearch\r\n autocomplete=\"off\"\r\n id=\"inputSearch\"\r\n class=\"input bg-transparent text-sm focus:outline-none\"\r\n [(ngModel)]=\"searchText\"\r\n (keyup)=\"onChangeText($event, true)\"\r\n (focus)=\"focused = true\"\r\n (blur)=\"focused = false\"\r\n />\r\n <!-- (keydown)=\"handleKeyBoard($event)\" -->\r\n <span\r\n class=\"text-content text-right\"\r\n [ngClass]=\"[\r\n label.length > 0 && !isSelectedItems ? 'placeholder' : 'selected',\r\n ]\"\r\n >{{ isSelectedItems || focused ? text : label }}</span\r\n >\r\n </div>\r\n <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n <app-core-multi-select-row\r\n *ngFor=\"let item of filteredItems | async; let i = index\"\r\n [item]=\"item\"\r\n [id]=\"'scroll' + randomId + '-' + i\"\r\n [isSelected]=\"selectedItems[item.value] ? true : false\"\r\n [focusItemId]=\"focusItem?.value\"\r\n (onSelect)=\"onItemSelect(item, true)\"\r\n >\r\n </app-core-multi-select-row>\r\n </ul>\r\n <div class=\"label-error overflow-hidden\">\r\n <span\r\n *ngIf=\"inputFormControl.touched && inputFormControl.errors?.['required']\"\r\n >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n >\r\n </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown:focus{outline:none}.dropdown .select{background:#fff;color:#304050;display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;overflow:hidden;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select .text-content{white-space:nowrap;display:block;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}.dropdown .select .selected{padding-inline:12px;font-size:14px;max-width:90%;color:#000000b3;flex:0 0 auto;overflow:hidden;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline-start:16px;flex:0 0 auto}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;margin-inline:4px;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}.select-focus{background-color:#f2f4f70d!important;border-radius:3px;border:2px solid rgba(19,92,175,.397)!important}.input{flex:1 1 auto;width:100%;min-width:0}\n"] }]
|
|
3482
|
+
args: [{ selector: 'core-multi-select', template: "<div\r\n (keydown)=\"handleKeyBoard($event)\"\r\n tabindex=\"0\"\r\n class=\"dropdown\"\r\n (focusin)=\"setInputFocus()\"\r\n (focusout)=\"focusOut($event)\"\r\n>\r\n <div\r\n class=\"select\"\r\n [ngClass]=\"{\r\n 'select-focus': focused,\r\n 'select-clicked': isOpenMenu,\r\n selectError: inputFormControl.touched && inputFormControl.errors,\r\n }\"\r\n (click)=\"openMenuClick()\"\r\n >\r\n <span class=\"placeholder-top\" *ngIf=\"isSelectedItems || focused\">{{\r\n label\r\n }}</span>\r\n <arrow-down-icon\r\n class=\"caret fill-secondary-text-color h-6\"\r\n [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n ></arrow-down-icon>\r\n\r\n <input\r\n #inputSearch\r\n autocomplete=\"off\"\r\n id=\"inputSearch\"\r\n class=\"input bg-transparent text-sm focus:outline-none\"\r\n [(ngModel)]=\"searchText\"\r\n (keyup)=\"onChangeText($event, true)\"\r\n (focus)=\"focused = true\"\r\n (blur)=\"focused = false\"\r\n />\r\n <!-- (keydown)=\"handleKeyBoard($event)\" -->\r\n <span\r\n class=\"text-content text-right\"\r\n [ngClass]=\"[\r\n label.length > 0 && !isSelectedItems ? 'placeholder' : 'selected',\r\n ]\"\r\n >{{ isSelectedItems || focused ? text : label }}</span\r\n >\r\n </div>\r\n <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n <app-core-multi-select-row\r\n *ngFor=\"let item of filteredItems | async; let i = index\"\r\n [item]=\"item\"\r\n [id]=\"'scroll' + randomId + '-' + i\"\r\n [isSelected]=\"selectedItems[item.value] ? true : false\"\r\n [focusItemId]=\"focusItem?.value\"\r\n (onSelect)=\"onItemSelect(item, true)\"\r\n >\r\n </app-core-multi-select-row>\r\n </ul>\r\n <div class=\"label-error overflow-hidden\">\r\n <span\r\n *ngIf=\"inputFormControl.touched && inputFormControl.errors?.['required']\"\r\n >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n >\r\n </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown:focus{outline:none}.dropdown .select{background:#fff;color:#304050;display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;overflow:hidden;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select .text-content{white-space:nowrap;display:block;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}.dropdown .select .selected{padding-inline-start:12px;padding-inline-end:6px;font-size:14px;max-width:90%;color:#000000b3;flex:0 0 auto;overflow:hidden;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline-start:16px;flex:0 0 auto}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;margin-inline:4px;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}.select-focus{background-color:#f2f4f70d!important;border-radius:3px;border:2px solid rgba(19,92,175,.397)!important}.input{flex:1 1 auto;width:100%;min-width:0}\n"] }]
|
|
3469
3483
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { onItemSelected: [{
|
|
3470
3484
|
type: Output
|
|
3471
3485
|
}], inputElement: [{
|
|
@@ -3498,6 +3512,8 @@ class CoreSelectSearchComponent {
|
|
|
3498
3512
|
this.init();
|
|
3499
3513
|
}
|
|
3500
3514
|
set defaultValue(data) {
|
|
3515
|
+
if (data === undefined)
|
|
3516
|
+
return;
|
|
3501
3517
|
this._defaultValue = data;
|
|
3502
3518
|
this.init();
|
|
3503
3519
|
}
|
|
@@ -3509,6 +3525,7 @@ class CoreSelectSearchComponent {
|
|
|
3509
3525
|
this.isOpenMenu = false;
|
|
3510
3526
|
this._items = [];
|
|
3511
3527
|
this.keys = [];
|
|
3528
|
+
this.searchText = undefined;
|
|
3512
3529
|
this.currentItemIndex = 0;
|
|
3513
3530
|
this.randomId = 0;
|
|
3514
3531
|
this.size = 'small';
|
|
@@ -3531,6 +3548,13 @@ class CoreSelectSearchComponent {
|
|
|
3531
3548
|
this.itemSelect(this.newItems.find((item) => item.value == this._defaultValue), false);
|
|
3532
3549
|
this.onChangeText();
|
|
3533
3550
|
}
|
|
3551
|
+
onClearInputClicked() {
|
|
3552
|
+
this.selectedItem = {};
|
|
3553
|
+
this.inputFormControl.setValue(this.selectedItem.title);
|
|
3554
|
+
this.searchText = this.selectedItem.title;
|
|
3555
|
+
this.filteredItems.next(this.newItems);
|
|
3556
|
+
this.isOpenMenu = true;
|
|
3557
|
+
}
|
|
3534
3558
|
ngOnInit() {
|
|
3535
3559
|
this.randomId = Math.floor(Math.random() * 10000);
|
|
3536
3560
|
this.keys = this.searchKeys.length > 0 ? this.searchKeys.split(',') : [];
|
|
@@ -3681,11 +3705,11 @@ class CoreSelectSearchComponent {
|
|
|
3681
3705
|
}
|
|
3682
3706
|
}
|
|
3683
3707
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreSelectSearchComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3684
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreSelectSearchComponent, selector: "core-select-search", inputs: { titleKey: "titleKey", valueKey: "valueKey", size: "size", searchKeys: "searchKeys", canAddValueKeyAndTitleKeyInSearchKeys: "canAddValueKeyAndTitleKeyInSearchKeys", canHighlightBackground: "canHighlightBackground", items: "items", defaultValue: "defaultValue", label: "label", disabled: "disabled", inputFormControl: "inputFormControl" }, outputs: { onItemSelected: "onItemSelected" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputSearch"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"dropdown\"\r\n id=\"container\"\r\n (keydown)=\"handleKeyBoard($event)\"\r\n tabindex=\"0\"\r\n (focusin)=\"setInputFocus()\"\r\n (focusout)=\"focusOut($event)\"\r\n>\r\n <div\r\n class=\"select\"\r\n [ngClass]=\"{\r\n 'select-clicked': isOpenMenu,\r\n 'highlight-background':\r\n canHighlightBackground &&\r\n (selectedItem | json) === ({} | json) &&\r\n !(inputFormControl.touched && inputFormControl.errors),\r\n selectError: inputFormControl.touched && inputFormControl.errors,\r\n 'disable-selector': disabled,\r\n }\"\r\n (click)=\"openMenuClick()\"\r\n >\r\n <span class=\"placeholder-top\" *ngIf=\"searchText\">{{ label }}</span>\r\n <arrow-down-icon\r\n class=\"caret fill-secondary-text-color h-6\"\r\n [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n ></arrow-down-icon>\r\n <input\r\n #inputSearch\r\n autocomplete=\"off\"\r\n id=\"inputSearch\"\r\n class=\"input bg-transparent focus:outline-none\"\r\n [(ngModel)]=\"searchText\"\r\n [placeholder]=\"label\"\r\n (keyup)=\"onChangeText($event, true)\"\r\n />\r\n <!-- <span\r\n [ngClass]=\"[\r\n label.length > 0 && (selectedItem | json) == ({} | json)\r\n ? 'placeholder'\r\n : 'selected'\r\n ]\"\r\n >{{\r\n label.length > 0 && (selectedItem | json) == ({} | json)\r\n ? label\r\n : selectedItem.title\r\n }}</span\r\n > -->\r\n </div>\r\n <div\r\n class=\"no-data\"\r\n *ngIf=\"newItems.length === 0\"\r\n [ngClass]=\"{ 'menu-open-no-data': isOpenMenu }\"\r\n >\r\n <warning-icon class=\"icon-color inline-block w-6\"></warning-icon>\r\n <b class=\"content block\">\u0645\u0648\u0631\u062F\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F</b>\r\n </div>\r\n <ul\r\n class=\"menu\"\r\n *ngIf=\"newItems.length > 0\"\r\n [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n >\r\n <li\r\n *ngFor=\"let item of filteredItems | async; let i = index\"\r\n [id]=\"'scroll' + randomId + '-' + i\"\r\n [ngClass]=\"{ active: item.value === focusItem?.value }\"\r\n (click)=\"onItemSelect($event, item, true)\"\r\n >\r\n {{ item.title }}\r\n </li>\r\n </ul>\r\n <div class=\"label-error overflow-hidden\">\r\n <span\r\n *ngIf=\"inputFormControl.touched && inputFormControl.errors?.['required']\"\r\n >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n >\r\n </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .disable-selector{background-color:#f7f7f7!important;border:1px dashed #ced4da!important;cursor:no-drop!important}.dropdown .highlight-background{background-color:#dcf6ff!important}.dropdown .select{background:#fff;color:#304050;display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select:focus{border:2px solid rgba(37,112,198,.473)!important;outline:none}.dropdown .select .selected{padding-inline:12px;font-size:14px;color:#000000b3;max-width:90%;flex:0 0 auto;overflow:hidden;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline:16px;flex:0 0 auto}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .menu-open-no-data{display:flex!important;opacity:1}.dropdown .no-data{display:none;justify-content:center;align-items:center;font-size:small;flex-direction:column;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);transition:0,2s;z-index:10;height:120px;overflow:auto}.dropdown .no-data .icon-color{fill:var(--default-table-warning-icon-color)}.dropdown .no-data .content{color:var(--default-table-warning-color)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;margin-inline:4px;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}.input{flex:1 1 auto;width:100%;min-width:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: WarningIconComponent, selector: "warning-icon" }, { kind: "component", type: ArrowDownIconComponent, selector: "arrow-down-icon" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
|
|
3708
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreSelectSearchComponent, selector: "core-select-search", inputs: { titleKey: "titleKey", valueKey: "valueKey", size: "size", searchKeys: "searchKeys", canAddValueKeyAndTitleKeyInSearchKeys: "canAddValueKeyAndTitleKeyInSearchKeys", canHighlightBackground: "canHighlightBackground", items: "items", defaultValue: "defaultValue", label: "label", disabled: "disabled", inputFormControl: "inputFormControl" }, outputs: { onItemSelected: "onItemSelected" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputSearch"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"dropdown\"\r\n id=\"container\"\r\n (keydown)=\"handleKeyBoard($event)\"\r\n tabindex=\"0\"\r\n (focusin)=\"setInputFocus()\"\r\n (focusout)=\"focusOut($event)\"\r\n>\r\n <div\r\n class=\"select\"\r\n [ngClass]=\"{\r\n 'select-clicked': isOpenMenu,\r\n 'highlight-background':\r\n canHighlightBackground &&\r\n (selectedItem | json) === ({} | json) &&\r\n !(inputFormControl.touched && inputFormControl.errors),\r\n selectError: inputFormControl.touched && inputFormControl.errors,\r\n 'disable-selector': disabled,\r\n }\"\r\n (click)=\"openMenuClick()\"\r\n >\r\n <span class=\"placeholder-top\" *ngIf=\"searchText\">{{ label }}</span>\r\n <arrow-down-icon\r\n *ngIf=\"!searchText\"\r\n class=\"caret fill-secondary-text-color h-6\"\r\n [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n ></arrow-down-icon>\r\n <close-icon\r\n *ngIf=\"searchText\"\r\n class=\"caret fill-secondary-text-color h-5\"\r\n (click)=\"onClearInputClicked(); $event.stopPropagation()\"\r\n ></close-icon>\r\n <input\r\n #inputSearch\r\n autocomplete=\"off\"\r\n id=\"inputSearch\"\r\n class=\"input bg-transparent focus:outline-none\"\r\n [(ngModel)]=\"searchText\"\r\n [placeholder]=\"label\"\r\n (keyup)=\"onChangeText($event, true)\"\r\n />\r\n <!-- <span\r\n [ngClass]=\"[\r\n label.length > 0 && (selectedItem | json) == ({} | json)\r\n ? 'placeholder'\r\n : 'selected'\r\n ]\"\r\n >{{\r\n label.length > 0 && (selectedItem | json) == ({} | json)\r\n ? label\r\n : selectedItem.title\r\n }}</span\r\n > -->\r\n </div>\r\n <div\r\n class=\"no-data\"\r\n *ngIf=\"newItems.length === 0\"\r\n [ngClass]=\"{ 'menu-open-no-data': isOpenMenu }\"\r\n >\r\n <warning-icon class=\"icon-color inline-block w-6\"></warning-icon>\r\n <b class=\"content block\">\u0645\u0648\u0631\u062F\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F</b>\r\n </div>\r\n <ul\r\n class=\"menu\"\r\n *ngIf=\"newItems.length > 0\"\r\n [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n >\r\n <li\r\n *ngFor=\"let item of filteredItems | async; let i = index\"\r\n [id]=\"'scroll' + randomId + '-' + i\"\r\n [ngClass]=\"{ active: item.value === focusItem?.value }\"\r\n (click)=\"onItemSelect($event, item, true)\"\r\n >\r\n {{ item.title }}\r\n </li>\r\n </ul>\r\n <div class=\"label-error overflow-hidden\">\r\n <span\r\n *ngIf=\"inputFormControl.touched && inputFormControl.errors?.['required']\"\r\n >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n >\r\n </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .disable-selector{background-color:#f7f7f7!important;border:1px dashed #ced4da!important;cursor:no-drop!important}.dropdown .highlight-background{background-color:#dcf6ff!important}.dropdown .select{background:#fff;color:#304050;display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select:focus{border:2px solid rgba(37,112,198,.473)!important;outline:none}.dropdown .select .selected{padding-inline:12px;font-size:14px;color:#000000b3;max-width:90%;flex:0 0 auto;overflow:hidden;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline:16px;flex:0 0 auto}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .menu-open-no-data{display:flex!important;opacity:1}.dropdown .no-data{display:none;justify-content:center;align-items:center;font-size:small;flex-direction:column;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);transition:0,2s;z-index:10;height:120px;overflow:auto}.dropdown .no-data .icon-color{fill:var(--default-table-warning-icon-color)}.dropdown .no-data .content{color:var(--default-table-warning-color)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;margin-inline:4px;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}.input{flex:1 1 auto;width:100%;min-width:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CloseIconComponent, selector: "close-icon" }, { kind: "component", type: WarningIconComponent, selector: "warning-icon" }, { kind: "component", type: ArrowDownIconComponent, selector: "arrow-down-icon" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
|
|
3685
3709
|
}
|
|
3686
3710
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreSelectSearchComponent, decorators: [{
|
|
3687
3711
|
type: Component,
|
|
3688
|
-
args: [{ selector: 'core-select-search', template: "<div\r\n class=\"dropdown\"\r\n id=\"container\"\r\n (keydown)=\"handleKeyBoard($event)\"\r\n tabindex=\"0\"\r\n (focusin)=\"setInputFocus()\"\r\n (focusout)=\"focusOut($event)\"\r\n>\r\n <div\r\n class=\"select\"\r\n [ngClass]=\"{\r\n 'select-clicked': isOpenMenu,\r\n 'highlight-background':\r\n canHighlightBackground &&\r\n (selectedItem | json) === ({} | json) &&\r\n !(inputFormControl.touched && inputFormControl.errors),\r\n selectError: inputFormControl.touched && inputFormControl.errors,\r\n 'disable-selector': disabled,\r\n }\"\r\n (click)=\"openMenuClick()\"\r\n >\r\n <span class=\"placeholder-top\" *ngIf=\"searchText\">{{ label }}</span>\r\n <arrow-down-icon\r\n class=\"caret fill-secondary-text-color h-6\"\r\n [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n ></arrow-down-icon>\r\n <input\r\n #inputSearch\r\n autocomplete=\"off\"\r\n id=\"inputSearch\"\r\n class=\"input bg-transparent focus:outline-none\"\r\n [(ngModel)]=\"searchText\"\r\n [placeholder]=\"label\"\r\n (keyup)=\"onChangeText($event, true)\"\r\n />\r\n <!-- <span\r\n [ngClass]=\"[\r\n label.length > 0 && (selectedItem | json) == ({} | json)\r\n ? 'placeholder'\r\n : 'selected'\r\n ]\"\r\n >{{\r\n label.length > 0 && (selectedItem | json) == ({} | json)\r\n ? label\r\n : selectedItem.title\r\n }}</span\r\n > -->\r\n </div>\r\n <div\r\n class=\"no-data\"\r\n *ngIf=\"newItems.length === 0\"\r\n [ngClass]=\"{ 'menu-open-no-data': isOpenMenu }\"\r\n >\r\n <warning-icon class=\"icon-color inline-block w-6\"></warning-icon>\r\n <b class=\"content block\">\u0645\u0648\u0631\u062F\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F</b>\r\n </div>\r\n <ul\r\n class=\"menu\"\r\n *ngIf=\"newItems.length > 0\"\r\n [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n >\r\n <li\r\n *ngFor=\"let item of filteredItems | async; let i = index\"\r\n [id]=\"'scroll' + randomId + '-' + i\"\r\n [ngClass]=\"{ active: item.value === focusItem?.value }\"\r\n (click)=\"onItemSelect($event, item, true)\"\r\n >\r\n {{ item.title }}\r\n </li>\r\n </ul>\r\n <div class=\"label-error overflow-hidden\">\r\n <span\r\n *ngIf=\"inputFormControl.touched && inputFormControl.errors?.['required']\"\r\n >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n >\r\n </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .disable-selector{background-color:#f7f7f7!important;border:1px dashed #ced4da!important;cursor:no-drop!important}.dropdown .highlight-background{background-color:#dcf6ff!important}.dropdown .select{background:#fff;color:#304050;display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select:focus{border:2px solid rgba(37,112,198,.473)!important;outline:none}.dropdown .select .selected{padding-inline:12px;font-size:14px;color:#000000b3;max-width:90%;flex:0 0 auto;overflow:hidden;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline:16px;flex:0 0 auto}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .menu-open-no-data{display:flex!important;opacity:1}.dropdown .no-data{display:none;justify-content:center;align-items:center;font-size:small;flex-direction:column;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);transition:0,2s;z-index:10;height:120px;overflow:auto}.dropdown .no-data .icon-color{fill:var(--default-table-warning-icon-color)}.dropdown .no-data .content{color:var(--default-table-warning-color)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;margin-inline:4px;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}.input{flex:1 1 auto;width:100%;min-width:0}\n"] }]
|
|
3712
|
+
args: [{ selector: 'core-select-search', template: "<div\r\n class=\"dropdown\"\r\n id=\"container\"\r\n (keydown)=\"handleKeyBoard($event)\"\r\n tabindex=\"0\"\r\n (focusin)=\"setInputFocus()\"\r\n (focusout)=\"focusOut($event)\"\r\n>\r\n <div\r\n class=\"select\"\r\n [ngClass]=\"{\r\n 'select-clicked': isOpenMenu,\r\n 'highlight-background':\r\n canHighlightBackground &&\r\n (selectedItem | json) === ({} | json) &&\r\n !(inputFormControl.touched && inputFormControl.errors),\r\n selectError: inputFormControl.touched && inputFormControl.errors,\r\n 'disable-selector': disabled,\r\n }\"\r\n (click)=\"openMenuClick()\"\r\n >\r\n <span class=\"placeholder-top\" *ngIf=\"searchText\">{{ label }}</span>\r\n <arrow-down-icon\r\n *ngIf=\"!searchText\"\r\n class=\"caret fill-secondary-text-color h-6\"\r\n [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n ></arrow-down-icon>\r\n <close-icon\r\n *ngIf=\"searchText\"\r\n class=\"caret fill-secondary-text-color h-5\"\r\n (click)=\"onClearInputClicked(); $event.stopPropagation()\"\r\n ></close-icon>\r\n <input\r\n #inputSearch\r\n autocomplete=\"off\"\r\n id=\"inputSearch\"\r\n class=\"input bg-transparent focus:outline-none\"\r\n [(ngModel)]=\"searchText\"\r\n [placeholder]=\"label\"\r\n (keyup)=\"onChangeText($event, true)\"\r\n />\r\n <!-- <span\r\n [ngClass]=\"[\r\n label.length > 0 && (selectedItem | json) == ({} | json)\r\n ? 'placeholder'\r\n : 'selected'\r\n ]\"\r\n >{{\r\n label.length > 0 && (selectedItem | json) == ({} | json)\r\n ? label\r\n : selectedItem.title\r\n }}</span\r\n > -->\r\n </div>\r\n <div\r\n class=\"no-data\"\r\n *ngIf=\"newItems.length === 0\"\r\n [ngClass]=\"{ 'menu-open-no-data': isOpenMenu }\"\r\n >\r\n <warning-icon class=\"icon-color inline-block w-6\"></warning-icon>\r\n <b class=\"content block\">\u0645\u0648\u0631\u062F\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F</b>\r\n </div>\r\n <ul\r\n class=\"menu\"\r\n *ngIf=\"newItems.length > 0\"\r\n [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n >\r\n <li\r\n *ngFor=\"let item of filteredItems | async; let i = index\"\r\n [id]=\"'scroll' + randomId + '-' + i\"\r\n [ngClass]=\"{ active: item.value === focusItem?.value }\"\r\n (click)=\"onItemSelect($event, item, true)\"\r\n >\r\n {{ item.title }}\r\n </li>\r\n </ul>\r\n <div class=\"label-error overflow-hidden\">\r\n <span\r\n *ngIf=\"inputFormControl.touched && inputFormControl.errors?.['required']\"\r\n >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n >\r\n </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .disable-selector{background-color:#f7f7f7!important;border:1px dashed #ced4da!important;cursor:no-drop!important}.dropdown .highlight-background{background-color:#dcf6ff!important}.dropdown .select{background:#fff;color:#304050;display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select:focus{border:2px solid rgba(37,112,198,.473)!important;outline:none}.dropdown .select .selected{padding-inline:12px;font-size:14px;color:#000000b3;max-width:90%;flex:0 0 auto;overflow:hidden;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline:16px;flex:0 0 auto}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .menu-open-no-data{display:flex!important;opacity:1}.dropdown .no-data{display:none;justify-content:center;align-items:center;font-size:small;flex-direction:column;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);transition:0,2s;z-index:10;height:120px;overflow:auto}.dropdown .no-data .icon-color{fill:var(--default-table-warning-icon-color)}.dropdown .no-data .content{color:var(--default-table-warning-color)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;margin-inline:4px;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}.input{flex:1 1 auto;width:100%;min-width:0}\n"] }]
|
|
3689
3713
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { titleKey: [{
|
|
3690
3714
|
type: Input
|
|
3691
3715
|
}], valueKey: [{
|