@ptcwebops/ptcw-design 0.0.13 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -67,7 +67,7 @@ const PtcImg = class {
67
67
  //responsive image
68
68
  setResponsiveBg() {
69
69
  // Define local variables
70
- let backgrounds = document.querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
70
+ let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
71
71
  console.log('current breakpoint: ' + currentBreakpoint);
72
72
  // Loop through all target elements
73
73
  for (var i = 0, len = backgrounds.length; i < len; i++) {
@@ -92,7 +92,7 @@ const PtcImg = class {
92
92
  return;
93
93
  }
94
94
  if ('IntersectionObserver' in window) {
95
- let lazyLoadBgs = document.querySelectorAll('.lazy-bg');
95
+ let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
96
96
  let bgObserver = new IntersectionObserver(entries => {
97
97
  entries.forEach(entry => {
98
98
  if (entry.isIntersecting) {
@@ -140,16 +140,16 @@ const PtcImg = class {
140
140
  return this.getFallbackBreakpoint();
141
141
  }
142
142
  getFallbackBreakpoint() {
143
- if (window.matchMedia('(min-width: 992px)')) {
143
+ if (window.matchMedia('(min-width: 992px)').matches) {
144
144
  return 'lg';
145
145
  }
146
- else if (window.matchMedia('(min-width: 768px)')) {
146
+ else if (window.matchMedia('(min-width: 768px)').matches) {
147
147
  return 'md';
148
148
  }
149
- else if (window.matchMedia('(min-width: 576px)')) {
149
+ else if (window.matchMedia('(min-width: 576px)').matches) {
150
150
  return 'sm';
151
151
  }
152
- else if (window.matchMedia('(min-width: 575.5px)')) {
152
+ else if (window.matchMedia('(min-width: 575.5px)').matches) {
153
153
  return 'xs';
154
154
  }
155
155
  else {
@@ -55,7 +55,7 @@ export class PtcImg {
55
55
  //responsive image
56
56
  setResponsiveBg() {
57
57
  // Define local variables
58
- let backgrounds = document.querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
58
+ let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
59
59
  console.log('current breakpoint: ' + currentBreakpoint);
60
60
  // Loop through all target elements
61
61
  for (var i = 0, len = backgrounds.length; i < len; i++) {
@@ -80,7 +80,7 @@ export class PtcImg {
80
80
  return;
81
81
  }
82
82
  if ('IntersectionObserver' in window) {
83
- let lazyLoadBgs = document.querySelectorAll('.lazy-bg');
83
+ let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
84
84
  let bgObserver = new IntersectionObserver(entries => {
85
85
  entries.forEach(entry => {
86
86
  if (entry.isIntersecting) {
@@ -139,16 +139,16 @@ export class PtcImg {
139
139
  return this.getFallbackBreakpoint();
140
140
  }
141
141
  getFallbackBreakpoint() {
142
- if (window.matchMedia('(min-width: 992px)')) {
142
+ if (window.matchMedia('(min-width: 992px)').matches) {
143
143
  return 'lg';
144
144
  }
145
- else if (window.matchMedia('(min-width: 768px)')) {
145
+ else if (window.matchMedia('(min-width: 768px)').matches) {
146
146
  return 'md';
147
147
  }
148
- else if (window.matchMedia('(min-width: 576px)')) {
148
+ else if (window.matchMedia('(min-width: 576px)').matches) {
149
149
  return 'sm';
150
150
  }
151
- else if (window.matchMedia('(min-width: 575.5px)')) {
151
+ else if (window.matchMedia('(min-width: 575.5px)').matches) {
152
152
  return 'xs';
153
153
  }
154
154
  else {
@@ -13858,7 +13858,7 @@ const PtcImg$1 = class extends HTMLElement {
13858
13858
  //responsive image
13859
13859
  setResponsiveBg() {
13860
13860
  // Define local variables
13861
- let backgrounds = document.querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
13861
+ let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
13862
13862
  console.log('current breakpoint: ' + currentBreakpoint);
13863
13863
  // Loop through all target elements
13864
13864
  for (var i = 0, len = backgrounds.length; i < len; i++) {
@@ -13883,7 +13883,7 @@ const PtcImg$1 = class extends HTMLElement {
13883
13883
  return;
13884
13884
  }
13885
13885
  if ('IntersectionObserver' in window) {
13886
- let lazyLoadBgs = document.querySelectorAll('.lazy-bg');
13886
+ let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
13887
13887
  let bgObserver = new IntersectionObserver(entries => {
13888
13888
  entries.forEach(entry => {
13889
13889
  if (entry.isIntersecting) {
@@ -13931,16 +13931,16 @@ const PtcImg$1 = class extends HTMLElement {
13931
13931
  return this.getFallbackBreakpoint();
13932
13932
  }
13933
13933
  getFallbackBreakpoint() {
13934
- if (window.matchMedia('(min-width: 992px)')) {
13934
+ if (window.matchMedia('(min-width: 992px)').matches) {
13935
13935
  return 'lg';
13936
13936
  }
13937
- else if (window.matchMedia('(min-width: 768px)')) {
13937
+ else if (window.matchMedia('(min-width: 768px)').matches) {
13938
13938
  return 'md';
13939
13939
  }
13940
- else if (window.matchMedia('(min-width: 576px)')) {
13940
+ else if (window.matchMedia('(min-width: 576px)').matches) {
13941
13941
  return 'sm';
13942
13942
  }
13943
- else if (window.matchMedia('(min-width: 575.5px)')) {
13943
+ else if (window.matchMedia('(min-width: 575.5px)').matches) {
13944
13944
  return 'xs';
13945
13945
  }
13946
13946
  else {
@@ -63,7 +63,7 @@ const PtcImg = class {
63
63
  //responsive image
64
64
  setResponsiveBg() {
65
65
  // Define local variables
66
- let backgrounds = document.querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
66
+ let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
67
67
  console.log('current breakpoint: ' + currentBreakpoint);
68
68
  // Loop through all target elements
69
69
  for (var i = 0, len = backgrounds.length; i < len; i++) {
@@ -88,7 +88,7 @@ const PtcImg = class {
88
88
  return;
89
89
  }
90
90
  if ('IntersectionObserver' in window) {
91
- let lazyLoadBgs = document.querySelectorAll('.lazy-bg');
91
+ let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
92
92
  let bgObserver = new IntersectionObserver(entries => {
93
93
  entries.forEach(entry => {
94
94
  if (entry.isIntersecting) {
@@ -136,16 +136,16 @@ const PtcImg = class {
136
136
  return this.getFallbackBreakpoint();
137
137
  }
138
138
  getFallbackBreakpoint() {
139
- if (window.matchMedia('(min-width: 992px)')) {
139
+ if (window.matchMedia('(min-width: 992px)').matches) {
140
140
  return 'lg';
141
141
  }
142
- else if (window.matchMedia('(min-width: 768px)')) {
142
+ else if (window.matchMedia('(min-width: 768px)').matches) {
143
143
  return 'md';
144
144
  }
145
- else if (window.matchMedia('(min-width: 576px)')) {
145
+ else if (window.matchMedia('(min-width: 576px)').matches) {
146
146
  return 'sm';
147
147
  }
148
- else if (window.matchMedia('(min-width: 575.5px)')) {
148
+ else if (window.matchMedia('(min-width: 575.5px)').matches) {
149
149
  return 'xs';
150
150
  }
151
151
  else {
@@ -0,0 +1 @@
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}
@@ -1 +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-f1fd26f7",[[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)));
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-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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ptcwebops/ptcw-design",
3
- "version": "0.0.13",
3
+ "version": "0.0.15",
4
4
  "description": "Stencil Component Starter",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/custom-elements/index.js",
@@ -1 +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)")?"lg":window.matchMedia("(min-width: 768px)")?"md":window.matchMedia("(min-width: 576px)")?"sm":window.matchMedia("(min-width: 575.5px)")?"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}