@ptcwebops/ptcw-design 0.7.6 → 0.7.7

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

@@ -1,11 +1,6 @@
-import { Component, h, Prop, State, Event, Element, Listen } from '@stencil/core';
+import { h } from '@stencil/core';
 export class PtcDropdown {
   constructor() {
-    /**
-     * Theme
-     */
-    this.theme = 'sort';
-    this.toggle = false;
     this.handleClick = (item) => {
       this.listItems.forEach((item) => item.selected = undefined);
       item.selected = true;
@@ -16,6 +11,11 @@ export class PtcDropdown {
     this.toggleList = () => {
       this.toggle = !this.toggle;
     };
+    this.theme = 'sort';
+    this.label = undefined;
+    this.listItems = undefined;
+    this.toggle = false;
+    this.selectedItem = undefined;
   }
   offClick(e) {
     if (e && !this.host.contains(e.target) && this.toggle) {
@@ -44,21 +44,14 @@ export class PtcDropdown {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h("div", { class: classMap },
-      h("header", { class: "dropdown__header", onClick: this.toggleList },
-        h("label", null,
-          h("b", null, this.label),
-          " ",
-          this.selectedItem ? this.selectedItem.label : "Select Option"),
-        h("icon-asset", { type: "solid", size: "x-small", name: "chevron-down" })),
-      this.toggle &&
-        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 (h("li", { class: cssClass, onClick: () => this.handleClick(item) }, item.label));
-        }))));
+    return (h("div", { class: classMap }, h("header", { class: "dropdown__header", onClick: this.toggleList }, h("label", null, h("b", null, this.label), " ", this.selectedItem ? this.selectedItem.label : "Select Option"), h("icon-asset", { type: "solid", size: "x-small", name: "chevron-down" })), this.toggle &&
+      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 (h("li", { class: cssClass, onClick: () => this.handleClick(item) }, item.label));
+      }))));
   }
   getCssClassMap() {
     return {
@@ -68,90 +61,102 @@ export class PtcDropdown {
   }
   static get is() { return "ptc-dropdown"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-dropdown.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-dropdown.css"]
-  }; }
-  static get properties() { return {
-    "theme": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'sort'",
-        "resolved": "\"sort\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Theme"
-      },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "'sort'"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "listItems": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "any[]",
-        "resolved": "any[]",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sort'",
+          "resolved": "\"sort\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme"
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "'sort'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    }
-  }; }
-  static get states() { return {
-    "toggle": {},
-    "selectedItem": {}
-  }; }
-  static get events() { return [{
-      "method": "clickedItem",
-      "name": "clickedItem",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "listItems": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "any[]",
+          "resolved": "any[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "toggle": {},
+      "selectedItem": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "clickedItem",
+        "name": "clickedItem",
+        "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
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "offClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/ptc-dynamic-card/media/nav-active-dotslick.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #18723b;
+      }
+
+      .cls-2 {
+        fill: #f3f3f3;
+      }
+    </style>
+  </defs>
+  <circle id="Ellipse_1_copy_2" data-name="Ellipse 1 copy 2" class="cls-1" cx="10" cy="10" r="10"/>
+  <circle id="Ellipse_1_copy" data-name="Ellipse 1 copy" class="cls-2" cx="10" cy="10" r="7.781"/>
+  <circle class="cls-1" cx="10" cy="10" r="5"/>
+</svg>

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

@@ -16,6 +16,7 @@
 }
 :host(.sequential) .card-mobile ptc-card-content, :host(.sequential) .card-dt-open ptc-card-content {
   display: flex;
+  flex-basis: 38%;
   justify-content: center;
   align-items: center;
   padding: var(--ptc-element-spacing-06) var(--ptc-element-spacing-06) var(--ptc-element-spacing-07) var(--ptc-element-spacing-06);
@@ -26,6 +27,9 @@
     padding-right: var(--ptc-element-spacing-08);
   }
 }
+:host(.sequential) .card-mobile ptc-picture, :host(.sequential) .card-dt-open ptc-picture {
+  flex-basis: 62%;
+}
 :host(.sequential) .card-mobile .card-title h3, :host(.sequential) .card-dt-open .card-title h3 {
   color: var(--color-white);
   font-size: var(--ptc-font-size-large);

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

@@ -1,23 +1,35 @@
-import { Component, Host, h, Prop, State, Listen } from '@stencil/core';
+import { Host, h, getAssetPath } from '@stencil/core';
+//import navDotSlick from '../../media/svg-imgs/nav-active-dotslick.svg';
 export class PtcDynamicCard {
   constructor() {
-    /** Dynamic Card Type */
+    this.dotSvg = getAssetPath('./media/nav-active-dotslick.svg');
     this.cardType = 'sequential';
-    /** Card Title */
     this.cardTitle = 'Card Title Goes Here';
-    /** Card Status */
+    this.cardImgSrc = undefined;
+    this.cardImgAlt = undefined;
+    this.outCardState = undefined;
     this.cardStatus = 'desktop-closed';
+    this.overlayExists = true;
   }
-  handleClick() {
-    if (this.cardStatus === 'desktop-closed') {
-      this.cardStatus = 'desktop-expanded';
-    }
-    else if (this.cardStatus === 'desktop-expanded') {
-      this.cardStatus = 'desktop-closed';
-    }
-    else {
-      console.log('mobile state!');
-    }
+  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);
@@ -28,129 +40,144 @@ export class PtcDynamicCard {
       this.cardStatus = 'desktop-closed';
     }
   }
-  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" },
-            h("ptc-overlay", { "filter-color": "black-3" })),
-          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" })))))));
+  static get is() { return "ptc-dynamic-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-dynamic-card.scss"]
+    };
   }
-  getCssClassMap() {
+  static get styleUrls() {
     return {
-      [this.cardType]: true,
+      "$": ["ptc-dynamic-card.css"]
     };
   }
-  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 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": {}
+  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'"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Card Image Src"
+      "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'"
       },
-      "attribute": "card-img-src",
-      "reflect": false
-    },
-    "cardImgAlt": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Card Image Alt"
+      "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
       },
-      "attribute": "card-img-alt",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "cardStatus": {}
-  }; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "handleClick",
-      "target": undefined,
-      "capture": true,
-      "passive": false
-    }, {
-      "name": "resize",
-      "method": "handleResize",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
+      "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"
+      }];
+  }
 }