@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.
- package/dist/cjs/ptc-img.cjs.entry.js +6 -6
- package/dist/collection/components/ptc-img/ptc-img.js +6 -6
- package/dist/custom-elements/index.js +6 -6
- package/dist/esm/ptc-img.entry.js +6 -6
- package/dist/ptcw-design/p-83696cae.entry.js +1 -0
- package/dist/ptcw-design/ptcw-design.esm.js +1 -1
- package/package.json +1 -1
- package/dist/ptcw-design/p-f1fd26f7.entry.js +0 -1
|
@@ -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-
|
|
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 +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}
|