@genexus/genexus-ide-ui 0.0.20 → 0.0.22

package/dist/components/gxg-list-box-item.js

@@ -1,181 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { s as state } from './store.js';
-import { c as commonClassesNames } from './classesNames.js';
-import { e as exportParts } from './export-parts.js';
-import { d as defineCustomElement$6 } from './icon.js';
-import { d as defineCustomElement$5 } from './form-checkbox.js';
-import { d as defineCustomElement$4 } from './icon2.js';
-import { d as defineCustomElement$3 } from './gxg-label2.js';
-import { d as defineCustomElement$2 } from './tooltip.js';
-
-const listBoxItemCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--color-background-disabled) !important;color:var(--color-on-background--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{display:block;font-family:var(--font-family-primary);font-size:inherit;color:inherit;display:flex;box-sizing:border-box;align-items:center;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none;outline:none}:host .container{display:flex;align-items:center;padding:var(--spacing-comp-00) var(--spacing-comp-02);width:100%;height:var(--gxg-list-item-height--spaced);box-sizing:border-box}:host .icon{margin-inline-end:var(--spacing-comp-01);flex-shrink:0}:host gxg-form-checkbox{margin-inline-end:var(--spacing-comp-01)}:host gxg-form-checkbox::part(box){outline:none}:host(:not([disabled])){cursor:pointer !important}:host(:hover:not([selected])){background-color:var(--gxg-background-color-item-hover)}:host(.has-icon.no-checkbox) .container{padding-inline-start:var(--spacing-comp-01)}:host([selected]){background-color:var(--gxg-background-color-item-selected);color:var(--gxg-color-item-active)}:host([highlighted]){background-color:var(--gxg-background-color-item-active);color:var(--color-always-white)}:host(.large) .container{padding:var(--spacing-comp-01)}";
-
-const GxgListboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.itemClicked = createEvent(this, "itemClicked", 7);
-    this.itemLoaded = createEvent(this, "itemLoaded", 7);
-    this.itemSelected = createEvent(this, "itemSelected", 7);
-    this.checkboxStateChanged = createEvent(this, "checkboxStateChanged", 7);
-    this.parts = {
-      checkbox: "checkbox",
-    };
-    /**
-     * Any icon that belongs to Gemini icon library: https://gx-gemini.netlify.app/?path=/story/icons
-     */
-    this.icon = undefined;
-    /**
-     * The presence of this attribute sets this item as selected
-     */
-    this.selected = false;
-    /**
-     * The presence of this attribute sets this item as highlighted
-     */
-    this.highlighted = false;
-    /**
-     * The presence of this attribute sets this item as active (it is as if it was focused)
-     * Only one item at a time should be active.
-     */
-    this.active = false;
-    /**
-     * This property is set by the list-box item. It should not be set by the user.
-     */
-    this.index = null;
-    /**
-     * The presence of this attribute emits the 'checkboxChanged' event every time a checkbox value is changed.
-     */
-    this.emitCheckboxChange = false;
-    /**
-     * The item value. If value is not provided, the value will be the item innerHTML.
-     */
-    this.value = undefined;
-    /**
-     * The presence of this attribute will add a checkbox to the item.
-     */
-    this.checkbox = false;
-    /**
-     * The presence of this attribute will make the checkbox checked.
-     */
-    this.checked = false;
-    this.mouseOver = false;
-    this.handleCheckboxClick = (e) => {
-      e.stopPropagation();
-      e.target.checked
-        ? (this.checked = true)
-        : (this.checked = false);
-    };
-    this.attachExportParts = () => {
-      const part = this.el.getAttribute("part");
-      const exportPartsResult = exportParts(part, this.parts);
-      exportPartsResult.length && (this.exportparts = exportPartsResult);
-    };
-  }
-  checkboxChangedHandler(e) {
-    const checked = e.detail.value;
-    this.emitCheckboxChange &&
-      this.checkboxStateChanged.emit({
-        checkedItem: this.el,
-        checked: checked,
-      });
-  }
-  iconColor() {
-    if (this.disabled) {
-      return "disabled";
-    }
-    else if (this.selected || this.highlighted || this.mouseOver) {
-      return "negative";
-    }
-    else {
-      return "auto";
-    }
-  }
-  componentWillLoad() {
-    this.attachExportParts();
-  }
-  componentDidLoad() {
-    this.itemLoaded.emit();
-  }
-  itemClickedFunc(e) {
-    this.itemClicked.emit({
-      clickedItem: this.el,
-      ctrlKey: e.ctrlKey,
-      cmdKey: e.metaKey,
-      shiftKey: e.shiftKey,
-      index: this.index,
-    });
-  }
-  onMouseOver() {
-    this.mouseOver = true;
-  }
-  onMouseOut() {
-    this.mouseOver = false;
-  }
-  render() {
-    return (h(Host, { class: {
-        "has-icon": this.icon !== undefined,
-        "no-checkbox": !this.checkbox,
-        large: state.large,
-        [commonClassesNames["DISABLED_CLASS"]]: this.disabled,
-      }, onClick: this.itemClickedFunc.bind(this),
-      // onMouseOver={this.onMouseOver.bind(this)}
-      // onMouseOut={this.onMouseOut.bind(this)}
-      exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: { container: true, "form-element": true } }, this.checkbox && !this.disabled ? (h("gxg-form-checkbox", { tabindex: "-1", checked: this.checked, onClick: this.handleCheckboxClick, disabled: this.disabled, part: this.parts.checkbox })) : null, this.icon !== undefined ? (h("gxg-icon", { class: "icon", color: this.iconColor(), size: "regular", type: this.icon })) : null, h("slot", null))));
-  }
-  get el() { return this; }
-  static get style() { return listBoxItemCss; }
-}, [1, "gxg-list-box-item", {
-    "disabled": [516],
-    "icon": [1],
-    "selected": [516],
-    "highlighted": [516],
-    "active": [516],
-    "index": [514],
-    "emitCheckboxChange": [4, "emit-checkbox-change"],
-    "value": [8],
-    "checkbox": [4],
-    "checked": [4],
-    "mouseOver": [32]
-  }, [[0, "change", "checkboxChangedHandler"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["gxg-list-box-item", "ch-icon", "gxg-form-checkbox", "gxg-icon", "gxg-label", "gxg-tooltip"];
-  components.forEach(tagName => { switch (tagName) {
-    case "gxg-list-box-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, GxgListboxItem);
-      }
-      break;
-    case "ch-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "gxg-form-checkbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "gxg-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "gxg-label":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "gxg-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { G as GxgListboxItem, d as defineCustomElement$1 } from './list-box-item.js';
 
 const GxgListBoxItem = GxgListboxItem;
 const defineCustomElement = defineCustomElement$1;