1import{LitElement,html,css,classMap,styleMap,utils,disableBodyScroll,enableBodyScroll,ref,createRef}from"@hh/global.js";class HHBottomSheet extends LitElement{static properties={minimumSheetHeight:{type:String},sheetHeight:{type:String},dragPosition:{},dragInProgress:{type:Boolean,attribute:"drag-in-progress",reflect:!0},isFullscreen:{type:Boolean,attribute:"is-fullscreen",reflect:!0}};$sheet=createRef();$content=createRef();constructor(){super(),this.sheetHeight="30vh",this.dragInProgress=!1,this.isFullscreen=!1,this.supportsDVH=CSS.supports("height","100dvh"),this.setHeightVariable()}connectedCallback(){super.connectedCallback(),window.addEventListener("mousemove",this.onDragMove.bind(this)),window.addEventListener("touchmove",this.onDragMove.bind(this),{passive:!1}),window.addEventListener("mouseup",this.onDragEnd.bind(this)),window.addEventListener("touchend",this.onDragEnd.bind(this)),window.addEventListener("resize",this.onResize.bind(this)),this.querySelectorAll("[allow-touch-move]").forEach(node=>{node.addEventListener("touchmove",this.onInternalTouchMove.bind(this))})}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("mousemove",this.onDragMove.bind(this)),window.removeEventListener("touchmove",this.onDragMove.bind(this),{passive:!1}),window.removeEventListener("mouseup",this.onDragEnd.bind(this)),window.removeEventListener("touchend",this.onDragEnd.bind(this)),window.removeEventListener("resize",this.onResize.bind(this)),this.querySelectorAll("[allow-touch-move]").forEach(node=>{node.removeEventListener("touchmove",this.onInternalTouchMove.bind(this))})}onInternalTouchMove(event){event.stopPropagation()}onResize(){this.setHeightVariable()}setHeightVariable(){const doc=document.documentElement;let propertyValue=`${window.innerHeight}px`;this.supportsDVH&&(propertyValue="100dvh"),doc.style.setProperty("--hh-bottom-sheet-window-height",propertyValue)}forceSheetHeight(value,setMinimumHeight){const bottomSheetPaddingTop=this.getSheetPadding(),forcedHeight=value+bottomSheetPaddingTop+"px";this.setSheetHeight(forcedHeight),setMinimumHeight&&this.setMinimumHeight(value)}setMinimumHeight(value){const bottomSheetPaddingTop=this.getSheetPadding();this.minimumSheetHeight=value+bottomSheetPaddingTop+"px",this.style.setProperty("--hh-bottom-sheet-min-height",this.minimumSheetHeight),document.body.style.setProperty("padding-bottom","var(--hh-bottom-sheet-min-height)")}getSheetPadding(){return this.$sheet.value?parseInt(window.getComputedStyle(this.$sheet.value).getPropertyValue("padding-top"),10):0}setSheetHeight(value){this.sheetHeight=value}touchPosition(event){return event.touches?event.touches[0]:event}onDragStart(event){this.startPosition=this.dragPosition=this.touchPosition(event).pageY,this.fullscreenOnStart=this.isFullscreen}onDragMove(event){if(this.dragPosition===void 0)return;event.composedPath().includes(this)&&!this.fullscreenOnStart&&event.preventDefault(),this.dragInProgress=!0;const y=this.touchPosition(event).pageY,deltaY=this.dragPosition-y;this.dragPosition=y,this.setSheetHeight(`${this.$sheet.value?.getBoundingClientRect().height+deltaY}px`)}onDragEnd(){if(this.endPosition=this.dragPosition,this.fullscreenOnStart=void 0,this.dragPosition===void 0||Math.abs(this.startPosition-this.endPosition)<20){this.startPosition=void 0,this.endPosition=void 0,this.dragPosition=void 0;return}this.dragPosition=void 0,this.dragInProgress=!1,this.startPosition>this.endPosition?this.setSheetHeight(window.innerHeight+"px"):(this.setSheetHeight(this.minimumSheetHeight||"0"),this.$content.value?.scrollTo(0,0))}render(){this.isFullscreen=parseInt(this.sheetHeight,10)>=window.innerHeight,document.body.style.setProperty("overflow",this.isFullscreen?"hidden":"");const classes={contents:!0,column:!0,fullscreen:this.isFullscreen,"not-selectable":this.dragInProgress};if(this.isFullscreen){const storedRequestAnimationFrame=window.requestAnimationFrame;window.requestAnimationFrame=()=>42,this.$content.value&&disableBodyScroll(this.$content.value),window.requestAnimationFrame=storedRequestAnimationFrame}else this.$content.value&&enableBodyScroll(this.$content.value);return utils.isTablet()?html`<div 2 id="sheet" 3 class=${classMap(classes)} 4 style=${styleMap({height:this.isFullscreen?"var(--hh-bottom-sheet-window-height)":this.sheetHeight})} 5 ${ref(this.$sheet)} 6 @touchstart=${this.onDragStart} 7 > 8 <header class="controls"> 9 <div class="draggable-area" @mousedown=${this.onDragStart}> 10 <div class="draggable-thumb"></div> 11 </div> 12 </header> 13 14 <main class="body fill column" ${ref(this.$content)}> 15 <slot></slot> 16 </main> 17 </div>`:html`<div><slot></slot></div>`}static styles=css` 18 :host { 19 box-sizing: border-box !important; 20 } 21 22 @media screen and (max-width: 989px) { 23 :host { 24 position: fixed; 25 left: 0; 26 right: 0; 27 bottom: 0; 28 z-index: var(--hh-bottom-sheet-z-index, 9); 29 } 30 31 :host([is-fullscreen]), 32 :host([drag-in-progress]) { 33 z-index: var(--hh-bottom-sheet-fullscreen-z-index, 9999); 34 } 35 36 .contents { 37 position: relative; 38 background: var(--hh-bottom-sheet-background, #fff); 39 border: var(--hh-bottom-sheet-border, solid #000); 40 border-width: var(--hh-bottom-sheet-border-width, 1px 0 0 0); 41 border-radius: var(--hh-bottom-sheet-border-radius, 0); 42 will-change: height; 43 transition: border-radius var(--hh-bottom-sheet-duration, 500ms); 44 max-height: var(--hh-bottom-sheet-window-height, 100vh); 45 height: 22vh; 46 min-height: var(--hh-bottom-sheet-min-height, 13.5rem); 47 max-width: var(--hh-bottom-sheet-max-width, 100%); 48 margin: var(--hh-bottom-sheet-margin, 0 auto); 49 box-sizing: border-box; 50 padding: var(--hh-bottom-sheet-padding, 3rem 0 0); 51 } 52 53 .contents:not(.not-selectable) { 54 transition: border-radius var(--hh-bottom-sheet-duration, 500ms), 55 height var(--hh-bottom-sheet-duration, 500ms) ease-out; 56 } 57 58 .contents.fullscreen { 59 border-radius: 0; 60 } 61 62 .draggable-area { 63 position: absolute; 64 top: 0; 65 left: 0; 66 right: 0; 67 width: var(--hh-bottom-sheet-thumb-width, 4rem); 68 margin: auto; 69 padding: 1rem; 70 cursor: grab; 71 } 72 73 .draggable-area::after { 74 content: ''; 75 position: absolute; 76 inset: -1rem; 77 } 78 79 .draggable-thumb { 80 width: inherit; 81 height: var(--hh-bottom-sheet-thumb-height, 0.1rem); 82 background: var(--hh-bottom-sheet-thumb-background, #666); 83 border-radius: 3rem; 84 } 85 86 :host(:not([is-fullscreen]):not([drag-in-progress])) .body { 87 overflow-y: hidden; 88 } 89 90 .body { 91 height: 100%; 92 overflow-y: auto; 93 overscroll-behavior: contain; 94 } 95 } 96 `}customElements.define("hh-bottom-sheet",HHBottomSheet); 97//# sourceMappingURL=/cdn/shop/t/725/assets/component-bottom-sheet.js.map?v=117922265314311227341776706983
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.