@if (header || closable) {
}
diff --git a/src/app/shared/components/dialog/light-bottomsheet.component.ts b/src/app/shared/components/dialog/light-bottomsheet.component.ts
index 5d5ce89..d36628c 100644
--- a/src/app/shared/components/dialog/light-bottomsheet.component.ts
+++ b/src/app/shared/components/dialog/light-bottomsheet.component.ts
@@ -1,27 +1,29 @@
-import { NgStyle } from '@angular/common';
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, NgStyle } from '@angular/common';
import {
Component,
ElementRef,
EventEmitter,
Inject,
Input,
+ OnChanges,
OnDestroy,
OnInit,
Output,
Renderer2,
+ SimpleChanges,
} from '@angular/core';
+import { Button } from 'primeng/button';
@Component({
selector: 'shared-light-bottomsheet',
templateUrl: './light-bottomsheet.component.html',
- imports: [NgStyle],
+ imports: [NgStyle, Button],
styles: [
`
:host {
position: fixed;
inset: 0;
- z-index: 11020;
+ z-index: 1210;
}
.light-bottomsheet-mask {
@@ -66,8 +68,6 @@ import {
.light-bottomsheet-title {
margin: 0;
- font-size: 0.95rem;
- font-weight: 600;
}
.light-bottomsheet-close {
@@ -98,11 +98,17 @@ import {
`,
],
host: {
+ '[attr.role]': '"complementary"',
+ '[attr.aria-modal]': 'true',
+ '[attr.pfocustrap]': 'true',
+ '[attr.data-pc-name]': "'drawer'",
+ '[attr.data-pc-section]': "'root'",
+ '[attr.aria-hidden]': '!visible',
'[style.display]': 'visible ? "block" : "none"',
'[style.--sheet-transition]': 'transitionOptions',
},
})
-export class SharedLightBottomsheetComponent implements OnInit, OnDestroy {
+export class SharedLightBottomsheetComponent implements OnInit, OnDestroy, OnChanges {
@Input() header = '';
@Input() visible = false;
@Output() visibleChange = new EventEmitter
();
@@ -116,6 +122,7 @@ export class SharedLightBottomsheetComponent implements OnInit, OnDestroy {
@Output() onHide = new EventEmitter();
private originalParent: Node | null = null;
+ private readonly defaultDrawerZIndex = 1102;
constructor(
private readonly elementRef: ElementRef,
@@ -127,9 +134,20 @@ export class SharedLightBottomsheetComponent implements OnInit, OnDestroy {
const host = this.elementRef.nativeElement;
this.originalParent = host.parentNode;
this.renderer.appendChild(this.document.body, host);
+ this.syncZIndex();
+ }
+
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes['visible'] && this.visible) {
+ this.syncZIndex();
+ }
}
ngOnDestroy() {
+ this.removeDrawer();
+ }
+
+ private removeDrawer() {
const host = this.elementRef.nativeElement;
if (this.originalParent) {
this.renderer.appendChild(this.originalParent, host);
@@ -139,6 +157,9 @@ export class SharedLightBottomsheetComponent implements OnInit, OnDestroy {
onVisibilityChange(nextValue: boolean) {
this.visible = nextValue;
this.visibleChange.emit(nextValue);
+ if (nextValue) {
+ this.syncZIndex();
+ }
if (!nextValue) {
this.onHide.emit();
}
@@ -149,4 +170,19 @@ export class SharedLightBottomsheetComponent implements OnInit, OnDestroy {
this.onVisibilityChange(false);
}
}
+
+ private syncZIndex() {
+ const host = this.elementRef.nativeElement;
+ const siblingDrawers = Array.from(
+ this.document.body.querySelectorAll('.p-drawer'),
+ ) as HTMLElement[];
+ const drawerZIndexes = siblingDrawers
+ .map((drawer) => Number.parseInt(drawer.style.zIndex || '0', 10))
+ .filter((zIndex) => Number.isFinite(zIndex) && zIndex > 0);
+
+ const maxDrawerZIndex = drawerZIndexes.length
+ ? Math.max(...drawerZIndexes)
+ : this.defaultDrawerZIndex;
+ this.renderer.setStyle(host, 'z-index', `${maxDrawerZIndex + 1}`);
+ }
}
diff --git a/src/app/shared/localEnum/select.component.html b/src/app/shared/localEnum/select.component.html
index c2e543d..3bb3790 100644
--- a/src/app/shared/localEnum/select.component.html
+++ b/src/app/shared/localEnum/select.component.html
@@ -7,6 +7,7 @@
[formControl]="control"
[showClear]="showClear"
[filter]="true"
+ [overlayOptions]="overlayOptions()"
appendTo="body"
/>
diff --git a/src/app/shared/localEnum/select.component.ts b/src/app/shared/localEnum/select.component.ts
index 827f1bd..9f7a805 100644
--- a/src/app/shared/localEnum/select.component.ts
+++ b/src/app/shared/localEnum/select.component.ts
@@ -1,5 +1,6 @@
import { UikitFieldComponent } from '@/uikit';
-import { Component, computed, Input } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Component, Inject, computed, Input } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { Select } from 'primeng/select';
import { Observable } from 'rxjs';
@@ -16,6 +17,10 @@ export class EnumSelectComponent extends AbstractSelectComponent this.customLabel ?? LOCAL_ENUMS[this.type].label);
override getDataService() {
@@ -27,4 +32,20 @@ export class EnumSelectComponent extends AbstractSelectComponent Number.parseInt(drawer.style.zIndex || '0', 10))
+ .filter((zIndex) => Number.isFinite(zIndex) && zIndex > 0);
+
+ return zIndexes.length ? Math.max(...zIndexes) + 2 : 1000;
+ }
}
diff --git a/src/assets/rtlSupport.scss b/src/assets/rtlSupport.scss
index 2c3fcce..a425d48 100644
--- a/src/assets/rtlSupport.scss
+++ b/src/assets/rtlSupport.scss
@@ -48,11 +48,12 @@ input.p-inputtext {
margin-inline-end: 0.5rem;
}
-.p-inputgroup > .p-component.hasSuffix:first-child {
+.p-inputgroup > .p-component.hasSuffix:first-child,
+.p-inputgroup > .p-component > .hasSuffix {
border-start-start-radius: 0 !important;
border-end-start-radius: 0 !important;
- border-end-end-radius: var(--p-inputgroup-addon-border-radius);
- border-start-end-radius: var(--p-inputgroup-addon-border-radius);
+ border-end-end-radius: var(--p-inputgroup-addon-border-radius) !important;
+ border-start-end-radius: var(--p-inputgroup-addon-border-radius) !important;
}
.p-tablist {