q2-tecton-elements 1.21.2 → 1.22.1

package/dist/components/q2-dropdown.js

@@ -0,0 +1,345 @@
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+import { s as setPopProperties, h as handleAriaLabel, i as isEventFromElement, o as overrideFocus, l as loc } from './index13.js';
+import { d as defineCustomElement$6 } from './index2.js';
+import { d as defineCustomElement$5 } from './index5.js';
+import { d as defineCustomElement$4 } from './index6.js';
+import { d as defineCustomElement$3 } from './index7.js';
+import { d as defineCustomElement$2 } from './index9.js';
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{display:inline-flex}.dropdown-container{position:relative;display:block}.dropdown-button-content{display:flex;align-items:center}.dropdown-button.unstyled .dropdown-button-content{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px))}.q2-element-dropdown{width:var(--tct-dropdown-width, var(--t-dropdown-width, 175px))}.q2-element-dropdown.dropup{bottom:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px))}q2-btn[color=primary]~.q2-element-dropdown.dropup,q2-btn[intent=workflow-primary]~.q2-element-dropdown.dropup{bottom:calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-primary-border-width, var(--t-btn-primary-border-width, 0)))}q2-btn[color=secondary]~.q2-element-dropdown.dropup,q2-btn[intent=workflow-secondary]~.q2-element-dropdown.dropup{bottom:calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-secondary-border-width, var(--t-btn-secondary-border-width, 0)))}q2-btn[intent=neutral]~.q2-element-dropdown.dropup{bottom:calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-neutral-border-width, var(--t-btn-neutral-border-width, 0)))}";
+
+const Q2Dropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.scheduledAfterRender = [];
+    this.dropdownItemSelector = 'q2-dropdown-item:not([disabled]):not([separator])';
+    ///// Actions ////////
+    this.focusToggle = () => {
+      const toggleBtn = this.hostElement.shadowRoot.querySelector('.dropdown-button');
+      toggleBtn && toggleBtn.dispatchEvent(new FocusEvent('focus'));
+    };
+    this.openDropdown = () => {
+      setPopProperties(this);
+      if (!this.dropdownOpen) {
+        this.dropdownOpen = true;
+        this.scheduledAfterRender.push(this.resizeIframe);
+      }
+    };
+    this.closeDropdown = () => {
+      if (this.dropdownOpen) {
+        this.dropdownOpen = false;
+        this.scheduledAfterRender.push(() => {
+          this.resizeIframe();
+        });
+      }
+    };
+    this.onClickElsewhere = (event) => {
+      const target = event.target;
+      if (target.localName === 'click-elsewhere') {
+        event.stopPropagation();
+        this.closeDropdown();
+      }
+    };
+    this.onToggleClick = () => {
+      if (this.dropdownOpen) {
+        this.focusToggle();
+        this.closeDropdown();
+        return;
+      }
+      this.focusToggle();
+      this.openDropdown();
+    };
+    this.onToggleKeydown = (event) => {
+      if (['ArrowUp', 'Up'].includes(event.key)) {
+        event.preventDefault();
+        this.openDropdown();
+        this.focusLastItem();
+        return;
+      }
+      if (['ArrowDown', 'Down'].includes(event.key)) {
+        event.preventDefault();
+        this.openDropdown();
+        this.focusFirstItem();
+        return;
+      }
+      if (['Escape', 'Esc'].includes(event.key)) {
+        event.preventDefault();
+        this.focusToggle();
+        this.closeDropdown();
+        return;
+      }
+    };
+    this.onDropdownMenuClick = (event) => {
+      if (event.target.localName !== 'q2-dropdown-item') {
+        return;
+      }
+      const item = event.target;
+      if (!item.disabled && !item.separator) {
+        this.focusToggle();
+        this.closeDropdown();
+      }
+    };
+    this.onDropdownMenuKeydown = (event) => {
+      if (['Escape', 'Esc'].includes(event.key)) {
+        this.closeDropdown();
+        this.focusToggle();
+        return;
+      }
+      if (event.target.localName !== 'q2-dropdown-item') {
+        return;
+      }
+      const item = event.target;
+      if (['ArrowUp', 'Up'].includes(event.key)) {
+        event.preventDefault();
+        this.focusAdjacentItem(item, 'prev');
+        return;
+      }
+      if (['ArrowDown', 'Down'].includes(event.key)) {
+        event.preventDefault();
+        this.focusAdjacentItem(item, 'next');
+        return;
+      }
+    };
+    this.type = 'icon';
+    this.icon = undefined;
+    this.label = undefined;
+    this.hideLabel = undefined;
+    this.ariaLabel = undefined;
+    this.disabled = undefined;
+    this.popDirection = undefined;
+    this.name = undefined;
+    this.context = undefined;
+    this.contextValue = undefined;
+    this.resolvedType = undefined;
+    this.block = undefined;
+    this.dropdownOpen = false;
+  }
+  resizeIframe() {
+    return window.TectonElements && window.TectonElements.resizeIframe && window.TectonElements.resizeIframe();
+  }
+  resolveMenu() {
+    return (this.name &&
+      window.TectonElements &&
+      window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType));
+  }
+  orchestrateResolvedMenuItems() {
+    if (!this.name || !this.context) {
+      // this is only for contextual menu outlets
+      this.removeResolvedElements();
+      return;
+    }
+    this.resolveMenuItemElements()
+      .then(data => {
+      this.removeResolvedElements();
+      data.forEach(element => {
+        this.hostElement.appendChild(element);
+      });
+    })
+      .catch(err => {
+      this.removeResolvedElements();
+      throw err;
+    });
+  }
+  removeResolvedElements() {
+    const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');
+    resolvedElements.forEach(element => this.hostElement.removeChild(element));
+  }
+  resolveMenuItemElements() {
+    return this.resolveMenu().then(datas => {
+      return datas.map(menuItemData => {
+        let onClickFn;
+        let queryParams;
+        if (menuItemData['tct-ctxid']) {
+          queryParams = {};
+          queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];
+        }
+        switch (menuItemData.action) {
+          case 'navigateTo':
+            onClickFn = () => this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);
+            break;
+          case 'showOverpanel':
+            onClickFn = () => this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);
+            break;
+        }
+        const newDropdownItem = document.createElement('q2-dropdown-item');
+        newDropdownItem.setAttribute('value', menuItemData.itemLabel);
+        newDropdownItem.classList.add('resolved-menu-item');
+        newDropdownItem.innerHTML = menuItemData.itemLabel;
+        newDropdownItem.onclick = onClickFn;
+        return newDropdownItem;
+      });
+    });
+  }
+  navigateTo(featureName, moduleName, queryParams) {
+    return window.TectonElements && window.TectonElements.navigateTo(featureName, moduleName, queryParams);
+  }
+  showOverpanel(overpanelPath, params) {
+    return window.TectonElements && window.TectonElements.showOverpanel(overpanelPath, params, undefined, true);
+  }
+  get hasCustomButton() {
+    return !!this.hostElement.querySelector('[slot=custom-dropdown-button]');
+  }
+  get toggleButtonProps() {
+    const allowedIntents = ['primary', 'secondary', 'neutral'];
+    const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];
+    const type = allowedTypes.includes(this.type) ? this.type : '';
+    const icon = type === 'icon';
+    const fab = type === 'fab';
+    const custom = type === 'custom';
+    let intent;
+    if (allowedIntents.includes(type)) {
+      intent = type === 'neutral' ? type : `workflow-${type}`;
+    }
+    const active = this.dropdownOpen;
+    const disabled = !!this.disabled;
+    const ariaExpanded = this.dropdownOpen;
+    const className = `dropdown-button${!icon && !fab && !intent ? ' unstyled' : ''}`;
+    return {
+      icon,
+      fab,
+      intent,
+      active,
+      disabled,
+      ariaExpanded,
+      className,
+      custom,
+    };
+  }
+  //////// Observers //////////
+  ariaLabelObserver() {
+    handleAriaLabel(this);
+  }
+  nameHandler() {
+    this.orchestrateResolvedMenuItems();
+  }
+  contextHandler() {
+    this.orchestrateResolvedMenuItems();
+  }
+  contextValueHandler() {
+    this.orchestrateResolvedMenuItems();
+  }
+  resolvedTypeHandler() {
+    this.orchestrateResolvedMenuItems();
+  }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.controlElement.shadowRoot.querySelector('button').focus();
+  }
+  ///// Lifecycle Hooks ////////
+  componentWillLoad() {
+    handleAriaLabel(this);
+  }
+  componentDidLoad() {
+    this.orchestrateResolvedMenuItems();
+    overrideFocus(this.hostElement);
+  }
+  componentDidRender() {
+    setTimeout(() => {
+      this.scheduledAfterRender.forEach(fn => fn());
+      this.scheduledAfterRender = [];
+    }, 25);
+  }
+  focusFirstItem() {
+    const firstItem = this.hostElement.querySelector(`${this.dropdownItemSelector}:first-child`);
+    firstItem && firstItem.dispatchEvent(new FocusEvent('focus'));
+  }
+  focusLastItem() {
+    const lastItem = this.hostElement.querySelector(`${this.dropdownItemSelector}:last-child`);
+    lastItem && lastItem.dispatchEvent(new FocusEvent('focus'));
+  }
+  focusAdjacentItem(activeItem, direction) {
+    const dropdownItems = Array.from(this.hostElement.querySelectorAll(this.dropdownItemSelector));
+    const activeIndex = dropdownItems.indexOf(activeItem);
+    if (activeIndex === -1) {
+      return;
+    }
+    let targetIndex = 0;
+    if (direction === 'next') {
+      targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;
+    }
+    else if (direction === 'prev') {
+      if (activeIndex > 0) {
+        targetIndex = activeIndex - 1;
+      }
+      else {
+        targetIndex = dropdownItems.length - 1;
+      }
+    }
+    const targetItem = dropdownItems[targetIndex];
+    targetItem && targetItem.dispatchEvent(new Event('focus'));
+  }
+  render() {
+    const btnProps = this.toggleButtonProps;
+    return (h("click-elsewhere", { class: `dropdown-container${this.dropdownOpen ? ' dropdown-open' : ''}`, onChange: this.onClickElsewhere }, h("q2-btn", { ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block }, this.hasCustomButton ? (h("div", { "test-id": "dropdownCustom", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "custom-dropdown-button" }))) : (h(Fragment, null, this.icon ? h("q2-icon", { type: this.icon }) : ' ', this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label)))))), h("div", { ref: el => (this.dropdownContainer = el), class: `q2-element-dropdown ${this.privatePopDirection === 'up' ? 'dropup' : ''}`, role: "menu", onClick: this.onDropdownMenuClick, onKeyDown: this.onDropdownMenuKeydown }, h("div", null, h("slot", null), this.dropdownOpen && (h("q2-btn", { class: "sr close-dropdown", onFocus: this.closeDropdown }))))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "ariaLabel": ["ariaLabelObserver"],
+    "name": ["nameHandler"],
+    "context": ["contextHandler"],
+    "contextValue": ["contextValueHandler"],
+    "resolvedType": ["resolvedTypeHandler"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-dropdown", {
+    "type": [513],
+    "icon": [513],
+    "label": [513],
+    "hideLabel": [516, "hide-label"],
+    "ariaLabel": [513, "aria-label"],
+    "disabled": [516],
+    "popDirection": [513, "pop-direction"],
+    "name": [513],
+    "context": [513],
+    "contextValue": [513, "context-value"],
+    "resolvedType": [513, "resolved-type"],
+    "block": [516],
+    "dropdownOpen": [32]
+  }, [[0, "focus", "delegateFocus"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-dropdown", "click-elsewhere", "q2-btn", "q2-dropdown-item", "q2-icon", "q2-loading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-dropdown":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Dropdown$1);
+      }
+      break;
+    case "click-elsewhere":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "q2-btn":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "q2-dropdown-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "q2-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2Dropdown = Q2Dropdown$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Dropdown, defineCustomElement };

package/dist/components/q2-editable-field.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2EditableField extends Components.Q2EditableField, HTMLElement {}
+export const Q2EditableField: {
+  prototype: Q2EditableField;
+  new (): Q2EditableField;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-editable-field.js

@@ -0,0 +1,220 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { l as loc, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index13.js';
+import { d as defineCustomElement$6 } from './index4.js';
+import { d as defineCustomElement$5 } from './index5.js';
+import { d as defineCustomElement$4 } from './index7.js';
+import { d as defineCustomElement$3 } from './index8.js';
+import { d as defineCustomElement$2 } from './index9.js';
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";
+
+const Q2EditableField$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.input = createEvent(this, "input", 7);
+    this.change = createEvent(this, "change", 7);
+    this.scheduledAfterRender = [];
+    this.defaultValue = this.value;
+    //////// ACTIONS /////////
+    this.inputInput = (e) => {
+      e.stopPropagation();
+      this.input.emit(e.detail);
+      this.formattedValue = e.detail.formattedValue;
+      this.innerValue = e.detail.value;
+    };
+    this.inputChange = (e) => {
+      e.stopPropagation();
+    };
+    this.inputKeyDown = (e) => {
+      if (e.key === 'Escape' || e.key === 'Esc') {
+        e.preventDefault();
+        this.cancelClick();
+        return;
+      }
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        this.saveClick();
+        return;
+      }
+    };
+    this.inputClick = (event) => {
+      event.stopPropagation();
+    };
+    this.saveClick = (event) => {
+      event && event.stopPropagation();
+      const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;
+      this.defaultValue = valueFromInputProp;
+      this.change.emit({
+        editing: false,
+        name: 'save',
+        value: this.innerValue || valueFromInputProp,
+        formattedValue: this.formattedValue || valueFromInputProp,
+      });
+      setTimeout(() => {
+        const { errors = [] } = this;
+        if (!errors.length)
+          return;
+        this.hostElement.focus();
+      }, 1);
+    };
+    this.editClick = (event) => {
+      event === null || event === void 0 ? void 0 : event.stopPropagation();
+      this.change.emit({ editing: true, name: 'edit' });
+    };
+    this.cancelClick = (event) => {
+      event === null || event === void 0 ? void 0 : event.stopPropagation();
+      this.change.emit({ editing: false, name: 'cancel' });
+      this.hostElement.shadowRoot.querySelector('q2-input').value = this.defaultValue;
+    };
+    this.value = '';
+    this.editing = false;
+    this.label = '';
+    this.hideLabel = undefined;
+    this.ariaLabel = undefined;
+    this.type = undefined;
+    this.formatModifier = undefined;
+    this.truncated = undefined;
+    this.maxlength = undefined;
+    this.persistentLabel = undefined;
+    this.disabled = undefined;
+    this.hints = undefined;
+    this.errors = undefined;
+  }
+  get locLabel() {
+    return (this.label && loc(this.label)) || '';
+  }
+  /////// LIFECYCLE HOOKS //////
+  componentWillLoad() {
+    handleAriaLabel(this);
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+  }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
+  //////// OBSERVERS //////////
+  errorsObserver() {
+    var _a;
+    const { editing, errors = [] } = this;
+    const focusedElement = this.hostElement.shadowRoot.activeElement;
+    const isInputFocused = (_a = (focusedElement === null || focusedElement === void 0 ? void 0 : focusedElement.tagName) === 'Q2-INPUT') !== null && _a !== void 0 ? _a : false;
+    const hasErrors = errors.length;
+    if (isInputFocused || !focusedElement || !editing || !hasErrors)
+      return;
+    this.q2InputElement.focus();
+  }
+  ariaLabelObserver() {
+    handleAriaLabel(this);
+  }
+  observesEditing(newValue, oldValue) {
+    if (newValue === oldValue)
+      return;
+    this.scheduledAfterRender.push(this.hostElement.focus);
+  }
+  get wrapperClass() {
+    return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;
+  }
+  ///////// HOST ELEMENT EVENTS //////
+  onHostElementChange(event) {
+    if (!isEventFromElement(event, this.hostElement) || this.hostElement.onchange)
+      return;
+    switch (event.detail.name) {
+      case 'save':
+        this.value = event.detail.value;
+        break;
+      case 'cancel':
+        this.q2InputElement.value = this.value;
+        break;
+    }
+    this.editing = event.detail.editing;
+  }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.hostElement.shadowRoot.querySelector(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();
+  }
+  render() {
+    return (h("div", null, this.generateEditStateDOM(), this.generateReadStateDOM()));
+  }
+  generateEditStateDOM() {
+    return (h("div", { class: this.wrapperClass, hidden: !this.editing }, h("q2-input", { ref: el => (this.q2InputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: (Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined, errors: (Array.isArray(this.errors) && this.errors.map(str => loc(str))) || undefined, type: this.type, disabled: this.disabled, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onInput: this.inputInput, onChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }), h("q2-btn", { class: "cancel-edit", label: `${loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: this.cancelClick }, h("q2-icon", { type: "close" })), h("q2-btn", { class: "save-edit", label: `${loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: this.saveClick }, h("q2-icon", { type: "checkmark" }))));
+  }
+  generateReadStateDOM() {
+    if (this.persistentLabel && this.locLabel) {
+      return (h("div", { class: this.wrapperClass, hidden: this.editing }, h("dl", null, h("dt", { class: "read-state-label" }, this.locLabel), h("dd", null, h("span", { class: "text-wrapper" }, this.value), this.generateEditBtn()))));
+    }
+    return (h("div", { class: this.wrapperClass, hidden: this.editing }, h("div", { class: "text-wrapper" }, this.value), this.generateEditBtn()));
+  }
+  generateEditBtn() {
+    return (h("q2-btn", { ref: el => (this.q2EditBtnElement = el), class: "begin-edit", label: `${loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, disabled: this.disabled, "test-id": "editButton", onClick: this.editClick }, h("q2-icon", { type: "edit" })));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "errors": ["errorsObserver"],
+    "ariaLabel": ["ariaLabelObserver"],
+    "editing": ["observesEditing"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-editable-field", {
+    "value": [1537],
+    "editing": [1540],
+    "label": [1537],
+    "hideLabel": [1540, "hide-label"],
+    "ariaLabel": [1537, "aria-label"],
+    "type": [513],
+    "formatModifier": [513, "format-modifier"],
+    "truncated": [513],
+    "maxlength": [514],
+    "persistentLabel": [516, "persistent-label"],
+    "disabled": [516],
+    "hints": [16],
+    "errors": [16]
+  }, [[0, "change", "onHostElementChange"], [0, "focus", "delegateFocus"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-editable-field", "q2-badge", "q2-btn", "q2-icon", "q2-input", "q2-loading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-editable-field":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2EditableField$1);
+      }
+      break;
+    case "q2-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "q2-btn":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "q2-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "q2-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2EditableField = Q2EditableField$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2EditableField, defineCustomElement };

package/dist/components/q2-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2Icon extends Components.Q2Icon, HTMLElement {}
+export const Q2Icon: {
+  prototype: Q2Icon;
+  new (): Q2Icon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-icon.js

@@ -0,0 +1,6 @@
+import { Q as Q2Icon$1, d as defineCustomElement$1 } from './index7.js';
+
+const Q2Icon = Q2Icon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Icon, defineCustomElement };

package/dist/components/q2-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2Input extends Components.Q2Input, HTMLElement {}
+export const Q2Input: {
+  prototype: Q2Input;
+  new (): Q2Input;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-input.js

@@ -0,0 +1,6 @@
+import { Q as Q2Input$1, d as defineCustomElement$1 } from './index8.js';
+
+const Q2Input = Q2Input$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Input, defineCustomElement };

package/dist/components/q2-loading-element.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2LoadingElement extends Components.Q2LoadingElement, HTMLElement {}
+export const Q2LoadingElement: {
+  prototype: Q2LoadingElement;
+  new (): Q2LoadingElement;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;