@limetech/lime-elements
Version:
42 lines (37 loc) • 4.78 kB
JavaScript
'use strict';
var index = require('./index-BjHIBY-I.js');
var translations = require('./translations-Bu_0fli7.js');
const dragHandleCss = () => ` "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)}`;
const DragHandleComponent = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/**
* The direction in which the drag handle can be used to reorder items.
*/
this.dragDirection = 'vertical';
/**
* The preferred direction for the tooltip to open.
* Defaults to 'left', as our recommended placement for a drag handle
* in the UI is on the far right side of draggable elements.
*/
this.tooltipOpenDirection = 'left';
/**
* Language to use for translations.
*/
this.language = 'en';
this.dragHandleId = 'drag-handle-' + crypto.randomUUID();
this.handleClick = (event) => {
// Prevent bubbling so the parent item does not treat the pointer click as
// a toggle or reorder action.
event.preventDefault();
event.stopPropagation();
};
}
render() {
const tooltipLabel = translations.translate.get('drag-handle.drag-to-reorder', this.language);
const ariaLabel = translations.translate.get('drag-handle.drag-handle', this.language);
return (index.h(index.Host, { key: 'e83ce402fe42d2b8f457e381ace449847333ddc2' }, index.h("button", { key: '56956b7efc28c4c72a5d2538026495055ed810ff', "data-drag-handle": true, type: "button", class: "limel-drag-handle", tabindex: -1, "aria-label": ariaLabel, id: this.dragHandleId, onClick: this.handleClick }, index.h("div", { key: 'e51e6c69aeef13b6edd48f46e12e830cfdd3016c', class: "drag-icon", role: "presentation", "aria-hidden": "true" }, index.h("div", { key: "1" }), index.h("div", { key: "2" }), index.h("div", { key: "3" }), index.h("div", { key: "4" }), index.h("div", { key: "5" }), index.h("div", { key: "6" })), index.h("limel-tooltip", { key: 'ca44d8fe5178e099976c41a517f95ebfff780bcf', openDirection: this.tooltipOpenDirection, elementId: this.dragHandleId, label: tooltipLabel }))));
}
};
DragHandleComponent.style = dragHandleCss();
exports.limel_drag_handle = DragHandleComponent;