@ptcwebops/ptcw-design 0.6.4 → 0.6.5

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

@@ -2,24 +2,24 @@ import { r as registerInstance, h, H as Host } from './index-a91c2367.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) {
-    registerInstance(this, hostRef);
-    /**
-     * Hero Background Image URL
-     */
-    this.bgUrl = undefined;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("div", { class: "ptc-hero-wrapper" }, 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' ? ([h("ptc-overlay", { "filter-color": "black-1" }), h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (h("ptc-overlay", { "filter-color": "black-3" })) : null, h("slot", null)))));
-  }
-  getCssClassMap() {
-    return {
-      [this.heroType]: this.heroType ? true : false,
-    };
-  }
-};
+let PtcHero = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Hero Background Image URL
+     */
+    this.bgUrl = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("div", { class: "ptc-hero-wrapper" }, 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' ? ([h("ptc-overlay", { "filter-color": "black-1" }), h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (h("ptc-overlay", { "filter-color": "black-3" })) : null, h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.heroType]: this.heroType ? true : false,
+    };
+  }
+};
 PtcHero.style = ptcHeroCss;
 
 export { PtcHero as ptc_hero };

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

@@ -1,39 +1,39 @@
 import { r as registerInstance, h, H as Host } from './index-a91c2367.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)}";
+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);white-space:nowrap}:host .ptc-icon-list .ptc-numbered-values{margin-left:var(--ptc-element-spacing-03);font-family:var(--ptc-font-secondary-latin);white-space:nowrap}: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) {
-    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 (h(Host, { class: classMap }, this.listType == "stat-icon-list" ? (h("div", { class: "ptc-icon-list" }, h("slot", { name: "icon" }), h("div", { class: "ptc-numbered-values" }, h("span", { class: "value-text" }, this.valueText, "\u00A0"), h("span", { class: "ptc-numbered-subtitle" }, this.valueWithUnit)), h("p", { class: "ptc-content" }, "- \u00A0", this.listContent))) : (h("div", { class: "ptc-icon-list" }, h("slot", { name: "icon" }), 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) {
+    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 (h(Host, { class: classMap }, this.listType == "stat-icon-list" ? (h("div", { class: "ptc-icon-list" }, h("slot", { name: "icon" }), h("div", { class: "ptc-numbered-values" }, h("span", { class: "value-text" }, this.valueText, "\u00A0"), h("span", { class: "ptc-numbered-subtitle" }, this.valueWithUnit)), h("p", { class: "ptc-content" }, "- \u00A0", this.listContent))) : (h("div", { class: "ptc-icon-list" }, h("slot", { name: "icon" }), 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;
 
 export { PtcIconList as ptc_icon_list };

package/dist/esm/{ptc-img_2.entry.js → ptc-img.entry.js}

@@ -1,180 +1,156 @@
 import { r as registerInstance, h, H as Host, a as getElement } from './index-a91c2367.js';
-import { a as ResponsiveBgVariables } from './interfaces-c1c73092.js';
+import { a as ResponsiveBgVariables } from './interfaces-7c0243be.js';
 
 const ptcImgCss = ".smart-bg{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.smart-img{position:absolute;display:block;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.radius-standard{border-radius:var(--ptc-border-radius-standard)}.radius-large{border-radius:var(--ptc-border-radius-large)}.lazy-bg{background-image:none !important;background-color:var(--color-gray-03)}@media only screen and (min-width: 768px){.hidden-xs{display:none !important}}@media (min-width: 768px) and (max-width: 991px){.hidden-sm{display:none !important}}@media (min-width: 992px) and (max-width: 1199px){.hidden-md{display:none !important}}@media only screen and (min-width: 768px){.hidden-lg{display:none !important}}";
 
-let PtcImg = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Image size for smallest screen
-     * <=767px
-     */
-    this.sizeXs = '510x340';
-    /**
-     * Image size for small screen
-     * >=768px and <=991px
-     */
-    this.sizeSm = '1240x496';
-    /**
-     * Image size for medium screen
-     * >=992px and <=1199px
-     */
-    this.sizeMd = '1366x500';
-    /**
-     * Image solution for large screen
-     * >=1200px
-     */
-    this.sizeLg = '1920x1080';
-    /**
-     * Image type
-     */
-    this.imageType = 'smart-bg';
-    /**
-     * Image border shape
-     */
-    this.borderRadius = '';
-    /**
-     * Lazy loading option
-     */
-    this.loadMode = 'lazy-bg';
-  }
-  /**
-   * Image Z Index
-   */
-  // @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
-  WindowResize() {
-    this.setResponsiveBg();
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap, "data-xs": `${this.imgUrl}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` }, this.imageType == 'smart-bg' ? h("slot", null) : null)));
-  }
-  componentDidLoad() {
-    this.addIntersectionObserver();
-    this.setResponsiveBg();
-  }
-  componentWillUpdate() {
-    // console.log('componentWillUpdate!');
-    this.addIntersectionObserver();
-    this.setResponsiveBg();
-  }
-  //responsive image
-  setResponsiveBg() {
-    // Define local variables
-    let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
-    // console.log('current breakpoint: ' + currentBreakpoint);
-    // Loop through all target elements
-    for (var i = 0, len = backgrounds.length; i < len; i++) {
-      // Set current variables
-      el = backgrounds[i];
-      elData = el.getAttribute('data-' + currentBreakpoint);
-      // If the data attribute exists, set the background
-      if (elData !== null) {
-        el.style.backgroundImage = "url('" + elData + "')";
-      }
-      else {
-        if (typeof console == 'object') {
-          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
-        }
-      }
-    }
-  }
-  //lazy loading
-  addIntersectionObserver() {
-    if (!this.imgUrl) {
-      console.log('no image!');
-      return;
-    }
-    if ('IntersectionObserver' in window) {
-      let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
-      let bgObserver = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            const image = entry.target;
-            image.classList.remove('lazy-bg');
-            // console.log('loaded');
-            bgObserver.unobserve(image);
-          }
-        });
-      });
-      lazyLoadBgs.forEach(image => {
-        bgObserver.observe(image);
-      });
-    }
-  }
-  getCssClassMap() {
-    return {
-      [this.imageType]: true,
-      'ptc-img': true,
-      [this.borderRadius]: true,
-      [this.loadMode]: true,
-      // [this.imageZIndex] : true
-    };
-  }
-  getCurrentBreakPoints() {
-    // Define local variables
-    let doc = window.document, temp = doc.createElement('div'), env;
-    // Append test node
-    doc.body.appendChild(temp);
-    // Loop through breakpoints
-    for (let i = ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
-      env = ResponsiveBgVariables.envs[i];
-      // Add classes
-      temp.className = 'hidden-' + env;
-      // Found breakpoint
-      if (temp.offsetParent === null) {
-        // Remove our test node
-        doc.body.removeChild(temp);
-        console.log('remove test node');
-        // Return current breakpoint
-        return env;
-      }
-    }
-    // Breakpoint not found, try fallback
-    doc.body.removeChild(temp);
-    return this.getFallbackBreakpoint();
-  }
-  getFallbackBreakpoint() {
-    if (window.matchMedia('(min-width: 992px)').matches) {
-      return 'lg';
-    }
-    else if (window.matchMedia('(min-width: 768px)').matches) {
-      return 'md';
-    }
-    else if (window.matchMedia('(min-width: 576px)').matches) {
-      return 'sm';
-    }
-    else {
-      return 'xs';
-    }
-  }
-  get el() { return getElement(this); }
-};
+let PtcImg = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Image size for smallest screen
+     * <=767px
+     */
+    this.sizeXs = '510x340';
+    /**
+     * Image size for small screen
+     * >=768px and <=991px
+     */
+    this.sizeSm = '1240x496';
+    /**
+     * Image size for medium screen
+     * >=992px and <=1199px
+     */
+    this.sizeMd = '1366x500';
+    /**
+     * Image solution for large screen
+     * >=1200px
+     */
+    this.sizeLg = '1920x1080';
+    /**
+     * Image type
+     */
+    this.imageType = 'smart-bg';
+    /**
+     * Image border shape
+     */
+    this.borderRadius = '';
+    /**
+     * Lazy loading option
+     */
+    this.loadMode = 'lazy-bg';
+  }
+  /**
+   * Image Z Index
+   */
+  // @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
+  WindowResize() {
+    this.setResponsiveBg();
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, null, h("div", { class: classMap, "data-xs": `${this.imgUrl}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` }, this.imageType == 'smart-bg' ? h("slot", null) : null)));
+  }
+  componentDidLoad() {
+    this.addIntersectionObserver();
+    this.setResponsiveBg();
+  }
+  componentWillUpdate() {
+    // console.log('componentWillUpdate!');
+    this.addIntersectionObserver();
+    this.setResponsiveBg();
+  }
+  //responsive image
+  setResponsiveBg() {
+    // Define local variables
+    let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    // console.log('current breakpoint: ' + currentBreakpoint);
+    // Loop through all target elements
+    for (var i = 0, len = backgrounds.length; i < len; i++) {
+      // Set current variables
+      el = backgrounds[i];
+      elData = el.getAttribute('data-' + currentBreakpoint);
+      // If the data attribute exists, set the background
+      if (elData !== null) {
+        el.style.backgroundImage = "url('" + elData + "')";
+      }
+      else {
+        if (typeof console == 'object') {
+          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
+        }
+      }
+    }
+  }
+  //lazy loading
+  addIntersectionObserver() {
+    if (!this.imgUrl) {
+      console.log('no image!');
+      return;
+    }
+    if ('IntersectionObserver' in window) {
+      let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
+      let bgObserver = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const image = entry.target;
+            image.classList.remove('lazy-bg');
+            // console.log('loaded');
+            bgObserver.unobserve(image);
+          }
+        });
+      });
+      lazyLoadBgs.forEach(image => {
+        bgObserver.observe(image);
+      });
+    }
+  }
+  getCssClassMap() {
+    return {
+      [this.imageType]: true,
+      'ptc-img': true,
+      [this.borderRadius]: true,
+      [this.loadMode]: true,
+      // [this.imageZIndex] : true
+    };
+  }
+  getCurrentBreakPoints() {
+    // Define local variables
+    let doc = window.document, temp = doc.createElement('div'), env;
+    // Append test node
+    doc.body.appendChild(temp);
+    // Loop through breakpoints
+    for (let i = ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
+      env = ResponsiveBgVariables.envs[i];
+      // Add classes
+      temp.className = 'hidden-' + env;
+      // Found breakpoint
+      if (temp.offsetParent === null) {
+        // Remove our test node
+        doc.body.removeChild(temp);
+        console.log('remove test node');
+        // Return current breakpoint
+        return env;
+      }
+    }
+    // Breakpoint not found, try fallback
+    doc.body.removeChild(temp);
+    return this.getFallbackBreakpoint();
+  }
+  getFallbackBreakpoint() {
+    if (window.matchMedia('(min-width: 992px)').matches) {
+      return 'lg';
+    }
+    else if (window.matchMedia('(min-width: 768px)').matches) {
+      return 'md';
+    }
+    else if (window.matchMedia('(min-width: 576px)').matches) {
+      return 'sm';
+    }
+    else {
+      return 'xs';
+    }
+  }
+  get el() { return getElement(this); }
+};
 PtcImg.style = ptcImgCss;
 
-const ptcOverlayCss = ":host{display:block;position:absolute;top:0;left:0;width:100%;height:100%}:host(.blue){background:linear-gradient(180deg, rgba(25, 123, 192, 0.2) 0%, var(--color-blue-07) 100%)}:host(.red){background:linear-gradient(180deg, rgba(209, 44, 58, 0.2) 0%, var(--color-red-07) 100%)}:host(.orange){background:linear-gradient(180deg, rgba(195, 119, 41, 0.2) 0%, var(--color-orange-07) 100%)}:host(.green){background:linear-gradient(180deg, rgba(0, 137, 11, 0.2) 0%, var(--color-green-07) 100%)}:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0.32) 33.33%, var(--color-gray-12) 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, var(--color-gray-12) 100%)}@media only screen and (min-width: 768px){:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0) 33.33%, var(--color-gray-12) 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, var(--color-gray-12) 100%)}}:host(.black-3){background:linear-gradient(180deg, var(--color-gray-12) 0%, rgba(32, 38, 42, 0.55) 100%)}:host(.slate-grey){background:linear-gradient(180deg, rgba(97, 116, 128, 0.2) 0%, var(--color-gray-07) 100%)}:host(.radius-standard){border-radius:var(--ptc-border-radius-standard)}:host(.radius-large){border-radius:var(--ptc-border-radius-large)}:host(.z-index-auto){z-index:auto}:host(.z-index-n-1){z-index:-1}:host(.z-index-n-2){z-index:-2}:host(.z-index-p-1){z-index:1}:host(.z-index-p-2){z-index:2}";
-
-let PtcOverlay = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Overlay z-index
-     */
-    this.overlayZIndex = 'z-index-auto';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return h(Host, { class: classMap });
-  }
-  getCssClassMap() {
-    return {
-      [this.filterColor]: !!this.filterColor ? true : false,
-      [this.borderRadius]: !!this.borderRadius ? true : false,
-      [this.overlayZIndex]: true
-    };
-  }
-};
-PtcOverlay.style = ptcOverlayCss;
-
-export { PtcImg as ptc_img, PtcOverlay as ptc_overlay };
+export { PtcImg as ptc_img };

package/dist/esm/ptc-list.entry.js

@@ -2,56 +2,56 @@ import { r as registerInstance, h, H as Host, a as getElement } from './index-a9
 
 const ptcListCss = ":host{display:block}:host(.list-primary) li{font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-normal);letter-spacing:var(--ptc-letter-spacing-normal);list-style:none}:host(.list-primary) li:not(:last-child){margin-bottom:0.625rem}:host(.list-primary) li a{color:var(--color-white);outline:none;text-decoration:none;font-family:Rajdhani;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-normal);text-transform:uppercase;letter-spacing:var(--ptc-letter-spacing-normal)}:host(.list-primary) li a:hover{color:var(--color-white);border-bottom:1.5px solid var(--color-green-07)}";
 
-class ListItem {
-}
-let PtcList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.listType = 'list-primary';
-    this.listItems = [];
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    const listItems = this.getListItems();
-    if (!listItems || listItems.length === 0) {
-      return null;
-    }
-    return (h(Host, { class: classMap }, h("ul", null, listItems.map(listItem => {
-      return (h("list-item", { "link-type": listItem.type, "link-href": listItem.href, "link-target": listItem.target, "flush-before": listItem.flushBefore }, listItem.value));
-    }))));
-  }
-  getListItems() {
-    let result = new Array();
-    if (this.listItems && this.listItems.length > 0) {
-      this.listItems.map(listItem => {
-        let i = new ListItem();
-        i.value = listItem;
-        result.push(i);
-      });
-    }
-    else {
-      let items = Array.from(this.el.querySelectorAll('list-item'));
-      items.map(el => {
-        let i = new ListItem();
-        let item = el;
-        i.value = item.innerText;
-        i.href = item.getAttribute('link-href');
-        i.target = item.getAttribute('link-target');
-        i.flushBefore = item.getAttribute('flush-before') == 'true';
-        i.type = item.getAttribute('link-type');
-        result.push(i);
-      });
-      console.log();
-    }
-    return result;
-  }
-  getCssClassMap() {
-    return {
-      [this.listType]: this.listItems ? true : false,
-    };
-  }
-  get el() { return getElement(this); }
-};
+class ListItem {
+}
+let PtcList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.listType = 'list-primary';
+    this.listItems = [];
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const listItems = this.getListItems();
+    if (!listItems || listItems.length === 0) {
+      return null;
+    }
+    return (h(Host, { class: classMap }, h("ul", null, listItems.map(listItem => {
+      return (h("list-item", { "link-type": listItem.type, "link-href": listItem.href, "link-target": listItem.target, "flush-before": listItem.flushBefore }, listItem.value));
+    }))));
+  }
+  getListItems() {
+    let result = new Array();
+    if (this.listItems && this.listItems.length > 0) {
+      this.listItems.map(listItem => {
+        let i = new ListItem();
+        i.value = listItem;
+        result.push(i);
+      });
+    }
+    else {
+      let items = Array.from(this.el.querySelectorAll('list-item'));
+      items.map(el => {
+        let i = new ListItem();
+        let item = el;
+        i.value = item.innerText;
+        i.href = item.getAttribute('link-href');
+        i.target = item.getAttribute('link-target');
+        i.flushBefore = item.getAttribute('flush-before') == 'true';
+        i.type = item.getAttribute('link-type');
+        result.push(i);
+      });
+      console.log();
+    }
+    return result;
+  }
+  getCssClassMap() {
+    return {
+      [this.listType]: this.listItems ? true : false,
+    };
+  }
+  get el() { return getElement(this); }
+};
 PtcList.style = ptcListCss;
 
 export { PtcList as ptc_list };

package/dist/esm/ptc-lottie.entry.js

@@ -2,18 +2,18 @@ import { r as registerInstance, h } from './index-a91c2367.js';
 
 const ptcLottieCss = ":host{display:block;width:100%;height:auto}";
 
-let PtcLottie = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Animation speed
-     */
-    this.speed = 1;
-  }
-  render() {
-    return (h("lottie-player", { autoplay: true, loop: true, src: this.jsonSrc, speed: this.speed }));
-  }
-};
+let PtcLottie = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Animation speed
+     */
+    this.speed = 1;
+  }
+  render() {
+    return (h("lottie-player", { autoplay: true, loop: true, src: this.jsonSrc, speed: this.speed }));
+  }
+};
 PtcLottie.style = ptcLottieCss;
 
 export { PtcLottie as ptc_lottie };

package/dist/esm/ptc-minimized-footer.entry.js

@@ -2,14 +2,14 @@ import { r as registerInstance, h, H as Host } from './index-a91c2367.js';
 
 const ptcMinimizedFooterCss = ":host{box-shadow:var(--ptc-shadow-medium);color:var(--color-white);position:relative;overflow:hidden;position:relative;z-index:1000;padding:0;height:60px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--color-gray-10)}.min-footer-nav-list{margin:0;padding:0;list-style:none}.min-footer-copyright-wrapper{text-align:center;position:relative;z-index:20}.min-footer-copyright-wrapper .min-footer-copyright-list{padding:var(--ptc-element-spacing-04) 0;display:flex;flex-direction:row}@media screen-sm{.min-footer-copyright-wrapper .min-footer-copyright-list{padding:var(--ptc-element-spacing-04) 0}}";
 
-let PtcMinimizedFooter = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, { class: "ptc-min-footer mini-footer" }, h("div", { class: "min-footer-copyright-wrapper" }, h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, h("slot", null)))));
-  }
-};
+let PtcMinimizedFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { class: "ptc-min-footer mini-footer" }, h("div", { class: "min-footer-copyright-wrapper" }, h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, h("slot", null)))));
+  }
+};
 PtcMinimizedFooter.style = ptcMinimizedFooterCss;
 
 export { PtcMinimizedFooter as ptc_minimized_footer };

package/dist/esm/ptc-minimized-header.entry.js

@@ -2,17 +2,17 @@ import { r as registerInstance, h, H as Host } from './index-a91c2367.js';
 
 const ptcMinimizedHeaderCss = ":host{display:block}.minimized-header .header{overflow:hidden;height:48px;background-color:var(--color-gray-10);display:flex;align-items:center;justify-content:center}.minimized-header .header a{float:left;color:var(--color-black);text-align:center;padding:0px 0;text-decoration:none;font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-p);border-radius:var(--ptc-border-radius-standard)}.minimized-header .header a.mini-navbar-logo{font-size:var(--ptc-font-size-large);font-weight:var(--ptc-font-weight-bold)}.minimized-header .header a.mini-navbar-logo img{width:65px;vertical-align:middle;border:0;height:auto}.mini-navbar-logo{outline:3px solid transparent}.mini-navbar-logo:focus{outline:3px solid var(--color-blue-07);outline-offset:2px;border-radius:var(--ptc-border-radius-standard);text-decoration:none;border-color:transparent !important}@media only screen and (min-width: 768px){.temp-container{width:750px}}@media only screen and (min-width: 992px){.temp-container{width:970px}}@media only screen and (min-width: 1200px){.temp-container{width:1170px}}@media only screen and (min-width: 1440px){.temp-container{width:1400px}}@media only screen and (min-width: 1600px){.temp-container{width:1560px}}@media screen-xs{.minimized-header .header a{float:none;display:block;text-align:left}}";
 
-let PtcMinimizedHeader = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.linkUrl = '#';
-    this.imgSrc = '';
-    this.imgAlt = 'PTC';
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "minimized-header" }, h("div", { class: "header" }, h("div", { class: "temp-container" }, h("a", { class: "mini-navbar-logo", href: this.linkUrl }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))));
-  }
-};
+let PtcMinimizedHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.linkUrl = '#';
+    this.imgSrc = '';
+    this.imgAlt = 'PTC';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "minimized-header" }, h("div", { class: "header" }, h("div", { class: "temp-container" }, h("a", { class: "mini-navbar-logo", href: this.linkUrl }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))));
+  }
+};
 PtcMinimizedHeader.style = ptcMinimizedHeaderCss;
 
 export { PtcMinimizedHeader as ptc_minimized_header };