@c8y/ngx-components 1023.78.4 → 1023.78.7
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/device-profile/index.d.ts +0 -1
- package/device-profile/index.d.ts.map +1 -1
- package/fesm2022/c8y-ngx-components-device-profile.mjs +1 -16
- package/fesm2022/c8y-ngx-components-device-profile.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components.mjs +29 -5
- package/fesm2022/c8y-ngx-components.mjs.map +1 -1
- package/index.d.ts +10 -2
- package/index.d.ts.map +1 -1
- package/locales/de.po +6 -0
- package/locales/es.po +6 -0
- package/locales/fr.po +6 -0
- package/locales/ja_JP.po +6 -0
- package/locales/ko.po +6 -0
- package/locales/nl.po +6 -0
- package/locales/pl.po +6 -0
- package/locales/pt_BR.po +6 -0
- package/locales/zh_CN.po +6 -0
- package/locales/zh_TW.po +6 -0
- package/package.json +1 -1
|
@@ -20220,8 +20220,9 @@ class SelectComponent {
|
|
|
20220
20220
|
* @ignore
|
|
20221
20221
|
* @param selectKeyboardService The service to handle keyboard navigation.
|
|
20222
20222
|
*/
|
|
20223
|
-
constructor(selectKeyboardService) {
|
|
20223
|
+
constructor(selectKeyboardService, translateService) {
|
|
20224
20224
|
this.selectKeyboardService = selectKeyboardService;
|
|
20225
|
+
this.translateService = translateService;
|
|
20225
20226
|
/**
|
|
20226
20227
|
* Placeholder text to be displayed in the select.
|
|
20227
20228
|
*/
|
|
@@ -20301,6 +20302,12 @@ class SelectComponent {
|
|
|
20301
20302
|
noMatchHighlightFirst: this.filterItems
|
|
20302
20303
|
};
|
|
20303
20304
|
}
|
|
20305
|
+
/**
|
|
20306
|
+
* @ignore
|
|
20307
|
+
*/
|
|
20308
|
+
ngOnInit() {
|
|
20309
|
+
this.updateDisplayPlaceholder();
|
|
20310
|
+
}
|
|
20304
20311
|
/**
|
|
20305
20312
|
* @ignore
|
|
20306
20313
|
*/
|
|
@@ -20345,6 +20352,9 @@ class SelectComponent {
|
|
|
20345
20352
|
noMatchHighlightFirst: changes.filterItems?.currentValue || this.filterItems
|
|
20346
20353
|
};
|
|
20347
20354
|
}
|
|
20355
|
+
if (changes.placeholder || changes.required) {
|
|
20356
|
+
this.updateDisplayPlaceholder();
|
|
20357
|
+
}
|
|
20348
20358
|
}
|
|
20349
20359
|
/**
|
|
20350
20360
|
* @ignore
|
|
@@ -20493,7 +20503,21 @@ class SelectComponent {
|
|
|
20493
20503
|
this.onChange(this.multi ? this._selected : this._selected[0]);
|
|
20494
20504
|
}
|
|
20495
20505
|
}
|
|
20496
|
-
|
|
20506
|
+
/** Computes translated placeholder, appending a "(required)" hint when required. */
|
|
20507
|
+
updateDisplayPlaceholder() {
|
|
20508
|
+
const translatedPlaceholder = this.placeholder
|
|
20509
|
+
? this.translateService.instant(this.placeholder)
|
|
20510
|
+
: this.placeholder;
|
|
20511
|
+
if (!this.required) {
|
|
20512
|
+
this.displayPlaceholder = translatedPlaceholder;
|
|
20513
|
+
return;
|
|
20514
|
+
}
|
|
20515
|
+
const requiredText = `(${this.translateService.instant(gettext$1('required'))})`;
|
|
20516
|
+
this.displayPlaceholder = translatedPlaceholder?.trim()
|
|
20517
|
+
? `${translatedPlaceholder} ${requiredText}`
|
|
20518
|
+
: requiredText;
|
|
20519
|
+
}
|
|
20520
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SelectComponent, deps: [{ token: SelectKeyboardService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20497
20521
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: SelectComponent, isStandalone: true, 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", filterItems: "filterItems" }, outputs: { onSelect: "onSelect", onDeselect: "onDeselect", onIconClick: "onIconClick" }, host: { classAttribute: "c8y-select-v2" }, providers: [
|
|
20498
20522
|
{
|
|
20499
20523
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -20506,7 +20530,7 @@ class SelectComponent {
|
|
|
20506
20530
|
multi: true
|
|
20507
20531
|
},
|
|
20508
20532
|
SelectKeyboardService
|
|
20509
|
-
], 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 [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 @if (projectedSelectedItems) {\n <div class=\"selected-items\">\n @for (selectedItem of selected; track selectedItem) {\n <ng-container\n *ngTemplateOutlet=\"\n projectedSelectedItems.templateRef;\n context: { $implicit: selectedItem }\n \"\n ></ng-container>\n }\n </div>\n @if (selected.length === 0 && !searchHasFocus && searchControl.value.length === 0) {\n <i class=\"text-muted\">\n {{
|
|
20533
|
+
], 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 [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 @if (projectedSelectedItems) {\n <div class=\"selected-items\">\n @for (selectedItem of selected; track selectedItem) {\n <ng-container\n *ngTemplateOutlet=\"\n projectedSelectedItems.templateRef;\n context: { $implicit: selectedItem }\n \"\n ></ng-container>\n }\n </div>\n @if (selected.length === 0 && !searchHasFocus && searchControl.value.length === 0) {\n <i class=\"text-muted\">\n {{ displayPlaceholder }}\n </i>\n }\n } @else {\n <div class=\"selected-items\">\n @if (!multi) {\n <!-- hidden is needed, otherwise the propagation does not work correctly -->\n <span [hidden]=\"!searchHasFocus || !preselectedItem || filterItems\">\n {{ preselectedItem?.label | translate }}\n </span>\n <span [hidden]=\"searchHasFocus || selected.length !== 1\">\n {{ selected[0]?.label | translate }}\n </span>\n }\n @if (selected.length === 0 && !preselectedItem && searchControl.value.length === 0) {\n <i class=\"text-muted\">\n {{ displayPlaceholder }}\n </i>\n }\n @if (multi) {\n <span class=\"m-r-4\">{{ searchControl.value }}</span>\n @for (selectedItem of selected; track selectedItem) {\n <span class=\"tag tag--info chip\">\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)=\"\n $event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\n \"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n {{ selectedItem.label | translate }}\n </span>\n }\n }\n </div>\n }\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 @if (canDeselect && selected.length > 0) {\n <button\n class=\"btn btn-dot\"\n title=\"{{ 'Deselect' | translate }}\"\n type=\"button\"\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 }\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 dropdown-menu--select\"\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 @for (item of filterItems ? (items | filterBy: searchControl.value) : items; track item) {\n <c8y-li\n style=\"cursor: pointer\"\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 @if (multi) {\n <c8y-li-checkbox\n [selected]=\"selected.indexOf(item) > -1\"\n (click)=\"$event.preventDefault()\"\n ></c8y-li-checkbox>\n }\n @if (!item.template) {\n <c8y-li-body>\n {{ item.label | translate }}\n </c8y-li-body>\n }\n <ng-container\n *ngTemplateOutlet=\"item?.template\"\n ngProjectAs=\"c8y-li-body\"\n ></ng-container>\n </c8y-li>\n }\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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" }, { kind: "pipe", type: FilterByPipe, name: "filterBy" }] }); }
|
|
20510
20534
|
}
|
|
20511
20535
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SelectComponent, decorators: [{
|
|
20512
20536
|
type: Component,
|
|
@@ -20534,8 +20558,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
20534
20558
|
ListItemBodyComponent,
|
|
20535
20559
|
C8yTranslatePipe,
|
|
20536
20560
|
FilterByPipe
|
|
20537
|
-
], 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 [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 @if (projectedSelectedItems) {\n <div class=\"selected-items\">\n @for (selectedItem of selected; track selectedItem) {\n <ng-container\n *ngTemplateOutlet=\"\n projectedSelectedItems.templateRef;\n context: { $implicit: selectedItem }\n \"\n ></ng-container>\n }\n </div>\n @if (selected.length === 0 && !searchHasFocus && searchControl.value.length === 0) {\n <i class=\"text-muted\">\n {{
|
|
20538
|
-
}], ctorParameters: () => [{ type: SelectKeyboardService }], propDecorators: { placeholder: [{
|
|
20561
|
+
], 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 [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 @if (projectedSelectedItems) {\n <div class=\"selected-items\">\n @for (selectedItem of selected; track selectedItem) {\n <ng-container\n *ngTemplateOutlet=\"\n projectedSelectedItems.templateRef;\n context: { $implicit: selectedItem }\n \"\n ></ng-container>\n }\n </div>\n @if (selected.length === 0 && !searchHasFocus && searchControl.value.length === 0) {\n <i class=\"text-muted\">\n {{ displayPlaceholder }}\n </i>\n }\n } @else {\n <div class=\"selected-items\">\n @if (!multi) {\n <!-- hidden is needed, otherwise the propagation does not work correctly -->\n <span [hidden]=\"!searchHasFocus || !preselectedItem || filterItems\">\n {{ preselectedItem?.label | translate }}\n </span>\n <span [hidden]=\"searchHasFocus || selected.length !== 1\">\n {{ selected[0]?.label | translate }}\n </span>\n }\n @if (selected.length === 0 && !preselectedItem && searchControl.value.length === 0) {\n <i class=\"text-muted\">\n {{ displayPlaceholder }}\n </i>\n }\n @if (multi) {\n <span class=\"m-r-4\">{{ searchControl.value }}</span>\n @for (selectedItem of selected; track selectedItem) {\n <span class=\"tag tag--info chip\">\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)=\"\n $event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\n \"\n >\n <i c8yIcon=\"times\"></i>\n </button>\n {{ selectedItem.label | translate }}\n </span>\n }\n }\n </div>\n }\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 @if (canDeselect && selected.length > 0) {\n <button\n class=\"btn btn-dot\"\n title=\"{{ 'Deselect' | translate }}\"\n type=\"button\"\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 }\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 dropdown-menu--select\"\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 @for (item of filterItems ? (items | filterBy: searchControl.value) : items; track item) {\n <c8y-li\n style=\"cursor: pointer\"\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 @if (multi) {\n <c8y-li-checkbox\n [selected]=\"selected.indexOf(item) > -1\"\n (click)=\"$event.preventDefault()\"\n ></c8y-li-checkbox>\n }\n @if (!item.template) {\n <c8y-li-body>\n {{ item.label | translate }}\n </c8y-li-body>\n }\n <ng-container\n *ngTemplateOutlet=\"item?.template\"\n ngProjectAs=\"c8y-li-body\"\n ></ng-container>\n </c8y-li>\n }\n <ng-content select=\"div\"></ng-content>\n </c8y-list-group>\n</div>\n" }]
|
|
20562
|
+
}], ctorParameters: () => [{ type: SelectKeyboardService }, { type: i1$1.TranslateService }], propDecorators: { placeholder: [{
|
|
20539
20563
|
type: Input
|
|
20540
20564
|
}], items: [{
|
|
20541
20565
|
type: Input
|