@ptcwebops/ptcw-design 6.4.36-beta → 6.5.0-upgrade

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

@@ -1,647 +0,0 @@
-import { h, Host, } from "@stencil/core";
-import { MDCSelect } from "@material/select";
-// import { MDCSelectHelperText } from '@material/select/helper-text';
-import { ValidationMessages } from "../../utils/validation-messages";
-import { getLanguageFromURL } from "../../utils/utils";
-export class PtcSelect {
-  constructor() {
-    this.lastInteraction = "mouse";
-    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;
-    this.helpertext = "Please select a value.";
-    this.fieldName = undefined;
-    this.disabled = false;
-    this.selectedValue = "";
-    this.defaultValue = "";
-    this.infoText = undefined;
-    this.ptcDataEloquaName = undefined;
-    this.ptcDataTargetEloquaName = undefined;
-    this.language = "en";
-  }
-  async setValue() {
-    this.defaultSelect.value = this.defaultValue;
-  }
-  componentWillLoad() {
-    this.language = getLanguageFromURL();
-    this.helpertext = this.getValidationMessage("select");
-  }
-  componentDidLoad() {
-    this.defaultSelect = new MDCSelect(this.el.querySelector(".mdc-select"));
-    if (this.defaultValue)
-      this.setValue();
-    this.defaultSelect.listen("MDCSelect:change", () => {
-      if (this.selectedValue !== this.defaultSelect.value) {
-        this.valueChange.emit(this.defaultSelect.value);
-        this.selectedValue = this.defaultSelect.value;
-        if (this.fieldId === "contact-country") {
-          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.addKeyboardAccessibility();
-    this.setupFocusHandlers();
-  }
-  disconnectedCallback() {
-    if (this.defaultSelect) {
-      this.defaultSelect.destroy();
-    }
-  }
-  addKeyboardAccessibility() {
-    const selectAnchor = this.el.querySelector(".mdc-select__anchor");
-    const menu = this.el.querySelector(".mdc-select__menu");
-    if (!selectAnchor || !menu) {
-      console.warn("ptc-select: Unable to find select anchor or menu elements.");
-      return;
-    }
-    selectAnchor.addEventListener("keydown", (event) => {
-      const key = event.key;
-      switch (key) {
-        case "Enter":
-          event.preventDefault();
-          this.defaultSelect.open = !this.defaultSelect.open;
-          if (this.defaultSelect.open) {
-            this.setFocusToFirstMenuitem();
-          }
-          break;
-        case "ArrowDown":
-        case "ArrowUp":
-          break;
-        case "Escape":
-          if (this.defaultSelect.open) {
-            this.defaultSelect.open = false;
-            selectAnchor.focus();
-            event.preventDefault();
-          }
-          break;
-        case "Tab":
-          if (this.defaultSelect.open) {
-            this.defaultSelect.open = false;
-          }
-          break;
-        default:
-          break;
-      }
-    });
-  }
-  // Focus the first menu item in the dropdown
-  setFocusToFirstMenuitem() {
-    const firstMenuItem = this.el.querySelector(".mdc-list-item");
-    if (firstMenuItem) {
-      firstMenuItem.focus();
-    }
-  }
-  setFocusToNextMenuitem(currentMenuitem) {
-    const menuItems = Array.from(this.el.querySelectorAll(".mdc-list-item"));
-    const currentIndex = menuItems.indexOf(currentMenuitem);
-    const nextIndex = (currentIndex + 1) % menuItems.length;
-    menuItems[nextIndex].focus();
-  }
-  setFocusToPreviousMenuitem(currentMenuitem) {
-    const menuItems = Array.from(this.el.querySelectorAll(".mdc-list-item"));
-    const currentIndex = menuItems.indexOf(currentMenuitem);
-    const previousIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
-    menuItems[previousIndex].focus();
-  }
-  getValidationMessage(type) {
-    return ValidationMessages[this.language][type];
-  }
-  getSelectClassName() {
-    let className = "mdc-select mdc-select--outlined mdc-select--no-label mf-listen";
-    if (this.isRequired) {
-      className = `${className} mdc-select--required`;
-    }
-    return className;
-  }
-  setupFocusHandlers() {
-    // Track the last interaction type
-    document.addEventListener("mousedown", () => {
-      this.lastInteraction = "mouse";
-    });
-    document.addEventListener("keydown", (e) => {
-      if (e.key === "Tab") {
-        this.lastInteraction = "keyboard";
-      }
-    });
-    const selectFields = document.querySelectorAll(".mdc-select");
-    selectFields.forEach((selectField) => {
-      const select = selectField.querySelector(".mdc-select__anchor");
-      if (select) {
-        select.addEventListener("focus", () => {
-          if (this.lastInteraction === "keyboard") {
-            selectField.classList.add("keyboard-focus");
-            selectField.classList.remove("mouse-focus");
-          }
-          else {
-            selectField.classList.add("mouse-focus");
-            selectField.classList.remove("keyboard-focus");
-          }
-        });
-        select.addEventListener("blur", () => {
-          selectField.classList.remove("keyboard-focus", "mouse-focus");
-        });
-      }
-    });
-  }
-  handleWindowResize() {
-    var _a, _b;
-    if (this.defaultSelect) {
-      (_b = (_a = this.defaultSelect).layout) === null || _b === void 0 ? void 0 : _b.call(_a);
-    }
-  }
-  render() {
-    return (h(Host, { class: "ptc-select mf-listen" }, h("div", { class: this.getSelectClassName() }, h("label", { class: "ptc-label-select", htmlFor: this.fieldId }, this.label), 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: "10", height: "10", 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", role: "listbox", "aria-label": this.label }, 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), this.infoText ? (h("p", { class: "mdc-select-helper-text mdc-select-helper-text--info-msg" }, this.infoText)) : null)));
-  }
-  static get is() { return "ptc-select"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-select.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-select.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "fieldId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "field-id",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "isRequired": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-required",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "helpertext": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "helpertext",
-        "reflect": false,
-        "defaultValue": "\"Please select a value.\""
-      },
-      "fieldName": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "field-name",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "selectedValue": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "selected-value",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "defaultValue": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "default-value",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "infoText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "info-text",
-        "reflect": false
-      },
-      "ptcDataEloquaName": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Eloqua Data"
-        },
-        "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
-      }
-    };
-  }
-  static get states() {
-    return {
-      "language": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "valueChange",
-        "name": "valueChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleWindowResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}