@limetech/lime-elements
Version:
146 lines (145 loc) • 6.24 kB
JavaScript
import { h, Host } from "@stencil/core";
import translate from "../../global/translations";
/**
* This component resembles a drag handle button, but is implemented
* as a `private` component to allow for easier styling and future extensions.
*
* :::important
* This component has its `shadow` set to `false` in order to
* integrate well with the drag-and-drop functionality, as well as
* providing a better accessibility.
*
* Keep in mind that its styles might be affected by the consumer
* component, due to its light dom.
* :::
*
* :::tip
* It's recommended to place the drag handle on the right side of
* the item it is meant to reorder, to ensure consistent layout
* design conventions.
* :::
*
* @exampleComponent limel-example-drag-handle-basic
* @exampleComponent limel-example-drag-handle-horizontal
*
* @private
*/
export class DragHandleComponent {
constructor() {
/**
* 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 = translate.get('drag-handle.drag-to-reorder', this.language);
const ariaLabel = translate.get('drag-handle.drag-handle', this.language);
return (h(Host, { key: 'e83ce402fe42d2b8f457e381ace449847333ddc2' }, 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 }, h("div", { key: 'e51e6c69aeef13b6edd48f46e12e830cfdd3016c', 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: 'ca44d8fe5178e099976c41a517f95ebfff780bcf', openDirection: this.tooltipOpenDirection, elementId: this.dragHandleId, label: tooltipLabel }))));
}
static get is() { return "limel-drag-handle"; }
static get originalStyleUrls() {
return {
"$": ["drag-handle.scss"]
};
}
static get styleUrls() {
return {
"$": ["drag-handle.css"]
};
}
static get properties() {
return {
"dragDirection": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'vertical' | 'horizontal'",
"resolved": "\"horizontal\" | \"vertical\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The direction in which the drag handle can be used to reorder items."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "drag-direction",
"defaultValue": "'vertical'"
},
"tooltipOpenDirection": {
"type": "string",
"mutable": false,
"complexType": {
"original": "OpenDirection",
"resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
"references": {
"OpenDirection": {
"location": "import",
"path": "../menu/menu.types",
"id": "src/components/menu/menu.types.ts::OpenDirection",
"referenceLocation": "OpenDirection"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The preferred direction for the tooltip to open.\nDefaults to 'left', as our recommended placement for a drag handle\nin the UI is on the far right side of draggable elements."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "tooltip-open-direction",
"defaultValue": "'left'"
},
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Languages",
"resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
"references": {
"Languages": {
"location": "import",
"path": "../date-picker/date.types",
"id": "src/components/date-picker/date.types.ts::Languages",
"referenceLocation": "Languages"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Language to use for translations."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "language",
"defaultValue": "'en'"
}
};
}
}