@webreact/webreact-components
Advanced tools
Comparing version 0.4.43 to 0.4.44
@@ -81,6 +81,6 @@ 'use strict'; | ||
render() { | ||
return (index.h("article", { ref: (el) => this.accordion = el, class: ['accordion', this.open ? 'active' : ''].join(' ') }, this.renderImage(), index.h("header", { class: 'accordion__header', onClick: () => this.open = !this.open }, index.h("h3", { class: 'accordion__title' }, this.accordionTitle), this.renderStateButton()), index.h("section", { class: 'accordion__content', ref: (el) => this.contentElement = el }, index.h("slot", null)))); | ||
return (index.h("article", { ref: (el) => this.accordion = el, class: ['accordion', this.open ? 'active' : ''].join(' ') }, this.renderImage(), index.h("header", { class: 'accordion__header', onClick: () => this.open = !this.open }, index.h("h3", { class: 'accordion__title' }, this.accordionTitle), this.renderStateButton()), index.h("section", { class: 'accordion__content', ref: (el) => this.contentElement = el, "aria-hidden": this.open ? 'true' : 'false' }, index.h("slot", null)))); | ||
} | ||
renderStateButton() { | ||
return (index.h("button", { class: ['accordion__button', this.open ? 'active' : ''].join(' ') }, index.h("span", null), index.h("span", null))); | ||
return (index.h("button", { class: ['accordion__button', this.open ? 'active' : ''].join(' '), name: `${this.open ? 'Verberg' : 'Toon'} de inhoud van ${this.accordionTitle}` }, index.h("span", null), index.h("span", null))); | ||
} | ||
@@ -87,0 +87,0 @@ /** |
@@ -104,3 +104,3 @@ 'use strict'; | ||
render() { | ||
return (index.h("div", { class: 'perspective-wrapper' }, index.h("article", { class: 'case-card', ref: (el) => this.card = el }, this.renderImage(), index.h("a", { class: 'case-card__link', href: this.href }), index.h("footer", { class: 'case-card__footer' }, index.h("h3", { class: 'is-h6' }, this.caseTitle), index.h("button", { class: 'case-card__button' }, this.renderPlayArrow()))))); | ||
return (index.h("div", { class: 'perspective-wrapper' }, index.h("article", { class: 'case-card', ref: (el) => this.card = el }, this.renderImage(), index.h("a", { class: 'case-card__link', href: this.href, title: `Bekijk ${this.caseTitle}` }), index.h("footer", { class: 'case-card__footer' }, index.h("h3", { class: 'is-h6' }, this.caseTitle), index.h("button", { class: 'case-card__button', name: `Bekijk ${this.caseTitle}` }, this.renderPlayArrow()))))); | ||
} | ||
@@ -107,0 +107,0 @@ renderImage() { |
@@ -77,7 +77,7 @@ import { Component, Event, h, Method, Prop, State, Watch } from '@stencil/core'; | ||
this.renderStateButton()), | ||
h("section", { class: 'accordion__content', ref: (el) => this.contentElement = el }, | ||
h("section", { class: 'accordion__content', ref: (el) => this.contentElement = el, "aria-hidden": this.open ? 'true' : 'false' }, | ||
h("slot", null)))); | ||
} | ||
renderStateButton() { | ||
return (h("button", { class: ['accordion__button', this.open ? 'active' : ''].join(' ') }, | ||
return (h("button", { class: ['accordion__button', this.open ? 'active' : ''].join(' '), name: `${this.open ? 'Verberg' : 'Toon'} de inhoud van ${this.accordionTitle}` }, | ||
h("span", null), | ||
@@ -84,0 +84,0 @@ h("span", null))); |
@@ -33,6 +33,6 @@ import { Component, Element, h, Prop } from '@stencil/core'; | ||
this.renderImage(), | ||
h("a", { class: 'case-card__link', href: this.href }), | ||
h("a", { class: 'case-card__link', href: this.href, title: `Bekijk ${this.caseTitle}` }), | ||
h("footer", { class: 'case-card__footer' }, | ||
h("h3", { class: 'is-h6' }, this.caseTitle), | ||
h("button", { class: 'case-card__button' }, this.renderPlayArrow()))))); | ||
h("button", { class: 'case-card__button', name: `Bekijk ${this.caseTitle}` }, this.renderPlayArrow()))))); | ||
} | ||
@@ -39,0 +39,0 @@ renderImage() { |
@@ -1,1 +0,1 @@ | ||
var __awaiter=this&&this.__awaiter||function(t,n,i,e){function o(t){return t instanceof i?t:new i((function(n){n(t)}))}return new(i||(i=Promise))((function(i,r){function a(t){try{s(e.next(t))}catch(t){r(t)}}function c(t){try{s(e["throw"](t))}catch(t){r(t)}}function s(t){t.done?i(t.value):o(t.value).then(a,c)}s((e=e.apply(t,n||[])).next())}))};var __generator=this&&this.__generator||function(t,n){var i={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},e,o,r,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(t){return function(n){return s([t,n])}}function s(a){if(e)throw new TypeError("Generator is already executing.");while(i)try{if(e=1,o&&(r=a[0]&2?o["return"]:a[0]?o["throw"]||((r=o["return"])&&r.call(o),0):o.next)&&!(r=r.call(o,a[1])).done)return r;if(o=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:i.label++;return{value:a[1],done:false};case 5:i.label++;o=a[1];a=[0];continue;case 7:a=i.ops.pop();i.trys.pop();continue;default:if(!(r=i.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){i.label=a[1];break}if(a[0]===6&&i.label<r[1]){i.label=r[1];r=a;break}if(r&&i.label<r[2]){i.label=r[2];i.ops.push(a);break}if(r[2])i.ops.pop();i.trys.pop();continue}a=n.call(t,i)}catch(t){a=[6,t];o=0}finally{e=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h}from"./index-e41e20bc.js";import{a as anime}from"./anime.es-d8ec8d88.js";var wrAccordionCss=":host{display:block}*{-webkit-box-sizing:border-box;box-sizing:border-box}.accordion{position:relative;overflow:hidden}.accordion__background{position:absolute;top:0px;right:0px;bottom:0px;left:0px;-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 1, 1);transition-timing-function:cubic-bezier(0.4, 0, 1, 1);margin:0px;opacity:0;display:none}@media (min-width: 1024px){.accordion__background{display:block}}.accordion__background img{position:absolute;top:0px;right:0px;bottom:0px;left:0px;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.accordion__background.active{opacity:0.6 !important}.accordion__content{-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-delay:75ms;transition-delay:75ms;-webkit-transition-duration:300ms;transition-duration:300ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}@media (min-width: 1024px){.accordion__content{margin-left:auto;margin-right:auto}.accordion__content{width:83.333333%}}.accordion__content{--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity));padding-top:1rem;padding-bottom:1rem;padding-left:0px;padding-right:0px;font-size:1.0625rem;line-height:1.75rem;position:relative;opacity:0}.accordion__header{display:-ms-flexbox;display:flex;padding-top:1.25rem;padding-bottom:1.25rem;padding-left:0px;padding-right:0px}@media (min-width: 768px){.accordion__header{padding-top:1.5rem;padding-bottom:1.5rem}}.accordion__header{border-bottom-width:1px;cursor:pointer;position:relative;z-index:10;border-width:0px;border-bottom-width:1px;border-style:solid;border-color:rgba(255, 255, 255, 0.25)}@media (min-width: 1024px){.accordion__header{margin-left:auto;margin-right:auto}.accordion__header{width:83.333333%}}.accordion__title{font-size:2rem;line-height:2.75rem;--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity));margin-top:0px;margin-bottom:0px}.accordion__button{border-width:0px;background-color:transparent;height:1.25rem;width:1.25rem}@media (min-width: 768px){.accordion__button{height:1.5rem}.accordion__button{width:1.5rem}}.accordion__button{margin:auto;margin-right:0px;cursor:pointer;overflow:hidden;position:relative;z-index:1}.accordion__button span{-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:225ms;transition-duration:225ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);position:absolute;left:0px;right:0px;--tw-bg-opacity:1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity));display:block;height:2px}.accordion__button span:nth-of-type(2){-webkit-transform:rotate(90deg);transform:rotate(90deg)}.accordion__button.active span:nth-of-type(2){-webkit-transform:rotate(0);transform:rotate(0)}.accordion:hover .accordion__background{opacity:0.3}.accordion:hover .accordion__button:not(.active) span:nth-of-type(2){-webkit-animation:225ms button-nudge;animation:225ms button-nudge}@-webkit-keyframes button-nudge{0%,50%,100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}25%{-webkit-transform:rotate(85deg);transform:rotate(85deg)}75%{-webkit-transform:rotate(95deg);transform:rotate(95deg)}}@keyframes button-nudge{0%,50%,100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}25%{-webkit-transform:rotate(85deg);transform:rotate(85deg)}75%{-webkit-transform:rotate(95deg);transform:rotate(95deg)}}";var WrAccordion=function(){function t(t){registerInstance(this,t);this.accordionOpened=createEvent(this,"accordionOpened",7);this.open=true;this.sizes={}}t.prototype.componentDidLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;var n=this;return __generator(this,(function(i){switch(i.label){case 0:t=new ResizeObserver((function(){return n.calculateSizes()}));return[4,this.calculateSizes()];case 1:i.sent();this.open=false;this.checkBackgroundImage();t.observe(this.accordion);return[2]}}))}))};t.prototype.watchOpen=function(t){return __awaiter(this,void 0,void 0,(function(){var n,i;return __generator(this,(function(e){if(t)this.accordionOpened.emit("starting");i=anime.timeline({easing:t?"easeInCubic":"easeOutCubic",duration:300});if(t){n=this.sizes.openedSize}else{n=this.sizes.closedSize}if(t)this.accordionOpened.emit("animating");i.add({targets:this.accordion,height:n});if(this.background){i.add({targets:this.backgroundElement,height:n},0);i.add({targets:this.backgroundElement,scale:t?[1,1.25]:[1.25,1]},"+=150")}i.add({targets:this.contentElement,translateY:t?["-2rem",0]:[0,"-2rem"],opacity:t?[0,0,100]:[100,0]},this.background?"-=300":0);if(t)this.accordionOpened.emit("processed");return[2]}))}))};t.prototype.closeMe=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.open=false;return[2]}))}))};t.prototype.openMe=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.open=true;return[2]}))}))};t.prototype.render=function(){var t=this;return h("article",{ref:function(n){return t.accordion=n},class:["accordion",this.open?"active":""].join(" ")},this.renderImage(),h("header",{class:"accordion__header",onClick:function(){return t.open=!t.open}},h("h3",{class:"accordion__title"},this.accordionTitle),this.renderStateButton()),h("section",{class:"accordion__content",ref:function(n){return t.contentElement=n}},h("slot",null)))};t.prototype.renderStateButton=function(){return h("button",{class:["accordion__button",this.open?"active":""].join(" ")},h("span",null),h("span",null))};t.prototype.renderImage=function(){var t=this;if(!this.background){return}return h("figure",{class:["accordion__background",this.open?"active":""].join(" "),ref:function(n){return t.backgroundElement=n}},h("img",{src:this.background,alt:""}))};t.prototype.calculateSizes=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(n){t=this.accordion.querySelector(".accordion__header").clientHeight+1;this.sizes.openedSize=t+this.contentElement.clientHeight;this.sizes.closedSize=t;return[2]}))}))};t.prototype.checkBackgroundImage=function(){var t=this;if(this.backgroundElement){this.backgroundElement.querySelector("img").addEventListener("error",(function(){t.backgroundElement.parentElement.removeChild(t.backgroundElement);t.background=null}))}};Object.defineProperty(t,"watchers",{get:function(){return{open:["watchOpen"]}},enumerable:false,configurable:true});return t}();WrAccordion.style=wrAccordionCss;export{WrAccordion as wr_accordion}; | ||
var __awaiter=this&&this.__awaiter||function(t,n,i,e){function o(t){return t instanceof i?t:new i((function(n){n(t)}))}return new(i||(i=Promise))((function(i,r){function a(t){try{s(e.next(t))}catch(t){r(t)}}function c(t){try{s(e["throw"](t))}catch(t){r(t)}}function s(t){t.done?i(t.value):o(t.value).then(a,c)}s((e=e.apply(t,n||[])).next())}))};var __generator=this&&this.__generator||function(t,n){var i={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},e,o,r,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(t){return function(n){return s([t,n])}}function s(a){if(e)throw new TypeError("Generator is already executing.");while(i)try{if(e=1,o&&(r=a[0]&2?o["return"]:a[0]?o["throw"]||((r=o["return"])&&r.call(o),0):o.next)&&!(r=r.call(o,a[1])).done)return r;if(o=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:i.label++;return{value:a[1],done:false};case 5:i.label++;o=a[1];a=[0];continue;case 7:a=i.ops.pop();i.trys.pop();continue;default:if(!(r=i.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){i.label=a[1];break}if(a[0]===6&&i.label<r[1]){i.label=r[1];r=a;break}if(r&&i.label<r[2]){i.label=r[2];i.ops.push(a);break}if(r[2])i.ops.pop();i.trys.pop();continue}a=n.call(t,i)}catch(t){a=[6,t];o=0}finally{e=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h}from"./index-e41e20bc.js";import{a as anime}from"./anime.es-d8ec8d88.js";var wrAccordionCss=":host{display:block}*{-webkit-box-sizing:border-box;box-sizing:border-box}.accordion{position:relative;overflow:hidden}.accordion__background{position:absolute;top:0px;right:0px;bottom:0px;left:0px;-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 1, 1);transition-timing-function:cubic-bezier(0.4, 0, 1, 1);margin:0px;opacity:0;display:none}@media (min-width: 1024px){.accordion__background{display:block}}.accordion__background img{position:absolute;top:0px;right:0px;bottom:0px;left:0px;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.accordion__background.active{opacity:0.6 !important}.accordion__content{-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-delay:75ms;transition-delay:75ms;-webkit-transition-duration:300ms;transition-duration:300ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}@media (min-width: 1024px){.accordion__content{margin-left:auto;margin-right:auto}.accordion__content{width:83.333333%}}.accordion__content{--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity));padding-top:1rem;padding-bottom:1rem;padding-left:0px;padding-right:0px;font-size:1.0625rem;line-height:1.75rem;position:relative;opacity:0}.accordion__header{display:-ms-flexbox;display:flex;padding-top:1.25rem;padding-bottom:1.25rem;padding-left:0px;padding-right:0px}@media (min-width: 768px){.accordion__header{padding-top:1.5rem;padding-bottom:1.5rem}}.accordion__header{border-bottom-width:1px;cursor:pointer;position:relative;z-index:10;border-width:0px;border-bottom-width:1px;border-style:solid;border-color:rgba(255, 255, 255, 0.25)}@media (min-width: 1024px){.accordion__header{margin-left:auto;margin-right:auto}.accordion__header{width:83.333333%}}.accordion__title{font-size:2rem;line-height:2.75rem;--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity));margin-top:0px;margin-bottom:0px}.accordion__button{border-width:0px;background-color:transparent;height:1.25rem;width:1.25rem}@media (min-width: 768px){.accordion__button{height:1.5rem}.accordion__button{width:1.5rem}}.accordion__button{margin:auto;margin-right:0px;cursor:pointer;overflow:hidden;position:relative;z-index:1}.accordion__button span{-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:225ms;transition-duration:225ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);position:absolute;left:0px;right:0px;--tw-bg-opacity:1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity));display:block;height:2px}.accordion__button span:nth-of-type(2){-webkit-transform:rotate(90deg);transform:rotate(90deg)}.accordion__button.active span:nth-of-type(2){-webkit-transform:rotate(0);transform:rotate(0)}.accordion:hover .accordion__background{opacity:0.3}.accordion:hover .accordion__button:not(.active) span:nth-of-type(2){-webkit-animation:225ms button-nudge;animation:225ms button-nudge}@-webkit-keyframes button-nudge{0%,50%,100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}25%{-webkit-transform:rotate(85deg);transform:rotate(85deg)}75%{-webkit-transform:rotate(95deg);transform:rotate(95deg)}}@keyframes button-nudge{0%,50%,100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}25%{-webkit-transform:rotate(85deg);transform:rotate(85deg)}75%{-webkit-transform:rotate(95deg);transform:rotate(95deg)}}";var WrAccordion=function(){function t(t){registerInstance(this,t);this.accordionOpened=createEvent(this,"accordionOpened",7);this.open=true;this.sizes={}}t.prototype.componentDidLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;var n=this;return __generator(this,(function(i){switch(i.label){case 0:t=new ResizeObserver((function(){return n.calculateSizes()}));return[4,this.calculateSizes()];case 1:i.sent();this.open=false;this.checkBackgroundImage();t.observe(this.accordion);return[2]}}))}))};t.prototype.watchOpen=function(t){return __awaiter(this,void 0,void 0,(function(){var n,i;return __generator(this,(function(e){if(t)this.accordionOpened.emit("starting");i=anime.timeline({easing:t?"easeInCubic":"easeOutCubic",duration:300});if(t){n=this.sizes.openedSize}else{n=this.sizes.closedSize}if(t)this.accordionOpened.emit("animating");i.add({targets:this.accordion,height:n});if(this.background){i.add({targets:this.backgroundElement,height:n},0);i.add({targets:this.backgroundElement,scale:t?[1,1.25]:[1.25,1]},"+=150")}i.add({targets:this.contentElement,translateY:t?["-2rem",0]:[0,"-2rem"],opacity:t?[0,0,100]:[100,0]},this.background?"-=300":0);if(t)this.accordionOpened.emit("processed");return[2]}))}))};t.prototype.closeMe=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.open=false;return[2]}))}))};t.prototype.openMe=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.open=true;return[2]}))}))};t.prototype.render=function(){var t=this;return h("article",{ref:function(n){return t.accordion=n},class:["accordion",this.open?"active":""].join(" ")},this.renderImage(),h("header",{class:"accordion__header",onClick:function(){return t.open=!t.open}},h("h3",{class:"accordion__title"},this.accordionTitle),this.renderStateButton()),h("section",{class:"accordion__content",ref:function(n){return t.contentElement=n},"aria-hidden":this.open?"true":"false"},h("slot",null)))};t.prototype.renderStateButton=function(){return h("button",{class:["accordion__button",this.open?"active":""].join(" "),name:(this.open?"Verberg":"Toon")+" de inhoud van "+this.accordionTitle},h("span",null),h("span",null))};t.prototype.renderImage=function(){var t=this;if(!this.background){return}return h("figure",{class:["accordion__background",this.open?"active":""].join(" "),ref:function(n){return t.backgroundElement=n}},h("img",{src:this.background,alt:""}))};t.prototype.calculateSizes=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(n){t=this.accordion.querySelector(".accordion__header").clientHeight+1;this.sizes.openedSize=t+this.contentElement.clientHeight;this.sizes.closedSize=t;return[2]}))}))};t.prototype.checkBackgroundImage=function(){var t=this;if(this.backgroundElement){this.backgroundElement.querySelector("img").addEventListener("error",(function(){t.backgroundElement.parentElement.removeChild(t.backgroundElement);t.background=null}))}};Object.defineProperty(t,"watchers",{get:function(){return{open:["watchOpen"]}},enumerable:false,configurable:true});return t}();WrAccordion.style=wrAccordionCss;export{WrAccordion as wr_accordion}; |
@@ -1,1 +0,1 @@ | ||
import{r as registerInstance,h,g as getElement}from"./index-e41e20bc.js";import{t as throttle}from"./utils-3b0bf2b4.js";var Point=function(){function t(t,i){this.x=t;this.y=i}return t}();var Vector=function(){function t(t,i){this.x=t;this.y=i}Object.defineProperty(t.prototype,"normalized",{get:function(){return new Point(this.x/Math.abs(this.x),this.y/Math.abs(this.y))},enumerable:false,configurable:true});t.prototype.interval=function(t){return new Point(this.x/t.x,this.y/t.y)};return t}();var Plane=function(){function t(t,i){this.width=t;this.height=i;this.width=t;this.height=i;this.center=new Point(t/2,i/2);this.area=this.width*this.height}t.prototype.getPointVectorFromCenter=function(t){return new Vector(t.x-this.center.x,this.center.y-t.y)};t.prototype._isPointInside=function(t){return t.x<this.width&&t.x>0&&t.y>0&&t.y<this.height};Object.defineProperty(t.prototype,"outerEdge",{get:function(){return new Point(this.width,this.height)},enumerable:false,configurable:true});return t}();var wrCaseHighlightCss=".perspective-wrapper{-webkit-perspective:1200px;perspective:1200px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.case-card{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);border-radius:.25rem;position:relative;width:100%;display:-ms-flexbox;display:flex;overflow:hidden;--tw-bg-opacity:1;background-color:rgba(245, 149, 6, var(--tw-bg-opacity));height:15rem;--rotate-x:0;--rotate-y:0;will-change:transform}.case-card__background{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);display:block;position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-radius:.25rem;--tw-scale-x:1.25;--tw-scale-y:1.25;-webkit-transform:var(--tw-transform);transform:var(--tw-transform);transform:var(--tw-transform);-o-object-fit:cover;object-fit:cover;height:100%;width:100%;background-position:var(--preferred-x) var(--preferred-y)}.case-card__footer{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);margin-top:auto;padding-left:1rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;position:relative;z-index:1;pointer-events:none}.case-card__link{position:absolute;top:0px;right:0px;bottom:0px;left:0px;background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(53, 53, 53, 0.0001)), color-stop(99.29%, rgba(0, 0, 0, 0.8)));background-image:linear-gradient(180deg, rgba(53, 53, 53, 0.0001) 0%, rgba(0, 0, 0, 0.8) 99.29%)}.case-card h3{--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity));margin-top:0px;margin-bottom:0px}.case-card__button{-webkit-transition-property:background-color, border-color, color, fill, stroke;transition-property:background-color, border-color, color, fill, stroke;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:225ms;transition-duration:225ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 1, 1);transition-timing-function:cubic-bezier(0.4, 0, 1, 1);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-left:auto;height:3rem;width:3rem;padding:0px;--tw-bg-opacity:1;background-color:rgba(26, 26, 26, var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity));border-top-left-radius:.25rem;border-bottom-right-radius:.25rem;border-width:0px;margin-left:auto}.case-card:hover{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:100ms;transition-duration:100ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 1, 1);transition-timing-function:cubic-bezier(0.4, 0, 1, 1);--tw-shadow:0 12px 25px rgb(0, 0, 0, 0.05);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:translate3d(0, 0, 2rem) rotateX(var(--rotate-y)) rotateY(var(--rotate-x));transform:translate3d(0, 0, 2rem) rotateX(var(--rotate-y)) rotateY(var(--rotate-x))}.case-card:hover .case-card__button{-webkit-transition-property:background-color, border-color, color, fill, stroke;transition-property:background-color, border-color, color, fill, stroke;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:100ms;transition-duration:100ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 1, 1);transition-timing-function:cubic-bezier(0.4, 0, 1, 1);--tw-bg-opacity:1;background-color:rgba(245, 149, 6, var(--tw-bg-opacity))}.case-card:hover .case-card__background{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:225ms;transition-duration:225ms;-webkit-transition-timing-function:linear;transition-timing-function:linear}.case-card:hover h3{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:225ms;transition-duration:225ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 1, 1);transition-timing-function:cubic-bezier(0.4, 0, 1, 1);-webkit-transform:translate3d(calc(var(--translate-x) * -1.25), calc(var(--translate-y) * -1.25), 2rem);transform:translate3d(calc(var(--translate-x) * -1.25), calc(var(--translate-y) * -1.25), 2rem);-webkit-transform-origin:left bottom;transform-origin:left bottom}";var WrCaseHighlight=function(){function t(t){registerInstance(this,t);this.backgroundX="50%";this.backgroundY="50%"}t.prototype.componentDidLoad=function(){this.card.addEventListener("mousemove",throttle(this.handleMouseOver.bind(this),16));this.card.addEventListener("mouseout",this.handleMouseLeave.bind(this))};t.prototype.handleMouseLeave=function(){var t=this.card;t.style.setProperty("--rotate-x","0deg");t.style.setProperty("--rotate-y","0deg")};t.prototype.handleMouseOver=function(t){var i=this.card;var r=new Plane(i.clientWidth,i.clientHeight);var n=new Point(t.offsetX,t.offsetY);var e=r.getPointVectorFromCenter(n);i.style.setProperty("--rotate-x",e.interval(r.outerEdge).x*12+"deg");i.style.setProperty("--translate-x",e.interval(r.outerEdge).x*12+"%");i.style.setProperty("--rotate-y",e.interval(r.outerEdge).y*25+"deg");i.style.setProperty("--translate-y",e.interval(r.outerEdge).y*25+"%")};t.prototype.render=function(){var t=this;return h("div",{class:"perspective-wrapper"},h("article",{class:"case-card",ref:function(i){return t.card=i}},this.renderImage(),h("a",{class:"case-card__link",href:this.href}),h("footer",{class:"case-card__footer"},h("h3",{class:"is-h6"},this.caseTitle),h("button",{class:"case-card__button"},this.renderPlayArrow()))))};t.prototype.renderImage=function(){return h("img",{class:"case-card__background",loading:"lazy",src:this.background,alt:""})};t.prototype.renderPlayArrow=function(){return h("svg",{width:"10",height:"12",viewBox:"0 0 10 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"play-arrow"},h("path",{d:"M0 1.49946C0.00724877 1.22427 0.0894759 0.955945 0.238208 0.722137C0.38694 0.48833 0.596797 0.297496 0.846152 0.169301C1.08606 0.0475163 1.35458 -0.0103541 1.62467 0.00151974C1.89476 0.0133936 2.15687 0.0945922 2.38461 0.236936L9.30768 4.74594C9.52148 4.88349 9.69677 5.07099 9.81766 5.29145C9.93855 5.51191 10.0012 5.75836 9.99998 6.00846C9.99911 6.25338 9.93697 6.49439 9.819 6.7105C9.70102 6.92661 9.53077 7.11128 9.32306 7.24843L2.32307 11.7574C2.0971 11.9047 1.83392 11.9882 1.5625 11.9988C1.29107 12.0095 1.02191 11.9467 0.784614 11.8176C0.548105 11.6877 0.350957 11.499 0.213162 11.2707C0.0753673 11.0424 0.00182731 10.7825 0 10.5175L0 1.49946Z",fill:"currentColor"}))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();WrCaseHighlight.style=wrCaseHighlightCss;export{WrCaseHighlight as wr_case_highlight}; | ||
import{r as registerInstance,h,g as getElement}from"./index-e41e20bc.js";import{t as throttle}from"./utils-3b0bf2b4.js";var Point=function(){function t(t,i){this.x=t;this.y=i}return t}();var Vector=function(){function t(t,i){this.x=t;this.y=i}Object.defineProperty(t.prototype,"normalized",{get:function(){return new Point(this.x/Math.abs(this.x),this.y/Math.abs(this.y))},enumerable:false,configurable:true});t.prototype.interval=function(t){return new Point(this.x/t.x,this.y/t.y)};return t}();var Plane=function(){function t(t,i){this.width=t;this.height=i;this.width=t;this.height=i;this.center=new Point(t/2,i/2);this.area=this.width*this.height}t.prototype.getPointVectorFromCenter=function(t){return new Vector(t.x-this.center.x,this.center.y-t.y)};t.prototype._isPointInside=function(t){return t.x<this.width&&t.x>0&&t.y>0&&t.y<this.height};Object.defineProperty(t.prototype,"outerEdge",{get:function(){return new Point(this.width,this.height)},enumerable:false,configurable:true});return t}();var wrCaseHighlightCss=".perspective-wrapper{-webkit-perspective:1200px;perspective:1200px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.case-card{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);border-radius:.25rem;position:relative;width:100%;display:-ms-flexbox;display:flex;overflow:hidden;--tw-bg-opacity:1;background-color:rgba(245, 149, 6, var(--tw-bg-opacity));height:15rem;--rotate-x:0;--rotate-y:0;will-change:transform}.case-card__background{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);display:block;position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-radius:.25rem;--tw-scale-x:1.25;--tw-scale-y:1.25;-webkit-transform:var(--tw-transform);transform:var(--tw-transform);transform:var(--tw-transform);-o-object-fit:cover;object-fit:cover;height:100%;width:100%;background-position:var(--preferred-x) var(--preferred-y)}.case-card__footer{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);margin-top:auto;padding-left:1rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;position:relative;z-index:1;pointer-events:none}.case-card__link{position:absolute;top:0px;right:0px;bottom:0px;left:0px;background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(53, 53, 53, 0.0001)), color-stop(99.29%, rgba(0, 0, 0, 0.8)));background-image:linear-gradient(180deg, rgba(53, 53, 53, 0.0001) 0%, rgba(0, 0, 0, 0.8) 99.29%)}.case-card h3{--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity));margin-top:0px;margin-bottom:0px}.case-card__button{-webkit-transition-property:background-color, border-color, color, fill, stroke;transition-property:background-color, border-color, color, fill, stroke;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:225ms;transition-duration:225ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 1, 1);transition-timing-function:cubic-bezier(0.4, 0, 1, 1);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-left:auto;height:3rem;width:3rem;padding:0px;--tw-bg-opacity:1;background-color:rgba(26, 26, 26, var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity));border-top-left-radius:.25rem;border-bottom-right-radius:.25rem;border-width:0px;margin-left:auto}.case-card:hover{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:100ms;transition-duration:100ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 1, 1);transition-timing-function:cubic-bezier(0.4, 0, 1, 1);--tw-shadow:0 12px 25px rgb(0, 0, 0, 0.05);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:translate3d(0, 0, 2rem) rotateX(var(--rotate-y)) rotateY(var(--rotate-x));transform:translate3d(0, 0, 2rem) rotateX(var(--rotate-y)) rotateY(var(--rotate-x))}.case-card:hover .case-card__button{-webkit-transition-property:background-color, border-color, color, fill, stroke;transition-property:background-color, border-color, color, fill, stroke;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:100ms;transition-duration:100ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 1, 1);transition-timing-function:cubic-bezier(0.4, 0, 1, 1);--tw-bg-opacity:1;background-color:rgba(245, 149, 6, var(--tw-bg-opacity))}.case-card:hover .case-card__background{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:225ms;transition-duration:225ms;-webkit-transition-timing-function:linear;transition-timing-function:linear}.case-card:hover h3{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-duration:225ms;transition-duration:225ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 1, 1);transition-timing-function:cubic-bezier(0.4, 0, 1, 1);-webkit-transform:translate3d(calc(var(--translate-x) * -1.25), calc(var(--translate-y) * -1.25), 2rem);transform:translate3d(calc(var(--translate-x) * -1.25), calc(var(--translate-y) * -1.25), 2rem);-webkit-transform-origin:left bottom;transform-origin:left bottom}";var WrCaseHighlight=function(){function t(t){registerInstance(this,t);this.backgroundX="50%";this.backgroundY="50%"}t.prototype.componentDidLoad=function(){this.card.addEventListener("mousemove",throttle(this.handleMouseOver.bind(this),16));this.card.addEventListener("mouseout",this.handleMouseLeave.bind(this))};t.prototype.handleMouseLeave=function(){var t=this.card;t.style.setProperty("--rotate-x","0deg");t.style.setProperty("--rotate-y","0deg")};t.prototype.handleMouseOver=function(t){var i=this.card;var r=new Plane(i.clientWidth,i.clientHeight);var n=new Point(t.offsetX,t.offsetY);var e=r.getPointVectorFromCenter(n);i.style.setProperty("--rotate-x",e.interval(r.outerEdge).x*12+"deg");i.style.setProperty("--translate-x",e.interval(r.outerEdge).x*12+"%");i.style.setProperty("--rotate-y",e.interval(r.outerEdge).y*25+"deg");i.style.setProperty("--translate-y",e.interval(r.outerEdge).y*25+"%")};t.prototype.render=function(){var t=this;return h("div",{class:"perspective-wrapper"},h("article",{class:"case-card",ref:function(i){return t.card=i}},this.renderImage(),h("a",{class:"case-card__link",href:this.href,title:"Bekijk "+this.caseTitle}),h("footer",{class:"case-card__footer"},h("h3",{class:"is-h6"},this.caseTitle),h("button",{class:"case-card__button",name:"Bekijk "+this.caseTitle},this.renderPlayArrow()))))};t.prototype.renderImage=function(){return h("img",{class:"case-card__background",loading:"lazy",src:this.background,alt:""})};t.prototype.renderPlayArrow=function(){return h("svg",{width:"10",height:"12",viewBox:"0 0 10 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"play-arrow"},h("path",{d:"M0 1.49946C0.00724877 1.22427 0.0894759 0.955945 0.238208 0.722137C0.38694 0.48833 0.596797 0.297496 0.846152 0.169301C1.08606 0.0475163 1.35458 -0.0103541 1.62467 0.00151974C1.89476 0.0133936 2.15687 0.0945922 2.38461 0.236936L9.30768 4.74594C9.52148 4.88349 9.69677 5.07099 9.81766 5.29145C9.93855 5.51191 10.0012 5.75836 9.99998 6.00846C9.99911 6.25338 9.93697 6.49439 9.819 6.7105C9.70102 6.92661 9.53077 7.11128 9.32306 7.24843L2.32307 11.7574C2.0971 11.9047 1.83392 11.9882 1.5625 11.9988C1.29107 12.0095 1.02191 11.9467 0.784614 11.8176C0.548105 11.6877 0.350957 11.499 0.213162 11.2707C0.0753673 11.0424 0.00182731 10.7825 0 10.5175L0 1.49946Z",fill:"currentColor"}))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();WrCaseHighlight.style=wrCaseHighlightCss;export{WrCaseHighlight as wr_case_highlight}; |
@@ -77,6 +77,6 @@ import { r as registerInstance, c as createEvent, h } from './index-e41e20bc.js'; | ||
render() { | ||
return (h("article", { ref: (el) => this.accordion = el, class: ['accordion', this.open ? 'active' : ''].join(' ') }, this.renderImage(), h("header", { class: 'accordion__header', onClick: () => this.open = !this.open }, h("h3", { class: 'accordion__title' }, this.accordionTitle), this.renderStateButton()), h("section", { class: 'accordion__content', ref: (el) => this.contentElement = el }, h("slot", null)))); | ||
return (h("article", { ref: (el) => this.accordion = el, class: ['accordion', this.open ? 'active' : ''].join(' ') }, this.renderImage(), h("header", { class: 'accordion__header', onClick: () => this.open = !this.open }, h("h3", { class: 'accordion__title' }, this.accordionTitle), this.renderStateButton()), h("section", { class: 'accordion__content', ref: (el) => this.contentElement = el, "aria-hidden": this.open ? 'true' : 'false' }, h("slot", null)))); | ||
} | ||
renderStateButton() { | ||
return (h("button", { class: ['accordion__button', this.open ? 'active' : ''].join(' ') }, h("span", null), h("span", null))); | ||
return (h("button", { class: ['accordion__button', this.open ? 'active' : ''].join(' '), name: `${this.open ? 'Verberg' : 'Toon'} de inhoud van ${this.accordionTitle}` }, h("span", null), h("span", null))); | ||
} | ||
@@ -83,0 +83,0 @@ /** |
@@ -100,3 +100,3 @@ import { r as registerInstance, h, g as getElement } from './index-e41e20bc.js'; | ||
render() { | ||
return (h("div", { class: 'perspective-wrapper' }, h("article", { class: 'case-card', ref: (el) => this.card = el }, this.renderImage(), h("a", { class: 'case-card__link', href: this.href }), h("footer", { class: 'case-card__footer' }, h("h3", { class: 'is-h6' }, this.caseTitle), h("button", { class: 'case-card__button' }, this.renderPlayArrow()))))); | ||
return (h("div", { class: 'perspective-wrapper' }, h("article", { class: 'case-card', ref: (el) => this.card = el }, this.renderImage(), h("a", { class: 'case-card__link', href: this.href, title: `Bekijk ${this.caseTitle}` }), h("footer", { class: 'case-card__footer' }, h("h3", { class: 'is-h6' }, this.caseTitle), h("button", { class: 'case-card__button', name: `Bekijk ${this.caseTitle}` }, this.renderPlayArrow()))))); | ||
} | ||
@@ -103,0 +103,0 @@ renderImage() { |
@@ -1,1 +0,1 @@ | ||
System.register(["./p-6e092c3e.system.js"],(function(e,o){"use strict";var t,r;return{setters:[function(e){t=e.p;r=e.b}],execute:function(){var e=function(){var e=o.meta.url;var r={};if(e!==""){r.resourcesUrl=new URL(".",e).href}return t(r)};e().then((function(e){return r([["p-ae03e6bb.system",[[1,"wr-block-meta",{items:[1],innerData:[32]}],[1,"wr-highlight",{itemTitle:[1,"item-title"],subTitle:[1,"sub-title"]}],[1,"wr-highlight-grid",null,[[0,"hover","onHover"]]],[0,"wr-logo-icon"],[1,"wr-scroll-animation",{once:[4],noTranslate:[4,"no-translate"],noFade:[4,"no-fade"],direction:[1],duration:[2]}]]],["p-1c90b39f.system",[[1,"wr-accordion",{accordionTitle:[1,"accordion-title"],background:[1025],open:[32],closeMe:[64],openMe:[64],calculateSizes:[64]}]]],["p-8fcb6475.system",[[1,"wr-accordion-group",{isCollapse:[4,"is-collapse"],closeChildren:[64]},[[0,"accordionOpened","accordionOpened"]]]]],["p-c35c1b26.system",[[1,"wr-big-quote",{isDark:[4,"is-dark"],quoteColor:[1,"quote-color"],authorName:[1,"author-name"],authorFunction:[1,"author-function"],authorImage:[1,"author-image"]}]]],["p-1755ebba.system",[[1,"wr-case",{caseTitle:[1,"case-title"],caseSubtitle:[1,"case-subtitle"],backgroundColor:[1,"background-color"],backgroundOpacity:[2,"background-opacity"],backgroundImage:[1,"background-image"],topLayer:[1025,"top-layer"],bottomLayer:[1025,"bottom-layer"],href:[1]}]]],["p-6bd4b539.system",[[1,"wr-case-highlight",{background:[1],backgroundX:[1,"background-x"],backgroundY:[1,"background-y"],caseTitle:[1,"case-title"],href:[1]}]]],["p-761a1d39.system",[[1,"wr-footer"]]],["p-9a31c56f.system",[[1,"wr-logo"]]],["p-4474e930.system",[[1,"wr-menu-item",{size:[1],badge:[2],href:[1],isLarge:[64]}]]],["p-1dcc5dda.system",[[1,"wr-navigation",{isOpen:[32]},[[0,"open","openNavigationListener"],[0,"close","closeNavigationListener"]]]]]],e)}))}}})); | ||
System.register(["./p-6e092c3e.system.js"],(function(e,o){"use strict";var t,r;return{setters:[function(e){t=e.p;r=e.b}],execute:function(){var e=function(){var e=o.meta.url;var r={};if(e!==""){r.resourcesUrl=new URL(".",e).href}return t(r)};e().then((function(e){return r([["p-ae03e6bb.system",[[1,"wr-block-meta",{items:[1],innerData:[32]}],[1,"wr-highlight",{itemTitle:[1,"item-title"],subTitle:[1,"sub-title"]}],[1,"wr-highlight-grid",null,[[0,"hover","onHover"]]],[0,"wr-logo-icon"],[1,"wr-scroll-animation",{once:[4],noTranslate:[4,"no-translate"],noFade:[4,"no-fade"],direction:[1],duration:[2]}]]],["p-856f288b.system",[[1,"wr-accordion",{accordionTitle:[1,"accordion-title"],background:[1025],open:[32],closeMe:[64],openMe:[64],calculateSizes:[64]}]]],["p-8fcb6475.system",[[1,"wr-accordion-group",{isCollapse:[4,"is-collapse"],closeChildren:[64]},[[0,"accordionOpened","accordionOpened"]]]]],["p-c35c1b26.system",[[1,"wr-big-quote",{isDark:[4,"is-dark"],quoteColor:[1,"quote-color"],authorName:[1,"author-name"],authorFunction:[1,"author-function"],authorImage:[1,"author-image"]}]]],["p-1755ebba.system",[[1,"wr-case",{caseTitle:[1,"case-title"],caseSubtitle:[1,"case-subtitle"],backgroundColor:[1,"background-color"],backgroundOpacity:[2,"background-opacity"],backgroundImage:[1,"background-image"],topLayer:[1025,"top-layer"],bottomLayer:[1025,"bottom-layer"],href:[1]}]]],["p-628fe1c7.system",[[1,"wr-case-highlight",{background:[1],backgroundX:[1,"background-x"],backgroundY:[1,"background-y"],caseTitle:[1,"case-title"],href:[1]}]]],["p-761a1d39.system",[[1,"wr-footer"]]],["p-9a31c56f.system",[[1,"wr-logo"]]],["p-4474e930.system",[[1,"wr-menu-item",{size:[1],badge:[2],href:[1],isLarge:[64]}]]],["p-1dcc5dda.system",[[1,"wr-navigation",{isOpen:[32]},[[0,"open","openNavigationListener"],[0,"close","closeNavigationListener"]]]]]],e)}))}}})); |
@@ -1,1 +0,1 @@ | ||
import{p as o,b as e}from"./p-abaf52ff.js";(()=>{const e=import.meta.url,a={};return""!==e&&(a.resourcesUrl=new URL(".",e).href),o(a)})().then((o=>e([["p-4b40fb81",[[1,"wr-block-meta",{items:[1],innerData:[32]}],[1,"wr-highlight",{itemTitle:[1,"item-title"],subTitle:[1,"sub-title"]}],[1,"wr-highlight-grid",null,[[0,"hover","onHover"]]],[0,"wr-logo-icon"],[1,"wr-scroll-animation",{once:[4],noTranslate:[4,"no-translate"],noFade:[4,"no-fade"],direction:[1],duration:[2]}]]],["p-33e36473",[[1,"wr-accordion",{accordionTitle:[1,"accordion-title"],background:[1025],open:[32],closeMe:[64],openMe:[64],calculateSizes:[64]}]]],["p-50aee4b6",[[1,"wr-accordion-group",{isCollapse:[4,"is-collapse"],closeChildren:[64]},[[0,"accordionOpened","accordionOpened"]]]]],["p-8fb1a509",[[1,"wr-big-quote",{isDark:[4,"is-dark"],quoteColor:[1,"quote-color"],authorName:[1,"author-name"],authorFunction:[1,"author-function"],authorImage:[1,"author-image"]}]]],["p-be73dbff",[[1,"wr-case",{caseTitle:[1,"case-title"],caseSubtitle:[1,"case-subtitle"],backgroundColor:[1,"background-color"],backgroundOpacity:[2,"background-opacity"],backgroundImage:[1,"background-image"],topLayer:[1025,"top-layer"],bottomLayer:[1025,"bottom-layer"],href:[1]}]]],["p-696b5b85",[[1,"wr-case-highlight",{background:[1],backgroundX:[1,"background-x"],backgroundY:[1,"background-y"],caseTitle:[1,"case-title"],href:[1]}]]],["p-1e544dab",[[1,"wr-footer"]]],["p-b488d30a",[[1,"wr-logo"]]],["p-d44158b0",[[1,"wr-menu-item",{size:[1],badge:[2],href:[1],isLarge:[64]}]]],["p-b15c4843",[[1,"wr-navigation",{isOpen:[32]},[[0,"open","openNavigationListener"],[0,"close","closeNavigationListener"]]]]]],o))); | ||
import{p as o,b as e}from"./p-abaf52ff.js";(()=>{const e=import.meta.url,a={};return""!==e&&(a.resourcesUrl=new URL(".",e).href),o(a)})().then((o=>e([["p-4b40fb81",[[1,"wr-block-meta",{items:[1],innerData:[32]}],[1,"wr-highlight",{itemTitle:[1,"item-title"],subTitle:[1,"sub-title"]}],[1,"wr-highlight-grid",null,[[0,"hover","onHover"]]],[0,"wr-logo-icon"],[1,"wr-scroll-animation",{once:[4],noTranslate:[4,"no-translate"],noFade:[4,"no-fade"],direction:[1],duration:[2]}]]],["p-84c65faf",[[1,"wr-accordion",{accordionTitle:[1,"accordion-title"],background:[1025],open:[32],closeMe:[64],openMe:[64],calculateSizes:[64]}]]],["p-50aee4b6",[[1,"wr-accordion-group",{isCollapse:[4,"is-collapse"],closeChildren:[64]},[[0,"accordionOpened","accordionOpened"]]]]],["p-8fb1a509",[[1,"wr-big-quote",{isDark:[4,"is-dark"],quoteColor:[1,"quote-color"],authorName:[1,"author-name"],authorFunction:[1,"author-function"],authorImage:[1,"author-image"]}]]],["p-be73dbff",[[1,"wr-case",{caseTitle:[1,"case-title"],caseSubtitle:[1,"case-subtitle"],backgroundColor:[1,"background-color"],backgroundOpacity:[2,"background-opacity"],backgroundImage:[1,"background-image"],topLayer:[1025,"top-layer"],bottomLayer:[1025,"bottom-layer"],href:[1]}]]],["p-7c484cc2",[[1,"wr-case-highlight",{background:[1],backgroundX:[1,"background-x"],backgroundY:[1,"background-y"],caseTitle:[1,"case-title"],href:[1]}]]],["p-1e544dab",[[1,"wr-footer"]]],["p-b488d30a",[[1,"wr-logo"]]],["p-d44158b0",[[1,"wr-menu-item",{size:[1],badge:[2],href:[1],isLarge:[64]}]]],["p-b15c4843",[[1,"wr-navigation",{isOpen:[32]},[[0,"open","openNavigationListener"],[0,"close","closeNavigationListener"]]]]]],o))); |
{ | ||
"name": "@webreact/webreact-components", | ||
"version": "0.4.43", | ||
"version": "0.4.44", | ||
"description": "Stencil Component Starter", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js", |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1648210