@fundamental-ngx/core 0.65.0-rc.9 → 0.65.0

package/fesm2022/fundamental-ngx-core-combobox.mjs

@@ -60,6 +60,11 @@ class ComboboxMobileComponent extends MobileModeBase {
          * List element, which will be rendered inside dialog.
          */
         this.childContent = null;
+        /** @hidden */
+        this._handlingDialogAction = false;
+        /** @hidden */
+        this._dismissedByAction = false;
+        this._component.setMobileModeConfig(this.mobileConfig);
     }
     /** @hidden */
     ngOnInit() {
@@ -67,22 +72,29 @@ class ComboboxMobileComponent extends MobileModeBase {
     }
     /** @hidden */
     handleDismiss() {
-        this.dialogRef.dismiss();
-        this._component.dialogDismiss(this._selectedBackup);
+        this._handlingDialogAction = true;
+        this._component.dialogDismiss();
+        this._dismissedByAction = true;
+        this._dismissDialog();
+        this._handlingDialogAction = false;
     }
     /** @hidden */
     handleApprove() {
-        this.dialogRef.close();
+        this._handlingDialogAction = true;
         this._component.dialogApprove();
+        this._closeDialog();
+        this._handlingDialogAction = false;
     }
     /** @hidden */
     _toggleDialog(open) {
         if (open) {
-            this._selectedBackup = this._component.getValue();
             if (!this._dialogService.hasOpenDialogs()) {
                 this._open();
             }
         }
+        else if (!this._handlingDialogAction) {
+            this._closeDialog();
+        }
     }
     /** @hidden */
     _listenOnMultiInputOpenChange() {
@@ -92,8 +104,10 @@ class ComboboxMobileComponent extends MobileModeBase {
     }
     /** @hidden */
     _open() {
+        this._dismissedByAction = false;
         this.dialogRef = this._dialogService.open(this.dialogTemplate, {
             mobile: true,
+            focusTrapped: true,
             ...this.dialogConfig,
             backdropClickCloseable: false,
             container: this._elementRef.nativeElement,
@@ -101,15 +115,31 @@ class ComboboxMobileComponent extends MobileModeBase {
         });
         this._focusInputElementOnceOpened();
         const refSub = this.dialogRef.afterClosed.subscribe({
-            error: (type) => {
-                if (type === 'escape') {
-                    this._component.dialogDismiss(this._selectedBackup);
-                    refSub.unsubscribe();
+            error: () => {
+                if (this.dialogRef.status() === 'dismissed' && !this._dismissedByAction) {
+                    this._component.dialogDismiss();
                 }
+                refSub.unsubscribe();
             }
         });
     }
     /** @hidden */
+    _closeDialog() {
+        if (this._canCloseDialog()) {
+            this.dialogRef.close();
+        }
+    }
+    /** @hidden */
+    _dismissDialog() {
+        if (this._canCloseDialog()) {
+            this.dialogRef.dismiss();
+        }
+    }
+    /** @hidden */
+    _canCloseDialog() {
+        return (this.dialogRef?.isOpen() || this.dialogRef?.status() === 'pending') && !this.dialogRef.isClosed();
+    }
+    /** @hidden */
     _focusInputElementOnceOpened() {
         this.dialogRef.afterLoaded
             .pipe(observeOn(asyncScheduler), // making the listener async
@@ -127,7 +157,7 @@ class ComboboxMobileComponent extends MobileModeBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ComboboxMobileComponent, deps: [{ token: COMBOBOX_COMPONENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ComboboxMobileComponent, isStandalone: true, selector: "fd-combobox-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            @if (mobileConfig.title) {\n                <h1 fd-title>{{ mobileConfig.title }}</h1>\n            }\n            @if (mobileConfig.hasCloseButton) {\n                <button title=\"Close\" fd-dialog-close-button [mobile]=\"true\" (click)=\"handleDismiss()\"></button>\n            }\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element [fullWidth]=\"true\">\n                        <ng-template [ngTemplateOutlet]=\"childContent?.controlTemplate || null\"></ng-template>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body>\n            <ng-template [ngTemplateOutlet]=\"childContent?.listTemplate || null\"></ng-template>\n        </fd-dialog-body>\n        <fd-dialog-footer>\n            @if (mobileConfig.approveButtonText) {\n                <fd-button-bar fdType=\"emphasized\" [label]=\"mobileConfig.approveButtonText!\" (click)=\"handleApprove()\">\n                </fd-button-bar>\n            }\n            @if (mobileConfig.cancelButtonText) {\n                <fd-button-bar fdkInitialFocus [label]=\"mobileConfig.cancelButtonText!\" (click)=\"handleDismiss()\">\n                </fd-button-bar>\n            }\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: BarMiddleDirective, selector: "[fd-bar-middle]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header", inputs: ["inShellbar"] }, { kind: "component", type: DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ComboboxMobileComponent, isStandalone: true, selector: "fd-combobox-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            @if (mobileConfig.title) {\n                <h1 fd-title>{{ mobileConfig.title }}</h1>\n            }\n            @if (mobileConfig.hasCloseButton) {\n                <button title=\"Close\" fd-dialog-close-button [mobile]=\"true\" (click)=\"handleDismiss()\"></button>\n            }\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element [fullWidth]=\"true\">\n                        <ng-template [ngTemplateOutlet]=\"childContent?.controlTemplate || null\"></ng-template>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body>\n            @if (mobileConfig.instruction) {\n                <p data-dialog-instruction>{{ mobileConfig.instruction }}</p>\n            }\n            <ng-template [ngTemplateOutlet]=\"childContent?.listTemplate || null\"></ng-template>\n        </fd-dialog-body>\n        <fd-dialog-footer>\n            @if (_component.hasMobileApproveAction()) {\n                <fd-button-bar fdType=\"emphasized\" [label]=\"mobileConfig.approveButtonText!\" (click)=\"handleApprove()\">\n                </fd-button-bar>\n            }\n            @if (mobileConfig.cancelButtonText) {\n                <fd-button-bar fdkInitialFocus [label]=\"mobileConfig.cancelButtonText!\" (click)=\"handleDismiss()\">\n                </fd-button-bar>\n            }\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: BarMiddleDirective, selector: "[fd-bar-middle]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header", inputs: ["inShellbar"] }, { kind: "component", type: DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ComboboxMobileComponent, decorators: [{
             type: Component,
@@ -146,7 +176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         TemplateDirective,
                         NgTemplateOutlet,
                         InitialFocusDirective
-                    ], template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            @if (mobileConfig.title) {\n                <h1 fd-title>{{ mobileConfig.title }}</h1>\n            }\n            @if (mobileConfig.hasCloseButton) {\n                <button title=\"Close\" fd-dialog-close-button [mobile]=\"true\" (click)=\"handleDismiss()\"></button>\n            }\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element [fullWidth]=\"true\">\n                        <ng-template [ngTemplateOutlet]=\"childContent?.controlTemplate || null\"></ng-template>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body>\n            <ng-template [ngTemplateOutlet]=\"childContent?.listTemplate || null\"></ng-template>\n        </fd-dialog-body>\n        <fd-dialog-footer>\n            @if (mobileConfig.approveButtonText) {\n                <fd-button-bar fdType=\"emphasized\" [label]=\"mobileConfig.approveButtonText!\" (click)=\"handleApprove()\">\n                </fd-button-bar>\n            }\n            @if (mobileConfig.cancelButtonText) {\n                <fd-button-bar fdkInitialFocus [label]=\"mobileConfig.cancelButtonText!\" (click)=\"handleDismiss()\">\n                </fd-button-bar>\n            }\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n" }]
+                    ], template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            @if (mobileConfig.title) {\n                <h1 fd-title>{{ mobileConfig.title }}</h1>\n            }\n            @if (mobileConfig.hasCloseButton) {\n                <button title=\"Close\" fd-dialog-close-button [mobile]=\"true\" (click)=\"handleDismiss()\"></button>\n            }\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element [fullWidth]=\"true\">\n                        <ng-template [ngTemplateOutlet]=\"childContent?.controlTemplate || null\"></ng-template>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body>\n            @if (mobileConfig.instruction) {\n                <p data-dialog-instruction>{{ mobileConfig.instruction }}</p>\n            }\n            <ng-template [ngTemplateOutlet]=\"childContent?.listTemplate || null\"></ng-template>\n        </fd-dialog-body>\n        <fd-dialog-footer>\n            @if (_component.hasMobileApproveAction()) {\n                <fd-button-bar fdType=\"emphasized\" [label]=\"mobileConfig.approveButtonText!\" (click)=\"handleApprove()\">\n                </fd-button-bar>\n            }\n            @if (mobileConfig.cancelButtonText) {\n                <fd-button-bar fdkInitialFocus [label]=\"mobileConfig.cancelButtonText!\" (click)=\"handleDismiss()\">\n                </fd-button-bar>\n            }\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [COMBOBOX_COMPONENT]
@@ -355,7 +385,7 @@ class ComboboxComponent {
         fromEvent(document, 'mousedown')
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe((event) => {
-            if (!this.closeOnOutsideClick) {
+            if (this.mobile || !this.closeOnOutsideClick) {
                 return;
             }
             const target = event.target;
@@ -469,15 +499,35 @@ class ComboboxComponent {
             this.itemClicked.emit({ item: value, index });
         }
     }
-    /** Handle dialog dismissing, closes popover and sets backup data. */
+    /**
+     * @hidden
+     * Receives the resolved mobile configuration from the mobile wrapper.
+     */
+    setMobileModeConfig(config) {
+        this._mobileModeConfig = config;
+    }
+    /**
+     * @hidden
+     * Whether the resolved mobile configuration provides a usable Approve action.
+     */
+    hasMobileApproveAction() {
+        return !!this._mobileModeConfig?.approveButtonText?.trim();
+    }
+    /** Handle dialog dismissing, restoring an unconfirmed mobile selection when needed. */
     dialogDismiss(term) {
-        this.inputText = this.displayFn(term);
-        this.setValue(term);
-        this._lastConfirmedValue = term;
+        if (this._isMobileConfirmationMode()) {
+            this._restoreMobileConfirmationSnapshot();
+        }
+        else if (term !== undefined) {
+            this.inputText = this.displayFn(term);
+            this.setValue(term);
+            this._lastConfirmedValue = term;
+        }
         this.isOpenChangeHandle(false);
     }
     /** Handle dialog approval, closes popover and propagates data changes. */
     dialogApprove() {
+        this._confirmMobileSelection();
         this._propagateChange();
         this.isOpenChangeHandle(false);
     }
@@ -534,6 +584,9 @@ class ComboboxComponent {
             this.searchInputElement.nativeElement.value = this.inputTextValue;
         }
         this._lastConfirmedValue = valueToDisplay;
+        if (this.open && this._isMobileConfirmationMode()) {
+            this._captureMobileConfirmationSnapshot();
+        }
         this._cdRef.markForCheck();
     }
     /** @hidden */
@@ -578,6 +631,9 @@ class ComboboxComponent {
         if (this.mobile && !this.open) {
             this._resetDisplayedValues();
         }
+        if (isOpen && !this.open && this._isMobileConfirmationMode()) {
+            this._captureMobileConfirmationSnapshot();
+        }
         if (this.open !== isOpen) {
             this.open = isOpen;
             this.openChange.emit(isOpen);
@@ -603,6 +659,10 @@ class ComboboxComponent {
     /** Method that handles complete event from auto complete directive, setting the new value, and closing popover */
     handleAutoComplete(event) {
         if (this.inputText !== event.term) {
+            const matchingValues = this._getOptionObjectByDisplayedValue(event.term);
+            if (matchingValues.length === 1) {
+                this._lastConfirmedValue = matchingValues[0];
+            }
             this.inputText = event.term;
             this.handleSearchTermChange();
         }
@@ -634,6 +694,30 @@ class ComboboxComponent {
     }
     /** @hidden */
     _close() {
+        const completedValue = this.tabOutStrategy === 'closeAndSelect' ? this._getCompletedAutocompleteValue() : undefined;
+        if (completedValue !== undefined) {
+            if (completedValue !== this._lastConfirmedValue) {
+                this._commitCompletedAutocompleteValue(completedValue);
+            }
+            if (this.open) {
+                this.isOpenChangeHandle(false);
+            }
+            this.searchInputElement.nativeElement.focus();
+            return;
+        }
+        if (this.tabOutStrategy === 'closeAndSelect' && !this.communicateByObject) {
+            this.searchInputElement.nativeElement.value = this.inputText;
+            this.isOpenChangeHandle(false);
+            this.searchInputElement.nativeElement.focus();
+            return;
+        }
+        // When autoComplete is disabled, the user is in free-text mode.
+        // Typed text is intentional and must not be reverted on close.
+        if (!this.autoComplete) {
+            this._lastConfirmedValue = this.inputText;
+            this.isOpenChangeHandle(false);
+            return;
+        }
         const revertText = this._lastConfirmedValue != null ? this.displayFn(this._lastConfirmedValue) : '';
         this.inputText = revertText;
         this.searchInputElement.nativeElement.value = revertText;
@@ -664,6 +748,26 @@ class ComboboxComponent {
         const expected = this._lastConfirmedValue != null ? this.displayFn(this._lastConfirmedValue) : '';
         return this.inputText !== expected;
     }
+    /** @hidden */
+    _getCompletedAutocompleteValue() {
+        const nativeInput = this.searchInputElement.nativeElement;
+        const nativeValue = nativeInput.value;
+        const hasSelectedSuffix = nativeValue !== this.inputText &&
+            nativeInput.selectionStart === this.inputText.length &&
+            nativeInput.selectionEnd === nativeValue.length;
+        if (nativeValue !== this.inputText && !hasSelectedSuffix) {
+            return;
+        }
+        const matchingValues = this._getOptionObjectByDisplayedValue(nativeValue);
+        return matchingValues.length === 1 ? matchingValues[0] : undefined;
+    }
+    /** @hidden */
+    _commitCompletedAutocompleteValue(value) {
+        this._lastConfirmedValue = value;
+        this.setValue(value);
+        this.inputText = this.displayFn(value);
+        this.searchInputElement.nativeElement.value = this.inputText;
+    }
     /** Method that picks other value moved from current one by offset, called only when combobox is closed */
     _chooseOtherItem(offset) {
         const activeValue = this._getOptionObjectByDisplayedValue(this.inputTextValue)[0];
@@ -708,19 +812,23 @@ class ComboboxComponent {
     }
     /** @hidden */
     _handleClickActions(term, shouldClosePopover = true) {
-        if (this.closeOnSelect && shouldClosePopover) {
-            this.isOpenChangeHandle(false);
+        const confirmationMode = this._isMobileConfirmationMode();
+        if (!confirmationMode) {
+            this._lastConfirmedValue = term;
         }
-        this._lastConfirmedValue = term;
         if (this.fillOnSelect) {
             this.setValue(term);
-            this.inputText = this.displayFn(term);
-            this.searchInputElement.nativeElement.value = this.inputText;
+            const displayText = this.displayFn(term);
+            this.searchInputElement.nativeElement.value = displayText;
+            this.inputText = displayText;
             this._cdRef.detectChanges();
-            if (this.mobile) {
+            if (this.mobile && !confirmationMode) {
                 this._propagateChange();
             }
         }
+        if (!confirmationMode && this.closeOnSelect && shouldClosePopover) {
+            this.isOpenChangeHandle(false);
+        }
         if (shouldClosePopover) {
             this.handleSearchTermChange();
         }
@@ -730,6 +838,42 @@ class ComboboxComponent {
         return this.dropdownValues.filter((value) => this.displayFn(value) === displayValue);
     }
     /** @hidden */
+    _isMobileConfirmationMode() {
+        return this.mobile && this.hasMobileApproveAction();
+    }
+    /** @hidden */
+    _captureMobileConfirmationSnapshot() {
+        this._mobileConfirmationSnapshot = {
+            inputText: this.inputTextValue,
+            nativeInputValue: this.searchInputElement?.nativeElement.value ?? this.inputTextValue,
+            value: this._value,
+            lastConfirmedValue: this._lastConfirmedValue
+        };
+    }
+    /** @hidden */
+    _restoreMobileConfirmationSnapshot() {
+        const snapshot = this._mobileConfirmationSnapshot;
+        if (!snapshot) {
+            return;
+        }
+        this.inputText = snapshot.inputText;
+        this._value = snapshot.value;
+        this._lastConfirmedValue = snapshot.lastConfirmedValue;
+        if (this.searchInputElement?.nativeElement) {
+            this.searchInputElement.nativeElement.value = snapshot.nativeInputValue;
+        }
+        this._cdRef.markForCheck();
+    }
+    /** @hidden */
+    _confirmMobileSelection() {
+        if (!this._isMobileConfirmationMode()) {
+            return;
+        }
+        const selectedValues = this._getOptionObjectByDisplayedValue(this.inputText);
+        this._lastConfirmedValue =
+            this.communicateByObject && selectedValues.length === 1 ? selectedValues[0] : this.inputText;
+    }
+    /** @hidden */
     _refreshDisplayedValues() {
         if (this.inputText) {
             this.displayedValues = this.filterFn(this.dropdownValues, this.inputText);