@genexus/genexus-ide-ui 0.0.62 → 0.0.63

package/dist/components/tree-x.js

@@ -1,504 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { f as focusComposedPath, m as mouseEventModifierKey } from './helpers.js';
-
-const scrollToEdge = (event, container, scrollSpeed, scrollThreshold) => {
-  const mousePositionY = event.clientY - container.getBoundingClientRect().top;
-  const containerHeight = container.clientHeight;
-  const mouseAtTheTop = mousePositionY <= scrollThreshold;
-  const mouseAtTheBottom = mousePositionY > containerHeight - scrollThreshold;
-  if (mouseAtTheTop || mouseAtTheBottom) {
-    const scrollAmount = mouseAtTheTop
-      ? mousePositionY - scrollThreshold
-      : mousePositionY - (containerHeight - scrollThreshold);
-    // Adjust container scroll position
-    container.scrollTop += scrollAmount / scrollSpeed;
-  }
-};
-
-const treeXCss = "ch-tree-x{display:flex;position:relative;width:100%;overflow:auto}ch-tree-x>.ch-tree-x-container{position:absolute;inset:0}ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list-item{pointer-events:var(--ch-tree-x-pointer-events, all)}ch-tree-x.ch-tree-x-dragging-item .ch-tree-x-list-item--deny-drop{pointer-events:none}ch-tree-x.ch-tree-x--dragging-selected-items ch-tree-x-list-item[selected]{--ch-tree-x-pointer-events:none}ch-tree-x.ch-tree-x-waiting-drop-processing{cursor:wait}ch-tree-x.ch-tree-x-waiting-drop-processing>.ch-tree-x-container{pointer-events:none}.ch-tree-x-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-x-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-x-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-x-drag-info-fade-in 10ms}@keyframes ch-tree-x-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-x-drag-info{--rtl-offset:-100%}";
-
-const TREE_ITEM_TAG_NAME = "ch-tree-x-list-item";
-const TREE_TAG_NAME = "ch-tree-x";
-// Selectors
-// const CHECKED_ITEMS = `${TREE_ITEM_TAG_NAME}[checked]`;
-const TEXT_FORMAT = "text/plain";
-const ARROW_DOWN_KEY = "ArrowDown";
-const ARROW_UP_KEY = "ArrowUp";
-const EDIT_KEY = "F2";
-const isTreeItem = (element) => element.tagName.toLowerCase() === TREE_ITEM_TAG_NAME;
-const getFocusedTreeItem = () => focusComposedPath().find(isTreeItem);
-const canMoveTreeItemFocus = (treeItem) => treeItem && !treeItem.editing;
-const getDroppableZoneKey = (newContainerId, draggedItems) => `"newContainerId":"${newContainerId}","metadata":"${JSON.stringify(draggedItems)}"`;
-const POSITION_X_DRAG_CUSTOM_VAR = "--ch-tree-x-dragging-item-x";
-const POSITION_Y_DRAG_CUSTOM_VAR = "--ch-tree-x-dragging-item-y";
-const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.droppableZoneEnter = createEvent(this, "droppableZoneEnter", 7);
-    this.expandedItemChange = createEvent(this, "expandedItemChange", 7);
-    this.itemContextmenu = createEvent(this, "itemContextmenu", 7);
-    this.itemsDropped = createEvent(this, "itemsDropped", 7);
-    this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
-    // @todo TODO: Check if key codes works in Safari
-    this.keyDownEvents = {
-      [ARROW_DOWN_KEY]: event => {
-        const treeItem = getFocusedTreeItem();
-        if (!canMoveTreeItemFocus(treeItem)) {
-          return;
-        }
-        event.preventDefault();
-        treeItem.focusNextItem(mouseEventModifierKey(event));
-      },
-      [ARROW_UP_KEY]: event => {
-        const treeItem = getFocusedTreeItem();
-        if (!canMoveTreeItemFocus(treeItem)) {
-          return;
-        }
-        event.preventDefault();
-        treeItem.focusPreviousItem(mouseEventModifierKey(event));
-      },
-      [EDIT_KEY]: event => {
-        const treeItem = getFocusedTreeItem();
-        if (!treeItem || !treeItem.editable) {
-          return;
-        }
-        event.preventDefault();
-        treeItem.editing = true;
-      }
-    };
-    this.draggingSelectedItems = false;
-    this.needForRAF = true; // To prevent redundant RAF (request animation frame) calls
-    this.selectedItemsInfo = new Map();
-    /**
-     * Cache to avoid duplicate requests when checking the droppable zone in the
-     * same drag event.
-     */
-    this.validDroppableZoneCache = new Map();
-    this.draggedIds = [];
-    this.draggedParentIds = [];
-    this.draggingInTheDocument = false;
-    this.draggingInTree = false;
-    /**
-     * Set this attribute if you want to allow multi selection of the items.
-     */
-    this.multiSelection = false;
-    /**
-     * This property lets you specify the time (in ms) that the mouse must be
-     * over in a subtree to open it when dragging.
-     */
-    this.openSubTreeCountdown = 750;
-    /**
-     * `true` to scroll in the tree when dragging an item near the edges of the
-     * tree.
-     */
-    this.scrollToEdgeOnDrag = true;
-    /**
-     * This property lets you specify if the tree is waiting to process the drop
-     * of items.
-     */
-    this.waitDropProcessing = false;
-    this.trackItemDrag = (event) => {
-      event.preventDefault();
-      this.lastDragEvent = event;
-      this.updateDropEffect(event);
-      if (!this.needForRAF) {
-        return;
-      }
-      this.needForRAF = false; // No need to call RAF up until next frame
-      requestAnimationFrame(() => {
-        this.needForRAF = true; // RAF now consumes the movement instruction so a new one can come
-        this.el.style.setProperty(POSITION_X_DRAG_CUSTOM_VAR, `${this.lastDragEvent.pageX}px`);
-        this.el.style.setProperty(POSITION_Y_DRAG_CUSTOM_VAR, `${this.lastDragEvent.pageY}px`);
-      });
-    };
-    this.fixScrollPositionOnDrag = () => {
-      if (!this.draggingInTree || !this.lastDragEvent) {
-        return;
-      }
-      requestAnimationFrame(() => {
-        scrollToEdge(this.lastDragEvent, this.el, 10, 30);
-        requestAnimationFrame(this.fixScrollPositionOnDrag);
-      });
-    };
-  }
-  // /**
-  //  * Returns an array of the selected tree items, providing the id, caption and
-  //  * selected status.
-  //  */
-  // @Method()
-  // async getCheckedItems(): Promise<CheckedTreeItemInfo[]> {
-  //   const checkedItems = Array.from(
-  //     this.el.querySelectorAll(CHECKED_ITEMS)
-  //   ) as HTMLChTreeXListItemElement[];
-  //   return checkedItems.map(item => ({
-  //     id: item.id,
-  //     caption: item.caption,
-  //     selected: item.selected
-  //   }));
-  // }
-  handleContextMenuEvent(event) {
-    const treeItem = event.target.closest(TREE_ITEM_TAG_NAME);
-    if (!treeItem) {
-      return;
-    }
-    event.preventDefault();
-    this.itemContextmenu.emit({
-      id: treeItem.id,
-      itemRef: treeItem,
-      metadata: treeItem.metadata,
-      contextmenuEvent: event
-    });
-  }
-  // Set edit mode in items
-  handleKeyDownEvents(event) {
-    const keyHandler = this.keyDownEvents[event.key];
-    if (keyHandler) {
-      keyHandler(event);
-    }
-  }
-  // We can't use capture, because the dataTransfer info would not be defined
-  // Also, we cant use capture and setTimeout with 0 seconds, because the
-  // getData method can only be accessed during the dragstart and drop event
-  handleDragStart(event) {
-    // Reset the validity of the droppable zones with each new drag start
-    this.validDroppableZoneCache.clear();
-    this.draggingInTheDocument = true;
-    this.dragStartTimestamp = new Date().getTime();
-    this.draggedItems = JSON.parse(event.dataTransfer.getData(TEXT_FORMAT));
-  }
-  handleDragEnd() {
-    this.draggingInTheDocument = false;
-  }
-  handleDragEnter(event) {
-    this.cancelSubTreeOpening(null, true);
-    event.stopPropagation();
-    const containerTarget = event.target;
-    // Check if it is a valid item
-    if (containerTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME) {
-      return;
-    }
-    this.lastOpenSubTreeItem = containerTarget;
-    this.openSubTreeAfterCountdown(containerTarget);
-    if (this.validDroppableZone(event) === "valid") {
-      containerTarget.dragState = "enter";
-    }
-  }
-  handleDragLeave(event) {
-    const currentTarget = event.target;
-    if (currentTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME) {
-      return;
-    }
-    const treeItem = currentTarget;
-    treeItem.dragState = "none";
-    this.cancelSubTreeOpening(treeItem);
-  }
-  cancelSubTreeOpening(treeItem, forceClear = false) {
-    if (this.lastOpenSubTreeItem === treeItem || forceClear) {
-      clearTimeout(this.openSubTreeTimeout);
-      this.lastOpenSubTreeItem = null;
-    }
-  }
-  handleItemDrop(event) {
-    event.stopPropagation();
-    this.cancelSubTreeOpening(null, true);
-    const newContainer = event.target;
-    const draggedItems = JSON.parse(event.dataTransfer.getData(TEXT_FORMAT));
-    // The droppable zone must be checked, even if it was marked as not valid
-    // @todo Try to drop an item with high delays in droppable zone checking
-    if (this.validDroppableZone(event) !== "valid") {
-      return;
-    }
-    this.itemsDropped.emit({
-      newContainer: { id: newContainer.id, metadata: newContainer.metadata },
-      draggingSelectedItems: this.draggingSelectedItems,
-      draggedItems: draggedItems,
-      dropInTheSameTree: this.draggingInTree
-    });
-  }
-  handleItemDragStart(event) {
-    document.body.addEventListener("dragover", this.trackItemDrag, {
-      capture: true
-    });
-    this.currentDraggedItem = event.target;
-    const allItemsCanBeDragged = this.checkDragValidityAndUpdateDragInfo(event.detail);
-    if (!allItemsCanBeDragged) {
-      // This effect disables drop interactions in all page elements, so there
-      // is no need to capture and prevent the drop event in the window
-      event.detail.dragEvent.dataTransfer.effectAllowed = "none";
-      return;
-    }
-    this.draggingInTree = true;
-    if (this.scrollToEdgeOnDrag) {
-      this.fixScrollPositionOnDrag();
-    }
-  }
-  handleItemDragEnd() {
-    this.draggingInTree = false;
-    document.body.removeEventListener("dragover", this.trackItemDrag, {
-      capture: true
-    });
-    // Reset not allowed droppable ids
-    this.resetVariables();
-  }
-  /**
-   * Only sync the info about the selected items. It does not update the state
-   * of the previous selected items.
-   */
-  handleSelectedItemSync(event) {
-    event.stopPropagation();
-    const selectedItemInfo = event.detail;
-    // If the item is selected, add it to list
-    if (selectedItemInfo.selected) {
-      this.selectedItemsInfo.set(selectedItemInfo.id, selectedItemInfo);
-    }
-    else {
-      this.selectedItemsInfo.delete(selectedItemInfo.id);
-    }
-  }
-  handleSelectedItemChange(event) {
-    event.stopPropagation();
-    const selectedItemInfo = event.detail;
-    const selectedItemEl = event.target;
-    this.handleItemSelection(selectedItemEl, selectedItemInfo);
-  }
-  /**
-   * Clear all information about the selected items. This method is intended to
-   * be used when selected items are reordered and the selected references will
-   * no longer be useful.
-   */
-  async clearSelectedItemsInfo() {
-    this.clearSelectedItems();
-  }
-  /**
-   * Given an item id, it displays and scrolls into the item view.
-   */
-  async scrollIntoVisible(treeItemId) {
-    const itemRef = this.el.querySelector(`${TREE_ITEM_TAG_NAME}#${treeItemId}`);
-    if (!itemRef) {
-      return;
-    }
-    let parentItem = itemRef.parentElement;
-    // Expand all parents
-    while (parentItem.tagName.toLowerCase() === TREE_ITEM_TAG_NAME) {
-      parentItem.expanded = true;
-      parentItem = parentItem.parentElement;
-    }
-    // Wait until the parents are expanded
-    requestAnimationFrame(() => {
-      itemRef.scrollIntoView();
-    });
-  }
-  /**
-   * Update the information about the valid droppable zones.
-   * @param requestTimestamp Time where the request to the server was made. Useful to avoid having old information.
-   * @param newContainerId ID of the container where the drag is trying to be made.
-   * @param draggedItems Information about the dragged items.
-   * @param validDrop Current state of the droppable zone.
-   */
-  async updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
-    var _a;
-    if (!this.draggingInTheDocument ||
-      requestTimestamp <= this.dragStartTimestamp) {
-      return;
-    }
-    const droppableZoneKey = getDroppableZoneKey(newContainerId, draggedItems);
-    this.validDroppableZoneCache.set(droppableZoneKey, validDrop ? "valid" : "invalid");
-    const shouldUpdateDragEnterInCurrentContainer = ((_a = this.lastOpenSubTreeItem) === null || _a === void 0 ? void 0 : _a.id) === newContainerId;
-    if (shouldUpdateDragEnterInCurrentContainer) {
-      this.lastOpenSubTreeItem.dragState = "enter";
-    }
-  }
-  validDroppableZone(event) {
-    const containerTarget = event.target;
-    const cacheKey = getDroppableZoneKey(containerTarget.id, this.draggedItems);
-    let droppableZoneState = this.validDroppableZoneCache.get(cacheKey);
-    // Invalidate the cache, because the item is no longer waiting for its content to be downloaded
-    if (droppableZoneState === "temporal-invalid" &&
-      !containerTarget.lazyLoad &&
-      !containerTarget.downloading) {
-      droppableZoneState = null;
-    }
-    if (droppableZoneState != null) {
-      return droppableZoneState;
-    }
-    // Do not show drop zones if:
-    //   - The effect does not allow it.
-    //   - The drop is disabled in the container target.
-    //   - When dragging in the same tree, don't mark droppable zones if they are
-    //     the dragged items or their direct parents.
-    if (event.dataTransfer.effectAllowed === "none" ||
-      containerTarget.dropDisabled ||
-      (this.draggingInTree &&
-        (this.draggedIds.includes(containerTarget.id) ||
-          this.draggedParentIds.includes(containerTarget.id)))) {
-      this.validDroppableZoneCache.set(cacheKey, "invalid");
-      return "invalid";
-    }
-    // Disable drops when items need to lazy load their content first
-    if (containerTarget.lazyLoad || containerTarget.downloading) {
-      this.validDroppableZoneCache.set(cacheKey, "temporal-invalid");
-      return "temporal-invalid";
-    }
-    this.validDroppableZoneCache.set(cacheKey, "checking");
-    this.droppableZoneEnter.emit({
-      newContainer: {
-        id: containerTarget.id,
-        metadata: containerTarget.metadata
-      },
-      draggedItems: this.draggedItems
-    });
-    return "checking";
-  }
-  openSubTreeAfterCountdown(currentTarget) {
-    if (currentTarget.leaf || currentTarget.expanded) {
-      return;
-    }
-    this.openSubTreeTimeout = setTimeout(() => {
-      currentTarget.expanded = true;
-      this.expandedItemChange.emit({ id: currentTarget.id, expanded: true });
-    }, this.openSubTreeCountdown);
-  }
-  updateDropEffect(event) {
-    const itemTarget = event.target;
-    // Check if it is a valid item
-    if (itemTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME ||
-      itemTarget.closest(TREE_TAG_NAME) !== this.el) {
-      return;
-    }
-    const droppableZoneState = this.validDroppableZone(event);
-    if (droppableZoneState === "invalid" ||
-      droppableZoneState === "temporal-invalid") {
-      event.dataTransfer.dropEffect = "none";
-    }
-  }
-  resetVariables() {
-    this.draggedIds = [];
-    this.draggedParentIds = [];
-  }
-  /**
-   * First, it check if all items can be dragged. If so, it updates the
-   * dataTransfer in the drag event to store the ids and metadata of the
-   * dragged items. Also it updates the visual information of the dragged
-   * items.
-   * @returns If all selected items can be dragged.
-   */
-  checkDragValidityAndUpdateDragInfo(dragInfo) {
-    const draggedElement = dragInfo.elem;
-    const isDraggingSelectedItems = this.selectedItemsInfo.has(draggedElement.id);
-    this.draggingSelectedItems = isDraggingSelectedItems;
-    let dataTransferInfo = [];
-    let dragIsEnabledForAllItems;
-    if (isDraggingSelectedItems) {
-      const selectedItemKeys = [...this.selectedItemsInfo.keys()];
-      const selectedItemValues = [...this.selectedItemsInfo.values()];
-      const selectedItemCount = selectedItemKeys.length;
-      dragIsEnabledForAllItems = selectedItemValues.every(el => !el.itemRef.dragDisabled);
-      this.draggedIds = selectedItemKeys;
-      dataTransferInfo = selectedItemValues.map(el => ({
-        id: el.id,
-        metadata: el.metadata
-      }));
-      this.dragInfo =
-        selectedItemCount === 1
-          ? draggedElement.caption
-          : selectedItemCount.toString();
-    }
-    else {
-      dragIsEnabledForAllItems = !draggedElement.dragDisabled;
-      dataTransferInfo = [
-        { id: draggedElement.id, metadata: draggedElement.metadata }
-      ];
-      this.draggedIds = [draggedElement.id];
-      this.dragInfo = draggedElement.caption;
-    }
-    this.getDirectParentsOfDraggableItems(isDraggingSelectedItems);
-    // Update drag event info
-    const data = JSON.stringify(dataTransferInfo);
-    dragInfo.dragEvent.dataTransfer.setData(TEXT_FORMAT, data);
-    // We must keep the data binding and processing even if there is an item
-    // that can't be dragged, otherwise, other trees or element might behave
-    // unexpected when a dragstart event comes
-    return dragIsEnabledForAllItems;
-  }
-  getDirectParentsOfDraggableItems(draggingSelectedItems) {
-    if (!draggingSelectedItems) {
-      const parentTreeItemElem = this.currentDraggedItem.parentElement;
-      if (parentTreeItemElem.tagName.toLowerCase() === TREE_ITEM_TAG_NAME) {
-        this.draggedParentIds.push(parentTreeItemElem.id);
-      }
-      return;
-    }
-    // Dragging selected items
-    this.selectedItemsInfo.forEach(selectedItem => {
-      const parentId = selectedItem.parentId;
-      // parentId === "" when the item is in the first level of the tree
-      if (parentId !== "") {
-        this.draggedParentIds.push(parentId);
-      }
-    });
-  }
-  handleItemSelection(selectedItemEl, selectedItemInfo) {
-    // If the Control key was not pressed or multi selection is disabled,
-    // remove all selected items
-    if (!selectedItemInfo.ctrlKeyPressed || !this.multiSelection) {
-      // Don't update the state of the selected item if no needed
-      this.selectedItemsInfo.delete(selectedItemInfo.id);
-      this.selectedItemsInfo.forEach(treeItem => {
-        treeItem.itemRef.selected = false;
-      });
-      this.clearSelectedItems();
-      // Re-select the item
-      selectedItemEl.selected = selectedItemInfo.selected;
-    }
-    // If the item is selected, add it to list
-    if (selectedItemInfo.selected) {
-      this.selectedItemsInfo.set(selectedItemInfo.id, selectedItemInfo);
-    }
-    // Sync with UI model
-    this.selectedItemsChange.emit(this.selectedItemsInfo);
-  }
-  clearSelectedItems() {
-    this.selectedItemsInfo.clear();
-  }
-  disconnectedCallback() {
-    this.resetVariables();
-    // Remove dragover body event
-    this.handleItemDragEnd();
-  }
-  render() {
-    return (h(Host, { class: {
-        "ch-tree-x-dragging-item": this.draggingInTheDocument,
-        "ch-tree-x-not-dragging-item": !this.draggingInTheDocument,
-        "ch-tree-x--dragging-selected-items": this.draggingInTree && this.draggingSelectedItems,
-        "ch-tree-x-waiting-drop-processing": this.waitDropProcessing
-      } }, h("div", { role: "tree", part: "tree-x-container", "aria-multiselectable": this.multiSelection.toString(), class: "ch-tree-x-container" }, h("slot", null)), this.draggingInTree && (h("span", { "aria-hidden": "true", class: "ch-tree-x-drag-info" }, this.dragInfo))));
-  }
-  get el() { return this; }
-  static get style() { return treeXCss; }
-}, [4, "ch-tree-x", {
-    "multiSelection": [4, "multi-selection"],
-    "openSubTreeCountdown": [2, "open-sub-tree-countdown"],
-    "scrollToEdgeOnDrag": [4, "scroll-to-edge-on-drag"],
-    "waitDropProcessing": [4, "wait-drop-processing"],
-    "draggingInTheDocument": [32],
-    "draggingInTree": [32],
-    "clearSelectedItemsInfo": [64],
-    "scrollIntoVisible": [64],
-    "updateValidDropZone": [64]
-  }, [[2, "contextmenu", "handleContextMenuEvent"], [2, "keydown", "handleKeyDownEvents"], [9, "dragstart", "handleDragStart"], [11, "dragend", "handleDragEnd"], [3, "dragenter", "handleDragEnter"], [3, "dragleave", "handleDragLeave"], [1, "drop", "handleItemDrop"], [0, "itemDragStart", "handleItemDragStart"], [0, "itemDragEnd", "handleItemDragEnd"], [0, "selectedItemSync", "handleSelectedItemSync"], [0, "selectedItemChange", "handleSelectedItemChange"]]]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ch-tree-x"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ch-tree-x":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ChTreeX);
-      }
-      break;
-  } });
-}
-
-export { ChTreeX as C, defineCustomElement as d };

package/dist/esm/ch-checkbox.entry.js

@@ -1,89 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
-import { D as DISABLED_CLASS } from './reserverd-names-2a2d0fb3.js';
-
-const checkboxCss = "*,::before,::after{box-sizing:border-box}:host{display:flex;align-items:center;align-self:stretch;outline:unset;touch-action:manipulation;user-select:none}:host(.ch-checkbox--actionable) :is(.input,.label){cursor:pointer}.container{position:relative;width:min(1em, 20px);height:min(1em, 20px);border:1px solid var(--option-border-color, currentColor);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px color-mix(in srgb, currentColor 25%, transparent)}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:50%;height:50%;background-color:currentColor;opacity:0;pointer-events:none}.option--checked{opacity:1;-webkit-mask:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' %3E%3Cpath fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z' /%3E%3C/svg%3E\")}.option--indeterminate{opacity:1}.label{margin-inline-start:min(0.35em, 7px)}";
-
-const CHECKBOX_ID = "checkbox";
-const PARTS = (checked, indeterminate) => `${checked ? " checked" : ""}${indeterminate ? " indeterminate" : ""}`;
-const CheckBox = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.click = createEvent(this, "click", 7);
-    this.input = createEvent(this, "input", 7);
-    /**
-     * This attribute lets you specify if the element is disabled.
-     * If disabled, it will not fire any user interaction related event
-     * (for example, click event).
-     */
-    this.disabled = false;
-    /**
-     * True to highlight control when an action is fired.
-     */
-    this.highlightable = false;
-    /**
-     * `true` if the control's value is indeterminate.
-     */
-    this.indeterminate = false;
-    /**
-     * This attribute indicates that the user cannot modify the value of the control.
-     * Same as [readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)
-     * attribute for `input` elements.
-     */
-    this.readonly = false;
-    this.getValue = (checked) => checked ? this.checkedValue : this.unCheckedValue;
-    /**
-     * Checks if it is necessary to prevent the click from bubbling
-     */
-    this.handleClick = (event) => {
-      if (this.readonly || this.disabled) {
-        return;
-      }
-      event.stopPropagation();
-    };
-    this.handleChange = (event) => {
-      event.stopPropagation();
-      const inputRef = event.target;
-      const checked = inputRef.checked;
-      const value = this.getValue(checked);
-      this.checked = checked;
-      this.value = value;
-      inputRef.value = value; // Update input's value before emitting the event
-      this.input.emit(event);
-      if (this.highlightable) {
-        this.click.emit();
-      }
-    };
-  }
-  valueChanged() {
-    this.checked = this.value === this.checkedValue;
-  }
-  componentWillLoad() {
-    this.checked = this.value === this.checkedValue;
-  }
-  render() {
-    var _a;
-    const additionalParts = PARTS(this.checked, this.indeterminate);
-    return (h(Host, { class: {
-        [DISABLED_CLASS]: this.disabled,
-        "ch-checkbox--actionable": (!this.readonly && !this.disabled) ||
-          (this.readonly && this.highlightable)
-      } }, h("div", { class: {
-        container: true,
-        "container--checked": this.checked
-      }, part: `container${additionalParts}` }, h("input", { "aria-label": ((_a = this.accessibleName) === null || _a === void 0 ? void 0 : _a.trim()) !== "" &&
-        this.accessibleName !== this.caption
-        ? this.accessibleName
-        : null, id: this.caption ? CHECKBOX_ID : null, class: "input", part: "input", type: "checkbox", checked: this.checked, disabled: this.disabled || this.readonly, indeterminate: this.indeterminate, value: this.value, onClick: this.handleClick, onInput: this.handleChange }), h("div", { class: {
-        option: true,
-        "option--checked": this.checked && !this.indeterminate,
-        "option--indeterminate": this.indeterminate
-      }, part: `option${additionalParts}`, "aria-hidden": "true" })), this.caption && (h("label", { class: "label", part: "label", htmlFor: CHECKBOX_ID, onClick: this.handleClick }, this.caption))));
-  }
-  get element() { return getElement(this); }
-  static get watchers() { return {
-    "value": ["valueChanged"]
-  }; }
-};
-CheckBox.style = checkboxCss;
-
-export { CheckBox as ch_checkbox };