UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

6 lines 4.4 kB
/*! * All material copyright ESRI, All Rights Reserved, unless otherwise specified. * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details. * v1.5.0-next.4 */ import{r as t,c as i,h as a,a as n}from"./p-8789682d.js";import{c as e,d as s,u as r}from"./p-0d8324b6.js";import{c as o}from"./p-c8e46b02.js";import{d as c,c as l,o as d,a as m}from"./p-6fe1a7ee.js";import{f as h}from"./p-68f223ec.js";import"./p-7fb6664e.js";import"./p-d2aa9245.js";import"./p-9280476e.js";const p=class{constructor(a){t(this,a),this.calciteListOrderChange=i(this,"calciteListOrderChange",6),this.items=[],this.mutationObserver=o("mutation",(()=>{this.setUpSorting()})),this.dragSelector=void 0,this.group=void 0,this.handleSelector="calcite-handle",this.layout="vertical",this.disabled=!1,this.loading=!1}connectedCallback(){this.setUpSorting(),this.beginObserving(),e(this)}disconnectedCallback(){s(this),c(this),this.endObserving()}componentDidRender(){r(this)}calciteHandleNudgeNextHandler(t){this.handleNudgeEvent(t)}handleNudgeEvent(t){const{direction:i}=t.detail,a=t.composedPath().find((t=>t.matches(this.handleSelector))),n=this.items.find((i=>i.contains(a)||t.composedPath().includes(i))),e=this.items.length-1,s=this.items.indexOf(n);let r,o=!1;"up"===i?0===s?o=!0:r=s-1:s===e?r=0:s===e-1?o=!0:r=s+2,this.endObserving(),o?n.parentElement.appendChild(n):n.parentElement.insertBefore(n,this.items[r]),this.items=Array.from(this.el.children),this.beginObserving(),requestAnimationFrame((()=>h(a))),"activated"in a&&(a.activated=!0)}setUpSorting(){const{dragSelector:t,group:i,handleSelector:a}=this;this.items=Array.from(this.el.children);const n={dataIdAttr:"id",group:i,handle:a,onStart:()=>{this.endObserving(),d(this)},onEnd:()=>{m(this),this.beginObserving()},onUpdate:()=>{this.items=Array.from(this.el.children),this.calciteListOrderChange.emit()}};t&&(n.draggable=t),l(this,n)}beginObserving(){this.mutationObserver?.observe(this.el,{childList:!0,subtree:!0})}endObserving(){this.mutationObserver?.disconnect()}render(){const{layout:t}=this,i="horizontal"===t||!1;return a("div",{class:{container:!0,"container--vertical":!i,"container--horizontal":i}},a("slot",null))}get el(){return n(this)}};p.style="@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{display:flex;flex:1 1 auto}.container--vertical{flex-direction:column}.container--horizontal{flex-direction:row}";export{p as calcite_sortable_list}