@ptcwebops/ptcw-design 6.3.61-beta → 6.3.63-beta

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 (37) hide show
  1. package/dist/cjs/embedded-form.cjs.entry.js +1 -1
  2. package/dist/cjs/ptc-countdown.cjs.entry.js +7 -10
  3. package/dist/cjs/ptc-form-checkbox_4.cjs.entry.js +13 -7
  4. package/dist/cjs/ptc-img.cjs.entry.js +2 -2
  5. package/dist/cjs/ptc-pricing-packaging-table.cjs.entry.js +1 -1
  6. package/dist/cjs/ptc-text-copy-with-background.cjs.entry.js +8 -2
  7. package/dist/collection/components/organism-bundles/form/embedded-form/embedded-form.js +1 -1
  8. package/dist/collection/components/ptc-countdown/ptc-countdown.js +7 -10
  9. package/dist/collection/components/ptc-img/ptc-img.js +2 -2
  10. package/dist/collection/components/ptc-pricing-packaging-table/ptc-pricing-packaging-table.css +2 -2
  11. package/dist/collection/components/ptc-select/ptc-select.js +8 -4
  12. package/dist/collection/components/ptc-text-copy-with-background/ptc-text-copy-with-background.js +8 -2
  13. package/dist/collection/components/ptc-textfield/ptc-textfield.css +38 -0
  14. package/dist/collection/components/ptc-textfield/ptc-textfield.js +9 -4
  15. package/dist/custom-elements/index.js +32 -23
  16. package/dist/esm/embedded-form.entry.js +1 -1
  17. package/dist/esm/ptc-countdown.entry.js +7 -10
  18. package/dist/esm/ptc-form-checkbox_4.entry.js +13 -7
  19. package/dist/esm/ptc-img.entry.js +2 -2
  20. package/dist/esm/ptc-pricing-packaging-table.entry.js +1 -1
  21. package/dist/esm/ptc-text-copy-with-background.entry.js +8 -2
  22. package/dist/ptcw-design/p-0d859481.entry.js +1 -0
  23. package/dist/ptcw-design/{p-4ca956c1.entry.js → p-201a96ca.entry.js} +1 -1
  24. package/dist/ptcw-design/p-7588b226.entry.js +1 -0
  25. package/dist/ptcw-design/p-ce285530.entry.js +68 -0
  26. package/dist/ptcw-design/{p-fd87fcd5.entry.js → p-ef5b5890.entry.js} +1 -1
  27. package/dist/ptcw-design/{p-bab5bb88.entry.js → p-f5d8a3b1.entry.js} +1 -1
  28. package/dist/ptcw-design/ptcw-design.esm.js +1 -1
  29. package/dist/types/components/ptc-countdown/ptc-countdown.d.ts +0 -1
  30. package/dist/types/components/ptc-select/ptc-select.d.ts +1 -0
  31. package/dist/types/components/ptc-textfield/ptc-textfield.d.ts +2 -2
  32. package/dist/types/components.d.ts +2 -2
  33. package/package.json +1 -1
  34. package/readme.md +1 -1
  35. package/dist/ptcw-design/p-1efb0486.entry.js +0 -68
  36. package/dist/ptcw-design/p-e8c275a1.entry.js +0 -1
  37. package/dist/ptcw-design/p-ff4d3794.entry.js +0 -1
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-63ddc79c.js');
6
6
  const utils = require('./utils-b63aef52.js');
7
7
 
8
- const ptcPricingPackagingTableCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}:host #pricing-table{position:relative;overflow-wrap:break-word}:host #vertical-scroll-content-clipper.normal{display:none}:host #vertical-scroll-content-clipper.sticky{display:block;z-index:20;position:fixed;top:0;width:100%;height:var(--sticky-stop-at, 50px)}:host #table-container{width:100%;overflow-x:auto;border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-x-small);position:relative}:host #table-body{width:100%;overflow-x:scroll;position:relative}:host .scroll-button{display:flex;align-items:center;position:absolute;z-index:15;height:100%}:host .scroll-button#previous-scroll-button div{margin-right:var(--ptc-element-spacing-02);border-radius:0px var(--ptc-element-spacing-01) var(--ptc-element-spacing-01) 0px}:host .scroll-button#previous-scroll-button div ptc-para{margin-right:var(--ptc-element-spacing-04)}:host .scroll-button#next-scroll-button{transform:translateX(-100%)}:host .scroll-button#next-scroll-button div{margin-left:var(--ptc-element-spacing-02);border-radius:var(--ptc-element-spacing-01) 0px 0px var(--ptc-element-spacing-01)}:host .scroll-button#next-scroll-button div ptc-para{margin-left:var(--ptc-element-spacing-04)}:host .scroll-button div{display:inline-block;width:fit-content;height:36px;background-color:white;color:black;box-shadow:var(--ptc-shadow-x-medium);display:flex;justify-content:center;align-items:center}:host .scroll-button div icon-asset{display:flex;justify-content:center;align-items:center;width:36px;height:100%}:host .scroll-button div ptc-para{display:none;white-space:nowrap}:host .scroll-button div:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .table-filler-cell{display:none;min-width:var(--filler-cell-width, 0px);max-width:var(--filler-cell-width, 0px);height:100%;box-sizing:content-box;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);border-bottom:1px solid var(--color-gray-02)}:host .table-filler-cell.show{display:table-cell}:host #table-header{display:table-row;background:var(--color-gray-10);color:white;z-index:10}:host #table-header.normal{position:relative}:host #table-header.sticky{position:fixed;top:var(--sticky-stop-at, 50px);border-top-left-radius:var(--ptc-border-radius-standard);border-top-right-radius:var(--ptc-border-radius-standard);overflow-x:hidden;-ms-overflow-style:none;scrollbar-width:none;box-shadow:0 16px 16px -16px grey}:host #table-header.sticky::-webkit-scrollbar{display:none}:host #table-header .table-cell{min-width:var(--cell-width-xxs, 180px);max-width:var(--cell-width-xxs, 180px);box-sizing:content-box;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);border-right:1px solid var(--color-gray-07);text-align:center;display:table-cell;vertical-align:middle}:host #table-header .table-cell.table-last-cell{border-right:none}:host #table-header .table-cell ptc-link a.ptc-link{line-height:var(--ptc-line-height-p)}:host #table-header .table-filler-cell{border-bottom:none;border-left:1px solid var(--color-gray-07)}:host #table-header-placeholder.normal{position:absolute;top:0;display:table-row;opacity:0}:host #table-header-placeholder.sticky{position:relative;display:table-row;opacity:0;overflow-x:hidden;-ms-overflow-style:none;scrollbar-width:none}:host #table-header-placeholder .table-cell{min-width:var(--cell-width-xxs, 180px);max-width:var(--cell-width-xxs, 180px);box-sizing:content-box;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);border-right:1px solid var(--color-gray-07);text-align:center;display:table-cell;vertical-align:middle}:host #table-header-placeholder .table-cell.table-last-cell{border-right:none}:host #table-header-placeholder .table-filler-cell{border-bottom:none;border-left:1px solid var(--color-gray-07)}:host .desktop-header-first-cell{display:table-cell;position:sticky;left:0;z-index:10}:host .mobile-sticky-row-header{display:block;position:sticky;left:0;background-color:var(--color-gray-01);border-bottom:1px solid var(--color-gray-02);padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06)}:host .table-row{display:table-row;background-color:white}:host .table-row .table-cell{min-width:var(--cell-width-xxs, 180px);max-width:var(--cell-width-xxs, 180px);box-sizing:content-box;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);border-right:1px solid var(--color-gray-02);border-bottom:1px solid var(--color-gray-02);text-align:center;display:table-cell;vertical-align:middle}:host .table-row .table-cell.table-last-cell{border-right:none}:host .table-row .table-filler-cell{border-left:1px solid var(--color-gray-02)}:host .table-cta-row{display:table-row;background-color:white}:host .table-cta-row .table-cell{min-width:var(--cell-width-xxs, 180px);max-width:var(--cell-width-xxs, 180px);box-sizing:content-box;padding:var(--ptc-element-spacing-06);border-right:1px solid var(--color-gray-02);border-bottom:1px solid var(--color-gray-02);text-align:center;display:table-cell;vertical-align:middle}:host .table-cta-row .table-cell.table-last-cell{border-right:none}:host .table-cta-row .table-filler-cell{border-left:1px solid var(--color-gray-02)}@media only screen and (min-width: 768px){:host .table-descriptor{max-width:768px;margin:auto}}@media only screen and (min-width: 992px){:host .scroll-button{height:100%;top:0}:host .scroll-button div ptc-para{display:none}:host .scroll-button div:hover{cursor:pointer}:host .scroll-button div:hover ptc-para{display:block}:host .scroll-button#previous-scroll-button{right:0;transform:translateX(100%)}:host #horizontal-scroll-shadow{display:block;position:absolute;top:0;left:0;height:100%;width:var(--ptc-element-spacing-06);background:linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 100%);z-index:1}:host #table-header.sticky{box-shadow:none}:host #table-header .table-cell{min-width:var(--cell-width-md, 225px);max-width:var(--cell-width-md, 225px)}:host #table-header .last-column-tooltip .tooltip{right:4px}:host #table-header-placeholder .table-cell{min-width:var(--cell-width-md, 225px);max-width:var(--cell-width-md, 225px)}:host #table-header-placeholder .last-column-tooltip .tooltip{right:-4px}:host .desktop-sticky-row-header{min-width:var(--desktop-row-header-cell-width-md, 275px);max-width:var(--desktop-row-header-cell-width-md, 275px);box-sizing:content-box;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);border-right:1px solid var(--color-gray-02);border-bottom:1px solid var(--color-gray-02);display:table-cell;vertical-align:middle;position:sticky;left:0;background-color:white;z-index:5}:host .desktop-sticky-row-header.desktop-alternate-row{background-color:var(--color-gray-01)}:host .desktop-header-first-cell{min-width:var(--desktop-row-header-cell-width-md, 275px);max-width:var(--desktop-row-header-cell-width-md, 275px);box-sizing:content-box;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);border-right:1px solid var(--color-gray-07);display:table-cell;vertical-align:middle;position:sticky;left:0;z-index:10;background:var(--color-gray-10)}:host .table-row .table-cell{min-width:var(--cell-width-md, 225px);max-width:var(--cell-width-md, 225px)}:host .table-row.desktop-alternate-row{background-color:var(--color-gray-01)}:host .mobile-sticky-row-header{display:none}:host .table-cta-row{display:table-row}:host .table-cta-row .table-cell{min-width:var(--cell-width-md, 225px);max-width:var(--cell-width-md, 225px)}:host .table-cta-row .last-column-tooltip .tooltip{right:-4px}}";
8
+ const ptcPricingPackagingTableCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}:host #pricing-table{position:relative;overflow-wrap:break-word}:host #vertical-scroll-content-clipper.normal{display:none}:host #vertical-scroll-content-clipper.sticky{display:block;z-index:20;position:fixed;top:0;width:100%;height:var(--sticky-stop-at, 50px)}:host #table-container{width:calc(100% + 1px);overflow-x:auto;border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-x-small);position:relative}:host #table-body{width:100%;overflow-x:auto;position:relative}:host .scroll-button{display:flex;align-items:center;position:absolute;z-index:15;height:100%}:host .scroll-button#previous-scroll-button div{margin-right:var(--ptc-element-spacing-02);border-radius:0px var(--ptc-element-spacing-01) var(--ptc-element-spacing-01) 0px}:host .scroll-button#previous-scroll-button div ptc-para{margin-right:var(--ptc-element-spacing-04)}:host .scroll-button#next-scroll-button{transform:translateX(-100%)}:host .scroll-button#next-scroll-button div{margin-left:var(--ptc-element-spacing-02);border-radius:var(--ptc-element-spacing-01) 0px 0px var(--ptc-element-spacing-01)}:host .scroll-button#next-scroll-button div ptc-para{margin-left:var(--ptc-element-spacing-04)}:host .scroll-button div{display:inline-block;width:fit-content;height:36px;background-color:white;color:black;box-shadow:var(--ptc-shadow-x-medium);display:flex;justify-content:center;align-items:center}:host .scroll-button div icon-asset{display:flex;justify-content:center;align-items:center;width:36px;height:100%}:host .scroll-button div ptc-para{display:none;white-space:nowrap}:host .scroll-button div:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .table-filler-cell{display:none;min-width:var(--filler-cell-width, 0px);max-width:var(--filler-cell-width, 0px);height:100%;box-sizing:content-box;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);border-bottom:1px solid var(--color-gray-02)}:host .table-filler-cell.show{display:table-cell}:host #table-header{display:table-row;background:var(--color-gray-10);color:white;z-index:10}:host #table-header.normal{position:relative}:host #table-header.sticky{position:fixed;top:var(--sticky-stop-at, 50px);border-top-left-radius:var(--ptc-border-radius-standard);border-top-right-radius:var(--ptc-border-radius-standard);overflow-x:hidden;-ms-overflow-style:none;scrollbar-width:none;box-shadow:0 16px 16px -16px grey}:host #table-header.sticky::-webkit-scrollbar{display:none}:host #table-header .table-cell{min-width:var(--cell-width-xxs, 180px);max-width:var(--cell-width-xxs, 180px);box-sizing:content-box;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);border-right:1px solid var(--color-gray-07);text-align:center;display:table-cell;vertical-align:middle}:host #table-header .table-cell.table-last-cell{border-right:none}:host #table-header .table-cell ptc-link a.ptc-link{line-height:var(--ptc-line-height-p)}:host #table-header .table-filler-cell{border-bottom:none;border-left:1px solid var(--color-gray-07)}:host #table-header-placeholder.normal{position:absolute;top:0;display:table-row;opacity:0}:host #table-header-placeholder.sticky{position:relative;display:table-row;opacity:0;overflow-x:hidden;-ms-overflow-style:none;scrollbar-width:none}:host #table-header-placeholder .table-cell{min-width:var(--cell-width-xxs, 180px);max-width:var(--cell-width-xxs, 180px);box-sizing:content-box;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);border-right:1px solid var(--color-gray-07);text-align:center;display:table-cell;vertical-align:middle}:host #table-header-placeholder .table-cell.table-last-cell{border-right:none}:host #table-header-placeholder .table-filler-cell{border-bottom:none;border-left:1px solid var(--color-gray-07)}:host .desktop-header-first-cell{display:table-cell;position:sticky;left:0;z-index:10}:host .mobile-sticky-row-header{display:block;position:sticky;left:0;background-color:var(--color-gray-01);border-bottom:1px solid var(--color-gray-02);padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06)}:host .table-row{display:table-row;background-color:white}:host .table-row .table-cell{min-width:var(--cell-width-xxs, 180px);max-width:var(--cell-width-xxs, 180px);box-sizing:content-box;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);border-right:1px solid var(--color-gray-02);border-bottom:1px solid var(--color-gray-02);text-align:center;display:table-cell;vertical-align:middle}:host .table-row .table-cell.table-last-cell{border-right:none}:host .table-row .table-filler-cell{border-left:1px solid var(--color-gray-02)}:host .table-cta-row{display:table-row;background-color:white}:host .table-cta-row .table-cell{min-width:var(--cell-width-xxs, 180px);max-width:var(--cell-width-xxs, 180px);box-sizing:content-box;padding:var(--ptc-element-spacing-06);border-right:1px solid var(--color-gray-02);border-bottom:1px solid var(--color-gray-02);text-align:center;display:table-cell;vertical-align:middle}:host .table-cta-row .table-cell.table-last-cell{border-right:none}:host .table-cta-row .table-filler-cell{border-left:1px solid var(--color-gray-02)}@media only screen and (min-width: 768px){:host .table-descriptor{max-width:768px;margin:auto}}@media only screen and (min-width: 992px){:host .scroll-button{height:100%;top:0}:host .scroll-button div ptc-para{display:none}:host .scroll-button div:hover{cursor:pointer}:host .scroll-button div:hover ptc-para{display:block}:host .scroll-button#previous-scroll-button{right:0;transform:translateX(100%)}:host #horizontal-scroll-shadow{display:block;position:absolute;top:0;left:0;height:100%;width:var(--ptc-element-spacing-06);background:linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 100%);z-index:1}:host #table-header.sticky{box-shadow:none}:host #table-header .table-cell{min-width:var(--cell-width-md, 225px);max-width:var(--cell-width-md, 225px)}:host #table-header .last-column-tooltip .tooltip{right:4px}:host #table-header-placeholder .table-cell{min-width:var(--cell-width-md, 225px);max-width:var(--cell-width-md, 225px)}:host #table-header-placeholder .last-column-tooltip .tooltip{right:-4px}:host .desktop-sticky-row-header{min-width:var(--desktop-row-header-cell-width-md, 275px);max-width:var(--desktop-row-header-cell-width-md, 275px);box-sizing:content-box;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);border-right:1px solid var(--color-gray-02);border-bottom:1px solid var(--color-gray-02);display:table-cell;vertical-align:middle;position:sticky;left:0;background-color:white;z-index:5}:host .desktop-sticky-row-header.desktop-alternate-row{background-color:var(--color-gray-01)}:host .desktop-header-first-cell{min-width:var(--desktop-row-header-cell-width-md, 275px);max-width:var(--desktop-row-header-cell-width-md, 275px);box-sizing:content-box;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);border-right:1px solid var(--color-gray-07);display:table-cell;vertical-align:middle;position:sticky;left:0;z-index:10;background:var(--color-gray-10)}:host .table-row .table-cell{min-width:var(--cell-width-md, 225px);max-width:var(--cell-width-md, 225px)}:host .table-row.desktop-alternate-row{background-color:var(--color-gray-01)}:host .mobile-sticky-row-header{display:none}:host .table-cta-row{display:table-row}:host .table-cta-row .table-cell{min-width:var(--cell-width-md, 225px);max-width:var(--cell-width-md, 225px)}:host .table-cta-row .last-column-tooltip .tooltip{right:-4px}}";
9
9
 
10
10
  const PtcPricingPackagingTable = class {
11
11
  constructor(hostRef) {
@@ -21,8 +21,14 @@ const PtcTextCopyWithBackground = class {
21
21
  }
22
22
  componentDidLoad() {
23
23
  var _a;
24
- if (this.hostEle.getAttribute('type') === 'hero-footer-cta') {
25
- (_a = this.hostEle.parentElement) === null || _a === void 0 ? void 0 : _a.classList.add('text-copy-footer-cta');
24
+ const centerWell = this.hostEle.closest('.center-well');
25
+ if (centerWell) {
26
+ const sectionCount = centerWell.querySelectorAll(':scope > section').length;
27
+ // Only add class if more than one <section> inside .center-well
28
+ // added this logic page where only one ptc-text-copy-with-background present ex: demo-ppc page
29
+ if (sectionCount > 1 && this.hostEle.getAttribute('type') === 'hero-footer-cta') {
30
+ (_a = this.hostEle.parentElement) === null || _a === void 0 ? void 0 : _a.classList.add('text-copy-footer-cta');
31
+ }
26
32
  }
27
33
  }
28
34
  render() {
@@ -88,7 +88,7 @@ export class EmbeddedForm {
88
88
  }
89
89
  render() {
90
90
  const formClass = this.isSubmitted ? "ptc-form-roll-up" : "";
91
- return (h(Host, null, h("div", { class: "ptc-container ptc-section-standard flex-adjustments" }, h("div", { class: "form-wrapper ptc-embedded-form" }, h("max-width-container", { "max-width": "277", breakpoint: 480 }, h("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "small" })), h("form", { onSubmit: event => this.handleSubmit(event), class: formClass }, h("div", { id: "not-me-link-id" }), h("div", { id: "not-me-additional-top", class: "not-me-additional-text" }), h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), h("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "company" }), h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email", "info-text": "Please include @ in the email address" }), h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country", "default-value": "USA" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" })), h("li", { class: "mdc-list-item", "data-value": "USA" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "USA")), h("li", { class: "mdc-list-item", "data-value": "Canada" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Canada")), h("li", { class: "mdc-list-item", "data-value": "China" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "China")))), h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), h("ptc-select", { label: "What information are you interested in?", "ptc-data-eloqua-name": "Inquiry_Reason", "field-name": "inquiryreason", "field-id": "contact-inquiry", "info-text": "info text example." }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" })), h("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), h("li", { class: "mdc-list-item", "data-value": "CAD" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), h("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), h("ptc-multi-select", null), h("ptc-textfield", { "field-id": "self-reporting", "label-text": "How can we help you?*", type: "text", "ptc-data-eloqua-name": "HowHearSelfReport", "ptc-max-length": "100", "field-name": "howhearselfreport" }), h("ptc-textfield", { type: "hidden", "ptc-data-eloqua-name": "test", "input-value": "test" }), h("ptc-form-checkbox", { label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ultricies risus. Praesent suscipit mauris vel augue facilisis, nec consequat ipsum placerat. Curabitur nisi elit, dignissim tincidunt tincidunt at, vehicula sit amet nisl. Maecenas sodales est vulputate ex feugiat tincidunt.", "checkbox-id": "policy1" }), h("div", { id: "not-me-additional-bottom", class: "not-me-additional-text" }), h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 12px; display:block; text-align:right;}" }, "Submit"))))));
91
+ return (h(Host, null, h("div", { class: "ptc-container ptc-section-standard flex-adjustments" }, h("div", { class: "form-wrapper ptc-embedded-form" }, h("max-width-container", { "max-width": "277", breakpoint: 480 }, h("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "small" })), h("form", { onSubmit: event => this.handleSubmit(event), class: formClass }, h("div", { id: "not-me-link-id" }), h("div", { id: "not-me-additional-top", class: "not-me-additional-text" }), h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), h("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "company" }), h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email", "info-text": "Please include @ in the email address" }), h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country", "default-value": "USA" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" })), h("li", { class: "mdc-list-item", "data-value": "USA" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "USA")), h("li", { class: "mdc-list-item", "data-value": "Canada" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Canada")), h("li", { class: "mdc-list-item", "data-value": "China" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "China")))), h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), h("ptc-select", { label: "What information are you interested in?", "ptc-data-eloqua-name": "Inquiry_Reason", "field-name": "inquiryreason", "field-id": "contact-inquiry", "info-text": "info text example." }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" })), h("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), h("li", { class: "mdc-list-item", "data-value": "CAD" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), h("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), h("ptc-multi-select", null), h("ptc-textfield", { "field-id": "self-reporting", "label-text": "How can we help you?*", type: "text", "ptc-data-eloqua-name": "HowHearSelfReport", "ptc-max-length": "100", "field-name": "howhearselfreport" }), h("ptc-textfield", { type: "hidden", "ptc-data-eloqua-name": "test", "input-value": "test" }), h("ptc-textfield", { "field-id": "description", "field-name": "description", "label-text": "Description", type: "textarea", "placeholder-text": "Enter your description here..." }), h("ptc-form-checkbox", { label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ultricies risus. Praesent suscipit mauris vel augue facilisis, nec consequat ipsum placerat. Curabitur nisi elit, dignissim tincidunt tincidunt at, vehicula sit amet nisl. Maecenas sodales est vulputate ex feugiat tincidunt.", "checkbox-id": "policy1" }), h("div", { id: "not-me-additional-bottom", class: "not-me-additional-text" }), h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 12px; display:block; text-align:right;}" }, "Submit"))))));
92
92
  }
93
93
  static get is() { return "embedded-form"; }
94
94
  static get originalStyleUrls() {
@@ -108,14 +108,11 @@ export class PtcCountdown {
108
108
  this.calculateTimeLeft();
109
109
  this.timer = window.setInterval(() => this.calculateTimeLeft(), 1000);
110
110
  }
111
- shouldUse12HourFormat() {
112
- if (this.displayLocale === 'en') {
113
- return true;
114
- }
115
- else if (this.useHourFormat !== undefined) {
116
- return this.useHourFormat;
117
- }
118
- }
111
+ // private shouldUse12HourFormat() : boolean {
112
+ // if(this.useHourFormat !== undefined){
113
+ // return this.useHourFormat
114
+ // }
115
+ // }
119
116
  detectLocaleFromURL() {
120
117
  const url = window.location.href;
121
118
  if (url.includes('/cn/')) {
@@ -149,14 +146,14 @@ export class PtcCountdown {
149
146
  const formattedEventTime = dayjs(this.transformDate(this.eventTime))
150
147
  .utcOffset(this.getOffsetFromAbbr(this.eventTimeZone), true)
151
148
  .format('YYYY-MM-DD HH:mm');
152
- const hour12 = this.shouldUse12HourFormat();
149
+ //const hour12 = this.shouldUse12HourFormat();
153
150
  return (h("div", { class: "countdown-outer" }, this.countdownTitle && h("div", { class: "event-name" }, this.countdownTitle), !this.isExpired ? (h("div", { id: "CDOutput", class: "countdown" }, h("div", { class: "day" }, h("div", null, days), h("span", null, this.daysText)), h("div", { class: "hours" }, h("div", null, hours), h("span", null, this.hoursText)), h("div", { class: "minutes" }, h("div", null, minutes), h("span", null, this.minutesText)), h("div", { class: "seconds" }, h("div", null, seconds), h("span", null, this.secondsText)))) : (h("div", { class: "expired" }, `${this.expiredText} ${formattedEventTime} ${this.eventTimeZone}`)), h("div", { class: "cd-event-date" }, new Date(this.eventTime).toLocaleDateString(this.displayLocale, {
154
151
  month: 'long',
155
152
  day: 'numeric',
156
153
  year: 'numeric',
157
154
  hour: '2-digit',
158
155
  minute: '2-digit',
159
- hour12: hour12,
156
+ hour12: this.useHourFormat,
160
157
  }), ' ', "(", this.eventTimeZone, ")")));
161
158
  }
162
159
  static get is() { return "ptc-countdown"; }
@@ -31,11 +31,9 @@ export class PtcImg {
31
31
  opacity: '1',
32
32
  transition: 'opacity 0.5s ease-in-out',
33
33
  } }), h("div", { class: "medium-quality", style: {
34
- backgroundImage: `url(${this.bgSrcMedium})`,
35
34
  opacity: '0',
36
35
  transition: 'opacity 0.5s ease-in-out',
37
36
  } }), h("div", { class: "high-quality", style: {
38
- backgroundImage: `url(${this.bgSrcHigh})`,
39
37
  opacity: '0',
40
38
  transition: 'opacity 0.5s ease-in-out',
41
39
  } }), this.imageType == 'smart-bg' ? h("slot", null) : null)));
@@ -81,12 +79,14 @@ export class PtcImg {
81
79
  setTimeout(() => {
82
80
  const mediumLayer = this.el.querySelector('.medium-quality');
83
81
  if (mediumLayer) {
82
+ mediumLayer.style.backgroundImage = `url(${this.bgSrcMedium})`;
84
83
  mediumLayer.style.opacity = '1';
85
84
  console.log('Medium-quality image is now visible.');
86
85
  }
87
86
  setTimeout(() => {
88
87
  const highLayer = this.el.querySelector('.high-quality');
89
88
  if (highLayer) {
89
+ highLayer.style.backgroundImage = `url(${this.bgSrcHigh})`;
90
90
  highLayer.style.opacity = '1';
91
91
  console.log('High-quality image is now visible.');
92
92
  }
@@ -73,7 +73,7 @@ ptc-link, ptc-square-card,
73
73
  height: var(--sticky-stop-at, 50px);
74
74
  }
75
75
  :host #table-container {
76
- width: 100%;
76
+ width: calc(100% + 1px);
77
77
  overflow-x: auto;
78
78
  border-radius: var(--ptc-border-radius-standard);
79
79
  box-shadow: var(--ptc-shadow-x-small);
@@ -81,7 +81,7 @@ ptc-link, ptc-square-card,
81
81
  }
82
82
  :host #table-body {
83
83
  width: 100%;
84
- overflow-x: scroll;
84
+ overflow-x: auto;
85
85
  position: relative;
86
86
  }
87
87
  :host .scroll-button {
@@ -277,10 +277,9 @@ export class PtcSelect {
277
277
  if (this.defaultValue)
278
278
  this.setValue();
279
279
  this.defaultSelect.listen('MDCSelect:change', () => {
280
- const select = new MDCSelect(this.el.querySelector('.mdc-select'));
281
- if (this.selectedValue !== select.value) {
282
- this.valueChange.emit(select.value);
283
- this.selectedValue = select.value;
280
+ if (this.selectedValue !== this.defaultSelect.value) {
281
+ this.valueChange.emit(this.defaultSelect.value);
282
+ this.selectedValue = this.defaultSelect.value;
284
283
  if (this.fieldId === 'contact-country') {
285
284
  const countryCode = this.selectedValue ? this.map[this.selectedValue] : '';
286
285
  const telField = document.querySelector('ptc-textfield[field-id="contact-phone"]');
@@ -293,6 +292,11 @@ export class PtcSelect {
293
292
  this.addKeyboardAccessibility();
294
293
  this.setupFocusHandlers();
295
294
  }
295
+ disconnectedCallback() {
296
+ if (this.defaultSelect) {
297
+ this.defaultSelect.destroy();
298
+ }
299
+ }
296
300
  addKeyboardAccessibility() {
297
301
  const selectAnchor = this.el.querySelector('.mdc-select__anchor');
298
302
  const menu = this.el.querySelector('.mdc-select__menu');
@@ -13,8 +13,14 @@ export class PtcTextCopyWithBackground {
13
13
  }
14
14
  componentDidLoad() {
15
15
  var _a;
16
- if (this.hostEle.getAttribute('type') === 'hero-footer-cta') {
17
- (_a = this.hostEle.parentElement) === null || _a === void 0 ? void 0 : _a.classList.add('text-copy-footer-cta');
16
+ const centerWell = this.hostEle.closest('.center-well');
17
+ if (centerWell) {
18
+ const sectionCount = centerWell.querySelectorAll(':scope > section').length;
19
+ // Only add class if more than one <section> inside .center-well
20
+ // added this logic page where only one ptc-text-copy-with-background present ex: demo-ppc page
21
+ if (sectionCount > 1 && this.hostEle.getAttribute('type') === 'hero-footer-cta') {
22
+ (_a = this.hostEle.parentElement) === null || _a === void 0 ? void 0 : _a.classList.add('text-copy-footer-cta');
23
+ }
18
24
  }
19
25
  }
20
26
  render() {
@@ -3810,4 +3810,42 @@ ptc-link, ptc-square-card,
3810
3810
  }
3811
3811
  .ptc-text-field.email-signup .mdc-text-field__input::placeholder {
3812
3812
  font-size: var(--ptc-font-size-small);
3813
+ }
3814
+ .ptc-text-field textarea.mdc-text-field__input {
3815
+ min-height: 56px;
3816
+ max-height: 200px;
3817
+ overflow-y: auto;
3818
+ font-size: var(--ptc-font-size-xx-small);
3819
+ width: 100%;
3820
+ box-sizing: border-box;
3821
+ resize: vertical;
3822
+ display: block;
3823
+ margin: 0;
3824
+ position: static;
3825
+ padding-right: 8px;
3826
+ line-height: var(--ptc-font-size-small);
3827
+ }
3828
+ .ptc-text-field .mdc-text-field--outlined {
3829
+ height: 34px;
3830
+ width: 273px;
3831
+ padding-left: 8px;
3832
+ padding-right: 8px;
3833
+ }
3834
+ .ptc-text-field .mdc-text-field--outlined .mdc-notched-outline__trailing {
3835
+ border-radius: 0px !important;
3836
+ }
3837
+ .ptc-text-field .mdc-text-field--outlined .mdc-notched-outline__leading {
3838
+ border-radius: 0px !important;
3839
+ }
3840
+ .ptc-text-field .mdc-text-field--outlined:has(textarea.mdc-text-field__input) {
3841
+ min-height: 34px;
3842
+ height: auto;
3843
+ display: flex;
3844
+ flex-direction: column;
3845
+ align-items: stretch;
3846
+ }
3847
+ .ptc-text-field .mdc-text-field:has(textarea.mdc-text-field__input) {
3848
+ padding-right: 1px;
3849
+ padding-top: 2px;
3850
+ padding-bottom: 2px;
3813
3851
  }
@@ -249,9 +249,11 @@ export class PtcTextfield {
249
249
  h("div", { class: `mdc-text-field mdc-text-field--outlined mdc-text-field--no-label
250
250
  ${this.fieldId === 'contact-phone' ? 'intl-phone-adjustments' : ''}`, ref: mdcTextfield => {
251
251
  this.mdcTextfield = mdcTextfield;
252
- } }, h("span", { class: "mdc-notched-outline ptc-textfield-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("input", Object.assign({}, (this.disabled ? { disabled: true } : null), { ref: customInput => {
252
+ } }, h("span", { class: "mdc-notched-outline ptc-textfield-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), this.type === 'textarea' ? (h("textarea", Object.assign({}, (this.disabled ? { disabled: true } : null), { ref: customInput => {
253
253
  this.customInput = customInput;
254
- }, id: this.fieldId }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxlength: this.ptcMaxLength } : null), { "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue, name: this.fieldName }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { placeholder: this.placeholderText }))),
254
+ }, id: this.fieldId, class: this.getInputClassName() }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxLength: this.ptcMaxLength } : null), { "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue, name: this.fieldName, placeholder: this.placeholderText }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { onInput: e => this.handleInput(e) }))) : (h("input", Object.assign({}, (this.disabled ? { disabled: true } : null), { ref: customInput => {
255
+ this.customInput = customInput;
256
+ }, id: this.fieldId }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxLength: this.ptcMaxLength } : null), { "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue, name: this.fieldName }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { placeholder: this.placeholderText })))),
255
257
  h("div", { class: `mdc-text-field-helper-line
256
258
  ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.fieldName }, h("svg", { class: "input-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.infoText ? h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--info-msg" }, this.infoText) : null, this.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null),
257
259
  /* Alert message */
@@ -520,11 +522,14 @@ export class PtcTextfield {
520
522
  "type": "unknown",
521
523
  "mutable": false,
522
524
  "complexType": {
523
- "original": "(input: HTMLInputElement) => string",
524
- "resolved": "(input: HTMLInputElement) => string",
525
+ "original": "(input: HTMLInputElement | HTMLTextAreaElement) => string",
526
+ "resolved": "(input: HTMLInputElement | HTMLTextAreaElement) => string",
525
527
  "references": {
526
528
  "HTMLInputElement": {
527
529
  "location": "global"
530
+ },
531
+ "HTMLTextAreaElement": {
532
+ "location": "global"
528
533
  }
529
534
  }
530
535
  },