@limetech/lime-elements 38.31.0 → 38.31.2

package/dist/lime-elements/p-8ea3b80a.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as r,H as a}from"./p-288f0842.js";import{t as l}from"./p-5df2361b.js";const n='@charset "UTF-8";limel-drag-handle{display:inline-flex;align-items:center;justify-content:center}button.limel-drag-handle{all:unset;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;touch-action:none;cursor:grab;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:focus{outline:none}button.limel-drag-handle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}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(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );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:active{cursor:grabbing}button.limel-drag-handle:active,button.limel-drag-handle:hover{box-shadow:none !important}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 t=class{constructor(r){e(this,r);this.dragHandleId="drag-handle-"+crypto.randomUUID();this.handleClick=e=>{e.preventDefault();e.stopPropagation()};this.dragDirection="vertical";this.tooltipOpenDirection="left";this.language="en"}render(){const e=l.get("drag-handle.drag-to-reorder",this.language);const n=l.get("drag-handle.drag-handle",this.language);return r(a,null,r("button",{"data-drag-handle":true,type:"button",class:"limel-drag-handle",tabindex:-1,"aria-label":n,id:this.dragHandleId,onClick:this.handleClick},r("div",{class:"drag-icon",role:"presentation","aria-hidden":"true"},r("div",{key:"1"}),r("div",{key:"2"}),r("div",{key:"3"}),r("div",{key:"4"}),r("div",{key:"5"}),r("div",{key:"6"})),r("limel-tooltip",{openDirection:this.tooltipOpenDirection,elementId:this.dragHandleId,label:e})))}};t.style=n;export{t as limel_drag_handle};
+//# sourceMappingURL=p-8ea3b80a.entry.js.map

package/dist/lime-elements/p-8ea3b80a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dragHandleCss","DragHandleComponent","this","dragHandleId","crypto","randomUUID","handleClick","event","preventDefault","stopPropagation","render","tooltipLabel","translate","get","language","ariaLabel","h","Host","type","class","tabindex","id","onClick","role","key","openDirection","tooltipOpenDirection","elementId","label"],"sources":["./src/components/drag-handle/drag-handle.scss?tag=limel-drag-handle","./src/components/drag-handle/drag-handle.tsx"],"sourcesContent":["@use '../../style/mixins';\n\nlimel-drag-handle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\nbutton.limel-drag-handle {\n    all: unset;\n    @include mixins.visualize-keyboard-focus();\n    @include mixins.is-flat-clickable(\n        $color--hovered: var(--mdc-theme-primary),\n        $background-color--hovered: transparent\n    );\n\n    touch-action: none;\n    cursor: grab;\n\n    &:active {\n        cursor: grabbing;\n    }\n\n    &:active,\n    &:hover {\n        box-shadow: none !important; // override is-flat-clickable styles\n    }\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 0.4rem; // like `limel-button`\n\n    padding: 0.5rem;\n    max-height: 2.25rem;\n    max-width: 2.25rem;\n\n    color: rgb(var(--contrast-900));\n\n    .drag-icon {\n        display: grid;\n        grid-template-columns: 1fr 1fr 1fr;\n        gap: 0.2rem;\n\n        limel-drag-handle[drag-direction='horizontal'] & {\n            grid-template-columns: 1fr 1fr;\n        }\n\n        div {\n            transition:\n                transform 0.2s ease,\n                background-color 0.2s ease;\n            height: 0.125rem;\n            width: 0.125rem;\n            border-radius: 1rem;\n            background-color: currentColor;\n            transform: scale(1);\n        }\n    }\n}\n\n.is-being-dragged button.limel-drag-handle,\nbutton.limel-drag-handle:active,\nbutton.limel-drag-handle:focus,\nbutton.limel-drag-handle:hover,\nbutton.limel-drag-handle:focus-visible {\n    .drag-icon div {\n        background-color: var(--mdc-theme-primary);\n        transform: scale(1.5);\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\nimport { OpenDirection } from '../menu/menu.types';\n\n/**\n * This component resembles a drag handle button, but is implemented\n * as a `private` component to allow for easier styling and future extensions.\n *\n * :::important\n * This component has its `shadow` set to `false` in order to\n * integrate well with the drag-and-drop functionality, as well as\n * providing a better accessibility.\n *\n * Keep in mind that its styles might be affected by the consumer\n * component, due to its light dom.\n * :::\n *\n * :::tip\n * It's recommended to place the drag handle on the right side of\n * the item it is meant to reorder, to ensure consistent layout\n * design conventions.\n * :::\n *\n * @exampleComponent limel-example-drag-handle-basic\n * @exampleComponent limel-example-drag-handle-horizontal\n *\n * @private\n */\n@Component({\n    tag: 'limel-drag-handle',\n    shadow: false,\n    styleUrl: 'drag-handle.scss',\n})\nexport class DragHandleComponent {\n    /**\n     * The direction in which the drag handle can be used to reorder items.\n     */\n    @Prop({ reflect: true })\n    public dragDirection: 'vertical' | 'horizontal' = 'vertical';\n\n    /**\n     * The preferred direction for the tooltip to open.\n     * Defaults to 'left', as our recommended placement for a drag handle\n     * in the UI is on the far right side of draggable elements.\n     */\n    @Prop({ reflect: true })\n    public tooltipOpenDirection: OpenDirection = 'left';\n\n    /**\n     * Language to use for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    private readonly dragHandleId = 'drag-handle-' + crypto.randomUUID();\n\n    public render() {\n        const tooltipLabel = translate.get(\n            'drag-handle.drag-to-reorder',\n            this.language\n        );\n        const ariaLabel = translate.get(\n            'drag-handle.drag-handle',\n            this.language\n        );\n\n        return (\n            <Host>\n                <button\n                    data-drag-handle\n                    type=\"button\"\n                    class=\"limel-drag-handle\"\n                    tabindex={-1}\n                    aria-label={ariaLabel}\n                    id={this.dragHandleId}\n                    onClick={this.handleClick}\n                >\n                    <div\n                        class=\"drag-icon\"\n                        role=\"presentation\"\n                        aria-hidden=\"true\"\n                    >\n                        <div key=\"1\" />\n                        <div key=\"2\" />\n                        <div key=\"3\" />\n                        <div key=\"4\" />\n                        <div key=\"5\" />\n                        <div key=\"6\" />\n                    </div>\n                    <limel-tooltip\n                        openDirection={this.tooltipOpenDirection}\n                        elementId={this.dragHandleId}\n                        label={tooltipLabel}\n                    />\n                </button>\n            </Host>\n        );\n    }\n\n    private readonly handleClick = (event: MouseEvent) => {\n        // Prevent bubbling so the parent item does not treat the pointer click as\n        // a toggle or reorder action.\n        event.preventDefault();\n        event.stopPropagation();\n    };\n}\n"],"mappings":"sFAAA,MAAMA,EAAgB,o7E,MCkCTC,EAAmB,M,yBAqBXC,KAAAC,aAAe,eAAiBC,OAAOC,aA6CvCH,KAAAI,YAAeC,IAG5BA,EAAMC,iBACND,EAAME,iBAAiB,E,mBAjEuB,W,0BAQL,O,cAMhB,I,CAItBC,SACH,MAAMC,EAAeC,EAAUC,IAC3B,8BACAX,KAAKY,UAET,MAAMC,EAAYH,EAAUC,IACxB,0BACAX,KAAKY,UAGT,OACIE,EAACC,EAAI,KACDD,EAAA,kCAEIE,KAAK,SACLC,MAAM,oBACNC,UAAW,EAAC,aACAL,EACZM,GAAInB,KAAKC,aACTmB,QAASpB,KAAKI,aAEdU,EAAA,OACIG,MAAM,YACNI,KAAK,eAAc,cACP,QAEZP,EAAA,OAAKQ,IAAI,MACTR,EAAA,OAAKQ,IAAI,MACTR,EAAA,OAAKQ,IAAI,MACTR,EAAA,OAAKQ,IAAI,MACTR,EAAA,OAAKQ,IAAI,MACTR,EAAA,OAAKQ,IAAI,OAEbR,EAAA,iBACIS,cAAevB,KAAKwB,qBACpBC,UAAWzB,KAAKC,aAChByB,MAAOjB,K"}