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

package/dist/collection/components/ptc-office-locations/ptc-office-locations.js

@@ -1,482 +0,0 @@
-import { Host, h, } from "@stencil/core";
-import filterSVG from "../../media/svg-imgs/filter.svg";
-import showMapSVG from "../../media/svg-imgs/show-map-icon.svg";
-import hideMapSVG from "../../media/svg-imgs/hide-map-icon.svg";
-export class PtcOfficeLocations {
-  constructor() {
-    this.locations = [];
-    this.regions = [];
-    this.checkboxes = [];
-    this.openRegion = "";
-    this.isMobile = undefined;
-    this.address = undefined;
-    this.regionListManual = undefined;
-    this.showMapText = "Show Map";
-    this.hideMapText = "Hide Map";
-    this.filtersText = "Filters";
-    this.allRegionsText = "All Regions";
-    this.applyText = "Apply";
-    this.clearText = "Clear";
-    this.showMap = false;
-    this.cardScroll = false;
-  }
-  handleResize() {
-    this.isMobile = window.innerWidth < 992;
-    if (this.isMobile) {
-      this.showMap = false;
-    }
-  }
-  handleAddressClicked(event) {
-    // CustomEvent's detail property contains the address
-    event.preventDefault();
-    this.address = event.detail;
-    if (!this.isMobile) {
-      this.showMap = true;
-      if (!this.cardScroll) {
-        const mapTop = this.hostEl.shadowRoot.querySelector(".office-location-list-wrapper");
-        setTimeout(() => {
-          mapTop === null || mapTop === void 0 ? void 0 : mapTop.scrollIntoView({
-            inline: "nearest",
-            block: "start",
-          });
-        }, 100);
-        setTimeout(() => {
-          var _a;
-          (_a = event.target) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-            inline: "nearest",
-            block: "center",
-          });
-          this.cardScroll = this.showMap;
-          mapTop === null || mapTop === void 0 ? void 0 : mapTop.scrollIntoView({
-            inline: "nearest",
-            block: "start",
-          });
-        }, 500);
-      }
-    }
-  }
-  watchStateHandler() {
-    this.checkboxes = Array.from(this.hostEl.shadowRoot.querySelectorAll('.country-list input[type="checkbox"]:checked')).map((checkbox) => [
-      checkbox.value,
-      checkbox.getAttribute("data-continent"),
-    ]);
-  }
-  componentDidUpdate() {
-    this.selectCheckboxesOnScreenResize();
-  }
-  selectCheckboxesOnScreenResize() {
-    const selectedOptions = this.checkboxes;
-    selectedOptions.forEach((region) => {
-      const regionWrap = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region[1].replace(/\s+/g, "")}`);
-      const checkboxSelected = this.hostEl.shadowRoot.querySelector(`#${region[0].replace(/\s+/g, "")}`);
-      if (!regionWrap.classList.contains("selected")) {
-        regionWrap.classList.add("selected");
-      }
-      if (!checkboxSelected.checked) {
-        checkboxSelected.checked = true;
-      }
-    });
-    this.checkboxes = [];
-  }
-  componentWillLoad() {
-    this.isMobile = window.innerWidth < 992;
-    const officeCards = document.querySelectorAll("ptc-office-location-card");
-    officeCards.forEach((card, index) => {
-      const region = card.getAttribute("region");
-      const country = card.getAttribute("country");
-      if (region && country) {
-        this.locations.push({ id: index, region, country });
-      }
-    });
-    if (this.regionListManual) {
-      const regionList = this.regionListManual
-        .split(",")
-        .map((item) => item.trim());
-      this.regions = regionList;
-    }
-    else {
-      // Extract unique regions from locations array
-      const uniqueRegions = Array.from(new Set(this.locations.map((location) => location.region)));
-      // Save unique regions to regions array
-      this.regions = uniqueRegions;
-    }
-    this.showFirstMap();
-  }
-  toggleCountryList(region) {
-    let regionListID = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region.replace(/\s+/g, "")}`);
-    // Toggle open/close state for the clicked region
-    if (this.openRegion === region) {
-      // If the clicked region is already open, close it
-      this.openRegion = "";
-      if (regionListID) {
-        let labelsList = regionListID.querySelectorAll("label");
-        labelsList.forEach((i) => {
-          i.tabIndex = -1;
-        });
-        let btnsList = regionListID.querySelectorAll("ptc-button");
-        btnsList.forEach((i) => {
-          i.tabIndex = -1;
-        });
-      }
-    }
-    else {
-      // Close any previously open region and open the clicked region
-      this.openRegion = region;
-      if (regionListID) {
-        let labelsList = regionListID.querySelectorAll("label");
-        labelsList.forEach((i) => {
-          i.tabIndex = 0;
-        });
-        let btnsList = regionListID.querySelectorAll("ptc-button");
-        btnsList.forEach((i) => {
-          i.removeAttribute("tabIndex");
-        });
-      }
-    }
-  }
-  getCheckboxes(region) {
-    return this.hostEl.shadowRoot.querySelectorAll(`.country-list #region-list-${region.replace(/\s+/g, "")} input[type="checkbox"]`);
-  }
-  selectedCheckboxes() {
-    const selectedOptions = Array.from(this.hostEl.shadowRoot.querySelectorAll('.country-list input[type="checkbox"]:checked')).map((checkbox) => checkbox.value);
-    return selectedOptions;
-  }
-  updateOfficeList() {
-    const selectedOptions = this.selectedCheckboxes();
-    const officeCards = document.querySelectorAll("ptc-office-location-card");
-    officeCards.forEach((card) => {
-      const region = card.getAttribute("region");
-      const country = card.getAttribute("country");
-      // Hide show checboxes
-      if (selectedOptions.length > 0) {
-        if (selectedOptions.includes(region) ||
-          selectedOptions.includes(country)) {
-          card.style.display = "block";
-        }
-        else {
-          card.style.display = "none";
-        }
-      }
-      else {
-        card.style.display = "block";
-      }
-    });
-    this.showFirstMap();
-  }
-  applyFilter(region) {
-    this.updateOfficeList();
-    this.toggleCountryList(region);
-  }
-  clearFilter(region) {
-    const checkboxes = this.getCheckboxes(region);
-    const regionWrap = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region.replace(/\s+/g, "")}`);
-    checkboxes.forEach((checkbox) => {
-      checkbox.checked = false;
-    });
-    regionWrap.classList.remove("selected");
-    this.updateOfficeList();
-    this.toggleCountryList(region);
-  }
-  updateCheckboxStatusOnenter(region, e) {
-    if (e.keyCode == 13) {
-      this.updateCheckboxStatus(region, e);
-    }
-  }
-  updateCheckboxStatus(region, e) {
-    const regionWrap = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region.replace(/\s+/g, "")}`);
-    const checkboxes = this.getCheckboxes(region);
-    const isAllRegionsCheckboxClicked = e.target.id === `all-regions-${region.replace(/\s+/g, "")}` ||
-      (e.keyCode === 13 &&
-        e.target.getAttribute("data-id") ===
-          `all-regions-${region.replace(/\s+/g, "")}`);
-    let AllRegionsCheckBoxSelected = e.target.checked;
-    if (e.keyCode === 13) {
-      const checkBoxSelected = e.target.querySelector("input");
-      if (checkBoxSelected) {
-        checkBoxSelected.checked = !checkBoxSelected.checked;
-        AllRegionsCheckBoxSelected = checkBoxSelected.checked;
-      }
-    }
-    let anyCheckboxSelected = false;
-    checkboxes.forEach((checkbox) => {
-      if (isAllRegionsCheckboxClicked) {
-        checkbox.checked = checkbox.classList.contains("all-region-label")
-          ? AllRegionsCheckBoxSelected
-          : false;
-      }
-      else if (checkbox.classList.contains("all-region-label")) {
-        checkbox.checked = false;
-      }
-      if (checkbox.checked) {
-        anyCheckboxSelected = true;
-      }
-    });
-    regionWrap.classList.toggle("selected", anyCheckboxSelected);
-  }
-  updateSelectedClass(region) {
-    this.fadeInWrapper();
-    const regionWrap = this.hostEl.shadowRoot.querySelector(`#region-wrap-${region.replace(/\s+/g, "")}`);
-    const checkboxes = this.getCheckboxes(region);
-    let isAllRegionSelected;
-    checkboxes.forEach((checkbox) => {
-      if (!checkbox.classList.contains("all-region-label")) {
-        checkbox.checked = false;
-      }
-      if (checkbox.classList.contains("all-region-label")) {
-        checkbox.checked = !checkbox.checked;
-        isAllRegionSelected = checkbox.checked;
-      }
-    });
-    regionWrap.classList.toggle("selected", isAllRegionSelected);
-    this.updateOfficeList();
-    this.toggleCountryList("");
-  }
-  fadeInWrapper() {
-    const ele = this.hostEl.shadowRoot.querySelector(".office-location-list-wrapper");
-    ele.classList.add("updating");
-    // Listen for transitionend event to remove the class after the transition completes
-    ele.addEventListener("transitionend", () => {
-      ele.classList.remove("updating");
-    }, { once: true });
-  }
-  // mobile functions
-  openFilterModal() {
-    const modal = this.hostEl.shadowRoot.querySelector("ptc-modal");
-    modal.show = true;
-  }
-  clearFiltersMobile() {
-    const allChecboxes = this.hostEl.shadowRoot.querySelectorAll(`input[type=checkbox]`);
-    allChecboxes.forEach((checkbox) => {
-      checkbox.checked = false;
-    });
-    this.updateOfficeList();
-    const modal = this.hostEl.shadowRoot.querySelector("ptc-modal");
-    modal.show = false;
-  }
-  applyFilterMobile() {
-    this.updateOfficeList();
-    const modal = this.hostEl.shadowRoot.querySelector("ptc-modal");
-    modal.show = false;
-  }
-  renderCountrylist(region) {
-    const uniqueLocations = [
-      ...new Map(this.locations
-        .filter((location) => location.region === region)
-        .map((item) => [item["country"], item])).values(),
-    ];
-    return (h("ul", { id: "region-list-" + region.replace(/\s+/g, "") }, h("li", { id: "all-regions-id-" + region.replace(/\s+/g, ""), class: "mf-listen" }, h("label", { htmlFor: "all-regions-" + region.replace(/\s+/g, ""), "data-id": "all-regions-" + region.replace(/\s+/g, ""), onKeyDown: (e) => this.updateCheckboxStatusOnenter(region.replace(/\s+/g, ""), e), tabindex: this.isMobile ? 0 : -1 }, this.allRegionsText, h("input", { type: "checkbox", class: "all-region-label", tabindex: -1, id: "all-regions-" + region.replace(/\s+/g, ""), value: region, "data-continent": region, onChange: (e) => this.updateCheckboxStatus(region.replace(/\s+/g, ""), e) }), h("span", { class: "checkmark" }))), uniqueLocations.map((location) => (h("li", { key: location.id, id: location.id + "id", class: "mf-listen" }, h("label", { htmlFor: location.country, tabindex: this.isMobile ? 0 : -1, "data-id": location.country, onKeyDown: (e) => this.updateCheckboxStatusOnenter(region.replace(/\s+/g, ""), e) }, location.country, h("input", { type: "checkbox", id: location.country, tabindex: -1, value: location.country, "data-continent": region, onChange: (e) => this.updateCheckboxStatus(region.replace(/\s+/g, ""), e) }), h("span", { class: "checkmark" })))))));
-  }
-  toggleMap() {
-    this.showMap = !this.showMap;
-    this.cardScroll = this.showMap;
-  }
-  showFirstMap() {
-    const nodeList = document.querySelectorAll("ptc-office-location-card");
-    const elementsArray = Array.from(nodeList);
-    const filteredElements = elementsArray.filter((element) => {
-      return (element.style.display === "" ||
-        element.style.display === "block");
-    });
-    const firstMatchingElement = filteredElements.length > 0 ? filteredElements[0] : null;
-    this.address = firstMatchingElement.getAttribute("address");
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, null, !this.isMobile && (h("div", { class: "region-list" }, this.regions.map((region) => (h("div", { class: `region mf-listen ${this.openRegion === region ? "active" : ""}`, key: region.id, id: "region-wrap-" + region.replace(/\s+/g, "") }, h("span", { class: "region-btn" }, h("span", { class: "continent-name", onClick: () => {
-        this.updateSelectedClass(region.replace(/\s+/g, ""));
-      }, onKeyPress: () => {
-        this.updateSelectedClass(region.replace(/\s+/g, ""));
-      }, tabindex: "0" }, region), h("span", { class: "continent-arrow", onClick: () => this.toggleCountryList(region), onKeyPress: () => this.toggleCountryList(region), tabindex: "0" }, h("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1L5 5L9 1", stroke: "#40434A", "stroke-width": "2", "stroke-linecap": "round" })))), h("div", { class: `country-list country-list-desktop` }, this.renderCountrylist(region), h("div", { class: "country-list-footer" }, h("ptc-button", { "tracker-id": "clearBtnID", color: "ptc-tertiary", tabIndex: -1, "link-title": "Clear", type: "button", size: "small", onClick: () => this.clearFilter(region), styles: "button { border: none !important;} button:hover { background-color: transparent !important;} button:hover span{ text-decoration: underline !important}" }, this.clearText), h("ptc-button", { "tracker-id": "applyBtnID", color: "ptc-secondary", tabIndex: -1, "link-title": "Apply", type: "button", size: "small", onClick: () => this.applyFilter(region) }, this.applyText)))))), h("span", { class: "map-btn mf-listen", id: "mapBtnID", onClick: () => {
-        this.toggleMap();
-      }, onKeyPress: () => {
-        this.toggleMap();
-      }, tabindex: 0 }, h("span", { class: "map-icon", innerHTML: this.showMap ? hideMapSVG : showMapSVG }), h("span", null, this.showMap
-      ? this.hideMapText
-      : this.showMapText, " ")))), this.isMobile && (h("button", { class: "filter-cta", onClick: () => {
-        this.openFilterModal();
-      } }, " ", h("span", { class: "svg-close", innerHTML: filterSVG }), this.filtersText)), this.isMobile && (h("ptc-modal", { id: "modal-example", show: false, size: "lg", fixed: true, rounded: true, "show-header-footer": "true" }, h("div", { slot: "header" }, h("ptc-title", { type: "h4", upperline: "no-upperline", "text-align": "center", "title-margin": "margin-5" }, this.filtersText)), h("div", { slot: "footer", class: "modal-footer" }, h("ptc-button", { "tracker-id": "mobileClearBtnID", color: "ptc-tertiary", "link-title": "Clear", type: "button", size: "small", onClick: () => {
-        this.clearFiltersMobile();
-      }, styles: "button { border: none !important;} button:hover { background-color: transparent !important;} button:hover span{ text-decoration: underline !important}" }, this.clearText), h("ptc-button", { "tracker-id": "mobileApplyBtnID", color: "ptc-secondary", "link-title": "Apply", type: "button", size: "small", onClick: () => {
-        this.applyFilterMobile();
-      } }, this.applyText)), h("div", { slot: "body" }, h("div", { class: "filter-modal-body" }, this.regions.map((region) => (h("div", { class: "country-list country-list-mobile mf-listen", key: region.id, id: "region-wrap-" +
-        region.replace(/\s+/g, "") }, h("span", { class: "continent-name" }, region), this.renderCountrylist(region)))))))), h("div", { class: classMap }, h("div", { class: `ol-list-bg ` }, h("slot", null)), !this.isMobile && (h("div", { class: "map-embed" }, h("iframe", { frameborder: "0", referrerPolicy: "no-referrer-when-downgrade", width: "100%", height: "100%", style: { border: "0" }, allowfullScreen: true, src: `https://www.google.com/maps/embed/v1/place?key=AIzaSyATvSgSVv2hH0yXiKMcBYsF26j67d3oPLg&q=${this.address}` }))))));
-  }
-  getCssClassMap() {
-    return {
-      ["office-location-list-wrapper"]: true,
-      ["showing-map"]: this.showMap,
-    };
-  }
-  static get is() { return "ptc-office-locations"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-office-locations.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-office-locations.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "regionListManual": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "region-list-manual",
-        "reflect": false
-      },
-      "showMapText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-map-text",
-        "reflect": false,
-        "defaultValue": "\"Show Map\""
-      },
-      "hideMapText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hide-map-text",
-        "reflect": false,
-        "defaultValue": "\"Hide Map\""
-      },
-      "filtersText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "filters-text",
-        "reflect": false,
-        "defaultValue": "\"Filters\""
-      },
-      "allRegionsText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "all-regions-text",
-        "reflect": false,
-        "defaultValue": "\"All Regions\""
-      },
-      "applyText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "apply-text",
-        "reflect": false,
-        "defaultValue": "\"Apply\""
-      },
-      "clearText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "clear-text",
-        "reflect": false,
-        "defaultValue": "\"Clear\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "openRegion": {},
-      "isMobile": {},
-      "address": {},
-      "showMap": {},
-      "cardScroll": {}
-    };
-  }
-  static get elementRef() { return "hostEl"; }
-  static get watchers() {
-    return [{
-        "propName": "isMobile",
-        "methodName": "watchStateHandler"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "officeCardClicked",
-        "method": "handleAddressClicked",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}

package/dist/collection/components/ptc-overlay/ptc-overlay.css

@@ -1,210 +0,0 @@
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-ul,
-li,
-ptc-subnav,
-ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
-  word-break: break-word;
-  hyphens: manual;
-  -webkit-hyphens: manual;
-  -moz-hyphens: manual;
-  -ms-hyphens: manual;
-}
-@supports (hyphenate-limit-chars: 12 3 3) {
-  h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-ul,
-li,
-ptc-subnav,
-ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
-    hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    /* For Safari */
-    -webkit-hyphenate-limit-after: 3;
-    /* For Safari */
-    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;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transition: background var(--ptc-transition-medium) var(--ptc-ease-inout);
-}
-
-:host(.blue) {
-  background: linear-gradient(180deg, rgba(25, 123, 192, 0.2) 0%, var(--color-blue-07) 100%);
-}
-
-:host(.red) {
-  background: linear-gradient(180deg, rgba(209, 44, 58, 0.2) 0%, var(--color-red-07) 100%);
-}
-
-:host(.orange) {
-  background: linear-gradient(180deg, rgba(195, 119, 41, 0.2) 0%, var(--color-orange-07) 100%);
-}
-
-:host(.green) {
-  background: linear-gradient(180deg, rgba(0, 137, 11, 0.2) 0%, var(--color-green-07) 100%);
-}
-
-:host(.black-1) {
-  background: linear-gradient(270deg, rgba(32, 38, 42, 0.32) 33.33%, var(--color-gray-12) 100%);
-}
-
-:host(.black-2) {
-  background: linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, var(--color-gray-12) 100%);
-}
-
-:host(.black-4) {
-  background: rgba(0, 0, 0, 0.66);
-}
-
-:host(.black-5) {
-  background: rgba(0, 0, 0, 0.76);
-}
-
-@media only screen and (min-width: 768px) {
-  :host(.black-1) {
-    background: linear-gradient(270deg, rgba(32, 38, 42, 0) 33.33%, var(--color-gray-12) 100%);
-  }
-
-  :host(.black-2) {
-    background: linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, var(--color-gray-12) 100%);
-  }
-}
-:host(.black-3) {
-  background: linear-gradient(180deg, var(--color-gray-12) 0%, rgba(32, 38, 42, 0.55) 100%);
-}
-
-:host(.slate-grey) {
-  background: linear-gradient(180deg, rgba(97, 116, 128, 0.2) 0%, var(--color-gray-07) 100%);
-}
-
-:host(.bright-blue) {
-  background: linear-gradient(180deg, rgba(25, 123, 192, 0.72) 0%, rgba(25, 123, 192, 0.85) 69.27%, rgba(25, 123, 192, 0.4) 100%);
-}
-
-:host(.bright-red) {
-  background: linear-gradient(180deg, rgba(211, 62, 62, 0.72) 0%, rgba(211, 62, 62, 0.85) 69.27%, rgba(211, 62, 62, 0.4) 100%);
-}
-
-:host(.bright-orange) {
-  background: linear-gradient(180deg, rgba(195, 119, 41, 0.72) 0%, rgba(195, 119, 41, 0.85) 69.27%, rgba(195, 119, 41, 0.4) 100%);
-}
-
-:host(.bright-green) {
-  background: linear-gradient(180deg, rgba(0, 137, 11, 0.72) 0%, rgba(0, 137, 11, 0.85) 69.27%, rgba(0, 137, 11, 0.4) 100%);
-}
-
-:host(.bright-slate-grey) {
-  background: linear-gradient(180deg, rgba(97, 116, 128, 0.72) 0%, rgba(97, 116, 128, 0.85) 69.27%, rgba(97, 116, 128, 0.4) 100%);
-}
-
-:host(.solid-black-1) {
-  background: rgba(16, 19, 20, 0.85);
-}
-
-:host(.solid-black-2) {
-  background: rgba(16, 19, 20, 0.7);
-}
-
-:host(.hp-blue) {
-  background: linear-gradient(180deg, #197bc0 0%, #4795cd 100%);
-}
-
-:host(.hp-green) {
-  background: linear-gradient(180deg, #00890b 0%, #33a13c 100%);
-}
-
-:host(.hp-red) {
-  background: linear-gradient(180deg, #d33e3e 0%, #dc6565 100%);
-}
-
-:host(.hp-gray) {
-  background: linear-gradient(180deg, #617480 0%, #819099 100%);
-}
-
-:host(.hp-orange) {
-  background: linear-gradient(180deg, #c37729 0%, #cf9254 100%);
-}
-
-:host(.transparent) {
-  background: linear-gradient(180deg, transparent 0%, transparent 100%);
-}
-
-:host(.white-bottom) {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, #fff 100%);
-}
-
-:host(.radius-standard) {
-  border-radius: var(--ptc-border-radius-standard);
-}
-
-:host(.radius-large) {
-  border-radius: var(--ptc-border-radius-large);
-}
-
-:host(.radius-pill) {
-  border-radius: var(--ptc-border-radius-pill);
-}
-
-:host(.radius-circle) {
-  border-radius: var(--ptc-border-radius-circle);
-}
-
-:host(.z-index-auto) {
-  z-index: auto;
-}
-
-:host(.z-index-n-1) {
-  z-index: -1;
-}
-
-:host(.z-index-n-2) {
-  z-index: -2;
-}
-
-:host(.z-index-p-1) {
-  z-index: 1;
-}
-
-:host(.z-index-p-2) {
-  z-index: 2;
-}