@genexus/genexus-ide-ui 0.0.93 → 0.0.94

package/dist/genexus-ide-ui/p-3d131f61.entry.js

@@ -0,0 +1,1428 @@
+import { f as t, h as e, r as i, c as s, g as n, H as o } from "./p-d8a08b43.js";
+
+import { i as a, a as r, t as h } from "./p-e408d7b7.js";
+
+import { g as c, R as l, C as d, P as f, S as u, a as p, D as b, b as m, c as w, d as v, e as g, B as y, I as k, f as x, h as M, i as W, T as z } from "./p-8dcfc193.js";
+
+import { r as I, i as _ } from "./p-5f671d1f.js";
+
+import { f as C } from "./p-44b0b051.js";
+
+// Custom vars
+const E = "--ch-flexible-layout-drop-area-block-start";
+
+const S = "--ch-flexible-layout-drop-area-block-end";
+
+const T = "--ch-flexible-layout-drop-area-inline-start";
+
+const A = "--ch-flexible-layout-drop-area-inline-end";
+
+/**
+ * If the mouse position is in the interval [0%, 30%] the droppable area should
+ * be displayed at the START position with half the size.
+ */ const j = 30;
+
+ // In percentage
+/**
+ * If the mouse position is in the interval [70%, 100%] the droppable area
+ * should be displayed at the END position with half the size.
+ */ const $ = 100 - j;
+
+ // In percentage
+const P = .5;
+
+const setProperty$1 = (t, e, i) => t.style.setProperty(e, `${i}px`);
+
+const D = {
+  "block-start": (t, e) => [ e.top, t.height - (e.top + e.height * P), e.left, t.width - (e.left + e.width) ],
+  "block-end": (t, e) => [ e.top + e.height * P, t.height - (e.top + e.height), e.left, t.width - (e.left + e.width) ],
+  "inline-start": (t, e) => [ e.top, t.height - (e.top + e.height), e.left, t.width - (e.left + e.width * P) ],
+  "inline-end": (t, e) => [ e.top, t.height - (e.top + e.height), e.left + e.width * P, t.width - (e.left + e.width) ],
+  center: (t, e) => [ e.top, t.height - (e.top + e.height), e.left, t.width - (e.left + e.width) ]
+};
+
+let L;
+
+let O;
+
+const handleWidgetDrag = (t, e) => i => {
+  i.stopPropagation();
+ // Prevents the remove of the droppable area
+  // - - - - - - - - - - - DOM read operations - - - - - - - - - - -
+    const s = document.documentElement.getBoundingClientRect();
+  const n = t.mainView.getBoundingClientRect();
+  const o = i.clientX;
+ // Mouse position X
+    const r = i.clientY;
+ // Mouse position Y
+    const h = o - n.left;
+  const c = r - n.top;
+  const l = h / n.width * 100;
+  const d = c / n.height * 100;
+  let f;
+  // Block start (Most likely droppable area)
+    if (d <= j && a(d, l, 100 - d)) {
+    f = "block-start";
+  }
+  // Inline End (second most likely droppable area)
+   else if (l >= $ && a(100 - l, d, l)) {
+    f = "inline-end";
+  }
+  // Inline Start
+   else if (l <= j && a(l, d, 100 - l)) {
+    f = "inline-start";
+  }
+  // Block end
+   else if (d >= $ && a(100 - d, l, d)) {
+    f = "block-end";
+  }
+  // Center
+   else {
+    f = "center";
+  }
+  // If the droppable area did not change, there is no need to update the DOM
+    if (O === t.viewId && L === f) {
+    return;
+  }
+  L = f;
+  O = t.viewId;
+  const u = D[f](s, n);
+  // - - - - - - - - - - - DOM write operations - - - - - - - - - - -
+    setProperty$1(e, E, u[0]);
+  setProperty$1(e, S, u[1]);
+  setProperty$1(e, T, u[2]);
+  setProperty$1(e, A, u[3]);
+};
+
+const removeDroppableAreaStyles = t => {
+  L = undefined;
+  O = undefined;
+  t.removeAttribute("style");
+};
+
+const getWidgetDropInfo = () => L === undefined ? undefined : {
+  dropAreaTarget: L,
+  viewIdTarget: O
+};
+
+const R = ":host{display:contents}.droppable-area{width:auto;height:auto;padding:0;margin:0;border:unset;color:unset;inset-block:var(--ch-flexible-layout-drop-area-block-start) var(--ch-flexible-layout-drop-area-block-end);inset-inline:var(--ch-flexible-layout-drop-area-inline-start) var(--ch-flexible-layout-drop-area-inline-end);background-color:color-mix(in srgb, currentColor 15%, transparent);transition-property:inset;transition-duration:150ms;transition-timing-function:ease-in-out;pointer-events:none}";
+
+var V = undefined && undefined.__classPrivateFieldSet || function(t, e, i, s, n) {
+  if (s === "m") throw new TypeError("Private method is not writable");
+  if (s === "a" && !n) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof e === "function" ? t !== e || !n : !e.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return s === "a" ? n.call(t, i) : n ? n.value = i : e.set(t, i), i;
+};
+
+var B = undefined && undefined.__classPrivateFieldGet || function(t, e, i, s) {
+  if (i === "a" && !s) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof e === "function" ? t !== e || !s : !e.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return i === "m" ? s : i === "a" ? s.call(t) : s ? s.value : e.get(t);
+};
+
+var G, N, U, F, q, H, K, Y, J, Q, X;
+
+// Keys
+const Z = "Escape";
+
+const tt = (X = class {
+  constructor(n) {
+    G.set(this, void 0);
+    N.set(this, void 0);
+    U.set(this, void 0);
+ // Allocated at runtime to reduce memory usage
+    // Refs
+        F.set(this, void 0);
+    q.set(this, void 0);
+    H.set(this, void 0);
+    K.set(this, (t => c(this.itemsInfo, t)));
+    Y.set(this, (() => {
+      const t = [];
+      this.itemsInfo.forEach((e => {
+        const i = e.view;
+        if (i != null) {
+          t.push(i);
+        }
+      }));
+      return t;
+    }));
+    // @Listen("keydown", { target: "document" })
+    // handleKeyDownEvent(event: KeyboardEvent) {
+    // if (
+    //   !mouseEventModifierKey(event) ||
+    //   event.code !== KEY_B ||
+    //   this.layout.inlineStart == null
+    // ) {
+    //   return;
+    // }
+    // event.stopPropagation();
+    // event.preventDefault();
+    // this.layout.inlineStart.expanded = !(
+    //   this.layout.inlineStart.expanded ?? true
+    // );
+    //   forceUpdate(this);
+    // }
+        this.handleMainGroupExpand = () => {
+      // if (this.layout.inlineStart) {
+      //   this.layout.inlineStart.expanded = false;
+      // }
+      // if (this.layout.inlineEnd) {
+      //   this.layout.inlineEnd.expanded = false;
+      // }
+      // if (this.layout.blockEnd) {
+      //   this.layout.blockEnd.expanded = false;
+      // }
+      t(this);
+    };
+    this.handleItemChange = t => e => {
+      e.stopPropagation();
+      // Add the view id to properly update the render
+            const i = Object.assign(Object.assign({}, e.detail), {
+        viewId: t
+      });
+      this.selectedViewItemChange.emit(i);
+    };
+    this.handleItemClose = t => e => {
+      e.stopPropagation();
+      // Add the view id to properly update the render
+            const i = Object.assign(Object.assign({}, e.detail), {
+        viewId: t
+      });
+      this.viewItemClose.emit(i);
+    };
+    this.handleDragStart = t => async e => {
+      e.stopPropagation();
+      // We MUST store the reference before the Promise.allSettle, otherwise
+      // the event target will be the flexible-layout control
+            V(this, F, e.target, "f");
+      const i = [ ...this.el.shadowRoot.querySelectorAll("ch-tab") ];
+      V(this, N, {
+        index: e.detail,
+        viewId: t
+      }, "f");
+      // Get all draggable views
+            const s = await Promise.allSettled(i.map((t => t.getDraggableViews())));
+      // Allocate memory
+            V(this, G, [], "f");
+      // Add handlers to manage droppable areas
+            s.forEach(((t, e) => {
+        if (t.status === "fulfilled") {
+          const s = t.value;
+          const n = new AbortController;
+ // Necessary to remove the event listener
+                    const o = Object.assign(Object.assign({}, s), {
+            viewId: i[e].id,
+            abortController: n
+          });
+          B(this, G, "f").push(o);
+          s.mainView.addEventListener("mousemove", handleWidgetDrag(o, B(this, q, "f")), {
+            capture: true,
+            passive: true,
+            signal: n.signal
+          });
+          // Remove pointer events to not interfere on the mousemove event
+                    o.tabListView.style.pointerEvents = "none";
+          o.pageView.style.pointerEvents = "none";
+        }
+      }));
+      document.addEventListener("mouseup", B(this, Q, "f"), {
+        passive: true
+      });
+      document.addEventListener("keydown", B(this, J, "f"), {
+        passive: true
+      });
+      // Removes view when they are out of a droppable area
+            V(this, U, new AbortController, "f");
+      document.addEventListener("mousemove", (() => removeDroppableAreaStyles(B(this, q, "f"))), {
+        passive: true,
+        signal: B(this, U, "f").signal
+      });
+      // Show droppable area
+            B(this, q, "f").showPopover();
+ // Layer 1
+      // After that, promote the drag preview to the second layer
+            B(this, F, "f").promoteDragPreviewToTopLayer();
+ // Layer 2
+      // Disable drag bars in layout-splitter to improve the drag experience
+            this.dragBarDisabled = true;
+    };
+    J.set(this, (t => {
+      if (t.code !== Z) {
+        return;
+      }
+      t.preventDefault();
+      // Cancels the drop by removing the drop info
+            removeDroppableAreaStyles(B(this, q, "f"));
+      B(this, Q, "f").call(this);
+      B(this, F, "f").endDragPreview();
+    }));
+    Q.set(this, (() => {
+      // Remove mousemove handlers
+      B(this, G, "f").forEach((t => {
+        t.abortController.abort();
+        // Reset pointer events
+                t.tabListView.style.pointerEvents = null;
+        t.pageView.style.pointerEvents = null;
+      }));
+      // Remove mouseup and keydown handlers
+            document.removeEventListener("mouseup", B(this, Q, "f"));
+      document.removeEventListener("keydown", B(this, J, "f"));
+      B(this, U, "f").abort();
+      // Check if must update the view due to a drop
+            const t = getWidgetDropInfo();
+      if (t) {
+        this.viewItemReorder.emit(Object.assign(Object.assign({}, B(this, N, "f")), t));
+      }
+      // Hide droppable area
+            B(this, q, "f").hidePopover();
+      removeDroppableAreaStyles(B(this, q, "f"));
+      // Free the memory
+            V(this, G, undefined, "f");
+      V(this, N, undefined, "f");
+      // Re-enable drag bars
+            this.dragBarDisabled = false;
+    }));
+    this.renderTab = (t, i) => e("ch-tab", {
+      id: i.id,
+      key: i.id,
+      slot: i.id,
+      exportparts: i.exportParts,
+      items: i.widgets,
+      selectedId: i.selectedWidgetId,
+      type: t,
+      onExpandMainGroup: t === "main" ? this.handleMainGroupExpand : null,
+      onItemClose: this.handleItemClose(i.id),
+      onItemDragStart: this.handleDragStart(i.id),
+      onSelectedItemChange: this.handleItemChange(i.id)
+    }, i.widgets.map((t => t.wasRendered && e("slot", {
+      name: t.id,
+      slot: t.id
+    }))));
+    this.renderView = t => t.type === "blockStart" ? e("header", {
+      key: t.id,
+      slot: t.id
+    }, e("slot", null)) : this.renderTab(t.type, t);
+    i(this, n);
+    this.viewItemClose = s(this, "viewItemClose", 7);
+    this.selectedViewItemChange = s(this, "selectedViewItemChange", 7);
+    this.viewItemReorder = s(this, "viewItemReorder", 7);
+    this.dragBarDisabled = false;
+    this.layoutModel = undefined;
+    this.layoutSplitterParts = undefined;
+    this.itemsInfo = undefined;
+  }
+  get el() {
+    return n(this);
+  }
+  /**
+         * Schedules a new render of the control even if no state changed.
+         */  async refreshLayout() {
+    t(this);
+    B(this, H, "f").refreshLayout();
+  }
+  /**
+         * Removes the view that is identified by the given ID.
+         * The layout is rearranged depending on the state of the removed view.
+         */  async removeView(e) {
+    const i = await B(this, H, "f").removeItem(e);
+    if (i.success) {
+      // Queue re-renders
+      t(this);
+    }
+    return i;
+  }
+  /**
+         * Given the view ID and the item id, remove the page of the item from the view.
+         */  async removeItemPageInView(t, e, i = true) {
+    const s = B(this, K, "f").call(this, t);
+    if (!s) {
+      return;
+    }
+    const n = this.el.shadowRoot.querySelector(`ch-tab[id='${s.id}']`);
+    await n.removePage(e, i);
+  }
+  render() {
+    const t = this.layoutModel;
+    if (t == null) {
+      return "";
+    }
+    return e(o, null, e("ch-layout-splitter", {
+      dragBarDisabled: this.dragBarDisabled,
+      layout: t,
+      exportparts: "bar," + this.layoutSplitterParts,
+      ref: t => V(this, H, t, "f")
+    }, B(this, Y, "f").call(this).map(this.renderView)), e("div", {
+      "aria-hidden": "true",
+      class: "droppable-area",
+      part: "droppable-area",
+      popover: "manual",
+      ref: t => V(this, q, t, "f")
+    }));
+  }
+}, G = new WeakMap, N = new WeakMap, U = new WeakMap, F = new WeakMap, q = new WeakMap, 
+H = new WeakMap, K = new WeakMap, Y = new WeakMap, J = new WeakMap, Q = new WeakMap, 
+X);
+
+tt.style = R;
+
+const sizesToGridTemplate = (t, e, i) => t.map(((t, s) => t.dragBar?.hidden !== true && s !== i ? `${e.get(t.id).actualSize} ${t.dragBar?.size ?? 0}px` : e.get(t.id).actualSize)).join(" ");
+
+const getFrSize = t => Number(t.size.replace("fr", "").trim());
+
+const getPxSize = t => Number(t.size.replace("px", "").trim());
+
+const hasAbsoluteValue = t => t.size.includes("px");
+
+const getComponentSize = (t, e) => {
+  // Pixel value
+  if (hasAbsoluteValue(t)) {
+    return t.size;
+  }
+  // If the component has fr value, take into account the sum of fixed values
+  // to calculate the actual relative value
+    const i = getFrSize(t);
+  if (e === 0) {
+    return `${i * 100}%`;
+  }
+  return t.fixedOffsetSize ? `calc(${i * 100}% - ${e * i - t.fixedOffsetSize}px)` : `calc(${i * 100}% - ${e * i}px)`;
+};
+
+const updateSize = (t, e, i, s) => {
+  const n = t.item;
+  const o = s === "px" ? getPxSize(n) : getFrSize(n);
+  const a = o + e;
+  n.size = `${a}${s}`;
+  t.actualSize = getComponentSize(n, i);
+};
+
+const updateOffsetSize = (t, e, i) => {
+  const s = t.item;
+  s.fixedOffsetSize ??= 0;
+  s.fixedOffsetSize += e;
+  t.actualSize = getComponentSize(s, i);
+};
+
+const fixAndUpdateLayoutModel = (t, e) => fixAndUpdateSubModel(t.items, e, l);
+
+function fixAndUpdateSubModel(t, e, i) {
+  let s = 0;
+  let n = 0;
+  const o = t.length - 1;
+  // Get the sum of all fr values. Also, store the sum of fixed sizes
+    t.forEach(((t, e) => {
+    if (hasAbsoluteValue(t)) {
+      n += getPxSize(t);
+    } else {
+      s += getFrSize(t);
+    }
+    // Take into account previous resizes (fixedOffsetSize values) and add drag
+    // bar sizes if this is not the last item
+        n += (t.fixedOffsetSize ?? 0) + (e !== o ? t.dragBar?.size ?? 0 : 0);
+  }));
+  // If there are fr values, we must adjust the frs values to be relative to 1fr
+    if (s > 0) {
+    t.forEach((t => {
+      if (!hasAbsoluteValue(t)) {
+        const e = getFrSize(t);
+        const i = e / s;
+        t.size = `${i}fr`;
+      }
+    }));
+  }
+  // Update the actualSizes and fixedSizes maps
+    t.forEach((t => {
+    const s = {
+      item: t,
+      parentItem: i,
+      actualSize: getComponentSize(t, n)
+    };
+    if (t.items != null) {
+      // eslint-disable-next-line prettier/prettier
+      const i = t;
+      const n = fixAndUpdateSubModel(i.items, e, i);
+      s.fixedSizesSum = n;
+    }
+    e.set(t.id, s);
+  }));
+  return n;
+}
+
+const updateComponentsAndDragBar = (t, e, i, s) => {
+  // - - - - - - - - - Increments - - - - - - - - -
+  // When the language is RTL, the increment is in the opposite direction
+  const n = t.direction === "columns" && t.RTL ? -i : i;
+  const o = t.layoutItems;
+  const a = t.fixedSizesSum;
+  const r = t.containerSize - t.fixedSizesSum;
+  const h = n / r;
+  // Components at each position of the drag bar
+    const c = e.get(t.itemStartId);
+  const l = e.get(t.itemEndId);
+  // px / px
+    if (hasAbsoluteValue(c.item) && hasAbsoluteValue(l.item)) {
+    updateSize(c, n, a, "px");
+    updateSize(l, -n, a, "px");
+  }
+  // px / fr
+   else if (hasAbsoluteValue(c.item)) {
+    updateSize(c, n, a, "px");
+    updateOffsetSize(l, -n, a);
+  }
+  // fr / px
+   else if (hasAbsoluteValue(l.item)) {
+    updateOffsetSize(c, n, a);
+    updateSize(l, -n, a, "px");
+  }
+  // fr / fr
+   else {
+    updateSize(c, h, a, "fr");
+    updateSize(l, -h, a, "fr");
+  }
+  // Update in the DOM the grid distribution
+    t.container.style.setProperty(s, sizesToGridTemplate(o, e, o.length - 1));
+};
+
+const getMousePosition = (t, e) => e === "columns" ? t.clientX : t.clientY;
+
+const findItemInParent = t => {
+  const e = t.item.id;
+  return t.parentItem.items.findIndex((t => t.id === e));
+};
+
+const removeItem = (t, e) => {
+  const i = e.get(t);
+  if (!i) {
+    return {
+      success: false,
+      renamedItems: []
+    };
+  }
+  // TODO: Valid whether the parent is the root node or not. If it is the root, update the fixedSizesSum
+    const s = [];
+  const n = findItemInParent(i);
+  const o = i.parentItem;
+  const a = o.items;
+  const r = a[n === 0 ? 1 : n - 1];
+  const h = [];
+  // const itemToAddSpaceUIModel = itemsInfo.get(itemToAddSpace.id);
+  // Remove the item in a future iteration
+    s.push([ a, n, t ]);
+  // The space reserved for the item can be given to a sibling item
+    if (a.length > 2) {
+    addSpaceToItem(i, e.get(r.id), e);
+  }
+  // The current group will have one child. Remove the group and and reconnect
+  // the child item with the parent of its group
+   else if (a.length === 2) {
+    // TODO: CHECK PARENT ROOT
+    const t = e.get(o.id);
+    const i = t.parentItem;
+    const s = findItemInParent(t);
+    const n = i.items[s];
+    // Push the item rename
+        h.push({
+      oldId: r.id,
+      newId: n.id
+    });
+    // This property is no longer valid in the new parent
+        delete n.items;
+    // Update all properties in the new parent, except for some specific properties
+        Object.keys(r).forEach((t => {
+      if (t !== "id" && t !== "size" && t !== "dragBar" && t !== "fixedOffsetSize") {
+        n[t] = r[t];
+      }
+    }));
+    e.delete(r.id);
+  } else ;
+  // Delete the item and all its descendants...
+  // TODO: Add recursive removal
+    s.forEach((t => {
+    I(t[0], t[1]);
+    e.delete(t[2]);
+  }));
+  return {
+    success: true,
+    renamedItems: h
+  };
+};
+
+function addSpaceToItem(t, e, i) {
+  console.log(t, e);
+  // TODO: Add implementation. Ensure the given space is relative to 100% (1fr)
+  // TODO: Remove drag bar Size from fixedSizesSum
+    const s = t.item;
+  const n = e.item;
+  // px / px
+    if (hasAbsoluteValue(s) && hasAbsoluteValue(n)) {
+    // TODO: FixedSizesSum does not make sense when adding pixels. Update implementation to improve this
+    updateSize(e, getPxSize(s), 0, "px");
+  }
+  // px / fr
+   else if (hasAbsoluteValue(s)) ; else if (hasAbsoluteValue(n)) ; else {
+    // TODO: Check if the node is the root
+    const o = i.get(t.parentItem.id).fixedSizesSum;
+    // Update fixedOffsetSize if the removed item had
+        if (s.fixedOffsetSize != null) {
+      updateOffsetSize(t, s.fixedOffsetSize, o);
+    }
+    const a = getFrSize(s) + getFrSize(n);
+    // TODO: In some situations, this should be avoided (fixedSizesSum). Find a way to remove the use of fixedSizesSum
+        updateSize(e, a, o, "fr");
+  }
+}
+
+const et = '*,::after,::before{box-sizing:border-box}:host{--ch-drag-bar__size:5px;display:grid;position:relative;block-size:100%;inline-size:100%}:host(.gx-layout-splitter--resizing) ::slotted(*){pointer-events:none}.bar{--position-fix:calc((var(--size, 0px) - var(--ch-drag-bar__size)) / 2);position:relative;inline-size:100%;block-size:100%;background-color:currentColor;z-index:1}.bar[aria-disabled]{pointer-events:none}.bar:focus-visible{outline:unset}.bar::after{content:"";display:flex;position:absolute;background-color:currentColor;opacity:0;transition:opacity 0s linear}.bar:is(:active,:focus-visible,:hover)::after{opacity:1}.bar:hover::after{transition-delay:250ms}.leaf{display:contents}.group{display:grid;position:relative}.direction--columns{grid-template-columns:var(--ch-layout-splitter__distribution)}.direction--columns>.bar{cursor:ew-resize}.direction--columns>.bar::after{block-size:100%;inline-size:var(--ch-drag-bar__size);margin-inline-start:var(--position-fix)}.direction--rows{grid-template-rows:var(--ch-layout-splitter__distribution)}.direction--rows>.bar{cursor:ns-resize}.direction--rows>.bar::after{block-size:var(--ch-drag-bar__size);inline-size:100%;margin-block-start:var(--position-fix)}';
+
+var it = undefined && undefined.__classPrivateFieldGet || function(t, e, i, s) {
+  if (i === "a" && !s) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof e === "function" ? t !== e || !s : !e.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return i === "m" ? s : i === "a" ? s.call(t) : s ? s.value : e.get(t);
+};
+
+var st = undefined && undefined.__classPrivateFieldSet || function(t, e, i, s, n) {
+  if (s === "m") throw new TypeError("Private method is not writable");
+  if (s === "a" && !n) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof e === "function" ? t !== e || !n : !e.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return s === "a" ? n.call(t, i) : n ? n.value = i : e.set(t, i), i;
+};
+
+var nt, ot, at, rt, ht, ct, lt, dt, ft, ut, pt, bt, mt, wt, vt;
+
+const gt = "gx-layout-splitter--resizing";
+
+const yt = "--ch-layout-splitter__distribution";
+
+const DIRECTION_CLASS = t => `group direction--${t}`;
+
+const TEMPLATE_STYLE = (t, e) => ({
+  [yt]: sizesToGridTemplate(t, e, t.length - 1)
+});
+
+const getAriaControls = (t, e) => `${t[e].id} ${t[e + 1].id}`
+// Key codes
+;
+
+const kt = "ArrowUp";
+
+const xt = "ArrowRight";
+
+const Mt = "ArrowDown";
+
+const Wt = "ArrowLeft";
+
+const zt = (vt = class {
+  constructor(t) {
+    nt.set(this, true);
+ // To prevent redundant RAF (request animation frame) calls
+        ot.set(this, void 0);
+    at.set(this, void 0);
+    rt.set(this, void 0);
+    ht.set(this, void 0);
+    // Distribution of elements
+        ct.set(this, new Map);
+    lt.set(this, (t => {
+      t.preventDefault();
+      st(this, rt, getMousePosition(t, it(this, ot, "f").direction), "f");
+      it(this, dt, "f").call(this);
+    }));
+    dt.set(this, (t => {
+      if (!it(this, nt, "f")) {
+        return;
+      }
+      st(this, nt, false, "f");
+ // No need to call RAF up until next frame
+            requestAnimationFrame((() => {
+        st(this, nt, true, "f");
+ // RAF now consumes the movement instruction so a new one can come
+                updateComponentsAndDragBar(it(this, ot, "f"), it(this, ct, "f"), t !== null && t !== void 0 ? t : it(this, rt, "f") - it(this, at, "f"), // Increment in px
+        yt);
+        // Sync new position with last
+                st(this, at, it(this, rt, "f"), "f");
+      }));
+    }));
+    // Handler to remove mouse down
+        ft.set(this, (() => {
+      document.removeEventListener("mousemove", it(this, lt, "f"), {
+        capture: true
+      });
+    }));
+    // Remove mousemove and mouseup handlers when mouseup
+        ut.set(this, (() => {
+      it(this, ft, "f").call(this);
+      document.removeEventListener("mouseup", it(this, ut, "f"), {
+        capture: true
+      });
+      // Add again pointer-events
+            this.el.classList.remove(gt);
+    }));
+    pt.set(this, ((t, e, i, s, n) => {
+      // Initialize the values needed for drag processing
+      const o = n.target.parentElement;
+      st(this, ot, {
+        container: o,
+        containerSize: t === "columns" ? o.clientWidth : o.clientHeight,
+        direction: t,
+        fixedSizesSum: i,
+        itemStartId: s[e].id,
+        itemEndId: s[e + 1].id,
+        layoutItems: s,
+        RTL: r()
+      }, "f");
+      // Remove pointer-events during drag
+            this.el.classList.add(gt);
+    }));
+    bt.set(this, ((t, e, i, s) => n => {
+      // Necessary to prevent selecting the inner image (or other elements) of
+      // the bar item when the mouse is down
+      n.preventDefault();
+      it(this, pt, "f").call(this, t, e, i, s, n);
+      // Mouse position
+            const o = getMousePosition(n, t);
+      st(this, at, o, "f");
+      st(this, rt, o, "f");
+ // Also updated in mouse move
+      // Add listeners
+            document.addEventListener("mousemove", it(this, lt, "f"), {
+        capture: true
+      });
+      document.addEventListener("mouseup", it(this, ut, "f"), {
+        capture: true,
+        passive: true
+      });
+    }));
+    mt.set(this, ((t, e, i, s) => n => {
+      if (t === "rows" && n.code !== kt && n.code !== Mt || t === "columns" && n.code !== Wt && n.code !== xt) {
+        return;
+      }
+      // Prevent scroll
+            n.preventDefault();
+      it(this, pt, "f").call(this, t, e, i, s, n);
+      const o = n.code === xt || n.code === Mt;
+      it(this, dt, "f").call(this, o ? this.incrementWithKeyboard : -this.incrementWithKeyboard);
+    }));
+    wt.set(this, ((t, i, s) => {
+      const n = s.length - 1;
+      return s.map(((o, a) => {
+        var r, h, c;
+        return [ o.items ? e("div", {
+          id: o.id,
+          class: DIRECTION_CLASS(o.direction),
+          style: TEMPLATE_STYLE(o.items, it(this, ct, "f"))
+        }, it(this, wt, "f").call(this, o.direction, it(this, ct, "f").get(o.id).fixedSizesSum, o.items)) : e("div", {
+          id: o.id,
+          class: "leaf"
+        }, e("slot", {
+          key: o.id,
+          name: o.id
+        })), ((r = o.dragBar) === null || r === void 0 ? void 0 : r.hidden) !== true && a !== n && e("div", {
+          // - - - Accessibility - - -
+          role: "separator",
+          "aria-controls": getAriaControls(s, a),
+          "aria-disabled": this.dragBarDisabled ? "true" : null,
+          "aria-label": this.barAccessibleName,
+          "aria-orientation": t === "columns" ? "vertical" : "horizontal",
+          title: this.barAccessibleName,
+          tabindex: "0",
+          // - - - - - - - - - - - - -
+          class: "bar",
+          part: ((h = o.dragBar) === null || h === void 0 ? void 0 : h.part) ? `bar ${o.dragBar.part}` : "bar",
+          style: ((c = o.dragBar) === null || c === void 0 ? void 0 : c.size) ? {
+            "--size": `${o.dragBar.size}px`
+          } : null,
+          onKeyDown: !this.dragBarDisabled ? it(this, mt, "f").call(this, t, a, i, s) : null,
+          onMouseDown: !this.dragBarDisabled ? it(this, bt, "f").call(this, t, a, i, s) : null
+        }) ];
+      }));
+    }));
+    i(this, t);
+    this.barAccessibleName = "Resize";
+    this.dragBarDisabled = false;
+    this.incrementWithKeyboard = 2;
+    this.layout = {
+      id: "root",
+      direction: "columns",
+      items: []
+    };
+  }
+  get el() {
+    return n(this);
+  }
+  handleComponentsChange(t) {
+    this.updateLayoutInfo(t);
+  }
+  /**
+         * Schedules a new render of the control even if no state changed.
+         */  async refreshLayout() {
+    t(this);
+  }
+  /**
+         * Removes the item that is identified by the given ID.
+         * The layout is rearranged depending on the state of the removed item.
+         */  async removeItem(e) {
+    const i = removeItem(e, it(this, ct, "f"));
+    if (i.success) {
+      // Queue re-renders
+      t(this);
+    }
+    return i;
+  }
+  updateLayoutInfo(t) {
+    var e;
+    // Clear old information
+        it(this, ct, "f").clear();
+    if (((e = t === null || t === void 0 ? void 0 : t.items) === null || e === void 0 ? void 0 : e.length) > 0) {
+      st(this, ht, fixAndUpdateLayoutModel(t, it(this, ct, "f")), "f");
+      console.log(it(this, ct, "f"));
+    }
+  }
+  connectedCallback() {
+    this.updateLayoutInfo(this.layout);
+  }
+  disconnectedCallback() {
+    // Defensive programming. Make sure all event listeners are removed correctly
+    it(this, ut, "f").call(this);
+  }
+  render() {
+    const t = this.layout;
+    if ((t === null || t === void 0 ? void 0 : t.items) == null) {
+      return "";
+    }
+    return e("div", {
+      class: DIRECTION_CLASS(t.direction),
+      style: TEMPLATE_STYLE(t.items, it(this, ct, "f"))
+    }, it(this, wt, "f").call(this, t.direction, it(this, ht, "f"), t.items));
+  }
+  static get watchers() {
+    return {
+      layout: [ "handleComponentsChange" ]
+    };
+  }
+}, nt = new WeakMap, ot = new WeakMap, at = new WeakMap, rt = new WeakMap, ht = new WeakMap, 
+ct = new WeakMap, lt = new WeakMap, dt = new WeakMap, ft = new WeakMap, ut = new WeakMap, 
+pt = new WeakMap, bt = new WeakMap, mt = new WeakMap, wt = new WeakMap, vt);
+
+zt.style = et;
+
+const It = '*,::after,::before{box-sizing:border-box}:host{--ch-tab-transition-duration:150ms;display:grid;block-size:100%;inline-size:100%}:host([type=inlineStart]){grid-template-columns:max-content 1fr}:host(.ch-tab-direction--block){grid-template-rows:max-content 1fr}:host([type=inlineEnd]){grid-template-columns:1fr max-content}:where(button){all:unset;display:flex;align-items:center;user-select:none;touch-action:manipulation;-webkit-user-drag:element;cursor:pointer}.caption-image,.decorative-image::before{display:block;block-size:18px;inline-size:18px}.decorative-image::before{content:"";-webkit-mask:var(--ch-tab-decorative-image) 50% 50%/100% 100% no-repeat;background-color:currentColor}.close-button::after{content:"";display:flex;block-size:1em;inline-size:1em;-webkit-mask:url(\'data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M2 2L15.5 15.5" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.5 2L2 15.5" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>\') 50% 50%/0.75em 0.75em no-repeat;background-color:currentColor;opacity:0}.block__button{display:flex;align-items:center}.block__button:hover>.close-button::after,.block__button:focus-within>.close-button::after,.block__button[aria-selected=true]>.close-button::after{opacity:1}.dragged-element{opacity:0}.dragged-element--outside{display:none}.drag-preview{--ch-tab-snap-drag-preview:clamp(\n    var(--ch-tab-tab-list-start),\n    var(--ch-tab-mouse-position),\n    var(--ch-tab-tab-list-end)\n  );position:fixed;left:0;top:0;z-index:108}.drag-preview:popover-open{padding:0;margin:0;border:unset;color:unset;pointer-events:none}.drag-preview-element{cursor:grabbing}.drag-preview--outside-tab-list{transform:translate(calc(var(--ch-tab-mouse-position-x) - var(--ch-tab-mouse-offset-x)), calc(var(--ch-tab-mouse-position-y) - var(--ch-tab-mouse-offset-y)))}.drag-preview--inside-tab-list__block{--ch-tab-mouse-position:calc(\n    var(--ch-tab-mouse-position-x) - var(--ch-tab-mouse-offset-x)\n  );transform:translate(var(--ch-tab-snap-drag-preview), var(--ch-tab-button-position-y))}.drag-preview--inside-tab-list__inline{--ch-tab-mouse-position:calc(\n    var(--ch-tab-mouse-position-y) - var(--ch-tab-mouse-offset-y)\n  );transform:translate(var(--ch-tab-button-position-x), var(--ch-tab-snap-drag-preview))}.shifted-element{transition:transform var(--ch-tab-transition-duration)}:host(.ch-tab-direction--block) .shifted-element--start{transform:translate(calc(var(--ch-tab-button-size) * -1), 0)}:host(.ch-tab-direction--block) .shifted-element--end{transform:translate(var(--ch-tab-button-size), 0)}:host(.ch-tab-direction--inline) .shifted-element--start{transform:translateY(calc(var(--ch-tab-button-size) * -1))}:host(.ch-tab-direction--inline) .shifted-element--end{transform:translateY(var(--ch-tab-button-size))}.inline__tab-list{display:grid;grid-auto-flow:row;grid-auto-rows:max-content}:host([type=inlineEnd])>.inline__tab-list{order:1}.block__tab-list{display:grid;grid-auto-flow:column;grid-auto-columns:max-content}.page-container{display:grid;grid-template:"selected" 1fr/1fr;block-size:100%;inline-size:100%}.page--selected{grid-area:selected}@supports (content-visibility: hidden){.page-container--collapsed,.page--hidden{content-visibility:hidden}.page-container--collapsed{inline-size:0}}@supports not (content-visibility: hidden){.page-container--collapsed,.page--hidden{display:none}}';
+
+var _t = undefined && undefined.__classPrivateFieldGet || function(t, e, i, s) {
+  if (i === "a" && !s) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof e === "function" ? t !== e || !s : !e.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return i === "m" ? s : i === "a" ? s.call(t) : s ? s.value : e.get(t);
+};
+
+var Ct = undefined && undefined.__classPrivateFieldSet || function(t, e, i, s, n) {
+  if (s === "m") throw new TypeError("Private method is not writable");
+  if (s === "a" && !n) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof e === "function" ? t !== e || !n : !e.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return s === "a" ? n.call(t, i) : n ? n.value = i : e.set(t, i), i;
+};
+
+var Et, St, Tt, At, jt, $t, Pt, Dt, Lt, Ot, Rt, Vt, Bt, Gt, Nt, Ut, Ft, qt, Ht, Kt, Yt, Jt, Qt, Xt, Zt, te, ee, ie, se, ne, oe;
+
+// Custom vars
+const ae = "--ch-tab-transition-duration";
+
+const re = "--ch-tab-button-position-x";
+
+const he = "--ch-tab-button-position-y";
+
+const ce = "--ch-tab-button-size";
+
+const le = "--ch-tab-mouse-offset-x";
+
+const de = "--ch-tab-mouse-offset-y";
+
+const fe = "--ch-tab-mouse-position-x";
+
+const ue = "--ch-tab-mouse-position-y";
+
+const pe = "--ch-tab-tab-list-start";
+
+const be = "--ch-tab-tab-list-end";
+
+const me = "--ch-tab-decorative-image";
+
+// Key codes
+const we = "ArrowUp";
+
+const ve = "ArrowRight";
+
+const ge = "ArrowDown";
+
+const ye = "ArrowLeft";
+
+const ke = "Home";
+
+const xe = "End";
+
+// Selectors
+const FIRST_CAPTION_BUTTON = t => t.querySelector(":scope>button");
+
+const LAST_CAPTION_BUTTON = t => t.querySelector(":scope>button:last-child")
+// Utility functions
+;
+
+const isDecorativeImg = t => t.startImageSrc && (!t.startImageType || t.startImageType === "pseudo-element");
+
+const getDirection = t => t === "main" || t === "blockEnd" ? "block" : "inline";
+
+const isBlockDirection = t => t === "block";
+
+const setProperty = (t, e, i) => t.style.setProperty(e, `${i}px`);
+
+const setButtonInitialPosition = (t, e, i) => {
+  setProperty(t, re, e);
+  setProperty(t, he, i);
+};
+
+const setButtonSize = (t, e) => {
+  setProperty(t, ce, e);
+};
+
+const setMousePosition = (t, e, i) => {
+  setProperty(t, fe, e);
+  setProperty(t, ue, i);
+};
+
+// Useful to implement snap to the edges
+const setTabListStartEndPosition = (t, e, i) => {
+  setProperty(t, pe, e);
+  setProperty(t, be, i);
+};
+
+const getTabListSizesAndSetPosition = (t, e, i, s) => {
+  const n = e.getBoundingClientRect();
+  // Tab List information
+    const o = {
+    xStart: n.x,
+    xEnd: n.x + n.width,
+    yStart: n.y,
+    yEnd: n.y + n.height
+  };
+  if (isBlockDirection(i)) {
+    setTabListStartEndPosition(t, o.xStart, o.xEnd - s.width);
+  } else {
+    setTabListStartEndPosition(t, o.yStart, o.yEnd - s.height);
+  }
+  return o;
+};
+
+const setMouseOffset = (t, e, i) => {
+  setProperty(t, le, e);
+  setProperty(t, de, i);
+};
+
+const addGrabbingStyle = () => document.body.style.setProperty("cursor", "grabbing");
+
+const removeGrabbingStyle = () => document.body.style.removeProperty("cursor");
+
+const focusNextOrPreviousCaption = (t, e, i, s) => {
+  var n, o;
+  // Prevent scroll
+    s.preventDefault();
+  let a;
+  // Determine the next selected caption button
+    if (t) {
+    a = (n = i.nextElementSibling) !== null && n !== void 0 ? n : FIRST_CAPTION_BUTTON(e);
+  } else {
+    a = (o = i.previousElementSibling) !== null && o !== void 0 ? o : LAST_CAPTION_BUTTON(e);
+  }
+  // Focus and select the caption
+    a.focus();
+  a.click();
+};
+
+const Me = (oe = class {
+  constructor(t) {
+    Et.set(this, void 0);
+    // Styling
+        St.set(this, {});
+    Tt.set(this, {});
+    At.set(this, void 0);
+    jt.set(this, -1);
+    $t.set(this, void 0);
+    Pt.set(this, void 0);
+    Dt.set(this, true);
+ // To prevent redundant RAF (request animation frame) calls
+        Lt.set(this, -1);
+    // Allocated at runtime to reduce memory usage
+        Ot.set(this, void 0);
+    /**
+             * This variable represents the boundaries of the box where the mouse can be
+             * placed when dragging a caption, to consider that the caption is within the
+             * tab list.
+             */    Rt.set(this, void 0);
+    Vt.set(this, new Set);
+    // Refs
+        Bt.set(this, void 0);
+    Gt.set(this, void 0);
+    Nt.set(this, void 0);
+    // Keyboard interactions
+        Ut.set(this, {
+      [we]: (t, e, i) => {
+        if (t === "block") {
+          return;
+        }
+        focusNextOrPreviousCaption(false, _t(this, Gt, "f"), i, e);
+      },
+      [ve]: (t, e, i) => {
+        if (t === "inline") {
+          return;
+        }
+        focusNextOrPreviousCaption(!r(), _t(this, Gt, "f"), i, e);
+      },
+      [ge]: (t, e, i) => {
+        if (t === "block") {
+          return;
+        }
+        focusNextOrPreviousCaption(true, _t(this, Gt, "f"), i, e);
+      },
+      [ye]: (t, e, i) => {
+        if (t === "inline") {
+          return;
+        }
+        focusNextOrPreviousCaption(r(), _t(this, Gt, "f"), i, e);
+      },
+      [ke]: () => {
+        const t = FIRST_CAPTION_BUTTON(_t(this, Gt, "f"));
+        // Focus and select the caption
+                t.focus();
+        t.click();
+      },
+      [xe]: () => {
+        const t = LAST_CAPTION_BUTTON(_t(this, Gt, "f"));
+        // Focus and select the caption
+                t.focus();
+        t.click();
+      }
+    });
+    Ft.set(this, ((t, e) => i => {
+      i.stopPropagation();
+      this.selectedItemChange.emit({
+        lastSelectedIndex: _t(this, jt, "f"),
+        newSelectedId: e,
+        newSelectedIndex: t,
+        type: this.type
+      });
+      Ct(this, jt, t, "f");
+      // this.selectedId = itemId;
+        }));
+    /**
+             * Make a set based on the rendered items array to maintain order between the
+             * pages, even when re-ordering tabs. This is useful for optimizing rendering
+             * performance by not re-ordering pages when the caption's order changes.
+             */
+    // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        qt.set(this, (t => {
+      (t !== null && t !== void 0 ? t : []).forEach((t => {
+        if (t.wasRendered) {
+          _t(this, Vt, "f").add(t.id);
+        }
+      }));
+    }));
+    Ht.set(this, (t => {
+      t.preventDefault();
+      t.stopPropagation();
+      this.expandMainGroup.emit();
+    }));
+    Kt.set(this, (t => e => {
+      // Remove dragover event to allow mousemove event to fire
+      e.preventDefault();
+      // Store the index of the dragged element
+            this.draggedElementIndex = t;
+      // - - - - - - - - - - - DOM read operations - - - - - - - - - - -
+            const i = e.clientX;
+      const s = e.clientY;
+      const n = isBlockDirection(_t(this, At, "f")) ? t => t.getBoundingClientRect().width : t => t.getBoundingClientRect().height;
+      Ct(this, Ot, [ ..._t(this, Gt, "f").children ].map(n), "f");
+      const o = e.target.getBoundingClientRect();
+      // Tab List information
+            const a = getTabListSizesAndSetPosition(this.el, _t(this, Gt, "f"), _t(this, At, "f"), o);
+      // Button information
+            const r = {
+        xStart: o.x,
+        xEnd: o.x + o.width,
+        yStart: o.y,
+        yEnd: o.y + o.height
+      };
+      const h = s - r.yStart;
+      const c = r.yEnd - s;
+      const l = i - r.xStart;
+      const d = r.xEnd - i;
+      // Mouse limits
+            Ct(this, Rt, {
+        xStart: a.xStart - d,
+        xEnd: a.xEnd + l,
+        yStart: a.yStart - c,
+        yEnd: a.yEnd + h
+      }, "f");
+      // Store initial mouse position
+            Ct(this, Lt, isBlockDirection(_t(this, At, "f")) ? i : s, "f");
+      // - - - - - - - - - - - DOM write operations - - - - - - - - - - -
+      // Initialize mouse position to avoid initial flickering
+            setMousePosition(this.el, i, s);
+      // Initialize the button position
+            setButtonInitialPosition(this.el, r.xStart, r.yStart);
+      setButtonSize(this.el, isBlockDirection(_t(this, At, "f")) ? o.width : o.height);
+      // Update mouse offset to correctly place the dragged element preview
+            setMouseOffset(this.el, l, h);
+      addGrabbingStyle();
+      // Add listeners
+            document.body.addEventListener("mousemove", _t(this, Jt, "f"), {
+        capture: true,
+        passive: true
+      });
+      document.body.addEventListener("mouseup", _t(this, Yt, "f"), {
+        capture: true
+      });
+    }));
+    Yt.set(this, (() => {
+      // Since mousemove callbacks are executed on animation frames, we must also
+      // remove the events on animations frame. Otherwise we would remove the
+      // events and in the next frame the mousemove handler will be executes
+      cancelAnimationFrame(_t(this, Et, "f"));
+      Ct(this, Dt, true, "f");
+      document.body.removeEventListener("mousemove", _t(this, Jt, "f"), {
+        capture: true
+      });
+      document.body.removeEventListener("mouseup", _t(this, Yt, "f"), {
+        capture: true
+      });
+      removeGrabbingStyle();
+      const t = !this.hasCrossedBoundaries && this.draggedElementNewIndex !== this.draggedElementIndex;
+      // Move the item to the new position
+            if (t) {
+        const t = I(this.items, this.draggedElementIndex);
+        _(this.items, t, this.draggedElementNewIndex);
+        // Update last selected index
+                this.adjustLastSelectedIndexValueAfterReorder();
+      }
+      // Restore visibility of the dragged element
+            this.draggedElementIndex = -1;
+      this.draggedElementNewIndex = -1;
+      // Free the memory
+            Ct(this, Ot, undefined, "f");
+      // Reset state
+            this.hasCrossedBoundaries = false;
+      this.el.style.removeProperty(ae);
+    }));
+    Jt.set(this, (t => {
+      Ct(this, Pt, t, "f");
+      if (!_t(this, Dt, "f")) {
+        return;
+      }
+      Ct(this, Dt, false, "f");
+ // No need to call RAF up until next frame
+            Ct(this, Et, requestAnimationFrame((() => {
+        Ct(this, Dt, true, "f");
+ // RAF now consumes the movement instruction so a new one can come
+                const t = _t(this, Pt, "f").clientX;
+        const e = _t(this, Pt, "f").clientY;
+        setMousePosition(this.el, t, e);
+        // There is no need to update the preview of the reorder
+                if (this.hasCrossedBoundaries) {
+          return;
+        }
+        const i = _t(this, Rt, "f");
+        const s = a(i.xStart, t, i.xEnd) && a(i.yStart, e, i.yEnd);
+        // Emit the itemDragStart event the first time the button is out of the
+        // mouse bounds (`mouseBoundingLimits`)
+                if (!s) {
+          this.hasCrossedBoundaries = true;
+          // Remove transition before the render to avoid flickering in the animation
+                    this.el.style.setProperty(ae, "0s");
+          this.itemDragStart.emit(this.draggedElementIndex);
+          return;
+        }
+        // There is no need to re-order the items in the preview
+                if (this.items.length === 1) {
+          return;
+        }
+        // In this point, the preview is inside the tab list, we should check
+        // in which place is the preview to give feedback for the item's reorder
+                const n = isBlockDirection(_t(this, At, "f")) ? t : e;
+        const o = _t(this, Lt, "f") < n;
+        // Distance traveled from the initial mouse position
+                let r = Math.abs(_t(this, Lt, "f") - n);
+        let h = this.draggedElementIndex;
+        if (o) {
+          // While it is not the last item and the distance traveled is greater
+          // than half the size of the next item
+          while (h < this.items.length - 1 && r - _t(this, Ot, "f")[h + 1] / 2 > 0) {
+            r -= _t(this, Ot, "f")[h + 1];
+            h++;
+          }
+        } else {
+          // While it is not the first item and the distance traveled is greater
+          // than half the size of the previous item
+          while (h > 0 && r - _t(this, Ot, "f")[h - 1] / 2 > 0) {
+            r -= _t(this, Ot, "f")[h - 1];
+            h--;
+          }
+        }
+        // Check if should update the dragged element index in the preview
+                if (this.draggedElementNewIndex !== h) {
+          this.draggedElementNewIndex = h;
+        }
+      })), "f");
+    }));
+    Qt.set(this, ((t, e) => i => {
+      i.preventDefault();
+      i.stopPropagation();
+      this.itemClose.emit({
+        itemIndex: t,
+        itemId: e,
+        type: this.type
+      });
+    }));
+    Xt.set(this, (t => {
+      if (this.items.length < 2) {
+        return;
+      }
+      const e = _t(this, Ut, "f")[t.code];
+      if (!e) {
+        return;
+      }
+      const i = C()[0].closest("." + _t(this, St, "f").BUTTON);
+      e(_t(this, At, "f"), t, i);
+    }));
+    Zt.set(this, (t => t.startImageType === "img" && t.startImageSrc && e("img", {
+      "aria-hidden": "true",
+      class: "caption-image " + _t(this, St, "f").IMAGE,
+      part: _t(this, Tt, "f").IMAGE,
+      alt: "",
+      src: t.startImageSrc,
+      loading: "lazy"
+    })));
+    te.set(this, (t => e("div", {
+      role: "tablist",
+      "aria-label": this.accessibleName,
+      class: _t(this, St, "f").TAB_LIST,
+      part: _t(this, Tt, "f").TAB_LIST,
+      ref: t => Ct(this, Gt, t, "f"),
+      onKeyDown: _t(this, Xt, "f")
+    }, this.items.map(((i, s) => e("button", {
+      key: d(i.id),
+      id: d(i.id),
+      role: "tab",
+      "aria-controls": f(i.id),
+      "aria-label": !_t(this, $t, "f") ? i.name : null,
+      "aria-selected": (i.id === this.selectedId).toString(),
+      class: {
+        [_t(this, St, "f").BUTTON]: true,
+        "decorative-image": isDecorativeImg(i),
+        "dragged-element": this.draggedElementIndex === s,
+        "dragged-element--outside": this.draggedElementIndex === s && this.hasCrossedBoundaries && this.items.length > 1,
+        "shifted-element": this.draggedElementIndex !== -1,
+        "shifted-element--start": t && this.draggedElementIndex < s && s <= this.draggedElementNewIndex,
+        "shifted-element--end": t && this.draggedElementNewIndex <= s && s < this.draggedElementIndex
+      },
+      part: h({
+        [_t(this, Tt, "f").BUTTON]: true,
+        [d(i.id)]: true,
+        [u]: i.id === this.selectedId
+      }),
+      style: isDecorativeImg(i) ? {
+        [me]: `url("${i.startImageSrc}")`
+      } : null,
+      onAuxClick: _t(this, Qt, "f").call(this, s, i.id),
+      onClick: !(i.id === this.selectedId) ? _t(this, Ft, "f").call(this, s, i.id) : null,
+      onDblClick: this.type === "main" ? _t(this, Ht, "f") : null,
+      // Drag and drop
+      onDragStart: !this.dragDisabled ? _t(this, Kt, "f").call(this, s) : null
+    }, _t(this, Zt, "f").call(this, i), _t(this, $t, "f") && i.name, _t(this, $t, "f") && e("button", {
+      "aria-label": this.closeButtonAccessibleName,
+      class: "close-button",
+      part: p,
+      type: "button",
+      onClick: _t(this, Qt, "f").call(this, s, i.id)
+    })))))));
+    ee.set(this, (() => e("div", {
+      class: {
+        [_t(this, St, "f").PAGE_CONTAINER]: true,
+        "page-container": true,
+        "page-container--collapsed": !this.expanded
+      },
+      part: _t(this, Tt, "f").PAGE_CONTAINER,
+      ref: t => Ct(this, Nt, t, "f")
+    }, [ ..._t(this, Vt, "f").keys() ].map((t => e("div", {
+      key: f(t),
+      id: f(t),
+      role: "tabpanel",
+      "aria-labelledby": d(t),
+      class: {
+        [_t(this, St, "f").PAGE]: true,
+        "page--selected": t === this.selectedId,
+        "page--hidden": !(t === this.selectedId)
+      },
+      part: _t(this, Tt, "f").PAGE
+    }, e("slot", {
+      name: t
+    })))))));
+    ie.set(this, (t => {
+      const i = {
+        [b]: true,
+        [m]: this.hasCrossedBoundaries,
+        [w]: !this.hasCrossedBoundaries && !isBlockDirection(_t(this, At, "f")),
+        [v]: !this.hasCrossedBoundaries && isBlockDirection(_t(this, At, "f"))
+      };
+      return e("div", {
+        "aria-hidden": "true",
+        class: i,
+        part: h(i),
+        ref: t => Ct(this, Bt, t, "f")
+      }, e("button", {
+        class: {
+          [_t(this, St, "f").BUTTON]: true,
+          [g]: true,
+          "decorative-image": isDecorativeImg(t)
+        },
+        part: h({
+          [_t(this, Tt, "f").BUTTON]: true,
+          [d(t.id)]: true,
+          [g]: true,
+          [u]: t.id === this.selectedId
+        }),
+        style: isDecorativeImg(t) ? {
+          [me]: `url("${t.startImageSrc}")`
+        } : null
+      }, _t(this, Zt, "f").call(this, t), _t(this, $t, "f") && t.name));
+    }));
+    se.set(this, (t => {
+      Ct(this, At, getDirection(t), "f");
+      _t(this, qt, "f").call(this, this.items);
+      // Initialize classes and parts
+            _t(this, ne, "f").call(this, _t(this, At, "f"), t);
+      Ct(this, $t, isBlockDirection(_t(this, At, "f")), "f");
+    }));
+    ne.set(this, ((t, e) => {
+      Ct(this, St, {
+        BUTTON: y(t),
+        IMAGE: k(t),
+        PAGE: x(t),
+        PAGE_CONTAINER: M(t),
+        PAGE_NAME: W(t),
+        TAB_LIST: z(t)
+      }, "f");
+      // Add the type information to each part
+            Object.entries(_t(this, St, "f")).forEach((([t, i]) => {
+        _t(this, Tt, "f")[t] = `${i} ${e}`;
+      }));
+    }));
+    i(this, t);
+    this.expandMainGroup = s(this, "expandMainGroup", 7);
+    this.itemClose = s(this, "itemClose", 7);
+    this.selectedItemChange = s(this, "selectedItemChange", 7);
+    this.itemDragStart = s(this, "itemDragStart", 7);
+    this.draggedElementIndex = -1;
+    this.draggedElementNewIndex = -1;
+    this.hasCrossedBoundaries = false;
+    this.accessibleName = undefined;
+    this.closeButtonAccessibleName = "Close";
+    this.dragDisabled = false;
+    this.expanded = true;
+    this.items = undefined;
+    this.selectedId = undefined;
+    this.type = undefined;
+  }
+  get el() {
+    return n(this);
+  }
+  handleItemsChange(t) {
+    _t(this, qt, "f").call(this, t);
+  }
+  handleSelectedIdChange(t) {
+    _t(this, Vt, "f").add(t);
+  }
+  handleTypeChange(t) {
+    _t(this, se, "f").call(this, t);
+  }
+  /**
+         * Ends the preview of the dragged item. Useful for ending the preview via
+         * keyboard interaction.
+         */  async endDragPreview() {
+    _t(this, Yt, "f").call(this);
+  }
+  /**
+         * Returns the info associated to the draggable view.
+         */  async getDraggableViews() {
+    return {
+      mainView: this.el,
+      pageView: _t(this, Nt, "f"),
+      tabListView: _t(this, Gt, "f")
+    };
+  }
+  /**
+         * Promotes the drag preview to the top layer. Useful to avoid z-index issues.
+         */  async promoteDragPreviewToTopLayer() {
+    if (this.draggedElementIndex === -1) {
+      return;
+    }
+    // If this property is added in a declarative way via the Stencil's render,
+    // we would have to use requestAnimationFrame to delay the shopPopover()
+    // method, since the popover defaults to "auto", which does not allow to
+    // keep multiple "auto" popover open at the same time
+        _t(this, Bt, "f").popover = "manual";
+    _t(this, Bt, "f").showPopover();
+  }
+  /**
+         * Given an id, remove the page from the render
+         */  async removePage(e, i = true) {
+    _t(this, Vt, "f").delete(e);
+    if (i) {
+      t(this);
+    }
+  }
+  adjustLastSelectedIndexValueAfterReorder() {
+    var t, e;
+    // If the dragged element is the selected element, use the new index
+        if (_t(this, jt, "f") === this.draggedElementIndex) {
+      Ct(this, jt, this.draggedElementNewIndex, "f");
+    }
+    // Dragged element:
+    //   - Started: Before the selected index
+    //   - Ended: After the selected index or in the same position
+     else if (this.draggedElementIndex < _t(this, jt, "f") && _t(this, jt, "f") <= this.draggedElementNewIndex) {
+      Ct(this, jt, (t = _t(this, jt, "f"), t--, t), "f");
+    }
+    // Dragged element:
+    //   - Started: After the selected index
+    //   - Ended: Before the selected index or in the same position
+     else if (_t(this, jt, "f") < this.draggedElementIndex && this.draggedElementNewIndex <= _t(this, jt, "f")) {
+      Ct(this, jt, (e = _t(this, jt, "f"), e++, e), "f");
+    }
+  }
+  componentWillLoad() {
+    _t(this, se, "f").call(this, this.type);
+  }
+  render() {
+    if (this.items == null || this.items.length === 0) {
+      return "";
+    }
+    const t = this.draggedElementIndex;
+    const i = this.items[t];
+    const s = !this.hasCrossedBoundaries && this.draggedElementNewIndex !== -1 && this.draggedElementIndex !== this.draggedElementNewIndex;
+    return e(o, {
+      class: `ch-tab-direction--${_t(this, At, "f")}`
+    }, _t(this, te, "f").call(this, s), _t(this, ee, "f").call(this), t !== -1 && _t(this, ie, "f").call(this, i));
+  }
+  static get watchers() {
+    return {
+      items: [ "handleItemsChange" ],
+      selectedId: [ "handleSelectedIdChange" ],
+      type: [ "handleTypeChange" ]
+    };
+  }
+}, Et = new WeakMap, St = new WeakMap, Tt = new WeakMap, At = new WeakMap, jt = new WeakMap, 
+$t = new WeakMap, Pt = new WeakMap, Dt = new WeakMap, Lt = new WeakMap, Ot = new WeakMap, 
+Rt = new WeakMap, Vt = new WeakMap, Bt = new WeakMap, Gt = new WeakMap, Nt = new WeakMap, 
+Ut = new WeakMap, Ft = new WeakMap, qt = new WeakMap, Ht = new WeakMap, Kt = new WeakMap, 
+Yt = new WeakMap, Jt = new WeakMap, Qt = new WeakMap, Xt = new WeakMap, Zt = new WeakMap, 
+te = new WeakMap, ee = new WeakMap, ie = new WeakMap, se = new WeakMap, ne = new WeakMap, 
+oe);
+
+Me.style = It;
+
+export { tt as ch_flexible_layout, zt as ch_layout_splitter, Me as ch_tab };
+//# sourceMappingURL=p-3d131f61.entry.js.map