@justifi/webcomponents 0.0.15 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,40 @@
+### Changelog
+
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
+
+Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+
+#### 0.2.0
+
+> 13 March 2023
+
+- Add BillingForm component poc
+- Add TextInput component
+- Add SelectInput component
+
+#### 0.1.15
+
+> 14 February 2023
+
+- FE-48 Add the LICENSE [`#26`](https://github.com/justifi-tech/web-component-library/pull/26)
+- update PR templates main README, and add changelogs [`#23`](https://github.com/justifi-tech/web-component-library/pull/23)
+- Yarn upgrade [`#22`](https://github.com/justifi-tech/web-component-library/pull/22)
+- Add missing properties to theme [`#21`](https://github.com/justifi-tech/web-component-library/pull/21)
+- Bump decode-uri-component from 0.2.0 to 0.2.2 in /react-library [`#6`](https://github.com/justifi-tech/web-component-library/pull/6)
+- Update examples to include payment method metadata and code comments [`#19`](https://github.com/justifi-tech/web-component-library/pull/19)
+- Check for styleOverrides before attempting to parse [`#18`](https://github.com/justifi-tech/web-component-library/pull/18)
+- Update README files [`#17`](https://github.com/justifi-tech/web-component-library/pull/17)
+- Update READMEs and release new react-library version [`#16`](https://github.com/justifi-tech/web-component-library/pull/16)
+- Allow styleOverrides to be passed into cardForm and bankAccountForm [`#15`](https://github.com/justifi-tech/web-component-library/pull/15)
+- FE-18: Iframe content height reporting [`#14`](https://github.com/justifi-tech/web-component-library/pull/14)
+- Update web component props for `v2` payments-js [`#13`](https://github.com/justifi-tech/web-component-library/pull/13)
+- Fix react components [`#11`](https://github.com/justifi-tech/web-component-library/pull/11)
+- Fix card form component events [`#10`](https://github.com/justifi-tech/web-component-library/pull/10)
+- Eng-2080: Add bank account web component [`#7`](https://github.com/justifi-tech/web-component-library/pull/7)
+- ENG-1960 publish libraries to npmjs.org [`#4`](https://github.com/justifi-tech/web-component-library/pull/4)
+- Package & Publish libraries [`#3`](https://github.com/justifi-tech/web-component-library/pull/3)
+- Restructure project and link react and stencil libraries [`#2`](https://github.com/justifi-tech/web-component-library/pull/2)
+- Terraform and GitHub Actions [`#1`](https://github.com/justifi-tech/web-component-library/pull/1)
+- init [`27806f7`](https://github.com/justifi-tech/web-component-library/commit/27806f7bff97247033800c7743570ebeec4080d7)
+- add: release-it package [`e0b3711`](https://github.com/justifi-tech/web-component-library/commit/e0b371184774dd7dead0243cd645640175d6b87f)
+- initial commit [`c147b58`](https://github.com/justifi-tech/web-component-library/commit/c147b580aaf95eb22ffe6ad9b0217954890dd1d4)

package/changelog-template.hbs

@@ -0,0 +1,41 @@
+{{#each releases}}
+# {{title}}
+[{{isoDate}}]
+
+{{! lit commits with feature: in message, use feature: or Feature: }}
+{{#commit-list
+  commits
+  heading='### Features'
+  message='(feature: )|(Feature: )'
+  exclude='(fix: )|(Fix: )|(break: )|(Break: )'}}
+* {{subject}} ([`{{shorthash}}`]({{href}}))
+{{/commit-list}}
+
+{{! use fix: or Fix: }}
+{{#commit-list
+  commits
+  heading='### Fixes'
+  message='(fix: )|(Fix: )'
+  exclude='(break: )|(Break: )|(Feature: )|(feature: )'}}
+* {{subject}} ([`{{shorthash}}`]({{href}}))
+{{/commit-list}}
+
+{{! use add: or Add: }}
+{{#commit-list
+  commits
+  heading='### Added'
+  message='(add: )|(Add: )'
+  exclude='(break: )|(Break: )|(Feature: )|(feature: )'}}
+* {{subject}} ([`{{shorthash}}`]({{href}}))
+{{/commit-list}}
+
+{{! user break: or Break: }}
+{{#commit-list
+  commits
+  heading='### Breaking changes'
+  message='(break: )|(Break: )'
+  exclude='(fix: )|(Fix: )|(Feature: )|(feature: )'}}
+* {{subject}} ([`{{shorthash}}`]({{href}}))
+{{/commit-list}}
+
+{{/each}}

package/dist/cjs/{index-e1b45289.js → index-3947d225.js}

@@ -313,7 +313,7 @@ const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
 const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     if (oldValue !== newValue) {
         let isProp = isMemberInElement(elm, memberName);
-        memberName.toLowerCase();
+        let ln = memberName.toLowerCase();
         if (memberName === 'class') {
             const classList = elm.classList;
             const oldClasses = parseClassList(oldValue);
@@ -321,12 +321,76 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'style') {
+            // update style attribute, css properties and values
+            {
+                for (const prop in oldValue) {
+                    if (!newValue || newValue[prop] == null) {
+                        if (prop.includes('-')) {
+                            elm.style.removeProperty(prop);
+                        }
+                        else {
+                            elm.style[prop] = '';
+                        }
+                    }
+                }
+            }
+            for (const prop in newValue) {
+                if (!oldValue || newValue[prop] !== oldValue[prop]) {
+                    if (prop.includes('-')) {
+                        elm.style.setProperty(prop, newValue[prop]);
+                    }
+                    else {
+                        elm.style[prop] = newValue[prop];
+                    }
+                }
+            }
+        }
         else if (memberName === 'ref') {
             // minifier will clean this up
             if (newValue) {
                 newValue(elm);
             }
         }
+        else if ((!isProp ) &&
+            memberName[0] === 'o' &&
+            memberName[1] === 'n') {
+            // Event Handlers
+            // so if the member name starts with "on" and the 3rd characters is
+            // a capital letter, and it's not already a member on the element,
+            // then we're assuming it's an event listener
+            if (memberName[2] === '-') {
+                // on- prefixed events
+                // allows to be explicit about the dom event to listen without any magic
+                // under the hood:
+                // <my-cmp on-click> // listens for "click"
+                // <my-cmp on-Click> // listens for "Click"
+                // <my-cmp on-ionChange> // listens for "ionChange"
+                // <my-cmp on-EVENTS> // listens for "EVENTS"
+                memberName = memberName.slice(3);
+            }
+            else if (isMemberInElement(win, ln)) {
+                // standard event
+                // the JSX attribute could have been "onMouseOver" and the
+                // member name "onmouseover" is on the window's prototype
+                // so let's add the listener "mouseover", which is all lowercased
+                memberName = ln.slice(2);
+            }
+            else {
+                // custom event
+                // the JSX attribute could have been "onMyCustomEvent"
+                // so let's trim off the "on" prefix and lowercase the first character
+                // and add the listener "myCustomEvent"
+                // except for the first character, we keep the event name case
+                memberName = ln[2] + memberName.slice(3);
+            }
+            if (oldValue) {
+                plt.rel(elm, memberName, oldValue, false);
+            }
+            if (newValue) {
+                plt.ael(elm, memberName, newValue, false);
+            }
+        }
         else {
             // Set property if it exists and it's not a SVG
             const isComplex = isComplexType(newValue);

package/dist/cjs/justifi-bank-account-form.cjs.entry.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3947d225.js');
+
+const BankAccountForm = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.bankAccountFormReady = index.createEvent(this, "bankAccountFormReady", 7);
+    this.bankAccountFormTokenize = index.createEvent(this, "bankAccountFormTokenize", 7);
+    this.bankAccountFormValidate = index.createEvent(this, "bankAccountFormValidate", 7);
+    this.validationStrategy = undefined;
+    this.styleOverrides = undefined;
+    this.internalStyleOverrides = undefined;
+  }
+  readyHandler(event) {
+    this.bankAccountFormReady.emit(event);
+  }
+  tokenizeHandler(event) {
+    this.bankAccountFormTokenize.emit(event);
+  }
+  validateHandler(event) {
+    this.bankAccountFormValidate.emit(event);
+  }
+  componentWillLoad() {
+    this.parseStyleOverrides();
+  }
+  parseStyleOverrides() {
+    if (this.styleOverrides) {
+      const parsedStyleOverrides = JSON.parse(this.styleOverrides);
+      this.internalStyleOverrides = parsedStyleOverrides;
+    }
+  }
+  async tokenize(...args) {
+    if (!this.childRef) {
+      throw new Error('Cannot call tokenize');
+    }
+    return this.childRef.tokenize(...args);
+  }
+  async validate() {
+    if (!this.childRef) {
+      throw new Error('Cannot call validate');
+    }
+    return this.childRef.validate();
+  }
+  render() {
+    return (index.h("justifi-payment-method-form", { ref: el => {
+        if (el) {
+          this.childRef = el;
+        }
+      }, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
+  }
+  static get watchers() { return {
+    "styleOverrides": ["parseStyleOverrides"]
+  }; }
+};
+
+exports.justifi_bank_account_form = BankAccountForm;