@kvass/widgets 1.2.6 → 1.2.8

package/dist/project-portal.js

@@ -0,0 +1 @@
+import{_ as j,x as f,o as t,e as m,w as b,a as u,t as h,v,n as x,g as B,c as l,j as L,d as g,y as M,F as w,k as C,r as y,b as S,T as N,p as V}from"./_plugin-vue_export-helper.js";const E=".category{padding:1rem 1.5rem;border:none;border-radius:var(--kvass-project-selector-border-radius, 3px);font-size:.9em;background-color:var(--kvass-project-selector-light-grey, #efefef)}.category:focus-visible{outline:2px solid var(--kvass-project-selector-primary, #0523a8);outline-offset:2px}.category--primary.category--active{background-color:var(--kvass-project-selector-primary, #0523a8)}.category--sale.category--active{background-color:var(--kvass-project-selector-sale, #2da71d)}.category--sold.category--active{background-color:var(--kvass-project-selector-sold, #cc3434)}.category--development.category--active{background-color:var(--kvass-project-selector-development, #3d495b)}.category--upcoming.category--active{background-color:var(--kvass-project-selector-upcoming, #e9b03d)}.category--default.category--active{background-color:var(--kvass-project-selector-default, )}.category--active{color:#fff}",O={__name:"Category.ce",props:{value:{type:String,default:"development"},component:{type:String,default:"div"},active:{type:Boolean}},setup(e){const o={sale:"sale",upcoming:"upcoming",development:"development",sold:"sold"},a={sale:"Til salgs",upcoming:"Kommer for salg",development:"Under utvikling",all:"Alle",sold:"Utsolgt"},r=e,c=f(()=>o[r.value]?o[r.value]:"default"),s=f(()=>a[r.value]);return(d,p)=>(t(),m(B(e.component),{class:x(["category",[`category--${v(c)}`,{"category--active":e.active}]])},{default:b(()=>[u("span",null,h(v(s)),1)]),_:1},8,["class"]))}},z=j(O,[["styles",[E]]]),U=".project-selector-card{position:relative;font-family:var(--kvass-project-selector-secondary-font, inherit);display:flex;flex-direction:column;border-radius:var(--kvass-project-selector-border-radius, 3px);background-color:#fff;text-decoration:none;color:inherit;overflow:hidden}.project-selector-card__header{min-height:var(--kvass-project-selector-header-min-height, 250px);background-color:var(--kvass-project-selector-dark, #272727)}@media (max-width: 767px){.project-selector-card__header{min-height:var(--kvass-project-selector-header-min-height-resposive, 150px)}}.project-selector-card__header-category{position:absolute;background-color:var(--kvass-project-selector-secondary, #3d495b);z-index:11;color:#fff;left:var(--kvass-project-selector-card-status-gap, .5rem);top:var(--kvass-project-selector-card-status-gap, .5rem);border-radius:var(--kvass-project-selector-border-radius, 3px)}.project-selector-card__header-category .category{font-size:var(--kvass-project-selector-card-status-font-size, .8em);padding:var(--kvass-project-selector-card-status-padding-x, .5rem) var(--kvass-project-selector-card-status-padding-x, 1rem)}.project-selector-card__header-cover{width:100%;background-repeat:no-repeat;height:100%;background-size:cover;background-position:center;transition:transform .62s cubic-bezier(.05,.2,.1,1)}.project-selector-card__header-cover:hover{transform:scale(1.11);-webkit-transform:scale(1.11)}.project-selector-card__title{font-weight:700;line-height:1;margin:0}.project-selector-card__content{background-color:var(--kvass-project-selector-background-color, #efeded);border-top:none;text-align:left;display:flex;flex-direction:column;gap:.5rem;padding:calc(var(--kvass-project-selector-card-spacing, 2.5rem) - .5rem);height:100%}.project-selector-card__content-name{color:var(--kvass-project-selector-dark, #272727);margin:0!important}.project-selector-card__content-url{color:var(--kvass-project-selector-primary, #0523a8);font-size:1.1em;margin-top:auto;text-decoration:underline;text-decoration-color:var(--kvass-project-selector-primary, #0523a8);text-underline-offset:.3em;text-decoration-thickness:1px}.project-selector-card__content-url:hover{color:var(--kvass-project-selector-secondary, #3d495b)}.project-selector-card__content-city{font-size:1.2rem}.project-selector-card__content-location{display:flex;align-items:center;align-content:center;gap:1rem;color:var(--kvass-project-selector-secondary, #3d495b)}.project-selector-card__content-location svg{opacity:.5;height:.9rem}.project-selector-card__content-location svg path{color:currentColor}@media (max-width: 767px){.project-selector-card__content{gap:.5rem;padding:calc(var(--kvass-project-selector-card-spacing, 2.5rem) - .5rem) calc(var(--kvass-project-selector-card-spacing, 2.5rem) - 1rem)}}.project-selector--theme-tiles .project-selector-card{border-radius:var(--kvass-project-selector-border-radius, 0px)}.project-selector--theme-tiles .project-selector-card:hover .project-selector-card__content{background:#0003!important}.project-selector--theme-tiles .project-selector-card__header{min-height:var(--kvass-project-selector-header-min-height, 400px)}@media (max-width: 767px){.project-selector--theme-tiles .project-selector-card__header{min-height:var(--kvass-project-selector-header-min-height-resposive, 250px)}}.project-selector--theme-tiles .project-selector-card__content{font-size:1.5rem;height:unset!important;position:absolute;inset:0;z-index:10;pointer-events:none;background:#0006!important;transition:background .2s ease;display:grid!important;place-content:center}.project-selector--theme-tiles .project-selector-card__content>*{color:#fff!important;text-align:center}.project-selector--theme-tiles .project-selector-card__content-url{text-decoration-color:currentColor;font-size:.8em}.project-selector--theme-tiles .project-selector-card__content-location{justify-content:center;margin-bottom:1rem}.project-selector--theme-tiles .project-selector-card__content-location svg{display:none}.project-selector--theme-tiles .project-selector-card__content-intro{font-size:.8em}",D={key:0,class:"project-selector-card__header-category"},H={class:"project-selector-card__content"},P={class:"project-selector-card__content-name"},G={key:0,class:"project-selector-card__content-location"},K=u("svg",{"aria-hidden":"true",focusable:"false","data-prefix":"fas","data-icon":"map-pin",role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 288 512"},[u("path",{fill:"currentColor",d:"M112 316.94v156.69l22.02 33.02c4.75 7.12 15.22 7.12 19.97 0L176 473.63V316.94c-10.39 1.92-21.06 3.06-32 3.06s-21.61-1.14-32-3.06zM144 0C64.47 0 0 64.47 0 144s64.47 144 144 144 144-64.47 144-144S223.53 0 144 0zm0 76c-37.5 0-68 30.5-68 68 0 6.62-5.38 12-12 12s-12-5.38-12-12c0-50.73 41.28-92 92-92 6.62 0 12 5.38 12 12s-5.38 12-12 12z"})],-1),W={class:"project-selector-card__content-city"},q=["innerHTML"],J=["href"],Q={__name:"Card.ce",props:{item:{type:Object,default:()=>({})},theme:{type:String,default:"default",enums:["default","primary","flat"]},disableLabel:{type:Boolean,default:!1}},setup(e){const o=e,a=f(()=>c(o.item.media&&o.item.media.cover?o.item.media.cover:null)||c(o.item.media&&o.item.media.gallery?o.item.media.gallery:null)),r=f(()=>o.item.status);function c(s){if(!s||!s.length)return;let d=s.find(p=>p.type?p.type.startsWith("image"):p);if(d)return d.url}return(s,d)=>(t(),l("div",{class:x(["project-selector-card","project-selector-card--"+e.theme])},[(t(),m(B(e.item.url&&!["development"].includes(v(r))?"a":"div"),{class:"project-selector-card__header",href:e.item.url},{default:b(()=>[e.disableLabel?g("",!0):(t(),l("div",D,[L(z,{value:v(r),component:"div",active:""},null,8,["value"])])),u("div",{class:"project-selector-card__header-cover",style:M({backgroundImage:`url(${v(a)})`})},null,4)]),_:1},8,["href"])),u("div",H,[u("h2",P,h(e.item.name),1),e.item.address&&e.item.address.city?(t(),l("span",G,[K,u("span",W,h(e.item.address?e.item.address.city:""),1)])):g("",!0),u("div",{class:"project-selector-card__content-intro",innerHTML:e.item.intro},null,8,q),e.item.url&&!["development"].includes(v(r))?(t(),l("a",{key:1,class:"project-selector-card__content-url",href:e.item.url}," Se prosjektet",8,J)):g("",!0)])],2))}},T=j(Q,[["styles",[U]]]),R=".project-selector-category__selector{cursor:pointer}@media (max-width: 767px){.project-selector-category__selector{width:100%}}.project-selector-category__selector:hover{box-shadow:inset 0 0 0 2em #4a4a4a33}",X={class:"project-selector-category"},Y={__name:"CategorySelector.ce",props:{items:{type:Array,default:()=>[]},value:{type:String}},setup(e){return(o,a)=>(t(),l("div",X,[(t(!0),l(w,null,C(e.items,(r,c)=>(t(),m(z,{key:c,class:"project-selector-category__selector",value:r,active:e.value==r,component:"button",onClick:s=>o.$emit("input",r)},null,8,["value","active","onClick"]))),128))]))}},F=j(Y,[["styles",[R]]]),Z=".project-type-selector .elder-dropdown__content{z-index:11}.project-type-selector__trigger{appearance:none;padding:1rem 2rem;border:none;border-radius:var(--kvass-project-selector-border-radius, 3px);font-size:.9em;background-color:var(--kvass-project-selector-primary, #0523a8);color:#fff}.project-type-selector__trigger:-ms-expand{display:none}@media (max-width: 767px){.project-type-selector__trigger{width:100%}}.project-type-selector__dropdown-item{text-align:center!important;padding:.5rem 1.5rem;font-size:.9em}.project-type-selector__dropdown-item--selected{background-color:#8f8f8f66}.project-type-selector__dropdown-item:hover{background-color:#24242466}",ee={class:"project-type-selector__trigger"},te=["value","onChange"],re={__name:"ProjectTypeSelector.ce",props:{items:{type:Array,default:()=>[]},value:{type:String}},setup(e){function o(a){return a.charAt(0).toUpperCase()+a.substring(1)}return(a,r)=>(t(),l("select",ee,[(t(!0),l(w,null,C(e.items,(c,s)=>(t(),l("option",{key:s,value:c,onChange:d=>a.$emit("input",c),class:"project-type-selector__dropdown-item"},h(o(c==="none"?"Velg type":c)),41,te))),128))]))}},I=j(re,[["styles",[Z]]]),oe=".project-selector__navigation{display:flex;justify-content:var(--kvass-project-selector-nav-position, center);padding:0 2rem 3rem;gap:1.5rem}@media (max-width: 767px){.project-selector__navigation{flex-direction:column-reverse;justify-content:center;gap:.5rem}}.project-selector__navigation-category{display:flex;justify-content:center;gap:1.5rem}@media (max-width: 767px){.project-selector__navigation-category{flex-direction:column;gap:.5rem;align-items:center}}.project-selector__card{position:relative;display:grid;grid-template-columns:repeat(var(--kvass-project-selector-grid-columns, 4),1fr);gap:var(--kvass-project-selector-grid-gap, 2rem)}@media (max-width: 767px){.project-selector__card{grid-template-columns:1fr;padding-top:2rem}}.project-selector__no-result{font-size:1.2em;text-align:center;display:flex;justify-content:center;align-items:center;min-height:200px;margin:2rem 0;background-color:var(--kvass-project-selector-light-grey, #efefef)}@media (max-width: 767px){.project-selector__no-result{min-height:100px}}.project-selector .list-leave-active{position:absolute}.project-selector .list-move,.project-selector .list-enter-active,.project-selector .list-leave-active{transition:all .5s ease}.project-selector .list-enter{transform:scale(.95)}.project-selector .list-enter,.project-selector .list-leave-to{opacity:0}.project-selector--theme-tiles .project-selector__card{grid-template-columns:repeat(var(--kvass-project-selector-grid-columns, 2),1fr);gap:var(--kvass-project-selector-grid-gap, 0rem)}@media (max-width: 767px){.project-selector--theme-tiles .project-selector__card{grid-template-columns:1fr;padding-top:2rem}}",ce={key:0,class:"project-selector__navigation"},ae={key:2,class:"project-selector__no-result"},se={created(){this.fetch()}},le=Object.assign(se,{__name:"App.ce",props:{source:{type:String,default:"https://feature.kvass.no"},startCategory:{type:String,default:"all",enums:["all","sale","upcoming","development","sold"]},enabledCategories:{type:String,default:"all,sale,upcoming,development,sold"},theme:{type:String,enum:["default","tiles"],default:"default"},sortOn:{type:String,enum:["status","name"],default:"status"},disableNav:{type:Boolean,default:!1}},setup(e){const o=e,a=y(""),r=y("none"),c=y([]);var s=[];y(null);const d=S(()=>[...o.enabledCategories.split(",").filter(n=>n==="all"?!0:s.find(i=>i.status.includes(n)))]),p=S(()=>{let n=["none"].concat(s.map(i=>{if(i.customFields&&i.customFields["project-type"])return i.customFields["project-type"]}));return[...new Set(n||[])].filter(Boolean)});function $(){c.value=s.filter(n=>a.value==="all"?!0:n.status.includes(a.value)).filter(n=>{if(!p.length||r.value==="none")return!0;if(!(!n.customFields||!n.customFields["project-type"]))return n.customFields["project-type"].includes(r.value)})}return(n,i)=>(t(),l("div",{class:x(["project-selector",`project-selector--theme-${e.theme}`])},[!e.disableNav||!d.value.length?(t(),l("div",ce,[d.value.length?(t(),m(F,{key:0,class:"project-selector__navigation-category",items:d.value,value:a.value,onInput:i[0]||(i[0]=_=>{a.value=_,$()})},null,8,["items","value"])):g("",!0),p.value.length>1?(t(),m(I,{key:1,class:"project-selector__navigation-project-type",items:p.value,value:r.value,onInput:i[1]||(i[1]=_=>{r.value=_.target.value,$()})},null,8,["items","value"])):g("",!0)])):g("",!0),c.value&&c.value.length?(t(),m(N,{key:1,tag:"div",name:"list",appear:"",class:"project-selector__card"},{default:b(()=>[(t(!0),l(w,null,C(c.value,(_,A)=>(t(),m(T,{"disable-label":e.disableNav,key:A,item:_,theme:"border"},null,8,["disable-label","item"]))),128))]),_:1})):(t(),l("div",ae,"Ingen resultater"))],2))}}),k=j(le,[["styles",[oe]]]);k.styles=[...k.styles,...T.styles,...z.styles,...F.styles,...I.styles];customElements.define("kvass-project-portal",V(k));

package/dist/vimeo.js

@@ -0,0 +1 @@
+import{_ as f,o,c as r,z as l,A as m,j as v,w as g,a as d,y as c,B as y,C as k,t as u,d as w,p as b}from"./_plugin-vue_export-helper.js";import{E as p,L as _,W as S}from"./index.js";const x=".widget-kvass-media-render-vimeo{height:100%;width:100%;position:relative}.widget-kvass-media-render-vimeo iframe{height:100%;width:100%}.widget-kvass-media-render-vimeo>*{position:absolute;top:0;left:0;width:100%;height:100%}.widget-kvass-media-render-vimeo__thumbnail{background-size:cover;background-repeat:no-repeat;background-position:center;filter:blur(10px);opacity:.7}.widget-kvass-media-render-vimeo__blocked{display:flex;justify-content:center;align-items:center;left:50%;top:50%;transform:translate(-50%,-50%)}.widget-kvass-media-render-vimeo__blocked svg{opacity:.3}@media (max-width: 992px){.widget-kvass-media-render-vimeo__blocked svg{font-size:2.5em}}.widget-kvass-media-render-vimeo__blocked-warning{pointer-events:initial;position:absolute;bottom:0;text-align:center;background-color:#f2f2f2;font-size:.6em;bottom:3rem;left:3rem;max-width:400px;font-size:.8em;padding:1.5em 2em}.widget-kvass-media-render-vimeo__blocked-warning-button{padding:.5rem;border:1px solid #818181;backdrop-filter:none;background-color:transparent}@media (max-width: 992px){.widget-kvass-media-render-vimeo__blocked-warning{left:.5rem;bottom:.5rem;font-size:.6em;max-width:200px}}.widget-kvass-media-render-vimeo .fade-enter-active,.widget-kvass-media-render-vimeo .fade-leave-active{transition:opacity .5s}.widget-kvass-media-render-vimeo .fade-enter,.widget-kvass-media-render-vimeo .fade-leave-to{opacity:0}",B={props:{url:{type:String,default:""},videoState:{type:String,default:"ready",enums:["ready ","play","pause"]},loop:{type:[String,Boolean],default:!0},autoplay:{type:[String,Boolean],default:!1},controls:{type:[String,Boolean],default:!0},mute:{type:[String,Boolean],default:!1},displayThumbnail:{type:[String,Boolean],default:!0},ignoreConsent:{type:[String,Boolean],default:!1},hideConsent:{type:[String,Boolean],default:!1},thumbnailSource:{type:String,default:""},consentBlockMessage:{type:String,default:"The video is blocked due to lack of consent to cookies"},consentButtonLabel:{type:String,default:"Edit consents"},aspectRatio:{type:String,default:"16/9"}},watch:{videoState:{handler(e,t){if(e!==t)switch(e){case"play":return this.play();case"pause":return this.pause();default:return}}}},data(){return{ready:!1,thumbnail:null,consents:[]}},computed:{kvassDefined(){return typeof Kvass<"u"},showConsent(){return this.hideConsent||!this.kvassDefined?!1:!this.ignoreConsent&&!this.consents.includes("statistics")},videoId(){if(!this.url)return;let e=[p(this.url,/https\:\/\/(w{3}\.)?vimeo\.com\/(.+)\/?/,{group:2}),p(this.url,/https\:\/\/(w{3}\.)?player\.vimeo\.com\/(video\/)?(.+)\/?/,{group:3})].find(t=>!!t);if(e)return e.split("&")[0]}},methods:{openConsent(){this.kvassDefined&&Kvass.emit("consent:show")},async play(){try{this.player.setVolume(0),await this.player.play()}catch(e){console.log(e)}},pause(){this.player.pause()},async init(){const e={url:`https://vimeo.com/${this.videoId}`,loop:this.loop,autoplay:this.autoplay,controls:this.controls,muted:this.mute||this.autoplay,playsinline:1,dnt:1};function t(i){return i==="false"?!1:i==="true"?!0:i}Object.entries(e).map(([i,s])=>e[i]=t(s)),_("https://player.vimeo.com/api/player.js");const a=await S(()=>window.Vimeo,{limit:100});this.player=new a.Player(this.$refs.vimeoPlayer,e),await this.player.ready().then(()=>{this.ready=!0}).catch(i=>{console.log(i)})}},async mounted(){if(this.displayThumbnail&&(this.thumbnail=`/api/media/thumbnail?url=${this.url}`),this.ignoreConsent||!this.kvassDefined)return this.init();let e=t=>{if(this.consents=t||[],!(!this.consents||!this.consents.length)&&this.consents.includes("statistics"))return this.init()};this.kvassDefined&&(Kvass.emit("consent:get",t=>e(t)),Kvass.on("consent:change",e))}},C={key:0,class:"widget-kvass-media-render-vimeo__blocked"},z={class:"widget-kvass-media-render-vimeo__blocked-warning"};function D(e,t,a,i,s,n){return o(),r("div",{class:"widget-kvass-media-render-vimeo",style:c(`aspect-ratio: ${a.aspectRatio};`)},[l((o(),r("div",{key:n.videoId,ref:"vimeoPlayer",class:"widget-kvass-media-render-vimeo__embed",frameborder:"0",allow:"autoplay; fullscreen;",webkitallowfullscreen:"",mozallowfullscreen:""})),[[m,s.ready]]),v(y,{name:"fade",mode:"in-out"},{default:g(()=>[l(d("div",{class:"widget-kvass-media-render-vimeo__thumbnail",style:c({backgroundImage:`url(${s.thumbnail})`})},null,4),[[m,!s.ready&&s.thumbnail]])]),_:1}),n.showConsent?(o(),r("div",C,[d("div",z,[k(u(a.consentBlockMessage)+" ",1),d("button",{class:"widget-kvass-media-render-vimeo__blocked-warning-button",onClick:t[0]||(t[0]=(...h)=>n.openConsent&&n.openConsent(...h))},u(a.consentButtonLabel),1)])])):w("",!0)],4)}const V=f(B,[["render",D],["styles",[x]]]);customElements.define("kvass-vimeo",b(V));

package/dist/youtube.js

@@ -0,0 +1 @@
+import{_ as p,o as d,c as u,a as i,j as h,w as y,z as f,y as l,A as b,B as g,C as w,t as c,d as v,p as k}from"./_plugin-vue_export-helper.js";import{E as a,L as _,W as S}from"./index.js";const B=".widget-kvass-media-render-youtube{height:100%;width:100%;position:relative}.widget-kvass-media-render-youtube iframe{height:100%;width:100%}.widget-kvass-media-render-youtube>*{position:absolute;top:0;left:0;width:100%;height:100%}.widget-kvass-media-render-youtube__thumbnail{background-size:cover;background-repeat:no-repeat;background-position:center;filter:blur(10px);opacity:.7}.widget-kvass-media-render-youtube__blocked{display:flex;justify-content:center;align-items:center;left:50%;top:50%;transform:translate(-50%,-50%)}.widget-kvass-media-render-youtube__blocked svg{opacity:.3}@media (max-width: 992px){.widget-kvass-media-render-youtube__blocked svg{font-size:2.5em}}.widget-kvass-media-render-youtube__blocked-warning{pointer-events:initial;position:absolute;bottom:0;text-align:center;background-color:#f2f2f2;font-size:.6em;bottom:3rem;left:3rem;max-width:400px;font-size:.8em;padding:1.5em 2em}.widget-kvass-media-render-youtube__blocked-warning-button{padding:.5rem;border:1px solid #818181;backdrop-filter:none;background-color:transparent}@media (max-width: 992px){.widget-kvass-media-render-youtube__blocked-warning{left:.5rem;bottom:.5rem;font-size:.6em;max-width:200px}}.widget-kvass-media-render-youtube .fade-enter-active,.widget-kvass-media-render-youtube .fade-leave-active{transition:opacity .5s}.widget-kvass-media-render-youtube .fade-enter,.widget-kvass-media-render-youtube .fade-leave-to{opacity:0}",x={props:{url:{type:String,default:""},videoState:{type:String,default:"ready",enums:["ready ","play","pause"]},loop:{type:[String,Boolean],default:!0},autoplay:{type:[String,Boolean],default:!1},controls:{type:[String,Boolean],default:!0},mute:{type:[String,Boolean],default:!1},displayThumbnail:{type:[String,Boolean],default:!0},ignoreConsent:{type:[String,Boolean],default:!1},hideConsent:{type:[String,Boolean],default:!1},thumbnailSource:{type:String,default:""},consentBlockMessage:{type:String,default:"The video is blocked due to lack of consent to cookies"},consentButtonLabel:{type:String,default:"Edit consents"},aspectRatio:{type:String,default:"16/9"}},watch:{videoState:{handler(e,t){if(e!==t)switch(e){case"play":return this.play();case"pause":return this.pause();default:return}}}},data(){return{ready:!1,thumbnail:null,consents:[]}},computed:{kvassDefined(){return typeof Kvass<"u"},showConsent(){return this.hideConsent||!this.kvassDefined?!1:!this.ignoreConsent&&!this.consents.includes("statistics")},videoId(){if(!this.url)return;let e=this.url,t=[a(e,/https\:\/\/(w{3}\.)?youtube\.com\/watch\?v=(.+)\/?/,{group:2}),a(e,/https\:\/\/(w{3}\.)?youtube\.com\/embed\/(.+)\/?/,{group:2}),a(e,/https\:\/\/(w{3}\.)?youtube\.com\/watch\/(.+)\/?/,{group:2}),a(e,/https\:\/\/(w{3}\.)?youtu\.be\/(.+)\/?/,{group:2})].find(s=>!!s);if(t)return t.split("&")[0]}},methods:{openConsent(){this.kvassDefined&&Kvass.emit("consent:show")},play(){this.player.mute(),this.player.playVideo()},pause(){this.player.pauseVideo()},async init(){const e={loop:this.loop,autoplay:this.autoplay,controls:this.controls,muted:this.mute||this.autoplay,enablejsapi:1,playsinline:1};function t(s){return s==="false"?!1:s==="true"?!0:s}Object.entries(e).map(([s,r])=>e[s]=Number(t(r))),_("https://www.youtube.com/iframe_api"),await S(()=>window.YT&&window.YT.Player,{limit:200}),this.player=new YT.Player(this.$refs.youtubePlayer,{videoId:this.videoId,playerVars:{...e,videoId:this.videoId,origin:window.location.host},events:{onReady:s=>{this.ready=!0,e.mute&&this.player.mute(),e.autoplay&&this.play()}}})}},async mounted(){if(this.displayThumbnail&&(this.thumbnail=!this.thumbnailSource&&this.kvassDefined?`/api/media/thumbnail?url=${this.url}`:this.thumbnailSource),this.ignoreConsent||!this.kvassDefined)return this.init();let e=t=>{if(this.consents=t||[],!(!this.consents||!this.consents.length)&&this.consents.includes("statistics"))return this.init()};this.kvassDefined&&(Kvass.emit("consent:get",t=>e(t)),Kvass.on("consent:change",e))}},C={ref:"youtubePlayer",class:"kvass-media-render-youtube__embed",frameborder:"0",allow:"autoplay; fullscreen;",webkitallowfullscreen:"",mozallowfullscreen:""},T={key:0,class:"widget-kvass-media-render-youtube__blocked"},z={class:"widget-kvass-media-render-youtube__blocked-warning"};function D(e,t,s,r,n,o){return d(),u("div",{class:"widget-kvass-media-render-youtube",style:l(`aspect-ratio: ${s.aspectRatio};`)},[i("div",C,null,512),h(g,{name:"fade",mode:"in-out"},{default:y(()=>[f(i("div",{class:"widget-kvass-media-render-youtube__thumbnail",style:l({backgroundImage:`url(${n.thumbnail})`})},null,4),[[b,!n.ready&&n.thumbnail]])]),_:1}),o.showConsent?(d(),u("div",T,[i("div",z,[w(c(s.consentBlockMessage)+" ",1),i("button",{class:"widget-kvass-media-render-youtube__blocked-warning-button",onClick:t[0]||(t[0]=(...m)=>o.openConsent&&o.openConsent(...m))},c(s.consentButtonLabel),1)])])):v("",!0)],4)}const E=p(x,[["render",D],["styles",[B]]]);customElements.define("kvass-youtube",k(E));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvass/widgets",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,6 +16,9 @@
     "vue": "^3.4.15",
     "webfontloader": "^1.6.28"
   },
+  "files": [
+    "dist"
+  ],
   "devDependencies": {
     "@types/webfontloader": "^1.6.38",
     "@vitejs/plugin-vue": "^5.0.3",

package/.github/workflows/semantic-release.yml

@@ -1,21 +0,0 @@
-name: CI
-on: 
-  push:
-    branches: 
-      - master
-jobs:
-  deploy:
-    runs-on: ubuntu-20.04
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '20'
-      - name: Authenticate with private NPM package
-        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
-      - run: npm install
-      - name: Release
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
-        run: npx semantic-release

package/.prettierrc

@@ -1,6 +0,0 @@
-{
-	"singleQuote": true,
-	"tabWidth": 2,
-	"trailingComma": "all",
-	"semi": false
-}

package/.releaserc

@@ -1,3 +0,0 @@
-{
-  "ci": false
-}

package/index.html

@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="nb">
-
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Kvass Web Components</title>
-</head>
-
-<body
-  style="font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">
-  <!-- <kvass-contact
-      account-url="https://local.kvass.test"
-      label-subtitle="Ønsker du å motta vårt nyhetsbrev?"
-      tags="Test side"
-      upsell
-      references="Residential:630f5c19ffd25600331dcd05"
-      default-assignees="630f5c19ffd25600331dcc06,627181d6009b8f0022b09ac8"
-    />
-
-    <script type="module" src="/src/contact/main.js"></script> -->
-
-  <!-- <kvass-img-comparison-slider
-    first-image="https://assets.lastdodo.com/image/ld_medium/plain/assets/catalog/assets/2013/12/2/2/8/7/pdf_287e8674-5b0f-11e3-90d5-a6d2687aed80.jpg,First image"
-    second-image="https://seeklogo.com/images/I/Ilguciema_Kvass-logo-227537F6D4-seeklogo.com.png,Second imanr bge"
-    options="keyboard:disabled,direction:vertical"></kvass-img-comparison-slider>
-
-    <script type="module" src="/src/img-comparison-slider/main.js"></script> -->
-  <!-- <kvass-map coordinates="10.745,59.9123" address="Klokkergårdveien 5, 1711 Sarpsborg" show-address /> -->
-  <!-- <kvass-flatfinder project-url="https://alvebergtunet.production.kvass.no" project-id="65a4f48ed1ba5cd61468f235"
-    path-prefix="/residential" />
-  <script type="module" src="/dist/flatfinder.js"></script> -->
-  <kvass-font-selector></kvass-font-selector>
-  <script type="module" src="/src/font-selector/main.js"></script>
-</body>
-
-</html>

package/src/contact/README.md

@@ -1,80 +0,0 @@
-# kvass-contact
-
-A simple, embeddable Web Component for sending leads to Kvass.
-
-`https://unpkg.com/@kvass/widgets@latest/dist/contact.js`
-
-## Develop
-
-To run in development mode, first install the neccessary packages.
-
-```
-npm install
-```
-
-Then, run in development mode.
-
-```
-npm run dev
-```
-
-Open `localhost:3000` in the browser of your choice, and you will see the form widget.
-
-## Build
-
-To build the widget for production, run `build` instead of `dev`.
-
-```
-npm run build
-```
-
-To use the widget, use the `<kvass-contact />` element as shown here.
-
-```html
-<kvass-contact account-url="https://example.kvass.no" />
-```
-
-## Props
-
-The component has several props for easy configuration.
-
-| Name                   | Type    | Description                                                                              | Default                                 |
-| :--------------------- | :------ | :--------------------------------------------------------------------------------------- | :-------------------------------------- |
-| account-url `required` | String  | Account URL where data will be sent.                                                     |                                         |
-| references `required`  | String  | Comma-separated list of references in {type}:{id} format                                 |                                         |
-| default-assignees      | String  | Comma-separated list of userIds. Used as fallback assignees of the created task in Kvass |                                         |
-| projects               | String  | Comma-separated list of project ids. If not defined, a selection field will show         |                                         |
-| tags                   | String  | Comma-separated list of tags                                                             |                                         |
-| upsell                 | Boolean | If `true`, shows a checkbox for upsell                                                   | `false`                                 |
-| label-title            | String  | Title of the lead form                                                                   | `"Meld interesse"`                      |
-| label-subtitle         | String  | Optional subtitle shown under form title                                                 |                                         |
-| label-submit           | String  | Label for the submit button                                                              | `"Meld interesse"`                      |
-| privacy-url            | String  | Optional URL to privacy statement                                                        | `{accountUrl}/api/legal/privacy/tenant` |
-| label-success          | String  | Message displayed after submit                                                           | `"Takk for interessen!"`                |
-| success-theme          | String  | Success theme, enums: ['default', 'overlay']                                             | `"default"`                             |
-| submit-timeout         | Number  | Delay on submit reset                                                                    | `2000`                                  |
-
-## Styling
-
-The widget's styles are based on CSS custom properties, and can be overwritten.
-These are the available CSS variables.
-
-| Name                             | Description                                                 | Default       |
-| :------------------------------- | :---------------------------------------------------------- | :------------ |
-| --kvass-contact-background       | The form's background color                                 | `#ffffff`     |
-| --kvass-contact-spacing          | Base spacing amount. Other amounts are calculated from this | `2rem`        |
-| --kvass-contact-padding          | Outer padding of the form element                           | `2rem`        |
-| --kvass-contact-max-width        | Max width of the form                                       | `720px`       |
-| --kvass-contact-border-radius    | Base border-radius                                          | `4px`         |
-| --kvass-contact-border-color     | Color of the borders of the form fields                     | `#eaeaea`     |
-| --kvass-contact-border-width     | Border-width for input fields                               | `1px`         |
-| --kvass-contact-color            | Base text color                                             | `#222222`     |
-| --kvass-contact-color-inverted   | Inverted text color. Used for the submit button             | `#ffffff`     |
-| --kvass-contact-primary          | Primary color. Used for submit button and form elements     | `#1d56d8`     |
-| --kvass-contact-error            | Error color. Used for error states                          | `#d81d1d`     |
-| --kvass-contact-grid-columns     | Amount of columns in the form                               | `1`           |
-| --kvass-contact-disabled         | Background color on disabled button                         | `#eaeaea`     |
-| --kvass-contact-input-background | Background color for input fields                           | `transparent` |
-| --kvass-contact-outline-width    | Width of focus outline                                      | `2px`         |
-| --kvass-contact-outline-offset   | Offset between the form control and its outline             | `0px`         |
-| --kvass-contact-checkbox-size    | Size of checkboxes                                          | `1em`         |

package/src/contact/api.js

@@ -1,82 +0,0 @@
-function createLead(url, data, projects, defaultAssignees) {
-  if (projects && projects instanceof Array && projects.length) {
-    return Promise.all(
-      projects.map((p) => {
-        let projectRef = { onModel: 'Project', ref: p }
-        return createLead(url, {
-          ...data,
-          project: p,
-          references: [projectRef, ...data.references],
-        })
-      }),
-    )
-  }
-
-  if (!projects?.length && defaultAssignees?.length) {
-    return createContact(
-      url,
-      { ...data.contact, assignees: defaultAssignees },
-      data.comment,
-    )
-  }
-
-  return fetch(`${url}/api/graphql`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
-      query: `
-				mutation ($data: LeadCreate!) {
-					LeadCreate(data: $data) {
-						id
-					}
-				}
-			`,
-      variables: { data },
-    }),
-  }).then((res) => res.json())
-}
-
-function createContact(url, data, comment) {
-  return fetch(`${url}/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, comment },
-    }),
-  }).then((res) => res.json())
-}
-
-function getProjects(url) {
-  return fetch(`${url}/api/graphql`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
-      query: `
-				query {
-					Projects {
-						id
-						name
-						isPublished
-					}
-				}
-			`,
-    }),
-  })
-    .then((res) => res.json())
-    .then((res) => res.data.Projects.filter((d) => d.isPublished))
-}
-
-export { createLead, createContact, getProjects }

package/src/contact/components/Checkbox.ce.vue

@@ -1,127 +0,0 @@
-<script>
-export default {
-  // disable attrs on root element
-  inheritAttrs: false,
-}
-</script>
-
-<script setup>
-const emit = defineEmits(['update:modelValue'])
-const props = defineProps({
-  modelValue: [Boolean, Array],
-  state: String,
-  label: String,
-})
-
-function onChange(ev) {
-  if (typeof props.modelValue === 'boolean')
-    return emit('update:modelValue', ev.target.checked)
-  return emit(
-    'update:modelValue',
-    ev.target.checked
-      ? [...props.modelValue, props.state]
-      : props.modelValue.filter((v) => v !== props.state),
-  )
-}
-</script>
-
-<template>
-  <label
-    class="kvass-contact-checkbox"
-    :class="[
-      { 'kvass-contact-checkbox--required': 'required' in $attrs },
-      $attrs.class,
-    ]"
-  >
-    <input
-      class="kvass-contact-checkbox__element"
-      type="checkbox"
-      v-bind="$attrs"
-      :value="modelValue"
-      :checked="$attrs.checked"
-      @change="onChange"
-    />
-    <span class="kvass-contact-checkbox__label" v-html="label"></span>
-  </label>
-</template>
-
-<style lang="scss">
-.kvass-contact-checkbox {
-  display: flex;
-  align-items: start;
-  gap: 0.75rem;
-  cursor: pointer;
-
-  &__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)
-    );
-
-    &: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)
-      );
-    }
-
-    &: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)
-      );
-
-      &::before {
-        content: '✓';
-        font-size: 0.75em;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        translate: -50% -50%;
-
-        color: var(
-          --kvass-contact-color-inverted,
-          var(--kvass-contact-default-color-inverted)
-        );
-      }
-    }
-  }
-
-  &--required {
-    span:after {
-      content: '*';
-      color: var(--kvass-contact-error, var(--kvass-contact-default-error));
-      margin-left: 0.3rem;
-    }
-  }
-}
-</style>

package/src/contact/components/Field.ce.vue

@@ -1,156 +0,0 @@
-<script>
-export default {
-  // disable attrs on root element
-  inheritAttrs: false,
-}
-</script>
-
-<script setup>
-import { computed, ref } from 'vue';
-
-const emit = defineEmits(['update:modelValue'])
-const props = defineProps({
-  modelValue: [String, Array],
-  label: String,
-  type: String,
-})
-
-const component = computed(() => {
-  switch (props.type) {
-    case 'textarea':
-      return 'textarea'
-    case 'select':
-      return 'select'
-    default:
-      return 'input'
-  }
-})
-
-const focused = ref(false)
-const blurred = ref(false)
-
-function onInput(event) {
-  emit('update:modelValue', event.target.value)
-  focused.value = true
-}
-
-function onBlur() {
-  if (!focused.value) return
-  blurred.value = true
-}
-</script>
-
-<template>
-  <label
-    class="kvass-contact-field"
-    :class="[
-      {
-        'kvass-contact-field--required': 'required' in $attrs,
-        'kvass-contact-field--focused': blurred,
-      },
-      $attrs.class,
-    ]"
-    :for="$attrs.id"
-  >
-    <span class="kvass-contact-field__label" v-if="label">{{ label }}</span>
-    <component
-      :is="component"
-      class="kvass-contact-field__element"
-      v-bind="$attrs"
-      :value="modelValue"
-      @input="onInput"
-      @blur="onBlur"
-    >
-      <slot />
-    </component>
-  </label>
-</template>
-
-<style lang="scss">
-.kvass-contact-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-
-  &__label {
-    margin-left: var(--kvass-contact-label-transform, 0);
-    font-weight: var(--kvass-contact-label-weight, initial);
-  }
-
-  input {
-    -webkit-appearance: none;
-  }
-  
-  &__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)
-    );
-
-    &: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)
-      );
-    }
-  }
-
-  &--required {
-    .kvass-contact-field__label::after {
-      content: '*';
-      color: var(--kvass-contact-error, var(--kvass-contact-default-error));
-      margin-left: 0.3rem;
-    }
-
-    &.kvass-contact-field--focused {
-      .kvass-contact-field__element:invalid {
-        border-color: var(
-          --kvass-contact-error,
-          var(--kvass-contact-default-error)
-        );
-      }
-    }
-  }
-
-  &--full-width {
-    grid-column-end: span
-      var(
-        --kvass-contact-grid-columns,
-        var(--kvass-contact-default-grid-columns)
-      );
-  }
-}
-</style>

package/src/contact/components/Fieldset.ce.vue

@@ -1,63 +0,0 @@
-<script setup>
-defineProps({
-  label: String,
-})
-</script>
-
-<template>
-  <fieldset class="kvass-contact-fieldset">
-    <legend class="kvass-contact-fieldset__label" v-if="label">
-      {{ label }}
-    </legend>
-    <slot />
-  </fieldset>
-</template>
-
-<style lang="scss">
-.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;
-
-  &: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)
-    );
-  }
-
-  &__label {
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    top: -1.4rem;
-    left: 0;
-  }
-}
-</style>