@c8y/ngx-components 1021.22.36 → 1021.22.38
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/core/select/select-keyboard.service.d.ts +4 -0
- package/core/select/select-keyboard.service.d.ts.map +1 -1
- package/core/select/select.component.d.ts +14 -3
- package/core/select/select.component.d.ts.map +1 -1
- package/esm2022/core/select/select-keyboard.service.mjs +7 -3
- package/esm2022/core/select/select.component.mjs +36 -8
- package/fesm2022/c8y-ngx-components.mjs +41 -9
- package/fesm2022/c8y-ngx-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -19037,7 +19037,11 @@ class SelectKeyboardService {
|
|
|
19037
19037
|
/**
|
|
19038
19038
|
* Search on key event.
|
|
19039
19039
|
*/
|
|
19040
|
-
keyboardSearch: false
|
|
19040
|
+
keyboardSearch: false,
|
|
19041
|
+
/**
|
|
19042
|
+
* Space key event is used to select.
|
|
19043
|
+
*/
|
|
19044
|
+
spaceSelect: false
|
|
19041
19045
|
};
|
|
19042
19046
|
}
|
|
19043
19047
|
/**
|
|
@@ -19077,7 +19081,7 @@ class SelectKeyboardService {
|
|
|
19077
19081
|
this.KEYCODE_DOWN,
|
|
19078
19082
|
this.KEYCODE_TAB,
|
|
19079
19083
|
this.KEYCODE_UP,
|
|
19080
|
-
this.KEYCODE_SPACE
|
|
19084
|
+
...(this.options.spaceSelect ? [this.KEYCODE_SPACE] : [])
|
|
19081
19085
|
].includes(event.code);
|
|
19082
19086
|
}
|
|
19083
19087
|
handleKeyboard(event, input, items, dropdown) {
|
|
@@ -20571,6 +20575,10 @@ class SelectComponent {
|
|
|
20571
20575
|
* If set to true, the user can select multiple items.
|
|
20572
20576
|
*/
|
|
20573
20577
|
this.multi = false;
|
|
20578
|
+
/**
|
|
20579
|
+
* If enabled, an item can be selected with the space key.
|
|
20580
|
+
*/
|
|
20581
|
+
this.canSelectWithSpace = !this.multi;
|
|
20574
20582
|
/**
|
|
20575
20583
|
* If set to true, the select is disabled.
|
|
20576
20584
|
*/
|
|
@@ -20624,7 +20632,8 @@ class SelectComponent {
|
|
|
20624
20632
|
this.destroy$ = new Subject();
|
|
20625
20633
|
this.selectKeyboardService.options = {
|
|
20626
20634
|
emptyInput: true,
|
|
20627
|
-
keyboardSearch: true
|
|
20635
|
+
keyboardSearch: true,
|
|
20636
|
+
spaceSelect: this.canSelectWithSpace
|
|
20628
20637
|
};
|
|
20629
20638
|
}
|
|
20630
20639
|
/**
|
|
@@ -20644,6 +20653,9 @@ class SelectComponent {
|
|
|
20644
20653
|
this.insideClick = this.multi;
|
|
20645
20654
|
}
|
|
20646
20655
|
}
|
|
20656
|
+
/**
|
|
20657
|
+
* @ignore
|
|
20658
|
+
*/
|
|
20647
20659
|
ngAfterViewInit() {
|
|
20648
20660
|
this.selectKeyboardService
|
|
20649
20661
|
.register$(this.searchControl.nativeElement, this.list, this.dropdown)
|
|
@@ -20656,6 +20668,18 @@ class SelectComponent {
|
|
|
20656
20668
|
}
|
|
20657
20669
|
});
|
|
20658
20670
|
}
|
|
20671
|
+
/**
|
|
20672
|
+
* @ignore
|
|
20673
|
+
*/
|
|
20674
|
+
ngOnChanges(changes) {
|
|
20675
|
+
if (changes.canSelectWithSpace) {
|
|
20676
|
+
this.selectKeyboardService.options = {
|
|
20677
|
+
emptyInput: true,
|
|
20678
|
+
keyboardSearch: true,
|
|
20679
|
+
spaceSelect: changes.canSelectWithSpace.currentValue
|
|
20680
|
+
};
|
|
20681
|
+
}
|
|
20682
|
+
}
|
|
20659
20683
|
/**
|
|
20660
20684
|
* @ignore
|
|
20661
20685
|
*/
|
|
@@ -20669,15 +20693,21 @@ class SelectComponent {
|
|
|
20669
20693
|
* @param item The item to select.
|
|
20670
20694
|
*/
|
|
20671
20695
|
select(item) {
|
|
20672
|
-
this.onSelect.emit(item);
|
|
20673
20696
|
if (this.multi) {
|
|
20674
|
-
this._selected.indexOf(item) > -1
|
|
20697
|
+
const isSelected = this._selected.indexOf(item) > -1;
|
|
20698
|
+
if (isSelected) {
|
|
20699
|
+
this.deselect(item);
|
|
20700
|
+
return;
|
|
20701
|
+
}
|
|
20702
|
+
this._selected.push(item);
|
|
20675
20703
|
this.emitChangeEvent();
|
|
20704
|
+
this.onSelect.emit(item);
|
|
20676
20705
|
return;
|
|
20677
20706
|
}
|
|
20678
20707
|
this._selected = [item];
|
|
20679
20708
|
this._preselectedItem = item;
|
|
20680
20709
|
this.emitChangeEvent();
|
|
20710
|
+
this.onSelect.emit(item);
|
|
20681
20711
|
}
|
|
20682
20712
|
/**
|
|
20683
20713
|
* Deselects an item.
|
|
@@ -20687,8 +20717,8 @@ class SelectComponent {
|
|
|
20687
20717
|
const index = this._selected.indexOf(item);
|
|
20688
20718
|
if (index > -1) {
|
|
20689
20719
|
this._selected.splice(index, 1);
|
|
20690
|
-
this.onDeselect.emit(item);
|
|
20691
20720
|
this.emitChangeEvent();
|
|
20721
|
+
this.onDeselect.emit(item);
|
|
20692
20722
|
this._preselectedItem = null;
|
|
20693
20723
|
}
|
|
20694
20724
|
}
|
|
@@ -20795,7 +20825,7 @@ class SelectComponent {
|
|
|
20795
20825
|
}
|
|
20796
20826
|
}
|
|
20797
20827
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectComponent, deps: [{ token: SelectKeyboardService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20798
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SelectComponent, selector: "c8y-select", inputs: { placeholder: "placeholder", items: "items", selected: "selected", container: "container", multi: "multi", disabled: "disabled", autoClose: "autoClose", insideClick: "insideClick", required: "required", canDeselect: "canDeselect", name: "name", icon: "icon" }, outputs: { onSelect: "onSelect", onDeselect: "onDeselect", onIconClick: "onIconClick" }, host: { classAttribute: "c8y-select-v2" }, providers: [
|
|
20828
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SelectComponent, selector: "c8y-select", inputs: { placeholder: "placeholder", items: "items", selected: "selected", container: "container", multi: "multi", canSelectWithSpace: "canSelectWithSpace", disabled: "disabled", autoClose: "autoClose", insideClick: "insideClick", required: "required", canDeselect: "canDeselect", name: "name", icon: "icon" }, outputs: { onSelect: "onSelect", onDeselect: "onDeselect", onIconClick: "onIconClick" }, host: { classAttribute: "c8y-select-v2" }, providers: [
|
|
20799
20829
|
{
|
|
20800
20830
|
provide: NG_VALUE_ACCESSOR,
|
|
20801
20831
|
multi: true,
|
|
@@ -20807,7 +20837,7 @@ class SelectComponent {
|
|
|
20807
20837
|
multi: true
|
|
20808
20838
|
},
|
|
20809
20839
|
SelectKeyboardService
|
|
20810
|
-
], queries: [{ propertyName: "projectedSelectedItems", first: true, predicate: SelectedItemsDirective, descendants: true }, { propertyName: "projectedSelectableItems", predicate: SelectItemDirective }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "list", predicate: ListItemComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"c8y-search-dropdown dropdown fit-w\"\n placement=\"bottom left\"\n dropdown\n [container]=\"container\"\n #dropdown=\"bs-dropdown\"\n [autoClose]=\"autoClose\"\n [isDisabled]=\"disabled\"\n [insideClick]=\"insideClick\"\n (onShown)=\"onShown()\"\n (onHidden)=\"onHidden()\"\n dropdownToggle\n (click)=\"open()\"\n>\n <div\n class=\"input-group input-group-dropdown\"\n role=\"button\"\n >\n <div\n class=\"form-control text-truncate\"\n *ngIf=\"true\"\n [ngClass]=\"{\n 'm-r-80': canDeselect && selected.length > 0,\n 'm-r-40': !canDeselect || selected.length === 0,\n 'text-truncate': !multi,\n 'inner-scroll d-flex a-i-center': multi\n }\"\n >\n <!-- rendering of selected items (with content projection) -->\n <div\n class=\"selected-items\"\n *ngIf=\"projectedSelectedItems\"\n >\n <ng-container *ngFor=\"let selectedItem of selected\">\n <ng-container\n *ngTemplateOutlet=\"\n projectedSelectedItems.templateRef;\n context: { $implicit: selectedItem }\n \"\n ></ng-container>\n </ng-container>\n <i\n class=\"text-muted\"\n *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n >\n {{ placeholder | translate }}\n </i>\n </div>\n\n <!-- rendering of selected items (default) -->\n <div\n class=\"selected-items\"\n *ngIf=\"!projectedSelectedItems\"\n >\n <span *ngIf=\"!multi\">\n <span *ngIf=\"searchHasFocus && preselectedItem\">\n {{ preselectedItem.label | translate }}\n </span>\n <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n {{ selected[0].label | translate }}\n </span>\n </span>\n <i\n class=\"text-muted\"\n *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n >\n {{ placeholder | translate }}\n </i>\n <ng-container *ngIf=\"multi\">\n <span class=\"m-r-4\">{{ searchControl.value }}</span>\n <span\n class=\"tag tag--info chip\"\n *ngFor=\"let selectedItem of selected\"\n >\n <button\n class=\"btn btn-xs btn-clean text-10 m-r-4\"\n title=\"{{ selectedItem.label | translate }}\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n {{ selectedItem.label | translate }}\n </span>\n </ng-container>\n </div>\n </div>\n \n <input\n class=\"form-control text-truncate\"\n type=\"text\"\n autocomplete=\"off\"\n #searchControl\n [ngClass]=\"{\n 'p-absolute': true,\n 'm-r-80': canDeselect && selected.length > 0,\n 'm-r-40': !canDeselect || selected.length === 0\n }\"\n [required]=\"required\"\n (blur)=\"doBlur()\"\n (focus)=\"doFocus()\"\n [name]=\"name\"\n [disabled]=\"disabled\"\n />\n\n <span class=\"input-group-btn\">\n <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n <button\n class=\"btn btn-dot\"\n title=\"{{ 'Deselect' | translate }}\"\n type=\"button\"\n *ngIf=\"canDeselect && selected.length > 0\"\n [disabled]=\"disabled\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n <button\n class=\"btn btn-dot\"\n title=\"{{ 'Search' | translate }}\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"onIconClick.emit({ icon, $event })\"\n data-cy=\"select-button\"\n >\n <i\n class=\"text-primary\"\n [c8yIcon]=\"icon\"\n ></i>\n </button>\n </span>\n </div>\n\n <c8y-list-group\n class=\"dropdown-menu dropdown-menu--modal\"\n [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n role=\"menu\"\n data-cy=\"select--dropdown-menu\"\n *dropdownMenu\n >\n <!-- rendering of items (default) -->\n <c8y-li\n style=\"cursor: pointer\"\n *ngFor=\"let item of items\"\n [selectable]=\"true\"\n [dense]=\"true\"\n [active]=\"!multi && item.value === selected[0]?.value\"\n (click)=\"select(item)\"\n >\n <span [attr.data-search-label]=\"item.label | translate\"></span>\n <c8y-li-checkbox\n *ngIf=\"multi\"\n [selected]=\"selected.indexOf(item) > -1\"\n (click)=\"$event.preventDefault()
|
|
20840
|
+
], queries: [{ propertyName: "projectedSelectedItems", first: true, predicate: SelectedItemsDirective, descendants: true }, { propertyName: "projectedSelectableItems", predicate: SelectItemDirective }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "list", predicate: ListItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"c8y-search-dropdown dropdown fit-w\"\n placement=\"bottom left\"\n dropdown\n [container]=\"container\"\n #dropdown=\"bs-dropdown\"\n [autoClose]=\"autoClose\"\n [isDisabled]=\"disabled\"\n [insideClick]=\"insideClick\"\n (onShown)=\"onShown()\"\n (onHidden)=\"onHidden()\"\n dropdownToggle\n (click)=\"open()\"\n>\n <div\n class=\"input-group input-group-dropdown\"\n role=\"button\"\n >\n <div\n class=\"form-control text-truncate\"\n *ngIf=\"true\"\n [ngClass]=\"{\n 'm-r-80': canDeselect && selected.length > 0,\n 'm-r-40': !canDeselect || selected.length === 0,\n 'text-truncate': !multi,\n 'inner-scroll d-flex a-i-center': multi\n }\"\n >\n <!-- rendering of selected items (with content projection) -->\n <div\n class=\"selected-items\"\n *ngIf=\"projectedSelectedItems\"\n >\n <ng-container *ngFor=\"let selectedItem of selected\">\n <ng-container\n *ngTemplateOutlet=\"\n projectedSelectedItems.templateRef;\n context: { $implicit: selectedItem }\n \"\n ></ng-container>\n </ng-container>\n <i\n class=\"text-muted\"\n *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n >\n {{ placeholder | translate }}\n </i>\n </div>\n\n <!-- rendering of selected items (default) -->\n <div\n class=\"selected-items\"\n *ngIf=\"!projectedSelectedItems\"\n >\n <span *ngIf=\"!multi\">\n <span *ngIf=\"searchHasFocus && preselectedItem\">\n {{ preselectedItem.label | translate }}\n </span>\n <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n {{ selected[0].label | translate }}\n </span>\n </span>\n <i\n class=\"text-muted\"\n *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n >\n {{ placeholder | translate }}\n </i>\n <ng-container *ngIf=\"multi\">\n <span class=\"m-r-4\">{{ searchControl.value }}</span>\n <span\n class=\"tag tag--info chip\"\n *ngFor=\"let selectedItem of selected\"\n >\n <button\n class=\"btn btn-xs btn-clean text-10 m-r-4\"\n title=\"{{ selectedItem.label | translate }}\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n {{ selectedItem.label | translate }}\n </span>\n </ng-container>\n </div>\n </div>\n \n <input\n class=\"form-control text-truncate\"\n type=\"text\"\n autocomplete=\"off\"\n #searchControl\n [ngClass]=\"{\n 'p-absolute': true,\n 'm-r-80': canDeselect && selected.length > 0,\n 'm-r-40': !canDeselect || selected.length === 0\n }\"\n [required]=\"required\"\n (blur)=\"doBlur()\"\n (focus)=\"doFocus()\"\n [name]=\"name\"\n [disabled]=\"disabled\"\n />\n\n <span class=\"input-group-btn\">\n <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n <button\n class=\"btn btn-dot\"\n title=\"{{ 'Deselect' | translate }}\"\n type=\"button\"\n *ngIf=\"canDeselect && selected.length > 0\"\n [disabled]=\"disabled\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n <button\n class=\"btn btn-dot\"\n title=\"{{ 'Search' | translate }}\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"onIconClick.emit({ icon, $event })\"\n data-cy=\"select-button\"\n >\n <i\n class=\"text-primary\"\n [c8yIcon]=\"icon\"\n ></i>\n </button>\n </span>\n </div>\n\n <c8y-list-group\n class=\"dropdown-menu dropdown-menu--modal\"\n [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n role=\"menu\"\n data-cy=\"select--dropdown-menu\"\n *dropdownMenu\n >\n <!-- rendering of items (default) -->\n <c8y-li\n style=\"cursor: pointer\"\n *ngFor=\"let item of items\"\n [selectable]=\"true\"\n [dense]=\"true\"\n [active]=\"!multi && item.value === selected[0]?.value\"\n (click)=\"select(item)\"\n >\n <span [attr.data-search-label]=\"item.label | translate\"></span>\n <c8y-li-checkbox\n *ngIf=\"multi\"\n [selected]=\"selected.indexOf(item) > -1\"\n (click)=\"$event.preventDefault();\"\n ></c8y-li-checkbox>\n <c8y-li-body\n *ngIf=\"!item.template\"\n >\n {{ item.label | translate }}\n </c8y-li-body>\n <ng-container\n *ngTemplateOutlet=\"item?.template\"\n ngProjectAs=\"c8y-li-body\"\n ></ng-container>\n </c8y-li>\n <ng-content select=\"div\"></ng-content>\n </c8y-list-group>\n</div>\n", dependencies: [{ kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
|
|
20811
20841
|
}
|
|
20812
20842
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectComponent, decorators: [{
|
|
20813
20843
|
type: Component,
|
|
@@ -20823,7 +20853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
20823
20853
|
multi: true
|
|
20824
20854
|
},
|
|
20825
20855
|
SelectKeyboardService
|
|
20826
|
-
], template: "<div\n class=\"c8y-search-dropdown dropdown fit-w\"\n placement=\"bottom left\"\n dropdown\n [container]=\"container\"\n #dropdown=\"bs-dropdown\"\n [autoClose]=\"autoClose\"\n [isDisabled]=\"disabled\"\n [insideClick]=\"insideClick\"\n (onShown)=\"onShown()\"\n (onHidden)=\"onHidden()\"\n dropdownToggle\n (click)=\"open()\"\n>\n <div\n class=\"input-group input-group-dropdown\"\n role=\"button\"\n >\n <div\n class=\"form-control text-truncate\"\n *ngIf=\"true\"\n [ngClass]=\"{\n 'm-r-80': canDeselect && selected.length > 0,\n 'm-r-40': !canDeselect || selected.length === 0,\n 'text-truncate': !multi,\n 'inner-scroll d-flex a-i-center': multi\n }\"\n >\n <!-- rendering of selected items (with content projection) -->\n <div\n class=\"selected-items\"\n *ngIf=\"projectedSelectedItems\"\n >\n <ng-container *ngFor=\"let selectedItem of selected\">\n <ng-container\n *ngTemplateOutlet=\"\n projectedSelectedItems.templateRef;\n context: { $implicit: selectedItem }\n \"\n ></ng-container>\n </ng-container>\n <i\n class=\"text-muted\"\n *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n >\n {{ placeholder | translate }}\n </i>\n </div>\n\n <!-- rendering of selected items (default) -->\n <div\n class=\"selected-items\"\n *ngIf=\"!projectedSelectedItems\"\n >\n <span *ngIf=\"!multi\">\n <span *ngIf=\"searchHasFocus && preselectedItem\">\n {{ preselectedItem.label | translate }}\n </span>\n <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n {{ selected[0].label | translate }}\n </span>\n </span>\n <i\n class=\"text-muted\"\n *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n >\n {{ placeholder | translate }}\n </i>\n <ng-container *ngIf=\"multi\">\n <span class=\"m-r-4\">{{ searchControl.value }}</span>\n <span\n class=\"tag tag--info chip\"\n *ngFor=\"let selectedItem of selected\"\n >\n <button\n class=\"btn btn-xs btn-clean text-10 m-r-4\"\n title=\"{{ selectedItem.label | translate }}\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n {{ selectedItem.label | translate }}\n </span>\n </ng-container>\n </div>\n </div>\n \n <input\n class=\"form-control text-truncate\"\n type=\"text\"\n autocomplete=\"off\"\n #searchControl\n [ngClass]=\"{\n 'p-absolute': true,\n 'm-r-80': canDeselect && selected.length > 0,\n 'm-r-40': !canDeselect || selected.length === 0\n }\"\n [required]=\"required\"\n (blur)=\"doBlur()\"\n (focus)=\"doFocus()\"\n [name]=\"name\"\n [disabled]=\"disabled\"\n />\n\n <span class=\"input-group-btn\">\n <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n <button\n class=\"btn btn-dot\"\n title=\"{{ 'Deselect' | translate }}\"\n type=\"button\"\n *ngIf=\"canDeselect && selected.length > 0\"\n [disabled]=\"disabled\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n <button\n class=\"btn btn-dot\"\n title=\"{{ 'Search' | translate }}\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"onIconClick.emit({ icon, $event })\"\n data-cy=\"select-button\"\n >\n <i\n class=\"text-primary\"\n [c8yIcon]=\"icon\"\n ></i>\n </button>\n </span>\n </div>\n\n <c8y-list-group\n class=\"dropdown-menu dropdown-menu--modal\"\n [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n role=\"menu\"\n data-cy=\"select--dropdown-menu\"\n *dropdownMenu\n >\n <!-- rendering of items (default) -->\n <c8y-li\n style=\"cursor: pointer\"\n *ngFor=\"let item of items\"\n [selectable]=\"true\"\n [dense]=\"true\"\n [active]=\"!multi && item.value === selected[0]?.value\"\n (click)=\"select(item)\"\n >\n <span [attr.data-search-label]=\"item.label | translate\"></span>\n <c8y-li-checkbox\n *ngIf=\"multi\"\n [selected]=\"selected.indexOf(item) > -1\"\n (click)=\"$event.preventDefault()
|
|
20856
|
+
], template: "<div\n class=\"c8y-search-dropdown dropdown fit-w\"\n placement=\"bottom left\"\n dropdown\n [container]=\"container\"\n #dropdown=\"bs-dropdown\"\n [autoClose]=\"autoClose\"\n [isDisabled]=\"disabled\"\n [insideClick]=\"insideClick\"\n (onShown)=\"onShown()\"\n (onHidden)=\"onHidden()\"\n dropdownToggle\n (click)=\"open()\"\n>\n <div\n class=\"input-group input-group-dropdown\"\n role=\"button\"\n >\n <div\n class=\"form-control text-truncate\"\n *ngIf=\"true\"\n [ngClass]=\"{\n 'm-r-80': canDeselect && selected.length > 0,\n 'm-r-40': !canDeselect || selected.length === 0,\n 'text-truncate': !multi,\n 'inner-scroll d-flex a-i-center': multi\n }\"\n >\n <!-- rendering of selected items (with content projection) -->\n <div\n class=\"selected-items\"\n *ngIf=\"projectedSelectedItems\"\n >\n <ng-container *ngFor=\"let selectedItem of selected\">\n <ng-container\n *ngTemplateOutlet=\"\n projectedSelectedItems.templateRef;\n context: { $implicit: selectedItem }\n \"\n ></ng-container>\n </ng-container>\n <i\n class=\"text-muted\"\n *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n >\n {{ placeholder | translate }}\n </i>\n </div>\n\n <!-- rendering of selected items (default) -->\n <div\n class=\"selected-items\"\n *ngIf=\"!projectedSelectedItems\"\n >\n <span *ngIf=\"!multi\">\n <span *ngIf=\"searchHasFocus && preselectedItem\">\n {{ preselectedItem.label | translate }}\n </span>\n <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n {{ selected[0].label | translate }}\n </span>\n </span>\n <i\n class=\"text-muted\"\n *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n >\n {{ placeholder | translate }}\n </i>\n <ng-container *ngIf=\"multi\">\n <span class=\"m-r-4\">{{ searchControl.value }}</span>\n <span\n class=\"tag tag--info chip\"\n *ngFor=\"let selectedItem of selected\"\n >\n <button\n class=\"btn btn-xs btn-clean text-10 m-r-4\"\n title=\"{{ selectedItem.label | translate }}\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n {{ selectedItem.label | translate }}\n </span>\n </ng-container>\n </div>\n </div>\n \n <input\n class=\"form-control text-truncate\"\n type=\"text\"\n autocomplete=\"off\"\n #searchControl\n [ngClass]=\"{\n 'p-absolute': true,\n 'm-r-80': canDeselect && selected.length > 0,\n 'm-r-40': !canDeselect || selected.length === 0\n }\"\n [required]=\"required\"\n (blur)=\"doBlur()\"\n (focus)=\"doFocus()\"\n [name]=\"name\"\n [disabled]=\"disabled\"\n />\n\n <span class=\"input-group-btn\">\n <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n <button\n class=\"btn btn-dot\"\n title=\"{{ 'Deselect' | translate }}\"\n type=\"button\"\n *ngIf=\"canDeselect && selected.length > 0\"\n [disabled]=\"disabled\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n <button\n class=\"btn btn-dot\"\n title=\"{{ 'Search' | translate }}\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"onIconClick.emit({ icon, $event })\"\n data-cy=\"select-button\"\n >\n <i\n class=\"text-primary\"\n [c8yIcon]=\"icon\"\n ></i>\n </button>\n </span>\n </div>\n\n <c8y-list-group\n class=\"dropdown-menu dropdown-menu--modal\"\n [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n role=\"menu\"\n data-cy=\"select--dropdown-menu\"\n *dropdownMenu\n >\n <!-- rendering of items (default) -->\n <c8y-li\n style=\"cursor: pointer\"\n *ngFor=\"let item of items\"\n [selectable]=\"true\"\n [dense]=\"true\"\n [active]=\"!multi && item.value === selected[0]?.value\"\n (click)=\"select(item)\"\n >\n <span [attr.data-search-label]=\"item.label | translate\"></span>\n <c8y-li-checkbox\n *ngIf=\"multi\"\n [selected]=\"selected.indexOf(item) > -1\"\n (click)=\"$event.preventDefault();\"\n ></c8y-li-checkbox>\n <c8y-li-body\n *ngIf=\"!item.template\"\n >\n {{ item.label | translate }}\n </c8y-li-body>\n <ng-container\n *ngTemplateOutlet=\"item?.template\"\n ngProjectAs=\"c8y-li-body\"\n ></ng-container>\n </c8y-li>\n <ng-content select=\"div\"></ng-content>\n </c8y-list-group>\n</div>\n" }]
|
|
20827
20857
|
}], ctorParameters: () => [{ type: SelectKeyboardService }], propDecorators: { placeholder: [{
|
|
20828
20858
|
type: Input
|
|
20829
20859
|
}], items: [{
|
|
@@ -20834,6 +20864,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
20834
20864
|
type: Input
|
|
20835
20865
|
}], multi: [{
|
|
20836
20866
|
type: Input
|
|
20867
|
+
}], canSelectWithSpace: [{
|
|
20868
|
+
type: Input
|
|
20837
20869
|
}], disabled: [{
|
|
20838
20870
|
type: Input
|
|
20839
20871
|
}], autoClose: [{
|