@ptcwebops/ptcw-design 0.5.6 → 0.5.7

package/dist/collection/components/ptc-accordion/ptc-accordion-item/ptc-accordion-item.js

@@ -0,0 +1,296 @@
+import { Component, Host, h, Prop, State, Element, Method, Event, } from '@stencil/core';
+import { hasSlot } from '../../../utils/component';
+export class PtcAccordionItem {
+  constructor() {
+    /**
+     * Heading text.
+     * This will be overwritten by `heading` slot
+     */
+    this.heading = null;
+    /**
+     * The HTML tag to be applied to the heading text.
+     * This will be overwritten by `heading` slot
+     */
+    this.headingTag = 'h3';
+    /**
+     * If expanded height should be automatically calculated. If set, the `--ptc-accordion-item-body-max-height` CSS variable will be set automatically to the content height
+     */
+    this.autoHeight = false;
+    /**
+     * If the accordion item should be opened by default
+     */
+    this.active = false;
+    this.hasHeadingSlot = true;
+    this.hasArrowSlot = true;
+  }
+  componentWillLoad() {
+    this.hasHeadingSlot = hasSlot(this.el, 'heading');
+    this.hasArrowSlot = hasSlot(this.el, 'arrow');
+  }
+  componentDidLoad() {
+    if (this.autoHeight) {
+      this.bodyEl.style.setProperty('--ptc-accordion-item-body-max-height', this.bodyEl.scrollHeight + 2 + 'px');
+    }
+    this.onTransitionEnd();
+    this.bodyEl.addEventListener('transitionstart', () => {
+      this.onTransitionStart();
+    });
+    this.bodyEl.addEventListener('transitionend', () => {
+      this.onTransitionEnd();
+    });
+    this.hasHeadingSlot = hasSlot(this.el, 'heading');
+    this.hasArrowSlot = hasSlot(this.el, 'arrow');
+  }
+  onTransitionEnd() {
+    if (this.active) {
+      this.bodyEl.style.overflow = 'auto';
+      this.opened.emit();
+    }
+    else {
+      this.bodyEl.style.overflow = 'hidden';
+      this.bodyEl.style.visibility = 'hidden';
+      this.closed.emit();
+    }
+  }
+  onTransitionStart() {
+    if (this.active) {
+      this.bodyEl.style.visibility = 'visible';
+      this.opening.emit();
+    }
+    else {
+      this.closing.emit();
+    }
+  }
+  /**
+   * Toggle open state of accordion item
+   */
+  async toggle() {
+    if (this.active) {
+      this.close();
+    }
+    else {
+      this.open();
+    }
+  }
+  /**
+   * Closes the accordion item
+   */
+  async close() {
+    this.active = false;
+  }
+  /**
+   * Opens the accordion item.
+   */
+  async open() {
+    this.active = true;
+  }
+  render() {
+    const { active, autoHeight, headingTag: HeadingTag } = this;
+    return (h(Host, { class: { active, autoHeight } },
+      h("button", { class: "heading", role: "button", onClick: () => this.toggle() },
+        h("span", { class: "arrow" }, this.hasArrowSlot ? (h("slot", { name: "arrow" })) : (h("svg", { focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" },
+          h("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" })))),
+        this.hasHeadingSlot ? (h("slot", { name: "heading" })) : (h(HeadingTag, { class: "heading-text" }, this.heading))),
+      h("div", { class: "body-container", ref: el => (this.bodyEl = el) },
+        h("div", { class: "body" },
+          h("slot", null)))));
+  }
+  static get is() { return "ptc-accordion-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-accordion-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-accordion-item.css"]
+  }; }
+  static get properties() { return {
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Heading text.\nThis will be overwritten by `heading` slot"
+      },
+      "attribute": "heading",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "headingTag": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The HTML tag to be applied to the heading text.\nThis will be overwritten by `heading` slot"
+      },
+      "attribute": "heading-tag",
+      "reflect": false,
+      "defaultValue": "'h3'"
+    },
+    "autoHeight": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "If expanded height should be automatically calculated. If set, the `--ptc-accordion-item-body-max-height` CSS variable will be set automatically to the content height"
+      },
+      "attribute": "auto-height",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "If the accordion item should be opened by default"
+      },
+      "attribute": "active",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "hasHeadingSlot": {},
+    "hasArrowSlot": {}
+  }; }
+  static get events() { return [{
+      "method": "opened",
+      "name": "opened",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when accordion item has opened"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "opening",
+      "name": "opening",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when accordion item started opening"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "closed",
+      "name": "closed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when accordion item has closed"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "closing",
+      "name": "closing",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when accordion item started closing"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "toggle": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Toggle open state of accordion item",
+        "tags": []
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Closes the accordion item",
+        "tags": []
+      }
+    },
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Opens the accordion item.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,8 @@
+:host {
+  /**
+    @prop --ptc-accordion-item-body-max-height:
+      Inner content max height. This values is also used for CSS animation
+      - default: 100vh
+  */
+  --ptc-accordion-item-body-max-height: 100vh;
+}

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

@@ -0,0 +1,74 @@
+import { Component, Host, h, Prop, Element, Listen } from '@stencil/core';
+export class PtcAccordion {
+  constructor() {
+    /**
+     * If multiple `<ptc-accordion-item>`s can open at the same time
+     */
+    this.multiple = false;
+  }
+  componentWillLoad() {
+    this.items = this.el.querySelectorAll(':scope > ptc-accordion-item');
+    if (!this.multiple) {
+      this.activeItem = this.el.querySelector(':scope > ptc-accordion-item[active]');
+      if (this.activeItem) {
+        this.activeItem.open();
+      }
+      this.closeNonActive();
+    }
+  }
+  openHandler(e) {
+    e.stopPropagation();
+    const eventTarget = e.target;
+    if (!this.multiple) {
+      this.activeItem = eventTarget;
+      this.closeNonActive();
+    }
+  }
+  closeNonActive() {
+    this.items.forEach(item => {
+      if (!item.isEqualNode(this.activeItem)) {
+        item.close();
+      }
+    });
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  static get is() { return "ptc-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-accordion.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-accordion.css"]
+  }; }
+  static get properties() { return {
+    "multiple": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "If multiple `<ptc-accordion-item>`s can open at the same time"
+      },
+      "attribute": "multiple",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "opened",
+      "method": "openHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -1,22 +1,55 @@
 :host {
   display: block;
 }
-:host .ptc-checkbox icon-asset {
-  vertical-align: middle;
+:host .ptc-checkbox {
+  display: block;
+  position: relative;
+  user-select: none;
+  cursor: pointer;
+  font-family: "Raleway";
+  font-style: normal;
+  color: var(--color-gray-10);
+  padding-left: var(--spacing-lg);
+  font-weight: var(--ptc-font-weight-regular);
+  font-size: var(--ptc-font-size-x-small);
+  line-height: var(--ptc-line-height-dense);
+}
+:host .ptc-checkbox input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+:host .ptc-checkbox .check {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 1.375rem;
+  width: 1.375rem;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-gray-07);
+  box-sizing: border-box;
+  border-radius: 0.4rem;
 }
-:host .ptc-checkbox .ptc-checkbox-label {
-  vertical-align: middle;
-  margin-left: 0.5rem;
+:host .ptc-checkbox .check .mark {
+  position: absolute;
+  transition: opacity ease-out 250ms;
+  opacity: 0;
+  left: 3px;
+  top: -2px;
+  width: 1.375rem;
+  height: 1.375rem;
 }
-:host .ptc-checkbox.checked .unchecked-icon {
-  display: none;
+:host .ptc-checkbox input:checked ~ .check {
+  background-color: #1F2024;
 }
-:host .ptc-checkbox.checked .checked-icon {
-  display: inline-block;
+:host .ptc-checkbox input:checked ~ .check .mark {
+  opacity: 1;
 }
-:host .ptc-checkbox.unchecked .unchecked-icon {
-  display: inline-block;
+:host .ptc-checkbox:hover input ~ .check {
+  background-color: #E4E7E9;
 }
-:host .ptc-checkbox.unchecked .checked-icon {
-  display: none;
+:host .ptc-checkbox:hover input:checked ~ .check {
+  background-color: #33353A;
 }

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

@@ -1,30 +1,36 @@
-import { Component, h, Host, Prop, Event, State } from '@stencil/core';
+import { Component, h, Host, Prop, Event, Element } from '@stencil/core';
+import CheckIcon from '../../media/svg-imgs/check-mark.svg';
 export class PtcCheckbox {
   constructor() {
     this.checked = 'unchecked';
-    this.handleClick = () => {
+    this.handleClick = (e) => {
+      let input = this.host.shadowRoot.querySelector('input');
+      let parameter = {
+        event: e,
+        sender: input,
+        value: this.value,
+        checked: this.checked
+      };
       if (this.checked == 'unchecked') {
         this.checked = 'checked';
       }
       else {
         this.checked = 'unchecked';
       }
+      this.checkedChanged.emit(parameter);
     };
   }
+  componentDidLoad() {
+    let input = this.host.shadowRoot.querySelector('input');
+    input.checked = this.checked == 'checked';
+  }
   render() {
-    const classMap = this.getCssClassMap();
     return (h(Host, null,
-      h("div", { class: classMap, onClick: this.handleClick },
-        h("icon-asset", { type: "solid", size: "large", name: "check-square", class: "checked-icon" }),
-        h("icon-asset", { type: "solid", size: "large", name: "square", color: "white", class: "unchecked-icon" }),
-        h("span", { class: "ptc-checkbox-label" },
-          h("slot", null)))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-checkbox']: true,
-      [this.checked]: true
-    };
+      h("label", { class: "ptc-checkbox", onClick: (e) => this.handleClick(e) },
+        h("slot", null),
+        h("input", { type: "checkbox", name: this.inputName, value: this.value }),
+        h("span", { class: "check" },
+          h("span", { class: "mark", innerHTML: CheckIcon })))));
   }
   static get is() { return "ptc-checkbox"; }
   static get encapsulation() { return "shadow"; }
@@ -37,7 +43,7 @@ export class PtcCheckbox {
   static get properties() { return {
     "checked": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "'checked' | 'unchecked'",
         "resolved": "\"checked\" | \"unchecked\"",
@@ -52,14 +58,45 @@ export class PtcCheckbox {
       "attribute": "checked",
       "reflect": false,
       "defaultValue": "'unchecked'"
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "inputName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "input-name",
+      "reflect": false
     }
   }; }
-  static get states() { return {
-    "selectedItem": {}
-  }; }
   static get events() { return [{
-      "method": "clickedItem",
-      "name": "clickedItem",
+      "method": "checkedChanged",
+      "name": "checkedChanged",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -73,4 +110,5 @@ export class PtcCheckbox {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "host"; }
 }

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

@@ -14,7 +14,6 @@
 }
 
 .content-wrapper {
-  padding: 3rem;
   font-family: Raleway;
   font-size: 16px;
   font-weight: 400;
@@ -36,4 +35,28 @@
 }
 .content-wrapper.x-large {
   box-shadow: var(--ptc-shadow-x-large);
+}
+.content-wrapper.spacing-xx-small {
+  padding: var(--ptc-element-spacing-01);
+}
+.content-wrapper.spacing-x-small {
+  padding: var(--ptc-element-spacing-02);
+}
+.content-wrapper.spacing-small {
+  padding: var(--ptc-element-spacing-03);
+}
+.content-wrapper.spacing-medium {
+  padding: var(--ptc-element-spacing-04);
+}
+.content-wrapper.spacing-large {
+  padding: var(--ptc-element-spacing-05);
+}
+.content-wrapper.spacing-x-large {
+  padding: var(--ptc-element-spacing-06);
+}
+.content-wrapper.spacing-xx-large {
+  padding: var(--ptc-element-spacing-07);
+}
+.content-wrapper.spacing-xxx-large {
+  padding: var(--ptc-element-spacing-08);
 }

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

@@ -7,6 +7,7 @@ export class PtcContainer {
     this.backgroundColor = 'white';
     this.elevation = 'small';
     this.containerType = 'normal';
+    this.spacing = 'xxx-large';
   }
   render() {
     const classMap = this.getCssClassMap();
@@ -25,10 +26,12 @@ export class PtcContainer {
     }
   }
   getCssClassMap() {
+    const spacing = `spacing-${this.spacing}`;
     return {
       ['content-wrapper']: true,
       [this.backgroundColor]: true,
-      [this.elevation]: true
+      [this.elevation]: true,
+      [spacing]: true
     };
   }
   static get is() { return "ptc-container"; }
@@ -93,6 +96,24 @@ export class PtcContainer {
       "attribute": "container-type",
       "reflect": false,
       "defaultValue": "'normal'"
+    },
+    "spacing": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xxx-large' | 'xxx-large'",
+        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-small\" | \"xxx-large\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "spacing",
+      "reflect": false,
+      "defaultValue": "'xxx-large'"
     }
   }; }
 }