create light bottomsheet drawer for gold payload

2026-05-13 10:39:43 +03:30
parent ebd2aa46dc
commit d9e74da0e2
9 changed files with 216 additions and 84 deletions
@@ -0,0 +1,25 @@
+<div class="light-bottomsheet-mask" (click)="onMaskClick()"></div>
+
+<section
+  class="light-bottomsheet-panel"
+  role="dialog"
+  aria-modal="true"
+  [attr.aria-hidden]="!visible"
+  [ngStyle]="style || { 'max-height': mobileDrawerHeight, height: 'auto' }"
+>
+  <div class="light-bottomsheet-content">
+    @if (header || closable) {
+      <header class="light-bottomsheet-header">
+        <h3 class="light-bottomsheet-title">{{ header }}</h3>
+        @if (closable) {
+          <button type="button" class="light-bottomsheet-close" (click)="onVisibilityChange(false)" aria-label="Close">
+            ×
+          </button>
+        }
+      </header>
+    }
+    <div class="p-4">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</section>