@c8y/ngx-components 1022.4.7 → 1022.4.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -10,7 +10,7 @@ export declare class SelectComponent implements AfterContentInit, OnChanges, OnD
|
|
|
10
10
|
/**
|
|
11
11
|
* Placeholder text to be displayed in the select.
|
|
12
12
|
*/
|
|
13
|
-
placeholder:
|
|
13
|
+
placeholder: "Select item…";
|
|
14
14
|
/**
|
|
15
15
|
* Items to be displayed in the select.
|
|
16
16
|
* Can be an array of strings or an array of objects with `label` and `value` properties.
|
|
@@ -78,7 +78,7 @@ export declare class SelectComponent implements AfterContentInit, OnChanges, OnD
|
|
|
78
78
|
*/
|
|
79
79
|
required: boolean;
|
|
80
80
|
/**
|
|
81
|
-
* Allows the user to
|
|
81
|
+
* Allows the user to clear the selection.
|
|
82
82
|
*/
|
|
83
83
|
canDeselect: boolean;
|
|
84
84
|
/**
|
|
@@ -165,7 +165,7 @@ export declare class SelectComponent implements AfterContentInit, OnChanges, OnD
|
|
|
165
165
|
*/
|
|
166
166
|
ngOnDestroy(): void;
|
|
167
167
|
/**
|
|
168
|
-
* Selects an item
|
|
168
|
+
* Selects an item. In the multi mode, it will toggle the selection of the item.
|
|
169
169
|
* @param item The item to select.
|
|
170
170
|
*/
|
|
171
171
|
select(item: SelectableItem): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../core/select/select.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,aAAa,EAKb,YAAY,EAEZ,SAAS,EACT,SAAS,EAET,SAAS,EACT,aAAa,EAId,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,eAAe,EACf,oBAAoB,EAGpB,gBAAgB,EAChB,SAAS,EACV,MAAM,gBAAgB,CAAC;AAIxB,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;;
|
|
1
|
+
{"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../core/select/select.component.ts"],"names":[],"mappings":"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"}
|
|
@@ -18659,7 +18659,7 @@ class SelectComponent {
|
|
|
18659
18659
|
/**
|
|
18660
18660
|
* Placeholder text to be displayed in the select.
|
|
18661
18661
|
*/
|
|
18662
|
-
this.placeholder = 'Select item…';
|
|
18662
|
+
this.placeholder = gettext$1('Select item…');
|
|
18663
18663
|
/**
|
|
18664
18664
|
* The container to put the dropdown to. Defaults to body.
|
|
18665
18665
|
*/
|
|
@@ -18685,7 +18685,7 @@ class SelectComponent {
|
|
|
18685
18685
|
*/
|
|
18686
18686
|
this.required = false;
|
|
18687
18687
|
/**
|
|
18688
|
-
* Allows the user to
|
|
18688
|
+
* Allows the user to clear the selection.
|
|
18689
18689
|
*/
|
|
18690
18690
|
this.canDeselect = false;
|
|
18691
18691
|
/**
|
|
@@ -18782,7 +18782,7 @@ class SelectComponent {
|
|
|
18782
18782
|
this.selectKeyboardService.unregister();
|
|
18783
18783
|
}
|
|
18784
18784
|
/**
|
|
18785
|
-
* Selects an item
|
|
18785
|
+
* Selects an item. In the multi mode, it will toggle the selection of the item.
|
|
18786
18786
|
* @param item The item to select.
|
|
18787
18787
|
*/
|
|
18788
18788
|
select(item) {
|
|
@@ -18930,7 +18930,7 @@ class SelectComponent {
|
|
|
18930
18930
|
multi: true
|
|
18931
18931
|
},
|
|
18932
18932
|
SelectKeyboardService
|
|
18933
|
-
], 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
|
|
18933
|
+
], 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 [disabled]=\"disabled\"\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 data-cy=\"deselect-all-button\"\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 *ngIf=\"!item.template\">\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: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { 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: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
|
|
18934
18934
|
}
|
|
18935
18935
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectComponent, decorators: [{
|
|
18936
18936
|
type: Component,
|
|
@@ -18959,7 +18959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
18959
18959
|
ListItemCheckboxComponent,
|
|
18960
18960
|
ListItemBodyComponent,
|
|
18961
18961
|
C8yTranslatePipe
|
|
18962
|
-
], 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
|
|
18962
|
+
], 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 [disabled]=\"disabled\"\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 data-cy=\"deselect-all-button\"\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 *ngIf=\"!item.template\">\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" }]
|
|
18963
18963
|
}], ctorParameters: () => [{ type: SelectKeyboardService }], propDecorators: { placeholder: [{
|
|
18964
18964
|
type: Input
|
|
18965
18965
|
}], items: [{
|