@po-ui/ng-components 19.17.1 → 19.18.0
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/po-ui-ng-components.mjs +51 -12
- package/fesm2022/po-ui-ng-components.mjs.map +1 -1
- package/lib/components/po-field/po-combo/po-combo.component.d.ts +5 -0
- package/package.json +4 -4
- package/po-ui-ng-components-19.18.0.tgz +0 -0
- package/schematics/ng-add/index.js +1 -1
- package/schematics/ng-update/v14/index.js +1 -1
- package/schematics/ng-update/v15/index.js +1 -1
- package/schematics/ng-update/v16/index.js +1 -1
- package/schematics/ng-update/v17/index.js +1 -1
- package/schematics/ng-update/v18/index.js +2 -2
- package/schematics/ng-update/v19/index.js +2 -2
- package/schematics/ng-update/v2/index.js +1 -1
- package/schematics/ng-update/v3/index.js +1 -1
- package/schematics/ng-update/v4/index.js +1 -1
- package/schematics/ng-update/v5/index.js +1 -1
- package/schematics/ng-update/v6/index.js +1 -1
- package/po-ui-ng-components-19.17.1.tgz +0 -0
|
@@ -27008,11 +27008,14 @@ class PoComboComponent extends PoComboBaseComponent {
|
|
|
27008
27008
|
if (this.visibleOptions.length) {
|
|
27009
27009
|
this.focusItem();
|
|
27010
27010
|
}
|
|
27011
|
-
this.
|
|
27011
|
+
if (this.comboOpen) {
|
|
27012
|
+
this.controlComboVisibility(true);
|
|
27013
|
+
}
|
|
27014
|
+
else {
|
|
27015
|
+
this.toggleComboVisibility();
|
|
27016
|
+
}
|
|
27012
27017
|
this.isFiltering = this.changeOnEnter ? this.isFiltering : false;
|
|
27013
|
-
return;
|
|
27014
27018
|
}
|
|
27015
|
-
// Tecla "enter"
|
|
27016
27019
|
if (key === PoKeyCodeEnum.enter && this.selectedView && this.comboOpen) {
|
|
27017
27020
|
const isUpdateModel = this.selectedView.value !== this.selectedValue || inputValue !== this.selectedView.label;
|
|
27018
27021
|
this.controlComboVisibility(false);
|
|
@@ -27024,7 +27027,8 @@ class PoComboComponent extends PoComboBaseComponent {
|
|
|
27024
27027
|
return;
|
|
27025
27028
|
}
|
|
27026
27029
|
if (key === PoKeyCodeEnum.enter) {
|
|
27027
|
-
|
|
27030
|
+
event.preventDefault();
|
|
27031
|
+
this.toggleComboVisibility();
|
|
27028
27032
|
}
|
|
27029
27033
|
if (key === PoKeyCodeEnum.esc) {
|
|
27030
27034
|
if (key === this.lastKey) {
|
|
@@ -27038,6 +27042,10 @@ class PoComboComponent extends PoComboBaseComponent {
|
|
|
27038
27042
|
this.onCloseCombo();
|
|
27039
27043
|
}
|
|
27040
27044
|
}
|
|
27045
|
+
if (key === PoKeyCodeEnum.tab && this.shouldHandleTab(event) && !this.isCleanVisible()) {
|
|
27046
|
+
event.preventDefault();
|
|
27047
|
+
this.focusItem();
|
|
27048
|
+
}
|
|
27041
27049
|
this.lastKey = event.keyCode;
|
|
27042
27050
|
if (isFieldFocused) {
|
|
27043
27051
|
this.keydown.emit(event);
|
|
@@ -27307,6 +27315,25 @@ class PoComboComponent extends PoComboBaseComponent {
|
|
|
27307
27315
|
updateCacheOptions() {
|
|
27308
27316
|
this.cacheOptions = this.comboOptionsList.map(item => item.value === this.selectedValue ? { ...item, selected: true } : item);
|
|
27309
27317
|
}
|
|
27318
|
+
isCleanVisible() {
|
|
27319
|
+
return this.clean && !this.disabled && !!this.inputEl.nativeElement.value;
|
|
27320
|
+
}
|
|
27321
|
+
handleCleanKeyboardTab(event) {
|
|
27322
|
+
if (this.shouldHandleTab(event)) {
|
|
27323
|
+
event.preventDefault();
|
|
27324
|
+
this.focusItem();
|
|
27325
|
+
}
|
|
27326
|
+
}
|
|
27327
|
+
onListboxKeyDown(event) {
|
|
27328
|
+
const key = event?.keyCode;
|
|
27329
|
+
if (key === PoKeyCodeEnum.tab && event.shiftKey) {
|
|
27330
|
+
this.focusInput();
|
|
27331
|
+
event.preventDefault();
|
|
27332
|
+
}
|
|
27333
|
+
if (key === PoKeyCodeEnum.esc) {
|
|
27334
|
+
event.stopPropagation();
|
|
27335
|
+
}
|
|
27336
|
+
}
|
|
27310
27337
|
adjustContainerPosition() {
|
|
27311
27338
|
this.controlPosition.adjustPosition(this.listboxControlPosition);
|
|
27312
27339
|
}
|
|
@@ -27382,7 +27409,7 @@ class PoComboComponent extends PoComboBaseComponent {
|
|
|
27382
27409
|
window.removeEventListener('scroll', this.onScroll, true);
|
|
27383
27410
|
}
|
|
27384
27411
|
setContainerPosition() {
|
|
27385
|
-
this.controlPosition
|
|
27412
|
+
this.controlPosition?.setElements(this.containerElement?.nativeElement, poComboContainerOffset, this.inputEl, ['top', 'bottom'], true);
|
|
27386
27413
|
this.adjustContainerPosition();
|
|
27387
27414
|
}
|
|
27388
27415
|
setContainerWidth() {
|
|
@@ -27402,20 +27429,32 @@ class PoComboComponent extends PoComboBaseComponent {
|
|
|
27402
27429
|
setScrollingControl() {
|
|
27403
27430
|
return this.infiniteScroll ? true : false;
|
|
27404
27431
|
}
|
|
27432
|
+
// Define o foco no item apropriado do listbox.
|
|
27405
27433
|
focusItem() {
|
|
27406
27434
|
this.poListbox?.listboxItemList?.nativeElement.focus();
|
|
27407
27435
|
setTimeout(() => {
|
|
27408
|
-
let item;
|
|
27436
|
+
let item = null;
|
|
27409
27437
|
if (this.selectedValue) {
|
|
27410
27438
|
item = document.querySelector('.po-listbox-item[aria-selected="true"]');
|
|
27411
27439
|
}
|
|
27412
|
-
|
|
27413
|
-
|
|
27440
|
+
if (!item) {
|
|
27441
|
+
const items = document.querySelectorAll('.po-listbox-item');
|
|
27442
|
+
item = items.length > 0 ? items[0] : null;
|
|
27443
|
+
}
|
|
27444
|
+
if (item) {
|
|
27445
|
+
item.focus();
|
|
27414
27446
|
}
|
|
27415
|
-
this.poListbox?.listboxItemList?.nativeElement.focus();
|
|
27416
|
-
item?.focus();
|
|
27417
27447
|
});
|
|
27418
27448
|
}
|
|
27449
|
+
// Define o foco no elemento input do combobox.
|
|
27450
|
+
focusInput(event) {
|
|
27451
|
+
event?.preventDefault();
|
|
27452
|
+
this.inputEl.nativeElement.focus();
|
|
27453
|
+
}
|
|
27454
|
+
// Determina se o tab deve abrir o listbox.
|
|
27455
|
+
shouldHandleTab(event) {
|
|
27456
|
+
return this.comboOpen && this.appendBox && !event.shiftKey;
|
|
27457
|
+
}
|
|
27419
27458
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoComboComponent, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: PoComboFilterService }, { token: i0.Renderer2 }, { token: PoControlPositionService }, { token: i0.ChangeDetectorRef }, { token: PoThemeService }, { token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Component });
|
|
27420
27459
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoComboComponent, isStandalone: false, selector: "po-combo", providers: [
|
|
27421
27460
|
PoComboFilterService,
|
|
@@ -27430,7 +27469,7 @@ class PoComboComponent extends PoComboBaseComponent {
|
|
|
27430
27469
|
useExisting: forwardRef(() => PoComboComponent),
|
|
27431
27470
|
multi: true
|
|
27432
27471
|
}
|
|
27433
|
-
], queries: [{ propertyName: "comboOptionTemplate", first: true, predicate: PoComboOptionTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "outerContainer", first: true, predicate: ["outerContainer "], descendants: true, read: ElementRef }, { propertyName: "containerElement", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef }, { propertyName: "contentElement", first: true, predicate: ["contentElement"], descendants: true, read: ElementRef }, { propertyName: "iconElement", first: true, predicate: ["iconArrow"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "poListbox", first: true, predicate: ["poListbox"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #outerContainer>\n <po-field-container\n [p-disabled]=\"disabled\"\n [p-id]=\"id\"\n [p-label]=\"label\"\n [p-optional]=\"optional\"\n [p-required]=\"required\"\n [p-show-required]=\"showRequired\"\n >\n <div\n #searchContainer\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n class=\"po-field-container-content po-combo-container-content\"\n >\n <div class=\"po-combo-container-wrapper\">\n <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n <po-icon\n class=\"po-field-icon po-icon-input\"\n [class.po-field-icon-disabled]=\"disabled\"\n [class.po-field-icon-aa]=\"size === 'small'\"\n [p-icon]=\"icon\"\n ></po-icon>\n </div>\n\n <input\n #inp\n class=\"po-combo-input\"\n [ngClass]=\"\n clean && inp.value\n ? size === 'small'\n ? 'po-input-double-icon-right-aa'\n : 'po-input-double-icon-right'\n : size === 'small'\n ? 'po-input-icon-right-aa'\n : 'po-input-icon-right'\n \"\n [class.po-combo-input-aa]=\"size === 'small'\"\n [class.po-input-icon-left]=\"icon\"\n [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n autocomplete=\"off\"\n type=\"text\"\n [attr.name]=\"name\"\n [disabled]=\"disabled\"\n [id]=\"id\"\n [placeholder]=\"disabled ? '' : placeholder\"\n [required]=\"required\"\n (click)=\"toggleComboVisibility()\"\n (keyup)=\"onKeyUp($event)\"\n (blur)=\"onBlur($event)\"\n (keyup)=\"searchOnEnterOrArrow($event, $event.target.value)\"\n (keydown)=\"onKeyDown($event)\"\n />\n\n <div class=\"po-field-icon-container-right\">\n <po-clean\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"literals.clean\"\n class=\"po-combo-clean po-icon-input\"\n [class.po-combo-clean-aa]=\"size === 'small'\"\n *ngIf=\"
|
|
27472
|
+
], queries: [{ propertyName: "comboOptionTemplate", first: true, predicate: PoComboOptionTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "outerContainer", first: true, predicate: ["outerContainer "], descendants: true, read: ElementRef }, { propertyName: "containerElement", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef }, { propertyName: "contentElement", first: true, predicate: ["contentElement"], descendants: true, read: ElementRef }, { propertyName: "iconElement", first: true, predicate: ["iconArrow"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputEl", first: true, predicate: ["inp"], descendants: true, read: ElementRef, static: true }, { propertyName: "poListbox", first: true, predicate: ["poListbox"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #outerContainer>\n <po-field-container\n [p-disabled]=\"disabled\"\n [p-id]=\"id\"\n [p-label]=\"label\"\n [p-optional]=\"optional\"\n [p-required]=\"required\"\n [p-show-required]=\"showRequired\"\n >\n <div\n #searchContainer\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n class=\"po-field-container-content po-combo-container-content\"\n >\n <div class=\"po-combo-container-wrapper\">\n <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n <po-icon\n class=\"po-field-icon po-icon-input\"\n [class.po-field-icon-disabled]=\"disabled\"\n [class.po-field-icon-aa]=\"size === 'small'\"\n [p-icon]=\"icon\"\n ></po-icon>\n </div>\n\n <input\n #inp\n class=\"po-combo-input\"\n [ngClass]=\"\n clean && inp.value\n ? size === 'small'\n ? 'po-input-double-icon-right-aa'\n : 'po-input-double-icon-right'\n : size === 'small'\n ? 'po-input-icon-right-aa'\n : 'po-input-icon-right'\n \"\n [class.po-combo-input-aa]=\"size === 'small'\"\n [class.po-input-icon-left]=\"icon\"\n [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n autocomplete=\"off\"\n type=\"text\"\n [attr.name]=\"name\"\n [disabled]=\"disabled\"\n [id]=\"id\"\n [placeholder]=\"disabled ? '' : placeholder\"\n [required]=\"required\"\n [attr.data-append-in-body]=\"appendBox\"\n (click)=\"toggleComboVisibility()\"\n (keyup)=\"onKeyUp($event)\"\n (blur)=\"onBlur($event)\"\n (keyup)=\"searchOnEnterOrArrow($event, $event.target.value)\"\n (keydown)=\"onKeyDown($event)\"\n />\n\n <div class=\"po-field-icon-container-right\">\n <po-clean\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"literals.clean\"\n class=\"po-combo-clean po-icon-input\"\n [class.po-combo-clean-aa]=\"size === 'small'\"\n *ngIf=\"isCleanVisible()\"\n [p-element-ref]=\"inputEl\"\n [p-size]=\"size\"\n (p-change-event)=\"clear($event)\"\n (click)=\"clear(null); $event.preventDefault()\"\n (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n >\n </po-clean>\n\n <div\n #iconArrow\n class=\"po-combo-arrow po-field-icon\"\n [class.po-field-icon-disabled]=\"disabled\"\n [class.po-field-icon-disabled-aa]=\"disabled && size === 'small'\"\n (click)=\"toggleComboVisibility(true)\"\n >\n <po-icon\n [p-icon]=\"comboOpen ? 'ICON_ARROW_UP po-icon-input' : 'ICON_ARROW_DOWN po-icon-input'\"\n [class.po-field-icon]=\"!disabled\"\n [class.po-field-icon-aa]=\"size === 'small'\"\n [class.po-combo-default-border]=\"!disabled && inp.value\"\n [class.po-combo-background-arrow-up]=\"!disabled && comboOpen\"\n ></po-icon>\n </div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n <ng-template #dropdownDefault>\n <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n </ng-template>\n\n <ng-template #dropdownCDK>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"true\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n >\n <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n </ng-template>\n </ng-template>\n\n <po-field-container-bottom\n [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n [p-append-in-body]=\"appendBox\"\n [p-help]=\"help\"\n [p-disabled]=\"disabled\"\n [p-error-pattern]=\"getErrorPattern()\"\n [p-error-limit]=\"errorLimit\"\n [p-show-additional-help]=\"displayAdditionalHelp\"\n [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n (p-additional-help)=\"emitAdditionalHelp()\"\n ></po-field-container-bottom>\n </po-field-container>\n\n <ng-template #dropdownListbox>\n <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n <po-listbox\n #poListbox\n #contentElement\n p-type=\"option\"\n [p-items]=\"visibleOptions\"\n [p-field-value]=\"dynamicValue\"\n [p-field-label]=\"dynamicLabel\"\n [p-template]=\"comboOptionTemplate\"\n [p-search-value]=\"getInputValue()\"\n [p-infinite-loading]=\"infiniteLoading\"\n [p-infinite-scroll]=\"infiniteScroll\"\n [p-filtering]=\"isFiltering\"\n [p-cache]=\"cache\"\n [p-filter-mode]=\"filterMode\"\n [p-visible]=\"comboOpen\"\n [p-is-searching]=\"isServerSearching\"\n [p-should-mark-letter]=\"shouldMarkLetters\"\n [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n [p-combo-service]=\"service\"\n [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n [p-size]=\"size\"\n [p-container-width]=\"containerWidth\"\n (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n (p-close)=\"onCloseCombo()\"\n (keydown)=\"onListboxKeyDown($event)\"\n ></po-listbox>\n </div>\n </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-optional", "p-required", "p-show-required"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
27434
27473
|
}
|
|
27435
27474
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoComboComponent, decorators: [{
|
|
27436
27475
|
type: Component,
|
|
@@ -27447,7 +27486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
27447
27486
|
useExisting: forwardRef(() => PoComboComponent),
|
|
27448
27487
|
multi: true
|
|
27449
27488
|
}
|
|
27450
|
-
], standalone: false, template: "<div #outerContainer>\n <po-field-container\n [p-disabled]=\"disabled\"\n [p-id]=\"id\"\n [p-label]=\"label\"\n [p-optional]=\"optional\"\n [p-required]=\"required\"\n [p-show-required]=\"showRequired\"\n >\n <div\n #searchContainer\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n class=\"po-field-container-content po-combo-container-content\"\n >\n <div class=\"po-combo-container-wrapper\">\n <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n <po-icon\n class=\"po-field-icon po-icon-input\"\n [class.po-field-icon-disabled]=\"disabled\"\n [class.po-field-icon-aa]=\"size === 'small'\"\n [p-icon]=\"icon\"\n ></po-icon>\n </div>\n\n <input\n #inp\n class=\"po-combo-input\"\n [ngClass]=\"\n clean && inp.value\n ? size === 'small'\n ? 'po-input-double-icon-right-aa'\n : 'po-input-double-icon-right'\n : size === 'small'\n ? 'po-input-icon-right-aa'\n : 'po-input-icon-right'\n \"\n [class.po-combo-input-aa]=\"size === 'small'\"\n [class.po-input-icon-left]=\"icon\"\n [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n autocomplete=\"off\"\n type=\"text\"\n [attr.name]=\"name\"\n [disabled]=\"disabled\"\n [id]=\"id\"\n [placeholder]=\"disabled ? '' : placeholder\"\n [required]=\"required\"\n (click)=\"toggleComboVisibility()\"\n (keyup)=\"onKeyUp($event)\"\n (blur)=\"onBlur($event)\"\n (keyup)=\"searchOnEnterOrArrow($event, $event.target.value)\"\n (keydown)=\"onKeyDown($event)\"\n />\n\n <div class=\"po-field-icon-container-right\">\n <po-clean\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"literals.clean\"\n class=\"po-combo-clean po-icon-input\"\n [class.po-combo-clean-aa]=\"size === 'small'\"\n *ngIf=\"
|
|
27489
|
+
], standalone: false, template: "<div #outerContainer>\n <po-field-container\n [p-disabled]=\"disabled\"\n [p-id]=\"id\"\n [p-label]=\"label\"\n [p-optional]=\"optional\"\n [p-required]=\"required\"\n [p-show-required]=\"showRequired\"\n >\n <div\n #searchContainer\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n class=\"po-field-container-content po-combo-container-content\"\n >\n <div class=\"po-combo-container-wrapper\">\n <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n <po-icon\n class=\"po-field-icon po-icon-input\"\n [class.po-field-icon-disabled]=\"disabled\"\n [class.po-field-icon-aa]=\"size === 'small'\"\n [p-icon]=\"icon\"\n ></po-icon>\n </div>\n\n <input\n #inp\n class=\"po-combo-input\"\n [ngClass]=\"\n clean && inp.value\n ? size === 'small'\n ? 'po-input-double-icon-right-aa'\n : 'po-input-double-icon-right'\n : size === 'small'\n ? 'po-input-icon-right-aa'\n : 'po-input-icon-right'\n \"\n [class.po-combo-input-aa]=\"size === 'small'\"\n [class.po-input-icon-left]=\"icon\"\n [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n autocomplete=\"off\"\n type=\"text\"\n [attr.name]=\"name\"\n [disabled]=\"disabled\"\n [id]=\"id\"\n [placeholder]=\"disabled ? '' : placeholder\"\n [required]=\"required\"\n [attr.data-append-in-body]=\"appendBox\"\n (click)=\"toggleComboVisibility()\"\n (keyup)=\"onKeyUp($event)\"\n (blur)=\"onBlur($event)\"\n (keyup)=\"searchOnEnterOrArrow($event, $event.target.value)\"\n (keydown)=\"onKeyDown($event)\"\n />\n\n <div class=\"po-field-icon-container-right\">\n <po-clean\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"literals.clean\"\n class=\"po-combo-clean po-icon-input\"\n [class.po-combo-clean-aa]=\"size === 'small'\"\n *ngIf=\"isCleanVisible()\"\n [p-element-ref]=\"inputEl\"\n [p-size]=\"size\"\n (p-change-event)=\"clear($event)\"\n (click)=\"clear(null); $event.preventDefault()\"\n (keydown.enter)=\"clearAndFocus(); $event.preventDefault()\"\n (keydown.tab)=\"handleCleanKeyboardTab($event)\"\n >\n </po-clean>\n\n <div\n #iconArrow\n class=\"po-combo-arrow po-field-icon\"\n [class.po-field-icon-disabled]=\"disabled\"\n [class.po-field-icon-disabled-aa]=\"disabled && size === 'small'\"\n (click)=\"toggleComboVisibility(true)\"\n >\n <po-icon\n [p-icon]=\"comboOpen ? 'ICON_ARROW_UP po-icon-input' : 'ICON_ARROW_DOWN po-icon-input'\"\n [class.po-field-icon]=\"!disabled\"\n [class.po-field-icon-aa]=\"size === 'small'\"\n [class.po-combo-default-border]=\"!disabled && inp.value\"\n [class.po-combo-background-arrow-up]=\"!disabled && comboOpen\"\n ></po-icon>\n </div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"appendBox; then dropdownCDK; else dropdownDefault\"> </ng-container>\n\n <ng-template #dropdownDefault>\n <ng-container *ngTemplateOutlet=\"dropdownListbox\"> </ng-container>\n </ng-template>\n\n <ng-template #dropdownCDK>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"true\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n >\n <ng-container *ngTemplateOutlet=\"dropdownListbox\"></ng-container>\n </ng-template>\n </ng-template>\n\n <po-field-container-bottom\n [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n [p-append-in-body]=\"appendBox\"\n [p-help]=\"help\"\n [p-disabled]=\"disabled\"\n [p-error-pattern]=\"getErrorPattern()\"\n [p-error-limit]=\"errorLimit\"\n [p-show-additional-help]=\"displayAdditionalHelp\"\n [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n (p-additional-help)=\"emitAdditionalHelp()\"\n ></po-field-container-bottom>\n </po-field-container>\n\n <ng-template #dropdownListbox>\n <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n <po-listbox\n #poListbox\n #contentElement\n p-type=\"option\"\n [p-items]=\"visibleOptions\"\n [p-field-value]=\"dynamicValue\"\n [p-field-label]=\"dynamicLabel\"\n [p-template]=\"comboOptionTemplate\"\n [p-search-value]=\"getInputValue()\"\n [p-infinite-loading]=\"infiniteLoading\"\n [p-infinite-scroll]=\"infiniteScroll\"\n [p-filtering]=\"isFiltering\"\n [p-cache]=\"cache\"\n [p-filter-mode]=\"filterMode\"\n [p-visible]=\"comboOpen\"\n [p-is-searching]=\"isServerSearching\"\n [p-should-mark-letter]=\"shouldMarkLetters\"\n [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n [p-combo-service]=\"service\"\n [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n [p-size]=\"size\"\n [p-container-width]=\"containerWidth\"\n (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n (p-close)=\"onCloseCombo()\"\n (keydown)=\"onListboxKeyDown($event)\"\n ></po-listbox>\n </div>\n </ng-template>\n</div>\n" }]
|
|
27451
27490
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: PoComboFilterService }, { type: i0.Renderer2 }, { type: PoControlPositionService }, { type: i0.ChangeDetectorRef }, { type: PoThemeService }, { type: PoLanguageService }], propDecorators: { comboOptionTemplate: [{
|
|
27452
27491
|
type: ContentChild,
|
|
27453
27492
|
args: [PoComboOptionTemplateDirective, { static: true }]
|