diff --git a/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-side-panel--popover.yaml b/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-side-panel--popover.yaml index c2759857ce..2d96bc7122 100644 --- a/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-side-panel--popover.yaml +++ b/playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-side-panel--popover.yaml @@ -1,3 +1,11 @@ +- banner: + - link "Siemens logo": + - /url: "#/" + - text: Application name + - button "Tenant 1" + - button "4 Notifications" + - button "Support" + - button "John Doe" - paragraph: Notifications - menubar: - menuitem "Mark all as read" @@ -77,12 +85,4 @@ - text: Two months ago Security audit completed Annual security review has been completed successfully. All access controls and permissions have been verified and updated. - button "Read" - button "Archive" -- button "Delete" -- banner: - - link "Siemens logo": - - /url: "#/" - - text: Application name - - button "Tenant 1" - - button "4 Notifications" - - button "Support" - - button "John Doe" \ No newline at end of file +- button "Delete" \ No newline at end of file diff --git a/playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--large.yaml b/playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--large.yaml index 8743f85583..cf261833fc 100644 --- a/playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--large.yaml +++ b/playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--large.yaml @@ -1,6 +1,5 @@ - link "Jump to Main content" - link "Jump to Navigation" -- button "Toggle" - banner: - link "Siemens logo": - /url: "#/" @@ -39,4 +38,5 @@ - checkbox "Actions" [checked] - text: Actions - checkbox "Toolbar" [checked] - - text: Toolbar \ No newline at end of file + - text: Toolbar +- button "Toggle" \ No newline at end of file diff --git a/playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--small-nav-indented.yaml b/playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--small-nav-indented.yaml index 049a7a1fe8..f784b12dae 100644 --- a/playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--small-nav-indented.yaml +++ b/playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--small-nav-indented.yaml @@ -1,6 +1,5 @@ - link "Jump to Main content" - link "Jump to Navigation" -- button "Toggle" - banner: - link "Siemens logo": - /url: "#/" @@ -38,4 +37,5 @@ - checkbox "Actions" [checked] - text: Actions - checkbox "Toolbar" [checked] - - text: Toolbar \ No newline at end of file + - text: Toolbar +- button "Toggle" \ No newline at end of file diff --git a/playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--small-title-indented.yaml b/playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--small-title-indented.yaml index 4b8bfc261d..bfceceeaa1 100644 --- a/playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--small-title-indented.yaml +++ b/playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--small-title-indented.yaml @@ -1,6 +1,5 @@ - link "Jump to Main content" - link "Jump to Navigation" -- button "Toggle" - banner: - link "Siemens logo": - /url: "#/" @@ -27,4 +26,5 @@ - checkbox "Actions" [checked] - text: Actions - checkbox "Toolbar" [checked] - - text: Toolbar \ No newline at end of file + - text: Toolbar +- button "Toggle" \ No newline at end of file diff --git a/playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--small.yaml b/playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--small.yaml index 3d51228ede..c92c55673c 100644 --- a/playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--small.yaml +++ b/playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--small.yaml @@ -1,6 +1,5 @@ - link "Jump to Main content" - link "Jump to Navigation" -- button "Toggle" - banner: - link "Siemens logo": - /url: "#/" @@ -40,4 +39,5 @@ - checkbox "Actions" [checked] - text: Actions - checkbox "Toolbar" [checked] - - text: Toolbar \ No newline at end of file + - text: Toolbar +- button "Toggle" \ No newline at end of file diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop.yaml b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop.yaml index c276b792b6..ed5efc391e 100644 --- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop.yaml +++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop.yaml @@ -1,12 +1,3 @@ -- paragraph: Title -- button "Enter fullscreen" -- button "Close" -- button "Hey there" [expanded] -- region "Hey there": And here we have some content -- button "Another one" -- region "Another one" -- button "Number three" -- region "Number three" - banner: - link "Siemens logo": - /url: "#/" @@ -55,4 +46,13 @@ - code: disableBackdrop - text: input. - checkbox "disableBackdrop" [checked] -- text: disableBackdrop \ No newline at end of file +- text: disableBackdrop +- paragraph: Title +- button "Enter fullscreen" +- button "Close" +- button "Hey there" [expanded] +- region "Hey there": And here we have some content +- button "Another one" +- region "Another one" +- button "Number three" +- region "Number three" \ No newline at end of file diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode.yaml b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode.yaml index 8227d19b68..2d4b62ff4f 100644 --- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode.yaml +++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode.yaml @@ -1,12 +1,3 @@ -- paragraph: Title -- button "Enter fullscreen" -- button "Close" -- button "Hey there" [expanded] -- region "Hey there": And here we have some content -- button "Another one" -- region "Another one" -- button "Number three" -- region "Number three" - banner: - link "Siemens logo": - /url: "#/" @@ -55,4 +46,13 @@ - code: disableBackdrop - text: input. - checkbox "disableBackdrop" -- text: disableBackdrop \ No newline at end of file +- text: disableBackdrop +- paragraph: Title +- button "Enter fullscreen" +- button "Close" +- button "Hey there" [expanded] +- region "Hey there": And here we have some content +- button "Another one" +- region "Another one" +- button "Number three" +- region "Number three" \ No newline at end of file diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode.yaml b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode.yaml index 41861d7652..b86543b3a5 100644 --- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode.yaml +++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode.yaml @@ -1,12 +1,3 @@ -- paragraph: Title -- button "Enter fullscreen" -- button "Close" -- button "Hey there" [expanded] -- region "Hey there": And here we have some content -- button "Another one" -- region "Another one" -- button "Number three" -- region "Number three" - banner: - link "Siemens logo": - /url: "#/" @@ -55,4 +46,13 @@ - code: disableBackdrop - text: input. - checkbox "disableBackdrop" -- text: disableBackdrop \ No newline at end of file +- text: disableBackdrop +- paragraph: Title +- button "Enter fullscreen" +- button "Close" +- button "Hey there" [expanded] +- region "Hey there": And here we have some content +- button "Another one" +- region "Another one" +- button "Number three" +- region "Number three" \ No newline at end of file diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--closed.yaml b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--closed.yaml index 00124df9d0..598825c820 100644 --- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--closed.yaml +++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--closed.yaml @@ -1,9 +1,3 @@ -- button "Toggle" -- button "Out of Service" -- button "Event source active, ack" -- button "Properties" -- button "Documents" -- button "Graphics" - banner: - link "Siemens logo": - /url: "#/" @@ -46,3 +40,10 @@ - text: Expanded width for complex forms and content. - code: "Extended (Responsive):" - text: Adaptive width scaling from mobile full-width to desktop 912px max. +- button "Toggle" +- button "Properties" +- button "Documents" +- button "Graphics" +- button "Out of Service" +- button "•" [disabled] +- button "Event source active, ack" \ No newline at end of file diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open.yaml b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open.yaml index 05ac3ea691..d4593545d9 100644 --- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open.yaml +++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open.yaml @@ -1,19 +1,3 @@ -- paragraph: Cooling coil -- menubar: - - menuitem "Path" - - menuitem "Edit" - - menuitem "Toggle" -- button "Enter fullscreen" -- button "Toggle" -- button "Out of Service" -- button "Event source active, ack" -- textbox "Search..." -- button "Properties 5" [expanded] -- region "Properties 5": And here we have some content -- button "Documents" -- region "Documents" -- button "Graphics" -- region "Graphics" - banner: - link "Siemens logo": - /url: "#/" @@ -56,3 +40,20 @@ - text: Expanded width for complex forms and content. - code: "Extended (Responsive):" - text: Adaptive width scaling from mobile full-width to desktop 912px max. +- paragraph: Cooling coil +- menubar: + - menuitem "Path" + - menuitem "Edit" + - menuitem "Toggle" +- button "Enter fullscreen" +- button "Toggle" [expanded] +- textbox "Search..." +- button "Properties 5" [expanded] +- region "Properties 5": And here we have some content +- button "Documents" +- region "Documents" +- button "Graphics" +- region "Graphics" +- button "Out of Service" +- button "•" [disabled] +- button "Event source active, ack" \ No newline at end of file diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible-legacy-status-actions--legacy-closed.yaml b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible-legacy-status-actions--legacy-closed.yaml index bace2ceb09..4587a401e5 100644 --- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible-legacy-status-actions--legacy-closed.yaml +++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible-legacy-status-actions--legacy-closed.yaml @@ -1,11 +1,3 @@ -- button "Toggle" -- link "Out of Service": - - /url: "" -- link "Event source active, ack": - - /url: "" -- button "Properties" -- button "Documents" -- button "Graphics" - banner: - link "Siemens logo": - /url: "#/" @@ -47,4 +39,12 @@ - code: "Wide (500px):" - text: Expanded width for complex forms and content. - code: "Extended (Responsive):" - - text: Adaptive width scaling from mobile full-width to desktop 912px max. \ No newline at end of file + - text: Adaptive width scaling from mobile full-width to desktop 912px max. +- button "Toggle" +- link "Out of Service": + - /url: "" +- link "Event source active, ack": + - /url: "" +- button "Properties" +- button "Documents" +- button "Graphics" \ No newline at end of file diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible-legacy-status-actions--legacy-open.yaml b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible-legacy-status-actions--legacy-open.yaml index a021ba4e62..3417757152 100644 --- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible-legacy-status-actions--legacy-open.yaml +++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible-legacy-status-actions--legacy-open.yaml @@ -1,21 +1,3 @@ -- paragraph: Cooling coil -- menubar: - - menuitem "Path" - - menuitem "Edit" - - menuitem "Toggle" -- button "Enter fullscreen" -- button "Toggle" -- link "Out of Service": - - /url: "" -- link "Event source active, ack": - - /url: "" -- textbox "Search..." -- button "Properties 5" [expanded] -- region "Properties 5": And here we have some content -- button "Documents" -- region "Documents" -- button "Graphics" -- region "Graphics" - banner: - link "Siemens logo": - /url: "#/" @@ -57,4 +39,22 @@ - code: "Wide (500px):" - text: Expanded width for complex forms and content. - code: "Extended (Responsive):" - - text: Adaptive width scaling from mobile full-width to desktop 912px max. \ No newline at end of file + - text: Adaptive width scaling from mobile full-width to desktop 912px max. +- paragraph: Cooling coil +- menubar: + - menuitem "Path" + - menuitem "Edit" + - menuitem "Toggle" +- button "Enter fullscreen" +- button "Toggle" [expanded] +- link "Out of Service": + - /url: "" +- link "Event source active, ack": + - /url: "" +- textbox "Search..." +- button "Properties 5" [expanded] +- region "Properties 5": And here we have some content +- button "Documents" +- region "Documents" +- button "Graphics" +- region "Graphics" \ No newline at end of file diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel.yaml b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel.yaml index 642b41aaf0..97c4e961ca 100644 --- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel.yaml +++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel.yaml @@ -1,11 +1,3 @@ -- paragraph: Title -- button "Close" -- button "Hey there" [expanded] -- region "Hey there": And here we have some content -- button "Another one" -- region "Another one" -- button "Number three" -- region "Number three" - banner: - heading "Side panel" [level=1] - button "Layout" @@ -52,4 +44,12 @@ - code: disableBackdrop - text: input. - checkbox "disableBackdrop" -- text: disableBackdrop \ No newline at end of file +- text: disableBackdrop +- paragraph: Title +- button "Close" +- button "Hey there" [expanded] +- region "Hey there": And here we have some content +- button "Another one" +- region "Another one" +- button "Number three" +- region "Number three" \ No newline at end of file diff --git a/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--first-step.yaml b/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--first-step.yaml index 8c58dc0aa7..fedd8b0342 100644 --- a/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--first-step.yaml +++ b/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--first-step.yaml @@ -18,10 +18,6 @@ - link "Test Coverage": - /url: "#/viewer/viewer/coverage" - main: - - button "Toggle" - - button "Properties" - - button "Documents" - - button "Graphics" - text: /4 Security \d+ Update \d+ Information/ - navigation "Breadcrumbs": - list: @@ -41,6 +37,10 @@ - textbox "Search" - button "Toolbar item" - text: Placeholder for the content of the page, using the fixed height layout. + - button "Toggle" + - button "Properties" + - button "Documents" + - button "Graphics" - text: Status bar Page title Thank you - dialog "Status bar": - text: 1 of 7 Status bar diff --git a/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--last-step.yaml b/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--last-step.yaml index 64c208654f..11b0d46523 100644 --- a/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--last-step.yaml +++ b/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--last-step.yaml @@ -18,10 +18,6 @@ - link "Test Coverage": - /url: "#/viewer/viewer/coverage" - main: - - button "Toggle" - - button "Properties" - - button "Documents" - - button "Graphics" - text: /4 Security \d+ Update \d+ Information/ - navigation "Breadcrumbs": - list: @@ -41,6 +37,10 @@ - textbox "Search" - button "Toolbar item" - text: Placeholder for the content of the page, using the fixed height layout. + - button "Toggle" + - button "Properties" + - button "Documents" + - button "Graphics" - text: Status bar Page title Thank you - dialog "Tour completed": - text: 7 of 7 Tour completed diff --git a/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--open-menu.yaml b/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--open-menu.yaml index dff347dc5c..aa2762f420 100644 --- a/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--open-menu.yaml +++ b/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--open-menu.yaml @@ -24,10 +24,6 @@ - link "Test Coverage": - /url: "#/viewer/viewer/coverage" - main: - - button "Toggle" - - button "Properties" - - button "Documents" - - button "Graphics" - text: /4 Security \d+ Update \d+ Information/ - navigation "Breadcrumbs": - list: @@ -47,6 +43,10 @@ - textbox "Search" - button "Toolbar item" - text: Placeholder for the content of the page, using the fixed height layout. + - button "Toggle" + - button "Properties" + - button "Documents" + - button "Graphics" - text: Status bar Page title Thank you - dialog "Help menu": - text: 6 of 7 Help menu diff --git a/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--second-step.yaml b/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--second-step.yaml index 7110cb11da..642ee16836 100644 --- a/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--second-step.yaml +++ b/playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--second-step.yaml @@ -18,10 +18,6 @@ - link "Test Coverage": - /url: "#/viewer/viewer/coverage" - main: - - button "Toggle" - - button "Properties" - - button "Documents" - - button "Graphics" - text: /4 Security \d+ Update \d+ Information/ - navigation "Breadcrumbs": - list: @@ -41,6 +37,10 @@ - textbox "Search" - button "Toolbar item" - text: Placeholder for the content of the page, using the fixed height layout. + - button "Toggle" + - button "Properties" + - button "Documents" + - button "Graphics" - text: Status bar Page title Thank you - dialog "Page title": - text: 2 of 7 Page title diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-electron-titlebar--si-fixed-height-layout-side-panel.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-electron-titlebar--si-fixed-height-layout-side-panel.yaml index 775a36cf08..39e3a9aa16 100644 --- a/playwright/snapshots/static.spec.ts-snapshots/si-electron-titlebar--si-fixed-height-layout-side-panel.yaml +++ b/playwright/snapshots/static.spec.ts-snapshots/si-electron-titlebar--si-fixed-height-layout-side-panel.yaml @@ -23,10 +23,6 @@ - link "Test Coverage": - /url: "#/viewer/viewer/coverage" - main: - - button "Toggle" - - button "Properties" - - button "Documents" - - button "Graphics" - text: /4 Emergency \d+ Trouble \d+ Success/ - button "Expand" - heading "Here is a title" [level=2] @@ -80,4 +76,8 @@ - text: Porta ac consectetur ac - listitem: - status "user in status danger" - - text: Vestibulum at eros \ No newline at end of file + - text: Vestibulum at eros + - button "Toggle" + - button "Properties" + - button "Documents" + - button "Graphics" \ No newline at end of file diff --git a/projects/element-ng/side-panel/si-side-panel-actions.component.scss b/projects/element-ng/side-panel/si-side-panel-actions.component.scss index faa3fe3052..8c9b365a80 100644 --- a/projects/element-ng/side-panel/si-side-panel-actions.component.scss +++ b/projects/element-ng/side-panel/si-side-panel-actions.component.scss @@ -6,6 +6,7 @@ align-items: center; justify-content: space-between; padding-inline: map.get(variables.$spacers, 6); + order: -1; } :host-context(.collapsible .collapsed) { diff --git a/projects/element-ng/side-panel/si-side-panel-content.component.html b/projects/element-ng/side-panel/si-side-panel-content.component.html index 4957690f7a..ebaf6cbf97 100644 --- a/projects/element-ng/side-panel/si-side-panel-content.component.html +++ b/projects/element-ng/side-panel/si-side-panel-content.component.html @@ -119,7 +119,6 @@ } } - @if (searchable() && focusable()) {
} + diff --git a/projects/element-ng/side-panel/si-side-panel-content.component.scss b/projects/element-ng/side-panel/si-side-panel-content.component.scss index 2c66230096..078fe15bef 100644 --- a/projects/element-ng/side-panel/si-side-panel-content.component.scss +++ b/projects/element-ng/side-panel/si-side-panel-content.component.scss @@ -86,6 +86,10 @@ align-items: center; } +.rpanel-statusactions { + order: -1; +} + .rpanel-header { justify-content: space-between; } diff --git a/projects/element-ng/side-panel/si-side-panel.component.html b/projects/element-ng/side-panel/si-side-panel.component.html index 310864e284..95097fd321 100644 --- a/projects/element-ng/side-panel/si-side-panel.component.html +++ b/projects/element-ng/side-panel/si-side-panel.component.html @@ -1,7 +1,17 @@ @if (showBackdrop()) {
} -
+
+ +
+
@@ -10,6 +20,3 @@
-
- -
diff --git a/projects/element-ng/side-panel/si-side-panel.component.ts b/projects/element-ng/side-panel/si-side-panel.component.ts index e3e148502d..ba886aa1d9 100644 --- a/projects/element-ng/side-panel/si-side-panel.component.ts +++ b/projects/element-ng/side-panel/si-side-panel.component.ts @@ -2,6 +2,7 @@ * Copyright (c) Siemens 2016 - 2026 * SPDX-License-Identifier: MIT */ +import { CdkTrapFocus } from '@angular/cdk/a11y'; import { CdkPortalOutlet, Portal, PortalModule } from '@angular/cdk/portal'; import { isPlatformBrowser } from '@angular/common'; import { @@ -41,7 +42,7 @@ import { SidePanelMode, SidePanelSize } from './side-panel.model'; @Component({ selector: 'si-side-panel', - imports: [PortalModule], + imports: [CdkTrapFocus, PortalModule], templateUrl: './si-side-panel.component.html', styleUrl: './si-side-panel.component.scss', host: { @@ -163,6 +164,10 @@ export class SiSidePanelComponent implements OnInit, OnDestroy, OnChanges { protected readonly showBackdrop = computed( () => !this.disableBackdrop() && this.isOverMode() && !this.isCollapsed() ); + protected readonly shouldTrapFocus = computed(() => this.isOverMode() && !this.isCollapsed()); + protected readonly sidePanelInert = computed( + () => this.isOverMode() && this.isCollapsed() && !this.collapsible() + ); protected readonly isXs = signal(false); protected readonly isSm = signal(false); protected readonly isMd = signal(true);