@verdocs/web-sdk 1.9.10 → 1.9.15

package/dist/components/verdocs-field-checkbox.js

@@ -1,4 +1,47 @@
-import { V as VerdocsFieldCheckbox$1, d as defineCustomElement$1 } from './verdocs-field-checkbox2.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getRGBA } from './Colors.js';
+import { g as getFieldSettings } from './utils.js';
+
+const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{content:\"\";position:absolute;display:block;top:1px;left:1px;width:10px;height:10px;border-radius:2px;border:1px solid rgba(0, 0, 0, 0.7)}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required label>input[type=checkbox]+*::before{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.field = null;
+    this.option = 0;
+    this.disabled = false;
+    this.roleindex = 0;
+  }
+  render() {
+    var _a, _b, _c, _d;
+    const settings = getFieldSettings(this.field);
+    const option = (_b = (_a = settings.options) === null || _a === void 0 ? void 0 : _a[this.option]) !== null && _b !== void 0 ? _b : { checked: false };
+    const disabled = (_d = (_c = this.disabled) !== null && _c !== void 0 ? _c : settings.disabled) !== null && _d !== void 0 ? _d : false;
+    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required }), h("span", null))));
+  }
+  static get style() { return verdocsFieldCheckboxCss; }
+}, [0, "verdocs-field-checkbox", {
+    "field": [16],
+    "option": [2],
+    "disabled": [4],
+    "roleindex": [2]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-field-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-field-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsFieldCheckbox$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
 
 const VerdocsFieldCheckbox = VerdocsFieldCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-checkbox.js.map

@@ -1 +1 @@
-{"file":"verdocs-field-checkbox.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"verdocs-field-checkbox.js","mappings":";;;;AAAA,MAAM,uBAAuB,GAAG,yhCAAyhC;;MCc5iCA,sBAAoB;;;;iBAIyB,IAAI;kBAKnC,CAAC;oBAKG,KAAK;qBAKL,CAAC;;EAE9B,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,MAAA,MAAA,QAAQ,CAAC,OAAO,0CAAG,IAAI,CAAC,MAAM,CAAC,mCAAI,EAAC,OAAO,EAAE,KAAK,EAAC,CAAC;IACnE,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEtE,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IAC5E,iBACE,aAAO,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,QAAQ,GAAI,EAC7H,eAAQ,CACF,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VerdocsFieldCheckbox"],"sources":["./src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.scss?tag=verdocs-field-checkbox","./src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.kallmanation.com/styling-a-checkbox-with-only-css\nverdocs-field-checkbox {\n  font-family: $verdocs-primary-font;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  label > input[type='checkbox'] {\n    display: none;\n  }\n\n  label > input[type='checkbox'] + *::before {\n    content: '';\n    position: absolute;\n    display: block;\n    top: 1px;\n    left: 1px;\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\n    //background: $verdocs-grey-3;\n    border: 1px solid rgba(0, 0, 0, 0.7);\n  }\n\n  label > input[type='checkbox']:checked + * {\n    color: $verdocs-green;\n  }\n\n  label > input[type='checkbox']:checked + *::before {\n    content: '✓';\n    color: white;\n    text-align: center;\n    background: $verdocs-green;\n    border-color: $verdocs-green;\n  }\n\n  &.required {\n    label > input[type='checkbox'] + *::before {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {Component, h, Host, Prop} from '@stencil/core';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a checkbox.\n */\n@Component({\n  tag: 'verdocs-field-checkbox',\n  styleUrl: 'verdocs-field-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldCheckbox {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The index of the settings option this particular checkbox is for\n   */\n  @Prop() option: number = 0;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const option = settings.options?.[this.option] ?? {checked: false};\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n        <label>\n          <input type=\"checkbox\" tabIndex={settings.order} checked={option.checked} disabled={disabled} required={settings.required} />\n          <span />\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-field-date.js

@@ -2563,42 +2563,39 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.__registerHost();
     this.settingsPress = createEvent(this, "settingsPress", 7);
     this.field = null;
-    this.recipient = undefined;
     this.disabled = false;
     this.editable = false;
     this.moveable = false;
     this.roleindex = 0;
-    this.focused = false;
     this.containerId = `verdocs-date-picker-${Math.random().toString(36).substring(2, 11)}`;
   }
   async focusField() {
-    this.focused = true;
     this.el.focus();
   }
   componentDidLoad() {
+    const { result } = getFieldSettings(this.field);
     flatpickr('#' + this.containerId, {
       positionElement: this.el,
-      onChange: (selectedDate, dateStr, instance) => {
-        console.log('Selected', selectedDate, dateStr, instance);
+      dateFormat: 'F d, Y',
+      defaultDate: result,
+      onChange: selectedDate => {
+        // console.log('Selected', selectedDate, dateStr, instance);
+        this.el.setAttribute('iso', selectedDate[0].toISOString());
+        const event = new window.Event('input');
+        this.el.dispatchEvent(event);
       },
     });
     // this.el.addEventListener('changeDate', (e: any) => {
     //   console.log('changeDate', e.detail.date.toISOString());
     // });
   }
-  handleBlur() {
-    this.focused = false;
-  }
-  handleFocus() {
-    this.focused = true;
-  }
   // NOTE: We don't use a "date" field here because browsers vary widely in their formatting of it.
   render() {
     var _a, _b;
     const settings = getFieldSettings(this.field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
-    return (h(Host, { class: { focused: this.focused, required: settings.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, required: settings.required, ref: el => (this.el = el), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus() }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon }, h("h6", null, "Field Settings"), h("form", null, h("verdocs-select-input", { label: "Recipient", options: [
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon }, h("h6", null, "Field Settings"), h("form", null, h("verdocs-select-input", { label: "Recipient", options: [
         { label: 'Buyer', value: 'Buyer' },
         { label: 'Seller', value: 'Seller' },
       ] }), h("verdocs-text-input", { label: "Field Name", value: "", placeholder: "Stored field name...", onInput: e => console.log('ipt', e) }), h("verdocs-text-input", { label: "Placeholder", value: "", placeholder: "Placeholder text...", onInput: e => console.log('ipt', e) }))))));
@@ -2606,12 +2603,10 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   static get style() { return verdocsFieldDateCss; }
 }, [0, "verdocs-field-date", {
     "field": [16],
-    "recipient": [16],
     "disabled": [4],
     "editable": [4],
     "moveable": [4],
     "roleindex": [2],
-    "focused": [32],
     "containerId": [32],
     "focusField": [64]
   }]);