@ptcwebops/ptcw-design 6.3.65-beta → 6.3.68-beta

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -119,7 +123,8 @@ ptc-link, ptc-square-card,
 .standard-filter .standard-filter-item[data-url=last] {
   margin-right: 1.25rem;
 }
-.standard-filter .next-button, .standard-filter .previous-button {
+.standard-filter .next-button,
+.standard-filter .previous-button {
   font-size: var(--ptc-font-size-x-small);
   font-weight: normal;
   display: inline-flex;
@@ -131,27 +136,33 @@ ptc-link, ptc-square-card,
   border-radius: calc(var(--ptc-border-radius-standard) / 2);
   transition: background-color var(--ptc-ease-out) var(--ptc-transition-medium), fill var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium);
 }
-.standard-filter .next-button:hover, .standard-filter .previous-button:hover {
+.standard-filter .next-button:hover,
+.standard-filter .previous-button:hover {
   background-color: var(--color-gray-02);
   text-decoration: none;
 }
-.standard-filter .next-button:active, .standard-filter .previous-button:active {
+.standard-filter .next-button:active,
+.standard-filter .previous-button:active {
   transition: none;
   background-color: var(--color-gray-05);
   text-decoration: none;
 }
-.standard-filter .next-button:focus, .standard-filter .previous-button:focus {
+.standard-filter .next-button:focus,
+.standard-filter .previous-button:focus {
   text-decoration: none;
   border-radius: var(--ptc-border-radius-standard);
   outline: 5px solid var(--keyboard-nav-outline);
 }
-.standard-filter .next-button.disabled, .standard-filter .previous-button.disabled {
+.standard-filter .next-button.disabled,
+.standard-filter .previous-button.disabled {
   cursor: default;
   border-color: var(--color-gray-04);
   color: var(--color-gray-04);
   fill: var(--color-gray-04);
 }
-.standard-filter .next-button.disabled:hover, .standard-filter .next-button.disabled:active, .standard-filter .previous-button.disabled:hover, .standard-filter .previous-button.disabled:active {
+.standard-filter .next-button.disabled:hover, .standard-filter .next-button.disabled:active,
+.standard-filter .previous-button.disabled:hover,
+.standard-filter .previous-button.disabled:active {
   background-color: transparent;
 }
 .standard-filter .previous-button {
@@ -221,13 +232,15 @@ ptc-link, ptc-square-card,
   font-weight: var(--ptc-font-weight-semibold);
 }
 
-.events-filter-item:hover, .events-filter-item:focus {
+.events-filter-item:hover,
+.events-filter-item:focus {
   text-decoration: none;
   outline: 0;
   color: var(--color-green-14);
 }
 
-span.events-filter-item:hover, span.events-filter-item:focus {
+span.events-filter-item:hover,
+span.events-filter-item:focus {
   text-decoration: none;
   outline: 0;
   color: var(--color-gray-10);

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h, } from "@stencil/core";
 export class PtcPagenation {
   constructor() {
     this.handleClick = (e) => {
@@ -114,7 +114,10 @@ export class PtcPagenation {
           }
         }
         else {
-          this.maxPageNumber = pageCountVal >= this.minPageNumber + pageLength ? this.minPageNumber + pageLength : pageCountVal;
+          this.maxPageNumber =
+            pageCountVal >= this.minPageNumber + pageLength
+              ? this.minPageNumber + pageLength
+              : pageCountVal;
         }
         this.pageNumbers = [];
         for (let i = this.minPageNumber; i <= this.maxPageNumber; i++) {
@@ -133,7 +136,7 @@ export class PtcPagenation {
           const newPageItem = {
             id: id,
             isActive: isItemActive,
-            dataPage: i
+            dataPage: i,
           };
           this.pageNumbers = [...this.pageNumbers, newPageItem];
           //games.push(<a href="#" data-url={id} data-page={i} class={classValue}>i</a>);
@@ -153,7 +156,7 @@ export class PtcPagenation {
     this.appendArray = true;
     this.prevArrowImg = "/dist/ptc/images/sidescroll-left-curved.svg";
     this.nextArrowImg = "/dist/ptc/images/sidescroll-right-curved.svg";
-    this.theme = 'events';
+    this.theme = "events";
     this.styles = undefined;
   }
   componentWillLoad() {
@@ -229,20 +232,40 @@ export class PtcPagenation {
     switch (this.theme) {
       case "standard":
         let allowSkip = pageCountValue > 6;
-        return (h("div", { class: "standard-filter" }, this.styles && h("style", null, this.styles), h("a", { id: "lastPageArrowId", href: "#", class: this.clickedPageNumber == 1 ? "previous-button mf-listen disabled" : "previous-button mf-listen", onClick: this.handleClickPrev }, h("icon-asset", { type: "ptc", name: "chevron-down", size: "xxx-small" })), allowSkip && this.clickedPageNumber > pageLength ? [
-          h("a", { href: "#", id: "pagebtn1Id", "data-url": "first", "data-page": 1, class: "standard-filter-item mf-listen", onClick: (e) => this.handlePageSkip(e, 1) }, 1),
-          h("span", { class: "standard-filter-dots" }, "...")
-        ] : null, this.pageNumbers.map(anchoritem => {
-          return (h("a", { href: "#", id: `pagebtn` + anchoritem.dataPage + `id`, "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive ? "standard-filter-item  mf-listen active" : "standard-filter-item mf-listen", onClick: (e) => this.handleClickPage(e, anchoritem.dataPage) }, anchoritem.dataPage));
-        }), allowSkip && pageCountValue > this.maxPageNumber ? [
-          h("span", { class: "standard-filter-dots" }, "..."),
-          h("a", { href: "#", "data-url": "last", id: `pagebtn` + pageCountValue + `id`, "data-page": pageCountValue, class: "mf-listen standard-filter-item", onClick: (e) => this.handlePageSkip(e, pageCountValue) }, pageCountValue)
-        ] : null, h("a", { id: "nextPageArrowId", href: "#", class: this.clickedPageNumber == pageCountValue ? "next-button mf-listen disabled" : "next-button mf-listen", onClick: this.handleClick }, h("icon-asset", { type: "ptc", name: "chevron-down", size: "xxx-small" }))));
+        return (h("div", { class: "standard-filter" }, this.styles && h("style", null, this.styles), h("a", { id: "lastPageArrowId", href: "#", class: this.clickedPageNumber == 1
+            ? "previous-button mf-listen disabled"
+            : "previous-button mf-listen", onClick: this.handleClickPrev }, h("icon-asset", { type: "ptc", name: "chevron-down", size: "xxx-small" })), allowSkip && this.clickedPageNumber > pageLength
+          ? [
+            h("a", { href: "#", id: "pagebtn1Id", "data-url": "first", "data-page": 1, class: "standard-filter-item mf-listen", onClick: (e) => this.handlePageSkip(e, 1) }, 1),
+            h("span", { class: "standard-filter-dots" }, "..."),
+          ]
+          : null, this.pageNumbers.map((anchoritem) => {
+          return (h("a", { href: "#", id: `pagebtn` + anchoritem.dataPage + `id`, "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive
+              ? "standard-filter-item  mf-listen active"
+              : "standard-filter-item mf-listen", onClick: (e) => this.handleClickPage(e, anchoritem.dataPage) }, anchoritem.dataPage));
+        }), allowSkip && pageCountValue > this.maxPageNumber
+          ? [
+            h("span", { class: "standard-filter-dots" }, "..."),
+            h("a", { href: "#", "data-url": "last", id: `pagebtn` + pageCountValue + `id`, "data-page": pageCountValue, class: "mf-listen standard-filter-item", onClick: (e) => this.handlePageSkip(e, pageCountValue) }, pageCountValue),
+          ]
+          : null, h("a", { id: "nextPageArrowId", href: "#", class: this.clickedPageNumber == pageCountValue
+            ? "next-button mf-listen disabled"
+            : "next-button mf-listen", onClick: this.handleClick }, h("icon-asset", { type: "ptc", name: "chevron-down", size: "xxx-small" }))));
       case "events":
       default:
-        return (h("div", { class: "events-filter" }, this.styles && h("style", null, this.styles), h("span", { class: this.clickedPageNumber == 1 ? "events-filter-item disabled prev-text" : "events-filter-item prev-text" }, this.previousValue), h("img", { src: this.prevArrowImg, onClick: this.handleClickPrev, class: this.clickedPageNumber == 1 ? "pagenation-arrow prev-page events-disable-arrows" : "pagenation-arrow prev-page" }), this.pageNumbers.map(anchoritem => {
-          return (h("a", { href: "#", id: `pagebtn` + anchoritem.dataPage + `id`, "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive ? "events-filter-item mf-listen active" : "events-filter-item mf-listen", onClick: (e) => this.handleClickPage(e, anchoritem.dataPage) }, anchoritem.dataPage));
-        }), pageCountValue > this.maxPageNumber ? (h("span", { class: "events-filter-dots" }, ". . .")) : null, h("img", { src: this.nextArrowImg, onClick: this.handleClick, class: this.clickedPageNumber == pageCountValue ? "pagenation-arrow last-page events-disable-arrows" : "pagenation-arrow last-page" }), h("span", { class: this.clickedPageNumber == pageCountValue ? "events-filter-item disabled last-text" : "events-filter-item last-text" }, this.lastValue)));
+        return (h("div", { class: "events-filter" }, this.styles && h("style", null, this.styles), h("span", { class: this.clickedPageNumber == 1
+            ? "events-filter-item disabled prev-text"
+            : "events-filter-item prev-text" }, this.previousValue), h("img", { src: this.prevArrowImg, onClick: this.handleClickPrev, class: this.clickedPageNumber == 1
+            ? "pagenation-arrow prev-page events-disable-arrows"
+            : "pagenation-arrow prev-page" }), this.pageNumbers.map((anchoritem) => {
+          return (h("a", { href: "#", id: `pagebtn` + anchoritem.dataPage + `id`, "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive
+              ? "events-filter-item mf-listen active"
+              : "events-filter-item mf-listen", onClick: (e) => this.handleClickPage(e, anchoritem.dataPage) }, anchoritem.dataPage));
+        }), pageCountValue > this.maxPageNumber ? (h("span", { class: "events-filter-dots" }, ". . .")) : null, h("img", { src: this.nextArrowImg, onClick: this.handleClick, class: this.clickedPageNumber == pageCountValue
+            ? "pagenation-arrow last-page events-disable-arrows"
+            : "pagenation-arrow last-page" }), h("span", { class: this.clickedPageNumber == pageCountValue
+            ? "events-filter-item disabled last-text"
+            : "events-filter-item last-text" }, this.lastValue)));
     }
   }
   handlePageSkip(e, clickedPage) {
@@ -281,8 +304,10 @@ export class PtcPagenation {
     let newArray = [];
     this.appendArray = false;
     newArray = [...this.pageNumbers];
-    newArray.map(item => {
-      item.dataPage == clickedPage ? item.isActive = true : item.isActive = false;
+    newArray.map((item) => {
+      item.dataPage == clickedPage
+        ? (item.isActive = true)
+        : (item.isActive = false);
     });
     this.pageNumbers = null;
     this.pageNumbers = [...newArray];
@@ -517,7 +542,7 @@ export class PtcPagenation {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'events' | 'standard'",
+          "original": "\"events\" | \"standard\"",
           "resolved": "\"events\" | \"standard\"",
           "references": {}
         },
@@ -529,7 +554,7 @@ export class PtcPagenation {
         },
         "attribute": "theme",
         "reflect": false,
-        "defaultValue": "'events'"
+        "defaultValue": "\"events\""
       },
       "styles": {
         "type": "string",

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

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

@@ -1,28 +1,28 @@
-import { h, Host } from '@stencil/core';
-import { seoSlotReset } from '../../utils/utils';
+import { h, Host } from "@stencil/core";
+import { seoSlotReset } from "../../utils/utils";
 export class PtcPara {
   constructor() {
-    this.fontSize = 'x-small';
-    this.fontWeight = 'w-4';
-    this.paraStyle = 'default';
-    this.paraColor = 'primary-grey';
-    this.paraLineH = 'line-height-normal';
+    this.fontSize = "x-small";
+    this.fontWeight = "w-4";
+    this.paraStyle = "default";
+    this.paraColor = "primary-grey";
+    this.paraLineH = "line-height-normal";
     this.paraMargin = undefined;
     this.paraAlign = undefined;
     this.ellipsisLineCutoff = undefined;
     this.paraZIndex = undefined;
     this.styles = undefined;
     this.seoCompatibilityMode = false;
-    this.tooltipZIndex = 'auto';
-    this.tooltipPosition = 'bottom';
-    this.tooltipTheme = 'standard';
+    this.tooltipZIndex = "auto";
+    this.tooltipPosition = "bottom";
+    this.tooltipTheme = "standard";
     this.enableTooltip = false;
     this.maxChars = undefined;
     this.maxLines = undefined;
     this.hideTooltipOnMobile = false;
     this.ismob = undefined;
     this.noOverflow = false;
-    this.tooltipWidth = 'default';
+    this.tooltipWidth = "default";
   }
   // Tooltip Properties ends
   render() {
@@ -36,43 +36,52 @@ export class PtcPara {
     if (!this.enableTooltip)
       return;
     const trimmedContent = content.trim();
-    const shouldTruncate = (trimmedContent.length > this.maxChars) && !this.maxLines;
-    return shouldTruncate ? `${trimmedContent.slice(0, this.maxChars).trimEnd()}\u00A0\u2026` : trimmedContent;
+    const shouldTruncate = trimmedContent.length > this.maxChars && !this.maxLines;
+    return shouldTruncate
+      ? `${trimmedContent.slice(0, this.maxChars).trimEnd()}\u00A0\u2026`
+      : trimmedContent;
   }
   componentDidLoad() {
     if (this.hideTooltipOnMobile) {
-      this.el.classList.add('hide-tooltip-on-mobile');
+      this.el.classList.add("hide-tooltip-on-mobile");
     }
-    this.el.addEventListener('mouseenter', () => { this.toggleTitleTooltip(true); });
-    this.el.addEventListener('mouseleave', () => { this.toggleTitleTooltip(false); });
+    this.el.addEventListener("mouseenter", () => {
+      this.toggleTitleTooltip(true);
+    });
+    this.el.addEventListener("mouseleave", () => {
+      this.toggleTitleTooltip(false);
+    });
     if (this.enableTooltip) {
       let paraContent = this.el.innerText || this.el.textContent;
-      ;
       this.tooltipText = paraContent.trim();
       this.el.innerText = this.getSortedText(paraContent);
     }
   }
   toggleTitleTooltip(show) {
-    const tooltipClass = 'tooltip-box';
+    const tooltipClass = "tooltip-box";
     const existingTooltip = this.el.querySelector(`.${tooltipClass}`);
-    const text = this.el.shadowRoot.querySelectorAll('.line-clamp-title');
+    const text = this.el.shadowRoot.querySelectorAll(".line-clamp-title");
     let maxLinesShowCheck = false;
     if (text) {
-      text.forEach(t => {
+      text.forEach((t) => {
         maxLinesShowCheck = t.scrollHeight > t.clientHeight;
       });
     }
-    const ifCharExceeds = this.maxChars ? (this.tooltipText.length > this.maxChars) && !this.maxLines : false;
+    const ifCharExceeds = this.maxChars
+      ? this.tooltipText.length > this.maxChars && !this.maxLines
+      : false;
     const ifLinesExceeds = this.maxLines && maxLinesShowCheck;
     if (show && this.enableTooltip) {
-      if (((!existingTooltip && ifCharExceeds) || (!existingTooltip && ifLinesExceeds)) && !this.noOverflow) {
-        const tooltipMarkup = document.createElement('div');
+      if (((!existingTooltip && ifCharExceeds) ||
+        (!existingTooltip && ifLinesExceeds)) &&
+        !this.noOverflow) {
+        const tooltipMarkup = document.createElement("div");
         tooltipMarkup.className = tooltipClass;
         tooltipMarkup.innerText = this.tooltipText;
         tooltipMarkup.style.zIndex = String(this.tooltipZIndex); // Ensures zIndex is a string
         tooltipMarkup.classList.add(this.tooltipPosition, this.tooltipTheme, this.tooltipWidth);
         if (this.hideTooltipOnMobile) {
-          tooltipMarkup.classList.add('hide-tooltip-mobile');
+          tooltipMarkup.classList.add("hide-tooltip-mobile");
         }
         this.el.appendChild(tooltipMarkup);
       }
@@ -97,21 +106,23 @@ export class PtcPara {
       [this.paraColor]: true,
       [this.paraLineH]: true,
       [this.paraAlign]: !!this.paraAlign ? true : false,
-      ['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0,
-      ['line-clamp-title']: this.maxLines && this.maxLines > 0, //tooltip code,
+      ["ellipsis-boxing"]: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0,
+      ["line-clamp-title"]: this.maxLines && this.maxLines > 0, //tooltip code,
     };
   }
   //WEB-2392
   addWhiteClass() {
-    if (this.paraColor == 'white') {
+    if (this.paraColor == "white") {
       return {
         [this.paraColor]: true,
       };
     }
   }
   getLineCuttoff() {
-    const lineClamp = this.ellipsisLineCutoff > 0 ? this.ellipsisLineCutoff : this.maxLines;
-    return lineClamp > 0 ? { '-webkit-line-clamp': `${lineClamp}` } : {};
+    const lineClamp = this.ellipsisLineCutoff > 0
+      ? this.ellipsisLineCutoff
+      : this.maxLines;
+    return lineClamp > 0 ? { "-webkit-line-clamp": `${lineClamp}` } : {};
   }
   static get is() { return "ptc-para"; }
   static get encapsulation() { return "shadow"; }
@@ -131,7 +142,7 @@ export class PtcPara {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'xxx-small' | 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'xxxx-large' | 'htmlquote-para'",
+          "original": "| \"xxx-small\"\r\n\t\t| \"xx-small\"\r\n\t\t| \"x-small\"\r\n\t\t| \"small\"\r\n\t\t| \"medium\"\r\n\t\t| \"large\"\r\n\t\t| \"x-large\"\r\n\t\t| \"xx-large\"\r\n\t\t| \"xxx-large\"\r\n\t\t| \"xxxx-large\"\r\n\t\t| \"htmlquote-para\"",
           "resolved": "\"htmlquote-para\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
           "references": {}
         },
@@ -143,13 +154,13 @@ export class PtcPara {
         },
         "attribute": "font-size",
         "reflect": false,
-        "defaultValue": "'x-small'"
+        "defaultValue": "\"x-small\""
       },
       "fontWeight": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'w-3' | 'w-4' | 'w-5' | 'w-6' | 'w-7' | 'w-8' | 'w-9'",
+          "original": "\"w-3\" | \"w-4\" | \"w-5\" | \"w-6\" | \"w-7\" | \"w-8\" | \"w-9\"",
           "resolved": "\"w-3\" | \"w-4\" | \"w-5\" | \"w-6\" | \"w-7\" | \"w-8\" | \"w-9\"",
           "references": {}
         },
@@ -161,13 +172,13 @@ export class PtcPara {
         },
         "attribute": "font-weight",
         "reflect": false,
-        "defaultValue": "'w-4'"
+        "defaultValue": "\"w-4\""
       },
       "paraStyle": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'default' | 'intro' | 'small' | 'announcement' | 'flush-style' | 'main'",
+          "original": "| \"default\"\r\n\t\t| \"intro\"\r\n\t\t| \"small\"\r\n\t\t| \"announcement\"\r\n\t\t| \"flush-style\"\r\n\t\t| \"main\"",
           "resolved": "\"announcement\" | \"default\" | \"flush-style\" | \"intro\" | \"main\" | \"small\"",
           "references": {}
         },
@@ -179,13 +190,13 @@ export class PtcPara {
         },
         "attribute": "para-style",
         "reflect": false,
-        "defaultValue": "'default'"
+        "defaultValue": "\"default\""
       },
       "paraColor": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'primary-grey' | 'primary-green' | 'white' | 'gray-darker'",
+          "original": "| \"primary-grey\"\r\n\t\t| \"primary-green\"\r\n\t\t| \"white\"\r\n\t\t| \"gray-darker\"",
           "resolved": "\"gray-darker\" | \"primary-green\" | \"primary-grey\" | \"white\"",
           "references": {}
         },
@@ -197,13 +208,13 @@ export class PtcPara {
         },
         "attribute": "para-color",
         "reflect": false,
-        "defaultValue": "'primary-grey'"
+        "defaultValue": "\"primary-grey\""
       },
       "paraLineH": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'line-height-densest' | 'line-height-denser' | 'line-height-dense' | 'line-height-normal' | 'line-height-loose' | 'line-height-looser' | 'line-height-p'",
+          "original": "| \"line-height-densest\"\r\n\t\t| \"line-height-denser\"\r\n\t\t| \"line-height-dense\"\r\n\t\t| \"line-height-normal\"\r\n\t\t| \"line-height-loose\"\r\n\t\t| \"line-height-looser\"\r\n\t\t| \"line-height-p\"",
           "resolved": "\"line-height-dense\" | \"line-height-denser\" | \"line-height-densest\" | \"line-height-loose\" | \"line-height-looser\" | \"line-height-normal\" | \"line-height-p\"",
           "references": {}
         },
@@ -215,13 +226,13 @@ export class PtcPara {
         },
         "attribute": "para-line-h",
         "reflect": false,
-        "defaultValue": "'line-height-normal'"
+        "defaultValue": "\"line-height-normal\""
       },
       "paraMargin": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| 'margin-flush'\r\n    | 'maring-top-1'\r\n    | 'margin-top-2'\r\n    | 'margin-top-3'\r\n    | 'margin-top-4'\r\n    | 'margin-top-5'\r\n    | 'margin-top-6'\r\n    | 'margin-bottom-1'\r\n    | 'margin-bottom-2'\r\n    | 'margin-bottom-3'\r\n    | 'margin-bottom-4'\r\n    | 'margin-bottom-5'\r\n    | 'margin-bottom-6'\r\n    | 'margin-1'\r\n    | 'margin-2'\r\n    | 'margin-3'\r\n    | 'margin-4'\r\n    | 'margin-5'\r\n    | 'margin-6'",
+          "original": "| \"margin-flush\"\r\n\t\t| \"maring-top-1\"\r\n\t\t| \"margin-top-2\"\r\n\t\t| \"margin-top-3\"\r\n\t\t| \"margin-top-4\"\r\n\t\t| \"margin-top-5\"\r\n\t\t| \"margin-top-6\"\r\n\t\t| \"margin-bottom-1\"\r\n\t\t| \"margin-bottom-2\"\r\n\t\t| \"margin-bottom-3\"\r\n\t\t| \"margin-bottom-4\"\r\n\t\t| \"margin-bottom-5\"\r\n\t\t| \"margin-bottom-6\"\r\n\t\t| \"margin-1\"\r\n\t\t| \"margin-2\"\r\n\t\t| \"margin-3\"\r\n\t\t| \"margin-4\"\r\n\t\t| \"margin-5\"\r\n\t\t| \"margin-6\"",
           "resolved": "\"margin-1\" | \"margin-2\" | \"margin-3\" | \"margin-4\" | \"margin-5\" | \"margin-6\" | \"margin-bottom-1\" | \"margin-bottom-2\" | \"margin-bottom-3\" | \"margin-bottom-4\" | \"margin-bottom-5\" | \"margin-bottom-6\" | \"margin-flush\" | \"margin-top-2\" | \"margin-top-3\" | \"margin-top-4\" | \"margin-top-5\" | \"margin-top-6\" | \"maring-top-1\"",
           "references": {}
         },
@@ -238,7 +249,7 @@ export class PtcPara {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'left' | 'center' | 'right' | 'justify' | 'right-768above'",
+          "original": "| \"left\"\r\n\t\t| \"center\"\r\n\t\t| \"right\"\r\n\t\t| \"justify\"\r\n\t\t| \"right-768above\"",
           "resolved": "\"center\" | \"justify\" | \"left\" | \"right\" | \"right-768above\"",
           "references": {}
         },
@@ -272,7 +283,7 @@ export class PtcPara {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'z-auto' | 'z-1' | 'z-2' | 'z-3' | 'z-99' | 'z-999'",
+          "original": "\"z-auto\" | \"z-1\" | \"z-2\" | \"z-3\" | \"z-99\" | \"z-999\"",
           "resolved": "\"z-1\" | \"z-2\" | \"z-3\" | \"z-99\" | \"z-999\" | \"z-auto\"",
           "references": {}
         },
@@ -336,13 +347,13 @@ export class PtcPara {
         },
         "attribute": "tooltip-z-index",
         "reflect": false,
-        "defaultValue": "'auto'"
+        "defaultValue": "\"auto\""
       },
       "tooltipPosition": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'left' | 'right' | 'bottom' | 'bottom-right' | 'top'",
+          "original": "| \"left\"\r\n\t\t| \"right\"\r\n\t\t| \"bottom\"\r\n\t\t| \"bottom-right\"\r\n\t\t| \"top\"",
           "resolved": "\"bottom\" | \"bottom-right\" | \"left\" | \"right\" | \"top\"",
           "references": {}
         },
@@ -354,13 +365,13 @@ export class PtcPara {
         },
         "attribute": "tooltip-position",
         "reflect": false,
-        "defaultValue": "'bottom'"
+        "defaultValue": "\"bottom\""
       },
       "tooltipTheme": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'standard' | 'danger'",
+          "original": "\"standard\" | \"danger\"",
           "resolved": "\"danger\" | \"standard\"",
           "references": {}
         },
@@ -372,7 +383,7 @@ export class PtcPara {
         },
         "attribute": "tooltip-theme",
         "reflect": false,
-        "defaultValue": "'standard'"
+        "defaultValue": "\"standard\""
       },
       "enableTooltip": {
         "type": "boolean",
@@ -466,7 +477,7 @@ export class PtcPara {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'full-width' | 'default'",
+          "original": "\"full-width\" | \"default\"",
           "resolved": "\"default\" | \"full-width\"",
           "references": {}
         },
@@ -478,7 +489,7 @@ export class PtcPara {
         },
         "attribute": "tooltip-width",
         "reflect": false,
-        "defaultValue": "'default'"
+        "defaultValue": "\"default\""
       }
     };
   }

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */