121 lines
2.9 KiB
TypeScript
121 lines
2.9 KiB
TypeScript
|
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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|