@ptcwebops/ptcw-design 0.0.14 → 0.0.15

package/dist/cjs/ptc-img.cjs.entry.js

@@ -67,7 +67,7 @@ const PtcImg = class {
   //responsive image
   setResponsiveBg() {
     // Define local variables
-    let backgrounds = document.querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
     console.log('current breakpoint: ' + currentBreakpoint);
     // Loop through all target elements
     for (var i = 0, len = backgrounds.length; i < len; i++) {
@@ -92,7 +92,7 @@ const PtcImg = class {
       return;
     }
     if ('IntersectionObserver' in window) {
-      let lazyLoadBgs = document.querySelectorAll('.lazy-bg');
+      let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
       let bgObserver = new IntersectionObserver(entries => {
         entries.forEach(entry => {
           if (entry.isIntersecting) {

package/dist/collection/components/ptc-img/ptc-img.js

@@ -55,7 +55,7 @@ export class PtcImg {
   //responsive image
   setResponsiveBg() {
     // Define local variables
-    let backgrounds = document.querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
     console.log('current breakpoint: ' + currentBreakpoint);
     // Loop through all target elements
     for (var i = 0, len = backgrounds.length; i < len; i++) {
@@ -80,7 +80,7 @@ export class PtcImg {
       return;
     }
     if ('IntersectionObserver' in window) {
-      let lazyLoadBgs = document.querySelectorAll('.lazy-bg');
+      let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
       let bgObserver = new IntersectionObserver(entries => {
         entries.forEach(entry => {
           if (entry.isIntersecting) {

package/dist/custom-elements/index.js

@@ -13858,7 +13858,7 @@ const PtcImg$1 = class extends HTMLElement {
   //responsive image
   setResponsiveBg() {
     // Define local variables
-    let backgrounds = document.querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
     console.log('current breakpoint: ' + currentBreakpoint);
     // Loop through all target elements
     for (var i = 0, len = backgrounds.length; i < len; i++) {
@@ -13883,7 +13883,7 @@ const PtcImg$1 = class extends HTMLElement {
       return;
     }
     if ('IntersectionObserver' in window) {
-      let lazyLoadBgs = document.querySelectorAll('.lazy-bg');
+      let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
       let bgObserver = new IntersectionObserver(entries => {
         entries.forEach(entry => {
           if (entry.isIntersecting) {

package/dist/esm/ptc-img.entry.js

@@ -63,7 +63,7 @@ const PtcImg = class {
   //responsive image
   setResponsiveBg() {
     // Define local variables
-    let backgrounds = document.querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
     console.log('current breakpoint: ' + currentBreakpoint);
     // Loop through all target elements
     for (var i = 0, len = backgrounds.length; i < len; i++) {
@@ -88,7 +88,7 @@ const PtcImg = class {
       return;
     }
     if ('IntersectionObserver' in window) {
-      let lazyLoadBgs = document.querySelectorAll('.lazy-bg');
+      let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
       let bgObserver = new IntersectionObserver(entries => {
         entries.forEach(entry => {
           if (entry.isIntersecting) {

package/dist/ptcw-design/p-83696cae.entry.js

@@ -0,0 +1 @@
+import{r as t,h as i,H as e,g as n}from"./p-4f366fc3.js";let s={envs:["xs","sm","md","lg"],selector:".ptc-img",interval:250};const o=class{constructor(i){t(this,i),this.sizeXs="510x340",this.sizeSm="1240x496",this.sizeMd="1366x500",this.sizeLg="1920x1080",this.imageType="smart-bg",this.borderRadius="",this.loadMode="lazy-bg"}WindowResize(){this.setResponsiveBg()}render(){const t=this.getCssClassMap();return i(e,null,i("div",{class:t,"data-xs":`${this.imgUrl}:${this.sizeXs}`,"data-sm":`${this.imgUrl}:${this.sizeSm}`,"data-md":`${this.imgUrl}:${this.sizeMd}`,"data-lg":`${this.imgUrl}:${this.sizeLg}`}))}componentDidLoad(){this.addIntersectionObserver(),this.setResponsiveBg()}componentWillUpdate(){console.log("componentWillUpdate!"),this.addIntersectionObserver(),this.setResponsiveBg()}setResponsiveBg(){let t,i,e=(this.el||document).querySelectorAll(s.selector),n=this.getCurrentBreakPoints();console.log("current breakpoint: "+n);for(var o=0,r=e.length;o<r;o++)t=e[o],i=t.getAttribute("data-"+n),null!==i?t.style.backgroundImage="url('"+i+"')":"object"==typeof console&&console.warn("Data attribute: data-"+n+" not found on element:\n\n"+t.outerHTML+"\n\n\n")}addIntersectionObserver(){if(this.imgUrl){if("IntersectionObserver"in window){let t=(this.el||document).querySelectorAll(".lazy-bg"),i=new IntersectionObserver((t=>{t.forEach((t=>{if(t.isIntersecting){const e=t.target;e.classList.remove("lazy-bg"),console.log("loaded"),i.unobserve(e)}}))}));t.forEach((t=>{i.observe(t)}))}}else console.log("no image!")}getCssClassMap(){return{[this.imageType]:!0,"ptc-img":!0,[this.borderRadius]:!0,[this.loadMode]:!0}}getCurrentBreakPoints(){let t,i=window.document,e=i.createElement("div");i.body.appendChild(e);for(let n=s.envs.length-1;n>=0;n--)if(t=s.envs[n],e.className="hidden-"+t,null===e.offsetParent)return i.body.removeChild(e),console.log("remove test node"),t;return i.body.removeChild(e),this.getFallbackBreakpoint()}getFallbackBreakpoint(){return window.matchMedia("(min-width: 992px)").matches?"lg":window.matchMedia("(min-width: 768px)").matches?"md":window.matchMedia("(min-width: 576px)").matches?"sm":window.matchMedia("(min-width: 575.5px)").matches?"xs":"Unknown breakpoint"}get el(){return n(this)}};o.style=".smart-bg{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.smart-img{position:absolute;display:block;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.radius-sm{border-radius:var(--ptc-border-radius-small)}.radius-md{border-radius:var(--ptc-border-radius-medium)}.radius-lg{border-radius:var(--ptc-border-radius-large)}.lazy-bg{background-image:none !important;background-color:var(--color-primary-lightgrey)}@media (max-width: 767px){.hidden-xs{display:none !important}}@media (min-width: 768px) and (max-width: 991px){.hidden-sm{display:none !important}}@media (min-width: 992px) and (max-width: 1199px){.hidden-md{display:none !important}}@media (min-width: 1200px){.hidden-lg{display:none !important}}";export{o as ptc_img}

package/dist/ptcw-design/ptcw-design.esm.js

@@ -1 +1 @@
-import{p as e,b as t}from"./p-4f366fc3.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-d4f117d2",[[1,"ptc-card",{cardType:[1,"card-type"],cardHref:[1,"card-href"],target:[1],rel:[1],hasImage:[4,"has-image"],hasVideo:[4,"has-video"],hasLottie:[4,"has-lottie"],heading:[1],cardDate:[1,"card-date"],styles:[1]}]]],["p-76dfa56f",[[1,"ptc-link",{disabled:[516],external:[516],href:[1],target:[1],linkTitle:[1,"link-title"],theme:[1],uppercase:[4],fontSize:[1,"font-size"]}]]],["p-07624831",[[1,"ptc-lottie",{jsonSrc:[1025,"json-src"],speed:[1026]}]]],["p-31f4bd0c",[[4,"list-item",{listType:[1,"list-type"],linkHref:[1,"link-href"]}]]],["p-ac0ad25e",[[1,"my-component",{first:[1],middle:[1],last:[1]}]]],["p-85131a2a",[[4,"ptc-button",{disabled:[516],type:[1],color:[1],iconAnimation:[1,"icon-animation"],iconPosition:[1,"icon-position"]}]]],["p-0a44a2f7",[[1,"ptc-footer"]]],["p-c169281f",[[1,"ptc-image",{src:[1],alt:[1],oldSrc:[32]}]]],["p-bce4ef8d",[[0,"ptc-img",{sizeXs:[1025,"size-xs"],sizeSm:[1025,"size-sm"],sizeMd:[1025,"size-md"],sizeLg:[1025,"size-lg"],imgUrl:[1,"img-url"],imageType:[1,"image-type"],borderRadius:[1,"border-radius"],loadMode:[1,"load-mode"]},[[9,"resize","WindowResize"]]]]],["p-7a63ca63",[[0,"ptc-list",{listType:[1,"list-type"],listItems:[16]}]]],["p-3af43980",[[1,"ptc-nav"]]],["p-fe6a3ba5",[[1,"ptc-nav-item",{url:[1025],label:[1025],ariaExpanded:[1028,"aria-expanded"],depth:[1538],hasChildren:[1028,"has-children"],parentExpanded:[1540,"parent-expanded"],navType:[1,"nav-type"]},[[0,"handleClick","handleClick"],[9,"resize","handleResize"]]]]],["p-662ae9b6",[[4,"ptc-overlay"]]],["p-83d98048",[[1,"ptc-para",{fontSize:[1,"font-size"],fontWeight:[1,"font-weight"],paraStyle:[1,"para-style"],paraMargin:[1,"para-margin"]}]]],["p-01dc360c",[[4,"ptc-picture",{lazy:[1]}]]],["p-2d357f92",[[1,"ptc-spacer",{breakpoint:[1],size:[1],direction:[1]}]]],["p-70adca2e",[[1,"ptc-span",{spanStyle:[1,"span-style"],display:[1],styles:[1]}]]],["p-77f87fa3",[[1,"ptc-title",{type:[1],textAlign:[1,"text-align"],upperline:[1]}]]],["p-1a26bade",[[0,"icon-asset",{name:[1],size:[1],type:[1],spin:[1],pulse:[1],color:[1]}]]],["p-ce8b8a72",[[1,"lottie-player",{mode:[1],autoplay:[4],background:[513],controls:[4],count:[2],direction:[2],hover:[4],loop:[516],renderer:[1],speed:[2],src:[1],currentState:[1,"current-state"],seeker:[8],intermission:[2],play:[64],pause:[64],stop:[64],seek:[64],getLottie:[64],setSpeed:[64],setDirection:[64],setLooping:[64],togglePlay:[64],toggleLooping:[64]}]]],["p-00b6c442",[[1,"ptc-date",{year:[2],month:[2],day:[2],country:[1],dateString:[1,"date-string"],dateStyles:[1,"date-styles"]}]]]],e)));
+import{p as e,b as t}from"./p-4f366fc3.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-d4f117d2",[[1,"ptc-card",{cardType:[1,"card-type"],cardHref:[1,"card-href"],target:[1],rel:[1],hasImage:[4,"has-image"],hasVideo:[4,"has-video"],hasLottie:[4,"has-lottie"],heading:[1],cardDate:[1,"card-date"],styles:[1]}]]],["p-76dfa56f",[[1,"ptc-link",{disabled:[516],external:[516],href:[1],target:[1],linkTitle:[1,"link-title"],theme:[1],uppercase:[4],fontSize:[1,"font-size"]}]]],["p-07624831",[[1,"ptc-lottie",{jsonSrc:[1025,"json-src"],speed:[1026]}]]],["p-31f4bd0c",[[4,"list-item",{listType:[1,"list-type"],linkHref:[1,"link-href"]}]]],["p-ac0ad25e",[[1,"my-component",{first:[1],middle:[1],last:[1]}]]],["p-85131a2a",[[4,"ptc-button",{disabled:[516],type:[1],color:[1],iconAnimation:[1,"icon-animation"],iconPosition:[1,"icon-position"]}]]],["p-0a44a2f7",[[1,"ptc-footer"]]],["p-c169281f",[[1,"ptc-image",{src:[1],alt:[1],oldSrc:[32]}]]],["p-83696cae",[[0,"ptc-img",{sizeXs:[1025,"size-xs"],sizeSm:[1025,"size-sm"],sizeMd:[1025,"size-md"],sizeLg:[1025,"size-lg"],imgUrl:[1,"img-url"],imageType:[1,"image-type"],borderRadius:[1,"border-radius"],loadMode:[1,"load-mode"]},[[9,"resize","WindowResize"]]]]],["p-7a63ca63",[[0,"ptc-list",{listType:[1,"list-type"],listItems:[16]}]]],["p-3af43980",[[1,"ptc-nav"]]],["p-fe6a3ba5",[[1,"ptc-nav-item",{url:[1025],label:[1025],ariaExpanded:[1028,"aria-expanded"],depth:[1538],hasChildren:[1028,"has-children"],parentExpanded:[1540,"parent-expanded"],navType:[1,"nav-type"]},[[0,"handleClick","handleClick"],[9,"resize","handleResize"]]]]],["p-662ae9b6",[[4,"ptc-overlay"]]],["p-83d98048",[[1,"ptc-para",{fontSize:[1,"font-size"],fontWeight:[1,"font-weight"],paraStyle:[1,"para-style"],paraMargin:[1,"para-margin"]}]]],["p-01dc360c",[[4,"ptc-picture",{lazy:[1]}]]],["p-2d357f92",[[1,"ptc-spacer",{breakpoint:[1],size:[1],direction:[1]}]]],["p-70adca2e",[[1,"ptc-span",{spanStyle:[1,"span-style"],display:[1],styles:[1]}]]],["p-77f87fa3",[[1,"ptc-title",{type:[1],textAlign:[1,"text-align"],upperline:[1]}]]],["p-1a26bade",[[0,"icon-asset",{name:[1],size:[1],type:[1],spin:[1],pulse:[1],color:[1]}]]],["p-ce8b8a72",[[1,"lottie-player",{mode:[1],autoplay:[4],background:[513],controls:[4],count:[2],direction:[2],hover:[4],loop:[516],renderer:[1],speed:[2],src:[1],currentState:[1,"current-state"],seeker:[8],intermission:[2],play:[64],pause:[64],stop:[64],seek:[64],getLottie:[64],setSpeed:[64],setDirection:[64],setLooping:[64],togglePlay:[64],toggleLooping:[64]}]]],["p-00b6c442",[[1,"ptc-date",{year:[2],month:[2],day:[2],country:[1],dateString:[1,"date-string"],dateStyles:[1,"date-styles"]}]]]],e)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ptcwebops/ptcw-design",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/custom-elements/index.js",

package/dist/ptcw-design/p-bce4ef8d.entry.js

@@ -1 +0,0 @@
-import{r as t,h as i,H as e,g as n}from"./p-4f366fc3.js";let s={envs:["xs","sm","md","lg"],selector:".ptc-img",interval:250};const o=class{constructor(i){t(this,i),this.sizeXs="510x340",this.sizeSm="1240x496",this.sizeMd="1366x500",this.sizeLg="1920x1080",this.imageType="smart-bg",this.borderRadius="",this.loadMode="lazy-bg"}WindowResize(){this.setResponsiveBg()}render(){const t=this.getCssClassMap();return i(e,null,i("div",{class:t,"data-xs":`${this.imgUrl}:${this.sizeXs}`,"data-sm":`${this.imgUrl}:${this.sizeSm}`,"data-md":`${this.imgUrl}:${this.sizeMd}`,"data-lg":`${this.imgUrl}:${this.sizeLg}`}))}componentDidLoad(){this.addIntersectionObserver(),this.setResponsiveBg()}componentWillUpdate(){console.log("componentWillUpdate!"),this.addIntersectionObserver(),this.setResponsiveBg()}setResponsiveBg(){let t,i,e=document.querySelectorAll(s.selector),n=this.getCurrentBreakPoints();console.log("current breakpoint: "+n);for(var o=0,r=e.length;o<r;o++)t=e[o],i=t.getAttribute("data-"+n),null!==i?t.style.backgroundImage="url('"+i+"')":"object"==typeof console&&console.warn("Data attribute: data-"+n+" not found on element:\n\n"+t.outerHTML+"\n\n\n")}addIntersectionObserver(){if(this.imgUrl){if("IntersectionObserver"in window){let t=document.querySelectorAll(".lazy-bg"),i=new IntersectionObserver((t=>{t.forEach((t=>{if(t.isIntersecting){const e=t.target;e.classList.remove("lazy-bg"),console.log("loaded"),i.unobserve(e)}}))}));t.forEach((t=>{i.observe(t)}))}}else console.log("no image!")}getCssClassMap(){return{[this.imageType]:!0,"ptc-img":!0,[this.borderRadius]:!0,[this.loadMode]:!0}}getCurrentBreakPoints(){let t,i=window.document,e=i.createElement("div");i.body.appendChild(e);for(let n=s.envs.length-1;n>=0;n--)if(t=s.envs[n],e.className="hidden-"+t,null===e.offsetParent)return i.body.removeChild(e),console.log("remove test node"),t;return i.body.removeChild(e),this.getFallbackBreakpoint()}getFallbackBreakpoint(){return window.matchMedia("(min-width: 992px)").matches?"lg":window.matchMedia("(min-width: 768px)").matches?"md":window.matchMedia("(min-width: 576px)").matches?"sm":window.matchMedia("(min-width: 575.5px)").matches?"xs":"Unknown breakpoint"}get el(){return n(this)}};o.style=".smart-bg{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.smart-img{position:absolute;display:block;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.radius-sm{border-radius:var(--ptc-border-radius-small)}.radius-md{border-radius:var(--ptc-border-radius-medium)}.radius-lg{border-radius:var(--ptc-border-radius-large)}.lazy-bg{background-image:none !important;background-color:var(--color-primary-lightgrey)}@media (max-width: 767px){.hidden-xs{display:none !important}}@media (min-width: 768px) and (max-width: 991px){.hidden-sm{display:none !important}}@media (min-width: 992px) and (max-width: 1199px){.hidden-md{display:none !important}}@media (min-width: 1200px){.hidden-lg{display:none !important}}";export{o as ptc_img}