@ptcwebops/ptcw-design 0.8.0 → 0.8.2

package/dist/collection/components/ptc-dynamic-card/ptc-dynamic-card.js

@@ -1,183 +1,183 @@
-import { Host, h, getAssetPath } from '@stencil/core';
-//import navDotSlick from '../../media/svg-imgs/nav-active-dotslick.svg';
-export class PtcDynamicCard {
-  constructor() {
-    this.dotSvg = getAssetPath('./media/nav-active-dotslick.svg');
-    this.cardType = 'sequential';
-    this.cardTitle = 'Card Title Goes Here';
-    this.cardImgSrc = undefined;
-    this.cardImgAlt = undefined;
-    this.outCardState = undefined;
-    this.cardStatus = 'desktop-closed';
-    this.overlayExists = true;
-  }
-  cardStateChanged(newState) {
-    this.cardStatus = newState;
-  }
-  async changeState(newState) {
-    this.outCardState = newState;
-  }
-  componentDidLoad() {
-    this.handleResize();
-    this.el.addEventListener('mouseenter', () => this.overlayExists = false);
-    this.el.addEventListener('mouseleave', () => this.overlayExists = true);
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("div", { class: "card-wrapper" }, this.cardStatus == 'mobile' ? (h("div", { class: "card card-mobile" }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc }), h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))))) : this.cardStatus == 'desktop-closed' ? (h("div", null, h("div", { class: "card card-dt-closed" }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", width: "135", height: "424" }, this.overlayExists ? h("ptc-overlay", { "filter-color": "black-3" }) : h("ptc-overlay", { "filter-color": "black-2" })), h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle)))))) : (h("div", null, h("div", { class: "card card-dt-open" }, h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))), h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-height": "true", "image-alignment": "center" }))))), h("div", { hidden: true }, h("svg", null, h("use", { href: `${this.dotSvg}` })))));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: true,
-    };
-  }
-  handleResize() {
-    //console.log('window width:', window.innerWidth);
-    if (window.innerWidth < 1200) {
-      this.cardStatus = 'mobile';
-    }
-    else {
-      this.cardStatus = 'desktop-closed';
-    }
-  }
-  static get is() { return "ptc-dynamic-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-dynamic-card.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-dynamic-card.css"]
-    };
-  }
-  static get assetsDirs() { return ["media"]; }
-  static get properties() {
-    return {
-      "cardType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'sequential'",
-          "resolved": "\"sequential\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Dynamic Card Type"
-        },
-        "attribute": "card-type",
-        "reflect": false,
-        "defaultValue": "'sequential'"
-      },
-      "cardTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Card Title"
-        },
-        "attribute": "card-title",
-        "reflect": false,
-        "defaultValue": "'Card Title Goes Here'"
-      },
-      "cardImgSrc": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Card Image Src"
-        },
-        "attribute": "card-img-src",
-        "reflect": false
-      },
-      "cardImgAlt": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Card Image Alt"
-        },
-        "attribute": "card-img-alt",
-        "reflect": false
-      },
-      "outCardState": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Public card state"
-        },
-        "attribute": "out-card-state",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "cardStatus": {},
-      "overlayExists": {}
-    };
-  }
-  static get methods() {
-    return {
-      "changeState": {
-        "complexType": {
-          "signature": "(newState: 'mobile' | 'desktop-closed' | 'desktop-expanded') => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "outCardState",
-        "methodName": "cardStateChanged"
-      }];
-  }
-}
+import { Host, h, getAssetPath } from '@stencil/core';
+//import navDotSlick from '../../media/svg-imgs/nav-active-dotslick.svg';
+export class PtcDynamicCard {
+  constructor() {
+    this.dotSvg = getAssetPath('./media/nav-active-dotslick.svg');
+    this.cardType = 'sequential';
+    this.cardTitle = 'Card Title Goes Here';
+    this.cardImgSrc = undefined;
+    this.cardImgAlt = undefined;
+    this.outCardState = undefined;
+    this.cardStatus = 'desktop-closed';
+    this.overlayExists = true;
+  }
+  cardStateChanged(newState) {
+    this.cardStatus = newState;
+  }
+  async changeState(newState) {
+    this.outCardState = newState;
+  }
+  componentDidLoad() {
+    this.handleResize();
+    this.el.addEventListener('mouseenter', () => this.overlayExists = false);
+    this.el.addEventListener('mouseleave', () => this.overlayExists = true);
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("div", { class: "card-wrapper" }, this.cardStatus == 'mobile' ? (h("div", { class: "card card-mobile" }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc }), h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))))) : this.cardStatus == 'desktop-closed' ? (h("div", null, h("div", { class: "card card-dt-closed" }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", width: "135", height: "424" }, this.overlayExists ? h("ptc-overlay", { "filter-color": "black-3" }) : h("ptc-overlay", { "filter-color": "black-2" })), h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle)))))) : (h("div", null, h("div", { class: "card card-dt-open" }, h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))), h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-height": "true", "image-alignment": "center" }))))), h("div", { hidden: true }, h("svg", null, h("use", { href: `${this.dotSvg}` })))));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: true,
+    };
+  }
+  handleResize() {
+    //console.log('window width:', window.innerWidth);
+    if (window.innerWidth < 1200) {
+      this.cardStatus = 'mobile';
+    }
+    else {
+      this.cardStatus = 'desktop-closed';
+    }
+  }
+  static get is() { return "ptc-dynamic-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-dynamic-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-dynamic-card.css"]
+    };
+  }
+  static get assetsDirs() { return ["media"]; }
+  static get properties() {
+    return {
+      "cardType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sequential'",
+          "resolved": "\"sequential\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Dynamic Card Type"
+        },
+        "attribute": "card-type",
+        "reflect": false,
+        "defaultValue": "'sequential'"
+      },
+      "cardTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card Title"
+        },
+        "attribute": "card-title",
+        "reflect": false,
+        "defaultValue": "'Card Title Goes Here'"
+      },
+      "cardImgSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card Image Src"
+        },
+        "attribute": "card-img-src",
+        "reflect": false
+      },
+      "cardImgAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card Image Alt"
+        },
+        "attribute": "card-img-alt",
+        "reflect": false
+      },
+      "outCardState": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Public card state"
+        },
+        "attribute": "out-card-state",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "cardStatus": {},
+      "overlayExists": {}
+    };
+  }
+  static get methods() {
+    return {
+      "changeState": {
+        "complexType": {
+          "signature": "(newState: 'mobile' | 'desktop-closed' | 'desktop-expanded') => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "outCardState",
+        "methodName": "cardStateChanged"
+      }];
+  }
+}

package/dist/collection/components/ptc-ellipsis-dropdown/ptc-ellipsis-dropdown.js

@@ -1,122 +1,122 @@
-import { h } from '@stencil/core';
-export class PtcEllipsisDropdown {
-  constructor() {
-    this.dataItems = [];
-    this.selectedTab = undefined;
-    this.isDropdownOpen = false;
-  }
-  dropdownToggle(e) {
-    e.currentTarget.classList.toggle("show");
-    this.isDropdownOpen = e.currentTarget.classList.contains("show");
-  }
-  onItemSelected(e) {
-    this.itemSelected.emit(e);
-  }
-  offClick(e) {
-    let container = this.host.shadowRoot.querySelector('.ptc-ellipsis-dropdown');
-    if (e && !this.host.contains(e.target) && this.isDropdownOpen) {
-      container.classList.remove("show");
-      this.isDropdownOpen = false;
-    }
-  }
-  render() {
-    let activeTab = this.dataItems.find(z => z.value == this.selectedTab);
-    let isActive = false;
-    if (activeTab) {
-      isActive = true;
-    }
-    return (h("div", { class: "ptc-ellipsis-dropdown", onClick: (e) => this.dropdownToggle(e) }, h("div", { class: isActive || this.isDropdownOpen ? "ellipsis-icon active" : "ellipsis-icon" }, h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen ? 'white' : 'black' })), h("div", { class: "dropdown-container" }, h("slot", { name: "dropdown" }), this.dataItems.map(dataItem => {
-      let activeClass = dataItem.value == this.selectedTab ? 'active' : '';
-      return (h("dropdown-item", { class: activeClass }, h("a", { href: "#", onClick: (e) => {
-          e.preventDefault();
-          this.onItemSelected(dataItem);
-        } }, dataItem.text)));
-    }))));
-  }
-  static get is() { return "ptc-ellipsis-dropdown"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-ellipsis-dropdown.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-ellipsis-dropdown.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "dataItems": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Array<any>",
-          "resolved": "any[]",
-          "references": {
-            "Array": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "defaultValue": "[]"
-      },
-      "selectedTab": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "selected-tab",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isDropdownOpen": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "itemSelected",
-        "name": "itemSelected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "offClick",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+import { h } from '@stencil/core';
+export class PtcEllipsisDropdown {
+  constructor() {
+    this.dataItems = [];
+    this.selectedTab = undefined;
+    this.isDropdownOpen = false;
+  }
+  dropdownToggle(e) {
+    e.currentTarget.classList.toggle("show");
+    this.isDropdownOpen = e.currentTarget.classList.contains("show");
+  }
+  onItemSelected(e) {
+    this.itemSelected.emit(e);
+  }
+  offClick(e) {
+    let container = this.host.shadowRoot.querySelector('.ptc-ellipsis-dropdown');
+    if (e && !this.host.contains(e.target) && this.isDropdownOpen) {
+      container.classList.remove("show");
+      this.isDropdownOpen = false;
+    }
+  }
+  render() {
+    let activeTab = this.dataItems.find(z => z.value == this.selectedTab);
+    let isActive = false;
+    if (activeTab) {
+      isActive = true;
+    }
+    return (h("div", { class: "ptc-ellipsis-dropdown", onClick: (e) => this.dropdownToggle(e) }, h("div", { class: isActive || this.isDropdownOpen ? "ellipsis-icon active" : "ellipsis-icon" }, h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen ? 'white' : 'black' })), h("div", { class: "dropdown-container" }, h("slot", { name: "dropdown" }), this.dataItems.map(dataItem => {
+      let activeClass = dataItem.value == this.selectedTab ? 'active' : '';
+      return (h("dropdown-item", { class: activeClass }, h("a", { href: "#", onClick: (e) => {
+          e.preventDefault();
+          this.onItemSelected(dataItem);
+        } }, dataItem.text)));
+    }))));
+  }
+  static get is() { return "ptc-ellipsis-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-ellipsis-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-ellipsis-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dataItems": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<any>",
+          "resolved": "any[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "selectedTab": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected-tab",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isDropdownOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "itemSelected",
+        "name": "itemSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "offClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}