@ptcwebops/ptcw-design 0.1.1 → 0.1.3

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

@@ -0,0 +1,111 @@
+import { Component, h, Prop } from '@stencil/core';
+export class PtcPara {
+  constructor() {
+    /**
+     * Paragraph font size
+     **/
+    this.fontSize = "medium";
+    /**
+     * Paragraph font weight
+     **/
+    this.fontWeight = 'w-4';
+    /**
+     * Paragraph Style
+     **/
+    this.paraStyle = 'default';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h("p", { class: classMap, part: "part-para" },
+      h("slot", null)));
+  }
+  getCssClassMap() {
+    return {
+      [this.fontSize]: true,
+      [this.fontWeight]: true,
+      [this.paraStyle]: true,
+      [this.paraMargin]: true,
+    };
+  }
+  static get is() { return "ptc-para"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-para.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-para.css"]
+  }; }
+  static get properties() { return {
+    "fontSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'xxxx-large'",
+        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Paragraph font size"
+      },
+      "attribute": "font-size",
+      "reflect": false,
+      "defaultValue": "\"medium\""
+    },
+    "fontWeight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'w-3' | 'w-4' | 'w-5' | 'w-6' | 'w-7' | 'w-8' | 'w-9'",
+        "resolved": "\"w-3\" | \"w-4\" | \"w-5\" | \"w-6\" | \"w-7\" | \"w-8\" | \"w-9\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Paragraph font weight"
+      },
+      "attribute": "font-weight",
+      "reflect": false,
+      "defaultValue": "'w-4'"
+    },
+    "paraStyle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'intro' | 'small' | 'announcement'",
+        "resolved": "\"announcement\" | \"default\" | \"intro\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Paragraph Style"
+      },
+      "attribute": "para-style",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "paraMargin": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'margin-flush' | 'margin-top-3' | 'margin-top-4' | 'margin-top-5' | 'margin-top-6' | 'margin-bottom-3' | 'margin-bottom-4' | 'margin-bottom-5' | 'margin-bottom-6'",
+        "resolved": "\"margin-bottom-3\" | \"margin-bottom-4\" | \"margin-bottom-5\" | \"margin-bottom-6\" | \"margin-flush\" | \"margin-top-3\" | \"margin-top-4\" | \"margin-top-5\" | \"margin-top-6\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Paragraph Margin"
+      },
+      "attribute": "para-margin",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/ptc-picture/ptc-picture.css

@@ -0,0 +1,32 @@
+:host {
+  display: block;
+  overflow: hidden;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+
+.none {
+  object-fit: none;
+}
+
+.initial {
+  object-fit: initial;
+}
+
+.inherit {
+  object-fit: inherit;
+}

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

@@ -0,0 +1,356 @@
+import { Component, Prop, h, Element, Listen, State, Host } from '@stencil/core';
+import { ResponsivePictureVariables } from '../../utils/interfaces';
+export class PtcPicture {
+  constructor() {
+    /**
+     * Image size for smallest screen
+     * <=767px
+     */
+    this.sizeXs = '510x340';
+    /**
+     * Image size for small screen
+     * >=768px and <=991px
+     */
+    this.sizeSm = '1240x496';
+    /**
+     * Image size for medium screen
+     * >=992px and <=1199px
+     */
+    this.sizeMd = '1366x500';
+    /**
+     * Image solution for large screen
+     * >=1200px
+     */
+    this.sizeLg = '1920x1080';
+    /**
+     * Image border shape
+     */
+    this.borderRadius = '';
+    /**
+     * Set height
+     * Width will be auto by default
+     */
+    this.height = 'auto';
+    /**
+     * Set Width
+     * height will be 100% by default
+     */
+    this.width = '100%';
+    /**
+     * Object Fit
+     * Default: cover
+     */
+    this.objectFit = 'cover';
+  }
+  WindowResize() {
+    this.addIntersectionObserver();
+  }
+  componentDidLoad() {
+    this.addIntersectionObserver();
+  }
+  componentWillUpdate() {
+    if (this.src !== this.oldSrc) {
+      this.addIntersectionObserver();
+    }
+    this.oldSrc = this.src;
+  }
+  //lazy-loading
+  addIntersectionObserver() {
+    if (!this.src) {
+      return;
+    }
+    if ('IntersectionObserver' in window) {
+      let lazyLoadImages = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const image = this.el.shadowRoot.querySelector('img');
+            image.src = this.setResponsiveBg();
+            console.log('loaded');
+            lazyLoadImages.unobserve(image);
+          }
+        });
+      });
+      lazyLoadImages.observe(this.el.shadowRoot.querySelector('img'));
+    }
+    else {
+      // fall back to setTimeout for Safari and IE
+      setTimeout(() => {
+        const image = this.el.shadowRoot.querySelector('img');
+        image.src = this.setResponsiveBg();
+        image.onload = () => {
+          image.removeAttribute('data-src');
+          console.log('loaded fallback');
+        };
+      }, 5000);
+    }
+  }
+  //responsive image
+  setResponsiveBg() {
+    // Define local variables
+    let backgrounds = (this.el.shadowRoot || document).querySelectorAll('img'), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    //console.log('current breakpoint: ' + currentBreakpoint);
+    // Loop through all target elements
+    for (var i = 0, len = backgrounds.length; i < len; i++) {
+      // Set current variables
+      el = backgrounds[i];
+      elData = el.getAttribute('data-' + currentBreakpoint);
+      if (elData !== null) {
+        // console.log('img src= ' + elData);
+        return elData;
+      }
+      else {
+        if (typeof console == 'object') {
+          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
+        }
+      }
+    }
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, null,
+      h("style", null, `img{width:${this.width};height:${this.height};}`),
+      h("img", { class: classMap, "data-xs": `${this.src}:${this.sizeXs}`, "data-sm": `${this.src}:${this.sizeSm}`, "data-md": `${this.src}:${this.sizeMd}`, "data-lg": `${this.src}:${this.sizeLg}`, alt: this.alt })));
+  }
+  getCurrentBreakPoints() {
+    // Define local variables
+    let doc = window.document, temp = doc.createElement('div'), env;
+    // Append test node
+    doc.body.appendChild(temp);
+    // Loop through breakpoints
+    for (let i = ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
+      env = ResponsivePictureVariables.envs[i];
+      // Add classes
+      temp.className = 'hidden-' + env;
+      // Found breakpoint
+      if (temp.offsetParent === null) {
+        // Remove our test node
+        doc.body.removeChild(temp);
+        console.log('remove test node');
+        // Return current breakpoint
+        return env;
+      }
+    }
+    // Breakpoint not found, try fallback
+    doc.body.removeChild(temp);
+    return this.getFallbackBreakpoint();
+  }
+  getFallbackBreakpoint() {
+    if (window.matchMedia('(min-width: 992px)').matches) {
+      return 'lg';
+    }
+    else if (window.matchMedia('(min-width: 768px)').matches) {
+      return 'md';
+    }
+    else if (window.matchMedia('(min-width: 576px)').matches) {
+      return 'sm';
+    }
+    else {
+      return 'xs';
+    }
+  }
+  getCssClassMap() {
+    return {
+      [this.borderRadius]: true,
+      [this.objectFit]: true,
+    };
+  }
+  static get is() { return "ptc-picture"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-picture.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-picture.css"]
+  }; }
+  static get properties() { return {
+    "src": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image Render Src"
+      },
+      "attribute": "src",
+      "reflect": false
+    },
+    "alt": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image alt"
+      },
+      "attribute": "alt",
+      "reflect": false
+    },
+    "sizeXs": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image size for smallest screen\n<=767px"
+      },
+      "attribute": "size-xs",
+      "reflect": false,
+      "defaultValue": "'510x340'"
+    },
+    "sizeSm": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image size for small screen\n>=768px and <=991px"
+      },
+      "attribute": "size-sm",
+      "reflect": false,
+      "defaultValue": "'1240x496'"
+    },
+    "sizeMd": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image size for medium screen\n>=992px and <=1199px"
+      },
+      "attribute": "size-md",
+      "reflect": false,
+      "defaultValue": "'1366x500'"
+    },
+    "sizeLg": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image solution for large screen\n>=1200px"
+      },
+      "attribute": "size-lg",
+      "reflect": false,
+      "defaultValue": "'1920x1080'"
+    },
+    "borderRadius": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'radius-sm' | 'radius-md' | 'radius-lg' | ''",
+        "resolved": "\"\" | \"radius-lg\" | \"radius-md\" | \"radius-sm\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image border shape"
+      },
+      "attribute": "border-radius",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "height": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set height\nWidth will be auto by default"
+      },
+      "attribute": "height",
+      "reflect": false,
+      "defaultValue": "'auto'"
+    },
+    "width": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set Width\nheight will be 100% by default"
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "'100%'"
+    },
+    "objectFit": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'cover' | 'fill' | 'contain' | 'scale-down' | 'none' | 'initial' | 'inherit'",
+        "resolved": "\"contain\" | \"cover\" | \"fill\" | \"inherit\" | \"initial\" | \"none\" | \"scale-down\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Object Fit\nDefault: cover"
+      },
+      "attribute": "object-fit",
+      "reflect": false,
+      "defaultValue": "'cover'"
+    }
+  }; }
+  static get states() { return {
+    "oldSrc": {}
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "resize",
+      "method": "WindowResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}