@ptcwebops/ptcw-design 0.4.6 → 0.4.7

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

@@ -2,54 +2,54 @@ import { r as registerInstance, h, H as Host } from './index-357497dc.js';
 
 const ptcDateCss = ":host{display:block}:host(.small) span{font-size:var(--ptc-font-size-small)}:host(.medium) span{font-size:var(--ptc-font-size-medium)}:host(.primary-grey){color:var(--color-primary-gray-new)}:host(.white) span{color:var(--color-white)}:host(.date-m-top){margin-top:4px}";
 
-let PtcDate = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Year
-     */
-    this.year = 1900;
-    /**
-     * Month
-     * An integer between 1 (January) and 12 (December) representing the month.If omitted, defaults to 0.
-     */
-    this.month = 0;
-    /**
-     * Day
-     * An integer between 1 and 31 representing the day of the month. If omitted, defaults to 1.
-     */
-    this.day = 1;
-    /**
-     * Country
-     * examples: en-US, zh-CN, zh-TW, fr-FR, ja-JP, ru-RU, de-DE, ko-KR, it-IT, es-ES
-     */
-    this.country = 'en-US';
-    /**
-     * Date Font Size
-     */
-    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);
-    }
-  }
-};
+let PtcDate = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Year
+     */
+    this.year = 1900;
+    /**
+     * Month
+     * An integer between 1 (January) and 12 (December) representing the month.If omitted, defaults to 0.
+     */
+    this.month = 0;
+    /**
+     * Day
+     * An integer between 1 and 31 representing the day of the month. If omitted, defaults to 1.
+     */
+    this.day = 1;
+    /**
+     * Country
+     * examples: en-US, zh-CN, zh-TW, fr-FR, ja-JP, ru-RU, de-DE, ko-KR, it-IT, es-ES
+     */
+    this.country = 'en-US';
+    /**
+     * Date Font Size
+     */
+    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);
+    }
+  }
+};
 PtcDate.style = ptcDateCss;
 
 export { PtcDate as ptc_date };

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

@@ -2,14 +2,14 @@ import { r as registerInstance, h, H as Host } from './index-357497dc.js';
 
 const ptcFooterCss = ":host{display:block;background-color:#1c2126}.footer-style{position:relative;bottom:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto;grid-template-areas:\"left lImage\" \"right right\" \"share share\" \"copyright copyright\"}@media screen and (min-width: 992px){.footer-style{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr fit-content(26px);grid-template-areas:\"lImage left right share\" \"copyright copyright copyright copyright\"}}.footer-image{grid-area:lImage}.footer-link-left{grid-area:left}.footer-link-right{grid-area:right}.footer-share{grid-area:share}.footer-copyright{grid-area:copyright}";
 
-let PtcFooter = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, null, h("footer", { class: "footer-style" }, h("div", { class: "footer-image" }, h("slot", { name: "footer-image" })), h("div", { class: "footer-link-left" }, h("slot", { name: "footer-link-left" })), h("div", { class: "footer-link-right" }, h("slot", { name: "footer-link-right" })), h("div", { class: "footer-share" }, h("slot", { name: "footer-share" })), h("div", { class: "footer-copyright" }, h("slot", { name: "footer-copyright" })))));
-  }
-};
+let PtcFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("footer", { class: "footer-style" }, h("div", { class: "footer-image" }, h("slot", { name: "footer-image" })), h("div", { class: "footer-link-left" }, h("slot", { name: "footer-link-left" })), h("div", { class: "footer-link-right" }, h("slot", { name: "footer-link-right" })), h("div", { class: "footer-share" }, h("slot", { name: "footer-share" })), h("div", { class: "footer-copyright" }, h("slot", { name: "footer-copyright" })))));
+  }
+};
 PtcFooter.style = ptcFooterCss;
 
 export { PtcFooter as ptc_footer };

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

@@ -4,110 +4,110 @@ import { r as registerInstance, h, a as getElement } from './index-357497dc.js';
 
 const ptcFormCss = ".sc-ptc-form-h{display:block}";
 
-let PtcForm = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  handleChange(event) {
-    this.inputValue = event.target.value;
-    // if (event.target.validity.typeMismatch) {
-    //   console.log('this element is not valid')
-    // };
-    console.log(this.inputValue);
-  }
-  handleSelect(event) {
-    this.selectValue = event.target.value;
-    console.log(this.selectValue);
-  }
-  componentDidLoad() {
-    // const countryValue = (this.el.shadowRoot.getElementById("contact-country") as HTMLInputElement).value;
-    // console.log(countryValue);
-    //console.log(this.el.shadowRoot.querySelector('form'));
-    window.FormValidation.formValidation(this.el.querySelector('form'), {
-      fields: {
-        firstname: {
-          validators: {
-            notEmpty: {
-              message: '* The first name is required',
-            },
-            regexp: {
-              regexp: /^[a-zA-Z0-9_]+$/,
-              message: '* The username can only consist of alphabetical, number and underscore',
-            },
-          },
-        },
-        lastname: {
-          validators: {
-            notEmpty: {
-              message: '* The last name is required',
-            },
-            regexp: {
-              regexp: /^[a-zA-Z0-9_]+$/,
-              message: '* The username can only consist of alphabetical, number and underscore',
-            },
-          },
-        },
-        email: {
-          validators: {
-            notEmpty: {
-              message: '* Please enter your email',
-            },
-            emailAddress: {
-              message: '* The value is not a valid email address',
-            },
-          },
-        },
-        required: {
-          validators: {
-            notEmpty: {
-              message: '* This field is required',
-            },
-          },
-        },
-        phoneNumber: {
-          validators: {
-            // phone: {
-            //   country: function () {
-            //     return countryValue;
-            //   },
-            //   message: 'The value is not a valid phone number',
-            // },
-            notEmpty: {
-              message: '* phone number is required',
-            },
-          },
-        },
-        postalCode: {
-          validators: {
-            // zipCode: {
-            //     country: function () {
-            //         return countryValue;
-            //     },
-            //     message: 'The value is not a valid postal code',
-            // },
-            notEmpty: {
-              message: '* zipcode is required',
-            },
-          },
-        },
-      },
-      plugins: {
-        message: new FormValidation.plugins.Message({
-          clazz: '...',
-        }),
-        trigger: new FormValidation.plugins.Trigger(),
-        submitButton: new FormValidation.plugins.SubmitButton(),
-        defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
-      },
-    });
-    //fv.revalidateField('phoneNumber')
-  }
-  render() {
-    return (h("form", { id: "loginForm", method: "POST", class: "loginForm" }, h("slot", null), h("button", { type: "submit", class: "btn btn-primary" }, "Login")));
-  }
-  static get assetsDirs() { return ["validation"]; }
-  get el() { return getElement(this); }
-};
+let PtcForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  handleChange(event) {
+    this.inputValue = event.target.value;
+    // if (event.target.validity.typeMismatch) {
+    //   console.log('this element is not valid')
+    // };
+    console.log(this.inputValue);
+  }
+  handleSelect(event) {
+    this.selectValue = event.target.value;
+    console.log(this.selectValue);
+  }
+  componentDidLoad() {
+    // const countryValue = (this.el.shadowRoot.getElementById("contact-country") as HTMLInputElement).value;
+    // console.log(countryValue);
+    //console.log(this.el.shadowRoot.querySelector('form'));
+    window.FormValidation.formValidation(this.el.querySelector('form'), {
+      fields: {
+        firstname: {
+          validators: {
+            notEmpty: {
+              message: '* The first name is required',
+            },
+            regexp: {
+              regexp: /^[a-zA-Z0-9_]+$/,
+              message: '* The username can only consist of alphabetical, number and underscore',
+            },
+          },
+        },
+        lastname: {
+          validators: {
+            notEmpty: {
+              message: '* The last name is required',
+            },
+            regexp: {
+              regexp: /^[a-zA-Z0-9_]+$/,
+              message: '* The username can only consist of alphabetical, number and underscore',
+            },
+          },
+        },
+        email: {
+          validators: {
+            notEmpty: {
+              message: '* Please enter your email',
+            },
+            emailAddress: {
+              message: '* The value is not a valid email address',
+            },
+          },
+        },
+        required: {
+          validators: {
+            notEmpty: {
+              message: '* This field is required',
+            },
+          },
+        },
+        phoneNumber: {
+          validators: {
+            // phone: {
+            //   country: function () {
+            //     return countryValue;
+            //   },
+            //   message: 'The value is not a valid phone number',
+            // },
+            notEmpty: {
+              message: '* phone number is required',
+            },
+          },
+        },
+        postalCode: {
+          validators: {
+            // zipCode: {
+            //     country: function () {
+            //         return countryValue;
+            //     },
+            //     message: 'The value is not a valid postal code',
+            // },
+            notEmpty: {
+              message: '* zipcode is required',
+            },
+          },
+        },
+      },
+      plugins: {
+        message: new FormValidation.plugins.Message({
+          clazz: '...',
+        }),
+        trigger: new FormValidation.plugins.Trigger(),
+        submitButton: new FormValidation.plugins.SubmitButton(),
+        defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+      },
+    });
+    //fv.revalidateField('phoneNumber')
+  }
+  render() {
+    return (h("form", { id: "loginForm", method: "POST", class: "loginForm" }, h("slot", null), h("button", { type: "submit", class: "btn btn-primary" }, "Login")));
+  }
+  static get assetsDirs() { return ["validation"]; }
+  get el() { return getElement(this); }
+};
 PtcForm.style = ptcFormCss;
 
 export { PtcForm as ptc_form };

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

@@ -2,24 +2,24 @@ import { r as registerInstance, h, H as Host } from './index-357497dc.js';
 
 const ptcHeroCss = ":host{display:block;position:relative}:host(.jumbotron) .ptc-hero-wrapper,:host(.footer-cta) .ptc-hero-wrapper{position:relative}:host(.footer-cta) .ptc-hero-wrapper div>*{text-align:center}";
 
-let PtcHero = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Hero Background Image URL
-     */
-    this.bgUrl = undefined;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("div", { class: "ptc-hero-wrapper" }, h("ptc-img", Object.assign({ "image-type": "smart-bg" }, (!!this.bgUrl ? { imgUrl: this.bgUrl } : {}), { "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }), this.heroType == 'jumbotron' ? ([h("ptc-overlay", { "filter-color": "black-1" }), h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (h("ptc-overlay", { "filter-color": "black-3" })) : null, h("slot", null)))));
-  }
-  getCssClassMap() {
-    return {
-      [this.heroType]: this.heroType ? true : false,
-    };
-  }
-};
+let PtcHero = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Hero Background Image URL
+     */
+    this.bgUrl = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("div", { class: "ptc-hero-wrapper" }, h("ptc-img", Object.assign({ "image-type": "smart-bg" }, (!!this.bgUrl ? { imgUrl: this.bgUrl } : {}), { "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }), this.heroType == 'jumbotron' ? ([h("ptc-overlay", { "filter-color": "black-1" }), h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (h("ptc-overlay", { "filter-color": "black-3" })) : null, h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.heroType]: this.heroType ? true : false,
+    };
+  }
+};
 PtcHero.style = ptcHeroCss;
 
 export { PtcHero as ptc_hero };