Update _furnview - 23.6.2026, 09:44:32 [LL]

dh_ackergaul

vor 3 Tagen 5bbf43c1b146439ab882815c12ed6292f1d7b4df

 manufacturer/_furnview/furnplan-web/node_modules/@dh-software/request-configurator-ui/dist/request-configurator-ui.mjs

@@ -1,73 +1,183 @@
import { unsafeCSS, LitElement, html } from 'lit';
import { state, property, customElement } from 'lit/decorators.js';
import{unsafeCSS as u,LitElement as c,html as a}from"lit";import{state as d,property as h,customElement as g}from"lit/decorators.js";const b=`:host {
  display: flex;
  justify-items: center;
}

const requestConfigurationComponent = ":host {\n  display: flex;\n  justify-items: center;\n}\n\n.header-label {\n  padding: 12px;\n  --label-font-weight:bold;\n}\n\n.configuration-container {\n  justify-items: center;\n  border-radius: 0.9rem;\n  width: fit-content;\n  height: auto;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n  border: solid #EEEEEE 2px;\n  background: #f0f0f0;\n  display: grid;\n}\n.configuration-container .reset-conf {\n  width: fit-content;\n  padding: 5px;\n  border: none;\n  border-radius: 8px;\n  font-size: 12px;\n  background-color: red;\n  cursor: pointer;\n  color: white;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n  margin: 7px;\n}\n\n.field-input {\n  width: 240px;\n}\n\n.row-option-container {\n  display: flex;\n  justify-content: center;\n  padding: 2px 0;\n  column-gap: 10px;\n}\n\n.buttons-container {\n  display: flex;\n  gap: 10px;\n}\n\n.add-item-button {\n  width: 55px;\n  padding: 2px;\n  border: none;\n  border-radius: 8px;\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n}\n\n.delete-item-button {\n  width: 55px;\n  padding: 2px;\n  border: none;\n  border-radius: 8px;\n  font-size: 14px;\n  cursor: pointer;\n  background-color: red;\n  color: white;\n  transition: all 0.2s ease;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n}\n\n.add-group-button {\n  width: 55px;\n  padding: 2px;\n  border: none;\n  border-radius: 8px;\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n  background-color: #c5c5c5;\n}\n\n.delete-group-button {\n  width: 100px;\n  padding: 2px;\n  border: none;\n  border-radius: 8px;\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n  background-color: #f7931e;\n  color: white;\n}\n\n.add-group-button {\n  background-color: #c5c5c5;\n  color: white;\n}\n.add-group-button:hover {\n  background-color: #aaaaaa;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n  transform: translateY(-1px);\n}\n\n.delete-item-button:hover {\n  background-color: #c70404;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n  transform: translateY(-1px);\n}\n\n.delete-group-button:hover {\n  background-color: #f7931e;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n  transform: translateY(-1px);\n}\n\n.row {\n  padding: 5px;\n  margin: 9px;\n  display: flex;\n  gap: 10px;\n  background: #e6e6e6;\n  border: none;\n  border-radius: 7px;\n  justify-content: center;\n}\n\n.row-item {\n  display: grid;\n  gap: 10px;\n}\n\n.buttons-container {\n  display: flex;\n  justify-content: center;\n}\n\ndialog {\n  border: none;\n  border-radius: 10px;\n  padding: 20px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n  width: 320px;\n}\n\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.dialog-buttons {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: 12px;\n}\n\n.configuraion-container {\n  margin: 10px;\n}\n\n.configuration-group {\n  border: none;\n  padding: 5px;\n  background: #fffdfd;\n  border-radius: 4px;\n  margin: 5px;\n}";
.header-label {
  padding: 12px;
  --label-font-weight:bold;
}

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let RequestConfigurationComponent = class extends LitElement {
  constructor() {
    super(...arguments);
    this.showDialog = false;
    this.currentRowIndex = null;
    this.currentFieldInsertIndex = null;
    this.showInputTagField = true;
    this.propertyData = {
      entries: []
    };
    this.defaultEntries = {
      entries: [
        [
          { name: "name", i18n: "20322", placeholder: "Vorname*", required: true, autocomplete: "given-name" },
          { name: "surname", i18n: "20323", placeholder: "Nachname*", required: true, autocomplete: "family-name" }
        ],
        [
          { name: "phone", i18n: "20381", placeholder: "Telefon*", required: true, autocomplete: "tel" },
          {
            name: "email",
            i18n: "fv.email.homeviewer.send_request_customer.email",
            placeholder: "E-Mail*",
            required: true,
            autocomplete: "email"
          }
        ],
        [
          { name: "customerNo", i18n: "1610", placeholder: "Kundennummer", autocomplete: "section-customerNo" },
          { name: "adress", i18n: "20228", placeholder: "Adresse", autocomplete: "street-address" }
        ],
        [
          { name: "companyName", i18n: "25024", placeholder: "Firmenname", autocomplete: "organization" },
          { name: "postcode", i18n: "25026", placeholder: "Postleitzahl", autocomplete: "postal-code" }
        ],
        [
          {
            inputTag: "fv-text-box",
            name: "message",
            i18n: "60099",
            placeholder: "Ihre Nachricht",
            autocomplete: "off"
          }
        ]
      ]
    };
  }
  renderField(field, rowIndex, fieldIndex) {
    return html`
.configuration-container {
  justify-items: center;
  border-radius: 0.9rem;
  width: fit-content;
  height: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border: solid #EEEEEE 2px;
  background: #f0f0f0;
  display: grid;
}
.configuration-container .reset-conf {
  width: fit-content;
  padding: 5px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  background-color: red;
  cursor: pointer;
  color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 7px;
}

.field-input {
  width: 240px;
}

.row-option-container {
  display: flex;
  justify-content: center;
  padding: 2px 0;
  column-gap: 10px;
}

.buttons-container {
  display: flex;
  gap: 10px;
}

.add-item-button {
  width: 55px;
  padding: 2px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.delete-item-button {
  width: 55px;
  padding: 2px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  background-color: red;
  color: white;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.add-group-button {
  width: 55px;
  padding: 2px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #c5c5c5;
}

.delete-group-button {
  width: 100px;
  padding: 2px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #f7931e;
  color: white;
}

.add-group-button {
  background-color: #c5c5c5;
  color: white;
}
.add-group-button:hover {
  background-color: #aaaaaa;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.delete-item-button:hover {
  background-color: #c70404;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.delete-group-button:hover {
  background-color: #f7931e;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.row {
  padding: 5px;
  margin: 9px;
  display: flex;
  gap: 10px;
  background: #e6e6e6;
  border: none;
  border-radius: 7px;
  justify-content: center;
}

.row-item {
  display: grid;
  gap: 10px;
}

.buttons-container {
  display: flex;
  justify-content: center;
}

dialog {
  border: none;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  width: 320px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.configuraion-container {
  margin: 10px;
}

.configuration-group {
  border: none;
  padding: 5px;
  background: #fffdfd;
  border-radius: 4px;
  margin: 5px;
}`;var x=Object.defineProperty,m=Object.getOwnPropertyDescriptor,l=(e,t,n,o)=>{for(var r=o>1?void 0:o?m(t,n):t,s=e.length-1,p;s>=0;s--)(p=e[s])&&(r=(o?p(t,n,r):p(r))||r);return o&&r&&x(t,n,r),r};let i=class extends c{constructor(){super(...arguments),this.showDialog=!1,this.currentRowIndex=null,this.currentFieldInsertIndex=null,this.showInputTagField=!0,this.propertyData={entries:[]},this.defaultEntries={entries:[[{name:"name",i18n:"20322",placeholder:"Vorname*",required:!0,autocomplete:"given-name"},{name:"surname",i18n:"20323",placeholder:"Nachname*",required:!0,autocomplete:"family-name"}],[{name:"phone",i18n:"20381",placeholder:"Telefon*",required:!0,autocomplete:"tel"},{name:"email",i18n:"fv.email.homeviewer.send_request_customer.email",placeholder:"E-Mail*",required:!0,autocomplete:"email"}],[{name:"customerNo",i18n:"1610",placeholder:"Kundennummer",autocomplete:"section-customerNo"},{name:"adress",i18n:"20228",placeholder:"Adresse",autocomplete:"street-address"}],[{name:"companyName",i18n:"25024",placeholder:"Firmenname",autocomplete:"organization"},{name:"postcode",i18n:"25026",placeholder:"Postleitzahl",autocomplete:"postal-code"}],[{name:"city",i18n:"aiImageGen.city",autocomplete:"address-level2",placeholder:"Stadt"}],[{inputTag:"fv-text-box",name:"message",i18n:"60099",placeholder:"Ihre Nachricht",autocomplete:"off"}]]}}renderField(e,t,n){return a`
            <div class="row-item">
                <div>${field.placeholder}</div>
                <div>${e.placeholder}</div>
                <div style="display: flex; align-items: center; gap: 8px;">
                    ${this.decideInputType(field.inputTag)}
                    ${this.decideInputType(e.inputTag)}
                    <button
                            class="add-item-button"
                            @click=${() => this.openDialog(rowIndex, fieldIndex + 1, false)}
                            @click=${()=>this.openDialog(t,n+1,!1)}
                    >
                        Add
                    </button>
@@ -75,149 +185,48 @@
                <div class="buttons-container">
                    <button
                            class="delete-item-button"
                            @click=${() => this.deleteRowItem(rowIndex, fieldIndex)}
                            @click=${()=>this.deleteRowItem(t,n)}
                    >
                        Delete
                    </button>
                    <label style="display: flex; align-items: center; gap: 4px; font-size: 13px;">
                        <input
                                type="checkbox"
                                .checked=${field.required || false}
                                @change=${(e) => this.toggleRequired(e, rowIndex, fieldIndex)}
                                .checked=${e.required||!1}
                                @change=${o=>this.toggleRequired(o,t,n)}
                        />
                        Required
                    </label>
                </div>
            </div>
        `;
  }
  set PropertyData(data) {
    this.propertyData = data;
    this.requestUpdate();
  }
  setDefaultPropData() {
    this.propertyData = structuredClone(this.defaultEntries);
    this.requestUpdate();
  }
  decideInputType(inputTag) {
    if (inputTag === "fv-text-box") {
      return html`<input style="width:300px; height:100px;"></input>`;
    } else {
      return html`
                <dh-input></dh-input>`;
    }
  }
  addNewGroup(atIndex) {
    this.propertyData.entries.splice(atIndex, 0, []);
    this.currentRowIndex = atIndex;
    this.showInputTagField = true;
    this.requestUpdate();
    this.openDialog(this.currentRowIndex);
  }
  deleteGroup(atIndex) {
    this.propertyData.entries.splice(atIndex, 1);
    this.requestUpdate();
  }
  toggleRequired(e, rowIndex, fieldIndex) {
    const target = e.target;
    const checked = target.checked;
    this.propertyData.entries[rowIndex][fieldIndex].required = checked;
    this.requestUpdate();
  }
  renderGroups() {
    if (this.propertyData.entries.length === 0) {
      return html`
        `}set PropertyData(e){this.propertyData=e,this.requestUpdate()}setDefaultPropData(){this.propertyData=structuredClone(this.defaultEntries),console.log(this.propertyData),this.requestUpdate()}decideInputType(e){return e==="fv-text-box"?a`<input style="width:300px; height:100px;"></input>`:a`
                <dh-input></dh-input>`}addNewGroup(e){this.propertyData.entries.splice(e,0,[]),this.currentRowIndex=e,this.showInputTagField=!0,this.requestUpdate(),this.openDialog(this.currentRowIndex)}deleteGroup(e){this.propertyData.entries.splice(e,1),this.requestUpdate()}toggleRequired(e,t,n){const o=e.target.checked;this.propertyData.entries[t][n].required=o,this.requestUpdate()}renderGroups(){return this.propertyData.entries.length===0?a`
                <div style="display:flex; justify-items:center;">
                    <button class="add-group-button" @click=${() => this.addNewGroup(0)}> +</button>
                    <button class="add-group-button" @click=${()=>this.addNewGroup(0)}> +</button>
                </div>
            `;
    } else {
      return html`${this.propertyData.entries.map((row, rowIndex) => this.renderRow(row, rowIndex))}`;
    }
  }
  renderRow(row, rowIndex) {
    if (row.length === 0) {
      return html`
            `:a`${this.propertyData.entries.map((e,t)=>this.renderRow(e,t))}`}renderRow(e,t){return e.length===0?a`
                <div class="configuration-group">
                    <div class="row">
                        <button class="add-item-button" @click=${() => this.openDialog(rowIndex, 0, false)}>Add</button>
                        <button class="add-item-button" @click=${()=>this.openDialog(t,0,!1)}>Add</button>
                    </div>
                    <div class="row-option-container">
                        <button class="add-group-button" @click=${() => this.addNewGroup(rowIndex + 1)}> +</button>
                        <button class="delete-group-button" @click=${() => this.deleteGroup(rowIndex)}>Delete group
                        <button class="add-group-button" @click=${()=>this.addNewGroup(t+1)}> +</button>
                        <button class="delete-group-button" @click=${()=>this.deleteGroup(t)}>Delete group
                        </button>
                    </div>
                </div>
            `;
    } else {
      return html`
            `:a`
                <div class="configuration-group">
                    <div class="row">
                        ${row.map((field, fieldIndex) => this.renderField(field, rowIndex, fieldIndex))}
                        ${e.map((n,o)=>this.renderField(n,t,o))}
                    </div>
                    <div class="row-option-container">
                        <button class="add-group-button" @click=${() => this.addNewGroup(rowIndex + 1)}> +</button>
                        <button class="delete-group-button" @click=${() => this.deleteGroup(rowIndex)}>Delete group
                        <button class="add-group-button" @click=${()=>this.addNewGroup(t+1)}> +</button>
                        <button class="delete-group-button" @click=${()=>this.deleteGroup(t)}>Delete group
                        </button>
                    </div>
                </div>
            `;
    }
  }
  openDialog(rowIndex, insertIndex = null, showInputTag = true) {
    this.currentRowIndex = rowIndex;
    this.currentFieldInsertIndex = insertIndex;
    this.showDialog = true;
    this.showInputTagField = showInputTag;
    const dialog = this.renderRoot.querySelector("dialog");
    dialog.showModal();
  }
  closeDialog() {
    const dialog = this.renderRoot.querySelector("dialog");
    dialog.close();
    this.showDialog = false;
  }
  handleSubmit(e) {
    e.preventDefault();
    const form = e.target;
    const raw = Object.fromEntries(new FormData(form).entries());
    const baseData = {
      name: String(raw.name || ""),
      placeholder: raw.placeholder ? String(raw.placeholder) : void 0,
      i18n: raw.i18n ? String(raw.i18n) : void 0,
      required: raw.required === "true"
    };
    let data;
    if (!raw.inputTag) {
      data = baseData;
    } else if (raw.inputTag === "input") {
      data = baseData;
    } else {
      data = {
        ...baseData,
        ...this.showInputTagField ? { inputTag: String(raw.inputTag) } : {}
      };
    }
    if (raw.autocomplete && String(raw.autocomplete).length > 0) {
      data = {
        ...baseData,
        ...{ autocomplete: String(raw.autocomplete) }
      };
    }
    if (this.currentRowIndex != null) {
      const insertIndex = this.currentFieldInsertIndex ?? this.propertyData.entries[this.currentRowIndex].length;
      this.propertyData.entries[this.currentRowIndex].splice(insertIndex, 0, data);
      this.requestUpdate();
    }
    form.reset();
    this.closeDialog();
  }
  deleteRowItem(rowIndex, fieldIndex) {
    this.propertyData.entries[rowIndex].splice(fieldIndex, 1);
    this.requestUpdate();
  }
  render() {
    return html`
            `}openDialog(e,t=null,n=!0){this.currentRowIndex=e,this.currentFieldInsertIndex=t,this.showDialog=!0,this.showInputTagField=n,this.renderRoot.querySelector("dialog").showModal()}closeDialog(){this.renderRoot.querySelector("dialog").close(),this.showDialog=!1}handleSubmit(e){e.preventDefault();const t=e.target,n=Object.fromEntries(new FormData(t).entries()),o={name:String(n.name||""),placeholder:n.placeholder?String(n.placeholder):void 0,i18n:n.i18n?String(n.i18n):void 0,required:n.required==="true"};let r;if(n.inputTag?n.inputTag==="input"?r=o:r={...o,...this.showInputTagField?{inputTag:String(n.inputTag)}:{}}:r=o,n.autocomplete&&String(n.autocomplete).length>0&&(r={...o,autocomplete:String(n.autocomplete)}),this.currentRowIndex!=null){const s=this.currentFieldInsertIndex??this.propertyData.entries[this.currentRowIndex].length;this.propertyData.entries[this.currentRowIndex].splice(s,0,r),this.requestUpdate()}t.reset(),this.closeDialog()}deleteRowItem(e,t){this.propertyData.entries[e].splice(t,1),this.requestUpdate()}render(){return a`
            <div class="configuration-container">
                <fv-label class="header-label">Request-Configurator-Json</fv-label>
                ${this.renderGroups()}
@@ -269,14 +278,14 @@

                    </label>

                    ${this.showInputTagField ? html`
                    ${this.showInputTagField?a`
                        <label>
                            InputTag:
                            <select name="inputTag" required>
                                <option value="input" selected>Input</option>
                                <option value="fv-text-box">fv-text-box</option>
                            </select>
                        </label>` : null}
                        </label>`:null}

                    <div class="dialog-buttons">
                        <button type="button" class="cancel-btn" @click=${this.closeDialog}>Cancel</button>
@@ -284,28 +293,4 @@
                    </div>
                </form>
            </dialog>
        `;
  }
};
RequestConfigurationComponent.styles = unsafeCSS(requestConfigurationComponent);
__decorateClass([
  state()
], RequestConfigurationComponent.prototype, "showDialog", 2);
__decorateClass([
  state()
], RequestConfigurationComponent.prototype, "currentRowIndex", 2);
__decorateClass([
  state()
], RequestConfigurationComponent.prototype, "currentFieldInsertIndex", 2);
__decorateClass([
  state()
], RequestConfigurationComponent.prototype, "showInputTagField", 2);
__decorateClass([
  property({ type: Array })
], RequestConfigurationComponent.prototype, "propertyData", 2);
RequestConfigurationComponent = __decorateClass([
  customElement("request-configuration-component")
], RequestConfigurationComponent);

export { RequestConfigurationComponent };
//# sourceMappingURL=request-configurator-ui.mjs.map
        `}};i.styles=u(b),l([d()],i.prototype,"showDialog",2),l([d()],i.prototype,"currentRowIndex",2),l([d()],i.prototype,"currentFieldInsertIndex",2),l([d()],i.prototype,"showInputTagField",2),l([h({type:Array})],i.prototype,"propertyData",2),i=l([g("request-configuration-component")],i);export{i as RequestConfigurationComponent};