import { proxyCustomElement, HTMLElement, createEvent, h, forceUpdate, Host } from '@stencil/core/internal/client';
import { g as getIconName, d as defineCustomElement$1 } from './field-config2.js';

const fieldItemCss = ".sc-field-item-h{width:100%;display:flex;padding:12px 8px;border-radius:var(--border--radius-small, 4px);border:1px solid #dce0e8;cursor:grab;align-items:center;height:42px;max-height:42px;background:#FAFCFF}.full-width.sc-field-item-h{width:100%}ez-icon.sc-field-item{--ez-icon--color:#A2ABB9}.icons.sc-field-item{display:flex}.label.sc-field-item{display:flex;flex-grow:1;padding-left:8px;font-size:14px;align-items:center;gap:4px;height:22px}.label-text.sc-field-item{overflow:hidden;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;height:auto;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;display:-webkit-box;-o-text-overflow:ellipsis;text-overflow:ellipsis;word-break:break-word}.required-mark.sc-field-item{color:#cf3105;background:#F7E0E5;width:12px;height:12px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding-top:5px;font-size:16px;align-self:self-start}.actions.sc-field-item{display:flex;flex-direction:row;align-content:center;gap:4px}ez-button.sc-field-item{width:24px;align-items:center;justify-content:center;display:flex}.sc-field-item-h .hiddeble.sc-field-item{transition:0.2s ease-in-out;visibility:hidden;opacity:0}.sc-field-item-h:hover .hiddeble.sc-field-item{visibility:visible;opacity:1}";

const FieldItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.setFieldAsAvailable = createEvent(this, "setFieldAsAvailable", 7);
    this.addFieldToGuide = createEvent(this, "addFieldToGuide", 7);
    this.fieldDescriptor = undefined;
    this.fieldConfig = undefined;
    this.onLayoutConfig = false;
    this.dataUnit = undefined;
    this.messagesBuilder = undefined;
  }
  observeDataUnit() {
    this.loadFieldDescriptor();
  }
  isRequired() {
    var _a, _b;
    const fieldMD = this.dataUnit && this.dataUnit.getField((_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.name);
    return (fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.required) === true || ((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.required) === true;
  }
  async showFieldConfig() {
    var _a;
    await ((_a = this._refFieldConfig) === null || _a === void 0 ? void 0 : _a.show(this._editIconRef));
  }
  renderFieldConfig() {
    if (this.onLayoutConfig && this.dataUnit && this.messagesBuilder) {
      return (h("field-config", { ref: (ref) => this._refFieldConfig = ref, fieldConfig: this.fieldConfig, dataUnit: this.dataUnit, fieldDescriptor: this.fieldDescriptor, messagesBuilder: this.messagesBuilder, onFieldConfigChanged: () => forceUpdate(this) }));
    }
  }
  getMessage(key, params) {
    return this.messagesBuilder.getMessage(key, params);
  }
  renderActions() {
    if (this.onLayoutConfig) {
      return (h("div", { class: 'actions hiddeble' }, h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.setFieldAsAvailable.emit(this.fieldConfig), size: "medium", iconName: 'minus', title: this.getMessage('snkFieldConfig.titleRemove') }), h("ez-button", { ref: ref => this._editIconRef = ref, mode: "icon", class: "ez-button--tertiary", onClick: this.showFieldConfig.bind(this), iconName: 'edit', size: "medium", title: this.getMessage('snkFieldConfig.titleEdit') })));
    }
    return (h("div", { class: 'actions hiddeble' }, h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.addFieldToGuide.emit(this.fieldConfig), iconName: 'plus', size: "medium", title: this.getMessage('snkFieldConfig.titleAddToLayout') })));
  }
  loadFieldDescriptor() {
    if (this.dataUnit) {
      this.fieldDescriptor = this.dataUnit.getField(this.fieldConfig.name);
    }
  }
  renderRequiredMark() {
    if (this.isRequired())
      return h("span", { class: 'required-mark' }, "*");
  }
  componentWillLoad() {
    this.loadFieldDescriptor();
  }
  getFieldLabel() {
    var _a, _b;
    if ((_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.label)
      return this.fieldConfig.label;
    return (_b = this.fieldDescriptor) === null || _b === void 0 ? void 0 : _b.label;
  }
  render() {
    var _a;
    return (h(Host, { class: !this.onLayoutConfig ? 'full-width' : "" }, h("div", { class: 'icons' }, h("ez-icon", { iconName: "drag-indicator" }), h("ez-icon", { iconName: getIconName((_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.userInterface) })), h("span", { class: 'label' }, h("span", { class: 'label-text', title: this.getFieldLabel() }, this.getFieldLabel()), this.renderRequiredMark()), this.renderActions(), this.renderFieldConfig()));
  }
  static get watchers() { return {
    "dataUnit": ["observeDataUnit"]
  }; }
  static get style() { return fieldItemCss; }
}, [2, "field-item", {
    "fieldConfig": [8, "field-config"],
    "onLayoutConfig": [4, "on-layout-config"],
    "dataUnit": [16],
    "messagesBuilder": [1040],
    "fieldDescriptor": [32]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["field-item", "field-config"];
  components.forEach(tagName => { switch (tagName) {
    case "field-item":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, FieldItem);
      }
      break;
    case "field-config":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}

export { FieldItem as F, defineCustomElement as d };
