@ptcwebops/ptcw-design 1.2.3 → 1.2.5

package/dist/collection/components/ptc-bio-card/ptc-bio-card.css

@@ -0,0 +1,225 @@
+:host {
+  display: block;
+  color: var(--color-gray-10);
+}
+:host .bio-card {
+  display: flex;
+  box-shadow: var(--ptc-shadow-small);
+  transition: box-shadow 0.25s ease-out, -webkit-box-shadow 0.25s ease-out;
+}
+:host .bio-card .bio-card__image {
+  max-width: 150px;
+  min-width: 100px;
+}
+@media only screen and (min-width: 480px) {
+  :host .bio-card .bio-card__image {
+    min-width: 140px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  :host .bio-card .bio-card__image {
+    width: 35%;
+  }
+}
+:host .bio-card .bio-card__image img {
+  max-width: 100%;
+  display: block;
+  max-height: 150px;
+}
+@media only screen and (min-width: 480px) {
+  :host .bio-card .bio-card__image img {
+    max-height: 200px;
+    min-width: auto;
+  }
+}
+:host .bio-card .bio-card__content {
+  padding: 12px 12px 1px 12px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-content: space-between;
+}
+@media only screen and (min-width: 768px) {
+  :host .bio-card .bio-card__content {
+    width: 65%;
+    padding: 16px 16px 1px 16px;
+  }
+}
+:host .bio-card .bio-card__content .bio-card__name {
+  display: inline-block;
+  margin: 0;
+  font-size: var(--ptc-font-size-small);
+  font-weight: var(--ptc-font-weight-black);
+  line-height: var(--ptc-line-height-denser);
+  letter-spacing: 0.031rem;
+  border-bottom: 1px solid transparent;
+}
+@media only screen and (min-width: 992px) {
+  :host .bio-card .bio-card__content .bio-card__name {
+    font-size: var(--ptc-font-size-xx-small);
+  }
+}
+:host .bio-card .bio-card__content .bio-card__job-title {
+  font-size: var(--ptc-font-size-xxx-small);
+  font-weight: var(--ptc-font-weight-semibold);
+  line-height: var(--ptc-line-height-p);
+  letter-spacing: 0.031rem;
+  margin: 2px 0 0 0;
+}
+@media only screen and (min-width: 480px) {
+  :host .bio-card .bio-card__content .bio-card__job-title {
+    font-size: var(--ptc-font-size-x-small);
+  }
+}
+@media only screen and (min-width: 992px) {
+  :host .bio-card .bio-card__content .bio-card__job-title {
+    font-size: var(--ptc-font-size-xxx-small);
+  }
+}
+:host .bio-card .bio-card__content .bio-card__social-links {
+  border-top: 1px solid var(--color-gray-03);
+  padding-top: 12px;
+}
+:host .bio-card .bio-card__content .bio-card__social-links .social-icon {
+  margin-right: 20px;
+  display: inline-block;
+  border-bottom: 1px solid var(--color-green-14);
+  line-height: var(--ptc-line-height-denser);
+}
+:host .bio-card .bio-card__content .bio-card__social-links .social-icon svg {
+  max-width: 27px;
+  max-height: 44px;
+}
+:host .bio-card:hover {
+  box-shadow: var(--ptc-shadow-x-large);
+  cursor: pointer;
+}
+:host .bio-card:hover .bio-card__name {
+  border-bottom-color: var(--color-green-07);
+}
+:host .modal-wrap {
+  display: flex;
+}
+:host .modal-wrap .bio-modal-left {
+  width: 140px;
+  max-height: 208px;
+  display: none;
+}
+:host .modal-wrap .bio-modal-left .bio-modal__image {
+  margin-bottom: 35px;
+}
+:host .modal-wrap .bio-modal-left .bio-modal__image img {
+  max-width: 100%;
+  display: block;
+  min-width: 140px;
+}
+:host .modal-wrap .bio-modal-left .bio-card__social-links {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+:host .modal-wrap .bio-modal-left .bio-card__social-links .social-icon {
+  margin-bottom: 10px;
+}
+:host .modal-wrap .bio-modal-left .bio-card__social-links .social-icon:last-child {
+  margin-bottom: 0;
+}
+@media only screen and (min-width: 768px) {
+  :host .modal-wrap .bio-modal-left {
+    display: block;
+  }
+}
+:host .modal-wrap .bio-modal-right {
+  padding-left: 30px;
+  padding-right: 15px;
+}
+:host .modal-wrap .bio-modal-right .bio-modal-header {
+  position: relative;
+  width: 95%;
+}
+@media only screen and (min-width: 992px) {
+  :host .modal-wrap .bio-modal-right .bio-modal-header::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image: url("https://www.ptc.com/dist/ptc/images/Exec-Leadership/Card-Decoration.svg");
+    background-size: 340px;
+    transform: rotate(180deg);
+    z-index: -1;
+    background-repeat: no-repeat;
+    top: -20px;
+    right: 5%;
+    opacity: 0.4;
+  }
+}
+:host .modal-wrap .bio-modal-right .bio-modal-header .bio-card__name {
+  margin: 0 0 4px 0;
+  font-weight: var(--ptc-font-weight-black);
+  font-size: var(--ptc-font-size-small);
+  line-height: var(--ptc-line-height-denser);
+}
+:host .modal-wrap .bio-modal-right .bio-modal-header .bio-card__job-title {
+  margin: 0;
+  font-size: var(--ptc-font-size-small);
+  font-weight: var(--ptc-font-weight-medium);
+}
+:host .modal-wrap .bio-modal-right .bio-modal-description {
+  margin-top: 40px;
+  max-height: 500px;
+  overflow-y: auto;
+  padding-right: 8%;
+}
+:host .modal-wrap .bio-modal-right .bio-modal-description::before {
+  background: var(--color-white);
+  background: linear-gradient(0deg, var(--color-white), rgba(255, 255, 255, 0));
+  bottom: 0;
+  content: "";
+  display: block;
+  height: 25%;
+  left: 0;
+  position: absolute;
+  right: 1rem;
+  width: 100%;
+  border-bottom-left-radius: var(--ptc-border-radius-large);
+  border-bottom-right-radius: var(--ptc-border-radius-large);
+}
+:host .modal-wrap .bio-modal-right .bio-modal-description::after {
+  content: " ";
+  width: 10px;
+  height: 120px;
+  display: block;
+}
+:host .modal-wrap .bio-modal-right .bio-modal-description::-webkit-scrollbar {
+  width: 0.188rem;
+}
+:host .modal-wrap .bio-modal-right .bio-modal-description::-webkit-scrollbar-track {
+  background: var(--color-gray-03);
+}
+:host .modal-wrap .bio-modal-right .bio-modal-description::-webkit-scrollbar-thumb {
+  background: var(--color-gray-10);
+  border-radius: 2rem;
+}
+:host .social-icon .cls-1 {
+  transition: all ease-in 250ms;
+}
+:host .social-icon .cls-3,
+:host .social-icon .cls-4 {
+  stroke: none;
+}
+:host .social-icon .cls-4 {
+  transition: all ease-in 250ms;
+  fill: var(--color-gray-03);
+}
+:host .social-icon:hover .cls-1 {
+  transition: all ease-in 250ms;
+  fill: var(--color-white);
+}
+:host .social-icon:hover .cls-2 {
+  fill: var(--color-green-14);
+}
+:host .social-icon:hover .cls-4 {
+  fill: var(--color-green-14);
+}

package/dist/collection/components/ptc-bio-card/ptc-bio-card.js

@@ -0,0 +1,130 @@
+import { Host, h } from '@stencil/core';
+export class PtcBioCard {
+  constructor() {
+    this.showModal = false;
+    this.name = undefined;
+    this.jobTitle = undefined;
+    this.image = undefined;
+    this.linkedin = undefined;
+    this.twitter = undefined;
+  }
+  openModal() {
+    this.showModal = true;
+  }
+  componentDidLoad() {
+    let PtcModal = this.el.shadowRoot.querySelector('#bio-modal');
+    PtcModal.addEventListener('closed', () => {
+      this.showModal = false;
+    });
+  }
+  render() {
+    return (h(Host, { onClick: () => { this.openModal(); }, type: "button" }, h("div", { class: "bio-card" }, h("div", { class: "bio-card__image" }, h("img", { src: this.image, alt: `${this.name} profile image` })), h("div", { class: "bio-card__content" }, h("div", null, h("h3", { class: "bio-card__name" }, this.name), h("p", { class: "bio-card__job-title" }, this.jobTitle)), (this.linkedin || this.twitter) && (h("div", { class: "bio-card__social-links" }, this.linkedin && (h("a", { href: this.linkedin, target: "_blank", class: "tw social-icon", "aria-label": "linkedin" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient1-in);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "31.995", height: "36.794", viewBox: "0 0 31.995 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient1-in", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("path", { d: "M-416.964 153.563h-2.487v-7.987h2.487zm-1.311-8.985h-.018a1.385 1.385 0 0 1-1.485-1.279v-.107a1.4 1.4 0 0 1 1.524-1.385 1.393 1.393 0 0 1 1.5 1.278v.107a1.4 1.4 0 0 1-1.521 1.386zm11.283 8.985h-2.842v-4.132c0-1.066-.441-1.819-1.421-1.819a1.422 1.422 0 0 0-1.35.977 1.82 1.82 0 0 0-.06.65v4.324h-2.778s.036-7.319 0-7.983h2.8v1.265a2.563 2.563 0 0 1 2.487-1.329c1.776 0 3.165 1.147 3.165 3.62z", class: "cls-2", "data-name": "Path 8769", transform: "translate(429.342 -128.977)" })))), this.twitter && (h("a", { href: this.twitter, target: "_blank", class: "tw social-icon", "aria-label": "twitter" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient0-tw);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "31.995", height: "36.794", viewBox: "0 0 31.995 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient0-tw", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("g", { "data-name": "Group 3004", transform: "translate(9.205 13.034)" }, h("g", null, h("path", { d: "M-617.4 147a5.577 5.577 0 0 1-1.6.436 2.78 2.78 0 0 0 1.219-1.535 5.54 5.54 0 0 1-1.765.674 2.78 2.78 0 0 0-3.93-.118 2.782 2.782 0 0 0-.874 2.018 2.754 2.754 0 0 0 .072.632 7.9 7.9 0 0 1-5.73-2.9 2.784 2.784 0 0 0 .861 3.71 2.784 2.784 0 0 1-1.26-.346v.034a2.78 2.78 0 0 0 2.231 2.724 2.714 2.714 0 0 1-.734.1 2.774 2.774 0 0 1-.534-.049 2.776 2.776 0 0 0 2.6 1.93 5.619 5.619 0 0 1-4.1 1.151 7.874 7.874 0 0 0 4.259 1.249 7.844 7.844 0 0 0 7.9-7.9v-.376A5.652 5.652 0 0 0-617.4 147", class: "cls-2", "data-name": "Path 4252", transform: "translate(630.939 -145.697)" })))))))))), h("ptc-modal", { id: "bio-modal", show: this.showModal, size: "lg", "border-radius": 'large', "is-bio-modal": true }, h("div", { class: "modal-wrap" }, h("div", { class: "bio-modal-left" }, h("div", { class: "bio-modal__image" }, h("img", { src: this.image, alt: `${this.name} profile image` })), (this.linkedin || this.twitter) && (h("div", { class: "bio-card__social-links" }, this.linkedin && (h("a", { href: this.linkedin, target: "_blank", class: "tw social-icon", "aria-label": "linkedin" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient1-in);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "31.995", height: "36.794", viewBox: "0 0 31.995 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient1-in", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("path", { d: "M-416.964 153.563h-2.487v-7.987h2.487zm-1.311-8.985h-.018a1.385 1.385 0 0 1-1.485-1.279v-.107a1.4 1.4 0 0 1 1.524-1.385 1.393 1.393 0 0 1 1.5 1.278v.107a1.4 1.4 0 0 1-1.521 1.386zm11.283 8.985h-2.842v-4.132c0-1.066-.441-1.819-1.421-1.819a1.422 1.422 0 0 0-1.35.977 1.82 1.82 0 0 0-.06.65v4.324h-2.778s.036-7.319 0-7.983h2.8v1.265a2.563 2.563 0 0 1 2.487-1.329c1.776 0 3.165 1.147 3.165 3.62z", class: "cls-2", "data-name": "Path 8769", transform: "translate(429.342 -128.977)" })))), this.twitter && (h("a", { href: this.twitter, target: "_blank", class: "tw social-icon", "aria-label": "twitter" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient0-tw);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "31.995", height: "36.794", viewBox: "0 0 31.995 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient0-tw", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("g", { "data-name": "Group 3004", transform: "translate(9.205 13.034)" }, h("g", null, h("path", { d: "M-617.4 147a5.577 5.577 0 0 1-1.6.436 2.78 2.78 0 0 0 1.219-1.535 5.54 5.54 0 0 1-1.765.674 2.78 2.78 0 0 0-3.93-.118 2.782 2.782 0 0 0-.874 2.018 2.754 2.754 0 0 0 .072.632 7.9 7.9 0 0 1-5.73-2.9 2.784 2.784 0 0 0 .861 3.71 2.784 2.784 0 0 1-1.26-.346v.034a2.78 2.78 0 0 0 2.231 2.724 2.714 2.714 0 0 1-.734.1 2.774 2.774 0 0 1-.534-.049 2.776 2.776 0 0 0 2.6 1.93 5.619 5.619 0 0 1-4.1 1.151 7.874 7.874 0 0 0 4.259 1.249 7.844 7.844 0 0 0 7.9-7.9v-.376A5.652 5.652 0 0 0-617.4 147", class: "cls-2", "data-name": "Path 4252", transform: "translate(630.939 -145.697)" }))))))))), h("div", { class: "bio-modal-right" }, h("div", { class: "bio-modal-header" }, h("h2", { class: "bio-card__name" }, this.name), h("p", { class: "bio-card__job-title" }, this.jobTitle)), h("div", { class: "bio-modal-description" }, h("slot", null)))))));
+  }
+  static get is() { return "ptc-bio-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-bio-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-bio-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name"
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "jobTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Job Title"
+        },
+        "attribute": "job-title",
+        "reflect": false
+      },
+      "image": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Profile Image"
+        },
+        "attribute": "image",
+        "reflect": false
+      },
+      "linkedin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "LinkedIn Url"
+        },
+        "attribute": "linkedin",
+        "reflect": false
+      },
+      "twitter": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Twiiter Url"
+        },
+        "attribute": "twitter",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "showModal": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}

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

@@ -15,7 +15,7 @@
   align-items: center;
   align-content: center;
   border: 1px solid var(--color-gray-05);
-  padding: 0.25rem 0.75rem 0.25rem 0.75rem;
+  padding: 0.1875rem 0.75rem 0.1875rem 0.75rem;
   border-radius: 4px;
   font-family: var(--ptc-font-latin);
   font-size: var(--ptc-font-size-x-small);
@@ -23,6 +23,7 @@
   line-height: var(--ptc-line-height-loose);
   letter-spacing: 0em;
   text-align: left;
+  height: 1.5rem;
 }
 :host .dropdown__header b {
   font-weight: var(--ptc-font-weight-semibold);

package/dist/collection/components/ptc-filter-tag/ptc-filter-tag.css

@@ -5,13 +5,14 @@
   margin: 0.25rem;
 }
 .ptc-filter-tag.bubble {
+  margin: 0 0.25rem;
   display: inline-block;
   color: var(--color-gray-12);
   font-family: Raleway;
   font-size: var(--ptc-font-size-xx-small);
   font-weight: var(--ptc-font-weight-semibold);
-  line-height: var(--ptc-line-height-denser);
   letter-spacing: var(--ptc-letter-spacing-normal);
+  line-height: 1.125rem;
   text-align: left;
   align-items: center;
   transition: border-color ease-out 250ms;

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

@@ -822,6 +822,64 @@ ptc-icon-list.icon-top-align-list a:hover {
   grid-row-gap: 12px;
 }
 
+ptc-bio-card .bio-modal-open-content {
+  color: var(--color-gray-10);
+  font-size: var(--ptc-font-size-small);
+  line-height: var(--ptc-line-height-denser);
+}
+ptc-bio-card .bio-modal-open-content h3 {
+  letter-spacing: 0.08rem;
+  margin-bottom: 2px;
+  font-size: var(--ptc-font-size-small);
+}
+ptc-bio-card .bio-modal-open-content ul {
+  margin-top: 0;
+}
+ptc-bio-card .bio-modal-open-content ul li {
+  line-height: var(--ptc-line-height-p);
+}
+ptc-bio-card .bio-modal-open-content ul li a {
+  text-decoration: none;
+  color: var(--color-green-06);
+  transition: color 0.3s ease;
+}
+ptc-bio-card .bio-modal-open-content ul li a:hover {
+  color: var(--color-gray-10);
+  transition: color 0.3s ease;
+}
+ptc-bio-card .bio-modal-open-content .btn-blackgrey {
+  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;
+  /*(For Firefox)*/
+  -webkit-font-smoothing: antialiased;
+  /*(For Chrome and Safari)*/
+  cursor: pointer;
+  padding: 14px 20px;
+  border: 2px solid var(--color-gray-08);
+  border-radius: var(--ptc-border-radius-standard);
+  color: var(--color-white);
+  font-weight: 700;
+}
+ptc-bio-card .bio-modal-open-content .btn-blackgrey:hover {
+  background-color: var(--color-gray-09);
+  border-color: var(--color-gray-08);
+}
+ptc-bio-card .bio-modal-open-content .btn-blackgrey svg {
+  display: none;
+}
+ptc-bio-card .bio-modal-open-content hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eee;
+}
+
 :host {
   display: block;
 }

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

@@ -118,4 +118,74 @@
   z-index: 3010;
   display: block;
   background-color: rgba(0, 0, 0, 0.6);
+}
+
+:host(.standard) .modal-popup {
+  border-radius: var(--ptc-border-radius-standard);
+}
+
+:host(.large) .modal-popup {
+  border-radius: var(--ptc-border-radius-large);
+}
+
+:host(.pill) .modal-popup {
+  border-radius: var(--ptc-border-radius-pill);
+}
+
+:host(.circle) .modal-popup {
+  border-radius: var(--ptc-border-radius-circle);
+}
+
+:host(.bio-modal) .modal-popup {
+  padding: 30px 15px 30px 0;
+  max-width: 1200px;
+}
+@media only screen and (min-width: 1440px) {
+  :host(.bio-modal) .modal-popup {
+    max-width: 1400px;
+  }
+}
+:host(.bio-modal) .close {
+  position: absolute;
+  margin: 0;
+  right: 15px;
+  top: 30px;
+}
+:host(.bio-modal) .close svg .cls-1, :host(.bio-modal) .close svg .cls-2 {
+  fill: none;
+  stroke-width: 2px;
+}
+:host(.bio-modal) .close svg .cls-1 {
+  stroke: #1c2439;
+  stroke-linecap: square;
+}
+:host(.bio-modal) .close svg .cls-2 {
+  stroke: #74c34d;
+}
+:host(.bio-modal) .close svg path {
+  transition: all ease-in-out 250ms;
+}
+:host(.bio-modal) .close svg .cls-1:nth-child(1) {
+  transform: translate(175.5px, 135.5px);
+}
+:host(.bio-modal) .close svg .cls-1:nth-child(2) {
+  transform: translate(175.5px, 174.985px);
+}
+:host(.bio-modal) .close svg .cls-1:nth-child(3) {
+  transform: translate(215.5px, 141.393px);
+}
+:host(.bio-modal) .close svg .cls-1:nth-child(4) {
+  transform: translate(175.5px, 135.5px);
+}
+:host(.bio-modal) .close:hover svg .cls-1:nth-child(1) {
+  transform: translate(175.5px, 162px);
+}
+:host(.bio-modal) .close:hover svg .cls-1:nth-child(2) {
+  transform: translate(149px, 174.985px);
+}
+:host(.bio-modal) .close:hover svg .cls-1:nth-child(3) {
+  transform: translate(215.5px, 174px);
+}
+:host(.bio-modal) .close:hover svg .cls-1:nth-child(4) {
+  transform: translate(152.5px, 135.5px);
 }

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

@@ -10,6 +10,8 @@ export class PtcModal {
     this.rounded = false;
     this.showHeaderFooter = false;
     this.overlayHeight = undefined;
+    this.borderRadius = 'standard | large | pill | circle';
+    this.isBioModal = false;
     this.bodyOverflowSetting = undefined;
   }
   fireOnClosed(modal) {
@@ -108,7 +110,11 @@ export class PtcModal {
     let content;
     let overlay;
     let type = this.iframeUrl ? 'frame' : 'html';
-    let closebtn = (h("div", { class: "close" }, h("a", { href: "#", onClick: (e) => { e.preventDefault(); this.close(); } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { d: "M1 1L13 13", stroke: "black" }), h("path", { d: "M13 1L1 13", stroke: "black" })))));
+    let closebtn = (h("div", { class: "close" }, h("a", { href: "#", onClick: (e) => { e.preventDefault(); this.close(); } }, this.isBioModal
+      ?
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "42", height: "41.485", viewBox: "0 0 42 41.485" }, h("g", { "data-name": "Group 1042", transform: "rotate(180 108.25 87.993)" }, h("path", { d: "M0 0v39.486", class: "cls-1", "data-name": "Line 446" }), h("path", { d: "M0 0h40", class: "cls-1", "data-name": "Line 447" }), h("path", { d: "M0 33.592V0", class: "cls-1", "data-name": "Line 448" }), h("path", { d: "M23.994 0H0", class: "cls-1", "data-name": "Line 449" }), h("path", { d: "M0 0l17.596 17.596", class: "cls-2", "data-name": "Line 450", transform: "translate(187.229 147.226)" }), h("path", { d: "M0 7.198L7.199 0", class: "cls-2", "data-name": "Line 451", transform: "translate(197.55 147.312)" }), h("path", { d: "M0 7.2L7.2 0", class: "cls-2", "data-name": "Path 114", transform: "translate(187.313 157.549)" })))
+      :
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { d: "M1 1L13 13", stroke: "black" }), h("path", { d: "M13 1L1 13", stroke: "black" })))));
     if (this.iframeUrl) {
       content = (h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
     }
@@ -128,7 +134,7 @@ export class PtcModal {
         overlay = h("div", { class: "overlay" });
       }
     }
-    return (h(Host, null, h("div", { class: `wrapper ${this.show ? "show" : "hide"} ${this.fixed ? 'fixed' : ''} ` }, overlay, h("div", { class: `modal-popup ${this.size} ${type} ${this.rounded ? 'rounded' : ''} ${this.showHeaderFooter ? 'shadow-scroller' : ''} ` }, this.showHeaderFooter ? [
+    return (h(Host, { class: `${this.isBioModal ? "bio-modal" : ""} ${this.borderRadius}` }, h("div", { class: `wrapper ${this.show ? "show" : "hide"} ${this.fixed ? 'fixed' : ''} ` }, overlay, h("div", { class: `modal-popup ${this.size} ${type} ${this.rounded ? 'rounded' : ''} ${this.showHeaderFooter ? 'shadow-scroller' : ''} ` }, this.showHeaderFooter ? [
       h("div", { class: "modal-header" }, h("slot", { name: "header" }), closebtn),
       h("div", { class: "modal-body", onScroll: () => this.handleScroll() }, content),
       h("div", { class: "modal-footer" }, h("slot", { name: "footer" }))
@@ -293,6 +299,42 @@ export class PtcModal {
         "attribute": "show-header-footer",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "borderRadius": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Add the border radius  Options: standard | large | pill | circle"
+        },
+        "attribute": "border-radius",
+        "reflect": false,
+        "defaultValue": "'standard | large | pill | circle'"
+      },
+      "isBioModal": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Sets if popup is nio modal"
+        },
+        "attribute": "is-bio-modal",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -95,6 +95,9 @@ export class PtcPagenation {
           if (i == this.clickedPageNumber) {
             isItemActive = true;
           }
+          if (i == this.getPageCount()) {
+            id = "last";
+          }
           // if (i > 4)
           // {
           //     hideShowPageClass = " hide-page";