@malga-checkout/core
Version:
Core components for Malga Checkout
49 lines (43 loc) • 5.6 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-ebe81290.js');
const checkoutTypographyCss = "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\"); :root{--malga-checkout-color-page-background:#eef2f6;--malga-checkout-color-brand-accent-light:#79DBD4;--malga-checkout-color-brand-accent-normal:#39BFAD;--malga-checkout-color-brand-clean:#C3F4EF;--malga-checkout-color-brand-light:#79DBD4;--malga-checkout-color-brand-normal:#39BFAD;--malga-checkout-color-brand-middle:#2FAC9B;--malga-checkout-color-brand-dark:#147F70;--malga-checkout-color-grey-light:#666666;--malga-checkout-color-grey-normal:#4D4D4D;--malga-checkout-color-grey-middle:#333333;--malga-checkout-color-grey-dark:#1A1A1A;--malga-checkout-color-grey-darkness:#000000;--malga-checkout-color-accent-light:#ffffff;--malga-checkout-color-accent-normal:#F1F1F1;--malga-checkout-color-accent-middle:#CBCBCB;--malga-checkout-color-warning-light:#FFF8E6;--malga-checkout-color-warning-normal:#F9DF8D;--malga-checkout-color-warning-middle:#FFA400;--malga-checkout-color-warning-dark:#ED3A3D;--malga-checkout-color-modal-success:#00AE42;--malga-checkout-color-modal-error:#ED3A3D;--malga-checkout-color-modal-neutral:#4D4D4D;--malga-checkout-color-disabled:#F9F9F9;--malga-checkout-color-modal-action-button-error:#000000;--malga-checkout-color-modal-action-button-error-hover:#333333;--malga-checkout-color-modal-action-button-success:#000000;--malga-checkout-color-modal-action-button-success-hover:#333333;--malga-checkout-color-modal-action-button-success-font-color:#ffffff;--malga-checkout-color-modal-action-button-error-font-color:#ffffff;--malga-checkout-typography-family:\"Inter\", sans-serif;--malga-checkout-spacing-xxs:4px;--malga-checkout-spacing-xs:8px;--malga-checkout-spacing-sm:16px;--malga-checkout-spacing-default:24px;--malga-checkout-spacing-md:32px;--malga-checkout-spacing-lg:48px;--malga-checkout-spacing-xlg:64px;--malga-checkout-spacing-xxlg:96px;--malga-checkout-size-min-width:250px;--malga-checkout-border-radius-default:4px;--malga-checkout-border-radius-md:6px;--malga-checkout-border-radius-lg:20px;--malga-checkout-transition-slow:0.3s;--malga-checkout-transition-default:0.5s}.checkout-typography--header5{font-family:var(--malga-checkout-typography-family);font-size:24px;font-style:normal;font-weight:normal}.checkout-typography--header6{font-family:var(--malga-checkout-typography-family);font-size:20px;font-style:normal;font-weight:normal}.checkout-typography--subtitle1{font-family:var(--malga-checkout-typography-family);font-size:14px;font-style:normal;font-weight:bold}.checkout-typography--subtitle2{font-family:var(--malga-checkout-typography-family);font-size:12px;font-style:normal;font-weight:bold}.checkout-typography--body1{font-family:var(--malga-checkout-typography-family);font-size:14px;font-style:normal;font-weight:normal}.checkout-typography--body2{font-family:var(--malga-checkout-typography-family);font-size:12px;font-style:normal;font-weight:normal}.checkout-typography--button{font-family:var(--malga-checkout-typography-family);font-size:14px;font-style:normal;font-weight:bold;text-transform:uppercase}.checkout-typography--label{font-family:var(--malga-checkout-typography-family);font-size:12px;font-style:normal;font-weight:normal}.checkout-typography--field{font-family:var(--malga-checkout-typography-family);font-size:16px;font-style:normal;font-weight:normal}.checkout-typography--field,.checkout-typography--label,.checkout-typography--button,.checkout-typography--body2,.checkout-typography--body1,.checkout-typography--subtitle2,.checkout-typography--subtitle1,.checkout-typography--header6,.checkout-typography--header5{font-family:var(--malga-checkout-typography-family);padding:0;margin:0;box-sizing:border-box}.checkout-typography--white{color:var(--malga-checkout-color-accent-light)}.checkout-typography--dark{color:var(--malga-checkout-color-grey-dark)}.checkout-typography--darkness{color:var(--malga-checkout-color-grey-darkness)}.checkout-typography--warning{color:var(--malga-checkout-color-warning-dark)}";
const CheckoutTypography = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.tag = 'p';
this.variation = 'body1';
this.color = 'dark';
this.styles = {};
this.createDynamicClassObject = (list, comparator) => {
const reducedList = list.reduce((accumulator, currentValue) => (Object.assign(Object.assign({}, accumulator), { [`${CheckoutTypography.PREFIX_CLASS}--${currentValue}`]: comparator === currentValue })), {});
return reducedList;
};
this.generateClass = () => {
const variationsClass = this.createDynamicClassObject(CheckoutTypography.VARIATIONS, this.variation);
const colorsClass = this.createDynamicClassObject(CheckoutTypography.COLORS, this.color);
const classObject = Object.assign(Object.assign({}, variationsClass), colorsClass);
return classObject;
};
}
render() {
const Tag = this.tag;
return (index.h(index.Host, null, index.h(Tag, { style: this.styles, class: this.generateClass() }, this.content, index.h("slot", { name: "content" }))));
}
};
CheckoutTypography.PREFIX_CLASS = 'checkout-typography';
CheckoutTypography.VARIATIONS = [
'header5',
'header6',
'header7',
'subtitle1',
'subtitle2',
'body1',
'body2',
'button',
'label',
'field',
];
CheckoutTypography.COLORS = ['white', 'dark', 'warning'];
CheckoutTypography.style = checkoutTypographyCss;
exports.checkout_typography = CheckoutTypography;