@ptcwebops/ptcw-design 3.0.2 → 3.0.3
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/embedded-form.cjs.entry.js +108 -0
- package/dist/cjs/footer-form.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/max-width-container.cjs.entry.js +54 -0
- package/dist/cjs/ptc-button.cjs.entry.js +52 -0
- package/dist/cjs/ptc-data-lookup.cjs.entry.js +496 -0
- package/dist/cjs/{embedded-form_9.cjs.entry.js → ptc-form-checkbox_3.cjs.entry.js} +12 -804
- package/dist/cjs/ptc-form.cjs.entry.js +1 -1
- package/dist/cjs/ptc-modal-quiz.cjs.entry.js +1 -1
- package/dist/cjs/ptc-pricing-packaging-table.cjs.entry.js +7 -5
- package/dist/cjs/ptc-quote.cjs.entry.js +3 -2
- package/dist/cjs/ptc-spacer.cjs.entry.js +38 -0
- package/dist/cjs/ptc-title.cjs.entry.js +78 -0
- package/dist/cjs/ptc-value-led-card.cjs.entry.js +21 -0
- package/dist/cjs/ptc-value-led-content-highlight.cjs.entry.js +19 -0
- package/dist/cjs/ptc-value-led-content.cjs.entry.js +19 -0
- package/dist/cjs/ptc-value-led-intro.cjs.entry.js +20 -0
- package/dist/cjs/ptc-value-led-layout.cjs.entry.js +2 -2
- package/dist/cjs/ptc-value-led-speed-bump.cjs.entry.js +32 -0
- package/dist/cjs/ptcw-design.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +5 -1
- package/dist/collection/components/organism-bundles/form/embedded-form/embedded-form.js +1 -1
- package/dist/collection/components/organism-bundles/form/footer-form/footer-form.js +1 -1
- package/dist/collection/components/organism-bundles/form/ptc-form/ptc-form.js +1 -1
- package/dist/collection/components/ptc-button/ptc-button.css +42 -0
- package/dist/collection/components/ptc-button/ptc-button.js +20 -1
- package/dist/collection/components/ptc-modal-quiz/ptc-modal-quiz.css +6 -1
- package/dist/collection/components/ptc-pricing-packaging-table/ptc-pricing-packaging-table.js +7 -5
- package/dist/collection/components/ptc-quote/ptc-quote.css +28 -0
- package/dist/collection/components/ptc-quote/ptc-quote.js +4 -3
- package/dist/collection/components/ptc-select/ptc-select.js +4 -4
- package/dist/collection/components/ptc-textfield/ptc-textfield.js +12 -16
- package/dist/collection/components/ptc-value-led-card/ptc-value-led-card.css +36 -0
- package/dist/collection/components/ptc-value-led-card/ptc-value-led-card.js +60 -0
- package/dist/collection/components/ptc-value-led-content/ptc-value-led-content.css +12 -0
- package/dist/collection/components/ptc-value-led-content/ptc-value-led-content.js +18 -0
- package/dist/collection/components/ptc-value-led-content-highlight/ptc-value-led-content-highlight.css +31 -0
- package/dist/collection/components/ptc-value-led-content-highlight/ptc-value-led-content-highlight.js +18 -0
- package/dist/collection/components/ptc-value-led-intro/ptc-value-led-intro.css +16 -0
- package/dist/collection/components/ptc-value-led-intro/ptc-value-led-intro.js +42 -0
- package/dist/collection/components/ptc-value-led-layout/ptc-value-led-layout.css +22 -3
- package/dist/collection/components/ptc-value-led-layout/ptc-value-led-layout.js +1 -1
- package/dist/collection/components/ptc-value-led-speed-bump/ptc-value-led-speed-bump.css +63 -0
- package/dist/collection/components/ptc-value-led-speed-bump/ptc-value-led-speed-bump.js +97 -0
- package/dist/custom-elements/index.d.ts +30 -6
- package/dist/custom-elements/index.js +131 -568
- package/dist/esm/embedded-form.entry.js +104 -0
- package/dist/esm/footer-form.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/max-width-container.entry.js +50 -0
- package/dist/esm/ptc-button.entry.js +48 -0
- package/dist/esm/ptc-data-lookup.entry.js +492 -0
- package/dist/esm/{embedded-form_9.entry.js → ptc-form-checkbox_3.entry.js} +14 -800
- package/dist/esm/ptc-form.entry.js +1 -1
- package/dist/esm/ptc-modal-quiz.entry.js +1 -1
- package/dist/esm/ptc-pricing-packaging-table.entry.js +7 -5
- package/dist/esm/ptc-quote.entry.js +3 -2
- package/dist/esm/ptc-spacer.entry.js +34 -0
- package/dist/esm/ptc-title.entry.js +74 -0
- package/dist/esm/ptc-value-led-card.entry.js +17 -0
- package/dist/esm/ptc-value-led-content-highlight.entry.js +15 -0
- package/dist/esm/ptc-value-led-content.entry.js +15 -0
- package/dist/esm/ptc-value-led-intro.entry.js +16 -0
- package/dist/esm/ptc-value-led-layout.entry.js +2 -2
- package/dist/esm/ptc-value-led-speed-bump.entry.js +28 -0
- package/dist/esm/ptcw-design.js +1 -1
- package/dist/ptcw-design/p-036234e7.entry.js +1 -0
- package/dist/ptcw-design/{p-ed2cc9da.entry.js → p-08ed517e.entry.js} +1 -1
- package/dist/ptcw-design/p-137ddeeb.entry.js +1 -0
- package/dist/ptcw-design/p-18dfffd3.entry.js +359 -0
- package/dist/ptcw-design/p-236073e1.entry.js +1 -0
- package/dist/ptcw-design/p-2e4af711.entry.js +1 -0
- package/dist/ptcw-design/p-33c054ff.entry.js +1 -0
- package/dist/ptcw-design/{p-f00b4b73.entry.js → p-3ca391ab.entry.js} +1 -1
- package/dist/ptcw-design/p-3faffecb.entry.js +1 -0
- package/dist/ptcw-design/p-49f06645.entry.js +1 -0
- package/dist/ptcw-design/p-641bd525.entry.js +1 -0
- package/dist/ptcw-design/p-752f779c.entry.js +1 -0
- package/dist/ptcw-design/p-7aa6b7e5.entry.js +1 -0
- package/dist/ptcw-design/p-7c079ff8.entry.js +1 -0
- package/dist/ptcw-design/p-92bbd407.entry.js +1 -0
- package/dist/ptcw-design/p-9a36f7a3.entry.js +1 -0
- package/dist/ptcw-design/p-d2c400e2.entry.js +1 -0
- package/dist/ptcw-design/p-f1c77113.entry.js +1 -0
- package/dist/ptcw-design/ptcw-design.css +2 -2
- package/dist/ptcw-design/ptcw-design.esm.js +1 -1
- package/dist/types/components/ptc-button/ptc-button.d.ts +4 -0
- package/dist/types/components/ptc-pricing-packaging-table/ptc-pricing-packaging-table.d.ts +2 -0
- package/dist/types/components/ptc-quote/ptc-quote.d.ts +1 -1
- package/dist/types/components/ptc-select/ptc-select.d.ts +1 -1
- package/dist/types/components/ptc-textfield/ptc-textfield.d.ts +1 -1
- package/dist/types/components/ptc-value-led-card/ptc-value-led-card.d.ts +5 -0
- package/dist/types/components/ptc-value-led-content/ptc-value-led-content.d.ts +3 -0
- package/dist/types/components/ptc-value-led-content-highlight/ptc-value-led-content-highlight.d.ts +3 -0
- package/dist/types/components/ptc-value-led-intro/ptc-value-led-intro.d.ts +4 -0
- package/dist/types/components/ptc-value-led-speed-bump/ptc-value-led-speed-bump.d.ts +10 -0
- package/dist/types/components.d.ts +91 -75
- package/package.json +1 -1
- package/readme.md +1 -1
- package/dist/cjs/ptc-pricing-table.cjs.entry.js +0 -536
- package/dist/collection/components/ptc-pricing-table/ptc-pricing-table.css +0 -278
- package/dist/collection/components/ptc-pricing-table/ptc-pricing-table.js +0 -680
- package/dist/esm/ptc-pricing-table.entry.js +0 -532
- package/dist/ptcw-design/p-220f86c0.entry.js +0 -1
- package/dist/ptcw-design/p-4a865061.entry.js +0 -1
- package/dist/ptcw-design/p-b0b4ebd6.entry.js +0 -359
- package/dist/ptcw-design/p-c20538ec.entry.js +0 -1
- package/dist/ptcw-design/p-f2621425.entry.js +0 -1
- package/dist/ptcw-design/p-f29c71fe.entry.js +0 -1
- package/dist/types/components/ptc-pricing-table/ptc-pricing-table.d.ts +0 -110
- package/dist/types/utils/eloqua.d.ts +0 -8
|
@@ -1,684 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement
|
|
2
|
-
|
|
3
|
-
const embeddedFormCss = ":host{display:block}.flex-adjustments{display:flex;justify-content:center}@media only screen and (min-width: 768px){.flex-adjustments{justify-content:flex-end}}.embedded-form-container{background-color:#142D48}.ptc-embedded-form.form-wrapper{width:433px;display:flex;border-radius:3px;background:#FFF;box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.16);flex-direction:column;align-items:center;padding:24px 0px;justify-content:center}@keyframes rollUp{from{height:auto;opacity:1}to{height:0;opacity:0}}.ptc-form-roll-up{animation:rollUp 1s forwards;}";
|
|
4
|
-
|
|
5
|
-
const EmbeddedForm = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.formData = {
|
|
9
|
-
email: '',
|
|
10
|
-
firstName: '',
|
|
11
|
-
lastName: '',
|
|
12
|
-
company: '',
|
|
13
|
-
country: '',
|
|
14
|
-
phone: '',
|
|
15
|
-
inquiryReason: '',
|
|
16
|
-
howhearselfreport: '',
|
|
17
|
-
policyChecked: false,
|
|
18
|
-
};
|
|
19
|
-
this.isSubmitted = false;
|
|
20
|
-
}
|
|
21
|
-
componentDidLoad() {
|
|
22
|
-
this.onDataLookup();
|
|
23
|
-
this.formButton = this.el.querySelector('.form-submit');
|
|
24
|
-
this.formButton.addEventListener('click', this.handleSubmit.bind(this));
|
|
25
|
-
//get Email
|
|
26
|
-
this.emailEle = this.el.querySelector('ptc-textfield[field-id="contact-email"]');
|
|
27
|
-
this.firstNameEle = this.el.querySelector('ptc-textfield[field-id="contact-firstname"]');
|
|
28
|
-
this.lastNameEle = this.el.querySelector('ptc-textfield[field-id="contact-lastname"]');
|
|
29
|
-
this.companyEle = this.el.querySelector('ptc-textfield[field-id="company"]');
|
|
30
|
-
this.phoneEle = this.el.querySelector('ptc-textfield[field-id="contact-phone"]');
|
|
31
|
-
this.countryEle = this.el.querySelector('ptc-select[field-id="contact-country"]');
|
|
32
|
-
this.inquiryreasonEle = this.el.querySelector('ptc-select[field-id="contact-inquiry"]');
|
|
33
|
-
this.howhearselfreport = this.el.querySelector('ptc-textfield[field-id="self-reporting"]');
|
|
34
|
-
this.policy1 = this.el.querySelector('ptc-form-checkbox[checkbox-id="policy1"]');
|
|
35
|
-
}
|
|
36
|
-
//handle dataLookup
|
|
37
|
-
onDataLookup() {
|
|
38
|
-
const dataLookupElement = this.el.closest('ptc-data-lookup');
|
|
39
|
-
if (dataLookupElement) {
|
|
40
|
-
console.log('Perform Data Lookup...');
|
|
41
|
-
dataLookupElement.performDataLookup();
|
|
42
|
-
}
|
|
43
|
-
else {
|
|
44
|
-
console.log('No Data Lookup...');
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
handleInputChange(field, value) {
|
|
48
|
-
this.formData = Object.assign(Object.assign({}, this.formData), { [field]: value });
|
|
49
|
-
}
|
|
50
|
-
handleSubmit(event) {
|
|
51
|
-
event.preventDefault();
|
|
52
|
-
this.formData.email = this.emailEle.inputValue;
|
|
53
|
-
this.formData.firstName = this.firstNameEle.inputValue;
|
|
54
|
-
this.formData.lastName = this.lastNameEle.inputValue;
|
|
55
|
-
this.formData.company = this.companyEle.inputValue;
|
|
56
|
-
this.formData.phone = this.phoneEle.inputValue;
|
|
57
|
-
this.formData.country = this.countryEle.selectedValue;
|
|
58
|
-
this.formData.inquiryReason = this.inquiryreasonEle.selectedValue;
|
|
59
|
-
this.formData.howhearselfreport = this.howhearselfreport.inputValue;
|
|
60
|
-
this.formData.policyChecked = this.policy1.isChecked;
|
|
61
|
-
//what if the checkbox is not required, I need to hide the checkbox in this case
|
|
62
|
-
if (this.formData.policyChecked) {
|
|
63
|
-
if (this.isValid()) {
|
|
64
|
-
const formSubmitEvent = new CustomEvent('formSubmit', {
|
|
65
|
-
detail: this.formData,
|
|
66
|
-
bubbles: true,
|
|
67
|
-
});
|
|
68
|
-
this.el.dispatchEvent(formSubmitEvent);
|
|
69
|
-
this.isSubmitted = true;
|
|
70
|
-
console.log('Form Submitted: ' + this.formData.email, this.formData.firstName, this.formData.lastName, this.formData.company, this.formData.phone, this.formData.country, this.formData.inquiryReason, this.formData.howhearselfreport, this.formData.policyChecked);
|
|
71
|
-
}
|
|
72
|
-
else {
|
|
73
|
-
console.log('Form validation failed');
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
else {
|
|
77
|
-
this.policy1.validateCheckbox();
|
|
78
|
-
console.log('Warning: Checkbox is not checked. This field is required');
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
isValid() {
|
|
82
|
-
const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked } = this.formData;
|
|
83
|
-
const invalidLength = document.querySelectorAll('.invalid-field').length;
|
|
84
|
-
// console.log('invalid fields length: ' + invalidLength), check the select field
|
|
85
|
-
return (email !== '' &&
|
|
86
|
-
phone !== '' &&
|
|
87
|
-
firstName !== '' &&
|
|
88
|
-
lastName !== '' &&
|
|
89
|
-
company !== '' &&
|
|
90
|
-
country !== '' &&
|
|
91
|
-
inquiryReason !== '' &&
|
|
92
|
-
howhearselfreport != '' &&
|
|
93
|
-
policyChecked &&
|
|
94
|
-
invalidLength === 0);
|
|
95
|
-
}
|
|
96
|
-
render() {
|
|
97
|
-
const formClass = this.isSubmitted ? "ptc-form-roll-up" : "";
|
|
98
|
-
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", name: "firstname" }), h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", name: "lastname" }), h("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", name: "company-field" }), h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", name: "email" }), h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", name: "country" }, 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", name: "phone" }), h("ptc-select", { label: "What information are you interested in?*", "ptc-data-eloqua-name": "Inquiry_Reason", name: "inquiryreason", "field-id": "contact-inquiry" }, 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-textfield", { "field-id": "self-reporting", "label-text": "How can we help you?*", type: "text", "ptc-data-eloqua-name": "HowHearSelfReport", "ptc-max-length": "100", name: "howhearselfreport" }), h("ptc-textfield", { type: "hidden", "ptc-data-eloqua-name": "test", "input-value": "test" }), h("ptc-form-checkbox", { label: "I agree to the policy", "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: 40px; display:block; text-align:right;}" }, "Submit"))))));
|
|
99
|
-
}
|
|
100
|
-
get el() { return getElement(this); }
|
|
101
|
-
};
|
|
102
|
-
EmbeddedForm.style = embeddedFormCss;
|
|
103
|
-
|
|
104
|
-
const maxWidthContainerCss = ":host{display:block}:host(.left){margin:auto auto auto 0}:host(.right){margin:auto 0 auto auto}:host(.center){margin:0 auto}";
|
|
105
|
-
|
|
106
|
-
const MaxWidthContainer = class {
|
|
107
|
-
constructor(hostRef) {
|
|
108
|
-
registerInstance(this, hostRef);
|
|
109
|
-
this.maxWidthP = undefined;
|
|
110
|
-
this.maxWidth = undefined;
|
|
111
|
-
this.breakpoint = 768;
|
|
112
|
-
this.contentAlign = 'center';
|
|
113
|
-
this.styles = undefined;
|
|
114
|
-
}
|
|
115
|
-
componentDidLoad() {
|
|
116
|
-
this.handleResize();
|
|
117
|
-
window.addEventListener('resize', this.handleResize.bind(this));
|
|
118
|
-
}
|
|
119
|
-
disconnectedCallback() {
|
|
120
|
-
window.removeEventListener('resize', this.handleResize);
|
|
121
|
-
}
|
|
122
|
-
render() {
|
|
123
|
-
const classMap = this.getCssClassMap();
|
|
124
|
-
return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("slot", null)));
|
|
125
|
-
}
|
|
126
|
-
getCssClassMap() {
|
|
127
|
-
return {
|
|
128
|
-
[this.contentAlign]: true,
|
|
129
|
-
};
|
|
130
|
-
}
|
|
131
|
-
handleResize() {
|
|
132
|
-
// const selectedContainer = this.el.querySelector('.max-width-container');
|
|
133
|
-
if (this.el) {
|
|
134
|
-
if (window.innerWidth >= this.breakpoint) {
|
|
135
|
-
if (this.maxWidthP) {
|
|
136
|
-
this.el.style.maxWidth = `${this.maxWidthP}%`;
|
|
137
|
-
}
|
|
138
|
-
else {
|
|
139
|
-
this.el.style.maxWidth = `${this.maxWidth}px`;
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
else {
|
|
143
|
-
this.el.style.maxWidth = 'initial';
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
get el() { return getElement(this); }
|
|
148
|
-
};
|
|
149
|
-
MaxWidthContainer.style = maxWidthContainerCss;
|
|
150
|
-
|
|
151
|
-
const ptcButtonCss = "button.disabled{pointer-events:none;opacity:0.6}button{background-color:var(--color-gray-10);display:inline-block;border-style:solid;border-width:1px;white-space:normal;position:relative;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;cursor:pointer;padding:9.4px 17.5px;border-radius:var(--ptc-border-radius-standard)}button.reveal-down .content{transition:opacity var(--ptc-transition-medium) var(--ptc-ease-out);opacity:0;font-size:var(--ptc-font-size-xx-small)}button.reveal-down .icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center;align-content:center;height:16px}button.reveal-down .icon-wrapper .icon{transition:top var(--ptc-transition-fast) var(--ptc-ease-out);position:absolute;display:inline-block;top:-12px}button:hover.reveal-down .content{opacity:1}button:hover.reveal-down .icon-wrapper .icon{top:4px}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-ease-inout);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:var(--ptc-line-height-densest)}button.left{text-align:left}button.right{text-align:right}button.center{text-align:center}.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-gray-10);background-image:linear-gradient(285deg, var(--color-gray-10) 155%, var(--color-gray-07) 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 var(--color-green-07);background-image:linear-gradient(285deg, var(--color-green-07) 155%, var(--color-green-07) 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-gray-10);background-image:linear-gradient(to right, var(--color-white), var(--color-gray-02), var(--color-gray-01))}.offwhite:hover{box-shadow:var(--ptc-shadow-x-large)}.offwhite span{color:var(--color-gray-10)}.legacy-green{margin-left:10px;padding:10px 20px;margin-bottom:var(--ptc-element-spacing-01);margin-top:var(--ptc-element-spacing-01);box-shadow:var(--ptc-shadow-large);border:solid 2.5px var(--color-green-08);background-image:linear-gradient(to right, var(--color-green-06), var(--color-green-08))}.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-green-08), var(--color-green-06));opacity:0;transition:opacity var(--ptc-transition-x-slow) var(--ptc-ease-inout);border-radius:2px}.legacy-green:hover{box-shadow:var(--ptc-shadow-x-large)}.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-x-small)}@media only screen and (min-width: 768px){.legacy-green span{font-size:var(--ptc-font-size-small);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;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:9.4px 17.5px;border-radius:var(--ptc-border-radius-standard);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 var(--ptc-ease-inout) var(--ptc-transition-medium);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))}a.left{text-align:left}a.right{text-align:right}a.center{text-align:center}.nav{font-family:var(--ptc-font-latin);background-color:var(--color-gray-10);border-radius:var(--ptc-border-radius-standard);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:var(--ptc-font-size-xx-small);font-stretch:100%;font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-loose);list-style:none;padding:3px var(--ptc-element-spacing-04);position:relative;text-align:center;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;transition:background-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.nav:focus{outline:3px solid var(--color-blue-07);outline-offset:2px}.nav:hover{background-color:var(--color-gray-12)}.ptc-primary,.ptc-quaternary,.ptc-secondary,.ptc-tertiary,.icon-toggle{padding:var(--ptc-font-size-xx-small) var(--ptc-font-size-medium);transition:background-color var(--ptc-ease-inout) var(--ptc-transition-medium);line-height:20px}.ptc-primary.disabled,.ptc-quaternary.disabled,.ptc-secondary.disabled,.ptc-tertiary.disabled,.icon-toggle.disabled{pointer-events:none;border-color:var(--color-gray-03);background:var(--color-gray-02)}.ptc-primary.disabled span,.ptc-quaternary.disabled span,.ptc-secondary.disabled span,.ptc-tertiary.disabled span,.icon-toggle.disabled span{color:var(--color-gray-03)}.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]),.icon-toggle.disabled ::slotted([slot=slot-after-text]){fill:var(--color-gray-03) !important}.ptc-primary:focus,.ptc-quaternary:focus,.ptc-secondary:focus,.ptc-tertiary:focus,.icon-toggle:focus{outline:3px solid var(--color-blue-07);outline-offset:2px}.ptc-primary span,.ptc-quaternary span,.ptc-secondary span,.ptc-tertiary span,.icon-toggle span{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-densest);letter-spacing:normal}.ptc-primary{background:var(--color-gray-12);border:2px solid var(--color-green-07);border-radius:var(--ptc-border-radius-standard)}.ptc-primary:hover{background-color:var(--color-gray-10)}.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:var(--color-gray-12);border:2px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-standard)}.ptc-secondary:hover{background-color:var(--color-gray-10)}.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-gray-10);border-radius:var(--ptc-border-radius-standard)}.ptc-tertiary:hover{background-color:var(--color-gray-02)}.ptc-tertiary:active{background-color:var(--color-gray-03)}.ptc-tertiary span{color:var(--color-gray-10)}.ptc-tertiary ::slotted([slot=slot-after-text]){fill:var(--color-gray-10) !important}.ptc-quaternary{background:var(--color-green-07);border:2px solid var(--color-green-07);border-radius:var(--ptc-border-radius-standard)}.ptc-quaternary:hover{background-color:var(--color-green-08)}.ptc-quaternary:active{background-color:var(--color-green-09)}.ptc-quaternary span{color:var(--color-white)}.ptc-quaternary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}.icon-toggle{background:var(--color-white);border:1px solid var(--color-gray-10);border-radius:var(--ptc-border-radius-standard);padding:0;height:2.125rem;width:2.125rem;box-shadow:var(--ptc-shadow-medium)}.icon-toggle:hover{background-color:var(--color-gray-02)}.icon-toggle:active{background-color:var(--color-gray-03)}.icon-toggle.active{background-color:var(--color-gray-04)}.icon-toggle.active:hover{background-color:var(--color-gray-05)}.icon-toggle.active:active{background-color:var(--color-gray-03)}.icon-toggle:focus{outline:2px solid var(--color-blue-07);outline-offset:1px}.icon-toggle span{color:var(--color-gray-10);padding:0}.icon-toggle ::slotted([slot=slot-after-text]){fill:var(--color-gray-10) !important}.icon-toggle ::slotted(icon-asset){display:block;margin:auto;height:18px;width:18px}.clear-search{border:none;padding:0px;line-height:var(----ptc-line-height-densest);background-color:transparent}.clear-search:hover{text-decoration:underline;text-decoration-color:var(--color-white)}.clear-search span{color:var(--color-white);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-x-small);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}";
|
|
152
|
-
|
|
153
|
-
const PtcButton = class {
|
|
154
|
-
constructor(hostRef) {
|
|
155
|
-
registerInstance(this, hostRef);
|
|
156
|
-
this.clickEvent = createEvent(this, "clickEvent", 7);
|
|
157
|
-
this.disabled = false;
|
|
158
|
-
this.active = false;
|
|
159
|
-
this.type = 'button';
|
|
160
|
-
this.color = 'ptc-primary';
|
|
161
|
-
this.iconAnimation = '';
|
|
162
|
-
this.iconPosition = 'icon-right';
|
|
163
|
-
this.linkHref = undefined;
|
|
164
|
-
this.linkTitle = undefined;
|
|
165
|
-
this.target = '_self';
|
|
166
|
-
this.rel = undefined;
|
|
167
|
-
this.tabNav = 0;
|
|
168
|
-
this.styles = undefined;
|
|
169
|
-
this.textAlign = undefined;
|
|
170
|
-
}
|
|
171
|
-
clickEventHandler() {
|
|
172
|
-
this.clickEvent.emit();
|
|
173
|
-
}
|
|
174
|
-
render() {
|
|
175
|
-
const classMap = this.getCssClassMap();
|
|
176
|
-
const Tag = !!this.linkHref ? 'a' : 'button';
|
|
177
|
-
return (h(Host, null, this.styles && h("style", null, this.styles), 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.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 })), this.iconAnimation == 'reveal-down' ?
|
|
178
|
-
h("span", null, h("div", { class: "content" }, h("slot", null)), h("div", { class: "icon-wrapper" }, h("div", { class: "icon" }, h("slot", { name: "slot-after-text" })))) :
|
|
179
|
-
h("span", null, h("slot", { name: "slot-before-text" }), h("slot", null), h("slot", { name: "slot-after-text" })))));
|
|
180
|
-
}
|
|
181
|
-
getCssClassMap() {
|
|
182
|
-
return {
|
|
183
|
-
[this.color]: true,
|
|
184
|
-
[this.iconAnimation]: true,
|
|
185
|
-
[this.iconPosition]: true,
|
|
186
|
-
['disabled']: this.disabled ? true : false,
|
|
187
|
-
['active']: this.active ? true : false,
|
|
188
|
-
[this.textAlign]: true
|
|
189
|
-
};
|
|
190
|
-
}
|
|
191
|
-
};
|
|
192
|
-
PtcButton.style = ptcButtonCss;
|
|
193
|
-
|
|
194
|
-
// Define the ElqLib class
|
|
195
|
-
class ElqLib {
|
|
196
|
-
constructor(params) {
|
|
197
|
-
this.params = params;
|
|
198
|
-
this.url_vars = {};
|
|
199
|
-
this.visitor_elq_id = null;
|
|
200
|
-
this.field_mappings = [];
|
|
201
|
-
this.callback_queue = [];
|
|
202
|
-
this.fields_populated = false;
|
|
203
|
-
this.user_elq_email = '';
|
|
204
|
-
this.user_elq_firstname = '';
|
|
205
|
-
this.user_elq_lastname = '';
|
|
206
|
-
// Merge defaults with params
|
|
207
|
-
const defaults = {
|
|
208
|
-
elq_site_id: '',
|
|
209
|
-
elq_visitor_lookup_key: '',
|
|
210
|
-
elq_recipient_id_lookup_key: '',
|
|
211
|
-
elq_contact_lookup_key: '',
|
|
212
|
-
elq_field_email_rec_id: 'V_EmailRecipientID',
|
|
213
|
-
elq_field_contact_email: 'C_EmailAddress',
|
|
214
|
-
elq_field_visitor_email: 'V_Email_Address',
|
|
215
|
-
elq_field_visitor_firstname: 'V_First_Name',
|
|
216
|
-
elq_field_visitor_lastname: 'V_Last_Name',
|
|
217
|
-
notme_link_id: 'not-me-link-id',
|
|
218
|
-
notme_fields_class: null,
|
|
219
|
-
notme_message: 'Not {name}? Click here.',
|
|
220
|
-
notme_message_noname: 'Not your details below? Click here.',
|
|
221
|
-
};
|
|
222
|
-
this.params = Object.assign(Object.assign({}, defaults), this.params);
|
|
223
|
-
this.init();
|
|
224
|
-
}
|
|
225
|
-
init() {
|
|
226
|
-
// Merge defaults with user-provided params if not already done in the constructor
|
|
227
|
-
// ...
|
|
228
|
-
// Set Eloqua site ID
|
|
229
|
-
this.setEloquaSiteId();
|
|
230
|
-
// Load Eloqua scripts
|
|
231
|
-
this.async_load();
|
|
232
|
-
// Store URL variables
|
|
233
|
-
this.store_url_vars();
|
|
234
|
-
// Store visitor's Eloqua IDgit
|
|
235
|
-
this.store_visitor_elq_id();
|
|
236
|
-
// init noteme link;
|
|
237
|
-
this.init_notme();
|
|
238
|
-
// Set the global Eloqua callback function
|
|
239
|
-
window.SetElqContent = this.eloqua_callback.bind(this);
|
|
240
|
-
}
|
|
241
|
-
setEloquaSiteId() {
|
|
242
|
-
if (this.params.elq_site_id) {
|
|
243
|
-
ElqLib._elqQ.push(['elqSetSiteId', this.params.elq_site_id]);
|
|
244
|
-
ElqLib._elqQ.push(['elqUseFirstPartyCookie', 'tracking.ptc.com']);
|
|
245
|
-
ElqLib._elqQ.push(['elqTrackPageView', window.location.href]);
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
fire_pageview(url) {
|
|
249
|
-
try {
|
|
250
|
-
if (typeof url === 'undefined') {
|
|
251
|
-
ElqLib._elqQ.push(['elqTrackPageView']);
|
|
252
|
-
}
|
|
253
|
-
else {
|
|
254
|
-
ElqLib._elqQ.push(['elqTrackPageView', url]);
|
|
255
|
-
}
|
|
256
|
-
console.log('TRACKING: Eloqua pageview fired for URL: ' + (url || 'current page'));
|
|
257
|
-
}
|
|
258
|
-
catch (e) {
|
|
259
|
-
console.log('TRACKING: Could not fire Eloqua pageview: ', e);
|
|
260
|
-
}
|
|
261
|
-
}
|
|
262
|
-
find_eloqua_contact() {
|
|
263
|
-
console.log('CONTACT LOOKUP: Attempting to find Eloqua contact...');
|
|
264
|
-
// Queue callback action for the return of lookup
|
|
265
|
-
this.callback_queue.push(this.handle_visitor_lookup.bind(this));
|
|
266
|
-
// Start with a recipient lookup if ID was supplied in URL
|
|
267
|
-
if (this.visitor_elq_id !== null) {
|
|
268
|
-
this.lookup_visitor_by_recipient_id();
|
|
269
|
-
}
|
|
270
|
-
else {
|
|
271
|
-
// If no visitor ID, attempt to do a visitor lookup with an Eloqua cookie
|
|
272
|
-
this.lookup_visitor_by_cookie(); //preference center
|
|
273
|
-
this.lookup_contact_by_email();
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
|
-
add_field_mapping(mapping) {
|
|
277
|
-
this.field_mappings.push(mapping);
|
|
278
|
-
}
|
|
279
|
-
add_queue_action(action) {
|
|
280
|
-
this.callback_queue.push(action);
|
|
281
|
-
}
|
|
282
|
-
store_url_vars() {
|
|
283
|
-
// Clear the current url_vars
|
|
284
|
-
this.url_vars = {};
|
|
285
|
-
// Split the URL by the '?' to get the query string part
|
|
286
|
-
const queryString = window.location.search.substring(1);
|
|
287
|
-
// Split the query string by '&' to get each key-value pair
|
|
288
|
-
queryString.split('&').forEach(paramString => {
|
|
289
|
-
// Split the key-value pairs by '=' to separate keys and values
|
|
290
|
-
let [key, value] = paramString.split('=');
|
|
291
|
-
// Decode URI components to handle URL encoding
|
|
292
|
-
key = decodeURIComponent(key);
|
|
293
|
-
value = decodeURIComponent(value);
|
|
294
|
-
// Store the key-value pair in the url_vars object
|
|
295
|
-
this.url_vars[key] = value;
|
|
296
|
-
});
|
|
297
|
-
// Optionally, log the stored URL variables
|
|
298
|
-
console.log('URL variables stored:', this.url_vars);
|
|
299
|
-
}
|
|
300
|
-
store_visitor_elq_id() {
|
|
301
|
-
console.log("INIT: Looking for visitor's Eloqua ID in URL...");
|
|
302
|
-
const elqIdParam = this.url_vars['elq'];
|
|
303
|
-
if (elqIdParam) {
|
|
304
|
-
const elqId = elqIdParam.toUpperCase().replace(/(.{8})(.{4})(.{4})(.{4})(.{12})/, '$1-$2-$3-$4-$5');
|
|
305
|
-
this.visitor_elq_id = elqId;
|
|
306
|
-
console.log(`INIT: ...visitor Eloqua ID found in URL: ${elqId}`);
|
|
307
|
-
}
|
|
308
|
-
else {
|
|
309
|
-
this.visitor_elq_id = null;
|
|
310
|
-
console.log('INIT: ...no visitor Eloqua ID found in URL');
|
|
311
|
-
}
|
|
312
|
-
}
|
|
313
|
-
// private merge(root: any, ...sources: any[]): any {
|
|
314
|
-
// sources.forEach(source => {
|
|
315
|
-
// for (const key in source) {
|
|
316
|
-
// if (source.hasOwnProperty(key)) {
|
|
317
|
-
// root[key] = source[key];
|
|
318
|
-
// }
|
|
319
|
-
// }
|
|
320
|
-
// });
|
|
321
|
-
// return root;
|
|
322
|
-
// }
|
|
323
|
-
eloqua_callback() {
|
|
324
|
-
console.log('LOOKUP: Eloqua lookup finished');
|
|
325
|
-
// Process each action in the callback queue
|
|
326
|
-
let actionSucceeded = true;
|
|
327
|
-
while (actionSucceeded && this.callback_queue.length > 0) {
|
|
328
|
-
const action = this.callback_queue.shift();
|
|
329
|
-
if (action) {
|
|
330
|
-
console.log(`QUEUE: Executing action`);
|
|
331
|
-
actionSucceeded = action(); // Execute the action. It must return a boolean indicating success.
|
|
332
|
-
if (actionSucceeded) {
|
|
333
|
-
console.log('QUEUE: Action executed successfully, removed from queue');
|
|
334
|
-
}
|
|
335
|
-
else {
|
|
336
|
-
console.log('QUEUE: Action failed, re-adding to queue');
|
|
337
|
-
this.callback_queue.unshift(action); // Re-add the action to the front of the queue
|
|
338
|
-
break; // Break out of the loop if an action fails
|
|
339
|
-
}
|
|
340
|
-
}
|
|
341
|
-
}
|
|
342
|
-
// After processing the queue, update user details or perform other operations
|
|
343
|
-
if (actionSucceeded) {
|
|
344
|
-
this.update_user_details();
|
|
345
|
-
this.populate_mapped_fields();
|
|
346
|
-
}
|
|
347
|
-
// ...additional code to handle the aftermath of callback processing...
|
|
348
|
-
}
|
|
349
|
-
lookup_visitor_by_cookie() {
|
|
350
|
-
if (this.params.elq_visitor_lookup_key != '') {
|
|
351
|
-
ElqLib._elqQ.push(['elqDataLookup', escape(this.params.elq_visitor_lookup_key), '']);
|
|
352
|
-
console.log('LOOKUP: Visitor lookup sent using Eloqua cookie');
|
|
353
|
-
}
|
|
354
|
-
else {
|
|
355
|
-
console.log('LOOKUP: A visitor lookup cannot be performed as no lookup key was defined');
|
|
356
|
-
}
|
|
357
|
-
}
|
|
358
|
-
lookup_visitor_by_recipient_id() {
|
|
359
|
-
if (this.params.elq_recipient_id_lookup_key != '') {
|
|
360
|
-
ElqLib._elqQ.push([
|
|
361
|
-
'elqDataLookup',
|
|
362
|
-
escape(this.params.elq_recipient_id_lookup_key),
|
|
363
|
-
'<' + this.params.elq_field_email_rec_id + '>' + this.visitor_elq_id + '</' + this.params.elq_field_email_rec_id + '>',
|
|
364
|
-
]);
|
|
365
|
-
console.log('LOOKUP: Visitor lookup sent using email recipient id: ' + this.visitor_elq_id);
|
|
366
|
-
}
|
|
367
|
-
else {
|
|
368
|
-
console.log('LOOKUP: A visitor lookup cannot be performed as no lookup key was defined');
|
|
369
|
-
}
|
|
370
|
-
}
|
|
371
|
-
lookup_contact_by_email() {
|
|
372
|
-
if (this.params.elq_contact_lookup_key != '') {
|
|
373
|
-
ElqLib._elqQ.push([
|
|
374
|
-
'elqDataLookup',
|
|
375
|
-
escape(this.params.elq_contact_lookup_key),
|
|
376
|
-
'<' + this.params.elq_field_contact_email + '>' + this.user_elq_email + '</' + this.params.elq_field_contact_email + '>',
|
|
377
|
-
]);
|
|
378
|
-
console.log('LOOKUP: Contact lookup sent using email address: ' + this.user_elq_email);
|
|
379
|
-
}
|
|
380
|
-
else {
|
|
381
|
-
console.log('LOOKUP: A visitor lookup cannot be performed as no lookup key was defined');
|
|
382
|
-
}
|
|
383
|
-
}
|
|
384
|
-
handle_visitor_lookup() {
|
|
385
|
-
//console.log('Contact Email: ' + this.params.elq_field_contact_email)
|
|
386
|
-
const email = window.GetElqContentPersonalizationValue(this.params.elq_field_contact_email); //it was elq_field_visitor_email ( V_Email_Address)
|
|
387
|
-
if (email) {
|
|
388
|
-
console.log(`LOOKUP: Found contact email address: ${email}`);
|
|
389
|
-
this.user_elq_email = email.trim();
|
|
390
|
-
this.lookup_contact_by_email();
|
|
391
|
-
this.callback_queue.push(this.handle_contact_lookup.bind(this));
|
|
392
|
-
return true;
|
|
393
|
-
}
|
|
394
|
-
else {
|
|
395
|
-
return false;
|
|
396
|
-
}
|
|
397
|
-
}
|
|
398
|
-
handle_contact_lookup() {
|
|
399
|
-
if (window.GetElqContentPersonalizationValue(this.params.elq_field_contact_email) != '') {
|
|
400
|
-
console.log('LOOKUP: Found contact email address: ' + window.GetElqContentPersonalizationValue(this.params.elq_field_contact_email));
|
|
401
|
-
return true;
|
|
402
|
-
}
|
|
403
|
-
else {
|
|
404
|
-
return false;
|
|
405
|
-
}
|
|
406
|
-
}
|
|
407
|
-
populate_mapped_fields() {
|
|
408
|
-
console.log('MAPPING: Starting field mapping');
|
|
409
|
-
//debugger;
|
|
410
|
-
this.field_mappings.forEach(({ elementId, elqFieldName }) => {
|
|
411
|
-
const fieldValue = window.GetElqContentPersonalizationValue(elqFieldName);
|
|
412
|
-
if (elementId !== 'contact-country') {
|
|
413
|
-
const element = document.getElementById(elementId);
|
|
414
|
-
console.log('element ID of field mappings: ' + element);
|
|
415
|
-
console.log('fieldValue ID of field mappings: ' + fieldValue);
|
|
416
|
-
if (element && fieldValue) {
|
|
417
|
-
element.value = fieldValue;
|
|
418
|
-
//element.style.display = 'none'; // Hide the field.
|
|
419
|
-
if (element.closest('ptc-textfield')) {
|
|
420
|
-
element.closest('ptc-textfield').style.display = 'none';
|
|
421
|
-
}
|
|
422
|
-
else if (element.closest('ptc-select')) {
|
|
423
|
-
element.closest('ptc-select').style.display = 'none';
|
|
424
|
-
}
|
|
425
|
-
this.fields_populated = true;
|
|
426
|
-
}
|
|
427
|
-
}
|
|
428
|
-
else {
|
|
429
|
-
const countryEle = document.getElementById(elementId);
|
|
430
|
-
if (countryEle && fieldValue) {
|
|
431
|
-
countryEle.textContent = fieldValue;
|
|
432
|
-
}
|
|
433
|
-
// debugger;
|
|
434
|
-
if (countryEle.closest('ptc-select')) {
|
|
435
|
-
countryEle.closest('ptc-select').style.display = 'none';
|
|
436
|
-
}
|
|
437
|
-
}
|
|
438
|
-
});
|
|
439
|
-
console.log('MAPPING: Finished ');
|
|
440
|
-
if (this.fields_populated) {
|
|
441
|
-
this.update_notme_link();
|
|
442
|
-
}
|
|
443
|
-
}
|
|
444
|
-
update_user_details() {
|
|
445
|
-
console.log('displaying user info...');
|
|
446
|
-
if (window.GetElqContentPersonalizationValue(this.params.elq_field_contact_email) !== '') {
|
|
447
|
-
document
|
|
448
|
-
.querySelectorAll('input[type=text], input[type=tel], input[name="phonenumber"], input[name="phonenumbertwo"], input[type=email], select, textarea, span.mdc-select__selected-text')
|
|
449
|
-
.forEach((element) => {
|
|
450
|
-
if (element.tagName === 'SPAN') {
|
|
451
|
-
const spanText = element;
|
|
452
|
-
const spanEloquaName = spanText.getAttribute('data-eloqua-name');
|
|
453
|
-
if (spanEloquaName !== null) {
|
|
454
|
-
const spanElqValue = window.GetElqContentPersonalizationValue(spanEloquaName);
|
|
455
|
-
if (spanElqValue !== '' && spanElqValue.length > 0) {
|
|
456
|
-
spanText.textContent = spanElqValue;
|
|
457
|
-
}
|
|
458
|
-
}
|
|
459
|
-
}
|
|
460
|
-
else if (element.className.includes('intl-tel-input')) {
|
|
461
|
-
const telInput = element;
|
|
462
|
-
const eloquaName = telInput.getAttribute('data-eloqua-name');
|
|
463
|
-
if (eloquaName !== null) {
|
|
464
|
-
const elqValue = window.GetElqContentPersonalizationValue(eloquaName);
|
|
465
|
-
if (elqValue !== '' && elqValue.length > 0) {
|
|
466
|
-
setTimeout(() => {
|
|
467
|
-
telInput.placeholder = elqValue;
|
|
468
|
-
}, 1000);
|
|
469
|
-
}
|
|
470
|
-
}
|
|
471
|
-
}
|
|
472
|
-
else {
|
|
473
|
-
const input = element;
|
|
474
|
-
const eloquaName = input.getAttribute('data-eloqua-name');
|
|
475
|
-
if (eloquaName !== null) {
|
|
476
|
-
const elqValue = window.GetElqContentPersonalizationValue(eloquaName);
|
|
477
|
-
if (elqValue !== '' && elqValue.length > 0) {
|
|
478
|
-
input.value = elqValue;
|
|
479
|
-
}
|
|
480
|
-
}
|
|
481
|
-
}
|
|
482
|
-
});
|
|
483
|
-
}
|
|
484
|
-
if (this.user_elq_email == '' && window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_email) != '') {
|
|
485
|
-
this.user_elq_email = window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_email);
|
|
486
|
-
}
|
|
487
|
-
if (this.user_elq_firstname == '' && window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_firstname) != '') {
|
|
488
|
-
this.user_elq_firstname = window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_firstname);
|
|
489
|
-
}
|
|
490
|
-
if (this.user_elq_lastname == '' && window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_lastname) != '') {
|
|
491
|
-
this.user_elq_lastname = window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_lastname);
|
|
492
|
-
}
|
|
493
|
-
}
|
|
494
|
-
update_notme_link() {
|
|
495
|
-
// Assuming the user's first and last name are available from Eloqua fields
|
|
496
|
-
const firstName = window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_firstname);
|
|
497
|
-
const lastName = window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_lastname);
|
|
498
|
-
const notMeLinkElement = document.getElementById(this.params.notme_link_id);
|
|
499
|
-
const topAdditional = document.getElementById('not-me-additional-top');
|
|
500
|
-
const bottomAdditional = document.getElementById('not-me-additional-bottom');
|
|
501
|
-
if (notMeLinkElement) {
|
|
502
|
-
let message = this.params.notme_message;
|
|
503
|
-
console.log('first name: ' + firstName);
|
|
504
|
-
if (firstName && lastName) {
|
|
505
|
-
message = this.params.notme_message.replace('{name}', lastName + ' ' + firstName);
|
|
506
|
-
}
|
|
507
|
-
notMeLinkElement.innerHTML = `<a href="#">${message}</a>`;
|
|
508
|
-
topAdditional.innerHTML = "Please fill out additional information.";
|
|
509
|
-
bottomAdditional.innerHTML = "Click the button below to recieve email confirmation.";
|
|
510
|
-
topAdditional.style.display = 'block';
|
|
511
|
-
bottomAdditional.style.display = 'block';
|
|
512
|
-
notMeLinkElement.onclick = this.remove_user_details.bind(this);
|
|
513
|
-
}
|
|
514
|
-
}
|
|
515
|
-
init_notme() {
|
|
516
|
-
const topAdditional = document.getElementById('not-me-additional-top');
|
|
517
|
-
const bottomAdditional = document.getElementById('not-me-additional-bottom');
|
|
518
|
-
if (topAdditional)
|
|
519
|
-
topAdditional.style.display = 'none';
|
|
520
|
-
if (bottomAdditional)
|
|
521
|
-
bottomAdditional.style.display = 'none';
|
|
522
|
-
}
|
|
523
|
-
remove_user_details(e) {
|
|
524
|
-
e.preventDefault();
|
|
525
|
-
this.user_elq_email = '';
|
|
526
|
-
this.user_elq_firstname = '';
|
|
527
|
-
this.user_elq_lastname = '';
|
|
528
|
-
// $('.' + this.params.notme_fields_class).val('');
|
|
529
|
-
const linkDiv = document.getElementById(this.params.notme_link_id);
|
|
530
|
-
const topAdditional = document.getElementById('not-me-additional-top');
|
|
531
|
-
const bottomAdditional = document.getElementById('not-me-additional-bottom');
|
|
532
|
-
linkDiv.querySelector('a').remove();
|
|
533
|
-
topAdditional.style.display = 'none';
|
|
534
|
-
bottomAdditional.style.display = 'none';
|
|
535
|
-
this.refreshForm();
|
|
536
|
-
return false;
|
|
537
|
-
}
|
|
538
|
-
refreshForm() {
|
|
539
|
-
this.field_mappings.forEach(({ elementId }) => {
|
|
540
|
-
if (elementId !== 'contact-country') {
|
|
541
|
-
const element = document.getElementById(elementId);
|
|
542
|
-
if (element) {
|
|
543
|
-
console.log('element: ' + element);
|
|
544
|
-
element.value = ''; // Reset the value
|
|
545
|
-
if (element.closest('ptc-textfield')) {
|
|
546
|
-
element.closest('ptc-textfield').style.display = '';
|
|
547
|
-
}
|
|
548
|
-
else if (element.closest('ptc-select')) {
|
|
549
|
-
element.closest('ptc-select').style.display = '';
|
|
550
|
-
}
|
|
551
|
-
}
|
|
552
|
-
}
|
|
553
|
-
else {
|
|
554
|
-
const countryEle = document.getElementById(elementId);
|
|
555
|
-
if (countryEle) {
|
|
556
|
-
countryEle.textContent = '';
|
|
557
|
-
}
|
|
558
|
-
// debugger;
|
|
559
|
-
if (countryEle.closest('ptc-select')) {
|
|
560
|
-
countryEle.closest('ptc-select').style.display = '';
|
|
561
|
-
}
|
|
562
|
-
}
|
|
563
|
-
});
|
|
564
|
-
this.clearEloquaCookie('elq-uid'); // Optionally clear the Eloqua cookie
|
|
565
|
-
this.fields_populated = false;
|
|
566
|
-
//this.update_notme_link(); // Update the 'Not Me' link if necessary
|
|
567
|
-
}
|
|
568
|
-
clearEloquaCookie(name) {
|
|
569
|
-
document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
|
|
570
|
-
console.log('cookie cleared');
|
|
571
|
-
}
|
|
572
|
-
// Private Method to load Eloqua Scripts
|
|
573
|
-
async_load() {
|
|
574
|
-
const scriptUrl = 'https://img.en25.com/i/elqCfg.min.js';
|
|
575
|
-
const scriptElement = document.createElement('script');
|
|
576
|
-
scriptElement.type = 'text/javascript';
|
|
577
|
-
scriptElement.async = true;
|
|
578
|
-
scriptElement.src = scriptUrl;
|
|
579
|
-
// Error handling for script loading
|
|
580
|
-
scriptElement.onerror = errorEvent => {
|
|
581
|
-
console.log(`Error loading script: ${errorEvent}`);
|
|
582
|
-
};
|
|
583
|
-
// Append the script element to the head of the document, or before the first script tag found
|
|
584
|
-
const firstScriptTag = document.getElementsByTagName('script')[0];
|
|
585
|
-
if (firstScriptTag && firstScriptTag.parentNode) {
|
|
586
|
-
firstScriptTag.parentNode.insertBefore(scriptElement, firstScriptTag);
|
|
587
|
-
}
|
|
588
|
-
else {
|
|
589
|
-
document.head.appendChild(scriptElement);
|
|
590
|
-
}
|
|
591
|
-
console.log(`Async loading of script ${scriptUrl} initiated.`);
|
|
592
|
-
}
|
|
593
|
-
}
|
|
594
|
-
ElqLib._elqQ = window['_elqQ'] || [];
|
|
595
|
-
// Static member initialization
|
|
596
|
-
//ElqLib._elqQ = window['_elqQ'] || [];
|
|
597
|
-
|
|
598
|
-
const ptcDataLookupCss = ":host{display:block}#not-me-link-id{color:var(--color-gray-10);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-medium);font-style:normal;font-weight:var(--ptc-font-weight-bold);line-height:normal;margin-bottom:var(--ptc-element-spacing-03);position:relative}#not-me-link-id a{color:var(--color-blue-07);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-medium);font-style:normal;font-weight:var(--ptc-font-weight-bold);line-height:normal;text-decoration-line:underline}.not-me-additional-text{color:var(--color-gray-10);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-medium);font-style:normal;font-weight:var(--ptc-font-weight-regular);line-height:normal;margin-bottom:var(--ptc-element-spacing-03)}.not-me-additional-text#not-me-additional-bottom{margin-bottom:unset;margin-top:var(--ptc-element-spacing-03)}.ptc-embedded-form>div{max-width:273px;overflow-wrap:break-word}.ptc-embedded-form .iti__country-name{color:var(--color-gray-12)}.ptc-embedded-form .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{color:var(--color-gray-12)}.ptc-embedded-form .mdc-menu-surface--open{z-index:99999}";
|
|
599
|
-
|
|
600
|
-
const PtcDataLookup = class {
|
|
601
|
-
constructor(hostRef) {
|
|
602
|
-
registerInstance(this, hostRef);
|
|
603
|
-
this.elqSiteId = undefined;
|
|
604
|
-
this.elqVisitorLookupKey = undefined;
|
|
605
|
-
this.elqRecipientIdLookupKey = undefined;
|
|
606
|
-
this.elqContactLookupKey = undefined;
|
|
607
|
-
this.elqFieldEmailRecId = 'V_EmailRecipientID';
|
|
608
|
-
this.elqFieldContactEmail = 'C_EmailAddress';
|
|
609
|
-
this.elqFieldVisitorEmail = 'V_Email_Address';
|
|
610
|
-
this.elqFieldVisitorFirstname = 'C_FirstName';
|
|
611
|
-
this.elqFieldVisitorLastname = 'C_LastName';
|
|
612
|
-
this.notmeLinkId = undefined;
|
|
613
|
-
this.notmeFieldsClass = undefined;
|
|
614
|
-
this.notmeMessage = undefined;
|
|
615
|
-
this.notmeMessageNoname = undefined;
|
|
616
|
-
this.isBlindSubmit = true;
|
|
617
|
-
this.isInitialized = false;
|
|
618
|
-
}
|
|
619
|
-
componentWillLoad() {
|
|
620
|
-
this.initializeElqLib();
|
|
621
|
-
if (this.isBlindSubmit) {
|
|
622
|
-
this.populateBlindField();
|
|
623
|
-
}
|
|
624
|
-
}
|
|
625
|
-
initializeElqLib() {
|
|
626
|
-
this.elqLib = new ElqLib({
|
|
627
|
-
elq_site_id: this.elqSiteId,
|
|
628
|
-
elq_visitor_lookup_key: this.elqVisitorLookupKey,
|
|
629
|
-
elq_recipient_id_lookup_key: this.elqRecipientIdLookupKey,
|
|
630
|
-
elq_contact_lookup_key: this.elqContactLookupKey,
|
|
631
|
-
elq_field_email_rec_id: this.elqFieldEmailRecId,
|
|
632
|
-
elq_field_contact_email: this.elqFieldContactEmail,
|
|
633
|
-
elq_field_visitor_email: this.elqFieldVisitorEmail,
|
|
634
|
-
elq_field_visitor_firstname: this.elqFieldVisitorFirstname,
|
|
635
|
-
elq_field_visitor_lastname: this.elqFieldVisitorLastname,
|
|
636
|
-
notme_link_id: this.notmeLinkId,
|
|
637
|
-
notme_fields_class: this.notmeFieldsClass,
|
|
638
|
-
notme_message: this.notmeMessage,
|
|
639
|
-
notme_message_noname: this.notmeMessageNoname,
|
|
640
|
-
});
|
|
641
|
-
this.isInitialized = true;
|
|
642
|
-
}
|
|
643
|
-
populateBlindField() {
|
|
644
|
-
this.elqLib.add_field_mapping({ elementId: 'contact-phone', elqFieldName: 'C_BusPhone' });
|
|
645
|
-
this.elqLib.add_field_mapping({ elementId: 'contact-email', elqFieldName: 'C_EmailAddress' });
|
|
646
|
-
this.elqLib.add_field_mapping({ elementId: 'contact-firstname', elqFieldName: 'C_FirstName' });
|
|
647
|
-
this.elqLib.add_field_mapping({ elementId: 'contact-lastname', elqFieldName: 'C_LastName' });
|
|
648
|
-
this.elqLib.add_field_mapping({ elementId: 'contact-country', elqFieldName: 'C_Country' });
|
|
649
|
-
this.elqLib.add_field_mapping({ elementId: 'contact-phone', elqFieldName: 'C_BusPhone' });
|
|
650
|
-
this.elqLib.add_field_mapping({ elementId: 'company', elqFieldName: 'C_Company' });
|
|
651
|
-
this.elqLib.add_field_mapping({ elementId: 'contact-zipcode', elqFieldName: 'C_Zip_Postal' });
|
|
652
|
-
this.elqLib.add_field_mapping({ elementId: 'contact-job-category', elqFieldName: 'C_Job_Role1' });
|
|
653
|
-
this.elqLib.add_field_mapping({ elementId: 'contact-job-function', elqFieldName: 'C_Job_Function1' });
|
|
654
|
-
this.elqLib.add_field_mapping({ elementId: 'contact-jp-job-title', elqFieldName: 'C_Title' });
|
|
655
|
-
}
|
|
656
|
-
getCookie(name) {
|
|
657
|
-
let cookieValue = null;
|
|
658
|
-
if (document.cookie) {
|
|
659
|
-
const cookies = document.cookie.split(';');
|
|
660
|
-
for (let cookie of cookies) {
|
|
661
|
-
const [key, value] = cookie.trim().split('=');
|
|
662
|
-
if (key === name) {
|
|
663
|
-
cookieValue = decodeURIComponent(value);
|
|
664
|
-
break;
|
|
665
|
-
}
|
|
666
|
-
}
|
|
667
|
-
}
|
|
668
|
-
return cookieValue;
|
|
669
|
-
}
|
|
670
|
-
async performDataLookup() {
|
|
671
|
-
if (this.isInitialized) {
|
|
672
|
-
this.elqLib.user_elq_email = this.getCookie('elq-uid');
|
|
673
|
-
this.elqLib.find_eloqua_contact();
|
|
674
|
-
}
|
|
675
|
-
}
|
|
676
|
-
render() {
|
|
677
|
-
return h("slot", null);
|
|
678
|
-
}
|
|
679
|
-
get el() { return getElement(this); }
|
|
680
|
-
};
|
|
681
|
-
PtcDataLookup.style = ptcDataLookupCss;
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-62587d0b.js';
|
|
682
2
|
|
|
683
3
|
/******************************************************************************
|
|
684
4
|
Copyright (c) Microsoft Corporation.
|
|
@@ -8075,7 +7395,7 @@ const PtcSelect = class {
|
|
|
8075
7395
|
this.label = undefined;
|
|
8076
7396
|
this.isRequired = true;
|
|
8077
7397
|
this.helpertext = 'Please select a value!';
|
|
8078
|
-
this.
|
|
7398
|
+
this.fieldName = undefined;
|
|
8079
7399
|
this.disabled = false;
|
|
8080
7400
|
this.selectedValue = '';
|
|
8081
7401
|
this.ptcDataEloquaName = undefined;
|
|
@@ -8104,43 +7424,12 @@ const PtcSelect = class {
|
|
|
8104
7424
|
return className;
|
|
8105
7425
|
}
|
|
8106
7426
|
render() {
|
|
8107
|
-
return (h(Host, { class: "ptc-select" }, h("label", { class: "ptc-label-select" }, this.label), h("div", { class: this.getSelectClassName() }, h("div", Object.assign({ class: "mdc-select__anchor", "aria-labelledby": "outlined-select-label" }, (this.isRequired ? { ariaRequired: true } : null)), h("span", { class: "mdc-notched-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("span", { class: "mdc-select__selected-text-container" }, h("span", { id: this.fieldId, class: "mdc-select__selected-text", "aria-controls": this.
|
|
7427
|
+
return (h(Host, { class: "ptc-select" }, h("label", { class: "ptc-label-select" }, this.label), h("div", { class: this.getSelectClassName() }, h("div", Object.assign({ class: "mdc-select__anchor", "aria-labelledby": "outlined-select-label" }, (this.isRequired ? { ariaRequired: true } : null)), h("span", { class: "mdc-notched-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("span", { class: "mdc-select__selected-text-container" }, h("span", { id: this.fieldId, class: "mdc-select__selected-text", "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "", width: "20", height: "12", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), h("div", { class: "mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth" }, h("slot", null))), h("p", { id: this.fieldName, class: "mdc-select-helper-text mdc-select-helper-text--validation-msg" }, h("svg", { class: "select-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)));
|
|
8108
7428
|
}
|
|
8109
7429
|
get el() { return getElement(this); }
|
|
8110
7430
|
};
|
|
8111
7431
|
PtcSelect.style = ptcSelectCss;
|
|
8112
7432
|
|
|
8113
|
-
const ptcSpacerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:12px;min-width:12px;height:12px}@media (min-width: 36em){:host{width:16px;min-width:16px;height:16px}}:host(.ptc-spacer-horizontal){display:inline-block;height:100% !important}:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px}}:host(.ptc-spacer-horizontal.x-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-small){width:8px;min-width:8px}}:host(.ptc-spacer-horizontal.small){width:8px;min-width:8px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.small){width:12px;min-width:12px}}:host(.ptc-spacer-horizontal.medium){height:100%}:host(.ptc-spacer-horizontal.large){width:16px;min-width:16px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.large){width:20px;min-width:20px}}:host(.ptc-spacer-horizontal.x-large){width:20px;min-width:20px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-large){width:28px;min-width:28px}}:host(.ptc-spacer-horizontal.xx-large){width:28px;min-width:28px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-large){width:36px;min-width:36px}}:host(.ptc-spacer-horizontal.xxx-large){width:36px;min-width:36px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxx-large){width:48px;min-width:48px}}:host(.ptc-spacer-horizontal.xxxx-large){width:48px;min-width:48px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxxx-large){width:72px;min-width:72px}}:host(.ptc-spacer-vertical.xx-small){width:100%;height:4px;min-height:4px}:host(.ptc-spacer-vertical.x-small){width:100%;height:4px;min-height:4px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-small){height:8px;min-height:8px}}:host(.ptc-spacer-vertical.small){width:100%;height:8px;min-height:8px}@media (min-width: 36em){:host(.ptc-spacer-vertical.small){height:12px;min-height:12px}}:host(.ptc-spacer-vertical.medium){width:100%}:host(.ptc-spacer-vertical.large){width:100%;height:16px;min-height:16px}@media (min-width: 36em){:host(.ptc-spacer-vertical.large){height:20px;min-height:20px}}:host(.ptc-spacer-vertical.x-large){width:100%;height:20px;min-height:20px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-large){height:28px;min-height:28px}}:host(.ptc-spacer-vertical.xx-large){width:100%;height:28px;min-height:28px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xx-large){height:36px;min-height:36px}}:host(.ptc-spacer-vertical.xxx-large){width:100%;height:36px;min-height:36px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxx-large){height:48px;min-height:48px}}:host(.ptc-spacer-vertical.xxxx-large){width:100%;height:48px;min-height:48px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxxx-large){height:72px;min-height:72px}}:host(.ptc-spacer-vertical.space-144){width:100%;height:144px;min-height:144px}:host(.ptc-spacer-vertical.space-120){width:100%;height:120px;min-height:120px}:host(.ptc-spacer-vertical.space-128){width:100%;height:128px;min-height:128px}:host(.ptc-spacer-xx-small){display:none}@media (max-width: 22.5em){:host(.ptc-spacer-xx-small){display:block}}:host(.ptc-spacer-x-small){display:none}@media (max-width: 35.99em){:host(.ptc-spacer-x-small){display:block}}:host(.ptc-spacer-small){display:none}@media (min-width: 36em){:host(.ptc-spacer-small){display:block}}:host(.ptc-spacer-medium){display:none}@media (min-width: 48em){:host(.ptc-spacer-medium){display:block}}:host(.ptc-spacer-large){display:none}@media (min-width: 62em){:host(.ptc-spacer-large){display:block}}:host(.ptc-spacer-x-large){display:none}@media (min-width: 64.0625em){:host(.ptc-spacer-x-large){display:block}}:host(.ptc-spacer-xx-large){display:none}@media (min-width: 75em){:host(.ptc-spacer-xx-large){display:block}}:host(.ptc-spacer-xxx-large){display:none}@media (min-width: 90em){:host(.ptc-spacer-xxx-large){display:block}}";
|
|
8114
|
-
|
|
8115
|
-
const PtcSpacer = class {
|
|
8116
|
-
constructor(hostRef) {
|
|
8117
|
-
registerInstance(this, hostRef);
|
|
8118
|
-
this.breakpoint = '';
|
|
8119
|
-
this.size = 'medium';
|
|
8120
|
-
this.direction = 'vertical';
|
|
8121
|
-
}
|
|
8122
|
-
render() {
|
|
8123
|
-
const classMap = this.getCssClassMap();
|
|
8124
|
-
return (h(Host, { class: classMap }));
|
|
8125
|
-
}
|
|
8126
|
-
getCssClassMap() {
|
|
8127
|
-
return {
|
|
8128
|
-
[this.size]: true,
|
|
8129
|
-
['ptc-spacer-horizontal']: this.direction === 'horizontal',
|
|
8130
|
-
['ptc-spacer-vertical']: this.direction === 'vertical',
|
|
8131
|
-
['ptc-spacer-xx-small']: this.breakpoint === 'xx-small',
|
|
8132
|
-
['ptc-spacer-x-small']: this.breakpoint === 'x-small',
|
|
8133
|
-
['ptc-spacer-small']: this.breakpoint === 'small',
|
|
8134
|
-
['ptc-spacer-medium']: this.breakpoint === 'medium',
|
|
8135
|
-
['ptc-spacer-large']: this.breakpoint === 'large',
|
|
8136
|
-
['ptc-spacer-x-large']: this.breakpoint === 'x-large',
|
|
8137
|
-
['ptc-spacer-xx-large']: this.breakpoint === 'xx-large',
|
|
8138
|
-
['ptc-spacer-xxx-large']: this.breakpoint === 'xxx-large',
|
|
8139
|
-
};
|
|
8140
|
-
}
|
|
8141
|
-
};
|
|
8142
|
-
PtcSpacer.style = ptcSpacerCss;
|
|
8143
|
-
|
|
8144
7433
|
/**
|
|
8145
7434
|
* @license
|
|
8146
7435
|
* Copyright 2019 Google Inc.
|
|
@@ -11489,7 +10778,7 @@ const PtcTextfield = class {
|
|
|
11489
10778
|
this.labelText = 'Email';
|
|
11490
10779
|
this.helpertext = 'Please enter a value';
|
|
11491
10780
|
this.disabled = false;
|
|
11492
|
-
this.
|
|
10781
|
+
this.fieldName = 'email';
|
|
11493
10782
|
this.ptcDataEloquaName = undefined;
|
|
11494
10783
|
this.ptcDataTargetEloquaName = undefined;
|
|
11495
10784
|
this.inputValue = '';
|
|
@@ -11529,7 +10818,7 @@ const PtcTextfield = class {
|
|
|
11529
10818
|
// debugger;
|
|
11530
10819
|
// console.error('An error found here!', error.message);
|
|
11531
10820
|
// }
|
|
11532
|
-
if (this.fieldId === 'contact-phone' && this.
|
|
10821
|
+
if (this.fieldId === 'contact-phone' && this.fieldName === 'phone') {
|
|
11533
10822
|
this.iti = intlTelInput(this.customInput, {
|
|
11534
10823
|
separateDialCode: true,
|
|
11535
10824
|
initialCountry: 'auto',
|
|
@@ -11545,7 +10834,7 @@ const PtcTextfield = class {
|
|
|
11545
10834
|
}
|
|
11546
10835
|
}
|
|
11547
10836
|
getPhoneValidation() {
|
|
11548
|
-
if (this.fieldId === 'contact-phone' && this.
|
|
10837
|
+
if (this.fieldId === 'contact-phone' && this.fieldName === 'phone') {
|
|
11549
10838
|
if (this.iti.isValidNumber()) {
|
|
11550
10839
|
if (this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
|
|
11551
10840
|
this.mdcTextfield.classList.remove('mdc-text-field--invalid');
|
|
@@ -11553,7 +10842,6 @@ const PtcTextfield = class {
|
|
|
11553
10842
|
if (this.el.classList.contains('invalid-field')) {
|
|
11554
10843
|
this.el.classList.remove('invalid-field');
|
|
11555
10844
|
}
|
|
11556
|
-
// console.log("text field class list: " + this.mdcTextfield.className)
|
|
11557
10845
|
}
|
|
11558
10846
|
else if (!this.iti.isValidNumber()) {
|
|
11559
10847
|
if (!this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
|
|
@@ -11562,10 +10850,7 @@ const PtcTextfield = class {
|
|
|
11562
10850
|
if (!this.el.classList.contains('invalid-field')) {
|
|
11563
10851
|
this.el.classList.add('invalid-field');
|
|
11564
10852
|
}
|
|
11565
|
-
// console.log("text field class list: " + this.mdcTextfield.className);
|
|
11566
|
-
// console.log("this class list: " + this.el.className)
|
|
11567
10853
|
}
|
|
11568
|
-
// console.log('hello!');
|
|
11569
10854
|
}
|
|
11570
10855
|
}
|
|
11571
10856
|
setErrorBackground() {
|
|
@@ -11582,7 +10867,7 @@ const PtcTextfield = class {
|
|
|
11582
10867
|
}
|
|
11583
10868
|
getInputClassName() {
|
|
11584
10869
|
let className = 'mdc-text-field__input';
|
|
11585
|
-
if (this.type === 'tel' && this.
|
|
10870
|
+
if (this.type === 'tel' && this.fieldName === 'phone') {
|
|
11586
10871
|
className = `${className} intl-tel-input`;
|
|
11587
10872
|
}
|
|
11588
10873
|
else if (this.type === 'text' && this.ptcMaxLength) {
|
|
@@ -11595,13 +10880,13 @@ const PtcTextfield = class {
|
|
|
11595
10880
|
// if (this.type === 'email' && this.name === 'email') {
|
|
11596
10881
|
// validationPattern = '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}';
|
|
11597
10882
|
// }
|
|
11598
|
-
if (this.
|
|
10883
|
+
if (this.fieldName === 'firstname' || this.fieldName === 'lastname') {
|
|
11599
10884
|
validationPattern = '[A-Za-z ]+';
|
|
11600
10885
|
}
|
|
11601
10886
|
return validationPattern;
|
|
11602
10887
|
}
|
|
11603
10888
|
setHelperText() {
|
|
11604
|
-
if (this.type === 'email' && this.
|
|
10889
|
+
if (this.type === 'email' && this.fieldName === 'email') {
|
|
11605
10890
|
if (this.customInput.validity.valueMissing) {
|
|
11606
10891
|
this.helpertext = 'Email is required.';
|
|
11607
10892
|
}
|
|
@@ -11609,7 +10894,7 @@ const PtcTextfield = class {
|
|
|
11609
10894
|
this.helpertext = 'Please enter a valid email.';
|
|
11610
10895
|
}
|
|
11611
10896
|
}
|
|
11612
|
-
else if (this.
|
|
10897
|
+
else if (this.fieldName === 'firstname') {
|
|
11613
10898
|
if (this.customInput.validity.valueMissing) {
|
|
11614
10899
|
this.helpertext = 'Please enter your first name.';
|
|
11615
10900
|
}
|
|
@@ -11617,7 +10902,7 @@ const PtcTextfield = class {
|
|
|
11617
10902
|
this.helpertext = 'Please check your first name';
|
|
11618
10903
|
}
|
|
11619
10904
|
}
|
|
11620
|
-
else if (this.
|
|
10905
|
+
else if (this.fieldName === 'lastname') {
|
|
11621
10906
|
if (this.customInput.validity.valueMissing) {
|
|
11622
10907
|
this.helpertext = 'Please enter your last name.';
|
|
11623
10908
|
}
|
|
@@ -11645,84 +10930,13 @@ const PtcTextfield = class {
|
|
|
11645
10930
|
this.mdcTextfield = mdcTextfield;
|
|
11646
10931
|
} }, 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({ ref: customInput => {
|
|
11647
10932
|
this.customInput = customInput;
|
|
11648
|
-
}, 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.
|
|
10933
|
+
}, 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)))),
|
|
11649
10934
|
h("div", { class: `mdc-text-field-helper-line
|
|
11650
|
-
${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.
|
|
10935
|
+
${!!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.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null),
|
|
11651
10936
|
]) : (h("input", { type: "hidden", "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }))));
|
|
11652
10937
|
}
|
|
11653
10938
|
get el() { return getElement(this); }
|
|
11654
10939
|
};
|
|
11655
10940
|
PtcTextfield.style = ptcTextfieldCss;
|
|
11656
10941
|
|
|
11657
|
-
const ptcTitleCss = "div.center.sc-ptc-title{text-align:center}div.center.dotted.sc-ptc-title h1.sc-ptc-title::before,div.center.dotted.sc-ptc-title h2.sc-ptc-title::before,div.center.dotted.sc-ptc-title h3.sc-ptc-title::before,div.center.dotted.sc-ptc-title h4.sc-ptc-title::before,div.center.dotted.sc-ptc-title h5.sc-ptc-title::before,div.center.dotted.sc-ptc-title h6.sc-ptc-title::before{left:50%;transform:translateX(-50%)}div.left.sc-ptc-title{text-align:left}div.left.dotted.sc-ptc-title h1.sc-ptc-title::before,div.left.dotted.sc-ptc-title h2.sc-ptc-title::before,div.left.dotted.sc-ptc-title h3.sc-ptc-title::before,div.left.dotted.sc-ptc-title h4.sc-ptc-title::before,div.left.dotted.sc-ptc-title h5.sc-ptc-title::before,div.left.dotted.sc-ptc-title h6.sc-ptc-title::before{left:0%}div.right.sc-ptc-title{text-align:right}div.right.dotted.sc-ptc-title h1.sc-ptc-title::before,div.right.dotted.sc-ptc-title h2.sc-ptc-title::before,div.right.dotted.sc-ptc-title h3.sc-ptc-title::before,div.right.dotted.sc-ptc-title h4.sc-ptc-title::before,div.right.dotted.sc-ptc-title h5.sc-ptc-title::before,div.right.dotted.sc-ptc-title h6.sc-ptc-title::before{right:0%}div.inherit.sc-ptc-title{text-align:inherit}div.dotted.sc-ptc-title h1.sc-ptc-title::before,div.dotted.sc-ptc-title h2.sc-ptc-title::before,div.dotted.sc-ptc-title h3.sc-ptc-title::before,div.dotted.sc-ptc-title h4.sc-ptc-title::before,div.dotted.sc-ptc-title h5.sc-ptc-title::before,div.dotted.sc-ptc-title h6.sc-ptc-title::before{content:\"\";position:absolute;top:-6px;width:30%;display:block;border-top:3px dashed var(--color-green-07)}div.solid.sc-ptc-title h1.sc-ptc-title,div.solid.sc-ptc-title h2.sc-ptc-title,div.solid.sc-ptc-title h3.sc-ptc-title,div.solid.sc-ptc-title h4.sc-ptc-title,div.solid.sc-ptc-title h5.sc-ptc-title,div.solid.sc-ptc-title h6.sc-ptc-title{padding-top:12px}div.solid.sc-ptc-title h1.sc-ptc-title::before,div.solid.sc-ptc-title h2.sc-ptc-title::before,div.solid.sc-ptc-title h3.sc-ptc-title::before,div.solid.sc-ptc-title h4.sc-ptc-title::before,div.solid.sc-ptc-title h5.sc-ptc-title::before,div.solid.sc-ptc-title h6.sc-ptc-title::before{content:\"\";position:absolute;width:100%;height:0.7px;background-color:var(--color-gray-03);opacity:0.9;left:0px;top:0}div.solid.sc-ptc-title h1.sc-ptc-title::after,div.solid.sc-ptc-title h2.sc-ptc-title::after,div.solid.sc-ptc-title h3.sc-ptc-title::after,div.solid.sc-ptc-title h4.sc-ptc-title::after,div.solid.sc-ptc-title h5.sc-ptc-title::after,div.solid.sc-ptc-title h6.sc-ptc-title::after{content:\"\";position:absolute;width:56px;height:2px;background-color:var(--color-green-07);top:-2px;left:0px}div.is-standard.sc-ptc-title h1.sc-ptc-title,div.is-standard.sc-ptc-title h2.sc-ptc-title,div.is-standard.sc-ptc-title h3.sc-ptc-title,div.is-standard.sc-ptc-title h4.sc-ptc-title,div.is-standard.sc-ptc-title h5.sc-ptc-title,div.is-standard.sc-ptc-title h6.sc-ptc-title{display:inline-block;position:relative}div.is-standard.sc-ptc-title h1.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-extrabold);letter-spacing:0px;color:var(--color-gray-10)}@media only screen and (min-width: 768px){div.is-standard.sc-ptc-title h1.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}}div.is-standard.sc-ptc-title h2.sc-ptc-title{font-size:var(--ptc-font-size-x-large);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-extrabold);color:var(--color-gray-10)}@media only screen and (min-width: 768px){div.is-standard.sc-ptc-title h2.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}}div.is-plm-hub.sc-ptc-title h1.sc-ptc-title,div.is-plm-hub.sc-ptc-title h2.sc-ptc-title,div.is-plm-hub.sc-ptc-title h3.sc-ptc-title,div.is-plm-hub.sc-ptc-title h4.sc-ptc-title,div.is-plm-hub.sc-ptc-title h5.sc-ptc-title,div.is-plm-hub.sc-ptc-title h6.sc-ptc-title{display:inline-block;position:relative;margin-block-start:0em;margin-block-end:0em;margin-inline-start:0px;margin-inline-end:0px;color:var(--color-white) !important}div.margin-flush.sc-ptc-title{margin-top:0;margin-bottom:0}div.margin-flush.sc-ptc-title h1.sc-ptc-title,div.margin-flush.sc-ptc-title h2.sc-ptc-title,div.margin-flush.sc-ptc-title h3.sc-ptc-title,div.margin-flush.sc-ptc-title h4.sc-ptc-title,div.margin-flush.sc-ptc-title h5.sc-ptc-title{margin-top:0;margin-bottom:0}div.margin-top-2.sc-ptc-title{margin-top:var(--ptc-element-spacing-02);margin-bottom:0}div.margin-top-3.sc-ptc-title{margin-top:var(--ptc-element-spacing-03);margin-bottom:0}div.margin-top-4.sc-ptc-title{margin-top:var(--ptc-element-spacing-04);margin-bottom:0}div.margin-top-5.sc-ptc-title{margin-top:var(--ptc-element-spacing-05);margin-bottom:0}div.margin-top-6.sc-ptc-title{margin-top:var(--ptc-element-spacing-06);margin-bottom:0}div.margin-bottom-2.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-02);margin-top:0}div.margin-bottom-3.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-03);margin-top:0}div.margin-bottom-4.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-04);margin-top:0}div.margin-bottom-5.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-05);margin-top:0}div.margin-bottom-6.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-06);margin-top:0}div.margin-2.sc-ptc-title{margin-top:var(--ptc-element-spacing-02);margin-bottom:var(--ptc-element-spacing-02)}div.margin-3.sc-ptc-title{margin-top:var(--ptc-element-spacing-03);margin-bottom:var(--ptc-element-spacing-03)}div.margin-4.sc-ptc-title{margin-top:var(--ptc-element-spacing-04);margin-bottom:var(--ptc-element-spacing-04)}div.margin-5.sc-ptc-title{margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}div.margin-5.sc-ptc-title h4.sc-ptc-title{margin-top:0;margin-bottom:0}div.margin-6.sc-ptc-title{margin-top:var(--ptc-element-spacing-06);margin-bottom:var(--ptc-element-spacing-06)}div.margin-9.sc-ptc-title{margin-top:var(--ptc-element-spacing-09);margin-bottom:var(--ptc-element-spacing-09)}div.green.sc-ptc-title h1.sc-ptc-title,div.green.sc-ptc-title h2.sc-ptc-title,div.green.sc-ptc-title h3.sc-ptc-title,div.green.sc-ptc-title h4.sc-ptc-title,div.green.sc-ptc-title h5.sc-ptc-title,div.green.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-green-07)}div.blue.sc-ptc-title h1.sc-ptc-title,div.blue.sc-ptc-title h2.sc-ptc-title,div.blue.sc-ptc-title h3.sc-ptc-title,div.blue.sc-ptc-title h4.sc-ptc-title,div.blue.sc-ptc-title h5.sc-ptc-title,div.blue.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-blue-07)}div.red.sc-ptc-title h1.sc-ptc-title,div.red.sc-ptc-title h2.sc-ptc-title,div.red.sc-ptc-title h3.sc-ptc-title,div.red.sc-ptc-title h4.sc-ptc-title,div.red.sc-ptc-title h5.sc-ptc-title,div.red.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-red-07)}div.orange.sc-ptc-title h1.sc-ptc-title,div.orange.sc-ptc-title h2.sc-ptc-title,div.orange.sc-ptc-title h3.sc-ptc-title,div.orange.sc-ptc-title h4.sc-ptc-title,div.orange.sc-ptc-title h5.sc-ptc-title,div.orange.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-orange-07)}div.slate-grey.sc-ptc-title h1.sc-ptc-title,div.slate-grey.sc-ptc-title h2.sc-ptc-title,div.slate-grey.sc-ptc-title h3.sc-ptc-title,div.slate-grey.sc-ptc-title h4.sc-ptc-title,div.slate-grey.sc-ptc-title h5.sc-ptc-title,div.slate-grey.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-gray-07)}div.w-3.sc-ptc-title h1.sc-ptc-title,div.w-3.sc-ptc-title h2.sc-ptc-title,div.w-3.sc-ptc-title h3.sc-ptc-title,div.w-3.sc-ptc-title h4.sc-ptc-title,div.w-3.sc-ptc-title h5.sc-ptc-title,div.w-3.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-thin)}div.w-4.sc-ptc-title h1.sc-ptc-title,div.w-4.sc-ptc-title h2.sc-ptc-title,div.w-4.sc-ptc-title h3.sc-ptc-title,div.w-4.sc-ptc-title h4.sc-ptc-title,div.w-4.sc-ptc-title h5.sc-ptc-title,div.w-4.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-regular)}div.w-5.sc-ptc-title h1.sc-ptc-title,div.w-5.sc-ptc-title h2.sc-ptc-title,div.w-5.sc-ptc-title h3.sc-ptc-title,div.w-5.sc-ptc-title h4.sc-ptc-title,div.w-5.sc-ptc-title h5.sc-ptc-title,div.w-5.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-medium)}div.w-6.sc-ptc-title h1.sc-ptc-title,div.w-6.sc-ptc-title h2.sc-ptc-title,div.w-6.sc-ptc-title h3.sc-ptc-title,div.w-6.sc-ptc-title h4.sc-ptc-title,div.w-6.sc-ptc-title h5.sc-ptc-title,div.w-6.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-semibold)}div.w-7.sc-ptc-title h1.sc-ptc-title,div.w-7.sc-ptc-title h2.sc-ptc-title,div.w-7.sc-ptc-title h3.sc-ptc-title,div.w-7.sc-ptc-title h4.sc-ptc-title,div.w-7.sc-ptc-title h5.sc-ptc-title,div.w-7.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-bold)}div.w-8.sc-ptc-title h1.sc-ptc-title,div.w-8.sc-ptc-title h2.sc-ptc-title,div.w-8.sc-ptc-title h3.sc-ptc-title,div.w-8.sc-ptc-title h4.sc-ptc-title,div.w-8.sc-ptc-title h5.sc-ptc-title,div.w-8.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-extrabold)}div.w-9.sc-ptc-title h1.sc-ptc-title,div.w-9.sc-ptc-title h2.sc-ptc-title,div.w-9.sc-ptc-title h3.sc-ptc-title,div.w-9.sc-ptc-title h4.sc-ptc-title,div.w-9.sc-ptc-title h5.sc-ptc-title,div.w-9.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-black)}div.xx-small.sc-ptc-title h1.sc-ptc-title,div.xx-small.sc-ptc-title h2.sc-ptc-title,div.xx-small.sc-ptc-title h3.sc-ptc-title,div.xx-small.sc-ptc-title h4.sc-ptc-title,div.xx-small.sc-ptc-title h5.sc-ptc-title,div.xx-small.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xx-small)}div.x-small.sc-ptc-title h1.sc-ptc-title,div.x-small.sc-ptc-title h2.sc-ptc-title,div.x-small.sc-ptc-title h3.sc-ptc-title,div.x-small.sc-ptc-title h4.sc-ptc-title,div.x-small.sc-ptc-title h5.sc-ptc-title,div.x-small.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-x-small)}div.small.sc-ptc-title h1.sc-ptc-title,div.small.sc-ptc-title h2.sc-ptc-title,div.small.sc-ptc-title h3.sc-ptc-title,div.small.sc-ptc-title h4.sc-ptc-title,div.small.sc-ptc-title h5.sc-ptc-title,div.small.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-small)}div.medium.sc-ptc-title h1.sc-ptc-title,div.medium.sc-ptc-title h2.sc-ptc-title,div.medium.sc-ptc-title h3.sc-ptc-title,div.medium.sc-ptc-title h4.sc-ptc-title,div.medium.sc-ptc-title h5.sc-ptc-title,div.medium.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-medium)}div.large.sc-ptc-title h1.sc-ptc-title,div.large.sc-ptc-title h2.sc-ptc-title,div.large.sc-ptc-title h3.sc-ptc-title,div.large.sc-ptc-title h4.sc-ptc-title,div.large.sc-ptc-title h5.sc-ptc-title,div.large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-large)}div.large.sc-ptc-title h3.sc-ptc-title{font-size:var(--ptc-font-size-medium)}@media only screen and (min-width: 768px){div.large.sc-ptc-title h3.sc-ptc-title{font-size:var(--ptc-font-size-large)}}div.x-large.sc-ptc-title h1.sc-ptc-title,div.x-large.sc-ptc-title h2.sc-ptc-title,div.x-large.sc-ptc-title h3.sc-ptc-title,div.x-large.sc-ptc-title h4.sc-ptc-title,div.x-large.sc-ptc-title h5.sc-ptc-title,div.x-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-x-large)}div.xx-large.sc-ptc-title h1.sc-ptc-title,div.xx-large.sc-ptc-title h2.sc-ptc-title,div.xx-large.sc-ptc-title h3.sc-ptc-title,div.xx-large.sc-ptc-title h4.sc-ptc-title{font-size:var(--ptc-font-size-x-large)}@media only screen and (min-width: 768px){div.xx-large.sc-ptc-title h1.sc-ptc-title,div.xx-large.sc-ptc-title h2.sc-ptc-title,div.xx-large.sc-ptc-title h3.sc-ptc-title,div.xx-large.sc-ptc-title h4.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}}div.xxx-large.sc-ptc-title h1.sc-ptc-title,div.xxx-large.sc-ptc-title h2.sc-ptc-title,div.xxx-large.sc-ptc-title h3.sc-ptc-title,div.xxx-large.sc-ptc-title h4.sc-ptc-title,div.xxx-large.sc-ptc-title h5.sc-ptc-title,div.xxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}@media only screen and (min-width: 768px){div.xxx-large.sc-ptc-title h1.sc-ptc-title,div.xxx-large.sc-ptc-title h2.sc-ptc-title,div.xxx-large.sc-ptc-title h3.sc-ptc-title,div.xxx-large.sc-ptc-title h4.sc-ptc-title,div.xxx-large.sc-ptc-title h5.sc-ptc-title,div.xxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}}div.xxxx-large.sc-ptc-title h1.sc-ptc-title,div.xxxx-large.sc-ptc-title h2.sc-ptc-title,div.xxxx-large.sc-ptc-title h3.sc-ptc-title,div.xxxx-large.sc-ptc-title h4.sc-ptc-title,div.xxxx-large.sc-ptc-title h5.sc-ptc-title,div.xxxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}@media screen and (min-width: 769px){div.xxxx-large.sc-ptc-title h1.sc-ptc-title,div.xxxx-large.sc-ptc-title h2.sc-ptc-title,div.xxxx-large.sc-ptc-title h3.sc-ptc-title,div.xxxx-large.sc-ptc-title h4.sc-ptc-title,div.xxxx-large.sc-ptc-title h5.sc-ptc-title,div.xxxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}}div.xx-large-allbp.sc-ptc-title h1.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h2.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h3.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h4.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h5.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}div.xxxx-large-allbp.sc-ptc-title h1.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h2.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h3.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h4.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h5.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}div.xxxx-large-desktop.sc-ptc-title h1.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h2.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h3.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h4.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h5.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}@media only screen and (min-width: 992px){div.xxxx-large-desktop.sc-ptc-title h1.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h2.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h3.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h4.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h5.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}}div.xxxx-large-store.sc-ptc-title h1.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h2.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h3.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h4.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h5.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}@media only screen and (min-width: 992px){div.xxxx-large-store.sc-ptc-title h1.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h2.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h3.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h4.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h5.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}}div.densest.sc-ptc-title h1.sc-ptc-title,div.densest.sc-ptc-title h2.sc-ptc-title,div.densest.sc-ptc-title h3.sc-ptc-title,div.densest.sc-ptc-title h4.sc-ptc-title,div.densest.sc-ptc-title h5.sc-ptc-title,div.densest.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-densest)}div.denser.sc-ptc-title h1.sc-ptc-title,div.denser.sc-ptc-title h2.sc-ptc-title,div.denser.sc-ptc-title h3.sc-ptc-title,div.denser.sc-ptc-title h4.sc-ptc-title,div.denser.sc-ptc-title h5.sc-ptc-title,div.denser.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-denser)}div.dense.sc-ptc-title h1.sc-ptc-title,div.dense.sc-ptc-title h2.sc-ptc-title,div.dense.sc-ptc-title h3.sc-ptc-title,div.dense.sc-ptc-title h4.sc-ptc-title,div.dense.sc-ptc-title h5.sc-ptc-title,div.dense.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-dense)}div.normal.sc-ptc-title h1.sc-ptc-title,div.normal.sc-ptc-title h2.sc-ptc-title,div.normal.sc-ptc-title h3.sc-ptc-title,div.normal.sc-ptc-title h4.sc-ptc-title,div.normal.sc-ptc-title h5.sc-ptc-title,div.normal.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-normal)}div.loose.sc-ptc-title h1.sc-ptc-title,div.loose.sc-ptc-title h2.sc-ptc-title,div.loose.sc-ptc-title h3.sc-ptc-title,div.loose.sc-ptc-title h4.sc-ptc-title,div.loose.sc-ptc-title h5.sc-ptc-title,div.loose.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-loose)}div.looser.sc-ptc-title h1.sc-ptc-title,div.looser.sc-ptc-title h2.sc-ptc-title,div.looser.sc-ptc-title h3.sc-ptc-title,div.looser.sc-ptc-title h4.sc-ptc-title,div.looser.sc-ptc-title h5.sc-ptc-title,div.looser.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-looser)}div.paragraph.sc-ptc-title h1.sc-ptc-title,div.paragraph.sc-ptc-title h2.sc-ptc-title,div.paragraph.sc-ptc-title h3.sc-ptc-title,div.paragraph.sc-ptc-title h4.sc-ptc-title,div.paragraph.sc-ptc-title h5.sc-ptc-title,div.paragraph.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-paragraph)}div.black.sc-ptc-title h1.sc-ptc-title,div.black.sc-ptc-title h2.sc-ptc-title,div.black.sc-ptc-title h3.sc-ptc-title,div.black.sc-ptc-title h4.sc-ptc-title,div.black.sc-ptc-title h5.sc-ptc-title,div.black.sc-ptc-title h6.sc-ptc-title{color:var(--color-black)}div.white.sc-ptc-title h1.sc-ptc-title,div.white.sc-ptc-title h2.sc-ptc-title,div.white.sc-ptc-title h3.sc-ptc-title,div.white.sc-ptc-title h4.sc-ptc-title,div.white.sc-ptc-title h5.sc-ptc-title,div.white.sc-ptc-title h6.sc-ptc-title{color:var(--color-white)}div.gray-1.sc-ptc-title h1.sc-ptc-title,div.gray-1.sc-ptc-title h2.sc-ptc-title,div.gray-1.sc-ptc-title h3.sc-ptc-title,div.gray-1.sc-ptc-title h4.sc-ptc-title,div.gray-1.sc-ptc-title h5.sc-ptc-title,div.gray-1.sc-ptc-title h6.sc-ptc-title{color:var(--color-gray-01)}div.gray.sc-ptc-title h1.sc-ptc-title,div.gray.sc-ptc-title h2.sc-ptc-title,div.gray.sc-ptc-title h3.sc-ptc-title,div.gray.sc-ptc-title h4.sc-ptc-title,div.gray.sc-ptc-title h5.sc-ptc-title,div.gray.sc-ptc-title h6.sc-ptc-title{color:var(--color-gray-10)}div.gray-darker.sc-ptc-title h1.sc-ptc-title,div.gray-darker.sc-ptc-title h2.sc-ptc-title,div.gray-darker.sc-ptc-title h3.sc-ptc-title,div.gray-darker.sc-ptc-title h4.sc-ptc-title,div.gray-darker.sc-ptc-title h5.sc-ptc-title,div.gray-darker.sc-ptc-title h6.sc-ptc-title{color:var(--color-gray-11)}div.ellipsis-boxing.sc-ptc-title h1.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h2.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h3.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h4.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h5.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h6.sc-ptc-title{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;padding-bottom:0}div.block.sc-ptc-title h1.sc-ptc-title,div.block.sc-ptc-title h2.sc-ptc-title,div.block.sc-ptc-title h3.sc-ptc-title,div.block.sc-ptc-title h4.sc-ptc-title,div.block.sc-ptc-title h5.sc-ptc-title,div.block.sc-ptc-title h6.sc-ptc-title{display:block}";
|
|
11658
|
-
|
|
11659
|
-
const PtcTitle = class {
|
|
11660
|
-
constructor(hostRef) {
|
|
11661
|
-
registerInstance(this, hostRef);
|
|
11662
|
-
this.isPlmHub = false;
|
|
11663
|
-
this.type = 'h2';
|
|
11664
|
-
this.textAlign = undefined;
|
|
11665
|
-
this.upperline = 'dotted';
|
|
11666
|
-
this.titleShadow = undefined;
|
|
11667
|
-
this.titleColor = 'gray';
|
|
11668
|
-
this.titleMargin = undefined;
|
|
11669
|
-
this.titleWeight = undefined;
|
|
11670
|
-
this.titleSize = undefined;
|
|
11671
|
-
this.titleHeight = 'densest';
|
|
11672
|
-
this.styles = undefined;
|
|
11673
|
-
this.ellipsisLineCutoff = undefined;
|
|
11674
|
-
this.titleDisplay = 'inline-block';
|
|
11675
|
-
}
|
|
11676
|
-
render() {
|
|
11677
|
-
const classMap = this.getCssClassMap();
|
|
11678
|
-
const cutOff = this.getLineCuttoff();
|
|
11679
|
-
let TagType;
|
|
11680
|
-
switch (this.type) {
|
|
11681
|
-
case 'h1':
|
|
11682
|
-
TagType = 'h1';
|
|
11683
|
-
break;
|
|
11684
|
-
case 'h3':
|
|
11685
|
-
TagType = 'h3';
|
|
11686
|
-
break;
|
|
11687
|
-
case 'h4':
|
|
11688
|
-
TagType = 'h4';
|
|
11689
|
-
break;
|
|
11690
|
-
case 'h5':
|
|
11691
|
-
TagType = 'h5';
|
|
11692
|
-
break;
|
|
11693
|
-
case 'h6':
|
|
11694
|
-
TagType = 'h6';
|
|
11695
|
-
break;
|
|
11696
|
-
default:
|
|
11697
|
-
TagType = 'h2';
|
|
11698
|
-
}
|
|
11699
|
-
return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h(TagType, { style: cutOff }, h("slot", null)))));
|
|
11700
|
-
}
|
|
11701
|
-
getCssClassMap() {
|
|
11702
|
-
return {
|
|
11703
|
-
[this.textAlign]: !!this.textAlign ? true : false,
|
|
11704
|
-
[this.upperline]: true,
|
|
11705
|
-
[this.isPlmHub ? 'is-plm-hub' : 'is-standard']: true,
|
|
11706
|
-
[this.titleMargin]: !!this.titleMargin ? true : false,
|
|
11707
|
-
[this.titleShadow]: !!this.titleShadow ? true : false,
|
|
11708
|
-
[this.titleWeight]: !!this.titleWeight ? true : false,
|
|
11709
|
-
[this.titleSize]: !!this.titleSize ? true : false,
|
|
11710
|
-
[this.titleHeight]: !!this.titleHeight ? true : false,
|
|
11711
|
-
[this.titleColor]: !!this.titleColor ? true : false,
|
|
11712
|
-
['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0,
|
|
11713
|
-
[this.titleDisplay]: !!this.titleDisplay ? true : false,
|
|
11714
|
-
};
|
|
11715
|
-
}
|
|
11716
|
-
getLineCuttoff() {
|
|
11717
|
-
let result;
|
|
11718
|
-
if (this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0) {
|
|
11719
|
-
result = {
|
|
11720
|
-
['-webkit-line-clamp']: `${this.ellipsisLineCutoff}`,
|
|
11721
|
-
};
|
|
11722
|
-
}
|
|
11723
|
-
return result;
|
|
11724
|
-
}
|
|
11725
|
-
};
|
|
11726
|
-
PtcTitle.style = ptcTitleCss;
|
|
11727
|
-
|
|
11728
|
-
export { EmbeddedForm as embedded_form, MaxWidthContainer as max_width_container, PtcButton as ptc_button, PtcDataLookup as ptc_data_lookup, PtcFormCheckbox as ptc_form_checkbox, PtcSelect as ptc_select, PtcSpacer as ptc_spacer, PtcTextfield as ptc_textfield, PtcTitle as ptc_title };
|
|
10942
|
+
export { PtcFormCheckbox as ptc_form_checkbox, PtcSelect as ptc_select, PtcTextfield as ptc_textfield };
|