@ptcwebops/ptcw-design 3.6.8 → 3.7.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2018
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/academic-form-test.cjs.entry.js

@@ -6,84 +6,84 @@ const index = require('./index-cd9a1b1a.js');
 
 const academicFormTestCss = "h1,h2,h3,h4,h5,h6,p,ul,li{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}.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}.form-wrapper>form{max-width:277px}.form-wrapper>ptc-button{align-items:center}.form-wrapper .ptc-label{display:block;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:normal;margin-bottom:var(--ptc-element-spacing-04);position:relative;z-index:1;color:var(--color-gray-13)}";
 
-const AcademicForm = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.formData = {
-      email: '',
-      firstName: '',
-      lastName: '',
-      company: '',
-      country: '',
-      phone: '',
-      inquiryReason: '',
-      howhearselfreport: '',
-      policyChecked: false,
-    };
-  }
-  // private countryEle: HTMLPtcSelectElement;
-  // private inquiryreasonEle: HTMLPtcTextfieldElement;
-  // private howhearselfreport: HTMLPtcTextfieldElement;
-  componentDidLoad() {
-    this.formButton = this.el.querySelector('.form-submit');
-    this.formButton.addEventListener('click', this.handleSubmit.bind(this));
-    //get Email
-    this.emailEle = this.el.querySelector('ptc-textfield[field-id="contact-email"]');
-    this.firstNameEle = this.el.querySelector('ptc-textfield[field-id="contact-firstname"]');
-    this.lastNameEle = this.el.querySelector('ptc-textfield[field-id="contact-lastname"]');
-    this.companyEle = this.el.querySelector('ptc-textfield[field-id="company"]');
-    this.phoneEle = this.el.querySelector('ptc-textfield[field-id="contact-phone"]');
-    // this.countryEle = this.el.querySelector('ptc-select[field-id="contact-country"]')
-    // this.inquiryreasonEle = this.el.querySelector('ptc-textfield[field-id="contact-inquiry"]')
-    // this.howhearselfreport = this.el.querySelector('ptc-textfield[field-id="self-reporting"]')
-  }
-  handleInputChange(field, value) {
-    this.formData = Object.assign(Object.assign({}, this.formData), { [field]: value });
-  }
-  handleSubmit(event) {
-    event.preventDefault();
-    this.formData.email = this.emailEle.inputValue;
-    this.formData.firstName = this.firstNameEle.inputValue;
-    this.formData.lastName = this.lastNameEle.inputValue;
-    this.formData.company = this.companyEle.inputValue;
-    this.formData.phone = this.phoneEle.inputValue;
-    // this.formData.country = this.countryEle.inputValue;
-    // this.formData.inquiryReason= this.inquiryreasonEle.inputValue;
-    // this.formData.howhearselfreport = this.howhearselfreport.inputValue;
-    // console.log("get form Data: " + this.formData.email)
-    if (this.isValid()) {
-      const formSubmitEvent = new CustomEvent('formSubmit', {
-        detail: this.formData,
-        bubbles: true,
-      });
-      this.el.dispatchEvent(formSubmitEvent);
-      console.log('Form Submitted: ' + this.formData);
-    }
-    else {
-      console.log('Form validation failed');
-      console.log('Form Submitted: ' + this.formData.email, this.formData.firstName, this.formData.lastName, this.formData.company, this.formData.phone);
-    }
-  }
-  isValid() {
-    const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked } = this.formData;
-    const invalidLength = document.querySelectorAll('.invalid-field').length;
-    // console.log('invalid fields length: ' + invalidLength), check the select field
-    return (email !== '' &&
-      phone !== '' &&
-      firstName !== '' &&
-      lastName !== '' &&
-      company !== '' &&
-      country !== '' &&
-      inquiryReason !== '' &&
-      howhearselfreport != '' &&
-      policyChecked &&
-      invalidLength === 0);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, index.h("div", { class: "form-wrapper" }, index.h("max-width-container", { "max-width": "277", breakpoint: 480 }, index.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."), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" })), index.h("form", { onSubmit: event => this.handleSubmit(event) }, index.h("ptc-label", { class: "ptc-label" }, "Your Information"), index.h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), index.h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "alert-text": "Minimum Age Required", "alert-text-content": "If you are under the age of 14 years old, you must use your parent/guardian email address.", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), index.h("ptc-textfield", { "field-id": "confirm-email", "label-text": "Confirm your Email*", type: "email", "ptc-data-eloqua-name": "emailconfirmation", "field-name": "confirm-email", "custom-validation": "Email addresses must match." }), index.h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), index.h("ptc-textfield", { "field-id": "contact-city", "label-text": "City*", type: "text", "ptc-data-eloqua-name": "C_City", "field-name": "contact-city" }), index.h("ptc-textfield", { "field-id": "contact-zipcode", "label-text": "Zip Code*", type: "text", "ptc-data-eloqua-name": "C_Zip_Postal", "field-name": "zipcode-field" }), index.h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "USA" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "USA")), index.h("li", { class: "mdc-list-item", "data-value": "Canada" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Canada")), index.h("li", { class: "mdc-list-item", "data-value": "China" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "China")))), index.h("ptc-label", { class: "ptc-label" }, "School Information"), index.h("ptc-textfield", { "field-id": "institution", "label-text": "School/Institution Name*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "institution" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "School Level*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "Student Level*", type: "email", "ptc-data-eloqua-name": "gradeLevel1", "field-name": "email" }), index.h("ptc-select", { "field-id": "academic-description", label: "Role of User*", "ptc-data-eloqua-name": "description1", "field-name": "academic-description" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "USA" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "K-12 educator")), index.h("li", { class: "mdc-list-item", "data-value": "Canada" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Professor")), index.h("li", { class: "mdc-list-item", "data-value": "China" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "K-12 student")))), index.h("ptc-textfield", { "field-id": "contact-city", "label-text": "Purpose of use*", type: "text", "ptc-data-eloqua-name": "C_City", "field-name": "contact-city" }), index.h("ptc-textfield", { "field-id": "academic-ofComputers", "label-text": "How many computers are you planning to install this software on?*", type: "text", "ptc-data-eloqua-name": "ofComputers1", "field-name": "academic-ofComputers" }), index.h("ptc-form-checkbox", { label: "I acknowledge that my personal details will be processed in accordance with PTC\u2019s privacy policy and that they may be shared with PTC Inc\u2019s subsidiaries for\r\n               the promotion of PTC\u2019s products and associated services. ", "checkbox-id": "test" }), index.h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block; float: right; width: fit-content;}" }, "Submit"))))));
-  }
-  get el() { return index.getElement(this); }
-};
+const AcademicForm = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.formData = {
+      email: '',
+      firstName: '',
+      lastName: '',
+      company: '',
+      country: '',
+      phone: '',
+      inquiryReason: '',
+      howhearselfreport: '',
+      policyChecked: false,
+    };
+  }
+  // private countryEle: HTMLPtcSelectElement;
+  // private inquiryreasonEle: HTMLPtcTextfieldElement;
+  // private howhearselfreport: HTMLPtcTextfieldElement;
+  componentDidLoad() {
+    this.formButton = this.el.querySelector('.form-submit');
+    this.formButton.addEventListener('click', this.handleSubmit.bind(this));
+    //get Email
+    this.emailEle = this.el.querySelector('ptc-textfield[field-id="contact-email"]');
+    this.firstNameEle = this.el.querySelector('ptc-textfield[field-id="contact-firstname"]');
+    this.lastNameEle = this.el.querySelector('ptc-textfield[field-id="contact-lastname"]');
+    this.companyEle = this.el.querySelector('ptc-textfield[field-id="company"]');
+    this.phoneEle = this.el.querySelector('ptc-textfield[field-id="contact-phone"]');
+    // this.countryEle = this.el.querySelector('ptc-select[field-id="contact-country"]')
+    // this.inquiryreasonEle = this.el.querySelector('ptc-textfield[field-id="contact-inquiry"]')
+    // this.howhearselfreport = this.el.querySelector('ptc-textfield[field-id="self-reporting"]')
+  }
+  handleInputChange(field, value) {
+    this.formData = Object.assign(Object.assign({}, this.formData), { [field]: value });
+  }
+  handleSubmit(event) {
+    event.preventDefault();
+    this.formData.email = this.emailEle.inputValue;
+    this.formData.firstName = this.firstNameEle.inputValue;
+    this.formData.lastName = this.lastNameEle.inputValue;
+    this.formData.company = this.companyEle.inputValue;
+    this.formData.phone = this.phoneEle.inputValue;
+    // this.formData.country = this.countryEle.inputValue;
+    // this.formData.inquiryReason= this.inquiryreasonEle.inputValue;
+    // this.formData.howhearselfreport = this.howhearselfreport.inputValue;
+    // console.log("get form Data: " + this.formData.email)
+    if (this.isValid()) {
+      const formSubmitEvent = new CustomEvent('formSubmit', {
+        detail: this.formData,
+        bubbles: true,
+      });
+      this.el.dispatchEvent(formSubmitEvent);
+      console.log('Form Submitted: ' + this.formData);
+    }
+    else {
+      console.log('Form validation failed');
+      console.log('Form Submitted: ' + this.formData.email, this.formData.firstName, this.formData.lastName, this.formData.company, this.formData.phone);
+    }
+  }
+  isValid() {
+    const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked } = this.formData;
+    const invalidLength = document.querySelectorAll('.invalid-field').length;
+    // console.log('invalid fields length: ' + invalidLength), check the select field
+    return (email !== '' &&
+      phone !== '' &&
+      firstName !== '' &&
+      lastName !== '' &&
+      company !== '' &&
+      country !== '' &&
+      inquiryReason !== '' &&
+      howhearselfreport != '' &&
+      policyChecked &&
+      invalidLength === 0);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, index.h("div", { class: "form-wrapper" }, index.h("max-width-container", { "max-width": "277", breakpoint: 480 }, index.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."), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" })), index.h("form", { onSubmit: event => this.handleSubmit(event) }, index.h("ptc-label", { class: "ptc-label" }, "Your Information"), index.h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), index.h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "alert-text": "Minimum Age Required", "alert-text-content": "If you are under the age of 14 years old, you must use your parent/guardian email address.", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), index.h("ptc-textfield", { "field-id": "confirm-email", "label-text": "Confirm your Email*", type: "email", "ptc-data-eloqua-name": "emailconfirmation", "field-name": "confirm-email", "custom-validation": "Email addresses must match." }), index.h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), index.h("ptc-textfield", { "field-id": "contact-city", "label-text": "City*", type: "text", "ptc-data-eloqua-name": "C_City", "field-name": "contact-city" }), index.h("ptc-textfield", { "field-id": "contact-zipcode", "label-text": "Zip Code*", type: "text", "ptc-data-eloqua-name": "C_Zip_Postal", "field-name": "zipcode-field" }), index.h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "USA" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "USA")), index.h("li", { class: "mdc-list-item", "data-value": "Canada" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Canada")), index.h("li", { class: "mdc-list-item", "data-value": "China" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "China")))), index.h("ptc-label", { class: "ptc-label" }, "School Information"), index.h("ptc-textfield", { "field-id": "institution", "label-text": "School/Institution Name*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "institution" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "School Level*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "Student Level*", type: "email", "ptc-data-eloqua-name": "gradeLevel1", "field-name": "email" }), index.h("ptc-select", { "field-id": "academic-description", label: "Role of User*", "ptc-data-eloqua-name": "description1", "field-name": "academic-description" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "USA" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "K-12 educator")), index.h("li", { class: "mdc-list-item", "data-value": "Canada" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Professor")), index.h("li", { class: "mdc-list-item", "data-value": "China" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "K-12 student")))), index.h("ptc-textfield", { "field-id": "contact-city", "label-text": "Purpose of use*", type: "text", "ptc-data-eloqua-name": "C_City", "field-name": "contact-city" }), index.h("ptc-textfield", { "field-id": "academic-ofComputers", "label-text": "How many computers are you planning to install this software on?*", type: "text", "ptc-data-eloqua-name": "ofComputers1", "field-name": "academic-ofComputers" }), index.h("ptc-form-checkbox", { label: "I acknowledge that my personal details will be processed in accordance with PTC\u2019s privacy policy and that they may be shared with PTC Inc\u2019s subsidiaries for\n               the promotion of PTC\u2019s products and associated services. ", "checkbox-id": "test" }), index.h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block; float: right; width: fit-content;}" }, "Submit"))))));
+  }
+  get el() { return index.getElement(this); }
+};
 AcademicForm.style = academicFormTestCss;
 
 exports.academic_form_test = AcademicForm;