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;
|
}
|
|
.header-label {
|
padding: 12px;
|
--label-font-weight:bold;
|
}
|
|
.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>${e.placeholder}</div>
|
<div style="display: flex; align-items: center; gap: 8px;">
|
${this.decideInputType(e.inputTag)}
|
<button
|
class="add-item-button"
|
@click=${()=>this.openDialog(t,n+1,!1)}
|
>
|
Add
|
</button>
|
</div>
|
<div class="buttons-container">
|
<button
|
class="delete-item-button"
|
@click=${()=>this.deleteRowItem(t,n)}
|
>
|
Delete
|
</button>
|
<label style="display: flex; align-items: center; gap: 4px; font-size: 13px;">
|
<input
|
type="checkbox"
|
.checked=${e.required||!1}
|
@change=${o=>this.toggleRequired(o,t,n)}
|
/>
|
Required
|
</label>
|
</div>
|
</div>
|
`}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>
|
</div>
|
`: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(t,0,!1)}>Add</button>
|
</div>
|
<div class="row-option-container">
|
<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>
|
`:a`
|
<div class="configuration-group">
|
<div class="row">
|
${e.map((n,o)=>this.renderField(n,t,o))}
|
</div>
|
<div class="row-option-container">
|
<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(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()}
|
<div>
|
<button @click="${this.setDefaultPropData}" class="reset-conf">Reset Configuration</button>
|
</div>
|
</div>
|
|
<dialog>
|
<form @submit=${this.handleSubmit}>
|
<label>
|
Name:
|
<input name="name" required/>
|
</label>
|
<label>
|
i18n:
|
<input name="i18n" required/>
|
</label>
|
<label>
|
Placeholder:
|
<input name="placeholder" required/>
|
</label>
|
<label>
|
Required:
|
<select name="required">
|
<option value="true">true</option>
|
<option value="false" selected>false</option>
|
</select>
|
</label>
|
<label>
|
Autocomplete id:
|
<input name="autocomplete" required/>
|
<a href="https://developer.mozilla.org/de/docs/Web/HTML/Attributes/autocomplete"
|
target="_blank"
|
style="
|
display:inline-block;
|
margin-left:6px;
|
cursor:pointer;
|
font-weight:bold;
|
background:#ddd;
|
border-radius:50%;
|
padding:0 6px;
|
text-decoration:none;
|
color:black;
|
"
|
title="Alle autocomplete IDs auf Deutsch ansehen">
|
?
|
</a>
|
|
</label>
|
|
${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}
|
|
<div class="dialog-buttons">
|
<button type="button" class="cancel-btn" @click=${this.closeDialog}>Cancel</button>
|
<button type="submit" class="save-btn">Save</button>
|
</div>
|
</form>
|
</dialog>
|
`}};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};
|
