@malga-checkout/core
Version:
Core components for Malga Checkout
30 lines (26 loc) • 4.85 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-2a32ffa8.js';
const checkoutAccordionCss = "@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-accordion__header>span{font-family:var(--malga-checkout-typography-family);font-size:12px;font-style:normal;font-weight:normal}.checkout-accordion__container{display:flex;flex-direction:column;padding:var(--malga-checkout-spacing-sm);border-radius:var(--malga-checkout-spacing-xs);background:var(--malga-checkout-color-accent-light);box-shadow:0px 0px 4px rgba(0, 0, 0, 0.1)}.checkout-accordion__container--full-width{width:100%}.checkout-accordion__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;font-family:var(--malga-checkout-typography-family);font-size:var(--malga-checkout-spacing-sm);font-weight:bold;color:var(--malga-checkout-color-brand-middle)}.checkout-accordion__header>button{display:flex;justify-content:center;align-items:center;cursor:pointer;background:transparent;border:none;opacity:0;transition:opacity 0.5s ease;padding:0}.checkout-accordion__header>button>checkout-icon>i>svg{color:var(--malga-checkout-color-brand-middle)}.checkout-accordion__header>span{display:flex;flex-direction:row;align-items:center;color:var(--malga-checkout-color-grey-light);fill:var(--malga-checkout-color-grey-light)}.checkout-accordion__header>span>checkout-icon{margin-right:var(--malga-checkout-spacing-xs)}.checkout-accordion__header--editable>button{opacity:1}.checkout-accordion__content{height:0px;overflow:hidden;margin-top:0}.checkout-accordion__content--opened{height:100%;margin-top:var(--malga-checkout-spacing-sm)}";
const CheckoutAccordion = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.expandClick = createEvent(this, "expandClick", 7);
this.fullWidth = false;
this.handleExpandClick = () => {
this.expandClick.emit();
};
}
render() {
return (h(Host, { "aria-expanded": this.opened, class: {
'checkout-accordion__container': true,
'checkout-accordion__container--full-width': this.fullWidth,
} }, h("header", { class: {
'checkout-accordion__header': true,
'checkout-accordion__header--editable': this.isEditable,
} }, this.label, !this.opened && this.isEditable && (h("button", { type: "button", onClick: this.handleExpandClick }, h("checkout-icon", { icon: "edit" }))), this.opened && (h("slot", { name: "accordion-header-additional-information" }))), h("div", { class: {
'checkout-accordion__content': true,
'checkout-accordion__content--opened': this.opened,
}, "aria-hidden": this.opened }, h("slot", null))));
}
};
CheckoutAccordion.style = checkoutAccordionCss;
export { CheckoutAccordion as checkout_accordion };