@ptcwebops/ptcw-design 0.6.5 → 0.6.6

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

@@ -1,156 +1,156 @@
-import { Component, h, Prop, State, Event, Element, Listen } 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;
-      this.selectedItem = item;
-      this.toggle = !this.toggle;
-      this.clickedItem.emit(item);
-    };
-    this.toggleList = () => {
-      this.toggle = !this.toggle;
-    };
-  }
-  offClick(e) {
-    if (e && !this.host.contains(e.target) && this.toggle) {
-      this.toggle = false;
-    }
-  }
-  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 (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 {
-      ['ptc-dropdown']: true,
-      [this.theme]: true
-    };
-  }
-  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": {}
-      },
-      "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
-    }]; }
-}
+import { Component, h, Prop, State, Event, Element, Listen } 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;
+      this.selectedItem = item;
+      this.toggle = !this.toggle;
+      this.clickedItem.emit(item);
+    };
+    this.toggleList = () => {
+      this.toggle = !this.toggle;
+    };
+  }
+  offClick(e) {
+    if (e && !this.host.contains(e.target) && this.toggle) {
+      this.toggle = false;
+    }
+  }
+  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 (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 {
+      ['ptc-dropdown']: true,
+      [this.theme]: true
+    };
+  }
+  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": {}
+      },
+      "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
+    }]; }
+}

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

@@ -1,156 +1,156 @@
-import { Component, Host, h, Prop, State, Listen } from '@stencil/core';
-export class PtcDynamicCard {
-  constructor() {
-    /** Dynamic Card Type */
-    this.cardType = 'sequential';
-    /** Card Title */
-    this.cardTitle = 'Card Title Goes Here';
-    /** Card Status */
-    this.cardStatus = 'desktop-closed';
-  }
-  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!');
-    }
-  }
-  handleResize() {
-    //console.log('window width:', window.innerWidth);
-    if (window.innerWidth < 1200) {
-      this.cardStatus = 'mobile';
-    }
-    else {
-      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" })))))));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: true,
-    };
-  }
-  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": {}
-      },
-      "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
-    }
-  }; }
-  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
-    }]; }
-}
+import { Component, Host, h, Prop, State, Listen } from '@stencil/core';
+export class PtcDynamicCard {
+  constructor() {
+    /** Dynamic Card Type */
+    this.cardType = 'sequential';
+    /** Card Title */
+    this.cardTitle = 'Card Title Goes Here';
+    /** Card Status */
+    this.cardStatus = 'desktop-closed';
+  }
+  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!');
+    }
+  }
+  handleResize() {
+    //console.log('window width:', window.innerWidth);
+    if (window.innerWidth < 1200) {
+      this.cardStatus = 'mobile';
+    }
+    else {
+      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" })))))));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: true,
+    };
+  }
+  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": {}
+      },
+      "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
+    }
+  }; }
+  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
+    }]; }
+}