@ptcwebops/ptcw-design 0.5.5 → 0.5.7

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

@@ -61,6 +61,40 @@
   margin-right: var(--ptc-element-spacing-03);
   margin-top: var(--ptc-element-spacing-03);
 }
+.wrapper .modal-popup.shadow-scroller {
+  max-height: 756px;
+}
+.wrapper .modal-popup.shadow-scroller .modal-header {
+  transition: box-shadow ease-in-out 250ms;
+  position: relative;
+  min-height: 57px;
+  border-bottom: 1px solid var(--color-gray-02);
+  width: 100%;
+}
+.wrapper .modal-popup.shadow-scroller .modal-header .close {
+  position: absolute;
+  top: var(--spacing-md);
+  right: var(--spacing-md);
+  margin: 0;
+}
+.wrapper .modal-popup.shadow-scroller .modal-body {
+  min-height: 200px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.wrapper .modal-popup.shadow-scroller .modal-footer {
+  transition: box-shadow ease-in-out 250ms;
+  width: 100%;
+  min-height: 72px;
+  border-top: 1px solid var(--color-gray-02);
+  padding-top: 1rem;
+}
+.wrapper .modal-popup.shadow-scroller.scroll-top .modal-header {
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
+}
+.wrapper .modal-popup.shadow-scroller.scroll-bottom .modal-footer {
+  box-shadow: 0px -8px 12px rgba(0, 0, 0, 0.12);
+}
 .wrapper.show {
   display: flex;
   align-items: flex-start;
@@ -68,6 +102,9 @@
 .wrapper.show .modal-popup {
   transform: translateY(0);
 }
+.wrapper.show .modal-popup.rounded {
+  border-radius: var(--ptc-border-radius-standard);
+}
 
 .overlay {
   width: 100vw;

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

@@ -1,255 +1,337 @@
-import { Component, Element, Host, Prop, State, h, Event } from '@stencil/core';
-export class PtcModal {
-  constructor() {
-    /**
-     * Sets if popup should close if click on outside
-     */
-    this.size = 'sm';
-    /**
-     * Set whether or not to display modal
-     */
-    this.show = false;
-    /**
-     * Sets if popup should overlay
-     */
-    this.overlay = true;
-    /**
-     * Sets if popup should close if click on outside
-     */
-    this.closeOnBlur = false;
-  }
-  fireOnClosed(modal) {
-    this.closed.emit(modal);
-  }
-  fireOnOpened(modal) {
-    this.opened.emit(modal);
-  }
-  componentWillLoad() {
-    let body = document.querySelector('body');
-    this.bodyOverflowSetting = {
-      //overflow: body.style['overflow'],
-      overflowY: body.style['overflowY'],
-      overflowX: body.style['overflowX'],
-    };
-  }
-  componentWillRender() {
-    let body = document.querySelector('body');
-    if (body) {
-      if (this.show) {
-        //body.style['overflow'] = 'hidden';
-        body.style['overflowY'] = 'scroll';
-        body.style['overflowX'] = 'hidden';
-      }
-      else {
-        //body.style['overflow'] = this.bodyOverflowSetting.overflow;
-        body.style['overflowY'] = this.bodyOverflowSetting.overflowY;
-        body.style['overflowX'] = this.bodyOverflowSetting.overflowX;
-      }
-    }
-  }
-  componentDidLoad() {
-    if (this.show) {
-      this.fireOnOpened(this);
-    }
-  }
-  componentDidUpdate() {
-    if (this.show) {
-      this.fireOnOpened(this);
-    }
-    else {
-      this.fireOnClosed(this);
-    }
-  }
-  resizeIframe(e) {
-    let iFrame = e.target;
-    setTimeout(() => {
-      try {
-        iFrame.height = `${iFrame.contentDocument.body.scrollHeight}px`;
-      }
-      catch (error) {
-        console.log(error);
-        iFrame.height = '616px'; //default
-        iFrame.removeAttribute('scrolling');
-      }
-      iFrame.classList.add('ready');
-    }, 50);
-  }
-  close() {
-    this.show = false;
-  }
-  render() {
-    let content;
-    let overlay;
-    let type = this.iframeUrl ? 'frame' : 'html';
-    if (this.iframeUrl) {
-      content = (h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
-    }
-    else {
-      content = (h("slot", null));
-    }
-    if (this.overlay) {
-      if (this.closeOnBlur) {
-        overlay = h("div", { class: "overlay", onClick: (_) => this.close() });
-      }
-      else {
-        overlay = h("div", { class: "overlay" });
-      }
-    }
-    return (h(Host, null,
-      h("div", { class: `wrapper ${this.show ? "show" : "hide"}` },
-        overlay,
-        h("div", { class: `modal-popup ${this.size} ${type}` },
-          h("div", { class: "close" },
-            h("a", { href: "#", onClick: (e) => {
-                e.preventDefault();
-                this.close();
-              } },
-              h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" },
-                h("path", { d: "M1 1L13 13", stroke: "black" }),
-                h("path", { d: "M13 1L1 13", stroke: "black" })))),
-          h("div", { class: "modal-body" }, content)))));
-  }
-  static get is() { return "ptc-modal"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-modal.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-modal.css"]
-  }; }
-  static get properties() { return {
-    "iframeUrl": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set url for content iframe to load if false will load slot element"
-      },
-      "attribute": "iframe-url",
-      "reflect": false
-    },
-    "size": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "'sm' | 'md' | 'lg' | 'xl'",
-        "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Sets if popup should close if click on outside"
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'sm'"
-    },
-    "show": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Set whether or not to display modal"
-      },
-      "attribute": "show",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "overlay": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Sets if popup should overlay"
-      },
-      "attribute": "overlay",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "closeOnBlur": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Sets if popup should close if click on outside"
-      },
-      "attribute": "close-on-blur",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "overlayHeight": {},
-    "bodyOverflowSetting": {}
-  }; }
-  static get events() { return [{
-      "method": "closed",
-      "name": "closed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event for modal popup closed"
-      },
-      "complexType": {
-        "original": "PtcModal",
-        "resolved": "PtcModal",
-        "references": {
-          "PtcModal": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "opened",
-      "name": "opened",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event for modal popup opened"
-      },
-      "complexType": {
-        "original": "PtcModal",
-        "resolved": "PtcModal",
-        "references": {
-          "PtcModal": {
-            "location": "global"
-          }
-        }
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-}
+import { Component, Element, Host, Prop, State, h, Event } from '@stencil/core';
+export class PtcModal {
+  constructor() {
+    /**
+     * Sets if popup should close if click on outside
+     */
+    this.size = 'sm';
+    /**
+     * Set whether or not to display modal
+     */
+    this.show = false;
+    /**
+     * Sets if popup should overlay
+     */
+    this.overlay = true;
+    /**
+     * Sets if popup should close if click on outside
+     */
+    this.closeOnBlur = false;
+    /**
+     * Sets if popup should have rounded corners
+     */
+    this.rounded = false;
+    /**
+     * Sets if popup should have header footer sections
+     */
+    this.showHeaderFooter = false;
+  }
+  fireOnClosed(modal) {
+    this.closed.emit(modal);
+  }
+  fireOnOpened(modal) {
+    this.opened.emit(modal);
+  }
+  componentWillLoad() {
+    let body = document.querySelector('body');
+    this.bodyOverflowSetting = {
+      //overflow: body.style['overflow'],
+      overflowY: body.style['overflowY'],
+      overflowX: body.style['overflowX'],
+    };
+  }
+  componentWillRender() {
+    let body = document.querySelector('body');
+    if (body) {
+      if (this.show) {
+        //body.style['overflow'] = 'hidden';
+        body.style['overflowY'] = 'scroll';
+        body.style['overflowX'] = 'hidden';
+      }
+      else {
+        //body.style['overflow'] = this.bodyOverflowSetting.overflow;
+        body.style['overflowY'] = this.bodyOverflowSetting.overflowY;
+        body.style['overflowX'] = this.bodyOverflowSetting.overflowX;
+      }
+    }
+  }
+  componentDidLoad() {
+    if (this.show) {
+      this.fireOnOpened(this);
+    }
+    if (this.showHeaderFooter) {
+      this.handleScroll();
+    }
+  }
+  componentDidUpdate() {
+    if (this.show) {
+      this.fireOnOpened(this);
+    }
+    else {
+      this.fireOnClosed(this);
+    }
+  }
+  resizeIframe(e) {
+    let iFrame = e.target;
+    setTimeout(() => {
+      try {
+        iFrame.height = `${iFrame.contentDocument.body.scrollHeight}px`;
+      }
+      catch (error) {
+        console.log(error);
+        iFrame.height = '616px'; //default
+        iFrame.removeAttribute('scrolling');
+      }
+      iFrame.classList.add('ready');
+    }, 50);
+  }
+  handleScroll() {
+    let modal = this.el.shadowRoot.querySelector('.shadow-scroller');
+    if (modal) {
+      let body = modal.querySelector('.modal-body');
+      var height = body.clientHeight;
+      var scrollHeight = body.scrollHeight;
+      var scrollTop = body.scrollTop;
+      var offset = body.offsetHeight;
+      if (height < scrollHeight) { //has scrollbar
+        if (scrollTop > 0) { //can scroll up
+          modal.classList.add('scroll-top');
+        }
+        else {
+          modal.classList.remove('scroll-top');
+        }
+        if (offset + scrollTop < scrollHeight) { //can scroll down
+          modal.classList.add('scroll-bottom');
+        }
+        else {
+          modal.classList.remove('scroll-bottom');
+        }
+      }
+    }
+  }
+  close() {
+    this.show = false;
+  }
+  render() {
+    let content;
+    let overlay;
+    let type = this.iframeUrl ? 'frame' : 'html';
+    let closebtn = (h("div", { class: "close" },
+      h("a", { href: "#", onClick: (e) => { e.preventDefault(); this.close(); } },
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" },
+          h("path", { d: "M1 1L13 13", stroke: "black" }),
+          h("path", { d: "M13 1L1 13", stroke: "black" })))));
+    if (this.iframeUrl) {
+      content = (h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
+    }
+    else {
+      if (this.showHeaderFooter) {
+        content = (h("slot", { name: "body" }));
+      }
+      else {
+        content = (h("slot", null));
+      }
+    }
+    if (this.overlay) {
+      if (this.closeOnBlur) {
+        overlay = h("div", { class: "overlay", onClick: (_) => this.close() });
+      }
+      else {
+        overlay = h("div", { class: "overlay" });
+      }
+    }
+    return (h(Host, null,
+      h("div", { class: `wrapper ${this.show ? "show" : "hide"}` },
+        overlay,
+        h("div", { class: `modal-popup ${this.size} ${type} ${this.rounded ? 'rounded' : ''} ${this.showHeaderFooter ? 'shadow-scroller' : ''} ` }, this.showHeaderFooter ? [
+          h("div", { class: "modal-header" },
+            h("slot", { name: "header" }),
+            closebtn),
+          h("div", { class: "modal-body", onScroll: () => this.handleScroll() }, content),
+          h("div", { class: "modal-footer" },
+            h("slot", { name: "footer" }))
+        ] : [
+          closebtn,
+          h("div", { class: "modal-body" }, content)
+        ]))));
+  }
+  static get is() { return "ptc-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-modal.css"]
+  }; }
+  static get properties() { return {
+    "iframeUrl": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set url for content iframe to load if false will load slot element"
+      },
+      "attribute": "iframe-url",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "'sm' | 'md' | 'lg' | 'xl'",
+        "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Sets if popup should close if click on outside"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'sm'"
+    },
+    "show": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Set whether or not to display modal"
+      },
+      "attribute": "show",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "overlay": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Sets if popup should overlay"
+      },
+      "attribute": "overlay",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "closeOnBlur": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Sets if popup should close if click on outside"
+      },
+      "attribute": "close-on-blur",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "rounded": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Sets if popup should have rounded corners"
+      },
+      "attribute": "rounded",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "showHeaderFooter": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Sets if popup should have header footer sections"
+      },
+      "attribute": "show-header-footer",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "overlayHeight": {},
+    "bodyOverflowSetting": {}
+  }; }
+  static get events() { return [{
+      "method": "closed",
+      "name": "closed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event for modal popup closed"
+      },
+      "complexType": {
+        "original": "PtcModal",
+        "resolved": "PtcModal",
+        "references": {
+          "PtcModal": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "opened",
+      "name": "opened",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event for modal popup opened"
+      },
+      "complexType": {
+        "original": "PtcModal",
+        "resolved": "PtcModal",
+        "references": {
+          "PtcModal": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}