@ptcwebops/ptcw-design 3.0.0 → 3.0.2

package/dist/collection/components/ptc-select/ptc-select.js

@@ -3,6 +3,253 @@ import { MDCSelect } from '@material/select';
 // import { MDCSelectHelperText } from '@material/select/helper-text';
 export class PtcSelect {
   constructor() {
+    // helperTextComponent: any;
+    this.map = {
+      'Afghanistan': 'AF',
+      'Albania': 'AL',
+      'Algeria': 'DZ',
+      'American Samoa': 'AS',
+      'Andorra': 'AD',
+      'Angola': 'AO',
+      'Anguilla': 'AI',
+      'Antarctica': 'AQ',
+      'Antigua and Barbuda': 'AG',
+      'Argentina': 'AR',
+      'Armenia': 'AM',
+      'Aruba': 'AW',
+      'Australia': 'AU',
+      'Austria': 'AT',
+      'Azerbaijan': 'AZ',
+      'Bahamas': 'BS',
+      'Bahrain': 'BH',
+      'Bangladesh': 'BD',
+      'Barbados': 'BB',
+      'Belarus': 'BY',
+      'Belgium': 'BE',
+      'Belize': 'BZ',
+      'Benin': 'BJ',
+      'Bermuda': 'BM',
+      'Bhutan': 'BT',
+      'Bolivia': 'BO',
+      'Bosnia and Herzegovina': 'BA',
+      'Botswana': 'BW',
+      'Bouvet Island': 'BV',
+      'Brazil': 'BR',
+      'British Indian Ocean Territory': 'IO',
+      'Brunei Darussalam': 'BN',
+      'Bulgaria': 'BG',
+      'Burkina Faso': 'BF',
+      'Burundi': 'BI',
+      'Cambodia': 'KH',
+      'Cameroon': 'CM',
+      'Canada': 'CA',
+      'Cape Verde': 'CV',
+      'Cayman Islands': 'KY',
+      'Central African Republic': 'CF',
+      'Chad': 'TD',
+      'Chile': 'CL',
+      'China': 'CN',
+      'Christmas Island': 'CX',
+      'Cocos (Keeling) Islands': 'CC',
+      'Colombia': 'CO',
+      'Comoros': 'KM',
+      'Congo': 'CG',
+      'Congo, Democratic Republic': 'CD',
+      'Cook Islands': 'CK',
+      'Costa Rica': 'CR',
+      'Cote d ivoire': 'CI',
+      'Croatia': 'HR',
+      'Cuba': 'CU',
+      'Cyprus': 'CY',
+      'Czech Republic': 'CZ',
+      'Denmark': 'DK',
+      'Djibouti': 'DJ',
+      'Dominica': 'DM',
+      'Dominican Republic': 'DO',
+      'Ecuador': 'EC',
+      'Egypt': 'EG',
+      'El Salvador': 'SV',
+      'Equatorial Guinea': 'GQ',
+      'Eritrea': 'ER',
+      'Estonia': 'EE',
+      'Ethiopia': 'ET',
+      'Falkland Islands': 'FK',
+      'Faroe Islands': 'FO',
+      'Fiji': 'FJ',
+      'Finland': 'FI',
+      'France': 'FR',
+      'French Guiana': 'GF',
+      'French Polynesia': 'PF',
+      'French Southern Territories': 'TF',
+      'Gabon': 'GA',
+      'Gambia': 'GM',
+      'Georgia': 'GE',
+      'Germany': 'DE',
+      'Ghana': 'GH',
+      'Gibraltar': 'GI',
+      'Greece': 'GR',
+      'Greenland': 'GL',
+      'Grenada': 'GD',
+      'Guadeloupe': 'GP',
+      'Guam': 'GU',
+      'Guatemala': 'GT',
+      'Guernsey': 'GG',
+      'Guinea': 'GN',
+      'Guinea-Bissau': 'GW',
+      'Guyana': 'GY',
+      'Haiti': 'HT',
+      'Heard and McDonald Isl': 'HM',
+      'Holy See (Vatican City State)': 'VA',
+      'Honduras': 'HN',
+      'Hong Kong': 'HK',
+      'Hungary': 'HU',
+      'Iceland': 'IS',
+      'India': 'IN',
+      'Indonesia': 'ID',
+      'Iran, Islamic Republic Of': 'IR',
+      'Iraq': 'IQ',
+      'Ireland': 'IE',
+      'Isle Of Man': 'IM',
+      'Israel': 'IL',
+      'Italy': 'IT',
+      'Jamaica': 'JM',
+      'Japan': 'JP',
+      'Jersey': 'JE',
+      'Jordan': 'JO',
+      'Kazakhstan': 'KZ',
+      'Kenya': 'KE',
+      'Kiribati': 'KI',
+      'Korea': 'KR',
+      'Kuwait': 'KW',
+      'Kyrgyzstan': 'KG',
+      "Lao People's Democratic Republic": 'LA',
+      'Latvia': 'LV',
+      'Lebanon': 'LB',
+      'Lesotho': 'LS',
+      'Liberia': 'LR',
+      'Libyan Arab Jamahiriya': 'LY',
+      'Liechtenstein': 'LI',
+      'Lithuania': 'LT',
+      'Luxembourg': 'LU',
+      'Macao': 'MO',
+      'Macedonia': 'MK',
+      'Madagascar': 'MG',
+      'Malawi': 'MW',
+      'Malaysia': 'MY',
+      'Maldives': 'MV',
+      'Mali': 'ML',
+      'Malta': 'MT',
+      'Marshall Islands': 'MH',
+      'Martinique': 'MQ',
+      'Mauritania': 'MR',
+      'Mauritius': 'MU',
+      'Mayotte': 'YT',
+      'Mexico': 'MX',
+      'Micronesia, Federated States Of': 'FM',
+      'Moldova': 'MD',
+      'Monaco': 'MC',
+      'Mongolia': 'MN',
+      'Montenegro': 'ME',
+      'Montserrat': 'MS',
+      'Morocco': 'MA',
+      'Mozambique': 'MZ',
+      'Myanmar': 'MM',
+      'Namibia': 'NA',
+      'Nauru': 'NR',
+      'Nepal': 'NP',
+      'Netherlands': 'NL',
+      'Netherlands Antilles': 'AN',
+      'New Caledonia': 'NC',
+      'New Zealand': 'NZ',
+      'Nicaragua': 'NI',
+      'Niger': 'NE',
+      'Nigeria': 'NG',
+      'Niue': 'NU',
+      'Norfolk Island': 'NF',
+      'Northern Mariana Islands': 'MP',
+      'Norway': 'NO',
+      'Oman': 'OM',
+      'Pakistan': 'PK',
+      'Palau': 'PW',
+      'Palestinian Territory, Occupied': 'PS',
+      'Panama': 'PA',
+      'Papua New Guinea': 'PG',
+      'Paraguay': 'PY',
+      'Peru': 'PE',
+      'Philippines': 'PH',
+      'Pitcairn': 'PN',
+      'Poland': 'PL',
+      'Portugal': 'PT',
+      'Puerto Rico': 'PR',
+      'Qatar': 'QA',
+      'Reunion': 'RE',
+      'Romania': 'RO',
+      'Russian Federation': 'RU',
+      'Rwanda': 'RW',
+      'Saint Barthelemy': 'BL',
+      'Saint Helena': 'SH',
+      'Saint Kitts and Nevis': 'KN',
+      'Saint Lucia': 'LC',
+      'Saint Martin': 'MF',
+      'Saint Pierre and Miquelon': 'PM',
+      'Saint Vincent and Grenadines': 'VC',
+      'Samoa': 'WS',
+      'San Marino': 'SM',
+      'Sao Tome and Principe': 'ST',
+      'Saudi Arabia': 'SA',
+      'Senegal': 'SN',
+      'Serbia': 'RS',
+      'Seychelles': 'SC',
+      'Sierra Leone': 'SL',
+      'Singapore': 'SG',
+      'Slovakia': 'SK',
+      'Slovenia': 'SI',
+      'Solomon Islands': 'SB',
+      'Somalia': 'SO',
+      'South Africa': 'ZA',
+      'South Georgia and Sandwich Isl.': 'GS',
+      'Spain': 'ES',
+      'Sri Lanka': 'LK',
+      'Sudan': 'SD',
+      'Suriname': 'SR',
+      'Svalbard and Jan Mayen': 'SJ',
+      'Swaziland': 'SZ',
+      'Sweden': 'SE',
+      'Switzerland': 'CH',
+      'Syrian Arab Republic': 'SY',
+      'Taiwan': 'TW',
+      'Tajikistan': 'TJ',
+      'Tanzania': 'TZ',
+      'Thailand': 'TH',
+      'Timor-Leste': 'TL',
+      'Togo': 'TG',
+      'Tokelau': 'TK',
+      'Tonga': 'TO',
+      'Trinidad and Tobago': 'TT',
+      'Tunisia': 'TN',
+      'Turkey': 'TR',
+      'Turkmenistan': 'TM',
+      'Turks and Caicos Islands': 'TC',
+      'Tuvalu': 'TV',
+      'Uganda': 'UG',
+      'Ukraine': 'UA',
+      'United Arab Emirates': 'AE',
+      'United Kingdom': 'GB',
+      'USA': 'US',
+      'US Minor Outlying Islands': 'UM',
+      'Uruguay': 'UY',
+      'Uzbekistan': 'UZ',
+      'Vanuatu': 'VU',
+      'Venezuela': 'VE',
+      'Vietnam': 'VN',
+      'Virgin Islands (British)': 'VG',
+      'Virgin Islands (U.S.)': 'VI',
+      'Wallis And Futuna': 'WF',
+      'Western Sahara': 'EH',
+      'Yemen': 'YE',
+      'Zambia': 'ZM',
+      'Zimbabwe': 'ZW',
+    };
     this.fieldId = undefined;
     this.label = undefined;
     this.isRequired = true;
@@ -11,15 +258,22 @@ export class PtcSelect {
     this.disabled = false;
     this.selectedValue = '';
     this.ptcDataEloquaName = undefined;
+    this.ptcDataTargetEloquaName = undefined;
   }
-  // helperTextComponent: any;
   componentDidLoad() {
     const select = new MDCSelect(this.el.querySelector('.mdc-select'));
     select.listen('MDCSelect:change', () => {
       this.valueChange.emit(select.value);
       this.selectedValue = select.value;
+      if (this.fieldId === 'contact-country') {
+        console.log('changing country field value');
+        const countryCode = this.selectedValue ? this.map[this.selectedValue] : '';
+        const telField = document.querySelector('ptc-textfield[field-id="contact-phone"]');
+        if (telField && countryCode) {
+          telField.syncCountry(countryCode);
+        }
+      }
     });
-    // this.helperTextComponent = new MDCSelectHelperText(this.el.querySelector('.mdc-select-helper-text'));
   }
   getSelectClassName() {
     let className = 'mdc-select mdc-select--outlined mdc-select--no-label';
@@ -29,7 +283,7 @@ export class PtcSelect {
     return className;
   }
   render() {
-    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.name, "aria-describedby": this.name, "data-eloqua-name": this.ptcDataEloquaName })), 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.name, 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)));
+    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.name, "aria-describedby": this.name, "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.name, 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)));
   }
   static get is() { return "ptc-select"; }
   static get originalStyleUrls() {
@@ -183,6 +437,23 @@ export class PtcSelect {
         },
         "attribute": "ptc-data-eloqua-name",
         "reflect": false
+      },
+      "ptcDataTargetEloquaName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "ptc-data-target-eloqua-name",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/ptc-textfield/ptc-textfield.js

@@ -13,7 +13,9 @@ export class PtcTextfield {
     this.disabled = false;
     this.name = 'email';
     this.ptcDataEloquaName = undefined;
+    this.ptcDataTargetEloquaName = undefined;
     this.inputValue = '';
+    this.customValidation = undefined;
   }
   handleInput(event) {
     this.inputValue = event.target.value;
@@ -22,10 +24,21 @@ export class PtcTextfield {
   inputBlurHandler() {
     // console.log(event.target)
     // this.getPhoneValidation();
-    this.setErrorBackground();
-    setTimeout(() => {
-      this.getPhoneValidation();
-    }, 100);
+    if (this.customValidation) {
+      let message = this.customValidation(this.customInput);
+      this.customInput.setCustomValidity(message);
+      this.customInput.reportValidity();
+      this.setErrorBackground();
+    }
+    else {
+      this.setErrorBackground();
+      setTimeout(() => {
+        this.getPhoneValidation();
+      }, 100);
+    }
+  }
+  async syncCountry(countryCode) {
+    this.iti.setCountry(countryCode);
   }
   componentDidLoad() {
     if (this.type !== 'hidden') {
@@ -41,8 +54,14 @@ export class PtcTextfield {
     if (this.fieldId === 'contact-phone' && this.name === 'phone') {
       this.iti = intlTelInput(this.customInput, {
         separateDialCode: true,
-        initialCountry: 'us',
+        initialCountry: 'auto',
         nationalMode: true,
+        geoIpLookup: callback => {
+          fetch("https://ipapi.co/json")
+            .then(res => res.json())
+            .then(data => callback(data.country_code))
+            .catch(() => callback("us"));
+        },
         utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/utils.min.js', // Required for formatting/validation
       });
     }
@@ -148,7 +167,7 @@ export class PtcTextfield {
           this.mdcTextfield = mdcTextfield;
         } }, 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 => {
           this.customInput = customInput;
-        }, 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.name, "aria-describedby": this.name, "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null)))),
+        }, 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.name, "aria-describedby": this.name, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null)))),
       h("div", { class: `mdc-text-field-helper-line
                    ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.name }, 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),
     ]) : (h("input", { type: "hidden", "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }))));
@@ -325,6 +344,23 @@ export class PtcTextfield {
         "attribute": "ptc-data-eloqua-name",
         "reflect": false
       },
+      "ptcDataTargetEloquaName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "ptc-data-target-eloqua-name",
+        "reflect": false
+      },
       "inputValue": {
         "type": "string",
         "mutable": true,
@@ -342,6 +378,48 @@ export class PtcTextfield {
         "attribute": "input-value",
         "reflect": false,
         "defaultValue": "''"
+      },
+      "customValidation": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(input: HTMLInputElement) => string",
+          "resolved": "(input: HTMLInputElement) => string",
+          "references": {
+            "HTMLInputElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "syncCountry": {
+        "complexType": {
+          "signature": "(countryCode: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }

package/dist/collection/utils/elq-lib.js

@@ -323,8 +323,10 @@ export class ElqLib {
   init_notme() {
     const topAdditional = document.getElementById('not-me-additional-top');
     const bottomAdditional = document.getElementById('not-me-additional-bottom');
-    topAdditional.style.display = 'none';
-    bottomAdditional.style.display = 'none';
+    if (topAdditional)
+      topAdditional.style.display = 'none';
+    if (bottomAdditional)
+      bottomAdditional.style.display = 'none';
   }
   remove_user_details(e) {
     e.preventDefault();