@ptcwebops/ptcw-design 2.6.0 → 2.6.2

package/dist/collection/components/ptc-icon-component/ptc-icon-component.js

@@ -1,87 +1,87 @@
-import { Host, h } from '@stencil/core';
-import Swiper, { Navigation, Pagination, Scrollbar } from 'swiper';
-export class PtcIconComponent {
-  constructor() {
-    this.isMobile = undefined;
-  }
-  handleResize() {
-    this.isMobile = window.innerWidth < 768;
-  }
-  componentWillLoad() {
-    this.isMobile = window.innerWidth < 768;
-  }
-  componentDidLoad() {
-    this.renderSlides();
-    this.initSlider();
-  }
-  renderSlides() {
-    const slidesList = Array.from(this.hostElement.querySelectorAll('.icon-component'));
-    if (slidesList.length > 0) {
-      const swiperWrapper = this.hostElement.shadowRoot.querySelector('.swiper-wrapper');
-      slidesList.forEach((node) => {
-        const slideElement = document.createElement('div');
-        slideElement.classList.add('swiper-slide');
-        let cloneNode = node.cloneNode(true);
-        slideElement.appendChild(cloneNode);
-        swiperWrapper.appendChild(slideElement);
-      });
-    }
-  }
-  initSlider() {
-    if (this.swiperWrapperRef) {
-      this.iconSwiper = new Swiper(this.swiperWrapperRef, {
-        // Customize options here
-        modules: [Navigation, Pagination, Scrollbar],
-        slidesPerView: 1,
-        loop: true,
-        pagination: {
-          el: this.swiperPaginationRef,
-          clickable: true
-        },
-        navigation: {
-          nextEl: this.swiperButtonNextRef,
-          prevEl: this.swiperButtonPrevRef,
-        },
-      });
-      console.log("running swiper");
-    }
-  }
-  disconnectedCallback() {
-    console.log("Running disconnectedCb");
-    //window.removeEventListener('resize', this.handleResize);
-    if (this.iconSwiper) {
-      this.iconSwiper.destroy(true, true);
-      this.iconSwiper = null;
-    }
-  }
-  render() {
-    return (h(Host, { class: this.isMobile ? 'mobileView' : 'desktopView' }, h("div", { class: "icon-component-row" }, h("slot", null)), h("div", { class: "swiper-container", ref: el => this.swiperWrapperRef = el }, h("div", { class: "swiper-wrapper" }), h("div", { class: "swiper-pagination", ref: el => this.swiperPaginationRef = el }), h("div", { class: "swiper-button-next", ref: el => this.swiperButtonNextRef = el }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: el => this.swiperButtonPrevRef = el }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
-  }
-  static get is() { return "ptc-icon-component"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-icon-component.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-icon-component.css"]
-    };
-  }
-  static get states() {
-    return {
-      "isMobile": {}
-    };
-  }
-  static get elementRef() { return "hostElement"; }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+import Swiper, { Navigation, Pagination, Scrollbar } from 'swiper';
+export class PtcIconComponent {
+  constructor() {
+    this.isMobile = undefined;
+  }
+  handleResize() {
+    this.isMobile = window.innerWidth < 768;
+  }
+  componentWillLoad() {
+    this.isMobile = window.innerWidth < 768;
+  }
+  componentDidLoad() {
+    this.renderSlides();
+    this.initSlider();
+  }
+  renderSlides() {
+    const slidesList = Array.from(this.hostElement.querySelectorAll('.icon-component'));
+    if (slidesList.length > 0) {
+      const swiperWrapper = this.hostElement.shadowRoot.querySelector('.swiper-wrapper');
+      slidesList.forEach((node) => {
+        const slideElement = document.createElement('div');
+        slideElement.classList.add('swiper-slide');
+        let cloneNode = node.cloneNode(true);
+        slideElement.appendChild(cloneNode);
+        swiperWrapper.appendChild(slideElement);
+      });
+    }
+  }
+  initSlider() {
+    if (this.swiperWrapperRef) {
+      this.iconSwiper = new Swiper(this.swiperWrapperRef, {
+        // Customize options here
+        modules: [Navigation, Pagination, Scrollbar],
+        slidesPerView: 1,
+        loop: true,
+        pagination: {
+          el: this.swiperPaginationRef,
+          clickable: true
+        },
+        navigation: {
+          nextEl: this.swiperButtonNextRef,
+          prevEl: this.swiperButtonPrevRef,
+        },
+      });
+      console.log("running swiper");
+    }
+  }
+  disconnectedCallback() {
+    console.log("Running disconnectedCb");
+    //window.removeEventListener('resize', this.handleResize);
+    if (this.iconSwiper) {
+      this.iconSwiper.destroy(true, true);
+      this.iconSwiper = null;
+    }
+  }
+  render() {
+    return (h(Host, { class: this.isMobile ? 'mobileView' : 'desktopView' }, h("div", { class: "icon-component-row" }, h("slot", null)), h("div", { class: "swiper-container", ref: el => this.swiperWrapperRef = el }, h("div", { class: "swiper-wrapper" }), h("div", { class: "swiper-pagination", ref: el => this.swiperPaginationRef = el }), h("div", { class: "swiper-button-next", ref: el => this.swiperButtonNextRef = el }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: el => this.swiperButtonPrevRef = el }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
+  }
+  static get is() { return "ptc-icon-component"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-icon-component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-icon-component.css"]
+    };
+  }
+  static get states() {
+    return {
+      "isMobile": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

package/dist/collection/components/ptc-icon-list/ptc-icon-list.js

@@ -1,127 +1,127 @@
-import { Host, h } from '@stencil/core';
-export class PtcIconList {
-  constructor() {
-    this.listType = 'simple-icon-list';
-    this.valueWithUnit = '';
-    this.valueText = '';
-    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, !this.listContent &&
-      h("slot", null))))));
-  }
-  getCssClassMap() {
-    return {
-      [this.listType]: this.listType ? true : false,
-      ['last-item']: this.isLastItem ? true : false
-    };
-  }
-  static get is() { return "ptc-icon-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-icon-list.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-icon-list.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "listType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'simple-icon-list' | 'stat-icon-list' | 'icon-top-align-list'",
-          "resolved": "\"icon-top-align-list\" | \"simple-icon-list\" | \"stat-icon-list\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "List item type"
-        },
-        "attribute": "list-type",
-        "reflect": false,
-        "defaultValue": "'simple-icon-list'"
-      },
-      "valueWithUnit": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "List value with unit Example: 60%"
-        },
-        "attribute": "value-with-unit",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "valueText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "List value text Example: up to"
-        },
-        "attribute": "value-text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "listContent": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "List value with unit Example: Increase in Operator Productivity"
-        },
-        "attribute": "list-content",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "isLastItem": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-last-item",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcIconList {
+  constructor() {
+    this.listType = 'simple-icon-list';
+    this.valueWithUnit = '';
+    this.valueText = '';
+    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, !this.listContent &&
+      h("slot", null))))));
+  }
+  getCssClassMap() {
+    return {
+      [this.listType]: this.listType ? true : false,
+      ['last-item']: this.isLastItem ? true : false
+    };
+  }
+  static get is() { return "ptc-icon-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-icon-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-icon-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "listType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'simple-icon-list' | 'stat-icon-list' | 'icon-top-align-list'",
+          "resolved": "\"icon-top-align-list\" | \"simple-icon-list\" | \"stat-icon-list\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List item type"
+        },
+        "attribute": "list-type",
+        "reflect": false,
+        "defaultValue": "'simple-icon-list'"
+      },
+      "valueWithUnit": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "List value with unit Example: 60%"
+        },
+        "attribute": "value-with-unit",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "valueText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "List value text Example: up to"
+        },
+        "attribute": "value-text",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "listContent": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List value with unit Example: Increase in Operator Productivity"
+        },
+        "attribute": "list-content",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "isLastItem": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-last-item",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

package/dist/collection/components/ptc-icon-minimize/ptc-icon-minimize.js

@@ -1,119 +1,119 @@
-import { h } from '@stencil/core';
-export class PtcIconMinimize {
-  constructor() {
-    this.heading = undefined;
-    this.opened = true;
-    this.timeStamp = undefined;
-  }
-  componentWillLoad() {
-    this.timeStamp = Date.now().toString();
-  }
-  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;
-  }
-  async Refresh() {
-    this.timeStamp = Date.now().toString();
-  }
-  render() {
-    let scrollHeight = this.getScrollHeight();
-    let icon = this.opened ? 'minus' : 'plus';
-    return (h("div", { class: "ptc-icon-minimize" }, h("div", { class: "header" }, h("div", { class: "title" }, this.heading), h("div", { class: "icon", onClick: () => this.dropdownToggle() }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon }))), h("div", { class: "content", style: scrollHeight }, h("slot", null))));
-  }
-  static get is() { return "ptc-icon-minimize"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-icon-minimize.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-icon-minimize.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "heading": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "heading",
-        "reflect": false
-      },
-      "opened": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "opened",
-        "reflect": false,
-        "defaultValue": "true"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "timeStamp": {}
-    };
-  }
-  static get methods() {
-    return {
-      "Refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-}
+import { h } from '@stencil/core';
+export class PtcIconMinimize {
+  constructor() {
+    this.heading = undefined;
+    this.opened = true;
+    this.timeStamp = undefined;
+  }
+  componentWillLoad() {
+    this.timeStamp = Date.now().toString();
+  }
+  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;
+  }
+  async Refresh() {
+    this.timeStamp = Date.now().toString();
+  }
+  render() {
+    let scrollHeight = this.getScrollHeight();
+    let icon = this.opened ? 'minus' : 'plus';
+    return (h("div", { class: "ptc-icon-minimize" }, h("div", { class: "header" }, h("div", { class: "title" }, this.heading), h("div", { class: "icon", onClick: () => this.dropdownToggle() }, h("icon-asset", { type: "ptc", color: "black", size: "xxx-small", name: icon }))), h("div", { class: "content", style: scrollHeight }, h("slot", null))));
+  }
+  static get is() { return "ptc-icon-minimize"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-icon-minimize.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-icon-minimize.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heading": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "opened": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "opened",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "timeStamp": {}
+    };
+  }
+  static get methods() {
+    return {
+      "Refresh": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}