@verdocs/web-sdk 2.1.2 → 2.2.0

package/dist/components/verdocs-settings-organization2.js

@@ -0,0 +1,331 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { z } from './index3.js';
+import './Types.js';
+import { g as getOrganization, u as updateOrganization } from './Organizations.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { d as convertToE164 } from './utils.js';
+import { V as VerdocsToast } from './Toast.js';
+import { d as defineCustomElement$4 } from './verdocs-button2.js';
+import { d as defineCustomElement$3 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$2 } from './verdocs-select-input2.js';
+import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
+
+const TimeZones = [
+  ['International Date Line West', 'GMT-11:00', '(GMT-11:00) International Date Line West'],
+  ['Midway Island', 'GMT-11:00', '(GMT-11:00) Midway Island'],
+  ['Samoa', 'GMT-11:00', '(GMT-11:00) Samoa'],
+  ['Hawaii', 'GMT-10:00', '(GMT-10:00) Hawaii'],
+  ['Alaska', 'GMT-09:00', '(GMT-09:00) Alaska'],
+  ['Pacific Time (US & Canada)', 'GMT-08:00', '(GMT-08:00) Pacific Time (US & Canada)'],
+  ['Tijuana', 'GMT-08:00', '(GMT-08:00) Tijuana'],
+  ['Arizona', 'GMT-07:00', '(GMT-07:00) Arizona'],
+  ['Chihuahua', 'GMT-07:00', '(GMT-07:00) Chihuahua'],
+  ['Mazatlan', 'GMT-07:00', '(GMT-07:00) Mazatlan'],
+  ['Mountain Time (US & Canada)', 'GMT-07:00', '(GMT-07:00) Mountain Time (US & Canada)'],
+  ['Central America', 'GMT-06:00', '(GMT-06:00) Central America'],
+  ['Central Time (US & Canada)', 'GMT-06:00', '(GMT-06:00) Central Time (US & Canada)'],
+  ['Guadalajara', 'GMT-06:00', '(GMT-06:00) Guadalajara'],
+  ['Mexico City', 'GMT-06:00', '(GMT-06:00) Mexico City'],
+  ['Monterrey', 'GMT-06:00', '(GMT-06:00) Monterrey'],
+  ['Saskatchewan', 'GMT-06:00', '(GMT-06:00) Saskatchewan'],
+  ['Bogota', 'GMT-05:00', '(GMT-05:00) Bogota'],
+  ['Eastern Time (US & Canada)', 'GMT-05:00', '(GMT-05:00) Eastern Time (US & Canada)'],
+  ['Indiana (East)', 'GMT-05:00', '(GMT-05:00) Indiana (East)'],
+  ['Lima', 'GMT-05:00', '(GMT-05:00) Lima'],
+  ['Quito', 'GMT-05:00', '(GMT-05:00) Quito'],
+  ['Caracas', 'GMT-04:30', '(GMT-04:30) Caracas'],
+  ['Atlantic Time (Canada)', 'GMT-04:00', '(GMT-04:00) Atlantic Time (Canada)'],
+  ['Georgetown', 'GMT-04:00', '(GMT-04:00) Georgetown'],
+  ['La Paz', 'GMT-04:00', '(GMT-04:00) La Paz'],
+  ['Santiago', 'GMT-04:00', '(GMT-04:00) Santiago'],
+  ['Newfoundland', 'GMT-03:30', '(GMT-03:30) Newfoundland'],
+  ['Brasilia', 'GMT-03:00', '(GMT-03:00) Brasilia'],
+  ['Buenos Aires', 'GMT-03:00', '(GMT-03:00) Buenos Aires'],
+  ['Greenland', 'GMT-03:00', '(GMT-03:00) Greenland'],
+  ['Mid-Atlantic', 'GMT-02:00', '(GMT-02:00) Mid-Atlantic'],
+  ['Azores', 'GMT-01:00', '(GMT-01:00) Azores'],
+  ['Cape Verde Is.', 'GMT-01:00', '(GMT-01:00) Cape Verde Is.'],
+  ['Casablanca', 'GMT+00:00', '(GMT+00:00) Casablanca'],
+  ['Dublin', 'GMT+00:00', '(GMT+00:00) Dublin'],
+  ['Edinburgh', 'GMT+00:00', '(GMT+00:00) Edinburgh'],
+  ['Lisbon', 'GMT+00:00', '(GMT+00:00) Lisbon'],
+  ['London', 'GMT+00:00', '(GMT+00:00) London'],
+  ['Monrovia', 'GMT+00:00', '(GMT+00:00) Monrovia'],
+  ['UTC', 'GMT+00:00', '(GMT+00:00) UTC'],
+  ['Amsterdam', 'GMT+01:00', '(GMT+01:00) Amsterdam'],
+  ['Belgrade', 'GMT+01:00', '(GMT+01:00) Belgrade'],
+  ['Berlin', 'GMT+01:00', '(GMT+01:00) Berlin'],
+  ['Bern', 'GMT+01:00', '(GMT+01:00) Bern'],
+  ['Bratislava', 'GMT+01:00', '(GMT+01:00) Bratislava'],
+  ['Brussels', 'GMT+01:00', '(GMT+01:00) Brussels'],
+  ['Budapest', 'GMT+01:00', '(GMT+01:00) Budapest'],
+  ['Copenhagen', 'GMT+01:00', '(GMT+01:00) Copenhagen'],
+  ['Ljubljana', 'GMT+01:00', '(GMT+01:00) Ljubljana'],
+  ['Madrid', 'GMT+01:00', '(GMT+01:00) Madrid'],
+  ['Paris', 'GMT+01:00', '(GMT+01:00) Paris'],
+  ['Prague', 'GMT+01:00', '(GMT+01:00) Prague'],
+  ['Rome', 'GMT+01:00', '(GMT+01:00) Rome'],
+  ['Sarajevo', 'GMT+01:00', '(GMT+01:00) Sarajevo'],
+  ['Skopje', 'GMT+01:00', '(GMT+01:00) Skopje'],
+  ['Stockholm', 'GMT+01:00', '(GMT+01:00) Stockholm'],
+  ['Vienna', 'GMT+01:00', '(GMT+01:00) Vienna'],
+  ['Warsaw', 'GMT+01:00', '(GMT+01:00) Warsaw'],
+  ['West Central Africa', '(GMT+01:00', '(GMT+01:00) West Central Africa'],
+  ['Zagreb', 'GMT+01:00', '(GMT+01:00) Zagreb'],
+  ['Athens', 'GMT+02:00', '(GMT+02:00) Athens'],
+  ['Bucharest', 'GMT+02:00', '(GMT+02:00) Bucharest'],
+  ['Cairo', 'GMT+02:00', '(GMT+02:00) Cairo'],
+  ['Harare', 'GMT+02:00', '(GMT+02:00) Harare'],
+  ['Helsinki', 'GMT+02:00', '(GMT+02:00) Helsinki'],
+  ['Istanbul', 'GMT+02:00', '(GMT+02:00) Istanbul'],
+  ['Jerusalem', 'GMT+02:00', '(GMT+02:00) Jerusalem'],
+  ['Kyiv', 'GMT+02:00', '(GMT+02:00) Kyiv'],
+  ['Minsk', 'GMT+02:00', '(GMT+02:00) Minsk'],
+  ['Pretoria', 'GMT+02:00', '(GMT+02:00) Pretoria'],
+  ['Riga', 'GMT+02:00', '(GMT+02:00) Riga'],
+  ['Sofia', 'GMT+02:00', '(GMT+02:00) Sofia'],
+  ['Tallinn', 'GMT+02:00', '(GMT+02:00) Tallinn'],
+  ['Vilnius', 'GMT+02:00', '(GMT+02:00) Vilnius'],
+  ['Baghdad', 'GMT+03:00', '(GMT+03:00) Baghdad'],
+  ['Kuwait', 'GMT+03:00', '(GMT+03:00) Kuwait'],
+  ['Moscow', 'GMT+03:00', '(GMT+03:00) Moscow'],
+  ['Nairobi', 'GMT+03:00', '(GMT+03:00) Nairobi'],
+  ['Riyadh', 'GMT+03:00', '(GMT+03:00) Riyadh'],
+  ['St. Petersburg', 'GMT+03:00', '(GMT+03:00) St. Petersburg'],
+  ['Volgograd', 'GMT+03:00', '(GMT+03:00) Volgograd'],
+  ['Tehran', 'GMT+03:30', '(GMT+03:30) Tehran'],
+  ['Abu Dhabi', 'GMT+04:00', '(GMT+04:00) Abu Dhabi'],
+  ['Baku', 'GMT+04:00', '(GMT+04:00) Baku'],
+  ['Muscat', 'GMT+04:00', '(GMT+04:00) Muscat'],
+  ['Tbilisi', 'GMT+04:00', '(GMT+04:00) Tbilisi'],
+  ['Yerevan', 'GMT+04:00', '(GMT+04:00) Yerevan'],
+  ['Kabul', 'GMT+04:30', '(GMT+04:30) Kabul'],
+  ['Ekaterinburg', 'GMT+05:00', '(GMT+05:00) Ekaterinburg'],
+  ['Islamabad', 'GMT+05:00', '(GMT+05:00) Islamabad'],
+  ['Karachi', 'GMT+05:00', '(GMT+05:00) Karachi'],
+  ['Tashkent', 'GMT+05:00', '(GMT+05:00) Tashkent'],
+  ['Chennai', 'GMT+05:30', '(GMT+05:30) Chennai'],
+  ['Kolkata', 'GMT+05:30', '(GMT+05:30) Kolkata'],
+  ['Mumbai', 'GMT+05:30', '(GMT+05:30) Mumbai'],
+  ['New Delhi', 'GMT+05:30', '(GMT+05:30) New Delhi'],
+  ['Sri Jayawardenepura', 'GMT+05:30', '(GMT+05:30) Sri Jayawardenepura'],
+  ['Kathmandu', 'GMT+05:45', '(GMT+05:45) Kathmandu'],
+  ['Almaty', 'GMT+06:00', '(GMT+06:00) Almaty'],
+  ['Astana', 'GMT+06:00', '(GMT+06:00) Astana'],
+  ['Dhaka', 'GMT+06:00', '(GMT+06:00) Dhaka'],
+  ['Novosibirsk', 'GMT+06:00', '(GMT+06:00) Novosibirsk'],
+  ['Rangoon', 'GMT+06:30', '(GMT+06:30) Rangoon'],
+  ['Bangkok', 'GMT+07:00', '(GMT+07:00) Bangkok'],
+  ['Hanoi', 'GMT+07:00', '(GMT+07:00) Hanoi'],
+  ['Jakarta', 'GMT+07:00', '(GMT+07:00) Jakarta'],
+  ['Krasnoyarsk', 'GMT+07:00', '(GMT+07:00) Krasnoyarsk'],
+  ['Beijing', 'GMT+08:00', '(GMT+08:00) Beijing'],
+  ['Chongqing', 'GMT+08:00', '(GMT+08:00) Chongqing'],
+  ['Hong Kong', 'GMT+08:00', '(GMT+08:00) Hong Kong'],
+  ['Irkutsk', 'GMT+08:00', '(GMT+08:00) Irkutsk'],
+  ['Kuala Lumpur', 'GMT+08:00', '(GMT+08:00) Kuala Lumpur'],
+  ['Perth', 'GMT+08:00', '(GMT+08:00) Perth'],
+  ['Singapore', 'GMT+08:00', '(GMT+08:00) Singapore'],
+  ['Taipei', 'GMT+08:00', '(GMT+08:00) Taipei'],
+  ['Ulaan Bataar', 'GMT+08:00', '(GMT+08:00) Ulaan Bataar'],
+  ['Urumqi', 'GMT+08:00', '(GMT+08:00) Urumqi'],
+  ['Osaka', 'GMT+09:00', '(GMT+09:00) Osaka'],
+  ['Sapporo', 'GMT+09:00', '(GMT+09:00) Sapporo'],
+  ['Seoul', 'GMT+09:00', '(GMT+09:00) Seoul'],
+  ['Tokyo', 'GMT+09:00', '(GMT+09:00) Tokyo'],
+  ['Yakutsk', 'GMT+09:00', '(GMT+09:00) Yakutsk'],
+  ['Adelaide', 'GMT+09:30', '(GMT+09:30) Adelaide'],
+  ['Darwin', 'GMT+09:30', '(GMT+09:30) Darwin'],
+  ['Brisbane', 'GMT+10:00', '(GMT+10:00) Brisbane'],
+  ['Canberra', 'GMT+10:00', '(GMT+10:00) Canberra'],
+  ['Guam', 'GMT+10:00', '(GMT+10:00) Guam'],
+  ['Hobart', 'GMT+10:00', '(GMT+10:00) Hobart'],
+  ['Melbourne', 'GMT+10:00', '(GMT+10:00) Melbourne'],
+  ['Port Moresby', 'GMT+10:00', '(GMT+10:00) Port Moresby'],
+  ['Sydney', 'GMT+10:00', '(GMT+10:00) Sydney'],
+  ['Vladivostok', 'GMT+10:00', '(GMT+10:00) Vladivostok'],
+  ['Kamchatka', 'GMT+11:00', '(GMT+11:00) Kamchatka'],
+  ['Magadan', 'GMT+11:00', '(GMT+11:00) Magadan'],
+  ['New Caledonia', 'GMT+11:00', '(GMT+11:00) New Caledonia'],
+  ['Solomon Is.', 'GMT+11:00', '(GMT+11:00) Solomon Is.'],
+  ['Auckland', 'GMT+12:00', '(GMT+12:00) Auckland'],
+  ['Fiji', 'GMT+12:00', '(GMT+12:00) Fiji'],
+  ['Marshall Is.', 'GMT+12:00', '(GMT+12:00) Marshall Is.'],
+  ['Wellington', 'GMT+12:00', '(GMT+12:00) Wellington'],
+  ["Nuku'alofa", 'GMT+13:00', "(GMT+13:00) Nuku'alofa"],
+];
+
+const verdocsSettingsOrganizationCss = "verdocs-settings-organization{display:-ms-flexbox;display:flex;padding:10px;font-size:18px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:6px;color:#33364b;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-settings-organization .columns{gap:20px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row}verdocs-settings-organization .column{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-settings-organization verdocs-text-input{margin:10px 0}verdocs-settings-organization verdocs-text-input input{height:32px}@media screen and (max-width: 600px){verdocs-settings-organization .columns{gap:0;-ms-flex-direction:column;flex-direction:column}}";
+
+const timeZoneOptions = TimeZones.map(tz => ({ value: tz[2], label: tz[2] }));
+const schema = z.object({
+  name: z.string().trim().min(1, 'Name is required').max(30),
+  business_name: z.string().trim().max(30).optional(),
+  contact_email: z.string().trim().email('Invalid email').optional().or(z.literal('')),
+  phone: z.preprocess(val => convertToE164(String(val).trim()), z.string().optional()),
+  address: z.string().trim().max(30).optional(),
+  address2: z.string().trim().max(30).optional(),
+  timezone: z.string().trim().optional(),
+  url: z.string().trim().optional(),
+});
+const VerdocsSettingsOrganization = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.organizationUpdated = createEvent(this, "organizationUpdated", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.valid = false;
+    this.dirty = false;
+    this.submitting = false;
+    this.name = '';
+    this.business_name = '';
+    this.contact_email = '';
+    this.phone = '';
+    this.address = '';
+    this.address2 = '';
+    this.timezone = '';
+    this.url = '';
+  }
+  componentWillLoad() {
+    this.endpoint.loadSession();
+    if (!this.endpoint.session) {
+      console.log('[SETTINGS] Must be authenticated');
+      return;
+    }
+  }
+  async componentDidLoad() {
+    const organization = await getOrganization(this.endpoint, this.endpoint.session.organization_id);
+    console.log('[SETTINGS] Loaded organization', organization);
+    this.resetForm(organization);
+  }
+  resetForm(organization) {
+    this.name = organization.name;
+    this.business_name = organization.business_name;
+    this.contact_email = organization.contact_email;
+    this.phone = organization.phone;
+    this.address = organization.address;
+    this.address2 = organization.address2;
+    this.timezone = organization.timezone;
+    this.url = organization.url;
+    this.dirty = false;
+    this.valid = true;
+  }
+  handleSubmit(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    updateOrganization(VerdocsEndpoint.getDefault(), this.endpoint.session.organization_id, {
+      name: this.name,
+      business_name: this.business_name,
+      contact_email: this.contact_email,
+      phone: this.phone,
+      address: this.address,
+      address2: this.address2,
+      timezone: this.timezone,
+      url: this.url,
+    })
+      .then(newOrganization => {
+      var _a;
+      console.log('[SETTINGS] Update result', newOrganization);
+      (_a = this.organizationUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, organization: newOrganization });
+      this.resetForm(newOrganization);
+    })
+      .catch(e => VerdocsToast(`Error updating organization: ${e.message}`, { style: 'error' }));
+  }
+  processFields() {
+    const validation = schema.safeParse({
+      name: this.name,
+      business_name: this.business_name,
+      contact_email: this.contact_email,
+      phone: this.phone,
+      address: this.address,
+      address2: this.address2,
+      timezone: this.timezone,
+      url: this.url,
+    });
+    console.log('[SETTINGS] Validation result', validation);
+    this.valid = validation.success;
+    this.dirty = true;
+  }
+  render() {
+    if (!this.endpoint.session) {
+      console.log('[SETTINGS] Must be authenticated');
+      return h(Host, { class: "authentication-required" }, "Must be authenticated");
+    }
+    return (h(Host, null, h("h1", null, "Organization Profile"), h("form", { onSubmit: e => this.handleSubmit(e) }, h("div", { class: "columns" }, h("div", { class: "column" }, h("verdocs-text-input", { id: "verdocs-organization-name", value: this.name, autocomplete: "off", label: "Name", required: true, placeholder: "Enter your organization's name...", onInput: (e) => (this.name = e.target.value), onFocusout: (e) => {
+        this.name = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-text-input", { id: "verdocs-organization-business-name", value: this.business_name, autocomplete: "off", label: "d/b/a", placeholder: "Enter your d/b/a, if any...", onInput: (e) => (this.business_name = e.target.value), onFocusout: (e) => {
+        this.business_name = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-text-input", { id: "verdocs-organization-url", value: this.url, autocomplete: "off", label: "Web URL", placeholder: "Enter your Web URL...", onInput: (e) => (this.url = e.target.value), onFocusout: (e) => {
+        this.url = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-text-input", { id: "verdocs-organization-phone", value: this.phone, autocomplete: "off", label: "Phone Number", placeholder: "Enter your phone number...", onInput: (e) => (this.phone = e.target.value), onFocusout: (e) => {
+        this.phone = e.target.value.trim();
+        this.processFields();
+      } })), h("div", { class: "column" }, h("verdocs-text-input", { id: "verdocs-organization-address", value: this.address, autocomplete: "off", label: "Address", required: true, placeholder: "Enter your address...", onInput: (e) => (this.address = e.target.value), onFocusout: (e) => {
+        this.address = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-text-input", { id: "verdocs-organization-address", value: this.address2, autocomplete: "off", label: "Address 2", required: true, placeholder: "Address line 2...", onInput: (e) => (this.address2 = e.target.value), onFocusout: (e) => {
+        this.address2 = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-text-input", { id: "verdocs-organization-address2", value: this.address2, clearable: true, autocomplete: "off", label: "Address 2", placeholder: "Enter your address...", onInput: (e) => (this.address2 = e.target.value), onFocusout: (e) => {
+        this.address2 = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-text-input", { id: "verdocs-organization-email", value: this.contact_email, clearable: true, autocomplete: "off", label: "Contact Email", placeholder: "Enter your contact email address...", onInput: (e) => (this.contact_email = e.target.value), onFocusout: (e) => {
+        this.contact_email = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-select-input", { options: timeZoneOptions, value: this.timezone, label: "Time Zone" }))), h("verdocs-button", { type: "submit", label: "Save", size: "normal", disabled: this.submitting || !this.dirty }))));
+  }
+  static get style() { return verdocsSettingsOrganizationCss; }
+}, [0, "verdocs-settings-organization", {
+    "endpoint": [16],
+    "valid": [32],
+    "dirty": [32],
+    "submitting": [32],
+    "name": [32],
+    "business_name": [32],
+    "contact_email": [32],
+    "phone": [32],
+    "address": [32],
+    "address2": [32],
+    "timezone": [32],
+    "url": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-settings-organization", "verdocs-button", "verdocs-help-icon", "verdocs-select-input", "verdocs-text-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-settings-organization":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsSettingsOrganization);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-select-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsSettingsOrganization as V, defineCustomElement as d };

package/dist/components/verdocs-settings-profile.d.ts

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

package/dist/components/verdocs-settings-profile.js

@@ -0,0 +1,6 @@
+import { V as VerdocsSettingsProfile$1, d as defineCustomElement$1 } from './verdocs-settings-profile2.js';
+
+const VerdocsSettingsProfile = VerdocsSettingsProfile$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsSettingsProfile, defineCustomElement };

package/dist/components/verdocs-settings-profile2.js

@@ -0,0 +1,142 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { z } from './index3.js';
+import { g as getCurrentProfile, u as updateProfile } from './Profiles.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import './Types.js';
+import { d as convertToE164 } from './utils.js';
+import { V as VerdocsToast } from './Toast.js';
+import { d as defineCustomElement$3 } from './verdocs-button2.js';
+import { d as defineCustomElement$2 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
+
+const verdocsSettingsProfileCss = "verdocs-settings-profile{display:-ms-flexbox;display:flex;padding:10px;font-size:18px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:6px;color:#33364b;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-settings-profile .columns{gap:20px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row}verdocs-settings-profile .column{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-settings-profile verdocs-text-input{margin:10px 0}verdocs-settings-profile verdocs-text-input input{height:32px}@media screen and (max-width: 600px){verdocs-settings-profile .columns{gap:0;-ms-flex-direction:column;flex-direction:column}}";
+
+const schema = z.object({
+  first_name: z.string().trim().min(1, 'First name is required').max(30),
+  last_name: z.string().trim().min(1, 'Last name is required').max(30),
+  email: z.string().trim().email('Invalid email').min(1, 'Email is required'),
+  phone: z.preprocess(val => convertToE164(String(val).trim()), z.string()),
+});
+const VerdocsSettingsProfile = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.profileUpdated = createEvent(this, "profileUpdated", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.valid = false;
+    this.dirty = false;
+    this.submitting = false;
+    this.first_name = '';
+    this.last_name = '';
+    this.email = '';
+    this.phone = '';
+  }
+  componentWillLoad() {
+    this.endpoint.loadSession();
+    if (!this.endpoint.session) {
+      console.log('[SETTINGS] Must be authenticated');
+      return;
+    }
+  }
+  async componentDidLoad() {
+    const profile = await getCurrentProfile(this.endpoint);
+    console.log('[SETTINGS] Loaded profile', profile);
+    this.resetForm(profile);
+  }
+  resetForm(profile) {
+    this.first_name = profile.first_name;
+    this.last_name = profile.last_name;
+    this.email = profile.email;
+    this.phone = profile.phone;
+    this.dirty = false;
+    this.valid = true;
+  }
+  handleSubmit(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    updateProfile(VerdocsEndpoint.getDefault(), this.endpoint.session.profile_id, {
+      first_name: this.first_name,
+      last_name: this.last_name,
+      phone: this.phone,
+    })
+      .then(newProfile => {
+      var _a;
+      console.log('[SETTINGS] Update result', newProfile);
+      (_a = this.profileUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, profile: newProfile });
+      this.resetForm(newProfile);
+    })
+      .catch(e => VerdocsToast(`Error updating profile: ${e.message}`, { style: 'error' }));
+  }
+  processFields() {
+    const validation = schema.safeParse({
+      first_name: this.first_name,
+      last_name: this.last_name,
+      email: this.email,
+      phone: this.phone,
+    });
+    console.log('[SETTINGS] Validation result', validation);
+    this.valid = validation.success;
+    this.dirty = true;
+  }
+  render() {
+    if (!this.endpoint.session) {
+      console.log('[SETTINGS] Must be authenticated');
+      return h(Host, { class: "authentication-required" }, "Must be authenticated");
+    }
+    return (h(Host, null, h("h1", null, "My Profile"), h("form", { onSubmit: e => this.handleSubmit(e) }, h("div", { class: "columns" }, h("div", { class: "column" }, h("verdocs-text-input", { id: "verdocs-profile-first-name", value: this.first_name, autocomplete: "off", label: "First Name", required: true, placeholder: "Enter your first name...", onInput: (e) => (this.first_name = e.target.value), onFocusout: (e) => {
+        this.first_name = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-text-input", { id: "verdocs-profile-last-name", value: this.last_name, autocomplete: "off", label: "Last Name", required: true, placeholder: "Enter your last name...", onInput: (e) => (this.last_name = e.target.value), onFocusout: (e) => {
+        this.last_name = e.target.value.trim();
+        this.processFields();
+      } })), h("div", { class: "column" }, h("verdocs-text-input", { id: "verdocs-profile-email", value: this.email, autocomplete: "off", label: "Email Address", required: true, disabled: true, placeholder: "Enter your email address...", onInput: (e) => (this.email = e.target.value), onFocusout: (e) => {
+        this.email = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-text-input", { id: "verdocs-profile-phone", value: this.phone, clearable: true, autocomplete: "off", label: "Phone Number", placeholder: "Enter your phone number...", onInput: (e) => (this.phone = e.target.value), onFocusout: (e) => {
+        this.phone = e.target.value.trim();
+        this.processFields();
+      } }))), h("verdocs-button", { type: "submit", label: "Save", size: "normal", disabled: this.submitting || !this.dirty }))));
+  }
+  static get style() { return verdocsSettingsProfileCss; }
+}, [0, "verdocs-settings-profile", {
+    "endpoint": [16],
+    "valid": [32],
+    "dirty": [32],
+    "submitting": [32],
+    "first_name": [32],
+    "last_name": [32],
+    "email": [32],
+    "phone": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-settings-profile", "verdocs-button", "verdocs-help-icon", "verdocs-text-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-settings-profile":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsSettingsProfile);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsSettingsProfile as V, defineCustomElement as d };

package/dist/components/verdocs-settings.d.ts

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

package/dist/components/verdocs-settings.js

@@ -0,0 +1,101 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { S as SDKError } from './errors.js';
+import { d as defineCustomElement$8 } from './verdocs-button2.js';
+import { d as defineCustomElement$7 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$6 } from './verdocs-loader2.js';
+import { d as defineCustomElement$5 } from './verdocs-select-input2.js';
+import { d as defineCustomElement$4 } from './verdocs-settings-organization2.js';
+import { d as defineCustomElement$3 } from './verdocs-settings-profile2.js';
+import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
+
+const verdocsSettingsCss = "verdocs-settings{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-settings .tabs{gap:4px;width:100%;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;border-bottom:1px solid #654dcb}verdocs-settings .tabs .tab{cursor:pointer;padding:5px 10px;color:#ffffff;background-color:#777777}verdocs-settings .tabs .tab.active{color:#ffffff;background-color:#654dcb}";
+
+const VerdocsSettings$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.tab = 'profile';
+  }
+  async componentWillLoad() {
+    var _a, _b, _c;
+    try {
+      this.endpoint.loadSession();
+      if (!this.endpoint.session) {
+        console.log('[SETTINGS] Unable to start session, must be authenticated');
+        return;
+      }
+    }
+    catch (e) {
+      console.log('[SETTINGS] Error with session', e);
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+    }
+  }
+  render() {
+    if (!this.endpoint.session) {
+      return (h(Host, null, h("verdocs-loader", null)));
+    }
+    return (h(Host, null, h("div", { class: "tabs" }, h("div", { class: `tab ${this.tab === 'profile' ? 'active' : ''}`, onClick: () => (this.tab = 'profile') }, "Profile"), h("div", { class: `tab ${this.tab === 'organization' ? 'active' : ''}`, onClick: () => (this.tab = 'organization') }, "Organization")), this.tab === 'profile' && h("verdocs-settings-profile", { endpoint: this.endpoint }), this.tab === 'organization' && h("verdocs-settings-organization", { endpoint: this.endpoint })));
+  }
+  static get style() { return verdocsSettingsCss; }
+}, [0, "verdocs-settings", {
+    "endpoint": [16],
+    "tab": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-settings", "verdocs-button", "verdocs-help-icon", "verdocs-loader", "verdocs-select-input", "verdocs-settings-organization", "verdocs-settings-profile", "verdocs-text-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-settings":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsSettings$1);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "verdocs-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "verdocs-select-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "verdocs-settings-organization":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-settings-profile":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VerdocsSettings = VerdocsSettings$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsSettings, defineCustomElement };