@kvass/widgets 1.2.4 → 1.2.6

package/dist/contact.js

@@ -1,25 +0,0 @@
-import{o as r,c as f,a as b,m as U,n as j,_ as $,b as P,r as h,t as _,d as x,e as w,w as z,f as O,g as M,u as E,h as H,i as I,F as q,j as g,k as J,l as R,p as D}from"./_plugin-vue_export-helper.js";const W=`@charset "UTF-8";.kvass-contact-checkbox{display:flex;align-items:start;gap:.75rem;cursor:pointer}.kvass-contact-checkbox__element{cursor:inherit;margin:0;appearance:none;background-color:var(--kvass-contact-input-background);flex-shrink:0;font:inherit;color:currentColor;width:var(--kvass-contact-checkbox-size, var(--kvass-contact-default-checkbox-size));aspect-ratio:1;border:var(--kvass-contact-checkbox-border-width, var(--kvass-contact-default-checkbox-border-width)) solid currentColor;border-radius:var(--kvass-contact-checkbox-border-radius, var(--kvass-contact-default-checkbox-border-radius))}.kvass-contact-checkbox__element:focus-visible{outline:var(--kvass-contact-outline-width, var(--kvass-contact-default-outline-width)) solid var(--kvass-contact-color, var(--kvass-contact-default-color));outline-offset:var(--kvass-contact-outline-offset, var(--kvass-contact-default-outline-offset))}.kvass-contact-checkbox__element:checked{position:relative;background-color:var(--kvass-contact-primary, var(--kvass-contact-default-primary));border-color:var(--kvass-contact-primary, var(--kvass-contact-default-primary))}.kvass-contact-checkbox__element:checked:before{content:"✓";font-size:.75em;position:absolute;top:50%;left:50%;translate:-50% -50%;color:var(--kvass-contact-color-inverted, var(--kvass-contact-default-color-inverted))}.kvass-contact-checkbox--required span:after{content:"*";color:var(--kvass-contact-error, var(--kvass-contact-default-error));margin-left:.3rem}
-`,G=["value","checked"],K=["innerHTML"],Q={inheritAttrs:!1},X=Object.assign(Q,{__name:"Checkbox.ce",props:{modelValue:[Boolean,Array],state:String,label:String},emits:["update:modelValue"],setup(t,{emit:e}){const o=e,a=t;function l(i){return typeof a.modelValue=="boolean"?o("update:modelValue",i.target.checked):o("update:modelValue",i.target.checked?[...a.modelValue,a.state]:a.modelValue.filter(m=>m!==a.state))}return(i,m)=>(r(),f("label",{class:j(["kvass-contact-checkbox",[{"kvass-contact-checkbox--required":"required"in i.$attrs},i.$attrs.class]])},[b("input",U({class:"kvass-contact-checkbox__element",type:"checkbox"},i.$attrs,{value:t.modelValue,checked:i.$attrs.checked,onChange:l}),null,16,G),b("span",{class:"kvass-contact-checkbox__label",innerHTML:t.label},null,8,K)],2))}}),V=$(X,[["styles",[W]]]),Y=`.kvass-contact-field{display:flex;flex-direction:column;gap:.3rem}.kvass-contact-field__label{margin-left:var(--kvass-contact-label-transform, 0);font-weight:var(--kvass-contact-label-weight, initial)}.kvass-contact-field input{-webkit-appearance:none}.kvass-contact-field__element{padding:calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2);padding-left:var(--kvass-contact-field-input-tranform, calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2));border-radius:var(--kvass-contact-border-radius, var(--kvass-contact-default-border-radius));border:var(--kvass-contact-border-width, var(--kvass-contact-default-border-width)) solid var(--kvass-contact-border-color, var(--kvass-contact-default-border-color));resize:vertical;font:inherit;color:inherit;background-color:var(--kvass-contact-input-background, var(--kvass-contact-default-input-background))}.kvass-contact-field__element:focus-visible{outline:var(--kvass-contact-outline-width, var(--kvass-contact-default-outline-width)) solid var(--kvass-contact-color, var(--kvass-contact-default-color));outline-offset:var(--kvass-contact-outline-offset, var(--kvass-contact-default-outline-offset))}.kvass-contact-field--required .kvass-contact-field__label:after{content:"*";color:var(--kvass-contact-error, var(--kvass-contact-default-error));margin-left:.3rem}.kvass-contact-field--required.kvass-contact-field--focused .kvass-contact-field__element:invalid{border-color:var(--kvass-contact-error, var(--kvass-contact-default-error))}.kvass-contact-field--full-width{grid-column-end:span var(--kvass-contact-grid-columns, var(--kvass-contact-default-grid-columns))}
-`,Z=["for"],tt={key:0,class:"kvass-contact-field__label"},at={inheritAttrs:!1},et=Object.assign(at,{__name:"Field.ce",props:{modelValue:[String,Array],label:String,type:String},emits:["update:modelValue"],setup(t,{emit:e}){const o=e,a=t,l=P(()=>{switch(a.type){case"textarea":return"textarea";case"select":return"select";default:return"input"}}),i=h(!1),m=h(!1);function n(u){o("update:modelValue",u.target.value),i.value=!0}function k(){i.value&&(m.value=!0)}return(u,p)=>(r(),f("label",{class:j(["kvass-contact-field",[{"kvass-contact-field--required":"required"in u.$attrs,"kvass-contact-field--focused":m.value},u.$attrs.class]]),for:u.$attrs.id},[t.label?(r(),f("span",tt,_(t.label),1)):x("",!0),(r(),w(O(l.value),U({class:"kvass-contact-field__element"},u.$attrs,{value:t.modelValue,onInput:n,onBlur:k}),{default:z(()=>[M(u.$slots,"default")]),_:3},16,["value"]))],10,Z))}}),y=$(et,[["styles",[Y]]]),st=`.kvass-contact-fieldset{position:relative;display:flex;flex-direction:column;gap:calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 4);margin:calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 1.5) 0 0 0;padding:calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2);border-radius:var(--kvass-contact-border-radius, var(--kvass-contact-default-border-radius));border:var(--kvass-contact-border-width, var(--kvass-contact-default-border-width)) solid var(--kvass-contact-border-color, var(--kvass-contact-default-border-color));font:inherit}.kvass-contact-fieldset:focus-visible{outline:var(--kvass-contact-outline-width, var(--kvass-contact-default-outline-width)) solid var(--kvass-contact-color, var(--kvass-contact-default-color));outline-offset:var(--kvass-contact-outline-offset, var(--kvass-contact-default-outline-offset))}.kvass-contact-fieldset__label{margin:0;padding:0;position:absolute;top:-1.4rem;left:0}
-`,ct={class:"kvass-contact-fieldset"},ot={key:0,class:"kvass-contact-fieldset__label"},nt={__name:"Fieldset.ce",props:{label:String},setup(t){return(e,o)=>(r(),f("fieldset",ct,[t.label?(r(),f("legend",ot,_(t.label),1)):x("",!0),M(e.$slots,"default")]))}},F=$(nt,[["styles",[st]]]);function L(t,e,o,a){return o&&o instanceof Array&&o.length?Promise.all(o.map(l=>L(t,{...e,project:l,references:[{onModel:"Project",ref:l},...e.references]}))):!o?.length&&a?.length?rt(t,{...e.contact,assignees:a},e.comment):fetch(`${t}/api/graphql`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({query:`
-				mutation ($data: LeadCreate!) {
-					LeadCreate(data: $data) {
-						id
-					}
-				}
-			`,variables:{data:e}})}).then(l=>l.json())}function rt(t,e,o){return fetch(`${t}/api/graphql`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({query:`
-				mutation ($data: ContactInput!, $comment: String) {
-					ContactCreate(data: $data, comment: $comment) {
-						id
-					}
-				}
-			`,variables:{data:e,comment:o}})}).then(a=>a.json())}function lt(t){return fetch(`${t}/api/graphql`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({query:`
-				query {
-					Projects {
-						id
-						name
-						isPublished
-					}
-				}
-			`})}).then(e=>e.json()).then(e=>e.data.Projects.filter(o=>o.isPublished))}const it=t=>t.charAt(0).toUpperCase()+t.substring(1),dt=`.kvass-contact{--kvass-contact-default-background: #ffffff;--kvass-contact-default-spacing: 2rem;--kvass-contact-default-padding: var( --kvass-contact-spacing, var(--kvass-contact-default-spacing) );--kvass-contact-default-border-radius: 4px;--kvass-contact-default-border-color: #eaeaea;--kvass-contact-default-border-width: 1px;--kvass-contact-default-color: #222222;--kvass-contact-default-color-inverted: #ffffff;--kvass-contact-default-max-width: 720px;--kvass-contact-default-primary: #1d56d8;--kvass-contact-default-error: #d81d1d;--kvass-contact-default-grid-columns: 1;--kvass-contact-default-disabled: #eaeaea;--kvass-contact-default-input-background: #ffffff;--kvass-contact-default-outline-width: 2px;--kvass-contact-default-outline-offset: 0px;--kvass-contact-default-checkbox-size: 1em;--kvass-contact-default-label-transform: 0;--kvass-contact-default-checkbox-border-width: var( --kvass-contact-default-border-width );--kvass-contact-default-checkbox-border-radius: var( --kvass-contact-default-border-radius );background-color:var(--kvass-contact-background, var(--kvass-contact-default-background));padding:var(--kvass-contact-padding, var(--kvass-contact-default-padding));border-radius:var(--kvass-contact-border-radius, var(--kvass-contact-default-border-radius));color:var(--kvass-contact-color, var(--kvass-contact-default-color));max-width:var(--kvass-contact-max-width, var(--kvass-contact-default-max-width));font:inherit;accent-color:var(--kvass-contact-primary, var(--kvass-contact-default-primary));font-size:var(--kvass-contact-font-size, inherit);height:inherit;min-height:inherit;max-height:inherit;display:flex;flex-direction:column;gap:var(--kvass-contact-spacing, var(--kvass-contact-default-spacing))}@media (max-width: 600px){.kvass-contact{--kvass-contact-grid-columns: 1;padding:calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2)}}.kvass-contact *:focus-visible{outline:2px solid var(--kvass-contact-color, var(--kvass-contact-default-color));outline-offset:2px}.kvass-contact--submitted.kvass-contact--theme-overlay{height:100%;width:100%;position:absolute;z-index:2000;max-width:100%;left:0;top:0}.kvass-contact__header{display:flex;flex-direction:column;gap:.5rem}.kvass-contact__fields{display:grid;grid-template-columns:repeat(var(--kvass-contact-grid-columns, var(--kvass-contact-default-grid-columns)),1fr);gap:calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2)}.kvass-contact__success--overlay{margin:auto;font-size:var(--kvass-contact-success-label-font-size, inherit)}.kvass-contact__title{font-size:2rem;margin:0}.kvass-contact__subtitle{opacity:.7;margin:0}.kvass-contact__submit{padding:calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2);border-radius:var(--kvass-contact-border-radius, var(--kvass-contact-default-border-radius));background-color:var(--kvass-contact-primary, var(--kvass-contact-default-primary));color:var(--kvass-contact-color-inverted, var(--kvass-contact-default-color-inverted));border:none;font:inherit;width:100%;cursor:pointer}.kvass-contact__submit:active{filter:brightness(.95)}.kvass-contact__submit:disabled{background-color:var(--kvass-contact-disabled, var(--kvass-contact-default-disabled));color:var(--kvass-contact-color, var(--kvass-contact-default-color));cursor:not-allowed}.kvass-contact a{color:inherit}
-`,ut={key:0,class:"kvass-contact__success--overlay"},vt=["innerHTML"],ft={class:"kvass-contact__header"},kt={class:"kvass-contact__title"},mt={key:0,class:"kvass-contact__subtitle"},pt={class:"kvass-contact__fields"},bt=["disabled"],ht={__name:"Form.ce",props:{lang:{type:String,default:()=>document.documentElement.getAttribute("lang")||"nb"},privacyUrl:String,upsell:{type:Boolean,default:!1},accountUrl:{type:String,required:!0},projects:{type:String,default:""},references:{type:String,default:""},tags:{type:String,default:""},defaultAssignees:String,successTheme:{type:String,default:"default",enums:["overlay","default"]},submitTimeout:{type:Number,default:2e3}},setup(t){const e={nb:{title:"Meld interesse",submit:"Meld interesse",name:"Navn",email:"E-post",phone:"Telefonnummer",message:"Melding",projects:"Hvilke prosjekter er du interessert i?",upsell:"Jeg ønsker informasjon om lignende prosjekter",privacy:"Jeg ønsker å bli kontaktet i samtykke med [personvernerklæringen]",success:"Takk for interessen!"},en:{title:"Contact agent",submit:"Submit",name:"Name",email:"Email",phone:"Phone",message:"Message",projects:"Which projects are you interested in?",upsell:"I want to know about other similar projects",privacy:"I agree to the [privacy policy]",success:"Thank you for your interest"}},o=E(),a=t,l=h(!1),i=P(()=>a.privacyUrl?a.privacyUrl:`${a.accountUrl}/api/legal/privacy/tenant`),m={contact:{name:null,email:null,phone:null,upsell:!1,tags:a.tags.split(",")},comment:null},n=H(structuredClone(m)),k=h(!1),u=h([]),p=h([]),T=h([]);function d(v){let s=o["label"+it(v)]||e[a.lang][v];return v==="privacy"?s.replace(/\[(.+)\]/,`<a href="${i.value}" target="_blank">$1</a>`):s}function A(){n.comment=null,n.contact.upsell=!1,l.value=!1,p.value=[]}function B(){L(a.accountUrl,{...n,references:T.value},p.value,a.defaultAssignees?.split(",")).then(()=>{k.value=!0,A(),setTimeout(()=>k.value=!1,a.submitTimeout)})}function N(){const v=a.references.split(",").filter(Boolean).map(s=>{const[c,C]=s.split(":");return{onModel:c,ref:C}});T.value=v}return I(()=>{a.projects!=="disable"&&(a.projects?a.projects.split(",").forEach(v=>p.value.push(v)):lt(a.accountUrl).then(v=>u.value=v)),N()}),(v,s)=>(r(),f("form",{class:j(["kvass-contact",[{"kvass-contact--submitted":k.value},`kvass-contact--theme-${t.successTheme}`]]),onSubmit:R(B,["prevent"])},[t.successTheme==="overlay"&&k.value?(r(),f("div",ut,[b("div",{innerHTML:d("success")},null,8,vt)])):(r(),f(q,{key:1},[b("div",ft,[b("h2",kt,_(d("title")),1),d("subtitle")?(r(),f("p",mt,_(d("subtitle")),1)):x("",!0)]),b("div",pt,[g(y,{label:d("name"),type:"text",required:"",modelValue:n.contact.name,"onUpdate:modelValue":s[0]||(s[0]=c=>n.contact.name=c)},null,8,["label","modelValue"]),g(y,{label:d("email"),type:"email",pattern:"\\b[\\w\\.-]+@[\\w\\.-]+\\.\\w{2,4}",required:"",modelValue:n.contact.email,"onUpdate:modelValue":s[1]||(s[1]=c=>n.contact.email=c)},null,8,["label","modelValue"]),g(y,{label:d("phone"),type:"tel",modelValue:n.contact.phone,"onUpdate:modelValue":s[2]||(s[2]=c=>n.contact.phone=c)},null,8,["label","modelValue"]),t.projects?x("",!0):(r(),w(F,{key:0,label:d("projects")},{default:z(()=>[(r(!0),f(q,null,J(u.value,c=>(r(),w(V,{key:c.id,state:c.id,label:c.name,checked:p.value.includes(c.id),modelValue:p.value,"onUpdate:modelValue":s[3]||(s[3]=C=>p.value=C)},null,8,["state","label","checked","modelValue"]))),128))]),_:1},8,["label"])),g(y,{label:d("message"),type:"textarea",rows:"5",class:"kvass-contact-field--full-width",modelValue:n.comment,"onUpdate:modelValue":s[4]||(s[4]=c=>n.comment=c)},null,8,["label","modelValue"]),t.upsell?(r(),w(V,{key:1,label:d("upsell"),class:"kvass-contact-field--full-width",checked:n.contact.upsell,modelValue:n.contact.upsell,"onUpdate:modelValue":s[5]||(s[5]=c=>n.contact.upsell=c)},null,8,["label","checked","modelValue"])):x("",!0),g(V,{label:d("privacy"),class:"kvass-contact-field--full-width",required:"",checked:l.value,modelValue:l.value,"onUpdate:modelValue":s[6]||(s[6]=c=>l.value=c)},null,8,["label","checked","modelValue"])]),b("button",{class:"kvass-contact__submit",type:"submit",disabled:k.value},_(k.value?d("success"):d("submit")),9,bt)],64))],34))}},S=$(ht,[["styles",[dt]]]);S.styles=[...S.styles,...y.styles,...F.styles,...V.styles];customElements.define("kvass-contact",D(S));