@justifi/webcomponents 4.23.1 → 5.0.0-rc-1

package/dist/module/season-interruption-insurance-core.js

@@ -1,22 +1,16 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as formatCurrency } from './utils2.js';
-import { v as validateInsuranceValues, a as insuranceValues, b as insuranceErrors } from './insurance-state.js';
+import { p as processHTML, c as formatCurrency, r as removeAttribute, l as addAttribute } from './utils2.js';
+import { v as validateInsuranceValues, a as insuranceValues, b as insuranceErrors, H as Header2 } from './insurance-state.js';
+import { t as text, e as textDanger } from './parts.js';
 import { S as StyledHost } from './styled-host.js';
-
-const seasonInterruptionInsuranceCoreCss = ":host{display:block}a{color:var(--jfi-body-color) !important}";
-const JustifiSeasonInterruptionInsuranceCoreStyle0 = seasonInterruptionInsuranceCoreCss;
-
-const formCheckInputCss = ".form-check-input,label{cursor:pointer}.form-check-input{background-color:var(--jfi-radio-button-background-color);border-color:var(--jfi-radio-button-border-color)}.form-check-input:checked,.form-check-input:checked:focus{background-color:var(--jfi-radio-button-background-color-selected);border-color:var(--jfi-radio-button-border-color-selected)}.form-check-input:focus{border-color:var(--jfi-radio-button-border-color-focus);box-shadow:var(--jfi-radio-button-box-shadow-focus)}";
-const JustifiSeasonInterruptionInsuranceCoreStyle1 = formCheckInputCss;
-
-const headerCss = ".jfi-header{color:var(--jfi-header-color);border-bottom:var(--jfi-header-border)}";
-const JustifiSeasonInterruptionInsuranceCoreStyle2 = headerCss;
+import './details.js';
+import { d as defineCustomElement$2 } from './form-control-help-text3.js';
+import { d as defineCustomElement$1 } from './form-control-radio2.js';
 
 const SeasonInterruptionInsuranceCore = /*@__PURE__*/ proxyCustomElement(class SeasonInterruptionInsuranceCore extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.insuranceUpdated = createEvent(this, "insurance-updated", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.checkoutId = undefined;
@@ -72,6 +66,14 @@ const SeasonInterruptionInsuranceCore = /*@__PURE__*/ proxyCustomElement(class S
             },
             onSuccess: ({ quote }) => {
                 this.quote = quote;
+                this.quote.product.description = processHTML(this.quote.product.description, [
+                    (html) => removeAttribute(html, 'style'),
+                    (html) => addAttribute(html, 'a', 'part', text)
+                ]);
+                this.quote.product.legal_disclaimer = processHTML(this.quote.product.legal_disclaimer, [
+                    (html) => removeAttribute(html, 'style'),
+                    (html) => addAttribute(html, 'a', 'part', text)
+                ]);
                 insuranceValues[quote.policy_type] = quote.accepted;
                 this.isLoading = false;
             },
@@ -86,8 +88,8 @@ const SeasonInterruptionInsuranceCore = /*@__PURE__*/ proxyCustomElement(class S
         });
     }
     ;
-    onChangeHandler(event) {
-        this.accepted = event.target.value;
+    onChangeHandler(_name, value) {
+        this.accepted = value;
         insuranceErrors[this.quote.policy_type] = false;
         this.toggleCoverage({
             quoteId: this.quote.id,
@@ -111,11 +113,9 @@ const SeasonInterruptionInsuranceCore = /*@__PURE__*/ proxyCustomElement(class S
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(StyledHost, { key: 'ca90d98930a8edff34e6690caa04421a70fa9238' }, !this.isLoading &&
-            h("div", { key: 'ff7e145e0fe3e4cc1b1b476369dec63228aeafbf' }, h("h2", { key: '206a364e3efdeafc1c17c6d25ec5de1b8ce21c29', class: "fs-5 fw-bold pb-3 jfi-header" }, (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title), h("small", { key: '0f3ef80b76e2d50b793175dfd9de9910329254ea', innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description }), h("div", { key: '5fa4ea480c0ebc1870f222a4f58529676451e9d4' }, h("input", { key: '40f5f25d82c9a5ecea558ea0f6763d619f82727e', id: "accept", type: "radio", name: "opt-in", value: "true", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: 'c7e2cd5fa6052765e2155cbc24f6fd9d6b8da723', htmlFor: "accept" }, "Accept coverage for ", formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents))), h("div", { key: '47d716b0cb114e3c0a62776491153ca2ce389ce7', class: "mb-2" }, h("input", { key: 'dd442bb652f98a75d184e99d78d79292189ef867', id: "decline", type: "radio", name: "opt-in", value: "false", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: 'e5b7a36f006ed6a78eb762c1bea131800ab45ae4', htmlFor: "decline" }, "Decline coverage")), h("div", { key: 'dddae2c74c62641ccd2ba7352190d6e4731ef19b', class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' } }, "Please select an option"), h("small", { key: '67684b8a101061c54b0629ae35000032232e6847', innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer }))));
+        return (h(StyledHost, { key: 'e665e8866cf53e7b22ff4e05c25b1059bc9e025a' }, !this.isLoading && (h("div", { key: '15e2fdb114dc837d95daeb696ec5d5769c8c80bc' }, h(Header2, { key: '19095737990f12bde58fc7bd6e63ded25f62a8e2', text: (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title, class: "fs-5 fw-bold pb-3" }), h("small", { key: 'a036659ef5b7a11a16dda7cc7558cd9940d53540', innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description, part: text }), h("form-control-radio", { key: '49b102250e07f11f91f07dfc3fba74bff4f5fd34', label: `Accept coverage for ${formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents)}`, name: "opt-in", value: 'true', checked: this.accepted === 'true', inputHandler: this.onChangeHandler.bind(this) }), h("form-control-radio", { key: 'e784cf4340d9034e81a12454aed5a0d4afe9aea8', label: "Decline coverage", name: "opt-in", value: 'false', checked: this.accepted === 'false', inputHandler: this.onChangeHandler.bind(this) }), h("div", { key: '649ddbafdc560bde98470a2d868a9410a57eaba4', class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' }, part: textDanger }, "Please select an option"), h("small", { key: '3d3651631da43d2c0f473b793cb5f6f663b7b819', innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer, part: text })))));
     }
-    static get style() { return JustifiSeasonInterruptionInsuranceCoreStyle0 + (JustifiSeasonInterruptionInsuranceCoreStyle1 + JustifiSeasonInterruptionInsuranceCoreStyle2); }
-}, [1, "justifi-season-interruption-insurance-core", {
+}, [0, "justifi-season-interruption-insurance-core", {
         "checkoutId": [1, "checkout-id"],
         "getQuote": [16],
         "toggleCoverage": [16],
@@ -139,13 +139,23 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-season-interruption-insurance-core"];
+    const components = ["justifi-season-interruption-insurance-core", "form-control-help-text", "form-control-radio"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-season-interruption-insurance-core":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SeasonInterruptionInsuranceCore);
             }
             break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "form-control-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }
 defineCustomElement();

package/dist/module/sezzle-payment-method.js

@@ -1,6 +1,9 @@
-import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { c as config } from './config.js';
 import { c as formatCurrency } from './utils2.js';
+import { Q as radioListItem } from './parts.js';
+import { d as defineCustomElement$2 } from './form-control-help-text3.js';
+import { d as defineCustomElement$1 } from './form-control-radio2.js';
 
 const sezzleLogo = (h("img", { class: "sezzle-smart-button-logo-img", src: "https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg", alt: "Sezzle", style: {
         display: 'inline',
@@ -13,7 +16,8 @@ const SezzlePaymentMethod = /*@__PURE__*/ proxyCustomElement(class SezzlePayment
         super();
         this.__registerHost();
         this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected", 7);
-        this.onPaymentMethodOptionClick = () => {
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
             this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
         };
         this.initializeSezzleCheckout = () => {
@@ -68,8 +72,8 @@ const SezzlePaymentMethod = /*@__PURE__*/ proxyCustomElement(class SezzlePayment
         return this.sezzlePromise;
     }
     render() {
-        var _a, _b, _c, _d, _e;
-        return (h("div", { key: '5c1e9653930fe5e2c2c72145a59ff29ec8aaae58', class: "payment-method" }, h("script", { key: '5b500fb5c44bf750486d26eeb492fa76c70ecb1c', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: '2fd81eb7f13f3aeeaffbefaac4d8797465265f92', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '7dec7485102a17b93cd7d3b55dc25e549d67e477', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: 'f2b85b11fb6ca254e3ff541a33b0aab2fc8373d8', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, h("div", { key: '4f2c0df30f6b41d80f747e0475e79a26bd34a981' }, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", { key: '84b235727da8bbc38a4d793feb18fca6432f6d6c' }, h("span", { key: '399213d7597c342d065d50296f0991d03f11e964' }, (_d = this.installmentPlan) === null || _d === void 0 ? void 0 : _d.installments.length), "\u00A0", h("span", { key: 'c27dba665086c540e566c192a6b451721e4169f3' }, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { key: '1c8b4b9342b3f48365ff313becbf8aaab402a191', class: "fw-bold" }, formatCurrency((_e = this.installmentPlan) === null || _e === void 0 ? void 0 : _e.installments[0].amountInCents))))))));
+        var _a, _b, _c;
+        return (h(Host, { key: 'bbe1a2f4a2418d8c9e946e15567f7df89ac06084', class: "payment-method" }, h("script", { key: 'a254fbb032a531a889d81297053be07001262706', src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { key: '691439a9541b69f59fac8ed744d633a7cba69fbd', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '4f03055cf993502ff1999abfbd14aa5e6977b811', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: h("div", null, h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", null, h("span", null, (_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments.length), "\u00A0", h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { class: "fw-bold" }, formatCurrency((_c = this.installmentPlan) === null || _c === void 0 ? void 0 : _c.installments[0].amountInCents))))) }))));
     }
 }, [0, "justifi-sezzle-payment-method", {
         "iframeOrigin": [1025, "iframe-origin"],
@@ -88,13 +92,23 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-sezzle-payment-method"];
+    const components = ["justifi-sezzle-payment-method", "form-control-help-text", "form-control-radio"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-sezzle-payment-method":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SezzlePaymentMethod);
             }
             break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "form-control-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }
 defineCustomElement();

package/dist/module/shipping-details.js

@@ -1,31 +1,70 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$8 } from './custom-popper2.js';
-import { d as defineCustomElement$7 } from './form-control-date2.js';
-import { d as defineCustomElement$6 } from './form-control-error-text2.js';
-import { d as defineCustomElement$5 } from './form-control-file2.js';
-import { d as defineCustomElement$4 } from './form-control-help-text2.js';
+import { c as create$3, a as create$6, F as FormController } from './form.js';
+import { D as DisputeEvidenceDocument, a as DisputeResponseFormStep } from './dispute-response-form-types.js';
+import { J as heading5 } from './parts.js';
+import { d as defineCustomElement$7 } from './custom-popper2.js';
+import { d as defineCustomElement$6 } from './form-control-date2.js';
+import { d as defineCustomElement$5 } from './form-control-file-v22.js';
+import { d as defineCustomElement$4 } from './form-control-help-text3.js';
 import { d as defineCustomElement$3 } from './form-control-text2.js';
 import { d as defineCustomElement$2 } from './form-control-textarea2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
+const ShippingDetailsSchema = create$3({
+    shipping_carrier: create$6().nullable(),
+    shipping_tracking_number: create$6().nullable(),
+    shipping_date: create$6().nullable(),
+    shipping_address: create$6().nullable(),
+});
+
 const ShippingDetails = /*@__PURE__*/ proxyCustomElement(class ShippingDetails extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.inputHandler = (name, value) => {
+            this.form.setValues(Object.assign(Object.assign({}, this.form.values.getValue()), { [name]: value }));
+        };
+        this.handleFileSelection = (e) => {
+            const target = e.target;
+            const name = target.name;
+            const files = target.files;
+            for (const file of files) {
+                this.documentList.push(new DisputeEvidenceDocument(file, name));
+            }
+        };
+        this.disputeResponse = undefined;
+        this.form = undefined;
+        this.errors = {};
+        this.documentList = [];
+    }
+    async validateAndSubmit(onSuccess) {
+        this.form.validateAndSubmit((formData) => onSuccess(formData, this.documentList, DisputeResponseFormStep.shippingDetails));
+    }
+    ;
+    componentWillLoad() {
+        this.form = new FormController(ShippingDetailsSchema);
+    }
+    componentDidLoad() {
+        this.form.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
     }
-    // "shipping_address": "...",
-    // "shipping_carrier": "...",
-    // "shipping_date": "...",
-    // "shipping_tracking_number": "...",
     render() {
-        return (h("div", { key: 'b751c099794fd1e199fc33c5d09899dfd112983b' }, h("div", { key: '199584570dafdf9d7592b58c786c40eab29a9e2d', class: "row gy-3" }, h("div", { key: 'aa22d4ccaa52177f51584faf433208d55de363af', class: "col-12" }, h("h2", { key: '43b90ea2ccca89595bc9edd44e6b6c7231f6a417', class: "h5" }, "Shipping Details")), h("div", { key: '337e087f6a073ce3e5add78813e127578599009f', class: "col-12" }, h("form-control-text", { key: '6b451a1c2e730adb7672a7d31e2a329ddddb9801', label: "Shipping Carrier Name", name: "shipping_carrier" })), h("div", { key: 'ff49c1efb33231b0c81a1b03062031eabcc8b2b5', class: "col-12" }, h("form-control-text", { key: '54b17aba899f77e7c988a367fa3405fbed62b7ed', label: "Tracking Number", name: "shipping_tracking_number" })), h("div", { key: 'cc9a4441663f35a49d119ffdd71562fec327d6da', class: "col-12" }, h("form-control-date", { key: '3e8a41b5a6247a11e11311dcb93e5e567a2bf647', label: "Date Shipped", name: "shipping_date" })), h("div", { key: '0d76ef386013035480f2c1041ddaf4f0a7e88522', class: "col-12" }, h("form-control-textarea", { key: '2c587c5c24127aac5c60c20cf6717060a5fbb35f', label: "Shipping Address", name: "shipping_address" })), h("div", { key: '783465b60c9529abfae87c0c92915c3a79e4a3e8', class: "col-12" }, h("form-control-file", { key: 'ab665466efa871edacc58e60ba572db7f570a83f', label: "Shipping Documentation", name: "shipping_documentation" })))));
+        var _a, _b, _c, _d;
+        return (h("div", { key: 'b2d81ec85e534890a691547a2ec8d28dcc61e784' }, h("div", { key: '3b49e0e3647e66196f586c2e58699e878658c9f3', class: "row gy-3" }, h("div", { key: 'ba6f52f0c2a44c7a39641cb9cb51bf799892a78f', class: "col-12" }, h("h2", { key: '70a108aa928d392d47bf72a32c3a2c71538fc068', class: "h5", part: heading5 }, "Shipping Details")), h("div", { key: 'f5e1b4c54c4d59b7b558fe817d23e5cbc71acec1', class: "col-12" }, h("form-control-text", { key: '32da6155a22359d291506e7d864b0b09fda34f99', label: "Shipping Carrier Name", name: "shipping_carrier", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.shipping_carrier, inputHandler: this.inputHandler, errorText: this.errors.shipping_carrier })), h("div", { key: '55a1082190a09f2723ffbcb6075c18a094ddf5e5', class: "col-12" }, h("form-control-text", { key: '63e0883c7a8f9e01396b7c395eeac7d8612d8dcf', label: "Tracking Number", name: "shipping_tracking_number", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.shipping_tracking_number, inputHandler: this.inputHandler, errorText: this.errors.shipping_tracking_number })), h("div", { key: '0d2f87a06e90191c274d96aed25dbc106ea3c347', class: "col-12" }, h("form-control-date", { key: '33e5da0712b67146147eea9a2de66f0b05d64a69', label: "Date Shipped", name: "shipping_date", defaultValue: (_c = this.disputeResponse) === null || _c === void 0 ? void 0 : _c.shipping_date, inputHandler: this.inputHandler, errorText: this.errors.shipping_date })), h("div", { key: '9aff91d4c4055cfe55a35fc28cf07167b4767992', class: "col-12" }, h("form-control-textarea", { key: '840beacaf520e1155cc2acc21d7e2eeaba2dacca', label: "Shipping Address", name: "shipping_address", defaultValue: (_d = this.disputeResponse) === null || _d === void 0 ? void 0 : _d.shipping_address, inputHandler: this.inputHandler, errorText: this.errors.shipping_address })), h("div", { key: '244eb1c41ee0a26c3ba8b7754404b9c736f0e1a2', class: "col-12" }, h("form-control-file-v2", { key: 'e09e9d04a0a5bb26232271fa29dbc5fcf1549dec', label: "Shipping Documentation", name: "shipping_documentation", onChange: this.handleFileSelection })))));
     }
-}, [0, "justifi-shipping-details"]);
+}, [0, "justifi-shipping-details", {
+        "disputeResponse": [8, "dispute-response"],
+        "form": [32],
+        "errors": [32],
+        "documentList": [32],
+        "validateAndSubmit": [64]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-shipping-details", "custom-popper", "form-control-date", "form-control-error-text", "form-control-file", "form-control-help-text", "form-control-text", "form-control-textarea", "form-control-tooltip"];
+    const components = ["justifi-shipping-details", "custom-popper", "form-control-date", "form-control-file-v2", "form-control-help-text", "form-control-text", "form-control-textarea", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-shipping-details":
             if (!customElements.get(tagName)) {
@@ -33,21 +72,16 @@ function defineCustomElement() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "form-control-error-text":
+        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "form-control-file":
+        case "form-control-file-v2":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

package/dist/module/skeleton.js

@@ -1,41 +1,11 @@
 import { h } from '@stencil/core/internal/client';
+import { s as skeleton } from './parts.js';
 
-// This component relies on "src/styles/animations.css" 
-// where it is defined the pulsation animation.
-// Because of shadow-dom, it's not possible to add it to the root.css.
-// Don't forget to include this file in the `styleUrls` 
-// property of the web component that will render the Skeleton
-const Skeleton = ({ component = 'div', height, width, variant = 'text', componentClassName, styles = {}, }) => {
-    const getVariantStyle = () => {
-        if (variant === 'text') {
-            return {
-                marginTop: 0,
-                marginBottom: 0,
-                height: 'auto',
-                transformOrigin: '0 55%',
-                transform: 'scale(1, 0.60)',
-                borderRadius: '4px/6.67px',
-                '::before': {
-                    content: '"\\00a0"',
-                },
-            };
-        }
-        else if (variant === 'circular') {
-            return {
-                borderRadius: '50%',
-            };
-        }
-        else if (variant === 'rounded') {
-            return {
-                borderRadius: '4px',
-            };
-        }
-        return {};
-    };
-    const combinedStyle = Object.assign(Object.assign(Object.assign({}, styles), getVariantStyle()), { width,
+const Skeleton = ({ component = 'div', height, width, className, styles = {}, }) => {
+    const combinedStyle = Object.assign(Object.assign({}, styles), { width,
         height });
     const TagType = component;
-    return (h(TagType, { class: componentClassName, style: combinedStyle, part: "skeleton" }));
+    return (h(TagType, { class: `${className} skeleton`, style: combinedStyle, part: skeleton, "aria-hidden": "true" }));
 };
 
 export { Skeleton as S };

package/dist/module/spinner.js

@@ -0,0 +1,10 @@
+import { h } from '@stencil/core/internal/client';
+import { q as loadingSpinner } from './parts.js';
+
+const Spinner = () => {
+    return (h("div", { class: "d-flex justify-content-center" },
+        h("div", { class: "spinner-border", role: "status", part: loadingSpinner },
+            h("span", { class: "visually-hidden" }, "Loading..."))));
+};
+
+export { Spinner as S };