@@ -71,6 +88,20 @@ export class ButtonDialogComponent implements OnInit {
public dynamicDialogConfig: DynamicDialogConfig,
public dynamicDialogRef: DynamicDialogRef
) {}
+ ngAfterViewInit(): void {
+ if (this.dialogData.config.autoFocusButton === 'primary' || !this.dialogData.config.autoFocusButton) {
+ this.primaryButton.element.nativeElement.focus()
+ } else if (this.dialogData.config.autoFocusButton === 'secondary') {
+ this.secondaryButton.element.nativeElement.focus()
+ } else if (this.dialogData.config.autoFocusButton === 'custom') {
+ const button = this.customButtons.find((customButton) => {
+ return customButton.nativeElement.id === this.dialogData.config.autoFocusButtonCustomId
+ })
+ setTimeout(() => {
+ button?.nativeElement.focus()
+ })
+ }
+ }
ngOnInit(): void {
this.loadComponent()
@@ -113,6 +144,8 @@ export class ButtonDialogComponent implements OnInit {
if (!!dialogConfig.secondaryButtonDetails && !!dialogConfig.secondaryButtonDetails.key) {
this.dialogData.config.secondaryButtonDetails = dialogConfig.secondaryButtonDetails
}
+ this.dialogData.config.autoFocusButton = dialogConfig.autoFocusButton
+ this.dialogData.config.autoFocusButtonCustomId = dialogConfig.autoFocusButtonCustomId
}
if (dynamicConfigData.component) {
this.dialogData.component = dynamicConfigData.component
diff --git a/libs/portal-integration-angular/src/lib/model/button-dialog.ts b/libs/portal-integration-angular/src/lib/model/button-dialog.ts
index 4d40364e..dfca9795 100644
--- a/libs/portal-integration-angular/src/lib/model/button-dialog.ts
+++ b/libs/portal-integration-angular/src/lib/model/button-dialog.ts
@@ -1,5 +1,6 @@
import { Type } from '@angular/core'
import { PrimeIcon } from '@onecx/angular-accelerator'
+import { DialogButton } from '../services/portal-dialog.service'
/**
* Object describing details for button rendering containing key for translation, optional icon and optional parameters for translation
@@ -39,6 +40,8 @@ export interface ButtonDialogConfig {
secondaryButtonIncluded?: boolean
secondaryButtonDetails?: ButtonDialogButtonDetails
customButtons?: ButtonDialogCustomButtonDetails[]
+ autoFocusButton?: DialogButton
+ autoFocusButtonCustomId?: string
}
export interface ButtonDialogData {
diff --git a/libs/portal-integration-angular/src/lib/services/portal-dialog-service.stories.ts b/libs/portal-integration-angular/src/lib/services/portal-dialog-service.stories.ts
index 3895a038..aa2bc1c0 100644
--- a/libs/portal-integration-angular/src/lib/services/portal-dialog-service.stories.ts
+++ b/libs/portal-integration-angular/src/lib/services/portal-dialog-service.stories.ts
@@ -1,10 +1,10 @@
-import { Component, Input, importProvidersFrom } from '@angular/core'
+import { Component, EventEmitter, Input, OnInit, importProvidersFrom } from '@angular/core'
import { Meta, applicationConfig, argsToTemplate, componentWrapperDecorator, moduleMetadata } from '@storybook/angular'
import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog'
import { BrowserModule } from '@angular/platform-browser'
import { ButtonModule } from 'primeng/button'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
-import { PortalDialogService } from './portal-dialog.service'
+import { DialogCustomButtonsDisabled, PortalDialogService } from './portal-dialog.service'
import { ButtonDialogComponent } from '../core/components/button-dialog/button-dialog.component'
import { StorybookTranslateModule } from '../core/storybook-translate.module'
import { DialogMessageContentComponent } from '../core/components/button-dialog/dialog-message-content/dialog-message-content.component'
@@ -12,7 +12,7 @@ import { PrimeIcons } from 'primeng/api'
import { TooltipModule } from 'primeng/tooltip'
@Component({
- selector: 'ocx-ocx-button-dialog-with-portal-dialog-service',
+ selector: 'ocx-button-dialog-with-portal-dialog-service',
template: ``,
})
class ButtonDialogWithPortalDialogServiceComponent {
@@ -88,6 +88,27 @@ export const CustomData = {
},
}
+export const CustomAutofocus = {
+ render: (args: any) => ({
+ props: {
+ ...args,
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ title: 'Custom title',
+ messageOrComponent: 'Custom message',
+ primaryKey: 'Primary Button',
+ secondaryKey: 'Secondary Button',
+ extras: {
+ autoFocusButton: 'secondary',
+ },
+ },
+}
+
export const CustomDataWithExtendedButtons = {
render: (args: any) => ({
props: {
@@ -153,3 +174,97 @@ export const ComponentDisplayed = {
extras: {},
},
}
+
+@Component({
+ selector: 'ocx-my-component-to-display',
+ template: `Hello, its my component to display custom buttons
`,
+})
+class ComponentToDisplayCustomButtonsComponent implements DialogCustomButtonsDisabled, OnInit {
+ customButtonEnabled: EventEmitter<{ id: string; enabled: boolean }> = new EventEmitter()
+
+ ngOnInit(): void {
+ this.customButtonEnabled.emit({ id: 'custom1', enabled: true })
+ }
+}
+
+export const CustomButtons = {
+ render: (args: any) => ({
+ props: {
+ ...args,
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ title: 'Custom title',
+ messageOrComponent: {
+ type: ComponentToDisplayCustomButtonsComponent,
+ },
+ primaryKey: {
+ key: 'PRIMARY_KEY',
+ icon: PrimeIcons.BOOKMARK,
+ tooltipKey: 'TOOLTIP_KEY',
+ tooltipPosition: 'right',
+ },
+ secondaryKey: {
+ key: 'SECONDARY_KEY',
+ icon: PrimeIcons.SEARCH,
+ tooltipKey: 'TOOLTIP_KEY',
+ tooltipPosition: 'left',
+ },
+ extras: {
+ customButtons: [
+ {
+ id: 'custom1',
+ alignment: 'right',
+ key: 'CUSTOM_KEY',
+ icon: 'pi pi-times',
+ },
+ ],
+ },
+ },
+}
+
+export const CustomButtonsWithAutofocus = {
+ render: (args: any) => ({
+ props: {
+ ...args,
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ title: 'Custom title',
+ messageOrComponent: {
+ type: ComponentToDisplayCustomButtonsComponent,
+ },
+ primaryKey: {
+ key: 'PRIMARY_KEY',
+ icon: PrimeIcons.BOOKMARK,
+ tooltipKey: 'TOOLTIP_KEY',
+ tooltipPosition: 'right',
+ },
+ secondaryKey: {
+ key: 'SECONDARY_KEY',
+ icon: PrimeIcons.SEARCH,
+ tooltipKey: 'TOOLTIP_KEY',
+ tooltipPosition: 'left',
+ },
+ extras: {
+ customButtons: [
+ {
+ id: 'custom1',
+ alignment: 'right',
+ key: 'CUSTOM_KEY',
+ icon: 'pi pi-times',
+ },
+ ],
+ autoFocusButton: 'custom',
+ autoFocusButtonCustomId: 'custom1',
+ },
+ },
+}
diff --git a/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts b/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts
index ef47ac77..88546314 100644
--- a/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts
+++ b/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts
@@ -211,6 +211,7 @@ type Component = unknown extends T
inputs?: Record
}
+export type DialogButton = 'primary' | 'secondary' | 'custom'
export type DialogStateButtonClicked = 'primary' | 'secondary' | 'custom'
/**
@@ -225,6 +226,8 @@ export type DialogState = {
export type PortalDialogConfig = {
showXButton?: boolean
customButtons?: ButtonDialogCustomButtonDetails[]
+ autoFocusButton?: DialogButton
+ autoFocusButtonCustomId?: string
ariaLabelledBy?: string
width?: string
height?: string
@@ -250,7 +253,10 @@ export type PortalDialogConfig = {
@Injectable({ providedIn: 'any' })
export class PortalDialogService {
- constructor(private dialogService: DialogService, private translateService: TranslateService) {}
+ constructor(
+ private dialogService: DialogService,
+ private translateService: TranslateService
+ ) {}
/**
* @deprecated
@@ -443,6 +449,8 @@ export class PortalDialogService {
customButtons: dialogOptions.customButtons?.map(
(button) => this.buttonDetailsOrTranslationKey(button) as ButtonDialogCustomButtonDetails
),
+ autoFocusButton: dialogOptions.autoFocusButton,
+ autoFocusButtonCustomId: dialogOptions.autoFocusButtonCustomId,
},
componentData: componentToRender.inputs,
}
@@ -454,6 +462,7 @@ export class PortalDialogService {
data: dynamicDialogDataConfig,
closable: dialogOptions.showXButton && secondaryButtonTranslationKeyOrDetails !== undefined,
...dialogOptions,
+ focusOnShow: false,
}).onClose
})
)