@ptcwebops/ptcw-design 0.5.9 → 0.6.0

package/dist/cjs/ptc-nav-item.cjs.entry.js

@@ -6,89 +6,89 @@ const index = require('./index-3adcf9f4.js');
 
 const ptcNavItemCss = ":host{display:block;width:100%}@media only screen and (min-width: 992px){:host{width:auto}}:host([depth=\"2\"]) a{font-family:var(--ptc-font-secondary-latin);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-dense);letter-spacing:var(--ptc-letter-spacing-dense);margin-bottom:var(--ptc-element-spacing-03);padding-left:50px}@media only screen and (min-width: 992px){:host([depth=\"2\"]) a{padding-left:0px}}:host([depth=\"1\"]) a{font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-dense);letter-spacing:var(--ptc-letter-spacing-dense);padding:20px 25px}:host([nav-type=secondary-nav]) a{font-size:var(--ptc-font-size-xxx-small);font-weight:var(--ptc-font-weight-thin)}:host([nav-type=language-nav]) a{font-size:var(--ptc-font-size-xxx-small);font-weight:var(--ptc-font-weight-thin)}@media only screen and (min-width: 992px){.primary-nav~.ptc-nav-children{position:absolute;left:0}.primary-nav~.ptc-nav-children ::slotted(.nav-tab){background-color:var(--color-gray-11);display:flex;width:100vw}.language-nav~.ptc-nav-children{position:absolute;background-color:var(--color-gray-11)}}a[aria-expanded=true]~.ptc-nav-children{padding-top:var(--ptc-element-spacing-04);max-height:2000px}@media only screen and (min-width: 992px){a[aria-expanded=true]~.ptc-nav-children{padding-top:0}}.ptc-nav-children{overflow:hidden;max-height:0;transition:max-height var(--ptc-transition-medium) var(--ptc-ease-inout), padding-top var(--ptc-transition-medium) var(--ptc-ease-inout)}a{color:var(--color-white);text-transform:uppercase;display:block;outline:none;text-decoration:none}";
 
-let PtcNavItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.menuItemToggled = index.createEvent(this, "menuItemToggled", 7);
-    /**
-     * Link URL
-     */
-    this.url = undefined;
-    /**
-     * Nav Description
-     */
-    this.label = '';
-    /**
-     * If the current nav item is expanded
-     */
-    this.ariaExpanded = false;
-    /**
-     * Depth of the current nav item
-     */
-    this.depth = 0;
-    /**
-     * If the current nav item has children nav items
-     */
-    this.hasChildren = false;
-    /**
-     * If the parent nav item of the current one is expanded
-     */
-    this.parentExpanded = false;
-    /**
-     * Nav Item Type
-     */
-    this.navType = undefined;
-  }
-  /**
-   * Watch
-   */
-  expandedHandler(newValue) {
-    const children = Array.prototype.slice.call(this.el.children);
-    children.forEach(child => {
-      child.parentExpanded = newValue;
-    });
-    this.menuItemToggled.emit({ expanded: this.ariaExpanded });
-  }
-  /**
-   * Event Listener
-   */
-  handleClick(e) {
-    if (this.hasChildren) {
-      e.preventDefault();
-      this.ariaExpanded = !this.ariaExpanded;
-    }
-  }
-  handleResize(ev) {
-    console.log('the body was scrolled', ev);
-  }
-  /**
-   * Lifecycle method
-   */
-  componentWillRender() {
-    this.hasChildren = !!this.el.hasChildNodes();
-    let parentMenu = this.el.closest('ptc-nav-item');
-    let nextParentMenu;
-    this.depth = 0;
-    while (parentMenu) {
-      nextParentMenu = parentMenu.parentElement.closest('ptc-nav-item');
-      if (nextParentMenu === parentMenu) {
-        break;
-      }
-      else {
-        parentMenu = nextParentMenu;
-        this.depth = this.depth + 1;
-      }
-    }
-  }
-  render() {
-    //const leftIndent = this.depth > 1 ? 25 * this.depth + 'px' : '25px';
-    return (index.h(index.Host, { role: "none" }, index.h("a", { role: "menuitem", href: this.url, tabIndex: this.parentExpanded || this.depth === 1 ? 0 : -1, "aria-depth": this.depth, "aria-haspopup": this.hasChildren.toString(), "aria-expanded": this.hasChildren ? this.ariaExpanded.toString() : this.ariaExpanded, onClick: e => this.handleClick(e), class: this.navType }, index.h("span", null, this.label)), this.hasChildren && (index.h("div", { class: "ptc-nav-children", role: "menu", part: this.navType, "aria-label": this.label }, index.h("slot", null)))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "ariaExpanded": ["expandedHandler"]
-  }; }
-};
+let PtcNavItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.menuItemToggled = index.createEvent(this, "menuItemToggled", 7);
+    /**
+     * Link URL
+     */
+    this.url = undefined;
+    /**
+     * Nav Description
+     */
+    this.label = '';
+    /**
+     * If the current nav item is expanded
+     */
+    this.ariaExpanded = false;
+    /**
+     * Depth of the current nav item
+     */
+    this.depth = 0;
+    /**
+     * If the current nav item has children nav items
+     */
+    this.hasChildren = false;
+    /**
+     * If the parent nav item of the current one is expanded
+     */
+    this.parentExpanded = false;
+    /**
+     * Nav Item Type
+     */
+    this.navType = undefined;
+  }
+  /**
+   * Watch
+   */
+  expandedHandler(newValue) {
+    const children = Array.prototype.slice.call(this.el.children);
+    children.forEach(child => {
+      child.parentExpanded = newValue;
+    });
+    this.menuItemToggled.emit({ expanded: this.ariaExpanded });
+  }
+  /**
+   * Event Listener
+   */
+  handleClick(e) {
+    if (this.hasChildren) {
+      e.preventDefault();
+      this.ariaExpanded = !this.ariaExpanded;
+    }
+  }
+  handleResize(ev) {
+    console.log('the body was scrolled', ev);
+  }
+  /**
+   * Lifecycle method
+   */
+  componentWillRender() {
+    this.hasChildren = !!this.el.hasChildNodes();
+    let parentMenu = this.el.closest('ptc-nav-item');
+    let nextParentMenu;
+    this.depth = 0;
+    while (parentMenu) {
+      nextParentMenu = parentMenu.parentElement.closest('ptc-nav-item');
+      if (nextParentMenu === parentMenu) {
+        break;
+      }
+      else {
+        parentMenu = nextParentMenu;
+        this.depth = this.depth + 1;
+      }
+    }
+  }
+  render() {
+    //const leftIndent = this.depth > 1 ? 25 * this.depth + 'px' : '25px';
+    return (index.h(index.Host, { role: "none" }, index.h("a", { role: "menuitem", href: this.url, tabIndex: this.parentExpanded || this.depth === 1 ? 0 : -1, "aria-depth": this.depth, "aria-haspopup": this.hasChildren.toString(), "aria-expanded": this.hasChildren ? this.ariaExpanded.toString() : this.ariaExpanded, onClick: e => this.handleClick(e), class: this.navType }, index.h("span", null, this.label)), this.hasChildren && (index.h("div", { class: "ptc-nav-children", role: "menu", part: this.navType, "aria-label": this.label }, index.h("slot", null)))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "ariaExpanded": ["expandedHandler"]
+  }; }
+};
 PtcNavItem.style = ptcNavItemCss;
 
 exports.ptc_nav_item = PtcNavItem;

package/dist/cjs/ptc-nav.cjs.entry.js

@@ -6,14 +6,14 @@ const index = require('./index-3adcf9f4.js');
 
 const ptcNavCss = ":host{display:block}.nav-style{background-color:var(--color-gray-11);display:block}@media only screen and (min-width: 992px){.nav-style{display:grid;grid-template-columns:auto fit-content(76px);grid-template-rows:fit-content(22px) 1fr;grid-template-areas:\"secondary secondary\" \"primary language\"}.primary-nav{grid-area:primary}.secondary-nav{grid-area:secondary}.language-nav{grid-area:language}}";
 
-let PtcNav = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("nav", { class: "nav-style" }, index.h("div", { class: "primary-nav", part: "primary-nav-part" }, index.h("slot", { name: "primary-nav-content" })), index.h("div", { class: "secondary-nav", part: "secondary-nav-part" }, index.h("slot", { name: "secondary-nav-content" })), index.h("div", { class: "language-nav", part: "language-nav-part" }, index.h("slot", { name: "language-nav-content" })))));
-  }
-};
+let PtcNav = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("nav", { class: "nav-style" }, index.h("div", { class: "primary-nav", part: "primary-nav-part" }, index.h("slot", { name: "primary-nav-content" })), index.h("div", { class: "secondary-nav", part: "secondary-nav-part" }, index.h("slot", { name: "secondary-nav-content" })), index.h("div", { class: "language-nav", part: "language-nav-part" }, index.h("slot", { name: "language-nav-content" })))));
+  }
+};
 PtcNav.style = ptcNavCss;
 
 exports.ptc_nav = PtcNav;

package/dist/cjs/ptc-pagenation.cjs.entry.js

@@ -6,106 +6,110 @@ const index = require('./index-3adcf9f4.js');
 
 const ptcPagenationCss = ":host{display:block}.events-filter{padding:20px 32px 20px 0;text-align:center}@media (min-width: 992px){.events-filter{padding:10px 40px 10px 0px}}.events-filter .pagenation-arrow{width:40px;height:40px;margin:0 15px;vertical-align:middle}.show-page{display:inline}.hide-page{display:none}.prev-text{display:none}.last-text{display:none}@media (min-width: 992px){.prev-text{display:inline;cursor:pointer}.last-text{display:inline;cursor:pointer}}.events-filter-item{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-semibold);font-stretch:normal;font-style:var(--ptc-font-style-normal);line-height:var(--ptc-line-height-denser);letter-spacing:var(--ptc-letter-spacing-normal);text-align:left;padding:6px;color:var(--color-gray-13);text-decoration:none}.events-filter .active{font-family:var(--ptc-font-latin);border-bottom:2px solid var(--color-green-13);font-weight:var(--ptc-font-weight-semibold)}.events-filter-item:hover,.events-filter-item:focus{text-decoration:none;outline:0;color:var(--color-green-14)}.events-filter .disabled{color:var(--color-white-01)}.events-filter-dots{padding:0rem;font-weight:var(--ptc-font-weight-extrabold);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-xx-small);font-stretch:normal;font-style:var(--ptc-font-style-normal);line-height:var(--ptc-line-height-denser);letter-spacing:var(--ptc-letter-spacing-normal);text-align:left;color:var(--color-gray-13);text-decoration:none}.events-disable-arrows{opacity:0.35}.events-enable-arrows{opacity:1}.events-small-dots{height:60px;margin-top:-25px}@media (min-width: 992px){.events-small-dots{height:80px;margin-top:-40px}}.last-page{transform:rotate(180deg)}";
 
-let PtcPagenation = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.pageClicked = index.createEvent(this, "pageClicked", 7);
-    this.numberOfItems = 9; //page size
-    this.previousValue = "Previous";
-    this.lastValue = "Next";
-    this.pageNumbers = [];
-    this.minPageNumber = 1;
-    this.maxPageNumber = 4;
-    this.clickedPageNumber = 1;
-    this.appendArray = true;
-    this.handleClick = () => {
-      if (this.clickedPageNumber < this.getPageCount()) {
-        if (this.clickedPageNumber + 1 <= this.maxPageNumber) {
-          this.handleClickPage(this.clickedPageNumber + 1);
-        }
-        else {
-          this.minPageNumber = this.minPageNumber + 4;
-          this.clickedPageNumber = this.clickedPageNumber + 1;
-          this.appendArray = true;
-          this.pageNumbers = [...this.pageNumbers];
-        }
-      }
-    };
-    this.handleClickPrev = () => {
-      if (this.clickedPageNumber > 1) {
-        if (this.clickedPageNumber - 1 >= this.minPageNumber) {
-          this.handleClickPage(this.clickedPageNumber - 1);
-        }
-        else {
-          this.minPageNumber = this.minPageNumber - 4;
-          this.clickedPageNumber = this.clickedPageNumber - 1;
-          this.appendArray = true;
-          this.pageNumbers = [...this.pageNumbers];
-        }
-      }
-    };
-    this.getPageCount = () => {
-      let pageCount = 0;
-      if (this.totalCount != 0) {
-        if (this.totalCount % this.numberOfItems == 0) {
-          pageCount = this.totalCount / this.numberOfItems;
-        }
-        else {
-          pageCount = this.totalCount / this.numberOfItems + 1;
-        }
-      }
-      return pageCount;
-    };
-    this.getIndex = (appendarr) => {
-      //var games : string[] = [];
-      //let games : HTMLElement[] = [];
-      //let items: pageItem[] = [];
-      if (appendarr) {
-        let pageCountVal = this.getPageCount();
-        this.maxPageNumber = pageCountVal >= this.minPageNumber + 3 ? this.minPageNumber + 3 : pageCountVal;
-        this.pageNumbers = [];
-        for (let i = this.minPageNumber; i <= this.maxPageNumber; i++) {
-          let id = i + "Id";
-          let isItemActive = false;
-          if (i == this.clickedPageNumber) {
-            isItemActive = true;
-          }
-          // if (i > 4)
-          // {
-          //     hideShowPageClass = " hide-page";
-          // }
-          const newPageItem = {
-            id: id,
-            isActive: isItemActive,
-            dataPage: i
-          };
-          this.pageNumbers = [...this.pageNumbers, newPageItem];
-          //games.push(<a href="#" data-url={id} data-page={i} class={classValue}>i</a>);
-        }
-      }
-      return this.pageNumbers;
-    };
-  }
-  render() {
-    let pageCountValue = this.getPageCount();
-    this.pageNumbers = [...this.getIndex(this.appendArray)];
-    return (index.h("div", { class: "events-filter" }, index.h("span", { class: this.clickedPageNumber == 1 ? "events-filter-item disabled prev-text" : "events-filter-item prev-text" }, this.previousValue), index.h("img", { src: "/dist/ptc/images/sidescroll-left-curved.svg", onClick: this.handleClickPrev, class: this.clickedPageNumber == 1 ? "pagenation-arrow prev-page events-disable-arrows" : "pagenation-arrow prev-page" }), this.pageNumbers.map(anchoritem => {
-      return (index.h("a", { href: "#", "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive ? "events-filter-item active" : "events-filter-item", onClick: () => this.handleClickPage(anchoritem.dataPage) }, anchoritem.dataPage));
-    }), pageCountValue > this.maxPageNumber ? (index.h("span", { class: "events-filter-dots" }, ". . .")) : null, index.h("img", { src: "/dist/ptc/images/sidescroll-right-curved.svg", onClick: this.handleClick, class: this.clickedPageNumber == pageCountValue ? "pagenation-arrow last-page events-disable-arrows" : "pagenation-arrow last-page" }), index.h("span", { class: this.clickedPageNumber == pageCountValue ? "events-filter-item disabled last-text" : "events-filter-item last-text" }, this.lastValue)));
-  }
-  handleClickPage(clickedPage) {
-    this.clickedPageNumber = clickedPage;
-    let newArray = [];
-    this.appendArray = false;
-    newArray = [...this.pageNumbers];
-    newArray.map(item => {
-      item.dataPage == clickedPage ? item.isActive = true : item.isActive = false;
-    });
-    this.pageNumbers = null;
-    this.pageNumbers = [...newArray];
-    this.pageClicked.emit(clickedPage);
-  }
-};
+let PtcPagenation = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.pageClicked = index.createEvent(this, "pageClicked", 7);
+    this.numberOfItems = 9; //page size
+    this.previousValue = "Previous";
+    this.lastValue = "Next";
+    this.pageNumbers = [];
+    this.minPageNumber = 1;
+    this.maxPageNumber = 4;
+    this.clickedPageNumber = 1;
+    this.appendArray = true;
+    this.prevArrowImg = "/dist/ptc/images/sidescroll-left-curved.svg";
+    this.nextArrowImg = "/dist/ptc/images/sidescroll-right-curved.svg";
+    this.handleClick = () => {
+      if (this.clickedPageNumber < this.getPageCount()) {
+        if (this.clickedPageNumber + 1 <= this.maxPageNumber) {
+          this.handleClickPage(this.clickedPageNumber + 1);
+        }
+        else {
+          this.minPageNumber = this.minPageNumber + 4;
+          this.clickedPageNumber = this.clickedPageNumber + 1;
+          this.appendArray = true;
+          this.pageNumbers = [...this.pageNumbers];
+          this.pageClicked.emit(this.clickedPageNumber);
+        }
+      }
+    };
+    this.handleClickPrev = () => {
+      if (this.clickedPageNumber > 1) {
+        if (this.clickedPageNumber - 1 >= this.minPageNumber) {
+          this.handleClickPage(this.clickedPageNumber - 1);
+        }
+        else {
+          this.minPageNumber = this.minPageNumber - 4;
+          this.clickedPageNumber = this.clickedPageNumber - 1;
+          this.appendArray = true;
+          this.pageNumbers = [...this.pageNumbers];
+          this.pageClicked.emit(this.clickedPageNumber);
+        }
+      }
+    };
+    this.getPageCount = () => {
+      let pageCount = 0;
+      if (this.totalCount != 0) {
+        if (this.totalCount % this.numberOfItems == 0) {
+          pageCount = this.totalCount / this.numberOfItems;
+        }
+        else {
+          pageCount = this.totalCount / this.numberOfItems + 1;
+        }
+      }
+      return Math.floor(pageCount);
+    };
+    this.getIndex = (appendarr) => {
+      //var games : string[] = [];
+      //let games : HTMLElement[] = [];
+      //let items: pageItem[] = [];
+      if (appendarr) {
+        let pageCountVal = this.getPageCount();
+        this.maxPageNumber = pageCountVal >= this.minPageNumber + 3 ? this.minPageNumber + 3 : pageCountVal;
+        this.pageNumbers = [];
+        for (let i = this.minPageNumber; i <= this.maxPageNumber; i++) {
+          let id = i + "Id";
+          let isItemActive = false;
+          if (i == this.clickedPageNumber) {
+            isItemActive = true;
+          }
+          // if (i > 4)
+          // {
+          //     hideShowPageClass = " hide-page";
+          // }
+          const newPageItem = {
+            id: id,
+            isActive: isItemActive,
+            dataPage: i
+          };
+          this.pageNumbers = [...this.pageNumbers, newPageItem];
+          //games.push(<a href="#" data-url={id} data-page={i} class={classValue}>i</a>);
+        }
+      }
+      return this.pageNumbers;
+    };
+  }
+  render() {
+    let pageCountValue = this.getPageCount();
+    this.pageNumbers = [...this.getIndex(this.appendArray)];
+    return (index.h("div", { class: "events-filter" }, index.h("span", { class: this.clickedPageNumber == 1 ? "events-filter-item disabled prev-text" : "events-filter-item prev-text" }, this.previousValue), index.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 (index.h("a", { href: "#", "data-url": anchoritem.id, "data-page": anchoritem.dataPage, class: anchoritem.isActive ? "events-filter-item active" : "events-filter-item", onClick: () => this.handleClickPage(anchoritem.dataPage) }, anchoritem.dataPage));
+    }), pageCountValue > this.maxPageNumber ? (index.h("span", { class: "events-filter-dots" }, ". . .")) : null, index.h("img", { src: this.nextArrowImg, onClick: this.handleClick, class: this.clickedPageNumber == pageCountValue ? "pagenation-arrow last-page events-disable-arrows" : "pagenation-arrow last-page" }), index.h("span", { class: this.clickedPageNumber == pageCountValue ? "events-filter-item disabled last-text" : "events-filter-item last-text" }, this.lastValue)));
+  }
+  handleClickPage(clickedPage) {
+    this.clickedPageNumber = clickedPage;
+    let newArray = [];
+    this.appendArray = false;
+    newArray = [...this.pageNumbers];
+    newArray.map(item => {
+      item.dataPage == clickedPage ? item.isActive = true : item.isActive = false;
+    });
+    this.pageNumbers = null;
+    this.pageNumbers = [...newArray];
+    this.pageClicked.emit(clickedPage);
+  }
+};
 PtcPagenation.style = ptcPagenationCss;
 
 exports.ptc_pagenation = PtcPagenation;

package/dist/cjs/ptc-para.cjs.entry.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3adcf9f4.js');
+
+const ptcParaCss = ":host{z-index:1}p.default{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;}p.main{text-shadow:0 3px 6px var(--color-white);line-height:var(--ptc-line-height-dense);color:var(--color-gray-10)}p.primary-grey{color:var(--color-gray-10)}p.white{color:var(--color-white)}p.xxx-small{font-size:var(--ptc-font-size-xxx-small)}p.xx-small{font-size:var(--ptc-font-size-xx-small)}p.x-small{font-size:var(--ptc-font-size-x-small)}p.small{font-size:var(--ptc-font-size-small)}p.medium{font-size:var(--ptc-font-size-medium)}p.large{font-size:var(--ptc-font-size-large)}p.x-large{font-size:var(--ptc-font-size-x-large)}p.xx-large{font-size:var(--ptc-font-size-xx-large)}p.xxx-large{font-size:var(--ptc-font-size-xxx-large)}p.xxxx-large{font-size:var(--ptc-font-size-xxxx-large)}p.w-3{font-weight:var(--ptc-font-weight-thin)}p.w-4{font-weight:var(--ptc-font-weight-regular)}p.w-5{font-weight:var(--ptc-font-weight-medium)}p.w-6{font-weight:var(--ptc-font-weight-semibold)}p.w-7{font-weight:var(--ptc-font-weight-bold)}p.w-8{font-weight:var(--ptc-font-weight-extrabold)}p.w-9{font-weight:var(--ptc-font-weight-black)}p.margin-flush{margin-top:0;margin-bottom:0}p.margin-top-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:0}p.margin-top-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:0}p.margin-top-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:0}p.margin-top-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:0}p.margin-top-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:0}p.margin-top-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:0}p.margin-bottom-1{margin-bottom:var(--ptc-element-spacing-01);margin-top:0}p.margin-bottom-2{margin-bottom:var(--ptc-element-spacing-02);margin-top:0}p.margin-bottom-3{margin-bottom:var(--ptc-element-spacing-03);margin-top:0}p.margin-bottom-4{margin-bottom:var(--ptc-element-spacing-04);margin-top:0}p.margin-bottom-5{margin-bottom:var(--ptc-element-spacing-05);margin-top:0}p.margin-bottom-6{margin-bottom:var(--ptc-element-spacing-06);margin-top:0}p.margin-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:var(--ptc-element-spacing-01)}p.margin-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:var(--ptc-element-spacing-02)}p.margin-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:var(--ptc-element-spacing-03)}p.margin-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:var(--ptc-element-spacing-04)}p.margin-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}p.margin-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:var(--ptc-element-spacing-06)}p.line-height-densest{line-height:var(--ptc-line-height-densest)}p.line-height-denser{line-height:var(--ptc-line-height-denser)}p.line-height-dense{line-height:var(--ptc-line-height-dense)}p.line-height-normal{line-height:var(--ptc-line-height-normal)}p.line-height-loose{line-height:var(--ptc-line-height-loose)}p.line-height-looser{line-height:var(--ptc-line-height-looser)}p.announcement{text-transform:uppercase;font-size:var(--ptc-font-size-small);color:var(--color-gray-07);line-height:var(--ptc-line-height-looser);letter-spacing:var(--ptc-letter-spacing-loose)}";
+
+let PtcPara = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Paragraph font size
+     **/
+    this.fontSize = "x-small";
+    /**
+     * Paragraph font weight
+     **/
+    this.fontWeight = 'w-4';
+    /**
+     * Paragraph Style
+     **/
+    this.paraStyle = 'default';
+    /**
+     * Paragraph Color
+     */
+    this.paraColor = 'primary-grey';
+    /**
+     * line height
+     */
+    this.paraLineH = 'line-height-normal';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h("p", { class: classMap, part: "part-para" }, index.h("slot", null)));
+  }
+  getCssClassMap() {
+    return {
+      [this.fontSize]: true,
+      [this.fontWeight]: true,
+      [this.paraStyle]: true,
+      [this.paraMargin]: !!this.paraMargin ? true : false,
+      [this.paraColor]: true,
+      [this.paraLineH]: true
+    };
+  }
+};
+PtcPara.style = ptcParaCss;
+
+exports.ptc_para = PtcPara;