@ptcwebops/ptcw-design 0.1.2 → 0.1.3

package/dist/types/components.d.ts

@@ -68,6 +68,8 @@ export namespace Components {
          */
         "visible": boolean;
     }
+    interface PtcAvatar {
+    }
     interface PtcButton {
         /**
           * Button theme color
@@ -172,16 +174,6 @@ export namespace Components {
     }
     interface PtcFooter {
     }
-    interface PtcImage {
-        /**
-          * Image alt
-         */
-        "alt": string;
-        /**
-          * Image Render Src
-         */
-        "src": string;
-    }
     interface PtcImg {
         /**
           * Image border shape
@@ -310,14 +302,53 @@ export namespace Components {
         /**
           * Paragraph Margin
          */
-        "paraMargin"?: 'margin-flush';
+        "paraMargin"?: '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';
         /**
           * Paragraph Style
          */
         "paraStyle": 'default' | 'intro' | 'small' | 'announcement';
     }
     interface PtcPicture {
-        "lazy": 'lazy' | 'eager';
+        /**
+          * Image alt
+         */
+        "alt": string;
+        /**
+          * Image border shape
+         */
+        "borderRadius": 'radius-sm' | 'radius-md' | 'radius-lg' | '';
+        /**
+          * Set height Width will be auto by default
+         */
+        "height": string;
+        /**
+          * Object Fit Default: cover
+         */
+        "objectFit": 'cover' | 'fill' | 'contain' | 'scale-down' | 'none' | 'initial' | 'inherit';
+        /**
+          * Image solution for large screen >=1200px
+         */
+        "sizeLg": string;
+        /**
+          * Image size for medium screen >=992px and <=1199px
+         */
+        "sizeMd": string;
+        /**
+          * Image size for small screen >=768px and <=991px
+         */
+        "sizeSm": string;
+        /**
+          * Image size for smallest screen <=767px
+         */
+        "sizeXs": string;
+        /**
+          * Image Render Src
+         */
+        "src": string;
+        /**
+          * Set Width height will be 100% by default
+         */
+        "width": string;
     }
     interface PtcSpacer {
         /**
@@ -387,6 +418,12 @@ declare global {
         prototype: HTMLPtcAnnouncementElement;
         new (): HTMLPtcAnnouncementElement;
     };
+    interface HTMLPtcAvatarElement extends Components.PtcAvatar, HTMLStencilElement {
+    }
+    var HTMLPtcAvatarElement: {
+        prototype: HTMLPtcAvatarElement;
+        new (): HTMLPtcAvatarElement;
+    };
     interface HTMLPtcButtonElement extends Components.PtcButton, HTMLStencilElement {
     }
     var HTMLPtcButtonElement: {
@@ -411,12 +448,6 @@ declare global {
         prototype: HTMLPtcFooterElement;
         new (): HTMLPtcFooterElement;
     };
-    interface HTMLPtcImageElement extends Components.PtcImage, HTMLStencilElement {
-    }
-    var HTMLPtcImageElement: {
-        prototype: HTMLPtcImageElement;
-        new (): HTMLPtcImageElement;
-    };
     interface HTMLPtcImgElement extends Components.PtcImg, HTMLStencilElement {
     }
     var HTMLPtcImgElement: {
@@ -500,11 +531,11 @@ declare global {
         "list-item": HTMLListItemElement;
         "my-component": HTMLMyComponentElement;
         "ptc-announcement": HTMLPtcAnnouncementElement;
+        "ptc-avatar": HTMLPtcAvatarElement;
         "ptc-button": HTMLPtcButtonElement;
         "ptc-card": HTMLPtcCardElement;
         "ptc-date": HTMLPtcDateElement;
         "ptc-footer": HTMLPtcFooterElement;
-        "ptc-image": HTMLPtcImageElement;
         "ptc-img": HTMLPtcImgElement;
         "ptc-link": HTMLPtcLinkElement;
         "ptc-list": HTMLPtcListElement;
@@ -587,6 +618,8 @@ declare namespace LocalJSX {
          */
         "visible"?: boolean;
     }
+    interface PtcAvatar {
+    }
     interface PtcButton {
         /**
           * Button theme color
@@ -695,16 +728,6 @@ declare namespace LocalJSX {
     }
     interface PtcFooter {
     }
-    interface PtcImage {
-        /**
-          * Image alt
-         */
-        "alt"?: string;
-        /**
-          * Image Render Src
-         */
-        "src"?: string;
-    }
     interface PtcImg {
         /**
           * Image border shape
@@ -837,14 +860,53 @@ declare namespace LocalJSX {
         /**
           * Paragraph Margin
          */
-        "paraMargin"?: 'margin-flush';
+        "paraMargin"?: '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';
         /**
           * Paragraph Style
          */
         "paraStyle"?: 'default' | 'intro' | 'small' | 'announcement';
     }
     interface PtcPicture {
-        "lazy"?: 'lazy' | 'eager';
+        /**
+          * Image alt
+         */
+        "alt"?: string;
+        /**
+          * Image border shape
+         */
+        "borderRadius"?: 'radius-sm' | 'radius-md' | 'radius-lg' | '';
+        /**
+          * Set height Width will be auto by default
+         */
+        "height"?: string;
+        /**
+          * Object Fit Default: cover
+         */
+        "objectFit"?: 'cover' | 'fill' | 'contain' | 'scale-down' | 'none' | 'initial' | 'inherit';
+        /**
+          * Image solution for large screen >=1200px
+         */
+        "sizeLg"?: string;
+        /**
+          * Image size for medium screen >=992px and <=1199px
+         */
+        "sizeMd"?: string;
+        /**
+          * Image size for small screen >=768px and <=991px
+         */
+        "sizeSm"?: string;
+        /**
+          * Image size for smallest screen <=767px
+         */
+        "sizeXs"?: string;
+        /**
+          * Image Render Src
+         */
+        "src"?: string;
+        /**
+          * Set Width height will be 100% by default
+         */
+        "width"?: string;
     }
     interface PtcSpacer {
         /**
@@ -893,11 +955,11 @@ declare namespace LocalJSX {
         "list-item": ListItem;
         "my-component": MyComponent;
         "ptc-announcement": PtcAnnouncement;
+        "ptc-avatar": PtcAvatar;
         "ptc-button": PtcButton;
         "ptc-card": PtcCard;
         "ptc-date": PtcDate;
         "ptc-footer": PtcFooter;
-        "ptc-image": PtcImage;
         "ptc-img": PtcImg;
         "ptc-link": PtcLink;
         "ptc-list": PtcList;
@@ -921,11 +983,11 @@ declare module "@stencil/core" {
             "list-item": LocalJSX.ListItem & JSXBase.HTMLAttributes<HTMLListItemElement>;
             "my-component": LocalJSX.MyComponent & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
             "ptc-announcement": LocalJSX.PtcAnnouncement & JSXBase.HTMLAttributes<HTMLPtcAnnouncementElement>;
+            "ptc-avatar": LocalJSX.PtcAvatar & JSXBase.HTMLAttributes<HTMLPtcAvatarElement>;
             "ptc-button": LocalJSX.PtcButton & JSXBase.HTMLAttributes<HTMLPtcButtonElement>;
             "ptc-card": LocalJSX.PtcCard & JSXBase.HTMLAttributes<HTMLPtcCardElement>;
             "ptc-date": LocalJSX.PtcDate & JSXBase.HTMLAttributes<HTMLPtcDateElement>;
             "ptc-footer": LocalJSX.PtcFooter & JSXBase.HTMLAttributes<HTMLPtcFooterElement>;
-            "ptc-image": LocalJSX.PtcImage & JSXBase.HTMLAttributes<HTMLPtcImageElement>;
             "ptc-img": LocalJSX.PtcImg & JSXBase.HTMLAttributes<HTMLPtcImgElement>;
             "ptc-link": LocalJSX.PtcLink & JSXBase.HTMLAttributes<HTMLPtcLinkElement>;
             "ptc-list": LocalJSX.PtcList & JSXBase.HTMLAttributes<HTMLPtcListElement>;

package/dist/types/utils/interfaces.d.ts

@@ -6,4 +6,9 @@ declare let ResponsiveBgVariables: {
   selector: string;
   interval: number;
 };
-export { CssClassMap, ResponsiveBgVariables };
+declare let ResponsivePictureVariables: {
+  envs: string[];
+  selector: string;
+  interval: number;
+};
+export { CssClassMap, ResponsiveBgVariables, ResponsivePictureVariables };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ptcwebops/ptcw-design",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/custom-elements/index.js",

package/dist/cjs/ptc-image.cjs.entry.js

@@ -1,58 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ac192914.js');
-
-const ptcImageCss = "img{width:100%;height:auto}";
-
-const PtcImage = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  componentDidLoad() {
-    this.addIntersectionObserver();
-  }
-  componentWillUpdate() {
-    if (this.src !== this.oldSrc) {
-      this.addIntersectionObserver();
-    }
-    this.oldSrc = this.src;
-  }
-  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 = image.dataset.src;
-            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 = image.dataset.src;
-        image.onload = () => {
-          image.removeAttribute('data-src');
-          console.log('loaded fallback');
-        };
-      }, 5000);
-    }
-  }
-  render() {
-    return index.h("img", { "data-src": this.src, alt: this.alt });
-  }
-  get el() { return index.getElement(this); }
-};
-PtcImage.style = ptcImageCss;
-
-exports.ptc_image = PtcImage;

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

@@ -1,4 +0,0 @@
-img {
-  width: 100%;
-  height: auto;
-}

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

@@ -1,92 +0,0 @@
-import { Component, Prop, h, Element, State } from '@stencil/core';
-export class PtcImage {
-  componentDidLoad() {
-    this.addIntersectionObserver();
-  }
-  componentWillUpdate() {
-    if (this.src !== this.oldSrc) {
-      this.addIntersectionObserver();
-    }
-    this.oldSrc = this.src;
-  }
-  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 = image.dataset.src;
-            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 = image.dataset.src;
-        image.onload = () => {
-          image.removeAttribute('data-src');
-          console.log('loaded fallback');
-        };
-      }, 5000);
-    }
-  }
-  render() {
-    return h("img", { "data-src": this.src, alt: this.alt });
-  }
-  static get is() { return "ptc-image"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-image.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-image.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
-    }
-  }; }
-  static get states() { return {
-    "oldSrc": {}
-  }; }
-  static get elementRef() { return "el"; }
-}

package/dist/esm/ptc-image.entry.js

@@ -1,54 +0,0 @@
-import { r as registerInstance, h, a as getElement } from './index-7a3883ee.js';
-
-const ptcImageCss = "img{width:100%;height:auto}";
-
-const PtcImage = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  componentDidLoad() {
-    this.addIntersectionObserver();
-  }
-  componentWillUpdate() {
-    if (this.src !== this.oldSrc) {
-      this.addIntersectionObserver();
-    }
-    this.oldSrc = this.src;
-  }
-  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 = image.dataset.src;
-            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 = image.dataset.src;
-        image.onload = () => {
-          image.removeAttribute('data-src');
-          console.log('loaded fallback');
-        };
-      }, 5000);
-    }
-  }
-  render() {
-    return h("img", { "data-src": this.src, alt: this.alt });
-  }
-  get el() { return getElement(this); }
-};
-PtcImage.style = ptcImageCss;
-
-export { PtcImage as ptc_image };

package/dist/ptcw-design/p-4586b0f5.entry.js

@@ -1 +0,0 @@
-import{r as t,h as s,a as e}from"./p-50923c9a.js";const i=class{constructor(s){t(this,s)}componentDidLoad(){this.addIntersectionObserver()}componentWillUpdate(){this.src!==this.oldSrc&&this.addIntersectionObserver(),this.oldSrc=this.src}addIntersectionObserver(){if(this.src)if("IntersectionObserver"in window){let t=new IntersectionObserver((s=>{s.forEach((s=>{if(s.isIntersecting){const s=this.el.shadowRoot.querySelector("img");s.src=s.dataset.src,console.log("loaded"),t.unobserve(s)}}))}));t.observe(this.el.shadowRoot.querySelector("img"))}else setTimeout((()=>{const t=this.el.shadowRoot.querySelector("img");t.src=t.dataset.src,t.onload=()=>{t.removeAttribute("data-src"),console.log("loaded fallback")}}),5e3)}render(){return s("img",{"data-src":this.src,alt:this.alt})}get el(){return e(this)}};i.style="img{width:100%;height:auto}";export{i as ptc_image}

package/dist/ptcw-design/p-56f6f900.entry.js

@@ -1 +0,0 @@
-import{r as t,h as i,H as e,a as n}from"./p-50923c9a.js";let s={envs:["xs","sm","md","lg"],selector:".ptc-img",interval:250};const o=class{constructor(i){t(this,i),this.sizeXs="510x340",this.sizeSm="1240x496",this.sizeMd="1366x500",this.sizeLg="1920x1080",this.imageType="smart-bg",this.borderRadius="",this.loadMode="lazy-bg"}WindowResize(){this.setResponsiveBg()}render(){const t=this.getCssClassMap();return i(e,null,i("div",{class:t,"data-xs":`${this.imgUrl}:${this.sizeXs}`,"data-sm":`${this.imgUrl}:${this.sizeSm}`,"data-md":`${this.imgUrl}:${this.sizeMd}`,"data-lg":`${this.imgUrl}:${this.sizeLg}`}))}componentDidLoad(){this.addIntersectionObserver(),this.setResponsiveBg()}componentWillUpdate(){console.log("componentWillUpdate!"),this.addIntersectionObserver(),this.setResponsiveBg()}setResponsiveBg(){let t,i,e=(this.el||document).querySelectorAll(s.selector),n=this.getCurrentBreakPoints();console.log("current breakpoint: "+n);for(var o=0,r=e.length;o<r;o++)t=e[o],i=t.getAttribute("data-"+n),null!==i?t.style.backgroundImage="url('"+i+"')":"object"==typeof console&&console.warn("Data attribute: data-"+n+" not found on element:\n\n"+t.outerHTML+"\n\n\n")}addIntersectionObserver(){if(this.imgUrl){if("IntersectionObserver"in window){let t=(this.el||document).querySelectorAll(".lazy-bg"),i=new IntersectionObserver((t=>{t.forEach((t=>{if(t.isIntersecting){const e=t.target;e.classList.remove("lazy-bg"),console.log("loaded"),i.unobserve(e)}}))}));t.forEach((t=>{i.observe(t)}))}}else console.log("no image!")}getCssClassMap(){return{[this.imageType]:!0,"ptc-img":!0,[this.borderRadius]:!0,[this.loadMode]:!0}}getCurrentBreakPoints(){let t,i=window.document,e=i.createElement("div");i.body.appendChild(e);for(let n=s.envs.length-1;n>=0;n--)if(t=s.envs[n],e.className="hidden-"+t,null===e.offsetParent)return i.body.removeChild(e),console.log("remove test node"),t;return i.body.removeChild(e),this.getFallbackBreakpoint()}getFallbackBreakpoint(){return window.matchMedia("(min-width: 992px)").matches?"lg":window.matchMedia("(min-width: 768px)").matches?"md":window.matchMedia("(min-width: 576px)").matches?"sm":"xs"}get el(){return n(this)}};o.style=".smart-bg{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.smart-img{position:absolute;display:block;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.radius-sm{border-radius:var(--ptc-border-radius-small)}.radius-md{border-radius:var(--ptc-border-radius-medium)}.radius-lg{border-radius:var(--ptc-border-radius-large)}.lazy-bg{background-image:none !important;background-color:var(--color-primary-lightgrey)}@media (max-width: 767px){.hidden-xs{display:none !important}}@media (min-width: 768px) and (max-width: 991px){.hidden-sm{display:none !important}}@media (min-width: 992px) and (max-width: 1199px){.hidden-md{display:none !important}}@media (min-width: 1200px){.hidden-lg{display:none !important}}";export{o as ptc_img}

package/dist/ptcw-design/p-97a61538.entry.js

@@ -1 +0,0 @@
-import{r as s,h as t,H as r}from"./p-50923c9a.js";const c=class{constructor(t){s(this,t),this.lazy="lazy"}render(){const s=this.getCssClassMap();return t(r,{class:s},t("picture",null,t("slot",null)))}getCssClassMap(){return{[this.lazy]:!0}}};c.style=":host{display:block}";export{c as ptc_picture}

package/dist/types/components/ptc-image/ptc-image.d.ts

@@ -1,18 +0,0 @@
-export declare class PtcImage {
-  el: HTMLElement;
-  /**
-   * Image Render Src
-   */
-  src: string;
-  /**
-   * Image alt
-   */
-  alt: string;
-  /**Image Src */
-  oldSrc: string;
-  io: IntersectionObserver;
-  componentDidLoad(): void;
-  componentWillUpdate(): void;
-  addIntersectionObserver(): void;
-  render(): any;
-}