@c8y/ngx-components 1023.14.150 → 1023.14.152
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/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 +3 -0
- package/locales/es.po +3 -0
- package/locales/fr.po +3 -0
- package/locales/ja_JP.po +3 -0
- package/locales/ko.po +3 -0
- package/locales/nl.po +3 -0
- package/locales/pl.po +3 -0
- package/locales/pt_BR.po +3 -0
- package/locales/zh_CN.po +3 -0
- package/locales/zh_TW.po +3 -0
- package/package.json +1 -1
|
@@ -19360,8 +19360,9 @@ class SelectComponent {
|
|
|
19360
19360
|
* @ignore
|
|
19361
19361
|
* @param selectKeyboardService The service to handle keyboard navigation.
|
|
19362
19362
|
*/
|
|
19363
|
-
constructor(selectKeyboardService) {
|
|
19363
|
+
constructor(selectKeyboardService, translateService) {
|
|
19364
19364
|
this.selectKeyboardService = selectKeyboardService;
|
|
19365
|
+
this.translateService = translateService;
|
|
19365
19366
|
/**
|
|
19366
19367
|
* Placeholder text to be displayed in the select.
|
|
19367
19368
|
*/
|
|
@@ -19441,6 +19442,12 @@ class SelectComponent {
|
|
|
19441
19442
|
noMatchHighlightFirst: this.filterItems
|
|
19442
19443
|
};
|
|
19443
19444
|
}
|
|
19445
|
+
/**
|
|
19446
|
+
* @ignore
|
|
19447
|
+
*/
|
|
19448
|
+
ngOnInit() {
|
|
19449
|
+
this.updateDisplayPlaceholder();
|
|
19450
|
+
}
|
|
19444
19451
|
/**
|
|
19445
19452
|
* @ignore
|
|
19446
19453
|
*/
|
|
@@ -19485,6 +19492,9 @@ class SelectComponent {
|
|
|
19485
19492
|
noMatchHighlightFirst: changes.filterItems?.currentValue || this.filterItems
|
|
19486
19493
|
};
|
|
19487
19494
|
}
|
|
19495
|
+
if (changes.placeholder || changes.required) {
|
|
19496
|
+
this.updateDisplayPlaceholder();
|
|
19497
|
+
}
|
|
19488
19498
|
}
|
|
19489
19499
|
/**
|
|
19490
19500
|
* @ignore
|
|
@@ -19633,7 +19643,21 @@ class SelectComponent {
|
|
|
19633
19643
|
this.onChange(this.multi ? this._selected : this._selected[0]);
|
|
19634
19644
|
}
|
|
19635
19645
|
}
|
|
19636
|
-
|
|
19646
|
+
/** Computes translated placeholder, appending a "(required)" hint when required. */
|
|
19647
|
+
updateDisplayPlaceholder() {
|
|
19648
|
+
const translatedPlaceholder = this.placeholder
|
|
19649
|
+
? this.translateService.instant(this.placeholder)
|
|
19650
|
+
: this.placeholder;
|
|
19651
|
+
if (!this.required) {
|
|
19652
|
+
this.displayPlaceholder = translatedPlaceholder;
|
|
19653
|
+
return;
|
|
19654
|
+
}
|
|
19655
|
+
const requiredText = `(${this.translateService.instant(gettext$1('required'))})`;
|
|
19656
|
+
this.displayPlaceholder = translatedPlaceholder?.trim()
|
|
19657
|
+
? `${translatedPlaceholder} ${requiredText}`
|
|
19658
|
+
: requiredText;
|
|
19659
|
+
}
|
|
19660
|
+
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 }); }
|
|
19637
19661
|
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: [
|
|
19638
19662
|
{
|
|
19639
19663
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -19646,7 +19670,7 @@ class SelectComponent {
|
|
|
19646
19670
|
multi: true
|
|
19647
19671
|
},
|
|
19648
19672
|
SelectKeyboardService
|
|
19649
|
-
], 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 {{
|
|
19673
|
+
], 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" }] }); }
|
|
19650
19674
|
}
|
|
19651
19675
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SelectComponent, decorators: [{
|
|
19652
19676
|
type: Component,
|
|
@@ -19674,8 +19698,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
19674
19698
|
ListItemBodyComponent,
|
|
19675
19699
|
C8yTranslatePipe,
|
|
19676
19700
|
FilterByPipe
|
|
19677
|
-
], 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 {{
|
|
19678
|
-
}], ctorParameters: () => [{ type: SelectKeyboardService }], propDecorators: { placeholder: [{
|
|
19701
|
+
], 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" }]
|
|
19702
|
+
}], ctorParameters: () => [{ type: SelectKeyboardService }, { type: i1$1.TranslateService }], propDecorators: { placeholder: [{
|
|
19679
19703
|
type: Input
|
|
19680
19704
|
}], items: [{
|
|
19681
19705
|
type: Input
|