@rebilly/instruments 3.0.0-beta.0 → 3.1.2-beta.0

package/dist/style/utils/color-values.js

@@ -1,58 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.alphaColor = alphaColor;
-exports.lighten = exports.darken = exports.mutedBorderColor = exports.mutedTextColor = exports.colorValues = void 0;
-
-var _values = _interopRequireDefault(require("values.js"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const colorValues = color => new _values.default(color);
-
-exports.colorValues = colorValues;
-
-function alphaColor(color, alphaValue = 1) {
-  if (color === null) {
-    return color;
-  }
-
-  const _alphaColor = colorValues(color);
-
-  _alphaColor.alpha = alphaValue;
-  return _alphaColor.rgbString();
-}
-
-const mutedTextColor = color => alphaColor(color, 0.6);
-
-exports.mutedTextColor = mutedTextColor;
-
-const mutedBorderColor = color => alphaColor(color, 0.25);
-
-exports.mutedBorderColor = mutedBorderColor;
-
-const darken = (color, percent) => {
-  if (color === null) {
-    return color;
-  }
-
-  const _color = colorValues(color);
-
-  return _color.shade(percent).hexString();
-};
-
-exports.darken = darken;
-
-const lighten = (color, percent) => {
-  if (color === null) {
-    return color;
-  }
-
-  const _color = colorValues(color);
-
-  return _color.tint(percent).hexString();
-};
-
-exports.lighten = lighten;

package/dist/style/utils/remove-empty-null.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _postcss = _interopRequireDefault(require("postcss"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = _postcss.default.plugin('postcss-remove-empty-null', () => root => {
-  root.walkDecls(decl => {
-    if ((decl.value === '\'\'' || decl.value === '""' || decl.value.includes('null')) && decl.prop !== 'content') {
-      decl.remove();
-    }
-  });
-});
-
-exports.default = _default;

package/dist/style/vendor/framepay.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.framepayStyle = void 0;
-
-const framepayStyle = () => `
-    .rebilly-instruments-framepay .rebilly-framepay {
-      min-height: var(--rebilly-spacings-form-element-min-height);
-      border: var(--rebilly-inputBorder);
-      margin-bottom: 0;
-      background: var(--rebilly-inputColorBackground);
-      border-radius: var(--rebilly-inputBorderRadius);
-      box-shadow: var(--rebilly-inputBoxShadow);
-    }
-
-    .rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-focus {
-      background: var(--rebilly-inputFocusColorBackground);
-      border: var(--rebilly-inputFocusBorder);
-      border-radius: var(--rebilly-inputFocusBorderRadius);
-      box-shadow: var(--rebilly-inputFocusBoxShadow);
-    }
-
-    .rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-invalid {
-      border-color: var(--rebilly-colorDanger);
-      box-shadow: none;
-    }
-
-    .rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-digital-wallet {
-      min-height: auto;
-      border: none;
-      margin: 0;
-    }
-  `;
-
-exports.framepayStyle = framepayStyle;

package/dist/style/vendor/postmate.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.postmateStyle = void 0;
-
-const postmateStyle = () => `
-    .rebilly-instruments-iframe {
-      border: none;
-      width: 100%;
-      min-height: var(--rebilly-spacings-form-element-min-height);
-      transition: all 0.2s ease;
-    }
-  `;
-
-exports.postmateStyle = postmateStyle;

package/dist/style/views/confirmation.js

@@ -1,85 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.confirmation = void 0;
-
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the confirmation view.
-// -----------------------------------------------------------------------------
-const confirmation = () => `
-  /**
-  * Confirmation
-  */
-  .rebilly-instruments-confirmation {
-    padding: 2px;
-  }
-
-  .rebilly-instruments-confirmation-go-back-link {
-    display: inline-block;
-    margin-bottom: var(--rebilly-spacings-base);
-    margin-left: calc(var(--rebilly-spacings-xs) * -1);
-  }
-
-  .rebilly-instruments-confirmation-address-title {
-    display: flex;
-    justify-content: flex-start;
-  }
-
-  .rebilly-instruments-confirmation-address-title .rebilly-instruments-link {
-    margin-left: var(--rebilly-spacings-s);
-  }
-
-  .rebilly-instruments-confirmation-address-actions {
-    margin-top: var(--rebilly-spacings-base);
-    display: flex;
-  }
-
-  .rebilly-instruments-confirmation-address-actions :first-child {
-    margin: 0 var(--rebilly-spacings-xs) 0 0;
-  }
-
-  .rebilly-instruments-confirmation-address-actions :last-child {
-    margin: 0 0 0 var(--rebilly-spacings-xs);
-  }
-
-  .rebilly-instruments-confirmation-payment-method {
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 26px;
-    margin: 0 0 var(--rebilly-spacings-l);
-  }
-
-  .rebilly-instruments-confirmation-payment-method figure {
-    margin: 0 var(--rebilly-spacings-2xs) 0 0;
-    height: 26px;
-    padding: 0;
-  }
-
-  .rebilly-instruments-confirmation-payment-method figure img {
-    width: 42px;
-    border-radius: 4px;
-  }
-
-  .rebilly-instruments-confirmation-payment-method-brand,
-  .rebilly-instruments-confirmation-payment-method-exp,
-  .rebilly-instruments-confirmation-payment-method-last4 {
-    display: inline-block;
-  }
-
-  .rebilly-instruments-confirmation-payment-method-brand {
-    margin: 0 0 0 var(--rebilly-spacings-s);
-  }
-
-  .rebilly-instruments-confirmation-payment-method-last4 {
-    margin: 0 var(--rebilly-spacings-s);
-  }
-
-  .rebilly-instruments-confirmation-payment-method-exp {
-    color: var(--rebilly-colorMutedText);
-  }
-`;
-
-exports.confirmation = confirmation;

package/dist/style/views/index.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.views = void 0;
-
-var _summary = require("./summary");
-
-var _methodSelector = require("./method-selector");
-
-var _confirmation = require("./confirmation");
-
-var _result = require("./result");
-
-var _modal = require("./modal");
-
-// Order of components matters for style cascade
-const views = theme => `
-  /* Views
-  ------------------------------------------------------------ */
-    ${(0, _summary.summary)(theme)}
-    ${(0, _methodSelector.methodSelector)(theme)}
-    ${(0, _confirmation.confirmation)(theme)}
-    ${(0, _result.result)(theme)}
-    ${(0, _modal.modal)(theme)}
-  `;
-
-exports.views = views;

package/dist/style/views/method-selector.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.methodSelector = void 0;
-
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the selector view.
-// -----------------------------------------------------------------------------
-const methodSelector = () => `
-  /**
-  * Method selector
-  */
-  .rebilly-instruments-method-selector.has-express-compact {
-    padding-top: var(--rebilly-spacings-s);
-  }
-`;
-
-exports.methodSelector = methodSelector;

package/dist/style/views/modal.js

@@ -1,93 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.modal = void 0;
-
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the modal view.
-// -----------------------------------------------------------------------------
-const modal = () => `
-  /**
-  * Modal
-  */
-
-  .rebilly-instruments-modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    z-index: 1055;
-    padding: 30px;
-    width:  100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    transition: all 0.12s ease-in-out;
-    background-color: rgba(0,0,0,0.7);
-    opacity: 0
-  }
-
-  .rebilly-instruments-modal-overlay.is-visible {
-    opacity: 1;
-  }
-
-  .rebilly-instruments-modal-container {
-    transition: all .24s ease-in-out;
-    position: relative;
-    max-width: 800px;
-    background: var(--rebilly-colorBackground);
-    margin: 50px auto 20px;
-    box-shadow: 0 19px 38px rgba(0,0,0,0.20), 0 15px 12px rgba(0,0,0,0.12);
-    border-radius: 4px;
-    transform: translateY(-50px);
-    opacity: 0;
-  }
-
-  .rebilly-instruments-modal-container.is-visible {
-    transform: translateY(0);
-    opacity: 1;
-  }
-
-  .rebilly-instruments-modal-container.is-redirect {
-    max-width: 60vw;
-    width: auto;
-  }
-
-  .rebilly-instruments-modal-content {
-    transition: all .15s;
-    padding: 20px;
-    overflow: hidden;
-    background-color: var(--rebilly-colorBackground);
-    text-align: center;
-    border-radius: 4px;
-  }
-
-  .rebilly-instruments-modal-content .rebilly-instruments-iframe {
-    transition: all .15s;
-    height: auto;
-    min-height: 360px;
-  }
-
-  .rebilly-instruments-modal-container.is-redirect .rebilly-instruments-modal-content {
-    padding: 0;
-  }
-
-  .rebilly-instruments-modal-close {
-    position: absolute;
-    width: 30px;
-    height: 30px;
-    top: -40px;
-    right: 0;
-    fill: #FFF;
-    cursor: pointer;
-  }
-  
-  .rebilly-instruments-modal-close:hover{
-    color: #000;
-  }
-`;
-
-exports.modal = modal;

package/dist/style/views/result.js

@@ -1,61 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.result = void 0;
-
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the result view.
-// -----------------------------------------------------------------------------
-const result = () => `
-  /**
-  * Result
-  */
-  .rebilly-instruments-results .rebilly-instruments-h1 {
-    text-align: center;
-    margin: 0;
-  }
-
-  .rebilly-instruments-results-icon {
-    width: 160px;
-    margin: 0 auto var(--rebilly-spacings-base) auto;
-    display: block;
-  }
-
-  .rebilly-instruments-results-icon g {
-    stroke: var(--rebilly-colorPrimary);
-  }
-
-  .rebilly-instruments-results-icon.is-error g {
-    stroke: var(--rebilly-colorDanger);
-  }
-
-  .rebilly-instruments-results-icon path {
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-
-  .rebilly-instruments-results-icon path.circle {
-    stroke-dasharray: 350;
-    stroke-dashoffset: 0;
-    animation: 0.6s cubic-bezier(1.0, 0.5, 0.8, 1.0) 1 rebillyDashResultIcon;
-  }
-
-  .rebilly-instruments-results-icon path.mark {
-    stroke-dasharray: 350;
-    stroke-dashoffset: 0;
-    animation: 1s cubic-bezier(1.0, 0.5, 0.8, 1.0) 1 rebillyDashResultIcon;
-  }
-
-  @keyframes rebillyDashResultIcon {
-    from {
-        stroke-dashoffset: 350;
-    }
-    to {
-        stroke-dashoffset: 0;
-    }
-  }
-`;
-
-exports.result = result;

package/dist/style/views/summary.js

@@ -1,127 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.summary = void 0;
-
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the summary view.
-// -----------------------------------------------------------------------------
-const summary = () => `
-  /**
-  * Summary
-  */
-  .rebilly-instruments-summary-line-item {
-    border-bottom: 1px solid var(--rebilly-colorMutedBorder);
-    padding: var(--rebilly-spacings-s) 0;
-    display: flex;
-    align-items: center;
-    position: relative;
-  }
-
-  .rebilly-instruments-summary-line-item:first-child {
-    padding-top: 0;
-  }
-
-  .rebilly-instruments-summary-line-item-figure {
-    margin: 0 var(--rebilly-spacings-s) 0 0;
-    flex: 0 0 auto;
-    width: 48px;
-    height: 48px;
-    border-radius: var(--rebilly-borderRadius);
-    border: 1px solid var(--rebilly-colorMutedBorder);
-    overflow: hidden;
-  }
-
-  .rebilly-instruments-summary-line-item-figure img {
-    width: 100%;
-  }
-
-  .rebilly-instruments-summary-line-item-synopsis {
-    flex: 1 2 auto;
-  }
-
-  .rebilly-instruments-summary-line-item-synopsis-title {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .rebilly-instruments-summary-line-item-synopsis-description {
-    color: var(--rebilly-colorMutedText);
-    margin: 0;
-    font-size: calc(var(--rebilly-fontSizeBase) * 0.875);
-    line-height: 1;
-  }
-
-  .rebilly-instruments-summary-line-item-price-breakdown {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--rebilly-colorMutedText);
-    margin: 0 0 0 var(--rebilly-spacings-s);
-  }
-
-  .rebilly-instruments-summary-line-item-price-breakdown .rebilly-instruments-icon {
-    fill: var(--rebilly-colorMutedText);
-  }
-
-  .rebilly-instruments-summary-line-item-price-breakdown-unit-price {
-    color: var(--rebilly-colorText);
-  }
-
-  .rebilly-instruments-summary-breakdown table {
-    width: 100%;
-    margin: var(--rebilly-spacings-xs) 0;
-    color: inherit;
-  }
-
-  .rebilly-instruments-summary-breakdown table colgroup col:first-child {
-    width: 85%;
-  }
-
-  .rebilly-instruments-summary-breakdown table colgroup col {
-    width: 15%;
-  }
-
-  .rebilly-instruments-summary-breakdown table tr td {
-    text-align: right;
-  }
-
-  .rebilly-instruments-summary-breakdown table tr td:first-child {
-    padding-right: var(--rebilly-spacings-s);
-    font-weight: 500;
-  }
-
-  .rebilly-instruments-summary-breakdown table {
-    border-bottom: 1px solid var(--rebilly-colorMutedBorder);
-    padding-bottom: var(--rebilly-spacings-xs);
-  }
-
-  .rebilly-instruments-summary-breakdown-total {
-    padding-top: var(--rebilly-spacings-xs);
-    display: flex;
-    align-items: center;
-  }
-
-  .rebilly-instruments-summary-breakdown-total p {
-    margin: var(--rebilly-spacings-s) 0;
-  }
-
-  .rebilly-instruments-summary-breakdown-total-amount {
-      flex: 1 2 80%;
-      font-size: calc(var(--rebilly-fontSizeBase) * 1.5);
-      font-weight: 500;
-      text-align: right;
-      font-weight: bold;
-  }
-
-  .rebilly-instruments-summary-breakdown-total-amount-currency {
-    font-size: var(--rebilly-fontSizeBase);
-    font-weight: normal;
-    color: var(--rebilly-colorMutedText);
-    margin-right: var(--rebilly-spacings-s);
-  }
-`;
-
-exports.summary = summary;

package/dist/utils/add-dom-element.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = addDOMElement;
-
-function addDOMElement({
-  element = 'div',
-  attributes = {},
-  content = null,
-  target = 'body',
-  insertMethod = 'append'
-} = {}) {
-  const ELEMENT = document.createElement(element);
-  const ELEMENT_ATTRIBUTES = Object.entries(attributes);
-  ELEMENT_ATTRIBUTES.forEach(([attribute, value]) => {
-    ELEMENT.setAttribute(attribute, value);
-  });
-
-  if (content) {
-    ELEMENT.innerHTML = content;
-  }
-
-  document[target][insertMethod](ELEMENT);
-}

package/dist/utils/format-currency.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = formatCurrency;
-
-function formatCurrency(number, currency) {
-  const converToNumber = Number(number);
-  if (Number.isNaN(converToNumber) || number === null) return '-';
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: currency || 'USD'
-  }).format(number);
-}

package/dist/utils/has-valid-css-selector.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = hasValidCSSSelector;
-
-function hasValidCSSSelector(selector) {
-  const REGEX_CSS_SELECTOR = /([.#][_a-z]+[_a-z0-9-:\\]*)/gi;
-  return typeof selector === 'string' && selector.match(REGEX_CSS_SELECTOR);
-}

package/dist/utils/index.js

@@ -1,55 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "addDOMElement", {
-  enumerable: true,
-  get: function () {
-    return _addDomElement.default;
-  }
-});
-Object.defineProperty(exports, "processPropertyAsDOMElement", {
-  enumerable: true,
-  get: function () {
-    return _processPropertyAsDomElement.default;
-  }
-});
-Object.defineProperty(exports, "isDOMElement", {
-  enumerable: true,
-  get: function () {
-    return _isDomElement.default;
-  }
-});
-Object.defineProperty(exports, "hasValidCSSSelector", {
-  enumerable: true,
-  get: function () {
-    return _hasValidCssSelector.default;
-  }
-});
-Object.defineProperty(exports, "formatCurrency", {
-  enumerable: true,
-  get: function () {
-    return _formatCurrency.default;
-  }
-});
-Object.defineProperty(exports, "sleep", {
-  enumerable: true,
-  get: function () {
-    return _sleep.default;
-  }
-});
-
-var _addDomElement = _interopRequireDefault(require("./add-dom-element"));
-
-var _processPropertyAsDomElement = _interopRequireDefault(require("./process-property-as-dom-element"));
-
-var _isDomElement = _interopRequireDefault(require("./is-dom-element"));
-
-var _hasValidCssSelector = _interopRequireDefault(require("./has-valid-css-selector"));
-
-var _formatCurrency = _interopRequireDefault(require("./format-currency"));
-
-var _sleep = _interopRequireDefault(require("./sleep"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/utils/is-dom-element.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = isDOMElement;
-
-function isDOMElement(element) {
-  return element instanceof Element || element instanceof HTMLDocument;
-}