@ptcwebops/ptcw-design 0.0.12 → 0.0.14

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

@@ -88,16 +88,16 @@ const PtcImg = class {
   //lazy loading
   addIntersectionObserver() {
     if (!this.imgUrl) {
-      console.log("no image!");
+      console.log('no image!');
       return;
     }
     if ('IntersectionObserver' in window) {
-      let lazyLoadBgs = document.querySelectorAll(".lazy-bg");
-      let bgObserver = new IntersectionObserver((entries) => {
+      let lazyLoadBgs = document.querySelectorAll('.lazy-bg');
+      let bgObserver = new IntersectionObserver(entries => {
         entries.forEach(entry => {
           if (entry.isIntersecting) {
             const image = entry.target;
-            image.classList.remove("lazy-bg");
+            image.classList.remove('lazy-bg');
             console.log('loaded');
             bgObserver.unobserve(image);
           }
@@ -135,8 +135,26 @@ const PtcImg = class {
         return env;
       }
     }
-    // Breakpoint not found
-    return 'Unknown breakpoint';
+    // Breakpoint not found, try fallback
+    doc.body.removeChild(temp);
+    return this.getFallbackBreakpoint();
+  }
+  getFallbackBreakpoint() {
+    if (window.matchMedia('(min-width: 992px)').matches) {
+      return 'lg';
+    }
+    else if (window.matchMedia('(min-width: 768px)').matches) {
+      return 'md';
+    }
+    else if (window.matchMedia('(min-width: 576px)').matches) {
+      return 'sm';
+    }
+    else if (window.matchMedia('(min-width: 575.5px)').matches) {
+      return 'xs';
+    }
+    else {
+      return 'Unknown breakpoint';
+    }
   }
   get el() { return index.getElement(this); }
 };

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

@@ -76,16 +76,16 @@ export class PtcImg {
   //lazy loading
   addIntersectionObserver() {
     if (!this.imgUrl) {
-      console.log("no image!");
+      console.log('no image!');
       return;
     }
     if ('IntersectionObserver' in window) {
-      let lazyLoadBgs = document.querySelectorAll(".lazy-bg");
-      let bgObserver = new IntersectionObserver((entries) => {
+      let lazyLoadBgs = document.querySelectorAll('.lazy-bg');
+      let bgObserver = new IntersectionObserver(entries => {
         entries.forEach(entry => {
           if (entry.isIntersecting) {
             const image = entry.target;
-            image.classList.remove("lazy-bg");
+            image.classList.remove('lazy-bg');
             console.log('loaded');
             bgObserver.unobserve(image);
           }
@@ -134,8 +134,26 @@ export class PtcImg {
         return env;
       }
     }
-    // Breakpoint not found
-    return 'Unknown breakpoint';
+    // Breakpoint not found, try fallback
+    doc.body.removeChild(temp);
+    return this.getFallbackBreakpoint();
+  }
+  getFallbackBreakpoint() {
+    if (window.matchMedia('(min-width: 992px)').matches) {
+      return 'lg';
+    }
+    else if (window.matchMedia('(min-width: 768px)').matches) {
+      return 'md';
+    }
+    else if (window.matchMedia('(min-width: 576px)').matches) {
+      return 'sm';
+    }
+    else if (window.matchMedia('(min-width: 575.5px)').matches) {
+      return 'xs';
+    }
+    else {
+      return 'Unknown breakpoint';
+    }
   }
   static get is() { return "ptc-img"; }
   static get originalStyleUrls() { return {
@@ -256,7 +274,7 @@ export class PtcImg {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'radius-sm' | 'radius-md' | 'radius-lg'| ''",
+        "original": "'radius-sm' | 'radius-md' | 'radius-lg' | ''",
         "resolved": "\"\" | \"radius-lg\" | \"radius-md\" | \"radius-sm\"",
         "references": {}
       },

package/dist/custom-elements/index.js

@@ -13879,16 +13879,16 @@ const PtcImg$1 = class extends HTMLElement {
   //lazy loading
   addIntersectionObserver() {
     if (!this.imgUrl) {
-      console.log("no image!");
+      console.log('no image!');
       return;
     }
     if ('IntersectionObserver' in window) {
-      let lazyLoadBgs = document.querySelectorAll(".lazy-bg");
-      let bgObserver = new IntersectionObserver((entries) => {
+      let lazyLoadBgs = document.querySelectorAll('.lazy-bg');
+      let bgObserver = new IntersectionObserver(entries => {
         entries.forEach(entry => {
           if (entry.isIntersecting) {
             const image = entry.target;
-            image.classList.remove("lazy-bg");
+            image.classList.remove('lazy-bg');
             console.log('loaded');
             bgObserver.unobserve(image);
           }
@@ -13926,8 +13926,26 @@ const PtcImg$1 = class extends HTMLElement {
         return env;
       }
     }
-    // Breakpoint not found
-    return 'Unknown breakpoint';
+    // Breakpoint not found, try fallback
+    doc.body.removeChild(temp);
+    return this.getFallbackBreakpoint();
+  }
+  getFallbackBreakpoint() {
+    if (window.matchMedia('(min-width: 992px)').matches) {
+      return 'lg';
+    }
+    else if (window.matchMedia('(min-width: 768px)').matches) {
+      return 'md';
+    }
+    else if (window.matchMedia('(min-width: 576px)').matches) {
+      return 'sm';
+    }
+    else if (window.matchMedia('(min-width: 575.5px)').matches) {
+      return 'xs';
+    }
+    else {
+      return 'Unknown breakpoint';
+    }
   }
   get el() { return this; }
   static get style() { return ptcImgCss; }

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

@@ -84,16 +84,16 @@ const PtcImg = class {
   //lazy loading
   addIntersectionObserver() {
     if (!this.imgUrl) {
-      console.log("no image!");
+      console.log('no image!');
       return;
     }
     if ('IntersectionObserver' in window) {
-      let lazyLoadBgs = document.querySelectorAll(".lazy-bg");
-      let bgObserver = new IntersectionObserver((entries) => {
+      let lazyLoadBgs = document.querySelectorAll('.lazy-bg');
+      let bgObserver = new IntersectionObserver(entries => {
         entries.forEach(entry => {
           if (entry.isIntersecting) {
             const image = entry.target;
-            image.classList.remove("lazy-bg");
+            image.classList.remove('lazy-bg');
             console.log('loaded');
             bgObserver.unobserve(image);
           }
@@ -131,8 +131,26 @@ const PtcImg = class {
         return env;
       }
     }
-    // Breakpoint not found
-    return 'Unknown breakpoint';
+    // Breakpoint not found, try fallback
+    doc.body.removeChild(temp);
+    return this.getFallbackBreakpoint();
+  }
+  getFallbackBreakpoint() {
+    if (window.matchMedia('(min-width: 992px)').matches) {
+      return 'lg';
+    }
+    else if (window.matchMedia('(min-width: 768px)').matches) {
+      return 'md';
+    }
+    else if (window.matchMedia('(min-width: 576px)').matches) {
+      return 'sm';
+    }
+    else if (window.matchMedia('(min-width: 575.5px)').matches) {
+      return 'xs';
+    }
+    else {
+      return 'Unknown breakpoint';
+    }
   }
   get el() { return getElement(this); }
 };

package/dist/ptcw-design/p-bce4ef8d.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=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}

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-2b2895f0",[[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-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)));

package/dist/types/components/ptc-img/ptc-img.d.ts

@@ -44,4 +44,5 @@ export declare class PtcImg {
   addIntersectionObserver(): void;
   private getCssClassMap;
   private getCurrentBreakPoints;
+  private getFallbackBreakpoint;
 }

package/dist/types/components.d.ts

@@ -156,7 +156,7 @@ export namespace Components {
         /**
           * Image border shape
          */
-        "borderRadius": 'radius-sm' | 'radius-md' | 'radius-lg'| '';
+        "borderRadius": 'radius-sm' | 'radius-md' | 'radius-lg' | '';
         /**
           * Image type
          */
@@ -628,7 +628,7 @@ declare namespace LocalJSX {
         /**
           * Image border shape
          */
-        "borderRadius"?: 'radius-sm' | 'radius-md' | 'radius-lg'| '';
+        "borderRadius"?: 'radius-sm' | 'radius-md' | 'radius-lg' | '';
         /**
           * Image type
          */

package/package.json

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

package/dist/ptcw-design/p-2b2895f0.entry.js

@@ -1 +0,0 @@
-import{r as t,h as e,H as i,g as n}from"./p-4f366fc3.js";let s={envs:["xs","sm","md","lg"],selector:".ptc-img",interval:250};const o=class{constructor(e){t(this,e),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 e(i,null,e("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,e,i=document.querySelectorAll(s.selector),n=this.getCurrentBreakPoints();console.log("current breakpoint: "+n);for(var o=0,r=i.length;o<r;o++)t=i[o],e=t.getAttribute("data-"+n),null!==e?t.style.backgroundImage="url('"+e+"')":"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"),e=new IntersectionObserver((t=>{t.forEach((t=>{if(t.isIntersecting){const i=t.target;i.classList.remove("lazy-bg"),console.log("loaded"),e.unobserve(i)}}))}));t.forEach((t=>{e.observe(t)}))}}else console.log("no image!")}getCssClassMap(){return{[this.imageType]:!0,"ptc-img":!0,[this.borderRadius]:!0,[this.loadMode]:!0}}getCurrentBreakPoints(){let t,e=window.document,i=e.createElement("div");e.body.appendChild(i);for(let n=s.envs.length-1;n>=0;n--)if(t=s.envs[n],i.className="hidden-"+t,null===i.offsetParent)return e.body.removeChild(i),console.log("remove test node"),t;return"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}