npm - @verdocs/web-sdk - Versions diffs - 1.9.6 → 1.9.10 - Mend

@verdocs/web-sdk 1.9.6 → 1.9.10

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 (796) hide show

package/dist/components/index.d.ts CHANGED Viewed

@@ -49,6 +49,8 @@ export { VerdocsToggleButton as VerdocsToggleButton } from '../types/components/
 export { VerdocsToolbarIcon as VerdocsToolbarIcon } from '../types/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon';
 export { VerdocsUploadDialog as VerdocsUploadDialog } from '../types/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog';
 export { VerdocsView as VerdocsView } from '../types/components/embeds/verdocs-view/verdocs-view';
+export { VerdocsViewEnvelopeDocument as VerdocsViewEnvelopeDocument } from '../types/components/elements/verdocs-view-envelope-document/verdocs-view-envelope-document';
+export { VerdocsViewTemplateDocument as VerdocsViewTemplateDocument } from '../types/components/elements/verdocs-view-template-document/verdocs-view-template-document';
 /**
  * Used to manually set the base path where assets can be found.

package/dist/components/index.js CHANGED Viewed

@@ -49,5 +49,7 @@ export { VerdocsToggleButton, defineCustomElement as defineCustomElementVerdocsT
 export { VerdocsToolbarIcon, defineCustomElement as defineCustomElementVerdocsToolbarIcon } from './verdocs-toolbar-icon.js';
 export { VerdocsUploadDialog, defineCustomElement as defineCustomElementVerdocsUploadDialog } from './verdocs-upload-dialog.js';
 export { VerdocsView, defineCustomElement as defineCustomElementVerdocsView } from './verdocs-view.js';
+export { VerdocsViewEnvelopeDocument, defineCustomElement as defineCustomElementVerdocsViewEnvelopeDocument } from './verdocs-view-envelope-document.js';
+export { VerdocsViewTemplateDocument, defineCustomElement as defineCustomElementVerdocsViewTemplateDocument } from './verdocs-view-template-document.js';
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index.js","mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":[],"sourcesContent":[],"version":3}
1	+ {"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"utils.js","mappings":"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","names":[],"sources":["./node_modules/@verdocs/js-sdk/Utils/Fields.js","./src/utils/utils.ts"],"sourcesContent":["export function getRTop(y, fieldHeight, iTextHeight, yRatio) {\n return iTextHeight - (y + fieldHeight) * yRatio;\n}\nexport function getRLeft(x, ratio) {\n return x * ratio;\n}\nexport function getRValue(y, ratio) {\n return y * ratio;\n}\nexport function blobToBase64(image) {\n var fileReader = new FileReader();\n return new Promise(function (resolve, reject) {\n fileReader.onerror = function () {\n reject(new DOMException('Problem reading blob.'));\n };\n fileReader.onload = function () {\n resolve(fileReader.result);\n };\n fileReader.readAsDataURL(image);\n });\n}\nexport function rescale(r, n) {\n return r * n;\n}\n","// These should probably all move to JS-SDK\nimport {rescale} from '@verdocs/js-sdk/Utils/Fields';\n// import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Documents/Types';\nimport {IDocumentPageInfo} from './Types';\n\nexport const integerSequence = (start: number, count: number): number[] =>\n Array(count)\n .fill(1)\n .map((_, index) => index + start);\n\nexport const fullNameToInitials = (name: string) =>\n name\n .split(' ')\n .map(word => word[0])\n .join('');\n\nexport const defaultWidth = (field: ITemplateField \| IDocumentField) => {\n switch (field.type) {\n case 'attachment':\n case 'payment':\n return 24;\n case 'checkbox':\n case 'checkbox_group':\n case 'radio_button_group':\n return 14;\n case 'signature':\n case 'initial':\n return 82;\n }\n\n return 150;\n};\n\nexport const defaultHeight = (field: ITemplateField \| IDocumentField) => {\n switch (field.type) {\n case 'attachment':\n case 'payment':\n return 24;\n case 'checkbox':\n case 'checkbox_group':\n case 'radio_button_group':\n return 14;\n case 'signature':\n case 'initial':\n return 41;\n }\n\n return 50;\n};\n\nexport const setControlStyles = (el: HTMLElement, field: ITemplateField \| IDocumentField, xScale: number, yScale: number, option?: number) => {\n const settings = (field as ITemplateField).setting \|\| (field as IDocumentField).settings;\n let {x = 0, y = 0, width = defaultWidth(field), height = defaultHeight(field)} = settings;\n\n const optionSettings = option !== undefined && settings.options[option] ? settings.options[option] : null;\n if (optionSettings) {\n x = optionSettings.x ?? x;\n y = optionSettings.y ?? y;\n width = optionSettings.width ?? width;\n height = optionSettings.height ?? height;\n }\n\n el.style.width = `${width}px`;\n el.style.height = `${height}px`;\n el.style.position = 'absolute';\n el.style.left = `${rescale(xScale, x)}px`;\n el.style.bottom = `${rescale(yScale, y)}px`;\n el.style.transform = `scale(${xScale}, ${yScale})`;\n // el.style.backgroundColor = field['rgba'] \|\| getRGBA(roleIndex);\n};\n\nexport const getFieldId = (field: ITemplateField \| IDocumentField) => {\n return `verdocs-doc-fld-${field.name}`;\n};\n\nexport const getFieldOptionId = (field: ITemplateField, index: number) => {\n return `verdocs-doc-fld-${field.name}-${index}`;\n};\n\nexport const renderDocumentField = (\n field: ITemplateField,\n docPage: IDocumentPageInfo,\n roleIndex: number,\n handleFieldChange: (field: ITemplateField, e: any, optionId?: string) => void,\n disabled: boolean,\n editable: boolean = false,\n draggable: boolean = false,\n) => {\n const controlsDiv = document.getElementById(docPage.containerId + '-controls');\n if (!controlsDiv) {\n return;\n }\n\n switch (field.type) {\n case 'attachment':\n case 'date':\n case 'dropdown':\n case 'initial':\n case 'payment':\n case 'signature':\n case 'timestamp':\n case 'textarea':\n case 'textbox': {\n const id = getFieldId(field);\n const existingField = document.getElementById(id);\n if (existingField) {\n setControlStyles(existingField, field, docPage.xScale, docPage.yScale);\n return;\n }\n\n const el: any = document.createElement(`verdocs-field-${field.type}`);\n el.field = field;\n el.setAttribute('id', id);\n el.setAttribute('roleindex', roleIndex);\n if (disabled) {\n el.setAttribute('disabled', true);\n }\n if (editable) {\n el.setAttribute('editable', true);\n }\n if (draggable) {\n el.setAttribute('draggable', true);\n }\n el.addEventListener('fieldChange', e => handleFieldChange(field, e));\n setControlStyles(el, field, docPage.xScale, docPage.yScale);\n controlsDiv.appendChild(el);\n\n return el;\n }\n\n case 'checkbox_group':\n field.setting.options.forEach((_, checkboxIndex) => {\n const id = getFieldOptionId(field, checkboxIndex);\n const existingField = document.getElementById(id);\n if (existingField) {\n setControlStyles(existingField, field, docPage.xScale, docPage.yScale);\n return;\n }\n\n const cbEl: any = document.createElement(`verdocs-field-checkbox`);\n cbEl.field = field;\n cbEl.setAttribute('id', id);\n cbEl.setAttribute('roleindex', roleIndex);\n cbEl.setAttribute('option', checkboxIndex);\n if (disabled) {\n cbEl.setAttribute('disabled', true);\n }\n cbEl.addEventListener('fieldChange', e => handleFieldChange(field, e));\n setControlStyles(cbEl, field, docPage.xScale, docPage.yScale);\n controlsDiv.appendChild(cbEl);\n\n return cbEl;\n });\n\n break;\n\n case 'radio_button_group':\n field.setting.options.forEach((_, buttonIndex) => {\n const id = getFieldOptionId(field, buttonIndex);\n const existingField = document.getElementById(id);\n if (existingField) {\n setControlStyles(existingField, field, docPage.xScale, docPage.yScale);\n return;\n }\n\n const cbEl: any = document.createElement(`verdocs-field-radio-button`);\n cbEl.field = field;\n cbEl.setAttribute('id', id);\n cbEl.setAttribute('roleindex', roleIndex);\n cbEl.setAttribute('option', buttonIndex);\n if (disabled) {\n cbEl.setAttribute('disabled', true);\n }\n cbEl.addEventListener('fieldChange', e => handleFieldChange(field, e));\n setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, buttonIndex);\n controlsDiv.appendChild(cbEl);\n\n return cbEl;\n });\n\n break;\n\n // case 'attachment':\n // el = document.createElement('verdocs-field-attachment');\n // el.setAttribute('value', result \|\| '');\n // break;\n // case 'payment':\n // el = document.createElement('verdocs-field-payment');\n // break;\n default:\n console.log('[PREVIEW] Skipping unsupported field type', field);\n return null;\n }\n};\n\nexport const getRoleIndex = (roles: string[], role: string) => roles.indexOf(role) \|\| 0;\n\n// TODO: We can clean this up a lot if we alter the API to emit both setting and settings regardless of the source type,\n// but then merge the SDK types to encourage developers to use just `settings`.\nexport const getFieldSettings = (field: ITemplateField \| IDocumentField) => {\n if ((field as ITemplateField).setting) {\n return (field as ITemplateField).setting;\n }\n\n if ((field as IDocumentField).settings) {\n return (field as IDocumentField).settings;\n }\n\n return {x: 0, y: 0, required: false, disabled: false, result: '', value: ''};\n};\n"],"version":3}
1	+ {"file":"utils.js","mappings":"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","names":[],"sources":["./node_modules/@verdocs/js-sdk/Utils/Fields.js","./src/utils/utils.ts"],"sourcesContent":["export function getRTop(y, fieldHeight, iTextHeight, yRatio) {\n return iTextHeight - (y + fieldHeight) * yRatio;\n}\nexport function getRLeft(x, ratio) {\n return x * ratio;\n}\nexport function getRValue(y, ratio) {\n return y * ratio;\n}\nexport function blobToBase64(image) {\n var fileReader = new FileReader();\n return new Promise(function (resolve, reject) {\n fileReader.onerror = function () {\n reject(new DOMException('Problem reading blob.'));\n };\n fileReader.onload = function () {\n resolve(fileReader.result);\n };\n fileReader.readAsDataURL(image);\n });\n}\nexport function rescale(r, n) {\n return r * n;\n}\n","// These should probably all move to JS-SDK\nimport {rescale} from '@verdocs/js-sdk/Utils/Fields';\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 {IDocumentPageInfo} from './Types';\n\nexport const integerSequence = (start: number, count: number): number[] =>\n Array(count)\n .fill(1)\n .map((_, index) => index + start);\n\nexport const fullNameToInitials = (name: string) =>\n name\n .split(' ')\n .map(word => word[0])\n .join('');\n\nexport const defaultWidth = (field: ITemplateField \| IDocumentField) => {\n switch (field.type) {\n case 'attachment':\n case 'payment':\n return 24;\n case 'checkbox':\n case 'checkbox_group':\n case 'radio_button_group':\n return 14;\n case 'signature':\n case 'initial':\n return 82;\n }\n\n return 150;\n};\n\nexport const defaultHeight = (field: ITemplateField \| IDocumentField) => {\n switch (field.type) {\n case 'attachment':\n case 'payment':\n return 24;\n case 'checkbox':\n case 'checkbox_group':\n case 'radio_button_group':\n return 14;\n case 'signature':\n case 'initial':\n return 41;\n }\n\n return 50;\n};\n\nexport const setControlStyles = (el: HTMLElement, field: ITemplateField \| IDocumentField, xScale: number, yScale: number, option?: number) => {\n const settings = (field as ITemplateField).setting \|\| (field as IDocumentField).settings;\n let {x = 0, y = 0, width = defaultWidth(field), height = defaultHeight(field)} = settings;\n\n const optionSettings = option !== undefined && settings.options[option] ? settings.options[option] : null;\n if (optionSettings) {\n x = optionSettings.x ?? x;\n y = optionSettings.y ?? y;\n width = optionSettings.width ?? width;\n height = optionSettings.height ?? height;\n }\n\n el.style.width = `${width}px`;\n el.style.height = `${height}px`;\n el.style.position = 'absolute';\n el.style.left = `${rescale(xScale, x)}px`;\n el.style.bottom = `${rescale(yScale, y)}px`;\n el.style.transform = `scale(${xScale}, ${yScale})`;\n // el.style.backgroundColor = field['rgba'] \|\| getRGBA(roleIndex);\n};\n\nexport const getFieldId = (field: ITemplateField \| IDocumentField) => {\n return `verdocs-doc-fld-${field.name}`;\n};\n\nexport const getFieldOptionId = (field: ITemplateField, index: number) => {\n return `verdocs-doc-fld-${field.name}-${index}`;\n};\n\nexport const renderDocumentField = (\n field: ITemplateField,\n docPage: IDocumentPageInfo,\n roleIndex: number,\n handleFieldChange: (field: ITemplateField, e: any, optionId?: string) => void,\n disabled: boolean,\n editable: boolean = false,\n draggable: boolean = false,\n) => {\n const controlsDiv = document.getElementById(docPage.containerId + '-controls');\n if (!controlsDiv) {\n return;\n }\n\n switch (field.type) {\n case 'attachment':\n case 'date':\n case 'dropdown':\n case 'initial':\n case 'payment':\n case 'signature':\n case 'timestamp':\n case 'textarea':\n case 'textbox': {\n const id = getFieldId(field);\n const existingField = document.getElementById(id);\n if (existingField) {\n setControlStyles(existingField, field, docPage.xScale, docPage.yScale);\n return;\n }\n\n const el: any = document.createElement(`verdocs-field-${field.type}`);\n el.field = field;\n el.setAttribute('id', id);\n el.setAttribute('roleindex', roleIndex);\n if (disabled) {\n el.setAttribute('disabled', true);\n }\n if (editable) {\n el.setAttribute('editable', true);\n }\n if (draggable) {\n el.setAttribute('draggable', true);\n }\n el.addEventListener('fieldChange', e => handleFieldChange(field, e));\n setControlStyles(el, field, docPage.xScale, docPage.yScale);\n controlsDiv.appendChild(el);\n\n return el;\n }\n\n case 'checkbox_group':\n field.setting.options.forEach((_, checkboxIndex) => {\n const id = getFieldOptionId(field, checkboxIndex);\n const existingField = document.getElementById(id);\n if (existingField) {\n setControlStyles(existingField, field, docPage.xScale, docPage.yScale);\n return;\n }\n\n const cbEl: any = document.createElement(`verdocs-field-checkbox`);\n cbEl.field = field;\n cbEl.setAttribute('id', id);\n cbEl.setAttribute('roleindex', roleIndex);\n cbEl.setAttribute('option', checkboxIndex);\n if (disabled) {\n cbEl.setAttribute('disabled', true);\n }\n cbEl.addEventListener('fieldChange', e => handleFieldChange(field, e));\n setControlStyles(cbEl, field, docPage.xScale, docPage.yScale);\n controlsDiv.appendChild(cbEl);\n\n return cbEl;\n });\n\n break;\n\n case 'radio_button_group':\n field.setting.options.forEach((_, buttonIndex) => {\n const id = getFieldOptionId(field, buttonIndex);\n const existingField = document.getElementById(id);\n if (existingField) {\n setControlStyles(existingField, field, docPage.xScale, docPage.yScale);\n return;\n }\n\n const cbEl: any = document.createElement(`verdocs-field-radio-button`);\n cbEl.field = field;\n cbEl.setAttribute('id', id);\n cbEl.setAttribute('roleindex', roleIndex);\n cbEl.setAttribute('option', buttonIndex);\n if (disabled) {\n cbEl.setAttribute('disabled', true);\n }\n cbEl.addEventListener('fieldChange', e => handleFieldChange(field, e));\n setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, buttonIndex);\n controlsDiv.appendChild(cbEl);\n\n return cbEl;\n });\n\n break;\n\n // case 'attachment':\n // el = document.createElement('verdocs-field-attachment');\n // el.setAttribute('value', result \|\| '');\n // break;\n // case 'payment':\n // el = document.createElement('verdocs-field-payment');\n // break;\n default:\n console.log('[PREVIEW] Skipping unsupported field type', field);\n return null;\n }\n};\n\nexport const getRoleIndex = (roles: string[], role: string) => roles.indexOf(role) \|\| 0;\n\n// TODO: We can clean this up a lot if we alter the API to emit both setting and settings regardless of the source type,\n// but then merge the SDK types to encourage developers to use just `settings`.\nexport const getFieldSettings = (field: ITemplateField \| IDocumentField) => {\n if ((field as ITemplateField).setting) {\n return (field as ITemplateField).setting;\n }\n\n if ((field as IDocumentField).settings) {\n return (field as IDocumentField).settings;\n }\n\n return {x: 0, y: 0, required: false, disabled: false, result: '', value: ''};\n};\n"],"version":3}

package/dist/components/verdocs-auth.js CHANGED Viewed

@@ -95,14 +95,14 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
     if (this.isAuthenticated) {
       if (this.debug) {
-        return (h("div", { class: "status-result debug" }, h("verdocs-button", { label: "Logout", disabled: this.loggingIn, onPress: () => this.handleLogout() })));
+        return (h("div", { class: "status-result debug" }, h("verdocs-button", { label: "Logout", disabled: this.loggingIn, onClick: () => this.handleLogout() })));
       }
       return h("div", { class: "status-result" }, "Authenticated");
     }
     if (this.displayMode === 'signup') {
-      return (h("div", { class: "signup-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Sign up for an account"), h("h4", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Signup", disabled: this.loggingIn, onPress: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))));
+      return (h("div", { class: "signup-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Sign up for an account"), h("h4", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Signup", disabled: this.loggingIn, onClick: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))));
     }
-    return (h("div", { class: "login-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Log in to your account"), h("h4", null, "Don't have an account?", h("verdocs-button", { label: "Sign Up", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.loggingIn, onPress: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } })), this.loginError ? h("verdocs-ok-dialog", { open: true, heading: "Login Error", message: this.loginError, onClosed: () => this.handleClearError() }) : h("div", null)));
+    return (h("div", { class: "login-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Log in to your account"), h("h4", null, "Don't have an account?", h("verdocs-button", { label: "Sign Up", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.loggingIn, onClick: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } })), this.loginError ? h("verdocs-ok-dialog", { heading: "Login Error", message: this.loginError, onNext: () => this.handleClearError() }) : h("div", null)));
   }
   static get style() { return verdocsAuthCss; }
 }, [0, "verdocs-auth", {

package/dist/components/verdocs-auth.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-auth.js","mappings":"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","names":["VerdocsAuth","Auth.authenticateUser"],"sources":["./node_modules/@verdocs/js-sdk/Users/Auth.js","./src/components/embeds/verdocs-auth/verdocs-auth.scss?tag=verdocs-auth","./src/components/embeds/verdocs-auth/verdocs-auth.tsx"],"sourcesContent":["/*\n Authenticate to Verdocs via user/password authentication\n \n ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n * import {Transport} from '@verdocs/js-sdk/HTTP';\n \n const {accessToken} = await Auth.authenticateUser({ username: 'test@test.com', password: 'PASSWORD' });\n * Transport.setAuthToken(accessToken);\n * ```\n /\nexport var authenticateUser = function (endpoint, params) {\n return endpoint.api //\n .post('/authentication/login', params)\n .then(function (r) { return r.data; });\n};\n/\n Authenticate to Verdocs via client ID / Secret authentication. *NOTE: This is only suitable for\n NodeJS server-side applications. Never expose your Client Secret in a Web or Mobile app!** Also note\n * that access tokens may be cached by server-side apps (and this is recommended) but do expire after 2\n * hours. This expiration may change based on future security needs. Application developers are encouraged\n * to check the `exp` expiration field in the response accessToken and renew tokens after they expire.\n \n ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n * import {Transport} from '@verdocs/js-sdk/HTTP';\n \n const {accessToken} = await Auth.authenticateApp({ client_id: 'CLIENTID', client_secret: 'SECRET' });\n * Transport.setAuthToken(accessToken);\n * ```\n /\nexport var authenticateApp = function (endpoint, params) {\n return endpoint.api //\n .post('/authentication/login_client', {}, { headers: params })\n .then(function (r) { return r.data; });\n};\n/\n Validate a token. Only Verdocs tokens will be accepted. Most applications can decode tokens locally,\n * because tokens will be validated when API calls are made anyway. However, high-security applications\n * may use this endpoint to check if a token has been revoked.\n \n ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n \n const {valid} = await Auth.validateToken({ token });\n * if (!valid) {\n * window.alert('Session invalid or expired. Please re-authenticate.');\n * }\n * ```\n /\nexport var validateToken = function (endpoint, params) {\n return endpoint.api //\n .post('/token/isValid', params)\n .then(function (r) { return r.data; });\n};\n/\n If called before the session expires, this will refresh the caller's session and tokens.\n \n ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n * import {Transport} from '@verdocs/js-sdk/HTTP';\n \n const {accessToken} = await Auth.refreshTokens();\n * Transport.setAuthToken(accessToken);\n * ```\n /\nexport var refreshTokens = function (endpoint) {\n return endpoint.api //\n .get('/token')\n .then(function (r) { return r.data; });\n};\n/\n Update the caller's password. To help prevent CSRF attack vectors, the user's old password and email address are required.\n \n ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n \n const {status, message} = await Auth.updatePassword({ email, oldPassword, newPassword });\n * if (status !== 'OK') {\n * window.alert(`Password reset error: ${message}`);\n * }\n * ```\n /\nexport var updatePassword = function (endpoint, params) {\n return endpoint.api //\n .put('/user/update_password', params)\n .then(function (r) { return r.data; });\n};\n/\n Update the caller's email address.\n \n ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n \n const {profiles} = await Auth.updateEmail({ email: newEmail });\n * ```\n /\nexport var updateEmail = function (endpoint, params) {\n return endpoint.api //\n .put('/user/update_email', params)\n .then(function (r) { return r.data; });\n};\n","@import '../../../theme.scss';\n\nverdocs-auth {\n font-family: $verdocs-primary-font;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n .login-form,\n .signup-form {\n background: $verdocs-grey-4;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n display: flex;\n padding: 20px;\n width: 300px;\n max-width: 100%;\n }\n\n .logo {\n margin: 20px 0 30px;\n width: 128px;\n max-width: 100%;\n }\n\n h3 {\n text-align: center;\n font-weight: 400;\n font-size: 16px;\n line-height: 1.75;\n margin: 0;\n }\n\n h4 {\n text-align: center;\n font-weight: 400;\n font-size: 14px;\n line-height: 1.43;\n margin: 0;\n }\n\n .status-result {\n display: none;\n\n &.debug {\n white-space: pre-wrap;\n font-size: 14px;\n background: #fff;\n padding: 10px;\n display: block;\n flex-direction: row;\n justify-content: center;\n }\n }\n\n form {\n width: 100%;\n }\n\n verdocs-text-input {\n margin-bottom: 10px;\n }\n}\n","import {Auth} from '@verdocs/js-sdk/Users';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport {VerdocsEndpoint, TSession} from '@verdocs/js-sdk';\nimport {SDKError} from '../../../utils/errors';\n\nexport interface IAuthStatus {\n authenticated: boolean;\n session: TSession;\n}\n\n/\n Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that\n * occur during the process (especially successful completion). The success callback will be fired immediately if the\n * user is already authenticated with a valid session, so this component may not always display visibly.\n \n To simplify some types of authentication flows, a visibility flag can force this component to never display. This\n * allows you to susbcribe to notifications from the\n \n This embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide\n * container to allow sufficient space for the required forms.\n \n As noted below, the primary event is `authenticated`. This will always be fired at least once, immediately after\n * the widget is rendered and the user's status has been checked. It may be fired again as the user completes (or\n * cancels) authentication steps.\n \n Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\n * embed. This Element will reuse the same session produced by logging in via that Embed.\n \n ```typescript\n * interface IAuthStatus {\n * // If true, the user is authenticated with a valid session\n * authenticated: boolean;\n \n // Details for the user's session\n * session: IActiveSession \| null;\n * }\n * ```\n /\n@Component({\n tag: 'verdocs-auth',\n styleUrl: 'verdocs-auth.scss',\n shadow: false,\n})\nexport class VerdocsAuth {\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n Normally, if the user has a valid session, this embed will be invisible, otherwise it will display\n * login / signup forms. If this is set to false, this embed will be invisible in both cases. Apps may\n * use this to verify if a user has a valid session without needing a separate call to Verdocs JS SDK.\n /\n @Prop() visible: boolean = true;\n\n /\n By default, a Verdocs logo will be displayed above the login/signup forms. This may be used to\n * override its source. (Alternatively, you may simply hide it via CSS overrides.) Logos should be\n * in SVG format for best results.\n /\n @Prop() logo: string = 'https://verdocs.com/assets/blue-logo.svg';\n\n /\n If the user is authenticated, this embed will normally render invisibly. If debug is set true, a summary\n * if the user's session details will be displayed instead. This may be useful while debugging authentication\n * flows in new applications.\n /\n @Prop() debug: boolean = false;\n\n /\n Event fired when session authentication process has completed. Check the event contents for completion status.\n /\n @Event({composed: true}) authenticated: EventEmitter<IAuthStatus>;\n\n /\n Event fired if an error occurs. The event details will contain information about the error. Most errors will\n * terminate the process, and the calling application should correct the condition and re-render the component.\n */\n @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n @State() isAuthenticated: boolean = false;\n @State() displayMode: string = 'login';\n @State() username: string = '';\n @State() password: string = '';\n @State() loggingIn: boolean = false;\n @State() activeSession: TSession = null;\n @State() loginError: string \| null = null;\n\n componentWillLoad() {\n this.endpoint.loadSession();\n if (this.endpoint.session) {\n console.log('[AUTH] Authenticated');\n this.isAuthenticated = true;\n this.activeSession = this.endpoint.session;\n this.authenticated?.emit({authenticated: true, session: this.endpoint.session});\n } else {\n console.log('[AUTH] Anonymous');\n this.authenticated?.emit({authenticated: false, session: null});\n }\n }\n\n handleLogin() {\n this.loggingIn = true;\n Auth.authenticateUser(this.endpoint, {username: this.username, password: this.password})\n .then(r => {\n this.loggingIn = false;\n this.endpoint.setToken(r.accessToken);\n this.activeSession = this.endpoint.session;\n this.isAuthenticated = true;\n this.authenticated?.emit({authenticated: true, session: this.endpoint.session});\n })\n .catch(e => {\n console.log('[AUTH] Authentication error', e.response, JSON.stringify(e));\n this.loggingIn = false;\n this.activeSession = null;\n this.authenticated?.emit({authenticated: false, session: null});\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n\n if (e?.response?.status === 403) {\n this.loginError = 'Please check your username and password and try again.';\n }\n });\n }\n\n handleLogout() {\n this.endpoint.clearSession();\n this.isAuthenticated = false;\n this.authenticated?.emit({authenticated: false, session: null});\n }\n\n handleClearError() {\n this.loginError = null;\n }\n\n render() {\n if (!this.visible) {\n return <div style={{display: 'none'}}>Verdocs Auth Placeholder</div>;\n }\n\n if (this.isAuthenticated) {\n if (this.debug) {\n return (\n <div class=\"status-result debug\">\n <verdocs-button label=\"Logout\" disabled={this.loggingIn} onPress={() => this.handleLogout()} />\n </div>\n );\n }\n\n return <div class=\"status-result\">Authenticated</div>;\n }\n\n if (this.displayMode === 'signup') {\n return (\n <div class=\"signup-form\">\n <img src={this.logo} alt=\"Verdocs Logo\" class=\"logo\" />\n\n <h3>Sign up for an account</h3>\n <h4>\n Already have an account?\n <verdocs-button label=\"Log In\" variant=\"text\" onClick={() => (this.displayMode = 'login')} disabled={this.loggingIn} />\n </h4>\n\n <form onSubmit={() => this.handleLogin()}>\n <verdocs-text-input label=\"Email\" autocomplete=\"username\" value={this.username} onInput={(e: any) => (this.username = e.target.value)} disabled={this.loggingIn} />\n <verdocs-text-input\n label=\"Password\"\n type=\"password\"\n autocomplete=\"current-password\"\n value={this.password}\n onInput={(e: any) => (this.password = e.target.value)}\n disabled={this.loggingIn}\n />\n\n <verdocs-button\n label=\"Signup\"\n disabled={this.loggingIn}\n onPress={() => this.handleLogin()}\n style={{display: 'flex', justifyContent: 'center', margin: '30px auto 0'}}\n />\n </form>\n </div>\n );\n }\n\n return (\n <div class=\"login-form\">\n <img src={this.logo} alt=\"Verdocs Logo\" class=\"logo\" />\n\n <h3>Log in to your account</h3>\n <h4>\n Don't have an account?\n <verdocs-button label=\"Sign Up\" variant=\"text\" onClick={() => (this.displayMode = 'signup')} disabled={this.loggingIn} />\n </h4>\n\n <form onSubmit={() => this.handleLogin()}>\n <verdocs-text-input label=\"Email\" autocomplete=\"username\" value={this.username} onInput={(e: any) => (this.username = e.target.value)} disabled={this.loggingIn} />\n <verdocs-text-input\n label=\"Password\"\n type=\"password\"\n autocomplete=\"current-password\"\n value={this.password}\n onInput={(e: any) => (this.password = e.target.value)}\n disabled={this.loggingIn}\n />\n\n <verdocs-button\n label=\"Forgot Your Password?\"\n variant=\"text\"\n onClick={() => (this.displayMode = 'signup')}\n disabled={this.loggingIn}\n style={{display: 'flex', justifyContent: 'center', margin: '10px auto 20px'}}\n />\n\n <verdocs-button label=\"Login\" disabled={this.loggingIn} onPress={() => this.handleLogin()} style={{display: 'flex', justifyContent: 'center', margin: '10px auto 0'}} />\n </form>\n\n {this.loginError ? <verdocs-ok-dialog open={true} heading=\"Login Error\" message={this.loginError} onClosed={() => this.handleClearError()} /> : <div />}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-auth.js","mappings":"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","names":["VerdocsAuth","Auth.authenticateUser"],"sources":["./node_modules/@verdocs/js-sdk/Users/Auth.js","./src/components/embeds/verdocs-auth/verdocs-auth.scss?tag=verdocs-auth","./src/components/embeds/verdocs-auth/verdocs-auth.tsx"],"sourcesContent":["/*\n Authenticate to Verdocs via user/password authentication\n \n ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n * import {Transport} from '@verdocs/js-sdk/HTTP';\n \n const {accessToken} = await Auth.authenticateUser({ username: 'test@test.com', password: 'PASSWORD' });\n * Transport.setAuthToken(accessToken);\n * ```\n /\nexport var authenticateUser = function (endpoint, params) {\n return endpoint.api //\n .post('/authentication/login', params)\n .then(function (r) { return r.data; });\n};\n/\n Authenticate to Verdocs via client ID / Secret authentication. *NOTE: This is only suitable for\n NodeJS server-side applications. Never expose your Client Secret in a Web or Mobile app!** Also note\n * that access tokens may be cached by server-side apps (and this is recommended) but do expire after 2\n * hours. This expiration may change based on future security needs. Application developers are encouraged\n * to check the `exp` expiration field in the response accessToken and renew tokens after they expire.\n \n ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n * import {Transport} from '@verdocs/js-sdk/HTTP';\n \n const {accessToken} = await Auth.authenticateApp({ client_id: 'CLIENTID', client_secret: 'SECRET' });\n * Transport.setAuthToken(accessToken);\n * ```\n /\nexport var authenticateApp = function (endpoint, params) {\n return endpoint.api //\n .post('/authentication/login_client', {}, { headers: params })\n .then(function (r) { return r.data; });\n};\n/\n Validate a token. Only Verdocs tokens will be accepted. Most applications can decode tokens locally,\n * because tokens will be validated when API calls are made anyway. However, high-security applications\n * may use this endpoint to check if a token has been revoked.\n \n ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n \n const {valid} = await Auth.validateToken({ token });\n * if (!valid) {\n * window.alert('Session invalid or expired. Please re-authenticate.');\n * }\n * ```\n /\nexport var validateToken = function (endpoint, params) {\n return endpoint.api //\n .post('/token/isValid', params)\n .then(function (r) { return r.data; });\n};\n/\n If called before the session expires, this will refresh the caller's session and tokens.\n \n ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n * import {Transport} from '@verdocs/js-sdk/HTTP';\n \n const {accessToken} = await Auth.refreshTokens();\n * Transport.setAuthToken(accessToken);\n * ```\n /\nexport var refreshTokens = function (endpoint) {\n return endpoint.api //\n .get('/token')\n .then(function (r) { return r.data; });\n};\n/\n Update the caller's password. To help prevent CSRF attack vectors, the user's old password and email address are required.\n \n ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n \n const {status, message} = await Auth.updatePassword({ email, oldPassword, newPassword });\n * if (status !== 'OK') {\n * window.alert(`Password reset error: ${message}`);\n * }\n * ```\n /\nexport var updatePassword = function (endpoint, params) {\n return endpoint.api //\n .put('/user/update_password', params)\n .then(function (r) { return r.data; });\n};\n/\n Update the caller's email address.\n \n ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n \n const {profiles} = await Auth.updateEmail({ email: newEmail });\n * ```\n /\nexport var updateEmail = function (endpoint, params) {\n return endpoint.api //\n .put('/user/update_email', params)\n .then(function (r) { return r.data; });\n};\n","@import '../../../theme.scss';\n\nverdocs-auth {\n font-family: $verdocs-primary-font;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n .login-form,\n .signup-form {\n background: $verdocs-grey-4;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n display: flex;\n padding: 20px;\n width: 300px;\n max-width: 100%;\n }\n\n .logo {\n margin: 20px 0 30px;\n width: 128px;\n max-width: 100%;\n }\n\n h3 {\n text-align: center;\n font-weight: 400;\n font-size: 16px;\n line-height: 1.75;\n margin: 0;\n }\n\n h4 {\n text-align: center;\n font-weight: 400;\n font-size: 14px;\n line-height: 1.43;\n margin: 0;\n }\n\n .status-result {\n display: none;\n\n &.debug {\n white-space: pre-wrap;\n font-size: 14px;\n background: #fff;\n padding: 10px;\n display: block;\n flex-direction: row;\n justify-content: center;\n }\n }\n\n form {\n width: 100%;\n }\n\n verdocs-text-input {\n margin-bottom: 10px;\n }\n}\n","import {Auth} from '@verdocs/js-sdk/Users';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {TSession} from '@verdocs/js-sdk/Sessions/Types';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport {SDKError} from '../../../utils/errors';\n\nexport interface IAuthStatus {\n authenticated: boolean;\n session: TSession;\n}\n\n/\n Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that\n * occur during the process (especially successful completion). The success callback will be fired immediately if the\n * user is already authenticated with a valid session, so this component may not always display visibly.\n \n To simplify some types of authentication flows, a visibility flag can force this component to never display. This\n * allows you to susbcribe to notifications from the\n \n This embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide\n * container to allow sufficient space for the required forms.\n \n As noted below, the primary event is `authenticated`. This will always be fired at least once, immediately after\n * the widget is rendered and the user's status has been checked. It may be fired again as the user completes (or\n * cancels) authentication steps.\n \n Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\n * embed. This Element will reuse the same session produced by logging in via that Embed.\n \n ```typescript\n * interface IAuthStatus {\n * // If true, the user is authenticated with a valid session\n * authenticated: boolean;\n \n // Details for the user's session\n * session: IActiveSession \| null;\n * }\n * ```\n /\n@Component({\n tag: 'verdocs-auth',\n styleUrl: 'verdocs-auth.scss',\n shadow: false,\n})\nexport class VerdocsAuth {\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n Normally, if the user has a valid session, this embed will be invisible, otherwise it will display\n * login / signup forms. If this is set to false, this embed will be invisible in both cases. Apps may\n * use this to verify if a user has a valid session without needing a separate call to Verdocs JS SDK.\n /\n @Prop() visible: boolean = true;\n\n /\n By default, a Verdocs logo will be displayed above the login/signup forms. This may be used to\n * override its source. (Alternatively, you may simply hide it via CSS overrides.) Logos should be\n * in SVG format for best results.\n /\n @Prop() logo: string = 'https://verdocs.com/assets/blue-logo.svg';\n\n /\n If the user is authenticated, this embed will normally render invisibly. If debug is set true, a summary\n * if the user's session details will be displayed instead. This may be useful while debugging authentication\n * flows in new applications.\n /\n @Prop() debug: boolean = false;\n\n /\n Event fired when session authentication process has completed. Check the event contents for completion status.\n /\n @Event({composed: true}) authenticated: EventEmitter<IAuthStatus>;\n\n /\n Event fired if an error occurs. The event details will contain information about the error. Most errors will\n * terminate the process, and the calling application should correct the condition and re-render the component.\n */\n @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n @State() isAuthenticated: boolean = false;\n @State() displayMode: string = 'login';\n @State() username: string = '';\n @State() password: string = '';\n @State() loggingIn: boolean = false;\n @State() activeSession: TSession = null;\n @State() loginError: string \| null = null;\n\n componentWillLoad() {\n this.endpoint.loadSession();\n if (this.endpoint.session) {\n console.log('[AUTH] Authenticated');\n this.isAuthenticated = true;\n this.activeSession = this.endpoint.session;\n this.authenticated?.emit({authenticated: true, session: this.endpoint.session});\n } else {\n console.log('[AUTH] Anonymous');\n this.authenticated?.emit({authenticated: false, session: null});\n }\n }\n\n handleLogin() {\n this.loggingIn = true;\n Auth.authenticateUser(this.endpoint, {username: this.username, password: this.password})\n .then(r => {\n this.loggingIn = false;\n this.endpoint.setToken(r.accessToken);\n this.activeSession = this.endpoint.session;\n this.isAuthenticated = true;\n this.authenticated?.emit({authenticated: true, session: this.endpoint.session});\n })\n .catch(e => {\n console.log('[AUTH] Authentication error', e.response, JSON.stringify(e));\n this.loggingIn = false;\n this.activeSession = null;\n this.authenticated?.emit({authenticated: false, session: null});\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n\n if (e?.response?.status === 403) {\n this.loginError = 'Please check your username and password and try again.';\n }\n });\n }\n\n handleLogout() {\n this.endpoint.clearSession();\n this.isAuthenticated = false;\n this.authenticated?.emit({authenticated: false, session: null});\n }\n\n handleClearError() {\n this.loginError = null;\n }\n\n render() {\n if (!this.visible) {\n return <div style={{display: 'none'}}>Verdocs Auth Placeholder</div>;\n }\n\n if (this.isAuthenticated) {\n if (this.debug) {\n return (\n <div class=\"status-result debug\">\n <verdocs-button label=\"Logout\" disabled={this.loggingIn} onClick={() => this.handleLogout()} />\n </div>\n );\n }\n\n return <div class=\"status-result\">Authenticated</div>;\n }\n\n if (this.displayMode === 'signup') {\n return (\n <div class=\"signup-form\">\n <img src={this.logo} alt=\"Verdocs Logo\" class=\"logo\" />\n\n <h3>Sign up for an account</h3>\n <h4>\n Already have an account?\n <verdocs-button label=\"Log In\" variant=\"text\" onClick={() => (this.displayMode = 'login')} disabled={this.loggingIn} />\n </h4>\n\n <form onSubmit={() => this.handleLogin()}>\n <verdocs-text-input label=\"Email\" autocomplete=\"username\" value={this.username} onInput={(e: any) => (this.username = e.target.value)} disabled={this.loggingIn} />\n <verdocs-text-input\n label=\"Password\"\n type=\"password\"\n autocomplete=\"current-password\"\n value={this.password}\n onInput={(e: any) => (this.password = e.target.value)}\n disabled={this.loggingIn}\n />\n\n <verdocs-button\n label=\"Signup\"\n disabled={this.loggingIn}\n onClick={() => this.handleLogin()}\n style={{display: 'flex', justifyContent: 'center', margin: '30px auto 0'}}\n />\n </form>\n </div>\n );\n }\n\n return (\n <div class=\"login-form\">\n <img src={this.logo} alt=\"Verdocs Logo\" class=\"logo\" />\n\n <h3>Log in to your account</h3>\n <h4>\n Don't have an account?\n <verdocs-button label=\"Sign Up\" variant=\"text\" onClick={() => (this.displayMode = 'signup')} disabled={this.loggingIn} />\n </h4>\n\n <form onSubmit={() => this.handleLogin()}>\n <verdocs-text-input label=\"Email\" autocomplete=\"username\" value={this.username} onInput={(e: any) => (this.username = e.target.value)} disabled={this.loggingIn} />\n <verdocs-text-input\n label=\"Password\"\n type=\"password\"\n autocomplete=\"current-password\"\n value={this.password}\n onInput={(e: any) => (this.password = e.target.value)}\n disabled={this.loggingIn}\n />\n\n <verdocs-button\n label=\"Forgot Your Password?\"\n variant=\"text\"\n onClick={() => (this.displayMode = 'signup')}\n disabled={this.loggingIn}\n style={{display: 'flex', justifyContent: 'center', margin: '10px auto 20px'}}\n />\n\n <verdocs-button label=\"Login\" disabled={this.loggingIn} onClick={() => this.handleLogin()} style={{display: 'flex', justifyContent: 'center', margin: '10px auto 0'}} />\n </form>\n\n {this.loginError ? <verdocs-ok-dialog heading=\"Login Error\" message={this.loginError} onNext={() => this.handleClearError()} /> : <div />}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/verdocs-build.js CHANGED Viewed

@@ -1,24 +1,28 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { d as defineCustomElement$j } from './verdocs-button2.js';
-import { d as defineCustomElement$i } from './verdocs-button-panel2.js';
-import { d as defineCustomElement$h } from './verdocs-checkbox2.js';
-import { d as defineCustomElement$g } from './verdocs-document-page2.js';
-import { d as defineCustomElement$f } from './verdocs-field-signature2.js';
-import { d as defineCustomElement$e } from './verdocs-help-icon2.js';
-import { d as defineCustomElement$d } from './verdocs-loader2.js';
-import { d as defineCustomElement$c } from './verdocs-radio-button2.js';
-import { d as defineCustomElement$b } from './verdocs-select-input2.js';
-import { d as defineCustomElement$a } from './verdocs-signature-dialog2.js';
-import { d as defineCustomElement$9 } from './verdocs-template-create2.js';
-import { d as defineCustomElement$8 } from './verdocs-template-fields2.js';
-import { d as defineCustomElement$7 } from './verdocs-template-properties2.js';
-import { d as defineCustomElement$6 } from './verdocs-template-recipients2.js';
-import { d as defineCustomElement$5 } from './verdocs-template-sender-dialog2.js';
-import { d as defineCustomElement$4 } from './verdocs-text-input2.js';
-import { d as defineCustomElement$3 } from './verdocs-toolbar-icon2.js';
-import { d as defineCustomElement$2 } from './verdocs-view2.js';
+import { l as loadTemplate } from './Templates.js';
+import { S as SDKError } from './errors.js';
+import { d as defineCustomElement$l } from './verdocs-button2.js';
+import { d as defineCustomElement$k } from './verdocs-button-panel2.js';
+import { d as defineCustomElement$j } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$i } from './verdocs-document-page2.js';
+import { d as defineCustomElement$h } from './verdocs-field-signature2.js';
+import { d as defineCustomElement$g } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$f } from './verdocs-loader2.js';
+import { d as defineCustomElement$e } from './verdocs-radio-button2.js';
+import { d as defineCustomElement$d } from './verdocs-select-input2.js';
+import { d as defineCustomElement$c } from './verdocs-signature-dialog2.js';
+import { d as defineCustomElement$b } from './verdocs-template-create2.js';
+import { d as defineCustomElement$a } from './verdocs-template-fields2.js';
+import { d as defineCustomElement$9 } from './verdocs-template-properties2.js';
+import { d as defineCustomElement$8 } from './verdocs-template-recipients2.js';
+import { d as defineCustomElement$7 } from './verdocs-template-sender-dialog2.js';
+import { d as defineCustomElement$6 } from './verdocs-text-input2.js';
+import { d as defineCustomElement$5 } from './verdocs-toolbar-icon2.js';
+import { d as defineCustomElement$4 } from './verdocs-view2.js';
+import { d as defineCustomElement$3 } from './verdocs-view-envelope-document2.js';
+import { d as defineCustomElement$2 } from './verdocs-view-template-document2.js';
 const verdocsBuildCss = "verdocs-build{display:-ms-flexbox;display:flex;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}";
@@ -34,7 +38,28 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.pdfUrl = null;
     this.template = null;
   }
-  async componentDidLoad() { }
+  async componentWillLoad() {
+    var _a, _b, _c;
+    this.endpoint.loadSession();
+    if (!this.endpoint.session) {
+      console.log('[BUILD] Unable to start builder session, must be authenticated');
+      return;
+    }
+    if (!this.templateId) {
+      console.log(`[BUILD] No template ID specified, showing upload option`);
+      this.step = 'create';
+      return;
+    }
+    try {
+      console.log(`[BUILD] Loading template ${this.templateId}`);
+      await loadTemplate(this.endpoint, this.templateId);
+      this.step = 'fields';
+    }
+    catch (e) {
+      console.log('[BUILD] Error loading template', e);
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+    }
+  }
   handleCancel(e) {
     console.log('Cancel', e.detail);
     this.step = '';
@@ -52,7 +77,7 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.step = 'fields';
   }
   render() {
-    return (h(Host, null, this.step === 'create' && h("verdocs-template-create", { onCancel: e => this.handleCancel(e), onTemplateCreated: e => this.handleTemplateCreated(e) }), this.step === 'properties' && h("verdocs-template-properties", { onCancel: e => this.handleCancel(e), onSettingsUpdated: e => this.handlePropertiesUpdated(e) }), this.step === 'recipients' && h("verdocs-template-recipients", { onCancel: e => this.handleCancel(e), onSettingsUpdated: e => this.handleRecipientsUpdated(e) }), this.step === 'fields' && h("verdocs-template-fields", { onCancel: e => this.handleCancel(e), onSettingsUpdated: e => this.handleCancel(e) })));
+    return (h(Host, null, this.step === 'create' && h("verdocs-template-create", { onCancel: e => this.handleCancel(e), onNext: e => this.handleTemplateCreated(e) }), this.step === 'properties' && h("verdocs-template-properties", { onCancel: e => this.handleCancel(e), onNext: e => this.handlePropertiesUpdated(e) }), this.step === 'recipients' && h("verdocs-template-recipients", { onCancel: e => this.handleCancel(e), onNext: e => this.handleRecipientsUpdated(e) }), this.step === 'fields' && h("verdocs-template-fields", { onCancel: e => this.handleCancel(e), onNext: e => this.handleCancel(e) })));
   }
   static get style() { return verdocsBuildCss; }
 }, [0, "verdocs-build", {
@@ -66,7 +91,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-build", "verdocs-button", "verdocs-button-panel", "verdocs-checkbox", "verdocs-document-page", "verdocs-field-signature", "verdocs-help-icon", "verdocs-loader", "verdocs-radio-button", "verdocs-select-input", "verdocs-signature-dialog", "verdocs-template-create", "verdocs-template-fields", "verdocs-template-properties", "verdocs-template-recipients", "verdocs-template-sender-dialog", "verdocs-text-input", "verdocs-toolbar-icon", "verdocs-view"];
+  const components = ["verdocs-build", "verdocs-button", "verdocs-button-panel", "verdocs-checkbox", "verdocs-document-page", "verdocs-field-signature", "verdocs-help-icon", "verdocs-loader", "verdocs-radio-button", "verdocs-select-input", "verdocs-signature-dialog", "verdocs-template-create", "verdocs-template-fields", "verdocs-template-properties", "verdocs-template-recipients", "verdocs-template-sender-dialog", "verdocs-text-input", "verdocs-toolbar-icon", "verdocs-view", "verdocs-view-envelope-document", "verdocs-view-template-document"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-build":
       if (!customElements.get(tagName)) {
@@ -75,90 +100,100 @@ function defineCustomElement$1() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$l();
       }
       break;
     case "verdocs-button-panel":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$k();
       }
       break;
     case "verdocs-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$j();
       }
       break;
     case "verdocs-document-page":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$i();
       }
       break;
     case "verdocs-field-signature":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$h();
       }
       break;
     case "verdocs-help-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$g();
       }
       break;
     case "verdocs-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$f();
       }
       break;
     case "verdocs-radio-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$e();
       }
       break;
     case "verdocs-select-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$d();
       }
       break;
     case "verdocs-signature-dialog":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$c();
       }
       break;
     case "verdocs-template-create":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$b();
       }
       break;
     case "verdocs-template-fields":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$a();
       }
       break;
     case "verdocs-template-properties":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$9();
       }
       break;
     case "verdocs-template-recipients":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$8();
       }
       break;
     case "verdocs-template-sender-dialog":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$7();
       }
       break;
     case "verdocs-text-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$6();
       }
       break;
     case "verdocs-toolbar-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$5();
       }
       break;
     case "verdocs-view":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-view-envelope-document":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-view-template-document":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/verdocs-build.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-build.js","mappings":"~~;;;;;;;;;;;;;;;;;;;;;;~~AAAA,MAAM,eAAe,GAAG,qOAAqO;;MCchPA,cAAY;;;;;IAqBvB,WAAM,GAAqB,EAAE,CAAC;oBAjBM,eAAe,CAAC,UAAU,EAAE;sBAK5B,IAAI;gBAQxB,QAAQ;kBACN,IAAI;oBACgB,IAAI;;EAI1C,MAAM,~~gBAAgB~~,~~MAAK~~;~~EAE3B~~,YAAY,CAAC,CAAM;IACjB,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;GAChB;EAED,qBAAqB,CAAC,CAAM;IAC1B,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;IACjC,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC;GAC1B;EAED,uBAAuB,CAAC,CAAM;IAC5B,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;IACjC,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC;GAC1B;EAED,uBAAuB,CAAC,CAAM;IAC5B,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;IACjC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;GACtB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,+BAAyB,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,~~iBAAiB~~,EAAE,CAAC,IAAI,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAAI,~~EACjJ~~,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,mCAA6B,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,~~iBAAiB~~,EAAE,CAAC,IAAI,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,GAAI,~~EAC3J~~,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,mCAA6B,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,~~iBAAiB~~,EAAE,CAAC,IAAI,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,GAAI,~~EAC3J~~,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,+BAAyB,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,~~iBAAiB~~,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,~~CACpI~~,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["VerdocsBuild"],"sources":["./src/components/embeds/verdocs-build/verdocs-build.scss?tag=verdocs-build","./src/components/embeds/verdocs-build/verdocs-build.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-build {\n display: flex;\n font-family: $verdocs-primary-font;\n justify-content: center;\n align-items: center;\n}\n","import {~~Event, EventEmitter, Host~~} from '@~~stencil~~/~~core~~';\nimport {~~VerdocsEndpoint~~} from '@verdocs/js-sdk';\nimport {Component, Prop, State, h} from '@stencil/core';\nimport {~~ITemplate, ITemplateField~~} from '~~@verdocs~~/~~js-sdk/~~Templates~~/Types~~';\nimport {SDKError} from '../../../utils/errors';\n\n/*\n Display a template building experience.\n /\n@Component({\n tag: 'verdocs-build',\n styleUrl: 'verdocs-build.scss',\n shadow: false,\n})\nexport class VerdocsBuild {\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The ID of the template to create the document from.\n /\n @Prop() templateId: string \| null = null;\n\n /\n Event fired if an error occurs. The event details will contain information about the error. Most errors will\n * terminate the process, and the calling application should correct the condition and re-render the component.\n */\n @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n @State() step = 'create';\n @State() pdfUrl = null;\n @State() template: ITemplate \| null = null;\n\n fields: ITemplateField[] = [];\n\n async ~~componentDidLoad~~() {}\n\n handleCancel(e: any) {\n console.log('Cancel', e.detail);\n this.step = '';\n }\n\n handleTemplateCreated(e: any) {\n console.log('Created', e.detail);\n this.step = 'properties';\n }\n\n handlePropertiesUpdated(e: any) {\n console.log('updated', e.detail);\n this.step = 'recipients';\n }\n\n handleRecipientsUpdated(e: any) {\n console.log('updated', e.detail);\n this.step = 'fields';\n }\n\n render() {\n return (\n <Host>\n {this.step === 'create' && <verdocs-template-create onCancel={e => this.handleCancel(e)} ~~onTemplateCreated~~={e => this.handleTemplateCreated(e)} />}\n {this.step === 'properties' && <verdocs-template-properties onCancel={e => this.handleCancel(e)} ~~onSettingsUpdated~~={e => this.handlePropertiesUpdated(e)} />}\n {this.step === 'recipients' && <verdocs-template-recipients onCancel={e => this.handleCancel(e)} ~~onSettingsUpdated~~={e => this.handleRecipientsUpdated(e)} />}\n {this.step === 'fields' && <verdocs-template-fields onCancel={e => this.handleCancel(e)} ~~onSettingsUpdated~~={e => this.handleCancel(e)} />}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-build.js","mappings":"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","names":["VerdocsBuild"],"sources":["./src/components/embeds/verdocs-build/verdocs-build.scss?tag=verdocs-build","./src/components/embeds/verdocs-build/verdocs-build.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-build {\n display: flex;\n font-family: $verdocs-primary-font;\n justify-content: center;\n align-items: center;\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {ITemplate, ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, Prop, State, h, Event, EventEmitter, Host} from '@stencil/core';\nimport {loadTemplate} from '../../../utils/Templates';\nimport {SDKError} from '../../../utils/errors';\n\n/*\n Display a template building experience.\n /\n@Component({\n tag: 'verdocs-build',\n styleUrl: 'verdocs-build.scss',\n shadow: false,\n})\nexport class VerdocsBuild {\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The ID of the template to create the document from.\n /\n @Prop() templateId: string \| null = null;\n\n /\n Event fired if an error occurs. The event details will contain information about the error. Most errors will\n * terminate the process, and the calling application should correct the condition and re-render the component.\n */\n @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n @State() step = 'create';\n @State() pdfUrl = null;\n @State() template: ITemplate \| null = null;\n\n fields: ITemplateField[] = [];\n\n async componentWillLoad() {\n this.endpoint.loadSession();\n if (!this.endpoint.session) {\n console.log('[BUILD] Unable to start builder session, must be authenticated');\n return;\n }\n\n if (!this.templateId) {\n console.log(`[BUILD] No template ID specified, showing upload option`);\n this.step = 'create';\n return;\n }\n\n try {\n console.log(`[BUILD] Loading template ${this.templateId}`);\n await loadTemplate(this.endpoint, this.templateId);\n this.step = 'fields';\n } catch (e) {\n console.log('[BUILD] Error loading template', e);\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n }\n\n handleCancel(e: any) {\n console.log('Cancel', e.detail);\n this.step = '';\n }\n\n handleTemplateCreated(e: any) {\n console.log('Created', e.detail);\n this.step = 'properties';\n }\n\n handlePropertiesUpdated(e: any) {\n console.log('updated', e.detail);\n this.step = 'recipients';\n }\n\n handleRecipientsUpdated(e: any) {\n console.log('updated', e.detail);\n this.step = 'fields';\n }\n\n render() {\n return (\n <Host>\n {this.step === 'create' && <verdocs-template-create onCancel={e => this.handleCancel(e)} onNext={e => this.handleTemplateCreated(e)} />}\n {this.step === 'properties' && <verdocs-template-properties onCancel={e => this.handleCancel(e)} onNext={e => this.handlePropertiesUpdated(e)} />}\n {this.step === 'recipients' && <verdocs-template-recipients onCancel={e => this.handleCancel(e)} onNext={e => this.handleRecipientsUpdated(e)} />}\n {this.step === 'fields' && <verdocs-template-fields onCancel={e => this.handleCancel(e)} onNext={e => this.handleCancel(e)} />}\n </Host>\n );\n }\n}\n"],"version":3}

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

	@@ -1 +1 @@
1	- {"file":"verdocs-button-panel2.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,8xDAA8xD;;~~MCW~~/yD,kBAAkB;;;;IAkC7B,YAAO,GAAG,KAAK,CAAC;gBAzBO,EAAE;;EAEzB,kBAAkB;IAChB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACxC,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;KAC/B;IAED,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;;;KAG7D,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;MAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;IAED,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;KACvB;GACF;EAGD,MAAM,CAAC,CAAM;;IACX,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,MAAA,IAAI,CAAC,OAAO,0CAAE,eAAe,CAAC,WAAW,CAAC,CAAC;MAC3C,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAC;MACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;SAAM;MACL,MAAA,IAAI,CAAC,OAAO,0CAAE,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;MAC5C,MAAA,IAAI,CAAC,cAAc,0CAAE,MAAM,GAAG,KAAK,CAAC,SAAQ,CAAC,CAAC;MAC9C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MAEpB,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;MAC7C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;MAClC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;MACzC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC;MAC/B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC;MAChC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;MACjC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;MAClC,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,CAAC,CAAM,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;MAClD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACzC;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,CAAC,CAAM,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,GAAI,EAC9G,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,8BAA8B,2BAAuB,QAAQ,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAoB,CAAC,IACtI,gCAAuB,MAAM,EAAC,KAAK,EAAC,OAAO,GAAG,EAC9C,eAAQ,CACJ,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/controls/verdocs-button-panel/verdocs-button-panel.scss?tag=verdocs-button-panel","./src/components/controls/verdocs-button-panel/verdocs-button-panel.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-button-panel {\n font-family: $verdocs-primary-font;\n display: inline-block;\n\n .icon {\n display: inline-block;\n cursor: pointer;\n\n svg {\n fill: $light-border-color;\n }\n\n &:hover {\n svg {\n fill: $verdocs-grey-4;\n }\n }\n }\n}\n\n.verdocs-button-panel-content {\n font-family: $verdocs-primary-font;\n box-shadow: 0 0 10px 1px #999999;\n display: none;\n background: #ffffff;\n color: $label-color;\n width: 280px;\n font-weight: bold;\n padding: 15px;\n font-size: 14px;\n position: relative;\n border-radius: 4px;\n z-index: 10000;\n\n .arrow,\n .arrow::before {\n position: absolute;\n width: 8px;\n height: 8px;\n background: inherit;\n }\n\n .arrow {\n visibility: hidden;\n top: -4px;\n }\n\n .arrow::before {\n visibility: visible;\n content: '';\n transform: rotate(45deg);\n }\n\n &[data-show] {\n display: block;\n }\n\n &[data-popper-placement^='top'] > .arrow {\n bottom: -4px;\n }\n\n &[data-popper-placement^='bottom'] > .arrow {\n top: -4px;\n }\n\n &[data-popper-placement^='left'] > .arrow {\n right: -4px;\n }\n\n &[data-popper-placement^='right'] > .arrow {\n left: -4px;\n }\n\n h6 {\n color: $verdocs-grey-0;\n font-size: 16px;\n font-weight: bold;\n margin: 0 0 8px 0;\n }\n\n form {\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n }\n\n label {\n display: block;\n font-size: 14px;\n font-weight: bold;\n margin: 0 0 3px 0;\n color: $verdocs-grey-1;\n }\n\n input {\n flex: 1;\n height: 34px;\n display: flex;\n font-size: 14px;\n margin: 0 0 10px 0;\n }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop} from '@stencil/core';\n\n/*\n Displays a clickable icon. When clicked, a customizable drop-down panel will be displayed.\n /\n@Component({\n tag: 'verdocs-button-panel',\n styleUrl: 'verdocs-button-panel.scss',\n shadow: false,\n})\nexport class VerdocsButtonPanel {\n iconEl: HTMLDivElement;\n panelEl: HTMLDivElement;\n hiderEl?: HTMLDivElement;\n popperInstance: Instance;\n\n /\n SVG icon to display\n */\n @Prop() icon: string = '';\n\n componentDidRender() {\n document.body.appendChild(this.panelEl);\n if (this.popperInstance) {\n this.popperInstance.destroy();\n }\n\n this.popperInstance = createPopper(this.iconEl, this.panelEl, {\n // placement: 'top-end',\n // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n });\n }\n\n disconnectedCallback() {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n\n if (this.panelEl) {\n this.panelEl.remove();\n }\n }\n\n showing = false;\n toggle(e: any) {\n e.stopPropagation();\n\n if (this.showing) {\n this.panelEl?.removeAttribute('data-show');\n this.hiderEl?.remove();\n this.showing = false;\n } else {\n this.panelEl?.setAttribute('data-show', '');\n this.popperInstance?.update().catch(() => {});\n this.showing = true;\n\n this.hiderEl = document.createElement('div');\n this.hiderEl.style.zIndex = '100';\n this.hiderEl.style.position = 'absolute';\n this.hiderEl.style.top = '0px';\n this.hiderEl.style.left = '0px';\n this.hiderEl.style.right = '0px';\n this.hiderEl.style.bottom = '0px';\n this.hiderEl.onclick = (e: any) => this.toggle(e);\n document.body.appendChild(this.hiderEl);\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"icon\" innerHTML={this.icon} onClick={(e: any) => this.toggle(e)} ref={el => (this.iconEl = el)} />\n <div role=\"tooltip\" class=\"verdocs-button-panel-content\" data-popper-placement=\"bottom\" ref={el => (this.panelEl = el as HTMLDivElement)}>\n <div data-popper-arrow=\"true\" class=\"arrow\" />\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-button-panel2.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,8xDAA8xD;;MCmB/yD,kBAAkB;;;;IAkC7B,YAAO,GAAG,KAAK,CAAC;gBAzBO,EAAE;;EAEzB,kBAAkB;IAChB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACxC,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;KAC/B;IAED,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;;;KAG7D,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;MAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;IAED,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;KACvB;GACF;EAGD,MAAM,CAAC,CAAM;;IACX,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,MAAA,IAAI,CAAC,OAAO,0CAAE,eAAe,CAAC,WAAW,CAAC,CAAC;MAC3C,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAC;MACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;SAAM;MACL,MAAA,IAAI,CAAC,OAAO,0CAAE,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;MAC5C,MAAA,IAAI,CAAC,cAAc,0CAAE,MAAM,GAAG,KAAK,CAAC,SAAQ,CAAC,CAAC;MAC9C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MAEpB,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;MAC7C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;MAClC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;MACzC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC;MAC/B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC;MAChC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;MACjC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;MAClC,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,CAAC,CAAM,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;MAClD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACzC;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,CAAC,CAAM,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,GAAI,EAC9G,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,8BAA8B,2BAAuB,QAAQ,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAoB,CAAC,IACtI,gCAAuB,MAAM,EAAC,KAAK,EAAC,OAAO,GAAG,EAC9C,eAAQ,CACJ,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/controls/verdocs-button-panel/verdocs-button-panel.scss?tag=verdocs-button-panel","./src/components/controls/verdocs-button-panel/verdocs-button-panel.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-button-panel {\n font-family: $verdocs-primary-font;\n display: inline-block;\n\n .icon {\n display: inline-block;\n cursor: pointer;\n\n svg {\n fill: $light-border-color;\n }\n\n &:hover {\n svg {\n fill: $verdocs-grey-4;\n }\n }\n }\n}\n\n.verdocs-button-panel-content {\n font-family: $verdocs-primary-font;\n box-shadow: 0 0 10px 1px #999999;\n display: none;\n background: #ffffff;\n color: $label-color;\n width: 280px;\n font-weight: bold;\n padding: 15px;\n font-size: 14px;\n position: relative;\n border-radius: 4px;\n z-index: 10000;\n\n .arrow,\n .arrow::before {\n position: absolute;\n width: 8px;\n height: 8px;\n background: inherit;\n }\n\n .arrow {\n visibility: hidden;\n top: -4px;\n }\n\n .arrow::before {\n visibility: visible;\n content: '';\n transform: rotate(45deg);\n }\n\n &[data-show] {\n display: block;\n }\n\n &[data-popper-placement^='top'] > .arrow {\n bottom: -4px;\n }\n\n &[data-popper-placement^='bottom'] > .arrow {\n top: -4px;\n }\n\n &[data-popper-placement^='left'] > .arrow {\n right: -4px;\n }\n\n &[data-popper-placement^='right'] > .arrow {\n left: -4px;\n }\n\n h6 {\n color: $verdocs-grey-0;\n font-size: 16px;\n font-weight: bold;\n margin: 0 0 8px 0;\n }\n\n form {\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n }\n\n label {\n display: block;\n font-size: 14px;\n font-weight: bold;\n margin: 0 0 3px 0;\n color: $verdocs-grey-1;\n }\n\n input {\n flex: 1;\n height: 34px;\n display: flex;\n font-size: 14px;\n margin: 0 0 10px 0;\n }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop} from '@stencil/core';\n\n/*\n Displays a clickable icon suitable for display in a toolbar. When clicked, a customizable drop-down panel will be\n * displayed.\n \n \n ```html\n * <verdocs-button-panel icon=\"<svg.../>\">\n * <form>...</form>\n * </verdocs-button-panel>\n * ```\n /\n@Component({\n tag: 'verdocs-button-panel',\n styleUrl: 'verdocs-button-panel.scss',\n shadow: false,\n})\nexport class VerdocsButtonPanel {\n iconEl: HTMLDivElement;\n panelEl: HTMLDivElement;\n hiderEl?: HTMLDivElement;\n popperInstance: Instance;\n\n /\n SVG icon to display\n */\n @Prop() icon: string = '';\n\n componentDidRender() {\n document.body.appendChild(this.panelEl);\n if (this.popperInstance) {\n this.popperInstance.destroy();\n }\n\n this.popperInstance = createPopper(this.iconEl, this.panelEl, {\n // placement: 'top-end',\n // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n });\n }\n\n disconnectedCallback() {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n\n if (this.panelEl) {\n this.panelEl.remove();\n }\n }\n\n showing = false;\n toggle(e: any) {\n e.stopPropagation();\n\n if (this.showing) {\n this.panelEl?.removeAttribute('data-show');\n this.hiderEl?.remove();\n this.showing = false;\n } else {\n this.panelEl?.setAttribute('data-show', '');\n this.popperInstance?.update().catch(() => {});\n this.showing = true;\n\n this.hiderEl = document.createElement('div');\n this.hiderEl.style.zIndex = '100';\n this.hiderEl.style.position = 'absolute';\n this.hiderEl.style.top = '0px';\n this.hiderEl.style.left = '0px';\n this.hiderEl.style.right = '0px';\n this.hiderEl.style.bottom = '0px';\n this.hiderEl.onclick = (e: any) => this.toggle(e);\n document.body.appendChild(this.hiderEl);\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"icon\" innerHTML={this.icon} onClick={(e: any) => this.toggle(e)} ref={el => (this.iconEl = el)} />\n <div role=\"tooltip\" class=\"verdocs-button-panel-content\" data-popper-placement=\"bottom\" ref={el => (this.panelEl = el as HTMLDivElement)}>\n <div data-popper-arrow=\"true\" class=\"arrow\" />\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/verdocs-button2.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 const verdocsButtonCss = "verdocs-button button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;text-transform:uppercase;-ms-flex-pack:center;justify-content:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-weight:700;cursor:pointer;margin:0}verdocs-button button .icon{margin:0 12px}verdocs-button button .icon svg{fill:#ffffff;display:block}verdocs-button button .label{padding:0 12px}verdocs-button button:disabled{cursor:none}verdocs-button button.small{height:34px;font-size:13px}verdocs-button button.small .icon{margin:0 4px}verdocs-button button.small .icon svg{margin:2px 0 0 0;height:20px}verdocs-button button.small .label{padding:0 4px}verdocs-button button.normal{height:44px;font-size:14px}verdocs-button button.normal .icon.start{margin:0 4px 0 8px}verdocs-button button.normal .icon.end{margin:0 8px 0 4px}verdocs-button button.normal .icon svg{margin:2px 0 0 0;height:22px}verdocs-button button.normal .label{padding:0 10px}verdocs-button button.medium{height:52px;font-size:16px}verdocs-button button.medium .icon.start{margin:0 0 0 18px}verdocs-button button.medium .icon.end{margin:0 18px 0 0}verdocs-button button.medium .icon svg{margin:2px 0 0 0;height:26px}verdocs-button button.medium .label{padding:0 20px}verdocs-button button.large{height:60px;font-size:20px}verdocs-button button.large .icon.start{margin:0 0 0 24px}verdocs-button button.large .icon.end{margin:0 24px 0 0}verdocs-button button.large .icon svg{margin:2px 0 0 0;height:32px}verdocs-button button.large .label{padding:0 34px}verdocs-button button.standard{background:#55bc81;border-radius:4px;outline:none;border:none;color:white}verdocs-button button.standard:disabled{background-color:#999999;cursor:default}verdocs-button button.standard:active:not([disabled]){-webkit-filter:brightness(110%);filter:brightness(110%)}verdocs-button button.text{color:#4c56cb;background:transparent;font-weight:500;padding:0 4px;outline:none;border:none}verdocs-button button.text:disabled{color:#999999;cursor:none}verdocs-button button.text:active:not([disabled]){-webkit-filter:brightness(130%);filter:brightness(130%)}verdocs-button button.text .icon svg{fill:#4c56cb}verdocs-button button.outline{border:1px solid #4c56cb;color:#4c56cb;outline:none;background:transparent;border-radius:4px;padding:0 20px}verdocs-button button.outline:disabled{color:#999999;cursor:none;border:1px solid #999999}verdocs-button button.outline:active{background:#4c56cb;color:white}verdocs-button button.outline .icon svg{fill:#4c56cb}";
@@ -6,7 +6,6 @@ const VerdocsButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
-    this.press = createEvent(this, "press", 3);
     this.label = undefined;
     this.startIcon = null;
     this.endIcon = null;
@@ -15,13 +14,8 @@ const VerdocsButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.variant = 'standard';
     this.disabled = false;
   }
-  handleClick(e) {
-    var _a;
-    e.stopPropagation();
-    (_a = this.press) === null || _a === void 0 ? void 0 : _a.emit();
-  }
   render() {
-    return (h("button", { disabled: this.disabled, type: this.type, onClick: e => this.handleClick(e), class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { class: "label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
+    return (h("button", { disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { class: "label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
   }
   static get style() { return verdocsButtonCss; }
 }, [0, "verdocs-button", {

package/dist/components/verdocs-button2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-button2.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,6gFAA6gF;;~~MCqBzhF~~,aAAa~~;;;;;;~~qBASW,IAAI;mBAKN,IAAI;gBAKmB,QAAQ;gBAKlB,QAAQ;mBAKH,UAAU;oBAKjC,KAAK;;~~EAOjC~~,~~WAAW,CAAC,CAAM;;IAChB,CAAC,CAAC,eAAe,EAAE,CAAC;IACpB,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,EAAE,CAAC;GACpB;EAED,~~MAAM;IACJ,QACE,cAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,~~OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,~~KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,~~IACpI~~,IAAI,CAAC,SAAS,GAAG,YAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,GAAI,GAAG,IAAI,EAC/E,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,EACtC,IAAI,CAAC,OAAO,GAAG,YAAM,KAAK,EAAC,UAAU,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,GAAG,IAAI,CAClE,EACT;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/controls/verdocs-button/verdocs-button.scss?tag=verdocs-button","./src/components/controls/verdocs-button/verdocs-button.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-button {\n button {\n font-family: $verdocs-primary-font;\n text-transform: uppercase;\n justify-content: center;\n display: inline-flex;\n align-items: center;\n font-weight: 700;\n cursor: pointer;\n margin: 0;\n\n .icon {\n margin: 0 12px;\n\n svg {\n fill: $verdocs-grey-4;\n display: block;\n }\n }\n\n .label {\n padding: 0 12px;\n }\n\n &:disabled {\n cursor: none;\n }\n\n // Small-sized button size adjustments\n &.small {\n height: 34px;\n font-size: 13px;\n\n .icon {\n margin: 0 4px;\n\n svg {\n margin: 2px 0 0 0;\n height: 20px;\n }\n }\n\n .label {\n padding: 0 4px;\n }\n }\n\n // Normal-sized button size adjustments\n &.normal {\n height: 44px;\n font-size: 14px;\n\n .icon.start {\n margin: 0 4px 0 8px;\n }\n\n .icon.end {\n margin: 0 8px 0 4px;\n }\n\n .icon {\n svg {\n margin: 2px 0 0 0;\n height: 22px;\n }\n }\n\n .label {\n padding: 0 10px;\n }\n }\n\n // Medium-sized button size adjustments\n &.medium {\n height: 52px;\n font-size: 16px;\n\n .icon.start {\n margin: 0 0 0 18px;\n }\n\n .icon.end {\n margin: 0 18px 0 0;\n }\n\n .icon {\n svg {\n margin: 2px 0 0 0;\n height: 26px;\n }\n }\n\n .label {\n padding: 0 20px;\n }\n }\n\n // Large-sized button size adjustments\n &.large {\n height: 60px;\n font-size: 20px;\n\n .icon.start {\n margin: 0 0 0 24px;\n }\n\n .icon.end {\n margin: 0 24px 0 0;\n }\n\n .icon {\n svg {\n margin: 2px 0 0 0;\n height: 32px;\n }\n }\n\n .label {\n padding: 0 34px;\n }\n }\n\n // Standard variant is a solid color\n &.standard {\n background: $verdocs-green;\n border-radius: 4px;\n outline: none;\n border: none;\n color: white;\n\n &:disabled {\n background-color: $disabled-color;\n cursor: default;\n }\n\n &:active:not([disabled]) {\n filter: brightness(110%);\n }\n }\n\n // Text variant is just a label\n &.text {\n color: $secondary-color;\n background: transparent;\n font-weight: 500;\n padding: 0 4px;\n outline: none;\n border: none;\n\n &:disabled {\n color: $disabled-color;\n cursor: none;\n }\n\n &:active:not([disabled]) {\n filter: brightness(130%);\n }\n\n .icon {\n svg {\n fill: $secondary-color;\n }\n }\n }\n\n // Standard variant is a solid color\n &.outline {\n border: 1px solid $secondary-color;\n color: $secondary-color;\n outline: none;\n background: transparent;\n border-radius: 4px;\n padding: 0 20px;\n\n &:disabled {\n color: $disabled-color;\n cursor: none;\n border: 1px solid $disabled-color;\n }\n\n &:active {\n background: $secondary-color;\n color: white;\n }\n\n .icon {\n svg {\n fill: $secondary-color;\n }\n }\n }\n }\n}\n","import {Component, Prop, h~~, Event, EventEmitter~~} from '@stencil/core';\n\n/*\n Display a simple button.\n \n Three variants are supported. `standard` and `outline` buttons look like traditional form buttons and are ideal candidates for 'Ok' and\n * 'Cancel' options in most cases. `text` buttons are intended to be used inline in content blocks or for more subtle button options.\n * (Auth uses text buttons for the Forgot Password and Sign Up options.)\n \n Four sizes are also supported. Most use cases will call for the `normal` size, but a `small` size is ideal for more subtle controls, such\n * as pagination or other secondary functions. `medium` buttons are slightly larger to provide balance in forms where other items are also\n * bigger, and `large` buttons are for cases where the page has mostly white-space and the buttons need to fill more space.\n \n Icons may be placed either before (\"start\") or after (\"end\") the button label. Icons should be SVG objects passed as strings and will\n * be rendered as HTML inside the button label area. It is important that the root <SVG> tag contains a default `fill=\"#ffffff\"` setting\n * for the base color, and that child elements below it do not. This allows the button color to carry into the icon properly.\n /\n@Component({\n tag: 'verdocs-button',\n styleUrl: 'verdocs-button.scss',\n})\nexport class VerdocsButton {\n /\n The label for the button.\n /\n @Prop() label!: string;\n\n /\n If desired, a prefix icon for the button\n /\n @Prop() startIcon: string \| null = null;\n\n /\n If desired, a suffix icon for the button\n /\n @Prop() endIcon: string \| null = null;\n\n /\n The size (height) of the button.\n /\n @Prop() size: 'small' \| 'normal' \| 'medium' \| 'large' = 'normal';\n\n /\n The type of the button.\n /\n @Prop() type: 'button' \| 'submit' \| 'reset' = 'button';\n\n /\n The display variant of the button.\n /\n @Prop() variant: 'standard' \| 'text' \| 'outline' = 'standard';\n\n /\n Whether the button should be disabled.\n /\n @Prop() disabled: boolean = false;\n\n /\n Event fired when the button is pressed.\n */\n @Event({composed: true, bubbles: false}) press!: EventEmitter;\n\n handleClick(e: any) {\n e.stopPropagation();\n this.press?.emit();\n }\n\n render() {\n return (\n <button disabled={this.disabled} type={this.type} ~~onClick={e => this.handleClick(e)}~~ class={`${this.variant} ${this.size} ${this.type}`}>\n {this.startIcon ? <span class=\"icon start\" innerHTML={this.startIcon} /> : null}\n <span class=\"label\">{this.label}</span>\n {this.endIcon ? <span class=\"icon end\" innerHTML={this.endIcon} /> : null}\n </button>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-button2.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,6gFAA6gF;;MCyBzhF,aAAa;;;;;qBASW,IAAI;mBAKN,IAAI;gBAKmB,QAAQ;gBAKlB,QAAQ;mBAKH,UAAU;oBAKjC,KAAK;;EAEjC,MAAM;IACJ,QACE,cAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,IACjG,IAAI,CAAC,SAAS,GAAG,YAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,GAAI,GAAG,IAAI,EAC/E,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,EACtC,IAAI,CAAC,OAAO,GAAG,YAAM,KAAK,EAAC,UAAU,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,GAAG,IAAI,CAClE,EACT;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/controls/verdocs-button/verdocs-button.scss?tag=verdocs-button","./src/components/controls/verdocs-button/verdocs-button.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-button {\n button {\n font-family: $verdocs-primary-font;\n text-transform: uppercase;\n justify-content: center;\n display: inline-flex;\n align-items: center;\n font-weight: 700;\n cursor: pointer;\n margin: 0;\n\n .icon {\n margin: 0 12px;\n\n svg {\n fill: $verdocs-grey-4;\n display: block;\n }\n }\n\n .label {\n padding: 0 12px;\n }\n\n &:disabled {\n cursor: none;\n }\n\n // Small-sized button size adjustments\n &.small {\n height: 34px;\n font-size: 13px;\n\n .icon {\n margin: 0 4px;\n\n svg {\n margin: 2px 0 0 0;\n height: 20px;\n }\n }\n\n .label {\n padding: 0 4px;\n }\n }\n\n // Normal-sized button size adjustments\n &.normal {\n height: 44px;\n font-size: 14px;\n\n .icon.start {\n margin: 0 4px 0 8px;\n }\n\n .icon.end {\n margin: 0 8px 0 4px;\n }\n\n .icon {\n svg {\n margin: 2px 0 0 0;\n height: 22px;\n }\n }\n\n .label {\n padding: 0 10px;\n }\n }\n\n // Medium-sized button size adjustments\n &.medium {\n height: 52px;\n font-size: 16px;\n\n .icon.start {\n margin: 0 0 0 18px;\n }\n\n .icon.end {\n margin: 0 18px 0 0;\n }\n\n .icon {\n svg {\n margin: 2px 0 0 0;\n height: 26px;\n }\n }\n\n .label {\n padding: 0 20px;\n }\n }\n\n // Large-sized button size adjustments\n &.large {\n height: 60px;\n font-size: 20px;\n\n .icon.start {\n margin: 0 0 0 24px;\n }\n\n .icon.end {\n margin: 0 24px 0 0;\n }\n\n .icon {\n svg {\n margin: 2px 0 0 0;\n height: 32px;\n }\n }\n\n .label {\n padding: 0 34px;\n }\n }\n\n // Standard variant is a solid color\n &.standard {\n background: $verdocs-green;\n border-radius: 4px;\n outline: none;\n border: none;\n color: white;\n\n &:disabled {\n background-color: $disabled-color;\n cursor: default;\n }\n\n &:active:not([disabled]) {\n filter: brightness(110%);\n }\n }\n\n // Text variant is just a label\n &.text {\n color: $secondary-color;\n background: transparent;\n font-weight: 500;\n padding: 0 4px;\n outline: none;\n border: none;\n\n &:disabled {\n color: $disabled-color;\n cursor: none;\n }\n\n &:active:not([disabled]) {\n filter: brightness(130%);\n }\n\n .icon {\n svg {\n fill: $secondary-color;\n }\n }\n }\n\n // Standard variant is a solid color\n &.outline {\n border: 1px solid $secondary-color;\n color: $secondary-color;\n outline: none;\n background: transparent;\n border-radius: 4px;\n padding: 0 20px;\n\n &:disabled {\n color: $disabled-color;\n cursor: none;\n border: 1px solid $disabled-color;\n }\n\n &:active {\n background: $secondary-color;\n color: white;\n }\n\n .icon {\n svg {\n fill: $secondary-color;\n }\n }\n }\n }\n}\n","import {Component, Prop, h} from '@stencil/core';\n\n/*\n Display a simple button.\n \n Three variants are supported. `standard` and `outline` buttons look like traditional form buttons and are ideal candidates for 'Ok' and\n * 'Cancel' options in most cases. `text` buttons are intended to be used inline in content blocks or for more subtle button options.\n * (Auth uses text buttons for the Forgot Password and Sign Up options.)\n \n Four sizes are also supported. Most use cases will call for the `normal` size, but a `small` size is ideal for more subtle controls, such\n * as pagination or other secondary functions. `medium` buttons are slightly larger to provide balance in forms where other items are also\n * bigger, and `large` buttons are for cases where the page has mostly white-space and the buttons need to fill more space.\n \n Icons may be placed either before (\"start\") or after (\"end\") the button label. Icons should be SVG objects passed as strings and will\n * be rendered as HTML inside the button label area. It is important that the root <SVG> tag contains a default `fill=\"#ffffff\"` setting\n * for the base color, and that child elements below it do not. This allows the button color to carry into the icon properly.\n \n ```html\n * <verdocs-button label=\"OK\" onClick={() => (console.log('OK clicked'))} />\n * ```\n /\n@Component({\n tag: 'verdocs-button',\n styleUrl: 'verdocs-button.scss',\n})\nexport class VerdocsButton {\n /\n The label for the button.\n /\n @Prop() label!: string;\n\n /\n If desired, a prefix icon for the button.\n /\n @Prop() startIcon: string \| null = null;\n\n /\n If desired, a suffix icon for the button.\n /\n @Prop() endIcon: string \| null = null;\n\n /\n The size (height) of the button.\n /\n @Prop() size: 'small' \| 'normal' \| 'medium' \| 'large' = 'normal';\n\n /\n The type of the button.\n /\n @Prop() type: 'button' \| 'submit' \| 'reset' = 'button';\n\n /\n The display variant of the button.\n /\n @Prop() variant: 'standard' \| 'text' \| 'outline' = 'standard';\n\n /\n Whether the button should be disabled.\n */\n @Prop() disabled: boolean = false;\n\n render() {\n return (\n <button disabled={this.disabled} type={this.type} class={`${this.variant} ${this.size} ${this.type}`}>\n {this.startIcon ? <span class=\"icon start\" innerHTML={this.startIcon} /> : null}\n <span class=\"label\">{this.label}</span>\n {this.endIcon ? <span class=\"icon end\" innerHTML={this.endIcon} /> : null}\n </button>\n );\n }\n}\n"],"version":3}

package/dist/components/verdocs-checkbox2.js CHANGED Viewed

@@ -1,23 +1,18 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const verdocsCheckboxCss = "verdocs-checkbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:20px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-checkbox.disabled{opacity:0.5}verdocs-checkbox.hide{display:none}verdocs-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-checkbox input[type=checkbox]{width:18px;height:18px}";
+const verdocsCheckboxCss = "verdocs-checkbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:20px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-checkbox.disabled{opacity:0.5}verdocs-checkbox.hide{display:none}verdocs-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:#3f9d67}";
 const VerdocsCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.selected = createEvent(this, "selected", 7);
     this.checked = false;
     this.name = '';
     this.value = '';
     this.disabled = false;
   }
-  handleChange(e) {
-    console.log('changed', e.target.checked);
-    this.selected.emit({ value: this.value });
-  }
   render() {
-    return (h(Host, { class: { disabled: this.disabled } }, h("input", { type: "checkbox", value: this.value, name: this.name, id: `verdocs-checkbox-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled, onChange: e => this.handleChange(e) })));
+    return (h(Host, { class: { disabled: this.disabled } }, h("input", { type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled, id: `verdocs-checkbox-${this.name}-${this.value}` })));
   }
   static get style() { return verdocsCheckboxCss; }
 }, [0, "verdocs-checkbox", {