@unidy.io/sdk 1.1.8 → 1.1.10

package/dist/components/u-magic-code-field.js

@@ -0,0 +1,106 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { A as Auth } from './auth.js';
+import { s as state } from './auth-store.js';
+
+const magicCodeFieldCss = "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-ring-offset-width:0px;--tw-border-style:solid;--tw-duration:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--u-font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--u-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--u-color-slate-200:oklch(92.9% .013 255.508);--u-spacing:.25rem;--u-text-lg:1.125rem;--u-text-lg--line-height:1.55556;--u-radius-lg:.5rem;--u-default-transition-duration:.15s;--u-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--u-default-font-family:var(--u-font-sans);--u-default-mono-font-family:var(--u-font-mono);--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{font-family:var(--u-default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--u-default-font-feature-settings,normal);font-variation-settings:var(--u-default-font-variation-settings,normal);-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);tab-size:4;-webkit-tap-highlight-color:transparent;line-height:1.5}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--u-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--u-default-mono-font-feature-settings,normal);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--u-default-mono-font-variation-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:currentColor;color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.u\\:flex{display:flex}.u\\:h-\\[50px\\]{height:50px}.u\\:w-\\[50px\\]{width:50px}.u\\:w-full{width:100%}.u\\:justify-center{justify-content:center}.u\\:gap-0\\.5{gap:calc(var(--u-spacing)*.5)}.u\\:rounded-lg{border-radius:var(--u-radius-lg)}.u\\:border-2{border-style:var(--tw-border-style);border-width:2px}.u\\:border-solid{--tw-border-style:solid;border-style:solid}.u\\:border-slate-200{border-color:var(--u-color-slate-200)}.u\\:text-center{text-align:center}.u\\:text-lg{font-size:var(--u-text-lg);line-height:var(--tw-leading,var(--u-text-lg--line-height))}.u\\:transition-colors{transition-duration:var(--tw-duration,var(--u-default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--u-default-transition-timing-function))}.u\\:duration-200{--tw-duration:.2s;transition-duration:.2s}.u\\:outline-none{--tw-outline-style:none;outline-style:none}.fixed{position:fixed}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-duration{syntax:\"*\";inherits:false}";
+
+const MagicCodeField = /*@__PURE__*/ proxyCustomElement(class MagicCodeField extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    componentClassName = "";
+    codeDigits = ["", "", "", ""];
+    inputRefs = [];
+    handleInput = (event, index) => {
+        const target = event.target;
+        const value = target.value.replace(/[^0-9]/g, "");
+        const sanitizedDigit = value.slice(-1);
+        target.value = sanitizedDigit;
+        const newDigits = [...this.codeDigits];
+        newDigits[index] = sanitizedDigit;
+        this.codeDigits = newDigits;
+        const fullCode = newDigits.join("");
+        if (value && index < 3) {
+            const nextInput = this.inputRefs[index + 1];
+            if (nextInput) {
+                nextInput.focus();
+            }
+        }
+        if (fullCode.length === 4) {
+            this.authenticateWithCode(fullCode);
+        }
+    };
+    handleKeyDown = (event, index) => {
+        if (event.key === "Backspace" && !this.codeDigits[index] && index > 0) {
+            const prevInput = this.inputRefs[index - 1];
+            if (prevInput) {
+                prevInput.focus();
+            }
+        }
+    };
+    handlePaste = (event) => {
+        event.preventDefault();
+        const pastedData = event.clipboardData?.getData("text") || "";
+        const digits = pastedData
+            .replace(/[^0-9]/g, "")
+            .slice(0, 4)
+            .split("");
+        while (digits.length < 4) {
+            digits.push("");
+        }
+        this.codeDigits = digits;
+        const firstEmptyIndex = digits.findIndex((digit) => !digit);
+        const targetIndex = firstEmptyIndex !== -1 ? firstEmptyIndex : 3;
+        if (this.inputRefs[targetIndex]) {
+            this.inputRefs[targetIndex].focus();
+        }
+        const fullCode = digits.join("");
+        if (fullCode.length === 4) {
+            this.authenticateWithCode(fullCode);
+        }
+    };
+    authenticateWithCode = async (code) => {
+        const authInstance = await Auth.getInstance();
+        await authInstance.helpers.authenticateWithMagicCode(code);
+    };
+    render() {
+        if (state.step !== "magic-code") {
+            return null;
+        }
+        return (h("div", { class: `u:flex u:gap-0.5 u:w-full u:justify-center ${this.componentClassName}` }, this.codeDigits.map((digit, index) => (h("input", {
+            // biome-ignore lint/suspicious/noArrayIndexKey: digits are fixed position inputs
+            key: index, ref: (el) => {
+                if (el)
+                    this.inputRefs[index] = el;
+            }, id: `digit-input-${index + 1}`, type: "text", inputmode: "numeric", maxlength: "1", value: digit, disabled: state.loading, onInput: (event) => this.handleInput(event, index), onKeyDown: (event) => this.handleKeyDown(event, index), onPaste: index === 0 ? this.handlePaste : undefined, "aria-label": `Digit ${index + 1} of ${this.codeDigits.length}`, class: "u:w-[50px] u:h-[50px] u:text-center u:text-lg u:border-2 u:border-solid u:border-slate-200 u:rounded-lg u:outline-none u:transition-colors u:duration-200", part: "digit-input"
+        })))));
+    }
+    static get style() { return magicCodeFieldCss; }
+}, [768, "u-magic-code-field", {
+        "componentClassName": [1, "class-name"],
+        "codeDigits": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["u-magic-code-field"];
+    components.forEach(tagName => { switch (tagName) {
+        case "u-magic-code-field":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MagicCodeField);
+            }
+            break;
+    } });
+}
+
+const UMagicCodeField = MagicCodeField;
+const defineCustomElement = defineCustomElement$1;
+
+export { UMagicCodeField, defineCustomElement };
+//# sourceMappingURL=u-magic-code-field.js.map
+
+//# sourceMappingURL=u-magic-code-field.js.map

package/dist/components/u-magic-code-field.js.map

@@ -0,0 +1 @@
+{"file":"u-magic-code-field.js","mappings":"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","names":["__stencil_proxyCustomElement","authState"],"sources":["src/auth/components/magic-code-field/magic-code-field.css?tag=u-magic-code-field","src/auth/components/magic-code-field/magic-code-field.tsx"],"sourcesContent":["","import { Component, h, Prop, State } from \"@stencil/core\";\nimport { Auth } from \"../../auth\";\nimport { authState } from \"../../store/auth-store\";\n\n@Component({\n  tag: \"u-magic-code-field\",\n  styleUrl: \"magic-code-field.css\",\n  shadow: false,\n})\nexport class MagicCodeField {\n  @Prop({ attribute: \"class-name\" }) componentClassName = \"\";\n\n  @State() codeDigits: string[] = [\"\", \"\", \"\", \"\"];\n\n  private inputRefs: HTMLInputElement[] = [];\n\n  private handleInput = (event: Event, index: number) => {\n    const target = event.target as HTMLInputElement;\n    const value = target.value.replace(/[^0-9]/g, \"\");\n    const sanitizedDigit = value.slice(-1);\n    target.value = sanitizedDigit;\n\n    const newDigits = [...this.codeDigits];\n    newDigits[index] = sanitizedDigit;\n    this.codeDigits = newDigits;\n\n    const fullCode = newDigits.join(\"\");\n\n    if (value && index < 3) {\n      const nextInput = this.inputRefs[index + 1];\n      if (nextInput) {\n        nextInput.focus();\n      }\n    }\n\n    if (fullCode.length === 4) {\n      this.authenticateWithCode(fullCode);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent, index: number) => {\n    if (event.key === \"Backspace\" && !this.codeDigits[index] && index > 0) {\n      const prevInput = this.inputRefs[index - 1];\n      if (prevInput) {\n        prevInput.focus();\n      }\n    }\n  };\n\n  private handlePaste = (event: ClipboardEvent) => {\n    event.preventDefault();\n    const pastedData = event.clipboardData?.getData(\"text\") || \"\";\n    const digits = pastedData\n      .replace(/[^0-9]/g, \"\")\n      .slice(0, 4)\n      .split(\"\");\n\n    while (digits.length < 4) {\n      digits.push(\"\");\n    }\n\n    this.codeDigits = digits;\n\n    const firstEmptyIndex = digits.findIndex((digit) => !digit);\n    const targetIndex = firstEmptyIndex !== -1 ? firstEmptyIndex : 3;\n    if (this.inputRefs[targetIndex]) {\n      this.inputRefs[targetIndex].focus();\n    }\n\n    const fullCode = digits.join(\"\");\n    if (fullCode.length === 4) {\n      this.authenticateWithCode(fullCode);\n    }\n  };\n\n  private authenticateWithCode = async (code: string) => {\n    const authInstance = await Auth.getInstance();\n\n    await authInstance.helpers.authenticateWithMagicCode(code);\n  };\n  render() {\n    if (authState.step !== \"magic-code\") {\n      return null;\n    }\n\n    return (\n      <div class={`u:flex u:gap-0.5 u:w-full u:justify-center ${this.componentClassName}`}>\n        {this.codeDigits.map((digit, index) => (\n          <input\n            // biome-ignore lint/suspicious/noArrayIndexKey: digits are fixed position inputs\n            key={index}\n            ref={(el) => {\n              if (el) this.inputRefs[index] = el;\n            }}\n            id={`digit-input-${index + 1}`}\n            type=\"text\"\n            inputmode=\"numeric\"\n            maxlength=\"1\"\n            value={digit}\n            disabled={authState.loading}\n            onInput={(event) => this.handleInput(event, index)}\n            onKeyDown={(event) => this.handleKeyDown(event, index)}\n            onPaste={index === 0 ? this.handlePaste : undefined}\n            aria-label={`Digit ${index + 1} of ${this.codeDigits.length}`}\n            class=\"u:w-[50px] u:h-[50px] u:text-center u:text-lg u:border-2 u:border-solid u:border-slate-200 u:rounded-lg u:outline-none u:transition-colors u:duration-200\"\n            part=\"digit-input\"\n          />\n        ))}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/u-missing-field.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UMissingField extends Components.UMissingField, HTMLElement {}
+export const UMissingField: {
+    prototype: UMissingField;
+    new (): UMissingField;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/u-missing-field.js

@@ -0,0 +1,51 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as state, m as missingFieldNames } from './auth-store.js';
+import { d as defineCustomElement$3 } from './field.js';
+import { d as defineCustomElement$2 } from './raw-field.js';
+
+const MissingField = /*@__PURE__*/ proxyCustomElement(class MissingField extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    get el() { return this; }
+    render() {
+        if (state.step !== "missing-fields")
+            return null;
+        const fieldNames = missingFieldNames();
+        return (h("div", { class: "missing-fields" }, h("form", null, fieldNames.map((fieldName) => (h("u-field", { key: fieldName, field: fieldName, renderDefaultLabel: true }))))));
+    }
+}, [256, "u-missing-field"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["u-missing-field", "u-field", "u-raw-field"];
+    components.forEach(tagName => { switch (tagName) {
+        case "u-missing-field":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MissingField);
+            }
+            break;
+        case "u-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "u-raw-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const UMissingField = MissingField;
+const defineCustomElement = defineCustomElement$1;
+
+export { UMissingField, defineCustomElement };
+//# sourceMappingURL=u-missing-field.js.map
+
+//# sourceMappingURL=u-missing-field.js.map

package/dist/components/u-missing-field.js.map

@@ -0,0 +1 @@
+{"file":"u-missing-field.js","mappings":";;;;;MAOa,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAA,WAAA,CAAA;;;;;;;;IAGvB,MAAM,GAAA;AACJ,QAAA,IAAIC,KAAS,CAAC,IAAI,KAAK,gBAAgB;AAAE,YAAA,OAAO,IAAI;AAEpD,QAAA,MAAM,UAAU,GAAG,iBAAiB,EAAE;QAEtC,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,IAAA,EACG,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,MACxB,CAAS,CAAA,SAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAI,CAAA,CACxE,CAAC,CACG,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","authState"],"sources":["src/auth/components/missing-field/missing-field.tsx"],"sourcesContent":["import { Component, Element, h } from \"@stencil/core\";\nimport { authState, missingFieldNames } from \"../../store/auth-store\";\n\n@Component({\n  tag: \"u-missing-field\",\n  shadow: false,\n})\nexport class MissingField {\n  @Element() el!: HTMLElement;\n\n  render() {\n    if (authState.step !== \"missing-fields\") return null;\n\n    const fieldNames = missingFieldNames();\n\n    return (\n      <div class=\"missing-fields\">\n        <form>\n          {fieldNames.map((fieldName) => (\n            <u-field key={fieldName} field={fieldName} renderDefaultLabel={true} />\n          ))}\n        </form>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/u-missing-fields-submit-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UMissingFieldsSubmitButton extends Components.UMissingFieldsSubmitButton, HTMLElement {}
+export const UMissingFieldsSubmitButton: {
+    prototype: UMissingFieldsSubmitButton;
+    new (): UMissingFieldsSubmitButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/u-missing-fields-submit-button.js

@@ -0,0 +1,70 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { g as getUnidyClient } from './index2.js';
+import { t } from './i18n.js';
+import { v as validateRequiredFieldsUnchanged, b as buildPayload } from './profile-helpers.js';
+import { s as state } from './profile-store.js';
+import { h as hasSlotContent } from './component-utils.js';
+import { s as state$1, a as authStore } from './auth-store.js';
+import { d as defineCustomElement$2 } from './spinner.js';
+
+const MissingFieldsSubmitButton = /*@__PURE__*/ proxyCustomElement(class MissingFieldsSubmitButton extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    async onSubmit() {
+        state.loading = true;
+        const { configuration, ...stateWithoutConfig } = state;
+        if (!validateRequiredFieldsUnchanged(stateWithoutConfig.data)) {
+            state.loading = false;
+            return;
+        }
+        const updatedProfileData = buildPayload(stateWithoutConfig.data);
+        const sid = state$1.sid;
+        const [error, response] = await getUnidyClient().auth.updateMissingFields(sid, updatedProfileData);
+        if (error) {
+            state.loading = false;
+            return;
+        }
+        const { jwt } = response;
+        state.loading = false;
+        authStore.setToken(jwt);
+        // Emit authEvent to allow modal-based logins to close after successful submission
+        this.el.dispatchEvent(new CustomEvent("authEvent", { detail: { jwt }, bubbles: true, composed: true }));
+    }
+    render() {
+        if (state$1.step !== "missing-fields")
+            return null;
+        return (h("div", null, h("button", { type: "button", onClick: () => this.onSubmit(), part: "button", disabled: (state.errors && Object.keys(state.errors).length > 0) || state.phoneValid === false, "aria-live": "polite" }, state.loading ? h("u-spinner", null) : hasSlotContent(this.el) ? h("slot", null) : t("buttons.submit"))));
+    }
+}, [257, "u-missing-fields-submit-button"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["u-missing-fields-submit-button", "u-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "u-missing-fields-submit-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MissingFieldsSubmitButton);
+            }
+            break;
+        case "u-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const UMissingFieldsSubmitButton = MissingFieldsSubmitButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { UMissingFieldsSubmitButton, defineCustomElement };
+//# sourceMappingURL=u-missing-fields-submit-button.js.map
+
+//# sourceMappingURL=u-missing-fields-submit-button.js.map

package/dist/components/u-missing-fields-submit-button.js.map

@@ -0,0 +1 @@
+{"file":"u-missing-fields-submit-button.js","mappings":";;;;;;;;;MAaa,yBAAyB,iBAAAA,kBAAA,CAAA,MAAA,yBAAA,SAAA,WAAA,CAAA;;;;;;;;;AAG5B,IAAA,MAAM,QAAQ,GAAA;AACpB,QAAAC,KAAY,CAAC,OAAO,GAAG,IAAI;QAE3B,MAAM,EAAE,aAAa,EAAE,GAAG,kBAAkB,EAAE,GAAGA,KAAY;QAE7D,IAAI,CAAC,+BAA+B,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE;AAC7D,YAAAA,KAAY,CAAC,OAAO,GAAG,KAAK;YAC5B;;QAGF,MAAM,kBAAkB,GAAG,YAAY,CAAC,kBAAkB,CAAC,IAAI,CAAC;AAChE,QAAA,MAAM,GAAG,GAAGC,OAAS,CAAC,GAAa;AAEnC,QAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,MAAM,cAAc,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,GAAG,EAAE,kBAAkB,CAAC;QAElG,IAAI,KAAK,EAAE;AACT,YAAAD,KAAY,CAAC,OAAO,GAAG,KAAK;YAC5B;;AAGF,QAAA,MAAM,EAAE,GAAG,EAAE,GAAG,QAAyB;AACzC,QAAAA,KAAY,CAAC,OAAO,GAAG,KAAK;AAC5B,QAAA,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC;;QAGvB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;;IAGzG,MAAM,GAAA;AACJ,QAAA,IAAIC,OAAS,CAAC,IAAI,KAAK,gBAAgB;AAAE,YAAA,OAAO,IAAI;QAEpD,QACE,CAAA,CAAA,KAAA,EAAA,IAAA,EACE,CAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,EAC9B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAACD,KAAY,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,CAACA,KAAY,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,CAAC,KAAKA,KAAY,CAAC,UAAU,KAAK,KAAK,EAAA,WAAA,EACzG,QAAQ,EAEjB,EAAAA,KAAY,CAAC,OAAO,GAAG,CAAa,CAAA,WAAA,EAAA,IAAA,CAAA,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,GAAG,CAAC,CAAC,gBAAgB,CAAC,CACzF,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","profileState","authState"],"sources":["src/auth/components/missing-fields-submit-button/missing-fields-submit-button.tsx"],"sourcesContent":["import { Component, Element, h } from \"@stencil/core\";\nimport { getUnidyClient } from \"../../../api\";\nimport { t } from \"../../../i18n\";\nimport { buildPayload, validateRequiredFieldsUnchanged } from \"../../../profile/profile-helpers\";\nimport { state as profileState } from \"../../../profile/store/profile-store\";\nimport { hasSlotContent } from \"../../../shared/component-utils\";\nimport type { TokenResponse } from \"../../api/auth\";\nimport { authState, authStore } from \"../../store/auth-store\";\n\n@Component({\n  tag: \"u-missing-fields-submit-button\",\n  shadow: true,\n})\nexport class MissingFieldsSubmitButton {\n  @Element() el!: HTMLElement;\n\n  private async onSubmit() {\n    profileState.loading = true;\n\n    const { configuration, ...stateWithoutConfig } = profileState;\n\n    if (!validateRequiredFieldsUnchanged(stateWithoutConfig.data)) {\n      profileState.loading = false;\n      return;\n    }\n\n    const updatedProfileData = buildPayload(stateWithoutConfig.data);\n    const sid = authState.sid as string;\n\n    const [error, response] = await getUnidyClient().auth.updateMissingFields(sid, updatedProfileData);\n\n    if (error) {\n      profileState.loading = false;\n      return;\n    }\n\n    const { jwt } = response as TokenResponse;\n    profileState.loading = false;\n    authStore.setToken(jwt);\n\n    // Emit authEvent to allow modal-based logins to close after successful submission\n    this.el.dispatchEvent(new CustomEvent(\"authEvent\", { detail: { jwt }, bubbles: true, composed: true }));\n  }\n\n  render() {\n    if (authState.step !== \"missing-fields\") return null;\n\n    return (\n      <div>\n        <button\n          type=\"button\"\n          onClick={() => this.onSubmit()}\n          part=\"button\"\n          disabled={(profileState.errors && Object.keys(profileState.errors).length > 0) || profileState.phoneValid === false}\n          aria-live=\"polite\"\n        >\n          {profileState.loading ? <u-spinner /> : hasSlotContent(this.el) ? <slot /> : t(\"buttons.submit\")}\n        </button>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/u-newsletter-checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UNewsletterCheckbox extends Components.UNewsletterCheckbox, HTMLElement {}
+export const UNewsletterCheckbox: {
+    prototype: UNewsletterCheckbox;
+    new (): UNewsletterCheckbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/u-newsletter-checkbox.js

@@ -0,0 +1,93 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as isSubscribed } from './newsletter-helpers.js';
+import { n as newsletterStore } from './newsletter-store.js';
+
+const NewsletterCheckbox = /*@__PURE__*/ proxyCustomElement(class NewsletterCheckbox extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    internalName;
+    checked = false;
+    componentClassName;
+    componentWillLoad() {
+        if (this.checked && !this.isSubscribed) {
+            const checkedNewsletters = newsletterStore.state.checkedNewsletters;
+            if (!(this.internalName in checkedNewsletters)) {
+                newsletterStore.set("checkedNewsletters", {
+                    ...checkedNewsletters,
+                    [this.internalName]: [],
+                });
+            }
+        }
+    }
+    get isSubscribed() {
+        return isSubscribed(this.internalName);
+    }
+    get isChecked() {
+        return this.isSubscribed || this.internalName in newsletterStore.state.checkedNewsletters;
+    }
+    syncToStore(checked) {
+        if (checked) {
+            const prefs = newsletterStore.state.defaultPreferences[this.internalName];
+            const defaultPrefs = prefs ? Array.from(prefs) : [];
+            newsletterStore.set("checkedNewsletters", {
+                ...newsletterStore.state.checkedNewsletters,
+                [this.internalName]: defaultPrefs,
+            });
+        }
+        else {
+            const { [this.internalName]: _, ...rest } = newsletterStore.state.checkedNewsletters;
+            newsletterStore.set("checkedNewsletters", rest);
+        }
+    }
+    handleChange = () => {
+        if (this.isSubscribed)
+            return;
+        this.syncToStore(!this.isChecked);
+    };
+    /** Public method to toggle the checkbox programmatically */
+    async toggle() {
+        this.handleChange();
+    }
+    /** Public method to set the checkbox state programmatically */
+    async setChecked(checked) {
+        if (this.isSubscribed)
+            return;
+        if (checked !== this.isChecked) {
+            this.syncToStore(checked);
+        }
+    }
+    render() {
+        return (h("input", { key: '0d7179bd700bf79dc369e213898eae166aec2529', type: "checkbox", checked: this.isChecked, disabled: this.isSubscribed, onChange: this.handleChange, class: this.componentClassName, "aria-checked": this.isChecked }));
+    }
+}, [768, "u-newsletter-checkbox", {
+        "internalName": [1, "internal-name"],
+        "checked": [4],
+        "componentClassName": [1, "class-name"],
+        "toggle": [64],
+        "setChecked": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["u-newsletter-checkbox"];
+    components.forEach(tagName => { switch (tagName) {
+        case "u-newsletter-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NewsletterCheckbox);
+            }
+            break;
+    } });
+}
+
+const UNewsletterCheckbox = NewsletterCheckbox;
+const defineCustomElement = defineCustomElement$1;
+
+export { UNewsletterCheckbox, defineCustomElement };
+//# sourceMappingURL=u-newsletter-checkbox.js.map
+
+//# sourceMappingURL=u-newsletter-checkbox.js.map

package/dist/components/u-newsletter-checkbox.js.map

@@ -0,0 +1 @@
+{"file":"u-newsletter-checkbox.js","mappings":";;;;MAQa,kBAAkB,iBAAAA,kBAAA,CAAA,MAAA,kBAAA,SAAA,WAAA,CAAA;;;;;;;AACrB,IAAA,YAAY;IACZ,OAAO,GAAG,KAAK;AACY,IAAA,kBAAkB;IAErD,iBAAiB,GAAA;QACf,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtC,YAAA,MAAM,kBAAkB,GAAG,eAAe,CAAC,KAAK,CAAC,kBAAkB;YACnE,IAAI,EAAE,IAAI,CAAC,YAAY,IAAI,kBAAkB,CAAC,EAAE;AAC9C,gBAAA,eAAe,CAAC,GAAG,CAAC,oBAAoB,EAAE;AACxC,oBAAA,GAAG,kBAAkB;AACrB,oBAAA,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE;AACxB,iBAAA,CAAC;;;;AAKR,IAAA,IAAY,YAAY,GAAA;QACtB,OAAOC,YAA8B,CAAC,IAAI,CAAC,YAAY,CAAC;;AAG1D,IAAA,IAAY,SAAS,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,IAAI,eAAe,CAAC,KAAK,CAAC,kBAAkB;;AAGnF,IAAA,WAAW,CAAC,OAAgB,EAAA;QAClC,IAAI,OAAO,EAAE;AACX,YAAA,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,CAAC;AACzE,YAAA,MAAM,YAAY,GAAa,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE;AAE7D,YAAA,eAAe,CAAC,GAAG,CAAC,oBAAoB,EAAE;AACxC,gBAAA,GAAG,eAAe,CAAC,KAAK,CAAC,kBAAkB;AAC3C,gBAAA,CAAC,IAAI,CAAC,YAAY,GAAG,YAAY;AAClC,aAAA,CAAC;;aACG;AACL,YAAA,MAAM,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC,kBAAkB;AACpF,YAAA,eAAe,CAAC,GAAG,CAAC,oBAAoB,EAAE,IAAI,CAAC;;;IAI3C,YAAY,GAAG,MAAK;QAC1B,IAAI,IAAI,CAAC,YAAY;YAAE;QACvB,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;AACnC,KAAC;;AAID,IAAA,MAAM,MAAM,GAAA;QACV,IAAI,CAAC,YAAY,EAAE;;;IAKrB,MAAM,UAAU,CAAC,OAAgB,EAAA;QAC/B,IAAI,IAAI,CAAC,YAAY;YAAE;AACvB,QAAA,IAAI,OAAO,KAAK,IAAI,CAAC,SAAS,EAAE;AAC9B,YAAA,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;;;IAI7B,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE,IAAI,CAAC,kBAAkB,kBAChB,IAAI,CAAC,SAAS,EAAA,CAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","NewsletterHelpers.isSubscribed"],"sources":["src/newsletter/components/newsletter-checkbox/newsletter-checkbox.tsx"],"sourcesContent":["import { Component, h, Method, Prop } from \"@stencil/core\";\nimport * as NewsletterHelpers from \"../../newsletter-helpers\";\nimport { newsletterStore } from \"../../store/newsletter-store\";\n\n@Component({\n  tag: \"u-newsletter-checkbox\",\n  shadow: false,\n})\nexport class NewsletterCheckbox {\n  @Prop() internalName!: string;\n  @Prop() checked = false;\n  @Prop({ attribute: \"class-name\" }) componentClassName?: string;\n\n  componentWillLoad() {\n    if (this.checked && !this.isSubscribed) {\n      const checkedNewsletters = newsletterStore.state.checkedNewsletters;\n      if (!(this.internalName in checkedNewsletters)) {\n        newsletterStore.set(\"checkedNewsletters\", {\n          ...checkedNewsletters,\n          [this.internalName]: [],\n        });\n      }\n    }\n  }\n\n  private get isSubscribed(): boolean {\n    return NewsletterHelpers.isSubscribed(this.internalName);\n  }\n\n  private get isChecked(): boolean {\n    return this.isSubscribed || this.internalName in newsletterStore.state.checkedNewsletters;\n  }\n\n  private syncToStore(checked: boolean) {\n    if (checked) {\n      const prefs = newsletterStore.state.defaultPreferences[this.internalName];\n      const defaultPrefs: string[] = prefs ? Array.from(prefs) : [];\n\n      newsletterStore.set(\"checkedNewsletters\", {\n        ...newsletterStore.state.checkedNewsletters,\n        [this.internalName]: defaultPrefs,\n      });\n    } else {\n      const { [this.internalName]: _, ...rest } = newsletterStore.state.checkedNewsletters;\n      newsletterStore.set(\"checkedNewsletters\", rest);\n    }\n  }\n\n  private handleChange = () => {\n    if (this.isSubscribed) return;\n    this.syncToStore(!this.isChecked);\n  };\n\n  /** Public method to toggle the checkbox programmatically */\n  @Method()\n  async toggle() {\n    this.handleChange();\n  }\n\n  /** Public method to set the checkbox state programmatically */\n  @Method()\n  async setChecked(checked: boolean) {\n    if (this.isSubscribed) return;\n    if (checked !== this.isChecked) {\n      this.syncToStore(checked);\n    }\n  }\n\n  render() {\n    return (\n      <input\n        type=\"checkbox\"\n        checked={this.isChecked}\n        disabled={this.isSubscribed}\n        onChange={this.handleChange}\n        class={this.componentClassName}\n        aria-checked={this.isChecked}\n      />\n    );\n  }\n}\n"],"version":3}

package/dist/components/u-newsletter-logout-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UNewsletterLogoutButton extends Components.UNewsletterLogoutButton, HTMLElement {}
+export const UNewsletterLogoutButton: {
+    prototype: UNewsletterLogoutButton;
+    new (): UNewsletterLogoutButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/u-newsletter-logout-button.js

@@ -0,0 +1,56 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { t } from './i18n.js';
+import { h as hasSlotContent } from './component-utils.js';
+import { F as Flash } from './flash-store.js';
+import { n as newsletterLogout } from './newsletter-helpers.js';
+import { n as newsletterStore } from './newsletter-store.js';
+
+const LogoutButton = /*@__PURE__*/ proxyCustomElement(class LogoutButton extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    get el() { return this; }
+    componentClassName = "";
+    hasSlot = false;
+    async componentWillLoad() {
+        // this needs to be evaluated on load, bc doing it on render will evaluate the generated dom for "shadow: false"
+        // components and always return true on re-render
+        this.hasSlot = hasSlotContent(this.el);
+    }
+    handleLogout = () => {
+        newsletterLogout();
+        Flash.success.addMessage(t("newsletter.success.logout"));
+    };
+    render() {
+        if (newsletterStore.state.preferenceToken === "" || newsletterStore.state.isAuthenticated) {
+            return h(Host, { style: { display: "none" } });
+        }
+        return (h(Host, null, h("button", { type: "button", part: "button", class: this.componentClassName, onClick: this.handleLogout, "aria-label": "Logout", "aria-live": "polite" }, this.hasSlot ? h("slot", null) : t("newsletter.buttons.logout"))));
+    }
+}, [772, "u-newsletter-logout-button", {
+        "componentClassName": [1, "class-name"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["u-newsletter-logout-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "u-newsletter-logout-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LogoutButton);
+            }
+            break;
+    } });
+}
+
+const UNewsletterLogoutButton = LogoutButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { UNewsletterLogoutButton, defineCustomElement };
+//# sourceMappingURL=u-newsletter-logout-button.js.map
+
+//# sourceMappingURL=u-newsletter-logout-button.js.map

package/dist/components/u-newsletter-logout-button.js.map

@@ -0,0 +1 @@
+{"file":"u-newsletter-logout-button.js","mappings":";;;;;;;MAWa,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAA,WAAA,CAAA;;;;;;;;IAGY,kBAAkB,GAAG,EAAE;IAElD,OAAO,GAAG,KAAK;AAEvB,IAAA,MAAM,iBAAiB,GAAA;;;QAGrB,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;;IAGhC,YAAY,GAAG,MAAK;AAC1B,QAAA,gBAAgB,EAAE;QAClB,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC;AAC1D,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,IAAI,eAAe,CAAC,KAAK,CAAC,eAAe,KAAK,EAAE,IAAI,eAAe,CAAC,KAAK,CAAC,eAAe,EAAE;AACzF,YAAA,OAAO,CAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAA,CAAI;;AAG7C,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAC9B,OAAO,EAAE,IAAI,CAAC,YAAY,EAAA,YAAA,EACf,QAAQ,EAAA,WAAA,EACT,QAAQ,EAEjB,EAAA,IAAI,CAAC,OAAO,GAAG,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,GAAG,CAAC,CAAC,2BAA2B,CAAC,CAClD,CACJ;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/newsletter/components/logout-button/logout-button.tsx"],"sourcesContent":["import { Component, Element, Host, h, Prop } from \"@stencil/core\";\nimport { t } from \"../../../i18n\";\nimport { hasSlotContent } from \"../../../shared/component-utils\";\nimport { Flash } from \"../../../shared/store/flash-store\";\nimport { newsletterLogout } from \"../../newsletter-helpers\";\nimport { newsletterStore } from \"../../store/newsletter-store\";\n\n@Component({\n  tag: \"u-newsletter-logout-button\",\n  shadow: false,\n})\nexport class LogoutButton {\n  @Element() el!: HTMLElement;\n\n  @Prop({ attribute: \"class-name\" }) componentClassName = \"\";\n\n  private hasSlot = false;\n\n  async componentWillLoad() {\n    // this needs to be evaluated on load, bc doing it on render will evaluate the generated dom for \"shadow: false\"\n    // components and always return true on re-render\n    this.hasSlot = hasSlotContent(this.el);\n  }\n\n  private handleLogout = () => {\n    newsletterLogout();\n    Flash.success.addMessage(t(\"newsletter.success.logout\"));\n  };\n\n  render() {\n    if (newsletterStore.state.preferenceToken === \"\" || newsletterStore.state.isAuthenticated) {\n      return <Host style={{ display: \"none\" }} />;\n    }\n\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          part=\"button\"\n          class={this.componentClassName}\n          onClick={this.handleLogout}\n          aria-label=\"Logout\"\n          aria-live=\"polite\"\n        >\n          {this.hasSlot ? <slot /> : t(\"newsletter.buttons.logout\")}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/u-newsletter-preference-checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UNewsletterPreferenceCheckbox extends Components.UNewsletterPreferenceCheckbox, HTMLElement {}
+export const UNewsletterPreferenceCheckbox: {
+    prototype: UNewsletterPreferenceCheckbox;
+    new (): UNewsletterPreferenceCheckbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/u-newsletter-preference-checkbox.js

@@ -0,0 +1,140 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as isSubscribed, u as updateSubscriptionPreferences } from './newsletter-helpers.js';
+import { s as storeDefaultPreference, n as newsletterStore } from './newsletter-store.js';
+
+const NewsletterPreferenceCheckbox = /*@__PURE__*/ proxyCustomElement(class NewsletterPreferenceCheckbox extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    internalName;
+    preferenceIdentifier;
+    checked = false;
+    componentClassName;
+    loading = false;
+    existingSubscriptions = [];
+    checkedPreferences = [];
+    storeUnsubscribe;
+    componentWillLoad() {
+        this.subscribeToStore();
+        this.initializeCheckedState();
+        if (this.checked) {
+            storeDefaultPreference(this.internalName, this.preferenceIdentifier);
+        }
+    }
+    disconnectedCallback() {
+        this.storeUnsubscribe?.();
+    }
+    subscribeToStore() {
+        this.storeUnsubscribe = newsletterStore.onChange("existingSubscriptions", (subscriptions) => {
+            this.existingSubscriptions = subscriptions;
+        });
+        newsletterStore.onChange("checkedNewsletters", (checkedNewsletters) => {
+            this.checkedPreferences = checkedNewsletters[this.internalName] || [];
+        });
+        this.existingSubscriptions = newsletterStore.state.existingSubscriptions;
+        this.checkedPreferences = newsletterStore.state.checkedNewsletters[this.internalName] || [];
+    }
+    initializeCheckedState() {
+        if (isSubscribed(this.internalName)) {
+            return;
+        }
+        if (this.checked) {
+            this.syncToStore(true);
+        }
+    }
+    get subscription() {
+        return this.existingSubscriptions.find((sub) => sub.newsletter_internal_name === this.internalName);
+    }
+    get isSubscribed() {
+        return this.subscription !== undefined;
+    }
+    get isConfirmed() {
+        return this.subscription?.confirmed ?? false;
+    }
+    get isDisabled() {
+        return this.loading || (this.isSubscribed && !this.isConfirmed);
+    }
+    get isChecked() {
+        return this.checkedPreferences.includes(this.preferenceIdentifier);
+    }
+    syncToStore(add) {
+        const currentPreferences = newsletterStore.state.checkedNewsletters[this.internalName] || [];
+        if (add) {
+            if (!currentPreferences.includes(this.preferenceIdentifier)) {
+                newsletterStore.set("checkedNewsletters", {
+                    ...newsletterStore.state.checkedNewsletters,
+                    [this.internalName]: [...currentPreferences, this.preferenceIdentifier],
+                });
+            }
+        }
+        else {
+            newsletterStore.set("checkedNewsletters", {
+                ...newsletterStore.state.checkedNewsletters,
+                [this.internalName]: currentPreferences.filter((p) => p !== this.preferenceIdentifier),
+            });
+        }
+    }
+    async persistIfSubscribed() {
+        if (this.isSubscribed && this.isConfirmed) {
+            this.loading = true;
+            await updateSubscriptionPreferences(this.internalName);
+            this.loading = false;
+        }
+    }
+    handleChange = async () => {
+        if (this.isDisabled)
+            return;
+        this.syncToStore(!this.isChecked);
+        await this.persistIfSubscribed();
+    };
+    /** Public method to toggle the checkbox programmatically */
+    async toggle() {
+        await this.handleChange();
+    }
+    /** Public method to set the checkbox state programmatically */
+    async setChecked(checked) {
+        if (this.isDisabled)
+            return;
+        if (checked !== this.isChecked) {
+            this.syncToStore(checked);
+            await this.persistIfSubscribed();
+        }
+    }
+    render() {
+        return (h("input", { key: '06ccad6095f97e2da26a16852c791806728e2ec1', type: "checkbox", checked: this.isChecked, disabled: this.isDisabled, onChange: this.handleChange, class: this.componentClassName, "aria-checked": this.isChecked, "aria-busy": this.loading, "aria-disabled": this.isDisabled, "data-internal-name": this.internalName, "data-preference-identifier": this.preferenceIdentifier }));
+    }
+}, [768, "u-newsletter-preference-checkbox", {
+        "internalName": [1, "internal-name"],
+        "preferenceIdentifier": [1, "preference-identifier"],
+        "checked": [4],
+        "componentClassName": [1, "class-name"],
+        "loading": [32],
+        "existingSubscriptions": [32],
+        "checkedPreferences": [32],
+        "toggle": [64],
+        "setChecked": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["u-newsletter-preference-checkbox"];
+    components.forEach(tagName => { switch (tagName) {
+        case "u-newsletter-preference-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NewsletterPreferenceCheckbox);
+            }
+            break;
+    } });
+}
+
+const UNewsletterPreferenceCheckbox = NewsletterPreferenceCheckbox;
+const defineCustomElement = defineCustomElement$1;
+
+export { UNewsletterPreferenceCheckbox, defineCustomElement };
+//# sourceMappingURL=u-newsletter-preference-checkbox.js.map
+
+//# sourceMappingURL=u-newsletter-preference-checkbox.js.map