@ptcwebops/ptcw-design 0.2.7 → 0.2.9

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.
Files changed (145) hide show
  1. package/dist/cjs/icon-asset_16.cjs.entry.js +812 -0
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/ptc-announcement.cjs.entry.js +43 -0
  4. package/dist/cjs/ptc-list.cjs.entry.js +2 -3
  5. package/dist/cjs/ptc-svg-btn.cjs.entry.js +31 -0
  6. package/dist/cjs/ptcw-design.cjs.js +1 -1
  7. package/dist/collection/collection-manifest.json +5 -0
  8. package/dist/collection/components/icon-asset/media/designer.svg +33 -0
  9. package/dist/collection/components/list-item/list-item.css +39 -1
  10. package/dist/collection/components/list-item/list-item.js +26 -5
  11. package/dist/collection/components/ptc-announcement/ptc-announcement.css +5 -5
  12. package/dist/collection/components/ptc-breadcrumb/ptc-breadcrumb.css +19 -0
  13. package/dist/collection/components/ptc-breadcrumb/ptc-breadcrumb.js +21 -0
  14. package/dist/collection/components/ptc-button/ptc-button.css +12 -1
  15. package/dist/collection/components/ptc-button/ptc-button.js +29 -7
  16. package/dist/collection/components/ptc-card-bottom/ptc-card-bottom.css +12 -0
  17. package/dist/collection/components/ptc-card-bottom/ptc-card-bottom.js +41 -0
  18. package/dist/collection/components/ptc-card-content/ptc-card-content.css +61 -0
  19. package/dist/collection/components/ptc-card-content/ptc-card-content.js +81 -0
  20. package/dist/collection/components/ptc-card-plm/ptc-card-plm.css +19 -0
  21. package/dist/collection/components/ptc-card-plm/ptc-card-plm.js +97 -0
  22. package/dist/collection/components/ptc-hero/ptc-hero.css +13 -0
  23. package/dist/collection/components/ptc-hero/ptc-hero.js +43 -0
  24. package/dist/collection/components/ptc-img/ptc-img.js +6 -1
  25. package/dist/collection/components/ptc-link/ptc-link.css +25 -3
  26. package/dist/collection/components/ptc-link/ptc-link.js +3 -2
  27. package/dist/collection/components/ptc-list/ptc-list.css +8 -4
  28. package/dist/collection/components/ptc-list/ptc-list.js +5 -8
  29. package/dist/collection/components/ptc-overlay/ptc-overlay.css +81 -0
  30. package/dist/collection/components/ptc-overlay/ptc-overlay.js +88 -3
  31. package/dist/collection/components/ptc-para/ptc-para.css +59 -0
  32. package/dist/collection/components/ptc-para/ptc-para.js +53 -7
  33. package/dist/collection/components/ptc-picture/ptc-picture.css +28 -1
  34. package/dist/collection/components/ptc-picture/ptc-picture.js +27 -9
  35. package/dist/collection/components/ptc-spacer/ptc-spacer.css +11 -0
  36. package/dist/collection/components/ptc-spacer/ptc-spacer.js +2 -2
  37. package/dist/collection/components/ptc-span/ptc-span.css +26 -1
  38. package/dist/collection/components/ptc-span/ptc-span.js +6 -3
  39. package/dist/collection/components/ptc-title/ptc-title.css +108 -11
  40. package/dist/collection/components/ptc-title/ptc-title.js +62 -4
  41. package/dist/custom-elements/index.d.ts +30 -0
  42. package/dist/custom-elements/index.js +200 -36
  43. package/dist/esm/icon-asset_16.entry.js +793 -0
  44. package/dist/esm/{index-eb8ce23d.js → index-6ce5b664.js} +1 -1
  45. package/dist/esm/loader.js +2 -2
  46. package/dist/esm/lottie-player.entry.js +1 -1
  47. package/dist/esm/my-component.entry.js +1 -1
  48. package/dist/esm/ptc-announcement.entry.js +39 -0
  49. package/dist/esm/ptc-avatar.entry.js +1 -1
  50. package/dist/esm/ptc-card.entry.js +1 -1
  51. package/dist/esm/ptc-countdown.entry.js +1 -1
  52. package/dist/esm/ptc-date.entry.js +1 -1
  53. package/dist/esm/ptc-footer.entry.js +1 -1
  54. package/dist/esm/ptc-form.entry.js +1 -1
  55. package/dist/esm/ptc-input.entry.js +1 -1
  56. package/dist/esm/ptc-list.entry.js +3 -4
  57. package/dist/esm/ptc-lottie.entry.js +1 -1
  58. package/dist/esm/ptc-nav-item.entry.js +1 -1
  59. package/dist/esm/ptc-nav.entry.js +1 -1
  60. package/dist/esm/ptc-select.entry.js +1 -1
  61. package/dist/esm/ptc-svg-btn.entry.js +27 -0
  62. package/dist/esm/ptcw-design.js +2 -2
  63. package/dist/ptcw-design/media/designer.svg +33 -0
  64. package/dist/ptcw-design/{p-63b55aba.entry.js → p-281824f5.entry.js} +1 -1
  65. package/dist/ptcw-design/p-31b2af1d.entry.js +1 -0
  66. package/dist/ptcw-design/{p-f94c4594.entry.js → p-3437fbce.entry.js} +1 -1
  67. package/dist/ptcw-design/{p-e8650244.entry.js → p-542939d4.entry.js} +1 -1
  68. package/dist/ptcw-design/{p-ef6acb81.entry.js → p-5c78913c.entry.js} +1 -1
  69. package/dist/ptcw-design/{p-3f42afb6.entry.js → p-5eb74dc3.entry.js} +1 -1
  70. package/dist/ptcw-design/p-609dec21.entry.js +1 -0
  71. package/dist/ptcw-design/{p-1b3b0193.entry.js → p-6ff80c95.entry.js} +1 -1
  72. package/dist/ptcw-design/p-8bbb4277.entry.js +1 -0
  73. package/dist/ptcw-design/p-9a35c9e2.entry.js +1 -0
  74. package/dist/ptcw-design/{p-22fd400f.entry.js → p-aafe51df.entry.js} +1 -1
  75. package/dist/ptcw-design/{p-75dc7328.entry.js → p-ac57feca.entry.js} +1 -1
  76. package/dist/ptcw-design/{p-2ca3c085.js → p-b1afaef3.js} +1 -1
  77. package/dist/ptcw-design/p-b85eda19.entry.js +1 -0
  78. package/dist/ptcw-design/p-bac826ad.entry.js +1 -0
  79. package/dist/ptcw-design/{p-e4b96b46.entry.js → p-da7ee0ba.entry.js} +1 -1
  80. package/dist/ptcw-design/{p-32ef3a79.entry.js → p-e2492128.entry.js} +1 -1
  81. package/dist/ptcw-design/p-e266fc0b.entry.js +1 -0
  82. package/dist/ptcw-design/ptcw-design.css +2 -2
  83. package/dist/ptcw-design/ptcw-design.esm.js +1 -1
  84. package/dist/types/components/list-item/list-item.d.ts +2 -1
  85. package/dist/types/components/ptc-breadcrumb/ptc-breadcrumb.d.ts +4 -0
  86. package/dist/types/components/ptc-button/ptc-button.d.ts +7 -3
  87. package/dist/types/components/ptc-card-bottom/ptc-card-bottom.d.ts +5 -0
  88. package/dist/types/components/ptc-card-content/ptc-card-content.d.ts +11 -0
  89. package/dist/types/components/ptc-card-plm/ptc-card-plm.d.ts +8 -0
  90. package/dist/types/components/ptc-hero/ptc-hero.d.ts +5 -0
  91. package/dist/types/components/ptc-img/ptc-img.d.ts +3 -0
  92. package/dist/types/components/ptc-link/ptc-link.d.ts +1 -1
  93. package/dist/types/components/ptc-list/ptc-list.d.ts +1 -1
  94. package/dist/types/components/ptc-overlay/ptc-overlay.d.ts +17 -0
  95. package/dist/types/components/ptc-para/ptc-para.d.ts +11 -3
  96. package/dist/types/components/ptc-picture/ptc-picture.d.ts +5 -1
  97. package/dist/types/components/ptc-spacer/ptc-spacer.d.ts +1 -1
  98. package/dist/types/components/ptc-span/ptc-span.d.ts +4 -1
  99. package/dist/types/components/ptc-title/ptc-title.d.ts +14 -2
  100. package/dist/types/components.d.ts +229 -28
  101. package/package.json +1 -1
  102. package/readme.md +1 -1
  103. package/dist/cjs/icon-asset.cjs.entry.js +0 -64
  104. package/dist/cjs/interfaces-0ecd8027.js +0 -15
  105. package/dist/cjs/list-item.cjs.entry.js +0 -27
  106. package/dist/cjs/ptc-announcement_2.cjs.entry.js +0 -68
  107. package/dist/cjs/ptc-button.cjs.entry.js +0 -72
  108. package/dist/cjs/ptc-img.cjs.entry.js +0 -155
  109. package/dist/cjs/ptc-link.cjs.entry.js +0 -53
  110. package/dist/cjs/ptc-overlay.cjs.entry.js +0 -19
  111. package/dist/cjs/ptc-para.cjs.entry.js +0 -40
  112. package/dist/cjs/ptc-picture.cjs.entry.js +0 -159
  113. package/dist/cjs/ptc-spacer.cjs.entry.js +0 -46
  114. package/dist/cjs/ptc-span.cjs.entry.js +0 -31
  115. package/dist/cjs/ptc-title.cjs.entry.js +0 -49
  116. package/dist/esm/icon-asset.entry.js +0 -60
  117. package/dist/esm/interfaces-3cb94654.js +0 -12
  118. package/dist/esm/list-item.entry.js +0 -23
  119. package/dist/esm/ptc-announcement_2.entry.js +0 -63
  120. package/dist/esm/ptc-button.entry.js +0 -68
  121. package/dist/esm/ptc-img.entry.js +0 -151
  122. package/dist/esm/ptc-link.entry.js +0 -49
  123. package/dist/esm/ptc-overlay.entry.js +0 -15
  124. package/dist/esm/ptc-para.entry.js +0 -36
  125. package/dist/esm/ptc-picture.entry.js +0 -155
  126. package/dist/esm/ptc-spacer.entry.js +0 -42
  127. package/dist/esm/ptc-span.entry.js +0 -27
  128. package/dist/esm/ptc-title.entry.js +0 -45
  129. package/dist/ptcw-design/p-01f4bf71.entry.js +0 -1
  130. package/dist/ptcw-design/p-1bf9750d.entry.js +0 -1
  131. package/dist/ptcw-design/p-23d07898.entry.js +0 -1
  132. package/dist/ptcw-design/p-240733ce.js +0 -1
  133. package/dist/ptcw-design/p-29c54eb0.entry.js +0 -1
  134. package/dist/ptcw-design/p-2b59ce7a.entry.js +0 -1
  135. package/dist/ptcw-design/p-389a5670.entry.js +0 -1
  136. package/dist/ptcw-design/p-51443fbb.entry.js +0 -1
  137. package/dist/ptcw-design/p-54794e45.entry.js +0 -1
  138. package/dist/ptcw-design/p-5ae43421.entry.js +0 -1
  139. package/dist/ptcw-design/p-6b5c0d9d.entry.js +0 -1
  140. package/dist/ptcw-design/p-7076b32f.entry.js +0 -1
  141. package/dist/ptcw-design/p-7b379559.entry.js +0 -1
  142. package/dist/ptcw-design/p-a86452af.entry.js +0 -1
  143. package/dist/ptcw-design/p-d3f9852f.entry.js +0 -1
  144. package/dist/ptcw-design/p-d80b24c9.entry.js +0 -1
  145. package/dist/ptcw-design/p-fd29d9dd.entry.js +0 -1
@@ -1,27 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-0b899fc6.js');
6
-
7
- const listItemCss = ":host{display:block}";
8
-
9
- let ListItem = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- this.listType = 'para-list';
13
- this.linkHref = undefined;
14
- }
15
- render() {
16
- const classMap = this.getCssClassMap();
17
- return (index.h(index.Host, { class: classMap }, index.h("li", null, this.linkHref ? (index.h("a", Object.assign({}, (this.linkHref ? { href: this.linkHref } : {})), index.h("slot", null))) : (index.h("slot", null)))));
18
- }
19
- getCssClassMap() {
20
- return {
21
- [this.listType]: true,
22
- };
23
- }
24
- };
25
- ListItem.style = listItemCss;
26
-
27
- exports.list_item = ListItem;
@@ -1,68 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-0b899fc6.js');
6
-
7
- const ptcAnnouncementCss = ":host{display:block}.announcement{width:100%;position:relative;background-color:#e4e7e9;z-index:860;background-size:cover;background-repeat:repeat-x;border:1px solid var(--color-secondary-turtlegreen);-webkit-box-shadow:1px 1px 9px 0 rgba(0, 0, 0, 0.56);box-shadow:1px 1px 9px 0 rgba(0, 0, 0, 0.56);z-index:999;display:none}.visible{display:block}.content-wrapper{display:flex;padding:5px 15px;margin:0 auto;align-items:center;justify-content:space-between}@media screen and (min-width: 768px){.content-wrapper{padding:10px 15px}}@media screen and (min-width: 768px){.temp-container{width:750px}}@media screen and (min-width: 992px){.temp-container{width:970px}}@media screen and (min-width: 1200px){.temp-container{width:1170px}}@media screen and (min-width: 1440px){.temp-container{width:1400px}}@media screen and (min-width: 1600px){.temp-container{width:1560px}}.left-content{display:flex;flex-basis:82%;flex-direction:column}@media screen and (min-width: 768px){.left-content{align-items:flex-start;justify-content:flex-start}}.title{flex-basis:18%;font-family:Raleway;font-size:10px;font-weight:800;font-stretch:normal;font-style:normal;line-height:2.6;letter-spacing:1px;text-align:left;color:#40434a;text-transform:uppercase}.ptc-svg-btn{flex-basis:18%}.bar-close{padding-right:15px}.description{flex-basis:82%;font-family:Raleway;font-size:10px;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.4;letter-spacing:normal;text-align:left;color:#40434a;}a{color:#3b4550;-webkit-transition:color 0.3s ease;-o-transition:color 0.3s ease;transition:color 0.3s ease;font-weight:700;border-bottom:0.15rem solid #74c34d;text-decoration:none;margin-left:5px}a:hover{color:#74c34d;text-decoration:none}@media (min-width: 768px){.bar-close{padding-right:0px}}@media (min-width: 992px){.left-content{flex-direction:row;align-items:center}.title{font-size:14px;font-weight:800;line-height:1.86;letter-spacing:1.4px}.description{font-size:13px;font-weight:500;line-height:1.08}}";
8
-
9
- let PtcAnnouncement = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- this.close = index.createEvent(this, "close", 7);
13
- /**
14
- * bar title
15
- */
16
- this.barTitle = "";
17
- /**
18
- * bar description
19
- */
20
- this.Description = "";
21
- /**
22
- * Link Url
23
- */
24
- this.linkUrl = '#';
25
- this.closeClick = () => {
26
- this.visible = false;
27
- this.close.emit();
28
- };
29
- }
30
- render() {
31
- const classMap = this.getCssClassMap();
32
- return (index.h(index.Host, null, index.h("div", { class: classMap, part: "part-announcement" }, index.h("div", { class: this.tempContainer ? 'content-wrapper temp-container' : 'content-wrapper' }, index.h("div", { class: "left-content", part: "part-left-content" }, !!this.barTitle ? index.h("div", { class: "title" }, this.barTitle) : null, index.h("div", { class: "description" }, !!this.Description ? index.h("span", null, this.Description) : null, !!this.linkText ? (index.h("a", { href: this.linkUrl, title: this.linkText }, this.linkText)) : null)), index.h("ptc-svg-btn", { class: "bar-close", "svg-name": "close", onClick: this.closeClick })))));
33
- }
34
- getCssClassMap() {
35
- return {
36
- ['announcement']: true,
37
- [this.visible ? 'visible' : '']: true,
38
- };
39
- }
40
- };
41
- PtcAnnouncement.style = ptcAnnouncementCss;
42
-
43
- const closeSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 42 41.485">
44
- <g id="Group_1042" data-name="Group 1042" transform="rotate(180 108.25 87.993)">
45
- <path id="Line_446" d="M0 0v39.486" class="cls-1" data-name="Line 446"></path>
46
- <path id="Line_447" d="M0 0h40" class="cls-1" data-name="Line 447"></path>
47
- <path id="Line_448" d="M0 33.592V0" class="cls-1" data-name="Line 448"></path>
48
- <path id="Line_449" d="M23.994 0H0" class="cls-1" data-name="Line 449"></path>
49
- <path id="Line_450" d="M0 0l17.596 17.596" class="cls-2" data-name="Line 450" transform="translate(187.229 147.226)"></path>
50
- <path id="Line_451" d="M0 7.198L7.199 0" class="cls-2" data-name="Line 451" transform="translate(197.55 147.312)"></path>
51
- <path id="Path_114" d="M0 7.2L7.2 0" class="cls-2" data-name="Path 114" transform="translate(187.313 157.549)"></path>
52
- </g>
53
- </svg>`;
54
-
55
- const ptcSvgBtnCss = ":host{display:block;cursor:pointer}.svg-close svg .cls-1,.svg-close svg .cls-2{fill:none;stroke-width:2px}.svg-close svg .cls-1{stroke:#40434A;stroke-linecap:square}.svg-close svg .cls-2{stroke:#40434A}.svg-close svg path{-webkit-transition:all 0.25s ease-in-out;-o-transition:all ease-in-out 0.25s;transition:all 0.25s ease-in-out}.svg-close svg .cls-1:first-child{-webkit-transform:translate(175.5px, 135.5px);-ms-transform:translate(175.5px, 135.5px);transform:translate(175.5px, 135.5px)}.svg-close svg .cls-1:nth-child(2){-webkit-transform:translate(175.5px, 174.985px);-ms-transform:translate(175.5px, 174.985px);transform:translate(175.5px, 174.985px)}.svg-close svg .cls-1:nth-child(3){-webkit-transform:translate(215.5px, 141.393px);-ms-transform:translate(215.5px, 141.393px);transform:translate(215.5px, 141.393px)}.svg-close svg .cls-1:nth-child(4){-webkit-transform:translate(175.5px, 135.5px);-ms-transform:translate(175.5px, 135.5px);transform:translate(175.5px, 135.5px)}.svg-close:hover svg .cls-1:first-child{-webkit-transform:translate(175.5px, 162px);-ms-transform:translate(175.5px, 162px);transform:translate(175.5px, 162px)}.svg-close:hover svg .cls-1:nth-child(2){-webkit-transform:translate(149px, 174.985px);-ms-transform:translate(149px, 174.985px);transform:translate(149px, 174.985px)}.svg-close:hover svg .cls-1:nth-child(3){-webkit-transform:translate(215.5px, 174px);-ms-transform:translate(215.5px, 174px);transform:translate(215.5px, 174px)}.svg-close:hover svg .cls-1:nth-child(4){-webkit-transform:translate(152.5px, 135.5px);-ms-transform:translate(152.5px, 135.5px);transform:translate(152.5px, 135.5px)}.svg-close.svg-close-white .cls-1{stroke:#fff}";
56
-
57
- let PtcSvgBtn = class {
58
- constructor(hostRef) {
59
- index.registerInstance(this, hostRef);
60
- }
61
- render() {
62
- return (index.h(index.Host, null, !!this.svgName && this.svgName === 'close' ? index.h("div", { class: 'svg-close', innerHTML: closeSvg }) : null));
63
- }
64
- };
65
- PtcSvgBtn.style = ptcSvgBtnCss;
66
-
67
- exports.ptc_announcement = PtcAnnouncement;
68
- exports.ptc_svg_btn = PtcSvgBtn;
@@ -1,72 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-0b899fc6.js');
6
-
7
- const ptcButtonCss = "button.disabled{pointer-events:none;opacity:0.6}button{background-color:var(--color-primary-uigrey);display:inline-block;border-style:solid;border-width:1px;white-space:normal;position:relative;text-decoration:none;cursor:pointer;padding:9.4px 17.5px;border-radius:3px}button.animation-right ::slotted([slot=slot-after-text]),button.animation-right ::slotted([slot=slot-before-text]),button.animation-down ::slotted([slot=slot-after-text]),button.animation-down ::slotted([slot=slot-before-text]){transition:transform var(--ptc-transition-medium) var(--ptc-standard-ease);position:relative;display:inline-block}button:hover.animation-right ::slotted([slot=slot-after-text]),button:hover.animation-right ::slotted([slot=slot-before-text]){transform:translateX(var(--ptc-element-spacing-02))}button:hover.animation-down ::slotted([slot=slot-after-text]),button:hover.animation-down ::slotted([slot=slot-before-text]){transform:translateY(var(--ptc-element-spacing-02))}button span{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:bold;line-height:0.86}.icon-left ::slotted([slot=slot-before-text]){margin-right:var(--ptc-element-spacing-01)}.icon-right ::slotted([slot=slot-after-text]){margin-left:var(--ptc-element-spacing-01)}.blackgrey{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-primary-uigrey);background-image:linear-gradient(285deg, var(--color-primary-uigrey) 155%, #6e717c 62%)}.blackgrey:hover{box-shadow:var(--ptc-shadow-x-large)}.blackgrey span{color:var(--color-white)}.turtlegreen{box-shadow:var(--ptc-shadow-x-small);border:solid 1px #5bb73b;background-image:linear-gradient(285deg, #5bb73b 155%, #178642 62%)}.turtlegreen:hover{box-shadow:var(--ptc-shadow-x-large)}.turtlegreen span{color:var(--color-white)}.offwhite{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-primary-uigrey);background-image:linear-gradient(to right, #ffffff, #d3d3d3, #e5e5e5)}.offwhite:hover{box-shadow:var(--ptc-shadow-x-large)}.offwhite span{color:var(--color-primary-uigrey)}.legacy-green{margin-left:10px;padding:10px 20px;margin-bottom:4px;margin-top:4px;box-shadow:0 0 25.8px 3.2px rgba(0, 0, 0, 0.5);border:solid 2.5px var(--color-secondary-tutlegreen-dark);background-image:linear-gradient(to right, var(--color-secondary-turtlegreen), var(--color-secondary-tutlegreen-dark))}.legacy-green:after{position:absolute;content:\"\";top:-1px;left:0;bottom:0;right:0;width:100%;height:103%;background-image:linear-gradient(to right, var(--color-secondary-tutlegreen-dark), var(--color-secondary-turtlegreen));opacity:0;transition:opacity 0.6s cubic-bezier(0, 0, 0.23, 1);border-radius:2px}.legacy-green:hover{box-shadow:0 0 49px 6.1px rgba(0, 0, 0, 0.55)}.legacy-green:hover span{color:var(--color-white)}.legacy-green:hover:after{opacity:1}.legacy-green span{font-family:var(--ptc-font-secondary-latin);color:var(--color-white);z-index:100;position:relative;text-transform:uppercase;font-weight:var(--ptc-font-weight-bold);letter-spacing:var(--ptc-letter-spacing-normal);font-size:var(--ptc-font-size-medium)}@media screen and (min-width: 768px){.legacy-green span{font-size:19px;letter-spacing:var(--ptc-letter-spacing-loose)}}.legacy-green icon-asset{display:inline}a{border-style:solid;border-width:1px;position:relative;text-decoration:none;padding:9.4px 17.5px;border-radius:3px;text-decoration:none;display:inline-block;position:relative}a.animation-right ::slotted([slot=slot-after-text]),a.animation-right ::slotted([slot=slot-before-text]),a.animation-down ::slotted([slot=slot-after-text]),a.animation-down ::slotted([slot=slot-before-text]){transition:all ease-out 0.25s;position:relative;display:inline-block;margin-left:5px}a:hover.animation-right ::slotted([slot=slot-after-text]),a:hover.animation-right ::slotted([slot=slot-before-text]){transform:translateX(var(--ptc-element-spacing-02))}a:hover.animation-down ::slotted([slot=slot-after-text]),a:hover.animation-down ::slotted([slot=slot-before-text]){transform:translateY(var(--ptc-element-spacing-02))}.nav{font-family:var(--ptc-font-latin);background-color:#323b42;border-radius:var(--ptc-border-radius-medium);border:1px solid var(--color-white);border-bottom-style:solid;border-bottom-width:1px;box-sizing:border-box;color:var(--color-white);display:inline-block;font-size:13px;font-stretch:100%;font-weight:var(--ptc-font-weight-bold);line-height:26px;list-style:none;padding:3px var(--ptc-element-spacing-04);position:relative;text-align:center;text-decoration:none;transition:background-color var(--ptc-transition-medium) var(--ptc-decelerated-ease)}.nav:focus{outline:3px solid #0092d1;outline-offset:2px}.nav:hover{background-color:#20262a}.ptc-primary,.ptc-quaternary,.ptc-secondary,.ptc-tertiary{padding:var(--ptc-font-size-small) var(--ptc-font-size-large);transition:background-color var(--ptc-standard-ease) var(--ptc-transition-medium);line-height:20px}.ptc-primary.disabled,.ptc-quaternary.disabled,.ptc-secondary.disabled,.ptc-tertiary.disabled{pointer-events:none;border-color:#a8aaaf;background:#e1e2e4}.ptc-primary.disabled span,.ptc-quaternary.disabled span,.ptc-secondary.disabled span,.ptc-tertiary.disabled span{color:#a8aaaf}.ptc-primary.disabled ::slotted([slot=slot-after-text]),.ptc-quaternary.disabled ::slotted([slot=slot-after-text]),.ptc-secondary.disabled ::slotted([slot=slot-after-text]),.ptc-tertiary.disabled ::slotted([slot=slot-after-text]){fill:#a8aaaf !important}.ptc-primary:focus,.ptc-quaternary:focus,.ptc-secondary:focus,.ptc-tertiary:focus{outline:3px solid #0092d1;outline-offset:2px}.ptc-primary span,.ptc-quaternary span,.ptc-secondary span,.ptc-tertiary span{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-bold);font-size:17px;line-height:20px;letter-spacing:normal}.ptc-primary{background:#1f2024;border:2px solid #5bb73a;border-radius:var(--ptc-border-radius-medium)}.ptc-primary:hover{background-color:#33353a}.ptc-primary:active{background-color:var(--color-black)}.ptc-primary span{color:var(--color-white)}.ptc-primary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}.ptc-secondary{background:#1f2024;border:2px solid #6d707b;border-radius:var(--ptc-border-radius-medium)}.ptc-secondary:hover{background-color:#33353a}.ptc-secondary:active{background-color:var(--color-black)}.ptc-secondary span{color:var(--color-white)}.ptc-secondary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}.ptc-tertiary{background:var(--color-white);border:2px solid var(--color-primary-grey);border-radius:var(--ptc-border-radius-medium)}.ptc-tertiary:hover{background-color:#e1e2e4}.ptc-tertiary:active{background-color:#c5c5ca}.ptc-tertiary span{color:var(--color-primary-grey)}.ptc-tertiary ::slotted([slot=slot-after-text]){fill:var(--color-primary-grey) !important}.ptc-quaternary{background:#158542;border:2px solid #459e67;border-radius:var(--ptc-border-radius-medium)}.ptc-quaternary:hover{background-color:#17713a}.ptc-quaternary:active{background-color:#186135}.ptc-quaternary span{color:var(--color-white)}.ptc-quaternary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}";
8
-
9
- let PtcButton = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- this.clickEvent = index.createEvent(this, "clickEvent", 7);
13
- /**
14
- * Disabled button
15
- */
16
- this.disabled = false;
17
- /**
18
- * Button type
19
- */
20
- this.type = 'button';
21
- /**
22
- * Button theme color
23
- */
24
- this.color = 'ptc-primary';
25
- /**
26
- * Icon Animation
27
- */
28
- this.iconAnimation = '';
29
- /**
30
- * Icon Position
31
- */
32
- this.iconPosition = 'icon-right';
33
- /**
34
- * Link URL (Optional)
35
- */
36
- this.linkHref = undefined;
37
- /**
38
- * (optional) Link target
39
- * */
40
- this.target = '_self';
41
- /**
42
- * (optional) Link rel
43
- * */
44
- this.rel = undefined;
45
- /**
46
- * (optional) tab-nav.
47
- * indicates that its element can be focused, and where it participates in sequential keyboard navigation.
48
- * A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation
49
- */
50
- this.tabNav = 0;
51
- }
52
- clickEventHandler() {
53
- this.clickEvent.emit();
54
- //console.log('click!');
55
- }
56
- render() {
57
- const classMap = this.getCssClassMap();
58
- const Tag = !!this.linkHref ? 'a' : 'button';
59
- return (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 })), index.h("span", null, index.h("slot", { name: "slot-before-text" }), index.h("slot", null), index.h("slot", { name: "slot-after-text" })))));
60
- }
61
- getCssClassMap() {
62
- return {
63
- [this.color]: true,
64
- [this.iconAnimation]: true,
65
- [this.iconPosition]: true,
66
- ['disabled']: this.disabled ? true : false,
67
- };
68
- }
69
- };
70
- PtcButton.style = ptcButtonCss;
71
-
72
- exports.ptc_button = PtcButton;
@@ -1,155 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-0b899fc6.js');
6
- const interfaces = require('./interfaces-0ecd8027.js');
7
-
8
- const ptcImgCss = ".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}}";
9
-
10
- let PtcImg = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- /**
14
- * Image size for smallest screen
15
- * <=767px
16
- */
17
- this.sizeXs = '510x340';
18
- /**
19
- * Image size for small screen
20
- * >=768px and <=991px
21
- */
22
- this.sizeSm = '1240x496';
23
- /**
24
- * Image size for medium screen
25
- * >=992px and <=1199px
26
- */
27
- this.sizeMd = '1366x500';
28
- /**
29
- * Image solution for large screen
30
- * >=1200px
31
- */
32
- this.sizeLg = '1920x1080';
33
- /**
34
- * Image type
35
- */
36
- this.imageType = 'smart-bg';
37
- /**
38
- * Image border shape
39
- */
40
- this.borderRadius = '';
41
- /**
42
- * Lazy loading option
43
- */
44
- this.loadMode = 'lazy-bg';
45
- }
46
- WindowResize() {
47
- this.setResponsiveBg();
48
- }
49
- render() {
50
- const classMap = this.getCssClassMap();
51
- return (index.h(index.Host, null, index.h("div", { class: classMap, "data-xs": `${this.imgUrl}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` })));
52
- }
53
- componentDidLoad() {
54
- this.addIntersectionObserver();
55
- this.setResponsiveBg();
56
- }
57
- componentWillUpdate() {
58
- // console.log('componentWillUpdate!');
59
- this.addIntersectionObserver();
60
- this.setResponsiveBg();
61
- }
62
- //responsive image
63
- setResponsiveBg() {
64
- // Define local variables
65
- let backgrounds = (this.el || document).querySelectorAll(interfaces.ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
66
- // console.log('current breakpoint: ' + currentBreakpoint);
67
- // Loop through all target elements
68
- for (var i = 0, len = backgrounds.length; i < len; i++) {
69
- // Set current variables
70
- el = backgrounds[i];
71
- elData = el.getAttribute('data-' + currentBreakpoint);
72
- // If the data attribute exists, set the background
73
- if (elData !== null) {
74
- el.style.backgroundImage = "url('" + elData + "')";
75
- }
76
- else {
77
- if (typeof console == 'object') {
78
- console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
79
- }
80
- }
81
- }
82
- }
83
- //lazy loading
84
- addIntersectionObserver() {
85
- if (!this.imgUrl) {
86
- console.log('no image!');
87
- return;
88
- }
89
- if ('IntersectionObserver' in window) {
90
- let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
91
- let bgObserver = new IntersectionObserver(entries => {
92
- entries.forEach(entry => {
93
- if (entry.isIntersecting) {
94
- const image = entry.target;
95
- image.classList.remove('lazy-bg');
96
- // console.log('loaded');
97
- bgObserver.unobserve(image);
98
- }
99
- });
100
- });
101
- lazyLoadBgs.forEach(image => {
102
- bgObserver.observe(image);
103
- });
104
- }
105
- }
106
- getCssClassMap() {
107
- return {
108
- [this.imageType]: true,
109
- 'ptc-img': true,
110
- [this.borderRadius]: true,
111
- [this.loadMode]: true,
112
- };
113
- }
114
- getCurrentBreakPoints() {
115
- // Define local variables
116
- let doc = window.document, temp = doc.createElement('div'), env;
117
- // Append test node
118
- doc.body.appendChild(temp);
119
- // Loop through breakpoints
120
- for (let i = interfaces.ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
121
- env = interfaces.ResponsiveBgVariables.envs[i];
122
- // Add classes
123
- temp.className = 'hidden-' + env;
124
- // Found breakpoint
125
- if (temp.offsetParent === null) {
126
- // Remove our test node
127
- doc.body.removeChild(temp);
128
- console.log('remove test node');
129
- // Return current breakpoint
130
- return env;
131
- }
132
- }
133
- // Breakpoint not found, try fallback
134
- doc.body.removeChild(temp);
135
- return this.getFallbackBreakpoint();
136
- }
137
- getFallbackBreakpoint() {
138
- if (window.matchMedia('(min-width: 992px)').matches) {
139
- return 'lg';
140
- }
141
- else if (window.matchMedia('(min-width: 768px)').matches) {
142
- return 'md';
143
- }
144
- else if (window.matchMedia('(min-width: 576px)').matches) {
145
- return 'sm';
146
- }
147
- else {
148
- return 'xs';
149
- }
150
- }
151
- get el() { return index.getElement(this); }
152
- };
153
- PtcImg.style = ptcImgCss;
154
-
155
- exports.ptc_img = PtcImg;
@@ -1,53 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-0b899fc6.js');
6
-
7
- const ptcLinkCss = ":host{display:block}.disabled{pointer-events:none;cursor:default;text-decoration:none}.ptc-link{display:inline-block;color:var(--color-primary-uigrey);font-weight:var(--ptc-font-weight-black);position:relative;line-height:var(--ptc-line-height-normal);margin-bottom:var(--ptc-element-spacing-01);outline:none;text-decoration:none}.simple::after{content:\"\";position:absolute;width:100%;left:0px;bottom:2px;transition:opacity var(--ptc-transition-fast) var(--ptc-standard-ease);border-bottom:2px solid var(--color-primary-green);opacity:0}.simple:hover.simple::after{opacity:1}.arrow{margin-right:var(--ptc-element-spacing-01)}.arrow::after{position:absolute;display:block;content:\"\";width:var(--ptc-element-spacing-06);border-bottom:2px solid var(--color-primary-green);bottom:1px;transition:width var(--ptc-transition-fast) var(--ptc-standard-ease)}.arrow:hover.arrow::after{width:100%}.uppercase{text-transform:uppercase}.small{font-size:var(--ptc-font-size-small)}.medium{font-size:var(--ptc-font-size-medium)}.large{font-size:var(--ptc-font-size-large)}icon-asset{position:absolute;right:-25px;transition:transform var(--ptc-transition-fast) var(--ptc-standard-ease)}icon-asset svg{fill:var(--color-primary-green) !important}.ptc-link:hover.arrow icon-asset{transform:translateX(var(--ptc-element-spacing-04))}.nav-title:focus,.nav-title-link:focus,.primary-nav-link:focus,.secondary-nav-link:focus,.footer-nav-link:focus,.copyright-link:focus{outline:3px solid #0092d1;outline-offset:2px}.nav-title{box-sizing:border-box;color:var(--color-white);display:inline-block;font-size:15px;font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);letter-spacing:0.15px;line-height:25.05px;list-style:none;margin-bottom:10px;text-align:left}.primary-nav-link{background-color:transparent;box-sizing:border-box;color:#f3f3f4;display:inline-block;font-size:15px;font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);letter-spacing:0.3px;line-height:25.95px;list-style:none;margin:var(--ptc-element-spacing-01) var(--ptc-element-spacing-03);padding:var(--ptc-element-spacing-02) var(--ptc-element-spacing-05);padding-bottom:7px;position:relative;text-decoration:none;transition:background-color var(--ptc-transition-medium) var(--ptc-decelerated-ease)}.primary-nav-link:hover{border-radius:4px;background-color:#20262a;text-decoration:none;outline:none}.nav-title-link{background-color:transparent;box-sizing:border-box;color:var(--color-white);font-size:var(--ptc-font-size-x-small);font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);line-height:15px;list-style:none;text-align:left;text-decoration-color:var(--color-white);text-decoration:none;transition:border-color var(--ptc-transition-medium) var(--ptc-decelerated-ease);border-bottom:1.5px solid transparent;display:inline-block}.nav-title-link:hover{color:var(--color-white);border-bottom:1.5px solid var(--color-secondary-turtlegreen)}.secondary-nav-link{display:inline-block;background-color:transparent;box-sizing:border-box;color:var(--color-white);font-size:var(--ptc-font-size-x-small);font-stretch:100%;font-style:normal;font-weight:var(--ptc-font-weight-semibold);letter-spacing:0.12px;line-height:14.4px;list-style:none;margin-bottom:12px;text-align:left;text-decoration:none;transition:border-color var(--ptc-transition-medium) var(--ptc-decelerated-ease);border-bottom:1.5px solid transparent;white-space:nowrap}.secondary-nav-link:hover{color:var(--color-white);border-bottom:1.5px solid #74c34d;border-radius:0;text-decoration:none}.footer-nav-link{color:var(--color-white);transition:border var(--ptc-transition-medium) var(--ptc-standard-ease), color var(--ptc-transition-medium) var(--ptc-standard-ease);border-bottom:1px solid transparent;outline:none;text-decoration:none;font-weight:var(--ptc-font-weight-semibold);line-height:1.73;letter-spacing:1.13px;text-align:left;font-size:15px}.footer-nav-link:hover{outline:none;text-decoration:none;border-bottom:0.1rem solid var(--color-secondary-turtlegreen);color:var(--color-secondary-turtlegreen)}.copyright-link{color:var(--color-white);font-size:13px;font-weight:var(--ptc-font-weight-normal);line-height:2;display:inline-block}";
8
-
9
- let PtcLink = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- /**
13
- * Disabled link
14
- */
15
- this.disabled = false;
16
- /**
17
- * Rxternal link
18
- * */
19
- this.external = false;
20
- /**
21
- * Target
22
- */
23
- this.target = '_self';
24
- /**
25
- * Theme
26
- */
27
- this.theme = 'simple';
28
- /**
29
- * Uppercase
30
- */
31
- this.uppercase = false;
32
- /**
33
- * Font Size
34
- */
35
- this.fontSize = 'medium';
36
- }
37
- render() {
38
- const classMap = this.getCssClassMap();
39
- return (index.h(index.Host, null, index.h("a", { class: classMap, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle }, this.theme == 'arrow' ? index.h("icon-asset", { type: "solid", size: "small", name: "arrow-right" }) : '', index.h("slot", null))));
40
- }
41
- getCssClassMap() {
42
- return {
43
- ['ptc-link']: true,
44
- [this.theme]: true,
45
- ['uppercase']: this.uppercase,
46
- ['disabled']: this.disabled,
47
- [this.fontSize]: true,
48
- };
49
- }
50
- };
51
- PtcLink.style = ptcLinkCss;
52
-
53
- exports.ptc_link = PtcLink;
@@ -1,19 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-0b899fc6.js');
6
-
7
- const ptcOverlayCss = ":host{display:block}";
8
-
9
- let PtcOverlay = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- }
13
- render() {
14
- return (index.h(index.Host, null, index.h("slot", null)));
15
- }
16
- };
17
- PtcOverlay.style = ptcOverlayCss;
18
-
19
- exports.ptc_overlay = PtcOverlay;
@@ -1,40 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-0b899fc6.js');
6
-
7
- const ptcParaCss = "p.default{text-shadow:0 3px 6px var(--color-white);line-height:var(--ptc-line-height-dense);color:var(--color-primary-grey)}p.xx-small{font-size:var(--ptc-font-size-xx-small)}p.x-small{font-size:var(--ptc-font-size-x-small)}p.small{font-size:var(--ptc-font-size-small)}p.medium{font-size:var(--ptc-font-size-medium)}p.large{font-size:var(--ptc-font-size-large)}p.x-large{font-size:var(--ptc-font-size-x-large)}p.xx-large{font-size:var(--ptc-font-size-xx-large)}p.xxx-large{font-size:var(--ptc-font-size-xxx-large)}p.xxxx-large{font-size:var(--ptc-font-size-xxxx-large)}p.w-3{font-weight:var(--ptc-font-weight-thin)}p.w-4{font-weight:var(--ptc-font-weight-regular)}p.w-5{font-weight:var(--ptc-font-weight-medium)}p.w-6{font-weight:var(--ptc-font-weight-semibold)}p.w-7{font-weight:var(--ptc-font-weight-bold)}p.w-8{font-weight:var(--ptc-font-weight-extrabold)}p.w-9{font-weight:var(--ptc-font-weight-black)}p.margin-flush{margin-top:0;margin-bottom:0}p.margin-top-3{margin-top:var(--ptc-element-spacing-03)}p.margin-top-4{margin-top:var(--ptc-element-spacing-04)}p.margin-top-5{margin-top:var(--ptc-element-spacing-05)}p.margin-top-6{margin-top:var(--ptc-element-spacing-06)}p.margin-bottom-3{margin-bottom:var(--ptc-element-spacing-03)}p.margin-bottom-4{margin-bottom:var(--ptc-element-spacing-04)}p.margin-bottom-5{margin-bottom:var(--ptc-element-spacing-05)}p.margin-bottom-6{margin-bottom:var(--ptc-element-spacing-06)}p.announcement{text-transform:uppercase;font-size:var(--ptc-font-size-small);color:var(--color-secondary-grey);line-height:var(--ptc-line-height-looser);letter-spacing:1px}";
8
-
9
- let PtcPara = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- /**
13
- * Paragraph font size
14
- **/
15
- this.fontSize = "medium";
16
- /**
17
- * Paragraph font weight
18
- **/
19
- this.fontWeight = 'w-4';
20
- /**
21
- * Paragraph Style
22
- **/
23
- this.paraStyle = 'default';
24
- }
25
- render() {
26
- const classMap = this.getCssClassMap();
27
- return (index.h("p", { class: classMap, part: "part-para" }, index.h("slot", null)));
28
- }
29
- getCssClassMap() {
30
- return {
31
- [this.fontSize]: true,
32
- [this.fontWeight]: true,
33
- [this.paraStyle]: true,
34
- [this.paraMargin]: true,
35
- };
36
- }
37
- };
38
- PtcPara.style = ptcParaCss;
39
-
40
- exports.ptc_para = PtcPara;
@@ -1,159 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-0b899fc6.js');
6
- const interfaces = require('./interfaces-0ecd8027.js');
7
-
8
- const ptcPictureCss = ":host{display:block;overflow:hidden}img{max-width:100%;height:auto}.cover{object-fit:cover}.fill{object-fit:fill}.contain{object-fit:contain}.scale-down{object-fit:scale-down}.none{object-fit:none}.initial{object-fit:initial}.inherit{object-fit:inherit}";
9
-
10
- let PtcPicture = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- /**
14
- * Image alt
15
- */
16
- this.alt = "image";
17
- /**
18
- * Image size for smallest screen
19
- * <=767px
20
- */
21
- this.sizeXs = '510x340';
22
- /**
23
- * Image size for small screen
24
- * >=768px and <=991px
25
- */
26
- this.sizeSm = '1240x496';
27
- /**
28
- * Image size for medium screen
29
- * >=992px and <=1199px
30
- */
31
- this.sizeMd = '1366x500';
32
- /**
33
- * Image solution for large screen
34
- * >=1200px
35
- */
36
- this.sizeLg = '1920x1080';
37
- /**
38
- * Image border shape
39
- */
40
- this.borderRadius = '';
41
- /**
42
- * Object Fit
43
- * Default: cover
44
- */
45
- this.objectFit = 'cover';
46
- }
47
- WindowResize() {
48
- this.addIntersectionObserver();
49
- }
50
- componentDidLoad() {
51
- this.addIntersectionObserver();
52
- }
53
- componentWillUpdate() {
54
- if (this.src !== this.oldSrc) {
55
- this.addIntersectionObserver();
56
- }
57
- this.oldSrc = this.src;
58
- }
59
- //lazy-loading
60
- addIntersectionObserver() {
61
- if (!this.src) {
62
- return;
63
- }
64
- if ('IntersectionObserver' in window) {
65
- let lazyLoadImages = new IntersectionObserver(entries => {
66
- entries.forEach(entry => {
67
- if (entry.isIntersecting) {
68
- const image = this.el.shadowRoot.querySelector('img');
69
- image.src = this.setResponsiveBg();
70
- console.log('loaded');
71
- lazyLoadImages.unobserve(image);
72
- }
73
- });
74
- });
75
- lazyLoadImages.observe(this.el.shadowRoot.querySelector('img'));
76
- }
77
- else {
78
- // fall back to setTimeout for Safari and IE
79
- setTimeout(() => {
80
- const image = this.el.shadowRoot.querySelector('img');
81
- image.src = this.setResponsiveBg();
82
- image.onload = () => {
83
- image.removeAttribute('data-src');
84
- console.log('loaded fallback');
85
- };
86
- }, 5000);
87
- }
88
- }
89
- //responsive image
90
- setResponsiveBg() {
91
- // Define local variables
92
- let backgrounds = (this.el.shadowRoot || document).querySelectorAll('img'), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
93
- for (var i = 0, len = backgrounds.length; i < len; i++) {
94
- // Set current variables
95
- el = backgrounds[i];
96
- elData = el.getAttribute('data-' + currentBreakpoint);
97
- if (elData !== null) {
98
- // console.log('img src= ' + elData);
99
- return elData;
100
- }
101
- else {
102
- if (typeof console == 'object') {
103
- console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
104
- }
105
- }
106
- }
107
- }
108
- render() {
109
- const classMap = this.getCssClassMap();
110
- return (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}:${this.sizeXs}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}:${this.sizeSm}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}:${this.sizeMd}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}:${this.sizeLg}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt }))));
111
- }
112
- getCurrentBreakPoints() {
113
- // Define local variables
114
- let doc = window.document, temp = doc.createElement('div'), env;
115
- // Append test node
116
- doc.body.appendChild(temp);
117
- // Loop through breakpoints
118
- for (let i = interfaces.ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
119
- env = interfaces.ResponsivePictureVariables.envs[i];
120
- // Add classes
121
- temp.className = 'hidden-' + env;
122
- // Found breakpoint
123
- if (temp.offsetParent === null) {
124
- // Remove our test node
125
- doc.body.removeChild(temp);
126
- console.log('remove test node');
127
- // Return current breakpoint
128
- return env;
129
- }
130
- }
131
- // Breakpoint not found, try fallback
132
- doc.body.removeChild(temp);
133
- return this.getFallbackBreakpoint();
134
- }
135
- getFallbackBreakpoint() {
136
- if (window.matchMedia('(min-width: 992px)').matches) {
137
- return 'lg';
138
- }
139
- else if (window.matchMedia('(min-width: 768px)').matches) {
140
- return 'md';
141
- }
142
- else if (window.matchMedia('(min-width: 576px)').matches) {
143
- return 'sm';
144
- }
145
- else {
146
- return 'xs';
147
- }
148
- }
149
- getCssClassMap() {
150
- return {
151
- [this.borderRadius]: true,
152
- [this.objectFit]: true,
153
- };
154
- }
155
- get el() { return index.getElement(this); }
156
- };
157
- PtcPicture.style = ptcPictureCss;
158
-
159
- exports.ptc_picture = PtcPicture;