@limetech/lime-elements
Version:
1 lines • 3.66 kB
JavaScript
import{r as e,h as a,H as r}from"./p-DBTJNfo7.js";import{t as l}from"./p-DVRaJQvC.js";const t=class{constructor(a){e(this,a),this.dragDirection="vertical",this.tooltipOpenDirection="left",this.language="en",this.dragHandleId="drag-handle-"+crypto.randomUUID(),this.handleClick=e=>{e.preventDefault(),e.stopPropagation()}}render(){const e=l.get("drag-handle.drag-to-reorder",this.language),t=l.get("drag-handle.drag-handle",this.language);return a(r,{key:"e83ce402fe42d2b8f457e381ace449847333ddc2"},a("button",{key:"56956b7efc28c4c72a5d2538026495055ed810ff","data-drag-handle":!0,type:"button",class:"limel-drag-handle",tabindex:-1,"aria-label":t,id:this.dragHandleId,onClick:this.handleClick},a("div",{key:"e51e6c69aeef13b6edd48f46e12e830cfdd3016c",class:"drag-icon",role:"presentation","aria-hidden":"true"},a("div",{key:"1"}),a("div",{key:"2"}),a("div",{key:"3"}),a("div",{key:"4"}),a("div",{key:"5"}),a("div",{key:"6"})),a("limel-tooltip",{key:"ca44d8fe5178e099976c41a517f95ebfff780bcf",openDirection:this.tooltipOpenDirection,elementId:this.dragHandleId,label:e})))}};t.style='@charset "UTF-8";limel-drag-handle{display:inline-flex;align-items:center;justify-content:center}button.limel-drag-handle{all:unset}button.limel-drag-handle:focus{outline:none}button.limel-drag-handle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.limel-drag-handle{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}button.limel-drag-handle:hover,button.limel-drag-handle:focus,button.limel-drag-handle:focus-visible{will-change:color, background-color, box-shadow, transform}button.limel-drag-handle:hover,button.limel-drag-handle:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-primary);background-color:transparent}button.limel-drag-handle:hover{box-shadow:var(--button-shadow-hovered)}button.limel-drag-handle:active{--limel-clickable-transform-timing-function:cubic-bezier( 0.83, -0.15, 0.49, 1.16 );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button.limel-drag-handle:hover,button.limel-drag-handle:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button.limel-drag-handle{touch-action:none;cursor:grab}button.limel-drag-handle:active{cursor:grabbing}button.limel-drag-handle:active,button.limel-drag-handle:hover{box-shadow:none !important}button.limel-drag-handle{display:inline-flex;align-items:center;justify-content:center;border-radius:0.4rem;padding:0.5rem;max-height:2.25rem;max-width:2.25rem;color:rgb(var(--contrast-900))}button.limel-drag-handle .drag-icon{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.2rem}limel-drag-handle[drag-direction=horizontal] button.limel-drag-handle .drag-icon{grid-template-columns:1fr 1fr}button.limel-drag-handle .drag-icon div{transition:transform 0.2s ease, background-color 0.2s ease;height:0.125rem;width:0.125rem;border-radius:1rem;background-color:currentColor;transform:scale(1)}.is-being-dragged button.limel-drag-handle .drag-icon div,button.limel-drag-handle:active .drag-icon div,button.limel-drag-handle:focus .drag-icon div,button.limel-drag-handle:hover .drag-icon div,button.limel-drag-handle:focus-visible .drag-icon div{background-color:var(--mdc-theme-primary);transform:scale(1.5)}';export{t as limel_drag_handle}