vicowa-web-components/dist/examples/vicowa-editable-list/customer-settings/customer-settings.js

Various web components

import{WebComponentBaseClass as t}from"/third_party/web-component-base-class/dist/web-component-base-class.js";import"../../../src/vicowa-single-selection/vicowa-single-selection.js";const i="customer-settings",e=[{value:"website",displayText:"Website"},{value:"email",displayText:"EMail"},{value:"phone",displayText:"Phone"},{value:"word-of-mouth",displayText:"Word-of-mouth"},{value:"other",displayText:"Other"}];function n(t){t.$.channel.onAttached=()=>{t.$.channel.options=e,Object.keys(t.data).forEach((i=>{t.$[i]&&(t.$[i].value=t.data[i])}))}}window.customElements.define(i,class extends t{static get is(){return i}constructor(){super()}static get properties(){return{data:{type:Object,value:{id:"",name:"",email:"",channel:"other",address:"",postal:"",city:"",province:"",country:""},observer:n},expanded:{type:Boolean,reflectToAttribute:!0,value:!1}}}get hasData(){return Object.keys(this.data).length>0&&Object.keys(this.data).every((t=>""!==this.data[t]))}startEdit(){this.$$$(".customer-card .input").forEach((t=>{t.static=!1,t.hideLabel=!1})),this.expanded=!0}get valid(){return Object.keys(this.data).every((t=>!this.$[t]||"id"===t||this.$[t].valid))}doSave(){if(this.valid){let t=!1;Object.keys(this.data).forEach((i=>{this.$[i]&&this.data[i]!==this.$[i].value&&(this.data[i]=this.$[i].value,t=!0)})),t&&this.onChanged&&this.onChanged(this.data)}return this.valid}doCancel(){n(this)}stopEdit(){this.$$(".customer-card").classList.remove("editing"),this.$$$(".customer-card .input").forEach((t=>{t.static=!0,t.hideLabel=!0})),this.expanded=!1}attached(){const t=()=>{this.onChange&&this.onChange()};this.$.channel.options=e,this.$.country.onAttached=()=>{this.onReady&&this.onReady()},this.$$$(".input").forEach((i=>{i.onChange=t,i.onInput=t}))}static get template(){return'\n\t\t\t<template id="customer-settings">\n\t\t\t\t<style>\n\t\t\t\t\t.customer-card {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tflex-direction: row;\n\t\t\t\t\t}\n\t\t\t\n\t\t\t\t\t.info {\n\t\t\t\t\t\twidth: 150px;\n\t\t\t\t\t}\n\t\t\t\t\tvicowa-input {\n\t\t\t\t\t\t--vicowa-input-control-width: 150px;\n\t\t\t\t\t}\n\t\t\t\n\t\t\t\t\t:host([expanded]) .customer-card {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t\t--vicowa-single-selection-width: 300px;\n\t\t\t\t\t}\n\t\t\t\n\t\t\t\t\t:host([expanded]) .info {\n\t\t\t\t\t\tmargin-bottom: 3px;\n\t\t\t\t\t\twidth: auto;\n\t\t\t\t\t}\n\t\t\t\t</style>\n\t\t\t\t<div>\n\t\t\t\t\t<div class="customer-card">\n\t\t\t\t\t\t<div class="info">\n\t\t\t\t\t\t\t<vicowa-input id="name" static inline label="Name" hide-label class="input" validatorType="notEmpty"></vicowa-input>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class="info">\n\t\t\t\t\t\t\t<vicowa-input id="email" static inline label="EMail" hide-label class="input" validatorType="email"></vicowa-input>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class="info">\n\t\t\t\t\t\t\t<vicowa-single-selection id="channel" static inline label="Channel" hide-label class="input"></vicowa-single-selection>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class="info">\n\t\t\t\t\t\t\t<vicowa-input id="address" static inline label="Address" hide-label class="input" validatorType="notEmpty"></vicowa-input>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class="info">\n\t\t\t\t\t\t\t<vicowa-input id="postal" static inline label="Zip code" hide-label class="input" validatorType="postalCodeCA"></vicowa-input>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class="info">\n\t\t\t\t\t\t\t<vicowa-input id="city" static inline label="City" hide-label class="input" validatorType="notEmpty"></vicowa-input>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class="info">\n\t\t\t\t\t\t\t<vicowa-input id="province" static inline label="State" hide-label class="input" validatorType="notEmpty"></vicowa-input>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class="info">\n\t\t\t\t\t\t\t<vicowa-input id="country" static inline label="Country" hide-label class="input" validatorType="notEmpty"></vicowa-input>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t'}});
//# sourceMappingURL=customer-settings.js.map