@ptcwebops/ptcw-design 0.6.0 → 0.6.1

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

@@ -6,64 +6,64 @@ const index = require('./index-3adcf9f4.js');
 
 const ptcDropdownCss = "@charset \"UTF-8\";:host{position:relative}:host .dropdown__header{cursor:pointer;transition:background-color ease-out 250ms, border-color ease-out 250ms;background-color:var(--color-white);display:flex;align-items:center;align-content:center;border:1px solid var(--color-gray-05);padding:0.25rem 0.75rem 0.25rem 0.75rem;border-radius:4px;font-family:Raleway;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0em;text-align:left}:host .dropdown__header b{font-weight:600}:host .dropdown__header icon-asset{width:1rem;height:1rem;margin-left:0.5rem}:host .dropdown__header:hover{background-color:var(--color-gray-02)}:host .dropdown__list{display:table;border:1px solid rgba(0, 0, 0, 0.24);border-radius:8px}:host ul{display:block;top:0.2rem;right:0.2rem;margin:0;list-style-type:none;padding-inline-start:0;padding:0.25rem 0.25rem;background-color:var(--color-gray-02);cursor:pointer;position:absolute;z-index:500}:host ul li{white-space:nowrap;padding:3px 1rem;font-weight:500}:host ul li.selected:before{content:\"✓\";display:block;position:absolute;left:0.4rem}:host ul li:hover{color:#fff;background-color:#699af8;border-radius:4px}";
 
-let PtcDropdown = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.clickedItem = index.createEvent(this, "clickedItem", 7);
-    /**
-     * Theme
-     */
-    this.theme = 'sort';
-    this.toggle = false;
-    this.handleClick = (item) => {
-      this.listItems.forEach((item) => item.selected = undefined);
-      item.selected = true;
-      this.selectedItem = item;
-      this.toggle = !this.toggle;
-      this.clickedItem.emit(item);
-    };
-    this.toggleList = () => {
-      this.toggle = !this.toggle;
-    };
-  }
-  componentWillLoad() {
-    let items = this.host.querySelectorAll('item');
-    if (!this.listItems) {
-      this.listItems = [];
-    }
-    items.forEach(item => {
-      if (item && item.getAttribute('label')) {
-        let listItem = {
-          element: item,
-          label: item.getAttribute('label'),
-          selected: item.hasAttribute('selected')
-        };
-        this.listItems.push(listItem);
-        if (item.hasAttribute('selected')) {
-          this.selectedItem = listItem;
-        }
-      }
-    });
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h("div", { class: classMap }, index.h("header", { class: "dropdown__header", onClick: this.toggleList }, index.h("label", null, index.h("b", null, this.label), " ", this.selectedItem ? this.selectedItem.label : "Select Option"), index.h("icon-asset", { type: "solid", size: "x-small", name: "chevron-down" })), this.toggle &&
-      index.h("ul", { tabIndex: -1, class: "dropdown__list", onBlur: () => { this.toggle = false; } }, this.listItems.map((item) => {
-        let cssClass = "dropdown__item";
-        if (item.selected) {
-          cssClass += " selected";
-        }
-        return (index.h("li", { class: cssClass, onClick: () => this.handleClick(item) }, item.label));
-      }))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-dropdown']: true,
-      [this.theme]: true
-    };
-  }
-  get host() { return index.getElement(this); }
-};
+let PtcDropdown = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.clickedItem = index.createEvent(this, "clickedItem", 7);
+    /**
+     * Theme
+     */
+    this.theme = 'sort';
+    this.toggle = false;
+    this.handleClick = (item) => {
+      this.listItems.forEach((item) => item.selected = undefined);
+      item.selected = true;
+      this.selectedItem = item;
+      this.toggle = !this.toggle;
+      this.clickedItem.emit(item);
+    };
+    this.toggleList = () => {
+      this.toggle = !this.toggle;
+    };
+  }
+  componentWillLoad() {
+    let items = this.host.querySelectorAll('item');
+    if (!this.listItems) {
+      this.listItems = [];
+    }
+    items.forEach(item => {
+      if (item && item.getAttribute('label')) {
+        let listItem = {
+          element: item,
+          label: item.getAttribute('label'),
+          selected: item.hasAttribute('selected')
+        };
+        this.listItems.push(listItem);
+        if (item.hasAttribute('selected')) {
+          this.selectedItem = listItem;
+        }
+      }
+    });
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h("div", { class: classMap }, index.h("header", { class: "dropdown__header", onClick: this.toggleList }, index.h("label", null, index.h("b", null, this.label), " ", this.selectedItem ? this.selectedItem.label : "Select Option"), index.h("icon-asset", { type: "solid", size: "x-small", name: "chevron-down" })), this.toggle &&
+      index.h("ul", { tabIndex: -1, class: "dropdown__list", onBlur: () => { this.toggle = false; } }, this.listItems.map((item) => {
+        let cssClass = "dropdown__item";
+        if (item.selected) {
+          cssClass += " selected";
+        }
+        return (index.h("li", { class: cssClass, onClick: () => this.handleClick(item) }, item.label));
+      }))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-dropdown']: true,
+      [this.theme]: true
+    };
+  }
+  get host() { return index.getElement(this); }
+};
 PtcDropdown.style = ptcDropdownCss;
 
 exports.ptc_dropdown = PtcDropdown;

package/dist/cjs/ptc-ellipsis-dropdown.cjs.entry.js

@@ -6,29 +6,29 @@ const index = require('./index-3adcf9f4.js');
 
 const ptcEllipsisDropdownCss = ".ellipsis-icon{border:1px solid #6E717C;border-radius:2px;vertical-align:middle;height:18px;width:18px;text-align:center}.ellipsis-icon icon-asset{display:inline-block;margin-bottom:2px}.ellipsis-icon icon-asset svg{margin:0 auto;display:block}.ptc-ellipsis-dropdown{position:relative;display:inline-block}.dropdown-container{display:none;margin-top:16px;box-shadow:0px 6px 16px rgba(0, 0, 0, 0.24);border-radius:4px;position:absolute;z-index:100;background:#FFF;padding:0.8rem 0;right:0;left:auto;min-width:max-content;width:100%}.show .dropdown-container{display:inline-block}";
 
-let PtcEllipsisDropdown = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.itemSelected = index.createEvent(this, "itemSelected", 7);
-    this.dataItems = [];
-    this.isDropdownOpen = false;
-  }
-  dropdownToggle(e) {
-    e.currentTarget.classList.toggle("show");
-  }
-  onItemSelected(e) {
-    this.itemSelected.emit(e);
-  }
-  render() {
-    return (index.h("div", { class: "ptc-ellipsis-dropdown", onClick: (e) => this.dropdownToggle(e) }, index.h("div", { class: "ellipsis-icon" }, index.h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis" })), index.h("div", { class: "dropdown-container" }, index.h("slot", { name: "dropdown" }), this.dataItems.map(dataItem => {
-      return (index.h("dropdown-item", null, index.h("a", { href: "#", onClick: (e) => {
-          e.preventDefault();
-          this.onItemSelected(dataItem);
-        } }, dataItem.text)));
-    }))));
-  }
-  get host() { return index.getElement(this); }
-};
+let PtcEllipsisDropdown = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.itemSelected = index.createEvent(this, "itemSelected", 7);
+    this.dataItems = [];
+    this.isDropdownOpen = false;
+  }
+  dropdownToggle(e) {
+    e.currentTarget.classList.toggle("show");
+  }
+  onItemSelected(e) {
+    this.itemSelected.emit(e);
+  }
+  render() {
+    return (index.h("div", { class: "ptc-ellipsis-dropdown", onClick: (e) => this.dropdownToggle(e) }, index.h("div", { class: "ellipsis-icon" }, index.h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis" })), index.h("div", { class: "dropdown-container" }, index.h("slot", { name: "dropdown" }), this.dataItems.map(dataItem => {
+      return (index.h("dropdown-item", null, index.h("a", { href: "#", onClick: (e) => {
+          e.preventDefault();
+          this.onItemSelected(dataItem);
+        } }, dataItem.text)));
+    }))));
+  }
+  get host() { return index.getElement(this); }
+};
 PtcEllipsisDropdown.style = ptcEllipsisDropdownCss;
 
 exports.ptc_ellipsis_dropdown = PtcEllipsisDropdown;

package/dist/cjs/ptc-filter-tag.cjs.entry.js

@@ -4,36 +4,36 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3adcf9f4.js');
 
-const CloseIcon = `<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.88956 3.99986L8.00002 0.888695L7.11135 -0.000183105L4.00089 3.11099L0.890644 2.34688e-05L0.00197005 0.888902L3.11222 3.99986L0.00195312 7.11084L0.890627 7.99972L4.00089 4.88874L7.11136 7.99993L8.00003 7.11105L4.88956 3.99986Z" fill="#9AA6AD"/>
-</svg>
+const CloseIcon = `<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.88956 3.99986L8.00002 0.888695L7.11135 -0.000183105L4.00089 3.11099L0.890644 2.34688e-05L0.00197005 0.888902L3.11222 3.99986L0.00195312 7.11084L0.890627 7.99972L4.00089 4.88874L7.11136 7.99993L8.00003 7.11105L4.88956 3.99986Z" fill="#9AA6AD"/>
+</svg>
 `;
 
 const ptcFilterTagCss = ".ptc-filter-tag{display:block;cursor:pointer;position:relative;margin:0.25rem}.ptc-filter-tag.bubble{display:inline-block;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);text-align:left;align-items:center;transition:border-color ease-out 250ms;border:1px solid var(--color-gray-05);border-radius:999px;padding:0.375rem 1.875rem 0.375rem 0.875rem;background:var(--color-white)}.ptc-filter-tag.bubble:hover{border:1px solid var(--color-gray-12)}.ptc-filter-tag.bubble .cls{display:block;position:absolute;top:0.35rem;right:0.8rem}.ptc-filter-tag.link,.ptc-filter-tag.link-lg{display:inline-block;font-family:Raleway;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-denser);letter-spacing:var(--ptc-letter-spacing-normal);text-align:right;border-bottom:1px solid transparent;background:var(--color-white)}.ptc-filter-tag.link:hover,.ptc-filter-tag.link-lg:hover{text-decoration:underline}.ptc-filter-tag.link .cls,.ptc-filter-tag.link-lg .cls{display:none}.ptc-filter-tag.link-lg{font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold)}.ptc-filter-tag.button{background:var(--color-gray-10);border-radius:var(--ptc-border-radius-standard);padding:0.625rem 1rem;font-family:\"Raleway\";font-style:normal;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-denser);color:var(--color-white)}.ptc-filter-tag.button:hover{background-color:var(--color-gray-12)}.ptc-filter-tag.button:active{background-color:var(--color-black)}.ptc-filter-tag.button .cls{display:none}";
 
-let PtcFilterTag = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.clicked = index.createEvent(this, "clicked", 7);
-    /**
-     * Theme
-     */
-    this.theme = 'bubble';
-    this.handleClick = () => {
-      this.clicked.emit(this);
-    };
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, null, index.h("span", { class: classMap, onClick: () => this.handleClick() }, index.h("slot", null), index.h("span", { class: "cls", innerHTML: CloseIcon }))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-filter-tag']: true,
-      [this.theme]: true
-    };
-  }
-};
+let PtcFilterTag = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.clicked = index.createEvent(this, "clicked", 7);
+    /**
+     * Theme
+     */
+    this.theme = 'bubble';
+    this.handleClick = () => {
+      this.clicked.emit(this);
+    };
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, null, index.h("span", { class: classMap, onClick: () => this.handleClick() }, index.h("slot", null), index.h("span", { class: "cls", innerHTML: CloseIcon }))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-filter-tag']: true,
+      [this.theme]: true
+    };
+  }
+};
 PtcFilterTag.style = ptcFilterTagCss;
 
 exports.ptc_filter_tag = PtcFilterTag;

package/dist/cjs/ptc-hero-footer-cta.cjs.entry.js

@@ -6,14 +6,14 @@ const index = require('./index-3adcf9f4.js');
 
 const ptcHeroFooterCtaCss = ".sc-ptc-hero-footer-cta-h{display:block}.hero-footer-cta.sc-ptc-hero-footer-cta{position:relative;padding:var(--ptc-layout-spacing-05) 0;background-position:50%;background-size:cover;background-repeat:no-repeat;position:relative}.hero-footer-cta.sc-ptc-hero-footer-cta .is-grid.sc-ptc-hero-footer-cta{align-items:center;position:relative;z-index:10;margin:auto}.hero-footer-cta.sc-ptc-hero-footer-cta h2.sc-ptc-hero-footer-cta,.hero-footer-cta.sc-ptc-hero-footer-cta p.sc-ptc-hero-footer-cta{color:var(--color-white);text-shadow:1px 1px 20px rgba(0, 0, 0, 0.5);font-stretch:normal;font-style:normal;text-align:left;color:var(--color-white)}.hero-footer-cta.sc-ptc-hero-footer-cta h2.sc-ptc-hero-footer-cta{font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-black);letter-spacing:var(--ptc-letter-spacing-loose);margin:var(--ptc-element-spacing-04) 0}@media only screen and (min-width: 992px){.hero-footer-cta.sc-ptc-hero-footer-cta h2.sc-ptc-hero-footer-cta{font-size:var(--ptc-font-size-xxxx-large);font-weight:var(--ptc-font-weight-extrabold)}}.hero-footer-cta.sc-ptc-hero-footer-cta p.sc-ptc-hero-footer-cta{font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p);letter-spacing:var(--ptc-letter-spacing-normal)}@media only screen and (min-width: 768px){.hero-footer-cta.sc-ptc-hero-footer-cta p.sc-ptc-hero-footer-cta{max-width:70%}}@media only screen and (min-width: 992px){.hero-footer-cta.sc-ptc-hero-footer-cta p.sc-ptc-hero-footer-cta{font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-denser)}}.hero-footer-cta.sc-ptc-hero-footer-cta .cta-overlay.sc-ptc-hero-footer-cta{position:absolute;top:0;bottom:0;right:0;left:0;background:rgba(0, 0, 0, 0.35)}.hero-footer-cta.sc-ptc-hero-footer-cta .btm-cta-cut.sc-ptc-hero-footer-cta{position:absolute;top:-1px;right:0;fill:var(--color-white);z-index:100;transform:scaleY(-1)}@media only screen and (min-width: 992px){.hero-footer-cta.sc-ptc-hero-footer-cta .cta-left-padding.sc-ptc-hero-footer-cta{padding-left:var(--ptc-element-spacing-08)}}";
 
-let PtcHeroFooterCta = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "hero-footer-cta ", style: { backgroundImage: `url(${this.backgroundImage})` } }, index.h("svg", { class: "btm-cta-cut", xmlns: "http://www.w3.org/2000/svg", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179" }, index.h("path", { fill: "#F3F3F3", id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "path-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), index.h("div", { class: "cta-overlay" }), index.h("div", { class: "ptc-container is-grid has-p-lg" }, index.h("div", { class: "is-col-8-lg cta-left-padding" }, index.h("h2", null, this.ctaTitle), index.h("p", null, this.description)), index.h("div", { class: "is-col-4-lg cta-section" }, index.h("slot", { name: "cta" }))))));
-  }
-};
+let PtcHeroFooterCta = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "hero-footer-cta ", style: { backgroundImage: `url(${this.backgroundImage})` } }, index.h("svg", { class: "btm-cta-cut", xmlns: "http://www.w3.org/2000/svg", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179" }, index.h("path", { fill: "#F3F3F3", id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "path-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), index.h("div", { class: "cta-overlay" }), index.h("div", { class: "ptc-container is-grid has-p-lg" }, index.h("div", { class: "is-col-8-lg cta-left-padding" }, index.h("h2", null, this.ctaTitle), index.h("p", null, this.description)), index.h("div", { class: "is-col-4-lg cta-section" }, index.h("slot", { name: "cta" }))))));
+  }
+};
 PtcHeroFooterCta.style = ptcHeroFooterCtaCss;
 
 exports.ptc_hero_footer_cta = PtcHeroFooterCta;

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

@@ -6,24 +6,24 @@ const index = require('./index-3adcf9f4.js');
 
 const ptcHeroCss = ":host{display:block;position:relative}:host(.jumbotron) .ptc-hero-wrapper,:host(.footer-cta) .ptc-hero-wrapper{position:relative}:host(.footer-cta) .ptc-hero-wrapper div>*{text-align:center}";
 
-let PtcHero = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Hero Background Image URL
-     */
-    this.bgUrl = undefined;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, index.h("div", { class: "ptc-hero-wrapper" }, index.h("ptc-img", Object.assign({ "image-type": "smart-bg" }, (!!this.bgUrl ? { imgUrl: this.bgUrl } : {}), { "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }), this.heroType == 'jumbotron' ? ([index.h("ptc-overlay", { "filter-color": "black-1" }), index.h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (index.h("ptc-overlay", { "filter-color": "black-3" })) : null, index.h("slot", null)))));
-  }
-  getCssClassMap() {
-    return {
-      [this.heroType]: this.heroType ? true : false,
-    };
-  }
-};
+let PtcHero = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Hero Background Image URL
+     */
+    this.bgUrl = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }, index.h("div", { class: "ptc-hero-wrapper" }, index.h("ptc-img", Object.assign({ "image-type": "smart-bg" }, (!!this.bgUrl ? { imgUrl: this.bgUrl } : {}), { "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }), this.heroType == 'jumbotron' ? ([index.h("ptc-overlay", { "filter-color": "black-1" }), index.h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (index.h("ptc-overlay", { "filter-color": "black-3" })) : null, index.h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.heroType]: this.heroType ? true : false,
+    };
+  }
+};
 PtcHero.style = ptcHeroCss;
 
 exports.ptc_hero = PtcHero;

package/dist/cjs/ptc-icon-list.cjs.entry.js

@@ -6,38 +6,38 @@ const index = require('./index-3adcf9f4.js');
 
 const ptcIconListCss = ":host{display:block;padding-bottom:var(--ptc-element-spacing-03)}:host .ptc-icon-list{display:flex;align-items:center}:host .ptc-icon-list .value-text{font-size:var(--ptc-font-size-small)}:host .ptc-icon-list .ptc-numbered-values{margin-left:var(--ptc-element-spacing-03);font-family:var(--ptc-font-secondary-latin)}:host .ptc-icon-list .ptc-numbered-subtitle{margin:0;font-size:var(--ptc-font-size-medium);font-family:var(--ptc-font-secondary-latin)}@media only screen and (min-width: 992px){:host .ptc-icon-list .ptc-numbered-subtitle{font-size:var(--ptc-font-size-large)}}:host .ptc-icon-list .ptc-content{font-family:var(--ptc-font-secondary-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold);font-stretch:normal;font-style:normal;line-height:var(--ptc-line-height-dense);letter-spacing:normal;text-align:left;color:var(--color-gray-10);margin:0 0 0 var(--ptc-element-spacing-03);line-height:var(--ptc-line-height-densest)}:host .ptc-icon-list .ptc-content-simple{margin:0 0 0 var(--ptc-element-spacing-03);font-size:var(--ptc-font-size-small);font-stretch:normal;font-style:normal;line-height:var(--ptc-line-height-dense);letter-spacing:normal;text-align:left;color:var(--color-gray-10);line-height:var(--ptc-line-height-densest)}:host ::slotted(icon-asset){display:flex;align-self:center}:host(.icon-top-align-list) ::slotted(icon-asset){display:flex;align-self:flex-start;transform:translateY(40%)}:host(.last-item){margin-bottom:var(--ptc-layout-spacing-03)}";
 
-let PtcIconList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-  * List item type
-  */
-    this.listType = 'simple-icon-list';
-    /**
-   * List value with unit Example: 60%
-   */
-    this.valueWithUnit = '';
-    /**
-   * List value text Example: up to
-   */
-    this.valueText = '';
-    /**
-   * List value with unit Example: Increase in Operator Productivity
-   */
-    this.listContent = '';
-    this.isLastItem = false;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, this.listType == "stat-icon-list" ? (index.h("div", { class: "ptc-icon-list" }, index.h("slot", { name: "icon" }), index.h("div", { class: "ptc-numbered-values" }, index.h("span", { class: "value-text" }, this.valueText, "\u00A0"), index.h("span", { class: "ptc-numbered-subtitle" }, this.valueWithUnit)), index.h("p", { class: "ptc-content" }, "- \u00A0", this.listContent))) : (index.h("div", { class: "ptc-icon-list" }, index.h("slot", { name: "icon" }), index.h("p", { class: "ptc-content-simple" }, this.listContent, " ")))));
-  }
-  getCssClassMap() {
-    return {
-      [this.listType]: this.listType ? true : false,
-      ['last-item']: this.isLastItem ? true : false
-    };
-  }
-};
+let PtcIconList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+  * List item type
+  */
+    this.listType = 'simple-icon-list';
+    /**
+   * List value with unit Example: 60%
+   */
+    this.valueWithUnit = '';
+    /**
+   * List value text Example: up to
+   */
+    this.valueText = '';
+    /**
+   * List value with unit Example: Increase in Operator Productivity
+   */
+    this.listContent = '';
+    this.isLastItem = false;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }, this.listType == "stat-icon-list" ? (index.h("div", { class: "ptc-icon-list" }, index.h("slot", { name: "icon" }), index.h("div", { class: "ptc-numbered-values" }, index.h("span", { class: "value-text" }, this.valueText, "\u00A0"), index.h("span", { class: "ptc-numbered-subtitle" }, this.valueWithUnit)), index.h("p", { class: "ptc-content" }, "- \u00A0", this.listContent))) : (index.h("div", { class: "ptc-icon-list" }, index.h("slot", { name: "icon" }), index.h("p", { class: "ptc-content-simple" }, this.listContent, " ")))));
+  }
+  getCssClassMap() {
+    return {
+      [this.listType]: this.listType ? true : false,
+      ['last-item']: this.isLastItem ? true : false
+    };
+  }
+};
 PtcIconList.style = ptcIconListCss;
 
 exports.ptc_icon_list = PtcIconList;

package/dist/cjs/ptc-icon-minimize.cjs.entry.js

@@ -6,41 +6,41 @@ const index = require('./index-3adcf9f4.js');
 
 const ptcIconMinimizeCss = ".content{transition:max-height ease-out 250ms;overflow:hidden;max-height:0}.ptc-icon-minimize .header{display:flex;justify-content:space-between;align-items:center;align-content:center}.ptc-icon-minimize .header .title{color:var(--color-gray-10);font-family:\"Raleway\";font-style:normal;font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-normal)}.ptc-icon-minimize .header .icon{cursor:pointer;border:1px solid var(--color-gray-10);border-radius:2px;transition:background-color ease-out 250ms;background-color:transparent;vertical-align:middle;height:1.25rem;width:1.25rem;text-align:center}.ptc-icon-minimize .header .icon:hover{background-color:var(--color-gray-02)}.ptc-icon-minimize .header .icon icon-asset{position:relative}";
 
-let PtcIconMinimize = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.opened = true;
-  }
-  componentDidLoad() {
-    let content = this.host.shadowRoot.querySelector('.content');
-    if (this.opened && !content.style.maxHeight) {
-      content.style.maxHeight = content.scrollHeight + "px";
-    }
-  }
-  dropdownToggle() {
-    this.opened = !this.opened;
-  }
-  getScrollHeight() {
-    let result = undefined;
-    let content = this.host.shadowRoot.querySelector('.content');
-    if (this.opened && content) {
-      result = { 'max-height': content.scrollHeight + "px" };
-    }
-    else if (this.opened) {
-      result = { 'max-height': 350 + "px" };
-    }
-    else if (content && content.style.maxHeight) {
-      content.style.removeProperty('max-height');
-    }
-    return result;
-  }
-  render() {
-    let scrollHeight = this.getScrollHeight();
-    let icon = this.opened ? 'minus' : 'plus';
-    return (index.h("div", { class: "ptc-icon-minimize" }, index.h("div", { class: "header" }, index.h("div", { class: "title" }, this.heading), index.h("div", { class: "icon", onClick: () => this.dropdownToggle() }, index.h("icon-asset", { type: "solid", size: "xxx-small", name: icon }))), index.h("div", { class: "content", style: scrollHeight }, index.h("slot", null))));
-  }
-  get host() { return index.getElement(this); }
-};
+let PtcIconMinimize = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.opened = true;
+  }
+  componentDidLoad() {
+    let content = this.host.shadowRoot.querySelector('.content');
+    if (this.opened && !content.style.maxHeight) {
+      content.style.maxHeight = content.scrollHeight + "px";
+    }
+  }
+  dropdownToggle() {
+    this.opened = !this.opened;
+  }
+  getScrollHeight() {
+    let result = undefined;
+    let content = this.host.shadowRoot.querySelector('.content');
+    if (this.opened && content) {
+      result = { 'max-height': content.scrollHeight + "px" };
+    }
+    else if (this.opened) {
+      result = { 'max-height': 350 + "px" };
+    }
+    else if (content && content.style.maxHeight) {
+      content.style.removeProperty('max-height');
+    }
+    return result;
+  }
+  render() {
+    let scrollHeight = this.getScrollHeight();
+    let icon = this.opened ? 'minus' : 'plus';
+    return (index.h("div", { class: "ptc-icon-minimize" }, index.h("div", { class: "header" }, index.h("div", { class: "title" }, this.heading), index.h("div", { class: "icon", onClick: () => this.dropdownToggle() }, index.h("icon-asset", { type: "solid", size: "xxx-small", name: icon }))), index.h("div", { class: "content", style: scrollHeight }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+};
 PtcIconMinimize.style = ptcIconMinimizeCss;
 
 exports.ptc_icon_minimize = PtcIconMinimize;