@limetech/lime-elements 40.12.3 → 40.13.0

package/dist/esm/limel-drag-handle.entry.js

@@ -1,40 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-BU9IJqli.js';
-import { t as translations } from './translations-UrIr-5_D.js';
-import './language-ChagAaNf.js';
-
-const dragHandleCss = () => `@charset "UTF-8";limel-drag-handle{display:inline-flex;align-items:center;justify-content:center}button.limel-drag-handle{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit}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) {
-        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.get('drag-handle.drag-to-reorder', this.language);
-        const ariaLabel = translations.get('drag-handle.drag-handle', this.language);
-        return (h(Host, { key: '7ec003311284f01a8ab6fcfa681b859d80c751c9' }, h("button", { key: '6c8eecad5a1ee902f8cde0d582a7f61881186516', "data-drag-handle": true, type: "button", class: "limel-drag-handle", tabindex: -1, "aria-label": ariaLabel, id: this.dragHandleId, onClick: this.handleClick }, h("div", { key: 'ff1b68465914660147a3813950ca89e8aefd3579', class: "drag-icon", role: "presentation", "aria-hidden": "true" }, h("div", { key: "1" }), h("div", { key: "2" }), h("div", { key: "3" }), h("div", { key: "4" }), h("div", { key: "5" }), h("div", { key: "6" })), h("limel-tooltip", { key: '6e4858827eaf55787d5a30a1842c4ec8f106b158', openDirection: this.tooltipOpenDirection, elementId: this.dragHandleId, label: tooltipLabel }))));
-    }
-};
-DragHandleComponent.style = dragHandleCss();
-
-export { DragHandleComponent as limel_drag_handle };