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>
@@ -0,0 +1,120 @@
+import { NgStyle } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'shared-light-bottomsheet',
+  templateUrl: './light-bottomsheet.component.html',
+  imports: [NgStyle],
+  styles: [
+    `
+      :host {
+        position: fixed;
+        inset: 0;
+        z-index: 11020;
+      }
+
+      .light-bottomsheet-mask {
+        position: absolute;
+        inset: 0;
+        background: rgba(15, 23, 42, 0.22);
+        will-change: opacity;
+        animation: sheetFadeIn var(--sheet-transition, 130ms cubic-bezier(0.2, 0, 0, 1));
+      }
+
+      .light-bottomsheet-panel {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        max-height: 80svh;
+        background: var(--surface-card, #fff);
+        border-radius: 12px 12px 0 0;
+        box-shadow: none;
+        transform: translate3d(0, 0, 0);
+        will-change: transform;
+        backface-visibility: hidden;
+        animation: sheetSlideUp var(--sheet-transition, 130ms cubic-bezier(0.2, 0, 0, 1));
+        overflow: hidden;
+      }
+
+      .light-bottomsheet-content {
+        max-height: 80svh;
+        overflow: auto;
+        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
+        -webkit-overflow-scrolling: touch;
+        overscroll-behavior: contain;
+      }
+
+      .light-bottomsheet-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.75rem;
+        padding: 0.75rem 1rem;
+      }
+
+      .light-bottomsheet-title {
+        margin: 0;
+        font-size: 0.95rem;
+        font-weight: 600;
+      }
+
+      .light-bottomsheet-close {
+        border: 0;
+        background: transparent;
+        padding: 0.25rem;
+        line-height: 1;
+        font-size: 1.25rem;
+      }
+
+      @keyframes sheetSlideUp {
+        from {
+          transform: translate3d(0, 100%, 0);
+        }
+        to {
+          transform: translate3d(0, 0, 0);
+        }
+      }
+
+      @keyframes sheetFadeIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    `,
+  ],
+  host: {
+    '[style.display]': 'visible ? "block" : "none"',
+    '[style.--sheet-transition]': 'transitionOptions',
+  },
+})
+export class SharedLightBottomsheetComponent {
+  @Input() header = '';
+  @Input() visible = false;
+  @Output() visibleChange = new EventEmitter<boolean>();
+
+  @Input() modal = true;
+  @Input() closable = true;
+  @Input() style: Record<string, string> | undefined;
+  @Input() mobileDrawerHeight = '80svh';
+  @Input() transitionOptions = '130ms cubic-bezier(0.2, 0, 0, 1)';
+
+  @Output() onHide = new EventEmitter<any>();
+
+  onVisibilityChange(nextValue: boolean) {
+    this.visible = nextValue;
+    this.visibleChange.emit(nextValue);
+    if (!nextValue) {
+      this.onHide.emit();
+    }
+  }
+
+  onMaskClick() {
+    if (this.modal && this.closable) {
+      this.onVisibilityChange(false);
+    }
+  }
+}