@kvass/widgets 1.2.2 → 1.2.3

package/dist/img-comparison-slider.js

@@ -1,2 +0,0 @@
-import{q as E,s as T,_ as k,b as y,o as L,e as M,w as S,a as v,v as g,t as _,m as D,p as P}from"./_plugin-vue_export-helper.js";(()=>{var f={792:(s,n,r)=>{r.d(n,{Z:()=>m});var a=r(609),d=r.n(a)()(function(l){return l[1]});d.push([s.id,':host{--divider-width: 1px;--divider-color: #fff;--divider-shadow: none;--default-handle-width: 50px;--default-handle-color: #fff;--default-handle-opacity: 1;--default-handle-shadow: none;--handle-position-start: 50%;position:relative;display:inline-block;overflow:hidden;line-height:0;direction:ltr}@media screen and (-webkit-min-device-pixel-ratio: 0)and (min-resolution: 0.001dpcm){:host{outline-offset:1px}}:host(:focus){outline:2px solid -webkit-focus-ring-color}::slotted(*){-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.first{position:absolute;left:0;top:0;right:0;line-height:normal;font-size:100%;max-height:100%;height:100%;width:100%;--exposure: 50%;--keyboard-transition-time: 0ms;--default-transition-time: 0ms;--transition-time: var(--default-transition-time)}.first .first-overlay-container{position:relative;clip-path:inset(0 var(--exposure) 0 0);transition:clip-path var(--transition-time);height:100%}.first .first-overlay{overflow:hidden;height:100%}.first.focused{will-change:clip-path}.first.focused .first-overlay-container{will-change:clip-path}.second{position:relative}.handle-container{transform:translateX(50%);position:absolute;top:0;right:var(--exposure);height:100%;transition:right var(--transition-time),bottom var(--transition-time)}.focused .handle-container{will-change:right}.divider{position:absolute;height:100%;width:100%;left:0;top:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.divider:after{content:" ";display:block;height:100%;border-left-width:var(--divider-width);border-left-style:solid;border-left-color:var(--divider-color);box-shadow:var(--divider-shadow)}.handle{position:absolute;top:var(--handle-position-start);pointer-events:none;box-sizing:border-box;margin-left:1px;transform:translate(calc(-50% - 0.5px), -50%);line-height:0}.default-handle{width:var(--default-handle-width);opacity:var(--default-handle-opacity);transition:all 1s;filter:drop-shadow(var(--default-handle-shadow))}.default-handle path{stroke:var(--default-handle-color)}.vertical .first-overlay-container{clip-path:inset(0 0 var(--exposure) 0)}.vertical .handle-container{transform:translateY(50%);height:auto;top:unset;bottom:var(--exposure);width:100%;left:0;flex-direction:row}.vertical .divider:after{height:1px;width:100%;border-top-width:var(--divider-width);border-top-style:solid;border-top-color:var(--divider-color);border-left:0}.vertical .handle{top:auto;left:var(--handle-position-start);transform:translate(calc(-50% - 0.5px), -50%) rotate(90deg)}',""]);const m=d},609:s=>{s.exports=function(n){var r=[];return r.toString=function(){return this.map(function(a){var d=n(a);return a[2]?"@media ".concat(a[2]," {").concat(d,"}"):d}).join("")},r.i=function(a,d,m){typeof a=="string"&&(a=[[null,a,""]]);var l={};if(m)for(var h=0;h<this.length;h++){var w=this[h][0];w!=null&&(l[w]=!0)}for(var c=0;c<a.length;c++){var e=[].concat(a[c]);m&&l[e[0]]||(d&&(e[2]?e[2]="".concat(d," and ").concat(e[2]):e[2]=d),r.push(e))}},r}}},p={};function u(s){var n=p[s];if(n!==void 0)return n.exports;var r=p[s]={id:s,exports:{}};return f[s](r,r.exports,u),r.exports}u.n=s=>{var n=s&&s.__esModule?()=>s.default:()=>s;return u.d(n,{a:n}),n},u.d=(s,n)=>{for(var r in n)u.o(n,r)&&!u.o(s,r)&&Object.defineProperty(s,r,{enumerable:!0,get:n[r]})},u.o=(s,n)=>Object.prototype.hasOwnProperty.call(s,n),(()=>{var s=u(792);const n="rendered",r=(c,e)=>{const i=c.getBoundingClientRect();let t,o;return e.type==="mousedown"?(t=e.clientX,o=e.clientY):(t=e.touches[0].clientX,o=e.touches[0].clientY),t>=i.x&&t<=i.x+i.width&&o>=i.y&&o<=i.y+i.height},a=document.createElement("template");a.innerHTML='<div class="second" id="second"> <slot name="second"><slot name="before"></slot></slot> </div> <div class="first" id="first"> <div class="first-overlay"> <div class="first-overlay-container" id="firstImageContainer"> <slot name="first"><slot name="after"></slot></slot> </div> </div> <div class="handle-container"> <div class="divider"></div> <div class="handle" id="handle"> <slot name="handle"> <svg xmlns="http://www.w3.org/2000/svg" class="default-handle" viewBox="-8 -3 16 6"> <path d="M -5 -2 L -7 0 L -5 2 M 5 -2 L 7 0 L 5 2" fill="none" vector-effect="non-scaling-stroke"/> </svg> </slot> </div> </div> </div> ';const d={ArrowLeft:-1,ArrowRight:1},m=["horizontal","vertical"],l=c=>({x:c.touches[0].pageX,y:c.touches[0].pageY}),h=c=>({x:c.pageX,y:c.pageY});class w extends HTMLElement{constructor(){super(),this.exposure=this.hasAttribute("value")?parseFloat(this.getAttribute("value")):50,this.slideOnHover=!1,this.slideDirection="horizontal",this.keyboard="enabled",this.isMouseDown=!1,this.animationDirection=0,this.isFocused=!1,this.handle=!1,this.onMouseMove=t=>{if(this.isMouseDown||this.slideOnHover){const o=h(t);this.slideToPage(o)}},this.bodyUserSelectStyle="",this.onMouseDown=t=>{if(this.slideOnHover||this.handle&&!r(this.handleElement,t))return;t.preventDefault(),window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onWindowMouseUp),this.isMouseDown=!0,this.enableTransition();const o=h(t);this.slideToPage(o),this.focus(),this.bodyUserSelectStyle=window.document.body.style.userSelect,window.document.body.style.userSelect="none"},this.onWindowMouseUp=()=>{this.isMouseDown=!1,window.document.body.style.userSelect=this.bodyUserSelectStyle,window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onWindowMouseUp)},this.touchStartPoint=null,this.isTouchComparing=!1,this.hasTouchMoved=!1,this.onTouchStart=t=>{this.handle&&!r(this.handleElement,t)||(this.touchStartPoint=l(t),this.isFocused&&(this.enableTransition(),this.slideToPage(this.touchStartPoint)))},this.onTouchMove=t=>{if(this.touchStartPoint===null)return;const o=l(t);if(this.isTouchComparing)return this.slideToPage(o),t.preventDefault(),!1;if(!this.hasTouchMoved){const b=Math.abs(o.y-this.touchStartPoint.y),x=Math.abs(o.x-this.touchStartPoint.x);if(this.slideDirection==="horizontal"&&b<x||this.slideDirection==="vertical"&&b>x)return this.isTouchComparing=!0,this.focus(),this.slideToPage(o),t.preventDefault(),!1;this.hasTouchMoved=!0}},this.onTouchEnd=()=>{this.isTouchComparing=!1,this.hasTouchMoved=!1,this.touchStartPoint=null},this.onBlur=()=>{this.stopSlideAnimation(),this.isFocused=!1,this.firstElement.classList.remove("focused")},this.onFocus=()=>{this.isFocused=!0,this.firstElement.classList.add("focused")},this.onKeyDown=t=>{if(this.keyboard==="disabled")return;const o=d[t.key];this.animationDirection!==o&&o!==void 0&&(this.animationDirection=o,this.startSlideAnimation())},this.onKeyUp=t=>{if(this.keyboard==="disabled")return;const o=d[t.key];o!==void 0&&this.animationDirection===o&&this.stopSlideAnimation()},this.resetDimensions=()=>{this.imageWidth=this.offsetWidth,this.imageHeight=this.offsetHeight};const e=this.attachShadow({mode:"open"}),i=document.createElement("style");i.innerHTML=s.Z,this.getAttribute("nonce")&&i.setAttribute("nonce",this.getAttribute("nonce")),e.appendChild(i),e.appendChild(a.content.cloneNode(!0)),this.firstElement=e.getElementById("first"),this.secondElement=e.getElementById("second"),this.handleElement=e.getElementById("handle")}get value(){return this.exposure}set value(e){const i=parseFloat(e);i!==this.exposure&&(this.exposure=i,this.enableTransition(),this.setExposure())}get hover(){return this.slideOnHover}set hover(e){this.slideOnHover=e.toString().toLowerCase()!=="false",this.removeEventListener("mousemove",this.onMouseMove),this.slideOnHover&&this.addEventListener("mousemove",this.onMouseMove)}get direction(){return this.slideDirection}set direction(e){this.slideDirection=e.toString().toLowerCase(),this.slide(0),this.firstElement.classList.remove(...m),m.includes(this.slideDirection)&&this.firstElement.classList.add(this.slideDirection)}static get observedAttributes(){return["hover","direction"]}connectedCallback(){this.hasAttribute("tabindex")||(this.tabIndex=0),this.addEventListener("dragstart",e=>(e.preventDefault(),!1)),new ResizeObserver(this.resetDimensions).observe(this),this.setExposure(0),this.keyboard=this.hasAttribute("keyboard")&&this.getAttribute("keyboard")==="disabled"?"disabled":"enabled",this.addEventListener("keydown",this.onKeyDown),this.addEventListener("keyup",this.onKeyUp),this.addEventListener("focus",this.onFocus),this.addEventListener("blur",this.onBlur),this.addEventListener("touchstart",this.onTouchStart,{passive:!0}),this.addEventListener("touchmove",this.onTouchMove,{passive:!1}),this.addEventListener("touchend",this.onTouchEnd),this.addEventListener("mousedown",this.onMouseDown),this.handle=this.hasAttribute("handle"),this.hover=!!this.hasAttribute("hover")&&this.getAttribute("hover"),this.direction=this.hasAttribute("direction")?this.getAttribute("direction"):"horizontal",this.resetDimensions(),this.classList.contains(n)||this.classList.add(n),this.querySelectorAll('[slot="before"], [slot="after"]').length>0&&console.warn(`<img-comparison-slider>: slot names "before" and "after" are deprecated and soon won't be supported. Please use slot="first" instead of slot="after", and slot="second" instead of slot="before".`)}disconnectedCallback(){this.transitionTimer&&window.clearTimeout(this.transitionTimer)}attributeChangedCallback(e,i,t){e==="hover"&&(this.hover=t),e==="direction"&&(this.direction=t),e==="keyboard"&&(this.keyboard=t==="disabled"?"disabled":"enabled")}setExposure(e=0){var i;this.exposure=(i=this.exposure+e)<0?0:i>100?100:i,this.firstElement.style.setProperty("--exposure",100-this.exposure+"%")}slide(e=0){this.setExposure(e);const i=new Event("slide");this.dispatchEvent(i)}slideToPage(e){this.slideDirection==="horizontal"&&this.slideToPageX(e.x),this.slideDirection==="vertical"&&this.slideToPageY(e.y)}slideToPageX(e){const i=e-this.getBoundingClientRect().left-window.scrollX;this.exposure=i/this.imageWidth*100,this.slide(0)}slideToPageY(e){const i=e-this.getBoundingClientRect().top-window.scrollY;this.exposure=i/this.imageHeight*100,this.slide(0)}enableTransition(){this.firstElement.style.setProperty("--transition-time","100ms"),this.transitionTimer=window.setTimeout(()=>{this.firstElement.style.setProperty("--transition-time","var(--default-transition-time)"),this.transitionTimer=null},100)}startSlideAnimation(){let e=null,i=this.animationDirection;this.firstElement.style.setProperty("--transition-time","var(--keyboard-transition-time)");const t=o=>{if(this.animationDirection===0||i!==this.animationDirection)return;e===null&&(e=o);const b=(o-e)/16.666666666666668*this.animationDirection;this.slide(b),setTimeout(()=>window.requestAnimationFrame(t),0),e=o};window.requestAnimationFrame(t)}stopSlideAnimation(){this.animationDirection=0,this.firstElement.style.setProperty("--transition-time","var(--default-transition-time)")}}typeof window<"u"&&window.customElements.define("img-comparison-slider",w)})()})();const A=E({name:"ImgComparisonSlider",setup(f,{slots:p}){return()=>T("img-comparison-slider",p.default())}}),C=`.img-comparison-slider{width:100%;height:100%;--divider-width: 4px;--divider-color: black}.img-comparison-slider__image{width:100%;height:100%;object-fit:cover}.img-comparison-slider .handle{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:1rem;min-width:800px;font-size:1rem}@media (max-width: 600px){.img-comparison-slider .handle{font-size:.75rem}}.img-comparison-slider .handle__caption{color:#fff;word-wrap:wrap;width:100%}.img-comparison-slider .handle__caption--left{text-align:right}.img-comparison-slider .handle__svg{padding:.3em;background-color:#000;border-radius:100%}.img-comparison-slider .handle__svg svg{width:2.5em;height:2.5em}
-`,I=["src"],H=["src"],z={slot:"handle",class:"handle"},B={class:"handle__caption handle__caption--left"},O=["innerHTML"],F={class:"handle__caption handle__caption--right"},j={__name:"ImgComparisonSlider.ce",props:{firstImage:{type:String,default:"https://assets.kvass.no/641c0b087c49867b0b1065ec,Første bilde"},secondImage:{type:String,default:"https://assets.kvass.no/641c0a8c7c49867b0b106570,Andre bilde"},options:{type:String,default:""},handleSvg:{type:String,default:'<svg xmlns="http://www.w3.org/2000/svg"  viewBox="-8 -3 16 6"><path stroke="#fff" d="M -3 -2 L -5 0 L -3 2 M -3 -2 L -3 2 M 3 -2 L 5 0 L 3 2 M 3 -2 L 3 2" stroke-width="1" fill="#fff" vector-effect="non-scaling-stroke"></path></svg>'}},setup(f){const p={value:50,hover:!1,direction:"horizontal",keyboard:"enabled",handle:!1};function u(l){if(!l)return{};const h=l.split(",");return{url:h[0],description:h[1]}}const s=f,n=u(s.firstImage),r=y(()=>n.description),a=u(s.secondImage),d=y(()=>a.description),m=y(()=>{const l=s.options.split(",").map(h=>h.split(":"));return Object.fromEntries(l)});return(l,h)=>(L(),M(g(A),D({style:`--first-image-caption: ${r.value}; --second-image-caption: ${d.value}`,tabindex:"0",class:"img-comparison-slider"},{...p,...m.value}),{default:S(()=>[v("img",{slot:"first",class:"img-comparison-slider__image",src:g(n).url},null,8,I),v("img",{slot:"second",class:"img-comparison-slider__image",src:g(a).url},null,8,H),v("div",z,[v("p",B,_(g(n).description),1),v("div",{class:"handle__svg",innerHTML:f.handleSvg},null,8,O),v("p",F,_(g(a).description),1)])]),_:1},16,["style"]))}},U=k(j,[["styles",[C]]]);customElements.define("kvass-img-comparison-slider",P(U));

package/dist/index.js

@@ -1 +0,0 @@
-function a(e,t,n={}){let{group:i=1}=n,r=e.match(t);if(r)return r[i]}function o(e){return new Promise((t,n)=>{setTimeout(t,e)})}async function u(e,t={}){let{interval:n=200,limit:i=50}=t,r=0,c;for(;r<i&&(r++,!(c=e()));)await o(n);if(r>=i)throw new Error("Could not resolve");return c}function l(e){if(document.querySelector(`script[src="${e}"]`))return;let t=document.createElement("script");t.type="text/javascript",t.src=e,document.body.appendChild(t)}export{a as E,l as L,u as W};