@ptcwebops/ptcw-design 1.0.5 → 1.0.7

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

@@ -1,120 +1,120 @@
-import { h, Host } from '@stencil/core';
-export class PtcContainer {
-  constructor() {
-    this.backgroundColor = 'white';
-    this.elevation = 'small';
-    this.containerType = 'normal';
-    this.spacing = 'xxx-large';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: this.getContainerClass() }, h("div", { class: classMap }, h("slot", null))));
-  }
-  getContainerClass() {
-    switch (this.containerType) {
-      case 'large':
-        return 'ptc-container-lg';
-      case 'none':
-        return undefined;
-      default:
-        return 'ptc-container';
-    }
-  }
-  getCssClassMap() {
-    const spacing = `spacing-${this.spacing}`;
-    return {
-      ['content-wrapper']: true,
-      [this.backgroundColor]: true,
-      [this.elevation]: true,
-      [spacing]: true
-    };
-  }
-  static get is() { return "ptc-container"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-container.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-container.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "backgroundColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'white' | 'gray'",
-          "resolved": "\"gray\" | \"white\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Theme"
-        },
-        "attribute": "background-color",
-        "reflect": false,
-        "defaultValue": "'white'"
-      },
-      "elevation": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'x-small' | 'small' | 'medium' | 'large' | 'x-large'",
-          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "elevation",
-        "reflect": false,
-        "defaultValue": "'small'"
-      },
-      "containerType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'normal' | 'large' | 'none'",
-          "resolved": "\"large\" | \"none\" | \"normal\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "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'"
-      }
-    };
-  }
-}
+import { h, Host } from '@stencil/core';
+export class PtcContainer {
+  constructor() {
+    this.backgroundColor = 'white';
+    this.elevation = 'small';
+    this.containerType = '';
+    this.spacing = 'xxx-large';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: this.getContainerClass() }, h("div", { class: classMap }, h("slot", null))));
+  }
+  getContainerClass() {
+    switch (this.containerType) {
+      case 'large':
+        return 'ptc-container-lg';
+      case 'none':
+        return undefined;
+      default:
+        return 'ptc-container';
+    }
+  }
+  getCssClassMap() {
+    const spacing = `spacing-${this.spacing}`;
+    return {
+      ['content-wrapper']: true,
+      [this.backgroundColor]: true,
+      [this.elevation]: true,
+      [spacing]: true
+    };
+  }
+  static get is() { return "ptc-container"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-container.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-container.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "backgroundColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'white' | 'gray'",
+          "resolved": "\"gray\" | \"white\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme"
+        },
+        "attribute": "background-color",
+        "reflect": false,
+        "defaultValue": "'white'"
+      },
+      "elevation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'x-small' | 'small' | 'medium' | 'large' | 'x-large'",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "elevation",
+        "reflect": false,
+        "defaultValue": "'small'"
+      },
+      "containerType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'large' | 'none' | ''",
+          "resolved": "\"\" | \"large\" | \"none\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "container-type",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "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'"
+      }
+    };
+  }
+}

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

@@ -1,190 +1,224 @@
-import { Host, h } from '@stencil/core';
-export class PtcDate {
-  constructor() {
-    this.year = 1900;
-    this.month = 0;
-    this.day = 1;
-    this.country = 'en-US';
-    this.dateString = undefined;
-    this.dateColor = undefined;
-    this.dateStyles = undefined;
-    this.dataSize = 'small';
-  }
-  render() {
-    // const newDate = new Date(this.year, this.month, this.day);
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.dateStyles && h("style", null, this.dateStyles), h("span", { part: "part-ptc-date" }, this.getDate().toLocaleDateString(this.country, { year: 'numeric', month: 'short', day: 'numeric' }))));
-  }
-  getCssClassMap() {
-    return {
-      [this.dateColor]: !!this.dateColor ? true : false,
-      [this.dataSize]: !!this.dataSize ? true : false,
-    };
-  }
-  getDate() {
-    if (this.dateString) {
-      let newDate = new Date(this.dateString.replace(/-/g, '/'));
-      return newDate;
-    }
-    else {
-      return new Date(this.year, this.month - 1, this.day);
-    }
-  }
-  static get is() { return "ptc-date"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-date.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-date.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "year": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Year"
-        },
-        "attribute": "year",
-        "reflect": false,
-        "defaultValue": "1900"
-      },
-      "month": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Month\nAn integer between 1 (January) and 12 (December) representing the month.If omitted, defaults to 0."
-        },
-        "attribute": "month",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "day": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Day\nAn integer between 1 and 31 representing the day of the month. If omitted, defaults to 1."
-        },
-        "attribute": "day",
-        "reflect": false,
-        "defaultValue": "1"
-      },
-      "country": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Country\nexamples: en-US, zh-CN, zh-TW, fr-FR, ja-JP, ru-RU, de-DE, ko-KR, it-IT, es-ES"
-        },
-        "attribute": "country",
-        "reflect": false,
-        "defaultValue": "'en-US'"
-      },
-      "dateString": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Date\nexamples: 2000-1-1 or 2000/01/01"
-        },
-        "attribute": "date-string",
-        "reflect": false
-      },
-      "dateColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'white' | 'primary-grey'",
-          "resolved": "\"primary-grey\" | \"white\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Date Color"
-        },
-        "attribute": "date-color",
-        "reflect": false
-      },
-      "dateStyles": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Injected styles"
-        },
-        "attribute": "date-styles",
-        "reflect": false
-      },
-      "dataSize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'medium' | 'small'",
-          "resolved": "\"medium\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Date Font Size"
-        },
-        "attribute": "data-size",
-        "reflect": false,
-        "defaultValue": "'small'"
-      }
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcDate {
+  constructor() {
+    this.year = 1900;
+    this.month = 0;
+    this.day = 1;
+    this.country = 'en-US';
+    this.dateString = undefined;
+    this.dateColor = undefined;
+    this.dateStyles = undefined;
+    this.dataSize = 'small';
+    this.formatOptions = undefined;
+  }
+  render() {
+    // const newDate = new Date(this.year, this.month, this.day);
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, this.dateStyles && h("style", null, this.dateStyles), h("span", { part: "part-ptc-date" }, this.getDate().toLocaleDateString(this.country, this.getOptions()))));
+  }
+  getCssClassMap() {
+    return {
+      [this.dateColor]: !!this.dateColor ? true : false,
+      [this.dataSize]: !!this.dataSize ? true : false,
+    };
+  }
+  getOptions() {
+    let result = { year: 'numeric', month: 'short', day: 'numeric' };
+    if (this.formatOptions) {
+      try {
+        var json = JSON.parse(this.formatOptions);
+        if (json) {
+          result = json;
+        }
+      }
+      catch (e) {
+        debugger;
+        console.log(e);
+      }
+    }
+    return result;
+  }
+  getDate() {
+    if (this.dateString) {
+      let newDate = new Date(this.dateString.replace(/-/g, '/'));
+      return newDate;
+    }
+    else {
+      return new Date(this.year, this.month - 1, this.day);
+    }
+  }
+  static get is() { return "ptc-date"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-date.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-date.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "year": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Year"
+        },
+        "attribute": "year",
+        "reflect": false,
+        "defaultValue": "1900"
+      },
+      "month": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Month\r\nAn integer between 1 (January) and 12 (December) representing the month.If omitted, defaults to 0."
+        },
+        "attribute": "month",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "day": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Day\r\nAn integer between 1 and 31 representing the day of the month. If omitted, defaults to 1."
+        },
+        "attribute": "day",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "country": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Country\r\nexamples: en-US, zh-CN, zh-TW, fr-FR, ja-JP, ru-RU, de-DE, ko-KR, it-IT, es-ES"
+        },
+        "attribute": "country",
+        "reflect": false,
+        "defaultValue": "'en-US'"
+      },
+      "dateString": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Date\r\nexamples: 2000-1-1 or 2000/01/01"
+        },
+        "attribute": "date-string",
+        "reflect": false
+      },
+      "dateColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'white' | 'primary-grey'",
+          "resolved": "\"primary-grey\" | \"white\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Date Color"
+        },
+        "attribute": "date-color",
+        "reflect": false
+      },
+      "dateStyles": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Injected styles"
+        },
+        "attribute": "date-styles",
+        "reflect": false
+      },
+      "dataSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'medium' | 'small'",
+          "resolved": "\"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Date Font Size"
+        },
+        "attribute": "data-size",
+        "reflect": false,
+        "defaultValue": "'small'"
+      },
+      "formatOptions": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Custom object for formatting date e.i. { weekday: \"long\",  year: \"numeric\",  month: \"long\",  day: \"numeric\" }"
+        },
+        "attribute": "format-options",
+        "reflect": false
+      }
+    };
+  }
+}