@ptcwebops/ptcw-design 0.8.3 → 0.8.4

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

@@ -1,129 +1,129 @@
-import { Host, h } from '@stencil/core';
-export class PtcReadmore {
-  constructor() {
-    this.moreText = 'read more';
-    this.display = 'inline';
-    this.visibleLines = 'line2';
-    this.zIndex = 'z-auto';
-  }
-  addBtnTruncated() {
-    const appRoot = this.el.shadowRoot;
-    const ps = appRoot.querySelectorAll('.read-more-text');
-    ps.forEach(p => {
-      p.classList[p.scrollHeight > p.clientHeight ? 'add' : 'remove']('truncated');
-    });
-  }
-  componentDidLoad() {
-    this.addBtnTruncated();
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: this.display }, h("div", { class: classMap }, h("input", { type: "checkbox", id: "expanded" }), h("p", { class: `read-more-text ${this.visibleLines}` }, h("slot", null)), h("label", { htmlFor: "expanded", role: "button", class: this.zIndex }, this.moreText))));
-  }
-  getCssClassMap() {
-    return {
-      ['box']: true,
-    };
-  }
-  static get is() { return "ptc-readmore"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-readmore.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-readmore.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "moreText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "customize read more text"
-        },
-        "attribute": "more-text",
-        "reflect": false,
-        "defaultValue": "'read more'"
-      },
-      "display": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'inline' | 'block'",
-          "resolved": "\"block\" | \"inline\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "returns",
-              "text": "string"
-            }],
-          "text": ""
-        },
-        "attribute": "display",
-        "reflect": false,
-        "defaultValue": "'inline'"
-      },
-      "visibleLines": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'line1' | 'line2' | 'line3' | 'line4' | 'line5'",
-          "resolved": "\"line1\" | \"line2\" | \"line3\" | \"line4\" | \"line5\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "visible lines"
-        },
-        "attribute": "visible-lines",
-        "reflect": false,
-        "defaultValue": "'line2'"
-      },
-      "zIndex": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'z-auto' | 'z-1' | 'z-2' | 'z-3' | 'z-999'",
-          "resolved": "\"z-1\" | \"z-2\" | \"z-3\" | \"z-999\" | \"z-auto\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "index of hover lable"
-        },
-        "attribute": "z-index",
-        "reflect": false,
-        "defaultValue": "'z-auto'"
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "addBtnTruncated",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcReadmore {
+  constructor() {
+    this.moreText = 'read more';
+    this.display = 'inline';
+    this.visibleLines = 'line2';
+    this.zIndex = 'z-auto';
+  }
+  addBtnTruncated() {
+    const appRoot = this.el.shadowRoot;
+    const ps = appRoot.querySelectorAll('.read-more-text');
+    ps.forEach(p => {
+      p.classList[p.scrollHeight > p.clientHeight ? 'add' : 'remove']('truncated');
+    });
+  }
+  componentDidLoad() {
+    this.addBtnTruncated();
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: this.display }, h("div", { class: classMap }, h("input", { type: "checkbox", id: "expanded" }), h("p", { class: `read-more-text ${this.visibleLines}` }, h("slot", null)), h("label", { htmlFor: "expanded", role: "button", class: this.zIndex }, this.moreText))));
+  }
+  getCssClassMap() {
+    return {
+      ['box']: true,
+    };
+  }
+  static get is() { return "ptc-readmore"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-readmore.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-readmore.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "moreText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "customize read more text"
+        },
+        "attribute": "more-text",
+        "reflect": false,
+        "defaultValue": "'read more'"
+      },
+      "display": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'inline' | 'block'",
+          "resolved": "\"block\" | \"inline\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "returns",
+              "text": "string"
+            }],
+          "text": ""
+        },
+        "attribute": "display",
+        "reflect": false,
+        "defaultValue": "'inline'"
+      },
+      "visibleLines": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'line1' | 'line2' | 'line3' | 'line4' | 'line5'",
+          "resolved": "\"line1\" | \"line2\" | \"line3\" | \"line4\" | \"line5\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "visible lines"
+        },
+        "attribute": "visible-lines",
+        "reflect": false,
+        "defaultValue": "'line2'"
+      },
+      "zIndex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'z-auto' | 'z-1' | 'z-2' | 'z-3' | 'z-999'",
+          "resolved": "\"z-1\" | \"z-2\" | \"z-3\" | \"z-999\" | \"z-auto\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "index of hover lable"
+        },
+        "attribute": "z-index",
+        "reflect": false,
+        "defaultValue": "'z-auto'"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "addBtnTruncated",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.css

@@ -1,3 +1,3 @@
-:host {
-  display: block;
-}
+:host {
+  display: block;
+}

package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.js

@@ -1,65 +1,65 @@
-import { h } from '@stencil/core';
-//import ResizeObserver from "resize-observer-polyfill";
-export class PtcResponsiveWrapper {
-  componentDidLoad() {
-    this.ro = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        this.applySizeClasses(entry.contentRect.width);
-      }
-    });
-    this.ro.observe(this.element);
-  }
-  disconnectedCallback() {
-    this.ro.disconnect();
-  }
-  applySizeClasses(size) {
-    let xsmall = false;
-    let small = false;
-    let medium = false;
-    let large = false;
-    let xlarge = false;
-    let xxlarge = false;
-    let large2k = false;
-    let large4k = false;
-    if (size >= 2600)
-      large4k = true;
-    else if (size >= 1980)
-      large2k = true;
-    else if (size >= 1600)
-      xxlarge = true;
-    else if (size >= 1440)
-      xlarge = true;
-    else if (size >= 1200)
-      large = true;
-    else if (size >= 992)
-      medium = true;
-    else if (size >= 768)
-      small = true;
-    else
-      xsmall = true;
-    this.element.classList.toggle("xsmall", xsmall);
-    this.element.classList.toggle("small", small);
-    this.element.classList.toggle("medium", medium);
-    this.element.classList.toggle("large", large);
-    this.element.classList.toggle("xlarge", xlarge);
-    this.element.classList.toggle("xxlarge", xxlarge);
-    this.element.classList.toggle("large2k", large2k);
-    this.element.classList.toggle("large4k", large4k);
-  }
-  render() {
-    return (h("div", null, h("slot", null)));
-  }
-  static get is() { return "ptc-responsive-wrapper"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-responsive-wrapper.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-responsive-wrapper.css"]
-    };
-  }
-  static get elementRef() { return "element"; }
-}
+import { h } from '@stencil/core';
+//import ResizeObserver from "resize-observer-polyfill";
+export class PtcResponsiveWrapper {
+  componentDidLoad() {
+    this.ro = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        this.applySizeClasses(entry.contentRect.width);
+      }
+    });
+    this.ro.observe(this.element);
+  }
+  disconnectedCallback() {
+    this.ro.disconnect();
+  }
+  applySizeClasses(size) {
+    let xsmall = false;
+    let small = false;
+    let medium = false;
+    let large = false;
+    let xlarge = false;
+    let xxlarge = false;
+    let large2k = false;
+    let large4k = false;
+    if (size >= 2600)
+      large4k = true;
+    else if (size >= 1980)
+      large2k = true;
+    else if (size >= 1600)
+      xxlarge = true;
+    else if (size >= 1440)
+      xlarge = true;
+    else if (size >= 1200)
+      large = true;
+    else if (size >= 992)
+      medium = true;
+    else if (size >= 768)
+      small = true;
+    else
+      xsmall = true;
+    this.element.classList.toggle("xsmall", xsmall);
+    this.element.classList.toggle("small", small);
+    this.element.classList.toggle("medium", medium);
+    this.element.classList.toggle("large", large);
+    this.element.classList.toggle("xlarge", xlarge);
+    this.element.classList.toggle("xxlarge", xxlarge);
+    this.element.classList.toggle("large2k", large2k);
+    this.element.classList.toggle("large4k", large4k);
+  }
+  render() {
+    return (h("div", null, h("slot", null)));
+  }
+  static get is() { return "ptc-responsive-wrapper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-responsive-wrapper.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-responsive-wrapper.css"]
+    };
+  }
+  static get elementRef() { return "element"; }
+}

package/dist/collection/components/ptc-shopping-cart/ptc-shopping-cart.js

@@ -1,97 +1,97 @@
-import { Host, h } from '@stencil/core';
-import ShoppingCartBlack from '../../media/svg-imgs/ptc-shopping-cart-black.svg';
-import ShoppingCartWhite from '../../media/svg-imgs/ptc-shopping-cart-white.svg';
-export class PtcShoppingCart {
-  constructor() {
-    this.cartCount = undefined;
-    this.color = 'white';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    const svg = this.color == 'black' ? ShoppingCartBlack : ShoppingCartWhite;
-    const svgClass = this.color == 'black' ? "cart clear-background" : "cart black-background";
-    return (h(Host, { class: classMap }, this.cartCount ? (h("div", { class: svgClass, innerHTML: svg }, h("div", { class: "cart__count" }, this.cartCount))) : (h("div", { class: svgClass, innerHTML: svg }))));
-    /*
-            if(this.color == 'black'){
-                return (
-                    <Host class={classMap}>
-                        {this.cartCount ? (
-                            <div class="cart" innerHTML={ShoppingCartBlack}>
-                                <div class="cart__count">{this.cartCount}</div>
-                            </div>
-                        ) : (
-                            <div innerHTML={ShoppingCartBlack}></div>)
-                        }
-                    </Host>
-                );
-            } else if(this.color == 'white'){
-                return(
-                    <Host class={classMap}>
-                        {this.cartCount ? (
-                            <div class="cart black-background" innerHTML={ShoppingCartWhite}>
-                                <div class="cart__count">{this.cartCount}</div>
-                            </div>
-                        ) : (
-                            <div innerHTML={ShoppingCartWhite} class="black-background"></div>)
-                        }
-                    </Host>
-                );
-            }*/
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-shopping-cart']: true,
-    };
-  }
-  static get is() { return "ptc-shopping-cart"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-shopping-cart.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-shopping-cart.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "cartCount": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "cart-count",
-        "reflect": false
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'black' | 'white'",
-          "resolved": "\"black\" | \"white\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'white'"
-      }
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+import ShoppingCartBlack from '../../media/svg-imgs/ptc-shopping-cart-black.svg';
+import ShoppingCartWhite from '../../media/svg-imgs/ptc-shopping-cart-white.svg';
+export class PtcShoppingCart {
+  constructor() {
+    this.cartCount = undefined;
+    this.color = 'white';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const svg = this.color == 'black' ? ShoppingCartBlack : ShoppingCartWhite;
+    const svgClass = this.color == 'black' ? "cart clear-background" : "cart black-background";
+    return (h(Host, { class: classMap }, this.cartCount ? (h("div", { class: svgClass, innerHTML: svg }, h("div", { class: "cart__count" }, this.cartCount))) : (h("div", { class: svgClass, innerHTML: svg }))));
+    /*
+            if(this.color == 'black'){
+                return (
+                    <Host class={classMap}>
+                        {this.cartCount ? (
+                            <div class="cart" innerHTML={ShoppingCartBlack}>
+                                <div class="cart__count">{this.cartCount}</div>
+                            </div>
+                        ) : (
+                            <div innerHTML={ShoppingCartBlack}></div>)
+                        }
+                    </Host>
+                );
+            } else if(this.color == 'white'){
+                return(
+                    <Host class={classMap}>
+                        {this.cartCount ? (
+                            <div class="cart black-background" innerHTML={ShoppingCartWhite}>
+                                <div class="cart__count">{this.cartCount}</div>
+                            </div>
+                        ) : (
+                            <div innerHTML={ShoppingCartWhite} class="black-background"></div>)
+                        }
+                    </Host>
+                );
+            }*/
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-shopping-cart']: true,
+    };
+  }
+  static get is() { return "ptc-shopping-cart"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-shopping-cart.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-shopping-cart.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cartCount": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "cart-count",
+        "reflect": false
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'black' | 'white'",
+          "resolved": "\"black\" | \"white\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'white'"
+      }
+    };
+  }
+}