npm - @verdocs/web-sdk - Versions diffs - 1.9.25 → 1.9.30 - Mend

@verdocs/web-sdk 1.9.25 → 1.9.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (379) hide show

package/dist/components/verdocs-field-initial.js CHANGED Viewed

@@ -53,13 +53,13 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   render() {
     var _a, _b;
     const settings = getFieldSettings(this.field);
-    const value = this.tempInitials || settings.base64;
+    const value = settings.base64 || this.tempInitials;
     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);
     if (this.done) {
-      return h(Host, { class: { done: this.done } }, value && h("img", { src: this.tempInitials || settings.base64, alt: "Initials" }));
+      return h(Host, { class: { done: this.done } }, value && h("img", { src: value, alt: "Initials" }));
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, value ? (h("img", { src: this.tempInitials || settings.base64, alt: "Initials" })) : (h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), 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 } }, value ? (h("img", { src: value, alt: "Initials" })) : (h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), 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) }))))));

package/dist/components/verdocs-field-initial.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-field-initial.js","mappings":"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","names":["VerdocsFieldInitial"],"sources":["./src/components/elements/verdocs-field-initial/verdocs-field-initial.scss?tag=verdocs-field-initial","./src/components/elements/verdocs-field-initial/verdocs-field-initial.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-initial {\n font-family: $verdocs-primary-font;\n width: 83px;\n height: 36px;\n display: block;\n font-size: 11px;\n letter-spacing: 0.3px;\n background-color: transparent;\n transform-origin: bottom left;\n border: 1px solid rgba(0, 0, 0, 0.2);\n\n &.disabled {\n opacity: 0.5;\n }\n\n &.done {\n border: none;\n opacity: 1;\n }\n\n img {\n display: block;\n max-width: 100%;\n max-height: 100%;\n }\n\n button {\n box-sizing: border-box;\n border: none;\n color: rgba(0, 0, 0, 0.87);\n font-weight: 500;\n transform-origin: 0 0;\n height: 100%;\n width: 100%;\n background: none;\n font-size: 11px;\n\n &.hide {\n display: none;\n }\n }\n\n &.required {\n border: 1px solid $verdocs-red-1;\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.75s 2;\n }\n\n verdocs-button-panel {\n top: -3px;\n left: -2px;\n opacity: 0.5;\n z-index: 1000;\n cursor: pointer;\n position: absolute;\n transform: scale(0.6);\n\n &[data-active],\n &:hover {\n opacity: 1;\n }\n\n .icon {\n svg {\n fill: #333333;\n }\n\n &:hover {\n svg {\n fill: #000000;\n }\n }\n }\n }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/*\n Displays an initial field. If an initial already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt an initial.\n /\n@Component({\n tag: 'verdocs-field-initial',\n styleUrl: 'verdocs-field-initial.scss',\n shadow: false,\n})\nexport class VerdocsFieldInitial {\n /\n The document or template field to display.\n /\n @Prop() field: IDocumentField \| ITemplateField \| null = null;\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 The document or template field to display.\n /\n @Prop() initials: string = '';\n\n /\n If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n * changed, so it should typically only be enabled in the Builder.\n /\n @Prop() editable?: boolean = false;\n\n /\n If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n /\n @Prop() moveable?: boolean = false;\n\n /\n If set, the field is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 /\n Event emitted when an initial block is adopted by the user. The event detail will contain the base64 string of the initial image.\n /\n @Event({composed: true}) adopt: EventEmitter<string>;\n\n /\n Event emitted when the user cancels the process.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n * keypress.\n /\n @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n /\n Event fired on every character entered into / deleted from the field.\n */\n @Event({composed: true}) settingsPress: EventEmitter;\n\n @Method() async focusField() {\n this.handleShow();\n }\n\n @State()\n tempInitials: string = '';\n\n private dialog?: any;\n\n hideDialog() {\n this.dialog?.remove();\n this.dialog = null;\n }\n\n handleAdopt(e: any) {\n console.log('[INITIAL] Adopted initials');\n this.tempInitials = e.detail;\n this.fieldChange?.emit(this.tempInitials);\n this.hideDialog();\n }\n\n handleShow() {\n this.dialog = document.createElement('verdocs-initial-dialog');\n this.dialog.setAttribute('initials', this.initials);\n this.dialog.setAttribute('roleindex', this.roleindex);\n this.dialog.addEventListener('cancel', () => this.hideDialog());\n this.dialog.addEventListener('next', e => this.handleAdopt(e));\n document.body.append(this.dialog);\n }\n\n render() {\n const settings = getFieldSettings(this.field);\n const value = this.tempInitials \|\| settings.base64;\n const disabled = this.disabled ?? settings.disabled ?? false;\n const backgroundColor = this.field['rgba'] \|\| getRGBA(this.roleindex);\n\n if (this.done) {\n return <Host class={{done: this.done}}>{value && <img src={this.tempInitials \|\| settings.base64} alt=\"Initials\" />}</Host>;\n }\n\n return (\n <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n {value ? (\n <img src={this.tempInitials \|\| settings.base64} alt=\"Initials\" />\n ) : (\n <button class={{}} onClick={() => !disabled && this.handleShow()}>\n Initials\n </button>\n )}\n\n {this.editable && (\n <verdocs-button-panel icon={settingsIcon}>\n <h6>Field Settings</h6>\n <form>\n <verdocs-select-input\n label=\"Recipient\"\n options={[\n {label: 'Buyer', value: 'Buyer'},\n {label: 'Seller', value: 'Seller'},\n ]}\n />\n\n <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n </form>\n </verdocs-button-panel>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-field-initial.js","mappings":"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","names":["VerdocsFieldInitial"],"sources":["./src/components/elements/verdocs-field-initial/verdocs-field-initial.scss?tag=verdocs-field-initial","./src/components/elements/verdocs-field-initial/verdocs-field-initial.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-initial {\n font-family: $verdocs-primary-font;\n width: 83px;\n height: 36px;\n display: block;\n font-size: 11px;\n letter-spacing: 0.3px;\n background-color: transparent;\n transform-origin: bottom left;\n border: 1px solid rgba(0, 0, 0, 0.2);\n\n &.disabled {\n opacity: 0.5;\n }\n\n &.done {\n border: none;\n opacity: 1;\n }\n\n img {\n display: block;\n max-width: 100%;\n max-height: 100%;\n }\n\n button {\n box-sizing: border-box;\n border: none;\n color: rgba(0, 0, 0, 0.87);\n font-weight: 500;\n transform-origin: 0 0;\n height: 100%;\n width: 100%;\n background: none;\n font-size: 11px;\n\n &.hide {\n display: none;\n }\n }\n\n &.required {\n border: 1px solid $verdocs-red-1;\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.75s 2;\n }\n\n verdocs-button-panel {\n top: -3px;\n left: -2px;\n opacity: 0.5;\n z-index: 1000;\n cursor: pointer;\n position: absolute;\n transform: scale(0.6);\n\n &[data-active],\n &:hover {\n opacity: 1;\n }\n\n .icon {\n svg {\n fill: #333333;\n }\n\n &:hover {\n svg {\n fill: #000000;\n }\n }\n }\n }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/*\n Displays an initial field. If an initial already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt an initial.\n /\n@Component({\n tag: 'verdocs-field-initial',\n styleUrl: 'verdocs-field-initial.scss',\n shadow: false,\n})\nexport class VerdocsFieldInitial {\n /\n The document or template field to display.\n /\n @Prop() field: IDocumentField \| ITemplateField \| null = null;\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 The document or template field to display.\n /\n @Prop() initials: string = '';\n\n /\n If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n * changed, so it should typically only be enabled in the Builder.\n /\n @Prop() editable?: boolean = false;\n\n /\n If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n /\n @Prop() moveable?: boolean = false;\n\n /\n If set, the field is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 /\n Event emitted when an initial block is adopted by the user. The event detail will contain the base64 string of the initial image.\n /\n @Event({composed: true}) adopt: EventEmitter<string>;\n\n /\n Event emitted when the user cancels the process.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n * keypress.\n /\n @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n /\n Event fired on every character entered into / deleted from the field.\n */\n @Event({composed: true}) settingsPress: EventEmitter;\n\n @Method() async focusField() {\n this.handleShow();\n }\n\n @State()\n tempInitials: string = '';\n\n private dialog?: any;\n\n hideDialog() {\n this.dialog?.remove();\n this.dialog = null;\n }\n\n handleAdopt(e: any) {\n console.log('[INITIAL] Adopted initials');\n this.tempInitials = e.detail;\n this.fieldChange?.emit(this.tempInitials);\n this.hideDialog();\n }\n\n handleShow() {\n this.dialog = document.createElement('verdocs-initial-dialog');\n this.dialog.setAttribute('initials', this.initials);\n this.dialog.setAttribute('roleindex', this.roleindex);\n this.dialog.addEventListener('cancel', () => this.hideDialog());\n this.dialog.addEventListener('next', e => this.handleAdopt(e));\n document.body.append(this.dialog);\n }\n\n render() {\n const settings = getFieldSettings(this.field);\n const value = settings.base64 \|\| this.tempInitials;\n const disabled = this.disabled ?? settings.disabled ?? false;\n const backgroundColor = this.field['rgba'] \|\| getRGBA(this.roleindex);\n\n if (this.done) {\n return <Host class={{done: this.done}}>{value && <img src={value} alt=\"Initials\" />}</Host>;\n }\n\n return (\n <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n {value ? (\n <img src={value} alt=\"Initials\" />\n ) : (\n <button class={{}} onClick={() => !disabled && this.handleShow()}>\n Initials\n </button>\n )}\n\n {this.editable && (\n <verdocs-button-panel icon={settingsIcon}>\n <h6>Field Settings</h6>\n <form>\n <verdocs-select-input\n label=\"Recipient\"\n options={[\n {label: 'Buyer', value: 'Buyer'},\n {label: 'Seller', value: 'Seller'},\n ]}\n />\n\n <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n </form>\n </verdocs-button-panel>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/verdocs-field-radio-button.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { g as getRGBA } from './Colors.js';
 import { g as getFieldSettings } from './utils.js';
-const verdocsFieldRadioButtonCss = "verdocs-field-radio-button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:14px;height:14px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button.disabled{opacity:0.5}verdocs-field-radio-button.disabled.done{opacity:1}verdocs-field-radio-button.done input[type=radio]{margin:0;padding:0;width:10px;height:10px}verdocs-field-radio-button:not(.done) input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button:not(.done) input[type=radio]+label:before{content:\"\";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:10px;height:10px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button:not(.done) input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio-button:not(.done) input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button:not(.done) input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio-button:not(.done) input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required input[type=radio]+label:before{border:1px solid #cc0000}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+const verdocsFieldRadioButtonCss = "verdocs-field-radio-button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:14px;height:14px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button svg{margin-top:4px}verdocs-field-radio-button.disabled{opacity:0.5}verdocs-field-radio-button.disabled.done{opacity:1}verdocs-field-radio-button.done input[type=radio]{margin:0;padding:0;width:10px;height:10px}verdocs-field-radio-button:not(.done) input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button:not(.done) input[type=radio]+label:before{content:\"\";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:10px;height:10px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button:not(.done) input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio-button:not(.done) input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button:not(.done) input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio-button:not(.done) input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required input[type=radio]+label:before{border:1px solid #cc0000}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 const RadioIconUnselected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
 const RadioIconSelected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;

package/dist/components/verdocs-field-radio-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-field-radio-button.js","mappings":";;;;AAAA,MAAM,0BAA0B,GAAG,~~2rDAA2rD~~;;~~ACM9tD~~,MAAM,mBAAmB,GAAG,oNAAoN,CAAC;AAEjP,MAAM,iBAAiB,GAAG,6QAA6Q,CAAC;MAU3RA,yBAAuB;;;;iBAIsB,IAAI;kBAKnC,CAAC;oBAKG,KAAK;gBAKT,KAAK;qBAKD,CAAC;;EAE9B,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,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;IACtE,MAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,MAAM,CAAC,EAAE,EAAE,CAAC;IAE7C,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,EAAE,KAAK,EAAE,EAAC,QAAQ,EAAE,MAAM,EAAC,IACvD,YAAM,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,GAAG,iBAAiB,GAAG,mBAAmB,GAAI,CAC3E,EACP;KACH;IAED,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IAC5E,aACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,MAAM,CAAC,EAAE,EAChB,QAAQ,EAAE,QAAQ,CAAC,KAAK,EACxB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EACrB,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,EAC1B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,CAAC,QAAQ,GAC3B,EACF,aAAO,OAAO,EAAE,EAAE,GAAI,CACjB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VerdocsFieldRadioButton"],"sources":["./src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.scss?tag=verdocs-field-radio-button","./src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio-button {\n font-family: $verdocs-primary-font;\n width: 14px;\n height: 14px;\n display: block;\n font-size: 11px;\n position: relative;\n background-color: transparent;\n transform-origin: bottom left;\n border-radius: 100%;\n\n &.disabled {\n opacity: 0.5;\n }\n\n &.disabled.done {\n opacity: 1;\n }\n\n &.done input[type='radio'] {\n margin: 0;\n padding: 0;\n width: 10px;\n height: 10px;\n }\n\n &:not(.done) input[type='radio'] {\n position: absolute;\n opacity: 0;\n\n + label {\n &:before {\n content: '';\n //background: $verdocs-grey-3;\n border-radius: 100%;\n border: 1px solid rgba(0, 0, 0, 0.6);\n display: inline-block;\n width: 10px;\n height: 10px;\n position: absolute;\n left: 1px;\n top: 1px;\n cursor: pointer;\n text-align: center;\n transition: all 250ms ease;\n }\n }\n\n &:checked {\n + label {\n &:before {\n background-color: $verdocs-green;\n box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n }\n }\n }\n\n &:focus {\n + label {\n &:before {\n outline: none;\n border-color: $verdocs-green;\n }\n }\n }\n\n &:disabled {\n + label {\n &:before {\n box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n border-color: darken($verdocs-grey-3, 25%);\n background: darken($verdocs-grey-3, 25%);\n }\n }\n }\n\n + label {\n &:empty {\n &:before {\n margin-right: 0;\n }\n }\n }\n }\n\n &.required {\n input[type='radio'] {\n + label {\n &:before {\n border: 1px solid $verdocs-red-1;\n }\n }\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\nconst RadioIconUnselected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\nconst RadioIconSelected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\n/*\n Displays a radio button.\n /\n@Component({\n tag: 'verdocs-field-radio-button',\n styleUrl: 'verdocs-field-radio-button.scss',\n shadow: false,\n})\nexport class VerdocsFieldRadioButton {\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 is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 disabled = this.disabled ?? settings.disabled ?? false;\n const backgroundColor = this.field['rgba'] \|\| getRGBA(this.roleindex);\n const option = settings.options[this.option];\n const id = `${this.field.name}-${option.id}`;\n\n if (this.done) {\n return (\n <Host class={{done: this.done}} style={{maxWidth: '10px'}}>\n <span innerHTML={!!option.selected ? RadioIconSelected : RadioIconUnselected} />\n </Host>\n );\n }\n\n return (\n <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n <input\n id={id}\n type=\"radio\"\n value={option.id}\n tabIndex={settings.order}\n name={this.field.name}\n checked={!!option.selected}\n disabled={disabled}\n required={settings.required}\n />\n <label htmlFor={id} />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-field-radio-button.js","mappings":";;;;AAAA,MAAM,0BAA0B,GAAG,yuDAAyuD;;ACM5wD,MAAM,mBAAmB,GAAG,oNAAoN,CAAC;AAEjP,MAAM,iBAAiB,GAAG,6QAA6Q,CAAC;MAU3RA,yBAAuB;;;;iBAIsB,IAAI;kBAKnC,CAAC;oBAKG,KAAK;gBAKT,KAAK;qBAKD,CAAC;;EAE9B,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,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;IACtE,MAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,MAAM,CAAC,EAAE,EAAE,CAAC;IAE7C,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,EAAE,KAAK,EAAE,EAAC,QAAQ,EAAE,MAAM,EAAC,IACvD,YAAM,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,GAAG,iBAAiB,GAAG,mBAAmB,GAAI,CAC3E,EACP;KACH;IAED,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IAC5E,aACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,MAAM,CAAC,EAAE,EAChB,QAAQ,EAAE,QAAQ,CAAC,KAAK,EACxB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EACrB,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,EAC1B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,CAAC,QAAQ,GAC3B,EACF,aAAO,OAAO,EAAE,EAAE,GAAI,CACjB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VerdocsFieldRadioButton"],"sources":["./src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.scss?tag=verdocs-field-radio-button","./src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio-button {\n font-family: $verdocs-primary-font;\n width: 14px;\n height: 14px;\n display: block;\n font-size: 11px;\n position: relative;\n background-color: transparent;\n transform-origin: bottom left;\n border-radius: 100%;\n\n svg {\n margin-top: 4px;\n }\n\n &.disabled {\n opacity: 0.5;\n }\n\n &.disabled.done {\n opacity: 1;\n }\n\n &.done input[type='radio'] {\n margin: 0;\n padding: 0;\n width: 10px;\n height: 10px;\n }\n\n &:not(.done) input[type='radio'] {\n position: absolute;\n opacity: 0;\n\n + label {\n &:before {\n content: '';\n //background: $verdocs-grey-3;\n border-radius: 100%;\n border: 1px solid rgba(0, 0, 0, 0.6);\n display: inline-block;\n width: 10px;\n height: 10px;\n position: absolute;\n left: 1px;\n top: 1px;\n cursor: pointer;\n text-align: center;\n transition: all 250ms ease;\n }\n }\n\n &:checked {\n + label {\n &:before {\n background-color: $verdocs-green;\n box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n }\n }\n }\n\n &:focus {\n + label {\n &:before {\n outline: none;\n border-color: $verdocs-green;\n }\n }\n }\n\n &:disabled {\n + label {\n &:before {\n box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n border-color: darken($verdocs-grey-3, 25%);\n background: darken($verdocs-grey-3, 25%);\n }\n }\n }\n\n + label {\n &:empty {\n &:before {\n margin-right: 0;\n }\n }\n }\n }\n\n &.required {\n input[type='radio'] {\n + label {\n &:before {\n border: 1px solid $verdocs-red-1;\n }\n }\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\nconst RadioIconUnselected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\nconst RadioIconSelected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\n/*\n Displays a radio button.\n /\n@Component({\n tag: 'verdocs-field-radio-button',\n styleUrl: 'verdocs-field-radio-button.scss',\n shadow: false,\n})\nexport class VerdocsFieldRadioButton {\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 is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 disabled = this.disabled ?? settings.disabled ?? false;\n const backgroundColor = this.field['rgba'] \|\| getRGBA(this.roleindex);\n const option = settings.options[this.option];\n const id = `${this.field.name}-${option.id}`;\n\n if (this.done) {\n return (\n <Host class={{done: this.done}} style={{maxWidth: '10px'}}>\n <span innerHTML={!!option.selected ? RadioIconSelected : RadioIconUnselected} />\n </Host>\n );\n }\n\n return (\n <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n <input\n id={id}\n type=\"radio\"\n value={option.id}\n tabIndex={settings.order}\n name={this.field.name}\n checked={!!option.selected}\n disabled={disabled}\n required={settings.required}\n />\n <label htmlFor={id} />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/verdocs-field-signature2.js CHANGED Viewed

@@ -52,13 +52,13 @@ const VerdocsFieldSignature = /*@__PURE__*/ proxyCustomElement(class extends HTM
   render() {
     var _a, _b, _c;
     const settings = getFieldSettings(this.field);
-    const value = this.tempSignature || settings.base64;
+    const value = settings.base64 || this.tempSignature;
     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);
     if (this.done) {
-      return h(Host, { class: { done: this.done } }, value && h("img", { src: this.tempSignature || settings.base64, alt: "Signature" }));
+      return h(Host, { class: { done: this.done } }, value && h("img", { src: value, alt: "Signature" }));
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, value ? h("img", { src: this.tempSignature || settings.base64, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), 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: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, value ? h("img", { src: value, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), 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) }))))));

package/dist/components/verdocs-field-signature2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-field-signature2.js","mappings":";;;;;;;;;AAAA,MAAM,wBAAwB,GAAG,i4CAAi4C;;ACMl6C,MAAM,YAAY,GAChB,wrCAAwrC,CAAC;MAW9qC,qBAAqB;;;;;;iBAIwB,IAAI;gBAKpC,EAAE;oBAKG,KAAK;oBAML,KAAK;oBAKL,KAAK;gBAKT,KAAK;qBAKD,CAAC;yBAkBN,EAAE;;EANhB,MAAM,UAAU;IACxB,IAAI,CAAC,UAAU,EAAE,CAAC;IAClB,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;GAC9B;EAOD,UAAU;;IACR,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAC;IACtB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;EAED,WAAW,CAAC,CAAM;;IAChB,OAAO,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;IAC7C,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,MAAM,CAAC;IAC9B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC3C,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAED,UAAU;IACR,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;IACjE,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5C,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACtD,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;IAChE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/D,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACnC;EAED,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,KAAK,GAAG,~~IAAI~~,CAAC,~~aAAa~~,IAAI,~~QAAQ~~,CAAC,~~MAAM~~,CAAC;IACpD,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,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,IAAG,KAAK,IAAI,WAAK,GAAG,EAAE,~~IAAI~~,~~CAAC,aAAa,IAAI,QAAQ,CAAC,MAAM,~~EAAE,GAAG,EAAC,WAAW,GAAG,CAAQ,CAAC;~~KAC9H~~;IAED,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IAC9E,KAAK,GAAG,WAAK,GAAG,EAAE,~~IAAI~~,~~CAAC,aAAa,IAAI,QAAQ,CAAC,MAAM,~~EAAE,GAAG,EAAC,WAAW,GAAG,GAAG,cAAQ,OAAO,EAAE,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,gBAAoB,~~EAEvJ~~,IAAI,CAAC,QAAQ,KACZ,4BAAsB,IAAI,EAAE,YAAY,IACtC,+BAAuB,EACvB,gBACE,4BACE,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE;QACP,EAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAC;QAChC,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAC;OACnC,GACD,EAEF,0BAAoB,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,EAAE,EAAC,WAAW,EAAC,sBAAsB,EAAC,OAAO,EAAE,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAI,EAC1H,0BAAoB,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,EAAE,EAAC,WAAW,EAAC,qBAAqB,EAAC,OAAO,EAAE,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAI,CACrH,CACc,CACxB,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/elements/verdocs-field-signature/verdocs-field-signature.scss?tag=verdocs-field-signature","./src/components/elements/verdocs-field-signature/verdocs-field-signature.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-signature {\n font-family: $verdocs-primary-font;\n width: 83px;\n height: 36px;\n display: block;\n font-size: 11px;\n position: relative;\n letter-spacing: 0.3px;\n background-color: transparent;\n transform-origin: bottom left;\n border: 1px solid rgba(0, 0, 0, 0.2);\n\n &.disabled {\n opacity: 0.5;\n }\n\n &.done {\n border: none;\n opacity: 1;\n }\n\n img {\n display: block;\n max-width: 100%;\n max-height: 100%;\n }\n\n button {\n box-sizing: border-box;\n border: none;\n color: rgba(0, 0, 0, 0.87);\n font-weight: 500;\n transform-origin: 0 0;\n height: 100%;\n width: 100%;\n background: none;\n font-size: 11px;\n\n &.hide {\n display: none;\n }\n }\n\n &.required {\n border: 1px solid rgb(204, 0, 0);\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.75s 2;\n }\n\n verdocs-button-panel {\n top: -3px;\n left: -2px;\n opacity: 0.5;\n z-index: 1000;\n cursor: pointer;\n position: absolute;\n transform: scale(0.6);\n\n &[data-active],\n &:hover {\n opacity: 1;\n }\n\n .icon {\n svg {\n fill: #333333;\n }\n\n &:hover {\n svg {\n fill: #000000;\n }\n }\n }\n }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/*\n Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt a signature.\n /\n@Component({\n tag: 'verdocs-field-signature',\n styleUrl: 'verdocs-field-signature.scss',\n shadow: false,\n})\nexport class VerdocsFieldSignature {\n /\n The document or template field to display.\n /\n @Prop() field: IDocumentField \| ITemplateField \| null = null;\n\n /\n If set, the signature creation dialog will be initialized with this text.\n /\n @Prop() name?: string = '';\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, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n * changed, so it should typically only be enabled in the Builder.\n /\n @Prop() editable?: boolean = false;\n\n /\n If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n /\n @Prop() moveable?: boolean = false;\n\n /\n If set, the field is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 /\n Event emitted when the field has changed.\n /\n @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n /\n Event fired on every character entered into / deleted from the field.\n */\n @Event({composed: true}) settingsPress: EventEmitter;\n\n @Method() async focusField() {\n this.handleShow();\n console.log('focused', this);\n }\n\n @State()\n tempSignature: string = '';\n\n private dialog?: any;\n\n hideDialog() {\n this.dialog?.remove();\n this.dialog = null;\n }\n\n handleAdopt(e: any) {\n console.log('[SIGNATURE] Adopted signature');\n this.tempSignature = e.detail;\n this.fieldChange?.emit(this.tempSignature);\n this.hideDialog();\n }\n\n handleShow() {\n this.dialog = document.createElement('verdocs-signature-dialog');\n this.dialog.setAttribute('name', this.name);\n this.dialog.setAttribute('roleindex', this.roleindex);\n this.dialog.addEventListener('cancel', () => this.hideDialog());\n this.dialog.addEventListener('next', e => this.handleAdopt(e));\n document.body.append(this.dialog);\n }\n\n render() {\n const settings = getFieldSettings(this.field);\n const value = ~~this~~.~~tempSignature~~ \|\| ~~settings~~.~~base64~~;\n const disabled = this.disabled ?? settings.disabled ?? false;\n const backgroundColor = this.field['rgba'] \|\| getRGBA(this.roleindex);\n\n if (this.done) {\n return <Host class={{done: this.done}}>{value && <img src={~~this.tempSignature \|\| settings.base64~~} alt=\"Signature\" />}</Host>;\n }\n\n return (\n <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n {value ? <img src={~~this.tempSignature \|\| settings.base64~~} alt=\"Signature\" /> : <button onClick={() => !disabled && this.handleShow()}>Signature</button>}\n\n {this.editable && (\n <verdocs-button-panel icon={settingsIcon}>\n <h6>Field Settings</h6>\n <form>\n <verdocs-select-input\n label=\"Recipient\"\n options={[\n {label: 'Buyer', value: 'Buyer'},\n {label: 'Seller', value: 'Seller'},\n ]}\n />\n\n <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n </form>\n </verdocs-button-panel>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-field-signature2.js","mappings":"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","names":[],"sources":["./src/components/elements/verdocs-field-signature/verdocs-field-signature.scss?tag=verdocs-field-signature","./src/components/elements/verdocs-field-signature/verdocs-field-signature.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-signature {\n font-family: $verdocs-primary-font;\n width: 83px;\n height: 36px;\n display: block;\n font-size: 11px;\n position: relative;\n letter-spacing: 0.3px;\n background-color: transparent;\n transform-origin: bottom left;\n border: 1px solid rgba(0, 0, 0, 0.2);\n\n &.disabled {\n opacity: 0.5;\n }\n\n &.done {\n border: none;\n opacity: 1;\n }\n\n img {\n display: block;\n max-width: 100%;\n max-height: 100%;\n }\n\n button {\n box-sizing: border-box;\n border: none;\n color: rgba(0, 0, 0, 0.87);\n font-weight: 500;\n transform-origin: 0 0;\n height: 100%;\n width: 100%;\n background: none;\n font-size: 11px;\n\n &.hide {\n display: none;\n }\n }\n\n &.required {\n border: 1px solid rgb(204, 0, 0);\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.75s 2;\n }\n\n verdocs-button-panel {\n top: -3px;\n left: -2px;\n opacity: 0.5;\n z-index: 1000;\n cursor: pointer;\n position: absolute;\n transform: scale(0.6);\n\n &[data-active],\n &:hover {\n opacity: 1;\n }\n\n .icon {\n svg {\n fill: #333333;\n }\n\n &:hover {\n svg {\n fill: #000000;\n }\n }\n }\n }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/*\n Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt a signature.\n /\n@Component({\n tag: 'verdocs-field-signature',\n styleUrl: 'verdocs-field-signature.scss',\n shadow: false,\n})\nexport class VerdocsFieldSignature {\n /\n The document or template field to display.\n /\n @Prop() field: IDocumentField \| ITemplateField \| null = null;\n\n /\n If set, the signature creation dialog will be initialized with this text.\n /\n @Prop() name?: string = '';\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, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n * changed, so it should typically only be enabled in the Builder.\n /\n @Prop() editable?: boolean = false;\n\n /\n If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n /\n @Prop() moveable?: boolean = false;\n\n /\n If set, the field is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 /\n Event emitted when the field has changed.\n /\n @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n /\n Event fired on every character entered into / deleted from the field.\n */\n @Event({composed: true}) settingsPress: EventEmitter;\n\n @Method() async focusField() {\n this.handleShow();\n console.log('focused', this);\n }\n\n @State()\n tempSignature: string = '';\n\n private dialog?: any;\n\n hideDialog() {\n this.dialog?.remove();\n this.dialog = null;\n }\n\n handleAdopt(e: any) {\n console.log('[SIGNATURE] Adopted signature');\n this.tempSignature = e.detail;\n this.fieldChange?.emit(this.tempSignature);\n this.hideDialog();\n }\n\n handleShow() {\n this.dialog = document.createElement('verdocs-signature-dialog');\n this.dialog.setAttribute('name', this.name);\n this.dialog.setAttribute('roleindex', this.roleindex);\n this.dialog.addEventListener('cancel', () => this.hideDialog());\n this.dialog.addEventListener('next', e => this.handleAdopt(e));\n document.body.append(this.dialog);\n }\n\n render() {\n const settings = getFieldSettings(this.field);\n const value = settings.base64 \|\| this.tempSignature;\n const disabled = this.disabled ?? settings.disabled ?? false;\n const backgroundColor = this.field['rgba'] \|\| getRGBA(this.roleindex);\n\n if (this.done) {\n return <Host class={{done: this.done}}>{value && <img src={value} alt=\"Signature\" />}</Host>;\n }\n\n return (\n <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n {value ? <img src={value} alt=\"Signature\" /> : <button onClick={() => !disabled && this.handleShow()}>Signature</button>}\n\n {this.editable && (\n <verdocs-button-panel icon={settingsIcon}>\n <h6>Field Settings</h6>\n <form>\n <verdocs-select-input\n label=\"Recipient\"\n options={[\n {label: 'Buyer', value: 'Buyer'},\n {label: 'Seller', value: 'Seller'},\n ]}\n />\n\n <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n </form>\n </verdocs-button-panel>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/verdocs-field-textbox.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './verdocs-button-panel2.js';
 import { d as defineCustomElement$3 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
-const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{width:100%;height:100%;font-size:11px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox input:focus{outline:none}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}";
+const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;letter-spacing:-0.3px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{width:100%;height:100%;font-size:11px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox input:focus{outline:none}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}";
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

package/dist/components/verdocs-field-textbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-field-textbox.js","mappings":";;;;;;;;AAAA,MAAM,sBAAsB,GAAG,~~o0CAAo0C~~;;~~ACOn2C~~,MAAM,YAAY,GAChB,wrCAAwrC,CAAC;MAU9qCA,qBAAmB;;;;;iBAM0B,IAAI;oBAK/B,KAAK;oBAML,KAAK;oBAKL,KAAK;gBAKT,KAAK;qBAKD,CAAC;;EAOpB,MAAM,UAAU;IACxB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;GACjB;EAED,qBAAqB,CAAC,CAAM;;IAC1B,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;GACvC;EAED,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,IAAI,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC3D,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACtE,MAAM,KAAK,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,KAAI,EAAE,CAAC;IAErC,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,IAAG,KAAK,CAAQ,CAAC;KACvD;IAED,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IAChG,aACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,WAAW,EAClC,QAAQ,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,EACzB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAC9B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,GACzB,EACD,IAAI,CAAC,QAAQ,KACZ,4BAAsB,IAAI,EAAE,YAAY,IACtC,+BAAuB,EACvB,gBACE,4BACE,KAAK,EAAC,WAAW,EACjB,KAAK,EAAEC,KAAa,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,EAC9C,OAAO,EAAEA,KAAa,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,KAAK,EAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAC,CAAC,CAAC,EAC1E,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAC5C,EAEF,0BACE,KAAK,EAAC,YAAY,EAClB,KAAK,EAAC,EAAE,EACR,WAAW,EAAC,sBAAsB,EAClC,OAAO,EAAE,CAAC;QACR,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;OACvB,GACD,EACF,0BACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAC,EAAE,EACR,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,CAAC;QACR,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;OACvB,GACD,CACG,CACc,CACxB,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VerdocsFieldTextbox","TemplateStore"],"sources":["./src/components/elements/verdocs-field-textbox/verdocs-field-textbox.scss?tag=verdocs-field-textbox","./src/components/elements/verdocs-field-textbox/verdocs-field-textbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-textbox {\n font-family: $verdocs-primary-font;\n width: 150px;\n height: 15px;\n display: block;\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 input {\n width: 100%;\n height: 100%;\n font-size: 11px;\n background: none;\n font-weight: 500;\n transform-origin: 0 0;\n box-sizing: border-box;\n color: rgba(0, 0, 0, 0.87);\n border: 1px solid rgba(0, 0, 0, 0.2);\n\n &:focus {\n outline: none;\n }\n\n &.hide {\n display: none;\n }\n }\n\n &.required {\n border: 1px solid rgb(204, 0, 0);\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.75s 2;\n }\n\n verdocs-button-panel {\n top: -3px;\n left: -2px;\n opacity: 0.5;\n z-index: 1000;\n cursor: pointer;\n position: absolute;\n transform: scale(0.6);\n\n &[data-active],\n &:hover {\n opacity: 1;\n }\n\n .icon {\n svg {\n fill: #333333;\n }\n\n &:hover {\n svg {\n fill: #000000;\n }\n }\n }\n }\n\n // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n // LastPass is ignoring the data-lpignore attribute in some cases\n [data-lastpass-icon-root] {\n display: none !important;\n }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method} from '@stencil/core';\nimport TemplateStore from '../../../utils/templateStore';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/*\n Display a text input field.\n /\n@Component({\n tag: 'verdocs-field-textbox',\n styleUrl: 'verdocs-field-textbox.scss',\n shadow: false,\n})\nexport class VerdocsFieldTextbox {\n private el: HTMLInputElement;\n\n /\n The document or template field to display.\n /\n @Prop() field: IDocumentField \| ITemplateField \| null = null;\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, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n * changed, so it should typically only be enabled in the Builder.\n /\n @Prop() editable?: boolean = false;\n\n /\n If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n /\n @Prop() moveable?: boolean = false;\n\n /\n If set, the field is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 /\n Event fired if the field is configurable when the recipient has changed.\n */\n @Event({composed: true}) recipientChanged: EventEmitter<string>;\n\n @Method() async focusField() {\n this.el.focus();\n }\n\n handleChangeRecipient(e: any) {\n this.recipientChanged?.emit(e.detail);\n }\n\n render() {\n const settings = getFieldSettings(this.field);\n let disabled = this.disabled ?? settings.disabled ?? false;\n const backgroundColor = this.field['rgba'] \|\| getRGBA(this.roleindex);\n const value = settings?.result \|\| '';\n\n if (this.done) {\n return <Host class={{done: this.done}}>{value}</Host>;\n }\n\n return (\n <Host class={{required: this.field?.required, disabled, done: this.done}} style={{backgroundColor}}>\n <input\n type=\"text\"\n placeholder={settings?.placeholder}\n tabIndex={settings?.order}\n value={value}\n disabled={disabled}\n required={this.field?.required}\n ref={el => (this.el = el)}\n />\n {this.editable && (\n <verdocs-button-panel icon={settingsIcon}>\n <h6>Field Settings</h6>\n <form>\n <verdocs-select-input\n label=\"Recipient\"\n value={TemplateStore.roleNames[this.roleindex]}\n options={TemplateStore.roleNames.map(role => ({label: role, value: role}))}\n onChange={e => this.handleChangeRecipient(e)}\n />\n\n <verdocs-text-input\n label=\"Field Name\"\n value=\"\"\n placeholder=\"Stored field name...\"\n onInput={e => {\n e.stopPropagation();\n console.log('ipt', e);\n }}\n />\n <verdocs-text-input\n label=\"Placeholder\"\n value=\"\"\n placeholder=\"Placeholder text...\"\n onInput={e => {\n e.stopPropagation();\n console.log('ipt', e);\n }}\n />\n </form>\n </verdocs-button-panel>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-field-textbox.js","mappings":";;;;;;;;AAAA,MAAM,sBAAsB,GAAG,01CAA01C;;ACOz3C,MAAM,YAAY,GAChB,wrCAAwrC,CAAC;MAU9qCA,qBAAmB;;;;;iBAM0B,IAAI;oBAK/B,KAAK;oBAML,KAAK;oBAKL,KAAK;gBAKT,KAAK;qBAKD,CAAC;;EAOpB,MAAM,UAAU;IACxB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;GACjB;EAED,qBAAqB,CAAC,CAAM;;IAC1B,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;GACvC;EAED,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,IAAI,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC3D,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACtE,MAAM,KAAK,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,KAAI,EAAE,CAAC;IAErC,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,IAAG,KAAK,CAAQ,CAAC;KACvD;IAED,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IAChG,aACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,WAAW,EAClC,QAAQ,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,EACzB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAC9B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,GACzB,EACD,IAAI,CAAC,QAAQ,KACZ,4BAAsB,IAAI,EAAE,YAAY,IACtC,+BAAuB,EACvB,gBACE,4BACE,KAAK,EAAC,WAAW,EACjB,KAAK,EAAEC,KAAa,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,EAC9C,OAAO,EAAEA,KAAa,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,KAAK,EAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAC,CAAC,CAAC,EAC1E,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAC5C,EAEF,0BACE,KAAK,EAAC,YAAY,EAClB,KAAK,EAAC,EAAE,EACR,WAAW,EAAC,sBAAsB,EAClC,OAAO,EAAE,CAAC;QACR,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;OACvB,GACD,EACF,0BACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAC,EAAE,EACR,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,CAAC;QACR,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;OACvB,GACD,CACG,CACc,CACxB,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VerdocsFieldTextbox","TemplateStore"],"sources":["./src/components/elements/verdocs-field-textbox/verdocs-field-textbox.scss?tag=verdocs-field-textbox","./src/components/elements/verdocs-field-textbox/verdocs-field-textbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-textbox {\n font-family: $verdocs-primary-font;\n width: 150px;\n height: 15px;\n display: block;\n font-size: 11px;\n letter-spacing: -0.3px;\n position: relative;\n background-color: transparent;\n transform-origin: bottom left;\n\n &.disabled {\n opacity: 0.5;\n }\n\n input {\n width: 100%;\n height: 100%;\n font-size: 11px;\n background: none;\n font-weight: 500;\n transform-origin: 0 0;\n box-sizing: border-box;\n color: rgba(0, 0, 0, 0.87);\n border: 1px solid rgba(0, 0, 0, 0.2);\n\n &:focus {\n outline: none;\n }\n\n &.hide {\n display: none;\n }\n }\n\n &.required {\n border: 1px solid rgb(204, 0, 0);\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.75s 2;\n }\n\n verdocs-button-panel {\n top: -3px;\n left: -2px;\n opacity: 0.5;\n z-index: 1000;\n cursor: pointer;\n position: absolute;\n transform: scale(0.6);\n\n &[data-active],\n &:hover {\n opacity: 1;\n }\n\n .icon {\n svg {\n fill: #333333;\n }\n\n &:hover {\n svg {\n fill: #000000;\n }\n }\n }\n }\n\n // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n // LastPass is ignoring the data-lpignore attribute in some cases\n [data-lastpass-icon-root] {\n display: none !important;\n }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method} from '@stencil/core';\nimport TemplateStore from '../../../utils/templateStore';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/*\n Display a text input field.\n /\n@Component({\n tag: 'verdocs-field-textbox',\n styleUrl: 'verdocs-field-textbox.scss',\n shadow: false,\n})\nexport class VerdocsFieldTextbox {\n private el: HTMLInputElement;\n\n /\n The document or template field to display.\n /\n @Prop() field: IDocumentField \| ITemplateField \| null = null;\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, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n * changed, so it should typically only be enabled in the Builder.\n /\n @Prop() editable?: boolean = false;\n\n /\n If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n /\n @Prop() moveable?: boolean = false;\n\n /\n If set, the field is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 /\n Event fired if the field is configurable when the recipient has changed.\n */\n @Event({composed: true}) recipientChanged: EventEmitter<string>;\n\n @Method() async focusField() {\n this.el.focus();\n }\n\n handleChangeRecipient(e: any) {\n this.recipientChanged?.emit(e.detail);\n }\n\n render() {\n const settings = getFieldSettings(this.field);\n let disabled = this.disabled ?? settings.disabled ?? false;\n const backgroundColor = this.field['rgba'] \|\| getRGBA(this.roleindex);\n const value = settings?.result \|\| '';\n\n if (this.done) {\n return <Host class={{done: this.done}}>{value}</Host>;\n }\n\n return (\n <Host class={{required: this.field?.required, disabled, done: this.done}} style={{backgroundColor}}>\n <input\n type=\"text\"\n placeholder={settings?.placeholder}\n tabIndex={settings?.order}\n value={value}\n disabled={disabled}\n required={this.field?.required}\n ref={el => (this.el = el)}\n />\n {this.editable && (\n <verdocs-button-panel icon={settingsIcon}>\n <h6>Field Settings</h6>\n <form>\n <verdocs-select-input\n label=\"Recipient\"\n value={TemplateStore.roleNames[this.roleindex]}\n options={TemplateStore.roleNames.map(role => ({label: role, value: role}))}\n onChange={e => this.handleChangeRecipient(e)}\n />\n\n <verdocs-text-input\n label=\"Field Name\"\n value=\"\"\n placeholder=\"Stored field name...\"\n onInput={e => {\n e.stopPropagation();\n console.log('ipt', e);\n }}\n />\n <verdocs-text-input\n label=\"Placeholder\"\n value=\"\"\n placeholder=\"Placeholder text...\"\n onInput={e => {\n e.stopPropagation();\n console.log('ipt', e);\n }}\n />\n </form>\n </verdocs-button-panel>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/verdocs-field-timestamp.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$3 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 import { f as format } from './index2.js';
-const verdocsFieldTimestampCss = "verdocs-field-timestamp{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;opacity:0.5}verdocs-field-timestamp.done{opacity:1}verdocs-field-timestamp input{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:10px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid #cc0000}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-timestamp verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-timestamp verdocs-button-panel[data-active],verdocs-field-timestamp verdocs-button-panel:hover{opacity:1}verdocs-field-timestamp verdocs-button-panel .icon svg{fill:#333333}verdocs-field-timestamp verdocs-button-panel .icon:hover svg{fill:#000000}";
+const verdocsFieldTimestampCss = "verdocs-field-timestamp{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:10px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;opacity:0.5}verdocs-field-timestamp.done{opacity:1}verdocs-field-timestamp input{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:10px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid #cc0000}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-timestamp verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-timestamp verdocs-button-panel[data-active],verdocs-field-timestamp verdocs-button-panel:hover{opacity:1}verdocs-field-timestamp verdocs-button-panel .icon svg{fill:#333333}verdocs-field-timestamp verdocs-button-panel .icon:hover svg{fill:#000000}";
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 const VerdocsFieldTimestamp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

package/dist/components/verdocs-field-timestamp.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-field-timestamp.js","mappings":";;;;;;;;AAAA,MAAM,wBAAwB,GAAG,yuCAAyuC;;ACO1wC,MAAM,YAAY,GAChB,wrCAAwrC,CAAC;MAU9qCA,uBAAqB;;;;iBAMwB,IAAI;oBAK/B,KAAK;oBAML,KAAK;oBAKL,KAAK;gBAKT,KAAK;qBAKD,CAAC;;EAEpB,MAAM,UAAU;IACxB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;GACjB;EAED,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,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;IACtE,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAEzD,MAAM,EAAE,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;IAEzC,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,IAAG,SAAS,CAAQ,CAAC;KAC3D;IAED,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IAC/E,aACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,WAAW,EAClC,QAAQ,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK;;;MAGzB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,EACd,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,GACzB,EAED,IAAI,CAAC,QAAQ,KACZ,4BAAsB,IAAI,EAAE,YAAY,IACtC,+BAAuB,EACvB,gBACE,4BACE,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE;QACP,EAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAC;QAChC,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAC;OACnC,GACD,EAEF,0BAAoB,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,EAAE,EAAC,WAAW,EAAC,sBAAsB,EAAC,OAAO,EAAE,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAI,EAC1H,0BAAoB,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,EAAE,EAAC,WAAW,EAAC,qBAAqB,EAAC,OAAO,EAAE,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAI,CACrH,CACc,CACxB,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VerdocsFieldTimestamp"],"sources":["./src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.scss?tag=verdocs-field-timestamp","./src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-timestamp {\n font-family: $verdocs-primary-font;\n width: 150px;\n height: 15px;\n display: block;\n font-size: ~~11px~~;\n position: relative;\n background-color: transparent;\n transform-origin: bottom left;\n opacity: 0.5;\n\n &.done {\n opacity: 1;\n }\n\n input {\n box-sizing: border-box;\n color: rgba(0, 0, 0, 0.87);\n font-weight: 500;\n transform-origin: 0 0;\n height: 100%;\n width: 100%;\n background: none;\n font-size: 10px;\n border: 1px solid rgba(0, 0, 0, 0.2);\n\n &.hide {\n display: none;\n }\n }\n\n &.required {\n border: 1px solid rgb(204, 0, 0);\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.75s 2;\n }\n\n verdocs-button-panel {\n top: -3px;\n left: -2px;\n opacity: 0.5;\n z-index: 1000;\n cursor: pointer;\n position: absolute;\n transform: scale(0.6);\n\n &[data-active],\n &:hover {\n opacity: 1;\n }\n\n .icon {\n svg {\n fill: #333333;\n }\n\n &:hover {\n svg {\n fill: #000000;\n }\n }\n }\n }\n}\n","import {format} from 'date-fns';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Method} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/*\n Display a timestamp field.\n /\n@Component({\n tag: 'verdocs-field-timestamp',\n styleUrl: 'verdocs-field-timestamp.scss',\n shadow: false,\n})\nexport class VerdocsFieldTimestamp {\n private el: HTMLInputElement;\n\n /\n The document or template field to display.\n /\n @Prop() field: IDocumentField \| ITemplateField \| null = null;\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, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n * changed, so it should typically only be enabled in the Builder.\n /\n @Prop() editable?: boolean = false;\n\n /\n If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n /\n @Prop() moveable?: boolean = false;\n\n /\n If set, the field is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 @Method() async focusField() {\n this.el.focus();\n }\n\n render() {\n const settings = getFieldSettings(this.field);\n const disabled = this.disabled ?? settings.disabled ?? false;\n const backgroundColor = this.field['rgba'] \|\| getRGBA(this.roleindex);\n const value = settings.value \|\| new Date().toISOString();\n\n const dt = new Date(value);\n const formatted = format(dt, 'MMM d, y');\n\n if (this.done) {\n return <Host class={{done: this.done}}>{formatted}</Host>;\n }\n\n return (\n <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n <input\n type=\"text\"\n placeholder={settings?.placeholder}\n tabIndex={settings?.order}\n // TODO: It would really make more sense to show the date and time but the default width of 64px for this field\n // is encoded in a ton of existing entries in the database and is hard to change.\n value={formatted}\n disabled={true}\n ref={el => (this.el = el)}\n />\n\n {this.editable && (\n <verdocs-button-panel icon={settingsIcon}>\n <h6>Field Settings</h6>\n <form>\n <verdocs-select-input\n label=\"Recipient\"\n options={[\n {label: 'Buyer', value: 'Buyer'},\n {label: 'Seller', value: 'Seller'},\n ]}\n />\n\n <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n </form>\n </verdocs-button-panel>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-field-timestamp.js","mappings":";;;;;;;;AAAA,MAAM,wBAAwB,GAAG,yuCAAyuC;;ACO1wC,MAAM,YAAY,GAChB,wrCAAwrC,CAAC;MAU9qCA,uBAAqB;;;;iBAMwB,IAAI;oBAK/B,KAAK;oBAML,KAAK;oBAKL,KAAK;gBAKT,KAAK;qBAKD,CAAC;;EAEpB,MAAM,UAAU;IACxB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;GACjB;EAED,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,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;IACtE,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAEzD,MAAM,EAAE,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;IAEzC,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,IAAG,SAAS,CAAQ,CAAC;KAC3D;IAED,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IAC/E,aACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,WAAW,EAClC,QAAQ,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK;;;MAGzB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,EACd,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,GACzB,EAED,IAAI,CAAC,QAAQ,KACZ,4BAAsB,IAAI,EAAE,YAAY,IACtC,+BAAuB,EACvB,gBACE,4BACE,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE;QACP,EAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAC;QAChC,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAC;OACnC,GACD,EAEF,0BAAoB,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,EAAE,EAAC,WAAW,EAAC,sBAAsB,EAAC,OAAO,EAAE,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAI,EAC1H,0BAAoB,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,EAAE,EAAC,WAAW,EAAC,qBAAqB,EAAC,OAAO,EAAE,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAI,CACrH,CACc,CACxB,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VerdocsFieldTimestamp"],"sources":["./src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.scss?tag=verdocs-field-timestamp","./src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-timestamp {\n font-family: $verdocs-primary-font;\n width: 150px;\n height: 15px;\n display: block;\n font-size: 10px;\n position: relative;\n background-color: transparent;\n transform-origin: bottom left;\n opacity: 0.5;\n\n &.done {\n opacity: 1;\n }\n\n input {\n box-sizing: border-box;\n color: rgba(0, 0, 0, 0.87);\n font-weight: 500;\n transform-origin: 0 0;\n height: 100%;\n width: 100%;\n background: none;\n font-size: 10px;\n border: 1px solid rgba(0, 0, 0, 0.2);\n\n &.hide {\n display: none;\n }\n }\n\n &.required {\n border: 1px solid rgb(204, 0, 0);\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.75s 2;\n }\n\n verdocs-button-panel {\n top: -3px;\n left: -2px;\n opacity: 0.5;\n z-index: 1000;\n cursor: pointer;\n position: absolute;\n transform: scale(0.6);\n\n &[data-active],\n &:hover {\n opacity: 1;\n }\n\n .icon {\n svg {\n fill: #333333;\n }\n\n &:hover {\n svg {\n fill: #000000;\n }\n }\n }\n }\n}\n","import {format} from 'date-fns';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Method} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/*\n Display a timestamp field.\n /\n@Component({\n tag: 'verdocs-field-timestamp',\n styleUrl: 'verdocs-field-timestamp.scss',\n shadow: false,\n})\nexport class VerdocsFieldTimestamp {\n private el: HTMLInputElement;\n\n /\n The document or template field to display.\n /\n @Prop() field: IDocumentField \| ITemplateField \| null = null;\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, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n * changed, so it should typically only be enabled in the Builder.\n /\n @Prop() editable?: boolean = false;\n\n /\n If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n /\n @Prop() moveable?: boolean = false;\n\n /\n If set, the field is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop() done?: 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 @Method() async focusField() {\n this.el.focus();\n }\n\n render() {\n const settings = getFieldSettings(this.field);\n const disabled = this.disabled ?? settings.disabled ?? false;\n const backgroundColor = this.field['rgba'] \|\| getRGBA(this.roleindex);\n const value = settings.value \|\| new Date().toISOString();\n\n const dt = new Date(value);\n const formatted = format(dt, 'MMM d, y');\n\n if (this.done) {\n return <Host class={{done: this.done}}>{formatted}</Host>;\n }\n\n return (\n <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n <input\n type=\"text\"\n placeholder={settings?.placeholder}\n tabIndex={settings?.order}\n // TODO: It would really make more sense to show the date and time but the default width of 64px for this field\n // is encoded in a ton of existing entries in the database and is hard to change.\n value={formatted}\n disabled={true}\n ref={el => (this.el = el)}\n />\n\n {this.editable && (\n <verdocs-button-panel icon={settingsIcon}>\n <h6>Field Settings</h6>\n <form>\n <verdocs-select-input\n label=\"Recipient\"\n options={[\n {label: 'Buyer', value: 'Buyer'},\n {label: 'Seller', value: 'Seller'},\n ]}\n />\n\n <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n </form>\n </verdocs-button-panel>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/verdocs-ok-dialog2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './verdocs-button2.js';
-const verdocsOkDialogCss = "verdocs-ok-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-ok-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-ok-dialog .dialog{max-width:50%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-ok-dialog .heading{display:-ms-flexbox;display:flex;font-size:16px;-ms-flex-direction:row;flex-direction:row;padding:8px 16px;color:#ffffff;background:#46497d}verdocs-ok-dialog .content{font-size:16px;background:#ffffff;padding:20px}verdocs-ok-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}verdocs-ok-dialog .buttons verdocs-button{margin-left:16px}";
+const verdocsOkDialogCss = "verdocs-ok-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-ok-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-ok-dialog .dialog{max-width:50%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-ok-dialog .heading{display:-ms-flexbox;display:flex;font-size:16px;-ms-flex-direction:row;flex-direction:row;padding:8px 16px;font-weight:bold;color:#ffffff;background:#46497d}verdocs-ok-dialog .content{font-size:16px;background:#ffffff;padding:20px}verdocs-ok-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}verdocs-ok-dialog .buttons verdocs-button{margin-left:16px}";
 const VerdocsOkDialog = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/verdocs-ok-dialog2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-ok-dialog2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,~~ulCAAulC~~;;~~MCWrmC~~,eAAe;;;;;;mBAIA,EAAE;mBAKF,EAAE;sBAME,KAAK;;EAYnC,QAAQ;IACN,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;GAClB;EAED,YAAY;IACV,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;GACpB;;EAGD,aAAa,CAAC,CAAM;IAClB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,oBAAoB,EAAE;MAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACpB;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IACjE,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAO,EACzC,WAAK,KAAK,EAAC,SAAS,IAClB,WAAK,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,EAEhD,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,UAAU,GAAG,sBAAgB,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAI,GAAG,WAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,GAAI,EAC9I,sBAAgB,KAAK,EAAC,IAAI,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,GAAI,CACzD,CACF,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.scss?tag=verdocs-ok-dialog","./src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-ok-dialog {\n font-family: $primary-font;\n box-sizing: border-box;\n\n .background-overlay {\n position: absolute;\n z-index: 10000;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #0000007f;\n }\n\n .dialog {\n max-width: 50%;\n display: flex;\n flex-direction: column;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n }\n\n .heading {\n display: flex;\n font-size: 16px;\n flex-direction: row;\n padding: 8px 16px;\n color: $verdocs-grey-4;\n background: $verdocs-grey-blue;\n }\n\n .content {\n font-size: 16px;\n background: $verdocs-grey-4;\n padding: 20px;\n }\n\n .message {\n //white-space: pre;\n }\n\n .buttons {\n display: flex;\n margin: 20px 0 0 0;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n\n verdocs-button {\n margin-left: 16px;\n }\n }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host} from '@stencil/core';\n\n/*\n Display a simple text dialog box with an Ok button. This adds a partially-transparent overlay and screen-centered dialog\n * box with a message and optional header/title. An OK button is shown that will dismiss the message.\n * It can also be dismissed by clicking the background overlay.\n /\n@Component({\n tag: 'verdocs-ok-dialog',\n styleUrl: 'verdocs-ok-dialog.scss',\n})\nexport class VerdocsOkDialog {\n /\n The title of the dialog. \"title\" is a reserved word, so we use heading.\n /\n @Prop() heading: string = '';\n\n /\n The message content to display.\n /\n @Prop() message: string = '';\n\n /\n If set, a cancel button will also be displayed. Note that the dialog is always cancelable by clicking the background\n * overlay to dismiss it.\n /\n @Prop() showCancel: boolean = false;\n\n /\n Event fired when the user clicks the OK button.\n /\n @Event({composed: true}) next: EventEmitter;\n\n /\n Event fired when the user clicks the background overlay or Cancel button.\n */\n @Event({composed: true}) cancel: EventEmitter;\n\n handleOk() {\n this.next.emit();\n }\n\n handleCancel() {\n this.cancel.emit();\n }\n\n // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n handleDismiss(e: any) {\n if (e.target.className === 'background-overlay') {\n e.preventDefault();\n this.cancel.emit();\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n <div class=\"dialog\">\n <div class=\"heading\">{this.heading}</div>\n <div class=\"content\">\n <div class=\"message\" innerHTML={this.message} />\n\n <div class=\"buttons\">\n {this.showCancel ? <verdocs-button label=\"CANCEL\" variant=\"outline\" onClick={() => this.handleCancel()} /> : <div style={{display: 'none'}} />}\n <verdocs-button label=\"OK\" onClick={() => this.handleOk()} />\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-ok-dialog2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,wmCAAwmC;;MCWtnC,eAAe;;;;;;mBAIA,EAAE;mBAKF,EAAE;sBAME,KAAK;;EAYnC,QAAQ;IACN,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;GAClB;EAED,YAAY;IACV,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;GACpB;;EAGD,aAAa,CAAC,CAAM;IAClB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,oBAAoB,EAAE;MAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACpB;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IACjE,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAO,EACzC,WAAK,KAAK,EAAC,SAAS,IAClB,WAAK,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,EAEhD,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,UAAU,GAAG,sBAAgB,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAI,GAAG,WAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,GAAI,EAC9I,sBAAgB,KAAK,EAAC,IAAI,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,GAAI,CACzD,CACF,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.scss?tag=verdocs-ok-dialog","./src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-ok-dialog {\n font-family: $primary-font;\n box-sizing: border-box;\n\n .background-overlay {\n position: absolute;\n z-index: 10000;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #0000007f;\n }\n\n .dialog {\n max-width: 50%;\n display: flex;\n flex-direction: column;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n }\n\n .heading {\n display: flex;\n font-size: 16px;\n flex-direction: row;\n padding: 8px 16px;\n font-weight: bold;\n color: $verdocs-grey-4;\n background: $verdocs-grey-blue;\n }\n\n .content {\n font-size: 16px;\n background: $verdocs-grey-4;\n padding: 20px;\n }\n\n .message {\n //white-space: pre;\n }\n\n .buttons {\n display: flex;\n margin: 20px 0 0 0;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n\n verdocs-button {\n margin-left: 16px;\n }\n }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host} from '@stencil/core';\n\n/*\n Display a simple text dialog box with an Ok button. This adds a partially-transparent overlay and screen-centered dialog\n * box with a message and optional header/title. An OK button is shown that will dismiss the message.\n * It can also be dismissed by clicking the background overlay.\n /\n@Component({\n tag: 'verdocs-ok-dialog',\n styleUrl: 'verdocs-ok-dialog.scss',\n})\nexport class VerdocsOkDialog {\n /\n The title of the dialog. \"title\" is a reserved word, so we use heading.\n /\n @Prop() heading: string = '';\n\n /\n The message content to display.\n /\n @Prop() message: string = '';\n\n /\n If set, a cancel button will also be displayed. Note that the dialog is always cancelable by clicking the background\n * overlay to dismiss it.\n /\n @Prop() showCancel: boolean = false;\n\n /\n Event fired when the user clicks the OK button.\n /\n @Event({composed: true}) next: EventEmitter;\n\n /\n Event fired when the user clicks the background overlay or Cancel button.\n */\n @Event({composed: true}) cancel: EventEmitter;\n\n handleOk() {\n this.next.emit();\n }\n\n handleCancel() {\n this.cancel.emit();\n }\n\n // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n handleDismiss(e: any) {\n if (e.target.className === 'background-overlay') {\n e.preventDefault();\n this.cancel.emit();\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n <div class=\"dialog\">\n <div class=\"heading\">{this.heading}</div>\n <div class=\"content\">\n <div class=\"message\" innerHTML={this.message} />\n\n <div class=\"buttons\">\n {this.showCancel ? <verdocs-button label=\"CANCEL\" variant=\"outline\" onClick={() => this.handleCancel()} /> : <div style={{display: 'none'}} />}\n <verdocs-button label=\"OK\" onClick={() => this.handleOk()} />\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}